:root { --bg:#0b0f14; --panel:#11181f; --line:#1f2a35; --text:#dfe8f0; --dim:#7d8b99; }
  * { box-sizing:border-box; }
  body { margin:0; height:100vh; display:flex; background:var(--bg); color:var(--text); font:13px/1.4 -apple-system,system-ui,sans-serif; }
  #map { flex:1; min-width:0; height:100vh; }
  #side { width:390px; max-width:45vw; display:flex; flex-direction:column; border-left:1px solid var(--line); background:var(--panel); }
  #head { padding:14px 14px 10px; display:grid; gap:10px; border-bottom:1px solid var(--line); }
  #title { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  #title b { font-size:15px; letter-spacing:.2px; }
  #meta { color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #dist { display:flex; gap:2px; height:4px; border-radius:2px; overflow:hidden; background:var(--line); }
  #dist i { display:block; min-width:2px; }
  #q { width:100%; background:#0b1218; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; outline:none; }
  #q:focus { border-color:#35516b; }
  #q::placeholder { color:#566474; }
  #ctl { display:flex; justify-content:space-between; gap:8px; }
  .seg { display:flex; gap:4px; }
  .seg button { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:999px; padding:3px 10px; font:inherit; font-size:12px; cursor:pointer; }
  .seg button:hover { color:var(--text); }
  .seg button.on { color:var(--text); background:#1b2733; border-color:#35516b; }
  #ctl { flex-wrap:wrap; row-gap:6px; }
  #modes { flex-wrap:wrap; row-gap:4px; }
  #warn { padding:8px 14px; font-size:12px; color:#ff9a3c; background:#2a1d0f; border-bottom:1px solid var(--line); }
  #warn:empty { display:none; }
  #rows { overflow:auto; flex:1; overscroll-behavior:contain; }
  .item { --c:#7d8b99; border-bottom:1px solid var(--line); border-left:3px solid var(--c); }
  .item:has(.row.sel) { border-left-width:6px; box-shadow:inset 0 0 0 1px #3a5a78; background:#16212c; }
  .row { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:10px; padding:9px 14px 9px 11px; cursor:pointer; transition:background .12s; }
  .row:hover { background:#151f29; }
  .row.sel { background:#1c2a38; }
  .item.pin:not(:has(.rd)) { position:sticky; top:0; z-index:3; }  /* the selected train stays pinned at the top of the table */
  /* big detail window that follows the train over the map */
  #tw { --c:#7d8b99; position:absolute; left:0; top:0; z-index:6; width:min(390px, calc(100% - 16px)); max-height:min(74%, 580px); display:flex; flex-direction:column; background:var(--panel); border:1px solid #2b3a49; border-radius:12px; box-shadow:0 14px 44px rgba(0,0,0,.65); overflow:hidden; will-change:transform; }
  #tw[hidden] { display:none; }
  .tw-head { display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; border-top:3px solid var(--c); border-bottom:1px solid var(--line); }
  .tw-head .dest { flex:1; min-width:0; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tw-x { background:none; border:0; color:var(--dim); font-size:22px; line-height:1; padding:0 4px; cursor:pointer; }
  .tw-x:hover { color:var(--text); }
  .tw-body { overflow:auto; padding:0 12px 12px; }
  .tw-body .rd { padding:10px 0 0; }
  .chg { color:#ff9a3c; font-weight:600; }
  .pop .more { margin-top:8px; background:#1b2733; border:1px solid #35516b; color:var(--text); border-radius:7px; padding:4px 10px; font:inherit; font-size:12px; cursor:pointer; }
  .pop .more:hover { background:#223142; }
  /* train detail (expanded row) */
  .rd { padding:2px 14px 14px 12px; }
  .tabs { margin:4px 0 12px; }
  .kv { display:grid; grid-template-columns:104px 1fr; gap:6px 10px; font-size:13px; }
  .kv > span:nth-child(odd) { color:var(--dim); }
  .kv b { font-variant-numeric:tabular-nums; }
  .prog { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin:2px 0 4px; }
  .prog i { display:block; height:100%; background:var(--c); border-radius:3px; }
  .note { color:var(--dim); font-size:12px; margin-top:10px; line-height:1.5; }
  .fstrip { display:flex; gap:2px; flex-wrap:wrap; margin:5px 0 3px; }
  .cch { min-width:24px; height:17px; padding:0 3px; border-radius:3px; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; background:#26323f; color:var(--text); }
  .cch.c1 { background:#4d4116; color:#ffd34d; }
  .cch.pw { background:#161f29; color:var(--dim); }
  .stl { max-height:320px; overflow:auto; margin:0; }
  .stl li { cursor:pointer; grid-template-columns:1fr 86px 76px; }
  .stl li:hover { background:#121b24; }
  ul.tl li.cur { font-weight:700; background:#1b2733; border-radius:4px; }
  ul.tl li.gone { opacity:.55; }
  .chart { width:100%; height:auto; display:block; }
  .chart text { fill:var(--dim); font-size:9px; }
  .rd .btn { margin-top:10px; background:#1b2733; border:1px solid #35516b; color:var(--text); border-radius:8px; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; }
  .rd .btn:hover { background:#223142; }
  .badge { text-align:center; font-weight:700; font-size:12px; padding:3px 4px; border-radius:6px; background:#1d2935; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .badge.rail { background:#e6edf3; color:#0b0f14; }
  .badge.tram { background:transparent; box-shadow:inset 0 0 0 1px #4a6a85; color:#9fc4e4; }
  .main { min-width:0; }
  .dest { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .next { color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pill { min-width:62px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; padding:3px 8px; border-radius:999px; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); }
  .est { opacity:.6; }
  .row.stale { opacity:.45; }
  .row.stale .next { color:#ff9a3c; }
  .row.sel.stale, .row.sel.est { opacity:.9; }  /* the selected train stays readable */
  .empty { padding:28px 14px; color:var(--dim); text-align:center; }
  /* station page */
  #station { position:fixed; inset:0; z-index:30; background:var(--bg); display:flex; flex-direction:column; }
  #station[hidden] { display:none; }
  #st-top { background:var(--panel); border-bottom:1px solid var(--line); padding:14px 16px 12px; }
  .wrap { width:100%; max-width:820px; margin:0 auto; }
  #st-back { background:transparent; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:6px 12px; font:inherit; cursor:pointer; }
  #st-back:hover { border-color:#35516b; }
  #st-name { margin:12px 0 2px; font-size:24px; letter-spacing:.2px; }
  #st-sub { color:var(--dim); font-size:12px; }
  #st-tabs { margin-top:12px; }
  #st-tabs button { padding:6px 18px; font-size:13px; }
  #st-list { overflow:auto; flex:1; }
  .trow { --c:#7d8b99; max-width:820px; margin:0 auto; border-bottom:1px solid var(--line); border-left:3px solid var(--c); cursor:pointer; }
  .trow:hover { background:#121b24; }
  .trow.past { opacity:.55; }
  .trow-main { display:grid; grid-template-columns:60px 54px 1fr auto; align-items:center; gap:10px; padding:10px 16px 10px 12px; }
  .tt .s { font-weight:700; font-variant-numeric:tabular-nums; }
  .tt .s.strike { text-decoration:line-through; color:var(--dim); font-weight:500; font-size:12px; }
  .tt .e { font-weight:700; color:var(--c); font-variant-numeric:tabular-nums; }
  .trow.cx .dest, .trow.cx .tt { text-decoration:line-through; color:var(--dim); }
  .detail { padding:2px 16px 14px 76px; }
  .detail h4 { margin:10px 0 4px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); }
  ul.tl { list-style:none; margin:0 0 0 6px; padding:0; border-left:2px solid #2a3948; }
  ul.tl li { position:relative; display:grid; grid-template-columns:1fr 48px auto; gap:10px; padding:5px 0 5px 14px; font-size:13px; }
  ul.tl li i { position:absolute; left:-7px; top:10px; width:10px; height:10px; border-radius:50%; border:2px solid var(--bg); }
  ul.tl li.here { font-weight:700; }
  ul.tl li.here i { left:-9px; top:9px; width:14px; height:14px; }
  ul.tl .t { color:var(--dim); font-variant-numeric:tabular-nums; }
  ul.tl .d { font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
  .dim { color:var(--dim); }
  .mapbtn { margin-top:12px; background:#1b2733; border:1px solid #35516b; color:var(--text); border-radius:8px; padding:7px 14px; font:inherit; cursor:pointer; }
  .mapbtn:hover { background:#223142; }
  .mapbtn.cnbtn { margin-left:8px; }
  .cnl { margin-left:8px; background:none; border:1px solid #35516b; color:#9fc4e4; border-radius:6px; font:inherit; font-size:11px; padding:0 6px; cursor:pointer; }
  .cnl:hover { background:#223142; }
  /* connection checker sheet (inside the station page) */
  #conn { position:absolute; inset:0; z-index:3; background:var(--bg); display:flex; flex-direction:column; }
  #conn[hidden] { display:none; }
  #cn-top { background:var(--panel); border-bottom:1px solid var(--line); padding:14px 16px 12px; }
  #cn-back { background:transparent; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:6px 12px; font:inherit; cursor:pointer; }
  #cn-title { margin:12px 0 6px; font-size:20px; }
  #cn-sub { color:var(--dim); font-size:13px; line-height:1.6; }
  #cn-sub .badge { display:inline-block; padding:1px 7px; }
  #cn-to { margin-top:12px; width:100%; box-sizing:border-box; background:#0e151c; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:9px 12px; font:inherit; }
  #cn-to:focus { outline:none; border-color:#35516b; }
  #cn-list { overflow:auto; flex:1; }
  .crow { --c:#7d8b99; max-width:820px; margin:0 auto; border-bottom:1px solid var(--line); border-left:3px solid var(--c); }
  .crow .next { white-space:normal; line-height:1.4; }
  @media (max-width:520px) { .crow .pill { min-width:0; padding:3px 7px; font-size:11px; } }
  .cn-direct { max-width:820px; margin:0 auto; padding:12px 16px; border-bottom:1px solid var(--line); background:#0f1d18; color:#9be9cf; }
  #cn-note { max-width:820px; margin:0 auto; padding:10px 16px; color:var(--dim); font-size:12px; line-height:1.5; }
  @media (max-width:520px) { .trow-main { grid-template-columns:52px 46px 1fr auto; gap:8px; } .detail { padding-left:16px; } }
  .maplibregl-popup-content { background:var(--panel); color:var(--text); border:1px solid #2b3a49; border-radius:10px; padding:10px 12px; box-shadow:0 8px 28px rgba(0,0,0,.6); font-size:13px; line-height:1.45; min-width:200px; }
  .maplibregl-popup-tip { display:none; }
  .pop .head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .pop .badge { color:#06100c; font-weight:700; padding:1px 7px; border-radius:6px; }
  .pop .dest { font-weight:600; }
  .pop .dim { color:var(--dim); }
  .pop .delay { font-weight:700; font-variant-numeric:tabular-nums; }
  /* ===== refined layout: floating glass panel over a full-bleed map ===== */
  :root { --bg:#090d12; --panel:#10171e; --glass:rgba(15,21,28,.84); --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13); --text:#e8eef4; --dim:#8696a6; --dim2:#5e6c7a; --accent:#5cc8ff;
    --k-long:#ffffff; --k-regio:#cdd8e3; --k-sbahn:#7fd4ff; --k-ubahn:#6f9bff; --k-tram:#ff9fb6; --k-bus:#9aa7b4; }
  body { margin:0; height:100vh; display:block; background:var(--bg); color:var(--text); font:13px/1.45 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
  #map { position:fixed; inset:0; height:auto; }
  #side { position:absolute; top:12px; right:12px; bottom:12px; width:392px; max-width:calc(100vw - 24px); border:1px solid var(--line2); border-radius:18px; overflow:hidden;
    background:var(--glass); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 18px 60px rgba(0,0,0,.5); z-index:5; transition:transform .25s ease, height .25s ease; }
  #head { padding:14px 14px 8px; gap:10px; border-bottom:1px solid var(--line); position:relative; }
  #brand { display:flex; align-items:center; gap:9px; }
  #brand b { font-size:15px; font-weight:650; letter-spacing:.1px; }
  #brand .logo { width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,#1c3a52,#0f2233); box-shadow:inset 0 0 0 1px rgba(92,200,255,.35); display:grid; place-items:center; }
  #live { margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--dim); font-size:12px; white-space:nowrap; }
  #live .pulse { width:7px; height:7px; border-radius:50%; background:#2ee6a6; box-shadow:0 0 0 0 rgba(46,230,166,.6); animation:pulse 2s infinite; }
  #live.off .pulse { background:#ff9a3c; animation:none; }
  @keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(46,230,166,.5); } 70% { box-shadow:0 0 0 7px rgba(46,230,166,0); } 100% { box-shadow:0 0 0 0 rgba(46,230,166,0); } }
  .ibtn { background:transparent; border:0; color:var(--dim); width:28px; height:28px; border-radius:8px; display:grid; place-items:center; cursor:pointer; padding:0; }
  .ibtn:hover { background:rgba(255,255,255,.07); color:var(--text); }
  #searchbox { position:relative; }
  #searchbox > svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--dim2); pointer-events:none; }
  #q { width:100%; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:9px 34px 9px 34px; font:inherit; outline:none; transition:border-color .15s, background .15s; }
  #q:focus { border-color:rgba(92,200,255,.55); background:rgba(255,255,255,.07); }
  #q-clear { position:absolute; right:5px; top:50%; transform:translateY(-50%); }
  #suggest { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; background:#121a22; border:1px solid var(--line2); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.6); overflow:hidden; max-height:60vh; overflow-y:auto; }
  #suggest[hidden] { display:none; }
  .sg-h { padding:8px 12px 4px; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--dim2); font-weight:600; }
  .sg { display:flex; align-items:center; gap:10px; padding:7px 12px; cursor:pointer; }
  .sg:hover, .sg.on { background:rgba(255,255,255,.07); }
  .sg .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sg .n { color:var(--dim); font-size:12px; }
  .sg .pin { color:var(--dim2); }
  .sg .pin:hover { color:var(--accent); }
  #chips, #cc { display:flex; flex-wrap:wrap; gap:5px; padding:1px 0; }
  .chip { flex:none; display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 6px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--dim); font:inherit; font-size:12px; cursor:pointer; transition:all .12s; }
  .chip:hover { color:var(--text); border-color:var(--line2); }
  .chip .g { width:16px; height:16px; border-radius:5px; display:grid; place-items:center; font-size:9px; font-weight:800; color:#0a0f14; background:var(--k, #9aa7b4); }
  .chip .g.rd { border-radius:50%; } .chip .g.sq { border-radius:4px; }
  .chip .n { font-size:11px; color:var(--dim2); }
  .chip.on { color:var(--text); border-color:color-mix(in srgb, var(--k, #5cc8ff) 60%, transparent); background:color-mix(in srgb, var(--k, #5cc8ff) 14%, transparent); }
  .chip.on .n { color:var(--dim); }
  .chip.zero { opacity:.4; }
  #cc .chip { padding:4px 9px; font-size:11.5px; }
  #delays { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
  .dc { position:relative; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:10px; padding:7px 4px 5px; text-align:center; cursor:pointer; color:var(--dim); font:inherit; transition:all .12s; overflow:hidden; }
  .dc::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); opacity:.9; }
  .dc b { display:block; font-size:14px; font-weight:650; color:var(--text); line-height:1.15; }
  .dc span { font-size:10px; letter-spacing:.2px; }
  .dc:hover { border-color:var(--line2); }
  .dc.on { border-color:color-mix(in srgb, var(--c) 70%, transparent); background:color-mix(in srgb, var(--c) 16%, transparent); }
  .dc.zero { opacity:.38; }
  #bar2 { display:flex; align-items:center; gap:8px; }
  #count { font-weight:600; }
  #reset { background:none; border:0; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; padding:2px 4px; }
  #reset[hidden] { display:none; }
  #viewbtn { margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:5px 10px; font:inherit; font-size:12px; cursor:pointer; }
  #viewbtn:hover { border-color:var(--line2); }
  #pop { position:absolute; right:14px; top:calc(100% - 4px); z-index:25; width:260px; background:#121a22; border:1px solid var(--line2); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.6); padding:10px; }
  #pop[hidden] { display:none; }
  #pop h5 { margin:6px 4px 6px; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--dim2); font-weight:600; }
  #pop h5:first-child { margin-top:0; }
  .opt { display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border-radius:9px; background:none; border:0; color:var(--text); font:inherit; cursor:pointer; text-align:left; }
  .opt:hover { background:rgba(255,255,255,.06); }
  .opt .tick { width:14px; color:var(--accent); }
  .sw { margin-left:auto; width:30px; height:18px; border-radius:999px; background:rgba(255,255,255,.14); position:relative; transition:background .15s; flex:none; }
  .sw::after { content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s; }
  .opt.on .sw { background:#2f8fd0; } .opt.on .sw::after { transform:translateX(12px); }
  #rows { overflow:auto; flex:1; overscroll-behavior:contain; padding:4px 0 8px; }
  #rows::-webkit-scrollbar { width:8px; } #rows::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:8px; }
  .item { position:relative; border:0; margin:0 8px; border-radius:12px; }
  .item::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:2px; background:var(--c); opacity:.9; }
  .item + .item { margin-top:1px; }
  .item:has(.row.sel) { border:0; box-shadow:inset 0 0 0 1px rgba(92,200,255,.45); background:rgba(92,200,255,.07); }
  .row { padding:9px 10px 9px 14px; grid-template-columns:54px 1fr auto; border-radius:12px; }
  .row:hover { background:rgba(255,255,255,.045); }
  .row.sel { background:transparent; }
  .item.pin:not(:has(.rd)) { background:#141d26; }
  .badge { font-size:12px; font-weight:700; letter-spacing:.2px; padding:4px 5px; border-radius:8px; background:color-mix(in srgb, var(--k, #9aa7b4) 16%, transparent); color:var(--k, #9aa7b4); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--k, #9aa7b4) 38%, transparent); }
  .badge.k-long { background:#fff; color:#0a0f14; box-shadow:none; }
  .badge.k-long { --k:var(--k-long); } .badge.k-regio { --k:var(--k-regio); } .badge.k-sbahn { --k:var(--k-sbahn); } .badge.k-ubahn { --k:var(--k-ubahn); } .badge.k-tram { --k:var(--k-tram); } .badge.k-bus { --k:var(--k-bus); }
  .badge.rail, .badge.tram, .badge.bus { background:color-mix(in srgb, var(--k, #9aa7b4) 16%, transparent); color:var(--k, #9aa7b4); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--k, #9aa7b4) 38%, transparent); }
  .pill { min-width:64px; padding:4px 9px; font-size:12px; }
  .next { display:flex; align-items:center; gap:6px; }
  .qd { flex:none; width:6px; height:6px; border-radius:50%; background:#2ee6a6; box-shadow:0 0 6px rgba(46,230,166,.7); }
  .qd.q-est, .qd.q-sched { background:transparent; box-shadow:inset 0 0 0 1.5px #7d8b99; }
  .qd.q-stale { background:#ff9a3c; box-shadow:none; }
  .est { opacity:1; } .row.est .dest { opacity:.85; } .row.stale { opacity:.6; }
  .empty { padding:36px 20px; text-align:center; color:var(--dim); line-height:1.7; }
  .empty b { display:block; color:var(--text); font-size:14px; margin-bottom:2px; }
  .empty button { margin-top:10px; }
  .skel { margin:8px 14px; height:46px; border-radius:12px; background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size:200% 100%; animation:shimmer 1.4s infinite; }
  @keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
  #side.collapsed { bottom:auto; }
  #side.collapsed #rows, #side.collapsed #chips, #side.collapsed #delays, #side.collapsed #cc, #side.collapsed #bar2 { display:none; }
  #grab { display:none; }
  .seg button { border-color:var(--line2); }
  .maplibregl-ctrl-group { background:var(--glass) !important; backdrop-filter:blur(12px); border:1px solid var(--line2); border-radius:12px !important; box-shadow:none !important; }
  .maplibregl-ctrl-group button + button { border-top:1px solid var(--line) !important; }
  .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter:invert(1) opacity(.75); }
  .maplibregl-ctrl-attrib { background:rgba(10,14,19,.7) !important; color:var(--dim) !important; border-radius:8px; }
  .maplibregl-ctrl-attrib a { color:var(--dim) !important; }
  #tw { background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:16px; }
  .maplibregl-popup-content { background:#121a22; border-radius:14px; border-color:var(--line2); }
  #side.collapsed #collapse svg { transform:rotate(180deg); }
  .occrow { display:flex; align-items:center; gap:8px; margin:4px 0; } .occrow > span { width:22px; font-size:11px; } .occ { display:flex; gap:2px; flex:1; height:10px; } .occ i { flex:1; border-radius:3px; min-width:2px; }
  /* scrolling is implied: no visible scroll bars in the lists and detail views (wheel, trackpad and touch still scroll) */
  .stl, .tw-body, #rows, #suggest, #filters, #st-list, #cn-list { scrollbar-width:none; }
  .stl::-webkit-scrollbar, .tw-body::-webkit-scrollbar, #rows::-webkit-scrollbar, #suggest::-webkit-scrollbar, #filters::-webkit-scrollbar, #st-list::-webkit-scrollbar, #cn-list::-webkit-scrollbar { display:none; width:0; height:0; }