*{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}.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}.controls-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;display:grid}.formula-card,.step-card,.speed-control,.editor-card{border:1px solid var(--line);background:#ffffff8c;border-radius:20px;padding:18px}.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}.speed-buttons button{padding:9px 14px}.speed-buttons button.active{background:var(--accent-soft);color:var(--accent-strong);border-color:#d95d392e}.editor-card{flex-direction:column;gap:12px;display:flex}.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)}.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,.lesson-item:hover{transform:translateY(-1px);box-shadow:0 12px 24px #00000014}@media (width<=1100px){.hero,.layout,.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}.progress-block{min-width:0}.progress-block span{text-align:left}.cube-container{height:360px}.controls{flex-direction:column}}