:root{--ink:#1e294c;--blue:#315bea;--yellow:#ffdc62;--paper:#fff;--line:#dce2ef;--muted:#65718a;--mint:#d9f8e9;--orange:#ff9564;--shadow:0 5px 0 #e2e7f2}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f4f6fd;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.65}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #f39327;outline-offset:4px}button:disabled{opacity:.45;cursor:default}a{color:var(--blue)}.topbar{height:98px;background:#fff;border-bottom:2px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;gap:24px}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;font-weight:950;font-size:25px;letter-spacing:1px;line-height:1.3}.brand small{display:block;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:1.6px;margin-top:6px}.brand-icon{font-size:38px;background:var(--yellow);border:2px solid var(--ink);border-radius:13px;width:51px;height:51px;display:grid;place-items:center;transform:rotate(-8deg);line-height:1}.header-note{color:var(--muted);font-size:15px;margin-left:auto}.header-note span{color:#ea7c31;font-size:25px;margin-left:10px}#show-map{display:none}.app-shell{max-width:1510px;margin:auto;display:grid;grid-template-columns:235px minmax(0,1fr);gap:44px;padding:36px 4.5% 20px}.sidebar{padding-top:4px}.map-heading{font-weight:800;margin-bottom:17px;display:flex;justify-content:space-between;align-items:center}.tiny-label{font-size:12px;background:#e8ecf8;border-radius:6px;padding:1px 8px;color:var(--muted)}#lesson-nav{display:flex;flex-direction:column;gap:7px}.nav-item{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:none;border:1px solid transparent;color:var(--muted);border-radius:13px;padding:12px 10px;font-weight:650;font-size:15px;position:relative}.nav-item .num{display:grid;place-items:center;min-width:30px;height:30px;border-radius:10px;background:#e8ecf7;color:#748098;font-size:13px;font-weight:850}.nav-item.active{background:var(--blue);color:#fff;box-shadow:0 4px 0 #2445b3}.nav-item.active .num{background:#fff;color:var(--blue)}.nav-item.done:not(.active) .num{background:#cbf2df;color:#226747}.nav-item:hover:not(.active){background:#e9edfa;color:var(--ink)}.nav-item .check{margin-left:auto;color:inherit}.progress-card{margin-top:23px;padding:18px 2px;border-top:2px dashed #d9dfed}.progress-card strong{font-size:14px;display:block}.progress-card span{font-size:12px;color:var(--muted)}progress{width:100%;height:9px;appearance:none;border:none;margin-top:12px;background:#e0e6f3;border-radius:8px;overflow:hidden}progress::-webkit-progress-bar{background:#e0e6f3}progress::-webkit-progress-value{background:var(--blue);border-radius:8px}progress::-moz-progress-bar{background:var(--blue)}.buddy-card{margin-top:13px;border:2px dashed #c7d3ef;border-radius:20px;background:#eaf0ff;text-align:center;position:relative;padding:80px 12px 13px}.buddy-card img{position:absolute;top:-23px;left:50%;transform:translateX(-50%);width:117px;height:117px;object-fit:contain}.buddy-card p{font-size:13px;line-height:1.7;margin:0;color:#596b92}.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font-size:13px;color:var(--blue);font-weight:800;letter-spacing:1px;margin-bottom:4px}h1{font-size:32px;line-height:1.4;letter-spacing:.6px;margin:5px 0 8px;font-weight:900}.subtitle{margin:0;color:var(--muted);font-size:15px}.lesson-sticker{flex-shrink:0;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;width:91px;height:91px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;line-height:1.55;transform:rotate(9deg);box-shadow:3px 4px 0 #e5b840}.lesson-sticker b{font-size:15px}.classroom{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:25px;align-items:start}.demo-card{background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 #dbe1ee;overflow:hidden;padding:20px 22px 23px}.demo-top{display:flex;justify-content:space-between;align-items:center}.badge{display:inline-block;background:#edf0ff;color:var(--blue);font-size:13px;font-weight:800;padding:5px 12px;border-radius:9px}.text-button{background:none;border:none;font-size:13px;color:var(--muted);padding:6px;text-decoration:underline;text-decoration-color:#bfc8dc;text-underline-offset:4px}.cube-wrap{margin:0 -13px;position:relative;background:radial-gradient(ellipse at 50% 56%,#eef2ff 0%,#fff 70%)}#cube{display:block;width:100%;height:auto;max-height:370px;overflow:visible}.demo-options{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}.option-button{border:1px solid #d6dfee;background:#fff;border-radius:9px;padding:6px 11px;color:var(--muted);font-size:13px;font-weight:700}.option-button.selected{background:var(--ink);border-color:var(--ink);color:#fff}.face-key{display:flex;justify-content:center;gap:16px;font-size:12px;color:var(--muted);margin-top:-9px}.face-key span{display:flex;align-items:center;gap:6px}.dot{width:9px;height:9px;border-radius:3px;border:1px solid #1e294c55;display:inline-block}.yellow{background:#ffdc62}.red{background:#ff7576}.green{background:#55cc9d}.demo-caption{text-align:center;font-size:14px;margin:18px 0;color:#4f5d7b;min-height:23px}.playback{display:flex;gap:9px;justify-content:center}.primary,.outline,.complete-button,.icon-button{border:2px solid var(--ink);border-radius:11px;padding:10px 19px;font-weight:800;font-size:14px;min-height:46px;transition:transform .12s,box-shadow .12s}.primary{background:var(--blue);color:#fff;border-color:#2447c8;box-shadow:0 3px 0 #173499}.outline{background:#fff;color:var(--ink);border-color:#d3dbea;box-shadow:0 2px 0 #e8edf6}.icon-button{padding:5px 13px;font-size:24px;background:#fff;border-color:#d3dbea;color:var(--muted)}.primary:hover,.complete-button:hover{transform:translateY(-1px)}.primary:active,.complete-button:active{transform:translateY(2px);box-shadow:none}.small{min-height:40px;padding:7px 13px}.move-track{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:17px}.move-chip{background:#f1f4fb;color:#67718b;border-radius:6px;font-size:14px;min-width:30px;text-align:center;padding:4px 7px;font-weight:750}.move-chip.past{color:var(--blue);background:#e6ecff}.move-chip.current{background:var(--yellow);color:var(--ink);outline:2px solid #e9bd36}.move-description{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;min-height:19px}.demo-footnote{font-size:12px;color:#818ba1;text-align:center;padding:0 9px;margin-top:14px}.instruction-column{min-width:0}.instruction-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px 22px;margin-bottom:14px;box-shadow:0 3px 0 #e9edf6}.instruction-card h2{font-size:18px;margin:0 0 12px;font-weight:900;display:flex;align-items:center;gap:9px}.section-icon{background:var(--yellow);border-radius:7px;font-size:13px;width:25px;height:25px;display:grid;place-items:center;flex-shrink:0}.instruction-card p{font-size:15px;line-height:1.85;margin:6px 0;color:#58637c}.instruction-card strong{color:var(--ink)}.part-picker{display:grid;gap:10px}.part-button{padding:13px 14px;border:2px solid #e1e6f1;border-radius:13px;background:#fff;text-align:left;display:grid;grid-template-columns:39px 1fr;gap:10px;align-items:center;color:var(--ink)}.part-button.selected{background:#eff4ff;border-color:var(--blue)}.part-symbol{font-size:21px;font-weight:850;background:#edf0f7;border-radius:10px;display:grid;place-items:center;width:36px;height:36px}.part-button strong{font-size:15px;display:block}.part-button small{font-size:12px;color:var(--muted);display:block;margin-top:1px}.tip{border-radius:15px;padding:16px 19px;background:#fff2c3;border:1px solid #f0da91;color:#72581b;font-size:14px;line-height:1.8;margin-bottom:14px}.tip b{display:block;color:#77531b;margin-bottom:4px}.check-card{background:#e5f7ee;border:1px solid #bce4d0;border-radius:15px;padding:16px 19px;font-size:14px;color:#347158;line-height:1.8}.check-card b{display:block;color:#235c44;margin-bottom:4px}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{position:relative;font-size:15px;line-height:1.9;margin:11px 0;padding-left:30px;color:#58637c;counter-increment:step}.steps li:before{content:counter(step);position:absolute;left:0;top:3px;border-radius:50%;width:21px;height:21px;line-height:21px;text-align:center;background:#eaf0ff;color:var(--blue);font-weight:850;font-size:12px}.formula{background:#f1f4fc;padding:12px;border-radius:11px;color:var(--blue)!important;font-family:ui-monospace,SFMono-Regular,monospace;font-size:18px!important;font-weight:800;letter-spacing:1px;word-spacing:3px;line-height:1.9!important}.formula-label{font-size:12px!important;color:var(--muted)!important}details{border-top:1px dashed #d7dfed;margin-top:14px;padding-top:12px}summary{font-size:14px;cursor:pointer;font-weight:700;color:var(--blue);padding:3px 0}details p{font-size:14px!important}kbd{font-family:inherit;background:#eaf0ff;padding:1px 5px;border-radius:4px;color:var(--blue);font-weight:750}.notation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.notation-cell{border:1px solid #e2e7f1;border-radius:10px;padding:9px;text-align:center;font-size:13px;color:var(--muted)}.notation-cell b{display:block;font-size:20px;color:var(--ink)}.lesson-bottom{display:flex;gap:14px;align-items:center;justify-content:space-between;border-top:2px dashed #dbe1ef;margin-top:27px;padding-top:24px}.complete-button{background:var(--yellow);border-color:#d7af33;color:#483d24;box-shadow:0 3px 0 #cc9f28;padding:11px 28px}.complete-button.is-done{background:#d9f8e9;border-color:#7ec6a6;box-shadow:0 3px 0 #66a98c}.page-hint{font-size:12px;color:#8690a6;text-align:center;margin:14px 0 23px}footer{border-top:1px solid var(--line);padding-top:15px;font-size:12px;color:#8a94a9;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:8px}#references{flex-basis:100%;color:var(--muted);font-size:13px;padding:14px 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 24px;border-radius:13px;z-index:10;transition:.2s;text-align:center;max-width:90vw;box-shadow:0 4px 20px #1e294c30}.toast.show{opacity:1;transform:translate(-50%,0)}.final-celebration{font-size:32px;text-align:center;margin:4px 0}.part-note{font-size:14px;min-height:48px;margin:13px 0 0;color:#596b92}.orientation-strip{background:#eaf0ff;color:#3754a0;border-radius:11px;font-size:14px;font-weight:650;padding:11px 14px;margin-bottom:14px}.mini-faces{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:12px 0}.mini-case{font-size:12px;color:var(--muted);text-align:center}.mini-face{display:grid;grid-template-columns:repeat(3,16px);gap:3px;background:#e8edf7;padding:4px;border-radius:5px;margin:0 auto 5px;width:max-content}.mini-face i{display:block;width:16px;height:16px;border-radius:2px;background:#ccd5e8}.mini-face i.on{background:#f9d03c}.color-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:12px;color:var(--muted);margin-top:10px}.color-legend span{display:flex;align-items:center;gap:4px}
@media(min-width:1450px){.app-shell{gap:52px}.classroom{gap:30px}.demo-card{padding:23px 27px}h1{font-size:36px}}
@media(max-width:1100px){.app-shell{padding:27px 3%;grid-template-columns:196px minmax(0,1fr);gap:26px}.classroom{gap:17px}.demo-card{padding:17px 14px}.instruction-card{padding:17px}.nav-item{font-size:13px;padding:10px 6px;gap:8px}.playback{gap:6px}.playback .primary,.playback .outline{padding:9px 11px}h1{font-size:28px}.lesson-sticker{width:75px;height:75px;font-size:12px}.lesson-sticker b{font-size:13px}}
@media(max-width:850px){.topbar{height:83px;padding:0 5%}.brand{font-size:22px}.brand-icon{width:43px;height:43px;font-size:32px}.brand small{font-size:11px}.header-note{display:none}#show-map{display:block}.app-shell{display:block;padding:24px 5%}.sidebar{display:none}.sidebar.open{display:block;padding-bottom:25px}.sidebar.open #lesson-nav{display:grid;grid-template-columns:repeat(3,1fr)}.sidebar.open .progress-card{margin-top:15px}.sidebar.open .buddy-card{display:none}.classroom{grid-template-columns:1fr 1fr;gap:20px}.lesson-top{margin-bottom:22px}.lesson-bottom{gap:10px}.complete-button{padding:11px 17px}.demo-card{border-radius:20px}.nav-item{font-size:13px}.demo-caption{font-size:13px}.demo-options{gap:5px}.option-button{font-size:12px;padding:6px 9px}}
@media(max-width:620px){.app-shell{padding:22px 18px}.topbar{padding:0 18px}.brand small{font-size:10px;letter-spacing:.6px}h1{font-size:27px}.subtitle{font-size:14px;line-height:1.8}.eyebrow{font-size:12px}.lesson-sticker{display:none}.classroom{display:flex;flex-direction:column;gap:15px}.demo-column,.instruction-column{width:100%}.demo-card{padding:18px 21px}#cube{max-height:305px}.demo-options{margin-top:14px}.option-button{font-size:13px}.demo-caption{font-size:14px}.demo-footnote{margin:12px 0 0}.instruction-card{padding:20px}.instruction-card h2{font-size:18px}.instruction-card p,.steps li{font-size:16px}.part-button strong{font-size:16px}.part-button small{font-size:13px}.lesson-bottom{flex-wrap:wrap}.complete-button{order:-1;width:100%;font-size:16px;min-height:51px}.lesson-bottom>.outline,.lesson-bottom>.primary{flex:1}.sidebar.open #lesson-nav{grid-template-columns:repeat(2,1fr)}.face-key{font-size:12px}footer{justify-content:center;text-align:center}.progress-card{padding-bottom:0}.part-note{font-size:15px}.playback .primary,.playback .outline{padding:10px 18px}.mini-face{grid-template-columns:repeat(3,20px)}.mini-face i{width:20px;height:20px}.toast{font-size:14px;width:max-content;max-width:90vw}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
[hidden]{display:none!important}.instruction-card p,.steps li{font-size:16px}.option-button{min-height:36px}.mobile-buddy{display:none}
@media(max-width:620px){.mobile-buddy{display:block;width:74px;height:91px;object-fit:contain;flex-shrink:0;align-self:center}.lesson-top{gap:10px}.lesson-top>div{min-width:0}.lesson-top h1{font-size:25px}}
/* A single small goal takes the place of the always-open course map. */
.topbar{height:84px}.app-shell{display:block;max-width:1140px;padding:20px 30px 35px}.sidebar{display:none;padding:17px 20px;margin-bottom:20px;border:1px solid #d4ddec;border-radius:17px;background:#fff}.sidebar.open{display:block}.sidebar #lesson-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.sidebar .progress-card{padding-top:10px;margin-top:10px;display:flex;gap:20px;align-items:center}.sidebar progress{max-width:260px;margin:0}.sidebar .progress-card strong{white-space:nowrap}.mode-nav{display:flex;max-width:570px;margin:23px auto 0;padding:5px;background:#e7ecfa;border-radius:16px;gap:5px}.mode-nav a{flex:1;text-align:center;text-decoration:none;color:#65718a;font-size:17px;font-weight:850;padding:10px 13px;border:2px solid transparent;border-radius:12px;line-height:1.4}.mode-nav a span{display:block;font-size:12px;font-weight:500;margin-top:3px}.mode-nav a.active{background:white;border-color:#c6d2f7;color:var(--blue);box-shadow:0 2px 0 #d2dcf0}#show-map{display:block}.lesson-top{margin-bottom:17px}.lesson-buddy{height:104px;width:92px;object-fit:contain}.lesson-top h1{font-size:31px}.subtitle{font-size:15px}.hold-strip{display:flex;align-items:center;gap:14px;background:#e6edff;border:1px solid #c7d6ff;border-radius:14px;padding:13px 18px;margin-bottom:20px;color:#304e9c;font-size:15px;line-height:1.75}.hold-strip strong{white-space:nowrap;color:var(--blue);font-size:14px}.classroom{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:25px}.demo-card{padding:17px 20px 18px}.case-picker{font-size:13px;color:var(--muted);display:block;margin-top:13px}.case-picker select{display:block;width:100%;font:inherit;font-size:16px;color:var(--ink);font-weight:700;margin-top:6px;padding:10px 35px 10px 12px;border:2px solid #cad5ec;border-radius:10px;background:#f8faff;min-height:46px}.single-case{font-size:14px;font-weight:750;color:#53678f;margin:15px 0 0}.cube-wrap{margin:0 -10px}#cube{max-height:310px}.demo-caption{font-size:13px;line-height:1.8;margin:6px 0 11px;min-height:0}.action-readout{background:#edf2ff;border-radius:12px;padding:11px 13px;text-align:center}.action-readout #move-counter{font-size:12px;color:var(--blue)}#move-description{font-size:18px;font-weight:850;color:var(--ink);line-height:1.6;margin-top:1px;min-height:29px}.turn-rule{font-size:12px;color:var(--muted);line-height:1.6;text-align:center;margin:9px 4px 13px}.playback{flex-wrap:wrap}.playback .primary,.playback .outline{font-size:15px}.formula-panel{margin-top:16px}.formula-panel summary{font-size:13px;color:#6b7892;font-weight:500}.formula-panel p{font-size:12px;color:var(--muted);line-height:1.8}.instruction-card{padding:20px 21px;margin-bottom:12px}.instruction-card h2{font-size:18px}.steps li{font-size:16px;margin:16px 0;line-height:1.9;padding-left:29px}.steps li strong{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}.repeat-tip{font-size:14px;padding:12px 16px;background:#fff4cc;border:1px solid #efda9c;border-radius:12px;color:#775c26;line-height:1.85;margin:0 0 13px}.repeat-tip.critical{border:2px solid #e6ac37;font-weight:700}.help-item{background:#fff;border:1px solid #dbe3f0;border-radius:12px;padding:11px 15px;margin:10px 0}.help-item summary{font-size:14px;color:#476099;padding:3px 0}.help-body p{font-size:14px;line-height:1.9;color:#5e6b82;margin:10px 0}.help-body strong{color:var(--ink)}.goal-check{display:flex;gap:17px;align-items:center;background:#e7f8ef;border:1px solid #b5dfc8;border-radius:15px;padding:16px 21px;margin-top:20px}.goal-check strong{font-size:15px;color:#286448}.goal-check p{font-size:16px;line-height:1.8;color:#347057;margin:4px 0 0}.goal-face{display:grid;grid-template-columns:repeat(3,18px);gap:3px;background:#34466d;padding:4px;border-radius:7px;width:max-content}.goal-face i{height:18px;border-radius:3px}.goal-face .muted{background:#7892af}.goal-face .white{background:#fff}.goal-face .yellow{background:#ffdc58}.lesson-bottom{margin-top:16px;padding-top:0;border:0}.complete-button{background:var(--blue);color:#fff;border-color:#2447c8;box-shadow:0 3px 0 #173499;min-width:240px}.review-step{display:block;margin:13px auto 0}.success-message{padding:22px;background:#fff1b8;border:2px solid #dfba48;border-radius:15px;text-align:center;font-weight:850;margin-top:17px}.page-hint{margin:17px 0}.solver-view{max-width:1080px;margin:0 auto;padding:25px 30px 40px}select:focus-visible{outline:3px solid #efb442;outline-offset:3px}
@media(max-width:850px){.sidebar.open #lesson-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.classroom{grid-template-columns:1fr 1fr}.app-shell{padding:20px 20px 30px}.steps li{font-size:15px}.instruction-card{padding:15px}.hold-strip{font-size:14px}.lesson-top h1{font-size:27px}}
@media(max-width:620px){.topbar{height:76px}.mode-nav{margin:14px 17px 0}.mode-nav a{font-size:16px;padding:8px}.mode-nav a span{font-size:11px}.app-shell{padding:18px 17px 30px}.lesson-top{gap:8px}.lesson-top h1{font-size:25px}.lesson-top .subtitle{font-size:14px}.lesson-buddy{width:66px;height:89px;align-self:flex-start}.hold-strip{display:block;padding:11px 14px;font-size:14px;margin-bottom:15px}.hold-strip strong{display:block;margin-bottom:2px}.classroom{display:flex;flex-direction:column;gap:5px}.demo-card{padding:15px 17px}.cube-wrap{margin:0 -3px}#cube{max-height:285px}.demo-caption{font-size:13px}.case-picker{margin-top:9px}.case-picker select{font-size:15px}.demo-footnote{margin:10px 0 13px}.instruction-card{padding:18px}.steps li{font-size:16px}.goal-check{padding:14px;gap:13px}.goal-check p{font-size:15px}.lesson-bottom>.complete-button{order:0;flex:1;min-width:0;width:auto;font-size:14px;padding:10px 13px}.lesson-bottom>.outline{flex:0 0 auto;padding:10px 15px}.goal-face{grid-template-columns:repeat(3,15px)}.goal-face i{height:15px}.solver-view{padding:20px 17px 35px}.sidebar{padding:14px}.sidebar .nav-item{font-size:13px}.sidebar .progress-card{display:block}.sidebar progress{margin-top:8px;width:100%;max-width:none}.sidebar.open #lesson-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
.solver-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.solver-title h1{font-size:30px}.setup-help{margin:0 0 22px;background:#eef3ff}.fill-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:25px;align-items:start}.fill-card{padding:22px;background:#fff;border:2px solid var(--ink);border-radius:22px;box-shadow:var(--shadow)}.face-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.face-tab{border:1px solid #d9e1ef;border-radius:9px;background:#f8faff;color:#63718b;padding:8px 2px;font-size:12px;line-height:1.4}.face-tab small{display:block;font-size:10px;margin-top:3px}.face-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}.face-holding{text-align:center;font-size:18px;background:#edf2ff;border-radius:11px;padding:12px 8px;margin-top:18px;color:#294caa;line-height:1.75}.face-holding strong{display:block;font-weight:850}.face-holding span{font-size:14px}.face-orientation-note{font-size:13px;color:#778299;line-height:1.8;text-align:center;margin:11px 0}.face-editor{display:grid;grid-template-columns:auto;justify-items:center;gap:9px;margin-top:18px}.neighbor{display:flex;align-items:center;gap:6px;color:#64748d;font-size:12px}.neighbor i{display:inline-block;border:1px solid #71819a;width:13px;height:13px;border-radius:3px}.paint-grid{display:grid;grid-template-columns:repeat(3,78px);gap:7px;padding:8px;border:2px solid #23345b;background:#23345b;border-radius:14px}.paint-cell{border:0;border-radius:7px;width:78px;height:78px;min-height:44px;background:var(--cell-color);display:grid;place-items:center;color:#263354;font-size:21px;font-weight:800;box-shadow:inset 0 -3px 0 #172e501a}.paint-cell:hover{outline:3px solid #f1c247;outline-offset:0}.paint-cell.empty{color:#aeb9cd;font-size:31px}.paint-cell:disabled{opacity:1;cursor:default}.paint-cell small{display:block;font-size:11px;font-weight:600;line-height:1.2;margin-top:3px}.fixed-center-note{text-align:center;font-size:12px;color:var(--muted);margin:12px 0 18px}.face-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px}.face-pagination>span{font-size:12px;color:var(--muted);white-space:nowrap}.face-pagination button{font-size:14px;padding:9px 14px}.paint-controls{padding:7px 0}.paint-controls h2{font-size:19px;margin:0 0 13px}.palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.color-choice{display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid #dce4f0;border-radius:12px;min-height:63px;padding:9px 6px;background:white;color:#465774;font-size:14px;text-align:left}.color-choice i{display:block;width:23px;height:30px;border:1px solid #52658888;border-radius:5px;flex-shrink:0}.color-choice small{display:block;font-size:11px;color:#79869b}.color-choice.selected{border-color:var(--blue);outline:2px solid #c0d0ff;background:#edf2ff}.color-choice.too-many small{color:#bc3838;font-weight:800}.palette-help{font-size:14px;color:#69768f;line-height:1.85;margin:14px 0 3px}#eraser.selected{background:#dce6ff;border-radius:7px;color:var(--blue);font-weight:800}.fill-progress{border-top:2px dashed #d3ddeb;margin-top:20px;padding-top:16px}.fill-progress strong{font-size:15px}.fill-progress span{display:block;color:#7d889c;font-size:12px;line-height:1.8;margin-top:6px}.solve-button{width:100%;margin-top:20px;min-height:53px;font-size:16px}.fill-utilities{display:flex;justify-content:space-between;margin-top:12px;gap:12px}.solver-footnote{font-size:12px;color:#8691a5;line-height:1.8;margin:16px 0}.fill-error{background:#fff0e8;border:1px solid #edb4a2;border-radius:10px;padding:12px 14px;font-size:14px;color:#984327;line-height:1.85;margin-top:15px}.example-notice{background:#fff2c8;border:1px solid #eacf85;color:#7c6126;padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.8;margin:13px 0}.solving-panel{min-height:370px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#fff;border:2px solid #cedaf5;border-radius:20px;padding:40px}.solving-panel h2{font-size:21px}.solving-panel p{font-size:15px;color:var(--muted);max-width:440px;line-height:1.9;margin:0 0 23px}.loader{border:5px solid #e0e8f9;border-top-color:var(--blue);width:45px;height:45px;border-radius:50%;animation:spinning 1s linear infinite}@keyframes spinning{to{transform:rotate(360deg)}}.replay-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:25px;align-items:start}#replay-cube{display:block;width:100%;height:auto;max-height:380px}#replay-action{font-size:22px;font-weight:850;line-height:1.65}.replay-direction{font-size:14px;color:#617392;line-height:1.9;text-align:center;min-height:55px;margin:12px 4px}.replay-buttons{display:flex;justify-content:center;gap:9px}.replay-buttons button{font-size:15px}.replay-buttons .primary{flex:1}.replay-buttons+.progress{margin-top:18px}#replay-progress{margin-top:22px}#replay-counter{font-size:13px;color:var(--blue)}.solution-list{font-size:14px;margin-top:10px;max-height:270px;overflow-y:auto}.solution-row{display:flex;gap:12px;padding:8px;border-bottom:1px solid #edf1f8;align-items:center;color:#66748d}.solution-row>span{font-size:12px;color:#8693a9;min-width:20px}.solution-row small{margin-left:auto;color:#96a1b5}.solution-row.active{background:#e9efff;color:var(--blue);border-radius:6px;font-weight:750}.solver-credit{margin-top:30px;gap:15px}.solver-credit a{color:#7589b3}.replay-guide .instruction-card h2{font-size:18px}#refill-current{margin:9px 0}#color-tools .text-button{min-height:40px}
@media(max-width:850px){.fill-layout{gap:18px;grid-template-columns:minmax(0,1.05fr) minmax(265px,.95fr)}.fill-card{padding:16px}.paint-grid{grid-template-columns:repeat(3,66px)}.paint-cell{width:66px;height:66px}.face-tabs{grid-template-columns:repeat(3,1fr)}.face-tab{font-size:13px}.face-holding{font-size:17px}.palette{gap:6px}.color-choice{font-size:13px;gap:5px}.color-choice i{width:19px}.replay-layout{gap:17px}}
@media(max-width:680px){.solver-title h1{font-size:25px}.solver-title .lesson-buddy{width:61px;height:82px}.fill-layout{display:flex;flex-direction:column;gap:17px}.fill-card,.paint-controls{width:100%;min-width:0}.fill-card{padding:14px}.face-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.face-tab{font-size:13px;padding:7px}.face-tab small{display:inline;margin-left:6px;font-size:11px}.face-holding{font-size:18px;margin-top:13px;padding:9px}.face-holding strong{display:inline}.face-holding span{font-size:14px;display:block}.face-orientation-note{font-size:12px;margin:8px 0;line-height:1.7}.paint-grid{grid-template-columns:repeat(3,72px);gap:6px;padding:7px}.paint-cell{width:72px;height:72px;font-size:20px}.face-editor{margin-top:9px}.paint-controls{padding:0 5px}.palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.color-choice{min-height:56px;padding:5px 1px;display:flex;flex-direction:column;gap:2px;text-align:center;font-size:11px;border-radius:8px}.color-choice i{width:21px;height:16px}.color-choice small{font-size:10px}.color-choice.selected{outline-width:1px}#color-tools h2{display:none}.palette-help{display:none}#color-tools .text-button{font-size:11px;min-height:29px;padding:3px}#mobile-palette{position:sticky;top:5px;background:white;z-index:3;border-radius:9px;box-shadow:0 3px 7px #d2dcf233;padding-top:7px;margin-top:9px}.fill-progress{margin-top:0;padding-top:10px}.solve-button{margin-top:15px}.fill-utilities .text-button{font-size:13px}.setup-help{margin-bottom:15px}.setup-help summary{font-size:13px}.fixed-center-note{font-size:11px;margin:7px 0 12px}.face-pagination button{min-height:44px}.replay-layout{display:flex;flex-direction:column;gap:17px}.replay-layout>.demo-card,.replay-guide{width:100%}#replay-cube{max-height:300px}#replay-action{font-size:20px}.replay-direction{font-size:14px}.replay-buttons button{padding:10px 15px}.solving-panel{padding:26px 17px;min-height:320px}.solving-panel h2{font-size:19px}.solver-credit{font-size:11px}.solver-view>section>h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){.loader{animation:none;border-color:#315bea}}
.offline-license{margin:20px auto;max-width:1020px;padding:15px 20px;font-size:12px;color:#78859b}.offline-license pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7}

/* The cube owns the screen until the player asks for a lesson. */
body.playing-cube{height:100vh;height:100dvh;overflow:hidden;background:#f5f7ff}
.playing-cube>.topbar,.playing-cube>.mode-nav,.playing-cube>#toast,.playing-cube>.offline-license{display:none!important}
.play-view{position:relative;height:100vh;height:100dvh;min-height:260px;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#fff 0%,#f8faff 40%,#eaf0ff 100%);padding:24px 20px max(25px,env(safe-area-inset-bottom));isolation:isolate}
.play-help{position:absolute;right:max(30px,env(safe-area-inset-right));top:max(26px,env(safe-area-inset-top));z-index:2;background:#ffdc62;color:#40371f;text-decoration:none;border:2px solid #d7b546;border-radius:18px;padding:11px 23px;font-weight:800;font-size:17px;box-shadow:0 4px 0 #e5c458;transition:transform .15s}
.play-help:hover{transform:translateY(-2px)}.play-help:active{transform:translateY(2px)}
.play-arena{min-height:0;width:100%;flex:1;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.play-arena.dragging{cursor:grabbing}
#play-cube{display:block;width:min(100%,1100px);height:100%;max-height:900px;overflow:visible;touch-action:none;outline:none}
#play-cube:focus-visible{outline:2px dashed #8ba7e2;outline-offset:-8px;border-radius:20px}
#play-cube polygon[data-center="false"]{cursor:pointer;transition:filter .1s}
#play-cube polygon[data-center="false"]:hover{filter:brightness(1.09);stroke:#526bab;stroke-width:4}
#play-cube polygon:focus-visible{outline:none;stroke:#926000;stroke-width:6;filter:brightness(1.12)}
#play-cube[aria-busy="true"] polygon{cursor:wait;pointer-events:none}
.play-tools{display:flex;flex:0 0 auto;gap:10px;padding:9px 12px;align-items:center;border:1px solid #dce5f5;border-radius:25px;background:#ffffffdb;box-shadow:0 7px 30px #7892bd18;z-index:2}
.play-tool{display:grid;place-items:center;width:49px;height:49px;border:0;border-radius:16px;background:transparent;color:#546487;padding:12px;transition:background .15s,transform .15s}
.play-tool:hover{background:#edf2ff;color:#315bea}.play-tool:active{transform:scale(.93)}.play-tool:disabled{opacity:.3}
.play-tool svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#play-direction[aria-pressed="true"]{background:#ffefb3;color:#755b12}#play-direction[aria-pressed="true"] svg{transform:scaleX(-1)}
.sound-slash{display:none}.play-tool[aria-pressed="false"] .sound-slash{display:block}
.mode-nav>a{flex:1}
@media(max-width:620px){.play-view{padding:78px 0 max(27px,env(safe-area-inset-bottom))}.play-help{right:20px;top:max(21px,env(safe-area-inset-top));font-size:16px;padding:8px 19px;border-radius:15px}.play-tools{gap:6px;padding:7px 10px;border-radius:22px}.play-tool{width:46px;height:46px;padding:11px}.mode-nav{gap:5px}.mode-nav a{padding:10px 7px;font-size:13px}.mode-nav a span{font-size:10px}.play-arena{width:108%;max-width:108%}}
@media(max-height:500px) and (min-width:621px){.play-view{padding:7px 86px}.play-help{top:16px;right:17px;font-size:14px;padding:7px 14px}.play-tools{position:absolute;bottom:13px;right:16px;flex-direction:column;gap:0;padding:5px}.play-tool{width:37px;height:37px;padding:8px}#play-cube{max-height:100%}}

.play-arena.turning,.play-arena.turning polygon{cursor:grabbing!important}
#play-cube polygon[data-center="true"]{cursor:grab}
#play-cube polygon[data-sticker]:hover{filter:none}
#play-cube polygon[data-center="false"]:hover{stroke:#1c273a;stroke-width:1}

.current-cube-help .play-view{display:grid;grid-template-columns:minmax(0,1fr) 355px;grid-template-rows:minmax(0,1fr);gap:24px;padding:24px 28px 24px 12px}
.current-cube-help .play-arena{grid-column:1;grid-row:1;min-width:0;min-height:0;height:100%;width:100%;max-width:100%}
.current-cube-help .play-tools,.current-cube-help #play-help{display:none}
.current-help-panel{grid-column:2;grid-row:1;align-self:center;background:#fff;border:1px solid #dbe3f1;border-radius:24px;padding:24px;box-shadow:0 8px 35px #6782b019;max-height:calc(100dvh - 48px);overflow-y:auto}
.current-help-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;line-height:1.5}
.current-help-kicker{color:#6e7f9f}.current-help-heading a{font-weight:750;text-underline-offset:4px}
.current-help-panel h1{font-size:25px;line-height:1.45;margin:19px 0 8px;letter-spacing:0}
.current-help-status{color:#647590;font-size:14px;line-height:1.7;min-height:24px;margin:0 0 18px}
.current-help-task{background:#f1f5ff;border:1px solid #d8e3fa;border-radius:16px;padding:18px}
.current-help-task strong{font-size:19px;line-height:1.6;color:#294981;display:block}
.current-help-task p{font-size:15px;line-height:1.9;color:#5f7190;margin:8px 0 0;min-height:52px}
.current-help-panel progress{margin:20px 0 16px;height:8px;display:block}
.current-help-actions{display:flex;gap:10px}.current-help-actions .primary{flex:1;padding:12px 9px}.current-help-actions .outline{padding:12px 14px}
.current-help-note{font-size:13px;color:#71819c;line-height:1.8;margin:17px 0 11px}
.current-help-lessons{font-size:13px;color:#7c8ba5;text-underline-offset:4px}
#current-help-retry{margin-top:10px;width:100%}
.current-cube-help #play-cube polygon[data-sticker]{cursor:default}
@media(max-width:680px){
.current-cube-help .play-view{grid-template-columns:1fr;grid-template-rows:minmax(160px,1fr) auto;gap:4px;padding:8px 14px max(12px,env(safe-area-inset-bottom))}
.current-cube-help .play-arena{grid-column:1;grid-row:1;width:100%;max-width:100%}
.current-help-panel{grid-column:1;grid-row:2;align-self:stretch;width:100%;padding:16px 18px;border-radius:21px;max-height:52dvh}
.current-help-panel h1{font-size:22px;margin:10px 0 5px}.current-help-status{font-size:13px;margin-bottom:11px;min-height:0}
.current-help-task{padding:12px 14px}.current-help-task strong{font-size:17px}.current-help-task p{font-size:14px;line-height:1.75;margin-top:5px;min-height:0}
.current-help-panel progress{margin:13px 0 11px}.current-help-actions .primary,.current-help-actions .outline{padding:9px 11px;min-height:44px;font-size:14px}
.current-help-note{font-size:12px;margin:10px 0 4px}.current-help-lessons{font-size:12px}
}
@media(max-height:500px) and (min-width:681px){.current-cube-help .play-view{grid-template-columns:minmax(0,1fr) 320px;gap:10px;padding:10px}.current-help-panel{padding:16px;max-height:calc(100dvh - 20px)}.current-help-panel h1{font-size:21px;margin-top:10px}}

.play-teaching{position:absolute;top:max(26px,env(safe-area-inset-top));left:max(30px,env(safe-area-inset-left));z-index:2;display:flex;align-items:center;gap:8px;border:1px solid #d4def3;border-radius:18px;padding:11px 20px;background:#ffffffec;color:#506387;text-decoration:none;font-size:17px;font-weight:750;box-shadow:0 3px 0 #e1e8f4}
.play-teaching svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.play-teaching:hover{background:#fff;transform:translateY(-1px)}.current-cube-help #play-teaching{display:none}
.current-help-learning{display:flex;flex-wrap:wrap;gap:18px}.mode-nav{max-width:760px}
@media(max-width:620px){.play-teaching{left:20px;top:max(21px,env(safe-area-inset-top));padding:8px 16px;border-radius:15px;font-size:16px;gap:7px}.play-teaching svg{width:18px;height:18px}.mode-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mode-nav a{font-size:14px;padding:8px 10px}.mode-nav a span{font-size:11px}}
@media(max-height:500px) and (min-width:621px){.play-teaching{top:16px;left:17px;font-size:14px;padding:7px 14px}}

.teaching-view{max-width:1160px;margin:0 auto;padding:27px 30px 45px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px 30px;align-items:start}
.teaching-header{grid-column:1/-1}.teaching-header h1{font-size:30px;margin:0 0 9px}.teaching-note{margin:0;color:#71809b;font-size:14px;line-height:1.8;max-width:820px}
.teaching-steps{grid-column:1;display:flex;flex-direction:column;gap:8px;position:sticky;top:20px}
.teaching-step-button{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:11px 12px;text-align:left;border:1px solid #dce3f1;border-radius:13px;background:#fff;color:#62738f;font-size:14px;line-height:1.5}
.teaching-step-number{width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;border-radius:9px;background:#edf2fb;color:#657798;font-weight:800}
.teaching-step-name{font-weight:700}.teaching-step-button[aria-current="step"]{background:#315bea;border-color:#315bea;color:#fff;box-shadow:0 3px 0 #2448bd}.teaching-step-button[aria-current="step"] .teaching-step-number{background:#fff;color:#315bea}
.teaching-page{grid-column:2;min-width:0;background:#fff;border:1px solid #dde5f3;border-radius:23px;padding:24px;box-shadow:0 5px 0 #e9edf7}
.teaching-page-heading{margin-bottom:18px}.teaching-step-title{font-size:24px;line-height:1.5;margin:0 0 13px}
.teaching-reminders{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.teaching-reminders>div{border-radius:12px;background:#f1f5ff;padding:12px 14px;min-width:0}
.teaching-reminders dt{font-size:12px;color:#315bea;font-weight:800;margin-bottom:4px}.teaching-reminders dd{font-size:14px;line-height:1.8;color:#5a6d8b;margin:0}
.teaching-reminders>.teaching-reminder-important{background:#fff4d6;border:1px solid #ebd496}.teaching-reminder-important dt{color:#826213}
.teaching-image-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 12px}
.teaching-page-count{font-size:13px;color:#7b8aa3}
.teaching-open-zoom,.teaching-prev,.teaching-next{font:inherit;font-size:14px;font-weight:750;border:1px solid #cbd7ed;border-radius:11px;background:#fff;color:#46659e;min-height:43px;padding:9px 16px}
.teaching-open-zoom{background:#edf3ff;border-color:#d6e2fa;color:#315bea}
.teaching-figure{margin:0;border:1px solid #e4e8ef;border-radius:12px;overflow:hidden;background:#fff}
.teaching-image{display:block;width:100%;max-width:690px;height:auto;margin:0 auto;cursor:zoom-in}
.teaching-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.teaching-next{background:#315bea;border-color:#2447c8;color:#fff;box-shadow:0 2px 0 #2447c8}.teaching-prev:disabled,.teaching-next:disabled{opacity:.35;box-shadow:none}
.teaching-dialog{border:0;border-radius:19px;padding:0;width:min(96vw,820px);height:92vh;height:92dvh;max-width:96vw;max-height:94dvh;color:#243756;background:#fff;box-shadow:0 18px 80px #12244155}
.teaching-dialog[open]{display:flex;flex-direction:column}.teaching-dialog::backdrop{background:#18233ac2}
.teaching-dialog-header{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid #e0e6f1}
.teaching-dialog-header h2{font-size:17px;margin:0;line-height:1.4}
.teaching-close{min-width:56px;min-height:42px;border:1px solid #d4dfef;background:#fff;border-radius:10px;color:#496284;font:inherit;font-size:14px}
.teaching-zoom-controls{display:flex;gap:8px;padding:10px 18px;flex:0 0 auto;align-items:center;flex-wrap:wrap}
.teaching-zoom-button{font:inherit;font-size:13px;min-width:64px;min-height:38px;border:1px solid #d4dfef;border-radius:9px;background:#fff;color:#536d91;padding:6px 12px}
.teaching-zoom-button[aria-pressed="true"]{background:#315bea;color:#fff;border-color:#315bea}
.teaching-zoom-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;min-width:0;flex:1;background:#edf1f7;padding:12px;-webkit-overflow-scrolling:touch}
.teaching-zoom-image{display:block;height:auto;max-width:none;background:white}
@media(max-width:780px){.teaching-view{display:block;padding:21px 17px 32px}.teaching-header h1{font-size:26px}.teaching-note{font-size:13px}.teaching-steps{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:18px 0}.teaching-step-button{flex-direction:column;align-items:flex-start;gap:6px;min-height:86px;padding:9px 10px;font-size:12px;line-height:1.45}.teaching-step-number{width:25px;height:25px;flex-basis:25px;border-radius:8px}.teaching-page{padding:17px 14px;border-radius:18px}.teaching-step-title{font-size:21px;margin-bottom:12px}.teaching-reminders{grid-template-columns:1fr;gap:8px}.teaching-reminders>div{padding:10px 12px}.teaching-reminders dd{font-size:14px}.teaching-page-heading{margin-bottom:10px}.teaching-image-toolbar{margin:14px 0 10px}.teaching-open-zoom{padding:8px 12px}.teaching-pager{margin-top:15px}.teaching-dialog-header{padding:10px 12px}.teaching-dialog-header h2{font-size:15px}.teaching-zoom-controls{padding:8px 12px}.teaching-zoom-scroll{padding:8px}}
/* The lesson and free-play views share the same cube controls. */
.lesson-arena{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.lesson-arena.dragging,.lesson-arena.turning,.lesson-arena.turning polygon{cursor:grabbing!important}
.lesson-arena [data-sticker]{cursor:grab}.lesson-arena [data-sticker]:focus-visible{outline:none;stroke:#b77400;stroke-width:5}
.lesson-interaction-hint{font-size:12px;line-height:1.6;color:#657898;text-align:center;margin:3px 0 8px}
.lesson-tools{display:flex;align-items:center;justify-content:center;gap:9px;margin:6px 0 12px}
.lesson-tool{width:40px;height:40px;padding:10px;background:#f1f5fd;border-radius:12px}
.lesson-home{min-height:40px;padding:8px 12px;background:#f1f5fd;border:1px solid #dce5f5;border-radius:10px;color:#526d96;font:inherit;font-size:12px}
.lesson-home:disabled{opacity:.45}
.play-music-panel{position:absolute;z-index:5;right:max(20px,env(safe-area-inset-right));bottom:max(120px,calc(env(safe-area-inset-bottom) + 108px));width:min(330px,calc(100% - 40px));padding:18px;background:#fffffffa;border:1px solid #d5e0f4;border-radius:22px;box-shadow:0 12px 40px #314f942b;max-height:calc(100dvh - 145px);overflow:auto}
.music-heading{display:flex;align-items:center;justify-content:space-between;color:#263957;margin-bottom:12px}
#music-close{width:36px;height:36px;border:0;border-radius:10px;background:#f0f4fd;color:#596d90;font-size:24px;line-height:1}
.music-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.music-modes button{min-height:74px;text-align:left;border:1px solid #d8e2f5;border-radius:13px;background:#f7f9ff;padding:12px;color:#4e668d;font:inherit}
.music-modes b{display:block;font-size:15px}.music-modes span{display:block;font-size:11px;line-height:1.6;margin-top:5px}
.music-modes [aria-pressed="true"]{border-color:#315bea;background:#eaf0ff;color:#315bea;box-shadow:inset 0 0 0 1px #315bea}
.music-modes [data-music-mode="off"]{grid-column:1/-1;min-height:39px;padding:8px 12px;text-align:center;font-size:13px}
.music-volume{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;margin-top:17px;font-size:12px;color:#637794}
.music-volume input{min-width:0;width:100%;accent-color:#315bea}#music-now{font-size:11px;line-height:1.7;color:#7b8ba4;margin:12px 0 0}
#play-music[aria-expanded="true"],#play-music[data-playing="true"]{background:#eaf0ff;color:#315bea}
.current-cube-help #play-music,.current-cube-help #play-music-panel{display:none}
@media(max-width:620px){.lesson-tool{width:40px;height:40px}.play-music-panel{bottom:max(105px,calc(env(safe-area-inset-bottom) + 95px));padding:15px;border-radius:18px}.play-tools{gap:4px;padding:7px 9px}}
@media(max-height:500px) and (min-width:621px){.play-music-panel{bottom:80px;max-height:calc(100dvh - 100px)}}
/* Five material choices share the same state-preserving controller. */
.cube-material-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;flex:0 0 auto;z-index:2}
.cube-material-picker button{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:53px;padding:4px 6px;border:1px solid #d9e1ee;border-radius:15px;background:#ffffffd9;color:#71809a;font:inherit;box-shadow:0 3px 8px #425b8110;transition:background .15s,border-color .15s}
.cube-material-picker img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.cube-material-picker span{text-align:left}.cube-material-picker b{display:block;font-size:13px;line-height:1.5;white-space:nowrap}.cube-material-picker small{display:block;font-size:10px;line-height:1.5;white-space:nowrap}
.cube-material-picker button[aria-pressed="true"]{background:#edf2ff;border-color:#5579d3;color:#3158ad;box-shadow:0 0 0 1px #5579d3}
@media(hover:hover){.cube-material-picker button:hover{background:#f1f5ff}}
#play-materials{position:absolute;top:max(25px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:540px;max-width:calc(100% - 32px)}
.playing-cube:not(.current-cube-help) .play-view{padding-top:87px}
#lesson-materials{margin:14px auto 4px;gap:5px;width:100%;max-width:390px}
#lesson-materials button{flex-direction:column;padding:4px 2px;border-radius:11px;min-height:57px;gap:1px}
#lesson-materials img{width:30px;height:30px}
#lesson-materials span{text-align:center}#lesson-materials b{font-size:11px}#lesson-materials small{display:none}
.current-cube-help #play-materials{display:none}
@media(max-width:900px){
 #play-materials{top:max(85px,calc(env(safe-area-inset-top) + 65px));gap:7px;width:360px}
 #play-materials button{flex-direction:column;padding:4px 3px;min-height:65px;gap:0;border-radius:13px}
 #play-materials img{width:34px;height:34px}
 #play-materials span{text-align:center}#play-materials b{font-size:12px}#play-materials small{display:none}
 .playing-cube:not(.current-cube-help) .play-view{padding-top:162px}
}
@media(max-width:360px){#play-materials{gap:5px}#play-materials img{width:31px;height:31px}#lesson-materials{gap:4px}#lesson-materials img{width:27px;height:27px}}
@media(max-height:500px) and (min-width:621px){
 #play-materials{top:10px;width:370px;max-width:calc(100% - 280px)}#play-materials button{flex-direction:row;min-height:40px;padding:2px 5px;border-radius:11px}#play-materials img{width:29px;height:29px}#play-materials b{font-size:11px}#play-materials small{display:none}
 .playing-cube:not(.current-cube-help) .play-view{padding-top:53px}
}