@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2")}:root{font-family:Inter,Segoe UI,sans-serif;color:#202b29;background:#f6f7f4;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;font-weight:400;--surface: #fff;--surface-soft: #f0f4ef;--text: #202b29;--muted: #616d67;--accent: #176b4f;--accent-hover: #10533d;--accent-soft: #e7f2eb;--border: #d8dfd9;--control-border: #88948e;--error: #ad2828}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed}button,input,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{transition:background-color .16s,border-color .16s,color .16s}button:active:not(:disabled){background-color:var(--accent-soft)}button:disabled{opacity:.45}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,h4,h5,p{margin:0}h1,h2,h3{text-wrap:balance}canvas{display:block}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.app{max-width:1280px;padding:0 40px;margin:auto}.skip-link{position:absolute;left:20px;top:-100px;background:var(--surface);color:var(--accent);padding:12px;z-index:10}.skip-link:focus{top:8px}.header{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;font-weight:650;font-size:18px;letter-spacing:-.4px}.cube-mark{display:grid;grid-template-columns:repeat(3,6px);gap:3px;transform:rotate(-8deg)}.cube-mark i{width:6px;height:6px;border-radius:1px;background:var(--accent)}.cube-mark i:nth-child(3n){background:#88a78a}.header-note,.eyebrow,.footer-label{font-family:SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:1.4px}.header-note{color:var(--muted);letter-spacing:.5px;font-size:12px}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 0 28px}.eyebrow{color:var(--accent);font-weight:650;margin-bottom:8px}h1{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-1.5px;font-weight:650}.intro-copy{color:var(--muted);font-size:16px;margin-top:8px}.size-picker{display:flex;align-items:center;gap:16px}.field-label{display:block;font-size:13px;font-weight:600}.size-toggle{display:flex;padding:4px;gap:4px;background:#e8ece6;border:1px solid var(--border);border-radius:10px}.size-toggle button{background:transparent;color:var(--muted);border:1px solid transparent;border-radius:6px;min-height:44px;min-width:64px;font-size:15px;font-weight:600}.size-toggle button.active{background:var(--surface);color:var(--accent);border-color:var(--control-border)}.size-toggle button:hover{color:var(--accent)}.main{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:24px;align-items:start}.cube-section{min-width:0}.cube-stage{background:#edf1e9;border:1px solid var(--border);border-radius:16px;overflow:hidden}.stage-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0}h2,.image-upload h3{font-size:17px;line-height:1.4;font-weight:650;letter-spacing:-.3px}.cube-status{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:550}.cube-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.cube-status.solved{color:var(--accent)}.cube-container{height:334px;cursor:grab}.cube-container:active{cursor:grabbing}.view-hint{text-align:center;color:var(--muted);font-size:12px;padding:2px 16px 16px}.view-hint span{margin:0 8px}.view-controls{display:flex;justify-content:center;gap:8px;padding:8px 0}.view-controls button{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--control-border);background:#ffffffde;color:var(--muted);font-size:18px}.view-controls button:hover{background:var(--surface);color:var(--accent)}.cube-controls{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px;margin:16px 0}.cube-controls button,.manual-input button,.apply-btn,.reset-btn{min-height:46px;border:1px solid var(--control-border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600}.secondary-action{background:transparent;color:var(--muted)}.scramble-action{background:var(--surface);color:var(--text)}.cube-controls .primary-action,.apply-btn{background:var(--accent);color:#fff;border-color:var(--accent)}.cube-controls .primary-action:hover:not(:disabled),.apply-btn:hover:not(:disabled){background:var(--accent-hover)}.secondary-action:hover,.scramble-action:hover{background:var(--accent-soft);color:var(--accent)}.scramble-display{background:var(--accent-soft);border-radius:8px;padding:12px 16px;font-family:SFMono-Regular,Consolas,monospace;color:var(--accent);font-size:13px;line-height:1.8;margin-bottom:16px;overflow-wrap:anywhere}.manual-entry-panel{padding:8px 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.manual-entry-panel summary{font-size:13px;font-weight:600;cursor:pointer;min-height:44px;padding:12px 0}.manual-entry-panel summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.algorithm-label{margin-top:16px}.cube-loading{display:grid;place-items:center;height:100%;color:var(--muted);font-size:14px}.manual-input{display:flex;gap:8px;margin-top:10px}.manual-input input{width:100%;min-width:0;border:1px solid var(--control-border);border-radius:6px;background:var(--surface);padding:11px 12px;color:var(--text);font-size:14px}.manual-input input::placeholder{color:var(--muted)}.manual-input input[aria-invalid=true]{border-color:var(--error)}.manual-input button{background:var(--surface-soft);color:var(--accent);white-space:nowrap;padding:10px 16px}.manual-input button:hover:not(:disabled){background:var(--accent-soft)}.input-help{font-size:11px;color:var(--muted);margin-top:8px}.input-help.error{color:var(--error);font-size:13px}.controls-section{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;min-width:0}.timeline{display:flex;flex-direction:column;gap:20px}.timeline-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--border)}.panel-number{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:12px;font-family:Consolas,monospace}.step-counter{color:var(--muted);font-size:12px;white-space:nowrap}.empty-intro{padding:20px 0 0}.empty-illustration{display:flex;align-items:center;gap:8px;margin-bottom:24px;color:var(--muted)}.empty-illustration span{border:1px solid var(--border);background:var(--surface-soft);border-radius:8px;padding:10px 15px;font-family:Consolas,monospace;font-size:20px;color:var(--accent)}.empty-illustration span:nth-child(2){background:var(--accent);border-color:var(--accent);color:#fff}.empty-intro h3{font-size:24px;font-weight:600;letter-spacing:-.6px;margin-bottom:10px}.empty-intro p{color:var(--muted);font-size:14px;line-height:1.7}.getting-started{list-style:none;margin:0;padding:6px 0 16px;display:grid;gap:20px}.getting-started li{display:flex;align-items:flex-start;gap:12px}.getting-started .step-number{min-width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--accent-soft);font-size:12px;font-weight:600}.getting-started strong{font-size:13px;display:block;font-weight:600}.getting-started p{font-size:12px;color:var(--muted);margin-top:2px}.panel-footnote{border-top:1px solid var(--border);padding-top:16px;font-size:11px;color:var(--muted);letter-spacing:.4px}.progress-bar{height:8px;border-radius:8px;background:var(--surface-soft);position:relative;margin:8px 0}.progress-fill{height:100%;border-radius:inherit;background:var(--accent)}.progress-markers{position:absolute;inset:0}.marker{position:absolute;top:-8px;transform:translate(-50%);width:12px;height:24px;padding:0;border:0;background:transparent}.marker:after{content:"";display:block;width:6px;height:6px;margin:auto;background:var(--surface);border:1px solid var(--control-border);border-radius:50%}.marker.active:after,.marker.completed:after{background:var(--accent);border-color:var(--accent)}.controls{display:flex;align-items:center;justify-content:center;gap:8px}.control-btn{min-width:44px;height:44px;padding:0;border:1px solid var(--control-border);background:var(--surface);border-radius:8px;color:var(--muted);display:grid;place-items:center}.control-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}.control-btn.play-btn{min-width:56px;height:48px;background:var(--accent);border-color:var(--accent);color:#fff}.control-btn.play-btn:hover{background:var(--accent-hover);color:#fff}.speed-control{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}.speed-control input{flex:1;min-width:0;height:44px;accent-color:var(--accent)}.speed-control span{min-width:32px;font-variant-numeric:tabular-nums}.move-display{background:var(--surface-soft);padding:20px;border-radius:10px;text-align:center}.move-display .label{display:block;font-size:12px;color:var(--muted)}.move-display .move{color:var(--accent);font-size:40px;line-height:1.5;font-family:Consolas,monospace}.move-notation{color:var(--muted);display:flex;justify-content:center;gap:8px;font-size:13px}.move-list h3{font-size:13px;margin-bottom:12px}.moves{display:flex;flex-wrap:wrap;gap:8px}.move-chip{min-height:44px;min-width:44px;border:1px solid var(--control-border);border-radius:6px;background:var(--surface);color:var(--text);padding:8px;font-family:Consolas,monospace;font-size:14px}.move-chip:hover{border-color:var(--accent);background:var(--accent-soft)}.move-chip.active{border-color:var(--accent);background:var(--accent);color:#fff}.move-chip.completed{background:var(--accent-soft);color:var(--accent)}.image-upload{display:flex;flex-direction:column;gap:16px}.instructions{color:var(--muted);font-size:14px}.face-selector{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.face-btn{min-height:44px;padding:0;border:1px solid var(--control-border);border-radius:6px;background:var(--surface);color:var(--text);font-size:13px}.face-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.face-btn.captured{border-color:var(--accent)}.current-face{padding:16px;border-radius:10px;background:var(--surface-soft)}.current-face h3,.manual-entry h3{font-size:13px;margin-bottom:12px}.upload-area{display:flex;flex-direction:column;gap:12px}.upload-area label{font-size:13px;color:var(--muted)}.upload-area input[type=file]{max-width:100%;min-width:0;font-size:12px;color:var(--muted)}.upload-area input::file-selector-button{font:inherit;font-weight:600;border:1px solid var(--control-border);border-radius:6px;padding:10px;background:var(--surface);margin-right:8px;cursor:pointer;color:var(--text)}.preview{text-align:center}.preview img{border-radius:8px;max-width:100%}.detected-colors h5{font-size:12px;margin-bottom:8px}.color-grid{width:fit-content;margin:auto}.actions{display:flex;gap:8px;flex-wrap:wrap}.apply-btn{flex:1}.reset-btn{color:var(--muted);background:var(--surface)}.manual-entry{border-top:1px solid var(--border);padding-top:16px}.manual-entry p{color:var(--muted);font-size:12px}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--border);padding:24px 0;margin-top:32px;color:var(--muted)}.footer-label{font-size:10px;letter-spacing:.2px;white-space:nowrap}.footer p{font-size:11px;max-width:600px;text-align:right}@media(max-width:1024px){.app{padding:0 24px}.main{grid-template-columns:minmax(0,1fr) 320px;gap:16px}.controls-section{padding:20px}.size-picker{flex-direction:column;align-items:flex-start;gap:6px}.cube-controls{grid-template-columns:repeat(2,1fr)}.cube-controls .scramble-action{grid-column:1;grid-row:1}.cube-controls .primary-action{grid-column:2;grid-row:1}}@media(max-width:760px){.app{padding:0 16px}.header{height:64px}.header-note{display:none}.brand{font-size:16px}.intro{padding:24px 0 20px;gap:16px;flex-wrap:wrap}h1{font-size:28px;letter-spacing:-1px}.eyebrow{font-size:10px}.intro-copy{font-size:14px;margin-top:6px}.size-picker{position:absolute;top:8px;right:16px}.size-picker .field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.size-toggle{padding:3px}.size-toggle button{min-width:56px}.main{grid-template-columns:minmax(0,1fr);gap:20px}.stage-header{padding:16px 18px 0}.cube-container{height:228px}.cube-stage{border-radius:12px}.view-hint{font-size:11px;padding-bottom:12px}.cube-controls{margin:12px 0}.cube-controls button{font-size:13px}.manual-entry-panel{padding:8px 16px}.manual-input input{font-size:16px}.manual-input button{padding:8px 12px}.input-help{line-height:1.6}.controls-section{padding:20px;border-radius:12px}.empty-intro{padding-top:4px}.empty-intro p,.instructions{font-size:16px}.empty-illustration{display:none}.footer{margin-top:24px;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:max(24px,env(safe-area-inset-bottom))}.footer p{text-align:left;line-height:1.8}}