:root {
  --bg: #050711;
  --navy: #0F1220;
  --navy-2: #15192c;
  --panel: rgba(11, 15, 30, .88);
  --panel-2: rgba(18, 23, 43, .92);
  --cyan: #29D8FF;
  --purple: #8A5CFF;
  --pink: #FF4FD8;
  --green: #7CFF72;
  --orange: #FF8A3D;
  --light: #F5F7FA;
  --muted: #9aa6ba;
  --border: rgba(126, 183, 255, .18);
  --shadow: 0 40px 100px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--light);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(41,216,255,.11), transparent 27rem),
    radial-gradient(circle at 85% 25%, rgba(255,79,216,.10), transparent 30rem),
    linear-gradient(180deg, #03040a 0%, #070a14 100%);
  overflow-x: hidden;
}

button, input, a { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 200;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
.ambient { position: fixed; border-radius: 999px; filter: blur(80px); pointer-events:none; opacity:.14; }
.ambient-a { width: 420px; height:420px; background:var(--cyan); left:-180px; top:30%; }
.ambient-b { width: 500px; height:500px; background:var(--pink); right:-220px; top:10%; }

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  perspective: 1800px;
}

/* INTRO */
.intro {
  position: absolute;
  width: min(760px, calc(100vw - 36px));
  text-align: center;
  z-index: 20;
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
.intro.is-hidden { opacity:0; transform: scale(.94) translateY(-20px); visibility:hidden; pointer-events:none; }
.intro-mark { width: 132px; filter: drop-shadow(0 0 30px rgba(41,216,255,.35)); animation: float 4s ease-in-out infinite; }
.eyebrow { letter-spacing: .22em; font-size:.78rem; font-weight:800; color:#c7d2e8; margin:18px 0 12px; }
.eyebrow.small { font-size:.66rem; margin:0 0 8px; color:var(--cyan); }
.intro h1 {
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height:.96; margin:0 auto 22px; letter-spacing:-.055em; max-width:760px;
}
.intro h1 .rotator, h3 span { background: linear-gradient(90deg,var(--cyan),var(--purple),var(--pink),var(--orange)); -webkit-background-clip:text; color:transparent; }
.intro-copy { color:#aeb9ca; max-width:650px; margin:0 auto 30px; font-size:clamp(1rem,2vw,1.2rem); line-height:1.65; }
.start-btn {
  border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:16px 24px; cursor:pointer;
  color:white; font-weight:850; letter-spacing:.02em;
  background: linear-gradient(110deg, rgba(41,216,255,.13), rgba(138,92,255,.16), rgba(255,79,216,.14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(138,92,255,.18);
  transition:.25s ease;
}
.start-btn:hover { transform:translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 65px rgba(41,216,255,.25); }
.start-icon { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:10px; border-radius:8px; background:linear-gradient(135deg,var(--cyan),var(--purple)); }
.intro-hint { text-transform:uppercase; letter-spacing:.18em; font-size:.65rem; color:#69758a; margin-top:18px; }

.intro-orbit { pointer-events:none; position:absolute; inset:50% auto auto 50%; border:1px solid rgba(41,216,255,.10); border-radius:50%; transform:translate(-50%,-50%); z-index:-1; }
.orbit-one { width:520px;height:520px; animation:spin 18s linear infinite, ringin 1.1s .2s cubic-bezier(.2,.9,.2,1) backwards; translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 12px); }
.orbit-two { width:700px;height:700px; border-color:rgba(255,79,216,.08); animation:spin 30s linear infinite reverse, ringin 1.3s .35s cubic-bezier(.2,.9,.2,1) backwards; translate:calc(var(--px,0) * -20px) calc(var(--py,0) * -20px); }
/* Satellites ride the rings. Positioned on the circle, counter-rotated so the art stays upright. */
.sat { position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px; }
.sat-a { left:50%; top:0; }.sat-b { left:93.3%; top:75%; }.sat-c { left:6.7%; top:75%; }
.sat img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 14px rgba(41,216,255,.35)); animation:unspin 18s linear infinite, satin .7s .9s cubic-bezier(.2,.9,.2,1) backwards; }
/* Satellites dim while crossing the text band (lower half of the ring). The fade shares the orbit period and is phase-shifted per
   start angle with negative delays, so the dip always lands behind the copy: ring one 0/120/240deg over 18s, ring two reversed over 30s. */
.sat { animation:orbitfade-inner 18s linear infinite; }
.orbit-one .sat-b { animation-delay:-6s; }.orbit-one .sat-c { animation-delay:-12s; }
.orbit-two .sat { animation:orbitfade 30s linear infinite; }
.orbit-two .sat-b { animation-delay:-10s; }.orbit-two .sat-c { animation-delay:-20s; }
.orbit-two .sat { width:46px; height:46px; margin:-23px 0 0 -23px; opacity:.8; }
.orbit-two .sat img { animation:unspin 30s linear infinite reverse, satin .7s 1.1s cubic-bezier(.2,.9,.2,1) backwards; filter:drop-shadow(0 0 12px rgba(255,79,216,.3)); }
.orbit-two .sat-b img { animation-delay:0s, 1.2s; }.orbit-two .sat-c img { animation-delay:0s, 1.3s; }
.orbit-one .sat-b img { animation-delay:0s, 1s; }.orbit-one .sat-c img { animation-delay:0s, 1.05s; }
/* Power-on entrance. Fill mode is backwards so finished animations release transform to hover/float styles. */
.intro-mark { animation:float 4s ease-in-out infinite, poweron .9s steps(1,end) backwards; }
.eyebrow { animation:rise .6s .45s cubic-bezier(.2,.9,.2,1) backwards; }
.intro h1 .w, .intro h1 .rotator-line { display:inline-block; animation:rise .6s cubic-bezier(.2,.9,.2,1) backwards; }
.intro h1 .w:nth-child(1){animation-delay:.55s}.intro h1 .w:nth-child(2){animation-delay:.63s}.intro h1 .w:nth-child(3){animation-delay:.71s}.intro h1 .rotator-line{animation-delay:.8s}
/* The rotating word always owns a full line: a block that never collapses, so erasing to nothing cannot pull it up beside
   "with" and shove the rest of the page around. The zero-width space keeps the line box at full height while empty. */
.intro h1 .rotator-line { display:block; min-height:1em; white-space:nowrap; }
.intro h1 .rotator::after { content:"\200B"; }
.intro-copy { animation:rise .6s .95s cubic-bezier(.2,.9,.2,1) backwards; }
.start-btn { animation:land .7s 1.1s cubic-bezier(.2,.9,.2,1) backwards; }
.intro-hint, .intro-links { animation:rise .6s 1.3s cubic-bezier(.2,.9,.2,1) backwards; }
/* Typewriter cursor for the rotating word. */
.type-cursor { display:inline-block; width:.06em; height:.8em; margin-left:.06em; vertical-align:-.05em; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:blink 1s steps(1) infinite; }
/* The laptop waiting under the intro: a breathing lid-edge glow that brightens when Start is hovered or focused. */

/* LAPTOP */
.laptop-shell {
  width:min(1240px, 96vw);
  position:relative;
  margin-top:5vh;
  opacity:0;
  transform: translateY(80px) scale(.82);
  pointer-events:none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.9,.2,1);
}
.laptop-shell.is-visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.lid-wrap { transform-style:preserve-3d; transform-origin:bottom center; transform:rotateX(-87deg); transition:transform 1.3s cubic-bezier(.16,.84,.23,1); }
.laptop-shell.is-open .lid-wrap { transform:rotateX(0); }
.lid {
  background: linear-gradient(145deg,#303748,#131823);
  border-radius: 30px 30px 16px 16px;
  padding:10px;
  box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 80px rgba(41,216,255,.08);
}
.screen-bezel { background:#06070c; border-radius:23px; padding:10px 10px 12px; position:relative; }
.camera-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:#121722; top:5px; left:50%; transform:translateX(-50%); z-index:5; box-shadow:inset 0 0 0 1px #202738; }
.screen {
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:15px;
  background:#03060d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.screen-glare {
  position:absolute; inset:-40% 28% auto -20%; height:120%; width:60%;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.045),transparent 70%);
  transform:rotate(13deg); z-index:50; pointer-events:none;
}
.hinge { height:14px; width:50%; margin:auto; background:linear-gradient(90deg,#151a24,#596171,#151a24); border-radius:0 0 20px 20px; }
.base {
  height:130px; margin:0 22px; border-radius:7px 7px 36px 36px;
  background:linear-gradient(180deg,#343c4a,#151a25 80%);
  transform:perspective(800px) rotateX(66deg); transform-origin:top center; position:relative;
  box-shadow:0 45px 70px rgba(0,0,0,.45);
}
.front-edge { height:12px; margin: -42px 64px 0; background:linear-gradient(180deg,#1f2633,#0d1017); border-radius:0 0 80px 80px; box-shadow:0 16px 32px rgba(0,0,0,.4); }
.keyboard {
  display:grid; grid-template-columns:repeat(8,1fr); gap:6px; position:absolute; left:7%; right:7%; top:17px; height:60px;
}
.keyboard span { border-radius:4px; background:#10151f; box-shadow:inset 0 1px rgba(255,255,255,.06); }
.trackpad { width:25%; height:40px; position:absolute; left:50%; bottom:10px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.10); border-radius:8px; }
.laptop-caption { text-align:center; margin:-20px 0 0; letter-spacing:.2em; font:700 .63rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#59657b; }

/* BOOT + DESKTOP */
.boot {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#02040a; z-index:40;
  opacity:1; transition:opacity .5s ease, visibility .5s;
}
.boot.is-done { opacity:0; visibility:hidden; }
.boot-mark { width:92px; filter:drop-shadow(0 0 20px rgba(41,216,255,.35)); }
.boot-title { margin:14px 0 12px; font:800 1rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }
.boot-lines { display:flex; flex-direction:column; color:#7d8aa2; font:500 .62rem ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.55; }
.boot-lines span { opacity:0; animation: bootline .18s forwards; }
.boot-lines span:nth-child(1){animation-delay:.3s}
.boot-lines span:nth-child(2){animation-delay:.7s}
.boot-lines span:nth-child(3){animation-delay:1.05s}
.boot-lines span:nth-child(4){animation-delay:1.4s;color:var(--green)}

/* Launch gate notice. Sits above the boot screen while UNDER_CONSTRUCTION
   is set in script.js; nothing here affects the workspace once it is off.
   Styled as a terminal that fails to open the workspace. */
.boot-notice { position:absolute; inset:0; z-index:41; display:flex; align-items:center; justify-content:center; padding:20px; background:#02040a; }
.boot-notice[hidden] { display:none; }
.boot-terminal {
  width:min(560px,100%); border-radius:12px; overflow:hidden; background:rgba(3,6,12,.94); border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 40px rgba(41,216,255,.06);
}
.boot-notice:focus-visible { outline:0; }
.boot-notice:focus-visible .boot-terminal { outline:2px solid var(--cyan); outline-offset:2px; }
.boot-terminal-bar { display:flex; align-items:center; gap:10px; height:32px; padding:0 12px; background:rgba(255,255,255,.035); border-bottom:1px solid rgba(255,255,255,.055); }
.boot-terminal-dots { display:flex; gap:6px; }
.boot-terminal-dots i { width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.boot-terminal-dots i:nth-child(1){background:#ff5f57}.boot-terminal-dots i:nth-child(2){background:#febc2e}.boot-terminal-dots i:nth-child(3){background:#28c840}
.boot-terminal-title { flex:1; text-align:center; font:600 .61rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#8f9bb0; padding-right:46px; }
.boot-terminal-log { padding:16px 18px 18px; font:500 .7rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#b6c5d9; line-height:1.6; text-align:left; }
.boot-terminal-line { margin:0; font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; opacity:0; animation:bootline .18s forwards; }
.boot-terminal-line:nth-child(1){animation-delay:.1s}.boot-terminal-line:nth-child(2){animation-delay:.35s}.boot-terminal-line:nth-child(3){animation-delay:.6s}
.boot-terminal-line:nth-child(4){animation-delay:.85s}.boot-terminal-line:nth-child(5){animation-delay:1.25s}.boot-terminal-line:nth-child(6){animation-delay:1.4s}
.boot-terminal-line:nth-child(7){animation-delay:1.5s}.boot-terminal-line:nth-child(8){animation-delay:1.9s}.boot-terminal-line:nth-child(9){animation-delay:2.1s}.boot-terminal-line:nth-child(10){animation-delay:2.3s}
.boot-terminal .prompt { color:var(--green); }
.boot-terminal .ok { color:var(--green); }
.boot-terminal .fail { color:#ff6b6b; font-weight:750; }
.boot-terminal-detail { padding-left:7ch; color:var(--muted); }
.boot-terminal-gap { margin-top:.9em; }
.boot-terminal-links { display:flex; flex-wrap:wrap; gap:8px 22px; padding-left:2ch; }
.boot-terminal-links a { color:var(--cyan); font-weight:650; text-decoration:none; }
.boot-terminal-links a:hover, .boot-terminal-links a:focus-visible { text-decoration:underline; outline-offset:3px; }
.boot-terminal-cursor { display:inline-block; width:.55em; height:1em; vertical-align:-.15em; background:var(--green); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
@media (prefers-reduced-motion: reduce) {
  .boot-terminal-line { animation:none; opacity:1; }
  .boot-terminal-cursor { animation:none; }
}

.desktop { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; overflow:hidden; }
.desktop.is-ready { opacity:1; }
.topbar {
  position:absolute; z-index:20; top:0; left:0; right:0; height:34px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; background:rgba(5,8,17,.56); border-bottom:1px solid rgba(255,255,255,.055); backdrop-filter:blur(14px);
  font-size:.67rem;
}
.topbar-left,.topbar-right { display:flex; align-items:center; gap:12px; }
.brand-menu { display:flex; gap:7px; align-items:center; border:0; background:transparent; cursor:pointer; padding:3px 7px; border-radius:8px; font-weight:750; }
.brand-menu:hover { background:rgba(255,255,255,.06); }
.brand-menu img { width:19px; height:19px; object-fit:contain; }
.topbar-tag { color:#758196; font:600 .57rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.signal { color:var(--green); font-size:.5rem; text-shadow:0 0 8px var(--green); }

.wallpaper {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 75% 20%,rgba(255,79,216,.14),transparent 34%),
    radial-gradient(circle at 25% 75%,rgba(41,216,255,.12),transparent 31%),
    linear-gradient(125deg,#07101d,#0d0c1a 48%,#070813);
  overflow:hidden;
}
.grid {
  position:absolute; inset:0; opacity:.13;
  background-image:linear-gradient(rgba(41,216,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(41,216,255,.14) 1px,transparent 1px);
  background-size:38px 38px; mask-image:linear-gradient(to right,black,transparent 80%);
}
.wallpaper-copy { position:absolute; left:7.5%; top:21%; z-index:2; }
.wallpaper-kicker { color:var(--cyan); font:700 .6rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; }
.wallpaper h2 { margin:8px 0 6px; font-size:clamp(2rem,4vw,4.4rem); line-height:.88; letter-spacing:-.06em; }
.wallpaper h2 span { background:linear-gradient(90deg,var(--cyan),var(--pink),var(--orange)); -webkit-background-clip:text; color:transparent; }
.wallpaper p { color:#76839a; font:600 .75rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.wallpaper-mascot { position:absolute; right:1.6%; bottom:-24%; height:112%; opacity:.88; filter:drop-shadow(-22px 15px 35px rgba(0,0,0,.35)); }

.desktop-icons {
  position:absolute; right:3%; top:10%; z-index:8; display:grid; grid-template-columns:repeat(2,80px); gap:12px 16px;
}
.desktop-icon { background:transparent; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:.65rem; text-shadow:0 2px 5px #000; padding:7px 4px; border-radius:10px; }
.desktop-icon:hover { background:rgba(255,255,255,.055); }
.icon-tile {
  width:47px; height:47px; border-radius:14px; display:grid; place-items:center; font-weight:900; font-size:.85rem;
  background:rgba(15,18,32,.80); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 18px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.05);
}
.cyan{color:var(--cyan);box-shadow:0 0 24px rgba(41,216,255,.12)}
.magenta{color:var(--pink);box-shadow:0 0 24px rgba(255,79,216,.12)}
.purple{color:var(--purple);box-shadow:0 0 24px rgba(138,92,255,.12)}
.green{color:var(--green);box-shadow:0 0 24px rgba(124,255,114,.12)}
.orange{color:var(--orange);box-shadow:0 0 24px rgba(255,138,61,.12)}
.blue{color:#66a7ff;box-shadow:0 0 24px rgba(102,167,255,.12)}

.dock {
  position:absolute; z-index:30; bottom:10px; left:50%; transform:translateX(-50%);
  background:rgba(12,16,29,.65); border:1px solid rgba(255,255,255,.11); backdrop-filter:blur(18px); padding:5px 7px; border-radius:16px;
  display:flex; gap:5px; align-items:center; box-shadow:0 14px 30px rgba(0,0,0,.34);
}
.dock button { width:38px; height:38px; border:0; border-radius:11px; cursor:pointer; background:rgba(255,255,255,.055); font-weight:850; }
.dock button:hover { transform:translateY(-5px) scale(1.06); background:rgba(255,255,255,.11); }
.dock-divider { width:1px; height:28px; background:rgba(255,255,255,.12); margin:0 3px; }

/* WINDOWS */
.window-area { position:absolute; inset:34px 0 0; z-index:15; pointer-events:none; }
.app-window {
  --window-w: min(780px, 76%);
  --window-h: min(470px, 76%);
  position:absolute; width:var(--window-w); height:var(--window-h); left:50%; top:49%;
  transform:translate(-50%,-50%) scale(.92); opacity:0; visibility:hidden; pointer-events:none;
  background:var(--panel); border:1px solid rgba(161,198,255,.16); border-radius:14px; overflow:hidden;
  box-shadow:0 35px 80px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(22px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.app-window.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.app-window.is-minimized { opacity:0; pointer-events:none; transform:translate(-50%,20%) scale(.65); visibility:hidden; }
.app-window.is-maximized { width:calc(100% - 20px)!important; height:calc(100% - 24px)!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; }
.window-bar {
  height:34px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); padding:0 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); cursor:grab; user-select:none;
}
.window-bar:active { cursor:grabbing; }
.traffic { display:flex; gap:6px; width:80px; }
.traffic-btn { width:10px; height:10px; border-radius:50%; border:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.traffic-btn.red{background:#ff5f57}.traffic-btn.yellow{background:#febc2e}.traffic-btn.green{background:#28c840}
.window-title { flex:1; text-align:center; font:600 .61rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#8f9bb0; }
.window-spacer { width:80px; }
.window-content { height:calc(100% - 34px); overflow:auto; padding:24px; scrollbar-width:thin; scrollbar-color:#3a4660 transparent; }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.section-head h3,.about-copy h3,.gaming-hero h3 { margin:0; font-size:clamp(1.55rem,3vw,2.6rem); letter-spacing:-.05em; }
.status-pill { border:1px solid rgba(41,216,255,.25); color:var(--cyan); border-radius:999px; padding:6px 9px; font:750 .55rem ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.green-pill { color:var(--green); border-color:rgba(124,255,114,.25); }
.orange-pill { color:var(--orange); border-color:rgba(255,138,61,.25); }

/* BLOG */
.post-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.post-card {
  min-height:140px; text-align:left; padding:16px; border-radius:13px; cursor:pointer; color:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:auto 1fr; gap:7px 12px; transition:.2s ease;
}
.post-card:hover { transform:translateY(-3px); border-color:rgba(41,216,255,.26); box-shadow:0 18px 32px rgba(0,0,0,.18); }
.post-index { color:#55627a; font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace; grid-row:1/4; }
.post-meta { color:var(--cyan); font:700 .55rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.post-card strong { font-size:1rem; line-height:1.22; }
.post-link { font-size:.67rem; color:#8d99ad; align-self:end; }

/* APPS */
.app-showcase { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.phone-card { display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:center; }
.phone { width:124px; aspect-ratio:9/18.5; border:4px solid #293246; border-radius:24px; padding:8px; background:#05070d; box-shadow:0 20px 35px rgba(0,0,0,.35), 0 0 30px rgba(138,92,255,.12); }
.phone-notch { width:46px; height:10px; border-radius:0 0 8px 8px; background:#05070d; margin:-8px auto 6px; }
.phone-ui { height:100%; border-radius:15px; padding:18px 10px 10px; background:linear-gradient(160deg,#191430,#0b1222); text-align:center; display:flex; flex-direction:column; align-items:center; }
.mock-two .phone-ui { background:linear-gradient(160deg,#07212a,#0b1420); }
.app-glyph { width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--pink));font-weight:900;box-shadow:0 0 24px rgba(138,92,255,.28); }
.mock-two .app-glyph { background:linear-gradient(135deg,#1bc8a6,var(--green)); color:#06100d; }
.phone-ui h4 { margin:12px 0 4px; font-size:.82rem; }
.phone-ui p { font-size:.55rem; line-height:1.4; color:#9ba8bb; }
.fake-button { margin-top:auto; width:100%; border-radius:8px; padding:7px; background:linear-gradient(90deg,var(--purple),var(--pink)); font-size:.55rem; font-weight:800; }
.mock-two .fake-button { background:linear-gradient(90deg,#0fbf9f,var(--green)); color:#06100d; }
.project-label { font:700 .54rem ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--cyan); letter-spacing:.08em; }
.phone-copy h4 { font-size:1.15rem; margin:6px 0; }
.phone-copy p { color:#8996aa; font-size:.74rem; line-height:1.55; }

/* WEBSITES */
.browser-card { border:1px solid rgba(255,255,255,.09); border-radius:14px; overflow:hidden; background:#090d17; }
.browser-chrome { height:34px; display:flex; gap:5px; align-items:center; padding:0 10px; background:#151b29; }
.browser-chrome span { width:8px;height:8px;border-radius:50%;background:#374157; }
.address { flex:1; margin-left:8px; height:20px; display:flex; align-items:center; padding:0 10px; border-radius:8px; background:#0d111b; color:#5d6a7e; font:500 .52rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.browser-body { padding:26px; display:flex; justify-content:space-between; align-items:center; background:radial-gradient(circle at 80% 30%,rgba(138,92,255,.12),transparent 30%),#090e19; }
.browser-body h4 { font-size:1.6rem; margin:4px 0 8px; }
.browser-body p { margin:0; max-width:480px; color:#909db0; line-height:1.55; font-size:.77rem; }
.browser-badge { width:82px;height:82px;border-radius:22px;display:grid;place-items:center;color:var(--cyan);font:900 1.2rem ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid rgba(41,216,255,.20);background:rgba(41,216,255,.06);box-shadow:0 0 30px rgba(41,216,255,.10); }
.project-list { margin-top:14px; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; }
.list-row { display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); font-size:.72rem; }
.list-row:last-child{border-bottom:0}.list-row span{color:#536078;font:700 .58rem ui-monospace,SFMono-Regular,Menlo,monospace}.list-row em{font-style:normal;color:var(--green);font:750 .53rem ui-monospace,SFMono-Regular,Menlo,monospace}

/* ROADMAP */
.roadmap { display:grid; gap:12px; }
.roadmap-card { padding:16px; border-radius:13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.roadmap-top { display:flex; justify-content:space-between; align-items:center; }
.roadmap-top strong { font-size:.9rem; }.roadmap-top span{font:700 .6rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--orange)}
.roadmap-card p { color:#8794aa; line-height:1.5; font-size:.72rem; margin:7px 0 11px; }
.progress { height:6px; background:#101727; border-radius:99px; overflow:hidden; }.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));box-shadow:0 0 12px rgba(138,92,255,.35)}
.tags { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }.tags span{font:650 .52rem ui-monospace,SFMono-Regular,Menlo,monospace;color:#91a0b6;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:4px 7px}

/* GAMING */
.gaming-hero { display:grid; grid-template-columns:1.5fr 1fr; gap:30px; align-items:center; padding:4px 0 20px; }
.gaming-hero p { color:#8996a9; font-size:.74rem; line-height:1.55; max-width:480px; }
.pixel-castle { height:130px; position:relative; filter:drop-shadow(0 0 20px rgba(255,138,61,.18)); }
.tower,.wall { position:absolute; bottom:10px; background:linear-gradient(180deg,#ffb55f,#d5672f); box-shadow:inset 0 0 0 2px #7f3921; image-rendering:pixelated; }
.tower { width:45px; height:90px; clip-path:polygon(0 16%,18% 16%,18% 0,38% 0,38% 16%,62% 16%,62% 0,82% 0,82% 16%,100% 16%,100% 100%,0 100%); }
.t1{left:22%}.t2{right:18%;height:106px}.wall{left:32%;right:28%;height:52px}.flag{position:absolute;right:26%;bottom:116px;width:38px;height:22px;background:var(--pink);clip-path:polygon(0 0,100% 20%,72% 100%,0 80%);box-shadow:0 0 12px rgba(255,79,216,.35)}
.game-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px; }
.game-card { padding:15px; border-radius:13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.game-card.featured { background:linear-gradient(135deg,rgba(255,138,61,.11),rgba(138,92,255,.07)); border-color:rgba(255,138,61,.18); }
.game-badge { font:750 .5rem ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--orange); letter-spacing:.08em; }
.game-card h4 { margin:8px 0 5px; font-size:.9rem; }.game-card p{margin:0;color:#8996a9;font-size:.68rem;line-height:1.45}

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1.15fr .85fr; height:100%; align-items:center; }
.about-copy { padding:12px 0 12px 10px; position:relative; z-index:2; }
.about-copy .lead { font-size:.9rem; color:#c1cada; line-height:1.55; max-width:520px; }
.about-copy>p:not(.eyebrow):not(.lead){font-size:.75rem;color:#8492a8;line-height:1.55;max-width:520px}
.about-actions { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.social-button { text-decoration:none;border:1px solid rgba(41,216,255,.18);background:rgba(41,216,255,.07);color:white;padding:9px 12px;border-radius:9px;font-size:.65rem;cursor:pointer}
.social-button.ghost{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.about-visual { height:100%; position:relative; overflow:hidden; }
.about-visual::before { content:"";position:absolute;inset:12% 10%;background:radial-gradient(circle,rgba(138,92,255,.28),transparent 60%);filter:blur(12px); }
.about-visual img { position:absolute; height:115%; right:-1%; bottom:-33%; filter:drop-shadow(-10px 10px 30px rgba(0,0,0,.35)); }

/* TERMINAL */
.terminal-window { --window-w:min(720px,72%); --window-h:min(390px,68%); background:rgba(3,6,12,.94); }
.terminal-body { height:calc(100% - 34px); padding:16px; overflow:hidden; font:500 .66rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#b6c5d9; }
.terminal-output { height:calc(100% - 30px); overflow:auto; white-space:pre-wrap; line-height:1.55; }
.terminal-output .prompt { color:var(--green); }.terminal-output .accent{color:var(--cyan)}.terminal-output .dim{color:#617087}
.terminal-form { display:flex; gap:8px; align-items:center; height:30px; }.terminal-form label{color:var(--green)}.terminal-form input{flex:1;border:0;outline:0;background:transparent;color:white;font:inherit}

/* READER */
.reader-window { --window-w:min(720px,76%); --window-h:min(470px,78%); }
.reader-content { max-width:700px; margin:auto; }
.reader-content h1 { font-size:2rem; letter-spacing:-.045em; margin:8px 0 14px; }
.reader-content .article-meta { color:var(--cyan); font:700 .57rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.reader-content p { color:#a4b0c2; font-size:.78rem; line-height:1.75; }
.reader-content blockquote { margin:18px 0; border-left:2px solid var(--purple); padding:8px 14px; color:#dde4ef; background:rgba(138,92,255,.05); font-size:.82rem; line-height:1.6; }

/* COMMAND PALETTE */
.command-hint { position:absolute; right:12px; bottom:12px; z-index:31; border:1px solid rgba(255,255,255,.08); background:rgba(10,14,26,.5); border-radius:9px; padding:6px 8px; color:#718096; font:650 .54rem ui-monospace,SFMono-Regular,Menlo,monospace; cursor:pointer; backdrop-filter:blur(10px); }
.command-palette { position:absolute; inset:0; z-index:80; background:rgba(1,3,9,.58); backdrop-filter:blur(8px); display:grid; place-items:start center; padding-top:11%; opacity:0; visibility:hidden; transition:.15s; }
.command-palette.is-open { opacity:1; visibility:visible; }
.command-card { width:min(520px,80%); border:1px solid rgba(255,255,255,.11); border-radius:14px; background:#0d1220; box-shadow:0 30px 70px rgba(0,0,0,.5); overflow:hidden; }
.command-top { display:flex; align-items:center; gap:9px; padding:10px; border-bottom:1px solid rgba(255,255,255,.07); }
.command-top input { flex:1; background:transparent; border:0; outline:0; color:white; font-size:.72rem; }
kbd { color:#647187; border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:2px 5px; font:600 .52rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.command-results { padding:6px; }
.command-item { width:100%; display:flex; justify-content:space-between; align-items:center; border:0; border-radius:8px; padding:9px 10px; color:#bec8d7; background:transparent; cursor:pointer; text-align:left; font-size:.67rem; }
.command-item:hover,.command-item.active { background:rgba(41,216,255,.07); color:white; }.command-item span{color:#65738a;font-size:.57rem}

/* MOTION */
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin { to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes bootline { from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes unspin { to{transform:rotate(-360deg)} }
@keyframes orbitfade { 0%,22%{opacity:1} 34%{opacity:.28} 66%{opacity:.28} 78%,100%{opacity:1} }
/* Inner ring also dips at the top, where it passes behind the mark on desktop. */
@keyframes orbitfade-inner { 0%{opacity:.3} 9%,22%{opacity:1} 34%{opacity:.28} 66%{opacity:.28} 78%,91%{opacity:1} 100%{opacity:.3} }
@keyframes ringin { from{opacity:0;scale:.6} to{opacity:1;scale:1} }
@keyframes satin { from{opacity:0;scale:.4} to{opacity:1;scale:1} }
@keyframes rise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes land { from{opacity:0;transform:translateY(18px) scale(.94);box-shadow:0 0 0 rgba(41,216,255,0)} 70%{box-shadow:0 0 90px rgba(41,216,255,.45)} to{opacity:1;transform:none} }
@keyframes poweron { 0%{opacity:0;filter:brightness(3)} 12%{opacity:1} 20%{opacity:.2} 32%{opacity:1;filter:brightness(2)} 45%{opacity:.5} 60%{opacity:1;filter:brightness(1.3)} 100%{opacity:1;filter:none} }
@keyframes breathe { 0%,100%{opacity:.4} 50%{opacity:.7} }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .intro-mark, .eyebrow, .intro h1 .w, .intro h1 .rotator-line, .intro-copy, .start-btn, .intro-hint, .intro-links, .intro-orbit, .sat img { animation-delay:0s!important; }
  .type-cursor { display:none; }
  .sat { opacity:.55; }
  .intro-orbit { translate:0 0; }
}

/* MOBILE / TABLET */
@media (max-width: 820px) {
  body { overflow-y:auto; overflow-x:hidden; }
  .stage { min-height:100svh; padding:12px; place-items:center; }
  .intro { position:fixed; }
  .sat, .orbit-two .sat { width:38px; height:38px; margin:-19px 0 0 -19px; }
  .sat img { filter:drop-shadow(0 0 8px rgba(41,216,255,.3)); }
  .orbit-one .sat { opacity:.85; }
  .laptop-shell { width:100%; margin:0; }
  .lid { padding:5px; border-radius:18px; }
  .screen-bezel { padding:6px; border-radius:14px; }
  .screen { aspect-ratio:9/16; min-height:82svh; }
  .base,.hinge,.front-edge,.laptop-caption { display:none; }
  .wallpaper-mascot { height:76%; right:-22%; bottom:-9%; opacity:.55; }
  .wallpaper-copy { left:7%; top:17%; }
  .wallpaper h2 { font-size:12vw; }
  .desktop-icons { left:5%; right:auto; top:44%; grid-template-columns:repeat(2,82px); }
  .topbar-tag { display:none; }
  .dock { bottom:8px; max-width:92%; }
  .dock button { width:34px;height:34px; }
  .command-hint { display:none; }

  .window-area { inset:34px 0 0; }
  .app-window, .terminal-window, .reader-window {
    --window-w:calc(100% - 10px);
    --window-h:calc(100% - 12px);
    border-radius:11px;
  }
  .window-content { padding:16px; }
  .post-grid,.app-showcase,.game-grid,.gaming-hero,.about-grid { grid-template-columns:1fr; }
  .post-card { min-height:112px; }
  .phone-card { grid-template-columns:110px 1fr; }
  .phone { width:102px; }
  .about-visual { display:none; }
  .gaming-hero { gap:6px; }
  .pixel-castle { height:90px; }
  .section-head { align-items:flex-start; }
}

@media (max-width: 520px) {
  .desktop-icons { top:40%; grid-template-columns:repeat(2,72px); gap:8px 12px; }
  .desktop-icon { font-size:.58rem; }
  .icon-tile { width:42px;height:42px; }
  .dock button:nth-child(3), .dock button:nth-child(4) { display:none; }
  .phone-card { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .app-showcase { gap:18px; }
  .window-title { font-size:.52rem; }
  .traffic,.window-spacer { width:58px; }
}

/* Interaction polish and accessible controls */
:root { color-scheme: dark; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex="-1"]:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.intro-mark, .boot-mark { height:auto; }
.wallpaper-mascot, .about-visual img { width:auto; }
.intro-hint, .laptop-caption, .topbar-tag, .wallpaper p { color:var(--muted); }
.intro-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 20px; }
.intro-links a, .text-button { color:#c1cada; font-size:.8rem; text-underline-offset:4px; }
.intro-links a { padding:12px 0; }
.text-button { background:none; border:0; cursor:pointer; padding:12px 0; }
.intro-links a:hover, .text-button:hover { color:var(--cyan); }
.screen { min-height:560px; }
.window-area { inset:40px 0 72px; }
.app-window { --window-w:min(900px, 90%); --window-h:94%; top:49%; background:rgba(11,15,30,.97); }
.app-window.is-maximized { height:calc(100% - 8px)!important; width:calc(100% - 12px)!important; }
.window-bar { height:44px; padding:0 8px; touch-action:none; }
.traffic { width:96px; gap:2px; }
.window-spacer { width:96px; }
.traffic-btn { position:relative; width:28px; height:32px; background:transparent!important; box-shadow:none; padding:0; }
.traffic-btn::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; left:8px; top:10px; }
.traffic-btn.red::before { background:#ff5f57; }
.traffic-btn.yellow::before { background:#febc2e; }
.traffic-btn.green::before { background:#28c840; }
/* Draw the symbols geometrically so font baselines cannot shift them. */
.traffic-btn::after { content:""; position:absolute; width:7px; height:7px; left:50%; top:50%; transform:translate(-50%,-50%); background:linear-gradient(#0b0f1e,#0b0f1e) center / 100% 1.25px no-repeat, linear-gradient(#0b0f1e,#0b0f1e) center / 1.25px 100% no-repeat; }
.traffic-btn.red::after { transform:translate(-50%,-50%) rotate(45deg); }
.traffic-btn.yellow::after { background:linear-gradient(#0b0f1e,#0b0f1e) center / 100% 1.25px no-repeat; }
.window-title { color:#b5c1d4; font-size:.7rem; }
.window-content, .terminal-body { height:calc(100% - 44px); overscroll-behavior:contain; }
.window-content { padding:24px; }
.section-head { flex-wrap:wrap; gap:12px; }
.post-index, .post-link, .address, .list-row span, .command-item span, .terminal-output .dim { color:var(--muted); }
.post-meta, .project-label, .status-pill, .game-badge, .tags span { font-size:.65rem; }
.phone-copy p, .browser-body p, .roadmap-card p, .gaming-hero p, .game-card p, .about-copy>p:not(.eyebrow):not(.lead), .reader-content p { font-size:.875rem; line-height:1.65; color:#aeb9ca; }
.reader-content h2 { font-size:clamp(1.5rem,4vw,2rem); letter-spacing:-.04em; margin:12px 0 20px; }
.social-button { display:inline-flex; align-items:center; min-height:44px; font-size:.75rem; line-height:1.5; }
.social-button:hover { background:rgba(41,216,255,.14); border-color:var(--cyan); }
.app-showcase { gap:20px; }
.product-card { min-width:0; }
.product-art { height:156px; border:1px solid var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; overflow:hidden; }
.momento-art { background:#132020; }
.paper-note { display:block; padding:18px 28px; color:#382f20; background:#f4df9c; transform:rotate(-5deg); font:600 1.25rem/1.3 Georgia,serif; box-shadow:0 8px 16px #0003; }
.paper-note small { display:block; margin-top:14px; font:700 .5rem ui-monospace,monospace; letter-spacing:.12em; }
.cipher-art { flex-direction:column; gap:18px; background:#161828; }
.cipher-label { color:#aeb9ca; font:600 .5rem ui-monospace,monospace; letter-spacing:.14em; }
.cipher-tiles { display:flex; gap:8px; }
.cipher-tiles>span { width:38px; text-align:center; border-bottom:2px solid var(--cyan); font:600 1.4rem ui-monospace,monospace; }
.cipher-tiles small { display:block; font-size:.6rem; color:var(--cyan); padding:5px; }
.dock button { width:44px; height:44px; position:relative; transition:transform .15s, background .15s; }
.dock button.is-running::after { content:""; position:absolute; bottom:3px; left:calc(50% - 2px); width:4px; height:4px; border-radius:50%; background:var(--cyan); }
.command-hint { min-height:44px; min-width:44px; color:#c1cada; font-size:.7rem; }
.terminal-body { font-size:.8rem; }
.boot-terminal-log { font-size:.8rem; }
.terminal-output { overflow-wrap:anywhere; }
.terminal-form input, .command-top input { min-width:0; }
.command-palette { position:fixed; inset:0; margin:auto; padding:0; width:min(560px,calc(100vw - 32px)); height:fit-content; max-height:calc(100dvh - 32px); border:0; overflow:auto; background:transparent; color:var(--light); }
.command-palette:not([open]) { display:none; }
.command-palette::backdrop { background:rgba(1,3,9,.75); backdrop-filter:blur(8px); }
.command-card { width:100%; }
.command-top { padding:14px; }
.command-top input { font-size:1rem; min-height:44px; }
.palette-close { color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:6px; min-width:44px; min-height:44px; cursor:pointer; }
.command-item { min-height:48px; font-size:.85rem; gap:12px; }
.command-item span { font-size:.75rem; }
.command-item:focus-visible { outline-offset:-3px; background:rgba(41,216,255,.08); }
@media (max-width:820px) {
  .boot-terminal-log { padding:14px; }
  .boot-terminal-detail { padding-left:0; }
  .boot-terminal-title { padding-right:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stage { padding:8px; }
  .screen { aspect-ratio:auto; height:calc(100svh - 38px); min-height:540px; }
  .window-area { inset:38px 0 72px; }
  .app-window, .terminal-window, .reader-window { --window-w:calc(100% - 8px); --window-h:calc(100% - 8px); }
  .window-content { padding:16px; }
  .window-bar { cursor:default; }
  .desktop-icons { top:auto; bottom:85px; grid-template-columns:repeat(3,78px); gap:8px; }
  .desktop-icon { font-size:.7rem; }
  .desktop-icons .icon-tile { width:44px; height:44px; }
  .wallpaper-copy { top:12%; }
  .wallpaper h2 { font-size:clamp(2.5rem,9vw,4.5rem); }
  .dock { max-width:calc(100% - 12px); gap:2px; padding:4px; }
  .dock button { width:38px; height:44px; flex-shrink:0; }
  .section-head h3 { font-size:1.7rem; }
  .browser-body { padding:18px; }.browser-badge { display:none; }
  .about-copy { padding:0; }
  .terminal-form { gap:4px; font-size:.7rem; }
  .terminal-form input { font-size:16px; }
}
@media (max-width:520px) {
  .traffic, .window-spacer { width:86px; flex-shrink:0; }
  .window-title { font-size:.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dock button:nth-child(3), .dock button:nth-child(4) { display:block; }
  .dock { gap:0; }.dock-divider { margin:0 2px; }
  .dock button { width:36px; }
  .command-item { align-items:flex-start; flex-direction:column; gap:4px; }
  .intro h1 { font-size:clamp(2.4rem,10vw,3.5rem); }
  .intro-mark { width:100px; }
}
@media (max-height:560px) {
  .intro { position:relative; padding:20px 0; }
  .intro.is-hidden { display:none; }
  .laptop-shell:not(.is-visible) { display:none; }
}
/* Keep decoration inside the document bounds on narrow screens. */
.ambient-b { right:0; width:min(500px, 100vw); }
.intro-orbit { max-width:100%; height:auto; aspect-ratio:1; }
.stage { grid-template-columns:minmax(0, 1fr); }
.laptop-shell { width:min(1240px, 100%); min-width:0; }
.screen { width:100%; }
.stage { overflow:clip; }
@media (min-width:821px) {
  .laptop-shell { margin-top:0; }
  .screen { min-height:640px; }
}
@media (min-width:821px) {
  .product-art { height:120px; }
}

/* Temporary, non-interactive bands used by the dock minimize animation. */
.app-window.is-minimized { transition:none; }
.genie-layer { position:absolute; inset:0; z-index:70; pointer-events:none; overflow:hidden; }
.genie-band { position:absolute; overflow:hidden; transform-origin:0 0; will-change:transform, opacity; }
.genie-copy { position:absolute!important; left:0!important; top:var(--genie-top)!important; width:100%!important; height:var(--genie-height)!important; transform:none!important; margin:0!important; opacity:1!important; visibility:visible!important; transition:none!important; border:1px solid rgba(161,198,255,.16); border-radius:14px; overflow:hidden; background:#0b0f1e; box-shadow:none!important; backdrop-filter:none!important; }

/* Phones: both rings would otherwise collapse to the intro width and share one circle whose top point sits on the logo, so
   every satellite hid behind it in turn. Separate them like desktop: the outer ring clears above the mark, the inner ring
   the rings are centred on the mark itself, so satellites orbit the logo, clear it at the top and sides, and only pass behind
   the eyebrow and headline at the bottom, where the orbit fade already dims them. Fixed content never adds scroll. */
@media (max-width:820px) {
  .intro .orbit-one, .intro .orbit-two { top:68px; }
  .intro .orbit-one { width:min(76%, 330px); }
  .intro .orbit-two { width:min(116%, 560px); max-width:none; }
}

/* The laptop from the workspace waits under the intro, lid cracked, screen glowing, and leans open with more light as the
   pointer nears it or the Start button. It keeps the hidden state's transform, so pressing Start continues the same motion
   the workspace already uses. Runs on every viewport; touch devices (no hover to sense "near" with) get the brighter,
   more-open state permanently instead of a proximity reaction — see the noHover branch in script.js. */
.laptop-shell.is-teasing:not(.is-visible) { opacity:.62; transition:opacity .5s ease, transform .6s cubic-bezier(.2,.9,.2,1); }
.laptop-shell.is-teasing:not(.is-visible) .lid-wrap { transform:rotateX(-80deg); transition:transform .7s cubic-bezier(.2,.9,.2,1); }
.laptop-shell.is-teasing.is-near:not(.is-visible) { opacity:.9; }
.laptop-shell.is-teasing.is-near:not(.is-visible) .lid-wrap { transform:rotateX(-70deg); }
/* Opaque cover hides the boot screen until launch; a separate layer carries the light so dimming it never reveals text. */
.laptop-shell.is-teasing:not(.is-visible) .screen::before { content:""; position:absolute; inset:0; z-index:45; pointer-events:none; border-radius:inherit; background:#02040a; }
.laptop-shell.is-teasing:not(.is-visible) .screen::after { content:""; position:absolute; inset:0; z-index:46; pointer-events:none; border-radius:inherit;
  background:radial-gradient(70% 60% at 50% 60%, rgba(41,216,255,.42), rgba(138,92,255,.2) 45%, rgba(2,4,10,0) 75%); animation:breathe 3.2s ease-in-out infinite; transition:opacity .5s ease; }
.laptop-shell.is-teasing.is-near:not(.is-visible) .screen::after { animation:none; opacity:.8; }
.laptop-shell.is-teasing:not(.is-visible) .base::after { content:""; position:absolute; left:8%; right:8%; top:-46px; height:90px; pointer-events:none; border-radius:50%; filter:blur(22px);
  background:radial-gradient(50% 60% at 50% 50%, rgba(41,216,255,.28), rgba(138,92,255,.1) 55%, transparent 75%); opacity:.4; transition:opacity .5s ease; }
.laptop-shell.is-teasing.is-near:not(.is-visible) .base::after { opacity:.8; }
/* Pointer-only hit layer over the laptop footprint: below the intro in stacking, so Start and the links keep priority. */
.laptop-hit.is-active { display:block; }
.laptop-hit { display:none; position:absolute; z-index:10; cursor:pointer; background:transparent; border:0; padding:0; margin:0; }
/* Phones: a shrunken 3D laptop below the fold read as cheap and needed a scroll. After launch the workspace on phones is a
   full-bleed panel that reads as a phone app, so the tease is that panel itself, peeking in as a bottom sheet: the real
   .laptop-shell, lid flat, boot screen hidden so the actual topbar and wallpaper show through the top strip, breathing at
   the bottom edge. Tap or swipe up (script.js) slides it up into the full workspace. The .is-near variants are listed
   because touch devices carry .is-near permanently and its desktop rules would otherwise outrank these. */
@media (max-width:820px) {
  .stage { position:relative; }
  .laptop-shell.is-teasing:not(.is-visible), .laptop-shell.is-teasing.is-near:not(.is-visible) {
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; margin:0; opacity:1; transform:none; z-index:25; --peek:88px;
    translate:0 calc(100% - var(--peek)); animation:sheetbreathe 3.6s ease-in-out infinite; transition:translate .5s cubic-bezier(.2,.9,.2,1);
  }
  .laptop-shell.is-teasing.is-rising:not(.is-visible) { animation:none; translate:0 0; }
  /* While rising, crossfade the peeked workspace into the boot screen so the sheet arrives on boot and hands over cleanly,
     instead of flashing the whole workspace and then cutting to black. */
  .laptop-shell.is-teasing.is-rising:not(.is-visible) .desktop { opacity:0; }
  .laptop-shell.is-teasing.is-rising:not(.is-visible) .boot { opacity:1; visibility:visible; }
  .laptop-shell.is-teasing:not(.is-visible) .lid-wrap, .laptop-shell.is-teasing.is-near:not(.is-visible) .lid-wrap { transform:none; transition:none; }
  .laptop-shell.is-teasing:not(.is-visible) .lid { border-radius:24px 24px 0 0; box-shadow:0 -16px 44px rgba(41,216,255,.22), 0 -1px 0 rgba(255,255,255,.1); }
  .laptop-shell.is-teasing:not(.is-visible) .screen::before, .laptop-shell.is-teasing:not(.is-visible) .screen::after { content:none; }
  .laptop-shell.is-teasing:not(.is-visible) .screen-bezel::before { content:""; position:absolute; top:9px; left:50%; width:44px; height:5px; border-radius:999px; background:rgba(255,255,255,.42); translate:-50% 0; z-index:60; }
  .laptop-shell.is-teasing:not(.is-visible) .boot { opacity:0; visibility:hidden; }
  .laptop-shell.is-teasing:not(.is-visible) .desktop { opacity:1; }
  /* The sheet sits above the intro here, so the hit layer must too, or taps on the strip would land on the intro's box. */
  .laptop-hit { z-index:30; touch-action:none; }
}
@media (max-width:820px) and (max-height:720px) { .laptop-shell.is-teasing:not(.is-visible), .laptop-shell.is-teasing.is-near:not(.is-visible) { --peek:64px; } }
@keyframes sheetbreathe { 0%,100%{translate:0 calc(100% - var(--peek))} 50%{translate:0 calc(100% - var(--peek) - 8px)} }