*{box-sizing:border-box}body{margin:0;background:#000;color:#eee;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif;font-size:13px}canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#splatCanvas{z-index:1}header{position:fixed;z-index:7;top:max(20px,env(safe-area-inset-top));left:5%;right:5%;display:flex;justify-content:space-between;align-items:center}a{color:inherit;text-decoration:none}button{background:#ffffff12;border:1px solid #ffffff40;border-radius:30px;color:#fff;padding:12px 20px;font:inherit}button:disabled{opacity:.4}#entry{position:fixed;z-index:4;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000;padding:40px;text-align:center}#entry h1{font-size:25px;font-weight:400}#entry p{max-width:330px;line-height:1.8;color:#aaa}#entry button{margin-top:20px}#loading{position:fixed;z-index:5;inset:0;display:grid;place-content:center;background:#000}progress{width:210px;height:3px;appearance:none;border:0;background:#ffffff20;color:#ddd}progress::-webkit-progress-bar{background:#ffffff20}progress::-webkit-progress-value{background:#ddd}progress::-moz-progress-bar{background:#ddd}#status,#error{position:fixed;z-index:6;top:85px;left:5%;right:5%;text-align:center;line-height:1.8;background:#141416d9;border-radius:16px;padding:12px}#error{top:auto;bottom:65px;color:#ffd9bd}#controls{position:fixed;z-index:3;bottom:max(65px,env(safe-area-inset-bottom));left:5%;right:5%;background:#141416dd;border:1px solid #ffffff25;border-radius:22px;padding:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}label{display:flex;align-items:center;gap:8px}input{width:95px;accent-color:#ddd}small{width:100%;text-align:center;color:#999;font-size:10px}footer{position:fixed;z-index:6;bottom:18px;left:0;right:0;text-align:center;font-size:9px;color:#999}[hidden]{display:none!important}

#splatCanvas{pointer-events:auto;touch-action:none}#featurePoints{position:fixed;inset:0;z-index:2;pointer-events:none}.feature-point{position:absolute;width:28px;height:28px;padding:0;margin:-14px;border:0;background:transparent;pointer-events:auto}.feature-point:after{content:"";display:block;width:5px;height:5px;margin:auto;border:1px solid #fff;border-radius:50%;background:#fff9;box-shadow:0 0 8px #fff8}.feature-point:focus-visible{outline:1px solid #fff}#target{position:fixed;z-index:2;width:30px;height:30px;margin:-15px;border:1px solid #fff;border-radius:50%;pointer-events:none;box-shadow:0 0 0 4px #ffffff20}

#controls{gap:12px;padding:14px 18px}#place{flex:1;background:#eee;color:#111;border-color:#eee}#reposition{font-size:12px;padding:10px 15px}#adjustments{width:100%}.size-control{width:100%;gap:10px}.size-control input{flex:1;width:auto;min-width:0;height:36px}.size-control output{min-width:44px;text-align:right;font-size:11px;color:#ccc}.rotation-control{margin-top:6px;text-align:center;color:#aaa;font-size:11px}.rotation-control summary{cursor:pointer;padding:5px}.rotation-control input{width:80%;height:30px}.feature-point{width:44px;height:44px;margin:-22px}.feature-point:after{width:7px;height:7px;box-shadow:0 0 0 5px #ffffff12,0 0 9px #fff6}#entry p{max-width:270px}#entry button{min-width:180px}#status{font-size:12px}footer{font-size:8px}

#rotatePlay{min-width:100px;padding:10px 16px}#rotatePlay[aria-pressed=true]{background:#eee;color:#111}#rotatePlay span{margin-right:6px}

.handle-hints{position:fixed;inset:0;z-index:2;pointer-events:none}.handle-hints[hidden]{display:none}.handle-grip{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;border-radius:50%;padding:0;background:transparent;pointer-events:auto;cursor:grab;touch-action:none}.handle-grip:after{content:"";display:block;width:10px;height:10px;margin:auto;border:1px solid #fff;border-radius:50%;background:#ffffff22;box-shadow:0 0 0 4px #0005}.handle-grip:focus-visible{outline:1px solid #fff}.handle-grip[hidden]{display:none!important}

#soundToggle{display:grid;place-items:center;width:40px;height:40px;padding:9px;border:1px solid #ffffff30;background:transparent;flex-shrink:0}#soundToggle svg{width:21px;height:21px}

.handle-grip:after{display:none}

/* A tiny discovery point; the 44px touch target never paints a circular overlay. */
.handle-grip,.handle-grip:hover,.handle-grip:active,.handle-grip:focus,.handle-grip:focus-visible{background:transparent;border:0;box-shadow:none;outline:none;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none}
.handle-grip:after,.handle-grip:hover:after,.handle-grip:active:after,.handle-grip:focus-visible:after{content:"";display:block;width:5px;height:5px;margin:auto;border:1px solid #ffffff66;border-radius:50%;background:#ffffff22;box-shadow:none;opacity:.65}
.handle-grip:focus-visible:after{outline:1px solid #ffffff99;outline-offset:2px}
.handle-hints.dragging .handle-grip:after{opacity:0}