:root{
      --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfbfd;
      --line:#e6e8ec; --line-strong:#d6d9df;
      --ink:#0e1116; --ink-soft:#5b626e; --ink-muted:#9aa1ad;
      --brand:#4f46e5; --brand-2:#6366f1; --brand-soft:#eef0ff;
      --ok:#0f9d58; --ok-soft:#e7f6ee; --warn:#c2710c; --warn-soft:#fbf0e0; --err:#d92d20; --err-soft:#fdecea;
      --radius:14px; --radius-sm:10px;
      --shadow-sm:0 1px 2px rgba(16,17,22,.05), 0 1px 3px rgba(16,17,22,.04);
      --shadow-md:0 4px 12px rgba(16,17,22,.06), 0 12px 28px rgba(16,17,22,.07);
      --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
      --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    }
    html[data-theme="dark"]{
      --bg:#0b0d10; --surface:#13161b; --surface-2:#0f1216;
      --line:#262b33; --line-strong:#333a45;
      --ink:#eef1f5; --ink-soft:#a4adba; --ink-muted:#6c7480;
      --brand:#7c83ff; --brand-2:#8b91ff; --brand-soft:#1b1f3a;
      --ok:#41c98a; --ok-soft:#10271d; --warn:#e2a44a; --warn-soft:#2a2113; --err:#ff6b5e; --err-soft:#2a1614;
      --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 30px rgba(0,0,0,.5);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:-.01em;overflow:hidden;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}
    /* Keep only the ST code editor (and the form fields you type into)
       selectable, so clicking UI chrome/diagram doesn't highlight text but
       copy/paste still works in the editor. */
    #code,.code-hl,input,textarea{-webkit-user-select:text;user-select:text}

    /* Top bar */
    .topbar{height:60px;flex:none;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
    .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px;white-space:nowrap;color:inherit;text-decoration:none;flex:0 1 auto;min-width:0;overflow:hidden}
    a.brand:hover{opacity:.85}
    .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm)}
    .logo svg{width:17px;height:17px}
    .brand .sub{color:var(--ink-muted);font-weight:500;font-size:12px}
    .pill{font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-soft);padding:3px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 22%, transparent);white-space:nowrap}
    .pill-beta{font-size:11px;font-weight:700;letter-spacing:.02em;color:#1d4ed8;background:#e7effe;padding:3px 9px;border-radius:999px;border:1px solid #bcd3fb;white-space:nowrap}
    html[data-theme="dark"] .pill-beta{color:#93b4ff;background:#16233f;border-color:#274777}
    .pill-analyze{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-soft);padding:3px 10px 3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);white-space:nowrap}
    .pill-analyze[hidden]{display:none}
    .zs-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.01em;color:var(--ok);background:var(--ok-soft);padding:3px 10px 3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s;animation:zsPulse 2.6s ease-in-out infinite}
    .zs-badge:hover{background:color-mix(in srgb,var(--ok) 16%,var(--surface));border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
    .zs-badge:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
    .zs-badge .zs-shield{display:grid;place-items:center;width:15px;height:15px;flex:none}
    .zs-badge .zs-shield svg{width:15px;height:15px}
    @keyframes zsPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 40%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 0%,transparent)}}
    @media (prefers-reduced-motion:reduce){.zs-badge{animation:none}}
    @media (max-width:760px){.zs-badge .zs-lbl{display:none}.zs-badge{padding:4px}}
    .zs-card{max-width:560px}
    .zs-card .legal-head h2{display:flex;align-items:center;gap:9px}
    .zs-head-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;color:var(--ok);background:var(--ok-soft)}
    .zs-head-ic svg{width:16px;height:16px}
    .zs-list{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
    .zs-list li{line-height:1.55}
    .zs-verify{margin-top:14px;padding:11px 13px;border-radius:9px;font-size:13px;line-height:1.55;color:var(--ink);background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
    .pill-analyze .spin{width:12px;height:12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--brand) 35%,transparent);border-top-color:var(--brand);animation:an-spin .7s linear infinite}
    @keyframes an-spin{to{transform:rotate(360deg)}}
    @media (prefers-reduced-motion:reduce){.pill-analyze .spin{animation-duration:1.6s}}
    /* Maintenance logout countdown — centred in the top bar, hard to miss. */
    .maint-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(64%,660px);display:flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;font-size:12.5px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(255,255,255,.28);box-shadow:0 5px 16px rgba(220,38,38,.38);z-index:30;animation:maint-pulse 2.1s ease-in-out infinite}
    .maint-banner[hidden]{display:none}
    .maint-banner svg{width:16px;height:16px;flex:none}
    .maint-banner .maint-cd{font-variant-numeric:tabular-nums;font-weight:800;background:rgba(255,255,255,.2);padding:2px 9px;border-radius:999px}
    @keyframes maint-pulse{0%,100%{box-shadow:0 5px 16px rgba(220,38,38,.38)}50%{box-shadow:0 6px 22px rgba(220,38,38,.62)}}
    @media (prefers-reduced-motion:reduce){.maint-banner{animation:none}}
    .spacer{flex:1}
    /* Never let the action buttons shrink/clip their labels: when the topbar
       is tight the brand (left) truncates first, the buttons stay intact. */
    .tb-actions{display:flex;align-items:center;gap:8px;flex:none}
    .tb-actions>*{flex:none}
    .icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:.15s;text-decoration:none}
    .icon-btn:hover{border-color:var(--line-strong);color:var(--ink)}
    .icon-btn svg{width:17px;height:17px}
    .flag-btn{width:34px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;opacity:.5;transition:.15s;padding:0}
    .flag-btn svg{width:20px;height:14px;border-radius:2px;display:block}
    .flag-btn:hover{opacity:.85}
    .flag-btn.active{opacity:1;border-color:var(--brand)}
    .btn{height:36px;padding:0 13px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:.15s;text-decoration:none;font-family:var(--font);white-space:nowrap}
    .btn:hover{border-color:var(--line-strong)}
    .btn svg{width:16px;height:16px}
    .btn.primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;border:none;box-shadow:0 1px 2px rgba(79,70,229,.4),inset 0 1px 0 rgba(255,255,255,.18)}
    .btn.primary:hover{filter:brightness(1.06)}
    .avatar{position:relative;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#4f46e5);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
    .notif-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;padding:0;border-radius:50%;background:var(--ok);color:var(--surface);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);box-shadow:var(--shadow-sm)}
    .notif-badge[hidden]{display:none}
    .usermenu{position:relative;list-style:none}
    .usermenu>summary{cursor:pointer;list-style:none}
    .usermenu>summary::-webkit-details-marker{display:none}
    .usermenu>summary::marker{content:""}
    .usermenu-pop{position:absolute;right:0;top:42px;width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;z-index:50}
    .um-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
    .um-name{font-size:12.5px;font-weight:600;color:var(--ink);word-break:break-all}
    .um-role{font-size:11.5px;color:var(--ink-muted);margin-top:2px}
    .um-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--ink-soft);text-decoration:none;font-size:13px;font-weight:600}
    .um-item:hover{background:var(--brand-soft);color:var(--brand)}
    .um-item svg{width:16px;height:16px}

    /* Layout */
    .shell{display:grid;grid-template-columns:60px minmax(380px,1fr) minmax(540px,1.35fr);flex:1;min-height:0}

    /* Static page footer */
    .appfoot{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:8px 16px;background:var(--surface);border-top:1px solid var(--line);font-size:12px;color:var(--ink-muted)}
    .appfoot .foot-link{background:none;border:none;padding:0;font:inherit;color:var(--ink-muted);cursor:pointer}
    .appfoot .foot-link:hover{color:var(--ink);text-decoration:underline}
    .appfoot .foot-sep{color:var(--line);user-select:none}
    .appfoot .foot-copy{color:var(--ink-muted)}
    .rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px}
    .rail a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--ink-muted);cursor:pointer;transition:.15s;position:relative}
    .rail a svg{width:19px;height:19px}
    .rail a:hover{background:var(--surface-2);color:var(--ink)}
    .rail a.active{color:var(--brand);background:var(--brand-soft)}
    .rail a.active::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--brand)}
    .rail a.bug{color:var(--ok)}
    .rail a.bug:hover{background:var(--ok-soft);color:var(--ok)}
    .rail a::after{content:attr(aria-label);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:var(--surface);padding:5px 9px;border-radius:7px;font-size:12px;font-weight:600;opacity:0;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:opacity .12s;z-index:200}
    .rail a:hover::after,.rail a:focus-visible::after{opacity:1}
    .rail .grow{flex:1}

    /* Bug report / feedback popover */
    .bugpop{position:fixed;left:64px;bottom:18px;width:380px;max-width:calc(100vw - 80px);
      background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;
      box-shadow:var(--shadow-md);overflow:hidden;z-index:120;display:none}
    .bugpop.open{display:block}

    /* Info / legal popover + modal */
    .helppop{position:fixed;left:64px;bottom:46px;width:220px;background:var(--surface);
      border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-md);
      padding:6px;z-index:120;display:none}
    .helppop.open{display:block}
    .hp-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
      padding:9px 11px;border:none;background:none;border-radius:9px;color:var(--ink-soft);
      font-weight:600;font-size:13px;font-family:var(--font);cursor:pointer}
    .hp-item svg{width:16px;height:16px;flex:none}
    .hp-item:hover{background:var(--brand-soft);color:var(--brand)}
    .legal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);
      display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
    .legal-overlay.open{display:flex}
    .legal-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
      box-shadow:var(--shadow-md);width:100%;max-width:640px;max-height:82vh;
      display:flex;flex-direction:column;overflow:hidden}
    .legal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
    .legal-head h2{font-size:16px;font-weight:800;flex:1}
    .legal-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
      background:var(--surface);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;font-size:15px}
    .legal-x:hover{border-color:var(--line-strong);color:var(--ink)}
    .legal-body{padding:18px;overflow:auto;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
    .legal-body h3{font-size:14px;font-weight:700;color:var(--ink);margin:14px 0 6px}
    .legal-body p{margin:0 0 10px}
    .legal-body ul{margin:0 0 10px;padding-left:20px}
    .legal-body li{margin:4px 0}
    .legal-body .muted{color:var(--ink-muted);font-size:12.5px}
    .legal-body [data-legal]{display:none}
    .legal-body [data-legal] > :first-child{margin-top:0}
    .guide-card{max-width:720px}
    .guide-hero{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:12px;
      background:var(--brand-soft);border:1px solid var(--line)}
    .guide-hero-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
      background:var(--surface);color:var(--brand);flex:none}
    .guide-hero-ic svg{width:20px;height:20px}
    .guide-hero strong{display:block;color:var(--ink);font-size:15px;font-weight:800;margin-bottom:2px}
    .guide-hero p{margin:0;font-size:13px}
    .legal-body .guide-steps{padding-left:22px;margin:0 0 10px}
    .legal-body .guide-steps li{margin:7px 0}
    .guide-steps b{color:var(--ink)}
    .legal-body .guide-feats,.legal-body .guide-soon{list-style:none;padding:0;margin:0 0 10px;
      display:grid;gap:7px}
    .guide-feats li,.guide-soon li{position:relative;padding-left:24px}
    .guide-feats li::before{content:"";position:absolute;left:6px;top:7px;width:7px;height:7px;
      border-radius:2px;background:var(--brand)}
    .guide-soon li::before{content:"";position:absolute;left:4px;top:5px;width:11px;height:11px;
      border-radius:50%;border:2px solid var(--ink-muted)}
    .bp-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
    .bp-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);flex:none}
    .bp-ic svg{width:18px;height:18px}
    .bp-head h2{font-size:14.5px;font-weight:800}
    .bp-head p{font-size:11.5px;color:var(--ink-muted)}
    .bp-x{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;font-size:14px}
    .bp-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;max-height:66vh;overflow:auto}
    .bp-seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
    .bp-seg button{flex:1;border:0;background:transparent;color:var(--ink-soft);font-weight:600;font-size:12.5px;padding:7px 8px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font)}
    .bp-seg button svg{width:15px;height:15px}
    .bp-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
    .bp-seg button.on.bug{color:var(--err)}
    .bp-seg button.on.imp{color:var(--brand)}
    .bp-lbl{display:block;font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-bottom:5px}
    .bp-inp,.bp-ta{width:100%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:10px;padding:9px 11px;font-size:13px;font-family:inherit}
    .bp-ta{min-height:82px;resize:vertical}
    .bp-inp:focus,.bp-ta:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
    .bp-sev{display:flex;gap:6px}
    .bp-sev button{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:6px;font-size:11.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:var(--font)}
    .bp-sev button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
    .bp-drop{border:1.5px dashed var(--line-strong);border-radius:11px;padding:14px;text-align:center;color:var(--ink-muted);font-size:12px;cursor:pointer;background:var(--surface-2)}
    .bp-drop.drag{border-color:var(--brand);background:var(--brand-soft)}
    .bp-drop svg{width:20px;height:20px;display:block;margin:0 auto 6px;color:var(--ink-muted)}
    .bp-drop b{color:var(--brand)}
    .bp-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .bp-thumb{width:54px;height:54px;border-radius:9px;border:1px solid var(--line);position:relative;overflow:hidden;background-size:cover;background-position:center}
    .bp-thumb .rm{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;display:grid;place-items:center;cursor:pointer;line-height:1}
    .bp-rep{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
    .bp-rep .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
    .bp-rep .who{font-size:12.5px;font-weight:600;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis}
    .bp-rep .who small{display:block;color:var(--ink-muted);font-weight:500;font-size:11px}
    .bp-rep .lock{margin-left:auto;color:var(--ink-muted)}.bp-rep .lock svg{width:14px;height:14px}
    details.bp-ctx{border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
    details.bp-ctx summary{cursor:pointer;list-style:none;padding:8px 11px;font-size:11.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
    details.bp-ctx summary::-webkit-details-marker{display:none}
    details.bp-ctx summary svg{width:14px;height:14px}
    details.bp-ctx .kv{padding:0 12px 10px;font-size:11px;color:var(--ink-muted);font-family:var(--mono)}
    details.bp-ctx .kv div{padding:2px 0;border-top:1px dashed var(--line)}
    .bp-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft);cursor:pointer}
    .bp-notice{font-size:11px;line-height:1.5;color:var(--ink-muted);margin-top:6px}
    .bp-chk input{width:15px;height:15px;accent-color:var(--brand)}
    .bp-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
    .bp-foot .note{font-size:10.5px;color:var(--ink-muted);max-width:140px;line-height:1.3}
    .bp-msg{font-size:12px;font-weight:600}
    .bp-msg.ok{color:var(--ok)} .bp-msg.err{color:var(--err)}
    .bp-btn{border:0;border-radius:10px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font)}
    .bp-btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
    .bp-btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:flex;align-items:center;gap:7px}
    .bp-btn.primary svg{width:15px;height:15px}
    .bp-btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.55)}
    .bp-ml{margin-left:auto}

    .col{display:flex;flex-direction:column;min-width:0;overflow:hidden}
    .col.editor{border-right:1px solid var(--line);background:var(--surface)}
    .panel-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
    .panel-head h2{font-size:13.5px;font-weight:650}
    .panel-head .dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
    .panel-head .muted{color:var(--ink-muted);font-size:12px;font-weight:500;margin-left:auto;font-family:var(--mono)}

    /* Column tabs: switch panes within the editor / results columns */
    .panel-head.tabs-head{align-items:stretch;gap:0;padding:0 18px;overflow-x:auto;scrollbar-width:none}
    .panel-head.tabs-head::-webkit-scrollbar{display:none}
    .tabs-head .etab{display:inline-flex;align-items:center;gap:8px;margin-right:8px;padding:12px 10px;border-radius:8px 8px 0 0;background:none;border:none;border-bottom:2px solid transparent;color:var(--ink-soft);font-family:var(--font);font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
    .tabs-head .etab .dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
    .tabs-head .etab svg{width:15px;height:15px}
    .tabs-head .etab:hover{color:var(--ink);background:var(--hover,rgba(120,130,150,.12))}
    .tabs-head .etab.active{color:var(--ink);border-bottom-color:var(--brand)}
    .tabs-head .muted{align-self:center}
    .tabs-head .tab-send{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--brand);border-radius:8px;background:none;color:var(--brand);font-family:var(--font);font-size:12.5px;font-weight:650;cursor:pointer;white-space:nowrap}
    .tabs-head .tab-send svg{width:14px;height:14px}
    .tabs-head .tab-send:hover{background:var(--brand);color:#fff}
    .results-tabs{background:var(--surface);flex:none}

    /* Send-to-Designer target-module chooser */
    .send-menu{position:fixed;z-index:9000;min-width:200px;max-width:280px;padding:6px;
      background:var(--surface);border:1px solid var(--line);border-radius:10px;
      box-shadow:0 12px 30px rgba(0,0,0,.22);display:none;flex-direction:column;gap:2px}
    .send-menu.open{display:flex}
    .send-menu .sm-head{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
      color:var(--ink-muted);padding:6px 10px 4px}
    .send-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
      padding:8px 10px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;
      font-family:var(--font);font-size:13px;color:var(--ink)}
    .send-menu button:hover{background:var(--surface-2)}
    .send-menu button .sm-count{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ink-muted);
      background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:0 6px;line-height:16px}
    .send-menu .sm-new{color:var(--brand);border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:2px}
    .send-menu .sm-new:hover{background:var(--brand-soft)}

    .etab-pane{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
    .etab-pane[hidden]{display:none}
    .sim-card.etab-pane{background:var(--surface)}
    .sim-card .card-head{flex:none}
    .sim-card .sim-body{flex:1;min-height:0;overflow-y:auto}

    /* ── Test case generation pane ── */
    .tc-card.etab-pane{background:var(--surface)}
    .tc-head{flex:none;display:flex;align-items:center;justify-content:space-between}
    .tc-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}
    .tc-head h3 svg{width:16px;height:16px}
    .tc-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:18px}
    .tc-sec .sim-sub{margin-bottom:10px}
    .tc-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .tc-kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
    .tc-kpi-v{font-size:20px;font-weight:750;color:var(--brand);font-family:var(--mono)}
    .tc-kpi-l{font-size:11px;color:var(--ink-muted);margin-top:2px}
    .tc-kpi-s{font-size:10.5px;color:var(--ink-muted);font-family:var(--mono);margin-top:1px}
    .tc-scenarios{display:flex;flex-direction:column;gap:8px}
    .tc-muted{color:var(--ink-muted);font-size:12px}
    .tc-code{font-family:var(--mono);font-size:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink-soft);white-space:nowrap}
    .tc-sc{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden}
    .tc-sc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:12.5px}
    .tc-sc>summary::-webkit-details-marker{display:none}
    .tc-sc>summary::before{content:"\25B8";color:var(--ink-muted);font-size:10px;transition:transform .12s;flex:none}
    .tc-sc[open]>summary::before{transform:rotate(90deg)}
    .tc-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:6px;flex:none}
    .tc-badge.normal{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}
    .tc-badge.cycle{color:var(--brand);background:var(--brand-soft)}
    .tc-badge.fault{color:var(--err);background:color-mix(in srgb,var(--err) 15%,transparent)}
    .tc-path{display:flex;align-items:center;gap:3px;flex-wrap:wrap;flex:1;min-width:0}
    .tc-path .chip{font-size:11px;padding:1px 7px}
    .tc-arr{color:var(--ink-muted);font-size:11px}
    .tc-any{font-size:11px;color:var(--ink-muted);font-style:italic}
    .tc-branch{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:10.5px;max-width:46%;overflow:hidden}
    .tc-branch .tc-code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
    .tc-id{font-family:var(--mono);font-size:10.5px;color:var(--ink-muted);flex:none}
    .tc-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--brand);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
    .tc-play svg{width:14px;height:14px}
    .tc-play:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
    .sim-tc-ctrl{flex:none;padding:10px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
    .sim-tc-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
    .sim-tc-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--brand)}
    .sim-tc-prog{font-size:12px;color:var(--ink);font-family:var(--mono)}
    .sim-tc-prog.done{color:var(--ok);font-weight:700}
    .sim-tc-x{margin-left:auto;flex:none;width:22px;height:22px;border:none;border-radius:6px;background:transparent;color:var(--ink-muted);font-size:16px;line-height:1;cursor:pointer}
    .sim-tc-x:hover{background:var(--surface-2);color:var(--ink)}
    .sim-tc-ctrl.paused{background:color-mix(in srgb,var(--err) 12%,var(--surface));border-color:color-mix(in srgb,var(--err) 30%,var(--line))}
    .sim-tc-note{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:11.5px;font-weight:600;color:var(--err)}
    .sim-tc-note::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 24%,transparent)}
    .sim-tc-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .sim-tc-btns .sim-btn:disabled{opacity:.45;cursor:default}
    /* Step-Lock ("Pause on transition") toggle: shares the buttons row and is
       pushed to the far right to save vertical space. */
    .sim-tc-lock{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:5px 11px;border:1px dashed var(--line);border-radius:8px;background:var(--surface-2)}
    .sim-tc-lock-lab{font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
    /* Armed "Trigger step" button: a subtle pulsing amber border-glow while a
       transition is held ready (Pause-on-transition). */
    .sim-btn.ready{border-color:#f59e0b;animation:simTrigPulse 1.15s ease-in-out infinite}
    @keyframes simTrigPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}50%{box-shadow:0 0 0 5px rgba(245,158,11,0)}}
    @media(prefers-reduced-motion:reduce){.sim-btn.ready{animation:none;box-shadow:0 0 0 2px rgba(245,158,11,.5)}}
    /* "[PAUSED BEFORE TRANSITION]" status chip in the controller header. */
    .sim-tc-armed{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#b45309;background:color-mix(in srgb,#f59e0b 15%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));border-radius:6px;padding:2px 8px;white-space:nowrap}
    html[data-theme="dark"] .sim-tc-armed{color:#fcd34d}
    .sim-tc-armed::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 30%,transparent);animation:simReadyPulse 1.1s ease-in-out infinite}
    @media(prefers-reduced-motion:reduce){.sim-tc-armed::before{animation:none}}
    /* "Waiting for parallel interlock…" — an amber warning chip + note shown
       while a multi-machine hop is gated by another machine's interlock. */
    .sim-tc-ctrl.interlock{background:color-mix(in srgb,#f59e0b 10%,var(--surface));border-color:color-mix(in srgb,#f59e0b 32%,var(--line))}
    .sim-tc-wait{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#b45309;background:color-mix(in srgb,#f59e0b 15%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));border-radius:6px;padding:2px 8px;white-space:nowrap}
    html[data-theme="dark"] .sim-tc-wait{color:#fcd34d}
    .sim-tc-wait::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 30%,transparent);animation:simReadyPulse 1.1s ease-in-out infinite}
    .sim-tc-note.warn{color:#b45309}
    html[data-theme="dark"] .sim-tc-note.warn{color:#fcd34d}
    .sim-tc-note.warn::before{background:#f59e0b;box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 24%,transparent)}
    .sim-btn.primary.wait{border-color:#f59e0b;animation:simTrigPulse 1.15s ease-in-out infinite}
    @media(prefers-reduced-motion:reduce){.sim-tc-wait::before{animation:none}.sim-btn.primary.wait{animation:none;box-shadow:0 0 0 2px rgba(245,158,11,.5)}}
    .tc-sc-body{padding:4px 12px 12px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line)}
    .tc-block .tc-bh{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);font-weight:700;margin:10px 0 7px}
    .tc-base,.tc-hold{font-size:12px;margin-bottom:8px;line-height:1.9}
    .tc-in{line-height:1.9}
    .tc-steps{width:100%;border-collapse:collapse;font-size:12px}
    .tc-steps th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);font-weight:650;padding:3px 6px;border-bottom:1px solid var(--line)}
    .tc-steps td{padding:5px 6px;vertical-align:top;border-bottom:1px solid var(--line)}
    .tc-steps tr:last-child td{border-bottom:none}
    .tc-steps .tc-n{color:var(--ink-muted);font-family:var(--mono);width:1%}
    .tc-steps .tc-arr-cell{color:var(--ink-muted);text-align:center;width:1%}
    .tc-exp-line{font-size:12.5px;color:var(--ink-soft);margin-bottom:4px;line-height:1.9}
    .tc-exp-hint{font-size:12px;color:var(--ink-muted);margin:0 0 10px}
    .tc-exp-actions{display:flex;gap:8px;flex-wrap:wrap}

    .rpane{display:flex;flex-direction:column;gap:16px}
    .rpane[hidden]{display:none}

    .editor-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
    .code-edit{flex:1;display:flex;background:var(--surface-2);overflow:hidden;min-height:0}
    .gutter{padding:14px 0;text-align:right;color:var(--ink-muted);font-family:var(--mono);font-size:12.5px;line-height:1.7;user-select:none;border-right:1px solid var(--line);overflow:hidden;flex:none;background:var(--surface-2)}
    .gutter div{padding:0 12px 0 14px}
    .code-scroll{position:relative;flex:1;min-height:0;overflow:hidden}
    .code-hl,#code{position:absolute;inset:0;margin:0;border:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;padding:14px 16px;tab-size:4;white-space:pre;overflow:auto;word-wrap:normal}
    .code-hl{color:var(--ink);z-index:1;pointer-events:none}
    #code{z-index:2;background:transparent;color:transparent;caret-color:var(--ink);resize:none;outline:0}
    #code::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)}
    #code::placeholder{color:var(--ink-muted)}
    .code-hl .kw{color:var(--brand);font-weight:600}
    .code-hl .num{color:#0e9f6e}
    .code-hl .cmt{color:var(--ink-muted);font-style:italic}
    .code-hl .str{color:#c2710c}
    .controls{display:flex;flex-direction:column;gap:13px;padding:15px 18px;border-top:1px solid var(--line);background:var(--surface);max-height:46%;overflow:auto}
    .field{display:flex;flex-direction:column;gap:6px}
    .field label{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
    .field .hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-muted)}
    input[type=text],select,textarea.note{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);padding:9px 12px;font-size:13px;font-family:var(--font);width:100%}
    input[type=text]:focus,select:focus,textarea.note:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
    .file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .field label.file-btn{height:34px;flex:none;font-size:13px;color:var(--ink);text-transform:none;letter-spacing:0}
    .file-name{color:var(--ink-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    textarea.note{resize:vertical;min-height:46px}
    .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .file-row{display:flex;align-items:center;gap:10px}
    .run{display:flex;gap:10px;align-items:center;margin-top:2px;flex-wrap:wrap}
    .run .btn.primary{flex:1;height:42px;justify-content:center;font-size:14px}
    .run-msg{flex-basis:100%;font-size:12.5px;font-weight:600;color:var(--warn);background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:8px;padding:8px 10px}

    .col.results{background:var(--bg)}
    .results-inner{padding:18px;display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;overflow:auto}
    .flash{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:12px;padding:11px 14px;font-size:13px;font-weight:500}

    .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm)}
    .stat .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;margin-bottom:10px}
    .stat .ic svg{width:16px;height:16px}
    .stat .v{font-size:22px;font-weight:750;letter-spacing:-.02em;line-height:1.1}
    .stat .v small{font-size:13px;color:var(--ink-muted);font-weight:600}
    .stat .l{font-size:11.5px;color:var(--ink-soft);font-weight:550;margin-top:2px}
    .ic.b{background:var(--brand-soft);color:var(--brand)}
    .ic.g{background:var(--ok-soft);color:var(--ok)}
    .ic.w{background:var(--warn-soft);color:var(--warn)}
    .ic.p{background:#f3e8ff;color:#9333ea} html[data-theme="dark"] .ic.p{background:#241133;color:#c084fc}

    .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
    .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line)}
    .card-head h3{font-size:13px;font-weight:650;display:flex;align-items:center;gap:9px}
    .card-head h3 svg{width:16px;height:16px;color:var(--ink-muted)}
    .card-head .muted{color:var(--ink-muted);font-size:12px}

    .diagram-wrap{position:relative;background:radial-gradient(circle at center, color-mix(in srgb,var(--ink) 7%,transparent) 1px, transparent 1px);background-size:22px 22px;background-color:var(--surface-2);overflow:hidden}
    .preview-canvas{width:100%;min-height:320px;cursor:grab;overflow:hidden}
    .preview-canvas:active{cursor:grabbing}
    /* Hide the SVG until fitToContainer() has scaled it, so a large diagram
       doesn't flash at full size and then shrink on (re)load. */
    .preview-canvas svg{transform-origin:0 0;display:block;visibility:hidden}
    .preview-canvas.diag-ready svg{visibility:visible}
    .machine-select{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:3px 8px 3px 8px;flex-shrink:0}
    .machine-select[hidden]{display:none}
    .machine-select svg{width:15px;height:15px;color:var(--brand);flex:none}
    .machine-select label{font-size:11.5px;font-weight:650;color:var(--ink-soft);white-space:nowrap}
    .machine-select select{height:24px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:0 6px;font-size:11.5px;font-weight:600;font-family:var(--font);cursor:pointer;max-width:150px}
    .machine-select select:hover{border-color:var(--brand)}
    .zoombar{display:flex;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:3px;flex-shrink:0}
    .zoombar button{height:26px;min-width:26px;padding:0 6px;border:none;background:transparent;color:var(--ink-soft);border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:600;font-family:var(--font)}
    .zoombar button:hover{background:var(--surface);color:var(--ink)}
    .zoombar button.fit-active{background:var(--brand-soft);color:var(--brand)}
    .zoombar button svg{width:17px;height:17px;display:block}
    .zoombar button#zoomLock.locked{background:var(--brand-soft);color:var(--brand)}
    .zoombar .sep{width:1px;align-self:stretch;margin:2px 2px;background:var(--line)}
    .zoombar .zoom-lbl{display:flex;align-items:center;padding:0 4px;font-size:11.5px;color:var(--ink-muted);min-width:40px;justify-content:center}
    .preview-canvas.locked{cursor:default}
    .preview-canvas.hide-stay .stay-branch{display:none}
    /* Implicit/explicit self-loop arrows are hidden by default; the
       "Show implicit self-loops" toggle adds .show-self-loops to reveal them. */
    .preview-canvas .self-loop{display:none}
    .preview-canvas.show-self-loops .self-loop{display:inline}
    /* Interactive path isolation: spotlight one block/line and its direct
       connections; everything else fades to the background. */
    .preview-canvas svg [data-el]{transition:opacity .18s ease-in-out}
    .preview-canvas svg [data-el]{cursor:pointer}
    .preview-canvas.isolate svg [data-el]:not(.iso-on){opacity:.12}
    .preview-canvas.isolate svg [data-el="edge"].iso-on[stroke]:not([stroke="none"]){stroke-width:3px}
    .zoombar button#stayToggle.off{background:var(--brand-soft);color:var(--brand)}
    .zoombar button#monoToggle.on{background:var(--brand-soft);color:var(--brand)}
    .zoombar button.zb-export{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:650}
    .zoombar button.zb-export:hover{background:var(--brand-soft);color:var(--brand)}
    .zoombar button.zb-export svg{width:15px;height:15px}
    /* Monochroom (live preview): licht thema = echt zwarte lijnen/tekst + zwarte %-tint
       vullingen; donker thema = witte lijnen/tekst + heldere wit %-transparante vullingen. */
    .preview-canvas.mono svg [stroke]:not([stroke="none"]){stroke:#000 !important}
    .preview-canvas.mono svg :is([fill="#0369a1"],[fill="#059669"],[fill="#065f46"],[fill="#075985"],[fill="#0f172a"],[fill="#166534"],[fill="#1e293b"],[fill="#1e40af"],[fill="#334155"],[fill="#374151"],[fill="#4338ca"],[fill="#475569"],[fill="#5b21b6"],[fill="#6366f1"],[fill="#64748b"],[fill="#713f12"],[fill="#78350f"],[fill="#7c3aed"],[fill="#991b1b"],[fill="#dc2626"],[fill="#ea580c"]){fill:#000 !important}
    .preview-canvas.mono svg :is([fill="#ffffff"],[fill="white"],[fill="#f8fafc"],[fill="#e2e8f0"],[fill="#dbeafe"],[fill="#dcfce7"],[fill="#eef0ff"],[fill="#f0fdf4"],[fill="#f1f5f9"],[fill="#f3e8ff"],[fill="#fdecea"],[fill="#fef9c3"],[fill="#fff1f2"],[fill="#fff7ed"]){fill:#000 !important;fill-opacity:.08 !important}
    html[data-theme="dark"] .preview-canvas.mono svg [stroke]:not([stroke="none"]){stroke:#fff !important}
    html[data-theme="dark"] .preview-canvas.mono svg :is([fill="#0369a1"],[fill="#059669"],[fill="#065f46"],[fill="#075985"],[fill="#0f172a"],[fill="#166534"],[fill="#1e293b"],[fill="#1e40af"],[fill="#334155"],[fill="#374151"],[fill="#4338ca"],[fill="#475569"],[fill="#5b21b6"],[fill="#6366f1"],[fill="#64748b"],[fill="#713f12"],[fill="#78350f"],[fill="#7c3aed"],[fill="#991b1b"],[fill="#dc2626"],[fill="#ea580c"]){fill:#fff !important}
    html[data-theme="dark"] .preview-canvas.mono svg :is([fill="#ffffff"],[fill="white"],[fill="#f8fafc"],[fill="#e2e8f0"],[fill="#dbeafe"],[fill="#dcfce7"],[fill="#eef0ff"],[fill="#f0fdf4"],[fill="#f1f5f9"],[fill="#f3e8ff"],[fill="#fdecea"],[fill="#fef9c3"],[fill="#fff1f2"],[fill="#fff7ed"]){fill:#fff !important;fill-opacity:.14 !important}
    /* Keep the state-block header a solid band with legible text in monochrome. */
    .preview-canvas.mono svg .hdr-band{fill:#000 !important;fill-opacity:1 !important}
    .preview-canvas.mono svg .hdr-txt{fill:#fff !important;fill-opacity:1 !important}
    html[data-theme="dark"] .preview-canvas.mono svg .hdr-band{fill:#fff !important;fill-opacity:1 !important}
    html[data-theme="dark"] .preview-canvas.mono svg .hdr-txt{fill:#000 !important;fill-opacity:1 !important}
    /* Global-overrides red accent (bar + dot) two-tones with the rest in monochrome. */
    .preview-canvas.mono svg .gob-accent{fill:#000 !important}
    html[data-theme="dark"] .preview-canvas.mono svg .gob-accent{fill:#fff !important}

    /* ── Live simulator ────────────────────────────────────────────────── */
    /* While simulating, gently dim everything except the active step + firing
       edge: kept high enough that the engineer keeps a full overview of the
       machine while the spotlight/pulse still draws the eye to the action. */
    .preview-canvas.sim svg [data-el]:not(.sim-on){opacity:.34}
    .preview-canvas.sim svg [data-el].sim-on{opacity:1}
    .preview-canvas.sim svg [data-el]{transition:opacity .22s ease}
    .preview-canvas svg [data-el="edge"].sim-on[stroke]:not([stroke="none"]){stroke-width:3px}
    .preview-canvas svg [data-el="node"].sim-cur,
    .preview-canvas svg polygon[data-el="edge"].sim-cur{filter:drop-shadow(0 0 1px var(--brand)) drop-shadow(0 0 6px var(--brand))}
    /* Multi-machine spotlight: when "All machines" is showing, the active step
       of every parallel machine gets a bright, pulsing purple ring so none of
       them drown in the other lanes. */
    .preview-canvas.sim svg [data-el].sim-multi{opacity:1;stroke:var(--brand) !important;stroke-width:3.5px;filter:drop-shadow(0 0 3px var(--brand)) drop-shadow(0 0 9px var(--brand));animation:simMultiPulse 1.15s ease-in-out infinite}
    @keyframes simMultiPulse{0%,100%{stroke-width:3px;filter:drop-shadow(0 0 2px var(--brand)) drop-shadow(0 0 6px color-mix(in srgb,var(--brand) 70%,transparent))}50%{stroke-width:4.5px;filter:drop-shadow(0 0 4px var(--brand)) drop-shadow(0 0 13px var(--brand))}}
    @media(prefers-reduced-motion:reduce){.preview-canvas.sim svg [data-el].sim-multi{animation:none}}
    /* While the pulse sits on a flow decision diamond, its condition text lights
       up and briefly grows 2× (scaled about its own centre), then shrinks back
       to the static size once the pulse moves on. */
    .preview-canvas svg text.sim-zoom{transform:scale(2);transform-box:fill-box;transform-origin:center;transition:transform .15s ease;font-weight:700;fill:var(--brand) !important}
    .preview-canvas.sim svg text{transition:transform .15s ease}
    .preview-canvas.mono svg text.sim-zoom{fill:#000 !important}
    html[data-theme="dark"] .preview-canvas.mono svg text.sim-zoom{fill:#fff !important}
    @media(prefers-reduced-motion:reduce){.preview-canvas svg text.sim-zoom{transform:none}}
    /* Pulse that travels along the firing edge during a step transition. */
    .preview-canvas svg .sim-pulse{fill:none;stroke:var(--brand);stroke-width:4px;stroke-linecap:round;pointer-events:none;filter:drop-shadow(0 0 4px var(--brand))}
    .preview-canvas.mono svg .sim-pulse{stroke:#000 !important;filter:none}
    html[data-theme="dark"] .preview-canvas.mono svg .sim-pulse{stroke:#fff !important}
    @media(prefers-reduced-motion:reduce){.preview-canvas.sim svg [data-el]{transition:none}}
    /* "Ready for transition" indicator: while the machine sits paused and a
       leaving guard already holds, the armed outgoing arrow (and its diamond +
       target) glow amber and pulse, so the engineer sees it is ready to advance. */
    .preview-canvas.sim svg .sim-ready,.preview-canvas.sim svg .sim-ready-node{opacity:1}
    .preview-canvas svg path.sim-ready{fill:none;stroke:#f59e0b !important;stroke-width:3.5px;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(245,158,11,.85));animation:simReadyPulse 1.1s ease-in-out infinite}
    .preview-canvas svg polygon.sim-ready{stroke:#f59e0b !important;stroke-width:2.5px;filter:drop-shadow(0 0 6px rgba(245,158,11,.8));animation:simReadyPulse 1.1s ease-in-out infinite}
    .preview-canvas svg [data-el="node"].sim-ready-node{filter:drop-shadow(0 0 2px #f59e0b) drop-shadow(0 0 8px rgba(245,158,11,.6))}
    @keyframes simReadyPulse{0%,100%{opacity:.55}50%{opacity:1}}
    .preview-canvas.mono svg path.sim-ready,.preview-canvas.mono svg polygon.sim-ready{stroke:#000 !important;filter:none}
    html[data-theme="dark"] .preview-canvas.mono svg path.sim-ready,html[data-theme="dark"] .preview-canvas.mono svg polygon.sim-ready{stroke:#fff !important}
    @media(prefers-reduced-motion:reduce){.preview-canvas svg .sim-ready{animation:none;opacity:.95}}
    /* ── Live State Diff ── When a new analysis differs from the previous one,
       the changed/added states and transitions glow bright orange so a reviewer
       spots overnight edits at a glance. Gated by `.diff-on` so the panel toggle
       can hide the highlights. */
    .preview-canvas.diff-on svg rect[data-el="node"].diff-hot,
    .preview-canvas.diff-on svg path[data-el="node"].diff-hot,
    .preview-canvas.diff-on svg polygon[data-el="node"].diff-hot{stroke:#f59e0b !important;stroke-width:3px;filter:drop-shadow(0 0 5px rgba(245,158,11,.85))}
    .preview-canvas.diff-on svg path[data-el="edge"].diff-hot{stroke:#f59e0b !important;stroke-width:3px;filter:drop-shadow(0 0 4px rgba(245,158,11,.8))}
    .preview-canvas.diff-on svg polygon[data-el="edge"].diff-hot,
    .preview-canvas.diff-on svg [data-dia-of].diff-hot{stroke:#f59e0b !important;stroke-width:2.5px;filter:drop-shadow(0 0 5px rgba(245,158,11,.8))}
    /* Live State Diff summary panel above the diagram. */
    .diff-panel{margin:0 0 10px;border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));border-left:4px solid #f59e0b;border-radius:10px;background:color-mix(in srgb,#f59e0b 8%,var(--surface));overflow:hidden}
    .diff-ph{display:flex;align-items:center;gap:9px;padding:8px 11px;background:color-mix(in srgb,#f59e0b 13%,var(--surface))}
    .diff-ph-ic{flex:none;color:#b45309;display:flex}
    html[data-theme="dark"] .diff-ph-ic{color:#fbbf24}
    .diff-ph-tt{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.01em}
    .diff-ph-sub{font-size:11px;font-weight:600;color:var(--ink-soft)}
    .diff-ph-sp{margin-left:auto}
    .diff-tgl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-soft);cursor:pointer;user-select:none;padding:3px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
    .diff-tgl input{margin:0;cursor:pointer}
    .diff-x{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-muted);border-radius:6px;cursor:pointer;font-size:16px;line-height:1}
    .diff-x:hover{background:var(--surface-2);color:var(--ink)}
    .diff-list{list-style:none;margin:0;padding:6px 11px 9px;max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:3px}
    .diff-row{display:flex;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.5;color:var(--ink)}
    .diff-row .diff-dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:4px}
    .diff-row.add .diff-dot{background:#16a34a}
    .diff-row.mod .diff-dot{background:#f59e0b}
    .diff-row.del .diff-dot{background:#dc2626}
    .diff-row code{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;background:var(--surface-2);padding:1px 5px;border-radius:4px}
    /* Global-overrides box: stays calm/recessed in the background while running
       and only the whole box lights up bright red once a fault actually fires
       (current step is a global-override target), so an operator spots it at a
       glance. */
    .preview-canvas svg [data-deco="global"]{transition:opacity .2s ease}
    .preview-canvas.sim svg [data-deco="global"]{opacity:.55}
    .preview-canvas.sim svg [data-deco="global"].gob-fault{opacity:1;filter:drop-shadow(0 0 2px #ef4444) drop-shadow(0 0 9px rgba(239,68,68,.7))}
    .preview-canvas svg [data-deco="global"].gob-fault .gob-card{fill:#fef2f2;stroke:#ef4444;stroke-width:2px}
    .preview-canvas svg [data-deco="global"].gob-fault .gob-accent{fill:#ef4444}
    .preview-canvas svg [data-deco="global"].gob-fault text{fill:#b91c1c !important}
    html[data-theme="dark"] .preview-canvas svg [data-deco="global"].gob-fault .gob-card{fill:#3b0d0d;stroke:#ef4444}
    html[data-theme="dark"] .preview-canvas svg [data-deco="global"].gob-fault text{fill:#fca5a5 !important}
    /* The exact override rule that fired pops bright red & bold within the box. */
    .preview-canvas svg [data-deco="global"] text.sim-ov-line{fill:#dc2626 !important;font-weight:700}
    html[data-theme="dark"] .preview-canvas svg [data-deco="global"] text.sim-ov-line{fill:#fecaca !important}
    /* Temporary "ghost" ray shot from the GLOBAL CONDITIONS box to the target
       step when a global override fires (no permanent arrow exists for it). */
    .preview-canvas svg .sim-ghost{fill:none;stroke:#ef4444;stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:7 6;pointer-events:none;filter:drop-shadow(0 0 4px rgba(239,68,68,.8));animation:simGhostPulse 1s ease-in-out infinite}
    .preview-canvas svg .sim-ghost-head{fill:#ef4444}
    .preview-canvas.mono svg .sim-ghost{stroke:#000 !important;filter:none}
    .preview-canvas.mono svg .sim-ghost-head{fill:#000 !important}
    html[data-theme="dark"] .preview-canvas.mono svg .sim-ghost{stroke:#fff !important}
    html[data-theme="dark"] .preview-canvas.mono svg .sim-ghost-head{fill:#fff !important}
    @keyframes simGhostPulse{0%,100%{opacity:.55}50%{opacity:1}}
    @media(prefers-reduced-motion:reduce){.preview-canvas svg .sim-ghost{animation:none;opacity:.9}}
    .sim-beta{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);background:var(--brand-soft);padding:1px 6px;border-radius:5px;margin-left:4px}
    .sim-ctrls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .sim-btn{font-size:12px;font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);cursor:pointer}
    .sim-btn:hover{border-color:var(--brand)}
    .sim-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
    .sim-btn.primary.running{background:var(--warn);border-color:var(--warn)}
    .sim-btn.export{display:inline-flex;align-items:center;gap:5px;color:#fff;background:var(--ok,#16a34a);border-color:var(--ok,#16a34a)}
    .sim-btn.export:hover{filter:brightness(1.07);border-color:var(--ok,#16a34a)}
    .sim-btn.export svg{width:14px;height:14px}
    .sim-speed{font-size:12px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);cursor:pointer}
    .sim-body{display:grid;grid-template-columns:1fr}
    .sim-col{padding:14px 16px;border-bottom:1px solid var(--line);min-width:0}
    .sim-col:last-child{border-bottom:none}
    .sim-sub{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);font-weight:600;margin-bottom:10px}
    .sim-inputs{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
    .sim-inputs .none{font-size:12px;color:var(--ink-muted)}
    .sim-input{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .sim-input .var{font-family:var(--mono);font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .sim-num{width:78px;font-family:var(--mono);font-size:12px;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--ink)}
    .sim-toggle{position:relative;width:38px;height:21px;flex:none}
    .sim-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
    .sim-toggle .tk{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .15s}
    .sim-toggle .tk::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s}
    .sim-toggle input:checked + .tk{background:var(--ok)}
    .sim-toggle input:checked + .tk::after{transform:translateX(17px)}
    /* Master "all inputs" row: a subtle divider above it. */
    .sim-input-all{padding-bottom:8px;margin-bottom:2px;border-bottom:1px dashed var(--line)}
    .sim-input-all .var{font-weight:700;color:var(--ink-soft)}
    /* Force fault/error toggle, kept apart from the regular inputs. */
    .sim-force{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
    .sim-force-row .var{color:var(--err);font-weight:700}
    .sim-toggle-fault input:checked + .tk{background:var(--err)}
    /* Scope the readout style to the panel so it never bleeds into SVG diamond
       <text class="sim-cur"> fragments (those keep their static font size). */
    .sim-cur-wrap .sim-cur{font-family:var(--mono);font-size:18px;font-weight:750;color:var(--brand)}
    .sim-cur-desc{font-size:12.5px;color:var(--ink-soft);margin-top:2px;min-height:16px}
    .sim-out-wrap{margin-top:16px}
    .sim-out-list{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
    .sim-out-list .none{font-family:inherit;color:var(--ink-muted)}
    .sim-log{display:flex;flex-direction:column;gap:4px;font-size:11.5px;max-height:240px;overflow:auto}
    .sim-log .row{display:flex;gap:7px;align-items:baseline}
    .sim-log .n{color:var(--ink-soft);font-family:var(--mono);font-size:10.5px;flex:none;min-width:22px}
    .sim-log .msg{color:color-mix(in srgb,var(--ink-soft) 45%,var(--ink));font-family:var(--mono);font-size:11px;word-break:break-word}
    .sim-log .row.move .msg{color:var(--ink)}
    .sim-log .row.warn .msg{color:var(--warn)}
    .sim-log .row.err .msg{color:var(--err)}

    /* ── Analog value charting (live oscilloscope) ── A mini realtime trend of
       the numeric (REAL/INT) inputs, drawn on a canvas below the simulator body
       and sampled on every scan / manual value change. */
    .sim-scope{padding:12px 16px 14px;border-top:1px solid var(--line)}
    .sim-scope-legend{display:inline-flex;flex-wrap:wrap;gap:4px 12px;margin-left:8px;vertical-align:middle}
    .sim-scope-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink-soft);font-family:var(--mono)}
    .sim-scope-dot{width:11px;height:3px;border-radius:2px;display:inline-block}
    .sim-scope-canvas{display:block;width:100%;height:96px;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}

    .grid2{display:grid;grid-template-columns:300px 1fr;gap:16px}
    @media(max-width:1400px){.grid2{grid-template-columns:1fr}}
    .ring-wrap{display:flex;align-items:center;gap:16px;padding:16px}
    .ring{position:relative;width:84px;height:84px;flex:none}
    .ring .lbl{position:absolute;inset:0;display:grid;place-items:center;font-weight:750;font-size:18px}
    .checks{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--ink-soft);min-width:0}
    .checks div{display:flex;align-items:flex-start;gap:8px}
    .checks .ok{color:var(--ok)} .checks .warn{color:var(--warn)} .checks svg{width:14px;height:14px;flex:none;margin-top:2px}

    table{width:100%;border-collapse:collapse;font-size:12.5px}
    th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);font-weight:600;padding:10px 16px;border-bottom:1px solid var(--line)}
    td{padding:10px 16px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
    tr:last-child td{border-bottom:none}
    .chip{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);padding:2px 7px;border-radius:6px;color:var(--ink);white-space:nowrap}
    .arrow{color:var(--brand);font-weight:700;text-align:center}
    td .cond{font-family:var(--mono);font-size:11px;color:var(--ink-muted)}

    .io-warn{display:flex;align-items:flex-start;gap:8px;margin:0 16px 10px;padding:9px 11px;font-size:12.5px;line-height:1.45;color:var(--warn);background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.28);border-radius:8px}
    .io-warn svg{width:15px;height:15px;flex:none;margin-top:1px}
    .io-hint{margin:2px 16px 8px;font-size:12px;color:var(--ink-muted);line-height:1.5}
    .io-table td{font-size:12px}
    .io-table .io-lines{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
    .io-table .io-none{color:var(--ink-muted)}
    .io-table .io-type{font-family:var(--mono);font-size:11px;color:var(--ink-muted);text-transform:uppercase}
    .io-cnt{display:inline-block;min-width:15px;text-align:center;font-size:10px;font-weight:700;color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 4px;margin-right:5px}
    .io-var{background:transparent}
    .io-dir{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
    .io-dir-input{color:#2563eb;background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.28)}
    .io-dir-output{color:#16a34a;background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.28)}
    .io-dir-inout{color:#7c3aed;background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.28)}
    .io-dir-internal{color:var(--ink-muted);background:var(--surface-2);border-color:var(--line)}
    .io-table tr.io-conflict td{background:rgba(220,38,38,.06)}
    .io-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#dc2626;background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.3);border-radius:6px;padding:1px 6px;vertical-align:middle}

    .chips{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px}
    .explain{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-soft);white-space:pre-wrap;padding:14px 16px;max-height:340px;overflow:auto;margin:0}
    details.log summary{cursor:pointer;padding:13px 16px;font-size:13px;font-weight:650;list-style:none}
    details.log summary::-webkit-details-marker{display:none}
    details.log summary::before{content:"\25B8";margin-right:8px;color:var(--ink-muted)}
    details.log[open] summary::before{content:"\25BE"}

    .exports{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}
    @media(max-width:1500px){.exports{grid-template-columns:repeat(2,1fr)}}
    .exports form{margin:0}
    .exp{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);cursor:pointer;transition:.15s;text-align:left;font-family:var(--font)}
    .exp:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
    .exp .efmt{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:750;color:#fff;flex:none}
    .exp .et{font-size:12.5px;font-weight:600;color:var(--ink);display:block}
    .exp .ed{font-size:10.5px;color:var(--ink-muted);display:block}
    .exp.disabled{cursor:not-allowed;opacity:.5;filter:grayscale(1)}
    .exp.disabled:hover{border-color:var(--line);background:var(--surface-2);transform:none}
    .exp-sel-hint{display:flex;align-items:flex-start;gap:8px;margin:0;padding:0 16px 16px;font-size:12px;line-height:1.45;color:var(--ink-muted)}
    .exp-sel-hint svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-soft)}
    .exp-sel-hint.ready{color:var(--ok)}
    .exp-sel-hint.ready svg{color:var(--ok)}
    .exp-head-right{display:flex;align-items:center;gap:12px}
    .exp-switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
    .exp-switch input{position:absolute;opacity:0;width:0;height:0}
    .exp-switch .sw-lbl{font-size:11.5px;color:var(--ink-muted);font-weight:500}
    .exp-switch .sw-track{width:32px;height:18px;border-radius:999px;background:var(--line);position:relative;transition:.15s;flex:none}
    .exp-switch .sw-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
    .exp-switch input:checked + .sw-track{background:var(--brand)}
    .exp-switch input:checked + .sw-track .sw-knob{transform:translateX(14px)}
    .f-docx{background:#2b579a}.f-pdf{background:#d92d20}.f-svg{background:#ff7a00}.f-png{background:#0f9d58}
    .f-json{background:#555}.f-full{background:#7c3aed}

    .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink-muted);gap:14px;padding:40px}
    .empty .eic{width:64px;height:64px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);box-shadow:var(--shadow-sm)}
    .empty .eic svg{width:30px;height:30px}
    .empty h3{font-size:16px;font-weight:700;color:var(--ink)}
    .empty p{font-size:13px;max-width:340px}

    /* Launch / welcome page (shown before the first analysis) */
    .launch{display:flex;flex-direction:column;gap:22px;animation:lpf .5s ease}
    @keyframes lpf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    .lp-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:30px 28px;
      background:radial-gradient(130% 130% at 100% 0%, color-mix(in srgb,var(--brand) 18%,transparent), transparent 56%),var(--surface)}
    .lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 130%, color-mix(in srgb,var(--brand-2) 15%,transparent), transparent 46%)}
    .lp-hero>*{position:relative;z-index:1}
    .lp-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--brand);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);padding:4px 10px;border-radius:999px}
    .lp-badge svg{width:13px;height:13px}
    .lp-hero h1{font-size:25px;line-height:1.18;font-weight:800;letter-spacing:-.02em;margin:14px 0 9px;max-width:26ch}
    .lp-hero p.sub{font-size:13.5px;color:var(--ink-soft);max-width:48ch}
    .lp-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
    .lp-btn{height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:650;font-size:13px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:.15s;font-family:var(--font)}
    .lp-btn svg{width:16px;height:16px}
    .lp-btn:hover{border-color:var(--line-strong);transform:translateY(-1px)}
    .lp-btn.primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;border:none;box-shadow:0 1px 2px rgba(79,70,229,.4),inset 0 1px 0 rgba(255,255,255,.18)}
    .lp-btn.primary:hover{filter:brightness(1.07)}
    .lp-try{position:relative;padding-right:34px;cursor:pointer}
    .lp-try>svg:first-child{width:16px;height:16px;flex:none;pointer-events:none}
    .lp-try-label{pointer-events:none;font-weight:650;font-size:13px}
    .lp-try-sel{position:absolute;inset:0;width:100%;height:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;color:transparent;font-family:var(--font);font-weight:650;font-size:13px;cursor:pointer;padding:0;margin:0;outline:none;opacity:0}
    .lp-try-sel:focus-visible+.lp-try-caret,.lp-try:focus-within{outline:none}
    .lp-try:focus-within{box-shadow:0 0 0 3px rgba(79,70,229,.45)}
    .lp-try-sel option{color:var(--ink);background:var(--surface)}
    .lp-try-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none}
    .lp-example-hint{display:flex;width:fit-content;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--brand);font-family:var(--font)}
    .lp-example-hint svg{width:20px;height:20px;flex:none;animation:lpArrowUp 1.4s ease-in-out infinite}
    @keyframes lpArrowUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    @media(prefers-reduced-motion:reduce){.lp-example-hint svg{animation:none}}
    .lp-scroll{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:12px;color:var(--ink-muted);background:none;border:none;cursor:pointer;font-family:var(--font);padding:0}
    .lp-scroll svg{width:14px;height:14px;animation:lpbnc 1.6s ease-in-out infinite}
    @keyframes lpbnc{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
    .lp-sec-h{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);margin-bottom:12px}
    .lp-sec-h::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--brand)}
    .lp-steps{display:flex;flex-direction:column;gap:10px}
    .lp-step{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow-sm);transition:.15s}
    .lp-step:hover{border-color:var(--line-strong);transform:translateY(-1px)}
    .lp-step .n{flex:none;width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:14px;display:grid;place-items:center}
    .lp-step h4{font-size:14px;font-weight:700;margin-bottom:2px}
    .lp-step p{font-size:12.5px;color:var(--ink-soft)}
    .lp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .lp-feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:.15s}
    .lp-feat:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-md)}
    .lp-feat .fic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:11px;color:#fff}
    .lp-feat .fic svg{width:19px;height:19px}
    .lp-feat h4{font-size:13.5px;font-weight:700;margin-bottom:3px}
    .lp-feat p{font-size:12px;color:var(--ink-soft);line-height:1.45}
    .fic.c1{background:linear-gradient(135deg,#4f46e5,#6366f1)}
    .fic.c2{background:linear-gradient(135deg,#0ea5e9,#22d3ee)}
    .fic.c3{background:linear-gradient(135deg,#0f9d58,#34d399)}
    .fic.c4{background:linear-gradient(135deg,#c2710c,#f59e0b)}
    .fic.c5{background:linear-gradient(135deg,#db2777,#f472b6)}
    .fic.c6{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
    .lp-formats{display:flex;flex-wrap:wrap;gap:8px}
    .lp-fmt{font-size:11px;font-weight:700;letter-spacing:.02em;padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);box-shadow:var(--shadow-sm)}
    .lp-privacy{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--ok);background:var(--ok-soft);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
    .lp-privacy .pic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--ok);color:#fff;flex:none}
    .lp-privacy .pic svg{width:21px;height:21px}
    .lp-privacy h4{font-size:15px;font-weight:800;margin-bottom:5px;color:var(--ink)}
    .lp-privacy p{font-size:13px;line-height:1.6;color:var(--ink-soft)}
    .lp-final{text-align:center;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface-2);padding:26px 22px;display:flex;flex-direction:column;align-items:center}
    .lp-final h3{font-size:17px;font-weight:800;margin-bottom:6px}
    .lp-final p{font-size:13px;color:var(--ink-soft);margin-bottom:16px;max-width:42ch}

    /* ── Tablet / small-screen topbar ── Trim decorative chrome progressively
       so the action buttons never clip off the right edge, and keep every
       button label on a single line. */
    @media(max-width:1200px){
      .brand .sub{display:none}
      .topbar .pill{display:none}            /* IEC 61131-3 badge */
    }
    @media(max-width:1080px){
      .topbar{gap:10px;padding:0 12px}
      .pill-beta{display:none}               /* version pill */
      .zs-badge .zs-lbl{display:none}         /* collapse to shield icon */
      .zs-badge{padding:4px}
    }
    @media(max-width:860px){
      /* Icon-only topbar actions on tablets in portrait; the title tooltips
         (data-i18n-title) keep them discoverable. */
      .tb-actions{gap:6px}
      .tb-actions .btn{padding:0 9px}
      .tb-actions .btn>span{display:none}
    }
    @media(max-width:560px){
      .topbar{padding:0 8px;gap:6px}
      .zs-badge{display:none}
      .tb-actions{gap:4px}
      .tb-actions .btn{padding:0 8px}
      .flag-btn{width:30px}
    }

    @media(max-width:1080px){
      body{overflow:auto;overflow-x:hidden;height:auto}
      .shell{grid-template-columns:1fr;height:auto}
      .rail{flex-direction:row;justify-content:center;border-right:none;border-bottom:1px solid var(--line)}
      .rail .grow{display:none}
      .rail a.active::before{display:none}
      .rail a::after{left:50%;top:calc(100% + 8px);transform:translateX(-50%)}
      .col.editor{border-right:none;border-bottom:1px solid var(--line)}
      .col.results{overflow:visible}
      .results-inner{flex:none;overflow:visible}
      .etab-pane{overflow:visible}
      .sim-card .sim-body{overflow:visible}
      .tc-card .tc-body{overflow:visible}
      .stats{grid-template-columns:repeat(2,1fr)}
      .lp-grid{grid-template-columns:1fr}
      .code-edit{min-height:280px}
    }

    /* Designer needs a larger canvas — hide the rail shortcut on phones/tablets
       (touch devices) and very narrow screens, but keep it for real laptops. */
    @media(max-width:767px),(pointer:coarse){#designerBtn{display:none}}

    .btn.is-busy{opacity:.75;cursor:progress;pointer-events:none}