:root{
  --ground:#ECEBE7; --surface:#FFFFFF; --surface-2:#F5F4F1; --ink:#2C2E2B; --text:#3A3D39; --muted:#63665F; --line:#DCDBD5; --pressed:#E3E2DD;
  --accent:#4F6B51; --on-accent:#FFFFFF; --accent-soft:#DFE6DC; --accent-ink:#3E5640;
  --warm:#A65A48; --warm-soft:#EFDFD9; --warm-ink:#7E4536;
  --cool-soft:#E3E5E8; --cool-ink:#3F4753;
  --feature:#DFE6DC; --on-feature:#2C2E2B; --feature-meta:#3E5640; --feature-line:rgba(79,107,81,0.45); --feature-btn:#4F6B51; --on-feature-btn:#FFFFFF;
  --wave-1:#7A6A9A; --wave-2:#4F7A9C; --wave-3:#4F8C7C; --wave-off:#C9C8C1;
  --play:#4F6B51; --on-play:#FFFFFF;
  --scrim:rgba(44,46,43,0.36);
  --f-display:"Lora",Georgia,"Times New Roman",serif; --f-body:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r-card:14px; --r-feature:16px; --r-btn:10px; --r-chip:999px; --r-tile:10px;
  --nav-h:56px; --dock-h:50px; --head-h:48px; --gutter:16px;
  color-scheme:light;
}
:root[data-mode="night"]{
  --ground:#1B1F26; --surface:#232833; --surface-2:#1F242D; --ink:#ECEEF1; --text:#D7DAE0; --muted:#A2A8B3; --line:#313745; --pressed:#2C3240;
  --accent:#B7A9E8; --on-accent:#1B1F26; --accent-soft:#2F3145; --accent-ink:#CFC5F2;
  --warm:#E8B294; --warm-soft:#3A2F2A; --warm-ink:#F0C9B0;
  --cool-soft:#27363A; --cool-ink:#B7DBCB;
  --feature:#2F3145; --on-feature:#ECEEF1; --feature-meta:#CFC5F2; --feature-line:rgba(183,169,232,0.45); --feature-btn:#B7A9E8; --on-feature-btn:#1B1F26;
  --wave-1:#8E7CC9; --wave-2:#5B8FD0; --wave-3:#5FB3A2; --wave-off:#3A4150;
  --play:#B7A9E8; --on-play:#1B1F26;
  --scrim:rgba(10,12,16,0.6);
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--ground);color:var(--text);font-family:var(--f-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background-color .6s ease,color .6s ease}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;font-size:16px;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);font-weight:600;margin:0;line-height:1.25;text-wrap:balance;letter-spacing:-0.01em}
p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{max-width:430px;margin:0 auto;min-height:100%;position:relative}
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);display:flex;align-items:center;gap:4px;height:var(--head-h);padding:0 6px;transition:background-color .6s ease}
.head .brand{display:flex;align-items:center;gap:6px;padding:0 10px;min-height:40px;flex:1;min-width:0}
.head .brand img{width:24px;height:auto;display:block}
.head .brand span{font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.head .brand .tag{font-family:var(--f-body);font-size:10px;font-weight:600;padding:1px 6px;color:var(--accent-ink);flex-shrink:0}
.head .title{flex:1;text-align:center;font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibtn{position:relative;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink);flex-shrink:0}
.ibtn:active{background:var(--pressed)}
.avatar-me{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--ground);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.view{padding:2px var(--gutter) calc(var(--nav-h) + var(--dock-h) + 72px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
.view.no-dock{padding-bottom:calc(var(--nav-h) + 68px + env(safe-area-inset-bottom,0px))}
.nav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,430px);height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding:4px 6px env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));transition:background-color .6s ease}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:500;color:var(--muted);min-height:44px}
.nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.dock{position:fixed;z-index:29;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));width:min(100%,430px);height:var(--dock-h);background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 8px 0 10px}
.dock .dline{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--wave-off)}
.dock .dline i{position:absolute;left:0;top:0;bottom:0;background:var(--wave-2);display:block}
.dock .dline img{position:absolute;top:-15px;width:16px;height:auto;transform:translateX(-55%)}
.dock .dmeta{flex:1;min-width:0;display:flex;flex-direction:column}
.dock .dmeta b{font-weight:600;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .dmeta small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast{position:fixed;z-index:60;left:50%;bottom:calc(var(--nav-h) + var(--dock-h) + 14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);opacity:0;background:var(--ink);color:var(--ground);padding:8px 12px;border-radius:999px;font-size:13px;font-weight:500;max-width:calc(100% - 2 * var(--gutter));text-align:center;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.sheet-wrap{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(100%,430px);background:var(--surface);border-radius:18px 18px 0 0;padding:8px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;max-height:88vh;overflow:auto}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line);align-self:center}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-xl{font-size:22px;line-height:1.2}
.h-lg{font-size:19px;line-height:1.25}
.h-md{font-size:17px;line-height:1.25}
.h-sm{font-family:var(--f-display);font-size:15px;line-height:1.3;font-weight:600;color:var(--ink)}
.lede{font-size:14px;color:var(--muted)}
.meta{font-size:12px;color:var(--muted)}
.body{font-size:14px;line-height:1.5;color:var(--text)}
.quote{font-family:var(--f-display);font-style:italic;font-size:15px;line-height:1.4;color:var(--ink)}
.num{font-variant-numeric:tabular-nums}

.sec{display:flex;flex-direction:column;gap:8px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sec-head h2{font-size:17px}
.sec-head a,.link{position:relative;font-size:12px;font-weight:600;color:var(--accent-ink);min-height:28px;display:inline-flex;align-items:center;gap:4px}
:root[data-mode="night"] .sec-head a,:root[data-mode="night"] .link,:root[data-mode="night"] .more{color:var(--accent)}
.sub{font-size:13px;color:var(--muted);margin-top:-2px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.card.flush{padding:0;gap:0;overflow:hidden}
.card.tint{background:var(--accent-soft);border-color:transparent}
.card.warm{background:var(--warm-soft);border-color:transparent}
.card.feature{background:var(--feature);color:var(--on-feature);border:1px solid var(--feature-line);border-radius:var(--r-feature);padding:12px;gap:8px}
.card.feature h3,.card.feature .h-md,.card.feature .h-lg{color:var(--on-feature)}
.card.feature .meta,.card.feature .fmeta,.card.feature .eyebrow,.card.feature .rmeta,.card.feature .sub,.card.feature .times{color:var(--feature-meta)}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:48px;border-top:1px solid var(--line);text-align:left;width:100%}
.row:first-child{border-top:0}
.row:active{background:var(--pressed)}
.row .rmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .rtitle{font-weight:600;color:var(--ink);font-size:14px;line-height:1.25}
.row .rtitle.serif{font-family:var(--f-display);font-size:15px}
.row .rmeta{font-size:12px;color:var(--muted);line-height:1.35}
.row .chev{color:var(--muted);flex-shrink:0}
.why{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.why svg{flex-shrink:0;color:var(--accent-ink)}
:root[data-mode="night"] .why svg{color:var(--accent)}
.date{width:36px;flex-shrink:0;text-align:center;display:flex;flex-direction:column;line-height:1.1}
.date small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.date b{font-family:var(--f-display);font-size:17px;color:var(--ink);font-weight:600}
.thumb{width:44px;height:44px;border-radius:var(--r-tile);object-fit:cover;flex-shrink:0;background:var(--pressed)}
.cover{width:36px;height:52px;border-radius:4px;object-fit:cover;flex-shrink:0;background:var(--pressed);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.photo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card);display:block;background:var(--pressed)}
.hstack{display:flex;gap:6px;align-items:center}
.wrap{flex-wrap:wrap}
.scroller{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.tile{flex:0 0 132px;display:flex;flex-direction:column;gap:6px}
.tile img{width:132px;height:88px;border-radius:var(--r-tile);object-fit:cover;background:var(--pressed)}
.tile .rtitle{font-weight:600;color:var(--ink);font-size:13px;line-height:1.3}
.book{flex:0 0 88px;display:flex;flex-direction:column;gap:6px}
.book img{width:88px;height:128px;border-radius:6px;object-fit:cover;background:var(--pressed);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.book .rtitle{font-weight:600;color:var(--ink);font-size:12px;line-height:1.3}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid3 .book{flex:none}
.grid3 .book img{width:100%;height:auto;aspect-ratio:2/3}
.divider{height:1px;background:var(--line)}

.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border-radius:var(--r-btn);font-weight:600;font-size:14px;border:1px solid transparent;white-space:nowrap}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.soft{background:var(--accent-soft);color:var(--accent-ink)}
.btn.on-feature{background:var(--feature-btn);color:var(--on-feature-btn)}
.btn.on-feature-ghost{background:transparent;color:var(--on-feature);border-color:var(--feature-line)}
.btn.block{width:100%}
.btn.sm{min-height:34px;padding:0 10px;font-size:13px;border-radius:8px}
.btn:active{transform:translateY(1px)}
.chips{display:flex;gap:6px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:3px var(--gutter);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{min-height:34px;display:inline-flex;align-items:center;gap:4px;padding:0 12px;border-radius:var(--r-chip);background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;flex-shrink:0}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
:root[data-mode="night"] .chip[aria-pressed="true"]{color:var(--accent-ink)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap;background:var(--accent-soft);color:var(--accent-ink)}
.tag.warm{background:var(--warm-soft);color:var(--warm-ink)}
.tag.cool{background:var(--cool-soft);color:var(--cool-ink)}
.tag.plain{background:var(--pressed);color:var(--text)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.input{width:100%;min-height:40px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);padding:8px 12px;font-size:16px;line-height:22px;color:var(--ink)}
textarea.input{min-height:80px;resize:vertical;line-height:1.45}
.input::placeholder{color:var(--muted)}
.ask{display:flex;align-items:center;gap:8px;min-height:44px;border-radius:999px;background:var(--surface);border:1px solid var(--line);padding:2px 2px 2px 12px;color:var(--muted)}
.ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px}
.ask .go{position:relative;width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ask .go::after{content:"";position:absolute;inset:-1px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--pressed);border-radius:12px;padding:3px}
.seg button{min-height:40px;border-radius:8px;font-weight:600;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.heart{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-btn);color:var(--ink);flex-shrink:0}
.heart[aria-pressed="true"]{color:var(--warm)}
.card.feature .heart{border:1px solid var(--feature-line);color:var(--on-feature)}
.card.feature .heart[aria-pressed="true"]{color:var(--warm)}
.avatars{display:flex}
.avatars span{width:24px;height:24px;border-radius:50%;border:2px solid var(--surface);background:var(--pressed);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--muted)}
.avatars span:first-child{margin-left:0}
.card.feature .avatars span{border-color:var(--feature);background:var(--surface);color:var(--text)}
.person{width:32px;height:32px;border-radius:50%;background:var(--cool-soft);color:var(--cool-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}

.btn.sm,.chip,.pill-toggle button,.play.sm{position:relative}
.btn.sm::after,.chip::after,.pill-toggle button::after{content:"";position:absolute;inset:-3px 0}
.play.sm::after{content:"";position:absolute;inset:-2px}
.link::after,.sec-head a::after{content:"";position:absolute;inset:-6px -4px}

.journey{display:flex;flex-direction:column;gap:8px}
.jstrip{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding-top:16px}
.jstrip i{height:8px;border-radius:4px;background:var(--wave-off);display:block}
.jstrip i.on{background:var(--accent)}
.jstrip .pg{position:absolute;top:-2px;width:18px;height:auto;transform:translateX(-50%);transition:left .6s ease}
.jlabels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;font-size:11px;color:var(--muted);text-align:center}
.jlabels b{color:var(--ink);font-weight:600}

.play{width:40px;height:40px;border-radius:var(--r-tile);background:var(--play);color:var(--on-play);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.play.soft{background:var(--accent-soft);color:var(--accent-ink)}
.play.round{border-radius:50%}
.play.xl{width:60px;height:60px;border-radius:50%}
.play.sm{width:36px;height:36px;border-radius:8px}
.wave{position:relative;display:flex;align-items:flex-end;gap:2px;width:100%;height:40px;padding-top:14px;cursor:pointer;touch-action:none}
.wave.full{height:92px;padding-top:28px}
.wave i{flex:1;border-radius:2px;background:var(--wave-off);display:block;transition:background-color .15s}
.wave i.p1{background:var(--wave-1)} .wave i.p2{background:var(--wave-2)} .wave i.p3{background:var(--wave-3)}
.wave .pg{position:absolute;top:0;width:18px;height:auto;transform:translateX(-55%);pointer-events:none;transition:left .25s linear}
.wave.full .pg{width:28px;top:0}
.pecking{animation:peck .7s ease-in-out infinite;transform-origin:50% 90%}
@keyframes peck{0%,100%{transform:translateX(-55%) rotate(0deg)}45%{transform:translateX(-55%) translateY(2px) rotate(-12deg)}60%{transform:translateX(-55%) translateY(1px) rotate(-4deg)}}
.times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.pecking{animation:none}}

.card.feature .why{color:var(--feature-meta)}
.card.feature .why svg{color:var(--on-feature)}
.mono{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;font-size:12px;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent-ink)}
.mono.m2{background:var(--warm-soft);color:var(--warm-ink)} .mono.m3{background:var(--cool-soft);color:var(--cool-ink)} .mono.m4{background:var(--pressed);color:var(--text)}
.mono.lg{width:56px;height:56px;font-size:17px} .mono.sm{width:28px;height:28px;font-size:11px}
.pcards{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.pcards::-webkit-scrollbar{display:none}
.pcard{flex:0 0 236px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px;display:flex;flex-direction:column;gap:8px}
.pcard .who{display:flex;align-items:center;gap:10px;min-width:0}
.pcard .who b{display:block;color:var(--ink);font-size:13px;font-weight:600}
.pcard .who small{display:block;color:var(--muted);font-size:11px}
.pcard .wo{font-family:var(--f-display);font-size:15px;line-height:1.3;color:var(--ink);font-weight:600}
.reasons{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.reasons li{display:flex;gap:6px;font-size:12px;line-height:1.3;color:var(--text)}
.reasons li svg{flex-shrink:0;margin-top:1px;color:var(--accent-ink)}
:root[data-mode="night"] .reasons li svg{color:var(--accent)}
.ice{background:var(--surface-2);border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.4;color:var(--text)}
.spot{display:flex;flex-direction:column;gap:8px}
.spot .top{display:flex;gap:10px;align-items:center}
.kicon{width:32px;height:32px;border-radius:8px;background:var(--pressed);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kicon.k-book{background:var(--warm-soft);color:var(--warm-ink)} .kicon.k-podcast,.kicon.k-video{background:var(--accent-soft);color:var(--accent-ink)} .kicon.k-paper,.kicon.k-public{background:var(--cool-soft);color:var(--cool-ink)}
.chip b{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] b{color:inherit}
mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px}
.scope-note{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted)}
.scope-note span{display:inline-flex;align-items:center;gap:4px}
.stack-avatars{display:flex}
.stack-avatars .mono{margin-left:-8px;border:2px solid var(--surface)}
.stack-avatars .mono:first-child{margin-left:0}
.card.feature .stack-avatars .mono{border-color:var(--feature)}

.fab{position:fixed;z-index:31;right:max(var(--gutter),calc(50% - 215px + var(--gutter)));bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom,0px));height:44px;padding:0 12px 0 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;box-shadow:0 0 0 3px var(--ground),0 8px 20px rgba(0,0,0,.14);transition:transform .2s ease,bottom .25s ease}
.fab.up{bottom:calc(var(--nav-h) + var(--dock-h) + 10px + env(safe-area-inset-bottom,0px))}
.fab:active{transform:scale(.96)}
:root[data-mode="night"] .fab{box-shadow:0 0 0 3px var(--ground),0 8px 22px rgba(0,0,0,.45)}
.entry{display:flex;flex-direction:column;gap:4px;padding:8px 12px;border-top:1px solid var(--line)}
.entry:first-child{border-top:0}
.entry p{font-size:14px;line-height:1.45;color:var(--ink)}
.entry .emeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
.route{display:flex;gap:8px;align-items:flex-start;background:var(--surface-2);border-radius:12px;padding:8px 10px}
.route .kicon{background:var(--accent-soft);color:var(--accent-ink)}
.prompt{font-family:var(--f-display);font-size:17px;line-height:1.3;color:var(--ink);font-weight:500}
.evtag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--cool-soft);color:var(--cool-ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

.face{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--pressed);display:block}
.face.lg{width:56px;height:56px} .face.sm{width:28px;height:28px} .face.xl{width:100%;height:auto;aspect-ratio:1/1;border-radius:14px}
.stack-avatars .face{margin-left:-8px;border:2px solid var(--surface)} .stack-avatars .face:first-child{margin-left:0}
.card.feature .stack-avatars .face{border-color:var(--feature)}
.deck{position:relative;height:400px;touch-action:pan-y}
.deck .swipe{position:absolute;inset:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:8px;cursor:grab;user-select:none;touch-action:pan-y}
.deck .swipe.behind{transform:scale(.96) translateY(10px);opacity:.7;pointer-events:none}
.deck .swipe .big{width:100%;height:200px;border-radius:12px;object-fit:cover;background:var(--pressed)}
.deck .swipe .bigmono{width:100%;height:200px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:56px;font-weight:600;background:var(--accent-soft);color:var(--accent-ink)}
.deck .swipe[data-lean="meet"]{box-shadow:0 0 0 3px var(--accent)} .deck .swipe[data-lean="pass"]{box-shadow:0 0 0 3px var(--line)}
.deckbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

.adminbox{border:1px dashed var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2)}
.tag.admin{background:var(--warm-soft);color:var(--warm-ink);align-self:flex-start}
.viewbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--warm-soft);color:var(--warm-ink);font-size:12px}
.viewbar span{flex:1;min-width:0}
.adot{position:absolute;right:6px;bottom:8px;width:10px;height:10px;border-radius:50%;background:var(--warm);border:2px solid var(--ground)}
.kv{display:grid;grid-template-columns:84px minmax(0,1fr);gap:2px 8px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

.sbox{display:flex;flex-direction:column;gap:8px}
.sbox .ask{cursor:text}
.sbox .ask input{-webkit-appearance:none;appearance:none}
.sbox .ask input::-webkit-search-cancel-button{-webkit-appearance:none}
.sres{display:flex;flex-direction:column;gap:8px}
.sres:empty{display:none}
.answer{background:var(--accent-soft);border-radius:var(--r-card);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.answer .h-sm{color:var(--accent-ink)}
.sheet .sbox{min-height:60vh}
.square{aspect-ratio:1/1;height:auto!important}
.tile.sq{flex:0 0 120px}
.tile.sq img{width:120px;height:120px;object-fit:cover}

.connect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.connect .btn{padding:0 6px;font-size:13px;gap:4px}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.slot{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.slot .face,.slot .mono{width:44px;height:44px}
.slot .nm{font-weight:600;color:var(--ink);font-size:13px;line-height:1.25}
.slot .connect{grid-template-columns:1fr}
.pill-toggle{display:inline-grid;grid-auto-flow:column;gap:4px;background:var(--pressed);border-radius:999px;padding:3px}
.pill-toggle button{min-height:34px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.pill-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.captures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.capture{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:12px;color:var(--ink)}
.capture[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.rec{width:72px;height:72px;border-radius:50%;background:var(--warm);color:var(--surface);display:flex;align-items:center;justify-content:center}

.kick{display:flex;align-items:center;gap:6px}
.dcmark{width:22px;height:auto;flex-shrink:0}
.tag.dc{background:var(--accent-soft);color:var(--accent-ink)}
.card.feature .tag.dc{background:var(--surface)}
.date.dc{background:var(--accent-soft);border-radius:8px;padding:3px 0}
.date.dc small{color:var(--accent-ink)}

.proto{display:inline-flex;align-items:center;height:18px;padding:0 6px;border:1px dashed var(--line);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1;color:var(--muted);white-space:nowrap;flex-shrink:0;vertical-align:middle}
.card.feature .proto{color:var(--feature-meta);border-color:var(--feature-line)}

.vote{display:inline-flex;align-items:center;height:34px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0;vertical-align:middle}
.vote .up,.vote .down{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted)}
.vote .up::after{content:"";position:absolute;inset:-3px 0 -3px -6px}
.vote .down::after{content:"";position:absolute;inset:-3px -6px -3px 0}
.vote .up[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.vote .down[aria-pressed="true"]{background:var(--warm-soft);color:var(--warm-ink)}
.vote .n{min-width:12px;padding:0 2px;text-align:center;color:var(--ink)}
.adminbox .vote{background:var(--surface)}

.thread{display:flex;flex-direction:column;gap:4px;min-width:0}
.thread > .meta,.thread > .why{align-self:center;text-align:center;padding:4px 0}
.msg{align-self:flex-start;max-width:84%;display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:14px 14px 14px 4px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--accent-soft);border-color:var(--feature-line);border-radius:14px 14px 4px 14px}
.msg + .msg.me,.msg.me + .msg:not(.me){margin-top:4px}
.msg small,.msg .meta{font-size:11px;line-height:1.3;color:var(--muted)}
.msg.me small,.msg.me .meta{color:var(--accent-ink)}
.msg a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.msg .proto{align-self:flex-start}
.msgbar{display:flex;align-items:flex-end;gap:6px}
.msgbar .input,.msgbar input,.msgbar textarea{flex:1;min-width:0;min-height:40px;font-size:16px}
.msgbar textarea{height:40px;max-height:128px;resize:none;line-height:22px;padding:8px 12px}
.msgbar .btn{flex-shrink:0}
.msgbar .go{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.msgbar [disabled]{opacity:.5;cursor:default}

.email{display:flex;flex-direction:column;gap:4px;min-width:0;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:10px;padding:8px 10px 10px;font-size:13px;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.email .meta,.email small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:11px;color:var(--muted)}
.email b,.email strong,.email h3,.email h4{font-family:var(--f-body);font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);margin:0}
.email p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.email hr{border:0;border-top:1px solid var(--line);margin:2px 0;width:100%}
.email img:not(.face){width:20px;height:auto;flex-shrink:0}
.email .cta,.email .btn{align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;height:28px;margin-top:2px;padding:0 10px;border-radius:8px;border:0;background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:600;pointer-events:none}
.email .cta::after,.email .btn::after{content:none}

.also{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.also > .meta,.also > span:not(.chip){font-size:12px;color:var(--muted);margin-right:2px}
.also .chip svg{flex-shrink:0}

.privacy{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:2px 12px;font-size:13px;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.privacy > *{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 0;border-top:1px solid var(--line)}
.privacy > :first-child,.privacy > .eyebrow + *,.privacy > h3 + *{border-top:0}
.privacy > :not(.adminbox) > :last-child:not(:first-child){margin-left:auto}
.privacy > .eyebrow,.privacy > h3{display:block;min-height:0;padding:8px 0 2px;border-top:0}
.privacy > .adminbox{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:0;margin:4px 0 8px;padding:8px 10px;border:1px dashed var(--line)}
.privacy b,.privacy strong{color:var(--ink);font-weight:600}
.privacy .meta{font-size:12px}
.privacy label{cursor:pointer}
.privacy select{min-height:34px;max-width:60%;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:16px}
.privacy input[type="checkbox"]{-webkit-appearance:none;appearance:none;position:relative;flex-shrink:0;width:36px;height:22px;margin:0 0 0 auto;border-radius:999px;background:var(--pressed);box-shadow:inset 0 0 0 1px var(--muted);cursor:pointer;transition:background-color .15s}
.privacy input[type="checkbox"]::before{content:"";position:absolute;left:4px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .15s,background-color .15s}
.privacy input[type="checkbox"]:checked{background:var(--accent);box-shadow:none}
.privacy input[type="checkbox"]:checked::before{transform:translateX(14px);background:var(--on-accent)}
.privacy button[role="switch"]{position:relative;flex-shrink:0;width:44px;min-height:40px;padding:0}
.privacy > button[role="switch"]{width:100%;text-align:left;padding:4px 48px 4px 0}
.privacy button[role="switch"]::before{content:"";position:absolute;right:0;top:50%;width:36px;height:22px;margin-top:-11px;border-radius:999px;background:var(--pressed);box-shadow:inset 0 0 0 1px var(--muted);transition:background-color .15s}
.privacy button[role="switch"]::after{content:"";position:absolute;right:18px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--muted);transition:right .15s,background-color .15s}
.privacy button[role="switch"][aria-checked="true"]::before{background:var(--accent);box-shadow:none}
.privacy button[role="switch"][aria-checked="true"]::after{right:4px;background:var(--on-accent)}
.sheet .privacy{background:var(--surface-2)}

.owners{display:inline-flex;align-items:center;min-width:0;vertical-align:middle}
.owners .face,.owners .mono{width:24px;height:24px;margin-left:-6px;border:2px solid var(--surface);font-size:11px}
.owners > :first-child{margin-left:0}
.owners > :not(.face):not(.mono){margin-left:6px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.owners > b{color:var(--ink);font-weight:600}
.card.feature .owners .face,.card.feature .owners .mono{border-color:var(--feature)}
.card.tint .owners .face,.card.tint .owners .mono{border-color:var(--accent-soft)}
.adminbox .owners .face,.adminbox .owners .mono,.why-came .owners .face,.why-came .owners .mono{border-color:var(--surface-2)}

.interest{display:flex;flex-direction:column;gap:6px;min-width:0}
.interest p{font-size:13px;line-height:1.4;color:var(--text)}
.interest + .interest{border-top:1px solid var(--line);padding-top:6px}

.project,.match{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.project.forming{background:transparent}
.project p,.match p{font-size:13px;line-height:1.4;color:var(--text)}
.project .meta,.match .meta{font-size:12px;color:var(--muted)}
.project .eyebrow{margin-top:2px;color:var(--muted)}
.project ul,.why-came ul,.match ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.project li,.why-came li,.match li{display:flex;align-items:center;gap:6px;min-height:36px;padding:0;border-top:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.project li:first-child,.why-came li:first-child,.match li:first-child{border-top:0}
.project li > a,.why-came li > a,.match li > a{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:6px;min-height:40px;color:var(--ink)}

.why-came{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4;color:var(--ink)}
.why-came .eyebrow{color:var(--muted)}
.match > .hstack{gap:10px}
.match .why{align-items:flex-start}

.more{position:relative;padding:0 2px;font-size:inherit;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.more::after{content:"";position:absolute;inset:-10px -6px}

.kv.fields{grid-template-columns:96px minmax(0,1fr);gap:0;font-size:14px}
.kv.fields dt,.kv.fields dd{border-top:1px solid var(--line)}
.kv.fields dt{padding:8px 0 6px;font-size:12px;line-height:16px;color:var(--muted)}
.kv.fields dd{padding:6px 0 6px 8px;line-height:20px;color:var(--ink)}
.kv.fields dt:first-of-type,.kv.fields dt:first-of-type + dd{border-top:0}

.boot{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.boot .crest{width:44px;height:auto;display:block;opacity:.9}
.boot .pg{width:30px;height:auto;display:block;transform-origin:50% 90%;animation:bootpeck 1.1s ease-in-out infinite}
@keyframes bootpeck{0%,100%{transform:rotate(0deg)}45%{transform:translateY(2px) rotate(-12deg)}60%{transform:translateY(1px) rotate(-4deg)}}
.door .door-head{display:flex;align-items:center;gap:6px}
.door .card .link[disabled],.door .btn[disabled],.door .row[disabled]{opacity:.55;pointer-events:none}
.door .err{color:var(--warm-ink)}
@media (prefers-reduced-motion:reduce){.boot .pg{animation:none}}

.notif{position:relative;color:var(--text)}
.notif .rtitle{font-weight:500}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--warm);flex-shrink:0}
.notif:has(.dot) .rtitle{font-weight:600;color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warm);flex-shrink:0}
.going{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.going .aud{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 2px;font-size:12px;font-weight:500;color:var(--muted)}
.going .aud::after{content:"";position:absolute;inset:-3px -4px}
.going .aud svg{flex-shrink:0}
.going .seg{flex-basis:100%}
.card.feature .going .aud{color:var(--feature-meta)}
.card.feature .going .seg{background:var(--surface-2)}
.level{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;flex-shrink:0;vertical-align:middle;background:var(--pressed);color:var(--text)}
.level.l1{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.level.l2{background:var(--cool-soft);color:var(--cool-ink)}
.level.l3{background:var(--accent-soft);color:var(--accent-ink)}
.level.l4{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent)}
.level.l5{background:var(--accent);color:var(--on-accent)}
.tagpick{display:flex;flex-wrap:wrap;gap:6px}
.tagpick .chip{flex-shrink:1}
.round:not(.play){display:flex;align-items:center;gap:8px;min-width:0}
.prog{display:block;flex:1;min-width:48px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.prog > span,.prog > i{display:block;height:100%;width:var(--w,0%);border-radius:2px;background:var(--accent);transition:width .3s ease}
.poll{gap:8px}
.poll .bar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:4px 8px;border-radius:8px;background:var(--surface-2);font-size:13px;line-height:1.3;color:var(--ink);overflow:hidden}
.poll .bar::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--w,0%);background:var(--accent-soft);border-radius:8px 0 0 8px}
.poll .bar span{min-width:0;overflow-wrap:anywhere}
.poll .bar b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-ink);flex-shrink:0}
.poll .themes{display:flex;flex-wrap:wrap;gap:4px}
.poll .themes .tag b{font-weight:600;font-variant-numeric:tabular-nums;opacity:.8}
.poll .quote{font-family:var(--f-body);font-style:normal;font-size:13px;line-height:1.45;color:var(--text);border-left:2px solid var(--line);padding:0 0 0 8px}
.poll .answers{border-top:1px solid var(--line);margin:2px -12px -10px}
.poll .answers > *{font-size:13px}
.lane{gap:8px}
.lane-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.lane-head h2,.lane-head h3{font-size:15px;line-height:1.3}
.lane-head .meta{flex-shrink:0}
.exp{gap:8px}
.exp > p{font-size:13px;line-height:1.45;color:var(--text)}
.checklist .check{gap:8px;min-height:44px}
.check .rtitle{font-weight:500}
.check.claimed .rtitle{color:var(--ink)}
.check.done .rtitle{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.check.done svg{color:var(--accent-ink)}
.team{display:inline-flex}
.group{display:flex;flex-direction:column;gap:4px;min-width:0}
.group .msg .from,.group .msg b{font-size:11px;font-weight:600;color:var(--muted)}
.voice{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px;border-radius:12px;background:var(--surface-2);min-width:0}
.voice audio{flex:1;min-width:0;height:34px}
.voice .rec{width:40px;height:40px;flex-shrink:0}
.voice .rec[aria-pressed="true"]{box-shadow:0 0 0 4px var(--warm-soft)}
.web{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.web canvas{display:block;width:100%;border-radius:var(--r-feature);background:var(--surface-2);touch-action:pan-y}
.web .scrub:not(.sr){width:100%;height:40px;margin:0;accent-color:var(--accent);background:transparent;cursor:pointer}
.web .tip{position:absolute;z-index:2;max-width:220px;padding:4px 8px;border-radius:8px;background:var(--ink);color:var(--ground);font-size:12px;line-height:1.35;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.18);transform:translate(-50%,-100%)}
.web .tip[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.prog > span,.prog > i{transition:none}}
.exp-ask{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;border-color:var(--feature-line);background:var(--accent-soft)}
.exp-ask .exp-ask-box{display:block;color:var(--muted);background:var(--surface);pointer-events:none}
.exp-ask:hover .exp-ask-box,.exp-ask:focus-visible .exp-ask-box{border-color:var(--accent)}
.exp-chat{display:flex;flex-direction:column;gap:10px}
.exp-chat .thread{max-height:320px;overflow-y:auto;padding:2px 0}
.exp-draft{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px}
.exp-draft .kv{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:baseline;min-width:0;font-size:14px}
.exp-draft .kv[role=button]{cursor:pointer}
.exp-draft .kv > span:last-child,.exp-draft ul{min-width:0;overflow-wrap:anywhere}
.exp-draft ul{margin:0;padding-left:16px}
.weave-card{display:flex;flex-direction:column;gap:10px}
.weave-card .tagpick{margin:0}
.weave-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin:4px 0 12px}
.weave-bar span{display:block;height:100%;background:var(--accent);border-radius:2px}
.nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.gate-wrap{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:calc(56px + env(safe-area-inset-top,0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom,0px))}
.gate-theme{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:var(--gutter)}
.gate{display:flex;flex-direction:column;gap:14px;width:100%;max-width:380px;margin:0 auto}
.gate-brand{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-bottom:10px}
.gate-crest{width:84px;height:auto}
.gate-name{font-family:var(--f-display);font-size:30px;line-height:1.1;font-weight:600;color:var(--ink);letter-spacing:-0.01em;margin-top:6px}
.gate-sub{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gate-card{display:flex;flex-direction:column;gap:10px;padding:20px}
.gate-h{font-size:22px;margin:0 0 2px}
.gate-label{font-size:13px;font-weight:600;color:var(--text)}
.gate-card .input{min-height:48px;font-size:16px}
.gate-card .gate-code{font-size:24px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums;padding-left:.35em}
.gate-card .btn.block{min-height:48px;margin-top:4px}
.gate-back{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:13px}
.gate-alt{display:flex;flex-direction:column;gap:8px}
.gate-alt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.gate-alt-row:hover{border-color:var(--accent)}
.gate-alt-row b{color:var(--ink);font-weight:600}
.gate-alt-row svg{color:var(--muted);flex-shrink:0}
.gate-account{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.gate-sent{display:flex;justify-content:center}
.gate-foot{display:flex;justify-content:center;gap:20px;margin-top:10px}
.gate-foot a{color:var(--muted);font-size:13px;font-weight:500;text-decoration:none;padding:6px 2px}
.gate-foot a:hover{color:var(--accent)}
.door .err{color:var(--warm-ink)}
.door [disabled]{opacity:.55;pointer-events:none}
.gate-hits .row{justify-content:space-between;cursor:pointer;background:var(--surface);color:var(--ink);font:inherit}
.gate-hits .row:first-child{border-top:0}
.gate-hits .row:hover{background:var(--surface-2)}
.gate-hits .rtitle{font-weight:600}
.gate-me{font-size:12px;font-weight:600;color:var(--accent);flex-shrink:0}
.gate-none{padding:4px 2px}
.gate-loading{position:relative;height:3px;margin:-4px 2px 0;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .2s ease}
.gate-loading.on{opacity:1}
.app-loading{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;margin:0;border-radius:0;z-index:60}
.gate-loading i{position:absolute;top:0;bottom:0;left:0;width:45%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--wave-1),var(--wave-2),var(--wave-3),transparent);transform:translateX(-100%)}
.gate-loading.on i{animation:gate-slide 1.15s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes gate-slide{0%{transform:translateX(-100%)}100%{transform:translateX(225%)}}
@media (prefers-reduced-motion: reduce){.gate-loading.on i{animation:gate-pulse 1.4s ease-in-out infinite;width:100%;transform:none}@keyframes gate-pulse{0%,100%{opacity:.35}50%{opacity:1}}}

.playout{margin-bottom:-4px}
.pclose{display:flex;flex-direction:column;gap:8px}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px}
.pstats>div{display:flex;flex-direction:column;align-items:flex-start;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);min-width:0}
.pstats b{font-family:var(--f-display);font-size:20px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.pstats span{font-size:12px;color:var(--muted)}
.pquote{margin:0;padding:14px 16px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--r-card) var(--r-card) 0;display:flex;flex-direction:column;gap:6px}
.pquote blockquote{margin:0;font-family:var(--f-display);font-size:19px;line-height:1.35;color:var(--ink);text-wrap:pretty}
.ptl{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:12px}
.ptl li{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.ptl li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.ptl li.both::before{background:var(--accent);border-color:var(--accent)}
.ptl li.note::before{background:var(--warm-soft);border-color:var(--warm)}
.ptl-ev{display:flex;flex-direction:column;gap:1px;color:var(--ink);text-decoration:none}
.ptl-ev b{font-size:15px;font-weight:600}
.ptl-said{margin:0;padding:6px 10px;background:var(--surface-2);border-radius:10px;font-size:13px;line-height:1.4;color:var(--ink);display:flex;flex-direction:column;gap:2px}

.web-key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.web-key span{display:inline-flex;align-items:center;gap:6px}
.web-key i{width:10px;height:10px;border-radius:50%;display:inline-block}
.web-key b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}