:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #151b1c; color: #e0e8e4; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1260px; margin: auto; padding: 16px 24px; }
header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #b8c9c1; margin-bottom: 12px; letter-spacing: .06em; }
header span { color: #8ea69a; letter-spacing: 0; }
.housing { width: min(100%, 1150px, calc((100dvh - 265px) * 1.7067 + 44px)); min-width: 320px; margin: auto; padding: 12px 20px 18px; position: relative; border: 5px solid #303936; border-radius: 32px; background: linear-gradient(125deg, #82927b, #677b67 56%, #526654); box-shadow: inset 0 0 0 2px #a2ac94, 0 9px 0 #202926, 0 15px 25px #0005; }
.housing::before, .housing::after { content: ''; position: absolute; top: 7px; width: 35px; height: 28px; border-top: 8px solid #39413d; }
.housing::before { left: 5px; border-left: 8px solid #39413d; border-radius: 22px 0 0 0; }
.housing::after { right: 5px; border-right: 8px solid #39413d; border-radius: 0 22px 0 0; }
.brand { text-align: center; margin: 0 0 10px; color: #eef1df; font-size: 14px; font-weight: 800; letter-spacing: .25em; text-shadow: 0 1px #26352b; }
.screen { width: 100%; aspect-ratio: 1024 / 600; border: 9px solid #232c29; border-radius: 13px; overflow: hidden; background: #19242b; pointer-events: none; box-shadow: 0 1px 0 #b2b99e, 0 -1px 0 #344b3b; }
/* Native sprites keep their authored pixels; the composite frame also contains
 * antialiased text. Nearest-neighbor browser scaling destroys glyph coverage at
 * fractional display sizes, so let the browser resample the complete UI. */
.screen img { display: block; width: 100%; height: auto; image-rendering: auto; }
/* Let the native bitmap set the content ratio; an aspect ratio on the bordered
 * shell otherwise compresses its interior differently in each device. */
.lab .screen, .companion .screen, .dock .screen { aspect-ratio: auto; }
.controls { display: grid; grid-template-columns: 106px minmax(0, 1fr) 154px; align-items: center; gap: 24px; margin-top: 18px; touch-action: none; }
button { display: grid; place-items: center; padding: 0; border: 2px solid #26312c; background: linear-gradient(#48524c, #303b34); color: #f2f4e7; box-shadow: 0 4px 0 #26312c, inset 0 1px 1px #ffffff40; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
button.held { transform: translateY(3px); box-shadow: 0 1px 0 #26312c, inset 0 1px 3px #0005; }
button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.dpad { display: grid; grid-template: repeat(3, 34px) / repeat(3, 34px); gap: 0; filter: drop-shadow(0 3px 1px #26312c); }
.direction { width: 34px; height: 34px; border-radius: 5px; font-size: 15px; color: #bcc8c0; box-shadow: none; }
.up { grid-area: 1 / 2; border-bottom: 0; border-radius: 6px 6px 0 0; }
.left { grid-area: 2 / 1; border-right: 0; border-radius: 6px 0 0 6px; }
.right { grid-area: 2 / 3; border-left: 0; border-radius: 0 6px 6px 0; }
.down { grid-area: 3 / 2; border-top: 0; border-radius: 0 0 6px 6px; }
.dpad-center { grid-area: 2 / 2; background: #38443b; }
.workspaces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.workspace, .actions > div { display: grid; justify-items: center; gap: 8px; }
.workspace button { width: 100%; max-width: 62px; aspect-ratio: 1; border-radius: 10px; }
.workspace svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.workspace span, .actions span { font-size: 10px; text-transform: uppercase; color: #f0f2de; font-weight: 650; letter-spacing: .015em; }
#lab-research { background: linear-gradient(#ff9c37, #ec691c); }
#lab-critters { background: linear-gradient(#f6d269, #dcae29); color: #334b3a; }
#lab-library { background: linear-gradient(#b6d986, #81ac5d); color: #283f2f; }
#lab-habitat { background: linear-gradient(#73c6ff, #308fe0); }
.workspace button[aria-pressed="true"] { outline: 2px solid #f3f7d7; outline-offset: 3px; }
.actions { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
#lab-back { width: 60px; height: 60px; border-radius: 50%; font-size: 35px; }
#lab-confirm { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(#ffad38, #f2771a); font-size: 48px; font-weight: 750; }
.actions > div:first-child { padding-top: 9px; }
p { font-size: 13px; margin: 14px 0 8px; color: #b9c9c0; }
#status { font-size: 12px; color: #aac2b7; }
footer { font-size: 11px; line-height: 1.6; color: #8ba398; }
@media (max-width: 850px) { .controls { gap: 14px; grid-template-columns: 90px minmax(0, 1fr) 130px; } .dpad { grid-template: repeat(3, 30px) / repeat(3, 30px); } .direction { width: 30px; height: 30px; } .workspaces { gap: 8px; } #lab-back { width: 52px; height: 52px; } #lab-confirm { width: 64px; height: 64px; font-size: 40px; } .actions { gap: 8px; } }
@media (max-width: 600px) { main { padding: 12px 6px; } header { padding: 0 6px; } .housing { width: 100%; padding: 12px 10px 16px; border-radius: 24px; } .screen { border-width: 6px; } .controls { gap: 7px; grid-template-columns: 72px minmax(0, 1fr) 90px; margin-top: 14px; } .dpad { grid-template: repeat(3, 24px) / repeat(3, 24px); } .direction { width: 24px; height: 24px; font-size: 10px; } .workspaces { gap: 5px; } .workspace button { border-radius: 7px; } .workspace span, .actions span { font-size: 7px; letter-spacing: -.02em; } .workspace, .actions > div { gap: 6px; } #lab-back { width: 36px; height: 36px; font-size: 25px; } #lab-confirm { width: 46px; height: 46px; font-size: 29px; } .actions { gap: 5px; } .actions > div:first-child { padding-top: 5px; } .brand { font-size: 12px; } }

/* Whole devices stay visible. Narrow screens stack the family. */
main { max-width:1640px; }
.device-family { display:grid; grid-template-columns:minmax(0,1fr) clamp(420px,30vw,500px); gap:28px; align-items:start; }
.housing.lab { width:100%; min-width:0; }
.housing.companion { width:100%; min-width:0; padding:14px; background:linear-gradient(120deg,#9caa93,#788b76); }
.companion .screen { aspect-ratio:450/600; }
.companion .controls { grid-template-columns:102px minmax(0,1fr); gap:24px; }
.companion .dpad { grid-template:repeat(3,34px)/repeat(3,34px); }
.companion .direction { width:34px;height:34px; }
.companion .actions { justify-content:flex-end; gap:16px; }
.companion .back-button { width:52px;height:52px;border-radius:50%;font-size:32px; }
.companion .confirm-button { width:64px;height:64px;border-radius:50%;font-size:40px;background:linear-gradient(#ffad38,#f2771a); }
.device-status { margin:12px 0 0;font-size:11px;color:#f1f2e3;min-height:28px; }
.housing.dock { grid-column:1/-1;width:min(100%,1100px);min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:20px;background:linear-gradient(120deg,#a9b19f,#858f7e); }
.dock .screen { aspect-ratio:792/272;background:white; }
.dock-controls { display:flex;justify-content:center;gap:16px;margin:16px 0; }
.dock-controls button { width:54px;height:36px;border-radius:8px; }
#dock-confirm { background:#88918c; }
.printer { border-left:2px solid #566252;padding:22px 0 0 20px;display:flex;flex-direction:column;gap:12px;align-items:center; }
.printer button { width:84px;height:42px;border-radius:10px;font-size:15px; }
#dock-critters { width:65px;height:28px;background:#89928b;font-size:12px; }
.paper-slot { height:8px;width:100%;background:#202722;border-radius:5px;margin-top:16px;box-shadow:0 2px #c6cbbe; }
.printer span { font-size:9px;color:#243429; }
.dock .device-status { grid-column:1/-1;margin:0; }
.simulation-tools { border-top:1px solid #3f5148;margin:28px 0 18px;padding-top:14px;font-size:12px; }
.sandbox-tools { display:flex;align-items:center;gap:16px;margin:16px 0 24px;font-size:12px;color:#b8cbbf; }
.sandbox-tools button { padding:10px 16px;border-radius:8px;white-space:nowrap;font-size:13px; }
.sandbox-tools button:disabled { opacity:.6;cursor:wait; }
.simulation-tools label { display:inline-flex;align-items:center;gap:6px;margin:0 24px 10px 0; }
#link-status { display:block;color:#9eb6a9; }
@media(max-width:1340px) { .device-family { display:flex;flex-direction:column;align-items:center; } .housing.companion { max-width:500px; } }
@media(max-width:1100px) { .lab .controls { gap:10px;grid-template-columns:90px minmax(0,1fr) 130px; } }
@media(max-width:850px) { .housing.dock { width:100%;grid-template-columns:minmax(0,1fr) 100px;gap:12px; } .printer{padding-left:10px;} }

@media(max-width:600px) { .lab .controls { grid-template-columns:72px minmax(0,1fr) 90px; } .lab .workspace span { font-size:6px; letter-spacing:-.03em; } }
@media(max-width:400px) { .companion .controls { grid-template-columns:90px minmax(0,1fr); gap:16px; } .companion .dpad { grid-template:repeat(3,30px)/repeat(3,30px); } .companion .direction { width:30px;height:30px; } .companion .actions { gap:12px; } }