/* flux — shared stylesheet One design system for every page. Pages set their own drawing colors in a small :root block (read by JS via getCSS) and pick a theme with or . Variable contract - page :root sets: --ink (text), --muted, --accent (chrome color), --hot, plus any drawing-only colors it needs. - theme class sets: --card, --border, --track, --thumb, --thumb-bd, --shadow, --accent-ink, --bg0, --bg1. Reset follows modern-normalize; focus handling follows the WAI-ARIA APG (visible :focus-visible ring, never suppressed). No external dependencies. */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} html,body{min-height:100%} /* ---- themes ------------------------------------------------------------ */ .flux-light{ --card:#fbfdfd; --border:#d6dee3; --track:#d6dee3; --thumb:#0f1b2d; --thumb-bd:#fbfdfd; --shadow:0 18px 40px -28px rgba(15,27,45,.5); --accent-ink:#ffffff; --bg0:#f6f9fa; --bg1:#eef2f4; --bg:radial-gradient(120% 80% at 80% -10%, var(--bg0) 0%, var(--bg1) 55%); } .flux-dark{ --card:#121d2c; --border:#243345; --track:#26384c; --thumb:#e9eef3; --thumb-bd:#121d2c; --shadow:0 20px 50px -30px rgba(0,0,0,.8); --accent-ink:#06141a; --bg0:#16243a; --bg1:#0c1420; --bg:radial-gradient(120% 90% at 75% -10%, var(--bg0) 0%, var(--bg1) 60%); } .flux-dark .stage{background:#0a121d} /* ---- page shell -------------------------------------------------------- */ body{ background:var(--bg) fixed; color:var(--ink); font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; display:flex; justify-content:center; align-items:flex-start; padding:clamp(14px,3vw,40px); } .mono{font-family:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,monospace} .wrap{ width:100%; max-width:1100px; display:grid; grid-template-columns:minmax(0,1.34fr) minmax(255px,1fr); gap:clamp(16px,2.4vw,34px); } .wrap.solo{max-width:960px; display:block} /* landing page override */ /* ---- header ------------------------------------------------------------ */ header{grid-column:1/-1; margin-bottom:2px} .eyebrow{ font-family:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,monospace; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.7em; } .eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.7} h1{font-size:clamp(26px,4.4vw,40px); font-weight:600; line-height:1.04; letter-spacing:-.01em; margin:.28em 0 .2em} h1 em{font-style:italic; color:var(--title-accent, var(--accent))} .lede{font-size:15px; color:var(--muted); max-width:64ch; line-height:1.5} /* ---- stage (viz canvas frame) ----------------------------------------- */ .stage{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow); } .flux-dark .stage{box-shadow:var(--shadow)} svg{display:block; width:100%; height:auto; touch-action:none} canvas{display:block; width:100%; touch-action:none} .stage .hint{ position:absolute; left:14px; bottom:12px; font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.04em; color:var(--muted); opacity:.75; pointer-events:none; } /* ---- side panel + cards ----------------------------------------------- */ .panel{display:flex; flex-direction:column; gap:16px} .card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 17px} .card h2{ font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:12px; } .readout{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12.5px} .row{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0} .row+.row{border-top:1px dashed var(--border)} .row .k{color:var(--muted); display:flex; align-items:center; gap:7px} .row .v{font-variant-numeric:tabular-nums; font-weight:600} .dot{width:10px; height:10px; border-radius:50%; flex:none} /* ---- controls: sliders ------------------------------------------------- */ .controls{display:flex; flex-direction:column; gap:13px} .ctl label{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--muted); margin-bottom:5px; font-family:"SF Mono",ui-monospace,Menlo,monospace; letter-spacing:.02em; } .ctl label b{color:var(--ink); font-weight:600} input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--track); border-radius:3px; outline:none; margin:7px 0; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--thumb); cursor:pointer; border:2px solid var(--thumb-bd); box-shadow:0 1px 4px rgba(0,0,0,.3); } input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--thumb); cursor:pointer; border:2px solid var(--thumb-bd); } input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:6px} /* ---- controls: buttons ------------------------------------------------- */ .btns,.presets{display:flex; gap:8px; flex-wrap:wrap} .btn,.snap,.pbtn{ appearance:none; cursor:pointer; border-radius:8px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-family:"SF Mono",ui-monospace,Menlo,monospace; letter-spacing:.03em; text-transform:uppercase; transition:background .15s,color .15s; } .btn{flex:1; min-width:80px; font-size:11.5px; padding:9px 8px} .pbtn{flex:1; min-width:58px; font-size:10.5px; letter-spacing:.02em; padding:8px 6px} .snap{font-size:12px; letter-spacing:.04em; padding:9px 12px} .btn:hover,.snap:hover,.pbtn:hover,.btn.active,.pbtn.active{background:var(--accent); color:var(--accent-ink)} .btn.alt{border-color:var(--muted); color:var(--muted)} .btn.alt:hover{background:var(--muted); color:var(--accent-ink)} .toggle{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); font-family:"SF Mono",ui-monospace,Menlo,monospace; cursor:pointer; user-select:none; } .toggle input{accent-color:var(--accent); width:16px; height:16px} /* ---- legend ------------------------------------------------------------ */ .legend{display:flex; flex-direction:column; gap:9px; font-size:13px} .legend .item{display:flex; align-items:center; gap:9px; line-height:1.3} .swatch{width:15px; height:0; border-top-width:3px; border-top-style:solid; flex:none; border-radius:2px} .swatch.dashed{border-top-style:dashed} .swatch.dot{height:11px; width:11px; border-top:0; border-radius:50%} .legend code{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink)} .legend .sub{color:var(--muted)} /* ---- footnote ---------------------------------------------------------- */ .foot{ grid-column:1/-1; font-size:12.5px; color:var(--muted); line-height:1.55; border-top:1px solid var(--border); padding-top:14px; max-width:88ch; } .foot b{color:var(--ink); font-weight:600} .kbd{ font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11px; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; padding:1px 5px; } /* ---- a11y polish ------------------------------------------------------- */ a{color:var(--accent)} :where(a,button,input,summary):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } @media(max-width:760px){ .wrap{grid-template-columns:1fr} .panel{order:2} /* comfortable touch targets on small screens */ .btn,.snap,.pbtn{padding-top:11px; padding-bottom:11px} input[type=range]{height:5px} input[type=range]::-webkit-slider-thumb{width:20px; height:20px} input[type=range]::-moz-range-thumb{width:20px; height:20px} } @media(prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important} }