@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Caveat:wght@500;700&display=swap";:root{--paper:#faf8f4;--surface:#fff;--surface-2:#f3f0ea;--ink:#16181d;--ink-2:#4a4f59;--ink-3:#8a8f99;--line:#e7e2d9;--accent:#02735a;--accent-fill:#028a6a;--accent-fill-hover:#017559;--accent-ink:#fff;--accent-soft:#e3f3ed;--marker:#c6e9dc;--marker-soft:#e3f3ed;--blue:#028a6a;--red:#16181d;--radius:14px;--radius-lg:22px;--shadow:0 1px 2px #16181d0a, 0 8px 24px #16181d0d;--shadow-lg:0 2px 4px #16181d0a, 0 24px 60px #16181d17;--sans:"Inter", system-ui, -apple-system, sans-serif;--serif:"Instrument Serif", Georgia, serif;--hand:"Caveat", "Comic Sans MS", cursive;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}a{color:inherit;text-decoration:none}img,svg{max-width:100%;display:block}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:0}input,textarea{font:inherit;color:inherit}.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}@media (width<=640px){.wrap{padding:0 16px}}.display{font-family:var(--serif);letter-spacing:-.01em;font-weight:400;line-height:1.02}.display em{color:var(--accent);font-style:italic}h1.display{font-size:clamp(44px,7vw,84px)}h2.display{font-size:clamp(34px,4.5vw,52px)}h3{letter-spacing:-.01em;font-size:18px;font-weight:600}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:13px;font-weight:600}.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.small{font-size:14px}.tiny{font-size:12px}.hand{font-family:var(--hand)}.logo{color:var(--accent);align-items:center;display:inline-flex}.logo img{width:auto;height:30px}.logo-sm img{height:22px}.btn{white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:8px;height:48px;padding:0 22px;font-size:15px;font-weight:600;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent-fill);color:var(--accent-ink);box-shadow:0 6px 18px #028a6a47}.btn-primary:hover{background:var(--accent-fill-hover)}.btn-ghost{background:var(--surface);border:1px solid var(--line)}.btn-ghost:hover{border-color:var(--ink-3)}.btn-dark{background:var(--ink);color:var(--paper)}.btn-sm{height:38px;padding:0 16px;font-size:14px}.btn-lg{height:56px;padding:0 28px;font-size:16px}.btn-block{width:100%}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.pill{background:var(--surface-2);height:28px;color:var(--ink-2);border-radius:999px;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:500;display:inline-flex}.pill-accent{background:var(--accent-soft);color:var(--accent)}.pill-marker{background:var(--ink);color:#fff}.dot{background:var(--accent-fill);border-radius:50%;width:8px;height:8px;display:inline-block}.dot-live{background:#028a6a;animation:2s infinite pulse;box-shadow:0 0 0 4px #028a6a2e}@keyframes pulse{50%{box-shadow:0 0 0 7px #028a6a0d}}.board{border-radius:var(--radius-lg);color:#1b2230;background:#fffefb radial-gradient(circle,#e4dfd4 1px,#0000 1.2px) 0 0/22px 22px;position:relative;overflow:hidden}.board .ink-tutor{fill:none;stroke:#1b2230;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.board .ink-learner{fill:none;stroke:var(--blue);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.board text{font-family:var(--hand);fill:#1b2230}.board .hl{fill:#9ed9c5;opacity:.45}.draw{stroke-dasharray:600;stroke-dashoffset:600px;animation:1.6s forwards draw}@keyframes draw{to{stroke-dashoffset:0}}.wave{align-items:center;gap:3px;height:22px;display:inline-flex}.wave i{background:currentColor;border-radius:3px;width:3px;animation:1.1s ease-in-out infinite wave}.wave i:first-child{height:40%;animation-delay:-.9s}.wave i:nth-child(2){height:80%;animation-delay:-.7s}.wave i:nth-child(3){height:55%;animation-delay:-.5s}.wave i:nth-child(4){height:95%;animation-delay:-.3s}.wave i:nth-child(5){height:45%;animation-delay:-.1s}@keyframes wave{50%{transform:scaleY(.35)}}@media (prefers-reduced-motion:reduce){.wave i,.draw,.dot-live{stroke-dashoffset:0;animation:none}}.app{grid-template-columns:240px 1fr;min-height:100vh;display:grid}.side{border-right:1px solid var(--line);background:var(--paper);flex-direction:column;gap:28px;height:100vh;padding:22px 16px;display:flex;position:sticky;top:0}.nav{flex-direction:column;gap:2px;display:flex}.nav a{height:42px;color:var(--ink-2);border-radius:10px;align-items:center;gap:12px;padding:0 12px;font-size:15px;font-weight:500;display:flex}.nav a:hover{background:var(--surface-2);color:var(--ink)}.nav a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border:1px solid var(--line)}.nav svg{flex:none;width:18px;height:18px}.side-foot{margin-top:auto}.main{min-width:0;padding:28px 40px 60px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px;display:flex}.avatar{color:#fff;background:linear-gradient(135deg,#3fb594,#028a6a);border-radius:50%;place-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:grid}.tabbar{display:none}@media (width<=900px){.app{grid-template-columns:1fr}.side{display:none}.main{padding:20px 16px 96px}.tabbar{background:var(--surface);border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:20;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar a{color:var(--ink-3);flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:500;display:flex}.tabbar a.on{color:var(--ink)}.tabbar svg{width:22px;height:22px}}.bar{background:var(--surface-2);border-radius:99px;height:8px;overflow:hidden}.bar>span{background:var(--accent-fill);border-radius:99px;height:100%;display:block}.screens{z-index:50;background:var(--ink);box-shadow:var(--shadow-lg);border-radius:999px;gap:4px;padding:5px;font-size:12px;font-weight:600;display:flex;position:fixed;bottom:16px;right:16px}.screens a{color:var(--paper);opacity:.6;white-space:nowrap;border-radius:999px;padding:6px 10px}.screens a.on,.screens a:hover{opacity:1;background:#ffffff1f}@media (width<=900px){.screens{bottom:84px;left:16px;right:16px;overflow-x:auto}}
