/* Shared presentation for hfmodem's mode guides and comparison. */
:root{color-scheme:light;--sans:Arial,Helvetica,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--bg:#f5f4ef;--bg-2:#eeede7;--bg-3:#eeede7;--panel:#eeede7;--ink:#242522;--ink-dim:#62635d;--ink-faint:#62635d;--dim:#62635d;--line:#cdcec5;--line-2:#ddded5;--signal:#b63827;--secondary:#575f86;--sig:var(--signal);--sig-hi:var(--signal);--acc:var(--signal);--acc-hi:var(--signal);--amber:var(--signal);--amber-hi:var(--signal);--gold:var(--secondary);--gold-hi:var(--secondary);--cyan:var(--secondary);--cyan-hi:var(--secondary);--maxw:1180px;--measure:46rem}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#20221f;--bg-2:#292c27;--bg-3:#292c27;--panel:#292c27;--ink:#f0f0e7;--ink-dim:#b3b6aa;--ink-faint:#b3b6aa;--dim:#b3b6aa;--line:#4e5348;--line-2:#3c4137;--signal:#f18d74;--secondary:#b0b9e5}}
body{font:16px/1.6 var(--sans)}
.wrap{width:min(1180px,calc(100% - 80px));max-width:none;margin-inline:auto;padding-inline:0}
.site-header{position:static}.site-header-inner{width:min(1180px,calc(100% - 80px));padding:18px 0}.site-nav{gap:4px 24px}.site-nav a{min-height:44px}
.site-heading{min-height:44px;padding:8px 0 20px;border-bottom:1px solid var(--ink);font:12px/1.5 var(--mono)}.site-home{font:bold 27px/1 var(--sans);letter-spacing:-1.5px;text-decoration:none;margin-right:auto}.site-global-nav{display:flex;gap:24px;align-items:center}.site-global-nav a{color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.site-global-nav a:hover{color:var(--signal)}
.hero,.hero.wrap,header.hero{padding-block:48px}.hero h1,h1{font:500 clamp(40px,6vw,72px)/1.08 var(--sans);letter-spacing:-.035em;margin:16px 0 24px}.hero .lede,.lede{font-size:clamp(18px,2vw,22px);max-width:46rem}.hero h1 .g,h1 em{font:inherit;color:inherit}
section{padding-block:48px}.sechead h2,h2{font-size:clamp(27px,3.5vw,40px);line-height:1.15}.sechead{margin-bottom:26px}.eyebrow,.sechead .n{font:11px/1.5 var(--mono);letter-spacing:.1em;color:var(--ink-dim)}.kicker{border:0!important;padding:0!important;letter-spacing:.08em!important}.metastrip{font-size:12px}
.card,.pcard,.plot,.stepper{border:1px solid var(--line);border-radius:0;background:var(--panel);box-shadow:none}.stage{border-radius:0;box-shadow:none}.callout{border-radius:0}.chip.unv::before{animation:none}
button,.btn,.seg button,.seg-ctl button,.controls select,input.call{font:12px/1.4 var(--mono);min-height:44px;border-radius:0}.seg button.on,.seg-ctl button.on{background:var(--signal);color:var(--bg)}
.flow,.pkt,.blocks{gap:4px}.flow .stg,.pkt .seg,.blocks div{border:1px solid var(--line);border-radius:0;background:var(--panel)}.flow .arr{color:var(--ink-dim)}.pkt .seg.hi,.blocks .parity{border-color:var(--secondary)}
.frequency-chart{display:block;width:100%;height:auto;background:var(--panel);border:1px solid var(--line)}.frequency-chart .axis{stroke:var(--line)}.frequency-chart .carrier{stroke:var(--signal);stroke-width:3}.frequency-chart text{fill:var(--ink-dim);font:12px var(--mono)}
figcaption,.figsrc{font:12px/1.6 var(--mono);color:var(--ink-dim)}.diagram-key{font:12px/1.6 var(--mono);color:var(--ink-dim)}
.exchange{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;max-width:760px;margin:22px 0;font:12px/1.6 var(--mono)}.exchange .station{border-bottom:1px solid var(--line);padding:8px 0;color:var(--ink)}.exchange .station:nth-child(2){text-align:right}.exchange .transmit,.exchange .reply{grid-column:1/-1;padding:10px 14px;border:1px solid var(--line)}.exchange .transmit{color:var(--signal);border-left:3px solid var(--signal)}.exchange .reply{color:var(--secondary);text-align:right;border-right:3px solid var(--secondary)}
table{font-size:13px}td,th{padding:12px 14px}footer{font:12px/1.7 var(--mono);color:var(--ink-dim);padding-block:32px}.site-theme{display:none}
@media(max-width:700px){.wrap,.site-header-inner{width:calc(100% - 36px)}.hero,.hero.wrap,header.hero,section{padding-block:32px}.grid,.split{grid-template-columns:minmax(0,1fr)}.flow,.pkt{flex-wrap:wrap}.flow .stg,.pkt .seg{min-width:100px}.frequency-chart{min-width:500px}.frequency-scroll{overflow-x:auto}.site-nav{gap:2px 16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}