:root {
  --bg: #111418;
  --panel: #1a1f26;
  --panel-2: #222832;
  --line: #2e3642;
  --text: #e9edf2;
  --muted: #9aa5b4;
  --accent: #3fb8ff;
  --ok: #34d17c;
  --warn: #ffb23f;
  --bad: #ff5d5d;
  --r: 8px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit; color: inherit; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px;
}
button:hover { border-color: #46515f; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */
.bar {
  flex: none; /* never squeezed by the page's column layout, or its wrapped rows spill under the stage */
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 18px; margin: 0; letter-spacing: .2px; }
.modes { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.mode { border: 0; border-radius: 0; background: transparent; padding: 6px 14px; color: var(--muted); }
.mode.on { background: var(--accent); color: #04121c; font-weight: 600; }
.scene { border: 0; border-radius: 0; background: transparent; padding: 6px 14px; color: var(--muted); }
.scene.on { background: #e9edf2; color: #111418; font-weight: 600; }
.scene + .scene { border-left: 1px solid var(--line); }
/* stats and tool buttons wrap as one group: stats on the left, buttons on the right */
.bar-right { flex: 1 1 auto; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.stats { display: flex; gap: 14px; margin-right: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats #progress { color: var(--text); font-weight: 600; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }
.tool[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ---------- layout ---------- */
.lab {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px;
  padding: 16px;
}
/* the stage sizes itself to the space the bench actually has (cqh), whatever height the top bar wraps to */
.bench { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.stage {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 1596;
  max-height: 100cqh;
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  touch-action: none;
}
.board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#zones, #placed { position: absolute; inset: 0; }
#placed { pointer-events: none; }

.side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

/* ---------- info card ---------- */
.info {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; min-height: 150px;
}
.info h2 { margin: 2px 0 6px; font-size: 20px; }
.info p { margin: 0 0 8px; color: #cdd5df; }
.info .tip { color: var(--muted); font-size: 13px; }
.info .where { color: var(--accent); font-weight: 600; }
.info.ok { border-color: var(--ok); }
.info.ok .eyebrow { color: var(--ok); }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- parts tray ---------- */
.tray {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
  padding: 2px;
}
.part {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: grab; touch-action: none; transition: transform .12s, border-color .12s, opacity .2s;
}
.part:hover { border-color: #4a5664; transform: translateY(-1px); }
.part.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(63,184,255,.35); }
.part.dragging { opacity: .35; }
.part.used { display: none; }
.part .pic {
  width: 100%; height: 86px; border-radius: 6px;
  background: #e9ecef; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.part .pic img { max-width: 92%; max-height: 92%; object-fit: contain; pointer-events: none; }
.part .pic.photo img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.part .name { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.25; }
.tray-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 20px 0; }

/* ---------- drop zones ---------- */
.zone { position: absolute; border-radius: 4px; }
.zone .tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(10,14,20,.86); color: #fff; border: 1px solid var(--accent);
  font-size: clamp(9px, 1.05vw, 13px); font-weight: 600; white-space: nowrap;
  padding: 2px 7px; border-radius: 4px; display: none; pointer-events: none; z-index: 5;
}
.show-labels .zone .tag { display: block; }
.show-labels .zone { outline: 1px dashed rgba(63,184,255,.7); }
.show-labels .zone.filled { outline: none; }
.show-labels .zone.filled .tag { display: none; }
/* Learn mode: where the part in hand can go */
.zone.target { outline: 2px solid var(--accent); background: rgba(63,184,255,.16); animation: pulse 1.1s ease-in-out infinite; }
.zone.over { outline: 3px solid var(--ok); background: rgba(52,209,124,.25); animation: none; }
.zone.nope { outline: 3px solid var(--bad); background: rgba(255,93,93,.25); animation: none; }
.zone.flash-ok { animation: flashok .6s ease-out; }
@keyframes pulse { 50% { background: rgba(63,184,255,.05); } }
@keyframes flashok { 0% { box-shadow: 0 0 0 0 rgba(52,209,124,.9); } 100% { box-shadow: 0 0 0 26px rgba(52,209,124,0); } }

/* ---------- installed parts ---------- */
.inst { position: absolute; pointer-events: auto; cursor: grab; touch-action: none; }
.inst img { position: absolute; display: block; pointer-events: none; }
.inst.fit img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.inst.snap { animation: snap .22s ease-out; }
@keyframes snap { 0% { transform: scale(1.06); filter: brightness(1.3); } 100% { transform: scale(1); filter: none; } }

.inst.cpu img { border-radius: 3%; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.inst.cooler img { filter: drop-shadow(0 10px 14px rgba(0,0,0,.65)); }
.inst.ram { border-radius: 2px; overflow: hidden; background: #0d0d0f; box-shadow: 0 3px 6px rgba(0,0,0,.7); }
.inst.ram img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.inst.rot img { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--rot, 90deg)); }
.inst.gpu img { filter: drop-shadow(14px 10px 14px rgba(0,0,0,.75)); }
.inst.m2 img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.inst.mobo img, .inst.psu img, .inst.hdd img, .inst.fan img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.inst.ssd img { border-radius: 6px; }
.stage.on .inst.fan img { animation: none; }

/* power connectors are drawn: we look down at the back of the plug, where
   each wire goes into its pin, so the plug body fully covers the header */
.inst.plug { overflow: visible; }
.inst.plug .head {
  position: absolute; inset: -9% -3%; border-radius: 4px;
  background: linear-gradient(#1a1a1a, #070707);
  box-shadow: 0 4px 10px rgba(0,0,0,.8), inset 0 0 0 2px #262626;
}
.inst.plug .head::before { /* wire ends seated in every pin */
  content: ""; position: absolute; inset: 14% 5%;
  background: var(--wire-colors);
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 58%) 0 0 / var(--pin);
          mask: radial-gradient(circle, #000 52%, transparent 58%) 0 0 / var(--pin);
}
.inst.plug .head::after { /* the latch clip */
  content: ""; position: absolute; background: #1e1e1e; border: 2px solid #333; border-radius: 3px;
}
.inst.plug .wires { position: absolute; }
.inst.p24 { --pin: 8.333% 50%;
  --wire-colors: linear-gradient(90deg,#ff8c1a 0 8.3%,#e83030 8.3% 16.6%,#111 16.6% 25%,#e83030 25% 33.3%,#111 33.3% 41.6%,#e8e8e8 41.6% 50%,#f2d22c 50% 58.3%,#2d6cdf 58.3% 66.6%,#2ca24a 66.6% 75%,#7a3fd0 75% 83.3%,#f2d22c 83.3% 91.6%,#ff8c1a 91.6%); }
.inst.p24 .head::after { left: 42%; width: 16%; top: -22%; height: 26%; }
.inst.p24 .wires {
  left: 4%; right: 4%; bottom: 105%; height: 150%;
  background: repeating-linear-gradient(90deg,#ff8c1a 0 4%,#e8e8e8 4% 8%,#111 8% 12%,#e83030 12% 16%,#111 16% 20%,#f2d22c 20% 24%,#2d6cdf 24% 28%,#2ca24a 28% 32%,#7a3fd0 32% 36%,#888 36% 40%);
  -webkit-mask: linear-gradient(to top, #000 70%, transparent);
          mask: linear-gradient(to top, #000 70%, transparent);
}
.inst.p8 { --pin: 50% 25%; --wire-colors: linear-gradient(90deg, #f2d22c 50%, #111 50%); }
.inst.p8 .head { inset: -4% -12%; }
.inst.p8 .head::after { top: 40%; height: 20%; right: -22%; width: 26%; }
.inst.p8 .wires {
  right: 108%; top: 6%; bottom: 6%; width: 220%;
  background: repeating-linear-gradient(0deg,#f2d22c 0 12.5%,#111 12.5% 25%);
  -webkit-mask: linear-gradient(to left, #000 60%, transparent);
          mask: linear-gradient(to left, #000 60%, transparent);
}
.inst.sata .head { inset: 6% auto 6% 3%; width: 30%; --pin: 100% 100%; background: linear-gradient(#2b2b2b, #151515); }
.inst.sata .head::before { inset: 30% 20%; background: #c41a35; -webkit-mask: none; mask: none; border-radius: 2px; }
.inst.sata .head::after { display: none; }
.inst.sata .wires {
  left: 9%; width: 18%; bottom: 92%; height: 130%;
  background: linear-gradient(90deg, #b8132f, #e3264a 50%, #b8132f);
  -webkit-mask: linear-gradient(to top, #000 65%, transparent);
          mask: linear-gradient(to top, #000 65%, transparent);
}

/* ---------- drag ghost ---------- */
.ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: 150px; height: 110px; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.6));
  transform-origin: 0 0; will-change: transform;
}
.ghost img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.ghost.fly { transition: transform .22s cubic-bezier(.3,.7,.4,1), opacity .22s; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60;
  background: #0b0e12; border: 1px solid var(--line); border-left: 4px solid var(--warn);
  padding: 10px 16px; border-radius: 6px; max-width: min(560px, calc(100vw - 32px));
  box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 500;
}
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }

/* ---------- completion ---------- */
.done {
  position: fixed; inset: 0; z-index: 70; background: rgba(5,7,10,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.done-card {
  background: var(--panel); border: 1px solid var(--ok); border-radius: 12px;
  padding: 22px 26px; width: min(420px, 100%); text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.done-card h2 { margin: 4px 0 8px; font-size: 26px; }
.done-card .eyebrow { color: var(--ok); }
.done-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.primary { background: var(--ok); color: #04150b; border-color: var(--ok); font-weight: 700; }
.stage[data-scene="board"].on::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(63,184,255,.55); animation: glow 2.4s ease-in-out infinite;
}
@keyframes glow { 50% { box-shadow: inset 0 0 90px rgba(150,90,255,.6); } }


/* ---------- credits ---------- */
.credits { padding: 0 16px 10px; color: var(--muted); font-size: 12px; }
.credits summary { cursor: pointer; }
.credits a { color: var(--muted); }
#credit-list p { margin: 4px 0; }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .lab { grid-template-columns: 1fr; flex: none; }
  .bench { container-type: normal; }
  .stage { max-height: none; max-width: none !important; }
  .tray { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .info { min-height: 0; }
}
@media (max-width: 600px) {
  .bar { padding: 10px 12px; }
  .scenes { width: 100%; }
  .scene { flex: 1; padding: 6px 4px; font-size: 13px; white-space: nowrap; }
  .tools .tool { padding: 5px 9px; font-size: 14px; }
  .stats { flex-wrap: wrap; gap: 4px 12px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- scene 2: the case in 3D ---------- */
#world-host { position: absolute; inset: 0; overflow: hidden; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.world .room { position: absolute; inset: 0;
  background: linear-gradient(#dfe4ea, #c9d0d8 78%, #b9a184 78%, #a88d6e 79%, #8f7559); }
.view3d { position: absolute; inset: 0; perspective: 1200px; }
.box, .plane, .cuboid, .mobo3d { transform-style: preserve-3d; }
.box { position: absolute; }
.plane { position: absolute; }
.plane.back { background: linear-gradient(135deg, #2b3037, #20242a); }
.plane.top { background: linear-gradient(#15181c, #23272d); }
.plane.floor { background: linear-gradient(#262a30, #16191d); }
.plane.rear { background: linear-gradient(90deg, #1b1e22, #2a2f35); }
.plane.front { background: linear-gradient(90deg, #1b1e22, #2a2f35); }
.tray-art { position: absolute; border-radius: 8px; background: #33383f; box-shadow: inset 0 0 0 2px #3c424a; }
.standoff { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(#e2c06a, #9a7a2a); box-shadow: 0 0 0 3px #6d5520; }
.grommet { position: absolute; border-radius: 15px; background: #0a0b0d; box-shadow: inset 0 0 0 4px #3a3f46; }
.bracket-art { position: absolute; border-radius: 8px; background: #2f343b; box-shadow: inset 0 0 0 3px #4a515a; }
.floor-vent, .fan-mount { position: absolute; border-radius: 12px;
  background: radial-gradient(circle, #0c0e11 4.5px, transparent 5px) 0 0 / 16px 16px, #2a2f35; box-shadow: inset 0 0 0 3px #3e444c; }
.fan-mount { border-radius: 50%; }
.io-hole { position: absolute; background: #0a0b0d; border-radius: 4px; box-shadow: inset 0 0 0 3px #3e444c; }
.slot-cover { position: absolute; background: repeating-linear-gradient(90deg, #3a4048 0 6px, #22262b 6px 10px); border-radius: 3px; }
.cuboid { position: absolute; left: 0; top: 0; }
.face { position: absolute; backface-visibility: visible; }
.cage .face { box-shadow: inset 0 0 0 5px #5d646d; }
.cage .face.top, .cage .face.bottom { background: rgba(70,76,84,.55) !important; }
.anchor { position: absolute; width: 2px; height: 2px; pointer-events: none; }
.world .zone { pointer-events: auto; }
.world .zone[data-id="opening"] { pointer-events: none; }
.world .zone .tag { font-size: 22px; }
.world .zone.target { outline-width: 5px; }
.world .zone.over { outline-width: 7px; }
.world .snap { animation: snap3d .35s ease-out; }
@keyframes snap3d { 0% { filter: brightness(1.6); } 100% { filter: none; } }
.mobo3d { position: absolute; }
.mobo3d .board-img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.gpu3d .face.left { background: linear-gradient(#d9dce0, #9fa4aa) !important; }
.ssd3d { position: absolute; }
.ssd3d img { width: 100%; height: 100%; display: block; border-radius: 6px; pointer-events: none; box-shadow: 0 6px 12px rgba(0,0,0,.6); }
.fan3d { position: absolute; }
.fan3d img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 49%, transparent 41%, #000 41.5%); mask: radial-gradient(circle at 50% 49%, transparent 41%, #000 41.5%); }
.fan3d .blades { position: absolute; inset: 0; background: url(img/fan.png) center / 100% 100%;
  clip-path: circle(41.5% at 50% 49%); transform-origin: 50% 49%; }
.world.on .fan3d .blades { animation: spin .25s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.world svg.cables, .world svg.airflow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cable { fill: none; stroke-linecap: round; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.cable-shine { fill: none; stroke: rgba(255,255,255,.18); stroke-linecap: round; }
.cplug { fill: #0b0b0b; stroke: #2a2a2a; stroke-width: 2; }
.airflow .air path { fill: none; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 46 30; animation: drift .9s linear infinite; opacity: .95; }
@keyframes drift { to { stroke-dashoffset: -76; } }
.shell { position: absolute; border: 26px solid #e6e9ed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 30px 50px rgba(0,0,0,.35), inset 0 0 0 2px #c4c9cf; }
.bezel { position: absolute; background: linear-gradient(90deg, #f1f3f5, #d7dbe0); border-radius: 0 16px 16px 0;
  box-shadow: 0 30px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 40px; }
.pwr-btn { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #9aa1a9; padding: 0;
  background: radial-gradient(circle, #f7f8f9 55%, #d4d8dd); cursor: pointer; position: relative; }
.pwr-btn::before { content: ""; position: absolute; inset: 11px; border: 3px solid #5b636c; border-top-color: transparent; border-radius: 50%; }
.pwr-btn::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 14px; margin-left: -1.5px; background: #5b636c; }
.pwr-btn:hover { border-color: var(--accent); }
.bezel .usb { width: 30px; height: 12px; background: #1b1e22; border-radius: 2px; box-shadow: inset 0 3px 0 #3d6fd8; }
.bezel .led { width: 10px; height: 10px; border-radius: 50%; background: #6b7178; }
.world.on .bezel .led { background: #4fe39a; box-shadow: 0 0 12px #4fe39a; }
.world.on .pwr-btn { border-color: #4fe39a; box-shadow: 0 0 16px rgba(79,227,154,.8); }
.world.on .box .plane.back { box-shadow: inset 0 0 160px rgba(80,160,255,.35); }
.foot { position: absolute; background: #1a1a1a; border-radius: 0 0 6px 6px; }
.glass-panel { position: absolute; border-radius: 12px; border: 10px solid rgba(12,14,16,.92);
  background:
    linear-gradient(118deg, rgba(255,255,255,.22) 0 8%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 40%, rgba(255,255,255,.1) 58%, rgba(255,255,255,.02) 75%),
    rgba(40,60,80,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); cursor: grab; }
.glass-panel i { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #e9ebee 40%, #9ba1a8); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.glass-panel i:nth-child(1) { left: 6px; top: 6px; } .glass-panel i:nth-child(2) { right: 6px; top: 6px; }
.glass-panel i:nth-child(3) { left: 6px; bottom: 6px; } .glass-panel i:nth-child(4) { right: 6px; bottom: 6px; }
.outlet { position: absolute; background: linear-gradient(#fbfbf9, #e9e8e3); border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,.25), inset 0 0 0 2px #d2d0c8;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
.outlet .sock { width: 64px; height: 60px; border-radius: 30px 30px 22px 22px; background: #f3f2ee; box-shadow: inset 0 0 0 2px #cfcdc4; position: relative; }
.outlet .sock::before, .outlet .sock::after { content: ""; position: absolute; top: 14px; width: 7px; height: 20px; background: #333; border-radius: 2px; }
.outlet .sock::before { left: 16px; } .outlet .sock::after { right: 16px; height: 16px; }
.cord-plug { position: absolute; background: linear-gradient(#2a2a2a, #0b0b0b); border-radius: 12px; box-shadow: 0 6px 10px rgba(0,0,0,.5); }

/* ---------- scene 3: the desk ---------- */
#desk-cables { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.inst.stretch img { object-fit: fill; }
.inst.monitor img, .inst.speaker img, .inst.printer img, .inst.mic img { filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.inst.keyboard img, .inst.mouse img { filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.inst .screen { position: absolute; left: 3.65%; top: 4%; width: 92.76%; height: 74.37%; overflow: hidden; background: #000;
  opacity: 0; transition: opacity .6s; pointer-events: none; }
.stage.on .inst .screen { opacity: 1; pointer-events: auto; cursor: zoom-in; }
.mon-btn { position: absolute; left: 56.5%; top: 78.6%; width: 1.9%; aspect-ratio: 1; padding: 0; border-radius: 3px;
  background: #1a1a1c; border: 1px solid #555; cursor: pointer; pointer-events: auto; }
.mon-btn:hover { border-color: var(--accent); }
.stage.on .mon-btn { border-color: #6aa8ff; box-shadow: 0 0 6px #6aa8ff; }
.pc-btn { position: absolute; padding: 0; border-radius: 50%; background: #fff; border: 2px solid #9aa1a9; cursor: pointer; z-index: 3; }
.pc-btn::before { content: ""; position: absolute; inset: 24%; border: 2px solid #59616b; border-top-color: transparent; border-radius: 50%; }
.pc-btn::after { content: ""; position: absolute; left: calc(50% - 1px); top: 16%; width: 2px; height: 38%; background: #59616b; }
.pc-btn:hover { border-color: var(--accent); }
.stage.pc-ready .pc-btn { animation: pcpulse 1.1s ease-in-out infinite; }
@keyframes pcpulse { 50% { box-shadow: 0 0 0 6px rgba(79,227,154,.55); } }
.pc-led { position: absolute; border-radius: 50%; background: #2b2f36; pointer-events: none; transition: background .3s, box-shadow .3s; }
.stage.on .pc-led { background: #4fe39a; box-shadow: 0 0 8px #4fe39a; }
.kind { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 1px 7px; border-radius: 4px; color: #0b0f14; }
.kind-input { background: #7fd3ff; } .kind-output { background: #ffb07a; } .kind-storage { background: #b9e98b; }
.inst .screen .kind { font-size: .8em; padding: 0 .4em; }

/* ---------- workbench + tools ---------- */
.stage.bench { background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 230px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px, rgba(0,0,0,.04) 9px 10px, transparent 10px 23px),
    radial-gradient(ellipse at 30% 40%, rgba(255,220,170,.18), transparent 60%),
    linear-gradient(90deg, #a8733f, #b98049 18%, #a46c39 37%, #bd8650 55%, #a36b37 74%, #b47c46);
  box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 0 80px rgba(60,30,5,.35); }
.stage.bench .board { filter: drop-shadow(14px 22px 18px rgba(30,15,0,.55)); }
.bench-tool { position: absolute; display: flex; align-items: center; justify-content: center; cursor: help; touch-action: none; z-index: 4; }
.bench-tool img { max-width: 100%; max-height: 100%; transform: rotate(var(--rot, 0deg)); pointer-events: none;
  filter: drop-shadow(8px 12px 8px rgba(30,15,0,.5)); }
.tools-on .bench-tool { cursor: grab; }
.tools-on .bench-tool img { animation: toolpulse 1.6s ease-in-out infinite; }
@keyframes toolpulse { 50% { filter: drop-shadow(0 0 14px rgba(255,214,90,.95)); } }
.world .bench-tool img { transform: rotate(var(--rot)); }
.tool-ghost img { max-height: 110px; }
.inst.loose { outline: 4px dashed #ffb23f; outline-offset: 4px; animation: loose 1s ease-in-out infinite; }
@keyframes loose { 50% { outline-color: rgba(255,178,63,.25); } }
.inst.cpu.pasted::after { content: ""; position: absolute; left: 42%; top: 42%; width: 16%; height: 16%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d8dadc, #8f9397); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
#tools-btn[aria-pressed="true"] { border-color: #ffb23f; color: #ffb23f; }

/* ---------- the computer turned on: BIOS, sign-in, desktop (os.js) ---------- */
.os { position: absolute; inset: 0; overflow: hidden; background: #000; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3; user-select: none; -webkit-user-select: none; cursor: default; }
.os-post { position: absolute; inset: 0; padding: 1.2em 1.6em; font: .8em/1.45 ui-monospace, Menlo, Consolas, monospace; color: #cfd8e3; }
.os-post-head { display: flex; justify-content: space-between; color: #3fb7ee; font-weight: 700; border-bottom: 1px solid #234; padding-bottom: .4em; margin-bottom: .6em; }
.os-post pre { margin: 0; font: inherit; white-space: pre-wrap; }
.os-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7em;
  background: radial-gradient(circle at 50% 45%, #13284f, #04080f 70%); }
.os-logo svg { width: 4em; height: 4em; display: block; }
.os-load b { font-size: 1.6em; letter-spacing: .04em; }
.os-load small { font-size: .75em; opacity: .7; }
.os-spin { display: flex; gap: .35em; }
.os-spin i { width: .45em; height: .45em; border-radius: 50%; background: #fff; animation: osdot 1.1s ease-in-out infinite; }
.os-spin i:nth-child(2) { animation-delay: .12s; } .os-spin i:nth-child(3) { animation-delay: .24s; }
.os-spin i:nth-child(4) { animation-delay: .36s; } .os-spin i:nth-child(5) { animation-delay: .48s; }
.os-spin.small { display: inline-flex; vertical-align: middle; gap: .2em; } .os-spin.small i { width: .35em; height: .35em; }
@keyframes osdot { 0%, 80%, 100% { opacity: .2; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } }
.os-login, .os-desk { position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 40% at 20% 105%, #2f9a6b 0 60%, transparent 61%),
    radial-gradient(ellipse 60% 35% at 85% 108%, #237a55 0 60%, transparent 61%),
    linear-gradient(165deg, #142f6b, #2f6fd0 50%, #6fd0ea); }
.os-login { display: flex; flex-direction: column; align-items: center; padding-top: 1.6em; }
.os-clock { font-size: 3.2em; font-weight: 300; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.os-date { opacity: .9; margin-bottom: 1.2em; }
.os-user { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: 1.1em 2em; border-radius: .8em;
  background: rgba(8,16,36,.4); backdrop-filter: blur(6px); }
.os-avatar { width: 2.8em; height: 2.8em; border-radius: 50%; background: #ffb07a; color: #3a2410; display: grid; place-items: center; font-size: 1.4em; font-weight: 700; }
.os-pass { display: flex; }
.os-pass input { font: inherit; font-size: .9em; width: 11em; padding: .45em .7em; border: 0; border-radius: .4em 0 0 .4em; outline: none; color: #111; background: #fff; user-select: text; }
.os-pass input:focus { box-shadow: inset 0 0 0 2px #3fb7ee; }
.os-pass button { font: inherit; border: 0; background: #3fb7ee; color: #fff; padding: 0 .8em; border-radius: 0 .4em .4em 0; cursor: pointer; font-weight: 700; }
.os-hint { font-size: .72em; opacity: .9; }
.os-pass.shake { animation: osshake .35s; }
@keyframes osshake { 25% { transform: translateX(-.5em); } 75% { transform: translateX(.5em); } }
.os-icons { position: absolute; left: .7em; top: .7em; display: flex; flex-direction: column; gap: .5em; }
.os-icon { width: 6.2em; padding: .45em .2em; display: flex; flex-direction: column; align-items: center; gap: .3em; font: inherit; font-size: .75em;
  color: #fff; text-shadow: 0 1px 3px #000; background: none; border: 1px solid transparent; border-radius: .4em; cursor: pointer; }
.os-icon svg { width: 3.2em; height: 3.2em; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.os-icon:hover { background: rgba(255,255,255,.12); }
.os-icon.sel { background: rgba(120,190,255,.3); border-color: rgba(190,225,255,.7); }
.os-icon[data-app="game"] { animation: osnudge 2s ease-in-out 1s 3; }
@keyframes osnudge { 50% { background: rgba(255,211,77,.35); } }
.os-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.1em; display: flex; align-items: center; gap: .6em; padding: 0 .7em;
  font-size: .8em; background: rgba(8,14,30,.8); }
.os-start svg { width: 1.4em; height: 1.4em; display: block; }
.os-tasks { flex: 1; display: flex; gap: .4em; }
.os-task { padding: .15em .7em; border-radius: .3em; background: rgba(255,255,255,.15); font-size: .9em; }
.os-win { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden;
  background: #f4f6fa; color: #1b2330; border-radius: .5em; box-shadow: 0 1em 2.5em rgba(0,0,0,.45); }
.os-win-game { width: 78%; top: 45%; }
.os-win-usb { width: 46%; left: 58%; top: 40%; }
.os-win-pc { width: 50%; left: 46%; top: 50%; }
.os-title { display: flex; justify-content: space-between; align-items: center; padding: .2em .25em .2em .6em; font-size: .75em; font-weight: 600; background: #dfe5ee; }
.os-title span { display: flex; align-items: center; gap: .4em; }
.os-title svg { width: 1.3em; height: 1.3em; }
.os-close { font: inherit; padding: .1em .6em; border: 0; border-radius: .3em; background: none; cursor: pointer; color: inherit; }
.os-close:hover { background: #e5484d; color: #fff; }
.os-body { padding: .7em 1em; font-size: .72em; }
.os-body p { margin: .35em 0; }
.os-body .kind { font-size: .85em; }
.os-win-game .os-body { position: relative; aspect-ratio: 16 / 9; padding: 0; background: #000; }
.os-files { list-style: none; margin: .4em 0; padding: 0; }
.os-files li { display: flex; align-items: center; gap: .6em; padding: .3em .2em; border-bottom: 1px solid #e1e6ee; }
.os-files li span { margin-left: auto; color: #6b7685; }
.os-files i { width: 1.1em; height: 1.3em; border-radius: .15em; }
.f-doc { background: #3b78e7; } .f-ppt { background: #e8663d; } .f-img { background: #3fbf7f; }
.os-note.small { color: #6b7685; font-size: .9em; }
.os-specs { list-style: none; margin: 0 0 .5em; padding: 0; }
.os-specs li { display: flex; gap: .8em; padding: .25em 0; border-bottom: 1px solid #e1e6ee; }
.os-specs b { width: 7.5em; flex: none; }
.game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; outline: none; }
.game-pad { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .6em; padding: .6em; pointer-events: none; }
.game-pad button { pointer-events: auto; width: 3em; height: 3em; border-radius: 50%; font-size: 1.1em; color: #fff; touch-action: none;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); }
.game-pad button.down { background: rgba(255,255,255,.4); }
.game-pad .jump { margin-left: auto; width: 3.6em; height: 3.6em; }
@media (hover: hover) and (pointer: fine) { .game-pad { display: none; } }
.bigscreen { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(5,8,15,0); transition: background .35s; }
.bigscreen.in { background: rgba(5,8,15,.92); }
.big-frame { position: relative; width: min(94vw, calc((100vh - 130px) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px;
  box-shadow: 0 0 0 10px #111, 0 20px 60px rgba(0,0,0,.6); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.big-row { display: flex; align-items: center; gap: 16px; width: min(94vw, calc((100vh - 130px) * 16 / 9)); opacity: 0; transition: opacity .3s .3s; }
.bigscreen.in .big-row { opacity: 1; }
.big-cap { flex: 1; margin: 0; color: #c9d4e2; font: 15px/1.4 system-ui, sans-serif; }
.big-cap b { color: #fff; }
.big-eyebrow { display: block; color: #4fe39a; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.big-back { flex: none; padding: 8px 16px; font: 600 14px system-ui, sans-serif; color: #e6edf7;
  background: #1d2633; border: 1px solid #344257; border-radius: 8px; cursor: pointer; }
.big-back:hover { border-color: var(--accent); }

/* ---------- whole-activity timer ---------- */
.stats #total { color: var(--accent); font-weight: 600; }

/* ---------- screwdriver in the wall outlet ---------- */
.boom { position: fixed; inset: 0; z-index: 100; pointer-events: auto; overflow: hidden; }
.boom-flash { position: absolute; inset: 0; background: #fff; animation: boomflash .7s ease-out forwards; }
@keyframes boomflash { 0%, 30% { opacity: 0; } 36% { opacity: 1; } 100% { opacity: 0; } }
.boom-fire { position: absolute; left: var(--x); top: var(--y); width: 40px; height: 40px; margin: -20px; border-radius: 50%;
  background: radial-gradient(circle, #fff7c2 0%, #ffd34d 25%, #ff7a2d 55%, rgba(200,40,0,0) 72%);
  animation: boomfire 1.1s .25s ease-out both; }
@keyframes boomfire { 0% { transform: scale(.2); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(22); opacity: 0; } }
.boom-smoke { position: absolute; left: var(--x); top: var(--y); width: 120px; height: 120px; margin: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(70,70,74,.95) 0%, rgba(50,50,54,.7) 45%, rgba(40,40,44,0) 70%);
  animation: boomsmoke 3.2s ease-out both; }
@keyframes boomsmoke { 0% { transform: translate(0,0) scale(.2); opacity: 0; } 15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)); opacity: .0; } }
.boom-spark { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: #ffe58a;
  box-shadow: 0 0 8px #ffb23f; animation: boomspark .8s .22s ease-out both; }
@keyframes boomspark { 0% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.boom-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(460px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--bad); border-radius: 12px; padding: 22px 26px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.7); animation: boomcard .4s 1.2s ease-out both; }
.boom-card .eyebrow { color: var(--bad); }
.boom-card h2 { margin: 4px 0 8px; font-size: 24px; }
@keyframes boomcard { from { opacity: 0; transform: translate(-50%,-40%) scale(.9); } to { opacity: 1; transform: translate(-50%,-50%); } }
body.shake { animation: bodyshake .7s .25s; }
@keyframes bodyshake { 10%, 50%, 90% { transform: translate(-8px, 4px); } 30%, 70% { transform: translate(8px, -5px); } }

/* ---------- OS: sign-in box without a real password field ---------- */
.os-secret { -webkit-text-security: disc; text-security: disc; }
.os input { -webkit-user-select: text; user-select: text; }

/* ---------- OS: BIOS setup and the POST shortcut ---------- */
.post-setup { position: absolute; left: 1.2em; bottom: 1em; font: inherit; font-size: .8em; color: #9fc3e6; background: none; border: 1px dashed #345; border-radius: .3em; padding: .3em .6em; cursor: pointer; }
.post-setup kbd { font: inherit; color: #fff; background: #234; border-radius: .2em; padding: 0 .3em; }
.os-bios { position: absolute; inset: 0; padding: 1.2em 1.6em; background: #0a1a3a; color: #dfe9f7; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
.bios-row { display: flex; align-items: center; gap: 1em; margin: .6em 0 .8em; }
.bios-row b { width: 8em; }
.bios-row input { flex: 1; accent-color: #ffd34d; }
.bios-row output { width: 5.5em; text-align: right; color: #ffd34d; font-weight: 700; }
.bios-gauge { height: .7em; background: #13284f; border-radius: .35em; overflow: hidden; margin-bottom: .7em; }
.bios-gauge i { display: block; height: 100%; background: #34d17c; transition: width .2s; }
.bios-gauge i.hot { background: #ffb23f; } .bios-gauge i.danger { background: #ff5d5d; }
.bios-stats { display: grid; grid-template-columns: 9em 1fr; gap: .2em 1em; margin: 0 0 .6em; }
.bios-stats dt { color: #8fa6c8; } .bios-stats dd { margin: 0; }
.bios-msg { margin: .4em 0; font-weight: 700; color: #34d17c; }
.bios-msg.hot { color: #ffb23f; } .bios-msg.danger { color: #ff5d5d; animation: biosblink 1s steps(2) infinite; }
@keyframes biosblink { 50% { opacity: .35; } }
.bios-btns { display: flex; gap: .8em; }
.bios-btns button { font: inherit; padding: .35em .9em; color: #0a1a3a; background: #dfe9f7; border: 0; border-radius: .25em; cursor: pointer; }
.bios-btns button[data-act="save"] { background: #ffd34d; font-weight: 700; }
.os-cpu { font-size: .9em; padding: .1em .5em; border-radius: .3em; background: rgba(52,209,124,.3); }
.os-cpu.hot { background: rgba(255,178,63,.45); } .os-cpu.danger { background: rgba(255,93,93,.6); animation: biosblink 1s steps(2) infinite; }
.os-desk.cooking::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 40%, rgba(255,60,0,.45)); animation: biosblink .8s steps(2) infinite; }

/* ---------- OS: start menu, windows, dialogs ---------- */
.os-start { font: inherit; padding: 0; background: none; border: 0; cursor: pointer; }
.os-menu { position: absolute; left: .4em; bottom: 2.2em; z-index: 999; display: flex; flex-direction: column; font-size: .8em; padding: .3em; border-radius: .4em; background: rgba(8,14,30,.95); }
.os-menu button { font: inherit; color: #fff; text-align: left; padding: .4em .9em; background: none; border: 0; border-radius: .3em; cursor: pointer; }
.os-menu button:hover { background: rgba(255,255,255,.15); }
.os-icons { bottom: 2.6em; flex-wrap: wrap; align-content: flex-start; }
.os-win-music { width: 40%; left: 62%; top: 44%; }
.os-win-web { width: 66%; left: 54%; top: 47%; }
.os-win-file { width: 46%; }
.os-win-dialog { width: 38%; }
.os-btns { display: flex; gap: .6em; justify-content: flex-end; margin-top: .7em; }
.os-btn { font: inherit; padding: .3em .9em; border: 1px solid #b9c3d1; border-radius: .3em; background: #fff; cursor: pointer; }
.os-btn.danger { background: #e5484d; border-color: #e5484d; color: #fff; }
.os-btn.small { padding: .1em .6em; font-size: .9em; }
.os-files li button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .6em; width: 100%; padding: .1em .2em; cursor: pointer; border-radius: .2em; }
.os-files li button span { margin-left: auto; color: #6b7685; }
.os-files li button.sel, .os-files li button:hover { background: #dbe8fb; }
.f-txt { background: #9aa5b4; }
.os-sub { font-weight: 700; margin-top: .8em !important; }
.os-folders li { gap: .5em; }
.os-folders .f-row { display: flex; align-items: center; gap: .5em; margin: 0; color: inherit; width: 8em; }
.os-folders svg { width: 1.6em; height: 1.6em; }
.os-folders small { color: #6b7685; flex: 1; }
.os-text { margin: 0; max-height: 15em; overflow: auto; font: .95em/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; }
.os-drawing { display: block; width: 100%; height: auto; border-radius: .2em; }

/* ---------- OS: Tunes ---------- */
.tn-vis { display: block; width: 100%; height: auto; border-radius: .3em; background: #10141c; }
.tn-now { display: flex; flex-direction: column; margin: .4em 0; }
.tn-now small { color: #6b7685; }
.tn-ctl { display: flex; gap: .5em; justify-content: center; }
.tn-ctl button { font: inherit; font-size: 1.1em; width: 2.2em; height: 2.2em; border-radius: 50%; border: 1px solid #b9c3d1; background: #fff; cursor: pointer; }
.tn-ctl .tn-play { background: #e8508a; border-color: #e8508a; color: #fff; }
.tn-list { margin: .5em 0 0; padding-left: 1.4em; }
.tn-list button { all: unset; cursor: pointer; padding: .1em .3em; border-radius: .2em; }
.tn-list button.on { font-weight: 700; color: #c2316c; }
.tn-list button:hover { background: #fde4ee; }

/* ---------- OS: Surf, the pretend web browser ---------- */
.os-win-web .os-body { padding: 0; }
.sf-bar { display: flex; align-items: center; gap: .3em; padding: .35em .5em; background: #e9edf3; border-bottom: 1px solid #cfd6e0; }
.sf-bar button { font: inherit; padding: .15em .55em; border: 1px solid #c3ccd8; border-radius: .3em; background: #fff; cursor: pointer; }
.sf-url { flex: 1; min-width: 0; font: inherit; padding: .2em .5em; border: 1px solid #c3ccd8; border-radius: 1em; background: #fff; color: #1b2330; }
.sf-lock { font-size: .9em; white-space: nowrap; }
.sf-lock.bad { color: #c22; font-weight: 700; }
.sf-page { height: 15.5em; overflow: auto; padding: .7em 1em; background: #fff; }
.sf-page a { color: #1a5fd6; text-decoration: underline; cursor: pointer; }
.sf-page h3 { margin: 0 0 .4em; } .sf-page h4 { margin: .5em 0 .1em; }
.sf-small { color: #6b7685; font-size: .9em; }
.sf-home { text-align: center; padding-top: 1.5em; }
.sf-logo { font-size: 2.6em; font-weight: 800; color: #2fa6e8; letter-spacing: -.02em; } .sf-logo span { color: #ff5d7a; }
.sf-search { display: flex; justify-content: center; gap: .3em; margin: .6em 0; }
.sf-search input { width: 60%; font: inherit; padding: .35em .8em; border: 1px solid #b9c3d1; border-radius: 1em; }
.sf-search button { font: inherit; padding: .3em .9em; border: 0; border-radius: 1em; background: #2fa6e8; color: #fff; cursor: pointer; }
.sf-res { margin: .5em 0 .8em; } .sf-res small, .sf-ad small { display: block; color: #1f8a4a; } .sf-res p { margin: .1em 0; }
.sf-ad { margin: .5em 0 .9em; padding: .4em .6em; border: 1px dashed #e5a; border-radius: .3em; background: #fff6fb; }
.sf-ad > span { font-size: .8em; font-weight: 700; color: #a36; margin-right: .5em; }
.sf-news article { border-bottom: 1px solid #e1e6ee; padding-bottom: .3em; } .sf-news p { margin: .1em 0; }
.sf-wx h3 small { font-size: .6em; color: #6b7685; font-weight: 400; }
.wx-now { display: flex; align-items: center; gap: .6em; } .wx-now p { margin: 0; } .wx-big { font-size: 2.6em; } .wx-now b { font-size: 2em; }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4em; margin-top: .6em; text-align: center; }
.wx-days div { display: flex; flex-direction: column; padding: .3em; border-radius: .4em; background: #eef5fd; } .wx-days span { font-size: 1.6em; }
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.vid-grid button { font: inherit; display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .5em .3em; border: 1px solid #dde3ec; border-radius: .4em; background: #f6f8fb; cursor: pointer; }
.vid-grid button span { font-size: 2em; } .vid-grid small { color: #6b7685; }
.vid-screen { margin-bottom: .6em; }
.vid-stage { position: relative; aspect-ratio: 16 / 5; overflow: hidden; border-radius: .3em; background: #1b2330; color: #fff; }
.vid-bar { height: .3em; background: #444; } .vid-bar i { display: block; height: 100%; width: 0; background: #ff3b5c; animation: vidbar 10s linear forwards; }
@keyframes vidbar { to { width: 100%; } }
.v-cat { position: absolute; bottom: 10%; font-size: 2.4em; animation: vcat 3s ease-in-out infinite alternate; }
.v-dot { position: absolute; bottom: 18%; width: .5em; height: .5em; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 .5em #f00; animation: vdot 3s ease-in-out infinite alternate; }
@keyframes vcat { from { left: 5%; } to { left: 78%; } }
@keyframes vdot { 0% { left: 25%; } 40% { left: 90%; bottom: 60%; } 100% { left: 92%; bottom: 18%; } }
.v-bot { position: absolute; left: 50%; bottom: 0; height: 85%; translate: -50% 0; animation: vdance .5s ease-in-out infinite alternate; }
@keyframes vdance { from { rotate: -12deg; } to { rotate: 12deg; translate: -50% -8%; } }
.v-note { position: absolute; left: 30%; top: 20%; font-size: 1.6em; animation: vnote 1.2s linear infinite; } .v-note.n2 { left: 66%; animation-delay: .6s; }
@keyframes vnote { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-1.5em); } }
.vid-zoom { display: flex; align-items: center; justify-content: center; gap: .4em; }
.v-bolt { font-size: 2.4em; animation: biosblink .3s steps(2) infinite; } .v-count { font-size: 1.3em; }
.sf-scam { text-align: center; background: repeating-linear-gradient(45deg, #fff200 0 1em, #ffe100 1em 2em); padding: .6em; border: .2em dashed #f0f; }
.scam-flash { font-size: 1.5em; font-weight: 900; color: #f0f; animation: biosblink .5s steps(2) infinite; }
.scam-timer { color: #c00; font-weight: 700; }
.scam-btn { font: inherit; font-weight: 900; font-size: 1.1em; padding: .4em 1em; color: #fff; background: #0a0; border: .15em solid #050; border-radius: .3em; cursor: pointer; animation: scampulse .6s ease-in-out infinite alternate; }
@keyframes scampulse { to { transform: scale(1.08); } }
.sf-lesson ol { padding-left: 1.3em; } .sf-lesson li { margin: .2em 0; } .sf-lesson h3 { color: #1f8a4a; }
.sf-404 { text-align: center; padding-top: 2em; }

/* ---------- OS: deleting System32, and the crash screen ---------- */
.os-desk.doom { animation: doomshake .25s infinite, doomhue 1.4s steps(6) infinite; }
@keyframes doomshake { 25% { transform: translate(.15em, -.1em); } 75% { transform: translate(-.15em, .12em); } }
@keyframes doomhue { 50% { filter: hue-rotate(160deg) saturate(2); } 75% { filter: invert(1) hue-rotate(90deg); } }
.os-desk.doom::before { content: ""; position: absolute; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 5px); }
.fall { animation: osfall 2.4s cubic-bezier(.5,0,.9,.6) forwards; }
@keyframes osfall { 0% { translate: 0 0; rotate: 0deg; } 25% { translate: var(--sx) var(--sy); rotate: calc(var(--r) / 4); }
  100% { translate: var(--dx) 40em; rotate: var(--r); } }
.os-err { position: absolute; z-index: 9000; width: 13em; overflow: hidden; color: #1b2330; background: #f4f6fa; border-radius: .4em; box-shadow: 0 .5em 1.5em rgba(0,0,0,.5); font-size: .75em; }
.os-err p { margin: .5em .7em .7em; }
.os-crash { position: absolute; inset: 0; padding: 2em 3em; background: #1d4fbf; color: #fff; }
.crash-face { font-size: 4em; font-weight: 300; margin-bottom: .2em; }
.crash-big { font-size: 1.3em; margin: 0 0 .6em; }
.os-crash p { margin: .4em 0; }
.crash-code { margin-top: 1.4em !important; font-size: .8em; opacity: .85; font-family: ui-monospace, Menlo, monospace; }

/* ---------- quiz mode ---------- */
.quiz-card { z-index: 80; }
.quiz-card .done-card { max-height: calc(100vh - 32px); overflow: auto; text-align: left; }
.quiz-card.wide .done-card { width: min(620px, 100%); }
.quiz-card h2 { text-align: left; }
.quiz-card .done-actions { justify-content: flex-end; }
.quiz-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-weight: 600; }
.quiz-field input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); -webkit-user-select: text; user-select: text; }
.quiz-err { color: var(--bad); margin: 6px 0; }
.quiz-qs { padding-left: 22px; margin: 10px 0; }
.quiz-qs li { margin-bottom: 12px; }
.quiz-qs p { margin: 0 0 4px; font-weight: 600; }
.quiz-qs label { display: block; padding: 3px 6px; border-radius: 5px; cursor: pointer; }
.quiz-qs label:hover { background: var(--panel-2); }
.quiz-break { color: var(--muted); }
.quiz-missed { margin: 6px 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.quiz-missed b { color: var(--ok); }
.quiz-code { display: flex; flex-direction: column; align-items: center; margin: 14px 0 6px; padding: 12px; border: 2px dashed var(--accent); border-radius: 10px; }
.quiz-code span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.quiz-code b { font: 700 30px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; -webkit-user-select: all; user-select: all; }
.quiz-result.ok { color: var(--ok); font-weight: 600; } .quiz-result.bad { color: var(--bad); }
.ghost-btn { background: none; }
.linkish { background: none; border: 0; padding: 0 0 6px; color: var(--muted); font-size: 12px; text-decoration: underline; }