/* ============================================================
   THEME TOKENS - light default, .dark overrides, system fallback
============================================================ */
:root {
  --bg:         #f5f1eb;   /* 宣纸 Rice Paper */
  --bg2:        #faf7f2;   /* Warm Ivory - cards, sidebar */
  --bg3:        #e8e4de;   /* Warm Gray - inputs, pills */
  --ink:        #1d1d1f;   /* Midnight Graphite */
  --ink1:       #1d1d1f;
  --ink2:       #474747;   /* Charcoal Grey */
  --ink3:       #6e6e73;   /* Medium Gray */
  --sage:       #0071e3;   /* Apple Interactive Blue */
  --sage-l:     #e8f0fa;   /* Blue tint */
  --warm:       #ff3b30;   /* Apple Red */
  --warm-l:     #fff0ee;
  --border:     #d8d4ce;   /* Warm Border */
  --shadow:     rgba(60,40,20,0.06);
  --card-sh:    0 2px 20px rgba(60,40,20,0.08), 0 1px 4px rgba(60,40,20,0.04);
  /* ── Motion tokens ── */
  --ease-spring: cubic-bezier(0.22,1,0.36,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:    .2s;
  --dur-med:     .35s;
  --dur-slow:    .55s;
}
/* Manual dark */
html.dark {
  --bg:         #000000;   /* True black beneath the night-sky layer */
  --bg2:        #1c1c1e;
  --bg3:        #2c2c2e;
  --ink:        #f5f5f7;
  --ink1:       #f5f5f7;
  --ink2:       #aeaeb2;
  --ink3:       #636366;
  --sage:       #0a84ff;
  --sage-l:     #001a3d;
  --warm:       #ff453a;
  --warm-l:     #2a0000;
  --border:     #38383a;
  --shadow:     rgba(0,0,0,0.4);
  --card-sh:    0 2px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
}
/* System dark (when no manual override) */
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) {
    --bg:         #000000;
    --bg2:        #1c1c1e;
    --bg3:        #2c2c2e;
    --ink:        #f5f5f7;
    --ink2:       #aeaeb2;
    --ink3:       #636366;
    --sage:       #0a84ff;
    --sage-l:     #001a3d;
    --warm:       #ff453a;
    --warm-l:     #2a0000;
    --border:     #38383a;
    --shadow:     rgba(0,0,0,0.4);
    --card-sh:    0 2px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  }
}

/* ============================================================
   BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
.skip-link { position:absolute; top:-100%; left:16px; z-index:10000; padding:8px 16px; background:var(--sage); color:#fff; border-radius:8px; font-size:14px; text-decoration:none; transition:top .2s; }
.skip-link:focus { top:8px; }
html { scroll-behavior:smooth; overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height: 100vh; overflow-x: hidden;
  transition: background-color .4s ease, color .35s ease;
}
p { text-wrap: pretty; }
/* Smooth scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:980px; }
::-webkit-scrollbar-thumb:hover { background:var(--ink3); }
/* GPU layer for animated elements */
.v-card, .j-card, .tech-story, .btn-ink, .btn-outline,
.tab-btn, .theme-btn, .lang-btn, .task-chip, .a-link,
.footer-icon-btn, .stat-cell, .about-chip, .subscribe-btn,
.start-btn, .fin-btn, .pill {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Global focus ring */
input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline:2px solid var(--sage);
  outline-offset:2px;
  animation:focusPop .3s var(--ease-bounce);
}
@keyframes focusPop { from{outline-offset:6px;opacity:.6} to{outline-offset:2px;opacity:1} }
/* Scroll reveal */
/* reveal: handled by GSAP */

/* ============================================================
   NAV
============================================================ */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  position: sticky; top: 0; z-index: 100;
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, height var(--dur-med) var(--ease-spring);
  will-change: box-shadow, height;
}
nav.scrolled { box-shadow:0 2px 24px rgba(0,0,0,0.08); height:52px; }
html.dark nav.scrolled { box-shadow:0 2px 24px rgba(0,0,0,0.4); }
html.dark nav {
  background: rgba(0,0,0,0.55);
}
.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  overflow: hidden; border: 1.5px solid var(--border); background: var(--bg2); flex-shrink: 0;
}
.nav-avatar img { width:100%; height:100%; object-fit:cover; object-position:top; }
.nav-logo-text { font-family:'Allura',cursive; font-size:26px; letter-spacing:0; color:var(--ink); font-weight:400; }
.nav-logo-text span { color:var(--sage); }
.nav-logo-text .nav-hi { color:var(--ink3); font-weight:400; }

.nav-tabs {
  display:flex; gap:2px; background:var(--bg3); border-radius:980px; padding:3px;
  position:relative; overflow:hidden;
}
/* Tab glow highlight - snaps to hovered tab */
.nav-tabs::before {
  content:'';
  position:absolute;
  top:2px; bottom:2px;
  left:var(--tab-glow-left, -100px);
  width:var(--tab-glow-w, 0px);
  border-radius:980px;
  background:
    radial-gradient(ellipse at center, rgba(0,113,227,0.16) 0%, rgba(88,86,214,0.06) 40%, transparent 70%);
  pointer-events:none;
  opacity:var(--tab-glow-opacity, 0);
  transition: left .2s var(--ease-spring), width .2s var(--ease-spring), opacity .25s;
  z-index:0;
  filter:blur(1px);
}
html.dark .nav-tabs::before {
  background:
    radial-gradient(ellipse at center, rgba(10,132,255,0.2) 0%, rgba(88,86,214,0.08) 40%, transparent 70%);
}
.tab-btn {
  padding:7px 18px; border:none; background:transparent;
  border-radius:980px; cursor:pointer; position:relative; z-index:1;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; font-weight:500;
  color:var(--ink3); transition:color var(--dur-med) var(--ease-spring), background var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-spring), transform var(--dur-fast) var(--ease-spring); white-space:nowrap; letter-spacing:-.05px;
}
.tab-btn:hover { color:var(--ink2); }
.tab-btn:active { transform:scale(0.95); }
.tab-btn.active {
  color:var(--ink); font-weight:600;
  background:var(--bg2);
  box-shadow:0 1px 4px rgba(0,0,0,0.08), 0 0.5px 1.5px rgba(0,0,0,0.06);
}

.nav-controls { display:flex; align-items:center; gap:6px; }
/* Theme toggle button */
.theme-btn {
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:50%;
  background:transparent; cursor:pointer;
  color:var(--ink2); font-size:14px;
  transition:all var(--dur-med) var(--ease-spring);
}
.theme-btn:hover { background:var(--bg3); color:var(--ink); transform:rotate(15deg) scale(1.08); }
.lang-btn {
  padding:5px 14px; border:1px solid var(--border);
  border-radius:980px; background:transparent; cursor:pointer;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:12px; font-weight:500;
  color:var(--ink2); transition:all var(--dur-med) var(--ease-spring); letter-spacing:-.1px;
}
.lang-btn:hover { background:var(--bg3); color:var(--ink); transform:scale(1.04); }
/* instant tooltip for icon controls (replaces the slow native title) */
.nav-tip { position:relative; }
.nav-tip::after {
  content:attr(data-tip);
  position:absolute; top:calc(100% + 9px); right:0;
  background:var(--ink); color:var(--bg);
  font-size:11px; font-weight:500; white-space:nowrap;
  padding:5px 9px; border-radius:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:300;
}
.nav-tip:hover::after { opacity:1; }

/* ============================================================
   PAGES
============================================================ */
.page { display:none; opacity:1; }
.page.active { display:block; }

/* ============================================================
   TIMER SIDEBAR - mobile: full page; desktop: fixed right panel
============================================================ */
#timer-sidebar {
  display:none;                      /* mobile: hidden by default */
  background:var(--bg2);
  transition:background .35s;
}
#timer-sidebar.sb-page-active { display:block; } /* mobile: show as page */
.sb-header { display:none; }        /* shown only on desktop */

@media (min-width:1180px) {
  #timer-sidebar {
    display:flex !important;         /* always visible */
    flex-direction:column;
    position:fixed; right:0; top:0; bottom:0;
    width:300px; z-index:90;
    border-left:1px solid var(--border);
    overflow-y:auto;
    background:var(--bg) !important;
    transform-origin:top right;
    transition:background .35s, border-color .35s, transform var(--dur-med) var(--ease-spring), opacity var(--dur-med) var(--ease-spring);
  }
  html.sb-hidden #timer-sidebar {
    transform:translateX(100%) scale(.97); opacity:0; pointer-events:none;
  }
  #timer-sidebar .garden-section,
  #timer-sidebar .sb-data-section {
    margin:0 10px;
  }
  #timer-sidebar .garden-section { margin-bottom:0; }
  #timer-sidebar .sb-data-section { margin-bottom:10px; }
  html.sb-hidden #main-content { margin-right:0; }
  html.sb-hidden nav { width:100%; }
  .sb-header {
    display:flex; align-items:center; gap:8px; justify-content:space-between;
    padding:12px 24px 14px;
    font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; font-weight:500;
    letter-spacing:.1px; color:var(--ink2);
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    position:sticky; top:0; z-index:1;
    transition:background .35s, border-color .35s;
  }
  html.dark .sb-header { background:rgba(0,0,0,0.85); }
  #main-content { margin-right:300px; transition:margin-right var(--dur-med) var(--ease-spring); }
  nav { width:calc(100% - 300px); padding-right:36px; transition:width var(--dur-med) var(--ease-spring); }
  .tab-focus-btn { display:none !important; }
  /* Inside sidebar: override card styles */
  #timer-sidebar .focus-shell {
    min-height:unset; padding:10px 10px 24px; align-items:flex-start;
    flex-direction:column; gap:8px;
  }
  #timer-sidebar .focus-card {
    max-width:none; background:var(--bg2);
    border:1px solid var(--border); border-radius:14px; padding:16px 16px 12px; box-shadow:none;
  }
}
/* Sidebar toggle button */
/* Sidebar collapse control (lives on the sidebar header) */
.sb-collapse {
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; background:transparent;
  color:var(--ink3); font-size:19px; line-height:1; cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.sb-collapse:hover { background:var(--bg3); color:var(--ink); }
/* "Show timer" handle - only when the sidebar is collapsed (desktop) */
.sb-show-handle {
  display:none;
  position:fixed; right:0; top:60px;
  z-index:95; align-items:center;
  padding:12px 10px 12px 14px;
  background:var(--bg2); border:1px solid var(--border); border-right:none;
  border-radius:980px 0 0 980px; cursor:pointer;
  color:var(--ink2); font-size:15px;
  box-shadow:-3px 0 14px var(--shadow);
  transform:translateX(0);
  transition:transform var(--dur-fast) var(--ease-spring), color var(--dur-fast);
}
.sb-show-icon { font-size:16px; line-height:1; }
.sb-show-text { max-width:0; opacity:0; overflow:hidden; white-space:nowrap; font-size:12px; font-weight:500; color:var(--ink2); transition:max-width .28s var(--ease-spring), opacity .2s, margin .28s; }
.sb-show-chev { font-size:16px; color:var(--ink3); margin-left:5px; transition:color var(--dur-fast); }
.sb-show-handle:hover .sb-show-text, .sb-show-handle.hint-open .sb-show-text { max-width:120px; opacity:1; margin-right:6px; }
.sb-show-handle:hover { color:var(--sage); transform:translateX(-3px); }
.sb-show-handle:hover .sb-show-chev { color:var(--sage); }
@media (min-width:1180px) { html.sb-hidden .sb-show-handle { display:flex; animation:sbHandleIn .55s var(--ease-spring); } }
@keyframes sbHandleIn {
  0%   { transform:translateX(108%); opacity:0; }
  55%  { transform:translateX(-5px); opacity:1; box-shadow:0 0 0 7px rgba(0,113,227,.16), -3px 0 14px var(--shadow); }
  100% { transform:translateX(0);    opacity:1; box-shadow:0 0 0 0 rgba(0,113,227,0), -3px 0 14px var(--shadow); }
}
.sb-pill-idle { display:flex; align-items:center; }
.sb-pill-live { display:none; align-items:center; gap:6px; }
.sb-pill-live.active { display:flex; }
.sb-arc { flex-shrink:0; }
.sb-arc-bg { fill:none; stroke:rgba(0,113,227,.12); stroke-width:3; }
.sb-arc-fg { fill:none; stroke:var(--sage); stroke-width:3; stroke-linecap:round; stroke-dasharray:100 100; transition:stroke-dasharray 1s linear; }
.sb-pill-time { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--sage); min-width:36px; letter-spacing:.3px; }
.sb-pill-task { font-size:11px; color:var(--ink3); max-width:72px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sb-show-handle.pill-urgent .sb-arc-fg { stroke:#f97316; }
.sb-show-handle.pill-urgent .sb-pill-time { color:#f97316; animation:pillPulse 1.2s ease-in-out infinite; }
@keyframes pillPulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

/* ============================================================
   HOME - HERO
============================================================ */
.hero-wrap {
  max-width:1152px; margin:0 auto; padding:64px 44px 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-left { width:100%; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--sage); background:var(--sage-l);
  padding:6px 18px; border-radius:980px; margin-bottom:28px;
  border:1px solid rgba(0,113,227,0.12);
  opacity:0;
}
.hero-title {
  font-family:'Lora',serif; font-size:54px; line-height:1.06;
  letter-spacing:-1.5px; color:var(--ink); margin-bottom:24px;
  font-weight:700; opacity:0;
  text-shadow:0 2px 30px rgba(0,113,227,0.12);
}
.hero-title em { font-style:italic; color:var(--sage); text-shadow:0 0 40px rgba(0,113,227,0.3); }
.hero-desc { font-size:16px; line-height:1.75; color:var(--ink2); margin-bottom:36px; max-width:520px; text-wrap:balance; opacity:0; }
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; opacity:0; }
.hero-live { flex-basis:100%; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; color:var(--ink2); font-weight:500; margin-bottom:2px; }
.hero-live-dot { width:8px; height:8px; border-radius:50%; background:#34c759; animation:heroLivePulse 2s ease-in-out infinite; }
@keyframes heroLivePulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes heroIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.btn-ink {
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 30px; background:var(--sage); color:#fff;
  border:none; border-radius:980px; font-size:14.5px; font-weight:600; letter-spacing:-.1px;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer;
  transition:all var(--dur-med) var(--ease-spring);
  position:relative; overflow:hidden;
}
.btn-ink::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.btn-ink:hover::after { opacity:1; }
.btn-ink:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,113,227,0.25); }
.btn-ink:active { transform:translateY(0) scale(0.97); }
.btn-outline {
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 30px; background:transparent; color:var(--ink2);
  border:1.5px solid var(--border); border-radius:980px; font-size:14.5px; letter-spacing:-.1px;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer;
  transition:all var(--dur-med) var(--ease-spring);
  position:relative; overflow:hidden;
}
.btn-outline::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(0,113,227,0.08) 0%, transparent 60%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.btn-outline:hover::after { opacity:1; }
.btn-outline:hover { border-color:var(--sage); background:var(--sage-l); color:var(--sage); transform:translateY(-2px); }
.hero-right { display:none; }
.hero-av {
  width:100px; height:100px; border-radius:50%; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.10); margin-bottom:16px;
  flex-shrink:0; background:var(--bg3);
  transition:transform .4s var(--ease-spring);
}
.hero-av:hover { transform:scale(1.08) rotate(3deg); }
.hero-av img { width:100%; height:100%; object-fit:cover; object-position:top; }
.avatar-frame {
  width:144px; height:144px; border-radius:50%;
  background:var(--bg);
  overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.12);
  transition:transform .4s var(--ease-spring), box-shadow .4s;
}
.avatar-frame:hover { transform:scale(1.08) rotate(3deg); box-shadow:0 8px 30px rgba(0,113,227,0.3); }
.avatar-frame img { width:100%; height:100%; object-fit:cover; object-position:top; }
.avatar-name { font-family:'Allura',cursive; font-size:28px; color:var(--ink); text-align:center; }
.avatar-sub  { font-size:12px; color:var(--ink3); letter-spacing:1px; text-transform:uppercase; text-align:center; }
.avatar-tag  {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:980px; padding:5px 14px; font-size:12px; color:var(--ink2); letter-spacing:-.1px;
}

/* STATS */
.stats-bar {
  max-width:760px; margin:0 auto;
  padding:48px 44px 56px;
}
.stats-cells {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  justify-content:center;
}
html.dark .stat-cell { box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.stats-right-fill { display:none; }
.stat-cell {
  padding:24px 16px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--bg2); border:1px solid var(--border); border-radius:16px;
  opacity:0; animation:statIn .5s var(--ease-spring) forwards;
  transition:all var(--dur-med) var(--ease-spring);
  box-shadow:0 1px 4px rgba(0,0,0,0.03);
}
.stat-cell:hover { background:var(--sage-l); }
.stat-cell:nth-child(1) { animation-delay:.1s }
.stat-cell:nth-child(2) { animation-delay:.2s }
.stat-cell:nth-child(3) { animation-delay:.3s }
.stat-cell:nth-child(4) { animation-delay:.4s }
@keyframes statIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.stat-cell:hover { border-color:var(--sage); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,113,227,0.08); }
.stat-n { font-family:'Lora',serif; font-size:28px; color:var(--ink); letter-spacing:-.5px; font-weight:700; }
.stat-l { font-size:11px; color:var(--ink3); letter-spacing:1.2px; text-transform:uppercase; font-weight:600; }

/* Video play button hover */
.v-thumb { position:relative; }
.v-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; }
.v-card:hover .v-play { opacity:1; }
.v-play svg { transform:scale(0.8); transition:transform .25s var(--ease-spring); }
.v-card:hover .v-play svg { transform:scale(1); }

/* Section backgrounds for visual rhythm */
.home-about-section { margin-top:8px; }
.lb-section { background:var(--bg2); border-radius:24px; margin-top:24px; }

/* Confetti celebration */
.confetti-piece { position:fixed; width:10px; height:10px; border-radius:2px; pointer-events:none; z-index:9999; animation:confettiFall 1.5s ease-out forwards; }
@keyframes confettiFall { 0%{opacity:1;transform:translateY(0) rotate(0deg)} 100%{opacity:0;transform:translateY(100vh) rotate(720deg)} }

/* CONTENT */
.content-sec { max-width:1152px; margin:0 auto; padding:52px 44px; }
.sec-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.sec-title { font-size:11.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ink3); }
.sec-more  { font-size:12px; color:var(--sage); cursor:pointer; text-decoration:none; transition:color var(--dur-fast) var(--ease-spring); }
.sec-more:hover { color:var(--ink); text-decoration:underline; }

.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:14px; }
.v-card {
  display:block; color:inherit; text-decoration:none;
  border:1px solid var(--border); border-radius:14px;
  overflow:hidden; background:var(--bg);
  cursor:pointer; transition:transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-spring), border-color var(--dur-med);
  position:relative; isolation:isolate;
}
.v-card::before {
  content:''; position:absolute; inset:-2px; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle 120px at var(--card-mx,50%) var(--card-my,50%),
      rgba(0,113,227,0.12) 0%, rgba(88,86,214,0.06) 30%, transparent 55%),
    radial-gradient(circle 80px at calc(var(--card-mx,50%) + 15px) calc(var(--card-my,50%) - 10px),
      rgba(0,113,227,0.06) 0%, transparent 50%);
  opacity:0; transition:opacity .5s; border-radius:inherit;
  filter:blur(2px);
}
.v-card:hover::before { opacity:1; }
.v-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 14px 36px var(--shadow); border-color:var(--sage); }
.v-thumb {
  aspect-ratio:16/9; background:var(--bg2); max-height:140px;
  display:flex; align-items:center; justify-content:center;
  position:relative; border-bottom:1.5px solid var(--border); overflow:hidden;
}
.v-thumb-txt {
  text-align:center; padding:14px;
  font-family:'Lora',serif; font-size:11.5px;
  color:var(--ink2); line-height:1.6; font-style:italic;
}
.v-stamp {
  position:absolute; bottom:7px; right:7px;
  background:rgba(26,25,22,.76); color:#fafaf7;
  font-size:10px; padding:2px 6px; border-radius:4px;
}
.v-info  { padding:14px 16px 16px; }
.v-title { font-size:13px; font-weight:600; line-height:1.5; color:var(--ink); margin-bottom:5px; }
.v-meta  { font-size:11.5px; color:var(--ink3); letter-spacing:.2px; }

.quote-block { margin-top:32px; display:grid; grid-template-columns:4px 1fr; opacity:0; }
.quote-line    { background:var(--sage); border-radius:2px; }
.quote-content {
  padding:20px 24px; background:var(--sage-l);
  border-radius:0 14px 14px 0;
  border:1px solid rgba(0,113,227,.12); border-left:none;
}
.quote-eyebrow { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--sage); margin-bottom:8px; font-weight:600; }
.quote-text    { font-family:'Noto Serif SC',serif; font-size:18px; line-height:1.9; color:var(--ink); }
.quote-attr    { font-size:12px; color:var(--sage); margin-top:7px; }

/* ============================================================
   JOURNAL PAGE
============================================================ */
.journal-shell { max-width:760px; margin:0 auto; padding:52px 44px 40px; }
.journal-header { margin-bottom:40px; }
.journal-title { font-family:'Allura',cursive; font-size:52px; color:var(--ink); margin-bottom:12px; }
.journal-title em { font-style:italic; color:var(--sage); }
.journal-intro { font-size:15px; line-height:1.9; color:var(--ink2); max-width:560px; }
.journal-filters { margin:22px 0 26px; display:flex; flex-direction:column; gap:13px; }
.journal-search { width:100%; max-width:440px; padding:10px 16px; border-radius:980px; border:1px solid var(--border); background:var(--bg2); color:var(--ink); font-size:14px; outline:none; transition:border-color var(--dur-fast); }
.journal-search:focus { border-color:var(--sage); }
.journal-search::placeholder { color:var(--ink3); }
.journal-tags { display:flex; flex-wrap:wrap; gap:8px; }
.j-filter-chip { padding:5px 13px; border-radius:980px; border:1px solid var(--border); background:var(--bg2); color:var(--ink2); font-size:12.5px; cursor:pointer; transition:all var(--dur-fast) var(--ease-spring); }
.j-filter-chip:hover { border-color:var(--sage); color:var(--ink); transform:translateY(-1px); }
.j-filter-chip.active { background:var(--sage); color:#fff; border-color:var(--sage); }

.journal-grid { display:flex; flex-direction:column; gap:16px; }

.j-card {
  border:1px solid var(--border); border-radius:18px;
  padding:28px 30px; background:var(--bg);
  cursor:pointer; transition:transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-spring), border-color var(--dur-med);
  position:relative; overflow:hidden; isolation:isolate;
}
.j-card::before {
  content:''; position:absolute; inset:-2px; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle 120px at var(--card-mx,50%) var(--card-my,50%),
      rgba(0,113,227,0.1) 0%, rgba(88,86,214,0.05) 30%, transparent 55%),
    radial-gradient(circle 80px at calc(var(--card-mx,50%) + 15px) calc(var(--card-my,50%) - 10px),
      rgba(0,113,227,0.05) 0%, transparent 50%);
  opacity:0; transition:opacity .5s; border-radius:inherit;
  filter:blur(2px);
}
.j-card:hover::before { opacity:1; }
.j-card:hover { transform:translateY(-4px) scale(1.005); box-shadow:0 12px 32px var(--shadow); border-color:var(--sage); }
.j-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.j-date { font-size:11px; color:var(--ink3); letter-spacing:.8px; }
.j-tags { display:flex; gap:6px; }
.j-tag {
  font-size:10px; padding:3px 9px;
  border:1px solid var(--border); border-radius:12px;
  color:var(--ink3); background:var(--bg2);
}
.j-tag.sage { border-color:var(--sage); color:var(--sage); background:var(--sage-l); }
.j-title { font-family:'Lora',serif; font-size:21px; color:var(--ink); margin-bottom:10px; line-height:1.3; }
.j-excerpt { font-size:14px; line-height:1.85; color:var(--ink2); margin-bottom:16px; }
.j-footer { display:flex; align-items:center; justify-content:space-between; }
.j-read-more { font-size:12px; color:var(--sage); letter-spacing:.3px; }
.j-mood { font-size:18px; }

/* expanded state */
.j-full {
  max-height:0; overflow:hidden; margin-top:0;
  transition:max-height .5s var(--ease-spring), margin-top .4s, padding-top .4s, opacity .4s;
  opacity:0; padding-top:0; border-top:0 solid transparent;
}
.j-full p { font-size:14.5px; line-height:1.95; color:var(--ink2); margin-bottom:14px; }
.j-full p:last-child { margin-bottom:0; }
.j-card.open .j-full { max-height:1200px; opacity:1; margin-top:16px; padding-top:16px; border-top:1.5px solid var(--border); }
.j-card.open .j-read-more { color:var(--ink3); }

/* write-your-own CTA at bottom */
.journal-cta {
  margin-top:32px; padding:24px 28px;
  border:1.5px dashed var(--border); border-radius:16px;
  text-align:center;
}
.journal-cta-title { font-family:'Lora',serif; font-size:18px; color:var(--ink); margin-bottom:8px; }
.journal-cta-sub   { font-size:13px; color:var(--ink2); line-height:1.7; }
/* per-article subscribe CTA (shown inside an expanded entry) */
.j-sub-cta {
  display:inline-flex; align-items:center; gap:9px;
  margin-top:18px; padding:9px 16px;
  background:var(--warm-l); border:1px solid var(--border);
  border-radius:980px; text-decoration:none;
  color:var(--ink); font-size:12.5px; line-height:1.35;
  transition:transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast);
}
.j-sub-cta:hover { transform:translateY(-1px); border-color:var(--warm); }
.j-sub-cta svg { color:#ff0000; flex-shrink:0; }
.j-sub-cta b { font-weight:600; }

/* ============================================================
   FOCUS PAGE
============================================================ */
.focus-shell {
  min-height:calc(100vh - 65px);
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.focus-card {
  width:100%; max-width:420px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:22px; padding:28px 24px; text-align:left;
  box-shadow:0 2px 20px rgba(0,0,0,0.04);
}
.task-inp {
  width:100%; padding:13px 18px;
  border:1px solid var(--border); border-radius:14px;
  font-size:14px; font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg); outline:none;
  transition:border-color .2s, box-shadow .2s; text-align:left; margin-bottom:10px;
}
.task-inp:focus { border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-l); }
.task-inp::placeholder { color:var(--ink3); }
.dur-label { font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink3); margin-bottom:8px; font-weight:700; }
.pills { display:flex; gap:6px; margin-bottom:6px; flex-wrap:nowrap; }
.pill {
  flex:1; text-align:center;
  padding:8px 4px; border:1px solid var(--border);
  border-radius:10px; font-size:11.5px; color:var(--ink2);
  cursor:pointer; background:transparent;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; transition:all var(--dur-med) var(--ease-spring);
  will-change:transform;
}
.pill:hover { border-color:var(--sage); color:var(--sage); background:var(--sage-l); }
.pill:active { transform:scale(0.97); }
.pill.sel { border-color:var(--sage); background:var(--sage-l); color:var(--sage); box-shadow:0 2px 12px rgba(0,113,227,0.12); }
@keyframes pillPrepulse { 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,113,227,.35)} 45%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(0,113,227,0)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,113,227,0)} }
.pill.pill-prepulse { animation:pillPrepulse .55s var(--ease-spring); }
.custom-row { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:7px; margin-bottom:3px; }
.custom-inp {
  width:62px; padding:8px; border:1px solid var(--border);
  border-radius:10px; font-size:13px; text-align:center;
  background:var(--bg2); color:var(--ink); font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; outline:none;
}
.custom-inp:focus { border-color:var(--sage); }
/* TASK CHIPS */
.task-chips-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink3); margin-bottom:8px; }
.chips-collapsible { margin-bottom:2px; }
.quick-pick-label {
  margin:14px 0 7px; font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); opacity:.78;
}
.chips-collapsible:has(.task-chips:empty) { display:none; }
.chips-toggle { display:none; }
.task-chips:empty { display:none; }
.task-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0 0 10px; overflow:visible; }
.task-chip {
  display:flex; align-items:center; justify-content:center; gap:3px;
  padding:7px 5px; border:1px solid transparent;
  border-radius:999px; background:color-mix(in srgb, var(--bg3) 68%, transparent);
  font-size:11px; color:var(--ink2); cursor:pointer;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  transition:all var(--dur-med) var(--ease-spring); white-space:nowrap;
  min-width:0; overflow:hidden;
}
.task-chip:hover { border-color:color-mix(in srgb, var(--sage) 36%, transparent); color:var(--sage); background:var(--sage-l); box-shadow:none; }
.task-chip:active { transform:scale(0.97); }
.task-chip-del {
  font-size:10px; color:var(--ink3); margin-left:2px;
  opacity:0; transition:opacity .15s; line-height:1;
}
.task-chip:hover .task-chip-del { opacity:1; }
.task-chip-add {
  border-style:dashed; border-color:color-mix(in srgb, var(--border) 70%, transparent); color:var(--ink3);
}
.task-chip-add:hover { border-color:var(--sage); color:var(--sage); background:var(--sage-l); }

/* Custom tasks — "Mine" section */
.chips-section-label {
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3);
  margin:0 0 6px 2px; opacity:.7; font-weight:500; grid-column:1/-1;
}
.task-chip.task-chip-custom {
  background:var(--sage-l); border-color:color-mix(in srgb, var(--sage) 30%, transparent);
  position:relative; max-width:100%;
}
.task-chip.task-chip-custom:hover {
  border-color:var(--sage); background:color-mix(in srgb, var(--sage-l) 80%, white);
  box-shadow:0 4px 16px rgba(0,113,227,0.12);
}
.chips-divider {
  width:100%; height:0; border:none; border-top:1px dashed color-mix(in srgb, var(--border) 50%, transparent);
  margin:4px 0 2px;
}

/* Save popover — centered modal */
.save-popover-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:9999;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.save-popover-backdrop.open { opacity:1; pointer-events:auto; }
.save-popover {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.95);
  background:var(--bg2); border:1px solid var(--border); border-radius:20px;
  padding:20px 22px; width:280px;
  box-shadow:0 16px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  z-index:10000; opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s, transform .25s;
}
.save-popover.open {
  opacity:1; visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
.save-popover-title {
  font-size:11px; font-weight:600; color:var(--ink2); margin-bottom:10px;
}
.save-emoji-row {
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px;
}
.save-emoji-btn {
  width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.save-emoji-btn:hover { border-color:var(--sage); background:var(--sage-l); transform:scale(1.1); }
.save-emoji-btn.sel { border-color:var(--sage); background:var(--sage-l); box-shadow:0 0 0 2px color-mix(in srgb, var(--sage) 25%, transparent); }
.save-name-inp {
  width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px;
  font-size:12px; font-family:inherit; background:var(--bg);
  color:var(--ink); outline:none; margin-bottom:8px; box-sizing:border-box;
}
.save-name-inp:focus { border-color:var(--sage); }
.save-dur-hint {
  font-size:10px; color:var(--ink3); margin-bottom:10px; line-height:1.4;
}
.save-actions {
  display:flex; gap:6px; justify-content:flex-end;
}
.save-actions button {
  padding:5px 14px; border-radius:8px; font-size:11px; font-family:inherit;
  cursor:pointer; font-weight:500; transition:all .15s;
}
.save-cancel-btn {
  background:none; border:1px solid var(--border); color:var(--ink3);
}
.save-cancel-btn:hover { border-color:var(--ink3); color:var(--ink2); }
.save-confirm-btn {
  background:var(--sage); border:1px solid var(--sage); color:white;
}
.save-confirm-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
/* TASK STATS */
.task-stats {
  margin-top:16px; text-align:left;
  background:var(--bg2); border:1px solid var(--border); border-radius:16px;
  padding:14px 16px; max-width:320px; margin-left:auto; margin-right:auto;
}
.task-stats-title { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3); margin-bottom:10px; font-weight:500; }
.task-stat-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.task-stat-row:last-child { border-bottom:none; }
.task-stat-name { color:var(--ink2); font-weight:500; }
.task-stat-time { color:var(--sage); font-weight:600; font-family:'Lora',serif; font-size:14px; }

.start-btn {
  width:100%; padding:15px; border:none; border-radius:980px;
  font-size:14px; font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:600;
  cursor:pointer; transition:all var(--dur-med) var(--ease-spring);
  margin-top:16px; letter-spacing:.2px;
  position:relative; overflow:hidden; will-change:transform;
}
.start-btn.go { background:var(--sage); color:#fff; letter-spacing:.2px; box-shadow:0 4px 16px rgba(0,113,227,0.2); }
.start-btn.go:hover { opacity:.92; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,113,227,0.3); }
.start-btn.go:active { transform:translateY(0) scale(0.97); }
.start-btn.go::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.start-btn.go:hover::after { opacity:1; }
.start-btn.no { background:var(--bg3); color:var(--ink3); cursor:not-allowed; }
.flower-hint { font-size:11px; color:var(--ink3); text-align:center; margin-top:10px; line-height:1.6; letter-spacing:.1px; opacity:.75; display:block; }
/* countdown */
.cdown-hint { font-size:13px; color:var(--ink3); letter-spacing:1px; margin-bottom:6px; text-align:center; }
.cdown-n    { font-family:'Lora',serif; font-size:100px; color:var(--ink); line-height:1; animation:cdownPop 1s var(--ease-spring) infinite; text-align:center; width:100%; }
@keyframes cdownPop { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.8} }
.cdown-task { font-size:13px; color:var(--ink3); font-family:'Lora',serif; font-style:italic; margin-top:10px; text-align:center; }
/* ring */
.f-task    { font-family:'Lora',serif; font-size:18px; color:var(--ink); margin-bottom:18px; font-style:italic; }
.ring-wrap { position:relative; width:200px; height:200px; margin:0 auto 24px; }
.ring-svg  { transform:rotate(-90deg); will-change:transform; }
.r-bg { fill:none; stroke:var(--bg3); stroke-width:5; transition:stroke var(--dur-med) var(--ease-spring); }
.r-fg { fill:none; stroke:var(--sage); stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset .95s linear, stroke var(--dur-med) var(--ease-spring); filter:drop-shadow(0 0 6px var(--sage)); will-change:stroke-dashoffset, filter; }
.r-fg.running { animation:ringPulse 2.5s ease-in-out infinite; }
@keyframes ringPulse { 0%,100%{filter:drop-shadow(0 0 6px var(--sage))} 50%{filter:drop-shadow(0 0 18px var(--sage))} }
@keyframes digitPulse { 0%{transform:scale(1)} 40%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes finishFlash { 0%{transform:rotate(-90deg) scale(1);filter:brightness(1)} 30%{transform:rotate(-90deg) scale(1.06);filter:brightness(1.4)} 100%{transform:rotate(-90deg) scale(1);filter:brightness(1)} }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-time   { font-family:'Lora',serif; font-size:42px; color:var(--ink); line-height:1; letter-spacing:-1px; transition:color var(--dur-med) var(--ease-spring); will-change:transform; }
.ring-status { font-size:10px; color:var(--ink3); letter-spacing:1.5px; text-transform:uppercase; margin-top:4px; }
.ctrl-row { display:flex; gap:8px; justify-content:center; }
.ctrl {
  padding:9px 20px; border-radius:980px;
  border:1px solid var(--border); background:transparent;
  font-size:12px; color:var(--ink2); cursor:pointer;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; transition:all .15s;
}
.ctrl:hover { background:var(--bg2); border-color:var(--ink3); }
.ctrl.danger { color:var(--warm); border-color:var(--warm-l); }
.ctrl.danger:hover { background:var(--warm-l); }
/* Give-up confirmation overlay */
.giveup-confirm { text-align:center; padding:16px 18px 14px; margin-top:10px; background:rgba(255,80,60,.06); border:1px solid rgba(255,80,60,.14); border-radius:16px; transform-origin:top center; animation:giveupIn .35s cubic-bezier(.34,1.56,.64,1); }
html.dark .giveup-confirm { background:rgba(255,80,60,.09); border-color:rgba(255,80,60,.2); }
.giveup-confirm.closing { animation:giveupOut .22s ease-in forwards; }
.giveup-confirm-emoji { font-size:22px; margin-bottom:6px; animation:giveupNudge 2s ease-in-out infinite; }
.giveup-confirm-text { font-size:13.5px; font-weight:600; color:var(--ink1); margin-bottom:4px; }
.giveup-confirm-quote { font-size:12px; color:var(--ink2); opacity:.75; margin-bottom:14px; font-style:italic; }
.giveup-confirm-btns { display:flex; gap:8px; justify-content:center; }
.giveup-btn-cancel { flex:1.2; padding:9px 0; border-radius:11px; border:none; background:var(--sage); color:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; box-shadow:0 2px 8px rgba(0,113,227,.3); }
.giveup-btn-cancel:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,113,227,.4); }
.giveup-btn-cancel:active { transform:translateY(0); }
.giveup-btn-yes { flex:0.8; padding:9px 0; border-radius:11px; border:none; background:transparent; color:var(--ink1); font-size:12.5px; font-weight:500; cursor:pointer; transition:all .2s; }
.giveup-btn-yes:hover { opacity:1; color:#ff503c; }
@keyframes giveupIn { from { opacity:0; transform:scale(.92) translateY(-8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes giveupOut { to { opacity:0; transform:scale(.95) translateY(-4px); } }
@keyframes giveupNudge { 0%,100% { transform:rotate(0deg); } 25% { transform:rotate(-8deg); } 75% { transform:rotate(8deg); } }
/* ---- sidebar focus footer ---- */
.sb-focus-footer {
  margin-top:28px; padding-top:20px;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:border-color .35s;
}
.sb-today-num { font-family:'Lora',serif; font-size:28px; color:var(--sage); line-height:1; letter-spacing:-.5px; }
.sb-today-lbl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3); }
.sb-mini-tip  { font-size:11px; color:var(--ink3); text-align:center; line-height:1.7; margin-top:8px; font-style:italic; opacity:.75; }
/* finish */
.fin-illo { font-size:50px; margin-bottom:13px; }
.fin-h    { font-family:'Allura',cursive; font-size:32px; color:var(--ink); margin-bottom:8px; }
.fin-msg  { font-size:13px; color:var(--ink2); line-height:1.8; margin-bottom:22px; }
.fin-btns { display:flex; flex-direction:column; gap:8px; }
.fin-btn  { padding:13px; border-radius:980px; font-size:13px; font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer; border:none; transition:all .2s; }
.fin-btn.p { background:var(--ink); color:var(--bg); }
.fin-btn.s { background:var(--bg2); color:var(--ink2); border:1.5px solid var(--border); }
/* break */
.brk-em   { font-size:40px; margin-bottom:9px; }
.brk-lbl  { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--sage); margin-bottom:5px; }
.brk-time { font-family:'Lora',serif; font-size:54px; color:var(--ink); margin:11px 0; }
.brk-note { font-size:12px; color:var(--ink3); }
.skip-btn {
  margin-top:15px; padding:8px 20px; border-radius:980px;
  border:1.5px solid var(--border); background:transparent;
  font-size:12px; color:var(--ink2); cursor:pointer;
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; transition:all .15s;
}
.skip-btn:hover { background:var(--bg2); }

/* ============================================================
   TECH / AI NEWS - Curated daily briefing
============================================================ */
.tech-shell { max-width:760px; margin:0 auto; padding:52px 44px 72px; }
.tech-page-hd {
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-bottom:36px; padding-bottom:20px; border-bottom:1px solid var(--border);
}
.tech-page-hd h2 { font-family:'Lora',serif; font-size:28px; color:var(--ink); letter-spacing:-.4px; }
.tech-page-hd p  { font-size:12px; color:var(--ink3); margin-top:5px; letter-spacing:-.1px; line-height:1.6; }
.tech-page-meta  { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.tech-update-badge {
  font-size:11px; color:var(--sage); background:var(--sage-l);
  padding:3px 10px; border-radius:980px; font-weight:500; letter-spacing:-.05px;
}
.tech-refresh {
  display:flex; align-items:center; gap:5px;
  padding:5px 13px; border:1px solid var(--border); border-radius:980px;
  background:transparent; cursor:pointer; font-size:12px; color:var(--ink2);
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; transition:all .15s; letter-spacing:-.1px;
}
.tech-refresh:hover { background:var(--bg3); border-color:var(--ink3); }
.tech-refresh svg { transition:transform .5s; }
.tech-refresh.spin svg { animation:techSpin .6s linear infinite; }
@keyframes techSpin { to { transform:rotate(360deg); } }

/* Date sections */
.tech-date-section { margin-bottom:32px; }
.tech-date-row {
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.tech-date-label {
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.1px;
}
.tech-today-pill {
  font-size:10px; font-weight:500; letter-spacing:.3px; text-transform:uppercase;
  color:var(--sage); background:var(--sage-l); border-radius:980px; padding:2px 9px;
}
.tech-date-row-history {
  display:flex; align-items:center; gap:10px;
  margin-bottom:0; cursor:pointer; padding:14px 0;
  border-top:1px solid var(--border);
}
.tech-date-row-history .tech-date-label { color:var(--ink2); }
.tech-history-arrow { margin-left:auto; font-size:11px; color:var(--ink3); transition:transform var(--dur-med) var(--ease-spring); }
.tech-history-arrow.open { transform:rotate(180deg); }
.tech-history-body { max-height:0; overflow:hidden; padding-bottom:0; transition:max-height .45s var(--ease-spring), padding-bottom .35s; }
.tech-history-body.open { max-height:2000px; padding-bottom:8px; }

/* Story card */
.tech-story {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:24px 26px;
  margin-bottom:12px; transition:all var(--dur-med) var(--ease-spring);
  position:relative; overflow:hidden; isolation:isolate;
}
.tech-story::before {
  content:''; position:absolute; inset:-2px; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle 120px at var(--card-mx,50%) var(--card-my,50%),
      rgba(0,113,227,0.1) 0%, rgba(88,86,214,0.05) 30%, transparent 55%),
    radial-gradient(circle 80px at calc(var(--card-mx,50%) + 15px) calc(var(--card-my,50%) - 10px),
      rgba(0,113,227,0.05) 0%, transparent 50%);
  opacity:0; transition:opacity .5s; border-radius:inherit;
  filter:blur(2px);
}
.tech-story:hover::before { opacity:1; }
.tech-story:hover { box-shadow:var(--card-sh); transform:translateY(-3px); border-color:var(--sage); }
.tech-story-top {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.tech-story-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tech-tag-pill {
  font-size:10px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
  color:var(--sage); background:var(--sage-l);
  border-radius:980px; padding:2px 9px;
  transition:all var(--dur-fast) var(--ease-spring); cursor:default;
}
.tech-tag-pill:hover { background:var(--sage); color:#fff; transform:scale(1.05); }
.tech-heat { font-size:13px; flex-shrink:0; letter-spacing:-1px; }
.tech-story-title {
  font-family:'Lora',serif; font-size:17px; font-weight:600;
  color:var(--ink); line-height:1.45; letter-spacing:-.25px;
  margin-bottom:14px;
}
.tech-bullets {
  list-style:none; display:flex; flex-direction:column; gap:7px;
  margin-bottom:16px; padding:0;
}
.tech-bullets li {
  display:flex; gap:10px; font-size:13.5px; color:var(--ink2);
  line-height:1.6; letter-spacing:-.12px;
}
.tech-bullets li::before {
  content:"-"; color:var(--sage); flex-shrink:0; margin-top:1px;
  font-weight:600;
}
.tech-take {
  background:var(--bg3); border-left:3px solid var(--sage);
  border-radius:0 8px 8px 0; padding:10px 14px; margin-bottom:16px;
}
.tech-take-lbl {
  font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--sage); font-weight:600; margin-bottom:4px;
}
.tech-take-body { font-size:13px; color:var(--ink2); line-height:1.65; letter-spacing:-.1px; }
.tech-source-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--sage); text-decoration:none;
  border:1px solid var(--sage-l); border-radius:980px; padding:5px 12px;
  transition:all .15s; letter-spacing:-.1px;
}
.tech-source-link:hover { background:var(--sage-l); border-color:var(--sage); }
.tech-source-link svg { flex-shrink:0; }

/* Mobile responsive */
@media (max-width:660px) {
  .tech-shell { padding:28px 20px 48px; }
  .tech-story { padding:18px 18px; }
  .tech-story-title { font-size:15px; }
  .tech-bullets li { font-size:13px; }
  .tech-page-hd { flex-direction:column; align-items:flex-start; }
  .tech-page-meta { align-items:flex-start; }
}
/* ============================================================
   ABOUT PAGE
============================================================ */
.about-shell { max-width:760px; margin:0 auto; padding:56px 44px; }
.about-hero {
  display:flex; align-items:flex-end; gap:26px;
  margin-bottom:34px; padding-bottom:30px;
  border-bottom:1.5px solid var(--border);
}
.about-big-av {
  width:108px; height:108px; border-radius:50%;
  background:var(--bg);
  overflow:hidden; flex-shrink:0; box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.about-big-av img { width:100%; height:100%; object-fit:cover; object-position:top; }
.about-name   { font-family:'Allura',cursive; font-size:42px; color:var(--ink); margin-bottom:4px; }
.about-handle { font-size:13px; color:var(--ink3); margin-bottom:11px; letter-spacing:.3px; }
.about-tags   { display:flex; gap:7px; flex-wrap:wrap; }
.a-tag {
  padding:4px 11px; border:1.5px solid var(--border);
  border-radius:20px; font-size:11px; color:var(--ink2); background:var(--bg2);
}
.about-bio { font-size:15px; line-height:1.95; color:var(--ink2); margin-bottom:30px; max-width:680px; }
.about-bio p { margin-bottom:13px; }
.about-links { display:flex; gap:10px; flex-wrap:wrap; }
.a-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 17px; border:1.5px solid var(--border);
  border-radius:30px; font-size:13px; color:var(--ink2);
  text-decoration:none; background:transparent;
  transition:all var(--dur-med) var(--ease-spring); cursor:pointer;
}
.a-link:hover { background:var(--sage-l); border-color:var(--sage); color:var(--sage); transform:translateY(-2px); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px) and (min-width:661px) {
  .hero-wrap { padding:48px 28px 0; }
  .hero-title { font-size:42px; }
  .stats-bar { padding:32px 28px 40px; }
  .stats-cells { gap:10px; }
  .stats-right-fill { margin-right:-28px; }
  .content-sec { padding:28px; }
  /* video-grid: auto-fill handles columns */
  .journal-grid { grid-template-columns:1fr; }
}
@media (max-width:660px) {
  nav { padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 8px; gap:6px; flex-wrap:wrap; height:auto; row-gap:8px; top:0; }
  nav.scrolled { height:auto; }                    /* don't clamp height on mobile or the 2nd row gets clipped */
  .nav-logo-text { font-size:23px; }
  .nav-controls { margin-left:auto; }
  /* on phones the tabs drop to their own full-width row so every tab stays reachable */
  .nav-tabs { order:3; flex-basis:100%; max-width:100%; justify-content:center; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-tabs::-webkit-scrollbar { display:none; }
  .tab-btn { padding:8px 12px; font-size:12px; min-height:40px; flex:0 0 auto; white-space:nowrap; }
  .hero-wrap { padding:42px 14px 0; }
  .hero-title { font-size:32px; letter-spacing:-.5px; }
  .stats-bar { padding:24px 14px 32px; }
  .stats-cells { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .stat-cell { padding:20px 12px; }
  .stat-n { font-size:24px; }
  .content-sec { padding:22px 14px; }
  .video-grid { grid-template-columns:1fr; }
  .hero-cta { flex-wrap:wrap; gap:8px; }
  .btn-ink, .btn-outline { justify-content:center; padding:11px 20px; font-size:13px; }
  .journal-shell, .about-shell { padding:34px 14px; }
  .hero-av { width:88px; height:88px; margin-bottom:16px; }
  .about-hero { flex-direction:column; align-items:center; text-align:center; }
  .about-tags, .about-links { justify-content:center; }
  .j-card { padding:20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .page, *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ---- FOOTER ---------------------------------------------------- */
.footer {
  border-top:1px solid var(--border);
  background:var(--bg); font-size:14px;
}
.footer-inner {
  max-width:1152px; margin:0 auto;
  padding:60px 44px 36px;
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:56px;
}
/* Brand column */
.footer-brand { display:flex; flex-direction:column; gap:0; }
.footer-brand-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand-av {
  width:36px; height:36px; border-radius:50%; overflow:hidden;
  flex-shrink:0; background:var(--bg3);
}
.footer-brand-av img { width:100%; height:100%; object-fit:cover; object-position:top; }
.footer-brand-name { font-family:'Allura',cursive; font-size:26px; color:var(--ink); }
.footer-desc { font-size:13px; line-height:1.75; color:var(--ink2); margin-bottom:20px; }
.footer-icons { display:flex; gap:8px; }
.footer-icon-btn {
  width:36px; height:36px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink2); text-decoration:none; font-size:15px;
  transition:all var(--dur-med) var(--ease-spring);
}
.footer-icon-btn:hover { border-color:var(--sage); color:var(--sage); background:var(--sage-l); transform:translateY(-3px) scale(1.08); }
/* Nav columns */
.footer-col { display:flex; flex-direction:column; gap:0; }
.footer-col-label {
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.02em; margin-bottom:14px;
}
.footer-nav-link {
  display:block; font-size:14px; color:var(--ink2);
  text-decoration:none; padding:5px 0;
  transition:all var(--dur-med) var(--ease-spring);
}
.footer-nav-link:hover { color:var(--sage); transform:translateX(4px); }
/* Bottom bar */
.footer-bar {
  border-top:1px solid var(--border);
  max-width:1152px; margin:0 auto;
  padding:20px 44px;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-copy { font-size:12.5px; color:var(--ink3); letter-spacing:.2px; }

@media(max-width:1100px){
  .footer-inner { grid-template-columns:2fr 1fr 1fr; padding:44px 28px 28px; gap:32px; }
  .footer-bar { padding:16px 28px; }
}
@media(max-width:660px){
  .footer-inner { grid-template-columns:1fr 1fr; padding:36px 20px 24px; gap:28px; }
  .footer-brand { grid-column:1/-1; align-items:center; text-align:center; }
  .footer-icons { justify-content:center; }
  .footer-bar { padding:14px 20px; flex-direction:column; gap:6px; text-align:center; }
}


/* ---- HEATMAP ---- */

/* ── About page additions ── */
.about-section { margin-bottom:28px; }
.about-section-title {
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink3); margin-bottom:12px;
}
.about-chips { display:flex; flex-wrap:wrap; gap:8px; }
.about-chip {
  background:var(--bg3); border-radius:980px;
  padding:6px 14px; font-size:13px; color:var(--ink2);
  transition:all var(--dur-med) var(--ease-spring); cursor:default;
}
.about-chip:hover { background:var(--sage-l); color:var(--sage); transform:translateY(-2px) scale(1.04); }
.about-schedule { display:flex; flex-direction:column; gap:6px; }
.about-sched-row { display:flex; align-items:center; gap:12px; }
.about-sched-day { font-size:13px; color:var(--ink2); min-width:72px; }
.about-sched-time { font-size:13px; color:var(--ink); font-weight:500; }
.about-sched-note { font-size:11px; color:var(--ink3); margin-top:4px; }

/* ── Sidebar weekly stats ── */
.sb-weekly-section { border-top:1px solid var(--border); padding:14px 22px 22px; }
.sb-weekly-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; cursor:pointer; padding:4px 0 8px;
  font-size:12px; font-weight:600; color:var(--ink2); font-family:inherit;
  transition:color .15s;
}
.sb-weekly-toggle:hover { color:var(--ink); }
.sb-weekly-arrow { font-size:12px; transition:transform .2s; display:inline-block; }
.sb-weekly-toggle[aria-expanded="true"] .sb-weekly-arrow { transform:rotate(180deg); }
.sb-weekly-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; padding-top:4px;
}
.sb-weekly-stat {
  background:var(--bg3); border-radius:12px;
  padding:10px 12px;
}
.sb-weekly-num { font-size:18px; font-weight:700; color:var(--sage); line-height:1; margin-bottom:3px; }
.sb-weekly-lbl { font-size:10px; color:var(--ink3); letter-spacing:.5px; }


/* ====== 每日三件事 Today's Three Things ====== */
.tt-wrap{ background:var(--bg2); border:1.5px solid var(--border); border-radius:18px; padding:14px 11px 12px; margin-bottom:20px; }
#timer-sidebar .tt-wrap{
  margin:0; border-radius:0; background:transparent; border:none;
  padding:6px 0 0;
}
#timer-sidebar .tt-wrap .tt-pips{ gap:4px; }
#timer-sidebar .tt-wrap .tt-pip{ width:7px; height:7px; }
#timer-sidebar .tt-wrap .tt-item{ border-top:1px solid var(--border); padding:7px 0 5px; }
#timer-sidebar .tt-wrap .tt-item:first-child{ border-top:none; }
#timer-sidebar .tt-wrap .tt-foot{ font-size:11px; margin-top:8px; }
.step-section{ margin-bottom:14px; }
.step-section+.step-section{ padding-top:16px; border-top:1px solid var(--border); }
.step-label{ font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink3); margin-bottom:10px; }
.more-settings-collapsible{ margin-top:10px; }
.more-settings-toggle{
  display:flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:2px 0;
  font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink3);
  font-family:inherit; transition:color .15s; font-weight:600;
}
.more-settings-toggle:hover{ color:var(--ink2); }
.more-settings-arrow{ font-size:11px; transition:transform .2s; display:inline-block; }
.more-settings-toggle[aria-expanded="true"] .more-settings-arrow{ transform:rotate(180deg); }
.tt-collapsible{ border-top:1px solid var(--border); margin-top:14px; padding-top:4px; }
.sb-section-card{ background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:4px 16px 10px; }
.sb-section-card .tt-collapsible{ border-top:none; margin-top:0; padding-top:0; }
.tt-collapse-toggle{
  display:flex; align-items:center; gap:6px; width:100%;
  background:none; border:none; cursor:pointer; padding:8px 0;
  font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--ink3);
  font-family:inherit; transition:color .15s;
}
.tt-collapse-toggle:hover{ color:var(--ink2); }
.tt-collapse-toggle .tt-pips{ margin-left:auto; margin-right:4px; }
.tt-collapse-arrow{ font-size:12px; transition:transform .2s; display:inline-block; }
.tt-collapse-toggle[aria-expanded="true"] .tt-collapse-arrow{ transform:rotate(180deg); }
.tt-pips{ display:flex; gap:5px; align-items:center; margin-left:auto; }
.tt-pip{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--border); background:transparent; transition:all .25s; }
.tt-pip.done{ background:var(--sage); border-color:var(--sage); }
.tt-item{ border-top:1px solid var(--border); padding:8px 0 6px; }
.tt-item:first-child{ border-top:none; }
.tt-row{ display:flex; align-items:center; gap:6px; }
.tt-num{ flex:0 0 auto; width:21px; height:21px; border-radius:50%; border:1.5px solid var(--border); color:var(--ink3); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; user-select:none; }
.tt-num:hover{ border-color:var(--sage); color:var(--sage); }
.tt-item.done .tt-num{ background:var(--sage); border-color:var(--sage); color:#fff; }
.tt-input{ flex:1; min-width:0; border:none; background:transparent; color:var(--ink); font-size:14px; font-family:inherit; padding:3px 2px; outline:none; }
.tt-input::placeholder{ color:var(--ink3); }
.tt-item.done .tt-input{ color:var(--ink3); text-decoration:line-through; }
.tt-row .goal-pomo{ padding:1px 5px; font-size:10px; }
@keyframes chipFly{ 0%{transform:scale(1);opacity:1} 60%{transform:scale(1.12);opacity:.7} 100%{transform:scale(.88);opacity:.4} }
@keyframes cardReceive{ 0%{transform:scale(1)} 40%{transform:scale(1.04);box-shadow:0 0 0 2px var(--sage),0 4px 16px rgba(0,113,227,.18)} 100%{transform:scale(1);box-shadow:none} }
.chip-fly{ animation:chipFly .35s ease forwards; pointer-events:none; }
.chip-dragging{ opacity:.35!important; transform:scale(.93); cursor:grabbing; }
.task-chip[draggable=true]{ cursor:grab; }
.tt-inline-card.drag-over{ border-color:var(--sage)!important; border-style:dashed!important; background:var(--sage-l)!important; transform:scale(1.03); }
.card-receive{ animation:cardReceive .45s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) forwards; }
.tt-inline-header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:12px; }
.tt-inline-eyebrow{ display:block; margin-bottom:4px; font-size:9px; font-weight:650; letter-spacing:.14em; color:var(--ink3); opacity:.72; }
.tt-inline-title{ font-size:18px; font-weight:650; letter-spacing:-.035em; color:var(--ink1); line-height:1.2; }
.tt-inline-hint{ font-size:10px; color:var(--ink3); opacity:.62; padding-bottom:2px; }
.tt-inline-empty-hint{ font-size:11px; color:var(--ink3); text-align:center; padding:6px 0 2px; opacity:.75; }
.tt-inline-motto{ font-size:11px; color:var(--ink3); text-align:left; padding:8px 2px 0 32px; font-style:normal; line-height:1.5; }
.tt-motto-quote{ font-size:16px; color:var(--sage); font-style:normal; vertical-align:-1px; }
.tt-motto-attr{ font-size:10.5px; color:var(--ink3); font-style:normal; margin-left:4px; }
.tt-inline-row{ display:grid; grid-template-columns:1fr; margin:0 0 4px; }
.tt-inline-card{ border:1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius:14px; padding:15px 15px 13px; cursor:pointer; transition:background .18s,border-color .18s,transform .18s; min-height:68px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; background:color-mix(in srgb, var(--bg2) 88%, transparent); }
.tt-inline-card:hover:not(.empty){ background:var(--bg3); border-color:color-mix(in srgb, var(--ink3) 45%, var(--border)); transform:translateY(-1px); }
.tt-inline-card.empty{ min-height:74px; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; border-style:solid; opacity:1; }
.tt-inline-card.empty:hover{ background:var(--bg3); border-color:color-mix(in srgb, var(--sage) 42%, var(--border)); transform:translateY(-1px); }
.tt-inline-card.done{ opacity:.5; }
.tt-inline-card.selected{ border-color:color-mix(in srgb, var(--sage) 64%, var(--border)); box-shadow:0 0 0 3px color-mix(in srgb, var(--sage-l) 62%, transparent); background:color-mix(in srgb, var(--sage-l) 58%, var(--bg2)); }
.tt-inline-card.editing{ border-color:var(--sage); background:var(--bg2); box-shadow:0 0 0 3px var(--sage-l); }
.tt-ic-top{ display:flex; align-items:center; gap:10px; width:100%; }
.tt-ic-num{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--sage); background:var(--sage-l); }
.tt-ic-text{ font-size:15px; font-weight:550; letter-spacing:-.015em; color:var(--ink1); line-height:1.4; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tt-ic-del{ appearance:none; border:0; background:transparent; cursor:pointer; font-size:15px; color:var(--ink3); opacity:0; transition:opacity .15s,color .15s; flex-shrink:0; line-height:1; padding:4px; }
.tt-inline-card:hover .tt-ic-del{ opacity:.7; }
.tt-ic-del:hover{ opacity:1!important; color:var(--err,#f44); }
.tt-ic-bottom{ display:flex; align-items:center; justify-content:space-between; margin:7px 0 0 32px; }
.tt-ic-stat{ font-size:10px; color:var(--ink3); }
.tt-ic-dur{ font-size:10px; font-weight:700; color:var(--sage); background:var(--sage-l); border-radius:4px; padding:1px 5px; cursor:pointer; flex-shrink:0; }
.tt-ic-dur:hover{ filter:brightness(.88); }
.tt-ic-empty-mark{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:16px; font-weight:400; color:var(--sage); background:var(--sage-l); }
.tt-ic-empty{ font-size:13px; color:var(--ink3); letter-spacing:-.01em; }
.tt-ic-input{ width:100%; border:none; background:transparent; font-size:15px; font-weight:550; letter-spacing:-.015em; color:var(--ink1); outline:none; padding:7px 2px; }
.tt-meta{ display:flex; align-items:center; gap:5px; padding:1px 0 6px 28px; font-size:10.5px; }
.tt-meta-stat{ color:var(--ink3); }
.tt-meta-sep{ color:var(--border); }
.tt-meta-dur{ color:var(--sage); font-weight:600; cursor:pointer; padding:1px 4px; border-radius:4px; transition:background .12s; }
.tt-meta-dur:hover{ background:var(--sage-l); }
.tt-start-btn{ opacity:0; pointer-events:none; flex:0 0 auto; display:flex; align-items:center; gap:3px; background:var(--sage); color:#fff; border:none; border-radius:980px; padding:5px 10px; font-size:11.5px; font-weight:600; cursor:pointer; transition:opacity .2s, transform .15s; white-space:nowrap; }
.tt-start-btn.vis{ opacity:1; pointer-events:auto; }
.tt-start-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.tt-foot{ font-size:11.5px; color:var(--ink3); text-align:center; margin-top:6px; line-height:1.5; }
.tt-foot.alldone{ color:var(--sage); font-weight:600; }
.tt-finish-link{ font-size:12px; text-align:center; margin:6px 0 2px; }
.tt-finish-link button{ background:none; border:none; color:var(--sage); font-size:12px; cursor:pointer; font-family:inherit; padding:0; }
.tt-finish-link button:hover{ text-decoration:underline; }


/* ====== 挑战模式 Challenge Mode ====== */
.ch-toggle-row{ display:flex; align-items:center; gap:10px; margin:8px 0 10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg2); }
.ch-toggle{ flex:0 0 auto; width:42px; height:24px; border-radius:980px; border:none; background:var(--bg3); position:relative; cursor:pointer; transition:background .2s; padding:0; }
.ch-toggle.on{ background:var(--sage); }
.ch-toggle-dot{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ch-toggle.on .ch-toggle-dot{ transform:translateX(18px); }
.ch-toggle-txt{ flex:1; min-width:0; cursor:pointer; }
.ch-toggle-t{ font-size:13.5px; font-weight:600; color:var(--ink); }
.ch-toggle-s{ font-size:11px; color:var(--ink3); margin-top:1px; }
.ch-done-btn{ width:100%; padding:13px 0; margin-bottom:12px; border:none; border-radius:980px; background:var(--sage); color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:filter .15s, transform .15s; box-shadow:0 4px 14px rgba(0,113,227,.3); }
.ch-done-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
#ch-result{ margin:14px 0 4px; }
.ch-res{ border-radius:14px; padding:13px 15px; text-align:left; }
.ch-res-win{ background:linear-gradient(135deg, rgba(244,197,66,.16), rgba(0,113,227,.10)); border:1px solid rgba(244,197,66,.4); }
.ch-res-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:3px 0; }
.ch-res-k{ color:var(--ink2); } .ch-res-v{ color:var(--ink); font-weight:600; }
.ch-res-record .ch-res-k, .ch-res-record .ch-res-v{ color:#e8a000; font-weight:700; }
.ch-res-badges{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--sage); font-weight:600; text-align:center; }
.ch-res-miss{ background:var(--bg2); border:1px solid var(--border); }
.ch-res-miss-t{ font-size:13px; color:var(--ink2); line-height:1.6; text-align:center; }

/* ── Sidebar Goals Section ── */

.heatmap-wrap {
  padding:20px 20px 8px;
  background:var(--bg2);
  border-radius:16px;
  margin:12px 16px 16px;
  border:1.5px solid var(--border);
}
.heatmap-title {
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:10px;
}
.heatmap-grid {
  display:flex;
  gap:3px;
  overflow-x:auto;
  padding-bottom:4px;
}
.hm-col { display:flex; flex-direction:column; gap:3px; }
.hm-cell {
  width:11px;
  height:11px;
  border-radius:2px;
  background:var(--bg3);
  cursor:default;
  transition:transform .15s;
  flex-shrink:0;
}
.hm-cell:hover { transform:scale(1.4); }
.hm-cell[data-v="1"] { background:rgba(0,113,227,.25); }
.hm-cell[data-v="2"] { background:rgba(0,113,227,.5); }
.hm-cell[data-v="3"] { background:rgba(0,113,227,.75); }
.hm-cell[data-v="4"] { background:rgba(0,113,227,1); }
.heatmap-legend {
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  justify-content:flex-end;
}
.hm-legend-label { font-size:10px; color:var(--ink3); }
.hm-legend-cell {
  width:10px; height:10px; border-radius:2px;
}

/* ---- SHARE CARD ---- */
.share-btn {
  margin-top:12px;
  width:100%;
  padding:11px 0;
  border:1.5px solid var(--border);
  border-radius:980px;
  background:transparent;
  color:var(--ink2);
  font-size:13px;
  cursor:pointer;
  transition:all .2s;
}
.share-btn:hover { border-color:var(--sage); color:var(--sage); }
#share-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  z-index:999;
  align-items:center;
  justify-content:center;
}
#share-overlay.open { display:flex; }
/* ===== 数据面板 Dashboard ===== */
#dash-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:1000; align-items:center; justify-content:center; padding:16px; opacity:0; transition:opacity .25s var(--ease-spring,ease); }
#dash-overlay.open{ display:flex; opacity:1; }
.dash-card{ background:var(--bg2,#fff); color:var(--ink,#1d1d1f); width:min(680px,100%); max-height:90vh; overflow-y:auto; border-radius:28px; padding:26px 24px 30px; position:relative; box-shadow:var(--card-sh,0 24px 60px rgba(0,0,0,.3)); transform:translateY(12px) scale(.98); transition:transform .3s var(--ease-spring,ease); -webkit-overflow-scrolling:touch; }
#dash-overlay.open .dash-card{ transform:translateY(0) scale(1); }
.dash-close{ position:absolute; top:16px; right:18px; width:34px; height:34px; border:none; background:var(--bg3,#eee); color:var(--ink2,#555); border-radius:50%; font-size:19px; cursor:pointer; line-height:1; transition:transform .15s, background .15s; }
.dash-close:hover{ transform:scale(1.08); background:var(--border,#d6d6d6); }
.dash-h{ font-size:22px; font-weight:800; margin:0 0 3px; letter-spacing:-.02em; }
.dash-sub{ font-size:12px; color:var(--ink3,#999); margin-bottom:18px; }
.dash-loading{ text-align:center; padding:48px 0; color:var(--ink3,#999); }
.dash-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.dash-cell{ background:var(--bg3,#f4f4f6); border-radius:16px; padding:14px 8px; text-align:center; transition:transform .15s; }
.dash-cell:hover{ transform:translateY(-2px); }
.dash-cell-n{ display:block; font-size:22px; font-weight:800; color:var(--sage,#0071e3); letter-spacing:-.02em; }
.dash-cell-l{ display:block; font-size:11px; color:var(--ink3,#999); margin-top:3px; }
.dash-range{ display:inline-flex; gap:0; margin-bottom:6px; background:var(--bg3,#f4f4f6); border-radius:980px; padding:3px; }
.dash-range-btn{ padding:6px 16px; border:none; background:transparent; color:var(--ink2,#555); border-radius:980px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
.dash-range-btn.sel{ background:var(--bg2,#fff); color:var(--sage,#0071e3); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.dash-sec-title{ font-size:13px; font-weight:700; margin:22px 0 12px; color:var(--ink2,#555); display:flex; align-items:center; gap:6px; }
.dash-trend{ display:flex; align-items:flex-end; gap:3px; height:120px; padding-top:6px; }
.dash-bar-col{ flex:1; min-width:4px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.dash-bar{ width:100%; max-width:20px; background:linear-gradient(180deg,var(--sage,#0071e3),#5ac8fa); border-radius:5px 5px 0 0; min-height:3px; transition:height .4s var(--ease-spring,ease); }
.dash-bar-col:hover .dash-bar{ filter:brightness(1.12); }
.dash-bar-x{ font-size:9px; color:var(--ink3,#999); margin-top:5px; white-space:nowrap; }
.dash-hours{ display:flex; align-items:flex-end; gap:2px; height:88px; padding-top:6px; }
.dash-hour-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.dash-hour-bar{ width:100%; max-width:13px; background:var(--sage,#0071e3); opacity:.38; border-radius:3px 3px 0 0; min-height:2px; transition:height .4s var(--ease-spring,ease); }
.dash-hour-col:hover .dash-hour-bar{ opacity:.7; }
.dash-hour-bar.peak{ opacity:1; background:linear-gradient(180deg,#ff9f0a,#ffd60a); }
.dash-hour-x{ font-size:8px; color:var(--ink3,#999); margin-top:3px; }

.dash-split{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.dash-ring{ width:128px; height:128px; border-radius:50%; flex:0 0 auto; position:relative; }
.dash-ring::after{ content:''; position:absolute; inset:27px; background:var(--bg2,#fff); border-radius:50%; }
.dash-ring-c{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:1; }
.dash-ring-c b{ font-size:17px; font-weight:800; } .dash-ring-c span{ font-size:10px; color:var(--ink3,#999); margin-top:1px; }
.dash-tasks{ flex:1; min-width:210px; }
.dash-task-row{ margin-bottom:11px; }
.dash-task-top{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
.dash-task-name{ color:var(--ink,#1d1d1f); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; display:flex; align-items:center; gap:5px; }
.dash-task-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.dash-task-min{ color:var(--ink3,#999); }
.dash-task-track{ height:8px; background:var(--bg3,#eee); border-radius:6px; overflow:hidden; }
.dash-task-fill{ height:100%; border-radius:6px; transition:width .5s var(--ease-spring,ease); }
.dash-empty{ text-align:center; color:var(--ink3,#999); padding:32px 0; font-size:13px; }
.dash-export{ margin-top:24px; width:100%; padding:12px; border:1px solid var(--border,#d6d6d6); background:transparent; color:var(--ink2,#555); border-radius:980px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.dash-export:hover{ border-color:var(--sage,#0071e3); color:var(--sage,#0071e3); }
.dash-entry-btn{ display:block; width:100%; margin-top:12px; padding:10px; border:1px solid var(--border,#d6d6d6); background:transparent; color:var(--ink2,#555); border-radius:980px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.dash-entry-btn:hover{ border-color:var(--sage,#0071e3); color:var(--sage,#0071e3); transform:translateY(-1px); }

/* ── Sidebar: data entry button ── */
.sb-data-section { padding:6px 10px 10px; }
.sb-data-btn {
  display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px;
  border:1px solid var(--border); background:var(--bg); border-radius:16px;
  cursor:pointer; transition:all .2s; text-align:left;
}
.sb-data-btn:hover { border-color:var(--sage); background:var(--sage-l,rgba(0,113,227,.04)); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.sb-data-btn-icon { font-size:18px; flex:0 0 auto; }
.sb-data-btn-text { flex:1; font-size:12px; font-weight:500; color:var(--ink2); line-height:1.3; }
.sb-data-btn-arrow { font-size:16px; color:var(--ink3); opacity:.5; }
.sb-data-btn:hover .sb-data-btn-arrow { color:var(--sage); opacity:1; }

/* ── Sidebar: contextual login hints ── */
.sb-login-hint {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:8px; padding:8px 10px; border-radius:10px;
  background:color-mix(in srgb, var(--sage) 6%, transparent);
  font-size:11px; color:var(--ink3); line-height:1.3;
}
.sb-login-hint-btn {
  flex:0 0 auto; padding:4px 12px; border:1px solid var(--sage); background:none;
  color:var(--sage); border-radius:980px; font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.sb-login-hint-btn:hover { background:var(--sage); color:#fff; }

/* ── Dashboard tabs ── */
.dash-tabs {
  display:flex; gap:0; margin-bottom:18px; background:var(--bg3,#f4f4f6);
  border-radius:980px; padding:3px; width:fit-content;
}
.dash-tab-btn {
  padding:8px 20px; border:none; background:transparent; color:var(--ink2,#555);
  border-radius:980px; font-size:13px; font-weight:600; cursor:pointer;
  transition:all .2s; white-space:nowrap;
}
.dash-tab-btn.sel {
  background:var(--bg2,#fff); color:var(--sage,#0071e3);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.dash-tab-btn:hover:not(.sel) { color:var(--ink); }

/* Leaderboard inside dashboard */
.dash-lb-wrap { padding:4px 0; }
.dash-lb-wrap .lb-list { max-height:400px; overflow-y:auto; scrollbar-width:thin; }
.dash-lb-wrap .lb-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; transition:background .15s; }
.dash-lb-wrap .lb-item:hover { background:var(--bg3,#f4f4f6); }
.dash-lb-wrap .lb-item.lb-me { background:color-mix(in srgb, var(--sage) 8%, transparent); }

/* Heatmap inside dashboard */
.dash-hm-wrap { padding:4px 0; }
.dash-hm-wrap .heatmap-grid { justify-content:center; }

.share-card {
  width:320px;
  background:linear-gradient(135deg,#0a0a1a 0%,#0d1f3c 100%);
  border-radius:20px;
  padding:28px 24px 20px;
  color:#fff;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.sc-close {
  position:absolute;
  top:12px; right:14px;
  background:none; border:none;
  color:rgba(255,255,255,.5);
  font-size:20px; cursor:pointer;
}
.sc-av { width:52px; height:52px; border-radius:50%; overflow:hidden; margin-bottom:14px; }
.sc-av img { width:100%; height:100%; object-fit:cover; }
.sc-mins { font-size:48px; font-weight:700; line-height:1; color:#fff; }
.sc-label { font-size:13px; color:rgba(255,255,255,.6); margin-top:4px; margin-bottom:20px; }
.sc-bar-wrap { background:rgba(255,255,255,.1); border-radius:4px; height:6px; margin-bottom:20px; overflow:hidden; }
.sc-bar { height:100%; border-radius:4px; background:var(--sage); transition:width 1s ease; }
.sc-brand { font-size:11px; color:rgba(255,255,255,.4); letter-spacing:.05em; text-align:center; margin-top:8px; }
.sc-stats { display:flex; justify-content:space-around; gap:8px; margin:2px 0 6px; }
.sc-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.sc-stat-n { font-size:23px; font-weight:700; color:#fff; line-height:1; }
.sc-stat-l { font-size:11px; color:rgba(255,255,255,.5); }
.share-data-wrap { text-align:center; margin-top:12px; }
.share-data-btn {
  background:var(--bg2); border:1px solid var(--border); color:var(--ink2);
  font-size:13px; padding:9px 20px; border-radius:980px; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), color var(--dur-fast);
}
.share-data-btn:hover { transform:translateY(-1px); border-color:var(--sage); color:var(--ink); }
.sc-actions { display:flex; gap:8px; margin-top:16px; }
.sc-act-btn {
  flex:1; padding:10px 0;
  border-radius:980px; border:none;
  font-size:13px; cursor:pointer; font-weight:500;
}
.sc-act-btn.primary { background:var(--sage); color:#fff; }
.sc-act-btn.secondary { background:rgba(255,255,255,.12); color:#fff; }
.sc-continue { display:block; width:100%; margin-top:14px; background:none; border:none; cursor:pointer; color:rgba(255,255,255,.55); font-size:13px; font-weight:500; font-family:inherit; transition:color .15s; }
.sc-continue:hover { color:#fff; }
.sc-share-cap { font-size:11px; color:rgba(255,255,255,.4); text-align:center; margin-top:18px; letter-spacing:.04em; }
.sc-social { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:10px; }
.sc-social-btn {
  position:relative;
  width:38px; height:38px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:none; cursor:pointer;
  transition:transform .15s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.sc-social-btn:hover { transform:translateY(-2px); }
.sc-social-btn svg { width:18px; height:18px; fill:#fff; }
.sc-social-btn::after {
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:#fff; color:#0d1226; font-size:12px; line-height:1; font-weight:600;
  white-space:nowrap; padding:6px 10px; border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .1s ease; z-index:6;
}
.sc-social-btn::before {
  content:''; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#fff;
  opacity:0; pointer-events:none; transition:opacity .1s ease; z-index:6;
}
.sc-social-btn:hover::after, .sc-social-btn:hover::before { opacity:1; }
.sc-social-btn.x:hover { background:#000; }
.sc-social-btn.reddit:hover { background:#ff4500; }
.sc-social-btn.instagram:hover { background:#e1306c; }
.sc-social-btn.facebook:hover { background:#1877f2; }
.sc-social-btn.threads:hover { background:#000; }
.sc-social-btn.telegram:hover { background:#229ed9; }
.sc-social-btn.whatsapp:hover { background:#25d366; }
#sc-toast {
  position:fixed; left:50%; bottom:32px; transform:translate(-50%,20px);
  background:rgba(20,22,34,.96); color:#fff; font-size:13px;
  padding:11px 18px; border-radius:12px; z-index:10000;
  box-shadow:0 8px 30px rgba(0,0,0,.4); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; max-width:88vw; text-align:center;
}
#sc-toast.show { opacity:1; transform:translate(-50%,0); }

/* ---- LIVE-PRESENCE BADGE (reused by YT hero bar) ---- */
.ambient-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 980px;
  padding: 6px 14px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
}
.ambient-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff3b30;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
/* ---- YOUTUBE HERO (replaces ambient video) ---- */
.yt-hero { display:flex; flex-direction:column; gap:14px; }
.yt-hero-media {
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:16/9; background:var(--bg2); border:1px solid var(--border);
}
.yt-embed-frame { width:100%; height:100%; border:0; display:block; }
.yt-fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:28px 22px;
  background: radial-gradient(120% 130% at 50% 0%, var(--sage-l) 0%, transparent 62%), var(--bg2);
}
.yt-fallback-inner { display:flex; flex-direction:column; align-items:center; gap:9px; max-width:430px; }
.yt-fb-avatar {
  width:74px; height:74px; border-radius:50%; overflow:hidden;
  border:2px solid var(--border); box-shadow:var(--card-sh);
}
.yt-fb-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.yt-fb-name { font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.yt-fb-handle { font-size:13px; color:var(--ink3); }
.yt-fb-desc { font-size:13.5px; line-height:1.6; color:var(--ink2); margin:3px 0 2px; }
.yt-hero-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.yt-hero-bar .ambient-badge {
  background:var(--bg2); border:1px solid var(--border); color:var(--ink2); backdrop-filter:none;
}
.yt-subscribe-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:#ff0000; color:#fff; font-size:14px; font-weight:600;
  padding:10px 22px; border-radius:980px; text-decoration:none;
  box-shadow:0 4px 14px rgba(255,0,0,.28);
  transition:transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.yt-subscribe-btn:hover { background:#e60000; transform:translateY(-1px) scale(1.02); }
.yt-subscribe-btn svg { flex-shrink:0; }
@media (max-width:560px){ .yt-hero-bar { justify-content:center; } }

/* ── LOGIN MODAL ── */
.login-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s;
}
.login-overlay.open { display:flex; opacity:1; }
.login-modal {
  background:var(--bg); border-radius:20px; padding:36px 32px 28px;
  width:380px; max-width:92vw; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  position:relative;
}
.login-close {
  position:absolute; top:14px; right:14px;
  width:28px; height:28px; border-radius:50%;
  border:none; background:var(--bg2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink3); font-size:16px; transition:all .2s;
}
.login-close:hover { background:var(--bg3); color:var(--ink); }
.login-title {
  font-size:20px; font-weight:700; color:var(--ink);
  margin-bottom:6px; text-align:center;
}
.login-subtitle {
  font-size:13px; color:var(--ink3); text-align:center;
  margin-bottom:12px; line-height:1.5;
}
.login-cloud-status {
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:20px; margin:0 0 18px; color:var(--ink3);
  font-size:11px; line-height:1.4; text-align:center;
}
.login-cloud-dot {
  width:6px; height:6px; flex:0 0 6px; border-radius:50%;
  background:var(--ink3); box-shadow:0 0 0 3px color-mix(in srgb,var(--ink3) 12%,transparent);
}
.login-cloud-status.is-connecting .login-cloud-dot { animation:cloudPulse 1.4s ease-in-out infinite; }
.login-cloud-status.is-ready { color:var(--ink2); }
.login-cloud-status.is-ready .login-cloud-dot { background:#34c759; box-shadow:0 0 0 3px rgba(52,199,89,.12); }
.login-cloud-status.is-error { color:#ff453a; }
.login-cloud-status.is-error .login-cloud-dot { background:#ff453a; box-shadow:0 0 0 3px rgba(255,69,58,.12); }
@keyframes cloudPulse { 50% { opacity:.4; transform:scale(.72); } }
/* ── Method selection cards ── */
.login-methods { display:flex; flex-direction:column; gap:10px; }
.login-method-btn {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--bg);
  cursor:pointer; transition:all .2s; width:100%;
  font-size:14px; font-weight:500; color:var(--ink);
}
.login-method-btn:hover {
  border-color:var(--sage); background:rgba(0,113,227,.03);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.login-method-btn:disabled { opacity:.62; cursor:wait; transform:none; box-shadow:none; }
.login-method-btn .lm-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.login-method-btn .lm-icon.google { background:#f1f3f4; }
.login-method-btn .lm-icon.email  { background:rgba(0,113,227,.08); }

.login-method-btn .lm-info { text-align:left; }
.login-method-btn .lm-name { font-weight:600; }
.login-method-btn .lm-desc { font-size:11px; color:var(--ink3); margin-top:2px; }
/* ── Form views ── */
.login-form-view { display:none; }
.login-form-view.active { display:block; }
.login-back {
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; color:var(--ink3); cursor:pointer;
  border:none; background:none; padding:0; margin-bottom:16px;
  transition:color .2s;
}
.login-back:hover { color:var(--sage); }
.login-field {
  margin-bottom:14px;
}
.login-field label {
  display:block; font-size:12px; font-weight:600;
  color:var(--ink2); margin-bottom:6px;
}
.login-field input {
  width:100%; padding:11px 14px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg);
  font-size:14px; color:var(--ink); outline:none;
  transition:border-color .2s; box-sizing:border-box;
}
.login-field input:focus { border-color:var(--sage); }
.login-field input::placeholder { color:var(--ink3); }
.login-submit {
  width:100%; padding:12px; border-radius:12px;
  border:none; background:var(--sage); color:#fff;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all .2s; margin-top:4px;
}
.login-submit:hover { filter:brightness(1.08); transform:translateY(-1px); }
.login-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.login-toggle {
  text-align:center; margin-top:14px; font-size:13px; color:var(--ink3);
}
.login-toggle a {
  color:var(--sage); cursor:pointer; text-decoration:none; font-weight:500;
}
.login-toggle a:hover { text-decoration:underline; }
.login-error {
  background:rgba(255,59,48,.08); color:#ff3b30;
  padding:8px 12px; border-radius:8px; font-size:12px;
  margin-bottom:12px; display:none; line-height:1.4;
}
.login-error.show { display:block; }
.login-error.success { display:block; background:rgba(52,199,89,.1); color:#248a3d; }

/* dark mode */
html.dark .login-modal { box-shadow:0 24px 80px rgba(0,0,0,.5); }
html.dark .login-method-btn .lm-icon.google { background:rgba(255,255,255,.08); }
@media(max-width:480px){
  .login-modal { padding:28px 20px 22px; border-radius:16px; }
}

/* ── NAV LEVEL BADGE ── */
.nav-level {
  display:none; font-size:10px; font-weight:700;
  color:var(--sage); background:rgba(0,113,227,.08);
  border-radius:980px; padding:2px 7px;
  line-height:1.3; white-space:nowrap;
}
.login-btn.logged .nav-level { display:inline-flex !important; align-items:center; gap:3px; }
.nav-level-icon { font-size:12px; line-height:1; }
.lv-icon-img,.nav-lv-img,.sb-lv-img,.badge-lv-img,.modal-lv-img,.roadmap-lv-img{display:inline-block;vertical-align:middle;object-fit:contain;}
.nav-lv-img{width:20px;height:20px;}
.sb-lv-img{width:36px;height:36px;}
.badge-lv-img{width:18px;height:18px;}
.modal-lv-img{width:48px;height:48px;}
.roadmap-lv-img{width:32px;height:32px;}

/* ---- LOGIN BUTTON ---- */
.login-btn { display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:980px; border:1.5px solid var(--border); background:none; cursor:pointer; font-size:12px; font-weight:500; color:var(--ink2); transition:all .2s; white-space:nowrap; }
.login-btn:hover { border-color:var(--sage); color:var(--sage); }
.login-btn .u-av { width:20px; height:20px; border-radius:50%; object-fit:cover; display:none; }
.login-btn.logged .u-av { display:block; }
.login-btn.logged { border-color:var(--sage); color:var(--sage); }

/* ---- LEADERBOARD ---- */
.lb-section { max-width:720px; margin:0 auto; padding:0 44px 40px; }
.lb-list { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.lb-item { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--card); border-radius:12px; border:1px solid var(--border); transition:border-color .2s; }
.lb-item:hover { border-color:var(--sage); }
.lb-item.lb-me { border-color:var(--sage); background:rgba(0,113,227,.04); }
.lb-rank { font-size:15px; min-width:26px; text-align:center; font-weight:700; color:var(--ink3); }
.lb-av { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--bg3); flex-shrink:0; }
.lb-name { flex:1; font-size:14px; color:var(--ink); }
.lb-mins { font-size:13px; color:var(--sage); font-weight:600; }
.lb-empty { font-size:14px; color:var(--ink3); text-align:center; padding:28px; }
@media(max-width:600px){ .lb-section { padding:0 14px 32px; } }



.goals-tip-icon { width:16px; height:16px; border-radius:50%; background:var(--bg3); color:var(--ink2); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition:all .2s; font-family:-apple-system,sans-serif; flex-shrink:0; }
.goals-tip-trigger:hover .goals-tip-icon, .goals-tip-trigger:focus .goals-tip-icon { background:var(--sage); color:#fff; }
.goals-tip-card {
  position:absolute;
  top:0;
  left: calc(100% + 14px);
  width:300px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 12px 36px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
  transition:all .25s;
  z-index:200;
}
html.dark .goals-tip-card { background:var(--card); }
.goals-tip-trigger:hover .goals-tip-card, .goals-tip-trigger:focus .goals-tip-card { opacity:1; transform:translateX(0); pointer-events:auto; }
.goals-tip-card::before { content:""; position:absolute; top:14px; left:-6px; width:12px; height:12px; background:inherit; border-left:1px solid var(--border); border-bottom:1px solid var(--border); transform:rotate(45deg); }
@media(max-width:720px){
  .goals-tip-card { position:absolute; top:calc(100% + 12px); left:0; transform:translateY(-6px); }
  .goals-tip-card::before { top:-6px; left:18px; border-bottom:none; border-top:1px solid var(--border); transform:rotate(45deg); }
  .goals-tip-trigger:hover .goals-tip-card, .goals-tip-trigger:focus .goals-tip-card { transform:translateY(0); }
}
.goals-tip-title { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.goals-tip-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.goals-tip-list li { font-size:12.5px; line-height:1.55; color:var(--ink2); padding-left:14px; position:relative; }
.goals-tip-list li::before { content:"·"; position:absolute; left:4px; top:0; font-weight:900; color:var(--sage); font-size:14px; }
.goals-tip-list li b { color:var(--ink); font-weight:600; }

/* ---- POMODORO INTEGRATION ON GOAL ITEM ---- */
.goal-item { cursor:default; }
.goal-text { cursor:pointer; user-select:none; }
.goal-text:hover { color:var(--sage); }
.goal-text.done { cursor:default; }
.goal-text.done:hover { color:var(--ink3); }
.goal-pomo { font-size:11.5px; color:var(--ink3); padding:3px 8px; background:var(--card); border-radius:980px; white-space:nowrap; }
.goal-pomo.has { color:var(--sage); font-weight:500; }
.goal-arrow { font-size:13px; color:var(--ink3); opacity:0; transition:opacity .15s; }
.goal-item:hover .goal-arrow { opacity:1; color:var(--sage); }

/* ---- SIDEBAR LEADERBOARD ---- */
.sb-lb-section { padding:14px 20px 20px; border-top:1px solid var(--border); }
.sb-lb-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sb-lb-title { font-size:12px; font-weight:600; color:var(--ink2); letter-spacing:.5px; text-transform:uppercase; }
.sb-lb-cta { font:inherit; font-size:11px; color:var(--sage); cursor:pointer; border:0; padding:0; background:transparent; }
.sb-lb-cta:hover { text-decoration:underline; }
.sb-lb-section .lb-list { max-height:300px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; }
#sb-lb-preview .lb-item { padding:6px 8px; gap:8px; }
#sb-lb-preview .lb-rank { font-size:13px; min-width:22px; }
#sb-lb-preview .lb-av { width:22px; height:22px; }
#sb-lb-preview .lb-name { font-size:12px; }
#sb-lb-preview .lb-mins { font-size:11.5px; }
.sb-lb-me-sep { border-top:1px dashed var(--border); margin:5px 0 3px; }
.sb-lb-me-hint { font-size:11px; color:var(--ink3); text-align:center; padding:3px 0; }
.lb-item.lb-me-pinned { position:sticky; bottom:0; margin-top:6px; box-shadow:0 -10px 14px var(--shadow); }

/* ---- ABOUT MOTTO ---- */
.about-motto { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; padding:20px 24px; background:var(--bg3); border-radius:16px; border-left:3px solid var(--sage); }
.about-motto-line { display:none; }
.about-motto-text { font-size:16px; line-height:1.7; color:var(--ink); font-family:'Lora',serif; flex:1; }
.about-motto-attr { font-size:13px; color:var(--sage); margin-top:8px; }

/* ---- HOME ABOUT (关于这里 section) ---- */
.home-about-section { max-width:1152px; margin:0 auto; padding:56px 44px; }
.home-about-inner { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:40px 44px; }
.home-about-eyebrow {
  font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--sage); margin-bottom:14px;
}
.home-about-heading {
  font-family:'Lora',serif; font-size:32px; line-height:1.3; font-weight:700;
  color:var(--ink); margin:0 0 24px; letter-spacing:-.5px;
}
.home-about-heading em { color:var(--sage); font-style:normal; }
.home-about-body { color:var(--ink2); font-size:15px; line-height:1.9; margin-bottom:24px; max-width:680px; }
.home-about-body p { margin:0 0 12px; }
.home-about-body p:last-child { margin-bottom:0; }
.home-about-features { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.home-about-feat {
  font-size:12.5px; color:var(--ink2);
  background:var(--bg3); border:1px solid var(--border);
  padding:6px 12px; border-radius:980px; white-space:nowrap;
  transition:all .18s;
}
.home-about-feat:hover { color:var(--sage); border-color:var(--sage); transform:translateY(-2px); box-shadow:0 4px 12px var(--shadow); }
@media (max-width:600px) {
  .home-about-section { padding:32px 14px 40px; }
  .home-about-inner { padding:28px 22px; border-radius:18px; }
  .home-about-heading { font-size:22px; }
  .home-about-body { font-size:14.5px; }
}

/* ---- SUBSCRIBE ---- */
.subscribe-banner { max-width:1152px; margin:0 auto; padding:0 44px 56px; }
.subscribe-inner { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:32px 36px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
@media (max-width:660px){
  .subscribe-banner { padding:0 16px 44px; }
  .subscribe-inner { padding:24px 20px; }
  .subscribe-form-wrap { width:100%; }
  .subscribe-input { flex:1; width:auto; }
}
.subscribe-copy { flex:1; min-width:200px; }
.subscribe-title { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.subscribe-sub { font-size:13px; color:var(--ink2); line-height:1.6; }
.subscribe-form-wrap { display:flex; gap:8px; flex-shrink:0; }
.subscribe-input { padding:9px 14px; border:1.5px solid var(--border); border-radius:980px; font-size:13px; font-family:inherit; color:var(--ink); background:var(--card); outline:none; width:220px; transition:all var(--dur-med) var(--ease-spring); }
.subscribe-input:focus { border-color:var(--sage); box-shadow:0 0 0 3px rgba(0,113,227,0.1); width:240px; }
.subscribe-btn { padding:9px 20px; background:var(--sage); color:#fff; border:none; border-radius:980px; font-size:13px; font-weight:500; cursor:pointer; transition:all var(--dur-med) var(--ease-spring); }
.subscribe-btn:hover { background:#005ec7; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,113,227,0.2); }
.subscribe-btn:disabled { background:var(--ink3); cursor:not-allowed; }
.sub-msg { font-size:13px; margin-top:8px; width:100%; }
.sub-msg.ok  { color:#34c759; }
.sub-msg.err { color:#ff3b30; }
.fin-sub { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.fin-sub-t { font-size:12.5px; color:var(--ink2); margin-bottom:8px; text-align:center; }
.fin-sub-row { display:flex; gap:6px; }
.fin-sub-input, .fin-sub-input:focus { flex:1; width:auto; min-width:0; }
@media(max-width:600px){ .subscribe-banner{padding:24px 14px;} .subscribe-inner{flex-direction:column;gap:16px;} .subscribe-form-wrap{width:100%;} .subscribe-input{flex:1;width:auto;} }




/* ============================================================
   HERO SKY - day/night atmosphere
============================================================ */
#page-home { position: relative; }

.hero-sky-bg {
  position: fixed;
  top: -80px; left: 0; right: 0;
  height: calc(100vh + 80px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#main-content { position: relative; z-index: 1; }

/* Day: warm sky with visible blue-to-peach gradient */
.hero-sky-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 82% 15%, rgba(255,210,130,0.22) 0%, transparent 55%),
    linear-gradient(180deg,
      rgba(160, 200, 255, 0.50) 0%,
      rgba(190, 220, 255, 0.30) 30%,
      rgba(240, 230, 220, 0.12) 60%,
      transparent 80%
    );
  opacity: 1;
  transition: opacity .6s ease;
}
html.dark .hero-sky-bg::before { opacity: 0; }

/* Night: deep blue sky */
.hero-sky-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(4, 8, 32, 0.88) 0%,
    rgba(8, 12, 45, 0.45) 45%,
    transparent 78%
  );
  opacity: 0;
  transition: opacity .6s ease;
}
html.dark .hero-sky-bg::after { opacity: 1; }

/* Floating clouds (day only) */
.sky-cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  filter: blur(20px);
  opacity: 1;
  transition: opacity .8s ease;
}
html.dark .sky-cloud { opacity: 0; }
.sky-cloud:nth-child(1) { width:180px; height:50px; top:8%; left:10%; animation: cloudDrift 45s linear infinite; }
.sky-cloud:nth-child(2) { width:140px; height:40px; top:15%; left:55%; animation: cloudDrift 60s 8s linear infinite reverse; }
.sky-cloud:nth-child(3) { width:200px; height:45px; top:5%; left:35%; animation: cloudDrift 55s 20s linear infinite; }
@keyframes cloudDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(80px); }
}

/* Stars */
.sky-star {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .6s ease .15s;
  animation: starTwinkle var(--tw-dur, 2.5s) ease-in-out infinite;
  animation-delay: var(--tw-delay, 0s);
}
html.dark .sky-star { opacity: 1; }
@keyframes starTwinkle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* Moon glow */
.sky-moon {
  position: absolute;
  top: 42px; right: 18%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,240,0.95) 30%, rgba(255,255,200,0.3) 65%, transparent 100%);
  box-shadow: 0 0 24px 8px rgba(255,255,200,0.18);
  opacity: 0;
  transition: opacity .5s ease .1s, transform .5s ease;
  transform: translateY(8px) scale(0.95);
}
html.dark .sky-moon {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Sun glow — warm & visible */
.sky-sun {
  position: absolute;
  top: 30px; right: 17%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,225,140,0.7) 15%, rgba(255,200,100,0.25) 45%, rgba(255,190,80,0.08) 70%, transparent 100%);
  box-shadow: 0 0 60px 25px rgba(255,210,120,0.12), 0 0 120px 50px rgba(255,200,100,0.05);
  opacity: 1;
  transition: opacity .5s ease, transform .5s ease;
  transform: translateY(0) scale(1);
}
html.dark .sky-sun {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
}



/* ── Shooting stars (dark mode) ── */
.shooting-star {
  position: absolute;
  width: 80px;
  height: 1.5px;
  /* gradient: tail(left, transparent) → head(right, bright) */
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.9) 100%);
  border-radius: 0 1px 1px 0;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(200,220,255,0.4));
  transform-origin: right center;
  transform: rotate(var(--ss-angle, 32deg));
}
html.dark .shooting-star {
  animation: shootStar var(--ss-dur, 1.2s) var(--ss-delay, 5s) linear infinite;
}
@keyframes shootStar {
  0%   { opacity: 0; transform: rotate(var(--ss-angle, 32deg)) translateX(0); }
  6%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 0; transform: rotate(var(--ss-angle, 32deg)) translateX(var(--ss-dist, 320px)); }
}
@media (prefers-reduced-motion: reduce) {
  html.dark .shooting-star { animation: none; }
}

/* Keep hero text above sky */
.hero-wrap { position: relative; z-index: 1; }
.stats-bar  { position: relative; z-index: 1; }
/* ============================================================
   GUESTBOOK
============================================================ */
.gb-shell { max-width:760px; margin:0 auto; padding:52px 44px 40px; }
.gb-header { margin-bottom:32px; }
.gb-title { font-family:'Lora',serif; font-size:38px; color:var(--ink); margin-bottom:12px; letter-spacing:-.5px; }
.gb-title em { font-style:italic; color:var(--sage); }
.gb-intro { font-size:15px; line-height:1.9; color:var(--ink2); max-width:560px; }

/* Write card */
.gb-write-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  padding:24px; margin-bottom:28px;
  transition:background var(--dur-med) var(--ease-spring), border-color var(--dur-med);
}
.gb-write-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.gb-write-av {
  width:36px; height:36px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--border); flex-shrink:0;
}
.gb-write-info { display:flex; flex-direction:column; gap:2px; }
.gb-write-name { font-size:14px; font-weight:500; color:var(--ink); }
.gb-write-hint { font-size:12px; color:var(--ink3); }
.gb-textarea {
  width:100%; border:1.5px solid var(--border); border-radius:12px;
  padding:14px 16px; font-size:14px; line-height:1.7;
  font-family:'Inter','Noto Sans SC',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  resize:vertical; min-height:80px;
  transition:all var(--dur-med) var(--ease-spring);
}
.gb-textarea:focus { outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(0,113,227,0.12); }
.gb-textarea::placeholder { color:var(--ink3); }
.gb-write-actions {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px;
}
.gb-char-count { font-size:12px; color:var(--ink3); }
.gb-post-btn {
  padding:8px 24px; border:none; border-radius:980px;
  background:var(--sage); color:#fff; font-size:13px; font-weight:500;
  cursor:pointer; transition:all var(--dur-med) var(--ease-spring);
  font-family:'Inter','Noto Sans SC',system-ui,sans-serif;
}
.gb-post-btn:disabled { opacity:.4; cursor:not-allowed; }
.gb-post-btn:not(:disabled):hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,113,227,0.2); }

/* Messages */
.gb-list { display:flex; flex-direction:column; gap:16px; }
.gb-loading {
  text-align:center; padding:40px; color:var(--ink3); font-size:14px;
  animation:loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.gb-msg {
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  padding:20px 24px;
  opacity:0; transform:translateY(16px);
  animation:gbMsgIn .45s var(--ease-spring) forwards;
  transition:background var(--dur-med), border-color var(--dur-med), box-shadow var(--dur-med);
  position:relative; overflow:hidden; isolation:isolate;
}
.gb-msg::before {
  content:''; position:absolute; inset:-2px; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle 100px at var(--card-mx,50%) var(--card-my,50%),
      rgba(0,113,227,0.1) 0%, rgba(88,86,214,0.05) 30%, transparent 55%),
    radial-gradient(circle 70px at calc(var(--card-mx,50%) + 12px) calc(var(--card-my,50%) - 8px),
      rgba(0,113,227,0.04) 0%, transparent 50%);
  opacity:0; transition:opacity .5s; border-radius:inherit;
  filter:blur(2px);
}
.gb-msg:hover::before { opacity:1; }
.gb-msg:nth-child(1) { animation-delay:.05s }
.gb-msg:nth-child(2) { animation-delay:.1s }
.gb-msg:nth-child(3) { animation-delay:.15s }
.gb-msg:nth-child(4) { animation-delay:.2s }
.gb-msg:nth-child(5) { animation-delay:.25s }
@keyframes gbMsgIn {
  from { opacity:0; transform:translateY(16px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.gb-msg:hover { transform:translateY(-3px) scale(1.005); box-shadow:0 8px 24px var(--shadow); border-color:var(--sage); }
.gb-msg-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.gb-msg-av {
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--border); flex-shrink:0;
}
.gb-msg-meta { display:flex; flex-direction:column; gap:1px; flex:1; }
.gb-msg-name { font-size:13px; font-weight:600; color:var(--ink); }
.gb-msg-time { font-size:11px; color:var(--ink3); }
.gb-msg-av-txt { display:flex; align-items:center; justify-content:center; background:var(--sage-l); color:var(--sage); font-weight:700; font-size:14px; }
.gb-name-input { width:100%; max-width:260px; padding:9px 14px; border-radius:980px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font-size:13px; outline:none; margin-bottom:10px; transition:border-color var(--dur-fast); }
.gb-name-input:focus { border-color:var(--sage); }
.home-gb { margin-top:8px; }
.gb-home-box { border:1px solid var(--border); border-radius:16px; padding:16px 16px 18px; background:var(--bg2); }
.gb-mini-write { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.gb-mini-name { width:108px; padding:8px 13px; border-radius:980px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font-size:13px; outline:none; transition:border-color var(--dur-fast,.2s); }
.gb-mini-input { flex:1; min-width:150px; padding:8px 14px; border-radius:980px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font-size:13px; outline:none; transition:border-color var(--dur-fast,.2s); }
.gb-mini-name:focus, .gb-mini-input:focus { border-color:var(--sage); }
.gb-mini-send { padding:8px 18px; border-radius:980px; border:none; background:var(--sage); color:#fff; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:opacity var(--dur-fast,.2s), transform var(--dur-fast,.2s) var(--ease-spring,ease); }
.gb-mini-send:hover:not(:disabled) { transform:translateY(-1px); }
.gb-mini-send:disabled { opacity:.45; cursor:default; }
.gb-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.gb-grid .gb-msg { padding:12px 14px !important; margin:0; }
.gb-grid .gb-msg-top { margin-bottom:6px; }
.gb-grid .gb-msg-body { font-size:12.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.gb-grid .gb-msg-like { display:none; }
.gb-grid .gb-empty, .gb-grid .gb-loading { grid-column:1 / -1; }
@media(max-width:660px){ .gb-grid { grid-template-columns:1fr; } }
.gb-write-compact { margin-bottom:18px; }
.gb-msg-body { font-size:14px; line-height:1.85; color:var(--ink2); white-space:pre-wrap; word-break:break-word; }
.gb-msg-like {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:10px; padding:4px 10px;
  border:1px solid var(--border); border-radius:980px;
  background:transparent; cursor:pointer; font-size:12px; color:var(--ink3);
  transition:all var(--dur-med) var(--ease-spring);
}
.gb-msg-like:hover { border-color:var(--warm); color:var(--warm); background:var(--warm-l); }
.gb-msg-like.liked { border-color:var(--warm); color:var(--warm); background:var(--warm-l); }
.gb-pending-tag {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; color:#e67e22; background:#fef3e2;
  padding:2px 8px; border-radius:980px; font-weight:500;
}
html.dark .gb-pending-tag { color:#f0a040; background:#2a1a00; }
.gb-empty {
  text-align:center; padding:60px 20px; color:var(--ink3); font-size:14px;
  line-height:1.8;
}
/* 站长回复 / owner reply */
.gb-reply { margin:12px 0 0 14px; padding:12px 16px; background:var(--sage-l); border-left:3px solid var(--sage); border-radius:0 14px 14px 14px; }
.gb-reply-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.gb-reply-av { width:22px; height:22px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.gb-reply-name { font-size:12.5px; font-weight:600; color:var(--sage); }
.gb-reply-badge { font-size:10px; font-weight:600; color:var(--sage); background:rgba(0,113,227,.12); padding:1px 8px; border-radius:980px; }
.gb-reply-time { font-size:11px; color:var(--ink3); margin-left:auto; }
.gb-reply-body { font-size:13.5px; line-height:1.8; color:var(--ink2); white-space:pre-wrap; word-break:break-word; }
.gb-owner-actions { display:flex; gap:8px; margin-top:10px; }
.gb-owner-btn { font-size:12px; padding:5px 14px; border-radius:980px; border:1px solid var(--border); background:var(--bg); color:var(--ink2); cursor:pointer; transition:border-color var(--dur-fast,.2s), color var(--dur-fast,.2s); }
.gb-owner-btn:hover { border-color:var(--sage); color:var(--sage); }
.gb-owner-btn.del:hover { border-color:var(--warm); color:var(--warm); }
.gb-reply-edit { margin:12px 0 0 14px; }
.gb-reply-input { width:100%; box-sizing:border-box; padding:10px 14px; border-radius:14px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font-size:13.5px; line-height:1.7; font-family:inherit; resize:vertical; outline:none; transition:border-color var(--dur-fast,.2s); }
.gb-reply-input:focus { border-color:var(--sage); box-shadow:0 0 0 3px rgba(0,113,227,.12); }
.gb-reply-edit-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.gb-reply-cancel, .gb-reply-save { font-size:12.5px; padding:6px 16px; border-radius:980px; border:none; cursor:pointer; transition:opacity var(--dur-fast,.2s); }
.gb-reply-cancel { background:var(--bg2); color:var(--ink2); border:1px solid var(--border); }
.gb-reply-save { background:var(--sage); color:#fff; font-weight:500; }
.gb-reply-save:hover { opacity:.9; }
@media(max-width:660px){
  .gb-shell { padding:32px 20px 24px; }
  .gb-title { font-size:28px; }
  .gb-write-card { padding:18px; }
  .gb-msg { padding:16px 18px; }
}

/* Expanded panel */
.music-panel {
  position:fixed; bottom:90px; right:28px; z-index:199;
  background:var(--bg2); border:1px solid var(--border); border-radius:16px;
  padding:16px 20px; min-width:200px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  opacity:0; transform:translateY(10px) scale(0.95);
  pointer-events:none;
  transition:all var(--dur-med) var(--ease-spring);
}
.music-panel.open {
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.music-panel-title {
  font-size:12px; font-weight:600; color:var(--ink3);
  letter-spacing:1px; text-transform:uppercase; margin-bottom:12px;
}
.music-vol-wrap {
  display:flex; align-items:center; gap:10px;
}
.music-vol-icon { font-size:14px; cursor:pointer; color:var(--ink2); }
.music-vol {
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px; background:var(--bg3);
  outline:none; cursor:pointer;
}
.music-vol::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:var(--sage); cursor:pointer;
  border:2px solid var(--bg2); box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.music-vol::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--sage); cursor:pointer; border:2px solid var(--bg2);
}
.music-label {
  font-size:11px; color:var(--ink3); margin-top:10px;
  display:flex; align-items:center; gap:4px;
}
.music-track { font-size:12.5px; color:var(--ink2); text-align:center; white-space:nowrap; font-weight:500; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.music-track-row { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:12px; }
.music-fav { background:none; border:none; cursor:pointer; font-size:15px; line-height:1; padding:0; color:var(--ink3); transition:transform var(--dur-fast,.2s) var(--ease-spring,ease), color var(--dur-fast,.2s); }
.music-fav:hover { transform:scale(1.2); color:#ff4d6d; }
.music-fav.faved { color:#ff4d6d; }
.music-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.music-ctrl { background:none; border:none; cursor:pointer; font-size:15px; color:var(--ink2); padding:2px; line-height:1; transition:color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.music-ctrl:hover { color:var(--ink); transform:scale(1.18); }
.music-ctrl-play { width:38px; height:38px; border-radius:50%; background:var(--sage); color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; }
.music-ctrl-play:hover { color:#fff; transform:scale(1.08); }
.music-credit { font-size:10px; color:var(--ink3); margin-top:10px; text-align:center; }
.music-credit a { color:var(--ink2); text-decoration:none; }
.music-credit a:hover { color:var(--sage); text-decoration:underline; }
@media (min-width:1180px) {
  .music-fab { right:calc(300px + 28px); }
  .music-panel { right:calc(292px + 28px); }
}
html.sb-hidden .music-fab { right:28px; }
html.sb-hidden .music-panel { right:28px; }
@media(max-width:660px){
  .music-fab { bottom:20px; right:20px; width:46px; height:46px; font-size:18px; }
  .music-panel { bottom:76px; right:20px; }
}

/* ---- LABS / PRODUCTS ---- */
.labs-shell { max-width:880px; margin:0 auto; padding:52px 44px 40px; }
.labs-header { margin-bottom:36px; }
.labs-title { font-family:'Lora',serif; font-size:38px; color:var(--ink); margin-bottom:12px; letter-spacing:-.5px; }
.labs-title em { font-style:italic; color:var(--sage); }
.labs-intro { font-size:15px; line-height:1.9; color:var(--ink2); max-width:600px; }
.labs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:16px; }
.home-making .labs-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.lab-card { display:flex; flex-direction:column; gap:9px; background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:20px; transition:transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.lab-card:hover { transform:translateY(-3px); border-color:var(--sage); box-shadow:0 8px 24px var(--shadow); }
.lab-card.soon { opacity:.8; }
.lab-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.lab-emoji { font-size:30px; line-height:1; }
.lab-badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:980px; white-space:nowrap; }
.lab-badge.live { background:rgba(52,199,89,.15); color:#2ea043; }
.lab-badge.beta { background:rgba(255,159,10,.16); color:#c77700; }
.lab-badge.soon { background:rgba(0,113,227,.14); color:var(--sage); }
.lab-badge.idea { background:rgba(120,120,128,.16); color:var(--ink3); }
.lab-name { font-size:16px; font-weight:600; color:var(--ink); }
.lab-desc { font-size:13px; line-height:1.7; color:var(--ink2); flex:1; }
.lab-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.lab-tag { font-size:11px; color:var(--ink3); background:var(--bg); border:1px solid var(--border); padding:3px 8px; border-radius:6px; }
.lab-cta { font-size:13px; font-weight:500; color:var(--sage); cursor:pointer; background:none; border:none; padding:0; font-family:inherit; }
.lab-cta:hover { text-decoration:underline; }
.lab-cta.disabled { color:var(--ink3); cursor:default; }
.lab-cta.disabled:hover { text-decoration:none; }
@media(max-width:660px){ .labs-shell { padding:34px 14px; } }

/* ═══ GSAP initial states ═══ */
.gsap-split { display:block; overflow:hidden; padding:0.15em 0; margin:-0.15em 0; }
.gsap-split > span { display:block; }
nav { opacity:0; }
.hero-av { opacity:0; transform:scale(0.3); }

/* ═══ FLOWER GROWTH SYSTEM ═══ */
.flower-stage { width:120px; height:140px; margin:0 auto 14px; position:relative; }
.flower-svg { width:100%; height:100%; }
/* Growth layers — hidden by default, revealed by .grow-N */
.fl-soil, .fl-seed, .fl-sprout, .fl-stem, .fl-leaf-l, .fl-leaf-r,
.fl-bud, .fl-petal { transition: opacity .8s ease, transform .8s ease; }
.fl-seed    { opacity:0; transform:scale(0); }
.fl-sprout  { opacity:0; transform:scaleY(0); transform-origin:bottom; }
.fl-stem    { opacity:0; transform:scaleY(0); transform-origin:bottom; }
.fl-leaf-l  { opacity:0; transform:rotate(20deg) scale(0); transform-origin:right bottom; }
.fl-leaf-r  { opacity:0; transform:rotate(-20deg) scale(0); transform-origin:left bottom; }
.fl-bud     { opacity:0; transform:scale(0); }
.fl-petal   { opacity:0; transform:scale(0) rotate(var(--pr,0deg)); }
/* Stage 1: seed appears */
.grow-1 .fl-seed { opacity:1; transform:scale(1); }
/* Stage 2: sprout */
.grow-2 .fl-seed { opacity:0; }
.grow-2 .fl-sprout { opacity:1; transform:scaleY(1); }
/* Stage 3: stem grows */
.grow-3 .fl-seed { opacity:0; }
.grow-3 .fl-sprout { opacity:0; }
.grow-3 .fl-stem { opacity:1; transform:scaleY(1); }
/* Stage 4: leaves */
.grow-4 .fl-seed { opacity:0; }
.grow-4 .fl-sprout { opacity:0; }
.grow-4 .fl-stem { opacity:1; transform:scaleY(1); }
.grow-4 .fl-leaf-l { opacity:1; transform:rotate(0) scale(1); }
.grow-4 .fl-leaf-r { opacity:1; transform:rotate(0) scale(1); }
/* Stage 5: bud */
.grow-5 .fl-seed { opacity:0; }
.grow-5 .fl-sprout { opacity:0; }
.grow-5 .fl-stem { opacity:1; transform:scaleY(1); }
.grow-5 .fl-leaf-l { opacity:1; transform:rotate(0) scale(1); }
.grow-5 .fl-leaf-r { opacity:1; transform:rotate(0) scale(1); }
.grow-5 .fl-bud  { opacity:1; transform:scale(1); }
/* Stage 6: bloom! */
.grow-6 .fl-seed { opacity:0; }
.grow-6 .fl-sprout { opacity:0; }
.grow-6 .fl-stem { opacity:1; transform:scaleY(1); }
.grow-6 .fl-leaf-l { opacity:1; transform:rotate(0) scale(1); }
.grow-6 .fl-leaf-r { opacity:1; transform:rotate(0) scale(1); }
.grow-6 .fl-bud { opacity:0; }
.grow-6 .fl-petal { opacity:1; transform:scale(1) rotate(0deg); transition:opacity .6s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }
/* Bloom celebration pulse */
@keyframes bloomPulse { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
.bloom-done .flower-svg { animation:bloomPulse 1.5s ease-in-out 2; }
/* Sway while growing */
@keyframes flowerSway { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(1.5deg)} 75%{transform:rotate(-1.5deg)} }
.flower-growing .flower-svg { animation:flowerSway 4s ease-in-out infinite; }
/* Petal shimmer on bloom */
@keyframes petalShimmer { 0%{filter:brightness(1)} 50%{filter:brightness(1.15)} 100%{filter:brightness(1)} }
.bloom-done .fl-petal { animation:petalShimmer 2s ease-in-out infinite; animation-delay:calc(var(--pi,0) * 0.15s); }

/* ── Finish screen flower (larger) ── */
.fin-flower { width:160px; height:180px; margin:0 auto 16px; }
.fin-flower .flower-svg { width:100%; height:100%; }
@keyframes finBloom { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.1);opacity:1} 100%{transform:scale(1);opacity:1} }
.fin-flower .fl-petal { animation:finBloom .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:calc(var(--pi,0) * 0.1s); opacity:0; transform:scale(0); }
.fin-flower .fl-stem, .fin-flower .fl-leaf-l, .fin-flower .fl-leaf-r { opacity:1; transform:scaleY(1) rotate(0) scale(1); }

/* ── SIDEBAR GARDEN ── */
.garden-section { border:1px solid var(--border); border-radius:14px; padding:14px 16px 16px; margin:0; overflow:hidden; }
.garden-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.garden-header-left {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink);
}
.garden-header-right {
  font-size:11px; color:var(--ink3); display:flex; align-items:center; gap:4px;
}
.garden-count { font-weight:600; color:var(--sage); font-size:11px; }

/* ── Unified level card ── */
.sb-level-card {
  display:flex; align-items:center; gap:14px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:12px 16px; margin-bottom:12px;
  transition:border-color .2s, box-shadow .2s;
}
.sb-level-card:hover { border-color:var(--sage); box-shadow:0 2px 12px rgba(0,113,227,0.06); }
.sb-level-icon {
  width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sb-lv-img { width:42px; height:42px; }
.sb-level-info { flex:1; min-width:0; }
.sb-level-top {
  display:flex; align-items:baseline; gap:6px; margin-bottom:5px;
}
.sb-level-lv { font-size:14px; font-weight:700; color:var(--sage); }
.sb-level-name { font-size:13px; font-weight:500; color:var(--ink2); }
.sb-level-pct { font-size:11px; font-weight:600; color:var(--ink3); margin-left:auto; }
.sb-level-bar {
  width:100%; height:4px; background:var(--bg3);
  border-radius:2px; overflow:hidden; margin-bottom:4px;
}
.sb-level-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--sage), #5ac8fa);
  transition:width .6s cubic-bezier(0.4,0,0.2,1);
}
.sb-level-next {
  font-size:11px; color:var(--ink3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.garden-grid { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-start; }
.garden-flower { width:36px; height:36px; transition:transform .2s; cursor:default; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
.garden-flower:hover { transform:scale(1.2); }
.garden-flower svg { width:100%; height:100%; }
.garden-empty { font-size:12px; color:var(--ink3); font-style:italic; line-height:1.6; }


/* ── GARDEN MODAL ── */
.garden-modal {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden;
  transition:opacity .45s cubic-bezier(.4,0,.2,1), visibility .45s;
}
.garden-modal.open { opacity:1; visibility:visible; }

/* Floating particles removed for design consistency */
.garden-modal::before { display:none; }

.garden-modal-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px 16px; background:var(--bg);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:2;
}
.garden-modal-title {
  font-family:'Lora',serif; font-size:22px; color:var(--ink); font-weight:700; letter-spacing:-.3px;
}
.garden-modal-close {
  width:34px; height:34px; border-radius:50%; border:none;
  background:var(--bg3); color:var(--ink2); font-size:19px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:1; transition:transform .15s, background .15s;
}
.garden-modal-close:hover { transform:scale(1.08); background:var(--border); }

/* Stats row */
.garden-stats {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:10px;
  padding:20px 28px 12px; position:relative; z-index:1;
}
.garden-stat {
  background:var(--bg3); border-radius:16px; padding:14px 8px;
  text-align:center; transition:transform .15s;
}
.garden-stat:hover {
  transform:translateY(-2px);
}
.garden-stat-num {
  font-size:22px; font-weight:800; color:var(--sage);
  letter-spacing:-.02em; line-height:1.2;
}
.garden-stat-label {
  font-size:11px; color:var(--ink3); letter-spacing:.8px; text-transform:uppercase;
  margin-top:3px; font-weight:500;
}

/* Filter tabs */
.garden-filter {
  display:inline-flex; gap:0; padding:8px 28px 16px;
  background:var(--bg3); border-radius:980px; padding:3px; margin:8px 28px 16px;
  position:relative; z-index:1;
}
.garden-filter-btn {
  padding:6px 16px; border-radius:980px; border:none;
  background:transparent; color:var(--ink2); font-size:12px;
  cursor:pointer; font-family:inherit; font-weight:600;
  transition:all .2s;
}
.garden-filter-btn:hover { color:var(--ink); }
.garden-filter-btn.active {
  background:var(--bg2); color:var(--sage);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}

/* Garden field — real garden look */
.garden-field {
  flex:1; position:relative; z-index:1; overflow:hidden;
  margin:0 20px 20px; border-radius:24px;
  /* Sky → grass gradient */
  background:linear-gradient(180deg,
    #b6e3f4 0%,        /* sky */
    #a0d8ef 15%,       /* lighter sky */
    #88cc88 35%,       /* distant grass */
    #6db86d 50%,       /* grass */
    #5a9a5a 65%,       /* darker grass */
    #8b6b4a 72%,       /* soil top */
    #7a5c3d 85%,       /* soil */
    #6b4f33 100%       /* deep soil */
  );
  min-height:320px;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.1);
}
/* Subtle grass texture overlay */
.garden-field::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(85deg, transparent, transparent 3px, rgba(0,80,0,0.03) 3px, rgba(0,80,0,0.03) 4px),
    repeating-linear-gradient(95deg, transparent, transparent 5px, rgba(255,255,255,0.02) 5px, rgba(255,255,255,0.02) 6px);
}
/* Horizon decorative clouds */
.garden-field::after {
  content:''; position:absolute; top:4%; left:0; right:0; height:30px; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60px 20px at 15% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(ellipse 80px 18px at 45% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(ellipse 50px 16px at 75% 40%, rgba(255,255,255,0.45), transparent);
}
.garden-field-inner {
  display:flex; flex-wrap:wrap; gap:4px 2px; justify-content:center; align-items:flex-end;
  max-width:800px; margin:0 auto;
  padding:80px 20px 16px;
  position:relative; z-index:1;
  min-height:240px;
}

/* Individual garden flower — planted in the ground */
.garden-item {
  width:72px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  position:relative; cursor:default;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s;
  padding-bottom:4px;
}
/* Flower stem / ground connection */
.garden-item::after {
  content:''; position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  width:3px; height:18px;
  background:linear-gradient(180deg, #5a8c3a 0%, #4a7a2d 100%);
  border-radius:2px;
  opacity:.7;
  z-index:0;
}
/* Small soil mound at the base */
.garden-item::before {
  content:''; position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:28px; height:10px;
  background:radial-gradient(ellipse at center, #7a5c3d 0%, #6b4f33 60%, transparent 100%);
  border-radius:50%;
  z-index:0;
}
.garden-item:hover {
  transform:translateY(-8px) scale(1.15);
  filter:brightness(1.08);
}
.garden-item:hover img {
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.22));
}
.garden-item img {
  width:48px; height:48px; object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.15));
  transition:filter .3s;
  position:relative; z-index:1;
}
.garden-item-label {
  font-size:8px; color:rgba(255,255,255,0.85); margin-top:0px;
  text-align:center; line-height:1.2; white-space:nowrap;
  transition:opacity .2s;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
  position:relative; z-index:1;
  opacity:.7;
}
.garden-item:hover .garden-item-label { opacity:1; }

/* Fence decoration at the bottom */
.garden-fence {
  position:absolute; bottom:0; left:0; right:0; height:30px; z-index:0;
  pointer-events:none;
}

/* Empty garden state */
.garden-empty-full {
  text-align:center; padding:60px 20px; color:rgba(255,255,255,0.9);
  text-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.garden-empty-full-icon { font-size:48px; margin-bottom:16px; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.garden-empty-full-text { font-size:15px; line-height:1.6; max-width:300px; margin:0 auto; }

/* Progress bar toward next flower */
/* ── LEVEL SYSTEM ── */
.garden-level { padding:16px 28px 8px; position:relative; z-index:1; }
.garden-level-card {
  display:flex; align-items:center; gap:16px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:16px 20px;
}
.garden-level-icon {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; flex-shrink:0;
  background:linear-gradient(135deg, var(--bg3), var(--bg2));
  border:2px solid var(--border);
}
.garden-level-info { flex:1; min-width:0; }
.garden-level-top { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.garden-level-lv { font-size:13px; font-weight:800; color:var(--sage); letter-spacing:.5px; }
.garden-level-title { font-size:15px; font-weight:700; color:var(--ink); }
.garden-level-bar-wrap { display:flex; align-items:center; gap:8px; }
.garden-level-bar { flex:1; height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.garden-level-bar-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--sage), #5ac8fa);
  transition:width .6s ease;
}
.garden-level-pct { font-size:11px; color:var(--ink3); font-weight:600; min-width:32px; text-align:right; }
.garden-level-next { font-size:11px; color:var(--ink3); margin-top:4px; }

.garden-roadmap-toggle {
  display:flex; align-items:center; justify-content:center;
  gap:6px; margin:8px 28px 4px; padding:8px;
  background:none; border:1px solid var(--border);
  border-radius:12px; cursor:pointer; font-family:inherit;
  font-size:12px; color:var(--ink2); font-weight:600;
  transition:all .2s;
}
.garden-roadmap-toggle:hover { background:var(--bg2); color:var(--ink); }
.garden-roadmap-toggle .arrow { transition:transform .3s; font-size:10px; }
.garden-roadmap-toggle.open .arrow { transform:rotate(180deg); }

.garden-roadmap { max-height:0; overflow:hidden; transition:max-height .4s ease; margin:0 28px; }
.garden-roadmap.open { max-height:2000px; }
.garden-roadmap-phase {
  margin:12px 0 8px; padding:12px 16px;
  background:var(--bg2); border-radius:16px; border:1px solid var(--border);
}
.garden-roadmap-phase-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.garden-roadmap-phase-icon { font-size:20px; }
.garden-roadmap-phase-title { font-size:13px; font-weight:700; color:var(--ink); }
.garden-roadmap-phase-range { font-size:11px; color:var(--ink3); margin-left:auto; }
.garden-roadmap-levels { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.garden-roadmap-node {
  display:flex; flex-direction:column; align-items:center;
  padding:8px 4px; border-radius:12px; transition:all .2s; border:1px solid transparent;
}
.garden-roadmap-node.completed { background:rgba(0,113,227,0.06); }
.garden-roadmap-node.current { background:rgba(0,113,227,0.1); border-color:var(--sage); }
.garden-roadmap-node.locked { opacity:0.4; }
.garden-roadmap-node-icon {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; margin-bottom:4px;
}
.garden-roadmap-node.completed .garden-roadmap-node-icon { }
.garden-roadmap-node.current .garden-roadmap-node-icon { }
.garden-roadmap-node-lv { font-size:10px; font-weight:700; color:var(--ink3); }
.garden-roadmap-node.current .garden-roadmap-node-lv { color:var(--sage); }
.garden-roadmap-node-title {
  font-size:9px; color:var(--ink3); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.garden-roadmap-node-hours {
  font-size:8px; color:var(--ink3); opacity:.6; text-align:center; margin-top:1px;
}

.garden-roadmap-future { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:12px 0 8px; }
.garden-roadmap-future-card {
  padding:12px; border-radius:12px; background:var(--bg3); text-align:center; opacity:0.5;
}
.garden-roadmap-future-icon { font-size:24px; margin-bottom:4px; }
.garden-roadmap-future-title { font-size:12px; font-weight:600; color:var(--ink2); }
.garden-roadmap-future-range { font-size:10px; color:var(--ink3); }

html.dark .garden-level-card { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); }
html.dark .garden-roadmap-phase { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); }
html.dark .garden-roadmap-node.completed { background:rgba(0,113,227,0.12); }
html.dark .garden-roadmap-node.current { background:rgba(0,113,227,0.18); }

html.dark .garden-roadmap-toggle { border-color:rgba(255,255,255,0.1); }
html.dark .garden-roadmap-future-card { background:rgba(255,255,255,0.06); }

.garden-progress {
  max-width:400px; margin:0 auto 20px; padding:16px 20px;
  background:var(--bg2); border-radius:16px;
  border:1px solid var(--border);
  position:relative; z-index:1;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.garden-progress:hover { transform:translateY(-1px); }
.garden-progress-label {
  font-size:12px; color:var(--ink2); margin-bottom:8px; display:flex;
  justify-content:space-between; align-items:center;
}
.garden-progress-bar {
  height:8px; background:var(--bg3); border-radius:4px; overflow:hidden;
}
.garden-progress-fill {
  height:100%; background:linear-gradient(90deg, var(--sage), #5ac8fa);
  border-radius:4px; transition:width .8s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.garden-progress-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation:progressShine 2s ease-in-out infinite;
}
@keyframes progressShine {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}

/* Dark mode */
html.dark .garden-modal {
  background:linear-gradient(180deg, #1a2e1a 0%, #1e351e 30%, #223a22 60%, #263e26 100%);
}
html.dark .garden-modal::before {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(180,230,180,0.12), transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(180,230,180,0.08), transparent),
    radial-gradient(3px 3px at 40% 70%, rgba(180,230,180,0.1), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(180,230,180,0.08), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(180,230,180,0.06), transparent),
    radial-gradient(3px 3px at 55% 45%, rgba(180,230,180,0.1), transparent);
}
html.dark .garden-modal-top {
  background:rgba(0,0,0,0.3); border-bottom-color:rgba(255,255,255,0.1);
}
html.dark .garden-modal-title { color:#b8e0b8; }
html.dark .garden-modal-close { background:rgba(255,255,255,0.1); color:#b8e0b8; }
html.dark .garden-stat { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.1); }
html.dark .garden-stat-num { color:#b8e0b8; }
html.dark .garden-stat-label { color:#8ab88a; }
html.dark .garden-filter-btn { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.1); color:#8ab88a; }
html.dark .garden-filter-btn.active { background:rgba(255,255,255,0.18); }
html.dark .garden-item-label { color:#8ab88a; }
html.dark .garden-progress { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.1); }
html.dark .garden-progress-label { color:#8ab88a; }
html.dark .garden-progress-bar { background:rgba(255,255,255,0.1); }
html.dark .garden-field {
  background:linear-gradient(180deg,
    #1a2a3a 0%, #1e3040 15%, #2a4a35 35%, #234a2e 50%, #1e3a25 65%,
    #3d2e1a 72%, #35281a 85%, #2d2015 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,0.2), 0 4px 20px rgba(0,0,0,0.3);
}
html.dark .garden-field::after {
  background:
    radial-gradient(ellipse 60px 20px at 15% 50%, rgba(255,255,255,0.08), transparent),
    radial-gradient(ellipse 80px 18px at 45% 60%, rgba(255,255,255,0.06), transparent),
    radial-gradient(ellipse 50px 16px at 75% 40%, rgba(255,255,255,0.07), transparent);
}
html.dark .garden-item::after { background:linear-gradient(180deg, #3a6a2a, #2d5520); }
html.dark .garden-item::before { background:radial-gradient(ellipse at center, #3d2e1a, #35281a 60%, transparent 100%); }
html.dark .garden-item-label { color:rgba(180,220,180,0.8); }
html.dark .garden-empty-full { color:rgba(180,220,180,0.85); }

@media(max-width:768px){
  .garden-stats { gap:8px; padding:16px 16px 8px; }
  .garden-stat { padding:12px 10px; min-width:70px; }
  .garden-stat-num { font-size:22px; }
  .garden-field { margin:0 12px 16px; min-height:260px; }
  .garden-field-inner { padding:60px 12px 12px; }
  .garden-item { width:60px; }
  .garden-item img { width:40px; height:40px; }
  .garden-item { width:60px; height:78px; }
  .garden-item svg { width:44px; height:52px; }
  .garden-filter { padding:8px 16px 12px; }
  .garden-level { padding:12px 16px 6px; }
  .garden-level-card { padding:12px 14px; gap:12px; }
  .garden-level-icon { width:44px; height:44px; font-size:24px; }
  .garden-roadmap-toggle { margin:6px 16px 4px; }
  .garden-roadmap { margin:0 16px; }
  .garden-roadmap-levels { grid-template-columns:repeat(5, 1fr); gap:4px; }
  .garden-roadmap-node { padding:6px 2px; }
  .garden-roadmap-node-icon { width:28px; height:28px; }
}

/* ============================================================
   QUIET SYSTEM · 2026-08
   A durable editorial layer: fewer containers, one accent,
   restrained motion, and consistent information hierarchy.
============================================================ */
:root {
  --bg:#f5f1eb;
  --bg2:#faf7f2;
  --bg3:#e8e4de;
  --ink:#1d1d1f;
  --ink1:#1d1d1f;
  --ink2:#474747;
  --ink3:#6e6e73;
  --sage:#0071e3;
  --sage-l:#e8f0fa;
  --border:#d8d4ce;
  --shadow:rgba(60,40,20,.06);
  --card-sh:none;
  --ease-spring:cubic-bezier(.2,.8,.2,1);
  --ease-bounce:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.16s;
  --dur-med:.24s;
  --dur-slow:.36s;
}
html.dark {
  --bg:#000000;
  --bg2:#1c1c1e;
  --bg3:#2c2c2e;
  --ink:#f5f5f7;
  --ink1:#f5f5f7;
  --ink2:#aeaeb2;
  --ink3:#636366;
  --sage:#0a84ff;
  --sage-l:#001a3d;
  --border:#38383a;
  --shadow:rgba(0,0,0,.4);
  --card-sh:none;
}

body { letter-spacing:-.006em; transition:background-color .2s,color .2s; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
.v-card,.j-card,.tech-story,.btn-ink,.btn-outline,.tab-btn,.theme-btn,
.lang-btn,.task-chip,.a-link,.footer-icon-btn,.stat-cell,.about-chip,
.subscribe-btn,.start-btn,.fin-btn,.pill { will-change:auto; }
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible {
  outline:2px solid var(--sage); outline-offset:3px; animation:none;
}

/* Navigation: flat, quiet, and predictable. */
nav,nav.scrolled {
  height:58px; padding:0 30px; border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  box-shadow:none; opacity:1 !important; backdrop-filter:blur(18px);
}
html.dark nav,html.dark nav.scrolled { background:rgba(8,9,11,.86); box-shadow:none; }
.nav-avatar { width:28px; height:28px; border-width:1px; }
.nav-logo-text { font-size:24px; }
.nav-tabs { gap:18px; padding:0; background:transparent; border-radius:0; overflow:visible; }
.nav-tabs::before { display:none; }
.tab-btn {
  padding:18px 1px 16px; border-radius:0; font-size:12.5px; color:var(--ink3);
  transition:color .16s,border-color .16s; border-bottom:1px solid transparent;
}
.tab-btn:hover { color:var(--ink); }
.tab-btn:active { transform:none; }
.tab-btn.active { color:var(--ink); background:transparent; box-shadow:none; font-weight:550; border-bottom-color:var(--ink); }
.nav-controls { gap:4px; }
.theme-btn,.lang-btn,.login-btn { border-color:transparent; background:transparent; box-shadow:none; }
.theme-btn:hover,.lang-btn:hover { background:var(--bg3); transform:none; }

/* Hero content remains readable even when motion is unavailable. */
.hero-eyebrow,.hero-title,.hero-desc,.hero-cta,.hero-av { opacity:1; }
.stat-cell,.quote-block { opacity:1 !important; transform:none !important; }
.hero-wrap { max-width:980px; padding:92px 44px 24px; }
.hero-av { width:72px; height:72px; margin-bottom:22px; box-shadow:none; border:1px solid var(--border); }
.hero-av:hover,.avatar-frame:hover,.about-chip:hover { transform:none; box-shadow:none; }
.hero-eyebrow {
  margin-bottom:22px; padding:0; border:0; border-radius:0; background:transparent;
  color:var(--ink3); font-size:10px; letter-spacing:.13em;
}
.hero-title {
  max-width:720px; margin-bottom:24px; font-size:58px; line-height:1.03;
  font-weight:600; letter-spacing:-.052em; text-shadow:none;
}
.hero-title em { color:var(--ink); text-shadow:none; font-weight:400; }
.hero-desc { max-width:500px; margin-bottom:30px; font-size:15px; line-height:1.8; color:var(--ink2); }
.hero-cta { gap:8px; }
.hero-live { font-size:12px; font-weight:400; color:var(--ink3); }
.hero-live-dot { width:6px; height:6px; animation:none; }
.hero-free { display:none; }
.btn-ink,.btn-outline {
  min-height:42px; padding:10px 20px; border-radius:10px; font-size:13px;
  box-shadow:none; transition:background .16s,color .16s,border-color .16s;
}
.btn-ink::after,.btn-outline::after { display:none; }
.btn-ink:hover,.btn-outline:hover { transform:none; box-shadow:none; }
.btn-outline:hover { background:var(--bg3); border-color:var(--border); color:var(--ink); }

/* Metrics become one compact information row, not four competing cards. */
.stats-bar { max-width:760px; padding:28px 44px 64px; }
.stats-cells { gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat-cell {
  min-width:0; padding:22px 10px; gap:5px; border:0; border-right:1px solid var(--border);
  border-radius:0; background:transparent; box-shadow:none; animation:none;
}
.stat-cell:last-child { border-right:0; }
.stat-cell:hover { transform:none; border-color:var(--border); background:transparent; box-shadow:none; }
.stat-n { font-family:inherit; font-size:22px; font-weight:600; letter-spacing:-.04em; }
.stat-l { font-size:9px; font-weight:550; letter-spacing:.1em; }

/* Editorial spacing and section hierarchy. */
.content-sec { max-width:980px; padding:64px 44px; }
.content-sec + .content-sec { border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
.sec-header { margin-bottom:24px; }
.sec-title,.step-label,.dur-label { font-size:10px; font-weight:600; letter-spacing:.12em; }
.sec-more { color:var(--ink3); font-size:11.5px; }
.sec-more:hover { color:var(--ink); text-decoration:none; }
.home-gb { display:none; }
.home-about-section {
  max-width:980px; padding:64px 44px; border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);
}
.home-about-heading { margin-bottom:18px; font-size:28px; font-weight:500; letter-spacing:-.035em; }
.home-about-body { margin:0; max-width:620px; font-size:14px; line-height:1.85; color:var(--ink3); }
.subscribe-banner { max-width:980px; padding:0 44px 64px; }
.subscribe-inner {
  padding:28px 0; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  border-radius:0; background:transparent; gap:20px;
}
.subscribe-title { font-size:14px; font-weight:550; }
.subscribe-sub { font-size:12px; color:var(--ink3); }
.subscribe-input { border-width:1px; border-radius:9px; background:var(--bg2); }
.subscribe-input:focus { width:220px; box-shadow:0 0 0 3px var(--sage-l); }
.subscribe-btn { border-radius:9px; }
.subscribe-btn:hover { transform:none; box-shadow:none; }

/* Product and video cards: subtle surfaces, no glow or levitation. */
.labs-grid,.home-making .labs-grid { gap:10px; }
.lab-card {
  gap:11px; padding:20px; border-radius:12px; border-color:var(--border);
  background:color-mix(in srgb,var(--bg2) 76%,transparent); box-shadow:none;
}
.lab-card:hover { transform:none; border-color:color-mix(in srgb,var(--ink3) 42%,var(--border)); box-shadow:none; }
.lab-emoji { font-size:24px; }
.lab-badge { font-size:9px; padding:3px 7px; }
.lab-name { font-size:15px; font-weight:570; }
.lab-desc { font-size:12.5px; line-height:1.72; color:var(--ink3); }
.lab-tag { padding:0; border:0; background:transparent; font-size:10px; }
.lab-cta { font-size:12px; }
.video-grid { gap:12px; }
.v-card { border-radius:12px; background:transparent; }
.v-card::before,.j-card::before { display:none; }
.v-card:hover { transform:none; box-shadow:none; border-color:var(--border); }
.v-thumb { border-bottom:1px solid var(--border); }
.v-info { padding:14px 4px 8px; }
.v-title { font-weight:550; }
.v-play { opacity:.8; }

/* Focus sidebar: one continuous tool surface. */
@media (min-width:1180px) {
  #timer-sidebar { width:320px; background:var(--bg) !important; border-left-color:var(--border); }
  #main-content { margin-right:320px; }
  nav { width:calc(100% - 320px); }
  .sb-header { padding:15px 20px; background:color-mix(in srgb,var(--bg) 92%,transparent); font-size:12px; }
  html.dark .sb-header { background:rgba(8,9,11,.9); }
  #timer-sidebar .focus-shell { padding:16px 14px 22px; gap:6px; }
  #timer-sidebar .focus-card { padding:14px 6px 10px; border:0; border-radius:0; background:transparent; }
  #timer-sidebar .garden-section,#timer-sidebar .sb-data-section { margin:0 14px; }
}
.focus-card { max-width:460px; border:1px solid var(--border); border-radius:16px; box-shadow:none; }
.step-section { margin-bottom:18px; }
.step-section + .step-section { padding-top:18px; border-top-color:var(--border); }
.pill { padding:9px 4px; border-radius:9px; border-color:var(--border); font-size:11px; }
.pill:hover { transform:none; box-shadow:none; }
.pill.sel { box-shadow:none; }
.more-settings-toggle { text-transform:none; letter-spacing:0; font-size:11px; font-weight:450; }
.start-btn { border-radius:11px; box-shadow:none; min-height:46px; }
.start-btn:hover { transform:none; box-shadow:none; }
.flower-hint { opacity:.7; font-size:10px; }
.ch-toggle-row { border:0; border-radius:10px; background:var(--bg3); }
.garden-section,.sb-data-section,.sb-lb-section { border-color:var(--border); box-shadow:none; }
.garden-section { padding:10px 12px; border-radius:10px; }
.garden-header { margin-bottom:0; }
.garden-header-left { font-size:12px; font-weight:500; }
.sb-data-section { padding:4px 0 10px; }
.sb-data-btn { padding:10px 12px; border-radius:10px; background:transparent; }
.sb-data-btn-icon { font-size:15px; }
.sb-data-btn-text { font-size:11.5px; color:var(--ink3); }

/* Journals read like writing, not a stack of app cards. */
.journal-shell,.about-shell,.gb-shell { max-width:760px; padding:72px 44px 56px; }
.journal-header,.labs-header,.gb-header { margin-bottom:44px; }
.journal-title,.labs-title,.gb-title {
  font-family:'Lora','Noto Serif SC',serif; font-size:40px; font-weight:500;
  letter-spacing:-.04em; line-height:1.15;
}
.journal-title em,.labs-title em,.gb-title em { color:var(--ink2); }
.journal-grid { gap:0; border-top:1px solid var(--border); }
.j-card {
  padding:28px 4px; border:0; border-bottom:1px solid var(--border);
  border-radius:0; background:transparent; overflow:visible;
}
.j-card:hover { transform:none; box-shadow:none; border-color:var(--border); }
.j-title { font-size:22px; font-weight:500; }
.j-excerpt { margin-bottom:12px; color:var(--ink3); }
.j-tag { padding:2px 7px; border:0; background:var(--bg3); }
.j-tag.sage { border:0; }
.j-mood { opacity:.72; }
.j-sub-cta { border:0; border-radius:8px; }
.journal-cta { border:0; border-radius:0; border-top:1px solid var(--border); }

/* Guestbook follows the same editorial list model. */
.gb-write-card { padding:20px 0 28px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.gb-textarea { border-width:1px; border-radius:10px; background:var(--bg2); }
.gb-post-btn { border-radius:9px; }
.gb-post-btn:not(:disabled):hover { transform:none; box-shadow:none; }
.gb-list { gap:0; border-top:1px solid var(--border); }
.gb-msg {
  padding:24px 4px; border:0; border-bottom:1px solid var(--border); border-radius:0;
  background:transparent; opacity:1; transform:none; animation:none; overflow:visible;
}
.gb-msg::before { display:none; }
.gb-msg:hover { transform:none; box-shadow:none; border-color:var(--border); }
.gb-msg-like { border:0; background:var(--bg3); }
.gb-reply { border-radius:0 10px 10px 0; }

/* About and works use the same editorial rhythm. */
.about-hero { align-items:center; gap:22px; margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.about-big-av { width:88px; height:88px; box-shadow:none; border:1px solid var(--border); }
.about-name { font-family:'Lora',serif; font-size:32px; letter-spacing:-.04em; }
.a-tag,.about-chip { padding:4px 9px; border:0; border-radius:7px; background:var(--bg3); }
.about-bio { line-height:1.85; }
.a-link { padding:8px 12px; border-width:1px; border-radius:9px; }
.a-link:hover { transform:none; background:var(--bg3); border-color:var(--border); color:var(--ink); }
.about-motto { padding:18px 0; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.labs-shell { max-width:880px; padding:72px 44px 56px; }

/* Modals and dashboard share one calm surface treatment. */
.login-overlay,.dash-overlay,.garden-modal { backdrop-filter:blur(12px); }
.login-modal,.dash-card,.share-card {
  border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 72px rgba(0,0,0,.3);
}
.login-method-btn { border-width:1px; border-radius:10px; }
.login-method-btn:hover { transform:none; box-shadow:none; background:var(--bg3); border-color:var(--border); }
.dash-tabs { border-radius:9px; }
.dash-tab-btn { border-radius:7px; }
.dash-tab-btn.sel { box-shadow:none; }
.dash-entry-btn,.sb-data-btn { box-shadow:none; }
.dash-card { border-radius:16px; padding:28px; }
.dash-h { font-size:20px; font-weight:650; }
.dash-close:hover { transform:none; }
.dash-cards { gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dash-cell { padding:16px 8px; border-radius:0; background:transparent; border-right:1px solid var(--border); }
.dash-cell:last-child { border-right:0; }
.dash-cell:hover { transform:none; }
.dash-cell-n { font-size:20px; font-weight:650; }
.dash-range,.dash-tabs { background:var(--bg3); }
.dash-range-btn,.dash-tab-btn { font-weight:500; }
.dash-range-btn.sel,.dash-tab-btn.sel { box-shadow:none; }
.dash-export,.dash-entry-btn { border-radius:9px; }
.dash-entry-btn:hover,.sb-data-btn:hover { transform:none; box-shadow:none; }
.garden-stat { border-radius:10px; }
.garden-stat:hover,.garden-modal-close:hover { transform:none; }
.garden-filter { border-radius:9px; }
.garden-filter-btn { border-radius:7px; font-weight:500; }
.garden-filter-btn.active { box-shadow:none; }
.garden-field { border-radius:16px; box-shadow:none; }

/* Compact footer: utility, not a second homepage. */
.footer { background:var(--bg); }
.footer-inner { max-width:980px; padding:44px 44px 28px; gap:40px; }
.footer-brand-name { font-size:23px; }
.footer-desc { color:var(--ink3); }
.footer-icon-btn { width:32px; height:32px; border-width:1px; border-radius:8px; background:transparent; }
.footer-icon-btn:hover { transform:none; background:var(--bg3); border-color:var(--border); color:var(--ink); }
.footer-nav-link { font-size:13px; color:var(--ink3); }
.footer-nav-link:hover { transform:none; color:var(--ink); }
.footer-bar { max-width:980px; padding:16px 44px; }
.music-fab {
  width:42px; height:42px; border:1px solid var(--border); background:color-mix(in srgb,var(--bg2) 88%,transparent);
  box-shadow:none; color:var(--ink3); opacity:.78;
}
.music-fab:hover { transform:none; opacity:1; color:var(--ink); }
.music-panel { border:1px solid var(--border); box-shadow:0 18px 50px rgba(0,0,0,.28); }
#scroll-top { width:38px !important; height:38px !important; border-radius:9px !important; box-shadow:none !important; }
.sc-social-btn.instagram,.sc-social-btn.facebook,.sc-social-btn.threads { display:none; }
@media (min-width:1180px) {
  .music-fab { right:calc(320px + 24px); }
  .music-panel { right:calc(320px + 24px); }
}

@media (max-width:900px) {
  .hero-wrap { padding-top:72px; }
  .hero-title { font-size:48px; }
}
@media (max-width:660px) {
  nav,nav.scrolled { padding:calc(8px + env(safe-area-inset-top,0px)) 14px 6px; }
  .nav-tabs { gap:16px; justify-content:flex-start; }
  .tab-btn { min-height:36px; padding:9px 0 8px; }
  .hero-wrap { padding:58px 20px 18px; }
  .hero-title { font-size:38px; line-height:1.08; }
  .hero-desc { font-size:14px; }
  .stats-bar { padding:22px 20px 46px; }
  .stats-cells { grid-template-columns:repeat(2,1fr); }
  .stat-cell:nth-child(2) { border-right:0; }
  .stat-cell:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .content-sec,.journal-shell,.about-shell,.gb-shell,.labs-shell { padding:44px 20px; }
  .home-about-section { padding:44px 20px; }
  .subscribe-banner { padding:0 20px 44px; }
  .subscribe-inner { align-items:flex-start; }
  .content-sec + .content-sec { border-top:0; }
  .journal-title,.labs-title,.gb-title { font-size:34px; }
  .about-hero { flex-direction:column; align-items:flex-start; text-align:left; }
  .about-tags,.about-links { justify-content:flex-start; }
  .footer-inner { padding:36px 20px 24px; }
}

/* ============================================================
   STUDY SKY · 2026-08
   The original day/night world, refined as a cinematic layer.
============================================================ */
.hero-sky-bg {
  display:block;
  height:calc(100svh + 80px);
  opacity:1;
  transition:opacity .55s ease;
  isolation:isolate;
}
body:not(:has(#page-home.active)) .hero-sky-bg { opacity:0; }

.hero-sky-bg::before {
  background:
    radial-gradient(ellipse 120% 80% at 82% 15%,rgba(255,210,130,.22) 0%,transparent 55%),
    linear-gradient(180deg,rgba(160,200,255,.50) 0%,rgba(190,220,255,.30) 30%,rgba(240,230,220,.12) 60%,transparent 80%);
  transition:opacity .6s ease;
}
html.dark .hero-sky-bg::after {
  background:linear-gradient(180deg,rgba(4,8,32,.88) 0%,rgba(8,12,45,.45) 45%,transparent 78%);
  opacity:1;
  transition:opacity .6s ease;
}
.hero-sky-bg::before,.hero-sky-bg::after { z-index:0; will-change:opacity; }

.sky-cloud { display:block !important; z-index:1; filter:blur(25px); background:rgba(255,255,255,.38); }
#sky-stars { position:absolute; inset:0; z-index:3; overflow:hidden; }
.sky-star { display:block !important; z-index:1; box-shadow:0 0 7px rgba(190,218,255,.85); }
.sky-moon,.sky-sun { display:block !important; }
.sky-moon {
  z-index:2;
  top:42px; right:18%; width:40px; height:40px;
  background:radial-gradient(circle,rgba(255,255,240,.95) 30%,rgba(255,255,200,.3) 65%,transparent 100%);
  box-shadow:0 0 24px 8px rgba(255,255,200,.18);
}
.sky-sun {
  z-index:2;
  top:30px; right:17%; width:56px; height:56px;
  background:radial-gradient(circle,rgba(255,225,140,.7) 15%,rgba(255,200,100,.25) 45%,rgba(255,190,80,.08) 70%,transparent 100%);
  box-shadow:0 0 60px 25px rgba(255,210,120,.12),0 0 120px 50px rgba(255,200,100,.05);
}
.shooting-star {
  display:block !important; z-index:4; width:80px; height:1.5px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.9) 100%);
  filter:drop-shadow(0 0 2px rgba(200,220,255,.4));
}
html.dark .shooting-star { animation:none; }
html.dark .shooting-star.is-shooting {
  animation:shootStar var(--ss-dur,1.55s) linear 1;
}

html.theme-transitioning .sky-sun,
html.theme-transitioning .sky-moon { transition-duration:.9s; }

#page-home.active .hero-wrap {
  min-height:min(590px,calc(100svh - 58px));
  justify-content:center;
  padding-top:50px;
  padding-bottom:48px;
}
#page-home.active .hero-left { position:relative; }
#page-home.active .hero-av {
  width:74px; height:74px; margin-bottom:19px;
  border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);
  box-shadow:0 12px 44px rgba(12,20,42,.16),0 0 0 7px color-mix(in srgb,var(--bg2) 38%,transparent);
  animation:studyHeroIn .7s .02s cubic-bezier(.16,1,.3,1) both;
}
#page-home.active .hero-av:hover { transform:translateY(-3px) rotate(2deg) scale(1.035); }
#page-home.active .hero-eyebrow {
  margin-bottom:18px; padding:6px 12px;
  border:1px solid color-mix(in srgb,var(--sage) 22%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--bg2) 38%,transparent);
  color:var(--ink2); font-size:9.5px; letter-spacing:.13em;
  backdrop-filter:blur(14px) saturate(140%);
  animation:studyHeroIn .72s .10s cubic-bezier(.16,1,.3,1) both;
}
#page-home.active .hero-title {
  max-width:660px; margin-bottom:20px;
  font-family:'Lora','Noto Serif SC',serif;
  font-size:clamp(40px,4.8vw,58px); line-height:1.075;
  font-weight:600; letter-spacing:-.045em;
  text-shadow:0 18px 60px rgba(12,22,50,.12);
  animation:studyHeroIn .82s .17s cubic-bezier(.16,1,.3,1) both;
}
#page-home.active .hero-title em {
  color:var(--sage); font-weight:500;
  text-shadow:0 0 42px color-mix(in srgb,var(--sage) 28%,transparent);
}
#page-home.active .hero-desc {
  max-width:550px; margin-bottom:25px;
  font-size:14.5px; line-height:1.82; color:var(--ink2);
  animation:studyHeroIn .78s .25s cubic-bezier(.16,1,.3,1) both;
}
#page-home.active .hero-cta {
  gap:10px;
  animation:studyHeroIn .76s .32s cubic-bezier(.16,1,.3,1) both;
}
#page-home.active .hero-free {
  display:block; margin-top:15px !important;
  font-size:9.5px !important; letter-spacing:.105em; text-transform:uppercase;
  animation:studyHeroIn .72s .4s cubic-bezier(.16,1,.3,1) both;
}
#page-home.active .btn-ink,
#page-home.active .btn-outline {
  min-height:43px; padding:10px 18px; border-radius:11px; font-size:12.5px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s,background .28s;
}
#page-home.active .hero-youtube {
  background:linear-gradient(135deg,#ff3b30,#e01d24 70%);
  box-shadow:0 9px 28px rgba(224,29,36,.22),inset 0 1px rgba(255,255,255,.20);
}
#page-home.active .hero-youtube:hover {
  opacity:1; transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(224,29,36,.30),inset 0 1px rgba(255,255,255,.24);
}
#page-home.active .btn-outline {
  background:color-mix(in srgb,var(--bg2) 38%,transparent);
  border-color:color-mix(in srgb,var(--ink) 16%,transparent);
  backdrop-filter:blur(14px) saturate(130%);
}
#page-home.active .btn-outline:hover {
  transform:translateY(-2px); background:color-mix(in srgb,var(--bg2) 72%,transparent);
  border-color:color-mix(in srgb,var(--ink) 28%,transparent);
}

/* Product cards retain calm typography but regain depth and response. */
#page-home .lab-card,#page-home .v-card {
  transition:transform .38s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .38s,background .3s;
}

/* One consistent content measure keeps the hero, products and videos aligned. */
#page-home > .content-sec,
#page-home > .home-about-section,
#page-home > .subscribe-banner { max-width:940px; }
#page-home > .content-sec { padding:54px 40px; }
#page-home > .home-making { padding-top:46px; }
#page-home .labs-grid,#page-home .video-grid { gap:14px; }
#page-home .lab-card { padding:21px; border-radius:14px; }
#page-home .sec-header { margin-bottom:21px; }
#page-home .lab-card:hover {
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--sage) 28%,var(--border));
  background:color-mix(in srgb,var(--bg2) 90%,transparent);
  box-shadow:0 20px 54px rgba(10,18,38,.12);
}
#page-home .v-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 48px rgba(10,18,38,.14);
}

@keyframes studyHeroIn {
  from { opacity:0; transform:translateY(22px); filter:blur(7px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}

@media (max-width:660px) {
  .hero-sky-bg { top:-56px; height:calc(100svh + 56px); }
  .sky-sun { top:10%; right:4%; }
  .sky-moon { top:11%; right:7%; }
  #page-home.active .hero-wrap { min-height:550px; padding:48px 20px 46px; }
  #page-home.active .hero-av { width:64px; height:64px; }
  #page-home.active .hero-title { max-width:430px; font-size:clamp(34px,10.3vw,43px); line-height:1.1; }
  #page-home.active .hero-desc { font-size:13.5px; line-height:1.75; max-width:410px; }
  #page-home.active .hero-cta { width:100%; }
  #page-home.active .btn-ink,#page-home.active .btn-outline { width:100%; justify-content:center; }
  #page-home > .content-sec { padding:44px 20px; }
  #page-home > .home-making { padding-top:38px; }
}

@media (prefers-reduced-motion:reduce) {
  #page-home.active .hero-av,#page-home.active .hero-eyebrow,#page-home.active .hero-title,
  #page-home.active .hero-desc,#page-home.active .hero-cta,#page-home.active .hero-free { animation:none; }
  .sky-cloud,.sky-star,.shooting-star { animation:none !important; }
}

/* ============================================================
   MOTION SYSTEM · depth, reveal, feedback
============================================================ */
:root {
  /* One motion grammar for the entire product.
     Quick = acknowledgement, standard = interface change, emphasis = Focus ritual. */
  --motion-quick:160ms;
  --motion-standard:260ms;
  --motion-emphasis:520ms;
  --motion-enter:cubic-bezier(.16,1,.3,1);
  --motion-exit:cubic-bezier(.7,0,.84,0);
  --motion-feedback:cubic-bezier(.2,.8,.2,1);
  --motion-ease:var(--motion-enter);
  --motion-ease-soft:var(--motion-feedback);
  --ease-spring:var(--motion-feedback);
  --ease-bounce:var(--motion-feedback);
  --sky-x:0px; --sky-y:0px; --sky-scroll:0px;
  --orbit-x:0px; --orbit-y:0px;
  --hero-x:0px; --hero-y:0px;
}

/* Staged entrances are deliberately small: content arrives, it does not fly in. */
html.motion-ready .awen-reveal {
  opacity:0 !important;
  transform:translate3d(0,14px,0) !important;
  filter:none;
  transition:
    opacity var(--motion-standard) var(--motion-enter) var(--reveal-delay,0ms),
    transform calc(var(--motion-standard) + 40ms) var(--motion-enter) var(--reveal-delay,0ms) !important;
  will-change:opacity,transform;
}
html.motion-ready .awen-reveal.is-visible {
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
  filter:none;
}

/* A page change is a quiet handoff, never a full-screen performance. */
.page.page-entering { animation:awenPageEnter var(--motion-standard) var(--motion-enter) both; }
@keyframes awenPageEnter {
  from { opacity:0; transform:translate3d(0,10px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
.page.page-exiting { animation:awenPageExit var(--motion-quick) var(--motion-exit) both; pointer-events:none; }
@keyframes awenPageExit {
  from { opacity:1; transform:translate3d(0,0,0); }
  to { opacity:0; transform:translate3d(0,-6px,0); }
}

/* Raycast-style local light: it follows the pointer but never moves content. */
.motion-card { position:relative; isolation:isolate; overflow:hidden; }
.motion-card::after {
  content:''; position:absolute; inset:-1px; z-index:3; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(240px circle at var(--card-mx,50%) var(--card-my,50%),
    color-mix(in srgb,var(--sage) 14%,transparent),transparent 66%);
  opacity:0; transition:opacity var(--motion-quick) var(--motion-feedback);
}
.motion-card:hover::after { opacity:1; }
html.dark .motion-card::after {
  background:radial-gradient(250px circle at var(--card-mx,50%) var(--card-my,50%),
    rgba(111,164,255,.13),rgba(95,106,255,.045) 38%,transparent 68%);
}

/* Vercel-like navigation response: the indicator grows rather than appears. */
.tab-btn { position:relative; border-bottom-color:transparent !important; }
.tab-btn::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--ink) 20%,var(--ink) 80%,transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--motion-standard) var(--motion-enter); opacity:.78;
}
.tab-btn.active::after { transform:scaleX(1); }

/* Restore pointer-aware sheen on primary actions. */
.btn-ink::after,.btn-outline::after,.start-btn.go::after { display:block; }
.btn-ink:hover::after,.btn-outline:hover::after,.start-btn.go:hover::after { opacity:1; }

/* Subtle spatial response in the hero; independent transforms avoid conflict. */
#sky-stars {
  transform:translate3d(var(--sky-x),calc(var(--sky-y) + var(--sky-scroll)),0);
  transition:transform .5s var(--motion-ease-soft);
  will-change:transform;
}
.sky-sun,.sky-moon {
  translate:var(--orbit-x) var(--orbit-y);
}
#page-home.active .hero-left {
  translate:var(--hero-x) var(--hero-y);
  transition:translate .55s var(--motion-ease-soft);
  will-change:translate;
}

/* The header compresses almost imperceptibly once reading begins. */
html.has-scrolled nav,html.has-scrolled nav.scrolled {
  box-shadow:0 8px 30px rgba(15,20,35,.055);
  backdrop-filter:blur(22px) saturate(150%);
}
html.dark.has-scrolled nav,html.dark.has-scrolled nav.scrolled {
  box-shadow:0 10px 34px rgba(0,0,0,.22);
}

@media (hover:none),(pointer:coarse) {
  .motion-card::after { display:none; }
  #sky-stars { transform:translate3d(0,var(--sky-scroll),0); }
  #page-home.active .hero-left { translate:0 0; }
}

@media (prefers-reduced-motion:reduce) {
  html.motion-ready .awen-reveal,html.motion-ready .awen-reveal.is-visible {
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  .page.page-entering,.page.page-exiting { animation:none; }
  #sky-stars,#page-home.active .hero-left { transform:none; translate:none; transition:none; }
  .tab-btn::after { transition:none; }
}

/* ============================================================
   FLOATING FOCUS DRAWER · detached from navigation
============================================================ */
.focus-scrim { display:none; }

@media (min-width:1180px) {
  /* The site keeps one uninterrupted canvas; focus floats above it. */
  nav,html.sb-hidden nav { width:100% !important; padding-right:36px; }
  #main-content,html.sb-hidden #main-content { margin-right:0 !important; }
  .tab-focus-btn { display:inline-flex !important; }
  .tab-focus-btn.drawer-open { color:var(--sage); }
  .tab-focus-btn.drawer-open::after {
    background:linear-gradient(90deg,transparent,var(--sage) 20%,var(--sage) 80%,transparent);
    transform:scaleX(1);
  }

  .focus-scrim {
    display:block; position:fixed; inset:58px 0 0; z-index:86;
    background:transparent; backdrop-filter:none;
    opacity:0; pointer-events:none;
    transition:opacity .32s ease;
  }
  html.dark .focus-scrim { background:transparent; }
  html.sb-hidden .focus-scrim { opacity:0; pointer-events:none; }

  #timer-sidebar {
    display:flex !important; flex-direction:column;
    position:fixed; top:66px; right:0; bottom:0; left:auto;
    height:calc(100dvh - 66px); max-height:none;
    width:390px; max-width:calc(100vw - 20px); z-index:120;
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
    border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);
    border-right:0; border-radius:24px 0 0 0;
    background:color-mix(in srgb,var(--bg2) 88%,transparent) !important;
    box-shadow:0 26px 80px rgba(13,20,38,.18),0 7px 24px rgba(13,20,38,.10),inset 0 1px rgba(255,255,255,.08);
    backdrop-filter:blur(28px) saturate(145%);
    transform:translate3d(0,0,0) scale(1); transform-origin:calc(100% - 36px) 30px;
    opacity:1; visibility:visible;
    transition:transform var(--motion-emphasis) var(--motion-enter),opacity var(--motion-quick) ease,border-radius var(--motion-standard) var(--motion-feedback),visibility 0s,border-color var(--motion-standard),background var(--motion-standard);
    scrollbar-width:thin;
  }
  html.dark #timer-sidebar {
    background:color-mix(in srgb,#0d0f14 90%,transparent) !important;
    border-color:rgba(255,255,255,.105);
    box-shadow:0 34px 100px rgba(0,0,0,.48),0 8px 28px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.05);
  }
  html:not(.sb-hidden) #timer-sidebar { animation:focusDockExpand var(--motion-emphasis) var(--motion-enter) both; }
  #timer-sidebar.dock-morphing { will-change:transform,opacity,border-radius; }
  html.sb-hidden #timer-sidebar {
    transform:translate3d(0,0,0) scale(.16); filter:none;
    opacity:0; visibility:hidden; pointer-events:none; border-radius:28px;
    transition:transform calc(var(--motion-standard) + 80ms) var(--motion-exit),opacity var(--motion-quick) ease,border-radius var(--motion-standard) var(--motion-feedback),visibility 0s calc(var(--motion-standard) + 80ms);
  }

  .sb-header {
    display:flex; position:sticky; top:0; z-index:8;
    align-items:center; justify-content:space-between;
    min-height:58px; padding:14px 18px 9px;
    border:0; background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 96%,transparent) 64%,transparent);
    backdrop-filter:blur(18px); color:var(--ink2); font-size:12px;
  }
  html.dark .sb-header {
    background:linear-gradient(180deg,rgba(13,15,20,.97) 64%,rgba(13,15,20,0));
  }
  .sb-h-title { display:flex; align-items:center; gap:7px; }
  .sb-header-actions { display:flex; align-items:center; gap:7px; }
  .sb-pin {
    width:32px; height:32px; display:grid; place-items:center; padding:0;
    border:1px solid transparent; border-radius:999px; background:transparent;
    color:var(--ink3); cursor:pointer; font-size:18px; line-height:1;
    transition:color var(--motion-quick) var(--motion-feedback),background var(--motion-quick) var(--motion-feedback),transform var(--motion-quick) var(--motion-feedback);
  }
  .sb-pin:hover { color:var(--sage); background:color-mix(in srgb,var(--sage) 9%,transparent); }
  .sb-pin[aria-pressed="true"] { color:var(--sage); background:color-mix(in srgb,var(--sage) 13%,transparent); transform:rotate(-18deg); }
  .sb-pin svg { width:15px; height:15px; }
  .sb-collapse {
    width:32px; height:32px; border:1px solid transparent; border-radius:999px;
    display:grid; place-items:center; color:var(--ink3);
    padding:0; background:color-mix(in srgb,var(--bg3) 62%,transparent); appearance:none; cursor:pointer;
    border-color:color-mix(in srgb,var(--ink) 10%,transparent); color:var(--ink2);
    transition:transform .28s var(--motion-ease),background .2s,border-color .2s,color .2s;
  }
  .sb-collapse-glyph {
    width:8px; height:8px; display:block;
    border-top:1.8px solid currentColor; border-right:1.8px solid currentColor;
    transform:rotate(45deg) translate(-1px,1px);
  }
  .sb-collapse:hover {
    transform:translateX(2px); color:var(--sage); background:var(--bg3);
    border-color:color-mix(in srgb,var(--ink) 9%,transparent);
  }

  #timer-sidebar .focus-shell {
    min-height:0; padding:5px 16px 14px; align-items:stretch;
    flex-direction:column; gap:8px;
  }
  #timer-sidebar .focus-card {
    max-width:none; padding:14px 7px 11px;
    border:0; border-radius:18px; background:transparent;
    box-shadow:none;
  }
  #timer-sidebar .garden-section,#timer-sidebar .sb-data-section {
    margin:0 16px; border-left:0; border-right:0; border-radius:0;
  }
  #timer-sidebar .garden-section { margin-top:2px; }
  #timer-sidebar .sb-data-section { margin-bottom:12px; }

  .sb-show-handle {
    display:none; top:72px; right:12px; z-index:121;
    width:48px; min-width:48px; height:48px; min-height:48px; padding:0 11px;
    justify-content:center; overflow:hidden;
    border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
    border-radius:15px;
    background:color-mix(in srgb,var(--bg2) 82%,transparent);
    box-shadow:0 14px 42px rgba(12,18,35,.14),inset 0 1px rgba(255,255,255,.08);
    backdrop-filter:blur(22px) saturate(145%);
    transform:none;
    transition:width .34s var(--motion-ease),transform .28s var(--motion-ease),box-shadow .28s,border-color .28s;
  }
  html.dark .sb-show-handle {
    border-color:rgba(255,255,255,.11); background:rgba(17,19,25,.82);
    box-shadow:0 18px 46px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04);
  }
  html.sb-hidden .sb-show-handle { display:flex; animation:focusDockOrbIn var(--motion-standard) var(--motion-enter) both; }
  html:not(.sb-hidden) .sb-show-handle { display:none; }
  .sb-show-handle:hover {
    transform:scale(1.06);
    border-color:color-mix(in srgb,var(--sage) 35%,var(--border));
    box-shadow:0 18px 50px rgba(12,18,35,.20),0 0 0 5px color-mix(in srgb,var(--sage) 8%,transparent);
  }
  .sb-show-handle:has(.sb-pill-live.active) { width:auto; max-width:190px; justify-content:flex-start; }

  html.sb-hidden .music-fab,html.sb-hidden .music-panel { right:24px; }
  html:not(.sb-hidden) .music-fab,html:not(.sb-hidden) .music-panel { right:414px; }
}

@keyframes focusDockExpand {
  0% { opacity:0; transform:translate3d(0,0,0) scale(.16); border-radius:18px; }
  72% { opacity:1; transform:translate3d(0,0,0) scale(1); border-radius:24px 0 0 0; }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); border-radius:24px 0 0 0; }
}
@keyframes focusDockOrbIn {
  0% { opacity:0; transform:scale(.62) rotate(-8deg); }
  64% { opacity:1; transform:scale(1.06) rotate(2deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}

/* A light, text-like arrival: the purpose appears rather than jumps in. */
#page-home.active .hero-eyebrow {
  clip-path:inset(0 100% 0 0);
  animation:studyHeroIn .72s .10s cubic-bezier(.16,1,.3,1) both,heroEyebrowType .72s .15s steps(18,end) both;
}
#page-home.active .hero-eyebrow::after {
  content:''; display:inline-block; width:1px; height:.92em; margin-left:5px;
  vertical-align:-.12em; background:currentColor; opacity:0;
  animation:heroTypeCaret .42s .84s steps(1,end) 3;
}
@keyframes heroEyebrowType { to { clip-path:inset(0 0 0 0); } }
@keyframes heroTypeCaret { 50% { opacity:.72; } }

#timer-sidebar .start-btn.go:active { transform:scale(.975); }

@media (prefers-reduced-motion:reduce) and (min-width:1180px) {
  html:not(.sb-hidden) #timer-sidebar,html.sb-hidden .sb-show-handle { animation:none; }
  #timer-sidebar,.sb-show-handle,.focus-scrim { transition:none; }
}

/* ============================================================
   FOCUS OS · clear ritual, quiet progress, earned rewards
============================================================ */
.focus-tomato {
  position:relative; width:28px; height:26px; display:inline-block; flex:0 0 auto;
  filter:drop-shadow(0 5px 9px rgba(225,64,55,.18));
}
.focus-tomato::before {
  content:''; position:absolute; left:2px; right:2px; top:5px; bottom:0;
  border-radius:46% 46% 49% 49% / 42% 42% 58% 58%;
  background:linear-gradient(145deg,#ff7168 0%,#ee4e45 54%,#cf352f 100%);
  box-shadow:inset 3px 3px 5px rgba(255,255,255,.2),inset -3px -3px 5px rgba(104,18,15,.12);
}
.focus-tomato::after {
  content:''; position:absolute; left:9px; top:0; width:11px; height:9px;
  border-radius:80% 16% 80% 16%; transform:rotate(36deg);
  background:linear-gradient(145deg,#6fbf73,#388b52);
  box-shadow:-6px 3px 0 -2px #4b9d5d,6px 3px 0 -2px #4b9d5d;
}
.focus-tomato-small { width:27px; height:25px; }
.sb-pill-idle .focus-tomato { transform:translateY(1px); }
.sb-title-icon {
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:10px; color:var(--sage);
  background:color-mix(in srgb,var(--sage) 10%,transparent);
}
.sb-header-copy { display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.sb-header-copy strong { font-size:12.5px; font-weight:620; color:var(--ink); }
.sb-header-copy small { font-size:9.5px; font-weight:450; color:var(--ink3); letter-spacing:.02em; }

#timer-sidebar .focus-card { text-align:left; }
#timer-sidebar .tt-inline-row { margin-top:0; }
#timer-sidebar .step-section { margin-bottom:16px; }
#timer-sidebar .step-section + .step-section {
  padding-top:17px; border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}
#timer-sidebar .tt-inline-header { margin-bottom:10px; align-items:center; }
#timer-sidebar .tt-inline-eyebrow { margin-bottom:3px; font-size:8.5px; letter-spacing:.12em; }
#timer-sidebar .tt-inline-title { font-size:16px; font-weight:620; }
#timer-sidebar .tt-inline-card {
  min-height:64px; padding:13px 14px; border-radius:13px;
  border-color:color-mix(in srgb,var(--border) 75%,transparent);
  background:color-mix(in srgb,var(--bg3) 45%,transparent);
}
#timer-sidebar .tt-inline-card.empty { min-height:64px; }
#timer-sidebar .tt-inline-card:hover {
  transform:translateY(-1px); border-color:color-mix(in srgb,var(--sage) 34%,var(--border));
  background:color-mix(in srgb,var(--bg3) 68%,transparent);
}
#timer-sidebar .tt-inline-motto { padding:7px 2px 0 31px; font-size:10px; opacity:.78; }
#timer-sidebar .tt-ic-text { font-size:13.5px; }

#timer-sidebar .quick-pick-label,#timer-sidebar .step-label {
  margin-bottom:8px; font-size:8.5px; font-weight:620; letter-spacing:.12em; color:var(--ink3);
}
#timer-sidebar .task-chips {
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 7px; padding-bottom:2px;
  overflow:visible; scrollbar-width:none;
}
#timer-sidebar .task-chips::-webkit-scrollbar { display:none; }
#timer-sidebar .task-chip {
  flex:0 0 auto; min-width:auto; padding:7px 10px; border-radius:9px;
  background:color-mix(in srgb,var(--bg3) 72%,transparent); scroll-snap-align:start;
}
#timer-sidebar .chips-section-label {
  flex:0 0 100%; align-self:center; margin:0 2px; white-space:nowrap;
}
#timer-sidebar #fprepare > .step-section { display:block !important; }
#timer-sidebar #fprepare .chips-collapsible { display:block !important; }
#timer-sidebar #fprepare .pills { display:flex !important; }
#timer-sidebar #fprepare > .start-btn { display:block !important; }

#timer-sidebar .pills {
  gap:3px; padding:3px; margin-bottom:4px;
  border:1px solid color-mix(in srgb,var(--border) 68%,transparent);
  border-radius:12px; background:color-mix(in srgb,var(--bg3) 58%,transparent);
}
#timer-sidebar .pill {
  min-height:36px; padding:8px 3px; border:0; border-radius:9px;
  background:transparent; color:var(--ink3); font-size:10.5px;
  transition:background .22s,color .22s,transform .18s,box-shadow .22s;
}
#timer-sidebar .pill:hover { background:color-mix(in srgb,var(--bg2) 55%,transparent); color:var(--ink); }
#timer-sidebar .pill.sel {
  background:var(--bg2); color:var(--sage);
  box-shadow:0 1px 3px rgba(8,12,24,.11),0 5px 14px rgba(8,12,24,.06);
}
#timer-sidebar .more-settings-collapsible { margin-top:8px; }
#timer-sidebar .more-settings-toggle { font-size:9.5px; letter-spacing:.02em; text-transform:none; }
#timer-sidebar .more-settings-body {
  margin-top:8px; padding:11px; border-radius:12px;
  background:color-mix(in srgb,var(--bg3) 52%,transparent);
}
#timer-sidebar .ch-toggle-row { margin-bottom:0; background:transparent; }
#timer-sidebar .start-btn {
  min-height:47px; margin-top:13px; border-radius:13px;
  font-size:12.5px; letter-spacing:.01em;
}
#timer-sidebar .start-btn.go {
  background:linear-gradient(135deg,color-mix(in srgb,var(--sage) 90%,#72aaff),var(--sage));
  box-shadow:0 10px 28px color-mix(in srgb,var(--sage) 22%,transparent),inset 0 1px rgba(255,255,255,.18);
}
#timer-sidebar .start-btn.go:hover {
  transform:translateY(-2px); opacity:1;
  box-shadow:0 15px 36px color-mix(in srgb,var(--sage) 28%,transparent),inset 0 1px rgba(255,255,255,.2);
}
#timer-sidebar .flower-hint { margin-top:9px; font-size:9.5px; opacity:.62; }

/* Each stage enters as a new part of the same ritual. */
#fprepare,#fcdown,#ftimer,#ffinish,#fbreak { animation:focusStageIn var(--motion-standard) var(--motion-enter) both; }
@keyframes focusStageIn {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
#timer-sidebar .f-task { text-align:center; font-size:15px; margin-bottom:13px; }
#timer-sidebar .ring-wrap { width:190px; height:190px; margin-bottom:18px; }
#timer-sidebar .ring-time { font-size:39px; font-variant-numeric:tabular-nums; }
#timer-sidebar .r-fg { stroke-width:4.5; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--sage) 55%,transparent)); }
#timer-sidebar.is-focusing .ring-wrap { animation:focusRingBreathe 3.2s ease-in-out infinite; }
#timer-sidebar.is-paused .ring-wrap { animation:none; opacity:.72; }
#timer-sidebar.is-paused .r-fg { filter:none; stroke:var(--ink3); }
#timer-sidebar.is-complete .ring-wrap { animation:focusCompleteSettle var(--motion-emphasis) var(--motion-enter) both; }
#timer-sidebar.is-breaking .r-fg { stroke:var(--warm); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--warm) 38%,transparent)); }
@keyframes focusRingBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.018)} }
@keyframes focusCompleteSettle { from{transform:scale(.96);opacity:.5} to{transform:scale(1);opacity:1} }
#timer-sidebar .ctrl { min-width:92px; padding:9px 16px; border-radius:11px; }
#timer-sidebar .sb-focus-footer { margin-top:22px; padding-top:16px; }
#timer-sidebar .fin-flower { width:118px; height:132px; margin-bottom:9px; }
#timer-sidebar .fin-h { font-family:'Lora','Noto Serif SC',serif; font-size:25px; font-weight:550; }
#timer-sidebar .fin-msg { margin-bottom:16px; text-align:center; }
#timer-sidebar .fin-btns { gap:7px; }
#timer-sidebar .fin-btn,#timer-sidebar .share-btn { border-radius:12px; }
#timer-sidebar .task-stats { max-width:none; background:transparent; border-radius:12px; }

/* Progress comes after action: summary first, rewards second, detail last. */
.focus-progress-hub {
  margin-top:2px; padding:8px 18px 18px;
  border-top:1px solid color-mix(in srgb,var(--border) 78%,transparent);
}
.focus-progress-hub[hidden] { display:none !important; }
.focus-progress-toggle {
  width:100%; min-height:58px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 12px; border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:14px; background:color-mix(in srgb,var(--bg3) 42%,transparent);
  color:var(--ink); text-align:left; cursor:pointer; font-family:inherit;
  transition:background .2s,border-color .2s;
}
.focus-progress-toggle:hover {
  background:color-mix(in srgb,var(--bg3) 70%,transparent);
  border-color:color-mix(in srgb,var(--sage) 24%,var(--border));
}
.focus-progress-toggle-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.focus-progress-toggle-copy strong { font-size:11.5px; font-weight:620; color:var(--ink2); }
.focus-progress-toggle-copy small {
  display:flex; align-items:center; flex-wrap:wrap; gap:4px;
  font-size:9.5px; color:var(--ink3); font-variant-numeric:tabular-nums;
}
.focus-progress-toggle-copy small b { color:var(--sage); font-weight:650; }
.focus-progress-toggle-copy small i { opacity:.45; font-style:normal; }
.focus-progress-chevron { color:var(--ink3); font-size:16px; transition:transform .25s var(--motion-ease); }
.focus-progress-toggle[aria-expanded="true"] .focus-progress-chevron { transform:rotate(180deg); }
.focus-progress-details { padding:7px 1px 0; }
.focus-progress-details[hidden] { display:none !important; }
.focus-progress-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; }
.focus-progress-eyebrow {
  display:block; margin-bottom:4px; font-size:8.5px; font-weight:650;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);
}
.focus-progress-title { font-size:13px; font-weight:560; color:var(--ink2); letter-spacing:-.015em; }
.focus-progress-stats {
  display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:8px;
  border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:15px; overflow:hidden;
  background:color-mix(in srgb,var(--bg3) 38%,transparent);
}
.focus-progress-stat {
  min-width:0; padding:13px 7px 11px; text-align:center;
  border-right:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}
.focus-progress-stat:last-child { border-right:0; }
.focus-progress-stat strong {
  display:block; margin-bottom:4px; font-size:19px; line-height:1;
  font-weight:650; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.focus-progress-stat span { display:block; font-size:8.5px; color:var(--ink3); white-space:nowrap; }

#timer-sidebar .garden-section {
  padding:15px 0 14px; margin:0; border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent); border-radius:0;
}
#timer-sidebar .garden-header { margin-bottom:8px; }
#timer-sidebar .garden-header-left { font-size:11.5px; font-weight:580; }
#timer-sidebar .garden-header-right { font-size:9.5px; }
#timer-sidebar .garden-section .sb-level-card {
  display:flex !important; padding:9px 0 10px; margin:0 0 5px;
  border:0; border-radius:0; background:transparent;
}
#timer-sidebar .sb-level-icon,#timer-sidebar .sb-lv-img { width:34px; height:34px; }
#timer-sidebar .sb-level-lv { font-size:11.5px; }
#timer-sidebar .sb-level-name { font-size:10.5px; }
#timer-sidebar .sb-level-next { font-size:9px; }
#timer-sidebar .garden-section .garden-grid {
  display:flex !important; flex-wrap:nowrap; gap:3px; min-height:34px; max-height:38px; overflow:hidden;
}
#timer-sidebar .garden-flower { flex:0 0 32px; width:32px; height:32px; }
#timer-sidebar .garden-empty { align-self:center; font-size:10px; font-style:normal; }

#timer-sidebar .sb-lb-section {
  padding:15px 0 14px; border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}
#timer-sidebar .sb-lb-header { margin-bottom:7px; }
#timer-sidebar .sb-lb-title { font-size:10.5px; font-weight:580; letter-spacing:.02em; text-transform:none; }
#timer-sidebar .sb-lb-cta { font-size:9.5px; text-decoration:none; }
#timer-sidebar .sb-lb-section .lb-list { max-height:none; padding:0; }
#timer-sidebar #sb-lb-preview .lb-item {
  min-height:36px; padding:6px 4px; border-radius:9px; background:transparent;
}
#timer-sidebar #sb-lb-preview .lb-item:hover { background:color-mix(in srgb,var(--bg3) 55%,transparent); }
#timer-sidebar #sb-lb-preview .lb-av { width:23px; height:23px; }
#timer-sidebar #sb-lb-preview .lb-name { font-size:10.5px; }
#timer-sidebar #sb-lb-preview .lb-mins { font-size:9.5px; }

#timer-sidebar .sb-data-section { margin:0; padding:12px 0 0; }
#timer-sidebar .sb-data-btn {
  min-height:42px; padding:9px 11px; border:0; border-radius:11px;
  background:color-mix(in srgb,var(--bg3) 52%,transparent);
}
#timer-sidebar .sb-data-btn:hover {
  transform:none; background:color-mix(in srgb,var(--sage) 9%,var(--bg3)); color:var(--ink);
}
#timer-sidebar .sb-data-btn-text { font-size:10.5px; color:var(--ink2); }
#timer-sidebar .sb-data-btn-icon { font-size:14px; color:var(--sage); }

@media (max-width:1179px) {
  .focus-progress-hub { max-width:460px; margin:0 auto; padding:18px 20px 34px; }
}

@media (prefers-reduced-motion:reduce) {
  #fprepare,#fcdown,#ftimer,#ffinish,#fbreak { animation:none; }
}

/* Dark controls keep the restored night atmosphere while remaining legible. */
html.dark #timer-sidebar .tt-ic-num,
html.dark #timer-sidebar .tt-ic-empty-mark {
  color:#8ec5ff; background:#112846;
}
html.dark #timer-sidebar .task-chip {
  color:#c7c7cc; background:#242426; border-color:transparent;
}
html.dark #timer-sidebar .task-chip:hover {
  color:#fff; background:#18385f; border-color:#0a84ff;
}
html.dark #timer-sidebar .task-chip-add { border-color:#48484a; color:#aeaeb2; }

html.dark #timer-sidebar .pills { background:#151517; border-color:#38383a; }
html.dark #timer-sidebar .pill { color:#aeaeb2; }
html.dark #timer-sidebar .pill:hover { color:#fff; background:#2c2c2e; }
html.dark #timer-sidebar .pill.sel {
  color:#fff; background:#0a84ff; font-weight:750;
  box-shadow:0 0 0 1px rgba(125,190,255,.35),0 8px 24px rgba(10,132,255,.28);
}
html.dark #timer-sidebar .start-btn.go {
  color:#fff; background:linear-gradient(180deg,#168dff,#0071e3); font-weight:750;
  box-shadow:0 11px 30px rgba(10,132,255,.3),inset 0 1px rgba(255,255,255,.25);
}
html.dark #timer-sidebar .start-btn.go:hover {
  background:linear-gradient(180deg,#319cff,#0a84ff);
  box-shadow:0 15px 38px rgba(10,132,255,.4),inset 0 1px rgba(255,255,255,.28);
}
html.dark #timer-sidebar .start-btn.no { color:#636366; background:#2c2c2e; }

html.dark .save-popover {
  color:var(--ink); background:#1c1c1e; border-color:#48484a;
  box-shadow:0 28px 80px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025);
}
html.dark .save-emoji-btn {
  color:#c7c7cc; background:#111113; border-color:#48484a;
}
html.dark .save-emoji-btn:hover {
  color:#fff; background:#2c2c2e; border-color:#636366;
}
html.dark .save-emoji-btn.sel {
  color:#fff; background:#0a84ff; border-color:#64b2ff;
  box-shadow:0 0 0 2px rgba(10,132,255,.24),0 7px 18px rgba(10,132,255,.26);
}
html.dark .save-name-inp {
  color:#fff; background:#111113; border-color:#48484a;
}
html.dark .save-name-inp:focus {
  border-color:#0a84ff; box-shadow:0 0 0 3px rgba(10,132,255,.16);
}
html.dark .save-cancel-btn { color:#c7c7cc; border-color:#48484a; }
html.dark .save-confirm-btn {
  color:#fff; background:#0a84ff; border-color:#0a84ff; font-weight:700;
}

/* ============================================================
   CINEMATIC UI REFINEMENT · 2026-08
   Keep the sky expressive, while letting reading and action stay calm.
============================================================ */
/* Day is intentionally clear. Stars belong to night, not to the paper sky. */
.sky-star { opacity:0; animation:none; }
html.dark .sky-star {
  opacity:1;
  animation:starTwinkle var(--tw-dur,2.5s) ease-in-out infinite;
  animation-delay:var(--tw-delay,0s);
}

/* A slow, almost imperceptible night drift gives the hero depth without noise. */
html.dark .hero-sky-bg::after {
  background-size:112% 112%;
  animation:nightSkyDrift 18s ease-in-out infinite alternate;
}
@keyframes nightSkyDrift {
  from { background-position:48% 0%; }
  to { background-position:54% 7%; }
}

/* The navigation remains quiet, but the current place is immediately obvious. */
html.dark .tab-btn { color:#8d929d; }
html.dark .tab-btn:hover { color:#d9dce2; }
html.dark .tab-btn.active {
  color:#fff;
  border-bottom-color:#75b9ff;
  text-shadow:0 0 18px rgba(10,132,255,.22);
}
.tab-btn.active { position:relative; }
.tab-btn.active::after {
  content:''; position:absolute; left:18%; right:18%; bottom:-1px; height:1px;
  border-radius:999px; background:currentColor; opacity:.78;
}

/* The homepage copy gets a deliberate reading rhythm across large screens. */
#page-home.active .hero-left { max-width:760px; }
#page-home.active .hero-title { text-wrap:balance; }
#page-home.active .hero-desc { text-wrap:pretty; }
html.dark #page-home.active .hero-title {
  text-shadow:0 14px 54px rgba(0,0,0,.48),0 0 34px rgba(34,76,170,.12);
}
html.dark #page-home.active .hero-desc { color:#b8bdc8; }

/* Focus stays compact, but its next action has a stronger tactile hierarchy. */
#timer-sidebar .tt-inline-card:focus-within {
  border-color:color-mix(in srgb,var(--sage) 58%,var(--border));
  background:color-mix(in srgb,var(--sage) 7%,var(--bg3));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sage) 9%,transparent);
}
#timer-sidebar .pill.sel {
  background:var(--sage); color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--sage) 24%,transparent),inset 0 1px rgba(255,255,255,.22);
}
#timer-sidebar .task-chip {
  transition:transform .2s var(--motion-ease),background .2s,border-color .2s,color .2s;
}
#timer-sidebar .task-chip:hover { transform:translateY(-1px); }

/* The collapsed tomato is a quiet invitation, not a distracting notification. */
html.sb-hidden .sb-pill-idle .focus-tomato { animation:tomatoBreathe 4.8s ease-in-out infinite; }
@keyframes tomatoBreathe {
  0%,100% { transform:translateY(1px) scale(1); filter:drop-shadow(0 5px 9px rgba(225,64,55,.18)); }
  50% { transform:translateY(-1px) scale(1.045); filter:drop-shadow(0 7px 15px rgba(225,64,55,.32)); }
}

@media (prefers-reduced-motion:reduce) {
  html.dark .hero-sky-bg::after,
  html.sb-hidden .sb-pill-idle .focus-tomato { animation:none; }
}

/* ============================================================
   AWEN ATMOSPHERE · refined typography, surfaces and motion
   One visual voice for a study companion: soft light, calm rhythm.
============================================================ */
html { font-synthesis:none; }
body {
  font-family:'Manrope','Noto Sans SC',system-ui,sans-serif;
  font-feature-settings:'kern' 1,'liga' 1,'cv02' 1;
  letter-spacing:-.012em;
}

/* Navigation is a floating piece of glass rather than a hard dividing line. */
nav,nav.scrolled {
  border-bottom-color:color-mix(in srgb,var(--border) 58%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 84%,transparent),color-mix(in srgb,var(--bg) 72%,transparent));
  backdrop-filter:blur(24px) saturate(155%);
}
html.dark nav,html.dark nav.scrolled {
  background:linear-gradient(180deg,rgba(8,10,17,.92),rgba(4,6,11,.75));
  border-bottom-color:rgba(170,190,255,.09);
}
.nav-logo-text { letter-spacing:.015em; }
.nav-tabs {
  gap:2px; padding:3px; border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  border-radius:999px; background:color-mix(in srgb,var(--bg3) 48%,transparent);
  box-shadow:inset 0 1px rgba(255,255,255,.22); backdrop-filter:blur(14px);
}
html.dark .nav-tabs { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.08); box-shadow:inset 0 1px rgba(255,255,255,.045); }
.tab-btn { padding:7px 13px; border:0; border-radius:999px; font-family:inherit; font-size:12px; font-weight:560; }
.tab-btn.active {
  border-bottom:0; color:var(--ink); background:color-mix(in srgb,var(--bg2) 90%,transparent);
  box-shadow:0 5px 15px rgba(18,25,40,.08),inset 0 1px rgba(255,255,255,.42);
}
html.dark .tab-btn.active {
  color:#f7f8fb; background:linear-gradient(135deg,rgba(36,54,87,.82),rgba(18,25,42,.90));
  box-shadow:0 7px 20px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.08);
}
.tab-btn.active::after { display:none; }
.theme-btn,.lang-btn,.login-btn { transition:transform .28s var(--motion-ease),background .28s,border-color .28s,color .28s; }
.theme-btn:hover,.lang-btn:hover { transform:translateY(-1px) scale(1.035); }

/* The hero receives a quiet moving halo, with typography built for Chinese reading. */
#page-home.active .hero-wrap { position:relative; isolation:isolate; }
#page-home.active .hero-wrap::before {
  content:''; position:absolute; width:620px; height:400px; left:50%; top:44%; z-index:-1;
  transform:translate(-50%,-50%); pointer-events:none; border-radius:50%; filter:blur(22px);
  background:radial-gradient(ellipse,rgba(255,255,255,.32),rgba(160,193,255,.09) 44%,transparent 72%);
  animation:heroHaloFloat 12s ease-in-out infinite alternate;
}
html.dark #page-home.active .hero-wrap::before {
  background:radial-gradient(ellipse,rgba(42,75,162,.20),rgba(21,48,119,.10) 42%,transparent 74%);
}
@keyframes heroHaloFloat {
  from { transform:translate(-51%,-52%) scale(.96); opacity:.72; }
  to { transform:translate(-49%,-47%) scale(1.06); opacity:1; }
}
#page-home.active .hero-av {
  width:78px; height:78px; margin-bottom:20px;
  box-shadow:0 18px 52px rgba(12,20,45,.14),0 0 0 8px color-mix(in srgb,var(--bg2) 42%,transparent);
}
#page-home.active .hero-eyebrow {
  padding:6px 13px; color:color-mix(in srgb,var(--ink2) 84%,transparent);
  background:color-mix(in srgb,var(--bg2) 54%,transparent);
  border-color:color-mix(in srgb,var(--ink) 10%,transparent);
}
#page-home.active .hero-title {
  max-width:690px; margin-bottom:22px;
  font-family:'Noto Serif SC','Lora',serif; font-size:clamp(42px,5vw,61px);
  font-weight:500; line-height:1.13; letter-spacing:-.06em;
}
#page-home.active .hero-title em {
  display:inline-block; font-weight:500;
  background:linear-gradient(115deg,#167ef0 6%,#68aeff 48%,#2164d7 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}
html.dark #page-home.active .hero-title em {
  background:linear-gradient(115deg,#4e9dff 8%,#b9d8ff 49%,#5b91ff 97%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#page-home.active .hero-desc { max-width:490px; font-size:14px; line-height:1.9; letter-spacing:.005em; }
#page-home.active .hero-free { color:color-mix(in srgb,var(--ink3) 88%,transparent); }
#page-home.active .btn-ink,#page-home.active .btn-outline { min-height:46px; padding:11px 20px; border-radius:14px; font-weight:600; }
#page-home.active .hero-youtube { box-shadow:0 12px 30px rgba(224,29,36,.22),inset 0 1px rgba(255,255,255,.28); }
#page-home.active .hero-youtube:hover { transform:translateY(-3px) scale(1.012); }
#page-home.active .btn-outline { border-color:color-mix(in srgb,var(--ink) 13%,transparent); }

/* Sections share soft surfaces and generous vertical rhythm, rather than hard stacks. */
#page-home > .content-sec,#page-home > .home-about-section { position:relative; }
#page-home > .content-sec::before,#page-home > .home-about-section::before {
  content:''; position:absolute; top:0; left:40px; right:40px; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--border) 84%,transparent) 15% 85%,transparent);
}
#page-home > .content-sec:first-of-type::before { display:none; }
#page-home .sec-header { align-items:center; }
#page-home .sec-title { color:var(--ink2); font-size:9.5px; letter-spacing:.16em; }
#page-home .sec-more { display:inline-flex; align-items:center; gap:5px; color:var(--ink2); }
#page-home .sec-more:hover { color:var(--sage); transform:translateX(2px); }

#page-home .lab-card,#page-home .v-card {
  overflow:hidden; border-radius:18px;
  border-color:color-mix(in srgb,var(--border) 72%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--bg2) 90%,transparent),color-mix(in srgb,var(--bg3) 34%,transparent));
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 8px 24px rgba(14,22,42,.035);
}
html.dark #page-home .lab-card,html.dark #page-home .v-card {
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(33,38,52,.78),rgba(16,19,29,.78));
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 30px rgba(0,0,0,.16);
}
#page-home .lab-card::before,#page-home .v-card::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--card-mx,50%) var(--card-my,0%),rgba(111,177,255,.18),transparent 58%);
  transition:opacity .35s ease;
}
#page-home .lab-card:hover::before,#page-home .v-card:hover::before { opacity:1; }
#page-home .lab-card:hover,#page-home .v-card:hover {
  transform:translateY(-5px) scale(1.008); border-color:color-mix(in srgb,var(--sage) 35%,var(--border));
  box-shadow:0 22px 52px rgba(12,24,54,.14),inset 0 1px rgba(255,255,255,.28);
}
#page-home .lab-name { font-size:15px; font-weight:650; letter-spacing:-.025em; }
#page-home .lab-desc { line-height:1.8; }
#page-home .v-thumb { border-bottom-color:color-mix(in srgb,var(--border) 58%,transparent); }
#page-home .v-info { padding:15px 16px 16px; }
#page-home .v-title { font-weight:620; letter-spacing:-.02em; }

/* The Focus dock gains depth through light and spacing, not through extra borders. */
@media (min-width:1180px) {
  #timer-sidebar {
    width:396px; top:66px; height:calc(100dvh - 66px);
    background:linear-gradient(155deg,color-mix(in srgb,var(--bg2) 94%,transparent),color-mix(in srgb,var(--bg) 82%,transparent)) !important;
    box-shadow:-28px 34px 90px rgba(9,18,42,.17),inset 0 1px rgba(255,255,255,.18);
  }
  html.dark #timer-sidebar {
    background:linear-gradient(155deg,rgba(21,25,37,.96),rgba(8,10,16,.98)) !important;
    box-shadow:-30px 36px 100px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.055);
  }
  .sb-header { padding:16px 20px 12px; }
  #timer-sidebar .focus-shell { padding:7px 18px 20px; }
  #timer-sidebar .focus-card { padding:16px 4px 14px; }
  #timer-sidebar .garden-section,#timer-sidebar .sb-data-section { margin-left:18px; margin-right:18px; }
  html:not(.sb-hidden) .music-fab,html:not(.sb-hidden) .music-panel { right:420px; }
}
#timer-sidebar .tt-inline-card { border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--bg2) 46%,transparent),color-mix(in srgb,var(--bg3) 58%,transparent)); }
#timer-sidebar .pills { border-radius:14px; padding:4px; }
#timer-sidebar .pill { border-radius:10px; }
#timer-sidebar .start-btn { min-height:50px; border-radius:15px; }
#timer-sidebar .focus-progress-toggle { border-radius:16px; }

@media (max-width:660px) {
  #page-home.active .hero-title { font-size:clamp(35px,10vw,45px); letter-spacing:-.065em; }
  #page-home.active .hero-wrap::before { width:430px; height:310px; }
  #page-home > .content-sec::before,#page-home > .home-about-section::before { left:20px; right:20px; }
  #page-home .lab-card,#page-home .v-card { border-radius:16px; }
}
@media (prefers-reduced-motion:reduce) {
  #page-home.active .hero-wrap::before { animation:none; }
}

/* ============================================================
   ABOUT · a concise personal note, not a second navigation page
============================================================ */
.about-shell { max-width:840px; padding:86px 52px 94px; }
.about-hero {
  align-items:center; gap:24px; margin-bottom:34px; padding:0 0 30px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}
.about-big-av {
  width:112px; height:112px; border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);
  box-shadow:0 18px 48px rgba(9,17,36,.15),0 0 0 7px color-mix(in srgb,var(--bg2) 45%,transparent);
}
.about-identity { display:flex; flex-direction:column; align-items:flex-start; }
.about-name {
  margin:0 0 5px; font-family:'Noto Serif SC','Lora',serif; font-size:40px;
  font-weight:500; line-height:1; letter-spacing:-.055em;
}
.about-channel {
  display:inline-flex; align-items:center; gap:6px; margin-bottom:11px; color:var(--ink2);
  font-family:'Manrope','Noto Sans SC',sans-serif; font-size:13px; font-weight:600;
  text-decoration:none; transition:color .22s ease,transform .22s var(--motion-ease);
}
.about-channel .lc { width:15px; height:15px; color:#ff3b30; }
.about-channel .about-channel-arrow { width:12px; height:12px; color:var(--ink3); transition:transform .22s var(--motion-ease),color .22s; }
.about-channel:hover { color:var(--ink); transform:translateX(2px); }
.about-channel:hover .about-channel-arrow { color:var(--sage); transform:translate(1px,-1px); }
.about-role { margin:0; color:var(--ink3); font-size:12px; letter-spacing:.01em; }
.about-bio {
  max-width:650px; margin:0 0 42px; color:var(--ink2); font-size:18px; line-height:1.92;
  letter-spacing:-.024em;
}
.about-bio p { margin:0; }
.about-section { margin:0 0 30px; }
.about-section-title { margin-bottom:13px; font-size:9px; font-weight:650; letter-spacing:.17em; }
.about-chips { gap:8px; }
.about-chip {
  padding:7px 11px; border:1px solid color-mix(in srgb,var(--border) 68%,transparent); border-radius:999px;
  background:color-mix(in srgb,var(--bg3) 54%,transparent); font-family:inherit; font-size:12px;
  transition:transform .25s var(--motion-ease),background .25s,border-color .25s,color .25s;
}
.about-chip:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--sage) 10%,var(--bg2)); border-color:color-mix(in srgb,var(--sage) 35%,var(--border)); color:var(--ink); }
.about-schedule-section {
  max-width:360px; padding:18px 20px 17px; border:1px solid color-mix(in srgb,var(--border) 68%,transparent);
  border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--bg2) 72%,transparent),color-mix(in srgb,var(--bg3) 42%,transparent));
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 10px 28px rgba(13,20,38,.04);
}
.about-schedule-section .about-section-title { margin-bottom:12px; }
.about-schedule { gap:8px; }
.about-sched-row { gap:16px; }
.about-sched-day { min-width:74px; color:var(--ink3); font-size:12px; }
.about-sched-time { font-family:'Manrope',sans-serif; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.about-sched-note { margin-top:2px; font-size:10px; }
html.dark .about-schedule-section { border-color:rgba(255,255,255,.09); background:linear-gradient(145deg,rgba(32,37,52,.68),rgba(13,16,25,.76)); box-shadow:inset 0 1px rgba(255,255,255,.045),0 16px 36px rgba(0,0,0,.18); }
@media (max-width:660px) {
  .about-shell { padding:54px 22px 66px; }
  .about-hero { gap:16px; padding-bottom:24px; }
  .about-big-av { width:80px; height:80px; box-shadow:0 12px 32px rgba(9,17,36,.13),0 0 0 5px color-mix(in srgb,var(--bg2) 45%,transparent); }
  .about-name { font-size:32px; }
  .about-role { font-size:11px; }
  .about-bio { margin-bottom:34px; font-size:16px; line-height:1.86; }
  .about-schedule-section { max-width:none; }
}

/* Restore the fuller original About page, with the schedule intentionally removed. */
.about-shell { max-width:760px; padding:72px 44px 56px; }
.about-hero {
  display:flex; align-items:center; gap:22px; margin-bottom:36px; padding-bottom:28px;
  border-bottom:1px solid var(--border);
}
.about-big-av { width:88px; height:88px; border:1px solid var(--border); box-shadow:none; }
.about-name { font-family:'Lora','Noto Serif SC',serif; font-size:32px; font-weight:500; letter-spacing:-.04em; line-height:normal; }
.about-handle.about-channel {
  display:inline-flex; align-items:center; gap:5px; margin-bottom:11px; color:var(--ink3);
  font-family:inherit; font-size:13px; font-weight:400; letter-spacing:.3px;
}
.about-handle.about-channel .lc { width:14px; height:14px; color:#ff3b30; }
.about-handle.about-channel .about-channel-arrow { width:11px; height:11px; color:var(--ink3); }
.about-handle.about-channel:hover { color:var(--ink); transform:translateX(2px); }
.about-tags { display:flex; gap:7px; flex-wrap:wrap; }
.a-tag { padding:4px 9px; border:0; border-radius:7px; background:var(--bg3); }
.about-bio { max-width:680px; margin-bottom:30px; font-size:15px; line-height:1.85; letter-spacing:normal; }
.about-bio p { margin-bottom:13px; }
.about-section { margin-bottom:28px; }
.about-section-title { margin-bottom:12px; font-size:10px; font-weight:400; letter-spacing:2px; }
.about-chips { gap:8px; }
.about-chip { padding:4px 9px; border:0; border-radius:7px; background:var(--bg3); font-size:13px; }
.about-motto { padding:18px 0; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.a-link { padding:8px 12px; border-width:1px; border-radius:9px; }
.a-link:hover { transform:none; background:var(--bg3); border-color:var(--border); color:var(--ink); }
@media (max-width:660px) {
  .about-shell { padding:54px 22px 66px; }
  .about-hero { flex-direction:column; align-items:flex-start; text-align:left; gap:16px; padding-bottom:24px; }
  .about-big-av { width:80px; height:80px; }
  .about-name { font-size:32px; }
  .about-tags,.about-links { justify-content:flex-start; }
  .about-bio { margin-bottom:30px; font-size:15px; }
}

/* ============================================================
   TYPE & MOTION · bilingual, editorial, quietly alive
============================================================ */
:root {
  --font-ui:'Manrope','Noto Sans SC',system-ui,sans-serif;
  --font-cn-serif:'Noto Serif SC','Songti SC','STSong',serif;
  --font-en-serif:'Cormorant Garamond','Lora',Georgia,serif;
}
html[lang|="zh"] body { font-family:'Noto Sans SC','PingFang SC','Manrope',system-ui,sans-serif; letter-spacing:.006em; }
html[lang|="en"] body { font-family:var(--font-ui); letter-spacing:-.012em; }

/* Titles deliberately change voice with the language, while UI stays precise. */
html[lang|="zh"] .hero-title,
html[lang|="zh"] .journal-title,
html[lang|="zh"] .labs-title,
html[lang|="zh"] .gb-title,
html[lang|="zh"] .tech-page-hd h2,
html[lang|="zh"] .j-title,
html[lang|="zh"] .about-name,
html[lang|="zh"] .about-motto-text { font-family:var(--font-cn-serif); font-weight:500; }
html[lang|="en"] .hero-title,
html[lang|="en"] .journal-title,
html[lang|="en"] .labs-title,
html[lang|="en"] .gb-title,
html[lang|="en"] .tech-page-hd h2,
html[lang|="en"] .j-title,
html[lang|="en"] .about-name,
html[lang|="en"] .about-motto-text { font-family:var(--font-en-serif); font-weight:600; letter-spacing:-.045em; }
html[lang|="en"] #page-home.active .hero-title { font-size:clamp(50px,5.6vw,72px); line-height:.98; letter-spacing:-.055em; }
html[lang|="zh"] #page-home.active .hero-title { letter-spacing:-.07em; line-height:1.16; }

.tab-btn,.theme-btn,.lang-btn,.login-btn,.btn-ink,.btn-outline,.start-btn,
.task-chip,.pill,.a-link,.lab-cta,.sec-title,.about-section-title { font-family:var(--font-ui); }
html[lang|="zh"] .hero-eyebrow,html[lang|="zh"] .sec-title,html[lang|="zh"] .about-section-title { letter-spacing:.13em; }
html[lang|="en"] .hero-eyebrow,html[lang|="en"] .sec-title,html[lang|="en"] .about-section-title { letter-spacing:.17em; }

/* A narrow tonal transition makes page changes feel intentional. */
.page.page-entering::before {
  content:''; position:fixed; inset:58px 0 auto; height:1px; z-index:130; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--sage) 20%,transparent) 35%,color-mix(in srgb,var(--sage) 55%,transparent) 50%,color-mix(in srgb,var(--sage) 20%,transparent) 65%,transparent 100%);
  animation:pageLightSweep var(--motion-standard) var(--motion-enter) both;
}
@keyframes pageLightSweep {
  from { opacity:0; transform:scaleX(.28); }
  45% { opacity:.7; transform:scaleX(1); }
  to { opacity:0; transform:scaleX(.82); }
}

/* The hero's key phrase catches light slowly rather than flashing. */
#page-home.active .hero-title em {
  background-size:180% 100%;
  animation:heroWordShimmer 7s ease-in-out infinite;
}
@keyframes heroWordShimmer {
  0%,100% { background-position:0% 50%; filter:brightness(1); }
  50% { background-position:100% 50%; filter:brightness(1.12); }
}

/* Labels and cards answer the pointer with a small, coherent depth cue. */
.a-tag,.about-chip,.lab-tag,.lab-badge {
  transition:transform .28s var(--motion-ease),background .28s,border-color .28s,color .28s,box-shadow .28s;
}
.a-tag:hover,.lab-tag:hover { transform:translateY(-1px); }
.about-big-av { transition:transform .6s var(--motion-ease),box-shadow .6s var(--motion-ease); }
.about-big-av:hover { transform:translateY(-4px) rotate(1.5deg); box-shadow:0 18px 42px rgba(9,17,36,.16); }
#page-home .lab-card,#page-home .v-card,.j-card,.tech-story {
  transition:transform .42s var(--motion-ease),box-shadow .42s var(--motion-ease),border-color .32s,background .32s;
}

@media (prefers-reduced-motion:reduce) {
  .page.page-entering::before,
  #page-home.active .hero-title em { animation:none; }
  .about-big-av,.a-tag,.about-chip,.lab-tag,.lab-badge,#page-home .lab-card,#page-home .v-card,.j-card,.tech-story { transition:none; }
}

/* ============================================================
   AWEN DESIGN FOUNDATION · one rhythm across every page
============================================================ */
:root {
  --font-ui:'Manrope','Noto Sans SC','PingFang SC',system-ui,sans-serif;
  --font-cn-serif:'Noto Serif SC','Songti SC','STSong',serif;
  --font-en-serif:'Cormorant Garamond','Lora',Georgia,serif;
  --font-display:var(--font-cn-serif);
  --type-meta:11px;
  --type-caption:12px;
  --type-body:15px;
  --type-card:16px;
  --type-heading:32px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:72px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --content-wide:1040px;
  --content-reading:680px;
  --motion-tap:140ms;
  --motion-flow:280ms;
  --motion-scene:680ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);
  --motion-enter:cubic-bezier(.16,1,.3,1);
  --motion-exit:cubic-bezier(.4,0,1,1);
}
html[lang|="en"] { --font-display:var(--font-en-serif); }
body {
  font-family:var(--font-ui);
  font-size:var(--type-body);
  line-height:1.75;
  letter-spacing:-.01em;
}
html[lang|="zh"] body { letter-spacing:.006em; }
:where(button,input,textarea,select) { font:inherit; }
:where(p,li) { color:var(--ink2); }

/* Editorial voice only belongs to names and headings; the interface stays quiet. */
:where(.hero-title,.journal-title,.labs-title,.gb-title,.tech-page-hd h2,.j-title,.about-name,.about-motto-text) {
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.04em;
}
.sec-title,.about-section-title,.step-label,.quick-pick-label,.dur-label {
  font-size:var(--type-meta);
  font-weight:650;
  line-height:1.35;
  letter-spacing:.14em;
}
.hero-desc,.about-bio,.journal-intro,.gb-intro,.labs-intro { font-size:var(--type-body); line-height:1.82; }
.lab-name,.v-title,.j-title { font-size:var(--type-card); line-height:1.35; }

/* Every page uses the same reading width and vertical pace. */
.content-sec { max-width:var(--content-wide); padding:var(--space-8) 44px; }
.journal-shell,.about-shell,.gb-shell { max-width:var(--content-reading); padding:var(--space-8) 44px 56px; }
.labs-shell { max-width:var(--content-wide); padding:var(--space-8) 44px 56px; }
.content-sec + .content-sec { margin-top:0; }

/* Controls form one tactile family, regardless of which page owns them. */
.btn-ink,.btn-outline,.start-btn,.a-link,.tab-btn,.theme-btn,.lang-btn,.login-btn,.pill,.task-chip,.about-chip,.lab-tag {
  transition:transform var(--motion-flow) var(--motion-ease),background var(--motion-flow) ease,border-color var(--motion-flow) ease,color var(--motion-tap) ease,box-shadow var(--motion-flow) ease;
}
.btn-ink:active,.btn-outline:active,.start-btn:active,.a-link:active,.pill:active,.task-chip:active,.about-chip:active { transform:scale(.975); }

@media (max-width:660px) {
  :root { --type-body:14px; --type-card:15px; --type-heading:28px; --space-7:40px; --space-8:56px; }
  .content-sec,.journal-shell,.about-shell,.gb-shell,.labs-shell { padding:var(--space-7) 20px; }
}

/* ============================================================
   PAGE COMPOSITION · clear, spacious, and visibly alive
============================================================ */
/* Home is a calm landing page: one message, then three things to explore. */
#page-home.active .hero-wrap {
  max-width:var(--content-wide);
  min-height:min(650px,calc(100svh - 56px));
  padding:clamp(76px,10vh,118px) 44px var(--space-7);
}
#page-home.active .hero-left { max-width:700px; }
#page-home.active .hero-av { width:76px; height:76px; margin-bottom:var(--space-5); }
#page-home.active .hero-eyebrow { margin-bottom:var(--space-4); }
#page-home.active .hero-title {
  max-width:720px;
  margin-bottom:var(--space-4);
  font-size:clamp(46px,5.2vw,64px);
  line-height:1.12;
}
html[lang|="en"] #page-home.active .hero-title { font-size:clamp(52px,5.6vw,70px); line-height:1.01; }
#page-home.active .hero-desc { max-width:520px; margin-bottom:var(--space-5); }
#page-home.active .hero-cta { gap:var(--space-2); }
#page-home.active .btn-ink,#page-home.active .btn-outline { min-height:48px; padding:12px 20px; }

#page-home > .content-sec,#page-home > .home-about-section { max-width:var(--content-wide); }
#page-home > .content-sec { padding-top:var(--space-7); padding-bottom:var(--space-7); }
#page-home > .home-about-section { padding:var(--space-7) 44px; }
#page-home .sec-header { margin-bottom:var(--space-5); }
#page-home .home-making-sub { margin-top:-12px !important; margin-bottom:var(--space-5) !important; }
#page-home .labs-grid { gap:var(--space-3); }
#page-home .lab-card { min-height:222px; padding:var(--space-5); border-radius:var(--radius-md); }
#page-home .lab-top { margin-bottom:var(--space-2); }
#page-home .lab-emoji { font-size:24px; }
#page-home .lab-name { font-size:17px; }
#page-home .lab-desc { font-size:13px; line-height:1.78; }
#page-home .lab-foot { padding-top:var(--space-2); }
#page-home .video-grid { gap:var(--space-3); }
#page-home .v-card { border-radius:var(--radius-md); }
#page-home .v-thumb { min-height:160px; }
#page-home .home-about-heading { max-width:620px; font-size:clamp(28px,3.2vw,38px); line-height:1.25; }
#page-home .home-about-body { max-width:620px; font-size:15px; line-height:1.9; }
.subscribe-banner { max-width:var(--content-wide); padding:0 44px var(--space-8); }
.subscribe-inner { border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); }

/* Reading pages share the same quiet editorial hierarchy. */
.journal-header,.labs-header,.gb-header { margin-bottom:var(--space-6); }
.journal-title,.labs-title,.gb-title,.tech-page-hd h2 { font-size:clamp(32px,3.4vw,42px); line-height:1.12; margin-bottom:var(--space-3); }
.journal-intro,.labs-intro,.gb-intro { max-width:560px; }
.journal-filters { margin:var(--space-5) 0 var(--space-6); gap:var(--space-3); }
.journal-search { max-width:500px; min-height:44px; border-radius:var(--radius-md); }
.j-card { padding:var(--space-5) var(--space-6); border-radius:var(--radius-md); }
.j-card-top { margin-bottom:var(--space-3); }
.j-excerpt { line-height:1.86; margin-bottom:var(--space-4); }
.labs-grid { gap:var(--space-3); }
.labs-shell > .labs-grid .lab-card { border-radius:var(--radius-md); padding:var(--space-5); }
.about-hero { margin-bottom:var(--space-6); padding-bottom:var(--space-5); }
.about-bio { max-width:620px; font-size:16px; line-height:1.9; }
.about-section { margin-bottom:var(--space-6); }

/* Focus reads like a ritual: choose, commit, then let the timer live at the edge. */
#timer-sidebar .focus-card { padding-top:var(--space-4); }
#timer-sidebar .step-section { margin-bottom:var(--space-5); }
#timer-sidebar .step-section + .step-section { padding-top:var(--space-5); }
#timer-sidebar .quick-pick-label,#timer-sidebar .step-label { margin-bottom:var(--space-3); }
#timer-sidebar .task-chip { min-height:34px; }
#timer-sidebar .pills { min-height:48px; padding:4px; }
#timer-sidebar .pill { min-height:40px; font-size:12px; }
#timer-sidebar .start-btn { margin-top:var(--space-4); }
#timer-sidebar .garden-section,#timer-sidebar .sb-lb-section { padding-top:var(--space-5); padding-bottom:var(--space-5); }

/* Motion has a hierarchy: background breathes, surfaces follow the pointer,
   and navigation carries a short line of light. */
@keyframes awenSurfaceBreathe {
  0%,100% { box-shadow:inset 0 1px rgba(255,255,255,.28),0 8px 24px rgba(14,22,42,.035); }
  50% { box-shadow:inset 0 1px rgba(255,255,255,.38),0 14px 34px rgba(14,22,42,.065); }
}
#page-home .lab-card,#page-home .v-card { animation:awenSurfaceBreathe 8s ease-in-out infinite; }
#page-home .lab-card:nth-child(2),#page-home .v-card:nth-child(2) { animation-delay:-2.7s; }
#page-home .lab-card:nth-child(3) { animation-delay:-5.2s; }
.j-card,.labs-shell > .labs-grid .lab-card,.about-chip {
  transition:transform var(--motion-flow) var(--motion-ease),box-shadow var(--motion-flow) var(--motion-ease),border-color var(--motion-flow) ease,background var(--motion-flow) ease;
}
.j-card:hover,.labs-shell > .labs-grid .lab-card:hover { transform:translateY(-4px); }
.j-card:active,.labs-shell > .labs-grid .lab-card:active { transform:translateY(-1px) scale(.995); }

@media (max-width:660px) {
  #page-home.active .hero-wrap { min-height:auto; padding:68px 20px var(--space-7); }
  #page-home.active .hero-title,html[lang|="en"] #page-home.active .hero-title { font-size:clamp(38px,10.6vw,48px); }
  #page-home.active .hero-desc { max-width:410px; }
  #page-home > .home-about-section { padding:var(--space-7) 20px; }
  #page-home .lab-card { min-height:0; padding:20px; }
  #page-home .v-thumb { min-height:142px; }
  .subscribe-banner { padding:0 20px var(--space-7); }
  .subscribe-inner { padding:20px; }
  .j-card { padding:20px; }
  .about-bio { font-size:15px; }
}

/* ============================================================
   FLUID MOTION LANGUAGE · Mobbin patterns × Motion Sites energy
   Calm ambient movement, spatial transitions, precise feedback.
============================================================ */
:root {
  --motion-instant:120ms;
  --motion-response:220ms;
  --motion-flow:420ms;
  --motion-scene:760ms;
  --motion-spring:cubic-bezier(.16,1,.3,1);
  --motion-glide:cubic-bezier(.22,1,.36,1);
  --page-progress:0;
  --theme-x:50vw;
  --theme-y:28px;
}

/* A slim current gently connects the fixed navigation to the reading canvas. */
.awen-scroll-progress {
  position:fixed; top:57px; left:0; z-index:131; width:100%; height:1px;
  pointer-events:none; transform:scaleX(var(--page-progress)); transform-origin:left;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--sage) 42%,transparent) 12%,var(--sage) 72%,rgba(125,190,255,.9));
  box-shadow:0 0 16px color-mix(in srgb,var(--sage) 34%,transparent);
  transition:transform 80ms linear,opacity var(--motion-response) ease;
  opacity:.72;
}
html:not(.has-scrolled) .awen-scroll-progress { opacity:0; }

/* One active pill moves between destinations, creating shared continuity. */
.nav-tabs { position:relative; isolation:isolate; }
.awen-nav-pill {
  position:absolute; left:0; top:0; z-index:0; border-radius:999px;
  opacity:0; pointer-events:none;
  background:color-mix(in srgb,var(--bg2) 90%,transparent);
  box-shadow:0 7px 20px rgba(18,25,40,.09),inset 0 1px rgba(255,255,255,.45);
  transition:transform var(--motion-flow) var(--motion-spring),width var(--motion-flow) var(--motion-spring),height var(--motion-flow) var(--motion-spring),opacity var(--motion-response);
  will-change:transform,width;
}
.awen-nav-pill.is-ready { opacity:1; }
html.dark .awen-nav-pill {
  background:linear-gradient(135deg,rgba(38,58,95,.88),rgba(18,25,42,.94));
  box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.085);
}
.tab-btn.active,html.dark .tab-btn.active { background:transparent; box-shadow:none; }
.tab-btn { z-index:1; }

/* The page owns one atmospheric pointer light; it does not block interaction. */
.awen-cursor-aura {
  position:fixed; left:0; top:0; z-index:0; width:420px; height:420px; border-radius:50%;
  pointer-events:none; opacity:0; filter:blur(2px); will-change:transform;
  background:radial-gradient(circle,rgba(112,167,255,.075),rgba(92,120,255,.025) 34%,transparent 68%);
  transition:opacity .55s ease;
}
.awen-cursor-aura.is-visible { opacity:1; }
html.light .awen-cursor-aura {
  background:radial-gradient(circle,rgba(76,139,230,.065),rgba(255,190,124,.025) 40%,transparent 70%);
}

/* Hero layers move at different speeds, creating depth without busy particles. */
#page-home.active .hero-wrap::after {
  content:''; position:absolute; left:8%; right:8%; bottom:2%; height:44%; z-index:-1;
  pointer-events:none; border-radius:50%; filter:blur(62px); opacity:.42;
  background:conic-gradient(from 205deg at 50% 70%,transparent,rgba(61,102,214,.13),rgba(117,91,215,.07),transparent 62%);
  animation:awenAuroraFlow 18s ease-in-out infinite alternate;
}
@keyframes awenAuroraFlow {
  from { transform:translate3d(-3%,3%,0) rotate(-3deg) scale(.92); opacity:.3; }
  to { transform:translate3d(4%,-4%,0) rotate(4deg) scale(1.08); opacity:.55; }
}
#page-home.active .hero-av { animation:studyHeroIn .72s .02s var(--motion-spring) both,awenAvatarFloat 6.8s 1s ease-in-out infinite; }
@keyframes awenAvatarFloat {
  0%,100% { transform:translate3d(0,0,0) rotate(-.4deg); }
  50% { transform:translate3d(0,-5px,0) rotate(.5deg); }
}
#page-home.active .hero-title { animation:awenHeadlineIn .9s .12s var(--motion-spring) both; }
#page-home.active .hero-desc { animation:awenCopyIn .78s .26s var(--motion-spring) both; }
#page-home.active .hero-cta { animation:awenCopyIn .78s .36s var(--motion-spring) both; }
#page-home.active .hero-free { animation:awenCopyIn .72s .45s var(--motion-spring) both; }
@keyframes awenHeadlineIn {
  from { opacity:0; transform:translate3d(0,24px,0); filter:blur(9px); letter-spacing:-.075em; }
  to { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
}
@keyframes awenCopyIn {
  from { opacity:0; transform:translate3d(0,16px,0); filter:blur(5px); }
  to { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
}

/* Scroll reveals share distance and timing, then release their compositor layer. */
html.motion-ready .awen-reveal {
  opacity:0 !important;
  transform:translate3d(0,28px,0) scale(.985) !important;
  filter:blur(8px) !important;
  transition:
    opacity var(--motion-scene) var(--motion-spring) var(--reveal-delay,0ms),
    transform var(--motion-scene) var(--motion-spring) var(--reveal-delay,0ms),
    filter calc(var(--motion-scene) - 80ms) var(--motion-glide) var(--reveal-delay,0ms) !important;
  will-change:opacity,transform,filter;
}
html.motion-ready .awen-reveal.is-visible {
  opacity:1 !important; transform:translate3d(0,0,0) scale(1) !important; filter:blur(0) !important;
}

/* Page changes crossfade through depth instead of cutting between documents. */
.page.page-exiting { animation:awenFluidExit 190ms cubic-bezier(.55,0,1,.45) both; }
.page.page-entering { animation:awenFluidEnter 560ms var(--motion-spring) both; transform-origin:50% 16%; }
@keyframes awenFluidExit { to { opacity:0; transform:translate3d(0,-10px,0) scale(.992); filter:blur(5px); } }
@keyframes awenFluidEnter {
  from { opacity:0; transform:translate3d(0,18px,0) scale(.992); filter:blur(7px); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}
.page.page-entering::before { height:2px; animation-duration:560ms; filter:blur(.2px); }

/* Cards feel connected to the pointer by light and a very small spatial tilt. */
.motion-card {
  transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform var(--motion-flow) var(--motion-glide),box-shadow var(--motion-flow) ease,border-color var(--motion-flow) ease,background var(--motion-flow) ease !important;
}
.motion-card:hover { transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translate3d(0,-5px,8px); }
.motion-card::after { opacity:.16; transition:opacity var(--motion-flow) ease; }
.motion-card:hover::after { opacity:1; }
#page-home .lab-card,#page-home .v-card { animation:none; }
#page-home .lab-card:hover,#page-home .v-card:hover { box-shadow:0 26px 70px rgba(12,20,38,.14),inset 0 1px rgba(255,255,255,.32); }
html.dark #page-home .lab-card:hover,html.dark #page-home .v-card:hover { box-shadow:0 28px 76px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.07); }

/* Primary actions subtly lean into the pointer while remaining readable. */
.btn-ink,.btn-outline,.start-btn.go { transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0); }
.btn-ink:hover,.btn-outline:hover,.start-btn.go:hover { transform:translate3d(var(--mag-x,0px),calc(var(--mag-y,0px) - 2px),0) scale(1.012); }
.btn-ink::after,.btn-outline::after,.start-btn.go::after {
  background:radial-gradient(150px circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.26),transparent 62%);
  transition:opacity var(--motion-response) ease;
}

/* Focus morph is the strongest spatial transition: tomato → workspace → tomato. */
@media (min-width:1180px) {
  #timer-sidebar {
    transform-origin:calc(100% - 36px) 30px;
    transition:transform 620ms var(--motion-spring),opacity 240ms ease,clip-path 620ms var(--motion-spring),border-radius 620ms var(--motion-spring),visibility 0s !important;
    clip-path:inset(0 0 0 0 round 24px 0 0 0);
  }
  html.sb-hidden #timer-sidebar {
    transform:translate3d(10px,-3px,0) scale(.115);
    clip-path:inset(0 0 82% 75% round 28px);
    transition:transform 430ms cubic-bezier(.55,0,1,.45),opacity 190ms ease,clip-path 430ms cubic-bezier(.55,0,1,.45),border-radius 430ms ease,visibility 0s 430ms !important;
  }
  html:not(.sb-hidden) #timer-sidebar { animation:awenFocusMorph 660ms var(--motion-spring) both; }
  @keyframes awenFocusMorph {
    0% { opacity:0; transform:translate3d(8px,-2px,0) scale(.12); clip-path:inset(0 0 82% 75% round 28px); }
    58% { opacity:1; transform:translate3d(-3px,1px,0) scale(1.008); clip-path:inset(0 0 0 0 round 25px 0 0 0); }
    100% { opacity:1; transform:translate3d(0,0,0) scale(1); clip-path:inset(0 0 0 0 round 24px 0 0 0); }
  }
  html.sb-hidden .sb-show-handle { animation:awenTomatoReturn 520ms var(--motion-spring) both; }
  @keyframes awenTomatoReturn {
    0% { opacity:0; transform:scale(.45) rotate(-18deg); filter:blur(5px); }
    68% { opacity:1; transform:scale(1.08) rotate(3deg); filter:blur(0); }
    100% { opacity:1; transform:scale(1) rotate(0); }
  }
}

/* Expandable focus content flows open instead of appearing in a hard jump. */
.more-settings-body,.focus-progress-details:not([hidden]) { animation:awenDisclosureIn 420ms var(--motion-spring) both; transform-origin:top; }
@keyframes awenDisclosureIn {
  from { opacity:0; transform:translate3d(0,-8px,0) scaleY(.94); filter:blur(3px); }
  to { opacity:1; transform:translate3d(0,0,0) scaleY(1); filter:blur(0); }
}

/* Every overlay uses the same depth choreography. */
#dash-overlay.open,.login-overlay.open,#share-overlay.open { animation:awenBackdropIn 300ms ease both; }
#dash-overlay.open .dash-card,.login-overlay.open .login-modal,#share-overlay.open .share-card { animation:awenModalIn 560ms var(--motion-spring) both; }
#dash-overlay.open.is-closing,.login-overlay.open.is-closing,#share-overlay.open.is-closing { animation:awenBackdropOut 240ms ease both; pointer-events:none; }
#dash-overlay.open.is-closing .dash-card,.login-overlay.open.is-closing .login-modal,#share-overlay.open.is-closing .share-card { animation:awenModalOut 240ms cubic-bezier(.55,0,1,.45) both; }
@keyframes awenBackdropIn { from { opacity:0; backdrop-filter:blur(0); } to { opacity:1; } }
@keyframes awenBackdropOut { to { opacity:0; backdrop-filter:blur(0); } }
@keyframes awenModalIn {
  from { opacity:0; transform:translate3d(0,24px,0) scale(.94); filter:blur(8px); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}
@keyframes awenModalOut { to { opacity:0; transform:translate3d(0,12px,0) scale(.97); filter:blur(5px); } }
.garden-modal { transform:translate3d(0,18px,0) scale(.992); filter:blur(7px); }
.garden-modal.open { transform:translate3d(0,0,0) scale(1); filter:blur(0); transition:opacity 480ms ease,visibility 480ms,transform 680ms var(--motion-spring),filter 520ms ease; }

/* Light/dark mode expands from the control as a circular scene transition. */
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-new(root) { clip-path:circle(0 at var(--theme-x) var(--theme-y)); animation:awenThemeReveal 760ms var(--motion-spring) forwards; }
@keyframes awenThemeReveal { to { clip-path:circle(150vmax at var(--theme-x) var(--theme-y)); } }
html.theme-transitioning body,html.theme-transitioning .hero-sky-bg::before,html.theme-transitioning .hero-sky-bg::after { transition-duration:760ms; }

/* Touch devices keep the scene motion but avoid cursor-specific transforms. */
@media (hover:none),(pointer:coarse) {
  .awen-cursor-aura { display:none; }
  .motion-card,.motion-card:hover { transform:none; }
  .btn-ink,.btn-outline,.start-btn.go,.btn-ink:hover,.btn-outline:hover,.start-btn.go:hover { transform:none; }
}

/* ============================================================
   EDITORIAL TYPOGRAPHY SYSTEM · quiet luxury, precise hierarchy
   Display = bilingual serif. Reading and UI = one calm sans family.
============================================================ */
:root {
  --font-ui:'Manrope','Noto Sans SC','PingFang SC','Hiragino Sans GB',system-ui,sans-serif;
  --font-cn-display:'Noto Serif SC','Songti SC','STSong',serif;
  --font-en-display:'Cormorant Garamond','Lora',Georgia,serif;
  --font-signature:'Allura',cursive;
  --font-numeric:'Manrope','SF Pro Display',system-ui,sans-serif;
  --type-kicker:10px;
  --type-meta:11px;
  --type-caption:12px;
  --type-small:13px;
  --type-body:15px;
  --type-body-large:16px;
  --type-card-title:17px;
  --type-section:36px;
  --tracking-kicker:.155em;
  --reading-leading:1.9;
}

html { font-size:16px; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--font-ui);
  font-size:var(--type-body);
  font-weight:400;
  line-height:1.72;
  letter-spacing:-.012em;
  font-feature-settings:'kern' 1,'liga' 1,'tnum' 0;
}
html[lang|="zh"] body { letter-spacing:.006em; }
button,input,textarea,select { font-family:var(--font-ui); letter-spacing:inherit; }
strong,b { font-weight:650; }
p { text-wrap:pretty; }

/* Three roles only: editorial display, interface sans, signature accent. */
.hero-title,.journal-title,.labs-title,.gb-title,.tech-page-hd h2,
.home-about-heading,.j-title,.journal-cta-title,.about-motto-text {
  font-family:var(--font-cn-display);
  font-weight:500;
  font-synthesis:none;
}
html[lang|="en"] .hero-title,
html[lang|="en"] .journal-title,
html[lang|="en"] .labs-title,
html[lang|="en"] .gb-title,
html[lang|="en"] .tech-page-hd h2,
html[lang|="en"] .home-about-heading,
html[lang|="en"] .j-title,
html[lang|="en"] .journal-cta-title,
html[lang|="en"] .about-motto-text {
  font-family:var(--font-en-display);
  font-weight:600;
}
.nav-logo-text,.avatar-name,.footer-brand-name { font-family:var(--font-signature); font-weight:400; }
html[lang|="zh"] .about-name,
html[lang|="en"] .about-name { font-family:var(--font-en-display); font-weight:600; }

/* Display scale: large enough to lead, restrained enough to keep the canvas balanced. */
#page-home.active .hero-title,
html[lang|="zh"] #page-home.active .hero-title {
  max-width:760px;
  margin-bottom:20px;
  font-family:var(--font-cn-display);
  font-size:clamp(48px,5.35vw,68px);
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.065em;
  text-wrap:balance;
}
html[lang|="en"] #page-home.active .hero-title {
  max-width:750px;
  font-family:var(--font-en-display);
  font-size:clamp(54px,5.75vw,72px);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.045em;
}
#page-home.active .hero-title em {
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
}
#page-home.active .hero-desc {
  max-width:550px;
  margin-bottom:26px;
  font-size:15.5px;
  font-weight:400;
  line-height:1.88;
  letter-spacing:.006em;
  color:color-mix(in srgb,var(--ink2) 92%,transparent);
}
html[lang|="en"] #page-home.active .hero-desc { max-width:570px; line-height:1.75; letter-spacing:-.012em; }
#page-home.active .hero-eyebrow {
  font-family:var(--font-ui);
  font-size:var(--type-kicker);
  font-weight:650;
  line-height:1.4;
  letter-spacing:.17em;
  text-transform:uppercase;
}
#page-home.active .hero-free {
  font-family:var(--font-ui);
  font-size:10.5px !important;
  font-weight:550;
  line-height:1.5;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#page-home.active .hero-live { font-size:12.5px; font-weight:550; letter-spacing:.005em; }

/* Navigation and actions use a compact, high-signal UI voice. */
.nav-logo-text { font-size:27px; line-height:1; letter-spacing:.005em; }
.tab-btn {
  font-size:12.5px;
  font-weight:560;
  line-height:1.2;
  letter-spacing:-.018em;
}
.theme-btn,.lang-btn,.login-btn { font-size:12px; font-weight:600; letter-spacing:-.01em; }
.btn-ink,.btn-outline,.start-btn,.a-link,.subscribe-btn,.gb-post-btn,.login-submit {
  font-size:13px;
  font-weight:650;
  line-height:1.25;
  letter-spacing:-.012em;
}

/* Section rhythm: quiet labels, editorial headings, readable copy. */
.sec-title,.about-section-title,.quick-pick-label,.step-label,.dur-label,
.quote-eyebrow,.task-stats-title,.heatmap-title,.focus-progress-eyebrow {
  font-family:var(--font-ui);
  font-size:var(--type-kicker);
  font-weight:650;
  line-height:1.4;
  letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;
}
html[lang|="zh"] .sec-title,
html[lang|="zh"] .about-section-title,
html[lang|="zh"] .quick-pick-label,
html[lang|="zh"] .step-label,
html[lang|="zh"] .dur-label { letter-spacing:.13em; }
.sec-more,.lab-cta,.j-read-more { font-size:12px; font-weight:600; letter-spacing:-.005em; }
.home-making-sub,.v-meta,.j-date,.about-handle,.avatar-sub { font-size:12px; line-height:1.55; letter-spacing:.025em; }

.journal-title,.labs-title,.gb-title,.tech-page-hd h2 {
  max-width:720px;
  margin-bottom:14px;
  font-size:clamp(38px,4vw,48px);
  line-height:1.12;
  letter-spacing:-.055em;
  text-wrap:balance;
}
html[lang|="en"] .journal-title,
html[lang|="en"] .labs-title,
html[lang|="en"] .gb-title,
html[lang|="en"] .tech-page-hd h2 {
  font-size:clamp(42px,4.35vw,52px);
  line-height:1;
  letter-spacing:-.035em;
}
.journal-title em,.labs-title em,.gb-title em { font-family:inherit; font-weight:inherit; }
.journal-intro,.labs-intro,.gb-intro {
  max-width:610px;
  font-size:15px;
  line-height:1.9;
  letter-spacing:.006em;
}
html[lang|="en"] .journal-intro,
html[lang|="en"] .labs-intro,
html[lang|="en"] .gb-intro { line-height:1.78; letter-spacing:-.01em; }

/* Homepage story and product cards. */
#page-home .home-about-heading {
  max-width:680px;
  font-size:clamp(30px,3.35vw,40px);
  line-height:1.28;
  letter-spacing:-.05em;
}
html[lang|="en"] #page-home .home-about-heading { font-size:clamp(34px,3.65vw,44px); line-height:1.05; letter-spacing:-.032em; }
#page-home .home-about-body {
  max-width:650px;
  font-size:15.5px;
  line-height:2;
  letter-spacing:.008em;
}
#page-home .home-about-body p + p { margin-top:18px; }
.lab-name {
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:650;
  line-height:1.35;
  letter-spacing:-.026em;
}
.lab-desc { font-size:13.5px; font-weight:400; line-height:1.82; letter-spacing:.002em; }
.lab-tag,.lab-badge,.a-tag,.about-chip { font-size:11.5px; font-weight:550; line-height:1.3; letter-spacing:-.005em; }
.v-title { font-size:14px; font-weight:650; line-height:1.48; letter-spacing:-.02em; }
.v-meta { color:var(--ink3); }

/* Journal and long-form reading get the widest leading and narrowest measure. */
.journal-shell,.about-shell,.gb-shell { max-width:730px; }
.j-title {
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.045em;
}
html[lang|="en"] .j-title { font-size:27px; line-height:1.1; letter-spacing:-.025em; }
.j-excerpt { font-size:14.5px; line-height:1.9; letter-spacing:.006em; }
.j-full { max-width:650px; }
.j-full p {
  font-size:15.5px;
  line-height:2;
  letter-spacing:.012em;
  margin-bottom:1.15em;
}
html[lang|="en"] .j-full p { line-height:1.85; letter-spacing:-.006em; }
.journal-cta-title { font-size:23px; line-height:1.35; letter-spacing:-.035em; }
.journal-cta-sub { font-size:14px; line-height:1.8; }

/* About page reads like a short editorial profile. */
.about-name {
  margin-bottom:3px;
  font-size:48px;
  line-height:.95;
  letter-spacing:-.045em;
}
.about-bio {
  max-width:650px;
  font-size:15.5px;
  line-height:2;
  letter-spacing:.009em;
}
.about-bio p { margin-bottom:18px; }
html[lang|="en"] .about-bio { line-height:1.84; letter-spacing:-.008em; }
.about-motto-text {
  font-size:clamp(22px,2.8vw,30px);
  line-height:1.62;
  letter-spacing:-.045em;
}
html[lang|="en"] .about-motto-text { font-size:clamp(25px,3vw,33px); line-height:1.22; letter-spacing:-.025em; }
.about-motto-attr { font-size:12px; font-weight:600; letter-spacing:.06em; }

/* Focus workspace: numbers are precise, labels are quiet, choices stay legible. */
#timer-sidebar,#timer-sidebar button,#timer-sidebar input { font-family:var(--font-ui); }
#timer-sidebar .tt-inline-title { font-size:16px; font-weight:650; line-height:1.3; letter-spacing:-.028em; }
#timer-sidebar .tt-ic-text,#timer-sidebar .tt-ic-input { font-size:13.5px; font-weight:560; line-height:1.48; letter-spacing:-.012em; }
#timer-sidebar .task-chip { font-size:11px; font-weight:550; line-height:1.25; }
#timer-sidebar .pill { font-size:11px; font-weight:560; font-variant-numeric:tabular-nums; letter-spacing:-.015em; }
#timer-sidebar .start-btn { font-size:12.5px; font-weight:700; letter-spacing:.005em; }
#timer-sidebar .f-task { font-family:var(--font-ui); font-size:14px; font-weight:560; font-style:normal; letter-spacing:-.015em; }
#timer-sidebar .ring-time,#timer-sidebar .brk-time,#timer-sidebar .cdown-n,
.sb-pill-time,.sb-today-num,.task-stat-time,.dash-cell-n,.dash-ring-c b,.sc-mins,.sc-stat-n {
  font-family:var(--font-numeric);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1,'kern' 1;
}
#timer-sidebar .ring-time { font-size:42px; font-weight:500; line-height:1; letter-spacing:-.045em; }
#timer-sidebar .ring-status { font-size:9.5px; font-weight:650; letter-spacing:.15em; }
#timer-sidebar .brk-time { font-size:48px; font-weight:500; letter-spacing:-.05em; }
#timer-sidebar .cdown-n { font-size:92px; font-weight:400; letter-spacing:-.065em; }
#timer-sidebar .fin-h { font-family:var(--font-cn-display); font-size:27px; font-weight:500; line-height:1.25; letter-spacing:-.04em; }
html[lang|="en"] #timer-sidebar .fin-h { font-family:var(--font-en-display); font-size:31px; font-weight:600; }
#timer-sidebar .fin-msg,#timer-sidebar .brk-note { font-size:12.5px; line-height:1.75; }
#timer-sidebar .focus-progress-toggle-copy strong { font-size:11.5px; font-weight:650; }
#timer-sidebar .focus-progress-toggle-copy small { font-size:9.5px; line-height:1.5; }
#timer-sidebar .sb-data-btn-text,#timer-sidebar .garden-header-left,#timer-sidebar .sb-lb-title { font-size:11px; font-weight:600; letter-spacing:-.005em; }

/* Data, sign-in, guestbook and sharing use the same product typography. */
.dash-h,.login-title {
  font-family:var(--font-ui);
  font-size:22px;
  font-weight:650;
  line-height:1.25;
  letter-spacing:-.035em;
}
.dash-sub,.login-subtitle,.login-cloud-status { font-size:12px; line-height:1.65; letter-spacing:0; }
.dash-tab-btn,.dash-range-btn { font-size:12px; font-weight:600; letter-spacing:-.012em; }
.dash-cell-n { font-size:23px; font-weight:650; letter-spacing:-.045em; }
.dash-cell-l,.dash-bar-x,.dash-hour-x { font-weight:500; letter-spacing:.01em; }
.dash-sec-title { font-size:12px; font-weight:650; letter-spacing:-.01em; }
.login-method-btn .lm-name { font-size:14px; font-weight:650; letter-spacing:-.015em; }
.login-method-btn .lm-desc { font-size:11.5px; line-height:1.55; }
.gb-textarea,.gb-name-input,.gb-mini-input,.gb-mini-name { font-family:var(--font-ui); font-size:14px; line-height:1.75; }
.gb-msg-name { font-size:13px; font-weight:650; }
.gb-msg-time { font-size:11px; font-weight:500; letter-spacing:.015em; }
.share-card { font-family:var(--font-ui); }
.sc-mins { font-size:50px; font-weight:600; letter-spacing:-.06em; }
.sc-stat-n { font-size:22px; font-weight:650; letter-spacing:-.04em; }
.sc-label,.sc-stat-l,.sc-brand,.sc-share-cap { letter-spacing:.01em; }

/* Footer keeps the brand signature while the information stays functional. */
.footer-brand-name { font-size:28px; line-height:1; }
.footer-desc { font-size:13px; line-height:1.8; }
.footer-col-label { font-size:10.5px; font-weight:650; letter-spacing:.13em; text-transform:uppercase; }
.footer-col a { font-size:13px; line-height:1.6; }
.footer-copy { font-size:11.5px; letter-spacing:.01em; }

@media (max-width:660px) {
  :root { --type-body:14px; --type-body-large:15px; }
  .nav-tabs {
    width:100%;
    max-width:100%;
    gap:1px;
    padding:3px;
    justify-content:space-between;
  }
  .tab-btn {
    min-height:36px;
    padding:7px 9px;
    font-size:11.5px;
    letter-spacing:-.025em;
  }
  #page-home.active .hero-title,
  html[lang|="zh"] #page-home.active .hero-title {
    font-size:clamp(39px,10.7vw,47px);
    line-height:1.18;
    letter-spacing:-.06em;
  }
  html[lang|="en"] #page-home.active .hero-title {
    font-size:clamp(43px,11.5vw,52px);
    line-height:.99;
    letter-spacing:-.04em;
  }
  #page-home.active .hero-desc { font-size:14.5px; line-height:1.82; }
  .journal-title,.labs-title,.gb-title,.tech-page-hd h2,
  html[lang|="en"] .journal-title,html[lang|="en"] .labs-title,html[lang|="en"] .gb-title {
    font-size:clamp(34px,9.4vw,42px);
  }
  .journal-intro,.labs-intro,.gb-intro,.about-bio { font-size:14.5px; }
  .j-title { font-size:22px; }
  html[lang|="en"] .j-title { font-size:25px; }
  .j-full p { font-size:15px; }
  .about-name { font-size:43px; }
  .about-motto-text { font-size:22px; }
  .nav-logo-text { font-size:24px; }
}

/* ============================================================
   ABOUT · editorial profile v3 — magazine-grade typography
   System: Cormorant Garamond display (italic voice) ·
   Manrope small-caps labels · Noto Serif SC for ZH ·
   drop cap, hairlines, numbered sections, ornament rules.
============================================================ */
.about-shell { max-width:680px; padding:104px 44px 96px; }

/* ── Masthead: the running head of a magazine page ── */
.about-masthead { display:flex; align-items:center; gap:16px; margin-bottom:72px; }
.about-mast-rule { flex:1; height:1px; background:color-mix(in srgb,var(--border) 70%,transparent); }
.about-mast-label {
  font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink3); white-space:nowrap;
}

/* ── Hero: centered, cover-like ── */
.about-hero {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0; margin:0 0 64px; padding:0; border-bottom:0;
}
.about-av-frame { position:relative; flex-shrink:0; width:140px; aspect-ratio:4/5; margin-bottom:32px; }
.about-av-frame::after {  /* thin offset editorial frame */
  content:''; position:absolute; inset:-7px; border-radius:18px;
  border:1px solid color-mix(in srgb,var(--border) 50%,transparent);
  pointer-events:none;
}
.about-big-av {
  width:100%; height:100%; margin:0; border-radius:12px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:0 22px 48px rgba(9,17,36,.14);
  background:var(--bg2);
}
html.dark .about-big-av { box-shadow:0 22px 48px rgba(0,0,0,.5); }
.about-av-status {
  position:absolute; right:-5px; bottom:-5px; z-index:1;
  width:14px; height:14px; border-radius:50%;
  background:var(--sage); border:2.5px solid var(--bg);
  animation:aboutStatusPulse 2.6s ease-in-out infinite;
}
@keyframes aboutStatusPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.16); opacity:.72; }
}
.about-name {
  margin:0 0 14px;
  font-family:'Cormorant Garamond','Noto Serif SC',serif;
  font-style:italic; font-weight:500;
  font-size:clamp(56px,7.5vw,84px); line-height:1; letter-spacing:-.01em;
  color:var(--ink); font-feature-settings:'liga' 1;
}
html[lang|="zh"] .about-name,
html[lang|="en"] .about-name {
  font-family:'Cormorant Garamond','Noto Serif SC',serif;
  font-style:italic; font-weight:500; letter-spacing:-.01em;
}
.about-role {
  margin:0 0 18px;
  font-family:var(--font-ui);
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink3);
}
.about-channel { margin:0; font-size:12.5px; letter-spacing:.04em; }

/* ── Ornamental rule ── */
.about-rule { display:flex; align-items:center; gap:18px; margin:0 auto 56px; max-width:420px; }
.about-rule span { flex:1; height:1px; background:color-mix(in srgb,var(--border) 60%,transparent); }
.about-rule i { font-style:normal; font-size:11px; color:var(--ink3); }

/* ── Bio: drop cap, open leading, oldstyle numerals ── */
.about-bio {
  max-width:620px; margin:0 0 64px;
  font-size:17px; line-height:1.9; color:var(--ink2);
  letter-spacing:.003em; font-variant-numeric:oldstyle-nums;
}
html[lang|="en"] .about-bio { line-height:1.86; letter-spacing:-.006em; }
.about-bio p { margin:0 0 20px; }
.about-bio .about-bio-lead { margin:0 0 20px; padding:0; font-size:17px; line-height:1.9; color:var(--ink2); letter-spacing:.003em; }
.about-bio .about-bio-lead::first-letter {
  font-family:'Cormorant Garamond','Noto Serif SC',serif; font-weight:500;
  font-size:3.3em; line-height:.82;
  float:left; padding:.06em .14em 0 0;
  color:var(--ink);
}
html[lang|="zh"] .about-bio .about-bio-lead::first-letter {
  font-family:'Noto Serif SC',serif; line-height:.9; padding-top:.08em;
}
.about-sig {
  position:relative; margin-top:36px; padding-top:18px;
  border-top:0;
  font-family:'Allura',cursive; font-size:32px; line-height:1;
  color:var(--ink); text-align:right; user-select:none;
}
.about-sig::before {
  content:''; position:absolute; top:0; right:0; width:120px; height:1px;
  background:color-mix(in srgb,var(--border) 60%,transparent);
}

/* ── Numbered section, masthead listing ── */
.about-section { margin:0 0 60px; }
.about-section-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.about-section-no {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:17px; color:color-mix(in srgb,var(--sage) 72%,var(--ink3));
}
.about-section-title {
  margin:0; font-size:10.5px; font-weight:650; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3);
}
.about-section-title::after { content:none; }
.about-section-rule { flex:1; height:1px; background:color-mix(in srgb,var(--border) 60%,transparent); }
.about-section-intro {
  margin:0 0 20px; font-size:15px; line-height:1.65; letter-spacing:.01em; color:var(--ink3);
}
html[lang|="zh"] .about-section-intro { font-family:'Noto Serif SC',serif; font-style:normal; font-weight:400; }
html[lang|="en"] .about-section-intro { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; letter-spacing:-.005em; }
.about-topics {
  margin:0; font-size:14.5px; line-height:2; letter-spacing:.01em; color:var(--ink2);
}
.about-topics span { padding-bottom:2px; border-bottom:1px solid transparent; transition:color .25s ease,border-color .25s ease; }
.about-topics span:hover { color:var(--ink); border-color:color-mix(in srgb,var(--ink) 45%,transparent); }
.about-topics span + span::before { content:'·'; margin:0 14px; color:color-mix(in srgb,var(--ink3) 80%,transparent); }

/* ── Pull quote: the magazine centerpiece ── */
.about-motto {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin:0 0 60px; padding:56px 20px 52px;
  border:0; border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  border-radius:0; background:transparent;
}
.about-motto-mark {
  height:30px; line-height:1; margin-bottom:14px;
  font-family:'Cormorant Garamond',serif; font-size:64px; font-weight:500;
  color:color-mix(in srgb,var(--sage) 45%,transparent);
  user-select:none;
}
.about-motto-text {
  max-width:560px; margin:0;
  font-size:clamp(24px,3vw,32px); line-height:1.6; letter-spacing:-.03em;
  color:var(--ink);
}
html[lang|="zh"] .about-motto-text { font-family:'Noto Serif SC',serif; font-weight:500; }
html[lang|="en"] .about-motto-text {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:clamp(27px,3.2vw,36px); line-height:1.3; letter-spacing:-.01em;
}
.about-motto-attr {
  margin-top:24px; padding-top:0; border-top:0;
  font-size:10px; font-weight:650; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink3);
}

/* ── Actions: one filled voice, one quiet text link ── */
.about-links { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.about-links .a-link-primary {
  padding:13px 26px; border-radius:999px;
  background:var(--sage); border:1px solid var(--sage); color:#fff;
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 10px 26px color-mix(in srgb,var(--sage) 26%,transparent);
}
.about-links .a-link-primary .lc { width:15px; height:15px; color:#fff; }
.about-links .a-link-primary:hover {
  transform:translateY(-2px);
  background:color-mix(in srgb,var(--sage) 88%,#000);
  border-color:transparent; color:#fff;
}
html.dark .about-links .a-link-primary:hover { background:color-mix(in srgb,var(--sage) 84%,#fff); }
.about-text-link {
  display:inline-flex; align-items:center; gap:6px;
  padding-bottom:2px;
  font-size:13px; font-weight:550; color:var(--ink2); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--ink3) 40%,transparent);
  transition:color .25s ease,border-color .25s ease;
}
.about-text-link .lc { width:13px; height:13px; color:var(--ink3); transition:transform .25s var(--motion-ease),color .25s; }
.about-text-link:hover { color:var(--ink); border-color:var(--ink); }
.about-text-link:hover .lc { transform:translate(1px,-1px); color:var(--sage); }

/* ── Fin: closing ornament ── */
.about-fin {
  margin:56px auto 0; text-align:center;
  font-size:12px; letter-spacing:.4em; padding-left:.4em;
  color:color-mix(in srgb,var(--ink3) 70%,transparent); user-select:none;
}

@media (max-width:660px) {
  .about-shell { padding:56px 22px 64px; }
  .about-masthead { margin-bottom:48px; }
  .about-mast-label { font-size:9.5px; letter-spacing:.22em; }
  .about-hero { margin-bottom:52px; }
  .about-av-frame { width:116px; }
  .about-name { font-size:52px; }
  .about-role { font-size:10px; letter-spacing:.2em; }
  .about-rule { margin-bottom:44px; }
  .about-bio { font-size:15.5px; line-height:1.88; margin-bottom:52px; }
  .about-bio .about-bio-lead { font-size:15.5px; line-height:1.88; }
  .about-bio .about-bio-lead::first-letter { font-size:3em; }
  .about-section { margin-bottom:52px; }
  .about-section-intro { font-size:14px; margin-bottom:18px; }
  .about-topics { font-size:13.5px; }
  .about-topics span + span::before { margin:0 10px; }
  .about-motto { padding:44px 8px 40px; margin-bottom:52px; }
  .about-motto-mark { font-size:52px; }
  .about-links { gap:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .about-av-status { animation:none; }
}

/* ============================================================
   HOME · About preview grows a quieter editorial tone
============================================================ */
.home-about-section { padding:64px 44px; }
.home-about-heading {
  position:relative; padding-left:20px;
  font-family:var(--font-display);
  font-size:clamp(26px,3.2vw,33px); font-weight:500;
  letter-spacing:-.04em; line-height:1.35; color:var(--ink);
}
.home-about-heading::before {
  content:''; position:absolute; left:0; top:.18em; bottom:.18em;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--sage),transparent);
}
.home-about-body { font-size:14.5px; line-height:1.9; color:var(--ink2); }
.home-about-body p { margin-bottom:10px; }
.home-about-body p:last-child {
  margin-top:14px; padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);
}

/* ============================================================
   AWEN STUDY · PRODUCT HIERARCHY 2026-08
   One brand, one primary action, one quiet editorial rhythm.
   This is the canonical composition layer for navigation and Home.
============================================================ */
.focus-nav-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 14px 7px 10px;
  border:1px solid color-mix(in srgb,var(--sage) 34%,var(--border));
  border-radius:999px;
  background:color-mix(in srgb,var(--sage) 8%,var(--bg2));
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:650;
  line-height:1;
  letter-spacing:-.015em;
  cursor:pointer;
  box-shadow:inset 0 1px color-mix(in srgb,#fff 38%,transparent);
  transition:transform var(--motion-flow) var(--motion-ease),background var(--motion-flow) ease,border-color var(--motion-flow) ease,box-shadow var(--motion-flow) ease;
}
.focus-nav-action:hover,
.focus-nav-action.active {
  background:color-mix(in srgb,var(--sage) 15%,var(--bg2));
  border-color:color-mix(in srgb,var(--sage) 62%,var(--border));
  box-shadow:0 8px 24px color-mix(in srgb,var(--sage) 12%,transparent),inset 0 1px color-mix(in srgb,#fff 42%,transparent);
}
.focus-nav-action:active { transform:scale(.97); }
.focus-tomato-nav { width:20px; height:20px; filter:saturate(.92); }

@media (min-width:1180px) {
  nav .focus-nav-action.tab-focus-btn { display:inline-flex !important; }
}

#page-home.active .hero-wrap {
  min-height:min(700px,calc(100svh - 56px));
  padding-top:clamp(84px,11vh,128px);
}
#page-home.active .hero-left { max-width:760px; }
#page-home.active .hero-cta { align-items:center; }
#page-home.active .hero-focus-primary {
  background:var(--sage);
  border-color:var(--sage);
  color:#fff;
  box-shadow:0 14px 34px color-mix(in srgb,var(--sage) 25%,transparent);
}
#page-home.active .hero-focus-primary:hover {
  background:color-mix(in srgb,var(--sage) 88%,#000);
  border-color:transparent;
  box-shadow:0 18px 42px color-mix(in srgb,var(--sage) 32%,transparent);
}
#page-home.active .hero-youtube { color:var(--ink2); }
#page-home.active .hero-youtube:hover { color:var(--ink); }
#page-home.active .hero-free {
  margin-top:16px;
  font-size:11px !important;
  letter-spacing:.035em;
  text-transform:none;
  color:var(--ink3);
}

#page-home .home-making .labs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#page-home .video-grid-featured { grid-template-columns:minmax(0,1fr); }
#page-home .v-card-featured {
  display:grid;
  grid-template-columns:minmax(280px,1.45fr) minmax(220px,.75fr);
  align-items:stretch;
  overflow:hidden;
}
#page-home .v-card-featured .v-thumb { min-height:260px; border-radius:0; }
#page-home .v-card-featured .v-info {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,4vw,48px);
}
#page-home .v-card-featured .v-title {
  margin-bottom:10px;
  font-family:var(--font-display);
  font-size:clamp(25px,3vw,34px);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.045em;
}
html[lang|="en"] #page-home .v-card-featured .v-title { font-family:var(--font-en-display); font-weight:600; }
#page-home .v-card-featured .v-meta { font-size:12.5px; line-height:1.7; }

@media (max-width:920px) {
  .focus-nav-action { width:36px; min-width:36px; padding:0; }
  .focus-nav-action > span:last-child { display:none; }
  #page-home .v-card-featured { grid-template-columns:1fr; }
  #page-home .v-card-featured .v-thumb { min-height:210px; }
}

@media (max-width:660px) {
  #page-home.active .hero-wrap { min-height:auto; padding-top:68px; padding-bottom:48px; }
  #page-home .home-making .labs-grid { grid-template-columns:1fr; }
  #page-home .v-card-featured .v-info { padding:24px 20px 26px; }
  #page-home .v-card-featured .v-title { font-size:27px; }
  .focus-nav-action { order:-1; }
}

/* ============================================================
   CANONICAL VISUAL TOKENS
   Ink + moonlight blue form the brand. Red is reserved for YouTube
   and destructive feedback; surfaces stay neutral and atmospheric.
============================================================ */
:root {
  --bg:#f5f2ec;
  --bg2:#fbf9f5;
  --bg3:#ece8e1;
  --ink:#17191f;
  --ink1:#17191f;
  --ink2:#4f525b;
  --ink3:#717580;
  --sage:#356fe3;
  --sage-l:#e8eefc;
  --warm:#e83737;
  --warm-l:#fce9e8;
  --border:#d9d5ce;
  --shadow:rgba(23,25,31,.07);
  --card-sh:0 18px 50px rgba(34,31,26,.055),0 2px 8px rgba(34,31,26,.04);
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:26px;
}
html.dark {
  --bg:#03050a;
  --bg2:#0b0e15;
  --bg3:#141824;
  --ink:#f3f5f8;
  --ink1:#f3f5f8;
  --ink2:#b2b8c4;
  --ink3:#858d9b;
  --sage:#5b8cff;
  --sage-l:#111d3a;
  --warm:#ff4c46;
  --warm-l:#2b1114;
  --border:#252b37;
  --shadow:rgba(0,0,0,.38);
  --card-sh:0 22px 64px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025);
}
@media (prefers-color-scheme:dark) {
  html:not(.light):not(.dark) {
    --bg:#03050a;
    --bg2:#0b0e15;
    --bg3:#141824;
    --ink:#f3f5f8;
    --ink1:#f3f5f8;
    --ink2:#b2b8c4;
    --ink3:#858d9b;
    --sage:#5b8cff;
    --sage-l:#111d3a;
    --warm:#ff4c46;
    --warm-l:#2b1114;
    --border:#252b37;
    --shadow:rgba(0,0,0,.38);
    --card-sh:0 22px 64px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025);
  }
}

body { background-color:var(--bg); }
html.dark body {
  background-image:
    radial-gradient(circle at 50% -18%,rgba(73,99,169,.13),transparent 42%),
    linear-gradient(180deg,#050713 0%,var(--bg) 54%,#020306 100%);
  background-attachment:fixed;
}
@media (prefers-color-scheme:dark) {
  html:not(.light):not(.dark) body {
    background-image:
      radial-gradient(circle at 50% -18%,rgba(73,99,169,.13),transparent 42%),
      linear-gradient(180deg,#050713 0%,var(--bg) 54%,#020306 100%);
    background-attachment:fixed;
  }
}

.lab-card,.v-card,.j-card,.subscribe-inner,.gb-write-card,.tech-story {
  border-color:color-mix(in srgb,var(--border) 86%,transparent);
  box-shadow:var(--card-sh);
}
html.dark .lab-card,
html.dark .v-card,
html.dark .j-card,
html.dark .subscribe-inner,
html.dark .gb-write-card,
html.dark .tech-story {
  background:color-mix(in srgb,var(--bg2) 90%,transparent);
}

.hero-youtube svg,
.about-channel .lc:first-child,
.about-links .a-link-primary .lc { color:var(--warm); }
.about-links .a-link-primary {
  background:transparent;
  border-color:color-mix(in srgb,var(--warm) 46%,var(--border));
  color:var(--ink);
  box-shadow:none;
}
.about-links .a-link-primary:hover {
  background:var(--warm);
  border-color:var(--warm);
  color:#fff;
  box-shadow:0 12px 30px color-mix(in srgb,var(--warm) 24%,transparent);
}
.about-links .a-link-primary:hover .lc { color:#fff; }

/* Works is a portfolio, not a backlog. One real product gets the space. */
#page-labs .labs-grid { grid-template-columns:minmax(0,680px); }
#page-labs .lab-card {
  min-height:260px;
  padding:clamp(26px,4vw,40px);
}
#page-labs .lab-name { font-size:clamp(22px,2.6vw,30px); }
#page-labs .lab-desc { max-width:560px; font-size:14px; line-height:1.85; }
.labs-note {
  display:grid;
  grid-template-columns:40px minmax(0,560px);
  gap:18px;
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}
.labs-note-mark {
  font-family:var(--font-en-display);
  font-size:17px;
  font-style:italic;
  color:var(--sage);
}
.labs-note p { margin:0; font-size:13.5px; line-height:1.85; color:var(--ink3); }