/* Persistent mechanical controls around the original dark gallery.
   The skin owns layout only; navigation and playback remain in index.html. */
html body { --console-ice:#e6eff5; --console-cyan:#37dafa; }
html .console-frame { position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden; }
.console-wing { position:absolute;top:0;width:23vw;height:100px;background:linear-gradient(165deg,#f6fafc,#a6bac9);border-bottom:6px solid #536979; }
.wing-left { left:0;clip-path:polygon(0 0,100% 0,83% 34%,66% 34%,51% 70%,0 70%); }
.wing-right { right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,83% 34%,66% 34%,51% 70%,0 70%); }
.console-keel { position:absolute;bottom:0;left:25%;right:25%;height:24px;background:linear-gradient(#d7e8f0,#7b93a5);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);border-top:2px solid #6fe7ff; }
.console-bus { position:absolute;top:35%;height:25%;width:18px;border-top:1px solid #5ccde975;border-bottom:1px solid #5ccde975; }
.bus-left { left:18px;border-left:2px solid #60849a; }.bus-right { right:18px;border-right:2px solid #60849a; }
html body .header {
 inset:12px auto auto 50%;transform:translateX(-50%);width:490px;height:78px;padding:10px 24px;
 background:linear-gradient(140deg,#fff,#e3edf3 60%,#b4c8d5);color:#193b4c;
 border:1px solid #e8fbff;border-bottom:5px solid #688b9f;border-radius:3px 3px 16px 16px;
 box-shadow:0 2px 0 #132637,0 8px 32px #0008;backdrop-filter:none;
}
html .header .brand b { font-size:22px;letter-spacing:.01em; }
html .header .brand small { color:#567182;letter-spacing:.12em;font-size:10px; }
html .header .brand-mark { width:40px;height:40px; }
html .header .lang-toggle { background:#0d2e4110;border-color:#6e8f9f77; }
html .header .lang-toggle button { color:#3f5b6c; }
html .header .lang-toggle button.active { background:#193f54;color:#e8faff; }
html .sidebar { left:28px;top:calc(50% - 130px);width:190px;bottom:70px; }
html .sidebar-intro,html .sidebar-bottom { display:none; }
html #categories { display:flex;flex-direction:column;gap:20px;overflow:visible; }
.console-primary,.console-secondary { display:flex;flex-direction:column;gap:14px; }
html #categories button {
 position:relative;isolation:isolate;display:flex;align-items:center;gap:13px;
 width:100%;min-height:60px;padding:14px 14px 14px 18px;text-align:left;
 color:#2d4a5e;font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
 background:linear-gradient(155deg,#f8fcff,#d3e2ec);border:1px solid #c6e8f5;
 border-bottom:4px solid #678599;border-left:4px solid #9ebacb;border-radius:2px 12px 2px 12px;
 box-shadow:0 4px 0 #1d3445,0 10px 24px #0006,inset 0 2px 0 #fff;
 transition:transform .22s,border-color .22s,background .22s,box-shadow .22s;
}
html #categories button::after { content:'';position:absolute;bottom:4px;left:16px;right:24px;height:1px;background:#91c0d766; }
html #categories button.active::after { top:auto;bottom:4px;left:16px;right:24px;width:auto;height:1px;background:#43b2d2;z-index:auto; }
html #categories button.active::before { display:none; }
html #categories button:hover { color:#0b3c53;transform:translateX(4px);border-color:#55d9f5; }
html #categories button.active { color:#073549;background:linear-gradient(130deg,#dffcff,#8adaed);border-left-color:#27d9fb;border-bottom-color:#2a90ad;box-shadow:0 4px 0 #163b51,0 0 22px #3adaff38,inset 0 2px 0 #f3ffff; }
html #categories button:focus-visible { outline:2px solid #74eaff;outline-offset:5px; }
html #categories .nav-icon { display:block;width:25px;height:25px;flex-shrink:0;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none; }
html #categories .nav-arrow { display:block;opacity:.55;transform:none;margin-left:auto;font-size:20px;color:#37677e; }
html #categories .active .nav-arrow { opacity:1;transform:translateX(2px);color:#087da0; }
html #workArea { top:130px;left:248px;right:32px;bottom:62px; }
html .section-heading h1 { font-size:clamp(32px,3.6vw,52px);letter-spacing:-.045em; }
html .section-heading .eyebrow { color:#81c5d9; }
html .view-controls { border:1px solid #86c7df44;border-radius:2px;background:#0b1823!important; }
html .view-controls button { border-radius:1px; }
html .view-controls button.active { background:#d8eaf1;color:#17384a; }
html .direct-index { border-top-color:#75c4de44; }
html #detail { border:1px solid #9bcede66;border-top:4px solid #ccdde7;box-shadow:0 14px 48px #0007; }
html .detail-heading { background:linear-gradient(110deg,#dfeaf1,#b9cfdd);color:#254c60; }
html .detail-heading .eyebrow { color:#345c6f; }
html .media-dock { z-index:26; }
/* Actual controls assemble as the opening completes; no duplicate fake menu. */
html.shell-waiting #categories button,html.shell-waiting .header,html.shell-waiting .console-frame,html.shell-waiting #workArea { opacity:0; }
html.shell-assembling #categories button { animation:console-plate .65s cubic-bezier(.22,.85,.22,1) both; }
html.shell-assembling #categories button:nth-child(2) { animation-delay:.12s; }
html.shell-assembling #categories button:nth-child(3) { animation-delay:.24s; }
html.shell-assembling .console-secondary button { animation-delay:.18s; }
html.shell-assembling .header,html.shell-assembling .console-frame { animation:console-frame .7s ease-out both; }
html.shell-assembling #workArea { animation:console-content .65s .45s ease-out both; }
@keyframes console-plate { 0%{opacity:0;transform:perspective(650px) translateX(-28px) rotateY(65deg)}60%{opacity:1;transform:perspective(650px) translateX(3px) rotateY(-5deg)}100%{opacity:1;transform:none} }
html .workspace-foot{display:none!important}
html #space{bottom:48px}
html .replay-intro{min-width:36px;min-height:44px;padding:0;color:#24536b;font-size:24px}
.replay-intro span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes console-frame { from{opacity:0;translate:0 -20px}to{opacity:1;translate:0 0} }
@keyframes console-content { from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0} }
@media(min-width:1400px){
 html .sidebar{top:calc(50% - 110px)}
 html #categories .console-secondary { position:fixed;right:28px;top:calc(50% - 72px);width:190px; }
 html #workArea { right:248px; }
 html body.has-detail #workArea { right:calc(var(--detailW) + 272px); }
 html #detail { right:238px; }
 html #categories .console-secondary button { border-radius:12px 2px 12px 2px; }
}
@media(min-width:901px) and (max-height:730px){html .sidebar{top:130px}html #categories button{min-height:48px;padding-top:8px;padding-bottom:8px}.console-primary,.console-secondary{gap:10px}html #categories{gap:14px}html #categories .console-secondary{top:calc(50% - 55px)}}
@media(max-width:900px){
 html .console-wing{height:32px;width:22vw}.console-keel{display:none}.console-bus{display:none}
 html body .header{left:10px!important;right:10px!important;top:4px;transform:none;width:auto;height:56px!important;padding:4px 8px;border-radius:3px 3px 8px 8px}
 html .header .brand{gap:8px}html .header .brand b{font-size:16px;letter-spacing:0}html .header .brand small{display:none}html .header .brand-mark{width:30px;height:30px}html .header-links{gap:3px!important}html .replay-intro{min-width:30px}
 html .sidebar{left:10px!important;right:10px!important;top:68px!important;width:auto;bottom:auto}
 html #categories{display:flex;flex-direction:row;gap:7px!important;overflow-x:auto;overflow-y:hidden;padding:0 2px 7px;scrollbar-width:none;scroll-snap-type:x proximity;}
 html #categories .console-primary,html #categories .console-secondary{display:contents}
 html #categories button{width:auto;flex-shrink:0;min-width:92px;min-height:44px!important;padding:6px 9px;gap:6px;font-size:12px!important;letter-spacing:0;border-bottom-width:2px;border-left-width:2px;border-radius:2px 6px 2px 6px;scroll-snap-align:start}
 html #categories .console-secondary button{grid-column:span 3}
 html #categories .nav-icon{width:21px;height:21px}html #categories .nav-arrow{display:none}
 html #workArea{top:132px!important;left:16px!important;right:16px!important;bottom:calc(56px + env(safe-area-inset-bottom))!important}
 html #space{inset:76px 0 52px!important}
 html .section-heading h1{font-size:32px!important}html .section-heading p{font-size:11px}
 html body.has-detail:not(.about-only) #detail{top:126px!important;bottom:calc(56px + env(safe-area-inset-bottom))!important}
 html .about-panel{top:100px!important;bottom:0;overflow:auto}
 html #gameShowcase{inset:76px 0 0}
 html #categories button:hover{transform:none}
}
@media(max-width:900px) and (max-height:540px){
 html body .header{height:54px!important;top:4px;padding-top:4px;padding-bottom:4px}
 html .sidebar{top:68px!important}
 html #categories{display:flex;flex-direction:row;overflow-x:auto;gap:8px!important;padding-bottom:8px}
 html #categories button{width:auto;min-width:115px;min-height:44px!important}
 html #workArea{top:132px!important;bottom:52px!important}
 html #space{inset:65px 0 48px!important}
 html .section-heading p,html .section-heading .eyebrow{display:none}
 html .section-heading h1{font-size:28px!important}
 html .workspace-foot{display:none}
 html #gameShowcase{inset:68px 0 0}
 html body.has-detail:not(.about-only) #detail{top:126px!important;bottom:52px!important}
 html .about-panel{top:65px!important}
}
@media(prefers-reduced-motion:reduce){
 .replay-intro{display:none}
 html.shell-assembling .plate-mechanics i,html.shell-assembling #categories .nav-icon,html.shell-assembling #categories button>span:not(.plate-mechanics){animation:none}
 html.shell-waiting #categories button,html.shell-waiting .header,html.shell-waiting .console-frame,html.shell-waiting #workArea{opacity:1}
 html.shell-assembling #categories button,html.shell-assembling .header,html.shell-assembling .console-frame,html.shell-assembling #workArea{animation:none}
 html #categories button{transition:none!important;transform:none!important}
}

/* Brand lockup (2026-09-26): the original mark lives in a chamfered black glass window set into the plate
   (its square edges fade out, so it never reads as a pasted picture); the name is a custom logotype SVG. */
html .header .brand{gap:14px;align-items:center}
html .header .brand-chip{position:relative;width:54px;height:46px;flex-shrink:0;
 clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
 background:linear-gradient(135deg,#1c3440,#0b1720 40%,#34c7e6)}
html .header .brand-chip::before{content:'';position:absolute;inset:1px;
 clip-path:polygon(0 0,calc(100% - 10.6px) 0,100% 10.6px,100% 100%,10.6px 100%,0 calc(100% - 10.6px));
 background:radial-gradient(circle at 50% 45%,#0f1418,#050709 75%);box-shadow:inset 0 0 12px #000}
html .header .brand-chip .brand-mark{position:absolute;left:50%;top:50%;width:62px!important;height:62px!important;border-radius:0!important;
 transform:translate(-50%,-50%);filter:none;-webkit-mask-image:radial-gradient(circle,#000 38%,transparent 64%);mask-image:radial-gradient(circle,#000 38%,transparent 64%)}
html .header .brand-type{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
html .header .brand-word{height:15px;width:auto;display:block}
html .header .brand-word .bw-a{fill:#0d1620}
html .header .brand-word .bw-c{fill:#07a9d0}
html .header .brand .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html .header .brand small{font:600 8.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.34em;color:#56707f;text-transform:uppercase;margin:0}
html .header .brand small i{font-style:normal;color:#07a9d0}
html .header .brand:hover .brand-word .bw-c{fill:#00c2ec}
@media(max-width:900px){
 html .header .brand{gap:10px}
 html .header .brand-chip{width:40px;height:34px}
 html .header .brand-chip .brand-mark{width:46px!important;height:46px!important}
 html .header .brand-word{height:13px}
}

/* Active tab (2026-09-26): black glass + cyan, instead of a pale fill — readable and on-brand. A light
   sweeps across it now and then. */
html #categories button.active{color:#c9f8ff;background:linear-gradient(135deg,#0e1a24 0%,#12222e 55%,#0a1218 100%);
 border-color:#1d3a48;border-left-color:#29e2ff;border-bottom-color:#050b10;overflow:hidden;
 box-shadow:0 4px 0 #04090d,0 0 0 1px rgba(41,226,255,.28),0 0 24px rgba(41,226,255,.26),inset 0 1px 0 rgba(255,255,255,.07);
 text-shadow:0 0 10px rgba(41,226,255,.7)}
html #categories button.active .nav-icon{stroke:#29e2ff;filter:drop-shadow(0 0 4px rgba(41,226,255,.85))}
html #categories button.active .nav-arrow{color:#29e2ff;opacity:1}
html #categories button.active::after{background:linear-gradient(90deg,#29e2ff,rgba(41,226,255,0));height:1px;box-shadow:0 0 6px #29e2ff}
html #categories button.active::before{display:block;content:'';position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;
 background:linear-gradient(100deg,transparent,rgba(41,226,255,.16) 45%,rgba(190,250,255,.22) 50%,rgba(41,226,255,.16) 55%,transparent);
 transform:translateX(-120%);animation:tabSweep 3.6s cubic-bezier(.45,0,.2,1) infinite 1s;pointer-events:none}
html #categories button.active:hover{color:#e6fcff}
@keyframes tabSweep{0%{transform:translateX(-120%)}38%,100%{transform:translateX(260%)}}
@media(prefers-reduced-motion:reduce){html #categories button.active::before{animation:none;opacity:0}}
html .header .brand-word,html .header .brand-word path{stroke:none!important;filter:none}