:root{color-scheme:dark;--bg:#0b1012;--panel:#10171a;--line:#b0c4c329;--ink:#e2ebe9;--muted:#829793;--acid:#deff58;font:12px/1.5 Arial,"PingFang TC","Microsoft JhengHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);height:100dvh;display:grid;grid-template-rows:76px minmax(0,1fr) 66px;overflow:hidden}button,textarea,input,select{font:inherit;color:inherit}button{cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:3px;background:transparent;transition:background .15s,color .15s,border-color .15s}button:hover{background:#deff580c;border-color:#deff5870;color:var(--acid)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--acid);outline-offset:3px}button.primary{background:var(--acid);color:#142119;border-color:var(--acid)}button.primary:hover{background:#eeffa3}.icon{width:17px;height:17px;flex-shrink:0}a{color:inherit;text-decoration:none}.topbar{padding:0 26px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);z-index:8;background:var(--bg)}.brand{display:flex;align-items:center;gap:15px;font:15px var(--display);padding-right:24px;border-right:1px solid var(--line)}h1{font:clamp(12px,1.6vw,18px)/1.6 var(--display);font-weight:400;margin:0}.identity p{font:8px/1.5 monospace;letter-spacing:2px;color:var(--muted);margin:2px 0 0}nav{margin-left:auto;display:flex;align-items:center;gap:9px}#help{border-color:transparent}#toggle-controls{display:none}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:0}.sidebar{border-right:1px solid var(--line);padding:24px 24px 18px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3e534c transparent}.sidebar section{padding-bottom:21px;margin-bottom:20px;border-bottom:1px solid var(--line)}.section-label{font:9px/1.5 monospace;letter-spacing:1.3px;color:var(--muted);margin:0 0 14px;display:flex;justify-content:space-between}.section-label span{font:9px Arial;letter-spacing:1px}.text-label{font-size:15px;letter-spacing:1px;display:block;margin-bottom:12px}textarea{resize:vertical;min-height:94px;max-height:180px;width:100%;border:1px solid var(--line);border-radius:3px;padding:11px 12px;background:#080f11;font-size:16px;line-height:1.45;letter-spacing:1.3px;overflow:auto}.input-meta{font-size:9px;color:var(--muted);display:flex;justify-content:space-between;margin:6px 0 15px}#text-count{font-family:monospace}.font-row{display:grid;grid-template-columns:auto 1fr 30px;align-items:center;gap:8px}.font-row label,.select-row label{font-size:10px;color:#a8b8b4}.font-row select{min-width:0;width:100%;font-size:10px}.font-row button{padding:3px;min-height:30px;border:0}select{appearance:none;background:#151f21 url('/assets/select-chevron.svg') no-repeat right 8px center/11px;border:1px solid var(--line);border-radius:3px;padding:7px 23px 7px 9px}.rules{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:23px}.rules button{justify-content:flex-start;font-size:12px;min-height:39px}.rules button span{font:9px monospace;color:var(--muted)}.rules button[aria-pressed=true]{background:#deff580b;border-color:#deff5880;color:var(--acid)}.rules button[aria-pressed=true] span{color:#b9cc75}.slider{display:grid;grid-template-columns:1fr auto;gap:11px;font-size:10px;color:#abc0b8;margin:0 0 19px}.slider:last-child{margin-bottom:0}.slider output{font-family:monospace;color:#d5e6dd}.slider input{grid-column:1/-1;appearance:none;height:2px;width:100%;accent-color:var(--acid);background:#496056;cursor:pointer;margin:0}.slider input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:var(--acid)}.slider input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--acid)}.palettes{display:flex;gap:13px;margin-bottom:21px}.palettes button{height:38px;width:42px;padding:2px;border:0;background:var(--paper);color:var(--ink);font-size:22px;font-weight:bold}.palettes button[aria-pressed=true]{outline:1px solid var(--acid);outline-offset:4px}.select-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.select-row select{width:145px;font-size:11px}.check{display:flex;align-items:center;gap:7px;font-size:10px;color:#a2b6ac;margin-top:14px}.check input{accent-color:var(--acid)}.new{width:100%;font-size:12px;letter-spacing:1px}.privacy{font-size:9px;color:var(--muted);text-align:center;margin:12px 0 0}.specimen{min-width:0;min-height:0;display:flex;flex-direction:column;padding:20px 38px 16px;background:radial-gradient(ellipse at center,#19232077,transparent 65%)}.specimen-head,.specimen-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;font:9px/1.7 monospace;letter-spacing:1.5px;color:#8aa397}.specimen-head{margin-bottom:15px}#live-state{color:var(--acid)}body.paused #live-state{color:#91a69a}.paper-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 0 0}.poster-frame{height:100%;max-width:100%;aspect-ratio:var(--ratio,0.8);position:relative;box-shadow:0 12px 70px #0006;overflow:hidden;background:#deff58}.poster-frame canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.poster-frame canvas:active{cursor:grabbing}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#18221ae8;font-size:12px;letter-spacing:2px;color:var(--acid)}.specimen-caption{margin-top:13px;font-size:8px;letter-spacing:.8px}.specimen-caption span:last-child{font-family:Arial;letter-spacing:1px}footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:0 26px;background:var(--bg);z-index:8}.footer-brand{font:9px var(--display);color:#a5b9ab}.playback{display:flex;gap:12px;align-items:center}.playback button{border:0;font-size:11px}#seed{font:9px monospace;letter-spacing:1.5px;color:#8ea69a}#status{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);padding:11px 17px;background:#15231eee;border:1px solid var(--line);border-radius:4px;max-width:min(600px,90vw);font-size:11px;z-index:20;pointer-events:none;margin:0}#status:empty{display:none}dialog{background:#101b1b;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:25px;width:min(570px,calc(100vw - 28px));max-height:85dvh}dialog::backdrop{background:#000a;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.dialog-head h2{font:14px/1.7 var(--display);font-weight:400;margin:0}.dialog-head button{border:0;padding:3px}dialog p{font-size:12px;line-height:1.9;color:#b0c4ba;margin:16px 0}dialog .note{font-size:10px;color:#7f9e8d;border-top:1px solid var(--line);padding-top:17px}[hidden]{display:none!important}
@media(max-width:1100px){.workspace{grid-template-columns:260px minmax(0,1fr)}.sidebar{padding:21px 18px}.topbar{gap:18px;padding:0 20px}.brand{padding-right:18px}.specimen{padding-left:24px;padding-right:24px}.footer-brand{font-size:8px}#seed{font-size:8px}.playback{gap:7px}}
@media(max-width:850px){body{grid-template-rows:76px minmax(0,1fr) 62px}.workspace{display:block;position:relative}.specimen{height:100%;padding:18px 24px 14px}.sidebar{display:none;position:fixed;top:88px;left:16px;bottom:80px;width:286px;max-width:calc(100vw - 32px);border:1px solid var(--line);background:#101a1af5;backdrop-filter:blur(20px);z-index:10;border-radius:6px;box-shadow:0 15px 60px #0006}body.controls-open .sidebar{display:block}#toggle-controls{display:inline-flex}footer{padding:0 18px}.footer-brand{display:none}.playback{gap:4px}.topbar .brand{display:none}.topbar{gap:12px}.identity p{font-size:7px}h1{font-size:14px}nav{gap:5px}nav button{padding:7px 9px;font-size:11px}.specimen-caption{font-size:8px}}
@media(max-width:500px){body{grid-template-rows:98px minmax(0,1fr) 62px}.topbar{padding:10px 16px;align-items:flex-start;flex-wrap:wrap;gap:3px}.identity{width:100%}h1{font-size:13px}.identity p{font-size:6px;letter-spacing:1.8px}nav{position:absolute;right:14px;top:56px}nav button{min-height:30px;padding:5px 8px;font-size:10px}nav .icon{height:14px;width:14px}.specimen{padding:17px 18px 12px}.specimen-head{margin-bottom:13px;font-size:8px}.specimen-caption span:last-child{font-size:8px}#seed{font-size:7px;letter-spacing:.4px}footer{gap:6px;padding:0 10px}.playback button{padding:6px;font-size:10px}.playback .icon{height:15px;width:15px}.sidebar{top:110px;bottom:76px}.poster-frame{max-height:100%}#status{bottom:75px}.dialog-head h2{font-size:11px}}

.rule-group{margin-bottom:19px}.rule-group h3{font-size:11px;font-weight:400;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;color:#d0ded8}.rule-group h3 small{font:8px monospace;letter-spacing:.6px;color:var(--muted)}.rule-group .rules{margin-bottom:0}.color-controls{margin-bottom:22px}.color-row{display:grid;grid-template-columns:1fr 30px 83px;gap:8px;align-items:center;margin:10px 0}.color-row label{font-size:10px;color:#a8b8b4}.color-row input[type=color]{width:30px;height:30px;padding:2px;border:1px solid var(--line);border-radius:3px;background:transparent;cursor:pointer}.hex-color{width:100%;min-width:0;font:10px monospace;padding:7px 6px;border:1px solid var(--line);border-radius:3px;background:#151f21}.color-note{font-size:9px;color:var(--muted);margin:12px 0 0}

/* Keep the home link available on phones and tablets. */
@media(max-width:850px){body{grid-template-rows:98px minmax(0,1fr) 62px}.topbar{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:1px 14px;padding:10px 16px;align-items:center}.topbar .brand{display:flex;grid-row:1;grid-column:1;min-height:32px;gap:7px;padding-right:12px;font-size:10px}.topbar .brand .icon{width:14px;height:14px}.topbar .identity{grid-row:1;grid-column:2;width:auto;min-width:0}.topbar h1{font-size:clamp(9px,2.8vw,14px)}.topbar nav{position:static;grid-row:2;grid-column:1/-1;justify-self:end;margin:0;gap:5px}.sidebar{top:110px}}