:root { --cream:#f7f5ef; --paper:#fffdfa; --ink:#171715; --soft-ink:#40403b; --muted:#737168; --line:#d8d3c7; --orange:#da7756; --orange-deep:#b95f42; --temp:#c95b42; --humidity:#26788a; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:var(--cream); font-family:Inter,"Aptos","Segoe UI",Arial,sans-serif; }
.app-shell { max-width:1160px; margin:auto; padding:26px 24px 48px; }
header { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; min-height:345px; padding:42px 0 38px; border-bottom:1px solid var(--ink); }.eyebrow { margin:0 0 17px; color:var(--orange-deep); font-size:.71rem; font-weight:700; letter-spacing:.12em; }.eyebrow::before { display:inline-block; width:27px; height:1px; margin:0 10px 3px 0; content:""; background:currentColor; }
h1 { max-width:670px; margin:0; font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Georgia,serif; font-size:clamp(3.2rem,7.3vw,6.3rem); font-weight:400; letter-spacing:-.075em; line-height:.88; }.subtitle { max-width:440px; margin:20px 0 0; color:var(--soft-ink); font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.2rem; line-height:1.35; }.connection { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--ink); color:var(--soft-ink); font-size:.75rem; font-weight:650; letter-spacing:.03em; white-space:nowrap; }.status-dot { width:7px; height:7px; border-radius:50%; background:#a6a398; }.status-dot.connected { background:#5d9b68; box-shadow:0 0 8px rgba(93,155,104,.5); }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:24px 0 8px; }button { border:1px solid var(--ink); border-radius:999px; padding:11px 17px; color:var(--paper); background:var(--ink); cursor:pointer; font:650 .78rem Inter,"Segoe UI",sans-serif; letter-spacing:.01em; }button:hover { color:var(--ink); background:var(--orange); border-color:var(--orange); }button:disabled { cursor:not-allowed; opacity:.42; }.secondary { color:var(--ink); background:transparent; border-color:var(--line); }.secondary:hover { color:var(--ink); border-color:var(--ink); background:transparent; }.text-button { color:var(--soft-ink); background:transparent; border-color:transparent; text-decoration:underline; text-underline-offset:3px; }.text-button:hover { color:var(--orange-deep); background:transparent; border-color:transparent; }.browser-note { min-height:1.2rem; margin:0; color:var(--muted); font-size:.79rem; }
.readings,.charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:30px; }.reading,.chart-card { border:1px solid var(--line); border-radius:10px; background:var(--paper); }.reading { min-height:170px; padding:24px; }.reading p { margin:0; color:var(--muted); font-size:.76rem; font-weight:650; letter-spacing:.06em; }.reading strong { display:flex; align-items:baseline; margin:12px 0 7px; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:clamp(3.2rem,7vw,5rem); font-variant-numeric:tabular-nums; font-weight:400; letter-spacing:-.065em; line-height:.85; }.reading strong span { color:inherit; font-size:1em; }.reading small { margin-left:8px; color:var(--muted); font-family:Inter,"Segoe UI",sans-serif; font-size:.34em; letter-spacing:0; }.reading > span { color:var(--muted); font-size:.76rem; }.temperature-card strong { color:var(--temp); }.humidity-card strong { color:var(--humidity); }
.charts { margin-top:18px; }.chart-card { min-height:321px; padding:20px; background:rgba(255,253,250,.72); }.chart-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line); }.chart-heading h2 { margin:0; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.35rem; font-weight:400; letter-spacing:-.03em; }.legend { font-size:.78rem; font-weight:650; }.temperature-legend { color:var(--temp); }.humidity-legend { color:var(--humidity); }.chart-plot { position:relative; }canvas { display:block; width:100%; height:235px; margin-top:10px; cursor:crosshair; }.chart-tooltip { position:absolute; top:17px; z-index:1; transform:translateX(-50%); padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--ink); color:var(--paper); box-shadow:0 8px 18px rgba(23,23,21,.13); font-size:.76rem; line-height:1.45; pointer-events:none; text-align:center; white-space:nowrap; }.chart-tooltip strong { color:#ffd5c9; }.footnote { margin:24px 0 0; color:var(--muted); font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:.96rem; }
@media (max-width:700px) { .app-shell { padding:18px 16px 34px; }header { min-height:285px; padding:29px 0; align-items:flex-start; flex-direction:column; justify-content:flex-end; }.connection { margin-top:3px; }.readings,.charts { grid-template-columns:1fr; }.chart-card { min-height:280px; }canvas { height:205px; } }

/* Reduced corner treatment and full-screen charts. */
button { border-radius:4px; }
.reading,.chart-card { border-radius:3px; }
.chart-tooltip { border-radius:3px; }
.chart-actions { display:flex; align-items:center; gap:9px; }
.fullscreen-button { padding:5px 7px; color:var(--soft-ink); border-color:var(--line); background:transparent; font-size:.68rem; }
.fullscreen-button:hover { color:var(--ink); border-color:var(--ink); background:transparent; }
.chart-card:fullscreen { width:100%; height:100%; padding:34px; border:0; border-radius:0; background:var(--cream); }
.chart-card:fullscreen canvas { height:calc(100vh - 155px); }

.tab-nav { display:flex; gap:21px; margin-top:24px; border-bottom:1px solid var(--line); }
.tab-button { position:relative; padding:0 0 11px; border:0; border-radius:0; color:var(--muted); background:transparent; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.08rem; font-weight:400; }
.tab-button:hover { color:var(--ink); background:transparent; }
.tab-button.active { color:var(--ink); }
.tab-button.active::after { position:absolute; right:0; bottom:-1px; left:0; height:2px; content:""; background:var(--orange); }
.circuit-panel { padding-top:36px; }
.circuit-intro { max-width:620px; }.circuit-intro h2 { margin:0; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:clamp(2rem,4.5vw,3.8rem); font-weight:400; letter-spacing:-.055em; line-height:.95; }.circuit-intro p:last-child { margin:16px 0 0; color:var(--soft-ink); font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.12rem; line-height:1.45; }
.circuit-visual { margin-top:30px; padding:26px; border:1px solid var(--line); border-radius:3px; background:var(--paper); }.circuit-visual svg { display:block; width:100%; height:auto; }.board,.sensor { fill:#f6f3ea; stroke:var(--ink); stroke-width:1.5; }.sensor { fill:#f4faf9; }.diagram-title { fill:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:15px; font-weight:700; letter-spacing:1.2px; }.diagram-label { font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:700; }.power { fill:var(--temp); }.data { fill:var(--humidity); }.ground { fill:#444; }.wire { fill:none; stroke-width:3; }.power-wire { stroke:var(--temp); }.data-wire { stroke:var(--humidity); stroke-dasharray:7 5; }.ground-wire { stroke:#444; }.power-dot { fill:var(--temp); }.data-dot { fill:var(--humidity); }.ground-dot { fill:#444; }.wire-note { fill:var(--muted); font-family:Arial,Helvetica,sans-serif; font-size:12px; }.pulse-dot { animation:pulse-data 1.5s ease-in-out infinite; }@keyframes pulse-data { 50% { opacity:.35; transform:scale(1.45); transform-origin:center; } }
.circuit-explanation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px; }.circuit-explanation article { padding:20px; border-top:2px solid var(--ink); background:rgba(255,253,250,.65); }.circuit-number { color:var(--orange-deep); font-size:.74rem; font-weight:700; letter-spacing:.09em; }.circuit-explanation h3 { margin:13px 0 7px; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.35rem; font-weight:400; }.circuit-explanation p { margin:0; color:var(--soft-ink); font-size:.88rem; line-height:1.45; }
.decoder-live { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:24px; margin-top:18px; padding:24px; border:1px solid var(--line); border-radius:3px; background:var(--paper); }.decoder-live h3 { margin:0; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.55rem; font-weight:400; letter-spacing:-.03em; }.decoder-live .eyebrow { margin-bottom:9px; }.frame-bits { margin:14px 0 0; overflow-wrap:anywhere; color:var(--soft-ink); font-family:"SFMono-Regular",Consolas,monospace; font-size:.82rem; line-height:1.7; }.decoder-calculations { display:grid; gap:10px; align-content:start; }.decoder-calculations p { display:grid; gap:4px; margin:0; padding:10px 0; border-bottom:1px solid var(--line); }.decoder-calculations span { color:var(--muted); font-size:.75rem; font-weight:650; }.decoder-calculations strong { color:var(--ink); font-family:"SFMono-Regular",Consolas,monospace; font-size:.77rem; font-weight:500; line-height:1.45; }
.circuit-live { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px 20px; margin-top:25px; padding:18px 20px; border-left:2px solid var(--orange); background:var(--paper); }.circuit-live p { width:100%; margin:0; color:var(--muted); font-size:.77rem; font-weight:650; letter-spacing:.06em; }.circuit-live strong { font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.65rem; font-weight:400; }.circuit-live strong:first-of-type { color:var(--temp); }.circuit-live strong:nth-of-type(2) { color:var(--humidity); }.circuit-live > span { color:var(--muted); font-size:.78rem; }
@media (max-width:700px) { .circuit-visual { padding:14px; overflow-x:auto; }.circuit-visual svg { min-width:570px; }.circuit-explanation,.decoder-live { grid-template-columns:1fr; }.circuit-live { align-items:flex-start; flex-direction:column; gap:7px; } }

.physics-panel { padding-top:36px; }.physics-intro { max-width:660px; }.physics-intro h2 { margin:0; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:clamp(2.3rem,5vw,4.2rem); font-weight:400; letter-spacing:-.06em; line-height:.93; }.physics-intro p:last-child { margin:17px 0 0; color:var(--soft-ink); font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.15rem; line-height:1.45; }
.physics-concepts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px; }.physics-concepts article { padding:21px; border-top:2px solid var(--ink); background:rgba(255,253,250,.66); }.physics-concepts span { color:var(--orange-deep); font-size:.75rem; font-weight:700; letter-spacing:.1em; }.physics-concepts h3 { margin:13px 0 8px; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.45rem; font-weight:400; }.physics-concepts p { margin:0; color:var(--soft-ink); font-size:.89rem; line-height:1.5; }
.physics-live { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.8fr); gap:26px; margin-top:18px; padding:24px; border:1px solid var(--line); border-radius:3px; background:var(--paper); }.physics-live h3 { margin:0; font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.6rem; font-weight:400; letter-spacing:-.03em; }.physics-live .eyebrow { margin-bottom:9px; }.physics-live > div > p:last-child { margin:12px 0 0; color:var(--soft-ink); }.physics-metrics { display:grid; gap:11px; align-content:start; }.physics-metrics p { display:grid; gap:4px; margin:0; padding:10px 0; border-bottom:1px solid var(--line); }.physics-metrics span { color:var(--muted); font-size:.75rem; font-weight:650; }.physics-metrics strong { color:var(--ink); font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-size:1.4rem; font-weight:400; }.physics-metrics p:first-child strong { color:var(--temp); }.physics-metrics p:nth-child(2) strong { color:var(--humidity); }
@media (max-width:700px) { .physics-concepts,.physics-live { grid-template-columns:1fr; } }

.site-footer { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:44px; padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }.site-footer span { font-weight:650; }.site-footer a { color:var(--soft-ink); text-underline-offset:3px; }.site-footer a:hover { color:var(--orange-deep); }

.tab-enter { animation:tab-enter .42s cubic-bezier(.22,.61,.36,1) both; }@keyframes tab-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }@media (prefers-reduced-motion:reduce) { .tab-enter { animation:none; } }