:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #e5edf4; background: #0c0f17; --accent: #aadbf6; --tertiary: #e8862e; --fourth: #4fb8f0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, #0c0f17, #121e28); }
.intro { text-align:center; }
.intro .caption { margin-left:auto; margin-right:auto; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--tertiary); outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { max-width: 1040px; padding: 64px 28px 28px; margin: auto; }
.intro { max-width: 770px; margin: 0 auto 30px; }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .13em; color: #6b7971; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 5vw, 49px); line-height: 1.12; letter-spacing: -.045em; font-weight: 650; margin: 0 0 20px; }
.caption { font-size: 15px; line-height: 1.8; color: #68726c; margin: 0; }
.preview { display: flex; gap: 9px; align-items: center; font-size: 12px; color: #716342; background: #f4eddb; border: 1px solid #e9e0ca; border-radius: 9px; padding: 12px 16px; margin-bottom: 18px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #af9561; flex-shrink: 0; }
.preview-detail { color: #8b7d5d; margin-left: auto; }
.explorer { background: #fff; border: 1px solid #e0e5df; border-radius: 16px; overflow: hidden; }
.toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 26px; border-bottom: 1px solid #edf0eb; }
#breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
#breadcrumbs button { padding: 4px 0; border: 0; background: none; color: #68766e; }
#breadcrumbs button:hover { color: #294e43; text-decoration: underline; }
#breadcrumbs [aria-current] { font-weight: 600; }
.separator { color: #b5bdb6; }
.back { background: #f5f7f3; border: 1px solid #e3e8e0; border-radius: 7px; padding: 7px 11px; font-size: 12px; white-space: nowrap; }
#view { padding: 30px 26px 32px; }
h2 { margin: 0 0 22px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.section-note { color: #788179; font-size: 13px; line-height: 1.7; margin: -10px 0 24px; max-width: 750px; }
.nav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.nav-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; border: 1px solid #e2e7e0; border-radius: 11px; background: #fbfcfa; transition: background .15s, border-color .15s; min-height: 152px; }
.nav-card:hover { background: #f0f5ed; border-color: #b9c9b7; }
.card-category { font-size: 10px; color: #81917f; letter-spacing: .06em; margin-bottom: 10px; }
.card-title { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.card-detail { font-size: 12px; color: #818a80; line-height: 1.65; margin: 7px 0 18px; }
.card-action { font-size: 11px; font-weight: 600; color: #617d60; margin-top: auto; }
.difficulties .nav-card { min-height: 128px; }
.enemy-group + .enemy-group { margin-top: 27px; }
.group-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.group-note { font-size: 12px; color: #7a847c; line-height: 1.6; margin: -4px 0 13px; }
.enemy-card { border: 1px solid #e5e9e3; border-radius: 11px; padding: 20px; }
.enemy-card + .enemy-card { margin-top: 12px; }
.enemy-card h3 { margin: 0 0 17px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; }
.stat { border-radius: 8px; padding: 17px 14px; }
.stat dt { font-size: 10px; font-weight: 650; letter-spacing: .07em; margin-bottom: 10px; }
.stat dd { margin: 0; font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-description { display: block; font-size: 10px; opacity: .65; margin-top: 6px; }
.hp { background: #fae8e5; color: #9b5352; }
.def { background: #e8eff9; color: #526d9a; }
.mres { background: #eee7f8; color: #7d5d9e; }
.atk { background: #faefda; color: #977548; }
footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 23px; font-size: 10px; color: #8e988e; line-height: 1.6; }
@media (max-width: 620px) {
 .shell { padding: 32px 16px 20px; }
 .nav-grid { grid-template-columns: 1fr; }
 .toolbar { padding: 13px 17px; }
 #view { padding: 25px 17px; }
 .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .preview { flex-wrap: wrap; }
 .preview-detail { margin-left: 0; }
 .enemy-card { padding: 17px; }
 footer { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Colour-only dark theme: preserve the existing layout and panel structure. */
.eyebrow { color: var(--accent); }
.caption, .section-note, .group-note { color: #aabac8; }
.preview { color: #f0bd91; background: #282019; border-color: #8c582c; }
.status-dot { background: var(--tertiary); }
.preview-detail { color: #c9ab91; }
.explorer { background: #111b26; border-color: #47758e; }
.toolbar { border-bottom-color: #365469; }
#breadcrumbs button { color: var(--accent); }
#breadcrumbs button:hover { color: var(--fourth); }
.separator { color: #7798ad; }
.back { color: var(--accent); background: #1a2b3a; border-color: #5488a5; }
.back:hover { background: #223c50; border-color: var(--fourth); }
.nav-card { background: #172534; border-color: #5488a5; }
.nav-card:hover { background: #1e3446; border-color: var(--fourth); }
.card-category { color: var(--accent); }
.card-detail { color: #aabac8; }
.card-action { color: var(--fourth); }
.enemy-card { background: #152331; border-color: #5488a5; }
.hp { background: #382329; color: #f0aaa9; }
.def { background: #1d3448; color: var(--accent); }
.mres { background: #30283f; color: #cfb6ed; }
.atk { background: #3b2b1d; color: #f1b17a; }
.stat-description { opacity: .85; }
footer { color: #93a7b8; }
.stat-basis { color: var(--accent); font-size: 10px; letter-spacing: .08em; margin: -8px 0 14px; }
.data-legend { color: #aabac8; font-size: 12px; line-height: 1.7; margin: -8px 0 24px; }
.stat dd { font-size: clamp(16px, 2.1vw, 25px); overflow-wrap: anywhere; }
.stat-estimate { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid currentColor; font-size: 12px; line-height: 1.5; }
.estimate-assumption { display: block; margin-top: 4px; font-size: 10px; opacity: .85; }
.enemy-note { color: #aabac8; font-size: 12px; line-height: 1.6; margin: 14px 0 0; }
.calculator { margin-top: 28px; scroll-margin-top: 16px; }
.calculator-intro { padding: 26px; border-bottom: 1px solid #365469; }
.calculator-intro h2 { margin-bottom: 12px; }
#calculator-form { padding: 8px 26px 26px; }
.calc-section { padding: 20px 0; border-bottom: 1px solid #365469; }
.calc-section h3, .calc-section summary { margin: 0 0 15px; font-size: 16px; color: var(--accent); }
.calc-section summary { cursor: pointer; margin-bottom: 0; }
.calc-section[open] summary { margin-bottom: 18px; }
.calc-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.calc-field label { display: block; font-size: 12px; margin-bottom: 8px; color: #e5edf4; }
.calc-field input, .calc-field select { width: 100%; min-height: 42px; border: 1px solid #5488a5; border-radius: 7px; padding: 9px 10px; color: #e5edf4; background: #172534; font: inherit; font-size: 14px; }
.calc-field input[type=checkbox] { width: 22px; min-height: 22px; accent-color: var(--fourth); }
.calc-field input:focus-visible, .calc-field select:focus-visible, summary:focus-visible { outline: 2px solid var(--tertiary); outline-offset: 3px; }
.calc-field small { display: block; margin-top: 7px; color: #aabac8; font-size: 11px; line-height: 1.5; }
.calc-note { color: #aabac8; font-size: 12px; line-height: 1.7; }
.calc-warning { color: #f1b17a; font-size: 13px; line-height: 1.7; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.calc-actions button:first-child { background: #223c50; border-color: var(--fourth); }
.calc-output strong { display: block; margin-top: 10px; font-size: clamp(18px,3vw,26px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-output .stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.calculate-link { margin-top: 16px; }
@media(max-width:800px){ .calc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){ .calculator-intro { padding: 22px 17px; } #calculator-form { padding: 5px 17px 22px; } .calc-grid { grid-template-columns: 1fr; } .calc-output .stat-grid { grid-template-columns: 1fr; } }

/* Three quiet colour identities: data blue, explanation amber, calculator ember. */
.damage-guide { margin-top: 28px; padding: 26px; border-color: #826239; background: linear-gradient(125deg,#201d1a,#171d24); }
.damage-guide .eyebrow { color: #e2b97e; }
.damage-guide h2 { margin-bottom: 12px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:24px 0; }
.guide-grid h3 { font-size:14px; margin:0 0 10px; }
.guide-grid p,.term-list dd { font-size:12px; color:#bbc1c9; line-height:1.8; margin:0; }
.term-atk { color:#f1b17a; }.term-res { color:#aadbf6; }.term-dmg { color:#efa5a0; }
.formula-details { border-top:1px solid #6b5234; padding-top:18px; }
summary { cursor:pointer; line-height:1.5; }
.formula-text { white-space:pre-wrap; overflow-wrap:anywhere; background:#13171e; border:1px solid #705634; border-radius:9px; padding:18px; font:12px/1.9 ui-monospace,Consolas,monospace; margin:16px 0; color:#e7d2b2; }
.term-list { margin:24px 0; }.term-list dt { font-size:13px; margin:16px 0 5px; }
.damage-guide .back { background:#31261c; border-color:#9d703d; color:#f1c58c; }
.calculator { border-color:#a6654a; background:linear-gradient(125deg,#231c1e,#151c26); }
.calculator .eyebrow { color:#f1a37c; }
.calculator-intro { border-bottom-color:#654436; }
.calculator .calc-section { border-bottom-color:#654436; }
.calculator .calc-section h3,.calculator .calc-section summary { color:#f2ba9b; }
.calculator .calc-field input,.calculator .calc-field select { background:#211f28; border-color:#806056; }
.calculator .calc-field input[type=checkbox] { accent-color:#e8862e; }
.calculator .back { background:#35251f; border-color:#a6654a; color:#ffd0ad; }
.calculator .back:hover { background:#4a2d23; border-color:#e8862e; }
.calculator .calc-actions button:first-child { background:#713c27; border-color:#f0a066; color:#fff0e7; padding:12px 24px; font-size:14px; }
.calc-step { padding:22px 0; }.calc-step summary { font-weight:600; }.calc-continue { margin-top:20px; }
.equipment-notes { margin-top:18px; border-left:2px solid #a6654a; padding-left:14px; }
.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.result-card { background:#281f21; border:1px solid #a6654a; border-radius:10px; padding:22px; }
.result-card:last-child { background:#30221e; border-color:#d58a54; }
.result-card h3 { font-size:15px; color:#ffc09b; margin:0 0 20px; }
.calc-output .result-number { font-size:clamp(25px,4vw,36px); color:#ffc09b; }
.calc-output ul { padding-left:20px; font-size:12px; line-height:1.8; color:#bdc5ce; }
.calc-note a { color:#aadbf6; }.calc-output h4 { font-size:13px; }
@media(max-width:620px){.damage-guide{padding:22px 17px}.guide-grid,.result-grid{grid-template-columns:1fr}.guide-grid{gap:18px}.result-card{padding:18px}}
:root { --calc-green: #a3dfbd; }
.calculator { border-color: #477c61 !important; background: linear-gradient(145deg,#16251f,#121e22) !important; }
.calculator .eyebrow,.calculator h2,.calculator .result-number { color: var(--calc-green) !important; }
.calculator .calc-section,.calculator .result-card { border-color: #426653 !important; background: #14221f !important; }
.calculator .back { border-color: #538168 !important; color: #c2ecd3 !important; background: #1b3026 !important; }
.calculator .back:hover,.calculator .back[aria-selected="true"],.calculator .back[aria-pressed="true"] { color:#0c1b12 !important; background:var(--calc-green) !important; }
.calculator input,.calculator select { accent-color:var(--calc-green); }
.calc-tabs,.level-buttons { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.level-buttons .back { min-width:42px; padding:9px 13px; border-radius:9px; }
.basic-skill-picks { padding:0 16px; }
.calculator [hidden] { display:none !important; }
.calc-tabs .back { min-width:115px; }
.calculator .result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.optimise-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.result-tabs { margin-top:0; }
.hero-search { position:relative; }
.hero-search-results { position:absolute; top:calc(100% + 5px); left:0; right:0; max-height:260px; overflow-y:auto; z-index:20; background:#13251e; border:1px solid #77ac8c; border-radius:10px; box-shadow:0 12px 28px #0009; }
.hero-search-results [role="option"] { padding:11px 14px; cursor:pointer; color:#dcf2e5; }
.hero-search-results [role="option"]:hover,.hero-search-results [aria-selected="true"] { background:#294e3a; }
.hero-search-results p { padding:0 14px; }
.search-divider { margin:6px 12px; padding-top:8px; border-top:1px solid #477c61; color:#a3b7ad; font-size:.78rem; pointer-events:none; }
.content-glossary { display:grid; gap:7px; margin:14px 0 20px; font-size:.9rem; color:#c3d1df; }
.nav-card.content-gear { border-color:#4c92bb; background:linear-gradient(145deg,#152936,#111d2a); }
.nav-card.content-gear .card-title,.nav-card.content-gear .card-action { color:#aadbf6; }
.nav-card.content-gear:hover { border-color:#aadbf6; }
.nav-card.content-boss { border-color:#a65d68; background:linear-gradient(145deg,#301d26,#1d1823); }
.nav-card.content-boss .card-title,.nav-card.content-boss .card-action { color:#f0a7ae; }
.nav-card.content-boss:hover { border-color:#f0a7ae; }
.result-views .improvement-card { width:100%; box-sizing:border-box; }
.improvement-card { border-color:#77ac8c !important; }
.improvement-card details { margin-top:14px; }
.improvement-card summary { cursor:pointer; color:var(--calc-green); }
@media(max-width:1000px) { .calculator .result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .improvement-card { grid-column:1/-1; } }
@media(max-width:620px) { .calculator .result-grid { grid-template-columns:1fr; } }

/* Surface hierarchy: dark shells, raised headers/cards, recessed controls. */
.explorer { background:#0f1721; box-shadow:0 12px 32px #0003; }
.toolbar { background:#1b2b3b; border-bottom:1px solid #52748c; }
.nav-card { background:linear-gradient(145deg,#22374a,#182838); border-color:#638da9; box-shadow:0 3px 10px #0002; }
.nav-card:hover { background:linear-gradient(145deg,#2b465d,#20364b); border-color:#aadbf6; }
.enemy-card { background:#1b2a39; border-color:#6489a3; box-shadow:0 4px 12px #0002; }
.enemy-card h3 { padding-bottom:12px; border-bottom:1px solid #3e586d; }
.stat { border:1px solid #ffffff1c; box-shadow:inset 0 1px 0 #ffffff09; }
.hp { background:#41262e; }.def { background:#233f56; }
.mres { background:#382e4b; }.atk { background:#46311f; }
.nav-card.content-gear { background:linear-gradient(145deg,#23415a,#162a3c); border-color:#689cbe; }
.nav-card.content-boss { background:linear-gradient(145deg,#452733,#281c28); border-color:#b87581; }
.nav-card.content-gear:hover { background:linear-gradient(145deg,#2a4d69,#1c354a); }
.nav-card.content-boss:hover { background:linear-gradient(145deg,#54303d,#362332); }
.damage-guide { background:linear-gradient(135deg,#282219,#171b20); border-color:#ad8149; }
.guide-grid > div,.guide-grid > article,.guide-grid > section { background:#30291f; border:1px solid #70573a; border-radius:10px; padding:16px; }
.formula-details { background:#1c1b18; border:1px solid #765b39; border-radius:10px; padding:16px; }
.formula-text { background:#101419; border-color:#8c6a3e; box-shadow:inset 0 2px 7px #0004; }
.calculator { background:linear-gradient(145deg,#0e1915,#111b20) !important; border-color:#689980 !important; }
.calculator-intro { background:linear-gradient(115deg,#243d30,#182b24); border-bottom:1px solid #639078; }
.calculator .calc-section { background:#192b23 !important; border:1px solid #426b55; border-radius:11px; padding:18px; margin:14px 0; }
.calculator .calc-section > summary { color:#d3eddd; font-weight:600; }
.calculator .calc-section[open] { background:#1e3429 !important; border-color:#638d73 !important; }
.calculator .calc-section[open] > summary { padding-bottom:14px; border-bottom:1px solid #52705c; }
.calculator .calc-field input,.calculator .calc-field select { background:#0d1914; border-color:#607c6a; box-shadow:inset 0 2px 6px #0004; color:#edf5ef; }
.calculator .calc-field input::placeholder { color:#9dafaa; opacity:1; }
.calculator .calc-field label { color:#e4f0e8; }
.calculator .calc-note,.calculator .calc-field small { color:#b7c8be; }
.calculator .back { background:#1a2d23 !important; border-color:#658971 !important; color:#c4ddcc !important; }
.calculator .back:hover { background:#304f3b !important; color:#effbf3 !important; border-color:#a3dfbd !important; }
.calculator .back[aria-selected="true"],.calculator .back[aria-pressed="true"],.calculator .calc-actions button:first-child { background:#a3dfbd !important; border-color:#c8efd9 !important; color:#0b2013 !important; box-shadow:0 2px 8px #0003; }
.calculator .back:focus-visible,.calculator input:focus-visible,.calculator select:focus-visible { outline-color:#c3efd5; }
.calculator .equipment-notes { border-left-color:#82b394; background:#12221a; border-radius:0 8px 8px 0; padding:8px 14px; }
.calculator .result-card { background:#23392d !important; border-color:#668d72 !important; box-shadow:0 4px 14px #0003; }
.calculator .result-grid > .result-card:nth-child(2) { background:linear-gradient(135deg,#304d3a,#243b2e) !important; border-color:#9bd4ad !important; }
.calculator .result-card h3 { color:#daf0e1; padding-bottom:12px; border-bottom:1px solid #6a937866; }
.calculator .result-views .improvement-card { background:#20352a !important; border-color:#90bb9e !important; }
.hero-search-results { background:#172a20; border-color:#94bf9f; box-shadow:0 12px 28px #0009; }
.hero-search-results [role="option"]:hover,.hero-search-results [aria-selected="true"] { background:#36573f; color:#fff; }
@media(max-width:620px){.calculator .calc-section{padding:15px}.guide-grid > div,.guide-grid > article,.guide-grid > section{padding:14px}}

/* Colour identifies the outer section; working surfaces stay neutral. */
.calculator { background:linear-gradient(145deg,#151d1a,#151a20) !important; }
.calculator-intro { background:linear-gradient(115deg,#25332c,#20282b); }
.calculator .calc-section { background:#21272e !important; border-color:#4b555f !important; }
.calculator .calc-section[open] { background:#282f37 !important; border-color:#626e79 !important; }
.calculator .calc-section > summary { color:#e0e7ed; }
.calculator .calc-section[open] > summary { border-bottom-color:#4c5762; }
.calculator .calc-field input,.calculator .calc-field select { background:#141a21; border-color:#64717d; color:#edf1f5; }
.calculator .calc-field input::placeholder { color:#a4afb9; }
.calculator .calc-field label { color:#e4eaf0; }
.calculator .calc-note,.calculator .calc-field small { color:#bdc6cf; }
.calculator .back { background:#29323a !important; border-color:#687783 !important; color:#d5e1e7 !important; }
.calculator .back:hover { background:#35414a !important; border-color:#94b9a3 !important; color:#f4f8f6 !important; }
.calculator .back[aria-selected="true"],.calculator .back[aria-pressed="true"],.calculator .calc-actions button:first-child { background:#a3dfbd !important; border-color:#c8efd9 !important; color:#0b2013 !important; }
.calculator .equipment-notes { background:#1b2128; border-left-color:#7c9d8a; }
.calculator .result-card { background:#2a3139 !important; border-color:#697681 !important; }
.calculator .result-grid > .result-card:nth-child(2) { background:linear-gradient(135deg,#354039,#2d343b) !important; border-color:#91b09b !important; }
.calculator .result-card h3 { color:#e5edf0; border-bottom-color:#63707a; }
.calculator .result-views .improvement-card { background:#293139 !important; border-color:#82998d !important; }
.hero-search-results { background:#222a32; border-color:#82968b; }
.hero-search-results [role="option"] { color:#e0e7ed; }
.hero-search-results [role="option"]:hover,.hero-search-results [aria-selected="true"] { background:#3b4945; }
.search-divider { color:#b3bec5; border-top-color:#55636c; }
.damage-guide { background:linear-gradient(135deg,#2b2925,#1b2027); }
.guide-grid > div,.guide-grid > article,.guide-grid > section { background:#282d34; border-color:#62635f; }
.formula-details { background:#22272e; border-color:#757064; }
.formula-text { background:#141a21; border-color:#777065; color:#dce2e9; }
.damage-guide .back { background:#30343a; border-color:#93806a; color:#ead4b7; }

/* Hierarchy pass: one workspace, quiet rows, prominent answers. */
.damage-guide { margin-top:42px; padding:6px 0 6px 24px; border:0; border-left:3px solid #ac8754; border-radius:0; background:transparent; box-shadow:none; }
.damage-guide h2 { font-size:24px; }
.damage-guide .caption { max-width:760px; }
.guide-grid { gap:0; margin:28px 0; }
.guide-grid > article { background:transparent; border:0; border-left:1px solid #3e4650; border-radius:0; padding:0 22px; }
.guide-grid > article:first-child { border-left:0; padding-left:0; }
.guide-grid h3 { line-height:1.6; margin-bottom:12px; }
.formula-details { background:transparent; border:0; border-top:1px solid #4e4b43; border-radius:0; padding:20px 0 0; }
.formula-details > summary { color:#e3c697; font-size:13px; font-weight:600; }
.formula-text { border:1px solid #4b5159; border-radius:7px; padding:20px; }
.damage-guide > .calc-note { max-width:800px; margin-top:22px; color:#a2adb9; }

.calculator { margin-top:42px; background:#151e25 !important; border-color:#587262 !important; box-shadow:0 14px 34px #0003; }
.calculator-intro { padding:30px 30px 26px; background:transparent; border-bottom:1px solid #37473e; }
.calculator-intro .caption { max-width:720px; }
#calculator-form { padding:14px 30px 30px; }
.calculator .calc-section,.calculator .calc-section[open] { padding:0; margin:22px 0; background:transparent !important; border:0 !important; border-radius:0; }
.calculator .calc-section > summary,.calculator .calc-section[open] > summary { padding:15px 18px; margin:0; background:#26323c; border:0; border-left:3px solid #5f7768; border-radius:5px; color:#e5edf2; font-size:15px; letter-spacing:.01em; }
.calculator .calc-section[open] > summary { background:#2b3942; border-left-color:#a3dfbd; }
.calculator .calc-section > .calc-grid { padding:25px 18px 10px; gap:24px 22px; }
.calculator .calc-section > .calc-note,.calculator .calc-section > .calc-warning { margin:18px 18px 0; }
.calculator .calc-section > .back { margin:18px 18px 8px; }
.calculator .calc-section > .equipment-notes { margin:18px 18px 0; }
.calculator .basic-skill-picks { padding:8px 18px 0; }
.calculator .basic-skill-picks .calc-note { margin-bottom:8px; }
.calculator .calc-field label { font-weight:500; color:#cbd6df; }
.calculator .calc-field input,.calculator .calc-field select { background:#101920; border-color:#52616c; box-shadow:none; min-height:44px; }
.calculator .calc-field input:hover,.calculator .calc-field select:hover { border-color:#82908e; }
.calculator .calc-field input[type="checkbox"] { min-height:22px; }
.calculator .calc-field small { color:#9eacb8; }
.calculator .equipment-notes { background:transparent; border-left:2px solid #597064; border-radius:0; padding:0 14px; }
.calculator .back { background:#202c34 !important; border-color:#50616c !important; box-shadow:none; }
.calculator .back:hover { background:#2d3d46 !important; border-color:#8db29a !important; }
.calculator .calc-tabs .back { background:transparent !important; border-color:transparent !important; color:#aabac7 !important; border-radius:0; padding:11px 16px; }
.calculator .calc-tabs .back[aria-selected="true"] { background:transparent !important; border-color:transparent !important; border-bottom-color:#a3dfbd !important; color:#ddf3e5 !important; box-shadow:none; }
.calculator .level-buttons .back[aria-pressed="true"] { background:#355344 !important; color:#dff8e8 !important; border-color:#8db69c !important; box-shadow:none; }
.calculator .calc-actions { border-top:1px solid #36434b; padding-top:22px; margin:28px 0; align-items:center; }
.calculator .calc-actions button:first-child { background:#a3dfbd !important; border-color:#c8efd9 !important; color:#0b2013 !important; padding:12px 26px; }
.calculator .result-card { background:#202b34 !important; border:1px solid #4c5f6b !important; border-top:3px solid #7b99ad !important; padding:25px; border-radius:8px; box-shadow:none; }
.calculator .result-grid > .result-card:nth-child(2) { background:#26372e !important; border:1px solid #637f6d !important; border-top:3px solid #a3dfbd !important; }
.calculator .result-card h3 { padding:0; margin:0 0 22px; border:0; font-size:12px; text-transform:uppercase; letter-spacing:.075em; color:#c3d1d8; }
.calculator .result-number { font-size:clamp(28px,4vw,42px); line-height:1.2; color:#e1eef5 !important; margin-bottom:14px; }
.calculator .result-grid > .result-card:nth-child(2) .result-number { color:#b8ebcb !important; }
.calculator .result-views .improvement-card { background:#202b34 !important; border:1px solid #5f7669 !important; border-top:3px solid #a3dfbd !important; }
.calculator .improvement-card strong { font-size:14px; line-height:1.6; }
.optimise-actions { margin-top:18px; }
.calculator .hero-search-results { border-color:#6b8177; }
.mystery { margin-top:42px; padding:30px; border-top:3px solid #a79ac5; }
.mystery > .eyebrow { margin-top:0; margin-bottom:12px; }
.mystery > h2 { margin-bottom:16px; }
.mystery > .caption { max-width:800px; margin-bottom:0; }
.mystery-grid > article { min-width:0; }
.mystery-evidence > p:last-child { margin-bottom:0; }
.mystery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 36px; margin:30px 0; }
.mystery-grid article { padding:0 0 0 18px; border-left:2px solid #706780; }
.mystery-grid h3 { margin:12px 0; font-size:1.15rem; color:#e0d9eb; }
.mystery-grid p,.mystery-evidence p { color:#bdc5d0; line-height:1.8; }
.mystery-tag { color:#b6d6c4; font-size:.69rem; letter-spacing:.08em; font-weight:700; }
.mystery-tag.observed { color:#d7bd8e; }
.mystery-grid .mystery-takeaway { color:#d7cbe8; font-size:.9rem; }
.mystery-evidence { padding:20px 0 0; border-top:1px solid #484251; }
.mystery-evidence summary { cursor:pointer; color:#d7cbe8; line-height:1.6; font-weight:600; }
.mystery-evidence code { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:620px){.mystery-grid{grid-template-columns:1fr;gap:24px;}}
.matrix-overview { display:grid; gap:22px; margin:24px 0 32px; }
.matrix-card-head { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.matrix-card-head h3 { margin:0; }
.matrix-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.matrix-controls label { font-size:.85rem; color:#b7becb; }
.matrix-controls input { width:100px; padding:10px 12px; background:#131b25; color:#eff3fa; border:1px solid #566174; border-radius:7px; font:inherit; }
.matrix-controls button { padding:10px 14px; }
.matrix-bombs { border-top:3px solid #b8a4da; }
.matrix-stack-summary { color:#d6c5ee; line-height:1.6; margin:18px 0 0; }
.matrix-guide { padding:28px 0 8px; border-top:1px solid #4d465b; }
.matrix-guide > h3 { font-size:1.6rem; margin:8px 0 14px; }
.matrix-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 30px; margin:28px 0; }
.matrix-steps article { padding:0 0 0 18px; border-left:2px solid #8c78a7; }
.matrix-steps h4,.matrix-score h4 { margin:0 0 10px; color:#e5dced; font-size:1rem; }
.matrix-steps p { margin:0; color:#bdc5d0; line-height:1.75; }
.matrix-score { padding:24px; background:#24232e; border:1px solid #595065; border-radius:10px; margin:24px 0; }
.matrix-score-value { font-size:1.08rem; color:#ddcbf4; line-height:1.8; }
.matrix-score .enemy-note { margin-bottom:0; }
.matrix-details { padding:18px 0; border-top:1px solid #3f4653; }
.matrix-details summary { cursor:pointer; color:#d9cbe9; font-weight:600; line-height:1.6; }
.matrix-details .section-note { margin:18px 0; }
.matrix-tier-table { width:100%; border-collapse:collapse; font-size:.9rem; margin:20px 0; }
.matrix-tier-table th,.matrix-tier-table td { text-align:left; padding:12px 8px; border-bottom:1px solid #3c4350; }
.matrix-tier-table th { color:#c9b8df; background:#24232e; }
.matrix-formula { white-space:pre-line; overflow-wrap:anywhere; padding:16px; background:#151c26; line-height:1.8; border-radius:7px; }
@media(max-width:620px){
 .matrix-steps { grid-template-columns:1fr; }
 .matrix-score { padding:18px; }
 .matrix-tier-table { font-size:.75rem; }
 .matrix-tier-table th,.matrix-tier-table td { padding:10px 4px; }
 .damage-guide{padding-left:17px;margin-top:32px}.guide-grid{gap:22px}.guide-grid > article{padding:0;border-left:0}
 .calculator{margin-top:32px}.calculator-intro{padding:24px 20px}#calculator-form{padding:10px 16px 22px}
 .calculator .calc-section > summary{padding:14px 12px}.calculator .calc-section > .calc-grid{padding:20px 5px 8px}
 .calculator .calc-section > .calc-note,.calculator .calc-section > .calc-warning{margin-left:5px;margin-right:5px}
 .calculator .basic-skill-picks{padding-left:5px;padding-right:5px}.calculator .result-card{padding:22px}
}

/* Result context and the resistance wall remain visible; fine print is optional. */
.build-summary { margin:0 0 20px; padding:0 0 15px; border-bottom:1px solid #42504f; }
.build-summary p { margin:0 0 6px; font-size:16px; font-weight:600; line-height:1.6; color:#e3edf2; }
.build-summary small { font-size:12px; color:#a9bac6; }
.resistance-breakdown { margin:20px 0 0; padding-top:12px; border-top:1px solid #52665c; font-variant-numeric:tabular-nums; }
.resistance-breakdown > div { display:flex; justify-content:space-between; gap:14px; margin:10px 0; font-size:12px; line-height:1.6; }
.resistance-breakdown dt { color:#b4c2cc; }.resistance-breakdown dd { margin:0; text-align:right; color:#e0eaf0; }
.resistance-breakdown .atk-headroom { margin-top:15px; padding-top:12px; border-top:1px solid #52665c; font-size:15px; font-weight:600; }
.resistance-breakdown .atk-headroom dd { color:#b8ebcb; }
.result-disclosure { margin-top:22px; padding-top:16px; border-top:1px solid #3e4b53; }
.result-disclosure > summary { color:#aebfcb; font-size:12px; }
.hero-support { margin:16px 18px; font-size:12px; color:#aebfcb; }
.hero-support .calc-warning { font-size:12px; }
.enemy-card .stat.hp,.enemy-card .stat.atk { background:#252e38; color:#bdcbd7; border-color:#455360; }
.enemy-card .stat.def,.enemy-card .stat.mres { border-color:#8196ac; }
.enemy-card .stat.def dd,.enemy-card .stat.mres dd { font-weight:700; }
.enemy-card .stat.hp dd,.enemy-card .stat.atk dd { font-size:clamp(16px,1.8vw,22px); }
.ally-effect { grid-column:1/-1; padding:0 0 18px; border-bottom:1px solid #3b4951; }
.ally-effect:last-child { border-bottom:0; padding-bottom:0; }
.ally-toggle { display:flex; align-items:center; gap:11px; cursor:pointer; font-size:14px; color:#dfebe4; }
.ally-toggle input { width:19px; height:19px; margin:0; }
.ally-effect > .calc-note { margin:8px 0 0 30px; max-width:730px; }
.ally-inputs { margin:18px 0 0 30px; }
@media(max-width:620px){.ally-effect > .calc-note,.ally-inputs{margin-left:0}}

/* Team benchmark: the same workspace rhythm, with a quiet lavender identity. */
#team-form .team-phase > h3 { margin:28px 18px 16px; padding-top:22px; border-top:1px solid #454054; color:#d7c5ee; font-size:16px; line-height:1.6; }
#team-benchmark { --calc-green:#c4afe6; border-color:#807297 !important; background:#191d28 !important; }
#team-benchmark .calculator-intro { border-bottom-color:#454054; }
#team-benchmark .eyebrow,#team-benchmark h2 { color:#c4afe6 !important; }
#team-form { padding:22px 30px 30px; }
#team-form > form > .back:first-child { display:block; margin:0 0 24px auto; }
#team-form > form > .calc-grid { padding:0 18px 10px; gap:24px 22px; }
#team-form > form > .calc-note,
#team-form > form > .calc-warning { margin:20px 18px; line-height:1.7; max-width:850px; }
#team-benchmark .calc-section > summary { border-left-color:#85729f; }
#team-benchmark .calc-section[open] > summary { border-left-color:#c4afe6; background:#32303f; }
#team-benchmark input,#team-benchmark select { accent-color:#c4afe6; }
#team-benchmark .back { color:#e0d5f1 !important; border-color:#77668c !important; }
#team-benchmark .back:hover { background:#393247 !important; border-color:#c4afe6 !important; color:#f5efff !important; }
#team-benchmark .back:focus-visible,
#team-benchmark input:focus-visible,
#team-benchmark select:focus-visible { outline-color:#d1bdf0; }
#team-form > .back,
#team-form > form > button[type="submit"] { padding:12px 24px; background:#c4afe6 !important; border-color:#ddcaf8 !important; color:#241930 !important; }
#team-form > form > button[type="submit"] { margin:8px 18px 26px; }
#team-form .calc-output { margin-top:8px; padding-top:24px; border-top:1px solid #454054; }
#team-benchmark .result-card { border-top-color:#9b87b9 !important; }
#team-benchmark .result-grid > .result-card:nth-child(2) { background:#302a3c !important; border-color:#837095 !important; border-top-color:#c4afe6 !important; }
#team-benchmark .result-grid > .result-card:nth-child(2) .result-number { color:#dcc8f7 !important; }
#team-form .calc-output > details { margin-top:24px; padding:20px; background:#202631; border:1px solid #4e485f; border-radius:8px; }
#team-form .calc-output > details > summary { color:#d7c5ee; cursor:pointer; line-height:1.6; }
#team-form .calc-output > details .calc-note { margin:16px 0 0; line-height:1.7; overflow-wrap:anywhere; }
@media(max-width:620px){
 #team-form { padding:18px 16px 24px; }
 #team-form > form > .calc-grid { padding:0 5px 8px; }
 #team-form > form > .calc-note,#team-form > form > .calc-warning { margin:18px 5px; }
 #team-form > form > button[type="submit"] { margin-left:5px; margin-right:5px; }
 #team-form .calc-output > details { padding:16px; }
}
.abyss-guide { margin-top:32px; padding-top:28px; border-top:1px solid #514557; }
.abyss-guide > h3 { margin:8px 0 14px; font-size:1.65rem; }
.abyss-section { margin:32px 0; min-width:0; }
.abyss-guide .section-note { margin:0 0 18px; max-width:850px; line-height:1.8; }
.abyss-guide .matrix-details .section-note { margin:18px 0; }
.abyss-guide p { overflow-wrap:break-word; }
.abyss-guide > .eyebrow { margin-top:0; }
.abyss-guide > .section-note { margin-bottom:28px; }
.abyss-section > h4 { font-size:1.15rem; margin:0 0 14px; }
.abyss-forms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.abyss-form { background:#202530; border:1px solid #414955; border-top:3px solid #cb9877; padding:24px; border-radius:12px; }
.abyss-form.magic { border-top-color:#a197d5; }
.abyss-form { min-width:0; }
.abyss-form > .eyebrow { margin-top:0; }
.abyss-form h4 { font-size:1.25rem; margin:10px 0 16px; }
.abyss-restriction { color:#e0d7cd; font-weight:600; }
.abyss-order { padding:12px 0; border-bottom:1px solid #414955; font-size:.88rem; color:#bbc6d6; line-height:1.7; }
.abyss-skill { padding-top:18px; }
.abyss-skill + .abyss-skill { margin-top:20px; border-top:1px solid #414955; }
.abyss-skill .back { white-space:normal; text-align:left; line-height:1.6; max-width:100%; }
.abyss-skill h5,.abyss-section h5 { font-size:1rem; margin:0 0 10px; }
.abyss-skill p { line-height:1.75; color:#c1c9d4; margin:0 0 12px; }
.abyss-skill .abyss-advice { color:#aebea9; font-size:.9rem; padding-left:12px; border-left:2px solid #697c65; }
.abyss-callout { padding:16px 20px; background:#252934; border-left:3px solid #b6a16f; border-radius:0 8px 8px 0; line-height:1.75; color:#d3d7df; }
.abyss-table-wrap { overflow-x:auto; max-width:100%; margin:20px 0; border:1px solid #3f4653; border-radius:8px; }
.abyss-table-wrap .matrix-tier-table { margin:0; }
.abyss-table-wrap th,.abyss-table-wrap td { padding:14px 16px; vertical-align:top; line-height:1.65; }
.abyss-table-wrap tr:last-child td { border-bottom:0; }
.abyss-table-wrap tbody tr:nth-child(even) { background:#ffffff03; }
.abyss-guide .matrix-formula { white-space:pre-line; }
.abyss-guide .matrix-formula { overflow-wrap:anywhere; line-height:1.8; padding:18px; }
.abyss-examples { padding-top:28px; border-top:1px solid #484251; }
@media(max-width:760px) { .abyss-forms { grid-template-columns:1fr; } .abyss-form { padding:20px; } }
.abyss-example-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.abyss-example-controls label { display:flex; flex-direction:column; gap:8px; color:#bec6d3; font-size:.85rem; }
.abyss-example-controls input { width:100%; box-sizing:border-box; padding:10px 12px; color:#eee; background:#191e27; border:1px solid #515966; border-radius:7px; }
.abyss-attack-detail { padding:16px 0; }
.abyss-attack-detail .matrix-tier-table { min-width:720px; }
.abyss-attack-detail .matrix-tier-table th:first-child { width:25%; }
.abyss-attack-detail summary { line-height:1.6; }
.abyss-attack-detail .abyss-advice { color:#c2d0bb; line-height:1.8; }
@media(max-width:760px) { .abyss-example-controls { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
 .mystery { margin-top:32px; padding:22px 17px; }
 .mystery-grid { margin:24px 0; }
 .abyss-table-wrap th,.abyss-table-wrap td { padding:12px 10px; }
 .abyss-section { margin:26px 0; }
 .abyss-guide .matrix-formula { font-size:.8rem; padding:14px; }
}
@media(max-width:400px) { .abyss-example-controls { grid-template-columns:1fr; } }
.calculator-toggle { margin-top:18px; min-width:100px; }
#calculator:not(.calculator-open) .calculator-intro { border-bottom:0; }
#calculator.calculator-open #calculator-form { animation:calculator-reveal .2s ease-out; }
@keyframes calculator-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { #calculator.calculator-open #calculator-form { animation:none; } }
.workspace-dock { position:sticky; top:12px; z-index:30; margin:24px 0; padding:7px; background:#18232ef5; border:1px solid #4c6173; border-radius:12px; box-shadow:0 8px 24px #0005; backdrop-filter:blur(12px); scroll-margin-top:12px; }
.workspace-dock [role="tablist"] { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.workspace-dock [role="tab"] { border:1px solid transparent; border-radius:7px; padding:12px 10px; background:transparent; color:#afbecb; font-size:13px; line-height:1.5; }
.workspace-dock [role="tab"]:hover { background:#293744; color:#edf4fa; }
.workspace-dock #dock-content:hover { background:#263c4c; border-color:#617f96; color:#c7e6f9; }
.workspace-dock #dock-damage:hover { background:#263a30; border-color:#688a74; color:#c0e4cb; }
.workspace-dock #dock-team:hover { background:#342e43; border-color:#8a779f; color:#ddcaf3; }
.workspace-dock #dock-maths:hover { background:#3b3427; border-color:#927d56; color:#eed4a5; }
.workspace-dock [role="tab"][aria-selected="true"] { background:#304454; border-color:#6e8da4; color:#e4f4ff; }
.workspace-dock #dock-damage[aria-selected="true"] { border-color:#82b394; color:#bce5c9; }
.workspace-dock #dock-team[aria-selected="true"] { background:#342e43; border-color:#a18bbd; color:#ddcaf3; }
.workspace-dock #dock-maths[aria-selected="true"] { border-color:#ad945f; color:#eed4a5; }
.workspace-layout { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:24px; }
.workspace-main,.workspace-reference { min-width:0; }
.workspace-main > .calculator { margin-top:0; }
.workspace-maths > .damage-guide { margin-top:0; }
.workspace-layout.has-reference { grid-template-columns:minmax(0,1fr) 360px; }
.workspace-reference { position:sticky; top:96px; background:#141f2a; border:1px solid #64758a; border-radius:12px; overflow:hidden; }
.reference-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid #445366; }
.reference-header strong { font-size:13px; line-height:1.6; }
.reference-body { max-height:calc(100vh - 190px); overflow:auto; overscroll-behavior:contain; }
.reference-toggle { display:none; }
.workspace-reference #content-panel { border:0; border-radius:0; box-shadow:none; }
.workspace-reference #view { padding:20px 16px; }
.workspace-reference .toolbar { padding:14px 16px; flex-wrap:wrap; }
.workspace-reference .stat-grid,.workspace-reference .abyss-forms,.workspace-reference .matrix-steps,.workspace-reference .abyss-example-controls { grid-template-columns:1fr; }
.workspace-reference .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.workspace-reference .abyss-form { padding:16px; }
.workspace-reference .matrix-overview { grid-template-columns:1fr; }
.workspace-reference .matrix-card-head { flex-wrap:wrap; }
.workspace-reference .matrix-controls { flex-wrap:wrap; }
.workspace-reference .matrix-formula { overflow-wrap:anywhere; }
.workspace-reference .matrix-tier-table { min-width:520px; }
.workspace-reference .abyss-table-wrap { max-width:100%; }
#pin-encounter { margin-left:auto; }
.workspace-layout.has-reference .calc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:1100px) {
 .workspace-layout.has-reference { grid-template-columns:minmax(0,1fr); }
 .workspace-reference { position:static; grid-row:1; }
 .reference-toggle { display:block; margin:12px 16px; }
 .workspace-reference:not(.drawer-open) .reference-body { display:none; }
 .reference-body { max-height:65vh; }
}
@media(max-width:620px) {
 .workspace-dock { top:6px; margin:18px 0; padding:5px; }
 .workspace-dock [role="tablist"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .workspace-dock [role="tab"] { font-size:12px; padding:9px 7px; }
 .workspace-layout.has-reference .calc-grid { grid-template-columns:1fr; }
}