:root{font-synthesis:none;text-rendering:optimizeLegibility}:root{color-scheme:dark;--page: #080808;--surface: #0d0d0d;--surface-2: #151515;--ink: #f1f1ef;--ink-inverse: #0a0a0a;--muted: #969696;--faint: #5d5d5d;--line: #292929;--line-strong: #454545;--accent: #f1f1ef;--paper: #e9e9e7;--error: #ff907d;--sans: Arial, "Segoe UI", "Microsoft YaHei UI", sans-serif;--mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Microsoft YaHei UI", monospace}*{box-sizing:border-box}html{min-width:320px;background:var(--page);scroll-behavior:smooth}body{min-width:320px;min-height:100dvh;margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,input[type=range]{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.app-shell{position:relative;min-height:100dvh;overflow:hidden;background:var(--page)}.app-shell:before{position:fixed;top:64px;right:0;bottom:0;left:0;z-index:0;background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(25vw - 1px),rgba(255,255,255,.055) calc(25vw - 1px),rgba(255,255,255,.055) 25vw);content:"";pointer-events:none}.topbar{position:sticky;top:0;z-index:20;display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(18px,3vw,44px);border-bottom:1px solid var(--line);background:var(--page)}.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}.brand-token,.ascii-icon{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}.brand-token{color:var(--accent);font-size:10px;letter-spacing:.08em}.brand>span:last-child{display:grid;gap:3px}.brand strong{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:-.03em}.brand small{color:var(--muted);font-family:var(--mono);font-size:9px}.topbar-actions{display:flex;align-items:center;gap:18px}.autosave-copy{color:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.04em}.button{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line-strong);border-radius:2px;padding:0 18px;background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.button:hover:not(:disabled){border-color:var(--accent);background:var(--accent);color:var(--ink-inverse)}.button:active:not(:disabled),.icon-button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.45}.button-primary{min-width:164px;border-color:var(--paper);background:var(--paper);color:var(--ink-inverse)}.workspace{position:relative;z-index:1;display:grid;width:min(100%,1420px);grid-template-columns:352px minmax(0,1fr);gap:24px;margin:0 auto;padding:28px clamp(18px,3vw,44px) 56px}.control-panel,.preview-column{min-width:0}.control-panel{align-self:start;border:1px solid var(--line);background:var(--surface)}.panel-heading{position:relative;padding:30px 26px 26px;border-bottom:1px solid var(--line)}.panel-heading:after{position:absolute;top:0;right:0;width:88px;height:8px;background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 6px);content:""}.eyebrow{margin:0 0 18px;color:var(--accent);font-family:var(--mono);font-size:9px;letter-spacing:.07em}.panel-heading h1{margin:0;font-size:clamp(38px,3.5vw,54px);font-weight:800;letter-spacing:-.07em;line-height:.95}.panel-heading>p:last-of-type{max-width:29ch;margin:22px 0 0;color:var(--muted);font-size:12px;line-height:1.7}.ascii-map{overflow:hidden;margin:24px 0 0;color:var(--faint);font-family:var(--mono);font-size:9px;line-height:1.45;white-space:pre}.control-section{padding:24px 26px 28px;border-bottom:1px solid var(--line)}.control-section:last-child{border-bottom:0}.section-title-row{display:flex;align-items:baseline;gap:13px;margin-bottom:22px}.section-index{color:var(--accent);font-family:var(--mono);font-size:9px}.section-title-row h2{margin:0;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:-.04em}.field-block{display:grid;gap:9px;margin-top:20px}.field-block:first-of-type{margin-top:0}.field-label-row,.color-field>span:first-child{color:var(--muted);font-family:var(--mono);font-size:9px}.field-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.field-meta,.field-label-row output{color:var(--faint);font-variant-numeric:tabular-nums}.text-input,.hex-input{width:100%;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;color:var(--ink);outline:0;transition:border-color .14s ease}.text-input{height:42px;padding:0;font-size:14px;font-weight:650}.text-input::placeholder{color:var(--faint)}.text-input:hover,.hex-input:hover{border-color:var(--muted)}.text-input:focus,.hex-input:focus{border-bottom-color:var(--accent)}.range-input{width:100%;height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}.range-input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--range-progress),var(--line-strong) var(--range-progress),var(--line-strong) 100%)}.range-input::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4.5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--paper);border-radius:0;background:var(--page)}.range-input::-moz-range-track{height:2px;background:var(--line-strong)}.range-input::-moz-range-progress{height:2px;background:var(--accent)}.range-input::-moz-range-thumb{width:10px;height:10px;border:1px solid var(--paper);border-radius:0;background:var(--page)}.color-list{display:grid}.color-field{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line)}.hex-control{display:inline-flex;align-items:center;gap:10px}.color-picker{width:26px;height:26px;flex:0 0 auto;overflow:hidden;border:1px solid var(--line-strong);border-radius:0;padding:2px;background:transparent}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:0;border-radius:0}.color-picker::-moz-color-swatch{border:0;border-radius:0}.hex-input{width:72px;height:32px;padding:0;font-family:var(--mono);font-size:10px;text-transform:uppercase}.band-chart{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.chart-heading,.chart-row{display:grid;align-items:center;font-family:var(--mono);font-size:8px;font-variant-numeric:tabular-nums}.chart-heading{grid-template-columns:1fr auto;margin-bottom:13px;color:var(--muted)}.chart-row{grid-template-columns:18px minmax(0,1fr) 32px;gap:8px;min-height:18px;color:var(--faint)}.chart-track{position:relative;height:8px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--line-strong) 0 1px,transparent 1px 4px)}.chart-track>span{display:block;width:var(--chart-width);height:100%;background:var(--chart-color)}.chart-row data{text-align:right}.preview-column{display:grid;align-content:start}.preview-heading{position:relative;isolation:isolate;display:grid;min-height:92px;grid-template-columns:58% 42%;overflow:hidden;border:1px solid var(--line);background:var(--surface)}.preview-heading:after{position:absolute;top:0;right:0;bottom:0;left:58%;z-index:-1;background:repeating-linear-gradient(135deg,var(--line-strong) 0 1px,var(--page) 1px 5px);content:""}.preview-heading>div{display:grid;align-content:center;gap:7px;padding:18px 22px;color:var(--ink)}.preview-heading p{margin:0;font-family:var(--mono);font-size:clamp(17px,2vw,25px);font-weight:700;letter-spacing:-.05em}.preview-heading>div span{color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.07em}.resolution-chip{align-self:center;justify-self:end;padding:0 22px;color:var(--ink);font-family:var(--mono);font-size:9px;letter-spacing:.06em}.telemetry-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1px;background:var(--line)}.telemetry-strip>div{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:end;min-height:74px;padding:13px 16px;background:var(--surface)}.telemetry-strip span{grid-column:1 / -1;align-self:start;color:var(--muted);font-family:var(--mono);font-size:8px}.telemetry-strip strong{font-family:var(--mono);font-size:27px;font-weight:500;letter-spacing:-.08em;line-height:.9}.telemetry-strip small{color:var(--faint);font-family:var(--mono);font-size:8px}.stage{position:relative;isolation:isolate;display:grid;min-height:clamp(380px,52vh,550px);overflow:hidden;place-items:center;margin-top:1px;border:1px solid var(--line);padding:clamp(24px,4vw,56px);background:var(--surface)}.stage:before,.stage:after{position:absolute;color:var(--faint);font-family:var(--mono);font-size:9px;content:"+"}.stage:before{top:9px;left:10px}.stage:after{right:10px;bottom:9px}.canvas-frame{display:flex;width:100%;min-width:0;align-items:center;justify-content:center;animation:canvas-enter .42s ease-out both}.stroke-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:min(48vh,470px);border:1px solid var(--line-strong);border-radius:0}.transport-bar{display:grid;min-height:58px;grid-template-columns:auto minmax(160px,1fr) auto;align-items:center;gap:20px;margin-top:1px;padding:9px 12px;border:1px solid var(--line);background:var(--page)}.transport-actions{display:flex;gap:6px}.icon-button{display:grid;min-width:42px;height:36px;place-items:center;border:1px solid var(--line-strong);border-radius:0;background:var(--surface);color:var(--ink);font-size:9px;transition:border-color .14s ease,color .14s ease}.icon-button:hover{border-color:var(--accent);color:var(--accent)}.timeline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:var(--faint);font-family:var(--mono);font-size:8px;font-variant-numeric:tabular-nums}.timeline-line{position:relative;height:2px;overflow:hidden;background:var(--line-strong)}.timeline-line span{position:absolute;inset:0 auto 0 0;width:100%;background:var(--accent);transform-origin:left;animation:timeline-loop 1.5s linear infinite}.timeline-line.paused span{animation-play-state:paused}.loop-copy{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-family:var(--mono);font-size:8px;white-space:nowrap}.export-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 28px;margin-top:18px;border:1px solid var(--line);padding:20px 22px;background:var(--surface)}.export-copy h2{margin:0;font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.04em}.export-copy p{max-width:52ch;margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.export-actions{display:flex;align-items:center}.export-status,.error-message{grid-column:1 / -1}.export-status{display:grid;gap:8px}.status-copy-row{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-family:var(--mono);font-size:9px}.status-copy-row>span{display:inline-flex;min-width:0;align-items:center;gap:8px;overflow-wrap:anywhere}.status-copy-row strong{color:var(--accent);font-size:9px;font-weight:500}.status-loader{width:10px;height:10px;flex:0 0 auto;border:1px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.progress-track{height:2px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--line-strong) 0 1px,transparent 1px 4px)}.progress-track span{display:block;height:100%;background:var(--accent);transition:width .2s ease}.error-message{display:flex;align-items:flex-start;gap:9px;border-top:1px solid var(--error);padding:10px 0 0;color:var(--error);font-family:var(--mono);font-size:9px;line-height:1.5}@keyframes timeline-loop{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes canvas-enter{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1080px){.workspace{grid-template-columns:314px minmax(0,1fr);gap:18px}.stage{min-height:380px;padding:30px}.loop-copy{display:none}.transport-bar{grid-template-columns:auto minmax(140px,1fr)}}@media(max-width:840px){.topbar{position:relative}.workspace{grid-template-columns:minmax(0,1fr)}.control-panel{display:grid;grid-template-columns:1fr 1fr}.panel-heading{grid-column:1 / -1}.control-section:first-of-type{border-right:1px solid var(--line)}}@media(max-width:640px){.app-shell:before{background-image:none}.topbar{min-height:60px;padding:0 14px}.brand-token,.brand small,.autosave-copy{display:none}.button-quiet{width:42px;min-width:42px;padding:0;font-size:0}.button-quiet .ascii-icon{font-size:9px}.workspace{gap:20px;padding:18px 14px 42px}.control-panel{display:block}.control-section:first-of-type{border-right:0}.panel-heading,.control-section{padding-right:21px;padding-left:21px}.preview-heading{min-height:82px;grid-template-columns:72% 28%}.preview-heading:after{top:0;right:0;bottom:0;left:72%}.preview-heading>div{padding:15px}.resolution-chip{padding:0 10px;font-size:0}.resolution-chip:after{font-size:9px;content:"[1200×630]"}.telemetry-strip>div{min-height:64px;padding:11px}.telemetry-strip strong{font-size:22px}.stage{min-height:290px;padding:18px 12px}.transport-bar{grid-template-columns:auto 1fr;gap:10px;padding:8px}.timeline{grid-template-columns:1fr}.timeline>span{display:none}.export-panel{grid-template-columns:1fr;padding:18px}.button-primary{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}