/* HisarBlok — default theme, public stylesheet.
 *
 * Everything here is driven by design tokens on :root. A site restyles the whole thing by
 * redefining a handful of variables in its own stylesheet — no need to rewrite or fight
 * specificity. Every class is namespaced `hb-` so it can never collide with a site's own CSS.
 *
 * Module stylesheets (blog, forum, forms, comments, members) are zero-specificity fallbacks
 * written with :where(); the rules here always win over them, whatever order they load in.
 *
 * The one ornament is the rampart: a notched rule under the header and over the footer, and a
 * solid offset "block" behind the hero image. Everything else stays quiet.
 *
 * Copyright (C) KodHisar Yazılım Hizmetleri. Licensed under AGPL-3.0-or-later.
 */

/* ================================================================ tokens */
:root{
  /* colour */
  --hb-bg:        #ffffff;
  --hb-bg-alt:    #f0f3f2;   /* stone: shaded sections, the footer */
  --hb-fg:        #1a2227;   /* ink */
  --hb-muted:     #52606a;
  --hb-line:      #d8dfdd;
  --hb-accent:    #0d6b5c;   /* verdigris */
  --hb-accent-fg: #ffffff;
  --hb-card:      #ffffff;
  --hb-mark:      #c8962e;   /* brass: ornament only, never text */
  --hb-accent-soft: color-mix(in srgb, var(--hb-accent) 10%, var(--hb-bg));
  --hb-code-bg:   #1d272c;
  --hb-code-fg:   #e3ebe8;
  --hb-focus:     #1f6fd1;
  --hb-danger:    #a3261b;
  --hb-ok:        #1d6b35;
  /* The edge of a text box, a select, a textarea: a boundary a person has to find (WCAG 1.4.11), so
     at least 3:1 against the page on both --hb-bg and --hb-bg-alt. Derived, so a theme that sets its
     own --hb-muted and --hb-bg gets a matching edge without naming it. */
  --hb-field-line: color-mix(in srgb, var(--hb-muted) 75%, var(--hb-bg));

  /* aliases the module stylesheets have always read; kept in step with the names above */
  --hb-ink:       var(--hb-fg);
  --hb-on-accent: var(--hb-accent-fg);

  /* shape and rhythm */
  --hb-radius:  6px;
  --hb-gap:     1.5rem;
  --hb-section: clamp(3rem, 2rem + 4vw, 5.5rem);
  --hb-measure: 72rem;       /* page width */
  --hb-wide:    62rem;       /* forum, lists */
  --hb-text:    42rem;       /* reading column, about 70 characters */
  --hb-gutter:  clamp(1rem, .5rem + 2vw, 2rem);
  --hb-block:   14px;        /* offset of the solid block behind the hero image */

  /* type — system faces only; nothing is fetched from anywhere */
  --hb-font:         system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --hb-font-display: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", "DejaVu Serif", Georgia, serif;
  --hb-font-mono:    ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --hb-size:    1.0625rem;   /* body text, 17px */
  --hb-leading: 1.65;
  --hb-small:   .875rem;
  --hb-h1:      clamp(2.15rem, 1.35rem + 3.1vw, 3.9rem);
  --hb-h2:      clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem);
  --hb-h3:      1.25rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --hb-bg:        #121b1f;
    --hb-bg-alt:    #18252a;
    --hb-fg:        #e4ebe9;
    --hb-muted:     #9db0ad;
    --hb-line:      #2b3b40;
    --hb-accent:    #5cc2ab;
    --hb-accent-fg: #06201b;
    --hb-card:      #16232a;
    --hb-mark:      #d4a849;
    --hb-code-bg:   #0c1316;
    --hb-code-fg:   #dfe8e5;
    --hb-focus:     #7fb6ff;
    --hb-danger:    #ff8a7a;
    --hb-ok:        #7fd49a;
    --hb-field-line: color-mix(in srgb, var(--hb-muted) 60%, var(--hb-bg));
  }
}

/* ================================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.hb-site{margin:0;background:var(--hb-bg);color:var(--hb-fg);font:400 var(--hb-size)/var(--hb-leading) var(--hb-font);
  font-kerning:normal;text-rendering:optimizeLegibility;overflow-wrap:break-word}
.hb-site img,.hb-site svg,.hb-site video{max-width:100%;height:auto}
.hb-site a{color:var(--hb-accent);text-decoration-thickness:.08em;text-underline-offset:.18em}
.hb-site a:hover{text-decoration-thickness:.14em}
.hb-site h1,.hb-site h2,.hb-site h3,.hb-site h4{font-family:var(--hb-font-display);font-weight:700;line-height:1.15;
  letter-spacing:-.012em;color:var(--hb-fg);text-wrap:balance}
.hb-site h1{font-size:var(--hb-h1)}
.hb-site h2{font-size:var(--hb-h2)}
.hb-site h3{font-size:var(--hb-h3);line-height:1.3}
.hb-site p{text-wrap:pretty}
.hb-site :focus-visible{outline:3px solid var(--hb-focus);outline-offset:2px;border-radius:2px}
.hb-site ::selection{background:color-mix(in srgb,var(--hb-accent) 28%,transparent)}
.hb-site code,.hb-site kbd,.hb-site pre,.hb-site samp{font-family:var(--hb-font-mono);font-size:.9em}

.hb-skip{position:absolute;left:1rem;top:-4rem;z-index:10;padding:.6rem 1rem;background:var(--hb-fg);color:var(--hb-bg)!important;
  border-radius:var(--hb-radius);text-decoration:none;font-weight:600}
.hb-skip:focus{top:1rem}

/* ================================================================ structure */
.hb-wrap{max-width:var(--hb-measure);margin-inline:auto;padding-inline:var(--hb-gutter)}
.hb-site{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.hb-main{display:block;flex:1 0 auto}
.hb-block{padding-block:var(--hb-section);background:var(--hb-bg);color:var(--hb-fg)}
.hb-block.alt{background:var(--hb-bg-alt)}
.hb-block:not(.alt) + .hb-block:not(.alt){padding-top:0}
.hb-block.alt + .hb-block.alt{padding-top:0}
.hb-block h2{margin:0 0 .5em;max-width:24ch}
/* A full-width page's main heading: its first block heading promoted to h1, or the page title. */
.hb-block h1{margin:0 0 .5em;max-width:24ch;font-size:clamp(2rem,1.4rem + 2.2vw,3.1rem);letter-spacing:-.02em}
.hb-page-head{padding-bottom:calc(var(--hb-section) * .45)}
.hb-page-head h1{margin:0}
.hb-muted{color:var(--hb-muted);max-width:60ch}
.hb-block > .hb-wrap > .hb-muted{font-size:1.08rem;margin:0 0 .4rem}

/* The rampart: a line with square notches, drawn in the accent. */
.hb-top::after,.hb-foot::before{content:"";display:block;height:8px;
  background:
    linear-gradient(var(--hb-accent),var(--hb-accent)) left bottom / 100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--hb-accent) 0 14px,transparent 14px 28px) left top / 100% 6px no-repeat}
.hb-foot::before{transform:scaleY(-1)}

/* ================================================================ header */
.hb-top{background:var(--hb-bg);position:relative;z-index:5}
.hb-top-bar{display:flex;align-items:center;gap:.5rem 1.75rem;min-height:4.5rem;flex-wrap:wrap}
.hb-brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--hb-fg)!important;text-decoration:none;
  font-family:var(--hb-font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;margin-right:auto;padding-block:.6rem}
.hb-brand img{width:36px;height:36px;border-radius:8px}
.hb-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.6rem}
.hb-nav a{display:block;padding:.35rem 0;color:var(--hb-fg);text-decoration:none;font-weight:500;
  border-bottom:3px solid transparent}
.hb-nav a:hover{border-bottom-color:var(--hb-line)}
.hb-nav a.active{border-bottom-color:var(--hb-accent)}
.hb-top-right{display:flex;align-items:center;gap:.75rem}
.hb-lang{display:inline-grid;place-items:center;min-width:2.6rem;height:2.1rem;padding:0 .55rem;
  border:1.5px solid var(--hb-line);border-radius:var(--hb-radius);color:var(--hb-fg)!important;
  text-decoration:none;font-weight:600;font-size:.8rem;letter-spacing:.04em}
.hb-lang:hover{border-color:var(--hb-fg)}
/* The header button Settings → Site writes (`cta`): a primary button, sized to sit beside the language switch. */
.hb-top-right .hb-cta{min-height:2.4rem;padding:.5em 1em;font-size:.92rem;white-space:nowrap}
@media (max-width:420px){.hb-top-right .hb-cta{min-height:2.1rem;padding:.4em .7em;font-size:.84rem}}

/* The menu is a <details>: its summary is a real button, so Enter and Space both open it and the
   browser itself says "expanded" or "collapsed". No script. Source order is the reading order at
   every width: brand, menu, language, call to action. The open list drops below the bar.
   On a wide screen the list is always shown and the button hidden; a browser that cannot show a
   closed <details>' content (no ::details-content) keeps the button at every width instead. */
.hb-top-bar{position:relative}
.hb-menu > summary{list-style:none}
.hb-menu > summary::-webkit-details-marker{display:none}
.hb-nav-button{display:inline-flex;align-items:center;gap:.55rem;height:2.4rem;padding:0 .8rem;cursor:pointer;color:var(--hb-fg);
  border:1.5px solid var(--hb-line);border-radius:var(--hb-radius);font-weight:600;font-size:.92rem;user-select:none}
.hb-nav-button:hover{border-color:var(--hb-fg)}
.hb-nav-icon,.hb-nav-icon::before,.hb-nav-icon::after{display:block;width:16px;height:2px;background:currentColor;position:relative}
.hb-nav-icon::before,.hb-nav-icon::after{content:"";position:absolute;left:0}
.hb-nav-icon::before{top:-5px}.hb-nav-icon::after{top:5px}
.hb-menu[open] > .hb-nav-button{background:var(--hb-fg);color:var(--hb-bg);border-color:var(--hb-fg)}
.hb-menu[open] > .hb-nav-button .hb-nav-icon{background:transparent}
.hb-menu[open] > .hb-nav-button .hb-nav-icon::before{top:0;transform:rotate(45deg)}
.hb-menu[open] > .hb-nav-button .hb-nav-icon::after{top:0;transform:rotate(-45deg)}
.hb-menu > .hb-nav{display:block;position:absolute;left:0;right:0;top:100%;z-index:2;padding:.25rem var(--hb-gutter) 1rem;
  background:var(--hb-bg);border-bottom:1px solid var(--hb-line);box-shadow:0 14px 24px -18px color-mix(in srgb,var(--hb-fg) 45%,transparent)}
.hb-menu > .hb-nav ul{flex-direction:column;gap:0}
.hb-menu > .hb-nav li + li{border-top:1px solid var(--hb-line)}
.hb-menu > .hb-nav a{padding:.8rem 0;border-bottom:0;font-size:1.05rem}
.hb-menu > .hb-nav a.active{box-shadow:inset 4px 0 0 var(--hb-accent);padding-left:.9rem}
/* Narrow screens: one row — brand on the left, then menu, language and call to action on the right.
   The explicit display and margins win over a site stylesheet's plain `header nav{display:none}`
   or `header .right{margin-left:auto}` (element selectors), which would otherwise hide the open
   list or push the language and call to action onto a second row. */
@media (max-width:860px){
  .hb-top-bar{gap:0 .75rem;flex-wrap:nowrap}
  .hb-top-bar > .hb-brand{min-width:0;flex:0 1 auto}
  .hb-top-bar > .hb-brand > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hb-top-bar > .hb-menu{margin-left:auto;flex:0 0 auto}
  .hb-top-bar > .hb-top-right{margin-left:0;flex:0 0 auto}
}
/* Very narrow screens: the menu button keeps its icon and hands its word to screen readers only,
   so the brand is not squeezed into an ellipsis next to a site's own call-to-action button. */
@media (max-width:420px){
  .hb-nav-button{padding:0 .65rem}
  .hb-nav-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@supports selector(::details-content){
  @media (min-width:861px){
    .hb-menu > .hb-nav-button{display:none}
    .hb-menu::details-content{content-visibility:visible}
    .hb-menu > .hb-nav{position:static;padding:0;background:none;border:0;box-shadow:none}
    .hb-menu > .hb-nav ul{flex-direction:row;gap:.25rem 1.6rem}
    .hb-menu > .hb-nav li + li{border-top:0}
    .hb-menu > .hb-nav a{padding:.35rem 0;border-bottom:3px solid transparent;font-size:inherit}
    .hb-menu > .hb-nav a:hover{border-bottom-color:var(--hb-line)}
    .hb-menu > .hb-nav a.active{box-shadow:none;padding-left:0;border-bottom-color:var(--hb-accent)}
  }
}

/* ================================================================ footer */
.hb-foot{background:var(--hb-bg-alt);color:var(--hb-fg)}
.hb-foot-grid{display:grid;gap:1.5rem 3rem;padding-block:3rem 2.5rem;grid-template-columns:1fr;font-size:var(--hb-small);color:var(--hb-muted)}
@media (min-width:760px){ .hb-foot-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:start} }
.hb-foot-name{margin:0 0 .35rem;font-family:var(--hb-font-display);font-weight:700;font-size:1.15rem;color:var(--hb-fg)}
.hb-foot-about{margin:0 0 .6rem;max-width:44ch}
.hb-foot-left a,.hb-foot-right a,.hb-foot-nav a{color:var(--hb-fg)}
.hb-foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
/* 24px or more to tap (WCAG 2.5.8); the gap shrinks by what the padding adds, so the list keeps its rhythm */
.hb-foot-nav a{display:inline-block;padding-block:.15rem;min-width:1.5rem}
.hb-foot-right{align-self:end}
@media (min-width:760px){ .hb-foot-right{text-align:right} }

/* ================================================================ hero */
.hb-hero{padding-block:clamp(2.5rem, 1.5rem + 5vw, 6rem);background:var(--hb-bg);color:var(--hb-fg)}
.hb-hero.alt{background:var(--hb-bg-alt)}
.hb-hero-grid{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){ .hb-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} }
.hb-hero h1{margin:.2em 0 .35em;line-height:1.04;letter-spacing:-.025em;max-width:16ch}
.hb-kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:600;color:var(--hb-accent);margin:0}
.hb-kicker::before{content:"";width:22px;height:10px;flex:none;
  background:linear-gradient(var(--hb-mark),var(--hb-mark)) left bottom / 100% 4px no-repeat,
             repeating-linear-gradient(90deg,var(--hb-mark) 0 6px,transparent 6px 8px) left top / 100% 6px no-repeat}
.hb-lead{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--hb-muted);max-width:52ch;margin:0 0 1.8em}
.hb-fine{font-size:var(--hb-small);color:var(--hb-muted);margin:1.2em 0 0}
.hb-shot{display:block;width:100%;height:auto;border-radius:var(--hb-radius);border:1px solid var(--hb-line)}
.hb-hero .hb-shot{box-shadow:var(--hb-block) var(--hb-block) 0 var(--hb-accent-soft), var(--hb-block) var(--hb-block) 0 1px var(--hb-line)}
.hb-hero-media{margin:0 var(--hb-block) var(--hb-block) 0}

/* ================================================================ buttons */
.hb-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.hb-btn,.hb-site .hb-form button,.hb-site .hb-comment-form button,.hb-site .hb-forum-form button,.hb-site .hb-members-form button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:2.9rem;padding:.7em 1.35em;
  border-radius:var(--hb-radius);border:1.5px solid var(--hb-fg);background:transparent;color:var(--hb-fg);
  font:600 1rem/1.2 var(--hb-font);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.hb-btn:hover{background:var(--hb-fg);color:var(--hb-bg)}
.hb-btn-primary,.hb-site .hb-form button,.hb-site .hb-comment-form button,.hb-site .hb-forum-form button,.hb-site .hb-members-form button{
  background:var(--hb-accent);border-color:var(--hb-accent);color:var(--hb-accent-fg)}
.hb-btn-primary:hover,.hb-site .hb-form button:hover,.hb-site .hb-comment-form button:hover,.hb-site .hb-forum-form button:hover,.hb-site .hb-members-form button:hover{
  background:color-mix(in srgb,var(--hb-accent) 84%,var(--hb-fg));border-color:color-mix(in srgb,var(--hb-accent) 84%,var(--hb-fg));color:var(--hb-accent-fg)}
.hb-site a.hb-btn{color:var(--hb-fg)}
.hb-site a.hb-btn:hover{color:var(--hb-bg)}
.hb-site a.hb-btn-primary,.hb-site a.hb-btn-primary:hover{color:var(--hb-accent-fg)}

/* ================================================================ cards
   Not boxes: a heavy rule over each item, the way a printed menu separates dishes. */
.hb-grid{display:grid;gap:2.25rem var(--hb-gap);grid-template-columns:1fr;margin-top:2rem}
@media (min-width:640px){ .hb-c2,.hb-c3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .hb-c3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.hb-card{background:transparent;border-top:3px solid var(--hb-fg);padding:1.1rem 0 0;min-width:0}
.hb-block.alt .hb-card{border-top-color:var(--hb-fg)}
.hb-card h3{margin:0 0 .5em;font-size:1.35rem}
.hb-card h3 small{font-family:var(--hb-font);font-size:.8rem;font-weight:600;color:var(--hb-muted);letter-spacing:0;margin-left:.3em}
.hb-card p{margin:0 0 .7em;color:var(--hb-muted);line-height:1.6}
.hb-card p:last-child{margin-bottom:0}
.hb-card strong{color:var(--hb-fg)}
.hb-card a{color:var(--hb-accent)}
.hb-ico{font-size:1.7rem;line-height:1;margin-bottom:.6rem}

/* ================================================================ badges */
.hb-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0 0 var(--hb-section);list-style:none}
.hb-block + .hb-wrap > .hb-chips{margin-top:calc(var(--hb-section) * -.5)}
.hb-chip{display:inline-flex;align-items:center;gap:.45em;font-size:.9rem;font-weight:500;padding:.4em .85em;border-radius:var(--hb-radius);
  border:1px solid var(--hb-line);background:var(--hb-bg);color:var(--hb-fg)}
.hb-chip::before{content:"";width:6px;height:6px;background:var(--hb-mark);flex:none}

/* ================================================================ gallery */
.hb-shots{display:grid;gap:2rem var(--hb-gap);grid-template-columns:1fr;margin-top:2rem}
@media (min-width:720px){ .hb-shots{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .hb-shots:has(> figure:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .hb-shots:has(> figure:nth-child(4)):not(:has(> figure:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))} }
.hb-shots figure{margin:0;min-width:0}
.hb-shots img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--hb-radius);display:block;background:var(--hb-bg-alt)}
.hb-shots figcaption{margin-top:.6rem;font-size:var(--hb-small);color:var(--hb-muted);line-height:1.5;max-width:48ch}

/* ================================================================ prose */
.hb-prose{max-width:var(--hb-text);line-height:1.72;color:var(--hb-fg)}
.hb-prose > :first-child{margin-top:0}
.hb-prose > :last-child{margin-bottom:0}
.hb-prose h1{margin:0 0 .6em}
.hb-prose h2{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);margin:1.9em 0 .55em}
.hb-prose h3{margin:1.7em 0 .5em}
.hb-prose p,.hb-prose ul,.hb-prose ol,.hb-prose dl{margin:0 0 1.15em}
.hb-prose ul,.hb-prose ol{padding-left:1.35em}
.hb-prose li{margin:.3em 0;padding-left:.2em}
.hb-prose li::marker{color:var(--hb-accent);font-weight:700}
.hb-prose strong{font-weight:650}
.hb-prose hr{border:0;height:8px;margin:2.5em 0;
  background:repeating-linear-gradient(90deg,var(--hb-line) 0 14px,transparent 14px 28px) left center / 100% 3px no-repeat}
.hb-prose code{background:var(--hb-bg-alt);padding:.12em .38em;border-radius:4px;font-size:.88em;border:1px solid var(--hb-line)}
.hb-prose pre{background:var(--hb-code-bg);color:var(--hb-code-fg);padding:1.1rem 1.25rem;border-radius:var(--hb-radius);
  overflow:auto;line-height:1.55;font-size:.88rem;margin:0 0 1.4em;tab-size:4}
.hb-prose pre code{background:none;padding:0;border:0;font-size:inherit;color:inherit}
.hb-prose blockquote{margin:1.6em 0;padding:.1em 0 .1em 1.4rem;border-left:4px solid var(--hb-accent);
  font-family:var(--hb-font-display);font-size:1.18rem;line-height:1.55;color:var(--hb-fg)}
.hb-prose blockquote p{margin:0 0 .6em}
.hb-prose blockquote p:last-child{margin-bottom:0;font-family:var(--hb-font);font-size:var(--hb-small);color:var(--hb-muted)}
.hb-prose blockquote p:only-child{font-family:inherit;font-size:inherit;color:inherit}
.hb-prose .hb-table,.hb-prose table{margin:0 0 1.4em}
.hb-prose table{border-collapse:collapse;width:100%;font-size:.95rem;display:block;overflow-x:auto}
.hb-prose thead th{border-bottom:2px solid var(--hb-fg);font-weight:650}
.hb-prose th,.hb-prose td{border-bottom:1px solid var(--hb-line);padding:.6em .9em .6em 0;text-align:left;vertical-align:top}
.hb-prose img{display:block;max-width:100%;height:auto;border-radius:var(--hb-radius);margin:1.8em 0}
.hb-prose p > img:only-child{margin:0}
.hb-prose a{color:var(--hb-accent)}

/* A page body (Markdown pages) and the reading column */
.hb-page{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.hb-page.hb-prose{max-width:calc(var(--hb-text) + var(--hb-gutter) * 2)}
.hb-page h1{font-size:clamp(2rem,1.4rem + 2.2vw,3.1rem);letter-spacing:-.02em}

/* ================================================================ announcements */
.hb-announcements[hidden]{display:none}
.hb-announcements{padding-block:1.75rem}
.hb-announce-list{display:grid;gap:1rem}
.hb-announce{display:grid;gap:.1rem 1.5rem;grid-template-columns:1fr;padding-left:1.1rem;border-left:4px solid var(--hb-mark)}
@media (min-width:760px){ .hb-announce{grid-template-columns:11rem 1fr} .hb-announce-meta{grid-row:span 2} }
.hb-announce-meta{margin:0;font-size:var(--hb-small);color:var(--hb-muted);display:flex;flex-direction:column}
.hb-announce-meta span{font-weight:700;color:var(--hb-fg)}
.hb-site .hb-announce-title{font-size:1.2rem;margin:0;max-width:none}
.hb-announce-body{color:var(--hb-muted)}
.hb-announce-body p{margin:.2em 0 0}

/* ================================================================ release notes */
.hb-release-card{display:grid;gap:1rem 3rem;grid-template-columns:1fr;margin-top:1.5rem}
@media (min-width:860px){ .hb-release-card{grid-template-columns:15rem 1fr} }
.hb-release-version{margin:0;font-family:var(--hb-font-display);font-size:clamp(1.8rem,1.4rem + 1.5vw,2.6rem);font-weight:700;line-height:1.05;color:var(--hb-fg)}
.hb-release-channel{display:inline-block;margin-top:.6rem;font-size:.8rem;font-weight:600;padding:.25em .7em;border-radius:var(--hb-radius);
  background:var(--hb-accent);color:var(--hb-accent-fg)}
.hb-release-card .hb-prose{border-left:1px solid var(--hb-line);padding-left:clamp(0rem,-2rem + 4vw,3rem)}
@media (max-width:859px){ .hb-release-card .hb-prose{border-left:0;padding-left:0} }
.hb-release-card .hb-actions{margin-top:1.4rem}

/* ================================================================ downloads (block-download, block-download_list) */
.hb-release{margin-top:2rem;padding-top:1.4rem;border-top:3px solid var(--hb-fg)}
.hb-release + .hb-release{border-top-width:1px;border-top-color:var(--hb-line)}
.hb-release h3{margin:0 0 .9rem;font-size:1.35rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .7rem}
.hb-release h3 small{font-family:var(--hb-font);font-size:var(--hb-small);font-weight:500}
.hb-tag{display:inline-block;font-family:var(--hb-font);font-size:.75rem;font-weight:600;padding:.18em .6em;border-radius:var(--hb-radius);
  border:1px solid var(--hb-line);color:var(--hb-muted);vertical-align:middle;letter-spacing:0}
.hb-files{width:100%;border-collapse:collapse;font-size:.95rem}
.hb-files th,.hb-files td{text-align:left;padding:.75rem .9rem .75rem 0;border-bottom:1px solid var(--hb-line);vertical-align:top}
.hb-files th{font-size:.8rem;font-weight:600;color:var(--hb-muted);border-bottom-width:2px;border-bottom-color:var(--hb-fg)}
.hb-files td:nth-child(2){white-space:nowrap}
.hb-files small{color:var(--hb-muted)}
.hb-dl{font-weight:600;display:inline-block;padding-block:.2rem}
.hb-dl::before{content:"";display:inline-block;width:.7em;height:.8em;margin-right:.45em;vertical-align:-.05em;
  background:currentColor;clip-path:polygon(30% 0,70% 0,70% 45%,100% 45%,50% 100%,0 45%,30% 45%)}
.hb-sha{font-size:.72rem;word-break:break-all;color:var(--hb-muted);font-family:var(--hb-font-mono)}
.hb-notes{margin-top:1rem;color:var(--hb-muted);line-height:1.65;max-width:var(--hb-text)}
.hb-notes ul{padding-left:1.2em;margin:0}
.hb-download-cat{margin:2.5rem 0 .3rem;font-size:1.3rem}
.hb-download-list .hb-card p .hb-btn{min-height:2.5rem;padding:.55em 1.1em;font-size:.95rem;margin-right:.6rem}
@media (max-width:640px){.hb-files th:nth-child(3),.hb-files td:nth-child(3){display:none}}

/* ================================================================ blog */
.hb-posts,.hb-post{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.hb-posts-head{margin:0 0 2.5rem;padding-bottom:1rem;border-bottom:3px solid var(--hb-fg)}
.hb-posts-head h1{margin:0;font-size:clamp(2rem,1.4rem + 2.2vw,3.1rem);letter-spacing:-.02em}
.hb-posts .post-card{display:grid;gap:.4rem 2rem;grid-template-columns:1fr;padding:0 0 2rem;margin:0 0 2rem;border-top:0;border-bottom:1px solid var(--hb-line)}
.hb-posts .post-card:last-of-type{border-bottom:0}
@media (min-width:760px){
  .hb-posts .post-card.has-cover{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
  .hb-posts .post-card.has-cover .post-card-cover{grid-row:span 5}
  .hb-posts .post-card.has-cover:first-of-type{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
  .hb-posts .post-card.has-cover:first-of-type h2{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem)}
}
.hb-posts .post-card > *{grid-column:auto;margin:0}
.hb-posts .post-card-cover{display:block;border-radius:var(--hb-radius);overflow:hidden;background:var(--hb-bg-alt);align-self:start}
.hb-posts .post-card-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.hb-posts .post-card h2{font-size:1.5rem;line-height:1.2;margin:.1rem 0 .3rem}
.hb-posts .post-card h2 a{color:var(--hb-fg);text-decoration:none}
.hb-posts .post-card h2 a:hover{text-decoration:underline;text-decoration-color:var(--hb-accent)}
.hb-posts .post-card p{color:var(--hb-muted);max-width:60ch}
.post-meta{font-size:var(--hb-small);color:var(--hb-muted);margin:0}
.hb-site .post-meta{opacity:1}
.post-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0;padding:0;font-size:.85rem}
.post-tags a{display:inline-block;padding:.2em .6em;border:1px solid var(--hb-line);border-radius:var(--hb-radius);color:var(--hb-fg);
  text-decoration:none;opacity:1}
.post-tags a:hover{border-color:var(--hb-accent);color:var(--hb-accent);text-decoration:none}
.post-pager{display:flex;justify-content:space-between;gap:1rem;margin:1rem 0 0;padding-top:1.25rem;border-top:3px solid var(--hb-fg)}
.post-pager a{font-weight:600;text-decoration:none}

.hb-post{max-width:none}
.hb-post .post-head{max-width:var(--hb-text);margin:0 auto 2rem}
.hb-post .post-head h1{margin:.3em 0 .35em;font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);letter-spacing:-.025em;line-height:1.08}
.hb-post .post-lead{font-size:1.2rem;line-height:1.55;color:var(--hb-muted);margin:0}
.hb-post .post-cover{max-width:min(60rem,100%);margin:0 auto 2.5rem}
.hb-post .post-cover img{display:block;width:100%;height:auto;border-radius:var(--hb-radius)}
.hb-post > .hb-prose,.hb-post > .post-tags,.hb-post > .post-back{max-width:var(--hb-text);margin-inline:auto}
.hb-post > .post-tags{margin-top:2.5rem}
.post-back{margin-top:2rem;font-size:.95rem}
.post-back a{font-weight:600;text-decoration:none;display:inline-block;padding-block:.15rem}

/* ================================================================ comments */
.hb-site .hb-comments{max-width:calc(var(--hb-text) + var(--hb-gutter) * 2);margin:0 auto;padding:0 var(--hb-gutter) var(--hb-section)}
.hb-site .hb-comments > h2{font-size:1.5rem;padding-top:1.2rem;border-top:3px solid var(--hb-fg);margin:0 0 .5rem}
.hb-site .hb-comment{border-top:1px solid var(--hb-line);padding:1.2rem 0;display:grid;grid-template-columns:2.5rem 1fr;gap:.2rem .9rem}
.hb-site .hb-comment:first-of-type{border-top:0}
.hb-avatar{grid-row:span 2;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--hb-accent-soft);color:var(--hb-accent);font-weight:700;font-family:var(--hb-font-display);font-size:1.1rem}
.hb-site .hb-comment-who{margin:0;font-size:var(--hb-small);color:var(--hb-muted)}
.hb-site .hb-comment-who b{color:var(--hb-fg);margin-right:.5rem}
.hb-site .hb-comment-body{margin:0;line-height:1.65}
.hb-site .hb-comment-form{margin-top:1.5rem;padding:1.5rem;background:var(--hb-bg-alt);border-radius:var(--hb-radius);border:0}
.hb-site .hb-comment-form h3{margin:0 0 1rem}

/* ================================================================ forms (forms, comments, forum, members) */
.hb-site .hb-form-wrap{max-width:var(--hb-measure);margin:0 auto;padding:0 var(--hb-gutter) var(--hb-section)}
.hb-site .hb-form-wrap > *{max-width:var(--hb-text)}
.hb-site .hb-form-wrap h2{font-size:1.6rem;margin:0 0 .4rem}
.hb-site .hb-form-wrap h1{font-size:clamp(2rem,1.4rem + 2.2vw,3.1rem);letter-spacing:-.02em;margin:0 0 .4rem}
.hb-site .hb-form-intro{margin:0 0 1.5rem;color:var(--hb-muted)}
.hb-site .hb-form,.hb-site .hb-comment-form,.hb-site .hb-forum-form,.hb-site .hb-members-form{display:grid;gap:1.1rem}
.hb-site .hb-form{padding:clamp(1.25rem,.75rem + 2vw,2rem);border:1px solid var(--hb-line);border-top:3px solid var(--hb-fg);border-radius:0 0 var(--hb-radius) var(--hb-radius)}
.hb-site .hb-form label,.hb-site .hb-comment-form label,.hb-site .hb-forum-form label,.hb-site .hb-members-form label{
  display:block;margin:0;font-size:.95rem;font-weight:600;color:var(--hb-fg)}
.hb-site .hb-form label > :is(input,textarea,select),.hb-site .hb-comment-form label > :is(input,textarea),
.hb-site .hb-forum-form label > :is(input,textarea),.hb-site .hb-members-form label > input{margin-top:.4rem!important}
.hb-site label > .hb-hint{margin-left:.35rem}
.hb-site .hb-hint{font-weight:400;font-size:.85rem;color:var(--hb-muted);opacity:1}
.hb-site .hb-form input:not([type=checkbox]):not([type=radio]),.hb-site .hb-form textarea,.hb-site .hb-form select,
.hb-site .hb-comment-form input,.hb-site .hb-comment-form textarea,
.hb-site .hb-forum-form input,.hb-site .hb-forum-form textarea,
.hb-site .hb-members-form input,.hb-site .hb-search-input{
  display:block;width:100%;min-height:2.9rem;margin:0;padding:.65rem .8rem;font:400 1rem/1.4 var(--hb-font);
  color:var(--hb-fg);background:var(--hb-bg);border:1.5px solid var(--hb-field-line);border-radius:var(--hb-radius)}
.hb-site .hb-form textarea,.hb-site .hb-comment-form textarea,.hb-site .hb-forum-form textarea{min-height:8rem;resize:vertical}
.hb-site .hb-forum-form textarea{font-family:var(--hb-font-mono);font-size:.92rem}
.hb-site .hb-form select{appearance:none;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--hb-muted) 50%),linear-gradient(135deg,var(--hb-muted) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat}
.hb-site .hb-form input:focus,.hb-site .hb-form textarea:focus,.hb-site .hb-form select:focus,
.hb-site .hb-comment-form input:focus,.hb-site .hb-comment-form textarea:focus,
.hb-site .hb-forum-form input:focus,.hb-site .hb-forum-form textarea:focus,
.hb-site .hb-members-form input:focus,.hb-site .hb-search-input:focus{outline:3px solid var(--hb-focus);outline-offset:1px;border-color:var(--hb-fg)}
.hb-site .hb-form label.hb-tick{display:flex;align-items:flex-start;gap:.7rem;font-weight:400}
.hb-site .hb-form label.hb-tick input{width:1.2rem;height:1.2rem;margin:.15rem 0 0;accent-color:var(--hb-accent);flex:none}
.hb-site .hb-form button,.hb-site .hb-comment-form button,.hb-site .hb-forum-form button,.hb-site .hb-members-form button{justify-self:start}
.hb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* read by assistive technology, not drawn: a table caption the heading above already shows */
.hb-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ================================================================ forum */
.hb-site .hb-forum{max-width:var(--hb-measure);margin:0 auto;padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) var(--hb-gutter) var(--hb-section)}
.hb-site .hb-forum h1{font-size:clamp(2rem,1.4rem + 2.2vw,3rem);margin:.15em 0 .4em;letter-spacing:-.02em}
.hb-site .hb-forum h2{font-size:1.4rem;margin:0 0 .3rem}
.hb-site .hb-forum-crumb{margin:0;font-size:var(--hb-small);color:var(--hb-muted)}
.hb-site .hb-forum-crumb a{color:var(--hb-muted)}
.hb-site .hb-forum-desc{color:var(--hb-muted);margin:0 0 2rem;font-size:1.08rem;max-width:60ch}
.hb-site .hb-forum-empty{color:var(--hb-muted);padding:1.5rem;background:var(--hb-bg-alt);border-radius:var(--hb-radius)}
.hb-site .hb-forum-list{width:100%;border-collapse:collapse;margin:0 0 2rem;font-size:.97rem}
.hb-site .hb-forum-list th{text-align:left;font-size:.8rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--hb-muted);
  padding:.6rem .75rem .6rem 0;border-bottom:3px solid var(--hb-fg)}
.hb-site .hb-forum-list td{padding:1rem .75rem 1rem 0;border-bottom:1px solid var(--hb-line);vertical-align:top}
.hb-site .hb-forum-list td:not(:first-child),.hb-site .hb-forum-list th:not(:first-child){width:7.5rem;white-space:nowrap;color:var(--hb-muted);font-variant-numeric:tabular-nums}
.hb-site .hb-forum-list td:first-child a{font-family:var(--hb-font-display);font-size:1.15rem;font-weight:700;color:var(--hb-fg);text-decoration:none}
.hb-site .hb-forum-list td:first-child a:hover{color:var(--hb-accent);text-decoration:underline}
.hb-site .hb-forum-list td:first-child a b{font-weight:inherit}
.hb-site .hb-forum-list small{display:block;margin-top:.2rem;color:var(--hb-muted);font-size:.9rem}
.hb-site .hb-forum-pinned td{background:none}
.hb-site .hb-forum-pinned td:first-child{box-shadow:inset 4px 0 0 var(--hb-mark);padding-left:1rem}
.hb-site .hb-forum-tag{display:inline-block;font-size:.72rem;font-weight:600;padding:.1em .5em;border:1px solid var(--hb-line);border-radius:var(--hb-radius);color:var(--hb-muted);vertical-align:.15em;font-family:var(--hb-font)}
.hb-site .hb-forum-post{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.3rem 1rem;border-top:1px solid var(--hb-line);padding:1.5rem 0}
.hb-site .hb-forum-post:first-of-type{border-top:3px solid var(--hb-fg)}
.hb-site .hb-forum-post .hb-avatar{width:2.75rem;height:2.75rem}
.hb-site .hb-forum-who{margin:0;font-size:var(--hb-small);color:var(--hb-muted)}
.hb-site .hb-forum-who b{color:var(--hb-fg);font-size:1rem;margin-right:.5rem}
.hb-site .hb-forum-who time{margin-left:0}
.hb-site .hb-forum-anchor{margin-left:.5rem;color:var(--hb-muted);text-decoration:none}
.hb-site .hb-forum-body{line-height:1.7;overflow-wrap:anywhere;grid-column:2;max-width:var(--hb-text)}
.hb-site .hb-forum-body > :first-child{margin-top:0}
.hb-site .hb-forum-body > :last-child{margin-bottom:0}
.hb-site .hb-forum-body pre{overflow:auto;padding:.9rem 1rem;background:var(--hb-code-bg);color:var(--hb-code-fg);border-radius:var(--hb-radius)}
.hb-site .hb-forum-body li::marker{color:var(--hb-accent)}
.hb-site .hb-forum-pages{display:flex;justify-content:space-between;margin:1rem 0 2rem}
.hb-site .hb-forum-form{margin:1rem 0 0;padding:clamp(1.25rem,.75rem + 2vw,2rem);background:var(--hb-bg-alt);border:0;border-radius:var(--hb-radius)}
@media (max-width:640px){
  .hb-site .hb-forum-list td:not(:first-child):not(:nth-child(2)),.hb-site .hb-forum-list th:not(:first-child):not(:nth-child(2)){display:none}
  .hb-site .hb-forum-list td:not(:first-child),.hb-site .hb-forum-list th:not(:first-child){width:auto;text-align:right;padding-right:0}
  .hb-site .hb-forum-post{grid-template-columns:2.25rem minmax(0,1fr);gap:.2rem .7rem}
  .hb-site .hb-forum-post .hb-avatar{width:2.25rem;height:2.25rem;font-size:.95rem;grid-row:auto;align-self:center}
  .hb-site .hb-forum-body{grid-column:1 / -1}
}

/* ================================================================ members */
.hb-site .hb-members{max-width:calc(28rem + var(--hb-gutter) * 2);margin:0 auto;padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) var(--hb-gutter) var(--hb-section)}
.hb-site .hb-members h1{font-size:clamp(1.9rem,1.5rem + 1.5vw,2.6rem);margin:0 0 .4em;letter-spacing:-.02em}
.hb-site .hb-members h2{font-size:1.25rem;margin:0}
.hb-site .hb-members-intro{color:var(--hb-muted);margin:0 0 1.5rem}
.hb-site .hb-members-form{padding:1.5rem 0;margin:0;border-top:3px solid var(--hb-fg)}
.hb-site .hb-members-form + .hb-members-form{border-top-width:1px;border-top-color:var(--hb-line)}
.hb-site .hb-members-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0 0}
.hb-site .hb-members-links a{font-weight:600}
.hb-site .hb-members-profile ul{padding-left:1.2em}

/* ================================================================ search */
.hb-search h1{font-size:clamp(2rem,1.4rem + 2.2vw,3rem);margin:0 0 .6em;letter-spacing:-.02em}
.hb-search-field{position:relative;max-width:40rem;margin:0}
.hb-site .hb-search-input{max-width:40rem;min-height:3.4rem;font-size:1.15rem;padding-left:3rem;border-width:2px;border-color:var(--hb-fg)}
.hb-search-field::before{content:"";position:absolute;left:1.05rem;top:50%;width:.9rem;height:.9rem;margin-top:-.55rem;
  border:2.5px solid var(--hb-muted);border-radius:50%;pointer-events:none}
.hb-search-field::after{content:"";position:absolute;left:1.85rem;top:50%;width:.5rem;height:2.5px;margin-top:.35rem;
  background:var(--hb-muted);transform:rotate(45deg);pointer-events:none}
.hb-search-input:disabled{opacity:.6}
.hb-search-status{margin:.8em 0 0;font-size:.95rem}
.hb-search-results{list-style:none;padding:0;margin:1.6rem 0 0;max-width:var(--hb-text)}
.hb-search-results li{padding:1.1rem 0;border-top:1px solid var(--hb-line)}
.hb-search-results li:first-child{border-top:3px solid var(--hb-fg)}
.hb-search-results a{font-family:var(--hb-font-display);font-weight:700;font-size:1.25rem;color:var(--hb-fg);text-decoration:none}
.hb-search-results a:hover{color:var(--hb-accent);text-decoration:underline}
.hb-search-results p{margin:.3em 0 0;color:var(--hb-muted);line-height:1.6;font-size:.95rem}
.hb-search-note{font-size:var(--hb-small)}
.hb-search mark{background:color-mix(in srgb,var(--hb-mark) 35%,transparent);color:inherit;padding:0 .1em;border-radius:2px}

/* ================================================================ answer page and 404 */
.hb-answer{max-width:calc(var(--hb-text) + var(--hb-gutter) * 2);margin:0 auto;padding:clamp(3rem,2rem + 5vw,7rem) var(--hb-gutter)}
.hb-answer-mark{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;margin:0 0 1.5rem;
  background:var(--hb-accent);color:var(--hb-accent-fg);font-size:1.6rem;font-weight:700;line-height:1}
.hb-answer-no .hb-answer-mark{background:var(--hb-danger);color:var(--hb-bg)}
.hb-answer h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);margin:0 0 .4em;letter-spacing:-.02em}
.hb-answer p{font-size:1.12rem;color:var(--hb-muted);max-width:52ch}
.hb-answer .hb-actions{margin-top:2rem}
.hb-answer .hb-notfound-code{max-width:none;margin:0 0 .5rem;font-family:var(--hb-font-display);font-weight:700;font-size:clamp(4.5rem,3rem + 8vw,9rem);line-height:.9;
  color:transparent;-webkit-text-stroke:2px var(--hb-line);letter-spacing:-.04em}
.hb-notfound-links{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.hb-notfound-links a{display:inline-block;padding:.45em .9em;border:1px solid var(--hb-line);border-radius:var(--hb-radius);text-decoration:none;font-weight:600;color:var(--hb-fg)}
.hb-notfound-links a:hover{border-color:var(--hb-accent);color:var(--hb-accent)}

/* ================================================================ motion, print */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion: no-preference){
  html:focus-within{scroll-behavior:smooth}
}

@media print{
  :root{--hb-bg:#fff;--hb-bg-alt:#fff;--hb-fg:#000;--hb-muted:#333;--hb-line:#999;--hb-accent:#000;--hb-code-bg:#f4f4f4;--hb-code-fg:#000}
  body.hb-site{font-size:11pt;line-height:1.5}
  .hb-top::after,.hb-foot::before,.hb-nav,.hb-nav-button,.hb-top-right,.hb-skip,.hb-comment-form,.hb-forum-form,.hb-form,
  .hb-form-wrap,.hb-actions,.hb-announcements,.post-pager,.post-back,.hb-search-field{display:none!important}
  .hb-block,.hb-hero{padding-block:1.2rem}
  .hb-hero .hb-shot{box-shadow:none}
  .hb-prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#333;word-break:break-all}
  .hb-prose pre{border:1px solid #999;white-space:pre-wrap}
  .hb-prose h2,.hb-prose h3{break-after:avoid}
  .hb-prose img,.hb-prose pre,.hb-prose table,.hb-prose blockquote{break-inside:avoid}
  .hb-foot{margin-top:1rem;border-top:1px solid #999}
}

/* ---- studio ---- */
/* HisarBlok — Studio theme. Builds on the default theme (theme.json "extends"): the default
 * stylesheet is published first in the same file and only what differs follows here.
 *
 * For software products and the studios that make them. The type is one sans family set tight,
 * with a monospace face where the content really is machine text — versions, channels, file
 * names. Features sit in boxes, screenshots sit in a window frame, and the release block is the
 * loudest thing on the page, because for a product it is the news.
 *
 * Copyright (C) KodHisar Yazılım Hizmetleri. Licensed under AGPL-3.0-or-later.
 */

:root{
  --hb-bg:        #ffffff;
  --hb-bg-alt:    #f2f4f8;
  --hb-fg:        #16213a;
  --hb-muted:     #4d5a70;
  --hb-line:      #dde2ea;
  --hb-accent:    #3346d3;   /* cobalt */
  --hb-accent-fg: #ffffff;
  --hb-card:      #ffffff;
  --hb-mark:      #e89a1c;   /* amber */
  --hb-code-bg:   #111a2e;
  --hb-code-fg:   #dfe5f2;
  --hb-radius:    10px;
  --hb-font-display: var(--hb-font);
  --hb-h1: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem);
}
@media (prefers-color-scheme: dark){
  :root{
    --hb-bg:        #0e1424;
    --hb-bg-alt:    #141c30;
    --hb-fg:        #e6eaf2;
    --hb-muted:     #a3adc2;
    --hb-line:      #27324b;
    --hb-accent:    #8e9cff;
    --hb-accent-fg: #0b1130;
    --hb-card:      #131b2e;
    --hb-mark:      #f2b650;
    --hb-code-bg:   #080d1a;
  }
}

.hb-site h1,.hb-site h2,.hb-site h3,.hb-site h4{font-weight:750;letter-spacing:-.025em}
.hb-site h1{letter-spacing:-.035em}

/* header and footer: a plain hairline instead of the rampart */
.hb-top::after,.hb-foot::before{height:1px;background:var(--hb-line);transform:none}
.hb-top{position:sticky;top:0;background:color-mix(in srgb,var(--hb-bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px)}
.hb-brand{font-weight:750;letter-spacing:-.02em}
.hb-nav a{font-weight:550;color:var(--hb-muted)}
.hb-nav a:hover,.hb-nav a.active{color:var(--hb-fg)}
@media (prefers-reduced-motion: reduce){ .hb-top{backdrop-filter:none;background:var(--hb-bg)} }

/* hero: kicker as a release pill, screenshot in a window frame */
.hb-hero{background:
  radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb,var(--hb-accent) 12%,transparent), transparent 70%), var(--hb-bg)}
.hb-kicker{font-family:var(--hb-font-mono);font-size:.8rem;font-weight:500;color:var(--hb-fg);padding:.35rem .8rem .35rem .45rem;
  border:1px solid var(--hb-line);border-radius:999px;background:var(--hb-bg)}
.hb-kicker::before{width:auto;height:auto;content:"•";color:var(--hb-mark);background:none;font-size:1.2rem;line-height:.6;padding:0 .1rem 0 .3rem}
.hb-hero-media{margin:0;border:1px solid var(--hb-line);border-radius:calc(var(--hb-radius) + 2px);background:var(--hb-card);
  box-shadow:0 1px 0 var(--hb-line),0 24px 48px -24px color-mix(in srgb,var(--hb-fg) 35%,transparent);overflow:hidden}
.hb-hero-media::before{content:"";display:block;height:2.1rem;border-bottom:1px solid var(--hb-line);background:
  radial-gradient(circle at 1.1rem 50%, #ef6b5b 0 .3rem, transparent .32rem),
  radial-gradient(circle at 2.1rem 50%, #f2b650 0 .3rem, transparent .32rem),
  radial-gradient(circle at 3.1rem 50%, #54c07a 0 .3rem, transparent .32rem), var(--hb-bg-alt)}
.hb-hero .hb-shot{border:0;border-radius:0;box-shadow:none}

/* feature grid: real boxes, an icon tile, the whole box answers the pointer when it holds a link */
.hb-grid{gap:var(--hb-gap)}
.hb-card{border:1px solid var(--hb-line);border-radius:var(--hb-radius);background:var(--hb-card);padding:1.5rem 1.5rem 1.4rem}
.hb-block.alt .hb-card{border-top-color:var(--hb-line)}
.hb-card h3{font-size:1.15rem}
.hb-ico{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:8px;background:color-mix(in srgb,var(--hb-accent) 12%,var(--hb-card));font-size:1.35rem;margin-bottom:1rem}
.hb-card:has(a){transition:border-color .15s}
.hb-card:has(a):hover{border-color:color-mix(in srgb,var(--hb-accent) 45%,var(--hb-line))}
.hb-card h3 small,.hb-release h3 small{font-family:var(--hb-font-mono)}

.hb-chip{font-family:var(--hb-font-mono);font-size:.8rem;border-radius:999px;padding:.35em .9em;background:var(--hb-bg-alt);border-color:transparent}
.hb-chip::before{border-radius:50%;background:var(--hb-accent)}

.hb-btn{border-radius:8px}
.hb-btn-primary{box-shadow:0 1px 0 color-mix(in srgb,var(--hb-fg) 25%,transparent)}

/* release notes: the loudest block on a product page */
.hb-release-block .hb-release-card{background:var(--hb-code-bg);color:var(--hb-code-fg);border-radius:calc(var(--hb-radius) + 4px);
  padding:clamp(1.5rem,1rem + 2.5vw,3rem);gap:1.5rem 3.5rem;position:relative;overflow:hidden}
.hb-release-block .hb-release-card::after{content:"";position:absolute;inset:auto -6rem -9rem auto;width:22rem;height:22rem;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--hb-accent) 45%,transparent),transparent);pointer-events:none}
.hb-release-block .hb-release-version{font-family:var(--hb-font-mono);font-weight:600;letter-spacing:-.04em;color:#fff;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem)}
.hb-release-block .hb-release-channel{background:var(--hb-mark);color:#1d1400;font-family:var(--hb-font-mono);border-radius:999px}
.hb-release-block .hb-release-card .hb-prose{border-left-color:rgba(255,255,255,.14);color:var(--hb-code-fg);position:relative;z-index:1}
.hb-release-block .hb-release-card .hb-prose strong{color:#fff}
.hb-release-block .hb-release-card .hb-prose li::marker{color:var(--hb-mark)}
.hb-release-block .hb-release-card .hb-prose code{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.hb-release-block .hb-release-card a.hb-btn{color:#fff;border-color:rgba(255,255,255,.4)}
.hb-release-block .hb-release-card a.hb-btn:hover{background:#fff;color:var(--hb-code-bg)}

/* downloads: file names are machine text */
.hb-release{border-top-width:1px;border-top-color:var(--hb-line)}
.hb-release h3{font-family:var(--hb-font-mono);letter-spacing:-.02em}
.hb-files{border:1px solid var(--hb-line);border-radius:var(--hb-radius);border-collapse:separate;border-spacing:0;overflow:hidden}
.hb-files th,.hb-files td{padding-left:1rem}
.hb-files th{background:var(--hb-bg-alt);border-bottom:1px solid var(--hb-line)}
.hb-files tr:last-child td{border-bottom:0}
.hb-dl{font-family:var(--hb-font-mono);font-size:.9rem}
.hb-tag{font-family:var(--hb-font-mono);border-radius:999px}

/* blog and lists: hairlines instead of heavy rules */
.hb-posts-head,.post-pager,.hb-site .hb-comments > h2,.hb-search-results li:first-child,.hb-site .hb-members-form{border-top-width:1px}
.hb-posts-head{border-bottom-width:1px;border-bottom-color:var(--hb-line)}
.post-tags a{font-family:var(--hb-font-mono);font-size:.8rem;border-radius:999px}
.hb-prose blockquote{font-family:var(--hb-font);font-size:1.12rem}
.hb-prose thead th,.hb-site .hb-forum-list th,.hb-files th{border-bottom-width:1px}
.hb-site .hb-forum-post:first-of-type{border-top-width:1px}
.hb-site .hb-form{border-top-width:1px;border-radius:var(--hb-radius)}
.hb-site .hb-forum-pinned td:first-child{box-shadow:inset 3px 0 0 var(--hb-accent)}
.hb-answer .hb-notfound-code{font-family:var(--hb-font-mono);-webkit-text-stroke:0;color:var(--hb-line)}