:root {
  --bg0: #17201d;
  --bg1: #44564d;
  --bg2: #77867b;
  --accent: #d7f0df;
  --accent-rgb: 215, 240, 223;
  --ivory: #f2eddf;
  --ivory-soft: #dcd8ca;
  --text: rgba(246, 241, 228, .92);
  --muted: rgba(242, 237, 223, .56);
  --line: rgba(242, 237, 223, .16);
  --line-strong: rgba(242, 237, 223, .32);
  --font-sans: "Arial Narrow", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #101714; color-scheme: dark; }
body { margin: 0; min-width: 320px; overflow: hidden; background: #101714; color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; font: inherit; }
button { border: 0; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
::selection { color: var(--bg0); background: var(--accent); }

.portfolio-shell {
  position: fixed;
  inset: 0;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 42%, rgba(var(--accent-rgb), .2), transparent 28%),
    radial-gradient(circle at 12% 74%, rgba(var(--accent-rgb), .09), transparent 34%),
    linear-gradient(132deg, var(--bg2), var(--bg1) 47%, var(--bg0));
  transition: background 1.35s var(--ease);
}

.portfolio-shell[data-theme="profile"] { --bg0:#17202b; --bg1:#475b65; --bg2:#84949a; --accent:#c9eff1; --accent-rgb:201,239,241; }
.portfolio-shell[data-theme="evaluation"] { --bg0:#141b34; --bg1:#344c72; --bg2:#6f88a4; --accent:#83eaff; --accent-rgb:131,234,255; }
.portfolio-shell[data-theme="commerce"] { --bg0:#2a1920; --bg1:#735044; --bg2:#9f796a; --accent:#ffb89c; --accent-rgb:255,184,156; }
.portfolio-shell[data-theme="education"] { --bg0:#191a35; --bg1:#4d4f7b; --bg2:#8584a8; --accent:#b9b4ff; --accent-rgb:185,180,255; }
.portfolio-shell[data-theme="project"] { --bg0:#10251e; --bg1:#366a57; --bg2:#6a9685; --accent:#9cf6c9; --accent-rgb:156,246,201; }
.portfolio-shell[data-theme="banking"] { --bg0:#261e13; --bg1:#6a593a; --bg2:#94836a; --accent:#ffd783; --accent-rgb:255,215,131; }
.portfolio-shell[data-theme="tools"] { --bg0:#1d142a; --bg1:#594375; --bg2:#8870a0; --accent:#c7a6ff; --accent-rgb:199,166,255; }
.portfolio-shell[data-theme="markets"] { --bg0:#071f20; --bg1:#235b58; --bg2:#578783; --accent:#62f0c8; --accent-rgb:98,240,200; }
.portfolio-shell[data-theme="contact"] { --bg0:#251f19; --bg1:#6a5d4d; --bg2:#9b8d7b; --accent:#ffe7bd; --accent-rgb:255,231,189; }

.atmosphere { position:absolute; z-index:-7; border-radius:50%; pointer-events:none; filter:blur(80px); transition:transform 1.5s var(--ease), background 1.2s ease; }
.atmosphere-a { top:-12%; right:6%; width:52vw; height:52vw; background:rgba(var(--accent-rgb),.18); }
.atmosphere-b { bottom:-24%; left:-8%; width:55vw; height:55vw; background:rgba(0,0,0,.17); }
[data-cube-side="right"] .atmosphere-a { transform:translate(18vw,-4vh) scale(1.2); }
[data-cube-side="left"] .atmosphere-a { transform:translate(-46vw,8vh) scale(.95); }
[data-cube-side="left"] .atmosphere-b { transform:translate(30vw,-2vh) scale(1.16); }
.is-transitioning .atmosphere-a { transform:translate(-14vw,6vh) scale(1.45); }

.ambient-grid { position:absolute; inset:-8%; z-index:-5; pointer-events:none; opacity:.44; background-image:linear-gradient(rgba(var(--accent-rgb),.045) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.045) 1px,transparent 1px); background-size:76px 76px; mask-image:radial-gradient(ellipse at 50% 50%,#000 12%,transparent 76%); transition:transform 1.4s var(--ease); }
[data-cube-side="right"] .ambient-grid { transform:translateX(3vw) rotate(.45deg) scale(1.05); }
[data-cube-side="left"] .ambient-grid { transform:translateX(-3vw) rotate(-.45deg) scale(1.08); }
.ambient-grain { position:absolute; inset:-35%; z-index:35; pointer-events:none; opacity:.095; mix-blend-mode:soft-light; background-image:repeating-radial-gradient(circle at 20% 30%,#fff 0 .45px,transparent .8px 3px),repeating-radial-gradient(circle at 70% 60%,#06110d 0 .35px,transparent .75px 4px); animation:grain .35s steps(2) infinite; }
.energy-wash { position:absolute; inset:-30%; z-index:-4; pointer-events:none; opacity:.5; background:conic-gradient(from 45deg at 50% 50%,transparent,rgba(var(--accent-rgb),.1),transparent 24%,rgba(var(--accent-rgb),.06),transparent 55%); filter:blur(40px); animation:energy-rotate 22s linear infinite; transition:opacity .6s ease; }
.is-transitioning .energy-wash { opacity:1; animation-duration:5s; }

.axis { position:absolute; z-index:2; pointer-events:none; color:rgba(242,237,223,.35); font:600 7px/1 var(--font-mono); letter-spacing:.16em; }
.axis-horizontal { top:50%; right:0; left:0; display:flex; align-items:center; gap:14px; }
.axis-horizontal::before,.axis-horizontal::after { content:""; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.24),transparent); }
.axis-horizontal::before { width:6vw; }
.axis-horizontal::after { flex:1; }
.axis-horizontal i { width:5px; height:5px; border:1px solid var(--accent); border-radius:50%; box-shadow:0 0 12px rgba(var(--accent-rgb),.5); }
.axis-vertical { top:24%; bottom:14%; left:20px; border-left:1px solid rgba(var(--accent-rgb),.14); }
.axis-vertical span { position:absolute; bottom:0; left:-4px; transform:rotate(-90deg); transform-origin:left bottom; white-space:nowrap; }

.site-header { position:absolute; inset:0 0 auto; z-index:40; height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 30px; border-bottom:1px solid var(--line); background:linear-gradient(rgba(16,24,20,.12),transparent); }
.identity-mark { display:flex; align-items:center; gap:12px; width:max-content; }
.identity-mark strong { width:44px; height:44px; display:grid; place-items:center; color:var(--bg0); background:var(--ivory); border:1px solid rgba(255,255,255,.5); box-shadow:0 8px 30px rgba(8,14,11,.18); font:800 17px/1 var(--font-sans); }
.identity-mark span { font:600 8px/1.4 var(--font-mono); letter-spacing:.11em; }
.system-status { color:rgba(242,237,223,.62); font:600 7px/1 var(--font-mono); letter-spacing:.2em; }
.system-status i { display:inline-block; width:5px; height:5px; margin:0 9px 1px 0; border-radius:50%; background:var(--accent); box-shadow:0 0 13px var(--accent); animation:status 2.3s ease infinite; }
.header-actions { justify-self:end; display:flex; align-items:center; gap:22px; }
.header-actions button,.header-actions a { padding:12px 0; background:none; cursor:pointer; font:600 8px/1 var(--font-mono); letter-spacing:.12em; }
.header-actions a { padding-left:20px; border-left:1px solid var(--line); }
.header-actions b { margin-left:8px; font-size:12px; font-weight:400; }
.sound-wave { display:inline-block; margin-right:5px; color:var(--accent); font-size:13px; }

.experience-stage { position:absolute; inset:78px 0 0; overflow:clip; }
.cube-zone { position:absolute; inset:0; z-index:5; pointer-events:none; }
.cube-canvas { width:100%; height:100%; display:block; pointer-events:auto; cursor:grab; touch-action:none; transition:filter .6s ease; }
.cube-canvas.is-dragging { cursor:grabbing; }
.cube-aura { position:absolute; top:50%; left:50%; width:min(55vw,760px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.045) 43%,transparent 70%); filter:blur(18px); transition:left 1.25s var(--ease),width 1.25s var(--ease),background 1.1s ease; }
[data-cube-side="right"] .cube-aura { left:73%; width:min(46vw,640px); }
[data-cube-side="left"] .cube-aura { left:27%; width:min(46vw,640px); }

.cube-meta { position:absolute; z-index:8; left:50%; width:min(44vw,620px); display:flex; justify-content:space-between; color:rgba(242,237,223,.46); font:600 7px/1 var(--font-mono); letter-spacing:.13em; transform:translateX(-50%); transition:left 1.15s var(--ease),width 1.15s var(--ease); }
.cube-meta::before { content:""; position:absolute; right:0; bottom:-11px; left:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.28),transparent); }
.cube-meta-top { top:7%; }
.cube-meta-bottom { bottom:7%; }
.cube-meta-bottom::before { top:-11px; bottom:auto; }
[data-cube-side="right"] .cube-meta { left:74%; width:min(34vw,480px); }
[data-cube-side="left"] .cube-meta { left:26%; width:min(34vw,480px); }

.assembly-status { position:absolute; z-index:10; left:50%; bottom:13%; width:min(360px,68vw); display:flex; justify-content:space-between; align-items:center; transform:translateX(-50%); color:rgba(242,237,223,.72); font:600 8px/1 var(--font-mono); letter-spacing:.14em; }
.assembly-status::before { content:""; position:absolute; top:-12px; left:0; width:100%; height:2px; background:var(--accent); box-shadow:0 0 13px var(--accent); transform-origin:left; animation:assemble 2.5s var(--ease) forwards; }
.assembly-status button { color:var(--ivory); background:none; cursor:pointer; font:inherit; }

.editorial-copy { position:absolute; z-index:1; right:0; bottom:2.2vh; left:0; padding-left:4vw; pointer-events:none; transition:opacity .45s ease,transform .9s var(--ease); }
.editorial-copy span { display:block; margin:0 0 12px .4vw; color:rgba(242,237,223,.56); font:600 8px/1 var(--font-mono); letter-spacing:.18em; }
.editorial-copy strong { display:block; color:rgba(242,237,223,.88); font-size:clamp(70px,10.5vw,180px); font-weight:900; line-height:.69; letter-spacing:-.075em; text-shadow:0 1px rgba(255,255,255,.35); }
.portfolio-shell:not(.is-cover) .editorial-copy { opacity:0; transform:translateY(44px); }

.cover-instruction { position:absolute; z-index:12; right:3vw; bottom:4vh; display:grid; grid-template-columns:28px auto 40px; align-items:end; gap:13px; transition:opacity .35s ease,transform .6s var(--ease); }
.cover-instruction span { align-self:start; color:rgba(242,237,223,.48); font:600 7px/1 var(--font-mono); }
.cover-instruction p { margin:0; color:rgba(242,237,223,.68); font:500 9px/1.65 var(--font-mono); letter-spacing:.08em; }
.cover-instruction button { width:40px; height:40px; color:var(--bg0); background:var(--accent); cursor:pointer; font-size:18px; box-shadow:0 0 24px rgba(var(--accent-rgb),.24); transition:transform .25s var(--ease); }
.cover-instruction button:hover { transform:translateY(4px); }
.portfolio-shell:not(.is-cover) .cover-instruction { opacity:0; pointer-events:none; transform:translateY(20px); }

.content-panel { position:absolute; top:50%; z-index:12; width:min(47vw,760px); max-height:80%; padding:clamp(34px,5vh,62px) clamp(30px,4vw,68px); overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.35) transparent; background:linear-gradient(135deg,rgba(12,20,17,.25),rgba(255,255,255,.025)); border:1px solid rgba(var(--accent-rgb),.14); box-shadow:0 28px 90px rgba(7,13,10,.13); backdrop-filter:blur(15px) saturate(1.08); transform:translateY(-50%); transition:left 1.05s var(--ease),right 1.05s var(--ease),opacity .34s ease,filter .42s ease,transform .8s var(--ease); }
.content-panel[data-side="left"] { left:4.5vw; right:auto; }
.content-panel[data-side="right"] { right:4.5vw; left:auto; }
.is-cover .content-panel { opacity:0; pointer-events:none; }
.content-panel.phase-out,.content-panel.phase-waiting { opacity:0; filter:blur(14px); pointer-events:none; }
.content-panel.phase-out[data-side="left"],.content-panel.phase-waiting[data-side="left"] { transform:translate(-70px,-50%) scale(.96); }
.content-panel.phase-out[data-side="right"],.content-panel.phase-waiting[data-side="right"] { transform:translate(70px,-50%) scale(.96); }
.content-panel.phase-in { animation:panel-materialize .78s var(--ease) both; }
.content-panel::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(var(--accent-rgb),.09) 49%,transparent 63%); transform:translateX(-120%); }
.content-panel.phase-in::after { animation:panel-scan 1.15s .12s var(--ease); }
.panel-frame { position:absolute; inset:13px; pointer-events:none; }
.panel-frame i { position:absolute; width:20px; height:20px; border-color:rgba(var(--accent-rgb),.46); }
.panel-frame i:nth-child(1) { top:0; left:0; border-top:1px solid;border-left:1px solid; }
.panel-frame i:nth-child(2) { top:0; right:0; border-top:1px solid;border-right:1px solid; }
.panel-frame i:nth-child(3) { bottom:0; left:0; border-bottom:1px solid;border-left:1px solid; }
.panel-frame i:nth-child(4) { right:0; bottom:0; border-right:1px solid;border-bottom:1px solid; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:clamp(25px,4vh,48px); }
.section-kicker,.panel-heading time { margin:0; color:rgba(242,237,223,.62); font:600 8px/1.2 var(--font-mono); letter-spacing:.14em; }
.section-kicker span { display:inline-grid; place-items:center; width:27px; height:27px; margin-right:11px; color:var(--bg0); background:var(--accent); box-shadow:0 0 20px rgba(var(--accent-rgb),.18); letter-spacing:0; }
.panel-heading time { color:rgba(242,237,223,.44); letter-spacing:.06em; white-space:nowrap; }
.section-eyebrow { margin:0 0 10px; color:var(--accent); font:600 8px/1 var(--font-mono); letter-spacing:.16em; }
.content-panel h2 { max-width:720px; margin:0; color:var(--ivory); font-size:clamp(39px,4.6vw,76px); font-weight:900; line-height:.94; letter-spacing:-.06em; text-wrap:balance; }
.section-subtitle { max-width:620px; margin:17px 0 0; color:rgba(242,237,223,.82); font-size:clamp(14px,1.08vw,18px); font-weight:600; line-height:1.5; }
.section-body { max-width:620px; margin:21px 0 0; color:rgba(242,237,223,.62); font-size:12.5px; line-height:1.78; text-align:justify; }
.hero-metric { display:flex; align-items:flex-end; gap:17px; margin-top:18px; }
.hero-metric strong { color:var(--accent); font:800 clamp(50px,5.6vw,92px)/.8 var(--font-mono); letter-spacing:-.1em; text-shadow:0 0 26px rgba(var(--accent-rgb),.12); }
.hero-metric span { max-width:160px; padding-bottom:4px; color:rgba(242,237,223,.48); font:600 7px/1.45 var(--font-mono); letter-spacing:.12em; }

.fact-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:25px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fact-list li { min-width:0; min-height:68px; display:grid; grid-template-columns:18px 1fr; align-content:center; gap:3px 5px; padding:10px 11px; border-right:1px solid var(--line); }
.fact-list li:first-child { padding-left:0; }
.fact-list li:last-child { border-right:0; }
.fact-list span { grid-row:1/3; color:rgba(var(--accent-rgb),.45); font:600 7px/1 var(--font-mono); }
.fact-list strong { overflow-wrap:anywhere; color:var(--ivory); font:700 11px/1.3 var(--font-sans); }
.fact-list small { color:rgba(242,237,223,.44); font:500 7px/1.3 var(--font-mono); letter-spacing:.05em; }
.tag-row { display:flex; flex-wrap:wrap; gap:9px 17px; margin-top:22px; }
.tag-row span { color:rgba(242,237,223,.47); font:600 7px/1 var(--font-mono); letter-spacing:.1em; }
.tag-row span::before { content:"＋"; margin-right:5px; color:var(--accent); }

.portrait-module { position:absolute; top:92px; right:clamp(26px,3vw,52px); width:34%; height:270px; margin:0; overflow:hidden; background:rgba(20,31,26,.38); border:1px solid rgba(var(--accent-rgb),.32); box-shadow:0 24px 65px rgba(8,14,11,.18); }
.content-panel[data-featured="portrait"] .section-eyebrow,.content-panel[data-featured="portrait"] h2,.content-panel[data-featured="portrait"] .section-subtitle,.content-panel[data-featured="portrait"] .section-body { max-width:57%; }
.content-panel[data-featured="portrait"] .panel-heading { margin-bottom:27px; }
.portrait-module::before { content:"DIGITAL PORTRAIT / AI–01"; position:absolute; z-index:4; top:10px; left:11px; color:rgba(255,255,255,.72); font:600 6px/1 var(--font-mono); letter-spacing:.11em; }
.portrait-module img { width:100%; height:100%; object-fit:cover; object-position:50% 32%; filter:saturate(.78) contrast(.94); transition:transform 1.1s var(--ease); }
.portrait-module:hover img { transform:scale(1.035); }
.portrait-module::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 58%,rgba(16,25,21,.62)); pointer-events:none; }
.portrait-module figcaption { position:absolute; z-index:5; right:10px; bottom:9px; left:10px; display:flex; flex-direction:column; gap:4px; color:var(--ivory); font:600 6px/1.3 var(--font-mono); letter-spacing:.07em; }
.portrait-module figcaption small { color:rgba(255,255,255,.7); font:inherit; }
.portrait-scanline { position:absolute; z-index:3; inset:-20% 0 auto; height:24%; background:linear-gradient(transparent,rgba(var(--accent-rgb),.19),transparent); animation:scan 4.5s linear infinite; }

.content-panel[data-featured="tools"] { width:min(51vw,820px); max-height:84%; padding:30px clamp(32px,3.2vw,52px); }
.content-panel[data-featured="tools"] .panel-heading { margin-bottom:15px; }
.content-panel[data-featured="tools"] h2 { font-size:clamp(38px,4vw,60px); }
.content-panel[data-featured="tools"] .section-subtitle { margin-top:10px; font-size:14px; line-height:1.4; }
.content-panel[data-featured="tools"] .section-body { max-width:590px; margin-top:10px; font-size:11px; line-height:1.55; }
.content-panel[data-featured="tools"] .tag-row { margin-top:13px; }
.tool-constellation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:14px; background:rgba(var(--accent-rgb),.16); border:1px solid rgba(var(--accent-rgb),.18); }
.tool-node { position:relative; min-height:60px; display:grid; align-content:center; gap:4px; padding:10px 16px; overflow:hidden; background:rgba(11,18,15,.25); transition:background .25s ease,transform .35s var(--ease); }
.tool-node:hover { z-index:2; background:rgba(var(--accent-rgb),.11); transform:translateY(-3px); }
.tool-node.primary { grid-column:1/-1; min-height:80px; }
.tool-node span { position:absolute; top:10px; right:11px; color:rgba(var(--accent-rgb),.48); font:600 7px/1 var(--font-mono); }
.tool-node strong { color:var(--ivory); font-size:clamp(25px,2.65vw,42px); font-weight:900; line-height:.88; letter-spacing:-.055em; }
.tool-node.primary strong { color:var(--accent); font-size:clamp(43px,4.8vw,72px); }
.tool-node small { color:rgba(242,237,223,.45); font:600 6px/1 var(--font-mono); letter-spacing:.12em; }
.tool-node i { position:absolute; right:0; bottom:0; left:0; height:1px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(.22); transform-origin:left; transition:transform .45s var(--ease); }
.tool-node:hover i { transform:scaleX(1); }

.market-spectrum { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:24px; background:rgba(var(--accent-rgb),.16); border:1px solid rgba(var(--accent-rgb),.18); }
.market-spectrum div { min-height:98px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:13px 11px; background:rgba(8,18,15,.25); }
.market-spectrum span { color:var(--accent); font:800 24px/1 var(--font-mono); }
.market-spectrum strong { color:var(--ivory); font-size:12px; }
.market-spectrum small { color:rgba(242,237,223,.43); font:600 6px/1 var(--font-mono); letter-spacing:.08em; }

.contact-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:25px; background:rgba(var(--accent-rgb),.16); border:1px solid rgba(var(--accent-rgb),.18); }
.contact-actions a,.contact-actions button { position:relative; min-width:0; min-height:72px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; padding:12px 38px 12px 15px; color:var(--ivory); background:rgba(11,18,15,.25); cursor:pointer; text-align:left; transition:color .2s ease,background .2s ease; }
.contact-actions a:hover,.contact-actions button:hover { color:var(--bg0); background:var(--accent); }
.contact-actions span { color:rgba(242,237,223,.43); font:600 6px/1 var(--font-mono); letter-spacing:.13em; }
.contact-actions strong { max-width:100%; overflow:hidden; font:600 10px/1.2 var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.contact-actions b { position:absolute; top:50%; right:14px; font-size:15px; font-weight:400; transform:translateY(-50%); }

.chapter-rail { position:absolute; z-index:18; top:50%; right:22px; display:flex; flex-direction:column; align-items:center; gap:13px; transform:translateY(-50%); transition:right .9s var(--ease),left .9s var(--ease); }
[data-cube-side="left"] .chapter-rail { right:auto; left:22px; }
.chapter-rail>span { color:rgba(242,237,223,.35); font:600 6px/1 var(--font-mono); letter-spacing:.18em; writing-mode:vertical-rl; }
.chapter-rail nav { display:flex; flex-direction:column; gap:6px; }
.chapter-rail button { position:relative; width:32px; height:22px; display:flex; align-items:center; justify-content:center; padding:0; color:rgba(242,237,223,.3); background:none; cursor:pointer; }
.chapter-rail button i { width:5px; height:5px; border:1px solid currentColor; border-radius:50%; transition:.25s ease; }
.chapter-rail button span,.chapter-rail button small { position:absolute; right:33px; opacity:0; pointer-events:none; white-space:nowrap; transition:opacity .2s ease,transform .25s var(--ease); transform:translateX(6px); }
.chapter-rail button span { color:var(--accent); font:600 7px/1 var(--font-mono); }
.chapter-rail button small { right:51px; color:var(--ivory); font:700 8px/1 var(--font-mono); }
[data-cube-side="left"] .chapter-rail button span { right:auto; left:33px; }
[data-cube-side="left"] .chapter-rail button small { right:auto; left:51px; }
.chapter-rail button:hover span,.chapter-rail button:hover small,.chapter-rail button.active span,.chapter-rail button.active small { opacity:1; transform:translateX(0); }
.chapter-rail button.active { color:var(--accent); }
.chapter-rail button.active i { width:12px; height:12px; background:rgba(var(--accent-rgb),.2); box-shadow:0 0 14px rgba(var(--accent-rgb),.65); }

.direction-controls { position:absolute; right:24px; bottom:20px; z-index:19; display:flex; align-items:center; gap:7px; }
[data-cube-side="left"] .direction-controls { right:auto; left:24px; }
.direction-controls button { width:36px; height:36px; display:grid; place-items:center; color:var(--ivory); background:rgba(9,16,13,.22); border:1px solid var(--line); cursor:pointer; backdrop-filter:blur(10px); transition:.2s ease; }
.direction-controls button:hover { color:var(--bg0); background:var(--accent); }
.direction-controls span { width:54px; color:rgba(242,237,223,.58); text-align:center; font:600 7px/1 var(--font-mono); }
.quantum-meter { position:absolute; z-index:18; bottom:22px; left:28px; width:155px; display:grid; grid-template-columns:1fr auto; gap:7px 10px; color:rgba(242,237,223,.44); font:600 6px/1 var(--font-mono); letter-spacing:.13em; }
[data-cube-side="left"] .quantum-meter { right:28px; left:auto; }
.quantum-meter i { grid-column:1/-1; height:2px; overflow:hidden; background:rgba(242,237,223,.12); }
.quantum-meter b { display:block; width:42%; height:100%; background:var(--accent); box-shadow:0 0 10px var(--accent); transition:width 1.1s var(--ease); }
.quantum-meter small { grid-column:2; grid-row:1; font:inherit; color:var(--accent); }
.toast { position:fixed; right:28px; bottom:28px; z-index:50; padding:12px 16px; color:var(--bg0); background:var(--accent); font:600 8px/1 var(--font-mono); animation:toast .3s var(--ease) both; }
.cube-fallback { position:absolute; top:50%; left:50%; z-index:6; width:280px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; transform:translate(-50%,-50%) rotate(-6deg) skewY(3deg); }
.cube-fallback span { aspect-ratio:1; display:grid; place-items:center; color:#6b746e; background:linear-gradient(145deg,#f1edde,#c6c3b7); border:1px solid rgba(255,255,255,.4); border-radius:11px; font:700 16px/1 var(--font-mono); }

@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(1%,-1%)} 50%{transform:translate(-1%,1%)} 75%{transform:translate(1%,1%)} }
@keyframes energy-rotate { to{transform:rotate(360deg) scale(1.08)} }
@keyframes status { 0%,100%{opacity:.35} 50%{opacity:1} }
@keyframes assemble { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes panel-materialize { from{opacity:0;filter:blur(16px);transform:translateY(-50%) scale(.92)} to{opacity:1;filter:blur(0);transform:translateY(-50%) scale(1)} }
@keyframes panel-scan { from{transform:translateX(-120%)} to{transform:translateX(120%)} }
@keyframes scan { from{transform:translateY(0)} to{transform:translateY(520%)} }
@keyframes toast { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:1120px) {
  .content-panel { width:min(50vw,690px); padding-right:42px; padding-left:42px; }
  .content-panel[data-side="left"] { left:3vw; }
  .content-panel[data-side="right"] { right:3vw; }
  .content-panel h2 { font-size:clamp(36px,4.7vw,66px); }
  .portrait-module { right:30px; width:32%; height:235px; }
  .content-panel[data-featured="tools"] { width:53vw; }
}

@media (max-width:820px) {
  .site-header { height:68px; grid-template-columns:1fr auto; padding:0 16px; }
  .identity-mark strong { width:38px; height:38px; }
  .system-status { display:none; }
  .header-actions { gap:12px; }
  .header-actions a { padding-left:13px; }
  .experience-stage { inset:68px 0 0; }
  .cube-zone { bottom:49%; }
  .cube-aura,[data-cube-side="right"] .cube-aura,[data-cube-side="left"] .cube-aura { left:50%; width:min(92vw,500px); }
  .cube-meta,[data-cube-side="right"] .cube-meta,[data-cube-side="left"] .cube-meta { left:50%; width:calc(100% - 34px); }
  .cube-meta-top { top:10px; }
  .cube-meta-bottom { bottom:8px; }
  .axis-horizontal { top:40%; }
  .axis-vertical { display:none; }
  .editorial-copy { bottom:9%; padding-left:16px; }
  .editorial-copy strong { font-size:clamp(58px,18vw,112px); line-height:.78; }
  .content-panel,.content-panel[data-side="left"],.content-panel[data-side="right"],.content-panel[data-featured="tools"] { top:44%; right:12px; bottom:52px; left:12px; width:auto; max-height:none; padding:25px 20px 30px; transform:none; }
  .content-panel.phase-out[data-side="left"],.content-panel.phase-waiting[data-side="left"],.content-panel.phase-out[data-side="right"],.content-panel.phase-waiting[data-side="right"] { transform:translateY(46px) scale(.97); }
  .content-panel.phase-in { animation:panel-materialize-mobile .7s var(--ease) both; }
  .panel-heading { margin-bottom:20px; }
  .content-panel h2 { font-size:clamp(34px,9vw,54px); }
  .section-subtitle { margin-top:12px; }
  .section-body { margin-top:15px; font-size:12px; line-height:1.72; }
  .portrait-module { position:relative; top:auto; right:auto; width:100%; height:220px; margin-top:18px; }
  .content-panel[data-featured="portrait"] .section-eyebrow,.content-panel[data-featured="portrait"] h2,.content-panel[data-featured="portrait"] .section-subtitle,.content-panel[data-featured="portrait"] .section-body { max-width:none; }
  .fact-list { margin-top:18px; }
  .chapter-rail,[data-cube-side="left"] .chapter-rail { top:auto; right:auto; bottom:10px; left:50%; flex-direction:row; gap:8px; transform:translateX(-50%); }
  .chapter-rail>span,.chapter-rail button span,.chapter-rail button small { display:none; }
  .chapter-rail nav { flex-direction:row; gap:3px; }
  .chapter-rail button { width:22px; height:24px; }
  .direction-controls,[data-cube-side="left"] .direction-controls { top:calc(44% - 43px); right:12px; bottom:auto; left:auto; }
  .quantum-meter,[data-cube-side="left"] .quantum-meter { top:calc(44% - 31px); right:auto; bottom:auto; left:14px; width:122px; }
  .cover-instruction { right:16px; bottom:55px; }
  .market-spectrum { grid-template-columns:repeat(2,1fr); }
  .toast { right:14px; bottom:50px; }
}

@media (max-width:520px) {
  .identity-mark span,.header-actions button { display:none; }
  .editorial-copy strong { font-size:17vw; }
  .cover-instruction { grid-template-columns:auto 36px; }
  .cover-instruction>span { display:none; }
  .cube-zone { bottom:54%; }
  .content-panel,.content-panel[data-side="left"],.content-panel[data-side="right"] { top:40%; }
  .panel-heading time { font-size:6px; }
  .section-kicker { font-size:7px; }
  .content-panel h2 { font-size:33px; }
  .section-subtitle { font-size:13px; }
  .fact-list { grid-template-columns:1fr; }
  .fact-list li,.fact-list li:first-child { min-height:40px; grid-template-columns:18px .8fr 1fr; padding:7px 0; border-right:0; border-bottom:1px solid var(--line); }
  .fact-list li:last-child { border-bottom:0; }
  .fact-list span { grid-row:auto; }
  .fact-list small { align-self:center; text-align:right; }
  .tool-constellation { grid-template-columns:1fr; }
  .tool-node.primary { grid-column:auto; }
  .tool-node { min-height:75px; }
  .tool-node.primary { min-height:98px; }
  .contact-actions { grid-template-columns:1fr; }
  .direction-controls,[data-cube-side="left"] .direction-controls { top:calc(40% - 39px); }
  .quantum-meter,[data-cube-side="left"] .quantum-meter { top:calc(40% - 27px); }
}

@keyframes panel-materialize-mobile { from{opacity:0;filter:blur(16px);transform:translateY(45px) scale(.95)} to{opacity:1;filter:blur(0);transform:none} }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }