/* Ported verbatim from the reference implementation. The only change: --amber is renamed --accent so each harness can override it via a style="--accent:…" custom property on . Additions live at the end. */ :root{ --ink:#14161a; --panel:#1a1d23; --panel-2:#20242b; --rule:#2b313a; --text:#e4e7ea; --muted:#8b94a1; --accent:#e8a33d; --cyan:#6fb2c9; --rose:#dd6f6f; --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif; --cond:'IBM Plex Sans Condensed', var(--sans); } *{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:110px} body{ margin:0; background:var(--ink); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:var(--cyan); text-decoration:none} a:hover{text-decoration:underline} code, kbd, .cmd{font-family:var(--mono)} /* ---- prompt bar (signature) ---- */ header{ position:sticky; top:0; z-index:20; background:linear-gradient(180deg, var(--ink) 78%, rgba(20,22,26,0)); padding:18px 24px 22px; } .bar{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:10px 14px; } .bar .chev{color:var(--accent); font-family:var(--mono); font-weight:600} .bar input{ flex:1; background:transparent; border:0; outline:0; color:var(--text); font-family:var(--mono); font-size:14px; } .bar input::placeholder{color:#5d6674} .count{font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap} .hintkey{ font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--rule); border-radius:4px; padding:1px 5px; } .wrap{max-width:1180px; margin:0 auto; padding:0 24px 96px} /* ---- masthead ---- */ .masthead{padding:10px 0 30px; border-bottom:1px solid var(--rule); margin-bottom:28px} .masthead h1{ font-family:var(--cond); font-weight:600; font-size:34px; letter-spacing:.02em; margin:0 0 6px; text-transform:uppercase; } .masthead h1 span{color:var(--accent)} .meta{color:var(--muted); font-size:13px; max-width:70ch} .meta code{color:var(--text)} /* ---- nav rail ---- */ nav{ display:flex; flex-wrap:wrap; gap:6px; margin:20px 0 34px; } nav a{ font-family:var(--mono); font-size:12px; color:var(--muted); border:1px solid var(--rule); border-radius:999px; padding:4px 10px; } nav a:hover{color:var(--accent); border-color:var(--accent); text-decoration:none} /* ---- sections ---- */ section{margin:0 0 44px; scroll-margin-top:110px} h2{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.09em; font-size:14px; color:var(--accent); margin:0 0 4px; display:flex; align-items:baseline; gap:10px; } h2::after{content:""; flex:1; height:1px; background:var(--rule)} .lede{color:var(--muted); font-size:13px; margin:0 0 14px; max-width:78ch} h3{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:22px 0 8px; } /* ---- rows ---- */ .rows{border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--panel)} .row{ display:grid; grid-template-columns:minmax(210px, 300px) 1fr; gap:18px; padding:9px 14px; border-top:1px solid var(--rule); align-items:baseline; } .row:first-child{border-top:0} .row:hover{background:var(--panel-2)} .row .cmd{ color:var(--text); font-size:13px; font-weight:500; cursor:pointer; word-break:break-word; } .row .cmd:hover{color:var(--accent)} .row .cmd.copied::after{content:" copied"; color:var(--cyan); font-size:11px} .row .desc{color:#b9c0c9; font-size:13px} .row .desc em{color:var(--muted); font-style:normal} .row .desc code{background:var(--panel-2); border:1px solid var(--rule); border-radius:3px; padding:0 4px; font-size:12px} .danger .cmd{color:var(--rose)} .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--rule); border-radius:3px; padding:0 4px; margin-left:6px; color:var(--muted); vertical-align:1px; white-space:nowrap; } .tag.skill{color:var(--cyan); border-color:#33525e} .tag.flow{color:var(--accent); border-color:#5c4520} kbd{ background:var(--panel-2); border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px; padding:1px 6px; font-size:12px; color:var(--text); white-space:nowrap; } pre{ background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:14px; overflow:auto; font-family:var(--mono); font-size:12.5px; color:#c9d1d9; margin:0 0 14px; } pre .c{color:var(--muted)} pre .k{color:var(--accent)} .grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px} .empty{display:none; color:var(--muted); font-family:var(--mono); font-size:13px; padding:14px} .hidden{display:none !important} footer{color:var(--muted); font-size:12px; border-top:1px solid var(--rule); padding-top:16px} @media (max-width:820px){ .row{grid-template-columns:1fr; gap:4px} .grid2{grid-template-columns:1fr} header{padding:12px 16px} .wrap{padding:0 16px 60px} } @media print{ body{background:#fff; color:#111} header, nav{display:none} .rows{background:#fff; border-color:#ccc} .row{break-inside:avoid; border-color:#eee} .row .desc{color:#333} h2{color:#111} } @media (prefers-reduced-motion:no-preference){ .row{transition:background .12s ease} } /* ---- additions (not in the reference implementation) ---- */ /* NEW pill on rows added within the last 30 days */ .tag.new{color:var(--accent); border-color:var(--accent)} /* stale badge in the masthead and on index cards */ .badge-stale{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--rose); border-radius:3px; padding:0 4px; margin-left:8px; color:var(--rose); vertical-align:2px; white-space:nowrap; } /* "what changed" strip under the masthead */ .changed{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:9px 14px; margin:0 0 24px; font-size:13px; color:var(--muted); } .changed .when{font-family:var(--mono); font-size:12px; color:var(--accent)} .delta{font-family:var(--mono); font-size:12px} .delta.add{color:var(--cyan)} .delta.del{color:var(--rose)} /* index + changes pages reuse .rows; these cover their extras */ .wrap--pad{padding-top:48px} .row .cmd a{color:inherit} .row .cmd a:hover{text-decoration:none} .backlink{font-family:var(--mono); font-size:12px} /* index cards — the whole card is the link; each carries its harness accent */ .cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin:0 0 36px; } .card{ display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:22px 20px 18px; color:var(--text); } .card:hover{background:var(--panel-2); border-color:var(--accent); text-decoration:none} .card:hover .card-name{color:var(--accent)} .card-id{font-family:var(--mono); font-size:12px; color:var(--muted)} .card-id .chev{color:var(--accent); font-weight:600} .card-name{font-family:var(--cond); font-weight:600; font-size:24px; letter-spacing:.02em; line-height:1.2} .card-tagline{font-size:13px; color:#b9c0c9} .card-meta{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:10px} @media (prefers-reduced-motion:no-preference){ .card{transition:background .12s ease, border-color .12s ease} .card-name{transition:color .12s ease} } @media print{ .changed{background:#fff; border-color:#ccc} .card{background:#fff; border-color:#ccc; color:#111} .card-tagline{color:#333} } /* ---- site nav: cross-harness rail on every page ---- On the sheet page this sits inside the sticky header but is NOT itself sticky (only .bar is) — so the sticky region stays exactly as tall as it was and the 110px scroll offsets above keep working. */ header{position:static} .bar{position:sticky; top:12px} .header--plain{padding:14px 24px; border-bottom:1px solid var(--rule)} .sitenav{ max-width:1180px; margin:0 auto 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; } .site-home{color:var(--text); font-weight:600; white-space:nowrap} .site-home:hover{color:var(--accent); text-decoration:none} .site-home .chev{color:var(--accent)} .site-sep{width:1px; height:14px; background:var(--rule); flex:none} .site-links{display:flex; gap:4px; flex-wrap:wrap} .site-link{ color:var(--muted); padding:3px 9px; border:1px solid transparent; border-radius:999px; white-space:nowrap; } .site-link::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.5; margin-right:6px; vertical-align:1px; } .site-link:hover{color:var(--accent); border-color:var(--rule); text-decoration:none} .site-link:hover::before{opacity:1} .site-link.is-current{color:var(--accent); border-color:var(--accent)} .site-link.is-current::before{opacity:1} /* ---- per-harness tabs: sheet / cookbook / changes ---- */ .tabs{display:flex; gap:2px; margin:0 0 26px; border-bottom:1px solid var(--rule)} .tab{ font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--muted); padding:8px 14px; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; } .tab:hover{color:var(--text); text-decoration:none} .tab.is-current{color:var(--accent); border-bottom-color:var(--accent)} /* ---- cookbook ---- */ .recipe{ background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:20px 22px; margin:0 0 16px; } .recipe h3{ font-family:var(--cond); font-weight:600; font-size:18px; letter-spacing:.01em; text-transform:none; color:var(--text); margin:0 0 6px; } .recipe-when{color:#b9c0c9; font-size:13px; margin:0 0 14px; max-width:78ch} .recipe-refs{font-family:var(--mono); font-size:11px; color:var(--muted); margin:0 0 18px} .recipe-refs a{ color:var(--muted); border:1px solid var(--rule); border-radius:999px; padding:2px 8px; margin-left:4px; } .recipe-refs a:hover{color:var(--accent); border-color:var(--accent); text-decoration:none} .tag.difficulty{color:var(--cyan); border-color:#33525e; margin-left:8px; vertical-align:3px} .steps{list-style:none; counter-reset:step; margin:0; padding:0} .step{counter-increment:step; position:relative; padding-left:30px; margin:0 0 18px} .step:last-child{margin-bottom:0} .step::before{ content:counter(step); position:absolute; left:0; top:0; font-family:var(--mono); font-size:11px; color:var(--accent); border:1px solid var(--rule); border-radius:50%; width:19px; height:19px; display:grid; place-items:center; } .step > p{margin:0 0 10px; font-size:13px; color:#b9c0c9} .step > p code{ background:var(--panel-2); border:1px solid var(--rule); border-radius:3px; padding:0 4px; font-size:12px; } .codeblock{margin:0} .code-file{ font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--panel-2); border:1px solid var(--rule); border-bottom:0; border-radius:8px 8px 0 0; padding:6px 12px; } .codeblock pre{background:var(--panel-2); margin:0} .code-file + pre{border-radius:0 0 8px 8px} pre .f{color:var(--cyan)} pre .add{color:var(--cyan)} pre .del{color:var(--rose)} .recipe-why{ border-left:2px solid var(--accent); padding:2px 0 2px 12px; color:var(--muted); font-size:13px; margin:18px 0 0; max-width:78ch; } .recipe-why strong{color:var(--text)} .recipe-links{font-family:var(--mono); font-size:11px; color:var(--muted); margin:12px 0 0} @media (max-width:820px){ .header--plain{padding:12px 16px} .sitenav{gap:8px} .tabs{overflow-x:auto; scrollbar-width:none} .recipe{padding:16px 14px} } @media (prefers-reduced-motion:no-preference){ .site-link, .tab{transition:color .12s ease, border-color .12s ease} .site-link::before{transition:opacity .12s ease} } @media print{ .sitenav, .tabs, .header--plain{display:none} .recipe{background:#fff; border-color:#ccc; break-inside:avoid} .recipe h3{color:#111} .recipe-when, .step > p{color:#333} .codeblock pre, .code-file{background:#f7f7f7; border-color:#ccc; color:#111} .recipe-why{color:#333} }