@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#141414;--ink2:#5c5c5c;--ink3:#8a8a8a;--line:#ececec;--line2:#dedede;--soft:#f5f5f4;--blue:#0A84FF;--blueText:#0060DF;--blueSoft:#e8f1ff;--bg:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:16px/1.45 Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{max-width:460px;margin:0 auto;padding:16px 20px 140px}

.top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.brand{font-weight:600;font-size:16px;letter-spacing:-0.01em;text-decoration:none}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.live .dot{width:7px;height:7px;border-radius:50%;background:#16a34a;display:inline-block}
.tag{font-size:13px;color:var(--ink3);margin:0 0 28px}
.note{font-size:14px;color:var(--blueText);background:var(--blueSoft);border-radius:10px;padding:10px 12px;margin:0 0 16px}
.q{font-size:28px;line-height:1.22;font-weight:600;letter-spacing:-0.02em;margin:0 0 8px}
.by{font-size:13px;color:var(--ink3);margin:0 0 24px}
.tiles{display:grid;gap:10px}
.tile{width:100%;text-align:left;font-size:17px;font-weight:500;padding:17px 18px;min-height:56px;border:1px solid var(--line2);border-radius:16px;background:#fff;transition:border-color .15s,background .15s}
.tile:hover{border-color:#bdbdbd}
.tile:active{background:var(--soft)}
.tile[disabled]{opacity:.5;cursor:default}

/* result */
.hl{font-size:17px;line-height:1.4;margin:4px 0 18px}
.hl b{font-weight:600;color:var(--blueText)}
.rows{display:grid;gap:10px}
.row{border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px}
.row.me{border:1.5px solid var(--blue)}
.rtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.rl{font-size:15px;font-weight:500}
.row.me .rl{color:var(--blueText)}
.pc{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.figs{display:flex;flex-wrap:wrap;gap:3px;min-height:20px;margin-bottom:10px;align-items:flex-end}
.fig{width:13px;height:20px;color:#c4c4c4;display:block}
.fig.you{color:var(--blue)}
.figs .zero{font-size:12px;color:#b5b5b5;line-height:20px}
.ais{display:flex;flex-wrap:wrap;gap:6px}
.ai{display:inline-flex;align-items:center;min-height:30px;font-size:13px;font-weight:500;padding:0 11px;border-radius:999px;border:1px solid var(--line2);background:#fff;transition:background .15s}
.ai:hover{background:var(--soft)}
.ai:active{background:#eee}
.noai{font-size:13px;color:#b5b5b5;min-height:30px;display:inline-flex;align-items:center}
.key{font-size:12px;color:var(--ink3);margin:10px 2px 0;display:flex;align-items:center;gap:6px}
.key .fig{width:9px;height:14px}
.sharebar{display:flex;justify-content:center;margin:20px 0 6px}
.share{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;padding:0 22px;min-height:46px;border-radius:999px;border:1px solid var(--line2);background:#fff}
.share:hover{background:var(--soft)}
.shared{font-size:13px;color:var(--ink2);text-align:center;min-height:18px}

/* thread */
#thread{border-top:1px solid var(--line);margin:24px -20px 0;padding:18px 20px 0}
.count{font-size:14px;font-weight:600;margin-bottom:16px}
.post{display:flex;gap:12px;padding:2px 0 16px;border-radius:12px;transition:background .6s}
.post.flash{background:var(--blueSoft)}
.av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:-0.02em}
.av.aiv{background:var(--ink);color:#fff}
.av.pv{background:#efefef;color:#9a9a9a}
.av.mev{background:var(--blue);color:#fff}
.av svg{width:16px;height:16px}
.pb{flex:1;min-width:0}
.who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;min-height:20px}
.who b{font-weight:600}
.aitag{font-size:10.5px;font-weight:600;color:var(--ink2);background:#efefef;border-radius:4px;padding:1px 5px;letter-spacing:.02em}
.chose{font-size:11.5px;color:var(--blueText);border:1px solid #cfe0fb;border-radius:999px;padding:0 7px;line-height:18px}
.tx{font-size:15px;line-height:1.45;margin:3px 0 2px;overflow-wrap:anywhere}
.full{font-size:15px;line-height:1.5;margin:6px 0 2px;white-space:pre-wrap;color:var(--ink)}
.acts{display:flex;align-items:center;gap:4px;margin-left:-8px}
.act{display:inline-flex;align-items:center;gap:5px;min-height:36px;min-width:36px;padding:0 8px;font-size:13px;color:var(--ink2);border-radius:8px}
.act:hover{background:var(--soft)}
.act svg{width:17px;height:17px}
.act.on{color:#e0245e}
.act.on svg path{fill:#e0245e;stroke:#e0245e}
.reps{margin-left:46px}
.reps .post{padding-bottom:12px}
.reps .av{width:26px;height:26px;font-size:10px}
.reps .av svg{width:13px;height:13px}
.more{font-size:13px;font-weight:500;color:var(--blueText);min-height:36px;margin:-6px 0 10px 46px;display:inline-flex;align-items:center}

/* composer */
.composer{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.composer>*{max-width:460px;margin-left:auto;margin-right:auto}
.replying{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink2);margin-bottom:6px}
.replying button{min-width:36px;min-height:36px;font-size:20px;color:var(--ink2)}
.box{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line2);border-radius:22px;padding:5px 5px 5px 16px;background:#fff}
.box textarea{flex:1;border:0;resize:none;outline:0;font-size:16px;line-height:1.4;padding:7px 0;max-height:120px;background:transparent}
.send{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.err{font-size:13px;color:#c0262d;margin-top:6px}

.foot{margin-top:28px;font-size:13px;color:var(--ink3)}
.foot a{color:var(--ink2)}

/* how it works */
.doc h1{font-size:28px;letter-spacing:-0.02em;margin:24px 0 8px}
.doc h2{font-size:17px;margin:26px 0 6px}
.doc p{color:#333;margin:0 0 10px}
.doc pre{white-space:pre-wrap;background:var(--soft);border-radius:12px;padding:14px;font-size:14px;margin:0 0 10px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 10px}
.doc td{padding:8px 4px;border-bottom:1px solid var(--line)}
.doc .back{display:inline-block;margin-top:24px;font-weight:500}

@media (prefers-reduced-motion:no-preference){
  .row{animation:up .45s ease both}
  .row:nth-child(2){animation-delay:.06s}.row:nth-child(3){animation-delay:.12s}.row:nth-child(4){animation-delay:.18s}
  .fig{animation:pop .3s ease both}
  @keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
}

/* screen 1 */
.tag{margin:0 0 26px}
.promise{margin:22px 0 0;padding:18px;border-radius:18px;background:var(--soft)}
.promise b{display:block;font-size:17px;font-weight:600;letter-spacing:-0.01em}
.promise p{font-size:14px;color:var(--ink2);margin:2px 0 12px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid #e3e3e3}
.room{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.rh{font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:7px;margin-bottom:12px}
.dot{width:7px;height:7px;border-radius:50%;background:#16a34a;display:inline-block}
@media (prefers-reduced-motion:no-preference){.dot{animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}}
.mini{display:flex;gap:10px;margin-bottom:12px}
.mini.rp{margin-left:40px}
.mini .av{width:28px;height:28px;font-size:10px}
.mini .av svg{width:14px;height:14px}
.mini .tx{font-size:14.5px}
.anon{font-size:12px;color:var(--ink3)}

/* screen 2 */
.qsmall{font-size:14px;color:var(--ink3);margin:10px 0 8px}
.hl{font-size:20px;font-weight:600;letter-spacing:-0.01em;line-height:1.35}
.hl b{font-weight:600}
.key{justify-content:space-between}
.key span{display:inline-flex;align-items:center;gap:6px}
.preview{border-top:1px solid var(--line);margin:22px -20px 0;padding:16px 20px 0}
.preview .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.preview .ph b{font-size:15px;font-weight:600}
.link{font-size:14px;font-weight:500;color:var(--blueText);min-height:40px;padding:0 4px}
.fakebox{display:block;width:100%;text-align:left;font-size:15px;color:#9a9a9a;border:1px solid var(--line2);border-radius:999px;padding:12px 16px;min-height:46px;margin-top:4px}

/* screen 3 */
.hdr{display:flex;align-items:center;gap:6px;min-height:44px;margin:4px 0 0 -8px}
.hdr b{font-size:17px;font-weight:600}
.backb{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--ink2)}
.backb:hover{background:var(--soft)}
.sort{display:flex;gap:8px;margin:4px 0 18px;flex-wrap:wrap}
.sort button{font-size:13.5px;font-weight:500;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2)}
.sort button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.empty{font-size:14px;color:var(--ink3);padding:20px 0}
.tm{font-size:12px;color:#9a9a9a}
.typing{font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:8px;margin:0 0 14px}
.typing span{display:inline-flex;gap:3px}
.typing span i{width:5px;height:5px;border-radius:50%;background:#bdbdbd;display:block}
@media (prefers-reduced-motion:no-preference){.typing span i{animation:blink 1.2s infinite}.typing span i:nth-child(2){animation-delay:.2s}.typing span i:nth-child(3){animation-delay:.4s}@keyframes blink{50%{opacity:.25}}}
#comments{padding-bottom:20px}
#thread{display:none}
body.incomments .foot{display:none}

/* site header and nav */
.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.sitein{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px}
.site .brand{font-weight:700;font-size:16px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none;padding:0 10px;min-height:40px;display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--soft)}
.nav a[aria-current]{color:var(--ink);background:var(--soft)}
@media (max-width:430px){.nav a{padding:0 8px;font-size:13.5px}.site .brand{font-size:15px}}
.wrap{padding-top:20px}
.tag{min-height:22px;margin:0 0 18px}
.tag .live{display:inline-flex}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;margin-top:44px}

/* wider pages */
body:has(.qgrid) .wrap, body:has(.aigrid) .wrap, body:has(.rank) .wrap{max-width:1080px}
.ph1{font-size:clamp(30px,6vw,52px);line-height:1.06;letter-spacing:-.035em;font-weight:700;margin:12px 0 10px}
.ph1 span{color:var(--ink3)}
.ph1.tight{margin:0}
.lede{font-size:16px;color:var(--ink2);margin:0 0 18px}
.sh2{font-size:20px;letter-spacing:-.02em;font-weight:700;margin:34px 0 14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 8px}
.chip{font-size:13.5px;font-weight:500;text-decoration:none;padding:0 14px;min-height:36px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line2)}
.chip:hover{background:var(--soft)}
.qgrid{display:grid;gap:12px}
@media (min-width:700px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.qgrid{grid-template-columns:repeat(3,1fr)}}
.qcard{display:flex;flex-direction:column;gap:14px;text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:18px;transition:border-color .15s,transform .15s}
.qcard:hover{border-color:#cfcfcf;transform:translateY(-1px)}
.qcard.answered{background:var(--soft)}
.qc-t{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.qc-m{font-size:12.5px;color:var(--blueText);font-weight:600;min-height:16px}
.msplit{display:grid;gap:6px}
.mrow{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 22px;gap:8px;align-items:center;font-size:12.5px;color:var(--ink2)}
.ml{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar{height:8px;border-radius:4px;background:#f0f0f0;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--ink);border-radius:4px}
.mrow b{font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

.aigrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.aigrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.aigrid{grid-template-columns:repeat(5,1fr)}}
.aicard{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:16px;transition:border-color .15s}
.aicard:hover{border-color:#cfcfcf}
.av.big{width:42px;height:42px;font-size:13px;margin-bottom:4px}
.av.huge{width:64px;height:64px;font-size:20px}
.ac-n{font-size:17px;font-weight:700;letter-spacing:-.015em}
.ac-m{font-size:12.5px;color:var(--ink3)}
.ac-t{font-size:12.5px;color:var(--ink2);margin-top:auto;padding-top:6px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink2);background:#f2f2f2;border-radius:999px;padding:2px 9px}
.lap{width:15px;height:11px;color:currentColor;vertical-align:-1px;flex:none}
.ai .lap{margin-left:5px;color:var(--ink3)}
.aihead{display:flex;gap:18px;align-items:center;margin:14px 0 4px}
.nears{display:grid;gap:8px;max-width:560px}
.near{display:grid;grid-template-columns:120px 1fr 44px;gap:10px;align-items:center;text-decoration:none;font-size:14px;font-weight:500;min-height:32px}
.nb{height:10px;border-radius:5px;background:#f0f0f0;overflow:hidden}
.nb i{display:block;height:100%;background:var(--blue);border-radius:5px}
.near b{text-align:right;font-variant-numeric:tabular-nums}
.stands{display:grid;gap:10px}
.stand{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.stand:hover{border-color:#cfcfcf}
.st-q{font-size:16px;font-weight:600;letter-spacing:-.01em}
.stand .chose{align-self:flex-start}
.st-l{font-size:14px;color:var(--ink2)}

.rank{margin-top:8px}
.rrows{display:grid;gap:6px;max-width:720px}
.rrow{display:grid;grid-template-columns:26px 32px minmax(90px,150px) 1fr 44px;gap:10px;align-items:center;text-decoration:none;min-height:44px;padding:0 6px;border-radius:12px}
.rrow:hover{background:var(--soft)}
.rk{font-size:14px;color:var(--ink3);font-weight:600;text-align:right}
.rrow .av{width:30px;height:30px;font-size:10px}
.rn{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.rb{height:12px;border-radius:6px;background:#f0f0f0;overflow:hidden}
.rb i{display:block;height:100%;background:var(--ink);border-radius:6px}
.rrow b{text-align:right;font-variant-numeric:tabular-nums}
.twocol{display:grid;gap:12px}
@media (min-width:700px){.twocol{grid-template-columns:1fr 1fr;gap:40px}}
.pair{display:grid;grid-template-columns:1fr auto 1fr 50px;gap:8px;align-items:center;font-size:15px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line)}
.pair .amp{color:var(--ink3);font-size:13px}
.pair b{text-align:right}
.twin{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:22px;background:var(--blueSoft);margin:8px 0 16px}
.tw-k{font-size:13px;font-weight:600;color:var(--blueText)}
.tw-n{font-size:36px;font-weight:700;letter-spacing:-.03em}
.tw-p{font-size:14px;color:var(--ink2)}
.share.dark{background:var(--ink);color:#fff;border-color:var(--ink);text-decoration:none}
.share.dark:hover{background:#333}
.sharebar{gap:10px;flex-wrap:wrap}
.unclear{font-size:12.5px;color:var(--ink3);margin:8px 2px 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.doc{max-width:640px}
@media (max-width:520px){
  .sitein{flex-direction:column;align-items:stretch;gap:0;padding:6px 12px 4px}
  .site .brand{padding:6px 8px 2px}
  .nav{justify-content:space-between}
  .nav a{padding:0 8px;min-height:38px;font-size:14px}
}
.small{font-size:12.5px;color:var(--ink3);margin:-10px 0 14px}

/* brand line and Why page */
.bwrap{display:flex;flex-direction:column;line-height:1.15;padding:6px 0}
.bline{font-size:11.5px;color:var(--ink3);text-decoration:none;white-space:nowrap}
.bline:hover{color:var(--blueText);text-decoration:underline}
@media (max-width:520px){.bwrap{flex-direction:row;align-items:baseline;gap:10px;padding:6px 8px 2px}.site .brand{padding:0}}
.why{max-width:720px}
.kick{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-top:12px}
.lede.big{font-size:19px}
.why .tn{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:20px 0 8px}
.why .tn div{padding:18px 20px;border-bottom:1px solid var(--line)}
.why .tn div:nth-child(odd){border-right:1px solid var(--line)}
.why .tn div:nth-last-child(-n+2){border-bottom:0}
.why .tn small{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.why .tn p{font-size:17px;margin-top:4px}
.how3{display:grid;gap:10px}
@media (min-width:700px){.how3{grid-template-columns:repeat(3,1fr)}}
.how3 div{border:1px solid var(--line);border-radius:18px;padding:16px}
.how3 b{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-size:14px;margin-bottom:8px}
.how3 p{font-size:15.5px}
.rules{list-style:none;display:grid;gap:10px;padding:0}
.rules li{font-size:16px;color:var(--ink2);padding:12px 0;border-bottom:1px solid var(--line)}
.rules b{color:var(--ink)}
.star{margin:28px 0;padding:24px;border-radius:22px;background:var(--soft)}
.star small{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.star p{font-size:28px;font-weight:700;letter-spacing:-.03em;margin:6px 0 4px}
.star span{color:var(--ink2)}