:root{--paper: #f4eedc;--ink: #18212b;--muted: #4d5660;--blue: #075d8c;--coral: #bd3d35;--yellow: #e8b830;--night: #16202b;--line: #b8ad94;--radius: 4px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(#d6c9aa 1px,transparent 1px) 0 0/9px 9px,var(--paper);font-size:17px;line-height:1.5}button,input,textarea{font:inherit}button,.button{min-height:44px;border:2px solid var(--ink);border-radius:var(--radius);padding:8px 13px;background:var(--yellow);color:var(--ink);font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}button:hover,.button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}button:active{transform:translate(3px,3px);box-shadow:none}.button.secondary,button.secondary{background:var(--paper)}.button.coral,button.coral{background:var(--coral);color:#fff}.skip-link{position:fixed;left:8px;top:-70px;background:var(--yellow);padding:9px;z-index:99;color:var(--ink);font-weight:800}.skip-link:focus{top:8px}a{color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.shell{width:min(1120px,100%);margin:auto;padding:0 16px}.topbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:3px solid var(--ink)}.wordmark{font:900 18px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink);text-decoration:none;letter-spacing:-1px}.wordmark span{display:inline-block;background:var(--coral);color:#fff;padding:3px 5px;margin-right:4px}.nav{display:flex;gap:15px;align-items:center;font-size:15px;font-weight:750}.nav a{color:var(--ink)}main{min-height:calc(100vh - 186px)}.hero{display:grid;grid-template-columns:1fr .86fr;gap:32px;align-items:center;padding:48px 0 32px}.eyebrow,.tape-label{font:800 13px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.eyebrow{color:var(--blue)}h1,h2,h3{line-height:1.08;margin:0 0 14px}h1{font-size:clamp(2.5rem,7vw,5.2rem);letter-spacing:-.065em;max-width:10ch}h2{font-size:clamp(1.65rem,4vw,2.7rem);letter-spacing:-.04em}h3{font-size:1.1rem}.lede{max-width:38rem;font-size:1.12rem}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 18px}.after{font-size:.88rem;font-weight:700;max-width:15ch}.facts{list-style:none;padding:0;margin:18px 0;display:grid;gap:5px;font-size:.9rem}.facts li:before{content:"✓";color:var(--coral);font-weight:900;margin-right:8px}.hero-art{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--blue);background:var(--yellow)}.section{padding:45px 0;border-top:3px solid var(--ink)}.preview{background:var(--night);color:var(--paper);padding:22px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--coral);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}.preview-tape{width:130px;height:88px;background:linear-gradient(90deg,var(--coral) 0 25%,var(--yellow) 25% 75%,var(--blue) 75%);border:3px solid var(--paper);position:relative}.preview-tape:after{content:"◉  ◉";position:absolute;bottom:4px;left:20px;color:var(--night);font-size:28px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step{border-top:7px solid var(--blue);padding-top:10px}.number{font:900 2rem ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--coral)}.plain-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.pricing{border:3px solid var(--ink);padding:22px;background:var(--yellow);box-shadow:7px 7px 0 var(--ink)}.price{font:900 2.5rem ui-monospace,SFMono-Regular,Consolas,monospace;margin:5px 0}.footer{border-top:3px solid var(--ink);padding:24px 0 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem}.footer p{margin:0}.demo-bar{background:var(--blue);color:#fff;padding:9px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.9rem}.demo-bar button{min-height:32px;font-size:.8rem;padding:4px 8px;box-shadow:none;border-color:#fff;background:#fff}.app-head{padding:20px 0 12px;display:flex;align-items:end;justify-content:space-between;gap:16px}.app-head h1{font-size:clamp(2rem,6vw,3.6rem);max-width:15ch}.app-layout{display:grid;grid-template-columns:280px 1fr;gap:20px;padding-bottom:42px}.app-layout.left{grid-template-columns:1fr 280px}.app-layout.left .drill-list{order:2}.drill-list{border:3px solid var(--ink);background:#fff9ea;align-self:start}.drill-list header{padding:14px;border-bottom:3px solid var(--ink);background:var(--yellow)}.drill-list ol{list-style:none;padding:0;margin:0;max-height:565px;overflow:auto}.drill-item{width:100%;min-height:52px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;display:flex;justify-content:space-between;text-align:left;padding:8px 11px;font-size:.9rem}.drill-item:hover{transform:none;background:#e4eef2}.drill-item.active{background:var(--blue);color:#fff}.deck{border:3px solid var(--ink);background:#fff9ea;box-shadow:8px 8px 0 var(--ink);min-width:0}.deck-top{display:flex;justify-content:space-between;align-items:start;gap:12px;padding:16px;border-bottom:3px solid var(--ink)}.deck-top h2{font-size:1.65rem;margin:3px 0}.clock{font:900 2rem ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--coral);white-space:nowrap}.cue{margin:0;color:var(--muted)}.canvas-wrap{padding:14px;background:repeating-linear-gradient(0deg,transparent 0 31px,#d8cfbb 32px),#fffdf4}.drill-canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;touch-action:none;background:#fffdf4;border:2px solid var(--ink);cursor:crosshair}.canvas-help{padding:0 14px;font-size:.84rem;color:var(--muted)}.deck-controls{padding:14px;display:flex;flex-wrap:wrap;gap:12px;border-top:3px solid var(--ink)}.status{padding:0 14px 12px;font-size:.9rem;font-weight:700;color:var(--blue)}.progress-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0 44px}.calendar,.settings{border:3px solid var(--ink);padding:16px;background:#fff9ea}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.day{border:1px solid var(--line);min-height:44px;padding:4px;text-align:center;font-size:.8rem}.day.done{background:var(--yellow);border:2px solid var(--ink);font-weight:900}.settings label{display:block;font-weight:700;margin:12px 0 5px}.settings textarea,.settings input{width:100%;border:2px solid var(--ink);border-radius:0;padding:8px;background:#fffdf4}.settings .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.notice{padding:12px;border-left:6px solid var(--coral);background:#f7dfd5}.legal{max-width:720px;padding:48px 0}.legal h1{font-size:clamp(2.4rem,7vw,4.4rem);max-width:14ch}.not-found{padding:80px 0;max-width:650px}.update-toast{position:fixed;z-index:20;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;max-width:min(360px,calc(100vw - 32px));padding:10px;border:3px solid var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-weight:800}.update-toast button{min-height:36px;padding:5px 8px;box-shadow:none;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 700px){.topbar{min-height:64px}.nav{gap:10px;font-size:.82rem}.hero{grid-template-columns:1fr;padding-top:28px}.hero-art{max-width:420px;order:-1}.preview,.steps,.plain-grid,.app-layout,.progress-panel,.app-layout.left{grid-template-columns:1fr}.drill-list{order:2}.drill-list ol{max-height:250px}.deck{box-shadow:5px 5px 0 var(--ink)}.footer{display:block}.footer p{margin:8px 0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media print{.topbar,.demo-bar,.drill-list,.deck,.settings,.footer,.hand-toggle{display:none!important}.progress-panel{display:block}.calendar{border:2px solid #000}}
