/* Moved verbatim from the inline \3c style> in index.html (Phase 8).
   Font urls are now root-absolute because the fonts live in public/. */
/* ═══════════════ FONTS ═══════════════
   Self-hosted (Phase 1). Previously three <link> tags to Google Fonts, which
   meant the prototype misrendered offline and every visitor made a
   render-blocking third-party request.

   All five families are variable fonts, so one file per family covers every
   weight the app uses — 5 files, ~204 KB total, latin subset.

   No unicode-range is declared: with a single subset per family, restricting
   the range would only add a way for glyphs to silently fall back. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/spacegrotesk-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/fonts/jetbrainsmono-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/archivo-latin.woff2) format('woff2')}

/* ═══════════════ SHELL ═══════════════ */
*{box-sizing:border-box;margin:0;padding:0}
body{background:#08080c;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid #35F5D8;outline-offset:3px;border-radius:4px}

#chrome{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:rgba(8,8,12,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.09);flex-wrap:wrap}
#chrome .brandmark{font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.22em;color:#5d6478;margin-right:8px;text-transform:uppercase}
.tab{padding:8px 14px;border-radius:999px;font:600 12.5px Inter,sans-serif;color:#8a90a4;letter-spacing:.02em;
  border:1px solid transparent;transition:.22s;white-space:nowrap;display:flex;align-items:center;gap:8px}
.tab:hover{color:#e6e9f2;background:rgba(255,255,255,.05)}
.tab .dot{width:7px;height:7px;border-radius:9px;background:currentColor;opacity:.55}
.tab[aria-selected="true"]{color:#08080c;background:#e9ecf5;border-color:#fff}
.tab[aria-selected="true"] .dot{opacity:1}
.tab.d1 .dot{background:#35F5D8}.tab.d2 .dot{background:#C8862F}.tab.d3 .dot{background:#2C46FF}
#chrome .spacer{flex:1}
#sfx{padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font:600 11px 'JetBrains Mono',monospace;color:#8a90a4;letter-spacing:.08em}
#sfx[data-on="1"]{color:#35F5D8;border-color:rgba(53,245,216,.5)}
#stage{min-height:100vh}

/* floating XP toast */
.float{position:fixed;z-index:400;pointer-events:none;font:800 22px 'JetBrains Mono',monospace;
  animation:floatUp 1.15s cubic-bezier(.2,.7,.3,1) forwards;text-shadow:0 2px 20px rgba(0,0,0,.5)}
@keyframes floatUp{0%{transform:translate(-50%,0) scale(.7);opacity:0}
  18%{transform:translate(-50%,-14px) scale(1.14);opacity:1}100%{transform:translate(-50%,-90px) scale(1);opacity:0}}

/* level-up takeover */
#burst{position:fixed;inset:0;z-index:500;display:none;place-items:center;pointer-events:none}
#burst.on{display:grid}
#burst canvas{position:absolute;inset:0;width:100%;height:100%}
.lvcard{position:relative;pointer-events:auto;text-align:center;padding:34px 30px 26px;border-radius:26px;width:min(400px,88vw);
  animation:pop .5s cubic-bezier(.16,1.2,.3,1) both}
@keyframes pop{from{transform:scale(.82) translateY(24px);opacity:0}to{transform:none;opacity:1}}
.lvcard .eyebrow{font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.3em;opacity:.6}
.lvcard .num{font:900 78px/.85 Inter,sans-serif;letter-spacing:-.05em;margin:12px 0 4px}
.lvcard .drop{display:flex;gap:14px;align-items:center;text-align:left;padding:14px;border-radius:16px;margin-top:20px}
.lvcard .drop svg{width:52px;height:66px;flex:none}
.lvcard .drop b{display:block;font-size:14.5px}
.lvcard .drop span{font-size:11.5px;opacity:.65;line-height:1.4}
.lvcard .cta{margin-top:18px;width:100%;padding:13px;border-radius:12px;font:700 13px Inter,sans-serif;letter-spacing:.03em}
/* Level-up actions (two buttons since the "Equip now" option was added).
   Stacked rather than side by side: the power delta makes the primary label
   long, and two long labels in a row wrap badly at 390px. */
.lvcard .lvactions{display:flex;flex-direction:column;gap:9px}
.lvcard .lvactions .cta{margin-top:0}
.lvcard .lvactions .cta:first-child{margin-top:18px}
/* The delta rides inside the primary button, dimmed — it is supporting
   evidence for the choice, not the label. */
.lvcard .cta i{font-style:normal;font-weight:600;opacity:.62;margin-left:5px}
/* Secondary action: present and legible, but visibly not the default. */
.lvcard .cta.ghost{background:transparent!important;border:1px solid currentColor;opacity:.72;font-weight:600}
.lvcard .cta.ghost:hover{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.06s!important}}

/* ═══════════════ SHARED AVATAR RIG ═══════════════ */
.rig{perspective:900px;display:grid;place-items:center;touch-action:pan-y}
.hero{width:100%;height:auto;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,1.5,.4,1);cursor:grab}
.rig.dragging .hero{transition:none;cursor:grabbing}
.hero.idle{animation:bob 4.2s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.hero.equipflash{animation:eq .5s ease}
@keyframes eq{0%{filter:none}30%{filter:brightness(1.9) saturate(.6)}100%{filter:none}}
.sk-pants{fill:var(--fig-b)}.sk-boot{fill:var(--fig-c)}.sk-torso{fill:var(--fig-a)}
.sk-skin{fill:var(--skin)}.sk-arm{stroke:var(--skin);fill:none;stroke-width:13;stroke-linecap:round}
.sk-hair{fill:var(--fig-c)}.sk-face{fill:none;stroke:var(--face);stroke-width:2.6;stroke-linecap:round}
.sk-eye{fill:var(--face)}
[data-gear]{transform-box:fill-box;transform-origin:center;animation:gearIn .42s cubic-bezier(.2,1.4,.4,1)}
@keyframes gearIn{from{opacity:0;scale:.72}to{opacity:1;scale:1}}

/* ═══════════════════════════════════════════════
   DIRECTION 1 — NIGHTFALL   (signal / neon HUD)
   ═══════════════════════════════════════════════ */
.t1{--void:#06070E;--panel:#0E1120;--line:rgba(255,255,255,.09);--cy:#35F5D8;--vi:#8B5CFF;--hot:#FF4D8D;
  --txt:#E7EAF5;--dim:#6C7391;--skin:#F0BE9B;--fig-a:#2A3050;--fig-b:#1B2038;--fig-c:#141830;--face:#0B0E1A;
  background:var(--void);color:var(--txt);font-family:'Space Grotesk',sans-serif;min-height:100vh;position:relative}
.t1:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 520px at 18% 8%,rgba(139,92,255,.20),transparent 62%),
             radial-gradient(700px 560px at 88% 88%,rgba(53,245,216,.14),transparent 62%),
             repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.022) 39px 40px),
             repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.022) 39px 40px)}
.t1 .wrap{position:relative;max-width:1220px;margin:0 auto;padding:26px 20px 90px}
.t1 .topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.t1 .avatar-chip{width:38px;height:38px;border-radius:12px;background:linear-gradient(140deg,var(--vi),var(--cy));
  display:grid;place-items:center;font:700 14px 'Space Grotesk';color:#07080f}
/* The name is a control now (2026-08-21): tapping it opens your profile and
   settings. Styled to stay looking like the name it already was — a topbar
   that suddenly grows a button chip reads as an advert. The affordance is
   the cog and the hover, not a box. min-height keeps it a real touch
   target at 390px. */
.t1 .who{display:flex;align-items:center;gap:9px;min-height:44px;padding:2px 8px 2px 0;
  background:none;border:0;border-radius:10px;color:inherit;text-align:left;cursor:pointer;
  font:inherit}
.t1 .who:hover{background:rgba(255,255,255,.05)}
.t1 .who:focus-visible{outline:2px solid var(--acc,#35F5D8);outline-offset:2px}
.t1 .who .who-cog{font-style:normal;font-size:12px;color:var(--dim);opacity:.7;
  transition:opacity .15s,transform .15s}
.t1 .who:hover .who-cog{opacity:1;transform:rotate(30deg)}
@media (prefers-reduced-motion:reduce){.t1 .who .who-cog{transition:none}
  .t1 .who:hover .who-cog{transform:none}}
/* The name stays STACKED over the handle, as it was before this became a
   control. Making .who a flex row put them side by side, which is a visual
   redesign nobody asked for — the ask was an entry point to settings, not a
   different topbar. The flex row is the id block and the cog. */
.t1 .who-id{display:block}
.t1 .who b{display:block;font-size:14.5px;letter-spacing:-.01em}
.t1 .who span{font:400 11px 'JetBrains Mono',monospace;color:var(--dim);letter-spacing:.08em}
.t1 .streak{margin-left:auto;display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,77,141,.35);background:rgba(255,77,141,.09);font:700 12px 'JetBrains Mono';color:#FF8FB4}
.t1 .streak i{font-style:normal;filter:drop-shadow(0 0 8px rgba(255,77,141,.7))}

.t1 .xpwrap{padding:18px 20px 20px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));backdrop-filter:blur(10px);margin-bottom:20px}
.t1 .xphead{display:flex;align-items:flex-end;gap:14px;margin-bottom:13px}
.t1 .lvlbox{display:flex;align-items:baseline;gap:8px}
.t1 .lvlbox u{text-decoration:none;font:400 10px 'JetBrains Mono';letter-spacing:.3em;color:var(--dim)}
.t1 .lvlbox strong{font:700 40px/1 'Space Grotesk';letter-spacing:-.04em;
  background:linear-gradient(120deg,#fff,var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent}
.t1 .xpnums{margin-left:auto;font:700 12px 'JetBrains Mono';color:var(--dim)}
.t1 .xpnums em{font-style:normal;color:var(--cy)}
.t1 .track{position:relative;height:15px;border-radius:99px;background:#0A0D1A;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.t1 .track:after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 21px,rgba(6,7,14,.85) 21px 24px)}
.t1 .fill{position:absolute;inset:0;width:0;border-radius:99px;transition:width 1.1s cubic-bezier(.2,.9,.25,1);
  background:linear-gradient(90deg,var(--vi),var(--cy));box-shadow:0 0 22px rgba(53,245,216,.55)}
.t1 .fill:after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;
  background:linear-gradient(90deg,transparent,#fff);opacity:.75;filter:blur(3px)}
.t1 .nextup{margin-top:9px;font:400 11px 'JetBrains Mono';color:var(--dim);letter-spacing:.04em}
.t1 .nextup b{color:var(--txt);font-weight:700}

.t1 .grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px}
@media(max-width:900px){.t1 .grid{grid-template-columns:1fr}}
.t1 .card{border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);padding:18px}
.t1 .lbl{font:400 10px 'JetBrains Mono';letter-spacing:.28em;color:var(--dim);text-transform:uppercase;margin-bottom:14px;display:flex;gap:10px;align-items:center}
.t1 .lbl:after{content:"";flex:1;height:1px;background:var(--line)}

.t1 .chamber{position:relative;padding:8px 0 0;border-radius:16px;overflow:hidden;
  background:radial-gradient(320px 240px at 50% 34%,rgba(139,92,255,.28),transparent 70%)}
.t1 .rig{padding:6px 0 4px}
.t1 .hero{max-width:230px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.t1 .dais{height:66px;margin-top:-26px;position:relative}
.t1 .dais i{position:absolute;left:50%;top:8px;translate:-50% 0;width:190px;height:44px;border-radius:50%;
  border:1px solid rgba(53,245,216,.45);box-shadow:0 0 40px rgba(53,245,216,.28),inset 0 0 24px rgba(53,245,216,.16)}
.t1 .dais i:nth-child(2){width:250px;height:56px;top:2px;opacity:.35;animation:spin 9s linear infinite;border-style:dashed}
@keyframes spin{to{rotate:360deg}}
.t1 .slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.t1 .slot{aspect-ratio:1;border-radius:13px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.03);
  display:grid;place-items:center;position:relative;transition:.2s}
.t1 .slot span{position:absolute;bottom:5px;font:400 8px 'JetBrains Mono';letter-spacing:.14em;color:var(--dim)}
.t1 .slot svg{width:30px;height:38px;margin-bottom:6px}
.t1 .slot.filled{border-style:solid;border-color:var(--rc);background:color-mix(in srgb,var(--rc) 13%,transparent);box-shadow:0 0 18px -6px var(--rc)}
.t1 .slot.filled:hover{transform:translateY(-2px)}

.t1 .gearscroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px}
.t1 .tile{position:relative;padding:9px 6px 26px;border-radius:14px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);display:grid;place-items:center;transition:.18s;text-align:center;overflow:hidden}
.t1 .tile:hover{transform:translateY(-3px);border-color:var(--rc);background:color-mix(in srgb,var(--rc) 12%,transparent)}
.t1 .tile svg{width:38px;height:48px}
.t1 .tile b{position:absolute;bottom:6px;left:0;right:0;font:600 9.5px Inter;color:#c9cee0;padding:0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t1 .tile:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--rc)}
.t1 .tile.on{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 18%,transparent);box-shadow:0 0 22px -8px var(--rc)}
.t1 .tile.lock{opacity:.32;filter:grayscale(1)}
.t1 .tile.lock:hover{transform:none}

.t1 .quest{position:relative;padding:16px 16px 15px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.01));margin-bottom:11px;overflow:hidden;transition:.2s}
.t1 .quest:hover{border-color:rgba(53,245,216,.4);transform:translateX(3px)}
/* tier owns the quest frame; comfort-zone reads from the pill, not the border */
.t1 .qtop{display:flex;gap:12px;align-items:flex-start}
.t1 .qtop h4{font:700 17px 'Space Grotesk';letter-spacing:-.02em}
.t1 .qtop p{font-size:12.5px;color:var(--dim);margin-top:3px;line-height:1.45}
.t1 .qmeta{margin-left:auto;text-align:right;flex:none}
.t1 .qmeta em{display:block;font:700 15px 'JetBrains Mono';color:var(--cy);font-style:normal}
.t1 .qmeta span{font:400 10px 'JetBrains Mono';color:var(--dim)}
.t1 .qfoot{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
.t1 .tag{font:600 10px 'JetBrains Mono';letter-spacing:.1em;padding:5px 9px;border-radius:7px;
  background:rgba(255,255,255,.06);color:var(--dim);border:1px solid var(--line)}
.t1 .tag.hot{background:rgba(255,77,141,.14);color:#FF8FB4;border-color:rgba(255,77,141,.3)}
.t1 .go{margin-left:auto;padding:9px 16px;border-radius:10px;font:700 12px 'Space Grotesk';letter-spacing:.03em;
  background:linear-gradient(120deg,var(--cy),#6EE7FF);color:#04140F;transition:.18s}
.t1 .go:hover{box-shadow:0 0 26px -4px var(--cy);transform:translateY(-1px)}
.t1 .party{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.t1 .pal{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:11.5px;color:#b9bfd2}
.t1 .pal u{text-decoration:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:700 10px 'JetBrains Mono';color:#07080f}

/* ═══════════════════════════════════════════════
   DIRECTION 2 — FIELD LEDGER  (cartographer's kit)
   ═══════════════════════════════════════════════ */
.t2{--paper:#E7DFCB;--paper2:#F2ECDC;--ink:#191C16;--moss:#33553C;--ochre:#B87322;--rust:#8E3F22;
  --faded:#7C7663;--rule:rgba(25,28,22,.16);--skin:#E7B48D;--fig-a:#33553C;--fig-b:#4A4536;--fig-c:#2A2A22;--face:#191C16;
  background:var(--paper);color:var(--ink);font-family:Inter,sans-serif;min-height:100vh;position:relative}
.t2:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 25% 20%,rgba(51,85,60,.12),transparent 45%),
    repeating-radial-gradient(circle at 78% 62%,transparent 0 26px,rgba(25,28,22,.055) 26px 27px),
    repeating-radial-gradient(circle at 12% 78%,transparent 0 32px,rgba(25,28,22,.045) 32px 33px)}
.t2 .wrap{position:relative;max-width:1160px;margin:0 auto;padding:26px 20px 90px}
.t2 .plate{border:1.5px solid var(--ink);background:var(--paper2);box-shadow:5px 5px 0 rgba(25,28,22,.13)}
.t2 .masthead{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1.5px solid var(--ink);flex-wrap:wrap}
.t2 .seal{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;
  font:900 15px Fraunces,serif;background:var(--ochre);color:var(--paper2)}
.t2 .masthead h1{font:900 20px Fraunces,serif;letter-spacing:-.01em}
.t2 .masthead .sub{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.2em;color:var(--faded);text-transform:uppercase}
.t2 .coords{margin-left:auto;text-align:right;font:400 10.5px 'JetBrains Mono',monospace;color:var(--faded);line-height:1.7}

.t2 .trailbox{padding:20px 22px 18px}
.t2 .trailhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.t2 .trailhead .rank{font:900 15px Fraunces,serif}
.t2 .trailhead .rank em{font-style:normal;color:var(--ochre)}
.t2 .trailhead .tally{margin-left:auto;font:700 11px 'JetBrains Mono',monospace;color:var(--faded);letter-spacing:.06em}
.t2 .trail{position:relative;height:46px}
.t2 .trail .path{position:absolute;left:0;right:0;top:22px;height:0;border-top:2.5px dotted rgba(25,28,22,.3)}
.t2 .trail .done{position:absolute;left:0;top:22px;height:0;width:0;border-top:3px solid var(--moss);
  transition:width 1.1s cubic-bezier(.2,.9,.25,1)}
.t2 .trail .walker{position:absolute;top:-2px;left:0;width:0;transition:width 1.1s cubic-bezier(.2,.9,.25,1)}
.t2 .trail .walker b{position:absolute;right:-17px;top:0;width:34px;height:44px;display:grid;place-items:center;
  background:var(--paper2);border:1.5px solid var(--ink);border-radius:3px}
.t2 .trail .walker b:after{content:"";width:12px;height:20px;border-radius:6px 6px 3px 3px;background:var(--moss);
  box-shadow:5px 4px 0 -3px var(--moss),-5px 4px 0 -3px var(--moss)}
.t2 .trail .cairn{position:absolute;right:0;top:6px;text-align:center;font:600 9px 'JetBrains Mono';color:var(--faded)}
.t2 .trail .cairn i{display:block;width:26px;height:26px;margin:0 auto 3px;background:var(--ochre);
  clip-path:polygon(50% 0,100% 100%,0 100%)}

.t2 .cols{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
@media(max-width:900px){.t2 .cols{grid-template-columns:1fr}}
.t2 .sechead{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--faded);
  padding:11px 16px;border-bottom:1.5px solid var(--ink);display:flex;gap:8px;align-items:center}
.t2 .sechead b{margin-left:auto;color:var(--ink)}
.t2 .rig{padding:14px 0 0;background:
  repeating-linear-gradient(0deg,transparent 0 23px,rgba(25,28,22,.05) 23px 24px)}
.t2 .hero{max-width:210px}
.t2 .hero .sk-torso,.t2 .hero .sk-pants,.t2 .hero .sk-boot,.t2 .hero .sk-hair{stroke:var(--ink);stroke-width:1.6}
.t2 .hero circle,.t2 .hero rect,.t2 .hero path{vector-effect:non-scaling-stroke}
.t2 .hero [data-gear] *{stroke:var(--ink);stroke-width:1.4}
.t2 .figcap{text-align:center;font:400 10.5px 'JetBrains Mono',monospace;color:var(--faded);padding:6px 0 14px;letter-spacing:.06em}
.t2 .pegs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink)}
.t2 .peg{aspect-ratio:1;border-right:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule);
  display:grid;place-items:center;position:relative;transition:.16s;background:
    radial-gradient(circle at 50% 14%,rgba(25,28,22,.2) 0 2.5px,transparent 3px)}
.t2 .peg:nth-child(4n){border-right:none}
.t2 .peg svg{width:34px;height:44px;margin-top:6px}
.t2 .peg span{position:absolute;bottom:4px;font:600 8px 'JetBrains Mono';color:var(--faded);letter-spacing:.08em}
.t2 .peg:hover{background-color:rgba(184,115,34,.14)}
.t2 .peg.on{background-color:rgba(51,85,60,.16);box-shadow:inset 0 0 0 2px var(--moss)}
.t2 .peg.lock{opacity:.28}
.t2 .peg.lock svg{filter:grayscale(1)}

.t2 .card-post{border-bottom:1.5px solid var(--rule);padding:16px 18px;display:flex;gap:14px;transition:.16s;position:relative}
.t2 .card-post:hover{background:rgba(184,115,34,.07)}
.t2 .card-post:last-child{border-bottom:none}
.t2 .stampcol{flex:none;width:66px}
.t2 .stamp{width:66px;height:76px;border:1.5px dashed var(--ink);display:grid;place-items:center;text-align:center;
  padding:6px 4px;background:var(--paper);position:relative}
.t2 .stamp em{font:900 21px/1 Fraunces,serif;font-style:normal;display:block}
.t2 .stamp u{text-decoration:none;font:600 8px 'JetBrains Mono';letter-spacing:.12em;color:var(--faded);display:block;margin-top:3px}
.t2 .stamp.big{background:var(--rust);color:var(--paper2);border-color:var(--rust);border-style:solid}
.t2 .stamp.big u{color:rgba(255,255,255,.75)}
.t2 .postbody h4{font:900 18px Fraunces,serif;letter-spacing:-.01em;line-height:1.15}
.t2 .postbody .where{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--ochre);text-transform:uppercase;margin:5px 0 6px}
.t2 .postbody p{font-size:12.5px;color:#4a4a3f;line-height:1.5}
.t2 .postfoot{display:flex;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap}
.t2 .price{font:700 12.5px 'JetBrains Mono',monospace}
.t2 .price s{color:var(--faded);font-weight:400;text-decoration:none;font-size:10px;letter-spacing:.1em}
.t2 .meter{flex:1;min-width:120px}
.t2 .meter u{text-decoration:none;display:flex;justify-content:space-between;font:600 8.5px 'JetBrains Mono';
  color:var(--faded);letter-spacing:.1em;margin-bottom:3px}
.t2 .meter i{display:block;height:5px;background:rgba(25,28,22,.13)}
.t2 .meter i b{display:block;height:100%;background:var(--rust)}
.t2 .ink{padding:9px 15px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper2);
  font:700 11px 'JetBrains Mono',monospace;letter-spacing:.1em;transition:.16s}
.t2 .ink:hover{background:var(--moss);border-color:var(--moss)}
.t2 .ledgerline{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--rule);font-size:12px}
.t2 .ledgerline:last-child{border:none}
.t2 .ledgerline u{text-decoration:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:700 10px 'JetBrains Mono';color:var(--paper2);flex:none}
.t2 .ledgerline em{margin-left:auto;font:600 10px 'JetBrains Mono';color:var(--faded);font-style:normal}

/* ═══════════════════════════════════════════════
   DIRECTION 3 — ASCEND  (editorial / athletic)
   ═══════════════════════════════════════════════ */
.t3{--bone:#F4F4F1;--ink:#0F0F13;--elec:#2B44FF;--lime:#D8FF3C;--grey:#8B8B95;--line:rgba(15,15,19,.12);
  --skin:#F0BE9B;--fig-a:#0F0F13;--fig-b:#22222A;--fig-c:#0F0F13;--face:#0F0F13;
  background:var(--bone);color:var(--ink);font-family:Inter,sans-serif;min-height:100vh}
.t3 .wrap{max-width:1180px;margin:0 auto;padding:24px 20px 90px}
.t3 .bar{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.t3 .bar .mark{font:900 13px Archivo,sans-serif;letter-spacing:-.02em;text-transform:uppercase;
  background:var(--ink);color:var(--bone);padding:6px 10px}
.t3 .bar nav{display:flex;gap:20px;font:600 12px Inter;color:var(--grey)}
.t3 .bar nav b{color:var(--ink);position:relative}
.t3 .bar nav b:after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px;background:var(--elec)}
.t3 .bar .me{margin-left:auto;display:flex;align-items:center;gap:9px;font:600 12px Inter}
.t3 .bar .me u{text-decoration:none;width:30px;height:30px;background:var(--elec);color:#fff;display:grid;place-items:center;
  font:800 12px Archivo;border-radius:50%}

.t3 .hero-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;border-bottom:2px solid var(--ink)}
@media(max-width:860px){.t3 .hero-row{grid-template-columns:1fr}}
.t3 .lvlpanel{padding:34px 0 30px}
.t3 .eyebrow{font:700 10px Inter;letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}
.t3 .bignum{display:flex;align-items:flex-start;gap:10px;margin:6px 0 2px}
.t3 .bignum strong{font:900 128px/.78 Archivo,sans-serif;letter-spacing:-.06em;transition:.3s}
.t3 .bignum strong.kick{animation:kick .6s cubic-bezier(.2,1.4,.35,1)}
@keyframes kick{0%{transform:translateY(16px) skewX(-9deg);opacity:.2}60%{transform:translateY(-5px) skewX(2deg)}100%{transform:none}}
.t3 .bignum .side{padding-top:10px}
.t3 .bignum .side b{display:block;font:800 13px Archivo;letter-spacing:.04em;text-transform:uppercase}
.t3 .bignum .side span{font-size:11.5px;color:var(--grey);line-height:1.4;display:block;max-width:170px;margin-top:3px}
.t3 .barwrap{margin-top:20px;max-width:520px}
.t3 .barline{height:12px;background:rgba(15,15,19,.1);position:relative;overflow:hidden}
.t3 .barline i{position:absolute;inset:0;width:0;background:var(--elec);transition:width 1.05s cubic-bezier(.2,.9,.25,1)}
.t3 .barline i:after{content:"";position:absolute;right:0;top:0;bottom:0;width:5px;background:var(--lime)}
.t3 .barnums{display:flex;justify-content:space-between;margin-top:8px;font:700 11px Inter;letter-spacing:.04em}
.t3 .barnums span{color:var(--grey);font-weight:600}
.t3 .figpanel{border-left:2px solid var(--ink);position:relative;display:grid;place-items:end center;
  background:var(--setcolor,#E9E9E4);transition:background .5s;overflow:hidden}
@media(max-width:860px){.t3 .figpanel{border-left:none;border-top:2px solid var(--ink);min-height:340px}}
.t3 .figpanel .setname{position:absolute;top:16px;left:16px;font:800 11px Archivo;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);mix-blend-mode:multiply}
.t3 .figpanel .drag{position:absolute;bottom:12px;right:14px;font:600 10px Inter;letter-spacing:.1em;color:rgba(15,15,19,.45)}
.t3 .rig{width:100%;padding-top:14px}
.t3 .hero{max-width:250px}
.t3 .hero g,.t3 .hero>circle,.t3 .hero>rect,.t3 .hero>path{stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.t3 .hero [data-gear] *{stroke:var(--ink);stroke-width:2.2}
.t3 .hero .sk-arm{stroke:var(--skin);stroke-width:13}
.t3 .hero .sk-face{stroke:var(--face);stroke-width:2.6}

.t3 .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:36px;padding-top:26px}
@media(max-width:860px){.t3 .split{grid-template-columns:1fr;gap:26px}}
.t3 h3{font:900 26px Archivo,sans-serif;letter-spacing:-.03em;margin-bottom:2px}
.t3 .sectionsub{font-size:12.5px;color:var(--grey);margin-bottom:16px}
.t3 .row{display:flex;gap:16px;align-items:center;padding:17px 0;border-top:1px solid var(--line);transition:.16s}
.t3 .row:hover{padding-left:8px}
.t3 .row .idx{font:700 10px Inter;color:var(--grey);width:22px;flex:none;letter-spacing:.1em}
.t3 .row .main h4{font:800 17px Archivo;letter-spacing:-.02em}
.t3 .row .main .sub{font-size:12px;color:var(--grey);margin-top:2px}
.t3 .row .pushit{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font:700 9.5px Inter;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 8px;background:var(--lime);color:var(--ink)}
.t3 .row .pushit.calm{background:rgba(15,15,19,.07);color:var(--grey)}
.t3 .row .cost{margin-left:auto;text-align:right;flex:none}
.t3 .row .cost b{display:block;font:800 17px Archivo;letter-spacing:-.02em}
.t3 .row .cost span{font-size:10.5px;color:var(--grey);letter-spacing:.06em}
.t3 .row .xpb{flex:none;font:800 12px Archivo;color:var(--elec);letter-spacing:-.01em}
.t3 .row .add{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;
  font-size:17px;font-weight:700;transition:.16s;line-height:1}
.t3 .row .add:hover{background:var(--ink);color:var(--bone);transform:rotate(90deg)}
.t3 .kit{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;margin:0 -4px;padding-left:4px}
.t3 .kit::-webkit-scrollbar{height:4px}.t3 .kit::-webkit-scrollbar-thumb{background:var(--ink)}
.t3 .kitem{flex:none;width:92px;scroll-snap-align:start;border:2px solid var(--ink);padding:8px 6px 8px;text-align:center;
  background:#fff;transition:.16s}
.t3 .kitem svg{width:40px;height:50px}
.t3 .kitem b{display:block;font:700 9.5px Inter;margin-top:4px;letter-spacing:-.01em;line-height:1.2}
.t3 .kitem u{text-decoration:none;display:block;font:700 8px Inter;letter-spacing:.14em;color:var(--grey);margin-top:3px}
.t3 .kitem.on{background:var(--ink)}
.t3 .kitem.on b{color:var(--bone)}.t3 .kitem.on u{color:var(--lime)}
.t3 .kitem.lock{opacity:.35;border-style:dashed;background:transparent}
.t3 .sidebox{border:2px solid var(--ink);padding:16px}
.t3 .sidebox .h{font:800 11px Archivo;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.t3 .friend{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px}
.t3 .friend u{text-decoration:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font:800 10px Archivo;color:#fff;flex:none}
.t3 .friend em{margin-left:auto;font-style:normal;font:700 10.5px Inter;color:var(--grey)}
.t3 .streak3{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.t3 .streak3 b{font:900 44px/1 Archivo;letter-spacing:-.05em}
.t3 .streak3 span{font:700 11px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.t3 .weekdots{display:flex;gap:5px}
.t3 .weekdots i{flex:1;height:26px;background:rgba(15,15,19,.1)}
.t3 .weekdots i.hit{background:var(--elec)}
.t3 .weekdots i.today{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}

/* ═══════════ NIGHTFALL v2 — map, sticky rails, refined figure ═══════════ */
.t1{--skin-lo:#D2966F;--rim:rgba(150,235,255,.55)}
.t2{--skin-lo:#D4A176;--rim:rgba(25,28,22,.45)}
.t3{--skin-lo:#D79E7C;--rim:rgba(255,255,255,.75)}
/* ⚠️ var(), not a bare url(). Each avatarSVG() instance emits its OWN
   gradient ids and passes them down as --g-suit/--g-skin/--g-shade, because
   an svg id is document-global: with a bare url(#agSuit) every figure after
   the first borrowed the first one's gradient, and therefore the first one's
   skin tone. Profiles rendered with the VIEWER's colouring. The fallback
   keeps a hand-written svg working. */
.a-suit{fill:var(--g-suit,url(#agSuit))}
.a-arm{fill:var(--g-suit,url(#agSuit))}
.a-boot{fill:var(--fig-c)}
.a-skin,.a-hand{fill:var(--g-skin,url(#agSkin))}
/* Hair was fill:var(--fig-c) — the boot colour — so every character's hair
   was whatever their shoes were. Now its own channel, falling back to the old
   value if identity/index.js has not set one. */
.a-hair{fill:var(--hair,var(--fig-c))}
.a-shade{fill:#000;opacity:.13}
.a-face{fill:none;stroke:var(--face);stroke-width:2.2;stroke-linecap:round;opacity:.7}
/* ── Face detail (Phase 5) ──
   Brows take the hair shadow colour rather than the face ink, so they read as
   belonging to the same person as the hair. The nose is drawn in the skin
   shadow, not a line colour — a nose is a change in shading, and inking it
   turns the face into a cartoon. */
.a-brow{fill:none;stroke:var(--hair-lo,var(--face));stroke-width:2.1;stroke-linecap:round;opacity:.92}
.a-eye{fill:var(--face);opacity:.86;stroke:none}
.a-nose{fill:none;stroke:var(--skin-lo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.a-mouth{fill:none;stroke:var(--face);stroke-width:1.7;stroke-linecap:round;opacity:.38}
/* The head shade used to be a flat 13% black over the right half, which met
   the lit half in a hard vertical line straight down the middle of the face —
   it read as a crack, not as lighting. Same path, ramped instead. */
.a-shadesoft{fill:var(--g-shade,url(#agShade))}
.t2 .hero .a-brow,.t3 .hero .a-brow{opacity:1}
.t2 .hero .a-mouth,.t3 .hero .a-mouth{opacity:.7}
.a-rim{fill:none;stroke:var(--rim);stroke-width:2;stroke-linecap:round;opacity:.5}
.t2 .hero .a-suit,.t2 .hero .a-arm,.t2 .hero .a-boot,.t2 .hero .a-hair,.t2 .hero .a-skin,.t2 .hero .a-hand{stroke:var(--ink);stroke-width:1.5}
.t2 .hero .a-shade{opacity:.1}
.t2 .hero .a-rim{display:none}
.t3 .hero .a-suit,.t3 .hero .a-arm,.t3 .hero .a-boot,.t3 .hero .a-hair,.t3 .hero .a-skin,.t3 .hero .a-hand{stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.t3 .hero .a-shade{opacity:.16;stroke:none}
.t3 .hero .a-rim{display:none}
.t3 .hero .a-face{stroke-width:2.8;opacity:1}
.t2{--fig-b:#28422F}
.t1 .hero{max-width:202px}
.t2 .hero{max-width:196px}
.t3 .hero{max-width:230px}

/* sticky rails */
.t1 #sentinel{height:1px;margin-bottom:-1px}
.t1 .xpwrap{position:sticky;top:52px;z-index:60;transition:padding .22s ease,border-radius .22s ease;
  background:linear-gradient(180deg,rgba(14,17,32,.94),rgba(10,12,26,.9));backdrop-filter:blur(16px) saturate(1.4)}
.t1 .xpwrap.stuck{padding:11px 18px 13px;box-shadow:0 16px 40px -18px #000}
.t1 .xpwrap.stuck .lvlbox strong{font-size:25px}
.t1 .xpwrap.stuck .nextup{display:none}
.t1 .xpwrap.stuck .track{height:11px}
.t1 .colL{align-self:start}
@media(min-width:901px){.t1 .colL{position:sticky;top:170px;max-height:calc(100vh - 186px);overflow-y:auto;
  scrollbar-width:none;padding-bottom:4px}
 .t1 .colL::-webkit-scrollbar{width:0}}
.t1 .hint{font:400 11px 'JetBrains Mono',monospace;color:var(--dim);text-align:center;margin-top:11px;letter-spacing:.04em}

/* map */
.t1 .mapcard{padding:0;overflow:visible;position:relative;z-index:40}
.t1 .maphead{display:flex;align-items:center;gap:12px;padding:15px 16px 13px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.t1 .maphead .lbl:after{display:none}
.t1 .seg{display:flex;margin-left:auto;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.t1 .seg button{padding:7px 12px;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--dim);transition:.18s}
.t1 .seg button:hover{color:var(--txt)}
.t1 .seg button[aria-pressed="true"]{background:var(--cy);color:#04140F}
.t1 .mapbox{position:relative;aspect-ratio:720/284;min-height:230px;
  background:radial-gradient(420px 300px at 50% 52%,rgba(53,245,216,.09),transparent 70%),#080A16}
.t1 .mapbox svg{display:block;width:100%;height:100%}
.t1 .pin{position:absolute;translate:-50% -50%;width:26px;height:26px;display:grid;place-items:center;z-index:5;transition:scale .18s}
.t1 .pin i{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;display:block}
.t1 .pin:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;
  opacity:.6;animation:ping 2.8s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes ping{0%{transform:scale(.45);opacity:.85}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.t1 .pin b{position:absolute;bottom:20px;left:50%;translate:-50% 0;white-space:nowrap;font:600 9.5px 'JetBrains Mono',monospace;
  color:var(--txt);padding:4px 8px;border-radius:7px;background:rgba(6,7,14,.94);border:1px solid var(--line);
  opacity:0;transition:.16s;pointer-events:none;letter-spacing:.04em}
.t1 .pin:hover b,.t1 .pin.sel b{opacity:1}
.t1 .pin:hover,.t1 .pin.sel{scale:1.3;z-index:8}
.t1 .pin.done i{background:#fff;box-shadow:0 0 14px #fff}
.t1 .pin.done:before{animation:none;opacity:.9;border-color:#fff}
.t1 .mapkey{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--line);flex-wrap:wrap;
  font:600 10px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--dim)}
.t1 .mapkey span{display:flex;align-items:center;gap:6px}
.t1 .mapkey i{width:7px;height:7px;border-radius:50%}
.t1 .mapkey .kh{margin-left:auto;letter-spacing:.04em;text-transform:none;font-weight:400}

/* map popup */
.t1 .pop{position:absolute;z-index:20;width:min(300px,calc(100vw - 60px));padding:15px 15px 13px;border-radius:16px;
  border:1px solid rgba(53,245,216,.34);background:rgba(9,12,26,.97);backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -20px #000,0 0 0 1px rgba(0,0,0,.4);animation:popfade .18s ease}
@keyframes popfade{from{opacity:0}}
@keyframes slidein{from{opacity:0;transform:translateY(6px)}}
.t1 .popx{position:absolute;top:9px;right:11px;font-size:19px;line-height:1;color:var(--dim)}
.t1 .popx:hover{color:var(--txt)}
.t1 .poptag{display:inline-block;font:700 9px 'JetBrains Mono',monospace;letter-spacing:.16em;padding:3px 7px;
  border:1px solid;border-radius:5px;margin-bottom:9px}
.t1 .pop h5{font:700 16.5px 'Space Grotesk',sans-serif;letter-spacing:-.02em;padding-right:16px}
.t1 .popwhere{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--cy);margin:5px 0 7px;text-transform:uppercase}
.t1 .pop p{font-size:12px;line-height:1.5;color:#aab1c6}
.t1 .popmore{animation:slidein .2s ease;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.t1 .earns{display:flex;align-items:center;gap:10px;margin-top:9px;padding:8px;border-radius:10px;background:rgba(255,255,255,.05)}
.t1 .earns svg{width:34px;height:42px;flex:none}
.t1 .earns u{text-decoration:none;display:block;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--dim)}
.t1 .earns b{font-size:12.5px}
.t1 .popstats{display:flex;gap:10px;margin:12px 0 10px}
.t1 .popstats div{flex:1;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.t1 .popstats u{text-decoration:none;display:block;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--dim)}
.t1 .popstats b{display:block;font:700 15px 'Space Grotesk';margin-top:3px;letter-spacing:-.01em}
.t1 .popstats s{text-decoration:none;font:400 9.5px 'JetBrains Mono',monospace;color:var(--dim)}
.t1 .popmeter u{text-decoration:none;display:flex;justify-content:space-between;font:600 8.5px 'JetBrains Mono',monospace;
  letter-spacing:.14em;color:var(--dim);margin-bottom:4px}
.t1 .popmeter i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.t1 .popmeter i b{display:block;height:100%;border-radius:3px}
.t1 .popbtns{display:flex;gap:8px;margin-top:13px}
.t1 .psign{flex:1;padding:10px;border-radius:10px;font:700 11.5px 'Space Grotesk';letter-spacing:.02em;
  background:linear-gradient(120deg,var(--cy),#6EE7FF);color:#04140F;transition:.16s}
.t1 .psign:hover{box-shadow:0 0 22px -4px var(--cy)}
.t1 .pmore{padding:10px 12px;border-radius:10px;border:1px solid var(--line);font:600 11.5px 'Space Grotesk';color:var(--dim)}
.t1 .pmore:hover{color:var(--txt);border-color:rgba(255,255,255,.25)}
.t1 .plog{width:100%;margin-top:7px;padding:8px;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--dim)}
.t1 .plog:hover{color:var(--cy)}
.t1 .handoff{display:flex;align-items:center;gap:8px;margin-top:13px;padding:10px 12px;border-radius:10px;
  background:rgba(53,245,216,.1);border:1px solid rgba(53,245,216,.3);font:600 10.5px 'JetBrains Mono',monospace;
  color:var(--cy);letter-spacing:.04em;animation:slidein .2s ease}
.t1 .quest.logged{opacity:.55}
.t1 .quest.logged .go{background:rgba(255,255,255,.12);color:var(--dim);pointer-events:none;box-shadow:none}
@media(max-width:900px){.t1 .mapbox{aspect-ratio:auto;height:300px}}


/* ═══════════ NIGHTFALL v3 — XP over avatar, gear popovers, party chat ═══════════ */
.t1 .grid{grid-template-columns:minmax(0,352px) minmax(0,1fr);align-items:start}
@media(max-width:900px){.t1 .grid{grid-template-columns:minmax(0,1fr)}}
.t1 .colL{align-self:start}
@media(min-width:901px){.t1 .colL{position:sticky;top:66px;max-height:none;overflow:visible}}
.t1 .xpwrap{position:static;top:auto;margin-bottom:14px;padding:16px 18px 17px;border-radius:20px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(10px);transition:box-shadow .3s}
.t1 .xpwrap.pulse{box-shadow:0 0 0 1px rgba(53,245,216,.5),0 0 44px -6px rgba(53,245,216,.55)}
.t1 .xpwrap .nextup{margin-top:8px}
.t1 .card.char{padding:16px 16px 14px}
.t1 .chamber{padding-top:2px}

/* slots become the gear entry point */
.t1 .slots{gap:6px;margin-top:14px}
.t1 .slot{cursor:pointer}
.t1 .slot:hover{border-color:rgba(53,245,216,.5);background:rgba(53,245,216,.07);transform:translateY(-2px)}
.t1 .slot.active{border-style:solid;border-color:var(--cy);background:rgba(53,245,216,.12);
  box-shadow:0 0 0 1px var(--cy),0 0 24px -6px var(--cy)}
.t1 .slot.empty:after{content:"+";position:absolute;top:50%;left:50%;translate:-50% -60%;
  font:300 22px 'Space Grotesk';color:var(--dim)}

/* gear popover */
.t1 .gearpop{position:fixed;z-index:300;width:318px;padding:14px;border-radius:18px;
  border:1px solid rgba(53,245,216,.32);background:rgba(9,12,26,.98);backdrop-filter:blur(20px);
  box-shadow:0 34px 80px -20px #000,0 0 0 1px rgba(0,0,0,.5);animation:gpin .18s cubic-bezier(.2,1.2,.4,1)}
@keyframes gpin{from{opacity:0;transform:translateY(6px) scale(.97)}}
.t1 .gphead{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;padding-right:18px}
.t1 .gphead b{font:700 13px 'Space Grotesk';letter-spacing:.02em}
.t1 .gphead span{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--dim)}
.t1 .gpgrid{display:grid;gap:8px;max-height:min(420px,52vh);overflow-y:auto;scrollbar-width:thin}
.t1 .gpitem{position:relative;display:grid;grid-template-columns:46px 1fr;gap:11px;align-items:center;
  padding:9px 11px 9px 9px;border-radius:13px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);text-align:left;transition:.16s}
.t1 .gpitem:hover{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 12%,transparent)}
.t1 .gpitem svg{width:46px;height:52px;grid-row:span 4;align-self:center}
.t1 .gpitem b{font:600 12.5px Inter;letter-spacing:-.01em}
.t1 .gpitem u{text-decoration:none;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--rc)}
.t1 .gpitem .gpfrom{display:block;font-size:10.5px;color:var(--dim);line-height:1.35;margin-top:2px}
.t1 .gpitem.on{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 17%,transparent);
  box-shadow:0 0 20px -8px var(--rc)}
.t1 .gpitem.on:after{content:"EQUIPPED";position:absolute;top:8px;right:9px;font:700 7.5px 'JetBrains Mono',monospace;
  letter-spacing:.16em;color:var(--rc)}
.t1 .gpitem.lock{opacity:.42}
.t1 .gpitem.lock svg{filter:grayscale(1)}
.t1 .gpclear{width:100%;margin-top:10px;padding:9px;border-radius:10px;border:1px solid var(--line);
  font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--dim)}
.t1 .gpclear:hover:not(:disabled){color:var(--hot);border-color:rgba(255,77,141,.4)}
.t1 .gpclear:disabled{opacity:.3;cursor:default}
@media(max-width:700px){.t1 .gearpop{left:10px!important;right:10px;top:auto!important;bottom:10px;width:auto}}

/* quest accordion */
.t1 .quest{padding:0;overflow:hidden}
.t1 .quest:hover{transform:none}
.t1 .qhead{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;text-align:left}
.t1 .qtitle h4{font:700 16px 'Space Grotesk';letter-spacing:-.02em}
.t1 .qsub{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--dim);margin-top:4px;text-transform:uppercase}
.t1 .qhead .qmeta{margin-left:auto}
.t1 .qhead .qmeta em{font:700 15px 'JetBrains Mono',monospace;color:var(--cy);font-style:normal;display:block}
.t1 .qhead .qmeta span{font:400 10px 'JetBrains Mono',monospace;color:var(--dim)}
.t1 .chev{color:var(--dim);font-size:12px;transition:.2s;flex:none}
.t1 .quest.open .chev{rotate:180deg;color:var(--cy)}
.t1 .quest.open{border-color:rgba(53,245,216,.35)}
.t1 .qbody{display:none;padding:0 16px 16px;border-top:1px solid var(--line);margin-top:2px;animation:slidein .22s ease}
.t1 .quest.open .qbody{display:block}
.t1 .qbody>p{font-size:12.5px;color:#aab1c6;line-height:1.55;padding-top:13px}
.t1 .qinc{margin-top:13px}
.t1 .qinc u,.t1 .qcol u{text-decoration:none;display:block;font:700 8.5px 'JetBrains Mono',monospace;
  letter-spacing:.2em;color:var(--dim);margin-bottom:7px}
.t1 .qinc ul{list-style:none;display:grid;gap:5px}
.t1 .qinc li{position:relative;padding-left:16px;font-size:12px;color:#b6bcd0;line-height:1.45}
.t1 .qinc li:before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--cy);opacity:.7}
.t1 .qsplit{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:560px){.t1 .qsplit{grid-template-columns:1fr}}
.t1 .qcol{padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.t1 .ln{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--dim);padding:3px 0}
.t1 .ln b{color:var(--txt);font:600 11.5px 'JetBrains Mono',monospace}
.t1 .ln.tot{border-top:1px solid var(--line);margin-top:5px;padding-top:6px}
.t1 .ln.tot b{color:var(--cy);font-size:12.5px}
.t1 .qbody .earns{display:flex;align-items:center;gap:11px;margin-top:12px;padding:9px;border-radius:12px;
  background:rgba(255,176,32,.09);border:1px solid rgba(255,176,32,.28)}
.t1 .qbody .earns svg{width:36px;height:44px;flex:none}
.t1 .qbody .earns u{text-decoration:none;display:block;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:#FFB020}
.t1 .qbody .earns b{font-size:13px}
.t1 .qbtns{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.t1 .qbtns .go{margin:0;flex:1;min-width:180px}
.t1 .qbtns .psign{flex:1;min-width:150px}

/* party chat dock */
.t1 .dock{position:fixed;right:20px;bottom:20px;z-index:280;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.t1 .dockpill{display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;
  background:linear-gradient(120deg,var(--vi),#6A4BFF);color:#fff;font:700 12.5px 'Space Grotesk';
  box-shadow:0 16px 40px -10px rgba(139,92,255,.7);transition:.18s}
.t1 .dockpill:hover{transform:translateY(-2px)}
.t1 .dockpill .live{width:8px;height:8px;border-radius:50%;background:#4BFFB0;box-shadow:0 0 10px #4BFFB0}
.t1 .dockpill .unread{display:none;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--hot);font:700 10px 'JetBrains Mono',monospace}
.t1 .dockpanel{display:none;width:min(330px,calc(100vw - 32px));height:min(440px,70vh);flex-direction:column;
  border-radius:20px;border:1px solid var(--line);background:rgba(9,12,26,.97);backdrop-filter:blur(20px);
  box-shadow:0 34px 80px -18px #000;overflow:hidden;animation:gpin .2s cubic-bezier(.2,1.2,.4,1)}
.t1 .dock.open .dockpanel{display:flex}
.t1 .dock.open .dockpill{display:none}
.t1 .dockhead{display:flex;align-items:baseline;gap:9px;padding:14px 15px 11px;border-bottom:1px solid var(--line)}
.t1 .dockhead b{font:700 13.5px 'Space Grotesk'}
.t1 .dockhead .online{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.12em;color:#4BFFB0}
.t1 .dockhead .popx{position:static;margin-left:auto}
.t1 .chantabs{display:flex;gap:6px;padding:10px 12px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.t1 .chantabs::-webkit-scrollbar{display:none}
.t1 .chantabs .chip{display:flex;align-items:center;gap:6px;flex:none;padding:6px 11px 6px 6px;border-radius:99px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font:600 11px Inter;color:var(--dim);transition:.16s}
.t1 .chantabs .chip:not(:has(u)){padding-left:11px}
.t1 .chantabs .chip u{text-decoration:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font:700 9px 'JetBrains Mono',monospace;color:#07080f}
.t1 .chantabs .chip.on{color:var(--txt);border-color:var(--cc);background:color-mix(in srgb,var(--cc) 16%,transparent)}
.t1 .thread{flex:1;overflow-y:auto;padding:14px 14px 4px;display:flex;flex-direction:column;gap:11px;scrollbar-width:thin}
.t1 .bubrow{display:flex;gap:9px;align-items:flex-start}
.t1 .bubrow u{text-decoration:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font:700 10px 'JetBrains Mono',monospace;color:#07080f}
.t1 .bubrow span{display:block;font:600 10px 'JetBrains Mono',monospace;color:var(--dim);margin-bottom:4px;letter-spacing:.06em}
.t1 .bub{padding:9px 12px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.07);
  font-size:12.5px;line-height:1.45;color:#d5d9e6;max-width:230px}
.t1 .bub.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:linear-gradient(120deg,var(--vi),#6A4BFF);color:#fff}
.t1 .typing{height:15px;padding:0 16px;font:400 10.5px 'JetBrains Mono',monospace;color:var(--dim)}
.t1 .composer{display:flex;gap:8px;padding:11px 12px 12px;border-top:1px solid var(--line)}
.t1 .composer input{flex:1;padding:10px 13px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--txt);font:400 12.5px Inter;outline:none}
.t1 .composer input:focus{border-color:rgba(53,245,216,.5)}
.t1 .composer .send{padding:10px 15px;border-radius:11px;background:var(--cy);color:#04140F;font:700 11.5px 'Space Grotesk'}
@media(max-width:700px){.t1 .dock{right:12px;left:12px;bottom:12px;align-items:stretch}
 .t1 .dockpanel{width:auto;height:min(420px,64vh)}}


/* ═══════════ party roster + member profiles ═══════════ */
.t1 .roster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.t1 .pmem{display:grid;justify-items:center;gap:5px;padding:11px 3px 9px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);transition:.16s}
.t1 .pmem:hover{transform:translateY(-2px);border-color:rgba(53,245,216,.45);background:rgba(53,245,216,.07)}
.t1 .pmem u{position:relative;text-decoration:none;width:38px;height:38px;border-radius:50%;display:grid;
  place-items:center;font:700 12.5px 'Space Grotesk';color:#07080f}
.t1 .pmem u i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:#4BFFB0;border:2px solid #10142a}
.t1 .pmem b{font:600 11.5px Inter;letter-spacing:-.01em}
.t1 .pmem span{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--dim)}

.t1 .profwrap{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:18px;
  background:rgba(4,5,12,.74);backdrop-filter:blur(9px);animation:popfade .18s ease}
.t1 .profcard{position:relative;width:min(560px,100%);max-height:90vh;overflow-y:auto;padding:20px;
  border-radius:22px;border:1px solid rgba(255,255,255,.15);background:rgba(10,13,28,.98);
  box-shadow:0 40px 100px -20px #000;animation:gpin .22s cubic-bezier(.2,1.2,.4,1);scrollbar-width:thin}
.t1 .profhead{display:flex;align-items:center;gap:12px;padding-right:28px;margin-bottom:16px}
.t1 .profhead u{text-decoration:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font:700 16px 'Space Grotesk';color:#07080f;flex:none}
.t1 .profhead b{display:block;font:700 19px 'Space Grotesk';letter-spacing:-.02em}
.t1 .profhead span{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--dim)}
.t1 .onnow{font-style:normal;margin-left:auto;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.18em;
  color:#4BFFB0;padding:5px 9px;border-radius:6px;border:1px solid rgba(75,255,176,.35);background:rgba(75,255,176,.1)}
.t1 .profbody{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px}
@media(max-width:560px){.t1 .profbody{grid-template-columns:1fr}}
.t1 .profrig{border-radius:16px;padding-top:6px;
  background:radial-gradient(190px 150px at 50% 38%,rgba(139,92,255,.26),transparent 70%)}
.t1 .profrig .hero{display:block;margin:0 auto;max-width:142px}
.t1 .profrig .dais{height:40px;margin-top:-16px}
.t1 .profrig .dais i{width:110px;height:28px;top:5px}
.t1 .profrig .dais i:nth-child(2){width:146px;height:36px;top:1px}
.t1 .buildname{text-align:center;font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.18em;padding-bottom:8px}
.t1 .ptrack u{text-decoration:none;display:flex;justify-content:space-between;font:700 9px 'JetBrains Mono',monospace;
  letter-spacing:.14em;color:var(--dim);margin-bottom:6px}
.t1 .ptrack i{display:block;height:9px;border-radius:99px;background:#0A0D1A;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.t1 .ptrack i b{display:block;height:100%;border-radius:99px}
.t1 .ptrack s{text-decoration:none;display:block;margin-top:6px;font:400 10px 'JetBrains Mono',monospace;color:var(--dim)}
.t1 .pkit{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.t1 .pkit .pslot:nth-child(5){grid-column:1/-1}
@media(max-width:420px){.t1 .pkit{grid-template-columns:1fr}}
.t1 .pslot{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--rc) 34%,transparent);background:color-mix(in srgb,var(--rc) 9%,transparent)}
.t1 .pslot svg{width:30px;height:38px;flex:none}
.t1 .pslot u{text-decoration:none;display:block;font:700 7.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--dim)}
.t1 .pslot b{display:block;font:600 11.5px Inter;letter-spacing:-.01em;margin-top:1px}
.t1 .pslot s{text-decoration:none;font:700 8px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--rc)}
.t1 .padv{margin-top:16px}
.t1 .padv>u{text-decoration:none;display:block;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.2em;
  color:var(--dim);margin-bottom:8px}
.t1 .pln{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.t1 .pln b{display:block;font:600 12.5px Inter;letter-spacing:-.01em}
.t1 .pln span{font:400 10.5px 'JetBrains Mono',monospace;color:var(--dim)}
.t1 .pln em{margin-left:auto;font:700 12px 'JetBrains Mono',monospace;font-style:normal;color:var(--cy);flex:none}
.t1 .profbtns{display:flex;gap:9px;margin-top:18px}
.t1 .profbtns .psign{flex:1}
.t1 .profl{margin-left:auto;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--cy);
  padding:5px 9px;border-radius:7px;border:1px solid rgba(53,245,216,.3)}
.t1 .profl:hover{background:rgba(53,245,216,.12)}


/* Sticky notes: the pinned column is measured against .grid (the taller of the two
   columns), so .colL stays the sticky element. It also has to stay short enough that
   66px + its height clears the bottom of the grid, or it gets pushed off the top. */
.t1 .colL{align-self:start}
@media(min-width:901px){
 .t1 .colL{position:sticky;top:66px;max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:none}
 .t1 .colL::-webkit-scrollbar{width:0}}
.t1 .hero{max-width:178px}
.t1 .card.char{padding:14px 15px 12px}
.t1 .chamber{padding-top:0}
.t1 .dais{height:52px;margin-top:-22px}
.t1 .dais i{width:150px;height:36px}
.t1 .dais i:nth-child(2){width:196px;height:46px}
.t1 .slots{margin-top:11px}
.t1 .slot svg{width:24px;height:30px;margin-bottom:4px}
.t1 .hint{margin-top:9px;font-size:10px}
.t1 .roster{gap:7px}
.t1 .pmem{padding:8px 3px 7px;gap:4px}
.t1 .pmem u{width:33px;height:33px;font-size:11.5px}

/* ═══════════ 3D character rig ═══════════ */
.t1 .rig{perspective:none;display:block;touch-action:pan-y}
.t1 .rig3d{display:block;width:100%;height:286px;cursor:grab;touch-action:pan-y;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.5))}
.t1 .rig.turning .rig3d{cursor:grabbing}
.t1 .chamber{position:relative}
.t1 .chamber .hint,.t1 .card.char .hint{transition:opacity .25s}
.t1 .rig.turning ~ .slots{opacity:.55;transition:opacity .25s}
.t1 .card.char .hint{display:flex;align-items:center;justify-content:center;gap:7px}
.t1 .card.char .hint b{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--cy);
  border:1px solid rgba(53,245,216,.32);border-radius:6px;padding:3px 7px}
.t1 .profrig .rig3d{height:210px;filter:none}
.t1 .profrig{padding-bottom:6px}


/* ═══════════ tier ladder: gray → blue → purple → gold → rainbow ═══════════ */
.t1 .tpill{font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.16em;padding:3px 7px;border-radius:5px;
  border:1px solid;display:inline-block;white-space:nowrap}
.t1 .tp-myth-t{background:linear-gradient(90deg,#FF4D8D,#FFB020,#4BFFB0,#35F5D8,#7B5CFF,#FF4D8D);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mythflow 4.2s linear infinite}
.t1 .gpitem.myth,.t1 .slot.myth,.t1 .pslot.myth{overflow:visible}
.t1 .tp-myth{border-color:rgba(255,255,255,.28);
  background:linear-gradient(90deg,#FF4D8D,#FFB020,#4BFFB0,#35F5D8,#7B5CFF,#FF4D8D);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:mythflow 4.2s linear infinite}
.t1 .myth{position:relative}
.t1 .myth:before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,#FF4D8D,#FFB020,#4BFFB0,#35F5D8,#7B5CFF,#FF4D8D);background-size:280% 280%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:mythflow 4.2s linear infinite;will-change:background-position;filter:saturate(1.4) brightness(1.18)}
.t1 .quest.myth:before,.t1 .dentry.myth:before{inset:-2px;padding:2.5px}
.t1 .quest.myth,.t1 .dentry.myth{background:
  linear-gradient(115deg,rgba(255,77,141,.09),rgba(255,176,32,.06) 25%,rgba(75,255,176,.06) 50%,rgba(123,92,255,.10) 75%,rgba(255,77,141,.09)),
  rgba(255,255,255,.012);background-size:300% 300%,auto;animation:mythflow 9s linear infinite}
.t1 .quest.myth:after,.t1 .dentry.myth:after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  background-size:280% 100%;animation:sheen 4.6s ease-in-out infinite}
@keyframes sheen{0%,55%{background-position:130% 0}100%{background-position:-160% 0}}
@keyframes mythflow{0%{background-position:0% 50%}100%{background-position:280% 50%}}
.t1 .spk{position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;z-index:4;will-change:opacity;
  background:
   radial-gradient(circle 2.2px at 13% 3%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 1.5px at 61% 97%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 2px at 96% 28%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 1.4px at 33% 99%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 1.8px at 2% 66%,#fff,rgba(255,255,255,0) 100%);
  animation:spkA 1.9s ease-in-out infinite}
.t1 .spk:before{content:"";position:absolute;inset:0;border-radius:inherit;will-change:opacity;
  background:
   radial-gradient(circle 2.6px at 6% 22%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 1.6px at 41% 4%,#FFE9A8,rgba(255,255,255,0) 100%),
   radial-gradient(circle 2.2px at 72% 96%,#B4F1FF,rgba(255,255,255,0) 100%),
   radial-gradient(circle 1.8px at 91% 52%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 2.4px at 27% 78%,#FFC6EC,rgba(255,255,255,0) 100%);
  animation:spkB 2.3s ease-in-out infinite reverse}
.t1 .spk:after{content:"";position:absolute;inset:0;border-radius:inherit;will-change:opacity;
  background:
   radial-gradient(circle 1.7px at 84% 2%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 2.1px at 22% 98%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 1.5px at 99% 74%,#fff,rgba(255,255,255,0) 100%),
   radial-gradient(circle 1.9px at 47% 1%,#fff,rgba(255,255,255,0) 100%);
  animation:spkB 3.4s ease-in-out infinite}
@keyframes spkA{0%,100%{opacity:.1}22%{opacity:1}44%{opacity:.2}72%{opacity:.85}}
@keyframes spkB{0%,100%{opacity:.75}30%{opacity:.12}58%{opacity:1}82%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.t1 .spk,.t1 .spk:before,.t1 .spk:after,.t1 .myth:before,.t1 .myth:after,.t1 .quest.myth,.t1 .dentry.myth,.t1 .tp-myth{animation:none}}

/* quest cards take their border from the tier */
.t1 .quest{border-color:color-mix(in srgb,var(--tc,#39405a) 52%,transparent);
  border-left:3px solid var(--tc,#39405a);
  background:linear-gradient(135deg,color-mix(in srgb,var(--tc,#39405a) 7%,transparent),rgba(255,255,255,.012))}
.t1 .quest.open{border-color:color-mix(in srgb,var(--tc,#35F5D8) 62%,transparent)}
.t1 .quest .qhead .qmeta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.t1 .quest .qhead .qmeta em{color:var(--tc)}

/* ═══════════ completed feed ═══════════ */
.t1 .donehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.t1 .donehead .lbl{margin:0}
.t1 .donehead .tot{margin-left:auto;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--dim)}
.t1 .donehead .tot b{color:var(--cy)}
.t1 .dentry{position:relative;border:1px solid color-mix(in srgb,var(--tc) 30%,transparent);border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 8%,transparent),rgba(255,255,255,.012));
  margin-bottom:11px}
.t1 .dentry:last-child{margin-bottom:0}
.t1 .dhead{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;text-align:left}
.t1 .dtick{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid;display:grid;place-items:center;
  font-size:12px;font-weight:700}
.t1 .dtitle{min-width:0}
.t1 .dtitle h4{font:700 15px 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.t1 .dsub{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-top:3px}
.t1 .dwhen{font:400 10.5px 'JetBrains Mono',monospace;color:#7f87a0;margin-top:3px}
.t1 .dmeta{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.t1 .dmeta em{font:700 14px 'JetBrains Mono',monospace;font-style:normal}
.t1 .dfaces{display:flex;align-items:center;flex:none}
.t1 .dfaces u{text-decoration:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:700 8.5px 'JetBrains Mono',monospace;color:#07080f;margin-left:-7px;border:1.5px solid #10142a}
.t1 .dfaces u:first-child{margin-left:0}
.t1 .dfaces b{margin-left:7px;font:700 11px 'JetBrains Mono',monospace;color:var(--dim)}
.t1 .dfaces b.quiet{opacity:.45}
.t1 .dentry .chev{margin-left:2px}
.t1 .dentry.open .chev{rotate:180deg;color:var(--tc)}
.t1 .dbody{display:none;padding:2px 15px 14px;animation:slidein .22s ease}
.t1 .dentry.open .dbody{display:block}
.t1 .dearn{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:13px;margin-bottom:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.t1 .dearn svg{width:34px;height:42px;flex:none}
.t1 .dearn u{text-decoration:none;display:block;font:700 8px 'JetBrains Mono',monospace;letter-spacing:.18em}
.t1 .dearn.myth u{background:linear-gradient(90deg,#FF4D8D,#FFB020,#4BFFB0,#35F5D8,#7B5CFF);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:mythflow 4.2s linear infinite}
.t1 .dearn b{display:block;font-size:13px;margin-top:2px}
.t1 .dearn span{font-size:10.5px;color:var(--dim);line-height:1.35}
.t1 .cheer{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.t1 .cheer u{text-decoration:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font:700 9.5px 'JetBrains Mono',monospace;color:#07080f}
.t1 .cheer span{display:block;font:600 10.5px Inter,sans-serif;color:#c6cbdb}
.t1 .cheer span s{text-decoration:none;font:400 9.5px 'JetBrains Mono',monospace;color:var(--dim);margin-left:7px}
.t1 .cheer p{font-size:12.5px;line-height:1.5;color:#a8afc4;margin-top:3px}
.t1 .cheerwait{font:400 11.5px 'JetBrains Mono',monospace;color:var(--dim);padding:10px 0 2px;border-top:1px solid var(--line)}


/* ═══════════ power ═══════════ */
.t1 .pwbar{margin-top:10px;padding:11px 13px 10px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(53,245,216,.09),rgba(139,92,255,.07))}
.t1 .pwtop{display:flex;align-items:baseline;gap:9px}
.t1 .pwlbl{font:700 9px 'JetBrains Mono',monospace;letter-spacing:.24em;color:var(--dim)}
.t1 .pwtop b{font:700 26px 'Space Grotesk',sans-serif;letter-spacing:-.03em;margin-left:auto;
  background:linear-gradient(120deg,#fff,var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent}
.t1 .pwdelta{font:700 12px 'JetBrains Mono',monospace;font-style:normal;opacity:0;transform:translateY(4px);
  transition:.3s;flex:none}
.t1 .pwdelta.show{opacity:1;transform:none}
.t1 .pwdelta.up{color:#4BFFB0}.t1 .pwdelta.down{color:var(--hot)}
.t1 .pwtrack{position:relative;height:7px;border-radius:99px;background:#0A0D1A;margin:9px 0 8px;
  border:1px solid rgba(255,255,255,.07)}
.t1 .pwtrack s{position:absolute;inset:0;width:0;border-radius:99px;text-decoration:none;
  background:linear-gradient(90deg,var(--vi),var(--cy));box-shadow:0 0 14px rgba(53,245,216,.5);
  transition:width .7s cubic-bezier(.2,.9,.25,1)}
.t1 .pwtrack u{position:absolute;top:-4px;width:2px;height:13px;border-radius:2px;background:#FFB020;
  text-decoration:none;transition:left .7s cubic-bezier(.2,.9,.25,1);box-shadow:0 0 8px rgba(255,176,32,.8)}
.t1 .pwtrack u.hit{opacity:.25}
.t1 .pwfoot{display:flex;gap:8px;font:600 8.5px 'JetBrains Mono',monospace;letter-spacing:.02em;color:var(--dim);white-space:nowrap}
.t1 .pwfoot span:last-child{margin-left:auto;text-align:right}
.t1 .pwfoot b{color:#4BFFB0}

/* power in the gear picker */
.t1 .gppw{display:flex;align-items:center;gap:7px;margin-top:4px;font:700 9.5px 'JetBrains Mono',monospace;
  letter-spacing:.1em;color:#aeb5c8}
.t1 .gppw em{font-style:normal;padding:2px 5px;border-radius:4px;font-size:9px}
.t1 .gppw em.up{background:rgba(75,255,176,.16);color:#4BFFB0}
.t1 .gppw em.down{background:rgba(255,77,141,.14);color:#FF8FB4}
.t1 .gppw em.same{background:rgba(255,255,255,.08);color:var(--dim)}

/* power on roster + profile */
.t1 .pmem em{font-style:normal;font:700 9.5px 'JetBrains Mono',monospace;color:var(--cy);letter-spacing:.04em}
.t1 .pmem.lead u:after{content:"★";position:absolute;top:-7px;right:-6px;font-size:9px;color:#FFB020;
  text-shadow:0 0 6px rgba(255,176,32,.9)}
.t1 .ppw{display:flex;align-items:baseline;gap:9px;margin-top:11px;padding:9px 11px;border-radius:11px;
  background:rgba(53,245,216,.08);border:1px solid rgba(53,245,216,.22)}
.t1 .ppw u{text-decoration:none;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.2em;color:var(--dim)}
.t1 .ppw b{font:700 19px 'Space Grotesk',sans-serif;letter-spacing:-.02em;margin-left:auto}
.t1 .ppw s{text-decoration:none;font:700 9.5px 'JetBrains Mono',monospace}
.t1 .ppw s.over{color:var(--hot)}.t1 .ppw s.under{color:#4BFFB0}
.t1 .qpw{font:700 9px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#FFB020;margin-top:3px;display:block}


/* ═══════════ imported activity: route + stats ═══════════ */
.t1 .srcbadge{display:inline-flex;align-items:center;gap:6px;font:700 8.5px 'JetBrains Mono',monospace;
  letter-spacing:.14em;padding:3px 7px;border-radius:5px;border:1px solid;white-space:nowrap}
.t1 .srcbadge i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.t1 .withwho{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;margin-bottom:10px;
  background:rgba(53,245,216,.08);border:1px solid rgba(53,245,216,.24)}
.t1 .withwho u{text-decoration:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:700 9.5px 'JetBrains Mono',monospace;color:#07080f;flex:none}
.t1 .withwho b{font-size:12.5px}
.t1 .withwho span{font:400 10.5px 'JetBrains Mono',monospace;color:var(--dim);margin-left:auto;text-align:right}
.t1 .routebox{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(500px 220px at 40% 30%,rgba(53,245,216,.09),transparent 70%),#080B16;margin-bottom:10px}
.t1 .rmap{display:block;width:100%;height:auto}
.t1 .rflow{animation:rflow 3.4s linear infinite}
@keyframes rflow{to{stroke-dashoffset:-80}}
@media (prefers-reduced-motion:reduce){.t1 .rflow{animation:none}}
.t1 .relev{position:relative;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.t1 .relev svg{display:block;width:100%;height:70px}
.t1 .relev span{position:absolute;font:600 8.5px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--dim);
  background:rgba(8,11,22,.85);padding:2px 6px;border-radius:4px}
.t1 .rehi{top:6px;right:10px}.t1 .relo{bottom:6px;left:10px}
.t1 .relbl{bottom:6px;right:10px;color:#35F5D8!important}
.t1 .rstats{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:11px}
@media(max-width:760px){.t1 .rstats{grid-template-columns:repeat(3,1fr)}}
.t1 .rstats div{padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.t1 .rstats u{text-decoration:none;display:block;font:700 7.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--dim)}
.t1 .rstats b{display:block;font:700 13.5px 'Space Grotesk',sans-serif;letter-spacing:-.01em;margin-top:3px}

/* connected sources */
.t1 .srcrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.t1 .srcrow:first-of-type{border-top:none}
.t1 .srcrow u{text-decoration:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  font:800 12px 'Space Grotesk',sans-serif;color:#fff}
.t1 .srcrow b{display:block;font-size:13px}
.t1 .srcrow span{font:400 10.5px 'JetBrains Mono',monospace;color:var(--dim)}
.t1 .srcrow .st{margin-left:auto;font:700 9px 'JetBrains Mono',monospace;letter-spacing:.14em;padding:5px 9px;
  border-radius:6px;flex:none}
.t1 .srcrow .st.on{color:#4BFFB0;background:rgba(75,255,176,.12);border:1px solid rgba(75,255,176,.3)}
.t1 .srcrow .st.off{color:var(--cy);background:rgba(53,245,216,.1);border:1px solid rgba(53,245,216,.3)}
.t1 .srcnote{margin-top:12px;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.035);
  border:1px dashed rgba(255,255,255,.14);font-size:11.5px;color:var(--dim);line-height:1.5}
.t1 .srcnote b{color:var(--txt)}


/* ═══════════ power bands ═══════════ */
.t1 .pwtrack{height:9px;margin:11px 0 7px;overflow:visible}
.t1 .capmark{position:absolute;top:-5px;width:2px;height:19px;border-radius:2px;background:rgba(255,255,255,.35)}
.t1 .capmark:after{content:attr(data-l);position:absolute;top:19px;left:50%;translate:-50% 0;
  font:700 6.5px 'JetBrains Mono',monospace;letter-spacing:.08em;color:rgba(255,255,255,.42);white-space:nowrap}
.t1 .capmark.forge{background:rgba(255,176,32,.75)}
.t1 .capmark.forge:after{color:rgba(255,176,32,.8)}
.t1 .pwbands{display:flex;align-items:baseline;gap:10px;margin:16px 0 6px;
  font:600 8.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--dim)}
.t1 .pwbands b{font-weight:800}
.t1 .pwbands span:last-child{margin-left:auto;letter-spacing:.04em;font-weight:400;text-transform:none}
.t1 .gppw em.fg{background:rgba(255,176,32,.16);color:#FFB020}
.t1 .gpforge{display:block;font:400 10px 'JetBrains Mono',monospace;color:#FFB020;opacity:.85;margin-top:2px}


/* ═══════════ flat/3D toggle, party-lead star, auras ═══════════ */
.t1 .charhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.t1 .charhead .lbl:after{display:none}
.t1 .segmini{margin-left:auto}
.t1 .segmini button{padding:5px 10px;font-size:9px}
.t1 .rig>svg.hero{display:block;max-width:208px;margin:0 auto;height:auto}
.t1 .charstar{position:absolute;top:8px;right:8px;z-index:6;font:700 9.5px 'JetBrains Mono',monospace;
  letter-spacing:.14em;color:#FFB020;padding:6px 10px;border-radius:8px;
  border:1px solid rgba(255,176,32,.5);background:rgba(255,176,32,.12);
  text-shadow:0 0 9px rgba(255,176,32,.9);box-shadow:0 0 18px -4px rgba(255,176,32,.7);
  animation:starpop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes starpop{from{transform:scale(.6) rotate(-8deg);opacity:0}}
.t1 .charstar[hidden]{display:none}

.t1 .aurabar{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.t1 .aurabar::-webkit-scrollbar{display:none}
.t1 .aurachip{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font:600 10px Inter,sans-serif;
  color:var(--dim);transition:.16s;letter-spacing:.02em}
.t1 .aurachip em{font-style:normal;font:700 8.5px 'JetBrains Mono',monospace;color:#4BFFB0}
.t1 .aurachip:hover{color:var(--txt);border-color:rgba(255,255,255,.25)}
/* Locked auras (Phase 6) stay visible and legible — the point is that you can
   see what exists and what it takes to earn it. Dimmed, not hidden. */
.t1 .aurachip.locked{opacity:.42;cursor:not-allowed}
.t1 .aurachip.locked:hover{color:var(--dim);border-color:rgba(255,255,255,.12)}
.t1 .aurachip.locked em{color:#6C7391;font-size:9px}
.t1 .aurachip.on{color:var(--txt);border-color:var(--cy);background:rgba(53,245,216,.1)}
.t1 .aurachip.on em{color:var(--cy)}

/* dais particles */
.t1 .dais b{position:absolute;left:50%;bottom:22px;width:5px;height:5px;border-radius:50%;
  pointer-events:none;opacity:0}
.t1 .dais b:nth-child(3){margin-left:-58px}.t1 .dais b:nth-child(4){margin-left:-32px}
.t1 .dais b:nth-child(5){margin-left:-8px}.t1 .dais b:nth-child(6){margin-left:14px}
.t1 .dais b:nth-child(7){margin-left:38px}.t1 .dais b:nth-child(8){margin-left:56px}
.t1 .dais b:nth-child(9){margin-left:2px}

/* EMBERFALL */
.t1 .dais[data-aura="ember"] i{border-color:rgba(255,138,60,.5);
  box-shadow:0 0 40px rgba(255,120,40,.35),inset 0 0 24px rgba(255,138,60,.2)}
.t1 .dais[data-aura="ember"] b{background:#FFB35C;box-shadow:0 0 8px #FF8A3C;animation:emberUp 1.9s infinite}
.t1 .dais[data-aura="ember"] b:nth-child(even){background:#FFD34D;width:4px;height:4px;animation-duration:2.4s}
.t1 .dais[data-aura="ember"] b:nth-child(4){animation-delay:.5s}.t1 .dais[data-aura="ember"] b:nth-child(5){animation-delay:1.1s}
.t1 .dais[data-aura="ember"] b:nth-child(6){animation-delay:.3s}.t1 .dais[data-aura="ember"] b:nth-child(7){animation-delay:1.5s}
.t1 .dais[data-aura="ember"] b:nth-child(8){animation-delay:.8s}.t1 .dais[data-aura="ember"] b:nth-child(9){animation-delay:1.9s}
@keyframes emberUp{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:1}
  100%{transform:translateY(-86px) scale(.35);opacity:0}}

/* SNOWFALL */
.t1 .dais[data-aura="frost"] i{border-color:rgba(190,225,255,.55);
  box-shadow:0 0 36px rgba(140,200,255,.3),inset 0 0 22px rgba(190,225,255,.18)}
.t1 .dais[data-aura="frost"] b{background:#EAF6FF;width:4px;height:4px;box-shadow:0 0 6px #BFE3FF;
  bottom:auto;top:-66px;animation:frostDown 3.1s linear infinite}
.t1 .dais[data-aura="frost"] b:nth-child(4){animation-delay:.7s}.t1 .dais[data-aura="frost"] b:nth-child(5){animation-delay:1.6s}
.t1 .dais[data-aura="frost"] b:nth-child(6){animation-delay:.4s}.t1 .dais[data-aura="frost"] b:nth-child(7){animation-delay:2.2s}
.t1 .dais[data-aura="frost"] b:nth-child(8){animation-delay:1.1s}.t1 .dais[data-aura="frost"] b:nth-child(9){animation-delay:2.7s}
@keyframes frostDown{0%{transform:translate(0,0);opacity:0}10%{opacity:.95}
  85%{opacity:.85}100%{transform:translate(9px,84px);opacity:0}}

/* AURORA */
.t1 .dais[data-aura="aurora"]{animation:auroraHue 7s ease-in-out infinite alternate}
.t1 .dais[data-aura="aurora"] i{border-color:rgba(53,245,216,.6);
  box-shadow:0 0 46px rgba(53,245,216,.4),inset 0 0 28px rgba(139,92,255,.3)}
@keyframes auroraHue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(290deg)}}

/* STORMCELL */
.t1 .dais[data-aura="storm"] i{border-color:rgba(190,160,255,.6);
  box-shadow:0 0 40px rgba(140,100,255,.4),inset 0 0 26px rgba(190,160,255,.22)}
.t1 .dais[data-aura="storm"] b{width:2px;height:13px;border-radius:1px;background:#E4D9FF;
  box-shadow:0 0 9px #A98BFF;bottom:14px;animation:bolt 1.6s steps(2,jump-none) infinite}
.t1 .dais[data-aura="storm"] b:nth-child(4){animation-delay:.35s;height:9px}
.t1 .dais[data-aura="storm"] b:nth-child(5){animation-delay:.9s}
.t1 .dais[data-aura="storm"] b:nth-child(6){animation-delay:.15s;height:16px}
.t1 .dais[data-aura="storm"] b:nth-child(7){animation-delay:1.2s;height:8px}
.t1 .dais[data-aura="storm"] b:nth-child(8){animation-delay:.6s}
.t1 .dais[data-aura="storm"] b:nth-child(9){animation-delay:1.45s;height:11px}
@keyframes bolt{0%,18%{opacity:0}6%,12%{opacity:1}30%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.t1 .dais b,.t1 .dais[data-aura="aurora"]{animation:none}}


/* pill pairs + attributes */
.t1 .pillrow{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.t1 .catpill{letter-spacing:.12em}
.t1 .attrs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}
.t1 .attr{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:7px;
  padding:7px 9px 8px;border-radius:11px;border:1px solid color-mix(in srgb,var(--ac) 32%,transparent);
  background:color-mix(in srgb,var(--ac) 8%,transparent)}
.t1 .attr i{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}
.t1 .attr b{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:#c9cee0;text-transform:uppercase}
.t1 .attr em{font:700 9.5px 'JetBrains Mono',monospace;font-style:normal;color:var(--ac)}
.t1 .attr s{grid-column:1/-1;display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.08);
  margin-top:5px;text-decoration:none;overflow:hidden}
.t1 .attr s u{display:block;height:100%;background:var(--ac);border-radius:3px;text-decoration:none;transition:width .6s ease}
@media (max-width:900px){.t1 .attrs{grid-template-columns:1fr 1fr}}


/* ═══════════════ COMMITMENTS AND THE CEREMONY (Prompt 2) ═══════════════ */
.lilc-veil{position:fixed;inset:0;background:rgba(4,5,12,.78);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:18px;z-index:120}
.lilc-veil.on{display:flex}
.lilc-card{width:min(460px,100%);max-height:88vh;overflow-y:auto;background:#10142a;
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px 20px 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lilc-h{font:700 20px Inter,sans-serif;color:#fff;letter-spacing:-.01em}
.lilc-h:focus{outline:none}
.lilc-sub{font:400 13.5px Inter,sans-serif;color:#a7aec2;margin:4px 0 16px}
.lilc-note-block{background:rgba(53,245,216,.07);border:1px solid rgba(53,245,216,.22);
  border-radius:12px;padding:11px 13px;font:400 12.5px Inter,sans-serif;color:#c8cee0;
  line-height:1.55;margin-bottom:16px}
.lilc-f{margin-bottom:15px}
.lilc-f label{display:block;font:700 10.5px Inter,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.lilc-f input,.lilc-f textarea,.lilc-f select{width:100%;min-height:44px;padding:10px 12px;
  border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#fff;font:400 14px Inter,sans-serif}
.lilc-f textarea{resize:vertical;line-height:1.5}
/* The range input is styled rather than left to the browser: the default
   is a bright blue track that belongs to no palette here, and it was the
   one obviously foreign element in the ceremony. */
.lilc-f input[type=range]{-webkit-appearance:none;appearance:none;padding:0;border:0;
  min-height:auto;height:6px;border-radius:999px;background:rgba(255,255,255,.14)}
.lilc-f input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:#35F5D8;border:0;cursor:pointer}
.lilc-f input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:#35F5D8;border:0;cursor:pointer}
.lilc-f s{display:block;text-decoration:none;font:400 11.5px Inter,sans-serif;
  color:#6b7288;margin-top:5px;line-height:1.45}
.lilc-go{width:100%;min-height:48px;border-radius:12px;background:#35F5D8;color:#08080c;
  border:0;font:800 13.5px Inter,sans-serif;letter-spacing:.02em;cursor:pointer;margin-top:4px}
.lilc-go:disabled{opacity:.6;cursor:default}
.lilc-quiet{width:100%;min-height:44px;margin-top:8px;background:none;border:0;
  color:#8b93a8;font:500 12.5px Inter,sans-serif;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
#lilc-note{margin-top:12px;font:400 12.5px Inter,sans-serif;color:#c8cee0;line-height:1.55;
  background:rgba(255,255,255,.05);border-radius:10px;padding:10px 12px}
#lilc-note.lilc-bad{background:rgba(255,77,141,.1);border:1px solid rgba(255,77,141,.3)}

/* The chronicle card. Every figure on it is the server's answer. */
.lilc-chron{background:linear-gradient(160deg,rgba(53,245,216,.1),rgba(120,80,255,.09));
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:15px 14px;margin-bottom:18px}
.lilc-chron-x{display:flex;gap:10px}
.lilc-chron-x>div{flex:1;text-align:center}
.lilc-chron-x u{display:block;text-decoration:none;font:700 9.5px Inter,sans-serif;
  letter-spacing:.11em;color:var(--dim)}
.lilc-chron-x b{display:block;font:800 21px Inter,sans-serif;color:#fff;margin-top:3px}
.lilc-chron-n{margin-top:11px;text-align:center;font:400 11.5px Inter,sans-serif;color:#8b93a8}

/* Next Adventures */
.lilc-next{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.lilc-item{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.lilc-when{flex:0 0 84px;font:700 11px 'JetBrains Mono',monospace;color:#35F5D8;padding-top:2px}
.lilc-what{flex:1;min-width:0}
.lilc-what b{display:block;font:600 14px Inter,sans-serif;color:#fff}
.lilc-what span{display:block;font:400 11.5px Inter,sans-serif;color:var(--dim);margin-top:2px}
.lilc-what em{display:block;font:italic 400 12px Inter,sans-serif;color:#8b93a8;margin-top:5px;
  line-height:1.45}
.lilc-drop{flex:0 0 auto;min-height:44px;padding:0 10px;background:none;border:0;color:#6b7288;
  font:500 11.5px Inter,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lilc-drop:hover{color:#FF8FB4}
.qcommit{background:rgba(255,255,255,.06);color:#c8cee0;border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:9px 15px;font:700 11.5px Inter,sans-serif;cursor:pointer;min-height:44px}
.qcommit:hover{background:rgba(255,255,255,.1)}

@media (max-width:520px){
  .lilc-item{flex-wrap:wrap}
  .lilc-when{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .lilc-veil{backdrop-filter:none}
}

/* ═══════════════ THE FRONT PAGE ═══════════════
   Signed-out visitors get the pitch first and the running demo directly
   beneath it. See src/ui/landing.js for why this is a section and not a
   modal. */
.lilm{display:block;padding:0 0 10px;background:
  radial-gradient(1200px 600px at 50% -10%, rgba(120,80,255,.18), transparent 60%),
  radial-gradient(900px 500px at 15% 20%, rgba(53,245,216,.10), transparent 55%)}
.lilm[hidden]{display:none}
.lilm-in{max-width:820px;margin:0 auto;padding:0 22px}
.lilm-eyebrow{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.22em;
  text-transform:uppercase;color:#35F5D8;margin:0 0 18px;padding-top:64px}
.lilm-h{font:800 clamp(32px,7vw,58px)/1.06 Inter,sans-serif;letter-spacing:-.03em;
  color:#fff;margin:0 0 18px}
.lilm-lede{font:400 clamp(15px,2.2vw,19px)/1.6 Inter,sans-serif;color:#a7aec2;
  margin:0 0 30px;max-width:600px}
.lilm-cta{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:16px}
.lilm-primary{min-height:52px;padding:0 26px;border:0;border-radius:14px;background:#35F5D8;
  color:#08080c;font:800 14.5px Inter,sans-serif;cursor:pointer}
.lilm-primary:hover{filter:brightness(1.08)}
.lilm-ghost{min-height:52px;padding:0 22px;border:1px solid rgba(255,255,255,.2);
  border-radius:14px;background:none;color:#c8cee0;font:600 14px Inter,sans-serif;cursor:pointer}
.lilm-ghost:hover{background:rgba(255,255,255,.06)}
.lilm-scroll{min-height:44px;background:none;border:0;color:#8b93a8;padding:0;
  font:500 13px Inter,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lilm-scroll:hover{color:#c8cee0}
.lilm-primary:focus-visible,.lilm-ghost:focus-visible,.lilm-scroll:focus-visible{
  outline:2px solid #35F5D8;outline-offset:3px}

.lilm-proof{padding-top:64px}
.lilm-proof h2,.lilm-privacy h2{font:800 clamp(22px,4vw,32px)/1.18 Inter,sans-serif;
  letter-spacing:-.02em;color:#fff;margin:0 0 10px}
.lilm-sub{font:400 15px/1.6 Inter,sans-serif;color:#a7aec2;margin:0 0 22px;max-width:560px}
.lilm-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lilm-card{padding:18px 16px;border-radius:16px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1)}
.lilm-card.lilm-win{background:rgba(53,245,216,.08);border-color:rgba(53,245,216,.35)}
.lilm-card u{display:block;text-decoration:none;font:700 12px 'JetBrains Mono',monospace;
  letter-spacing:.08em;color:#8b93a8;margin-bottom:8px}
.lilm-card.lilm-win u{color:#35F5D8}
.lilm-card b{display:block;font:700 17px/1.3 Inter,sans-serif;color:#fff;margin-bottom:14px}
.lilm-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.lilm-bar i{display:block;height:100%;border-radius:999px;background:#5b6480}
.lilm-win .lilm-bar i{background:linear-gradient(90deg,#35F5D8,#7C5BFF)}
.lilm-card span{display:block;margin-top:10px;font:600 12.5px Inter,sans-serif;color:#8b93a8}
.lilm-card em{font-style:normal;color:#c8cee0}
.lilm-win em{color:#35F5D8}
.lilm-foot{font:400 13px/1.6 Inter,sans-serif;color:#6b7288;margin:16px 0 0}

.lilm-how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:64px}
.lilm-step u{display:block;text-decoration:none;font:800 12px 'JetBrains Mono',monospace;
  color:#35F5D8;letter-spacing:.14em;margin-bottom:9px}
.lilm-step b{display:block;font:700 16px/1.3 Inter,sans-serif;color:#fff;margin-bottom:7px}
.lilm-step p{font:400 14px/1.6 Inter,sans-serif;color:#a7aec2;margin:0}

.lilm-privacy{padding-top:64px;max-width:700px}
.lilm-privacy p{font:400 15px/1.65 Inter,sans-serif;color:#a7aec2;margin:0 0 12px}
.lilm-age{font:600 13px Inter,sans-serif !important;color:#6b7288 !important}
.lilm-tail{padding:56px 22px 64px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.lilm-tail .lilm-foot{margin-top:14px}

@media (max-width:720px){
  .lilm-vs,.lilm-how{grid-template-columns:1fr}
  .lilm-eyebrow{padding-top:40px}
  .lilm-proof,.lilm-how,.lilm-privacy{padding-top:48px}
  .lilm-cta{flex-direction:column}
  .lilm-primary,.lilm-ghost{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .lilm-primary,.lilm-ghost{transition:none}
}

/* While the front page is what you are looking at, the demo's fixed-position
   chrome stays out of the way — it belongs to the app below, and a "Party
   chat" pill with an unread badge over a marketing page reads as a live
   notification when it is a prop. */
.lilm-reading .dockpill,.lilm-reading .chatdock{opacity:0;pointer-events:none}
.dockpill,.chatdock{transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){.dockpill,.chatdock{transition:none}}

/* The top bar at 390px carries the brand, a sound toggle and now TWO auth
   controls, and it wrapped to a second row. The sound toggle is a prototype
   affordance rather than a product feature, and it is the only thing here
   that nobody arrives looking for — so it steps aside on a narrow screen and
   the two doors stay on one line. Not removed: it is still there on any
   screen with room for it, and nothing in the app depends on its position. */
@media (max-width:460px){
  #chrome #sfx{display:none}
  #chrome .brandmark{font-size:10px;letter-spacing:.14em}
}