:root{color-scheme:dark;--bg:#141719;--surface:#1b1f21;--rule:#32383a;--ink:#e7e8e3;--muted:#969e9e;--accent:#d89140;font-family:"Segoe UI","Microsoft YaHei UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:13px}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{opacity:.45;cursor:wait}button,input{accent-color:var(--accent)}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{transition:background .15s,color .15s}button:hover{color:#fff}.masthead{height:78px;padding:0 42px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);font-weight:650;letter-spacing:.17em;font-size:14px}.brand-mark{color:var(--accent);font-size:31px;font-weight:300;line-height:1}.brand>span:last-child{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:.19em}.edition{font:10px ui-monospace,Consolas,monospace;letter-spacing:.13em;color:var(--muted)}.edition>span{margin:0 10px;color:var(--rule)}.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);max-width:1560px;margin:auto}.controls{padding:35px 30px 25px 42px;border-right:1px solid var(--rule)}.eyebrow{margin:0 0 11px;color:var(--accent);font-size:9px;letter-spacing:.2em}.intro h1{font-size:29px;font-weight:500;letter-spacing:.03em;margin:0 0 12px}.intro-copy{font-size:12px;line-height:1.85;color:var(--muted);margin:0 0 27px}.control-section{border-top:1px solid var(--rule);padding:19px 0 20px}.control-section h2{font-weight:500;font-size:11px;letter-spacing:.05em;margin:0 0 17px;display:flex;gap:14px;align-items:center}.control-section h2>span{font:9px ui-monospace,Consolas,monospace;color:var(--muted)}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);margin-bottom:18px;padding:3px;gap:3px}.segmented button{padding:8px 5px;font-size:11px;color:var(--muted)}.segmented button[aria-pressed=true]{background:#353b3b;color:var(--ink)}.palette-row{display:flex;align-items:center;gap:12px;font-size:11px;margin:0 0 19px}.theme-switch{display:flex;gap:9px}.swatch{width:21px;height:21px;border:1px solid #616869}.swatch.dark{background:#111416}.swatch.light{background:#f4f2ed}.swatch[aria-pressed=true]{outline:1px solid var(--accent);outline-offset:3px}.quiet{color:var(--muted)}.palette-row>.quiet{margin-left:auto;font-size:10px}.seed-row{display:flex;align-items:center;gap:8px;font-size:11px}.seed-row input{width:70px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);padding:6px 8px;font-family:Consolas,monospace;appearance:textfield}.seed-row button{font-size:10px;color:var(--muted);margin-left:auto;padding:7px 0}.seed-row button span{color:var(--accent);margin-left:3px}.slider-label{display:flex;justify-content:space-between;align-items:center;margin-top:15px;font-size:11px;color:#cbd0cd}.slider-label:first-of-type{margin-top:0}.slider-label output{font:10px ui-monospace,Consolas,monospace;color:var(--muted);min-width:65px;text-align:right}input[type=range]{appearance:none;background:transparent;width:100%;height:17px;margin:8px 0 0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#414849}input[type=range]::-webkit-slider-thumb{appearance:none;width:8px;height:8px;background:#c4cac6;border:0;margin-top:-3px;border-radius:0}input[type=range]:hover::-webkit-slider-thumb{background:var(--accent)}input[type=range]::-moz-range-track{height:2px;background:#414849}input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0;background:#c4cac6;border-radius:0}.inline-settings{display:flex;justify-content:space-between;align-items:center;margin-top:15px;font-size:10px;color:var(--muted)}.color-label,.check-label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}.color-label input{width:22px;height:22px;border:0;padding:0;background:none}.check-label input{width:12px;height:12px;margin:0}.utility{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:19px}.utility button,.bottom-line button{font-size:10px;color:var(--muted);padding:2px 0}.utility button:hover,.bottom-line button:hover{color:var(--accent)}.art-workspace{min-width:0;padding:32px clamp(28px,5vw,82px) 23px}.stage-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 19px;color:var(--muted);font-size:10px}.stage-header>div{display:flex;align-items:center;gap:8px}.stage-header>span{font:9px ui-monospace,Consolas,monospace;letter-spacing:.15em}.status-dot{width:4px;height:4px;background:var(--accent)}.art-mount{display:flex;justify-content:center;background:#101314;border:1px solid #303637;padding:25px;position:relative}.art-mount:before,.art-mount:after{content:"";position:absolute;width:7px;height:7px;border-color:#777e7c}.art-mount:before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}.art-mount:after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}.art-frame{height:min(calc(100dvh - 290px),850px);max-width:100%;aspect-ratio:3/4;position:relative;isolation:isolate;overflow:hidden;background:#111416;box-shadow:0 2px 12px #0000000a}#art{position:absolute;inset:0;width:100%;height:100%;display:block}.playback{display:flex;align-items:center;gap:18px;margin:19px 0 25px}.playback button{font-size:17px;width:25px;height:26px;font-weight:300}.playback input{flex:1;margin:0}.playback output{font:10px ui-monospace,Consolas,monospace;color:var(--muted);width:58px;text-align:right}.export-bar{border-top:1px solid var(--rule);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:15px}.export-info{display:flex;flex-direction:column;gap:7px;font-size:11px}.export-info .quiet{font:9px ui-monospace,Consolas,monospace}.export-info b{font-weight:400;margin:0 7px}.export-actions{display:flex;gap:10px;align-items:center}.export-actions .check-label{font-size:10px;color:var(--muted);margin-right:8px}.primary,.secondary{padding:12px 18px;font-size:11px}.primary{background:#d89140;color:#171a1b}.primary:hover{background:#e8a65f;color:#111}.primary>span{margin-left:14px}.secondary{border:1px solid var(--rule);color:var(--muted);padding:11px 13px}.bottom-line{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:10px;color:var(--muted);margin-top:15px}.bottom-line p{line-height:1.6;margin:0;max-width:70%}.bottom-line>div{display:flex;gap:17px;white-space:nowrap}.page-footer{display:flex;justify-content:space-between;padding:22px 42px;border-top:1px solid var(--rule);color:#6f7878;font-size:9px;letter-spacing:.08em}.page-footer i{font-style:normal;margin:0 8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{max-width:min(850px,90vw);background:var(--surface);border:1px solid var(--rule);padding:20px;color:var(--ink)}dialog::backdrop{background:#000a}dialog img{display:block;max-width:100%;margin-top:15px}dialog button{display:block;margin-left:auto;font-size:12px;color:var(--muted)}dialog p{font-size:11px;color:var(--muted)}
@media(min-width:1300px){.controls{padding-top:40px}.art-workspace{padding-top:40px}.control-section{padding-top:21px;padding-bottom:21px}}
@media(max-width:900px){.masthead{padding:0 24px;height:66px}.edition{display:none}.workspace{grid-template-columns:260px 1fr}.controls{padding:28px 22px}.art-workspace{padding:28px 22px}.art-mount{padding:15px}.art-frame{height:auto;width:100%;aspect-ratio:3/4}.export-bar{align-items:flex-start;flex-direction:column}.bottom-line{align-items:flex-start;flex-direction:column}.bottom-line p{max-width:100%}.page-footer{padding:20px 24px}.page-footer>span:last-child{display:none}}
@media(max-width:640px){.brand>span:last-child{font-size:8px}.workspace{display:flex;flex-direction:column}.art-workspace{order:0;padding:23px 20px}.controls{order:1;border-right:0;border-top:1px solid var(--rule);padding:30px 24px;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.intro{grid-column:1/-1}.intro h1{font-size:26px}.intro-copy br{display:none}.intro-copy{margin-bottom:23px}.utility{grid-column:1/-1}.control-section{padding-bottom:20px}.export-bar{flex-direction:row;align-items:center}.primary{padding:11px 13px}.primary>span{margin-left:8px}.export-actions{gap:7px}.export-actions .check-label{margin-right:3px;font-size:9px}.secondary{padding:10px}.seed-row{flex-wrap:wrap}.seed-row button{margin-left:0}.art-frame{max-height:650px;width:100%;max-width:487.5px}.bottom-line{flex-direction:row;align-items:center}.bottom-line p{max-width:60%}.bottom-line>div{gap:10px}.page-footer{font-size:8px}}
.mode-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 3px}.mode-row button{border:1px solid var(--rule);padding:7px 9px;font-size:10px;color:var(--muted)}.mode-row button[aria-pressed=true]{border-color:var(--accent);color:var(--ink);background:#d8914019}.mode-row label{font-size:10px;color:var(--muted)}.mode-row select{background:var(--surface);border:1px solid var(--rule);color:var(--ink);font-size:10px;padding:6px}.control-hint{color:var(--muted);font-size:10px;line-height:1.6;margin:10px 0 0}.control-section [hidden]{display:none}#edit-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none}#edit-overlay.active{pointer-events:auto;cursor:crosshair}#edit-overlay circle{cursor:grab}#edit-overlay circle:active{cursor:grabbing}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.advanced{margin-top:18px;color:var(--muted);font-size:10px}.advanced summary{cursor:pointer;padding:3px 0}.advanced[open] summary{margin-bottom:15px;color:var(--ink)}
@media(min-width:901px){.workspace{height:calc(100dvh - 138px);min-height:680px}.controls,.art-workspace{overflow-y:auto;scrollbar-color:#414849 transparent;scrollbar-width:thin}.controls::-webkit-scrollbar,.art-workspace::-webkit-scrollbar{width:6px}.controls::-webkit-scrollbar-thumb,.art-workspace::-webkit-scrollbar-thumb{background:#414849}}
.utility.only-reset{justify-content:flex-end}.export-info label{font-size:11px}.export-info select{background:var(--surface);border:1px solid var(--rule);color:var(--ink);font:10px ui-monospace,Consolas,monospace;padding:7px 8px;min-width:190px}
@media(max-width:640px){.export-bar{flex-direction:column;align-items:stretch}.export-actions{justify-content:flex-end}.export-info select{max-width:100%}}
