:root {
  --night: #1c0508;
  --wall: #8e1b28;
  --paper: #f7ede8;
  --paper-2: #efe0da;
  --ink: #2a0b11;
  --ink-soft: #7a4b53;
  --glow: #9fe6ff;
  --alert: #ff5b4f;
  --stale: #f0b261;
  --sleep: #cdb8ea;
  --away: #a07f85;
  --led: #7dffb0;
  --gold: #ffd166;
  --glass: rgba(30, 6, 11, .62);
  --glass-line: rgba(255, 255, 255, .13);
  --ui: "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --led-font: "DotGothic16", ui-monospace, monospace;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --inv: 1;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #3a0910 0%, var(--night) 70%);
  color: var(--paper);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
svg { flex: none; }

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) 16px 26px;
  background: linear-gradient(to bottom, rgba(22, 3, 6, .9), rgba(22, 3, 6, 0));
  pointer-events: none;
  transition: transform .9s var(--out), opacity .9s var(--out);
}
.bar > * { pointer-events: auto; }
body.booting .bar { transform: translateY(-120%); opacity: 0; }

.brand { display: flex; align-items: center; gap: 12px; }
.mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1e1dc;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 18px rgba(0, 0, 0, .4);
  transition: transform .5s var(--spring);
}
.brand:hover .mark { transform: rotate(-8deg) scale(1.08); }
.brand h1 {
  margin: 0;
  font: 400 23px/1.05 var(--led-font);
  letter-spacing: .02em;
  color: #ffe9e9;
  text-shadow: 0 0 14px rgba(255, 70, 70, .5);
}
.sub { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 12px; color: rgba(247, 237, 232, .72); }
.sub #clock { font-family: var(--led-font); font-size: 13px; color: #fff; }
.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px 1px 7px;
  border-radius: 999px;
  background: rgba(255, 70, 70, .16);
  color: #ffb1b1;
  font-weight: 700;
  font-size: 11px;
}
.live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #ff5050; }
.live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ff5050; animation: ping 1.8s var(--out) infinite; }

@keyframes ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.stats { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stat {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: rgba(247, 237, 232, .75);
  transition: transform .5s var(--spring), opacity .5s, border-color .3s;
  transition-delay: calc(var(--d, 0) * 1ms);
}
.stat:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .25); }
.stat svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat b { font: 400 21px/1 var(--led-font); color: #fff; min-width: 1ch; font-variant-numeric: tabular-nums; }
.s-working svg { color: var(--glow); animation: spin 6s linear infinite; }
.s-live svg { color: #ff8585; }
.s-live svg path { animation: radar 1.6s ease-in-out infinite; }
.s-review svg { color: var(--gold); }
.s-shipped svg { color: var(--led); }
.stat.bump { animation: bump .7s var(--spring); }
.stat.bump b { animation: numglow .9s ease-out; }
body.booting .stat { opacity: 0; transform: translateY(-10px); }
.stats .stat:nth-child(1) { --d: 150; }
.stats .stat:nth-child(2) { --d: 230; }
.stats .stat:nth-child(3) { --d: 310; }
.stats .stat:nth-child(4) { --d: 390; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes radar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes bump { 30% { transform: scale(1.12); } 60% { transform: scale(.97); } }
@keyframes numglow { 0% { text-shadow: 0 0 18px #fff, 0 0 30px var(--glow); } 100% { text-shadow: none; } }

.tools { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.tools button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .35s var(--spring), background .2s, border-color .2s, color .2s;
}
.tools button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tools button:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); transform: translateY(-1px); }
.tools button:active { transform: scale(.93); transition-duration: .08s; }
#listBtn[aria-expanded="true"] { background: var(--paper); color: var(--ink); }
.zoom { display: inline-flex; gap: 4px; }
.zoom button { width: 36px; padding: 0; justify-content: center; }
#zoomFit:hover svg { animation: breathe .8s ease-in-out infinite; }
.lock .shackle { transition: transform .45s var(--spring); transform-origin: 16px 11px; }
#lockBtn.on { border-color: rgba(125, 255, 176, .5); color: var(--led); }
#lockBtn.on .shackle, .login.ok .shackle { transform: translateY(-2px) rotate(28deg); }

@keyframes breathe { 50% { transform: scale(1.18); } }

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#viewport.dragging { cursor: grabbing; }

#scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.room { position: absolute; left: 0; top: 0; }
.room .grid line { stroke: rgba(255, 196, 204, .08); stroke-width: 1.3; }
.room .tiles polygon { fill: rgba(255, 255, 255, .025); }
.room .clouds { animation: drift 46s ease-in-out infinite alternate; }
.room[data-night="1"] .sky-day, .room[data-night="0"] .sky-night { display: none; }
.room .star { animation: twinkle 3.2s steps(4) infinite; animation-delay: var(--d); }

@keyframes drift { from { transform: translateX(-26px); } to { transform: translateX(30px); } }
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }

.ground { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.objects { position: absolute; inset: 0; z-index: 2; }
.fx { display: contents; }
.lit { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tags { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.tint, .vignette, .beams, .grain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.tint { background: #ff8b9b; mix-blend-mode: multiply; opacity: .3; transition: opacity 1.6s, background 1.6s; }
#scene[data-mood="night"] .tint { background: #e06a86; opacity: .42; }
#scene[data-mood="day"] .tint { opacity: .24; }
.vignette {
  background: radial-gradient(circle at var(--jx) var(--jy), rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 420px, rgba(40, 0, 10, .5) 1150px, rgba(18, 0, 5, .82) 1900px);
  mix-blend-mode: multiply;
}
.beams { mix-blend-mode: screen; transition: opacity 1.4s ease; }
.beams .beam-set { animation: beams 14s ease-in-out infinite alternate; transform-origin: 30% 0; }
.beams .spot { animation: spot 6s ease-in-out infinite alternate; }
#scene[data-mood="night"] .beams .beam-set { opacity: .45; }
.grain { background-image: var(--grain); background-size: 160px; opacity: .07; mix-blend-mode: overlay; animation: grain .5s steps(3) infinite; }
#scene.dark .tint { opacity: .85; background: #3a0610; }
#scene.dark .tags, #scene.dark .lit { opacity: 0; }
.tags, .lit { transition: opacity 1.2s ease .3s; }
#scene.dark .beams { opacity: 0; }

@keyframes beams { from { opacity: .75; transform: skewX(-1.5deg); } to { opacity: 1; transform: skewX(1.5deg); } }
@keyframes spot { from { opacity: .85; } to { opacity: 1; } }
@keyframes grain { 33% { background-position: 37px 61px; } 66% { background-position: 91px 13px; } }

.prop { position: absolute; pointer-events: none; filter: brightness(.8) saturate(.9); }
.prop.swap { animation: squash .45s var(--spring); }
.prop-vending { filter: brightness(1) drop-shadow(0 0 22px rgba(255, 214, 170, .4)); animation: hum 3.4s ease-in-out infinite; }
.prop-vending.buying { animation: buying .6s ease-in-out 3; }
.prop-server { filter: brightness(.9); }
.prop-plant, .prop-plant2 { transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
.prop-plant2 { animation-duration: 9s; animation-delay: -3s; }
.prop-cat { transform-origin: 50% 90%; animation: breath 3.6s ease-in-out infinite; }
.prop-cat.empty { animation: none; }
.prop-cat.pettable { pointer-events: auto; cursor: pointer; }
.pile { filter: brightness(1.02); transform-origin: 50% 100%; }
.courier { filter: brightness(1.05) drop-shadow(0 0 10px rgba(159, 230, 255, .5)); transition: opacity .4s; }

@keyframes squash { 0% { transform: scale(1); } 35% { transform: scale(1.04, .96); } 70% { transform: scale(.98, 1.02); } 100% { transform: scale(1); } }
@keyframes hum { 0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(255, 214, 170, .35)); } 50% { filter: brightness(1.06) drop-shadow(0 0 28px rgba(255, 214, 170, .5)); } }
@keyframes buying { 50% { filter: brightness(1.25) drop-shadow(0 0 34px rgba(255, 230, 160, .8)); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg); } }
@keyframes breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.035); } }

.desk {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition: translate .35s var(--spring);
}
.desk:focus-visible { outline: none; }
.desk .hit {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: pointer;
  clip-path: polygon(2% 48%, 32% 26%, 40% 4%, 78% 4%, 86% 30%, 100% 56%, 64% 96%, 2% 70%);
}
.desk[data-state="filler"] .hit { display: none; }
.desk:hover, .desk:focus-visible { translate: 0 -3px; }

.desk .sprite { display: block; width: 100%; height: 100%; transition: filter .7s ease; filter: brightness(.62) saturate(.75); }
.desk[data-state="working"] .sprite { filter: brightness(1.06) saturate(1.05) drop-shadow(1px 0 0 rgba(255, 40, 90, .4)) drop-shadow(-1px 0 0 rgba(60, 200, 255, .35)); }
.desk[data-state="stuck"] .sprite { filter: brightness(1) saturate(1) drop-shadow(0 0 10px rgba(255, 91, 79, .55)); }
.desk[data-state="stale"] .sprite { filter: brightness(.7) saturate(.8); }
.desk[data-state="away"] .sprite { filter: brightness(.48) saturate(.6); }
.desk[data-state="filler"] .sprite { filter: brightness(.32) saturate(.4); }
.desk.is-jilian .sprite { filter: brightness(1.12) saturate(1.05) drop-shadow(1px 0 0 rgba(255, 40, 90, .4)) drop-shadow(-1px 0 0 rgba(60, 200, 255, .35)); }
.desk.is-jilian[data-state="idle"] .sprite { filter: brightness(.8) saturate(.85); }
.desk.is-jilian[data-state="away"] .sprite { filter: brightness(.7) saturate(.8); }
.desk:hover .sprite, .desk:focus-visible .sprite { filter: brightness(1.16) saturate(1.05) drop-shadow(0 0 2px #fff) drop-shadow(0 0 12px var(--glow)); }
#scene.dark .desk .sprite { filter: brightness(.12) saturate(.2); transition: none; }
#scene.dark .desk.power .sprite { animation: power .7s steps(1) forwards; }
#scene.dark .desk .glow { opacity: 0 !important; }

@keyframes power {
  0% { filter: brightness(.12) saturate(.2); }
  15% { filter: brightness(.9) saturate(.9); }
  25% { filter: brightness(.2) saturate(.3); }
  40% { filter: brightness(1) saturate(1); }
  55% { filter: brightness(.35) saturate(.5); }
  100% { filter: brightness(.62) saturate(.75); }
}

.glow {
  position: absolute;
  width: 150px;
  height: 120px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(160, 232, 255, .55), rgba(160, 232, 255, 0));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
}
.desk[data-state="working"] .glow, .desk.is-jilian[data-state="working"] .glow { opacity: .85; animation: flicker 4.2s infinite; }
.desk[data-mimic="running"] .glow { background: radial-gradient(closest-side, rgba(140, 255, 180, .55), rgba(140, 255, 180, 0)); }
.desk[data-mimic="reading"] .glow { background: radial-gradient(closest-side, rgba(255, 228, 160, .55), rgba(255, 228, 160, 0)); }
.desk[data-mimic="thinking"] .glow { background: radial-gradient(closest-side, rgba(205, 184, 234, .6), rgba(205, 184, 234, 0)); animation: think 1.6s ease-in-out infinite; }
.desk[data-mimic="browsing"] .glow { background: radial-gradient(closest-side, rgba(120, 180, 255, .6), rgba(120, 180, 255, 0)); }
.desk.lights-on .glow { animation: lights 1.4s ease-out; }
.desk.sat { animation: sat .5s var(--spring); }
.desk.alarm { animation: shake .5s ease-in-out 2; }

@keyframes flicker { 0%, 46%, 54%, 100% { opacity: .85; } 50% { opacity: .55; } 52% { opacity: .95; } }
@keyframes think { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes lights { 0% { opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 35% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); } }
@keyframes shake { 0%, 100% { translate: 0; } 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
@keyframes sat { 0% { translate: 0 0; } 35% { translate: 0 3px; } 70% { translate: 0 -2px; } 100% { translate: 0 0; } }

.ring {
  position: absolute;
  width: 230px;
  height: 115px;
  margin: -57px 0 0 -115px;
  border-radius: 50%;
  border: 2px solid rgba(159, 230, 255, 0);
  background: radial-gradient(closest-side, rgba(159, 230, 255, .22), rgba(159, 230, 255, 0));
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .45s var(--spring);
}
.ring.on { opacity: 1; transform: scale(1); border-color: rgba(159, 230, 255, .55); animation: ringpulse 1.6s ease-in-out infinite; }

@keyframes ringpulse { 50% { border-color: rgba(159, 230, 255, .2); box-shadow: 0 0 22px rgba(159, 230, 255, .35); } }

.tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(24, 4, 8, .78);
  backdrop-filter: blur(4px);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  transform: translate(-50%, -100%) scale(var(--inv));
  transform-origin: 50% 100%;
  transition: opacity .3s, border-color .3s, box-shadow .3s;
}
.tag b { font-weight: 700; }
.tag em { padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); font: 400 10px/1.5 var(--led-font); font-style: normal; color: #ffd9d9; }
.tag .os { width: 11px; height: 11px; fill: rgba(255, 255, 255, .7); margin-left: 1px; }
.tag[data-state="working"] { border-color: rgba(159, 230, 255, .65); box-shadow: 0 0 14px rgba(159, 230, 255, .3); }
.tag[data-live="1"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff5050; box-shadow: 0 0 6px #ff5050; animation: blinkdot 1.4s steps(2) infinite; }
.tag[data-state="stuck"] { border-color: rgba(255, 91, 79, .8); }
.tag:is([data-state="idle"], [data-state="stale"], [data-state="away"]) { opacity: .72; }
.tag[data-state="jilian"] { padding-left: 9px; background: var(--paper); color: var(--ink); border-color: #fff; }
.tag[data-state="jilian"] .os { fill: var(--ink); }
#scene[data-zoom="far"] .tag:is([data-state="idle"], [data-state="stale"], [data-state="away"]) { opacity: 0; }

@keyframes blinkdot { 50% { opacity: .25; } }

.plogo, .flogo { width: 16px; height: 16px; border-radius: 5px; flex: none; object-fit: cover; }
.plogo.mono, .flogo.mono { display: inline-grid; place-items: center; background: var(--c); color: #fff; font: 800 10px/1 var(--ui); }

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  transform: translate(-50%, -100%) scale(var(--inv));
  transform-origin: 50% 100%;
}
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.chip .ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chip.pop { animation: pop .55s var(--spring); }
.chip.m-thinking { background: #efe6ff; }
.chip.m-thinking .ic { fill: currentColor; stroke: none; }
.chip.m-thinking .ic circle { animation: dots 1.2s infinite; }
.chip.m-thinking .ic circle:nth-child(2) { animation-delay: .15s; }
.chip.m-thinking .ic circle:nth-child(3) { animation-delay: .3s; }
.chip.m-typing { background: #def6ff; }
.chip.m-typing .ic { animation: scribble .5s ease-in-out infinite alternate; }
.chip.m-running { background: #14231a; color: #8dffb9; font-family: var(--led-font); font-weight: 400; }
.chip.m-running .ic { animation: blinkdot .8s steps(2) infinite; }
.chip.m-reading { background: #fff2d6; }
.chip.m-reading .ic { animation: look 2.4s ease-in-out infinite; }
.chip.m-browsing { background: #dfeaff; }
.chip.m-browsing .ic { animation: spin 3s linear infinite; }
.chip.m-delegating { background: #f0e0ff; }
.chip.m-planning { background: #e8ffe0; }
.chip.m-working, .chip.m-arriving { background: #def6ff; }
.chip.m-working .ic { animation: spin 4s linear infinite; }
.chip.ask { background: var(--alert); color: #fff; animation: pop .55s var(--spring), ask 1.6s ease-out .6s infinite; }
.chip.ask .ic { animation: wave 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.chip.poi { background: #fff7e0; }
.chip.poi .ic { animation: bob 1.4s ease-in-out infinite; }
.chip.zzz {
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--sleep);
  font: 400 17px/1 var(--led-font);
  text-shadow: 0 0 8px rgba(205, 184, 234, .6);
  animation: float 3.4s ease-in-out infinite;
}
.chip.zzz::after { content: "z"; left: 12px; top: -10px; bottom: auto; width: auto; height: auto; margin: 0; background: none; transform: none; font-size: 12px; opacity: .7; }
.chip.zzz::before { content: "z"; position: absolute; left: 21px; top: -19px; font-size: 9px; opacity: .45; }
.chip.alert {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--alert);
  color: #fff;
  font: 800 16px/1 var(--ui);
  animation: pulse 1.8s ease-in-out infinite;
}
.chip.alert::after { display: none; }
.wchip { z-index: 2; }

@keyframes pop { 0% { opacity: 0; scale: .4; } 60% { opacity: 1; scale: 1.12; } 100% { scale: 1; } }
@keyframes dots { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes scribble { from { transform: translate(-1px, 1px) rotate(-8deg); } to { transform: translate(1px, -1px) rotate(6deg); } }
@keyframes look { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1.5px); } }
@keyframes ask { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 79, .6), 0 6px 14px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 12px rgba(255, 91, 79, 0), 0 6px 14px rgba(0, 0, 0, .35); } }
@keyframes wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes float { 0%, 100% { translate: 0 0; opacity: .9; } 50% { translate: 0 -6px; opacity: .6; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 91, 79, .25), 0 0 16px rgba(255, 91, 79, .7); } 50% { box-shadow: 0 0 0 7px rgba(255, 91, 79, .12), 0 0 22px rgba(255, 91, 79, .9); } }

.glyph {
  position: absolute;
  font: 400 13px/1 var(--led-font);
  color: var(--glow);
  text-shadow: 0 0 8px currentColor;
  pointer-events: none;
  animation: rise 1.5s var(--out) forwards;
  transform: translate(-50%, 0) scale(var(--inv));
}
.g-running { color: #8dffb9; }
.g-reading { color: #ffe4a0; }
.g-browsing { color: #9cc2ff; }
.g-delegating { color: #e0b8ff; }
.g-planning { color: #c4ff9c; }

@keyframes rise {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: var(--dx) var(--dy); rotate: var(--r); }
}

.walker {
  position: absolute;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: pointer;
  transform: scaleX(var(--flip, 1));
  filter: drop-shadow(1px 0 0 rgba(255, 40, 90, .35)) drop-shadow(-1px 0 0 rgba(60, 200, 255, .3));
  transition: opacity .25s, filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.walker:hover { filter: brightness(1.15) drop-shadow(0 0 8px var(--glow)); }
.walker.enter { animation: enter .6s var(--out); }
.walker.stand { animation: stand .4s var(--spring); }
.walker.leave { opacity: 0; }
.walker.sit { opacity: 0; transition: opacity .15s; }
.walker.cat { filter: none; }
.walker.cat.sitting { background-image: url(art/cat-sit.webp) !important; background-size: contain !important; background-position: 50% 100% !important; }
.wshadow { position: absolute; width: 46px; height: 16px; margin: -8px 0 0 -23px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 0, 5, .45), rgba(20, 0, 5, 0)); }

@keyframes enter { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes stand { 0% { translate: 0 6px; scale: 1 .9; } 100% { translate: 0 0; scale: 1; } }

.sticky {
  position: absolute;
  min-width: 46px;
  padding: 5px 7px 6px;
  background: #ffe37d;
  color: var(--ink);
  font: 400 18px/1 var(--led-font);
  text-align: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  transform: rotate(-5deg) scale(var(--inv));
  transform-origin: 50% 100%;
  animation: flutter 5s ease-in-out infinite;
}
.sticky::after { content: "to review"; display: block; margin-top: 3px; font: 700 9px/1 var(--ui); opacity: .7; }
.sticky.bump { animation: stickybump .5s var(--spring); }

@keyframes flutter { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.5deg; } }
@keyframes stickybump { 40% { scale: 1.3; rotate: 6deg; } }

.flying { position: absolute; left: 0; top: 0; width: 44px; margin: -14px 0 0 -22px; pointer-events: none; z-index: 10; }
.confetti { position: absolute; width: 7px; height: 4px; border-radius: 1px; pointer-events: none; }
.heart { position: absolute; color: #ff7aa2; font-size: 16px; pointer-events: none; text-shadow: 0 0 8px rgba(255, 122, 162, .7); animation: heart 1.4s var(--out) forwards; opacity: 0; }
.paper-ball { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 45% 55% 50% 40%; background: #f4ecea; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .15); pointer-events: none; }
.print-sheet { position: absolute; width: 26px; height: 18px; margin-left: -13px; background: #fff; border-radius: 1px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transform: skewY(26deg); animation: print 2.4s var(--out) forwards; }

@keyframes heart { 0% { opacity: 0; translate: 0 0; scale: .5; } 20% { opacity: 1; scale: 1.1; } 100% { opacity: 0; translate: var(--dx) -60px; scale: .9; } }
@keyframes print { 0% { opacity: 0; translate: 0 -6px; } 20% { opacity: 1; } 70% { opacity: 1; translate: 10px 6px; } 100% { opacity: 0; translate: 14px 10px; } }

.motes i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff3f0;
  box-shadow: 0 0 6px rgba(255, 240, 235, .8);
  opacity: 0;
  scale: var(--s);
  animation: mote var(--d) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes mote { 0% { opacity: 0; translate: 0 0; } 20% { opacity: .55; } 80% { opacity: .35; } 100% { opacity: 0; translate: var(--dx) var(--dy); } }

.steam { position: absolute; }
.steam i { position: absolute; width: 8px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); animation: steam 2.6s ease-out infinite; opacity: 0; }
.steam i:nth-child(2) { left: 6px; animation-delay: .9s; }
.steam i:nth-child(3) { left: -5px; animation-delay: 1.7s; }
.steam.strong i { animation-duration: 1.4s; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); }

@keyframes steam { 0% { opacity: 0; translate: 0 0; scale: .6; } 30% { opacity: .9; } 100% { opacity: 0; translate: 4px -34px; scale: 1.6; } }

.leds { position: absolute; }
.leds i { position: absolute; width: 4px; height: 3px; border-radius: 1px; background: var(--led); box-shadow: 0 0 5px var(--led); animation: led var(--d) steps(2) infinite; animation-delay: var(--delay); }
.leds i.amber { background: #ffc35a; box-shadow: 0 0 5px #ffc35a; }
.leds.busy i { animation-duration: .25s; }

@keyframes led { 50% { opacity: .15; } }

.bubbles { position: absolute; }
.bubbles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); opacity: 0; }
.bubbles i:nth-child(2) { left: 6px; }
.bubbles i:nth-child(3) { left: 2px; }
.bubbles i:nth-child(4) { left: 9px; }
.bubbles.glug i, .bubbles.burst i { animation: bubble 1.3s ease-out 3; }
.bubbles.glug i:nth-child(2), .bubbles.burst i:nth-child(2) { animation-delay: .3s; }
.bubbles.glug i:nth-child(3), .bubbles.burst i:nth-child(3) { animation-delay: .55s; }
.bubbles.glug i:nth-child(4), .bubbles.burst i:nth-child(4) { animation-delay: .8s; }

@keyframes bubble { 0% { opacity: 0; translate: 0 26px; scale: .6; } 20% { opacity: 1; } 100% { opacity: 0; translate: 2px -6px; scale: 1.2; } }

.flare {
  position: absolute;
  width: 360px;
  height: 260px;
  margin: -200px 0 0 -180px;
  background: radial-gradient(closest-side, rgba(220, 240, 255, .55), rgba(220, 240, 255, 0));
  mix-blend-mode: screen;
  opacity: 0;
}
.flare.on { animation: flare 1.2s var(--out); }

@keyframes flare { 0% { opacity: 0; scale: .6; } 25% { opacity: 1; scale: 1.05; } 100% { opacity: 0; scale: 1.2; } }

.exit {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: skewY(26.565deg);
  transform-origin: 0 0;
}
.exit .sign {
  padding: 3px 14px 2px;
  border: 3px solid #1a0003;
  background: #3d0007;
  color: #ffe1e1;
  font: 400 44px/1 var(--led-font);
  letter-spacing: .06em;
  text-shadow: 0 0 6px #ff4040, 0 0 18px #ff2020;
  box-shadow: 0 0 28px rgba(255, 40, 40, .55), inset 0 0 10px rgba(255, 0, 0, .45);
}
.exit .sign.flicker { animation: neon 1.1s steps(1); }
.exit .shipped {
  padding: 3px 9px;
  border: 1px solid #5a0a14;
  background: rgba(18, 0, 4, .85);
  color: #ffb7b7;
  font: 400 19px/1.2 var(--led-font);
  white-space: nowrap;
}
.exit .shipped b { color: #fff; font-weight: 400; }
.exit.flash .sign { animation: exitflash 1.2s ease-out; }

@keyframes neon { 0%, 100% { opacity: 1; } 10% { opacity: .35; } 18% { opacity: 1; } 30% { opacity: .5; } 34% { opacity: 1; } 70% { opacity: .7; } 74% { opacity: 1; } }
@keyframes exitflash { 0% { box-shadow: 0 0 60px rgba(255, 80, 80, 1), inset 0 0 18px rgba(255, 120, 120, .9); background: #7a0a12; } 100% { box-shadow: 0 0 28px rgba(255, 40, 40, .55), inset 0 0 10px rgba(255, 0, 0, .45); } }

.board {
  position: absolute;
  padding: 9px 14px 11px;
  border: 4px solid #2a0a10;
  border-radius: 5px;
  background: #130509;
  box-shadow: 0 0 0 2px #4a0e18, 0 14px 30px rgba(0, 0, 0, .5), inset 0 0 30px rgba(255, 60, 60, .06);
  color: #ffdada;
  font: 400 21px/1.45 var(--led-font);
  transform: skewY(26.565deg);
  transform-origin: 0 0;
}
.board::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px); pointer-events: none; animation: scan 6s linear infinite; }
.board-head { display: flex; justify-content: space-between; margin: 0 0 6px; color: #ff9d9d; }
.board ul { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 18px; font-size: 19px; }
.board li { display: flex; align-items: center; gap: 7px; break-inside: avoid; }
.board li.flip { animation: flipin .5s var(--out) backwards; animation-delay: calc(var(--i) * 45ms); }
.board li i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.board li.up i { background: var(--led); box-shadow: 0 0 6px var(--led); }
.board li.down i { background: var(--alert); box-shadow: 0 0 6px var(--alert); animation: blinkdot 1s steps(2) infinite; }
.board li.down { color: #ffb0a8; }

@keyframes scan { from { background-position: 0 0; } to { background-position: 0 40px; } }
@keyframes flipin { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }

.clock { position: absolute; transform: skewY(-26.565deg); transform-origin: 100% 0; }
.clock .face {
  position: relative;
  width: 88px;
  height: 88px;
  border: 5px solid #2a0a10;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffdfb, #e9dfda);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), inset 0 -3px 6px rgba(0, 0, 0, .12);
}
.clock i { position: absolute; left: 50%; bottom: 50%; background: var(--ink); border-radius: 2px; transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--a, 0deg)); }
.clock .h { width: 4px; height: 22px; }
.clock .m { width: 3px; height: 33px; }
.clock .s { width: 1.5px; height: 36px; background: #d8232f; }
.clock b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #d8232f; }

.feed {
  position: fixed;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 15;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: auto;
  cursor: pointer;
  animation: feedin .6s var(--spring);
  transition: opacity .45s, transform .45s var(--out);
}
.feed-item p { flex: 1; margin: 0; color: rgba(247, 237, 232, .85); }
.feed-item p b { color: #fff; }
.feed-item.good { border-color: rgba(125, 255, 176, .35); }
.feed-item.ask { border-color: rgba(255, 91, 79, .5); }
.feed-item.out { opacity: 0; transform: translateX(-24px) scale(.96); }
.feed-ic { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .1); }
.feed-ic .ic { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feed-item.good .feed-ic { background: rgba(125, 255, 176, .2); }
.feed-item.ask .feed-ic { background: rgba(255, 91, 79, .3); }

@keyframes feedin { 0% { opacity: 0; transform: translateX(-30px) scale(.9); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }

.avatar, .portrait {
  display: block;
  flex: none;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-color: #e7d3cc;
}
.avatar {
  --s: .34;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-size: calc(var(--bw) * var(--s)) calc(var(--bh) * var(--s));
  background-position: calc(17px - var(--hx) * var(--s)) calc(19px - var(--hy) * var(--s));
}
.portrait {
  --s: .62;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background-size: calc(var(--bw) * var(--s)) calc(var(--bh) * var(--s));
  background-position: calc(36px - var(--hx) * var(--s)) calc(40px - var(--hy) * var(--s));
  box-shadow: inset 0 0 0 2px rgba(42, 11, 17, .1);
}
.portrait.working { box-shadow: 0 0 0 3px #29a8d8, 0 0 18px rgba(41, 168, 216, .45); }
.portrait.stuck { box-shadow: 0 0 0 3px var(--alert); }
.avatar.away, .portrait.away { filter: grayscale(.7) brightness(.85); }

.card {
  position: fixed;
  z-index: 30;
  width: 330px;
  max-height: calc(100dvh - 90px);
  overflow: auto;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .1);
  overscroll-behavior: contain;
  opacity: 0;
  transform: scale(.85);
}
.card.in { opacity: 1; transform: none; transition: opacity .25s, transform .45s var(--spring); }
.card.leaving { opacity: 0; transform: scale(.92); transition: opacity .16s, transform .18s; }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--wall), #d8445a, var(--wall)); background-size: 200% 100%; border-radius: 18px 18px 0 0; animation: sheen 4s linear infinite; }
.card.in > * { animation: rise-in .5s var(--out) backwards; }
.card.in > :nth-child(2) { animation-delay: .04s; }
.card.in > :nth-child(3) { animation-delay: .08s; }
.card.in > :nth-child(4) { animation-delay: .12s; }
.card.in > :nth-child(5) { animation-delay: .16s; }
.card.in > :nth-child(6) { animation-delay: .2s; }
.card.in > :nth-child(n+7) { animation-delay: .24s; }
.card.full { width: 380px; }
.card header { display: flex; align-items: center; gap: 13px; }
.card h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; }
.card .proj, .card .mach { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.card .proj em { padding: 0 6px; border-radius: 6px; background: var(--paper-2); font: 400 11px/1.6 var(--led-font); font-style: normal; color: var(--ink-soft); }
.card .mach { margin-top: 2px; font-weight: 500; color: var(--ink-soft); }
.card .mach .os { width: 13px; height: 13px; fill: currentColor; }
.state { display: flex; align-items: center; gap: 8px; margin: 13px 0 0; padding: 9px 11px; border-radius: 12px; background: var(--paper-2); font-weight: 700; }
.state .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.state.working { background: #def3fb; color: #0f5e7d; }
.state.working .ic { animation: spin 4s linear infinite; }
.state.stuck { background: #ffe1dd; color: #b3261e; }
.state.stale { background: #fff0d9; color: #8a5a10; }
.state.idle { background: #efe8f8; color: #5c4a7a; }
.state.away { color: var(--ink-soft); }
.session { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #b3261e; }
.live-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ff4747; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ff4747; animation: ping 1.6s var(--out) infinite; }
.now { display: grid; gap: 2px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); }
.now b, .card li b, .counts dd, .card h3 span { font-family: var(--led-font); font-weight: 400; }
.now b { color: var(--wall); }
.now small { color: var(--ink-soft); font-size: 12px; }
.now i, .card li i { color: var(--ink-soft); }
.counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 0; }
.counts div { padding: 8px 10px; border-radius: 12px; background: var(--paper-2); transition: transform .3s var(--spring); }
.counts div:hover { transform: translateY(-2px); }
.counts dt { color: var(--ink-soft); font-size: 11px; line-height: 1.2; }
.counts dd { margin: 2px 0 0; font-size: 21px; }
.card section h3 { display: flex; justify-content: space-between; margin: 16px 0 4px; font-size: 13px; font-weight: 800; }
.card section h3 span { color: var(--ink-soft); }
.card ul { margin: 0; padding: 0; list-style: none; }
.card li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 7px 4px; border-top: 1px solid rgba(42, 11, 17, .1); border-radius: 6px; transition: background .2s; }
.card li:hover { background: rgba(142, 27, 40, .06); }
.card li a { display: flex; gap: 8px; color: inherit; text-decoration: none; }
.card li b { color: var(--wall); font-size: 13px; white-space: nowrap; }
.card li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card time { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.hint, .lock-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; color: var(--ink-soft); font-size: 12px; }
.lock-hint .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.lock-hint button { padding: 0; border: 0; background: none; color: var(--wall); font-weight: 800; text-decoration: underline; cursor: pointer; }
.card .close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--ink); cursor: pointer; transition: transform .3s var(--spring), background .2s; }
.card .close:hover { transform: rotate(90deg); background: #e6d2cb; }
.card .close .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes sheen { to { background-position: -200% 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.drawer {
  position: fixed;
  top: 72px;
  right: 12px;
  bottom: 12px;
  z-index: 25;
  width: 350px;
  overflow: auto;
  padding: 16px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: rgba(26, 5, 9, .9);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  overscroll-behavior: contain;
  transform: translateX(calc(100% + 24px));
  opacity: .4;
  transition: transform .5s var(--out), opacity .35s;
}
.drawer.open { transform: none; opacity: 1; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; }
.drawer h2 { margin: 0; font: 400 22px/1 var(--led-font); }
.drawer-head p { margin: 4px 0 0; font-size: 12px; color: rgba(247, 237, 232, .6); }
.drawer-head button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--glass-line); border-radius: 10px; background: none; cursor: pointer; transition: transform .3s var(--spring); }
.drawer-head button:hover { transform: rotate(90deg); }
.drawer-head svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 10px; padding: 0; list-style: none; font-size: 12px; color: rgba(247, 237, 232, .7); }
.legend li { display: flex; align-items: center; gap: 6px; }
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--away); }
.dot.working { background: var(--glow); box-shadow: 0 0 6px var(--glow); }
.dot.stuck { background: var(--alert); }
.dot.stale { background: var(--stale); }
.dot.idle { background: var(--sleep); }
#roster { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.drawer.open #roster li { animation: slidein .5s var(--out) backwards; animation-delay: calc(var(--i) * 35ms + 120ms); }
#roster button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; transition: background .2s, transform .3s var(--spring); }
#roster button:hover { background: rgba(255, 255, 255, .07); transform: translateX(3px); }
#roster .avatar { --s: .36; width: 40px; height: 40px; border-radius: 12px; background-position: calc(20px - var(--hx) * var(--s)) calc(22px - var(--hy) * var(--s)); }
#roster .avatar.working { box-shadow: 0 0 0 2px var(--glow); }
#roster .avatar.stuck { box-shadow: 0 0 0 2px var(--alert); }
#roster .who { display: grid; flex: 1; min-width: 0; }
#roster b { font-weight: 800; }
#roster .meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(247, 237, 232, .7); }
#roster .meta .plogo { width: 14px; height: 14px; border-radius: 4px; }
#roster .meta .os { width: 11px; height: 11px; fill: currentColor; }
#roster em { overflow: hidden; margin-top: 1px; font-size: 12px; font-style: normal; color: rgba(247, 237, 232, .55); text-overflow: ellipsis; white-space: nowrap; }

@keyframes slidein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.login { width: min(370px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); text-align: center; }
.login[open] { animation: dialogin .5s var(--spring); }
.login::backdrop { background: rgba(12, 0, 3, .6); backdrop-filter: blur(4px); animation: fade .3s; }
.login.shake { animation: shake .4s ease-in-out 2; }
.login-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; background: var(--wall); color: #fff; transition: background .3s; }
.login.ok .login-icon { background: #1f9d5a; animation: bump .6s var(--spring); }
.login-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.login h2 { margin: 0; font-size: 21px; font-weight: 800; }
.login p { margin: 8px 0 16px; color: var(--ink-soft); font-size: 14px; }
.login label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; text-align: left; }
.login input { width: 100%; padding: 11px 13px; border: 1.5px solid rgba(42, 11, 17, .2); border-radius: 12px; background: #fff; color: var(--ink); font: 16px var(--ui); transition: border-color .2s, box-shadow .2s; }
.login input:focus { outline: none; border-color: var(--wall); box-shadow: 0 0 0 4px rgba(142, 27, 40, .15); }
.login .error { min-height: 1.2em; margin: 8px 0 0; color: #b3261e; font-size: 13px; text-align: left; }
.login .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.login .row button { padding: 10px 18px; border: 1px solid rgba(42, 11, 17, .2); border-radius: 12px; background: none; color: var(--ink); cursor: pointer; transition: transform .3s var(--spring); }
.login .row button:active { transform: scale(.94); }
.login .row .primary { border-color: var(--wall); background: var(--wall); color: #fff; font-weight: 800; }
.login .row .primary.busy span { animation: blinkdot .6s steps(2) infinite; }

@keyframes dialogin { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: 18px; z-index: 40; margin: 0; padding: 10px 16px; border-radius: 999px; background: rgba(26, 5, 9, .94); font-size: 13px; transform: translateX(-50%); animation: toastin .5s var(--spring); }

@keyframes toastin { from { opacity: 0; transform: translate(-50%, 16px); } }

@media (max-width: 1150px) {
  .stats .stat span { display: none; }
}

@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; gap: 10px; padding-bottom: 18px; }
  .stats { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
  .tools .label { display: none; }
  .tools button { padding: 0 10px; }
  .brand h1 { font-size: 19px; }
  .feed { width: calc(100vw - 32px); }
  .feed-item:nth-child(n+3) { display: none; }
  .card, .card.full { left: 8px !important; right: 8px; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 64dvh; transform-origin: 50% 100% !important; }
  .drawer { top: auto; left: 8px; right: 8px; width: auto; height: 72dvh; transform: translateY(calc(100% + 24px)); }
  .drawer.open { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}