:root{color-scheme:dark;--bg:#05080c;--panel:#11191ee8;--line:#a0c0cc30;--ink:#e6eef1;--muted:#8499a5;--mint:#9ae9c8;font:13px/1.6 Arial,"PingFang TC","Microsoft JhengHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);height:100dvh;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:7px 12px;transition:background .18s,border-color .18s,color .18s}button:hover{background:#9ae9c80d;border-color:#9ae9c888;color:var(--mint)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}.icon{width:18px;height:18px;flex-shrink:0}button[aria-pressed=true],.accent{color:var(--mint);border-color:#9ae9c880}a{color:inherit;text-decoration:none}.topbar{height:86px;display:flex;align-items:center;gap:30px;padding:0 32px;border-bottom:1px solid var(--line);background:#0b1015;position:relative;z-index:5}.brand{display:flex;gap:20px;align-items:center;padding-right:30px;border-right:1px solid var(--line);font:20px/1.5 var(--display);letter-spacing:3px}.brand small{display:block;font:9px/1.5 monospace;letter-spacing:2px}.title{min-width:0}h1{font:clamp(15px,2vw,26px)/1.5 var(--display);font-weight:400;margin:0;white-space:nowrap}.title p{font:9px/1.5 monospace;letter-spacing:2px;color:var(--muted);margin:3px 0 0}.topbar nav{margin-left:auto;display:flex;gap:12px;align-items:center}.topbar button{border-color:transparent;white-space:nowrap}.topbar .accent{border-color:#9ae9c880}#stage{height:calc(100dvh - 86px);position:relative;isolation:isolate;overflow:hidden}#canvas{display:block;width:100%;height:100%;touch-action:none}.tools{position:absolute;top:32px;left:24px;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:9px;backdrop-filter:blur(18px);width:70px}.tools button{height:46px;padding:10px;border-color:transparent}.tools button[aria-pressed=true]{background:var(--mint);color:#0b2720}.tools .icon{width:23px;height:23px}.tools small{font-size:10px;text-align:center;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:2px}.panel{position:absolute;top:32px;right:24px;width:272px;padding:18px;background:var(--panel);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:9px;max-height:calc(100% - 132px);overflow-y:auto;scrollbar-width:thin}.panel-heading,.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading h2{font-size:17px;font-weight:500;letter-spacing:2px;margin:0}.panel-heading button{padding:0;min-height:28px;width:28px;border:0}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:22px 0}.presets button{font-size:12px;padding:7px 2px;white-space:nowrap}.presets [aria-pressed=true]{background:var(--mint);color:#123126}.slider{display:grid;grid-template-columns:1fr auto;gap:12px 10px;margin:0 0 25px}.slider span{letter-spacing:1px}.slider output{font-family:monospace;color:#d6e9ed}input[type=range]{grid-column:1/-1;appearance:none;height:3px;background:linear-gradient(to right,var(--mint) var(--fill),#56636b var(--fill));cursor:pointer;width:100%;margin:4px 0 0}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:2px solid var(--mint);background:#dbfff1;border-radius:50%}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid var(--mint);background:#dbfff1;border-radius:50%}.color-section{border-top:1px solid var(--line);padding-top:18px}.swatches{display:flex;gap:15px;margin:13px 0 22px}.swatches button{min-height:28px;width:28px;background:var(--swatch);padding:0;border:0;border-radius:3px}.swatches button[aria-pressed=true]{outline:1px solid var(--mint);outline-offset:4px}.actions{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}.actions button{font-size:12px;padding:6px}.node-actions{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px}.node-actions button{font-size:10px;padding:3px 6px;min-height:28px}#nodes{position:absolute;inset:0;pointer-events:none}.node{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;min-height:46px;border-radius:50%;border:1px solid #c4fff340;background:#05121c33;pointer-events:auto;touch-action:none;cursor:grab;box-shadow:0 0 0 6px #90cfbf06;color:#dafff0}.node::before{content:'';position:absolute;inset:-8px;border:1px dashed #a0dbce30;border-radius:50%}.node.selected{border-color:#b8ffe9;box-shadow:0 0 25px #70dfb72b}.node:active{cursor:grabbing}.node small{position:absolute;bottom:55px;left:50%;white-space:nowrap;font:9px/1.5 monospace;color:#b4d2cc;transform:translateX(-50%);padding:3px 6px;background:#08131bb8;border:1px solid #aacbbc25;border-radius:3px;pointer-events:none}.bottom{position:absolute;inset:auto 24px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;pointer-events:none}.bottom>*{pointer-events:auto}.hint{color:#9eafb7;font-size:10px;max-width:290px;letter-spacing:.7px}.seed{font:10px monospace;letter-spacing:2px;color:#a5b9bd;margin-left:auto}.playback{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:7px 18px;border:1px solid var(--line);border-radius:30px;background:var(--panel);backdrop-filter:blur(12px);white-space:nowrap}.playback button{border:0;padding:4px;min-height:28px}.live{border-left:1px solid var(--line);padding-left:18px;display:flex;align-items:center;gap:8px;font-size:12px}.live i{width:6px;height:6px;background:var(--mint);border-radius:50%}.paused .live i{background:#72858d}#status{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);background:#15252cf5;border:1px solid var(--line);padding:12px 20px;border-radius:6px;max-width:min(90vw,650px);z-index:20;font-size:12px;margin:0;pointer-events:none}#status:empty{display:none}dialog{background:#10191f;color:var(--ink);border:1px solid #709b9155;border-radius:12px;width:min(570px,calc(100vw - 28px));max-height:85dvh;padding:28px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}.dialog-heading h2{margin:0;font-size:20px;font-weight:400}.dialog-heading button{border:0;padding:4px}.eyebrow{font:11px/1.8 var(--display);color:var(--mint);margin-top:28px}.help-body p{color:#b4c4cc;margin:18px 0}.help-body strong{color:#dfffee;font-weight:400}.technical,.export-detail{border-top:1px solid var(--line);padding-top:15px;font:11px/1.8 monospace;color:var(--muted)}dialog>p{font-size:12px;color:var(--muted)}.export-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.export-options button{padding:20px 8px;display:flex;flex-direction:column;gap:10px}.export-options strong{font:14px var(--display);font-weight:400}.export-options span{font-size:10px;color:var(--muted)}[hidden]{display:none!important}
@media(min-width:1700px){.panel{right:36px;top:40px;width:290px}.tools{left:36px;top:40px}}@media(max-width:1100px){.topbar{gap:20px;padding:0 20px}.brand{padding-right:20px;font-size:16px}.topbar nav{gap:3px}.topbar nav button{padding:7px 9px}#help span:not(.icon){display:none}.hint{display:none}.panel{width:246px;right:18px}.tools{left:18px}.seed{font-size:9px}.bottom{bottom:20px}}
@media(max-width:650px){.topbar{height:100px;padding:12px 16px;gap:14px;align-items:flex-start;flex-wrap:wrap}.brand{font-size:15px;padding-right:14px;gap:10px}.brand>.icon{width:14px}.brand small{font-size:6px}.title h1{font-size:12px;margin-top:1px}.title p{font-size:7px;letter-spacing:1px}.topbar nav{position:absolute;right:12px;bottom:6px}.topbar nav button{min-height:30px;font-size:11px}.topbar nav .icon{height:14px;width:14px}#stage{height:calc(100dvh - 100px)}.tools{left:12px;top:16px;width:51px;padding:5px;gap:4px}.tools button{height:38px;min-height:38px;padding:7px}.tools .icon{height:21px;width:21px}.tools small{font-size:9px}.panel{right:12px;top:16px;width:218px;padding:12px;max-height:calc(100% - 100px)}.panel-heading h2{font-size:13px}.presets{margin:15px 0}.presets button{font-size:10px;min-height:32px}.slider{font-size:11px;gap:8px;margin-bottom:20px}.color-section{padding-top:13px;font-size:11px}.swatches{gap:16px;margin:12px 0 18px}.swatches button{width:24px;min-height:24px}.actions button{font-size:10px}.actions .icon{width:14px}.bottom{inset:auto 12px 16px;justify-content:center}.playback{padding:6px 13px;gap:12px;position:relative;left:auto;transform:none}.live{padding-left:12px;font-size:11px}.seed{display:none}.node{width:38px;height:38px;min-height:38px}.node small{bottom:46px}.export-options{grid-template-columns:1fr}.export-options button{display:grid;grid-template-columns:22px 70px 1fr;gap:12px;padding:14px}.export-options span{text-align:left}dialog{padding:22px}#status{bottom:86px}}

/* Keep the primary controls visible on a standard 720px-tall desktop. */
@media(min-width:651px){.panel{padding:16px}.presets{margin:14px 0}.slider{margin-bottom:16px;gap:8px 10px}.color-section{padding-top:12px}.swatches{margin:10px 0 14px}.node-actions{margin-top:10px;padding-top:8px}}

.custom-color{display:grid;grid-template-columns:1fr 32px 84px;align-items:center;gap:8px;margin:0 0 15px;font-size:11px;color:var(--muted)}.custom-color input{min-width:0;height:30px;color:var(--ink);border:1px solid var(--line);border-radius:4px;background:#090f15}.custom-color input[type=color]{width:32px;padding:2px;cursor:pointer}.custom-color input[type=text]{width:84px;padding:5px 7px;font:11px monospace}.custom-color input[aria-invalid=true]{border-color:#ff887d}.custom-color input:disabled{opacity:.4;cursor:default}