/* =========================================================
   Mini screens
   Every size is in cqw (percent of the screen's own width); screens are
   roughly 100cqw × 64cqw. Each project has its own palette and type.
   ========================================================= */
.scr {
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-ui: 'Archivo', 'Bricolage Grotesque', system-ui, sans-serif;
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  font-family: var(--f-ui);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
.scr-in { position: absolute; inset: 0; overflow: hidden; }
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr h4, .scr p, .scr ul, .scr li, .scr figure { margin: 0; padding: 0; list-style: none; font-weight: inherit; }
.scr em { font-style: italic; }
.scr svg { display: block; }
/* film grain, so nothing reads as flat vector */
.scr::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.scr--img { background: #fff; }
.scr--img img, .scr--img video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.scr--img::after { display: none; }

/* AR / crop corner brackets */
.scr .c { position: absolute; width: 3.4cqw; height: 3.4cqw; border: 0 solid var(--c-col, currentColor); }
.scr .c.tl { left: 0; top: 0; border-width: .3cqw 0 0 .3cqw; }
.scr .c.tr { right: 0; top: 0; border-width: .3cqw .3cqw 0 0; }
.scr .c.bl { left: 0; bottom: 0; border-width: 0 0 .3cqw .3cqw; }
.scr .c.br { right: 0; bottom: 0; border-width: 0 .3cqw .3cqw 0; }

/* =========================================================
   Voice — telecom, React Native
   ========================================================= */
.scr--voice {
  background:
    radial-gradient(60% 80% at 64% 46%, rgba(77, 107, 255, .28), transparent 70%),
    radial-gradient(40% 50% at 90% 90%, rgba(139, 92, 255, .16), transparent 70%),
    linear-gradient(160deg, #0d1022, #080912 70%);
  color: #eef0ff;
}
.scr--voice::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .06) .12cqw, transparent .16cqw) 0 0 / 2.4cqw 2.4cqw; -webkit-mask: linear-gradient(90deg, transparent, #000 40%, transparent); mask: linear-gradient(90deg, transparent, #000 40%, transparent); }

/* left: the headline, and the menu it replaces */
.vo-copy { position: absolute; left: 5cqw; top: 6cqw; width: 38cqw; }
.vo-k { display: flex; align-items: center; gap: .8cqw; font: 500 1.3cqw var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8f9cff; }
.vo-k i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #4d6bff; box-shadow: 0 0 1.2cqw #4d6bff; animation: pulse 1.4s infinite; }
.vo-copy h4 { margin-top: 2cqw; font: 400 6.6cqw/.95 var(--f-serif); letter-spacing: -0.01em; color: #fff; }
.vo-copy h4 em { color: #8f9cff; }
.vo-copy .vo-menu { display: flex; flex-direction: column; width: 26cqw; margin-top: 3.4cqw; }
.vo-menu li { position: relative; display: flex; justify-content: space-between; padding: .85cqw 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 1.45cqw; color: rgba(238, 240, 255, .3); text-decoration: line-through; text-decoration-color: rgba(143, 156, 255, .7); text-decoration-thickness: 1px; }
.vo-stats { display: flex; gap: 4cqw; margin-top: 3cqw; }
.vo-stats span { display: flex; flex-direction: column; gap: .5cqw; font: 500 1.05cqw var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #7d84a8; }
.vo-stats b { font: 400 4.2cqw/1 var(--f-serif); text-transform: none; color: #fff; }
.vo-stats small { margin-left: .3cqw; font: 500 1.2cqw var(--f-mono); color: #8f9cff; }
.vo-foot { position: absolute; left: 5cqw; bottom: 3.6cqw; font: 500 1.2cqw var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #5c6283; }

/* centre: the phone, built round the voice orb */
.ph {
  position: absolute; left: 49cqw; top: 6cqw; width: 23cqw; height: 50cqw; padding: .6cqw;
  border-radius: 3.8cqw; background: #05060c;
  box-shadow: 0 0 0 .25cqw #2a2d3d inset, 0 4cqw 7cqw -2cqw rgba(0, 0, 0, .7), 0 0 8cqw -2cqw rgba(77, 107, 255, .45);
}
.ph-scr { position: relative; height: 100%; padding: 2cqw 1.8cqw 1.4cqw; border-radius: 3.2cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, #0c0f22, #111633 60%, #0c0f22); }
.ph-scr::before { content: ''; position: absolute; left: 50%; top: .9cqw; width: 6.4cqw; height: 1.7cqw; translate: -50% 0; border-radius: 1cqw; background: #05060c; }
.ph-st { align-self: stretch; display: flex; justify-content: space-between; align-items: center; font-size: 1.2cqw; font-weight: 600; }
.ph-ic { display: flex; gap: .4cqw; }
.ph-ic i { width: 1.1cqw; height: .8cqw; border-radius: .2cqw; background: currentColor; opacity: .85; }
.ph-ic i:last-child { width: 1.9cqw; }
.vo-lis { display: flex; align-items: center; gap: .6cqw; margin-top: 3.4cqw; font: 500 1.05cqw var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8f9cff; }
.vo-lis i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #4d6bff; animation: pulse 1.2s infinite; }
.vo-orb { position: relative; display: grid; place-items: center; width: 12cqw; aspect-ratio: 1; margin-top: 2.4cqw; border-radius: 50%; box-shadow: 0 0 0 1.4cqw rgba(77, 107, 255, .12), 0 0 0 2.8cqw rgba(77, 107, 255, .05); animation: orb 2.4s ease-in-out infinite; }
.vo-orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #4d6bff, #8b5cff, #36c9ff, #4d6bff); filter: blur(.5cqw); animation: spin 6s linear infinite; }
.vo-orb i { position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #c9d4ff, #5a74ff 45%, #2a2f86 100%); }
.ph-scr .vo-tx { margin-top: 2.8cqw; font-size: 1.6cqw; line-height: 1.2; letter-spacing: -0.02em; text-align: center; color: #fff; }
.vo-tx span { white-space: nowrap; color: #a8b5ff; box-shadow: inset 0 -.35cqw 0 rgba(77, 107, 255, .45); }
.vo-ent { display: flex; gap: .5cqw; margin-top: 1.2cqw; }
.vo-ent span { white-space: nowrap; padding: .35cqw .8cqw; border-radius: 2cqw; background: rgba(77, 107, 255, .16); box-shadow: inset 0 0 0 1px rgba(143, 156, 255, .25); font: 500 .9cqw var(--f-mono); color: #c3cbff; }
.vo-sheet { align-self: stretch; display: flex; flex-direction: column; gap: .5cqw; margin: auto -1.2cqw 0; padding: 1.6cqw 1.8cqw 1.4cqw; border-radius: 2cqw; background: #f7f7fb; color: #12142a; }
.vo-sheet-hd { display: flex; align-items: baseline; justify-content: space-between; }
.vo-sheet-hd span { font-size: 1.7cqw; font-weight: 600; letter-spacing: -0.02em; }
.vo-sheet-hd b { font-size: 2.8cqw; font-weight: 600; letter-spacing: -0.04em; }
.vo-sheet-sub { font-size: 1.05cqw; color: #6b6f86; }
.vo-btn { margin-top: .8cqw; padding: 1.2cqw; border-radius: 1.2cqw; background: #3d5bff; color: #fff; text-align: center; font-size: 1.35cqw; font-weight: 600; }
.vo-hint { text-align: center; font: 500 .95cqw var(--f-mono); color: #8a8ea6; }

/* right: what ran on the phone to get there */
.vo-pipe { position: absolute; left: 75.5cqw; top: 8cqw; width: 21cqw; display: flex; flex-direction: column; gap: 2cqw; }
.vo-pipe::before { content: ''; position: absolute; left: 1.3cqw; top: 2cqw; bottom: 2cqw; border-left: 1px dashed rgba(143, 156, 255, .4); }
.vo-pipe li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .5cqw 1cqw; margin-left: 3cqw; padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.vo-pipe li::before { content: ''; position: absolute; left: -2.2cqw; top: 50%; width: .9cqw; height: .9cqw; translate: 0 -50%; border-radius: 50%; background: #0d1022; box-shadow: inset 0 0 0 1px #8f9cff; }
.vo-pipe li:nth-child(2)::before { background: #4d6bff; box-shadow: 0 0 1cqw #4d6bff; }
.vo-pipe span { grid-column: 1 / -1; font: 500 .95cqw var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #7d84a8; }
.vo-pipe b { font: 500 1.2cqw var(--f-mono); color: #fff; white-space: nowrap; }
.vo-pipe em { font: 500 1cqw var(--f-mono); font-style: normal; white-space: nowrap; color: #7bd88f; }
.vo-onnx { position: absolute; left: 78.5cqw; bottom: 3.6cqw; font: 500 1.05cqw var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #5c6283; }

/* =========================================================
   Copilot — clinician workspace
   ========================================================= */
.scr--copilot { display: grid; grid-template-columns: 17cqw 1fr 28cqw; background: #f7f5ef; color: #1c2421; }
.cp-side { display: flex; flex-direction: column; gap: 3cqw; padding: 3.2cqw 2.2cqw; background: #1e3a33; color: #b7cdc4; }
.cp-side b { font: 400 3cqw var(--f-serif); color: #f4efe4; }
.cp-side ul { display: flex; flex-direction: column; gap: .5cqw; }
.cp-side li { padding: .9cqw 1.2cqw; border-radius: .8cqw; font-size: 1.55cqw; }
.cp-side li.on { background: rgba(255, 255, 255, .1); color: #fff; }
.cp-me { margin-top: auto; display: flex; align-items: center; gap: 1cqw; font-size: 1.4cqw; }
.cp-me i { width: 3cqw; height: 3cqw; border-radius: 50%; background: #c9a77c; }

.cp-main { display: flex; flex-direction: column; gap: 1.6cqw; padding: 3.2cqw 3.4cqw; min-width: 0; }
.cp-crumb { font-size: 1.3cqw; color: #8a948f; }
.cp-main h4 { font: 400 4.6cqw/1 var(--f-serif); letter-spacing: -0.01em; }
.cp-meta { display: flex; gap: .8cqw; }
.cp-meta span { padding: .5cqw 1.1cqw; border-radius: 2cqw; background: #ebe7dc; font-size: 1.2cqw; color: #55605b; }
.cp-meta span:last-child { background: #dbe9e2; color: #1e6b52; }
.cp-tabs { display: flex; gap: .6cqw; margin-top: .4cqw; }
.cp-tabs i { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: .8cqw; box-shadow: inset 0 0 0 1px #dcd7ca; font: 600 1.5cqw var(--f-ui); font-style: normal; color: #8a948f; }
.cp-tabs i.on { background: #1e3a33; color: #fff; box-shadow: none; }
.cp-main p { font-size: 1.45cqw; line-height: 1.55; color: #46504c; }
.cp-main p b { font-weight: 600; color: #1c2421; }
.cp-main mark { background: linear-gradient(transparent 55%, #cfe7da 55%); color: inherit; }
.cp-act { display: flex; gap: .8cqw; margin-top: auto; }
.cp-act span { padding: 1cqw 1.8cqw; border-radius: .9cqw; box-shadow: inset 0 0 0 1px #d6d1c4; font-size: 1.35cqw; font-weight: 500; }
.cp-act .pri { background: #1e3a33; color: #fff; box-shadow: none; }

.cp-right { display: flex; flex-direction: column; gap: 1.4cqw; padding: 3.2cqw 2.6cqw; border-left: 1px solid #e6e1d4; background: #f2efe6; }
.cp-lbl { font: 500 1.2cqw var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8a948f; }
.cp-alert { display: flex; flex-direction: column; gap: .5cqw; padding: 1.6cqw; border-radius: 1.2cqw; background: #fdf1ee; box-shadow: inset 0 0 0 1px #f3d2c9; margin-bottom: 1.4cqw; }
.cp-alert b { font-size: 1.5cqw; font-weight: 600; }
.cp-alert span { font-size: 1.3cqw; color: #a33a22; }
.cp-alert em { width: fit-content; margin-top: .4cqw; padding: .3cqw .9cqw; border-radius: 1cqw; background: #a33a22; color: #fff; font: 600 1.1cqw var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.cp-tl { position: relative; display: flex; flex-direction: column; gap: 1.5cqw; padding-left: 2cqw; }
.cp-tl::before { content: ''; position: absolute; left: .45cqw; top: .6cqw; bottom: .6cqw; border-left: 1px solid #d3cdbd; }
.cp-tl li { position: relative; display: flex; flex-direction: column; gap: .2cqw; font-size: 1.35cqw; }
.cp-tl li::before { content: ''; position: absolute; left: -2cqw; top: .35cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #f2efe6; box-shadow: inset 0 0 0 1px #9aa59f; }
.cp-tl li.now::before { background: #1e6b52; box-shadow: none; }
.cp-tl i { font: 500 1.1cqw var(--f-mono); font-style: normal; color: #8a948f; }

/* =========================================================
   DineXR — editorial menu
   ========================================================= */
.scr--dine { background: #110f0d; color: #efe6d6; }
.dn-nav { position: absolute; left: 4.5cqw; right: 4.5cqw; top: 3.4cqw; display: flex; gap: 4cqw; font-size: 1.35cqw; color: #9c907e; }
.dn-nav b { font-weight: 600; letter-spacing: .28em; color: #efe6d6; margin-right: auto; }
.dn-left { position: absolute; left: 4.5cqw; top: 11cqw; width: 46cqw; }
.dn-left h4 { font: 400 9.4cqw/.86 var(--f-serif); letter-spacing: -0.02em; }
.dn-left h4 em { color: #e2a23b; }
.dn-menu { display: flex; flex-direction: column; gap: 1.6cqw; margin-top: 4cqw; }
.dn-menu li { display: grid; grid-template-columns: 1fr auto; gap: .2cqw 2cqw; padding-bottom: 1.4cqw; border-bottom: 1px solid #2a2520; }
.dn-menu b { font: 400 2.3cqw var(--f-serif); color: #f4ecdf; }
.dn-menu i { font: 500 1.5cqw var(--f-mono); font-style: normal; color: #e2a23b; align-self: center; }
.dn-menu span { font-size: 1.25cqw; color: #8d8170; }
.dn-ar { position: absolute; left: 56cqw; right: 4.5cqw; top: 9cqw; bottom: 4.5cqw; display: flex; flex-direction: column; align-items: center; padding: 2.4cqw; border-radius: 1.4cqw; background: radial-gradient(90% 70% at 50% 35%, #2a211a, #171310); }
.dn-k { align-self: flex-start; font: 500 1.2cqw var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #9c907e; }
.dn-stage { --c-col: rgba(239, 230, 214, .7); position: relative; width: 26cqw; height: 17cqw; margin-top: 1.6cqw; display: grid; place-items: center; }
.dn-plate {
  width: 19cqw; aspect-ratio: 1;
  border-radius: 50%;
  transform: scaleY(.56);
  background:
    radial-gradient(circle at 46% 44%, #f6d29a 0 6%, transparent 7%),
    radial-gradient(circle at 58% 56%, #5f7f3b 0 2.5%, transparent 3%),
    radial-gradient(circle at 40% 58%, #5f7f3b 0 2%, transparent 2.5%),
    radial-gradient(circle at 50% 50%, #e9b35f 0 20%, #c7782d 30%, #8d4416 36%, transparent 37%),
    radial-gradient(circle, #f4eee5 0 50%, #d9d0c2 52%, #f7f2ea 58%, #f0e9de 70%, #c9bfae 100%);
  box-shadow: 0 2.6cqw 3cqw -1cqw rgba(0, 0, 0, .7);
  animation: plate 6s ease-in-out infinite;
}
.dn-cap { margin-top: .6cqw; font-size: 1.35cqw; color: #9c907e; }
.dn-cap em { font: 400 1.8cqw var(--f-serif); font-style: italic; color: #efe6d6; }
.dn-qr { display: flex; align-items: center; gap: 1.6cqw; margin-top: auto; align-self: stretch; padding-top: 1.6cqw; border-top: 1px solid #2a2520; }
.dn-qr svg { width: 8.6cqw; height: 8.6cqw; border-radius: .6cqw; }
.dn-qr span { font-size: 1.3cqw; line-height: 1.35; color: #b4a892; }

/* =========================================================
   Pixalate — NLE
   ========================================================= */
.scr--pix {
  display: grid;
  grid-template-columns: 18cqw 1fr 19cqw;
  grid-template-rows: 5cqw 1fr 19cqw;
  background: #141416;
  color: #c9c9cf;
  font-size: 1.25cqw;
}
.px-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.4cqw; padding: 0 2cqw; border-bottom: 1px solid #26262b; }
.px-top b { font-size: 1.7cqw; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.px-top nav { display: flex; gap: 1.8cqw; color: #8a8a93; }
.px-doc { margin-left: auto; color: #6c6c75; }
.px-top i { font-style: normal; padding: .6cqw 1.6cqw; border-radius: .7cqw; background: #f1f1f3; color: #111; font-weight: 600; }
.px-lbl { display: block; font: 600 1.05cqw var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #6c6c75; margin-bottom: 1.2cqw; }
.px-media { padding: 1.8cqw; border-right: 1px solid #26262b; min-height: 0; }
.px-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.px-thumbs figure { display: flex; flex-direction: column; gap: .4cqw; min-width: 0; }
.px-thumbs i { display: block; aspect-ratio: 16 / 10; border-radius: .5cqw; }
.px-thumbs span { font-size: .95cqw; color: #8a8a93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-thumbs .m1 { background: linear-gradient(180deg, #27304f, #b85a3a 75%, #e8a15b); }
.px-thumbs .m2 { background: linear-gradient(160deg, #3a4048, #15181c); box-shadow: inset 0 -1.4cqw 0 #0c0d10; }
.px-thumbs .m3 { background: #1f2a24; padding: .6cqw; }
.px-thumbs .m3 svg { width: 100%; height: 100%; }
.px-thumbs .m3 path { stroke: #4ade80; stroke-width: .6; }
.px-thumbs .m4 { background: repeating-conic-gradient(#2a2a2f 0 25%, #222226 0 50%) 0 0 / 1.2cqw 1.2cqw; position: relative; }
.px-thumbs .m4::after { content: ''; position: absolute; inset: 30% 38%; border-radius: 50%; background: #c6f432; }
.px-view { display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw; padding: 1.6cqw 2cqw; background: #0e0e10; min-width: 0; }
.px-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(180deg, #1c2443 0%, #6b3a52 45%, #d0643c 72%, #f2ac62 100%); }
.px-sun { position: absolute; left: 58%; top: 50%; width: 9cqw; aspect-ratio: 1; border-radius: 50%; background: #ffe2b4; box-shadow: 0 0 8cqw 1cqw rgba(255, 170, 90, .7); }
.px-city {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: #0d0c12;
  clip-path: polygon(0 60%, 6% 60%, 6% 30%, 11% 30%, 11% 52%, 15% 52%, 15% 12%, 19% 12%, 19% 45%, 25% 45%, 25% 26%, 28% 26%, 28% 55%, 34% 55%, 34% 38%, 40% 38%, 40% 6%, 43% 6%, 43% 40%, 49% 40%, 49% 58%, 55% 58%, 55% 22%, 60% 22%, 60% 48%, 66% 48%, 66% 34%, 72% 34%, 72% 15%, 75% 15%, 75% 50%, 82% 50%, 82% 28%, 88% 28%, 88% 56%, 94% 56%, 94% 40%, 100% 40%, 100% 100%, 0 100%);
}
.px-job { position: absolute; left: 1.4cqw; bottom: 1.4cqw; display: flex; flex-direction: column; gap: .6cqw; padding: .8cqw 1.2cqw; border-radius: .6cqw; background: rgba(10, 10, 12, .7); color: #fff; font-size: 1.1cqw; }
.px-job i { display: block; height: .4cqw; border-radius: 1cqw; background: linear-gradient(90deg, #c6f432 63%, rgba(255, 255, 255, .2) 63%); }
.px-tc { display: flex; align-items: center; justify-content: space-between; font: 500 1.15cqw var(--f-mono); color: #8a8a93; }
.px-tc span:first-child { color: #fff; }
.px-tc b { width: 0; height: 0; border-left: 1.4cqw solid #fff; border-top: .85cqw solid transparent; border-bottom: .85cqw solid transparent; }
.px-tools { padding: 1.8cqw; border-left: 1px solid #26262b; }
.px-tools ul { display: flex; flex-direction: column; gap: .4cqw; }
.px-tools li { display: flex; align-items: center; justify-content: space-between; padding: .9cqw 1cqw; border-radius: .7cqw; font-size: 1.2cqw; }
.px-tools li i { position: relative; width: 2.8cqw; height: 1.6cqw; border-radius: 1cqw; background: #34343b; }
.px-tools li i::after { content: ''; position: absolute; left: .2cqw; top: .2cqw; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #8a8a93; transition: none; }
.px-tools li.on { background: #1d1d22; color: #fff; }
.px-tools li.on i { background: #c6f432; }
.px-tools li.on i::after { left: 1.4cqw; background: #fff; }
.px-tl { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; gap: .5cqw; padding: 1cqw 2cqw 1.6cqw; border-top: 1px solid #26262b; background: #17171a; }
.px-ruler { height: 1.6cqw; margin-left: 3.6cqw; background: repeating-linear-gradient(90deg, #3a3a42 0 1px, transparent 1px 2.4cqw) bottom / 100% 60% no-repeat, repeating-linear-gradient(90deg, #4c4c55 0 1px, transparent 1px 12cqw) bottom / 100% 100% no-repeat; }
.px-tr { display: flex; align-items: stretch; gap: .8cqw; flex: 1; }
.px-tr > span { width: 2.8cqw; display: grid; place-items: center; border-radius: .5cqw; background: #222227; font: 600 1cqw var(--f-mono); color: #8a8a93; }
.px-tr > div { position: relative; flex: 1; border-radius: .5cqw; background: #1c1c20; }
.px-tr i { position: absolute; top: 10%; bottom: 10%; display: flex; align-items: center; padding: 0 .8cqw; overflow: hidden; border-radius: .5cqw; background: #3d4f8f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-style: normal; font-size: 1cqw; color: #e8ebff; white-space: nowrap; }
.px-tr i.t { background: #7b4fa0; }
.px-tr i.a { background: #1d3b2c; padding: 0; }
.px-tr i.a svg { width: 100%; height: 100%; }
.px-tr i.a path { stroke: #4ade80; stroke-width: .7; }
.px-head { position: absolute; top: .6cqw; bottom: 1cqw; width: .25cqw; background: #ffd23f; animation: head 7s linear infinite; }
.px-head::before { content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; border-left: .9cqw solid transparent; border-right: .9cqw solid transparent; border-top: 1.1cqw solid #ffd23f; }

/* =========================================================
   Celeste — local AI companion
   ========================================================= */
.scr--cel { background: radial-gradient(70% 90% at 74% 50%, #1b1714 0%, #070707 65%); color: #ece5da; }
.ce-orb { position: absolute; right: -2cqw; top: 50%; width: 52cqw; aspect-ratio: 1; translate: 0 -54%; animation: breathe 5s ease-in-out infinite; }
.ce-orb svg { width: 100%; height: 100%; }
.ce-orb circle { fill: #f0d6bd; }
.ce-brand { position: absolute; left: 5cqw; top: 4.4cqw; display: flex; align-items: center; gap: 1.2cqw; font: 500 1.25cqw var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8c8378; }
.ce-brand em { font: 400 2.6cqw var(--f-serif); font-style: italic; letter-spacing: 0; text-transform: none; color: #ece5da; }
.ce-brand i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 1cqw #7bd88f; }
.scr--cel h4 { position: absolute; left: 5cqw; top: 13cqw; font: 400 7.4cqw/.95 var(--f-serif); letter-spacing: -0.01em; }
.scr--cel h4 em { color: #f0c49b; }
.ce-chat { position: absolute; left: 5cqw; top: 36cqw; width: 40cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.ce-chat p { display: flex; flex-direction: column; gap: .5cqw; font-size: 1.75cqw; line-height: 1.3; color: #d8d0c4; }
.ce-chat span { font: 500 1.1cqw var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #6f675d; }
.ce-chat p:last-child { color: #fff; }
.ce-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3.4cqw; padding: 1.8cqw 5cqw; border-top: 1px solid rgba(255, 255, 255, .07); font: 500 1.1cqw var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #6f675d; }
.ce-bar span:first-child { display: flex; align-items: center; gap: .8cqw; color: #bfb6a9; }
.ce-bar i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #7bd88f; }
.ce-bar span:last-child { margin-left: auto; }

/* =========================================================
   Lipsync — three.js dev view
   ========================================================= */
.scr--lip { background: linear-gradient(180deg, #2b2825 0%, #201e1c 56%, #141312 100%); color: #f1ece6; font-family: var(--f-mono); }
/* the room: a floor the tracker has found */
.lp-floor {
  position: absolute; left: -30cqw; right: -30cqw; bottom: -2cqw; height: 28cqw;
  transform-origin: 50% 100%;
  transform: perspective(30cqw) rotateX(62deg);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 5cqw 5cqw,
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 5cqw 5cqw;
  -webkit-mask: linear-gradient(transparent, #000 50%);
  mask: linear-gradient(transparent, #000 50%);
}
.lp-plane {
  position: absolute; left: 13cqw; top: 41.5cqw; width: 40cqw; height: 13cqw;
  background: radial-gradient(circle, rgba(255, 122, 77, .75) .15cqw, transparent .2cqw) 0 0 / 1.5cqw 1.5cqw;
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent);
  mask: radial-gradient(closest-side, #000 25%, transparent);
  animation: pulse 3s ease-in-out infinite;
}
.lp-spot { position: absolute; left: 22cqw; top: 45.6cqw; width: 22cqw; height: 4.4cqw; overflow: visible; }
.lp-ring { fill: none; stroke: #ff7a4d; stroke-width: .8; stroke-dasharray: 3 2.4; vector-effect: non-scaling-stroke; animation: march 2s linear infinite; }
/* the Celeste avatar, cut out of its screenshot, stands on the found floor; a slight sway while she talks */
.lp-char { position: absolute; left: 33cqw; top: 7cqw; height: 41cqw; width: auto; translate: -50% 0; transform-origin: 50% 100%; filter: drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .5)); animation: sway 3.6s ease-in-out infinite; }
.lp-frame { --c-col: rgba(255, 255, 255, .55); position: absolute; left: 22cqw; top: 4.5cqw; width: 22cqw; height: 46cqw; }

/* HUD */
.lp-ar { position: absolute; left: 3.4cqw; top: 3.4cqw; display: flex; align-items: center; gap: .8cqw; padding: .7cqw 1.2cqw; border-radius: 2cqw; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 1.1cqw; letter-spacing: .08em; text-transform: uppercase; color: #e7e2db; }
.lp-ar i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 1cqw #7bd88f; }
.lp-say { position: absolute; left: 33cqw; top: 51.6cqw; translate: -50% 0; padding: .8cqw 1.5cqw; border-radius: .8cqw; background: rgba(0, 0, 0, .62); font: 400 1.55cqw var(--f-ui); white-space: nowrap; color: #fff; }
.lp-vis { position: absolute; right: 3.4cqw; top: 3.4cqw; width: 31cqw; display: flex; flex-direction: column; padding: 2cqw 2.2cqw; border-radius: 1.4cqw; background: rgba(18, 17, 16, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lp-vis-hd { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.1cqw; letter-spacing: .1em; text-transform: uppercase; color: #9b948b; }
.lp-vis-hd b { font: 400 6cqw/1 var(--f-serif); letter-spacing: 0; text-transform: none; color: #fff; }
.lp-bars { display: flex; gap: 1cqw; height: 22cqw; margin-top: 2cqw; }
.lp-bars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .7cqw; font-size: 1.05cqw; color: #8f887f; }
.lp-bars span:first-child { color: #fff; }
.lp-bars i { width: 100%; height: calc(var(--v) * 86%); min-height: .6cqw; border-radius: .4cqw; background: linear-gradient(#ffa27a, #ff6a3d); transform-origin: bottom; animation: eq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.23s); }
.lp-bars span:not(:first-child) i { background: linear-gradient(#5a5550, #3d3935); }
.lp-meta { display: flex; justify-content: space-between; margin-top: 1.6cqw; padding-top: 1.4cqw; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 1cqw; letter-spacing: .06em; text-transform: uppercase; color: #9b948b; }
.lp-meta span { display: flex; flex-direction: column; gap: .3cqw; }
.lp-meta b { font: 500 2.3cqw var(--f-ui); letter-spacing: -0.02em; color: #fff; }
.lp-mic { position: absolute; left: 3.4cqw; bottom: 3cqw; width: 56cqw; display: flex; align-items: center; gap: 1.6cqw; font-size: 1.05cqw; letter-spacing: .08em; text-transform: uppercase; color: #9b948b; }
.lp-mic span { display: flex; align-items: center; gap: .7cqw; white-space: nowrap; }
.lp-mic span i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #ff6a3d; animation: pulse 1.2s infinite; }
.lp-mic div { flex: 1; height: 3cqw; }
.lp-mic svg { width: 100%; height: 100%; }
.lp-mic path { stroke: #ff7a4d; stroke-width: .5; stroke-linecap: round; }

/* =========================================================
   Pixel Streaming — queue
   ========================================================= */
.scr--stream { background: #0b0f12; color: #fff; }
.st-scene { position: absolute; inset: 0; filter: blur(.35cqw) brightness(.55); background: radial-gradient(60% 70% at 50% 30%, #4b6672, #1a252b 60%, #0b0f12), linear-gradient(transparent 62%, rgba(255,255,255,.05) 62%); }
.st-fig { position: absolute; left: 50%; bottom: 0; width: 34cqw; height: 50cqw; translate: -50% 0; }
.st-fig .b { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; border-radius: 48% 48% 0 0 / 80% 80% 0 0; background: linear-gradient(160deg, #a9bcc6, #2c3a41); }
.st-fig .h { position: absolute; left: 50%; top: 10%; width: 15cqw; height: 19cqw; translate: -50% 0; border-radius: 48% 48% 44% 44%; background: radial-gradient(circle at 36% 30%, #e9eef0, #7d929c 60%, #34444c); }
.st-stats { position: absolute; left: 3cqw; top: 3cqw; display: grid; grid-template-columns: auto auto; gap: .4cqw 2cqw; padding: 1.2cqw 1.6cqw; background: rgba(0, 0, 0, .55); font: 500 1.1cqw var(--f-mono); }
.st-stats span { color: #93a4ad; }
.st-stats b { font-weight: 500; text-align: right; }
.st-ctl { position: absolute; right: 3cqw; top: 3cqw; display: flex; gap: .6cqw; }
.st-ctl i { width: 3.4cqw; height: 3.4cqw; border-radius: .6cqw; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.st-modal { position: absolute; left: 50%; top: 50%; width: 42cqw; translate: -50% -46%; display: flex; flex-direction: column; gap: 1.4cqw; padding: 3cqw; border-radius: 1.6cqw; background: #f6f7f8; color: #12171a; box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .5); }
.st-k { font: 500 1.15cqw var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #77838a; }
.st-modal h4 { font-size: 4.2cqw; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.st-modal p { font-size: 1.45cqw; line-height: 1.45; color: #56636a; }
.st-prog { height: .6cqw; border-radius: 1cqw; background: #e1e5e8; overflow: hidden; }
.st-prog i { display: block; width: 35%; height: 100%; border-radius: 1cqw; background: #12171a; animation: indet 1.8s ease-in-out infinite; }
.st-foot { display: flex; justify-content: space-between; font-size: 1.25cqw; color: #77838a; }
.st-foot span:first-child { color: #12171a; text-decoration: underline; text-underline-offset: .3cqw; }

/* =========================================================
   Cortex UI — docs
   ========================================================= */
.scr--cortex { display: grid; grid-template-columns: 20cqw 1fr; grid-template-rows: 5.6cqw 1fr; background: #fff; color: #18181b; }
.cx-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 3cqw; padding: 0 3cqw; border-bottom: 1px solid #ececef; font-size: 1.35cqw; }
.cx-top b { font-size: 1.8cqw; font-weight: 700; letter-spacing: -0.04em; }
.cx-top nav { display: flex; gap: 2cqw; color: #71717a; }
.cx-search { margin-left: auto; display: flex; align-items: center; gap: 3cqw; padding: .7cqw 1.2cqw; border-radius: .8cqw; background: #f4f4f5; color: #a1a1aa; }
.cx-search i { font: 600 1.1cqw var(--f-mono); font-style: normal; padding: .2cqw .6cqw; border-radius: .4cqw; background: #fff; box-shadow: 0 0 0 1px #e4e4e7; color: #52525b; }
.cx-side { padding: 2.6cqw 2.4cqw; border-right: 1px solid #ececef; font-size: 1.3cqw; }
.cx-side > span { display: block; font-weight: 600; margin: 0 0 .8cqw; }
.cx-side ul { display: flex; flex-direction: column; gap: .2cqw; margin-bottom: 2cqw; color: #71717a; }
.cx-side li { padding: .45cqw .9cqw; border-radius: .6cqw; }
.cx-side li.on { background: #f4f4f5; color: #18181b; font-weight: 500; }
.cx-main { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.6cqw 4cqw; min-width: 0; }
.cx-crumb { font-size: 1.2cqw; color: #a1a1aa; }
.cx-main h4 { font-size: 4.2cqw; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.cx-main p { font-size: 1.5cqw; color: #71717a; }
.cx-tabs { display: flex; gap: 2cqw; border-bottom: 1px solid #ececef; font-size: 1.3cqw; }
.cx-tabs i { font-style: normal; padding-bottom: .8cqw; color: #a1a1aa; }
.cx-tabs i.on { color: #18181b; font-weight: 500; box-shadow: inset 0 -.25cqw 0 #18181b; }
.cx-prev { flex: 1; display: grid; place-items: center; min-height: 0; border-radius: 1cqw; box-shadow: inset 0 0 0 1px #ececef; background: radial-gradient(#e4e4e7 .12cqw, transparent .14cqw) 0 0 / 1.6cqw 1.6cqw; }
.cx-cmd { width: 34cqw; padding: .6cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 0 0 1px #e4e4e7, 0 1.6cqw 3cqw -1.4cqw rgba(0, 0, 0, .25); font-size: 1.2cqw; }
.cx-in { padding: 1cqw 1.2cqw; border-bottom: 1px solid #f0f0f2; color: #a1a1aa; }
.cx-g { display: block; padding: .9cqw 1.2cqw .3cqw; font-size: 1cqw; font-weight: 500; color: #a1a1aa; }
.cx-it { display: flex; align-items: center; gap: 1cqw; padding: .7cqw 1.2cqw; border-radius: .6cqw; }
.cx-it i { width: 1.4cqw; height: 1.4cqw; border-radius: .3cqw; box-shadow: inset 0 0 0 1px #a1a1aa; }
.cx-it.on { background: #f4f4f5; }
.cx-it kbd { margin-left: auto; font: 500 1cqw var(--f-mono); color: #a1a1aa; }
.cx-code { display: block; padding: 1.2cqw 1.6cqw; border-radius: .9cqw; background: #18181b; color: #e4e4e7; font: 500 1.25cqw var(--f-mono); }
.cx-code span { color: #71717a; margin-right: .8cqw; }

/* =========================================================
   Zaan — editorial index
   ========================================================= */
.scr--zaan { background: #f0eee9; color: #111; display: flex; flex-direction: column; padding: 3cqw 4cqw 0; }
.za-nav { display: flex; align-items: center; font-size: 1.35cqw; }
.za-nav b { font: 800 2.2cqw var(--f-ui); font-stretch: 70%; letter-spacing: .02em; margin-right: auto; }
.za-nav nav { display: flex; gap: 2.6cqw; color: #55524b; }
.za-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; margin-top: 2.4cqw; }
.za-head h4 { font: 800 15cqw/.8 var(--f-ui); font-stretch: 62%; letter-spacing: -0.03em; }
.za-head sup { font-size: .38em; color: #ff3d00; vertical-align: top; }
.za-head p { max-width: 30cqw; margin-bottom: .8cqw; font-size: 1.6cqw; line-height: 1.35; color: #55524b; }
.za-filter { display: flex; align-items: center; gap: 2.4cqw; margin-top: 2.6cqw; padding: 1.2cqw 0; border-top: 1px solid #111; border-bottom: 1px solid #d6d2c8; font-size: 1.35cqw; color: #6f6b62; }
.za-filter .on { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: .4cqw; }
.za-filter em { margin-left: auto; font-style: normal; }
.za-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; margin-top: 2cqw; }
.za-grid figure { display: flex; flex-direction: column; gap: .6cqw; }
.za-grid i { display: block; aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.za-grid span { font: 500 1.15cqw var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #55524b; }
.za-grid .z0 { background: radial-gradient(#111 30%, transparent 32%) 0 0 / 1.1cqw 1.1cqw, linear-gradient(135deg, #ff3d00, #ffb199); }
.za-grid .z1 { background: repeating-radial-gradient(circle at 50% 120%, #111 0 .5cqw, #f0eee9 .5cqw 1.1cqw); }
.za-grid .z2 { background: linear-gradient(180deg, #9fb7c4, #e9e2d6 62%, #3f3a33 62%, #1e1b17); }
.za-grid .z3 { background: #111; }
.za-grid .z3::after { content: ''; position: absolute; inset: 18% 28%; border-radius: 50%; box-shadow: inset 0 0 0 .3cqw #f0eee9, 0 0 0 1.4cqw #111, 0 0 0 1.7cqw #ff3d00; }
.za-grid .z4 { background: linear-gradient(transparent 49%, #111 49% 51%, transparent 51%) 0 0 / 100% 1.6cqw, linear-gradient(90deg, transparent 49%, #111 49% 51%, transparent 51%) 0 0 / 1.6cqw 100%, #d9d4c8; }
.za-grid .z5 { background: radial-gradient(circle at 30% 70%, #ff3d00 0 22%, transparent 23%), #1c1c1c; }
.za-grid .z6 { background: repeating-linear-gradient(-45deg, #111 0 .4cqw, #f0eee9 .4cqw 1.2cqw); }
.za-grid .z7 { background: linear-gradient(160deg, #2d3a2f, #8aa38b); }

/* =========================================================
   Motion
   ========================================================= */
@keyframes pulse { 50% { opacity: .3; } }
@keyframes plate { 0%, 100% { transform: scaleY(.56) rotate(-6deg); } 50% { transform: scaleY(.56) rotate(6deg); } }
@keyframes head { from { left: 8%; } to { left: 96%; } }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes sway { 0%, 100% { rotate: -.6deg; } 50% { rotate: .8deg; } }
@keyframes eq { from { transform: scaleY(.55); } to { transform: scaleY(1.12); } }
@keyframes march { to { stroke-dashoffset: -10.8; } }
@keyframes orb { 50% { scale: 1.06; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes indet { from { transform: translateX(-110%); } to { transform: translateX(300%); } }

@media (prefers-reduced-motion: reduce) {
  .scr *, .scr *::before, .scr *::after { animation: none !important; }
}