:root{
    --bg:#141418; --panel:#1c1c22; --panel2:#232330; --head:#26262f; --line:#33333f; --line2:#3d3d4a;
    --ink:#e7e7ee; --muted:#9a9aab; --faint:#6d6d7c;
    --accent:#5b8cff; --accent2:#8b6cff; --sel:#6f8cff; --danger:#ff6b6b; --ok:#41c98a; --warn:#f2b04a;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{ background:var(--bg); color:var(--ink); font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; font-size:13px; overflow:hidden; user-select:none; -webkit-user-select:none; }
  button, select, input{ font:inherit; color:inherit; }
  button{ cursor:pointer; }
  [hidden]{ display:none !important; }
  .ae-app{ display:flex; flex-direction:column; height:100vh; height:100dvh; max-width:100vw; overflow:hidden; }
  .ae-top{ display:flex; align-items:center; gap:8px; padding:7px 12px; background:linear-gradient(180deg,#202028,#1a1a20); border-bottom:1px solid var(--line); flex:none; min-width:0; overflow:hidden; }
  .ae-back{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border:1px solid var(--line); border-radius:7px; background:#26262e; color:#c9c9d4; text-decoration:none; font-size:12.5px; white-space:nowrap; flex:none; }
  .ae-back:hover{ color:#fff; border-color:#4c8ef7; }
  .ae-file{ height:28px; padding:0 13px; border:0; border-radius:7px; background:#4c8ef7; color:#fff; font-size:12.5px; font-weight:650; flex:none; }
  .ae-file:hover{ filter:brightness(1.1); }
  .ae-logo{ background:none; border:0; padding:0; display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.3px; white-space:nowrap; flex:none; }
  .ae-logo b{ background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ae-logo .ae-logo-img{ display:block; width:22px; height:22px; border-radius:5px; }
  .ae-logo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
  .ae-alpha{ display:inline-block; padding:1px 7px; border-radius:999px; border:1px solid #6b5a2a; color:#f2c86a; background:#2a2414; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
  .ae-proj{ background:#15151b; border:1px solid var(--line); border-radius:6px; color:var(--ink); padding:4px 9px; font-size:12.5px; width:190px; min-width:0; user-select:text; }
  .ae-spacer{ flex:1 1 auto; }
  .ae-btn{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--line2); border-radius:7px; background:#26262e; color:#d8d8e2; font-size:12.5px; white-space:nowrap; flex:none; }
  .ae-btn:hover{ border-color:#5b6a99; color:#fff; }
  .ae-btn:disabled{ opacity:.45; cursor:default; }
  .ae-btn svg{ width:16px; height:16px; flex:none; }
  .ae-btn.pri{ background:linear-gradient(180deg,#5b8cff,#4877ee); border-color:#4c7ff0; color:#fff; font-weight:650; }
  .ae-btn.rec svg{ color:#ff5d5d; }
  .ae-btn.icon{ padding:0 7px; }
  .ae-btn[aria-pressed="true"]{ background:#2f3a5c; border-color:#5b8cff; color:#fff; }
  .ae-menu{ position:absolute; z-index:90; min-width:250px; background:#22222a; border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.55); padding:6px; }
  .ae-menu button{ display:flex; align-items:center; gap:9px; width:100%; border:0; background:none; font-size:13px; color:#e6e6ee; text-align:left; padding:7px 9px; border-radius:7px; }
  .ae-menu button:hover, .ae-menu button:focus-visible{ background:#2e2e38; outline:none; }
  .ae-menu hr{ border:0; border-top:1px solid var(--line); margin:5px 2px; }
  .ae-menu .snel{ margin-left:auto; font-size:11px; color:#8b8b99; }
  .ae-alfaregel{ flex:none; padding:5px 12px; background:#1a1a1f; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.4; }
  .ae-alfaregel b{ color:#f2c86a; font-weight:650; }
  .ae-transport{ flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px 12px; background:var(--panel); border-bottom:1px solid var(--line); }
  .ae-tbtn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:30px; border:1px solid var(--line2); border-radius:7px; background:#26262e; color:#e3e3ec; flex:none; }
  .ae-tbtn:hover{ border-color:#5b6a99; }
  .ae-tbtn svg{ width:16px; height:16px; }
  .ae-tbtn.play{ width:40px; background:#2c3a62; border-color:#4c6fd0; }
  .ae-tbtn[aria-pressed="true"]{ background:#2f3a5c; border-color:#5b8cff; color:#fff; }
  .ae-tbtn.rec{ color:#ff5d5d; }
  .ae-tbtn.rec.aan{ background:#5a1f24; border-color:#ff5d5d; }
  .ae-tc{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:15px; font-weight:600; background:#0f0f14; border:1px solid var(--line); border-radius:6px; padding:3px 9px; color:#cfe0ff; letter-spacing:.3px; flex:none; }
  .ae-sel{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:11.5px; color:var(--muted); white-space:nowrap; flex:none; }
  .ae-sep{ width:1px; height:20px; background:var(--line2); margin:0 2px; flex:none; }
  .ae-meter{ width:90px; height:10px; border-radius:3px; background:#0f0f14; border:1px solid var(--line); overflow:hidden; flex:none; position:relative; }
  .ae-meter i{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#35c27c,#e0c33f 75%,#ff5d5d); }
  .ae-meter.rood{ border-color:#ff5d5d; }
  .ae-main{ flex:1 1 auto; min-height:0; display:flex; }
  .ae-werk{ position:relative; flex:1 1 auto; min-width:0; display:grid; grid-template-columns:var(--kopB,176px) minmax(0,1fr); grid-template-rows:26px minmax(0,1fr); background:#121216; }
  .ae-hoek{ display:flex; align-items:center; gap:4px; padding:0 6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--head); }
  .ae-hoek button{ height:20px; padding:0 8px; border:1px solid var(--line2); border-radius:5px; background:#2a2a34; font-size:11.5px; color:#d8d8e2; }
  #aeLiniaal{ display:block; width:100%; height:26px; border-bottom:1px solid var(--line); background:var(--head); cursor:text; touch-action:pan-x; }
  .ae-koppen{ position:relative; overflow:hidden; border-right:1px solid var(--line); background:var(--panel); }
  .ae-koppenbinnen{ position:absolute; left:0; right:0; top:0; will-change:transform; }
  .ae-kop{ position:relative; height:var(--laan,96px); border-bottom:1px solid var(--line); padding:6px 7px 5px 9px; display:flex; flex-direction:column; gap:4px; }
  .ae-kop.gekozen{ background:#252a3a; box-shadow:inset 3px 0 0 var(--accent); }
  .ae-kop .rij{ display:flex; align-items:center; gap:4px; min-width:0; }
  .ae-kop input.naam{ flex:1 1 auto; min-width:0; background:transparent; border:1px solid transparent; border-radius:4px; padding:1px 4px; font-size:12px; font-weight:600; color:#e8e8f0; user-select:text; }
  .ae-kop input.naam:hover, .ae-kop input.naam:focus{ border-color:var(--line2); background:#15151b; outline:none; }
  .ae-kop .ms{ width:24px; height:22px; border:1px solid var(--line2); border-radius:5px; background:#26262e; font-size:11px; font-weight:700; color:#bdbdc9; flex:none; }
  .ae-kop .ms[aria-pressed="true"].m{ background:#5a3a1a; border-color:#f2a64a; color:#ffd8a8; }
  .ae-kop .ms[aria-pressed="true"].s{ background:#2a4a2a; border-color:#5fd06a; color:#c8ffcc; }
  .ae-kop .weg{ width:22px; height:22px; border:0; background:none; color:var(--faint); font-size:15px; flex:none; }
  .ae-kop .weg:hover{ color:var(--danger); }
  .ae-kop label{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--muted); min-width:0; }
  .ae-kop label span{ width:22px; flex:none; }
  .ae-kop input[type=range]{ flex:1 1 auto; min-width:0; height:14px; accent-color:#5b8cff; }
  .ae-kop output{ width:38px; text-align:right; font-size:10.5px; color:#c7c7d2; flex:none; font-variant-numeric:tabular-nums; }
  .ae-vlak{ position:relative; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#454556 #16161b; }
  #aeDoek{ position:sticky; left:0; top:0; display:block; touch-action:pan-x pan-y; }
  #aeRuimte{ pointer-events:none; }
  .ae-speellijn{ position:absolute; left:0; top:0; bottom:0; width:2px; background:#ffcc4d; pointer-events:none; z-index:3; box-shadow:0 0 4px rgba(255,204,77,.5); }
  .ae-leeg{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:auto; width:min(92%,440px); }
  .ae-leeg b{ color:#e6e6ee; font-size:14.5px; }
  .ae-leeg .knoppen{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .ae-sleep{ position:absolute; inset:0; z-index:5; border:2px dashed #5b8cff; background:rgba(40,60,120,.25); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:650; color:#dfe7ff; pointer-events:none; }
  .ae-paneel{ flex:none; width:300px; border-left:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; min-height:0; }
  .ae-ph{ display:flex; align-items:center; gap:6px; height:30px; padding:0 10px; background:var(--head); border-bottom:1px solid var(--line); font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#b9b9c7; flex:none; }
  .ae-ph .sp{ flex:1; }
  .ae-ph button{ border:0; background:none; color:var(--muted); font-size:15px; padding:2px 4px; }
  .ae-insp{ flex:1 1 auto; overflow:auto; padding:10px 12px 14px; display:flex; flex-direction:column; gap:9px; user-select:text; }
  .ae-none{ color:var(--faint); font-size:12px; line-height:1.5; }
  .ae-veld{ display:flex; align-items:center; gap:8px; font-size:12px; color:#cfcfda; }
  .ae-veld > span:first-child{ width:92px; flex:none; color:var(--muted); }
  .ae-veld input[type=number], .ae-veld select{ background:#15151b; border:1px solid var(--line2); border-radius:5px; padding:3px 6px; width:96px; color:var(--ink); }
  .ae-veld input[type=range]{ flex:1 1 auto; min-width:0; accent-color:#5b8cff; }
  .ae-veld output{ width:46px; text-align:right; font-variant-numeric:tabular-nums; color:#dcdce6; }
  .ae-veld input[type=checkbox]{ accent-color:#5b8cff; width:15px; height:15px; }
  .ae-kopje{ margin-top:4px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#8f8fa3; border-top:1px solid var(--line); padding-top:8px; }
  .ae-acties{ display:flex; flex-wrap:wrap; gap:6px; }
  .ae-envrij{ gap:5px; }
  .ae-envrij > span:first-child{ width:22px; }
  .ae-envrij input[type=number]{ width:74px; }
  .ae-envrij button{ height:24px; min-width:28px; border:1px solid var(--line2); border-radius:6px; background:#26262e; color:#dcdce6; }
  .ae-eenheid{ color:var(--muted); font-size:11px; }
  .ae-acties button{ height:26px; padding:0 9px; border:1px solid var(--line2); border-radius:6px; background:#26262e; color:#dcdce6; font-size:12px; }
  .ae-acties button:hover{ border-color:#5b6a99; }
  .ae-acties button.gevaar:hover{ border-color:var(--danger); color:#ffc9c9; }
  .ae-fout{ color:#ffb4b4; font-size:12px; line-height:1.45; }
  .ae-info{ color:var(--muted); font-size:11.5px; line-height:1.45; }
  .ae-onder{ flex:none; display:flex; align-items:center; gap:12px; padding:4px 12px; min-height:26px; background:#18181d; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; }
  .ae-onder .msg{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; color:#cfd6ea; }
  .ae-onder .msg.err{ color:#ffb4b4; }
  .ae-onder .msg.ok{ color:#9fe6c0; }
  .ae-onder .opsl.nee{ color:var(--warn); }
  .ae-dlg{ position:fixed; inset:0; z-index:120; background:rgba(5,5,10,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
  .ae-dlgbox{ width:min(460px,100%); max-height:calc(100dvh - 32px); overflow:auto; background:#1f1f27; border:1px solid var(--line); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.6); padding:16px 18px; display:flex; flex-direction:column; gap:11px; user-select:text; }
  .ae-dlgbox h2{ font-size:15px; font-weight:700; color:#f0f0f6; }
  .ae-dlgbox .knoppen{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
  .ae-dlgbox .ae-veld > span:first-child{ width:110px; }
  .ae-dlgbox input[type=text]{ background:#15151b; border:1px solid var(--line2); border-radius:5px; padding:4px 8px; color:var(--ink); flex:1 1 auto; min-width:0; }
  .ae-prog{ height:6px; border-radius:3px; background:#101015; overflow:hidden; }
  .ae-prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
  .ae-help table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .ae-help td{ padding:4px 6px; border-bottom:1px solid #2b2b35; }
  .ae-help td:first-child{ color:#cfe0ff; white-space:nowrap; font-family:ui-monospace,Consolas,monospace; font-size:11.5px; }
  #aeOpnMeter{ display:block; width:100%; height:64px; background:#0d0d12; border:1px solid var(--line); border-radius:6px; }
  .ae-opnklok{ font-family:ui-monospace,Consolas,monospace; font-size:22px; font-weight:700; color:#ffd2d2; text-align:center; }
  .ae-concept{ flex:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 12px; background:#24233a; border-bottom:1px solid #3f3c6a; color:#dcdaf7; font-size:12.5px; }
  .ae-concept button{ height:26px; padding:0 10px; border:1px solid #5a57a0; border-radius:6px; background:#2f2d52; color:#fff; font-size:12px; }
  @media (max-width:820px){
    .ae-top{ gap:5px; padding:6px 8px; }
    .ae-back .lang, .ae-logo b, .ae-proj, .ae-btn .lbl, #aeHelpBtn, .ae-top .vs-knop:not([hidden]){ display:none; }
    .ae-logo{ gap:5px; }
    .ae-alpha{ font-size:9.5px; padding:1px 5px; }
    .ae-back{ padding:0 9px; }
    .ae-btn{ padding:0 7px; height:30px; }
    .ae-alfaregel{ font-size:11.5px; padding:4px 10px; }
    .ae-transport{ padding:5px 8px; gap:5px; }
    .ae-tbtn{ width:34px; height:32px; }
    .ae-tc{ font-size:13px; padding:3px 6px; }
    .ae-sel{ order:9; flex:1 0 100%; }
    .ae-meter{ width:56px; }
    .ae-main{ flex-direction:column; }
    .ae-werk{ --kopB:96px; flex:1 1 auto; min-height:180px; }
    .ae-kop{ padding:4px 4px 4px 6px; gap:3px; }
    .ae-kop label{ display:none; }
    .ae-kop .rij{ flex-wrap:wrap; row-gap:4px; }
    .ae-kop input.naam{ flex:1 1 100%; padding:1px 2px; }
    .ae-kop .weg{ display:none; }
    .ae-kop .ms{ width:26px; height:24px; }
    .ae-paneel{ width:auto; border-left:0; border-top:1px solid var(--line); max-height:42vh; }
    .ae-paneel.dicht .ae-insp{ display:none; }
    .ae-onder{ gap:8px; }
    .ae-onder .extra{ display:none; }
  }