@font-face{font-family:Inter;src:url(/static/inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#fff;--fg:#0a0a0a;--mu:#6b6b6b;--ln:#ececec;--card:#fafafa;--ac:#5b5bf7;--acs:rgba(91,91,247,.1);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#0a0a0b;--fg:#ededed;--mu:#8f8f95;--ln:#1f1f22;--card:#111113;--ac:#8b8bff;--acs:rgba(139,139,255,.12)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}a:hover{color:var(--ac);text-decoration-color:var(--ac)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;background:var(--bg);padding:8px 12px;z-index:9}
.w{max-width:720px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:5;backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--ln)}
nav{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-weight:600;letter-spacing:-.02em;text-decoration:none;display:flex;gap:8px;align-items:center}.logo i{width:10px;height:10px;border-radius:3px;background:var(--ac);display:inline-block}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:14px}nav ul a{text-decoration:none;color:var(--mu)}nav ul a:hover{color:var(--fg)}
main.w{padding-top:56px;padding-bottom:80px}
h1{font-size:clamp(28px,6vw,40px);line-height:1.15;letter-spacing:-.035em;font-weight:650;margin:0 0 16px;text-wrap:balance}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);font-weight:600;margin:56px 0 16px}
.lede{font-size:19px;line-height:1.55;color:var(--fg);margin:0 0 16px;text-wrap:pretty}
.meta{font-size:13px;color:var(--mu);display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 32px}.meta span+span:before{content:"·";margin-right:14px}
.vid{position:relative;aspect-ratio:9/16;max-width:340px;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--ln);margin:0 0 8px}
.vid button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:32px}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s,transform .6s cubic-bezier(.2,.7,.2,1)}
.vid button:hover img{opacity:1;transform:scale(1.03)}
.play{position:relative;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.3);transition:transform .25s}.vid button:hover .play{transform:scale(1.08)}
.play:after{content:"";margin-left:5px;border-left:18px solid #0a0a0a;border-top:11px solid transparent;border-bottom:11px solid transparent}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.small{font-size:13px;color:var(--mu)}
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0}ol.steps li{counter-increment:s;position:relative;padding:0 0 18px 44px}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:8px;background:var(--acs);color:var(--ac);font-size:13px;font-weight:600;display:grid;place-items:center}
.prompt{position:relative;background:var(--card);border:1px solid var(--ln);border-radius:12px;padding:16px 92px 16px 18px;font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.copy{position:absolute;right:10px;top:10px;font:500 13px Inter,system-ui,sans-serif;border:1px solid var(--ln);background:var(--bg);color:var(--fg);border-radius:8px;padding:6px 12px;cursor:pointer;transition:border-color .2s,color .2s}.copy:hover{border-color:var(--ac);color:var(--ac)}
.note{border-left:2px solid var(--ac);padding:2px 0 2px 16px;color:var(--mu)}
.tr p{margin:0 0 12px;color:var(--mu)}
details{border-top:1px solid var(--ln);padding:14px 0}details:last-of-type{border-bottom:1px solid var(--ln)}summary{cursor:pointer;font-weight:550;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:"+";float:right;color:var(--mu);transition:transform .2s}details[open] summary:after{transform:rotate(45deg)}details p{margin:10px 0 0;color:var(--mu)}
.list{list-style:none;padding:0;margin:0}.list a{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;text-decoration:none;padding:16px;margin:0 -16px;border-radius:14px;transition:background .2s}.list a:hover{background:var(--card);color:inherit}
.list img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--ln)}.list b{display:block;font-weight:600;letter-spacing:-.01em;line-height:1.35}.list span{font-size:13px;color:var(--mu)}
.btn{display:inline-flex;gap:8px;align-items:center;text-decoration:none;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;font-weight:550;transition:opacity .2s,transform .2s}.btn:hover{color:var(--bg);opacity:.88;transform:translateY(-1px)}
footer{border-top:1px solid var(--ln);padding:32px 0 48px;font-size:13px;color:var(--mu)}footer a{color:var(--mu)}
@media(min-width:900px){.w{max-width:880px}.grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}.grid h2:first-child{margin-top:0}.grid .vidc{position:sticky;top:80px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}