.adv{padding-bottom:24px}.adv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.adv-top .back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 0;border:0;background:none;font-size:16px;font-weight:800;color:var(--ink);text-decoration:none;cursor:pointer}.adv-top .back .arrow{width:18px;height:18px}.progress{display:flex;align-items:center;gap:8px}.progress .dots{display:inline-flex;gap:5px}.progress .dots i{width:11px;height:11px;border-radius:50%;background:#dcded6}.progress .dots i.done{background:var(--flower)}.progress .dots i.current{box-shadow:0 0 0 2px var(--ink);background:var(--action)}.progress .dots i.done.current{background:var(--flower)}.progress-label{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2f5156;white-space:nowrap}.lesson-meta{margin-top:2px}.lesson-meta>summary{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:40px;cursor:pointer;list-style:none;border-radius:10px}.lesson-meta>summary::-webkit-details-marker{display:none}.lesson-chip{padding:5px 10px;border-radius:999px;background:var(--lavender-soft);color:var(--purple-deep);font-size:12.5px;font-weight:800}.how-link{font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.lesson-meta[open] .how-link{color:var(--ink)}.how-body{margin:6px 0 4px;padding:14px 16px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;line-height:1.45;color:#34474f}.how-body p+p{margin-top:8px}.how-sub{margin-top:12px!important;font-weight:800;color:var(--ink)}.behind{margin:4px 0 0;padding-left:20px}.flow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}.flow li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--ink)}.flow li+li:before{content:"→";color:var(--muted);font-weight:700}.workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"before" "stage" "after";margin-top:6px}.step-content{display:contents}.ws-before{grid-area:before}.ws-stage{grid-area:stage;margin-top:16px}.ws-after{grid-area:after}.ws-before>*+*,.ws-after>*+*{margin-top:12px}.ws-after>:first-child{margin-top:14px}.ws-before,.ws-after{animation:step-in var(--t-step) var(--ease-out) both}@keyframes step-in{0%{opacity:0;transform:translateY(12px)}}.ws-before h1{font-size:clamp(1.7rem,7.6vw,2.1rem);line-height:1.06;letter-spacing:-.03em}.ws-before h1:focus{outline:none}.step-eyebrow{margin-top:4px;color:var(--purple-deep)}.step-eyebrow+h1{margin-top:4px}.skip{display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:18px;font-size:14.5px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#52636d66}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-label,.task .tag{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2f5156}.card-status{padding:2px 8px;border-radius:999px;background:#071f230f;font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}.task{padding:12px 14px;border-radius:14px;background:#fff6ea;box-shadow:inset 4px 0 0 var(--peach)}.task p{margin-top:2px;font-size:15.5px;line-height:1.4;font-weight:600}.instruction{padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px #cfe99a}.instruction-text{margin-top:4px;font-size:16.5px;line-height:1.4;font-weight:800;letter-spacing:-.005em}.builder{display:grid;gap:12px}.b-group,.question{margin:0;padding:0;border:0;min-width:0}.b-group legend,.question legend{padding:0;font-size:14.5px;font-weight:800}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.chips-stack{flex-direction:column}.chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 14px 8px 11px;border:0;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-size:15px;font-weight:700;line-height:1.3;text-align:left;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--t-select) var(--ease-out),box-shadow var(--t-select) var(--ease-out),transform var(--t-press) var(--ease-out)}.chip:active{transform:scale(.98)}.chip:hover{box-shadow:inset 0 0 0 1.5px #b9bcb0}.chip.on{background:#f1fdd9;box-shadow:inset 0 0 0 2px #8ccf2c}.chip-box{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px #b4b8ab;transition:box-shadow var(--t-select) var(--ease-out)}.chip.on .chip-box{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 5px #f1fdd9,inset 0 0 0 9px var(--ink)}.chip-num{min-width:72px;justify-content:center;font-size:17px;font-weight:900}.chip-style .swatch{width:20px;height:20px;border-radius:6px;flex:none}.swatch-lavender{background:linear-gradient(#a48bee,#c6b3fa)}.swatch-moonlight{background:radial-gradient(circle at 70% 30%,#fffdf8 0 3px,transparent 4px),linear-gradient(#3b2969,#7652ca)}.known{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13.5px;color:var(--muted)}.known-label{font-weight:800;color:#2f5156}.known-item{display:inline-flex;align-items:center;gap:5px}.known-item.yes{color:var(--ink);font-weight:700}.known-item .check{width:16px;height:16px}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #b4b8ab;flex:none}.hints{padding:10px 14px;border-radius:12px;background:#fff3e4;box-shadow:inset 4px 0 0 var(--peach);font-size:14.5px;font-weight:700}.hints p+p{margin-top:4px}.note{font-size:14px;font-weight:700;color:var(--purple-deep)}.small-note{font-size:14px;line-height:1.4;color:var(--muted)}.context-note{padding:10px 14px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--lavender);font-size:14px;color:var(--purple-deep)}.context-note.warn{box-shadow:none;background:#fff3e4;color:var(--ink);font-weight:700}.observed{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--peach);font-size:14.5px;font-weight:800}.draft{padding:12px 14px 4px;border-radius:16px;background:var(--lavender-soft)}.draft-live{box-shadow:inset 0 0 0 2px #b7f04a}.draft .card-label{color:var(--purple-deep)}.draft-summary{margin:6px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.35}.draft-summary li{position:relative;padding-left:16px}.draft-summary li+li{margin-top:3px}.draft-summary li:before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--purple)}.change{margin-top:8px;font-size:14.5px;line-height:1.45}.change p+p{margin-top:2px}.ai-note{margin:8px 0 0;padding:8px 12px;border-radius:12px;background:var(--surface);font-size:14.5px;font-style:italic}.ai-note-label{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2f5156}.rule{margin-top:6px}.rule>summary{display:inline-flex;align-items:center;min-height:40px;font-size:14px;font-weight:800;color:var(--purple-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}.rule-caption{font-size:12px;font-weight:700;color:var(--muted)}.rule pre{margin:4px 0 10px;padding:10px 0;border-radius:10px;background:#0f2230;color:#e9e4ff;font-family:var(--font-code);font-size:12.5px;line-height:1.6;overflow-x:auto}.rule .line{display:block;padding:0 12px 0 26px;text-indent:-14px;border-left:3px solid transparent;white-space:pre-wrap;overflow-wrap:anywhere}.rule .hl-bug{background:#ffd2a038;border-left-color:var(--peach)}.rule .hl-good{background:#bff74a29;border-left-color:var(--action)}.answer{margin-top:8px;font-size:14.5px;font-weight:700}.answer.wrong{padding:8px 12px;border-radius:10px;background:#fff3e4}.test-btn{margin-top:14px!important}.compare{padding:14px 16px;border-radius:16px;background:#fff3e4;box-shadow:inset 0 0 0 1.5px var(--peach)}.compare.ok{background:#f4fde2;box-shadow:inset 0 0 0 1.5px #cfe99a}.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cmp-label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2f5156}.cmp-value{display:block;font-size:34px;font-weight:900;line-height:1.1}.cmp-verdict{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:800}.cmp-verdict .check{width:22px;height:22px;flex:none}.principle{padding:11px 14px;border-radius:12px;background:#f4fde2;font-size:15px;font-weight:700}.checks{display:grid;gap:6px;margin:0;padding:0;list-style:none}.checks li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;animation:step-in .18s var(--ease-out) both}.checks li.fail{background:#fff3e4;box-shadow:inset 0 0 0 1px var(--peach)}.checks .check{width:22px;height:22px}.c-label{font-weight:700}.c-obs{font-weight:900;text-align:right}.c-exp{display:block;font-size:12.5px;font-weight:700;color:var(--muted)}.spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(118,82,202,.25);border-top-color:var(--purple);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mode-switch,.text-button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font-size:14.5px;font-weight:700;color:var(--purple-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.text-button{display:flex;margin-inline:auto}.add-hint>summary{display:inline-flex;align-items:center;min-height:40px;font-size:14px;font-weight:800;color:var(--purple-deep);cursor:pointer}.add-hint p{font-size:14.5px;color:#34474f}.template{display:grid;gap:12px}.slot{margin:0;padding:0;border:0;min-width:0}.slot legend{padding:0;font-size:14.5px;font-weight:800}.slot-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.slot-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--t-select) var(--ease-out),box-shadow var(--t-select) var(--ease-out),transform var(--t-press) var(--ease-out)}.slot-btn.num{min-width:44px;padding:0}.slot-btn:active{transform:scale(.97)}.slot-btn.on{background:var(--ink);box-shadow:none;color:var(--action)}.chip-check .chip-box{border-radius:6px}.chip-check.on .chip-box{position:relative;box-shadow:none;background:var(--ink)}.chip-check.on .chip-box:after{content:"";position:absolute;left:5px;top:4px;width:8px;height:5px;border-left:2.5px solid var(--action);border-bottom:2.5px solid var(--action);transform:rotate(-45deg)}.live{display:grid;gap:8px;padding:14px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 2px #cfe99a}.live-label{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800}.spark-icon{width:18px;height:18px;color:var(--flower)}.live-input{width:100%;min-height:64px;padding:11px 13px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font:inherit;font-size:17px;line-height:1.35;color:var(--ink);resize:vertical}.live-input:focus{outline:3px solid var(--focus);outline-offset:1px}.suggest{display:flex;flex-wrap:wrap;gap:6px}.suggest-chip{min-height:40px;padding:6px 12px;border:0;border-radius:999px;background:var(--lavender-soft);font-size:13.5px;font-weight:700;color:var(--purple-deep);cursor:pointer}.live-privacy{font-size:13px;line-height:1.4;color:var(--muted)}.summary{padding:16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}.summary h2{font-size:19px;letter-spacing:-.015em}.summary ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.summary li{display:flex;align-items:center;gap:8px;font-size:15px}.summary li.done{font-weight:700}.summary li.todo{color:var(--muted)}.summary .check{width:20px;height:20px;flex:none}.summary-all{margin-top:10px;font-weight:800}.stage{scroll-margin-top:12px}.frame{background:var(--lavender-soft);border-radius:var(--r-game);padding:0 6px 6px;box-shadow:var(--shadow-art)}.frame.fresh{animation:fresh-ring .9s var(--ease-out)}@keyframes fresh-ring{0%{box-shadow:var(--shadow-art),0 0 #bff74ae6}to{box-shadow:var(--shadow-art),0 0 0 14px #bff74a00}}.version-badge{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 9px;border-radius:999px;background:#fffdf8e6;font-size:12.5px;font-weight:800;color:var(--purple-deep)}.version-badge.v-live{background:var(--action);color:var(--ink)}.chrome{display:flex;align-items:center;gap:10px;height:44px;padding-left:8px}.chrome .dots{display:inline-flex;gap:6px}.chrome .d{width:9px;height:9px;border-radius:50%}.chrome .d.r{background:#f26b5b}.chrome .d.y{background:#f6bd3b}.chrome .d.g{background:#5cc25b}.chrome-actions{display:inline-flex;margin-left:auto}.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--purple-deep);cursor:pointer;transition:background-color var(--t-select) var(--ease-out)}.icon-btn svg{width:20px;height:20px}.icon-btn:hover:not(:disabled){background:#4d377e14}.icon-btn:disabled{opacity:.35;cursor:default}.viewport{position:relative;aspect-ratio:4 / 3;border-radius:14px;overflow:hidden;background:#b49df2;touch-action:none;-webkit-user-select:none;user-select:none}.viewport:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:14px}.viewport canvas{width:100%;height:100%}.hud{position:absolute;top:9px;right:12px;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;color:var(--ink);pointer-events:none}.score{display:inline-block;padding:3px 10px;border-radius:999px;background:#fffdf8d1}.score .of{color:var(--muted)}.score.bumped{animation:score-pop .26s var(--ease-out)}@keyframes score-pop{40%{transform:scale(1.18);color:var(--purple-deep)}}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;background:radial-gradient(ellipse at center,#4d377e52,#4d377e1f 70%)}.overlay .btn{min-width:min(210px,80%);min-height:50px;padding:0 18px}.overlay .watch{min-height:46px;background:#fffdf8f0}@media(max-width:420px){.overlay{gap:8px}.overlay .btn{min-height:46px;font-size:16px}.overlay .watch{min-height:44px}}.overlay.quiet{font-weight:800;color:var(--surface);background:#4d377e40}.overlay-text{max-width:28ch;text-align:center;font-weight:800;color:var(--surface)}.demo-bar{position:absolute;left:50%;bottom:10px;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:4px 4px 4px 14px;border-radius:999px;background:#071f23db;color:var(--surface);font-size:13.5px;font-weight:700;white-space:nowrap}.check-bar{padding:8px 14px;gap:8px}.check-bar .spinner{width:14px;height:14px;border-color:#fffdf84d;border-top-color:var(--action)}.demo-bar button{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--action);color:var(--ink);font-size:13.5px;font-weight:800;cursor:pointer}.hint-bubble{position:absolute;left:50%;bottom:12px;transform:translate(-50%);padding:8px 12px;border-radius:12px;background:var(--surface);box-shadow:0 8px 20px -10px #071f2366;font-size:14px;font-weight:700;white-space:nowrap;pointer-events:none;animation:step-in .2s var(--ease-out) both}.controls{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;margin-top:10px}.ctrl.jump{margin-left:6px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--purple);color:#fff;font-size:18px;font-weight:900;letter-spacing:-.01em}.ctrl.jump .arrow{width:24px;height:24px}.ctrl.jump.is-pressed{background:var(--purple-deep);color:#fff}.ctrl{position:relative;display:grid;place-items:center;height:64px;border:0;border-radius:16px;background:var(--lavender-soft);color:var(--purple);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform var(--t-press) var(--ease-out),background-color var(--t-press) var(--ease-out)}.ctrl .arrow{width:30px;height:30px}.ctrl.is-pressed{transform:translateY(1px) scale(.97);background:#d6c6ff;color:var(--purple-deep)}.ctrl:disabled{opacity:.45;cursor:default}.ctrl.pulse:after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:0 0 #7652ca8c;animation:ctrl-pulse 1.1s var(--ease-out) 1}@keyframes ctrl-pulse{to{box-shadow:0 0 0 12px #7652ca00}}.keys{display:none;margin-top:10px;text-align:center;font-size:14px;color:var(--muted)}@media(hover:hover)and (pointer:fine){.keys{display:block}}@media(max-width:359px){.ctrl{height:58px}.controls{gap:8px}.progress-name{display:none}}@media(min-width:640px)and (max-width:1023px){.workspace{max-width:620px;margin-inline:auto}}@media(min-width:1024px){.workspace{grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);grid-template-areas:"before stage" "after stage";grid-template-rows:auto 1fr;column-gap:44px;align-items:start;margin-top:10px}.ws-stage{position:sticky;top:16px;margin-top:0}.ws-before h1{font-size:2.35rem}.controls{max-width:420px;margin-inline:auto}.ctrl{height:58px}.hud{font-size:18px;top:12px;right:14px}}@media(orientation:landscape)and (max-height:560px)and (min-width:600px){.workspace{max-width:none;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"before stage" "after stage";grid-template-rows:auto 1fr;column-gap:24px;align-items:start}.ws-stage{position:sticky;top:8px;margin-top:0}.ws-before h1{font-size:1.55rem}.stage{width:calc((100svh - 136px) * 4 / 3)}.ctrl{height:56px}.keys{display:none}}@media(prefers-reduced-motion:reduce){.ws-before,.ws-after,.checks li,.frame.fresh,.score.bumped,.ctrl.pulse:after{animation:none}.spinner{animation:none;border-top-color:var(--purple)}}