:root { color: #27352d; background: #e9e4d4; font-family: Georgia, "Times New Roman", serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto minmax(420px, 1fr) auto auto; gap: 12px; padding: 16px; }
.topbar { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.eyebrow { margin: 0; color: #6b765f; font: 600 .76rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 2px 0 0; font-size: clamp(2rem, 5vw, 4rem); font-weight: 500; }
h2 { margin: 0 0 8px; font: 600 .78rem/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#source-label { margin: 0; color: #59685d; }
.version-nav { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 6px; font: 600 .72rem/1.2 system-ui, sans-serif; }
.version-nav a { color: #456044; text-underline-offset: 3px; }
.rp { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 10px; min-width: 100px; text-align: right; font-family: system-ui, sans-serif; }
.rp span { font-size: .7rem; letter-spacing: .1em; }
.rp output { font-size: 2rem; font-weight: 700; }
.rp strong { grid-column: 2; min-height: 1.2em; color: #4d7b42; }
.scene-shell { position: relative; overflow: hidden; border: 1px solid rgba(38,52,45,.28); border-radius: 18px; background: #eee9d8; box-shadow: 0 16px 45px rgba(39,53,45,.14); }
#scene { width: 100%; height: 100%; display: block; touch-action: none; outline-offset: -4px; }
.scene-copy { position: absolute; left: 14px; bottom: 12px; display: grid; gap: 2px; max-width: min(580px, 80%); padding: 8px 11px; border-radius: 10px; background: rgba(247,243,226,.86); backdrop-filter: blur(7px); }
.scene-copy span { font: .75rem/1.3 system-ui, sans-serif; color: #58655a; }
#local-feedback { position: absolute; top: 14px; left: 50%; translate: -50% 0; min-height: 2em; padding: 7px 12px; border-radius: 999px; background: rgba(247,243,226,.9); font: 600 .82rem/1.2 system-ui, sans-serif; opacity: 0; transition: opacity .2s; }
#local-feedback[data-visible="true"] { opacity: 1; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.control-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px; border: 1px solid rgba(101,114,99,.28); border-radius: 999px; }
.browser-save-tools { display: contents; }
.control-readout { padding: 0 8px; font: 600 .78rem/1.2 system-ui, sans-serif; color: #536158; white-space: nowrap; }
.controls button { border: 1px solid #657263; border-radius: 999px; padding: 8px 13px; color: #27352d; background: #f4efdf; cursor: pointer; }
.controls button[aria-pressed="true"] { color: #f8f5e9; background: #4e704a; }
.controls button:disabled { opacity: .45; cursor: progress; }
.control-hint { margin: -5px 4px 0; color: #667267; font: .72rem/1.35 system-ui, sans-serif; }
.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 18px; padding: 8px 2px 2px; }
#event-feed { margin: 0; padding-left: 1.5rem; display: grid; gap: 4px; font: .88rem/1.35 system-ui, sans-serif; }
.truth { font: .82rem/1.45 system-ui, sans-serif; color: #536158; }
.truth p { margin: 4px 0 9px; }
#status[data-kind="error"] { color: #9b4439; font-weight: 700; }
@media (max-width: 720px) { .app-shell { padding: 10px; grid-template-rows: auto minmax(360px, 62vh) auto auto; } .lower { grid-template-columns: 1fr; } .topbar { align-items: start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }