.field{gap:var(--sp-2);display:grid}.field__label{color:var(--c-ink-soft);font-size:.85rem;font-weight:700}.seg{gap:var(--sp-2);border:0;flex-wrap:wrap;margin:0;padding:0;display:flex}.seg__legend{color:var(--c-ink-soft);padding:0 0 var(--sp-2);font-size:.85rem;font-weight:700}.seg__option{position:relative}.seg__input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg__face{padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);background:var(--c-cream);cursor:pointer;transition:background var(--motion-fast) var(--ease-soft), color var(--motion-fast) var(--ease-soft), transform var(--motion-fast) var(--ease-soft);font-size:.9rem;font-weight:700;display:block}.seg__input:checked+.seg__face{background:var(--c-accent);color:#fff;transform:translateY(-1px)}.seg__input:focus-visible+.seg__face{box-shadow:0 0 0 4px #ff8fab4d}.color-field{align-items:center;gap:var(--sp-3);display:flex}.color-field__swatch{border:2px solid var(--c-cream);border-radius:var(--r-md);cursor:pointer;background:0 0;block-size:44px;inline-size:44px;padding:0}.color-field__hex{color:var(--c-ink-soft);font-variant-numeric:tabular-nums;font-size:.85rem}.slider{appearance:none;cursor:pointer;background:0 0;outline:none;width:100%}.slider::-webkit-slider-runnable-track{border-radius:var(--r-pill);background:var(--c-blush);height:8px}.slider::-moz-range-track{border-radius:var(--r-pill);background:var(--c-blush);height:8px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--c-accent);width:20px;height:20px;box-shadow:var(--shadow-soft);border:none;border-radius:50%;margin-top:-6px}.slider::-moz-range-thumb{background:var(--c-accent);width:20px;height:20px;box-shadow:var(--shadow-soft);border:none;border-radius:50%}.slider:focus-visible{border-radius:var(--r-pill);box-shadow:0 0 0 4px #ff8fab59}.switch{align-items:center;gap:var(--sp-3);cursor:pointer;font-size:.9rem;font-weight:700;display:flex}.switch input{accent-color:var(--c-accent);block-size:20px;inline-size:20px}.panel{gap:var(--sp-4);display:grid}.panel__title{margin:0;font-size:1.05rem}.panel__row{gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.text-input{width:100%;padding:var(--sp-3) var(--sp-4);font:inherit;color:var(--c-ink);background:var(--c-cream);border-radius:var(--r-pill);transition:border-color var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);border:2px solid #0000;outline:none}.text-input:focus-visible{border-color:var(--c-accent);box-shadow:0 0 0 4px #ff8fab40}.panel__hint{color:var(--c-ink-soft);margin:0;font-size:.85rem}.export{gap:var(--sp-4);display:grid}.export__actions{gap:var(--sp-3);flex-wrap:wrap;display:flex}.export__button{padding:var(--sp-3) var(--sp-5);font:inherit;color:#fff;background:var(--c-accent);border-radius:var(--r-pill);cursor:pointer;box-shadow:var(--shadow-soft);transition:transform var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft);border:0;flex:auto;font-weight:800}.export__button:hover:not(:disabled){background:var(--c-accent-deep);transform:translateY(-2px)}.export__button:disabled{box-shadow:none;cursor:not-allowed;background:#d9d3de}.export__button--ghost{background:var(--c-lavender);color:var(--c-ink)}.export__button--ghost:hover:not(:disabled){background:#d6ccff}.export__message{margin:0;font-size:.85rem}.export__message--warn{color:var(--c-warn)}.export__message--error{color:var(--c-error)}.export__message--ok{color:var(--c-ink-soft)}.mascot{block-size:84px;inline-size:84px;margin-inline:auto;display:block}@keyframes mascot-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.mascot__wrap{animation:mascot-bob 3.2s var(--ease-soft) infinite}@media (prefers-reduced-motion:reduce){.mascot__wrap{animation:none}}.preview{padding:var(--sp-4);background:repeating-conic-gradient(var(--c-cream) 0% 25%, #f0e9e2 0% 50%) 50% / 18px 18px;border-radius:var(--r-md);transition:opacity var(--motion-base) var(--ease-soft);place-items:center;display:grid}.preview--dimmed{opacity:.4}.preview svg{width:100%;height:auto;display:block}.url-field{gap:var(--sp-2);display:grid}.url-field__label{font-size:.95rem;font-weight:700}.url-field__input{width:100%;padding:var(--sp-3) var(--sp-4);font:inherit;color:var(--c-ink);background:var(--c-cream);border-radius:var(--r-pill);transition:border-color var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);border:2px solid #0000;outline:none;font-size:1.05rem}.url-field__input:focus-visible{border-color:var(--c-accent);box-shadow:0 0 0 4px #ff8fab40}.url-field__input[aria-invalid=true]{border-color:var(--c-error)}.url-field__note{color:var(--c-error);margin:0;font-size:.85rem}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/nunito-latin-400-normal-r8SDr6Up.woff2)format("woff2"),url(/assets/nunito-latin-400-normal-DKg4f3fz.woff)format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/nunito-latin-700-normal-Dort48En.woff2)format("woff2"),url(/assets/nunito-latin-700-normal-OcDqTBcA.woff)format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:800;src:url(/assets/nunito-latin-800-normal-Dz8SOQK_.woff2)format("woff2"),url(/assets/nunito-latin-800-normal-D-J0wlBY.woff)format("woff")}@font-face{font-family:Mitr;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/mitr-thai-400-normal-CXWaAdVj.woff2)format("woff2"),url(/assets/mitr-thai-400-normal-CS4Do6aM.woff)format("woff")}@font-face{font-family:Mitr;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/mitr-thai-600-normal-DFYMNGrH.woff2)format("woff2"),url(/assets/mitr-thai-600-normal-DvC8ywyI.woff)format("woff")}@font-face{font-family:Mitr;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/mitr-thai-700-normal-DydbJCoG.woff2)format("woff2"),url(/assets/mitr-thai-700-normal-Cs3VJI5T.woff)format("woff")}:root{--c-blush:#ffe5ec;--c-mint:#c9f2e9;--c-lavender:#e5deff;--c-cream:#fffaf3;--c-ink:#4a3f55;--c-ink-soft:#8a7f95;--c-accent:#ff8fab;--c-accent-deep:#f26d92;--c-surface:#fff;--c-warn:#d97706;--c-error:#d64550;--bg-page:linear-gradient(160deg, var(--c-blush) 0%, var(--c-lavender) 55%, var(--c-mint) 100%);--r-md:18px;--r-lg:28px;--r-pill:999px;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--shadow-soft:0 10px 30px -12px #ff8fab73;--font-body:"Nunito", "Mitr", sans-serif;--motion-fast:.14s;--motion-base:.24s;--ease-soft:cubic-bezier(.34, 1.2, .64, 1)}@media (prefers-reduced-motion:reduce){:root{--motion-fast:0s;--motion-base:0s}}*,:before,:after{box-sizing:border-box}body{background:var(--bg-page);min-height:100dvh;color:var(--c-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app{max-width:1120px;padding:var(--sp-6) var(--sp-4) var(--sp-6);column-gap:var(--sp-5);row-gap:var(--sp-4);grid-template-columns:minmax(0,1fr) minmax(0,380px);grid-template-areas:"header header""link preview""controls preview";align-items:start;margin:0 auto;display:grid}.app__header{text-align:center;margin-bottom:calc(var(--sp-5) - var(--sp-4));grid-area:header;position:relative}.app__header-toggle{z-index:1;position:absolute;top:0;right:0}@media (width<=520px){.app__header-toggle{margin-bottom:var(--sp-3);justify-content:center;display:flex;position:static}}.app__link{grid-area:link}.app__controls{gap:var(--sp-4);grid-area:controls;display:grid}.app__preview{top:var(--sp-5);grid-area:preview;position:sticky}@media (width<=860px){.app{gap:var(--sp-4);padding-top:var(--sp-5);grid-template-columns:minmax(0,1fr);grid-template-areas:"header""link""preview""controls"}.app__header{margin-bottom:0}.app__preview{position:static}.app__header{align-items:center;gap:var(--sp-3);text-align:left;display:flex}.app__header h1{flex-grow:1;margin:0;font-size:1.5rem}.app__header p{display:none}.app__header-toggle{order:1;position:static}.app__header .mascot__wrap{flex:none}.app__header .mascot{block-size:44px;inline-size:44px}}.card{background:var(--c-surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-soft)}