/* ==== Lumin Lookup layer ==========================================================================
   Built on Lumin Vocab's design system above: same tokens, spacing scale (--s1..--s8), type scale (--t-*),
   widths and motion. Reading rules for a dictionary:
   - Definitions 17px/1.5 sans, at most 66ch. Examples 15px Literata italic with a marigold rule.
   - Part of speech headings Literata 600 20px. Section headings in tabs Atkinson 700 20px.
   - Gaps: definition to example 8; meaning to meaning 16; part of speech to part of speech 32; sections 48.
   - Inputs are never under 16px (iPhone zooms otherwise). Every target is at least 44px; list rows 48px or more.
   - Reading text is left-aligned. Centered text only for short display moments.
   ================================================================================================ */

.skip { position: absolute; left: var(--s3); top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--r-s); font-weight: 700; }
.skip:focus { top: var(--s3); }
.mobile-only { display: inline-flex; }
@media (min-width: 900px) { .mobile-only { display: none !important; } }
.me { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: none; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.me .avatar { width: 38px; height: 38px; font-size: 17px; box-shadow: 0 0 0 2px var(--card), 0 2px 0 var(--lip); }
.app.has-nav .topbar .brand { flex: 0 0 auto; }
.app.has-nav .topbar::after { content: none; }
.topbar { gap: var(--s4); }
.topsearch { flex: 1 1 auto; max-width: 520px; min-width: 0; }
.topsearch:empty { flex: 1 1 auto; }
@media (max-width: 899px) { .topsearch { display: none; } .topbar .me { margin-left: auto; } }
.kicker { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card { background: var(--card); border-radius: var(--r-l); box-shadow: var(--shadow); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.tabh { margin: 0; font-family: var(--sans); font-weight: 700; font-size: var(--t-l); line-height: 1.3; }
.tabh.small { font-size: var(--t-m); }
.errtext { color: var(--bad); font-weight: 700; }
.danger-text { color: var(--bad) !important; }
.status { display: inline-flex; align-items: center; gap: var(--s2); color: var(--good); font-weight: 700; }
.status .icon { width: 20px; height: 20px; }
.textlink.back { gap: var(--s1); font-weight: 700; color: var(--muted); text-decoration: none; align-self: flex-start; }
.applogo { border-radius: 14px; margin-bottom: var(--s3); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.crumbs { font-size: var(--t-xs); color: var(--muted); }
.crumbs a { color: var(--muted); }
.qrrow { --gap: var(--s5); align-items: center; }
.qrrow .grow { min-width: 200px; flex: 1; }
.skel { display: inline-block; border-radius: 8px; background: linear-gradient(90deg, rgba(127,127,127,.12), rgba(127,127,127,.24), rgba(127,127,127,.12)); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; color: transparent !important; }
.skel.line { width: 100%; height: 1.2em; }
.skel.line.short { width: 60%; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); padding: var(--s6) var(--s4); }
.empty-state p { max-width: 42ch; color: var(--muted); margin: 0; }
.empty-state h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-2xl); }
.empty-state .art { width: 112px; height: 112px; border-radius: 50%; }
.disc { border-radius: 50%; overflow: hidden; background: var(--tile); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 0 var(--lip), 0 20px 26px -18px rgba(24,33,43,.6); flex-shrink: 0; display: inline-flex; }
.disc img { width: 100%; height: 100%; object-fit: cover; }

/* ---- The search box ------------------------------------------------------------------------- */
.sbox { position: relative; display: flex; flex-direction: column; gap: var(--s3); width: 100%; z-index: 8; }
.sfield { display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: 0 var(--s1) 0 var(--s4); border-radius: var(--r-pill); background: var(--card); box-shadow: var(--shadow); transition: box-shadow var(--d2) var(--ease); }
.sfield:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow); }
.sfield.glass { background: rgba(16, 20, 26, .38); box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); color: #fff; }
.sfield.glass:focus-within { box-shadow: inset 0 0 0 1px var(--glass-line), 0 0 0 3px rgba(242, 181, 68, .7); }
.sicon { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.sfield.glass .sicon { color: rgba(255,255,255,.8); }
.sinput { flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none; font-size: max(17px, calc(var(--t-m) + 1px)); color: inherit; padding: 0 var(--s1); -webkit-appearance: none; appearance: none; }
.sinput::-webkit-search-cancel-button { display: none; }
.sinput::placeholder { color: var(--muted); opacity: 1; }
.sfield.glass .sinput::placeholder { color: rgba(255,255,255,.72); }
.sinput:focus-visible { outline: none; box-shadow: none; }
.sclear { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: inherit; display: inline-flex; align-items: center; justify-content: center; opacity: .75; }
.sclear[hidden] { display: none; }
.sbox.compact .sfield { min-height: 48px; }
.sbox.compact .sinput { height: 46px; }
.sugs { position: absolute; left: 0; right: 0; top: calc(100% + var(--s2)); margin: 0; padding: var(--s1); list-style: none; background: var(--card); border-radius: var(--r-m); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 3px 0 var(--lip), 0 24px 40px -16px rgba(10,14,20,.45); max-height: min(70vh, 520px); overflow-y: auto; color: var(--ink); z-index: 30; animation: sugIn var(--d2) var(--ease) both; }
.sbox:not(.compact) .sugs { top: 64px; }
@keyframes sugIn { from { opacity: 0; transform: translateY(-4px); } }
.sug { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; padding: 0 var(--s3); border-radius: var(--r-s); cursor: pointer; font-size: var(--t-m); }
.sug .sw { font-family: var(--serif); font-size: calc(1.125rem * var(--scale)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sug .sw b { font-weight: 600; }
.sug .ssub { font-size: var(--t-xs); color: var(--muted); flex-shrink: 0; }
.sug:hover, .sug[aria-selected="true"] { background: var(--soft); }
.shead { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: var(--s2) var(--s3) var(--s1); }
.srow2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.smodes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gchip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-pill); border: 0; background: var(--card); color: var(--ink); font-weight: 700; font-size: var(--t-s); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 0 var(--lip); white-space: nowrap; text-decoration: none; }
.gchip .icon { width: 18px; height: 18px; }
.gchip[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.gchip.glass { background: rgba(16, 20, 26, .34); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.gchip.glass[aria-checked="true"] { background: rgba(255,255,255,.92); color: #18212B; }
@media (max-width: 380px) { .dice span { display: none; } .dice { padding: 0 var(--s3); } }

/* ---- Look up (home) ------------------------------------------------------------------------- */
.app[data-route="home"] main { padding: 0 !important; }
.app[data-route="home"] .topbar { position: absolute; left: 0; right: 0; top: 0; max-width: none; padding-top: calc(var(--s3) + var(--safe-top)); }
.app[data-route="home"] .brand { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.app[data-route="home"] .topnav, .app[data-route="home"] .bottomnav { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.app[data-route="home"] .topnav a, .app[data-route="home"] .bottomnav a { color: rgba(255,255,255,.8); }
.app[data-route="home"] .navind { background: rgba(255,255,255,.18) !important; }
.app[data-route="home"] .topnav a[aria-current="page"] { color: #fff; }
.app[data-route="home"] .bottomnav a[aria-current="page"] { color: #fff; }
body:has(#app[data-route="home"]) .ambient, body:has(#app[data-route="word"]) .ambient { display: none; }
.home { position: relative; min-height: 100dvh; color: #fff; display: flex; justify-content: center; }
.scene-bg { position: fixed; inset: 0; background: #0E1217; overflow: hidden; z-index: 0; }
.scene-bg img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: saturate(1.05) brightness(.84); animation: drift 30s ease-in-out infinite alternate; }
.scene-bg .wshade, .ehead .wshade, .dailyhero .wshade { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 46%, rgba(6,9,13,.3), rgba(6,9,13,.64) 100%), linear-gradient(to bottom, rgba(6,9,13,.5), rgba(6,9,13,.06) 26%, rgba(6,9,13,.1) 60%, rgba(6,9,13,.66)); }
.hinner { position: relative; z-index: 2; width: 100%; max-width: calc(680px + 2 * var(--gutter)); padding: calc(110px + var(--safe-top)) var(--gutter) calc(120px + var(--safe-bottom)); display: flex; flex-direction: column; gap: var(--s5); }
.htitle { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(clamp(34px, 8.6vw, 60px) * var(--scale)); line-height: 1.08; text-align: center; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.br-phone { display: none; }
@media (max-width: 480px) { .br-phone { display: inline; } }
.wotd { margin-top: auto; border-radius: var(--r-l); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); color: #fff; }
.wotd .kicker { color: rgba(255,255,255,.78); }
.wotd .kicker.soft { letter-spacing: 0; text-transform: none; font-weight: 400; }
.wotd-link { color: #fff; text-decoration: none; display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.wotd-word { font-family: var(--serif); font-size: calc(clamp(36px, 9vw, 52px) * var(--scale)); line-height: 1.05; }
.wotd-pos { font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.8); }
.wotd-def { margin: 0; font-size: var(--t-l); line-height: 1.45; max-width: 46ch; }
@media (min-width: 900px) { .hinner { padding-top: 150px; justify-content: flex-start; } .wotd { margin-top: var(--s7); } }

/* ---- Pronunciation pill --------------------------------------------------------------------- */
.say { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3) 0 var(--s4); border-radius: var(--r-pill); border: 0; font-size: var(--t-m); color: #fff; cursor: pointer; }
.say.glass { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.say .ipa { font-family: "Atkinson Hyperlegible", "Noto Sans", "DejaVu Sans", "Segoe UI", system-ui, sans-serif; }
.say.small { min-height: 40px; font-size: var(--t-s); }
.say.playing .icon { animation: pulse 1s var(--ease) infinite; }
.say.skel { width: 160px; }

/* ---- A word ---------------------------------------------------------------------------------- */
.app[data-route="word"] main { padding-top: 0 !important; }
.app[data-route="word"] .topbar { display: none; }
@media (min-width: 900px) { .app[data-route="word"] .topbar { display: flex; } }
.entry { position: relative; display: flex; flex-direction: column; width: 100%; }
.ehead { position: relative; min-height: min(56vh, 420px); color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.escene { position: absolute; inset: 0; background: #0E1217; }
.escene img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: saturate(1.05) brightness(.82); animation: drift 30s ease-in-out infinite alternate; }
.ebar { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s2); padding: calc(var(--s3) + var(--safe-top)) var(--gutter) 0; }
.ebar .grow { flex: 1; }
.iconbtn.glass { background: var(--glass); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ebar .iconbtn { width: 44px; height: 44px; }
.etitle { position: relative; z-index: 2; margin-top: auto; padding: var(--s5) var(--gutter) calc(var(--s6) + 24px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); width: 100%; max-width: calc(var(--narrow) + 2 * var(--gutter)); margin-inline: auto; }
.epos { font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.86); font-size: var(--t-m); }
.ehead-word { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(clamp(44px, 12vw, 84px) * var(--scale)); line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; max-width: 100%; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.eprons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.emeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); font-size: var(--t-s); color: rgba(255,255,255,.88); }
.syl { letter-spacing: .02em; }
.freq { display: inline-flex; align-items: center; gap: var(--s2); }
.freq .bars { display: inline-flex; align-items: flex-end; gap: 3px; }
.freq .bars i { width: 5px; border-radius: 3px; background: rgba(255,255,255,.3); display: block; }
.freq .bars i.on { background: var(--accent); }
.esheet { position: relative; z-index: 3; margin-top: -24px; background: var(--bg); border-radius: 28px 28px 0 0; padding: var(--s2) 0 var(--s8); box-shadow: 0 -18px 40px -24px rgba(0,0,0,.45); min-height: 50vh; }
.esheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("/art/grain.png") repeat; background-size: 72px; opacity: .35; pointer-events: none; }
[data-theme="dark"] .esheet::before { opacity: .4; filter: invert(1); }
.etabbar { position: sticky; top: 0; z-index: 6; padding: var(--s3) var(--gutter); background: var(--bg); border-radius: 28px 28px 0 0; display: flex; flex-direction: column; gap: var(--s2); max-width: calc(var(--narrow) + 2 * var(--gutter)); margin: 0 auto; }
.etabbar.stuck { border-radius: 0; box-shadow: 0 10px 20px -18px rgba(0,0,0,.5); }
.emini { display: none; font-size: var(--t-l); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: calc(var(--safe-top)); }
.etabbar.stuck .emini { display: block; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--soft); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.seg button { min-height: 40px; border: 0; background: none; border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-s); color: var(--muted); padding: 0 var(--s2); white-space: nowrap; transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease); }
.seg button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 0 var(--lip); }
@media (max-width: 360px) { .seg button { font-size: var(--t-xs); padding: 0 4px; } }
.epanel { position: relative; padding: var(--s4) var(--gutter) 0; max-width: calc(var(--narrow) + 2 * var(--gutter)); margin: 0 auto; }
.epanel > .stack.loose { --gap: var(--s6); }

/* Meanings */
.posgroup { display: flex; flex-direction: column; gap: var(--s3); }
.poshead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.poshead h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: calc(1.25rem * var(--scale)); line-height: 1.3; }
.poshead .muted { font-size: var(--t-xs); }
.poshead .forms { flex-basis: 100%; font-size: var(--t-s); color: var(--muted); }
.senses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.sense { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); background: var(--card); border-radius: var(--r-l); padding: var(--s4); box-shadow: var(--shadow); }
@media (min-width: 680px) { .sense { padding: var(--s5); } }
.sense .num { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font-family: var(--serif); font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; box-shadow: 0 2px 0 var(--lip); }
.senses > .sense:first-child .num { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 0 var(--accent-lip); }
.sbody { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.def { margin: 0; font-size: var(--t-m); line-height: 1.5; max-width: var(--measure); }
.labs { display: flex; flex-wrap: wrap; gap: var(--s1); }
.lab { font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; line-height: 1.2; padding: 4px 10px; border-radius: var(--r-pill); background: var(--soft); color: var(--muted); }
.lab.warn { background: var(--bad-bg); color: var(--bad); }
.exs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.ex { font-family: var(--serif); font-style: italic; font-size: var(--t-s); line-height: 1.5; color: var(--muted); padding-left: var(--s3); border-left: 3px solid var(--accent); max-width: var(--measure); }
.ex mark { background: none; color: var(--ink); font-weight: 600; font-style: italic; }
.ex .exsrc { display: block; font-family: var(--sans); font-style: normal; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }
a.exsrc { color: var(--muted); }
.ex.quote { border-left-color: var(--line); }
.subs { list-style: none; margin: var(--s1) 0 0; padding: var(--s3) 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.subs > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); }
.subn { font-size: var(--t-xs); font-weight: 700; color: var(--muted); padding-top: 3px; }
.similar { margin: var(--s1) 0 0; font-size: var(--t-s); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.similar a { color: var(--link); }
.similar .more { min-height: 32px; margin-left: var(--s2); gap: 2px; text-decoration: none; font-weight: 700; }
.showmore { margin-top: var(--s1); }
.btn.wide { width: 100%; }
.note { display: flex; gap: var(--s3); align-items: flex-start; background: var(--good-bg); color: var(--ink); border-radius: var(--r-m); padding: var(--s3) var(--s4); margin: 0; }
.note .icon { color: var(--good); flex-shrink: 0; margin-top: 2px; }
.note.quiet { background: var(--soft); }
.teaser { display: flex; align-items: center; gap: var(--s4); width: 100%; text-align: left; border: 0; background: var(--card); color: var(--ink); border-radius: var(--r-l); padding: var(--s4); box-shadow: var(--shadow); }
.teaser img { border-radius: 50%; background: var(--tile); flex-shrink: 0; }
.teaser .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.teaser .muted { font-size: var(--t-s); }
.attrib { font-size: var(--t-xs); color: var(--muted); margin: 0; line-height: 1.5; }
.attrib a, .attrib .linkbtn { color: var(--muted); font-size: inherit; min-height: 0; padding: 0; }

/* Synonyms */
.mpick { display: flex; flex-direction: column; gap: var(--s2); }
.mopt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--s3); min-height: 56px; text-align: left; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-m); padding: var(--s3) var(--s4); }
.mopt[aria-checked="true"] { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.mpos { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: var(--t-s); min-width: 3.5em; }
.mdef { font-size: var(--t-s); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tryit { gap: var(--s2); }
.trysent { margin: 0; font-family: var(--serif); font-size: calc(clamp(19px, 4.6vw, 23px) * var(--scale)); line-height: 1.4; }
.trysent mark { background: color-mix(in srgb, var(--accent) 34%, transparent); color: inherit; border-radius: 6px; padding: 0 6px; font-weight: 600; display: inline-block; }
.tier { display: flex; flex-direction: column; gap: var(--s3); }
.tier h3 { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wchips { gap: var(--s2) var(--s2); }
.wchip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s4); border-radius: var(--r-pill); border: 0; background: var(--card); color: var(--ink); font-family: var(--serif); font-size: calc(1.125rem * var(--scale)); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 3px 0 var(--lip); margin-bottom: 3px; white-space: nowrap; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: transform var(--d1) var(--ease), background-color var(--d2) var(--ease); }
.wchip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lip); }
.wchip.small { min-height: 44px; font-size: calc(1.0625rem * var(--scale)); }
.wchip.soft { background: color-mix(in srgb, var(--card) 70%, var(--soft)); }
.wchip.opp { background: color-mix(in srgb, var(--berry) 9%, var(--card)); }
.wchip.sel { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 3px 0 var(--accent-lip); }
.wchip.static { box-shadow: none; background: var(--soft); }

/* Origin: the word's journey */
.ohead { display: flex; flex-direction: column; gap: var(--s1); }
.omap { padding: var(--s5) 0 var(--s6); }
.ostop { width: min(260px, 70%); margin-bottom: var(--s6); }
.ostop .disc { width: 84px; height: 84px; }
.ostop.current .disc { width: 96px; height: 96px; }
.olab { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: var(--card); border-radius: var(--r-m); padding: var(--s2) var(--s4); box-shadow: 0 2px 0 var(--lip); max-width: 100%; }
.olang { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.oword { font-family: var(--serif); font-weight: 400; font-size: calc(1.375rem * var(--scale)); line-height: 1.2; overflow-wrap: anywhere; }
.ogloss { font-size: var(--t-s); color: var(--ink); }
.oera { font-size: var(--t-xs); color: var(--muted); }
.trail path.walked.draw { stroke: var(--accent); stroke-width: 6; stroke-dasharray: 2 16; animation: walk 2.4s var(--ease) both .3s; }
@keyframes walk { from { opacity: 0; } to { opacity: 1; } }
.otext { margin: 0; line-height: 1.6; max-width: var(--measure); }
.ocard h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: calc(1.25rem * var(--scale)); }
.ostop { animation: nodeIn .6s var(--spring) both; animation-delay: calc(var(--i, 0) * 160ms + 200ms); }
@media (prefers-reduced-motion: reduce) { .ostop, .trail path.walked.draw { animation: none; } }

/* ---- Describe it ------------------------------------------------------------------------------ */
.dhead { display: flex; align-items: center; gap: var(--s4); }
.dhead .disc { width: 96px; height: 96px; }
@media (max-width: 380px) { .dhead .disc { width: 72px; height: 72px; } }
.dform { gap: var(--s3); }
.dinput { width: 100%; border: 0; background: none; resize: vertical; min-height: 84px; font-family: var(--serif); font-size: max(19px, calc(1.1875rem * var(--scale))); line-height: 1.4; color: var(--ink); outline: none; padding: 0; }
.dform:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 40%, transparent), var(--shadow); }
.dbest { text-decoration: none; color: var(--ink); gap: var(--s2); border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.dword { font-family: var(--serif); font-size: calc(clamp(30px, 7vw, 40px) * var(--scale)); line-height: 1.1; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); }
.dword.small { font-size: calc(1.375rem * var(--scale)); }
.dpos { font-family: var(--serif); font-style: italic; font-size: var(--t-s); color: var(--muted); }
.dgloss { font-size: var(--t-s); color: var(--muted); line-height: 1.45; }
.dlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drow { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s1); min-height: 64px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.drow .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dmatch { font-size: var(--t-xs); font-weight: 700; color: var(--muted); background: var(--soft); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }
.dmatch.strong { background: var(--good-bg); color: var(--good); }
.skel-row { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; }
.dym { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---- Lists of words (Library, Daily, topics) ------------------------------------------------- */
.llist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.llist > li { border-bottom: 1px solid var(--line); }
.llist > li:last-child { border-bottom: 0; }
.lrow { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--s3) var(--s4); text-decoration: none; color: var(--ink); }
.lrow:hover { background: color-mix(in srgb, var(--soft) 55%, transparent); }
.ww { font-family: var(--serif); font-size: calc(1.1875rem * var(--scale)); line-height: 1.25; overflow-wrap: anywhere; }
.wd { font-size: var(--t-s); color: var(--muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lli { display: flex; align-items: center; }
.lli .lrow { flex: 1; min-width: 0; }
.lli .iconbtn.small { width: 44px; height: 44px; margin-right: var(--s3); box-shadow: none; background: var(--soft); }
.switch.inline { border-bottom: 0; padding: 0; min-height: 48px; gap: var(--s3); }

/* ---- Explore and Daily -------------------------------------------------------------------- */
.lib.explore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .lib.explore { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lib.explore .gcard { text-decoration: none; }
.lib.explore .gcard small { margin-top: -6px; }
.thead { display: flex; align-items: center; gap: var(--s4); }
.thead .disc { width: 96px; height: 96px; }
.vocab-card { display: flex; align-items: center; gap: var(--s4); text-decoration: none; color: var(--ink); background: var(--card); border-radius: var(--r-l); padding: var(--s4); box-shadow: var(--shadow); }
.vocab-card img { border-radius: 12px; flex-shrink: 0; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.vocab-card .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vocab-card .muted { font-size: var(--t-s); }
.panel .vocab-card { box-shadow: none; background: var(--soft); }
.dailyhero { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; min-height: 260px; color: #fff; text-decoration: none; box-shadow: var(--shadow-lift); }
.dh-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); }
.dh-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6) var(--s5) var(--s5); min-height: 260px; justify-content: flex-end; }
.dh-text .kicker { color: rgba(255,255,255,.8); }
.dh-word { font-family: var(--serif); font-size: calc(clamp(40px, 10vw, 60px) * var(--scale)); line-height: 1.05; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.dh-def { font-size: var(--t-m); max-width: 46ch; line-height: 1.45; }

/* ---- Settings bits ------------------------------------------------------------------------- */
.shead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.shead .page-head { flex: 1; min-width: 200px; }
.people.compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.people.compact .person[aria-pressed="true"] .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }
progress { width: 100%; height: 10px; accent-color: var(--accent); }

/* ---- Wide screens: the word on its scene beside the reading column ---------------------------- */
@media (min-width: 1000px) {
  .entry { display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); gap: var(--s6); max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s4) var(--gutter) 0; align-items: start; }
  .ehead { position: sticky; top: 88px; min-height: calc(100vh - 120px); max-height: 760px; border-radius: 28px; box-shadow: 0 3px 0 var(--lip), 0 30px 50px -30px rgba(0,0,0,.6); }
  .etitle { padding: var(--s6); max-width: none; }
  .ebar { padding: var(--s4) var(--s5) 0; }
  .ebar .iconbtn[aria-label="Back"] { display: none; }
  .esheet { margin-top: 0; background: none; box-shadow: none; padding-top: 0; }
  .esheet::before { display: none; }
  .etabbar { top: 72px; background: var(--bg); border-radius: var(--r-l); padding-inline: 0; max-width: none; }
  .etabbar.stuck { border-radius: 0; }
  .epanel { padding-inline: 0; max-width: none; }
  .app[data-route="word"] main { padding-top: 0 !important; }
}

/* Synonym sorting, mix-ups and "choosing the right word" */
.sortrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sorter { flex-wrap: wrap; }
.card.usage, .card.mix { gap: var(--s2); }
.uwords { margin: 0; font-family: var(--serif); font-size: var(--t-l); line-height: 1.4; overflow-wrap: anywhere; }
.uwords a, .mixpair a { color: var(--link); text-decoration: none; }
.uwords .dot { color: var(--muted); }
.unote { margin: 0; font-size: var(--t-m); line-height: 1.55; max-width: 62ch; }
.mixrow + .mixrow { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s1); }
.mixpair { margin: 0 0 var(--s1); font-family: var(--serif); font-size: var(--t-l); }
.ofacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s3); }
.ofact { background: var(--card); border-radius: var(--r-m); padding: var(--s3) var(--s4); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--s1); min-width: 0; overflow-wrap: anywhere; }
.ofact strong { font-family: var(--serif); font-size: var(--t-l); font-weight: 600; }
.ofact .muted { font-size: var(--t-s); }
.note.form { align-items: center; flex-wrap: wrap; }
.note.form .grow { flex: 1 1 200px; min-width: 0; }
.wchip.static.here { background: color-mix(in srgb, var(--accent) 30%, var(--card)); font-weight: 600; }
.sense { position: relative; }
.sact { position: absolute; top: 0; right: 0; opacity: .7; }
.sact:hover, .sact:focus-visible { opacity: 1; }
.sense .sbody { padding-right: 44px; }
.sense.flash { animation: flashSense 2.2s var(--ease) 1; border-radius: var(--r-m); }
@keyframes flashSense { 0%, 30% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
.cite { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.citetext { margin: 0; font-size: var(--t-s); line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
@media print {
  .topbar, .bottomnav, .etabbar, .sact, .iconbtn, footer, .teaser, .attrib button, .sbox, .toast, #layer, .freq, .etabs, .emini, .nearby, .eprons .slow, .ios-statusband, .showmore, .findm { display: none !important; }
  .ehead-word { text-shadow: none !important; color: #000 !important; }
  .say { display: inline-flex !important; background: none !important; box-shadow: none !important; color: #000 !important; border: 0 !important; padding: 0 !important; }
  .say .icon { display: none !important; }
  .teaser.origin { display: flex !important; box-shadow: none !important; }
  .esheet::after { content: "lookup.b7collective.com"; display: block; margin-top: 16px; font-size: 11px; color: #555; }
  .escene { display: none !important; }
  .ehead { min-height: 0 !important; color: #000 !important; }
  body { background: #fff !important; color: #000 !important; }
  .sense { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}
.findm { width: 100%; min-height: 48px; font-size: max(16px, var(--t-m)); }
.teaser.vocab { text-decoration: none; color: var(--ink); }
/* The search field's own input never takes the general input styling */
.sfield .sinput, .sfield .sinput:focus { background: none; box-shadow: none; border: 0; border-radius: 0; }
/* Top bar on phones: logo, a compact Install button and the profile always fit */
@media (max-width: 599px) {
  .topbar { gap: var(--s2); }
  .topbar .brand span { font-size: 20px; }
  .topbar .btn.getapp { padding: 0 var(--s3); min-height: 44px; }
  .topbar .getapp .wide-only { display: none; }
}
@media (max-width: 379px) { .topbar .brand span { display: none; } }
.sact { background: none; box-shadow: none; color: var(--muted); }
.sact .icon { width: 18px; height: 18px; }

/* ---- Text fields: even padding, text centered vertically, and fields that grow with what you type ---------------- */
.app input[type="text"], .app input[type="search"]:not(.sinput), .app input[type="password"], .app input[type="number"], .app select {
  min-height: 52px; padding: 0 var(--s4); line-height: 1.3; border-radius: var(--r-m);
}
.app textarea, .sheet textarea {
  display: block; width: 100%; min-height: 52px; padding: 14px var(--s4); line-height: 1.45; resize: none; overflow-y: hidden;
  border-radius: var(--r-m); box-sizing: border-box; font-size: max(16px, var(--t-m)); max-height: 50vh;
}
.app textarea.scrolls, .sheet textarea.scrolls { overflow-y: auto; }
/* Describe it: the description box is a real field, starting at one line and growing as the description does */
.dinput { min-height: 60px; padding: 16px var(--s4); border-radius: var(--r-m); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); line-height: 1.4; }
.dinput:focus { box-shadow: inset 0 0 0 2px var(--link); }
.dform .split { align-items: center; }
.findm { padding: 0 var(--s4); }

/* ---- Buttons, pills and chips: label centered both ways, icon and text on one line ------------------------------- */
.btn, .chip, .gchip, .wchip, .tab, .say, .mode, .linkbtn.more, .iconbtn { justify-content: center; text-align: center; line-height: 1.2; }
.btn > span, .chip > span, .gchip > span { display: inline-flex; align-items: center; }
.btn .icon, .chip .icon, .gchip .icon, .iconbtn .icon { flex-shrink: 0; }
.iconbtn { display: inline-flex; align-items: center; }
.sfield .sinput { color: inherit; }
.sfield.glass .sinput { color: #fff; caret-color: #fff; }
.sheet textarea.input { min-height: 112px; }

/* ---- Installed app: full screen ------------------------------------------------------------------------------------
   Android and desktop hide the status bar, navigation bar and taskbar (manifest display: fullscreen). iPhone and iPad
   always show the status bar; the app draws under it, with a soft dark band so the clock stays readable. */
@media (display-mode: fullscreen), (display-mode: standalone) {
  html { overscroll-behavior-y: none; }
}
.ios-statusband { position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px); z-index: 50; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 14, 20, .55), rgba(10, 14, 20, .25)); }

/* ---- Foldables -----------------------------------------------------------------------------------------------------
   Every layout is fluid from a 280px cover screen up, so folded and unfolded phones get the same app at their size.
   When a page spans two screens side by side (a book-style fold, or a dual-screen device), the word sits on the left
   screen and its meanings on the right, so nothing falls into the hinge. Stacked screens (tabletop posture) put the
   word above the hinge and the meanings below it. */
@media (max-width: 300px) {
  :root { --gutter: 12px; }
  .btn { padding: 0 var(--s3); }
  .gchip, .chip, .wchip { padding: 0 var(--s3); }
  .smodes { gap: var(--s1); }
  .ehead-word { font-size: clamp(30px, 11vw, 44px) !important; }
}
@media (horizontal-viewport-segments: 2) {
  .entry:not(.loading) { display: grid; grid-template-columns: env(viewport-segment-width 0 0, 50%) env(viewport-segment-width 1 0, 50%);
    column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px)); align-items: start; }
  .entry:not(.loading) > .ehead { position: sticky; top: 0; height: 100dvh; }
  .entry:not(.loading) > .esheet { margin-top: 0; border-radius: 0; min-height: 100dvh; }
  .hinner { max-width: env(viewport-segment-width 0 0, 50%); }
  .page { max-width: min(var(--wide), env(viewport-segment-width 1 0, 100%)); margin-left: env(viewport-segment-left 1 0, auto); }
}
@media (vertical-viewport-segments: 2) {
  .entry:not(.loading) > .ehead { height: env(viewport-segment-height 0 0, 50dvh); min-height: 0; }
  .entry:not(.loading) > .esheet { margin-top: calc(env(viewport-segment-top 0 1, 0px) - env(viewport-segment-bottom 0 0, 0px)); }
}
.gram { display: block; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: var(--t-s); margin-bottom: 2px; }
.sayslike { font-size: var(--t-s); color: rgba(255,255,255,.86); }
.sayslike strong { font-weight: 700; letter-spacing: .02em; }
.wchip.rare { opacity: .8; font-style: italic; }
.split.start { justify-content: flex-start; gap: var(--s4); flex-wrap: wrap; }
.note.fix { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
/* The search field is a one-line text area that grows: icon and clear button stay on the first line */
.sfield { align-items: flex-start; }
.sfield .sicon, .sfield .sclear { height: 56px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app .sfield .sinput, .sheet .sfield .sinput { display: block; min-height: 56px; height: 56px; padding: 15px var(--s1); line-height: 26px; resize: none; overflow-y: hidden;
  max-height: calc(4 * 26px + 30px); border-radius: 0; box-shadow: none; background: none; font-size: max(17px, calc(var(--t-m) + 1px)); }
.sbox.compact .sfield { min-height: 48px; }
.sbox.compact .sfield .sicon, .sbox.compact .sfield .sclear { height: 48px; }
.app .sbox.compact .sfield .sinput { min-height: 48px; height: 48px; padding: 11px var(--s1); }
@media (max-width: 360px) { .btn { white-space: normal; line-height: 1.25; padding-block: 10px; } }
.sfield .sclear[hidden] { display: none; }

/* ---- Every screen, every fold (continued) ---------------------------------------------------------------------- */
/* Cover screens: word tabs scroll instead of squeezing, the bottom bar keeps a margin, credits wrap */
@media (max-width: 320px) {
  .bottomnav { left: 6px !important; right: 6px !important; }
  .bottomnav a { font-size: 11px; padding-inline: 2px; min-width: 0; }
}
.attrib { display: flex; flex-wrap: wrap; column-gap: var(--s2); row-gap: 2px; align-items: baseline; }
/* Short landscape (an unfolded phone held sideways, a phone turned sideways): places as icons in the top bar */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 540px) {
  .topnav .lbl { display: none; }
  .topnav a { padding: 0 var(--s2); }
  .topbar .getapp .wide-only { display: none; }
}
@media (max-width: 1099px) { .topbar { min-width: 0; } .topnav { flex-shrink: 1; min-width: 0; } }
@media (max-width: 1099px) and (min-width: 900px) { .topnav .lbl { display: none; } }
/* Book-style unfolded screens held open (about 760 to 999 wide, wider than tall): two equal panes, so the word sits
   on one half and its meanings on the other, and nothing lands on the crease */
@media (min-width: 760px) and (max-width: 999px) and (min-aspect-ratio: 1/1) {
  .entry:not(.loading) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding: var(--s3) var(--gutter) 0; align-items: start; }
  .entry:not(.loading) .ehead { position: sticky; top: var(--s3); min-height: calc(100dvh - 2 * var(--s3)); max-height: none; border-radius: 28px; }
  .entry:not(.loading) .esheet { margin-top: 0; background: none; box-shadow: none; padding-top: 0; }
  .entry:not(.loading) .etabbar { top: 0; background: var(--bg); }
}
/* Big text, zoomed pages and short windows: a shorter scene, so the first meaning shows on arrival */
@media (max-width: 999px) { .ehead { min-height: min(46vh, 420px); } }
@media (max-height: 640px) and (max-width: 999px) { .ehead { min-height: min(40vh, 300px); } .ebar { padding-top: calc(var(--s2) + var(--safe-top)); } }
@media (min-width: 1000px) { .ehead { max-height: min(760px, calc(100vh - 120px)); } }
@media (horizontal-viewport-segments: 2) {
  .sheet { left: env(viewport-segment-left 1 0) !important; right: 0; width: auto; }
  .bottomnav { left: calc(env(viewport-segment-left 1 0) + 10px) !important; }
}
@media (display-mode: fullscreen) { .getapp { display: none !important; } }
/* The word and home pages paint under the status bar themselves (their bars add the safe area), so no double gap */
@media (max-width: 999px) { .app[data-route="word"], .app[data-route="home"] { padding-top: 0; } }
.app[data-route="home"] { padding-top: 0; }
.say .pron { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.say .ipa2 { display: block; font-size: var(--t-xs); opacity: .8; font-weight: 400; }
.eprons { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
/* a button beside a setting's text keeps its label on one line; the text takes the squeeze */
.switch > .btn { flex-shrink: 0; white-space: nowrap; }
.switch > .txt { min-width: 0; }
/* Layout audit fixes (reviews/layout.md, items 1 to 18) */
.page > .shead { font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit; padding: 0; }
.seg { display: flex; flex-wrap: wrap; border-radius: 24px; }
.seg button { flex: 1 1 0; min-width: max-content; min-height: var(--tap); padding: 0 var(--s3); }
.etabbar { container: etab / inline-size; }
@container etab (max-width: 18em) { .etabs button { flex: 1 1 calc(50% - 1px); } }
.app .sfield .sinput.scrolls { overflow-y: auto; }
.sfield { border-radius: 28px; }
.sbox.compact .sfield { border-radius: 24px; }
.btn > span { display: inline; text-align: center; }
.topbar .btn.getapp { font-size: min(var(--t-s), 16px); }
.topbar .brand { min-width: 0; }
.topbar .brand span { overflow: hidden; text-overflow: ellipsis; }
.app .dinput { min-height: 56px; padding: 15px var(--s4); line-height: 26px; }
.dform:focus-within { box-shadow: var(--shadow); }
.seg button, .segctl button, .say.small, .similar .more { min-height: var(--tap); }
.topnav a { min-height: var(--tap); min-width: var(--tap); justify-content: center; }
@media (max-width: 360px) { .btn.small { white-space: nowrap; } .btn:not(.small) { text-wrap: balance; } }
@media (horizontal-viewport-segments: 2) {
  .home { justify-content: flex-start; }
  .hinner { margin-right: auto; }
  .entry:not(.loading) { padding: 0; margin: 0; max-width: none; width: 100%; }
  .entry:not(.loading) > .ehead { border-radius: 0; top: 0; }
  .app.has-nav .topbar { max-width: none; }
  .topnav { margin-left: auto; }
  .topnav .lbl { display: none; }
  .topsearch { max-width: calc(env(viewport-segment-right 0 0, 50vw) - 240px); }
}
.sense .sbody { padding-right: 0; }
/* the quote button sits in the card's top right corner and reaches 32px into the text column and 32px down;
   only the first line or two of a meaning give way to it, so definitions keep their full width below */
.sense .sbody > :first-child { padding-right: 34px; }
.sense .sbody > .labs:first-child + * { padding-right: 34px; }
@media (min-width: 760px) and (max-width: 999px) and (min-aspect-ratio: 1/1) and (max-height: 639px) {
  .entry:not(.loading) { display: flex; padding: 0; }
  .entry:not(.loading) .ehead { position: relative; top: 0; min-height: min(40vh, 300px); border-radius: 0; }
  .entry:not(.loading) .esheet { margin-top: -24px; background: var(--bg); }
}
.htitle { font-size: min(calc(clamp(34px, 8.6vw, 60px) * var(--scale)), 13vw); }
@media (max-width: 300px) { .ehead-word { font-size: calc(clamp(30px, 11vw, 44px) * var(--scale)) !important; } }
.page .dhead { flex-direction: row; align-items: center; }
[data-theme="dark"] .btn { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 0 var(--lip), 0 12px 20px -14px rgba(0,0,0,.6); }
[data-theme="dark"] .btn.quiet, [data-theme="dark"] .wchip { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 3px 0 var(--lip); }
[data-theme="dark"] .gchip:not(.glass), [data-theme="dark"] .chip { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 0 var(--lip); }
[data-theme="dark"] .seg button[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 10%, var(--card)); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 0 var(--lip); }
[data-theme="dark"] .btn.primary { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 0 var(--accent-lip), 0 12px 20px -14px rgba(0,0,0,.6); }
:root:not([data-theme="dark"]) .note.quiet a, :root:not([data-theme="dark"]) .wchip.static a { color: #1A5E66; }
.actions > .btn.quiet, .dym > .btn.quiet { min-height: 52px; border-radius: var(--r-m); margin-bottom: 4px; }
.say { padding: 0 14px; }
.mopt { align-content: center; }
.llist.mix .wd { -webkit-line-clamp: 5; line-clamp: 5; }