/* A terminal monitor and four project televisions. Active DOM surfaces remain
   selectable and accessible; WebGL renders the enclosures and lighting. */
.js body {
  background: radial-gradient(ellipse at 50% 25%, #25282a 0%, #141719 52%, #0c0e10 100%);
}
[data-theme="light"].js body {
  background: radial-gradient(ellipse at 50% 15%, #eeefec, #cfd2ce 62%, #b7bcb8);
}
.js .desktop-header { height: 28px; width: calc(100% - 42px); }
.desktop-brand { letter-spacing: .09em; }
.desktop-brand .brand-mark { display: none; }
.desktop-header .availability { font-size: 10px; }
.monitor-stage { display: none; }
.js .monitor-stage { display: block; position: relative; width: 100%; height: calc(100dvh - 46px); isolation: isolate; overflow: clip; }
.scene-loading .monitor-stage { visibility: hidden; opacity: 0; pointer-events: none; }
.monitor-mount {
  position: absolute;
  width: calc(100% - 22px);
  height: calc(100% - 14px);
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 15px 35px;
  border: 1px solid #52585a;
  border-radius: 29px;
  background: linear-gradient(145deg, #474c4d, #24292b 24%, #1c2022 70%, #373c3d);
  box-shadow: inset 0 1px 1px #d6dddc55, inset 1px 0 1px #929d9930,
    0 4px 0 #111516, 0 8px 0 #252a2c, 0 11px 0 #101314, 0 35px 65px #0008;
}
.monitor-screen { position: relative; width: 100%; height: 100%; border-radius: 9px; }
.js .shell {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid #030505;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #060909, 0 0 0 3px #ffffff08, 0 3px 12px #000b;
}
.monitor-screen::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 12px 2px #0004, inset 0 1px 0 #ffffff08;
  background: linear-gradient(118deg, #ffffff02 0%, transparent 25%, transparent 69%, #ffffff03 85%, transparent);
}
.monitor-chin { position: absolute; bottom: 10px; left: 26px; right: 26px; height: 25px; display: flex; justify-content: center; align-items: center; }
.monitor-logo { color: #858c8a; text-shadow: 0 1px 0 #000, 0 -1px 0 #ffffff0a; font-weight: 600; font-size: 22px; letter-spacing: -.12em; }
.monitor-led { position: absolute; right: 0; height: 3px; width: 12px; border-radius: 2px; background: #79ab91; box-shadow: 0 0 5px #8ccaaa45; }
.monitor-webgl, .monitor-dom { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.monitor-webgl { z-index: 2; }
.monitor-dom { z-index: 1; overflow: clip !important; }
.monitor-dom .monitor-screen, .monitor-dom .project-screen { pointer-events: auto; will-change: transform; contain: layout paint; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .monitor-stage[data-renderer="webgl"] { cursor: grab; }
  .monitor-stage.is-turning { cursor: grabbing; }
  .monitor-screen, .project-screen { cursor: auto; }
}
.monitor-stage[data-renderer="webgl"] > .monitor-mount { visibility: hidden; }
.js .desktop-footer { height: 18px; width: calc(100% - 42px); }
#command-hint { font-size: 9px; color: #838c88; }
[data-theme="light"] #command-hint { color: #58635b; }
.bar { min-height: 45px; box-shadow: none; background: var(--panel); }
.bar .id { font-size: 11px; }
.bar .spacer { margin-left: auto; }
.terminal-mark { border: 0; box-shadow: none; background: none; text-shadow: none; width: auto; }
.rail { padding-top: 17px; }
.rail-home { margin-bottom: 21px; }
.workspace { grid-template-rows: 32px minmax(0, 1fr) auto; background: var(--bg); }
.workspace::after { content: none; }
.workspace-tab { background: var(--bg); box-shadow: none; }
.workspace-tab::before { background: var(--line); }
.log { padding: 24px clamp(24px, 3vw, 44px) 26px; }
.intro-top { display: block; padding-bottom: 30px; }
.intro .name { max-width: none; font-size: clamp(34px, 3.65vw, 54px); letter-spacing: -.055em; margin-bottom: 14px; }
.intro .who { max-width: none; font-size: 11px; }
.intro .about { max-width: 78ch; font-size: 13px; }
.intro .intro-path { margin-bottom: 13px; font-size: 11px; }
.intro .cta { margin-top: 20px; padding-top: 17px; width: min(100%, 390px); grid-template-columns: minmax(0, 1fr); }
.intro .cta .k { padding: 11px 14px; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.intro .did-head { font-size: 10px; }
.did-title > button:hover { color: var(--proj-ink); }
.intro .did li { background: none; box-shadow: none; border-color: var(--line); }
.intro .did li::after { content: none; }
.intro .did li:hover { transform: none; background: var(--surface); box-shadow: none; }
.intro .did li b { color: var(--fg); }
.intro .intro-note { font-size: 11px; }
.dock { padding: 8px 16px 9px; }
.dock .chips { gap: 7px; }
.dock .chip { font-size: 10px; }
.prompt-area { padding-top: 10px; padding-bottom: 11px; }
.card.with-stage .pin { min-width: 0; }
.card .links:empty { display: none; }
.shotstrip a { border: 0; border-radius: 3px; }
.shotstrip a:hover { outline: 1px solid var(--dim); }
@media (max-width: 1199px) {
  .js .desktop-header, .js .desktop-footer { width: calc(100% - 36px); }
  .mid { grid-template-columns: 178px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .js .desktop-header { height: 26px; }
  .js .monitor-stage { height: calc(100dvh - 44px); }
  .js .desktop-footer { height: 18px; }
  .mid { grid-template-columns: minmax(0, 1fr); }
  .intro .name { font-size: 41px; }
  .monitor-mount { width: calc(100% - 20px); }
  .rail { padding: 8px 12px; }
}
@media (max-width: 600px) {
  .js .desktop-header { height: 28px; width: calc(100% - 26px); }
  .desktop-header .availability { font-size: 8px; }
  .desktop-brand { font-size: 8px; }
  .js .monitor-stage { height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px)); }
  .monitor-mount { width: calc(100% - 12px); height: calc(100% - 7px); top: 0; padding: 9px 8px 25px; border-radius: 19px; }
  .monitor-chin { height: 16px; bottom: 3px; left: 15px; right: 15px; }
  .monitor-logo { font-size: 14px; }
  .monitor-led { width: 7px; height: 2px; }
  .js .desktop-footer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bar { min-height: 41px; padding-inline: 11px; }
  .bar .id { font-size: 9px; }
  .bar .k { height: 29px; min-width: 30px; min-height: 29px; padding: 6px; }
  .rail { gap: 4px; padding: 7px 8px; }
  .rail-item { font-size: 9px; padding: 8px; min-height: 33px; }
  .rail-item .n { display: none; }
  .workspace { grid-template-rows: 29px minmax(0, 1fr) auto; }
  .log { padding: 19px 15px 25px; }
  .intro .name { font-size: clamp(31px, 9vw, 39px); max-width: 8ch; line-height: 1.1; }
  .intro .who { font-size: 10px; max-width: 42ch; }
  .intro .about { font-size: 12px; }
  .intro .cta { padding-top: 15px; margin-top: 17px; }
  .intro .cta .k { min-height: 44px; flex-direction: row; padding: 9px 11px; gap: 9px; }
  .cta-cmd { white-space: nowrap; font-size: 11px; }
  .cta-note { font-size: 9px; }
  .intro-top { padding-bottom: 26px; }
  .prompt-area { padding: 8px; }
  .prompt { min-height: 43px; }
  .prompt input, .prompt .suggest { font-size: 16px; }
  .prompt input::placeholder { font-size: 11px; }
  .dock { padding: 6px 8px; }
  .dock .chip { height: 31px; font-size: 10px; padding-inline: 10px; }
  .monitor-screen::after { background: none; box-shadow: inset 0 0 7px #0004; }
}
@media (prefers-reduced-motion: reduce) {
  .monitor-stage *, .monitor-stage *::after { scroll-behavior: auto !important; }
}

/* A second, independent screen inside the project display to the viewer's right. */
.tv-mount { display: none; }
.monitor-stage:not([data-renderer="webgl"])[data-view="project"] > .monitor-mount { display: none; }
.monitor-stage:not([data-renderer="webgl"])[data-view="project"] > .tv-mount {
  display: block;
  position: absolute;
  width: min(calc(100% - 24px), calc((100dvh - 140px) * 1.42 + 120px));
  height: calc(100% - 24px);
  left: 50%; top: 6px; transform: translateX(-50%);
  padding: 30px 98px 43px 28px;
  border: 2px solid #777260;
  border-radius: 42px;
  background: linear-gradient(130deg, #736d5b, #464339 24%, #35342d 75%, #5b574a);
  box-shadow: inset 0 2px 2px #dfdcc04d, inset 2px 0 1px #aca59240, 0 5px 0 #252720, 0 10px 0 #3b3b31, 0 20px 40px #0007;
}
.project-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  overflow: hidden;
  border-radius: 30px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 0 0 2px #060909, 0 0 0 4px #ffffff09, 0 1px 12px 5px #0009;
}
.project-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 18px 5px #0005, inset 0 2px 1px #ffffff0a;
  background: linear-gradient(120deg, #ffffff04, transparent 28% 68%, #ffffff03 88%, transparent);
}
.tv-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 24px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 11px;
}
.tv-back {
  display: inline-flex; align-items: center;
  min-height: 33px; padding: 5px 10px;
  border: 1px solid var(--edge-light); border-radius: 6px;
  background: linear-gradient(180deg, var(--key-top), var(--key-bot));
  box-shadow: 0 1px 0 var(--key-lip) inset, 0 2px 0 var(--key-wall);
  color: var(--fg); font: inherit; font-size: 11px; cursor: pointer;
}
.tv-back:hover { border-color: var(--dim); }
.tv-back:active { transform: translateY(1px); }
#project-title { color: var(--mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-log { min-width: 0; min-height: 0; overflow: hidden auto; padding: 27px 28px 34px; overscroll-behavior: contain; }
.tv-log > .block, .tv-log > .project-session > .block { padding: 0; margin: 0 0 24px; border: 0; background: none; box-shadow: none; animation: none; }
.tv-log .card { gap: 24px; }
.tv-log .card .claim { font-size: clamp(23px, 2.3vw, 33px); line-height: 1.22; }
.tv-log .card .pin { min-width: 0; }
.tv-log .card p { max-width: 62ch; }
.tv-log .card .links .k { padding: 8px 11px; }
.tv-log .card .links [data-run^="run "] { display: none; }
.tv-log .card .meta { line-height: 1.8; }
.tv-log .card.dev-wide .pin { width: 100%; grid-row: 1; }
.tv-log .card.dev-wide > div:first-child { grid-row: 2; }
.project-screen button:focus-visible, .project-screen a:focus-visible { outline: 2px solid var(--proj-ink); outline-offset: 3px; }
.card .chatsim {
  --fg: #e0e5e1; --mid: #afb8b2; --dim: #85938a; --line: #303832;
  color: var(--fg); background: #111613;
}
.tv-fallback-controls { position: absolute; width: 44px; top: 50px; bottom: 42px; right: 26px; display: flex; flex-direction: column; align-items: center; gap: 25px; }
.tv-fallback-controls i { width: 39px; height: 39px; border-radius: 50%; border: 4px solid #aaa28c; background: linear-gradient(140deg, #7b786a, #3a3c35); box-shadow: 2px 3px 6px #0009; }
.tv-fallback-controls i::after { content: ''; display: block; height: 10px; width: 2px; background: #181c18; margin: 3px auto; }
.tv-fallback-controls span { width: 33px; height: 150px; margin-top: auto; background: repeating-linear-gradient(0deg, #1a201a 0 3px, transparent 3px 11px); border-radius: 5px; }
.tv-fallback-logo { position: absolute; bottom: 9px; left: calc(50% - 50px); font-size: 21px; font-weight: 600; letter-spacing: -.1em; color: #ada994; text-shadow: 0 1px 0 #111; }
.monitor-stage[data-view="project"] + .desktop-footer { visibility: hidden; }
@media (min-width: 1100px) {
  .tv-log .card.with-stage { grid-template-columns: minmax(0, 1fr) minmax(230px, 32%); }
  .tv-log .card.with-stage.dev-wide { grid-template-columns: minmax(0, 1fr) 0rem; }
  .tv-log .card .pin { width: auto; position: sticky; top: 0; }
  .tv-log .card.dev-wide .pin { position: static; width: 100%; }
}
@media (max-width: 1099px) {
  .tv-log .card.with-stage { grid-template-columns: minmax(0, 1fr); }
  .tv-log .card .pin { width: min(100%, 350px); position: static; }
}
@media (max-width: 600px) {
  .monitor-stage:not([data-renderer="webgl"])[data-view="project"] > .tv-mount {
    width: calc(100% - 12px); height: calc(100% - 10px); top: 2px;
    border-radius: 27px; padding: 12px 11px 27px;
  }
  .project-screen { border-radius: 17px; }
  .tv-toolbar { padding: 9px 12px; gap: 8px; font-size: 10px; }
  .tv-back { min-height: 36px; padding-inline: 9px; font-size: 11px; }
  .tv-log { padding: 20px 16px 26px; }
  .tv-log .card { gap: 23px; }
  .tv-log .card .claim { font-size: 25px; }
  .tv-log .card .links .k { font-size: 10px; }
  .project-screen::after { background: none; box-shadow: inset 0 0 10px 2px #0004; }
  .tv-fallback-controls { display: none; }
  .tv-fallback-logo { font-size: 14px; bottom: 3px; left: calc(50% - 7px); }
}

/* Product pages belong to the screen; the cabinet never crops their layout. */
.monitor-screen, .project-screen { backface-visibility: visible; }
.monitor-stage:not([data-renderer="webgl"])[data-view="project"] > .tv-mount { width: calc(100% - 24px); }
.project-screen[data-project="chatair"] { border-radius: 21px; }
.project-screen[data-project="bot"] { border-radius: 13px; }
.tv-toolbar { gap: 12px; }
.tv-log .card.with-stage, .card.with-stage { grid-template-columns: minmax(0, 1fr); }
.card .product-name { margin: 13px 0 7px; font: 500 clamp(29px, 3.3vw, 46px)/1.1 var(--mono); letter-spacing: -.065em; }
.card .claim, .tv-log .card .claim { margin: 12px 0 17px; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.04em; line-height: 1.3; }
.card .meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px 16px; font-size: 10px; }
.card .meta span:last-child { color: var(--proj-ink); }
.card .product-features { list-style: none; padding: 0; margin: 20px 0; color: var(--mid); font-size: 12px; }
.product-features li { padding: 8px 0 8px 14px; border-top: 1px solid var(--line); position: relative; }
.product-features li::before { content: '·'; position: absolute; left: 0; color: var(--proj-ink); }
.card .project-engineering { grid-column: 1 / -1; grid-row: auto; order: 3; min-width: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.project-engineering summary { cursor: pointer; padding: 16px 0; font-size: 12px; color: var(--fg); }
.project-engineering .project-role { color: var(--mid); font-size: 11px; }
.card .project-engineering .stackgraph { max-width: 650px; }
.card .project-engineering .langwrap { max-width: 650px; }
.card .preview-caption { font-size: 10px; color: var(--dim); margin: 0 0 10px; }
.tv-log .card .pin, .card .pin { width: 100%; position: static; grid-row: auto; order: 2; align-self: start; }
.card .project-copy { order: 1; min-width: 0; }
.card .links { flex-wrap: wrap; gap: 10px; }
.card .links .primary-project { color: var(--fg); }
.device-wrap { min-width: 0; width: 100%; }
.device { width: 100%; box-sizing: border-box; transition: none; border-radius: 9px; }
.device .sizer { margin-inline: auto; overflow: hidden; }
.device iframe { display: block; max-width: none; min-width: 0; transition: none; }
.devbar { flex-wrap: wrap; align-items: center; gap: 8px; }
.devbar .k, .preview-tabs .k { min-height: 34px; padding: 6px 9px; font-size: 10px; }
.devbar .k[aria-pressed="true"], .preview-tabs .k[aria-pressed="true"] { color: var(--fg); border-color: var(--mid); background: var(--surface); }
.preview-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chatair-preview .stage { background: #10121a; }
.chatair-preview .stage > img { width: 100%; height: 100%; object-fit: contain; }
.project-copy .product-summary { color: var(--mid); line-height: 1.8; }
.card[data-project="channel"] .pin { width: 100%; }
.card .stage-phone { width: 100%; margin-inline: auto; }
@media (min-width: 1000px) {
  .tv-log .card.with-stage:not([data-project="channel"]) { grid-template-columns: minmax(0, 1fr) minmax(280px, 39%); gap: 28px 40px; }
  .tv-log .card.with-stage:not([data-project="channel"]) .pin { grid-column: 2; grid-row: 1; }
  .tv-log .card[data-project="channel"] .project-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); gap: 0 36px; }
  .tv-log .card[data-project="channel"] .meta, .tv-log .card[data-project="channel"] .product-name { grid-column: 1; }
  .tv-log .card[data-project="channel"] .claim { grid-column: 1; }
  .tv-log .card[data-project="channel"] .product-summary { grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0; }
  .tv-log .card[data-project="channel"] .product-features { grid-column: 1 / -1; display: flex; gap: 24px; margin: 6px 0 0; }
  .tv-log .card[data-project="channel"] .product-features li { flex: 1; font-size: 11px; }
  .tv-log .card[data-project="channel"] .links:empty { display: none; }
}
@media (max-width: 600px) {
  .monitor-stage:not([data-renderer="webgl"])[data-view="project"] > .tv-mount { width: calc(100% - 12px); }
  .project-screen[data-project] { border-radius: 17px; }
  .card .product-name { font-size: 32px; }
  .tv-log .card .claim { font-size: 22px; }
  .card .product-features { font-size: 11px; }
  .card .meta { font-size: 9px; }
  .card .project-engineering .stackgraph { padding: 14px 4px; }
  .devbar .devnote { font-size: 9px; letter-spacing: 0; }
}

/* Small machined modules and flexible cables; no endlessly moving signal dashes. */
.stackgraph {
  --node-top: #464c50; --node-bottom: #22272c; --node-rim: #747c7d; --node-side: #111619;
  --cable: #4f5a60; --cable-light: #98a8ad;
  background: radial-gradient(ellipse at 42% 18%, #ffffff06, transparent 68%), var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 18px 12px; box-shadow: inset 0 1px 1px #ffffff06;
}
[data-theme="light"] .stackgraph {
  --node-top: #fafaf6; --node-bottom: #c2c8c5; --node-rim: #fff; --node-side: #828e8c;
  --cable: #8a9697; --cable-light: #e8eeeb;
}
.graph { overflow: visible; }
.gedge, .cable-shadow, .cable-highlight { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gedge { stroke: var(--cable); stroke-width: 1.4; stroke-dasharray: none; animation: none; }
.cable-shadow { stroke: #0004; stroke-width: 2.2; transform: translateY(1.2px); }
.cable-highlight { stroke: var(--cable-light); stroke-width: .23; transform: translateY(-.25px); opacity: .6; }
.node-face { stroke: var(--node-rim); stroke-width: .24; }
.node-glint { fill: none; stroke: #ffffff45; stroke-width: .3; }
.gnode .mark path { fill: var(--fg); }
.gnode text { fill: var(--mid); font-size: 2.7px; letter-spacing: 0; }
.gnode > .node-body, .gnode > .mark { transition: transform .18s ease; }
.gnode:hover > .node-body, .gnode:hover > .mark, .gnode.held > .node-body, .gnode.held > .mark { transform: translateY(-.6px); }
.gnode.held .node-face, .gnode:hover .node-face { stroke: var(--proj-ink); stroke-width: .45; }
@media (prefers-reduced-motion: reduce) { .gnode > .node-body, .gnode > .mark { transition: none; } }
#project-title.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#project-switch { max-width: 55%; min-height: 35px; padding: 5px 26px 5px 9px; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; font: 11px var(--mono); cursor: pointer; }
#project-switch:focus-visible { outline: 2px solid var(--proj-ink); outline-offset: 2px; }

@media (min-width: 1000px) {
  .tv-log .stage-phone { height: min(640px, calc(100dvh - 320px)); width: min(100%, 350px); max-width: 100%; aspect-ratio: auto; }
  .tv-log .chatair-preview .stage-phone { height: min(620px, calc(100dvh - 365px)); }
}
.card.preview-focused .project-copy, .card.preview-focused .project-engineering, .card.preview-focused .preview-caption { display: none !important; }
.card.preview-focused .pin { grid-column: 1 / -1; grid-row: 1; }
.devbar .preview-expand { margin-left: auto; }
@media (max-width: 600px) { .devbar .preview-expand { margin-left: 0; } }

/* The screen is a surface in a room. Glare belongs to glass, not the whole page. */
.project-screen { container: project-display / inline-size; }
.monitor-stage[data-renderer="webgl"], .monitor-stage.is-turning { cursor: auto; }
.room-scene .project-screen::after { background: linear-gradient(112deg, #cde1db08, transparent 36% 76%, #aab6ae04); }
.room-scene .tv-log { padding: 24px; }
.room-scene .tv-log .card.with-stage:not([data-project="channel"]) { grid-template-columns: minmax(0, 1fr) minmax(245px, 36%); gap: 24px; }
.room-scene .tv-log .card .product-name { font-size: 34px; }
.room-scene .tv-log .card .claim { font-size: 22px; }
.room-scene .tv-log .stage-phone { width: 100%; height: 410px; }
.room-scene .tv-log .chatair-preview .stage-phone { height: 380px; }
.room-scene .tv-log .card[data-project="channel"] .project-copy { display: block; }
.room-scene .tv-log .card[data-project="channel"] .product-features { display: block; }
.room-scene .project-screen { border-radius: 39px; }
.room-scene .project-screen[data-project="bot"] { border-radius: 30px; }
.room-scene .tv-log .card p { font-size: 15px; line-height: 1.75; }
.room-scene .tv-log .card .claim { font-size: 23px; line-height: 1.3; }
.room-scene .tv-log .card .preview-caption { font-size: 11px; }
.room-scene .tv-log .product-features { font-size: 13px; }
.room-scene .tv-toolbar, .room-scene .tv-back, .room-scene #project-switch { font-size: 13px; }
.room-scene .tv-log .devbar .k { font-size: 12px; }
.room-scene[data-tv-model="authored"] .project-screen { border-radius: 7px; box-shadow: inset 0 0 12px #0007; }
.room-scene[data-tv-model="authored"] .project-screen::after { box-shadow: inset 0 0 14px 3px #0008; }
.room-scene[data-tv-model="authored"] .tv-toolbar { padding: 10px 15px; }
.room-scene[data-tv-model="authored"] .tv-log { padding: 20px; }
.room-scene .tv-log .card.with-stage:not([data-project="channel"]) .pin { grid-column: 2; grid-row: 1; width: 100%; }
@container project-display (max-width: 740px) {
  .room-scene .tv-log .card.with-stage:not([data-project="channel"]) { grid-template-columns: minmax(0, 1fr); }
  .room-scene .tv-log .card.with-stage:not([data-project="channel"]) .pin { grid-column: 1; grid-row: auto; max-width: 400px; justify-self: center; }
}

/* Give the product guide its own usable viewport, without another phone bezel. */
.guide-preview { width: 100%; min-width: 0; }
.guidebar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.guidebar .k { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.guide-preview > iframe { width: min(100%, 680px); margin-inline: auto; height: var(--guide-height, 534px); border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.room-scene .tv-log .card.with-stage[data-project="befit"] { grid-template-columns: minmax(0, 1fr) minmax(330px, 52%); }
@container project-display (max-width: 740px) {
  .room-scene .tv-log .card.with-stage[data-project="befit"] { grid-template-columns: minmax(0, 1fr); }
  .room-scene .tv-log .card.with-stage[data-project="befit"] > .pin { max-width: none; }
}

/* Real scene controls sit over their projected physical counterparts. */
.tv-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 12; border-radius: inherit; pointer-events: none; background: #040607; }
.seat-return { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 12px 20px; color: #d2dcd5; background: #19221fec; border: 1px solid #71877a; border-radius: 5px; font: 12px var(--mono); cursor: pointer; box-shadow: 0 4px 16px #0005; }
.seat-return:hover, .seat-return:focus-visible { background: #2b3b32; outline: 2px solid #adc8b5; outline-offset: 3px; }
.bar .seat-away { display: none; }
@media (any-pointer: coarse), (max-width: 600px) {
  .bar .seat-away { display: inline-flex; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; }
}
.duck-hit { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: 35%; background: transparent; box-shadow: none; outline: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.duck-hit[hidden] { display: none; }
.duck-hit[aria-pressed="true"] { cursor: grabbing; }
.duck-hit:focus-visible:not([data-pointer-focus]) { outline: 2px solid #e2c568; outline-offset: 4px; }
@media (max-width: 600px) { .seat-return { left: auto; right: 12px; transform: none; min-height: 44px; } }
.tv-static[hidden], .seat-return[hidden] { display: none; }
.monitor-stage[data-seat="away"] .monitor-dom .monitor-screen { cursor: pointer; }

/* Flat-panel project display: the cabinet no longer takes a third of its width. */
.monitor-stage[data-tv-model="plasma"] .project-screen { border-radius: 5px; box-shadow: inset 0 0 8px #0005; }
.monitor-stage[data-tv-model="plasma"] .tv-toolbar { min-height: 48px; padding: 8px 14px; gap: 8px; }
.tv-toolbar #project-switch { margin-left: auto; }
.tv-next { min-width: 36px; justify-content: center; }
.monitor-stage[data-tv-model="plasma"] .tv-log { padding: 14px 18px; }
.monitor-stage[data-tv-model="plasma"] .project-screen::after { border-radius: 5px; box-shadow: inset 0 0 8px #0004; }
.monitor-stage:not([data-renderer="webgl"])[data-view="project"] > .tv-mount { width: calc(100% - 24px); padding: 10px 10px 26px; border: 2px solid #444b49; border-radius: 14px; background: #272e30; }
.guide-preview > iframe { display: block; }
.project-tools:empty { display: none; }
.project-tools .guidebar { margin: 0; }
.project-tools .guidebar .k { font-size: 11px; }
@container project-display (max-width: 740px) {
  .card.with-stage[data-project="befit"] > .pin { grid-column: 1; }
}

/* The guide can put notes beside the demo; the application itself stays portrait. */
.guide-inline > iframe { display: block; height: var(--guide-height, 620px); }

/* The entire selected-project card opens its preview; more/less stays separate. */
.intro .did li[data-run] { cursor: pointer; }
.intro .did li:has(.did-title > button:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }