:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d1015;--bg-glow:radial-gradient(1200px 700px at 50% -10%, #1b2130 0%, transparent 60%);--panel:#161b23;--panel-2:#1e2531;--panel-3:#262f3d;--text:#e9edf3;--text-dim:#98a3b3;--accent:#ff5468;--accent-2:#ff8a3d;--accent-contrast:#fff;--border:#2a3341;--shadow:0 14px 34px #00000073;--shadow-soft:0 4px 14px #00000052;--overlay:#07090dbd;--radius-lg:16px;--radius-md:12px;--radius-sm:9px}html.light,:root.light{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f3f5f9;--bg-glow:radial-gradient(1200px 700px at 50% -10%, #fff 0%, transparent 60%);--panel:#fff;--panel-2:#eef1f6;--panel-3:#e2e7ef;--text:#171c24;--text-dim:#5d6979;--accent:#ff3b57;--accent-2:#ff7a2f;--accent-contrast:#fff;--border:#dce2eb;--shadow:0 14px 34px #18233724;--shadow-soft:0 4px 14px #1823371a;--overlay:#eef1f6c7}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg-glow), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;background-attachment:fixed;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Apple SD Gothic Neo,Malgun Gothic,Noto Sans KR,sans-serif;font-size:15px;line-height:1.45;overflow:hidden}#app{height:100vh;flex-direction:row;align-items:stretch;gap:18px;height:100dvh;padding:18px;display:flex}.stage{border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--border);min-width:0;box-shadow:var(--shadow-soft);flex:auto;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.stage canvas{touch-action:none;max-width:100%;height:auto;display:block}.settings{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);width:340px;box-shadow:var(--shadow);overscroll-behavior:contain;flex-direction:column;flex:0 0 340px;align-self:stretch;gap:12px;padding:16px;display:flex;overflow-y:auto}.settings-toggle{width:100%;font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;justify-content:space-between;align-items:center;padding:10px 12px;font-weight:700;transition:background .18s,transform .12s;display:flex}.settings-toggle:hover{background:var(--panel-3)}.settings-toggle .arrow{color:var(--text-dim);font-size:.75em;transition:transform .2s}.settings-toggle.collapsed .arrow{transform:rotate(-90deg)}.settings:has(#settings-body.collapsed) .settings-toggle .arrow{transform:rotate(-90deg)}.collapsible{flex-direction:column;gap:12px;display:flex}.collapsible.collapsed{display:none}.row{align-items:center;gap:8px;display:flex}.row label{color:var(--text-dim);flex:none;font-size:.9em;font-weight:600}.row .count{color:var(--text-dim);white-space:nowrap;margin-left:auto;font-size:.85em}select,input[type=number],textarea{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;transition:border-color .16s,box-shadow .16s,background .16s}select{cursor:pointer;flex:auto;min-width:0}input[type=number]{text-align:center;width:62px}textarea{resize:vertical;width:100%;min-height:104px;line-height:1.5}select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);outline:none}button:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);outline:none}.seg{flex-wrap:wrap}.seg button,.seg input[type=number]{flex:none}.row-range{background:var(--panel-2);border:1px dashed var(--border);border-radius:var(--radius-sm);align-items:center;gap:8px;padding:8px 10px;display:none}.row-range.active{display:flex}.row-range span{color:var(--text-dim)}button{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;padding:9px 14px;font-weight:600;transition:background .16s,border-color .16s,color .16s,transform .1s,opacity .16s}button:hover:not(:disabled){background:var(--panel-3)}button:active:not(:disabled){transform:translateY(1px)}button.active{color:var(--accent-contrast);background:linear-gradient(135deg, var(--accent), var(--accent-2));border-color:#0000}button:disabled{opacity:.45;cursor:not-allowed}.row-dark label{cursor:pointer}.row-dark input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;margin-left:auto}.hint{color:var(--text-dim);background:var(--panel-2);border-radius:var(--radius-sm);border:1px solid var(--border);margin:0;padding:8px 10px;font-size:.82em;line-height:1.5}.actions{gap:10px;margin-top:auto;display:flex}.actions button{flex:1 1 0;padding:12px 16px;font-size:1.02em}#btn-start{color:var(--accent-contrast);background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent);border-color:#0000}#btn-start:hover:not(:disabled){filter:brightness(1.06);background:linear-gradient(135deg, var(--accent), var(--accent-2))}#btn-start.running{animation:1.1s ease-in-out infinite start-pulse}@keyframes start-pulse{0%,to{box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent)}50%{box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 0 10px transparent}}#result{z-index:20;background:var(--overlay);-webkit-backdrop-filter:blur(6px);justify-content:center;align-items:center;padding:20px;animation:.22s fade-in;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}#result.hidden{display:none}.result-card{background:var(--panel);border:1px solid var(--border);width:min(560px,100%);max-height:100%;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;align-items:center;gap:16px;padding:26px 24px;animation:.28s cubic-bezier(.2,.9,.3,1.2) pop-in;display:flex;overflow:auto}.result-title{letter-spacing:.16em;color:var(--text-dim);text-transform:uppercase;margin:0;font-size:1.05em;font-weight:700}#result-list{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;display:flex}#result-list>*,.chip{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;align-items:center;gap:9px;padding:10px 18px;font-size:1.2em;font-weight:800;animation:.3s cubic-bezier(.2,.9,.3,1.2) backwards pop-in;display:inline-flex}#result-list .swatch,#result-list .dot,#result-list .color,#result-list [class*=swatch]{border-radius:50%;flex:none;width:15px;height:15px;box-shadow:inset 0 0 0 1px #00000024}#btn-again{min-width:140px;color:var(--accent-contrast);background:linear-gradient(135deg, var(--accent), var(--accent-2));border-color:#0000;padding:12px 20px;font-size:1.02em}#toast{left:50%;bottom:max(24px, env(safe-area-inset-bottom));z-index:60;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;transform:translate(-50%)}.toast{color:var(--text);background:var(--panel-3);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:999px;padding:10px 18px;font-size:.92em;font-weight:600;animation:.26s both toast-in,.3s 2.4s both toast-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.9)translateY(6px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes toast-in{0%{opacity:0;transform:translateY(14px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toast-out{to{opacity:0;transform:translateY(10px)scale(.96)}}.hidden{display:none}@media (max-width:820px){#app{flex-direction:column;gap:12px;padding:12px}.stage{flex:auto;min-height:42vh}.settings{border-radius:var(--radius-lg);flex:none;order:2;width:100%;max-height:48vh}.actions{background:linear-gradient(to top, var(--panel) 70%, transparent);padding-top:4px;position:sticky;bottom:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}