:root{--paper:#f4f2ed;--paper-deep:#ebe7de;--card:#fffdf9;--ink:#1a1a1a;--ink-soft:#57524a;--ink-mute:#8a8780;--line:#e2ddd2;--accent:#1a1a1a;--accent-ink:#fff;--accent-line:#1a1a1a;--accent-soft:color-mix(in oklab, var(--accent) 14%, var(--card));--shadow-tint:60 40 20;--shadow:0 1px 0 #ffffffe6 inset, 0 18px 40px -22px rgb(var(--shadow-tint) / .35), 0 2px 6px -2px rgb(var(--shadow-tint) / .12);--r-lg:28px;--r-md:18px;--r-sm:11px;--ease:cubic-bezier(.2, .8, .2, 1);--z-grain:1;--z-ui:2;--z-status:3;--z-skip:10;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(1200px 600px at 12% -10%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%), radial-gradient(900px 500px at 110% 110%, #ffffffb3, transparent 60%), var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background-color .4s var(--ease);font-family:Anuphan,system-ui,sans-serif;font-size:15px;line-height:1.5}.grain{z-index:var(--z-grain);pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.skip{z-index:var(--z-skip);background:var(--ink);color:var(--paper);border-radius:var(--r-sm);transition:top .2s var(--ease);padding:8px 14px;text-decoration:none;position:absolute;top:-60px;left:16px}.skip:focus{top:12px}.top{z-index:var(--z-ui);justify-content:space-between;align-items:center;gap:16px;max-width:1480px;margin:0 auto;padding:20px 28px 4px;display:flex;position:relative}.brand{align-items:center;gap:12px;display:flex}.mark{background:var(--accent);width:40px;height:40px;box-shadow:0 6px 16px -8px color-mix(in oklab, var(--accent) 70%, black);transition:background-color .4s var(--ease);border-radius:12px;place-items:center;display:grid}.mark svg{width:26px;height:26px;fill:var(--accent-ink)}.brand h1{letter-spacing:-.02em;margin:0;font-family:Mitr,sans-serif;font-size:22px;font-weight:700;line-height:1.05}.brand p{color:var(--ink-mute);margin:1px 0 0;font-size:13px}.live{background:var(--card);box-shadow:var(--shadow);color:var(--ink-soft);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:8px;padding:7px 14px 7px 12px;font-size:13px;font-weight:500;display:inline-flex}.live .dot{background:#b9b3a8;border-radius:50%;width:8px;height:8px;transition:background-color .3s}.live[data-face="1"] .dot{background:#2f9e5b;animation:2s infinite pulse;box-shadow:0 0 #2f9e5b80}@keyframes pulse{70%{box-shadow:0 0 0 7px #2f9e5b00}to{box-shadow:0 0 #2f9e5b00}}.studio{z-index:var(--z-ui);grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px;max-width:1480px;margin:0 auto;padding:16px 28px 32px;display:grid;position:relative}.studio>*,.panel>*{min-width:0}.stage{place-items:start center;display:grid;position:relative}#out{aspect-ratio:16/9;border-radius:var(--r-lg);width:min(100%,177.778dvh - 266.667px);height:auto;box-shadow:0 30px 60px -30px rgb(var(--shadow-tint) / .45), 0 4px 14px -6px rgb(var(--shadow-tint) / .2);background:#26231f;border:6px solid #fff;display:block}.status{z-index:var(--z-status);border-radius:var(--r-md);background:var(--card);width:max-content;max-width:calc(100% - 48px);box-shadow:var(--shadow);pointer-events:none;align-items:center;gap:10px;padding:14px 20px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.status[data-kind=""]{display:none}.status .msg{text-wrap:balance;max-width:34ch;font-weight:500}.status .spin{border:2.5px solid color-mix(in oklab, var(--accent-line) 20%, transparent);border-top-color:var(--accent-line);border-radius:50%;flex:none;width:18px;height:18px;animation:.8s linear infinite spin}.status .alert{fill:none;stroke:#c2410c;stroke-width:2px;stroke-linecap:round;flex:none;width:22px;height:22px;display:none}.status[data-kind=error] .spin{display:none}.status[data-kind=error] .alert{display:block}@keyframes spin{to{transform:rotate(360deg)}}.panel{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);gap:22px;padding:20px 18px 18px;display:grid}.panel h2{letter-spacing:.01em;color:var(--ink-soft);margin:0 0 10px 4px;font-family:Mitr,sans-serif;font-size:15px;font-weight:500}.tray{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.char{border-radius:var(--r-md);background:var(--paper);color:var(--ink-soft);font:inherit;cursor:pointer;transition:transform .2s var(--ease), background-color .2s, box-shadow .2s, color .2s;border:0;justify-items:center;gap:2px;padding:8px 4px 9px;font-size:13px;font-weight:500;display:grid;position:relative}.char canvas{width:72px;height:72px;display:block}.char .thumb-icon{width:72px;height:72px;color:var(--ink-mute);place-items:center;display:grid}.char kbd{position:absolute;top:6px;right:6px}.char:hover{background:var(--paper-deep);transform:translateY(-1px)}.char:active{transform:scale(.97)}.char[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);box-shadow:0 0 0 2px var(--accent-line), 0 12px 22px -14px color-mix(in oklab, var(--accent) 80%, black);transform:translateY(-2px)}.panel h2 kbd{vertical-align:1px;margin-left:6px}.swatches{flex-wrap:wrap;gap:8px;padding-left:4px;display:flex}.swatch{border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);background:var(--paper);width:30px;height:30px;color:var(--ink-soft);cursor:pointer;transition:transform .2s var(--ease), box-shadow .2s;border-radius:50%;place-items:center;padding:0;display:grid}.swatch:hover{transform:translateY(-1px)}.swatch[aria-pressed=true],.swatch.custom[data-active]{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent-line)}.swatch.custom{appearance:none;background:conic-gradient(#f66,#fd5,#6d6,#5cf,#a7f,#f6c,#f66);overflow:hidden}.swatch.custom::-webkit-color-swatch-wrapper{padding:0}.swatch.custom::-webkit-color-swatch{opacity:0;border:0;border-radius:50%}.swatch.custom[data-active]::-webkit-color-swatch{opacity:1}.swatch.custom::-moz-color-swatch{border:0;border-radius:50%}.hint{color:var(--ink-mute);margin:8px 0 0 4px;font-size:12px}.toggles{gap:4px;margin-bottom:12px;display:grid}.toggle{border-radius:var(--r-sm);width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:22px 1fr auto 38px;align-items:center;gap:10px;padding:9px 10px;transition:background-color .2s;display:grid}.toggle:hover{background:var(--paper)}.toggle:active{transform:scale(.99)}.toggle>svg,.select>svg,.primary>svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.toggle .label{font-weight:500;line-height:1.25;display:grid}.toggle small{color:var(--ink-mute);font-size:12px;font-weight:400}.sw{background:var(--line);width:38px;height:22px;transition:background-color .25s var(--ease);border-radius:999px;position:relative}.sw:after{content:"";width:16px;height:16px;box-shadow:0 1px 3px rgb(var(--shadow-tint) / .3);transition:transform .25s var(--ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px}.toggle[aria-checked=true] .sw{background:var(--accent-line)}.toggle[aria-checked=true] .sw:after{transform:translate(16px)}.select{border-radius:var(--r-sm);background:var(--paper);color:var(--ink-soft);align-items:center;gap:10px;padding:0 12px;transition:background-color .2s;display:flex;position:relative}.select:hover{background:var(--paper-deep)}.select select{appearance:none;min-width:0;color:var(--ink);font:inherit;cursor:pointer;text-overflow:ellipsis;background:0 0;border:0;flex:1;padding:12px 22px 12px 0;font-weight:500}.select select:focus{outline:none}.select .chev{pointer-events:none;width:18px;height:18px;position:absolute;right:10px}.select:focus-within{box-shadow:0 0 0 2px var(--accent-line)}.cta{gap:8px;display:grid}.primary{border-radius:var(--r-md);background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;box-shadow:0 10px 22px -12px rgb(var(--shadow-tint) / .7);transition:transform .2s var(--ease), background-color .2s;border:0;justify-content:center;align-items:center;gap:10px;padding:14px 16px;font-size:15px;font-weight:600;display:flex}.primary:hover{background:#2c2a26;transform:translateY(-1px)}.primary:active{transform:scale(.98)}.primary kbd{color:var(--paper);background:#ffffff1f;border-color:#fff3}.hint{color:var(--ink-mute);text-wrap:pretty;margin:0 4px;font-size:12px;line-height:1.5}kbd{border:1px solid var(--line);background:var(--card);color:var(--ink-mute);border-bottom-width:2px;border-radius:6px;padding:3px 6px 4px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;line-height:1}.secondary{border-radius:var(--r-md);background:var(--accent-soft);width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .2s var(--ease), background-color .2s;border:0;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:12px;font-weight:600;display:grid}.secondary:hover{background:color-mix(in oklab, var(--accent) 22%, var(--card));transform:translateY(-1px)}.secondary:active{transform:scale(.98)}.secondary>svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.secondary span{line-height:1.3;display:grid}.secondary small{color:var(--ink-soft);font-size:12px;font-weight:400}.guide{z-index:20;position:fixed;inset:0}.guide[hidden]{display:none}.guide-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s var(--ease);background:#281e1447;position:absolute;inset:0}.guide-sheet{background:var(--card);border-radius:var(--r-lg);width:min(480px,100vw - 24px);box-shadow:0 30px 80px -30px rgb(var(--shadow-tint) / .55);transition:transform .38s var(--ease);grid-template-rows:auto auto 1fr;display:grid;position:absolute;top:12px;bottom:12px;right:12px;overflow:hidden;transform:translate(calc(100% + 24px))}.guide.open .guide-backdrop{opacity:1}.guide.open .guide-sheet{transform:none}.guide-head{justify-content:space-between;align-items:center;padding:18px 18px 6px 22px;display:flex}.guide-head h2{letter-spacing:-.01em;margin:0;font-family:Mitr,sans-serif;font-size:20px;font-weight:700}.guide-x{background:var(--paper);width:36px;height:36px;color:var(--ink-soft);cursor:pointer;transition:background-color .2s, transform .2s var(--ease);border:0;border-radius:50%;place-items:center;display:grid}.guide-x:hover{background:var(--paper-deep)}.guide-x:active{transform:scale(.94)}.guide-x svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:18px;height:18px}.guide-tabs{border-bottom:1px solid var(--line);gap:6px;padding:8px 18px 12px;display:flex}.guide-tab{background:var(--paper);color:var(--ink-soft);font:inherit;cursor:pointer;transition:background-color .2s, color .2s, transform .2s var(--ease);border:0;border-radius:999px;padding:8px 16px;font-weight:600}.guide-tab:hover{background:var(--paper-deep)}.guide-tab:active{transform:scale(.97)}.guide-tab[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}.guide-body{scroll-behavior:smooth;padding:16px 18px 28px;overflow-y:auto}.guide-body:focus{outline:none}.guide-body h3{color:var(--ink-soft);margin:22px 4px 10px;font-family:Mitr,sans-serif;font-size:15px;font-weight:500}.guide-intro{border-radius:var(--r-md);background:var(--accent-soft);justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;display:flex}.guide-intro p{margin:0}.guide-intro .kind{font-family:Mitr,sans-serif;font-size:16px;font-weight:500}.guide-intro .tagline{color:var(--ink-soft);text-wrap:pretty;font-size:13px}.guide-use{background:var(--accent);color:var(--accent-ink);font:inherit;cursor:pointer;transition:transform .2s var(--ease), filter .2s;border:0;border-radius:999px;flex:none;align-items:center;gap:6px;padding:9px 14px;font-size:13px;font-weight:600;display:inline-flex}.guide-use:hover{filter:brightness(1.05);transform:translateY(-1px)}.guide-use:active{transform:scale(.97)}.guide-use svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.moves{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.move{border-radius:var(--r-md);background:var(--paper);grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px 8px 8px;display:grid}.move canvas{background:radial-gradient(circle at 50% 60%,#fff 0 45%,#0000 70%);border-radius:14px;display:block}.move h4{margin:0 0 2px;font-size:14px;font-weight:600;line-height:1.3}.move-big{grid-column:1/-1;grid-template-columns:132px minmax(0,1fr);padding:10px 16px 10px 10px}.move-big h4{font-family:Mitr,sans-serif;font-size:16px;font-weight:500}.steps{color:var(--ink-soft);gap:2px;margin:0;padding:0;font-size:13px;list-style:none;display:grid}.move-big .steps{counter-reset:s;font-size:14px}.move-big .steps li{counter-increment:s}.move-big .steps li:before{content:counter(s);background:var(--accent);width:18px;height:18px;color:var(--accent-ink);vertical-align:1px;border-radius:50%;place-items:center;margin-right:6px;font-size:11px;font-weight:600;display:inline-grid}.chip{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line);border-radius:6px;margin:0 2px;padding:0 7px;font-size:12px;font-weight:500;display:inline-block}.result{color:var(--ink);text-wrap:pretty;margin:6px 0 0;font-size:12.5px;line-height:1.45}.basics{gap:4px;margin:0;display:grid}.basics div{border-radius:var(--r-sm);background:var(--paper);justify-content:space-between;gap:12px;padding:9px 12px;font-size:13.5px;display:flex}.basics dt{color:var(--ink-soft)}.basics dd{text-align:right;margin:0;font-weight:600}.keys{color:var(--ink-soft);flex-wrap:wrap;gap:8px 14px;margin:14px 4px 0;font-size:13px;display:flex}:is(button,select,a):focus-visible{outline:2.5px solid var(--accent-line);outline-offset:2px}@media (width<=1100px){.studio{grid-template-columns:minmax(0,1fr)}#out{width:100%}.panel{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.panel>section:first-child{grid-column:1/-1}.tray{scroll-snap-type:x mandatory;grid-template-columns:none;grid-auto-columns:96px;grid-auto-flow:column;padding:4px 4px 8px;overflow-x:auto}.char{scroll-snap-align:start}}@media (width<=640px){.moves{grid-template-columns:minmax(0,1fr)}.move-big{grid-template-columns:112px minmax(0,1fr)}.top,.studio{padding-left:16px;padding-right:16px}.panel{grid-template-columns:minmax(0,1fr)}.brand p{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}body.clean{background:#0e0d0c;overflow:hidden}body.clean :is(.top,.panel,.grain,.skip,.guide){display:none}body.clean .studio{max-width:none;padding:0;display:block}body.clean #out{aspect-ratio:auto;object-fit:contain;width:100vw;height:100dvh;box-shadow:none;background:#0e0d0c;border:0;border-radius:0}