*{box-sizing:border-box}
html{background:#000;color-scheme:dark}
body{margin:0;background:#000;overflow-x:hidden;-webkit-tap-highlight-color:transparent;font-family:system-ui}
button,input{font:inherit}
button{border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,#crop:focus-visible{outline:2px solid #aaa;outline-offset:8px}
button svg,.zoom svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none;pointer-events:none}
main{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:32px 24px;padding-top:max(32px,env(safe-area-inset-top));padding-bottom:max(32px,env(safe-area-inset-bottom))}
[hidden]{display:none!important}
section{display:flex;align-items:center;flex-direction:column}
.round{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.primary{background:#fff;color:#080808}
.primary:hover{background:#e6e6e6}
.quiet{background:#111;color:#bbb}
.quiet:hover{background:#1e1e1e;color:#fff}
#cropper{width:100%}
#crop{width:min(86vw,56svh,420px);aspect-ratio:1;touch-action:none;cursor:grab;overflow:hidden}
#crop:active{cursor:grabbing}
#cropCanvas{width:100%;height:100%;display:block}
.zoom{width:min(74vw,290px);display:flex;align-items:center;gap:20px;margin:30px 0;color:#666}
.zoom svg{width:15px;flex-shrink:0}
.zoom input{appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:2px;background:#333;cursor:pointer;accent-color:#fff}
.zoom input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:#fff;width:13px;height:13px;border-radius:50%}
.zoom input::-moz-range-thumb{background:#fff;width:13px;height:13px;border:0;border-radius:50%}
.actions{display:flex;gap:24px;align-items:center;justify-content:center}
#experience{width:100%}
#scene{display:block;width:min(84vw,calc((100svh - 160px)/2.27),330px);height:auto;aspect-ratio:1 / 2.27}
.result-actions{margin-top:25px;visibility:hidden;pointer-events:none}
.result-actions.ready{visibility:visible;pointer-events:auto}
.error{position:fixed;bottom:30px;background:#251411;color:#ffc4b1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.dragging #add{background:#ccc}
@media(max-height:600px){main{padding:20px}.zoom{margin:20px 0}.round{width:48px;height:48px}#scene{width:min(76vw,calc((100svh - 110px)/2.27),300px)}.result-actions{margin-top:16px}}