.game-interface{position:absolute;inset:0;pointer-events:none}.harbor-background{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e6e8e5;font-size:14px;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:dark;--panel-bg: #192226f5;--panel-border: #52616880;--muted: #a4b1b6;--accent: #d6b789;position:absolute;inset:0;pointer-events:none;*{box-sizing:border-box}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled,input:disabled,select:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}p,h1,h2,h3{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.canvas-frame{position:absolute;inset:0;z-index:0;pointer-events:auto}.canvas-frame canvas{display:block;width:100%;height:100%}.scene-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid #74818a29}.renderer-label{color:#c5d1d5;font-size:10px;letter-spacing:.04em}.scene-footer dl{display:flex;gap:18px;margin:0}.scene-footer dl>div{display:flex;align-items:baseline;gap:6px}.scene-footer dt{color:#a0adb4;font-size:9px;letter-spacing:.06em}.scene-footer dd{margin:0;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}.scene-footer small{color:#a0adb4;font-size:9px}.view-load-status{position:absolute;pointer-events:auto;z-index:85;left:18px;bottom:18px;max-width:min(304px,calc(100% - 36px));padding:12px 16px;border:1px solid var(--panel-border);border-radius:7px;background:#172127f5;color:var(--muted);font-size:12px;text-align:center}.view-load-status button{margin-top:8px;padding:5px 10px;border:1px solid var(--panel-border);border-radius:4px;background:#263238}.control-panel{position:fixed;z-index:90;pointer-events:auto;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));display:flex;flex-direction:column;width:min(304px,calc(100vw - 24px));max-height:calc(100dvh - 36px);overflow:hidden;border:1px solid var(--panel-border);border-radius:11px;background:var(--panel-bg);box-shadow:0 10px 40px #10161948,0 1px 4px #10161933;line-height:1.4}.control-panel.is-collapsed{width:min(220px,calc(100vw - 24px))}.control-panel-header{display:flex;align-items:center;flex:0 0 auto;min-height:59px;padding:0 9px 0 4px}.control-panel-drag-handle{display:flex;flex:1;align-items:center;gap:10px;align-self:stretch;min-width:0;padding:8px 10px;border:0;background:transparent;text-align:left;touch-action:none;user-select:none;cursor:grab}.control-panel-drag-handle>svg{flex:0 0 auto;color:#7a8b92}.control-panel.is-dragging .control-panel-drag-handle{cursor:grabbing}.control-panel-heading{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:550}.control-panel-heading small{color:#98a7ad;font-size:9px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}.control-panel-collapse{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border:0;border-radius:5px;background:transparent;color:#b6c1c5}.control-panel-collapse:hover{background:#c3cbd510;color:#fff}.control-panel-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#61717880 transparent}.control-panel-body[hidden]{display:none}.control-panel-fields{min-width:0;margin:0;padding:0;border:0}.control-panel-section{padding:12px 16px;border-top:1px solid #74818a29}.control-panel-section-heading{display:flex;align-items:center;justify-content:space-between;min-height:22px;margin-bottom:7px}.control-panel-section-heading h3{color:#cbd3d5;font-size:11px;font-weight:550}.control-panel-playback{display:flex;align-items:center;gap:9px}.control-panel-play{display:flex;align-items:center;justify-content:center;gap:7px;min-width:71px;min-height:33px;padding:6px 9px;border:1px solid #d6b78960;border-radius:5px;background:#d6b78920;color:#eed9b7;font-size:11px}.control-panel-play:hover:not(:disabled){background:#d6b78930}.control-panel-clock{flex:1;color:#d9dedc;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}.control-panel-clock span{color:#92a3aa;font-size:10px}.control-panel-speed{width:59px;min-height:32px;padding:4px;border:1px solid #52616880;border-radius:5px;background:#263238;color:#d5ddde;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.control-panel input[type=range]{display:block;width:100%;height:22px;margin:0;accent-color:var(--accent);cursor:ew-resize}.control-panel .control-panel-timeline{margin:9px 0 8px}.control-panel-presets,.control-panel-segmented{display:flex;gap:5px}.control-panel-presets button,.control-panel-segmented button{flex:1;min-height:31px;padding:5px 7px;border:1px solid #52616880;border-radius:5px;background:#26323860;color:#bfcace;font-size:11px}.control-panel-presets button:hover:not(:disabled),.control-panel-segmented button:hover:not(:disabled){border-color:#93a3a980;background:#344047}.control-panel-segmented button[aria-pressed=true],.control-panel-presets button[aria-pressed=true]{border-color:#d6b78965;background:#d6b7891a;color:#eed9b7}.control-panel-text-button{min-height:28px;padding:0 2px;border:0;background:transparent;color:#b3c1c7;font-size:10px}.control-panel-text-button:hover:not(:disabled){color:#f3d6ab}.control-panel-hint{margin-top:7px;color:#8e9ea5;font-size:9px;line-height:1.5}.control-panel-range{margin:4px 0 8px}.control-panel-range label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#b7c4c9;font-size:11px}.control-panel-range output{color:#d5dcd9;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}.control-panel-toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-panel-toggle{display:flex;align-items:center;gap:8px;min-height:28px;color:#b7c4c9;font-size:11px;cursor:pointer}.control-panel-toggle input{width:14px;height:14px;margin:0;accent-color:var(--accent)}.camera-motion-offsets,.camera-motion-bezier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.camera-motion-offsets .control-panel-range label{flex-wrap:wrap;gap:0 6px}.camera-motion-curve-label{display:block;margin:8px 0 5px;color:#b7c4c9;font-size:11px}.camera-motion-easing{width:100%;min-height:32px;padding:5px 8px;border:1px solid #52616880;border-radius:5px;background:#263238;color:#d5ddde;font-size:11px}.camera-motion-curve{display:block;width:100%;height:96px;margin:8px 0;border:1px solid #52616850;border-radius:5px;background:#10181d60;fill:var(--accent)}.camera-motion-curve path{fill:none}.camera-motion-grid{stroke:#52616860;stroke-width:1}.camera-motion-reference{stroke:#8e9ea580;stroke-width:1;stroke-dasharray:3 4}.camera-motion-progress{stroke:var(--accent);stroke-width:2}.control-panel-light{border-top:1px solid #74818a29}.control-panel-light summary{display:flex;align-items:center;justify-content:space-between;min-height:41px;padding:10px 16px;color:#cbd3d5;font-size:11px;font-weight:550;list-style:none;cursor:pointer}.control-panel-light summary::-webkit-details-marker{display:none}.control-panel-light summary span{color:#99a9b0;font-size:16px;font-weight:400;transition:transform .12s ease}.control-panel-light[open] summary span{transform:rotate(45deg)}.control-panel-light-body{padding:0 16px 13px}.control-panel-status{display:flex;align-items:center;gap:7px;padding:9px 16px 11px;border-top:1px solid #74818a29;color:#8e9fa7;font-size:10px}.control-panel-status>span{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:#a1b5a3}.character-controls output{color:var(--muted);font-size:10px}.character-camera-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:32px;margin-bottom:8px;padding:5px 9px;border:1px solid #617b6980;border-radius:5px;background:#263b2c60;font-size:11px}.character-camera-option span{color:var(--muted);font-size:10px}.character-camera-option[aria-pressed=true]{border-color:#92d778}.character-targets,.character-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.character-actions{margin-top:9px;grid-template-columns:repeat(3,minmax(0,1fr))}.character-targets button,.character-actions button{min-height:32px;border:1px solid #52616880;border-radius:5px;background:#26323880;font-size:10px}.character-targets button[aria-pressed=true]{border-color:#d6b78965;background:#d6b7891a;color:#eed9b7}.character-targets button:hover:not(:disabled),.character-actions button:hover:not(:disabled){background:#344047;border-color:#93a3a9}.character-playback{display:flex;justify-content:space-between;margin-top:5px}.character-controls progress{display:block;width:100%;height:3px;margin-top:5px;accent-color:var(--accent)}.reveal-hint{position:absolute;left:50%;bottom:62px;transform:translate(-50%);padding:8px 13px;border-radius:5px;background:#172127ed;color:#8dff70;font-size:11px;pointer-events:none}@media(max-width:600px){.control-panel{top:max(84px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));max-height:calc(100dvh - max(84px,env(safe-area-inset-top)) - 12px)}.scene-footer{padding:10px 16px;gap:10px}.scene-footer dl{gap:10px}.scene-footer dt{font-size:8px}.scene-footer dd{font-size:10px}}@media(pointer:coarse){.control-panel-collapse{width:42px;height:42px}.control-panel-presets button,.control-panel-segmented button,.control-panel-play,.control-panel-speed,.camera-motion-easing{min-height:38px}.control-panel input[type=range]{height:30px}.control-panel-toggle{min-height:36px}.control-panel-light summary{min-height:44px}}@media(prefers-reduced-motion:reduce){.control-panel-light summary span{transition:none}}.object-label{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #63786c;color:#e6ebdf;font-size:12px}.object-label button{margin-left:12px;border:0;background:transparent;color:inherit;cursor:pointer}.loading-screen{position:fixed;inset:0;z-index:200;pointer-events:auto;overflow:hidden;isolation:isolate;background:#dad3c6;color:#fff;opacity:1;transition:opacity .28s ease-out;user-select:none}.loading-screen.is-leaving{opacity:0;pointer-events:none}.loading-screen__backgrounds,.loading-screen__art,.loading-screen__shade{position:absolute;inset:0;width:100%;height:100%}.loading-screen__art{--art-span-x: calc( var(--harbor-subject-max-x) - var(--harbor-subject-min-x) );--art-span-y: calc( var(--harbor-subject-max-y) - var(--harbor-subject-min-y) );--art-width: min( max(100vw, calc(100vh * var(--harbor-source-aspect))), calc(100vw / (var(--art-span-x) + .014)), calc(100vh * var(--harbor-source-aspect) / (var(--art-span-y) + .014)) );--art-height: calc(var(--art-width) / var(--harbor-source-aspect));--art-center-left: calc( 50vw - var(--art-width) * (var(--harbor-subject-min-x) + var(--harbor-subject-max-x)) / 2 );--art-center-top: calc( 50vh - var(--art-height) * (var(--harbor-subject-min-y) + var(--harbor-subject-max-y)) / 2 );--art-padding-x: min( calc(var(--art-width) * .007), max(0px, calc((100vw - var(--art-width) * var(--art-span-x)) / 2)) );--art-padding-y: min( calc(var(--art-height) * .007), max(0px, calc((100vh - var(--art-height) * var(--art-span-y)) / 2)) );--art-left: clamp( min( calc( var(--art-padding-x) - var(--art-width) * var(--harbor-subject-min-x) ), var(--art-center-left) ), calc((100vw - var(--art-width)) / 2), max( calc( 100vw - var(--art-width) * var(--harbor-subject-max-x) - var(--art-padding-x) ), var(--art-center-left) ) );--art-top: clamp( min( calc( var(--art-padding-y) - var(--art-height) * var(--harbor-subject-min-y) ), var(--art-center-top) ), calc((100vh - var(--art-height)) / 2), max( calc( 100vh - var(--art-height) * var(--harbor-subject-max-y) - var(--art-padding-y) ), var(--art-center-top) ) );inset:auto;width:var(--art-width);height:var(--art-height);max-width:none;left:calc(min(0px,max(calc(100vw - var(--art-width)),var(--art-left))) + max(0px,calc((100vw - var(--art-width)) / 2)));top:calc(min(0px,max(calc(100vh - var(--art-height)),var(--art-top))) + max(0px,calc((100vh - var(--art-height)) / 2)));display:block;object-fit:fill;opacity:0;transition:opacity .4s cubic-bezier(.4,0,.2,1)}.loading-screen__art.is-visible{opacity:1}.loading-screen__art:nth-child(2){transition-duration:.25s}.loading-screen__shade{background:linear-gradient(180deg,transparent 52%,rgb(13 18 23 / 8%) 70%,rgb(13 18 23 / 54%) 100%)}.loading-screen__status{position:absolute;right:max(10.3vw,env(safe-area-inset-right));bottom:max(9.2vh,env(safe-area-inset-bottom));display:flex;align-items:center;gap:.23em;font-family:Helvetica Neue,Segoe UI,Arial,sans-serif;font-size:clamp(32px,5vw,112px);font-weight:400;line-height:1;letter-spacing:normal;text-shadow:0 2px 16px rgb(0 0 0 / 18%);white-space:nowrap}.loading-screen__word{display:block;letter-spacing:.1em;transform:scaleX(.78);transform-origin:right center;margin-right:-.078em}.loading-screen__spinner{display:block;flex:0 0 auto;width:.8em;height:.8em;animation:harbor-loading-turn 1.35s linear infinite}.loading-screen__spinner img{display:block;width:100%;height:100%}.loading-screen__spinner.is-fallback{box-sizing:border-box;border:.09em solid rgb(255 255 255 / 20%);border-top-color:#fff;border-left-color:#fff;border-radius:50%}.loading-screen__error{position:absolute;right:max(7vw,24px,env(safe-area-inset-right));bottom:max(9.2vh,24px,env(safe-area-inset-bottom));box-sizing:border-box;width:min(360px,calc(100% - 48px));pointer-events:auto;padding:24px;background:#10161bdb;color:#f5f4ef;font:14px/1.6 Helvetica Neue,Segoe UI,Arial,sans-serif;user-select:text}.loading-screen__error h2{margin:0 0 8px;font-size:20px;font-weight:400}.loading-screen__error p{margin:0;overflow-wrap:anywhere}.loading-screen__error button{margin-top:18px;padding:8px 22px;border:1px solid rgb(255 255 255 / 55%);background:transparent;color:inherit;font:inherit;cursor:pointer}.loading-screen__error button:hover{background:#ffffff1f}.loading-screen__error button:focus-visible{outline:2px solid #fff;outline-offset:4px}@media(width<1100px){.loading-screen__art{--art-left: var(--art-center-left);--art-top: var(--art-center-top)}}@media(max-width:600px){.loading-screen__status{right:max(7vw,24px,env(safe-area-inset-right));bottom:max(8vh,24px,env(safe-area-inset-bottom));font-size:clamp(28px,7.2vw,43px)}}@media(prefers-reduced-motion:reduce){.loading-screen,.loading-screen__art{transition:none}.loading-screen__spinner{animation:none}}}@keyframes harbor-loading-turn{to{transform:rotate(360deg)}}
