:root{--bg: #f5f3ec;--surface: #fffefb;--ink: #1d2320;--muted: #69706b;--faint: #a3a8a2;--line: #e3e0d6;--line-strong: #cfcbbf;--accent: #138a66;--accent-ink: #fff;--accent-soft: #e2f2ea;--danger: #b4423b;--board: #fcfbf7;--board-line: #e6e2d6;--radius: 14px;--shadow: 0 1px 2px #1d23200a, 0 8px 24px #1d23200d;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;color:var(--ink);background:var(--bg);color-scheme:light;font-synthesis:none;-webkit-font-smoothing:antialiased}@media(prefers-color-scheme:dark){:root{--bg: #121513;--surface: #1a1e1b;--ink: #e9ece8;--muted: #a0a7a1;--faint: #6f766f;--line: #2a302c;--line-strong: #3a423d;--accent: #3cc493;--accent-ink: #08241a;--accent-soft: #173226;--danger: #f08a80;--board-line: #3a423d;--shadow: 0 1px 2px #0006, 0 8px 24px #0005;color-scheme:dark}}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);overflow-x:clip}html{overflow-x:clip}button,input,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}a{color:inherit}.app{max-width:1120px;margin:0 auto;padding:0 24px 64px}.top{display:flex;align-items:center;justify-content:space-between;height:72px}.wordmark{font-family:Caveat,cursive;font-weight:700;font-size:34px;letter-spacing:-.5px;text-decoration:none;line-height:1}.wordmark i{color:var(--accent);font-style:normal}.account{position:relative}.account summary{list-style:none;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600;font-size:14px}.account summary::-webkit-details-marker{display:none}.account-menu{position:absolute;right:0;top:42px;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:220px}.account-menu p{margin:0;padding:8px 10px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}.account-menu button{width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;font-size:14px}.account-menu button:hover{background:var(--bg)}.back{display:inline-flex;gap:6px;align-items:center;color:var(--muted);text-decoration:none;font-size:14px;margin:8px 0 18px}.back:hover{color:var(--ink)}h1{font-size:clamp(26px,4vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:650;margin:0}.sub{color:var(--muted);margin:6px 0 0;font-size:15px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);font-size:14px;font-weight:550;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}.btn:hover:not(:disabled){border-color:var(--ink)}.btn:active:not(:disabled){transform:scale(.98)}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn--primary:hover:not(:disabled){border-color:var(--accent);filter:brightness(1.06)}.btn--big{height:48px;padding:0 22px;font-size:15px;border-radius:12px}.btn:disabled{opacity:.55}.link{border:0;background:none;padding:0;color:var(--accent);font-weight:550}.link--danger{color:var(--danger)}.error{color:var(--danger);font-size:14px;margin:10px 0 0}.auth{min-height:calc(100dvh - 72px);display:grid;place-items:center;padding-bottom:72px}.auth-card{width:min(380px,100%);text-align:center}.auth-face{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 4%;background:var(--accent-soft);margin-bottom:18px}.auth h1{font-size:28px}.auth form{display:grid;gap:10px;margin-top:26px;text-align:left}.field{height:46px;width:100%;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);padding:0 14px;font-size:15px}.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.auth .btn{margin-top:6px}.auth-switch{margin-top:18px;font-size:14px;color:var(--muted)}.demo-link{display:inline-block;margin-top:28px;font-size:14px;color:var(--muted)}.lib-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:20px 0 22px}.drop{display:grid;place-items:center;text-align:center;gap:6px;border:1.5px dashed var(--line-strong);border-radius:18px;padding:56px 24px;background:var(--surface);transition:border-color .15s,background .15s}.drop--over{border-color:var(--accent);background:var(--accent-soft)}.drop img{width:92px;margin-bottom:8px}.drop h2{font-size:20px;margin:0;font-weight:650;letter-spacing:-.01em}.drop p{margin:0 0 14px;color:var(--muted);font-size:15px}.progress{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}.progress-row{display:flex;justify-content:space-between;gap:12px;font-size:14px}.progress-row span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}.meter{height:4px;background:var(--line);border-radius:4px;margin-top:12px;overflow:hidden}.meter i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .2s}.warn{background:#f7ecd2;color:#6a4b0b;border-radius:12px;padding:12px 16px;font-size:14px;margin-bottom:14px}@media(prefers-color-scheme:dark){.warn{background:#3a2f17;color:#f0d79a}}.docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.doc{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}.doc a{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:16px 4px;text-decoration:none}.doc-icon{flex:none;width:38px;height:46px;border-radius:6px;background:var(--surface);border:1px solid var(--line-strong);display:grid;place-items:end center;padding-bottom:6px;font-size:9px;font-weight:700;color:var(--danger);letter-spacing:.04em}.doc-title{font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-meta{color:var(--muted);font-size:13px;margin-top:2px}.doc a:hover .doc-title{color:var(--accent)}.doc .link{font-size:13px;padding:8px;opacity:0;transition:opacity .15s}.doc:hover .link,.doc .link:focus-visible{opacity:1}@media(hover:none){.doc .link{opacity:1}}.doc-page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;margin-top:8px}.picker{position:sticky;top:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.picker h2{font-size:17px;margin:0 0 4px;font-weight:650}.picker .hint{color:var(--muted);font-size:13px;margin:0 0 18px}.range{display:flex;align-items:center;gap:10px;margin-bottom:18px}.range label{flex:1;display:grid;gap:6px;font-size:12px;color:var(--muted)}.range .field{height:44px;font-variant-numeric:tabular-nums}.range span{padding-top:18px;color:var(--faint)}.picker .btn{width:100%}.pages{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}.pages li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px}.pages b{font-size:12px;color:var(--muted);font-weight:600;padding-top:2px}.pages p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pages .empty-page{font-style:italic;color:var(--faint)}.lessons{margin-top:28px}.lessons h3{font-size:13px;color:var(--muted);font-weight:600;margin:0 0 8px}.lessons a,.lessons div.row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;font-size:14px}.lessons a:hover span:first-child{color:var(--accent)}.lessons .state{color:var(--muted);font-size:13px;white-space:nowrap}.making{text-align:center;padding:6px 0}.making img{width:84px;animation:steve-think 2.4s ease-in-out infinite;transform-origin:50% 90%}.making p{margin:10px 0 0;font-size:14px}.making small{color:var(--muted);font-size:13px}@keyframes steve-think{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-3px)}}.lesson-top{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px}.player{--steve-w: 21%}.stage{position:relative;padding-right:calc(var(--steve-w) - 4%)}.board{position:relative;background:var(--board);border:1px solid var(--board-line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer}.whiteboard{display:block;width:100%;height:auto}.board-text{font-family:Caveat,cursive;animation:write-in .55s ease-out both}.board-stroke path{stroke-dasharray:1;animation:draw-in .9s ease-out both}@keyframes write-in{0%{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@keyframes draw-in{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}.steve{position:absolute;right:-8.5%;bottom:0;width:38%;pointer-events:none;transform-origin:50% 100%}.rig{position:relative;aspect-ratio:1959 / 1775;filter:drop-shadow(0 6px 12px #1d23201f)}.rig img,.rig-face{position:absolute}.rig-pose,.rig-face img{inset:0;width:100%;height:100%}.steve--excited .rig,.steve--thumbs_up .rig{animation:hop .6s ease}.steve-talk{animation:talk 1.1s ease-in-out infinite;transform-origin:50% 100%}.steve-idle{animation:breathe 4s ease-in-out infinite;transform-origin:50% 100%}@keyframes talk{0%,to{transform:translateY(0) rotate(0)}30%{transform:translateY(-1.2%) rotate(-.6deg)}65%{transform:translateY(-.4%) rotate(.5deg)}}@keyframes breathe{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.008)}}@keyframes hop{0%,to{transform:translateY(0)}40%{transform:translateY(-5%) rotate(-2deg)}}.big-play{position:absolute;left:calc((100% - var(--steve-w) + 4%) / 2);top:50%;translate:-50% -50%;width:76px;height:76px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 10px 30px #138a6640;transition:transform .15s}.big-play:hover{transform:scale(1.05)}.big-play svg{width:34px;margin-left:4px}.bar{display:flex;align-items:center;gap:6px;margin:14px 0 0;padding-right:calc(var(--steve-w) - 4%)}.ctl{width:38px;height:38px;border-radius:10px;border:0;background:none;display:grid;place-items:center;color:var(--ink);flex:none}.ctl svg{width:20px}.ctl:hover:not(:disabled){background:var(--surface)}.ctl:disabled{color:var(--faint)}.ctl--play{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg)}.ctl--play:hover:not(:disabled){background:var(--ink);filter:brightness(1.25)}.ctl--speed{width:auto;padding:0 10px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}.track{flex:1;display:flex;gap:3px;align-items:center;margin:0 8px;min-width:60px}.seg{flex:1;height:22px;border:0;padding:0;background:none;position:relative}.seg:before{content:"";position:absolute;inset:9px 0;border-radius:3px;background:var(--line-strong);transition:background .2s,inset .15s}.seg:hover:before{inset:7px 0}.seg--done:before{background:var(--accent);opacity:.55}.seg[aria-current]:before{background:var(--accent)}.seg--chapter{margin-left:5px}.count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}.caption{margin:18px 0 0;padding-right:calc(var(--steve-w) - 4%);min-height:116px}.chapter{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}.say{margin:0;font-size:clamp(17px,2vw,20px);line-height:1.55;max-width:62ch;text-wrap:pretty}.cite{margin-top:10px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--muted)}.cite:hover:not(:disabled){color:var(--ink);border-color:var(--line-strong)}.cite:disabled{cursor:default}.ask{margin-top:22px;max-width:760px}.ask-form{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:7px 7px 7px 8px;transition:border-color .15s,box-shadow .15s}.ask-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.ask-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 4%;background:var(--accent-soft);flex:none}.ask-form input{flex:1;min-width:0;border:0;background:none;height:38px;font-size:15px;outline:none}.ask-error{color:var(--danger);font-size:14px;margin:8px 0 0 4px}.answer{margin-top:10px;background:var(--accent-soft);border-radius:16px;padding:16px 18px;animation:rise .25s ease-out}.answer p{margin:0;line-height:1.6;font-size:15px}.answer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.answer .cite{margin-top:0}@keyframes rise{0%{opacity:0;transform:translateY(4px)}}.center{display:grid;place-items:center;min-height:50dvh;color:var(--muted);text-align:center}@media(max-width:860px){.doc-page{grid-template-columns:1fr;gap:20px}.picker{position:static;order:-1}}@media(max-width:640px){.app{padding:0 16px 48px}.top{height:60px}.player{--steve-w: 23%}.stage{padding-right:0}.steve{right:-9%;bottom:-100px;width:42%}.caption{padding-right:0}.bar{flex-wrap:wrap;padding-right:calc(var(--steve-w) + 4px);min-height:100px;align-content:center}.track{order:5;flex-basis:100%;margin:4px 0 0}.big-play{left:50%;width:60px;height:60px}.lib-head{flex-direction:column;align-items:stretch}.drop{padding:40px 18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.end-card{position:absolute;inset:0 calc(var(--steve-w) - 4%) 0 0;display:grid;place-content:center;justify-items:center;gap:16px;background:color-mix(in srgb,var(--board) 88%,transparent);border-radius:18px;animation:rise .3s ease-out;text-align:center;padding:16px}.end-title{margin:0;font-family:Caveat,cursive;font-size:clamp(30px,5vw,48px);font-weight:700;color:#1d2320}.end-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.end-card .btn:not(.btn--primary){background:#fffefb;color:#1d2320;border-color:#cfcbbf}a.btn{text-decoration:none}@media(max-width:640px){.end-card{inset:0}}.landing{padding-top:12px}.hero{max-width:760px;margin:28px 0 36px}.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-.035em;font-weight:700}.hand{font-family:Caveat,cursive;font-weight:700;color:var(--accent);font-size:1.14em;letter-spacing:0;white-space:nowrap}.hero .sub{font-size:clamp(16px,2vw,19px);line-height:1.5;margin:18px 0 26px;max-width:580px}.foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
