.tc-page{--tc-class:var(--coral);--tc-gold:#e8b64c;--tc-green:#4fcf6e;--tc-locked:rgba(198,175,141,.35);--tc-panel:#03111a;width:min(100% - 64px,1216px);margin:auto;padding:40px 0 48px}
.tc-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.tc-kicker{color:var(--tc-class);font:700 11px var(--display);letter-spacing:.16em;text-transform:uppercase}
.tc-header h1{margin-top:9px;font-size:44px;font-weight:700;line-height:1.15;letter-spacing:.02em}
.tc-lede{max-width:62ch;margin-top:10px;color:var(--muted)}
.tc-points{display:flex;margin:0;padding-bottom:4px}.tc-points>div{padding:0 18px;border-left:1px solid var(--border)}.tc-points>div:first-child{padding-left:0;border-left:0}.tc-points>div:last-child{padding-right:0}
.tc-points dt{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tc-points dd{display:flex;align-items:baseline;gap:5px;margin:5px 0 0;font-family:var(--display)}.tc-points strong{font-size:26px;line-height:1}.tc-points dd span{color:var(--muted);font-size:14px}
.tc-classes{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tc-class{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid transparent;border-radius:6px}.tc-class img{display:block;width:34px;height:34px;border-radius:4px;opacity:.65;transition:opacity .12s ease}
.tc-class:hover img,.tc-class[aria-current=page] img{opacity:1}.tc-class:hover{background:rgba(244,240,235,.05)}.tc-class[aria-current=page]{border-color:var(--tc-class)}
.tc-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tc-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--text);font:700 14px var(--body);white-space:nowrap}
.tc-button svg{width:16px;height:16px}.tc-button:hover:not(:disabled){border-color:var(--muted)}.tc-button:disabled{cursor:not-allowed;opacity:.45}
.tc-button.is-primary{border-color:var(--coral);background:var(--coral);color:var(--bg)}.tc-button.is-primary:hover:not(:disabled){border-color:var(--text);background:var(--text)}
.tc-icon-button{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--muted)}.tc-icon-button svg{width:15px;height:15px}
.tc-icon-button:hover:not(:disabled){color:var(--text);background:rgba(244,240,235,.08)}.tc-icon-button:disabled{cursor:default;opacity:.35}
.tc-notice{min-height:1.5em;margin:10px 0 8px;color:var(--muted);font-size:14px}.tc-notice.is-error,.tc-empty.is-error{color:#ffb4a3}
.tc-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--tc-panel)}
.tc-tab{position:relative;isolation:isolate;min-width:0;padding:14px 16px 22px;background:var(--tc-panel) var(--tc-background) center/cover no-repeat}.tc-tab::before{content:'';position:absolute;z-index:-1;inset:0;background:rgba(3,17,26,.8)}
.tc-tab+.tc-tab{border-left:1px solid rgba(244,240,235,.1)}
.tc-tab-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(244,240,235,.1)}.tc-tab-head img{width:28px;height:28px;border-radius:4px}
.tc-tab-head h2{flex:1;min-width:0;overflow:hidden;font-size:16px;font-weight:700;letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}.tc-tab-points{font:700 15px var(--display)}
.tc-tree{--tc-node:44px;position:relative;width:min(100%,272px);aspect-ratio:4/var(--tc-rows);margin:18px auto 0}
.tc-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.tc-arrow{fill:none;stroke:rgba(244,240,235,.2);stroke-width:3px;vector-effect:non-scaling-stroke}.tc-arrow.is-open{stroke:rgba(79,207,110,.7)}.tc-arrow.is-active{stroke:var(--tc-gold)}
.tc-talent{position:absolute;z-index:1;left:calc((var(--tc-col) + .5) * 25%);top:calc((var(--tc-row) + .5) * 100% / var(--tc-rows));width:var(--tc-node);height:var(--tc-node);transform:translate(-50%,-50%);border:2px solid var(--tc-locked);border-radius:6px;background:#000;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:border-color .12s ease}
.tc-talent img{display:block;width:100%;height:100%;border-radius:4px;pointer-events:none;transition:filter .12s ease,opacity .12s ease}
.tc-talent.is-locked img{filter:grayscale(1);opacity:.45}.tc-talent.is-locked:hover img{filter:grayscale(.6);opacity:.7}
.tc-talent.is-available,.tc-talent.is-partial{border-color:var(--tc-green)}.tc-talent.is-maxed{border-color:var(--tc-gold)}
.tc-talent:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tc-rank{position:absolute;right:-9px;bottom:-9px;min-width:26px;padding:0 4px;border-radius:4px;background:var(--tc-panel);color:rgba(244,240,235,.5);font:700 11px/18px var(--display);text-align:center;pointer-events:none}
.is-available .tc-rank,.is-partial .tc-rank{color:var(--tc-green)}.is-maxed .tc-rank{color:var(--tc-gold)}
.tc-gate{position:absolute;right:0;left:0;top:calc(var(--tc-gate-row) * 100% / var(--tc-rows));height:0;border-top:1px dashed rgba(244,240,235,.28)}
.tc-gate span{position:absolute;top:-10px;left:-4px;padding:0 5px;border-radius:4px;background:var(--tc-panel);color:var(--muted);font:700 11px/20px var(--display)}
.tc-empty{margin:32px 0;color:var(--muted)}
.tc-saved{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.tc-saved-head{display:flex;align-items:baseline;gap:12px}.tc-saved-head h2{font-size:20px;font-weight:700;letter-spacing:.02em}.tc-saved-head span{color:var(--muted);font-size:13px;font-weight:700}
.tc-save-form{display:flex;flex-wrap:wrap;gap:8px;max-width:46rem;margin-top:14px}
.tc-save-form input,.tc-rename input{flex:1;min-width:12rem;min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--text);font:15px var(--body)}
.tc-rename input{min-width:0}.tc-save-form input:focus,.tc-rename input:focus{border-color:var(--cyan);outline:none}
.tc-saved-empty{margin-top:12px;color:var(--muted);font-size:15px}
.tc-text-link{display:inline-flex;align-items:center;gap:6px;color:var(--coral);font-weight:700}.tc-text-link svg{width:15px;height:15px}.tc-text-link:hover{text-decoration:underline;text-underline-offset:4px}
.tc-saved-list{display:grid;gap:4px;margin:14px 0 0;padding:0;list-style:none}
.tc-saved-list li{display:flex;align-items:center;gap:12px;padding:6px 8px;border:1px solid transparent;border-radius:6px}.tc-saved-list li:hover{background:rgba(244,240,235,.04)}
.tc-saved-list li.is-current{border-color:var(--border);background:rgba(244,240,235,.06)}.tc-saved-list img{width:32px;height:32px;flex:none;border-radius:4px}
.tc-saved-open{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;gap:2px;padding:0;border:0;background:none;color:inherit;text-align:left}
.tc-saved-open strong{max-width:100%;overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.tc-saved-open span{color:var(--muted);font-size:13px}.tc-saved-open:hover strong{color:var(--coral)}
.tc-rename{display:flex;min-width:0;flex:1;gap:4px}.tc-saved-actions{display:flex;align-items:center;gap:2px}
.tc-button.is-danger{border-color:#c95b5b;background:#a13d3d;color:#fff}
.tc-footnote{margin-top:28px;color:var(--muted);font-size:13px}
@media(max-width:1000px){.tc-stage{grid-template-columns:minmax(0,1fr)}.tc-tab+.tc-tab{border-top:1px solid rgba(244,240,235,.1);border-left:0}}
@media(max-width:700px){.tc-page{width:calc(100% - 32px);padding-top:28px}.tc-header{grid-template-columns:minmax(0,1fr);gap:16px}.tc-header h1{font-size:36px}.tc-points>div{padding:0 12px}.tc-points strong{font-size:22px}.tc-class{width:40px;height:40px}.tc-class img{width:30px;height:30px}.tc-tree{--tc-node:40px}}
@media(prefers-reduced-motion:reduce){.tc-class img,.tc-talent,.tc-talent img{transition:none}}
