:root{color-scheme:dark;background:#03161b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:system-ui,sans-serif}.app-shell{display:flex;width:100%;height:100dvh;min-height:0;background:#03161b}.viewport{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:#03161b}.viewport:focus-visible{outline:2px solid #c8fff1;outline-offset:-2px}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.reference{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .12s linear}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.capture-form{position:absolute;z-index:2;min-width:0;--form-accent: #c8fff1;--form-fill: #0b2830;--form-font-size: 13px;--form-font-family: system-ui, Arial, sans-serif;filter:drop-shadow(0 4px 12px rgba(0,8,13,.7))}.capture-form[hidden]{display:none}.capture-row{display:flex;width:100%;height:100%;padding:4px;border:1px solid color-mix(in srgb,var(--form-accent) 75%,transparent);border-radius:5px;background:color-mix(in srgb,var(--form-fill) 93%,transparent);box-shadow:inset 0 0 0 1px #000e1273}.capture-row:focus-within{border-color:var(--form-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--form-accent) 25%,transparent),0 0 24px #9af4e733}.capture-row input{flex:1 1 auto;min-width:0;padding:0 10px;border:0;outline:0;border-radius:2px;color:#f1fbf8;background:transparent;font:400 var(--form-font-size)/1.2 var(--form-font-family);letter-spacing:.01em}.capture-row input::placeholder{color:#a5c3c2;opacity:1}.capture-row button{flex:0 0 auto;max-width:48%;min-width:65px;padding:0 12px;border:0;border-radius:2px;color:#09252c;background:var(--form-accent);font:700 var(--form-font-size)/1.1 var(--form-font-family);letter-spacing:.055em;cursor:pointer}.capture-row button:hover{filter:brightness(1.08)}.capture-row button:focus-visible{outline:2px solid #fff;outline-offset:2px}.capture-feedback{position:absolute;top:100%;left:0;max-width:100%;margin:5px 0 0;padding:0 2px;color:#c8fff1;font:11px/1.3 system-ui,sans-serif;text-shadow:0 1px 4px #03161b,0 1px 8px #03161b}.capture-feedback[data-state=error]{color:#ffb6a6}#controls.sh-panel{position:relative;inset:auto;flex:0 0 320px;width:320px;max-width:none;height:100%;border-left:1px solid rgba(165,222,235,.16);background:#071b22;-webkit-backdrop-filter:none;backdrop-filter:none}#controls.sh-panel.collapsed{flex-basis:0;width:0;border-left:0}.panel-intro,.panel-status{padding:12px 16px;color:#9bb4b9;line-height:1.45;font-size:12px}.panel-intro{border-bottom:1px solid rgba(165,222,235,.12)}.panel-intro strong{display:block;color:#e3f4f3;font-size:14px;margin-bottom:4px}.panel-status{border-top:1px solid rgba(165,222,235,.12)}.panel-status[data-state=error]{color:#ffb6a6}.panel-status[data-state=ready]{color:#9dd9d5}.scene-text-control,.scene-text-control .sh-label{display:block}.scene-text-control input,.scene-text-control textarea{display:block;width:100%;margin-top:7px;padding:9px 10px;border:1px solid rgba(165,222,235,.22);border-radius:4px;outline:none;color:#e8f5f1;background:#0c252d;font:12px/1.45 system-ui,sans-serif;letter-spacing:.02em;-webkit-user-select:text;user-select:text}.scene-text-control textarea{min-height:56px;resize:vertical}.scene-text-control input:focus,.scene-text-control textarea:focus{border-color:#b6eee1}@media(max-width:700px){.app-shell{flex-direction:column}#controls.sh-panel{flex:0 0 42dvh;width:100%;height:42dvh;border-left:0;border-top:1px solid rgba(165,222,235,.16)}#controls.sh-panel.collapsed{flex-basis:0;width:100%;height:0;border-top:0}}:root{background:#120f11}.app-shell{background:#120f11}.viewport{flex:0 0 auto;width:min(calc(100dvh * 816 / 1456),calc(100vw - 320px));height:auto;aspect-ratio:816 / 1456;max-height:100dvh;margin-inline:auto;background:#1b1416;box-shadow:0 0 0 1px #493239,0 18px 80px #0008}.reference{object-fit:contain}#controls.sh-panel{border-left-color:#553035;background:#21191c}.panel-intro,.panel-status{color:#c1abad}.panel-intro strong{color:#f1d7d5}.panel-status[data-state=ready]{color:#e3a5a5}.scene-text-control input,.scene-text-control textarea{border-color:#62454a;background:#302226;color:#f6e5e2}.scene-text-control input:focus,.scene-text-control textarea:focus{border-color:#d87b80}@media(max-width:700px){.viewport{width:min(calc(58dvh * 816 / 1456),100vw);height:min(58dvh,calc(100vw * 1456 / 816));max-height:58dvh}#controls.sh-panel{border-left:0;border-top:1px solid #553035}}
