:root{
  --bg0:#fbfdff; --bg1:#eef5ff; --bg2:#c8deff; --panel:rgba(255,255,255,.62); --panel-2:rgba(255,255,255,.40);
  --border:rgba(14,17,22,.10); --text:#152541; --muted:rgba(21,37,65,.64); --soft:rgba(21,37,65,.46);
}
body.night{
  --bg0:#04111f; --bg1:#091c33; --bg2:#06111f; --panel:rgba(255,255,255,.08); --panel-2:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.14); --text:#eef7ff; --muted:rgba(238,247,255,.68); --soft:rgba(238,247,255,.46);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:var(--text);
background:radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--bg2) 52%, transparent) 0%, transparent 32%), linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 54%,var(--bg2) 100%);}
body::before{content:"";position:fixed;inset:-12%;pointer-events:none;background:radial-gradient(circle at 50% 48%, rgba(255,255,255,.14), transparent 12%),radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--accent, #7dcfff) 18%, transparent) 0%, transparent 28%);opacity:.85;animation:breathe 12s ease-in-out infinite;}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.ui{position:relative;z-index:2;min-height:100vh;padding:16px;pointer-events:none}
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;margin-bottom:14px}
.brand{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:.55em;font-size:12px;color:var(--text);text-decoration:none;pointer-events:auto}
.center-strip{justify-self:center;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.06)}
.node-badge,.clock,.level-badge{font-family:"Space Grotesk",Inter,sans-serif;white-space:nowrap}
.node-badge{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.level-badge{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.clock{font-size:14px;letter-spacing:.16em;color:var(--text)}
.controls{justify-self:end;display:flex;gap:10px;align-items:center;pointer-events:auto}
.btn,.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;min-width:50px;padding:0 16px;border-radius:17px;border:1px solid var(--border);background:var(--panel);color:var(--text);text-decoration:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.06)}
.btn:hover,.mini-btn:hover{background:var(--panel-2)}
.mini-btn svg{width:32px;height:32px}
.layout{display:grid;grid-template-columns:minmax(250px, 360px) 1fr minmax(240px, 320px);gap:16px;align-items:start;min-height:calc(100vh - 120px)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:28px;padding:20px 18px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.06);pointer-events:auto}
.left-panel h1{margin:0 0 10px;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(28px,2.2vw,38px);line-height:1.02;letter-spacing:-.03em}
.kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.microtype{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.lead{font-size:15px;line-height:1.62;color:var(--muted);margin:0 0 14px}
.bodycopy{font-size:14px;line-height:1.68;color:var(--muted);margin:0}
.center-panel{position:relative;min-height:100%;pointer-events:none}
.center-note{position:absolute;left:50%;top:0;transform:translateX(-50%);padding:8px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.right-panel h2{margin:0 0 10px;font-family:"Space Grotesk",Inter,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.right-panel p{margin:0 0 14px;font-size:13px;line-height:1.58;color:var(--muted)}
.notes{padding:0;margin:0 0 16px;list-style:none;display:grid;gap:8px}
.notes li{position:relative;padding-left:15px;font-size:13px;line-height:1.5;color:var(--muted)}
.notes li::before{content:"•";position:absolute;left:0;top:-1px;color:var(--accent,#7dcfff);font-size:18px}
.quote{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-family:"Space Grotesk",Inter,sans-serif;font-size:11px;line-height:1.7;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.portal-card{margin-top:16px;padding:14px;border-radius:20px;border:1px solid color-mix(in srgb, var(--accent, #7dcfff) 30%, var(--border));background:color-mix(in srgb, var(--panel) 88%, var(--accent,#7dcfff) 12%)}
.portal-card .portal-line{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.portal-card .portal-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;background:color-mix(in srgb, var(--accent,#7dcfff) 18%, var(--panel) 82%);border:1px solid color-mix(in srgb, var(--accent,#7dcfff) 44%, var(--border));font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);text-decoration:none}
.footer{position:fixed;left:16px;right:16px;bottom:12px;z-index:3;text-align:center;font-size:9px;color:var(--soft);letter-spacing:.22em;text-transform:uppercase;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.04);opacity:1}}
@media (max-width: 1180px){.layout{grid-template-columns:320px 1fr}.right-panel{grid-column:1 / -1;max-width:540px}}
@media (max-width: 900px){html,body{overflow:auto}.topbar{grid-template-columns:1fr;align-items:start}.center-strip,.controls{justify-self:start}.layout{display:block}.left-panel,.right-panel{margin-bottom:14px}.center-panel{min-height:68vh}.center-note{left:14px;top:10px;transform:none}.footer{position:static;padding:0 0 10px;margin-top:14px}}
@media (max-width: 640px){.ui{padding:12px}.controls{flex-wrap:wrap}.btn,.mini-btn{height:46px;border-radius:16px}.center-strip{padding:9px 12px}.clock{font-size:12px}}

/* v17.1 living dream additions */
.dream-depth{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at var(--dream-x,50%) var(--dream-y,50%), color-mix(in srgb, var(--accent,#7dcfff) 14%, transparent), transparent 24%),
    radial-gradient(circle at 50% 62%, rgba(255,255,255,.045), transparent 28%);
  mix-blend-mode:screen; opacity:.9;
}
.thought-ribbon{
  position:fixed; left:18px; right:18px; top:156px; z-index:3;
  display:flex; justify-content:center; pointer-events:none;
}
.thought-ribbon-inner{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:920px;pointer-events:auto}
.thought-ribbon{opacity:.96}
.thought-chip{
  appearance:none; -webkit-appearance:none; cursor:pointer; pointer-events:auto;
  border:1px solid var(--border); background:var(--panel); color:var(--muted);
  border-radius:999px; padding:8px 12px; min-height:34px; font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:.82;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.dream-oracle{
  position:fixed; left:50%; bottom:46px; transform:translateX(-50%); z-index:4;
  max-width:min(780px, calc(100vw - 40px)); min-height:42px; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:12px 18px;
  border-radius:999px; border:1px solid color-mix(in srgb, var(--accent,#7dcfff) 30%, var(--border));
  background:color-mix(in srgb, var(--panel) 86%, var(--accent,#7dcfff) 14%);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  color:var(--text); font-family:"Space Grotesk",Inter,sans-serif;
  font-size:11px; line-height:1.5; letter-spacing:.18em; text-transform:uppercase;
  pointer-events:none; opacity:.93; box-shadow:0 18px 80px rgba(0,0,0,.08);
}
.dream-oracle.changing{animation:oraclePulse .62s ease both}
.thought-chip:hover{transform:translateY(-1px);opacity:1;border-color:color-mix(in srgb, var(--accent,#7dcfff) 35%, var(--border));color:var(--text)}
.thought-chip:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb, var(--accent,#7dcfff) 30%, white), 0 10px 30px rgba(0,0,0,.08)}
.thought-chip.active{opacity:1;color:var(--text);background:color-mix(in srgb, var(--panel) 80%, var(--accent,#7dcfff) 20%);border-color:color-mix(in srgb, var(--accent,#7dcfff) 42%, var(--border));box-shadow:0 12px 34px rgba(0,0,0,.08)}
.thought-chip.active-wonder{background:color-mix(in srgb, var(--panel) 76%, #ffffff 24%)}
.thought-chip.active-earth{background:color-mix(in srgb, var(--panel) 78%, #c5e7ff 22%)}
.thought-chip.active-future{background:color-mix(in srgb, var(--panel) 70%, #8fd4ff 30%)}
.thought-chip.active-return{background:color-mix(in srgb, var(--panel) 86%, #ffffff 14%)}
.thought-chip.active-signal,.thought-chip.signal-hot{color:#9a0018;background:rgba(255,214,222,.92);border-color:rgba(255,90,120,.48);box-shadow:0 14px 34px rgba(255,86,120,.18);animation:signalChipPulse .86s ease-in-out infinite alternate}
@keyframes signalChipPulse{0%{transform:scale(1);box-shadow:0 10px 24px rgba(255,86,120,.12)}100%{transform:scale(1.04);box-shadow:0 18px 44px rgba(255,86,120,.28)}}
.panel{transition:transform .35s ease, border-color .35s ease, background .35s ease}
.panel:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--accent,#7dcfff) 35%, var(--border))}
.left-panel h1{text-shadow:0 14px 60px color-mix(in srgb, var(--accent,#7dcfff) 18%, transparent)}
@keyframes oraclePulse{
  0%{transform:translateX(-50%) translateY(8px) scale(.98);opacity:.25;filter:blur(6px)}
  100%{transform:translateX(-50%) translateY(0) scale(1);opacity:.93;filter:blur(0)}
}
@media (max-width:900px){
  .thought-ribbon{position:static;margin:8px 0 14px}
  .dream-oracle{left:12px;right:12px;bottom:34px;transform:none;max-width:none;border-radius:22px}
  @keyframes oraclePulse{
    0%{transform:translateY(8px) scale(.98);opacity:.25;filter:blur(6px)}
    100%{transform:translateY(0) scale(1);opacity:.93;filter:blur(0)}
  }
}


/* v17.5 responsive + browser compatibility for archive pages */
html, body {
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
canvas {
  touch-action: none;
}
button, a {
  -webkit-tap-highlight-color: transparent;
}
.ui {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.footer {
  bottom: max(12px, env(safe-area-inset-bottom));
}
@supports not (color: color-mix(in srgb, white, black)) {
  body::before {
    background:
      radial-gradient(circle at 50% 48%, rgba(255,255,255,.14), transparent 12%),
      radial-gradient(circle at 50% 58%, rgba(11,124,255,.12), transparent 28%);
  }
  .portal-card {
    border-color: rgba(11,124,255,.22);
    background: rgba(255,255,255,.52);
  }
  body.night .portal-card {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
  }
  .dream-depth {
    background:
      radial-gradient(circle at var(--dream-x,50%) var(--dream-y,50%), rgba(11,124,255,.10), transparent 24%),
      radial-gradient(circle at 50% 62%, rgba(255,255,255,.045), transparent 28%);
  }
  .dream-oracle {
    border-color: rgba(11,124,255,.22);
    background: rgba(255,255,255,.66);
  }
  body.night .dream-oracle {
    background: rgba(255,255,255,.10);
  }
}
@media (min-width: 1500px) {
  .layout {
    max-width: 1680px;
    margin: 0 auto;
  }
}
@media (max-width: 1180px) {
  .layout {
    grid-template-columns: minmax(260px, 340px) 1fr;
  }
  .right-panel {
    grid-column: 1 / -1;
    max-width: 620px;
    justify-self: end;
  }
}
@media (max-width: 900px) {
  html, body {
    overflow: auto;
    min-height: 100dvh;
  }
  .ui {
    min-height: auto;
    padding: 12px 12px 88px;
  }
  .topbar {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  .brand,
  .center-strip,
  .controls {
    justify-self: center;
  }
  .controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .layout {
    display: flex;
    flex-direction: column;
    min-height: auto;
    gap: 12px;
  }
  .center-panel {
    order: 1;
    width: 100%;
    min-height: 58dvh;
  }
  .left-panel {
    order: 2;
  }
  .right-panel {
    order: 3;
    width: 100%;
    max-width: none;
  }
  .panel {
    border-radius: 22px;
    padding: 16px 15px;
  }
  .left-panel h1 {
    font-size: clamp(24px, 8vw, 34px);
  }
  .lead {
    font-size: 14px;
  }
  .bodycopy,
  .right-panel p,
  .notes li {
    font-size: 13px;
  }
  .center-note {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    text-align: center;
    max-width: calc(100vw - 36px);
  }
  .thought-ribbon {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 0 12px;
    order: 0;
  }
  .thought-chip {
    font-size: 8px;
    padding: 7px 9px;
    min-height: 32px;
  }
  .dream-oracle {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(34px, env(safe-area-inset-bottom));
    transform: none;
    max-width: none;
    border-radius: 18px;
    font-size: 9px;
    letter-spacing: .14em;
  }
  .footer {
    position: fixed;
    left: 12px;
    right: 12px;
    font-size: 8px;
  }
}
@media (max-width: 520px) {
  .brand {
    letter-spacing: .48em;
    padding-left: .48em;
  }
  .center-strip {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 18px;
    gap: 7px;
  }
  .clock {
    font-size: 12px;
  }
  .btn, .mini-btn {
    height: 42px;
    min-width: 42px;
    padding: 0 11px;
    border-radius: 14px;
    font-size: 9px;
  }
  .center-panel {
    min-height: 52dvh;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .layout {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 10px;
  }
  .center-panel {
    min-height: calc(100dvh - 112px);
  }
  .panel {
    max-height: calc(100dvh - 112px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dream-oracle {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  .dream-oracle.changing {
    animation: none !important;
  }
}

/* v17.7 polished chip controls */
.thought-ribbon{top:154px;z-index:5}
.thought-ribbon-inner{max-width:min(920px, calc(100vw - 48px))}
.thought-chip{user-select:none;-webkit-user-select:none}
.thought-chip.active-wonder{animation:wonderChipOrbit 1.8s ease-in-out infinite alternate}
.thought-chip.active-earth{box-shadow:0 14px 42px rgba(11,124,255,.12), inset 0 0 18px rgba(11,124,255,.10)}
.thought-chip.active-future{box-shadow:0 16px 48px rgba(11,124,255,.18)}
.thought-chip.active-return{box-shadow:0 8px 24px rgba(0,0,0,.04)}
@keyframes wonderChipOrbit{0%{transform:translateY(-1px) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}100%{transform:translateY(-1px) rotate(-1deg)}}
@media (max-width:900px){.thought-ribbon{top:auto}.thought-ribbon-inner{max-width:100%}}
@media (max-width:520px){.thought-ribbon-inner{gap:6px}.thought-chip{letter-spacing:.14em}}