
:root{color-scheme:dark;--bg:#080c15;--surface:#111928;--surface2:#182338;--border:#2c394e;--txt:#eef2fb;--muted:#98a8bf;--subtle:#71839d;--accent:#bda0f7;--mint:#91f0d2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 55% 60% at 38% 5%,#192239 0%,transparent 73%),#080c15;color:var(--txt);font:13px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.app{max-width:1600px;margin:auto;padding:24px clamp(15px,3vw,42px) 26px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.identity{display:flex;align-items:center;gap:12px}.logo{height:41px;width:41px;border:1px solid #5c5778;border-radius:12px;background:linear-gradient(135deg,#29213f,#121b2a);display:grid;place-items:center;box-shadow:0 0 30px #b48be219}.logo svg{width:27px}.wordmark{font-size:19px;letter-spacing:.245em;font-weight:700;line-height:1.15}.tagline{font-size:10px;color:#9daec7;font-weight:700;letter-spacing:.18em;margin-top:4px}.top-actions{display:flex;gap:10px;align-items:center}.version{color:#8b9ab1;font-size:10px;letter-spacing:.18em;font-weight:700;margin-right:8px}.tbutton{height:36px;border:1px solid #3b4660;border-radius:10px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#19243a;color:#dce5f5;font-size:12px;font-weight:700}.tbutton:hover,.small:hover{background:#2b3b55}.tbutton svg{width:16px;height:16px}.tbutton.cta{background:#cfb7fa;color:#181329;border-color:#cfb7fa}.layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:19px;align-items:start}.left{min-width:0;display:flex;flex-direction:column;gap:16px}.stage{height:clamp(460px,calc(100vh - 240px),800px);min-height:460px;position:relative;border:1px solid #35445f;background:#040812;border-radius:20px;overflow:hidden;box-shadow:0 22px 85px #0009;isolation:isolate}.stage:after{pointer-events:none;content:"";position:absolute;inset:0;box-shadow:inset 0 0 85px #02050aaa;border-radius:inherit}#art{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.stage.is-paint #art{cursor:crosshair}.stagehead{position:absolute;top:20px;left:23px;right:20px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}.eyebrow,.label-sm{font-size:10px;font-weight:700;letter-spacing:.18em;color:#a5b5cf}.artname{margin-top:5px;font-size:23px;font-weight:700;letter-spacing:-.035em;text-shadow:0 3px 18px #000b}.stageicons{pointer-events:auto;display:flex;gap:7px}.iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#e8edfa;background:#121d30bb;border:1px solid #7185a153;backdrop-filter:blur(12px)}.iconbtn:hover{background:#354460cb}.iconbtn svg{width:18px;height:18px}.stagefoot{position:absolute;bottom:18px;left:19px;right:19px;display:flex;gap:12px;align-items:center;justify-content:space-between;z-index:3;pointer-events:none}.tip,.statuspill{background:#09101cc9;border:1px solid #7891b22e;border-radius:9px;padding:9px 12px;font-size:11px;color:#c0cada;backdrop-filter:blur(12px)}.tip b{font-weight:700;color:#f5f8ff}.statuspill{font-size:10px;font-weight:700;letter-spacing:.12em;color:#dcbeff;display:none}.statuspill.visible{display:block}.presets{background:#101827d9;border:1px solid var(--border);border-radius:16px;padding:16px 17px}.blocktitle{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.hint{font-size:11px;color:#7f90a8}.presetlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.preset{height:42px;padding:0 8px;display:flex;justify-content:center;align-items:center;gap:7px;color:#c1cee2;background:#19253a;border:1px solid #33415a;border-radius:10px;font-weight:700;font-size:11px;white-space:nowrap}.preset:hover{border-color:#8b9dbb}.preset.active{border-color:#ba9bf4;background:#3a3155;color:white}.dot{height:9px;width:9px;border-radius:50%;flex:0 0 9px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 14px var(--c1)}.footnote{font-size:11px;color:#71829b;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:0 2px}.footnote b{color:#a3b0c4;font-weight:700}.panel{background:#111928ef;border:1px solid #2d3a50;border-radius:19px;overflow:hidden;min-width:0;box-shadow:0 15px 50px #0003}.panelhead{padding:20px 20px 15px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.panelhead h1{margin:0 0 4px;font-size:20px;letter-spacing:-.035em;line-height:1.2}.panelhead p{margin:0;font-size:12px;color:#9cacbf}.linkbtn{background:transparent;color:#c4a5f3;border:0;padding:3px;font-weight:700;font-size:11px}.linkbtn:hover{text-decoration:underline}.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #29364b;border-bottom:1px solid #29364b;background:#0d1524}.tab{background:transparent;color:#8f9fb6;border:0;border-bottom:2px solid transparent;padding:13px 2px 12px;font-size:11px;font-weight:700}.tab:hover{color:#e1e7f4}.tab.active{color:#e3c9ff;border-bottom-color:#c1a0f7;background:#1c253756}.tabpane{display:none;padding:18px 20px 1px;min-height:495px}.tabpane.active{display:block}.grouplabel{font-size:10px;font-weight:700;letter-spacing:.16em;color:#8d9db6;margin:0 0 18px}.divider{height:1px;background:#2a3649;margin:19px -20px 19px}.field{margin-bottom:19px}.fieldhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}.fieldhead label,.fieldhead span{font-size:12px;font-weight:700;color:#d4e0ef}output{font-size:12px;font-weight:700;color:#d1b5ff;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;-webkit-appearance:none;border-radius:99px;height:5px;width:100%;display:block;background:linear-gradient(to right,#9672d6 var(--p,50%),#39465a var(--p,50%));cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:#8964bd;border:3px solid #e3ccff;border-radius:50%;box-shadow:0 0 0 3px #8c6abc2c}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#8964bd;border:3px solid #e3ccff;border-radius:50%;box-shadow:0 0 0 3px #8c6abc2c}.segmented{display:grid;grid-template-columns:repeat(var(--count,3),1fr);gap:7px}.choice{min-height:36px;padding:7px 3px;background:#1c283d;color:#b6c7dd;border:1px solid #35445c;border-radius:9px;font-size:11px;font-weight:700}.choice.active{background:#3b3156;border-color:#aa8de5;color:#fff}.palettegrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.swatch{height:35px;padding:3px;border:1px solid #45536b;border-radius:9px;background:#1d293d}.swatch span{display:block;width:100%;height:100%;border-radius:5px;background:var(--grad)}.swatch.active{outline:2px solid #cfb5ff;outline-offset:2px;border-color:transparent}.paldesc{margin:10px 0 18px;color:#9bacbf;font-size:11px}.field-note{font-size:11px;color:#8294ad;line-height:1.5;margin:-9px 0 18px}.panelbottom{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:17px 20px 19px;border-top:1px solid #29364b}.action{border-radius:10px;height:43px;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px}.action svg{width:17px;height:17px}.secondary{background:#202c41;border:1px solid #41516b;color:#e1e9f7}.secondary:hover{background:#31415b}.primary{background:linear-gradient(115deg,#e1baff,#a7cbff);color:#171124;border:1px solid transparent}.primary:hover{filter:brightness(1.08)}.full{width:100%}.stack{display:flex;flex-direction:column;gap:9px;margin-bottom:17px}.actionrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}.mini{height:37px;border-radius:9px}.callout{border:1px solid #3a4961;border-radius:11px;background:#1b2739;padding:12px 13px;margin:0 0 20px;font-size:11px;color:#9fb1c9;line-height:1.6}.callout b{color:#e3ebf6}.choice svg{vertical-align:middle}.toggleline{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:10px}.toggleline b{color:#d6e1f1;font-size:12px;font-weight:700}.toggleline small{display:block;color:#8699b2;font-size:10px;margin-top:3px}.switch{border:1px solid #53627b;border-radius:99px;padding:2px;width:46px;height:25px;background:#243149;flex-shrink:0;position:relative}.switch:before{position:absolute;content:"";width:17px;height:17px;top:3px;left:4px;border-radius:50%;background:#aab7ce;transition:transform .16s}.switch.on{background:#604a84;border-color:#b89de5}.switch.on:before{transform:translateX(20px);background:#f0ddff}.select{width:100%;border:1px solid #3b4b65;border-radius:10px;padding:11px 12px;background:#1c293e;color:#e3edfb;font-size:12px}.savedlist{display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto;margin:12px 0 20px}.saveditem{display:flex;gap:9px;align-items:center;padding:8px 9px;background:#1c293b;border:1px solid #35445b;border-radius:10px}.saveditem .desc{min-width:0;flex:1}.saveditem b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saveditem small{color:#91a1b8;font-size:10px}.small{border:1px solid #43516a;background:#25334b;color:#dce5f4;font-size:10px;padding:7px 9px;border-radius:7px}.small.danger{color:#f2b7c6}.empty{padding:14px;color:#92a1b7;border:1px dashed #42516a;text-align:center;border-radius:9px;font-size:11px}.toast{position:fixed;bottom:23px;left:50%;z-index:40;transform:translate(-50%,15px);color:#f4f5fa;background:#27374d;border:1px solid #6f7997;padding:11px 17px;border-radius:12px;box-shadow:0 15px 50px #0007;max-width:calc(100% - 35px);pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;font-size:12px;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.stage:fullscreen{height:100vh;width:100vw;border:0;border-radius:0}.stage:fullscreen::after{border-radius:0}
@media(max-width:1130px){.layout{grid-template-columns:minmax(0,1fr) 328px}.stage{height:610px}.app{padding:19px}.preset{font-size:10px}}@media(max-width:790px){.layout{grid-template-columns:1fr}.stage{height:min(71vh,580px);min-height:360px}.tabpane{min-height:unset}.panelbottom{padding:15px 20px}.version{display:none}}@media(max-width:500px){.app{padding:14px 12px}.topbar{margin-bottom:15px}.wordmark{font-size:17px}.tagline{font-size:9px}.tbutton{padding:0 10px;font-size:11px}.top-actions .tbutton:first-child{display:none}.stage{height:59vh;min-height:340px;border-radius:15px}.stagehead{top:15px;left:14px;right:12px}.artname{font-size:19px}.stagefoot{bottom:12px;left:12px;right:12px}.tip{font-size:10px;padding:8px}.iconbtn{height:34px;width:34px}.presets{padding:13px 12px}.presetlist{grid-template-columns:repeat(2,minmax(0,1fr))}.preset{font-size:11px}.hint{display:none}.panelhead{padding:17px}.tabpane{padding:18px 17px 1px}.divider{margin-left:-17px;margin-right:-17px}.panelbottom{padding:15px 17px}.footnote{gap:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep Prism's dark drawing surface inside the shared suite shell. */
html body[data-jke-game-id="prism"]{color:var(--txt);font-family:var(--jke-font-ui),system-ui,sans-serif;--jke-suite-focus:#91f0d2}
.app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
@media(pointer:coarse){.iconbtn,.small,.choice,.tab,.tbutton,.action,.preset{min-height:48px}.swatch{min-height:40px}.switch{min-height:32px}.switch:before{top:6px}input[type=range]{height:24px;background-size:100% 5px;background-repeat:no-repeat;background-position:center}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}}
body[data-jke-device-profile="tablet"] .layout{grid-template-columns:minmax(0,1fr)}
body[data-jke-device-profile="tablet"] .stage{height:58vh;min-height:420px}
body[data-jke-device-profile="tablet"] .tabpane{min-height:unset}
body[data-jke-device-profile="tablet"] .panel{display:grid;grid-template-columns:1fr 1fr}
body[data-jke-device-profile="tablet"] .panelhead,body[data-jke-device-profile="tablet"] .tabs,body[data-jke-device-profile="tablet"] .tabpane,body[data-jke-device-profile="tablet"] .panelbottom{grid-column:1/-1}
@media(max-width:420px){.palettegrid{grid-template-columns:repeat(4,minmax(0,1fr))}.segmented{gap:4px}.choice{font-size:10px}}
