/* ========================================================================== Goontek — streaming-rows layout, ONE structural base, 10 theme skins. Every mock file sets data-theme="..." on . Content lives in stream.js, so all ten variants show identical information and differ only in design. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--body);font-size:15px;line-height:1.5; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} ::-webkit-scrollbar{height:9px;width:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--cardLine);border-radius:99px} /* --------------------------------------------------------------- nav ------- */ .gk-nav{ position:fixed;top:0;left:0;right:0;z-index:80; margin-inline:var(--navInset);margin-top:var(--navTop); background:var(--navBg);backdrop-filter:blur(16px); border:var(--borderW) solid var(--navLine);border-radius:var(--navRadius); box-shadow:var(--navShadow); } .gk-nav-in{display:flex;align-items:center;gap:22px;padding:var(--navPad)} .gk-logo{ font-family:var(--title);font-weight:var(--logoWeight);font-size:21px; letter-spacing:var(--logoSpacing);color:var(--accent);white-space:nowrap; } .gk-logo small{ display:block;font:600 9.5px/1 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--dim);margin-top:3px; } /* TEK stays neutral while GOON takes the accent color */ .gk-logo .tek{color:var(--ink)} /* the O's are drawn artwork (see the LOGOS block in stream.js); each variant carries its own width/height inline so it lands on the cap height, and the margin cancels the theme's letter-spacing so a wide-tracked wordmark keeps the two O's touching */ .gk-logo .oo{ display:inline-block;vertical-align:-.01em; margin:0 calc(var(--logoSpacing) * -1 + .03em); overflow:visible; } .gk-links{display:flex;gap:var(--navGap);font-size:13.6px;color:var(--ink2)} .gk-links a{padding:4px 0;border-bottom:1px solid transparent} .gk-links a:hover{color:var(--accent2);border-color:var(--accent2)} .gk-links a.on{color:var(--ink);border-color:var(--accent)} /* shown only while the bar's search field is hidden (see the 1180px query) */ .gk-link-search{display:none} .gk-right{margin-left:auto;display:flex;align-items:center;gap:12px} .gk-search{ display:flex;align-items:center;gap:8px;background:var(--card);border:var(--borderW) solid var(--cardLine); border-radius:var(--pill);padding:8px 14px;color:var(--dim);font-size:13px;min-width:180px; } .gk-search b{color:var(--accent2);font-family:var(--mono);font-size:11px;letter-spacing:.1em} .badge18{ font:700 10px/1 var(--mono);letter-spacing:.14em;padding:6px 8px;border-radius:var(--badgeR); border:var(--borderW) solid var(--accent);color:var(--accent2); } .credits{ font:700 11px/1 var(--mono);letter-spacing:.08em;color:var(--dim); border:var(--borderW) solid var(--cardLine);border-radius:var(--pill);padding:7px 11px; } .avatar{ width:32px;height:32px;border-radius:var(--pill);display:grid;place-items:center; font:700 12.5px/1 var(--body);background:var(--accent);color:var(--onAccent);letter-spacing:.02em; } .btn{ font:inherit;font-weight:650;font-size:13.8px;cursor:pointer; padding:11px 18px;border-radius:var(--btnR); background:var(--btnBg);color:var(--btnInk); border:var(--borderW) solid var(--btnLine); transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; } .btn:hover{background:var(--btnBgHover);border-color:var(--accent);color:var(--btnInkHover)} .btn.pri{background:var(--accent);color:var(--onAccent);border-color:var(--accent)} .btn.pri:hover{background:var(--accentHover);border-color:var(--accentHover);color:var(--onAccent);transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{color:var(--accent2);border-color:var(--accent2);background:transparent} .btn.sm{padding:8px 13px;font-size:12.6px} /* -------------------------------------------------------------- hero ------- */ .hero{position:relative;min-height:var(--heroH);display:flex;align-items:flex-end;overflow:hidden} .hero-bg{position:absolute;inset:0;background:var(--bg2)} .hero-bg img{width:100%;height:100%;object-fit:cover;filter:var(--imgFilter);z-index:1;position:relative} .hero-bg::after{ content:"";position:absolute;inset:0;z-index:2;background:var(--scrim); } .hero-duo{position:absolute;inset:0;z-index:3;background:var(--duo);mix-blend-mode:color;pointer-events:none} .hero-in{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;padding:var(--heroPad)} .hero-copy{max-width:var(--heroW)} .kicker{ display:flex;align-items:center;gap:12px;font:700 11px/1 var(--mono); letter-spacing:.2em;text-transform:uppercase;color:var(--accent2); } .kicker b{background:var(--accent);color:var(--onAccent);padding:6px 9px;border-radius:var(--badgeR);letter-spacing:.14em} .kicker i{font-style:normal;color:var(--dim)} .h-title{ font-family:var(--title);font-size:var(--titleSize);line-height:1.02; letter-spacing:var(--titleSpacing);font-weight:var(--titleWeight); margin:16px 0 14px;color:var(--heroInk); } .h-sub{ font-family:var(--title);font-size:var(--subSize);font-weight:var(--h2Weight); color:var(--accent2);margin:-6px 0 14px;letter-spacing:var(--titleSpacing); } .meta-row{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; color:var(--dim);font-size:13px;margin-bottom:16px; } .meta-row .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase} .match{color:var(--good);font-weight:700} .chip{border:var(--borderW) solid var(--line);padding:3px 8px;font-size:11.6px;border-radius:var(--badgeR);color:var(--ink2)} .chip.hot{border-color:var(--accent);color:var(--accent2)} .syn{max-width:var(--synW);color:var(--ink2);font-size:var(--synSize);line-height:1.6;margin:0 0 24px} .syn b{color:var(--ink);font-weight:650} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .hero-note{margin-top:18px;color:var(--dim);font-size:12.6px;max-width:var(--synW)} .hero-note span{color:var(--accent2);font-family:var(--mono);font-size:11px;letter-spacing:.08em} /* --------------------------------------------------------- number strip --- */ .numbers{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px; max-width:var(--maxw);margin:0 auto;padding:30px var(--gutter) 6px; } .num-card{ background:var(--card);border:var(--borderW) solid var(--cardLine); border-radius:var(--radius);padding:20px;box-shadow:var(--shadow); } .num-card b{display:block;font-family:var(--title);font-size:29px;letter-spacing:var(--titleSpacing);line-height:1} .num-card span{ display:block;margin-top:8px;font:700 10.5px/1.5 var(--mono); letter-spacing:.14em;text-transform:uppercase;color:var(--dim); } /* -------------------------------------------------------------- rows ------- */ .rows{padding:var(--rowsTop) 0 10px} .row{padding:22px 0} .row-h{ display:flex;align-items:baseline;gap:14px; max-width:var(--maxw);margin:0 auto 14px;padding:0 var(--gutter); } .row-h h2{ font-family:var(--title);font-size:var(--h2Size);font-weight:var(--h2Weight); letter-spacing:var(--titleSpacing);color:var(--heroInk); } .row-h span{color:var(--dim);font-size:12.8px} .row-h .more{ margin-left:auto;font:700 11px/1 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--accent2);white-space:nowrap; } .track{ display:flex;gap:var(--tileGap);overflow-x:auto;scroll-snap-type:x mandatory; padding:10px var(--gutter) 26px;max-width:var(--maxw);margin:0 auto; scrollbar-width:thin; } .track::-webkit-scrollbar{height:8px} .track::-webkit-scrollbar-thumb{background:var(--cardLine)} .tile{flex:0 0 var(--tileW);scroll-snap-align:start;cursor:pointer;transition:transform .2s ease} .tile:hover{transform:scale(var(--hoverScale))} .art{ position:relative;height:var(--artH);border-radius:var(--radius);overflow:hidden; background:var(--card2);border:var(--borderW) solid var(--cardLine);box-shadow:var(--shadow); } .art img{width:100%;height:100%;object-fit:cover;filter:var(--imgFilter);transition:transform .35s ease;position:relative;z-index:1} .tile:hover .art img{transform:scale(1.06)} .art .duo{position:absolute;inset:0;z-index:2;background:var(--duo);mix-blend-mode:color;pointer-events:none} .art .tag,.art .ep,.art .prog{position:relative;z-index:3} .art .tag{ position:absolute;top:10px;left:10px;font:700 10px/1 var(--mono); letter-spacing:.14em;text-transform:uppercase; background:var(--tagBg);color:var(--tagInk);padding:6px 8px;border-radius:var(--badgeR); } .art .ep{ position:absolute;top:10px;right:10px;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; background:var(--tagBg);color:var(--tagInk);padding:6px 8px;border-radius:var(--badgeR); } .art .prog{ position:absolute;left:10px;right:10px;bottom:10px;height:4px;border-radius:99px;background:var(--progTrack); } .art .prog i{display:block;height:100%;border-radius:99px;background:var(--accent)} .art .play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:44px;height:44px;border-radius:var(--pill);display:grid;place-items:center; background:var(--playBg);color:var(--playInk);font-size:14px;opacity:0;transition:opacity .2s ease;z-index:3; } .tile:hover .play{opacity:1} .tile h3{ margin:12px 0 5px;font-family:var(--rowTitle);font-size:var(--tileTitle); font-weight:650;letter-spacing:var(--titleSpacing);line-height:1.3; color:var(--heroInk); } .tile h3 em{font-style:normal;color:var(--dim);font:700 10.5px/1 var(--mono);letter-spacing:.12em;margin-left:7px;text-transform:uppercase} .tile p{margin:0;color:var(--dim);font-size:var(--tileText);line-height:1.5} .tile .mini{ display:flex;align-items:center;gap:10px;margin-top:8px; font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim); } .tile .mini .r{color:var(--accent2)} .tile .mini .ok{color:var(--good)} /* top-ten portrait tiles */ .row-top .tile{flex-basis:calc(var(--tileWPort) + 56px);display:flex;align-items:flex-end;gap:0} .row-top .tile:hover{transform:none} .t100-body{flex:1;min-width:0;padding-bottom:2px} .row-top .art{height:var(--artHPort)} .row-top .tile h3{margin-top:10px} .num{ font-family:var(--title);font-weight:800;font-size:78px;line-height:.78; letter-spacing:-.04em;color:var(--numFill); -webkit-text-stroke:var(--numStroke);margin-right:-16px; position:relative;z-index:4; } .row-top .t100-body:hover .art img{transform:scale(1.05)} /* ------------------------------------------------------------- band -------- */ .band{ display:grid;grid-template-columns:repeat(var(--bandCols),1fr);gap:14px; max-width:var(--maxw);margin:36px auto 0;padding:0 var(--gutter); } .bcard{ background:var(--card);border:var(--borderW) solid var(--cardLine); border-radius:var(--radius);padding:22px;box-shadow:var(--shadow); } .bcard .n{font:700 11px/1 var(--mono);letter-spacing:.2em;color:var(--accent2)} .bcard h3{font-family:var(--title);font-size:18px;margin:13px 0 9px;font-weight:var(--h2Weight);letter-spacing:var(--titleSpacing)} .bcard p{margin:0;color:var(--dim);font-size:13.6px;line-height:1.55} /* ----------------------------------------------------------- pricing ------- */ .sec{max-width:var(--maxw);margin:0 auto;padding:56px var(--gutter) 4px} .sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px} .sec-h h2{font-family:var(--title);font-size:var(--h2Size);font-weight:var(--h2Weight);letter-spacing:var(--titleSpacing)} .sec-h h2 + p{margin:8px 0 0;color:var(--dim);font-size:14px} .sec-h .mono{font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .plan{ background:var(--card);border:var(--borderW) solid var(--cardLine); border-radius:var(--radius);padding:26px;display:flex;flex-direction:column; box-shadow:var(--shadow);position:relative; } .plan.best{border-color:var(--accent);background:var(--card2)} .plan .flag{ position:absolute;top:-11px;left:24px;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; background:var(--accent);color:var(--onAccent);padding:6px 9px;border-radius:var(--badgeR); } .plan h3{font-family:var(--title);font-size:15px;letter-spacing:.06em;text-transform:var(--caps);color:var(--accent2)} .plan .amt{font-family:var(--title);font-size:40px;font-weight:800;letter-spacing:var(--titleSpacing);margin:14px 0 4px;line-height:1;color:var(--heroInk)} .plan .amt small{font-size:13px;font-weight:600;color:var(--dim);letter-spacing:0} .plan .per{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .plan ul{margin:20px 0 22px;display:grid;gap:10px;font-size:13.7px;color:var(--ink2)} .plan li{padding-left:20px;position:relative} .plan li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700} .plan .btn{margin-top:auto;width:100%;text-align:center} .plan .fine{margin:12px 0 0;font-size:12px;color:var(--dim);text-align:center} /* ------------------------------------------------------------ footer ------- */ .gk-foot{ border-top:var(--borderW) solid var(--cardLine);margin-top:60px; background:var(--footBg); } .gk-foot-in{max-width:var(--maxw);margin:0 auto;padding:40px var(--gutter) 44px} .fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:26px} .fabout .gk-logo{margin-bottom:14px;font-size:19px} .fabout p{color:var(--dim);font-size:13.4px;margin:0 0 14px;max-width:38ch} .fabout .stamp{ display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; border:var(--borderW) solid var(--cardLine);border-radius:var(--badgeR); padding:7px 10px;color:var(--dim); } .fcols h4{ font:700 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase; color:var(--dim);margin-bottom:14px; } .fcols a,.fcols span.lk{display:block;color:var(--ink2);font-size:13.4px;padding:5px 0;cursor:pointer} .fcols a:hover{color:var(--accent2)} .legal{ margin-top:32px;padding-top:20px;border-top:var(--borderW) solid var(--cardLine); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; color:var(--dim);font-size:12.4px; } .legal b{color:var(--ink2);font-weight:600} /* ------------------------------------------------------------ responsive --- */ @media(max-width:1180px){ .gk-search,.credits{display:none} } @media(max-width:960px){ .gk-links,.gk-search,.credits{display:none} .numbers,.plans,.band,.fcols{grid-template-columns:1fr} .band{--bandCols:1} .numbers{grid-template-columns:1fr 1fr} .fcols{grid-template-columns:1fr 1fr} .h-title{font-size:calc(var(--titleSize) * .62)} } @media(max-width:640px){ .numbers{grid-template-columns:1fr} .fcols{grid-template-columns:1fr} } /* ========================================================================== THEMES — ten color schemes, each with its own small style shifts. ========================================================================== */ /* shared defaults set by theme blocks; these are the neutral fallbacks */ :root{ --bg:#0a0a0d;--bg2:#141419;--ink:#f5f5f7;--ink2:#d6d6dd;--dim:#9a9aa6;--line:#2a2a33; --card:#141419;--card2:#1c1c23;--cardLine:#26262f;--accent:#e50914;--accentHover:#f6121d; --accent2:#f5c518;--onAccent:#ffffff;--good:#46d369; --tagBg:rgba(0,0,0,.66);--tagInk:#ffffff;--progTrack:rgba(255,255,255,.24); --btnBg:rgba(255,255,255,.12);--btnInk:#ffffff;--btnBgHover:rgba(255,255,255,.22);--btnInkHover:#ffffff;--btnLine:transparent; --playBg:rgba(255,255,255,.9);--playInk:#0b0b0f; --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --title:var(--body); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --rowTitle:var(--body); --radius:6px;--btnR:6px;--badgeR:4px;--pill:999px; --borderW:1px;--tileW:230px;--tileWPort:180px;--tileGap:12px;--artH:130px;--artHPort:266px; --titleSize:64px;--subSize:22px;--synSize:16.5px;--synW:60ch;--h2Size:20px;--tileTitle:14.5px;--tileText:12.7px; --heroH:92vh;--heroW:640px;--heroPad:120px var(--gutter) 84px; --maxw:1460px;--gutter:46px;--rowsTop:-58px;--bandCols:4; --navInset:0px;--navTop:0px;--navRadius:0px;--navPad:16px 46px;--navGap:22px; --navBg:rgba(10,10,13,.86);--navLine:transparent;--navShadow:none; --logoWeight:800;--logoSpacing:-.04em; --h2Weight:700;--titleWeight:800;--titleSpacing:-.03em;--hoverScale:1.04;--caps:uppercase; --imgFilter:none;--duo:transparent;--shadow:none; --heroInk:#ffffff;--numFill:transparent;--numStroke:2px rgba(255,255,255,.5); --footBg:transparent; --scrim:linear-gradient(90deg,rgba(10,10,13,.97) 4%,rgba(10,10,13,.88) 36%,rgba(10,10,13,.45) 66%,rgba(10,10,13,.8) 100%),linear-gradient(0deg,rgba(10,10,13,1) 1%,rgba(10,10,13,0) 46%); } /* ---------- 01 NOIR RED — the reference: flat, confident, red on black ----- */ [data-theme="noir"]{ --bg:#0a0a0d;--bg2:#151519;--ink:#f7f7f9;--ink2:#d8d8de;--dim:#9b9ba7; --card:#15151a;--cardLine:#272730;--accent:#e50914;--accentHover:#f6121d;--accent2:#f5c518; --maxw:1500px;--gutter:44px;--heroH:94vh;--radius:6px;--btnR:6px; } /* ---------- 02 VIOLET BLOOM — floating glass nav, glow, softer corners ----- */ [data-theme="violet"]{ --bg:#0a0714;--bg2:#150f26;--ink:#f3efff;--ink2:#d9d2f5;--dim:#9c95bd; --card:rgba(255,255,255,.05);--card2:#181129;--cardLine:rgba(255,255,255,.12); --accent:#a855f7;--accentHover:#b975ff;--accent2:#22d3ee;--good:#34d399; --radius:18px;--btnR:999px;--badgeR:999px;--tileW:244px;--tileGap:16px;--artH:140px; --navInset:16px;--navTop:14px;--navRadius:18px;--navPad:14px 24px; --navBg:rgba(20,14,36,.72);--navLine:rgba(255,255,255,.12);--navShadow:0 20px 50px -30px #000; --shadow:0 18px 40px -28px #000; --btnBg:rgba(255,255,255,.08);--btnBgHover:rgba(255,255,255,.16); --scrim:linear-gradient(90deg,rgba(10,7,20,.97) 4%,rgba(10,7,20,.86) 34%,rgba(24,12,44,.5) 66%,rgba(10,7,20,.85) 100%),linear-gradient(0deg,rgba(10,7,20,1) 1%,rgba(10,7,20,0) 48%); } [data-theme="violet"] .btn.pri{box-shadow:0 0 26px -4px rgba(168,85,247,.75)} [data-theme="violet"] .gk-logo{text-shadow:0 0 18px rgba(168,85,247,.6)} /* the shipped lockup is an SVG, so the violet glow rides on a filter instead of on a text shadow — same halo, one layer down */ [data-theme="violet"] .gk-logo svg.gk-lockup{filter:drop-shadow(0 0 12px rgba(168,85,247,.55))} [data-theme="violet"] .tile:hover .art{box-shadow:0 0 0 1px var(--accent),0 18px 46px -20px rgba(168,85,247,.6)} /* ---------- 03 DEEP SONAR — hairlines, mono labels, squared, teal --------- */ [data-theme="sonar"]{ --bg:#04121a;--bg2:#0a202c;--ink:#e8f8ff;--ink2:#b9dced;--dim:#7ba3b6; --card:#0a1b26;--cardLine:#123443;--accent:#00d4ff;--accentHover:#4fe3ff;--accent2:#7cf5c4;--good:#4ade80; --radius:3px;--btnR:3px;--badgeR:2px;--tileW:222px;--artH:124px;--hoverScale:1.03; --titleSpacing:.01em;--caps:uppercase;--h2Size:18px;--tileTitle:14px;--tileText:12.4px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --card2:#0d2430;--tagBg:rgba(4,18,26,.85);--tagInk:#bff4ff; --scrim:linear-gradient(90deg,rgba(4,18,26,.96) 3%,rgba(4,18,26,.8) 34%,rgba(4,18,26,.35) 68%,rgba(4,18,26,.9) 100%),linear-gradient(0deg,rgba(4,18,26,1) 1%,rgba(4,18,26,0) 50%); } [data-theme="sonar"] .h-title{text-transform:uppercase;font-family:var(--mono);font-weight:700;--titleSize:52px} [data-theme="sonar"] .track{gap:14px} /* ---------- 04 CHAMPAGNE — serif display, gold hairlines, near-black ------- */ [data-theme="champagne"]{ --bg:#0d0b08;--bg2:#1a1510;--ink:#f4ecdb;--ink2:#ddd2bb;--dim:#a2967c; --card:#171310;--cardLine:#2b2418;--accent:#d4af37;--accentHover:#e8c964;--accent2:#f0d98a;--good:#a3c98a; --radius:2px;--btnR:2px;--badgeR:2px;--tileW:236px;--artH:132px; --title:Georgia,"Iowan Old Style","Times New Roman",serif; --titleWeight:400;--titleSpacing:-.01em;--h2Weight:400;--logoWeight:600;--logoSpacing:.3em; --onAccent:#241b04;--tagBg:rgba(13,11,8,.75);--tagInk:#f0d98a;--playBg:rgba(212,175,55,.92);--playInk:#241b04; --numStroke:1px rgba(212,175,55,.7);--gutter:52px; --scrim:linear-gradient(90deg,rgba(13,11,8,.97) 4%,rgba(13,11,8,.86) 34%,rgba(13,11,8,.4) 66%,rgba(13,11,8,.86) 100%),linear-gradient(0deg,rgba(13,11,8,1) 1%,rgba(13,11,8,0) 48%); } [data-theme="champagne"] .h-title{font-style:italic} [data-theme="champagne"] .plan h3{letter-spacing:.24em} [data-theme="champagne"] .kicker{letter-spacing:.3em} /* ---------- 05 EMERALD LOUNGE — deep green, generous radius, soft glow ---- */ [data-theme="emerald"]{ --bg:#06120e;--bg2:#0c2119;--ink:#eafff6;--ink2:#c2ead9;--dim:#83b3a1; --card:#0d2019;--cardLine:#173a2d;--accent:#10b981;--accentHover:#25d09a;--accent2:#a7f3d0;--good:#7ee7a2; --radius:22px;--btnR:999px;--badgeR:999px;--tileW:252px;--tileGap:15px;--artH:142px;--hoverScale:1.035; --card2:#12291f;--tagBg:rgba(6,18,14,.7);--tagInk:#c8ffe6; --shadow:0 20px 44px -30px #000; --scrim:linear-gradient(90deg,rgba(6,18,14,.97) 4%,rgba(6,18,14,.84) 34%,rgba(6,18,14,.42) 68%,rgba(6,18,14,.88) 100%),linear-gradient(0deg,rgba(6,18,14,1) 1%,rgba(6,18,14,0) 48%); } [data-theme="emerald"] .btn.pri{box-shadow:0 14px 30px -16px rgba(16,185,129,.9)} [data-theme="emerald"] .num-card{border-radius:16px} /* ---------- 06 EMBER PRESS — 2px borders, zero radius, uppercase, orange -- */ [data-theme="ember"]{ --bg:#100e0a;--bg2:#1b1710;--ink:#fff4e4;--ink2:#e6d6bd;--dim:#a4917a; --card:#17140e;--cardLine:#3a2f1d;--accent:#ff6a00;--accentHover:#ff8330;--accent2:#ffd166;--good:#a3e635; --radius:0px;--btnR:0px;--badgeR:0px;--borderW:2px;--tileW:234px;--artH:130px;--hoverScale:1.02; --h2Weight:800;--titleWeight:900;--caps:uppercase;--h2Size:19px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --onAccent:#100e0a;--tagBg:rgba(16,14,10,.8);--tagInk:#ffd166; --scrim:linear-gradient(90deg,rgba(16,14,10,.97) 3%,rgba(16,14,10,.84) 34%,rgba(16,14,10,.36) 68%,rgba(16,14,10,.9) 100%),linear-gradient(0deg,rgba(16,14,10,1) 1%,rgba(16,14,10,0) 48%); } [data-theme="ember"] .h-title{text-transform:uppercase;letter-spacing:-.01em} [data-theme="ember"] .row-h h2,.row-h .more,.bcard h3,.plan h3,.fcols h4{text-transform:uppercase} [data-theme="ember"] .tile:hover{transform:translateY(-3px)} [data-theme="ember"] .num{font-size:72px} /* ---------- 07 ARCTIC LIGHT — the light theme: paper white, hot rose ----- */ [data-theme="arctic"]{ --bg:#f4f5f7;--bg2:#e9ebef;--ink:#0d0f14;--ink2:#2f3542;--dim:#5f6879; --card:#ffffff;--card2:#ffffff;--cardLine:#dfe3ea;--line:#d6dae2; --accent:#e11d48;--accentHover:#f0295a;--accent2:#2563eb;--good:#0f9d58; --tagBg:rgba(13,15,20,.82);--tagInk:#ffffff;--progTrack:rgba(13,15,20,.18); --btnBg:rgba(13,15,20,.06);--btnInk:#0d0f14;--btnBgHover:rgba(13,15,20,.12);--btnInkHover:#0d0f14;--btnLine:transparent; --onAccent:#ffffff;--playBg:rgba(255,255,255,.94); --heroInk:#0d0f14;--numFill:#ffffff;--numStroke:2px rgba(13,15,20,.7); --radius:14px;--btnR:10px;--badgeR:8px;--tileW:238px;--artH:134px;--hoverScale:1.03; --shadow:0 18px 40px -30px rgba(15,20,35,.45);--navShadow:0 10px 30px -24px rgba(15,20,35,.5); --navBg:rgba(255,255,255,.86);--navLine:rgba(13,15,20,.08);--footBg:#ffffff;--gutter:46px; --scrim:linear-gradient(90deg,rgba(244,245,247,.98) 4%,rgba(244,245,247,.9) 34%,rgba(244,245,247,.42) 66%,rgba(244,245,247,.82) 100%),linear-gradient(0deg,rgba(244,245,247,1) 1%,rgba(244,245,247,0) 52%); } [data-theme="arctic"] .art{border-width:1px} [data-theme="arctic"] .btn.ghost{border-color:rgba(13,15,20,.22)} [data-theme="arctic"] .art .tag{font-weight:700} /* ---------- 08 BUBBLEGUM — playful magenta, big radius, chunky chips ------ */ [data-theme="bubblegum"]{ --bg:#180a14;--bg2:#2a1024;--ink:#ffeaf6;--ink2:#f4c8e3;--dim:#c08fab; --card:rgba(255,255,255,.06);--card2:#261024;--cardLine:rgba(255,255,255,.14); --accent:#ff4fa3;--accentHover:#ff70b6;--accent2:#ffd166;--good:#5ee6a8; --radius:26px;--btnR:999px;--badgeR:999px;--tileW:258px;--tileGap:16px;--artH:148px;--hoverScale:1.045; --navInset:14px;--navTop:12px;--navRadius:999px;--navPad:13px 22px; --navBg:rgba(38,16,36,.75);--navLine:rgba(255,255,255,.14);--navShadow:0 20px 46px -30px #000; --titleSpacing:-.02em;--h2Weight:800;--logoWeight:900; --onAccent:#2a0a1c;--tagBg:rgba(24,10,20,.7);--tagInk:#ffd9ec; --shadow:0 20px 44px -30px #000; --scrim:linear-gradient(90deg,rgba(24,10,20,.97) 4%,rgba(24,10,20,.84) 32%,rgba(46,12,38,.44) 66%,rgba(24,10,20,.86) 100%),linear-gradient(0deg,rgba(24,10,20,1) 1%,rgba(24,10,20,0) 48%); } [data-theme="bubblegum"] .tile h3{font-size:15.5px;font-weight:750} [data-theme="bubblegum"] .art .tag{font-size:10.5px;padding:7px 11px} [data-theme="bubblegum"] .btn.pri{background:linear-gradient(120deg,#ff4fa3,#ff8a5c);border-color:transparent} /* ---------- 09 MONO LIME — monochrome, duotone images, one acid accent ---- */ [data-theme="mono"]{ --bg:#0c0c0c;--bg2:#161616;--ink:#f2f2f2;--ink2:#c9c9c9;--dim:#8a8a8a; --card:#161616;--card2:#1e1e1e;--cardLine:#2e2e2e;--line:#2e2e2e; --accent:#c8ff00;--accentHover:#d8ff4d;--accent2:#ffffff;--good:#c8ff00; --onAccent:#0c0c0c;--tagBg:rgba(12,12,12,.8);--tagInk:#ffffff;--progTrack:rgba(255,255,255,.25); --radius:2px;--btnR:2px;--badgeR:0px;--borderW:1px;--tileW:226px;--artH:128px;--hoverScale:1.02; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --imgFilter:grayscale(1) contrast(1.08);--duo:rgba(200,255,0,.5); --caps:uppercase;--h2Weight:800;--titleWeight:900;--titleSpacing:.01em; --numStroke:2px rgba(255,255,255,.65); --scrim:linear-gradient(90deg,rgba(12,12,12,.97) 3%,rgba(12,12,12,.86) 34%,rgba(12,12,12,.4) 66%,rgba(12,12,12,.9) 100%),linear-gradient(0deg,rgba(12,12,12,1) 1%,rgba(12,12,12,0) 48%); } [data-theme="mono"] .h-title{text-transform:uppercase;font-family:var(--mono);font-size:54px;letter-spacing:-.02em} [data-theme="mono"] .row-h h2,.row-h .more,.kicker,.bcard h3,.fcols h4,.plan h3{text-transform:uppercase} [data-theme="mono"] .tile:hover .art{border-color:var(--accent)} [data-theme="mono"] .num-card b{font-family:var(--mono)} /* ---------- 10 MIDNIGHT INDIGO — editorial blue, wide gutters, data-first -- */ [data-theme="indigo"]{ --bg:#080d1a;--bg2:#111a30;--ink:#e9eefc;--ink2:#c3cde8;--dim:#8291b4; --card:#101a30;--card2:#16223d;--cardLine:#22304f;--line:#22304f; --accent:#3b82f6;--accentHover:#5b9bff;--accent2:#93c5fd;--good:#4ade80; --radius:10px;--btnR:8px;--badgeR:6px;--tileW:228px;--artH:128px;--hoverScale:1.035; --gutter:56px;--rowsTop:-64px;--h2Size:21px; --onAccent:#ffffff;--tagBg:rgba(8,13,26,.8);--tagInk:#dbeafe; --shadow:0 20px 44px -32px #000; --navBg:rgba(8,13,26,.82);--footBg:#0b1224;--bandCols:4; --scrim:linear-gradient(90deg,rgba(8,13,26,.97) 4%,rgba(8,13,26,.85) 32%,rgba(17,26,48,.4) 66%,rgba(8,13,26,.88) 100%),linear-gradient(0deg,rgba(8,13,26,1) 1%,rgba(8,13,26,0) 48%); } [data-theme="indigo"] .kicker{letter-spacing:.26em} [data-theme="indigo"] .num-card{border-left:3px solid var(--accent)} [data-theme="indigo"] .sec-h h2{letter-spacing:-.02em} /* ========================================================================== SITE PAGES — the multi-page build on the noir skin. Everything below is driven by the same theme variables as the rows above, so the interior pages inherit whatever skin is switched on. All of it is structural: cards, chapter lists, the reader, forms, documents. ========================================================================== */ /* ------------------------------------------------------------- page ------- */ /* --navH is measured in stream.js: the bar wraps to two or three rows on a narrow window, and a fixed offset would either clip the page or leave a gap */ .page{max-width:var(--maxw);margin:0 auto;padding:var(--navH, 104px) var(--gutter) 24px} .page.after-hero{padding-top:52px} .page.tight{max-width:980px} .crumb{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px; font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim); } .crumb a:hover{color:var(--accent2)} .crumb i{font-style:normal;color:var(--cardLine)} .page-kicker{ font:700 10.4px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--dim);margin:2px 0 13px; } .page-h{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap} .page-h h1{font-family:var(--title);font-size:38px;font-weight:var(--titleWeight);letter-spacing:var(--titleSpacing)} .page-h .acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .say{color:var(--dim);font-size:14px;max-width:68ch;margin:12px 0 0} .say b{color:var(--ink2);font-weight:600} .rule{height:var(--borderW);background:var(--cardLine);margin:24px 0 26px;border:0} .sec-t{font-family:var(--title);font-size:21px;font-weight:var(--h2Weight);letter-spacing:var(--titleSpacing)} .sec-h2{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 16px} .sec-h2 .more{margin-left:auto;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent2)} .blk{margin-top:44px} .pager{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px} /* ------------------------------------------------------------ cards ------- */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:18px} .cards.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .cards.two{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))} .card{ position:relative;display:flex;flex-direction:column;overflow:hidden; background:var(--card);border:var(--borderW) solid var(--cardLine);border-radius:var(--radius); box-shadow:var(--shadow);transition:transform .2s ease,border-color .2s ease; } .card:hover{transform:translateY(-3px);border-color:var(--accent)} /* one link owns the card body, so the whole surface is the target and the title stops being the only clickable part of a card that reads as a button */ .card-hit{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none} .card-hit:hover h3{color:var(--accent2)} .card .shot{position:relative;aspect-ratio:3/4;background:var(--card2);overflow:hidden} .card.land .shot{aspect-ratio:16/9} .card .shot img{width:100%;height:100%;object-fit:cover;filter:var(--imgFilter)} .card .shot .tag,.card .shot .ep{ position:absolute;top:9px;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; background:var(--tagBg);color:var(--tagInk);padding:6px 8px;border-radius:var(--badgeR);z-index:3; } .card .shot .tag{left:9px} .card .shot .ep{right:9px} .card .bd{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1} .card .by{font:700 10.4px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)} .card h3{font-family:var(--rowTitle);font-size:15px;font-weight:650;line-height:1.3;letter-spacing:var(--titleSpacing)} .card h3 a:hover{color:var(--accent2)} .card p{margin:0;color:var(--dim);font-size:12.8px;line-height:1.5} .card .foot{ margin-top:auto;padding-top:10px;display:flex;gap:12px;flex-wrap:wrap;align-items:center; font:700 10.4px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim); } .card .foot .star{color:var(--accent2)} .card .foot .ok{color:var(--good)} .card .row-btns{display:flex;gap:9px;margin-top:12px} .card .row-btns .btn{flex:1;text-align:center;padding:9px 12px;font-size:12.6px} /* the one control that has to sit inside a tile without nesting in its link */ .add{ position:absolute;top:9px;right:9px;z-index:6;width:31px;height:31px; display:grid;place-items:center;cursor:pointer; background:rgba(0,0,0,.62);color:#fff; border:1px solid rgba(255,255,255,.3);border-radius:var(--pill); font:700 15px/1 var(--body);transition:background .18s ease,border-color .18s ease,color .18s ease; } .add:hover{border-color:var(--accent);color:var(--accent2)} .add.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)} /* a tile is a column so its add chip sits on the floor of the tile: in a row of tiles with different copy lengths the chips then line up */ .tile{position:relative;display:flex;flex-direction:column} .tile-hit{display:block;flex:1} /* ----------------------------------------------------------- filters ------ */ .filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 24px} .pills{display:flex;gap:8px;flex-wrap:wrap} .pill{ font:700 10.6px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; border:var(--borderW) solid var(--cardLine);border-radius:var(--badgeR); padding:9px 11px;color:var(--dim);background:transparent;cursor:pointer; } .pill:hover{color:var(--ink);border-color:var(--accent2)} .pill.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)} .sortbox{display:flex;align-items:center;gap:9px;margin-left:auto} .sortbox span{font:700 10.4px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .sortbox select{ background:var(--card);color:var(--ink);border:var(--borderW) solid var(--cardLine); border-radius:var(--radius);padding:9px 11px;font:inherit;font-size:13px;cursor:pointer; } .count{font:700 10.4px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:auto} /* ------------------------------------------------------ chapters ---------- */ .chap{ display:flex;align-items:center;gap:16px;padding:15px 4px; border-bottom:var(--borderW) solid var(--cardLine); } .chap:hover{background:var(--card2)} a.chap{color:inherit;text-decoration:none} a.chap:hover .t{color:var(--accent2)} .chap .n{flex:none;width:34px;font:800 12.4px/1 var(--mono);color:var(--dim)} .chap .body{min-width:0;flex:1} .chap .t{font-size:14.6px;font-weight:600;display:block} .chap .t a:hover{color:var(--accent2)} .chap .sub{color:var(--dim);font-size:12.6px;margin-top:4px;display:block} .chap .m{ flex:none;font:700 10.3px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--dim);white-space:nowrap; } .chap.cur{border-left:2px solid var(--accent);padding-left:14px} .chap.cur .n{color:var(--accent)} .chap.cur .m{color:var(--accent2)} .chap.done .t{color:var(--dim)} /* --------------------------------------------------------- reader -------- */ .reader{ background:var(--card);border:var(--borderW) solid var(--cardLine); border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden; } .reader-head{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:15px 20px;border-bottom:var(--borderW) solid var(--cardLine);background:var(--card2); } .reader-head .ttl{font-family:var(--title);font-size:15px;font-weight:650} .reader-head .meta{font:700 10.4px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)} .reader-head .sp{flex:1} .prog{height:3px;background:var(--progTrack);border-radius:99px;overflow:hidden} .prog i{display:block;height:100%;background:var(--accent)} /* --------------------------------------------------------- transcript ---- The chapter reads as a conversation, modeled on Apple Messages: blue bubbles for you, gray for the character, centered system notes, iMessage timestamps, and a typing pill with the three-dot animation. */ .turns{padding:22px 16px;display:grid;gap:3px;max-height:62vh;overflow-y:auto;scroll-behavior:smooth} .turn{max-width:76%;min-width:64px;display:grid;gap:2px;position:relative} .turn.them{justify-self:start} .turn.me{justify-self:end} .turn .who{display:none} .turn p{ margin:0;font-size:15.1px;line-height:1.45;color:var(--ink); padding:8px 13px;border-radius:19px; } .turn.them p{background:var(--card2);border:var(--borderW) solid var(--cardLine);border-bottom-left-radius:6px} .turn.them + .turn.them p{border-top-left-radius:6px} .turn.me p{background:var(--accent);color:var(--onAccent);border-bottom-right-radius:6px} .turn.me + .turn.me p{border-top-right-radius:6px} .turn.narr{justify-self:center;max-width:88%;margin:12px 0 6px} .turn.narr p{background:transparent;border:var(--borderW) dashed var(--cardLine);color:var(--dim);font-size:12.6px;text-align:center;border-radius:14px;padding:7px 13px} .turn .stamp{font:500 10.6px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--dim);padding:0 6px} .turn.me .stamp{text-align:right} .turn.day-sep{justify-self:center;max-width:none;margin:10px 0 4px} .turn.day-sep p{background:transparent;border:0;color:var(--dim);font:600 11.4px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:center;border-radius:0;padding:0} .composer{border-top:var(--borderW) solid var(--cardLine);padding:14px 16px 16px;display:grid;gap:11px;background:var(--card2)} .composer .choices{display:flex;gap:8px;flex-wrap:wrap} .composer .choices-note{ width:100%;font:700 10.2px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase; color:var(--dim);margin-bottom:2px; } .choice{ font:inherit;font-size:13px;font-weight:550;cursor:pointer;text-align:left; background:transparent;color:var(--accent2);border:1px solid var(--cardLine); border-radius:999px;padding:8px 13px; } .choice:hover{border-color:var(--accent);color:var(--ink)} .composer form{display:flex;gap:9px;align-items:flex-end} .composer textarea{ flex:1;min-height:38px;max-height:132px;resize:none;font:inherit;font-size:14.8px;line-height:1.45; background:var(--bg2);color:var(--ink);border:var(--borderW) solid var(--cardLine); border-radius:19px;padding:9px 15px; } .composer textarea:focus{outline:none;border-color:var(--accent)} /* the round send button that rides the composer's end, Messages style */ .composer .send{ flex:none;width:38px;height:38px;min-width:38px;padding:0;border-radius:999px; display:grid;place-items:center;font-size:19px;line-height:1; } .composer .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .composer .row .fine{color:var(--dim);font-size:12.4px;margin:0} .composer .row .btn:last-child{margin-left:auto} .typing{justify-self:start;display:inline-flex;gap:4px;align-items:center;background:var(--card2);border:var(--borderW) solid var(--cardLine);border-radius:19px;border-bottom-left-radius:6px;padding:11px 14px} .typing i{width:7px;height:7px;border-radius:99px;background:var(--dim);display:block;animation:gk-bubble 1.2s ease-in-out infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s} @keyframes gk-bubble{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}} @media (prefers-reduced-motion:reduce){.typing i{animation:none}} /* --------------------------------------------------------- layout -------- */ .split{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:34px;align-items:start} .split.narrow{grid-template-columns:minmax(0,1fr) 268px} /* minmax(0,1fr), not 1fr: a grid track keeps an automatic minimum by default, and the chapter list's min-content width was pushing the whole page wider than the viewport on a phone */ @media(max-width:1080px){.split,.split.narrow{grid-template-columns:minmax(0,1fr)}} .side{ background:var(--card);border:var(--borderW) solid var(--cardLine); border-radius:var(--radius);padding:19px;box-shadow:var(--shadow); } .side + .side{margin-top:18px} .side h3{ font:700 10.4px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase; color:var(--dim);margin-bottom:15px; } .side .kv{display:grid;gap:11px;font-size:13.4px} .side .kv div{display:flex;gap:12px;justify-content:space-between;color:var(--ink2)} .side .kv b{font-weight:650;color:var(--ink);text-align:right} .side .btn{width:100%;text-align:center;margin-top:8px} /* a wrapper for the control after a .links list: width:100% promotes a bare inline element to a grid item of the list's parent grid context and it lands on the last link's row, overlapping its text by 9px */ .side-act{display:block;margin-top:8px} .side-act .btn{width:100%;text-align:center} .side .links{display:grid;gap:2px} .side .links a{display:block;padding:7px 0;font-size:13.4px;color:var(--ink2);border-bottom:var(--borderW) solid var(--cardLine)} .side .links a:hover{color:var(--accent2)} .side .links a.on{color:var(--accent2)} .hero.mid{--heroH:460px} .hero.slim{--heroH:390px} .hero-in{padding-top:max(120px, calc(var(--navH, 104px) + 18px))} .hero .hero-copy .syn{margin-bottom:20px} /* ---------------------------------------------------------- stats -------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px} .stat{background:var(--card);border:var(--borderW) solid var(--cardLine);border-radius:var(--radius);padding:19px 20px} .stat b{display:block;font-family:var(--title);font-size:27px;letter-spacing:var(--titleSpacing);line-height:1} .stat span{display:block;margin-top:9px;font:700 10.3px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} /* ---------------------------------------------------------- forms -------- */ .form{display:grid;gap:17px;max-width:470px} .form.wide{max-width:none} .field{display:grid;gap:8px} .field label{font:700 10.4px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:14.6px;background:var(--bg2);color:var(--ink); border:var(--borderW) solid var(--cardLine);border-radius:var(--radius);padding:13px 14px; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .field .hint{color:var(--dim);font-size:12.4px} .field .err{color:#ff9aa2;font-size:12.6px;font-weight:600} .field.bad input,.field.bad select{border-color:#e50914} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.two-col{grid-template-columns:1fr}} .check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink2);line-height:1.5;cursor:pointer} .check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--accent)} .formacts{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .switch{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 0;border-bottom:var(--borderW) solid var(--cardLine)} .switch .lbl{font-size:13.9px;font-weight:600} .switch .sub{color:var(--dim);font-size:12.6px;margin-top:5px;max-width:52ch} .badge{ font:700 10.3px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; border:var(--borderW) solid var(--cardLine);border-radius:var(--badgeR);padding:8px 10px;color:var(--ink2); background:transparent; /* a