/* Components. Tokens are in theme.css. */

@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #d9d3c9; font-family: var(--sys); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { display: grid; place-items: center; }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; }
a { color: inherit; }

.phone { position: relative; width: 393px; height: 852px; max-width: 100vw; max-height: 100vh; background: var(--bone); overflow: hidden; }
@media (min-width: 500px) and (min-height: 900px) { .phone { border-radius: 48px; box-shadow: 0 30px 80px rgb(var(--ink-rgb) / .25), 0 0 0 10px #1c1410; } }

.status { position: absolute; z-index: 90; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 40px; font-weight: 600; font-size: 16px; pointer-events: none; }
.status svg { display: block; }
.homebar { position: absolute; z-index: 95; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ink); opacity: .85; pointer-events: none; }

.scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 54px 0 34px; background: var(--bone); transition: transform .45s cubic-bezier(.32,.72,0,1), opacity .45s; will-change: transform; }
.scr.is-right { transform: translateX(100%); pointer-events: none; }
.scr.is-left { transform: translateX(-28%); opacity: 0; pointer-events: none; }
.scr.is-fade { opacity: 0; transform: none; pointer-events: none; }
.scr.is-down { transform: translateY(100%); pointer-events: none; }
.scr.tabbed { padding-bottom: 0; }
.scr.tabbed .body { padding-bottom: 110px; }

.nav { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; flex: none; position: relative; }
.nav-b { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--deep); font-size: 17px; }
.nav-b.txt { padding: 0 8px; }
.nav-b.back { justify-content: flex-start; gap: 6px; padding: 0 8px 0 4px; }
.nav-c { position: absolute; left: 50%; transform: translateX(-50%); font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-r { display: flex; align-items: center; }
.dots { display: flex; gap: 6px; }
.dots i { width: 22px; height: 4px; border-radius: 2px; background: rgb(var(--ink-rgb) / .14); }
.dots i.on { background: var(--clay); }

.body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 20px 16px; scrollbar-width: none; }
.body::-webkit-scrollbar { display: none; }
.lt { font: 400 38px/1.02 var(--serif); letter-spacing: -.01em; margin: 6px 0 8px; }
.sub { font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.foot { flex: none; padding: 10px 20px 8px; display: flex; flex-direction: column; gap: 8px; }
/* Buttons keep their height in any flex parent: flex-basis never wins over it (the Compare bug, 11 Nov: a column flex
   with `flex: 1` on its children had squashed both buttons to the height of their text). */
.btn { height: 54px; min-height: 54px; flex-shrink: 0; border-radius: var(--r-btn); background: var(--ink); color: var(--card); font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, opacity .2s; width: 100%; text-align: center; }
.btn:active { transform: scale(.98); }
.btn.clay { background: var(--clay); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn2 { height: 46px; min-height: 46px; flex-shrink: 0; border-radius: var(--r-btn); border: 1px solid rgb(var(--ink-rgb) / .22); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; }
.lnk { color: var(--deep); font-size: 15px; font-weight: 600; padding: 10px 0; }
.lnk.danger { color: var(--danger); }
.muted { color: var(--muted); }

.card { background: var(--card); border: 1px solid rgb(var(--ink-rgb) / .1); border-radius: 20px; padding: 18px; }

/* welcome */
.welcome { justify-content: space-between; }
.wl-art { position: relative; margin: 40px auto 0; width: 70%; max-width: 276px; }
@keyframes breathe { 50% { transform: scale(1.03) rotate(-1.5deg); } }
.wl-copy { padding: 0 28px; text-align: center; }
.wl-brand { display: inline-flex; align-items: center; gap: 10px; font: 400 34px/1 var(--serif); margin-bottom: 18px; }
.wl-h { font: 400 37px/1.04 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.wl-h em { display: block; }
.wl-h em { color: var(--clay); }
/* F3: the product name is the opening screen's title, in the look's own serif; the tagline sits under it, smaller. */
.wl-copy .wl-name { font: 400 64px/.98 var(--serif); letter-spacing: -.025em; color: var(--ink); margin: 0 0 16px; text-wrap: balance; }
.wl-copy .wl-h.wl-tag { font-size: 23px; line-height: 1.3; letter-spacing: -.005em; max-width: 21em; margin: 0 auto; }
.wl-copy .wl-h.wl-tag em { display: inline; }

/* links */
.field { margin-top: 22px; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid rgb(var(--ink-rgb) / .14); border-radius: 16px; padding: 0 8px 0 16px; height: 56px; }
.field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 17px; min-width: 0; }
.field input::placeholder { color: var(--faint); }
.field .add { height: 40px; padding: 0 14px; border-radius: 12px; background: var(--ink); color: var(--card); font-weight: 600; font-size: 15px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.svc { height: 46px; border-radius: 14px; background: var(--card); border: 1px solid rgb(var(--ink-rgb) / .08); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: opacity .3s; }
.svc.done { opacity: .35; }
.glyph { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; color: #fff; font: 600 12px/1 var(--sys); }
.glyph.lg { width: 40px; height: 40px; border-radius: 11px; font-size: 16px; }
.glyph.xl { width: 64px; height: 64px; border-radius: 18px; font-size: 26px; }
.glyph.sm { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
.found { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.frow { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid rgb(var(--ink-rgb) / .1); border-radius: 16px; padding: 9px 14px; animation: rise .4s cubic-bezier(.32,.72,0,1); }
.frow .glyph { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.frow .t { flex: 1; min-width: 0; }
.frow .rm { width: 28px; height: 28px; margin-right: -6px; border-radius: 50%; color: var(--muted); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.frow .t b { display: block; font-size: 15px; font-weight: 600; }
.frow .t span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 3px; border-radius: 2px; background: rgb(var(--ink-rgb) / .1); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--clay); transition: width 1.6s ease-out; }
.ok { width: 24px; height: 24px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; flex: none; opacity: 0; transform: scale(.5); transition: .3s; }
.frow.is-done .ok { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* paste */
.prompt { margin-top: 20px; }
.prompt p { font: italic 400 19px/1.35 var(--serif); color: var(--ink-2); }
.prompt .row { display: flex; gap: 8px; margin-top: 14px; }
textarea { width: 100%; margin-top: 12px; height: 270px; resize: none; border-radius: 16px; border: 1px solid rgb(var(--ink-rgb) / .14); background: var(--card); padding: 14px 16px; font-size: 15px; line-height: 1.45; outline: 0; }
textarea::placeholder { color: var(--faint); }

/* music */
.am { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.am-btn { width: 100%; height: 60px; border-radius: 18px; background: linear-gradient(180deg,#fb5c74,#fa233b); color: #fff; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 24px rgba(250,35,59,.25); }
.artists { width: 100%; display: flex; flex-direction: column; gap: 2px; }
.artist { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); animation: rise .45s both cubic-bezier(.32,.72,0,1); }
.artist .disc { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font: 400 20px/1 var(--serif); }
.artist b { font-size: 16px; font-weight: 600; display: block; }
.artist span { font-size: 13px; color: var(--muted); }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: rot .8s linear infinite; display: inline-block; }
.spin.dk { border-color: rgb(var(--ink-rgb) / .18); border-top-color: var(--clay); width: 18px; height: 18px; }
@keyframes rot { to { transform: rotate(360deg); } }

/* voice */
.vq { margin-top: 10px; font: italic 400 26px/1.2 var(--serif); color: var(--deep); }
.wave { height: 70px; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 26px 0 10px; }
.wave i { width: 4px; border-radius: 2px; background: var(--clay); height: 6px; transition: height .12s; opacity: .85; }
.timer { text-align: center; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--muted); }
.tx { margin-top: 18px; min-height: 160px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.tx .cur { display: inline-block; width: 2px; height: 1.1em; background: var(--clay); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mic { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto; background: var(--clay); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 8px rgb(var(--clay-rgb) / .14); transition: .25s; }
.mic.rec { background: var(--ink); box-shadow: 0 0 0 8px rgb(var(--ink-rgb) / .1); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgb(var(--ink-rgb) / .06); } }

/* weaving */
.weave { align-items: center; justify-content: center; text-align: center; }
.wv-art { width: 330px; position: relative; }
@keyframes sweep { to { --sweep: 360deg; } }
.wv-t { margin-top: 26px; font: 400 32px/1.1 var(--serif); }
.notice { position: relative; height: 92px; width: 330px; margin-top: 18px; }
.notice div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(8px); transition: .5s; }
.notice div.on { opacity: 1; transform: none; }
.ar { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ar i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.notice p { font: italic 400 21px/1.3 var(--serif); color: var(--ink-2); }


/* insight cards */
.deck { position: relative; margin-top: 18px; height: 440px; }
.ic { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; background: var(--card); border: 1px solid rgb(var(--ink-rgb) / .1); border-radius: 24px; box-shadow: 0 1px 0 rgb(var(--ink-rgb) / .04), 0 18px 40px -20px rgb(var(--ink-rgb) / .25); transition: transform .5s cubic-bezier(.32,.72,0,1), opacity .5s; }
.ic.static { position: relative; inset: auto; min-height: 430px; }
.ic-ink { display: none; }
.ic .area { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ic .area i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ic h3 { font: 400 40px/1.02 var(--serif); letter-spacing: -.005em; }
.ic p { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
q.qt, .ic q { display: block; font: italic 400 19px/1.35 var(--serif); color: var(--deep); border-left: 2px solid var(--c); padding-left: 12px; quotes: none; }
.ic .src { margin-top: auto; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ic .src span { padding: 4px 9px; border-radius: 999px; background: var(--tint); color: var(--ink-2); font-weight: 500; }
.between { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px dashed rgb(var(--clay-rgb) / .6); color: var(--clay); display: inline-block; }
.ic.gone-r { transform: translateX(120%) rotate(8deg); opacity: 0; }
.ic.gone-l { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.ic.back1 { transform: translateY(14px) scale(.95); }
.ic.back2 { transform: translateY(28px) scale(.9); opacity: .6; }
.ic.hide { transform: translateY(40px) scale(.86); opacity: 0; }
/* B11, the deck: only the front reflection is ever read. The ones behind are blank sheets whose edges peek below it,
   so no words or outlines are drawn through the front card at any frame. On entrance the front arrives alone and
   opaque; the peeking edges follow once it has settled. A card that comes forward after a vote shows its words only
   once the card before it has flown off, so text never crosses text. */
.deck .ic.back1 > *, .deck .ic.back2 > *, .deck .ic.hide > * { visibility: hidden; }
.deck .ic.back1.back1, .deck .ic.back2.back2 { pointer-events: none; box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .2), 0 10px 24px -20px rgb(var(--ink-rgb) / .3); }
.deck .ic.back1 { transform: translateY(22px) scale(.95); }
.deck .ic.back2 { transform: translateY(40px) scale(.9); }
.deck.entering .ic.back1, .deck.entering .ic.back2 { animation: deck-peek .55s cubic-bezier(.22,1,.36,1) 1.05s both; }
.deck .ic.front.came > :not(.ic-ink):not(.stamp):not(.ic-seal) { animation: deck-words .4s cubic-bezier(.22,1,.36,1) .26s both; }
/* Field guide presses its seal for 300 ms before the card leaves: the next card's words wait for that too. */
[data-theme="fieldguide"] .deck .ic.front.came > :not(.ic-ink):not(.stamp):not(.ic-seal) { animation-delay: .62s; }
@keyframes deck-peek { from { opacity: 0; } }
@keyframes deck-words { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.vote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pill { height: 54px; border-radius: var(--r-btn); border: 1px solid rgb(var(--ink-rgb) / .18); background: var(--card); font-size: 16px; font-weight: 600; text-align: center; transition: .2s; }
.pill.yes { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.pill.no { background: var(--red-bg); border-color: #d9a493; color: var(--red); }
.vote.voted .pill { opacity: .4; }
.vote.voted .pill.sel { opacity: 1; box-shadow: inset 0 0 0 2px currentColor; }
.count { text-align: center; font-size: 13px; color: var(--muted); margin-top: 22px; font-variant-numeric: tabular-nums; }

/* edges */
.edges { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.edge { padding: 16px 16px 14px; position: relative; transition: opacity .3s, transform .3s; }
.edge h4 { margin: 0 0 4px; font: 400 23px/1.15 var(--serif); padding-right: 30px; }
.edge p { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.edge .how { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.edge .how .glyph { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.edge .x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--tint); }
.edge.out { opacity: 0; transform: scale(.96); }
.edge .acts { margin-top: 12px; display: flex; align-items: center; gap: 8px; }

/* app chrome */
.h-top { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.brand-lt { display: inline-flex; align-items: center; gap: 10px; font: 400 40px/1 var(--serif); }
.h-acts { display: flex; align-items: center; gap: 6px; }
.icb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--deep); position: relative; flex: none; }
.icb.sm { width: 32px; height: 32px; }
.icb.fill { background: var(--tint); }
.icb .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 2px var(--bone); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--deep); }
.who { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.who b { display: block; font: 400 28px/1.05 var(--serif); }
.who .sharp { margin-top: 8px; font: italic 400 18px var(--serif); color: var(--clay); display: inline-flex; align-items: center; gap: 6px; }
.sec { margin: 26px 2px 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 2px 10px; }
.sec-row .sec { margin: 0; }
.sec-row button, .sec-row span.r { font-size: 14px; font-weight: 600; color: var(--deep); }
.sec-row span.r { color: var(--muted); font-weight: 500; }
.lock { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 10px; width: 100%; text-align: left; min-height: 72px; }
.lock .blur { filter: blur(5px); opacity: .7; flex: 1; display: flex; gap: 12px; align-items: center; pointer-events: none; }
.lock .blur .sw { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.lock .blur .ln { flex: 1; }
.lock .blur .ln i { display: block; height: 10px; border-radius: 5px; background: rgb(var(--ink-rgb) / .25); margin: 5px 0; }
.lock .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: rgb(var(--card-rgb) / .35); }
.lock .lbl b { font-size: 16px; font-weight: 600; }
.lock .lbl span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lock.go .lbl span { color: var(--clay); font-weight: 600; }

.qcard { display: block; width: 100%; margin-top: 14px; background: var(--ink); color: var(--card); border: 0; position: relative; overflow: hidden; }
.qcard .k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #d9b8a5; display: flex; justify-content: space-between; }
.qcard .qq { font: 400 27px/1.1 var(--serif); margin-top: 10px; max-width: 290px; }
.qcard .qm { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #cfc3b8; }
.qcard .qm i { width: 8px; height: 8px; border-radius: 50%; background: var(--life); }
.qcard .go { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; background: var(--clay); display: grid; place-items: center; color: #fff; }
.qcard.done { background: var(--card); color: var(--ink); border: 1px solid rgb(var(--ink-rgb) / .1); }
.qcard.done .k { color: var(--muted); }
.qcard.done .qm { color: var(--muted); }

.hscroll { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hscroll::-webkit-scrollbar { display: none; }
.mini-ic { flex: none; width: 168px; height: 176px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; text-align: left; }
.mini-ic .ar { font-size: 10.5px; }
.mini-ic h4 { font: 400 24px/1.05 var(--serif); }
.mini-ic .st { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.mini-ic .st.yes { color: var(--green); }
.ed-mini { padding: 4px 16px; }
.ed-mini .r { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.ed-mini .r:first-child { border-top: 0; }
.ed-mini .r b { flex: 1; font: 400 19px/1.15 var(--serif); }

/* tab bar */
.tabbar { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; height: 84px; padding-bottom: 26px; display: flex; justify-content: space-around; border-top: 1px solid var(--line); background: rgb(var(--bone-rgb) / .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .4s cubic-bezier(.32,.72,0,1); }
.tabbar.off { transform: translateY(110%); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--faint); }
.tab.on { color: var(--deep); }

/* lists */
.group { background: var(--card); border: 1px solid rgb(var(--ink-rgb) / .1); border-radius: 18px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; width: 100%; text-align: left; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-size: 16px; font-weight: 500; }
.row .t span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .v { font-size: 15px; color: var(--muted); white-space: nowrap; }
.row .chev { color: var(--faint); flex: none; }
.row.danger b { color: var(--danger); }
.row .ri { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.row .err { color: var(--danger); }
.row .dotc { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.gap { height: 14px; }
.gl { font-size: 13px; color: var(--muted); padding: 8px 16px 0; }

.tgl { width: 51px; height: 31px; border-radius: 16px; background: #d8d0c5; position: relative; flex: none; transition: background .25s; }
.tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.18); transition: transform .25s cubic-bezier(.32,.72,0,1); }
.tgl.on { background: var(--clay); }
.tgl.on::after { transform: translateX(20px); }
.tgl.lk { opacity: .45; pointer-events: none; }

.seg { display: flex; background: var(--tint); border-radius: 11px; padding: 2px; }
.seg button { flex: 1; height: 34px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: center; transition: .2s; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(var(--ink-rgb) / .14); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border-radius: 999px; background: var(--tint); font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.chip.plain { padding: 0 10px; }
.chip.ac { background: transparent; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); padding: 0 10px; gap: 6px; }
.chip.ac i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* area detail */
.a-hero { position: relative; padding: 8px 0 4px; }
.a-hero .blob { position: absolute; right: -20px; top: -40px; width: 220px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 10%, transparent) 55%, transparent 70%); filter: blur(6px); pointer-events: none; }
.a-hero .lt { color: var(--c); position: relative; font-size: 46px; }
.a-hero .rd { position: relative; font: italic 400 21px/1.3 var(--serif); color: var(--ink-2); }
.shrow { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.shb { display: inline-flex; gap: 3px; }
.shb i { width: 18px; height: 5px; border-radius: 3px; background: rgb(var(--ink-rgb) / .12); }
.shb.s1 i:nth-child(-n+1), .shb.s2 i:nth-child(-n+2), .shb.s3 i { background: var(--c, var(--clay)); }
.facts { display: flex; flex-direction: column; gap: 10px; }
.fact { padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: opacity .3s, transform .3s; }
.fact .ft { font: 400 23px/1.15 var(--serif); }
.fact.fs-no .ft { text-decoration: line-through; text-decoration-color: rgb(var(--ink-rgb) / .35); color: var(--muted); }
.fact q { font-size: 17px; }
.how { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.how .hk { font-weight: 600; margin-right: 2px; }
.acts { display: flex; align-items: center; gap: 8px; }
.acts .sp { flex: 1; }
.mini { height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; border: 1px solid; }
.mini.yes { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.mini.no { background: var(--red-bg); border-color: #d9a493; color: var(--red); }
.state { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.state.ok { color: var(--green); }
.vis { height: 32px; padding: 0 11px; border-radius: 999px; background: var(--tint); font-size: 13px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.fact.out { opacity: 0; transform: scale(.96); }
.sharpen { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-top: 10px; background: color-mix(in srgb, var(--c) 8%, var(--card)); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.sharpen b { display: block; font-size: 16px; font-weight: 600; }
.sharpen span { font-size: 13.5px; color: var(--muted); }
.sharpen .t { flex: 1; }

/* sources */
.src-st { font-size: 13px; color: var(--muted); }
.src-st.err { color: var(--danger); }
.retry { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 13px; font-weight: 600; }
.addg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.addc { padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; min-height: 132px; }
.addc b { font-size: 15.5px; font-weight: 600; }
.addc p { font-size: 13px; color: var(--muted); line-height: 1.35; flex: 1; }
.addc .ads { display: flex; gap: 4px; }
.addc .ads i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.unl { display: flex; gap: 10px; }
.unl .lk { flex: 1; height: 150px; position: relative; overflow: hidden; padding: 0; text-align: left; }
.unl .lk .pv { position: absolute; inset: 0; filter: blur(7px); opacity: .75; }
.unl .lk .lb { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.unl .lk .lb b { display: block; font: 400 21px/1.05 var(--serif); }
.unl .lk .lb span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* question */
.streak { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.streak .d { display: flex; gap: 4px; }
.streak .d i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--ink-rgb) / .14); }
.streak .d i.f { background: var(--clay); }
.bigq { font: 400 40px/1.04 var(--serif); margin: 22px 0 14px; letter-spacing: -.01em; }
.q-ta { height: 200px; }
.q-done { animation: rise .6s cubic-bezier(.32,.72,0,1) both; }
.newtag { font: italic 400 20px var(--serif); color: var(--clay); text-align: center; margin: 4px 0 12px; }

/* people */
.scope { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--ink-2); margin-top: 6px; }
.scope i { width: 8px; height: 8px; border-radius: 50%; background: #2fa35a; box-shadow: 0 0 0 3px rgba(47,163,90,.18); }
.plist { display: flex; flex-direction: column; }
.prow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); transition: opacity .35s, max-height .35s, padding .35s; max-height: 120px; overflow: hidden; }
.prow:first-child { border-top: 0; }
.prow.out { opacity: 0; max-height: 0; padding: 0; }
.prow .n { font-size: 12px; font-weight: 600; color: var(--muted); width: 12px; font-variant-numeric: tabular-nums; }
.prow .t { flex: 1; min-width: 0; text-align: left; }
.prow .t b { display: block; font: 400 22px/1.1 var(--serif); }
.prow .t .ro { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prow .t p { font-size: 14px; color: var(--ink-2); margin-top: 3px; line-height: 1.3; }
.badge { font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--clay); color: #fff; white-space: nowrap; }
.badge.soft { background: var(--tint); color: var(--muted); }
.cmp-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-top: 18px; }
.cmp-card .qi { width: 48px; height: 48px; border-radius: 14px; background: var(--tint); display: grid; place-items: center; color: var(--deep); flex: none; }
.cmp-card b { display: block; font-size: 16.5px; font-weight: 600; }
.cmp-card span { font-size: 13.5px; color: var(--muted); }

/* pair */
.p-hero { text-align: center; padding: 6px 0 4px; }
.p-hero h1 { font: 400 40px/1 var(--serif); }
.p-hero .fn { font: italic 400 19px var(--serif); color: var(--clay); margin-top: 6px; }
.notes { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.note { display: flex; gap: 12px; font: 400 21px/1.3 var(--serif); color: var(--ink); }
.note b { font: italic 400 21px/1.3 var(--serif); color: var(--clay); flex: none; width: 18px; }
.pa { padding: 16px 0 16px 14px; border-left: 2px solid var(--c); margin-left: 2px; }
.pa + .pa { margin-top: 4px; }
.pa .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pa .top .ar { color: var(--c); }
.tag { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tag.s { background: var(--green-bg); color: var(--green); }
.tag.x { border: 1px dashed rgb(var(--clay-rgb) / .55); color: var(--clay); }
.pa p { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.could { margin-top: 22px; background: var(--ink); color: var(--card); border: 0; padding: 22px; }
.could .k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #d9b8a5; }
.could p { font: 400 26px/1.15 var(--serif); margin-top: 8px; }
.could .ask { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(var(--card-rgb) / .15); }
.could .ask p { font: italic 400 22px/1.25 var(--serif); color: #f3d9c9; }

/* rooms */
.rcard { display: block; width: 100%; text-align: left; margin-bottom: 10px; position: relative; overflow: hidden; }
.rcard .live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #2a7a46; }
.rcard .live i { width: 8px; height: 8px; border-radius: 50%; background: #2fa35a; animation: livep 1.6s ease-in-out infinite; }
@keyframes livep { 50% { box-shadow: 0 0 0 5px rgba(47,163,90,.18); } }
.rcard h3 { font: 400 30px/1.05 var(--serif); margin-top: 8px; }
.rcard .m { font-size: 14px; color: var(--muted); margin-top: 4px; }
.rcard .faces { display: flex; margin-top: 14px; align-items: center; }
.rcard .faces img { width: 34px; height: 34px; margin-right: -8px; filter: drop-shadow(0 2px 3px rgb(var(--ink-rgb) / .2)); }
.rcard .faces span { margin-left: 16px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.rcard.hero { background: var(--card); padding: 20px; }
.rcard.hero .nx { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 600; }
.rcard.hero .nx span { color: var(--clay); }
.rcard.sm { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.rcard.sm .dt { width: 48px; text-align: center; flex: none; }
.rcard.sm .dt b { display: block; font: 400 26px/1 var(--serif); }
.rcard.sm .dt span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); }
.rcard.sm .t { flex: 1; }
.rcard.sm .t b { display: block; font-size: 16px; font-weight: 600; }
.rcard.sm .t span { font-size: 13.5px; color: var(--muted); }
.rcard.past { opacity: .7; }
.now { padding: 18px; }
.now .k { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.now .k span:last-child { color: var(--clay); }
.tviz { position: relative; width: 260px; height: 250px; margin: 6px auto 0; }
.tviz .tb { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6efe4, #e8dccb); border: 1px solid rgb(var(--ink-rgb) / .1); display: grid; place-items: center; text-align: center; }
.tviz .tb b { display: block; font: 400 40px/1 var(--serif); }
.tviz .tb span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.seat { position: absolute; width: 64px; margin-left: -32px; margin-top: -26px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.seat img { width: 44px; height: 44px; display: block; margin: 0 auto 2px; filter: drop-shadow(0 3px 5px rgb(var(--ink-rgb) / .2)); }
.seat.me img { border-radius: 50%; box-shadow: 0 0 0 2.5px var(--clay); }
.seat.me { color: var(--clay); }
.rounds { display: flex; gap: 8px; margin-top: 12px; }
.rounds div { flex: 1; border-radius: 14px; background: var(--tint); padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.rounds div b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 1px; }
.rounds div.cur { background: var(--ink); color: #cfc3b8; }
.rounds div.cur b { color: var(--card); }
.rounds div.dn b { color: var(--muted); text-decoration: line-through; }
.tbl-hint { font-size: 12px; font-weight: 600; color: var(--clay); white-space: nowrap; }

/* codes */
.codebox { display: flex; gap: 8px; justify-content: center; margin: 22px 0 6px; }
.codebox span { width: 44px; height: 56px; border-radius: 12px; background: var(--tint); display: grid; place-items: center; font: 400 28px/1 var(--serif); border: 1px solid transparent; }
.codebox span.f { background: var(--card); border-color: rgb(var(--ink-rgb) / .18); }
.codebox span.dash { width: 10px; background: none; color: var(--muted); }
.vf { position: relative; height: 280px; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #4a3a30, #1d1510); overflow: hidden; margin-top: 18px; }
.vf .c { position: absolute; width: 36px; height: 36px; border: 4px solid #fff; }
.vf .c1 { top: 40px; left: 80px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.vf .c2 { top: 40px; right: 80px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.vf .c3 { bottom: 40px; left: 80px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.vf .c4 { bottom: 40px; right: 80px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.vf .ln { position: absolute; left: 90px; right: 90px; height: 2px; background: var(--clay); box-shadow: 0 0 12px var(--clay); top: 50px; animation: scan 2.2s ease-in-out infinite; }
@keyframes scan { 50% { top: 226px; } }
.vf p { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #eadfd4; font-size: 13.5px; }

/* apps */
.app-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; }
.app-hero h1 { font: 400 34px/1 var(--serif); }
.app-hero span { font-size: 13.5px; color: var(--muted); display: block; margin-top: 4px; }
.sugg { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sugg .ft { font: 400 21px/1.2 var(--serif); }

/* share card */
.sc-wrap { flex: 1; display: grid; place-items: center; padding: 6px 0 0; }
.scard { width: 288px; height: 512px; border-radius: 26px; position: relative; overflow: hidden; background: #f4efe6; box-shadow: 0 30px 60px -20px rgb(var(--ink-rgb) / .45), 0 0 0 1px rgb(var(--ink-rgb) / .06); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 22px; }
.scard .bg { position: absolute; left: -60px; right: -60px; top: -40px; opacity: .4; mix-blend-mode: multiply; }
.scard .bg img { width: 100%; display: block; }
.scard .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244,239,230,0) 20%, #f4efe6 62%); }
.scard > *:not(.bg):not(.fade) { position: relative; }
.scard .br { display: inline-flex; align-items: center; gap: 6px; font: 400 18px/1 var(--serif); color: var(--ink); align-self: flex-start; }
.scard h2 { font: 400 44px/1 var(--serif); margin-top: 12px; }
.scard .ro { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.scard .qc { margin-top: auto; font: italic 400 22px/1.2 var(--serif); color: var(--deep); padding: 0 6px; }
.scard .u { margin-top: 14px; font-size: 12px; color: var(--muted); font-weight: 500; }
.sh-row { display: flex; justify-content: center; gap: 22px; margin-top: 18px; }
.sh-row button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); width: 64px; text-align: center; }
.sh-row i { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 600; }

/* notifications */
.nrow { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; align-items: flex-start; }
.nrow:first-child { border-top: 0; }
.nrow .ic0 { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.nrow .ic0 img { width: 42px; height: 42px; }
.nrow .t { flex: 1; font-size: 15px; line-height: 1.35; }
.nrow .t b { font-weight: 600; }
.nrow .t span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.nrow .u { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); margin-top: 8px; flex: none; }

/* invite */
.inv { align-items: center; text-align: center; padding-left: 24px; padding-right: 24px; }
.inv h1 { font: 400 40px/1.04 var(--serif); margin-top: 22px; }

/* dev index */
.ix a { display: flex; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--line); text-decoration: none; font-size: 15px; }
.ix a:first-child { border-top: 0; }
.ix a code { font-size: 12px; color: var(--muted); }

/* sheets & overlays */
.dim { position: absolute; inset: 0; z-index: 60; background: rgba(20,12,8,.35); opacity: 0; pointer-events: none; transition: opacity .35s; }
.dim.on { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; background: var(--card); border-radius: 28px 28px 0 0; padding: 10px 22px 40px; transform: translateY(105%); transition: transform .45s cubic-bezier(.32,.72,0,1); scrollbar-width: none; }
.sheet.on { transform: none; }
.grab { width: 36px; height: 5px; border-radius: 3px; background: rgb(var(--ink-rgb) / .2); margin: 0 auto 16px; }
.sheet h3 { font: 400 30px/1.1 var(--serif); text-align: center; }
.sheet .s2 { text-align: center; color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.sheet .seg { margin-top: 18px; }
.sheet .x0 { position: absolute; top: 14px; right: 16px; }
.qr { width: 180px; height: 180px; margin: 20px auto 16px; padding: 12px; background: #fff; border-radius: 18px; border: 1px solid var(--line); display: block; }
.linkbox { display: flex; align-items: center; gap: 10px; background: var(--tint); border-radius: 14px; padding: 0 6px 0 14px; height: 52px; font-size: 15px; }
.linkbox span { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbox button { height: 40px; padding: 0 14px; border-radius: 10px; background: var(--ink); color: var(--card); font-weight: 600; font-size: 14px; }
.share-row { display: flex; justify-content: space-between; margin-top: 18px; }
.share-row div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); width: 64px; }
.share-row i { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 600; }
.cn-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
.kv { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.kv div { display: flex; gap: 10px; font-size: 15px; line-height: 1.35; color: var(--ink-2); align-items: flex-start; }
.kv div b { width: 64px; flex: none; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.consent-top { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 14px; }
.consent-top .lnkd { color: var(--muted); letter-spacing: 3px; }
.km { width: 64px; height: 64px; border-radius: 18px; background: var(--bone); display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); }
.chk { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid rgb(var(--ink-rgb) / .3); display: grid; place-items: center; color: #fff; flex: none; }
.chk.on { background: var(--clay); border-color: var(--clay); }
.chk.lk { opacity: .5; }

.toast { position: absolute; z-index: 99; left: 50%; top: auto; bottom: 96px; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, 8px); opacity: 0; transition: .3s; background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.as-wrap, .al-wrap { position: absolute; inset: 0; z-index: 80; background: rgba(20,12,8,.35); opacity: 0; pointer-events: none; transition: opacity .3s; }
.as-wrap.on, .al-wrap.on { opacity: 1; pointer-events: auto; }
.as { position: absolute; left: 10px; right: 10px; bottom: 30px; transform: translateY(120%); transition: transform .4s cubic-bezier(.32,.72,0,1); }
.as-wrap.on .as { transform: none; }
.as-g { background: rgb(var(--card-rgb) / .97); border-radius: 16px; overflow: hidden; }
.as-t { padding: 14px 16px; text-align: center; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.as-g button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; font-size: 18px; color: var(--deep); border-top: 1px solid var(--line); text-align: center; }
.as-g button:first-child { border-top: 0; }
.as-g .as-t + button { border-top: 0; }
.as-g button.d { color: var(--danger); }
.as-g button small { display: block; font-size: 12px; color: var(--muted); }
.as-g button.opt { flex-direction: column; gap: 1px; height: 62px; }
.as-g button.sel { font-weight: 600; }
.as-c { margin-top: 8px; width: 100%; height: 56px; border-radius: 16px; background: var(--card); font-size: 18px; font-weight: 600; color: var(--deep); text-align: center; }
.al { position: absolute; left: 50%; top: 50%; width: 280px; margin-left: -140px; transform: translateY(-50%) scale(1.1); opacity: 0; transition: .25s; background: rgb(var(--card-rgb) / .98); border-radius: 18px; overflow: hidden; text-align: center; }
.al-wrap.on .al { transform: translateY(-50%); opacity: 1; }
.al h4 { font-size: 17px; font-weight: 600; padding: 20px 18px 4px; }
.al p { font-size: 14px; color: var(--ink-2); padding: 0 18px 18px; line-height: 1.35; }
.al .b { display: flex; border-top: 1px solid var(--line); }
.al .b button { flex: 1; height: 46px; font-size: 17px; color: var(--deep); text-align: center; }
.al .b button + button { border-left: 1px solid var(--line); }
.al .b button.d { color: var(--danger); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* =====================================================================
   v2 premium layer. Same identity (bone, brown ink, terracotta, Instrument
   Serif), refined material, type
   and motion. 8pt spacing, one hairline, one shadow ramp, one radius ramp.
   ===================================================================== */

/* ---------- stage + paper ---------- */
html, body { background: radial-gradient(120% 90% at 50% 0%, #e4ddd2, #cfc7bb); }
body { letter-spacing: -0.003em; font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; }
@media (min-width: 500px) and (min-height: 900px) {
  .phone { border-radius: 52px; box-shadow: 0 0 0 1px #3a2b22, 0 0 0 11px #17100c, 0 0 0 12px #4a3a30, 0 50px 100px -30px rgb(var(--ink-rgb) / .55), 0 30px 60px -40px rgb(var(--ink-rgb) / .5); }
}
.phone { transition: background-color .4s var(--ease-out); isolation: isolate; overflow: clip; }
.phone::after {
  content: ""; position: absolute; inset: 0; z-index: 120; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain); mix-blend-mode: soft-light;
}
.status { font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- screens: spring pushes, parallax underlay, edge shadow ---------- */
.scr { transition: transform .62s var(--spring), opacity .4s var(--ease-out); box-shadow: -1px 0 0 var(--hair-2), -24px 0 48px -24px rgb(var(--ink-rgb) / .28); }
.scr::after { content: ""; position: absolute; inset: 0; z-index: 30; background: rgba(28,18,12,0); pointer-events: none; transition: background .62s var(--spring); }
.scr.is-left { transform: translateX(-30%); opacity: 1; }
.scr.is-left::after { background: rgba(28,18,12,.07); }
.scr.is-fade { opacity: 0; transform: scale(.985); }
.scr.is-down { transform: translateY(100%); }
.scr.is-right { box-shadow: none; }

/* sheet presentation: the screen behind recedes like iOS */
.phone.sheet-up { background: #18110d; }
.scr, .tabbar { transform-origin: 50% 50%; }
.tabbar { transform-origin: 50% -342px; }
.phone.sheet-up .scr.on { transform: scale(.92); border-radius: 14px; overflow: hidden; }
.phone.sheet-up .scr.is-left { opacity: 0; }
.ic.static { min-height: 360px; }
.phone.sheet-up .tabbar:not(.off) { transform: scale(.92); }
.phone.sheet-up .status { color: #f4efe6; transition: color .3s; }

/* ---------- nav: material on scroll, compact title ---------- */
.nav { transition: box-shadow .25s, background-color .25s; z-index: 6; }
.scr.scrolled .nav { background: var(--mat); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 .5px 0 var(--hair); }
.scr.tabbed:not(:has(> .nav))::before { content: ""; position: absolute; left: 0; right: 0; top: 54px; height: .5px; background: var(--hair); opacity: 0; transition: opacity .25s; z-index: 6; }
.scr.tabbed.scrolled:not(:has(> .nav))::before { opacity: 1; }
.nav-tt { position: absolute; left: 50%; top: 50%; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); transform: translate(-50%, -30%); opacity: 0; transition: opacity .22s var(--ease-out), transform .4s var(--spring); pointer-events: none; }
.nav-tt.on { opacity: 1; transform: translate(-50%, -50%); }
.nav-b { font-size: 17px; letter-spacing: -.02em; }
.nav-b.back { gap: 4px; }
.nav-c { font-size: 15px; letter-spacing: -.01em; }

/* ---------- type: tighter serif tracking, one label style ---------- */
.lt { font-size: 40px; line-height: 1.02; letter-spacing: -0.022em; margin: 8px 0 8px; text-wrap: balance; }
.wl-h { font-size: 37px; line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; }
.wl-h em { letter-spacing: -0.02em; }
.bigq { font-size: 42px; line-height: 1.02; letter-spacing: -0.024em; text-wrap: balance; }
.ic h3 { letter-spacing: -0.022em; line-height: 1; text-wrap: balance; }
.a-hero .lt { font-size: 48px; letter-spacing: -0.026em; }
.who b, .rcard h3, .p-hero h1, .inv h1, .sheet h3, .could p, .qcard .qq, .app-hero h1, .scard h2 { letter-spacing: -0.018em; text-wrap: balance; }
.edge h4, .fact .ft, .prow .t b, .mini-ic h4, .note, .sugg .ft, .ed-mini .r b { letter-spacing: -0.012em; }
.sub { font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; }
.sec, .sec-row .sec, .ar, .ic .area, .prow .t .ro, .qcard .k, .could .k, .now .k, .rcard .live, .scard .ro, .kv div b, .tviz .tb span, .rcard.sm .dt span { font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.sec { margin: 32px 2px 12px; }
.sec-row { margin: 32px 2px 12px; }
.sec-row button { font-size: 15px; letter-spacing: -.01em; }
.row .t b { letter-spacing: -.012em; }
.v, .count, .timer, .nav-c, .state, .shrow, .streak, .rcard.sm .dt b, .codebox span, .badge, .row .v, .nrow .t span, [data-n], .prow .n, .mini-ic .st { font-variant-numeric: tabular-nums; }

/* ---------- surfaces: hairlines, layered shadows, one radius ramp ---------- */
.card { border: .5px solid var(--hair); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.group { border: .5px solid var(--hair); border-radius: var(--r-m); box-shadow: var(--sh-1); }
.row, .ed-mini .r, .nrow, .prow, .artist, .ix a { border-top-width: .5px; border-top-color: var(--hair); }
.row { transition: background-color .25s; }
button.row:active, .ed-mini .r:active, .nrow:active, .ix a:active { background: rgb(var(--ink-rgb) / .05); transition-duration: 0s; }
.field, textarea { border: .5px solid var(--hair); box-shadow: inset 0 1px 2px rgb(var(--ink-rgb) / .04); border-radius: var(--r-m); transition: box-shadow .25s, border-color .25s; }
.field:focus-within, textarea:focus { border-color: rgb(var(--clay-rgb) / .55); box-shadow: 0 0 0 4px rgb(var(--clay-rgb) / .12); }
.field .add, .linkbox button { border-radius: var(--r-s); }
.svc { border: .5px solid var(--hair); border-radius: var(--r-s); box-shadow: var(--sh-1); }
.frow { border: .5px solid var(--hair); border-radius: var(--r-m); box-shadow: var(--sh-1); }
.ic { border: .5px solid var(--hair); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.lock .lbl { background: rgb(var(--card-rgb) / .45); }
.qcard { background: radial-gradient(140% 120% at 0% 0%, #3d2c21 0%, var(--ink) 55%, #1d140e 100%); box-shadow: inset 0 .5px 0 rgba(255,255,255,.1), var(--sh-2); border: 0; }
.qcard.done { background: var(--card); box-shadow: var(--sh-1); border: .5px solid var(--hair); }
.qcard .go { box-shadow: 0 6px 14px -4px rgb(var(--clay-rgb) / .7), inset 0 1px 0 rgba(255,255,255,.2); }
.could { background: radial-gradient(140% 120% at 0% 0%, #3d2c21 0%, var(--ink) 55%, #1d140e 100%); box-shadow: inset 0 .5px 0 rgba(255,255,255,.1), var(--sh-2); }
.km { border: .5px solid var(--hair); }
.qr { border: .5px solid var(--hair); box-shadow: var(--sh-1); }
.codebox span { border-radius: var(--r-s); }
.codebox span.f { border: .5px solid rgb(var(--ink-rgb) / .28); box-shadow: var(--sh-1); animation: tick .45s var(--spring-pop); }
@keyframes tick { from { transform: scale(.8); opacity: 0; } }
.vf { border-radius: var(--r-l); }
.rounds div { border-radius: var(--r-s); }

/* ---------- buttons + press states ---------- */
.btn { box-shadow: var(--sh-btn); letter-spacing: -0.012em; background: linear-gradient(180deg, #33241a, var(--ink)); }
.btn.clay { background: linear-gradient(180deg, #ad5e3b, var(--clay)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 1px rgba(124,59,34,.3), 0 10px 22px -10px rgba(124,59,34,.65); }
.btn2 { border: .5px solid rgb(var(--ink-rgb) / .3); background: rgb(var(--card-rgb) / .6); letter-spacing: -.01em; }
.btn, .btn2, .pill, .mini, .vis, .icb, .tab, .svc, .retry, .scope, .nav-b, .mic, .seg button, .linkbox button, .field .add, .am-btn, .lnk, .sh-row button, .share-row div, .addc, .lk, .mini-ic, .cmp-card, .sharpen, .qcard, .lock, .rcard, .badge, .sec-row button {
  transition: transform .5s var(--spring-pop), background-color .2s, opacity .2s, box-shadow .25s, color .2s, border-color .2s;
}
.btn:active, .btn2:active, .pill:active, .mini:active, .vis:active, .icb:active, .svc:active, .retry:active, .scope:active, .mic:active, .linkbox button:active, .field .add:active, .am-btn:active, .sh-row button:active, .share-row div:active, .addc:active, .lk:active, .mini-ic:active, .seg button:active, .tab:active { transform: scale(.97); transition-duration: .12s; }
.qcard:active, .lock:active, .rcard:active, .cmp-card:active, .sharpen:active { transform: scale(.985); transition-duration: .12s; }
.lnk:active, .nav-b:active, .sec-row button:active { opacity: .45; transition-duration: 0s; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* ---------- chips: one family ---------- */
.chip, .tag, .badge, .between, .ic .src span { height: 24px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.chip { padding: 0 9px 0 3px; gap: 6px; }
.chip.plain, .chip.ac { padding: 0 10px; }
.chip.ac { border-width: .5px; }
.tag, .badge, .ic .src span { padding: 0 10px; font-weight: 600; }
.ic .src span { font-weight: 500; }
.between { padding: 0 10px; font-weight: 600; align-self: flex-start; }
.mini, .vis { height: 32px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; display: inline-flex; align-items: center; gap: 6px; }
.mini { border-width: .5px; padding: 0 14px; }
.pill { border-width: .5px; letter-spacing: -.01em; position: relative; overflow: visible; }
.retry { height: 30px; padding: 0 14px; }
.glyph { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18); }
.seg { border-radius: 10px; padding: 2px; background: rgb(var(--ink-rgb) / .07); }
.seg button { border-radius: 8px; height: 32px; font-size: 13.5px; }
.seg button.on { box-shadow: 0 .5px 0 rgb(var(--ink-rgb) / .06), 0 3px 8px rgb(var(--ink-rgb) / .12), 0 0 0 .5px rgb(var(--ink-rgb) / .04); }
.tgl::after { transition: transform .45s var(--spring-pop), width .2s; }
.tgl:active::after { width: 33px; }
.tgl.on:active::after { transform: translateX(14px); }

/* ---------- tab bar: material ---------- */
.tabbar { background: var(--mat); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border-top: 0; box-shadow: 0 -.5px 0 var(--hair); transition: transform .55s var(--spring); }
.tab { font-size: 10px; font-weight: 500; letter-spacing: .01em; color: var(--faint); }
.tab svg { transition: transform .5s var(--spring-pop); }
.tab.on svg circle, .tab.on svg path { fill: currentColor; fill-opacity: .14; }
.tab.on svg { transform: translateY(-1px); }

/* ---------- sheets, action sheets, alerts, toast: material ---------- */
.dim { background: rgba(20,12,8,.32); transition: opacity .45s var(--ease-out); }
.sheet { background: var(--mat-card); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -.5px 0 rgba(255,255,255,.6) inset, 0 -20px 50px -20px rgba(20,12,8,.35); padding: 8px 24px 40px; transition: transform .6s var(--spring-b); }
.sheet:not(.on) { transition: transform .42s var(--spring); }
.grab { width: 36px; height: 5px; background: rgb(var(--ink-rgb) / .18); margin-bottom: 20px; }
.sheet h3 { font-size: 32px; }
.as { transition: transform .55s var(--spring-b); }
.as-g, .al { background: var(--mat-card); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); border-radius: 14px; }
.as-g button, .as-t, .al .b, .al .b button + button { border-color: var(--hair); border-width: .5px; }
.as-g button { font-size: 17px; letter-spacing: -.02em; }
.as-g button:active, .al .b button:active, .as-c:active { background: rgb(var(--ink-rgb) / .06); }
.as-c { border-radius: 14px; font-size: 17px; letter-spacing: -.02em; box-shadow: var(--sh-1); }
.al { transition: transform .45s var(--spring-pop), opacity .2s; }
.al h4 { letter-spacing: -.02em; }
/* toasts sit just above the bottom action area (app.js sets bottom); they settle in, never bounce */
.toast { background: rgb(var(--ink-rgb) / .88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 10px 30px -10px rgba(20,12,8,.5), inset 0 .5px 0 rgba(255,255,255,.12); padding: 11px 18px; letter-spacing: -.01em; transform: translate(-50%, 8px); transition: transform .35s var(--ease-out), opacity .25s; }
.toast.on { transform: translate(-50%, 0); }

/* ---------- enter: staggered reveal ---------- */
.scr.enter .body > *, .scr.enter > .foot { animation: rise2 .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }
@keyframes rise2 { from { opacity: 0; transform: translateY(14px); } }

/* ---------- welcome ---------- */
.welcome.on .wl-copy > * { animation: rise2 1s var(--ease-out) both; }
.welcome.on .wl-copy > :nth-child(1) { animation-delay: .35s; }
.welcome.on .wl-copy > :nth-child(2) { animation-delay: .5s; }
.welcome.on .foot { animation: rise2 1s var(--ease-out) .7s both; }
.notice div { filter: blur(6px); transition: opacity .7s var(--ease-out), transform .7s var(--spring), filter .7s var(--ease-out); }
.notice div.on { filter: none; }


/* ---------- reveal: a cinematic beat ---------- */

/* ---------- deck: drag to decide, stamps ---------- */
.ic { transition: transform .62s var(--spring), opacity .5s var(--ease-out); touch-action: none; }
/* W1: only the swipe deck takes the drag itself; a card at rest (Home's large card, a card screen) lets the page scroll. */
.ic.static { touch-action: pan-x pan-y; }
.h-deck, .h-deck .hc { touch-action: pan-x pan-y; }
.ic.drag { transition: none; cursor: grabbing; }
.ic.gone-r { transform: translateX(130%) rotate(10deg); }
.ic.gone-l { transform: translateX(-130%) rotate(-10deg); }
.stamp { position: absolute; top: 24px; padding: 6px 14px; border-radius: 10px; font: 400 26px/1 var(--serif); letter-spacing: -.01em; border: 1.5px solid currentColor; opacity: 0; pointer-events: none; transition: opacity .15s; }
.stamp.yes { left: 22px; color: var(--green); transform: rotate(-8deg); background: rgba(227,238,229,.8); }
.stamp.no { right: 22px; color: var(--red); transform: rotate(8deg); background: rgba(245,227,220,.8); }
.ic.gone-r .stamp.yes, .ic.gone-l .stamp.no { opacity: 1; }
.pill.thump, .mini.thump, .sel.thump { animation: thump .55s var(--spring-pop); }
@keyframes thump { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
.vote.voted .pill.sel { box-shadow: inset 0 0 0 1.5px currentColor; }
.tess { position: absolute; z-index: 130; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; }
.ripple { position: absolute; z-index: 129; border-radius: 999px; pointer-events: none; border: 1.5px solid currentColor; }
.fact.settle { animation: settle .6s var(--spring-pop); }
@keyframes settle { 0% { transform: scale(.985); } }

/* ---------- share card: collectible ---------- */
.sc-float { animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.scard { border-radius: 24px; background: linear-gradient(180deg, #f7f2ea, #efe8dc); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.9), 0 0 0 .5px rgb(var(--ink-rgb) / .18), 0 2px 4px rgb(var(--ink-rgb) / .08), 0 30px 60px -24px rgb(var(--ink-rgb) / .5), 0 60px 90px -60px rgb(var(--ink-rgb) / .4); }
.scard .fade { background: linear-gradient(180deg, rgba(244,239,230,0) 18%, #f2ece2 60%); }
.scard .frame { position: absolute; inset: 10px; border-radius: 16px; border: .5px solid rgba(124,59,34,.38); pointer-events: none; box-shadow: inset 0 0 0 3px rgb(var(--card-rgb) / .35); z-index: 1; }
.scard .foil { position: absolute; inset: 0; pointer-events: none; z-index: 3; mix-blend-mode: soft-light; opacity: .6;
  background: linear-gradient(125deg, rgba(255,255,255,0) 20%, rgba(255,214,170,.9) 36%, rgba(190,226,255,.8) 46%, rgba(240,190,255,.8) 56%, rgba(255,255,255,0) 72%);
  background-size: 260% 260%; background-position: var(--fx, 80%) var(--fy, 20%); transition: background-position .9s var(--spring); }
.scard .card-sheen { border-radius: 24px; z-index: 4; mix-blend-mode: soft-light; }
.scard .br { padding: 2px 4px; z-index: 2; }
.scard h2 { font-size: 48px; letter-spacing: -.03em; }
.scard .ro { letter-spacing: .16em; }
.scard .qc { letter-spacing: -.012em; text-wrap: balance; }
.scard .u { letter-spacing: .02em; }
.scard.deal { animation: deal .8s var(--spring-b); }
@keyframes deal { from { transform: perspective(900px) rotateY(-70deg) scale(.94); opacity: .4; } }
.sh-row i, .share-row i { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px -8px rgb(var(--ink-rgb) / .5); }

/* ---------- area hero, people, rooms polish ---------- */
.a-hero .blob { filter: blur(14px); animation: drift 14s ease-in-out infinite; }
@keyframes drift { 50% { transform: translate(-10px, 8px) scale(1.06); } }
.prow { gap: 16px; padding: 14px 0; }
.rcard .faces img { filter: drop-shadow(0 2px 3px rgb(var(--ink-rgb) / .22)); }
.tviz .tb { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px -12px rgb(var(--ink-rgb) / .35); border: .5px solid var(--hair); }
.rounds div.cur { background: radial-gradient(140% 120% at 0% 0%, #3d2c21, var(--ink) 60%); box-shadow: var(--sh-1); }
.mic { box-shadow: 0 0 0 8px rgb(var(--clay-rgb) / .12), 0 14px 26px -10px rgb(var(--clay-rgb) / .6), inset 0 1px 0 rgba(255,255,255,.2); }
.am-btn { border-radius: var(--r-m); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 24px -12px rgba(250,35,59,.6); }
.dots i { transition: background-color .4s, width .5s var(--spring); }
.dots i.on:last-of-type { width: 28px; }
.badge { box-shadow: 0 4px 10px -4px rgb(var(--clay-rgb) / .6); }
.badge.soft { box-shadow: none; }
.wave i { transition: height .14s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; }
  .sc-float, .a-hero .blob { animation: none !important; }
}
/* FG1: source logos (web/logos.js) sit in the glyph slot, single color in the look's ink, no brand tile. */
:root .glyph.lgw, :root[data-theme] .glyph.lgw { background: transparent !important; color: var(--ink) !important; box-shadow: none !important; }
.glyph.lgw .lg { width: 70%; height: 70%; display: block; }
.lg { flex: none; }
.src span .lg, .hc-f.src span .lg { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; color: var(--ink-2); }
/* Home: the sources in use, one quiet logo each, under the name and line. A 44 px tap target, no chrome. */
.hm-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 44px; margin: 4px 0 -8px; padding: 0; background: none; border: 0; color: var(--ink-2); cursor: pointer; }
.hm-logos .lg { width: 17px; height: 17px; opacity: .85; }
.hm-logos:active { opacity: .5; }
/* FG1: the read-ahead claim screen, a gift being handed over: the host's mark on a card, the source logos under it. */
.prep-ahead .gift { display: grid; justify-items: center; gap: 14px; margin: 6vh auto 22px; padding: 22px 26px 18px; background: var(--card); border-radius: var(--r-xl, 18px); box-shadow: var(--sh-2, 0 1px 2px rgb(0 0 0 / .06)); width: min(280px, 100%); box-sizing: border-box; }
.prep-ahead .gift .inv-mark { margin: 0; width: 100%; }
.prep-ahead .gift .inv-mark svg { width: 100%; height: auto; display: block; }
.gift-logos { display: flex; gap: 14px; justify-content: center; color: var(--ink-2); }
.gift-logos .lg { width: 18px; height: 18px; }
.prep-ahead h1.lt { max-width: 22ch; margin: 0 auto; font-size: 26px; line-height: 1.2; }
.prep-ahead + .foot { display: grid; gap: 10px; }
.prep-ahead + .foot .btn2 { width: 100%; }
/* PF1: Start from a name, on the prepared-invite form. Hairline-framed block, ticked rows with reasons. */
.pf { margin: 6px 0 22px; padding: 16px 0 18px; border-top: .5px solid var(--hair); border-bottom: .5px solid var(--hair); }
.pf-h { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.pf-s, .pf-say { font-size: 14px; line-height: 1.4; color: var(--ink-2); margin: 0 0 12px; }
.pf-sum { font-size: 15px; margin: 14px 0 4px; }
.pf-go, .pf-use { width: 100%; }
.pf-list { display: grid; margin: 4px 0 12px; }
.pf-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: .5px solid var(--hair); cursor: pointer; }
.pf-row input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.pf-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-row .t b { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.pf-row .t span { font-size: 13.5px; color: var(--muted); }
.pf-row .t .pf-ns { color: var(--ink-2); font-style: italic; }
/* The Host page's "Read their links now" switch: a real switch in every look, 44 px row. */
.h-ahead { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 0; border-top: .5px solid var(--hair); border-bottom: .5px solid var(--hair); margin: 8px 0 4px; cursor: pointer; }
.h-ahead .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.h-ahead .t b { font-weight: 600; font-size: 16px; }
.h-ahead .t span { font-size: 13.5px; color: var(--muted); }
input.sw { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: rgb(var(--ink-rgb) / .16); position: relative; cursor: pointer; transition: background-color .18s ease; }
input.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .22s cubic-bezier(.3,1.25,.5,1); }
input.sw:checked { background: var(--ink); }
input.sw:checked::after { transform: translateX(18px); }
input.sw:focus-visible { outline: 2px solid var(--clay, var(--ink)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input.sw, input.sw::after { transition: none; } }
.h-ra { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
[data-theme="fieldguide"] .prep-ahead .gift { border-radius: 0; background: #f8f3e8; border: 1px solid rgb(var(--ink-rgb) / .22); box-shadow: 5px 5px 0 -1px var(--card), 5px 5px 0 0 rgb(var(--ink-rgb) / .16); }
[data-theme="fieldguide"] .prep-ahead h1.lt { font-style: italic; }
[data-theme="fieldguide"] input.sw { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .55); }
[data-theme="fieldguide"] input.sw::after { border-radius: 1px; background: var(--ink); box-shadow: none; opacity: .55; }
[data-theme="fieldguide"] input.sw:checked { background: var(--clay); box-shadow: none; }
[data-theme="fieldguide"] input.sw:checked::after { background: var(--card); opacity: 1; }
@media (prefers-color-scheme: dark) { [data-theme="fieldguide"] .prep-ahead .gift { background: var(--card); } }

/* L2: Pick a look. Each card is a small real preview: its tokens and type come from that look's own theme file,
   scoped to the card (app.js lookScope), so only tokens are used here. Phone: the cards snap-scroll sideways;
   laptop: they sit in a row like an opening spread. */
.lk .lk-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px -20px 0; padding: 4px 20px 18px; scrollbar-width: none; }
.lk .lk-row::-webkit-scrollbar { display: none; }
.lk-card { flex: 0 0 78%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer;
  background: var(--bone); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r-xl, 22px); padding: 18px 18px 16px; font: 400 14px/1.45 var(--sys);
  transition: border-color .25s, box-shadow .25s, transform .25s; -webkit-tap-highlight-color: transparent; }
.lk-card.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 10px 30px rgb(0 0 0 / .08); }
.lk-card:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.lk-art { align-self: center; display: block; width: 168px; height: 168px; margin: 4px 0 6px; }
.lk-art svg { width: 100%; height: 100%; display: block; }
.lk-name { font: 500 var(--label-size, 11px)/1 var(--label, var(--sys)); letter-spacing: var(--label-track, .14em); text-transform: uppercase; color: var(--clay); }
.lk-t { font: 400 24px/1.12 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.lk-b { color: var(--ink-2); font-size: 13.5px; }
.lk-pill { margin-top: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair); color: var(--muted); font: 500 12.5px/1.2 var(--sys); }
.lk-card.on .lk-pill { background: var(--deep); color: var(--bone); border-color: var(--deep); }
.lk-ri { background: transparent !important; overflow: hidden; }
.lk-ri svg { width: 26px; height: 26px; }
@media (min-width: 900px) {
  #phone .scr:has(> .body.lk) { --w: 1080px; }
  .lk .lk-row + * { margin-top: 0; }
  .lk .lt { font-size: 52px; }
  .lk .lk-row { overflow: visible; margin: 34px 0 0; padding: 0; gap: 24px; }
  .lk-card { flex: 1 1 0; min-width: 0; padding: 22px 20px 20px; }
  .lk-pill { white-space: normal; }
  .lk-card:hover { transform: translateY(-3px); }
  .lk-art { width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) { .lk-card { transition: none; } .lk-card:hover { transform: none; } }
/* F3: what the deck's gestures and buttons do, on the first card only */
.dk-hint { margin: 0 auto 10px; max-width: 300px; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: center; }
.dk-hint[hidden], .scr:has(.cd-said.on) .dk-hint { display: none; }