:root {
  color-scheme: light; --paper:#f7f4ed; --surface:#fcfaf5; --field:#faf7f0; --ink:#292722;
  --muted:#716c63; --hair:rgba(41,39,34,.16); --wave:#3f7178; --component:rgba(167,107,66,.52);
  --point:#9b643e; --guide:rgba(41,39,34,.32); --focus:#246e76;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box} html,body{height:100%;margin:0} body{min-width:320px;background:var(--paper);color:var(--ink);overflow:hidden}
[hidden]{display:none!important}
button,select,input{font:inherit} button,select{color:var(--ink);background:var(--surface);border:1px solid var(--hair)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.app-shell{height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.topbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(14px,4vw,48px) 10px;border-bottom:1px solid var(--hair)}
.identity{min-width:0;display:flex;align-items:baseline;gap:11px}.series,.version,.language-label,.title-group p{color:var(--muted);font-size:.76rem;line-height:1.15}
.divider{width:1px;height:18px;background:var(--hair)}.title-group{min-width:0}h1,.title-group p{margin:0}h1{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:540;line-height:1}.title-group p{margin-top:3px}
.top-actions{display:flex;align-items:center;gap:9px}select{min-height:34px;border-radius:6px;padding:4px 28px 4px 9px}.icon-button,.dialog-close{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;padding:0;cursor:pointer}.icon-button span{font:1rem Georgia,serif}
.stage{min-height:0;padding:clamp(10px,2vw,22px) clamp(12px,4vw,48px)}.canvas-panel{position:relative;height:100%;min-height:0;overflow:hidden;border:1px solid var(--hair);background:var(--field)}canvas{display:block;width:100%;height:100%}
.legend,.readout{position:absolute;z-index:1;display:flex;flex-wrap:wrap;gap:8px 15px;padding:8px 10px;color:var(--muted);background:rgba(252,250,245,.9);border:1px solid rgba(41,39,34,.1);font-size:.72rem;pointer-events:none}.legend{top:12px;left:12px}.readout{right:12px;bottom:12px}.legend span,.readout span{display:flex;align-items:center;gap:6px}.readout em{font-style:normal}.readout strong{color:var(--ink);font-weight:550;font-variant-numeric:tabular-nums}.swatch{display:inline-block;width:18px;border-top:2px solid var(--wave)}.swatch.component-one{border-top:1px solid rgba(167,107,66,.62)}.swatch.component-two{border-top:1px solid rgba(91,105,111,.58)}.dot{width:6px;height:6px;border-radius:50%;background:var(--point)}
.control-area{border-top:1px solid var(--hair);padding:10px clamp(12px,4vw,48px) 12px}.control-bar{display:grid;grid-template-columns:minmax(135px,1.15fr) repeat(4,minmax(110px,1fr)) auto;gap:9px;align-items:stretch}fieldset{min-width:0;margin:0;padding:6px 9px 8px;border:1px solid var(--hair);border-radius:7px;background:rgba(252,250,245,.58)}legend{padding:0 4px;font-size:.7rem;font-weight:600}label{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem}output{color:var(--ink);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:16px;accent-color:var(--focus)}.mode-field select{width:100%;margin-top:3px}.transport{display:grid;grid-template-columns:1fr;gap:6px}.transport button{min-width:76px;border-radius:7px;padding:5px 11px;cursor:pointer}
.info-dialog{width:min(630px,calc(100vw - 28px));max-height:calc(100svh - 28px);padding:24px 28px;border:1px solid var(--hair);border-radius:8px;background:var(--surface);color:var(--ink)}.info-dialog::backdrop{background:rgba(41,39,34,.24)}.info-dialog form{float:right}.dialog-close{font-size:1.15rem}.info-dialog h2{margin:0 0 14px;font-size:1.3rem}.info-dialog h3{margin:18px 0 7px;font-size:.9rem}.info-dialog p{color:var(--muted);font-size:.88rem;line-height:1.6}.formula{padding:11px 13px;border-left:2px solid var(--wave);background:var(--field);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)!important}
@media(max-width:900px){.control-bar{grid-template-columns:1.2fr repeat(4,1fr) auto}.language-label{display:none}.stage{padding:9px 12px}.control-area{padding:8px 12px 9px}.readout{max-width:calc(100% - 24px)}}
@media(max-height:500px) and (orientation:landscape){.topbar{min-height:49px;padding:7px 12px 6px}.series,.version{display:inline;font-size:.64rem}.identity{gap:7px}.divider{display:block;height:15px}.title-group{display:flex;align-items:baseline;gap:8px}h1{font-size:1.18rem}.title-group p{margin:0;font-size:.66rem}.stage{padding:6px 10px}.legend{top:7px;left:7px;padding:5px 7px}.readout{right:7px;bottom:7px;padding:5px 7px}.control-area{padding:5px 10px 6px}.control-bar{grid-template-columns:1.25fr repeat(4,1fr) auto;gap:5px}fieldset{padding:3px 6px 4px}legend{font-size:.62rem}.mode-field select{min-height:29px;margin:0}.transport{gap:3px}.transport button{min-width:62px;padding:2px 7px;font-size:.7rem}.top-actions select{min-height:31px}.icon-button{width:31px;height:31px}}
@media(max-width:700px) and (orientation:portrait){body{overflow:auto}.app-shell{height:auto;min-height:100svh}.stage{min-height:46svh}.control-bar{grid-template-columns:1fr 1fr}.mode-field,.transport{grid-column:1/-1}.transport{grid-template-columns:1fr 1fr}.version,.series{display:none}}