/* ckrets.ai landing: docs frame + terminal voice; the first request
   above the fold at every width. Production changes: no web font (the strict CSP; system fallbacks), the light accent #0e7c44
   and warn #8a5d00 (4.5:1, as the task pages), the GET badge ink from the background, no search box or menu button. */
:root { --bg:#0b0b0e; --fg:#ededf0; --muted:#a8a8b2; --rule:rgba(255,255,255,.08); --surface:#141418; --accent:#3ddc84; --accent-ink:#06130b; --str:#c9d9ff; --warn:#f3c66b;
  --sans:"IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: dark; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg:#fafafa; --fg:#111114; --muted:#5e5e68; --rule:rgba(0,0,0,.1); --surface:#ffffff; --accent:#0e7c44; --accent-ink:#ffffff; --str:#1f4ba8; --warn:#8a5d00; color-scheme: light; } }
:root[data-theme="light"] { --bg:#fafafa; --fg:#111114; --muted:#5e5e68; --rule:rgba(0,0,0,.1); --surface:#ffffff; --accent:#0e7c44; --accent-ink:#ffffff; --str:#1f4ba8; --warn:#8a5d00; color-scheme: light; }
* { box-sizing:border-box } [hidden] { display:none !important }
body { margin:0; background:var(--bg); color:var(--fg); font:400 16px/26px var(--sans); -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none } a:hover, a:focus-visible { color:var(--accent) }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
code, pre, kbd, .mono { font-family:var(--mono) }
code { font-size:.9em; background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:1px 5px }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg) }
header { position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--rule) }
.nav { height:60px; display:flex; align-items:center; gap:24px; max-width:1360px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)) }
@media (min-width:1000px){ .nav{ padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px)) } }
.brand { font:600 18px/1 var(--mono); letter-spacing:-.01em; display:flex; align-items:center; gap:8px }
.brand .cur { display:inline-block; width:8px; height:17px; background:var(--accent); animation:none }
@keyframes blink { 50% { opacity:0 } } @media (prefers-reduced-motion:reduce){ .brand .cur{ animation:none } }
.toplinks { margin-left:auto; display:flex; gap:20px; font-size:14px; font-weight:500; color:var(--muted) } .toplinks a:hover{ color:var(--fg) }
.btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 16px; border-radius:8px; font:600 14px/1 var(--sans); border:1px solid var(--rule); white-space:nowrap }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent } .btn.primary:hover { color:var(--accent-ink); filter:brightness(1.06) }
@media (max-width:1060px){ .toplinks{ gap:16px } .toplinks a:not(:first-child):not(:nth-child(2)){ display:none } .nav .btn{ margin-left:0 } }
@media (max-width:700px){ .nav{ gap:12px } .nav .btn{ height:44px } }
.frame { display:grid; grid-template-columns: 220px minmax(0,1fr) 200px; gap:40px; max-width:1360px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:36px 96px }
@media (min-width:1000px){ .frame{ padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px)) } }
@media (max-width:1300px){ .frame{ grid-template-columns: 200px minmax(0,1fr); gap:32px } .rail-r{ display:none } }
@media (max-width:860px){ .frame{ grid-template-columns: minmax(0,1fr); padding-block:0 72px } .rail-l{ display:none } }
.rail { font-size:14px; line-height:22px; color:var(--muted); position:sticky; top:84px; align-self:start }
.rail h4 { margin:0 0 8px; font:500 12px/16px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.rail ul { list-style:none; margin:0 0 22px; padding:0 } .rail li { padding:4px 0 } .rail li a { display:block; overflow-wrap:anywhere }
.rail a.on { color:var(--fg); font-weight:500 } .rail-l a.on { box-shadow: inset 2px 0 0 var(--accent); padding-left:10px; margin-left:-10px }
.rail .mono { font-size:13px }
.tabs { display:none }
@media (max-width:860px){ .tabs{ display:flex; gap:6px; overflow-x:auto; padding:12px 0 12px; margin:0 0 20px; border-bottom:1px solid var(--rule); scrollbar-width:none } .tabs::-webkit-scrollbar{ display:none } .tabs a{ flex:0 0 auto; font:500 13px/1 var(--mono); padding:9px 12px; border:1px solid var(--rule); border-radius:999px; color:var(--muted); background:var(--surface) } .tabs a.on{ color:var(--accent); border-color:var(--accent) } }
.eyebrow { color:var(--accent); font:500 13px/18px var(--mono) }
h1 { font-size:56px; line-height:60px; font-weight:600; letter-spacing:-.025em; margin:10px 0 0; text-wrap:balance }
.lead { font-size:19px; line-height:30px; color:var(--muted); margin:16px 0 0; max-width:60ch } .lead b { color:var(--fg); font-weight:500 }
@media (max-width:1060px){ h1{ font-size:44px; line-height:48px } .lead{ font-size:18px; line-height:28px } }
@media (max-width:700px){ h1{ font-size:34px; line-height:38px } .lead{ font-size:17px; line-height:27px } }
.facts { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:18px; font:500 13.5px/22px var(--mono); color:var(--muted) }
.facts b { color:var(--fg); font-weight:500 } .facts a { color:var(--accent) }
.first { margin-top:26px }
.block { background:var(--surface); border:1px solid var(--rule); border-radius:8px; overflow:hidden; min-width:0; margin:0 0 14px }
.block .bar { display:flex; align-items:center; flex-wrap:wrap; padding:8px 14px; border-bottom:1px solid var(--rule); font:500 12.5px/18px var(--mono); color:var(--muted); gap:4px 16px; min-width:0 }
.block .bar span { white-space:nowrap }
.block .bar .on { color:var(--fg) } .block .bar .cap { color:var(--fg); opacity:.78 } .block .bar .ok { color:var(--accent); margin-left:auto } .block .bar .gone { color:var(--warn); margin-left:auto }
.block .bar button { margin-left:auto; background:none; border:1px solid var(--rule); color:var(--muted); border-radius:6px; font:500 12px/1 var(--mono); padding:6px 9px; cursor:pointer } .block .bar button:hover{ color:var(--fg) }
.block .bar .ok + button, .block .bar .gone + button { margin-left:0 }
@media (max-width:700px){ .block .bar .cap{ display:none } }
pre { margin:0; padding:16px 18px; font:400 14px/22px var(--mono); overflow-x:auto; color:var(--fg) }
@media (max-width:700px){ pre{ font-size:13px; line-height:20px; padding:14px } }
.p { color:var(--accent) } .k { color:var(--muted) } .s { color:var(--str) } .a { color:var(--accent) }
.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px } .two > div { min-width:0 } @media (max-width:1060px){ .two{ grid-template-columns:minmax(0,1fr) } }
.endpoint { display:flex; align-items:center; gap:10px; margin:22px 0 10px; font:500 15px/22px var(--mono); min-width:0; flex-wrap:wrap }
.method { font:600 11.5px/1 var(--mono); padding:5px 7px; border-radius:6px; background:var(--accent); color:var(--accent-ink); letter-spacing:.04em }
.method.get { background:var(--str); color:var(--bg) }
.endpoint .path { overflow-wrap:anywhere } .endpoint .k { font:400 14px/22px var(--sans) }
h2 { font-size:28px; line-height:36px; font-weight:600; letter-spacing:-.02em; margin:56px 0 8px; padding-top:28px; border-top:1px solid var(--rule) }
@media (max-width:1060px){ h2{ font-size:26px; line-height:32px } } @media (max-width:700px){ h2{ font-size:24px; line-height:30px; margin-top:44px } }
p { margin:0 0 14px; max-width:68ch }
.tbl { overflow-x:auto; border:1px solid var(--rule); border-radius:8px; margin-top:14px }
table { width:100%; border-collapse:collapse; font-size:14px; line-height:22px; font-variant-numeric:tabular-nums }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top }
th { font:500 12px/18px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
tr:last-child td { border-bottom:0 } td:first-child { font-family:var(--mono); font-size:13.5px; color:var(--muted) }
@media (max-width:700px){ .tbl table{ min-width:560px } }
.callout { border-left:3px solid var(--accent); background:var(--surface); padding:12px 16px; border-radius:0 8px 8px 0; margin:18px 0; color:var(--muted); font-size:15px; line-height:24px } .callout b { color:var(--fg); font-weight:500 }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px } @media (max-width:700px){ .grid{ grid-template-columns:minmax(0,1fr) } }
.grid a { display:block; padding:14px 16px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); min-width:0 }
.grid a strong { display:block; font:500 14px/20px var(--mono); overflow-wrap:anywhere } .grid a span { display:block; color:var(--muted); font-size:14px; line-height:21px; margin-top:4px }
.grid a:hover { border-color:var(--accent); color:var(--fg) }
.trust { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; color:var(--muted); font-size:15px; line-height:24px; margin-top:12px } .trust b { color:var(--fg); font-weight:500 } .trust p { margin:0 0 10px }
@media (max-width:700px){ .trust{ grid-template-columns:minmax(0,1fr) } }
footer { border-top:1px solid var(--rule); color:var(--muted); font-size:13px }
footer .in { max-width:1360px; margin:0 auto; display:flex; flex-wrap:wrap; gap:8px 24px; padding-block:24px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)) }
.status-dot { color:var(--accent) }
/* store a secret, by use case */
.uc { display:grid; grid-template-columns: 200px minmax(0,1fr); gap:14px; margin-top:16px; align-items:start }
.uc-list { display:flex; flex-direction:column; gap:4px; min-width:0 }
.uc-list button { text-align:left; background:none; border:1px solid transparent; border-radius:8px; padding:9px 12px; color:var(--muted); font:500 14px/20px var(--sans); cursor:pointer }
.uc-list button small { display:block; font:400 12px/16px var(--mono); color:var(--muted) }
.uc-list button:hover { color:var(--fg); background:var(--surface) }
.uc-list button[aria-selected="true"] { color:var(--fg); background:var(--surface); border-color:var(--rule); box-shadow: inset 2px 0 0 var(--accent) }
.uc-panel { min-width:0 }
.uc-panel .who { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px; font:500 13px/20px var(--mono); color:var(--muted) }
.uc-panel .who b { color:var(--fg); font-weight:500 }
.uc-panel p.say { margin:0 0 10px; font-size:15px; line-height:24px }
.uc-note { margin-top:14px; font-size:14px; line-height:22px; color:var(--muted) }
.uc-note b { color:var(--fg); font-weight:500 }
@media (max-width:860px){ .uc{ grid-template-columns:minmax(0,1fr) } .uc-list{ flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; scrollbar-width:none } .uc-list::-webkit-scrollbar{ display:none } .uc-list button{ flex:0 0 auto; border-color:var(--rule); background:var(--surface); white-space:nowrap; padding:8px 12px } .uc-list button small{ display:none } .uc-list button[aria-selected="true"]{ box-shadow:none; border-color:var(--accent); color:var(--accent) } }
.v11 { margin-top:22px } .v11 b { color:var(--fg); font-weight:500 }
.cmd { display:inline }
.callout a, .uc-note a, main p a, .endpoint .k a, .trust a { color:var(--accent); text-decoration:underline; text-underline-offset:2px }

/* the banner a test deployment shows (unused in production) */
.ckrets-stage-banner { background: #fff3cd; color: #664d03; border-bottom: 1px solid #e0c56e; padding: 8px 16px; font: 14px/1.4 system-ui, sans-serif; text-align: center; }

/* the landing as one docs system with /docs (shared header, sidebar and type), the safe reveal first */
@media (min-width:1301px){ .frame.no-r{ grid-template-columns: 220px minmax(0,1fr); max-width:1240px } }
.frame.no-r main { max-width:880px }
ul.facts { list-style:none; padding:0; margin:18px 0 0 } ul.facts li { white-space:nowrap }
@media (max-width:700px){ ul.facts li { white-space:normal } }
.status { margin:6px 0 0; font-size:15px; line-height:24px; color:var(--muted); max-width:none }
.status b, .when b { color:var(--fg); font-weight:600 }
.when { margin:14px 0 0; font-size:15px; line-height:24px; color:var(--muted); max-width:none }
pre code { font:inherit; background:none; border:0; padding:0; color:inherit }
pre code { color:var(--fg) } .block pre { color:var(--muted) } .block pre .cmd { color:var(--fg) }
@media (max-width:700px){ pre { font-size:12.5px; line-height:19px; padding:12px } }
.uc-h { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.uc-panel .who { margin-top:0 }
h3 { font-size:20px; line-height:28px; font-weight:600; margin:32px 0 8px; letter-spacing:-.01em }
.trust h3 { font-size:16px; line-height:24px; margin:18px 0 4px; color:var(--fg) } .trust > div > h3:first-child { margin-top:0 }
table.ep td:first-child { white-space:nowrap; color:var(--fg) } table.ep .method { margin-right:8px; display:inline-block; min-width:52px; text-align:center }
@media (max-width:700px){ table.ep td:first-child { white-space:normal; overflow-wrap:anywhere } .tbl table.ep{ min-width:0 } }
th[scope="row"] { font:400 13.5px/22px var(--mono); text-transform:none; letter-spacing:0; color:var(--muted) }
/* the limits table as stacked cards on a phone: no sideways scroll */
@media (max-width:700px){
  .tbl table.cards { min-width:0 } table.cards thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  table.cards tr { display:block; padding:10px 12px; border-bottom:1px solid var(--rule) } table.cards tr:last-child { border-bottom:0 }
  table.cards th[scope="row"] { display:block; padding:0 0 4px; border:0; color:var(--fg); font-weight:500 }
  table.cards td { display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; padding:2px 0; border:0; font-family:var(--sans); font-size:14px; color:var(--fg) }
  table.cards td::before { content:attr(data-label); color:var(--muted); font:400 13px/22px var(--mono) }
}
ul.errs { padding-left:1.2em; margin:0 0 14px; max-width:72ch } ul.errs li { margin:6px 0; font-size:15px; line-height:24px }
ul.errs a { color:var(--accent) }
.grid a span .u { display:inline; margin:0; color:var(--muted) }
#mcp { margin-top:16px }
.rail-l ul + .rail-h { margin-top:4px }

.status code { font-size:.85em }
.hint { margin:4px 0 0; font-size:14px; line-height:22px; color:var(--muted); max-width:none } .hint code { overflow-wrap:anywhere }
.block .bar { font-size:13px }

/* the header menu: below 1060 px the links fold into it instead of disappearing */
.menu { display:none; position:relative } .menu summary { list-style:none; cursor:pointer; font:500 14px/1 var(--sans); color:var(--fg); padding:12px 14px; border:1px solid var(--rule); border-radius:8px; min-height:44px; display:flex; align-items:center }
.menu summary::-webkit-details-marker { display:none } .menu summary::after { content:"▾"; margin-left:6px; color:var(--muted) }
.menu nav { position:absolute; right:0; top:calc(100% + 6px); z-index:30; display:flex; flex-direction:column; min-width:220px; padding:6px; background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.35) }
.menu nav a { padding:10px 12px; border-radius:6px; color:var(--fg); text-decoration:none; font-size:15px } .menu nav a:hover, .menu nav a:focus-visible { background:var(--bg) }
@media (max-width:1060px){ .nav .toplinks { display:none !important } .menu { display:block; margin-left:auto } }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.agents-strip { margin:10px 0 0; font-size:14px; line-height:22px; color:var(--muted) } .agents-strip a { color:var(--accent) }
.hero-text .status { display:inline-block; margin:0 0 14px; padding:6px 12px; border:1px solid var(--rule); border-radius:999px; background:var(--surface); font-size:13.5px; line-height:20px }
.cards3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px }
.cards3 > div { border:1px solid var(--rule); border-radius:8px; background:var(--surface); padding:14px 16px }
.cards3 h3 { font-size:15px; line-height:22px; margin:0 0 6px } .cards3 p { font-size:14px; line-height:22px; color:var(--muted); margin:0 }
.cards3 a { color:var(--accent); text-decoration:underline; text-underline-offset:2px }
@media (max-width:1100px){ .cards3 { grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:700px){ .cards3 { grid-template-columns:minmax(0,1fr) } }
#real { margin-top:40px }

/* the landing at desktop: no rail (the header carries the links), a two-column hero: the words, then the first call */
@media (min-width:861px){
  .frame.no-r { grid-template-columns:minmax(0,1fr); max-width:1200px } .frame.no-r .rail-l { display:none } .frame.no-r main { max-width:none }
  .frame.no-r main > h2, .frame.no-r main > p, .frame.no-r main > ul, .frame.no-r main > .uc, .frame.no-r main > .tbl, .frame.no-r main > .block, .frame.no-r main > .two, .frame.no-r main > .grid, .frame.no-r main > .cards3 { max-width:1000px }
}
@media (min-width:1180px){
  .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:40px; align-items:start; padding:16px 0 8px }
  .hero h1 { font-size:52px; line-height:58px } .hero .first { margin-top:6px }
}
.hero-text .status { margin-bottom:16px }
h2 { margin-top:72px } .frame.no-r main > h2 + p { margin-top:4px }

.stack .block { margin-bottom:14px }
@media (max-width:700px){ .ckrets-stage-banner { font-size:12px; line-height:16px; padding:6px 12px } }

.resp-h { margin:0; padding:10px 18px 0; font:500 12.5px/18px var(--mono); color:var(--muted); border-top:1px solid var(--rule); max-width:none }
.resp-h code { background:none; border:0; padding:0; font-size:inherit }
pre.resp { padding-top:8px } pre.resp code { color:var(--muted) }
.hero-text .status { margin:14px 0 0 }

@media (max-width:480px){ .hero-text .status { border-radius:12px } }

/* round 9: the hero leads with use cases (cards), the landing is a landing; the examples live on /docs/start */
.hero2 { padding:8px 0 4px } .hero2 h1 { font-size:46px; line-height:52px; margin:14px 0 0; max-width:22ch }
@media (max-width:1060px){ .hero2 h1 { font-size:38px; line-height:44px } } @media (max-width:700px){ .hero2 h1 { font-size:30px; line-height:36px } }
.hero2 .lead { margin-top:12px }
.uc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px }
@media (max-width:1060px){ .uc-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:600px){ .uc-grid { grid-template-columns:minmax(0,1fr) } }
.uc-card { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--rule); border-radius:10px; background:var(--surface); color:var(--fg); text-decoration:none; min-width:0 }
.uc-card:hover, .uc-card:focus-visible { border-color:var(--accent); color:var(--fg) }
.uc-card strong { font-size:16px; line-height:22px; font-weight:600 } .uc-card .for { font:500 12px/16px var(--mono); color:var(--muted) }
.uc-card .txt { font-size:14px; line-height:21px; color:var(--muted) } .uc-card .go { margin-top:auto; padding-top:6px; font:500 13px/18px var(--mono); color:var(--accent) }
.uc-card .go::after { content:" →" }
.tag { align-self:flex-start; font:600 11px/1 var(--mono); letter-spacing:.03em; padding:4px 7px; border-radius:999px; border:1px solid var(--rule) }
.tag.live { color:var(--accent); border-color:var(--accent) } .tag.planned { color:var(--warn); border-color:var(--warn) }
h2 .tag { vertical-align:middle; margin-left:8px; font-size:11px }
.also { margin:14px 0 0; font-size:14px; line-height:22px; color:var(--muted); max-width:none } .also a { color:var(--accent) }
ol.how { padding-left:1.3em; max-width:72ch } ol.how li { margin:8px 0; font-size:15px; line-height:24px; color:var(--muted) } ol.how b { color:var(--fg) }
.hero2 .status { display:inline-block; padding:6px 12px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); font-size:13.5px; line-height:20px; color:var(--muted); margin:0 }
.hero2 .status b { color:var(--fg) }
.two + .block { margin-top:0 }
pre.setup { background:var(--surface); border:1px solid var(--rule); border-radius:8px; margin:12px 0 18px }

/* Beta: a badge beside the brand on every page */
.beta { font:600 11px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--warn); border:1px solid var(--warn); border-radius:999px; padding:4px 7px; margin-left:-12px; white-space:nowrap }
.beta-note { margin:6px 0 14px; padding:10px 14px; border:1px solid var(--rule); border-left:3px solid var(--warn); border-radius:0 8px 8px 0; background:var(--surface); font-size:14px; line-height:22px; color:var(--muted); max-width:none }
.beta-note b { color:var(--fg) } .beta-note a { color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.also b { color:var(--fg); font-weight:600 }
@media (max-width:700px){ .beta { margin-left:-4px } }
@media (max-width:400px){ .nav { gap:8px } .nav .btn.primary { padding:0 12px } .menu summary { padding:12px 10px } }
@media (max-width:360px){ .brand .cur { display:none } .nav .btn.primary { font-size:13px; padding:0 9px } .beta { padding:3px 5px; font-size:10px } .menu summary { padding:12px 8px } }
/* the sixth tile of the use-case grid is the first call (no key), so the fold has a runnable call */
.uc-try { margin:0; display:flex; flex-direction:column } .uc-try pre { margin:0; padding:10px 14px; font-size:12.5px; line-height:19px; white-space:pre-wrap; overflow-wrap:anywhere }
.uc-try p { margin:auto 0 0; padding:8px 14px 12px; font-size:14px; line-height:20px; color:var(--muted) }

/* the mark (the cursor holds the e): a dark and a light image, shown by the same rules as the colour tokens */
.brand .mk { display:block; height:1.75rem; width:auto } .brand .mk-l { display:none }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .brand .mk-d { display:none } :root:not([data-theme="dark"]) .brand .mk-l { display:block } }
:root[data-theme="light"] .brand .mk-d { display:none } :root[data-theme="light"] .brand .mk-l { display:block }
@media (max-width:700px) { .brand .mk { height:1.5rem } } @media (max-width:360px) { .brand .mk { height:1rem } .beta { margin-left:-8px } }
/* the mark, a size larger (a review of the header: "a little bit bigger"): 34 px on a desktop in a 68 px bar, 30 px from
   1100 px down, 28 px on a phone; the 360 px step keeps the bar from scrolling sideways at 320 */
.nav { height:68px } .brand .mk { height:2.125rem } .beta { font-size:12px; padding:5px 8px }
@media (max-width:1100px) { .nav { height:64px } .brand .mk { height:1.875rem } }
@media (max-width:700px) { .nav { height:60px } .brand .mk { height:1.75rem } .beta { font-size:11px; padding:4px 7px } }
/* on a phone the mark takes the width the bar has left, 16 to 28 px tall, so it is as big as fits and nothing scrolls sideways */
@media (max-width:700px) { .brand .mk { height:clamp(1rem, calc((100vw - 280px) / 4), 1.75rem) } }   /* the rest of the bar takes about 273 px */
@media (min-width:401px) and (max-width:480px) { .brand .mk { height:clamp(1rem, calc((100vw - 310px) / 4), 1.75rem) } }   /* wider gaps above 400 px */
@media (max-width:360px) { .brand .mk { height:1rem } .beta { padding:3px 5px; font-size:10px } }

/* the ckrets.ai mark (".ai" added): on a phone it takes the width the bar has left at its own aspect (5.11); the typing
   file is a cell wider, so / shows the still mark at 700 px and below. The Beta badge stays in every header. */
.brand .mk-still { display:none !important }
@media (max-width:700px) { .brand .mk-anim { display:none !important } .brand .mk-still.mk-d { display:block !important }
  .brand .mk { height:clamp(.75rem, calc((100vw - 317px) / 5.11), 1.75rem) } }
@media (prefers-color-scheme: light) and (max-width:700px) { :root:not([data-theme="dark"]) .brand .mk-still.mk-d { display:none !important } :root:not([data-theme="dark"]) .brand .mk-still.mk-l { display:block !important } }
@media (max-width:700px) { :root[data-theme="light"] .brand .mk-still.mk-d { display:none !important } :root[data-theme="light"] .brand .mk-still.mk-l { display:block !important } }
@media (min-width:401px) and (max-width:480px) { .brand .mk { height:clamp(.75rem, calc((100vw - 281px) / 5.11), 1.75rem) } }
@media (min-width:361px) and (max-width:400px) { .brand .mk { height:clamp(.75rem, calc((100vw - 253px) / 5.11), 1.75rem) } }
@media (max-width:360px) { .brand .mk { height:clamp(.75rem, calc((100vw - 234px) / 5.11), 1.75rem) } .beta { margin-left:-2px } }   /* the bar's fixed parts, measured: 212 px to 360, 237 to 400, 265 to 480 ("Free key"), 301 above */
.cta-s { display:none } @media (max-width:480px) { .cta-l { display:none } .cta-s { display:inline } }

/* the formulas above assume the page's own fonts; a phone without them draws the bar's text wider (the CI runner, without
   IBM Plex or JetBrains Mono, scrolled 4 to 10 px sideways from 320 to 414). The brand is the one item that gives way: it
   shrinks only when the bar would overflow, and the mark scales down inside it, never stretched or cropped */
.nav > * { flex-shrink:0 } .nav > .brand { flex-shrink:1; min-width:0 } .brand .mk { max-width:100%; object-fit:contain; object-position:left center }