*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f0f13;--surface: #1a1a24;--border: #2e2e3e;--text: #e8e8f0;--muted: #7878a0;--blue: #3b82f6;--blue-h: #2563eb;--green: #22c55e;--green-h: #16a34a;--amber: #f59e0b;--amber-h: #d97706;--red: #ef4444;--red-h: #dc2626;--nav: #374151;--nav-h: #4b5563;--chip: #1e1e2e;--chip-done: #252536}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;min-height:100vh;display:flex;justify-content:center}#app{width:100%;max-width:640px;padding:28px 16px 56px;display:flex;flex-direction:column;align-items:center;gap:20px}.site-nav{display:flex;align-items:center;gap:12px;width:100%;padding-bottom:12px;border-bottom:1px solid var(--border);flex-wrap:wrap}.site-nav-brand{font-family:Courier New,monospace;font-size:.82rem;color:var(--amber);letter-spacing:.05em;white-space:nowrap}.site-nav-links{display:flex;gap:6px;flex-wrap:wrap}.site-nav-link{padding:5px 14px;background:var(--surface);border:1px solid var(--border);border-radius:50px;font-size:.8rem;color:var(--muted);text-decoration:none;transition:color .15s,border-color .15s;white-space:nowrap}.site-nav-link:hover{color:var(--text);border-color:#555}.site-nav-highlight{color:var(--amber);border-color:var(--amber)}.site-nav-highlight:hover{color:var(--amber);border-color:var(--amber);filter:brightness(1.15)}header{text-align:center}header h1{font-size:1.9rem;font-weight:700;background:linear-gradient(135deg,#e8e8f0,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{margin-top:4px;color:var(--muted);font-size:.88rem}#cube-container{display:flex;flex-direction:column;align-items:center;gap:8px}#cube-wrapper{display:flex;justify-content:center}#cube-wrapper twisty-player{width:440px;height:380px}#video-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:480px;margin:8px auto 0}.video-card{display:flex;flex-direction:column;text-decoration:none;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--surface);transition:border-color .15s,transform .12s,box-shadow .15s}.video-card:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:0 4px 16px #f59e0b26}.video-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.video-title{padding:5px 7px 0;font-size:.68rem;color:var(--muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-btn{margin:4px 7px 7px;padding:5px 0;background:var(--amber);color:#0f0f13;border-radius:5px;font-size:.72rem;font-weight:700;text-align:center;letter-spacing:.04em}.status-idle{color:var(--muted);font-size:.85rem}.status-loading{color:var(--amber);font-size:.85rem}.status-solving{color:var(--blue);font-size:.85rem}.status-ready{color:var(--green);font-size:.85rem}.status-done{color:var(--amber);font-size:.85rem}.control-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}.control-row:not(.nav-row){gap:16px;margin-top:20px}.control-row:not(.nav-row) .btn{flex:1;min-width:140px}.btn{padding:10px 22px;border:none;border-radius:50px;font-size:.92rem;font-weight:600;cursor:pointer;transition:background .12s,transform .1s,opacity .12s}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover:not(:disabled){background:var(--blue-h)}.btn-green{background:var(--green);color:#fff}.btn-green:hover:not(:disabled){background:var(--green-h)}.btn-nav{background:var(--nav);color:var(--text);padding:9px 18px;font-size:.88rem}.btn-nav:hover:not(:disabled){background:var(--nav-h)}.btn-play{background:var(--amber);color:#0f0f13;font-weight:700}.btn-play:hover:not(:disabled){background:var(--amber-h)}.btn-play.pausing{background:var(--red);color:#fff}.btn-play.pausing:hover:not(:disabled){background:var(--red-h)}.step-counter{min-width:90px;text-align:center;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}#solution-panel{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:12px}#solution-panel.hidden{display:none}.panel-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;font-size:.86rem}.panel-row.hidden{display:none}.seq-label{color:var(--muted);white-space:nowrap;padding-top:3px}.mono{font-family:Courier New,monospace;color:var(--text)}.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:3px 8px;background:var(--chip);border:1px solid var(--border);border-radius:5px;font-family:Courier New,monospace;font-size:.82rem;font-weight:600;color:var(--muted);transition:background .1s,color .1s,border-color .1s;-webkit-user-select:none;user-select:none}.chip.done{background:var(--chip-done);color:var(--text);border-color:#3a3a50}.chip.active{background:var(--amber);color:#0f0f13;border-color:var(--amber);font-weight:700;box-shadow:0 0 8px #f59e0b66}#next-move-box{width:100%;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--amber);border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:18px}#next-move-box.hidden{display:none}#next-move-box.solved{border-left-color:var(--green)}.next-move-left{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:70px}.next-move-main{display:flex;align-items:center;gap:8px}.next-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap}.face-swatch{display:inline-block;width:22px;height:22px;border-radius:4px;border:2px solid rgba(255,255,255,.15);flex-shrink:0}#next-move-notation{font-family:Courier New,monospace;font-size:2rem;font-weight:700;color:var(--amber);line-height:1}#next-move-box.solved #next-move-notation{color:var(--green);font-size:1.5rem}.next-move-right{display:flex;flex-direction:column;gap:4px}.next-hint{font-size:.9rem;color:var(--text);font-weight:500}.next-tip{font-size:.82rem;color:var(--muted)}#face-guide{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;display:flex;flex-direction:column;gap:12px}#face-guide.hidden{display:none}.guide-header{display:flex;flex-direction:column;gap:3px}.guide-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.guide-sub{font-size:.83rem;color:var(--text)}.guide-sub strong{color:var(--amber)}.face-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.face-card{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:7px 10px;transition:border-color .15s,background .15s}.face-card.active-face{border-color:var(--amber);background:#1e1a0e}.fc-swatch{width:18px;height:18px;border-radius:3px;flex-shrink:0}.fc-letter{font-family:Courier New,monospace;font-weight:700;font-size:1rem;color:var(--text);min-width:14px}.fc-name{font-size:.78rem;color:var(--muted)}.guide-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--muted);padding-top:2px;border-top:1px solid var(--border)}.guide-legend strong{color:var(--text)}@media (max-width: 500px){#cube-wrapper twisty-player{width:340px;height:300px}.btn{padding:9px 16px;font-size:.88rem}#video-row{max-width:100%}}