:root{--desk:#14110d;--desk-2:#1d1914;--paper:#efe6d3;--paper-dim:#a99d87;--muted:#7d7262;--ink:#ef5b3f;--line:#efe6d31f;--serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;--sans:"Instrument Sans", ui-sans-serif, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--pad:clamp(20px, 5vw, 64px)}*,:before,:after{box-sizing:border-box}html{background:var(--desk);color:var(--paper);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overflow-x:clip}body{background:radial-gradient(80vw 60vh at 50% -10%,#ef5b3f17,#0000 70%),radial-gradient(60vw 50vh at 100% 100%,#efe6d30a,#0000 70%);margin:0;overflow-x:clip}body:after{content:"";pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}em{color:var(--ink);font-style:italic}#ink{pointer-events:none;z-index:50;width:100vw;height:100vh;position:fixed;inset:0}.motion body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23efe6d3' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M3 21l3.5-1 12-12-2.5-2.5-12 12z' fill='%2314110d'/%3E%3Cpath d='M14.5 6l2.5 2.5'/%3E%3C/svg%3E") 3 25,crosshair}.drawing,.drawing *{-webkit-user-select:none;user-select:none}.mark,.stars{top:max(18px, env(safe-area-inset-top));z-index:40;align-items:center;gap:10px;height:40px;display:inline-flex;position:fixed}.mark{left:var(--pad);font:400 22px/1 var(--serif);letter-spacing:-.01em}.mark svg{fill:#f0785a;width:16px;height:16px}.stars{right:var(--pad);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 13px/1 var(--mono);background:#14110d99;border-radius:999px;padding:0 14px;transition:border-color .2s}.stars:hover{border-color:#efe6d359}.stars>svg{fill:currentColor;width:18px;height:18px}.stars-count[hidden]{display:none}.stars-count{border-left:1px solid var(--line);align-items:center;gap:5px;padding-left:10px;display:inline-flex}.stars-count svg{fill:#f2c14e;width:12px;height:12px}.motion .mark,.motion .stars,.motion .hint,.motion .kicker span,.motion .lede,.motion .hero .get>*,.motion .note{opacity:0}.hero{text-align:center;min-height:100svh;padding:120px var(--pad) 90px;align-content:center;justify-items:center;display:grid;position:relative}.kicker{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);gap:18px;margin:0 0 28px;display:flex}.kicker span+span:before{content:"·";color:var(--ink);margin-right:18px}.title{font:400 clamp(64px, 13.5vw, 220px) / .86 var(--serif);letter-spacing:-.035em;margin:0}.title .line{padding:0 .06em .08em;display:block;position:relative;overflow:hidden}.title .line:last-child{overflow:visible}.title .word{display:inline-block}.motion .title .word{opacity:0}.title em{padding-right:.04em}.title .dot{color:var(--paper)}.scribble{width:86%;height:.2em;position:absolute;bottom:-.04em;left:8%;right:6%;overflow:visible}.scribble path{fill:none;stroke:var(--ink);stroke-width:5px;stroke-linecap:round;vector-effect:non-scaling-stroke}.lede{max-width:34ch;color:var(--paper-dim);margin:34px 0 0;font-size:clamp(17px,1.6vw,20px)}.get{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:44px;display:flex}.os{border:1px solid var(--line);background:var(--desk-2);border-radius:20px;place-items:center;width:64px;height:64px;transition:background .25s,color .25s,border-color .25s;display:grid;position:relative}.os svg{fill:currentColor;width:26px;height:26px}.os:hover,.os.is-yours{background:var(--paper);color:var(--desk);border-color:var(--paper)}.os.is-yours:after{content:"";border:1px solid #ef5b3f99;border-radius:25px;animation:2.4s ease-out infinite ring;position:absolute;inset:-6px}@keyframes ring{0%{opacity:1;transform:scale(.94)}to{opacity:0;transform:scale(1.18)}}.chip{background:var(--ink);color:var(--desk);font:600 9px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:2px 6px;font-style:normal;position:absolute;bottom:-7px}.tip{background:var(--paper);color:var(--desk);font:500 12px/1 var(--sans);white-space:nowrap;pointer-events:none;opacity:0;border-radius:8px;padding:6px 10px;transition:opacity .2s,transform .2s;position:absolute;bottom:calc(100% + 12px);transform:translateY(4px)}.os:hover .tip,.os:focus-visible .tip{opacity:1;transform:none}.sep{background:var(--line);width:1px;height:28px;margin:0 8px}.web{color:var(--paper-dim);border-bottom:1px solid var(--line);padding:8px 2px;font-size:15px;transition:color .2s,border-color .2s}.web:hover{color:var(--paper);border-color:var(--ink)}.hint{font:400 italic 17px/1 var(--serif);color:var(--muted);align-items:center;gap:8px;margin:0;transition:opacity .6s;display:flex;position:absolute;bottom:28px}.hint svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:16px;height:16px}.hint.done{opacity:0!important}html:not(.motion) .hint{display:none}@media (pointer:coarse){.hint{display:none}}.note{z-index:5;color:#3b2f12;width:150px;font:400 19px/1.15 var(--serif);text-align:left;cursor:grab;background:#f6d97a;padding:14px 14px 18px;position:absolute;top:24%;right:clamp(24px,9vw,160px);transform:rotate(5deg);box-shadow:0 1px #0000001a,0 18px 30px -12px #0009}@media (pointer:fine){.note{touch-action:none}}.note small{font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:6px;display:block}@media (width<=900px){.note{display:none}}.desk{position:relative}.desk-pin{min-height:100svh;padding:72px var(--pad) 48px;perspective:1400px;grid-template-rows:auto 1fr;place-items:center;gap:28px;display:grid}.captions{z-index:10;text-shadow:0 2px 24px var(--desk), 0 0 2px var(--desk);text-align:center;margin:0;padding:0;list-style:none;display:grid;position:relative}.captions li{grid-area:1/1;gap:6px;display:grid}.captions b{font:400 clamp(48px, 7vw, 96px) / .95 var(--serif);letter-spacing:-.03em}.captions li:nth-child(odd) b{color:var(--ink);font-style:italic}.captions span{color:var(--paper-dim)}.sheets{aspect-ratio:16/10;width:min(1100px,100%,160svh - 480px);transform-style:preserve-3d;position:relative}.sheet{background:var(--desk-2);will-change:transform;border-radius:14px;margin:0;position:absolute;inset:0;overflow:hidden;box-shadow:0 0 0 1px #efe6d31a,0 50px 90px -30px #000000d9}.sheet img{object-fit:cover;object-position:top left;width:100%;height:100%;display:block}.progress{background:var(--line);width:120px;height:2px;position:absolute;bottom:22px}.progress i{background:var(--ink);transform-origin:0;height:100%;display:block;transform:scaleX(0)}html:not(.motion) .captions{flex-wrap:wrap;justify-content:center;gap:8px 28px;display:flex}html:not(.motion) .captions span,html:not(.motion) .progress{display:none}html:not(.motion) .sheets{aspect-ratio:auto;gap:32px;display:grid}html:not(.motion) .sheet{position:relative}.ai{text-align:center;padding:clamp(120px, 18vh, 200px) var(--pad);justify-items:center;display:grid}.h2{font:400 clamp(52px, 8vw, 120px) / .92 var(--serif);letter-spacing:-.03em;margin:0}.sub{max-width:32ch;color:var(--paper-dim);margin:22px 0 0;font-size:18px}.orbit{flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,36px);margin:64px 0 0;padding:0;list-style:none;display:flex}.app{justify-items:center;gap:14px;width:112px;padding:0;display:grid;position:relative}.motion .app{opacity:0}.app svg{box-sizing:content-box;border:1px solid var(--line);background:var(--desk-2);fill:currentColor;border-radius:28px;width:38px;height:38px;padding:25px;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}.app[data-app^=claude] svg{color:#d97757}.app:hover svg,.app:focus-visible svg{background:var(--paper);border-color:var(--paper);box-shadow:0 20px 50px -18px #ef5b3f8c}.app:hover[data-app^=c] svg{color:var(--desk)}.app[data-app^=claude]:hover svg{color:#c15f3c}.app span{color:var(--paper-dim);font-size:14px}.badge{background:var(--paper);color:var(--desk);font:600 10px/1 var(--mono);border-radius:7px;padding:3px 6px;font-style:normal;position:absolute;top:62px;right:14px}.end{text-align:center;padding:80px var(--pad) 120px;border-top:1px solid var(--line);justify-items:center;display:grid}.big{font-size:clamp(56px,10vw,160px)}.get-end .os.is-yours:after{opacity:0;animation:none}.foot{padding:28px var(--pad) max(28px, env(safe-area-inset-bottom));font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);justify-content:center;gap:28px;display:flex}.foot a:hover{color:var(--paper)}.modal{width:min(440px,100vw - 32px);max-width:none;color:var(--paper);background:0 0;border:0;padding:0;overflow:visible}.modal::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0806b8}.card{background:var(--paper);color:#1d1914;transform-origin:50%;border-radius:22px;padding:30px;position:relative;box-shadow:0 40px 80px -20px #000c}.close{z-index:1;border-radius:50%;place-items:center;width:34px;height:34px;transition:background .2s;display:grid;position:absolute;top:18px;right:18px}.close:hover{background:#00000012}.close svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;width:18px;height:18px}.card-head{align-items:center;gap:14px;display:flex}.card-icon{fill:currentColor;width:30px;height:30px}.card h3{font:400 34px/1 var(--serif);letter-spacing:-.02em;margin:0}.steps{gap:16px;margin:28px 0;padding:0;list-style:none;display:grid}.steps li{grid-template-columns:28px 1fr;align-items:baseline;gap:12px;font-size:16px;display:grid}.steps b{width:26px;height:26px;font:500 12px/1 var(--mono);border:1px solid #1d191440;border-radius:50%;place-items:center;display:grid;transform:translateY(-1px)}.copy{width:100%;color:var(--paper);background:#1d1914;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-weight:500;transition:background .25s;display:flex}.copy:hover{background:#000}.copy.copied{background:var(--ink);color:#1d1914}.copy svg{fill:none;stroke:currentColor;stroke-width:1.6px;width:18px;height:18px}.fine{color:#7d7262;margin:14px 0 0;font-size:13px}.spark{background:var(--ink);pointer-events:none;border-radius:50%;width:7px;height:7px;margin:-3.5px;position:fixed}@media (width<=560px){.kicker{gap:10px;font-size:10px}.kicker span+span:before{margin-right:10px}.os{width:58px;height:58px}.sep{display:none}.web{text-align:center;border:0;flex-basis:100%}.sheets{aspect-ratio:4/5;width:min(100%,80svh - 240px)}.sheet img{object-position:8% top}.stars{padding:0 12px}}
