:root{--ink:#071a31;--muted:#596b80;--blue:#087ebd;--bright:#18a9e0;--line:#dce4ec;--paper:#f5f8fb;--green:#17694d;--pass:#14a054;--fail:#c8412f;--partial:#d08a1e;--skip:#b7c3cf;--previous:#14a05473;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--dark:#071321;--bar:#0e2033;--header:3.25rem;--gap:.875rem;color-scheme:light;font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;font-synthesis:none}

/* One screen at any desktop size: the whole dashboard is laid out in rem, and 1rem follows
   the viewport (16px at 1920 x 940, i.e. 1080p; ~21px on 2K or 4K at 150%; 32px on 4K at 100%). */
html{font-size:clamp(11px,min(.8333vw,1.702vh),34px)}

*{box-sizing:border-box}
body{margin:0;background:#fff}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:disabled{cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,label:has(input:focus-visible){outline:3px solid var(--bright);outline-offset:3px}
button svg{height:1.25em;width:1.25em;fill:currentColor}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:20px;top:-100px;padding:14px;background:#fff;z-index:100}
.skip-link:focus{top:12px}
.wrap{width:min(82.5rem,calc(100% - 4rem));margin-inline:auto}
code{font:.92em var(--mono)}


/* Compact header. */
.site-header{height:var(--header);border-bottom:1px solid var(--line)}
.header-inner{height:100%;display:flex;align-items:center;gap:1.5rem;padding-inline:1.25rem}
.wordmark{font-size:1.45rem;font-weight:850;letter-spacing:-.06em;white-space:nowrap}
.wordmark>span:first-child{color:var(--blue)}
.brand-chip{display:inline-flex;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;background:#e7f5fc;color:var(--blue);border-radius:.3rem;font-size:1.2rem;letter-spacing:0;margin-left:.4rem;vertical-align:.15rem}
.tagline{margin:0;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.affiliation{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.institution-logo{display:flex;align-items:center}
.institution-logo img{display:block;height:1.9rem;width:auto}
.delft-logo{border-left:1px solid var(--line);padding-left:.8rem}
.lab-name{font-size:.62rem;line-height:1.35;color:var(--muted)}
nav{display:flex;gap:1.25rem;font-size:.78rem;font-weight:600;white-space:nowrap}
nav a:last-child{border-left:1px solid var(--line);padding-left:1.25rem}


/* Dashboard: controls | live view + plots | steps + results. */
.dashboard{display:grid;grid-template-columns:20rem minmax(0,1fr) 23.5rem;gap:var(--gap);padding:.75rem 1.25rem;height:calc(100vh - var(--header));height:calc(100dvh - var(--header));min-height:34rem;background:var(--paper);border-bottom:1px solid var(--line)}
.control-panel,.run-panel{min-width:0;min-height:0;overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:.62rem;padding:.95rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:.6rem}
.control-panel>*,.run-panel>*{flex-shrink:0}
/* Once a run's downloads are listed, the explanatory lead and timing note give way to them. */
.control-panel:has(#downloads:not([hidden])) :is(.lead,#timing-note){display:none}

.eyebrow{font-size:.62rem;letter-spacing:.14em;font-weight:700;color:var(--blue);margin:0 0 .45rem}
h1{font-size:1.5rem;line-height:1.12;letter-spacing:-.045em;margin:0 0 .3rem;font-weight:700}
h1 em{font-family:Georgia,serif;font-weight:normal;color:var(--blue);white-space:nowrap}
.lead{font-size:.68rem;line-height:1.45;color:var(--muted);margin:0}

/* The prompt: the example's name over an editable ASCII box; a dialog tiles the examples. The seed box sits under it. */
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .4rem}
.picker-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--muted);margin:0}
.examples-button{display:inline-flex;align-items:center;gap:.1rem;flex-shrink:0;padding:.22rem .4rem .22rem .7rem;border:0;border-radius:1rem;background:var(--blue);color:#fff;font-size:.64rem;font-weight:650;transition:background .15s}
.examples-button:hover{background:#046699}
.examples-button:disabled{background:#9fb3c4;cursor:default}
.examples-button svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prompt-card{display:flex;flex-direction:column;gap:.3rem;padding:.65rem .8rem .6rem;background:#f1f9ff;border:1.5px solid var(--blue);border-radius:.55rem;box-shadow:0 .25rem .9rem #087ebd1f}
.prompt-card.locked{border-color:#9cc4de;box-shadow:none}
.prompt-top{display:flex;align-items:center;gap:.45rem;margin:0}
.prompt-top strong{font-size:.9rem;font-weight:700;line-height:1.25;margin-right:auto}
.lang-tag{flex-shrink:0;padding:.05rem .3rem;border-radius:.25rem;background:#fff3dc;color:#8a5a0b;font-size:.6rem;font-weight:700;letter-spacing:.04em;border:1px solid #f1d9ac}
.prompt-box{display:block;width:100%;height:5.7rem;margin:0;padding:.4rem .5rem;resize:none;overflow:auto;scrollbar-width:thin;border:1px solid #b8cfe0;border-radius:.35rem;background:#fff;color:var(--ink);font:400 .82rem/1.42 Georgia,serif;overflow-wrap:anywhere}
.prompt-box:lang(zh){font-family:"Noto Serif CJK SC","Songti SC","SimSun",Georgia,serif;line-height:1.55}
.prompt-box:read-only{background:#f7fbfe;color:#2d445b}
.prompt-box::placeholder{color:var(--muted);opacity:1}
.prompt-box[aria-invalid="true"]{border-color:var(--fail);background:#fff6f4}
.prompt-gloss{margin:0;font-size:.62rem;line-height:1.4;color:var(--muted);font-style:italic}
.prompt-tools{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;min-height:1.05rem}
.prompt-count{margin-right:auto;font:.6rem var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.prompt-count.over{color:#ac3028;font-weight:700}
.text-button{position:relative;padding:0;border:0;background:none;color:#066aa3;font-size:.62rem;font-weight:650;text-decoration:underline;text-underline-offset:.15rem}
.text-button::after{content:"";position:absolute;inset:-.45rem -.4rem}
.text-button:hover{color:#034a73}
.text-button:disabled{color:#8ea3b5;cursor:default;text-decoration:none}
.prompt-note{margin:0;font-size:.58rem;line-height:1.4;color:var(--muted)}
.prompt-note:empty{display:none}
.prompt-note.error{color:#ac3028;font-weight:600}
.prompt-hint{margin:0;font-size:.6rem;line-height:1.4;color:var(--muted)}
/* The card gives room to a note before the control panel has to scroll: an error takes the hint's place, and the box shrinks to two lines. */
.prompt-note.error+.prompt-hint{display:none}
.control-panel>.prompt-picker{flex-shrink:1;min-height:0;display:flex;flex-direction:column}
.prompt-picker>.prompt-card{min-height:0}
.prompt-card>.prompt-box{min-height:3.4rem}

.seed-row{display:flex;align-items:center;gap:.45rem;margin-top:.5rem}
.seed-row label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#seed{width:7.2rem;min-width:0;height:1.75rem;padding:0 .5rem;border:1px solid #b8cfe0;border-radius:.35rem;font:.78rem var(--mono);color:var(--ink);background:#fff;font-variant-numeric:tabular-nums}
#seed:disabled{background:#f3f6f9;color:#6d7f91;border-color:var(--line)}
#seed[aria-invalid="true"]{border-color:var(--fail);background:#fff6f4;color:#973c20}
#seed-reset{height:1.75rem;padding:0 .55rem;border:1px solid #b8cfe0;border-radius:.35rem;background:#fff;color:var(--blue);font-size:.62rem;font-weight:650;white-space:nowrap}
#seed-reset:hover{background:#eef7fd}
#seed-reset:disabled{color:#8ea3b5;cursor:default}
.seed-hint{margin:.3rem 0 0;font-size:.58rem;line-height:1.4;color:var(--muted)}
.seed-hint.unverified{color:#8a5a0b}
.seed-hint.invalid{color:#ac3028;font-weight:600}

/* The dialog. */
.prompt-dialog{width:min(92rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:.8rem;color:var(--ink);background:#fff;box-shadow:0 1.5rem 4rem #071a3159;overflow:auto;overscroll-behavior:contain}
.prompt-dialog::backdrop{background:#071a3180;backdrop-filter:blur(2px)}
.dialog-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.2rem 1.4rem 1rem;background:#fff;border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:1.35rem;letter-spacing:-.03em;margin:0 0 .35rem}
.dialog-head p:not(.eyebrow){font-size:.74rem;line-height:1.5;color:var(--muted);margin:0;max-width:58rem}
.dialog-close{flex-shrink:0;width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);font-size:1.3rem;line-height:1}
.dialog-close:hover{color:var(--ink);border-color:#9cc4de}
.prompt-groups{display:flex;flex-direction:column;gap:1.1rem;padding:1rem 1.4rem 1.4rem}
.prompt-group h3{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .55rem}
.prompt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));gap:.6rem}
.prompt-option{display:flex;flex-direction:column;gap:.25rem;padding:.7rem .8rem;text-align:left;color:var(--ink);background:var(--paper);border:1px solid #dbe4ec;border-radius:.5rem;transition:border-color .15s,background .15s,box-shadow .15s}
.prompt-option:hover,.prompt-option:focus-visible{background:#fff;border-color:#9cc4de;box-shadow:0 .2rem .8rem #0d315114}
.option-top{display:flex;align-items:center;gap:.4rem}
.option-top strong{font-size:.8rem;line-height:1.3;margin-right:auto}
.prompt-option small{font-size:.62rem;font-weight:600;color:#52728a}
.prompt-option .option-text{font-family:Georgia,serif;font-size:.72rem;line-height:1.45;color:#2d445b}
.prompt-option .option-text:lang(zh){font-family:"Noto Serif CJK SC","Songti SC","SimSun",Georgia,serif}
.prompt-option .option-gloss{font-size:.64rem;line-height:1.4;color:var(--muted);font-style:italic}
.prompt-option .option-meta{font:.6rem var(--mono);color:#52728a;margin-top:auto;padding-top:.2rem}
.prompt-option[aria-pressed="true"]{background:#fff;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.prompt-option[aria-pressed="true"] .option-top strong:after{content:" · current";font-size:.62rem;font-weight:500;color:var(--blue)}

.prompt-meta{margin:0;font:.6rem var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.launch{display:flex;align-items:center;gap:.8rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:0;border-radius:.45rem;min-height:2.6rem;padding:.55rem 1.2rem;font-size:.9rem;font-weight:650;transition:background .15s,transform .15s}
.primary{flex:1;background:var(--blue);color:#fff;box-shadow:0 .3rem .9rem #087ebd26}
.primary:hover{background:#046699;transform:translateY(-1px)}
.primary:disabled{background:#497b98;transform:none}
.button-timer{font:1.2rem var(--mono);font-variant-numeric:tabular-nums;color:var(--blue);min-width:4.5rem;text-align:right}
#availability{font-size:.64rem;color:var(--muted);margin:-.3rem 0 0;min-height:1.3em}

/* ChipLaya's reading of the sentence. */
.decision-strip{display:flex;flex-direction:column;gap:.3rem;padding-top:.5rem;border-top:1px solid #dde8ef}
.decision-head{margin:0;font:600 .6rem var(--mono);color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.decision-strip.idle .decision-head{color:var(--muted);font-weight:400}
.decision-chips{display:flex;flex-wrap:wrap;gap:.22rem}
.decision-chips:empty{display:none}
.decision-chips span{background:#e8f2fa;color:#274864;padding:.14rem .35rem;border-radius:.25rem;font-size:.58rem;white-space:nowrap}
.decision-chips span b{font:500 .54rem var(--mono);color:#4f7390;margin-left:.2rem}
.decision-chips span.family{background:#dff0fb;color:#0b4f78;font-weight:650}
.decision-chips span.unused{background:#fbf0d9;color:#764a05;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.decision-reqs{margin:0;font-size:.58rem;line-height:1.45;color:#3f566d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.decision-reqs:empty{display:none}

.run-timing{background:#f3f8fc;border:1px solid #e1edf5;border-radius:.45rem;padding:.55rem .7rem}
.total-timing{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.total-timing>span{font-size:.62rem;color:var(--muted)}
.total-timing output{font:1.4rem var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.total-timing small{font-size:.7rem;margin-left:.2rem}
.phase-timing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem .45rem;margin-top:.4rem}
.phase-timing span{display:block;font-size:.52rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase-timing output{display:block;font:.68rem var(--mono);margin-top:.1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.phase-timing output.skipped{color:#9aa7b5;font-style:italic;font-family:inherit;font-size:.62rem}
.phase-timing .mark-cell output{color:var(--green)}
#timing-note{font-size:.54rem;line-height:1.45;margin:.4rem 0 0;color:var(--muted)}

.downloads{display:flex;flex-wrap:wrap;gap:.2rem .65rem;font-size:.6rem;line-height:1.35}
.downloads>span{width:100%;font-size:.54rem;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.downloads a{color:var(--blue);font-weight:600;cursor:pointer}
.downloads a:after{content:" ↓"}
.downloads a:hover{text-decoration:underline}


/* The viewer: two panes from one synchronized capture, or the HTML circuit view. The capture
   is 2560 x 1080 (demo/tiles.py): xschem's 1600 px on the left, Magic's 960 px on the right.
   Both panes keep their share of it at one height, the most the plots leave free, and each
   crops its part of the picture inside a zoom layer that the visitor can zoom and pan. */
.stage-area{--cap-w:2560;--cap-h:1080;--xs-w:1600;--mg-w:960;--chrome:7.6rem;--plots-min:13.5rem;
  --pane-h:min(calc(100cqh - var(--plots-min) - var(--chrome) - var(--gap)),calc((100cqw - 1px) * var(--cap-h) / var(--cap-w)));container-type:size;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}
.viewer{flex:none;display:flex;flex-direction:column;background:var(--dark);border-radius:.6rem;overflow:hidden;box-shadow:0 .5rem 2rem #0d315112}
.viewer-bar{display:flex;align-items:center;gap:.9rem;height:2.4rem;flex-shrink:0;padding:0 .8rem;background:var(--bar);color:#b8c9da;font-size:.62rem;letter-spacing:.08em}
.live-state{display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.status-dot{width:.4rem;height:.4rem;border-radius:50%;background:#718296}
.status-dot.active{background:#51d3a2;box-shadow:0 0 .6rem #51d3a260}
.circuit-name{display:flex;align-items:baseline;gap:.55rem;min-width:0;overflow:hidden;letter-spacing:0}
.circuit-name h2{font-size:.8rem;margin:0;color:#fff;font-weight:600;white-space:nowrap}
.run-seed{flex-shrink:0;padding:.05rem .35rem;border-radius:.25rem;background:#1b3550;color:#9fd6f2;font:.6rem var(--mono);white-space:nowrap}
.run-seed.unverified{background:#3a2c12;color:#f3c77a}
#topology-note{font:.64rem var(--mono);color:#8da5ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view-switch{display:flex;gap:.25rem;margin-left:auto;flex-shrink:0}
.view-switch button{background:transparent;color:#bacfe0;border:1px solid #37516a;border-radius:.25rem;padding:.3rem .6rem;font-size:.66rem}
.view-switch button[aria-pressed="true"]{background:#d9edf9;color:#103854;border-color:#d9edf9}
.view-switch button:disabled{opacity:.45;cursor:default}
.icon-button{padding:0 0 0 .7rem;background:none;border:0;border-left:1px solid #314355;color:#b8c9da;font-size:1.1rem;line-height:1;min-width:2rem;min-height:1.6rem}

.screen{position:relative;display:flex;justify-content:center;background:var(--dark);overflow:hidden}
.live-workspace{display:grid;grid-template-columns:auto auto;gap:1px;background:#314355}
.tool-pane{min-width:0;display:flex;flex-direction:column;background:var(--dark)}
.tool-heading{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:0;min-width:100%;height:1.8rem;padding:0 .7rem;color:#c6d9e9;border-top:1px solid #25384d;white-space:nowrap}
.tool-heading strong{font:600 .74rem var(--mono);color:#fff}
.tool-heading>span{margin-left:auto;min-width:0;font-size:.62rem;overflow:hidden;text-overflow:ellipsis}
.tool-screen{position:relative;overflow:hidden;background:#000;height:var(--pane-h);touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}
.xschem-screen{aspect-ratio:var(--xs-w)/var(--cap-h)}
.magic-screen{aspect-ratio:var(--mg-w)/var(--cap-h)}
.tool-screen:focus-visible{outline:2px solid var(--bright);outline-offset:-2px}
.tool-screen.zoomed{touch-action:none;cursor:grab}
.tool-screen.dragging{cursor:grabbing}
.zoom-layer{position:absolute;inset:0;overflow:hidden;transform-origin:0 0;user-select:none;-webkit-user-select:none}
.zoom-layer img{position:absolute;top:0;left:0;max-width:none;height:100%;object-fit:fill;-webkit-user-drag:none;-webkit-touch-callout:none}
.xschem-screen img{width:calc(100% * var(--cap-w) / var(--xs-w))}
.magic-screen img{width:calc(100% * var(--cap-w) / var(--mg-w));left:calc(-100% * var(--xs-w) / var(--mg-w))}
.zoom-controls{display:flex;flex:none;align-items:center;gap:2px}
.zoom-controls button{min-width:1.35rem;height:1.25rem;padding:0 .3rem;background:transparent;color:#bacfe0;border:1px solid #37516a;border-radius:.25rem;font:600 .66rem/1 var(--mono);cursor:pointer}
.zoom-controls [data-zoom="reset"]{min-width:2.2rem}
.zoom-controls button:hover:not([aria-disabled="true"]){background:#1b3550;color:#fff}
.zoom-controls button[aria-disabled="true"]{opacity:.4;cursor:default}
.zoom-controls button:focus-visible{outline-width:2px;outline-offset:1px}
.tool-note{width:0;min-width:100%;height:1.8rem;margin:0;padding:0 .7rem;color:#a7bdcf;font:.6rem/1.8rem var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid #25384d}

.magic-waiting,.magic-unavailable{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.5rem;background:#071321ed;color:#8eaac0;text-align:center}
.magic-waiting strong,.magic-unavailable strong{font-size:.9rem;color:#d8e9f5;font-weight:500}
.magic-waiting span,.magic-unavailable span{max-width:19rem;font-size:.7rem;line-height:1.7}
.magic-unavailable{background:repeating-linear-gradient(135deg,#0a1a2b 0 .6rem,#0c1e31 .6rem 1.2rem)}
.magic-unavailable:before{content:"";width:2.4rem;height:2.4rem;border:2px dashed #4a6a86;border-radius:.4rem}
.magic-unavailable .reason{font:.7rem/1.6 var(--mono);color:#f3c77a;background:#1a2638;padding:.45rem .7rem;border-radius:.3rem;max-width:22rem}

/* The HTML circuit view: the best design's structure, sizes, child blocks and netlist. */
.circuit-view{position:absolute;inset:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#2c4660 transparent;padding:.8rem 1rem 1rem;background:linear-gradient(#0a1828,#08131f);color:#cfe0ee;font-size:.66rem}
.cv-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding-bottom:.45rem;border-bottom:1px solid #22384e}
.cv-head strong{font:600 .92rem var(--mono);color:#fff;overflow-wrap:anywhere}
.cv-head span{flex-shrink:0;font:.62rem var(--mono);color:#7dcbee}
.cv-head span.pass{color:#6fdca4}
.cv-sub{margin:.35rem 0 0;font-size:.6rem;color:#8fa9bf}
.cv-binding{margin:.35rem 0 0;font:.6rem var(--mono);color:#f3a38f}
.cv-reason{margin:0 0 .6rem;padding:.4rem .6rem;border-radius:.3rem;background:#1a2638;color:#f3c77a;font:.6rem/1.5 var(--mono)}
.cv-label{margin:.7rem 0 .3rem;font-size:.54rem;font-weight:700;letter-spacing:.12em;color:#7f9ab0;text-transform:uppercase}
.cv-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.1rem;font:.64rem var(--mono)}
.cv-slots div{display:flex;justify-content:space-between;gap:.5rem;border-bottom:1px dotted #1f3347;padding:.14rem 0;min-width:0}
.cv-slots span{color:#8fa9bf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-slots b{color:#fff;font-weight:500;white-space:nowrap}
.cv-child{margin-top:.5rem;padding:.4rem .6rem .5rem;border:1px solid #22384e;border-left:3px solid #2f6e98;border-radius:.3rem;background:#0b1d30}
.cv-child p{margin:0 0 .25rem;font:.66rem var(--mono);color:#fff}
.cv-child p b{color:#7dcbee;font-weight:600;margin-right:.4rem}
.cv-netlist{margin:.2rem 0 0;max-height:16rem;overflow:auto;scrollbar-width:thin;padding:.5rem .6rem;border-radius:.3rem;background:#050d16;color:#b4c9da;font:.56rem/1.5 var(--mono);white-space:pre}
.cv-note{margin:.3rem 0 0;font:.56rem var(--mono);color:#6d8aa2}

.screen-note{position:absolute;left:1rem;bottom:3.2rem;padding:.8rem 1rem;background:#071a31ed;border:1px solid #466683;border-radius:.3rem;color:#fff;box-shadow:0 .2rem .9rem #0003}
.screen-note span{font-size:.58rem;letter-spacing:.14em;color:#7dcbee}
.screen-note p{font-size:.8rem;margin:.35rem 0 0}
#layout-frame{display:block;width:100%;height:calc(var(--pane-h) + 3.6rem);object-fit:contain;padding:.6rem;background:#fff}
.viewer-footer{display:flex;justify-content:space-between;align-items:center;gap:.8rem;height:1.5rem;flex-shrink:0;padding:0 .8rem;background:var(--bar);color:#94aabe;font-size:.6rem;white-space:nowrap;overflow:hidden}
#frame-note{min-width:0;overflow:hidden;text-overflow:ellipsis}
.zoom-hint{flex:none;margin-left:auto;color:#7f9ab0}
.zoom-hint .hint-ctrl,.zoom-hint .hint-touch{display:none}
.viewer:fullscreen,.viewer.expanded{--pane-h:min(calc(100vh - 7.8rem),calc((100vw - 1px) * var(--cap-h) / var(--cap-w)));width:100%;height:100%;border-radius:0}
.viewer.expanded{position:fixed;inset:0;z-index:50}
.viewer:fullscreen .screen,.viewer.expanded .screen{flex:1;align-items:center}
.viewer:fullscreen .tool-screen,.viewer.expanded .tool-screen{touch-action:none}
.viewer:fullscreen #layout-frame,.viewer.expanded #layout-frame{height:100%}


/* Plots: live convergence (left) and the result tabs (right). */
.plots{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.stage-area>.plots{flex:1;min-height:var(--plots-min)}
.plot-card{margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;padding:.55rem .8rem .35rem;background:#fff;border:1px solid var(--line);border-radius:.6rem}
.plot-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-shrink:0;min-height:1.35rem}
.plot-card h3{font-size:.8rem;margin:0;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.plot-key{display:flex;align-items:center;gap:.3rem;min-width:0;overflow:hidden;font-size:.58rem;color:var(--muted);white-space:nowrap}
.plot-key i{flex-shrink:0;height:2px;width:.75rem;background:var(--sc,var(--blue));margin-left:.35rem}
.plot-key i.k-distance{background:#087ebd}
.plot-key i.k-goal{background:var(--pass)}
.plot-key i.t-points{width:.4rem;height:.4rem;border-radius:50%}
.plot-key i.t-bars{width:.55rem;height:.55rem;border-radius:1px}
.plot-key i.s-schematic{background:repeating-linear-gradient(90deg,var(--sc) 0 3px,transparent 3px 5px);opacity:.7}
.plot-key i.s-estimate{opacity:.45}
.plot-key i.s-input{height:3px;opacity:.55}
.plot-key i.m-dot{width:.4rem;height:.4rem;border-radius:50%}
.plot-key i.m-ring{box-sizing:border-box;width:.55rem;height:.55rem;border-radius:50%;background:none;border:1.5px solid var(--sc)}
.plot-key i.m-cross{width:.55rem;height:.55rem;background:linear-gradient(45deg,transparent 40%,var(--sc) 40% 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,var(--sc) 40% 60%,transparent 60%)}
.plot-area{position:relative;flex:1;min-height:0;margin-top:.25rem}
.plot-area>p{position:absolute;inset:.4rem .4rem .4rem 1.8rem;display:flex;align-items:center;justify-content:center;margin:0;font:.66rem var(--mono);color:#8293a5;text-align:center;background:repeating-linear-gradient(0deg,transparent,transparent 2.2rem,#eef2f6 2.25rem),repeating-linear-gradient(90deg,transparent,transparent 4.4rem,#eef2f6 4.45rem)}
.plot-area svg{position:absolute;inset:0;width:100%;height:100%;font-family:Arial,sans-serif}
.plot-key.legend{flex-shrink:0;flex-wrap:wrap;min-height:1.05em;margin-top:.1rem;gap:.1rem .15rem}
.plot-key.legend span{display:inline-flex;align-items:center;gap:.25rem;margin-right:.45rem}
.plot-key.legend i{margin-left:0}
.plot-caption{flex-shrink:0;margin:.15rem 0 0;font-size:.56rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-tabs{display:flex;flex-wrap:wrap;gap:.2rem;min-width:0;overflow:hidden}
.result-tabs button{flex-shrink:0;padding:.18rem .45rem;border:1px solid transparent;border-radius:.3rem;background:none;color:var(--muted);font-size:.64rem;font-weight:600;white-space:nowrap}
.result-tabs button:hover:not(:disabled){color:var(--ink);background:#f1f6fa}
.result-tabs button[aria-selected="true"]{color:#0b4f78;background:#e6f4fd;border-color:#b9dcf1}
.result-tabs button:disabled{cursor:default;opacity:.55}

/* SVG plot styles (charts.mjs): colour index c0-c5, style s-*, type t-*. */
.plot-area .grid{stroke:#e9eef3;stroke-width:1}
.plot-area .grid.vertical{stroke:#f0f3f7}
.plot-area .axis{stroke:#c3cfda;stroke-width:1}
.plot-area .axis.zero{stroke:#8ea1b3}
.plot-area text{fill:#697c8e}
.plot-area .axis-title{fill:#526579;font-weight:600}
.plot-area .limit{stroke:#c8412f;stroke-width:1.2;stroke-dasharray:4 3;opacity:.75}
.plot-area .limit-text{fill:#b2402c;font-weight:600}
.plot-area .limit-text,.plot-area .vline-text,.plot-area .margin-text,.plot-area .mark-text{paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.plot-area .vline{stroke:var(--pass);stroke-width:1.2;stroke-dasharray:3 3}
.plot-area .vline-text{fill:#17694d;font-weight:600}
.plot-area .mark{fill:#9aabbb}
.plot-area .mark.pass{fill:var(--pass)}
.plot-area .mark.fail{fill:var(--fail)}
.plot-area .mark-text{fill:#8293a5;font-style:italic}
.plot-area .margin-text{fill:#33495f}
.c0{--sc:#087ebd}.c1{--sc:#8b88b7}.c2{--sc:#de892f}.c3{--sc:#2a9d8f}.c4{--sc:#b5476b}.c5{--sc:#6b7f94}
.series.s-pass{--sc:var(--pass)}
.series.s-fail{--sc:var(--fail)}
.series.s-estimate{--sc:#7f93a6}
.plot-area path.series{fill:none;stroke:var(--sc);stroke-width:2;stroke-linejoin:round}
.plot-area path.series.s-schematic{stroke-width:1.6;stroke-dasharray:5 4;opacity:.6}
.plot-area path.series.s-secondary{stroke-width:1.6}
.plot-area circle.series,.plot-area rect.series{fill:var(--sc)}
.plot-area circle.series.s-estimate{opacity:.4}
/* Simulation-results comparison: the test input is a wide pale line, the outputs carry markers. */
.plot-area path.series.s-input{stroke-width:2.6;opacity:.5}
.plot-area path.series.s-ideal{stroke-width:1.5}
.plot-area path.series.has-marker{stroke-width:1.1;opacity:.75}
.plot-area circle.series.m-ring{fill:none;stroke:var(--sc);stroke-width:1.5}
.plot-area path.series.m-cross{stroke-width:1.7;stroke-linecap:round;opacity:1}
.plot-area circle.series.s-schematic,.plot-area rect.series.s-schematic{opacity:.55}
.plot-area .mark.muted{fill:#9aabbb}


/* Run panel: title, flowchart, progress, tiles and facts. */
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.panel-title h2{font-size:.9rem;margin:0;white-space:nowrap}
.title-seed{font:500 .66rem var(--mono);color:var(--muted);margin-left:.2rem}
.state-badge{font-size:.66rem;color:#53718c;background:#edf3f7;padding:.2rem .5rem;border-radius:.25rem;white-space:nowrap}
.state-badge.success{color:var(--green);background:#e9f6ef}
.state-badge.warn{color:#8a5a0b;background:#fff3dc}
.state-badge.failed{color:#ac3028;background:#fff0ec}
.state-badge.muted{color:#6d7f91;background:#eef1f4}
.state-badge.running{color:var(--blue);background:#e6f4fd}

/* The step flowchart. Every state is one data-state; the connector below a step and the
   arrowhead into the next take data-connector / data-arrow (flow-view.mjs). */
.stage-flow{--gutter:1.45rem;--mark:1.45rem;position:relative;flex:1 0 auto;max-height:36rem;display:flex;flex-direction:column}
.stages{list-style:none;margin:0;padding:0 0 0 var(--gutter);display:flex;flex-direction:column;flex:1 0 auto}
.stages li{flex:1 0 auto;display:flex;align-items:flex-start;gap:.6rem;position:relative;padding-bottom:.62rem;color:#8996a7}
.stages li:last-child{flex-grow:0;padding-bottom:0}
.stages li:not(:last-child):after{content:"";position:absolute;left:calc(var(--mark) / 2 - 1px);top:calc(var(--mark) + .08rem);bottom:.36rem;border-left:2px solid var(--c,#dfe6ed);transition:border-color .3s}
.stages li:not(:first-child):before{content:"";position:absolute;z-index:2;left:calc(var(--mark) / 2 - .27rem);top:-.38rem;border-left:.27rem solid transparent;border-right:.27rem solid transparent;border-top:.34rem solid var(--a,#c9d6e1);transition:border-color .3s}
.stages li[data-connector=pass]:after{--c:var(--pass)}
.stages li[data-connector=fail]:after{--c:var(--fail)}
.stages li[data-connector=skip]:after{--c:var(--skip);border-left-style:dashed}
.stages li[data-connector=previous]:after{--c:#14a05459}
.stages li[data-arrow=pass]:before{--a:var(--pass)}
.stages li[data-arrow=fail]:before{--a:var(--fail)}
.stages li[data-arrow=skip]:before{--a:var(--skip)}
.stages li[data-arrow=previous]:before{--a:#14a05466}
.stages li[data-arrow=active]:before{--a:var(--blue)}
.step-text{min-width:0;flex:1}
.stages strong{display:block;font-size:.76rem;font-weight:600;line-height:1.2;margin-top:.1rem}
.stages small{display:block;font-size:.6rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stages li[data-state=active]{color:var(--ink)}
.stages li[data-state=done],.stages li[data-state=partial],.stages li[data-state=previous]{color:#46607a}
.stages li[data-state=done] small{color:var(--green)}
.stages li[data-state=partial] small{color:#9a6212}
.stages li[data-state=failed]{color:#46607a}
.stages li[data-state=failed] small{color:#ac3028}
.stages li[data-state=skipped]{color:#9aa7b5}
.stages li[data-state=skipped] small{font-style:italic}
.stages li[data-state=previous] small{color:#6f8499}

.step-mark{position:relative;z-index:1;width:var(--mark);height:var(--mark);flex-shrink:0;display:grid;place-items:center;border:1px solid #d3dde6;border-radius:50%;background:#fff;color:#7e8fa1;font:.6rem var(--mono);transition:background .25s,border-color .25s,color .25s}
.step-mark>*{grid-area:1/1}
.step-mark .n{font-weight:400;line-height:1}
.step-mark svg{display:none;width:.92rem;height:.92rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.step-mark .ok,.step-mark .no{stroke-width:2.4}
.step-mark .re{display:none;position:absolute;top:-.36rem;right:-.42rem;width:.78rem;height:.78rem;border-radius:50%;background:#fff;border:1px solid #9fd9b6;color:var(--pass);font:700 .5rem/.72rem var(--mono);text-align:center;font-style:normal}
[data-state=active]>.step-mark{color:var(--blue);border-color:var(--blue);background:#f4fbff;animation:halo 1.8s ease-in-out infinite}
[data-state=active]>.step-mark .n{display:none}
[data-state=active]>.step-mark .ic{display:block;--play:running}
[data-state=done]>.step-mark{background:var(--pass);border-color:var(--pass);color:#fff}
[data-state=done]>.step-mark .n,[data-state=failed]>.step-mark .n,[data-state=previous]>.step-mark .n{display:none}
[data-state=done]>.step-mark .ok{display:block;animation:check-in .32s ease-out}
[data-state=partial]>.step-mark{border:2px solid var(--partial);color:#9a6212;background:#fff8ec;font-size:.5rem;font-weight:700;letter-spacing:-.04em}
[data-state=failed]>.step-mark{background:var(--fail);border-color:var(--fail);color:#fff}
[data-state=failed]>.step-mark .no{display:block;animation:check-in .32s ease-out}
[data-state=skipped]>.step-mark{border:1px dashed var(--skip);color:#9aa7b5;background:#fbfcfd}
[data-state=previous]>.step-mark{background:var(--previous);border-color:transparent;color:#fff}
[data-state=previous]>.step-mark .ok{display:block}
[data-state=previous]>.step-mark .re{display:block}
@keyframes halo{0%,100%{box-shadow:0 0 0 .14rem #d8eefa}50%{box-shadow:0 0 0 .32rem #d8eefa66}}
@keyframes check-in{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* Step 3: the design loop with four live chips and a return arrow. */
.design-step{flex-wrap:wrap}
.design-step>.step-text{flex:1 1 0;padding-right:3rem}
.design-loop{position:relative;flex:0 0 calc(100% - var(--mark) - .6rem);min-width:0;display:flex;align-items:flex-start;gap:.3rem;margin:.28rem 0 0 calc(var(--mark) + .6rem);padding-bottom:.62rem}
.chips{position:relative;z-index:1;display:flex;align-items:stretch;flex:1;min-width:0}
.chip{flex:1 1 0;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.18rem;row-gap:.04rem;padding:.2rem .26rem .22rem;border:1px solid #e1e8ef;border-radius:.35rem;background:#fff;color:#9aa7b5;transition:background .25s,border-color .25s,color .25s}
.chip svg{width:.72rem;height:.72rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.chip .ok,.chip .no{display:none;stroke-width:2.4}
.chip b{font-size:.54rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip em{grid-column:1/-1;font:.5rem var(--mono);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em;color:inherit;opacity:.85}
.chip-arrow{flex:0 0 .5rem;align-self:center;position:relative;height:.5rem}
.chip-arrow:before{content:"";position:absolute;left:0;right:.12rem;top:50%;border-top:1px solid #b9c7d3}
.chip-arrow:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);border-top:.18rem solid transparent;border-bottom:.18rem solid transparent;border-left:.22rem solid #b9c7d3}
.chip[data-state=waiting]{border-color:#9cc4de;color:#2f6f98;background:#fff}
.chip[data-state=active]{border-color:var(--blue);color:var(--blue);background:#eaf6fd;box-shadow:0 0 0 .12rem #e0f1fb}
.chip[data-state=active] .ic{--play:running}
.chip[data-state=passed],.chip[data-state=done]{border-color:#8fd3aa;color:var(--green);background:#ebf8f0}
.chip[data-state=passed] .ic,.chip[data-state=done] .ic,.chip[data-state=rejected] .ic,.chip[data-state=failed] .ic{display:none}
.chip[data-state=passed] .ok,.chip[data-state=done] .ok{display:block;color:var(--pass)}
.chip[data-state=rejected],.chip[data-state=failed]{border-color:#eba99b;color:#ac3028;background:#fff3f0}
.chip[data-state=rejected] .no,.chip[data-state=failed] .no{display:block;color:var(--fail)}
.chip.pulse{animation:chip-pulse .9s ease-out}
@keyframes chip-pulse{0%{box-shadow:0 0 0 0 #14a05499}100%{box-shadow:0 0 0 .45rem #14a05400}}
.design-badge{position:absolute;right:0;top:.05rem;display:flex;align-items:baseline;gap:.12rem;min-width:2.3rem;justify-content:center;padding:.2rem .3rem;border:1px solid #d3dde6;border-radius:.6rem;background:#fff;color:#7e8fa1;font:600 .56rem/1 var(--mono);white-space:nowrap}
.design-badge i{display:inline-block;font-style:normal;font-size:.68rem;line-height:.6rem}
.design-badge em{font-style:normal;font-size:.5rem;padding:0 .12rem;border-radius:.15rem;background:#eef3f7}
.design-badge em:empty{display:none}
.design-arrow{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.design-arrow path{fill:none;stroke:#c9d6e1;stroke-width:1.3}
.design-arrow .head{fill:#c9d6e1;stroke:none}
.design-loop[data-arrow=idle] .design-arrow path{stroke:#9cc4de}
.design-loop[data-arrow=idle] .design-arrow .head{fill:#9cc4de}
.design-loop[data-arrow=phaseB] .design-arrow path{stroke:#86cfa3}
.design-loop[data-arrow=phaseB] .design-arrow .head{fill:#86cfa3}
.design-loop[data-arrow=feedback] .design-arrow path{stroke:var(--blue);stroke-width:1.8;stroke-dasharray:4 3;animation:loop-flow .6s linear infinite}
.design-loop[data-arrow=feedback] .design-arrow .head{fill:var(--blue)}
.design-loop[data-arrow=pass] .design-arrow path{stroke:var(--pass)}
.design-loop[data-arrow=pass] .design-arrow .head{fill:var(--pass)}
.design-loop[data-arrow=fail] .design-arrow path{stroke:var(--fail)}
.design-loop[data-arrow=fail] .design-arrow .head{fill:var(--fail)}
.design-step:has(.design-loop[data-state=running]) .design-badge{border-color:#9cc4de;color:var(--blue)}
.design-step:has(.design-loop[data-state=running]) .design-badge i{animation:loop-spin 2.4s linear infinite}
.design-step:has(.design-loop[data-arrow=phaseB]) .design-badge em{background:#dff4e7;color:var(--green)}
.design-step:has(.design-loop[data-state=done]) .design-badge{border-color:var(--pass);background:var(--pass);color:#fff}
.design-step:has(.design-loop[data-state=failed]) .design-badge{border-color:var(--fail);background:var(--fail);color:#fff}
.design-step:has(.design-loop[data-state=done]) .design-badge em,.design-step:has(.design-loop[data-state=failed]) .design-badge em{background:#ffffff33;color:#fff}

/* The layout loop: steps 6-10 repeat per iteration; the feedback arrow runs from 10 back into 6. */
.layout-arrow{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
.layout-arrow path{fill:none;stroke:#c9d6e1;stroke-width:1.5}
.layout-arrow .head{fill:#c9d6e1;stroke:none}
.layout-badge{position:absolute;left:.55rem;top:50%;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;min-width:1.2rem;padding:.28rem .12rem;background:#fff;border:1px solid #c9d6e1;border-radius:.6rem;color:#7e8fa1;font:600 .54rem/1.15 var(--mono);text-align:center;writing-mode:vertical-rl;white-space:nowrap}
.stage-flow[data-layout=off] .layout-arrow,.stage-flow[data-layout=off] .layout-badge{display:none}
.stage-flow[data-layout=running] .layout-arrow path{stroke:#9cc4de}
.stage-flow[data-layout=running] .layout-arrow .head{fill:#9cc4de}
.stage-flow[data-layout=running] .layout-badge{border-color:#9cc4de;color:var(--blue)}
.stage-flow[data-layout=feedback] .layout-arrow path{stroke:var(--blue);stroke-width:2.2;stroke-dasharray:5 4;animation:loop-flow .7s linear infinite}
.stage-flow[data-layout=feedback] .layout-arrow .head{fill:var(--blue)}
.stage-flow[data-layout=feedback] .layout-badge{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 .2rem #e9f6ff}
.stage-flow[data-layout=pass] .layout-arrow path{stroke:var(--pass)}
.stage-flow[data-layout=pass] .layout-arrow .head{fill:var(--pass)}
.stage-flow[data-layout=pass] .layout-badge{background:var(--pass);border-color:var(--pass);color:#fff}
.stage-flow[data-layout=fail] .layout-arrow path{stroke:var(--fail)}
.stage-flow[data-layout=fail] .layout-arrow .head{fill:var(--fail)}
.stage-flow[data-layout=fail] .layout-badge{background:var(--fail);border-color:var(--fail);color:#fff}
.stage-flow[data-layout=single] .layout-arrow path{stroke:#b7c3cf;stroke-dasharray:1.5 3;stroke-linecap:round}
.stage-flow[data-layout=single] .layout-arrow .head{fill:#b7c3cf}
.stage-flow[data-layout=single] .layout-badge{border-style:dashed}
.stage-flow[data-layout=single] .layout-badge.pass{color:var(--green);border-color:var(--pass)}
.stage-flow[data-layout=single] .layout-badge.fail{color:#ac3028;border-color:var(--fail)}
@keyframes loop-flow{to{stroke-dashoffset:-9}}
@keyframes loop-spin{to{transform:rotate(360deg)}}

progress{appearance:none;flex-shrink:0;border:0;height:3px;width:100%;background:#edf2f7;border-radius:4px}
progress::-webkit-progress-bar{background:#edf2f7;border-radius:4px}
progress::-webkit-progress-value{background:var(--blue);transition:width .2s}
progress::-moz-progress-bar{background:var(--blue)}
.run-message{font-size:.64rem;line-height:1.45;color:var(--muted);min-height:2.9em;margin:-.3rem 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.run-message button{margin-left:.3rem;padding:0;border:0;background:none;color:var(--blue);font-weight:650;text-decoration:underline}
.run-panel:has(#error:not([hidden])) .run-message{display:none}
.error{margin:0;padding:.5rem .7rem;color:#973c20;border:1px solid #f1c9b7;background:#fff6f1;border-radius:.35rem;font-size:.66rem;line-height:1.45}

/* Four tiles: goal first, then the prompt's requirements (target, achieved, margin, fidelity). */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .7rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line)}
.tile{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label fid" "value value" "target margin";row-gap:.06rem;align-items:baseline}
.tile .t-label{grid-area:label;font-size:.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .t-fid{grid-area:fid;font:.5rem var(--mono);color:#526579;background:#edf3f7;padding:.04rem .25rem;border-radius:.2rem;white-space:nowrap}
.tile .t-value{grid-area:value;font-size:1.22rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .t-target{grid-area:target;font:.54rem var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .t-margin{grid-area:margin;font:600 .54rem var(--mono);white-space:nowrap;text-align:right}
.tile[data-pass=true] .t-margin{color:var(--green)}
.tile[data-pass=false] .t-margin,.tile[data-pass=false] .t-value{color:#ac3028}
.tile[data-pass=true] .t-fid{background:#e9f6ef;color:var(--green)}
.tile[data-pass=false] .t-fid{background:#fff0ec;color:#ac3028}
.tile[data-mode=verified]{opacity:.5}
.tile[data-mode=verified] .t-value{color:#526579}
.tile[data-mode=estimate]{opacity:.62}
.tile[data-mode=estimate] .t-fid{background:#fff3dc;color:#8a5a0b}
.tile[data-mode=empty] .t-value,.tile[data-mode=target] .t-value{color:#b7c3cf}
.tiles-caption{grid-column:1/-1;margin:-.2rem 0 0;font-size:.52rem;color:#8a9aab;text-align:right}

.gate-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .6rem;padding:.55rem .7rem;background:var(--paper);border-radius:.45rem}
.gate-facts>div{min-width:0}
.gate-facts span{display:block;font-size:.56rem;color:var(--muted);margin-bottom:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gate-facts strong{display:block;font:500 .72rem var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gate-facts strong.pass,.physical-facts strong.pass{color:var(--green)}
.gate-facts strong.fail,.physical-facts strong.fail{color:#ac3028}
.gate-facts strong.warn{color:#9a6212}
.verification{font-size:.62rem;line-height:1.45;color:#788b9c;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.verification.success{color:var(--green)}
.verification.warn{color:#9a6212}
.verification.failed{color:#ac3028}

/* Step and chip icons: one animation each, played only while the step or chip is active
   (--play is set by [data-state=active]); static otherwise and under reduced motion. */
.ic *{transform-box:view-box;transform-origin:8px 8px}
.ic [class^="a-"]{animation-play-state:var(--play,paused)!important}
.ic .a-sweep{stroke-dasharray:12.4 12.4;animation:sweep 1.2s linear infinite}
.ic .a-b1{animation:branch 1.5s ease-in-out infinite}
.ic .a-b2{animation:branch 1.5s ease-in-out .5s infinite}
.ic .a-b3{animation:branch 1.5s ease-in-out 1s infinite}
.ic .a-spin{animation:loop-spin 2.4s linear infinite}
.ic .a-l1{animation:link 1.2s ease-in-out infinite}
.ic .a-l2{animation:link 1.2s ease-in-out .6s infinite}
.ic .a-draw{stroke-dasharray:20 20;animation:draw 1.6s ease-in-out infinite}
.ic .a-slide{animation:slide 1.3s ease-in-out infinite}
.ic .a-scan{animation:scan 1.4s ease-in-out infinite}
.ic .a-right{animation:swap-right 1.4s ease-in-out infinite}
.ic .a-left{animation:swap-left 1.4s ease-in-out infinite}
.ic .a-p1{animation:plate-up 1s ease-in-out infinite}
.ic .a-p2{animation:plate-down 1s ease-in-out infinite}
.ic .a-tilt{transform-origin:8px 4.6px;animation:tilt 1.6s ease-in-out infinite}
.ic .a-twinkle{animation:twinkle 1.1s ease-in-out infinite}
.ic .a-c1{animation:climb 1.1s ease-in-out infinite}
.ic .a-c2{animation:climb 1.1s ease-in-out .18s infinite}
.ic .a-ring{animation:loop-spin 3s linear infinite}
@keyframes sweep{0%{stroke-dashoffset:0}45%{stroke-dashoffset:-12.4}45.01%{stroke-dashoffset:12.4}100%{stroke-dashoffset:0}}
@keyframes branch{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes link{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes draw{0%{stroke-dashoffset:0}45%{stroke-dashoffset:-20}45.01%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}
@keyframes slide{0%,100%{transform:none;opacity:1}40%{transform:translateY(-3px);opacity:.2}}
@keyframes scan{0%,100%{transform:none}50%{transform:translateY(8px)}}
@keyframes swap-right{0%,100%{transform:none}50%{transform:translateX(-2px)}}
@keyframes swap-left{0%,100%{transform:none}50%{transform:translateX(2px)}}
@keyframes plate-up{0%,100%{transform:none}50%{transform:translateY(-1.2px)}}
@keyframes plate-down{0%,100%{transform:none}50%{transform:translateY(1.2px)}}
@keyframes tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes twinkle{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
@keyframes climb{0%,100%{transform:none;opacity:1}50%{transform:translateY(-2px);opacity:.45}}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
  .ic *,[data-state]>.step-mark,.step-mark svg,.chip,.design-badge i,.design-arrow path,.layout-arrow path{animation:none!important}
}


/* Detailed evidence below the dashboard. */
.details{padding:1.5rem 0 .5rem}
.demo-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:1.9rem;padding-bottom:1rem;color:var(--muted);font-size:.75rem;line-height:1.7}
.demo-caption p{margin:0;max-width:56rem}
.caption-label{font-weight:700;color:#243c55;margin-right:.3rem}
.view-only{white-space:nowrap;font:.7rem var(--mono);color:#71879c;padding-top:.1rem}
.physical-results{padding-top:.9rem;border-top:1px solid var(--line)}
.response-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:1.5rem 0 1rem}
.response-heading h3{font-size:1.25rem;margin:0;letter-spacing:-.025em}
.response-heading p{font-size:.75rem;color:var(--muted);margin:0}
.physical-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:1.25rem;background:var(--paper)}
.physical-facts span{display:block;font-size:.7rem;color:var(--muted);margin-bottom:.55rem}
.physical-facts strong{font-family:var(--mono);font-size:1rem;font-weight:500}
.comparison-scroll{overflow-x:auto;margin:1.25rem 0 1.6rem}
.comparison{width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}
.comparison caption{text-align:left;font-size:.75rem;color:var(--muted);padding-bottom:.75rem}
.comparison th,.comparison td{padding:.7rem 1rem;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.comparison th:first-child,.comparison td:first-child{text-align:left}
.comparison thead{background:#f3f8fc}
.comparison td.pass{color:var(--green);font-weight:600}
.comparison td.fail{color:#ac3028;font-weight:600}
.comparison.compact th,.comparison.compact td{padding:.45rem .6rem;font-size:.72rem}
.comparison.compact th,.comparison.compact td{text-align:left;white-space:normal}
.comparison.compact td:last-child{min-width:9rem}
.block-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:0 2.2rem;margin-top:1rem}
.block-table{min-width:0}
.block-table h4{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:.4rem 0 0}
.block-table .comparison-scroll{margin:.5rem 0 1rem}
.block-table .physical-scope{margin:.4rem 0 0}
.physical-scope.pass{color:var(--green)}
.physical-scope.fail{color:#ac3028}
.block-notes{margin:0 0 1rem;padding-left:1.1rem;font-size:.72rem;line-height:1.65;color:#33495f}
.requirements td:nth-child(3){color:var(--blue);font-weight:600}
#optimization-body td:last-child{white-space:normal;min-width:11rem;max-width:20rem;text-align:left}
#optimization-summary{font-size:.8rem;max-width:none}
.physical-scope{font-size:.7rem;line-height:1.7;color:var(--muted);max-width:56rem}
.detail-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem 2.2rem;margin-top:1.2rem}
.detail-card{min-width:0}
.detail-card:first-child{grid-row:span 2}
.detail-card h3{font-size:1rem;margin:0 0 .6rem;letter-spacing:-.02em}
.detail-card .comparison-scroll{margin:.4rem 0 1rem}
.intake-body h4{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .4rem}
.intake-body h4:first-child{margin-top:0}
.intake-body ul{margin:0;padding-left:1.1rem;font-size:.72rem;line-height:1.65;color:#33495f}
.loop-summary dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;font-size:.74rem}
.loop-summary dt{color:var(--muted)}
.loop-summary dd{margin:0;font-family:var(--mono);font-size:.7rem}
.block-layout{margin-top:1rem}
.analog-waveforms{margin:1.5rem 0}
.analog-waveforms summary{font-size:.875rem;font-weight:600;color:var(--blue);cursor:pointer;margin-bottom:1.1rem}
.details .plot-area{flex:none;height:15rem}
.result-note{font-size:.7rem;color:var(--muted);margin:1rem 0 0}

.method{display:grid;grid-template-columns:.9fr 1.6fr;gap:6rem;margin-top:2.5rem;padding:2.8rem 0 4rem;border-top:1px solid var(--line)}
.method-intro h2{font-size:2.3rem;line-height:1.13;letter-spacing:-.04em;margin:0 0 1.25rem}
.method-intro p:not(.eyebrow){font-size:.94rem;line-height:1.8;color:var(--muted);max-width:20.6rem}
.method a{font-size:inherit;font-weight:600;color:var(--blue)}
.method-intro>a{font-size:.8rem}
.method-details{display:flex;flex-direction:column;gap:1.6rem}
.method-details article{display:grid;grid-template-columns:7.4rem 1fr;gap:0 1.4rem}
.method-number{grid-row:1/5;padding-top:.2rem;font:.62rem var(--mono);color:var(--blue)}
.method-details h3{font-size:1.06rem;letter-spacing:-.02em;margin:0 0 .6rem}
.method-details p{font-size:.875rem;line-height:1.8;color:var(--muted);margin:0 0 .55rem}
.method-details article>a{font-size:.8rem}
.study{padding-left:8.8rem}
.study-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
.study-stats div{display:flex;flex-direction:column;gap:.2rem;padding:.85rem 1rem;background:#fff}
.study-stats span{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.study-stats strong{font:600 1.5rem var(--mono);letter-spacing:-.04em;color:var(--ink)}
.study-stats small{font-size:.66rem;line-height:1.45;color:var(--muted)}
.study-note{font-size:.74rem;line-height:1.75;color:var(--muted);margin:.9rem 0 0}

footer{display:flex;align-items:center;gap:1.6rem;min-height:6.25rem;border-top:1px solid var(--line)}
footer .wordmark{font-size:1.4rem}
footer p{font-size:.7rem;color:var(--muted)}
footer>div{display:flex;gap:1.6rem;margin-left:auto;font-size:.75rem}


/* Short windows (1080p at 150%, where the type reaches its 11 px floor): drop only the
   decorative text and tighten the step rows. */
@media(min-width:1101px) and (max-width:1340px) and (min-aspect-ratio:4/3),(min-width:1101px) and (max-height:680px) and (min-aspect-ratio:4/3){
  .hero .eyebrow,.lead,#timing-note,.tagline{display:none}
  .stages li{padding-bottom:.42rem}
  .design-loop{padding-bottom:.42rem;margin-top:.2rem}
  .control-panel,.run-panel{gap:.42rem;padding-block:.75rem}
  .downloads>span{width:auto;margin-right:.2rem}
  .prompt-gloss{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prompt-box{height:4.9rem}
  .seed-row{margin-top:.35rem}
}


/* Narrow or portrait windows (tablets, phones, split screens): a scrolling, stacked page. */
@media(max-width:1100px),(max-aspect-ratio:4/3){html{font-size:16px}
  .site-header{height:auto}
  .header-inner{flex-wrap:wrap;padding:.75rem 1rem;gap:.6rem 1.25rem}
  .tagline{display:none}
  .dashboard{display:flex;flex-direction:column;height:auto;min-height:0;padding:.75rem;gap:.75rem}
  .control-panel,.run-panel{overflow:visible}
  .stage-area{container-type:normal}
  .live-workspace{grid-template-columns:minmax(0,1600fr) minmax(0,960fr);width:100%}
  .tool-screen{width:100%;height:auto}
  .zoom-hint .hint-wheel{display:none}
  .zoom-hint .hint-ctrl{display:inline}
  .tool-heading,.tool-note{width:auto;min-width:0}
  .stage-area>.plots{flex:none}
  .plot-area{flex:none;height:14rem}
  #layout-frame{height:auto;aspect-ratio:16/10}
  .stages small{white-space:normal}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .gate-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .method{grid-template-columns:1fr;gap:2rem}
  .study{padding-left:0}
  .detail-grid{grid-template-columns:1fr}
  .detail-card:first-child{grid-row:auto}
  .wrap{width:calc(100% - 2rem)}
}

/* The viewer bar wraps before its four view buttons crowd out the title. */
@media(max-width:760px){.viewer-bar{flex-wrap:wrap;height:auto;padding:.5rem .7rem;row-gap:.4rem}
  .circuit-name{order:3;width:100%}
  .view-switch{margin-left:0;flex-wrap:wrap;flex-shrink:1;max-width:100%}
}

@media(max-width:600px){.dialog-head{position:static;padding:1rem}
  .dialog-head p:not(.eyebrow){display:none}
  .prompt-groups{padding:.8rem 1rem 1rem}
  .lab-name{display:none}
  .affiliation img{height:1.7rem}
  nav{width:100%;justify-content:flex-end;font-size:.75rem}
  .live-workspace,.plots{grid-template-columns:1fr}
  .viewer-footer{height:auto;min-height:1.5rem;flex-wrap:wrap;row-gap:.1rem;padding-block:.3rem}
  .zoom-hint{order:3;flex-basis:100%;margin-left:0}
  .tiles,.gate-facts,.physical-facts,.study-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .viewer.expanded .tool-screen,.viewer:fullscreen .tool-screen{width:100%;height:auto}
  .screen-note{left:.6rem;bottom:.6rem}
  .demo-caption,.response-heading{flex-direction:column;gap:.5rem}
  .view-only{display:none}
  .comparison th,.comparison td{padding:.6rem}
  .method-details article{grid-template-columns:1fr}
  .method-number{grid-row:auto;margin-bottom:.6rem}
  footer{flex-wrap:wrap;gap:.3rem 1.25rem;padding-block:1.5rem;min-height:0}
  footer>div{margin-left:0;width:100%}
}

/* Touch screens: the pinch wording and roomier zoom buttons. */
@media(pointer:coarse){
  .zoom-hint .hint-wheel,.zoom-hint .hint-ctrl{display:none}
  .zoom-hint .hint-touch{display:inline}
  .zoom-controls button{min-width:2rem;height:1.5rem}
  .zoom-controls [data-zoom="reset"]{min-width:2.6rem}
}