:root{color-scheme:dark;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#070b0f;color:#e8edf1;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#070b0f}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #9bd9ee;outline-offset:4px}.app{display:grid;grid-template-columns:minmax(0,1fr) 328px;min-height:100svh}#hero{position:relative;height:100svh;min-height:480px;overflow:hidden;isolation:isolate;touch-action:pan-y}canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.visual-copy{position:absolute;top:40px;left:42px;pointer-events:none;text-shadow:0 2px 20px #070b0f}.visual-copy p{margin:0 0 12px;color:#a8bac8;font-size:13px;letter-spacing:.06em}.visual-copy h1{margin:0;font-size:clamp(26px,3.3vw,45px);font-weight:500;letter-spacing:.13em;line-height:1.4}.visual-copy h1 span{display:block}.flow-label{position:absolute;bottom:30px;left:42px;right:30px;display:flex;justify-content:space-between;align-items:center;color:#7894a56e;font:10px/1 Arial;letter-spacing:.2em;pointer-events:none}.flow-label span:last-child{font-size:25px}.debug-console{background:#10161c;border-left:1px solid #ffffff10;min-width:0;height:100svh;position:sticky;top:0;overflow:auto;padding:22px 20px}.debug-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 0 18px;background:none;border:0;border-bottom:1px solid #ffffff12;color:#e1edf6;font:14px/1.5 Arial}.debug-toggle span{font:11px/1.5 "PingFang SC",sans-serif;color:#89a8b9;letter-spacing:.1em}.debug-body[hidden]{display:none}.debug-heading{display:flex;justify-content:space-between;gap:8px;margin:20px 0 12px;font:9px/1.5 Arial;letter-spacing:.1em;color:#7d99ab}.debug-heading span:last-child{letter-spacing:0;color:#a3bfce}.field-context{font-size:12px;line-height:1.8;color:#91a6b5;margin:0 0 18px}.field-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.field-presets button:first-child{grid-column:1/-1}.debug-body button{background:#ffffff04;border:1px solid #ffffff1c;color:#b7c8d5;padding:8px 10px;border-radius:5px;font-size:11px;text-align:left}.debug-body button[aria-pressed=true]{background:#87bdd816;border-color:#8cb7ce70;color:#daecf6}.debug-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:15px 0 4px}.debug-controls button{text-align:center}.motion-controls{margin-top:16px;padding-top:8px;border-top:1px solid #ffffff12}.motion-controls label{display:flex;justify-content:space-between;align-items:center;margin:13px 0 4px;font-size:12px;color:#b7c7d3}.motion-controls output{font:11px/1.5 Arial;color:#8faebe;font-variant-numeric:tabular-nums}.motion-controls input{display:block;width:100%;height:18px;margin:3px 0 10px;accent-color:#9bbccf;touch-action:pan-y}.parameter-section{border-top:1px solid #ffffff12;padding-top:16px;margin-top:20px}.parameter-section summary{font-size:11px;color:#8ca5b5;cursor:pointer}.parameter-section .motion-controls{border:0;margin-top:8px;padding-top:0}.field-reset{margin-top:20px;width:100%;text-align:center!important}.debug-note{font-size:11px;color:#718c9e;line-height:1.9;margin:18px 0 8px}.settings-status{font-size:10px;color:#587487;line-height:1.8}.app.clean{grid-template-columns:1fr}.app.clean .debug-console{display:none}@media(max-width:900px){.app{display:block}#hero{height:62vw;min-height:430px;max-height:650px}.debug-console{height:auto;position:relative;border-left:0;border-top:1px solid #ffffff12;padding:22px max(22px,calc((100vw - 480px)/2));overflow:visible}.visual-copy{top:25px;left:25px}.visual-copy p{font-size:11px;margin-bottom:9px}.visual-copy h1{font-size:27px;letter-spacing:.09em;line-height:1.45}.flow-label{left:25px;bottom:22px}.app.clean #hero{height:100svh;max-height:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#field-overlay{z-index:1;pointer-events:none}.visual-copy{z-index:3}.flow-label{z-index:2}.field-legend{position:absolute;z-index:2;left:42px;bottom:68px;max-width:calc(100% - 84px);padding:8px 11px;background:#071014cc;border:1px solid #82b8c326;border-radius:5px;color:#b8d8df;font:10px/1.65 "PingFang SC",sans-serif;white-space:pre-line;pointer-events:none;font-variant-numeric:tabular-nums}#field-overlay[hidden],.field-legend[hidden]{display:none}.field-inspection{border-top:1px solid #ffffff16;margin-top:18px;padding-top:16px}.field-inspection h2{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:12px;font-weight:500;color:#d5e8ec}.field-inspection h2 span{color:#7297a7;font-size:9px;font-weight:400}.field-inspection .debug-controls{margin:12px 0}.select-label{display:block;font-size:11px;color:#9db6c4;margin:12px 0 6px}.field-inspection select{width:100%;border:1px solid #ffffff26;border-radius:5px;color:#c2d9e3;background:#151f26;padding:8px;font-size:11px}.field-inspection select:focus-visible{outline:2px solid #9bd9ee;outline-offset:3px}.field-inspection .motion-controls{border-top:0;margin-top:10px;padding-top:0}.check-label{display:flex;gap:7px;align-items:center;font-size:10px;color:#9db8c6;line-height:1.7;margin-top:9px}.check-label input{accent-color:#8bbeca;margin:0}.field-readout{color:#a5cbd0;font:10px/1.8 "PingFang SC",sans-serif;white-space:pre-line;font-variant-numeric:tabular-nums;margin:12px 0 8px}.inspector-note{font-size:10px;line-height:1.8;color:#6f909e;margin:0}button:disabled{opacity:.4;cursor:default}@media(max-width:900px){.field-legend{left:25px;bottom:58px;max-width:calc(100% - 50px)}}

.render-mode{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:20px 0 5px}.render-mode button{text-align:center}.line-settings{margin-top:18px;border-top:1px solid #ffffff12}.line-settings .motion-controls{border:0;margin-top:8px;padding:0}.line-settings .field-readout{font-size:10px;color:#82aaba}

.logo-settings{margin-top:20px;padding-top:16px;border-top:1px solid #ffffff12}.logo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.logo-heading h2{margin:0;color:#d5e8ec;font-size:12px;font-weight:500}.logo-heading button{padding:5px 9px;font-size:10px}.logo-settings .motion-controls{border:0;padding:0;margin-top:9px}

.logo-color-settings{margin-top:20px;padding-top:16px;border-top:1px solid #ffffff12}.logo-color-row{margin-top:16px}.logo-color-row>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#c8dbe8}.logo-color-row>label span{font-size:10px;color:#8aa6b8}.logo-color-inputs{display:flex;gap:9px;align-items:center;margin-top:8px}.logo-color-inputs input[type=color]{width:40px;height:33px;border:1px solid #ffffff26;border-radius:4px;padding:2px;background:#101b23;cursor:pointer}.logo-color-inputs input[type=text]{width:100%;min-width:0;flex:1;padding:8px 10px;border:1px solid #ffffff26;border-radius:4px;background:#101b23;color:#dbeaf4;font:12px/1.4 ui-monospace,monospace;letter-spacing:.4px}.logo-color-inputs input[aria-invalid=true]{border-color:#d68b74}.logo-color-settings .debug-controls{margin-top:14px}.logo-color-settings .inspector-note{margin-top:10px}

.app.console-collapsed{grid-template-columns:minmax(0,1fr)}.debug-console[hidden],.console-open[hidden]{display:none}.console-open{position:fixed;z-index:10;top:18px;right:18px;display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid #ffffff26;border-radius:6px;background:#10161cde;color:#b7c8d5;font-size:12px;backdrop-filter:blur(8px)}.console-open span{font-size:17px}.app.console-collapsed #hero{height:100svh;max-height:none}.debug-toggle{position:sticky;top:-22px;z-index:5;padding-top:10px;background:#10161c}

#particle-trail-settings{padding-top:16px}#particle-trail-settings[hidden],#line-controls[hidden]{display:none}

.banner-copy{position:absolute;inset:0;z-index:3;margin:0;pointer-events:none;font-weight:500;text-shadow:0 2px 14px #071015bb}.banner-copy-block{position:absolute;top:calc(50% + var(--logo-half,20vw)*var(--copy-offset,.09));transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--logo-half,20vw)*var(--copy-line-gap,.014));white-space:nowrap}.banner-copy-left{right:calc(50% + var(--logo-half,20vw)*var(--copy-distance,.86))}.banner-copy-right{left:calc(50% + var(--logo-half,20vw)*var(--copy-distance,.86))}.banner-copy-title{color:#eef8ff;font-size:clamp(calc(17px*var(--copy-title-scale,1)),calc(var(--logo-half,20vw)*.24*var(--copy-title-scale,1)),calc(84px*var(--copy-title-scale,1)));line-height:1.2;letter-spacing:var(--copy-tracking,.14em)}.banner-copy-subtitle{color:#b1c4d1;font:400 clamp(calc(9px*var(--copy-subtitle-scale,1)),calc(var(--logo-half,20vw)*.112*var(--copy-subtitle-scale,1)),calc(40px*var(--copy-subtitle-scale,1)))/1.3 Arial,sans-serif;letter-spacing:0}
/* The emission comparisons use the same form language as the inspector. */
.line-settings select{width:100%;border:1px solid #ffffff26;border-radius:5px;color:#c2d9e3;background:#151f26;padding:8px;font-size:11px;font-family:inherit;line-height:1.5}.line-settings select:focus-visible{outline:2px solid #9bd9ee;outline-offset:3px}.line-settings>.logo-heading{padding-top:16px}

.banner-copy-left .banner-copy-subtitle{letter-spacing:var(--copy-subtitle-left-tracking,0em)}.banner-copy-right .banner-copy-subtitle{letter-spacing:var(--copy-subtitle-right-tracking,0em)}
.banner-copy[hidden],.banner-copy [hidden]{display:none!important}

.smoke-preparing{position:absolute;left:50%;top:calc(50% + var(--logo-half)*.92);transform:translateX(-50%);z-index:4;color:var(--copy-subtitle);font:12px system-ui;letter-spacing:.08em;pointer-events:none}

/* Preview only: the checkerboard is never baked into transparent PNG output. */
#hero.scene-no-background{background-color:#20272d;background-image:conic-gradient(#2a333b 25%,transparent 0 50%,#2a333b 0 75%,transparent 0);background-size:24px 24px}