@font-face{font-family:'Press Start 2P';src:url(../fonts/press-start-2p.woff2) format('woff2');font-weight:400;font-display:swap;}
    /* Space Grotesk — self-hosted variable subsets (latin / latin-ext / vietnamese),
       one file per subset covering weights 400–700. font-display:swap = no blocking. */
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/space-grotesk-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
    :root{
    --ink:#070910; --text:#C9D1DC; --bright:#EAEFF5; --dim:#6F7B8C;
    --pipelines-accent:#4FD1C5; --studio-violet:#A56AD9; --stage:#C77DFF; --arcade:#5EA0FF; --gold:#FFD166;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--ink);color:var(--text);font-family:"Space Grotesk",sans-serif;-webkit-font-smoothing:antialiased;width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}
  @supports (overflow:clip){html,body{overflow-x:clip}}
  img{display:block;image-rendering:pixelated} /* keeps Lucas's pixel art crisp */
  .pixel{font-family:"Press Start 2P",monospace;line-height:1.5;}

  /* zone-colored scroll indicator — a custom bar so it also recolors on iOS,
     where the native scrollbar can't be styled. Native bar is hidden. */
  html.zonebar-ready{scrollbar-width:none;-ms-overflow-style:none}
  html.zonebar-ready::-webkit-scrollbar,html.zonebar-ready body::-webkit-scrollbar{width:0;height:0;display:none}
  #zonebar{position:fixed;top:0;right:0;width:24px;height:100vh;z-index:60;pointer-events:auto;cursor:pointer;touch-action:none;background:transparent;outline:none}
  /* On touch devices the 24px hit-strip can overlap the right edge of centered
     cards and swallow scroll-swipes; narrow it so it stays inside the page margin. */
  @media (pointer:coarse){#zonebar{width:16px}}
  #zonebar::before{content:"";position:absolute;top:0;right:0;width:8px;height:100%;background:rgba(255,255,255,.04)}
  #zonebar .thumb{position:absolute;right:1.5px;width:5px;border-radius:3px;color:var(--gold);background:currentColor;box-shadow:0 0 10px currentColor;transition:color .5s ease}
  #zonebar:focus-visible::before{box-shadow:inset 0 0 0 1px currentColor}

  /* ---------- intro / press start ---------- */
  .intro{height:100vh;height:100dvh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
  .intro .scanlines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.25) 3px 4px);pointer-events:none;opacity:.5}
  .intro h1{font-family:"Press Start 2P";font-size:clamp(20px,7vw,46px);color:var(--bright);line-height:1.4;text-shadow:0 0 18px rgba(94,160,255,.5)}
  .intro h1 .c1{color:var(--pipelines-accent)} .intro h1 .c2{color:var(--stage)} .intro h1 .c3{color:var(--arcade)}
  .intro .sub{font-family:"Press Start 2P";font-size:11px;color:var(--gold);margin-top:28px;animation:blink 1.1s steps(2) infinite}
  .intro .role{margin-top:18px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
  /* role words: glow their act's color on hover/focus and fly you to that act */
  .role-link{color:inherit;text-decoration:none;cursor:pointer;outline:none;transition:color .25s ease,text-shadow .25s ease}
  .rl-pipelines:hover,.rl-pipelines:focus-visible{color:var(--pipelines-accent);text-shadow:0 0 12px var(--pipelines-accent)}
  .rl-stage:hover,.rl-stage:focus-visible{color:var(--stage);text-shadow:0 0 12px var(--stage)}
  .rl-arcade:hover,.rl-arcade:focus-visible{color:var(--arcade);text-shadow:0 0 12px var(--arcade)}
  @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
  .scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:"Press Start 2P";font-size:9px;color:var(--dim)}
  .scrollcue::after{content:"";display:block;width:2px;height:22px;margin:8px auto 0;background:var(--dim);animation:drop 1.4s ease-in-out infinite}
  @keyframes drop{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(8px);opacity:0}}

  /* ---------- act scaffolding ---------- */
  /* Base = the static, readable layout everyone can reach (no-JS, ?static, and
     reduced-motion all land here). min-height lets a stage grow with its in-flow
     content instead of clipping it; dvh tracks the real viewport on mobile so an
     iOS URL-bar collapse doesn't leave a gap. Motion is the opt-in enhancement. */
  .act{position:relative;min-height:100vh;min-height:100dvh}
  .stage{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden}
  html.motion-ready .act{height:300vh}
  html.motion-ready .stage{position:sticky;top:0;height:100vh}
  .layer{position:absolute;inset:0;will-change:transform}
  .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(7,9,16,.85) 100%)}

  /* Ratio-aware artwork scenes preserve each source image's composition.
     Ordinary viewports use cover sizing; large desktops receive a width cap. */
  .art-parallax{position:absolute;inset:0}
  .art-scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .art-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .stage-scene{width:max(100vw,calc(100vh * 1003 / 1568));height:max(100vh,calc(100vw * 1568 / 1003))}
  .arcade-scene{width:max(100vw,calc(100vh * 1122 / 1402));height:max(100vh,calc(100vw * 1402 / 1122))}

  /* Act 01 portrait scene: oversized with cover math so monitor overlays stay
     registered to the source artwork at every viewport ratio. */
  .job-parallax{position:absolute;inset:0}
  .job-scene{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh * 1003 / 1568));height:max(100vh,calc(100vw * 1568 / 1003));transform:translate(-50%,-50%)}
  .job-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .job-screen{position:absolute;overflow:hidden;display:grid;justify-content:center;z-index:2}
  .job-icon{display:block;min-width:0;opacity:1;filter:drop-shadow(0 0 .3vw rgba(43,231,224,.35));will-change:transform,opacity}
  html.motion-ready .job-icon{opacity:0}
  .job-screen-top{left:36.18%;top:38.64%;width:29%;height:9.2%;grid-template-columns:repeat(4,1fr);gap:2%;padding:4%;align-content:center}
  .job-screen-top .job-icon{width:100%;justify-self:center}
  .job-screen-left{left:34.5%;top:49.65%;width:18.2%;height:5%;display:flex;align-items:flex-start;gap:min(max(.75vw,.48vh),8px);transform:translateY(calc(min(max(1.88vw,1.2vh),21px) - 12px))}
  .job-screen-left .job-icon{width:min(max(4.4vw,2.8vh),50px)}
  /* diagonal stagger on the bottom-left screen: vscode sits low-left, each
     following icon rides up toward the top-right (all icons the same size) */
  .job-screen-left .job-icon:nth-child(1){margin-top:min(max(2.49vw,1.59vh),28px)}
  .job-screen-left .job-icon:nth-child(2){margin-top:min(max(1.24vw,.79vh),14px)}
  .job-screen-left .job-icon:nth-child(3){margin-top:0}
  .job-screen-right{left:53.9%;top:49.65%;width:15.2%;height:5.6%;grid-template-columns:repeat(2,min(max(3.95vw,2.52vh),45px));grid-auto-rows:auto;align-content:start;gap:min(max(.38vw,.24vh),4px) min(max(.75vw,.48vh),8px);transform:translateY(calc(min(max(.94vw,.6vh),11px) - 2px))}
  .job-screen-right .job-icon{width:100%}
  .job-screen-right .job-icon:nth-child(3){grid-column:1 / 3;justify-self:center;width:min(max(3.95vw,2.52vh),45px);margin-top:-6px}

  /* act header — pinned near top into the dark empty space of each background */
  .actheader{position:absolute;left:50%;top:8%;transform:translateX(-50%);text-align:center;z-index:8;width:90%;max-width:600px;text-shadow:0 2px 8px var(--ink),0 0 3px var(--ink)}
  /* act body copy — pushed low for breathing room */
  .actbody{position:absolute;left:50%;top:60%;transform:translateX(-50%);text-align:center;z-index:8;width:90%;max-width:520px;text-shadow:0 2px 8px var(--ink),0 0 3px var(--ink)}
  .actno{font-family:"Press Start 2P";font-size:11px;letter-spacing:.1em}
  .acttitle{font-family:"Press Start 2P";font-size:clamp(22px,6vw,40px);color:var(--bright);margin:14px 0 16px;line-height:1.4}
  .actblurb{font-size:clamp(15px,2.4vw,18px);color:var(--text);max-width:46ch;margin:0 auto}
  .a-studio .actno{color:var(--pipelines-accent)} .a-stage .actno{color:var(--studio-violet)} .a-arcade .actno{color:var(--arcade)}
  .act-footer{display:contents}

  /* content cards that pop in (music tracks, apps, games) */
  .cards{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);z-index:9;width:90%;max-width:560px;display:flex;flex-direction:column;gap:12px}
  .card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:rgba(10,14,22,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1)}
  .card .t{font-weight:700;color:var(--bright)} .card .d{font-size:13px;color:var(--dim);margin-top:2px}
  .btn{font-family:"Press Start 2P";font-size:9px;padding:10px 12px;text-decoration:none;white-space:nowrap;border:2px solid;background:transparent;cursor:pointer;color:var(--bright)}
  .a-studio .btn{border-color:var(--pipelines-accent);color:var(--pipelines-accent)}
  .a-stage .btn{border-color:var(--stage);color:var(--stage)}
  .a-arcade .btn{border-color:var(--arcade);color:var(--arcade)}
  .btn:hover{background:rgba(255,255,255,.08)}
  .card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .link-btn{opacity:.82}
  .music-track .btn{min-height:39px}
  .music-track .music-art-control{flex:0 0 auto;width:88px}
  .music-player{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.96);z-index:10;width:min(88vw,420px);aspect-ratio:716/502;box-sizing:border-box;padding:clamp(33px,7vw,47px) clamp(25px,5.2vw,36px) clamp(18px,4vw,27px);background-image:url("../stage_ui/player-frame.png");background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 18px rgba(199,125,255,.2)) blur(1px);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease,filter .45s ease,visibility 0s ease .45s}
  .music-player.is-visible{visibility:visible;opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);filter:blur(0);transition:opacity .45s ease,transform .45s ease,filter .45s ease,visibility 0s ease}
  .music-player-close{position:absolute;top:7px;right:4px;z-index:2;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}
  .music-player-close img{display:block;width:20px;height:19px;object-fit:contain;image-rendering:pixelated;pointer-events:none}
  .music-player-close:hover,.music-player-close:focus-visible{filter:brightness(1.25) drop-shadow(0 0 4px rgba(199,125,255,.5));outline:0}
  .music-player-title{font-family:"Press Start 2P";font-size:clamp(15px,3.4vw,21px);line-height:1.35;color:var(--studio-violet)}
  .music-meter{display:grid;gap:4px;margin:9px 0;padding:3px 0}
  .music-meter label{font-family:"Press Start 2P";font-size:7px;color:#CDBBE3}
  .music-slider-shell{--range-progress:0%;--range-ratio:0;--slider-left-stop:24px;--slider-right-stop:25px;position:relative;width:100%;height:31px}
  .music-slider-track{position:absolute;left:0;right:0;top:50%;height:22px;transform:translateY(-50%);background-image:url("../stage_ui/slider-left-cap.png"),url("../stage_ui/slider-right-cap.png");background-size:17px 22px,19px 22px;background-position:left center,right center;background-repeat:no-repeat,no-repeat;pointer-events:none;image-rendering:pixelated}
  .music-slider-track::before{content:"";position:absolute;left:17px;right:19px;top:50%;height:12px;transform:translateY(-50%);background-image:url("../stage_ui/slider-empty-center.png");background-size:100% 12px;background-position:center;background-repeat:no-repeat;pointer-events:none;image-rendering:pixelated}
  .music-slider-fill{position:absolute;left:17px;top:50%;z-index:1;height:22px;width:calc((100% - 36px) * var(--range-ratio));transform:translateY(-50%);background-image:url("../stage_ui/slider-fill-center.png");background-size:100% 12px;background-position:center;background-repeat:no-repeat;pointer-events:none;image-rendering:pixelated}
  .music-slider-thumb{position:absolute;left:calc(var(--slider-left-stop) + (100% - var(--slider-left-stop) - var(--slider-right-stop)) * var(--range-ratio));top:0;z-index:2;width:20px;height:31px;transform:translateX(-50%);background:url("../stage_ui/slider-thumb.png") center/20px 31px no-repeat;pointer-events:none;image-rendering:pixelated}
  .music-meter input{--range-progress:0%;position:absolute;left:var(--slider-left-stop);right:var(--slider-right-stop);top:50%;z-index:3;appearance:none;-webkit-appearance:none;width:auto;height:31px;margin:0;border:0;border-radius:0;background:transparent;cursor:pointer;transform:translateY(-50%)}
  .music-meter input:focus-visible{outline:2px solid #906ea9;outline-offset:2px}
  .music-meter input:disabled{cursor:not-allowed}
  .music-meter input:disabled + .music-slider-track{opacity:.58}
  .music-meter input::-webkit-slider-runnable-track{height:31px;background:transparent}
  .music-meter input::-moz-range-track{height:31px;background:transparent;border:0}
  .music-meter input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:31px;border:0;border-radius:0;background:transparent;opacity:0;cursor:grab}
  .music-meter input::-moz-range-thumb{width:20px;height:31px;border:0;border-radius:0;background:transparent;opacity:0;cursor:grab}
  .music-player-controls{display:flex;gap:clamp(5px,1.6vw,9px);align-items:center;justify-content:center;margin-top:clamp(24px,7vw,42px)}
  .music-art-control{position:relative;display:block;flex:0 1 92px;width:92px;aspect-ratio:132/84;padding:0;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;transition:transform .08s ease}
  .music-art-control::before{content:"";position:absolute;inset:0;background-image:url("../stage_ui/button-plate.png");background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;opacity:1;transition:opacity .12s ease}
  .music-control-icon{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
  /* playing stays softly lit; hover/focus gets the full bright plate */
  .music-art-control[aria-pressed="true"]::before{background-image:url("../stage_ui/button-plate-highlight.png");opacity:.68}
  html.keyboard-nav .music-art-control:focus-visible::before{background-image:url("../stage_ui/button-plate-highlight.png");opacity:1}
  @media (hover:hover){.music-art-control:hover::before{background-image:url("../stage_ui/button-plate-highlight.png");opacity:1}}
  .music-art-control:focus-visible{outline:0}
  .music-art-control:active::before{background-image:url("../stage_ui/button-plate-highlight.png");opacity:1}
  .music-art-control:active{transform:translateY(1px)}
  .music-art-control[aria-disabled="true"],.music-art-control:disabled{filter:saturate(.45) brightness(.6);cursor:not-allowed}
  .arcade-play-control{position:relative;display:block;width:158px;aspect-ratio:60/29;text-decoration:none;transition:transform .1s ease}
  .arcade-play-control::before,.arcade-play-control::after{content:"";position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
  .arcade-play-control::before{background-image:url("../arcade_ui/play-wide-blue-cleaned-default.png")}
  .arcade-play-control::after{background-image:url("../arcade_ui/play-wide-blue-cleaned-glow.png");opacity:0;transition:opacity .15s ease}
  html.keyboard-nav .arcade-play-control:focus-visible::after{opacity:1}
  @media (hover:hover){.arcade-play-control:hover::after{opacity:1}}
  .arcade-play-control:focus-visible{outline:0}
  .arcade-play-control:active::after{opacity:1}
  .arcade-play-control:active{transform:translateY(1px) scale(.97)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* outro */
  .outro{min-height:70vh;min-height:70dvh;display:grid;place-items:center;text-align:center;padding:60px 22px;position:relative}
  .outro .acttitle{margin-bottom:24px}
  .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
  .links a{font-family:"Press Start 2P";font-size:10px;color:var(--dim);text-decoration:none}
  .links a:hover{color:var(--gold)}
  .copy{font-family:"Press Start 2P";font-size:8px;color:var(--dim);margin-top:28px}
  .copy-top{color:inherit;text-decoration:none;transition:color .15s ease}
  .copy-top:hover,.copy-top:focus-visible{color:var(--gold);opacity:1;outline:0}

  @media (max-width:600px){
    .cards{bottom:5vh}
    .card{padding:11px 12px;align-items:start;display:grid;grid-template-columns:minmax(0,1fr) auto}
    .music-track{padding:5px 10px;align-items:center}
    .arcade-card{padding:5px 10px;align-items:center}
    .card-actions{justify-content:flex-start;align-items:stretch;flex-direction:column}
    .card-actions .btn{min-width:108px;text-align:center}
    .arcade-card>.card-actions{justify-self:end}
    .arcade-play-control{width:140px}
    .music-player{top:50%}
    .a-stage .music-player{top:43%}
    .music-player-title{margin-top:10px}
    .a-stage .actbody{top:65%}
    .job-screen-top .job-icon{width:108%}
    /* the bottom screens shrink on phones, so the desktop px nudges are too big:
       gentler diagonal, no upward raise, more breathing room on the right */
    .job-screen-left{transform:translateY(min(max(1.2vw,.77vh),6px))}
    .job-screen-left .job-icon:nth-child(1){margin-top:6px}
    .job-screen-left .job-icon:nth-child(2){margin-top:3px}
    .job-screen-left .job-icon:nth-child(3){margin-top:0}
    .job-screen-right{transform:translateY(min(max(.6vw,.38vh),4px));gap:min(max(.5vw,.32vh),3px) min(max(2.4vw,1.5vh),14px)}
    .job-screen-right .job-icon:nth-child(3){margin-top:0}
  }
  @media (min-width:768px){
    .job-scene{width:min(max(100vw,calc(100vh * 1003 / 1568)),1120px);height:min(max(100vh,calc(100vw * 1568 / 1003)),1751px)}
    .stage-scene{width:min(max(100vw,calc(100vh * 1003 / 1568)),1120px);height:min(max(100vh,calc(100vw * 1568 / 1003)),1751px)}
    .arcade-scene{width:min(max(100vw,calc(100vh * 1122 / 1402)),1120px);height:min(max(100vh,calc(100vw * 1402 / 1122)),1399px)}
    .a-studio .actheader{top:6%;max-width:900px}
    .a-studio .actno{font-size:14px}
    .a-studio .acttitle{font-size:clamp(42px,3.4vw,64px)}
    .a-studio .actbody{top:auto;bottom:8%;max-width:760px}
    .a-studio .actblurb{font-size:clamp(19px,1.35vw,23px)}
    .a-stage .music-player{top:42%}
    .a-stage .act-footer,.a-arcade .act-footer{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);z-index:9;width:90%;max-width:760px;display:flex;flex-direction:column}
    .a-stage .act-footer{gap:24px}
    .a-arcade .act-footer{gap:28px}
    .act-footer .actbody{position:relative;left:50%;top:auto;bottom:auto;max-width:760px}
    .act-footer .cards{position:relative;left:50%;bottom:auto;flex:0 0 auto}
  }
  @media (prefers-reduced-motion:reduce){
    .act{height:auto} .stage{position:relative;height:auto;min-height:100vh;padding:80px 0}
    .job-icon{opacity:1 !important;transform:none !important}
    .intro .sub{animation:none}
    .scrollcue::after{animation:none}
  }