*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;margin:0}#root{min-height:100vh}:root{--bg:#f3efe5;--surface:#fffcf5e0;--surface-strong:#fffaf0;--ink:#1e2430;--muted:#5f6775;--line:#262e3d1f;--accent:#d95d39;--accent-soft:#ffe1d7;--accent-strong:#b74727;--shadow:0 18px 48px #472f181f;--cube-white:#f8f4ec;--cube-yellow:#f5c94a;--cube-green:#48b178;--cube-blue:#4f7cff;--cube-red:#df5a4f;--cube-orange:#f39a4c}body{color:var(--ink);background:radial-gradient(circle at 0 0,#ffd69973,#0000 28%),radial-gradient(circle at 100% 100%,#91c1ff47,#0000 30%),linear-gradient(#f8f4ea 0%,#f0eadf 100%);font-family:Noto Sans SC,PingFang SC,Hiragino Sans GB,sans-serif}button{font:inherit}.app{min-height:100vh;padding:28px}.hero{border:1px solid var(--line);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);max-width:1400px;box-shadow:var(--shadow);border-radius:28px;grid-template-columns:1.7fr .9fr;gap:20px;margin:0 auto 24px;padding:28px;display:grid}.eyebrow{color:var(--accent-strong);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;font-size:13px;font-weight:700}.hero h1{margin-bottom:12px;font-size:clamp(2rem,4vw,3.8rem);line-height:1.06}.hero-copy{max-width:42rem;color:var(--muted);font-size:1.05rem;line-height:1.7}.hero-card,.viewer-card,.info-card,.sidebar{border:1px solid var(--line);background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);border-radius:24px}.hero-card{flex-direction:column;justify-content:center;align-self:stretch;gap:14px;padding:20px;display:flex}.hero-card-label,.label,.badge,.lesson-order,.lesson-level{letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:700}.hero-card strong{font-size:1.25rem;line-height:1.5}.hero-card button,.controls button,.speed-buttons button,.lesson-item{transition:transform .18s,box-shadow .18s,background .18s}.hero-card button,.controls button,.speed-buttons button{cursor:pointer;border:none;border-radius:999px}.hero-card button{background:var(--accent);color:#fff;align-self:flex-start;padding:10px 16px}.hero-actions{flex-wrap:wrap;gap:10px;display:flex}.hero-actions button:last-child{color:var(--accent-strong);background:#fff;border:1px solid #d95d3938}.hero-actions button:disabled{opacity:.45;cursor:not-allowed}.layout{grid-template-columns:320px minmax(0,1fr);gap:24px;max-width:1400px;margin:0 auto;display:grid}.sidebar{flex-direction:column;gap:22px;padding:22px;display:flex}.sidebar-section h2,.sidebar-section h3,.info-card h3{margin-bottom:8px;font-size:1.1rem}.sidebar-section p,.info-card p,.info-card li,.formula-card p,.step-card p{color:var(--muted);line-height:1.7}.lesson-list{flex-direction:column;gap:12px;display:flex}.track-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.track-tabs button{border:1px solid var(--line);min-height:36px;color:var(--muted);cursor:pointer;background:#ffffff94;border-radius:999px;transition:background .18s,color .18s,border-color .18s}.track-tabs button.active{background:var(--accent-soft);color:var(--accent-strong);border-color:#d95d3938}.lesson-item{border:1px solid var(--line);background:var(--surface-strong);text-align:left;cursor:pointer;border-radius:20px;flex-direction:column;gap:4px;width:100%;padding:16px;display:flex}.lesson-item strong{line-height:1.35}.lesson-item.selected{background:linear-gradient(135deg, var(--accent-soft), #fff8f1f2);border-color:#d95d394d}.lesson-level,.lesson-order,.badge,.label{color:var(--accent-strong)}.notation-help{padding-top:4px}.notation-help p+p{margin-top:8px}.viewer-panel{flex-direction:column;gap:20px;display:flex}.viewer-card{padding:22px}.viewer-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.workflow-strip{background:linear-gradient(135deg,#fff5edf2,#fffbf6db);border:1px solid #d95d3926;border-radius:22px;grid-template-columns:minmax(0,1.8fr) minmax(240px,.9fr);gap:18px;margin-bottom:18px;padding:16px 18px;display:grid}.workflow-strip.active{border-color:#d95d3947;box-shadow:inset 0 0 0 1px #d95d3914}.workflow-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.workflow-step{background:#ffffffb8;border:1px solid #1e243014;border-radius:18px;align-items:flex-start;gap:12px;padding:14px;display:flex}.workflow-step span{width:28px;height:28px;color:var(--muted);background:#1e243014;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:800;display:inline-flex}.workflow-step strong{margin-bottom:4px;font-size:.98rem;display:block}.workflow-step p{color:var(--muted);font-size:13px;line-height:1.55}.workflow-step.active{background:linear-gradient(135deg,#ffe8ddf5,#fff8f2eb);border-color:#d95d3947}.workflow-step.active span,.workflow-step.done span{background:var(--accent);color:#fff}.workflow-summary{background:#ffffffbd;border:1px solid #1e243014;border-radius:18px;flex-direction:column;justify-content:space-between;gap:12px;padding:14px 16px;display:flex}.workflow-summary strong{font-size:1rem;line-height:1.55}.workflow-summary button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:999px;align-self:flex-start;min-height:42px;padding:10px 16px}.workflow-summary button:disabled{opacity:.45;cursor:not-allowed}.viewer-header h2{margin-top:4px;font-size:2rem}.progress-block{min-width:220px}.progress-block span{text-align:right;color:var(--muted);margin-bottom:8px;font-size:14px;display:block}.progress-bar{background:#1e243014;border-radius:999px;width:100%;height:10px;overflow:hidden}.progress-bar div{border-radius:inherit;background:linear-gradient(90deg, #ff9b71, var(--accent));height:100%}.cube-container{background:linear-gradient(#111827 0%,#1e293b 100%);border-radius:22px;height:520px;overflow:hidden}.session-shell{display:block}.cube-stage{flex-direction:column;gap:14px;display:flex}.workflow-shell{grid-template-columns:minmax(320px,420px) minmax(0,1fr);align-items:start;gap:18px;display:grid}.editor-shell{flex-direction:column;gap:18px;display:flex}.editor-shell .cube-stage,.editor-shell .workflow-controls-panel{grid-column:auto}.editor-shell .workflow-controls-panel{margin-top:0}.workflow-shell .cube-stage{grid-column:2}.workflow-shell .workflow-controls-panel{grid-column:1;grid-template-columns:1fr;margin-top:0}.stage-summary-card{border:1px solid var(--line);background:#ffffff9e;border-radius:20px;padding:16px 18px}.stage-summary-card strong{margin:8px 0 6px;font-size:1.15rem;display:block}.stage-summary-card p{color:var(--muted);line-height:1.7}.editor-workbench-card{border:1px solid var(--line);background:#ffffffb8;border-radius:22px;padding:18px}.editor-workbench-card strong{margin:8px 0 10px;font-size:1.05rem;line-height:1.5;display:block}.controls-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;display:grid}.status-overview{background:linear-gradient(135deg,#fff8f2fa,#fffcf7eb)}.formula-card,.step-card,.speed-control,.editor-card,.workflow-card{border:1px solid var(--line);background:#ffffff8c;border-radius:20px;padding:18px}.workflow-card{background:linear-gradient(135deg,#fff0e6f5,#fff8f1e6);grid-column:1/-1}.workflow-card strong{margin:8px 0 6px;font-size:1.1rem;line-height:1.4;display:block}.workflow-card p{color:var(--muted);line-height:1.7}.formula-card strong,.step-card strong{overflow-wrap:anywhere;margin:8px 0 6px;font-size:1.2rem;line-height:1.45;display:block}.controls{flex-wrap:wrap;grid-column:1/-1;gap:12px;display:flex}.controls button,.speed-buttons button{color:var(--ink);background:#fff;border:1px solid #1e24301a}.controls button{padding:12px 18px}.controls button:nth-child(2){background:var(--accent);color:#fff;border-color:#0000}.controls button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.speed-buttons{flex-wrap:wrap;gap:10px;margin-top:10px;display:flex}.mode-buttons{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.speed-buttons button{padding:9px 14px}.speed-buttons button.active,.mode-buttons button.active{background:var(--accent-soft);color:var(--accent-strong);border-color:#d95d392e}.mode-buttons button{min-height:36px;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #1e24301a;border-radius:999px;padding:9px 14px;transition:transform .18s,box-shadow .18s,background .18s}.editor-card{flex-direction:column;gap:12px;display:flex}.editor-card.expanded{grid-column:1/-1}.editor-actions{flex-wrap:wrap;gap:8px;display:flex}.editor-actions button{min-height:34px;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #1e24301a;border-radius:999px;padding:7px 12px}.editor-actions button.active{background:var(--accent);color:#fff;border-color:#0000}.color-palette{grid-template-columns:repeat(6,minmax(38px,1fr));gap:8px;display:grid}.color-palette button{aspect-ratio:1;color:#000000b8;cursor:pointer;border:2px solid #1e243026;border-radius:12px;font-size:12px;font-weight:800}.color-palette button.selected{border-color:var(--accent);box-shadow:0 0 0 3px #d95d392e}.validation-ok,.validation-error{margin:0;font-size:13px;line-height:1.5}.validation-ok{color:#268354}.validation-error{color:var(--accent-strong)}.face-net-wrapper{flex-direction:column;gap:14px;padding-top:2px;display:flex}.face-net-hint p{color:var(--muted);font-size:13px;line-height:1.6}.face-net{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:10px;display:grid}.face-net-panel{background:#ffffffbd;border:1px solid #1e243014;border-radius:16px;padding:10px}.face-net-panel span{color:var(--muted);letter-spacing:.04em;margin-bottom:8px;font-size:12px;font-weight:700;display:block}.face-net-up{grid-column:2}.face-net-left{grid-column:1}.face-net-front{grid-column:2}.face-net-right{grid-column:3}.face-net-back{grid-column:4}.face-net-down{grid-column:2}.face-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.face-cell{aspect-ratio:1;cursor:pointer;border:2px solid #14161c24;border-radius:10px;transition:transform .14s,box-shadow .14s}.face-cell:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 18px #14161c1f}.face-cell.center{cursor:not-allowed;border-color:#14161c47;box-shadow:inset 0 0 0 2px #ffffff7a}.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.info-card{padding:22px}.info-card ul{padding-left:18px}.info-card li+li{margin-top:10px}.hero-card button:hover,.controls button:hover:not(:disabled),.speed-buttons button:hover,.mode-buttons button:hover,.lesson-item:hover{transform:translateY(-1px);box-shadow:0 12px 24px #00000014}@media (width<=1100px){.hero,.layout,.workflow-shell{grid-template-columns:1fr}.workflow-shell .cube-stage,.workflow-shell .workflow-controls-panel{grid-column:auto}.workflow-strip,.lesson-grid{grid-template-columns:1fr}}@media (width<=760px){.app{padding:16px}.hero,.sidebar,.viewer-card,.info-card{border-radius:20px}.viewer-header,.controls-panel{grid-template-columns:1fr;display:grid}.workflow-steps{grid-template-columns:1fr}.progress-block{min-width:0}.progress-block span{text-align:left}.cube-container{height:360px}.face-net{grid-template-columns:repeat(2,minmax(0,1fr))}.face-net-up,.face-net-left,.face-net-front,.face-net-right,.face-net-back,.face-net-down{grid-column:auto}.controls{flex-direction:column}}