@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap");

:root{
  --ink:#0A0C14; --ink-2:#111420; --ink-3:#171B2A;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
  --text:#EAECF4; --dim:#9298B0; --faint:#5A6079;
  --cyan:#34E0D0; --violet:#8B7BFF; --coral:#FF7A6B;
  --accent:#8B7BFF;
  --warm:#FF7A6B;
  --spectrum:linear-gradient(180deg,#34E0D0 0%,#8B7BFF 52%,#FF7A6B 100%);
  --spectrum-h:linear-gradient(90deg,#34E0D0 0%,#8B7BFF 52%,#FF7A6B 100%);
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html,body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin:0 0 .5em;
}

code,pre,kbd{ font-family:var(--f-mono) }

a{ color:var(--cyan); text-decoration:none }
a:hover{ text-decoration:underline }

button{
  font:inherit; color:inherit;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:.55rem 1rem;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
button:hover{ background:var(--ink-3); border-color:var(--line-2) }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:4px;
}

/* Demo shared bits */
.demo-frame{
  min-height:100vh;
  padding:2rem clamp(1rem,4vw,3rem);
  display:flex; flex-direction:column; gap:1.25rem;
}
.demo-frame > header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:.75rem;
  row-gap:.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.demo-frame > header .overline{
  flex:0 0 100%;
  width:100%;
  margin-bottom:0;
}
.demo-frame > header .overline::before{
  display:none;   /* keine Spectrum-Linie in den Demos */
}
.demo-frame > header h1{
  font-size:clamp(1.4rem,2.5vw,2rem);
  margin:0;
  margin-right:.25rem;
  line-height:1.1;
  text-wrap:balance;
}
.demo-frame > header p{
  margin:0;
  color:var(--dim);
  max-width:70ch;
  flex:0 0 100%;
  width:100%;
  text-wrap:pretty;
}

.note{
  padding:.85rem 1rem;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:.5rem;
  color:var(--dim);
  font-size:.92rem;
}
.note strong{ color:var(--text) }

.badge{
  display:inline-block;
  padding:.15rem .55rem;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.02em;
  border-radius:999px;
  background:var(--ink-3);
  border:1px solid var(--line);
  color:var(--dim);
}
.badge.cyan{ color:var(--cyan); border-color:color-mix(in oklab, var(--cyan) 40%, transparent) }
.badge.violet{ color:var(--violet); border-color:color-mix(in oklab, var(--violet) 40%, transparent) }
.badge.coral{ color:var(--coral); border-color:color-mix(in oklab, var(--coral) 40%, transparent) }
.badge.ok{ color:#7EE0A8; border-color:color-mix(in oklab, #7EE0A8 45%, transparent) }
.badge.no{ color:var(--coral); border-color:color-mix(in oklab, var(--coral) 45%, transparent) }

.overline{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:.35rem;
}
.overline::before{
  content:"";
  width:28px; height:1px;
  background:var(--spectrum-h);
  display:inline-block;
}

pre.snippet{
  margin:0;
  padding:1rem 1.2rem;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:.5rem;
  overflow:auto;
  font-size:.85rem;
  line-height:1.55;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important }
}