@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-vietnamese-opsz-normal-D9N6E8K1.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-ext-opsz-normal-IcJDqblK.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-opsz-normal-Cre6nC2_.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2)format("woff2"),url(/assets/ibm-plex-mono-latin-400-normal-CvHOgSBP.woff)format("woff")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-latin-500-normal-DSY6xOcd.woff2)format("woff2"),url(/assets/ibm-plex-mono-latin-500-normal-CB9ihrfo.woff)format("woff")}:root{--paper:var(--claylet-paper);--ink:var(--claylet-ink);--accent:var(--claylet-accent);--main:var(--claylet-main);--second:var(--claylet-second);--ghost:var(--claylet-ghost);--dark:var(--claylet-dark);--on-dark:var(--claylet-on-dark);--muted:var(--claylet-muted);--rule:var(--claylet-border);--wash:color-mix(in srgb, var(--claylet-ghost) 30%, var(--claylet-paper));--pixel:var(--claylet-font-pixel);--body:"Bricolage Grotesque Variable", ui-sans-serif, system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace;--n:6px;--gutter:clamp(16px, 4vw, 48px)}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);margin:0;overflow-x:hidden}a{color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.notch{clip-path:polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)), 0 var(--n), var(--n) var(--n))}.wrap{max-width:1180px;padding-inline:var(--gutter);margin:0 auto}.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}h1,h2{font-family:var(--pixel);text-wrap:balance;letter-spacing:.02em;font-synthesis:none;margin:0;font-weight:400}h2{font-size:clamp(30px,4.6vw,50px);line-height:1.1}p,figure{margin:0}.skip{z-index:40;background:var(--ink);color:var(--paper);padding:10px 14px;position:absolute;top:-60px;left:12px}.skip:focus{top:12px}.btn{cursor:pointer;min-height:44px;font:500 16px/1 var(--body);border:0;align-items:center;gap:10px;padding:16px 22px;text-decoration:none;display:inline-flex}.btn-main{background:var(--accent);color:var(--claylet-on-accent)}.btn-main:hover{background:var(--claylet-accent-hover)}.btn-main:focus-visible{box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink);outline:none}.btn-quiet{color:var(--ink);text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:2px;-webkit-text-decoration-color:var(--ghost);text-decoration-color:var(--ghost);background:0 0;padding-inline:6px}.nav{top:env(safe-area-inset-top,0px);z-index:20;transition:background .3s,box-shadow .3s;position:fixed;inset-inline:0}.nav.solid{background:color-mix(in srgb, var(--paper) 90%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--rule)}.nav .wrap{justify-content:space-between;align-items:center;gap:16px;height:68px;display:flex}.brand{align-content:center;align-items:flex-end;gap:10px;min-height:44px;padding-block:8px;text-decoration:none;display:flex}.brand svg{width:21px;height:auto;display:block}.brand span{font:400 30px/1 var(--pixel);font-kerning:none;-webkit-font-smoothing:none}.nav-links{align-items:center;gap:22px;font-size:15px;display:flex}.nav-links a{align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.nav-links a:not(.btn):hover{color:var(--accent)}.nav-links .btn{padding:11px 16px;font-size:15px}@media (width<=720px){.nav-links .hide-s{display:none}.nav-links{gap:14px}}.hero{min-height:min(880px,100svh);position:relative;overflow:clip}.field-wrap{will-change:transform;position:absolute;inset:0 0 -20%}.field-wrap canvas{width:100%;height:100%;display:block}.hero .wrap{z-index:2;justify-items:start;gap:20px;padding-block:clamp(96px,14vh,160px) 36px;display:grid;position:relative}.hero h1{max-width:11ch;font-size:clamp(40px,8.4vw,110px);line-height:.98}.hero h1 em{color:var(--accent);font-style:normal}.hero .lede{max-width:46ch;color:color-mix(in srgb, var(--ink) 86%, var(--paper));font-size:clamp(17px,1.6vw,20px)}.hero .ctas{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.hero .meta{font:400 13px/1.4 var(--mono);color:var(--muted)}.hero h1,.hero .lede,.hero .meta,.hero .eyebrow{text-shadow:0 0 18px var(--paper), 0 0 6px var(--paper)}.hero-fade{background:linear-gradient(transparent, var(--paper));z-index:1;pointer-events:none;height:140px;position:absolute;inset:auto 0 0}.band{z-index:3;background:var(--paper);padding-block:clamp(52px,8vw,110px);position:relative}.band-wash{background:var(--wash)}.band-head{gap:10px;max-width:760px;margin-bottom:clamp(24px,4vw,48px);display:grid}.band-head p{color:var(--muted);max-width:60ch}.demo{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;gap:clamp(20px,3vw,40px);display:grid}.chat{background:var(--wash);flex-direction:column;gap:10px;padding:18px;display:flex}.chat-top{font:500 12px/1.2 var(--mono);color:var(--muted);letter-spacing:.06em;border-bottom:1px dashed var(--rule);justify-content:space-between;gap:10px;padding-bottom:8px;display:flex}.chat-log{flex-direction:column;justify-content:flex-end;gap:8px;height:470px;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 56px);mask-image:linear-gradient(#0000,#000 56px)}.msg{flex:none;max-width:88%;padding:10px 13px;font-size:15px;line-height:1.42;animation:.25s ease-out pop}.msg.you{background:var(--ink);color:var(--paper);align-self:flex-end}.msg.ai{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule);align-self:flex-start}.msg.note{font:500 12px/1.3 var(--mono);color:var(--accent);letter-spacing:.04em;text-align:center;background:0 0;align-self:center;padding:0 2px}.msg.has-thumb{align-items:center;gap:12px;padding:8px 13px 8px 8px;display:flex}.msg.you.has-thumb{flex-direction:row-reverse;padding:8px 8px 8px 13px}.thumb{flex:none;display:block;position:relative}.thumb canvas{width:100%;height:100%;display:block;position:absolute;inset:0}@keyframes pop{0%{opacity:.2;transform:translateY(6px)}}.chat-input{background:var(--paper);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--rule);align-items:center;gap:8px;padding:10px 12px;font-size:15px;display:flex}.chat-input i{flex:1;font-style:normal}.stage{background:var(--dark);color:var(--on-dark);grid-template-rows:auto 1fr auto;display:grid;position:relative}.stage-top,.stage-bot{font:500 12px/1.2 var(--mono);letter-spacing:.06em;color:color-mix(in srgb, var(--on-dark) 78%, var(--dark));flex-wrap:wrap;justify-content:space-between;gap:10px;padding:14px 18px;display:flex}.stage-view{height:470px;position:relative}.stage-view canvas,.v-stage canvas,.g-box canvas,.p-board canvas,.p-preview canvas,.v-thumb canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.tool{align-items:center;gap:6px;display:inline-flex}.tool b{background:color-mix(in srgb, var(--on-dark) 10%, var(--dark));padding:4px 7px;font-weight:500}.tool b.on{background:var(--accent);color:var(--claylet-on-accent)}@media (width<=860px){.demo{grid-template-columns:1fr}.stage{display:none}.chat{padding:14px}.chat-log{height:430px}}.caption-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,36px);margin-top:28px;display:grid}@media (width<=700px){.caption-row{grid-template-columns:1fr;gap:14px;margin-top:22px}}.caption-row div{border-top:2px solid var(--ink);gap:4px;padding-top:10px;display:grid}.caption-row b{font:400 20px/1.2 var(--pixel);letter-spacing:.03em}.caption-row span{color:var(--muted);font-size:15.5px}.versions{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(18px,3vw,40px);display:grid}.v-view{background:var(--paper);display:grid}.v-stage{height:clamp(300px,46vw,440px);position:relative}.v-caption{border-top:1px dashed var(--rule);align-content:start;gap:4px;min-height:98px;padding:14px 18px 18px;display:grid}.v-label{font:500 12px/1.3 var(--mono);letter-spacing:.06em;color:var(--accent)}.v-name{font:400 30px/1.1 var(--pixel);letter-spacing:.02em;font-weight:400}.v-change{color:var(--muted);font-size:15px}.v-line-wrap{gap:10px;min-width:0;display:grid}.v-hint{font:400 12.5px/1.3 var(--mono);color:var(--muted)}.v-line{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid;position:relative}.v-chip{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;gap:6px;padding:0;display:grid}.v-thumb{background:var(--paper);height:128px;transition:transform .2s;display:block;position:relative;box-shadow:inset 0 0 0 2px #0000}.v-chip:hover .v-thumb{transform:translateY(-3px)}.v-chip[aria-pressed=true] .v-thumb{outline:3px solid var(--main);outline-offset:-3px}.v-chip:focus-visible{outline:none}.v-chip:focus-visible .v-thumb{outline:3px solid var(--ink);outline-offset:-3px}.v-chip-text{align-items:baseline;gap:8px;font-size:14px;line-height:1.25;display:flex}.v-chip-text b{font:500 12px/1 var(--mono);color:var(--accent)}.v-chip[aria-pressed=true] .v-chip-text span{font-weight:600}@media (width<=860px){.versions{grid-template-columns:1fr;gap:14px}.v-stage{height:300px}.v-line{scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-bottom:6px;padding-inline:var(--gutter);scrollbar-width:none;display:flex;overflow-x:auto}.v-line::-webkit-scrollbar{display:none}.v-line li{scroll-snap-align:start;flex:0 0 96px}.v-thumb{height:112px}.v-chip-text{flex-direction:column;gap:3px;font-size:13px}}.pencil{grid-template-columns:auto minmax(0,440px);grid-template-areas:"tools tools""board side";justify-content:start;align-items:start;gap:14px clamp(14px,3vw,36px);display:grid}.p-tools{flex-wrap:wrap;grid-area:tools;align-items:center;gap:6px;display:flex}.p-gap{width:10px}.p-tool{background:var(--wash);min-height:44px;color:var(--ink);font:500 14px/1 var(--body);cursor:pointer;border:0;align-items:center;gap:8px;padding:0 14px;display:inline-flex}.p-tool svg{fill:currentColor;width:14px;height:14px}.p-tool[aria-pressed=true]{background:var(--ink);color:var(--paper)}.p-tool:disabled{opacity:.45;cursor:default}.p-tool:hover:not(:disabled):not([aria-pressed=true]){background:color-mix(in srgb, var(--ghost) 55%, var(--paper))}.p-board{aspect-ratio:1/2;background:var(--dark);grid-area:board;width:clamp(176px,30vw,272px);position:relative}.p-board canvas{touch-action:none;cursor:crosshair}.p-board canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}[data-tool=picker] .p-board canvas{cursor:copy}.p-side{grid-area:side;align-content:start;gap:12px;min-width:0;display:grid}.p-preview{background:var(--wash);height:clamp(250px,34vw,400px);position:relative}.p-status{font:500 12px/1.3 var(--mono);letter-spacing:.06em;color:var(--muted);align-items:center;gap:8px;display:flex}.p-status:before{content:"";background:var(--pencil-color,var(--ink));width:14px;height:14px;box-shadow:inset 0 0 0 1px #00000040}.p-swatches{flex-wrap:wrap;gap:4px;display:flex}.p-swatch{cursor:pointer;border:0;width:40px;height:40px;padding:0;box-shadow:inset 0 0 0 1px #0000002e}.p-swatch[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink)}.p-swatch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (width<=560px){.p-tool{padding:0 11px}.p-tool span{font-size:13px}.p-board{width:47vw}.p-preview{height:200px}.p-swatch{width:36px;height:36px}}.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px);display:grid}@media (width<=900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}.g-card{gap:8px;display:grid}.g-box{aspect-ratio:3/4;transition:transform .35s cubic-bezier(.2,.8,.2,1);position:relative}.g-card:hover .g-box{transform:translateY(-6px)}.g-card figcaption{gap:3px;display:grid}.g-card b{font:400 20px/1.2 var(--pixel);letter-spacing:.03em;font-weight:400}.g-card span{font:400 12.5px/1.3 var(--mono);color:var(--muted)}.example-note{font:400 12.5px/1.4 var(--mono);color:var(--muted);max-width:70ch;margin-top:18px}.price-grid{grid-template-columns:1.15fr repeat(4,minmax(0,1fr));gap:12px;display:grid}@media (width<=980px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.free{grid-column:1/-1}}.pack{background:var(--wash);align-content:start;gap:6px;padding:22px 20px;display:grid}.pack .amt{font:400 40px/1 var(--pixel)}.pack .unit{font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.pack .usd{font-variant-numeric:tabular-nums;margin-top:10px;font-size:18px}.pack .bonus{font:500 12px/1 var(--mono);color:var(--accent);min-height:1em}.pack.pop{background:var(--ink);color:var(--paper)}.pack.pop .unit{color:color-mix(in srgb, var(--paper) 72%, var(--ink))}.pack.pop .bonus{color:var(--ghost)}.free{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}.free p{color:var(--muted);font-size:15.5px}.costs{font:400 13px/1.5 var(--mono);color:var(--muted);max-width:70ch;margin-top:26px}footer{z-index:3;background:var(--dark);color:var(--on-dark);padding-block:60px 70px;position:relative}footer .wrap{gap:30px;display:grid}.foot-top{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:30px;display:flex}.foot-top h2{max-width:14ch;font-size:clamp(30px,5vw,60px)}.foot-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px;display:flex}.foot-links{color:color-mix(in srgb, var(--on-dark) 78%, var(--dark));flex-wrap:wrap;gap:0 22px;font-size:14px;display:flex}.foot-links a{align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.foot-links a:hover{color:var(--on-dark);text-decoration:underline}footer :focus-visible{outline-color:var(--on-dark)}.theme-swatches{font:500 12px/1 var(--mono);color:color-mix(in srgb, var(--on-dark) 78%, var(--dark));align-items:center;gap:10px;display:flex}.swatch{cursor:pointer;background-clip:content-box;border:0;width:44px;height:44px;padding:8px}.swatch[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--on-dark)}.theme-swatches{gap:2px}.foot-note{font:400 12px/1.5 var(--mono);color:color-mix(in srgb, var(--on-dark) 70%, var(--dark));max-width:80ch}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.msg{animation:none}.g-box,.v-thumb,.nav{transition:none}}