@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-vietnamese-standard-normal-Br4FGdAc.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;font-stretch:75% 100%;src:url(./bricolage-grotesque-latin-ext-standard-normal-qp-RdZgh.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;font-stretch:75% 100%;src:url(./bricolage-grotesque-latin-standard-normal-C5Lc8Qmc.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}:root{--paper:#f7f1e6;--card:#fffdf8;--ink:#18140f;--red:#f2452f;--blue:#2f55e4;--yellow:#ffc81f;--green:#1fae74;--pink:#ff9cc6;--outline:3px solid var(--ink);--outline-thick:4px solid var(--ink);--lift:4px;--lift-big:8px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);background:var(--paper);font-family:Bricolage Grotesque Variable,system-ui,sans-serif;font-weight:600}*,:before,:after{box-sizing:border-box}body{background:var(--paper);min-height:100vh;margin:0;font-size:1.25rem;line-height:1.35}button,input{font:inherit;color:inherit}:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.icon{flex:none;width:1.3em;height:1.3em}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pill{border:var(--outline);background:var(--card);box-shadow:var(--lift) var(--lift) 0 var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:10px;padding:10px 20px;font-size:1.05rem;font-weight:750;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.pill:hover{box-shadow:calc(var(--lift) + 2px) calc(var(--lift) + 2px) 0 var(--ink);transform:translate(-2px,-2px)}.pill:active{transform:translate(var(--lift), var(--lift));box-shadow:0 0 0 var(--ink)}.pill.dark{background:var(--ink);color:var(--paper);box-shadow:var(--lift) var(--lift) 0 var(--red)}.pill.dark:hover{box-shadow:calc(var(--lift) + 2px) calc(var(--lift) + 2px) 0 var(--red)}.site-header{justify-content:space-between;align-items:center;gap:16px;max-width:1240px;margin:0 auto;padding:22px 32px 12px;display:flex}.brand{color:inherit;letter-spacing:-.02em;white-space:nowrap;align-items:center;gap:12px;font-size:1.65rem;font-weight:800;text-decoration:none;display:flex}.brand-mark{border:var(--outline);border-radius:12px;width:44px;height:44px;transition:transform .2s;display:flex;overflow:hidden}.brand:hover .brand-mark{transform:rotate(-8deg)scale(1.06)}.brand-mark i{flex:1}.brand-mark i:first-child{background:var(--red)}.brand-mark i:nth-child(2){background:var(--yellow)}.brand-mark i:nth-child(3){background:var(--green)}.brand-mark i:nth-child(4){background:var(--blue)}.brand-mark i:nth-child(5){background:var(--pink)}.site-actions{gap:14px;display:flex}@media (width<=640px){.site-header{padding:16px 16px 8px}.brand{font-size:1.3rem}.brand-mark{width:36px;height:36px}.site-actions{gap:10px}.site-actions .pill{padding:10px}.site-actions .pill span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.explain{border:var(--outline-thick);background:var(--card);width:min(560px,100% - 32px);color:var(--ink);box-shadow:10px 10px 0 var(--ink);border-radius:28px;padding:36px 36px 28px}.explain::backdrop{background:#18140f8c}.explain h2{letter-spacing:-.03em;margin:0 0 24px;padding-right:52px;font-size:clamp(2.1rem,8vw,2.6rem);font-weight:800;line-height:1}.explain ol{gap:20px;margin:0;padding:0;list-style:none;display:grid}.explain li{grid-template-columns:56px minmax(0,1fr);align-items:center;gap:18px;display:grid}.explain p{margin:0;font-size:1.15rem;font-weight:550}.explain b{font-weight:800}.step-icon{border:var(--outline);border-radius:50%;place-items:center;width:56px;height:56px;font-size:1.3rem;display:grid}.step-icon.red{background:var(--red)}.step-icon.blue{background:var(--blue);color:var(--paper)}.step-icon.yellow{background:var(--yellow)}.mini-strip{border:2.5px solid var(--ink);background:linear-gradient(90deg, var(--red) 0 20%, var(--pink) 20% 40%, var(--card) 40% 60%, var(--green) 60% 80%, var(--blue) 80%);border-radius:4px;width:30px;height:18px}.explain .credits{opacity:.7;margin:24px 0 0;font-size:.85rem;font-weight:500}.explain .close{border:var(--outline);background:var(--yellow);cursor:pointer;border-radius:50%;place-items:center;width:46px;height:46px;padding:0;font-size:1rem;transition:transform .15s;display:grid;position:absolute;top:18px;right:18px}.explain .close:hover{transform:rotate(90deg)}@media (width<=640px){.explain{padding:28px 22px 22px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.studio{max-width:1240px;margin:0 auto;padding:16px 32px 48px;overflow-x:clip}.studio[data-state=empty] .workspace,.studio[data-state=loaded] .intro{display:none}.studio[aria-busy=true]{cursor:progress}.studio[aria-busy=true] .drop-zone,.studio[aria-busy=true] .strip-stack:after{--stripe:#18140f24;background-image:linear-gradient(45deg, var(--stripe) 25%, transparent 25% 50%, var(--stripe) 50% 75%, transparent 75%);background-size:40px 40px;animation:.6s linear infinite march}.studio[aria-busy=true] .drop-zone{background-color:var(--yellow);border-style:solid}.studio[aria-busy=true] .strip-stack:after{--stripe:#f7f1e673;content:"";inset:var(--strip-border);background-color:#18140f4d;border-radius:18px;position:absolute}@keyframes march{to{background-position:40px 0}}.intro{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:56px;min-height:calc(100vh - 170px);padding:24px 0;display:grid}.intro h1{letter-spacing:-.04em;margin:0;font-size:clamp(3.2rem,7.4vw,6.9rem);font-weight:800;line-height:.92}.strip-word{background:linear-gradient(90deg, var(--red) 0 20%, var(--yellow) 20% 40%, var(--green) 40% 60%, var(--blue) 60% 80%, var(--pink) 80%) 0 86% / 100% .3em no-repeat;padding:0 .06em}.intro-text{z-index:1;gap:48px;display:grid;position:relative;container-type:inline-size}.sample-wall{--u:min(1.15px, (100cqw - 32px) / 572);align-items:center;gap:calc(16 * var(--u));display:flex}.wall-hint{opacity:.7;margin:0 0 -28px;font-size:1.05rem;font-weight:700}.intro .touch-only{display:none}@media (pointer:coarse){.intro .touch-only{display:block}.intro .pointer-only{display:none}}.sample{--painting-height:80;padding:calc(var(--frame-width) * var(--u));border:var(--outline);box-shadow:var(--lift) var(--lift) 0 var(--ink);cursor:grab;flex:none;transition:transform .15s,box-shadow .15s;position:relative}.sample img{width:auto;height:calc(var(--painting-height) * var(--u));box-shadow:0 0 0 2px var(--ink);display:block}.sample:hover,.sample:focus-visible{z-index:1;box-shadow:calc(var(--lift) + 3px) calc(var(--lift) + 3px) 0 var(--ink);transform:translate(-3px,-3px)}.sample:active{cursor:grabbing}.frame-white{--frame-width:10;background:var(--card)}.frame-carved-gilt{--frame-width:15;--painting-height:112;box-shadow:var(--lift) var(--lift) 0 var(--ink), inset 0 0 0 3px #6b4510;background:radial-gradient(circle,#9c6a17 1.6px,#0000 2.1px) 0 0/8px 8px,linear-gradient(135deg,#f0c75a,#c99429)}.frame-carved-gilt img{box-shadow:0 0 0 2px var(--ink), 0 0 0 6px #7a4f12, 0 0 0 8px var(--ink)}.frame-carved-gilt:hover,.frame-carved-gilt:focus-visible{box-shadow:calc(var(--lift) + 3px) calc(var(--lift) + 3px) 0 var(--ink), inset 0 0 0 3px #6b4510}.frame-beaded-gilt{--frame-width:12;background:linear-gradient(135deg,#ecbd52,#c48f2a)}.frame-beaded-gilt img{outline-offset:3px;outline:2.5px dotted #fff1c4}.frame-print-mat{--frame-width:18;background:#2b2520}.frame-print-mat img{box-shadow:0 0 0 2px var(--ink), 0 0 0 calc(13 * var(--u)) #efe5cf}.sample-label{z-index:2;background:var(--ink);color:var(--paper);white-space:nowrap;opacity:0;pointer-events:none;border-radius:10px;padding:8px 12px;font-size:.85rem;font-weight:550;line-height:1.3;transition:opacity .15s,transform .15s;display:grid;position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,-4px)}.sample:hover .sample-label,.sample:focus-visible .sample-label{opacity:1;transform:translate(-50%)}.sample:first-child .sample-label{left:0}.sample:last-child .sample-label{left:auto;right:0}.sample:is(:first-child,:last-child) .sample-label{transform:translateY(-4px)}.sample:is(:first-child,:last-child):is(:hover,:focus-visible) .sample-label{transform:none}@media (width<=520px){.sample-wall{--u:1px;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;display:grid}.sample img{aspect-ratio:1;object-fit:cover;width:100%;height:auto}}.drop-stage{isolation:isolate;position:relative}.shape{z-index:-1;border:var(--outline-thick);transition:transform .35s cubic-bezier(.3,1.6,.5,1);position:absolute}.shape.circle{background:var(--red);border-radius:50%;width:170px;height:170px;top:-48px;right:-28px}.shape.arch{background:var(--blue);border-radius:95px 95px 0 0;width:190px;height:95px;bottom:-40px;left:-52px}.shape.square{background:var(--yellow);border-radius:10px;width:74px;height:74px;bottom:-34px;right:18%;transform:rotate(14deg)}.drop-stage:hover .shape.circle,.is-dragging .shape.circle{transform:translate(-6px,-12px)scale(1.06)}.drop-stage:hover .shape.arch,.is-dragging .shape.arch{transform:translate(-10px,6px)}.drop-stage:hover .shape.square,.is-dragging .shape.square{transform:rotate(-12deg)translateY(8px)}.drop-zone{aspect-ratio:1;border:4px dashed var(--ink);background:var(--card);text-align:center;cursor:pointer;border-radius:36px;place-content:center;justify-items:center;gap:6px;width:100%;padding:32px;transition:transform .15s,box-shadow .15s,background-color .15s;display:grid}.drop-zone:hover,.is-dragging .drop-zone{background:var(--yellow);box-shadow:var(--lift-big) var(--lift-big) 0 var(--ink);border-style:solid;transform:translate(-4px,-4px)}.drop-zone:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.drop-art{border:var(--outline-thick);background:var(--paper);border-radius:16px;width:140px;height:104px;margin-bottom:18px;position:relative;overflow:hidden}.drop-art i{border:var(--outline);position:absolute}.drop-art .sun{background:var(--red);border-radius:50%;width:30px;height:30px;transition:transform .35s cubic-bezier(.3,1.6,.5,1);top:12px;right:16px}.drop-art .hill{background:var(--green);border-radius:50%;width:112px;height:92px;bottom:-46px;left:-26px}.drop-art .peak{background:var(--blue);clip-path:polygon(50% 0,100% 100%,0 100%);border:none;width:92px;height:64px;bottom:-3px;right:-10px}.drop-zone:hover .sun,.is-dragging .drop-zone .sun{transform:translate(-14px,8px)scale(1.15)}.drop-title{letter-spacing:-.03em;font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;line-height:1;display:block}.drop-hint{opacity:.7;font-size:1.2rem;font-weight:600;display:block}.drop-zone .touch-only{display:none}@media (pointer:coarse){.drop-zone .touch-only{display:block}.drop-zone .pointer-only{display:none}}.workspace{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"picture controls""strip strip";gap:32px 40px;padding-top:16px;display:grid}.picture-frame{border:var(--outline-thick);background:var(--card);min-width:0;height:clamp(280px,100vh - 380px,640px);box-shadow:var(--lift-big) var(--lift-big) 0 var(--ink);border-radius:28px;grid-area:picture;place-items:center;padding:22px;display:grid;position:relative;container-type:size}.picture-stack{--fit-height:100cqh;width:min(100cqw, var(--fit-height) * var(--ratio,1));aspect-ratio:var(--ratio,1);box-shadow:0 0 0 3px var(--ink);cursor:crosshair;touch-action:pan-y pinch-zoom;border-radius:10px;position:relative;overflow:hidden}.picture-stack canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.source-veil{pointer-events:none;image-rendering:pixelated}.controls{flex-direction:column;grid-area:controls;gap:22px;display:flex}.axis-picker{border:0;gap:14px;min-width:0;margin:0;padding:0;display:grid}.axis-tile{border:var(--outline);background:var(--card);min-width:230px;box-shadow:var(--lift) var(--lift) 0 var(--ink);cursor:pointer;border-radius:18px;align-items:center;gap:14px;padding:10px 22px 10px 10px;font-size:1.4rem;font-weight:750;transition:transform .12s,box-shadow .12s,background-color .12s;display:flex;position:relative}.axis-tile input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.axis-tile .icon{border:var(--outline);background:var(--tile-color);width:48px;height:48px;color:var(--tile-ink,var(--ink));border-radius:12px;padding:8px}.axis-tile:hover{box-shadow:calc(var(--lift) + 2px) calc(var(--lift) + 2px) 0 var(--ink);transform:translate(-2px,-2px)}.axis-tile:has(input:checked){background:var(--tile-color);color:var(--tile-ink,var(--ink));box-shadow:0 0 0 var(--ink);transform:translate(var(--lift), var(--lift))}.axis-tile:has(input:checked) .icon{background:var(--card);color:var(--ink)}.axis-tile:has(input:focus-visible){outline:4px solid var(--blue);outline-offset:4px}.axis-color{--tile-color:var(--red)}.axis-hilbert{--tile-color:var(--blue);--tile-ink:var(--paper)}.axis-columns{--tile-color:var(--yellow)}.axis-radial{--tile-color:var(--green)}.saves{flex-wrap:wrap;gap:12px;display:flex}.another{background:var(--yellow);position:absolute;top:-22px;right:28px}.strip-stack{--strip-border:4px;grid-area:strip;position:relative}.studio-strip{border:var(--strip-border) solid var(--ink);width:100%;height:clamp(110px,19vh,200px);box-shadow:var(--lift-big) var(--lift-big) 0 var(--ink);image-rendering:pixelated;cursor:crosshair;touch-action:pan-y;border-radius:22px;display:block}.segment-marker{--inner:calc(100% - 2 * var(--strip-border));top:-12px;bottom:-12px;left:calc(var(--strip-border) + var(--inner) * (var(--at) + var(--span) / 2));z-index:1;width:max(14px, calc(var(--inner) * var(--span) + 6px));border:3px solid var(--ink);box-shadow:0 0 0 2px var(--paper), inset 0 0 0 2px var(--paper);pointer-events:none;border-radius:6px;position:absolute;transform:translate(-50%)}.segment-marker:before{content:"";border:3px solid var(--ink);background:var(--color);width:46px;height:46px;box-shadow:0 4px 0 var(--ink);border-radius:50% 50% 50% 0;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)rotate(-45deg)}.drop-overlay{z-index:50;border:12px dashed var(--ink);pointer-events:none;background:#ffc81fe6;place-items:center;display:none;position:fixed;inset:0}.is-dragging .drop-overlay{display:grid}.drop-overlay span{letter-spacing:-.05em;font-size:clamp(4rem,15vw,12rem);font-weight:800;animation:.9s ease-in-out infinite alternate wobble}@keyframes wobble{0%{transform:rotate(-4deg)scale(.96)}to{transform:rotate(4deg)scale(1.04)}}.toast{z-index:60;border:var(--outline);background:var(--red);max-width:calc(100% - 32px);color:var(--card);box-shadow:var(--lift) var(--lift) 0 var(--ink);border-radius:18px;margin:0;padding:14px 24px;font-weight:750;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@media (width<=860px){.studio{padding:8px 16px 48px}.intro{grid-template-columns:minmax(0,1fr);gap:40px;min-height:0;padding:16px 0 56px}.intro h1{font-size:clamp(2.8rem,12vw,4.6rem)}.drop-zone{aspect-ratio:4/3}.shape.circle{width:110px;height:110px;top:-32px;right:-12px}.shape.arch{width:130px;height:65px;left:-12px}.picture-frame{height:auto;padding:34px 14px 14px;container-type:inline-size}.picture-stack{--fit-height:60vh}.workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"picture""strip""controls";gap:24px}.axis-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.axis-tile{min-width:0;font-size:1.2rem}.saves{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.saves .pill{justify-content:center}.another{right:18px}}