/* Shivam's Lab
   Built on Apple's Human Interface Guidelines: system font and text styles, dynamic system colours,
   inset grouped lists, Liquid Glass only on controls (toolbar, search, sheet close), sheets with detents. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* iOS dynamic system colours, light */
  --bg: #F2F2F7;                 /* systemGroupedBackground */
  --bg-2: #FFFFFF;               /* secondarySystemGroupedBackground */
  --bg-3: #F2F2F7;               /* tertiarySystemGroupedBackground */
  --sheet-bg: #F2F2F7;
  --sheet-cell: #FFFFFF;
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.76);   /* system value is 0.6; raised to meet 4.5 : 1 */
  --label-3: rgba(60, 60, 67, 0.3);
  --separator: rgba(60, 60, 67, 0.29);
  --fill: rgba(120, 120, 128, 0.2);
  --fill-3: rgba(118, 118, 128, 0.12);
  --highlight: #D1D1D6;          /* cell press highlight (systemGray4) */
  --tint: #0071E3;               /* deeper systemBlue: 4.7 : 1 with white */
  --tint-text: #0071E3;
  --on-tint: #FFFFFF;
  --icon-edge: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);

  /* Liquid Glass (regular variant) */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-rim: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.06);
  --glass-blur: blur(16px) saturate(180%);
  --scrim: rgba(0, 0, 0, 0.22);

  /* Shape */
  --r-card: 26px;
  --r-group: 26px;
  --r-sheet: 38px;
  --margin: 16px;
  --content-max: 1120px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --kb: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-2: #1C1C1E;
    --bg-3: #2C2C2E;
    --sheet-bg: #1C1C1E;         /* elevated */
    --sheet-cell: #2C2C2E;
    --label: #FFFFFF;
    --label-2: rgba(235, 235, 245, 0.6);
    --label-3: rgba(235, 235, 245, 0.3);
    --separator: rgba(84, 84, 88, 0.65);
    --fill: rgba(120, 120, 128, 0.36);
    --fill-3: rgba(118, 118, 128, 0.24);
    --highlight: #3A3A3C;
    --tint: #0071E3;
    --tint-text: #0091FF;
    --icon-edge: rgba(255, 255, 255, 0.1);
    --shadow-card: none;
    --glass-bg: rgba(40, 40, 44, 0.6);
    --glass-rim: rgba(255, 255, 255, 0.16);
    --glass-edge: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.48);
    --art-dim: rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E; --sheet-bg: #1C1C1E; --sheet-cell: #2C2C2E;
  --label: #FFFFFF; --label-2: rgba(235, 235, 245, 0.6); --label-3: rgba(235, 235, 245, 0.3);
  --separator: rgba(84, 84, 88, 0.65); --fill: rgba(120, 120, 128, 0.36); --fill-3: rgba(118, 118, 128, 0.24);
  --highlight: #3A3A3C; --tint: #0071E3; --tint-text: #0091FF; --icon-edge: rgba(255, 255, 255, 0.1);
  --shadow-card: none; --glass-bg: rgba(40, 40, 44, 0.6); --glass-rim: rgba(255, 255, 255, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.06); --glass-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.6); --scrim: rgba(0, 0, 0, 0.48);
  --art-dim: rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  :root { --margin: 24px; }
}

/* ---------- Type: iOS text styles at the Large (default) size ---------- */
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 106.25%; /* 17px body */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
/* On iPhone and iPad, follow the reader's Dynamic Type setting. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; font-family: system-ui, -apple-system, sans-serif; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-size: 1rem;
  line-height: 1.294;
  letter-spacing: -0.026em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

.large-title { font-size: 2rem;     line-height: 1.206; letter-spacing: 0.012em;  font-weight: 700; }
.t-title1    { font-size: 1.647rem; line-height: 1.214; letter-spacing: 0.014em;  font-weight: 700; }
.t-title2, .section-title { font-size: 1.294rem; line-height: 1.273; letter-spacing: -0.012em; font-weight: 700; }
.t-title3    { font-size: 1.176rem; line-height: 1.25;  letter-spacing: -0.023em; font-weight: 600; }
.t-headline  { font-size: 1rem;     line-height: 1.294; letter-spacing: -0.026em; font-weight: 600; }
.t-callout   { font-size: 0.941rem; line-height: 1.3125; letter-spacing: -0.02em; }
.t-subhead   { font-size: 0.882rem; line-height: 1.333; letter-spacing: -0.016em; }
.t-footnote  { font-size: 0.765rem; line-height: 1.385; letter-spacing: -0.006em; }
.t-caption   { font-size: 0.706rem; line-height: 1.333; letter-spacing: 0; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--tint-text); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 100; left: 12px; top: calc(var(--safe-top) - 80px);
  padding: 10px 16px; border-radius: 999px; background: var(--label); color: var(--bg);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: calc(var(--safe-top) + 10px); }

:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; }
main:focus { outline: none; }

/* ---------- Liquid Glass (controls layer only) ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0.5px 0 var(--glass-rim), inset 0 0 0 0.5px var(--glass-edge), var(--glass-shadow);
}

/* ---------- Toolbar ---------- */
.toolbar {
  position: fixed; z-index: 20; inset: 0 0 auto 0;
  padding-top: var(--safe-top);
  pointer-events: none;
}
/* Scroll edge effect: content softly blurs and fades under the toolbar once you scroll. */
.toolbar::before, .toolbar::after {
  content: ""; position: absolute; inset: 0 0 -36px 0; z-index: -1;
  opacity: 0; transition: opacity 0.25s var(--ease); pointer-events: none;
}
.toolbar::before {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}
.toolbar::after {
  background: linear-gradient(color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 55%, transparent 100%);
}
.toolbar.scrolled::before, .toolbar.scrolled::after { opacity: 1; }
.toolbar-inner {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 52px; max-width: var(--content-max); margin: 0 auto;
  padding: 0 calc(var(--margin) + var(--safe-right)) 0 calc(var(--margin) + var(--safe-left));
}
.toolbar-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.026em;
  opacity: 0; transform: translateY(4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.toolbar.scrolled .toolbar-title { opacity: 1; transform: none; }
.toolbar-flask { width: 24px; height: 24px; flex: none; }
.toolbar-flask svg { width: 100%; height: 100%; }

/* ---------- Search ---------- */
.search {
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 6px 0 14px; border-radius: 999px;
  pointer-events: auto;
}
.search:focus-within { box-shadow: inset 0 0.5px 0 var(--glass-rim), inset 0 0 0 0.5px var(--glass-edge), var(--glass-shadow), 0 0 0 3px color-mix(in srgb, var(--tint) 45%, transparent); }
.search-glyph { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--label-2); stroke-width: 2; stroke-linecap: round; }
.search-input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  font-size: 1rem; letter-spacing: -0.026em; color: var(--label);
}
.search-input::placeholder { color: var(--label-2); opacity: 1; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 50%; background: transparent; padding: 0;
}
.search-clear[hidden] { display: none; }
.search-clear svg { width: 18px; height: 18px; }
.search-clear circle { fill: var(--label-3); }
.search-clear path { stroke: var(--bg-2); stroke-width: 1.8; stroke-linecap: round; }

/* Compact width: search floats at the bottom, within reach of a thumb. */
.search--top { display: none; }
.search--bottom {
  position: fixed; z-index: 25;
  left: calc(var(--margin) + var(--safe-left)); right: calc(var(--margin) + var(--safe-right));
  bottom: calc(max(var(--safe-bottom), 12px) + var(--kb));
  height: 48px;
  max-width: 560px; margin: 0 auto;
  transition: bottom 0.2s var(--ease);
}
/* Regular width: search sits at the trailing end of the toolbar. */
@media (min-width: 768px) {
  .toolbar-inner { justify-content: flex-end; }
  .toolbar-title { position: absolute; left: 50%; transform: translate(-50%, 4px); }
  .toolbar.scrolled .toolbar-title { transform: translate(-50%, 0); }
  .search--top { display: flex; width: 280px; height: 44px; margin-top: 8px; }
  .search--bottom { display: none; }
}

/* ---------- Page ---------- */
.page {
  max-width: var(--content-max); margin: 0 auto;
  padding: calc(var(--safe-top) + 52px) calc(var(--margin) + var(--safe-right)) calc(var(--safe-bottom) + 96px) calc(var(--margin) + var(--safe-left));
}
@media (min-width: 768px) { .page { padding-bottom: calc(var(--safe-bottom) + 48px); } }

/* ---------- Masthead with the living flask ---------- */
.masthead { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.flask {
  position: relative; flex: none; width: 60px; height: 60px; padding: 0; border: 0; background: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 0.35s var(--spring);
}
.flask svg { width: 100%; height: 100%; overflow: visible; }
.flask:active { transform: scale(0.92); }
@media (hover: hover) { .flask:hover { transform: scale(1.05) rotate(-3deg); } }
.flask:focus-visible { outline-offset: 4px; border-radius: 16px; }
.flask .bubble { fill: #fff; opacity: 0; }
.flask .pop { fill: #fff; }
.masthead-sub { margin-top: 1px; font-size: 0.882rem; line-height: 1.333; letter-spacing: -0.016em; color: var(--label-2); }

/* ---------- Segmented control ---------- */
.segmented {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: 18px 0 4px; padding: 3px; border-radius: 999px; background: var(--fill-3);
  max-width: 520px;
}
.segmented button {
  position: relative; z-index: 1; min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; font-size: 0.882rem; font-weight: 500; letter-spacing: -0.016em; color: var(--label);
  transition: color 0.2s var(--ease);
}
.segmented button[aria-pressed="true"] { font-weight: 600; }
.segmented button:focus-visible { outline-offset: -1px; }
.segmented-thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; border-radius: 999px;
  background: var(--bg-2); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s var(--spring), width 0.35s var(--spring);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented-thumb { background: #636366; } }
:root[data-theme="dark"] .segmented-thumb { background: #636366; }

/* ---------- Timeline: one section per month ---------- */
.month { margin-top: 30px; }
.month-head { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 14px; }
.month-head h2 { font-size: 1.647rem; line-height: 1.214; letter-spacing: 0.014em; font-weight: 700; }
.month-head span { font-size: 0.882rem; letter-spacing: -0.016em; color: var(--label-2); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile {
  display: block; color: inherit; text-decoration: none; border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
}
.tile-art {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 24px; background: linear-gradient(160deg, var(--t1), var(--t2));
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), var(--shadow-card);
  transition: transform 0.4s var(--spring), box-shadow 0.4s var(--ease);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tile-art, :root:not([data-theme="light"]) .hero-art { background: linear-gradient(160deg, var(--d1), var(--d2)); } }
:root[data-theme="dark"] .tile-art, :root[data-theme="dark"] .hero-art { background: linear-gradient(160deg, var(--d1), var(--d2)); }
.tile-art .icon { width: 46%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.2)); transition: transform 0.5s var(--spring); }
/* A soft light that follows the pointer across the tile, like the moving highlights on Liquid Glass. */
.tile-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
}
.tile-text { display: block; padding: 10px 4px 0; }
.tile-name { display: block; font-size: 1rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.026em; }
.tile-meta { display: block; margin-top: 2px; font-size: 0.765rem; line-height: 1.385; letter-spacing: -0.006em; color: var(--label-2); }
.tile-line {
  display: -webkit-box; margin-top: 3px; font-size: 0.882rem; line-height: 1.333; letter-spacing: -0.016em; color: var(--label-2);
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tile:active .tile-art { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-art { transform: translateY(-4px); box-shadow: inset 0 0 0 0.5px var(--glass-edge), var(--shadow-card), 0 22px 40px -20px rgba(0, 0, 0, 0.35); }
  .tile:hover .tile-art::after { opacity: 1; }
  .tile:hover .tile-art .icon { transform: scale(1.06); }
}
.tile:focus-visible { outline: none; }
.tile:focus-visible .tile-art { outline: 3px solid var(--tint); outline-offset: 3px; }

.icon { border-radius: 0; }
.icon-edge { stroke: var(--icon-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Icons with light backgrounds are softened in Dark Mode so they don't glow (HIG Dark Mode). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-stayConnected, :root:not([data-theme="light"]) .icon-brushwork,
  :root:not([data-theme="light"]) .icon-communities, :root:not([data-theme="light"]) .icon-jointFinances { filter: brightness(0.86) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3)); }
}

/* ---------- Living icons ----------
   Each icon acts out its project, once, when it has the class "alive". */
.icon * { transform-box: fill-box; }
.alive .cg-b1 { transform-origin: center; animation: cg-b1 1.3s var(--spring); }
.alive .cg-b2 { transform-origin: center; animation: cg-b2 1.3s var(--spring); }
.alive .cg-top { transform-origin: center; animation: cg-flip 1.3s var(--spring); }
@keyframes cg-b1 { 0%, 100% { transform: rotate(-14deg); } 30% { transform: translate(-10px, 2px) rotate(-26deg); } 60% { transform: translate(4px, 0) rotate(-6deg); } }
@keyframes cg-b2 { 0%, 100% { transform: rotate(10deg); } 30% { transform: translate(10px, -2px) rotate(24deg); } 60% { transform: translate(-4px, 0) rotate(4deg); } }
@keyframes cg-flip { 0%, 100% { transform: none; } 35% { transform: translateY(-8px) scaleX(0.05); } 65% { transform: translateY(-4px) scaleX(1.06); } }
.alive .pk-case { transform-box: fill-box; transform-origin: 50% 100%; animation: pk-hop 1.1s var(--spring); }
.alive .pk-tick { transform-box: fill-box; transform-origin: center; animation: rk-check 1s .45s var(--spring) both; }
@keyframes pk-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-9px) scaleY(1.04); } 55% { transform: translateY(0) scale(1.06, .94); } }
.alive .rk-t { transform-box: fill-box; transform-origin: center; animation: rk-pop .9s var(--spring) both; }
.alive .rk-2 { animation-delay: .08s; } .alive .rk-3 { animation-delay: .16s; } .alive .rk-4 { animation-delay: .24s; }
.alive .rk-check { transform-box: fill-box; transform-origin: center; animation: rk-check 1.1s .35s var(--spring) both; }
@keyframes rk-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; } }
@keyframes rk-check { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: none; } }
.alive .sc-stamp { transform-origin: 50% 100%; animation: sc-wobble 1.2s var(--spring); }
.alive .sc-eye { transform-origin: center; animation: sc-wink 1.2s ease; }
.alive .sc-smile { transform-origin: center; animation: sc-grin 1.2s var(--spring); }
@keyframes sc-wobble { 0% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 55% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@keyframes sc-wink { 0%, 35%, 60%, 100% { transform: scaleY(1); } 45%, 50% { transform: scaleY(0.12); } }
@keyframes sc-grin { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18, 1.3); } }

.jf-coin { opacity: 0; }
.alive .jf-coin { animation: jf-coin 1.3s cubic-bezier(0.5, 0, 0.75, 0); }
.alive .jf-pouch { transform-origin: 50% 100%; animation: jf-hop 1.3s var(--spring); }
@keyframes jf-coin { 0% { opacity: 0; transform: translateY(-14px); } 15% { opacity: 1; } 45% { opacity: 1; transform: translateY(24px); } 52%, 100% { opacity: 0; transform: translateY(26px); } }
@keyframes jf-hop { 0%, 40% { transform: none; } 52% { transform: scale(1.1, 0.88); } 68% { transform: translateY(-9px) scale(0.96, 1.05); } 84% { transform: scale(1.03, 0.97); } 100% { transform: none; } }

.alive .ml-lens { animation: ml-sweep 1.6s cubic-bezier(0.45, 0, 0.25, 1); }
.alive .ml-l1 { animation: ml-read 1.6s ease 0.2s; }
.alive .ml-l2 { animation: ml-read 1.6s ease 0.45s; }
.alive .ml-l3 { animation: ml-read 1.6s ease 0.7s; }
@keyframes ml-sweep { 0% { transform: none; } 30% { transform: translate(-18px, -28px); } 55% { transform: translate(-14px, -17px); } 78% { transform: translate(-16px, -6px); } 100% { transform: none; } }
@keyframes ml-read { 0%, 100% { opacity: 0.55; } 20%, 40% { opacity: 1; } }

.bw-s { stroke-dasharray: 1; stroke-dashoffset: 0; }
.alive .bw-s1 { animation: bw-draw 0.7s cubic-bezier(0.3, 0, 0.2, 1) both; }
.alive .bw-s2 { animation: bw-draw 0.7s cubic-bezier(0.3, 0, 0.2, 1) 0.28s both; }
.alive .bw-s3 { animation: bw-draw 0.6s cubic-bezier(0.3, 0, 0.2, 1) 0.56s both; }
@keyframes bw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.alive .em-land { animation: em-turn 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
.alive .em-meridian { transform-origin: center; animation: em-meridian 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
/* The land is drawn twice, one globe-width apart, so a full turn ends exactly where it started. */
@keyframes em-turn { from { transform: none; } to { transform: translateX(56px); } }
@keyframes em-meridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

.fc-bar { transform-origin: 50% 100%; }
.alive .fc-b1 { animation: fc-beat 0.5s ease-in-out 3; }
.alive .fc-b2 { animation: fc-beat 0.5s ease-in-out 0.12s 3; }
.alive .fc-b3 { animation: fc-beat 0.5s ease-in-out 0.06s 3; }
.alive .fc-b4 { animation: fc-beat 0.5s ease-in-out 0.18s 3; }
@keyframes fc-beat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }

.alive .co-a { animation: co-a 1.4s var(--spring); }
.alive .co-b { animation: co-b 1.4s var(--spring); }
.alive .co-d { animation: co-d 1.4s var(--spring); }
@keyframes co-a { 0%, 100% { transform: none; } 35% { transform: translate(-9px, -6px); } 65% { transform: translate(4px, 3px); } }
@keyframes co-b { 0%, 100% { transform: none; } 35% { transform: translate(9px, -6px); } 65% { transform: translate(-4px, 3px); } }
@keyframes co-d { 0%, 100% { transform: none; } 35% { transform: translateY(9px); } 65% { transform: translateY(-4px); } }

.alive .po-land { animation: po-turn 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
.alive .po-glow { transform-origin: 38% 54%; animation: po-glow 1.6s ease; }
.alive .po-dot { transform-origin: center; animation: po-dot 1.6s ease; }
@keyframes po-turn { 0% { transform: translateX(-10px); } 100% { transform: none; } }
@keyframes po-glow { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes po-dot { 0%, 100% { transform: none; } 50% { transform: scale(1.6); } }

.pm-bar { transform-origin: 0 50%; }
.alive .pm-card { transform-origin: center; animation: pm-card 1.4s var(--spring); }
.alive .pm-play { transform-origin: center; animation: pm-play 1.4s var(--spring); }
.alive .pm-bar { animation: pm-bar 1.4s linear; }
@keyframes pm-card { 0%, 100% { transform: none; } 20% { transform: scale(0.94); } 45% { transform: scale(1.05); } }
@keyframes pm-play { 0%, 100% { transform: none; } 20% { transform: scale(0.8); } 45% { transform: scale(1.15); } }
@keyframes pm-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; gap: 6px; padding: 72px 24px; text-align: center; }
.empty svg { width: 48px; height: 48px; margin-bottom: 8px; fill: none; stroke: var(--label-2); stroke-width: 3; stroke-linecap: round; }
.empty h2 { font-size: 1.294rem; font-weight: 700; letter-spacing: -0.012em; }
.empty p { color: var(--label-2); font-size: 0.941rem; }
.empty[hidden] { display: none; }

/* ---------- Footer ---------- */
.footer { margin: 40px 4px 0; font-size: 0.765rem; line-height: 1.385; color: var(--label-2); text-align: center; }
.footer p + p { margin-top: 2px; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 500; text-decoration: none; }
@media (hover: hover) { .footer a:hover { text-decoration: underline; } }

/* ---------- Sheet ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 40; background: var(--scrim);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.scrim.open { opacity: 1; }
.scrim[hidden], .sheet[hidden] { display: none; }

.sheet {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  max-height: calc(100% - var(--safe-top) - 10px);
  display: flex; flex-direction: column;
  background: var(--sheet-bg); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -1px 0 var(--glass-edge), 0 -10px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(100%); transition: transform 0.45s var(--spring);
  overscroll-behavior: contain;
}
.sheet.open { transform: translateY(var(--drag, 0px)); }
.sheet.dragging { transition: none; }
.sheet:focus { outline: none; }
.sheet-bar {
  position: relative; flex: none; display: flex; justify-content: flex-end; align-items: center;
  height: 64px; padding: 0 14px; touch-action: none; cursor: grab;
}
.sheet-grabber { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); }
.sheet-close {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
}
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: var(--label); stroke-width: 2.2; stroke-linecap: round; }
.sheet-close:active { transform: scale(0.92); }
.sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0 calc(var(--margin) + var(--safe-right)) calc(var(--safe-bottom) + 28px) calc(var(--margin) + var(--safe-left));
}

@media (min-width: 768px) {
  .sheet {
    left: 50%; top: 50%; bottom: auto; right: auto; width: min(680px, calc(100vw - 48px));
    max-height: min(86vh, 900px); border-radius: 32px;
    transform: translate(-50%, -48%) scale(0.96); opacity: 0;
    transition: transform 0.4s var(--spring), opacity 0.25s var(--ease);
    box-shadow: 0 0 0 0.5px var(--glass-edge), 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  }
  .sheet.open { transform: translate(-50%, -50%); opacity: 1; }
  .sheet-grabber { display: none; }
  .sheet-bar { height: 60px; padding: 0 16px; cursor: default; }
  .sheet-body { padding: 0 28px 28px; }
}

/* Sheet content */
.hero-art {
  display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, var(--t1), var(--t2)); box-shadow: inset 0 0 0 0.5px var(--glass-edge);
}
.hero-art .icon { width: 30%; max-width: 168px; height: auto; aspect-ratio: 1; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.22)); }
.hero-art.has-shot { aspect-ratio: 21 / 9; }
.hero-art.has-shot .icon { width: 22%; }
.detail-head { padding: 18px 4px 0; }
.detail-kind { font-size: 0.765rem; color: var(--label-2); letter-spacing: -0.006em; }
.detail-name { margin-top: 2px; }
.detail-tagline { margin-top: 2px; font-size: 0.941rem; line-height: 1.3125; letter-spacing: -0.02em; color: var(--label-2); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.026em; text-decoration: none;
  transition: transform 0.15s var(--ease), filter 0.15s var(--ease), background-color 0.15s var(--ease);
}
.btn-primary { background: var(--tint); color: var(--on-tint); flex: 1 1 100%; }
.btn:active { transform: scale(0.97); filter: brightness(0.92); }
@media (hover: hover) { .btn-primary:hover { filter: brightness(1.08); } }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) { .btn-primary { flex: 0 0 auto; min-width: 200px; } }

.links { margin: 0; padding: 0; list-style: none; border-radius: 22px; background: var(--sheet-cell); overflow: hidden; }
.links li + li a::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--separator); }
.links a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 16px; color: var(--tint-text); text-decoration: none;
}
.links a svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.links a:active { background: var(--highlight); }
@media (hover: hover) { .links a:hover { background: color-mix(in srgb, var(--highlight) 45%, transparent); } }
.links a:focus-visible { outline-offset: -3px; }

.lock { display: inline-block; width: 0.75em; height: 0.85em; margin-right: 4px; vertical-align: -0.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.private-note { display: flex; gap: 6px; align-items: baseline; margin: 10px 4px 0; font-size: 0.882rem; line-height: 1.333; color: var(--label-2); }
.private-note .lock { flex: none; }
.local-note { margin: 18px 0 0; padding: 14px 16px; border-radius: 18px; background: var(--sheet-cell); font-size: 0.882rem; line-height: 1.333; color: var(--label-2); }

.shot { margin: 22px 0 0; border-radius: 22px; overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 0.5px var(--separator); }
.shot img { width: 100%; height: auto; }

.detail-section { margin-top: 26px; }
.detail-section > h3 { margin: 0 4px 8px; font-size: 1.176rem; font-weight: 600; letter-spacing: -0.023em; }
.detail-about { padding: 0 4px; font-size: 1rem; line-height: 1.41; }
.highlights { margin: 0; padding: 0; list-style: none; border-radius: 22px; background: var(--sheet-cell); overflow: hidden; }
.highlights li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; }
.highlights li + li::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; height: 0.5px; background: var(--separator); }
.highlights svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--tint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.info { margin: 0; border-radius: 22px; background: var(--sheet-cell); overflow: hidden; }
.info > div { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; min-height: 20px; }
.info > div + div::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--separator); }
.info dt { color: var(--label-2); flex: none; }
.info dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.copy {
  margin: -6px -8px -6px 0; padding: 6px 8px; min-height: 32px; border: 0; border-radius: 8px; background: transparent;
  color: var(--tint-text); font-weight: 500;
}

body.sheet-open { overflow: hidden; }

/* The tile grows into the sheet and shrinks back into it (View Transitions, where supported). */
.sheet.instant, .scrim.instant { transition: none !important; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }
::view-transition-old(lab-art), ::view-transition-new(lab-art),
::view-transition-old(lab-icon), ::view-transition-new(lab-icon) { height: 100%; object-fit: fill; animation: none; mix-blend-mode: normal; }
::view-transition-old(lab-art) { opacity: 0; }

/* ---------- Accessibility settings ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--bg-2); --glass-blur: none; }
  .toolbar::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .toolbar::after { background: linear-gradient(var(--bg) 70%, transparent); }
}
@media (prefers-contrast: more) {
  :root { --label-2: rgba(60, 60, 67, 0.9); --separator: rgba(60, 60, 67, 0.6); --glass-bg: var(--bg-2); --glass-edge: rgba(0, 0, 0, 0.4); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --label-2: rgba(235, 235, 245, 0.86); --separator: rgba(235, 235, 245, 0.5); --glass-edge: rgba(255, 255, 255, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .sheet { transition: opacity 0.2s linear !important; }
  .tile:hover .tile-art, .tile:active .tile-art, .tile:hover .tile-art .icon, .flask:hover, .flask:active { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (forced-colors: active) {
  .glass, .tile-art, .hero-art, .sheet, .segmented { border: 1px solid CanvasText; }
  .segmented button[aria-pressed="true"] { outline: 2px solid Highlight; }
}