:root{--bg: #f7f1e3;--surface: #fffaf0;--ink: #1d3b2f;--muted: #5b6b62;--accent: #a7741d;--line: #e2d5b6;--primary: #1d3b2f;--on-primary: #fffaf0;--radius: 14px;font-family:Plus Jakarta Sans,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);min-height:100dvh}button,input{font:inherit;color:inherit}.page{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}.head{text-align:center;margin:4px 0 14px}.head h1{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:-.01em}.head p{margin:4px auto 0;max-width:34ch;color:var(--muted);font-size:.92rem;line-height:1.45}.preview{display:flex;justify-content:center}.preview canvas{display:block;width:auto;height:auto;max-width:100%;max-height:46vh;max-height:46dvh;aspect-ratio:1080 / 1350;border-radius:12px;box-shadow:0 10px 30px -12px #1d3b2f73,0 0 0 1px #1d3b2f14;background:#0f2236}.controls{margin-top:18px;display:grid;gap:14px}.gaya{border:0;margin:0;padding:0;min-width:0}.gaya legend,.field>span{font-size:.85rem;font-weight:700;margin-bottom:6px;padding:0}.gaya-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gaya-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 10px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-weight:600;font-size:.92rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,box-shadow .15s}.gaya-btn[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.swatch{width:20px;height:20px;border-radius:50%;border:3px solid;flex:none}.field{display:grid}.field input{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:16px}.field input::placeholder{color:#9aa49d}.field input:focus{outline:none;border-color:var(--ink)}button:focus-visible,.gaya-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.btn{min-height:52px;border-radius:var(--radius);font-weight:700;font-size:1rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s,opacity .15s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:progress}.btn-primary{background:var(--primary);color:var(--on-primary);border:0}.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.note{margin:0;text-align:center;font-size:.8rem;color:var(--muted)}.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,16px);max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--on-primary);font-size:.9rem;font-weight:600;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%)}.foot{margin-top:28px;text-align:center;font-size:.8rem;color:var(--muted)}.foot p{margin:2px 0}@media (prefers-reduced-motion: reduce){*{transition:none!important}}