:root{--room-1:#efe7db;--room-2:#e2d6c4;--wood-1:#c79b6b;--wood-2:#b3865a;--wood-3:#a2764c;--ink:#2c2622;--ink-2:#6a5f54;--muted:#9b8f81;--line:#2c26221f;--line-2:#2c262238;--brew:#5a3d23;--brew-d:#3d2817;--accent:#b0642f;--accent-d:#8f4d20;--rewind:#2b9ec4;--card-face:#fcf9f3;--ease:cubic-bezier(.22, 1, .36, 1);--spring:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1)}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}body{min-height:100dvh;color:var(--ink);background:radial-gradient(130% 100% at 50% -10%, var(--room-1) 0%, var(--room-2) 70%);-webkit-font-smoothing:antialiased;place-items:center;padding:clamp(18px,4vw,48px);font-family:Inter,system-ui,sans-serif;display:grid}kbd{box-shadow:0 0 0 1px var(--line) inset, 0 1px 0 #ffffff80;color:var(--ink-2);white-space:nowrap;background:#2c262212;border-radius:5px;padding:.05em .38em;font-family:inherit;font-size:.82em;font-weight:600}.page{width:100%;max-width:620px;position:relative}.intro{text-align:center;margin-bottom:20px}.intro__eyebrow{letter-spacing:.18em;text-transform:uppercase;color:#0000;background:linear-gradient(90deg, var(--accent), var(--rewind));-webkit-background-clip:text;background-clip:text;font-size:.7rem;font-weight:600}.intro__title{letter-spacing:-.02em;color:#241f1b;margin-top:.35rem;font-family:Fraunces,Georgia,serif;font-size:clamp(2.2rem,1.5rem + 3vw,3rem);font-weight:600}.intro__lede{max-width:48ch;color:var(--ink-2);margin:.5rem auto 0;font-size:.93rem;line-height:1.62}.intro__lede b{color:var(--ink);font-weight:600}.editor{box-shadow:0 0 0 1px #ffffffb3 inset, 0 0 0 1px var(--line), 0 34px 66px -30px #3c2c1a80, 0 8px 20px -12px #3c2c1a66;background:linear-gradient(#fcf8f1,#f2e9db);border-radius:22px;position:relative;overflow:hidden}.bar{border-bottom:1px solid var(--line);background:linear-gradient(#fff9,#fff0);align-items:center;gap:14px;padding:11px 14px;display:flex}.bar__label{letter-spacing:.01em;color:var(--ink-2);white-space:nowrap;align-items:center;gap:7px;font-size:.78rem;font-weight:600;display:inline-flex}.bar__label svg{color:var(--muted);transition:color .3s, transform .3s var(--ease)}.editor.is-rewinding .bar__label svg{color:var(--rewind);transform:rotate(-40deg)}.editor.is-rewinding .bar__label{color:var(--rewind)}.rail{cursor:pointer;outline:none;flex:1;align-items:center;min-width:60px;height:22px;display:flex;position:relative}.rail__line{background:var(--line-2);border-radius:3px;height:3px;position:absolute;left:4px;right:4px}.rail__fill{background:linear-gradient(90deg, var(--accent), var(--accent-d));border-radius:3px;width:0;height:3px;transition:width .12s linear;position:absolute;left:4px}.editor.is-rewinding .rail__fill{background:linear-gradient(90deg, var(--rewind), #1c7fa0)}.rail__dots{height:100%;position:absolute;left:4px;right:4px}.rail__dot{width:9px;height:9px;box-shadow:0 0 0 1.5px var(--line-2);transition:transform .18s var(--spring), box-shadow .18s, background .18s;background:#efe6d7;border-radius:50%;margin:-4.5px 0 0 -4.5px;position:absolute;top:50%}.rail__dot.is-done{background:var(--accent);box-shadow:0 0 0 1.5px var(--accent-d)}.rail__dot.is-head{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent), 0 2px 6px -1px #b0642f99;z-index:2;transform:scale(1.5)}.editor.is-rewinding .rail__dot.is-head{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--rewind), 0 2px 6px -1px #2b9ec499}.rail:focus-visible .rail__line{border-radius:3px;box-shadow:0 0 0 2px #b0642f66}.bar__actions{align-items:center;gap:7px;display:flex}.tool{color:var(--ink-2);cursor:pointer;box-shadow:0 0 0 1px var(--line) inset, 0 1px 3px -1px #3c2c1a4d;transition:transform .15s var(--ease), box-shadow .18s, color .18s, opacity .2s;will-change:transform;background:#fff;border:0;border-radius:10px;align-items:center;gap:7px;padding:8px 11px;font-family:inherit;font-size:.82rem;font-weight:600;display:inline-flex}.tool:hover:not(:disabled){color:var(--ink);box-shadow:0 0 0 1px var(--line-2) inset, 0 3px 8px -3px #3c2c1a66;transform:translateY(-1px)}.tool:active:not(:disabled){transform:translateY(0)scale(.97)}.tool:disabled{opacity:.4;cursor:not-allowed}.tool kbd{pointer-events:none}.tool--icon{padding:8px}.tool--icon kbd,.tool .ic-off,.tool[aria-pressed=false] .ic-on{display:none}.tool[aria-pressed=false] .ic-off{color:var(--muted);display:block}@media (width<=540px){.tool__txt,.tool kbd{display:none}.tool{padding:9px}.bar__label #state-text{display:none}}.desk{aspect-ratio:600/440;touch-action:none;background:repeating-linear-gradient(91deg, #7850280d 0 3px, transparent 3px 9px), linear-gradient(158deg, var(--wood-1) 0%, var(--wood-2) 52%, var(--wood-3) 100%);isolation:isolate;position:relative;overflow:hidden}.desk__grain{pointer-events:none;z-index:5;opacity:.5;mix-blend-mode:soft-light;background:radial-gradient(120% 100% at 20% 0,#fff0dc47,#0000 55%),radial-gradient(100% 120% at 100% 100%,#28180a38,#0000 60%);position:absolute;inset:0}.desk:after{content:"";z-index:6;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,#2b9ec41a 0 2px,#0000 2px 4px),radial-gradient(120% 90%,#0000 40%,#2b9ec42e 100%);transition:opacity .25s;position:absolute;inset:0}.editor.is-rewinding .desk:after{opacity:1}.layer{width:100%;height:100%;position:absolute;inset:0}.layer--back{z-index:1;pointer-events:none}.layer--front{z-index:3;pointer-events:none}#cup{pointer-events:auto;cursor:grab}#cup.is-grabbing{cursor:grabbing}#cup:focus-visible{outline:none}#cup:focus-visible #cupShadow{stroke:var(--accent);stroke-width:3px}.card{z-index:2;background:var(--card-face);cursor:grab;transform-origin:50%;will-change:transform;-webkit-user-select:none;user-select:none;border-radius:12px;position:absolute;overflow:hidden;box-shadow:inset 0 0 0 1px #fff9,0 1px #0000000a,0 10px 20px -10px #28180a8c,0 3px 6px -3px #28180a66}.card.is-grabbing{cursor:grabbing;z-index:4}.card__strip{background:var(--tone,#c9a36a);height:8px}.card__body{padding:11px 12px}.card__title{color:var(--ink);letter-spacing:-.01em;font-size:.82rem;font-weight:600}.card__lines{gap:6px;margin-top:9px;display:grid}.card__lines i{background:var(--line);border-radius:3px;height:5px;display:block}.card__lines i:first-child{width:100%}.card__lines i:nth-child(2){width:78%}.card__lines i:nth-child(3){width:52%}.card__tag{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:.6rem;font-weight:600;position:absolute;bottom:8px;right:9px}.card__stain{pointer-events:none;opacity:0;mix-blend-mode:multiply;background:radial-gradient(60% 55% at 30% 20%,#50341c9e,#0000 70%),radial-gradient(50% 60% at 78% 55%,#3c26148c,#0000 72%),radial-gradient(70% 40% at 50% 90%,#5a3c2280,#0000 75%);height:150%;position:absolute;inset:-20% -10% auto}.hint{z-index:5;color:#fff5e9;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:fit-content;max-width:92%;transition:opacity .4s ease, transform .4s var(--ease);pointer-events:none;background:#2c1e1280;border-radius:999px;margin:0 auto;padding:7px 14px;font-size:.78rem;font-weight:500;position:absolute;bottom:12px;left:0;right:0;box-shadow:0 6px 16px -8px #0009}.hint kbd{color:#fff;box-shadow:none;background:#ffffff29}.desk.is-touched .hint{opacity:0;transform:translateY(8px)}.note{max-width:52ch;color:var(--ink-2);text-align:center;margin:18px auto 0;font-size:.8rem;line-height:1.62}.note code{color:var(--ink);background:#2c262214;border-radius:6px;padding:.1em .4em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78em}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}.rail__fill,.rail__dot,.desk:after,.editor.is-rewinding .desk:after{transition:none}}@media (width<=460px){.editor{border-radius:18px}.card__title{font-size:.76rem}}