:root{--paper: #faf8f5;--paper-2: #f3efe8;--paper-3: #ece5db;--surface: #ffffff;--ink: #181512;--ink-2: #453c34;--muted: #756a5f;--faint: #a2978c;--line: #e6ded4;--line-2: #f0e9e0;--clay: #8a4b2a;--clay-soft: #f6ede6;--radius: 18px;--radius-sm: 11px;--shadow-sm: 0 1px 2px rgba(24, 21, 18, .05);--shadow: 0 18px 48px -24px rgba(24, 21, 18, .28), 0 2px 6px rgba(24, 21, 18, .05);--shadow-lg: 0 44px 90px -40px rgba(24, 21, 18, .42);--serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "BIZ UDMincho", "Source Han Serif JP", serif;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;--gutter: clamp(1.15rem, 5vw, 2.5rem);--max: 74rem;--nav-h: 60px;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;text-size-adjust:100%;overflow-x:hidden}:where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd){margin:0}:where(ul,ol){padding:0;list-style:none}:where(a){color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}img{max-width:100%}.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;padding:.75rem 1.15rem;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;transition:top .14s ease}.skip-link:focus{top:1rem}.display{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:1.32;color:var(--ink);text-wrap:balance}h1.display{font-size:clamp(1.8rem,1.15rem + 2.5vw,3.05rem);line-height:1.3}h2.display{font-size:clamp(1.6rem,1.1rem + 2.2vw,2.6rem)}h3.display{font-size:clamp(1.15rem,1rem + .8vw,1.45rem);line-height:1.5}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.22em;padding-inline-start:.22em;color:var(--clay);text-transform:uppercase}.lede{font-size:clamp(1rem,.95rem + .35vw,1.1rem);line-height:2;color:var(--muted);max-width:34rem}.small{font-size:.8125rem;line-height:1.8;color:var(--faint)}.nb{white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.8rem 1.75rem;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.9375rem;font-weight:700;letter-spacing:.01em;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);transition:transform .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease}.btn:hover{transform:translateY(-1px);background:#2a241e;border-color:#2a241e}.btn:active{transform:translateY(0)}.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn--ghost:hover{background:var(--surface);border-color:var(--ink);color:var(--ink)}.btn--sm{min-height:44px;padding:.55rem 1.15rem;font-size:.8125rem}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn svg{width:1.05em;height:1.05em;flex:none}.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}.textlink{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;color:var(--clay);font-weight:700;font-size:.875rem}.textlink:hover{text-decoration:underline;text-underline-offset:4px}.nav{position:sticky;top:0;z-index:40;background:#faf8f5db;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s ease}.nav.is-stuck{border-bottom-color:var(--line)}.nav-inner{display:flex;align-items:center;gap:1rem;min-height:var(--nav-h)}.brand{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font-weight:700;letter-spacing:-.01em}.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--ink);color:var(--paper);font-size:.6875rem;font-weight:800}.brand-name{font-size:.9375rem;color:var(--ink);white-space:nowrap}.nav-links{display:none;gap:1.5rem;margin-inline:auto}.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.2rem;font-size:.875rem;font-weight:600;color:var(--muted)}.nav-links a:hover{color:var(--ink)}.nav-cta{margin-inline-start:auto}@media(min-width:840px){.nav-links{display:inline-flex}.nav-cta{margin-inline-start:0}}.hero{padding:clamp(1.75rem,4.5vw,3.25rem) 0 clamp(2rem,5vw,3.5rem)}.hero-copy{max-width:none}.hero .lede{max-width:36rem}.hero-copy>*+*{margin-top:1.1rem}.hero h1{margin-top:.85rem}.hero .cta-row{margin-top:1.5rem}.hero-note{margin-top:1rem}.hero-stage{margin-top:clamp(1.75rem,4vw,2.5rem)}.browser{border-radius:var(--radius);overflow:hidden;background:#0d1117;border:1px solid var(--line);box-shadow:var(--shadow-lg)}.browser-bar{display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem;background:var(--paper-2);border-bottom:1px solid var(--line)}.browser-dots{display:inline-flex;gap:.3rem;flex:none}.browser-dots i{width:9px;height:9px;border-radius:50%;background:var(--paper-3)}.browser-label{flex:1;min-width:0;text-align:center;font-size:.6875rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-body{position:relative;overflow:hidden;background:#000}.browser-body[data-fit] iframe{position:absolute;top:0;left:0;width:var(--fit-w, 100%);height:var(--fit-h, 100%);transform:scale(var(--fit-scale, 1));transform-origin:top left}.browser-body iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}.browser-body[data-live] iframe,.phone-body[data-live] iframe{pointer-events:auto}.tpl-hint{display:flex;align-items:center;gap:.4rem;padding:.5rem clamp(.75rem,2vw,1rem) 0;font-size:.75rem;color:var(--faint)}.tpl-hint:before{content:"↕";font-size:.875rem}.browser-body[data-ratio]{aspect-ratio:16 / 10}.hero-stage .browser-body[data-ratio]{aspect-ratio:16 / 9}.phone{--phone-w: 232;width:calc((var(--phone-w) + 18) * 1px);border-radius:30px;overflow:hidden;background:#000;border:9px solid #24211d;box-shadow:var(--shadow-lg)}.phone-body{position:relative;overflow:hidden;background:#000;height:calc(var(--phone-w) * 1px * (844 / 390))}.phone-body iframe{position:absolute;top:0;left:0;display:block;border:0;pointer-events:none;width:390px;height:844px;transform:scale(calc(var(--phone-w) / 390));transform-origin:top left}.hero-stage{position:relative}.hero-stage .phone{display:none}@media(min-width:900px){.hero-stage{position:relative;padding-inline-end:4rem}.hero-stage .phone{--phone-w: 196;display:block;position:absolute;right:0;bottom:-1.75rem;z-index:2}}.sample-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px;background:var(--clay-soft);color:var(--clay);border:1px solid rgba(138,75,42,.18);font-size:.6875rem;font-weight:700;letter-spacing:.04em}.section{padding:clamp(3rem,8vw,6rem) 0}:where(section[id],main [id]){scroll-margin-top:calc(var(--nav-h) + .75rem)}.section--paper2{background:var(--paper-2)}.section-head{max-width:42rem}.section-head>*+*{margin-top:.85rem}.section-head--center{margin-inline:auto;text-align:center}.section-head--center .lede{margin-inline:auto}.showcase{margin-top:clamp(1.75rem,4vw,2.75rem)}.showcase-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}.showcase-bar .spacer{margin-inline-start:auto}.seg{display:inline-flex;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:999px}.seg button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:44px;min-width:44px;padding:0 .95rem;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:.8125rem;font-weight:700;cursor:pointer;transition:background-color .14s,color .14s}.seg button svg{width:1em;height:1em}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.showcase-stage{display:grid;place-items:center}.showcase-stage[data-device=desktop] .phone,.showcase-stage[data-device=mobile] .browser{display:none}.showcase-stage[data-device=mobile] .phone{display:block;--phone-w: 282}@media(max-width:420px){.showcase-stage[data-device=mobile] .phone{--phone-w: 240}}.showcase-stage .browser{width:100%}.compare{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-top:clamp(1.75rem,4vw,2.75rem)}@media(min-width:700px){.compare{grid-template-columns:repeat(2,1fr)}}@media(min-width:1060px){.compare{grid-template-columns:repeat(3,1fr)}}.compare-item{display:flex;flex-direction:column;gap:.75rem;min-width:0}.compare-item .browser{width:100%}.compare-item .browser-body[data-ratio]{aspect-ratio:4 / 3}.compare-cap{display:flex;align-items:baseline;gap:.5rem}.compare-cap b{font-size:.9375rem;font-weight:700;color:var(--ink)}.compare-cap span{font-size:.75rem;color:var(--faint)}.compare-note{font-size:.8125rem;line-height:1.8;color:var(--muted)}.compare-more{margin-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--rule)}.compare-more>summary{display:flex;align-items:baseline;gap:.75rem;cursor:pointer;padding:1rem .125rem;list-style:none;color:var(--ink)}.compare-more>summary::-webkit-details-marker{display:none}.compare-more>summary:after{content:"";width:.5rem;height:.5rem;margin-left:auto;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-.15em,-.15em);transition:transform .2s ease}.compare-more[open]>summary:after{transform:rotate(-135deg) translate(-.1em,-.1em)}.compare-more>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.compare-more-label{font-size:.9375rem;font-weight:700}.compare-more-hint{font-size:.75rem;color:var(--faint)}.compare-more[open] .compare-more-hint{visibility:hidden}.compare-more .compare{margin-top:0;padding-bottom:.5rem}@media(prefers-reduced-motion:reduce){.compare-more>summary:after{transition:none}}.rec-form{display:grid;gap:clamp(1rem,2.5vw,1.5rem);margin-top:clamp(1.5rem,3.5vw,2.25rem)}.rec-axis{border:0;padding:0;margin:0}.rec-axis legend{font-size:.9375rem;font-weight:700;color:var(--ink);margin-bottom:.6rem;padding:0}.rec-hint{font-weight:400;font-size:.8125rem;color:var(--faint)}.rec-opts{display:flex;gap:.4rem;flex-wrap:wrap}.rec-opt{position:relative}.rec-opt input{position:absolute;inset:0;opacity:0;cursor:pointer}.rec-opt span{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.8125rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.rec-opt input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}.rec-opt input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}.rec-shop{margin-top:1.25rem;color:var(--faint)}.rec-results{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-top:clamp(1.75rem,4vw,2.5rem)}@media(min-width:1000px){.rec-results{grid-template-columns:repeat(3,minmax(0,1fr))}}.rec-card{display:flex;flex-direction:column;gap:.75rem;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,2.5vw,1.5rem);box-shadow:var(--shadow)}.rec-rank{display:inline-block;padding:.2rem .65rem;border-radius:999px;background:var(--clay-soft);color:var(--clay);font-size:.6875rem;font-weight:800;letter-spacing:.08em}.rec-name{font-family:var(--serif);font-size:1.25rem;margin-top:.5rem}.rec-recipe{font-size:.8125rem;line-height:1.7;color:var(--muted)}.rec-why p{font-size:.8125rem;line-height:1.85;color:var(--muted)}.rec-caveats{border-left:3px solid var(--clay);padding-left:.75rem}.rec-caveat{font-size:.8125rem;line-height:1.8;color:var(--ink)}.rec-nudges{border-top:1px solid var(--line);padding-top:.75rem}.rec-nudges-label{font-size:.75rem;font-weight:700;color:var(--faint);margin-bottom:.5rem}.rec-nudge-row{display:flex;flex-wrap:wrap;gap:.3rem}.rec-nudge{min-height:44px;padding:.4rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:.75rem;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:border-color .16s ease,color .16s ease}@media(hover:hover)and (pointer:fine){.rec-nudge:hover{border-color:var(--ink);color:var(--ink)}}.rec-nudge-note{margin-top:.5rem;font-size:.75rem;line-height:1.7;color:var(--clay);min-height:1.2em}.rec-pick{margin-top:auto;text-align:center}.rec-fallback{margin-top:clamp(2rem,5vw,3rem);text-align:center}.shop-switch{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:clamp(1.5rem,3.5vw,2.25rem)}.shop-btn{min-height:44px;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:.8125rem;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background-color .18s ease,color .18s ease,border-color .18s ease}@media(hover:hover)and (pointer:fine){.shop-btn:hover{border-color:var(--clay);color:var(--clay)}}.shop-btn[aria-pressed=true]{background:var(--clay);border-color:var(--clay);color:#fff}.shop-note{margin-top:.75rem;font-size:.8125rem;line-height:1.8;color:var(--muted);max-width:54ch}.tpl-tabs{display:flex;gap:.4rem;margin-top:clamp(1.5rem,3.5vw,2.25rem);overflow-x:auto;scrollbar-width:thin;padding-bottom:.5rem;scroll-snap-type:x proximity}.tpl-tabs::-webkit-scrollbar{height:6px}.tpl-tabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}.tpl-tab{flex:none;scroll-snap-align:start;min-height:44px;padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:.8125rem;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background-color .18s ease,color .18s ease,border-color .18s ease}@media(hover:hover)and (pointer:fine){.tpl-tab:hover{border-color:var(--ink);color:var(--ink)}}.tpl-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.tpl-grid{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-top:clamp(1rem,2.5vw,1.5rem)}.tpl-panel[hidden]{display:none}.tpl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.tpl-card-media{position:relative;background:var(--paper-2)}.tpl-card-body{padding:clamp(1.25rem,3vw,1.9rem)}.tpl-card-body>*+*{margin-top:.85rem}.tags{display:flex;flex-wrap:wrap;gap:.4rem}.tag{padding:.22rem .7rem;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);font-size:.75rem;font-weight:600;color:var(--muted)}.tpl-actions{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}.tpl-count{font-size:.8125rem;color:var(--faint);margin-top:1.25rem}.tpl-diff{font-size:.875rem;line-height:1.85;color:var(--muted)}.tpl-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem}.tpl-bar .spacer{margin-inline-start:auto}.tpl-stage{display:grid;place-items:center;background:var(--paper-2);padding:clamp(.5rem,1.5vw,1rem)}.tpl-stage[data-device=desktop] .phone,.tpl-stage[data-device=mobile] .browser{display:none}.tpl-stage .browser{width:100%}.tpl-stage .phone{--phone-w: 300}@media(min-width:900px){.tpl-card{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:stretch}.tpl-card-media{min-height:100%;display:flex;flex-direction:column}.tpl-card-media .tpl-stage{flex:1}.tpl-card-body{display:flex;flex-direction:column;justify-content:center}}.steps{display:grid;gap:clamp(1.5rem,3.5vw,2.5rem);margin-top:clamp(2rem,4vw,3rem);counter-reset:s}@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}.step{position:relative;padding-top:1.5rem;border-top:1px solid var(--line)}.step-n{font-family:var(--serif);font-size:.875rem;font-weight:700;color:var(--clay);font-variant-numeric:tabular-nums}.step h3{margin-top:.5rem}.step p{margin-top:.5rem;font-size:.9375rem;color:var(--muted)}.value-grid{display:grid;gap:clamp(1.1rem,2.5vw,1.75rem);margin-top:clamp(2rem,4vw,3rem)}@media(min-width:640px){.value-grid{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.value-grid{grid-template-columns:repeat(3,1fr)}}.value-item{padding:clamp(1.15rem,2.5vw,1.6rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}.value-item h3{font-family:var(--sans);font-size:.9375rem;font-weight:700;color:var(--ink)}.value-item p{margin-top:.4rem;font-size:.875rem;color:var(--muted);line-height:1.85}.value-icon{display:block;width:1.4rem;height:1.4rem;color:var(--clay);margin-bottom:.75rem}.final{padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,4rem);background:var(--ink);color:var(--paper-2);border-radius:var(--radius);text-align:center}.final .display{color:var(--paper)}.final .lede{color:#faf8f5b8;margin-inline:auto}.final .cta-row{justify-content:center;margin-top:1.9rem}.final .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}.final .btn:hover{background:#fff;border-color:#fff}.final .btn--ghost{background:transparent;color:var(--paper);border-color:#faf8f566}.final .btn--ghost:hover{background:#faf8f51a;color:var(--paper);border-color:var(--paper)}.foot{padding:clamp(2rem,5vw,3rem) 0 clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}.foot-inner{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}.foot-note{font-size:.8125rem;color:var(--faint);max-width:40rem}.foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-inline-start:auto}.foot-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:.3rem;font-size:.8125rem;color:var(--muted)}.foot-links a:hover{color:var(--ink)}dialog.viewer{width:min(100vw,100%);max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink-2)}dialog.viewer::backdrop{background:#18151299}.viewer-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding:.6rem var(--gutter);border-bottom:1px solid var(--line);background:var(--surface)}.viewer-bar .spacer{margin-inline-start:auto}.viewer-title{font-size:.875rem;font-weight:700;color:var(--ink)}.viewer-stage{height:calc(100svh - 61px);display:grid;place-items:center;padding:clamp(.5rem,2vw,1.25rem);background:var(--paper-2);overflow:auto}.viewer-stage .browser{width:100%;height:100%}.viewer-stage .browser-body[data-ratio]{aspect-ratio:auto;height:calc(100% - 37px)}.viewer-stage[data-device=mobile] .browser,.viewer-stage[data-device=desktop] .phone{display:none}.viewer-stage .phone{width:min(390px,92vw)}.viewer-stage iframe{pointer-events:auto}.viewer-stage .phone-body{aspect-ratio:auto;height:min(760px,calc(100svh - 120px))}html.js-reveal .reveal{opacity:0;transform:translateY(14px)}html.js-reveal .reveal--now{opacity:1;transform:none;animation:lp-rise .62s cubic-bezier(.22,1,.36,1) both}html.js-reveal .reveal--now[style*=--reveal-delay]{animation-delay:var(--reveal-delay, 0ms)}@keyframes lp-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}html.js-reveal .reveal.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay, 0ms)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}html.js-reveal .reveal{opacity:1;transform:none}html.js-reveal .reveal--now{animation:none}}.qs{min-height:100svh;display:flex;flex-direction:column}.qs-main{flex:1;display:grid;align-items:start}@media(min-width:1000px){.qs-main{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}}.qs-form-col{padding:clamp(1.75rem,4vw,3rem) var(--gutter) 3rem}.qs-form-inner{max-width:34rem;margin-inline:auto}.qs-head>*+*{margin-top:.75rem}.qs-steps{font-size:.8125rem;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}.qs-field{margin-top:clamp(1.5rem,3vw,2.1rem)}.qs-field>label,.qs-legend{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink)}.qs-field .hint{margin-top:.3rem;font-size:.8125rem;color:var(--faint);line-height:1.7}.qs-field input[type=text]{width:100%;min-height:52px;margin-top:.7rem;padding:.7rem 1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:1rem;transition:border-color .13s,box-shadow .13s}.qs-field input[type=text]:hover{border-color:var(--faint)}.qs-field input[type=text]:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px #18151214}.qs-field input::placeholder{color:#b8ada2}.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}.chip-btn{min-height:44px;padding:.3rem .9rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;transition:border-color .13s,color .13s,background-color .13s}.chip-btn:hover{border-color:var(--ink);color:var(--ink)}.palettes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}@media(min-width:520px){.palettes{grid-template-columns:repeat(4,1fr)}}.palette{position:relative}.palette input{position:absolute;opacity:0;pointer-events:none}.palette label{display:block;cursor:pointer;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:border-color .13s,box-shadow .13s,transform .13s}.palette label:hover{transform:translateY(-1px);border-color:var(--faint)}.palette input:checked+label{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}.palette input:focus-visible+label{outline:2px solid var(--ink);outline-offset:3px}.palette-swatch{display:block;height:56px;padding:.55rem .6rem}.palette-swatch b{display:block;font-family:var(--serif);font-size:.8125rem;font-weight:600}.palette-swatch i{display:block;width:2rem;height:.35rem;border-radius:999px;margin-top:.4rem}.palette-name{display:block;padding:.45rem .6rem;font-size:.75rem;font-weight:700;color:var(--ink)}.palette-note{margin-top:.6rem;font-size:.8125rem;color:var(--muted);min-height:1.7em}.qs-submit{margin-top:clamp(2rem,4vw,2.75rem)}.qs-submit .btn{width:100%}@media(min-width:560px){.qs-submit .btn{width:auto;min-width:16rem}}.qs-submit .small{margin-top:.85rem}.qs-back{margin-top:1.5rem}.qs-preview-col{position:sticky;top:0;align-self:start;height:100svh;display:flex;flex-direction:column;min-width:0;background:var(--paper-2);border-inline-start:1px solid var(--line)}.qs-preview-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.6rem var(--gutter);background:var(--surface);border-bottom:1px solid var(--line)}.qs-preview-bar .spacer{margin-inline-start:auto}.qs-preview-stage{flex:1;min-height:0;display:grid;place-items:center;padding:clamp(.6rem,2vw,1.25rem);overflow:auto}.qs-preview-stage .browser{width:100%}.qs-preview-stage .browser-body[data-ratio]{aspect-ratio:auto;height:min(70svh,720px)}.qs-preview-stage[data-device=mobile] .browser,.qs-preview-stage[data-device=desktop] .phone{display:none}.qs-preview-stage .phone{width:min(340px,86vw)}.qs-preview-stage .phone-body{aspect-ratio:auto;height:min(70svh,720px)}.qs-sample-note{padding:.7rem var(--gutter);background:var(--clay-soft);border-top:1px solid rgba(138,75,42,.16);font-size:.75rem;line-height:1.7;color:var(--clay)}@media(max-width:999px){.qs-preview-col{position:static;height:auto;border-inline-start:0;border-top:1px solid var(--line)}.qs-preview-stage .browser-body[data-ratio]{aspect-ratio:16 / 10;height:auto}.qs-preview-stage .phone-body{aspect-ratio:390 / 720;height:auto}}