:root {
      color-scheme: dark;
      --canvas: #020409;
      --canvas-soft: #070b12;
      --phone: #03070d;
      --surface: rgba(16, 23, 34, 0.82);
      --surface-strong: rgba(20, 29, 42, 0.96);
      --surface-soft: rgba(255,255,255,0.045);
      --line: rgba(255,255,255,0.11);
      --line-strong: rgba(255,255,255,0.18);
      --text: #f6f8fb;
      --muted: #9aa7b8;
      --muted-2: #647184;
      --cyan: #5ad7ff;
      --cyan-rgb: 90, 215, 255;
      --amber: #ffb454;
      --amber-rgb: 255, 180, 84;
      --blue: #5a9cff;
      --blue-rgb: 90, 156, 255;
      --green: #52e6a1;
      --green-rgb: 82, 230, 161;
      --violet: #bd82ff;
      --violet-rgb: 189, 130, 255;
      --danger: #ff6b7a;
      --shadow: 0 32px 100px rgba(0,0,0,0.72);
      --rail-bg: rgba(4,7,12,.86);
      --screen-start: #050a11;
      --screen-end: #03070d;
      --status-start: rgba(2,5,10,.96);
      --status-end: rgba(2,5,10,.6);
      --panel: rgba(15,22,32,.72);
      --panel-strong: rgba(11,17,26,.94);
      --panel-hover: rgba(18,27,39,.9);
      --control: rgba(255,255,255,.045);
      --control-hover: rgba(255,255,255,.075);
      --card-start: rgba(17,25,36,.86);
      --card-end: rgba(9,14,22,.84);
      --dock-start: rgba(5,10,17,.72);
      --dock-end: rgba(5,10,17,.98);
      --orb: #050a12;
      --scrim: rgba(0,0,0,.56);
      --accent-copy: #dff8ff;
      --violet-copy: #f3eaff;
      --user-copy: #d9e4f2;
      --ease: cubic-bezier(.22,1,.36,1);
      --device-radius: 48px;
      --status-height: 32px;
      --safe-bottom: 14px;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { background: var(--canvas); scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      min-height: 100dvh;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, rgba(var(--cyan-rgb),0.07), transparent 34%),
        radial-gradient(circle at 14% 84%, rgba(var(--violet-rgb),0.05), transparent 28%),
        var(--canvas);
      color: var(--text);
    }

    button, input, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { color: inherit; }
    a { color: inherit; text-decoration: none; }
    svg { display: block; }

    .icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .icon-lg { width: 1.35rem; height: 1.35rem; }

    .prototype-shell {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      min-height: 100dvh;
      height: 100dvh;
    }

    .prototype-rail {
      position: relative;
      z-index: 20;
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-right: 1px solid rgba(255,255,255,0.08);
      background: var(--rail-bg);
      backdrop-filter: blur(20px);
      padding: 22px 14px 16px;
    }

    .rail-brand { padding: 0 10px 20px; }
    .rail-brand strong { display: block; font-size: 14px; letter-spacing: -0.02em; }
    .rail-brand span { display: block; margin-top: 5px; color: var(--muted-2); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

    .rail-nav { display: grid; gap: 5px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
    .rail-nav::-webkit-scrollbar { display: none; }
    .rail-link, .rail-reset {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 42px;
      border: 1px solid transparent;
      border-radius: 13px;
      padding: 0 11px;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
      text-align: left;
      font-size: 12px;
      font-weight: 650;
    }
    .rail-link:hover, .rail-reset:hover { color: var(--text); background: rgba(255,255,255,0.055); }
    .rail-link:active, .rail-reset:active { transform: scale(.98); }
    .rail-link.active {
      color: var(--cyan);
      border-color: rgba(var(--cyan-rgb),.28);
      background: rgba(var(--cyan-rgb),.10);
      box-shadow: inset 0 0 20px rgba(var(--cyan-rgb),.035);
    }
    .rail-link .route-number { margin-left: auto; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; }
    .rail-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }

    .stage {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      padding: 18px;
      overflow: hidden;
    }

    .ambient-halo {
      position: absolute;
      inset: 12% 10%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(var(--cyan-rgb),.06), transparent 60%);
      filter: blur(30px);
      opacity: .8;
      transition: background .6s var(--ease);
    }
    body[data-route="landscape"] .ambient-halo { background: radial-gradient(ellipse, rgba(var(--amber-rgb),.05), rgba(var(--blue-rgb),.04) 40%, transparent 70%); }

    .device-scaler { position: relative; flex: none; }
    .device {
      position: absolute;
      inset: 0 auto auto 0;
      width: 390px;
      height: 844px;
      transform-origin: 0 0;
      overflow: hidden;
      border: 9px solid #000;
      border-radius: var(--device-radius);
      background: var(--phone);
      box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.08);
      isolation: isolate;
      transition: width .52s var(--ease), height .52s var(--ease), border-radius .52s var(--ease);
    }
    .device.landscape { width: 844px; height: 390px; --device-radius: 40px; }

    .device::before {
      content: "";
      position: absolute;
      z-index: 45;
      top: 7px;
      left: 50%;
      width: 98px;
      height: 24px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: #000;
      box-shadow: 0 1px 0 rgba(255,255,255,.04);
      pointer-events: none;
    }
    .device.landscape::before { width: 82px; height: 19px; top: 5px; }

    .status-bar {
      position: relative;
      z-index: 40;
      height: var(--status-height);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      padding: 4px 18px 0;
      font-size: 11px;
      font-weight: 760;
      letter-spacing: .01em;
      background: linear-gradient(180deg, var(--status-start), var(--status-end));
    }
    .device.landscape .status-bar { height: 27px; padding: 3px 16px 0; font-size: 10px; }
    .status-icons { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.88); }
    .signal { display: flex; align-items: end; gap: 2px; height: 10px; }
    .signal i { display: block; width: 2px; border-radius: 2px; background: currentColor; }
    .signal i:nth-child(1) { height: 3px; } .signal i:nth-child(2) { height: 5px; } .signal i:nth-child(3) { height: 8px; } .signal i:nth-child(4) { height: 10px; }
    .battery { width: 19px; height: 9px; border: 1.4px solid currentColor; border-radius: 2.5px; padding: 1px; position: relative; }
    .battery::after { content:""; position:absolute; right:-3px; top:2px; width:1.5px; height:4px; border-radius:0 1px 1px 0; background:currentColor; opacity:.7; }
    .battery b { display:block; width:76%; height:100%; border-radius:1px; background:currentColor; }

    .screen-stack { position: relative; height: calc(100% - var(--status-height)); overflow: hidden; }
    .device.landscape .screen-stack { height: calc(100% - 27px); }
    .screen {
      position: absolute;
      inset: 0;
      display: none;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% -10%, rgba(var(--cyan-rgb),.08), transparent 40%),
        linear-gradient(180deg, var(--screen-start) 0%, var(--screen-end) 100%);
    }
    .screen.active { display: flex; animation: screen-in .34s var(--ease) both; }
    @keyframes screen-in { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: none; } }

    .screen-header {
      flex: none;
      min-height: 54px;
      display: grid;
      grid-template-columns: 42px minmax(0,1fr) auto;
      align-items: center;
      gap: 9px;
      padding: 7px 12px 6px;
    }
    .screen-header.compact { min-height: 48px; }
    .screen-title { min-width: 0; }
    .screen-title h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.1; letter-spacing: -.03em; }
    .screen-title p { margin: 3px 0 0; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

    .icon-button, .pill-button, .text-button, .replay-button, .slot-button, .language-button, .mode-card, .history-card, .toggle, .mic-orb, .manual-mic, .microphone-mode-toggle {
      border: 0;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    .icon-button:active, .pill-button:active, .text-button:active, .replay-button:active, .slot-button:active, .language-button:active, .mode-card:active, .history-card:active, .toggle:active, .mic-orb:active, .manual-mic:active, .microphone-mode-toggle:active { transform: scale(.95); }
    :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

    .icon-button {
      width: 38px; height: 38px; display:grid; place-items:center;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.045);
      color: var(--muted);
    }
    .icon-button:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255,255,255,.075); }
    .icon-button.active { color: var(--cyan); border-color: rgba(var(--cyan-rgb),.42); background: rgba(var(--cyan-rgb),.12); box-shadow: 0 0 20px rgba(var(--cyan-rgb),.08); }
    .icon-button.danger { color: var(--danger); }

    .pill-button {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0 12px;
      background: rgba(255,255,255,.045);
      color: var(--muted);
      font-size: 10px;
      font-weight: 720;
      white-space: nowrap;
    }
    .pill-button:hover { color: var(--text); background: rgba(255,255,255,.075); }
    .pill-button.active { color: var(--cyan); border-color: rgba(var(--cyan-rgb),.42); background: rgba(var(--cyan-rgb),.10); }

    .cloud-toggle.online { color: var(--green); border-color: rgba(var(--green-rgb),.38); background: rgba(var(--green-rgb),.09); }
    .cloud-toggle.offline { color: var(--amber); border-color: rgba(var(--amber-rgb),.38); background: rgba(var(--amber-rgb),.09); }

    .pipeline-strip {
      flex: none;
      margin: 0 12px 8px;
      min-height: 46px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 11px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel);
      padding: 8px 11px;
      overflow: hidden;
    }
    .pipeline-status { min-width: 72px; }
    .pipeline-status strong { display:block; color:var(--cyan); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
    .pipeline-status span { display:block; margin-top:3px; color:var(--muted-2); font-size:9px; }
    .live-screen { flex-direction: column; }
    .live-screen .screen-header { grid-template-columns: 42px minmax(0,1fr) auto; }
    .brand-lockup h1 { font-size: 15px; }
    .brand-lockup h1 span { color: var(--cyan); font-weight: 550; }
    .brand-lockup p { color: var(--cyan); }

    .feed {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: none;
      padding: 0 12px 152px;
      scroll-behavior: smooth;
    }
    .feed::-webkit-scrollbar, .scrollable::-webkit-scrollbar { display:none; }
    .utterance-group { margin-bottom: 15px; animation: card-in .38s var(--ease) both; }
    @keyframes card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
    .translation-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0,1fr) 32px;
      gap: 9px;
      padding: 12px 11px 11px;
      margin-bottom: 7px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(145deg, var(--card-start), var(--card-end));
      overflow: hidden;
    }
    .translation-card.source.pt { border-color: rgba(var(--green-rgb),.43); box-shadow: inset 0 0 22px rgba(var(--green-rgb),.035); }
    .translation-card.source.en { border-color: rgba(var(--blue-rgb),.43); box-shadow: inset 0 0 22px rgba(var(--blue-rgb),.035); }
    .translation-card.source.no { border-color: rgba(var(--amber-rgb),.43); box-shadow: inset 0 0 22px rgba(var(--amber-rgb),.035); }
    .card-language { display:flex; align-items:center; gap:7px; font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
    .card-language.pt { color:var(--green); } .card-language.en { color:var(--blue); } .card-language.no { color:var(--amber); }
    .language-dot { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
    .source-badge { margin-left:2px; border-radius:999px; padding:3px 6px; background:rgba(255,255,255,.07); color:var(--muted); font-size:7px; letter-spacing:.1em; }
    .card-copy { margin:8px 0 0; font-size:13px; line-height:1.42; letter-spacing:-.01em; }
    .card-meta { margin-top:7px; color:var(--muted-2); font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
    .replay-button { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.025); color:var(--muted-2); }
    .replay-button:hover, .replay-button.playing { color:var(--cyan); border-color:rgba(var(--cyan-rgb),.4); background:rgba(var(--cyan-rgb),.1); box-shadow:0 0 18px rgba(var(--cyan-rgb),.12); }
    .replay-button.playing svg { animation:speaker-pop .55s ease-in-out infinite alternate; }
    @keyframes speaker-pop { to { transform:scale(1.16); } }

    .live-dock {
      position:absolute;
      z-index:10;
      left:0; right:0; bottom:0;
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, var(--dock-start), var(--dock-end) 28%);
      backdrop-filter: blur(18px);
      padding: 7px 12px var(--safe-bottom);
    }
    .main-controls { display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; gap:6px; }
    .labeled-control { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted-2); font-size:7px; letter-spacing:.13em; text-transform:uppercase; }
    .labeled-control .icon-button { width:36px; height:36px; border-radius:50%; }