/* The CDMS computer. Line drawing, glowing screen and the zoom into one system. */
.system-map{position:relative;max-width:1440px;margin:auto;padding:clamp(40px,6vw,88px) max(16px,3vw) clamp(40px,5vw,72px);scroll-margin-top:var(--header)}
.map-head{display:grid;gap:14px;justify-items:center;text-align:center;max-width:860px;margin:0 auto clamp(18px,3vw,36px)}
.map-head h2{font-size:clamp(38px,5.4vw,78px)}
.map-head p:not(.eyebrow){color:var(--muted);font-size:16.5px;max-width:58ch}
.map-hint{text-align:center;font-size:12px;color:var(--soft);margin-top:14px;font-family:var(--mono)}
.map-stage{position:relative;aspect-ratio:var(--map-ratio,16/10);max-width:100%;max-height:calc(100vh - var(--header) - 40px);margin:auto;overflow:hidden;border-radius:28px;perspective:1800px;transform:perspective(1800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.map-stage[data-layout=wide]{width:min(100%,calc((100vh - var(--header) - 40px)*1.6))}
.map-scene{position:absolute;inset:0;transform-origin:0 0;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.map-art,.map-art svg{position:absolute;inset:0;width:100%;height:100%}
.map-svg{overflow:visible}
.map-svg .draw{fill:none;stroke:var(--map-line);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1)}
.map-svg .draw.thin{stroke-width:1.6;opacity:.6}
.map-svg .bezel{fill:var(--map-body);stroke-width:3.5}
.map-svg .screen-frame{fill:var(--map-screen)}
.map-svg .power{stroke:var(--accent-2);fill:none}
.is-drawn .map-svg .draw{stroke-dashoffset:0}
.is-drawn .map-svg .map-keyboard .draw{transition-delay:.35s}
.is-drawn .map-svg .map-mouse .draw{transition-delay:.55s}
.map-halo{opacity:0;transition:opacity 1.2s}
.is-on .map-halo{opacity:1}
.trace{fill:none;stroke:var(--map-line);stroke-width:2;opacity:0;transition:opacity .8s .6s}
.trace-pulse{fill:none;stroke:var(--accent-2);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0}
.trace-node{fill:var(--page);stroke:var(--accent-2);stroke-width:2;opacity:0;transition:opacity .6s 1s}
.is-drawn .trace{opacity:.55}.is-drawn .trace-node{opacity:1}
.is-on .trace-pulse{opacity:1;animation:trace-run 3.2s linear infinite;animation-delay:var(--d,0s)}
@keyframes trace-run{to{stroke-dashoffset:0}}
.map-scanline{fill:var(--accent-2);opacity:0}
.is-on:not(.is-booted) .map-scanline{animation:scan 1s ease-out}
@keyframes scan{0%{opacity:.7;transform:translateY(0)}100%{opacity:0;transform:translateY(560px)}}

/* Screen: an HTML layer laid exactly over the drawn screen, sized with container units. */
.map-screen{position:absolute;container-type:size;border-radius:8px;overflow:hidden;background:var(--map-screen);opacity:0;transition:opacity .5s}
.is-on .map-screen{opacity:1;box-shadow:0 0 60px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.map-screen-inner{position:absolute;inset:0;overflow:auto;scrollbar-width:thin}
.map-os{min-height:100%;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),linear-gradient(var(--map-grid) 1px,transparent 1px) 0 0/4cqw 4cqw,linear-gradient(90deg,var(--map-grid) 1px,transparent 1px) 0 0/4cqw 4cqw;color:var(--map-ink)}
.map-bar{display:flex;align-items:center;gap:1.6cqw;padding:1.2cqw 2cqw;font:500 max(9px,1.25cqw)/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--map-muted);border-bottom:1px solid var(--map-rule)}
.map-dots{display:inline-flex;gap:.6cqw}.map-dots i{width:max(6px,.9cqw);height:max(6px,.9cqw);border-radius:50%;background:var(--map-rule)}.map-dots i:first-child{background:var(--accent-2)}
.map-status{margin-left:auto;color:var(--accent-2);text-align:right}
.map-boot{padding:3cqw 3cqw 0;font:max(10px,1.5cqw)/1.6 var(--mono);color:var(--accent-2);min-height:0}
.map-boot p{opacity:0;white-space:nowrap;overflow:hidden}
.is-on .map-boot p{animation:boot-line .35s steps(18) forwards}
.is-on .map-boot p:nth-child(2){animation-delay:.3s}.is-on .map-boot p:nth-child(3){animation-delay:.6s}
@keyframes boot-line{from{opacity:1;max-width:0}to{opacity:1;max-width:100%}}
.map-caret{display:inline-block;width:.7em;height:1em;vertical-align:-.15em;margin-left:.3em;background:currentColor;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.is-booted .map-boot{display:none}
.map-grid{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:1.4cqw;padding:2.2cqw}
.map-tile{position:relative;display:grid;align-content:center;justify-items:start;gap:.5cqw;min-height:0;padding:1.6cqw 1.8cqw;text-align:left;border-radius:1.4cqw;border:1px solid var(--map-rule);background:color-mix(in srgb,var(--map-screen) 55%,transparent);color:var(--map-ink);opacity:0;transform:translateY(1.5cqw) scale(.96);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,box-shadow .2s}
.is-booted .map-tile{opacity:1;transform:none;transition-delay:calc(var(--i)*45ms),calc(var(--i)*45ms),0s,0s,0s}
.map-tile:not(:disabled):hover,.map-tile:focus-visible{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent) 22%,var(--map-screen));box-shadow:0 0 0 1px var(--accent-2),0 0 3cqw color-mix(in srgb,var(--accent-2) 35%,transparent);transform:translateY(-.3cqw)}
.map-tile-icon{display:grid;place-items:center;width:4.6cqw;height:4.6cqw;min-width:26px;min-height:26px;border-radius:1.1cqw;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 0 2cqw color-mix(in srgb,var(--accent) 50%,transparent)}
.map-tile-icon svg{width:62%;height:62%}
.map-tile-name{font:600 max(11px,1.75cqw)/1.2 var(--sans)}
.map-tile-meta{font:max(9px,1.2cqw)/1.3 var(--mono);color:var(--map-muted)}
.map-tile-flag{position:absolute;top:1.2cqw;right:1.2cqw;font:600 max(8px,1cqw)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:.5cqw .8cqw;border-radius:999px;color:var(--map-screen);background:var(--accent-2)}
.map-tile.is-suggested::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--accent-2);opacity:0;animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}

/* Inside one system */
.map-back{min-height:0;padding:.5cqw 1.2cqw;border-radius:999px;font:600 max(10px,1.25cqw)/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--map-ink);background:transparent;border-color:var(--map-rule)}
.map-app{display:grid;gap:1.8cqw;padding:2.4cqw 2.8cqw;align-content:start}
.map-app-head{display:flex;gap:2cqw;align-items:center}
.map-app-icon{display:grid;place-items:center;flex:none;width:6.4cqw;height:6.4cqw;border-radius:1.6cqw;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 0 3cqw color-mix(in srgb,var(--accent) 55%,transparent)}
.map-app-icon svg{width:60%;height:60%}
.map-app h3{font:400 max(16px,3.4cqw)/1.05 var(--display);letter-spacing:-.02em;color:var(--map-ink)}
.map-app h3 em{font-style:italic;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.map-app-head p{font-size:max(10px,1.45cqw);color:var(--map-muted);margin-top:.4cqw;max-width:70ch}
.map-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(19cqw,1fr));gap:1cqw}
.map-tool{display:grid;gap:.3cqw;text-align:left;min-height:0;padding:1.1cqw 1.3cqw;border-radius:1cqw;border:1px solid var(--map-rule);background:color-mix(in srgb,var(--map-screen) 50%,transparent);color:var(--map-ink);animation:tool-in .5s cubic-bezier(.2,.8,.2,1) both}
.map-tool:nth-child(n){animation-delay:calc(.35s + var(--n,0)*30ms)}
.map-tool strong{font:600 max(10px,1.4cqw)/1.25 var(--sans)}
.map-tool span{font:max(8.5px,1.1cqw)/1.3 var(--mono);color:var(--map-muted)}
.map-tool span em{font-style:normal;color:var(--accent-2)}
.map-tool.is-live{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.map-tool.is-live span{color:var(--accent-2)}
.map-tool:not(:disabled):hover,.map-tool:focus-visible{border-color:var(--accent-2);box-shadow:0 0 2cqw color-mix(in srgb,var(--accent-2) 30%,transparent)}
.map-open{justify-self:start;min-height:0;padding:1cqw 2cqw;border-radius:999px;font:600 max(10px,1.35cqw)/1.3 var(--sans);color:#fff;border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
@keyframes tool-in{from{opacity:0;transform:translateY(1cqw)}}

/* Floating data chips around the desk */
.map-chips{position:absolute;inset:0;pointer-events:none}
.map-chip{position:absolute;display:grid;gap:2px;padding:10px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
.map-chip small{font:10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.map-chip b{font:400 20px/1.1 var(--display);color:var(--ink)}
.is-booted .map-chip{opacity:1;transform:none;animation:float 6s ease-in-out infinite}
.map-chip.c0{left:1.5%;top:6%}.map-chip.c1{left:0;top:58%;animation-delay:-2s}.map-chip.c2{right:1.5%;top:4%;animation-delay:-1s}.map-chip.c3{right:0;top:60%;animation-delay:-3s}
@keyframes float{50%{transform:translateY(-8px)}}
.is-zoomed .map-chip{opacity:0}
.map-stage[data-layout=tall] .map-chips{display:none}

@container (max-width:520px){
 .map-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;padding:3cqw}
 .map-tile{padding:2.6cqw;border-radius:2.4cqw}
 .map-tile-icon{width:9cqw;height:9cqw}
 .map-tile-name{font-size:max(11px,3.6cqw)}
 .map-tile-meta{font-size:max(9px,2.6cqw)}
 .map-tile-flag{display:none}
 .map-tools{grid-template-columns:1fr 1fr}
 .map-app h3{font-size:max(18px,6cqw)}
 .map-app-head p{font-size:max(11px,3cqw)}
 .map-app-icon{width:11cqw;height:11cqw}
 .map-tool strong{font-size:max(11px,3.1cqw)}.map-tool span{font-size:max(9px,2.4cqw)}
 .map-bar{font-size:max(9px,2.5cqw)}.map-boot{font-size:max(10px,3cqw)}
}
html[data-motion=reduced] .map-stage,html[data-motion=reduced] .map-scene,html[data-motion=reduced] .map-svg .draw,html[data-motion=reduced] .map-tile,html[data-motion=reduced] .map-chip{transition:none!important}
html[data-motion=reduced] .trace-pulse,html[data-motion=reduced] .map-chip,html[data-motion=reduced] .map-tile::after,html[data-motion=reduced] .map-tool,html[data-motion=reduced] .map-caret,html[data-motion=reduced] .map-scanline{animation:none!important}
html[data-motion=reduced] .map-boot{display:none}

/* Zoomed: drop the 3D tilt layer so the scaled screen re-renders crisp instead of upscaling a bitmap. */
.map-stage.is-zoomed{transform:none}