@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root { font-family:'DM Sans','Noto Sans KR',sans-serif; color:#30354b; background:#e6e9f5; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow:hidden; }
button { font:inherit; cursor:pointer; }
button:focus-visible { outline:3px solid #658acb; outline-offset:3px; }
#game { position:fixed; inset:0; }
#game canvas { display:block; width:100%; height:100%; }
[hidden] { display:none !important; }
.top-bar { position:fixed; top:22px; left:26px; right:26px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; pointer-events:none; z-index:10; }
.brand { display:flex; align-items:center; gap:9px; color:#30344e; text-shadow:0 1px 15px #fff9; }
.brand-symbol { width:36px;height:36px; border-radius:12px; background:#ef706f; display:flex;align-items:center;justify-content:center;font-weight:800;color:white;font-size:22px;box-shadow:0 6px 16px #e76f6f45; transform:rotate(-7deg); }
.brand strong {display:block; letter-spacing:-.6px; font-size:19px;line-height:1.12;}
.brand small {display:block;letter-spacing:.4px;font-size:9px;font-weight:700;color:#788099;margin-top:4px;}
.day-chip { pointer-events:auto; display:flex; gap:13px; align-items:center; background:#fffc; backdrop-filter:blur(12px); color:#444a5c; font-weight:800;font-size:12px; padding:11px 17px; border:1px solid #ffffffdf; border-radius:999px; box-shadow:0 8px 25px #44466615;}
.day-dot {width:8px;height:8px;border-radius:50%;background:#67bd95;}
.divider {height:13px;width:1px;background:#d6d6e4;}
.icon-button { pointer-events:auto; border:1px solid #fff; background:#ffffffe2; border-radius:15px; width:43px; height:43px; color:#626e83; font-size:24px; box-shadow:0 7px 22px #44466618; }
.task-card {position:fixed;top:92px;left:26px;width:min(275px,calc(100vw - 52px));background:#ffffffdf;backdrop-filter:blur(12px); border:1px solid #fff;border-radius:18px; padding:17px 18px 14px; z-index:8;box-shadow:0 13px 30px #45405c18;}
.task-eyebrow { color:#9396a7; font-size:11px;font-weight:800; letter-spacing:.3px; }
.task-number {float:right;color:#b0afbc;}
.task-card strong {display:block;font-size:17px;letter-spacing:-.5px;margin-top:6px;}
.task-card p {font-size:12px;line-height:1.65;color:#767b90;margin:8px 0 14px;}
.step-track {height:5px;border-radius:10px;background:#e7e8ee;overflow:hidden;}
.step-track span {display:block;height:100%;width:0;background:#ed7974;transition:width .3s;}
.task-footer {display:flex;justify-content:space-between; margin-top:9px; color:#989cad; font-size:10px;font-weight:700;}
.task-done .step-track span {background:#61bb94;}
.interaction-wrap {position:fixed;bottom:102px;left:50%;transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;}
.interaction-label {background:#313b4acc;color:white;border-radius:99px;padding:5px 13px;font-size:12px;font-weight:700;}
.interaction-key {white-space:nowrap;background:#fffffff2;display:flex;align-items:center;gap:9px;border:1px solid #fff;border-radius:13px;padding:9px 15px;color:#43475b;box-shadow:0 10px 25px #3b3c6120;font-weight:800;font-size:13px;}
kbd {font-family:inherit;font-size:11px;border:1px solid #b9bac9;background:#fcfcff;border-bottom-width:3px;border-radius:6px;display:inline-flex;min-width:24px;height:25px;align-items:center;justify-content:center;padding:0 5px;color:#5a6175;font-weight:800;}
.control-hint {position:fixed;bottom:19px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;z-index:5;border:1px solid #fffd;background:#fffdfde5;backdrop-filter:blur(8px);padding:9px 16px;border-radius:15px;box-shadow:0 10px 24px #45405c12;color:#777b90;white-space:nowrap;font-size:11px;font-weight:700;}
.control-hint>span {display:flex;align-items:center;gap:3px;}
.control-hint kbd {height:21px;min-width:21px;border-radius:5px;font-size:10px;}
.toast {position:fixed;z-index:24;top:23px;left:50%;transform:translate(-50%,-15px);max-width:min(80vw,540px);background:#32394ceF;color:#fff;border-radius:12px;padding:11px 17px;font-size:13px;text-align:center;box-shadow:0 10px 25px #19203638;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
.toast.visible {opacity:1;transform:translate(-50%,0);}
.loading-screen {position:fixed;inset:0;background:#ecebf7;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;transition:opacity .35s;}
.loading-screen.ready {opacity:0;pointer-events:none;}
.loading-logo {width:68px;height:68px;border-radius:20px;display:grid;place-items:center; background:#ec7774;color:#fff;font-size:48px;font-weight:800;transform:rotate(-8deg);box-shadow:0 14px 25px #dd818556;}
.loading-screen h1 {margin:11px 0 0;font-size:30px;letter-spacing:-1px;}
.loading-screen p {font-size:14px;color:#646b82;margin:0;}
.loading-screen small {color:#979baa;font-size:11px;}
.modal-backdrop {position:fixed;inset:0;background:#20253a67;backdrop-filter:blur(5px);z-index:30;display:flex;justify-content:center;align-items:center;padding:22px;}
.modal {width:min(465px,100%);max-height:min(85vh,720px);overflow:hidden;background:#fcfcff;border:1px solid #ffffff;border-radius:22px;box-shadow:0 22px 70px #1f244d50;display:flex;flex-direction:column;}
.modal-heading {padding:23px 24px 17px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #eeeef5;}
.modal-heading #modal-kicker {display:block;font-size:11px;font-weight:800;color:#989bad;margin-bottom:6px;}
.modal-heading h2 {font-size:23px;letter-spacing:-.8px;margin:0;}
.close-btn {width:30px;height:30px;background:#f0f1f5;color:#727788;border:none;border-radius:9px;font-size:23px;line-height:1;}
.modal-body {padding:20px 24px;overflow-y:auto;font-size:14px;line-height:1.75;color:#50566c;}
.modal-body p {margin:10px 0;}
.modal-body h3 {font-size:13px;color:#49516a;margin:18px 0 7px;}
.modal-actions {padding:13px 24px 22px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;border-top:1px solid #f0f0f5;}
.action-button {background:#eef0f7;color:#485269;padding:11px 13px;border:none;border-radius:10px;font-size:12px;font-weight:800;}
.action-button.primary {background:#617fc3;color:white;}
.action-button.danger {background:#fce7e6;color:#bf4a4b;}
.action-button:hover {filter:brightness(.96);}
.dialog-person {display:flex;align-items:flex-start;gap:13px;}
.mini-avatar {flex:none;border-radius:50%;width:46px;height:46px;background:#e6d5c8;color:#fff;font-size:39px;line-height:38px;text-align:center;overflow:hidden;}
.dialog-person p {margin:0;background:#f0f1f8;padding:14px 16px;border-radius:2px 16px 16px 16px;flex:1;color:#454b63;}
.modal-tip {font-size:12px;color:#8c90a2!important;background:#f6f6fb;border-radius:10px;padding:10px 13px;}
.monitor-graphic {margin:auto;width:132px;height:112px;padding-top:3px;}
.monitor-screen {width:124px;height:80px;border:9px solid #414a5e;border-radius:9px;background:#d27679;color:#fff;font-weight:800;font-size:43px;display:grid;place-items:center;}
.monitor-screen.is-good {background:#7ac8a2;}
.monitor-foot {height:21px;width:12px;background:#6e7383;margin:0 auto;position:relative;}
.monitor-foot:after {content:'';position:absolute;width:56px;height:5px;bottom:0;left:-22px;border-radius:4px;background:#6e7383;}
.readout {border:1px solid #e8eaf2;border-radius:13px;overflow:hidden;margin:9px 0 14px;}
.readout>div {display:flex;justify-content:space-between;align-items:center;padding:11px 13px;gap:8px;background:#fff;font-size:12px;}
.readout>div+div {border-top:1px solid #f0f1f6;}
.readout span {color:#8c92a5;}
.readout strong {color:#454d62;}
.readout strong.status-ok,.status-ok,.status-good {color:#37a677!important;}
.readout strong.status-error,.status-error {color:#d85f68!important;}
.message {padding:14px;border-radius:11px;margin:6px 0 15px;font-weight:700;font-size:13px;}
.message.warning {background:#fff4e4;color:#a47a3c;}
.message.success {background:#e8f8ef;color:#32865b;}
.cable-graphic {display:flex;align-items:center;justify-content:center;gap:15px;height:90px;color:#7d8499;}
.cable-graphic .port {display:grid;place-items:center;background:#4e5768;color:white;width:64px;height:48px;border-radius:9px;font-weight:800;}
.cable-graphic .unplugged {font-size:35px;color:#d07e7e;}
.cable-graphic .plug {font-size:49px;color:#7f899c;}
.success-icon {width:72px;height:72px;border-radius:50%;background:#dff8eb;color:#3eae7a;display:grid;place-items:center;font-size:42px;font-weight:800;margin:4px auto 11px;}
.success-lead {text-align:center;font-weight:800;color:#414960;}
.journal-stat {display:flex;justify-content:space-between;background:#f2f3fa;padding:11px 14px;border-radius:11px;}
.journal-stat span {color:#81889d;}
.journal-list {margin:0;padding-left:20px;font-size:12px;line-height:2;}
.muted {color:#a1a4b1;}
.noscript {position:fixed;z-index:99;background:#fff;padding:20px;top:20px;left:20px;}
@media(max-width:760px){
  .top-bar {left:12px;right:12px;top:12px;}
  .brand strong {font-size:16px;}.brand small {font-size:8px;}.brand-symbol {width:31px;height:31px;}
  .day-chip {font-size:10px;padding:9px 10px;gap:8px;}.icon-button {width:36px;height:36px;border-radius:11px;font-size:18px;}
  .task-card {top:69px;left:12px;padding:12px;width:min(242px,calc(100vw - 24px));}.task-card strong {font-size:14px;}.task-card p {font-size:11px;}
  .control-hint {gap:9px;bottom:10px;padding:7px 9px;font-size:9px;}.control-hint kbd {min-width:18px;height:19px;font-size:9px;}
  .interaction-wrap {bottom:73px;}.modal-heading {padding:18px;}.modal-body {padding:17px 18px;}.modal-actions {padding:12px 18px 18px;}
}
@media(prefers-reduced-motion:reduce){* {transition:none!important;}}

/* ─────────────────────────────
   v0.2 · 가상 PC / 본체 뒷면 화면
   ───────────────────────────── */
.modal.wide { width:min(900px,100%);max-height:min(92vh,900px); }
.modal.wide .modal-heading { padding:17px 24px 12px; }
.modal.wide .modal-heading h2 { font-size:19px; }
.modal.wide .modal-body { padding:15px 22px 18px; }
.modal.wide .modal-actions { padding:12px 22px 16px; }
.pc-frame { background:#343e51; border:6px solid #374458; border-radius:13px; padding:4px; box-shadow:inset 0 2px 4px #1c2533,0 12px 30px #2e38502b; overflow:hidden; }
.pc-screen { color:#263a53; background:#eef3fa; min-height:350px; position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:5px; }
.pc-screen button { cursor:pointer; }
.os-desktop { min-height:370px; background:linear-gradient(137deg,#bacfe8 0%,#dae7f6 47%,#b5cbde 100%); }
.os-desktop:before {content:''; position:absolute; width:320px;height:320px;right:13%;top:10%;border-radius:50%;border:46px solid #ffffff47;pointer-events:none;}
.os-topline {padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:1;}
.os-top-label {font-size:12px;font-weight:800;color:#435972;}
.os-top-label b {color:#879ab1;}
.os-pill {font-size:11px;line-height:1.4;padding:7px 11px;border-radius:999px;font-weight:800;white-space:nowrap;}
.os-pill.bad {color:#b74552;background:#fff1f1;}
.os-pill.good {color:#207d5a;background:#e7f8ed;}
.desktop-icons {display:grid;grid-template-columns:repeat(3,minmax(100px,125px));gap:13px;padding:26px 25px 15px;position:relative;z-index:1;}
.desktop-app {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:122px;padding:12px 8px;border:1px solid #ffffff9c;border-radius:17px;background:#ffffffe3;color:#42546d;box-shadow:0 7px 16px #56678118;transition:transform .15s,box-shadow .15s;}
.desktop-app:hover {transform:translateY(-2px);box-shadow:0 9px 25px #56678135;}
.desktop-app-icon {width:54px;height:54px;display:grid;place-items:center;background:#e0ebf9;color:#4679b1;font-size:30px;font-weight:800;border-radius:14px;line-height:1;}
.desktop-app>span:not(.desktop-app-icon) {font-size:12px;font-weight:800;}
.desktop-app.future {background:#ffffffa6;color:#8b95a2;}
.desktop-app.future .desktop-app-icon {color:#94a3b3;background:#edf1f8;}
.desktop-app small {font-size:10px;color:#8b95a2;}
.desktop-help {margin:8px 25px 30px;position:relative;z-index:1;color:#577089;font-size:12px;font-weight:650;}
.os-taskbar {display:flex;align-items:center;gap:12px;min-height:40px;margin-top:auto;background:#ffffffc9;backdrop-filter:blur(10px);border-top:1px solid #ffffff8c;padding:8px 15px;color:#5e6d7e;font-size:11px;font-weight:700;position:relative;z-index:1;}
.os-taskbar button {border:0;border-radius:7px;background:#dce8f6;color:#41638d;padding:5px 9px;font-weight:800;font-size:11px;}
.os-taskbar-right {margin-left:auto;}
.os-start {font-size:19px;color:#3674b0;line-height:1;}
.device-context {margin:8px 2px 0!important;font-size:11px;color:#9ca2b0!important;}
.os-workspace {background:#f6f8fd;}
.window-toolbar {display:flex;justify-content:space-between;align-items:center;background:#4d75a8;color:#fff;min-height:36px;padding:7px 14px;font-weight:750;font-size:12px;}
.window-dots {font-size:13px;color:#d7e7f7;letter-spacing:2px;}
.settings-layout {display:flex;flex:1;min-height:310px;}
.settings-sidebar {flex:0 0 175px;background:#e8eef8;border-right:1px solid #d7e0ee;padding:18px 12px;display:flex;flex-direction:column;gap:11px;font-size:11px;}
.settings-sidebar strong {padding:3px 9px;color:#536a8e;font-size:12px;}
.settings-sidebar span {display:block;padding:8px 9px;border-radius:7px;color:#687a90;}
.settings-sidebar span.selected {background:#d4e2f6;color:#3265a4;font-weight:850;}
.settings-sidebar span.disabled {opacity:.5;}
.settings-content {padding:20px 24px;flex:1;min-width:0;}
.settings-eyebrow {font-size:10px;font-weight:800;color:#8191a5;}
.settings-content h3 {font-size:19px;margin:3px 0 15px;color:#253b56;}
.connection-banner {display:flex;align-items:center;gap:12px;border:1px solid #f6ced2;border-radius:12px;padding:12px 15px;background:#fff1f2;}
.connection-banner.connected {background:#ecf8f1;border-color:#bbdfc9;}
.connection-icon {display:grid;place-items:center;flex:0 0 33px;height:33px;background:#f6cbd1;color:#b94857;border-radius:10px;font-weight:900;font-size:24px;}
.connection-banner.connected .connection-icon {background:#c7ead7;color:#289263;}
.connection-banner strong {display:block;color:#924854;font-size:12px;}
.connection-banner.connected strong {color:#227e59;}
.connection-banner small {display:block;color:#8e98aa;font-size:11px;margin-top:3px;}
.adapter-spec {margin:13px 0 10px;background:#fff;border:1px solid #e4eaf1;border-radius:10px;overflow:hidden;}
.adapter-spec>div {display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid #edf1f6;font-size:11px;}
.adapter-spec>div:first-child {border-top:0;}
.adapter-spec span {color:#8792a3;}
.adapter-spec b {color:#3c526d;font-weight:700;}
.os-primary {background:#477bbb;color:#fff;border:0;border-radius:9px;padding:10px 17px;font-size:12px;font-weight:800;}
.os-primary:hover {background:#3569ac;}
.os-inline-error {background:#fff0f0;color:#b24954;border-radius:8px;padding:9px 11px;margin:10px 0;font-size:11px;font-weight:750;}
.os-inline-success {background:#e5f5ed;color:#25865b;border-radius:8px;padding:9px 11px;margin:9px 0;font-size:12px;font-weight:800;}
.browser-window {background:#fff;}
.browser-bar {display:flex;gap:10px;align-items:center;background:#eef2fa;border-bottom:1px solid #dfe4ed;padding:11px 15px;}
.browser-back {background:#fff;color:#56708b;border:1px solid #dae2ed;border-radius:8px;padding:4px 10px;}
.browser-address {background:#fff;border:1px solid #d8e1ed;border-radius:10px;flex:1;padding:8px 13px;color:#596b80;font-size:12px;}
.browser-address small {color:#9daabb;font-size:10px;margin-left:10px;}
.browser-page {display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;flex:1;padding:30px 15px;gap:8px;}
.browser-emblem {font-size:42px;line-height:1;color:#d87580;}
.browser-page.online .browser-emblem {color:#74bfa4;}
.browser-page h3 {font-size:17px;color:#3a4c63;margin:3px 0 0;}
.browser-page p {color:#8e98aa;font-size:12px;max-width:440px;margin:0 0 9px;}
.browser-page .os-primary {margin-top:6px;}
.terminal-preview {background:#19222e;color:#b6e2c2;font-family:ui-monospace,Consolas,monospace;padding:24px;min-height:310px;flex:1;font-size:13px;line-height:1.8;}
.terminal-preview p {margin:0 0 8px;color:#c4eacf;}
.terminal-cursor {animation:blink 1s step-end infinite;}
@keyframes blink {50% {opacity:0;}}
.terminal-coming {margin-top:25px;color:#b2bfcc;padding:14px;background:#263342;border-left:3px solid #94a6bc;font-family:'DM Sans','Noto Sans KR',sans-serif;font-size:12px;line-height:1.9;}
.terminal-coming code {background:#101b27;color:#bcdfcb;border-radius:5px;padding:2px 4px;font-size:11px;}
.rear-scene {background:radial-gradient(ellipse at 50% 10%,#e0e9f4 0%,#c6d3df 65%,#a8b9ca 100%);border-radius:15px;padding:18px;color:#45556d;}
.rear-instruction {display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;margin:0 0 6px;}
.rear-instruction strong {font-size:13px;}
.rear-instruction small {font-size:11px;color:#66798d;max-width:410px;line-height:1.6;}
.computer-case {width:min(540px,100%);height:286px;background:linear-gradient(130deg,#586777,#788896 63%,#4d606d);border:9px solid #4c5969;box-shadow:0 12px 19px #2d3d4a51,inset 0 0 0 3px #8495a4;border-radius:16px;margin:16px auto 15px;position:relative;display:flex;align-items:center;justify-content:space-evenly;gap:7px;}
.case-screw {position:absolute;width:10px;height:10px;border-radius:50%;background:#394856;border:2px solid #9babb8;}
.case-screw.top-left {top:14px;left:14px;}.case-screw.top-right {top:14px;right:14px;}.case-screw.bottom-left {bottom:14px;left:14px;}.case-screw.bottom-right {bottom:14px;right:14px;}
.case-fan {width:160px;height:160px;border-radius:50%;display:grid;place-items:center;background:repeating-conic-gradient(#293947 0deg 15deg,#80909b 16deg 19deg);border:12px solid #596b78;box-shadow:inset 0 0 0 6px #a0afb8;}
.fan-core {width:74px;height:74px;border-radius:50%;background:#637a89;display:grid;place-items:center;color:#a8b8c3;font-size:54px;box-shadow:inset 0 0 0 7px #455a69;}
.case-io-panel {background:#465765;border:2px solid #90a2ae;border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;min-width:230px;min-height:230px;box-shadow:0 0 0 4px #536877;}
.io-header {display:flex;justify-content:space-between;align-items:center;color:#edf5fb;font-size:10px;font-weight:900;margin-bottom:6px;}
.io-header small {color:#a8bac7;font-size:9px;font-weight:700;}
.io-grid {display:flex;flex-direction:column;gap:11px;}
.io-row {display:flex;align-items:center;gap:8px;color:#dce6ec;font-size:10px;font-weight:800;}
.io-name {min-width:38px;display:inline-block;}
.io-name.alt {min-width:auto;margin-left:4px;}
.usb-slot {width:24px;height:13px;border:4px solid #1d2c38;border-radius:3px;background:#8fabbc;}
.usb-slot.dark {background:#32424f;}
.mini-slot {width:24px;height:10px;border:3px solid #1d2c38;border-radius:2px;background:#879bab;}
.hdmi-slot {width:49px;height:13px;transform:skew(-6deg);border:4px solid #1f2c39;border-radius:2px;background:#526a7a;}
.audio-port {width:14px;height:14px;border-radius:50%;border:3px solid #21313d;background:#7f94a3;display:inline-block;}
.audio-port.green {background:#6ed49b;}
.audio-port.pink {background:#e986af;}
.audio-port.blue {background:#73c2ff;}
.lan-port-block {position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:2px;}
.lan-label {color:#edf5fb;font-size:11px;font-weight:900;}
.lan-jack {height:55px;width:72px;border:6px solid #1f2e3c;border-radius:7px;background:#2d3b49;position:relative;color:#e8d6a0;display:grid;place-items:center;box-shadow:inset 0 5px 5px #17222b;border-bottom:9px solid #1f2e3c;}
.lan-jack:hover {outline:3px solid #9ed3fb;outline-offset:2px;}
.lan-jack .lan-pins {font-size:17px;letter-spacing:-2px;transform:translateY(-7px);}
.lan-led {position:absolute;width:8px;height:5px;right:3px;bottom:1px;border-radius:4px;background:#687b87;}
.lan-jack.connected .lan-led {background:#63e29e;box-shadow:0 0 9px #54e895;}
.cable-assembly {position:absolute;top:55px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:transform .2s;pointer-events:none;}
.cable-assembly.attached {transform:translate(-50%,-30px);}
.cable-end {background:#3494d6;border:3px solid #c2e3f3;border-radius:4px;width:47px;height:28px;color:#b3dbe7;text-align:center;font-size:22px;font-weight:800;line-height:22px;}
.cable-wire {width:13px;height:42px;background:#2e87cc;border-radius:0 0 6px 6px;}
.case-expansion {position:absolute;right:28px;top:54px;width:28px;height:126px;background:#50606f;border-radius:7px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 5px;box-shadow:inset 0 0 0 2px #7f909f;}
.expansion-label {writing-mode:vertical-rl;text-orientation:mixed;font-size:8px;color:#b6c3ce;font-weight:800;letter-spacing:1px;}
.case-expansion span {display:block;width:16px;height:6px;background:#93a6b5;border-radius:3px;}
.power-supply {position:absolute;right:23px;bottom:28px;width:90px;height:64px;background:#43515e;border-radius:8px;border:2px solid #8ea0ae;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px;padding:8px 10px;box-shadow:inset 0 0 0 2px #526474;}
.psu-fan {width:30px;height:30px;border-radius:50%;background:repeating-conic-gradient(#22313b 0deg 16deg,#90a4b0 17deg 22deg);border:5px solid #617482;grid-row:1/span 2;align-self:center;}
.psu-switch {font-size:10px;color:#e8f0f4;background:#2f3d49;border-radius:4px;padding:4px 7px;justify-self:end;align-self:start;font-weight:800;}
.power-socket {width:34px;height:17px;border:4px solid #1f2d39;border-radius:3px;background:#90a3b1;justify-self:end;align-self:end;}
.case-footnote {position:absolute;bottom:10px;left:40px;right:135px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:10px;color:#b1d6d5;}
.case-footnote b {color:#dae7ed;}
.case-footnote small {color:#d6e0e7;}
.rear-status {display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#ffffffb7;border-radius:12px;padding:11px 14px;font-size:11px;}
.rear-status strong {color:#314a60;}
.rear-status>span:last-child {color:#697c8e;}
.led-dot {height:10px;width:10px;background:#9ca7b2;border-radius:50%;}
.led-dot.active {background:#38c17a;box-shadow:0 0 9px #38c17a;}
.rear-cta {min-height:42px;display:grid;place-items:center;padding-top:12px;}
.rear-cta .os-primary {font-size:12px;}
@media(max-width:760px){
  .modal-backdrop {padding:9px;}
  .modal.wide {max-height:92dvh;}
  .modal.wide .modal-heading {padding:12px 14px;}
  .modal.wide .modal-body {padding:10px 12px;}
  .modal.wide .modal-actions {padding:10px 12px;}
  .desktop-icons {grid-template-columns:repeat(3,1fr);gap:6px;padding:20px 8px;}
  .desktop-app {min-height:99px;padding:10px 3px;}
  .desktop-app-icon {height:39px;width:39px;font-size:23px;}
  .desktop-app>span:not(.desktop-app-icon) {font-size:10px;}
  .os-topline {padding:8px;flex-wrap:wrap;}
  .settings-sidebar {display:none;}
  .settings-content {padding:15px;}
  .browser-address small {display:none;}
  .case-fan {height:90px;width:90px;border-width:6px;}
  .fan-core {width:47px;height:47px;font-size:32px;}
  .case-io-panel {min-width:150px;padding:10px;}
  .computer-case {height:265px;display:grid;grid-template-columns:100px 1fr;align-items:center;justify-content:center;padding-right:110px;}
  .case-expansion,.power-supply {right:10px;}
  .case-footnote {left:16px;right:105px;flex-direction:column;align-items:flex-start;gap:4px;}
}