/* graal.codes design system + shared chrome. Warm off-white, one red accent. Header: text wordmark with room on the left, a white pill nav grouped with a red circular settings button on the right, round-dot separators. Light/dark is a token swap on . */ :root{ --bg:#fbfbf8; --surface:#ffffff; --raised:#f4f2ec; --ink:#23201b; --muted:#8b8479; --line:#ecebe4; --line-strong:#dcd9d0; --accent:#8e441d; --accent-ink:#fff8f0; --accent-weak:#f4ece2; --accent-strong:#73370f; --accent-mid:#ae6948; --sel:#8c5285; --sel-ink:#ffffff; --sel-weak:#f3eaf1; --dot:#cfccc2; --chk1:#e7e4dc; --chk2:#f2f1ec; --ok:#1f8f5f; --warn:#c2410c; --radius:14px; --radius-sm:9px; --pill:999px; --ctrl:40px; --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; --maxw:1120px; --readw:760px; --sh-sm:0 1px 3px rgba(40,35,28,.06); --sh:0 10px 30px rgba(40,35,28,.10),0 2px 6px rgba(40,35,28,.05); color-scheme:light; } html[data-theme="dark"]{ --bg:#16140f; --surface:#201d17; --raised:#282319; --ink:#f0ece2; --muted:#a39a8a; --line:#2c281f; --line-strong:#403a2e; --accent:#bd6a3e; --accent-ink:#fff8f0; --accent-weak:#33241a; --accent-strong:#dc9266; --accent-mid:#c98256; --sel:#c294bb; --sel-ink:#1c141c; --sel-weak:#2a1f29; --dot:#4a4438; --chk1:#282319; --chk2:#201d17; --ok:#3bbd84; --warn:#e07a44; --sh-sm:0 1px 3px rgba(0,0,0,.5); --sh:0 10px 30px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4); color-scheme:dark; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:16px/1.55 var(--ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} a{color:inherit} button{font:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* ---------- header (injected by chrome.js) ---------- */ .chrome{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:0 auto;padding:14px 18px;background:var(--bg)} .brand{flex:none;display:flex;flex-direction:column;line-height:1.1;text-decoration:none;color:var(--ink)} .brand .tag{font-size:9px;letter-spacing:.04em;color:var(--accent-mid)} .brand .word{font-family:var(--mono);font-size:19px;letter-spacing:-.01em} .brand .word b{color:var(--accent);font-weight:inherit} .navpill{margin-left:auto;height:46px;box-sizing:border-box;display:flex;align-items:center;background:var(--surface);border-radius:var(--pill);padding:0 8px;box-shadow:var(--sh-sm);max-width:100%;overflow:auto;scrollbar-width:none} .navpill::-webkit-scrollbar{display:none} .navpill a{text-decoration:none;color:var(--ink);font-size:14px;padding:0 14px;white-space:nowrap;border-radius:var(--pill)} .navpill a:hover{color:var(--accent-strong)} .navpill a[aria-current="page"]{color:var(--accent);font-weight:600} .navsep{flex:none;width:3px;height:17px;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.5px);background-size:3px 6px} .cog{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--sel);color:var(--sel-ink);display:grid;place-items:center;cursor:pointer;transition:filter .12s,transform .12s} .cog:hover{filter:brightness(1.05)} .cog:active{transform:scale(.96)} .cog svg{width:20px;height:20px;display:block} /* ---------- settings drawer (injected by chrome.js) ---------- */ .scrim{position:fixed;inset:0;background:rgba(10,10,8,.4);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:60} .scrim.open{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;height:100%;width:min(360px,88vw);z-index:61;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh);transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column} .drawer.open{transform:none} .drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)} .drawer header h2{margin:0;font-size:15px;font-weight:700} .drawer .close{border:0;background:none;color:var(--muted);font-size:24px;line-height:1;width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer} .drawer .close:hover{background:var(--raised);color:var(--ink)} .drawer .body{padding:4px 18px 22px;overflow:auto} .setgroup{padding:16px 0;border-bottom:1px solid var(--line)} .setgroup:last-child{border-bottom:0} .setgroup>.label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .setgroup .hint{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45} .field{width:100%;font:inherit;font-size:14px;padding:10px 11px;color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--radius-sm)} /* ---------- shared controls ---------- */ .seg{position:relative;display:inline-flex;align-items:center;height:var(--ctrl);background:var(--raised);border-radius:var(--pill);padding:0 4px;gap:2px} .seg__thumb{position:absolute;top:0;left:0;height:32px;border-radius:var(--pill);background:var(--accent);z-index:2;pointer-events:none;overflow:hidden;transition:transform .26s cubic-bezier(.34,1.1,.5,1),width .26s cubic-bezier(.34,1.1,.5,1)} .seg__thumbLabels{position:absolute;top:0;left:0;height:100%;transition:transform .26s cubic-bezier(.34,1.1,.5,1)} .seg__thumbLabels span{position:absolute;top:0;height:100%;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;color:var(--accent-ink);white-space:nowrap} .seg button{position:relative;z-index:1;border:0;background:none;color:var(--muted);font-size:13.5px;font-weight:600;height:32px;padding:0 14px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;transition:color .18s} .seg button:hover{color:var(--ink)} .seg button[aria-pressed="true"]{color:var(--muted)} .seg.hl .seg__thumb{background:var(--sel)} .seg.hl .seg__thumbLabels span{color:var(--sel-ink)} .seg.disabled{opacity:.4;pointer-events:none} .setlbl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:16px 0 7px} .toggle{display:inline-flex;align-items:center;height:var(--ctrl);border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);font-size:13.5px;font-weight:600;padding:0 16px;border-radius:var(--pill);cursor:pointer} .toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn{display:inline-block;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;padding:10px 15px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;text-align:center} .btn:hover{border-color:var(--muted)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.block{display:block;width:100%} /* ---------- content pages ---------- */ .page{max-width:var(--readw);margin:0 auto;padding:24px 18px 72px} .page h1{font-size:29px;margin:0 0 8px;letter-spacing:-.02em} .page .lead{color:var(--muted);margin:0 0 26px;font-size:17px;line-height:1.55} .cardlink{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s} .cardlink:hover{transform:translateY(-2px);box-shadow:var(--sh)} .cardlink h2{font-size:18px;margin:0 0 5px} .cardlink p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5} .linkcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s} .linkcard:hover{transform:translateY(-2px);box-shadow:var(--sh)} .linkcard h2{font-size:18px;margin:0 0 5px} .linkcard h2 a{color:inherit;text-decoration:none} .linkcard h2 a::after{content:"";position:absolute;inset:0;z-index:1} .linkcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5} .linkcard p a{position:relative;z-index:2;color:var(--accent);font-weight:600;text-decoration:none} .linkcard p a:hover{text-decoration:underline} .soon{opacity:.7} .soon .pill{display:inline-block;font-size:11px;border:1px solid var(--line-strong);border-radius:var(--pill);padding:1px 9px;margin-left:6px;color:var(--muted);vertical-align:middle} .backlink{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;margin-bottom:16px} .backlink:hover{color:var(--accent-strong)} .guide{max-width:var(--readw)} .guide h2{font-size:21px;margin:32px 0 10px;letter-spacing:-.01em} .guide h3{font-size:16px;margin:22px 0 6px} .guide p{margin:0 0 13px;line-height:1.6} .guide ul{margin:0 0 14px;padding-left:20px} .guide code{font-family:var(--mono);background:var(--raised);padding:1px 6px;border-radius:5px;font-size:13.5px} .guide .slots{list-style:none;padding:0;margin:10px 0 16px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .guide .slots li{display:flex;gap:12px;align-items:baseline;margin:0;padding:9px 14px;border-top:1px solid var(--line)} .guide .slots li:first-child{border-top:0} .guide .slots b{font-variant-numeric:tabular-nums;color:var(--accent);width:14px} .guide .cta{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;padding:12px 20px;border-radius:var(--radius-sm);margin-top:10px} /* ---------- sprite primitives (checker reserved for the editor preview) ---------- */ .checker{background-image: linear-gradient(45deg,var(--chk1) 25%,transparent 25%),linear-gradient(-45deg,var(--chk1) 25%,transparent 25%), linear-gradient(45deg,transparent 75%,var(--chk1) 75%),linear-gradient(-45deg,transparent 75%,var(--chk1) 75%); background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--chk2)} .badge-new{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sel-ink);background:var(--sel);border-radius:6px;padding:2px 8px;box-shadow:var(--sh-sm)} footer.site{max-width:var(--maxw);margin:0 auto;padding:26px 18px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)} footer.site b{color:var(--ink);font-weight:600} @media (max-width:560px){ .chrome{flex-wrap:wrap;row-gap:10px;padding:10px 12px;gap:8px} .brand{order:1} .brand .word{font-size:16px} .cog{order:2;margin-left:auto} .navpill{order:3;flex-basis:100%;margin-left:0} .navpill a{padding:0 12px} .page{padding:20px 14px 56px} .page h1{font-size:25px} } @media (hover:none){ .seg button,.toggle,.btn{padding-top:10px;padding-bottom:10px} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } @media (prefers-reduced-motion:reduce){ .seg__thumb,.seg__thumbLabels{transition:transform .22s cubic-bezier(.34,1.1,.5,1),width .22s cubic-bezier(.34,1.1,.5,1)!important} } @view-transition{navigation:auto}