:root{
  color-scheme:dark;
  --gold:#f6bd57;--gold-soft:#ffdda1;--blue:#41cfff;--blue-soft:#9be9ff;--ink:#02060d;
  --glass:rgba(6,16,29,.59);--line:rgba(103,205,255,.34);--mx:50%;--my:50%;
  --motion-fast:180ms;--motion-med:420ms;--motion-slow:1200ms;
}
*{box-sizing:border-box} html,body{width:100%;min-height:100%;margin:0;background:#010307} body{min-height:100vh;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f8fb} button,a{font:inherit}button{color:inherit}
.app-stage{
  --art-ratio:1.7787234;
  --safe-x:14.8%;
  --safe-top:8.2%;
  --safe-bottom:9.2%;
  --ui-scale:1;
  position:relative;width:100vw;height:100vh;height:100svh;min-width:320px;min-height:320px;
  margin:0;isolation:isolate;overflow:hidden;background:#02050a;perspective:1400px
}
.background-layer,.interface-layer,.foreground-layer{position:absolute;inset:0}.background-layer{z-index:0;overflow:hidden;background:#02050a}.background-layer img{
  position:absolute;left:50%;top:50%;
  width:calc(100% + 5vmax);height:calc(100% + 5vmax);
  object-fit:cover;object-position:center center;
  filter:saturate(.96) brightness(.82) contrast(.98) blur(.18px);
  transform:translate(-50%,-50%) scale(1.018);
  transform-origin:center center;
  transition:transform .65s cubic-bezier(.2,.75,.2,1),object-position .3s ease
}
.background-layer::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 0 22%,rgba(1,6,14,.08) 42%,rgba(0,0,0,.31) 100%),linear-gradient(to bottom,rgba(1,6,10,.2),rgba(1,5,12,.02) 56%,rgba(0,0,0,.31))}.distance-haze{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(4,12,23,0) 26%,rgba(3,9,18,.12) 90%);backdrop-filter:blur(.12px)}.star-glass{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,211,119,.06),transparent 25%);mix-blend-mode:screen;transition:background .15s linear}
.interface-layer{
  z-index:10;display:grid;place-items:center;
  padding:var(--safe-top) var(--safe-x) var(--safe-bottom);
  pointer-events:none;transform-style:preserve-3d;
  transition:transform .35s ease,padding .28s ease
}
.glass-pane{pointer-events:auto;width:100%;height:100%;min-height:0;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(12px,1.45vw,26px);border:1px solid rgba(117,209,255,.37);border-radius:clamp(12px,1.25vw,24px);background:linear-gradient(135deg,rgba(11,26,43,.31),rgba(3,11,22,.18)),radial-gradient(circle at 85% 15%,rgba(41,159,222,.07),transparent 29%);box-shadow:0 38px 86px rgba(0,0,0,.61),0 0 46px rgba(43,174,255,.07),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,190,73,.09);backdrop-filter:blur(6px) saturate(1.06);-webkit-backdrop-filter:blur(6px) saturate(1.06);overflow:hidden;position:relative;transform:translateZ(32px)}
.glass-pane::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,193,83,.15);border-radius:inherit;pointer-events:none}.glass-pane::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.038),transparent 18%,transparent 75%,rgba(68,201,255,.025));mix-blend-mode:screen}.glass-reactor{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;left:calc(var(--mx) - 17%);top:calc(var(--my) - 17%);background:radial-gradient(circle,rgba(255,196,91,.1),rgba(46,191,255,.045) 34%,transparent 70%);filter:blur(4px);pointer-events:none;transition:left .12s linear,top .12s linear}
.pane-header{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:clamp(8px,1vw,16px);border-bottom:1px solid rgba(86,173,222,.18)}.eyebrow,.section-kicker{margin:0 0 .45rem;color:#73d8ff;font-size:clamp(7px,.58vw,11px);letter-spacing:.23em;text-transform:uppercase}.brand-block h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,2.5vw,46px);line-height:.95;letter-spacing:.075em;color:#fff1cf;text-shadow:0 0 16px rgba(255,178,50,.45),0 5px 12px rgba(0,0,0,.62)}.brand-block h1 span{display:block;margin-top:.35em;font-family:ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:.43em;letter-spacing:.34em;color:var(--gold-soft)}.tagline{margin:.7em 0 0;max-width:52ch;color:rgba(230,239,247,.77);font-size:clamp(8px,.77vw,14px)}
.status-stack{display:grid;justify-items:end;gap:8px}.status-pill{display:flex;align-items:center;gap:.55em;padding:.6em .85em;border:1px solid rgba(92,195,238,.25);border-radius:999px;background:rgba(2,11,20,.35);box-shadow:0 8px 24px rgba(0,0,0,.36);color:rgba(229,243,251,.78);font-size:clamp(6px,.55vw,10px);letter-spacing:.11em;white-space:nowrap}.status-pill span{width:.7em;height:.7em;border-radius:50%;background:#9fe766;box-shadow:0 0 10px #70ff52;animation:statusPulse 2.6s ease-in-out infinite}.node-code{font-size:clamp(5px,.45vw,8px);letter-spacing:.16em;color:rgba(255,211,127,.48)}@keyframes statusPulse{50%{opacity:.42;box-shadow:0 0 3px #70ff52}}
.pane-body{min-height:0;display:grid;grid-template-columns:minmax(210px,.72fr) minmax(300px,1.38fr);gap:clamp(10px,1.25vw,22px);padding:clamp(10px,1.2vw,21px) 0}.module-grid{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(7px,.8vw,13px)}.module{position:relative;display:grid;place-items:center;align-content:center;gap:.2em;min-width:0;padding:.8em .5em;color:rgba(239,246,252,.9);border:1px solid rgba(99,188,233,.26);border-radius:clamp(8px,.75vw,14px);background:radial-gradient(circle at 50% 0,rgba(77,186,239,.1),transparent 50%),linear-gradient(145deg,rgba(9,24,39,.48),rgba(4,12,22,.35));box-shadow:0 17px 30px rgba(0,0,0,.60),0 5px 7px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.07);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.module::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,205,112,.18),transparent 28%);opacity:.5;pointer-events:none;mix-blend-mode:screen}.module::after{content:"";position:absolute;inset:5px;border:1px solid transparent;border-radius:inherit;transition:border-color .18s ease}.module svg{width:clamp(21px,2vw,36px);height:clamp(21px,2vw,36px);fill:none;stroke:var(--gold-soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 5px 6px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(255,178,52,.22))}.module strong{font-size:clamp(7px,.72vw,13px);letter-spacing:.13em;color:#ffe5ad;text-shadow:0 5px 7px rgba(0,0,0,.86)}.module small{color:rgba(190,216,230,.62);font-size:clamp(6px,.55vw,10px);text-shadow:0 4px 5px rgba(0,0,0,.85)}.module:hover,.module:focus-visible,.module.active{outline:none;transform:translateY(-3px) translateZ(8px);border-color:rgba(255,190,81,.58);background:radial-gradient(circle at 50% 0,rgba(255,188,79,.14),transparent 56%),linear-gradient(145deg,rgba(13,31,48,.62),rgba(6,15,26,.46));box-shadow:0 22px 36px rgba(0,0,0,.66),0 0 20px rgba(255,176,55,.09),inset 0 1px 0 rgba(255,255,255,.1)}.module.active::after{border-color:rgba(255,199,100,.14)}
.content-deck{position:relative;min-height:0;border-left:1px solid rgba(98,188,231,.15);padding-left:clamp(12px,1.5vw,25px);overflow:hidden}.view{position:absolute;inset:0 0 0 clamp(12px,1.5vw,25px);opacity:0;transform:translateX(19px) scale(.995);pointer-events:none;overflow:auto;padding-right:3px;transition:opacity .26s ease,transform .34s cubic-bezier(.2,.75,.2,1);scrollbar-width:thin;scrollbar-color:rgba(74,192,243,.35) transparent}.view.active{opacity:1;transform:none;pointer-events:auto}.view h2{margin:0 0 .55em;max-width:22ch;font-family:Georgia,"Times New Roman",serif;font-weight:500;color:#fff1d1;font-size:clamp(20px,2.08vw,39px);line-height:1.02;text-shadow:0 6px 12px rgba(0,0,0,.6)}.view p{max-width:64ch;color:rgba(222,235,243,.78);font-size:clamp(8px,.77vw,14px);line-height:1.62}.cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(10px,1.2vw,20px)}.primary-cta,.ghost-cta,.micro-back{border-radius:7px;padding:.85em 1.2em;font-size:clamp(7px,.66vw,12px);letter-spacing:.13em;cursor:pointer}.primary-cta{color:#211507;border:1px solid #ffd37d;background:linear-gradient(#ffd88e,#d79434);box-shadow:0 10px 23px rgba(0,0,0,.46),0 0 17px rgba(255,180,58,.2)}.primary-cta:hover{filter:brightness(1.08)}.primary-cta span{margin-left:.9em}.ghost-cta,.micro-back{color:#d9f1fb;border:1px solid rgba(72,190,240,.35);background:rgba(7,22,35,.56);box-shadow:0 9px 21px rgba(0,0,0,.38)}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:clamp(12px,1.65vw,27px)}.feature-strip div,.manifesto-grid div,.spec-card{padding:clamp(8px,1vw,15px);border-top:1px solid rgba(255,191,82,.23);background:linear-gradient(to bottom,rgba(255,180,60,.045),transparent);box-shadow:0 8px 16px rgba(0,0,0,.17)}.feature-strip b,.manifesto-grid b,.spec-card b{display:block;color:#5fd2ff;font-size:clamp(8px,.66vw,11px);letter-spacing:.1em}.feature-strip span,.manifesto-grid span,.spec-card span{display:block;margin-top:.4em;color:#ffe2a6;font-size:clamp(7px,.63vw,11px)}.signal-bar{display:flex;align-items:end;gap:4px;height:20px;margin-top:12px;opacity:.45}.signal-bar span{width:3px;background:#57d4ff;box-shadow:0 0 8px rgba(63,211,255,.5);animation:signal 1.8s ease-in-out infinite}.signal-bar span:nth-child(2){animation-delay:.15s}.signal-bar span:nth-child(3){animation-delay:.3s}.signal-bar span:nth-child(4){animation-delay:.45s}.signal-bar span:nth-child(5){animation-delay:.6s}.signal-bar span:nth-child(6){animation-delay:.75s}.signal-bar span:nth-child(7){animation-delay:.9s}@keyframes signal{0%,100%{height:4px}50%{height:18px}}
.constellation-shell{display:grid;grid-template-columns:minmax(130px,.72fr) minmax(220px,1.28fr);gap:14px;align-items:stretch}.constellation-map{position:relative;min-height:220px;border:1px solid rgba(81,190,238,.18);border-radius:12px;background:radial-gradient(circle at center,rgba(255,188,71,.08),transparent 24%),rgba(3,13,24,.42);box-shadow:inset 0 0 30px rgba(0,0,0,.38),0 12px 25px rgba(0,0,0,.28);overflow:hidden}.orbit{position:absolute;border:1px solid rgba(255,194,87,.18);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-a{width:42%;aspect-ratio:1}.orbit-b{width:68%;aspect-ratio:1}.orbit-c{width:94%;aspect-ratio:1}.core-star{position:absolute;left:50%;top:50%;translate:-50% -50%;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff2b8,#ffb322 45%,rgba(255,171,28,.18) 70%,transparent 72%);color:#271400;font-family:Georgia,serif;font-weight:700;box-shadow:0 0 25px rgba(255,181,44,.42)}.app-node{position:absolute;width:8px;height:8px;border-radius:50%;background:#80dcff;box-shadow:0 0 12px #39c7ff}.node-a{left:31%;top:32%}.node-b{right:19%;top:42%}.node-c{left:23%;bottom:20%}.node-d{right:34%;bottom:16%}.app-list{display:grid;gap:8px}.app-entry{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;padding:10px 11px;border:1px solid rgba(80,188,235,.2);border-radius:9px;background:rgba(3,15,27,.34);box-shadow:0 13px 24px rgba(0,0,0,.41);color:#eaf6fb}.app-entry.featured{cursor:pointer;border-color:rgba(255,193,82,.36);background:linear-gradient(90deg,rgba(255,180,58,.07),rgba(3,15,27,.39))}.app-entry.featured:hover{transform:translateX(2px);border-color:rgba(255,205,112,.62)}.app-index{font-family:Georgia,serif;color:#66d7ff;font-size:clamp(12px,1vw,18px)}.app-entry b{display:block;color:#ffe5ae;font-size:clamp(8px,.75vw,13px)}.app-entry small{display:block;margin-top:2px;color:rgba(184,213,227,.58);font-size:clamp(6px,.54vw,9px)}.app-entry em{font-style:normal;color:#72d8ff;font-size:clamp(6px,.54vw,9px);letter-spacing:.12em}.app-entry.muted{opacity:.7}
.product-head{display:flex;justify-content:space-between;align-items:start;gap:14px}.badge{display:inline-block;color:#ffd98d;font-size:clamp(6px,.52vw,9px);letter-spacing:.15em}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.product-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px}.release-pulse{font-size:clamp(6px,.5vw,9px);letter-spacing:.13em;color:rgba(191,221,234,.65)}.release-pulse i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#ffca61;box-shadow:0 0 11px rgba(255,193,71,.7)}.manifesto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.notice{margin-top:1em;color:rgba(211,229,239,.73);font-size:clamp(8px,.72vw,13px);padding:clamp(11px,1.2vw,19px);border:1px solid rgba(95,192,237,.22);border-radius:10px;background:rgba(4,16,28,.34);box-shadow:0 15px 28px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.04)}.archive-links{display:grid;gap:8px;margin-top:12px}.archive-links a,.policy-card a{color:#8fe4ff;text-decoration:none;font-size:clamp(7px,.65vw,11px);letter-spacing:.08em}.archive-links a{padding:10px;border:1px solid rgba(76,190,238,.19);border-radius:8px;background:rgba(4,16,28,.30)}.archive-links span{float:right}.policy-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:8px;padding:clamp(11px,1.2vw,19px);border:1px solid rgba(95,192,237,.22);border-radius:10px;background:rgba(4,16,28,.34);box-shadow:0 15px 28px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.04)}.policy-card h3{margin:0;color:#ffe8b7;font-size:clamp(12px,1.1vw,19px)}.policy-card p{margin:.45em 0 0}
.pane-footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:clamp(7px,.8vw,12px);border-top:1px solid rgba(92,186,229,.15);color:rgba(161,195,211,.55);font-size:clamp(5px,.48vw,9px);letter-spacing:.13em}.footer-center{color:rgba(255,197,91,.56)}
.foreground-layer{
  z-index:30;pointer-events:none;
  filter:drop-shadow(0 31px 42px rgba(0,0,0,.96)) drop-shadow(0 9px 15px rgba(0,0,0,.88));
  transform:translateZ(70px);overflow:hidden
}
.foreground-layer::before{
  content:"";position:absolute;z-index:2;
  left:var(--frame-hole-left,8.1%);right:var(--frame-hole-right,8.1%);
  top:var(--frame-hole-top,7.8%);bottom:var(--frame-hole-bottom,8.8%);
  border-radius:11%;
  box-shadow:inset 0 0 55px rgba(0,0,0,.86),inset 0 0 18px rgba(0,0,0,.76),0 21px 36px rgba(0,0,0,.42)
}
.foreground-layer img{
  position:absolute;left:50%;top:50%;
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  transform:translate(-50%,-50%);
  display:block;filter:contrast(1.045) brightness(.99);
  transition:width .28s ease,height .28s ease,object-position .28s ease
}
.frame-depth{
  position:absolute;z-index:3;
  left:var(--frame-depth-left,9%);right:var(--frame-depth-right,9%);
  top:var(--frame-depth-top,8.6%);bottom:var(--frame-depth-bottom,9.5%);
  border-radius:10%;
  box-shadow:0 0 0 1px rgba(255,189,75,.08),inset 0 20px 26px rgba(0,0,0,.31),inset 0 -18px 22px rgba(0,0,0,.38);
  mix-blend-mode:multiply
}

/* PHASE 03 — OPTICAL DEPTH / VIEWPORT CLARITY */
.optics-control{
  display:flex;align-items:center;gap:5px;padding:4px 5px 4px 8px;
  border:1px solid rgba(88,195,239,.20);border-radius:999px;
  background:rgba(2,10,19,.28);box-shadow:0 9px 22px rgba(0,0,0,.30);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)
}
.optics-control>span{margin-right:2px;color:rgba(190,222,236,.52);font-size:clamp(5px,.43vw,8px);letter-spacing:.11em;white-space:nowrap}
.optics-btn{
  padding:.35em .62em;border:1px solid rgba(95,198,239,.18);border-radius:999px;
  background:rgba(8,24,37,.30);color:rgba(209,234,244,.68);
  font-size:clamp(5px,.43vw,8px);letter-spacing:.10em;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease
}
.optics-btn:hover,.optics-btn:focus-visible{outline:none;border-color:rgba(255,200,102,.48);color:#ffe4ab}
.optics-btn.active{color:#251706;background:linear-gradient(#ffe09b,#d99a3e);border-color:#ffd47c;box-shadow:0 0 12px rgba(255,186,66,.18)}

.app-stage[data-clarity="clear"] .glass-pane{
  background:linear-gradient(135deg,rgba(11,26,43,.31),rgba(3,11,22,.18)),radial-gradient(circle at 85% 15%,rgba(41,159,222,.07),transparent 29%);
  backdrop-filter:blur(6px) saturate(1.06);-webkit-backdrop-filter:blur(6px) saturate(1.06)
}
.app-stage[data-clarity="focus"] .glass-pane{
  background:linear-gradient(135deg,rgba(10,25,42,.54),rgba(3,11,22,.42)),radial-gradient(circle at 85% 15%,rgba(41,159,222,.10),transparent 29%);
  backdrop-filter:blur(11px) saturate(1.12);-webkit-backdrop-filter:blur(11px) saturate(1.12)
}
.app-stage[data-clarity="focus"] .module{
  background:radial-gradient(circle at 50% 0,rgba(77,186,239,.10),transparent 50%),linear-gradient(145deg,rgba(9,24,39,.68),rgba(4,12,22,.56))
}
.app-stage[data-clarity="focus"] .notice,
.app-stage[data-clarity="focus"] .policy-card{background:rgba(4,16,28,.52)}
.app-stage[data-clarity="focus"] .app-entry{background:rgba(3,15,27,.54)}

.glass-pane{transition:background .28s ease,backdrop-filter .28s ease,-webkit-backdrop-filter .28s ease,box-shadow .28s ease}
.module,.notice,.policy-card,.app-entry{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease,transform .18s ease}

/* a faint glass refraction edge that helps the pane remain physically present without hiding the galaxy */
.glass-pane .pane-header,
.glass-pane .pane-footer{filter:drop-shadow(0 5px 7px rgba(0,0,0,.38))}
.content-deck{filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}

/* PHASE 04 — ADAPTIVE COMPOSITOR
   Artwork is never stretched. Each layer uses proportional cover/contain behavior,
   while the functional pane reflows independently inside a calculated safe area. */

.adaptive-readout{
  display:flex;align-items:center;gap:6px;
  color:rgba(173,218,237,.47);font-size:clamp(5px,.43vw,8px);letter-spacing:.12em
}
.adaptive-readout span{
  width:5px;height:5px;border-radius:50%;background:#5ed5ff;box-shadow:0 0 9px rgba(60,205,255,.8)
}
.app-stage[data-layout="ultrawide"]{
  --safe-x:max(14vw,calc((100vw - 1500px)/2 + 150px));
  --safe-top:8.8vh;--safe-bottom:10vh
}
.app-stage[data-layout="wide"]{
  --safe-x:13.6vw;--safe-top:8.4vh;--safe-bottom:9.5vh
}
.app-stage[data-layout="standard"]{
  --safe-x:11.8vw;--safe-top:8.8vh;--safe-bottom:10vh
}
.app-stage[data-layout="compact"]{
  --safe-x:7.2vw;--safe-top:9.5vh;--safe-bottom:10.5vh
}
.app-stage[data-layout="portrait"]{
  --safe-x:4.7vw;--safe-top:8.5vh;--safe-bottom:8vh
}

/* Landscape artwork uses cover: proportional crop at the outer metal, never distortion. */
.app-stage[data-layout="ultrawide"] .foreground-layer img,
.app-stage[data-layout="wide"] .foreground-layer img,
.app-stage[data-layout="standard"] .foreground-layer img,
.app-stage[data-layout="compact"] .foreground-layer img{
  object-fit:cover
}

/* On very wide monitors, expose slightly more of the frame vertically. */
.app-stage[data-layout="ultrawide"] .foreground-layer img{width:100%;height:112%}
.app-stage[data-layout="ultrawide"] .background-layer img{width:106%;height:106%}

/* Compact landscape gives the UI more room while keeping frame as a distinct crop layer. */
.app-stage[data-layout="compact"] .interface-layer{padding-left:var(--safe-x);padding-right:var(--safe-x)}
.app-stage[data-layout="compact"] .pane-body{grid-template-columns:minmax(165px,.62fr) minmax(260px,1.38fr)}
.app-stage[data-layout="compact"] .tagline{max-width:38ch}
.app-stage[data-layout="compact"] .module-grid{gap:6px}

/* Portrait mode deliberately crops the OUTER frame rails rather than stretching them.
   The cosmic layer still fills the screen independently; the pane becomes the mobile cockpit. */
.app-stage[data-layout="portrait"] .foreground-layer img{
  object-fit:cover;object-position:center center;opacity:.96
}
.app-stage[data-layout="portrait"] .foreground-layer::before,
.app-stage[data-layout="portrait"] .frame-depth{
  left:3.5vw;right:3.5vw;top:7vh;bottom:7vh;border-radius:8vw
}
.app-stage[data-layout="portrait"] .interface-layer{
  padding:var(--safe-top) var(--safe-x) var(--safe-bottom)
}
.app-stage[data-layout="portrait"] .glass-pane{
  overflow:auto;border-radius:18px;padding:clamp(12px,3.2vw,20px)
}
.app-stage[data-layout="portrait"] .pane-header{
  align-items:flex-start;gap:10px
}
.app-stage[data-layout="portrait"] .brand-block h1{
  font-size:clamp(25px,8.4vw,40px)
}
.app-stage[data-layout="portrait"] .brand-block h1 span{
  font-size:.38em;letter-spacing:.25em
}
.app-stage[data-layout="portrait"] .tagline{
  font-size:clamp(10px,2.8vw,13px);max-width:38ch
}
.app-stage[data-layout="portrait"] .status-stack{display:none}
.app-stage[data-layout="portrait"] .pane-body{
  grid-template-columns:1fr;gap:12px;padding:12px 0
}
.app-stage[data-layout="portrait"] .module-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:7px
}
.app-stage[data-layout="portrait"] .module{
  min-height:76px;padding:8px 4px
}
.app-stage[data-layout="portrait"] .module svg{
  width:clamp(22px,7vw,30px);height:clamp(22px,7vw,30px)
}
.app-stage[data-layout="portrait"] .module strong{
  font-size:clamp(8px,2.5vw,11px)
}
.app-stage[data-layout="portrait"] .module small{
  font-size:clamp(7px,2.1vw,9px)
}
.app-stage[data-layout="portrait"] .content-deck{
  border-left:0;border-top:1px solid rgba(98,188,231,.15);
  padding:14px 0 0;min-height:390px
}
.app-stage[data-layout="portrait"] .view{
  inset:14px 0 0 0;padding-right:4px
}
.app-stage[data-layout="portrait"] .view h2{
  font-size:clamp(24px,7vw,36px)
}
.app-stage[data-layout="portrait"] .view p{
  font-size:clamp(11px,3vw,14px)
}
.app-stage[data-layout="portrait"] .feature-strip{
  grid-template-columns:1fr;gap:5px
}
.app-stage[data-layout="portrait"] .constellation-shell{grid-template-columns:1fr}
.app-stage[data-layout="portrait"] .constellation-map{display:none}
.app-stage[data-layout="portrait"] .manifesto-grid{grid-template-columns:1fr}
.app-stage[data-layout="portrait"] .product-grid{grid-template-columns:1fr 1fr}
.app-stage[data-layout="portrait"] .policy-card{grid-template-columns:1fr}
.app-stage[data-layout="portrait"] .footer-center{display:none}
.app-stage[data-layout="portrait"] .pane-footer{
  font-size:clamp(6px,1.9vw,8px)
}

/* Short laptop windows: preserve the frame, compress UI vertically before allowing any clipping. */
@media(max-height:720px) and (min-aspect-ratio:11/10){
  .app-stage{--safe-top:6.5vh;--safe-bottom:7.2vh}
  .glass-pane{padding:clamp(9px,1.15vw,17px)}
  .pane-body{padding:8px 0;gap:10px}
  .pane-header{padding-bottom:7px}
  .tagline{margin-top:.45em}
  .module{padding:.55em .4em}
  .feature-strip{margin-top:9px}
  .view p{line-height:1.48}
}

/* Tiny phones get a little more vertical canvas; only content scrolls, graphics remain independent. */
@media(max-width:420px){
  body{overflow:hidden}
  .app-stage[data-layout="portrait"]{min-height:100svh}
  .app-stage[data-layout="portrait"] .interface-layer{padding-top:7.5vh;padding-bottom:6.5vh}
  .app-stage[data-layout="portrait"] .module small{display:none}
  .app-stage[data-layout="portrait"] .product-grid{grid-template-columns:1fr}
}


/* PHASE 05 — COMPANY HUB + APPLICATION CONSTELLATION */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}
.view-kicker{
  color:rgba(138,211,242,.58);font-size:clamp(7px,.58vw,10px);letter-spacing:.20em;
  text-transform:uppercase;margin-bottom:.7em
}
.lede{max-width:68ch;font-size:clamp(12px,.95vw,16px)!important;line-height:1.65!important;color:rgba(225,239,245,.82)!important}
.hero-actions,.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.cta{
  border:1px solid rgba(111,204,242,.22);border-radius:8px;padding:.8em 1.05em;
  background:rgba(5,17,29,.34);color:#dceef5;font:inherit;font-size:clamp(8px,.62vw,11px);
  letter-spacing:.11em;cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.32);
  transition:transform .18s ease,border-color .18s ease,background .18s ease
}
.cta:hover,.cta:focus-visible{transform:translateY(-2px);border-color:rgba(255,202,107,.55);outline:none}
.cta.primary{background:linear-gradient(180deg,rgba(255,214,126,.96),rgba(194,129,42,.94));border-color:#ffd886;color:#251706}
.cta.ghost{background:rgba(5,17,29,.24)}
.text-link,.app-open,.back-link,.policy-action{
  border:0;background:transparent;color:#f2c870;font:inherit;font-size:clamp(8px,.62vw,11px);
  letter-spacing:.08em;cursor:pointer;padding:0;text-align:left
}
.text-link:hover,.app-open:hover,.back-link:hover,.policy-action:hover{color:#ffe6ad}
.text-link:focus-visible,.app-open:focus-visible,.back-link:focus-visible,.policy-action:focus-visible{outline:1px solid #ffd886;outline-offset:4px}

.home-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px
}
.signal-card{
  border:1px solid rgba(90,190,233,.16);border-radius:10px;padding:13px;
  background:linear-gradient(145deg,rgba(3,15,27,.30),rgba(6,20,34,.22));
  box-shadow:0 14px 25px rgba(0,0,0,.30)
}
.signal-card strong{display:block;margin:.3em 0;color:#f4e3b5;font-size:clamp(11px,.9vw,15px)}
.signal-card p{margin:.35em 0!important}
.signal-label{font-size:clamp(6px,.48vw,8px);letter-spacing:.18em;color:rgba(118,205,242,.55)}

.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.catalog-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.catalog-search input,.catalog-controls select{
  max-width:200px;border:1px solid rgba(99,196,236,.20);border-radius:7px;
  background:rgba(3,15,27,.35);color:#dcecf3;padding:.6em .75em;font:inherit;
  font-size:clamp(8px,.62vw,11px);outline:none
}
.catalog-search input:focus,.catalog-controls select:focus{border-color:rgba(255,204,111,.55)}
.catalog-controls option{background:#07121e;color:#e5f0f5}

.app-catalog{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px
}
.app-card{
  position:relative;display:flex;flex-direction:column;min-height:170px;padding:14px;
  border:1px solid rgba(90,190,233,.17);border-radius:11px;
  background:linear-gradient(145deg,rgba(5,18,31,.39),rgba(3,12,22,.27));
  box-shadow:0 17px 30px rgba(0,0,0,.44);overflow:hidden
}
.app-card::after{
  content:"";position:absolute;right:-30px;top:-40px;width:110px;height:110px;border-radius:50%;
  border:1px solid rgba(76,195,240,.07);box-shadow:0 0 28px rgba(63,192,238,.04)
}
.app-card.featured{border-color:rgba(255,196,84,.24)}
.app-card h3{margin:.55em 0 .25em;color:#f6dfaa;font-size:clamp(12px,1.02vw,17px)}
.app-card p{margin:0!important;max-width:48ch}
.app-card-topline{display:flex;align-items:center;gap:6px;color:rgba(185,220,235,.52);font-size:clamp(6px,.46vw,8px);letter-spacing:.12em}
.app-card-topline b{margin-left:auto;color:rgba(255,208,116,.54);font-weight:500}
.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.status-dot.live{background:#7ee5b1;box-shadow:0 0 8px rgba(126,229,177,.65)}
.status-dot.dev{background:#69ccf3;box-shadow:0 0 8px rgba(105,204,243,.55)}
.status-dot.future{background:#c99f59;box-shadow:0 0 8px rgba(201,159,89,.35)}
.app-tags{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 12px}
.app-tags span,.detail-pill{
  border:1px solid rgba(104,191,228,.15);border-radius:999px;padding:.35em .62em;
  background:rgba(5,18,31,.25);color:rgba(194,224,236,.62);font-size:clamp(6px,.46vw,8px);letter-spacing:.08em
}
.app-open{margin-top:auto}
.app-open.disabled{color:rgba(183,205,215,.28);cursor:not-allowed}
.empty-slot{border-style:dashed;opacity:.80}
.catalog-empty{
  margin-top:12px;padding:18px;border:1px dashed rgba(104,191,228,.20);border-radius:10px;
  text-align:center;color:rgba(194,224,236,.55)
}

.back-link{margin-bottom:12px}
.app-detail-shell{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1.58fr);gap:18px;align-items:center}
.app-detail-orbit{position:relative;aspect-ratio:1;max-width:220px;margin:auto;width:100%}
.orbit-core{
  position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,#fff1b5,#e2a43d 35%,rgba(186,107,16,.36) 66%,transparent 70%);
  box-shadow:0 0 35px rgba(255,183,66,.28)
}
.orbit-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(98,198,239,.20);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}
.ring-a{width:68%;height:42%}.ring-b{width:90%;height:58%;transform:translate(-50%,-50%) rotate(33deg);border-color:rgba(255,195,82,.15)}
.orbit-node{position:absolute;width:7px;height:7px;border-radius:50%;background:#79d4f6;box-shadow:0 0 11px rgba(87,201,245,.72)}
.n1{left:20%;top:40%}.n2{right:12%;bottom:34%;background:#f2c16f}
.detail-status-row{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.detail-grid article{
  border:1px solid rgba(88,188,230,.14);border-radius:9px;padding:10px;background:rgba(3,15,27,.26)
}
.detail-grid article>span{
  color:rgba(121,205,240,.56);font-size:clamp(6px,.46vw,8px);letter-spacing:.15em
}
.detail-grid article p{margin:.45em 0 0!important}

.manifesto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:15px}
.manifesto-grid article{
  border:1px solid rgba(89,190,232,.15);border-radius:9px;padding:12px;background:rgba(3,15,27,.26);
  box-shadow:0 12px 23px rgba(0,0,0,.29)
}
.manifesto-grid article>span{font-size:clamp(6px,.46vw,8px);letter-spacing:.14em;color:rgba(113,204,242,.52)}
.manifesto-grid h3{margin:.55em 0 .3em;color:#f3deb0;font-size:clamp(11px,.86vw,14px)}
.company-record{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:12px;
  border:1px solid rgba(87,182,222,.13);border-radius:9px;overflow:hidden
}
.company-record div{padding:10px;background:rgba(3,15,27,.25)}
.company-record span{display:block;font-size:clamp(6px,.46vw,8px);letter-spacing:.13em;color:rgba(117,201,236,.50)}
.company-record b{display:block;margin-top:4px;color:rgba(234,240,238,.76);font-size:clamp(8px,.65vw,11px);font-weight:500}

.support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.support-card{
  border:1px solid rgba(87,187,228,.15);border-radius:10px;padding:13px;background:rgba(3,15,27,.27)
}
.support-icon{
  width:30px;height:30px;border:1px solid rgba(109,203,241,.25);border-radius:50%;display:grid;place-items:center;
  color:#f3ca7d;background:rgba(4,20,34,.34);box-shadow:0 8px 18px rgba(0,0,0,.28)
}
.support-card h3{margin:.65em 0 .25em;color:#f2ddb0;font-size:clamp(10px,.82vw,14px)}
.support-card>span{display:block;margin-top:8px;color:rgba(117,201,236,.42);font-size:clamp(6px,.44vw,8px);letter-spacing:.14em}

.legal-directory{display:grid;gap:7px;margin-top:14px}
.policy-row{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 12px;border:1px solid rgba(87,187,228,.14);border-radius:9px;
  background:rgba(3,15,27,.26);color:#e3edf1;font:inherit;text-align:left
}
button.policy-row{cursor:pointer}
button.policy-row:hover{border-color:rgba(255,197,89,.34)}
.policy-row span b{display:block;font-size:clamp(8px,.66vw,11px);letter-spacing:.08em;color:#f1d9a6}
.policy-row span small{display:block;margin-top:3px;color:rgba(188,216,227,.52);font-size:clamp(7px,.54vw,9px)}
.policy-row em{font-style:normal;color:rgba(117,201,236,.48);font-size:clamp(6px,.45vw,8px);letter-spacing:.11em}
.policy-row.static{opacity:.72}

.privacy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.policy-state{
  display:inline-block;border:1px solid rgba(255,196,78,.24);border-radius:999px;padding:.35em .6em;
  font-size:clamp(6px,.44vw,8px);letter-spacing:.12em;color:#f0c777
}
.policy-state.staged{border-color:rgba(91,190,231,.22);color:#8ed4ef}
.policy-card h3{margin:.65em 0 .25em;color:#f2ddb0;font-size:clamp(11px,.88vw,15px)}
.policy-card{display:flex!important;flex-direction:column;justify-content:space-between}
.policy-action.muted{color:rgba(179,207,218,.32)}

.notice.warning{border-color:rgba(255,188,76,.19);background:rgba(44,27,8,.17)}

@media(max-width:960px) and (min-aspect-ratio:1/1){
  .app-catalog{grid-template-columns:1fr 1fr}
  .manifesto-grid,.support-grid{grid-template-columns:1fr 1fr}
  .manifesto-grid article:last-child,.support-grid article:last-child{grid-column:1/-1}
}
.app-stage[data-layout="portrait"] .home-grid,
.app-stage[data-layout="portrait"] .app-catalog,
.app-stage[data-layout="portrait"] .manifesto-grid,
.app-stage[data-layout="portrait"] .support-grid,
.app-stage[data-layout="portrait"] .privacy-grid,
.app-stage[data-layout="portrait"] .detail-grid,
.app-stage[data-layout="portrait"] .company-record{
  grid-template-columns:1fr
}
.app-stage[data-layout="portrait"] .section-heading-row{display:block}
.app-stage[data-layout="portrait"] .catalog-controls{justify-content:flex-start;margin-top:9px}
.app-stage[data-layout="portrait"] .catalog-search input{max-width:none;width:100%}
.app-stage[data-layout="portrait"] .app-detail-shell{grid-template-columns:1fr}
.app-stage[data-layout="portrait"] .app-detail-orbit{max-width:140px}
.app-stage[data-layout="portrait"] .hero-actions{gap:6px}
.app-stage[data-layout="portrait"] .cta{flex:1 1 auto;text-align:center}


/* PHASE 06 — PRODUCT RELEASE GATE */
.product-hero{display:grid;grid-template-columns:minmax(150px,.48fr) minmax(0,1.52fr);gap:18px;align-items:center;margin-top:4px}.product-visual{position:relative;min-height:210px;display:grid;place-items:center;border:1px solid rgba(85,184,225,.13);border-radius:14px;background:radial-gradient(circle at 50% 45%,rgba(250,185,69,.09),transparent 30%),linear-gradient(145deg,rgba(4,16,29,.28),rgba(2,10,18,.18));box-shadow:0 18px 34px rgba(0,0,0,.32)}.product-sigil{position:absolute;bottom:11px;left:0;right:0;text-align:center;color:rgba(115,199,234,.40);font-size:clamp(6px,.46vw,8px);letter-spacing:.16em}.release-gate{margin-top:13px;border:1px solid rgba(255,193,78,.17);border-radius:11px;background:linear-gradient(145deg,rgba(31,20,7,.20),rgba(3,14,25,.25));padding:12px;box-shadow:0 13px 25px rgba(0,0,0,.28)}.release-gate-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.release-gate-head h3{margin:.15em 0 0;color:#efdcaf;font-size:clamp(11px,.9vw,15px)}.gate-badge{border:1px solid rgba(255,192,72,.25);border-radius:999px;padding:.5em .7em;color:#efc66f;font-size:clamp(6px,.48vw,8px);letter-spacing:.12em;white-space:nowrap}.gate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}.gate-item{display:grid;grid-template-columns:auto 1fr;column-gap:7px;row-gap:1px;align-items:center;padding:8px;border:1px solid rgba(92,186,227,.11);border-radius:8px;background:rgba(3,13,24,.20)}.gate-item b{font-size:clamp(7px,.56vw,9px);color:rgba(230,238,240,.75);font-weight:500}.gate-item small{grid-column:2;color:rgba(179,209,221,.43);font-size:clamp(6px,.45vw,8px)}.gate-light{width:7px;height:7px;border-radius:50%}.gate-light.ready{background:#79dfad;box-shadow:0 0 8px rgba(121,223,173,.60)}.gate-light.pending{background:#e7b85d;box-shadow:0 0 8px rgba(231,184,93,.40)}.detail-grid.expanded{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:9px}.product-meta-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:10px;border:1px solid rgba(86,181,222,.12);border-radius:9px;overflow:hidden}.product-meta-band div{padding:9px;background:rgba(3,14,25,.23)}.product-meta-band span{display:block;color:rgba(109,197,234,.46);font-size:clamp(6px,.45vw,8px);letter-spacing:.13em}.product-meta-band b{display:block;margin-top:4px;color:rgba(235,239,236,.73);font-size:clamp(8px,.62vw,10px);font-weight:500}.policy-url-preview{margin-top:10px;padding:8px;border:1px solid rgba(84,181,222,.13);border-radius:8px;background:rgba(2,11,20,.24)}.policy-url-preview span{display:block;color:rgba(108,196,232,.43);font-size:clamp(6px,.44vw,8px);letter-spacing:.14em}.policy-url-preview code{display:block;margin-top:5px;white-space:normal;overflow-wrap:anywhere;color:rgba(235,224,190,.77);font-size:clamp(8px,.62vw,10px)}.audit-matrix{margin-top:11px;border:1px solid rgba(89,184,224,.13);border-radius:11px;padding:12px;background:rgba(3,14,24,.23);box-shadow:0 12px 23px rgba(0,0,0,.25)}.audit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.audit-head h3{margin:.15em 0 0;color:#efdbae;font-size:clamp(10px,.82vw,14px)}.audit-count{color:rgba(232,188,99,.58);font-size:clamp(6px,.46vw,8px);letter-spacing:.11em;white-space:nowrap}.audit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:9px}.audit-row{display:grid;grid-template-columns:auto 1fr;column-gap:7px;row-gap:1px;padding:8px;border:1px solid rgba(84,181,222,.10);border-radius:7px;background:rgba(2,11,20,.19)}.audit-box{width:10px;height:10px;border:1px solid rgba(235,190,98,.34);border-radius:2px;margin-top:1px}.audit-row b{font-size:clamp(7px,.58vw,10px);font-weight:500;color:rgba(226,236,239,.73)}.audit-row small{grid-column:2;font-size:clamp(6px,.47vw,8px);color:rgba(180,209,221,.42)}.primary-policy{border-color:rgba(255,190,72,.18)!important}.app-stage[data-layout="portrait"] .product-hero,.app-stage[data-layout="portrait"] .detail-grid.expanded,.app-stage[data-layout="portrait"] .product-meta-band,.app-stage[data-layout="portrait"] .gate-grid,.app-stage[data-layout="portrait"] .audit-grid{grid-template-columns:1fr}.app-stage[data-layout="portrait"] .product-visual{min-height:155px}.app-stage[data-layout="portrait"] .release-gate-head,.app-stage[data-layout="portrait"] .audit-head{align-items:flex-start;flex-direction:column}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* PHASE 07 — LIVING STARSHIP POLISH */
.app-stage{--react-x:0;--react-y:0}

/* Ambient HUD motion — intentionally slow and low-opacity. */
.ambient-fx{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.scanline{position:absolute;left:0;right:0;top:-20%;height:14%;background:linear-gradient(to bottom,transparent,rgba(112,209,246,.015),rgba(112,209,246,.045),rgba(112,209,246,.012),transparent);animation:p7ScanDrift 12s linear infinite}
.radar-sweep{position:absolute;width:min(58vw,760px);aspect-ratio:1;right:-20%;top:-28%;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 82%,rgba(93,201,244,.06) 88%,rgba(93,201,244,.012) 94%,transparent 100%);animation:p7RadarRotate 19s linear infinite;opacity:.38}
.pulse-ring{position:absolute;border:1px solid rgba(89,201,245,.07);border-radius:50%;animation:p7PulseOut 7.4s ease-out infinite}
.pulse-a{width:18vw;aspect-ratio:1;left:7%;bottom:13%}
.pulse-b{width:13vw;aspect-ratio:1;right:10%;top:16%;animation-delay:2.9s;border-color:rgba(244,188,80,.06)}
.signal-speck{position:absolute;width:3px;height:3px;border-radius:50%;background:#9edfff;box-shadow:0 0 8px rgba(104,207,246,.65);opacity:.2;animation:p7SignalBlink 5.6s ease-in-out infinite}
.s1{left:18%;top:27%}.s2{right:23%;top:40%;animation-delay:1.7s}.s3{left:32%;bottom:18%;animation-delay:3.2s;background:#f5ca7a}
@keyframes p7ScanDrift{to{transform:translateY(860%)}}
@keyframes p7RadarRotate{to{transform:rotate(360deg)}}
@keyframes p7PulseOut{0%{transform:scale(.64);opacity:0}18%{opacity:.3}70%,100%{transform:scale(1.35);opacity:0}}
@keyframes p7SignalBlink{0%,72%,100%{opacity:.1;transform:scale(.75)}78%{opacity:.7;transform:scale(1.4)}83%{opacity:.2;transform:scale(.9)}88%{opacity:.58}}

/* Foreground starship hardware gains reactive illumination without moving or warping. */
.foreground-layer{transition:filter var(--motion-med) ease}
.foreground-layer::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--react-x)*18%) calc(50% + var(--react-y)*14%),rgba(116,210,248,.06),transparent 28%),linear-gradient(115deg,transparent 18%,rgba(255,206,114,.016) 38%,transparent 54%);mix-blend-mode:screen;opacity:.68}

/* Glass refraction sweep sits behind real UI content. */
.glass-pane{isolation:isolate}
.glass-pane::after{inset:-18%;background:linear-gradient(112deg,transparent 31%,rgba(255,255,255,.034) 44%,rgba(128,214,248,.023) 48%,transparent 57%);transform:translateX(-48%);animation:p7GlassGlint 14s ease-in-out infinite;z-index:0}
.glass-pane>*{position:relative;z-index:1}
@keyframes p7GlassGlint{0%,18%{transform:translateX(-48%)}58%,100%{transform:translateX(62%)}}

/* Routed content behaves like a system switching panes, not a generic webpage. */
.view{filter:blur(1.1px);transform:translateX(18px) translateY(4px) scale(.996);transition:opacity 260ms ease,transform 360ms cubic-bezier(.18,.75,.22,1),filter 260ms ease}
.view.active{filter:none;transform:none}

/* Control hardware keeps the Phase 3/4 depth but adds tactile press behavior. */
.module{will-change:transform,box-shadow,border-color}
.module:active{transform:translateY(1px) translateZ(2px) scale(.985);box-shadow:0 9px 16px rgba(0,0,0,.48),inset 0 2px 7px rgba(0,0,0,.34)}
.module.active::after{border-color:rgba(255,199,100,.23);box-shadow:inset 0 -1px 0 rgba(255,198,91,.15),0 0 10px rgba(255,179,54,.05)}
.module svg{transition:transform var(--motion-fast) ease,filter var(--motion-fast) ease}
.module:hover svg,.module:focus-visible svg{transform:scale(1.07);filter:drop-shadow(0 5px 7px rgba(0,0,0,.62)) drop-shadow(0 0 9px rgba(255,178,52,.28))}

/* Cards remain calm, but lift enough to cast a readable shadow onto the pane. */
.app-card,.signal-card,.support-card,.policy-card,.release-gate,.audit-matrix{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.app-card:not(.empty-slot):hover,.signal-card:hover,.support-card:hover,.policy-card:hover{transform:translateY(-2px);border-color:rgba(99,195,234,.27);box-shadow:0 21px 34px rgba(0,0,0,.48)}

/* Short illumination sweep across true action controls. */
.cta,.app-open,button.policy-action{position:relative;overflow:hidden}
.cta::after,.app-open::after,button.policy-action::after{content:"";position:absolute;left:-50%;top:0;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-16deg);opacity:0;pointer-events:none}
.cta:hover::after,.app-open:hover::after,button.policy-action:hover::after{animation:p7ControlSweep .78s ease}
@keyframes p7ControlSweep{0%{left:-50%;opacity:0}25%{opacity:.6}100%{left:120%;opacity:0}}

/* System heartbeat. */
.status-pill span,.adaptive-readout span,.toast-dot{animation:p7NominalPulse 2.9s ease-in-out infinite}
@keyframes p7NominalPulse{0%,100%{opacity:.52}50%{opacity:1;box-shadow:0 0 12px rgba(89,211,255,.72)}}

/* Ship routing veil. */
.system-transition{position:absolute;inset:0;z-index:80;pointer-events:none;opacity:0;display:grid;place-items:center;background:linear-gradient(90deg,transparent,rgba(2,11,20,.08),transparent)}
.system-transition.active{animation:p7RouteVeil .48s ease}
.transition-line{position:absolute;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(106,205,246,.15),#f0c374,rgba(106,205,246,.15),transparent);box-shadow:0 0 12px rgba(106,205,246,.14);transform:scaleX(0)}
.system-transition.active .transition-line{animation:p7RouteLine .44s ease}
.transition-label{color:rgba(196,224,235,.33);font-size:clamp(6px,.5vw,9px);letter-spacing:.2em;transform:translateY(16px)}
@keyframes p7RouteVeil{0%,100%{opacity:0}35%,65%{opacity:1}}
@keyframes p7RouteLine{0%{transform:scaleX(0);opacity:0}30%{opacity:1}65%{transform:scaleX(1)}100%{transform:scaleX(.15);opacity:0}}

/* Persistent low-key bridge status node. */
.system-toast{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,24px);z-index:70;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(86,189,231,.16);border-radius:999px;background:rgba(3,12,22,.40);backdrop-filter:blur(8px);box-shadow:0 12px 26px rgba(0,0,0,.35);color:rgba(190,221,233,.48);font-size:clamp(6px,.48vw,8px);letter-spacing:.12em;opacity:.72;transition:opacity .2s ease,transform .2s ease,border-color .2s ease,color .2s ease}
.system-toast.pop{opacity:1;transform:translateY(-3px);border-color:rgba(247,196,96,.28);color:rgba(238,221,180,.75)}
.toast-dot{width:6px;height:6px;border-radius:50%;background:#66cff5}

/* The galaxy stays deliberately slower than the midglass. */
.background-layer img{will-change:transform;transition:transform 800ms cubic-bezier(.18,.75,.22,1)}

.app-stage[data-layout="portrait"] .radar-sweep{width:92vw;right:-44%;top:-10%;opacity:.22}
.app-stage[data-layout="portrait"] .system-toast{left:50%;right:auto;transform:translateX(-50%);bottom:10px;white-space:nowrap}
.app-stage[data-layout="portrait"] .system-toast.pop{transform:translateX(-50%) translateY(-2px)}

/* Existing Phase 6 reduced-motion blanket remains the final accessibility authority. */
@media(prefers-reduced-motion:reduce){.ambient-fx,.system-transition{display:none!important}.glass-pane::after,.status-pill span,.adaptive-readout span,.toast-dot{animation:none!important}.foreground-layer::after{opacity:.18}.system-toast{transition:none!important}}


/* PHASE 08 — MENU STABILIZATION + PRODUCTION HARDENING */
.glass-pane{grid-template-rows:auto minmax(clamp(280px,43vh,470px),1fr) auto}
.pane-body{height:100%;min-height:clamp(280px,43vh,470px);align-self:stretch;align-items:stretch;overflow:hidden}
.module-grid{height:100%;min-height:100%;align-self:stretch;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(84px,1fr));align-content:stretch}
.module{min-height:84px;overflow:hidden;grid-template-rows:auto auto auto;align-content:center;justify-items:center;line-height:1.05}
.module svg{flex:none;max-width:40px;max-height:40px}
.module strong,.module small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.content-deck{height:100%;min-height:100%;align-self:stretch}
.view{top:0;right:0;bottom:0;min-height:0}
.app-stage[data-nav-density="compact"] .module-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(76px,1fr))}
.app-stage[data-nav-density="compact"] .module{min-height:76px;padding:.62em .35em}
.app-stage[data-nav-density="compact"] .module svg{width:clamp(19px,1.7vw,29px);height:clamp(19px,1.7vw,29px)}
.app-stage[data-nav-density="compact"] .module small{font-size:clamp(5px,.47vw,8px)}
.app-stage[data-nav-density="dock"] .pane-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:9px}
.app-stage[data-nav-density="dock"] .module-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(70px,auto);min-height:70px;height:auto}
.app-stage[data-nav-density="dock"] .module{min-height:70px;padding:.45em .25em}
.app-stage[data-nav-density="dock"] .module svg{width:20px;height:20px}
.app-stage[data-nav-density="dock"] .module strong{font-size:clamp(6px,.54vw,9px)}
.app-stage[data-nav-density="dock"] .module small{display:none}
.app-stage[data-nav-density="dock"] .content-deck{border-left:0;border-top:1px solid rgba(98,188,231,.15);padding-left:0;padding-top:10px}
.app-stage[data-nav-density="dock"] .view{left:0;top:10px}
.app-stage[data-layout="wide"] .pane-body,.app-stage[data-layout="standard"] .pane-body,.app-stage[data-layout="ultrawide"] .pane-body{grid-template-columns:minmax(230px,.72fr) minmax(360px,1.38fr)}
.app-stage[data-layout="compact"] .pane-body{grid-template-columns:minmax(210px,.66fr) minmax(290px,1.34fr)}
.app-stage[data-layout="portrait"] .glass-pane{grid-template-rows:auto auto minmax(390px,1fr) auto}
.app-stage[data-layout="portrait"] .pane-body{min-height:0;height:auto;overflow:visible}
.app-stage[data-layout="portrait"] .module-grid{height:auto;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(78px,auto))}
.app-stage[data-layout="portrait"] .content-deck{min-height:390px;height:auto}
@media(max-height:720px) and (min-aspect-ratio:11/10){.glass-pane{grid-template-rows:auto minmax(245px,1fr) auto}.pane-body{min-height:245px}.module-grid{grid-template-rows:repeat(3,minmax(70px,1fr))}.module{min-height:70px;padding:.5em .35em}.module svg{width:clamp(18px,1.6vw,27px);height:clamp(18px,1.6vw,27px)}}
@media(max-height:590px) and (min-aspect-ratio:11/10){.glass-pane{grid-template-rows:auto minmax(220px,1fr) auto}.pane-body{min-height:220px}}
.module:focus-visible,.cta:focus-visible,.app-open:focus-visible,.policy-row:focus-visible,.optics-btn:focus-visible{outline:2px solid rgba(255,210,126,.72);outline-offset:2px}
.module-grid,.status-stack,.pane-footer{user-select:none}


/* =====================================================================
   PHASE 09 — COMMAND CORE CENTERING / COCKPIT REBALANCE
   Phase 8 fixed the collapsing geometry; Phase 9 recenters the functional
   mass so the interface sits like a command core rather than hugging edges.
   ===================================================================== */

/* The pane gets a centered internal chassis. */
.glass-pane{
  width:min(100%, 1360px);
  margin-inline:auto;
}

.pane-header{
  display:grid;
  grid-template-columns:minmax(300px,1fr) auto;
  align-items:end;
  gap:24px;
  width:100%;
}

.brand-block{
  justify-self:start;
}

.status-stack{
  justify-self:end;
  align-self:center;
}

/* Center the working mass inside the glass pane. */
.pane-body{
  width:min(100%, 1180px);
  margin-inline:auto;
  justify-content:center;
  align-items:stretch;
  column-gap:18px;
}

/* Content deck becomes a real centered stage. */
.content-deck{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:4px;
}

.view{
  width:min(100%, 760px);
  margin-inline:auto;
}

.view.active{
  display:block;
}

/* Restore centered content composition for the home/state views. */
#view-home,
#view-about,
#view-apps,
#view-app-detail,
#view-support,
#view-legal,
#view-privacy{
  max-width:760px;
  margin-inline:auto;
}

/* Feature strips, cards, and grids should visually center rather than stretching awkwardly. */
.feature-strip,
.home-grid,
.app-catalog,
.manifesto-grid,
.support-grid,
.privacy-grid,
.detail-grid,
.detail-grid.expanded,
.audit-grid,
.company-record,
.product-meta-band{
  width:100%;
}

.hero-actions,
.detail-actions{
  justify-content:flex-start;
}

.section-heading-row{
  align-items:flex-end;
}

.section-heading-row > div:first-child{
  max-width:42rem;
}

/* Menu bank gets centered within its own rail. */
.module-grid{
  width:100%;
  max-width:320px;
  margin-inline:auto;
  justify-self:center;
}

.app-stage[data-layout="wide"] .module-grid,
.app-stage[data-layout="standard"] .module-grid,
.app-stage[data-layout="ultrawide"] .module-grid{
  max-width:340px;
}

.app-stage[data-nav-density="compact"] .module-grid{
  max-width:390px;
}

.app-stage[data-nav-density="dock"] .module-grid{
  max-width:none;
}

/* Footer should feel centered and deliberate. */
.pane-footer{
  width:min(100%, 1180px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.footer-left{justify-self:start}
.footer-center{justify-self:center}
.footer-right{justify-self:end}

/* When docked, the command bar and content should still feel centered. */
.app-stage[data-nav-density="dock"] .pane-body{
  width:min(100%, 1180px);
  margin-inline:auto;
}
.app-stage[data-nav-density="dock"] .content-deck{
  display:block;
}
.app-stage[data-nav-density="dock"] .view{
  width:min(100%, 820px);
}

/* Portrait: keep everything centered but full and comfortable. */
.app-stage[data-layout="portrait"] .glass-pane{
  width:min(100%, 96vw);
}
.app-stage[data-layout="portrait"] .pane-header{
  grid-template-columns:1fr;
  justify-items:start;
  gap:12px;
}
.app-stage[data-layout="portrait"] .status-stack{
  justify-self:start;
}
.app-stage[data-layout="portrait"] .pane-body{
  width:100%;
  margin-inline:auto;
}
.app-stage[data-layout="portrait"] .module-grid{
  max-width:none;
}
.app-stage[data-layout="portrait"] .content-deck{
  display:block;
}
.app-stage[data-layout="portrait"] .view{
  width:100%;
  max-width:none;
}
.app-stage[data-layout="portrait"] .pane-footer{
  grid-template-columns:1fr 1fr;
}
.app-stage[data-layout="portrait"] .footer-center{
  display:none;
}

/* Short windows: compress gracefully while keeping the command core centered. */
@media(max-height:720px) and (min-aspect-ratio:11/10){
  .pane-header{
    gap:14px;
  }
  .pane-body{
    width:min(100%, 1120px);
  }
  .view{
    width:min(100%, 720px);
  }
}

/* Slightly stronger visual centering cues. */
.brand-block h1,
.view h2{
  text-wrap:balance;
}


/* =====================================================================
   PHASE 10 — TRUE RECENTER / VISIBLE COMMAND CORE REPAIR
   Root cause repaired: CSS Grid auto tracks were stretching the header,
   placing the actual interface below the visible viewport.
   ===================================================================== */

/* CRITICAL: header and footer are intrinsic; ONLY body consumes free height. */
.glass-pane{
  grid-template-rows:max-content minmax(0,1fr) max-content !important;
  align-content:stretch !important;
  overflow:hidden !important;
}

.pane-header{
  min-height:0 !important;
  height:auto !important;
  align-self:start !important;
  align-items:flex-start !important;
  padding-bottom:clamp(8px,1vw,14px) !important;
}

.brand-block,
.status-stack{
  align-self:start !important;
}

/* The body fills exactly the remaining glass region — no giant hard minimum. */
.pane-body{
  min-height:0 !important;
  height:auto !important;
  align-self:stretch !important;
  overflow:hidden !important;
  padding:clamp(10px,1.15vw,18px) 0 !important;
}

/* Stable visible command bank. */
.module-grid{
  height:100% !important;
  min-height:0 !important;
  align-self:stretch !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(3,minmax(68px,1fr)) !important;
}

.module{
  min-height:0 !important;
}

/* Main text / links are guaranteed to live inside the visible body region. */
.content-deck{
  position:relative !important;
  display:block !important;
  height:100% !important;
  min-height:0 !important;
  align-self:stretch !important;
  overflow:hidden !important;
}

.view{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:clamp(12px,1.35vw,22px) !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  overflow:auto !important;
  padding:2px 8px 8px 0 !important;
}

.view.active{
  display:block !important;
}

.pane-footer{
  min-height:0 !important;
  height:auto !important;
  align-self:end !important;
  padding-top:clamp(7px,.8vw,11px) !important;
}

/* Keep the whole command system visually centered in the ship window. */
.pane-body,
.pane-footer{
  width:min(100%,1180px) !important;
  margin-inline:auto !important;
}

/* Standard/wide: menu + readable content, centered as one unit. */
.app-stage[data-layout="ultrawide"] .pane-body,
.app-stage[data-layout="wide"] .pane-body,
.app-stage[data-layout="standard"] .pane-body{
  grid-template-columns:minmax(230px,320px) minmax(0,1fr) !important;
}

/* Compact gets a 3x2 control bank instead of becoming microscopic. */
.app-stage[data-layout="compact"] .module-grid,
.app-stage[data-nav-density="compact"] .module-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(72px,1fr)) !important;
}

/* Short landscape: top command dock, content underneath, both visible. */
.app-stage[data-nav-density="dock"] .pane-body{
  grid-template-columns:1fr !important;
  grid-template-rows:max-content minmax(0,1fr) !important;
}
.app-stage[data-nav-density="dock"] .module-grid{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  grid-template-rows:minmax(64px,auto) !important;
}
.app-stage[data-nav-density="dock"] .content-deck{
  border-left:0 !important;
  border-top:1px solid rgba(98,188,231,.15) !important;
  padding-left:0 !important;
  padding-top:9px !important;
}
.app-stage[data-nav-density="dock"] .view{
  left:0 !important;
  top:9px !important;
}

/* Portrait remains fully usable; menu and text stay in normal flow areas. */
.app-stage[data-layout="portrait"] .glass-pane{
  grid-template-rows:max-content max-content minmax(0,1fr) max-content !important;
  overflow:auto !important;
}
.app-stage[data-layout="portrait"] .pane-header{
  grid-template-columns:1fr !important;
}
.app-stage[data-layout="portrait"] .pane-body{
  width:100% !important;
  grid-template-columns:1fr !important;
  grid-template-rows:max-content minmax(390px,1fr) !important;
  overflow:visible !important;
}
.app-stage[data-layout="portrait"] .module-grid{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(78px,auto)) !important;
}
.app-stage[data-layout="portrait"] .content-deck{
  min-height:390px !important;
}
.app-stage[data-layout="portrait"] .view{
  position:absolute !important;
  inset:10px 0 0 0 !important;
}

/* Do not let Phase-9 centering rules reintroduce a stretched header. */
.pane-header{justify-content:space-between !important}
.status-stack{justify-self:end !important}
.brand-block{justify-self:start !important}

/* PHASE 10 HOTFIX — the reactor is visual FX, NOT a grid row. */
.glass-pane > .glass-reactor{
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none !important;
}