@charset "UTF-8";

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/inter.woff2?h=8386043358") format("woff2");
}

:root {
  color-scheme: dark;

  /* Radix grayDark */
  --gray-1: #111111;   /* app background     */
  --gray-2: #191919;   /* raised surface     */
  --gray-6: #3a3a3a;   /* subtle border      */
  --gray-11: #b4b4b4;  /* low-contrast text  */
  --gray-12: #eeeeee;  /* high-contrast text */

  /* Radix amberDark */
  --amber-10: #ffd60a;  /* brand accent (the star)             */
  --amber-11: #ffca16;  /* accessible accent text (AA on --bg) */

  /* Semantic aliases */
  --bg: var(--gray-1);
  --fg: var(--gray-12);
  --muted: var(--gray-11);
  --accent: var(--amber-10);
  --accent-text: var(--amber-11);
  --border: var(--gray-6);
  --surface: var(--gray-2);
  --on-accent: var(--gray-1); /* text on top of an amber fill */
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  /* Sized for the measure, not the viewport: this leaves about 68 characters per
     line of body copy, inside the comfortable 45-75 range. Everything (masthead,
     copy, buttons, code, footer) shares the width so both edges stay aligned. */
  max-width: 620px;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}

/* Masthead */
.masthead {
  margin-bottom: 2.5rem;
}

h1 {
  margin: 0.5rem 0 0;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-indent: -0.05em; /* optical: pull the "i" side bearing to the margin */
  /* "izartu" is intentionally lowercase. Do not capitalize. */
}

/* Decorative star as a background image (inline to the LEFT of the wordmark),
   at letter height, hanging outside the content frame (same look as before). */
h1::before {
  content: "";
  display: inline-block;
  width: 0.789em;   /* = height x star ratio (1.0492) */
  height: 0.7515em; /* exact height of the lowercase "i", dot included */
  margin-left: -1.069em; /* = -(width + margin-right): keeps the wordmark left-aligned
                            with the rest of the content, star hangs outside the frame */
  margin-right: 0.28em;
  vertical-align: baseline;
  background: url(../image/star.svg) no-repeat center / contain;
}

.tagline {
  margin: 0.3rem 0 0;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--muted);
  text-indent: -0.20em; /* optical: pull the italic slant to the margin */
}

.lead {
  margin: 0 0 2.5rem;
  font-size: 1.1rem;
}

/* Ragged right, on purpose: justifying this measure would either stretch the word
   spaces into visible gaps or need constant hyphenation, and WCAG 1.4.8 (AAA) asks
   for unjustified text. At this width the uneven edge stays mild. */
.lead,
.why li,
section p {
  text-wrap: pretty; /* progressive: evens out the rag, keeps a lone last word off */
}

/* Why list: amber dot markers, no bullets */
.why {
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}

.why li {
  position: relative;
  margin: 0 0 0.7rem;
  padding-left: 1.1rem;
  color: var(--muted);
}

.why li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background-color: var(--accent);
}

.why strong {
  font-weight: 600;
  color: var(--fg);
}

/* Calls to action: amber primary (same fill as the app's primary action, see
   docs/DESIGN.md) plus a quiet secondary. The transparent border on the primary
   keeps both the same height. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 2.5rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  background-color: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: filter 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cta:hover {
  color: var(--on-accent);
  filter: brightness(1.08);
}

.cta-secondary {
  background-color: var(--surface);
  color: var(--fg);
  border-color: var(--border);
}

.cta-secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
  filter: none;
}

/* Leading icons, drawn as a masked SVG filled with currentColor: one icon file
   per button serves every state, since the glyph inherits the button's own text
   colour (dark on the amber primary, light on the secondary, amber on its hover). */
.cta::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask: var(--cta-icon) no-repeat center / contain;
  mask: var(--cta-icon) no-repeat center / contain;
}

.cta-source {
  --cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.66-.21-2.2.82a7.68 7.68 0 0 0-2.01-.27c-.68 0-1.36.09-2 .27-1.55-1.03-2.21-.82-2.21-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
}

.cta-docs {
  --cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.25 1.75H4.5v12.5h7V4z'/%3E%3Cpath d='M9.25 1.75V4h2.25'/%3E%3Cpath d='M6.5 8h3M6.5 10.5h3'/%3E%3C/svg%3E");
}

/* Sections */
section {
  margin: 0 0 1.8rem;
}

h2 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-text);
}

section p {
  margin: 0;
}

section p + p,
section pre + p {
  margin-top: 0.7rem;
}

/* Code */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  /* Keep "--build" as two visible hyphens: some monospace faces ligature it
     into a single long dash, which misreads as an en dash in a command. */
  font-variant-ligatures: none;
}

pre {
  margin: 0.7rem 0 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  line-height: 1.55;
}

pre .comment {
  color: var(--muted);
}

/* Links */
a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--amber-10) 40%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Keyboard focus: one visible ring for links, the calls to action and the
   scrollable code block. Only for keyboard users, so pointer clicks stay clean. */
a:focus-visible,
pre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* An amber ring around the amber fill would read as a halo, so the primary
   call to action takes the light foreground instead. */
.cta:not(.cta-secondary):focus-visible {
  outline-color: var(--fg);
}

/* Footer */
.site-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
  /* Two lines side by side (software left, content right); the second wraps
     below when there is not enough room for both. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem; /* row gap when wrapped, min column gap when side by side */
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--muted);
  border-bottom: none;
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: var(--accent);
}

/* On narrow screens there is no centered margin for the star to hang into,
   so reserve enough left padding to keep it inside the viewport. */
@media (max-width: 820px) {
  main {
    padding-left: 4rem;
  }
}

@media (max-width: 480px) {
  main {
    padding: 2.5rem 1.25rem 2.5rem 3.25rem;
  }
}