.spatial { --bg: #030708; --cyan: #9cecf5; --amber: #eec185; height: 100dvh; overflow: hidden; background: var(--bg); }
.spatial::before { display: none; }
#workshop { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; }
#world, #screens { position: absolute; inset: 0; width: 100%; height: 100%; }
#world { touch-action: none; cursor: grab; }
#world:active { cursor: grabbing; }
#screens { pointer-events: none; }
#screens > div, #screens > div > div { pointer-events: none !important; }
.optics { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #98e8ee03 3px 4px); box-shadow: inset 0 0 180px 50px #0005; }
.reticle { position: absolute; width: 34px; height: 34px; pointer-events: none; border-color: #8cbbc946; }
.reticle-tl { top: 88px; left: 26px; border-top: 1px solid; border-left: 1px solid; }
.reticle-br { right: 26px; bottom: 93px; border-bottom: 1px solid; border-right: 1px solid; }
.hud-top { position: fixed; left: 34px; right: 34px; top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 7; pointer-events: none; }
.hud-top a, .hud-top button { pointer-events: auto; }
.hud-brand { display: flex; flex-direction: column; gap: 4px; font-size: 23px; font-weight: 600; color: #e3f9fb; }
.hud-brand span { font: 8px var(--mono); color: #83a7ab; }
.hud-time { display: flex; align-items: center; gap: 18px; color: #8bb7bc; font: 10px var(--mono); }
.hud-time > span { color: #d6b582; }
.hud-time .icon-button { font: 10px var(--mono); border: 0; }
.sector-nav { position: fixed; left: 25px; top: 50%; transform: translateY(-50%); z-index: 8; width: 92px; padding: 10px 0; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid #85d9e62e; background: linear-gradient(90deg,#06151a85,transparent); }
.sector-nav button, .sector-nav a { position: relative; width: 85px; height: 53px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; color: #7ba5ac; font-size: 9px; }
.sector-nav svg { width: 21px; height: 21px; }
.sector-nav small { position: absolute; top: 6px; right: 9px; font: 7px var(--mono); opacity: .7; }
.sector-nav button:hover, .sector-nav a:hover { color: white; }
.sector-nav button.active { color: #ffdc9e; text-shadow: 0 0 14px #ffd78c55; background: linear-gradient(90deg,#dfb47214,transparent); }
.sector-nav button.active::before { position: absolute; content: ''; left: -1px; top: 10px; bottom: 10px; width: 2px; background: #f2c588; box-shadow: 0 0 16px 2px #e8bb7477; }
.nav-rule { width: 28px; height: 1px; background: #83b7bf36; margin: 10px 28px; }
.view-heading { position: fixed; z-index: 2; top: 109px; left: 50%; transform: translateX(-50%); text-align: center; width: min(470px, 65%); pointer-events: none; }
.sector-kicker { display: flex; justify-content: center; align-items: center; gap: 10px; color: #89b5bd; font: 8px var(--mono); }
.sector-kicker .status-dot { width: 3px; height: 3px; }
.heading-title { position: relative; display: grid; place-items: center; height: 86px; margin: 5px 0 10px; isolation: isolate; }
.view-heading h1, .heading-depth { grid-area: 1 / 1; max-width: calc(100% - 42px); font-family: 'Chakra Petch', sans-serif; font-size: 64px; font-weight: 600; line-height: 1.05; margin: 0; }
.view-heading h1 { position: relative; z-index: 1; color: #e3feff; text-shadow: 1px 1px #317485, 2px 2px #164958, 3px 3px #0e3645, 0 0 24px #75e0ed6b; }
.heading-depth { transform: translate(5px, 6px); color: transparent; -webkit-text-stroke: 1px #a0f1f45e; text-shadow: 0 0 19px #5ae3f24a; }
.heading-title::before, .heading-title::after { content: ''; position: absolute; top: 16px; width: 18px; height: 47px; border-top: 2px solid #95e7ea; border-bottom: 1px solid #95e7ea; }
.heading-title::before { left: 0; border-left: 2px solid #bdf9fc; transform: skewY(-18deg); box-shadow: -4px 0 0 -3px #79d8e0; }
.heading-title::after { right: 0; border-right: 2px solid #e7c78f; transform: skewY(18deg); border-color: #e7c78f; }
.heading-scan { position: absolute; top: 7px; left: 25px; right: 25px; height: 1px; background: #a5f5f7; box-shadow: 0 0 9px 1px #79e3f345; opacity: 0; z-index: 2; animation: identity-scan 7s ease-in-out infinite; }
.heading-rail { display: flex; align-items: center; justify-content: center; gap: 4px; width: min(300px, 80%); height: 14px; margin: 9px auto 0; }
.heading-rail::before, .heading-rail::after { content: ''; height: 1px; flex: 1; background: #9bdde34d; }
.heading-rail i { width: 17px; height: 3px; background: #89dfe77a; transform: skewX(-30deg); }
.heading-rail i:nth-child(3) { width: 26px; background: #eccb8f; box-shadow: 0 0 12px #e9b77a4d; }
.spatial[data-section=ai] .view-heading h1, .spatial[data-section=ai] .heading-depth { font-size: 34px; }
@keyframes identity-scan { 0%, 18% { opacity: 0; transform: translateY(0); } 30% { opacity: .4; } 62% { opacity: .15; transform: translateY(70px); } 67%, 100% { opacity: 0; transform: translateY(70px); } }
.view-heading p { color: #94b4bb; font: 9px/1.6 var(--mono); }
.game-collections { display: flex; justify-content: center; margin: 10px auto 0; width: min(330px, 100%); height: 32px; border-bottom: 1px solid #83c7ce3b; pointer-events: auto; }
.game-collections[hidden] { display: none; }
.game-collections button { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 0 5px; border: 0; border-bottom: 2px solid transparent; background: #06141880; color: #94b5bd; font: 10px var(--mono); white-space: nowrap; }
.game-collections svg { width: 13px; height: 13px; flex-shrink: 0; }
.game-collections button[aria-pressed=true] { border-bottom-color: #ebc486; color: #ffe0a3; background: #d4ae7512; }
.game-collections button:hover { color: #fff; }
.game-collections button:focus-visible { outline: 1px solid #f3d395; outline-offset: 3px; }
.spatial[data-section=games] .heading-rail { display: none; }
.spatial[data-section=games] .view-heading { transform: translate(-50%, -16px); }
.atlas-caption { position: fixed; top: calc(78% - 4px); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; font: 8px var(--mono); color: #91b8bd; pointer-events: none; }
.atlas-caption span:last-child { color: #cabb9c; }
.caption-line { width: 22px; height: 1px; background: #99dfe6; }
.spatial-screen { width: 380px; position: relative; transform-style: preserve-3d; pointer-events: auto; backface-visibility: hidden; }
.screen-surface { display: block; width: 100%; padding: 0; text-align: left; position: relative; border: 0; background: transparent; transform-style: preserve-3d; }
.screen-face { display: block; position: relative; width: 100%; border: 1px solid #c8faffb8; background: linear-gradient(135deg,#153c4980,#07191cbb); box-shadow: 0 0 14px #61dbf042, inset 0 0 22px #9fe5f918; border-radius: 5px; transform-style: preserve-3d; transition: opacity .45s, box-shadow .35s; }
.is-hovered .screen-face, .screen-surface:active .screen-face { box-shadow: 0 0 34px #72efff85, inset 0 0 24px #a6eff529; }
.is-hovered .screen-head, .is-hovered .screen-caption { background: #09272cf2; }
.screen-surface:focus-visible { outline: none; }
.screen-surface:focus-visible .screen-face { outline: 2px solid var(--amber); outline-offset: 6px; }
.spatial-screen.is-raised .screen-face { opacity: .25; }
.is-swiping, .is-swiping .screen-surface { cursor: grabbing; }
.screen-face::before { content: ''; position: absolute; inset: -4px; border: 1px solid #b5faff86; border-radius: 7px; pointer-events: none; box-shadow: 0 0 8px #61e7ff40; }
.no-webgl .screen-face { box-shadow: 0 7px 0 #17434d, 0 9px 0 #8adce0, 0 14px 20px #5adff04a; }
.screen-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-top: 1px solid #e0feff; background: repeating-linear-gradient(0deg,transparent 0 3px,#b1f0f70a 3px 4px); }
.screen-head { height: 29px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; font: 9px var(--mono); color: #9cc8cc; border-bottom: 1px solid #79cfe226; }
.screen-head svg { width: 14px; height: 14px; color: #c4f4f5; }
.screen-preview { position: relative; display: block; padding: 0; width: 100%; height: 182px; overflow: hidden; background: none; }
.screen-preview img { width: 100%; height: 100%; object-fit: cover; opacity: .87; filter: saturate(.78); transition: filter .5s, opacity .5s; }
.is-hovered img, .screen-surface:focus-visible img { opacity: 1; filter: saturate(1); }
.screen-preview::after { content: ''; position: absolute; inset: -40% 0; pointer-events: none; opacity: 0; background: linear-gradient(0deg,transparent 40%,#91efff14 46%,#defeffa8 49.5%,#a6f7ff4d 50%,transparent 61%); transform: translateY(-75%); }
.is-hovered .screen-preview::after { animation: project-scan 1.35s ease-out both; }
@keyframes project-scan { 0% { opacity: 0; transform: translateY(-75%); } 18% { opacity: .85; } 80% { opacity: .55; } 100% { opacity: 0; transform: translateY(75%); } }
.screen-caption { height: 64px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; justify-content: space-between; border-top: 1px solid #95e1ef44; }
.screen-name { text-align: left; padding: 0; color: #e8f9f9; background: none; font-size: 18px; line-height: 1.25; }
.screen-caption > svg { color: #f2d095; width: 21px; height: 21px; flex-shrink: 0; transition: transform .3s, color .3s; }
.is-hovered .screen-caption > svg { transform: translate(3px,-3px); color: #f2ffff; }
.spatial-screen[data-group=games] .screen-head { color: #e8c18a; }
.spatial-screen[data-group=apps] .screen-head { color: #a8e5cb; }
.command-dock { position: fixed; bottom: 29px; left: 50%; transform: translateX(-50%); width: min(510px, calc(100% - 48px)); z-index: 10; border-top: 1px solid #c4f1f152; padding: 13px 15px 8px; background: linear-gradient(180deg,#05131877,#031011ab); box-shadow: 0 -7px 23px -19px #bdf7ff; }
.command-dock::before, .command-dock::after { content: ''; position: absolute; top: -1px; width: 20px; height: 5px; border-top: 1px solid #e0ffff; }
.command-dock::before { left: 0; border-left: 1px solid #c4ffff; }.command-dock::after { right: 0; border-right: 1px solid #c4ffff; }
.command-head { display: flex; align-items: center; gap: 16px; color: #c0edf0; font: 9px var(--mono); }
.command-head > span { font-size: 7px; color: #7c9b9f; }
.waveform { margin-left: auto; height: 17px; display: flex; align-items: center; gap: 3px; }
.waveform i { display: block; height: 4px; width: 1px; background: #e9c185; animation: waveform 2.6s ease-in-out infinite alternate; }
.waveform i:nth-child(2n) { height: 10px; animation-delay: -.7s; }.waveform i:nth-child(3n) { height: 16px; animation-delay: -1.6s; }
.command-dock #jarvisForm { margin-top: 8px; }
.command-dock #jarvisInput { font-size: 13px; padding: 7px 0; }
.command-dock .icon-button { width: 29px; height: 29px; border: 0; border-radius: 0; }
.command-dock .icon-button svg { width: 17px; height: 17px; }
.command-dock .icon-button.send { box-shadow: none; }
.command-dock .command-response:empty { display: none; }
.command-dock .command-response { position: absolute; bottom: calc(100% + 12px); left: 0; right: 0; padding: 15px 18px; max-height: 190px; overflow: auto; background: #031317df; border-left: 1px solid #c4eaf0; backdrop-filter: blur(10px); font-size: 12px; }
.scene-controls { display: flex; gap: 4px; position: fixed; bottom: 38px; left: 34px; z-index: 10; }
.scene-controls .icon-button { border: 0; color: #7ca8ae; }
.scene-controls .icon-button svg { width: 16px; height: 16px; }
.scene-controls .icon-button:hover { color: #d8f8fb; }
.folio-link { position: fixed; right: 34px; bottom: 48px; display: flex; gap: 14px; align-items: center; font: 9px var(--mono); color: #e4c59a; z-index: 10; }
.folio-link svg { width: 17px; height: 17px; }
.category-pager { position: fixed; left: 50%; bottom: calc(18% - 40px); transform: translateX(-50%); width: min(380px, calc(100% - 44px)); display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 8; }
.category-pager .icon-button { width: 42px; height: 38px; border-color: #b7edf345; background: #0b242d45; }
.category-pager .icon-button:disabled { opacity: .2; cursor: default; }
.category-pager span { color: #b3d0d6; font: 9px var(--mono); text-align: center; line-height: 1.6; }
#renderState { position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%); font: 10px var(--mono); color: #e5c496; }
.no-webgl #world { opacity: 0; }
.spatial .holo-window { background: linear-gradient(135deg,#15445444,#03161e80 60%,#16383e36); backdrop-filter: blur(14px); box-shadow: inset 1px 1px #c9f9ff6b, 4px 5px 0 #10323f66, 7px 9px 0 -1px #82c9d959, 0 0 35px #80e9f918; transform-origin: 50% 50%; animation: spatial-summon 1.5s cubic-bezier(.16,1,.3,1) both; }
.spatial .holo-window.is-manipulating { animation: none; }
.spatial .window-head, .spatial .window-foot { background: #0b2d3740; }
.spatial .window-preview { background: #06141a3d; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .holo-window { animation: none; }
.motion-paused .screen-face, .motion-paused .screen-caption > svg { transition: none; }
.motion-paused .screen-caption > svg { transform: none; }
@keyframes waveform { to { transform: scaleY(.35); opacity: .5; } }
@keyframes spatial-summon { 0% { opacity: .05; transform: translate3d(var(--summon-x,0px),var(--summon-y,140px),-140px) rotateX(68deg) scale(.58,.5); } 35% { opacity: .8; transform: translate3d(var(--summon-mid-x,0px),var(--summon-mid-y,60px),-30px) rotateX(25deg) scale(.9); } 75% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (max-height: 800px) and (min-width: 721px) { .view-heading { top: 90px; }.view-heading h1, .heading-depth { font-size: 50px; }.heading-title { height: 68px; }.command-dock { bottom: 17px; }.sector-nav { gap: 1px; }.sector-nav button, .sector-nav a { height: 44px; } }
@media (max-width: 1000px) and (min-width: 721px) { .sector-nav { left: 12px; width: 65px; }.sector-nav button,.sector-nav a { width: 62px; }.sector-nav small { display: none; }.hud-top { left: 24px; right: 24px; }.scene-controls { left: 16px; }.folio-link { right: 20px; font-size: 8px; gap: 6px; }.command-dock { width: 410px; } }
@media (max-width: 720px), (max-width: 1100px) and (orientation: portrait) {
  .hud-top { left: 20px; right: 17px; top: 18px; }.hud-brand { font-size: 20px; }.hud-brand span { font-size: 6px; }.hud-time { gap: 8px; }.hud-time > span, #localTime { display: none; }
  .sector-nav { top: 74px; left: 16px; right: 16px; transform: none; width: auto; flex-direction: row; gap: 0; justify-content: space-between; border: 0; border-bottom: 1px solid #86ccdc26; padding: 0 0 9px; background: none; }
  .sector-nav button, .sector-nav a { width: 46px; height: 43px; font-size: 8px; gap: 5px; }.sector-nav svg { width: 18px; height: 18px; }.sector-nav small,.nav-rule { display: none; }.sector-nav a { display: none; }.sector-nav button.active::before { left: 7px; right: 7px; top: auto; bottom: -10px; width: auto; height: 1px; }
  .view-heading { top: 148px; width: min(380px, calc(100% - 56px)); }.view-heading h1, .heading-depth { font-size: 46px; }.heading-title { height: 70px; margin: 3px 0 8px; }.heading-title::before, .heading-title::after { top: 14px; height: 37px; width: 12px; }.spatial[data-section=ai] .view-heading h1, .spatial[data-section=ai] .heading-depth { font-size: 26px; }.sector-kicker { font-size: 7px; }.view-heading p { font-size: 8px; max-width: 320px; margin: auto; }.reticle { display: none; }.heading-rail { margin-top: 5px; }
  .atlas-caption { top: auto; bottom: 214px; font-size: 7px; gap: 7px; white-space: nowrap; }.caption-line { width: 14px; }
  .command-dock { bottom: 67px; width: calc(100% - 40px); padding: 11px 10px 6px; }.command-head { font-size: 8px; gap: 11px; }.command-head > span { font-size: 6px; }.command-dock #jarvisInput { font-size: 12px; }
  .scene-controls { left: 16px; bottom: 15px; gap: 1px; }.scene-controls .icon-button { width: 31px; height: 31px; }.folio-link { right: 21px; bottom: 25px; font-size: 8px; gap: 6px; }
  .category-pager { bottom: 165px; width: calc(100% - 44px); }.category-pager .icon-button { height: 38px; }.category-pager span { font-size: 8px; }
  .screen-name { font-size: 24px; }.screen-caption { height: 80px; }.screen-head { height: 34px; font-size: 13px; }
  .game-collections { margin-top: 8px; }.game-collections button { font-size: 9px; gap: 4px; }
  .spatial[data-section=games] .view-heading { transform: translateX(-50%); }
  .optics { box-shadow: inset 0 0 85px 20px #0005; }#renderState { bottom: 157px; width: 280px; text-align: center; line-height: 1.6; }
}
@media (max-width: 720px) and (max-height: 740px) { .view-heading { top: 134px; }.view-heading h1, .heading-depth { font-size: 38px; }.heading-title { height: 60px; }.view-heading p { display: none; }.command-dock { bottom: 52px; }.command-head > span { display: none; }.category-pager { bottom: 148px; }.atlas-caption { display: none; }.scene-controls { bottom: 8px; }.folio-link { bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .spatial .holo-window { animation: none; } }