/* Phase 15 F1: shared styling for the five standalone calculator pages. Same dark palette and type as the app and the /welcome front door, in one cacheable file so every calculator loads fast and looks identical. */ :root{ --bg:#050505; --num:#d6d6d6; --body:#9a9a9a; --cap:#5c5c5c; --white:#ffffff; --line:rgba(214,214,214,0.10); --green:#3fb27f; --amber:#c79a3a; --panel:rgba(255,255,255,0.02); } /* Light ("day") mode, mirroring the app's contract. Set by data-theme="light" on from the top-left toggle, persisted in localStorage as "synarsi-theme", applied before first paint by the boot script each calculator page runs first in its . Absence of the attribute is the default dark theme, left unchanged. Most of this file reads the tokens above, so overriding them flips the bulk of it; the few rules below that hardcoded a dark value are overridden too. */ :root[data-theme="light"]{ --bg:#ffffff; --num:#1a1a1a; --body:#4b4b4b; --cap:#8a8a8a; --white:#161616; --line:rgba(26,26,26,0.10); --green:#2f9e6b; --amber:#9a6f1c; --panel:rgba(0,0,0,0.03); } :root[data-theme="light"] header.top{background:rgba(255,255,255,0.86)} :root[data-theme="light"] input[type=range]{background:rgba(26,26,26,0.18)} :root[data-theme="light"] .result{background:rgba(47,158,107,0.05)} :root[data-theme="light"] .other-calcs a:hover{border-color:rgba(26,26,26,0.3)} /* The light/dark ("day/night") toggle button, top-left of the header. A sun is shown in dark mode (tap for day) and a moon in light mode (tap for night), swapped by CSS on data-theme, matching the app and /welcome. */ .themebtn{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line);color:var(--cap);padding:5px 9px;border-radius:2px;cursor:pointer} .themebtn:hover{color:var(--num)} .themebtn .theme-moon{display:none} :root[data-theme="light"] .themebtn .theme-sun{display:none} :root[data-theme="light"] .themebtn .theme-moon{display:inline} *{box-sizing:border-box} html,body{margin:0} body{ background:var(--bg); color:var(--body); font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif; font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .wrap{max-width:680px;margin:0 auto;padding:0 20px} header.top{position:sticky;top:0;z-index:5;background:rgba(5,5,5,0.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .top .wrap{display:flex;align-items:center;gap:12px;height:54px} .brand{color:var(--num);font-size:14px;letter-spacing:0.32em;text-transform:uppercase;font-weight:400;text-decoration:none;white-space:nowrap} .top .spacer{flex:1} .top a.home{color:var(--body);font-size:13px;letter-spacing:0.04em;text-decoration:none} .top a.home:hover{color:var(--num)} main{padding:40px 0 8px} .eyebrow{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--cap);margin-bottom:10px} h1{color:var(--white);font-weight:200;font-size:clamp(24px,4.5vw,34px);line-height:1.25;letter-spacing:-0.01em;margin:0 0 14px} .lede{color:var(--body);font-size:15px;margin:0 0 26px;max-width:600px} .card{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:22px 20px} .field{margin:0 0 22px} .field:last-child{margin-bottom:0} .field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--body);margin-bottom:10px} .field .val{color:var(--white);font-size:15px;font-weight:400} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(214,214,214,0.18);border-radius:2px;outline:none;margin:0} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--num);cursor:pointer;border:0} input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--num);cursor:pointer;border:0} input[type=range]:focus-visible{outline:1px solid var(--num);outline-offset:6px} .toggle-row{display:flex;align-items:center;gap:10px;margin-top:4px} .toggle-row input{width:16px;height:16px;accent-color:var(--green)} .toggle-row label{font-size:13px;color:var(--body);margin:0} .sub-field{margin-top:14px} .result{margin:26px 0 0;text-align:center;padding:24px 16px;border:1px solid var(--line);border-radius:6px;background:rgba(63,178,127,0.05)} .result .rlabel{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cap);margin-bottom:10px} .result .rbig{color:var(--white);font-weight:100;font-size:clamp(30px,7vw,54px);letter-spacing:-0.02em;line-height:1.05} .result .rsub{color:var(--body);font-size:14px;margin-top:12px;line-height:1.6} .nojs{color:var(--amber);font-size:13px} .explain{margin:30px 0 0} .explain h2{color:var(--num);font-weight:300;font-size:18px;margin:0 0 10px} .explain p{color:var(--body);font-size:14px;margin:0 0 12px;max-width:620px} .disclaimer{margin-top:26px;font-size:12px;color:var(--cap);line-height:1.7;border-top:1px solid var(--line);padding-top:18px} .cta-line{margin:26px 0 0;font-size:14px;color:var(--body)} .cta-line a{color:var(--green);text-decoration:none} .cta-line a:hover{text-decoration:underline} footer.foot{border-top:1px solid var(--line);margin-top:34px;padding:22px 0 44px;color:var(--cap);font-size:12px} footer.foot .row{display:flex;gap:20px;flex-wrap:wrap;align-items:center} footer.foot a{color:var(--cap);text-decoration:none} footer.foot a:hover{color:var(--num)} footer.foot .spacer{flex:1} footer.foot .identity{margin-top:10px;font-size:11px} .other-calcs{margin-top:22px} .other-calcs .label{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--cap);margin-bottom:10px} .other-calcs a{display:inline-block;color:var(--body);font-size:13px;text-decoration:none;border:1px solid var(--line);border-radius:2px;padding:6px 11px;margin:0 8px 8px 0} .other-calcs a:hover{color:var(--num);border-color:rgba(214,214,214,0.3)} @media(max-width:400px){ .wrap{padding:0 15px} .brand{letter-spacing:0.2em;font-size:13px} .card{padding:18px 15px} }