:root{
    --ink:#E8EDF2; --ink-2:#A7B2BD; --ink-3:#6C7883;
    --paper:#0E1216; --paper-2:#161C23; --line:#222B34;
    --view:#05070A; --accent:#F03A24; --accent-2:#C1121F; --warn:#E8A33D;
    --field:#131920;
    --r:4px;
  }
  *{box-sizing:border-box}
  html{color-scheme:dark}
  body{
    font-family:"Inter","Helvetica Neue",system-ui,-apple-system,Arial,sans-serif;
    color:var(--ink);background:var(--paper);
    font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums;
  }
  /* app bar, panel/view layout and the phone layout: generator-shell.css */
  /* ---------- panel ---------- */
  #panel{background:var(--paper)}
  header{padding:18px 22px 16px;border-bottom:1px solid var(--line)}
  header img{display:block;width:172px;height:auto;margin:0 0 14px -6px}
  header{position:relative}
  #lang{position:absolute;right:20px;top:20px;display:flex;gap:4px}
  #lang button{
    flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 8px;
    background:transparent;border:1px solid var(--line);color:var(--ink-3);border-radius:var(--r);
  }
  #lang button[aria-pressed=true]{background:linear-gradient(180deg,#FF6A2B,var(--accent-2));border-color:var(--accent-2);color:#fff}
  #lang button:hover{color:var(--ink)}
  h1{
    margin:0;font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    background:linear-gradient(180deg,#FFFFFF 0%,#C9D3DC 45%,#8A97A3 55%,#EDF2F6 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  header p{margin:5px 0 0;color:var(--ink-3);font-size:12.5px}
  .group{padding:16px 22px;border-bottom:1px solid var(--line)}
  .group > h2{
    margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink-2);display:flex;align-items:center;gap:8px;
  }
  .group > h2 .toggle{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
  .row{margin-bottom:13px}
  .row:last-child{margin-bottom:2px}
  .row .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
  .row label{color:var(--ink-2);font-size:12.5px}
  .row .val{display:flex;align-items:baseline;gap:3px}
  .row input[type=number]{
    width:52px;text-align:right;font:inherit;font-size:12.5px;
    border:1px solid var(--line);border-radius:var(--r);background:var(--field);
    padding:2px 5px;color:var(--ink);font-variant-numeric:tabular-nums;
  }
  .row .unit{color:var(--ink-3);font-size:11.5px;width:20px}
  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;margin:0;
  }
  input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:2px}
  input[type=range]::-moz-range-track{height:2px;background:var(--line);border-radius:2px}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:13px;height:13px;margin-top:-5.5px;border-radius:50%;
    background:linear-gradient(180deg,#EDF2F6,#9AA6B2);border:1px solid #05070A;cursor:grab;
  }
  input[type=range]::-moz-range-thumb{
    width:13px;height:13px;border-radius:50%;background:linear-gradient(180deg,#EDF2F6,#9AA6B2);border:1px solid #05070A;cursor:grab;
  }
  input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .row input[type=text]{
    font:inherit;font-size:12.5px;width:100%;padding:5px 7px;background:var(--field);
    border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  }
  .row input[type=text]::placeholder{color:var(--ink-3)}
  input:disabled, input[type=range]:disabled{opacity:.35}
  select{
    font:inherit;font-size:12.5px;width:100%;padding:5px 7px;background:var(--field);
    border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  }
  .toggle{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13px;font-weight:600}
  .toggle input{
    appearance:none;-webkit-appearance:none;width:34px;height:19px;border-radius:10px;
    background:var(--paper-2);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s;
  }
  .toggle input::after{
    content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
    background:#D8E0E8;box-shadow:0 1px 2px rgba(0,0,0,.5);transition:transform .15s;
  }
  .toggle input:checked{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-color:var(--accent-2)}
  .toggle input:checked::after{transform:translateX(15px)}
  .toggle input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .note{margin:0;font-size:12px;color:var(--ink-3);line-height:1.5}
  .dep{margin-top:12px}
  .dep.off{opacity:.35;pointer-events:none}
  /* ---------- readout ---------- */
  #facts{padding:16px 22px;border-bottom:1px solid var(--line);font-size:12.5px}
  #facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px}
  #facts dt{color:var(--ink-3)}
  #facts dd{margin:0;text-align:right}
  #notes{margin:12px 0 0;padding:0;list-style:none;font-size:12px}
  #notes li{padding:7px 10px;border-radius:var(--r);background:rgba(232,163,61,.12);
    border-left:2px solid var(--warn);color:#EAB868;margin-top:6px}
  #notes li.ok{background:rgba(240,58,36,.10);border-left-color:var(--accent);color:#FF9A7A}
  /* ---------- export ---------- */
  #export{padding:16px 22px 22px;margin-top:auto;background:var(--paper)}
  .btns{display:flex;gap:8px}
  button{
    font:inherit;font-size:13px;font-weight:600;padding:9px 10px;cursor:pointer;
    border-radius:var(--r);border:1px solid var(--accent-2);color:#fff;flex:1;
    background:linear-gradient(180deg,#FF6A2B,var(--accent-2));
  }
  button.ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
  button:disabled{opacity:.3;cursor:not-allowed}
  button:hover:not(:disabled){background:linear-gradient(180deg,#FF854A,#D6161F);border-color:var(--accent);color:#fff}
  button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #hint{margin:12px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
  /* ---------- viewport ---------- */
  #view{background:var(--view)}
  #hud{color:var(--ink-3);font-size:12px;letter-spacing:.01em}
  #hud b{color:var(--ink);font-weight:600}
  #viewbar button{
    flex:none;background:rgba(232,237,242,.06);border:1px solid rgba(232,237,242,.16);
    color:var(--ink-2);font-size:12px;padding:6px 11px;font-weight:500;
  }
  #viewbar button[aria-pressed=true]{
    background:linear-gradient(180deg,#FF6A2B,var(--accent-2));color:#fff;border-color:var(--accent-2);
  }
  #viewbar button:hover{background:rgba(240,58,36,.28);color:#fff;border-color:var(--accent)}
  #cutctl{
    position:absolute;right:16px;top:56px;display:flex;gap:10px;align-items:center;
    background:rgba(14,18,22,.9);border:1px solid rgba(232,237,242,.16);
    border-radius:var(--r);padding:7px 12px;
  }
  #cutctl[hidden]{display:none}
  #cutctl button{
    flex:none;background:rgba(232,237,242,.06);border:1px solid rgba(232,237,242,.16);
    color:var(--ink-2);font-size:12px;padding:4px 9px;font-weight:500;border-radius:var(--r);
  }
  #cutctl button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
  #cutpos{width:170px}
  #cutpos::-webkit-slider-runnable-track{background:rgba(232,237,242,.25)}
  #cutpos::-moz-range-track{background:rgba(232,237,242,.25)}
  #cutpos::-webkit-slider-thumb{background:linear-gradient(180deg,#EDF2F6,#9AA6B2);border-color:#05070A}
  #cutpos::-moz-range-thumb{background:linear-gradient(180deg,#EDF2F6,#9AA6B2);border-color:#05070A}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}