/* A tactile workbench around a real, locally rendered 3D assembly. */
.mode-note { display: none; }
.mode-buttons { width: 100%; justify-content: space-between; }
.mode-buttons button[data-mode=operate][aria-pressed=true] { border-color: #579643; }
.mode-buttons button[data-mode=operate][aria-pressed=true]>span { background: #397831; }
.mac-scene[data-renderer=webgl] { min-height: 570px; flex: 1; display: block; overflow: hidden; }
.mac-scene[data-renderer=webgl]>svg { display: none; }
.machine-viewport { position: absolute; inset: 0; min-height: 100%; }
.machine-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.machine-canvas:active { cursor: grabbing; }
.machine-canvas:focus-visible { outline: 3px solid #337da7; outline-offset: -4px; }
.machine-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.machine-label { position: absolute; left: 0; top: 0; padding: 5px 8px; min-height: 26px; border: 1px solid #b8ad98; background: #fffdf0eb; color: #4c4335; font: 9px var(--mono); border-radius: 3px; box-shadow: 1px 2px 3px #61533622; pointer-events: auto; white-space: nowrap; }
.machine-label::before { content: ''; width: 5px; height: 5px; display: inline-block; margin-right: 5px; border-radius: 50%; background: #719462; vertical-align: 1px; }
.machine-label.selected { background: #f3e6fa; border-color: #9755a4; color: #613672; box-shadow: 0 0 0 1px #9755a4; }
.machine-label.selected::before { background: #9755a4; }
.machine-label.signal-active { background: #dff1f7; border-color: #4584a3; }
.machine-label[data-part-label=cpu]::before { background: #df534a; }
.machine-label[data-part-label=ram]::before { background: #ee853a; }
.machine-label[data-part-label=rom]::before { background: #c29b20; }
.machine-label[data-part-label=display]::before { background: #3397c7; }
.assembly-control { display: flex; align-items: center; gap: 14px; padding: 14px 22px 0; }
.assembly-control label { display: flex; gap: 9px; align-items: center; white-space: nowrap; font: 9px var(--mono); color: #72644b; }
.assembly-control label span { color: #9b824f; }
.assembly-control input { flex: 1; width: 100%; min-width: 30px; min-height: 22px; margin: 0; padding: 0; accent-color: #9152a2; cursor: ew-resize; }
.assembly-control output { font: 10px var(--mono); color: #7e518c; min-width: 31px; text-align: right; }
.camera-toolbar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 20px 13px; border-top: 1px solid #c8bea75e; }
.camera-presets,.camera-options { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.camera-toolbar button { background: #fff9ed; border: 1px solid #c7b99f; padding: 7px 9px; font-size: 10px; min-height: 32px; color: #68583e; }
.camera-toolbar button:hover { border-color: #857259; background: #fffdf7; }
.camera-toolbar button[aria-pressed=true] { background: #e5d8ef; color: #603c76; border-color: #9a73ac; }
.camera-toolbar #zoom-in,.camera-toolbar #zoom-out { min-width: 30px; font-size: 16px; padding: 3px 8px; }
.scene-caption { padding-top: 3px; font-size: 10px; }
.machine-activities h3 { font: 29px/1.15 Georgia,serif; letter-spacing: -.6px; margin: 10px 0 22px; }
.activity-heading .eyebrow { color: #477939; }
.activity-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-bottom: 22px; }
.activity-tabs button { border: 1px solid #bdb49e; padding: 9px 5px; min-height: 37px; background: #f5efdf; font-size: 11px; }
.activity-tabs button[aria-selected=true] { background: #e3eedb; border-color: #699056; color: #315a23; box-shadow: inset 0 0 0 1px #699056; }
.machine-activities section>p:first-child { font-size: 13px; line-height: 1.65; }
.mouse-pad { display: block; position: relative; width: 100%; height: 162px; touch-action: none; overflow: hidden; border: 1.5px solid #7b9571; border-radius: 5px; cursor: crosshair; background-color: #e7efdc; background-image: linear-gradient(#8ea47822 1px,transparent 1px),linear-gradient(90deg,#8ea47822 1px,transparent 1px); background-size: 16px 16px; }
.mouse-pad.is-pressed { background-color: #d3e5c5; box-shadow: inset 0 0 0 3px #81a66b; }
.mouse-pad-cursor { position: absolute; color: #31572a; font-size: 29px; line-height: 1; pointer-events: none; transform: translate(-25%,-15%); }
.mouse-pad-label { position: absolute; bottom: 10px; left: 0; width: 100%; pointer-events: none; font-size: 10px; color: #5a7550; }
.activity-help { font: 9px/1.7 var(--mono); color: #786b54; margin: 12px 0; }
.activity-status { display: block; padding: 12px; background: #f0e9d9; border-left: 3px solid #d5b957; font: 10px/1.75 var(--mono); color: #6e5938; margin: 13px 0 17px; }
.activity-explanation { font-size: 12px; line-height: 1.85; color: #695d48; }
.activity-caveat { font: 9px/1.7 var(--mono); padding-top: 15px; margin-top: 20px; border-top: 1px solid #d8cfbc; color: #817258; }
.keyboard-form label { display: block; font-size: 12px; margin-bottom: 8px; }
.keyboard-form label span { display: block; font-size: 10px; color: #83735a; margin-top: 5px; }
.keyboard-input { width: 100%; font: 15px var(--mono); padding: 12px 10px; margin-bottom: 13px; }
.disk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.disk-actions .button { font-size: 11px; min-height: 38px; }
.activity-disk { position: relative; margin: 22px auto; width: 106px; height: 114px; border: 1px solid #263b45; background: #486777; border-radius: 3px 9px 3px 3px; box-shadow: 3px 4px 0 #263b4527; transition: transform .35s; padding: 64px 10px 6px; }
.activity-disk::before { content: ''; position: absolute; top: 0; left: 25px; width: 59px; height: 42px; background: linear-gradient(90deg,#cdd1c8 0% 40%,#3f5051 40% 60%,#cdd1c8 60%); border: 1px solid #939c98; }
.activity-disk>span,.activity-disk>small { display: block; font: 12px var(--mono); background: #f4edda; padding: 3px 6px; }
.activity-disk>small { font-size: 8px; padding-top: 0; }
.is-inserted .activity-disk { transform: translateY(7px) rotate(-5deg); }
@media(min-width:1400px) { .mac-scene[data-renderer=webgl] { min-height: 650px; } }
@media(max-width:1150px) { .camera-toolbar { padding-left: 16px; padding-right: 16px; } .mac-scene[data-renderer=webgl] { min-height: 520px; } .assembly-control { padding-left: 17px; padding-right: 17px; gap: 9px; } .assembly-control label { font-size: 8px; gap: 6px; } .mode-buttons button { padding-left: 13px; padding-right: 13px; } }
@media(max-width:920px) { .mode-buttons button { font-size: 10px; gap: 7px; padding-left: 10px; padding-right: 10px; } .mac-scene[data-renderer=webgl] { min-height: 475px; } .camera-toolbar button { font-size: 9px; padding: 6px 8px; } .assembly-control { flex-wrap: wrap; } .assembly-control label { font-size: 9px; } .machine-label { font-size: 8px; padding: 5px 6px; } }
@media(max-width:720px) { .mac-scene[data-renderer=webgl] { min-height: 490px; } .mode-buttons button { flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 9px 10px; font-size: 10px; } .mode-buttons button>span { font-size: 8px; } .machine-activities h3 { font-size: 31px; } .mouse-pad { height: 180px; } .activity-explanation { font-size: 13px; } .activity-tabs { max-width: 380px; } .keyboard-input { max-width: 430px; display: block; } .activity-disk { margin-left: 0; } .assembly-control { flex-wrap: nowrap; } .camera-toolbar { gap: 10px; } }
@media(max-width:420px) { .mac-scene[data-renderer=webgl] { min-height: 420px; } .assembly-control label { font-size: 8px; gap: 5px; } .assembly-control { padding-left: 12px; padding-right: 12px; } .mode-bar { padding: 0 4px; } .mode-buttons button { font-size: 8px; padding-left: 7px; padding-right: 7px; } .camera-toolbar { padding-left: 12px; padding-right: 12px; } .camera-toolbar button { font-size: 9px; } .machine-label { font-size: 7px; padding: 4px 5px; min-height: 24px; } .scene-caption { font-size: 9px; } }
@media(prefers-reduced-motion:reduce) { .activity-disk { transition: none; } }

/* The time line is a real model selector, with persistent pressed states. */
.generation-picker { margin: 0 0 30px; }
.generation-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 12px; }
.generation-heading p { margin: 0; }
.generation-heading > span { font-size: 12px; color: var(--muted); }
.generation-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.generation-options button { --era: #c77632; position: relative; display: grid; gap: 9px; text-align: left; padding: 19px 22px; border: 1px solid #d5c9b4; border-top: 5px solid var(--era); border-radius: 4px; background: #fbf8f0; color: #282b25; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; }
.generation-options button[data-generation=imac-g3] { --era: #1b989f; }
.generation-options button[data-generation=imac-m4] { --era: #6c7ec4; }
.generation-options button[aria-pressed=true] { background: #fffdf7; box-shadow: 0 3px 0 var(--era); transform: translateY(-3px); border-color: var(--era); }
.generation-options button:hover { background: #fffdf7; }
.generation-options button:focus-visible { outline: 3px solid #9154a4; outline-offset: 4px; }
.generation-year { font: 12px var(--mono); letter-spacing: .1em; color: var(--era); }
.generation-options strong { font-family: Georgia, serif; font-size: 25px; font-weight: normal; }
.generation-options button > span:last-child { display: flex; justify-content: space-between; font-size: 12px; color: #696b5f; }
.generation-description { font-size: 12px; color: #686b60; margin: 15px 2px 0; min-height: 32px; line-height: 1.6; }
.hero-specs > div strong { font-size: 18px; line-height: 1.3; }
.model-fallback { max-width: 460px; margin: 120px auto; padding: 30px; line-height: 1.8; }
.architecture-note a { display: block; width: fit-content; margin-top: 12px; }
@media(max-width:640px) {
 .generation-heading > span { display: none; }
 .generation-options { gap: 7px; }
 .generation-options button { padding: 13px 10px; gap: 8px; }
 .generation-options strong { font-size: 18px; }
 .generation-options button > span:last-child { font-size: 10px; line-height: 1.4; }
 .generation-options button > span:last-child span { display: none; }
 .generation-description { min-height: 58px; }
}
.hero-specs { width: 340px; transform: none; }
.hero-specs > div { grid-template-columns: 10px minmax(0,1fr); gap: 5px 12px; }
.hero-specs > div strong { white-space: normal; font-size: 16px; letter-spacing: -.5px; }
.hero-specs > div > span:last-child { grid-column: 2; }
.activity-disk--optical { border-radius: 50%; width: 116px; height: 116px; background: conic-gradient(#d7e7e9,#a5c8cd,#e6e0e8,#a5c8cd,#d7e7e9); padding: 77px 12px 0; border-color: #8ba4a8; }
.activity-disk--optical::before { top: 45px; left: 45px; width: 24px; height: 24px; border-radius: 50%; background: #f7f2e8; border: 5px solid #8ba4a8; }
.activity-disk--optical > span,.activity-disk--optical > small { background: transparent; text-align: center; font-size: 8px; padding: 1px; }
.activity-disk--storage { width: 138px; height: 72px; padding: 13px 20px; border-radius: 4px; background: #324f58; border: 6px solid #478171; }
.activity-disk--storage::before { top: auto; bottom: -11px; left: 9px; width: 108px; height: 7px; border: 0; background: repeating-linear-gradient(90deg,#bca66d 0 5px,transparent 5px 8px); }
.activity-disk--storage > span,.activity-disk--storage > small { text-align: center; background: transparent; color: #e2e6d9; }
.is-inserted .activity-disk--storage { transform: none; }
@media(max-width:720px) { .hero-specs { display: grid; width: 100%; grid-template-columns: 1fr; gap: 14px; } .hero-specs > div { margin: 0; } .hero-specs > div strong { font-size: 14px; } }