:root{--paper: #f7f2e7;--sun: #f5c84c;--sky: #e3e8fb;--butter: #fbefc8;--white: #fffefb;--ink: #181c25;--ink-2: #555c6b;--line: #e2ddd2;--cobalt: #2a4bd7;--green: #22a45d;--red: #e0442f;--grey: #c9cdd3;--font: "Archivo", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace;color-scheme:light}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font);overflow-x:hidden}img,svg,canvas{display:block}a{color:inherit}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.015em}h2{font-size:clamp(30px,4vw,40px);font-weight:750;margin-bottom:16px}h3{font-size:20px;font-weight:700}p{margin:0}.wrap{width:min(1080px,100% - 32px);margin-inline:auto}.narrow{max-width:760px}.muted{color:var(--ink-2);font-size:15px}.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:10px;border:1px solid #cfc9bc;background:var(--white);font-weight:600;font-size:16px;text-decoration:none;cursor:pointer}.btn:hover{border-color:var(--ink)}.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn.primary:hover{background:#2b3242}.btn[disabled]{opacity:.45;cursor:not-allowed}.top{background:var(--sun);border-bottom:1px solid #e0b23c}.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:750;font-size:20px;letter-spacing:-.01em}.brand [data-logo]{width:30px}.nav{display:flex;align-items:center;gap:6px}.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;font-size:15px;color:#3d3415}.nav a:hover,.nav a[aria-current=page]{color:var(--ink);background:#ebb933}.nav a.nav-order{background:var(--ink);color:#fff;margin-left:6px}@media (max-width: 560px){.nav a[href^="/#"]{display:none}}.hero{padding-top:48px;background:var(--sun)}.hero-text{text-align:center;max-width:680px}.hero h1{font-size:clamp(56px,9vw,96px);font-weight:800;letter-spacing:-.03em;font-stretch:90%}.hero-text p{max-width:590px;margin:14px auto 24px;font-size:19px;color:#3d3415}.cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.stage{--w: min(1240px, 175vw);position:relative;overflow:hidden;margin-top:12px;padding:calc(var(--w) * .175) 16px 56px}.shirt{position:absolute;width:var(--w);left:50%;top:0;transform:translate(-50%);height:auto}.stage-inner{position:relative;width:min(520px,100%);margin-inline:auto}.try{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:36px;color:#fff;font-size:15px}.try span{margin-right:4px}.try button{border:1px solid #8095ec;background:transparent;color:#fff;border-radius:999px;padding:6px 14px;font-size:15px;cursor:pointer}.try button:hover{background:#fff;color:var(--cobalt)}.keys-hint{margin-top:14px;text-align:center;color:#dfe5ff;font-size:14px}.dev{--case: #f1eee6;--edge: color-mix(in srgb, var(--case) 74%, #000);position:relative;aspect-ratio:1.62;width:100%;container-type:inline-size;outline:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}.dev:after,.dev:before{content:"";position:absolute;left:0;right:0;border-radius:8cqw}.dev:after{top:3.5cqw;bottom:0;background:var(--edge)}.dev:before{top:0;bottom:3.5cqw;background:var(--case);box-shadow:inset 0 0 0 1px #00000024;z-index:1}.dev>*{z-index:2}.dev:focus-visible:before{box-shadow:inset 0 0 0 1px #00000024,0 0 0 4px var(--white),0 0 0 7px var(--ink)}.dev-screen{position:absolute;left:30.5%;top:15%;width:39%;aspect-ratio:1;background:#10141f;border-radius:2cqw;padding:1.8cqw}.dev-screen canvas{width:100%;height:100%;image-rendering:pixelated;background:#fbfaf6;border-radius:.4cqw}.dev-stick{position:absolute;left:8.5%;top:35%;width:15%;aspect-ratio:1;border-radius:50%;background:var(--edge);cursor:pointer;display:grid;place-items:center}.dev-stick i{width:74%;aspect-ratio:1;border-radius:50%;background:#dcdee2;box-shadow:inset 0 -1cqw #b4b8bf;transition:transform .08s}.dev-keys{position:absolute;right:8%;top:11%;width:11%;height:70%;display:grid;grid-template-rows:repeat(4,1fr);gap:1.8cqw}.dev-keys button{border:0;border-radius:1.6cqw;background:var(--grey);box-shadow:inset 0 -1.2cqw #0000002e;font:600 2.8cqw/1 var(--mono);color:#00000073;cursor:pointer;padding:0}.dev-keys [data-k=A]{background:var(--green);color:#fffc}.dev-keys [data-k=Y]{background:var(--red);color:#fffc}.dev[data-caps=tonal] .dev-keys button{background:var(--edge);color:#ffffffbf}.dev[data-caps=tonal] .dev-keys [data-k=A]{box-shadow:inset 0 -1.2cqw #0000002e,inset 1cqw 0 0 var(--green)}.dev[data-caps=tonal] .dev-keys [data-k=Y]{box-shadow:inset 0 -1.2cqw #0000002e,inset 1cqw 0 0 var(--red)}.dev-keys button.down{transform:translateY(.6cqw);box-shadow:inset 0 -.4cqw #0000002e}.dev-tag{position:absolute;left:50%;top:0;transform:translate(-50%);background:var(--ink);color:#fff;font:500 2.3cqw/1 var(--mono);letter-spacing:.1em;padding:.9cqw 2.2cqw 1.1cqw;border-radius:0 0 1cqw 1cqw;white-space:nowrap;max-width:34%;overflow:hidden;text-overflow:ellipsis}.dev.mini{pointer-events:none}.dev.mini .dev-screen b{display:block;height:100%;border-radius:.4cqw;background:linear-gradient(#2a4bd7 0,#2a4bd7 17%,#fbfaf6 17%,#fbfaf6 27%,#181c25 27%,#181c25 40%,#fbfaf6 40%,#fbfaf6 47%,#d9dbe0 47%,#d9dbe0 53%,#fbfaf6 53%,#fbfaf6 60%,#d9dbe0 60%,#d9dbe0 66%,#fbfaf6 66%)}main>section:not(.hero){padding:88px 0}#security{background:var(--sky)}#price{background:var(--butter)}#security .note{background:#f4f6fe}main>section>.wrap>p,.narrow-head p{font-size:18px;color:var(--ink-2)}.narrow-head{max-width:640px;margin-bottom:36px}.table{margin:32px 0 48px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--white)}table{width:100%;border-collapse:collapse;min-width:560px;font-size:16px}th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}th{font-weight:500;font-size:14px;color:var(--ink-2)}tr:last-child td{border-bottom:0}td:first-child{font-weight:600}td:last-child{white-space:nowrap;color:var(--ink-2)}.steps{margin:16px 0 14px;padding-left:22px;display:grid;gap:10px}.steps li{padding-left:6px}.steps li::marker{font-weight:700;color:var(--cobalt)}.checks{list-style:none;margin:28px 0;padding:0;display:grid;gap:14px}.checks li{position:relative;padding-left:32px}.checks li:before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:5px;background:var(--green)}.checks li:after{content:"";position:absolute;left:6px;top:7px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.note{background:#efebe2;border-radius:12px;padding:18px 20px;font-size:16px!important}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px;margin-bottom:40px}.swatch{text-decoration:none}.swatch span{display:block;margin-top:12px;font-weight:600;font-size:15px}.swatch:hover span{color:var(--cobalt)}@media (max-width: 760px){.swatches{grid-template-columns:1fr 1fr}}.prices{margin:28px 0 16px;border-top:1px solid var(--line)}.price-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}.price-row p{color:var(--ink-2);font-size:16px;margin-top:2px}.price-row strong{font-size:28px;font-weight:750}#price .btn{margin-top:24px}.foot{background:var(--ink);padding:36px 0 44px;font-size:14px;color:#b8bdc9}.foot a{color:#fff}.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.foot nav{display:flex;gap:18px}.page-head{padding:56px 0 8px}.page-head h1{font-size:clamp(36px,5vw,52px);font-weight:800;letter-spacing:-.025em}.page-head p{margin-top:12px;font-size:18px;color:var(--ink-2);max-width:620px}.builder{padding:36px 0 96px}.builder .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}.preview{position:sticky;top:24px;background:var(--sky);border-radius:18px;padding:56px 32px 28px}.preview .keys-hint{margin-top:22px;color:var(--ink-2)}.opts{display:grid;gap:28px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:600;font-size:15px;margin-bottom:10px;padding:0}.dyes{display:flex;flex-wrap:wrap;gap:10px}.dyes label{position:relative;cursor:pointer}.dyes input{position:absolute;opacity:0}.dyes span{display:block;width:42px;height:42px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #00000026}.dyes input:checked+span{box-shadow:inset 0 0 0 1px #00000026,0 0 0 3px var(--paper),0 0 0 5px var(--ink)}.dyes input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:6px}.dye-name{margin-top:8px;font-size:14px;color:var(--ink-2)}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choices.four{grid-template-columns:repeat(4,1fr)}.choices label{cursor:pointer;position:relative}.choices input{position:absolute;opacity:0}.choices span{display:block;height:100%;border:1px solid #d6d0c3;border-radius:10px;background:var(--white);padding:11px 14px;font-weight:600;font-size:15px}.choices span small{display:block;font-weight:400;font-size:13.5px;color:var(--ink-2);margin-top:2px}.choices input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.choices input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:2px}.field input[type=text]{width:100%;height:46px;border:1px solid #d6d0c3;border-radius:10px;background:var(--white);padding:0 14px;font:500 16px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.field input[type=text]:focus{outline:2px solid var(--cobalt);outline-offset:0;border-color:transparent}.field .count{margin-top:6px;font-size:13px;color:var(--ink-2)}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:8px}.copied{font-size:14px;color:var(--green)}@media (max-width: 900px){.builder .wrap{grid-template-columns:1fr;gap:32px}.preview{position:static;padding:44px 20px 22px}.choices.four{grid-template-columns:1fr 1fr}}.shop{padding:36px 0 96px}.shop .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}.items{display:grid;gap:14px}.item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--white);padding:20px 22px}.item p{font-size:15px;color:var(--ink-2);margin-top:2px}.item .price{font-weight:600;margin-top:8px;color:var(--ink)}.qty{display:flex;align-items:center;border:1px solid #d6d0c3;border-radius:10px;overflow:hidden}.qty button{width:40px;height:40px;border:0;background:transparent;cursor:pointer;font-size:20px}.qty button:hover:not(:disabled){background:#f0ece3}.qty button:disabled{opacity:.3;cursor:not-allowed}.qty output{width:32px;text-align:center;font-weight:600}.ship{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer;margin-top:4px}.ship input{width:18px;height:18px;accent-color:var(--ink)}.design-note{font-size:15px;color:var(--ink-2)}.design-note a{color:var(--cobalt)}.summary{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:24px}.summary h3{font-size:17px;margin-bottom:12px}.summary .row{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:5px 0}.summary .total{border-top:1px solid var(--line);margin-top:10px;padding-top:12px;font-weight:700;font-size:17px}.summary .empty{font-size:15px;color:var(--ink-2)}.summary .btn{width:100%;margin-top:18px}.summary .demo{margin-top:12px;font-size:13.5px;color:var(--ink-2)}@media (max-width: 900px){.shop .wrap{grid-template-columns:1fr}.summary{position:static}}@media (prefers-reduced-motion: reduce){.dev-stick i{transition:none}}