/* Site chrome stays quiet; the experiment is a tabletop of physical objects. */
.desk-page { max-width: 1240px; margin: auto; padding: 1.5rem max(1.25rem, env(safe-area-inset-right)) 5rem max(1.25rem, env(safe-area-inset-left)); }
.desk-header { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 2rem; margin-bottom: 1.8rem; }
.desk-header .back { grid-column: 1 / -1; width: fit-content; }
.desk-intro .trial-heading { color: var(--fg); }
.connection { align-self: end; margin: 0 0 .2rem; max-width: 19rem; color: var(--muted); font: 11.5px/1.6 var(--mono); text-align: right; }
.connection::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: .6rem; border: 1px solid var(--muted); border-radius: 50%; }
.connection[data-state="live"]::before { background: var(--accent); border-color: var(--accent); }
.desk { position: relative; isolation: isolate; width: 100%; height: clamp(420px, 56vw, 660px); overflow: hidden; border: 1px solid #34332e; border-radius: 2px; background: #191a18; background-image: radial-gradient(ellipse at 40% 40%, #272824 0, #191a18 70%); }
.desk::after { content: ''; position: absolute; inset: 0; z-index: 1000002; border: 12px solid #0000000c; pointer-events: none; }
.desk-caption { position: absolute; left: 1.3rem; bottom: 1rem; color: #75756b; font: 10.5px var(--mono); letter-spacing: .06em; pointer-events: none; }
.desk-light { position: absolute; inset: 0; z-index: 1000001; pointer-events: none; background: radial-gradient(ellipse at var(--light-x, 90%) var(--light-y, 12%), #ffd58a26, transparent 65%); opacity: 0; transition: opacity .25s; mix-blend-mode: screen; }
.desk[data-light="on"] .desk-light { opacity: 1; }
.object { position: absolute; top: 0; left: 0; width: var(--object-width, 24%); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.object.is-dragging { cursor: grabbing; }
.object-surface { position: relative; transform: rotate(var(--angle, 0deg)) scale(var(--size, 1)); transform-origin: center; filter: drop-shadow(2px 6px 5px #0005); }
.object.is-selected .object-surface::after { content: ''; position: absolute; inset: -5px; border: 1px dashed #c9c6b288; pointer-events: none; }
.object:focus-visible .object-surface::after { border: 2px solid #eae5da; }
.print { max-width: 275px; min-width: 130px; }
.print--stairs { --object-width: 20%; max-width: 228px; min-width: 118px; }
.print--window { --object-width: 25%; max-width: 280px; }
.print .object-surface { padding: 10px 10px 0; background: #ddd9cc; color: #48483f; }
.print img { display: block; width: 100%; pointer-events: none; }
.print-label { display: block; padding: 9px 0 11px; font: 10.5px/1.4 var(--mono); letter-spacing: .02em; }
.print-back { display: none; position: absolute; inset: 0; padding: 1.2rem; background: #ddd9cc; color: #48483f; }
.print-back > span { font: 10.5px/1.6 var(--mono); }
.print-back p { font: 16px/1.6 var(--serif); }
.object[data-flipped="true"] .print-front { visibility: hidden; }
.object[data-flipped="true"] .print-back { display: flex; flex-direction: column; justify-content: space-between; }
.contact-sheet { --object-width: 27%; max-width: 305px; min-width: 155px; }
.contact-sheet .object-surface { padding: 12px 12px 0; background: #171713; color: #b3ad97; }
.contact-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.contact-frames img { width: 100%; height: auto; aspect-ratio: .83; object-fit: cover; border: 1px solid #9a917766; pointer-events: none; }
.contact-sheet .print-back { background: #171713; color: #b3ad97; }
.desk-note { --object-width: 17%; max-width: 195px; min-width: 130px; }
.desk-note .object-surface { min-height: 180px; padding: 18px 16px 4px; background: #cac5a9; color: #4c4d40; }
.desk-note p { margin: .6rem 0 .8rem; font: 16px/1.45 var(--serif); }
.desk-note .print-back { background: #cac5a9; }
.note-pin { position: absolute; left: 50%; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #5b5c53; box-shadow: 1px 1px 2px #0005; }
.coffee-cup { --object-width: 13%; max-width: 145px; min-width: 85px; aspect-ratio: 1; }
.coffee-cup .object-surface { width: 100%; height: 100%; }
.saucer { position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle, #d7d5c8 56%, #bbb9af 62%, #e0ded3 69%, #a5a49a 75%, #cfccc0 90%); }
.cup { position: absolute; inset: 16%; border-radius: 50%; background: #dddacd; border: 6px solid #e0ded2; box-shadow: 2px 2px 5px #0005; }
.coffee { position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #7b6246 0, #34251a 48%, #201b15 85%); box-shadow: inset 1px 2px 5px #0009; }
.cup-handle { position: absolute; right: -4%; top: 36%; width: 25%; height: 28%; border: 7px solid #d7d5c8; border-radius: 40%; background: #0000; }
.coffee-cup[data-flipped="true"] .coffee { background: #c8c5b9; box-shadow: inset 1px 2px 5px #0003; }
.desk-lamp { --object-width: 14%; max-width: 155px; min-width: 90px; aspect-ratio: .68; }
.desk-lamp .object-surface { height: 100%; }
.lamp-base { position: absolute; bottom: 1%; left: 12%; width: 76%; height: 24%; background: radial-gradient(ellipse at 40% 25%, #55594f, #2f332c 70%); border: 1px solid #666a5c; border-radius: 50%; }
.lamp-arm { position: absolute; left: 47%; bottom: 15%; width: 7%; height: 64%; background: linear-gradient(90deg, #2e322b, #686b5e, #353a2f); transform: rotate(-16deg); border-radius: 3px; }
.lamp-shade { position: absolute; top: 3%; left: 10%; width: 78%; height: 32%; border-radius: 60% 60% 12% 12%; background: linear-gradient(110deg, #727767, #454b3e 70%); transform: rotate(-12deg); border-bottom: 7px solid #98957f; }
.lamp-switch { position: absolute; bottom: 8%; left: 43%; width: 14%; height: 8%; background: #b0af98; border: 2px solid #777c68; border-radius: 50%; }
.desk-lamp[data-on="true"] .lamp-shade { border-bottom-color: #f4d898; box-shadow: 0 9px 22px #e2bf7555; }
.desk-controls { margin-top: 1.2rem; }
.selection-row, .action-row, .action-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.selection-row { margin-bottom: .75rem; }
.selection-row label, .selection-detail { font: 11.5px/1.5 var(--mono); color: var(--muted); }
.selection-row label { margin-right: .4rem; }
.selection-detail { margin-left: .5rem; }
.desk-controls button, .desk-controls select, dialog button { min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--fg); font: 11.5px/1.5 var(--mono); cursor: pointer; }
.desk-controls select { max-width: 100%; }
.desk-controls button:hover, dialog button:hover { color: #fff; border-color: var(--muted); }
.action-group button { min-width: 44px; padding: .4rem; font-size: 16px; }
.desk-controls button:disabled { opacity: .35; cursor: default; }
#reset-desk { margin-left: auto; color: var(--muted); }
.desk-help, .desk-disclosure, .desk-details { color: var(--muted); font-size: 14.5px; }
.desk-help { margin: .9rem 0 .5rem; }
.desk-disclosure { margin: .5rem 0; }
.desk-disclosure a { color: var(--fg); text-decoration: none; }
.desk-disclosure a:hover { color: #fff; }
.desk-details summary { width: fit-content; cursor: pointer; font: 10.5px/1.6 var(--mono); }
.desk-details p { max-width: 50rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
dialog { max-width: min(28rem, calc(100% - 2rem)); padding: 1.5rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 2px; }
dialog::backdrop { background: #000a; }
dialog h2 { font: 16px var(--mono); margin: 0 0 1rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.no-script { margin: 1rem; color: var(--muted); }
@media (max-width: 640px) {
  .desk-page { padding-top: 1rem; }
  .desk-header { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.2rem; }
  .connection { text-align: left; max-width: none; }
  .desk { height: 570px; }
  .print { --object-width: 38%; min-width: 110px; }
  .print--stairs { --object-width: 32%; min-width: 100px; }
  .contact-sheet { --object-width: 48%; min-width: 130px; }
  .desk-note { --object-width: 35%; min-width: 110px; }
  .desk-note .object-surface { min-height: 170px; padding: 14px 12px 4px; }
  .print .object-surface { padding: 7px 7px 0; }
  .print-label { font-size: 10.5px; padding: 7px 0 8px; }
  .print-back { padding: .75rem; }
  .print-back p { font-size: 14.5px; }
  .coffee-cup { --object-width: 23%; }
  .desk-lamp { --object-width: 25%; }
  .selection-detail { flex-basis: 100%; margin-left: 0; }
  #reset-desk { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .desk-light { transition: none; } }