:root{--text:#f3ecdf;--dim:#f3ecdf8c;--line:#f3ecdf2e;--display:"Cinzel", serif;--body:"Inter", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;color:var(--text);font-family:var(--body);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#04050a;margin:0;overflow:hidden}canvas{touch-action:none;display:block}.hud{pointer-events:none;padding:max(14px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));flex-direction:column;display:flex;position:fixed;inset:0}.top{align-items:center;gap:12px;display:flex}.top .name{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;font-size:17px}.top .lv{color:var(--dim);letter-spacing:.08em;font-size:12px}.top .lv b{font-family:var(--display);color:var(--text);margin-left:4px;font-size:17px}.top .bar{flex:1}.bar{background:var(--line);height:2px;position:relative;overflow:hidden}.bar i{background:var(--accent,#f3ecdf);box-shadow:0 0 8px var(--accent,#f3ecdf);position:absolute;inset:0 auto 0 0}.row{height:96px;margin-top:auto;margin-bottom:7vh;position:relative}.skill{text-align:center;transform-origin:50% 30%;will-change:transform, opacity;width:330px;position:absolute;top:0;left:50%}.skill h1{font-family:var(--display);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 18px var(--accent);margin:0;font-size:27px;font-weight:700}.skill h1 b{letter-spacing:.04em;margin-left:.45em}.skill .bar{width:64%;height:3px;margin:10px auto 9px}.skill .stats{color:var(--dim);white-space:nowrap;opacity:var(--detail);font-size:13px}.treehead{left:0;right:0;top:calc(max(14px, env(safe-area-inset-top)) + 36px);opacity:0;align-items:center;gap:10px;padding:0 16px;display:flex;position:absolute}.treehead .th{text-align:center;flex:1}.treehead h2{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 14px var(--accent);margin:0;font-size:20px;font-weight:700}.treehead h2 b{margin-left:.4em}.treehead .bar{width:60%;margin:7px auto 5px}.treehead .stats{color:var(--dim);font-size:12px}.label{color:#f3ecdfb3;font:500 10px/1.2 var(--body);letter-spacing:.04em;white-space:nowrap;text-shadow:0 0 6px #000,0 0 2px #000;transition:transform .4s,font-size .4s;animation:.9s .6s both label-in;transform:translateY(-15px)}.label.done{color:#f4e2bc}.label.focus{font:700 17px/1.2 var(--display);letter-spacing:.08em;color:var(--text);text-shadow:0 0 12px var(--accent), 0 0 4px #000;transform:translateY(-30px)}@keyframes label-in{0%{opacity:0}to{opacity:1}}.sheet{padding:24px 22px max(22px, env(safe-area-inset-bottom));text-align:center;-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);background:linear-gradient(#0a0c18cc,#060810f0);border-radius:20px 20px 0 0;transition:transform .45s cubic-bezier(.2,.8,.2,1);position:fixed;bottom:0;left:0;right:0;transform:translateY(105%)}.sheet.open{transform:none}.sheet .goal{letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-size:11px}.sheet h2{font-family:var(--display);letter-spacing:.04em;margin:6px 0 8px;font-size:26px}.sheet .end{color:var(--dim);font-size:13px}.sheet .status{color:var(--dim);margin:12px 0 16px;font-size:12px}.sheet .primary,.sheet .ghost{width:100%;min-height:48px;font:600 13px var(--body);letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:14px 18px}.sheet .primary{color:#1b1206;background:linear-gradient(#f3d58f,#c9973f);border:none;box-shadow:0 0 22px #f3c97859}.sheet .ghost{border:1px solid var(--line);color:var(--text);background:0 0}.sheet .confirm p{margin:0 0 12px;font-size:14px}.sheet .pair{gap:10px;display:flex}.sheet .pair button{flex:1}.sheet .close{width:44px;height:44px;color:var(--dim);background:0 0;border:none;font-size:26px;position:absolute;top:8px;right:10px}.sheet .hint{color:var(--dim);letter-spacing:.04em;margin-top:14px;font-size:11px}.sheet .blocked{border:1px dashed var(--line);color:var(--dim);border-radius:999px;padding:13px 16px;font-size:13px}.label.end{font:600 11px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#f3ecdfd9}.label.end.focus{font:700 17px/1.2 var(--display);letter-spacing:.08em;text-transform:none;color:var(--text)}.galaxy-level{text-align:center;color:var(--text);text-shadow:0 0 16px #ffdca099,0 0 3px #000}.galaxy-level b{font:700 40px/1 var(--display);display:block}.galaxy-level span{font:500 10px var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}.galaxy-skill{font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#f3ecdfd9;text-shadow:0 0 6px #000}.galaxy-skill b{color:var(--text);margin-left:4px}.galaxy{opacity:0;position:absolute;inset:0}.galaxy>div{position:absolute;top:0;left:0}.top .tools{opacity:0;gap:2px;margin:-10px -10px -10px 0;transition:opacity .4s;display:flex;position:relative}.top .tools.on{opacity:1}.top .tools button{pointer-events:none;width:44px;height:44px;color:var(--text);background:0 0;border:none;font-size:22px;line-height:1}.top .tools.on button{pointer-events:auto}.top .menu{border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#080a14eb;border-radius:12px;padding:6px;position:absolute;top:46px;right:6px}.top .menu button{width:auto;height:auto;font:500 13px var(--body);white-space:nowrap;padding:10px 14px}.add{padding:max(56px, env(safe-area-inset-top)) 14px 14px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0203088c;justify-content:center;align-items:flex-start;animation:.35s both add-in;display:flex;position:fixed;inset:0}@keyframes add-in{0%{opacity:0;transform:translateY(12px)}}.add-panel{border:1px solid var(--line);background:linear-gradient(#0e101ef0,#060810f5);border-radius:22px;width:100%;max-width:440px;max-height:calc(100dvh - 80px);padding:18px 18px 16px;overflow-y:auto;box-shadow:0 0 40px #00000080}.add-head{letter-spacing:.22em;text-transform:uppercase;color:var(--dim);justify-content:space-between;align-items:center;font-size:11px;display:flex}.add-x{width:44px;height:44px;color:var(--dim);background:0 0;border:none;margin:-12px -12px -12px 0;font-size:26px}.add-dots{gap:6px;margin:6px 0 16px;display:flex}.add-dots i{background:var(--line);flex:1;height:2px}.add-dots i.on{background:var(--accent);box-shadow:0 0 6px var(--accent)}.add h2{font-family:var(--display);letter-spacing:.03em;margin:0 0 14px;font-size:24px}.add input{border:1px solid var(--line);width:100%;color:var(--text);font:16px var(--body);background:#ffffff0a;border-radius:12px;outline:none;padding:14px}.add input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.add-note{color:var(--dim);margin:10px 0 0;font-size:12px}.add-skills{gap:8px;display:grid}.add-skills button{border:1px solid var(--line);border-left:3px solid var(--c);min-height:52px;color:var(--text);font:600 15px var(--display);letter-spacing:.14em;text-transform:uppercase;background:#ffffff08;border-radius:12px;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.add-skills button.on{background:#ffffff14}.add-skills b{color:var(--dim);font-weight:500}.add-subs{gap:8px;margin:12px 0 0;padding:0;list-style:none;display:grid}.add-subs li{align-items:center;gap:4px;display:flex}.add-subs .n{width:20px;font:600 13px var(--display);color:var(--dim);flex:none}.add-subs input{padding:12px;font-size:15px}.add-subs button{width:34px;height:44px;color:var(--dim);background:0 0;border:none;flex:none;font-size:17px}.add-subs button:disabled{opacity:.25}.add-more{color:var(--accent);font:600 13px var(--body);letter-spacing:.06em;background:0 0;border:none;margin-top:10px;padding:10px 0}.add-foot{gap:10px;margin-top:20px;display:flex}.add-foot button{min-height:48px;font:600 13px var(--body);letter-spacing:.16em;text-transform:uppercase;border-radius:999px;flex:1}.add-foot .primary{color:#1b1206;background:linear-gradient(#f3d58f,#c9973f);border:none}.add-foot .primary:disabled{opacity:.35}.add-foot .ghost{border:1px solid var(--line);color:var(--text);background:0 0}.add-shapes{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.add-shapes button{aspect-ratio:1;border:1px solid var(--line);color:#f3ecdfbf;background:#ffffff08;border-radius:12px;padding:8px}.add-shapes button.on{color:#f3d58f;background:#f3d58f1a;border-color:#f3d58f;box-shadow:0 0 12px #f3d58f59}.add-shapes svg{fill:none;stroke:currentColor;stroke-width:3.5px;stroke-linejoin:round;stroke-linecap:round;width:100%;height:100%}.add-done{margin-top:14px}