@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Russo+One&display=swap');

:root {
  --paper: #ece9e1;
  --paper-deep: #ded9ce;
  --white: #fffefa;
  --ink: #1f2a2d;
  --muted: #718083;
  --line: #d3d3cc;
  --orange: #e95e2b;
  --orange-soft: #fff0e9;
  --teal: #188c88;
  --green: #308b57;
  --red: #c63f42;
  --yellow: #c98318;
  --display: "Russo One", sans-serif;
  --body: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background-color: var(--paper); background-image: linear-gradient(rgba(245,243,237,.78),rgba(236,233,225,.82)),url("computer-workshop-background-v2.png"); background-size: auto,cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; font-family: var(--body); }
body::before { content: ""; position: fixed; inset: 0; opacity: .32; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
button, input { font: inherit; }
button { color: inherit; }

.integration-welcome { min-height: 100vh; padding: 28px; display: grid; place-items: center; background: linear-gradient(rgba(255,254,250,.28),rgba(236,233,225,.38)),url("computer-workshop-background-v2.png") center/cover fixed no-repeat; }
.welcome-card { width: min(760px, 100%); padding: clamp(28px, 6vw, 58px); background: var(--white); border: 1px solid var(--line); box-shadow: 0 25px 80px rgba(63,55,41,.12); }
.welcome-card h1 { margin: 0 0 15px; font: clamp(30px, 5vw, 52px)/1.05 var(--display); text-transform: uppercase; }.welcome-card > p:not(.eyebrow) { max-width: 610px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.guest-form { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 12px; }.guest-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }.guest-form input { min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); background: white; color: var(--ink); outline: none; }.guest-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24,140,136,.12); }.guest-form .primary-button { grid-column: 1 / -1; margin-top: 6px; justify-content: center; background: var(--teal); }.guest-form .primary-button:hover:not(:disabled) { background: #11736f; }

.topbar { height: 76px; padding: 0 3vw; display: grid; grid-template-columns: auto minmax(350px,1fr) minmax(260px,380px) auto; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); background: rgba(255,254,250,.92); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 50; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font: 19px var(--display); letter-spacing: .04em; }
.brand b { color: var(--orange); font-weight: inherit; }
.brand-mark { width: 38px; height: 38px; display: block; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(28,34,35,.18)); }
.topbar-progress { display: grid; gap: 8px; }
.progress-copy { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.progress-copy strong { color: var(--ink); font: 14px var(--display); }
.progress-track { height: 4px; background: #dbdad4; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--orange); transition: width .45s ease; }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 13px; }
.student-chip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--teal); font-size: 8px; font-weight: 800; }.exit-button { min-height: 36px; padding: 0 11px; border: 1px solid #d9b4a5; background: var(--orange-soft); color: #a44725; font-size: 7px; font-weight: 800; letter-spacing: .08em; cursor: pointer; white-space: nowrap; }.exit-button:hover { border-color: var(--orange); }
.mistakes-counter { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; padding-right: 13px; border-right: 1px solid var(--line); }
.mistakes-counter span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.mistakes-counter strong { color: var(--red); font: 18px var(--display); }
.mistakes-counter small { grid-column: 1 / -1; color: var(--red); font-size: 8px; text-align: right; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); display: grid; place-items: center; cursor: pointer; }
.icon-button:hover { border-color: var(--orange); }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-button .sound-off, .icon-button.muted .sound-on { display: none; }
.icon-button.muted .sound-off { display: block; }

main { width: min(1680px, 98vw); margin: auto; }
.hero-copy { min-width: 0; min-height: 0; padding: 0; display: block; overflow: hidden; }
.eyebrow { margin: 0 0 14px; color: var(--teal); font-size: 9px; letter-spacing: .17em; font-weight: 800; }
.hero-copy h1 { margin: 0; font: clamp(18px, 2.15vw, 30px)/1 var(--display); letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-copy h1 em { color: var(--orange); font-style: normal; }
.hero-rule { max-width: 390px; border-left: 2px solid var(--orange); padding-left: 16px; }
.hero-rule span { color: var(--orange); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.hero-rule p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

.panel { background: rgba(255,254,250,.9); border: 1px solid var(--line); }
.workspace { display: grid; grid-template-columns: 260px minmax(650px, 1fr) 280px; min-height: 760px; box-shadow: 0 24px 70px rgba(63,55,41,.09); }
.parts-panel { padding: 22px 16px; border-right: 0; display: flex; flex-direction: column; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; }
.panel-kicker, .step-kicker { color: var(--orange); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.panel-heading h2 { margin: 5px 0 0; font: 17px var(--display); }
.parts-count { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 10px; }
.drag-hint { margin: 14px 0 7px; padding-bottom: 12px; border-bottom: 1px solid #e3e1da; color: var(--muted); font-size: 9px; }
.drag-hint span { color: var(--orange); }
.parts-list { display: grid; gap: 4px; }
.part-card { position: relative; min-height: 66px; width: 100%; padding: 5px 27px 5px 7px; border: 1px solid transparent; background: transparent; display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; text-align: left; cursor: grab; transition: .2s; }
.part-card:hover { border-color: var(--line); background: #f7f5ef; transform: translateX(2px); }
.part-card.selected { border-color: var(--orange); background: var(--orange-soft); box-shadow: inset 3px 0 var(--orange); }
.part-card.installed { opacity: .42; cursor: default; filter: grayscale(.7); }
.part-card.dragging { opacity: .45; }
.part-visual { width: 62px; height: 56px; background: white; border-radius: 4px; display: grid; place-items: center; overflow: hidden; }
.part-visual img { width: 100%; height: 100%; object-fit: contain; }
.part-copy { min-width: 0; display: grid; gap: 2px; }
.part-copy b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-copy small { color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-status { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--green); text-align: center; font-weight: 800; }
.selection-readout { margin-top: auto; padding: 12px; background: #f2efe7; border-left: 2px solid var(--teal); display: grid; gap: 3px; }
.selection-readout span { color: var(--muted); font-size: 7px; letter-spacing: .15em; font-weight: 800; }
.selection-readout strong { font-size: 10px; }

.build-zone { border-color: #c8c8c0; overflow: hidden; }
.zone-topline, .zone-footer { height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 8px; letter-spacing: .1em; font-weight: 700; }
.zone-topline { border-bottom: 1px solid var(--line); }
.zone-footer { display: none; }
.zone-footer b { color: var(--orange); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(48,139,87,.12); margin-right: 5px; }
.hint-button { border: 1px solid #d8bcae; background: var(--orange-soft); color: #a64a28; padding: 7px 10px; font-size: 8px; font-weight: 800; letter-spacing: .08em; cursor: pointer; white-space: nowrap; transition: .2s; }
.hint-button b { color: var(--red); }
.hint-button:hover { border-color: var(--orange); }
.hint-button.confirm { background: #fff1c9; border-color: var(--yellow); color: #82590e; animation: hint-pulse .8s infinite alternate; }
.hint-button:disabled { opacity: .4; cursor: default; }

.case-stage { height: 700px; position: relative; overflow: hidden; background: linear-gradient(165deg, #eee9df 0 64%, #d4b996 64% 100%); }
.case-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18%; height: 1px; background: rgba(90,69,46,.15); }
.workbench { position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(90deg, rgba(255,255,255,.25), transparent 30%, rgba(111,84,52,.08)); }
.workbench i { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(103,82,57,.25); }
.workbench i:nth-child(1) { left: 9%; top: 12%; }.workbench i:nth-child(2) { right: 10%; top: 18%; }.workbench i:nth-child(3) { left: 14%; bottom: 10%; }
.case-target { position: absolute; width: min(720px, 97%); aspect-ratio: 1.094; left: 50%; top: 50%; transform: translate(-50%,-50%); cursor: crosshair; }
.case-photo { width: 100%; height: 100%; object-fit: contain; opacity: .12; filter: grayscale(1); transition: opacity .5s, filter .5s; pointer-events: none; }
.case-installed .case-photo { opacity: 1; filter: none; }
.component-slot { position: absolute; cursor: crosshair; border: 0 solid transparent; z-index: 2; pointer-events: none; }
.component-slot.interactive, .cable-slot.interactive { pointer-events: auto; }
.cable-slot.interactive::after { content: ""; position: absolute; inset: -9px; border-radius: 8px; }
.component-slot .installed-photo { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,.24)); animation: install-pop .4s ease; }
.slot-motherboard { left: 11.5%; top: 14%; width: 53%; height: 57%; }
.slot-motherboard.installed { z-index: 2; }
.slot-cpu { left: 32%; top: 27%; width: 11%; height: 12%; z-index: 3; }
.slot-cooler { left: 25.5%; top: 8.5%; width: 22.5%; height: 31%; z-index: 5; }
.slot-ram { left: 48.8%; top: 15.8%; width: 9.3%; height: 31.5%; z-index: 4; }
.slot-storage { left: 32%; top: 42.5%; width: 21%; height: 8%; z-index: 7; }
.slot-hdd { left: 64%; top: 16.5%; width: 20%; height: 28%; z-index: 4; }
.slot-gpu { left: 9.5%; top: 47.5%; width: 66%; height: 20%; z-index: 8; overflow: hidden; }
.slot-psu { left: 8.5%; bottom: 5.5%; width: 37%; height: 23%; z-index: 6; }
.slot-cpu .installed-photo, .slot-storage .installed-photo { transform: scale(.98); }.slot-hdd .installed-photo { object-fit: contain; transform: scale(.94); filter: drop-shadow(0 4px 5px rgba(0,0,0,.3)); }.slot-cooler .installed-photo { object-position: 50% 100%; transform: scale(.98); }.slot-psu .installed-photo { object-fit: fill; transform: scale(.98); }.slot-gpu .installed-photo { transform: scale(1.02); }.slot-gpu.installed::before { content: ""; position: absolute; left: 19%; top: 69%; width: 30%; height: 12%; z-index: 2; background: linear-gradient(#171a1c,#292d2f 45%,#111315); border-radius: 0 0 2px 2px; pointer-events: none; }
.slot-ram .installed-photo { width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.48)); }
.cable-slot { position: absolute; z-index: 13; width: 5%; height: 5%; pointer-events: none; border-radius: 3px; }
.cable-slot-atx { left: 57.5%; top: 26.5%; }.cable-slot-eps { left: 24.5%; top: 14.5%; }.cable-slot-gpu { left: 63%; top: 49.5%; }.cable-slot-panel { left: 58.5%; top: 65.5%; }.cable-slot-sata-data-board { left: 58%; top: 67%; }.cable-slot-sata-power-hdd { left: 65%; top: 38.5%; width: 11%; height: 8%; }.cable-slot-sata-data-hdd { left: 76%; top: 38.5%; width: 8%; height: 8%; }
.internal-cables { display: none; }
.internal-cables path { fill: none; stroke-linecap: round; opacity: 0; transition: opacity .45s ease; }
.internal-cables .cable-shadow { stroke: #0c0e0f; stroke-width: 1.9; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.42)); }
.internal-cables .cable-core { stroke: #555a5c; stroke-width: .55; }
.atx24-installed .cable-atx, .eps8-installed .cable-eps, .gpuPower-installed .cable-gpu, .frontPanel-installed .cable-panel { opacity: 1; }
.cable-slot.installed::before, .cable-slot.end-selected::before { content: "✓"; position: absolute; width: 18px; height: 18px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: #397e52; color: white; display: grid; place-items: center; font-size: 11px; font-weight: 800; box-shadow: 0 2px 5px rgba(31,62,41,.3); }
.target-zone.hinted, .desk-power.hinted { outline: 4px solid var(--orange); outline-offset: 3px; background-color: rgba(233,94,43,.18); animation: reveal-place .65s 2 alternate; z-index: 25; }
.component-slot.hinted::after, .cable-slot.hinted::after { content: "УСТАНОВИТЬ СЮДА"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 5px 8px; background: var(--orange); color: white; font-size: 7px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; box-shadow: 0 3px 10px rgba(80,35,17,.22); }
.case-target.hinted { border-radius: 15px; }
.case-stage.wrong-attempt { animation: stage-error .45s; }
.case-power { position: absolute; width: 23px; height: 23px; right: 2%; top: 9%; border: 1px solid #9a9f9f; border-radius: 50%; background: #e2e4e3; opacity: 0; pointer-events: none; }

.external-setup { display: none; position: absolute; inset: 0; }
.external-mode .case-target { display: block; width: 52%; left: 26%; top: 33%; transform: translate(-50%,-50%); z-index: 4; pointer-events: none; }
.external-mode .external-setup { display: block; }
.external-mode .tower-wrap { display: none; }
.powered-on.external-mode .case-target::before { content: ""; position: absolute; inset: 5% 5% 7% 5%; z-index: 20; border: 1px solid rgba(139,164,169,.64); background: linear-gradient(118deg,rgba(231,245,247,.12),transparent 52%,rgba(205,227,230,.09)); box-shadow: inset 0 0 12px rgba(255,255,255,.2); pointer-events: none; }
.connection-lab { position: absolute; inset: 0; display: grid; grid-template-columns: 52% 48%; }
.tower-wrap { position: absolute; width: 44%; height: 68%; left: -1%; top: -1%; z-index: 2; }
.tower-wrap img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(62,49,34,.2)); }
.stage-glass-panel { position: absolute; left: 13%; right: 14%; top: 13%; bottom: 13%; opacity: 0; border: 1px solid rgba(140,165,169,.64); background: linear-gradient(118deg,rgba(229,244,246,.13),transparent 52%,rgba(205,227,230,.1)); box-shadow: inset 0 0 12px rgba(255,255,255,.2); pointer-events: none; transition: opacity .45s; }.powered-on .stage-glass-panel { opacity: 1; }
.post-badge { position: absolute; left: 16px; top: 16px; z-index: 10; padding: 10px 13px; background: #202d2f; color: white; display: grid; gap: 3px; opacity: 0; transform: translateY(-6px); transition: .4s; }.post-badge span { color: #88d7c6; font-size: 6px; font-weight: 800; letter-spacing: .12em; }.post-badge strong { font: 17px var(--display); }.powered-on .post-badge { opacity: 1; transform: none; }
.device-board { position: absolute; left: 2.5%; bottom: 4%; width: 48%; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; z-index: 4; }
.device-state { min-height: 67px; padding: 4px; background: rgba(255,254,250,.74); border: 1px solid rgba(116,113,104,.25); display: grid; grid-template-rows: 44px auto; place-items: center; opacity: .28; filter: grayscale(1); transition: .35s; }
.device-state img { width: 100%; height: 100%; object-fit: contain; }.device-state span { font-size: 6px; font-weight: 800; color: var(--muted); }
.device-state.installed { opacity: 1; filter: none; border-color: rgba(116,113,104,.35); box-shadow: none; }
.io-map { grid-column: 2; margin: 24px 14px 72px 0; padding: 15px; background: #f6f4ed; border: 1px solid #bfc0bb; box-shadow: 0 14px 35px rgba(55,49,40,.12); z-index: 5; }
.io-title { display: flex; justify-content: space-between; align-items: end; padding-bottom: 12px; border-bottom: 1px solid #d1d0c9; }.io-title span { color: var(--orange); font-size: 7px; letter-spacing: .15em; font-weight: 800; }.io-title strong { font: 13px var(--display); }
.rear-panel { position: relative; margin-top: 14px; padding: 13px; background: repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.025) 1px 3px),linear-gradient(145deg,#9fa4a3,#e4e6e3 48%,#858b8a); border: 1px solid #606768; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25),inset 0 0 14px rgba(28,36,37,.13),0 5px 10px rgba(31,37,38,.16); }
.rear-panel::before,.rear-panel::after { display: none; }
.rear-panel header { display: flex; justify-content: space-between; margin-bottom: 10px; color: #2b3233; }.rear-panel header b { font-size: 7px; letter-spacing: .12em; }.rear-panel header small { font-size: 6px; }
.usb-bank { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.audio-bank { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 10px; }
.io-port { min-height: 45px; position: relative; border: 1px solid #4c5455; background: linear-gradient(#e4e5e1,#b9bdbb); display: grid; grid-template-columns: 31px 1fr; gap: 8px; align-items: center; padding: 6px; cursor: crosshair; transition: .2s; box-shadow: inset 0 1px rgba(255,255,255,.65),inset 0 -2px 3px rgba(47,55,56,.14); }
.io-port i { display: block; position: relative; margin: auto; }.io-port span { color: #3f4849; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-align: left; }
.usb-port i { width: 25px; height: 12px; background: #287ca3; border: 3px solid #24292a; box-shadow: inset 0 0 0 2px #7fc1da; }
.audio-port i { width: 22px; height: 22px; border: 5px solid #303638; border-radius: 50%; background: #101314; box-shadow: inset 0 0 0 2px #050606; }.mic-port { border-left: 5px solid #d63d62; }.lineout-port { border-left: 5px solid #48a35a; }.mic-port i { border-color: #d63d62; }.lineout-port i { border-color: #48a35a; }.mic-port span { color: #a9284b; }.lineout-port span { color: #267a39; }
.gpu-io { margin-top: 11px; background: repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,rgba(0,0,0,.035) 1px 4px),linear-gradient(145deg,#4d5556,#9da2a0 55%,#454c4d); }.gpu-outputs { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding-right: 14px; }.gpu-outputs .io-port { min-height: 41px; width: 100%; background: #b9bcba; }.dp-port i { width: 25px; height: 12px; border: 4px solid #202526; background: #080a0b; clip-path: polygon(0 0,85% 0,100% 28%,100% 100%,0 100%); }.hdmi-port i { width: 26px; height: 12px; border: 4px solid #202526; background: #080a0b; clip-path: polygon(8% 0,92% 0,100% 34%,87% 100%,13% 100%,0 34%); }
.io-port.interactive { outline: 2px solid rgba(24,140,136,.35); outline-offset: 2px; }.io-port:hover { border-color: var(--orange); transform: translateY(-1px); }
.io-port.installed { background: #e7f2e9; border-color: #4e9364; }.io-port.installed::after { content: attr(data-device); position: absolute; right: 5px; top: 3px; color: #3d8052; font-size: 5px; font-weight: 800; text-transform: uppercase; }
.io-port.installed::before { content: ""; position: absolute; width: 34px; height: 7px; left: -34px; top: 19px; background: linear-gradient(#171a1c,#4e5253,#171a1c); border-radius: 4px 0 0 4px; filter: drop-shadow(0 2px 1px rgba(0,0,0,.32)); }
.real-io-photo { position: relative; width: 100%; overflow: visible; }
.real-io-photo > img { display: block; width: 100%; height: auto; pointer-events: none; }
.motherboard-photo,.gpu-photo { aspect-ratio: auto; }
.io-hotspot { position: absolute; border: 0; padding: 0; background: transparent; cursor: crosshair; border-radius: 2px; transition: outline-color .18s, background-color .18s; }
.io-hotspot span { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); z-index: 4; padding: 2px 4px; background: #182224; color: white; font-size: 5px; font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; }
.io-hotspot:hover span,.io-hotspot.hinted span { opacity: 1; }
.io-hotspot.interactive,.io-hotspot.installed { outline: none; background: transparent; }
.io-hotspot.installed::after { content: "✓"; position: absolute; right: -8px; top: -10px; width: 17px; height: 17px; display: block; border-radius: 50%; background: #397e52; color: white; font: 11px/17px Arial,sans-serif; text-align: center; box-shadow: 0 2px 5px rgba(31,62,41,.3); }
.usb-1 { left: 32.1%; top: 45%; width: 9.7%; height: 16%; }.usb-2 { left: 32.1%; top: 63%; width: 9.7%; height: 16%; }.usb-3 { left: 60.5%; top: 49%; width: 11%; height: 15%; }.usb-4 { left: 60.5%; top: 64%; width: 11%; height: 15%; }
.ethernet-hotspot { left: 59%; top: 21%; width: 13%; height: 26%; }.lineout-hotspot { left: 74.1%; top: 52%; width: 7.6%; height: 18%; }.mic-hotspot { left: 81.7%; top: 52%; width: 7.6%; height: 18%; }
.dp-1 { left: 9.8%; top: 62%; width: 15%; height: 20%; }.dp-2 { left: 28.3%; top: 62%; width: 15%; height: 20%; }.dp-3 { left: 46.5%; top: 62%; width: 15%; height: 20%; }.hdmi-hotspot { left: 64.6%; top: 62%; width: 14%; height: 20%; }
.desk-power { position: absolute; right: 1.8%; top: 10.5%; width: 27px; height: 27px; border: 1px solid #8e9695; border-radius: 50%; background: radial-gradient(circle at 43% 38%,#f8faf8 0 22%,#cfd6d3 58%,#87918e 100%); display: grid; place-items: center; cursor: default; opacity: .45; pointer-events: none; z-index: 7; box-shadow: 0 2px 5px rgba(31,43,40,.28); }
.ready-to-power .desk-power { opacity: 1; pointer-events: auto; cursor: pointer; }
.desk-power i { display: none; }
.desk-power i::before { content: ""; position: absolute; width: 2px; height: 9px; background: #768080; left: 5.5px; top: -5px; }
.desk-power span { display: none; }
.final-overview { position: absolute; inset: 0; z-index: 12; background: #ddd5c9; opacity: 0; pointer-events: none; transition: opacity .65s; overflow: hidden; }
.final-photo-scene { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 3/2; transform: translateY(-50%); overflow: hidden; background: #ded7cc; }
.final-photo-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-screen { position: absolute; left: 8.8%; top: 19.5%; width: 35.3%; height: 40.5%; padding: 2.4% 2.5%; color: #dce8df; background: #030807; font: clamp(5px,.53vw,9px)/1.38 Consolas,"Courier New",monospace; display: flex; flex-direction: column; justify-content: center; gap: .25em; opacity: 0; z-index: 6; overflow: hidden; }
.post-screen b { color: #8cc7b0; margin-bottom: .45em; }.post-screen span { color: #dce8df; white-space: nowrap; }.post-screen strong { color: #7de0a5; margin-top: .65em; white-space: nowrap; }
.powered-on .post-screen { opacity: 1; }
.final-case-patch { position: absolute; left: 48.5%; top: 9.5%; width: 39%; height: 70%; z-index: 4; background: radial-gradient(circle at 45% 35%,#eee9e1,#ded5c9 72%); box-shadow: 0 0 26px 18px rgba(224,215,203,.96); }
.final-case-wrap { position: absolute; inset: 0; filter: drop-shadow(0 10px 10px rgba(55,44,31,.24)); }
.final-case-exact { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.final-hdd { display: none; position: absolute; right: 10%; top: 19%; width: 28%; height: 23%; object-fit: contain; z-index: 5; }.hdd-installed .final-hdd { display: block; }
.ready-to-power .final-overview,.powered-on .final-overview { opacity: 1; pointer-events: auto; }
.powered-on .connection-lab { opacity: 1; }
.ready-to-power .desk-power { box-shadow: 0 0 0 4px rgba(48,139,87,.26),0 0 18px rgba(48,139,87,.58); }
.powered-on .desk-power { box-shadow: 0 0 0 5px rgba(48,139,87,.28),0 0 22px rgba(48,139,87,.72); }

.drop-message { position: absolute; left: 50%; top: 18px; transform: translate(-50%,-12px); padding: 10px 14px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(47,39,29,.15); font-size: 9px; font-weight: 700; opacity: 0; pointer-events: none; z-index: 30; transition: .25s; white-space: nowrap; }
.drop-message.show { opacity: 1; transform: translate(-50%,0); }.drop-message.success { border-color: #75af88; color: var(--green); }.drop-message.error { border-color: #dd8c8e; color: var(--red); }.drop-message.warning { border-color: #dcb96f; color: #8d640f; }.drop-message.neutral { border-color: #8bbcb9; color: var(--teal); }

.briefing-panel { padding: 24px 22px 20px; border-left: 0; display: flex; flex-direction: column; }
.step-badge { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.step-badge strong { color: #d5d4cc; font: 31px var(--display); }
.task-photo { height: 170px; margin: 12px 0 16px; display: grid; place-items: center; background: linear-gradient(145deg,#f7f5ef,#ece8dd); border: 1px solid #e2dfd6; overflow: hidden; }
.task-photo img { max-width: 95%; max-height: 95%; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(58,49,39,.18)); }
.step-kicker { margin: 0 0 8px; }.briefing-panel h2 { margin: 0 0 13px; font: 23px/1.08 var(--display); text-transform: uppercase; }.step-description { min-height: 58px; margin: 0 0 16px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.rule-card { padding: 12px; background: #fff8df; border: 1px solid #ead8a7; display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: start; }
.rule-card > span { width: 23px; height: 23px; border: 1px solid var(--yellow); color: var(--yellow); border-radius: 50%; display: grid; place-items: center; font: 11px var(--display); }
.rule-card p { margin: 1px 0 0; color: #796a47; font-size: 9px; line-height: 1.55; }.rule-card b { color: var(--red); }
.score-preview { margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.score-preview span { color: var(--muted); font-size: 8px; letter-spacing: .12em; font-weight: 800; }.score-preview strong { font: 17px var(--display); }
.primary-button { min-height: 45px; padding: 0 15px; border: 0; background: var(--orange); color: white; font-size: 9px; font-weight: 800; letter-spacing: .09em; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: .2s; }
.primary-button:hover:not(:disabled) { background: #cf4a1b; transform: translateY(-1px); }.primary-button:disabled { background: #d7d5ce; color: #8c918f; cursor: default; }.primary-button span { font-size: 17px; }
.briefing-panel .primary-button { margin-top: 16px; width: 100%; justify-content: center; }

.knowledge-panel { margin: 26px 0 55px; padding: 34px; display: grid; grid-template-columns: 1fr 1.75fr; gap: 42px; }.knowledge-panel.is-hidden { display: none; }
body.quiz-only { height: auto !important; min-height: 100vh; overflow: auto !important; }
body.quiz-only .integration-welcome, body.quiz-only .topbar, body.quiz-only .workspace, body.quiz-only footer { display: none !important; }
body.quiz-only main { width: 100%; min-height: 100vh; margin: 0; padding: 0; }
body.quiz-only .knowledge-panel { min-height: 100vh; margin: 0; padding: clamp(24px,3vw,46px); border: 0; align-content: start; background: rgba(255,254,250,.94); }
.result-stamp { display: inline-block; border: 1px solid #83b594; color: var(--green); padding: 6px 9px; font-size: 8px; letter-spacing: .14em; font-weight: 800; }.result-copy h2 { margin: 22px 0 12px; font: 27px/1.08 var(--display); text-transform: uppercase; }.result-copy > p { color: var(--muted); font-size: 10px; line-height: 1.7; }
.result-breakdown { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.result-breakdown div { padding: 12px; background: #f3f0e8; display: grid; gap: 4px; }.result-breakdown span, .grade-card span { color: var(--muted); font-size: 7px; letter-spacing: .13em; }.result-breakdown strong { font: 14px var(--display); }
.grade-card { margin-top: 8px; padding: 16px; border-left: 3px solid var(--orange); background: var(--ink); color: white; display: flex; justify-content: space-between; align-items: center; }.grade-card div { display: grid; gap: 5px; }.grade-card strong { font: 22px var(--display); }.grade-card > b { color: #ffb18f; font: 18px var(--display); }
.final-result-photo { margin: 14px 0 0; padding: 10px; background: #f2efe7; border: 1px solid var(--line); display: grid; grid-template-columns: 115px 1fr; gap: 12px; align-items: center; }.result-tower-closed { width: 115px; height: 105px; position: relative; }.result-tower-closed img { width: 100%; height: 100%; object-fit: contain; }.result-tower-closed i { position: absolute; left: 10%; right: 14%; top: 9%; bottom: 11%; border: 1px solid rgba(143,168,174,.7); background: linear-gradient(120deg,rgba(223,241,244,.2),transparent 55%,rgba(193,220,224,.15)); }.final-result-photo figcaption { color: var(--muted); font-size: 8px; line-height: 1.55; }
.quiz { display: grid; gap: 11px; }.quiz fieldset { margin: 0; padding: 13px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.quiz fieldset.correct { border-color: #79ac89; }.quiz fieldset.incorrect { border-color: #d98a8b; }.quiz legend { width: 100%; padding-bottom: 9px; font-size: 10px; font-weight: 700; }.quiz legend span { color: var(--orange); font: 8px var(--display); margin-right: 6px; }.quiz label { padding: 8px; border: 1px solid #e3e1da; color: var(--muted); font-size: 8px; cursor: pointer; display: flex; align-items: center; gap: 5px; }.quiz label:hover { background: #f5f2eb; }.quiz input { accent-color: var(--orange); }.quiz-actions { display: flex; gap: 8px; }.quiz-actions .primary-button { flex: 1; }.secondary-button { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0 16px; font-size: 9px; cursor: pointer; }.secondary-button:hover { border-color: var(--ink); color: var(--ink); }
.return-course-button { min-height: 45px; border: 1px solid var(--teal); background: #edf8f6; color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .1em; cursor: pointer; }.return-course-button:hover { background: #dff2ef; }
footer { min-height: 68px; border-top: 1px solid #d3d0c8; padding: 0 3vw; display: flex; justify-content: space-between; align-items: center; color: #9a9b94; font-size: 7px; letter-spacing: .14em; }

/* Крупный учебный режим: изображения и подписи читаются с обычного рабочего места. */
.progress-copy { font-size: 13px; }.progress-copy strong { font-size: 19px; }
.student-chip { max-width: 220px; font-size: 11px; }.exit-button { font-size: 11px; }.guest-form label { font-size: 12px; }.welcome-card > p:not(.eyebrow) { font-size: 15px; }
.mistakes-counter span { font-size: 12px; }.mistakes-counter strong { font-size: 23px; }.mistakes-counter small { font-size: 11px; }
.eyebrow { margin-bottom: 8px; font-size: 12px; }.hero-rule span { font-size: 11px; }.hero-rule p { font-size: 14px; line-height: 1.45; }
.panel-kicker,.step-kicker { font-size: 12px; }.panel-heading h2 { font-size: 23px; }.parts-count { width: 36px; height: 36px; font-size: 14px; }
.drag-hint { font-size: 13px; }.part-card { min-height: 88px; grid-template-columns: 82px 1fr; gap: 10px; }.part-visual { width: 82px; height: 74px; }.part-copy b { font-size: 14px; }.part-copy small { font-size: 12px; }.part-status { font-size: 19px; }
.part-copy b,.part-copy small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.selection-readout span { font-size: 11px; }.selection-readout strong { font-size: 14px; }
.zone-topline,.zone-footer { height: 50px; font-size: 12px; }.hint-button { padding: 10px 13px; font-size: 12px; }
.external-mode .case-target { width: 58%; left: 29%; top: 31%; }.connection-lab { grid-template-columns: 56% 44%; }.device-board { width: 54%; }.device-state { min-height: 82px; grid-template-rows: 56px auto; }.device-state span { font-size: 10px; }
.io-map { margin: 18px 10px 62px 0; padding: 13px; }.io-title span { font-size: 11px; }.io-title strong { font-size: 19px; }.rear-panel { padding: 11px; }.rear-panel header b { font-size: 11px; }.rear-panel header small { font-size: 10px; }
.io-hotspot span { bottom: -22px; font-size: 9px; }.desk-power span { font-size: 10px; }
.drop-message { font-size: 14px; }.step-badge { font-size: 12px; }.step-badge strong { font-size: 40px; }.task-photo { height: 190px; }.briefing-panel h2 { font-size: 30px; }.step-description { font-size: 15px; }.rule-card p { font-size: 13px; }.score-preview { flex-direction: column; align-items: flex-start; gap: 6px; }.score-preview span { font-size: 12px; }.score-preview strong { font-size: 23px; }.primary-button,.secondary-button,.return-course-button { font-size: 13px; }
.result-stamp { font-size: 12px; }.result-copy h2 { font-size: 34px; }.result-copy > p { font-size: 15px; }.result-breakdown span,.grade-card span { font-size: 11px; }.result-breakdown strong { font-size: 20px; }.quiz legend { font-size: 15px; }.quiz label { font-size: 13px; } footer { font-size: 11px; }

@keyframes install-pop { from { opacity: 0; transform: scale(.72); } 70% { transform: scale(1.06); } }
@keyframes stage-error { 25% { box-shadow: inset 0 0 0 6px rgba(198,63,66,.24); } 50% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes reveal-place { to { outline-width: 7px; outline-color: #ff8b43; } }
@keyframes hint-pulse { to { box-shadow: 0 0 0 4px rgba(201,131,24,.16); } }

@media (min-width: 801px) {
  .build-zone { position: sticky; top: 76px; align-self: start; }
  .case-stage { height: clamp(520px, calc(100vh - 176px), 700px); }
}

@media (min-width: 1181px) {
  body.practice-locked { height: 100vh; overflow: hidden; }
  body.practice-locked main { height: calc(100vh - 76px); }
  body.practice-locked .workspace { height: 100%; min-height: 0; }
  body.practice-locked .build-zone { height: calc(100vh - 76px); }
  body.practice-locked .case-stage { height: calc(100vh - 126px); }
  body.practice-locked .parts-panel, body.practice-locked .briefing-panel { position: sticky; top: 76px; height: calc(100vh - 76px); min-height: 0; overflow: hidden; }
  body.practice-locked .parts-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a9aaa4 transparent; padding-right: 5px; }
  body.practice-locked .selection-readout { flex: 0 0 auto; }
  body.practice-locked footer { display: none; }
}

@media (max-width: 1180px) {
  .topbar { grid-template-columns: auto minmax(280px,1fr) minmax(240px,320px) auto; gap: 16px; }.hero-copy h1 { font-size: 21px; }
  .workspace { grid-template-columns: 260px 1fr; }.briefing-panel { grid-column: 1/-1; border-left: 1px solid var(--line); border-top: 0; display: grid; grid-template-columns: 120px 1fr 1.1fr 220px; gap: 18px; align-items: center; }.step-badge { display: none; }.task-photo { height: 105px; margin: 0; grid-row: 1/4; }.briefing-panel .step-kicker,.briefing-panel h2,.step-description { grid-column: 2; }.briefing-panel .step-kicker { align-self: end; margin-bottom: -12px; }.briefing-panel h2 { margin: -7px 0; }.step-description { min-height: 0; margin: 0; align-self: start; }.rule-card { grid-column: 3; grid-row: 1/4; }.score-preview { display: none; }.briefing-panel .primary-button { grid-column: 4; grid-row: 1/4; }
}

@media (max-width: 800px) {
  .student-chip { display: none; }.exit-button { position: fixed; left: 63px; top: 20px; }
  .topbar { grid-template-columns: 1fr auto; }.topbar .hero-copy { display: none; }.topbar-progress { position: absolute; left: 0; right: 0; top: 75px; padding: 8px 4vw; background: var(--white); border-bottom: 1px solid var(--line); }.mistakes-counter { position: fixed; right: 16px; top: 15px; }.workspace { display: flex; flex-direction: column; margin-top: 34px; }.build-zone { order: 1; }.parts-panel { order: 2; border-right: 1px solid var(--line); }.briefing-panel { order: 3; display: grid; grid-template-columns: 90px 1fr; }.task-photo { width: 90px; height: 90px; }.briefing-panel .step-kicker,.briefing-panel h2,.step-description { grid-column: 2; }.rule-card,.briefing-panel .primary-button { grid-column: 1/-1; grid-row: auto; }.parts-list { grid-template-columns: 1fr 1fr; }.selection-readout { margin-top: 12px; }.case-stage { height: 535px; }.case-target { width: min(500px,90%); }.knowledge-panel { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .integration-welcome { padding: 14px; }.welcome-card { padding: 28px 20px; }.guest-form { grid-template-columns: 1fr; }.guest-form .primary-button { grid-column: auto; }
  main { width: 100%; }.brand span:last-child { display: none; }.hero-copy h1 { font-size: 34px; }.zone-topline { height: 56px; align-items: center; }.zone-topline > span { max-width: 160px; }.hint-button { font-size: 7px; padding: 7px; }.case-stage { height: 435px; }.case-target { width: 96%; }.parts-list { grid-template-columns: 1fr; }.monitor-wrap { width: 58%; left: 5%; }.keyboard-wrap { width: 52%; left: 7%; }.mouse-wrap { left: 52%; }.tower-wrap { width: 30%; right: 1%; }.desk-power { right: 1.8%; }.knowledge-panel { padding: 22px 15px; margin-bottom: 30px; }.quiz fieldset { grid-template-columns: 1fr; }.quiz-actions { flex-direction: column; }.quiz-actions button { min-height: 44px; }.result-breakdown { grid-template-columns: 1fr; }.grade-card { align-items: end; }.grade-card > b { font-size: 15px; } footer { padding: 20px; gap: 16px; flex-direction: column; text-align: center; }
}

.quiz-questions { display: grid; gap: 11px; }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; } }