/* 画布与检查器是两个工作区域；材质只用于工具栏和弹出菜单。 */
:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif; --bg:#f0f0f2; --surface:#fff; --panel:#fafafa; --field:#f0f0f2; --text:#202124; --muted:#6b6b72; --line:#e2e2e6; --accent:#0071e3; --on-accent:#fff; --selected:#eaf2ff; --error:#ba2631; --material:rgba(250,250,252,.86); --shadow:0 16px 48px #00000018,0 1px 4px #0000000a; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) { color-scheme:dark; --bg:#18181a; --surface:#29292c; --panel:#222224; --field:#333336; --text:#f3f3f6; --muted:#b0b0b8; --line:#3b3b40; --accent:#83baff; --on-accent:#09203b; --selected:#283d58; --error:#ffadb4; --material:rgba(36,36,39,.9); --shadow:0 16px 48px #00000038,0 1px 4px #00000030; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#18181a; --surface:#29292c; --panel:#222224; --field:#333336; --text:#f3f3f6; --muted:#b0b0b8; --line:#3b3b40; --accent:#83baff; --on-accent:#09203b; --selected:#283d58; --error:#ffadb4; --material:rgba(36,36,39,.9); --shadow:0 16px 48px #00000038,0 1px 4px #00000030; }
*{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:var(--bg);color:var(--text);font-size:.8125rem;line-height:1.5;-webkit-font-smoothing:antialiased;font-optical-sizing:auto} button,input,textarea{font:inherit} button,a,input,textarea,summary,[tabindex]{-webkit-tap-highlight-color:transparent} button,a{touch-action:manipulation} button{cursor:pointer;color:inherit} button:disabled{cursor:not-allowed;opacity:.4} button,a,textarea,input,summary{outline-offset:3px} :focus-visible{outline:2px solid var(--accent)} h1,h2,h3,p{margin:0} h1,h2,h3{font-size:.8125rem;font-weight:600} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} a{color:var(--accent)}
.toolbar{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;background:var(--material);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);position:sticky;top:0;z-index:5;box-shadow:0 1px 0 #80808018} .brand{display:flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:650;letter-spacing:-.02em}.brand-symbol{display:block;width:32px;height:32px;flex-shrink:0;background:var(--text);mask:url(/brand.svg) center/contain no-repeat;-webkit-mask:url(/brand.svg) center/contain no-repeat} .appearance{justify-self:end}.main-tabs{display:flex;padding:3px;position:relative;isolation:isolate;border-radius:9px;background:var(--field)} .tab{border:0;background:none;padding:5px 30px;font-size:.8125rem;border-radius:7px;color:var(--muted);font-weight:550;min-height:30px}.tab.on{color:var(--text);background:var(--surface);box-shadow:0 1px 4px #00000012}
.pane{display:none}.pane.on{display:block}.workspace,.parse-workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:calc(100dvh - 64px)}.preview-column{min-width:0;scroll-margin-top:76px}.preview-panel{height:calc(100dvh - 64px);min-height:580px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}.canvas-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 32px;color:var(--muted);gap:16px}.canvas-heading h1{color:var(--text);font-size:.875rem}.canvas-heading span{font-size:.6875rem;font-variant-numeric:tabular-nums}.preview-box{min-width:0;min-height:0;display:grid;place-items:center;padding:30px 48px 12px;position:relative}.preview-box img{display:block;max-width:100%;max-height:100%;width:min(440px,100%);height:auto;aspect-ratio:1;object-fit:contain;border-radius:18px;box-shadow:0 20px 44px #00000012,0 2px 8px #00000006}.preview-empty{color:var(--muted)}.canvas-status{min-height:58px;display:grid;place-items:center;padding:12px 24px 16px}.meta{font-size:.75rem;color:var(--muted);text-align:center;overflow-wrap:anywhere}.meta[data-state="success"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#29934a;margin-right:7px}.meta[data-state="error"]{color:var(--error)}.preview-box[aria-busy="true"]{opacity:.65}.export-panel{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 32px;background:var(--material);border-top:1px solid var(--line)}.export-size{display:grid;grid-template-columns:auto minmax(70px,150px) 64px;align-items:center;gap:16px}.export-size label{color:var(--muted);font-size:.75rem}.export-size output{font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}.export-actions{display:flex;gap:10px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 18px;border-radius:8px;border:0;font-size:.8125rem;font-weight:550;text-decoration:none;white-space:nowrap}.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 2px #00000012}.secondary{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--line),0 1px 2px #00000008}
.editor,.parse-result{background:var(--panel);border-left:1px solid var(--line);min-width:0;height:calc(100dvh - 64px);position:sticky;top:64px;display:flex;flex-direction:column}.inspector-heading{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:20px 24px}.editor-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;isolation:isolate;margin:0 20px 8px;padding:3px;background:var(--field);border-radius:8px}.editor-tab{border:0;background:transparent;font-size:.75rem;padding:5px 0;min-height:30px;color:var(--muted);border-radius:6px}.editor-tab[aria-selected="true"]{color:var(--text);background:var(--surface);box-shadow:0 1px 4px #00000018}.segment-indicator{position:absolute;left:0;top:3px;bottom:3px;background:var(--surface);border-radius:6px;box-shadow:0 1px 4px #00000018;pointer-events:none;z-index:-1}.has-indicator .tab.on,.has-indicator .editor-tab[aria-selected="true"]{background:transparent;box-shadow:none}.editor-body{padding:20px 24px 32px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;flex:1;min-height:0}.setting-panel{display:grid;gap:26px}.field-group{display:grid;gap:12px}.section-title,.field-label{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-title{margin-bottom:2px}.section-title label,.field-label label,.lab{font-weight:500}.count,.field-label output{font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums}.field-label{margin-bottom:10px}.field-label output{font-size:.75rem}textarea,.field{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:12px;color:var(--text);width:100%}textarea{resize:vertical;min-height:106px;font:.75rem/1.8 ui-monospace,"SFMono-Regular",Consolas,monospace;overflow-wrap:anywhere}.field{max-width:120px}.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}.chip{display:flex;flex-direction:column;gap:8px;align-items:center;padding:12px 4px 8px;border:1px solid transparent;border-radius:12px;background:transparent;font-size:.6875rem;white-space:normal;line-height:1.4}.chip .palette{display:block;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--swatch-a),var(--swatch-b));box-shadow:inset 0 0 0 1px #0000000d,0 2px 4px #00000010}.chip.on{border-color:var(--accent);background:var(--selected);color:var(--accent)}.chip:hover:not(.on){background:var(--field)}.opts{display:flex;padding:3px;border-radius:7px;background:var(--field);gap:2px}.opt{flex:1;min-width:0;padding:6px 8px;border:0;background:transparent;color:var(--muted);border-radius:5px;font-size:.75rem;white-space:normal}.opt.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #00000012}.option-row{display:grid;gap:10px}.colors{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 12px}.color{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:10px;font-size:.75rem}.color+.color{border-top:1px solid var(--line)}.color-value{display:flex;align-items:center;gap:8px;min-width:0}.hex-input{border:0;background:transparent;color:var(--muted);width:70px;min-width:0;padding:4px 0;font:.6875rem ui-monospace,"SFMono-Regular",Consolas,monospace;text-transform:uppercase}.hex-input[aria-invalid="true"]{color:var(--error)}.color-swatch{width:24px;height:24px;background:var(--color);border:1px solid #80808055;border-radius:6px;padding:0}.color-palette{display:block;padding:12px}.palette-choice{width:28px;height:28px;border-radius:7px;border:1px solid #80808055;background:var(--color)}
input[type="range"]{width:100%;height:22px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;min-width:0}input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--range-fill),var(--line) var(--range-fill))}input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;background:#fff;border:1px solid #00000010;box-shadow:0 1px 4px #00000033}input[type="range"]::-moz-range-track{height:3px;background:var(--line);border-radius:3px}input[type="range"]::-moz-range-progress{height:3px;background:var(--accent)}input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:1px solid #00000010;border-radius:50%;background:white;box-shadow:0 1px 4px #00000033}input:disabled{opacity:.4;cursor:not-allowed}.slider-field{min-width:0}.divider{border:0;border-top:1px solid var(--line);margin:0}.upload-block{min-width:0}.file-card{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);cursor:pointer;min-height:64px}.file-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-card b{font-size:.75rem;font-weight:450;overflow-wrap:anywhere}.file-card:focus-within{outline:2px solid var(--accent);outline-offset:2px}.upload-symbol{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:var(--field);font-size:22px;color:var(--muted);flex-shrink:0}.file-thumbnail{width:36px;height:36px;object-fit:cover;border-radius:7px}.has-file .upload-symbol{display:none}.text-button{background:none;border:0;padding:4px 0;font-size:.6875rem;color:var(--accent);min-height:26px}.mobile-preview-link{display:none}details{border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;font-weight:500}.details-content{padding-top:16px}
.select-control{position:relative;min-width:0}.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:7px;font-size:.75rem;min-height:34px;text-align:left}.select-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin:0 3px 4px 0;flex-shrink:0}.appearance .select-trigger{border:0;background:transparent;min-width:104px}.popup[popover]{margin:0;position:fixed;inset:auto;border:1px solid var(--line);border-radius:10px;background:var(--material);color:var(--text);box-shadow:var(--shadow);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);max-height:min(320px,70dvh);overflow-y:auto;transform-origin:top right}.popup[popover]:not(:popover-open){display:none}.popup.opts{padding:5px;flex-direction:column;gap:1px}.popup .opt{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:32px;text-align:left;padding:7px 10px;color:var(--text)}.popup .opt.on{background:transparent;box-shadow:none}.popup .opt.on::after{content:"✓";font-size:12px;margin-left:20px}.popup .opt:hover,.popup .opt:focus-visible{background:var(--accent);color:var(--on-accent);outline:0}.popup::backdrop{background:transparent}
.parse-canvas{display:flex;flex-direction:column;min-width:0;height:calc(100dvh - 64px);min-height:580px}.drop{flex:1;min-height:0;margin:0 32px 24px;display:flex;align-items:center;justify-content:center;border:1px dashed #a0a0aa66;border-radius:18px;cursor:pointer}.drop.over{background:var(--selected);border-color:var(--accent)}.drop.has{border-color:transparent}.drop .hint{display:grid;justify-items:center;gap:10px;color:var(--muted);font-size:.75rem}.hint b{font-size:.875rem;color:var(--text);font-weight:500}.upload-glyph{display:block;width:52px;height:48px;border:1.5px solid #909099;border-radius:10px;position:relative;margin-bottom:8px}.upload-glyph::before,.upload-glyph::after{content:"";position:absolute;background:#909099;left:16px;right:16px;top:22px;height:1.5px}.upload-glyph::after{transform:rotate(90deg)}#preview{max-width:100%;max-height:100%;display:contents}#preview img{max-width:90%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:var(--shadow)}.sample-strip{padding:18px 32px 24px;border-top:1px solid var(--line)}.sample-strip h2{font-size:.6875rem;color:var(--muted);margin-bottom:12px}.rail{display:flex;gap:12px;overflow:auto;padding:2px 2px 6px}.thumb{background:transparent;border:0;border-radius:9px;padding:0;min-width:64px;flex:0 0 64px;text-align:center}.thumb img{display:block;width:64px;height:64px;object-fit:contain;background:white;border-radius:9px;border:2px solid transparent}.thumb span{display:block;color:var(--muted);font-size:.625rem;margin-top:6px}.thumb.on img{border-color:var(--accent)}.parse-result .inspector-heading{border-bottom:1px solid var(--line)}.out{padding:24px;overflow-y:auto;overflow-wrap:anywhere}.out.empty{flex:1;display:grid;place-items:center;color:var(--muted);font-size:.75rem}.out.error{color:var(--error)}.k{font-size:.6875rem;color:var(--muted);margin-bottom:8px}.v{font:.75rem/1.8 ui-monospace,"SFMono-Regular",Consolas,monospace;margin-bottom:24px}.skel{height:16px;border-radius:4px;background:var(--field);width:80%}.shortcut{font-size:.6875rem;color:var(--muted)}
@media(max-width:1100px){.workspace,.parse-workspace{grid-template-columns:minmax(0,1fr) 330px}.export-panel{padding:18px 24px;gap:16px;flex-wrap:wrap}.export-size{grid-template-columns:auto minmax(60px,1fr) 64px;flex:1}.export-actions{margin-left:auto}.preview-box{padding:24px}.canvas-heading{padding:20px 24px}}
@media(max-width:900px){.toolbar{padding:10px 16px;height:auto;min-height:60px;gap:12px;grid-template-columns:1fr auto auto}.brand{font-size:.8125rem;gap:6px}.brand-symbol{font-size:24px}.tab{padding:5px 16px}.appearance .select-trigger{min-width:0;width:32px;height:32px;padding:7px;border-radius:50%;border:1px solid var(--line)}.appearance .select-trigger .selection-label{font-size:0;display:block;width:14px;height:14px;border:1.5px solid var(--text);border-radius:50%;background:linear-gradient(90deg,var(--text) 50%,transparent 50%)}.appearance .select-trigger::after{display:none}.workspace,.parse-workspace{display:flex;flex-direction:column;min-height:0}.preview-panel{height:auto;min-height:0;grid-template-rows:auto 300px auto auto}.preview-box{padding:18px 32px;grid-template:minmax(0,1fr)/minmax(0,1fr)}.preview-box img{height:100%;width:auto;max-width:100%}.canvas-heading{padding:18px 20px}.canvas-status{min-height:36px;padding:4px 20px 12px}.export-panel{padding:16px 20px}.export-size{grid-template-columns:auto minmax(60px,1fr) 64px;flex-basis:100%}.export-actions{width:100%}.export-actions>*{flex:1;min-height:40px}.editor,.parse-result{height:auto;position:static;border-left:0;border-top:1px solid var(--line)}.inspector-heading{padding:18px 20px;min-height:0}.editor-tabs{position:sticky;top:calc(var(--toolbar-height,60px) + 8px);z-index:2;margin:0 20px 0;box-shadow:0 0 0 8px var(--panel)}.editor-body{padding:20px;overflow:visible}.editor-tab{min-height:34px}.mobile-preview-link{display:block;align-self:end;margin:10px 20px 0}.chips{grid-template-columns:repeat(4,minmax(0,1fr))}.setting-panel{gap:24px}.parse-canvas{height:auto;min-height:0}.drop{height:330px;flex:none;margin:0 20px 20px}.sample-strip{padding:16px 20px}.out.empty{min-height:160px}.parse-result{min-height:240px}.preview-column{scroll-margin-top:calc(var(--toolbar-height,60px) + 10px)}}
@media(max-width:380px){.brand-symbol{width:28px;height:28px}.toolbar{gap:8px}.tab{padding:5px 14px}.chips{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-panel{grid-template-rows:auto 264px auto auto}}
@media(prefers-reduced-motion:no-preference){button,a{transition:transform .15s ease,background-color .15s ease}button:active:not(:disabled),a:active{transform:scale(.97);transition-duration:0s}.preview-box{transition:opacity .15s ease}body,.editor,.parse-result{transition:background-color .18s ease,color .18s ease}}
@media(prefers-reduced-transparency:reduce){.toolbar,.popup[popover]{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){:root,:root[data-theme]{--muted:var(--text);--line:#888}.toolbar,.popup[popover]{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}.segment-indicator{outline:1px solid var(--text);outline-offset:-1px}}
@media(forced-colors:active){input[type="range"]{appearance:auto}.color-swatch,.palette-choice{forced-color-adjust:none}.opt.on,.tab.on,.editor-tab[aria-selected="true"]{outline:1px solid Highlight}.primary{border:1px solid ButtonText}}
.file-card.default-brand .upload-symbol{font-size:0;border-radius:0;background:var(--text);mask:url(/brand.svg) center/contain no-repeat;-webkit-mask:url(/brand.svg) center/contain no-repeat}
.color-palette.popup[popover]{max-height:min(430px,calc(100dvh - 24px))}.palette-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.palette-grid .palette-choice{width:100%;height:28px}.color-editor{display:grid;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.picker-heading{font-size:.6875rem;font-weight:500;color:var(--muted)}.picker-sv{position:relative;height:132px;border-radius:7px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--hue) 100% 50%);touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1px #00000012}.picker-cursor{position:absolute;left:var(--saturation);top:var(--brightness);width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none}.picker-value{display:flex;align-items:center;gap:12px;font-size:.6875rem;color:var(--muted)}.picker-hex{min-width:0;width:100%;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);padding:7px 9px;font:.75rem ui-monospace,"SFMono-Regular",Consolas,monospace;text-transform:uppercase}.picker-hex[aria-invalid="true"]{border-color:var(--error);color:var(--error)}input.picker-hue::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}input.picker-hue::-webkit-slider-thumb{margin-top:-5px}input.picker-hue::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}input.picker-hue::-moz-range-progress{background:transparent}.picker-sv,.picker-hue{forced-color-adjust:none}

.brand-link{color:var(--text);text-decoration:none}
/* The H5 page scrolls as one document; controls remain reachable with touch and a keyboard. */
@media(max-width:900px){
  .toolbar{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .workspace,.parse-workspace{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
  .editor-body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .editor-tabs{top:calc(var(--toolbar-height,60px) + 8px)}
  .canvas-heading{gap:8px;flex-wrap:wrap}
  .canvas-heading span{overflow-wrap:anywhere}
  .hex-input{width:88px}
  .mobile-preview-link{min-height:44px}
}
@media(max-width:900px),(pointer:coarse){
  .primary,.secondary,.compare-button,.editor-tab,.select-trigger,.popup .opt,.text-button,.appearance .select-trigger{min-height:44px}
  .appearance .select-trigger{width:44px;height:44px;justify-content:center}
  .color{min-height:56px}
  .color-swatch{width:44px;height:44px;flex-shrink:0;background-clip:content-box;padding:8px;border:0}
  .palette-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .palette-grid .palette-choice{min-height:44px}
  input[type="range"]{height:44px}
  input[type="range"]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10.5px}
  input[type="range"]::-moz-range-thumb{width:24px;height:24px}
  input.picker-hue::-webkit-slider-thumb{margin-top:-8px}
  .hex-input,.picker-hex,.field,textarea{font-size:16px;min-height:44px}
  .auth-remember{min-height:44px;margin:.5rem 0 1rem}
  .popup[popover]{overscroll-behavior:contain}
}