:root{color-scheme:light;--paper: #f4eedb;--sheet: #fff9e9;--ink: #171914;--muted: #565849;--cyan: #006e76;--magenta: #b52962;--amber: #925000;--green: #39733c;--signal: #c43b18;--danger: #a4262c;--success: #246b3c;--focus: #005fcc;--shadow: 4px 4px 0 var(--ink);font-family:ui-monospace,SFMono-Regular,Cascadia Mono,Roboto Mono,monospace;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;font-size:16px;line-height:1.55;background-color:var(--paper);background-image:radial-gradient(circle,rgb(23 25 20 / 7%) 0 1px,transparent 1.4px);background-size:8px 8px}button,input,select{font:inherit;color:inherit}button,.button-like{min-height:44px;border:2px solid var(--ink);border-radius:0;background:var(--sheet);padding:9px 14px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-weight:750;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}button:hover:not(:disabled),.button-like:hover{background:#fff3c7}button:active:not(:disabled),.button-like:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}a{color:inherit;text-underline-offset:4px;text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.skip-link{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-160%);background:var(--sheet);border:2px solid var(--ink);padding:10px 16px}.skip-link:focus{transform:translateY(0)}.site-header{position:relative;z-index:5;min-height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:1440px;margin:0 auto;padding:12px max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));border-bottom:2px solid var(--ink);background:#f4eedbf0}.brand{display:flex;align-items:center;gap:12px;font-weight:900;text-decoration:none;letter-spacing:.04em}.brand-mark{width:42px;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px;border:2px solid var(--ink);background:var(--ink)}.brand-mark i{display:block;background:var(--paper)}.brand-mark i:nth-child(1){background:var(--cyan)}.brand-mark i:nth-child(2){background:var(--magenta)}.brand-mark i:nth-child(3){background:#d9810c}.brand-mark i:nth-child(4){background:#589052}nav{display:flex;gap:8px}.nav-tab{border:0;box-shadow:none;background:transparent;padding-inline:12px}.nav-tab:hover:not(:disabled){background:#1719140f}.nav-tab.is-active{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px}.status-stamp{justify-self:end;box-shadow:none;border-style:dashed;font-size:13px;background:transparent;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-stamp.is-connected{color:var(--success);border-color:var(--success)}.offline-strip{padding:6px 24px;background:var(--ink);color:var(--sheet);text-align:center;font-size:14px;font-weight:700}main{max-width:1440px;margin:0 auto}.hero{min-height:690px;display:grid;grid-template-columns:minmax(350px,.78fr) minmax(520px,1.22fr);align-items:center;gap:clamp(24px,5vw,80px);padding:clamp(48px,7vw,100px) max(24px,5vw);overflow:hidden}.eyebrow{margin:0 0 12px;color:var(--muted);font-size:13px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Arial Black,Arial Narrow,Arial,sans-serif;letter-spacing:-.045em;line-height:.98}.hero h1{max-width:650px;margin-bottom:28px;font-size:clamp(48px,6.5vw,88px);text-transform:uppercase}.hero h1 em{color:var(--magenta);font-style:normal;text-decoration:underline;text-decoration-thickness:8px;text-underline-offset:8px}.hero-copy>p:not(.eyebrow,.keyboard-note){max-width:53ch;font-size:clamp(17px,1.5vw,20px)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 20px}.primary{color:#fff;background:var(--signal)}.primary:hover:not(:disabled){background:#a62f12}.keyboard-note{color:var(--muted);font-size:14px}kbd{min-width:24px;display:inline-grid;place-items:center;padding:1px 5px;border:1px solid currentColor;background:var(--sheet);font:inherit;font-size:12px;box-shadow:1px 1px 0 currentColor}.hero-art{position:relative;margin:0;transform:rotate(1.2deg)}.hero-art:before{content:"";position:absolute;inset:-14px 10% 10px -14px;z-index:-1;border:3px solid var(--cyan);background:var(--magenta);transform:rotate(-2deg)}.hero-art img{display:block;width:100%;height:auto;border:2px solid var(--ink);filter:contrast(1.04) saturate(.9)}.hero-art figcaption{margin-top:10px;color:var(--muted);font-size:12px}.workbench{border-top:2px solid var(--ink);background:var(--sheet)}.section-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:32px max(24px,5vw);border-bottom:2px solid var(--ink)}.section-intro h2,.library h2,.input-test h2{margin:0;font-size:clamp(30px,4vw,48px);text-transform:uppercase}.routine-picker{display:grid;gap:5px;min-width:min(320px,100%);color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase}select,input{min-height:46px;width:100%;border:2px solid var(--ink);border-radius:0;background:var(--sheet);padding:8px 12px}.practice-layout{display:grid;grid-template-columns:150px 1fr;min-height:690px}.score-strip{display:grid;align-content:start;border-right:2px solid var(--ink)}.score-strip>div{min-height:134px;display:grid;place-items:center;align-content:center;border-bottom:2px solid var(--ink)}.score-strip strong{font-family:Arial Black,Arial,sans-serif;font-size:35px;line-height:1;font-variant-numeric:tabular-nums}.score-strip small,.score-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.stage{padding:clamp(24px,5vw,64px);transition:transform .16s ease}.stage.has-miss{transform:translate(5px)}.cue-tape{min-height:58px;display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:2px dashed var(--ink);background:var(--paper)}.cue-dot{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--sheet);font-weight:900}.cue-dot.is-current{transform:translateY(-5px);box-shadow:3px 3px 0 var(--ink)}.cue-dot.is-past{opacity:.35}.cue-dot.lane-0{border-bottom:7px solid var(--cyan)}.cue-dot.lane-1{border-bottom:7px solid var(--magenta)}.cue-dot.lane-2{border-bottom:7px solid var(--amber)}.cue-dot.lane-3{border-bottom:7px solid var(--green)}.next-cue{min-height:98px;display:flex;justify-content:space-between;align-items:end;gap:20px;padding:26px 0 14px}.next-cue span{color:var(--muted)}.next-cue strong{font-family:Arial Black,Arial,sans-serif;font-size:clamp(23px,4vw,42px);text-align:right;text-transform:uppercase}.pad-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:780px;margin:0 auto}.practice-pad{position:relative;aspect-ratio:1.35;display:grid;grid-template-columns:1fr auto;align-content:space-between;text-align:left;padding:clamp(14px,2.5vw,28px);overflow:hidden;box-shadow:6px 6px 0 var(--ink)}.practice-pad:after{content:"";position:absolute;inset:0;opacity:.12;background-image:radial-gradient(circle,currentColor 0 1.5px,transparent 1.6px);background-size:7px 7px;pointer-events:none}.practice-pad strong{align-self:end;font-family:Arial Black,Arial,sans-serif;font-size:clamp(20px,3vw,36px);text-transform:uppercase}.pad-number{font-weight:900}.pad-shape{font-size:26px}.practice-pad kbd{justify-self:end;align-self:end;background:#fff9e9d9}.practice-pad.lane-0{background:#78d8d9;color:#07383a}.practice-pad.lane-1{background:#ef8eae;color:#491426}.practice-pad.lane-2{background:#f2ba67;color:#472700}.practice-pad.lane-3{background:#91c88e;color:#173719}.practice-pad.is-target{transform:translate(-3px,-3px) scale(1.018);box-shadow:10px 10px 0 var(--signal);outline:4px solid var(--ink);outline-offset:-8px}.practice-pad.is-pressed{transform:translate(6px,6px) scale(.985);box-shadow:0 0 0 var(--ink);filter:saturate(1.35)}.next-label{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%) rotate(-4deg);padding:4px 11px;background:var(--ink);color:var(--sheet);font-weight:900;text-transform:uppercase}.transport{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}.stage-help{margin:18px auto 0;max-width:68ch;color:var(--muted);text-align:center;font-size:14px}.page-heading{min-height:390px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px;padding:clamp(56px,8vw,110px) max(24px,6vw) 56px;border-bottom:2px solid var(--ink)}.page-heading>div:first-child{max-width:850px}.page-heading h1{margin-bottom:22px;font-size:clamp(50px,8vw,104px);text-transform:uppercase}.page-heading p:not(.eyebrow){max-width:65ch;font-size:18px}.heading-stamp{min-width:140px;border:3px double var(--ink);padding:18px;transform:rotate(3deg);font-weight:900;text-align:center;text-transform:uppercase}.editor{padding:clamp(32px,5vw,72px) max(24px,5vw);background:var(--sheet);border-bottom:2px solid var(--ink)}.editor-fields{display:grid;grid-template-columns:1fr 160px;gap:16px;max-width:780px;margin-bottom:32px}label{color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase}label input,label select{display:block;margin-top:5px;color:var(--ink);font-size:16px;font-weight:500;text-transform:none}.sequence-scroll{overflow-x:auto;padding:4px 4px 12px;scrollbar-color:var(--ink) var(--paper)}.sequence{min-width:max(720px,calc(76px + var(--steps) * 56px));display:grid;grid-template-columns:76px repeat(var(--steps),minmax(48px,1fr));gap:5px}.sequence-corner,.step-number,.lane-label{display:grid;place-items:center;min-height:38px;font-size:12px;font-weight:850;text-transform:uppercase}.step-number{color:var(--muted);font-variant-numeric:tabular-nums}.lane-label{grid-template-columns:1fr;border-left:7px solid currentColor;background:var(--paper)}.lane-label span{font-size:9px}.lane-0{color:var(--cyan)}.lane-1{color:var(--magenta)}.lane-2{color:var(--amber)}.lane-3{color:var(--green)}.step-cell{min-width:44px;height:54px;padding:0;box-shadow:none;background:var(--paper);color:var(--ink)}.step-cell.is-on{color:var(--sheet);background:currentColor;box-shadow:inset 0 0 0 5px var(--sheet)}.step-cell.is-on span{color:var(--ink);filter:invert(1)}.step-cell.lane-0.is-on{background:var(--cyan)}.step-cell.lane-1.is-on{background:var(--magenta)}.step-cell.lane-2.is-on{background:var(--amber)}.step-cell.lane-3.is-on{background:var(--green)}.editor-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.action-spacer{flex:1}.library{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:56px max(24px,5vw)}.library>div:first-child{max-width:620px}.library-actions{display:flex;flex-wrap:wrap;justify-content:end;gap:12px}.button-like{display:inline-flex;align-items:center;color:var(--ink);font-size:16px;text-transform:none}.danger-button{color:var(--danger);border-color:var(--danger);box-shadow:3px 3px 0 var(--danger)}.connect-heading{align-items:center}.compatibility{max-width:310px;display:grid;gap:5px;border:2px solid currentColor;padding:20px;box-shadow:4px 4px 0 currentColor;transform:rotate(1deg)}.compatibility span{font-size:13px}.compatibility.is-good{color:var(--success)}.compatibility.is-bad{color:var(--danger)}.pair-sheet{display:grid;grid-template-columns:90px minmax(260px,.8fr) minmax(320px,1.2fr);align-items:start;gap:clamp(20px,4vw,60px);padding:44px max(24px,6vw);border-bottom:2px solid var(--ink);background:var(--sheet)}.pair-number{font-family:Arial Black,Arial,sans-serif;font-size:50px;color:var(--magenta)}.pair-sheet h2{margin-bottom:12px;font-size:clamp(28px,3vw,42px);text-transform:uppercase}.pair-control,.light-settings{display:grid;gap:14px}.note-map{display:grid;grid-template-columns:1fr 1fr;gap:12px}.note-map label{border-left:7px solid currentColor;padding-left:9px}.optional{font:11px ui-monospace,monospace;letter-spacing:0;vertical-align:middle;background:var(--paper);border:1px solid var(--ink);padding:3px 5px}.switch-row{min-height:48px;display:flex;align-items:center;gap:12px;color:var(--ink);font-size:16px;text-transform:none}.switch-row input{width:24px;min-height:24px;margin:0;accent-color:var(--signal)}.input-test{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:40px;padding:56px max(24px,6vw)}.mini-pads{display:grid;grid-template-columns:repeat(4,68px);gap:8px}.mini-pad{min-height:68px;display:grid;place-items:center;align-content:center;padding:4px;box-shadow:3px 3px 0 var(--ink);font-size:22px}.mini-pad small{display:block;color:var(--ink);font-size:8px;text-transform:uppercase}.mini-pad.lane-0{background:#78d8d9}.mini-pad.lane-1{background:#ef8eae}.mini-pad.lane-2{background:#f2ba67}.mini-pad.lane-3{background:#91c88e}.mini-pad.is-pressed{transform:translate(3px,3px);box-shadow:none}.live-status{position:fixed;z-index:20;right:20px;bottom:20px;max-width:min(440px,calc(100vw - 40px));border:2px solid var(--ink);background:var(--sheet);padding:11px 16px;box-shadow:var(--shadow);font-size:13px}.live-status[data-tone=success]{border-color:var(--success);color:var(--success);box-shadow:4px 4px 0 var(--success)}.live-status[data-tone=error]{border-color:var(--danger);color:var(--danger);box-shadow:4px 4px 0 var(--danger)}.update-toast{position:fixed;z-index:25;left:20px;bottom:20px;display:flex;align-items:center;gap:12px;border:2px solid var(--ink);background:#f4c961;padding:12px;box-shadow:var(--shadow)}footer{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:32px;padding:32px max(24px,5vw) calc(32px + env(safe-area-inset-bottom));border-top:2px solid var(--ink);background:var(--ink);color:var(--paper);font-size:13px}footer p{margin:0}footer>div{display:flex;gap:18px}.text-button{min-height:0;border:0;padding:0;box-shadow:none;background:none;color:inherit;text-decoration:underline;text-underline-offset:4px}.art-credit{color:#c8c1ae;text-align:right}.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:980px){.site-header{grid-template-columns:1fr auto}.status-stamp{display:none}.hero{min-height:auto;grid-template-columns:1fr}.hero-copy{max-width:760px}.hero-art{max-width:860px}.pair-sheet{grid-template-columns:60px 1fr}.pair-sheet>:last-child{grid-column:2}.input-test{grid-template-columns:1fr auto}.input-test>button{grid-column:1 / -1;justify-self:start}footer{grid-template-columns:1fr auto}.art-credit{grid-column:1 / -1;text-align:left}}@media(max-width:700px){.site-header{position:static;display:flex;flex-wrap:wrap;gap:8px 16px;padding:10px 16px}.brand{flex:1}.brand-mark{width:38px}nav{order:2;width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.nav-tab{padding-inline:5px;font-size:14px}.hero{padding:48px 18px 64px}.hero h1{font-size:clamp(43px,14vw,66px)}.hero h1 em{text-decoration-thickness:5px}.hero-art:before{inset:-8px 8% 5px -8px}.hero-actions>*{width:100%}.section-intro{align-items:stretch;flex-direction:column;padding-inline:18px}.routine-picker{min-width:0}.practice-layout{grid-template-columns:1fr}.score-strip{grid-template-columns:repeat(4,1fr);border-right:0;border-bottom:2px solid var(--ink)}.score-strip>div{min-height:84px;border-bottom:0;border-right:1px solid var(--ink)}.score-strip strong{font-size:26px}.stage{padding:24px 14px 40px}.next-cue{display:grid;gap:5px}.next-cue strong{text-align:left}.pad-grid{gap:10px}.practice-pad{aspect-ratio:1.05;padding:13px;box-shadow:4px 4px 0 var(--ink)}.practice-pad strong{font-size:17px}.pad-shape{font-size:18px}.practice-pad kbd{display:none}.page-heading{min-height:350px;grid-template-columns:1fr;align-items:end;gap:24px;padding:56px 18px 36px}.page-heading h1{font-size:clamp(45px,15vw,72px)}.heading-stamp{justify-self:start}.editor{padding:32px 14px}.editor-fields{grid-template-columns:1fr 110px}.action-spacer{display:none}.editor-actions button{flex:1 1 42%}.library{grid-template-columns:1fr;padding:42px 18px}.library-actions{justify-content:start}.pair-sheet{grid-template-columns:1fr;gap:8px;padding:34px 18px}.pair-number{font-size:31px}.pair-sheet>:last-child{grid-column:1;margin-top:14px}.note-map{grid-template-columns:1fr 1fr}.compatibility{transform:none}.input-test{grid-template-columns:1fr;padding:42px 18px}.mini-pads{grid-template-columns:repeat(4,minmax(54px,1fr))}.input-test>button{grid-column:auto;justify-self:stretch}.live-status{position:static;max-width:none;margin:0;border-left:0;border-right:0;box-shadow:none!important}.update-toast{position:static;margin:0;box-shadow:none;border-left:0;border-right:0}footer{grid-template-columns:1fr;padding-inline:18px}footer>div{flex-wrap:wrap}.art-credit{grid-column:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.hero-art,.heading-stamp,.compatibility,.practice-pad.is-target,.cue-dot.is-current{transform:none}}@media print{.site-header,.hero,footer,.live-status,.editor-actions,.library-actions{display:none!important}body{background:#fff}main{max-width:none}}