/* Scoped product illustration. Hero, feature typography and dialogs are untouched. */
#desktop-demo { height: 510px; border-radius: 18px; background: radial-gradient(ellipse at 80% 15%, #3b3b3b45, transparent 55%), linear-gradient(155deg, #2a2a2a, #181818 54%, #232323); box-shadow: 0 36px 80px -35px #000000bb, 0 1px 0 #ffffff12 inset; }
#desktop-demo::before { content: ""; position: absolute; inset: 10% -25% -75% -45%; border-radius: 50%; transform: rotate(-20deg); background: linear-gradient(165deg, #ffffff06, #ffffff01 36%, #00000016 37%, #ffffff02 64%, transparent 65%); pointer-events: none; }
#desktop-demo .desktop-menu { height: 30px; padding-inline: 18px; gap: 16px; font-size: 10px; background: #16161670; color: #b7b7b7; border-bottom-color: #ffffff0c; }
.workspace-menu-icon { font-size: 17px; color: #d1d1d1; line-height: 1; }
#desktop-demo .desktop-menu strong { color: #e0e0e0; font-size: 10px; font-weight: 600; }
#desktop-demo .desktop-menu-right { display: flex; align-items: center; gap: 14px; }
.desktop-clock { font-size: 9px; color: #b6b6b6; }
.demo-lesson-heading { position: absolute; top: 47px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#demo-lesson-title { font-size: 15px; font-weight: 570; letter-spacing: -.025em; color: #e0e0e0; }
.demo-input-legend { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #b8b8b8; }
.demo-input-legend kbd { height: 27px; padding: 2px 8px; gap: 5px; font-size: 12px; background: #2b2b2b; color: #c1c1c1; border-color: #5d5d5d; box-shadow: 0 2px 3px #00000044; transition: background .12s, color .12s; }
.demo-input-legend kbd span { font-size: 10px; }
.legend-plus { color: #777777; font-size: 10px; }
.demo-mouse { width: 18px; height: 27px; display: flex; align-items: center; }
.demo-mouse svg { width: 18px; height: 25px; fill: none; stroke: #a9a9a9; stroke-width: 1.5; }
.demo-mouse .mouse-left, .demo-mouse .mouse-right { fill: transparent; stroke: none; }
#desktop-demo[data-held="true"] #demo-option { background: #eeeeee; color: #151515; border-color: #eeeeee; box-shadow: 0 1px 0 #ffffff55 inset, 0 2px 7px #00000044; }
#desktop-demo[data-pressed="true"][data-button="left"] .mouse-left, #desktop-demo[data-pressed="true"][data-button="right"] .mouse-right { fill: #eeeeee; }
#desktop-demo .demo-workarea { top: 92px; bottom: 59px; left: 23px; right: 23px; }
#desktop-demo .demo-window { top: 0; left: 0; width: 64%; height: 80%; min-height: 150px; min-width: 0; border: 1px solid #ffffff28; border-radius: 11px; background: #262626; box-shadow: 0 25px 45px -12px #000000bb, 0 7px 13px #00000055, 0 0 0 .5px #00000088; container-type: size; transition: none; }
#desktop-demo .demo-window:focus-visible { outline-offset: 3px; }
#desktop-demo[data-playback="playing"] .demo-window, #desktop-demo[data-playback="playing"] .demo-cursor { will-change: transform; }
#desktop-demo .demo-titlebar { height: 42px; padding: 0 15px; background: linear-gradient(#393939, #313131); border-bottom-color: #ffffff09; color: #d1d1d1; font-size: 11px; }
#desktop-demo .traffic-lights { gap: 6px; }
#desktop-demo .traffic-lights i { width: 9px; height: 9px; box-shadow: 0 0 0 .5px #00000033; }
#desktop-demo .traffic-lights i:nth-child(1) { background: #868686; }
#desktop-demo .traffic-lights i:nth-child(2) { background: #b0b0b0; }
#desktop-demo .traffic-lights i:nth-child(3) { background: #9f9f9f; }
.workspace-title { font-size: 11px; font-weight: 550; letter-spacing: -.015em; }
.window-toolbar-icon { width: 14px; height: 14px; color: #a4a4a4; margin-left: 24px; }
.workspace-toolbar { display: flex; justify-content: space-between; align-items: center; height: 29px; padding-inline: 16px; border-bottom: 1px solid #ffffff0b; background: #2b2b2b; color: #a9a9a9; font-size: 9px; }
.workspace-breadcrumb span { padding-inline: 8px; color: #6f6f6f; }
.workspace-tools { display: flex; gap: 15px; align-items: center; font-size: 15px; line-height: 1; }
.workspace-body { height: calc(100% - 71px); display: flex; overflow: hidden; }
.workspace-sidebar { position: relative; width: 121px; flex-shrink: 0; background: #292929; border-right: 1px solid #ffffff08; padding: 18px 10px; color: #afafaf; font-size: 10px; }
.sidebar-section-label { display: block; font-size: 8px; color: #919191; padding-inline: 8px; margin-bottom: 9px; }
.sidebar-item { padding: 6px 8px; border-radius: 5px; margin-bottom: 3px; }
.sidebar-item.selected { background: #484848; color: #e2e2e2; }
.sidebar-bottom { position: absolute; bottom: 11px; left: 18px; font-size: 7px; color: #898989; }
.workspace-document { flex: 1; min-width: 0; padding: 16px 24px; background: #212121; overflow: auto; scrollbar-width: thin; scrollbar-color: #666666 #212121; }
.document-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; white-space: nowrap; }
.document-tag { font-size: 7px; letter-spacing: .15em; color: #a5a5a5; }
.document-saved { font-size: 7px; color: #8e8e8e; }
.document-saved span { color: #b9b9b9; margin-left: 3px; }
.workspace-document h3 { font-size: clamp(19px, 3.4cqw, 26px); font-weight: 570; line-height: 1.12; letter-spacing: -.05em; margin: 0 0 7px; color: #e5e5e5; }
.document-intro { font-size: 10px; color: #9f9f9f; line-height: 1.5; margin: 0 0 14px; }
.document-divider { height: 1px; background: #ffffff0b; margin-bottom: 11px; }
.document-checklist { display: flex; flex-direction: column; gap: 8px; color: #bbbbbb; font-size: 9px; }
.document-checklist > div { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.note-checkbox { width: 10px; height: 10px; border: 1px solid #6b6b6b; border-radius: 3px; flex-shrink: 0; }
.note-checkbox.checked { background: #a8a8a8; border-color: #a8a8a8; color: #212121; display: grid; place-items: center; font-size: 7px; line-height: 1; }
.document-note { border-left: 2px solid #656565; padding-left: 9px; margin-top: 17px; color: #929292; font-size: 9px; line-height: 1.5; }
#desktop-demo .resize-region { position: absolute; width: 32px; height: 32px; right: 14px; bottom: 15px; border: 1px dashed #bcbcbc5c; border-radius: 5px; background: #c3c3c307; opacity: 0; pointer-events: none; }
#desktop-demo[data-operation="resize"] .resize-region { opacity: 1; }
#desktop-demo .demo-cursor { top: 0; left: 0; width: 23px; height: 31px; z-index: 3; filter: drop-shadow(0 2px 2px #00000088); transition: none; }
#desktop-demo .demo-cursor svg { width: 23px; height: 31px; fill: #161616; stroke: #eeeeee; stroke-width: 1.8; stroke-linejoin: round; overflow: visible; }
#desktop-demo .cursor-click { position: absolute; left: -13px; top: -13px; width: 29px; height: 29px; padding: 0; min-width: 0; border: 1.5px solid #efefef; border-radius: 50%; background: #ffffff0a; opacity: var(--click-opacity, 0); transform: scale(var(--click-size, 1)); z-index: -1; }
.desktop-bottom { position: absolute; bottom: 10px; left: 23px; right: 23px; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#demo-phase { color: #bababa; font-size: 10px; width: 38%; line-height: 1.6; }
#desktop-demo .illustrated-dock { position: relative; top: auto; bottom: auto; left: auto; transform: none; width: auto; height: 38px; padding: 3px 8px 6px; gap: 6px; border-radius: 10px; background: #45454559; border: 1px solid #ffffff1a; box-shadow: 0 4px 12px #00000033, 0 1px 0 #ffffff0a inset; }
.illustrated-dock > div { position: relative; width: 28px; height: 28px; }
.illustrated-dock img { width: 28px; height: 28px; }
.dock-workspace svg { width: 26px; height: 26px; stroke: #c2c2c2; stroke-width: 1.3; fill: #4e4e4e; }
.dock-workspace i, .dock-optiondrag i { position: absolute; left: 13px; bottom: -4px; width: 2px; height: 2px; background: #c1c1c1; border-radius: 50%; }
.demo-local-label { width: 38%; text-align: right; font-size: 7px; letter-spacing: .12em; color: #989898; }
.demo-controls { display: flex; align-items: center; gap: 4px; }
.demo-controls .replay-button { font-size: 10px; padding: 7px 8px; }
.demo-controls .replay-button:disabled { opacity: .42; }
.demo-comparison { display: none; position: absolute; inset: 0; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.comparison-cell > span { display: block; color: #bbbbbb; font-size: 11px; margin-bottom: 9px; }
.comparison-desktop { height: 230px; position: relative; border: 1px solid #7979794d; border-radius: 9px; overflow: hidden; background: #161616; }
.comparison-desktop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: #3e3e3e; }
.comparison-desktop::after { content: ""; position: absolute; bottom: 4px; left: 40%; width: 20%; height: 5px; border-radius: 3px; background: #565656; }
.comparison-workarea { position: absolute; inset: 14px 7px 15px; }
.static-window { position: absolute; border: 1px solid #939393; border-radius: 5px; background: #2b2b2b; box-shadow: 0 8px 12px #00000044; overflow: hidden; }
.static-window i { display: block; height: 15px; border-bottom: 1px solid #7d7d7d80; background: #474747; }
.static-window b { font-size: 11px; display: block; padding: 14px 12px 7px; font-weight: 500; color: #d3d3d3; }
.static-window em { display: block; height: 1px; width: 55%; margin: 8px 12px; background: #747474; box-shadow: 0 11px 0 #747474; }
#static-result { grid-column: 1/-1; color: #bcbcbc; font-size: 11px; margin: 0; text-align: center; }
#desktop-demo[data-playback="reduced"] .demo-comparison { display: grid; }
#desktop-demo[data-playback="reduced"] .demo-window, #desktop-demo[data-playback="reduced"] .demo-cursor { display: none; }
#desktop-demo[data-playback="reduced"] #demo-phase { opacity: 0; }
@container (max-width: 560px) { .workspace-sidebar { width: 100px; font-size: 9px; padding-inline: 8px; } .workspace-document { padding: 17px 20px; } .document-saved { display: none; } .document-note { margin-top: 13px; } }
@container (max-width: 410px) { .workspace-sidebar { display: none; } .workspace-document { padding: 15px 20px; } .document-checklist { font-size: 9px; gap: 7px; } .document-note { display: none; } .document-meta { margin-bottom: 10px; } .document-intro { margin-bottom: 11px; } }
@container (max-height: 300px) { .document-note { display: none; } }
@container (max-height: 260px) { .document-intro, .document-checklist > div:last-child { display: none; } .workspace-document { padding-block: 12px; } .document-meta { margin-bottom: 8px; } .document-divider { margin-bottom: 9px; } }
@media (max-width: 720px) { #desktop-demo { height: 435px; } #desktop-demo .demo-workarea { top: 86px; left: 13px; right: 13px; bottom: 63px; } #desktop-demo .desktop-menu { padding-inline: 12px; gap: 10px; } .desktop-menu-items { font-size: 8px; } #desktop-demo .desktop-menu-right { gap: 8px; } .desktop-clock { font-size: 8px; } .demo-lesson-heading { top: 44px; left: 15px; right: 15px; gap: 8px; } #demo-lesson-title { font-size: 13px; } .demo-input-legend { gap: 5px; font-size: 8px; } .demo-input-legend kbd { height: 25px; padding-inline: 6px; font-size: 12px; } .demo-input-legend kbd span { display: none; } .demo-mouse { width: 16px; } #desktop-demo .demo-titlebar { height: 36px; font-size: 10px; padding-inline: 12px; } #desktop-demo .traffic-lights i { width: 8px; height: 8px; } .workspace-toolbar { height: 26px; padding-inline: 12px; font-size: 8px; } .workspace-body { height: calc(100% - 62px); } .workspace-title { font-size: 10px; } .window-toolbar-icon { width: 13px; height: 13px; } .workspace-document h3 { font-size: 19px; } .document-intro { font-size: 9px; } .desktop-bottom { left: 14px; right: 14px; bottom: 12px; } #demo-phase { font-size: 8px; width: 42%; } .demo-local-label { width: 22%; font-size: 6px; } #desktop-demo .illustrated-dock { height: 34px; padding-inline: 5px; } .illustrated-dock > div, .illustrated-dock img { width: 24px; height: 24px; } .dock-workspace svg { width: 23px; height: 23px; } .dock-workspace i, .dock-optiondrag i { left: 11px; } .comparison-desktop { height: 170px; } .static-window b { font-size: 9px; padding-inline: 8px; } .demo-comparison { gap: 10px; } }
@media (max-width: 400px) { .desktop-menu-items { display: none; } .demo-mode-buttons .icon, .demo-controls .icon { display: none; } .demo-action { padding-inline: 8px; font-size: 10px; } .demo-controls .replay-button { padding-inline: 5px; font-size: 9px; gap: 4px; } .demo-toolbar { gap: 6px; } .document-checklist { font-size: 8px; } .workspace-document { padding-inline: 14px; } }
@media (prefers-reduced-motion: reduce) { #desktop-demo .demo-window, #desktop-demo .demo-cursor { will-change: auto; } }

/* Practice is separate from the demonstration. Input bindings never depend on
   the selected Watch lesson; no Option means no geometry change. */
#desktop-demo .demo-window { min-height: 100px; cursor: default; touch-action: auto; }
#desktop-demo .demo-window.dragging { cursor: grabbing; user-select: none; }
#desktop-demo:is([data-interaction="practice"], [data-interaction="dragging"], [data-interaction="completed"]) .demo-cursor { display: none; }
#desktop-demo[data-playback="reduced"]:is([data-interaction="practice"], [data-interaction="dragging"], [data-interaction="completed"]) .demo-window { display: block; }
#desktop-demo:is([data-interaction="practice"], [data-interaction="dragging"], [data-interaction="completed"]) .demo-comparison { display: none; }
.practice-feedback { margin: 5px 0 0; min-height: 3.2em; font-size: 11px; line-height: 1.6; color: #b9b9b9; }
.demo-toolbar { flex-wrap: wrap; }
.demo-controls { flex-wrap: wrap; justify-content: flex-end; }
#try-demo { border-color: #444444; color: #dfdfdf; }
@media (max-width: 400px) { .demo-toolbar { align-items: start; } .demo-controls { margin-left: auto; } .practice-feedback { font-size: 10px; } }