:root{
    --bg:#ffffff;
    --bg2:#ffffff;
    --panel:#ffffff;
    --panel2:#f5f5f5;
    --line:#d0d0d0;
    --line2:#999999;
    --txt:#000000;
    --muted:#333333;
    --dim:#555555;
    --accent:#000000;
    --accent2:#222222;
    --accent3:#444444;
    --good:#000000;
    --warn:#000000;
    --bad:#000000;
    --mono:'SF Mono',ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
    --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:
      radial-gradient(1200px 700px at 85% -10%,rgba(0,0,0,.06),transparent 60%),
      radial-gradient(1000px 600px at -5% 110%,rgba(0,0,0,.05),transparent 55%),
      var(--bg);
    color:var(--txt);
    font-family:var(--sans);
    font-size:14px;
    -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit}
  code,pre,.mono{font-family:var(--mono)}

  /* ---------- Login ---------- */
  #login{
    position:fixed;inset:0;z-index:100;
    display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(900px 600px at 50% 0%,rgba(0,0,0,.18),transparent 60%),
      var(--bg);
  }
  .login-card{
    width:min(380px,92vw);
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px 28px;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
  .brand .dot{width:26px;height:26px;border-radius:8px;
    background:conic-gradient(from 210deg,var(--accent),var(--accent2),var(--accent3),var(--accent));
    box-shadow:0 0 22px rgba(0,0,0,.4)}
  .brand b{font-size:16px;letter-spacing:.2px}
  .login-card h1{font-size:19px;margin:18px 0 4px}
  .login-card p{color:var(--muted);margin:0 0 20px;font-size:13px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
  .field input{
    width:100%;padding:11px 13px;border-radius:10px;
    background:#ffffff;border:1px solid var(--line2);color:var(--txt);
    font-size:14px;outline:none;transition:border .15s,box-shadow .15s;
  }
  .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.15)}
  .btn{
    width:100%;padding:12px;border-radius:10px;border:0;cursor:pointer;
    font-weight:600;font-size:14px;color:#ffffff;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    transition:transform .08s,filter .15s;
  }
  .btn:hover{filter:brightness(1.07)}
  .btn:active{transform:translateY(1px)}
  .login-err{color:var(--bad);font-size:12.5px;min-height:16px;margin-top:10px}
  .login-err.ok{color:var(--good)}
  .login-note{margin-top:16px;color:var(--dim);font-size:11px;line-height:1.5;border-top:1px solid var(--line);padding-top:12px}
  .switchrow{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:12px;color:var(--muted)}
  .switchrow a{color:var(--accent);text-decoration:none}
  .switchrow a:hover{text-decoration:underline}
  .keybox{display:flex;align-items:center;gap:8px;background:#ffffff;border:1px solid var(--line2);
    border-radius:10px;padding:12px 13px;margin-bottom:14px}
  .keybox code{flex:1;color:var(--accent);font-size:15px;letter-spacing:.5px;word-break:break-all}
  .keycopy{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:8px;
    padding:7px 12px;cursor:pointer;font-size:12px;transition:.12s}
  .keycopy:hover{border-color:var(--accent);color:var(--accent)}
  .keycopy.done{border-color:var(--good);color:var(--good)}
  .ack{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:16px;cursor:pointer}
  .ack input{accent-color:var(--accent);width:15px;height:15px}

  /* ---------- App shell ---------- */
  #app{display:none;height:100vh;flex-direction:column}
  header.top{
    display:flex;align-items:center;gap:14px;
    padding:10px 16px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.98);backdrop-filter:blur(8px);
  }
  header.top .brand b{font-size:15px}
  header.top .sub{color:var(--dim);font-size:11.5px;margin-left:-4px}
  .spacer{flex:1}
  .pill{
    font-size:11px;color:var(--muted);background:var(--panel);
    border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  }
  .pill b{color:var(--accent)}
  .ghost{
    background:var(--panel);border:1px solid var(--line2);color:var(--muted);
    border-radius:9px;padding:7px 12px;cursor:pointer;font-size:12.5px;
    transition:.15s;
  }
  .ghost:hover{color:var(--txt);border-color:var(--accent)}

  .layout{flex:1;display:grid;grid-template-columns:minmax(360px,1fr) minmax(520px,1.35fr);gap:0;min-height:0}
  .colL{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
  .colR{display:flex;flex-direction:column;min-height:0}

  /* ---------- Code pane ---------- */
  .pane-head{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-bottom:1px solid var(--line);
    font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;
  }
  .pane-head .tag{color:var(--accent2);font-weight:600}
  .codewrap{flex:1;overflow:auto;min-height:0;background:var(--bg2)}
  table.code{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:12.5px}
  table.code td{padding:2px 0;vertical-align:top;line-height:1.55}
  td.ln{
    width:44px;text-align:right;padding-right:12px;color:var(--dim);
    user-select:none;border-right:1px solid var(--line);position:sticky;left:0;background:var(--bg2);
  }
  td.src{padding-left:14px;white-space:pre;color:#000000}
  tr.active td.src{background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.02))}
  tr.active td.ln{color:var(--accent);background:rgba(0,0,0,.08)}
  tr.active td.src::before{content:"▶";color:var(--accent);margin-left:-11px;margin-right:3px;font-size:9px;position:relative;top:-1px}
  .tok-kw{color:#000000}.tok-fn{color:#222222}.tok-num{color:#111111}
  .tok-str{color:#222222}.tok-com{color:#555555;font-style:italic}.tok-op{color:#333333}

  .controls{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:11px 14px;border-top:1px solid var(--line);background:var(--panel);
  }
  .ctl{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
    border-radius:9px;padding:8px 12px;cursor:pointer;font-size:12.5px;font-weight:500;transition:.12s;
  }
  .ctl:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .ctl:disabled{opacity:.4;cursor:default}
  .ctl.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#ffffff;border:0;font-weight:600}
  .ctl.primary:hover{filter:brightness(1.08)}
  .speed{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-left:auto}
  .speed input{accent-color:var(--accent)}
  .filebtn{position:relative;overflow:hidden}
  .filebtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

  /* ---------- Visual panes ---------- */
  .tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
  .tab{
    padding:7px 13px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--muted);
    border:1px solid transparent;transition:.12s;
  }
  .tab:hover{color:var(--txt)}
  .tab.active{background:var(--panel2);border-color:var(--line2);color:var(--accent)}
  .views{flex:1;overflow:auto;min-height:0;padding:16px}
  .view{display:none}
  .view.active{display:block}
  .view h3{margin:0 0 4px;font-size:13px;color:var(--txt);font-weight:600}
  .view .hint{color:var(--dim);font-size:11.5px;margin:0 0 14px}

  .status-bar{
    display:flex;gap:16px;align-items:center;flex-wrap:wrap;
    padding:9px 16px;border-top:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--muted);
  }
  .status-bar b{color:var(--txt)}
  .chip{background:var(--panel2);border:1px solid var(--line2);border-radius:7px;padding:4px 9px}
  .chip.step{color:var(--accent)}
  .msg{color:var(--warn)}
  .msg.err{color:var(--bad)}
  .msg.ok{color:var(--good)}

  /* bloch grid */
  .bloch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .bloch-cell{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
  .bloch-cell canvas{width:100%;height:auto;display:block}
  .bloch-cell .qname{font-size:12px;color:var(--accent);font-weight:600;margin-top:4px}
  .bloch-cell .qstate{font-size:10.5px;color:var(--dim);font-family:var(--mono);margin-top:2px}

  /* bars */
  .bars{display:flex;flex-direction:column;gap:7px}
  .barrow{display:grid;grid-template-columns:72px 1fr 58px;align-items:center;gap:10px}
  .barrow .lbl{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}
  .bartrack{height:20px;background:#ffffff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .barfill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:5px;transition:width .3s}
  .barrow .pct{font-family:var(--mono);font-size:11.5px;color:var(--dim);text-align:right}

  .hist{display:flex;align-items:flex-end;gap:10px;height:230px;padding:10px 4px;border-bottom:1px solid var(--line);overflow-x:auto}
  .histcol{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:42px}
  .histbar{width:34px;background:linear-gradient(180deg,var(--accent3),var(--accent2));border-radius:6px 6px 0 0;transition:height .3s;min-height:2px;box-shadow:0 0 14px rgba(0,0,0,.25)}
  .histcol .hv{font-size:11px;color:var(--muted);font-family:var(--mono)}
  .histcol .hl{font-size:11px;color:var(--dim);font-family:var(--mono);writing-mode:horizontal-tb}

  .circuit-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:4px}
  svg.circuit{display:block}

  .empty{color:var(--dim);text-align:center;padding:50px 20px;font-size:13px;line-height:1.6}
  .empty b{color:var(--muted)}
  a.link{color:var(--accent);text-decoration:none}
  a.link:hover{text-decoration:underline}

  .toast{
    position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
    background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
    padding:11px 18px;border-radius:11px;font-size:13px;z-index:50;
    box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

  @media(max-width:900px){
    .layout{grid-template-columns:1fr;grid-template-rows:auto auto}
    .colL{border-right:0;border-bottom:1px solid var(--line)}
  }

@media(max-width:760px){header{flex-wrap:wrap;gap:10px}header .sub{max-width:280px}.controls{flex-wrap:wrap}}

[hidden]{display:none!important}a{color:inherit}.back-home{display:inline-block;margin-top:20px;font-size:12px;color:var(--accent);text-decoration:none}#login{overflow:auto;padding:24px 0;align-items:safe center}.login-card{width:min(420px,92vw);box-shadow:0 20px 70px #0004}.login-err{line-height:1.5}.field input{background:#ffffff}.syntax-help{font-size:11px;line-height:1.7;padding:10px 15px;border-top:1px solid var(--line);max-height:185px;overflow:auto;background:var(--panel)}.syntax-help p{color:var(--muted)}.syntax-help summary{cursor:pointer;color:var(--accent)}.tab{background:transparent}.tab:focus-visible,.ctl:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#sourceEditor{flex:1;min-height:260px;width:100%;border:0;border-bottom:1px solid var(--line);padding:18px;background:#ffffff;color:#000000;font:12px/1.7 var(--mono);resize:vertical}#sourceEditor:not([hidden])+.codewrap{display:none}header.top{background:#ffffff}.top .sub{max-width:500px}.status-bar .msg{flex-basis:100%;font-size:11px;line-height:1.6}.barrow{grid-template-columns:90px 1fr 60px}.view .hint{line-height:1.7}@media(max-width:980px){.layout{grid-template-columns:1fr;overflow:auto}.colL{height:520px;border-right:0;border-bottom:1px solid var(--line)}.colR{min-height:520px}.views{min-height:350px}header.top{flex-wrap:wrap}.top .spacer{display:none}.tabs{overflow-x:auto}.tab{white-space:nowrap}.syntax-help{max-height:155px}}@media(max-width:600px){header.top{padding:14px;gap:9px}header.top .sub{font-size:10px;max-width:300px}.pill{font-size:10px;padding:4px 8px}#fwPill{display:none}.colL{height:560px}.controls{gap:6px}.ctl{font-size:11px;padding:7px 9px}.views{padding:12px}.speed{margin-left:0}.login-card{padding:25px 23px}.brand b{font-size:14px}.barrow{grid-template-columns:90px 1fr 55px;gap:6px}}

/* Account-backed saved work and clear Run state. */
.project-bar{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:12px 15px;background:var(--panel);border-bottom:1px solid var(--line)}
.project-bar>label{grid-column:1/-1;font-size:11px;color:var(--muted)}
.project-bar>input,.library-search input{min-width:0;background:var(--bg2);border:1px solid var(--line2);color:var(--txt);padding:9px 11px;border-radius:7px;font:13px var(--sans)}
.project-actions{display:flex;gap:6px}.save-action{border-color:#222222;color:#ffffff;background:#000000}.project-bar p{grid-column:1/-1;margin:0;font-size:11px;color:var(--muted);line-height:1.6}.project-bar p.saved{color:#000000}.project-bar p.error{color:var(--bad)}
.tab.run-complete,.tab.run-complete.active{background:#000000;border-color:#000000;color:#ffffff;font-weight:700}
#playBtn:not(.primary){background:var(--panel2);border:1px solid var(--line2);color:var(--txt);font-weight:500}
#savedAlgorithmsDialog{width:min(760px,94vw);max-height:85vh;padding:24px;border-radius:14px;background:var(--bg2);color:var(--txt);border:1px solid var(--line2);box-shadow:0 24px 100px #0008}
#savedAlgorithmsDialog::backdrop{background:#00000066;backdrop-filter:blur(3px)}.library-header{display:flex;justify-content:space-between;align-items:start;gap:20px}.library-header h2{font-size:21px;margin:0}.library-header p{font-size:12px;color:var(--muted);margin:8px 0 22px}.library-search{margin-bottom:18px}.library-search label{font-size:11px;display:block;margin-bottom:7px;color:var(--muted)}.library-search>div{display:flex;gap:10px}.library-search input{flex:1}#libraryStatus{font-size:12px;color:var(--muted);line-height:1.7}.saved-list{display:flex;flex-direction:column;gap:9px}.saved-item{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:9px;padding:14px;background:var(--panel)}.saved-item-info{min-width:0;flex:1}.saved-item strong{display:block;overflow-wrap:anywhere;font-size:13px}.saved-item small{display:block;margin-top:6px;color:var(--muted);font-size:10px;line-height:1.7;overflow-wrap:anywhere}.saved-item-actions{display:flex;gap:7px;flex-shrink:0}.library-pagination{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;font-size:11px;color:var(--muted)}.ghost:disabled{opacity:.4;cursor:default}.project-actions .ctl:disabled{opacity:.5;cursor:wait}
@media(max-width:600px){.project-bar{grid-template-columns:1fr}.project-actions{grid-column:1/-1}.saved-item{align-items:start;flex-direction:column;gap:12px}.saved-item-actions{width:100%}.saved-item-actions .ctl{flex:1;justify-content:center}#savedAlgorithmsDialog{padding:19px}.library-header{gap:12px}.colL{height:680px}}

.research-disclosure,.project-bar p.research-disclosure{grid-column:1/-1;margin:8px 0 12px;padding:10px 12px;border-left:3px solid #000000;background:#f5f5f5;color:#000000;font-size:11px;line-height:1.75}.research-disclosure strong{color:#000000}.project-bar p.research-disclosure{margin:2px 0 0}#savedAlgorithmsDialog .research-disclosure{margin:0 0 18px}

/* Four simultaneous visualizations. Each desktop pane scrolls independently. */
.layout{grid-template-columns:minmax(320px,.8fr) minmax(640px,1.6fr)}
.results-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);font-size:12px}
.results-toolbar span{font-size:10px;color:var(--muted)}
.views.four-pane-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;padding:12px;overflow:hidden;min-height:0;flex:1;align-items:stretch}
.four-pane-grid>.view{display:block!important;min-width:0;min-height:0;overflow:auto;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--bg2)}
.four-pane-grid .pane-title{display:inline-block;font-size:13px;line-height:1.5;margin:0 0 8px;padding:5px 9px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--txt)}
.four-pane-grid .pane-title.run-complete{background:#000000;border-color:#000000;color:#ffffff;font-weight:700}
.four-pane-grid .hint{font-size:10px;line-height:1.65;margin-bottom:12px}
.four-pane-grid .bloch-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.four-pane-grid .bloch-cell{padding:7px;border-radius:9px}.four-pane-grid .bloch-cell .qstate{font-size:9px}.four-pane-grid .bloch-cell .qname{font-size:11px}
.four-pane-grid .circuit-wrap{max-width:100%;border-radius:8px}.four-pane-grid .hist{height:215px}.four-pane-grid .barrow{grid-template-columns:84px minmax(35px,1fr) 49px;gap:7px}.four-pane-grid .barrow .lbl,.four-pane-grid .barrow .pct{font-size:10px}
.colR>.status-bar{margin-top:auto}
@media(max-width:1000px){.layout{grid-template-columns:1fr;overflow:auto}.colL{height:600px;border-right:0;border-bottom:1px solid var(--line)}.colR{min-height:1040px;overflow:visible}.views.four-pane-grid{min-height:900px;flex:1;grid-template-rows:repeat(2,minmax(430px,1fr));overflow:visible}}
@media(max-width:640px){.colL{height:700px}.colR{min-height:0}.results-toolbar{padding:11px 12px;flex-wrap:wrap}.views.four-pane-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(300px,auto);min-height:0;overflow:visible;padding:10px;gap:10px}.four-pane-grid>.view{max-height:520px;min-height:300px;padding:12px}.four-pane-grid .bloch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.four-pane-grid .hist{height:230px}.colR>.status-bar{margin-top:0}}
#playBtn.primary[aria-pressed="true"]{background:#000000;color:#ffffff;border:1px solid #000000;box-shadow:inset 0 2px 3px #00000035}

/* Black on white appearance; layout and account behavior remain the same. */
:root{color-scheme:light}
body,#login,header.top,.login-card{background:#ffffff}
.login-card{box-shadow:0 12px 40px #00000014}
.btn,.ctl.primary,.save-action{background:#000000;color:#ffffff;border-color:#000000}
.ctl.primary:hover:not(:disabled),.save-action:hover:not(:disabled){background:#222222;color:#ffffff;border-color:#000000}
#playBtn.primary[aria-pressed="true"]{background:#000000;color:#ffffff;border:1px solid #000000;box-shadow:inset 0 2px 3px #ffffff33}
input[type=number],textarea,select{background:#ffffff;color:#000000;border-color:#999999}
::selection{background:#000000;color:#ffffff}

/* Separate light backgrounds for the four result panes. */
#view-circuit{background:#eef6ff}
#view-bloch{background:#eefbf3}
#view-amp{background:#fff8df}
#view-results{background:#f5efff}
#view-circuit .pane-title:not(.run-complete){background:#d9eaff;color:#000000}
#view-bloch .pane-title{background:#d7f0e0;color:#000000}
#view-amp .pane-title{background:#f6eab6;color:#000000}
#view-results .pane-title{background:#e8ddfa;color:#000000}

/* Color belongs to the visual marks; interface text stays black. */
#view-amp .bartrack{background:#fff5cf}
#view-amp .barfill{background:linear-gradient(90deg,#d97706,#f59e0b)}
#view-results .histbar{background:linear-gradient(180deg,#8b5cf6,#6d28d9);box-shadow:none}
#view-bloch .bloch-cell{background:#f9fffb;border-color:#badbc8}

/* Validation dialog: errors are text, and Edit returns to the original source. */
.program-error-dialog{width:min(560px,94vw);max-height:85vh;overflow:auto;padding:25px;background:#ffffff;color:#000000;border:1px solid #999999;border-radius:14px;box-shadow:0 20px 70px #00000026}
.program-error-dialog::backdrop{background:#00000066}
.program-error-dialog h2{margin:0 0 12px;font-size:21px}
.program-error-dialog p{font-size:13px;line-height:1.7;margin:0 0 14px}
#programErrorMessage{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 var(--mono);padding:13px;background:#fff2ef;border-left:3px solid #b42318;color:#000000;margin:0 0 16px}
.program-error-dialog .program-error-limits{font-size:12px;color:#333333}
.program-error-actions{display:flex;gap:10px;flex-wrap:wrap}

/* All output panes remain together in the desktop viewport. */
.pane-fit-header{display:flex;align-items:center;justify-content:space-between;gap:6px;flex:none;margin-bottom:7px}
.pane-fit-header .pane-title{margin:0!important}
.expand-pane{background:#ffffff;border:1px solid #999999;border-radius:5px;color:#000000;padding:4px 6px;cursor:pointer;font:11px var(--sans);white-space:nowrap}
.pane-viewport{min-width:0;min-height:0}
.pane-content{transform-origin:top left;min-width:0}
.pane-zoom-dialog{width:96vw;max-width:none;height:92dvh;max-height:94dvh;padding:16px;border:1px solid #999999;border-radius:12px;background:#ffffff;color:#000000}
.pane-zoom-dialog::backdrop{background:#00000077}
.pane-zoom-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pane-zoom-header h2{font-size:18px;margin:0}
.pane-zoom-body{height:calc(100% - 50px);overflow:auto;min-height:0}
.view.pane-expanded{display:block!important;max-height:none!important;height:auto!important;min-height:100%;padding:18px;border:1px solid #cccccc;border-radius:9px;overflow:visible!important}
.pane-expanded .pane-viewport{overflow:visible!important;display:block!important;min-height:0!important;height:auto!important}
.pane-expanded .pane-content{transform:none!important;width:100%}
.pane-expanded .expand-pane{display:none}
.pane-expanded .circuit-wrap{overflow:auto!important;width:100%!important;max-width:100%!important}
.pane-expanded .bloch-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
.pane-expanded .hist{overflow-x:auto!important}
@media(min-width:760px) and (min-height:520px){
 html,body{height:100%;overflow:hidden}
 #app{height:100dvh;min-height:0;overflow:hidden}
 header.top{flex-shrink:0;padding:7px 12px;gap:8px;flex-wrap:wrap}
 .top .sub{font-size:10px}.pill{font-size:10px;padding:4px 7px}
 .layout{grid-template-columns:minmax(255px,.9fr) minmax(0,1.8fr);grid-template-rows:minmax(0,1fr);overflow:hidden;min-height:0}
 .colL{height:auto;min-height:0;overflow:hidden;border-right:1px solid var(--line);border-bottom:0}
 .colR{min-height:0;overflow:hidden}
 .pane-head{padding:7px 11px;font-size:11px;flex-shrink:0}
 .project-bar{padding:8px 11px;gap:5px 8px;flex-shrink:0}
 .project-bar>input{padding:6px 8px;font-size:12px}
 .project-bar .research-disclosure{padding:5px 8px;font-size:10px;line-height:1.5}
 .controls{padding:7px 10px;gap:5px;flex-shrink:0}
 .controls .ctl{padding:6px 8px;font-size:11px}
 .speed{margin-left:0}
 .syntax-help{flex-shrink:0;max-height:95px;padding:7px 11px}
 .codewrap{min-height:0;overflow:auto}
 #sourceEditor{min-height:0;resize:none;overflow:auto}
 .results-toolbar{padding:7px 12px;flex-shrink:0}
 .views.four-pane-grid{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));overflow:hidden;padding:8px;gap:8px}
 .four-pane-grid>.view{display:flex!important;flex-direction:column;max-height:none;min-height:0;overflow:hidden;padding:10px}
 .four-pane-grid .pane-viewport{position:relative;flex:1;overflow:hidden}
 .four-pane-grid .pane-content{width:100%;display:flow-root}
 .four-pane-grid .pane-content>.hint{font-size:10px;line-height:1.4;margin:0 0 8px}
 .four-pane-grid .circuit-wrap{width:max-content;max-width:none;overflow:visible}
 .four-pane-grid .bloch-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .four-pane-grid .bloch-cell{padding:3px;min-width:0}
 .four-pane-grid .bloch-cell .qstate{font-size:10px;white-space:normal;overflow-wrap:anywhere}
 .four-pane-grid .bloch-cell .qname{font-size:11px;margin-top:0}
 .four-pane-grid .bars{gap:5px}.four-pane-grid .bartrack{height:15px}
 .four-pane-grid .hist{width:max-content;min-width:100%;overflow:visible;height:205px}
 .colR>.status-bar{flex-shrink:0;gap:7px;padding:6px 11px;font-size:11px;margin-top:0}
 .status-bar .chip{padding:3px 6px}
 .status-bar .msg{font-size:10px;line-height:1.4}
}