@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../assets/fonts/nunito-latin-600-normal.woff2") format("woff2");
  }
  @font-face {
    font-family: "Nunito";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../assets/fonts/nunito-latin-700-normal.woff2") format("woff2");
  }
  @font-face {
    font-family: "Nunito";
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: url("../assets/fonts/nunito-latin-800-normal.woff2") format("woff2");
  }

  /* ---- design tokens: muted teal + soft sage, minimal & airy ---- */
  :root {
    --teal:   #81bfbc;
    --teal-d: #5fa3a0;
    --sage:   #c9d5c3;
    --rose:   #d91f4e;
    --ink:    #36514f;          /* soft deep teal-grey text */
    --panel:  rgba(255,255,255,0.94);
    --panel-b: rgba(54,81,79,0.14);
    --shadow: 0 12px 30px rgba(38,65,69,0.20);
    --ease:   cubic-bezier(.22,.61,.36,1);
    color-scheme: light;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  button:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(54,81,79,.75);
    outline-offset: 3px;
  }
  html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #dceff7; }
  #app { position: fixed; inset: 0; }
  canvas { display: block; touch-action: none; }

  /* Bloom-free labels projected from 3D world coordinates into the DOM. */
  .world-labels {
    position: fixed; inset: 0; z-index: 1;
    overflow: hidden; pointer-events: none;
    font-family: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  }
  .world-label {
    position: absolute; left: 0; top: 0;
    display: inline-flex; align-items: center; gap: 7px;
    font: 700 12px/1 "Nunito", sans-serif; color: var(--ink);
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px; padding: 5px 11px;
    box-shadow: 0 4px 12px rgba(90,120,118,.16);
    white-space: nowrap; will-change: transform, opacity;
    transform-origin: 50% 100%;
  }
  .world-label[hidden] { display: none; }
  .world-label-dot {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,.75);
  }
  .world-label.agent {
    padding: 5px 10px;
    background: rgba(247,244,233,.90);
    border-color: rgba(83,86,93,.16);
    box-shadow: 0 5px 15px rgba(58,78,80,.13);
  }
  .world-label.home {
    padding: 4px 9px; font-size: 10.5px;
    background: rgba(247,244,233,.78);
    box-shadow: 0 3px 10px rgba(58,78,80,.10);
  }
  .world-label.landmark {
    color: var(--rose); font-weight: 800;
    background: rgba(255,247,249,.92);
    border-color: rgba(217,31,78,.20);
    box-shadow: 0 5px 16px rgba(150,48,76,.18);
  }
  .world-label.bubble {
    font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,.94);
    max-width: min(280px, calc(100vw - 32px));
    white-space: normal; line-height: 1.3; text-align: center;
  }
  .world-label.bubble::after {
    content: ''; position: absolute; left: 50%; top: 100%;
    width: 8px; height: 8px;
    background: rgba(255,255,255,.94);
    border-right: 1px solid rgba(255,255,255,.6);
    border-bottom: 1px solid rgba(255,255,255,.6);
    transform: translate(-50%, -55%) rotate(45deg);
  }
  .world-label.emoji { font-size: 22px; padding: 6px 9px; }
  body.editing .world-labels { display: none !important; }
  body.intro-active .world-labels { opacity: 0; }
  body.intro-active .world-label.interactive { pointer-events: none; }
  .world-label.interactive { pointer-events: auto; cursor: pointer; min-height: 36px; }
  .world-label.interactive:focus-visible { outline: 3px solid #ad3154; outline-offset: 3px; }

  .rose-story {
    position: fixed; inset: 0; margin: auto; max-height: calc(100dvh - 40px);
    width: min(360px, calc(100vw - 40px)); box-sizing: border-box;
    padding: 30px 28px 24px; border: 1px solid #dfd5ce; border-radius: 4px;
    background: #fcfaf6; color: #364c47; overflow: visible;
    box-shadow: 5px 5px 0 #dccfc4, 10px 10px 0 #f0e9de, 0 18px 50px #172e3140;
    font-family: inherit;
  }
  .rose-story::backdrop { background: #122d3540; }
  .rose-story header > span { color: #a94059; font-size: 12px; font-weight: 800; }
  .rose-story h2 { margin: 8px 0 0; font-size: 18px; letter-spacing: 0; }
  .rose-story blockquote {
    margin: 24px 0; min-height: 100px; display: flex; align-items: center;
    border-left: 3px solid #c57787; padding-left: 18px;
    font-size: 22px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere;
  }
  .rose-story footer { display: flex; gap: 12px; align-items: end; justify-content: space-between; }
  .rose-story cite { font-size: 11px; line-height: 1.7; font-style: normal; color: #6c7770; }
  .rose-story cite small { font-size: 10px; }
  .rose-story button { width: 40px; height: 40px; flex: none; border-radius: 4px; cursor: pointer; border: 1px solid #d2b1b7; background: #f2e5e6; color: #923b51; font-size: 21px; }
  .rose-story button:focus-visible { outline: 3px solid #9e415c; outline-offset: 3px; }
  .rose-story .rose-story-close { position: absolute; top: 10px; right: 10px; background: transparent; border-color: transparent; }
  .rose-story-pages { display: flex; align-items: center; gap: 9px; }
  .rose-story-pages span { font-size: 11px; white-space: nowrap; }
  @media (max-width: 380px) {
    .rose-story { padding: 26px 20px 20px; }
    .rose-story blockquote { font-size: 20px; }
    .rose-story footer { flex-wrap: wrap; }
  }

  /* --- UI overlay --- */
  .ui {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    font-family: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  body.intro-active .ui { opacity: 0; visibility: hidden; pointer-events: none; }

  /* generic soft card */
  .card {
    background: var(--panel);
    backdrop-filter: blur(9px) saturate(1.04);
    -webkit-backdrop-filter: blur(9px) saturate(1.04);
    border: 1px solid var(--panel-b);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  /* HUD top-left: brand + score, slides down on load */
  .hud {
    position: absolute; top: 18px; left: 18px;
    width: 244px; padding: 14px 16px;
    animation: slideDown .7s var(--ease) both;
    animation-delay: .15s;
  }
  .hud .brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 15px; letter-spacing: 0; color: var(--teal-d);
  }
  .hud .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(129,191,188,.25); }
  .hud .task { margin-top: 8px; font-size: 12.5px; line-height: 1.45; opacity: .78; max-width: 214px; }
  .hud .task b { color: var(--teal-d); font-weight: 800; }
  .mode-switch {
    display: flex; gap: 4px; margin-top: 10px; padding: 3px;
    background: rgba(54,81,79,.08); border-radius: 7px;
    pointer-events: auto;
  }
  .mode-switch button {
    flex: 1; border: 0; border-radius: 8px; padding: 5px 8px;
    color: var(--ink); background: transparent; font: inherit;
    font-size: 11.5px; font-weight: 800; cursor: pointer;
  }
  .mode-switch button.active { color: #fff; background: var(--teal-d); }
  body.dashboard-mode .help,
  body.dashboard-mode .emojibar,
  body.dashboard-mode .stick,
  body.dashboard-mode .mobile-actions,
  body.dashboard-mode .visitor-rail,
  body.dashboard-mode .paper-panel { display: none !important; }

  /* help pill bottom-center, fades up */
  .help {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 9px 18px; font-size: 12.5px; font-weight: 600; text-align: center; white-space: nowrap;
    opacity: .92;
    animation: fadeUp .7s var(--ease) both; animation-delay: .35s;
  }
  .help kbd {
    background: rgba(129,191,188,.18); color: var(--teal-d);
    border-radius: 7px; padding: 2px 7px; font-family: inherit; font-weight: 800; font-size: 11.5px;
    border: 1px solid rgba(129,191,188,.3);
  }
  .help .sep { opacity: .35; margin: 0 8px; }

  /* compact weather chip top-right */
  .weather {
    position: absolute; top: 18px; right: 18px;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    animation: slideDown .7s var(--ease) both; animation-delay: .25s;
  }
  .weather .wx-icon { font-size: 17px; line-height: 1; }
  .weather .climate-toggle {
    display: grid; place-items: center; width: 28px; height: 28px;
    margin: -3px 0; padding: 0; border: 0; border-radius: 6px;
    background: transparent; cursor: pointer; pointer-events: auto;
  }
  .climate-toggle:hover, .climate-toggle[aria-expanded="true"] { background: rgba(129,191,188,.20); }
  .climate-toggle:focus-visible { outline: 2px solid var(--teal-d); outline-offset: 2px; }
  .climate-panel {
    position: absolute; top: 70px; right: 18px; left: auto; bottom: auto;
    width: min(276px, calc(100vw - 24px)); padding: 18px; border-radius: 8px;
    pointer-events: auto; z-index: 45; max-height: calc(100dvh - 90px); overflow-y: auto;
    color: var(--ink); background: #f7faf6; border: 1px solid #c6d4cb;
    box-shadow: 0 12px 30px rgba(35,66,71,.18);
  }
  .climate-panel[hidden] { display: none; }
  .climate-panel h2 { margin: 0 24px 16px 0; font-size: 17px; }
  .climate-panel label { display: block; margin: 12px 0 5px; font-size: 12px; font-weight: 800; }
  .climate-panel select {
    width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid rgba(54,81,79,.24);
    border-radius: 6px; background: #f9fcf9; color: var(--ink); font: inherit; font-size: 13px;
  }
  .climate-panel p { margin: 14px 0 7px; font-size: 12px; line-height: 1.6; white-space: pre-line; }
  .climate-panel a { font-size: 10px; color: var(--teal-d); }
  .weather .wx-temp { font-size: 15px; font-weight: 800; color: var(--ink); }
  .weather .wx-time {
    font-size: 13px; font-weight: 700; color: var(--ink); opacity: .65;
    font-variant-numeric: tabular-nums;
    padding-left: 8px; border-left: 1px solid rgba(54,81,79,.18);
  }
  .weather .sound-toggle {
    width: 28px; height: 28px; margin: -3px -5px -3px 0; padding: 0;
    display: grid; place-items: center; pointer-events: auto; cursor: pointer;
    border: 0; border-left: 1px solid rgba(54,81,79,.18); border-radius: 0 10px 10px 0;
    color: rgba(54,81,79,.58); background: transparent;
    font: 800 17px/1 "Nunito", sans-serif;
    transition: color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
  }
  .weather .sound-toggle:hover { color: var(--teal-d); transform: translateY(-1px); }
  .weather .sound-toggle[aria-pressed="true"] {
    color: var(--teal-d); background: rgba(129,191,188,.16);
  }
  .weather .sound-toggle:focus-visible {
    outline: 2px solid var(--teal-d); outline-offset: 2px;
  }
  .weather .sound-toggle:disabled { cursor: default; opacity: .36; transform: none; }

  /* compact paper-tile rail — reference-inspired, but tailored to this dashboard */
  .visitor-rail {
    position: absolute; top: 72px; right: 18px;
    display: flex; flex-direction: column; gap: 9px;
    pointer-events: auto; transition: opacity .2s var(--ease);
  }
  .visitor-rail button {
    width: 48px; height: 48px; display: grid; place-items: center;
    color: var(--ink); background: #f7f4e9;
    border: 2px solid rgba(54,81,79,.72); border-radius: 4px;
    box-shadow: 4px 5px 0 rgba(54,81,79,.18);
    font: 800 22px/1 "Nunito", sans-serif; cursor: pointer;
    transition: transform .16s var(--ease), background .16s var(--ease);
  }
  .visitor-rail button:hover, .visitor-rail button[aria-expanded="true"] {
    transform: translate(-2px,-2px) rotate(-1deg); background: #fffdf5;
  }
  body.agent-detail-open .visitor-rail,
  body.service-detail-open .visitor-rail,
  body.team-overview-open .visitor-rail { opacity: 0; pointer-events: none; }

  .paper-panel {
    position: absolute; top: 72px; right: 84px; z-index: 8;
    width: min(350px, calc(100vw - 116px)); padding: 25px 25px 22px;
    pointer-events: auto; color: var(--ink); background: #f7f4e9;
    border: 2px solid rgba(54,81,79,.78); border-radius: 5px 18px 7px 12px;
    box-shadow: 8px 10px 0 rgba(54,81,79,.17), 0 24px 60px rgba(35,66,71,.18);
    transform: rotate(-.35deg); animation: paperIn .24s var(--ease) both;
  }
  .paper-panel[hidden] { display: none; }
  @keyframes paperIn { from { opacity:0; transform: translateY(-8px) rotate(-1deg) scale(.97) } }
  .paper-panel h2 { font-size: 23px; line-height: 1.2; margin-bottom: 17px; }
  .paper-panel p { font-size: 13px; line-height: 1.55; opacity: .72; }
  .paper-close {
    position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
    color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; line-height: 1;
    cursor: pointer; opacity: .62;
  }
  .visit-list { list-style: none; display: grid; gap: 13px; }
  .visit-list li { display: grid; grid-template-columns: 31px 1fr; align-items: start; gap: 10px; }
  .visit-check {
    width: 28px; height: 28px; display: grid; place-items: center;
    border: 2px solid rgba(54,81,79,.62); border-radius: 50%;
    font-size: 11px; font-weight: 800;
  }
  .visit-list b { display: block; font-size: 13px; }
  .visit-list small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; opacity: .6; }
  .visit-list li.done .visit-check { color: #fff; background: var(--teal-d); border-color: var(--teal-d); }
  .visit-list li.done .visit-check::before { content: '✓'; font-size: 14px; }
  .visit-list li.done .visit-check { font-size: 0; }
  .visit-progress { margin-top: 19px; font-size: 10px; font-weight: 800; letter-spacing: 0; }
  .visit-progress i { display: block; height: 7px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(54,81,79,.12); }
  .visit-progress b { display: block; width: 0; height: 100%; background: #f2d16a; transition: width .35s var(--ease); }
  .public-links { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(54,81,79,.28); }
  .public-links[hidden], .public-links a[hidden] { display: none; }
  .public-links a {
    color: var(--ink); background: #fffdf5; border: 1px solid rgba(54,81,79,.3);
    border-radius: 5px; padding: 7px 9px; font-size: 11px; font-weight: 800; text-decoration: none;
  }
  .appearance-panel { width: min(310px, calc(100vw - 116px)); }
  .avatar-swatches { display: flex; gap: 10px; margin-top: 17px; }
  .avatar-swatches button {
    width: 37px; height: 37px; border: 3px solid #fffdf5; border-radius: 50%; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(54,81,79,.38), 0 4px 8px rgba(54,81,79,.14);
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  }
  .avatar-swatches button:nth-child(1) { background:#ff9e80; }
  .avatar-swatches button:nth-child(2) { background:#e8896b; }
  .avatar-swatches button:nth-child(3) { background:#5b7c99; }
  .avatar-swatches button:nth-child(4) { background:#62a69a; }
  .avatar-swatches button:nth-child(5) { background:#8e78b5; }
  .avatar-swatches button:hover { transform: translateY(-3px); }
  .avatar-swatches button.active { box-shadow: 0 0 0 3px var(--ink), 0 6px 12px rgba(54,81,79,.2); }

  /* emoji bar bottom-right, items stagger in */
  .emojibar {
    position: absolute; bottom: 18px; right: 18px;
    display: flex; gap: 9px; pointer-events: auto;
  }
  .emojibar button {
    width: 48px; height: 48px; font-size: 23px; cursor: pointer;
    background: var(--panel); backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--panel-b); border-radius: 16px;
    box-shadow: var(--shadow);
    transition: transform .18s var(--ease), background .18s var(--ease);
    animation: popIn .5s var(--ease) both;
  }
  .emojibar button:nth-child(1){ animation-delay:.45s }
  .emojibar button:nth-child(2){ animation-delay:.52s }
  .emojibar button:nth-child(3){ animation-delay:.59s }
  .emojibar button:nth-child(4){ animation-delay:.66s }
  .emojibar button:hover { transform: translateY(-5px) scale(1.06); background: #fff; }
  .emojibar button:active { transform: translateY(-1px) scale(.94); }

  /* mobile joystick */
  .stick {
    position: absolute; bottom: 26px; left: 26px;
    width: 122px; height: 122px; border-radius: 50%;
    background: rgba(255,255,255,0.32);
    border: 1px solid var(--panel-b);
    box-shadow: var(--shadow);
    pointer-events: auto; touch-action: none; display: none;
  }
  .stick .knob {
    position: absolute; top: 50%; left: 50%;
    width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
    background: var(--teal); box-shadow: 0 6px 16px rgba(95,163,160,.45);
    transition: transform .05s linear;
  }
  .mobile-actions {
    position: absolute;
    right: max(26px, env(safe-area-inset-right));
    bottom: max(26px, env(safe-area-inset-bottom));
    display: none; align-items: center; gap: 12px;
    pointer-events: auto;
  }
  .mobile-actions button {
    width: 58px; height: 58px; display: grid; place-items: center;
    border: 2px solid rgba(54,81,79,.42); border-radius: 50%;
    color: var(--ink); background: rgba(255,255,255,.78);
    box-shadow: 0 8px 20px rgba(38,65,69,.22);
    font: 800 25px/1 "Nunito", sans-serif;
    touch-action: manipulation;
  }
  .mobile-actions button:active { transform: scale(.92); background: #fff; }
  .mobile-actions button:disabled { opacity: .38; filter: saturate(.45); }
  @media (any-pointer: coarse) {
    .stick { display: block; }
    body.explore-mode .mobile-actions { display: flex; }
    .help { display: none; }
  }
  body.agent-detail-open .mobile-actions,
  body.service-detail-open .mobile-actions,
  body.team-overview-open .mobile-actions,
  body.agent-detail-open .stick,
  body.service-detail-open .stick,
  body.team-overview-open .stick { display: none !important; }

  /* ---------- public landing / start screen ---------- */
  #intro {
    position: fixed; inset: 0; z-index: 20;
    display: flex; align-items: center;
    text-align: left; pointer-events: none;
    background: rgba(225,241,244,.20);
    color: var(--ink);
    font-family: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
    transition: opacity .8s var(--ease);
  }
  #intro.hide { opacity: 0; pointer-events: none; }
  .intro-content {
    width: clamp(340px, 38vw, 510px); margin-left: clamp(22px, 5vw, 110px);
    padding: 0; pointer-events: auto;
    filter: drop-shadow(0 18px 34px rgba(47,89,99,.14));
  }
  .intro-kicker, .paper-kicker {
    font-size: 11px; font-weight: 800; letter-spacing: 0;
    color: var(--teal-d); margin-bottom: 12px;
  }
  .intro-kicker {
    color: #c9f0eb;
    text-shadow: 0 2px 10px rgba(27,45,53,.82);
  }
  #intro h1 {
    display: flex; flex-direction: column;
    font-size: clamp(42px, 5.5vw, 72px); font-weight: 800; line-height: .90;
    letter-spacing: 0; margin: 0; color: #f7f4e9;
    -webkit-text-stroke: 2px var(--ink);
    text-shadow: 4px 5px 0 rgba(54,81,79,.22);
  }
  #intro h1 span { white-space: nowrap; }
  #intro h1 span:last-child { color: #eaf6ff; }
  #intro p {
    margin-top: 24px; font-size: 15px; opacity: .94; font-weight: 700;
    max-width: 390px; line-height: 1.65; word-break: keep-all; color: #f7f4e9;
    text-shadow: 0 2px 3px rgba(26,42,50,.92), 0 6px 18px rgba(26,42,50,.72);
  }
  .intro-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
  .intro-disclosure {
    margin-top: 10px; max-width: 430px;
    font-size: 10px; line-height: 1.45; font-weight: 800; color: #f7f4e9; opacity: .78;
  }
  #intro .start {
    pointer-events: auto; cursor: pointer;
    padding: 14px 25px; font: inherit; font-weight: 800; font-size: 15px; color: var(--ink);
    background: #f2d16a; border: 2px solid var(--ink); border-radius: 4px;
    box-shadow: 5px 6px 0 rgba(54,81,79,.2);
    transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  }
  #intro .start:hover { transform: translate(-2px,-3px); background: #ffe28a; box-shadow: 8px 9px 0 rgba(54,81,79,.18); }
  #intro .start:active { transform: translateY(0) scale(.97); }
  #intro .start:disabled, #intro .dashboard-enter:disabled { cursor: wait; opacity: .58; }
  #intro .dashboard-enter {
    border: 0; background: transparent; color: #f7f4e9; cursor: pointer;
    padding: 11px 10px; font: inherit; font-size: 13px; font-weight: 800;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
    text-shadow: 0 2px 8px rgba(26,42,50,.88);
  }
  #intro .dashboard-enter:hover { color: #c9f0eb; }
  .intro-tools {
    margin-top: 17px; width: max-content; font-size: 12px; font-weight: 800;
    color: #f7f4e9; opacity: .82; text-shadow: 0 2px 8px rgba(26,42,50,.88);
  }
  .intro-tools summary { cursor: pointer; }
  .intro-tools[open] { opacity: 1; }
  #intro .edit-storage-note {
    margin-top: 8px; max-width: 286px; padding: 8px 9px;
    border-left: 3px solid #f2d16a; border-radius: 3px;
    background: rgba(27,45,53,.52); color: #f7f4e9;
    font-size: 10px; line-height: 1.5; font-weight: 700; opacity: .94;
  }
  #intro .loading {
    margin-top: 10px; min-height: 18px; font-size: 12px; font-weight: 700;
    color: #f7f4e9; opacity: .72; letter-spacing: 0; text-shadow: 0 2px 8px rgba(26,42,50,.88);
  }
  #intro .loading.error { color: #b45b5b; opacity: .85; max-width: 300px; line-height: 1.5; letter-spacing: 0; }
  .intro-hint {
    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 9px; padding: 8px 13px;
    border-radius: 999px; background: rgba(250,248,239,.72); color: var(--ink);
    font-size: 10px; font-weight: 800; letter-spacing: 0; white-space: nowrap;
  }
  .intro-hint span { letter-spacing: 0; color: var(--teal-d); }
  .intro-hint i { width: 1px; height: 12px; background: rgba(54,81,79,.25); }

  .fallback {
    position: fixed; left: 50%; top: 50%; z-index: 30;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 32px));
    padding: 18px; text-align: center; line-height: 1.55;
    font-family: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  }

  /* ---------- keyframes ---------- */
  @keyframes slideDown { from { opacity:0; transform: translateY(-14px); } to { opacity:1; transform:none; } }
  @keyframes fadeUp    { from { opacity:0; transform: translate(-50%, 14px); } to { opacity:.92; transform: translate(-50%, 0); } }
  @keyframes popIn     { from { opacity:0; transform: translateY(14px) scale(.8); } to { opacity:1; transform:none; } }
  @keyframes float     { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }

  @media (max-width: 520px) {
    body.explore-mode .stick { display: block; }
    body.explore-mode .mobile-actions { display: flex; }
    body.explore-mode .agentbar,
    body.explore-mode .ops-strip { display: none !important; }
    .help { display: none; }
    .world-label { gap: 5px; padding: 4px 9px; font-size: 11px; }
    .world-label.bubble { font-size: 12px; }
    .world-label.emoji { font-size: 20px; padding: 5px 8px; }
    .hud {
      top: 14px; left: 14px;
      width: min(220px, calc(100vw - 184px));
      min-width: 176px;
      padding: 12px 14px;
    }
    .hud .brand { gap: 6px; font-size: 13px; line-height: 1.2; flex-wrap: wrap; }
    .hud .task { max-width: none; font-size: 12px; }
    .weather { top: 14px; right: 14px; gap: 6px; padding: 6px 10px; }
    .weather .sound-toggle { width: 26px; height: 26px; margin-right: -4px; font-size: 16px; }
    .visitor-rail { top: 62px; right: 14px; }
    .visitor-rail button { width: 43px; height: 43px; font-size: 19px; }
    .paper-panel {
      top: 116px; right: 14px; width: calc(100vw - 28px); padding: 22px 20px 20px;
      max-height: calc(100vh - 132px); overflow: auto;
    }
    .help {
      bottom: 76px;
      max-width: calc(100vw - 36px);
      white-space: normal;
      line-height: 1.55;
    }
    .emojibar {
      right: max(14px, env(safe-area-inset-right));
      bottom: max(98px, calc(env(safe-area-inset-bottom) + 80px));
      flex-direction: column; gap: 6px;
    }
    .emojibar button { width: 44px; height: 44px; border-radius: 14px; font-size: 21px; }
    .stick {
      left: max(26px, env(safe-area-inset-left));
      bottom: max(26px, env(safe-area-inset-bottom));
    }
  }

  @media (max-width: 360px) {
    .hud { width: calc(100vw - 88px); }
    .hud .task { display: none; }
    .weather { top: 154px; left: 14px; right: auto; }
  }

  @media (max-width: 520px) {
    #intro {
      align-items: flex-end;
      background: rgba(225,241,244,.36);
    }
    .intro-content {
      width: calc(100vw - 40px); margin: 0 20px 76px; padding: 0;
    }
    #intro h1 { font-size: 36px; letter-spacing: 0; overflow-wrap: anywhere; }
    #intro p { margin-top: 17px; font-size: 13px; }
    .intro-actions { margin-top: 18px; flex-wrap: wrap; }
    #intro .start { padding: 12px 18px; }
    .intro-hint { bottom: 15px; }
  }

  /* ---------- edit mode ---------- */
  #intro .edit-enter {
    display: block; margin-top: 8px; pointer-events: auto; cursor: pointer;
    padding: 7px 11px; font: inherit; font-weight: 800; font-size: 12px;
    color: var(--ink); background: rgba(255,255,255,.55);
    border: 1px solid rgba(54,81,79,.32); border-radius: 7px;
  }

  /* while editing, hide the play-mode HUD bits that don't apply */
  body.editing .hud,
  body.editing .help,
  body.editing .weather,
  body.editing .emojibar,
  body.editing .agentbar,
  body.editing .ops-strip,
  body.editing .agent-card,
  body.editing .team-panel,
  body.editing .enter-prompt,
  body.editing .service-panel,
  body.editing .stick,
  body.editing .mobile-actions { display: none !important; }
  body.editing .visitor-rail,
  body.editing .paper-panel { display: none !important; }

  /* ---------- agent dashboard ---------- */
  /* team bar — below the HUD, one chip per agent */
  .agentbar {
    position: absolute; top: 178px; left: 18px;
    width: 226px; padding: 11px 12px;
    display: flex; flex-direction: column; gap: 5px;
    pointer-events: auto;
    animation: slideDown .7s var(--ease) both; animation-delay: .3s;
  }
  .agentbar-title {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 0;
    color: var(--teal-d); margin-bottom: 3px; padding: 0;
    border: 0; background: transparent; cursor: pointer; text-align: left;
  }
  .agentbar-heading { display: flex; align-items: center; gap: 5px; }
  .agentbar-heading .agentbar-title { flex: 1; min-width: 0; margin-bottom: 0; }
  .status-refresh {
    width: 25px; height: 25px; flex: none; display: grid; place-items: center;
    color: var(--teal-d); background: rgba(255,255,255,.38);
    border: 1px solid rgba(54,81,79,.10); border-radius: 8px;
    font: 800 15px/1 "Nunito", sans-serif; cursor: pointer;
    transition: transform .18s var(--ease), background .18s var(--ease);
  }
  .status-refresh:hover { background: rgba(255,255,255,.8); transform: rotate(30deg); }
  .status-refresh.refreshing { animation: statusSpin .75s linear infinite; }
  @keyframes statusSpin { to { transform: rotate(360deg); } }
  .status-connection { font-size: 9px; letter-spacing: 0; opacity: .68; }
  .status-connection.live { color: #4c8a52; }
  .status-connection.offline { color: #c0584f; }
  .status-connection.static { color: #7a6b4b; }
  .status-connection.stale { color: #9b681e; }
  .status-freshness {
    margin: -1px 1px 2px; min-height: 12px;
    color: var(--ink); font-size: 8.5px; line-height: 1.35; font-weight: 700; opacity: .46;
  }
  .status-freshness.stale { color: #9b681e; opacity: .82; }
  .agentbar.collapsed #agentbar,
  .agentbar.collapsed .status-freshness,
  .agentbar.collapsed .patrol-toggle,
  .agentbar.collapsed .recent-results-btn { display: none; }
  .agentbar.collapsed .team-overview-btn { margin-top: 2px; }
  .agent-chip {
    display: flex; align-items: center; gap: 7px;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
    background: rgba(245,249,248,0.92); border: 1px solid rgba(54,81,79,.12);
    border-radius: 6px; padding: 6px 9px; cursor: pointer;
    transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .agent-chip:hover { background: #fff; transform: translateX(2px); }
  .agent-chip { border-left: 3px solid transparent; }
  .agent-chip:hover { border-left-color: var(--agent-color, var(--teal)); }
  .agent-chip.patrol-current {
    background: rgba(255,255,255,.78); border-left-color: var(--agent-color, var(--teal));
    box-shadow: 0 4px 12px rgba(54,81,79,.08);
  }
  .chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .agent-chip.busy .chip-dot { animation: chipPulse 1.4s ease-in-out infinite; }
  @keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224,163,63,.55); }
    50%      { box-shadow: 0 0 0 5px rgba(224,163,63,0); }
  }
  .chip-name { min-width: 56px; text-align: left; }
  .chip-state { font-size: 10.5px; font-weight: 700; opacity: .55; margin-left: auto; }
  .patrol-toggle {
    margin-top: 4px; width: 100%; min-height: 30px; padding: 5px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--ink); background: rgba(255,255,255,.36);
    border: 1px solid rgba(54,81,79,.11); border-radius: 9px;
    font: inherit; font-size: 10.5px; font-weight: 800; line-height: 1.2; cursor: pointer;
    transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
  }
  .patrol-toggle > span { display: flex; align-items: center; gap: 6px; }
  .patrol-toggle i {
    width: 7px; height: 7px; border-radius: 50%; background: rgba(54,81,79,.28);
    box-shadow: 0 0 0 0 rgba(95,163,160,0);
  }
  .patrol-toggle small { font-size: 9px; font-weight: 800; opacity: .48; }
  .patrol-toggle:hover { background: rgba(255,255,255,.66); transform: translateY(-1px); }
  .patrol-toggle[aria-pressed="true"] {
    color: var(--teal-d); background: rgba(129,191,188,.18);
    border-color: rgba(95,163,160,.28);
  }
  .patrol-toggle[aria-pressed="true"] i {
    background: var(--teal-d); animation: patrolPulse 1.8s ease-in-out infinite;
  }
  .patrol-toggle[aria-pressed="true"] small { opacity: .76; }
  @keyframes patrolPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(95,163,160,.38); }
    50% { box-shadow: 0 0 0 5px rgba(95,163,160,0); }
  }
  .team-overview-btn {
    margin-top: 4px; width: 100%; min-height: 30px; padding: 5px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--teal-d); background: rgba(129,191,188,.11);
    border: 1px solid rgba(95,163,160,.22); border-radius: 9px;
    font: inherit; font-size: 10.5px; font-weight: 800; line-height: 1.2;
    letter-spacing: 0; cursor: pointer;
    transition: background .16s var(--ease), transform .16s var(--ease);
  }
  .team-overview-btn:hover,
  .team-overview-btn[aria-expanded="true"] { background: rgba(129,191,188,.23); transform: translateY(-1px); }
  .team-overview-btn b {
    width: 19px; height: 19px; display: grid; place-items: center;
    border-radius: 999px; color: #fff; background: #c0584f;
    font-size: 9.5px; box-shadow: 0 3px 8px rgba(192,88,79,.24);
  }
  #teamApprovalBadge[hidden] { display: none; }
  .team-overview-btn.has-approval { color: #8f4f28; border-color: rgba(192,88,79,.24); }
  .recent-results-btn {
    width: 100%; min-height: 30px; padding: 5px 8px;
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px;
    color: var(--ink); background: rgba(255,255,255,.36);
    border: 1px solid rgba(54,81,79,.11); border-radius: 9px;
    font: inherit; font-size: 10.5px; font-weight: 800; line-height: 1.2;
    cursor: pointer; text-align: left;
    transition: background .16s var(--ease), transform .16s var(--ease);
  }
  .recent-results-btn:hover { background: rgba(255,255,255,.72); transform: translateY(-1px); }
  .recent-results-btn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; opacity: .5; }
  .recent-results-btn b {
    min-width: 19px; height: 19px; padding-inline: 5px; display: grid; place-items: center;
    border-radius: 999px; color: #fff; background: var(--teal-d); font-size: 9px;
  }
  .recent-results-btn[hidden], .recent-results-btn b[hidden] { display: none; }

  .ops-strip {
    position: absolute; left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 500px)); min-width: 430px;
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
    padding: 8px 10px; pointer-events: auto;
    animation: fadeUp .6s var(--ease) both; animation-delay: .38s;
  }
  body:not(.dashboard-mode) .ops-strip { display: none; }
  .ops-strip > div {
    min-width: 0; padding: 3px 12px;
    border-left: 1px solid rgba(54,81,79,.12);
  }
  .ops-strip > div:first-child { border-left: 0; }
  .ops-strip span, .ops-strip small {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ops-strip span {
    color: var(--teal-d); font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: 0;
  }
  .ops-strip strong {
    display: block; margin-top: 4px; color: var(--ink);
    font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: 0;
  }
  .ops-strip small { margin-top: 3px; font-size: 8px; line-height: 1; font-weight: 800; opacity: .42; }
  .ops-link[data-state="healthy"] strong { color: #4c8058; }
  .ops-link[data-state="demo"] strong { color: #75624f; }
  .ops-link[data-state="degraded"] strong,
  .ops-link[data-state="incomplete"] strong,
  .ops-link[data-state="stale"] strong { color: #95611e; }
  .ops-link[data-state="error"] strong,
  .ops-link[data-state="offline"] strong { color: #a34740; }

  /* status card — right side, slides in when an agent is selected */
  .agent-card {
    position: absolute; top: 70px; right: 18px;
    width: min(326px, calc(100vw - 36px));
    max-height: calc(100vh - 92px); overflow-x: hidden; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(54,81,79,.20) transparent;
    padding: 16px 18px;
    pointer-events: auto;
    opacity: 0; visibility: hidden; transform: translateX(16px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .agent-card:not(.show) { pointer-events: none; }
  .agent-card.show { opacity: 1; visibility: visible; transform: none; }
  /* identity accent strip along the top of the card */
  .agent-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--agent-color, var(--teal)), transparent 82%);
    opacity: .85;
  }
  .agent-close {
    position: absolute; top: 10px; right: 12px;
    font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); opacity: .5;
    background: none; border: none; cursor: pointer;
  }
  .agent-close:hover { opacity: 1; }
  .agent-head { display: flex; align-items: center; gap: 10px; }
  .agent-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px rgba(129,191,188,.18); }
  .agent-name { font-size: 17px; font-weight: 800; color: var(--ink); }
  .agent-name small { font-size: 12px; font-weight: 700; opacity: .55; margin-left: 4px; }
  .agent-fantasy { font-size: 11.5px; font-weight: 800; color: var(--teal-d); margin-top: 1px; }
  .agent-role {
    margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--teal-d);
    background: rgba(129,191,188,.14); border-radius: 8px; padding: 4px 9px;
    display: inline-block;
  }
  .agent-soul { margin-top: 8px; font-size: 12.5px; line-height: 1.55; opacity: .78; }
  .agent-tagline { margin-top: 8px; font-size: 12px; font-weight: 700; font-style: italic; opacity: .6; }
  .agent-contract {
    margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px;
  }
  .agent-contract > span {
    padding: 4px 8px; border-radius: 999px;
    font-size: 10px; line-height: 1.2; font-weight: 800; color: var(--ink);
    background: rgba(255,255,255,.52); border: 1px solid rgba(54,81,79,.10);
  }
  .agent-contract > span:first-child { color: var(--teal-d); }
  .agent-responsibilities {
    margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px;
  }
  .agent-responsibilities > span {
    padding: 3px 7px; border-radius: 7px;
    font-size: 10px; line-height: 1.25; font-weight: 700; color: var(--ink);
    background: color-mix(in srgb, var(--agent-color, var(--teal)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--agent-color, var(--teal)) 22%, transparent);
  }
  .agent-profile-notes {
    margin-top: 8px; padding: 7px 9px;
    border-radius: 9px; background: rgba(255,255,255,.32);
    border: 1px solid rgba(54,81,79,.08);
  }
  .agent-profile-notes[hidden] { display: none; }
  .agent-profile-notes summary {
    color: var(--teal-d); cursor: pointer;
    font-size: 9px; line-height: 1.2; font-weight: 800; letter-spacing: 0;
  }
  .agent-profile-notes[open] summary { margin-bottom: 7px; }
  .agent-profile-notes > div {
    display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 7px;
    padding: 4px 0; border-top: 1px dashed rgba(54,81,79,.09);
  }
  .agent-profile-notes > div:first-of-type { border-top: 0; }
  .agent-profile-notes b { font-size: 8px; line-height: 1.4; letter-spacing: 0; opacity: .46; }
  .agent-profile-notes span { font-size: 9.5px; line-height: 1.38; font-weight: 700; opacity: .68; }
  .agent-status-row {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(54,81,79,.12);
    display: flex; align-items: center; gap: 8px;
  }
  .agent-state {
    font-size: 11.5px; font-weight: 800; color: #4c8a52;
    background: rgba(139,205,140,.22); border-radius: 999px; padding: 3px 10px;
    flex: none;
  }
  .agent-task { min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.3; opacity: .7; overflow-wrap: anywhere; }
  .agent-updated { font-size: 10.5px; font-weight: 700; opacity: .45; margin-left: auto; white-space: nowrap; }
  .agent-runtime {
    margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px;
  }
  .agent-runtime > span {
    padding: 3px 7px; border-radius: 999px;
    font-size: 9.5px; line-height: 1.2; font-weight: 800; color: var(--ink);
    background: rgba(54,81,79,.07);
  }
  .agent-runtime > .health-healthy { color: #4c8a52; background: rgba(139,205,140,.18); }
  .agent-runtime > .health-degraded { color: #9b681e; background: rgba(224,163,63,.18); }
  .agent-runtime > .health-error,
  .agent-runtime > .health-offline { color: #a34740; background: rgba(202,85,76,.14); }
  .agent-alert {
    margin-top: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
    border-radius: 9px; color: #765019;
    background: rgba(242,209,106,.20); border: 1px solid rgba(224,163,63,.26);
  }
  .agent-alert > strong { font-size: 10.5px; line-height: 1.3; }
  .agent-alert > span { font-size: 10.5px; line-height: 1.4; opacity: .82; }
  .agent-contract > span[hidden],
  .agent-responsibilities[hidden],
  .agent-runtime[hidden],
  .agent-runtime > span[hidden],
  .agent-alert[hidden] { display: none; }
  .agent-progress {
    margin-top: 9px; display: flex; align-items: center; gap: 9px;
    font-size: 10.5px; font-weight: 700; color: var(--ink); opacity: .72;
  }
  .agent-progress[hidden], .agent-result[hidden] { display: none; }
  .agent-progress > span { white-space: nowrap; }
  .agent-progress > i {
    height: 5px; flex: 1; overflow: hidden; border-radius: 999px;
    background: rgba(54,81,79,.10);
  }
  .agent-progress > i > b {
    display: block; width: 0; height: 100%; border-radius: inherit;
    background: var(--agent-color, var(--teal));
    transition: width .35s var(--ease);
  }
  .agent-result {
    margin-top: 11px; padding: 10px 11px; display: flex; flex-direction: column; gap: 2px;
    color: var(--ink); text-decoration: none;
    background: rgba(255,255,255,.45); border: 1px solid rgba(54,81,79,.10);
    border-left: 3px solid var(--agent-color, var(--teal)); border-radius: 10px;
    transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .agent-result[href]:hover { background: rgba(255,255,255,.82); transform: translateY(-1px); }
  .agent-result:not([href]) { cursor: default; }
  .agent-result > span { font-size: 9px; font-weight: 800; letter-spacing: 0; color: var(--teal-d); }
  .agent-result > strong { font-size: 12.5px; line-height: 1.35; }
  .agent-result > small { font-size: 11px; line-height: 1.4; opacity: .62; }
  .agent-service-btn {
    margin-top: 10px; width: 100%;
    font: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer;
    padding: 9px 12px; color: var(--teal-d);
    background: rgba(129,191,188,.14); border: 1px solid rgba(129,191,188,.3);
    border-radius: 11px;
    transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .agent-service-btn:hover { background: rgba(129,191,188,.28); transform: translateY(-1px); }
  .agent-service-btn:active { transform: translateY(0) scale(.98); }

  /* ---------- read-only team flow: overview + task graph + approvals ---------- */
  .team-panel {
    position: absolute; top: 70px; right: 18px; z-index: 8;
    width: min(640px, calc(100vw - 300px)); max-height: calc(100vh - 92px);
    padding: 20px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: rgba(54,81,79,.20) transparent;
    pointer-events: auto; opacity: 0; visibility: hidden;
    transform: translateX(18px) scale(.985);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .team-panel.show { opacity: 1; visibility: visible; transform: none; }
  .team-panel:not(.show) { pointer-events: none; }
  .team-panel > .agent-close {
    position: sticky; top: -8px; right: auto; z-index: 4; float: right;
    width: 28px; height: 28px; margin: -8px -8px 0 8px;
    display: grid; place-items: center; border-radius: 999px;
    background: rgba(255,255,255,.72); box-shadow: 0 4px 12px rgba(54,81,79,.10);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .team-panel::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, #ffd76b, #72c8c5 42%, #9188bd 72%, #e99591);
    opacity: .82;
  }
  .team-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; padding-right: 24px;
  }
  .team-panel-kicker {
    font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: 0;
    color: var(--teal-d); opacity: .76;
  }
  .team-panel h2 { margin-top: 4px; font-size: 22px; line-height: 1.15; color: var(--ink); }
  .team-panel-source {
    flex: none; padding: 4px 8px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; color: var(--teal-d);
    background: rgba(129,191,188,.12); border: 1px solid rgba(95,163,160,.18);
  }
  .team-panel-summary {
    margin-top: 8px; max-width: 500px;
    font-size: 11.5px; line-height: 1.48; opacity: .68;
  }
  .team-metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px;
    margin-top: 14px;
  }
  .team-metrics > div {
    min-width: 0; padding: 10px; border-radius: 6px;
    background: rgba(245,249,248,.92); border: 1px solid rgba(54,81,79,.11);
  }
  .team-metrics span {
    display: block; overflow: hidden; text-overflow: ellipsis;
    font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: 0; opacity: .48;
  }
  .team-metrics strong { display: inline-block; margin-top: 5px; font-size: 17px; line-height: 1; color: var(--ink); }
  .team-metrics small { margin-left: 4px; font-size: 8.5px; font-weight: 800; opacity: .38; }
  #teamMetricHealth[data-health="healthy"] { color: #4c8a52; }
  #teamMetricHealth[data-health="degraded"] { color: #9b681e; }
  #teamMetricHealth[data-health="error"],
  #teamMetricHealth[data-health="offline"] { color: #a34740; }
  .team-network {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px;
  }
  .team-network-agent {
    min-width: 0; display: grid; grid-template-columns: minmax(105px,.85fr) minmax(0,1.2fr) auto;
    align-items: center; gap: 8px; padding: 8px 9px;
    border-radius: 6px; background: rgba(245,249,248,.9);
    border: 1px solid rgba(54,81,79,.10); border-left: 3px solid rgba(76,128,88,.56);
  }
  .team-network-agent.state-demo { border-left-color: rgba(117,98,79,.45); }
  .team-network-agent.state-degraded,
  .team-network-agent.state-missing,
  .team-network-agent.state-stale { border-left-color: rgba(224,163,63,.72); }
  .team-network-agent.state-error,
  .team-network-agent.state-offline { border-left-color: rgba(192,88,79,.76); }
  .team-network-identity { min-width: 0; display: flex; align-items: center; gap: 7px; }
  .team-network-identity > i {
    width: 9px; height: 9px; flex: none; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,.86);
  }
  .team-network-identity > span,
  .team-network-activity { min-width: 0; display: block; }
  .team-network-identity strong,
  .team-network-identity small,
  .team-network-activity strong,
  .team-network-activity small {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .team-network-identity strong { font-size: 10.5px; line-height: 1.2; }
  .team-network-identity small { margin-top: 2px; font-size: 8px; line-height: 1.2; opacity: .46; }
  .team-network-activity strong { font-size: 9.5px; line-height: 1.2; }
  .team-network-activity small { margin-top: 2px; font-size: 8px; line-height: 1.2; opacity: .48; }
  .team-network-link {
    padding: 3px 6px; border-radius: 5px; color: #4c8058;
    background: rgba(104,162,116,.12); font-size: 8px; line-height: 1; font-weight: 800;
  }
  .team-network-link.state-demo { color: #75624f; background: rgba(117,98,79,.10); }
  .team-network-link.state-degraded,
  .team-network-link.state-missing,
  .team-network-link.state-stale { color: #8f5d19; background: rgba(224,163,63,.15); }
  .team-network-link.state-error,
  .team-network-link.state-offline { color: #a34740; background: rgba(192,88,79,.13); }
  .team-section {
    min-width: 0; margin-top: 12px; padding-top: 11px;
    border-top: 1px solid rgba(54,81,79,.10);
  }
  .team-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
  }
  .team-section-head h3 {
    font-size: 9px; line-height: 1; letter-spacing: 0; color: var(--teal-d);
  }
  .team-section-head > span { font-size: 9px; font-weight: 800; opacity: .42; }
  .team-handoffs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .team-handoff {
    min-width: 0; padding: 7px 8px; border-radius: 9px;
    background: rgba(255,255,255,.34); border: 1px solid rgba(54,81,79,.08);
  }
  .team-handoff-path {
    min-width: 0; display: flex; align-items: center; gap: 4px;
    overflow: hidden; white-space: nowrap;
  }
  .team-handoff-path i { flex: none; font-style: normal; font-size: 9px; opacity: .34; }
  .team-handoff-node {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    padding: 3px 5px; border-radius: 6px;
    font-size: 9px; line-height: 1.1; font-weight: 800;
    background: color-mix(in srgb, var(--node-color, var(--teal)) 16%, transparent);
  }
  .team-handoff > small {
    display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis;
    font-size: 8.5px; line-height: 1.25; font-weight: 700; opacity: .46; white-space: nowrap;
  }
  .team-columns { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 12px; }
  .team-task-list, .team-approval-list { display: grid; gap: 6px; }
  .team-task {
    min-width: 0; padding: 8px 9px 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,.43); border: 1px solid rgba(54,81,79,.09);
    border-left: 3px solid rgba(54,81,79,.18);
  }
  .team-task.status-running { border-left-color: #d99c3f; }
  .team-task.status-verifying { border-left-color: #9188bd; }
  .team-task.status-waiting_approval { border-left-color: #c97246; }
  .team-task.status-blocked,
  .team-task.status-failed { border-left-color: #c0584f; }
  .team-task.status-completed { border-left-color: #68a274; }
  .team-task-top, .team-approval-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .team-task-owner {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 9.5px; font-weight: 800; opacity: .68;
  }
  .team-task-owner i {
    width: 7px; height: 7px; display: inline-block; margin-right: 4px;
    border-radius: 50%;
  }
  .team-task-status {
    flex: none; padding: 3px 6px; border-radius: 999px;
    font-size: 8.5px; line-height: 1; font-weight: 800;
    color: var(--ink); background: rgba(54,81,79,.07);
  }
  .team-task-status.status-running { color: #8f5d19; background: rgba(224,163,63,.17); }
  .team-task-status.status-verifying { color: #665c99; background: rgba(145,136,189,.17); }
  .team-task-status.status-waiting_approval { color: #8f4f28; background: rgba(201,114,70,.16); }
  .team-task-status.status-blocked,
  .team-task-status.status-failed { color: #a34740; background: rgba(192,88,79,.14); }
  .team-task-status.status-completed { color: #4c8058; background: rgba(104,162,116,.14); }
  .team-task-title {
    display: block; margin-top: 5px; font-size: 11px; line-height: 1.3;
    color: var(--ink); overflow-wrap: anywhere;
  }
  .team-task-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .team-task-meta span {
    padding: 2px 5px; border-radius: 5px;
    font-size: 8px; line-height: 1.2; font-weight: 800; opacity: .52;
    background: rgba(54,81,79,.06);
  }
  .team-task-meta .risk-l4 { color: #a34740; opacity: 1; background: rgba(192,88,79,.12); }
  .team-task-progress {
    margin-top: 6px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 6px;
  }
  .team-task-progress > span { font-size: 8px; font-weight: 800; opacity: .5; }
  .team-task-progress::after {
    content: ''; grid-column: 2; grid-row: 1; z-index: 0;
    height: 4px; border-radius: 999px; background: rgba(54,81,79,.08);
  }
  .team-task-progress > i {
    grid-column: 2; grid-row: 1; z-index: 1;
    display: block; max-width: 100%; height: 4px; border-radius: 999px; background: var(--teal-d);
  }
  .team-approval {
    padding: 9px 10px; border-radius: 10px;
    color: #765019; background: rgba(242,209,106,.17);
    border: 1px solid rgba(224,163,63,.24);
  }
  .team-approval-top span { font-size: 9px; font-weight: 800; opacity: .65; }
  .team-approval-top b {
    padding: 3px 6px; border-radius: 999px; color: #fff; background: #c97246;
    font-size: 8px; line-height: 1;
  }
  .team-approval > strong { display: block; margin-top: 6px; font-size: 10.5px; line-height: 1.32; }
  .team-approval > p { margin-top: 4px; font-size: 9px; line-height: 1.4; opacity: .72; }
  .team-approval > small { display: block; margin-top: 5px; font-size: 8px; line-height: 1.35; opacity: .54; }
  .team-empty {
    min-height: 79px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px; text-align: center; border-radius: 10px;
    background: rgba(255,255,255,.27); border: 1px dashed rgba(54,81,79,.14);
  }
  .team-empty-icon { font-size: 17px; line-height: 1; opacity: .48; }
  .team-empty strong { margin-top: 5px; font-size: 10px; }
  .team-empty small { margin-top: 3px; max-width: 230px; font-size: 8.5px; line-height: 1.35; opacity: .46; }

  /* ---------- house services: doorstep prompt + service panel ---------- */
  .enter-prompt {
    position: absolute; bottom: 84px; left: 50%;
    transform: translate(-50%, 10px);
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink);
    pointer-events: auto; opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .enter-prompt:not(.show) { pointer-events: none; }
  .enter-prompt.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .enter-prompt b { color: var(--teal-d); font-weight: 800; }
  .enter-prompt .enter-key {
    font-size: 11px; font-weight: 800; color: var(--teal-d);
    background: rgba(129,191,188,.18); border: 1px solid rgba(129,191,188,.3);
    border-radius: 7px; padding: 2px 8px; margin-left: 2px;
  }
  .enter-prompt:hover { background: #fff; }

  .service-panel {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -46%) scale(.96);
    width: min(490px, calc(100vw - 32px));
    max-height: min(76vh, 640px); overflow: auto; overscroll-behavior: contain;
    padding: 18px 20px;
    pointer-events: auto;
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .service-panel:not(.show) { pointer-events: none; }
  .service-panel.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
  .service-panel::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--agent-color, var(--teal)), transparent 82%);
    opacity: .85;
  }
  .service-head { display: flex; align-items: center; gap: 12px; padding-right: 22px; }
  .service-head > div { min-width: 0; flex: 1; }
  .service-icon {
    font-size: 26px; line-height: 1; flex: none;
    width: 48px; height: 48px; display: grid; place-items: center;
    background: rgba(129,191,188,.13); border-radius: 14px;
  }
  .service-name { font-size: 17px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
  .service-owner { font-size: 11.5px; font-weight: 800; color: var(--teal-d); margin-top: 1px; }
  .service-online {
    margin-left: auto; flex: none;
    font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px;
  }
  .service-online.online   { color: #4c8a52; background: rgba(139,205,140,.22); }
  .service-online.offline  { color: #c0584f; background: rgba(217,107,107,.16); }
  .service-online.checking { color: var(--ink); background: rgba(54,81,79,.08); opacity: .7; }
  .service-online.planned  { color: #a07f2f; background: rgba(224,163,63,.16); }
  .service-online.external { color: #486f91; background: rgba(91,124,153,.16); }
  .service-online.private  { color: #75624f; background: rgba(143,117,94,.16); }
  .service-online.public, .service-online.current { color: #386b57; background: #dfeee5; }
  .service-online.source { color: #4d6277; background: #e3eaf0; }
  .service-online.prototype { color: #8a6532; background: #f2e8d8; }
  .service-tabs {
    margin-top: 14px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
    border-radius: 11px; background: rgba(54,81,79,.07);
  }
  .service-tabs button {
    min-width: 0; padding: 7px 10px; display: flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; border-radius: 8px; color: var(--ink); background: transparent;
    font: inherit; font-size: 11.5px; font-weight: 800; line-height: 1.2;
    cursor: pointer; opacity: .56;
    transition: opacity .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
  }
  .service-tabs button:hover { opacity: .86; }
  .service-tabs button.active {
    opacity: 1; background: rgba(255,255,255,.78);
    box-shadow: 0 3px 9px rgba(54,81,79,.08);
  }
  .service-tabs b {
    min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center;
    border-radius: 999px; color: var(--teal-d); background: rgba(129,191,188,.16);
    font-size: 8.5px;
  }
  .service-pane[hidden] { display: none; }
  .service-select-label { display: block; margin: 12px 0 5px; font-size: 11px; font-weight: 800; color: var(--teal-d); }
  .service-select { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border: 1px solid #bdcdc6; border-radius: 6px; background: #fbfcfa; color: var(--ink); font: inherit; font-size: 12px; }
  .service-features { margin: 12px 0; padding-left: 18px; font-size: 12px; line-height: 1.65; }
  .service-features li + li { margin-top: 4px; }
  .service-checked { margin-top: 12px; font-size: 10px; line-height: 1.5; color: #647b73; }
  .service-pane [hidden] { display: none; }
  .service-desc { margin-top: 12px; font-size: 13px; line-height: 1.6; opacity: .8; }
  .service-note {
    margin-top: 8px; font-size: 11.5px; font-weight: 700; line-height: 1.5;
    color: var(--teal-d); background: rgba(129,191,188,.1);
    border-radius: 9px; padding: 7px 10px;
  }
  .service-frame { margin-top: 12px; }
  .service-frame iframe {
    display: block; width: 100%; aspect-ratio: 16 / 10; border: none;
    border-radius: 12px; background: #fff;
    box-shadow: inset 0 0 0 1px rgba(54,81,79,.12);
  }
  .service-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
  .service-open {
    flex: 1; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
    min-width: 130px; padding: 11px 12px; color: #fff; text-align: center; text-decoration: none;
    background: var(--teal); border: none; border-radius: 6px;
    box-shadow: 0 8px 20px rgba(95,163,160,.35);
    transition: transform .18s var(--ease), background .18s var(--ease);
  }
  .service-open:hover { transform: translateY(-2px); background: var(--teal-d); }
  .service-open:active { transform: translateY(0) scale(.97); }
  .service-repository { color: #36514f; background: #e4ece7; box-shadow: none; }
  .service-repository:hover { color: #fff; }
  .service-select:focus-visible, .service-open:focus-visible { outline: 2px solid #477c95; outline-offset: 3px; }
  @media (max-width: 380px) {
    .service-head { flex-wrap: wrap; gap: 8px; }
    .service-online { margin-left: 50px; }
  }

  .result-space { padding-top: 13px; }
  .result-space-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .result-space-kicker {
    color: var(--teal-d); font-size: 8.5px; line-height: 1; font-weight: 800; letter-spacing: 0;
    opacity: .64;
  }
  .result-space h3 { margin-top: 4px; color: var(--ink); font-size: 16px; line-height: 1.2; }
  .result-space-head > span {
    flex: none; padding: 4px 8px; border-radius: 999px; color: var(--teal-d);
    background: rgba(129,191,188,.12); font-size: 9px; line-height: 1; font-weight: 800;
  }
  .result-space > p { margin-top: 7px; font-size: 11.5px; line-height: 1.48; opacity: .62; }
  .home-result-list { margin-top: 12px; display: grid; gap: 7px; }
  .home-result-card {
    position: relative; min-width: 0; display: block; padding: 10px 11px 10px 13px;
    color: var(--ink); text-decoration: none; border-radius: 11px;
    background: rgba(255,255,255,.46); border: 1px solid rgba(54,81,79,.09);
    border-left: 3px solid var(--agent-color, var(--teal));
    transition: background .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
  }
  a.home-result-card:hover {
    background: rgba(255,255,255,.82); border-color: rgba(54,81,79,.14); transform: translateY(-1px);
  }
  .home-result-meta { display: flex; align-items: center; gap: 5px; min-width: 0; }
  .home-result-kind, .home-result-status {
    padding: 3px 6px; border-radius: 999px; font-size: 8.5px; line-height: 1; font-weight: 800;
    background: rgba(54,81,79,.07); opacity: .72;
  }
  .home-result-kind { color: var(--teal-d); background: rgba(129,191,188,.12); }
  .home-result-date { margin-left: auto; font-size: 8.5px; font-weight: 800; opacity: .38; white-space: nowrap; }
  .home-result-card h4 { margin-top: 6px; font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
  .home-result-card p { margin-top: 3px; font-size: 10.5px; line-height: 1.42; opacity: .62; }
  .home-result-link { position: absolute; right: 10px; bottom: 9px; font-size: 10px; opacity: .45; }
  .home-result-empty {
    min-height: 104px; padding: 18px; display: grid; place-items: center; align-content: center; gap: 5px;
    border-radius: 11px; text-align: center; background: rgba(255,255,255,.28);
    border: 1px dashed rgba(54,81,79,.14);
  }
  .home-result-empty span { font-size: 19px; line-height: 1; opacity: .42; }
  .home-result-empty strong { font-size: 11px; }
  .home-result-empty small { max-width: 270px; font-size: 9.5px; line-height: 1.4; opacity: .46; }

  @media (max-width: 520px) {
    .agentbar { top: auto; bottom: 82px; left: 14px; width: 214px; padding: 8px 10px; }
    .ops-strip {
      bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 28px); min-width: 0;
      padding: 7px 5px;
    }
    .ops-strip > div { padding-inline: 7px; }
    .ops-strip strong { font-size: 13px; }
    .ops-strip small { font-size: 7.5px; }
    .agent-chip { font-size: 11.5px; padding: 4px 8px; }
    .agent-card { top: 60px; right: 14px; }
    .enter-prompt { bottom: 150px; font-size: 12.5px; padding: 9px 13px; }
    .service-panel { max-height: 70vh; padding: 16px; }
    .service-icon { width: 42px; height: 42px; font-size: 23px; }
    .service-name { font-size: 15px; }
    .service-online { padding: 3px 7px; font-size: 9.5px; }
    .home-result-card { padding: 9px 10px 9px 12px; }
  }

  /* compact editor dock — leaves the planet visible while tools stay nearby */
  .editor {
    position: absolute; top: 14px; bottom: auto; left: 14px;
    transform: translateX(calc(-100% - 30px));
    width: min(340px, calc(100vw - 28px));
    padding: 14px;
    display: flex; flex-direction: column;
    background: var(--panel);
    backdrop-filter: blur(9px) saturate(1.04);
    -webkit-backdrop-filter: blur(9px) saturate(1.04);
    border: 1px solid var(--panel-b); border-radius: 8px;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 28px); pointer-events: auto; overflow: hidden; opacity: 0; visibility: hidden;
    transition: transform .4s var(--ease), opacity .4s var(--ease);
  }
  .editor.show { transform: none; opacity: 1; visibility: visible; }
  .editor.compact .editor-body { display: none; }
  .editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
  .editor-heading { min-width: 0; }
  .editor-title { font-weight: 800; font-size: 14px; color: var(--teal-d); white-space: nowrap; }
  .editor-state-line { margin-top: 3px; display: flex; align-items: center; gap: 6px; }
  .editor-save-state { font-size: 9.5px; font-weight: 700; color: var(--ink); opacity: .46; }
  .editor-save-state.error { color: #ad554e; opacity: .9; }
  .editor-save-state.saved { color: #4c8a52; opacity: .72; }
  .editor-quality {
    padding-left: 6px; border-left: 1px solid rgba(54,81,79,.14);
    font-size: 9px; line-height: 1; font-weight: 800; color: #687579;
  }
  .editor-quality.ready { color: #4c8058; }
  .editor-quality.review { color: #8f5d19; }
  .editor-quality.blocked { color: #a34740; }
  .editor-actions { display: flex; align-items: center; gap: 6px; flex: none; }
  .ed-btn {
    font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
    padding: 7px 12px; color: var(--ink);
    background: rgba(255,255,255,0.55); border: 1px solid var(--panel-b);
    border-radius: 11px; transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .ed-btn:hover { background: #fff; transform: translateY(-1px); }
  .ed-btn:active { transform: translateY(0) scale(.96); }
  .ed-done { background: var(--teal); color: #fff; border-color: var(--teal); }
  .ed-done:hover { background: var(--teal-d); }
  .ed-btn.danger { color: #ad554e; }
  .editor-collapse { padding-inline: 9px; font-size: 11px; }
  .editor-history { width: 31px; padding-inline: 0; font-size: 16px; }

  .editor-body {
    min-height: 0; overflow: auto; margin-top: 12px; padding-right: 2px;
    scrollbar-width: thin; scrollbar-color: rgba(54,81,79,.18) transparent;
  }
  .editor-local-notice {
    margin: 0 0 9px; padding: 8px 9px; border-radius: 6px;
    border: 1px solid rgba(54,81,79,.12); border-left: 3px solid #d4aa38;
    background: rgba(255,249,225,.72); color: var(--ink);
    font-size: 9.5px; line-height: 1.45; font-weight: 700;
  }
  .editor-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px;
    border-radius: 12px; background: rgba(54,81,79,.07);
  }
  .editor-tabs button {
    min-width: 0; padding: 8px 10px; border: 0; border-radius: 9px;
    color: var(--ink); background: transparent; font: inherit; font-size: 12px; font-weight: 800; line-height: 1;
    cursor: pointer; opacity: .55;
  }
  .editor-tabs button.active {
    opacity: 1; color: var(--teal-d); background: rgba(255,255,255,.78);
    box-shadow: 0 3px 9px rgba(54,81,79,.08);
  }
  .editor-context { margin: 9px 2px 10px; font-size: 10.5px; line-height: 1.45; color: var(--ink); opacity: .58; }
  .editor-panel[hidden] { display: none; }

  .palette { display: grid; gap: 6px; }
  .pal-group { padding: 0; border: 1px solid rgba(54,81,79,.08); border-radius: 12px; overflow: hidden; }
  .pal-items { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pal-group.collapsed .pal-items { display: none; }
  .pal-cat {
    width: 100%; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 800; color: var(--teal-d); text-align: left;
    letter-spacing: 0; border: 0; background: rgba(255,255,255,.28); cursor: pointer;
  }
  .pal-cat::after { content: '−'; font-size: 13px; opacity: .46; }
  .pal-group.collapsed .pal-cat::after { content: '+'; }
  .pal-count {
    margin-left: auto; margin-right: 7px; min-width: 18px; padding: 2px 5px;
    border-radius: 999px; text-align: center; font-size: 8px; background: rgba(129,191,188,.15); opacity: .72;
  }
  .pal-items { padding: 8px; background: rgba(255,255,255,.16); }
  .pal-btn {
    font: inherit; font-weight: 700; font-size: 12px; cursor: pointer;
    padding: 6px 10px; color: var(--ink);
    background: rgba(129,191,188,.14); border: 1px solid rgba(129,191,188,.3);
    border-radius: 10px; transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .pal-btn:hover { background: rgba(129,191,188,.28); transform: translateY(-1px); }
  .pal-btn:active { transform: translateY(0) scale(.95); }

  .editor-tool-section {
    padding: 11px; border: 1px solid rgba(54,81,79,.08); border-radius: 12px;
    background: rgba(255,255,255,.2);
  }
  .editor-tool-section + .editor-tool-section { margin-top: 8px; }
  .editor-tool-title { color: var(--teal-d); font-size: 11.5px; font-weight: 800; }
  .editor-tool-section > p { margin: 3px 0 9px; color: var(--ink); font-size: 9.5px; line-height: 1.4; opacity: .5; }
  .editor-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .editor-tool-grid .pal-btn { min-width: 0; text-align: left; }
  .editor-tool-grid.two-columns .pal-btn { text-align: center; }

  .editor-structure {
    margin-top: 8px; padding: 0 11px 11px;
    border: 1px solid rgba(54,81,79,.08); border-radius: 12px;
    background: rgba(235,243,241,.46);
  }
  .editor-structure summary {
    padding: 10px 0; color: var(--teal-d); font-size: 10.5px; font-weight: 800;
    cursor: pointer; list-style: none;
  }
  .editor-structure summary::-webkit-details-marker { display: none; }
  .editor-structure summary::after { content: '  ▸'; opacity: .45; }
  .editor-structure[open] summary::after { content: '  ▾'; }

  .editor-manage { margin-top: 9px; border-top: 1px solid rgba(54,81,79,.1); }
  .editor-manage summary {
    padding: 10px 2px 7px; color: var(--teal-d); font-size: 10.5px; font-weight: 800;
    cursor: pointer; list-style: none;
  }
  .editor-manage summary::-webkit-details-marker { display: none; }
  .editor-manage summary::after { content: '  ▸'; opacity: .45; }
  .editor-manage[open] summary::after { content: '  ▾'; }
  .layout-audit {
    margin-bottom: 7px; padding: 8px 9px; border-radius: 6px;
    background: rgba(245,249,248,.92); border: 1px solid rgba(54,81,79,.11);
    border-left: 3px solid #8ea3a5;
  }
  .layout-audit[data-state="ready"] { border-left-color: #68a274; }
  .layout-audit[data-state="review"] { border-left-color: #d99c3f; }
  .layout-audit[data-state="blocked"] { border-left-color: #c0584f; }
  .layout-audit > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .layout-audit span { font-size: 8px; font-weight: 800; letter-spacing: 0; color: var(--teal-d); }
  .layout-audit strong { font-size: 15px; line-height: 1; color: var(--ink); }
  .layout-audit p { margin-top: 5px; font-size: 9px; line-height: 1.35; opacity: .58; }
  .editor-manage-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
  .editor-manage-actions .ed-btn { padding-inline: 6px; font-size: 10.5px; }
  .editor-manage > p { margin: 7px 2px 2px; font-size: 9px; line-height: 1.4; opacity: .48; }
  .editor-shortcuts {
    margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(54,81,79,.08);
    color: var(--ink); font-size: 9px; line-height: 1.55; opacity: .48;
  }
  .editor-shortcuts kbd { font: inherit; font-weight: 800; }
  .editor-shortcuts span { margin: 0 2px; }

  /* floating inspector for the selected object (bottom-center) */
  .inspector {
    position: absolute; bottom: 20px; left: 50%;
    transform: translate(-50%, 130%);
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--panel);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid var(--panel-b); border-radius: 16px;
    box-shadow: var(--shadow);
    pointer-events: auto; opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .inspector.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
  .insp-name { font-weight: 800; font-size: 13.5px; color: var(--teal-d); }
  .insp-variants { display: flex; gap: 5px; }
  .insp-variants:empty { display: none; }
  .insp-swatch {
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.85);
    border-top-width: 8px;              /* roof color peeks through on cottages */
    cursor: pointer; padding: 0;
    box-shadow: 0 2px 6px rgba(90,120,118,.25);
    transition: transform .15s var(--ease);
  }
  .insp-swatch:hover { transform: translateY(-2px) scale(1.1); }
  .insp-row { display: flex; gap: 6px; }
  .insp-btn {
    width: 38px; height: 38px; font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.6); border: 1px solid var(--panel-b);
    border-radius: 11px; color: var(--ink);
    transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .insp-btn:hover { background: #fff; transform: translateY(-2px); }
  .insp-btn:active { transform: translateY(0) scale(.92); }
  .insp-del { color: #c0584f; }

  /* transient hint toast */
  .edit-hint {
    position: absolute; bottom: 80px; left: 50%;
    transform: translate(-50%, 8px);
    padding: 8px 16px; font-size: 12.5px; font-weight: 700;
    color: var(--ink); background: var(--panel);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-b); border-radius: 999px;
    box-shadow: var(--shadow);
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    max-width: calc(100vw - 32px); text-align: center;
  }
  .edit-hint.show { opacity: 1; transform: translate(-50%, 0); }

  .draw-btn { background: rgba(95,163,160,.16); border-color: rgba(95,163,160,.34); }
  .editor.drawing .draw-btn { opacity: .5; }
  .editor.drawing .draw-btn.active {
    opacity: 1; color: #fff; background: var(--teal); border-color: var(--teal);
    box-shadow: 0 5px 12px rgba(95,163,160,.25);
  }

  /* floating finish/cancel bar while drawing a path */
  .draw-bar {
    position: absolute; bottom: 20px; left: 50%;
    transform: translate(-50%, 130%);
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: var(--panel);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid var(--panel-b); border-radius: 16px;
    box-shadow: var(--shadow);
    pointer-events: auto; opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .draw-bar.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
  .draw-bar-info { font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .draw-bar-info b { color: var(--teal-d); }
  .ed-btn:disabled { opacity: .45; cursor: default; }

  .boot-retry {
    margin: 12px auto 0; padding: 8px 14px; pointer-events: auto; cursor: pointer;
    color: var(--ink); background: rgba(255,255,255,.78); border: 1px solid rgba(54,81,79,.22);
    border-radius: 999px; font: 800 12px/1.2 "Nunito", sans-serif;
  }
  .app-notice {
    position: fixed; z-index: 30; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%); max-width: min(560px, calc(100vw - 28px));
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    color: var(--ink); font: 700 11.5px/1.4 "Nunito", sans-serif;
    pointer-events: auto;
  }
  .app-notice[hidden] { display: none; }
  .app-notice button {
    flex: none; padding: 6px 10px; color: #fff; background: var(--teal-d);
    border: 0; border-radius: 999px; font: 800 10.5px/1 "Nunito", sans-serif; cursor: pointer;
  }

  /* when a path is selected, the inspector only offers delete */
  .inspector.path-selected .insp-rotL,
  .inspector.path-selected .insp-rotR,
  .inspector.path-selected .insp-smaller,
  .inspector.path-selected .insp-bigger { display: none; }
  .inspector.no-yaw .insp-rotL,
  .inspector.no-yaw .insp-rotR,
  .inspector.no-scale .insp-smaller,
  .inspector.no-scale .insp-bigger { display: none; }

  @media (max-width: 900px) and (min-width: 521px) {
    .hud { padding: 12px 14px; }
    .hud .task { display: none; }
    .agentbar {
      top: auto; bottom: 82px; left: 14px; width: 214px; padding: 8px 10px;
      max-height: calc(100dvh - 190px); overflow-y: auto;
    }
    .agentbar.collapsed .status-connection { display: none; }
    .agent-card, .service-panel, .team-panel {
      left: 14px; right: 14px; width: auto; min-width: 0;
      max-height: calc(100dvh - 120px);
    }
    .team-network { grid-template-columns: 1fr; }
    .team-columns { grid-template-columns: 1fr; }
    .ops-strip { width: min(500px, calc(100vw - 40px)); min-width: 0; }
  }

  @media (max-width: 520px) { .editor-structure { display: none; } }
  @media (max-width: 900px) {
    body.agent-detail-open .hud,
    body.agent-detail-open .weather,
    body.agent-detail-open .agentbar,
    body.agent-detail-open .ops-strip,
    body.service-detail-open .hud,
    body.service-detail-open .weather,
    body.service-detail-open .agentbar,
    body.service-detail-open .ops-strip,
    body.team-overview-open .hud,
    body.team-overview-open .weather,
    body.team-overview-open .agentbar,
    body.team-overview-open .ops-strip { display: none !important; }
    .agent-card {
      top: auto; left: 14px; right: 14px;
      bottom: max(14px, env(safe-area-inset-bottom)); width: auto;
      max-height: 62vh; overflow: auto;
      transform: translateY(18px) scale(.98);
    }
    .agent-card.show { transform: none; }
    .team-panel {
      top: 14px; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom));
      width: auto; max-height: none; padding: 18px 16px;
      border-radius: 8px; transform: translateY(18px) scale(.985);
    }
    .team-panel.show { transform: none; }
    .team-panel-head { padding-right: 20px; }
    .team-panel h2 { font-size: 20px; }
    .team-panel-summary { font-size: 11px; }
    .team-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .team-network, .team-handoffs, .team-columns { grid-template-columns: 1fr; }
    .service-panel {
      top: auto; left: 14px; right: 14px;
      bottom: max(14px, env(safe-area-inset-bottom)); width: auto;
      max-height: 72vh; transform: translateY(18px) scale(.98);
      border-radius: 8px;
    }
    .service-panel.show { transform: none; }
    .editor {
      top: auto; bottom: 0; left: 50%; width: 100%; max-height: 58vh; overflow: hidden;
      border-radius: 8px 8px 0 0;
      transform: translate(-50%, 110%);
      padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
    .editor.show { transform: translate(-50%, 0); }
    .editor.compact { bottom: 0; }
    .editor-body { max-height: calc(58vh - 58px); }
    .palette { display: grid; }
    .pal-group { display: block; padding: 0; }
    .pal-cat { width: 100%; text-align: left; padding: 9px 10px; }
    .pal-items { padding: 8px; }
    .editor-head { min-height: 38px; }
    .editor-title { font-size: 12.5px; }
    .editor-save-state { display: none; }
    .editor-collapse { font-size: 10.5px; }
    .editor-actions { gap: 4px; }
    .editor-history { display: grid; place-items: center; width: 30px; padding: 5px 0; }
    .ed-btn { padding: 6px 9px; font-size: 11.5px; }
    .pal-btn { font-size: 11px; padding: 5px 8px; }
    .insp-btn { width: 34px; height: 34px; font-size: 15px; }
    .inspector, .draw-bar { bottom: 78px; max-width: calc(100vw - 20px); }
    .inspector { gap: 7px; padding: 8px 10px; }
    .insp-name { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .edit-hint { bottom: 132px; }
    .draw-bar-info { font-size: 11.5px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
/* The notice stays readable without moving the planet or opening a service. */
.landmark-compass { flex:0 0 28px; width:28px; height:28px; pointer-events:auto; }
.compass-dial { position:relative; width:28px; height:28px; border:1px solid #bdcdc6; border-radius:50%; background:#f8faf6; }
.compass-pointer { position:absolute; top:50%; left:50%; width:0; height:0; transform:rotate(var(--bearing,0deg)); transition:transform .12s linear; }
.compass-pointer[hidden] { display:none; }
.compass-pointer::after { content:""; position:absolute; left:-.5px; bottom:1px; width:1px; height:6px; background:currentColor; }
.compass-pointer span, .compass-pointer i { position:absolute; width:10px; left:-5px; text-align:center; font-size:7px; font-weight:800; font-style:normal; line-height:8px; transform:rotate(calc(-1 * var(--bearing,0deg))); }
.compass-pointer span { top:-13px; }
.compass-pointer i { top:5px; color:#788c83; }
.compass-north { color:#b44f64; }
.compass-lighthouse { color:#3c7b9b; }
.compass-lighthouse::after { height:4px; }
.compass-lighthouse span { top:-8px; font-size:5px; }
.compass-center { position:absolute; left:12px; top:12px; width:2px; height:2px; border-radius:50%; background:#39574e; }
body.editing .landmark-compass, body.agent-detail-open .landmark-compass,
body.service-detail-open .landmark-compass, body.team-overview-open .landmark-compass { display:none; }
@media (min-width:361px) and (max-width:440px) {
  .weather { gap:4px; padding:6px 8px; }
  .weather .wx-icon { display: inline; font-size: 14px; }
  .weather .wx-temp { display: none; }
  .weather .wx-time { padding-left:5px; }
}
@media (max-width:360px) {
  .climate-panel { top: 198px; right: 14px; max-height: calc(100dvh - 218px); }
}
@media (prefers-reduced-motion:reduce) { .compass-pointer { transition:none; } }
.board-launch { position:fixed; right:18px; top:66px; width:36px; height:36px; border:1px solid #d6dfda; border-radius:6px; background:#f8faf8; color:#49665d; font-size:21px; cursor:pointer; pointer-events:auto; }
body.explore-mode .board-launch { top:243px; width:48px; height:48px; }
@media (max-width:520px) { body.explore-mode .board-launch { top:218px; right:14px; width:43px; height:43px; } }
.village-board-dialog { box-sizing:border-box; margin:auto; width:min(520px, calc(100% - 28px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid #c5d2c9; border-radius:8px; color:#36514f; background:#f6f8f5; box-shadow:0 16px 48px #243b4933; }
.village-board-dialog::backdrop { background:#243b4966; }
.village-board-dialog [hidden] { display:none !important; }
.village-board-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:11px; color:#6e8076; }
.village-board-dialog h2 { margin:14px 0 20px; font-size:24px; line-height:1.4; overflow-wrap:anywhere; letter-spacing:0; }
.village-board-dialog .board-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.8; min-height:100px; }
.village-board-dialog button { min-height:38px; border:1px solid #c5d2c9; border-radius:5px; background:#fff; color:#36514f; padding:8px 12px; cursor:pointer; font:inherit; font-size:13px; }
.village-board-dialog button:disabled { opacity:0.45; cursor:default; }
.village-board-dialog button[type=submit] { color:#fff; background:#4f776b; }
.village-board-dialog #boardClose { width:38px; font-size:22px; padding:0; }
.village-board-dialog label { display:block; font-size:13px; margin:14px 0 6px; }
.village-board-dialog input, .village-board-dialog textarea { box-sizing:border-box; width:100%; border:1px solid #b5c6bd; border-radius:5px; padding:10px; font:inherit; font-size:16px; line-height:1.5; background:#fff; color:#304c42; }
.village-board-dialog textarea { resize:vertical; min-height:160px; }
.village-board-dialog .board-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:22px; }
.village-board-dialog .board-counter { text-align:right; font-size:12px; margin-top:4px; }
.village-board-dialog .board-storage, .village-board-dialog .board-status { font-size:12px; line-height:1.6; color:#62756a; overflow-wrap:anywhere; }
.village-board-dialog :focus-visible, .board-launch:focus-visible { outline:3px solid #73aaa0; outline-offset:3px; }

/* Compact controls reserve space for the planet, including phone landscape. */
@media (any-pointer: coarse), (max-width: 520px) {
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mode-switch button, .agent-chip, .patrol-toggle, .team-overview-btn,
  .recent-results-btn, .agentbar-title, .climate-panel select { min-height: 44px; }
  .status-refresh, .paper-close, .agent-close { min-width: 44px; min-height: 44px; }
  .weather .climate-toggle, .weather .sound-toggle { width: 36px; height: 36px; margin: 0; }
  .board-launch { width: 44px; height: 44px; }
  .agentbar { overflow-y: auto; overscroll-behavior: contain; }
  .stick { left: max(14px, env(safe-area-inset-left)); width: 104px; height: 104px; }
  .stick .knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .mobile-actions { right: max(14px, env(safe-area-inset-right)); gap: 8px; }
  .mobile-actions button { width: 48px; height: 48px; font-size: 22px; }
  .emojibar { bottom: max(92px, calc(env(safe-area-inset-bottom) + 76px)); }
  body.explore-mode .agentbar, body.explore-mode .ops-strip { display: none !important; }
  .agent-card, .service-panel, .paper-panel, .team-panel, .climate-panel { overscroll-behavior: contain; }
}
@media (max-width: 520px) {
  :root { --mobile-top: max(12px, env(safe-area-inset-top)); }
  .hud { top: var(--mobile-top); padding: 10px; min-width: 0; width: min(220px, calc(100vw - 192px)); }
  .hud .brand { font-size: 12px; }
  .hud .task { display: none; }
  .mode-switch { margin-top: 8px; }
  .mode-switch button { padding: 5px 6px; }
  .weather { top: var(--mobile-top); gap: 3px; padding: 4px; }
  .weather .wx-temp { display: none; }
  .weather .wx-time { padding-left: 4px; font-size: 12px; }
  .weather .wx-icon { display: inline; font-size: 15px; }
  .agentbar { max-height: calc(100dvh - 205px); }
  .agent-card { max-height: 62dvh; }
  .service-panel { max-height: 72dvh; }
  .board-launch, .climate-panel { top: calc(var(--mobile-top) + 54px); }
  .climate-panel { max-height: calc(100dvh - var(--mobile-top) - 70px); }
  .visitor-rail { top: calc(var(--mobile-top) + 50px); }
  body.explore-mode .board-launch { top: calc(var(--mobile-top) + 206px); }
  .paper-panel { top: calc(var(--mobile-top) + 104px); max-height: calc(100dvh - var(--mobile-top) - 120px); }
  .emojibar { flex-direction: row; gap: 4px; }
  .emojibar button { width: 40px; height: 40px; font-size: 19px; }
}
@media (max-width: 360px) {
  .hud { width: calc(100vw - 28px); }
  .weather { top: calc(max(12px, env(safe-area-inset-top)) + 96px); left: 14px; right: auto; }
  .board-launch { top: calc(max(12px, env(safe-area-inset-top)) + 96px); right: 14px; }
  .climate-panel { top: calc(max(12px, env(safe-area-inset-top)) + 144px); max-height: calc(100dvh - 176px); }
  body.explore-mode .visitor-rail { top: calc(var(--mobile-top) + 152px); }
  body.explore-mode .board-launch { top: calc(var(--mobile-top) + 302px); }
}
@media (max-width: 950px) and (max-height: 500px) {
  :root { --mobile-top: max(10px, env(safe-area-inset-top)); }
  body.explore-mode .agentbar { display: none !important; }
  .hud { top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); width: 220px; padding: 8px 10px; }
  .hud .task, .help, .intro-hint { display: none; }
  .weather { top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .visitor-rail, body.explore-mode .visitor-rail { top: calc(var(--mobile-top) + 56px); right: max(12px, env(safe-area-inset-right)); flex-direction: row; gap: 6px; }
  .visitor-rail button { width: 44px; height: 44px; }
  body.explore-mode .board-launch { top: calc(var(--mobile-top) + 56px); right: calc(max(12px, env(safe-area-inset-right)) + 150px); width: 44px; height: 44px; }
  .emojibar { bottom: 92px; right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  .emojibar button { width: 44px; height: 44px; font-size: 20px; }
  .agent-card, .service-panel, .team-panel { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); max-height: calc(100dvh - 24px); }
  .paper-panel, .climate-panel { top: calc(var(--mobile-top) + 56px); max-height: calc(100dvh - var(--mobile-top) - 70px); }
  .intro-content { max-height: calc(100dvh - 24px); overflow-y: auto; margin: 12px 24px; }
  #intro h1 { font-size: 32px; }
  #intro p { margin-top: 8px; font-size: 12px; }
  .intro-actions { margin-top: 12px; }
}