:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#000;color:#f0f1f4;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#000;min-height:320px}
button,input{font:inherit}
button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:2px solid #90c9ff;outline-offset:6px}
[hidden]{display:none!important}
#stage{position:absolute;inset:0;overflow:hidden;isolation:isolate}
#scene{display:block;width:100%;height:100%;cursor:grab;touch-action:none;opacity:0;transition:none}
#scene.ready{opacity:1}
#scene:active{cursor:grabbing}
.chrome{position:absolute;z-index:2;left:max(36px,env(safe-area-inset-left));right:max(36px,env(safe-area-inset-right))}
.topbar{top:max(32px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}
.wordmark{font-size:23px;font-weight:900;font-style:italic;letter-spacing:-1.4px;line-height:1;white-space:nowrap}
.wordmark span{color:#9ba0af;margin-left:2px}
.top-right{display:flex;align-items:center;gap:28px}
.preview-label{font-size:12px;letter-spacing:2px;color:#828590}
.quiet-button{display:inline-flex;align-items:center;gap:9px;min-height:44px;background:#ffffff05;border:1px solid #ffffff15;border-radius:30px;padding:0 17px;font-size:14px;pointer-events:auto;backdrop-filter:blur(12px)}
.quiet-button:hover{background:#ffffff0d;border-color:#ffffff30}
svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bottom-bar{bottom:max(32px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.specimen{display:flex;align-items:center;gap:15px;color:#c1c5cf;font-size:13px;letter-spacing:1.2px}
.specimen span+span{border-left:1px solid #ffffff22;padding-left:15px;color:#747b8a;font-size:12px}
.playback{height:58px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#ffffff09,#ffffff03);border:1px solid #ffffff15;border-radius:40px;backdrop-filter:blur(20px);padding:0 20px 0 12px;box-shadow:0 10px 40px #0004;font-size:14px}
#play{min-height:44px;width:87px;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;padding:0;white-space:nowrap}
#play:hover{color:#bbdfff}
.divider{height:19px;width:1px;background:#ffffff18;margin-right:4px}
.playback label{color:#9399a8}
#speed{width:88px;height:24px;accent-color:#c8d4e7;cursor:pointer}
#speed-value{width:33px;font-variant-numeric:tabular-nums;text-align:right;color:#d0d5de}
.hint{justify-self:end;font-size:13px;color:#777e8e;letter-spacing:.2px}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#999fad;font-size:14px;letter-spacing:.3px;pointer-events:none;transition:opacity .4s ease}
.loading-line{width:56px;height:1px;background:linear-gradient(90deg,transparent,#a2ddff,#ffc3e0,transparent)}
#fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#111}
#fallback img{height:65%;max-width:95%;object-fit:contain}
#fallback p{font-size:16px;text-align:center;padding:0 20px;color:#c6cbd4}
#retry{background:#eee;color:#111;border:0;border-radius:30px;padding:12px 23px}
.no-script{position:absolute;inset:45% 15% auto;text-align:center}
#notice{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);z-index:3;color:#b7bfd0;font-size:14px;pointer-events:none;text-align:center;max-width:90%}
.embedded .chrome,.embedded #notice{display:none}
@media(max-width:700px){.chrome{left:21px;right:21px}.topbar{top:max(24px,env(safe-area-inset-top))}.wordmark{font-size:21px}.preview-label{display:none}.quiet-button{padding:0 13px}.quiet-button span{display:none}.bottom-bar{bottom:max(24px,env(safe-area-inset-bottom));display:flex;justify-content:center;flex-wrap:wrap;gap:16px}.specimen{position:absolute;bottom:90px;left:0;font-size:12px}.hint{position:absolute;bottom:90px;right:0;font-size:12px}.playback{height:56px;gap:10px;padding:0 17px 0 9px}#speed{width:75px}}
@media(max-height:520px){.topbar{top:16px}.bottom-bar{bottom:14px}.specimen,.hint{display:none}.playback{height:48px}}
@media(max-width:380px){.playback{gap:8px;padding:0 12px}#play{width:70px}#speed{width:62px}.chrome{left:16px;right:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

html:has(body.embedded),body.embedded{background:transparent;min-height:0}
.embedded #fallback{background:#000}


.embedded #scene{touch-action:pan-y pinch-zoom;pointer-events:none;cursor:default}