:root{--background:#f7f7f4;--foreground:#4a4a46;--heading:#22221f;--muted:#6b6b66;--tertiary:#9a9a95;--link:#3d7a50;--card-bg:#eae9e4;--stage:#f0f0ec;--border:#e2e2de;--accent-surface:#3d7a50;--accent-on-surface:#fff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@supports (color:lab(0% 0 0)){:root{--background:lab(97.1343% -.395566 1.45847);--foreground:lab(31.3826% -.625297 2.38293);--heading:lab(13.0496% -.566229 2.20828);--muted:lab(45.0833% -.770927 2.93185);--tertiary:lab(63.5194% -.682533 2.5594);--link:lab(46.3206% -28.2577 16.8119);--card-bg:lab(92.2789% -.424564 2.62862);--stage:lab(94.7006% -.306189 1.87562);--border:lab(89.8348% -.492901 1.8242);--accent-surface:lab(46.3206% -28.2577 16.8119);--accent-on-surface:lab(100% 0 0)}}[data-theme=dark]{--background:#1a1412;--foreground:#d9cec4;--heading:#f5f0eb;--muted:#a89990;--tertiary:#7a6b62;--link:#e07851;--card-bg:#2a2220;--stage:#231c1a;--border:#3d3230;--accent-surface:#cd3f00;--accent-on-surface:#fff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@supports (color:lab(0% 0 0)){[data-theme=dark]{--background:lab(6.94355% 2.75981 2.31125);--foreground:lab(83.5136% 2.61199 6.29772);--heading:lab(95.1286% 1.13237 3.2011);--muted:lab(64.3073% 4.56089 6.82949);--tertiary:lab(46.4328% 5.03773 7.49991);--link:lab(62.0747% 38.888 40.168);--card-bg:lab(14.0598% 3.68308 2.85428);--stage:lab(11.1719% 3.32574 2.77009);--border:lab(21.9131% 4.71634 3.14195);--accent-surface:lab(48.222% 64.1559 84.2327);--accent-on-surface:lab(100% 0 0)}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#1a1412;--foreground:#d9cec4;--heading:#f5f0eb;--muted:#a89990;--tertiary:#7a6b62;--link:#e07851;--card-bg:#2a2220;--stage:#231c1a;--border:#3d3230;--accent-surface:#cd3f00;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@supports (color:lab(0% 0 0)){:root:not([data-theme=light]){--background:lab(6.94355% 2.75981 2.31125);--foreground:lab(83.5136% 2.61199 6.29772);--heading:lab(95.1286% 1.13237 3.2011);--muted:lab(64.3073% 4.56089 6.82949);--tertiary:lab(46.4328% 5.03773 7.49991);--link:lab(62.0747% 38.888 40.168);--card-bg:lab(14.0598% 3.68308 2.85428);--stage:lab(11.1719% 3.32574 2.77009);--border:lab(21.9131% 4.71634 3.14195);--accent-surface:lab(48.222% 64.1559 84.2327)}}}*,:before,:after{box-sizing:border-box}:root{--edge-top-background:var(--background);--edge-bottom-background:var(--background)}html{-webkit-text-size-adjust:100%;background:var(--edge-top-background)}body{background:var(--edge-bottom-background);min-height:100dvh;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);color:var(--foreground);-webkit-font-smoothing:antialiased;margin:0;font:15px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}::selection{background:color-mix(in oklch, var(--link) 24%, transparent)}.edge-top:after,.edge-bottom:after{content:"";z-index:50;pointer-events:none;position:fixed;left:0;right:0}.edge-top:after{height:max(12px, env(safe-area-inset-top));background-color:var(--edge-top-background);top:0}.edge-bottom:after{height:max(12px, env(safe-area-inset-bottom));background-color:var(--edge-bottom-background);bottom:0}.page{max-width:580px;padding:28px 20px max(64px, env(safe-area-inset-bottom));margin:0 auto}@media (min-width:640px){.page{padding:48px 24px 112px}}.wide{max-width:760px}.eyebrow{color:var(--muted);align-items:center;gap:8px;margin:0 0 28px;font-size:13px;display:flex}.eyebrow a{color:inherit;text-decoration:none}.eyebrow a:hover{color:var(--heading)}h1{color:var(--heading);letter-spacing:-.005em;margin:0 0 6px;font-size:15px;font-weight:500}.lede{color:var(--muted);text-wrap:pretty;margin:0 0 40px}.list{border-top:1px solid var(--border);margin:0;padding:0;list-style:none}.list li{border-bottom:1px solid var(--border)}.list a{color:inherit;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 0;text-decoration:none;display:grid}.list a:hover .item-title{color:var(--link)}.item-title{color:var(--heading);font-weight:500;transition:color .15s ease-out}.item-date{color:var(--tertiary);font-variant-numeric:tabular-nums;font-size:13px}.item-summary{color:var(--muted);text-wrap:pretty;grid-column:1/-1;font-size:14px}.stage{background:var(--stage);touch-action:pan-y;place-items:center;min-height:340px;margin:0 -20px 28px;padding:40px 16px;display:grid}@media (min-width:640px){.stage{border-radius:20px;min-height:420px;margin:0 0 28px}}.stage .mx-sticker{width:min(460px,100%);color:var(--heading)}.stage-hint{color:var(--tertiary);text-align:center;text-wrap:balance;margin:-18px 0 36px;font-size:13px}.actions{flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 40px;display:flex}.button{min-height:40px;font:inherit;cursor:pointer;background:var(--accent-surface);color:var(--accent-on-surface);-webkit-tap-highlight-color:transparent;border:0;border-radius:999px;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:500;transition:transform .16s cubic-bezier(.2,.8,.2,1),filter .16s ease-out;display:inline-flex}.button:hover{filter:brightness(1.06)}.button:active{transform:scale(.97)}.button:focus-visible{outline:2px solid var(--link);outline-offset:2px}.button.quiet{background:var(--card-bg);color:var(--heading)}.copied{color:var(--muted);font-size:13px}details.prompt{border-top:1px solid var(--border);padding-top:16px}details.prompt summary{cursor:pointer;color:var(--heading);font-weight:500;list-style:none}details.prompt summary::-webkit-details-marker{display:none}details.prompt summary:after{content:" +";color:var(--tertiary)}details.prompt[open] summary:after{content:" −"}details.prompt pre{background:var(--card-bg);white-space:pre-wrap;word-break:break-word;color:var(--foreground);border-radius:14px;max-height:60vh;margin:16px 0 0;padding:16px;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.footer{color:var(--tertiary);margin-top:64px;font-size:13px}.footer a{color:var(--muted)}@media (prefers-reduced-motion:reduce){.button,.item-title{transition:none}}.gallery{max-width:1040px}.gallery-head{max-width:580px}.grid{grid-template-columns:1fr;gap:36px 24px;margin:0;padding:0;list-style:none;display:grid}@media (min-width:680px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.card{flex-direction:column;min-width:0;height:100%;display:flex}.card-link{color:inherit;border-radius:16px;flex-direction:column;gap:4px;text-decoration:none;display:flex}.card-link:focus-visible{outline:2px solid var(--link);outline-offset:4px}.thumb{aspect-ratio:16/10;background:var(--stage);isolation:isolate;border-radius:16px;margin-bottom:12px;display:block;position:relative;overflow:hidden}.thumb:after{content:"";z-index:2;border-radius:inherit;outline-offset:-1px;pointer-events:none;outline:1px solid #0000001a;outline:1px solid lab(0% 0 0/.1);position:absolute;inset:0}[data-theme=dark] .thumb:after{outline-color:#ffffff1a;outline-color:lab(100% 0 0/.1)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .thumb:after{outline-color:#ffffff1a;outline-color:lab(100% 0 0/.1)}}.thumb :is(img,video){object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.thumb-dark,[data-theme=dark] .thumb-light{display:none}[data-theme=dark] .thumb-dark{display:block}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .thumb-light{display:none}:root:not([data-theme=light]) .thumb-dark{display:block}}.thumb{-webkit-tap-highlight-color:transparent;transition:scale .3s cubic-bezier(.2,.8,.2,1)}.thumb img,.thumb-loop,.pv-layer{transition:scale .52s cubic-bezier(.16,1,.3,1),opacity .24s cubic-bezier(.2,.8,.2,1);scale:1}.thumb:after{transition:outline-color .2s ease-out}.card-link,.pager-card{-webkit-tap-highlight-color:transparent}@media (hover:hover) and (pointer:fine){:is(.card-link,.pager-card):hover .thumb :is(img,.thumb-loop,.pv-layer){scale:1.04}:is(.card-link,.pager-card):hover .thumb:after{outline-color:#00000029;outline-color:lab(0% 0 0/.16)}[data-theme=dark] :is(.card-link,.pager-card):hover .thumb:after{outline-color:#ffffff29;outline-color:lab(100% 0 0/.16)}.card-link:hover .card-title{color:var(--link)}}@media (hover:hover) and (pointer:fine) and (prefers-color-scheme:dark){:root:not([data-theme=light]) :is(.card-link,.pager-card):hover .thumb:after{outline-color:#ffffff29;outline-color:lab(100% 0 0/.16)}}:is(.card-link,.pager-card):active .thumb{transition-duration:.12s;scale:.98}.card-title{color:var(--heading);font-weight:500;transition:color .15s ease-out}.card-summary{color:var(--muted);text-wrap:pretty;font-size:14px;line-height:1.5}.card-actions{align-items:center;gap:14px;margin-top:auto;padding-top:14px;display:flex}.button.small{min-height:34px;padding:0 14px;font-size:13px}.card-actions .button.small{color:var(--heading);box-shadow:inset 0 0 0 1px var(--border);background:0 0;transition:background-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out,transform .16s cubic-bezier(.2,.8,.2,1)}@media (hover:hover){.card-actions .button.small:hover{background:var(--card-bg);filter:none}}.card-actions .button.small[data-state=copied]{color:var(--link);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--link) 45%, transparent)}.button.small[data-state=copied]{filter:none}.button-label{text-align:center;min-width:8.5ch;display:inline-block}.card-open{color:var(--muted);font-size:13px;text-decoration:none}.card-open:hover{color:var(--heading)}@media (prefers-reduced-motion:reduce){.thumb,.thumb img,.thumb-loop,.pv-layer,.card-title{transition:none}.thumb,.thumb img,.thumb-loop,.thumb .pv-layer{scale:1!important}}.demo-signature{justify-items:center;gap:28px;width:min(520px,100%);display:grid}.demo-replay{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:8px 12px;font-size:13px;transition:color .15s ease-out}.demo-replay:hover{color:var(--heading)}.demo-replay:focus-visible{outline:2px solid var(--link);outline-offset:2px}h2{color:var(--heading);margin:0 0 8px;font-size:15px;font-weight:500}.skill-block{margin:0 0 48px}.skill-note{color:var(--muted);text-wrap:pretty;margin:0 0 14px;font-size:14px}.skill-note code,.command code{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.command{background:var(--card-bg);border-radius:12px;align-items:center;gap:10px;min-width:0;margin:0 0 22px;padding:8px 8px 8px 14px;display:flex}.command code{min-width:0;color:var(--heading);overflow-wrap:anywhere;flex:1}.skill-list li{gap:2px;padding:14px 0;display:grid}.gallery-skill{color:var(--muted);margin:-18px 0 40px;font-size:14px}.gallery-title{letter-spacing:-.01em;margin-bottom:8px;font-size:18px}.next{border-top:1px solid var(--border);color:inherit;grid-template-columns:96px 1fr;align-items:center;gap:16px;margin:48px 0 0;padding:14px 0;text-decoration:none;display:grid}.next .thumb{border-radius:10px;margin:0}.next-label{color:var(--tertiary);font-size:13px;display:block}.next-title{color:var(--heading);font-weight:500;transition:color .15s ease-out;display:block}.next-blurb{color:var(--muted);font-size:14px;display:block}@media (hover:hover){.next:hover .next-title{color:var(--link)}}.next:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:12px}@media (prefers-reduced-motion:reduce){.next-title,.card-actions .button.small{transition:none}}.site-header{max-width:1040px;padding:calc(18px + env(safe-area-inset-top)) 20px 0;view-transition-name:site-header;align-items:center;gap:20px;margin:0 auto;font-size:14px;display:flex}@media (min-width:640px){.site-header{padding:calc(24px + env(safe-area-inset-top)) 24px 0}}.site-name{color:var(--heading);font-weight:500;text-decoration:none}.site-nav{gap:16px;margin-inline-end:auto;display:flex}.site-nav a{color:var(--muted);text-decoration:none;transition:color .15s ease-out}.site-nav a:hover,.site-nav a.is-section{color:var(--heading)}.site-name:focus-visible,.site-nav a:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}.theme-toggle{width:36px;height:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;margin-inline-end:-8px;transition:color .15s ease-out,background-color .15s ease-out;display:grid}.theme-toggle:hover{color:var(--heading);background:var(--card-bg)}.theme-toggle:focus-visible{outline:2px solid var(--link);outline-offset:2px}@media (max-width:420px){.site-name{display:none}}.thumb img{z-index:0}.pv-layer{z-index:1;background:var(--stage);opacity:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.thumb[data-live] .pv-layer{opacity:1}.thumb-loop{z-index:1;opacity:0;pointer-events:none}.thumb[data-playing] .thumb-loop{opacity:1}.thumb .stage.pv-stage{transform-origin:0 0;pointer-events:none;border-radius:0;width:720px;height:450px;min-height:0;margin:0;position:absolute;top:0;left:0}.pv-stage :is(.pg-controls,.rs-again,.rs-mute,.sg-controls,.dm-pips,.lb-mute,.cs-mute,.ft-again,.ft-mute,.mb-again,.mb-mute,.zp-mute,.pf-sound,.sc-again,.we-again,.dp-again,.ts-reprint){visibility:hidden}.detail-head{justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 18px;display:flex}.detail-back{color:var(--muted);margin-bottom:6px;font-size:13px;text-decoration:none;display:inline-block}.detail-back:before{content:"‹ "}.detail-back:hover{color:var(--heading)}.detail h1{letter-spacing:-.012em;margin:0;font-size:20px}.stepper{flex:none;align-items:center;gap:2px;display:flex}.step{width:36px;height:36px;color:var(--heading);border-radius:999px;place-items:center;text-decoration:none;transition:background-color .15s ease-out,transform .16s cubic-bezier(.2,.8,.2,1);display:grid}.step:hover{background:var(--card-bg)}.step:active{transform:scale(.96)}.step:focus-visible{outline:2px solid var(--link);outline-offset:2px}.step-count{text-align:center;min-width:5ch;color:var(--tertiary);font-variant-numeric:tabular-nums;font-size:13px}.detail-info{gap:18px;margin:0 0 40px;display:grid}.detail-info .lede,.detail-info .actions{margin:0}@media (min-width:720px){.detail-info{grid-template-columns:1fr auto;align-items:start;gap:40px}.detail-info .actions{flex-direction:column;align-items:flex-end}}.pager{grid-template-columns:1fr 1fr;gap:20px;margin:56px 0 0;display:grid}.pager-card{color:inherit;flex-direction:column;gap:2px;min-width:0;text-decoration:none;display:flex}.pager-card .thumb{margin-bottom:10px}.pager-label{color:var(--tertiary);font-size:13px}.pager-title{color:var(--heading);font-weight:500;transition:color .15s ease-out}.pager-blurb{color:var(--muted);text-wrap:pretty;font-size:14px}.pager-card:hover .pager-title{color:var(--link)}.pager-card:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:16px}@media (max-width:480px){.pager-blurb{display:none}}::view-transition-group(*){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,1,.36,1)}::view-transition-old(root){animation:.14s cubic-bezier(.4,0,1,1) both vt-fade-out}::view-transition-new(root){animation:.26s cubic-bezier(.2,.8,.2,1) 60ms both vt-fade-in}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-fade-in{0%{opacity:0}}:root[data-vt=next]{--vt-dir:1}:root[data-vt=prev]{--vt-dir:-1}::view-transition-old(vt-out){--vt-travel:18%}::view-transition-new(vt-in){--vt-travel:18%}::view-transition-old(vt-title-out){--vt-travel:16px}::view-transition-new(vt-title-in){--vt-travel:16px}::view-transition-old(vt-out){animation:.16s cubic-bezier(.4,0,.6,1) both vt-leave}::view-transition-old(vt-title-out){animation:.16s cubic-bezier(.4,0,.6,1) both vt-leave}::view-transition-new(vt-in){animation:.4s cubic-bezier(.22,1,.36,1) .12s both vt-enter}::view-transition-new(vt-title-in){animation:.4s cubic-bezier(.22,1,.36,1) .12s both vt-enter}@keyframes vt-leave{to{translate:calc(var(--vt-dir,1) * var(--vt-travel) * -1) 0;opacity:0}}:root[data-vt-solo]::view-transition-old(vt-object){animation:.16s cubic-bezier(.4,0,1,1) both vt-tuck}@keyframes vt-tuck{to{opacity:0;scale:.96}}@keyframes vt-enter{0%{translate:calc(var(--vt-dir,1) * var(--vt-travel)) 0;opacity:0}}@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}::view-transition-old(*){animation:none!important}::view-transition-new(*){animation:none!important}.pv-layer,.site-nav a,.theme-toggle,.step{transition:none}}