:root{--bg: #0f1020;--bg-soft: #181a30;--bg-card: #1e2040;--bg-elev: #262a52;--border: #2e3370;--text: #eef0ff;--text-dim: #a6acd8;--text-mute: #6f75a8;--primary: #6c8cff;--primary-dim: #4a68d0;--accent: #ffce5c;--success: #5ce08a;--danger: #ff6b6b;--warning: #ffb454;--cube-u: #ffd600;--cube-r: #d32f2f;--cube-f: #2e9e3f;--cube-d: #ffffff;--cube-l: #ff8a1e;--cube-b: #1e88e5;--radius: 14px;--radius-sm: 8px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--shadow-soft: 0 4px 14px rgba(0, 0, 0, .25);--maxw: 1180px}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{background:radial-gradient(1200px 600px at 80% -10%,#20224a 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#1a1c3e 0%,transparent 55%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}#app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);background:#0f1020b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.brand-mark{font-size:24px;color:var(--primary);filter:drop-shadow(0 0 8px rgba(108,140,255,.5))}.brand-name{font-size:18px;font-weight:700;letter-spacing:.5px}.nav{display:flex;gap:6px}.nav-btn{background:transparent;border:1px solid transparent;color:var(--text-dim);padding:8px 16px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;transition:all .18s ease}.nav-btn:hover{color:var(--text);background:var(--bg-soft)}.nav-btn.active{color:var(--text);background:var(--bg-elev);border-color:var(--border)}#view{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:28px 22px 60px}.footer{text-align:center;padding:18px;color:var(--text-mute);font-size:12.5px;border-top:1px solid var(--border)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#0b0c1c;border:none;padding:11px 22px;border-radius:var(--radius-sm);font-size:15px;font-weight:700;cursor:pointer;transition:transform .12s ease,background .18s ease,box-shadow .18s ease;box-shadow:0 4px 14px #6c8cff40}.btn:hover{background:#7d9bff;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.btn.secondary{background:var(--bg-elev);color:var(--text);box-shadow:none;border:1px solid var(--border)}.btn.secondary:hover{background:var(--bg-card)}.btn.ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border);box-shadow:none}.btn.ghost:hover{color:var(--text);background:var(--bg-soft)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-soft)}.muted{color:var(--text-dim)}.tag{display:inline-block;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--bg-elev);color:var(--text-dim);border:1px solid var(--border)}.solver-status{position:fixed;bottom:18px;left:50%;transform:translate(-50%);z-index:200;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:10px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);min-width:280px}.solver-status__bar{width:80px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent));background-size:200% 100%;animation:status-slide 1.4s ease-in-out infinite}@keyframes status-slide{0%{background-position:100% 0}to{background-position:-100% 0}}.solver-status__text{font-size:13px;color:var(--text-dim)}.solver-status.ready .solver-status__bar{background:var(--success);animation:none}.solver-status.error .solver-status__bar{background:var(--danger);animation:none}.hidden{display:none!important}.row{display:flex;gap:12px;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:12px}.center{display:flex;align-items:center;justify-content:center}.spacer{flex:1}@media (max-width: 720px){.topbar{padding:12px 14px}.brand-name{font-size:16px}.nav-btn{padding:7px 12px;font-size:13px}#view{padding:18px 14px 50px}.card{padding:16px}}.learn{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}.learn-sidebar{position:sticky;top:80px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;max-height:calc(100vh - 100px);overflow-y:auto}.learn-section{margin-bottom:16px}.learn-section__head{display:flex;gap:10px;align-items:center;padding:6px 4px 10px;border-bottom:1px solid var(--border);margin-bottom:8px}.learn-section__icon{font-size:22px}.learn-section__title{font-weight:700;font-size:14px}.learn-section__sub{font-size:11.5px;color:var(--text-mute)}.learn-list{list-style:none;padding:0;margin:0}.learn-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--text-dim);padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;transition:all .15s}.learn-item:hover{background:var(--bg-elev);color:var(--text)}.learn-item.active{background:var(--primary);color:#0b0c1c;font-weight:600}.learn-content{min-width:0}.learn-breadcrumb{font-size:12.5px;color:var(--primary);margin-bottom:6px;letter-spacing:.3px}.learn-h2{font-size:26px;margin:0 0 16px}.learn-body{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;line-height:1.75}.learn-body p{margin:0 0 12px}.learn-body ul,.learn-body ol{margin:0 0 12px;padding-left:22px}.learn-body li{margin-bottom:6px}.learn-body code{font-family:SF Mono,Menlo,monospace;background:var(--bg-elev);color:var(--accent);padding:2px 8px;border-radius:4px;font-size:13.5px}.learn-body .formula code{display:inline-block;font-size:16px;padding:8px 14px;background:var(--bg-elev);border:1px solid var(--border)}.lesson-table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13.5px}.lesson-table th,.lesson-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}.lesson-table th{color:var(--text-dim);font-weight:600}.lesson-table code{font-size:15px}.lesson-steps{counter-reset:step;padding-left:0;list-style:none}.lesson-steps li{counter-increment:step;padding:8px 0 8px 36px;position:relative}.lesson-steps li:before{content:counter(step);position:absolute;left:0;top:8px;width:24px;height:24px;background:var(--primary);color:#0b0c1c;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.learn-demo{margin-top:16px}.learn-demo__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}.learn-demo__title{font-weight:600;font-size:14px}.demo-views{display:flex;gap:6px}.demo-view-btn{padding:5px 12px;border-radius:999px;background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:12.5px;transition:all .15s}.demo-view-btn:hover{color:var(--text);border-color:var(--primary)}.demo-cases{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.demo-case{padding:7px 13px;border-radius:999px;background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:13px;transition:all .15s}.demo-case:hover{color:var(--text)}.demo-case.active{background:var(--primary);color:#0b0c1c;border-color:var(--primary);font-weight:600}.demo-brief{font-size:13px;color:var(--text-dim);background:var(--bg-elev);border-left:3px solid var(--primary);padding:8px 12px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:10px;line-height:1.6}.demo-status{margin-top:12px;min-height:44px}.demo-status__mode{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:4px}.demo-status__note{font-size:13.5px;color:var(--text-dim);line-height:1.65}.demo-status__note code{font-family:SF Mono,Menlo,monospace;background:var(--bg-elev);color:var(--accent);padding:1px 7px;border-radius:4px;font-size:13px;margin:0 2px}.demo-note__step{color:var(--text)}.demo-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.demo-chip{min-width:34px;padding:5px 8px;border-radius:6px;background:var(--bg-elev);border:1px solid var(--border);color:var(--text-mute);cursor:pointer;font-size:12.5px;font-family:SF Mono,Menlo,monospace;transition:all .12s}.demo-chip:hover{color:var(--text);border-color:var(--primary)}.demo-chip.done{color:var(--success);border-color:#5ce08a66}.demo-chip.current{background:var(--primary);color:#0b0c1c;border-color:var(--primary);font-weight:700}.demo-chip--start{font-family:inherit}.demo-speed{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-dim);margin-left:auto}.demo-speed select{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 8px;font-size:13px;cursor:pointer}.learn-demo__canvas{height:360px;width:100%;border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 40%,#1a1d3e,#0c0d1c);cursor:grab}.learn-demo__canvas:active{cursor:grabbing}.learn-demo__controls{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.learn-demo__hint{font-size:12.5px;margin-top:10px;text-align:center}.learn-demo__mode{font-size:13px;color:var(--accent);margin-bottom:10px;font-weight:600}.learn-diagram-slot{margin-bottom:18px}.learn-demo__controls{align-items:center}.learn-demo__controls .btn{padding:9px 14px;font-size:13.5px}.learn-body .formula{margin:8px 0}.learn-body .formula code{display:inline-block;font-size:16px;padding:10px 16px;background:var(--bg-elev);border:1px solid var(--border);border-left:3px solid var(--accent)}@media (max-width: 820px){.learn{grid-template-columns:1fr}.learn-sidebar{position:static;max-height:none;order:2}.learn-content{order:1}.learn-demo__controls .btn{flex:1 1 30%;min-width:0}.demo-speed{margin-left:0;flex:1 1 100%;justify-content:flex-end}.learn-demo__canvas{height:300px}}.page-title{font-size:24px;margin:0 0 18px}.stepper{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 22px;flex-wrap:wrap}.stepper__item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--bg-soft);color:var(--text-mute);font-size:13.5px;border:1px solid transparent}.stepper__item b{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-elev);color:var(--text-dim);font-size:12px}.stepper__item.active{background:var(--bg-elev);color:var(--text);border-color:var(--primary)}.stepper__item.active b{background:var(--primary);color:#0b0c1c}.stepper__item.done{color:var(--success)}.stepper__item.done b{background:var(--success);color:#06210f}.upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upload-cell{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;background:var(--bg-elev);text-align:center}.upload-cell.drag{border-color:var(--primary);background:#6c8cff14}.upload-cell.has-img .upload-cell__hint{display:none}.upload-cell__face{font-size:12.5px;font-weight:700;margin-bottom:8px}.upload-cell__zone{display:block;cursor:pointer;aspect-ratio:1;border:1.5px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:border-color .18s}.upload-cell__zone:hover{border-color:var(--primary)}.upload-cell__zone img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm)}.upload-cell__hint{font-size:12px;color:var(--text-mute);text-align:center;line-height:1.5}.upload-cell__remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#0009;color:#fff;border:none;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}.calibrate-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.calibrate-tab{padding:6px 14px;border-radius:999px;background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:13px;position:relative}.calibrate-tab:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--tab-color, #888);margin-right:6px;vertical-align:middle}.calibrate-tab.active{background:var(--bg-card);color:var(--text);border-color:var(--primary)}#calibrateStage{display:flex;justify-content:center}.calibrate{width:100%;max-width:460px}.calibrate__title{text-align:center;margin:0 0 12px;font-size:14px;color:var(--text-dim)}.calibrate__stage{display:flex;justify-content:center}.calibrate__canvas{border-radius:var(--radius-sm);background:#000;max-width:100%;cursor:grab;touch-action:none}.calibrate__canvas:active{cursor:grabbing}.calibrate__hint{font-size:12px;color:var(--text-mute);margin:10px 0 0;text-align:center}.generate-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}.generate-3d{min-height:420px;display:flex;flex-direction:column}.cube-canvas{flex:1;min-height:380px;width:100%;border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 40%,#1a1d3e,#0c0d1c);overflow:hidden;cursor:grab}.cube-canvas:active{cursor:grabbing}.generate-side h3{margin:0 0 8px}.sticker-face{display:inline-block;vertical-align:top;margin:6px 10px 6px 0}.sticker-face__name{font-size:11px;color:var(--text-mute);margin-bottom:4px}.sticker-grid{display:grid;grid-template-columns:repeat(3,22px);gap:3px;padding:4px;background:#000;border-radius:4px}.sticker{width:22px;height:22px;border:none;border-radius:3px;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #00000040}.sticker:hover{transform:scale(1.1)}.gen-valid{margin-top:12px;padding:8px 12px;border-radius:var(--radius-sm);font-size:13px}.gen-valid.ok{background:#5ce08a1f;color:var(--success)}.gen-valid.err{background:#ff6b6b1f;color:var(--danger)}.solve-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}.solve-3d{min-height:460px;display:flex}.solve-progress{text-align:center;margin-bottom:14px}.solve-progress__count{font-size:13px;color:var(--text-dim)}.solve-progress__count span{font-weight:700;color:var(--text)}.solve-current{font-size:32px;font-weight:800;color:var(--accent);margin-top:4px;min-height:40px}.solve-controls{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}.solve-speed{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:13px}.solve-speed input[type=range]{flex:1}.solve-moves{max-height:180px;overflow-y:auto;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}.move-chip{font-family:SF Mono,Menlo,monospace;font-size:13px;padding:4px 9px;border-radius:6px;background:var(--bg-soft);color:var(--text-dim);border:1px solid var(--border);transition:all .15s}.move-chip.done{background:#5ce08a1a;color:var(--success);border-color:transparent}.move-chip.current{background:var(--accent);color:#2a1d00;border-color:transparent;transform:scale(1.1);box-shadow:0 0 0 3px #ffce5c40}.hero{text-align:center;padding:40px 0 30px}.hero-title{font-size:36px;margin:0 0 12px;background:linear-gradient(120deg,#fff,#b9c4ff 60%,#ffce5c);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{color:var(--text-dim);max-width:560px;margin:0 auto 30px;font-size:15.5px}.hero-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px;margin:0 auto}.entry-card{display:block;text-decoration:none;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:transform .18s,border-color .18s,box-shadow .18s;text-align:left}.entry-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--shadow)}.entry-card--accent{background:linear-gradient(140deg,rgba(108,140,255,.12),var(--bg-card))}.entry-card__icon{font-size:34px;margin-bottom:10px}.entry-card__title{font-size:20px;font-weight:700;margin-bottom:6px}.entry-card__desc{color:var(--text-dim);font-size:13.5px;line-height:1.7;margin-bottom:14px}.entry-card__cta{color:var(--primary);font-weight:600;font-size:14px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}.feature{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}.feature__num{font-size:28px;font-weight:800;color:var(--primary)}.feature__label{font-size:12.5px;color:var(--text-dim);margin-top:4px}@media (max-width: 820px){.generate-layout,.solve-layout,.hero-cards,.features{grid-template-columns:1fr}.upload-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.upload-grid,.solve-controls{grid-template-columns:1fr}.hero-title{font-size:26px}}.net-diagram{display:inline-block}.net-grid{display:grid;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(3,var(--cell));gap:4px;background:var(--bg);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border)}.net-face{position:relative}.net-face__label{position:absolute;top:-6px;left:2px;font-size:9px;color:var(--text-mute);font-weight:700;pointer-events:none}.face-3x3{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;background:#000;padding:2px;border-radius:3px;width:var(--cell);height:var(--cell)}.face-cell{border-radius:2px;box-shadow:inset 0 0 0 .5px #0000004d;transition:box-shadow .2s}.face-cell.highlight{box-shadow:inset 0 0 0 2px var(--accent),0 0 8px #ffce5cb3;z-index:1;position:relative}.mini-net{display:inline-flex;gap:6px;flex-wrap:wrap;padding:8px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm)}.mini-face{position:relative;width:42px;height:42px}.mini-face .face-3x3{width:42px;height:42px}.mini-face__label{position:absolute;top:-7px;left:2px;font-size:8px;color:var(--text-mute);font-weight:700;pointer-events:none}.structure-diagram{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.struct-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.struct-tab{padding:7px 14px;border-radius:999px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:13px;transition:all .15s}.struct-tab:hover{color:var(--text)}.struct-tab.active{background:var(--primary);color:#0b0c1c;border-color:var(--primary);font-weight:600}.struct-diagram-host{display:flex;justify-content:center;margin-bottom:12px}.struct-net .net-grid{background:var(--bg-card)}.struct-desc{text-align:center;font-size:13.5px;line-height:1.7}.struct-desc__title{display:block;font-weight:700;color:var(--accent);margin-bottom:2px}.struct-desc__text{display:block;color:var(--text-dim)}.piece-icon{display:inline-flex;vertical-align:middle;margin:0 2px}.pi-grid{display:inline-grid;gap:1px;background:#000;padding:1px;border-radius:2px}.pi-grid span{width:10px;height:10px;background:#555;border-radius:1px;display:block}.pi-grid--2{grid-template-columns:repeat(2,1fr)}.pi-grid--3{grid-template-columns:repeat(3,1fr)}.pi.hl{background:var(--accent);box-shadow:0 0 4px #ffce5c99}.goal-card{background:linear-gradient(135deg,rgba(92,224,138,.1),var(--bg-card));border:1px solid rgba(92,224,138,.35);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px}.goal-card__head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--success);margin-bottom:10px;font-size:14px}.goal-card__body{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.goal-card__text{flex:1;min-width:200px;font-size:13.5px;color:var(--text-dim);line-height:1.7}.goal-card__caption{font-size:12px;color:var(--text-mute);margin-top:6px;text-align:center}.term-note{display:inline-flex;align-items:center;gap:4px;background:#6c8cff1f;border:1px solid rgba(108,140,255,.3);border-radius:4px;padding:1px 6px;font-size:12.5px;cursor:help;vertical-align:baseline}.term-note:hover{background:#6c8cff33}@media (max-width: 520px){.net-grid{--cell: 22px;gap:3px}.struct-tabs{flex-direction:column}.goal-card__body{flex-direction:column;align-items:flex-start}}