:root{--ink:#06080f;--ink1:#090d18;--ink2:#0d1220;--ink3:#111826;--b0:#1a2740;--b1:#243856;--b2:#304a6e;
  --t0:#2e4464;--t1:#4e6888;--t2:#7a9ab8;--t3:#a8c4dc;--t4:#cde0f2;--t5:#e4f0fc;
  --ff:'Manrope',system-ui,sans-serif;--ffm:'JetBrains Mono',ui-monospace,monospace;--ffd:'Syne',var(--ff);
  --fxs:clamp(9px,.8vw,14px);--fsm:clamp(10px,.9vw,15px);--fb:clamp(11px,1vw,16px);
  --flg:clamp(14px,1.4vw,22px);--fxl:clamp(18px,2vw,32px);
  --sp1:clamp(3px,.3vw,5px);--sp2:clamp(5px,.5vw,8px);--sp3:clamp(8px,.8vw,13px);--sp4:clamp(11px,1.1vw,18px);
  --rad:clamp(5px,.5vw,8px);--rad2:clamp(3px,.3vw,5px);--green:var(--t2);--red:var(--t1);--orange:var(--t1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}*{color-scheme:dark}
body{font-family:var(--ff);font-size:var(--fb);color:var(--t2);background:transparent;-webkit-font-smoothing:antialiased}
input,textarea,select,button{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;color-scheme:dark;background:transparent;border:none}
.lab-top{flex-shrink:0;height:clamp(42px,6%,54px);display:flex;align-items:center;gap:var(--sp3);padding:0 var(--sp4);background:var(--ink1);border-bottom:1px solid var(--b0)}
.lab-brand{display:flex;align-items:center;gap:var(--sp2);flex-shrink:0}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac);animation:dp 2.5s ease-in-out infinite}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.4}}
.brand-name{font-family:var(--ffd);font-size:var(--flg);font-weight:800;color:var(--t5);letter-spacing:-.03em}
.brand-name em{font-style:normal;color:var(--ac)}
.lab-nav{display:flex;gap:2px;margin:0 auto;background:var(--ink2);border:1px solid var(--b0);border-radius:calc(var(--rad) + 2px);padding:3px}
.nav-btn{background:transparent;border:none;border-radius:var(--rad);color:var(--t1);font-family:var(--ff);font-size:var(--fsm);font-weight:500;padding:var(--sp1) var(--sp3);cursor:pointer;transition:all .14s;white-space:nowrap}
.nav-btn:hover{color:var(--t4)}
.lab-badge{font-size:var(--fxs);font-family:var(--ffm);color:var(--t0);border:1px solid var(--b0);padding:2px 8px;border-radius:20px;background:var(--ink2);flex-shrink:0}
.lab-stage{flex:1;min-height:0;position:relative;overflow:hidden}
.lab-panel{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column}
.lab-foot{flex-shrink:0;height:clamp(28px,3.5vh,40px);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp4);background:var(--ink1);border-top:1px solid var(--b0);font-size:var(--fxs);color:var(--t0)}
.foot-r code{font-family:var(--ffm);font-size:var(--fxs);background:var(--ink2);border:1px solid var(--b0);padding:1px 5px;border-radius:3px}
.toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ac);color:#050b14;font-size:var(--fsm);font-weight:700;font-family:var(--ffm);padding:5px 16px;border-radius:var(--rad2);z-index:999;pointer-events:none;opacity:0;white-space:nowrap}
.toast.on{pointer-events:auto}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--b1);border-radius:2px}
::selection{background:var(--ac);color:#050b14}
code{font-family:var(--ffm);font-size:.9em;background:var(--ink2);padding:1px 5px;border-radius:3px;color:var(--ac)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp1);border:1px solid var(--b1);background:var(--ink3);color:var(--t3);font-family:var(--ff);font-size:var(--fsm);font-weight:600;padding:clamp(4px,.4vw,7px) clamp(10px,1vw,16px);border-radius:var(--rad2);cursor:pointer;transition:all .12s;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--b2);color:var(--t5);transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,.3)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn-p{background:var(--ac);border-color:var(--ac2);color:#050b14;font-weight:700}
.btn-p:hover:not(:disabled){filter:brightness(1.12);color:#050b14;transform:translateY(-1px)}
.btn-o{background:var(--acg2);border-color:var(--ac2);color:var(--ac)}
.chip{border:1px solid var(--b0);background:transparent;color:var(--t0);font-family:var(--ffm);font-size:var(--fxs);padding:2px 8px;border-radius:3px;cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--ac2);color:var(--ac);background:var(--acg2)}
.p-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--sp3) var(--sp4);gap:var(--sp3);overflow:hidden}
.p-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
.p-col{display:flex;flex-direction:column;gap:var(--sp2);overflow:hidden}
.field-lbl{font-family:var(--ffm);font-size:var(--fxs);text-transform:uppercase;letter-spacing:.1em;color:var(--t1);margin-bottom:var(--sp1);display:block}
.ta{width:100%;background:var(--ink1);border:1px solid var(--b0);border-radius:var(--rad);color:var(--t5);font-family:var(--ffm);font-size:var(--fsm);line-height:1.65;padding:var(--sp2) var(--sp3);resize:none;outline:none;transition:border-color .14s,box-shadow .14s}
.ta:focus{border-color:var(--ac2);box-shadow:0 0 0 3px var(--acg)}
.ta[readonly]{color:var(--t4)}
.ta::placeholder{color:var(--t0)}
.ta:-webkit-autofill,.ta:-webkit-autofill:focus{-webkit-text-fill-color:var(--t5);-webkit-box-shadow:0 0 0 1000px var(--ink1) inset}
.main-input{width:100%;background:var(--ink1);border:1px solid var(--b0);border-radius:var(--rad);color:var(--t5);font-family:var(--ffm);font-size:var(--fb);padding:var(--sp2) var(--sp3);outline:none;transition:border-color .14s,box-shadow .14s;color-scheme:dark}
.main-input:focus{border-color:var(--ac2);box-shadow:0 0 0 3px var(--acg)}
.main-input::placeholder{color:var(--t0);font-style:italic}
.main-input:-webkit-autofill{-webkit-text-fill-color:var(--t5);-webkit-box-shadow:0 0 0 1000px var(--ink1) inset}
.how-body{flex:1;min-height:0;overflow-y:auto;padding:var(--sp3) var(--sp4);display:flex;flex-direction:column;gap:var(--sp4)}
.how-title{font-family:var(--ffd);font-size:var(--flg);color:var(--t4);font-weight:700;margin-bottom:var(--sp2)}
.how-text{font-size:var(--fsm);color:var(--t2);line-height:1.6}
.how-table{width:100%;border-collapse:collapse;font-size:var(--fsm)}
.how-table th{text-align:left;padding:var(--sp1) var(--sp2);background:var(--ink2);color:var(--t3);font-family:var(--ffm);font-size:var(--fxs);text-transform:uppercase;letter-spacing:.06em}
.how-table td{padding:var(--sp1) var(--sp2);border-bottom:1px solid var(--b0);color:var(--t2)}
.how-table tr:last-child td{border-bottom:none}
.row-g{display:flex;align-items:center;gap:var(--sp2)}
.err-line{font-size:var(--fsm);font-family:var(--ffm);color:var(--red);min-height:1.2em}
.err-line:not(:empty)::before{content:'⚠ '}
@media(max-width:600px){.p-cols{grid-template-columns:1fr}}

.lab{width:100%;max-width:none;min-height:min(72vh,900px);height:auto;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink);border:1px solid var(--b0);border-radius:clamp(8px,.8vw,14px);
  background-image:radial-gradient(ellipse 60% 40% at 15% -10%,rgba(245,158,11,.05) 0%,transparent 55%),
  radial-gradient(rgba(245,158,11,.02) 1px,transparent 1px);background-size:100% 100%,26px 26px}
.nav-btn.active{background:var(--ac);color:#050b14;font-weight:700;box-shadow:0 2px 12px rgba(245,158,11,.28)}
:root{--ac:#f59e0b;--ac2:#d97706;--acg:color-mix(in oklch,#f59e0b 12%,transparent);--acg2:color-mix(in oklch,#f59e0b 6%,transparent)}
.base-field{display:flex;flex-direction:column;gap:var(--sp1)}
.base-label{font-family:var(--ffd);font-size:var(--fsm);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.base-inp{width:100%;background:var(--ink1);border:1px solid var(--b0);border-radius:var(--rad);color:var(--t5);font-family:var(--ffm);font-size:var(--fsm);padding:var(--sp2) var(--sp3);outline:none;transition:border-color .14s;color-scheme:dark}
.base-inp:focus{border-color:var(--ac2);box-shadow:0 0 0 3px var(--acg)}
.base-inp:-webkit-autofill{-webkit-text-fill-color:var(--t5);-webkit-box-shadow:0 0 0 1000px var(--ink1) inset}
.div-row{display:flex;align-items:center;gap:var(--sp2);padding:var(--sp1) var(--sp2);border-bottom:1px solid var(--b0);font-size:var(--fsm);font-family:var(--ffm)}
.div-row.last{border-bottom:2px solid var(--ac2)}
.dr-num{color:var(--t4);min-width:60px;text-align:right}.dr-op{color:var(--t0)}.dr-quot{color:var(--t3)}.dr-rem{color:var(--t2)}
.div-result{padding:var(--sp2);font-family:var(--ffm);font-size:var(--fsm);color:var(--t2)}
.steps-wrap{flex:1;min-height:0;overflow-y:auto;background:var(--ink2);border:1px solid var(--b0);border-radius:var(--rad)}
