/* C64-inspired public overview. Portal forms keep their shared styles. */
@font-face { font-family:DODPixel; src:url('/assets/retro/press-start-2p.ttf') format('truetype'); font-display:swap; font-style:normal; font-weight:400; }
.view-home { --retro-paper:#c8c5ff; --retro-blue:#34308c; --retro-frame:#8e8ada; --retro-accent:#f1f3a5; color:var(--retro-paper); background:var(--retro-blue); border:20px solid var(--retro-frame); min-height:100vh; }
.view-home .wrap { width:min(960px,calc(100% - 64px)); }
.view-home a { color:inherit; }
.view-home a:hover { color:var(--retro-accent); }
.view-home a:focus-visible,.view-home button:focus-visible,.view-home summary:focus-visible { outline-color:var(--retro-accent); }
.view-home .skip-link { background:var(--retro-accent); color:var(--retro-blue); }
.view-home .site-header { min-height:88px; border-bottom:2px solid var(--retro-frame); }
.view-home .header-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0; }
.retro-languages { display:flex; align-items:center; gap:8px; font:12px/1.7 'Courier New',monospace; }
.retro-languages a { display:inline-flex; align-items:center; min-height:36px; padding:2px 0; text-decoration:none; }
.retro-languages a[aria-current] { color:var(--retro-accent); text-decoration:underline; text-underline-offset:4px; }
.view-home .brand { font:400 13px/1.7 DODPixel,monospace; letter-spacing:-.5px; }
.view-home .site-header nav { gap:22px; font-family:'Courier New',monospace; font-size:14px; }
.view-home .site-header nav a,.view-home .site-header nav .plain { color:var(--retro-paper); }
.view-home .site-header nav a:hover,.view-home .site-header nav .plain:hover { color:var(--retro-accent); }
.view-home .site-header nav .nav-portal { text-decoration:underline; text-underline-offset:5px; }
.view-home .site-header nav a[aria-current] { box-shadow:inset 0 -2px var(--retro-accent); }
.retro-main h1,.retro-main h2,.retro-main p { margin:0; }
.retro-hero { padding-top:42px; text-align:center; }
.retro-boot { font:12px/1.7 'Courier New',monospace; letter-spacing:1.5px; }
.retro-main h1 { margin-top:24px; font:400 clamp(24px,3.4vw,34px)/1.55 DODPixel,monospace; letter-spacing:-1.5px; }
.retro-main h1>span { color:var(--retro-accent); }
.retro-main .retro-promise { margin-top:23px; color:var(--retro-accent); font-size:21px; font-weight:650; line-height:1.55; text-wrap:balance; }
.retro-description { max-width:600px; margin:14px auto 0!important; font-size:16px; line-height:1.7; text-wrap:pretty; }
.retro-demo { max-width:840px; margin:32px auto 0; }
.retro-demo [hidden] { display:none; }
.retro-main .retro-example { color:var(--retro-paper); font:11px/1.6 'Courier New',monospace; letter-spacing:1.2px; }
.buffer-scene { margin-top:5px; }
.buffer-scene canvas,.buffer-fallback { display:block; width:100%; height:190px; image-rendering:pixelated; }
.retro-cutout { fill:var(--retro-blue); }
.retro-cipher { color:var(--retro-accent); }
.buffer-consoles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:8px; text-align:left; }
.buffer-node { min-width:0; border:2px solid var(--retro-frame); background:#252266; transition:border-color .15s; }
.buffer-node strong { display:block; padding:10px 12px; border-bottom:1px solid var(--retro-frame); font:bold 13px/1.5 'Courier New',monospace; }
.buffer-console-screen { height:146px; padding:12px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--retro-frame) #252266; font:13px/1.65 'Courier New',monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.buffer-node.is-active { border-color:var(--retro-accent); }
.buffer-node.is-active strong { color:var(--retro-accent); }
.buffer-cursor { display:inline-block; width:.65em; height:1.1em; margin-left:2px; vertical-align:-.15em; background:var(--retro-paper); }
.buffer-node.is-active .buffer-cursor { background:var(--retro-accent); animation:buffer-cursor-blink 1.1s step-end infinite; }
.retro-demo.is-paused .buffer-cursor { animation-play-state:paused; }
.buffer-controls { margin-top:10px; }
@keyframes buffer-cursor-blink { 50% { opacity:0; } }
.retro-play { display:inline-flex; align-items:center; justify-content:center; gap:13px; max-width:100%; margin-top:17px; min-height:48px; padding:12px 20px; border:2px solid var(--retro-accent); border-radius:0; box-shadow:4px 4px 0 var(--retro-frame); background:var(--retro-accent); color:var(--retro-blue); font:bold 16px/1.4 'Courier New',monospace; }
.retro-play:hover { background:var(--retro-accent); color:var(--retro-blue); box-shadow:6px 6px 0 var(--retro-frame); }
.retro-play:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--retro-frame); }
.retro-main .buffer-note { margin-top:19px; font:12px/1.7 'Courier New',monospace; }
.retro-workflow { margin-top:24px; padding:27px 0; border-top:2px solid var(--retro-frame); }
.retro-workflow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:0; padding:0; list-style:none; }
.retro-step { display:block; margin-bottom:15px; color:var(--retro-accent); font:400 12px/1.4 DODPixel,monospace; }
.retro-main h2 { font-size:16px; font-weight:650; line-height:1.5; letter-spacing:0; }
.retro-workflow li p { margin-top:9px; max-width:29ch; font-size:14px; line-height:1.65; }
.retro-main .retro-setup { margin-top:25px; font-size:13px; line-height:1.7; }
.retro-setup a { display:inline-block; padding-block:8px; margin-inline-start:5px; white-space:nowrap; }
.retro-privacy { border-top:2px solid var(--retro-frame); padding-top:24px; padding-bottom:29px; }
.retro-privacy>p { max-width:80ch; margin-top:10px; font-size:14px; line-height:1.7; }
.retro-privacy details { margin-top:16px; max-width:80ch; font-size:13px; line-height:1.75; }
.retro-privacy summary { width:fit-content; padding-block:7px; font-size:13px; font-weight:400; }
.retro-privacy summary::marker { color:var(--retro-paper); }
.retro-privacy details[open]>summary { margin-bottom:0; }
.retro-privacy details p { margin-top:12px; }
.view-home .site-footer { border-top:0; padding-block:0 24px; color:var(--retro-paper); font:12px/1.7 'Courier New',monospace; }
.retro-cursor { display:inline-block; width:9px; height:12px; margin-left:7px; vertical-align:-1px; background:var(--retro-paper); }
@media(max-width:760px) {
  .view-home { border-width:14px; }
  .view-home .wrap { width:calc(100% - 48px); }
  .view-home .site-header { min-height:78px; }
  .view-home .brand { font-size:12px; }
  .view-home .site-header nav { font-size:13px; }
  .view-home .site-header.signed-in .header-actions { width:100%; align-items:flex-start; }
  .retro-hero { padding-top:34px; }
  .retro-main h1 { font-size:28px; }
  .retro-workflow ol { gap:22px; }
}
@media(max-width:640px) {
  .buffer-consoles { grid-template-columns:1fr; gap:12px; }
  .buffer-node strong { font-size:13px; padding-block:8px; }
  .buffer-console-screen { height:92px; padding-block:9px; font-size:13px; }
}
@media(max-width:520px) {
  .view-home { border-width:10px; }
  .view-home .wrap { width:calc(100% - 32px); }
  .view-home .brand { font-size:10px; letter-spacing:-.5px; }
  .view-home .site-header { gap:10px; min-height:73px; padding-block:10px; }
  .view-home .site-header nav { gap:4px 17px; }
  .retro-main h1 { font-size:23px; letter-spacing:-1px; line-height:1.65; }
  .retro-boot { font-size:11px; letter-spacing:0; }
  .retro-main .retro-promise { font-size:18px; }
  .retro-description { font-size:15px; }
  .retro-description br { display:none; }
  .retro-main .retro-example { font-size:10px; letter-spacing:.5px; }
  .retro-main .buffer-note { font-size:11px; }
  .retro-play { font-size:15px; padding-inline:15px; }
  .retro-workflow ol { grid-template-columns:1fr; gap:22px; }
  .retro-workflow li { display:grid; grid-template-columns:25px minmax(0,1fr); column-gap:13px; }
  .retro-step { grid-row:1/3; margin:3px 0 0; font-size:11px; }
  .retro-workflow li p { margin-top:5px; max-width:none; }
  .retro-main .retro-setup { margin-top:22px; }
  .retro-privacy { padding-bottom:24px; }
  .view-home .site-footer { align-items:baseline; font-size:11px; gap:8px 20px; }
}
@media(max-width:359px) {
  .retro-main h1 { font-size:20px; }
  .retro-main .retro-promise { font-size:17px; }
  .retro-description { font-size:14px; }
  .view-home .brand { font-size:9px; }
  .view-home .site-header nav { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .retro-play:active { transform:none; } .buffer-cursor { animation:none!important; } .buffer-node { transition:none; } }