/* Ask the Room. Same look as Sift: calm, lots of white space, Inter text, Caveat handwriting for prompts,
   ink black with a blue accent, thin rules instead of boxes, light and dark. */
:root{--bg:#FFFFFF;--ink:#121212;--ink2:#4a4a47;--ink3:#6b6a66;--rule:#E4E2DE;--card:#F1F0ED;--card2:#F6F5F3;--accent:#3456E0;--on-accent:#fff;--warn:#B4532A;--ok:#2E7D4F;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;--hand:Caveat,"Bradley Hand","Segoe Print",cursive;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#121211;--ink:#ECEBE8;--ink2:#B5B3AE;--ink3:#8d8b86;--rule:#2c2b29;--card:#22211F;--card2:#1A1A18;--accent:#7C93FF;--on-accent:#101114;--warn:#E08A5E;--ok:#6FD69B;color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:inherit}
input,textarea{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#app{height:100%;display:flex;flex-direction:column;max-width:600px;margin:0 auto;overflow:hidden;position:relative}
@media (min-width:900px){#app{max-width:680px}}

/* type */
.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.lbl.dim,.dim{color:var(--ink3)}
.rule{height:1px;background:var(--rule);margin:0;border:0}
.arrow{display:inline-block;font-size:.9em;margin-left:8px;transform:translateY(-1px)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px;flex:none}
.dot.grey{background:var(--ink3)}.dot.warn{background:var(--warn)}.dot.ok{background:var(--ok)}.dot.ring{background:transparent;border:1.5px solid var(--ink3)}
h1.big{font-size:34px;line-height:1.08;letter-spacing:-.03em;font-weight:500;margin:0}
h2{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:500;margin:0}
p{margin:0}
.hand{font-family:var(--hand);font-size:24px;line-height:1.15;color:var(--ink2);font-weight:500}
.why{color:var(--ink2);font-size:16px;line-height:1.5}
.err{color:var(--warn);font-size:14px;margin-top:10px;min-height:1px}
.mute{color:var(--ink3);font-size:14px}

/* layout */
.top{flex:none;padding:calc(env(safe-area-inset-top) + 16px) 24px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);background:var(--bg)}
.top .lbl{display:inline-flex;align-items:center}
.top .acts{display:flex;gap:6px;align-items:center}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-8px -6px;color:var(--ink);border-radius:50%}
.iconbtn svg,.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 24px 32px}
.view{display:flex;flex-direction:column;flex:1;min-height:0}
.tabs{flex:none;display:flex;border-top:1px solid var(--rule);background:var(--bg);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 9px;color:var(--ink3);position:relative;min-height:56px}
.tabs button .lbl{font-size:10px;color:inherit}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:"";position:absolute;top:-1px;left:30%;right:30%;height:2px;background:var(--accent)}
.banner{flex:none;background:var(--card);color:var(--ink2);font-size:13px;padding:8px 24px;display:flex;gap:10px;align-items:center}
.banner.warn{background:var(--accent);color:var(--on-accent)}
.banner button{text-decoration:underline;text-underline-offset:3px;margin-left:auto;font-weight:600;white-space:nowrap}

/* rows instead of boxes */
.vrow{display:flex;align-items:center;gap:14px;width:100%;padding:16px 0;border-bottom:1px solid var(--rule);text-align:left;min-height:64px}
.vrow .vn{flex:1;min-width:0}.vrow .vn b{display:block;font-weight:500;font-size:17px;letter-spacing:-.01em}.vrow .vn small{display:block;color:var(--ink3);font-size:13.5px;margin-top:2px;overflow-wrap:anywhere}
.vrow .go-arrow{color:var(--ink3);font-size:15px}
.section{margin-top:30px}
.section>.lbl{display:block;margin-bottom:6px}

/* buttons */
.go{display:inline-flex;align-items:center;gap:14px;background:var(--ink);padding:15px 20px;color:var(--bg);min-height:48px}
.go .lbl,.go .arrow{color:var(--bg)}
.go.blue{background:var(--accent)}.go.blue .lbl,.go.blue .arrow{color:var(--on-accent)}
.go:disabled{opacity:.4}
.act{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--ink);min-height:44px}
.act.warn{border-color:var(--warn);color:var(--warn)}.act.warn .lbl{color:var(--warn)}
.link{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:10px 0;min-height:44px}
.link.dim{color:var(--ink3)}
.actrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}

/* inputs: a line, not a box */
.field{width:100%;border:0;border-bottom:1px solid var(--ink3);background:transparent;padding:12px 0;font-size:18px;outline:none;border-radius:0}
.field:focus{border-bottom-color:var(--accent);border-bottom-width:2px;padding-bottom:11px}
.field::placeholder{color:var(--ink3)}
textarea.field{resize:none;line-height:1.4}
.hand-ph::placeholder{font-family:var(--hand);font-size:24px;color:var(--ink3)}
label.lbl{display:block;margin:22px 0 2px}
.codebox{font-size:34px;letter-spacing:.35em;text-align:center;font-weight:500}

/* artwork */
.art{width:100%;max-width:300px;margin:2vh auto 2vh;color:var(--ink)}
.art svg{width:100%;height:auto;display:block}
.st{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fi{fill:var(--ink)}.fa{fill:var(--accent)}.fb{fill:var(--bg)}.fc{fill:var(--card)}
.on .rise,.rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* avatars */
.av{width:44px;height:44px;border-radius:50%;flex:none;background:var(--card);display:grid;place-items:center;font-size:15px;font-weight:500;color:var(--ink);overflow:hidden;position:relative}
.av img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06)}
.av.madeup{border:1.5px dashed var(--ink3);background:transparent}
.av.lg{width:84px;height:84px;font-size:26px}
.av.sm{width:30px;height:30px;font-size:11px}
.tag{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:2px 7px;border:1px solid var(--ink3);color:var(--ink2);margin-left:8px;vertical-align:2px;white-space:nowrap}
.tag.made{border-style:dashed}

/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 24px;flex:none;scrollbar-width:none;border-bottom:1px solid var(--rule)}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--rule);padding:7px 14px;font-size:13px;min-height:36px;color:var(--ink2)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* chat */
.msgs{flex:1;overflow-y:auto;padding:20px 24px;-webkit-overflow-scrolling:touch}
.msg{margin:22px 0}
.msg.user{margin-left:14%;padding:12px 16px;background:var(--card);white-space:pre-wrap;overflow-wrap:anywhere}
.msg .att{font-size:12px;color:var(--ink3);margin-top:6px}
.msg .status{font-size:12px;color:var(--ink3);margin-top:6px}
.ans .who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ans .who b{font-weight:500}
.ans .txt{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.ans .from{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule)}
.ans .from a{display:block;font-size:14px;padding:5px 0;text-decoration:none;color:var(--accent);overflow-wrap:anywhere}
.ans .from small{display:block;color:var(--ink3);font-size:12px;text-decoration:none}
.typing::after{content:"…";animation:blink 1s infinite}@keyframes blink{50%{opacity:.25}}
.summary{background:var(--card);padding:16px}
.summary .sr{padding:8px 0;border-top:1px solid var(--rule)}.summary .sr:first-of-type{border-top:0}
.summary .sr p{margin-top:2px}
.notice{color:var(--ink2);font-size:14px;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.empty{text-align:center;padding:2vh 4px}
.empty .hand{font-size:30px;margin-top:6px}
.composer{flex:none;border-top:1px solid var(--rule);padding:8px 16px calc(env(safe-area-inset-bottom) + 8px);background:var(--bg);position:relative}
.composer .row{display:flex;align-items:flex-end;gap:6px}
.composer textarea{flex:1;border:0;background:transparent;padding:12px 6px;font-size:17px;max-height:120px;min-height:46px;outline:none;resize:none}
.composer .send{background:var(--ink);color:var(--bg);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;flex:none}
.composer .send:disabled{opacity:.35}
.files{display:flex;flex-wrap:wrap;gap:8px;padding:0 6px}
.files .pill{font-size:13px;border:1px solid var(--rule);padding:0 4px 0 12px;display:inline-flex;gap:4px;align-items:center;min-height:36px}
.files .pill button{color:var(--ink2);font-size:11px;text-transform:uppercase;letter-spacing:.1em;min-height:36px;min-width:44px;text-align:center}
.mentions{position:absolute;bottom:100%;left:16px;right:16px;background:var(--bg);border:1px solid var(--rule);box-shadow:0 8px 30px #0003}
.mentions button{display:flex;gap:12px;align-items:center;width:100%;padding:12px 14px;border-bottom:1px solid var(--rule);min-height:48px}
.disc{font-size:11px;color:var(--ink3);text-align:center;padding:6px 20px 0}

/* progress */
.progress{height:3px;background:var(--rule);margin:18px 0 10px}
.progress i{display:block;height:100%;background:var(--accent);transition:width .6s ease}
.steps{display:flex;gap:5px;margin:16px 0 0}.steps i{flex:1;height:3px;border-radius:2px;background:var(--rule);transition:background .25s}.steps i.on{background:var(--accent)}
.cand{padding:18px 0;border-bottom:1px solid var(--rule)}
.cand .head{display:flex;gap:16px;align-items:center}
.links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.links a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-decoration:underline;text-underline-offset:4px;padding:8px 0}
.prof h3{margin:0}
.prof .item{padding:12px 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.prof .item b{font-weight:500}
.prof sup{font-size:10px;margin-left:3px}.prof sup a{color:var(--accent);text-decoration:none;padding:4px 2px}
.src{display:block;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.src b{font-weight:500;display:block;color:var(--accent);overflow-wrap:anywhere}.src small{color:var(--ink3);font-size:12.5px}
.pillrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pillrow span{font-size:11.5px;border:1px solid var(--rule);padding:3px 9px;color:var(--ink2)}
.use{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.use input.cap{width:88px;border:0;border-bottom:1px solid var(--ink3);background:transparent;padding:6px 0;text-align:right;font-size:16px}

/* full-screen steps (intro, add an advisor) */
.sheet{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) 22px calc(env(safe-area-inset-bottom) + 18px);max-width:600px;margin:0 auto}
@media (min-width:900px){.sheet{max-width:680px}}
.sheet .sthead{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.sheet .body{flex:1;overflow-y:auto;display:flex;flex-direction:column;max-width:520px;width:100%;margin:0 auto;padding-bottom:12px}
.sheet .nav{display:flex;align-items:center;gap:18px;max-width:520px;width:100%;margin:14px auto 0}
.sheet .nav .go{margin-left:auto}
.auth{flex:1;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 9vh) 28px 28px;max-width:440px;width:100%;margin:0 auto}
.auth .brand{display:flex;align-items:center;margin-bottom:34px}
.auth .hand{margin:10px 0 18px;font-size:28px}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 18px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}

/* boards and skill lists */
.stack{display:inline-flex;flex:none;padding-left:8px}
.stack .av{margin-left:-8px;border:2px solid var(--bg);box-sizing:content-box}
.av.more{font-size:10px;color:var(--ink2)}
.bcard{border-bottom:1px solid var(--rule);padding:4px 0 16px}
.bcard .bhead{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0 6px;min-height:56px}
.bcard .bhead .vn{flex:1;min-width:0}.bcard .bhead b{display:block;font-weight:500;font-size:20px;letter-spacing:-.015em}.bcard .bhead small{display:block;color:var(--ink3);font-size:13.5px;margin-top:2px}
.bcard .brow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.rank{width:18px;flex:none;color:var(--ink3);font-size:13px;text-align:right}
.vrow .vn small.okc{color:var(--ok)}
.bpick{margin-top:6px}
.bpick label{display:flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--rule);font-size:16px;cursor:pointer}
.bpick input[type=checkbox],.bpick input[type=radio]{width:20px;height:20px;accent-color:var(--accent);flex:none;margin:0}

/* Ask: one clean box, the right faces appear as you type */
.top .logo{font-size:12px}
.ctxbar{flex:none;padding:8px 24px 0}
.ctxpill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);border:1px solid var(--rule);padding:6px 12px 6px 10px;min-height:36px;max-width:100%}
.ctxpill .ic{width:16px;height:16px}.ctxpill span:not(.dim){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero{padding:9vh 4px 2vh}
.hero h1{font-size:38px}
.caret{display:inline-block;width:2px;height:.9em;background:var(--accent);margin-left:6px;vertical-align:-2px;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.faces{display:flex;gap:12px;overflow-x:auto;padding:10px 6px 4px;scrollbar-width:none}
.faces::-webkit-scrollbar{display:none}
.face{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;flex:none;text-align:center;min-height:44px;transition:opacity .2s}
.face .av{width:52px;height:52px;outline:2px solid var(--accent);outline-offset:2px}
.face b{font-weight:500;font-size:13px;line-height:1.1;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.face small{font-size:11px;color:var(--ink3);line-height:1.15;max-width:74px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.face.off{opacity:.35}.face.off .av{outline-color:transparent}
.face.addf .av{outline:1px dashed var(--ink3);background:transparent}
.whohint{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 6px;font-size:13px;color:var(--ink3)}
.whohint .link{min-height:36px;padding:6px 0}
.composer .mic.on{color:var(--accent);animation:blink 1.2s infinite}
.leadmsg{border-left:2px solid var(--accent);padding:4px 0 4px 16px}
.leadmsg .who{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:0;font-size:16px;color:var(--ink)}.leadmsg .who b{font-weight:500}
.leadmsg .txt{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.leadmsg .txt .lbl{display:block;margin:12px 0 2px;color:var(--accent)}

/* Spaces */
.searchbar{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ink3);margin-top:20px;padding:4px 0}
.searchbar .ic{color:var(--ink3);width:18px;height:18px}
.searchbar input{flex:1;border:0;background:transparent;font-size:17px;padding:10px 0;outline:none;min-width:0}
.vrow.chatrow{min-height:56px;padding:12px 0}
.vrow.sub{padding-left:22px;min-height:52px}
.titlefield{font-size:28px;font-weight:500;letter-spacing:-.02em}
.selwrap{display:inline-flex;align-items:center;gap:10px}
.selwrap select{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink3);padding:8px 2px;min-height:40px;max-width:200px}
.member{border-bottom:1px solid var(--rule);padding-bottom:10px}
.seatrow{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-left:58px}
.headtick{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);min-height:40px}
.headtick input{width:18px;height:18px;accent-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--rule);margin:8px 8px 0 0}
.seg label{display:inline-flex}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{padding:8px 14px;font-size:14px;min-height:40px;display:inline-flex;align-items:center;cursor:pointer;color:var(--ink2)}
.seg input:checked+span{background:var(--ink);color:var(--bg)}
.seg input:focus-visible+span{outline:2px solid var(--accent)}

/* advisor page */
.av.xl{width:132px;height:132px;font-size:40px}
.phero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6px}
.phero h2{margin-top:16px;font-size:30px;overflow-wrap:anywhere}
.phero .role{color:var(--accent);margin-top:4px}
.stats{display:flex;justify-content:space-around;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:28px;padding:14px 0}
.stats div{text-align:center}.stats b{display:block;font-size:20px;font-weight:500;letter-spacing:-.01em}.stats small{color:var(--ink3);font-size:12px}
.prof .item.num{display:flex;gap:14px}.prof .item.num .n{color:var(--accent);font-weight:500;min-width:16px}
.fw{display:grid;gap:10px;margin-top:8px}
@media (min-width:560px){.fw{grid-template-columns:1fr 1fr}}
.fwcard{background:var(--card2);padding:14px 16px}.fwcard b{font-weight:600}.fwcard p{color:var(--ink2);margin-top:4px;font-size:15px}
.voice{margin:10px 0 0;padding:4px 0 4px 16px;border-left:2px solid var(--ink);font-family:var(--hand);font-size:22px;line-height:1.25;color:var(--ink2)}
.yr{font-size:12px;letter-spacing:.14em;color:var(--ink3);padding:16px 0 4px;font-weight:600}
.src .kind{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.pillrow span{font-size:13px}
.tag.wrap{white-space:normal;text-align:center;line-height:1.5;max-width:100%}
.mentorline{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--ink2)}.mentorline b{font-weight:500;color:var(--ink)}
.hero .tip{margin-top:12px;min-height:2.5em;font-size:26px}
.hero .tip .caret{height:.85em;margin-left:3px;vertical-align:-1px}
.quick{display:flex;gap:8px;overflow-x:auto;padding:8px 6px 2px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.qb{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--rule);padding:4px 12px 4px 6px;font-size:13px;min-height:36px;color:var(--ink2);border-radius:18px}
.qb:not(:has(.av)){padding-left:12px}
.qb.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.av.xs{width:24px;height:24px;font-size:9px}

/* Ask, set up like Sift: a big question with its own cursor, a round mic, a follow-up bar once a chat starts */
.askhome{display:flex;flex-direction:column}
.askhome .modes{display:flex;align-items:center;gap:18px;margin-top:12vh}
.ctxl{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mic{color:var(--ink);margin-left:auto;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.mic .ic{width:18px;height:18px}
.mic.small{width:36px;height:36px;margin-left:0}.mic.small .ic{width:16px;height:16px}
.mic.rec{background:var(--accent);border-color:var(--accent);color:var(--on-accent);animation:blink 1.2s ease-in-out infinite}
.askbox{position:relative;margin-top:22px}
.askbox #q{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 34px/1.15 var(--sans);letter-spacing:-.02em;caret-color:transparent;padding:0;resize:none;overflow:hidden;min-height:40px;display:block}
#measure{position:absolute;left:0;top:0;visibility:hidden;white-space:pre-wrap;font:400 34px/1.15 var(--sans);letter-spacing:-.02em;word-break:break-word;overflow-wrap:break-word;pointer-events:none}
.bigcaret{position:absolute;width:3px;height:36px;background:var(--ink);animation:caret 1.05s steps(1) infinite;pointer-events:none}
.askbox .tip{margin-top:18px;min-height:1.3em;font-size:24px}
.askbox.typing .tip{display:none}
.hintrow{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:18px}
.hintrow #send{margin-left:auto;display:none}
.askbox.typing .hintrow #send{display:inline-block}
.askbox .faces{padding-left:0;margin-top:14px}
.followbar{flex:none;border-top:1px solid var(--rule);padding:6px 16px calc(env(safe-area-inset-bottom) + 6px);background:var(--bg);position:relative}
.followbar .row{display:flex;align-items:flex-end;gap:10px}
.followbar textarea{flex:1;border:0;background:transparent;padding:12px 4px;font-size:17px;max-height:140px;min-height:46px;outline:none;resize:none}
.followbar #send{padding:12px 0;min-height:44px}
.hintrow .lbl{min-height:44px;display:inline-flex;align-items:center}
.chatline{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule)}
.chatline .vrow{border-bottom:0;flex:1;min-width:0}
.chatline .link{flex:none}

/* Ask, centred like Sift */
.askhome{justify-content:center}
.askcentre{margin:auto 0;padding:6vh 0}
.askhome .modes{margin-top:0;gap:14px}
.ctxrow{flex:none;display:flex;gap:16px;padding:4px 24px 0}
.asking{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--ink2)}
.asking .stack .av{width:32px;height:32px}
.asking .who2{flex:1;min-width:160px}
.followbar .asking{margin:6px 0 2px}
/* answers: each person in their own section, lots of space */
.msgs .msg{margin:0}
.msg.user{margin:26px 0 8px;background:none;padding:0;white-space:normal}
.msg.user .uq{font-size:24px;line-height:1.25;letter-spacing:-.015em;margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.resp{border-top:1px solid var(--rule);padding:26px 0 30px}
.resp header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.resp header b{display:block;font-weight:500;font-size:17px}.resp header small{display:block;color:var(--ink3);font-size:13px;margin-top:1px}
.rich{line-height:1.6;font-size:16.5px;overflow-wrap:anywhere}
.rich p{margin:0 0 12px}
.rich ul,.rich ol{margin:4px 0 16px;padding-left:20px}.rich li{margin:6px 0}
.rich b{font-weight:600}
.rich .parthead{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:20px 0 6px;color:var(--ink)}
.leadmsg{border-left:0;padding:26px 18px 24px;background:var(--card2);margin-top:6px}
.leadmsg header{margin-top:10px}
.leadmsg .rich .parthead{color:var(--accent)}
.summary{margin-top:6px}
.pickrow{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--rule);cursor:pointer}
.pickrow .vn{flex:1;min-width:0}.pickrow .vn b{display:block;font-weight:500}.pickrow .vn small{display:block;color:var(--ink3);font-size:13px}
.pickrow input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.rich .lede{font-size:19px;line-height:1.4;margin-bottom:16px}.rich .lede b{font-weight:500}
.ctxrow .ctxl{min-width:0;flex:0 1 auto;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ctxrow .ctxl .arrow{margin-left:4px}
.followbar .row{min-width:0}.followbar #send{flex:none;white-space:nowrap;padding-right:2px}
.followbar #send .arrow{margin-left:4px}

/* Sift-style top bar: your space, written by hand */
.spacebar{align-items:flex-end;padding-bottom:10px}
.spacename{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;min-height:44px}
.spacename .sname{font-family:var(--hand);font-size:34px;line-height:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.spacename .sname small{font-size:24px;color:var(--ink2)}
.spacename .arrow{font-family:var(--sans);font-size:12px}
.chatbar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 24px;border-bottom:1px solid var(--rule);min-height:44px}
.chatbar .ct{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.chatbar .ct.dim{color:var(--ink3)}
.iconbtn.sm{width:44px;height:44px}.iconbtn.sm .ic{width:16px;height:16px}
.rnf{display:flex;gap:12px;flex:1;align-items:center}.rnf input{flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--ink);background:transparent;font-size:16px;padding:8px 0;outline:none;color:var(--ink)}
.rnf .lbl{min-height:44px}
/* tools under the box: attach, mic in the centre, link */
.tools{display:flex;justify-content:center;align-items:flex-start;gap:40px;margin-top:34px}
.tool{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:56px;min-height:44px;color:var(--ink)}
.tool>.ic{width:22px;height:22px;margin-top:21px}
.tool.big .mic{width:64px;height:64px;margin:0}.tool.big .mic .ic{width:24px;height:24px}
.linkin{display:flex;gap:12px;align-items:center;margin:16px auto 0;max-width:420px}
.linkin input{flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--ink);background:transparent;font-size:16px;padding:10px 0;outline:none;color:var(--ink)}
.linkin .lbl{min-height:44px;display:inline-flex;align-items:center}
.followbar .linkin{margin:6px 0}
.followbar .row .iconbtn{flex:none}
/* tabs like Sift: little rings, filled when you're there */
.tabs{display:grid;grid-template-columns:repeat(var(--n,5),1fr);padding:12px 24px calc(env(safe-area-inset-bottom) + 10px)}
.tabs button{flex-direction:column;align-items:center;gap:7px;padding:0;min-height:44px;color:var(--ink)}
.tabs button:first-child{align-items:flex-start}.tabs button:last-child{align-items:flex-end}
.tabs button i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);display:block}
.tabs button.on i{background:var(--ink)}
.tabs button.on::after{display:none}
.tabs button .lbl{font-size:10px;letter-spacing:.12em}
/* the person asking is written by hand; answers are in the clean type */
.msg.user .uq{font-family:var(--hand);font-size:30px;line-height:1.1;letter-spacing:0;color:var(--ink)}
/* the three framework buttons, just above the tabs */
.fwbar{flex:none;display:flex;align-items:center;gap:12px;padding:10px 24px;border-top:1px solid var(--rule);background:var(--bg);overflow-x:auto;scrollbar-width:none}
.fwbar::-webkit-scrollbar{display:none}
.followbar .fwbar{border-top:0;padding:4px 0 8px;margin:0}
.fwbar>.lbl{flex:none}
.fwchips{display:flex;gap:8px;flex:none}
.fwc{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 5px;border:1.5px solid var(--rule);border-radius:999px;font-size:14px;white-space:nowrap;color:var(--ink)}
.fwc .av{width:30px;height:30px;font-size:11px}
.fwc.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fl{display:block;margin-top:12px;font-size:13px;color:var(--ink3)}
.fl select,.fl input,.fl textarea{display:block;width:100%;margin-top:6px;font:16px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--rule);padding:8px 0;outline:none;border-radius:0;min-height:44px}
.fl textarea{resize:vertical}
.fl select:focus,.fl input:focus,.fl textarea:focus{border-color:var(--ink)}
.hgroup{margin-top:26px}
.hhead{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.hhead .hand{font-size:28px;line-height:1;color:var(--ink)}
.hrow{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule)}
.hrow>button[data-o]{flex:1;min-width:0;padding:14px 0;min-height:56px}
.hrow b{display:block;font-weight:500;font-size:16px;overflow-wrap:anywhere}
.hrow small{display:block;color:var(--ink3);font-size:13px;margin-top:2px}
.hrow.cur b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:2px}
.hrow .link{min-height:44px}
.linkin[hidden]{display:none}

/* space name with a clear drop-down */
.srow{display:flex;align-items:center;gap:10px;min-width:0}
.srow .sname{min-width:0}
.chev{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;margin-bottom:2px}
.chev .ic{width:18px;height:18px}
/* chat title */
.chatbar{padding:4px 24px}
.ctb{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;color:var(--ink3)}
.ctb .ct{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;color:var(--ink)}
.ctb .ct.dim{color:var(--ink3);font-style:italic}
.ctb .ic{width:15px;height:15px;flex:none}
/* the box, the tip and the cursor, all in the centre */
.askhome .askbox #q,#measure{text-align:center}
.askhome .askbox .tip{text-align:center;margin-top:22px}
.bigcaret{width:2px;background:var(--accent)}
.askhome .hintrow{justify-content:center;gap:18px}
.askhome .hintrow #send{margin-left:0}
.askhome #fc .asking{justify-content:center;text-align:center}
.askhome #fc .asking .who2{flex:0 1 auto;min-width:0}
.askhome .ctxl#who{border-bottom:1px solid var(--rule);padding:0 2px}
/* frameworks: label and a question mark above, buttons scroll sideways */
.fwbar{flex-direction:column;align-items:stretch;gap:6px;overflow:visible;padding:10px 0 10px 24px}
.fwtop{display:flex;align-items:center;gap:8px}
.qm{width:44px;height:44px;margin:-12px 0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink2);position:relative}
.qm::before{content:"";position:absolute;width:20px;height:20px;border:1.5px solid var(--ink3);border-radius:50%;left:12px;top:12px}
.fwchips{overflow-x:auto;scrollbar-width:none;padding-right:24px;-webkit-overflow-scrolling:touch}
.fwchips::-webkit-scrollbar{display:none}
.followbar .fwbar{padding:4px 0 6px}
.followbar .fwchips{padding-right:0}
.av.doc{display:inline-flex;align-items:center;justify-content:center;background:var(--card2);color:var(--ink2)}
.av.doc .ic{width:16px;height:16px}
/* room tabs */
.roomtabs{display:grid;grid-template-columns:repeat(3,1fr);border:0;border-bottom:1px solid var(--rule);margin:18px 0 0;width:100%}
.roomtabs button{min-height:44px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px;text-align:center}
.roomtabs button:first-child{text-align:left}.roomtabs button:last-child{text-align:right}
.roomtabs button.on{color:var(--ink);border-color:var(--ink)}
/* a framework's page */
.fwhero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:6px}
.fwhero h2{margin:4px 0 0}
.fwhero .hand{margin:0;font-size:24px}
.lede2{font-size:18px;line-height:1.45;margin:18px 0 0}
.docrow{display:flex;gap:16px;align-items:center;min-height:44px;color:var(--ink);font-size:15px}
.docrow #dn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk{display:flex;align-items:center;gap:12px;min-height:48px;font-size:16px;border-bottom:1px solid var(--rule)}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
.vrow[disabled]{opacity:.5}
.sheet .item{padding:14px 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere;line-height:1.5}
.sheet .item b{font-weight:500}
.sheet .item.num{display:flex;gap:16px}.sheet .item.num .n{color:var(--accent);font-weight:500;min-width:18px;font-size:15px}
.sheet .section p{line-height:1.55}

/* frameworks on Ask: centred, quiet, Sift style (rings, filled when on) */
.fwbar{align-items:center;gap:12px;padding:18px 0 16px;border-top:1px solid var(--rule)}
.fwtop{justify-content:center;gap:2px}
.fwtop .lbl{color:var(--ink3)}
.qm{width:44px;height:44px;margin:-12px -10px -12px -4px;font-size:11px;color:var(--ink3)}
.qm::before{width:16px;height:16px;left:14px;top:14px;border-width:1px}
.fwchips{display:flex;justify-content:safe center;gap:28px;width:100%;padding:0 24px;box-sizing:border-box}
.fwc{border:0;border-radius:0;padding:0;min-height:44px;gap:9px;font-size:15px;color:var(--ink3);background:none;letter-spacing:-.005em}
.fwc i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;display:block;flex:none}
.fwc.on{background:none;color:var(--ink)}
.fwc.on i{background:var(--accent);border-color:var(--accent)}
.fwc:hover{color:var(--ink)}
.followbar .fwbar{padding:10px 0 12px;border-top:0}
.followbar .fwchips{padding:0}
/* room tabs: four now */
.roomtabs{grid-template-columns:repeat(4,auto);justify-content:space-between}
.roomtabs button{letter-spacing:.1em;padding:0 2px}
/* mentor tab */
.mhero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:26px}
.mhero h2{margin:2px 0 0}.mhero .hand{margin:0;font-size:24px}.mhero .link{min-height:44px}
.mnotes{width:100%;box-sizing:border-box;border:1px solid var(--rule);background:transparent;color:var(--ink);font:16px/1.5 var(--sans);padding:14px;resize:vertical;outline:none;border-radius:0}
.mnotes:focus{border-color:var(--ink)}
.mtips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mtip{min-height:44px;padding:8px 14px;border:1px solid var(--rule);font-size:14px;color:var(--ink2);text-align:left;line-height:1.3}
.mtip.on{border-color:var(--ink);color:var(--ink)}
.mprompt{display:grid;grid-template-columns:1fr auto;column-gap:12px;width:100%;padding:16px 0;border-bottom:1px solid var(--rule);text-align:left;min-height:56px}
.mprompt b{font-weight:500;font-size:16px;grid-column:1}
.mprompt span:not(.go-arrow){grid-column:1;color:var(--ink3);font-size:14px;margin-top:3px;line-height:1.4}
.mprompt .go-arrow{grid-column:2;grid-row:1 / span 2;align-self:center}
/* top of Ask: space name and chat title centred, a plain arrow */
.spacebar{display:grid;grid-template-columns:96px 1fr 96px;align-items:center;gap:0}
.spacebar .tl{display:block}
.spacebar .acts{justify-self:end}
.spacename{align-items:center;justify-self:center;max-width:100%;text-align:center}
.srow{justify-content:center;gap:6px}
.chev{border:0;width:28px;height:28px;margin:0}
.chev .ic{width:20px;height:20px}
.chatbar{justify-content:center}
.ctb{justify-content:center;width:auto;max-width:100%}
@media (max-width:420px){.spacebar{grid-template-columns:88px 1fr 88px}.spacename .sname{font-size:30px}}
.spacename{min-width:0;overflow:hidden}
.srow{max-width:100%;overflow:hidden}
.srow .sname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.spacebar .acts{min-width:0}
.spacename{flex-direction:column;gap:0}
.sproj{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the ? next to Frameworks: a true circle with the mark centred */
.qm{width:44px;height:44px;margin:-14px -12px -14px -6px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.qm::before{content:none;display:none}
.qm span{width:17px;height:17px;border-radius:50%;border:1px solid var(--ink3);display:flex;align-items:center;justify-content:center;font:500 10px/1 var(--sans);color:var(--ink3);box-sizing:border-box;padding-top:1px}
.qm:hover span{border-color:var(--ink);color:var(--ink)}
.fwq{display:block;margin-top:6px;color:var(--accent);font-size:14px}
.fwq::before{content:"Q  ";font-weight:600;letter-spacing:.1em;font-size:11px}
.fwout{margin:8px 0 0;padding-left:18px}.fwout li{margin:8px 0;line-height:1.45}
/* OpenScore leads */
.leadstats{display:grid;grid-template-columns:repeat(5,1fr);margin:10px 0 4px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.leadstats div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0}
.leadstats b{font-size:26px;font-weight:500;letter-spacing:-.03em}
.leadstats .lbl{font-size:10px}
.leadseg{display:flex;gap:18px;border:0;margin:10px 0 2px}
.leadseg button{min-height:44px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink3);border-bottom:2px solid transparent}
.leadseg button.on{color:var(--ink);border-color:var(--ink)}
.tier{flex:none;min-width:62px;text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 8px;border:1px solid var(--rule);color:var(--ink3)}
.tier.t-target{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tier.t-gold{background:#86621A;color:#fff;border-color:#86621A}
.tier.t-hot{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tier.t-warm{color:var(--ink);border-color:var(--ink)}
.tier.big{display:inline-block;font-size:11px;padding:8px 12px;margin-bottom:12px}
.leadhero{text-align:center;margin-top:8px}.leadhero h2{margin:0}.leadhero .mute{margin-top:6px}
.use>a{min-height:44px;display:inline-flex;align-items:center}
.filein{flex:none;min-height:44px;font-size:13px;color:var(--ink3);padding:0 2px;white-space:nowrap}
.chatbar{gap:14px}
.ctb{flex:0 1 auto;min-width:0}
/* Frameworks on Ask: one big title with a tap hand; what's on shows underneath */
.fwbar{padding:16px 24px 14px;gap:4px;align-items:center;text-align:center}
.fwtitle{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:28px;font-weight:500;letter-spacing:-.025em;color:var(--ink)}
.fwtitle .ic{width:24px;height:24px;stroke-width:1.6}
.fwhint{font-family:var(--hand);font-size:20px;color:var(--ink3);margin:0}
.fwon{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.fwpill{display:inline-flex;align-items:center;gap:2px;padding-left:12px;border:1px solid var(--accent);color:var(--accent);font-size:14px;font-weight:500}
.fwpill button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
.fwpill .ic{width:14px;height:14px}
.followbar .fwbar{padding:6px 0 8px}
.followbar .fwtitle{font-size:20px;min-height:40px}.followbar .fwtitle .ic{width:18px;height:18px}
.followbar .fwhint{display:none}
/* the picker */
.fwtabs{grid-template-columns:repeat(2,1fr)!important;margin-top:14px}
.fwtabs button:last-child{text-align:right}
.fwtabs + .why{margin-top:14px}
.fwjob{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule)}
.fwjb{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:14px 0;min-height:64px}
.fwjb .vn{flex:1;min-width:0}.fwjb b{display:block;font-weight:500;font-size:17px}.fwjb small{display:block;color:var(--ink3);font-size:13px;margin-top:2px}
.fwjob .tick{flex:none;width:30px;height:30px;border:1.5px solid var(--rule);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink3)}
.fwjob.on .tick{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fwjob.on b{color:var(--accent)}
.fwjob .link{flex:none;font-size:13px;min-height:44px}
.fwempty{text-align:center;margin-top:22px}.fwempty .vrow{text-align:left}
.fwbar,.fwtop{border-top:1px solid var(--rule)}
.fwtop{border:0}
/* the person is written by hand, as they type */
.askbox #q,#measure{font-family:var(--hand);font-size:40px;line-height:1.1;letter-spacing:0}
.followbar textarea{font-family:var(--hand);font-size:24px;line-height:1.15}
.followbar textarea::placeholder{font-family:var(--hand);font-size:22px}
/* while answers come in */
.thinking{font-family:var(--hand);font-size:24px;color:var(--ink2)}
.thinking::after{content:"…";animation:blink 1s infinite}
.msg.user .status{font-family:var(--hand);font-size:20px;color:var(--ink3);margin-top:8px}
/* under each answer */
.ansfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:18px;padding-top:12px;border-top:1px dashed var(--rule)}
.af{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink3)}
.af .ic{width:14px;height:14px}
.af:hover{color:var(--ink)}
.fbq{margin-left:auto;display:inline-flex;align-items:center;gap:14px;font-size:13px;color:var(--ink3)}
.fbnote{display:flex;gap:10px;align-items:center;flex:1}
.fbnote input{flex:1;min-width:160px;border:0;border-bottom:1px solid var(--ink3);background:transparent;padding:8px 0;font-size:15px;outline:none;color:var(--ink)}
.chatfoot{display:flex;justify-content:center;padding:18px 0 6px}
.fbask{margin:24px 0;padding:22px 20px;background:var(--card2)}
.fbask .hand{font-size:26px;color:var(--ink)}
.fbfaces{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fbfaces button{min-height:44px;padding:8px 16px;border:1px solid var(--rule);font-size:15px}
.fbfaces button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fbask textarea{width:100%;box-sizing:border-box;margin-top:12px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);padding:12px;resize:vertical;outline:none}
.fbrow{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.fbrow .go{margin:0}
.printhead{display:none}
/* Save as PDF: just the answers, cleanly laid out */
@media print{
  @page{margin:18mm 16mm}
  html,body,#app,.view{height:auto!important;overflow:visible!important;display:block!important;background:#fff!important;color:#111!important}
  :root{--ink:#111;--ink2:#333;--ink3:#666;--rule:#ddd;--bg:#fff;--card2:#f5f5f5}
  .top,.chatbar,.followbar,.tabs,.fwbar,#toast,.banner,.ansfoot,.chatfoot,.fbask,.ctxrow,#ov{display:none!important}
  .msgs{overflow:visible!important;height:auto!important;padding:0!important}
  .printhead{display:block;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#666;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:18px}
  body.print-one .msgs>*:not(.printsel):not(.printhead){display:none!important}
  .resp{break-inside:auto;page-break-inside:auto}
  .rich{font-size:12pt}
  a{color:#111}
}
.fwtabs3{grid-template-columns:repeat(3,1fr)!important}
.fwtabs3 button:nth-child(2){text-align:center}
.fwjob .tick{width:22px;height:22px;font-size:12px;border-width:1.5px}
.fwjb{gap:14px}
.fwjob .info{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink3)}
.fwjob .info .ic{width:18px;height:18px}
.fwjob .info:hover{color:var(--ink)}
.howto{display:block;width:100%;max-width:340px;margin:0 auto;aspect-ratio:9/19.5;background:var(--card);border:1px solid var(--rule)}
/* "Frameworks" in the same handwriting as the space name at the top */
.fwtitle{font-family:var(--hand);font-size:34px;font-weight:500;letter-spacing:0;line-height:1}
.followbar .fwtitle{font-size:26px}