:root { --bg:#080c11; --panel:#0e141b; --panel2:#111922; --line:#22303d; --text:#ecf3f4; --muted:#81909c; --cyan:#5ee7e7; --amber:#d9a441; --red:#ee765f; font-family:Manrope,system-ui,sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 68% -20%,#18313a 0,transparent 35%),linear-gradient(180deg,#080d12,#080b0f); min-height:100vh; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 75%); }
button,input,select { font:inherit; }
button,select { cursor:pointer; }
button { color:inherit; }
.mobile-professions,.mobile-nav-heading,.sheet-close,.sheet-handle { display:none; }
header { height:76px; padding:0 max(28px,calc((100vw - 1500px)/2)); border-bottom:1px solid #1b2731; display:flex; align-items:center; justify-content:space-between; background:rgba(8,12,17,.88); backdrop-filter:blur(16px); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; letter-spacing:.16em; }
.brand-logo { display:block; width:36px !important; height:36px !important; min-width:36px; max-width:36px; min-height:36px; max-height:36px; object-fit:contain; flex:0 0 36px; filter:drop-shadow(0 0 7px rgba(94,231,231,.2)); }
.brand b,.brand small { display:block; } .brand b { font-size:13px; } .brand small { color:#6f818d; font:500 8px DM Mono; margin-top:3px; }
header nav { display:flex; gap:8px; } header button,.summary-actions button { border:1px solid var(--line); background:#111922; padding:10px 15px; border-radius:5px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
header button.primary { color:#081012; background:var(--cyan); border-color:var(--cyan); }
main { max-width:1500px; margin:auto; padding:54px 28px 80px; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:24px; }
.hero p { color:#8c9ba5; margin:10px 0 0; max-width:580px; }
.eyebrow { color:var(--cyan); font:500 9px DM Mono; letter-spacing:.2em; text-transform:uppercase; } .eyebrow i { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 9px var(--cyan); margin-right:8px; }
.species { min-width:190px; } .species span { display:block; color:var(--muted); font:9px DM Mono; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.species select { width:100%; color:var(--text); background:#0e151c; border:1px solid var(--line); border-radius:4px; padding:11px 13px; outline:none; }
.workspace { display:grid; grid-template-columns:248px minmax(500px,1fr) 310px; gap:14px; align-items:start; }
.panel { background:linear-gradient(145deg,rgba(17,25,34,.96),rgba(11,17,23,.97)); border:1px solid var(--line); border-radius:7px; box-shadow:0 16px 35px rgba(0,0,0,.16); }
.profession-nav { overflow:hidden; position:sticky; top:90px; max-height:calc(100vh - 108px); }
.nav-search { margin:14px; display:flex; align-items:center; gap:8px; background:#090e13; border:1px solid var(--line); padding:9px 11px; border-radius:4px; color:var(--muted); }
.nav-search input { border:0; outline:0; background:none; color:var(--text); min-width:0; width:100%; font-size:11px; }
.category-filter { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin:0 14px 8px; padding:3px; border:1px solid #1d2933; background:#0a0f14; border-radius:4px; }
.category-filter button { min-width:0; border:0; color:#657580; background:none; font-size:9px; padding:7px 3px; border-radius:3px; }
.category-filter button.active { background:#17353a; color:var(--cyan); }
.nav-toggle { display:flex; margin:0 14px 12px; padding:3px; border:1px solid #1d2933; background:#0a0f14; border-radius:4px; }
.nav-toggle button { flex:1; border:0; color:#657580; background:none; font-size:10px; padding:7px; border-radius:3px; } .nav-toggle button.active { background:#1b2731; color:var(--text); }
.profession-list { overflow-y:auto; overflow-x:hidden; max-height:calc(100vh - 270px); min-height:0; padding:0 8px 16px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#3a505e transparent; }
.profession-list::-webkit-scrollbar { width:8px; }.profession-list::-webkit-scrollbar-thumb { background:#3a505e; border-radius:8px; }.profession-list::-webkit-scrollbar-track { background:transparent; }
.profession-group>span { display:block; color:#596a76; font:500 8px DM Mono; letter-spacing:.16em; text-transform:uppercase; padding:13px 8px 7px; }
.profession-group button { width:100%; display:flex; align-items:center; text-align:left; gap:9px; border:1px solid transparent; border-radius:4px; background:transparent; padding:8px; }
.profession-group button:hover { background:#131d25; } .profession-group button.active { background:#10272b; border-color:#24535a; }
.profession-group button>i { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:4px; border:1px solid #30404b; color:#9cabb4; font-style:normal; font:500 10px DM Mono; }
.profession-group button.active>i { border-color:var(--cyan); color:var(--cyan); background:#17363a; }
.profession-group button>span { font-size:12px; line-height:1.25; font-weight:700; flex:1; }.profession-group button small { display:block; color:#71838e; font-size:9px; line-height:1.3; font-weight:500; margin-top:3px; }.profession-group button>b { color:#485a66; }
.center { min-width:0; }.tree-panel { padding:22px; min-height:730px; overflow:hidden; }
.tree-heading { display:flex; align-items:end; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid #1d2932; }.tree-heading h2 { margin:5px 0 0; font-size:22px; letter-spacing:-.03em; }.tree-key { display:flex; gap:13px; color:#6d7c86; font:8px DM Mono; text-transform:uppercase; }.tree-key span { display:flex; align-items:center; gap:5px; }.dot { width:6px;height:6px;border-radius:50%; background:#52606a; }.dot.trained { background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.tree-canvas { padding:28px 0 6px; position:relative; }.master-row,.novice-row { max-width:210px; margin:auto; }.branches { display:grid; grid-template-columns:repeat(4,minmax(105px,1fr)); gap:10px; margin:25px 0; position:relative; }
.branches:before,.branches:after { content:""; position:absolute; left:12.5%; right:12.5%; height:1px; background:#2d404c; }.branches:before { top:-13px; }.branches:after { bottom:-13px; }
.branch { display:flex; flex-direction:column; gap:9px; position:relative; }.branch:before,.branch:after { content:""; position:absolute; width:1px; background:#2d404c; left:50%; z-index:0; }.branch:before { height:13px; top:-13px; }.branch:after { height:13px; bottom:-13px; }
.branch-destinations { height:calc(var(--destination-rows, 0) * 19px); min-height:calc(var(--destination-rows, 0) * 19px); display:flex; flex-direction:column; justify-content:end; gap:3px; position:relative; z-index:2; overflow:hidden; }.branch-destinations.empty { pointer-events:none; }.branch-destinations button { width:100%; min-height:16px; border:0; background:transparent; color:var(--cyan); padding:1px 3px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:500 10px/1.35 DM Mono; }.branch-destinations button:hover { color:#d8ffff; text-decoration:underline; }.branch-destinations button span { color:#80939d; }.branch-destinations button b { float:right; color:#5ee7e7; }.skill-card { position:relative; z-index:1; width:100%; height:72px; min-height:72px; max-height:72px; display:flex; align-items:center; gap:8px; text-align:left; padding:9px; overflow:hidden; border:1px solid #2a3944; border-radius:5px; background:linear-gradient(150deg,#131d25,#0d141b); transition:.16s ease; }
.skill-card { padding:0; gap:0; }
.skill-toggle { width:100%; height:100%; min-width:0; display:flex; align-items:center; gap:8px; border:0; background:transparent; color:inherit; padding:9px 30px 9px 9px; text-align:left; }
.skill-info { position:absolute; z-index:2; right:5px; top:5px; width:24px; height:24px; display:grid; place-items:center; border:1px solid #344853; border-radius:50%; background:#0c141a; color:#80949e; font:600 10px DM Mono; }
.skill-info:hover,.skill-info:focus-visible { border-color:var(--cyan); color:var(--cyan); background:#122a2e; outline:none; }
.skill-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:-3px; border-radius:4px; }
.skill-card:hover,.skill-card.focused { transform:translateY(-1px); border-color:#637681; }.skill-card.trained { border-color:#3ab7ba; background:linear-gradient(150deg,#173439,#10252a); box-shadow:inset 0 0 0 1px rgba(94,231,231,.07),0 0 18px rgba(62,205,207,.05); }
.skill-status { width:24px;height:24px;flex:none;display:grid;place-items:center;border:1px solid #3b4b56;border-radius:50%;color:#70818b;font:12px DM Mono; }.trained .skill-status { color:#081012;background:var(--cyan);border-color:var(--cyan); }.skill-copy { min-width:0; overflow:hidden; }.skill-copy strong { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:12px;line-height:1.3; }.skill-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#80919b;font:9px/1.35 DM Mono;margin-top:5px; }.skill-card.master { border-color:#816832; }.skill-card.novice { border-style:dashed; }
.right-rail { display:grid; gap:14px; position:sticky; top:90px; max-height:calc(100vh - 105px); overflow:auto; scrollbar-width:none; }.build-summary,.detail-panel { padding:19px; }.summary-top { display:flex;justify-content:space-between;align-items:start; }.summary-top h3,.detail-panel h3 { margin:5px 0 0;font-size:17px; }.remaining { color:var(--cyan);font:500 27px DM Mono;text-align:right; }.remaining.warning { color:var(--amber); }.remaining small { display:block;color:#66808a;font-size:7px;letter-spacing:.12em;margin-top:3px; }.meter { height:4px;background:#1f2b34;border-radius:4px;overflow:hidden;margin-top:18px; }.meter i { display:block;height:100%;background:linear-gradient(90deg,#3daeb2,var(--cyan));box-shadow:0 0 8px var(--cyan); }.meter-label { display:flex;justify-content:space-between;color:#62727d;font:7px DM Mono;text-transform:uppercase;margin-top:6px; }.summary-actions { display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:17px 0; }.summary-actions button:first-child { color:#071012;background:var(--cyan);border-color:var(--cyan); }.summary-actions .ghost { grid-column:1/-1;background:transparent;color:#687984; }.summary-section,.detail-section { border-top:1px solid #1d2a33;padding-top:15px;margin-top:15px; }.summary-section h4,.detail-section h4 { margin:0 0 10px;color:#82939d;font:500 8px DM Mono;letter-spacing:.14em;text-transform:uppercase; }.stat { display:flex;justify-content:space-between;gap:10px;padding:5px 0;color:#9babB5;font-size:9px; }.stat b { color:var(--cyan);font:500 9px DM Mono; }.empty { color:#657580;font-size:9px;line-height:1.5; }.detail-pills { display:flex;flex-wrap:wrap;gap:5px;margin-top:13px; }.detail-pills span,.tag-list span { color:#8da0aa;border:1px solid #2b3b46;background:#0a1117;border-radius:3px;padding:5px 7px;font:7px DM Mono; }.tag-list { display:flex;flex-wrap:wrap;gap:5px; }.path-list { display:grid;gap:4px; }.path-list button { text-align:left;background:transparent;border:0;color:#82949e;padding:3px 0;font-size:8px; }
footer { max-width:1500px;margin:auto;border-top:1px solid #17222a;padding:24px 28px 35px;display:flex;justify-content:space-between;color:#465660;font:7px DM Mono;letter-spacing:.08em; }.toast { position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#e6f4f3;color:#0a1115;padding:11px 18px;border-radius:4px;font-size:10px;font-weight:700;box-shadow:0 12px 40px #000;z-index:20; }.mobile-budget { display:none; }
@media(max-width:1150px){.workspace{grid-template-columns:220px 1fr}.right-rail{grid-column:1/-1;position:static;grid-template-columns:1fr 1fr;max-height:none;overflow:visible}.profession-nav{top:88px}.tree-panel{min-height:0}}
@media(max-width:760px){header{height:64px;padding:0 16px}.brand small,header nav button:first-child{display:none}header button{padding:9px 11px}main{padding:24px 14px 55px}.hero{align-items:start}.hero p{font-size:12px}.species{min-width:125px}.workspace{display:block}.profession-nav{position:static;max-height:none;margin-bottom:12px}.profession-list{display:none}.nav-toggle,.category-filter{display:none}.center{overflow-x:auto}.tree-panel{min-width:650px;padding:16px}.right-rail{display:block}.right-rail .panel{margin-top:12px}.mobile-budget{display:block;margin-bottom:12px;color:var(--cyan);font:9px DM Mono}.branches{gap:7px}.skill-card{padding:7px}.tree-key{display:none}footer{display:block;line-height:2}}

.skill-action { width:100%; min-height:42px; margin-top:14px; border:1px solid var(--cyan); border-radius:5px; background:var(--cyan); color:#071012; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.skill-action.remove { border-color:#7a3e39; background:#251817; color:#ff9c8d; }
.toast { display:flex; align-items:center; gap:14px; z-index:40; }
.toast button { border:0; border-left:1px solid #9eb4b3; background:none; color:#087f83; padding:2px 5px 2px 13px; font-size:10px; font-weight:800; text-transform:uppercase; }

@media(max-width:760px){
  body.overlay-open { overflow:hidden; }
  header{height:58px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}.brand{gap:8px}.brand-logo{width:30px!important;height:30px!important;min-width:30px;min-height:30px}.brand small,header .primary{display:none}header nav button.mobile-professions{display:block;min-height:42px;padding:9px 12px}main{padding:16px 10px calc(88px + env(safe-area-inset-bottom))}.hero{align-items:center;margin-bottom:12px}.hero>div{display:none}.species{min-width:0;width:100%}.species span{margin-bottom:5px}.species select{min-height:44px}.workspace{display:block}.center{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}.tree-panel{min-width:600px;min-height:0;padding:14px}.tree-heading{position:sticky;left:0;max-width:calc(100vw - 48px);padding-bottom:12px}.tree-heading h2{font-size:18px}.tree-canvas{padding-top:20px}.branches{gap:7px}.skill-card{padding:0;min-height:68px;height:68px;touch-action:manipulation}.skill-toggle{padding:7px}.skill-info{display:none}.tree-key{display:none}footer{display:block;line-height:2;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .mobile-budget{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 12px;position:fixed;z-index:18;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 20px);min-height:62px;margin:0;padding:10px 14px;border:1px solid #31505a;border-radius:8px;background:rgba(14,24,31,.96);box-shadow:0 12px 32px #000;backdrop-filter:blur(14px);color:var(--text);text-align:left}.mobile-budget b,.mobile-budget small{display:block}.mobile-budget b{font:600 11px DM Mono}.mobile-budget small{margin-top:3px;color:var(--muted);font:8px DM Mono;text-transform:uppercase}.mobile-budget-action{color:var(--cyan);font-size:10px;font-weight:700}.mobile-budget .meter{grid-column:1/-1;width:100%;margin-top:4px}
  .profession-nav{display:block;position:fixed;z-index:31;top:0;bottom:0;left:0;width:min(88vw,360px);max-height:none;margin:0;border:0;border-right:1px solid var(--line);border-radius:0;transform:translateX(-105%);transition:transform .2s ease;visibility:hidden}.profession-nav.mobile-nav-open{transform:none;visibility:visible}.mobile-nav-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 8px}.mobile-nav-heading h2{margin:4px 0 0;font-size:20px}.mobile-nav-heading button,.sheet-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#111922;color:var(--text);font-size:23px}.nav-search{margin-top:8px;min-height:44px}.category-filter,.nav-toggle{display:flex}.category-filter{display:grid}.category-filter button,.nav-toggle button{min-height:40px}.profession-list{display:block;max-height:calc(100vh - 230px);padding-bottom:calc(24px + env(safe-area-inset-bottom))}.profession-group button{min-height:52px}
  .right-rail{display:block}.right-rail .panel{display:block;position:fixed;z-index:32;left:0;right:0;bottom:0;max-height:82vh;margin:0;padding:14px 18px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;border-radius:14px 14px 0 0;border-width:1px 1px 0;transform:translateY(105%);visibility:hidden;transition:transform .2s ease}.right-rail .panel.mobile-sheet-open{transform:none;visibility:visible}.sheet-handle{display:block;width:42px;height:4px;margin:0 auto 12px;border-radius:4px;background:#40515c}.sheet-close{position:absolute;right:14px;top:14px}.detail-panel h3,.summary-top{padding-right:48px}.skill-action{min-height:48px}.path-list button{min-height:38px;font-size:10px}.tag-list span,.detail-pills span{font-size:8px;padding:7px 9px}
  .mobile-scrim{position:fixed;z-index:30;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}.toast{bottom:calc(84px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px)}
}
@media(max-width:420px){.tree-panel{min-width:560px}.skill-copy strong{font-size:11px}.skill-status{width:21px;height:21px}}
@media(max-width:760px) and (orientation:landscape){.right-rail .panel{max-height:94vh}.profession-list{max-height:calc(100vh - 210px)}.mobile-budget{left:auto;width:230px}.tree-panel{min-width:570px}}

.theme-toggle span { font-size:14px; line-height:0; }
.theme-confirm-backdrop { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.theme-confirm { width:min(520px,100%); padding:28px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); box-shadow:0 28px 80px rgba(0,0,0,.48); }
.theme-confirm h2 { margin:7px 0 10px; font-size:25px; letter-spacing:-.03em; }
.theme-confirm p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.theme-confirm>div { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.theme-confirm button { min-height:44px; border:1px solid var(--line); border-radius:5px; background:var(--panel2); color:var(--text); padding:10px 14px; font-size:10px; font-weight:800; }
.theme-confirm [data-theme-confirm] { border-color:#d7b75f; background:#fff3bd; color:#332906; }

:root[data-theme="light"] { --bg:#edf2f2; --panel:#ffffff; --panel2:#f3f7f7; --line:#bdcacc; --text:#182328; --muted:#63747b; --cyan:#087f83; --amber:#986b0a; --red:#b74635; color-scheme:light; background:var(--bg); }
:root[data-theme="light"] body { background:radial-gradient(circle at 68% -20%,#d5ebeb 0,transparent 38%),linear-gradient(180deg,#f7f9f8,#e8eeee); }
:root[data-theme="light"] body:before { opacity:.35; background-image:linear-gradient(rgba(20,50,55,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,50,55,.05) 1px,transparent 1px); }
:root[data-theme="light"] header { border-color:#c8d4d5; background:rgba(248,251,250,.9); }
:root[data-theme="light"] .brand small { color:#667980; }
:root[data-theme="light"] header button,:root[data-theme="light"] .summary-actions button { background:#f5f8f7; }
:root[data-theme="light"] header button.primary { color:#fff; }
:root[data-theme="light"] .panel { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,247,247,.98)); box-shadow:0 14px 32px rgba(42,70,74,.1); }
:root[data-theme="light"] .species select,:root[data-theme="light"] .nav-search,:root[data-theme="light"] .category-filter,:root[data-theme="light"] .nav-toggle { color:var(--text); background:#f8fafa; }
:root[data-theme="light"] .profession-group button:hover { background:#eaf1f1; }
:root[data-theme="light"] .profession-group button.active { background:#dff0f0; border-color:#68a9ab; }
:root[data-theme="light"] .profession-group button>i { border-color:#a8b8ba; color:#5e7178; }
:root[data-theme="light"] .category-filter button.active,:root[data-theme="light"] .profession-group button.active>i { background:#d9eeee; }
:root[data-theme="light"] .nav-toggle button.active { background:#dfe8e8; color:var(--text); }
:root[data-theme="light"] .tree-heading,:root[data-theme="light"] .summary-section,:root[data-theme="light"] .detail-section { border-color:#d2dddd; }
:root[data-theme="light"] .branches:before,:root[data-theme="light"] .branches:after,:root[data-theme="light"] .branch:before,:root[data-theme="light"] .branch:after { background:#aebfc1; }
:root[data-theme="light"] .skill-card { border-color:#aebdc0; background:linear-gradient(150deg,#fff,#edf3f3); }
:root[data-theme="light"] .skill-card:hover,:root[data-theme="light"] .skill-card.focused { border-color:#54777b; }
:root[data-theme="light"] .skill-card.trained { border-color:#168e92; background:linear-gradient(150deg,#d9eeee,#cbe5e5); }
:root[data-theme="light"] .skill-status { border-color:#9cacae; color:#62757b; }
:root[data-theme="light"] .skill-info { border-color:#9db0b2; background:#f4f8f8; color:#576d73; }
:root[data-theme="light"] .meter { background:#ced9da; }
:root[data-theme="light"] .detail-pills span,:root[data-theme="light"] .tag-list span { border-color:#bdcbcd; background:#f5f8f8; color:#51666d; }
:root[data-theme="light"] .skill-action.remove { border-color:#d5988e; background:#fff0ed; color:#9d3323; }
:root[data-theme="light"] footer { border-color:#ccd7d8; color:#687a80; }
:root[data-theme="light"] .mobile-budget { background:rgba(250,252,251,.97); box-shadow:0 12px 30px rgba(35,57,61,.2); }
:root[data-theme="light"] .mobile-nav-heading button,:root[data-theme="light"] .sheet-close { background:#f4f8f8; }

@media(max-width:760px){
  .theme-toggle { width:42px; min-width:42px; min-height:42px; padding:0; font-size:0; }
  .theme-toggle span { font-size:17px; }
  .theme-confirm { padding:22px; }
  .theme-confirm>div { display:grid; }
  .theme-confirm [data-theme-confirm] { grid-row:1; }
}