:root{--ink: #17142b;--panel: #1f1a3a;--dusk: #2d2552;--sakura: #ff8fb6;--paper: #f6f1ff}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:Zen Maru Gothic,system-ui,sans-serif;background:var(--ink);color:var(--paper)}.app{display:grid;grid-template-columns:1fr 360px;height:100%}.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,#6a3f86 0%,var(--dusk) 45%,var(--ink) 100%)}.stage canvas{display:block}.stage h1{position:absolute;top:20px;left:24px;margin:0;font-size:1.6rem;font-weight:700;pointer-events:none}.msg{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;margin:0;padding:0 12%;text-align:center;font-size:1.1rem;pointer-events:none}.actions{position:absolute;bottom:20px;left:24px;display:flex;gap:10px;flex-wrap:wrap}.panel{background:var(--panel);padding:22px 22px 40px;overflow-y:auto;display:flex;flex-direction:column;gap:22px}h2{margin:0 0 10px;font-size:1rem;font-weight:700;color:var(--sakura)}button,.file{font:inherit;font-weight:500;color:var(--paper);background:#2f2858;border:1.5px solid #463b7d;border-radius:999px;padding:7px 14px;cursor:pointer;display:inline-block}button:hover,.file:hover{border-color:var(--sakura)}button.on{background:var(--sakura);border-color:var(--sakura);color:var(--ink);font-weight:700}button:focus-visible,input:focus-visible,.file:focus-within{outline:2px solid var(--paper);outline-offset:2px}.file input{position:absolute;opacity:0;width:1px;height:1px}.chips{display:flex;flex-wrap:wrap;gap:8px}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px 8px;margin-bottom:12px}.swatches label{display:flex;align-items:center;gap:8px;font-size:.9rem}input[type=color]{width:34px;height:34px;padding:0;border:2px solid var(--paper);border-radius:50%;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}input[type=range]{width:100%;accent-color:var(--sakura)}.part{display:flex;align-items:center;gap:8px;font-size:.9rem;padding:3px 0}input[type=checkbox]{accent-color:var(--sakura)}@media(max-width:760px){.app{grid-template-columns:1fr;grid-template-rows:55vh 1fr}.stage h1{font-size:1.25rem}}
