:root{--chrome:#e3e5e9;--panel:#f1f2f4;--bg:#fbfbfc;--field:#fff;--ink:#1d2127;--muted:#69707b;--line:#d2d5db;--line2:#c2c6cd;--accent:#2563d9;--focus:#f0a000;--mark:#ffe25a;--mark-current:#ff9d2e;--lane:#141e3209;--hover:#141e320f;--blk:52%;--note:#fff6d6;--note-line:#e2c560;--sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;--brand:#006271;font-family:var(--sans)}:root[data-theme=dark]{--chrome:#17191c;--panel:#1f2125;--bg:#1a1c1f;--field:#131417;--ink:#d9dce1;--muted:#888e98;--line:#2f3238;--line2:#3d4148;--accent:#5c9af7;--focus:#ffc23d;--lane:#ffffff08;--hover:#ffffff0f;--blk:20%;--note:#3a3220;--note-line:#7a6326;--brand:#71cfd9}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}a{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.small{color:var(--muted);font-size:12px}.wrap{max-width:1120px;margin:0 auto;padding:0 16px}.btn{border:1px solid var(--line2);background:var(--field);height:30px;color:var(--ink);cursor:pointer;white-space:nowrap;font:13px var(--sans);border-radius:3px;align-items:center;gap:6px;padding:0 11px;text-decoration:none;display:inline-flex}.btn:hover{border-color:var(--muted)}.btn.on{background:color-mix(in srgb, var(--accent) 16%, var(--field));border-color:color-mix(in srgb, var(--accent) 60%, var(--line2));font-weight:600}.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--bg);font-weight:600}.btn.primary:hover{filter:brightness(1.1)}.btn.big{height:38px;padding:0 16px;font-size:14px}.btn svg{flex:none;width:15px;height:15px}.gh{gap:0;padding:0;overflow:hidden}.gh .lbl{align-items:center;gap:6px;height:100%;padding:0 10px;display:inline-flex}.gh .n{border-left:1px solid var(--line2);background:var(--panel);align-items:center;height:100%;padding:0 10px;font-size:12.5px;font-weight:600;display:inline-flex}.gh .n:empty{display:none}.gh:hover .n{border-left-color:var(--muted)}.tagpill{background:var(--tc,var(--ink));color:#fff;white-space:nowrap;border-radius:2px;padding:0 6px;font-size:11px;font-weight:600;line-height:17px;display:inline-block}.top{z-index:10;background:var(--chrome);border-bottom:1px solid var(--line);align-items:center;gap:18px;height:52px;padding:0 16px;display:flex;position:sticky;top:0}.brand{color:var(--ink);letter-spacing:-.01em;align-items:center;gap:8px;font-size:17px;font-weight:600;text-decoration:none;display:inline-flex}.brand img{width:28px;height:28px}.logo-dark,:root[data-theme=dark] .logo-light{display:none}:root[data-theme=dark] .logo-dark{display:block}.nav{gap:2px;display:flex}.nav a{color:var(--muted);white-space:nowrap;border-radius:3px;padding:5px 9px;font-size:13.5px;text-decoration:none}.nav a:hover{color:var(--ink);background:var(--hover)}.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand);border-radius:0}.top .right{align-items:center;gap:8px;margin-left:auto;display:flex}#theme{justify-content:center;width:30px;padding:0;font-size:15px}.top .right>*{flex:none}@media (width<=720px){.top{gap:8px;padding:0 10px}.top .hide-sm{display:none}.nav a{padding:5px 6px}#theme{width:34px;height:34px;font-size:17px}}@media (width<=440px){.top{gap:6px}.brand{font-size:16px}.nav a{padding:5px 4px;font-size:13px}.gh .n{display:none}}.landing{--pen:#e2702b;--hand:"Caveat", "Comic Sans MS", cursive;--display:"IBM Plex Serif", Georgia, serif;max-width:960px;padding-bottom:64px}:root[data-theme=dark] .landing{--pen:#f08a4e}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hero{text-align:center;padding:76px 0 40px;position:relative}.hero:before{content:"";z-index:-1;background:radial-gradient(ellipse 60% 55% at 50% 30%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 72%);pointer-events:none;width:min(900px,100vw);height:420px;position:absolute;top:0;left:50%;transform:translate(-50%)}.hero h1{font:500 58px/1.04 var(--display);letter-spacing:-.025em;color:var(--ink);margin:0 0 18px}.hero .lead{max-width:50ch;color:var(--muted);margin:0 auto 28px;font-size:18px;line-height:1.6}.hero .acts{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.watch{margin:0}.player{aspect-ratio:16/9;border:1px solid var(--line);background:var(--panel);border-radius:8px;position:relative;overflow:hidden;box-shadow:0 1px 2px #141e320f,0 12px 32px -12px #141e3238}.player video{width:100%;height:100%;display:block}.cover{cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;inset:0}.cover img{object-fit:cover;filter:saturate(.9);width:100%;height:100%;transition:transform .4s;position:absolute;inset:0}.cover:after{content:"";background:radial-gradient(#0f161e1a,#0f161e6b);position:absolute;inset:0}.cover .play{z-index:1;background:var(--brand);border-radius:50%;place-items:center;width:76px;height:76px;transition:transform .15s;display:grid;position:relative;box-shadow:0 6px 24px #00000047}.cover .play svg{fill:#fff;width:32px;height:32px;margin-left:4px}.cover .label{z-index:1;white-space:nowrap;color:#1d2127;font:600 14px var(--sans);background:#fffffff0;border-radius:99px;padding:5px 12px;position:absolute;top:calc(50% + 52px);left:50%;transform:translate(-50%)}.cover .label small{color:#69707b;margin-left:6px;font-weight:500}.cover:hover img{transform:scale(1.015)}.cover:hover .play{transform:scale(1.06)}.cover:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.watch figcaption{justify-content:space-between;align-items:center;gap:14px 24px;margin-top:14px;display:flex}.watch figcaption p{max-width:56ch;color:var(--muted);margin:0;font-size:14px;line-height:1.55}.watch figcaption .btn{flex:none}.how{padding-top:6px}.flow{width:100%;height:auto;margin:4px 0;display:block;overflow:visible}.hero .acts{position:relative}.start-arrow{width:58px;height:64px;position:absolute;top:8px;left:calc(50% + 76px);overflow:visible}.flow path,.flow-sm path,.start-arrow path,.num svg path{fill:none;stroke:var(--pen);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.flow-sm{width:34px;height:46px;margin:10px auto;display:none;overflow:visible}.step{align-items:start;gap:28px 40px;display:grid}.step.pic-left{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.step.pic-right{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.step h3{font:500 26px/1.2 var(--display);letter-spacing:-.015em;align-items:center;gap:12px;margin:0 0 10px;display:flex}.step p{max-width:60ch;margin:0 0 12px;font-size:15.5px;line-height:1.6}.step .small{margin-top:12px;font-size:13px}.num{flex:none;place-items:center;width:46px;height:46px;display:grid;position:relative}.num svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.num b{font:600 27px/1 var(--hand);color:var(--pen);transform:translateY(1px)}.media{position:relative}.media img{border:1px solid var(--line);border-radius:6px;width:100%;height:auto;display:block;box-shadow:0 10px 28px -14px #141e324d}.pic-right .media img{object-fit:cover;object-position:top;max-height:540px}.note{font:600 21px/1.1 var(--hand);color:var(--pen);white-space:nowrap;position:absolute}.n-dig{top:-28px;right:6px}.n-story{bottom:-30px;left:-8px}.prompt{border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--field);border-radius:4px;align-items:flex-start;gap:12px;padding:14px 16px;display:flex}.prompt code{min-width:0;font:13px/1.6 var(--mono);overflow-wrap:anywhere;flex:1}#install{scroll-margin-top:70px}.cases{padding-top:84px}.cases h2,.name h2{font:500 26px/1.2 var(--display);letter-spacing:-.015em;margin:0 0 6px}.cases ol{grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 0;padding:0;list-style:none;display:grid}.cases li a{border-top:3px solid var(--brand);height:100%;color:var(--ink);flex-direction:column;padding:14px 0 0;text-decoration:none;display:flex}.cases h3{letter-spacing:-.01em;margin:0 0 6px;font-size:17px;font-weight:600;line-height:1.3}.cases li p{color:var(--muted);margin:0 0 10px;font-size:14px;line-height:1.55}.cases .go{color:var(--accent);margin-top:auto;font-size:13px;font-weight:600}.cases li a:hover h3{color:var(--accent)}.cases>.acts{margin-top:22px}.name{border-top:1px solid var(--line);max-width:66ch;margin-top:72px;padding-top:28px}.name p{color:var(--ink);margin:0 0 12px;font-size:15px;line-height:1.65}.name p+p{color:var(--muted)}@media (width<=720px){.hero{padding:44px 0 28px}.hero h1{font-size:38px}.hero .lead{font-size:16px}.watch figcaption{flex-direction:column;align-items:flex-start}.cover .play{width:58px;height:58px}.cover .play svg{width:24px;height:24px}.cover .label{font-size:13px;top:calc(50% + 40px)}.flow,.flow-sm,.start-arrow{display:none}.how .step{margin-top:66px}.step.pic-left,.step.pic-right{grid-template-columns:minmax(0,1fr);gap:18px}.step.pic-left .media{order:2}.note{margin-top:8px;display:block;position:static;transform:none}.prompt{flex-direction:column}.cases ol{grid-template-columns:1fr;gap:22px}}.strip{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:12px;min-height:52px;padding:8px 16px;display:flex}.strip .what{flex:1;min-width:0}.strip h1{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:15px;font-weight:600;line-height:1.3;overflow:hidden}.strip .meta{color:var(--muted);font-size:12px}.strip .cite{color:var(--ink);margin-top:1px;font-size:12px}.strip .cite a{color:var(--accent)}.strip .acts{flex:none;gap:8px;display:flex}.viewer{background:var(--bg);border:0;width:100%;height:calc(100dvh - 104px);min-height:360px;display:block}@media (width<=720px){.strip{flex-wrap:wrap}.strip h1{white-space:normal}.strip .acts{width:100%}}.band{border-top:1px solid var(--line);background:var(--panel);padding:40px 0}.band .wrap{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px;display:flex}.band h2{margin:0 0 4px;font-size:18px;font-weight:600}.band p{color:var(--muted);max-width:60ch;margin:0}.band .acts{flex-wrap:wrap;gap:10px;display:flex}.foot{border-top:1px solid var(--line);background:var(--chrome);color:var(--muted);padding:18px 0;font-size:12px}.foot .wrap{flex-wrap:wrap;justify-content:space-between;gap:6px 18px;display:flex}.foot a{color:var(--muted)}.foot .tribute{flex-basis:100%}.intro{padding:40px 0 20px}.intro h1{letter-spacing:-.01em;margin:0 0 6px;font-size:26px;font-weight:600}.intro p{color:var(--muted);max-width:64ch;margin:0;font-size:15px}.grid{grid-template-columns:1fr;gap:14px;padding-bottom:56px;display:grid}@media (width>=600px){.grid{grid-template-columns:repeat(2,1fr)}}@media (width>=900px){.grid{grid-template-columns:repeat(3,1fr)}}.card{border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:4px;flex-direction:column;gap:8px;padding:14px 16px;text-decoration:none;transition:border-color .1s;display:flex}.card:hover{border-color:var(--accent)}.card .sketch{background:var(--panel);border:1px solid var(--line);border-radius:3px;width:100%;height:88px;margin-bottom:2px;display:block}.card .sketch .lane{fill:#0000}.card .sketch .lane:nth-child(odd){fill:var(--lane)}.card .sketch .ev{fill:var(--line2)}.card .sketch .pin{fill:var(--brand)}.card:hover .sketch{border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}.card h2{margin:0;font-size:15px;font-weight:600;line-height:1.35}.card p{color:var(--muted);-webkit-line-clamp:4;-webkit-box-orient:vertical;margin:0;font-size:13px;display:-webkit-box;overflow:hidden}.card .meta{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;font-size:11.5px;display:flex}.card .go{color:var(--accent);font-weight:600}.card.add{border:1px dashed var(--line2);text-align:center;min-height:220px;color:var(--accent);background:0 0;justify-content:center;align-items:center}.card.add:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 5%, transparent)}.card.add .plus{font-size:28px;font-weight:400;line-height:1}.card.add h2{color:var(--accent)}.card.add p{-webkit-line-clamp:unset}.card.add.soon{cursor:default;color:var(--muted)}.card.add.soon h2{color:var(--muted)}.card.add.soon:hover{border-color:var(--line2);background:0 0}.thanks{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 112px);padding:48px 16px;display:flex}.thanks h1{letter-spacing:-.01em;margin:18px 0 8px;font-size:26px;font-weight:600}.thanks p{color:var(--muted);max-width:46ch;margin:0 0 24px;font-size:15px}.thanks .acts{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}