@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-display:swap} @font-face{font-family:"Laughter Wordmark";src:url("/assets/fonts/bricolage-logo.ttf") format("truetype");font-weight:800;font-display:block} @font-face{font-family:"Laughter Hand";src:url("/assets/fonts/caveat-tag.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"Instrument Sans Fallback";src:local("Arial"),local("Helvetica");size-adjust:97%;ascent-override:96%;descent-override:25%}:root{color-scheme:dark;--bg:#0b0b0d;--surface:#131316;--line:rgb(255 255 255 / .08);--line-strong:rgb(255 255 255 / .16);--text:#f5f5f4;--muted:#a3a3a8;--caption:#85858c;--accent:#ffb27c;--link:#ffc9a3;--exposed:#ff6b6b;--rested:#4a6cf0;--fill-bg:#3a2f10;--fill-border:#e0a82e;--fill-text:#ffe2a0;--settle:cubic-bezier(0.16,1,0.3,1);--gutter:clamp(16px,4vw,40px);--container:1200px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 "Instrument Sans","Instrument Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}main{flex:1 0 auto}img{max-width:100%;display:block}h1,h2,h3{margin:0}a{color:var(--link);text-underline-offset:3px;overflow-wrap:anywhere}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:absolute;left:16px;top:-64px;z-index:40;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}.skip:focus{top:16px}.wrap{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto} header.site .bar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{color:var(--text);text-decoration:none;font-family:"Laughter Wordmark","Instrument Sans",sans-serif;font-weight:800;font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem);letter-spacing:0;line-height:1;padding:8px 0;white-space:nowrap} .logo span{color:var(--muted)} .subnav{border-block:1px solid var(--line)}.subnav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;min-height:52px}.subnav .app-name{color:var(--text);font-weight:700;text-decoration:none;margin-right:8px}.subnav a:not(.app-name){color:var(--muted);text-decoration:none;padding:8px 0;letter-spacing:.005em}.subnav a:not(.app-name):hover{color:var(--text)} .subnav a[aria-current="page"]{color:var(--text);font-weight:600} .app{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(32px,5vw,64px) 0 clamp(40px,6vw,80px)}  .app:not(.compact) .say{margin-top:24px;font-size:1.25rem;font-weight:500;color:var(--text)} .app.compact{padding:clamp(32px,5vw,64px) 0 clamp(40px,6vw,80px)}.app.compact .name{gap:10px}.app.compact .name img{width:28px;height:28px;border-radius:7px}.app.compact .name h2{font-size:1rem;font-weight:600;color:var(--muted);letter-spacing:0;line-height:1.3}.app.compact .say{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);line-height:1.1;font-weight:700;letter-spacing:-0.03em;color:var(--text);max-width:18ch;margin-top:16px;text-wrap:balance} #exposed{--hi:linear-gradient(105deg,#4f7cff 0%,#d4278a 50%,#9a4fe0 100%)}#rested{--hi:linear-gradient(105deg,#6d7ff0 0%,#9b6fe0 48%,#4ecdc4 100%)}.app.compact .say .hi{color:color-mix(in oklab,var(--tint) 82%,white)}@supports (background-clip:text) or (-webkit-background-clip:text){.app.compact .say .hi{color:transparent;background:var(--hi);background-size:160% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:clone}}.app.compact .free{margin-top:24px;max-width:34ch}.app.compact .stage{padding:16px 0 24px} .app.compact .stage{--main-w:clamp(220px,(100svh - 200px) * .478,400px)} .app.compact .float{rotate:-7deg;translate:5% 0}.app.compact.flip .float{rotate:7deg;translate:-5% 0}#exposed{--tint:var(--exposed)}#rested{--tint:var(--rested)}.app>.wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}.app.flip>.wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.app.flip .copy{order:2}.name{display:flex;align-items:center;gap:16px}.name img{width:64px;height:64px;border-radius:14px;box-shadow:0 0 0 1px rgb(255 255 255 / .1)}.name h1,.name h2{font-size:clamp(2.75rem,2rem + 3.6vw,4.25rem);line-height:.95;letter-spacing:-0.045em;font-weight:700;text-wrap:balance}.name a{color:inherit;text-decoration:none}.say{margin:8px 0 0;color:var(--muted);line-height:1.55;max-width:38ch;text-wrap:pretty}.facts{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;color:var(--muted);font-size:1.0625rem;line-height:1.5}.facts li{display:flex;gap:12px;align-items:baseline;margin:0}.facts li::before{content:"";flex:none;width:14px;height:2px;translate:0 -.3em;background:var(--tint);border-radius:1px}.facts .pro{color:var(--caption);font-size:.8125rem;letter-spacing:.01em;white-space:nowrap}.free{margin:32px 0 0;font-size:.9375rem;line-height:1.5;color:var(--muted);max-width:46ch}.free strong{color:var(--text);font-weight:600}.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.badges a{display:block;border-radius:9px;transition:scale 100ms ease-out,translate 200ms var(--settle),filter 200ms var(--settle)}.badges a:hover{translate:0 -2px;filter:brightness(1.12)}.badges a:active{scale:.97;translate:0 0}.badges img{height:44px;width:auto}.more{display:inline-block;margin-top:28px;color:var(--text);font-weight:600;font-size:.9375rem;text-decoration:none}.more::after{content:"\2192";display:inline-block;margin-left:.35em;color:var(--tint);transition:translate 200ms var(--settle)}.more:hover{text-decoration:underline}.more:hover::after{translate:4px 0} .stage{--main-w:clamp(220px,(100svh - 300px) * .478,320px);position:relative;display:flex;justify-content:center;align-items:center;padding:24px 0 32px}.float{--w:var(--main-w);position:relative;z-index:2;width:var(--w);container-type:inline-size}.side-l,.side-r{z-index:1;margin-top:70px}.side-l{margin-right:-60px}.side-r{margin-left:-60px}.side-l .float,.side-r .float{--w:calc(var(--main-w) * .7)}.side-l .float{rotate:-6deg}.side-r .float{rotate:6deg}.side-l .device,.side-r .device{filter:brightness(.9)} .device{position:relative;width:100%;aspect-ratio:.478;border-radius:15cqw;box-shadow:0 0 0 .3cqw rgb(0 0 0 / .45),0 40px 70px -14px rgb(0 0 0 / .75),0 10px 20px rgb(0 0 0 / .4)}.device .screen{position:absolute;inset:var(--inset);border-radius:var(--screen-r);overflow:hidden;background:#000}.device .screen img{width:100%;height:100%;object-fit:cover;object-position:top} .slides{position:absolute;inset:0}.slides picture{position:absolute;inset:0;opacity:0;transition:opacity 600ms var(--settle)}.slides picture:first-child{opacity:1} .screen:has(.slides){cursor:pointer}.screen .next{position:absolute;inset:0;z-index:4;display:none;cursor:pointer}.screen:not(:has(input:checked)) .next:nth-of-type(1),.screen:has(input:nth-of-type(1):checked) .next:nth-of-type(1){display:block}.screen:has(input:nth-of-type(2):checked) .next:nth-of-type(2){display:block}.screen:has(input:nth-of-type(3):checked) .next:nth-of-type(3){display:block}.screen:has(input:nth-of-type(4):checked) .next:nth-of-type(4){display:block}.screen:has(input:checked) .slides picture{animation:none;opacity:0}.screen:has(input:nth-of-type(1):checked) .slides picture:nth-child(1),.screen:has(input:nth-of-type(2):checked) .slides picture:nth-child(2),.screen:has(input:nth-of-type(3):checked) .slides picture:nth-child(3),.screen:has(input:nth-of-type(4):checked) .slides picture:nth-child(4){opacity:1}.screen:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}.device .screen::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgb(255 255 255 / .1) 0%,rgb(255 255 255 / .03) 24%,transparent 44%);pointer-events:none}.device .bezel{position:absolute;inset:var(--rim);border-radius:calc(15cqw - var(--rim));background:#050506;box-shadow:0 0 0 .3cqw rgb(0 0 0 / .6),0 0 0 .5cqw rgb(255 255 255 / .05) inset}.device .btn{position:absolute;width:1.2cqw;border-radius:.6cqw}.iphone{--rim:1.7cqw;--inset:4.3cqw;--screen-r:11.4cqw;background:linear-gradient(90deg,#7e7e84 0%,#d6d6da 2.5%,#b6b6bb 12%,#a6a6ab 50%,#b6b6bb 88%,#dcdce0 97.5%,#7e7e84 100%)}.iphone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255 / .35),transparent 18%,transparent 82%,rgb(0 0 0 / .25));pointer-events:none}.iphone::after{content:"";position:absolute;z-index:3;left:50%;top:calc(var(--inset) + 2.4cqw);translate:-50% 0;width:28cqw;height:8.2cqw;border-radius:99px;background:#000}.iphone .btn.l{left:-.8cqw;top:17%;height:22%;background:linear-gradient(180deg,#c9c9ce 0 13%,transparent 13% 30%,#c9c9ce 30% 58%,transparent 58% 68%,#c9c9ce 68% 100%)}.iphone .btn.r{right:-.8cqw;top:26%;height:36%;background:linear-gradient(180deg,#c9c9ce 0 30%,transparent 30% 78%,#b0b0b5 78% 100%)}.pixel{--rim:1.5cqw;--inset:4.6cqw;--screen-r:10.2cqw;border-radius:14cqw;background:linear-gradient(90deg,#76787d 0%,#d0d2d6 2.5%,#b2b4b9 12%,#a3a5aa 50%,#b2b4b9 88%,#d4d6da 97.5%,#76787d 100%)}.pixel::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255 / .3),transparent 18%,transparent 82%,rgb(0 0 0 / .25));pointer-events:none}.pixel .bezel{border-radius:calc(14cqw - var(--rim))}.pixel::after{content:"";position:absolute;z-index:3;left:50%;top:calc(var(--inset) + 2.2cqw);translate:-50% 0;width:3.6cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#23262c,#000 60%)}.pixel .btn.r{right:-.8cqw;top:21%;height:26%;background:linear-gradient(180deg,#c4c6cb 0 26%,transparent 26% 40%,#c4c6cb 40% 100%)} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth} .app.first .float{transition:translate 1400ms var(--settle),opacity 900ms var(--settle)}.app.first .side-l .float,.app.first .side-r .float{transition-delay:160ms}@starting-style{.app.first .float{translate:0 48px;opacity:0}}.app.first .copy>*{transition:translate 900ms var(--settle)}@starting-style{.app.first .copy>*{translate:0 10px}} .bob{animation:settle 4.2s cubic-bezier(.33,1,.68,1) both,sway 11s ease-in-out infinite}.bob .device{animation:settle-rock 4.2s cubic-bezier(.33,1,.68,1) both}.side-l .bob,.side-r .bob{--amp:.6}.side-l .bob{animation-delay:.12s,-3.5s}.side-r .bob{animation-delay:.24s,-7s}.side-l .bob .device{animation-delay:.12s}.side-r .bob .device{animation-delay:.24s} .closing .device{animation:sway 13s ease-in-out infinite}.closing .r .device{animation-delay:-5s} .app.compact .say .hi{animation:shimmer 9s ease-in-out infinite alternate} .slides{--slide:slide;--slide-first:slide-first;--slide-dur:24s}.slides:has(picture:nth-child(3):last-child){--slide:slide-3;--slide-first:slide-3-first;--slide-dur:18s} .slides picture{animation:var(--slide) var(--slide-dur) linear infinite}.slides picture:nth-child(1){animation-name:var(--slide-first)}.slides picture:nth-child(2){animation-delay:6s}.slides picture:nth-child(3){animation-delay:12s}.slides picture:nth-child(4){animation-delay:18s} @supports (animation-timeline:view()){.app.later{--turn:10deg}.app.later .land,.closing .land{animation:land linear both;animation-timeline:view();animation-range:entry 0% cover 40%}.app.later .copy>*{animation:rise linear both,fade-out linear both;animation-timeline:view(),view();animation-range:entry 0% entry 60%,exit 40% exit 100%}.app.first .copy>*{animation:fade-out linear both;animation-timeline:view();animation-range:exit 40% exit 100%} .app.first .stage,.app.later .stage{animation:fade-out linear both,drift linear both;animation-timeline:view(),view();animation-range:exit 40% exit 100%,exit 0% exit 100%}}}@keyframes sway{0%,100%{rotate:0deg}25%{rotate:-2.2deg}75%{rotate:2.2deg}}@keyframes drift{from{translate:0 0}to{translate:0 80px}}@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}} @keyframes slide{0%{opacity:0}3.3%{opacity:1}25%{opacity:1}28.3%{opacity:0}100%{opacity:0}}@keyframes slide-first{0%{opacity:1}25%{opacity:1}28.3%{opacity:0}96.7%{opacity:0}100%{opacity:1}} @keyframes slide-3{0%{opacity:0}4.4%{opacity:1}33.3%{opacity:1}37.7%{opacity:0}100%{opacity:0}}@keyframes slide-3-first{0%{opacity:1}33.3%{opacity:1}37.7%{opacity:0}95.6%{opacity:0}100%{opacity:1}}@keyframes rise{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes settle{0%{translate:0 calc(-12px * var(--amp,1))}35%{translate:calc(2px * var(--amp,1)) calc(3px * var(--amp,1))}65%{translate:calc(-1px * var(--amp,1)) calc(-1.5px * var(--amp,1))}100%{translate:0 0}}@keyframes settle-rock{0%{rotate:.7deg}40%{rotate:-.35deg}75%{rotate:.12deg}100%{rotate:0deg}}@keyframes land{from{animation-timing-function:cubic-bezier(.33,1,.68,1);opacity:.3;translate:0 90px;scale:.93;transform:perspective(1400px) rotateX(14deg) rotateY(var(--turn,0deg))}to{opacity:1;translate:0 0;scale:1;transform:perspective(1400px) rotateX(0deg) rotateY(0deg)}}   .prose{max-width:68ch;padding:40px 0 72px;line-height:1.65}.prose h1{font-size:clamp(2.125rem,1.75rem + 1.6vw,2.75rem);line-height:1.05;letter-spacing:-0.035em;font-weight:700;margin:0 0 12px;text-wrap:balance}.prose h2{font-size:1.5rem;line-height:1.25;letter-spacing:-0.025em;font-weight:700;margin:3rem 0 .75rem;text-wrap:balance}.prose h3{font-size:1.0625rem;font-weight:600;margin:1.6rem 0 .25rem}.prose p,.prose ul,.prose ol{margin:0 0 1rem}.prose p{text-wrap:pretty}.prose ul,.prose ol{padding-left:1.25rem}.prose li{margin-bottom:.4rem}.prose strong{color:var(--text)}.lead{font-size:1.1875rem;color:var(--muted);margin:0 0 2rem}.updated{color:var(--muted);margin:0 0 1.5rem}.soon{color:var(--muted);font-style:italic}.summary{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:16px 18px 4px;margin:1.25rem 0}.cards{list-style:none;padding:0;margin:0;display:grid;gap:12px}.cards li{margin:0}.cards a{display:block;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--text);transition:border-color 200ms var(--settle),translate 200ms var(--settle)}.cards a:hover{border-color:var(--line-strong);translate:0 -2px}.cards a strong{display:block;font-weight:600}.cards a span{color:var(--muted)}details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 18px;margin:0 0 12px}summary{cursor:pointer;font-weight:600;padding:10px 0}details p:last-child{margin-bottom:1rem}.fill{background:var(--fill-bg);color:var(--fill-text);outline:1px dashed var(--fill-border);outline-offset:1px;padding:0 4px;border-radius:3px}.table-scroll{max-width:100%;overflow-x:auto;margin:0 0 1rem}.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}table{border-collapse:collapse;font-size:.9375rem;line-height:1.5;font-variant-numeric:tabular-nums}th,td{border:1px solid var(--line-strong);padding:8px 10px;text-align:left;vertical-align:top}th{background:var(--surface)}hr{border:0;border-top:1px solid var(--line);margin:2rem 0}.stores{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem;padding:0;list-style:none}.prose .anchor{color:inherit;text-decoration:none}.prose .anchor:hover{text-decoration:underline;text-decoration-color:var(--accent)}.prose .anchor:hover::after,.prose .anchor:focus-visible::after{content:" #";color:var(--accent)}  footer.site{border-top:1px solid var(--line);padding:44px 0 48px;font-size:.875rem;text-align:center}footer.site .stack{display:flex;flex-direction:column;align-items:center;gap:10px}footer.site .logo{font-size:1.25rem} footer.site .tag{margin:2px 0 0;font-family:"Laughter Hand","Instrument Sans",sans-serif;font-size:1.625rem;font-weight:500;line-height:1.2;color:color-mix(in oklab,var(--accent) 60%,var(--text));letter-spacing:.01em}footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;margin-top:10px}footer.site nav a{position:relative;color:var(--muted);text-decoration:none;padding:8px 14px}footer.site nav a + a::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:1px;height:14px;background:var(--line-strong)}footer.site nav a:hover{color:var(--text)} footer.site:has(.closing){border-top:0;padding-top:0}.closing{position:relative;display:flex;justify-content:center;align-items:flex-start;height:clamp(170px,24vw,300px);overflow:hidden;margin:clamp(32px,5vw,72px) 0 12px;-webkit-mask-image:linear-gradient(#000 45%,transparent 100%);mask-image:linear-gradient(#000 45%,transparent 100%)}.closing .float{--w:clamp(140px,15vw,200px)}.closing .l .float{rotate:-8deg;translate:20px 44px;z-index:1}.closing .r .float{rotate:7deg;translate:-20px 12px;z-index:2} @media (max-width:900px){.app>.wrap,.app.flip>.wrap{grid-template-columns:minmax(0,1fr);gap:8px} .app .copy{display:contents}.app .name{order:-2}.app .stage{order:-1;padding:24px 0 40px} .app.compact .say{order:-2}.stage{--main-w:min(50vw,230px)}.app.compact .stage{--main-w:min(58vw,260px)}.app.compact .float,.app.compact.flip .float{translate:0 0}.side-l,.side-r{margin-top:48px}.side-l{margin-right:-40px}.side-r{margin-left:-40px}.side-l .float,.side-r .float{--w:calc(var(--main-w) * .68)}.closing{height:clamp(150px,42vw,220px)}.closing .float{--w:min(34vw,150px)}.bob{--amp:.7}.side-l .bob,.side-r .bob{--amp:.45}.app.later{--turn:0deg}}@media (max-width:520px){.badges{gap:8px}.badges img{height:40px} footer.site nav a{padding:8px 10px}} @media (forced-colors:active){.device{outline:2px solid CanvasText}.facts li::before{background:CanvasText}}@media (prefers-contrast:more){:root{--muted:#c8c8cc;--caption:#b0b0b6;--line:rgb(255 255 255 / .2)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms !important;transition-delay:0ms !important;animation:none !important}} @media print{:root{color-scheme:light}body{background:#fff;color:#000;font-size:11pt}header.site,footer.site,.skip,.subnav,.stage{display:none !important}.wrap,.prose{width:auto;max-width:none;padding:0}a{color:#000}.prose a[href^="http"]::after,.prose a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:9pt}.prose .anchor::after{content:none !important}th{background:#eee}th,td,.summary,details,.cards a{border-color:#999;background:none;color:#000}.fill{background:none;color:#000;outline:1px dashed #000}}