*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:#0a0a0a; --surface:#111; --border:#333; --dim:#888; --mid:#aaa;
      --text:#d8d8d8; --bright:#f0f0f0; --accent:#7a9e7a; --mono:'Courier New',monospace;
    }
    html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono); overflow: hidden; display: flex; flex-direction: column; }
    /* ── Nav ── */
    nav {
      display:flex; flex-direction:column;
      flex-shrink:0;
      border-bottom:1px solid rgba(51,51,51,0.5);
      background:rgba(10,10,10,0.8);
    }
    .nav-row-main {
      display:flex; align-items:center;
      padding:0.2rem 1.5rem 0.2rem 1.8rem;
      gap:1.2rem;
    }
    .nav-row-sub {
      display:flex; align-items:center;
      padding:0.2rem 2rem 0.35rem 2.2rem;
      gap:1rem;
      border-top:1px solid rgba(51,51,51,0.25);
    }
    .nav-brand {
      flex:1; display:flex; align-items:center; gap:0.5em; min-width:0;
    }
    .nav-brand-img {
      height:clamp(2.5rem, 9vh, 12rem) !important;
      width:auto !important;
      max-width:none !important;
      opacity:0.85;
      flex-shrink:0;
      display:block;
    }
    .nav-logo {
      font-size:clamp(2.5rem, 9vh, 12rem);
      font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
      color:var(--mid); text-decoration:none; line-height:1; white-space:nowrap;
    }
    .nav-logo:hover { color:var(--text); }
    .nav-counters {
      display:flex; align-items:center; gap:0.7rem;
      flex:1; font-size:0.85rem; color:var(--dim); letter-spacing:0.05em;
    }
    .nav-counter { display:flex; align-items:baseline; gap:0.25rem; }
    .nav-counter-val { color:var(--bright); }
    .nav-counter-sep { color:var(--dim); font-size:0.75rem; }
    .nav-pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); vertical-align:middle; animation:pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.2} }
    .nav-actions { display:flex; gap:0.35rem; align-items:center; }
    .nav-action {
      background:none; border:1px solid var(--border); color:var(--dim);
      font-family:var(--mono); cursor:pointer; text-decoration:none;
      display:flex; align-items:center; gap:0.35rem;
      padding:0.2rem 0.55rem; font-size:0.78rem; letter-spacing:0.1em;
      transition:color 0.15s, border-color 0.15s;
    }
    .nav-action:hover { color:var(--mid); border-color:var(--mid); }
    .nav-action:disabled { opacity:0.35; cursor:default; }
    .nav-action:disabled:hover { color:var(--dim); border-color:var(--border); }
    .na-label { text-transform:uppercase; }
    .usage-group { display:flex; align-items:center; gap:0.5rem; }
    .usage-heat { display:flex; flex-direction:column; justify-content:space-between; align-self:stretch; padding:1px 0; }
    .usage-heat span { font-size:0.7rem; letter-spacing:0.1em; color:var(--dim); line-height:1; }
    .usage-meters { display:flex; flex-direction:column; gap:0.3rem; }
    .usage-meter { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
    .usage-header { display:flex; gap:0.4rem; align-items:baseline; }
    .usage-pct { font-size:0.9rem; color:var(--bright); min-width:3ch; text-align:right; }
    .usage-countdown { font-size:0.6rem; font-weight:700; color:var(--dim); letter-spacing:0.04em; text-align:right; }
    .usage-track { width:60px; height:3px; background:var(--border); border-radius:2px; }
    .usage-fill { height:100%; border-radius:2px; background:var(--accent); width:0%; transition:width 0.6s ease,background 0.4s; }
    .usage-fill.warn { background:#c8a84b; }
    .usage-fill.crit { background:#c85a3a; }

    /* ── Responsive breakpoints ── */
    @media (max-width: 1100px) {
      /* tablet/phone: hide labels */
      .na-label { display:none; }
      .nav-action { padding:0.2rem 0.45rem; font-size:0.9rem; }
    }
    @media (max-width: 1100px) and (orientation: portrait) {
      /* portrait only: center all rows, stack rows 2&3, match widths */
      .nav-row-main { justify-content:center; }
      .nav-row-sub  { justify-content:center; flex-direction:column; align-items:center; gap:0.4rem; }
      .nav-brand { flex:0 1 auto; }
      .nav-counters { width:100%; justify-content:space-around; }
      .nav-actions  { width:100%; justify-content:space-around; }
      .nav-action   { flex:1; justify-content:center; }
    }
    @media (max-width: 500px) {
      /* phone: compact chrome, scale TOME to width */
      .nav-row-main { padding:0.5rem 0.8rem 0.4rem 0.9rem; gap:0.7rem; }
      .nav-row-sub  { padding:0.2rem 0.8rem 0.3rem 0.9rem; }
      .nav-logo { font-size:clamp(2.6rem, 16vw, 8rem); letter-spacing:0.02em; }
      .nav-brand-img { height:clamp(2.6rem, 16vw, 8rem); }
      .nav-counter { flex-direction:column; align-items:center; gap:0; }
      .nav-counter-sep { font-size:0.6rem; letter-spacing:0; }
      .nav-counters { gap:0.5rem; font-size:0.72rem; }
      .usage-pct { font-size:0.78rem; }
      .usage-track { width:40px; }
      .usage-countdown { font-size:0.52rem; }
      .usage-meters { gap:0.2rem; }
    }

    #stage { position: relative; flex: 1; overflow: hidden; cursor: grab; }
    #stage:active { cursor: grabbing; }
    #stage svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    #breadcrumb {
      position: absolute; top: 12px; left: 20px; right: 20px; z-index: 10;
      font-size: 0.85rem; letter-spacing: 0.1em; color: #666;
      display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      pointer-events: none;
    }
    #breadcrumb .bc-item { pointer-events: auto; }
    .bc-item { cursor: pointer; color: #888; display: inline; }
    .bc-item:hover { color: #ccc; }
    .bc-sep { color: #333; display: inline; margin: 0 0.25rem; }

    #rank-label {
      position: absolute; top: 30px; left: 20px; z-index: 10;
      font-size: 2rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
      pointer-events: none;
    }
    #secondary-badge {
      position: absolute; top: 78px; left: 20px; z-index: 10;
      font-size: 0.72rem; letter-spacing: 0.12em; color: #383838;
      pointer-events: none;
    }

    #help-btn {
      position: absolute; bottom: 16px; right: 16px; z-index: 20;
      width: 28px; height: 28px; border-radius: 50%;
      border: 1px solid #333; background: #111;
      color: #555; font-size: 0.85rem; font-family: inherit;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: border-color 0.15s, color 0.15s;
    }
    #help-btn:hover { border-color: #666; color: #aaa; }

    #help-tip {
      position: absolute; bottom: 52px; right: 16px; z-index: 20;
      background: #111; border: 1px solid #333; padding: 0.8rem 1rem;
      font-size: 0.75rem; letter-spacing: 0.1em; color: #666; line-height: 1.8;
      display: none; white-space: nowrap;
    }
    #help-tip.visible { display: block; }

    #archive-flag {
      position: absolute; bottom: 16px; left: 20px; z-index: 20;
      width: 42px; height: 42px; border-radius: 50%;
      border: 2px solid #7a1c1c; background: rgba(10,10,10,0.85);
      color: #c85a3a; font-size: 1.4rem; font-family: inherit; font-weight: 900;
      cursor: pointer; display: none; align-items: center; justify-content: center;
      transition: border-color 0.15s, color 0.15s;
    }
    #archive-flag:hover { border-color: #c85a3a; color: #ff7a5a; }
    #archive-flag-tip {
      position: absolute; bottom: 66px; left: 20px; z-index: 20;
      background: #111; border: 1px solid #7a1c1c; padding: 0.8rem 1rem;
      font-size: 0.75rem; letter-spacing: 0.1em; color: #c85a3a; line-height: 1.8;
      display: none; white-space: nowrap;
    }
    #archive-flag-tip.visible { display: block; }