#cube-scanner{box-sizing:border-box;width:min(100% - 24px,760px);max-height:calc(100dvh - 24px);padding:20px;border:1px solid #384255;border-radius:16px;background:#121620;color:#f2f5fa;font:16px system-ui,sans-serif;overscroll-behavior:contain}
#cube-scanner::backdrop{background:#080b12ed}
#cube-scanner *{box-sizing:border-box}
#cube-scanner [hidden]{display:none!important}
#cube-scanner header,#cube-scanner .scan-actions,#cube-scanner .scan-palette{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#cube-scanner header{justify-content:space-between}
#cube-scanner h2{margin:0;font-size:22px}
#cube-scanner h3{font-size:17px;margin:16px 0 8px}
#cube-scanner p{line-height:1.5;margin:12px 0}
#cube-scanner button,#cube-scanner select{min-height:44px;border:1px solid #465168;border-radius:8px;background:#283142;color:inherit;padding:8px 14px;font:inherit;cursor:pointer}
#cube-scanner button:disabled{opacity:.45;cursor:default}
#cube-scanner button:focus-visible,#cube-scanner input:focus-visible{outline:3px solid #62d8b0;outline-offset:3px}
#cube-scanner .primary{background:#237e60;border-color:#3ec894}
#cube-scanner .scan-actions{margin-top:16px}
#cube-scanner .scan-muted{color:#abb6ca;font-size:14px}
#cube-scanner .scan-error{color:#ffb6b6}
#cube-scanner nav{display:flex;gap:6px;margin:16px 0;flex-wrap:wrap}
#cube-scanner nav button{flex:1;padding:8px;min-width:44px}
#cube-scanner [aria-current=true],#cube-scanner [aria-pressed=true]{outline:2px solid #3ec894;outline-offset:1px}
#cube-scanner .scan-photo{position:relative;width:min(100%,360px);margin:12px auto;aspect-ratio:1;background:#080b12;border:2px solid #8997ad;touch-action:none}
#scan-photo{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#cube-scanner .scan-grid-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33%,#fff9 33%,#fff9 33.7%,transparent 33.7%,transparent 66.3%,#fff9 66.3%,#fff9 67%,transparent 67%),linear-gradient(to bottom,transparent 33%,#fff9 33%,#fff9 33.7%,transparent 33.7%,transparent 66.3%,#fff9 66.3%,#fff9 67%,transparent 67%)}
#cube-scanner .scan-grid-overlay:after{content:'';position:absolute;inset:0;background:radial-gradient(circle,#fff 0 3px,#000 3px 5px,transparent 5px);background-size:33.333% 33.333%}
#cube-scanner label{display:block;margin:10px 0}
#cube-scanner input[type=range]{width:100%;min-height:32px;accent-color:#3ec894}
#cube-scanner .scan-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
#cube-scanner .scan-face{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;max-width:190px;margin:auto}
#cube-scanner .scan-sticker{aspect-ratio:1;min-height:0;padding:0;border:2px solid #121620;border-radius:5px;color:#10131c;text-shadow:0 0 4px #fff;font-weight:700;display:grid;place-items:center}
#cube-scanner .scan-sticker.uncertain{border:3px dashed #fff;outline:1px solid #111}
#cube-scanner .scan-sticker:disabled{opacity:1;cursor:default}
#cube-scanner .scan-palette button{flex:1;min-width:44px;color:#10131c;text-shadow:0 0 4px #fff;font-weight:700;border:2px solid #8997ad}
#cube-scanner .scan-guide-face{max-width:220px;margin:16px auto}
#cube-scanner .scan-turn{font-size:40px;font-weight:700;text-align:center;display:block}
#cube-scanner .scan-guide-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:center}
#cube-scanner .scan-guide-pair .scan-face{max-width:190px}
#cube-scanner .scan-net{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:440px;margin:16px auto}
#cube-scanner .scan-net .scan-face{gap:2px}
#cube-scanner .scan-net .scan-sticker{border-width:1px;font-size:11px}
#cube-scanner .scan-net h3{font-size:12px;margin:0 0 4px;text-align:center}
#cube-scanner .scan-net .active-face{outline:2px solid #3ec894;outline-offset:3px;border-radius:3px}
@media(max-width:440px){#cube-scanner{padding:14px}#cube-scanner .scan-faces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:no-preference){#cube-scanner .scan-demonstrate{animation:scan-turn 1.2s ease-in-out forwards}@keyframes scan-turn{to{transform:rotate(var(--turn))}}}