/* askthetape.com · app.css [v3 09.09] — shared stylesheet for the catalog and every metric page (also inlined into the single-file demo) */ :root{--bg:#0d0e10;--surf:#15171a;--act:#1b1e23;--grid:#26282c;--ink:#e8e8e6;--mut:#9a9da3;--dim:#616469;--blu:#3b82e0;--amb:#b8801f;--vio:#8a7fd1;--rose:#c9578f;--up:#3a9b78;--down:#e0474c;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color-scheme:dark} html{background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blu);outline-offset:2px} .mono{font-family:var(--mono)} .top{display:flex;align-items:center;gap:20px;padding:12px 24px;border-bottom:1px solid var(--grid);position:sticky;top:0;background:var(--bg);z-index:5} .brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap} .brand b{font-size:22px;font-weight:700;letter-spacing:-0.02em} .brand span{font-family:var(--mono);font-size:12px;color:var(--mut)} .search{flex:1 1 auto;display:flex;justify-content:center} .search input{width:min(380px,100%);padding:9px 14px 9px 36px;border-radius:8px;border:1px solid var(--grid);background:var(--surf);color:var(--ink);font:inherit;font-size:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9da3' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center} .search input::placeholder{color:var(--mut)} .chip{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--surf);border-radius:6px;padding:6px 10px;white-space:nowrap} .chip.mut{color:var(--mut);background:transparent} .msel{display:none;font:inherit;font-size:14px;color:var(--ink);background:var(--surf);border:1px solid var(--grid);border-radius:8px;padding:8px 10px;min-width:0} .wrap{display:flex;align-items:flex-start} .side{width:256px;flex:0 0 256px;padding:16px 12px 30px 12px;border-right:1px solid var(--grid);position:sticky;top:57px;max-height:calc(100vh - 57px);overflow:auto} .shelf{display:flex;align-items:center;gap:8px;padding:12px 12px 6px 12px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:600} .shelf i{width:7px;height:7px;border-radius:50%;display:inline-block} .shelf em{font-style:normal;font-weight:400;color:var(--mut);letter-spacing:0} .mi{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:14px} .mi span{font-family:var(--mono);font-size:11px;color:var(--mut);white-space:nowrap} .mi.live:hover{background:var(--surf)} .mi.on{background:var(--act);box-shadow:inset 0 0 0 1px var(--grid)} .mi.soon{color:var(--dim);cursor:default} .mi.soon span{color:var(--dim)} .main{flex:1 1 auto;min-width:0;padding:24px 32px 40px 32px;display:flex;flex-direction:column;gap:18px} .head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px} h1{font-size:30px;font-weight:700;letter-spacing:-0.012em;margin:0;text-wrap:balance} .sub{font-size:16px;color:var(--mut);line-height:1.4;max-width:70ch;margin-top:8px} .badge{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto} .badge .pill{display:inline-flex;align-items:center;gap:8px;background:var(--surf);border-radius:8px;padding:6px 12px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:0.06em} .badge small{font-family:var(--mono);font-size:12px;color:var(--mut);text-align:right;line-height:1.5} .hero{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap} .big{display:flex;flex-direction:column;gap:4px;padding:12px 18px 12px 0;flex:0 0 auto} .big b{font-size:46px;font-weight:600;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums} .big span{font-size:13px;color:var(--mut)} .tile{background:var(--surf);border-radius:10px;padding:14px 18px;display:flex;flex-direction:column;gap:4px;flex:1 1 150px;min-width:0} .tile b{font-size:24px;font-weight:600;letter-spacing:-0.01em;font-variant-numeric:tabular-nums} .tile span{font-size:12px;color:var(--mut)} .ctl{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .ctl .g{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .pills{display:inline-flex;gap:2px;background:transparent} .pills button{font-family:var(--mono);font-size:13px;color:var(--mut);padding:6px 11px;border-radius:6px} .pills button:hover{color:var(--ink)} .pills button.on{color:var(--ink);background:var(--act);box-shadow:inset 0 0 0 1px var(--grid)} .sep{width:1px;height:20px;background:var(--grid);margin:0 6px} .lbl{font-family:var(--mono);font-size:12px;color:var(--mut);margin-right:4px} .tog{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--ink)} .tog i{width:28px;height:16px;border-radius:8px;background:var(--grid);position:relative;display:inline-block;transition:background .15s} .tog i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ink);transition:left .15s} .tog.on i{background:var(--blu)} .tog.on i::after{left:14px} .btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:6px;font-family:var(--mono);font-size:13px;font-weight:600;background:var(--surf);border:1px solid var(--grid)} .btn:hover{background:var(--act)} .btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)} select.sel{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--surf);border:1px solid var(--grid);border-radius:6px;padding:5px 8px} .tb{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;background:var(--surf);border-radius:8px;flex-wrap:wrap} .tb .g{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .tb .t{font-family:var(--mono);font-size:12px;color:var(--amb);font-weight:600;letter-spacing:0.08em;padding:0 10px 0 4px} .tb button{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:6px;font-family:var(--mono);font-size:12px;color:var(--mut);border:1px solid transparent;white-space:nowrap} .tb button:hover{color:var(--ink)} .tb button.on{color:var(--ink);background:var(--act);border-color:var(--amb)} .tb button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tb .n{font-family:var(--mono);font-size:12px;color:var(--mut)} .plot{position:relative} .plot svg{width:100%;height:auto;display:block;touch-action:none} .plot svg.tool{cursor:crosshair} .note-in{position:absolute;z-index:3;display:flex;gap:6px;align-items:center;background:var(--surf);border:1px solid var(--amb);border-radius:6px;padding:6px 8px} .note-in input{width:320px;max-width:60vw;background:var(--bg);color:var(--ink);border:1px solid var(--grid);border-radius:4px;padding:5px 8px;font:inherit;font-size:13px} .hint{font-family:var(--mono);font-size:12px;color:var(--mut)} .skel{display:flex;align-items:center;justify-content:center;height:420px;border:1px dashed var(--grid);border-radius:10px;font-family:var(--mono);font-size:13px;color:var(--mut);text-align:center;padding:20px} .skel.err{color:var(--down);border-color:var(--down)} .about{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding-top:6px} .about h3{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.1em;color:var(--mut);margin:0 0 10px 0} .about p{margin:0;font-size:16px;line-height:1.55;max-width:62ch} .kv{display:grid;grid-template-columns:100px 1fr;font-size:14px} .kv div{padding:8px 0;border-bottom:1px solid var(--grid)} .kv div:nth-child(odd){font-family:var(--mono);font-size:12px;color:var(--mut);padding-top:10px} .foot{display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:12px;color:var(--mut);padding-top:14px;border-top:1px solid var(--grid);flex-wrap:wrap} .foot b{color:var(--ink);font-weight:600} .mail{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:4px} .mail input{flex:1 1 220px;max-width:320px;padding:8px 12px;border-radius:6px;border:1px solid var(--grid);background:var(--surf);color:var(--ink);font:inherit;font-size:14px} .mail input::placeholder{color:var(--mut)} .mail small{flex-basis:100%;font-family:var(--mono);font-size:12px;color:var(--mut)} .mail.done input,.mail.done button{display:none} .mail.done small{color:var(--up)} .tblw{overflow-x:auto;border:1px solid var(--grid);border-radius:10px} table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums} th,td{text-align:right;padding:8px 14px;border-bottom:1px solid var(--grid);white-space:nowrap} th{color:var(--mut);font-weight:500;font-size:12px;letter-spacing:0.04em} th:first-child,td:first-child{text-align:left} tbody tr:hover{background:var(--surf)} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .card{background:var(--surf);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-height:118px} .card .h{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .card .h b{font-size:16px;font-weight:600} .card .h span{font-family:var(--mono);font-size:11px;color:var(--mut);white-space:nowrap} .card p{margin:0;font-size:13px;color:var(--mut);line-height:1.45;flex:1 1 auto} .card .sp{display:flex;align-items:flex-end;gap:10px;justify-content:space-between} .card .sp span{font-family:var(--mono);font-size:12px;color:var(--ink)} .card.live:hover{background:var(--act)} .card.soon{opacity:.62} .card.soon .sp span{color:var(--dim)} .dayhead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} .dayhead .d{font-size:64px;font-weight:700;letter-spacing:-0.03em;line-height:1;margin:6px 0 8px 0} .dayhead .s{font-family:var(--mono);font-size:13px;color:var(--mut)} .dayhead p{max-width:60ch;font-size:19px;line-height:1.45;margin:0;color:var(--ink)} .dayhead p span{color:var(--mut)} .dlg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px} .dlg .box{width:min(520px,100%);background:var(--surf);border:1px solid var(--grid);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);max-height:92vh;overflow:auto} .dlg .hd{display:flex;justify-content:space-between;align-items:baseline} .dlg .hd b{font-size:18px;font-weight:600} .dlg img{width:100%;border-radius:8px;display:block;background:var(--bg)} .dlg .row{display:flex;gap:8px;align-items:center} .dlg .url{flex:1 1 auto;min-width:0;padding:8px 10px;background:var(--bg);border-radius:6px;font-family:var(--mono);font-size:11px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dlg small{font-family:var(--mono);font-size:12px;color:var(--mut)} .dlg p{margin:0;font-size:13px;color:var(--mut);line-height:1.45} .ogfoot{display:none} @media (max-width:900px){.side{display:none}.main{padding:16px 14px 30px 14px}.search{display:none}.msel{display:block;flex:1 1 150px;min-width:150px;max-width:62vw}.brand span{display:none}.brand b{font-size:19px}.top{gap:10px;padding:10px 14px}.chip.mut{display:none}.about{grid-template-columns:1fr;gap:20px}.big b{font-size:36px}h1{font-size:24px}.head{flex-direction:column}.badge{align-items:flex-start}.badge small{text-align:left}.tile{min-width:120px;flex:1 1 40%}.dayhead .d{font-size:44px}} @media (max-width:600px){.top .chip{display:none}} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* OG render mode (?og=1): one card, 1200×630, chrome hidden; the plot and the since-line carry the brand */ body.og{overflow:hidden} body.og .top,body.og .side,body.og .hero,body.og .ctl,body.og .tb,body.og .about,body.og .foot,body.og .mail,body.og .hint,body.og .legend,body.og .skel{display:none} body.og .main{padding:30px 40px 0 40px;gap:14px;width:1120px} body.og h1{font-size:36px} body.og .head>div:first-child{min-width:0;flex:1 1 auto} body.og .sub{font-size:17px;max-width:none;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.og .plot svg+svg{display:none} body.og .ogfoot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;color:var(--mut);padding-top:4px} body.og .ogfoot b{color:var(--amb);font-weight:600} body.og .dayhead{gap:24px} body.og .dayhead .d{font-size:60px;margin:0 0 4px 0} body.og .dayhead p{font-size:17px;max-width:60ch} body.og .shelf{padding-top:8px;padding-bottom:4px} body.og .cards{gap:8px} body.og .cards .card:nth-child(n+5){display:none} body.og .card{min-height:0;padding:9px 14px;gap:4px} body.og .card .h b{font-size:14px} body.og .card p{display:none} body.og .card .sp svg{height:26px} /* [09.09] names column (Binance's doors): wraps, stays readable */ .tblw td.nm{white-space:normal;max-width:560px;font-size:12px;line-height:1.35;color:var(--mut)} /* [09.09 audit] visible focus on links, reading cursor on the chart, legend stays on OG cards, card date never breaks */ a:focus-visible{outline:2px solid var(--blu);outline-offset:2px;border-radius:4px} .plot svg{cursor:crosshair}.plot svg.tool{cursor:copy} body.og .legend{display:block} .card .sp span b.d{white-space:nowrap;font-weight:inherit} /* [09.09 audit] mobile: hero tiles scroll sideways, draw toolbar goes under the chart; skip link for keyboard readers */ .cw{display:contents} .skip{position:absolute;left:-9999px;top:10px;z-index:60;background:var(--surf);color:var(--ink);border:1px solid var(--grid);padding:8px 12px;border-radius:6px;font:500 13px var(--mono)}.skip:focus{left:12px} @media (max-width:900px){.cw{display:flex;flex-direction:column;gap:12px}.cw .tb{order:2}.hero{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.hero .big{flex:0 0 auto;min-width:220px}.tile{flex:0 0 150px}.head .sub{font-size:14px}} /* [09.09 audit] OG card of the catalog: no intro paragraph, tighter cards so all three shelves fit 1200×630 */ body.og .dayhead p{display:none}body.og .dayhead{margin-bottom:6px}body.og .card{min-height:0;padding:9px 12px;gap:4px}body.og .cards{gap:8px}body.og .card p{display:none}body.og .shelf{margin:8px 0 4px} /* [09.09 Dorri] OG card fits 1200×630 on every metric: one-line title, badge ≤2 lines, plot a touch smaller */ body.og h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:820px;font-size:32px;line-height:1.1}body.og .badge small{max-height:38px;overflow:hidden}body.og .main{gap:10px}body.og .plot svg{width:1064px;height:auto;margin:0 auto} /* [09.09 Dorri] OG subtitle: the first sentence may take two lines; plot a bit narrower so the footer still fits */ body.og .sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.3}body.og .plot svg{width:1030px} /* [09.09 eyes pass] mobile: pill rows scroll sideways instead of wrapping, hero tiles = small 3-up grid, tap targets 40px, catalog search; sidebar scroll hint */ .side::after{content:"";position:sticky;bottom:0;display:block;height:34px;margin-top:-34px;background:linear-gradient(transparent,var(--bg));pointer-events:none} @media (max-width:900px){.ctl .g{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding-bottom:4px}.pills{flex:0 0 auto}.pills button{white-space:nowrap}.ctl .lbl{white-space:nowrap}.hero{flex-wrap:wrap;overflow:visible}.hero .big{flex:1 1 100%;min-width:0;padding-right:0}.tile{flex:1 1 30%;min-width:100px;padding:10px 12px}.tile b{font-size:18px}.tile span{font-size:11px}.pills button,.tb button,.btn,.tog{min-height:40px}body.cat .search{display:flex}body.cat .msel{display:none}} @media (max-width:900px){.tile{flex:1 1 calc(33.3% - 11px);min-width:0;box-sizing:border-box}} @media (max-width:900px){.ctl .g{flex-wrap:wrap;overflow:visible}.pills{display:inline-flex;overflow-x:auto;max-width:100%;flex:0 1 auto;-webkit-overflow-scrolling:touch}.ctl .g>.sep{display:none}} /* [09.09] the "last print N days ago" plate inside the hero must not inherit the hero-number size */ .big span b{font-size:inherit;font-weight:600;letter-spacing:0} /* [09.09] legend names are buttons: click hides or shows a series (h= in the link) */ .legend .lgi{all:unset;cursor:pointer;display:inline;color:inherit;border-radius:4px}.legend .lgi:hover{color:var(--ink)}.legend .lgi.off{opacity:.45;text-decoration:line-through}.legend .lgi:focus-visible{outline:2px solid var(--blu);outline-offset:2px}.legend .lghint{color:var(--dim);margin-left:12px} /* [аудит-2 RULERS #19, CHAIN #17] OG: the title may take two lines; the footer keeps a gap between its two halves */ body.og .ogfoot{gap:24px} /* [аудит-2c 10.09] layout: sidebar rows ellipsis (RULERS #18) · catalog card badge wraps (CHAIN #16/#35, TAPE #16) · hero tiles stop stretching (TAPE #17, RULERS #25) · title column keeps room next to a long badge (RULERS #25) · shelf header on phones (CHAIN #36) · scroll fade for pill rows and tables that overflow (RULERS #29, CHAIN #13, TAPE #30) */ .mi>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .card .h b{min-width:0}.card .h span{white-space:normal;text-align:right;flex:0 1 auto;max-width:56%} .tile{max-width:280px} .head>div:first-child{min-width:0;flex:1 1 55%}.badge{flex:0 1 auto;max-width:44%} .pills.more{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .tblw.more{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)} @media (max-width:900px){.shelf{flex-wrap:wrap}.shelf>span{flex-basis:100%;order:3}.badge{max-width:none}.head>div:first-child{flex-basis:auto}.tile{max-width:none}} /* [аудит-2c RULERS #25, eyes 10.09] the hero caption wraps inside its own block instead of pushing the tiles to a second row (halving, crosses) */ .big{max-width:min(100%,600px)}.big>span{display:block;max-width:58ch}.big .nb{display:inline} /* [глаза 10.09] #6 hero in one row (big ≤400px, tiles ≤230px) · #7 dates are one word · #2 the running row of a table wraps on phones · #8 card title keeps 55% · #11 sidebar name keeps 45% · #4/#5 OG: badge detail hidden, one-line title, a touch smaller plot so the footer fits on the tall heatmap card */ .nb{white-space:nowrap} .big{max-width:min(100%,400px)}.big span{max-width:40ch}.tile{max-width:230px} .tblw tr.run td{white-space:normal}.tblw tr.run .nm{display:block;max-width:44ch} .card .h b{flex:1 1 55%}.card .h span{max-width:45%} .mi>span:first-child{flex:1 1 45%}.mi>span:last-child{flex:0 1 auto;max-width:55%;overflow:hidden;text-overflow:ellipsis} body.og .badge small{display:none}body.og h1{-webkit-line-clamp:1}body.og .plot svg{width:990px} @media (max-width:900px){.big{max-width:none}.tile{max-width:none}} /* [10.09 слово оператора] the heatmap colour bar is a slider: drag the thumb right to hide the small steps */ input.hf{-webkit-appearance:none;appearance:none;width:160px;height:12px;border-radius:6px;vertical-align:middle;margin:0 8px 0 0;outline:none;border:0;cursor:ew-resize} input.hf::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--grid)} input.hf::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--grid)} input.hf::-moz-range-track{background:transparent;border:0} input.hf:focus-visible{outline:2px solid var(--blu);outline-offset:2px} @media (max-width:900px){input.hf{width:200px;height:16px;border-radius:8px}input.hf::-webkit-slider-thumb{width:26px;height:26px}input.hf::-moz-range-thumb{width:26px;height:26px}} /* [10.09 слово оператора: «слева меню не влазит целиком, непонятно что выбираешь»] every name in the sidebar is shown in full on its own line; the since-tag sits under it, small */ .mi{flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px} .mi>span:first-child{flex:none;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25} .mi>span:last-child{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.2} /* [10.09] cross-links between the two liquidation pages live in the subtitle; catalog card badge sits under the title, like the sidebar */ .sub a.xl{color:var(--blu);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.sub a.xl:hover{color:var(--ink)} .card .h{flex-wrap:wrap;gap:2px 10px}.card .h b{flex:1 1 100%;min-width:0}.card .h span{max-width:100%;text-align:left} /* [10.09 слово оператора] brand mark + X link */ .brand .home{display:inline-flex;align-items:center;gap:8px;color:inherit}.brand .mark{width:22px;height:22px;flex:none} .brand .x,.foot .x{display:inline-flex;align-items:center;gap:4px;color:var(--ink);border-bottom:1px solid var(--grid)}.brand .x:hover,.foot .x:hover{border-bottom-color:var(--ink)} .xg{width:11px;height:11px;fill:currentColor;vertical-align:-1px} .search input{width:min(340px,100%)} @media (max-width:900px){.brand .mark{width:20px;height:20px}} /* [10.09 слово оператора] colour swatches for your line */ .tb button.sw{padding:6px 6px;gap:0}.tb button.sw i{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}.tb button.sw.on{border-color:var(--ink);background:var(--act)}.tb button.sw:hover i{transform:scale(1.15)} @media (max-width:900px){.tb button.sw{min-height:40px;padding:6px 8px}.tb button.sw i{width:18px;height:18px}} /* [10.09 сессия-3] landing hero + start row */ .herocat{display:flex;flex-direction:column;gap:10px} .herocat h1{font-size:40px;font-weight:700;letter-spacing:-0.02em;line-height:1.05;margin:0;text-wrap:balance} .herocat .sub{font-size:19px;line-height:1.45;color:var(--ink);max-width:60ch;margin:0} .herocat .facts{font-family:var(--mono);font-size:13px;color:var(--mut);line-height:1.65} .herocat .shelf{padding:10px 0 2px 0} .herocat .howread{font-family:var(--mono);font-size:12px;color:var(--mut);line-height:1.6} .herocat .honest{font-size:13px;color:var(--mut);max-width:80ch;margin:0;line-height:1.5} .herocat .cards.start{grid-template-columns:repeat(3,1fr)} .card.start{min-height:150px} .card.start .h b{font-size:18px} .card.start .sp svg{min-width:0} @media (max-width:900px){.herocat .cards.start{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}} /* [глаза 10.09 сессия-3] three doors on a tablet are ~240px wide: the wide sparkline and its label stop fighting for one row */ @media (max-width:900px) and (min-width:601px){.card.start .sp{flex-wrap:wrap}.card.start .sp>span{flex:1 1 100%}} @media (max-width:600px){.herocat h1{font-size:28px}.herocat .sub{font-size:16px}.herocat .facts,.herocat .howread{font-size:11px}.herocat .facts .fopt{display:none}.herocat .cards.start{grid-template-columns:1fr}} /* [глаза 10.09 сессия-3] the facts line stays 3 lines on a 360px phone (the chain/rulers years live on the cards below) and «how to read» stops leaving one word alone */ /* [10.09 сессия-3 B, глаза 🟡13/14] «the separator travels inside the segment» — the same rule the landing's facts line got: a pill row that wraps must not start with an orphan «|», and a legend that wraps must not strand a swatch at the end of a line. */ @media (min-width:901px){ .ctl .g>.sep{width:0;margin:0;background:none} /* the divider element keeps its place in the row (and its two gaps) but paints nothing: wrapped to a new row it leaves no orphan «|» … */ .ctl .g>select+.sep{width:1px;margin:0 6px;background:var(--grid)} /* … except after a