/* ========================================================================== TE Plugins — the design system. A machinist's catalogue: hairline rules rather than shadows, a 3px radius, and the ember accent spent only on prices and the thing you want clicked. Themes are token-level. Three states matter, not two: an explicit choice stamps data-theme on , and the default "system" setting stamps nothing — so bare :root carries the whole light palette, the media query redefines only tokens, and [data-theme] redefines them again so the toggle wins in both directions. Never declare a colour only inside one of those blocks: it will not apply in the unstamped state. ========================================================================== */ :root{ --ground:#FCFBF9; --surface:#FFFFFF; --sunk:#F4F1EA; --ink:#16130E; --steel:#6E6759; --faint:#8F887A; --rule:#E5E0D6; --rule-hard:#CFC8BA; --ember:#A63D1A; --ember-soft:#F6E7DF; --quench:#26564F; --quench-soft:#E2EDEA; --warn:#8A6D1F; --warn-soft:#F5EDD8; --crit:#8C2F2F; --crit-soft:#F7E4E2; /* Chrome that is deliberately dark in BOTH themes — the admin rail, the brand mark, an active chip. These must not use --ink/--ground, which flip: that is exactly how you end up with white text on a white ground. */ --chrome-bg:#16130E; --chrome-fg:#FCFBF9; --radius:3px; --measure:66ch; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#14120E; --surface:#1C1914; --sunk:#100E0B; --ink:#F3EFE6; --steel:#A29A8B; --faint:#7C7365; --rule:#2E2A22; --rule-hard:#453F35; --ember:#E07340; --ember-soft:#332016; --quench:#5CB3A7; --quench-soft:#152B28; --warn:#C9A44E; --warn-soft:#2B2416; --crit:#D9736D; --crit-soft:#2E1917; --chrome-bg:#0E0C09; --chrome-fg:#F3EFE6; } } :root[data-theme="dark"]{ --ground:#14120E; --surface:#1C1914; --sunk:#100E0B; --ink:#F3EFE6; --steel:#A29A8B; --faint:#7C7365; --rule:#2E2A22; --rule-hard:#453F35; --ember:#E07340; --ember-soft:#332016; --quench:#5CB3A7; --quench-soft:#152B28; --warn:#C9A44E; --warn-soft:#2B2416; --crit:#D9736D; --crit-soft:#2E1917; --chrome-bg:#0E0C09; --chrome-fg:#F3EFE6; } /* ---------------------------------------------------------------- base ---- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ground); color:var(--ink); font-family:Archivo,"Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.014em;text-wrap:balance} p{margin:0} a{color:inherit} img{max-width:100%;height:auto} code,.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace} .tnum{font-variant-numeric:tabular-nums} :focus-visible{outline:2px solid var(--ember);outline-offset:2px} /* Running prose is set in the serif and kept near 66 characters wide. */ .prose{ font-family:"Source Serif 4",Georgia,"Times New Roman",serif; font-size:16.5px;line-height:1.65;color:var(--steel);max-width:var(--measure); } .prose p + p{margin-top:.85em} .prose a{color:var(--ember)} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:99;background:var(--surface);padding:8px 12px;border:1px solid var(--rule-hard);border-radius:var(--radius)} /* ---------------------------------------------------------------- layout -- */ .wrap{max-width:1240px;margin:0 auto;padding:0 22px} .eyebrow{ font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--faint); } .sec-head{display:flex;align-items:baseline;gap:14px;padding-bottom:12px} .sec-head .line{flex:1;height:1px;background:var(--rule)} .stack{display:flex;flex-direction:column;gap:16px} /* ---------------------------------------------------------------- controls */ .btn{ display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:500; font-size:14px;padding:9px 16px;border-radius:var(--radius); border:1px solid transparent;cursor:pointer;text-decoration:none; } .btn-primary{background:var(--ember);color:#fff} .btn-primary:hover{filter:brightness(1.08)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-hard)} .btn-ghost:hover{background:var(--sunk)} .btn-sm{padding:5px 11px;font-size:13px} .btn-block{width:100%;justify-content:center} .chip{ font:inherit;font-size:13px;padding:5px 12px;border:1px solid var(--rule-hard); border-radius:var(--radius);background:transparent;color:var(--steel); cursor:pointer;text-decoration:none;display:inline-block; } .chip:hover{background:var(--sunk);color:var(--ink)} .chip.on{background:var(--chrome-bg);color:var(--chrome-fg);border-color:var(--chrome-bg)} .pill{ display:inline-flex;align-items:center;gap:5px; font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px; letter-spacing:.04em;padding:2px 7px;border-radius:2px;white-space:nowrap; } .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pill-ok{background:var(--quench-soft);color:var(--quench)} .pill-warn{background:var(--warn-soft);color:var(--warn)} .pill-crit{background:var(--crit-soft);color:var(--crit)} .pill-ember{background:var(--ember-soft);color:var(--ember)} .pill-flat{background:var(--sunk);color:var(--steel)} /* ---------------------------------------------------------------- masthead */ .top{border-top:2px solid var(--ember);background:var(--surface);border-bottom:1px solid var(--rule)} .top-in{max-width:1240px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:26px;min-height:62px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em;text-decoration:none} .brand .mark{width:24px;height:24px;flex:none;display:grid;place-items:center;background:var(--chrome-bg);border-radius:var(--radius)} .brand .mark svg{width:14px;height:14px;color:var(--chrome-fg)} .nav{display:flex;gap:2px;flex:1;flex-wrap:wrap} .nav a{ text-decoration:none;font-size:14px;color:var(--steel);padding:7px 11px; border-radius:var(--radius);border-bottom:2px solid transparent; } .nav a:hover{color:var(--ink);background:var(--sunk)} .nav a.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ember)} .themetoggle{ font:inherit;font-size:13px;background:transparent;color:var(--steel); border:1px solid var(--rule-hard);border-radius:var(--radius);padding:5px 10px;cursor:pointer; } .themetoggle:hover{color:var(--ink);background:var(--sunk)} /* ---------------------------------------------------------------- flash --- */ .flash{border:1px solid var(--rule-hard);border-radius:var(--radius);padding:11px 15px;font-size:14px;background:var(--surface)} .flash-ok{border-color:var(--quench);background:var(--quench-soft);color:var(--quench)} .flash-warn{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)} .flash-error{border-color:var(--crit);background:var(--crit-soft);color:var(--crit)} .flashes{display:flex;flex-direction:column;gap:9px;padding:16px 0 0} /* ---------------------------------------------------------------- plates -- */ .spec-plate{border:1px solid var(--rule);background:var(--surface);border-radius:var(--radius);overflow:hidden} .spec-plate-h{padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--sunk);display:flex;justify-content:space-between;align-items:center;gap:12px} .spec-row{display:flex;justify-content:space-between;gap:16px;padding:9px 16px;border-bottom:1px solid var(--rule);font-size:13.5px} .spec-row:last-child{border-bottom:0} .spec-row dt{color:var(--faint)} .spec-row dd{margin:0;text-align:right;font-weight:500} /* ---------------------------------------------------------------- hero ---- */ .hero{padding:64px 0 52px;border-bottom:1px solid var(--rule)} .hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.06;max-width:16ch} .hero .lede{margin-top:20px;max-width:56ch} .hero-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap} .hero-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:56px;align-items:start} .strip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)} .strip > div{padding:30px 26px 30px 0;border-right:1px solid var(--rule)} .strip > div:last-child{border-right:0;padding-right:0} .strip h3{font-size:16px;margin-bottom:7px} .strip p{font-size:14px;color:var(--steel)} .strip .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ember);letter-spacing:.1em;display:block;margin-bottom:12px} /* ---------------------------------------------------------------- catalogue */ .card{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start;padding:24px 0;border-bottom:1px solid var(--rule)} .card h3{font-size:19px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .card h3 a{text-decoration:none} .card h3 a:hover{color:var(--ember)} .card .sub{color:var(--steel);font-size:14.5px;margin-top:6px;max-width:62ch} .card .meta{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap;font-size:12px;color:var(--faint);font-family:"IBM Plex Mono",ui-monospace,monospace} .card.soon{opacity:.62} .price{text-align:right;white-space:nowrap} .price .amt{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ember)} .price .term{display:block;font-size:12px;color:var(--faint);margin-top:2px} .filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:22px;align-items:center} /* ---------------------------------------------------------------- footer -- */ .foot{border-top:1px solid var(--rule);margin-top:60px;padding:34px 0 44px;background:var(--surface)} .foot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px} .foot h4{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:11px} .foot a{display:block;text-decoration:none;color:var(--steel);font-size:13.5px;padding:3px 0} .foot a:hover{color:var(--ember)} .foot .note{font-size:13px;color:var(--faint);margin-top:11px;max-width:34ch} /* ---------------------------------------------------------------- errors -- */ .errpage{padding:90px 0 110px;text-align:center} .errpage .code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.2em;color:var(--ember)} .errpage h1{font-size:34px;margin-top:12px} .errpage p{margin:14px auto 0;max-width:46ch;color:var(--steel)} .errpage .btn{margin-top:26px} /* ---------------------------------------------------------------- responsive */ @media (max-width:940px){ .hero-grid,.foot-in{grid-template-columns:1fr;gap:30px} .strip{grid-template-columns:1fr} .strip > div{border-right:0;border-bottom:1px solid var(--rule);padding-right:0} .card{grid-template-columns:1fr;gap:14px} .price{text-align:left} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto !important} } /* ---------------------------------------------------------------- masthead, small Left to wrap on its own the nav stacks one item per row and pushes the hero most of a screen down. Brand and account controls hold the first row; the nav becomes a horizontal strip on the second, scrolling rather than wrapping. */ @media (max-width:760px){ .top-in{min-height:0;padding:10px 22px 0;row-gap:8px;column-gap:12px} .brand{flex:1 1 auto} .nav{order:5;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:0; margin:0 -22px;padding:2px 22px 0;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{white-space:nowrap;padding:8px 10px;border-radius:0} .hero{padding:38px 0 34px} } /* ---------------------------------------------------------------- product -- */ .pd{display:grid;grid-template-columns:1.5fr .85fr;gap:52px;padding:40px 0 60px;align-items:start} .pd h1{font-size:clamp(28px,3.4vw,38px);display:flex;align-items:center;gap:12px;flex-wrap:wrap} .buybox{border:1px solid var(--rule-hard);border-radius:var(--radius);background:var(--surface);position:sticky;top:20px} .buybox-top{padding:20px;border-bottom:1px solid var(--rule)} .buybox .amt{font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--ember)} .feat{list-style:none;margin:0;padding:6px 20px 14px} .feat li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:14px;color:var(--steel)} .feat li:last-child{border-bottom:0} .feat svg{width:14px;height:14px;flex:none;margin-top:4px;color:var(--quench)} .tabs{display:flex;border-bottom:1px solid var(--rule);margin-top:36px;flex-wrap:wrap} .tabs a,.tabs span,.tabs button{padding:9px 16px;font:inherit;font-size:14px;color:var(--faint); background:none;border:0;border-bottom:2px solid transparent;text-decoration:none;cursor:pointer} .tabs a:hover,.tabs button:hover{color:var(--ink)} .tabs .on{color:var(--ink);font-weight:500;border-bottom-color:var(--ember)} .tabpane[hidden]{display:none} .changelog{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);overflow:hidden;margin-top:20px} .changelog .rel{padding:16px 18px;border-bottom:1px solid var(--rule)} .changelog .rel:last-child{border-bottom:0} .changelog .relh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .changelog .relh b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px} .changelog .relh time{font-size:12.5px;color:var(--faint)} .changelog .body{font-size:14px;color:var(--steel);margin-top:7px} .changelog .body ul{margin:6px 0 0;padding-left:18px} .changelog .body li{margin:3px 0} @media (max-width:940px){ .pd{grid-template-columns:1fr;gap:30px;padding-top:28px} .buybox{position:static} } /* ========================================================================== Admin. A control room, not a document: summary before detail, state encoded in shape as well as number, tables first. ========================================================================== */ .admin{display:grid;grid-template-columns:216px 1fr;min-height:100vh} .arail{background:var(--chrome-bg);color:var(--chrome-fg);padding:18px 0;display:flex;flex-direction:column} .arail .abrand{display:flex;align-items:center;gap:9px;padding:0 18px 18px;font-weight:600;font-size:15px; border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;color:var(--chrome-fg)} .arail .abrand .mark{width:22px;height:22px;background:var(--ember);border-radius:var(--radius);display:grid;place-items:center;flex:none} .arail .abrand .mark svg{width:13px;height:13px;color:#fff} .agroup{padding:16px 18px 6px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px; letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34)} .arail a.item{text-decoration:none;font-size:13.5px;color:rgba(255,255,255,.72);padding:7px 18px; display:flex;justify-content:space-between;align-items:center;gap:8px;border-left:2px solid transparent} .arail a.item:hover{color:#fff;background:rgba(255,255,255,.05)} .arail a.item.on{color:#fff;background:rgba(255,255,255,.07);border-left-color:var(--ember);font-weight:500} .arail .badge{background:var(--ember);color:#fff;font-size:10.5px;font-family:"IBM Plex Mono",ui-monospace,monospace;padding:1px 6px;border-radius:9px} .arail .foot-link{margin-top:auto;padding:14px 18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px} .arail .foot-link a{color:rgba(255,255,255,.6);text-decoration:none;display:block;padding:3px 0} .arail .foot-link a:hover{color:#fff} .abody{padding:26px 30px 60px;background:var(--ground);min-width:0} .abar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:20px;flex-wrap:wrap} .abar h1{font-size:24px;margin-top:5px} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin-bottom:26px} .stat{background:var(--surface);padding:15px 17px} .stat .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .stat .v{font-size:27px;font-weight:600;letter-spacing:-.025em;margin-top:5px;font-variant-numeric:tabular-nums} .stat .v.warnv{color:var(--warn)} .stat .v.critv{color:var(--crit)} .stat .d{font-size:12px;color:var(--steel);margin-top:2px} .two{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start} .panel{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);overflow:hidden} .panel-h{padding:12px 16px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between; align-items:center;gap:12px;background:var(--sunk);flex-wrap:wrap} .panel-h h3{font-size:14px} .panel-b{padding:16px} .panel + .panel{margin-top:22px} .tablewrap{overflow-x:auto} table.data{border-collapse:collapse;width:100%;font-size:13.5px} table.data th{text-align:left;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500; padding:10px 14px;border-bottom:1px solid var(--rule-hard);background:var(--sunk);white-space:nowrap} table.data td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:middle} table.data tr:last-child td{border-bottom:0} table.data tbody tr:hover td{background:var(--sunk)} table.data .num{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} .empty{padding:34px 18px;text-align:center;color:var(--faint);font-size:14px} /* ---- forms ---- */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px} .field label{font-size:13px;font-weight:500} .field .help{font-size:12.5px;color:var(--faint)} .field input,.field select,.field textarea{ font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--rule-hard); border-radius:var(--radius);background:var(--surface);color:var(--ink);width:100%;max-width:520px} .field textarea{min-height:110px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ember);outline-offset:-1px;border-color:var(--ember)} .field .mono{font-family:"IBM Plex Mono",ui-monospace,monospace} .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 20px} .settabs{display:flex;border-bottom:1px solid var(--rule);margin-bottom:20px;flex-wrap:wrap} .settabs a{padding:8px 14px;font-size:13.5px;color:var(--faint);border-bottom:2px solid transparent;text-decoration:none} .settabs a:hover{color:var(--ink)} .settabs a.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ember)} .setrow{display:grid;grid-template-columns:250px 1fr;gap:26px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:start} .setrow:last-child{border-bottom:0} .setrow .lab{font-size:13.5px;font-weight:500} .setrow .hlp{font-size:12.5px;color:var(--faint);margin-top:3px;max-width:46ch} .setrow input[type=text],.setrow input[type=email],.setrow input[type=number],.setrow select{ font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--rule-hard);border-radius:var(--radius); background:var(--surface);color:var(--ink);width:100%;max-width:430px} .setrow input:focus,.setrow select:focus{outline:2px solid var(--ember);outline-offset:-1px;border-color:var(--ember)} .switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--steel)} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .track{width:36px;height:20px;background:var(--rule-hard);border-radius:11px;position:relative;flex:none;transition:background .12s} .switch .track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .12s} .switch input:checked + .track{background:var(--ember)} .switch input:checked + .track:after{left:18px} .switch input:focus-visible + .track{outline:2px solid var(--ember);outline-offset:2px} .drop{border:1px dashed var(--rule-hard);border-radius:var(--radius);padding:22px;text-align:center;color:var(--faint);font-size:13.5px;background:var(--sunk)} @media (max-width:940px){ .admin{grid-template-columns:1fr;min-height:0} .arail{flex-direction:row;flex-wrap:wrap;padding:10px 12px;align-items:center;gap:4px} .arail .abrand{border-bottom:0;padding:0 12px 0 6px} .agroup{display:none} .arail a.item{border-left:0;padding:6px 10px;border-radius:var(--radius)} .arail .foot-link{margin:0 0 0 auto;border-top:0;padding:0 6px} .two{grid-template-columns:1fr} .abody{padding:20px 16px 50px} .setrow{grid-template-columns:1fr;gap:8px} } /* ---------------------------------------------------------------- account -- */ .acct{display:grid;grid-template-columns:186px 1fr;gap:38px;padding:36px 0 70px;align-items:start} .side{display:flex;flex-direction:column;gap:1px} .side a{text-decoration:none;font-size:14px;color:var(--steel);padding:8px 11px;border-radius:var(--radius);border-left:2px solid transparent} .side a:hover{color:var(--ink);background:var(--sunk)} .side a.on{color:var(--ink);font-weight:500;background:var(--sunk);border-left-color:var(--ember)} .lic{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);margin-bottom:16px;overflow:hidden} .lic-h{padding:15px 18px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .lic-h b{font-size:16px} .keyline{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--sunk);border-bottom:1px solid var(--rule); font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;letter-spacing:.04em;flex-wrap:wrap} .keyline .lbl{color:var(--faint);font-size:11px;letter-spacing:.12em} .lic-b{padding:15px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px} .lic-b .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-family:"IBM Plex Mono",ui-monospace,monospace} .lic-b .v{font-size:14px;margin-top:3px} .domlist{border-top:1px solid var(--rule)} .domrow{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--rule);font-size:13.5px;flex-wrap:wrap} .domrow:last-child{border-bottom:0} .domrow .d{font-family:"IBM Plex Mono",ui-monospace,monospace} .domrow form{margin-left:auto} @media (max-width:760px){ .acct{grid-template-columns:1fr;gap:22px;padding-top:22px} .side{flex-direction:row;flex-wrap:wrap;gap:4px} .side a{border-left:0;border:1px solid var(--rule-hard)} .side a.on{border-color:var(--ember)} } /* ---------------------------------------------------------------- threads -- */ .thread{display:flex;flex-direction:column;gap:14px} .msg{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);overflow:hidden;max-width:80%} .msg.from-admin{align-self:flex-start;border-left:2px solid var(--ember)} .msg.from-customer{align-self:flex-end;background:var(--sunk)} .msg-h{display:flex;justify-content:space-between;gap:14px;padding:8px 14px;border-bottom:1px solid var(--rule); font-size:11.5px;color:var(--faint);font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase} .msg-b{padding:12px 14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word} .radio-row{display:flex;gap:10px;flex-wrap:wrap} .radio-card{flex:1;min-width:190px;border:1px solid var(--rule-hard);border-radius:var(--radius);padding:13px 15px;cursor:pointer;background:var(--surface)} .radio-card:hover{border-color:var(--faint)} .radio-card b{display:block;font-size:14px} .radio-card span{font-size:12.5px;color:var(--steel)} .radio-card input{margin-right:7px} @media (max-width:760px){ .msg{max-width:100%} }