body{margin:0;padding:0}:root{--cube-size:clamp(150px, 38vw, 220px);--sticker-size:calc(var(--cube-size) / 3.2);--gap:clamp(3px, .8vw, 5px);--white:#f8fafc;--yellow:#ffd83d;--green:#11a86d;--blue:#2563eb;--red:#dc2748;--orange:#f97316;--gray:#2a2f3a;--bg:#0d1017;--panel:#171b24;--panel-strong:#202633;--line:#303848;--text:#edf2f7;--muted:#9aa6b8;--accent:#4f8cff;--success:#35d07f}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--text);background:radial-gradient(circle at 0 0,#4f8cff2e,#0000 30rem),linear-gradient(135deg,#0d1017 0%,#111827 48%,#15171c 100%);margin:0;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}button{font:inherit}#root{width:100%}.app-container{flex-direction:column;align-items:stretch;gap:18px;width:min(100%,980px);min-height:100vh;margin:0 auto;padding:28px clamp(16px,4vw,36px) 40px;display:flex}.app-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.eyebrow,.result-kicker{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;font-size:.75rem;font-weight:800}h1{margin:0;font-size:clamp(2rem,6vw,4.75rem);line-height:.95}h3{margin:0;font-size:clamp(1.2rem,3vw,1.7rem)}h2{margin:0;font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.1}.reset-button,.copy-button,.tab-button{border:1px solid var(--line);color:var(--text);cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.reset-button,.copy-button{background:var(--panel-strong);border-radius:8px;min-height:42px;padding:0 16px;font-weight:700}.reset-button:hover,.copy-button:hover,.tab-button:hover{border-color:#60708a;transform:translateY(-1px)}.tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.tab-button{text-align:left;background:#171b24e6;border-radius:8px;min-height:72px;padding:12px 14px}.tab-button span,.tab-button small{display:block}.tab-button span{font-size:1.1rem;font-weight:800}.tab-button small{color:var(--muted);margin-top:4px;font-size:.78rem;line-height:1.2}.tab-button.active{border-color:var(--accent);background:#1c376b}.tab-button.active small{color:#d9e6ff}.cube-input-container{background:#171b24f0;border:1px solid #ffffff12;border-radius:8px;justify-content:center;align-items:center;min-height:clamp(300px,58vw,430px);padding:clamp(28px,7vw,64px);display:flex;position:relative;overflow:hidden;box-shadow:0 24px 60px #00000052}.top-view{grid-template-columns:repeat(5, var(--sticker-size));grid-template-rows:repeat(5, var(--sticker-size));gap:var(--gap);display:grid}.sticker{width:var(--sticker-size);height:var(--sticker-size);cursor:pointer;border:2px solid #00000059;border-radius:6px;transition:transform .1s,box-shadow .1s,border-color .1s}.sticker:hover{border-color:#fff9;transform:scale(1.04);box-shadow:inset 0 0 12px #ffffff3d}.sticker.suggested{border-color:#fff6a6;box-shadow:0 0 0 4px #ffd83dc7,inset 0 0 10px #ffffff40}.sticker.white{background-color:var(--white)}.sticker.yellow{background-color:var(--yellow)}.sticker.green{background-color:var(--green)}.sticker.blue{background-color:var(--blue)}.sticker.red{background-color:var(--red)}.sticker.orange{background-color:var(--orange)}.sticker.gray{background-color:var(--gray)}.corner-view{min-height:calc(var(--cube-size) * 1.72);perspective:1000px;justify-content:center;align-items:center;display:flex}.isometric-cube{width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d;position:relative}.f2l-cube{transform:rotateX(-32deg)rotateY(-45deg)}.face{gap:var(--gap);width:var(--cube-size);height:var(--cube-size);padding:var(--gap);box-sizing:border-box;background:#05070a;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;position:absolute}.face-u{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))}.face-f{transform:translateZ(calc(var(--cube-size) / 2))}.face-r{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))}.palette{border:1px solid var(--line);background:#171b24f0;border-radius:999px;flex-wrap:wrap;justify-content:center;gap:10px;width:fit-content;max-width:100%;margin:0 auto;padding:10px;display:flex}.palette-color{cursor:pointer;border:2px solid #ffffff24;border-radius:50%;width:34px;height:34px;padding:0}.palette-color.active{border-color:var(--text);transform:scale(1.08);box-shadow:0 0 0 4px #4f8cff59}.algorithm-result{background:#171b24f0;border:1px solid #ffffff12;border-radius:8px;width:100%;padding:clamp(18px,4vw,26px);box-shadow:0 18px 45px #00000038}.result-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.setup-move{color:var(--yellow);margin-top:14px;font-weight:800}.algorithm-text{color:var(--success);white-space:nowrap;background:#0b1118;border:1px solid #253044;border-radius:8px;margin-top:12px;padding:14px 16px;font-family:Cascadia Mono,Courier New,Courier,monospace;font-size:clamp(1rem,2.8vw,1.25rem);line-height:1.45;overflow-x:auto}.case-card{background:var(--panel-strong);border:1px solid var(--line);border-radius:8px;margin-top:14px;padding:14px}.case-name{color:var(--text);font-weight:800}.empty-result{color:var(--muted);margin:0;line-height:1.5}.f2l-guidance{background:var(--panel-strong);border:1px solid var(--line);color:#d6deea;border-radius:8px;margin:4px 0 0;padding:16px;line-height:1.55}.f2l-guidance>div+div{margin-top:8px}.f2l-guidance-title{color:var(--yellow);letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;font-weight:800}.f2l-case-breakdown{text-align:left;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:14px;display:grid}.f2l-breakdown-title{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;font-size:.85rem;font-weight:800}.f2l-case-breakdown pre{color:#d6deea;white-space:pre-wrap;background:#0b1118;border:1px solid #253044;border-radius:8px;margin:0;padding:12px;font-family:Cascadia Mono,Courier New,Courier,monospace;font-size:.9rem;line-height:1.4}.learning-panel{background:#171b24d1;border:1px solid #ffffff12;border-radius:8px;padding:clamp(18px,4vw,26px)}.learning-intro{max-width:720px}.learning-intro p,.learning-grid p,.quality-note p{color:#cbd5e1;margin:10px 0 0;line-height:1.6}.learning-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.learning-grid article,.quality-note{border:1px solid var(--line);background:#202633c7;border-radius:8px;padding:14px}.learning-grid h3,.quality-note h3{font-size:1rem}.quality-note{margin-top:12px}@media (width<=620px){.app-header{align-items:flex-end}.tabs{grid-template-columns:1fr}.tab-button{min-height:58px}.cube-input-container{padding-inline:14px}.palette{border-radius:8px}.result-heading{flex-direction:column;align-items:flex-start}.learning-grid{grid-template-columns:1fr}}