@font-face{font-family:Patrick Hand;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/patrick-hand-latin-400-normal-B7HHA2Vw.woff2)format("woff2"),url(/assets/patrick-hand-latin-400-normal-Df9_VoRQ.woff)format("woff")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/atkinson-hyperlegible-next-latin-400-normal-FfmJh7DR.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-next-latin-400-normal-DPp7N0cD.woff)format("woff")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/atkinson-hyperlegible-next-latin-700-normal-Dpiyiu63.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-next-latin-700-normal-C2qZD_Q9.woff)format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2)format("woff2"),url(/assets/jetbrains-mono-latin-400-normal-6-qcROiO.woff)format("woff")}:root{--paper:#fcfbf7;--ground:#f4f3ee;--ink:#1e3a8a;--ink-body:#172c6b;--ink-2:#4a62a6;--ink-faded:#6b86c5;--rule:#d5dcee;--pencil:#a6a6a6;--pencil-text:#6b6b6b;--red:#d32f2f;--red-wash:#fbeceb;--plate:#eef2fa;--ink-wash:#e7ecf7;--hand:"Patrick Hand", "Comic Neue", cursive;--text:"Atkinson Hyperlegible Next", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--pen:1.5px solid var(--ink);--ease-out:cubic-bezier(.16, 1, .3, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--ground);color:var(--ink-body);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;caret-color:var(--red);margin:0}::selection{background:var(--ink);color:var(--paper)}*{scrollbar-width:thin;scrollbar-color:var(--ink-faded) transparent}:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1.5px}button,input,select,textarea{font:inherit;color:inherit}.hand{font-family:var(--hand);text-transform:uppercase;letter-spacing:.04em}.num{font-variant-numeric:tabular-nums}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{border:var(--pen);background:var(--paper);min-height:44px;color:var(--ink);font-family:var(--hand);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:background .16s var(--ease-out), color .16s var(--ease-out), transform .12s var(--ease-out);border-radius:4px;justify-content:center;align-items:center;gap:.5rem;padding:.4rem 1.1rem;font-size:1.15rem;display:inline-flex}.btn:hover{background:var(--ink-wash)}.btn:active{transform:translateY(1px)}.btn:disabled{cursor:not-allowed;color:var(--pencil-text);border-color:var(--pencil);background:var(--paper)}.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:#17307a}.btn-quiet{background:0 0;border-color:#0000;min-height:36px;padding:.25rem .6rem}.btn-quiet:hover{background:var(--ink-wash)}.icon-btn{width:40px;height:40px;color:var(--ink-2);cursor:pointer;transition:background .16s var(--ease-out), color .16s var(--ease-out);background:0 0;border:1.5px solid #0000;border-radius:4px;place-items:center;padding:0;display:inline-grid}.icon-btn:hover{background:var(--ink-wash);color:var(--ink)}.icon-btn[aria-pressed=true]{color:var(--red);border-color:var(--red);background:var(--red-wash)}.field{gap:.35rem;display:grid}.field-label{font-family:var(--hand);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);font-size:1.05rem}.input,.select{border:var(--pen);background:var(--paper);width:100%;min-height:44px;color:var(--ink-body);border-radius:4px;padding:.55rem .75rem}.input::placeholder,textarea::placeholder{color:var(--pencil-text)}.select{appearance:none;cursor:pointer;font-family:var(--hand);letter-spacing:.03em;color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;padding-right:2.25rem;font-size:1.05rem}.stripe{border-top:2px solid var(--red);border-bottom:2px solid var(--red);flex:none;height:7px}.app{background:var(--paper);grid-template-columns:64px 300px minmax(0,1fr);height:100%;display:grid}.spine{border-right:var(--pen);background:var(--paper);flex-direction:column;align-items:center;gap:1rem;padding:1rem 0 .75rem;display:flex}.spine-mark{color:var(--red)}.spine .stripe{width:100%}.spine-title{writing-mode:vertical-rl;font-family:var(--hand);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;flex:1;min-height:0;font-size:2rem;line-height:1;overflow:hidden}.spine-user{justify-items:center;gap:.25rem;display:grid}.avatar{border:var(--pen);object-fit:cover;background:var(--ink-wash);border-radius:50%;width:36px;height:36px}.flap{border-right:var(--pen);background:var(--paper);flex-direction:column;min-height:0;display:flex}.flap-head{gap:.75rem;padding:1.1rem 1rem 1rem;display:grid}.flap-title{font-family:var(--hand);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);justify-content:space-between;align-items:baseline;margin:0;font-size:1.6rem;font-weight:400;display:flex}.flap-title small{color:var(--ink-2);font-size:1rem}.flap-list{border-top:var(--pen);flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}.flap-empty{color:var(--ink-2);padding:1.25rem 1rem;font-size:.95rem}.tape-row{border-bottom:1px solid var(--rule);position:relative}.tape-link{text-align:left;cursor:pointer;width:100%;transition:background .16s var(--ease-out);background:0 0;border:0;gap:.15rem;padding:.7rem 2.75rem .7rem 1rem;display:grid}.tape-link:hover,.tape-row[aria-current=true] .tape-link{background:var(--ink-wash)}.tape-name{font-family:var(--hand);color:var(--ink);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.2rem;line-height:1.25;display:-webkit-box;overflow:hidden}.tape-row[aria-current=true] .tape-name{text-decoration:underline;-webkit-text-decoration-color:var(--red);text-decoration-color:var(--red);text-underline-offset:4px;text-decoration-thickness:2px}.tape-meta{color:var(--ink-2);justify-content:space-between;gap:.5rem;font-size:.8rem;display:flex}.tape-delete{opacity:0;position:absolute;top:.45rem;right:.35rem}.tape-row:hover .tape-delete,.tape-delete:focus-visible{opacity:1}.flap-foot{border-top:var(--pen);gap:.5rem;padding:.9rem 1rem;display:grid}.main{background:var(--paper);flex-direction:column;min-width:0;min-height:0;display:flex}.topbar{align-items:center;gap:.75rem;min-height:64px;padding:.6rem 1.5rem;display:flex}.topbar-title{min-width:0;font-family:var(--hand);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);white-space:nowrap;text-overflow:ellipsis;flex:1;margin:0;font-size:1.5rem;font-weight:400;line-height:1.2;overflow:hidden}.topbar .select{width:auto;max-width:320px;min-height:40px}.menu-btn{display:none}.scroll{scroll-behavior:smooth;flex:1;overflow-y:auto}.column{width:100%;max-width:820px;margin:0 auto;padding:2.25rem 1.5rem 2rem}.turn+.turn{margin-top:3rem}.question{border-bottom:var(--pen);font-family:var(--hand);color:var(--ink);overflow-wrap:anywhere;margin:0 0 1.25rem;padding-bottom:.6rem;font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);font-weight:400;line-height:1.25}.answer{overflow-wrap:anywhere;max-width:68ch}.answer>:first-child{margin-top:0}.answer p,.answer ul,.answer ol{margin:0 0 1rem}.answer h1,.answer h2,.answer h3{font-family:var(--hand);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin:1.75rem 0 .6rem;font-weight:400;line-height:1.2}.answer h1{font-size:1.6rem}.answer h2{font-size:1.4rem}.answer h3{font-size:1.2rem}.answer strong{color:var(--ink)}.answer code{font-family:var(--mono);background:var(--plate);color:var(--ink);border-radius:3px;padding:.1em .35em;font-size:.86em}.answer pre{background:var(--plate);border:1px solid var(--ink-faded);border-radius:4px;margin:0 0 1.1rem;padding:.9rem 1rem;overflow-x:auto}.answer pre code{background:0 0;padding:0;font-size:.85rem;line-height:1.55}.answer table{border-collapse:collapse;margin:0 0 1rem;font-size:.95rem}.answer th,.answer td{border-bottom:1px solid var(--rule);text-align:left;padding:.35rem .75rem .35rem 0}.answer th{font-family:var(--hand);text-transform:uppercase;color:var(--ink);border-bottom:var(--pen);font-weight:400}.cite{border:1.5px solid var(--red);min-width:1.9em;font-family:var(--hand);text-align:center;color:var(--red);background:var(--paper);vertical-align:.05em;transition:background .14s var(--ease-out), color .14s var(--ease-out);border-radius:3px;margin:0 .1em;padding:0 .3em;font-size:.9em;line-height:1.25;text-decoration:none;display:inline-block}.cite:hover,.cite[data-active=true]{background:var(--red);color:var(--paper)}.streaming-caret:after{content:"";vertical-align:-.18em;background:var(--red);width:.55em;height:1.1em;margin-left:.15em;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.answer-status{color:var(--ink-2);align-items:center;gap:.6rem;margin:.25rem 0 1rem;font-size:.95rem;display:flex}.answer-actions{color:var(--ink-2);align-items:center;gap:.25rem;margin-top:.5rem;font-size:.85rem;display:flex}.answer-actions .spacer{flex:1}.notice{border:1.5px solid var(--red);background:var(--red-wash);color:#8c1d1d;border-radius:4px;align-items:flex-start;gap:.6rem;padding:.8rem 1rem;display:flex}.notice svg{color:var(--red);flex:none;margin-top:.2rem}.tracklist{margin-top:1.75rem}.tracklist-head{border-bottom:var(--pen);font-family:var(--hand);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.35rem;display:flex}.tracklist-head h3{text-decoration:underline;-webkit-text-decoration-color:var(--red);text-decoration-color:var(--red);text-underline-offset:5px;margin:0;font-size:1.35rem;font-weight:400;text-decoration-thickness:2px}.tracklist-head span{font-size:1.1rem}.tracks{margin:0;padding:0;list-style:none}.track{border-bottom:1px solid var(--rule)}.track-btn{text-align:left;cursor:pointer;width:100%;transition:background .14s var(--ease-out);background:0 0;border:0;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:baseline;gap:.75rem;padding:.5rem .25rem;display:grid}.track-btn:hover,.track[data-active=true] .track-btn{background:var(--ink-wash)}.track-no{font-family:var(--hand);color:var(--ink);font-size:1.2rem}.track[data-active=true] .track-no{color:var(--red)}.track-path{min-width:0;font-family:var(--mono);color:var(--ink-body);overflow-wrap:anywhere;font-size:.86rem}.track-path .dir{color:var(--ink-2)}.track-q{min-width:0;color:var(--ink-body);font-size:1rem}.track[data-active=true] .track-path .file{text-decoration:underline;-webkit-text-decoration-color:var(--red);text-decoration-color:var(--red);text-underline-offset:3px;text-decoration-thickness:2px}.track-time{font-family:var(--hand);color:var(--ink);white-space:nowrap;justify-items:end;font-size:1.15rem;display:grid}.track-time small{font-family:var(--text);color:var(--pencil-text);font-size:.75rem}.track-code{background:var(--plate);border:1px solid var(--ink-faded);max-height:320px;font:.8rem/1.55 var(--mono);color:var(--ink-body);white-space:pre;border-radius:4px;margin:0 0 .75rem 3.15rem;padding:.75rem .9rem;overflow:auto}.track-code .ln{text-align:right;width:3.5ch;color:var(--ink-faded);-webkit-user-select:none;user-select:none;margin-right:1ch;display:inline-block}.tracklist-empty{color:var(--pencil-text);padding:.75rem .25rem;font-size:.95rem}.deck{color:var(--ink);flex:none}.deck .reel{transform-box:fill-box;transform-origin:50%}.deck[data-running=true] .reel{animation:1.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.counter{font-family:var(--hand);letter-spacing:.08em;color:var(--ink);border:1px solid var(--ink-faded);border-radius:3px;padding:0 .35rem;font-size:1.1rem}.composer{padding:.75rem 1.5rem 1rem}.composer-inner{max-width:820px;margin:0 auto}.composer-box{border:var(--pen);background:var(--paper);transition:box-shadow .16s var(--ease-out);border-radius:6px;align-items:flex-end;gap:.5rem;padding:.5rem .5rem .5rem .9rem;display:flex}.composer textarea{resize:none;min-height:44px;max-height:200px;color:var(--ink-body);background:0 0;border:0;outline:none;flex:1;padding:.55rem 0;line-height:1.5}.composer-hint{color:var(--ink-2);text-align:right;margin:.4rem 0 0;font-size:.8rem}.empty{padding-top:clamp(1rem,6vh,4rem)}.empty h2{font-family:var(--hand);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);max-width:14ch;margin:0 0 .75rem;font-size:clamp(2.2rem,1.6rem + 2.4vw,3.6rem);font-weight:400;line-height:1.05}.empty p{max-width:56ch;color:var(--ink-2);margin:0 0 2rem}.login{place-items:center;min-height:100%;padding:2rem 1rem;display:grid}.jcard{background:var(--paper);border:var(--pen);grid-template-columns:64px minmax(0,1.15fr) minmax(0,1fr);width:min(1120px,100%);display:grid;box-shadow:0 18px 40px -18px #172c6b59}.jcard .spine{border-right:var(--pen)}.jcard-front{flex-direction:column;gap:1.5rem;padding:clamp(1.5rem,4vw,3.25rem);display:flex}.jcard-front h1{font-family:var(--hand);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0;font-size:clamp(3rem,2rem + 4.5vw,5.75rem);font-weight:400;line-height:.95}.jcard-front h1+.rule{border-top:3px solid var(--ink);width:100%;height:0}.jcard-front .lede{font-family:var(--hand);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);max-width:30ch;margin:0;font-size:1.35rem;line-height:1.35}.jcard-front p{max-width:46ch;color:var(--ink-2);margin:0}.jcard-inside{border-left:var(--pen);background:var(--paper);padding:clamp(1.5rem,3vw,2.5rem)}.jcard-inside .sample-q{font-family:var(--hand);color:var(--ink);margin:.5rem 0 .25rem;font-size:1.35rem;line-height:1.25}.sample-tag{color:var(--pencil-text);font-size:.8rem}.github-btn{align-self:flex-start;min-height:52px;padding:.5rem 1.4rem;font-size:1.3rem;text-decoration:none}.record-form{grid-template-columns:minmax(0,1fr) 180px auto;align-items:end;gap:.75rem;margin:1.5rem 0 1rem;display:grid}.record-full{min-height:44px;color:var(--ink-2);cursor:pointer;grid-column:1/-1;align-items:center;gap:.6rem;font-size:.95rem;display:flex}.record-full input{width:18px;height:18px;accent-color:var(--ink);cursor:pointer;margin:0}.record-status{color:var(--ink-2);align-items:center;gap:.75rem;margin:1rem 0;display:flex}.record-result{border:var(--pen);background:var(--ink-wash);color:var(--ink);border-radius:4px;margin:1rem 0;padding:.8rem 1rem}.loading-screen{height:100%;color:var(--ink-2);place-items:center;display:grid}@media (width<=860px){.app{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.app>.spine{display:none}.flap{z-index:20;width:min(320px,86vw);transition:transform .26s var(--ease-out);position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.app[data-drawer=open] .flap{transform:none;box-shadow:12px 0 30px -12px #172c6b59}.scrim{z-index:10;background:#172c6b40;position:fixed;inset:0}.main{grid-row:1/-1}.menu-btn{display:inline-grid}.topbar{flex-wrap:wrap;gap:.5rem;padding:.5rem 1rem}.topbar .select{flex:100%;order:3;max-width:100%}.column{padding:1.5rem 1rem}.composer{padding:.5rem 1rem .75rem}.composer-hint{display:none}.track-code{margin-left:0}.jcard{grid-template-columns:minmax(0,1fr)}.jcard>.spine{display:none}.jcard-inside{border-left:0;border-top:var(--pen)}.record-form{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.track-static{cursor:default}.track-row{align-items:center;gap:.25rem;display:flex}.track-row .track-btn{flex:1;min-width:0}.track-static:hover{background:0 0}.flap-foot .btn[aria-current=true]{border-color:var(--red);color:var(--red);background:var(--red-wash)}.menu-only-logout{justify-self:start;display:none}@media (width<=860px){.menu-only-logout{display:inline-flex}}code,pre,.track-path,.track-code{font-variant-ligatures:none;font-feature-settings:"liga" 0, "calt" 0}.tape-meta>span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.tape-meta>span:last-child{white-space:nowrap;flex:none}.app>.spine{gap:0;padding-top:0}.app>.spine .spine-mark{place-items:center;height:64px;display:grid}.app>.spine .spine-title{margin:1rem 0}.tracklist-head>span{white-space:nowrap;flex:none}@media (width<=860px){.tracklist-head h3{font-size:1.2rem}}.ruled-fill{background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px);background-position:0 14px}.flap-list{background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px)}.question,.tape-name,.jcard-inside .sample-q{text-transform:uppercase;letter-spacing:.03em}.tape-row{border-bottom:0;padding:.35rem .6rem}.tape-link{background:var(--paper);border:1.5px solid #0000;border-radius:4px;gap:.2rem;padding:.55rem .75rem .6rem}.tape-label{font-family:var(--hand);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);justify-content:space-between;gap:.5rem;font-size:.95rem;display:flex}.tape-label>span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.tape-label>span:last-child{flex:none}.tape-label b{color:var(--ink-2);margin-right:.35rem;font-weight:400}.tape-row[aria-current=true] .tape-label b{color:var(--red)}.tape-row[aria-current=true] .tape-link{border:var(--pen);background:var(--paper)}.tape-row[aria-current=true] .tape-name{text-decoration:none}.tape-row[aria-current=true]:after{content:"";background:linear-gradient(90deg, var(--red) 0 2px, transparent 2px 5px, var(--red) 5px 7px, transparent 7px 10px, var(--red) 10px 12px);width:12px;height:16px;position:absolute;top:.35rem;right:1.25rem}.tape-row:not([aria-current=true]) .tape-link:hover{border-color:var(--ink-faded);background:var(--paper)}.tape-delete{top:auto;bottom:.55rem;right:.9rem}.btn-primary:disabled{background:var(--paper);border-color:var(--pencil);color:var(--pencil-text)}.composer-box:focus-within{box-shadow:none;border-color:var(--red)}.sample-answer{max-width:46ch;color:var(--ink-body);margin:.75rem 0 0}.tape-label{padding-right:1.5rem}.tape-row{background:var(--paper)}.jcard-inside{flex-direction:column;display:flex}.ruled-fill{flex:1;min-height:96px;margin-top:1.5rem}