/* Palette: wings only. Steps: base-d2 #1f1f1f, base-d1 #262626, base-l1 #3d3d3d, base-l2 #474747;
   accent-l1 #6fc3d9, accent-d1 #2a8aa3; neutral-l1 #c3c9d1, neutral-d1 #6b7480 */
:root{--base:#333333;--bd1:#262626;--bd2:#1f1f1f;--bl1:#3d3d3d;--bl2:#474747;--acc:#37aac8;--accl:#6fc3d9;--accd:#2a8aa3;--neu:#939dac;--neul:#c3c9d1;--neud:#6b7480;
--c1:var(--acc);--c2:var(--neu);--c3:var(--accd);--spring:cubic-bezier(.2,.8,.2,1);--sw:200px;--bar:44px;--r:44px}
*{box-sizing:border-box;margin:0}
body{background:var(--bd2);color:var(--neu);font:400 1rem/1.55 'Exo 2',sans-serif;min-height:100vh}
h1,h2,h3,.pill,.num{font-family:Rajdhani,sans-serif;font-weight:600;text-transform:uppercase}
.num{font-size:.78rem;letter-spacing:.15em;color:var(--bd2)}
.shell{display:grid;grid-template-columns:var(--sw) 1fr;grid-template-rows:var(--bar) 1fr var(--bar);gap:6px;min-height:100vh;padding:12px}
.elbow{background:var(--c1);display:flex;align-items:flex-end;padding:6px 14px;transition:background-color .6s}
.elbow.tl{border-top-left-radius:var(--r) ;grid-row:1;grid-column:1}
.elbow.bl{border-bottom-left-radius:var(--r);grid-row:3;grid-column:1;background:var(--c2);align-items:flex-start}
.topbar,.botbar{display:flex;gap:6px;align-items:stretch}
.seg{display:block;transition:background-color .26s cubic-bezier(.33,1,.68,1),flex-grow .3s cubic-bezier(.2,.8,.2,1)}
.elbow{transition:background-color .26s cubic-bezier(.33,1,.68,1)!important}
.s1{background:var(--c1);flex:3}.s2{background:var(--c2);flex:1}.s3{background:var(--c3);flex:2}.s4{background:var(--neud);flex:.5;border-radius:0 22px 22px 0}
.topbar .num,.botbar .num{background:var(--bl2);color:var(--neul);padding:0 14px;display:flex;align-items:center}
.brand{color:var(--acc);letter-spacing:.22em;font-size:1.6rem;padding:0 10px;display:flex;align-items:center;line-height:1}
.side{display:flex;flex-direction:column;gap:6px}
.pill{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--bd2);background:var(--neu);border-radius:0 22px 22px 0;padding:10px 16px;font-size:1.05rem;letter-spacing:.2em;border:0;cursor:pointer;transition:background-color .3s,transform .45s var(--spring)}
.pill{white-space:nowrap}
.pill b{font-weight:600;opacity:.7}
.pill:hover{background:var(--neul);transform:translateX(6px)}
.pill.on{background:var(--acc)}
.pill{position:relative;overflow:hidden}
.pill.sweep::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--accl) 45%,var(--neul) 50%,var(--accl) 55%,transparent);transform:translateX(-100%);animation:sweep .36s cubic-bezier(.33,1,.68,1) forwards;mix-blend-mode:screen;opacity:.7}
@keyframes sweep{to{transform:translateX(100%)}}
.rm .pill.sweep::after{animation:none}.pill.ext{background:var(--neud)}
.pill.sm{border-radius:22px;padding:0 18px;font-size:.9rem}
.sidefill{flex:1;background:var(--bl1);display:flex;align-items:flex-end;padding:8px 14px}.sidefill .num{color:var(--neu)}
.stage{grid-row:2;grid-column:2;perspective:1400px;padding:18px 8px 18px 22px;overflow:hidden}
/* route transition (v2): prism line rolls + LCARS bar readout, driven by main.js (WAAPI) */
.view{min-height:100%}
.roll{opacity:0;transform:translateY(24px) rotateX(-25deg);transform-origin:50% 0;transition:transform .7s var(--spring),opacity .5s ease;transition-delay:calc(var(--i,0)*70ms)}
.roll.in{opacity:1;transform:none}
.hero{display:flex;gap:28px;align-items:center;margin-bottom:24px}
.hero img{width:min(240px,40vw);border-radius:0 var(--r) 0 var(--r)}
.big{color:var(--acc);letter-spacing:.22em;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1}
h3{color:var(--acc);letter-spacing:.2em;font-size:1.15rem;display:flex;justify-content:space-between}
h3 .num{color:var(--neud)}
.grid{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}
.panel{background:var(--bd1);border-left:14px solid var(--acc);border-radius:0 24px 24px 0;padding:18px}
.latest ul{list-style:none;padding:0;margin-top:10px}.latest li{padding:8px 0;border-bottom:2px solid var(--bl1)}
.latest b{font:600 .8rem Rajdhani;letter-spacing:.15em;color:var(--bd2);background:var(--neu);border-radius:12px;padding:2px 10px;margin-right:10px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--bl1);border-radius:0 0 24px 0;padding:16px;text-decoration:none;color:var(--neu);border-top:8px solid var(--acc);transition:transform .45s var(--spring),background-color .3s,opacity .5s}
.tile:hover{background:var(--bl2);transform:translateY(-4px)}
.tile .num{color:var(--accl)}.tile.ext{border-top-color:var(--neud)}
.lane .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:18px}
.lane .ph{height:120px;background:linear-gradient(135deg,var(--bl1),var(--bd1));border-radius:0 20px 0 20px;padding:12px}
.note{margin-top:14px;color:var(--neul)}
/* lane frame tints */
.shell[data-lane=writing]{--c1:var(--neu);--c2:var(--acc);--c3:var(--neud)}
.shell[data-lane=builds]{--c1:var(--accd);--c2:var(--accl);--c3:var(--neu)}
.shell[data-lane=art] .s1{flex:1}.shell[data-lane=art] .s3{flex:4}
.shell[data-lane=writing] .s1{flex:2}.shell[data-lane=writing] .s2{flex:3}.shell[data-lane=writing] .s3{flex:1}
.shell[data-lane=builds] .s1{flex:4}.shell[data-lane=builds] .s2{flex:.6}.shell[data-lane=builds] .s3{flex:1.4}
/* calm mode: fades only */
.rm .roll{transform:none!important}
.rm .pill:hover,.rm .tile:hover{transform:none}
.rm .seg{transition:background-color .6s}
@media (max-width:760px){
 .shell{grid-template-columns:1fr;grid-template-rows:var(--bar) auto 1fr auto;padding:8px}
 .elbow.bl{display:none}.elbow.tl{display:none}
 .topbar{grid-row:1;grid-column:1}.topbar .s4{display:none}.topbar .num{display:none}.topbar .s1{border-radius:22px 0 0 22px}
 .side{grid-row:2;grid-column:1;flex-direction:row;overflow-x:auto;gap:5px}
 .side .pill{border-radius:20px;padding:8px 12px;font-size:.85rem;white-space:nowrap;letter-spacing:.12em;gap:6px}
 .sidefill{display:none}
 .stage{grid-row:3;grid-column:1;padding:14px 2px}
 .botbar{grid-row:4;grid-column:1}.botbar .num{font-size:.62rem;padding:0 8px}
 .hero{flex-direction:column;text-align:center;gap:14px}.hero img{width:200px}
 .grid,.tiles{grid-template-columns:1fr}
}