@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Manrope:wght@400;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#eee3c9;color:#354438;font:13px Manrope,sans-serif;overflow:hidden}header{height:48px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#fff9ed;border-bottom:1px solid #d5cbb5}strong{font:600 22px Fraunces,Georgia;flex:1}strong small{font:10px Manrope;letter-spacing:.1em;margin-left:10px;color:#777d6d}button,input{font:inherit;color:inherit}button{border:1px solid #d5ceb9;border-radius:10px;background:#fffaf0;padding:7px 10px;cursor:pointer}button:hover{background:#e8e7cc}button[aria-pressed=true]{background:#b44b32;color:#fff9ed;border-color:#b44b32}.modes{display:flex;gap:4px}.icon,#settings{width:32px;height:32px;padding:0;font-size:19px;background:#eee9d5;border:0}#world{position:absolute;inset:48px 0 0}canvas{display:block;width:100%;height:100%;touch-action:none}#panel{position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff9ed;border-top:1px solid #d5cbb5;display:flex;align-items:center;justify-content:center;gap:20px;padding:6px 12px}#panel[hidden]{display:none}body:has(#panel:not([hidden])) #world{bottom:70px}.profiles{display:flex;gap:5px}.profile{position:relative;width:116px;height:52px;padding:0;overflow:hidden;background:#eee9d5}.profile svg{position:absolute;height:100%;width:100%;inset:0;fill:#b4be95;stroke:#71815b;stroke-width:1.5}.profile[aria-pressed=true] svg{fill:#d78f60;stroke:#f5c38e}.profile span{position:relative;font-weight:700;font-size:11px;text-shadow:0 1px 4px #fff9ed}.profile[aria-pressed=true] span{text-shadow:0 1px 4px #713a21}.sliders{display:flex;gap:20px}.sliders label{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.sliders input{width:100px;margin:0;accent-color:#b44b32;height:28px}.sliders output{width:46px;font-size:11px;font-variant-numeric:tabular-nums}footer{position:absolute;bottom:10px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}body:has(#panel:not([hidden])) footer{bottom:80px}footer>div{background:#fff9eee0;border-radius:10px;padding:7px 10px;font-size:11px}footer small{display:block;font-size:10px;color:#697361;margin-top:2px}footer button{pointer-events:auto;font-size:11px;padding:7px}.dot{display:inline-block;width:6px;height:6px;background:#77975d;border-radius:50%;margin-right:6px}#error{position:absolute;top:52px;left:12px;background:#fff1dd;color:#9f3024}#error:empty{display:none}@media(max-width:780px){#panel{height:104px;flex-direction:column;gap:2px;padding:5px 10px}.profiles{width:100%}.profile{flex:1;width:auto;height:48px}.sliders{width:100%;gap:12px}.sliders label{flex:1;min-width:0;gap:5px}.sliders input{width:0;flex:1;min-width:35px}.sliders output{width:39px;font-size:10px}body:has(#panel:not([hidden])) #world{bottom:104px}body:has(#panel:not([hidden])) footer{bottom:114px}strong small{display:none}header{padding:0 8px;gap:4px}strong{font-size:20px}.modes button{font-size:11px;padding:7px}.icon,#settings{width:28px}}

.live-status{margin-left:auto;text-align:right;line-height:1.25;min-width:0}.live-status b{display:block;font-size:11px}.live-status small{display:block;font-size:9px;color:#697361;white-space:nowrap}header strong{flex:1}footer{justify-content:flex-end}@media(max-width:700px){header strong{display:none}.live-status{flex:1;margin:0;text-align:left}.live-status b{font-size:10px}.live-status small{font-size:8px}.modes button{padding:6px 5px;font-size:10px}header{gap:3px}.icon,#settings{width:26px;flex-shrink:0}}

/* Floating inset controls live inside the full-height viewport. */
#world{top:0}header{position:absolute;z-index:3;top:10px;right:10px;left:auto;width:auto;height:44px;border:1px solid #d5ceb9;border-radius:14px;padding:5px 7px;box-shadow:0 3px 14px #42341e12;background:#fff9edf2}header strong{display:none}.live-status{margin:0 7px 0 3px;text-align:left}.icon,#settings,#fit{display:inline-flex;align-items:center;justify-content:center}button span[hidden]{display:none}#panel{left:10px;right:10px;bottom:10px;border:1px solid #d5ceb9;border-radius:14px}body:has(#panel:not([hidden])) #world{bottom:0}body:has(#panel:not([hidden])) footer{bottom:90px}footer{bottom:10px}#error{top:62px}@media(max-width:780px){header{max-width:calc(100vw - 20px);gap:3px}.live-status small{max-width:135px;overflow:hidden;text-overflow:ellipsis}.live-status{margin-right:3px}.modes button{padding:6px 4px;font-size:10px}.icon,#settings{width:26px}body:has(#panel:not([hidden])) #world{bottom:0}body:has(#panel:not([hidden])) footer{bottom:124px}}

/* Scene annotation, separate from interactive toolbar. */
.live-status{position:absolute;top:18px;left:18px;right:auto;margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0;text-align:left;pointer-events:none;z-index:2;line-height:1.4}.live-status b{font-size:14px;font-weight:700}.live-status small{font-size:11px;color:#65705d;max-width:none;overflow:visible;text-overflow:clip}header{z-index:3}@media(max-width:700px){.live-status{top:64px;left:14px;margin:0}.live-status b{font-size:13px}.live-status small{font-size:10px;max-width:none}}
/* One top alignment line for annotation and controls at every width. */
.live-status{top:14px;left:14px}
@media(max-width:700px){.live-status{top:14px;left:14px;max-width:calc(100vw - 244px)}.live-status small{white-space:normal;line-height:1.3}.live-status b{line-height:1.35}}

header{gap:5px;padding:5px 8px}header .icon,header #settings{background:transparent;border:0;border-radius:6px;color:#475343;width:28px;height:30px}header .icon:hover,header #settings:hover{background:#e7e4d2}header .icon svg,header #settings svg{width:17px;height:17px}#lighting{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px 8px 4px 3px;border-right:1px solid #ded7c5;border-radius:0;font-size:11px;min-width:126px;justify-content:space-between}.toggle-track{display:block;width:27px;height:16px;border-radius:12px;background:#9ba28c;padding:2px}.toggle-knob{display:block;width:12px;height:12px;border-radius:50%;background:#fffcf3;transform:translateX(0);transition:transform .15s}#lighting[aria-checked=true] .toggle-track{background:#b44b32}#lighting[aria-checked=true] .toggle-knob{transform:translateX(11px)}@media(max-width:700px){.live-status{max-width:calc(100vw - 253px)}}

#lighting{border:1px solid #cec4a9;border-radius:999px;background:#f2ecd9;padding:6px 10px;min-height:32px;cursor:pointer}#lighting:hover{background:#e8dfc4}#lighting:focus-visible{outline:2px solid #b44b32;outline-offset:2px}#lighting[aria-checked=true]{background:#f3e3ce;border-color:#d3ae86}

#inspection{position:absolute;z-index:4;top:64px;right:10px;width:242px;max-width:calc(100vw - 28px);padding:13px 15px;background:#fff9eef2;border:1px solid #d5ceb9;border-radius:12px;box-shadow:0 4px 16px #42341e12;animation:unfurl .16s ease-out;transform-origin:top right}#inspection[hidden]{display:none}#inspection h2{font:600 19px Fraunces,Georgia;margin:4px 20px 6px 0}#inspection>small{font-size:10px;color:#697361}#inspection p{font-size:12px;line-height:1.5;margin:0 0 9px}#inspect-live{font-size:10px;color:#65705d;line-height:1.5;border-top:1px solid #ded8c7;padding-top:7px}#inspect-live:empty{display:none}#close-inspection{position:absolute;right:6px;top:6px;border:0;background:none;font-size:20px;padding:2px 6px}@keyframes unfurl{from{opacity:0;transform:translateY(-5px) scaleY(.93)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){#inspection{animation:none}}

#inspection{width:236px;padding:10px;max-height:calc(100vh - 190px);overflow:auto}#inspect-hero{height:116px;border-radius:7px;overflow:hidden;background:#eee8d6}#inspect-hero canvas{width:100%;height:116px;pointer-events:none}#inspection h2{font-size:18px;margin:9px 0 6px}#close-inspection{z-index:1;background:#fff9ede8;border-radius:50%;width:24px;height:24px;font-size:18px;line-height:18px}.inspect-actions{display:flex;justify-content:space-between}.inspect-actions button{padding:4px 2px;border:0;background:none;font-size:11px;color:#65705d}#inspect-details{margin-top:9px;border-top:1px solid #ded8c7;padding-top:9px}#inspect-details p{margin:5px 0;font-size:11px}#inspect-details small{font-size:10px;color:#697361}#asset-dialog{width:330px;max-width:calc(100vw - 30px);background:#fff9ed;color:#354438;border:1px solid #d5ceb9;border-radius:14px;padding:22px}#asset-dialog::backdrop{background:#24352a38}#asset-dialog h2{font:22px Fraunces,Georgia;margin-top:0;padding-right:18px}#asset-info{white-space:pre-line;font-size:12px;line-height:1.8}#asset-dialog small{font-size:10px;color:#697361}#close-asset{position:absolute;right:8px;top:8px;border:0;background:none;font-size:20px;padding:3px 7px}

#inspection{padding-top:23px}#close-inspection,#close-asset{position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%);width:52px;height:22px;padding:0;border:0;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;cursor:pointer}#close-inspection span,#close-asset span{display:block;width:27px;height:5px;background:#b1b39c;border-radius:999px;transition:background .12s,width .12s}#close-inspection:hover span,#close-asset:hover span{background:#65705d;width:32px}#close-inspection:focus-visible,#close-asset:focus-visible{outline:2px solid #b44b32;outline-offset:-2px;border-radius:8px}#asset-dialog{padding-top:30px}
.animal-controls{margin:0 0 6px}.animal-controls summary{cursor:pointer;font-size:11px;color:#65705d;text-align:right;padding:2px 6px}.animal-controls .sliders{padding:8px 0;display:flex;gap:14px;flex-wrap:wrap}.animal-controls label{flex:1;min-width:140px}.animal-controls input{min-width:50px;width:90px}#panel{max-height:45vh;overflow:auto}
.baseline-note{display:block;text-align:left;font-size:10px;color:#65705d;padding:3px 0 4px;max-width:420px}.animal-controls .sliders label{font-size:11px}.animal-controls .sliders output{min-width:16px;width:16px}
#panel{display:grid;grid-template-columns:auto 1fr;height:auto;gap:6px 18px;padding:7px 12px}.animal-controls{grid-column:1/-1;margin:0}.animal-controls summary{padding:0 4px}.animal-controls[open]{border-bottom:1px solid #ded8c7;padding-bottom:5px}.animal-controls .sliders{margin-top:4px}.profiles{justify-content:center}#panel>.sliders{justify-content:center}@media(max-width:780px){#panel{grid-template-columns:1fr;gap:5px}.profiles{width:100%}.profile{height:48px}}
.arrival-controls{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:11px}.arrival-controls select{font:inherit;color:inherit;border:1px solid #d5ceb9;background:#fffaf0;border-radius:999px;padding:5px 9px;min-width:0;max-width:210px}.arrival-controls button{font-size:11px;border-radius:999px;padding:5px 10px}.arrival-controls label{font-size:11px}
@media(prefers-reduced-motion:reduce){.toggle-knob{transition:none}}

#arrival-dialog{box-sizing:border-box;width:340px;max-width:calc(100vw - 24px);max-height:80vh;overflow:auto;padding:27px 18px 15px;border:1px solid #d5ceb9;border-radius:16px;background:#fff9ed;color:#354438;box-shadow:0 12px 45px #24352a25}#arrival-dialog::backdrop{background:#24352a28}#arrival-title{font:600 20px Fraunces,Georgia;margin:0 0 14px}#close-arrival{position:absolute;top:0;left:calc(50% - 26px);width:52px;height:23px;border:0;background:none;padding:0;display:grid;place-items:center}#close-arrival span{width:27px;height:5px;background:#b1b39c;border-radius:9px}#arrival-fields label{display:grid;grid-template-columns:100px 1fr 48px;gap:8px;align-items:center;font-size:11px;min-height:34px}#arrival-fields input{width:100%;min-width:0;accent-color:#b44b32}#arrival-fields output{text-align:right;font-size:10px}.arrival-actions{display:flex;justify-content:space-between;margin-top:12px;gap:8px}.arrival-actions button{font-size:11px;padding:6px 12px;border-radius:999px}#preview-arrival{background:#b44b32;color:#fff9ed;border-color:#b44b32}.arrival-controls label{flex:0;min-width:auto}

.arrival-controls{flex-wrap:wrap}.arrival-controls .effect-time{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;white-space:nowrap}.effect-time input{box-sizing:border-box;width:52px;min-width:0;padding:4px 5px;border:1px solid #d5ceb9;border-radius:7px;background:#fffaf0;color:inherit;font:inherit}
