:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --muted: #66666b;
  --paper: #f5f5f7;
  --blue: #0066cc;
  --line: #dcdce0;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 17px; line-height: 1.55; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button { border: 0; background: none; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #0071e3; outline-offset: 4px; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.07; letter-spacing: -.045em; font-weight: 650; }
.button { display: inline-flex; gap: 20px; justify-content: center; align-items: center; min-height: 48px; border-radius: 100px; padding: 12px 24px; font-size: 16px; font-weight: 500; }
.primary { background: #0071e3; color: white; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: 16px; min-height: 44px; padding: 4px 0; }

.eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .13em; line-height: 1.5; color: var(--muted); }
.room { position: fixed; inset: 0; overflow: hidden; background: #101113; isolation: isolate; }
#room-art, #room-hotspots { position: absolute; inset: 0; }
#room-art { z-index: -1; background: #101113; }
#studio-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* The next lighting frame, revealed as a feathered circle spreading from the light source. */
.lighting-reveal { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; --spill-mask: radial-gradient(circle at var(--spill-x) var(--spill-y), #000 max(0px, calc(var(--spill-r) - var(--spill-feather))), transparent var(--spill-r)); -webkit-mask-image: var(--spill-mask); mask-image: var(--spill-mask); }
/* Portrait viewports crop the wide cover to the monitor wall; the identity chip keeps branding. */
@media (orientation: portrait) {
  html.js #studio-image { object-position: 87% 50%; }
  html.js .lighting-reveal { object-position: 87% 50%; }
  html.js .hint-landscape { display: none; }
  html.js .hint-portrait { display: inline; }
}
.hint-portrait { display: none; }
.hotspot.label-left .hotspot-label { left: auto; right: 0; transform: translateY(-3px); }
.hotspot.label-left:hover .hotspot-label, .hotspot.label-left:focus-visible .hotspot-label { transform: translateY(0); }
/* A live full-screen terminal projected onto the Terminal monitor. Muted and slightly soft,
   with an inner vignette and faint glare, so it sits in the photograph like the other screens. */
.live-monitor { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; background: #0e141d; color: #a3acb9; font: 500 12.5px/1.36 var(--mono); white-space: pre; pointer-events: none; filter: blur(.7px) saturate(.85); }
.live-monitor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, #ffffff12 0%, #ffffff05 32%, #ffffff00 58%); box-shadow: inset 0 0 70px #00000080; pointer-events: none; }
[data-room-lighting="night"] .live-monitor { background: #0b1019; }
.live-monitor .term-title { flex: none; padding: 6px 12px; background: #161d28; color: #6b7686; font-size: 11px; text-align: center; border-bottom: 1px solid #ffffff0a; }
.live-monitor .term-body { flex: 1; overflow: hidden; padding: 8px 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.live-monitor .term-status { flex: none; display: flex; justify-content: space-between; padding: 3px 10px; background: #2c4a3a; color: #b9c9bd; font-size: 11px; }
.live-monitor .prompt { color: #7fb08e; }
.live-monitor .cmd { color: #c6ced9; }
.live-monitor .ok { color: #86b596; }
.live-monitor .warn { color: #c9ae78; }
.live-monitor .dim { color: #6f7a89; }
/* Live clock painted over the Projects dashboard's printed 3:10, sampled from its panel. */
.dash-clock { position: absolute; display: flex; align-items: center; justify-content: center; background: #1f2430; box-shadow: 0 0 4px 3px #1f2430; color: #e4e9ef; font: 400 16px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.02em; white-space: nowrap; pointer-events: none; filter: blur(.45px); text-shadow: 0 0 3px #ffffff40; }
[data-room-lighting="night"] .dash-clock { background: #1b2130; box-shadow: 0 0 4px 3px #1b2130; }
.dash-clock span { animation: colon-blink 2s steps(1) infinite; }
@keyframes colon-blink { 50% { opacity: .15; } }
/* At night the monitor wall lights the wall behind it and the desk in front. */
.screen-glow { position: absolute; pointer-events: none; opacity: 0; transition: opacity .6s ease; mix-blend-mode: screen; background: radial-gradient(ellipse 48% 42% at 52% 44%, #6f8cff4d, #6f8cff00 72%), radial-gradient(ellipse 42% 16% at 50% 80%, #8aa2ff40, #8aa2ff00 75%); }
[data-room-lighting="night"] .screen-glow { opacity: 1; }
#room-hotspots { pointer-events: none; }
/* Three soft wisps rising from the mug in the room artwork. */
.mug-steam { position: absolute; width: calc(var(--steam-scale, 1) * 46px); height: calc(var(--steam-scale, 1) * 120px); transform: translate(-50%, -100%); pointer-events: none; filter: blur(calc(var(--steam-scale, 1) * 3px)); }
.mug-steam span { position: absolute; bottom: 0; left: 50%; width: 34%; height: 62%; border-radius: 50%; background: radial-gradient(ellipse at 50% 65%, #ffffffb3, #fff0 70%); opacity: 0; animation: steam-rise 4.6s ease-in infinite; }
.mug-steam span:nth-child(2) { left: 32%; animation-duration: 5.4s; animation-delay: 1.6s; }
.mug-steam span:nth-child(3) { left: 66%; animation-duration: 5s; animation-delay: 3.1s; }
[data-room-lighting="night"] .mug-steam span { background: radial-gradient(ellipse at 50% 65%, #ffe9cc80, #ffe9cc00 70%); }
@keyframes steam-rise {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.5, .4); }
  20% { opacity: .7; }
  55% { transform: translate(-25%, -40%) scale(.95, 1) rotate(7deg); }
  100% { opacity: 0; transform: translate(-75%, -85%) scale(1.5, 1.35) rotate(-9deg); }
}
.room-header { position: absolute; top: max(22px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: flex; align-items: start; justify-content: space-between; gap: 20px; pointer-events: none; }
.room-identity, .lighting-toggle, .room-dock, #room-menu { border: 1px solid #ffffffaa; background: #f6f6f4d9; box-shadow: 0 8px 30px #12182114, inset 0 1px #fff9; backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); }
.room-identity { display: flex; align-items: center; gap: 15px; padding: 13px 19px; border-radius: 20px; text-align: left; pointer-events: auto; }
.identity-mark { font-size: 29px; letter-spacing: -.08em; font-weight: 750; }
.identity-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
.room-identity small { display: block; color: #61646a; font-size: 12px; margin-top: 2px; }
.lighting-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 18px; border-radius: 28px; font-size: 14px; pointer-events: auto; }
.room-tools { display: flex; gap: 8px; }
.room-tools .icon { width: 17px; height: 17px; }
#labels-toggle[aria-pressed="true"] { background: #d8e4f4; }
#lighting-icon { font-size: 22px; line-height: 1; }
.room-navigation { position: absolute; z-index: 2; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); }
.room-hint { margin: 0 auto 14px; width: max-content; max-width: 100%; color: white; text-shadow: 0 1px 7px #000c; text-align: center; font-size: 13px; font-weight: 500; }
.room-dock { display: flex; gap: 5px; padding: 8px; border-radius: 23px; }
.room-dock > button, .room-menu-wrap > button { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 17px; min-height: 50px; border-radius: 15px; font-size: 14px; white-space: nowrap; }
.room-dock .icon { width: 19px; height: 19px; color: #505d6e; }
.room-dock > button:first-child { background: #ffffffb8; box-shadow: 0 1px 5px #00000008; }
.room-menu-wrap { position: relative; display: flex; }
#menu-toggle[aria-expanded="true"] { background: #d8e4f4; }
#room-menu { position: absolute; bottom: calc(100% + 18px); right: -8px; width: 320px; max-height: calc(100dvh - 190px); overflow-y: auto; border-radius: 22px; padding: 18px 10px 12px; background: #f8f8faf0; }
.menu-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 13px 11px; }
#explore-grid { display: grid; gap: 3px; }
.explore-link { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 46px; padding: 10px 13px; border-radius: 10px; font-size: 15px; }
.explore-link .icon { width: 19px; height: 19px; color: #657c97; }
.hotspot { position: absolute; pointer-events: auto; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; }
.hotspot-dot { width: 13px; height: 13px; border: 2px solid #fff; background: #fff5; border-radius: 50%; box-shadow: 0 0 0 5px #18202728, 0 2px 8px #0003; transition: transform .18s ease; }
.hotspot-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-3px); background: #f8f8faf2; color: #1d1d1f; border: 1px solid #fff9; padding: 7px 12px; border-radius: 10px; box-shadow: 0 5px 18px #0002; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.hotspot:hover, .hotspot:focus-visible { z-index: 3; }
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.hotspot:hover .hotspot-dot, .hotspot:focus-visible .hotspot-dot { transform: scale(1.25); }
.hotspot.studio-artwork { transform: none; border-radius: 8px; min-width: 44px; min-height: 44px; }
.studio-artwork .hotspot-dot { opacity: 0; }
/* Cover objects highlight their measured outline instead of the rectangular hit area. */
.object-outlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.object-outlines polygon { fill: #ffffff10; stroke: #ffffffc0; stroke-width: 1.5; stroke-linejoin: round; opacity: 0; transition: opacity .18s ease; }
.object-outlines polygon.is-hover { opacity: 1; }
.object-outlines polygon.is-focus { opacity: 1; stroke: #0071e3; stroke-width: 2.5; }
.cover-object:focus-visible { outline: none; }
.cover-object .hotspot-dot { opacity: 1; width: 10px; height: 10px; background: #fff; box-shadow: 0 0 0 6px #18202750, 0 2px 12px #0005; }
.cover-object .hotspot-label { top: 50%; margin-top: 18px; font-size: 12px; padding: 5px 10px; }
.show-labels .cover-object .hotspot-label { opacity: 1; transform: translateX(-50%); }
.cover-object.label-left .hotspot-label { right: 6px; transform: none; }
.cover-object.label-right .hotspot-label { left: 6px; transform: none; }
.cover-object:hover .hotspot-label, .cover-object:focus-visible .hotspot-label { opacity: 1; }
html:not(.js) .room-header { display: none; }
html:not(.js) .room { position: relative; min-height: 75vh; }
html:not(.js) .room-navigation { display: none; }
.crawl { max-width: 900px; margin: 50px auto; padding: 30px; }
.crawl section { margin: 40px 0; }
.crawl p, .crawl li { margin-top: 16px; }
.crawl h2 { font-size: 32px; }
.crawl h3 { font-size: 23px; margin-top: 28px; }
.crawl a { color: var(--blue); text-decoration: underline; overflow-wrap: anywhere; }
.noscript-note { padding: 20px; text-align: center; }
html:not(.js) #explore-grid, html:not(.js) button { display: none; }

/* A single desktop sheet. On phones the document joins the page scroll. */
.portfolio-open { overflow: hidden; }
#desktop { position: fixed; margin: auto; width: min(1120px, calc(100% - 80px)); height: min(820px, calc(100dvh - 80px)); max-width: none; max-height: none; border: 1px solid #ffffffab; border-radius: 22px; padding: 0; color: var(--ink); background: #f5f5f7f5; box-shadow: 0 40px 120px #0004; overflow: hidden; }
#desktop::backdrop { background: #272b324a; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#desktop[open] { animation: sheet-in .3s cubic-bezier(.2,.75,.3,1) both; }
#desktop.expanded { width: calc(100% - 24px); height: calc(100dvh - 24px); }
.app-window { height: 100%; display: flex; flex-direction: column; }
.window-chrome { display: flex; align-items: center; gap: 20px; padding: 0 22px; min-height: 66px; background: #ffffff75; border-bottom: 1px solid #d2d2d770; flex-shrink: 0; }
.window-controls { display: flex; gap: 1px; margin-left: -10px; }
.traffic { position: relative; width: 32px; height: 44px; display: grid; place-items: center; }
.traffic::before { content: ""; width: 13px; height: 13px; border: 1px solid #0001; border-radius: 50%; position: absolute; }
.traffic.close::before { background: #ff6057; }
.traffic.minimize::before { background: #febc2e; }
.traffic.maximize::before { background: #28c840; }
.traffic svg, .traffic span { position: relative; width: 9px; height: 9px; opacity: 0; color: #292929; font-size: 12px; line-height: 8px; }
.traffic:hover svg, .traffic:hover span, .traffic:focus-visible svg, .traffic:focus-visible span { opacity: 1; }
#window-title { font-size: 14px; font-weight: 600; }
.window-owner { margin-left: auto; font-size: 13px; color: var(--muted); }
.mobile-back, .mobile-menu { display: none; }
.window-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); flex: 1; min-height: 0; }
.sidebar { padding: 24px 14px; display: flex; flex-direction: column; overflow-y: auto; background: #ededf080; border-right: 1px solid #d2d2d750; }
.sidebar-title { color: #76767b; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin: 0 12px 10px; }
#app-nav { display: grid; gap: 3px; }
.app-link { display: flex; gap: 12px; align-items: center; min-height: 42px; padding: 8px 12px; width: 100%; text-align: left; border-radius: 8px; font-size: 14px; }
.app-link .icon { width: 18px; height: 18px; color: #657c97; }
.app-link[aria-current] { background: #d9e6f8; color: #164e91; }
.sidebar-bottom { margin: auto 12px 0; padding-top: 32px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.sidebar-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-size: 13px; }
.window-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
#document { flex: 1; overflow-y: auto; padding: 52px clamp(30px, 5vw, 66px) 72px; outline: none; overflow-wrap: anywhere; overscroll-behavior: contain; }
#document h2 { font-size: clamp(32px, 3.6vw, 46px); margin: 16px 0 28px; line-height: 1.12; }
#document h2 span { color: #86868b; }
#document h3 { font-size: 24px; margin: 38px 0 16px; line-height: 1.25; letter-spacing: -.03em; }
#document h4 { font-size: 20px; margin: 28px 0 12px; letter-spacing: -.02em; line-height: 1.4; }
#document p { margin: 16px 0; }
#document li { padding-left: 4px; margin: 12px 0; }
#document ul, #document ol { padding-left: 22px; }
#document a:not(.button), #document .text-link { color: var(--blue); }
#document a:hover { text-decoration: underline; }
#document .muted { color: var(--muted); font-size: 15px; }
#document .document-lead { font-size: 20px; color: var(--muted); line-height: 1.5; }
.overview-image { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 16px; margin: 16px 0; }
.overview-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
#document .btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 22px; margin: 6px 8px 6px 0; min-height: 48px; border-radius: 30px; background: #e9f2ff; font-size: 16px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 26px 0; }
.spec-grid article { background: var(--paper); border-radius: 16px; padding: 22px; }
.spec-grid span, .spec-grid small { display: block; font-size: 13px; color: var(--muted); }
.spec-grid strong { display: block; font-size: 20px; line-height: 1.3; margin: 9px 0; letter-spacing: -.03em; }
.spec-build { grid-column: 1 / -1; }
.systems-explainer dl { margin: 26px 0; }
.systems-explainer dl > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.systems-explainer dt { font-weight: 600; font-size: 19px; }
.systems-explainer dt span { color: #8b8b91; font-size: 14px; margin-right: 14px; }
.systems-explainer dd { margin: 10px 0 0; color: var(--muted); }

#document .oss-highlights { list-style: none; padding: 0; }
#document .oss-highlights > li { padding: 26px 0; margin: 0; border-top: 1px solid var(--line); }
#document .oss-highlights h3 { margin: 0 0 12px; }
#document .oss-highlights p { margin: 10px 0 0; }
.adr { border-top: 1px solid var(--line); padding: 8px 0 12px; }
#document .adr h3 { margin: 26px 0 10px; }
#document .adr h3 span { display: block; font-size: 12px; font-weight: 650; letter-spacing: .13em; color: var(--muted); margin-bottom: 8px; }
.adr dl { margin: 0; display: grid; gap: 12px; }
.adr dt { font-size: 13px; font-weight: 650; color: var(--muted); }
.adr dd { margin: 2px 0 0; }
.adr div:last-child dd { font-weight: 550; }
.oss-activity { margin: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.oss-activity > summary { padding: 16px 0; cursor: pointer; font-weight: 600; }
.oss-activity[open] { padding-bottom: 16px; }

/* The preserved command-line portfolio. Typing is an explicit action. */
#terminal-mount { --text: #e4e6eb; --dim: #a6adb8; --green: #a5d7ac; --cyan: #acd5fa; --amber: #edcf94; --red: #ffa8a8; --prompt: #a5d7ac; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #1c2028; color: var(--text); font: 14px/1.7 var(--mono); }
#terminal-mount .status-bar { background: #262b34; padding: 8px 20px; border-bottom: 1px solid #ffffff14; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; color: #b4bac6; }
#terminal-mount .left, #terminal-mount .right { display: flex; gap: 16px; }
#terminal-mount .right { margin-left: auto; }
#terminal-mount .left > span:nth-child(2), #terminal-mount .right > span:nth-child(2) { display: none; }
.term-exit { border: 1px solid #606b7b; border-radius: 8px; color: #e4e6eb; padding: 8px 12px; min-height: 44px; font-size: 13px; }
.term-exit kbd { display: none; }
#terminal-mount .viewport { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 24px; overscroll-behavior: contain; }
#terminal-mount .line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1em; }
.line.dim { color: var(--dim); }
.line.green { color: var(--green); }
.line.cyan { color: var(--cyan); }
.line.amber { color: var(--amber); }
.line.red { color: var(--red); }
.line.prompt { color: var(--prompt); }
#terminal-mount .input-area { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: #262b34; }
.prompt-char { color: var(--prompt); }
#realInput { min-width: 0; flex: 1; min-height: 44px; font: 16px var(--mono); background: none; border: 0; color: var(--text); padding: 8px 0; outline-offset: 3px; }
#realInput::placeholder { color: #a6adb8; }
#terminal-mount .hint { font-size: 12px; padding: 2px 24px max(12px, env(safe-area-inset-bottom)); color: #a6adb8; background: #262b34; }
#terminal-mount .splash { display: none !important; }
#terminal-mount .signal-dot { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 7px; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

@media (hover: hover) {
  .room-dock button:hover, .explore-link:hover { background: #ffffffb8; }
  .app-link:hover { background: #e4e4e9; }
  .text-link:hover { text-decoration: underline; }
  .primary:hover { background: #0077ed; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  /* Phones cannot hover, so name every visible object up front. */
  .cover-object .hotspot-label { opacity: 1; transform: translateX(-50%); }
  .cover-object.label-left .hotspot-label, .cover-object.label-right .hotspot-label { transform: none; }
  #labels-toggle { display: none; }
  .room-header { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); gap: 10px; }
  .room-identity { padding: 11px 13px; gap: 10px; border-radius: 17px; }
  .identity-mark { display: none; }
  .identity-name { font-size: 15px; }
  .room-identity small { font-size: 12px; }
  .room-tools { gap: 6px; }
  .room-tools .lighting-toggle { padding: 10px; min-height: 44px; width: 44px; justify-content: center; }
  .room-tools .lighting-toggle > span:not(#lighting-icon) { display: none; }
  .room-navigation { width: calc(100% - 24px); max-width: 460px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .room-dock { width: 100%; gap: 3px; padding: 6px; border-radius: 21px; }
  .room-dock > button, .room-menu-wrap { flex: 1; min-width: 0; }
  .room-dock > button, .room-menu-wrap > button { flex-direction: column; gap: 5px; padding: 8px 3px; font-size: 12px; min-height: 57px; }
  .room-menu-wrap > button { width: 100%; }
  .room-dock .desktop-destination { display: none; }
  #room-menu { width: min(340px, calc(100vw - 24px)); right: -6px; bottom: calc(100% + 16px); max-height: calc(100dvh - 210px); }
  .room-hint { font-size: 12px; margin-bottom: 12px; }
  .portfolio-open { overflow: visible; background: white; }
  .portfolio-open #room-shell { display: none; }
  #desktop, #desktop.expanded { position: relative; inset: auto; margin: 0; width: 100%; height: auto; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: white; }
  #desktop[open] { animation: none; }
  .app-window { height: auto; min-height: 100dvh; }
  .window-chrome { position: sticky; top: 0; z-index: 3; background: #f5f5f7f2; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: max(8px, env(safe-area-inset-top)) 16px 8px; min-height: 64px; gap: 10px; }
  .window-controls, .window-owner, .sidebar, #window-title { display: none; }
  .mobile-back { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px 0 0; color: var(--blue); font-size: 16px; }
  .mobile-back > span { font-size: 30px; font-weight: 300; line-height: 1; }
  .mobile-menu { display: block; margin-left: auto; min-width: 0; max-width: calc(100% - 88px); }
  .mobile-menu select { background: #e9e9ed; color: var(--ink); border: 0; border-radius: 10px; padding: 10px 12px; min-height: 44px; font-size: 16px; max-width: 100%; }
  .window-layout { display: block; flex: 1; }
  .window-main { display: block; }
  #document { overflow: visible; padding: 30px 24px max(56px, env(safe-area-inset-bottom)); min-height: calc(100dvh - 64px); }
  #document h2 { font-size: 36px; margin: 18px 0 26px; }
  #document h3 { font-size: 24px; }
  #document h4 { font-size: 21px; }
  #document .eyebrow { font-size: 12px; letter-spacing: .07em; }
  #document .document-lead { font-size: 19px; }
  #document p, #document li { line-height: 1.65; }
  .overview-image { aspect-ratio: 1.3 / 1; }
  .overview-links { gap: 12px; }
  .spec-grid { grid-template-columns: 1fr; }
  #desktop.is-terminal { position: fixed; top: var(--viewport-top, 0px); height: var(--viewport-height, 100dvh); min-height: 0; overflow: hidden; }
  .is-terminal .app-window { height: 100%; min-height: 0; }
  .is-terminal .window-layout { display: flex; flex: 1; min-height: 0; }
  .is-terminal .window-main { display: flex; flex: 1; min-height: 0; }
  #terminal-mount .status-bar { padding: 6px 16px; gap: 10px; }
  #terminal-mount .right { display: none; }
  .term-exit { margin-left: auto; }
  #terminal-mount .viewport { padding: 20px 16px; font-size: 14px; }
  #terminal-mount .input-area { padding: 8px 16px; }
  #terminal-mount .hint { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 360px) {
  .room-identity { padding: 10px 11px; }
  .identity-name { font-size: 14px; }
  .room-identity small { font-size: 12px; }
  .lighting-toggle { width: 46px; padding: 10px; justify-content: center; }
  #lighting-label { display: none; }
  #document { padding-left: 20px; padding-right: 20px; }
  #document h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mug-steam { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}