:root{--bg:#25294a;--card:#1a1c33;--soft:#33376a;--line:#454a85;--editor:#1e1e2e;--text:#fff;--muted:#a9aed6;--purple:#b79cf5;--blue:#63b3ff;--green:#5bd28c;--pink:#ff8fa3;--orange:#f2b880;--font:"Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;--mono:Consolas, "SF Mono", Menlo, monospace;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);line-height:1.5}code,pre,kbd{font-family:var(--mono)}:focus-visible{outline:3px solid var(--purple);outline-offset:3px}#app{flex-direction:column;min-height:100%;display:flex}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.inline-code{background:var(--soft);border-radius:7px;padding:1px 7px;font-size:.92em}.btn{background:var(--purple);min-height:44px;color:var(--card);font:700 16px/1.2 var(--font);cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:10px 22px;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:disabled{opacity:.4;cursor:default}.btn.secondary{background:var(--soft);color:var(--text);font-weight:600}.btn.small{min-height:36px;padding:6px 14px;font-size:14px}.top-bar{align-items:center;gap:12px;padding:8px 12px;display:flex}.back{min-height:44px;color:var(--muted);border-radius:8px;flex:none;align-items:center;gap:6px;padding:0 8px;font-size:15px;text-decoration:none;display:inline-flex}.back:hover{color:var(--text)}.home{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;padding:32px 16px;display:flex}.logo{align-items:center;gap:12px;margin:0;font-size:44px;line-height:1.1;display:flex}.tagline{color:var(--muted);margin:0 0 22px;font-size:21px}.privacy{text-align:center;color:var(--muted);padding:16px;font-size:14px}.page{flex:1;width:100%;max-width:652px;margin:0 auto;padding:8px 16px 40px}.page-title{text-align:center;margin:8px 0 22px;font-size:30px;line-height:1.2}.empty,.message{color:var(--muted);text-align:center}.message{flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:18px;display:flex}.message p{margin:0}.choices{gap:12px;width:100%;max-width:620px;margin:0 auto;display:grid}.choice{border:1px solid var(--line);background:var(--card);color:var(--text);text-align:left;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;font-size:18px;line-height:1.3;text-decoration:none;display:flex}a.choice:hover{border-color:var(--purple)}.choice small{color:var(--muted);margin-top:4px;font-size:14px;display:block}.choice-arrow{color:var(--muted);flex:none;font-size:20px}.choice.is-off{color:var(--muted);background:0 0;border-style:dashed}@media (width<=480px){.logo{font-size:36px}.tagline{font-size:19px}.page-title{font-size:26px}}.code-files{flex-direction:column;align-items:center;gap:14px;margin:0 0 8px;display:flex}.code-window{border:1px solid var(--line);border-radius:var(--radius);background:var(--editor);text-align:left;width:fit-content;min-width:min(100%,300px);max-width:100%;margin:0 auto;overflow:hidden}.code-tabs{background:var(--soft);gap:4px;padding:6px 8px 0;display:flex}.code-tab{background:var(--editor);color:var(--text);font:600 14px/1.2 var(--font);border:0;border-radius:9px 9px 0 0;align-items:center;gap:7px;padding:8px 14px;display:inline-flex}button.code-tab{cursor:pointer}.code-tab.is-off{color:var(--muted);background:0 0}.file-icon{font-family:var(--mono);font-weight:700}.file-icon.html{color:var(--blue)}.file-icon.css{color:var(--purple)}.code{background:var(--editor);color:#e6e8ff;font:15px/1.5 var(--mono);text-align:left;margin:0;padding:12px 16px;overflow-x:auto}.line{white-space:pre;height:1.5em}.indent-guide{vertical-align:top;height:1.5em;display:inline-block;box-shadow:inset 1px 0 #ffffff29}.tok-tag{color:var(--blue)}.tok-attr{color:var(--purple)}.tok-string{color:var(--orange)}.tok-comment{color:#8a90bf}.visual{margin:0 auto 22px}.c-blue{color:var(--blue)}.c-purple{color:var(--purple)}.c-green{color:var(--green)}.c-pink{color:var(--pink)}.c-orange{color:var(--orange)}.b-blue{border-color:var(--blue)}.b-purple{border-color:var(--purple)}.b-green{border-color:var(--green)}.b-pink{border-color:var(--pink)}.b-orange{border-color:var(--orange)}.labeled{grid-template-columns:repeat(3,auto);justify-content:center;gap:4px 14px;display:inline-grid}.labeled-part{flex-direction:column;align-items:center;display:flex}.labeled-part small,.labeled-whole small{color:var(--muted);font-size:14px;font-weight:600}.labeled-arrow{color:var(--muted)}.labeled-part code{font-size:28px;font-weight:700;line-height:1.3}.labeled-whole{border:2px solid var(--muted);border-top:0;border-radius:0 0 20px 20px;grid-column:1/-1;height:24px;margin:2px 0 26px;position:relative}.labeled-whole small{position:absolute;bottom:-26px;left:0;right:0}.nesting{border:2px solid var(--blue);text-align:left;border-radius:16px;max-width:560px;margin:0 auto;padding:12px}.nesting code{margin-bottom:8px;font-size:18px;font-weight:700;display:block}.nesting-inside{gap:12px;display:flex}.nesting-box{color:var(--muted);border:2px solid;border-radius:12px;flex:1;padding:10px 12px;font-size:15px}.cards{text-align:left;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;max-width:760px;margin:0 auto;display:grid}.card-box{border-radius:var(--radius);background:var(--card);border:2px solid;padding:12px 14px}.card-box p{color:#e6e8ff;margin:0;font-size:15px;line-height:1.45}.card-box .card-title{margin-bottom:4px;font-size:18px;font-weight:700}.flow{flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;display:flex}.flow-item{align-items:center;gap:6px;display:flex}.flow-arrow{color:var(--muted)}.flow-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);text-align:left;flex-direction:column;gap:2px;width:150px;padding:12px;display:flex}.flow-number{color:var(--purple);font-weight:700}.flow-box small{color:var(--muted);font-size:14px}.note{border-left:4px solid var(--blue);background:var(--soft);text-align:left;border-radius:10px;max-width:620px;margin:0 auto;padding:12px 16px;font-size:16px}.note p{margin:0}.mini-browser{border-radius:var(--radius) var(--radius) 0 0;background:#dde1ec;max-width:360px;margin:0 auto;padding:10px 8px 0;display:flex}.mini-browser-tab{color:#222;background:#fff;border-radius:9px 9px 0 0;align-items:center;gap:8px;max-width:75%;padding:8px 14px;font-size:14px;display:flex}.mini-browser-tab svg{color:#667;flex:none}.mini-browser-tab span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=600px){.flow,.flow-item{flex-direction:column}.flow-arrow{transform:rotate(90deg)}.flow-box{flex-flow:wrap;gap:0 8px;width:min(100%,240px);padding:8px 12px}.flow-box small{flex-basis:100%}.labeled-part code{font-size:20px}}.room{flex-direction:column;flex:1;display:flex}.room-top{z-index:2;background:var(--bg);position:sticky;top:0}.progress{background:var(--soft);border-radius:99px;flex:1;height:8px;overflow:hidden}.progress-fill{border-radius:inherit;background:var(--purple);width:0;height:100%;transition:width .3s;display:block}.room-main{outline:none;flex-direction:column;flex:1;padding:16px 16px 28px;display:flex}.step{text-align:center;width:100%;max-width:760px;margin:auto;animation:.25s both step-in}@keyframes step-in{0%{opacity:0;transform:translateY(6px)}}.big{margin:0 0 22px;font-size:21px;line-height:1.55}.options{gap:12px;max-width:620px;margin:8px auto 0;display:grid}.option{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);width:100%;min-height:52px;color:var(--text);font:17px/1.4 var(--font);text-align:left;cursor:pointer;border-bottom-width:3px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px 12px 18px;display:flex}.option:hover:not([aria-disabled=true]){border-color:var(--purple)}.option[aria-disabled=true]{opacity:.55;cursor:default}.option.is-wrong,.option.is-right{opacity:1}.option.is-wrong{border-color:var(--pink)}.option.is-right{border-color:var(--green)}.option-badge{border:1px solid var(--line);min-width:28px;height:28px;color:var(--muted);border-radius:7px;flex:none;place-items:center;font-size:13px;display:grid}.is-wrong .option-badge{border-color:var(--pink);color:var(--pink)}.is-right .option-badge{border-color:var(--green);color:var(--green)}.toolbox{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0 0 18px;font-size:14px;display:flex}.toolbox-label{color:var(--muted)}.practice-code{width:100%;max-width:620px}.practice-code .code{min-height:140px}.soon-note{color:var(--muted);margin:12px 0 0;font-size:15px}.cheat-sheet{text-align:left;max-width:700px;margin:0 auto}.cheat-sheet h2{text-align:center;margin:0 0 6px;font-size:26px}.cheat-sheet h3{color:var(--purple);margin:20px 0 4px;font-size:18px}.cheat-sheet p{color:#e6e8ff;margin:0}.cheat-sheet .credit{border-top:1px solid var(--soft);color:var(--muted);text-align:center;margin-top:28px;padding-top:14px;font-size:14px}.room-foot{z-index:2;border-top:1px solid var(--soft);background:var(--bg);flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:10px 16px;display:flex;position:sticky;bottom:0}.guide{flex:0 auto;align-items:flex-end;gap:10px;min-width:0;display:flex}.has-message .guide{flex:auto}.guide-mascot{flex:none;width:56px;line-height:0}.guide-mascot svg{width:100%;height:auto}.guide-mascot.hop{animation:.3s hop}@keyframes hop{40%{transform:translateY(-5px)}}.guide-say{flex:1;min-width:0}.bubble{border-radius:var(--radius);background:var(--soft);text-align:left;max-width:560px;padding:10px 14px;font-size:16px;line-height:1.45;animation:.2s both step-in}.bubble p{margin:0}.bubble-title{font-weight:700}.bubble .inline-code{background:var(--card)}.bubble-ok .bubble-title{color:var(--green)}.bubble-no .bubble-title{color:var(--pink)}.bubble .code{border-radius:10px;margin-top:8px;padding:8px 12px;font-size:14px}.bubble .btn{margin-top:10px}.bubble .btn.secondary{background:var(--line)}.actions{flex:none;gap:10px;margin-left:auto;display:flex}@media (width<=600px){.big{font-size:19px}.guide-mascot{width:40px}.has-message .guide{flex-basis:100%}.actions{flex:auto}.actions .btn{flex:1}.bubble{max-height:34vh;font-size:15px;overflow-y:auto}}@media (prefers-reduced-motion:reduce){.step,.bubble,.guide-mascot.hop{animation:none}.progress-fill{transition:none}}