:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{margin:0}main{outline-offset:-8px;border-radius:8px;outline:2px dashed #0000;max-width:960px;margin:0 auto;padding:1.5rem 1rem 4rem;font-family:system-ui,-apple-system,sans-serif;transition:outline-color .12s;position:relative}main.dragging{background:#0046ad0a;outline-color:#0046ad}main.dragging:after{content:"Drop image here to scan";pointer-events:none;color:#0046ad;z-index:10;justify-content:center;align-items:center;font-size:1.5rem;font-weight:500;display:flex;position:fixed;inset:0}header h1{margin:0 0 .25rem}.tagline{color:#555;margin:0 0 1.5rem}.toolbar{flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0;display:flex}button{cursor:pointer;background:#f5f5f5;border:1px solid #ccc;border-radius:6px;padding:.45rem .9rem;font-size:.9rem}button:hover:not(:disabled){background:#eee}button:disabled{opacity:.5;cursor:not-allowed}button.primary{color:#fff;background:#0046ad;border-color:#003a8c;padding:.6rem 1.2rem;font-size:1rem;font-weight:500}button.primary:hover:not(:disabled){background:#00368a}.status{color:#666;margin-left:auto;font-size:.85rem}.status-initializing{color:#b87a00}.status-ready{color:#0a7c2f}.cube-area{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:1rem;margin:1rem 0;display:grid}@media (width<=720px){.cube-area{grid-template-columns:1fr}}.cube-net{min-width:0}.cube-3d{aspect-ratio:1;cursor:grab;background:#f4f5f7;border:1px solid #e2e4ea;border-radius:8px;min-height:280px}.cube-3d:active{cursor:grabbing}.valid{color:#0a7c2f}.invalid,.error{color:#b71234}.error{background:#fff0f0;border:1px solid #ffd0d0;border-radius:4px;margin:.5rem 0;padding:.5rem .75rem}.solve-area{flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.5rem 0;display:flex}button.secondary{color:#0046ad;background:#fff;border:1px solid #0046ad;border-radius:6px;padding:.6rem 1.2rem;font-size:1rem;font-weight:500}button.secondary:hover:not(:disabled){background:#eef5ff}button.cancel{color:#b71234;background:#fff;border-color:#b71234;font-size:.85rem}button.cancel:hover:not(:disabled){background:#fff0f0}.tight-progress{color:#555;font-family:ui-monospace,Menlo,monospace;font-size:.9rem}.tight-banner{color:#003a8c;background:#f1f7ff;border:1px solid #cfe0ff;border-radius:6px;margin:.75rem 0;padding:.55rem .85rem;font-size:.95rem}.tight-banner.muted{color:#555;background:#f5f5f5;border-color:#e2e2e2}.already-solved{color:#0a6b2c;background:#eaf6ee;border:1px solid #c7e6d2;border-radius:6px;margin:.75rem 0;padding:.6rem .85rem;font-size:.95rem}.saved-counter{color:#888;text-align:right;margin-top:1.5rem;font-size:.8rem}.solution{background:#f8f9fb;border:1px solid #e2e4ea;border-radius:8px;margin:1rem 0;padding:1rem 1.25rem}.solution h2{margin:0 0 .5rem;font-size:1.1rem}.move-list{flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1rem;font-family:ui-monospace,Menlo,monospace;display:flex}.move{background:#fff;border:1px solid #ddd;border-radius:4px;padding:.2rem .5rem;font-size:.95rem;display:inline-block}.move.current{color:#fff;background:#0046ad;border-color:#003a8c;font-weight:500}.move.done{opacity:.45}.step-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.step-status{color:#444;font-size:.9rem}.step-detail{color:#666}.step-hint{color:#888;margin:.5rem 0 0;font-size:.8rem}.play-toggle[aria-pressed=true]{color:#fff;background:#0046ad;border-color:#003a8c}.speed-controls{align-items:center;gap:.4rem;margin:.6rem 0 0;font-size:.85rem;display:flex}.speed-label{color:#555}button.speed{text-transform:capitalize;padding:.2rem .55rem;font-size:.8rem}button.speed.active{color:#fff;background:#0046ad;border-color:#003a8c}.share-feedback{color:#003a8c;word-break:break-all;background:#eef5ff;border:1px solid #cfe0ff;border-radius:4px;margin:.5rem 0;padding:.4rem .75rem;font-size:.9rem}.notation{color:#444;margin-top:2rem;font-size:.9rem}.notation summary{cursor:pointer;font-weight:500}.notation ul{margin:.5rem 0 0;padding-left:1.5rem}.notation code{background:#eee;border-radius:3px;padding:0 .25rem;font-family:ui-monospace,Menlo,monospace}
