:root {
  --bg: #070910;
  --surface: rgba(18, 22, 34, .96);
  --surface-2: #171c2a;
  --surface-3: #22283a;
  --line: rgba(255,255,255,.11);
  --text: #f5f7ff;
  --muted: #9da6b9;
  --cyan: #59d9ff;
  --amber: #ffb34d;
  --violet: #c263ff;
  --header-height: 72px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 85% 10%, rgba(124,63,185,.2), transparent 32rem),
    radial-gradient(circle at 10% 35%, rgba(33,126,157,.14), transparent 28rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), var(--bg);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--cyan); }
a:hover { color: #fff; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:10000; top:8px; left:8px; padding:10px 14px; color:#070910; background:#fff; border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7,9,16,.86);
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}
.brand { display:inline-flex; align-items:center; gap:12px; min-width:max-content; color:var(--text); text-decoration:none; }
.brand:hover { color:var(--text); }
.brand-mark { display:grid; width:40px; height:40px; place-items:center; border:1px solid rgba(89,217,255,.55); border-radius:11px 4px; color:var(--cyan); font-size:22px; font-weight:900; background:linear-gradient(145deg,rgba(89,217,255,.18),rgba(194,99,255,.16)); box-shadow:inset 0 0 20px rgba(89,217,255,.08),0 0 18px rgba(89,217,255,.08); }
.brand-copy { display:flex; flex-direction:column; line-height:1; letter-spacing:.12em; }
.brand-copy strong { font-size:15px; }
.brand-copy small { margin-top:6px; color:var(--muted); font-size:9px; letter-spacing:.18em; }
.tool-navigation { display:flex; align-self:stretch; align-items:center; gap:4px; margin-left:42px; }
.tool-navigation a { display:flex; align-items:center; height:100%; padding:0 16px; border-bottom:2px solid transparent; color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.04em; text-decoration:none; }
.tool-navigation a:hover,.tool-navigation a.active { border-bottom-color:var(--violet); color:#fff; }
.header-actions { display:flex; gap:8px; margin-left:auto; }
.icon-button,.text-button,.copy-row button,.panel-close,.modal-close { border:1px solid var(--line); background:var(--surface-2); cursor:pointer; }
.icon-button { min-height:38px; padding:0 13px; border-radius:9px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.11em; }
.icon-button:hover,.icon-button[aria-expanded="true"] { border-color:rgba(89,217,255,.55); color:#fff; }
.nav-toggle { display:none; }

.page-shell { width:min(1180px,calc(100% - 32px)); margin:32px auto; }
.tool-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(13,16,26,.87); box-shadow:0 24px 70px rgba(0,0,0,.38); }
.tool-hero { position:relative; display:flex; min-height:190px; align-items:flex-end; justify-content:space-between; padding:30px 34px; isolation:isolate; background:linear-gradient(120deg,rgba(25,31,47,.98),rgba(12,15,24,.9)); background-position:center; background-size:cover; }
.tool-hero::after { content:''; position:absolute; z-index:-1; inset:auto 0 0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--violet),transparent 75%); }
.tool-hero-copy { max-width:580px; }
.eyebrow { margin:0 0 8px; color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.22em; }
.tool-hero h1 { margin:0; font-size:clamp(34px,6vw,64px); line-height:.95; letter-spacing:-.055em; }
.tool-hero p:last-child { max-width:520px; margin:16px 0 0; color:#c4cada; line-height:1.5; }
.version-badge { padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.12em; background:rgba(7,9,16,.72); }
.version-badge span { color:var(--violet); }

#infobar.calculator-toolbar { display:flex; width:100%; height:auto; min-height:76px; align-items:center; justify-content:space-between; gap:24px; padding:16px 22px; background:rgba(21,25,38,.86); border-bottom:1px solid var(--line); }
#buttonbar,#statsbar { position:static; display:flex; float:none; width:auto; height:auto; align-items:center; margin:0; padding:0; }
#buttonbar { gap:8px; }
#buttonbar .button { position:static; float:none; width:auto; min-width:112px; height:38px; margin:0; padding:0 15px; border:1px solid var(--line); border-radius:9px; color:var(--muted); opacity:1; background:var(--surface-2); box-shadow:none; cursor:pointer; }
#buttonbar .btn_style,#buttonbar .focus.btn_style { min-width:48px; width:48px; background-image:none; }
#buttonbar .button:hover { color:#fff; border-color:rgba(255,255,255,.28); }
#buttonbar .button.focus { border-color:rgba(194,99,255,.64); color:#fff; background:rgba(194,99,255,.16); box-shadow:0 0 0 3px rgba(194,99,255,.08); }
#statsbar { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
#statsbar div { position:static; display:grid; float:none; width:31px; height:31px; place-items:center; margin:0; padding:0; border:1px solid var(--line); border-radius:8px; opacity:1; color:#d7dbea; font-size:11px; background:var(--surface-3); }
#statsbar div.max { border-color:rgba(89,217,255,.34); color:var(--cyan); }
#statsbar div.syn { border-color:rgba(255,179,77,.38); color:var(--amber); box-shadow:none; }
.interaction-hint { display:flex; flex-wrap:wrap; gap:10px 22px; padding:15px 24px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.interaction-hint span { display:inline-flex; align-items:center; gap:6px; }
.legend-regular::before,.legend-synergy::before { content:''; width:8px; height:8px; border-radius:50%; }
.legend-regular::before { background:var(--cyan); }
.legend-synergy::before { background:var(--amber); }

.talent-viewport { min-height:590px; overflow-x:auto; overflow-y:hidden; padding:44px 22px 20px; scrollbar-color:var(--violet) var(--surface-2); }
#skillcontainer { position:relative; width:950px; height:500px; margin:0 auto; padding:0; }
.skill { display:flex; flex-wrap:nowrap; align-items:flex-start; opacity:1; border-width:1px; border-color:rgba(255,255,255,.24); background:#272c38; box-shadow:0 7px 20px rgba(0,0,0,.25); transition:border-color .16s,background-color .16s,box-shadow .16s,transform .16s; }
.skill:hover { z-index:4; transform:translateY(-2px); }
.skill.active { border-color:rgba(89,217,139,.44); background:#17352a; }
.skill.inactive { border-color:rgba(255,101,119,.28); background:#342029; }
.skill.focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(89,217,255,.1),0 8px 24px rgba(0,0,0,.34); }
.skill>.icon { flex:0 0 32px; }
.skill>.counter { display:flex; flex:0 0 18px; flex-direction:column; align-self:stretch; height:34px; }
.skill>.counter>.maxcount,.skill>.counter>.syncount { display:grid; float:none; flex:1 1 50%; width:100%; min-height:0; height:auto; place-items:center; line-height:1; }
.skill .icon,.skill .counter { cursor:pointer; }
.skill .icon:focus,.skill .counter:focus { outline:2px solid #fff; outline-offset:2px; }
#skilltip { z-index:3000; max-width:min(420px,calc(100vw - 24px)); padding:16px; border:1px solid rgba(89,217,255,.32); border-radius:12px; color:#eef2ff; background:rgba(12,15,24,.97); box-shadow:0 18px 55px rgba(0,0,0,.5); backdrop-filter:blur(12px); }

.side-panel { position:fixed; z-index:400; top:calc(var(--header-height) + 12px); right:12px; left:auto; display:none; width:min(440px,calc(100vw - 24px)); max-height:calc(100vh - var(--header-height) - 24px); padding:0; overflow:auto; border:1px solid var(--line); border-radius:16px; color:var(--text); background:rgba(13,16,26,.98); box-shadow:0 28px 90px rgba(0,0,0,.62); opacity:1; backdrop-filter:blur(18px); }
#logcontainer { top:calc(var(--header-height) + 12px); width:min(760px,calc(100vw - 24px)); height:auto; }
.panel-heading { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line); background:rgba(13,16,26,.96); }
.panel-heading h2,#skilllogtitle { width:auto; margin:0; border:0; color:#fff; font-size:13px; letter-spacing:.13em; }
.panel-close,.modal-close { display:grid; width:34px; height:34px; place-items:center; border-radius:8px; color:var(--muted); font-size:24px; line-height:1; }
.panel-close:hover,.modal-close:hover { color:#fff; border-color:rgba(255,255,255,.3); }
#skilllog { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; padding:16px; }
#skilllog .log { float:none; width:auto; height:auto; min-height:112px; margin:0; padding:13px; border:1px solid var(--line); border-radius:11px; opacity:1; background:var(--surface-2); }

#tabmenu { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:12px 14px 0; }
#tabmenu li { float:none; padding:0; }
#tabmenu a,#tabmenu a:visited { display:block; padding:10px 6px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:10px; font-style:normal; font-weight:800; letter-spacing:.06em; text-align:center; }
#tabmenu a:hover { border-color:rgba(194,99,255,.6); color:#fff; }
#tabs { padding:18px 20px 24px; }
#tabs h3 { margin:20px 0 10px; padding:0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
#tabs h3:first-child { margin-top:0; }
#tabs p { color:var(--muted); line-height:1.55; }
#tabs label { display:block; margin:12px 0 7px; color:#dce1ee; font-size:12px; font-weight:700; }
#tabs input,#tabs textarea { width:100%; border:1px solid var(--line); border-radius:9px; color:#fff; background:#0c0f18; outline:none; }
#tabs input { height:42px; padding:0 11px; }
#tabs textarea { min-height:180px; padding:11px; resize:vertical; }
#tabs input:focus,#tabs textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(89,217,255,.1); }
#skilllabel { position:static; float:none; height:42px; margin:0; padding:0 11px; opacity:1; }
#skilllabel_note { margin:6px 0 12px!important; font-size:11px; }
.copy-row { display:flex; gap:8px; }
.copy-row input { min-width:0; }
.copy-row button,.text-button { min-height:40px; padding:0 14px; border-radius:9px; color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.07em; }
.copy-status { min-height:1.4em; margin:7px 0 0!important; color:var(--cyan)!important; font-size:11px; }
#language { display:flex; gap:9px; }
#language button { float:none; width:36px; height:36px; margin:0; padding:0; border:1px solid var(--line); border-radius:8px; background-color:var(--surface-2); cursor:pointer; }
#language button:hover { border-color:#fff; }
.usage-image { width:100%; height:auto; border:1px solid var(--line); border-radius:10px; }
.link-list { display:grid; gap:8px; padding-left:20px!important; }
#infotab,#attention { float:none; width:auto; margin:0 20px 18px; color:var(--muted); }
#attention { padding:12px; border:1px solid rgba(255,101,119,.42); border-radius:9px; background:rgba(255,101,119,.1); }
.template-content { padding:24px; }

#blackout { z-index:500; background:rgba(0,0,0,.72); opacity:1; backdrop-filter:blur(6px); }
#plotpos { z-index:510; inset:0; top:0; left:0; padding:24px; overflow:auto; }
#plotcontainer { position:relative; width:min(880px,calc(100vw - 48px)); min-width:0; height:min(620px,calc(100vh - 48px)); min-height:440px; margin:auto; border:1px solid var(--line); border-radius:16px; opacity:1; background:#151926; box-shadow:0 28px 90px rgba(0,0,0,.68); }
#plotgraph { width:calc(100% - 30px); min-width:0; height:calc(100% - 30px); min-height:380px; margin:15px; padding:12px 0 0; }
.modal-close { position:absolute; z-index:5; top:10px; right:10px; }
.site-footer { display:flex; width:min(1180px,calc(100% - 32px)); justify-content:space-between; gap:20px; margin:0 auto; padding:8px 0 30px; color:#747d91; font-size:11px; }
.site-footer p { margin:0; }

@media (max-width:900px) {
  .site-header { padding:0 16px; }
  .brand-copy small { display:none; }
  .tool-navigation { margin-left:20px; }
  #infobar.calculator-toolbar { align-items:stretch; flex-direction:column; gap:13px; }
  #statsbar { justify-content:flex-start; }
  .talent-viewport { padding-inline:16px; }
}

@media (max-width:640px) {
  :root { --header-height:64px; }
  .brand-mark { width:36px; height:36px; }
  .brand-copy strong { font-size:13px; }
  .nav-toggle { display:grid; width:38px; height:38px; place-content:center; gap:4px; margin-left:14px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
  .nav-toggle>span:not(.sr-only) { width:17px; height:2px; background:var(--muted); }
  .tool-navigation { position:absolute; top:calc(100% + 1px); right:0; left:0; display:none; align-items:stretch; flex-direction:column; margin:0; padding:8px 16px 14px; border-bottom:1px solid var(--line); background:rgba(7,9,16,.98); }
  .tool-navigation.open { display:flex; }
  .tool-navigation a { min-height:44px; border:0; border-radius:8px; }
  .tool-navigation a.active { border:0; background:rgba(194,99,255,.13); }
  .icon-button { min-width:42px; padding:0 8px; font-size:0; }
  #open-log::after { content:'L'; font-size:11px; }
  #open-panel::after { content:'M'; font-size:11px; }
  .page-shell { width:min(100% - 20px,1180px); margin:10px auto 20px; }
  .tool-card { border-radius:14px; }
  .tool-hero { min-height:170px; padding:24px 20px; background-position:62% center; }
  .tool-hero h1 { font-size:39px; }
  .tool-hero p:last-child { font-size:13px; }
  .version-badge { display:none; }
  #infobar.calculator-toolbar { padding:13px; }
  #buttonbar { display:grid; grid-template-columns:48px repeat(3,minmax(0,1fr)); gap:5px; }
  #buttonbar .button { min-width:0; padding:0 6px; font-size:9px; }
  #statsbar div { width:28px; height:28px; }
  .interaction-hint { padding:12px 15px; }
  .interaction-hint span:nth-child(-n+2) { display:none; }
  .talent-viewport { min-height:565px; padding-top:35px; }
  #skillcontainer { margin-left:0; }
  .site-footer { align-items:flex-start; flex-direction:column; width:calc(100% - 28px); }
  #plotpos { padding:10px; }
  #plotcontainer { width:calc(100vw - 20px); height:calc(100vh - 20px); min-height:420px; }
  #plotgraph { width:calc(100% - 12px); margin:6px; }
}

@media print {
  .site-header,.page-shell,#blackout,#plotpos,#panel,.site-footer { display:none!important; }
  #logcontainer { position:static; display:block!important; width:100%; max-height:none; overflow:visible; border:0; color:#000; background:#fff; box-shadow:none; }
  #logcontainer .panel-close { display:none; }
  #skilllog { grid-template-columns:repeat(2,1fr); }
  #skilllog .log { color:#000; border:1px solid #000; background:#fff; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* Compact calculator workspace */
#infobar.calculator-toolbar{min-height:54px;gap:16px;padding:9px 15px}
#buttonbar{gap:6px}#buttonbar .button{min-width:100px;height:34px;padding-inline:11px}#buttonbar .btn_style,#buttonbar .focus.btn_style{min-width:42px;width:42px}
#statsbar{gap:4px}#statsbar div{width:28px;height:28px;border-radius:7px;font-size:10px}
.interaction-hint{gap:7px 16px;padding:9px 16px;font-size:11px}
.talent-viewport{min-height:546px;padding:26px 16px 14px}
.side-panel{top:calc(var(--header-height) + 8px);max-height:calc(100vh - var(--header-height) - 16px)}.panel-heading{padding:11px 14px}#skilllog{gap:7px;padding:11px}#skilllog .log{min-height:96px;padding:10px}
#tabmenu{gap:4px;padding:8px 10px 0}#tabmenu a,#tabmenu a:visited{padding:7px 5px}#tabs{padding:13px 15px 17px}#tabs h3{margin:14px 0 7px}#tabs label{margin:9px 0 5px}#tabs input{height:37px}#tabs textarea{min-height:150px}
@media (max-width:900px){#infobar.calculator-toolbar{gap:9px}#skillcontainer{transform:translateY(45px)}}
@media (max-width:640px){#infobar.calculator-toolbar{padding:9px}#buttonbar .button{height:32px}.interaction-hint{padding:8px 10px}.talent-viewport{min-height:528px;padding-top:17px}}