/* OpenWriting Coach — one stylesheet. v1.4 claymorphism-lite: soft, chunky, tactile,
   colorful, alive. Playful polish for adult learners — never sterile, never academic.
   Class + token names are kept stable from prior versions so every page keeps working;
   only the visual system is replaced. */
:root{
  color-scheme: light;
  /* surfaces */
  --bg:#EEF2FF; --paper:#EEF2FF; --surface:#FFFFFF; --card:#FFFFFF; --muted:#EBEEF8;
  /* text (all ≥4.5:1 on bg/surface) */
  --ink:#312E81; --fg:#312E81; --ink-2:#4B4F8C; --ink-3:#565A93;
  /* brand */
  --indigo:#4F46E5; --primary:#4F46E5; --indigo-700:#4338CA; --indigo-800:#3730A3; --indigo-050:#E0E7FF; --secondary:#818CF8;
  /* progress / CTA */
  --green:#16A34A; --green-700:#15803D; --green-800:#166534; --green-050:#DCFCE7;
  /* XP / streak / gems */
  --gold:#F59E0B; --gold-050:#FEF3C7; --gold-700:#B45309; --gold-800:#92400E;
  /* coach */
  --teal:#0D9488; --teal-050:#CCFBF1; --teal-700:#115E59;
  /* monster HP only */
  --red:#DC2626; --red-050:#FEE2E2;
  --line:#C7D2FE; --border:#C7D2FE;
  --radius:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow-sm:0 2px 6px rgba(79,70,229,.10);
  --shadow:0 8px 24px rgba(79,70,229,.12), 0 2px 4px rgba(79,70,229,.07);
  --shadow-clay: inset 0 2px 0 rgba(255,255,255,.85), 0 8px 24px rgba(79,70,229,.12);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --read:680px; --frame:1120px;
  --f-display:'Baloo 2', ui-rounded, system-ui, sans-serif;
  --f-ui:'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-read: var(--f-serif);   /* alias: 8 pages set reading type with --f-read; it was never
                              defined, so every learner-facing sentence fell back to the UI font */
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-ui); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.1; letter-spacing:-.01em; margin:0 0 .5em; color:var(--fg); }
h1{ font-size:clamp(2.1rem,6vw,3.2rem); font-weight:800; }
h2{ font-size:clamp(1.6rem,4vw,2.3rem); font-weight:700; }
h3{ font-size:1.2rem; font-weight:700; }
p{ margin:0 0 1rem; }
a{ color:var(--indigo); text-decoration:none; font-weight:600; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
:focus-visible{ outline:3px solid var(--indigo); outline-offset:2px; border-radius:6px; }
.muted{ color:var(--ink-2); }
.small{ font-size:.86rem; }
.center{ text-align:center; }
.wrap{ width:100%; max-width:var(--frame); margin-inline:auto; padding-inline:20px; }
.read{ max-width:var(--read); }
.stack>*+*{ margin-top:1rem; }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:40; background:rgba(238,242,255,.82);
  backdrop-filter:saturate(1.5) blur(10px); border-bottom:1.5px solid var(--line);
  transition:box-shadow .2s ease, border-color .2s ease; }
.site-head.scrolled{ box-shadow:0 6px 22px rgba(79,70,229,.14); border-bottom-color:transparent; }
.site-head .wrap{ display:flex; align-items:center; gap:14px; min-height:64px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--fg); font-family:var(--f-display);
  font-weight:800; font-size:1.18rem; letter-spacing:-.02em; }
.brand:hover{ text-decoration:none; }
.brand .mark{ width:34px; height:34px; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(79,70,229,.28)); }
.brand b{ color:var(--indigo); font-weight:800; }

/* desktop primary nav + auth cluster (right-aligned) */
.nav-desktop{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav-auth{ display:flex; align-items:center; gap:10px; margin-left:8px; }
.navlink{ display:inline-flex; align-items:center; min-height:40px; color:var(--ink-2);
  padding:8px 14px; border-radius:var(--radius-pill); font-weight:700; }
.navlink:hover{ color:var(--indigo); background:var(--indigo-050); text-decoration:none; }
.navlink[aria-current="page"]{ color:var(--indigo); background:var(--indigo-050); }
.nav-cta{ margin-inline:2px; }

/* avatar account menu */
.avatar-menu{ position:relative; }
.av-chip-btn{ display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 3px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-pill);
  box-shadow:0 2px 0 var(--line); transition:border-color .15s ease; }
.av-chip-btn:hover{ border-color:var(--indigo); }
.av-chip-btn .av-caret{ width:16px; height:16px; color:var(--ink-3); }
.av-dropdown{ position:absolute; right:0; top:calc(100% + 10px); min-width:180px; background:#fff;
  border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:6px;
  animation:pop .16s var(--spring); }
.av-dropdown a, .av-dropdown button{ display:flex; align-items:center; width:100%; min-height:42px;
  padding:10px 12px; border-radius:11px; font-family:var(--f-ui); font-size:.94rem; font-weight:700;
  color:var(--ink); background:transparent; border:0; text-align:left; cursor:pointer; }
.av-dropdown a:hover, .av-dropdown button:hover{ background:var(--indigo-050); color:var(--indigo); text-decoration:none; }

/* hamburger + mobile slide-down sheet */
.nav-toggle{ display:none; margin-left:auto; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; color:var(--indigo); background:#fff; cursor:pointer;
  border:1.5px solid var(--line); border-radius:14px; box-shadow:0 2px 0 var(--line); }
.nav-toggle:hover{ border-color:var(--indigo); }
.nav-toggle:active{ transform:translateY(1px); box-shadow:none; }
.nav-toggle svg{ width:24px; height:24px; }
.mobile-sheet{ border-top:1.5px solid var(--line); background:rgba(238,242,255,.98);
  backdrop-filter:saturate(1.5) blur(10px); padding:14px 20px 20px; box-shadow:var(--shadow);
  animation:sheetdrop .22s var(--spring); }
@keyframes sheetdrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.mobile-sheet .m-links{ display:flex; flex-direction:column; gap:2px; }
.mobile-sheet .m-link{ display:flex; align-items:center; min-height:48px; padding:12px 14px;
  border-radius:14px; font-family:var(--f-ui); font-weight:800; font-size:1.02rem; color:var(--ink); }
.mobile-sheet .m-link:hover{ background:var(--indigo-050); color:var(--indigo); text-decoration:none; }
.mobile-sheet .m-link[aria-current="page"]{ color:var(--indigo); background:var(--indigo-050); }
.mobile-sheet .m-divide{ height:1.5px; background:var(--line); margin:12px 2px; }
.mobile-sheet .m-auth{ display:flex; flex-direction:column; gap:10px; }
body.nav-open{ overflow:hidden; }

/* ---------- buttons (chunky clay, pressable) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--f-ui); font-weight:800; font-size:.98rem; line-height:1;
  padding:12px 20px; border-radius:var(--radius); border:0; background:var(--indigo); color:#fff;
  box-shadow:0 3px 0 var(--indigo-700), 0 7px 16px rgba(79,70,229,.30);
  transition:transform .16s var(--spring), box-shadow .16s ease, background .16s ease; }
.btn:hover{ background:var(--indigo-700); text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(2px) scale(.97); box-shadow:0 1px 0 var(--indigo-700); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:0 3px 0 var(--indigo-700); }
.btn.ghost{ background:#fff; color:var(--indigo); box-shadow:0 3px 0 var(--line), 0 5px 12px rgba(79,70,229,.14); }
.btn.ghost:hover{ background:var(--indigo-050); }
.btn.ghost:active{ box-shadow:0 1px 0 var(--line); }
.btn.green{ background:var(--green-700); box-shadow:0 3px 0 var(--green-800), 0 7px 16px rgba(21,128,61,.30); }
.btn.green:hover{ background:var(--green-800); }
.btn.green:active{ box-shadow:0 1px 0 var(--green-800); }
.btn.gold{ background:var(--gold); color:#5A3A00; box-shadow:0 3px 0 var(--gold-700), 0 7px 16px rgba(245,158,11,.32); }
.btn.gold:hover{ background:#EA8F06; color:#4A2E00; }
.btn.gold:active{ box-shadow:0 1px 0 var(--gold-700); }
.btn.sm{ padding:8px 14px; font-size:.85rem; border-radius:12px; box-shadow:0 2px 0 var(--indigo-700), 0 4px 9px rgba(79,70,229,.22); }
.btn.ghost.sm{ box-shadow:0 2px 0 var(--line), 0 4px 9px rgba(79,70,229,.12); }
.btn.gold.sm{ box-shadow:0 2px 0 var(--gold-700), 0 4px 9px rgba(245,158,11,.24); }
.btn.green.sm{ box-shadow:0 2px 0 var(--green-800), 0 4px 9px rgba(21,128,61,.24); }
.btn.lg{ padding:16px 28px; font-size:1.1rem; border-radius:18px; }
.btn.block{ width:100%; }

/* ---------- cards & chips ---------- */
.card{ position:relative; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-clay); padding:22px; }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800;
  padding:4px 11px; border-radius:var(--radius-pill); background:var(--indigo-050); color:var(--indigo-700); }
.chip.teal{ background:var(--teal-050); color:var(--teal-700); }
.chip.gold{ background:var(--gold-050); color:var(--gold-800); }
.chip.green{ background:var(--green-050); color:var(--green-800); }
.chip.red{ background:var(--red-050); color:var(--red); }
.chip.line{ background:#fff; border:1.5px solid var(--line); color:var(--ink-2); }
.tag{ font-size:.74rem; font-weight:700; text-transform:lowercase; letter-spacing:.01em; color:var(--ink-3); font-family:var(--f-ui); }
.lvl{ display:inline-flex; align-items:center; gap:5px; font-family:var(--f-display); font-weight:700;
  font-size:.8rem; color:var(--gold-800); background:var(--gold-050); padding:3px 11px; border-radius:var(--radius-pill); }
.lvl .lvl-n{ color:var(--gold-700); opacity:.85; font-weight:800; }
.streak{ display:inline-flex; align-items:center; gap:5px; font-weight:800; color:var(--gold-800); }
.streak svg{ width:18px; height:18px; color:var(--gold); }
/* small @username sub shown next to a free-text display name */
.name-sub{ font-size:.8em; font-weight:600; color:var(--ink-3); }

/* tiers */
.tier-badge{ display:inline-block; vertical-align:middle; flex:0 0 auto; filter:drop-shadow(0 1px 1px rgba(49,46,129,.22)); }
.tier-diamond{ filter:drop-shadow(0 1px 3px rgba(124,108,240,.5)); }

/* leaderboard (feed "Top writers" card) */
.lb-row{ display:flex; align-items:center; gap:10px; padding:9px 6px; border-radius:12px; }
.lb-row+.lb-row{ border-top:1.5px solid var(--line); }
.lb-row.lb-you{ background:var(--indigo-050); }
.lb-rank{ width:24px; flex:0 0 auto; font-family:var(--f-display); font-weight:800; font-size:.85rem; color:var(--ink-3); }
.lb-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); }
.lb-xp{ flex:0 0 auto; font-weight:800; font-size:.85rem; color:var(--gold-800); }

/* ---------- forms ---------- */
label.field{ display:block; margin-bottom:15px; }
label.field span{ display:block; font-size:.85rem; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
label.field em{ font-weight:600; font-style:normal; }
input[type=text], input[type=email], input[type=password], textarea{
  width:100%; font-family:var(--f-ui); font-size:1rem; font-weight:600; color:var(--fg); background:#fff;
  border:2px solid var(--line); border-radius:var(--radius); padding:12px 14px; transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder{ color:var(--ink-3); font-weight:400; }
input:focus, textarea:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px var(--indigo-050); }
textarea{ resize:vertical; line-height:1.6; }
.form-msg{ min-height:1.2em; font-size:.9rem; margin-top:4px; font-weight:600; }
.form-msg.error{ color:var(--red); }
.form-msg.ok{ color:var(--teal-700); }
.inline-form{ display:flex; gap:10px; flex-wrap:wrap; }
.inline-form input{ flex:1 1 220px; }

/* ---------- monster card + HP + soft clay disc ---------- */
.monster{ display:flex; gap:16px; align-items:center; }
.monster > .blob{ flex:0 0 auto; background:#EEF2FF; border:1.5px solid var(--line); border-radius:22px;
  padding:7px; box-shadow:inset 0 2px 0 rgba(255,255,255,.85); }
.monster .m-body{ flex:1 1 auto; min-width:0; }
.monster .m-name{ font-family:var(--f-display); font-weight:700; font-size:1.08rem; color:var(--fg); }
.monster .m-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--ink-2); font-size:.82rem; margin-top:3px; }
.hp{ margin-top:10px; height:11px; border-radius:var(--radius-pill); background:var(--red-050);
  overflow:hidden; border:1.5px solid #FBC9C9; }
.hp > i{ display:block; height:100%; background:linear-gradient(180deg,#EF4444,var(--red)); border-radius:var(--radius-pill); transition:width .5s var(--spring); }
.hits{ color:var(--red); font-weight:800; }
.blob{ display:block; }
.blob.defeated{ filter:grayscale(1); opacity:.4; }
.badge-defeated{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 12px; border:1.5px solid var(--line); border-radius:var(--radius-lg); background:#fff; text-align:center; box-shadow:var(--shadow-clay); }
.badge-defeated .blob{ background:#EEF2FF; border:1.5px solid var(--line); border-radius:20px; padding:6px; }
.badge-defeated .ribbon{ font-family:var(--f-display); font-weight:800; font-size:.7rem; color:var(--gold-800);
  background:var(--gold-050); padding:3px 10px; border-radius:var(--radius-pill); }
.badge-defeated .b-name{ font-size:.82rem; font-weight:700; color:var(--ink-2); }

/* ---------- coach margin notes ---------- */
.note{ position:relative; background:#fff; border:1.5px solid var(--line); border-left:5px solid var(--teal);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); }
.note+.note{ margin-top:14px; }
.note .note-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.note .note-head .blob{ background:#EEF2FF; border:1.5px solid var(--line); border-radius:11px; padding:3px; }
.note .ba{ font-size:1.04rem; line-height:1.7; margin:0 0 9px; font-weight:600; }
.note del{ color:var(--red); text-decoration-thickness:2px; }
.note ins{ color:var(--teal-700); text-decoration:none; background:var(--teal-050); border-radius:6px; padding:1px 6px; font-weight:800; }
.note .arrow{ color:var(--ink-3); margin:0 5px; font-weight:800; }
.note .why{ color:var(--ink-2); font-size:.94rem; margin:0 0 12px; }
.note .why b{ color:var(--teal-700); font-weight:800; }
.note .got{ font-size:.82rem; }
.note.acked{ border-left-color:var(--secondary); background:#FBFBFF; }
.note .acked-tag{ color:var(--teal-700); font-weight:800; font-size:.85rem; display:inline-flex; align-items:center; gap:5px; }

/* ---------- XP bar ---------- */
.xpbar{ height:14px; border-radius:var(--radius-pill); background:var(--gold-050);
  overflow:hidden; border:1.5px solid #F6DFA6; }
.xpbar > i{ display:block; height:100%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--gold),#FBBF24,var(--gold)); background-size:200% 100%;
  transition:width .6s var(--spring); animation:xpshimmer 3s linear infinite; }
@keyframes xpshimmer{ from{ background-position:0 0; } to{ background-position:-200% 0; } }
/* progress (green) variant for generic bars */
.pbar{ height:12px; border-radius:var(--radius-pill); background:var(--green-050); overflow:hidden; border:1.5px solid #B7E8C8; }
.pbar > i{ display:block; height:100%; background:linear-gradient(180deg,#22C55E,var(--green)); border-radius:var(--radius-pill); transition:width .5s var(--spring); }

/* ---------- feed / post cards ---------- */
.grid{ display:grid; gap:18px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.feed-card{ display:flex; flex-direction:column; gap:11px; transition:transform .16s var(--spring), box-shadow .16s ease; }
.feed-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(79,70,229,.16); }
.feed-card h3{ margin:0; }
.feed-card h3 a{ color:var(--fg); }
.feed-card h3 a:hover{ color:var(--indigo); }
.feed-card .excerpt{ color:var(--ink-2); margin:0; font-weight:400; }
.coach-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.byline{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-2); }
.byline a{ font-weight:700; }
.cheer{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:7px 14px; font-weight:800;
  color:var(--ink-2); font-size:.85rem; transition:transform .12s var(--spring), background .15s, border-color .15s; }
.cheer:hover{ border-color:var(--gold); color:var(--gold-800); }
.cheer:active{ transform:scale(.94); }
.cheer.on{ background:var(--gold-050); border-color:var(--gold); color:var(--gold-800); }
.cheer svg{ width:16px; height:16px; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }

/* ---------- reading typography (post body) ---------- */
.prose{ font-family:var(--f-serif); font-size:19px; line-height:1.75; color:#2E2A55; white-space:pre-wrap; font-weight:400; }
.prose.sm{ font-size:18px; }

/* ---------- hero / landing ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:7px; font-weight:800; color:var(--indigo); background:#fff;
  padding:6px 14px; border-radius:var(--radius-pill); font-size:.82rem; margin-bottom:18px;
  box-shadow:0 3px 10px rgba(79,70,229,.14); border:1.5px solid var(--line); }
.hero{ padding:52px 0 44px; }
.hero h1{ max-width:15ch; }
.hero .lede{ font-size:1.22rem; color:var(--ink-2); max-width:44ch; font-weight:600; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; align-items:center; }
/* thumb-reach duplicate CTA — mobile only, no desktop layout shift */
.hero-cta-mobile{ display:none; }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; }
.demo-label{ font-size:.74rem; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }

.section{ padding:52px 0; }
section[id]{ scroll-margin-top:84px; }
.section-head{ max-width:60ch; margin-bottom:30px; }
.section-head.center{ margin-inline:auto; }
.band-tint{ background:linear-gradient(180deg,#fff, #F6F8FF); border-block:1.5px solid var(--line); }

/* soft indigo clay bands (hero, CTA, dashboard header) — kept class name .band-night */
.band-night{ position:relative; overflow:hidden;
  background:linear-gradient(155deg,#EEF2FF 0%, #E4E9FF 55%, #DDD6FE 100%); }
.band-night::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 70% at 84% 8%, rgba(129,140,248,.28), transparent 60%),
             radial-gradient(46% 60% at 6% 96%, rgba(245,158,11,.14), transparent 60%); }
.band-night > *{ position:relative; z-index:1; }
.dash-head .wrap{ padding-block:30px 34px; }

/* ---- phone-frame app mockup (hero visual) ---- */
.hero-stage{ position:relative; display:flex; justify-content:center; padding-top:18px; }
.phone{ position:relative; width:290px; max-width:82vw; border-radius:42px; background:#fff;
  border:8px solid #312E81; box-shadow:0 26px 60px rgba(49,46,129,.30), inset 0 2px 0 rgba(255,255,255,.9);
  padding:14px 12px 18px; }
.phone::before{ content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:96px; height:8px; border-radius:999px; background:#312E81; opacity:.9; }
.phone-screen{ margin-top:16px; border-radius:26px; background:linear-gradient(180deg,#F6F8FF,#EEF2FF);
  padding:14px 13px 16px; border:1.5px solid var(--line); }
.app-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.app-top .a-brand{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-display); font-weight:800; font-size:.82rem; color:var(--fg); }
.app-top .a-brand svg{ width:20px; height:20px; }
.app-para{ font-family:var(--f-serif); font-size:.92rem; line-height:1.6; color:#2E2A55; margin:0 0 12px; }
.app-para del{ color:var(--red); text-decoration-thickness:2px; }
.app-para ins{ color:var(--teal-700); text-decoration:none; background:var(--teal-050); border-radius:5px; padding:0 4px; font-weight:800; }
.app-note{ background:#fff; border:1.5px solid var(--line); border-left:4px solid var(--teal); border-radius:13px; padding:10px 12px; box-shadow:var(--shadow-sm); }
.app-note .ah{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.app-note .ah .blob{ background:#EEF2FF; border:1.5px solid var(--line); border-radius:9px; padding:2px; }
.app-note .aba{ font-size:.86rem; font-weight:700; margin:0 0 4px; }
.app-note .aba del{ color:var(--red); } .app-note .aba ins{ color:var(--teal-700); text-decoration:none; font-weight:800; }
.app-note .awhy{ font-size:.78rem; color:var(--ink-2); margin:0; }
.app-note .awhy b{ color:var(--teal-700); }
.mon-chip{ display:flex; align-items:center; gap:9px; margin-top:11px; background:#fff; border:1.5px solid var(--line);
  border-radius:14px; padding:9px 11px; box-shadow:var(--shadow-sm); }
.mon-chip .blob{ background:#EEF2FF; border:1.5px solid var(--line); border-radius:11px; padding:3px; }
.mon-chip .mc-body{ flex:1 1 auto; min-width:0; }
.mon-chip .mc-name{ font-family:var(--f-display); font-weight:700; font-size:.82rem; }
.mon-chip .mc-row{ display:flex; align-items:center; gap:7px; }
.mon-chip .hp{ flex:1; margin-top:0; height:9px; }
.hit-chip{ font-family:var(--f-display); font-weight:800; font-size:.68rem; color:#5A3A00;
  background:var(--gold); padding:2px 8px; border-radius:var(--radius-pill); white-space:nowrap; }
.phone-mascot{ position:absolute; top:-26px; right:calc(50% - 176px); z-index:2; pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(49,46,129,.28)); animation:mascot-bob 4s ease-in-out infinite; }
@keyframes mascot-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-8px) rotate(-4deg); } }

/* ---- social / community strip ---- */
.social-strip{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:16px 22px; box-shadow:var(--shadow-clay); }
.social-strip .stack-avatars{ display:inline-flex; }
.social-strip .stack-avatars .avatar-chip{ margin-left:-12px; border:3px solid #fff; box-shadow:0 2px 6px rgba(79,70,229,.2); }
.social-strip .stack-avatars .avatar-chip:first-child{ margin-left:0; }
.social-strip .ss-text{ font-weight:700; color:var(--ink-2); }
.social-strip .ss-text b{ color:var(--fg); }

/* ---- how it works: 3 chunky steps ---- */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step3{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px; box-shadow:var(--shadow-clay); }
.step3 .s-ico{ width:58px; height:58px; display:grid; place-items:center; border-radius:20px; margin-bottom:16px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7); }
.step3 .s-ico svg{ width:30px; height:30px; }
.step3 .s-ico.i1{ background:var(--indigo-050); color:var(--indigo); }
.step3 .s-ico.i2{ background:var(--teal-050); color:var(--teal-700); }
.step3 .s-ico.i3{ background:var(--gold-050); color:var(--gold-800); }
.step3 .s-n{ font-family:var(--f-display); font-weight:800; font-size:.78rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.step3 h3{ margin:2px 0 6px; font-size:1.22rem; }
.step3 p{ margin:0; color:var(--ink-2); }

/* ---- SEE THE COACHING before→after demo ---- */
.coaching-demo{ display:grid; grid-template-columns:1fr 1.1fr; gap:22px; align-items:start; }
.cd-panel{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-clay); }
.cd-panel.before{ background:linear-gradient(180deg,#fff,#FBFBFF); }
.cd-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.cd-head .k{ font-family:var(--f-display); font-weight:800; font-size:1.05rem; }
.cd-text{ font-family:var(--f-serif); font-size:1.06rem; line-height:1.75; color:#2E2A55; margin:0; }
.cd-text del{ color:var(--red); text-decoration-thickness:2px; }
.cd-text ins{ color:var(--teal-700); text-decoration:none; background:var(--teal-050); border-radius:6px; padding:1px 5px; font-weight:800; }
.cd-after-stack{ display:grid; gap:12px; }

/* ---- vocab gem cards ---- */
.gem{ position:relative; background:var(--gold-050); border:1.5px solid #F3D992; border-left:5px solid var(--gold);
  border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow-sm); }
.gem+.gem{ margin-top:14px; }
.gem-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.gem-head .g-ico{ width:20px; height:20px; color:var(--gold-700); }
.gem .ba{ font-size:1.06rem; line-height:1.6; margin:0 0 6px; font-weight:700; }
.gem .plain{ color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:1px; font-weight:600; }
.gem .arrow{ color:var(--ink-3); margin:0 6px; font-weight:800; }
.gem .up{ color:var(--gold-800); font-weight:800; }
.gem .note{ color:var(--ink-2); font-size:.9rem; margin:0 0 12px; }
.gem.acked{ opacity:.72; }
.gem .acked-tag{ color:var(--gold-800); font-weight:800; font-size:.85rem; display:inline-flex; align-items:center; gap:5px; }

/* ---- word bank (write.html "New words" cards + dashboard "Word bank" card) ---- */
.word{ position:relative; background:#fff; border:1.5px solid var(--line); border-left:5px solid var(--teal);
  border-radius:var(--radius); padding:14px 17px; box-shadow:var(--shadow-sm); }
.word+.word{ margin-top:12px; }
.word-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.word .ba{ font-size:1.04rem; line-height:1.6; margin:0; font-weight:700; }
.word .orig{ color:var(--ink-3); font-weight:600; }
.word .arrow{ color:var(--ink-3); margin:0 6px; font-weight:800; }
.word .eng{ color:var(--teal-700); font-weight:800; }
.word-list{ display:flex; flex-direction:column; }
.word-row{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:9px 0; border-top:1.5px solid var(--line); }
.word-row:first-child{ border-top:0; padding-top:0; }
.word-row .w-eng{ font-weight:800; color:var(--fg); }
.word-row .w-orig{ color:var(--ink-3); font-size:.86rem; }
.word-row .w-note{ color:var(--ink-2); font-size:.8rem; }

/* ---- monster teaser row (landing) ---- */
.mon-teaser{ display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-clay); }
.mon-teaser .mt-row{ display:flex; gap:8px; }
.mon-teaser .mt-row .blob{ background:#EEF2FF; border:1.5px solid var(--line); border-radius:20px; padding:8px; }
.mon-teaser .mt-copy h3{ margin:0 0 4px; }
.mon-teaser .mt-copy p{ margin:0; color:var(--ink-2); }

/* ---------- footer (labeled columns) ---------- */
.site-foot{ border-top:1.5px solid var(--line); background:#fff; margin-top:52px; }
.site-foot .wrap{ display:grid; grid-template-columns:1.5fr 2fr; gap:40px; padding-block:44px; align-items:start; }
.site-foot .foot-brand{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; }
.site-foot .foot-brand-col p{ max-width:34ch; margin:.5rem 0 1rem; }
.site-foot .foot-app{ font-weight:800; color:var(--fg); margin-bottom:8px; }
.site-foot .foot-brand-col .inline-form{ max-width:340px; }
.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.foot-col h4{ font-family:var(--f-display); font-size:.8rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-3); margin:0 0 12px; }
.foot-col a{ display:block; color:var(--ink-2); font-weight:600; font-size:.92rem; margin-bottom:10px; }
.foot-col a:hover{ color:var(--indigo); }

/* ---------- post author card (p.html) ---------- */
.author-card{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-clay); padding:20px 22px; }
.author-card .ac-ava{ width:60px; height:60px; border-radius:20px; background:#EEF2FF; border:1.5px solid var(--line);
  display:grid; place-items:center; flex:0 0 auto; box-shadow:inset 0 2px 0 rgba(255,255,255,.85); }
.author-card .ac-body{ flex:1 1 auto; min-width:0; }
.author-card .ac-name{ font-family:var(--f-display); font-weight:800; font-size:1.1rem; }
.author-card .ac-name a{ color:var(--fg); }
.author-card .ac-name a:hover{ color:var(--indigo); }
.author-card .ac-meta{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; margin-top:7px;
  color:var(--ink-2); font-size:.88rem; }
.author-card .ac-stats{ display:flex; gap:14px; flex-wrap:wrap; }
.author-card .ac-stats b{ color:var(--fg); }
.author-card .ac-cta{ margin-left:auto; }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:var(--fg); color:#fff; padding:11px 18px; border-radius:var(--radius-pill);
  font-size:.9rem; font-weight:800; box-shadow:0 10px 26px rgba(49,46,129,.32); animation:pop .25s var(--spring); }
.toast.xp{ background:var(--gold); color:#5A3A00; }
.toast.win{ background:var(--teal-700); }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.9); } to{ opacity:1; transform:none; } }

/* ---------- misc layout ---------- */
.page{ padding-block:34px 8px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.empty{ text-align:center; color:var(--ink-2); border:2px dashed var(--line); border-radius:var(--radius-lg);
  padding:40px 22px; background:#fff; font-weight:600; }
.empty .blob{ margin:0 auto 14px; background:#EEF2FF; border:1.5px solid var(--line); border-radius:22px; padding:8px; }
.rowline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.divide{ height:1.5px; background:var(--line); border:0; margin:24px 0; }
.pill-list{ display:flex; gap:8px; flex-wrap:wrap; }
.auth-box{ max-width:440px; margin:48px auto; }
.auth-box .card{ padding:30px; }
.toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-weight:700; }
.toggle input{ width:auto; accent-color:var(--indigo); }

/* ---- original ⇄ coached body toggle (p.html) ---- */
.body-toggle{ display:inline-flex; gap:0; background:var(--muted); border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:3px; margin-bottom:14px; }
.body-toggle button{ border:0; background:transparent; cursor:pointer; font-family:var(--f-ui); font-weight:800; font-size:.85rem;
  color:var(--ink-2); padding:7px 16px; border-radius:var(--radius-pill); transition:background .15s, color .15s; }
.body-toggle button[aria-pressed="true"]{ background:#fff; color:var(--indigo); box-shadow:0 2px 6px rgba(79,70,229,.18); }

/* ---------- avatars ---------- */
.avatar-chip{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--indigo-050); border:1.5px solid var(--line); overflow:hidden; flex:0 0 auto; vertical-align:middle; }
.owc-avatar{ display:block; }
.av-link{ display:inline-flex; border-radius:50%; }
.av-link:hover{ text-decoration:none; }
.avatar-hero{ width:132px; height:132px; border-radius:28px; background:#fff;
  border:1.5px solid var(--line); display:grid; place-items:center; flex:0 0 auto; box-shadow:var(--shadow-clay); }
.avatar-feed{ width:34px; height:34px; }

/* ---------- look library (v1.3 preset gallery) ---------- */
.look-head{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.look-name{ font-family:var(--f-display); font-weight:800; font-size:1.4rem; letter-spacing:-.01em; }
.look-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px; margin-top:8px; }
.look-cell{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  border:2px solid var(--line); border-radius:var(--radius-lg); background:#fff; padding:14px 6px 11px;
  font-family:inherit; font-size:.74rem; font-weight:700; color:var(--ink-2); text-align:center;
  transition:transform .14s var(--spring), border-color .15s, box-shadow .15s; }
.look-cell:hover{ border-color:var(--indigo); color:var(--fg); transform:translateY(-2px); }
.look-cell.cur{ border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-050); color:var(--fg); }
.look-cell .look-cell-name{ font-family:var(--f-display); font-weight:700; }
.look-cell .worn-tag{ color:var(--indigo); font-weight:800; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; }
.look-cell.locked{ cursor:default; opacity:.9; }
.look-cell.locked:hover{ border-color:var(--line); color:var(--ink-2); transform:none; }
.look-cell.locked .owc-avatar{ filter:brightness(0); opacity:.16; }
.look-cell .lock-tag{ color:var(--gold-800); font-weight:800; font-size:.66rem; }

/* ---------- title picker (Account card, 2026-07-15) ---------- */
.title-grid{ display:flex; flex-direction:column; gap:9px; }
.title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.title-row .title-lv{ flex:0 0 40px; font-family:var(--f-display); font-weight:800; font-size:.78rem; color:var(--ink-3); }
.title-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; cursor:pointer;
  border:2px solid var(--line); border-radius:var(--radius-pill); background:#fff;
  font-family:var(--f-display); font-size:.86rem; font-weight:700; color:var(--fg);
  transition:border-color .15s, box-shadow .15s; }
.title-chip:hover{ border-color:var(--indigo); }
.title-chip.cur{ border-color:var(--indigo); background:var(--indigo-050); color:var(--indigo-700); box-shadow:0 0 0 3px var(--indigo-050); }
.title-chip.locked{ cursor:default; color:var(--ink-3); background:transparent; border-style:dashed; }
.title-chip.locked:hover{ border-color:var(--line); }
.title-chip .lock-tag{ color:var(--gold-800); font-weight:800; font-size:.66rem; }

/* ---------- share as image ---------- */
.share-box{ margin-top:18px; }
.share-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.share-msg{ margin-top:6px; }
.share-mini{ background:#fff; border:1.5px solid var(--line); border-top:6px solid var(--gold);
  border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-clay); max-width:460px; }
.share-mini .sm-title{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; color:var(--fg); margin-bottom:8px; }
.share-mini .sm-body{ font-family:var(--f-serif); font-size:1rem; line-height:1.6; color:#2E2A55; margin:0 0 16px; }
.share-mini .sm-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:12px; border-top:1.5px solid var(--line); font-size:.82rem; flex-wrap:wrap; }
.share-mini .sm-brand{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:800; color:var(--fg); }
.share-mini .sm-mark{ width:24px; height:24px; }
.share-mini .sm-who{ color:var(--ink-2); font-weight:700; display:inline-flex; align-items:center; gap:6px; }

/* ---------- responsive (mobile-first target 375px) ---------- */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:28px; }
  .coaching-demo{ grid-template-columns:1fr; }
  .steps3{ grid-template-columns:1fr; }
  .grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .site-foot .wrap{ grid-template-columns:1fr; }
  .mon-teaser{ grid-template-columns:1fr; text-align:center; gap:18px; justify-items:center; }
  .mon-teaser .mt-copy{ order:-1; }
}
/* mobile nav: swap desktop links for a hamburger + slide-down sheet */
@media (max-width:768px){
  .nav-desktop, .nav-auth{ display:none; }
  .nav-toggle{ display:inline-flex; }
}
@media (min-width:769px){
  .mobile-sheet{ display:none !important; }
}
@media (max-width:600px){
  .hero{ padding:34px 0 28px; }
  .section{ padding:40px 0; }
  .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:repeat(2,1fr); gap:18px 16px; }
  .author-card .ac-cta{ margin-left:0; }
  .phone-mascot{ right:calc(50% - 150px); }
  .page-head{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* daily topics */
.topic-pick{ display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); }
.topic-pick .topic-line{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--fg); margin:0; }
.topic-chip-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.topic-chip-row:empty{ display:none; }
.topic-chip{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:6px 14px 6px 6px;
  font-family:var(--f-ui); font-weight:700; font-size:.82rem; color:var(--ink-2);
  box-shadow:0 2px 0 var(--line); transition:transform .14s var(--spring), border-color .15s, color .15s; }
.topic-chip:hover{ border-color:var(--indigo); color:var(--fg); transform:translateY(-1px); }
.topic-chip:active{ transform:translateY(1px); }
.topic-chip .topic-chip-text{ max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:480px){
  .topic-chip .topic-chip-text{ max-width:56vw; }
}

/* cookie consent */
#owc-consent-wrap{ position:fixed; inset:0; z-index:200; }
.consent-overlay{ position:absolute; inset:0; background:rgba(49,46,129,.38); backdrop-filter:blur(2px); }
.consent-banner{ position:absolute; left:0; right:0; bottom:0; margin:0 auto; max-width:720px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -10px 30px rgba(49,46,129,.28); padding:20px 24px; display:flex; gap:16px 20px;
  align-items:center; flex-wrap:wrap; }
.consent-text{ flex:1 1 320px; margin:0; font-size:.92rem; color:var(--ink-2); font-weight:600; }
.consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
body.consent-lock{ overflow:hidden; }
@media (max-width:600px){
  .consent-banner{ flex-direction:column; align-items:stretch; padding:18px 18px 20px; }
  /* flex-basis works on the main axis, so the 320px meant for width became a 320px-tall
     paragraph once the banner stacked — a three-line notice filling half the phone. */
  .consent-text{ flex:0 0 auto; }
  .consent-actions{ flex-direction:column; }
  .consent-actions .btn{ width:100%; }
}

/* App-page titles. The marketing h1 (clamp 2.1-3.2rem) is sized for a hero; app pages need a
   smaller but still DOMINANT title. Seven pages had been overriding this inline at 1.5rem, which
   left the page title barely larger than its own card content — the 突出主体 rule inverted.
   2rem matches the precedent already set by the blog/library pages. */
.page > h1{ font-size:2rem; line-height:1.2; max-width:none; }
@media (max-width:480px){ .page > h1{ font-size:1.75rem; } }

/* ---- vocabulary-ceiling demo (landing #ceiling) --------------------------------------------
   The section's subject is the mechanic in action, so the sentence carries the weight: largest,
   darkest element in the block, with the reasoning demoted to grey cards underneath. */
.ceiling-demo{ max-width:640px; margin:0 auto; background:#fff; border:1.5px solid var(--line);
  border-radius:24px; padding:26px 24px 22px; box-shadow:var(--shadow-clay), inset 0 2px 0 #fff; }
.cd-line{ font-family:'Source Serif 4',Georgia,serif; font-size:1.45rem; line-height:1.5;
  color:var(--ink); font-weight:600; }
.cd-line .hit{ background:var(--gold-050); box-shadow:inset 0 -.5em 0 var(--gold-050);
  border-bottom:2.5px solid var(--gold); border-radius:3px; padding:0 3px; font-weight:800; }
.cd-verdict{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.cd-plus{ font-family:'Baloo 2',ui-rounded,system-ui; font-weight:800; font-size:1.3rem;
  color:var(--gold-800); }
.cd-tot{ color:var(--ink-3); font-size:.92rem; margin-left:auto; }
.cd-tot b{ color:var(--ink); }
.cd-bar{ height:9px; border-radius:99px; background:var(--gold-050); border:1.5px solid #F3D992;
  overflow:hidden; margin-top:12px; }
.cd-bar i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--gold),#E08A0B); transition:width .6s ease; }
@media (max-width:600px){
  .cd-line{ font-size:1.2rem; }
  .cd-tot{ margin-left:0; width:100%; }
}

/* ---- result share row (/test) ---------------------------------------------------------------
   Offered only on a strong result: handing a "look what I got" card to someone who just scored
   low would congratulate them for the thing they came to fix. */
.share-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; }

/* ---- result card, shown inline (/test) -------------------------------------------------------
   The image is the reward, so it is on the screen rather than behind a button. Scaled down to a
   postcard so it never pushes the actual CTA off the fold. */
.card-slot{ margin:18px auto 0; max-width:340px; }
.card-slot canvas{ display:block; width:100%; height:auto; border-radius:18px;
  box-shadow:var(--shadow-clay); animation:pop .16s var(--spring) both; }
.card-skel{ aspect-ratio:1080/1350; display:grid; place-items:center; border-radius:18px;
  border:1.5px dashed var(--line); color:var(--ink-3); font-size:.9rem; }

/* ---- profile-picture preview (dashboard) ----------------------------------------------------
   Shown at both a large and a chat-list size, because the whole point of the portrait crop is
   that it survives the small one. */
.look-pfp{ display:flex; align-items:center; gap:16px; margin-top:16px; padding-top:16px;
  border-top:1.5px solid var(--line); }
.look-pfp p{ margin:0; max-width:44ch; }
.look-pfp #look-pfp-img{ display:flex; align-items:flex-end; gap:10px; flex:0 0 auto; }
.pfp-prev{ width:96px; height:96px; border-radius:22px; display:block; }
.pfp-prev.sm{ width:44px; height:44px; border-radius:10px; }
@media (max-width:600px){ .look-pfp{ flex-direction:column; align-items:flex-start; } }

/* ---- ink picker (dashboard) -----------------------------------------------------------------
   The pen is the level and cannot be chosen; the ink is the one thing a learner owns outright, so
   it gets a real picker rather than a dropdown. */
.ink-grid{ display:flex; gap:10px; flex-wrap:wrap; }
.ink-sw{ width:40px; height:40px; border-radius:12px; border:2.5px solid transparent; cursor:pointer;
  box-shadow:0 2px 6px rgba(49,46,129,.16); padding:0; transition:transform .16s var(--spring); }
.ink-sw:hover{ transform:translateY(-2px); }
.ink-sw.on{ border-color:var(--ink); box-shadow:0 0 0 3px var(--line), 0 3px 8px rgba(49,46,129,.24); }