rickub
anthodev/xeno-team-builderpublic Fork
⑂ b04c1af
Branches
develop feature/fixed-companion-builds/companions/1 View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/anthodev/xeno-team-builder.git
git clone ssh://git@rickub.com/anthodev/xeno-team-builder.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Download ZIP

feat: redesign frontend with Xenoblade Chronicles X visual language

Cedric ANTHONY committed 2026-10-01T22:17:00+02:00 Browse files
b04c1af parent: efdcb88
modified README.md +8 -0
@@ -18,6 +18,14 @@ your browser.
1818
1919 ## Highlights
2020
21+- **BLADE tactical dossier** — a bilingual workbench with a compact, full-width
22+ control deck above the results. Dark panels and thin cyan frames draw on XCX
23+ menus; a faint upper hex pattern echoes Nintendo's manual framing.
24+ Recommendation and member tabs scroll locally on small screens. Art
25+ descriptions, researched build notes and Skell details stay closed until
26+ opened, while the compact Skell summary remains visible.
27+- **Local configuration save** — build settings and the configuration panel's
28+ expanded/collapsed state are restored from browser storage after reload.
2129 - **Availability before scoring** — canonical class and companion records carry
2230 exact Art/Skill unlock ranks, weapons and Skill-slot caps. Locked abilities
2331 never enter the scorer.
@@ -18,6 +18,14 @@ your browser.
18 18
19 ## Highlights19 ## Highlights
20 20
21+- **BLADE tactical dossier** — a bilingual workbench with a compact, full-width
22+ control deck above the results. Dark panels and thin cyan frames draw on XCX
23+ menus; a faint upper hex pattern echoes Nintendo's manual framing.
24+ Recommendation and member tabs scroll locally on small screens. Art
25+ descriptions, researched build notes and Skell details stay closed until
26+ opened, while the compact Skell summary remains visible.
27+- **Local configuration save** — build settings and the configuration panel's
28+ expanded/collapsed state are restored from browser storage after reload.
21 - **Availability before scoring** — canonical class and companion records carry29 - **Availability before scoring** — canonical class and companion records carry
22 exact Art/Skill unlock ranks, weapons and Skill-slot caps. Locked abilities30 exact Art/Skill unlock ranks, weapons and Skill-slot caps. Locked abilities
23 never enter the scorer.31 never enter the scorer.
modified app/globals.css +350 -91
@@ -1,93 +1,352 @@
11 @import "tailwindcss";
22
3-:root { --ink:#07171c; --deep:#061015; --panel:#0a1e24; --line:rgba(151,231,232,.18); --cyan:#96eff0; --mint:#6ef3c5; --orange:#ff714f; --paper:#edf6f2; }
4-* { box-sizing:border-box; }
5-html { scroll-behavior:smooth; }
6-body { margin:0; background:var(--deep); color:var(--paper); font-family:Arial, Helvetica, sans-serif; }
7-button, select, input { font:inherit; }
8-main { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 84% 18%, rgba(69,207,195,.14), transparent 28%), linear-gradient(135deg,#07181e 0%,#061116 55%,#0b2025 100%); position:relative; }
9-main::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(151,239,240,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(151,239,240,.025) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
10-.scanlines { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.18) 4px); }
11-.topbar { height:76px; max-width:1760px; margin:auto; padding:0 5vw; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
12-.brand { display:flex; align-items:center; gap:12px; color:white; text-decoration:none; }
13-.brand-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--cyan); color:var(--cyan); font-size:26px; font-weight:900; transform:skew(-8deg); box-shadow:inset 0 0 18px rgba(150,239,240,.12); }
14-.brand b,.brand small { display:block; letter-spacing:.18em; } .brand b{font-size:19px}.brand small{font-size:13px;color:#7da0a4;margin-top:2px}
15-.top-status { margin-left:auto; margin-right:32px; color:#85a8aa; letter-spacing:.18em; font-size:14px; }
16-.pulse { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); margin-right:8px; }
17-.language-switch { display:flex; border:1px solid var(--line); padding:3px; }
18-.language-switch button { border:0; background:none; color:#719094; font-size:15px; font-weight:bold; padding:7px 10px; cursor:pointer; }
19-.language-switch button.active { background:var(--cyan); color:var(--deep); }
20-.builder-shell { max-width:1760px; margin:0 auto; padding:48px 5vw 72px; position:relative; z-index:2; }
21-.section-heading { display:flex; align-items:center; border-top:1px solid var(--line); padding:22px 0; gap:18px; }
22-.section-heading .step { color:var(--deep); background:var(--mint); padding:8px 9px; font-weight:900; font-size:16px; clip-path:polygon(0 0,100% 0,82% 100%,0 100%); }
23-.section-heading p { color:#6f9699;letter-spacing:.23em;font-size:13px;margin:0 0 4px}.section-heading h2{font-size:22px;margin:0;font-weight:500}.section-code{color:#55787c;font-size:13px;letter-spacing:.2em}
24-.section-toggle{display:flex;align-items:center;gap:9px;margin-left:auto;border:1px solid var(--line);background:rgba(8,29,34,.55);color:#7fa1a2;padding:8px 11px;cursor:pointer;font-size:11px;letter-spacing:.13em;text-transform:uppercase}.section-toggle:hover{border-color:rgba(150,239,240,.45);color:var(--cyan)}.section-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.section-toggle i{width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}.section-toggle[aria-expanded="true"] i{transform:rotate(225deg)}.builder-shell.is-collapsed{padding-bottom:16px}
25-.builder-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; }
26-.panel { background:linear-gradient(145deg,rgba(13,39,46,.9),rgba(7,24,29,.92)); border:1px solid var(--line); padding:28px; box-shadow:0 20px 70px rgba(0,0,0,.17); position:relative; }
27-.panel::before { content:"";position:absolute;left:-1px;top:18px;width:2px;height:42px;background:var(--cyan);box-shadow:0 0 12px var(--cyan); }
28-.field-label { display:flex; justify-content:space-between; color:#b7cdcc; font-size:16px; letter-spacing:.08em; }
29-.field-label output { color:var(--cyan);font-size:32px;font-weight:300;line-height:1; }
30-.level-slider { width:100%; margin:22px 0 7px; accent-color:var(--cyan); cursor:pointer; }
31-.level-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
32-.level-input { width:76px; background:#07171c; border:1px solid rgba(150,239,240,.2); color:var(--cyan); padding:13px 8px; font-size:16px; text-align:center; outline:none; }
33-.level-input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(150,239,240,.08); }
34-.scale { display:flex;justify-content:space-between;color:#4c7476;font-size:13px; }
35-.field-row { display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin-top:30px; }
36-.field-row label { display:flex;flex-direction:column; }
37-.field-row label>span { flex:1;font-size:14px;color:#6f9193;letter-spacing:.14em;margin-bottom:8px;text-transform:uppercase; }
38-select { width:100%;appearance:none;color:#dce9e6;background:#07171c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2396eff0'/%3E%3C/svg%3E") no-repeat right 13px center;border:1px solid rgba(150,239,240,.2);padding:13px 34px 13px 13px;font-size:16px;outline:none; }
39-select:focus { border-color:var(--cyan);box-shadow:0 0 0 2px rgba(150,239,240,.08); }
40-.class-readout { display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px; }
41-.class-readout small { display:block;color:#527579;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}.class-readout p{margin:0;font-size:15px;color:#a6bfbe;line-height:1.55}.class-readout span{color:var(--orange)}
42-.panel-title { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.panel-title h3{font-size:19px;margin:0 0 6px}.panel-title p{margin:0;color:#618589;font-size:14px}.panel-title>span{font-size:29px;color:var(--cyan);font-weight:300}
43-.operator-list { display:grid;gap:8px; }.operator { display:grid;grid-template-columns:34px minmax(150px,1fr) auto auto;align-items:center;background:rgba(4,15,18,.52);border:1px solid rgba(150,239,240,.09); }
44-.operator-index { text-align:center;color:#557d80;font-size:14px}.operator>select{border:0;border-left:1px solid rgba(150,239,240,.09);background-color:transparent;padding-top:14px;padding-bottom:14px}.operator-state{font-size:11px;letter-spacing:.12em;color:#658085;padding:0 9px}.operator-state.online{color:var(--mint)}.operator-metrics{display:flex;align-items:stretch;border-left:1px solid rgba(150,239,240,.09)}.operator-metrics label{display:grid;grid-template-columns:auto 52px;align-items:center;gap:5px;padding:0 7px;color:#638689;font-size:11px;letter-spacing:.08em}.operator-metrics label+label{border-left:1px solid rgba(150,239,240,.09)}.operator-metrics input{width:52px;background:#07171c;border:1px solid rgba(150,239,240,.18);color:var(--cyan);padding:7px 3px;text-align:center;outline:none}.operator-metrics input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(150,239,240,.08)}.progression-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:18px 0 0;padding:13px 14px;border:1px solid var(--line)}.progression-controls legend{padding:0 6px;color:#6f9193;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.progression-controls label{display:flex;align-items:center;gap:8px;color:#9bb2b1;font-size:13px}.progression-controls label.disabled{opacity:.45}.progression-controls input{accent-color:var(--cyan)}
45-.generate-button { width:100%;margin-top:19px;border:0;background:var(--cyan);color:#061318;display:flex;align-items:center;justify-content:space-between;padding:17px 18px;text-transform:uppercase;font-size:15px;letter-spacing:.13em;font-weight:900;cursor:pointer;clip-path:polygon(0 0,96% 0,100% 28%,100% 100%,0 100%);transition:.2s ease; }
46-.generate-button:hover { background:white;transform:translateY(-2px);box-shadow:0 12px 30px rgba(150,239,240,.18)}.generate-button b{font-size:24px}
47-.weapon-controls{margin:20px 0 0;padding:14px;border:1px solid var(--line);background:rgba(4,15,18,.28)}.weapon-controls legend{padding:0 7px;color:#6f9193;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.weapon-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.weapon-field-row label{display:flex;flex-direction:column}.weapon-field-row label>span{font-size:11px;color:#638689;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}.weapon-controls>p{margin:10px 0 0;color:#587b7e;font-size:11px;line-height:1.5}
48-.ranks-toggle { width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;color:#6e9698;text-transform:uppercase;letter-spacing:.13em;font-size:13px;cursor:pointer}.ranks-toggle b{font-size:23px;color:var(--cyan)}
49-.rank-hint { margin:10px 0 6px; font-size:13px; color:#6f9193; letter-spacing:.1em; line-height:1.5; }
50-.rank-tree { border-top:1px solid var(--line); margin-top:12px; padding-top:6px; max-height:340px; overflow:auto; }
51-.rank-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(150,239,240,.08); }
52-.rank-row.active { background:rgba(150,239,240,.06); box-shadow:inset 2px 0 var(--cyan); }
53-.rank-twig { width:16px; flex:none; color:#4f7376; font-size:13px; }
54-.rank-name { display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:14px; color:#99b2b2; }
55-.rank-tier-tag { font-size:12px; color:#4f7376; letter-spacing:.08em; }
56-.rank-stepper { display:flex; align-items:center; gap:6px; }
57-.rank-stepper button { width:26px; height:26px; padding:0; display:grid; place-items:center; background:#07171c; border:1px solid var(--line); color:var(--cyan); font-size:15px; line-height:1; cursor:pointer; transition:.18s ease; }
58-.rank-stepper button:hover { border-color:var(--cyan); box-shadow:0 0 10px rgba(150,239,240,.15); }
59-.rank-stepper .rank-value { width:42px; height:26px; padding:0 2px; background:#07171c; border:1px solid var(--line); color:var(--cyan); font-size:15px; text-align:center; outline:none; appearance:textfield; -moz-appearance:textfield; }
60-.rank-stepper .rank-value::-webkit-outer-spin-button,.rank-stepper .rank-value::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
61-.rank-stepper .rank-value:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(150,239,240,.08); }
62-.results { max-width:1760px;margin:0 auto;padding:16px 5vw 100px;position:relative;z-index:2;border-top:1px solid var(--line)}
63-.results-heading { padding-top:28px }.result-meta{margin-left:auto;text-align:right}.result-meta b,.result-meta span{display:block}.result-meta b{font-size:24px;color:var(--cyan);font-weight:300}.result-meta span{font-size:12px;color:#64878a;letter-spacing:.18em;margin-top:4px}
64-.squad-summary { display:grid;grid-template-columns:1.2fr 1.2fr 1fr;border:1px solid var(--line);background:rgba(8,29,34,.72);margin-bottom:12px}.squad-summary>div{padding:18px 20px;border-right:1px solid var(--line)}.squad-summary>div:last-child{border:0}.squad-summary small,.squad-summary strong,.squad-summary span{display:block}.squad-summary small{font-size:12px;color:#5d8487;letter-spacing:.18em;margin-bottom:7px}.squad-summary strong{font-size:16px;color:#dbeae7;font-weight:500;line-height:1.45}.squad-summary span{font-size:13px;color:#708f91;margin-top:6px;line-height:1.45}.coverage-summary strong{color:var(--mint)}
65-.build-list { display:grid;gap:12px}.build-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:12px}.build-tabs button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:rgba(8,29,34,.6);padding:10px 14px;cursor:pointer;color:#dbeae7}.build-tabs button>span{grid-row:1/3;font-size:12px;color:#567c7f}.build-tabs button>small{grid-column:2;font-size:11px;color:#5d8487;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.build-tabs button:hover{border-color:rgba(150,239,240,.4)}.build-tabs button.active{border-color:var(--cyan);background:rgba(150,239,240,.07);box-shadow:0 0 24px rgba(150,239,240,.08)}.build-tabs button.active>span,.build-tabs button.active>small{color:var(--cyan)}.build-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(10,31,37,.96),rgba(6,21,26,.97));box-shadow:0 20px 55px rgba(0,0,0,.15)}
66-.build-tabs button{grid-template-rows:auto auto auto}.build-tabs button>span{grid-row:1/-1}.build-tabs button>.companion-alternative{color:var(--mint);letter-spacing:.06em;text-transform:uppercase}
67-.build-tabs button>.companion-alternative.is-unavailable{color:#5d8487}
68-.build-card-head{min-height:72px;display:grid;grid-template-columns:54px 1fr auto;align-items:center;border-bottom:1px solid var(--line)}.member-number{height:100%;display:grid;place-items:center;border-right:1px solid var(--line);font-size:16px;color:#567c7f}.build-card-head>div:nth-child(2){padding:12px 0 12px 16px}.build-card-head h3{font-size:25px;margin:0 0 3px}.build-card-head p{font-size:14px;color:#709194;margin:0}.role-tag{text-align:right;padding:12px 20px}.role-tag small,.role-tag b{display:block}.role-tag small{font-size:12px;color:var(--orange);letter-spacing:.15em;margin-bottom:5px}.role-tag b{font-size:15px;color:#a9c1c0;font-weight:500}
69-.build-columns { display:grid;grid-template-columns:1.15fr .95fr .9fr}.loadout-block{padding:20px;border-right:1px solid var(--line);min-width:0}.loadout-block:last-child{border:0}.loadout-block h4{font-size:15px;letter-spacing:.11em;text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:8px}.loadout-block h4>span{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--cyan);font-size:13px;flex:none}.loadout-block h5{font-size:12px;letter-spacing:.16em;color:#618587;margin:20px 0 9px}.weapon-lock{font-size:13px;color:#66888a;line-height:1.45;min-height:24px;margin:0 0 12px}.arts-block ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:5px}.arts-block li{border:1px solid rgba(150,239,240,.08);background:rgba(2,14,17,.35);min-width:0}.art-detail summary{display:grid;grid-template-columns:32px minmax(0,1fr) auto 12px;align-items:start;gap:10px;padding:8px;cursor:pointer;list-style:none}.art-detail summary::-webkit-details-marker{display:none}.art-detail summary::after{content:"";width:7px;height:7px;margin-top:5px;border-right:1px solid #527477;border-bottom:1px solid #527477;transform:rotate(45deg);transition:transform .16s ease}.art-detail[open] summary::after{transform:rotate(225deg);margin-top:8px}.art-detail summary:hover b,.art-detail summary:focus-visible b{color:var(--cyan)}.art-detail summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}.art-number{font-size:11px;color:#4e7477;margin-top:2px;padding:2px 0;border:1px solid rgba(150,239,240,.25);text-align:center;letter-spacing:.05em}.art-heading{min-width:0}.art-heading b{display:block;font-size:13px;color:#bfd0ce;line-height:1.3}.art-heading small{display:block;font-size:11px;color:#527477;line-height:1.3;margin-top:2px}.art-detail .lvl-badge{margin:1px 0 0;text-align:center;white-space:nowrap;align-self:start}.art-detail-content{padding:0 30px 8px 50px;border-top:1px solid rgba(150,239,240,.06)}.art-detail .art-desc{margin:8px 0 0;font-size:12px;color:#789698;line-height:1.55}.lv-rec{color:var(--cyan);font-weight:500;white-space:nowrap}.chip-list .lv-rec{font-size:11px;flex:none}
70-.chip-list{display:grid;gap:6px}.chip-list>span{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid rgba(110,243,197,.2);background:rgba(110,243,197,.05);color:#9ec3b8;padding:7px 9px;font-size:12px;line-height:1.35}.chip-list b{font-weight:500}.chip-list .lvl-badge{margin-left:auto;flex-shrink:0}.stat-priority-list,.plan-reasons{margin:0;padding-left:20px;color:#789698;font-size:12px;line-height:1.55}.am-note{margin:0;display:grid;gap:2px}.am-note b{font-size:13px;color:#dbeae7;font-weight:500}.am-note span{font-size:12px;color:#789698;line-height:1.45}.stat-priority-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.plan-reasons{display:grid;gap:5px}.empty-loadout{border-left:1px solid var(--orange);padding-left:9px;color:#708f91;font-size:12px;line-height:1.5}
71-.skell-frame{border:1px solid rgba(255,113,79,.2);padding:11px;background:rgba(255,113,79,.04)}.skell-frame small,.skell-frame strong,.skell-frame span{display:block}.skell-frame small{font-size:11px;letter-spacing:.18em;color:#8f6c65}.skell-frame strong{font-size:28px;color:#ff9479;font-weight:300;margin:3px 0}.skell-frame span{font-size:12px;color:#896f6a}.skell-facts{display:grid;gap:0;margin:12px 0 0}.skell-facts>div{border-top:1px solid rgba(150,239,240,.09);padding:9px 0}.skell-facts dt{font-size:11px;letter-spacing:.12em;color:#5f8183;text-transform:uppercase}.skell-facts dd{margin:4px 0 0;color:#9eb5b4;font-size:12px;line-height:1.45}.skell-unavailable{border:1px solid rgba(255,113,79,.2);padding:14px;background:rgba(255,113,79,.04)}.skell-unavailable strong{color:#ff9479;font-size:13px;letter-spacing:.12em}.skell-unavailable p{margin:7px 0 0;color:#896f6a;font-size:13px;line-height:1.5}
72-.skell-detail{border-top:1px solid rgba(150,239,240,.09)}.skell-detail summary{display:flex;align-items:center;gap:8px;padding:10px 2px;color:#65888a;font-size:11px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;list-style:none}.skell-detail summary::-webkit-details-marker{display:none}.skell-detail summary::after{content:"";width:7px;height:7px;margin-left:auto;margin-right:3px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}.skell-detail[open] summary::after{transform:rotate(225deg)}.skell-detail summary:hover{color:var(--cyan)}.skell-detail summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.skell-detail summary small{color:#4e7477;font-size:10px;letter-spacing:.05em}.skell-detail-body{padding:0 2px 11px;color:#9eb5b4;font-size:12px;line-height:1.5}.skell-detail-body>p{margin:0}.skell-alts{opacity:.72}.skell-alts p{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;padding:6px 0;border-top:1px solid rgba(150,239,240,.07)}.skell-alts p:first-child{border-top:0}.skell-alts b{font-size:13px;color:#9eb5b4;font-weight:400}.skell-alts span{font-size:11px;color:#537477;text-align:right}
73-.skell-gear-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.skell-gear-list li{display:grid;gap:2px;border-left:2px solid rgba(150,239,240,.18);padding:4px 0 4px 10px}.skell-gear-list b{font-size:13px;color:#dbeae7;font-weight:500}.skell-gear-list small{font-size:11px;color:#5d8487;letter-spacing:.08em;text-transform:uppercase}.skell-gear-acquisition{font-size:11px;color:#537477;letter-spacing:.02em;line-height:1.35;text-transform:none}
74-.lvl-badge { display:inline-block;border:1px solid rgba(150,239,240,.35);color:var(--cyan);font-size:10px;font-style:normal;letter-spacing:.05em;padding:2px 5px;text-decoration:none;line-height:1.35 }
75-.lvl-badge:hover,.lvl-badge:focus-visible{border-color:var(--cyan);background:rgba(150,239,240,.08)}
76-.equip-facts{display:grid;gap:0;margin:0}.equip-facts>div{border-top:1px solid rgba(150,239,240,.09);padding:9px 0}.equip-facts dt{font-size:11px;letter-spacing:.12em;color:#5f8183;text-transform:uppercase}.equip-facts dd{margin:4px 0 0;color:#9eb5b4;font-size:12px;line-height:1.5}
77-.curated-rationale{margin:0;color:#8fa9a7;font-size:12px;line-height:1.55}
78-.substitute-list{margin:0;padding-left:18px;color:#789698;font-size:12px;line-height:1.55;display:grid;gap:4px}
79-.source-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.source-list li{display:flex;align-items:baseline;gap:8px}.source-list a{color:var(--cyan);font-size:12px;text-decoration:none;border-bottom:1px solid rgba(150,239,240,.3)}.source-list a:hover,.source-list a:focus-visible{border-bottom-color:var(--cyan)}.source-list small{color:#4e7477;font-size:10px;letter-spacing:.08em}
80-.method-note{display:grid;grid-template-columns:40px 1fr;gap:15px;margin-top:18px;border:1px solid var(--line);padding:20px;background:rgba(7,26,31,.7)}.method-note>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--orange);color:var(--orange)}.method-note h3{font-size:16px;margin:2px 0 7px}.method-note p{font-size:14px;line-height:1.65;color:#789698;margin:0;max-width:1200px}
81-.contextual-controls .combat-mode-field{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(150px,1fr);gap:12px}.contextual-controls .combat-mode-field select{padding-top:8px;padding-bottom:8px}.contextual-controls .special-unlock-field{grid-column:1/-1}.recommendation-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.recommendation-tabs button{display:grid;gap:5px;text-align:left;padding:14px 16px;border:1px solid var(--line);background:rgba(8,29,34,.58);color:#718f91;cursor:pointer}.recommendation-tabs button span{font-size:11px;letter-spacing:.15em;text-transform:uppercase}.recommendation-tabs button b{font-size:14px;color:#a8bfbd;font-weight:500}.recommendation-tabs button small{font-size:11px;color:#55787c}.recommendation-tabs button:hover{border-color:rgba(150,239,240,.45)}.recommendation-tabs button.active{border-color:var(--cyan);background:linear-gradient(120deg,rgba(150,239,240,.11),rgba(110,243,197,.04));box-shadow:inset 3px 0 var(--cyan)}.recommendation-tabs button.active span,.recommendation-tabs button.active small{color:var(--cyan)}.recommendation-tabs button.active b{color:#e5f3ef}.recommendation-context{display:grid;grid-template-columns:1.4fr auto 1fr;gap:18px;align-items:start;border:1px solid var(--line);border-top:0;background:rgba(4,18,22,.58);padding:15px 18px;margin:-12px 0 12px}.recommendation-context small,.infeasible-panel small{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#63888a;margin-bottom:7px}.recommendation-context ul,.infeasible-panel ul{margin:0;padding-left:18px;color:#91aaa8;font-size:13px;line-height:1.5}.score-grid{display:flex;gap:7px;margin:0}.score-grid div{min-width:52px;padding:7px;border:1px solid rgba(150,239,240,.12);text-align:center}.score-grid dt{font-size:9px;color:#55787c;letter-spacing:.1em}.score-grid dd{margin:3px 0 0;color:var(--mint);font-size:13px}.recommendation-evidence{display:flex;flex-wrap:wrap;gap:6px}.recommendation-evidence small{width:100%}.recommendation-evidence a,.skell-evidence a{font-size:11px;color:#80a9aa;text-decoration:none;border:1px solid rgba(150,239,240,.15);padding:4px 6px}.recommendation-evidence a:hover,.skell-evidence a:hover{color:var(--cyan);border-color:var(--cyan)}.infeasible-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:1px solid rgba(255,113,79,.3);background:rgba(255,113,79,.05);padding:22px}.arts-block li.special-art{border-color:rgba(255,113,79,.3);background:rgba(255,113,79,.045)}.special-art-badge{display:inline-block;margin-left:7px;padding:2px 4px;border:1px solid rgba(255,113,79,.35);color:#ff9479;font-size:8px;font-style:normal;letter-spacing:.08em;text-transform:uppercase}.art-detail .art-fallback{display:grid;gap:2px;margin:7px 0 0;padding:6px 8px;border-left:2px solid var(--mint);background:rgba(110,243,197,.04)}.art-detail .art-fallback strong{font-size:10px;color:#98c8b8}.art-detail .art-fallback span{font-size:10px;color:#5f8180}.skell-evidence{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
82-.recommendation-context{grid-template-columns:1.4fr auto}
83-.skell-package-notes{margin:10px 0 14px;padding-left:18px;color:#789698;font-size:11px;line-height:1.5;display:grid;gap:4px}
84-.skill-unlock{font-size:9px;color:#5d8487;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
85-footer{max-width:1760px;margin:0 auto;padding:28px 5vw 40px;border-top:1px solid var(--line);position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}footer b,footer span{display:block}footer b{font-size:14px;letter-spacing:.18em;color:#91adaa}footer span{font-size:12px;color:#537477;margin-top:5px}footer nav{display:flex;gap:17px}footer a{font-size:13px;color:#6b9596;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px}footer a:hover{color:var(--cyan);border-color:var(--cyan)}
86-.footer-legal{max-width:960px;margin:10px 0 0;color:#496b6e;font-size:11px;line-height:1.55}
87-@media(max-width:1300px){.build-columns{grid-template-columns:1fr 1fr}.loadout-block:nth-child(2){border-right:0}.build-columns .skell-block{grid-column:1/-1;border-top:1px solid var(--line);border-right:0}}
88-@media(max-width:1100px){.operator{grid-template-columns:34px minmax(0,1fr) auto}.operator-metrics{grid-column:2/4;border-top:1px solid rgba(150,239,240,.09)}.operator-metrics label{flex:1}}
89-@media(max-width:850px){.builder-grid{grid-template-columns:1fr}.top-status{display:none}.section-code{display:none}.squad-summary{grid-template-columns:1fr}.squad-summary>div{border-right:0;border-bottom:1px solid var(--line)}.recommendation-context{grid-template-columns:1fr}.recommendation-tabs{grid-template-columns:1fr}footer{align-items:flex-start;gap:20px}footer nav{flex-wrap:wrap;justify-content:flex-end}}
90-@media(max-width:560px){.topbar{padding:0 20px}.builder-shell,.results{padding-left:20px;padding-right:20px}.brand small{display:none}.panel{padding:20px}.field-row,.class-readout{grid-template-columns:1fr}.operator{grid-template-columns:28px minmax(0,1fr);padding:7px 0}.operator>select{border-bottom:1px solid rgba(150,239,240,.09)}.operator-state{display:none}.operator-metrics{grid-column:2;display:grid;grid-template-columns:1fr 1fr;border-left:1px solid rgba(150,239,240,.09)}.operator-metrics label{grid-template-columns:1fr 52px;padding:7px}.progression-controls{grid-template-columns:1fr}.build-columns{grid-template-columns:1fr}.skell-block{grid-column:auto}.loadout-block{border-right:0;border-bottom:1px solid var(--line)!important}.build-card-head{grid-template-columns:40px 1fr}.role-tag{display:none}.arts-block ol{grid-template-columns:1fr}.result-meta{display:none}.stat-priority-list{grid-template-columns:1fr}footer{flex-direction:column}footer nav{justify-content:flex-start}}
91-@media(max-width:560px){.section-heading{gap:12px}.section-heading>div{min-width:0}.section-toggle{width:36px;height:36px;margin-left:auto;padding:0;justify-content:center;flex:none}.section-toggle span{display:none}}
92-@media(max-width:560px){.weapon-field-row{grid-template-columns:1fr}}
93-@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
3+:root {
4+ --ink: #0B101B;
5+ --panel: #1C2C3B;
6+ --line: #506A7D;
7+ --text: #EDF2F4;
8+ --muted: #B3C4CE;
9+ --signal: #72D8EA;
10+ color-scheme: dark;
11+}
12+
13+* { box-sizing: border-box; }
14+html { scroll-behavior: smooth; }
15+body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-geist-sans), Arial, sans-serif; font-size: 14px; line-height: 21px; }
16+button, select, input { font: inherit; }
17+button, select, input, summary, a { transition: color 120ms, background-color 120ms, border-color 120ms; }
18+button, select, input:not([type="checkbox"]), summary { min-height: 44px; }
19+button, select, input { border-radius: 4px; }
20+button, summary { cursor: pointer; }
21+button:disabled, select:disabled, input:disabled { cursor: not-allowed; color: var(--muted); }
22+a { color: var(--signal); }
23+:where(button, select, input, summary, a):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
24+main { min-height: 100vh; position: relative; isolation: isolate; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, var(--signal)) 0, var(--ink) 620px); }
25+/* Hex framing echoes Nintendo's XCX manual; working surfaces stay opaque. */
26+main::before { content: ""; position: absolute; inset: 0 0 auto; height: 480px; z-index: -1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='84' viewBox='0 0 144 84'%3E%3Cpath d='M24 0H72L96 42L72 84H24L0 42ZM96 42H144M96 42L120 0M96 42L120 84' fill='none' stroke='%2372D8EA' stroke-width='1'/%3E%3C/svg%3E"); mask-image: linear-gradient(180deg, #000, transparent); }
27+.topbar { min-height: 80px; max-width: 1600px; margin: auto; padding: 12px 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; position: relative; background: linear-gradient(115deg, var(--text) 0 300px, var(--ink) 301px); border-bottom: 1px solid var(--line); }
28+/* Short cyan terminals echo the game's thin, horizontal menu frames. */
29+.topbar::after, .section-heading::after { content: ""; position: absolute; right: 0; bottom: -1px; width: 64px; height: 3px; background: var(--signal); pointer-events: none; }
30+.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-height: 44px; }
31+.brand:hover { text-decoration: underline; text-underline-offset: 4px; }
32+.brand:focus-visible { outline-color: var(--ink); }
33+.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid currentColor; color: var(--ink); font-size: 32px; line-height: 36px; font-weight: 800; }
34+.brand b, .brand small { display: block; }
35+.brand b { font-size: 24px; line-height: 28px; letter-spacing: .16em; font-weight: 800; }
36+.brand small { font-size: 10px; line-height: 18px; letter-spacing: .06em; color: var(--ink); }
37+.language-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--muted); border-radius: 4px; }
38+.language-switch button { min-width: 44px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 8px; font-size: 12px; font-weight: 650; }
39+.language-switch button:hover { color: var(--text); background: var(--panel); }
40+.language-switch button.active { background: color-mix(in srgb, var(--signal) 10%, var(--panel)); color: var(--signal); border-bottom-color: var(--signal); }
41+.workspace { max-width: 1600px; margin: 0 auto; padding: 24px 32px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
42+.builder-shell { min-width: 0; position: relative; background: var(--ink); border: 1px solid var(--line); padding: 16px; }
43+.section-heading { display: flex; align-items: center; position: relative; padding: 0 0 12px; margin-bottom: 16px; gap: 12px; border-bottom: 1px solid var(--line); }
44+.section-heading .step { color: var(--signal); padding: 8px 0; font-weight: 650; font-size: 12px; line-height: 18px; }
45+.section-heading p { color: var(--muted); font-size: 12px; line-height: 18px; margin: 0 0 4px; }
46+.section-heading h2 { font-size: 24px; line-height: 28px; letter-spacing: -.035em; margin: 0; font-weight: 700; }
47+.section-code { color: var(--muted); font-size: 12px; line-height: 18px; }
48+.section-toggle { display: flex; align-items: center; gap: 12px; margin-left: auto; border: 1px solid var(--muted); background: var(--panel); color: var(--text); padding: 8px 12px; font-size: 12px; line-height: 18px; }
49+.section-toggle:hover { border-color: var(--signal); color: var(--signal); }
50+.section-toggle i { width: 8px; height: 8px; flex: none; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
51+.section-toggle[aria-expanded="true"] i { transform: rotate(225deg); }
52+.builder-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
53+.panel { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 16px; }
54+.level-control { min-width: 0; }
55+.builder-shell.is-collapsed .section-heading { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
56+.builder-shell.is-collapsed .section-heading::after { display: none; }
57+.field-label { display: flex; justify-content: space-between; color: var(--text); }
58+.field-label output { color: var(--text); font-size: 20px; line-height: 24px; }
59+.level-slider { width: 100%; margin: 12px 0 4px; accent-color: var(--signal); cursor: pointer; }
60+.level-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
61+.level-input { width: 76px; background: var(--panel); border: 1px solid var(--muted); color: var(--text); padding: 8px; text-align: center; }
62+.scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; line-height: 18px; }
63+.field-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 12px; margin-top: 16px; }
64+.field-row label { display: flex; flex-direction: column; min-width: 0; }
65+.field-row label > span { flex: 1; color: var(--muted); margin-bottom: 8px; }
66+select { width: 100%; min-width: 0; color: var(--text); background-color: var(--ink); border: 1px solid var(--muted); padding: 8px 12px; }
67+select:enabled:hover, input:enabled:not([type="range"]):hover { border-color: var(--signal); }
68+.class-readout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
69+.class-readout small { display: block; color: var(--muted); font-size: 12px; line-height: 18px; margin-bottom: 8px; }
70+.class-readout p { margin: 0; color: var(--text); }
71+.class-readout span { color: var(--muted); }
72+.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
73+.panel-title h3 { font-size: 18px; line-height: 24px; margin: 0 0 4px; font-weight: 650; }
74+.panel-title p { margin: 0; color: var(--muted); }
75+.panel-title > span { font-size: 20px; line-height: 24px; color: var(--text); }
76+.operator-list { display: grid; gap: 4px; }
77+.operator { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--line); min-width: 0; }
78+.operator-index { text-align: center; color: var(--muted); font-size: 12px; line-height: 18px; }
79+.operator-state { font-size: 12px; line-height: 18px; color: var(--muted); padding: 0 8px; }
80+.operator-state.online { color: var(--text); }
81+.operator-metrics { display: flex; align-items: stretch; }
82+.operator-metrics label { display: grid; grid-template-columns: auto 52px; align-items: center; gap: 4px; padding: 0 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
83+.operator-metrics label + label { border-left: 1px solid var(--line); }
84+.operator-metrics input { width: 52px; background: var(--panel); border: 1px solid var(--muted); color: var(--text); padding: 8px 4px; text-align: center; }
85+.progression-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--line); min-width: 0; }
86+.progression-controls legend, .weapon-controls legend { padding: 0 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
87+.progression-controls label { display: flex; align-items: center; gap: 8px; color: var(--text); min-height: 44px; }
88+.progression-controls label.disabled { color: var(--muted); }
89+.progression-controls input { accent-color: var(--signal); flex: none; }
90+.generate-button { width: 100%; margin-top: 12px; border: 1px solid var(--signal); background: var(--signal); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; font-weight: 650; }
91+.generate-button:hover { background: var(--text); border-color: var(--text); }
92+.generate-button:focus-visible { outline-color: var(--text); }
93+.generate-button b { font-size: 24px; line-height: 28px; }
94+.weapon-controls { margin: 16px 0 0; padding: 12px; border: 1px solid var(--line); min-width: 0; }
95+.weapon-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
96+.weapon-field-row label { display: flex; flex-direction: column; min-width: 0; }
97+.weapon-field-row label > span { color: var(--muted); margin-bottom: 8px; }
98+.weapon-controls > p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
99+.ranks-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 12px 0; border: 0; border-top: 1px solid var(--muted); background: transparent; color: var(--text); }
100+.ranks-toggle:hover { color: var(--signal); }
101+.ranks-toggle b { font-size: 20px; line-height: 24px; }
102+.rank-hint { margin: 12px 0 8px; color: var(--muted); }
103+.rank-tree { border-top: 1px solid var(--line); margin-top: 12px; padding: 8px; max-height: 340px; overflow: auto; }
104+.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
105+.rank-row.active { background: color-mix(in srgb, var(--signal) 10%, var(--panel)); text-decoration: underline; text-underline-offset: 4px; }
106+.rank-twig { width: 16px; flex: none; color: var(--muted); font-size: 12px; line-height: 18px; }
107+.rank-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); }
108+.rank-tier-tag { font-size: 12px; line-height: 18px; color: var(--muted); }
109+.rank-stepper { display: flex; align-items: center; gap: 4px; }
110+.rank-stepper button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--muted); color: var(--text); }
111+.rank-stepper button:hover { border-color: var(--signal); color: var(--signal); }
112+.rank-stepper .rank-value { width: 44px; height: 44px; padding: 0 4px; background: var(--panel); border: 1px solid var(--muted); color: var(--text); text-align: center; appearance: textfield; -moz-appearance: textfield; }
113+.rank-stepper .rank-value::-webkit-outer-spin-button, .rank-stepper .rank-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
114+
115+.results { min-width: 0; position: relative; scroll-margin-top: 16px; }
116+.results-heading { min-height: 65px; }
117+.result-meta { margin-left: auto; text-align: right; }
118+.result-meta b, .result-meta span { display: block; }
119+.result-meta b { font-size: 20px; line-height: 24px; color: var(--text); font-weight: 650; }
120+.result-meta span { font-size: 12px; line-height: 18px; color: var(--muted); margin-top: 4px; }
121+.squad-summary { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; border: 1px solid var(--line); border-radius: 2px; background: color-mix(in srgb, var(--panel) 75%, var(--ink)); margin-bottom: 12px; }
122+.squad-summary > div { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
123+.squad-summary > div:last-child { border: 0; }
124+.squad-summary small, .squad-summary strong, .squad-summary span { display: block; }
125+.squad-summary small { font-size: 11px; line-height: 18px; color: var(--muted); margin-bottom: 4px; }
126+.squad-summary strong { font-size: 14px; line-height: 21px; color: var(--text); font-weight: 650; }
127+.squad-summary span { color: var(--muted); margin-top: 4px; font-size: 12px; line-height: 18px; }
128+.build-list { display: grid; gap: 12px; }
129+.build-tabs { display: flex; gap: 8px; margin: 0 -8px 8px; padding: 8px; overflow-x: auto; scroll-padding-inline: 8px; }
130+.build-tabs button { flex: 1 0 180px; min-width: 180px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; text-align: left; border: 0; border-bottom: 2px solid var(--muted); border-radius: 0; background: color-mix(in srgb, var(--ink) 70%, transparent); padding: 12px; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
131+.build-tabs button > span { grid-row: 1 / -1; font-size: 12px; line-height: 18px; color: var(--muted); }
132+.build-tabs button > small { grid-column: 2; font-size: 12px; line-height: 18px; color: var(--muted); overflow-wrap: anywhere; }
133+.build-tabs button:hover { border-color: var(--signal); }
134+.build-tabs button.active { border-bottom-color: var(--signal); background: var(--panel); }
135+.build-tabs button.active > span, .build-tabs button.active > small { color: var(--signal); }
136+.build-tabs button > .companion-alternative { color: var(--text); }
137+.build-tabs button > .companion-alternative.is-unavailable { color: var(--muted); }
138+.build-card { border: 1px solid var(--line); border-radius: 2px; background: var(--panel); }
139+.build-card-head { min-height: 80px; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--panel) 72%, var(--signal)), var(--panel)); overflow-wrap: anywhere; }
140+.member-number { height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line); font-size: 20px; line-height: 24px; color: var(--signal); }
141+.build-card-head > div:nth-child(2) { padding: 12px 0 12px 16px; }
142+.build-card-head h3 { font-size: 28px; line-height: 32px; letter-spacing: -.04em; font-weight: 750; margin: 0 0 4px; }
143+.build-card-head p { color: var(--muted); margin: 0; }
144+.role-tag { text-align: right; padding: 12px 16px; }
145+.role-tag small, .role-tag b { display: block; }
146+.role-tag small { font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 4px; }
147+.role-tag b { color: var(--text); font-weight: 650; }
148+.build-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
149+.loadout-block { padding: 16px; min-width: 0; }
150+.arts-block { border-right: 1px solid var(--line); }
151+.skills-block { background: color-mix(in srgb, var(--panel) 80%, var(--ink)); }
152+.skell-block { grid-column: 1 / -1; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 75%, var(--panel)); }
153+.skell-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px; align-items: start; }
154+.skell-disclosures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; align-items: start; margin-top: 12px; }
155+.loadout-block h4 { font-size: 16px; line-height: 22px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
156+.loadout-block h4 > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--signal); font-size: 12px; line-height: 18px; flex: none; }
157+.loadout-block h5 { font-size: 12px; line-height: 18px; color: var(--muted); margin: 16px 0 8px; }
158+.weapon-lock { color: var(--muted); min-height: 24px; margin: 0 0 12px; }
159+.arts-block ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
160+.arts-block li { border-bottom: 1px solid var(--line); min-width: 0; }
161+.art-detail summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 12px; align-items: center; gap: 8px; padding: 12px 0; list-style: none; }
162+.art-detail summary::-webkit-details-marker, .skell-detail summary::-webkit-details-marker { display: none; }
163+.art-detail summary::after { content: ""; width: 8px; height: 8px; margin-top: 4px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); }
164+.art-detail[open] summary::after { transform: rotate(225deg); margin-top: 8px; }
165+.art-detail summary:hover b, .art-detail summary:focus-visible b { color: var(--signal); }
166+.art-number { font-size: 12px; line-height: 18px; color: var(--muted); padding: 4px 0; text-align: center; }
167+.art-heading { min-width: 0; display: grid; gap: 4px; }
168+.art-heading b { display: block; font-size: 15px; line-height: 21px; color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
169+.art-heading small { display: block; font-size: 12px; line-height: 18px; color: var(--muted); overflow-wrap: anywhere; }
170+.art-detail .lvl-badge { margin: 0; text-align: right; white-space: nowrap; }
171+.art-detail-content { padding: 0 16px 12px; border-top: 1px solid var(--line); }
172+.art-detail .art-desc { margin: 8px 0 0; color: var(--muted); }
173+.lv-rec { color: var(--text); font-weight: 650; white-space: nowrap; }
174+.chip-list .lv-rec { font-size: 12px; line-height: 18px; flex: none; }
175+.chip-list { display: grid; }
176+.chip-list > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); color: var(--text); padding: 12px 0; }
177+.chip-list b { font-size: 16px; line-height: 22px; font-weight: 650; }
178+.chip-list .lvl-badge { margin-left: auto; flex-shrink: 0; }
179+.stat-priority-list, .plan-reasons { margin: 0; padding-left: 24px; color: var(--muted); }
180+.am-note { margin: 0; display: grid; gap: 4px; }
181+.am-note b { font-size: 16px; line-height: 22px; color: var(--text); font-weight: 650; }
182+.am-note span { color: var(--muted); }
183+.stat-priority-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
184+.plan-reasons { display: grid; gap: 4px; }
185+.empty-loadout { border-left: 1px solid var(--muted); padding-left: 12px; color: var(--muted); }
186+.skell-frame { padding: 0; }
187+.skell-frame small, .skell-frame strong, .skell-frame span { display: block; }
188+.skell-frame small { font-size: 12px; line-height: 18px; color: var(--muted); }
189+.skell-frame strong { font-size: 24px; line-height: 28px; color: var(--text); font-weight: 650; margin: 4px 0; }
190+.skell-frame span { color: var(--muted); }
191+.skell-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
192+.skell-facts > div { border-left: 1px solid var(--line); padding: 4px 0 4px 12px; }
193+.equip-facts > div { border-top: 1px solid var(--line); padding: 12px 0; }
194+.skell-facts dt, .equip-facts dt { font-size: 12px; line-height: 18px; color: var(--muted); }
195+.skell-facts dd, .equip-facts dd { margin: 4px 0 0; color: var(--text); overflow-wrap: anywhere; }
196+.skell-unavailable { padding: 0; }
197+.skell-unavailable strong { color: var(--text); font-size: 16px; line-height: 22px; }
198+.skell-unavailable p { margin: 8px 0 0; color: var(--muted); }
199+.skell-detail { border-top: 1px solid var(--line); }
200+.skell-detail summary { display: flex; align-items: center; gap: 8px; padding: 12px 4px; color: var(--text); font-size: 12px; line-height: 18px; list-style: none; }
201+.skell-detail summary::after { content: ""; width: 8px; height: 8px; flex: none; margin-left: auto; margin-right: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
202+.skell-detail[open] summary::after { transform: rotate(225deg); }
203+.skell-detail summary:hover { color: var(--signal); }
204+.skell-detail summary small { color: var(--muted); font-size: 12px; line-height: 18px; }
205+.skell-detail-body { padding: 0 4px 12px; color: var(--muted); }
206+.skell-detail-body > p { margin: 0; }
207+.skell-alts p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-top: 1px solid var(--line); }
208+.skell-alts p:first-child { border-top: 0; }
209+.skell-alts b { color: var(--text); font-weight: 650; }
210+.skell-alts span { font-size: 12px; line-height: 18px; color: var(--muted); text-align: right; }
211+.skell-gear-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
212+.skell-gear-list li { display: grid; gap: 4px; border-left: 1px solid var(--line); padding: 4px 0 4px 12px; }
213+.skell-gear-list b { font-size: 16px; line-height: 22px; color: var(--text); font-weight: 650; }
214+.skell-gear-list small, .skell-gear-acquisition { font-size: 12px; line-height: 18px; color: var(--muted); }
215+.lvl-badge { display: inline-block; color: var(--text); font-size: 12px; line-height: 18px; font-style: normal; padding: 4px 0; }
216+.equip-facts { display: grid; gap: 0; margin: 0; }
217+.curated-rationale { margin: 0; color: var(--muted); }
218+.substitute-list { margin: 0; padding-left: 24px; color: var(--muted); display: grid; gap: 4px; }
219+.source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
220+.source-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
221+.source-list a { color: var(--signal); text-underline-offset: 4px; }
222+.source-list a:hover { color: var(--text); }
223+.source-list small { color: var(--muted); font-size: 12px; line-height: 18px; }
224+.method-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 16px; border-top: 1px solid var(--line); padding: 16px 0 0; }
225+.method-note > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--muted); color: var(--text); }
226+.method-note h3 { font-size: 14px; line-height: 21px; margin: 0 0 4px; }
227+.method-note p { color: var(--muted); margin: 0; font-size: 12px; line-height: 18px; }
228+.contextual-controls .combat-mode-field { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
229+.contextual-controls .special-unlock-field { grid-column: 1 / -1; }
230+.recommendation-tabs { display: flex; gap: 8px; margin: 0 -8px 8px; padding: 8px; overflow-x: auto; scroll-padding-inline: 8px; }
231+.recommendation-tabs button { flex: 1 0 220px; min-width: 220px; display: grid; gap: 4px; text-align: left; padding: 12px 16px; border: 1px solid var(--muted); border-bottom-width: 3px; border-radius: 2px; background: var(--panel); color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
232+.recommendation-tabs button span { font-size: 12px; line-height: 18px; }
233+.recommendation-tabs button b { font-size: 16px; line-height: 22px; color: var(--text); font-weight: 650; }
234+.recommendation-tabs button small { font-size: 12px; line-height: 18px; color: var(--muted); }
235+.recommendation-tabs button:hover { border-color: var(--signal); }
236+.recommendation-tabs button.active { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, var(--panel)); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--signal); }
237+.recommendation-tabs button.active span, .recommendation-tabs button.active small { color: var(--signal); }
238+.recommendation-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-top: 0; background: color-mix(in srgb, var(--panel) 75%, var(--ink)); padding: 12px; margin: -12px 0 8px; }
239+.recommendation-context small, .infeasible-panel small { display: block; font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 8px; }
240+.recommendation-context ul, .infeasible-panel ul { margin: 0; padding-left: 24px; color: var(--muted); }
241+.score-grid { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
242+.score-grid div { min-width: 0; padding: 4px 12px; border-left: 1px solid var(--line); text-align: center; overflow-wrap: anywhere; }
243+.score-grid dt { font-size: 12px; line-height: 18px; color: var(--muted); }
244+.score-grid dd { margin: 4px 0 0; color: var(--text); font-size: 20px; line-height: 24px; }
245+.recommendation-evidence { display: flex; flex-wrap: wrap; gap: 8px; }
246+.recommendation-evidence small { width: 100%; }
247+.recommendation-evidence a, .skell-evidence a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 18px; color: var(--text); text-decoration: none; border: 1px solid var(--muted); border-radius: 4px; padding: 8px; }
248+.recommendation-evidence a:hover, .skell-evidence a:hover { color: var(--signal); border-color: var(--signal); }
249+.infeasible-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; border: 1px solid var(--line); border-radius: 2px; background: var(--panel); padding: 16px; }
250+.special-art-badge { display: inline-block; margin-left: 8px; color: var(--signal); font-size: 11px; line-height: 18px; font-style: normal; font-weight: 400; }
251+.art-detail .art-fallback { display: grid; gap: 4px; margin: 8px 0 0; padding: 8px; border-left: 1px solid var(--muted); }
252+.art-detail .art-fallback strong { color: var(--text); }
253+.art-detail .art-fallback span { color: var(--muted); }
254+.skell-evidence { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
255+.skell-package-notes { margin: 12px 0 16px; padding-left: 24px; color: var(--muted); display: grid; gap: 4px; }
256+.skill-unlock { font-size: 12px; line-height: 18px; color: var(--muted); }
257+
258+footer { max-width: 1600px; margin: 0 auto; padding: 24px 32px 32px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--ink); }
259+footer b, footer span { display: block; }
260+footer b { color: var(--text); }
261+footer span { font-size: 12px; line-height: 18px; color: var(--muted); margin-top: 4px; }
262+footer nav { display: flex; gap: 16px; }
263+footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-underline-offset: 4px; }
264+footer a:hover { color: var(--signal); }
265+.footer-legal { max-width: 960px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
266+:where(.brand small, .language-switch, .step, .section-code, .scale, .field-label output, .panel-title > span, .operator-index, .operator-state, .rank-tier-tag, .member-number, .art-number, .lvl-badge, .score-grid, .result-meta, .level-input, .rank-value, .operator-metrics input) { font-family: var(--font-geist-mono), ui-monospace, monospace; font-variant-numeric: tabular-nums; }
267+
268+@media (min-width: 1024px) {
269+ .contextual-controls .combat-mode-field, .contextual-controls .special-unlock-field { grid-column: auto; }
270+}
271+@media (min-width: 1280px) {
272+ .controls-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: start; }
273+ .level-control { grid-column: 1; }
274+ .controls-panel .field-row { grid-column: 1; margin-top: 0; }
275+ .controls-panel .weapon-controls { grid-column: 2; grid-row: 1 / 3; margin: 0; }
276+ .controls-panel .weapon-field-row { grid-template-columns: 1fr; }
277+ .controls-panel .class-readout { grid-column: 1 / -1; margin-top: 0; }
278+ .controls-panel .ranks-toggle { grid-column: 1 / -1; margin-top: 0; }
279+ .controls-panel .rank-tree { grid-column: 1 / -1; margin-top: 0; }
280+}
281+@media (max-width: 1023px) {
282+ .topbar, footer { padding-left: 24px; padding-right: 24px; }
283+ .workspace { padding: 24px; }
284+ .builder-grid { grid-template-columns: 1fr; }
285+ .builder-shell { padding: 12px; }
286+ .section-code { display: none; }
287+ .squad-summary { grid-template-columns: 1fr; }
288+ .squad-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
289+ .recommendation-context { grid-template-columns: 1fr; }
290+ .build-columns { grid-template-columns: 1fr; }
291+ .loadout-block { border-right: 0; border-bottom: 1px solid var(--line); }
292+ .skell-block { border-top: 0; border-bottom: 0; }
293+ .skell-overview { grid-template-columns: 1fr; gap: 16px; }
294+ .skell-disclosures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
295+ footer { align-items: flex-start; }
296+ footer nav { flex-wrap: wrap; justify-content: flex-end; }
297+}
298+@media (max-width: 767px) {
299+ .topbar, footer { padding-left: 16px; padding-right: 16px; }
300+ .workspace { padding: 16px; gap: 24px; }
301+ .topbar { background: linear-gradient(115deg, var(--text) 0 192px, var(--ink) 193px); gap: 8px; }
302+ .brand { gap: 8px; }
303+ .brand-mark { width: 32px; height: 36px; font-size: 24px; }
304+ .brand b { font-size: 18px; line-height: 24px; }
305+ .brand small { font-size: 8px; letter-spacing: 0; }
306+ .language-switch { gap: 0; padding: 0; }
307+ .panel, .loadout-block, .infeasible-panel, .squad-summary > div, .method-note, .recommendation-context { padding: 12px; }
308+ .field-row, .class-readout, .weapon-field-row, .progression-controls, .infeasible-panel { grid-template-columns: 1fr; }
309+ .builder-shell { padding: 12px; }
310+ .builder-shell .panel { border: 0; }
311+ .operator { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 4px; }
312+ .operator > select { grid-column: 2 / -1; }
313+ .operator-state { grid-column: 2; padding: 0; }
314+ .operator-metrics { grid-column: 3; }
315+ .operator-metrics label { grid-template-columns: minmax(0, 1fr) 52px; padding: 0; }
316+ .section-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
317+ .section-heading > div { min-width: 0; }
318+ .section-toggle { grid-column: 1 / -1; width: 100%; margin-left: 0; justify-content: space-between; }
319+ .recommendation-tabs button { flex-basis: 180px; min-width: 180px; }
320+ .build-tabs button { flex-basis: 160px; min-width: 160px; }
321+ .score-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
322+ .art-heading { display: block; }
323+ .art-heading small { margin-top: 4px; text-align: left; }
324+ .build-card-head { grid-template-columns: 32px minmax(0, 1fr); }
325+ .role-tag { grid-column: 2; text-align: left; }
326+ .result-meta { grid-column: 1 / -1; width: 100%; text-align: left; margin-left: 0; }
327+ .stat-priority-list { grid-template-columns: 1fr; }
328+ .skell-facts { grid-template-columns: 1fr; gap: 8px; }
329+ .skell-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-left: 0; border-top: 1px solid var(--line); }
330+ .skell-facts dd { margin: 0; }
331+ .skell-disclosures { grid-template-columns: 1fr; gap: 0; }
332+ .skell-frame strong { font-size: 22px; line-height: 28px; }
333+ .rank-row { flex-wrap: wrap; }
334+ .rank-stepper { margin-left: auto; }
335+ .rank-name { flex-basis: 100%; }
336+ footer { flex-direction: column; }
337+ footer nav { justify-content: flex-start; }
338+}
339+@media (prefers-reduced-motion: reduce) {
340+ *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
341+}
342+@media (forced-colors: active) {
343+ :root { --ink: Canvas; --panel: Canvas; --line: CanvasText; --text: CanvasText; --muted: CanvasText; --signal: LinkText; }
344+ :where(button, select, input, summary, a):focus-visible { outline-color: Highlight; }
345+ button:disabled, select:disabled, input:disabled, .progression-controls label.disabled { color: GrayText; }
346+ main, .topbar, .builder-shell, .build-card-head { background: Canvas; }
347+ main::before, .topbar::after, .section-heading::after { display: none; }
348+ .brand, .brand-mark, .brand small { color: CanvasText; }
349+ .language-switch button.active, .build-tabs button.active, .recommendation-tabs button.active { border-bottom-color: Highlight; text-decoration: underline; text-underline-offset: 4px; }
350+ .generate-button { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
351+ .brand:focus-visible, .generate-button:focus-visible { outline-color: Highlight; }
352+}
@@ -1,93 +1,352 @@
1 @import "tailwindcss";1 @import "tailwindcss";
2 2
3-:root { --ink:#07171c; --deep:#061015; --panel:#0a1e24; --line:rgba(151,231,232,.18); --cyan:#96eff0; --mint:#6ef3c5; --orange:#ff714f; --paper:#edf6f2; }3+:root {
4-* { box-sizing:border-box; }4+ --ink: #0B101B;
5-html { scroll-behavior:smooth; }5+ --panel: #1C2C3B;
6-body { margin:0; background:var(--deep); color:var(--paper); font-family:Arial, Helvetica, sans-serif; }6+ --line: #506A7D;
7-button, select, input { font:inherit; }7+ --text: #EDF2F4;
8-main { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 84% 18%, rgba(69,207,195,.14), transparent 28%), linear-gradient(135deg,#07181e 0%,#061116 55%,#0b2025 100%); position:relative; }8+ --muted: #B3C4CE;
9-main::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(151,239,240,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(151,239,240,.025) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }9+ --signal: #72D8EA;
10-.scanlines { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.18) 4px); }10+ color-scheme: dark;
11-.topbar { height:76px; max-width:1760px; margin:auto; padding:0 5vw; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }11+}
12-.brand { display:flex; align-items:center; gap:12px; color:white; text-decoration:none; }12+
13-.brand-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--cyan); color:var(--cyan); font-size:26px; font-weight:900; transform:skew(-8deg); box-shadow:inset 0 0 18px rgba(150,239,240,.12); }13+* { box-sizing: border-box; }
14-.brand b,.brand small { display:block; letter-spacing:.18em; } .brand b{font-size:19px}.brand small{font-size:13px;color:#7da0a4;margin-top:2px}14+html { scroll-behavior: smooth; }
15-.top-status { margin-left:auto; margin-right:32px; color:#85a8aa; letter-spacing:.18em; font-size:14px; }15+body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-geist-sans), Arial, sans-serif; font-size: 14px; line-height: 21px; }
16-.pulse { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); margin-right:8px; }16+button, select, input { font: inherit; }
17-.language-switch { display:flex; border:1px solid var(--line); padding:3px; }17+button, select, input, summary, a { transition: color 120ms, background-color 120ms, border-color 120ms; }
18-.language-switch button { border:0; background:none; color:#719094; font-size:15px; font-weight:bold; padding:7px 10px; cursor:pointer; }18+button, select, input:not([type="checkbox"]), summary { min-height: 44px; }
19-.language-switch button.active { background:var(--cyan); color:var(--deep); }19+button, select, input { border-radius: 4px; }
20-.builder-shell { max-width:1760px; margin:0 auto; padding:48px 5vw 72px; position:relative; z-index:2; }20+button, summary { cursor: pointer; }
21-.section-heading { display:flex; align-items:center; border-top:1px solid var(--line); padding:22px 0; gap:18px; }21+button:disabled, select:disabled, input:disabled { cursor: not-allowed; color: var(--muted); }
22-.section-heading .step { color:var(--deep); background:var(--mint); padding:8px 9px; font-weight:900; font-size:16px; clip-path:polygon(0 0,100% 0,82% 100%,0 100%); }22+a { color: var(--signal); }
23-.section-heading p { color:#6f9699;letter-spacing:.23em;font-size:13px;margin:0 0 4px}.section-heading h2{font-size:22px;margin:0;font-weight:500}.section-code{color:#55787c;font-size:13px;letter-spacing:.2em}23+:where(button, select, input, summary, a):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
24-.section-toggle{display:flex;align-items:center;gap:9px;margin-left:auto;border:1px solid var(--line);background:rgba(8,29,34,.55);color:#7fa1a2;padding:8px 11px;cursor:pointer;font-size:11px;letter-spacing:.13em;text-transform:uppercase}.section-toggle:hover{border-color:rgba(150,239,240,.45);color:var(--cyan)}.section-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.section-toggle i{width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}.section-toggle[aria-expanded="true"] i{transform:rotate(225deg)}.builder-shell.is-collapsed{padding-bottom:16px}24+main { min-height: 100vh; position: relative; isolation: isolate; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, var(--signal)) 0, var(--ink) 620px); }
25-.builder-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; }25+/* Hex framing echoes Nintendo's XCX manual; working surfaces stay opaque. */
26-.panel { background:linear-gradient(145deg,rgba(13,39,46,.9),rgba(7,24,29,.92)); border:1px solid var(--line); padding:28px; box-shadow:0 20px 70px rgba(0,0,0,.17); position:relative; }26+main::before { content: ""; position: absolute; inset: 0 0 auto; height: 480px; z-index: -1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='84' viewBox='0 0 144 84'%3E%3Cpath d='M24 0H72L96 42L72 84H24L0 42ZM96 42H144M96 42L120 0M96 42L120 84' fill='none' stroke='%2372D8EA' stroke-width='1'/%3E%3C/svg%3E"); mask-image: linear-gradient(180deg, #000, transparent); }
27-.panel::before { content:"";position:absolute;left:-1px;top:18px;width:2px;height:42px;background:var(--cyan);box-shadow:0 0 12px var(--cyan); }27+.topbar { min-height: 80px; max-width: 1600px; margin: auto; padding: 12px 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; position: relative; background: linear-gradient(115deg, var(--text) 0 300px, var(--ink) 301px); border-bottom: 1px solid var(--line); }
28-.field-label { display:flex; justify-content:space-between; color:#b7cdcc; font-size:16px; letter-spacing:.08em; }28+/* Short cyan terminals echo the game's thin, horizontal menu frames. */
29-.field-label output { color:var(--cyan);font-size:32px;font-weight:300;line-height:1; }29+.topbar::after, .section-heading::after { content: ""; position: absolute; right: 0; bottom: -1px; width: 64px; height: 3px; background: var(--signal); pointer-events: none; }
30-.level-slider { width:100%; margin:22px 0 7px; accent-color:var(--cyan); cursor:pointer; }30+.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-height: 44px; }
31-.level-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }31+.brand:hover { text-decoration: underline; text-underline-offset: 4px; }
32-.level-input { width:76px; background:#07171c; border:1px solid rgba(150,239,240,.2); color:var(--cyan); padding:13px 8px; font-size:16px; text-align:center; outline:none; }32+.brand:focus-visible { outline-color: var(--ink); }
33-.level-input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(150,239,240,.08); }33+.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid currentColor; color: var(--ink); font-size: 32px; line-height: 36px; font-weight: 800; }
34-.scale { display:flex;justify-content:space-between;color:#4c7476;font-size:13px; }34+.brand b, .brand small { display: block; }
35-.field-row { display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin-top:30px; }35+.brand b { font-size: 24px; line-height: 28px; letter-spacing: .16em; font-weight: 800; }
36-.field-row label { display:flex;flex-direction:column; }36+.brand small { font-size: 10px; line-height: 18px; letter-spacing: .06em; color: var(--ink); }
37-.field-row label>span { flex:1;font-size:14px;color:#6f9193;letter-spacing:.14em;margin-bottom:8px;text-transform:uppercase; }37+.language-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--muted); border-radius: 4px; }
38-select { width:100%;appearance:none;color:#dce9e6;background:#07171c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2396eff0'/%3E%3C/svg%3E") no-repeat right 13px center;border:1px solid rgba(150,239,240,.2);padding:13px 34px 13px 13px;font-size:16px;outline:none; }38+.language-switch button { min-width: 44px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 8px; font-size: 12px; font-weight: 650; }
39-select:focus { border-color:var(--cyan);box-shadow:0 0 0 2px rgba(150,239,240,.08); }39+.language-switch button:hover { color: var(--text); background: var(--panel); }
40-.class-readout { display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px; }40+.language-switch button.active { background: color-mix(in srgb, var(--signal) 10%, var(--panel)); color: var(--signal); border-bottom-color: var(--signal); }
41-.class-readout small { display:block;color:#527579;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}.class-readout p{margin:0;font-size:15px;color:#a6bfbe;line-height:1.55}.class-readout span{color:var(--orange)}41+.workspace { max-width: 1600px; margin: 0 auto; padding: 24px 32px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
42-.panel-title { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.panel-title h3{font-size:19px;margin:0 0 6px}.panel-title p{margin:0;color:#618589;font-size:14px}.panel-title>span{font-size:29px;color:var(--cyan);font-weight:300}42+.builder-shell { min-width: 0; position: relative; background: var(--ink); border: 1px solid var(--line); padding: 16px; }
43-.operator-list { display:grid;gap:8px; }.operator { display:grid;grid-template-columns:34px minmax(150px,1fr) auto auto;align-items:center;background:rgba(4,15,18,.52);border:1px solid rgba(150,239,240,.09); }43+.section-heading { display: flex; align-items: center; position: relative; padding: 0 0 12px; margin-bottom: 16px; gap: 12px; border-bottom: 1px solid var(--line); }
44-.operator-index { text-align:center;color:#557d80;font-size:14px}.operator>select{border:0;border-left:1px solid rgba(150,239,240,.09);background-color:transparent;padding-top:14px;padding-bottom:14px}.operator-state{font-size:11px;letter-spacing:.12em;color:#658085;padding:0 9px}.operator-state.online{color:var(--mint)}.operator-metrics{display:flex;align-items:stretch;border-left:1px solid rgba(150,239,240,.09)}.operator-metrics label{display:grid;grid-template-columns:auto 52px;align-items:center;gap:5px;padding:0 7px;color:#638689;font-size:11px;letter-spacing:.08em}.operator-metrics label+label{border-left:1px solid rgba(150,239,240,.09)}.operator-metrics input{width:52px;background:#07171c;border:1px solid rgba(150,239,240,.18);color:var(--cyan);padding:7px 3px;text-align:center;outline:none}.operator-metrics input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(150,239,240,.08)}.progression-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:18px 0 0;padding:13px 14px;border:1px solid var(--line)}.progression-controls legend{padding:0 6px;color:#6f9193;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.progression-controls label{display:flex;align-items:center;gap:8px;color:#9bb2b1;font-size:13px}.progression-controls label.disabled{opacity:.45}.progression-controls input{accent-color:var(--cyan)}44+.section-heading .step { color: var(--signal); padding: 8px 0; font-weight: 650; font-size: 12px; line-height: 18px; }
45-.generate-button { width:100%;margin-top:19px;border:0;background:var(--cyan);color:#061318;display:flex;align-items:center;justify-content:space-between;padding:17px 18px;text-transform:uppercase;font-size:15px;letter-spacing:.13em;font-weight:900;cursor:pointer;clip-path:polygon(0 0,96% 0,100% 28%,100% 100%,0 100%);transition:.2s ease; }45+.section-heading p { color: var(--muted); font-size: 12px; line-height: 18px; margin: 0 0 4px; }
46-.generate-button:hover { background:white;transform:translateY(-2px);box-shadow:0 12px 30px rgba(150,239,240,.18)}.generate-button b{font-size:24px}46+.section-heading h2 { font-size: 24px; line-height: 28px; letter-spacing: -.035em; margin: 0; font-weight: 700; }
47-.weapon-controls{margin:20px 0 0;padding:14px;border:1px solid var(--line);background:rgba(4,15,18,.28)}.weapon-controls legend{padding:0 7px;color:#6f9193;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.weapon-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.weapon-field-row label{display:flex;flex-direction:column}.weapon-field-row label>span{font-size:11px;color:#638689;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}.weapon-controls>p{margin:10px 0 0;color:#587b7e;font-size:11px;line-height:1.5}47+.section-code { color: var(--muted); font-size: 12px; line-height: 18px; }
48-.ranks-toggle { width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;color:#6e9698;text-transform:uppercase;letter-spacing:.13em;font-size:13px;cursor:pointer}.ranks-toggle b{font-size:23px;color:var(--cyan)}48+.section-toggle { display: flex; align-items: center; gap: 12px; margin-left: auto; border: 1px solid var(--muted); background: var(--panel); color: var(--text); padding: 8px 12px; font-size: 12px; line-height: 18px; }
49-.rank-hint { margin:10px 0 6px; font-size:13px; color:#6f9193; letter-spacing:.1em; line-height:1.5; }49+.section-toggle:hover { border-color: var(--signal); color: var(--signal); }
50-.rank-tree { border-top:1px solid var(--line); margin-top:12px; padding-top:6px; max-height:340px; overflow:auto; }50+.section-toggle i { width: 8px; height: 8px; flex: none; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
51-.rank-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(150,239,240,.08); }51+.section-toggle[aria-expanded="true"] i { transform: rotate(225deg); }
52-.rank-row.active { background:rgba(150,239,240,.06); box-shadow:inset 2px 0 var(--cyan); }52+.builder-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
53-.rank-twig { width:16px; flex:none; color:#4f7376; font-size:13px; }53+.panel { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 16px; }
54-.rank-name { display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:14px; color:#99b2b2; }54+.level-control { min-width: 0; }
55-.rank-tier-tag { font-size:12px; color:#4f7376; letter-spacing:.08em; }55+.builder-shell.is-collapsed .section-heading { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
56-.rank-stepper { display:flex; align-items:center; gap:6px; }56+.builder-shell.is-collapsed .section-heading::after { display: none; }
57-.rank-stepper button { width:26px; height:26px; padding:0; display:grid; place-items:center; background:#07171c; border:1px solid var(--line); color:var(--cyan); font-size:15px; line-height:1; cursor:pointer; transition:.18s ease; }57+.field-label { display: flex; justify-content: space-between; color: var(--text); }
58-.rank-stepper button:hover { border-color:var(--cyan); box-shadow:0 0 10px rgba(150,239,240,.15); }58+.field-label output { color: var(--text); font-size: 20px; line-height: 24px; }
59-.rank-stepper .rank-value { width:42px; height:26px; padding:0 2px; background:#07171c; border:1px solid var(--line); color:var(--cyan); font-size:15px; text-align:center; outline:none; appearance:textfield; -moz-appearance:textfield; }59+.level-slider { width: 100%; margin: 12px 0 4px; accent-color: var(--signal); cursor: pointer; }
60-.rank-stepper .rank-value::-webkit-outer-spin-button,.rank-stepper .rank-value::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }60+.level-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
61-.rank-stepper .rank-value:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(150,239,240,.08); }61+.level-input { width: 76px; background: var(--panel); border: 1px solid var(--muted); color: var(--text); padding: 8px; text-align: center; }
62-.results { max-width:1760px;margin:0 auto;padding:16px 5vw 100px;position:relative;z-index:2;border-top:1px solid var(--line)}62+.scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; line-height: 18px; }
63-.results-heading { padding-top:28px }.result-meta{margin-left:auto;text-align:right}.result-meta b,.result-meta span{display:block}.result-meta b{font-size:24px;color:var(--cyan);font-weight:300}.result-meta span{font-size:12px;color:#64878a;letter-spacing:.18em;margin-top:4px}63+.field-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 12px; margin-top: 16px; }
64-.squad-summary { display:grid;grid-template-columns:1.2fr 1.2fr 1fr;border:1px solid var(--line);background:rgba(8,29,34,.72);margin-bottom:12px}.squad-summary>div{padding:18px 20px;border-right:1px solid var(--line)}.squad-summary>div:last-child{border:0}.squad-summary small,.squad-summary strong,.squad-summary span{display:block}.squad-summary small{font-size:12px;color:#5d8487;letter-spacing:.18em;margin-bottom:7px}.squad-summary strong{font-size:16px;color:#dbeae7;font-weight:500;line-height:1.45}.squad-summary span{font-size:13px;color:#708f91;margin-top:6px;line-height:1.45}.coverage-summary strong{color:var(--mint)}64+.field-row label { display: flex; flex-direction: column; min-width: 0; }
65-.build-list { display:grid;gap:12px}.build-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:12px}.build-tabs button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:rgba(8,29,34,.6);padding:10px 14px;cursor:pointer;color:#dbeae7}.build-tabs button>span{grid-row:1/3;font-size:12px;color:#567c7f}.build-tabs button>small{grid-column:2;font-size:11px;color:#5d8487;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.build-tabs button:hover{border-color:rgba(150,239,240,.4)}.build-tabs button.active{border-color:var(--cyan);background:rgba(150,239,240,.07);box-shadow:0 0 24px rgba(150,239,240,.08)}.build-tabs button.active>span,.build-tabs button.active>small{color:var(--cyan)}.build-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(10,31,37,.96),rgba(6,21,26,.97));box-shadow:0 20px 55px rgba(0,0,0,.15)}65+.field-row label > span { flex: 1; color: var(--muted); margin-bottom: 8px; }
66-.build-tabs button{grid-template-rows:auto auto auto}.build-tabs button>span{grid-row:1/-1}.build-tabs button>.companion-alternative{color:var(--mint);letter-spacing:.06em;text-transform:uppercase}66+select { width: 100%; min-width: 0; color: var(--text); background-color: var(--ink); border: 1px solid var(--muted); padding: 8px 12px; }
67-.build-tabs button>.companion-alternative.is-unavailable{color:#5d8487}67+select:enabled:hover, input:enabled:not([type="range"]):hover { border-color: var(--signal); }
68-.build-card-head{min-height:72px;display:grid;grid-template-columns:54px 1fr auto;align-items:center;border-bottom:1px solid var(--line)}.member-number{height:100%;display:grid;place-items:center;border-right:1px solid var(--line);font-size:16px;color:#567c7f}.build-card-head>div:nth-child(2){padding:12px 0 12px 16px}.build-card-head h3{font-size:25px;margin:0 0 3px}.build-card-head p{font-size:14px;color:#709194;margin:0}.role-tag{text-align:right;padding:12px 20px}.role-tag small,.role-tag b{display:block}.role-tag small{font-size:12px;color:var(--orange);letter-spacing:.15em;margin-bottom:5px}.role-tag b{font-size:15px;color:#a9c1c0;font-weight:500}68+.class-readout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
69-.build-columns { display:grid;grid-template-columns:1.15fr .95fr .9fr}.loadout-block{padding:20px;border-right:1px solid var(--line);min-width:0}.loadout-block:last-child{border:0}.loadout-block h4{font-size:15px;letter-spacing:.11em;text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:8px}.loadout-block h4>span{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--cyan);font-size:13px;flex:none}.loadout-block h5{font-size:12px;letter-spacing:.16em;color:#618587;margin:20px 0 9px}.weapon-lock{font-size:13px;color:#66888a;line-height:1.45;min-height:24px;margin:0 0 12px}.arts-block ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:5px}.arts-block li{border:1px solid rgba(150,239,240,.08);background:rgba(2,14,17,.35);min-width:0}.art-detail summary{display:grid;grid-template-columns:32px minmax(0,1fr) auto 12px;align-items:start;gap:10px;padding:8px;cursor:pointer;list-style:none}.art-detail summary::-webkit-details-marker{display:none}.art-detail summary::after{content:"";width:7px;height:7px;margin-top:5px;border-right:1px solid #527477;border-bottom:1px solid #527477;transform:rotate(45deg);transition:transform .16s ease}.art-detail[open] summary::after{transform:rotate(225deg);margin-top:8px}.art-detail summary:hover b,.art-detail summary:focus-visible b{color:var(--cyan)}.art-detail summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}.art-number{font-size:11px;color:#4e7477;margin-top:2px;padding:2px 0;border:1px solid rgba(150,239,240,.25);text-align:center;letter-spacing:.05em}.art-heading{min-width:0}.art-heading b{display:block;font-size:13px;color:#bfd0ce;line-height:1.3}.art-heading small{display:block;font-size:11px;color:#527477;line-height:1.3;margin-top:2px}.art-detail .lvl-badge{margin:1px 0 0;text-align:center;white-space:nowrap;align-self:start}.art-detail-content{padding:0 30px 8px 50px;border-top:1px solid rgba(150,239,240,.06)}.art-detail .art-desc{margin:8px 0 0;font-size:12px;color:#789698;line-height:1.55}.lv-rec{color:var(--cyan);font-weight:500;white-space:nowrap}.chip-list .lv-rec{font-size:11px;flex:none}69+.class-readout small { display: block; color: var(--muted); font-size: 12px; line-height: 18px; margin-bottom: 8px; }
70-.chip-list{display:grid;gap:6px}.chip-list>span{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid rgba(110,243,197,.2);background:rgba(110,243,197,.05);color:#9ec3b8;padding:7px 9px;font-size:12px;line-height:1.35}.chip-list b{font-weight:500}.chip-list .lvl-badge{margin-left:auto;flex-shrink:0}.stat-priority-list,.plan-reasons{margin:0;padding-left:20px;color:#789698;font-size:12px;line-height:1.55}.am-note{margin:0;display:grid;gap:2px}.am-note b{font-size:13px;color:#dbeae7;font-weight:500}.am-note span{font-size:12px;color:#789698;line-height:1.45}.stat-priority-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.plan-reasons{display:grid;gap:5px}.empty-loadout{border-left:1px solid var(--orange);padding-left:9px;color:#708f91;font-size:12px;line-height:1.5}70+.class-readout p { margin: 0; color: var(--text); }
71-.skell-frame{border:1px solid rgba(255,113,79,.2);padding:11px;background:rgba(255,113,79,.04)}.skell-frame small,.skell-frame strong,.skell-frame span{display:block}.skell-frame small{font-size:11px;letter-spacing:.18em;color:#8f6c65}.skell-frame strong{font-size:28px;color:#ff9479;font-weight:300;margin:3px 0}.skell-frame span{font-size:12px;color:#896f6a}.skell-facts{display:grid;gap:0;margin:12px 0 0}.skell-facts>div{border-top:1px solid rgba(150,239,240,.09);padding:9px 0}.skell-facts dt{font-size:11px;letter-spacing:.12em;color:#5f8183;text-transform:uppercase}.skell-facts dd{margin:4px 0 0;color:#9eb5b4;font-size:12px;line-height:1.45}.skell-unavailable{border:1px solid rgba(255,113,79,.2);padding:14px;background:rgba(255,113,79,.04)}.skell-unavailable strong{color:#ff9479;font-size:13px;letter-spacing:.12em}.skell-unavailable p{margin:7px 0 0;color:#896f6a;font-size:13px;line-height:1.5}71+.class-readout span { color: var(--muted); }
72-.skell-detail{border-top:1px solid rgba(150,239,240,.09)}.skell-detail summary{display:flex;align-items:center;gap:8px;padding:10px 2px;color:#65888a;font-size:11px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;list-style:none}.skell-detail summary::-webkit-details-marker{display:none}.skell-detail summary::after{content:"";width:7px;height:7px;margin-left:auto;margin-right:3px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}.skell-detail[open] summary::after{transform:rotate(225deg)}.skell-detail summary:hover{color:var(--cyan)}.skell-detail summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.skell-detail summary small{color:#4e7477;font-size:10px;letter-spacing:.05em}.skell-detail-body{padding:0 2px 11px;color:#9eb5b4;font-size:12px;line-height:1.5}.skell-detail-body>p{margin:0}.skell-alts{opacity:.72}.skell-alts p{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;padding:6px 0;border-top:1px solid rgba(150,239,240,.07)}.skell-alts p:first-child{border-top:0}.skell-alts b{font-size:13px;color:#9eb5b4;font-weight:400}.skell-alts span{font-size:11px;color:#537477;text-align:right}72+.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
73-.skell-gear-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.skell-gear-list li{display:grid;gap:2px;border-left:2px solid rgba(150,239,240,.18);padding:4px 0 4px 10px}.skell-gear-list b{font-size:13px;color:#dbeae7;font-weight:500}.skell-gear-list small{font-size:11px;color:#5d8487;letter-spacing:.08em;text-transform:uppercase}.skell-gear-acquisition{font-size:11px;color:#537477;letter-spacing:.02em;line-height:1.35;text-transform:none}73+.panel-title h3 { font-size: 18px; line-height: 24px; margin: 0 0 4px; font-weight: 650; }
74-.lvl-badge { display:inline-block;border:1px solid rgba(150,239,240,.35);color:var(--cyan);font-size:10px;font-style:normal;letter-spacing:.05em;padding:2px 5px;text-decoration:none;line-height:1.35 }74+.panel-title p { margin: 0; color: var(--muted); }
75-.lvl-badge:hover,.lvl-badge:focus-visible{border-color:var(--cyan);background:rgba(150,239,240,.08)}75+.panel-title > span { font-size: 20px; line-height: 24px; color: var(--text); }
76-.equip-facts{display:grid;gap:0;margin:0}.equip-facts>div{border-top:1px solid rgba(150,239,240,.09);padding:9px 0}.equip-facts dt{font-size:11px;letter-spacing:.12em;color:#5f8183;text-transform:uppercase}.equip-facts dd{margin:4px 0 0;color:#9eb5b4;font-size:12px;line-height:1.5}76+.operator-list { display: grid; gap: 4px; }
77-.curated-rationale{margin:0;color:#8fa9a7;font-size:12px;line-height:1.55}77+.operator { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--line); min-width: 0; }
78-.substitute-list{margin:0;padding-left:18px;color:#789698;font-size:12px;line-height:1.55;display:grid;gap:4px}78+.operator-index { text-align: center; color: var(--muted); font-size: 12px; line-height: 18px; }
79-.source-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.source-list li{display:flex;align-items:baseline;gap:8px}.source-list a{color:var(--cyan);font-size:12px;text-decoration:none;border-bottom:1px solid rgba(150,239,240,.3)}.source-list a:hover,.source-list a:focus-visible{border-bottom-color:var(--cyan)}.source-list small{color:#4e7477;font-size:10px;letter-spacing:.08em}79+.operator-state { font-size: 12px; line-height: 18px; color: var(--muted); padding: 0 8px; }
80-.method-note{display:grid;grid-template-columns:40px 1fr;gap:15px;margin-top:18px;border:1px solid var(--line);padding:20px;background:rgba(7,26,31,.7)}.method-note>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--orange);color:var(--orange)}.method-note h3{font-size:16px;margin:2px 0 7px}.method-note p{font-size:14px;line-height:1.65;color:#789698;margin:0;max-width:1200px}80+.operator-state.online { color: var(--text); }
81-.contextual-controls .combat-mode-field{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(150px,1fr);gap:12px}.contextual-controls .combat-mode-field select{padding-top:8px;padding-bottom:8px}.contextual-controls .special-unlock-field{grid-column:1/-1}.recommendation-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.recommendation-tabs button{display:grid;gap:5px;text-align:left;padding:14px 16px;border:1px solid var(--line);background:rgba(8,29,34,.58);color:#718f91;cursor:pointer}.recommendation-tabs button span{font-size:11px;letter-spacing:.15em;text-transform:uppercase}.recommendation-tabs button b{font-size:14px;color:#a8bfbd;font-weight:500}.recommendation-tabs button small{font-size:11px;color:#55787c}.recommendation-tabs button:hover{border-color:rgba(150,239,240,.45)}.recommendation-tabs button.active{border-color:var(--cyan);background:linear-gradient(120deg,rgba(150,239,240,.11),rgba(110,243,197,.04));box-shadow:inset 3px 0 var(--cyan)}.recommendation-tabs button.active span,.recommendation-tabs button.active small{color:var(--cyan)}.recommendation-tabs button.active b{color:#e5f3ef}.recommendation-context{display:grid;grid-template-columns:1.4fr auto 1fr;gap:18px;align-items:start;border:1px solid var(--line);border-top:0;background:rgba(4,18,22,.58);padding:15px 18px;margin:-12px 0 12px}.recommendation-context small,.infeasible-panel small{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#63888a;margin-bottom:7px}.recommendation-context ul,.infeasible-panel ul{margin:0;padding-left:18px;color:#91aaa8;font-size:13px;line-height:1.5}.score-grid{display:flex;gap:7px;margin:0}.score-grid div{min-width:52px;padding:7px;border:1px solid rgba(150,239,240,.12);text-align:center}.score-grid dt{font-size:9px;color:#55787c;letter-spacing:.1em}.score-grid dd{margin:3px 0 0;color:var(--mint);font-size:13px}.recommendation-evidence{display:flex;flex-wrap:wrap;gap:6px}.recommendation-evidence small{width:100%}.recommendation-evidence a,.skell-evidence a{font-size:11px;color:#80a9aa;text-decoration:none;border:1px solid rgba(150,239,240,.15);padding:4px 6px}.recommendation-evidence a:hover,.skell-evidence a:hover{color:var(--cyan);border-color:var(--cyan)}.infeasible-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:1px solid rgba(255,113,79,.3);background:rgba(255,113,79,.05);padding:22px}.arts-block li.special-art{border-color:rgba(255,113,79,.3);background:rgba(255,113,79,.045)}.special-art-badge{display:inline-block;margin-left:7px;padding:2px 4px;border:1px solid rgba(255,113,79,.35);color:#ff9479;font-size:8px;font-style:normal;letter-spacing:.08em;text-transform:uppercase}.art-detail .art-fallback{display:grid;gap:2px;margin:7px 0 0;padding:6px 8px;border-left:2px solid var(--mint);background:rgba(110,243,197,.04)}.art-detail .art-fallback strong{font-size:10px;color:#98c8b8}.art-detail .art-fallback span{font-size:10px;color:#5f8180}.skell-evidence{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}81+.operator-metrics { display: flex; align-items: stretch; }
82-.recommendation-context{grid-template-columns:1.4fr auto}82+.operator-metrics label { display: grid; grid-template-columns: auto 52px; align-items: center; gap: 4px; padding: 0 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
83-.skell-package-notes{margin:10px 0 14px;padding-left:18px;color:#789698;font-size:11px;line-height:1.5;display:grid;gap:4px}83+.operator-metrics label + label { border-left: 1px solid var(--line); }
84-.skill-unlock{font-size:9px;color:#5d8487;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}84+.operator-metrics input { width: 52px; background: var(--panel); border: 1px solid var(--muted); color: var(--text); padding: 8px 4px; text-align: center; }
85-footer{max-width:1760px;margin:0 auto;padding:28px 5vw 40px;border-top:1px solid var(--line);position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}footer b,footer span{display:block}footer b{font-size:14px;letter-spacing:.18em;color:#91adaa}footer span{font-size:12px;color:#537477;margin-top:5px}footer nav{display:flex;gap:17px}footer a{font-size:13px;color:#6b9596;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px}footer a:hover{color:var(--cyan);border-color:var(--cyan)}85+.progression-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--line); min-width: 0; }
86-.footer-legal{max-width:960px;margin:10px 0 0;color:#496b6e;font-size:11px;line-height:1.55}86+.progression-controls legend, .weapon-controls legend { padding: 0 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
87-@media(max-width:1300px){.build-columns{grid-template-columns:1fr 1fr}.loadout-block:nth-child(2){border-right:0}.build-columns .skell-block{grid-column:1/-1;border-top:1px solid var(--line);border-right:0}}87+.progression-controls label { display: flex; align-items: center; gap: 8px; color: var(--text); min-height: 44px; }
88-@media(max-width:1100px){.operator{grid-template-columns:34px minmax(0,1fr) auto}.operator-metrics{grid-column:2/4;border-top:1px solid rgba(150,239,240,.09)}.operator-metrics label{flex:1}}88+.progression-controls label.disabled { color: var(--muted); }
89-@media(max-width:850px){.builder-grid{grid-template-columns:1fr}.top-status{display:none}.section-code{display:none}.squad-summary{grid-template-columns:1fr}.squad-summary>div{border-right:0;border-bottom:1px solid var(--line)}.recommendation-context{grid-template-columns:1fr}.recommendation-tabs{grid-template-columns:1fr}footer{align-items:flex-start;gap:20px}footer nav{flex-wrap:wrap;justify-content:flex-end}}89+.progression-controls input { accent-color: var(--signal); flex: none; }
90-@media(max-width:560px){.topbar{padding:0 20px}.builder-shell,.results{padding-left:20px;padding-right:20px}.brand small{display:none}.panel{padding:20px}.field-row,.class-readout{grid-template-columns:1fr}.operator{grid-template-columns:28px minmax(0,1fr);padding:7px 0}.operator>select{border-bottom:1px solid rgba(150,239,240,.09)}.operator-state{display:none}.operator-metrics{grid-column:2;display:grid;grid-template-columns:1fr 1fr;border-left:1px solid rgba(150,239,240,.09)}.operator-metrics label{grid-template-columns:1fr 52px;padding:7px}.progression-controls{grid-template-columns:1fr}.build-columns{grid-template-columns:1fr}.skell-block{grid-column:auto}.loadout-block{border-right:0;border-bottom:1px solid var(--line)!important}.build-card-head{grid-template-columns:40px 1fr}.role-tag{display:none}.arts-block ol{grid-template-columns:1fr}.result-meta{display:none}.stat-priority-list{grid-template-columns:1fr}footer{flex-direction:column}footer nav{justify-content:flex-start}}90+.generate-button { width: 100%; margin-top: 12px; border: 1px solid var(--signal); background: var(--signal); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; font-weight: 650; }
91-@media(max-width:560px){.section-heading{gap:12px}.section-heading>div{min-width:0}.section-toggle{width:36px;height:36px;margin-left:auto;padding:0;justify-content:center;flex:none}.section-toggle span{display:none}}91+.generate-button:hover { background: var(--text); border-color: var(--text); }
92-@media(max-width:560px){.weapon-field-row{grid-template-columns:1fr}}92+.generate-button:focus-visible { outline-color: var(--text); }
93-@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}93+.generate-button b { font-size: 24px; line-height: 28px; }
94+.weapon-controls { margin: 16px 0 0; padding: 12px; border: 1px solid var(--line); min-width: 0; }
95+.weapon-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
96+.weapon-field-row label { display: flex; flex-direction: column; min-width: 0; }
97+.weapon-field-row label > span { color: var(--muted); margin-bottom: 8px; }
98+.weapon-controls > p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
99+.ranks-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 12px 0; border: 0; border-top: 1px solid var(--muted); background: transparent; color: var(--text); }
100+.ranks-toggle:hover { color: var(--signal); }
101+.ranks-toggle b { font-size: 20px; line-height: 24px; }
102+.rank-hint { margin: 12px 0 8px; color: var(--muted); }
103+.rank-tree { border-top: 1px solid var(--line); margin-top: 12px; padding: 8px; max-height: 340px; overflow: auto; }
104+.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
105+.rank-row.active { background: color-mix(in srgb, var(--signal) 10%, var(--panel)); text-decoration: underline; text-underline-offset: 4px; }
106+.rank-twig { width: 16px; flex: none; color: var(--muted); font-size: 12px; line-height: 18px; }
107+.rank-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); }
108+.rank-tier-tag { font-size: 12px; line-height: 18px; color: var(--muted); }
109+.rank-stepper { display: flex; align-items: center; gap: 4px; }
110+.rank-stepper button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--muted); color: var(--text); }
111+.rank-stepper button:hover { border-color: var(--signal); color: var(--signal); }
112+.rank-stepper .rank-value { width: 44px; height: 44px; padding: 0 4px; background: var(--panel); border: 1px solid var(--muted); color: var(--text); text-align: center; appearance: textfield; -moz-appearance: textfield; }
113+.rank-stepper .rank-value::-webkit-outer-spin-button, .rank-stepper .rank-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
114+
115+.results { min-width: 0; position: relative; scroll-margin-top: 16px; }
116+.results-heading { min-height: 65px; }
117+.result-meta { margin-left: auto; text-align: right; }
118+.result-meta b, .result-meta span { display: block; }
119+.result-meta b { font-size: 20px; line-height: 24px; color: var(--text); font-weight: 650; }
120+.result-meta span { font-size: 12px; line-height: 18px; color: var(--muted); margin-top: 4px; }
121+.squad-summary { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; border: 1px solid var(--line); border-radius: 2px; background: color-mix(in srgb, var(--panel) 75%, var(--ink)); margin-bottom: 12px; }
122+.squad-summary > div { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
123+.squad-summary > div:last-child { border: 0; }
124+.squad-summary small, .squad-summary strong, .squad-summary span { display: block; }
125+.squad-summary small { font-size: 11px; line-height: 18px; color: var(--muted); margin-bottom: 4px; }
126+.squad-summary strong { font-size: 14px; line-height: 21px; color: var(--text); font-weight: 650; }
127+.squad-summary span { color: var(--muted); margin-top: 4px; font-size: 12px; line-height: 18px; }
128+.build-list { display: grid; gap: 12px; }
129+.build-tabs { display: flex; gap: 8px; margin: 0 -8px 8px; padding: 8px; overflow-x: auto; scroll-padding-inline: 8px; }
130+.build-tabs button { flex: 1 0 180px; min-width: 180px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; text-align: left; border: 0; border-bottom: 2px solid var(--muted); border-radius: 0; background: color-mix(in srgb, var(--ink) 70%, transparent); padding: 12px; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
131+.build-tabs button > span { grid-row: 1 / -1; font-size: 12px; line-height: 18px; color: var(--muted); }
132+.build-tabs button > small { grid-column: 2; font-size: 12px; line-height: 18px; color: var(--muted); overflow-wrap: anywhere; }
133+.build-tabs button:hover { border-color: var(--signal); }
134+.build-tabs button.active { border-bottom-color: var(--signal); background: var(--panel); }
135+.build-tabs button.active > span, .build-tabs button.active > small { color: var(--signal); }
136+.build-tabs button > .companion-alternative { color: var(--text); }
137+.build-tabs button > .companion-alternative.is-unavailable { color: var(--muted); }
138+.build-card { border: 1px solid var(--line); border-radius: 2px; background: var(--panel); }
139+.build-card-head { min-height: 80px; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--panel) 72%, var(--signal)), var(--panel)); overflow-wrap: anywhere; }
140+.member-number { height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line); font-size: 20px; line-height: 24px; color: var(--signal); }
141+.build-card-head > div:nth-child(2) { padding: 12px 0 12px 16px; }
142+.build-card-head h3 { font-size: 28px; line-height: 32px; letter-spacing: -.04em; font-weight: 750; margin: 0 0 4px; }
143+.build-card-head p { color: var(--muted); margin: 0; }
144+.role-tag { text-align: right; padding: 12px 16px; }
145+.role-tag small, .role-tag b { display: block; }
146+.role-tag small { font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 4px; }
147+.role-tag b { color: var(--text); font-weight: 650; }
148+.build-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
149+.loadout-block { padding: 16px; min-width: 0; }
150+.arts-block { border-right: 1px solid var(--line); }
151+.skills-block { background: color-mix(in srgb, var(--panel) 80%, var(--ink)); }
152+.skell-block { grid-column: 1 / -1; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 75%, var(--panel)); }
153+.skell-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px; align-items: start; }
154+.skell-disclosures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; align-items: start; margin-top: 12px; }
155+.loadout-block h4 { font-size: 16px; line-height: 22px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
156+.loadout-block h4 > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--signal); font-size: 12px; line-height: 18px; flex: none; }
157+.loadout-block h5 { font-size: 12px; line-height: 18px; color: var(--muted); margin: 16px 0 8px; }
158+.weapon-lock { color: var(--muted); min-height: 24px; margin: 0 0 12px; }
159+.arts-block ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
160+.arts-block li { border-bottom: 1px solid var(--line); min-width: 0; }
161+.art-detail summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 12px; align-items: center; gap: 8px; padding: 12px 0; list-style: none; }
162+.art-detail summary::-webkit-details-marker, .skell-detail summary::-webkit-details-marker { display: none; }
163+.art-detail summary::after { content: ""; width: 8px; height: 8px; margin-top: 4px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); }
164+.art-detail[open] summary::after { transform: rotate(225deg); margin-top: 8px; }
165+.art-detail summary:hover b, .art-detail summary:focus-visible b { color: var(--signal); }
166+.art-number { font-size: 12px; line-height: 18px; color: var(--muted); padding: 4px 0; text-align: center; }
167+.art-heading { min-width: 0; display: grid; gap: 4px; }
168+.art-heading b { display: block; font-size: 15px; line-height: 21px; color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
169+.art-heading small { display: block; font-size: 12px; line-height: 18px; color: var(--muted); overflow-wrap: anywhere; }
170+.art-detail .lvl-badge { margin: 0; text-align: right; white-space: nowrap; }
171+.art-detail-content { padding: 0 16px 12px; border-top: 1px solid var(--line); }
172+.art-detail .art-desc { margin: 8px 0 0; color: var(--muted); }
173+.lv-rec { color: var(--text); font-weight: 650; white-space: nowrap; }
174+.chip-list .lv-rec { font-size: 12px; line-height: 18px; flex: none; }
175+.chip-list { display: grid; }
176+.chip-list > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); color: var(--text); padding: 12px 0; }
177+.chip-list b { font-size: 16px; line-height: 22px; font-weight: 650; }
178+.chip-list .lvl-badge { margin-left: auto; flex-shrink: 0; }
179+.stat-priority-list, .plan-reasons { margin: 0; padding-left: 24px; color: var(--muted); }
180+.am-note { margin: 0; display: grid; gap: 4px; }
181+.am-note b { font-size: 16px; line-height: 22px; color: var(--text); font-weight: 650; }
182+.am-note span { color: var(--muted); }
183+.stat-priority-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
184+.plan-reasons { display: grid; gap: 4px; }
185+.empty-loadout { border-left: 1px solid var(--muted); padding-left: 12px; color: var(--muted); }
186+.skell-frame { padding: 0; }
187+.skell-frame small, .skell-frame strong, .skell-frame span { display: block; }
188+.skell-frame small { font-size: 12px; line-height: 18px; color: var(--muted); }
189+.skell-frame strong { font-size: 24px; line-height: 28px; color: var(--text); font-weight: 650; margin: 4px 0; }
190+.skell-frame span { color: var(--muted); }
191+.skell-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
192+.skell-facts > div { border-left: 1px solid var(--line); padding: 4px 0 4px 12px; }
193+.equip-facts > div { border-top: 1px solid var(--line); padding: 12px 0; }
194+.skell-facts dt, .equip-facts dt { font-size: 12px; line-height: 18px; color: var(--muted); }
195+.skell-facts dd, .equip-facts dd { margin: 4px 0 0; color: var(--text); overflow-wrap: anywhere; }
196+.skell-unavailable { padding: 0; }
197+.skell-unavailable strong { color: var(--text); font-size: 16px; line-height: 22px; }
198+.skell-unavailable p { margin: 8px 0 0; color: var(--muted); }
199+.skell-detail { border-top: 1px solid var(--line); }
200+.skell-detail summary { display: flex; align-items: center; gap: 8px; padding: 12px 4px; color: var(--text); font-size: 12px; line-height: 18px; list-style: none; }
201+.skell-detail summary::after { content: ""; width: 8px; height: 8px; flex: none; margin-left: auto; margin-right: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
202+.skell-detail[open] summary::after { transform: rotate(225deg); }
203+.skell-detail summary:hover { color: var(--signal); }
204+.skell-detail summary small { color: var(--muted); font-size: 12px; line-height: 18px; }
205+.skell-detail-body { padding: 0 4px 12px; color: var(--muted); }
206+.skell-detail-body > p { margin: 0; }
207+.skell-alts p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-top: 1px solid var(--line); }
208+.skell-alts p:first-child { border-top: 0; }
209+.skell-alts b { color: var(--text); font-weight: 650; }
210+.skell-alts span { font-size: 12px; line-height: 18px; color: var(--muted); text-align: right; }
211+.skell-gear-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
212+.skell-gear-list li { display: grid; gap: 4px; border-left: 1px solid var(--line); padding: 4px 0 4px 12px; }
213+.skell-gear-list b { font-size: 16px; line-height: 22px; color: var(--text); font-weight: 650; }
214+.skell-gear-list small, .skell-gear-acquisition { font-size: 12px; line-height: 18px; color: var(--muted); }
215+.lvl-badge { display: inline-block; color: var(--text); font-size: 12px; line-height: 18px; font-style: normal; padding: 4px 0; }
216+.equip-facts { display: grid; gap: 0; margin: 0; }
217+.curated-rationale { margin: 0; color: var(--muted); }
218+.substitute-list { margin: 0; padding-left: 24px; color: var(--muted); display: grid; gap: 4px; }
219+.source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
220+.source-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
221+.source-list a { color: var(--signal); text-underline-offset: 4px; }
222+.source-list a:hover { color: var(--text); }
223+.source-list small { color: var(--muted); font-size: 12px; line-height: 18px; }
224+.method-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 16px; border-top: 1px solid var(--line); padding: 16px 0 0; }
225+.method-note > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--muted); color: var(--text); }
226+.method-note h3 { font-size: 14px; line-height: 21px; margin: 0 0 4px; }
227+.method-note p { color: var(--muted); margin: 0; font-size: 12px; line-height: 18px; }
228+.contextual-controls .combat-mode-field { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
229+.contextual-controls .special-unlock-field { grid-column: 1 / -1; }
230+.recommendation-tabs { display: flex; gap: 8px; margin: 0 -8px 8px; padding: 8px; overflow-x: auto; scroll-padding-inline: 8px; }
231+.recommendation-tabs button { flex: 1 0 220px; min-width: 220px; display: grid; gap: 4px; text-align: left; padding: 12px 16px; border: 1px solid var(--muted); border-bottom-width: 3px; border-radius: 2px; background: var(--panel); color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
232+.recommendation-tabs button span { font-size: 12px; line-height: 18px; }
233+.recommendation-tabs button b { font-size: 16px; line-height: 22px; color: var(--text); font-weight: 650; }
234+.recommendation-tabs button small { font-size: 12px; line-height: 18px; color: var(--muted); }
235+.recommendation-tabs button:hover { border-color: var(--signal); }
236+.recommendation-tabs button.active { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, var(--panel)); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--signal); }
237+.recommendation-tabs button.active span, .recommendation-tabs button.active small { color: var(--signal); }
238+.recommendation-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-top: 0; background: color-mix(in srgb, var(--panel) 75%, var(--ink)); padding: 12px; margin: -12px 0 8px; }
239+.recommendation-context small, .infeasible-panel small { display: block; font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 8px; }
240+.recommendation-context ul, .infeasible-panel ul { margin: 0; padding-left: 24px; color: var(--muted); }
241+.score-grid { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
242+.score-grid div { min-width: 0; padding: 4px 12px; border-left: 1px solid var(--line); text-align: center; overflow-wrap: anywhere; }
243+.score-grid dt { font-size: 12px; line-height: 18px; color: var(--muted); }
244+.score-grid dd { margin: 4px 0 0; color: var(--text); font-size: 20px; line-height: 24px; }
245+.recommendation-evidence { display: flex; flex-wrap: wrap; gap: 8px; }
246+.recommendation-evidence small { width: 100%; }
247+.recommendation-evidence a, .skell-evidence a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 18px; color: var(--text); text-decoration: none; border: 1px solid var(--muted); border-radius: 4px; padding: 8px; }
248+.recommendation-evidence a:hover, .skell-evidence a:hover { color: var(--signal); border-color: var(--signal); }
249+.infeasible-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; border: 1px solid var(--line); border-radius: 2px; background: var(--panel); padding: 16px; }
250+.special-art-badge { display: inline-block; margin-left: 8px; color: var(--signal); font-size: 11px; line-height: 18px; font-style: normal; font-weight: 400; }
251+.art-detail .art-fallback { display: grid; gap: 4px; margin: 8px 0 0; padding: 8px; border-left: 1px solid var(--muted); }
252+.art-detail .art-fallback strong { color: var(--text); }
253+.art-detail .art-fallback span { color: var(--muted); }
254+.skell-evidence { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
255+.skell-package-notes { margin: 12px 0 16px; padding-left: 24px; color: var(--muted); display: grid; gap: 4px; }
256+.skill-unlock { font-size: 12px; line-height: 18px; color: var(--muted); }
257+
258+footer { max-width: 1600px; margin: 0 auto; padding: 24px 32px 32px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--ink); }
259+footer b, footer span { display: block; }
260+footer b { color: var(--text); }
261+footer span { font-size: 12px; line-height: 18px; color: var(--muted); margin-top: 4px; }
262+footer nav { display: flex; gap: 16px; }
263+footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-underline-offset: 4px; }
264+footer a:hover { color: var(--signal); }
265+.footer-legal { max-width: 960px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
266+:where(.brand small, .language-switch, .step, .section-code, .scale, .field-label output, .panel-title > span, .operator-index, .operator-state, .rank-tier-tag, .member-number, .art-number, .lvl-badge, .score-grid, .result-meta, .level-input, .rank-value, .operator-metrics input) { font-family: var(--font-geist-mono), ui-monospace, monospace; font-variant-numeric: tabular-nums; }
267+
268+@media (min-width: 1024px) {
269+ .contextual-controls .combat-mode-field, .contextual-controls .special-unlock-field { grid-column: auto; }
270+}
271+@media (min-width: 1280px) {
272+ .controls-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: start; }
273+ .level-control { grid-column: 1; }
274+ .controls-panel .field-row { grid-column: 1; margin-top: 0; }
275+ .controls-panel .weapon-controls { grid-column: 2; grid-row: 1 / 3; margin: 0; }
276+ .controls-panel .weapon-field-row { grid-template-columns: 1fr; }
277+ .controls-panel .class-readout { grid-column: 1 / -1; margin-top: 0; }
278+ .controls-panel .ranks-toggle { grid-column: 1 / -1; margin-top: 0; }
279+ .controls-panel .rank-tree { grid-column: 1 / -1; margin-top: 0; }
280+}
281+@media (max-width: 1023px) {
282+ .topbar, footer { padding-left: 24px; padding-right: 24px; }
283+ .workspace { padding: 24px; }
284+ .builder-grid { grid-template-columns: 1fr; }
285+ .builder-shell { padding: 12px; }
286+ .section-code { display: none; }
287+ .squad-summary { grid-template-columns: 1fr; }
288+ .squad-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
289+ .recommendation-context { grid-template-columns: 1fr; }
290+ .build-columns { grid-template-columns: 1fr; }
291+ .loadout-block { border-right: 0; border-bottom: 1px solid var(--line); }
292+ .skell-block { border-top: 0; border-bottom: 0; }
293+ .skell-overview { grid-template-columns: 1fr; gap: 16px; }
294+ .skell-disclosures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
295+ footer { align-items: flex-start; }
296+ footer nav { flex-wrap: wrap; justify-content: flex-end; }
297+}
298+@media (max-width: 767px) {
299+ .topbar, footer { padding-left: 16px; padding-right: 16px; }
300+ .workspace { padding: 16px; gap: 24px; }
301+ .topbar { background: linear-gradient(115deg, var(--text) 0 192px, var(--ink) 193px); gap: 8px; }
302+ .brand { gap: 8px; }
303+ .brand-mark { width: 32px; height: 36px; font-size: 24px; }
304+ .brand b { font-size: 18px; line-height: 24px; }
305+ .brand small { font-size: 8px; letter-spacing: 0; }
306+ .language-switch { gap: 0; padding: 0; }
307+ .panel, .loadout-block, .infeasible-panel, .squad-summary > div, .method-note, .recommendation-context { padding: 12px; }
308+ .field-row, .class-readout, .weapon-field-row, .progression-controls, .infeasible-panel { grid-template-columns: 1fr; }
309+ .builder-shell { padding: 12px; }
310+ .builder-shell .panel { border: 0; }
311+ .operator { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 4px; }
312+ .operator > select { grid-column: 2 / -1; }
313+ .operator-state { grid-column: 2; padding: 0; }
314+ .operator-metrics { grid-column: 3; }
315+ .operator-metrics label { grid-template-columns: minmax(0, 1fr) 52px; padding: 0; }
316+ .section-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
317+ .section-heading > div { min-width: 0; }
318+ .section-toggle { grid-column: 1 / -1; width: 100%; margin-left: 0; justify-content: space-between; }
319+ .recommendation-tabs button { flex-basis: 180px; min-width: 180px; }
320+ .build-tabs button { flex-basis: 160px; min-width: 160px; }
321+ .score-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
322+ .art-heading { display: block; }
323+ .art-heading small { margin-top: 4px; text-align: left; }
324+ .build-card-head { grid-template-columns: 32px minmax(0, 1fr); }
325+ .role-tag { grid-column: 2; text-align: left; }
326+ .result-meta { grid-column: 1 / -1; width: 100%; text-align: left; margin-left: 0; }
327+ .stat-priority-list { grid-template-columns: 1fr; }
328+ .skell-facts { grid-template-columns: 1fr; gap: 8px; }
329+ .skell-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-left: 0; border-top: 1px solid var(--line); }
330+ .skell-facts dd { margin: 0; }
331+ .skell-disclosures { grid-template-columns: 1fr; gap: 0; }
332+ .skell-frame strong { font-size: 22px; line-height: 28px; }
333+ .rank-row { flex-wrap: wrap; }
334+ .rank-stepper { margin-left: auto; }
335+ .rank-name { flex-basis: 100%; }
336+ footer { flex-direction: column; }
337+ footer nav { justify-content: flex-start; }
338+}
339+@media (prefers-reduced-motion: reduce) {
340+ *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
341+}
342+@media (forced-colors: active) {
343+ :root { --ink: Canvas; --panel: Canvas; --line: CanvasText; --text: CanvasText; --muted: CanvasText; --signal: LinkText; }
344+ :where(button, select, input, summary, a):focus-visible { outline-color: Highlight; }
345+ button:disabled, select:disabled, input:disabled, .progression-controls label.disabled { color: GrayText; }
346+ main, .topbar, .builder-shell, .build-card-head { background: Canvas; }
347+ main::before, .topbar::after, .section-heading::after { display: none; }
348+ .brand, .brand-mark, .brand small { color: CanvasText; }
349+ .language-switch button.active, .build-tabs button.active, .recommendation-tabs button.active { border-bottom-color: Highlight; text-decoration: underline; text-underline-offset: 4px; }
350+ .generate-button { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
351+ .brand:focus-visible, .generate-button:focus-visible { outline-color: Highlight; }
352+}
modified src/components/BuildCard.tsx +4 -0
@@ -184,6 +184,7 @@ export default function BuildCard({
184184 <section className="loadout-block skell-block">
185185 <h4><span>K</span>{t.skellSection}</h4>
186186 {skell && loadout ? <>
187+ <div className="skell-overview">
187188 <div className="skell-frame">
188189 <small>{t.skellFrame} · {loadout.archetype}</small>
189190 <strong>{skell.frame}</strong>
@@ -194,6 +195,8 @@ export default function BuildCard({
194195 <div><dt>{t.acquisition}</dt><dd>{localizedGameUiText(skell.acquisition, lang)}</dd></div>
195196 <div><dt>OVERDRIVE</dt><dd>{loadout.overdrive}{loadout.fixedKit ? " · FIXED KIT" : ""}</dd></div>
196197 </dl>
198+ </div>
199+ <div className="skell-disclosures">
197200 <details className="skell-detail">
198201 <summary>{t.reason}</summary>
199202 <div className="skell-detail-body">
@@ -237,6 +240,7 @@ export default function BuildCard({
237240 </ul>
238241 </div>
239242 </details>
243+ </div>
240244 </> : <div className="skell-unavailable">
241245 <strong>{t.unavailable}</strong>
242246 <p>{!hasSkellLicense ? t.skellNoLicense : t.skellLowLevel}</p>
@@ -184,6 +184,7 @@ export default function BuildCard({
184 <section className="loadout-block skell-block">184 <section className="loadout-block skell-block">
185 <h4><span>K</span>{t.skellSection}</h4>185 <h4><span>K</span>{t.skellSection}</h4>
186 {skell && loadout ? <>186 {skell && loadout ? <>
187+ <div className="skell-overview">
187 <div className="skell-frame">188 <div className="skell-frame">
188 <small>{t.skellFrame} · {loadout.archetype}</small>189 <small>{t.skellFrame} · {loadout.archetype}</small>
189 <strong>{skell.frame}</strong>190 <strong>{skell.frame}</strong>
@@ -194,6 +195,8 @@ export default function BuildCard({
194 <div><dt>{t.acquisition}</dt><dd>{localizedGameUiText(skell.acquisition, lang)}</dd></div>195 <div><dt>{t.acquisition}</dt><dd>{localizedGameUiText(skell.acquisition, lang)}</dd></div>
195 <div><dt>OVERDRIVE</dt><dd>{loadout.overdrive}{loadout.fixedKit ? " · FIXED KIT" : ""}</dd></div>196 <div><dt>OVERDRIVE</dt><dd>{loadout.overdrive}{loadout.fixedKit ? " · FIXED KIT" : ""}</dd></div>
196 </dl>197 </dl>
198+ </div>
199+ <div className="skell-disclosures">
197 <details className="skell-detail">200 <details className="skell-detail">
198 <summary>{t.reason}</summary>201 <summary>{t.reason}</summary>
199 <div className="skell-detail-body">202 <div className="skell-detail-body">
@@ -237,6 +240,7 @@ export default function BuildCard({
237 </ul>240 </ul>
238 </div>241 </div>
239 </details>242 </details>
243+ </div>
240 </> : <div className="skell-unavailable">244 </> : <div className="skell-unavailable">
241 <strong>{t.unavailable}</strong>245 <strong>{t.unavailable}</strong>
242 <p>{!hasSkellLicense ? t.skellNoLicense : t.skellLowLevel}</p>246 <p>{!hasSkellLicense ? t.skellNoLicense : t.skellLowLevel}</p>
modified src/components/ControlPanel.tsx +2 -0
@@ -65,6 +65,7 @@ export default function ControlPanel({
6565 }: ControlPanelProps) {
6666 return (
6767 <div className="panel controls-panel">
68+ <div className="level-control">
6869 <label className="field-label" htmlFor="avatar-level">
6970 {t.avatarLevel}
7071 <output>{avatarLevel}</output>
@@ -106,6 +107,7 @@ export default function ControlPanel({
106107 <span>80</span>
107108 <span>99</span>
108109 </div>
110+ </div>
109111
110112 <div className="field-row">
111113 <label>
@@ -65,6 +65,7 @@ export default function ControlPanel({
65 }: ControlPanelProps) {65 }: ControlPanelProps) {
66 return (66 return (
67 <div className="panel controls-panel">67 <div className="panel controls-panel">
68+ <div className="level-control">
68 <label className="field-label" htmlFor="avatar-level">69 <label className="field-label" htmlFor="avatar-level">
69 {t.avatarLevel}70 {t.avatarLevel}
70 <output>{avatarLevel}</output>71 <output>{avatarLevel}</output>
@@ -106,6 +107,7 @@ export default function ControlPanel({
106 <span>80</span>107 <span>80</span>
107 <span>99</span>108 <span>99</span>
108 </div>109 </div>
110+ </div>
109 111
110 <div className="field-row">112 <div className="field-row">
111 <label>113 <label>
modified src/components/ResultsSection.tsx +16 -3
@@ -1,4 +1,4 @@
1-import { useState } from "react";
1+import { useState, type FocusEvent } from "react";
22 import BuildCard from "@/src/components/BuildCard";
33 import type { Copy } from "@/src/data/i18n";
44 import { dual } from "@/src/lib/engine";
@@ -27,6 +27,19 @@ function labelForVariant(variant: RecommendationVariant, t: Copy): string {
2727 return t.primaryParty;
2828 }
2929
30+function revealFocusedTab(event: FocusEvent<HTMLDivElement>) {
31+ const tab = event.target;
32+ const tablist = event.currentTarget;
33+ if (!(tab instanceof HTMLButtonElement)) return;
34+ const tabBounds = tab.getBoundingClientRect();
35+ const listBounds = tablist.getBoundingClientRect();
36+ const left = tabBounds.left - listBounds.left - 8;
37+ const right = tabBounds.right - listBounds.right + 8;
38+ if (left < 0 || right > 0) {
39+ tablist.scrollBy({ left: left < 0 ? left : right, behavior: "instant" });
40+ }
41+}
42+
3043 export default function ResultsSection({
3144 t,
3245 lang,
@@ -89,7 +102,7 @@ export default function ResultsSection({
89102 <div className="result-meta"><b>SQUAD LV. {avatarLevel}</b><span>{combatModeLabel.toUpperCase()}</span></div>
90103 </div>
91104
92- <div className="recommendation-tabs" role="tablist" aria-label={resultsHeading}>
105+ <div className="recommendation-tabs" role="tablist" aria-label={resultsHeading} onFocus={revealFocusedTab}>
93106 {recommendations.map((entry, index) => (
94107 <button
95108 key={entry.variant}
@@ -140,7 +153,7 @@ export default function ResultsSection({
140153 </dl>
141154 </aside>
142155
143- <div className="build-tabs" role="tablist" aria-label={resultsHeading}>
156+ <div className="build-tabs" role="tablist" aria-label={resultsHeading} onFocus={revealFocusedTab}>
144157 {recommendation.roster.map((member, index) => {
145158 const teamSlot = index > 0
146159 ? recommendation.team.slots[index - 1]
@@ -1,4 +1,4 @@
1-import { useState } from "react";1+import { useState, type FocusEvent } from "react";
2 import BuildCard from "@/src/components/BuildCard";2 import BuildCard from "@/src/components/BuildCard";
3 import type { Copy } from "@/src/data/i18n";3 import type { Copy } from "@/src/data/i18n";
4 import { dual } from "@/src/lib/engine";4 import { dual } from "@/src/lib/engine";
@@ -27,6 +27,19 @@ function labelForVariant(variant: RecommendationVariant, t: Copy): string {
27 return t.primaryParty;27 return t.primaryParty;
28 }28 }
29 29
30+function revealFocusedTab(event: FocusEvent<HTMLDivElement>) {
31+ const tab = event.target;
32+ const tablist = event.currentTarget;
33+ if (!(tab instanceof HTMLButtonElement)) return;
34+ const tabBounds = tab.getBoundingClientRect();
35+ const listBounds = tablist.getBoundingClientRect();
36+ const left = tabBounds.left - listBounds.left - 8;
37+ const right = tabBounds.right - listBounds.right + 8;
38+ if (left < 0 || right > 0) {
39+ tablist.scrollBy({ left: left < 0 ? left : right, behavior: "instant" });
40+ }
41+}
42+
30 export default function ResultsSection({43 export default function ResultsSection({
31 t,44 t,
32 lang,45 lang,
@@ -89,7 +102,7 @@ export default function ResultsSection({
89 <div className="result-meta"><b>SQUAD LV. {avatarLevel}</b><span>{combatModeLabel.toUpperCase()}</span></div>102 <div className="result-meta"><b>SQUAD LV. {avatarLevel}</b><span>{combatModeLabel.toUpperCase()}</span></div>
90 </div>103 </div>
91 104
92- <div className="recommendation-tabs" role="tablist" aria-label={resultsHeading}>105+ <div className="recommendation-tabs" role="tablist" aria-label={resultsHeading} onFocus={revealFocusedTab}>
93 {recommendations.map((entry, index) => (106 {recommendations.map((entry, index) => (
94 <button107 <button
95 key={entry.variant}108 key={entry.variant}
@@ -140,7 +153,7 @@ export default function ResultsSection({
140 </dl>153 </dl>
141 </aside>154 </aside>
142 155
143- <div className="build-tabs" role="tablist" aria-label={resultsHeading}>156+ <div className="build-tabs" role="tablist" aria-label={resultsHeading} onFocus={revealFocusedTab}>
144 {recommendation.roster.map((member, index) => {157 {recommendation.roster.map((member, index) => {
145 const teamSlot = index > 0158 const teamSlot = index > 0
146 ? recommendation.team.slots[index - 1]159 ? recommendation.team.slots[index - 1]
modified src/components/TeamBuilder.tsx +9 -3
@@ -294,15 +294,20 @@ export default function TeamBuilder() {
294294 () =>
295295 document
296296 .getElementById("results")
297- ?.scrollIntoView({ behavior: "smooth", block: "start" }),
297+ ?.scrollIntoView({
298+ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
299+ ? "auto"
300+ : "smooth",
301+ block: "start",
302+ }),
298303 40,
299304 );
300305 }
301306
302307 return (
303308 <main>
304- <div className="scanlines" aria-hidden="true" />
305309 <Topbar t={t} lang={lang} onLangChange={setLang} />
310+ <div className={`workspace${configurationExpanded ? "" : " configuration-collapsed"}`}>
306311
307312 <section
308313 className={`builder-shell${configurationExpanded ? "" : " is-collapsed"}`}
@@ -311,7 +316,7 @@ export default function TeamBuilder() {
311316 <div className="section-heading">
312317 <span className="step">01</span>
313318 <div>
314- <p>MISSION PARAMETERS</p>
319+ <p>{lang === "fr" ? "Paramètres de mission" : "Mission parameters"}</p>
315320 <h2 id="builder-heading">{t.builderHeading}</h2>
316321 </div>
317322 <button
@@ -387,6 +392,7 @@ export default function TeamBuilder() {
387392 hasSkellLicense={hasSkellLicense}
388393 postgameFrames={hasSkellLicense && postgameFrames}
389394 />
395+ </div>
390396
391397 <SiteFooter t={t} />
392398 </main>
@@ -294,15 +294,20 @@ export default function TeamBuilder() {
294 () =>294 () =>
295 document295 document
296 .getElementById("results")296 .getElementById("results")
297- ?.scrollIntoView({ behavior: "smooth", block: "start" }),297+ ?.scrollIntoView({
298+ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
299+ ? "auto"
300+ : "smooth",
301+ block: "start",
302+ }),
298 40,303 40,
299 );304 );
300 }305 }
301 306
302 return (307 return (
303 <main>308 <main>
304- <div className="scanlines" aria-hidden="true" />
305 <Topbar t={t} lang={lang} onLangChange={setLang} />309 <Topbar t={t} lang={lang} onLangChange={setLang} />
310+ <div className={`workspace${configurationExpanded ? "" : " configuration-collapsed"}`}>
306 311
307 <section312 <section
308 className={`builder-shell${configurationExpanded ? "" : " is-collapsed"}`}313 className={`builder-shell${configurationExpanded ? "" : " is-collapsed"}`}
@@ -311,7 +316,7 @@ export default function TeamBuilder() {
311 <div className="section-heading">316 <div className="section-heading">
312 <span className="step">01</span>317 <span className="step">01</span>
313 <div>318 <div>
314- <p>MISSION PARAMETERS</p>319+ <p>{lang === "fr" ? "Paramètres de mission" : "Mission parameters"}</p>
315 <h2 id="builder-heading">{t.builderHeading}</h2>320 <h2 id="builder-heading">{t.builderHeading}</h2>
316 </div>321 </div>
317 <button322 <button
@@ -387,6 +392,7 @@ export default function TeamBuilder() {
387 hasSkellLicense={hasSkellLicense}392 hasSkellLicense={hasSkellLicense}
388 postgameFrames={hasSkellLicense && postgameFrames}393 postgameFrames={hasSkellLicense && postgameFrames}
389 />394 />
395+ </div>
390 396
391 <SiteFooter t={t} />397 <SiteFooter t={t} />
392 </main>398 </main>
modified src/components/Topbar.tsx +5 -6
@@ -7,17 +7,16 @@ interface TopbarProps {
77 onLangChange: (lang: Lang) => void;
88 }
99
10-export default function Topbar({ t, lang, onLangChange }: TopbarProps) {
10+export default function Topbar({ lang, onLangChange }: TopbarProps) {
1111 return (
1212 <header className="topbar">
13- <a className="brand" href="#top" aria-label="BLADE Team Architect home">
13+ <a className="brand" href="#top" aria-label={lang === "fr" ? "Accueil BLADE Team Architect" : "BLADE Team Architect home"}>
1414 <span className="brand-mark">B</span>
1515 <span><b>BLADE</b><small>TEAM ARCHITECT</small></span>
1616 </a>
17- <div className="top-status"><span className="pulse" /> {t.status}</div>
18- <div className="language-switch" aria-label="Language">
19- <button className={lang === "en" ? "active" : ""} onClick={() => onLangChange("en")}>EN</button>
20- <button className={lang === "fr" ? "active" : ""} onClick={() => onLangChange("fr")}>FR</button>
17+ <div className="language-switch" role="group" aria-label={lang === "fr" ? "Langue" : "Language"}>
18+ <button className={lang === "en" ? "active" : ""} aria-pressed={lang === "en"} onClick={() => onLangChange("en")}>EN</button>
19+ <button className={lang === "fr" ? "active" : ""} aria-pressed={lang === "fr"} onClick={() => onLangChange("fr")}>FR</button>
2120 </div>
2221 </header>
2322 );
@@ -7,17 +7,16 @@ interface TopbarProps {
7 onLangChange: (lang: Lang) => void;7 onLangChange: (lang: Lang) => void;
8 }8 }
9 9
10-export default function Topbar({ t, lang, onLangChange }: TopbarProps) {10+export default function Topbar({ lang, onLangChange }: TopbarProps) {
11 return (11 return (
12 <header className="topbar">12 <header className="topbar">
13- <a className="brand" href="#top" aria-label="BLADE Team Architect home">13+ <a className="brand" href="#top" aria-label={lang === "fr" ? "Accueil BLADE Team Architect" : "BLADE Team Architect home"}>
14 <span className="brand-mark">B</span>14 <span className="brand-mark">B</span>
15 <span><b>BLADE</b><small>TEAM ARCHITECT</small></span>15 <span><b>BLADE</b><small>TEAM ARCHITECT</small></span>
16 </a>16 </a>
17- <div className="top-status"><span className="pulse" /> {t.status}</div>17+ <div className="language-switch" role="group" aria-label={lang === "fr" ? "Langue" : "Language"}>
18- <div className="language-switch" aria-label="Language">18+ <button className={lang === "en" ? "active" : ""} aria-pressed={lang === "en"} onClick={() => onLangChange("en")}>EN</button>
19- <button className={lang === "en" ? "active" : ""} onClick={() => onLangChange("en")}>EN</button>19+ <button className={lang === "fr" ? "active" : ""} aria-pressed={lang === "fr"} onClick={() => onLangChange("fr")}>FR</button>
20- <button className={lang === "fr" ? "active" : ""} onClick={() => onLangChange("fr")}>FR</button>
21 </div>20 </div>
22 </header>21 </header>
23 );22 );