/* Shared by every page of the site. */
:root {
  --bg: #08080a;
  --bg-2: #0e0e12;
  --line: rgba(255, 255, 255, .08);
  --text: #ecebe8;
  --muted: #8d8a85;
  --faint: #55534f;
  --bronze-1: #c8b49a;
  --bronze-2: #f6c58c;
  --bronze-3: #b8763a;
  --bronze: linear-gradient(90deg, var(--bronze-1), var(--bronze-2) 55%, var(--bronze-3));
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hole-w: min(1320px, 118vw, 102svh);
  --hole-shift: 180px;
  --hero-y-offset: 85px;
}
@media (max-width: 760px) {
  :root {
    --hole-w: min(720px, 124vw, 72svh);
    --hole-shift: 150px;
    --hero-y-offset: 50px;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--bronze-2); color: #000; }

#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, header, footer { position: relative; z-index: 1; }
main { overflow-x: clip; }   /* the hero's glow and the desk glow spill past the edges; on phones that widened the page */

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* ---------- nav ---------- */
header {
  position: fixed; inset: 0 0 auto; z-index: 10;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
  transform: translateZ(0);
}
header.scrolled { background: rgba(8, 8, 10, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
header nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .02em; }
.brand img { width: 28px; height: 28px; }
.links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--muted); }
.links a { transition: color .15s; transform: translateZ(0); }
.links a:hover { color: var(--text); }
.lang {
  appearance: none; -webkit-appearance: none;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 30px 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238d8a85' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .2s, color .2s;
}
.lang:hover { border-color: rgba(255,255,255,.2); color: var(--text); }
.lang option { background: var(--bg-2); color: var(--text); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 0 112px; /* room for the scroll hint under the links */
  overflow: visible;
}
.hero-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  transform: translateY(var(--hero-y-offset, 85px));
  will-change: transform;
  overflow: visible;
}
.hole-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - var(--hole-shift, 180px)));
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.hole {
  width: var(--hole-w);
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  will-change: transform;
}
@keyframes celestialFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(0.4deg);
  }
}
.hole canvas {
  position: absolute;
  inset: -45%;
  width: 190%;
  height: 190%;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.hole canvas.glow-canvas {
  filter: url(#diffusion);
  z-index: 1;
}
.hole canvas.spark-canvas {
  z-index: 2;
}
.hole .glow-core {
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, transparent 24%, rgba(255, 235, 205, .24) 40%, rgba(246, 197, 140, .15) 54%, rgba(184, 118, 58, .06) 66%, transparent 78%);
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}
.hole .glow-wide {
  position: absolute; inset: -20%; border-radius: 50%;
  background: radial-gradient(circle, transparent 18%, rgba(246, 197, 140, .16) 36%, rgba(184, 118, 58, .08) 50%, rgba(95, 65, 170, .03) 64%, transparent 76%);
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}
@keyframes breathe { 0%, 100% { opacity: .65; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes breatheWide { 0% { opacity: .5; transform: scale(.93); } 100% { opacity: .9; transform: scale(1.07); } }

.hero-body {
  position: relative;
  z-index: 3;
  isolation: isolate;
  padding-top: 70px;
  width: 100%;
  pointer-events: auto;
}

.hero-body::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 40px; width: min(760px, 100%); height: calc(100% - 8px);
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 8, 10, .62), rgba(8, 8, 10, .34) 60%, transparent);
}
.kicker {
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--bronze-1);
  margin-bottom: 12px;
  font-weight: 500;
}
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; line-height: 1.12; }
h1 { letter-spacing: -.01em; }
h1 {
  font-size: clamp(30px, 4.4vw, 56px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
h1 em, h2 em { font-style: normal; color: var(--bronze-1); }
h1 em { font-style: italic; }
.sub {
  max-width: 540px;
  margin: 18px auto 0;
  color: #b4b0a9;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 400;
  line-height: 1.6;
}

.cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 32px; border-radius: 999px;
  background: #f5f5f7; color: #08080a;
  font-weight: 500; font-size: 16px;
  transition: transform .15s var(--ease), background-color .2s var(--ease);
  border: 1px solid rgba(255, 255, 255, .4);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.btn:hover { background: #fff; }
.btn:active { transform: scale(.98); }
.btn:focus-visible, .ghost-btn:focus-visible, .links a:focus-visible, .lang:focus-visible { outline: 2px solid var(--bronze-1); outline-offset: 3px; }
.btn svg, .btn span { position: relative; z-index: 2; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.soon { background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: default; }
.btn.soon:hover { background: transparent; }
.btn.soon:active { transform: none; }
.meta { font-size: 13px; color: var(--faint); max-width: 480px; padding-inline: 16px; }
.alt { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.alt:hover { color: var(--text); border-color: var(--muted); }
.alt[hidden] { display: none; }

.scroll-hint { position: absolute; bottom: 28px; left: 50%; width: 1px; height: 48px; background: linear-gradient(var(--faint), transparent); }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- sections ---------- */
section { padding: clamp(84px, 11vw, 136px) 0; }
.center { text-align: center; }
h2 { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.16; }
.lead { max-width: 600px; margin: 20px auto 0; color: var(--muted); font-weight: 400; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; }

.say {
  padding: 64px 0; border-block: 1px solid var(--line); overflow: hidden; text-align: center;
}
.say p { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.01em; }
.say .phon { display: block; letter-spacing: .04em; }
.say .phon span { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.say.in .phon span { opacity: 1; transform: none; }
.say.in .phon .sep { opacity: .3; }
.say .wink { display: block; color: var(--muted); font-size: .62em; margin-top: 10px; opacity: 0; transition: opacity .8s var(--ease) .9s; }
.say.in .wink { opacity: 1; }

/* ---------- Laptop demo: a real hinge, and a camera that rises to see the closed lid ---------- */
.macbook-demo { margin: 40px auto 0; width: min(520px, 100%); }
.macbook-stage {
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  position: relative; height: 380px;
  perspective: 1400px; perspective-origin: 50% 41%;
  user-select: none;
}
.mb-scale { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
/* The laptop's origin is the middle of the hinge; the desk is the plane y = 0. */
/* One movement each way. To close: the laptop turns 180° on the desk while the keyboard folds up against the
   screen, the turn is around the vertical axis only, the camera never tilts. To open: the same, backwards.
   The axis runs through the middle of the screen (2.5px = half the lid's thickness), so the screen keeps its size. */
.macbook-wrap {
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) translate3d(0, 110px, 2.5px);
}
.macbook-wrap.phase-2, .macbook-wrap.phase-3 { animation: mbTurnClose 2.2s var(--ease-io) both; }
.macbook-wrap.opening { animation: mbTurnOpen 2.2s var(--ease-io) both; }
.macbook-wrap.phase-2 .mb-base, .macbook-wrap.phase-3 .mb-base { animation: mbBaseClose 2.2s var(--ease-io) both; }
.macbook-wrap.opening .mb-base { animation: mbBaseOpen 2.2s var(--ease-io) both; }
@keyframes mbTurnClose {
  from { transform: rotateX(0deg) rotateY(0deg) translate3d(0, 110px, 2.5px); }
  to   { transform: rotateX(0deg) rotateY(180deg) translate3d(0, 110px, 2.5px); }
}
@keyframes mbTurnOpen {
  from { transform: rotateX(0deg) rotateY(180deg) translate3d(0, 110px, 2.5px); }
  to   { transform: rotateX(0deg) rotateY(0deg) translate3d(0, 110px, 2.5px); }
}
@keyframes mbBaseClose { from { transform: translateZ(0) rotateX(80deg); } to { transform: translateZ(6px) rotateX(180deg); } }
@keyframes mbBaseOpen  { from { transform: translateZ(6px) rotateX(180deg); } to { transform: translateZ(0) rotateX(80deg); } }


.mb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Line-art laptop: every surface is filled with the page color (so hidden lines stay hidden)
   and drawn only with thin strokes. */
.macbook-stage {
  --mb-fill: rgba(8, 8, 10, .92);
  --mb-line: #9a9996;
  --mb-faint: rgba(236, 235, 232, .2);
  --mb-accent: rgba(246, 197, 140, .85);
}
/* Lid: hinged on its bottom edge. The screen stays upright the whole time; the opening angle (100°)
   comes from the keyboard tilting toward us. */
.mb-lid {
  position: absolute; left: -170px; top: -220px; width: 340px; height: 220px;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: none;
}
/* Side walls: a continuous band that follows the panel's rounded outline (straight runs plus short segments
   around each corner), built by buildShell() in the script. Its two long edges carry the same stroke as the
   faces, so every edge of the case is outlined even when the face behind it is turned away. */
.mb-wall {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  background: #121216;
  border-top: 1.5px solid var(--mb-line); border-bottom: 1.5px solid var(--mb-line);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* Screen: an outline, a smaller display outline, and a few strokes for text. */
.mb-screen-front {
  border-radius: 12px;
  background: var(--mb-fill);
  border: 1.5px solid var(--mb-line);
}
.mb-display {
  position: absolute; inset: 9px 9px 14px;
  border: 1px solid var(--mb-faint); border-radius: 6px;
  padding: 32px 28px;
}
.mb-lines { display: flex; flex-direction: column; gap: 14px; }
.mb-notch {
  position: absolute; top: -1px; left: 50%; width: 38px; height: 7px; transform: translateX(-50%);
  border: 1px solid var(--mb-faint); border-top: 0; border-radius: 0 0 4px 4px; background: var(--mb-fill);
}
.mb-lines i { display: block; width: var(--w); border-top: 1.5px solid var(--mb-line); border-radius: 2px; }
.mb-lines i.accent { border-color: var(--mb-accent); }
.mb-lines .mb-progress { position: relative; width: 100%; border-color: var(--mb-faint); margin-top: 6px; }
.mb-lines .mb-progress::after {
  content: ""; position: absolute; left: 0; top: -1.5px; height: 0; width: 40%;
  border-top: 1.5px solid var(--mb-accent);
  animation: prog 2.2s ease-in-out infinite alternate;
}
.mb-lines .mb-cursor { width: 9px; border-top-width: 2px; border-color: var(--mb-accent); animation: blink 1.1s steps(1) infinite; }
@keyframes prog { from { width: 30%; } to { width: 88%; } }
@keyframes blink { 50% { opacity: 0; } }

/* Back of the lid: the same outline, with the live LlMBO black hole. */
.mb-screen-back {
  transform: rotateY(180deg) translateZ(5px);
  border-radius: 12px;
  background: var(--mb-fill);
  border: 1.5px solid var(--mb-line);
  display: grid; place-items: center;
}
.mb-logo { position: relative; width: 120px; height: 120px; transition: opacity 1.2s ease, filter 1.2s ease; }
.mb-logo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mb-logo::before {
  content: ""; position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(246,197,140,.28), transparent 62%);
  opacity: 0; transition: opacity 1s ease;
}
.macbook-wrap.phase-2 .mb-logo::before { opacity: 1; animation: lidPulse 2.6s ease-in-out infinite; }
.macbook-wrap.phase-3 .mb-logo { opacity: .22; filter: grayscale(.7); }
@keyframes lidPulse { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

/* Base: hinged at the back edge. Open = tilted toward us; closed = folded up flush against the screen. */
.mb-base {
  position: absolute; left: -170px; top: 0; width: 340px; height: 220px;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateX(80deg);
}
.mb-base-top {
  border-radius: 12px;
  background: var(--mb-fill);
  border: 1.5px solid var(--mb-line);
  padding: 20px 24px 16px;
  display: flex; flex-direction: column; align-items: center;
}
.mb-keyboard { width: 100%; height: 86px; border: 1px solid var(--mb-faint); border-radius: 6px; }
.mb-trackpad { width: 132px; height: 78px; margin-top: 16px; border: 1px solid var(--mb-faint); border-radius: 6px; }
.mb-base-bottom {
  transform: translateZ(-9px) rotateY(180deg);
  border-radius: 12px;
  background: var(--mb-fill);
  border: 1.5px solid var(--mb-line);
}
/* The base's front wall, with the thumb notch. */
/* A faint ring on the desk, and a warm glow while it works with the lid shut. */
.mb-shadow, .mb-desk-glow {
  position: absolute; left: -240px; top: 0; width: 480px; height: 360px;
  transform-origin: 50% 0; transform: translate3d(0, 10px, -60px) rotateX(90deg);
  pointer-events: none;
}
.mb-shadow { border: 1px solid rgba(236,235,232,.08); border-radius: 50%; }
.mb-desk-glow { background: radial-gradient(ellipse at 50% 50%, rgba(246,197,140,.14), transparent 60%); opacity: 0; transition: opacity 1.2s ease; }
.macbook-wrap.phase-2 .mb-desk-glow { opacity: 1; }
/* The display goes dark once the keyboard has covered it; the outline stays. */
.mb-display { transition: opacity .9s ease; }
.macbook-wrap.phase-2 .mb-display,
.macbook-wrap.phase-3 .mb-display { opacity: .15; transition-delay: 1.1s; }

/* Sleep: three z's drifting up from the closed laptop. */
/* In front of the closed lid (which ends up ~115px toward us after the turn), by its top-right corner. */
.mb-zzz { position: absolute; left: 150px; top: -175px; transform: translateZ(140px); pointer-events: none; }
.mb-zzz span {
  position: absolute; font-family: var(--serif); font-style: italic; color: #d8d3ca;
  text-shadow: 0 0 12px rgba(246,197,140,.25);
  opacity: 0;
}
.mb-zzz span:nth-child(1) { font-size: 24px; left: 0; top: 34px; }
.mb-zzz span:nth-child(2) { font-size: 31px; left: 20px; top: 8px; }
.mb-zzz span:nth-child(3) { font-size: 40px; left: 46px; top: -26px; }
.macbook-stage[data-phase="3"] .mb-zzz span { animation: zfloat 3s ease-in-out infinite; }
.macbook-stage[data-phase="3"] .mb-zzz span:nth-child(2) { animation-delay: .5s; }
.macbook-stage[data-phase="3"] .mb-zzz span:nth-child(3) { animation-delay: 1s; }
@keyframes zfloat { 0% { opacity: 0; transform: translateY(8px); } 30%, 60% { opacity: .9; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Laptop on the left, one card at a time on the right. */
.how-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
  margin-top: 56px; text-align: start;
}
.how-grid .macbook-demo { margin: 0; width: 100%; }
.steps { display: grid; }
.step {
  grid-area: 1 / 1;            /* all cards share one cell: the stack is as tall as the tallest */
  position: relative; overflow: hidden;
  padding: 32px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.step.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(200, 180, 154, .5);
}
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step .n { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.step-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.step-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--bronze-2); animation: blink 2s ease-in-out infinite; }
.step[data-phase="3"] .step-status i { background: var(--muted); box-shadow: none; animation: none; }
.step h3 { font-weight: 500; font-size: 22px; margin: 20px 0 8px; color: var(--text); }
.step p { color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.6; }

/* Progress through the three phases; each segment fills over that phase's time and can be clicked. */
.step-bar { display: flex; gap: 8px; margin-top: 16px; }
.how-grid .how-side { padding-top: 19px; }   /* = the bar's 16px margin + 3px height */
.seg {
  flex: 1; height: 3px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--line); position: relative; overflow: hidden;
}
.seg::before { content: ""; position: absolute; inset: -8px 0; }   /* a bigger target to click */
.seg::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--bronze-2); border-radius: inherit; }
.seg.done::after { width: 100%; opacity: .45; }
.seg.is-active::after { animation: segFill var(--dwell, 5s) linear forwards; }
@keyframes segFill { from { width: 0; } to { width: 100%; } }

/* agents marquee */
.marquee { margin-top: 64px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 12px; width: max-content; animation: slide 45s linear infinite; }
.track.rev { animation-direction: reverse; animation-duration: 52s; margin-top: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s, border-color .2s, background-color .2s;
  user-select: none;
}
.chip:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .16);
}
.chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  opacity: .75;
  transition: opacity .2s;
}
.chip-icon {
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.chip-icon.wide { width: 26px; }   /* MLX's mark is the word itself */
.chip:hover .chip-icon { opacity: 1; }
.chip-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.chip[data-type="hook"] .chip-badge {
  background: rgba(246, 197, 140, .12);
  color: var(--bronze-2);
  border: 1px solid rgba(246, 197, 140, .25);
}
.chip[data-type="files"] .chip-badge {
  background: rgba(255, 255, 255, .06);
  color: #c9c6c0;
  border: 1px solid rgba(255, 255, 255, .14);
}
.chip[data-type="cpu"] .chip-badge {
  background: rgba(255, 255, 255, .06);
  color: #bbb;
  border: 1px solid rgba(255, 255, 255, .1);
}

@keyframes slide { to { transform: translateX(-50%); } }

/* safety bento grid */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 64px; }
.bento-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transition: border-color .2s var(--ease);
}
.bento-card:hover { border-color: rgba(255, 255, 255, .16); }
.card-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--bronze-1);
}
.card-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-head strong { display: block; color: var(--text); font-weight: 500; font-size: 16px; margin-bottom: 4px; }
.card-head p { color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.5; }

/* Bento Micro-illustrations */
.bento-viz {
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Battery Viz */
.bento-battery-shell {
  height: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.bento-battery-fill {
  height: 100%;
  background: var(--bronze-1);
  border-radius: 2px;
}
.bento-battery-thresh {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: #d9705f;
}
.thresh-tag {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #d9705f;
  font-weight: 500;
  white-space: nowrap;
}
.bento-battery-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.thresh-active { color: var(--bronze-1); font-weight: 500; }

/* Time Limit Viz */
.bento-power {
  display: flex;
  flex-direction: row;   /* .bento-viz stacks; battery and charger go side by side */
  gap: 10px;
}
.power-pill {
  flex: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.power-pill.ac { border-color: rgba(200, 180, 154, .3); }
.power-src { font-size: 11px; color: var(--muted); }
.power-val { font-size: 13px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.power-pill.ac .power-val { color: var(--bronze-1); }
.power-bar { width: 100%; height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.power-bar i { display: block; height: 100%; background: var(--muted); border-radius: 2px; }
.power-pill.ac .power-bar i { background: var(--bronze-1); }

/* Thermal Viz */
.thermal-track {
  display: flex;
  gap: 6px;
  align-items: center;
}
.thermal-step {
  flex: 1;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
  position: relative;
}
.thermal-step.active {
  background: rgba(200, 180, 154, .1);
  border-color: rgba(200, 180, 154, .4);
  color: var(--bronze-1);
  font-weight: 500;
}
.thermal-step.critical { border-color: rgba(255, 95, 86, .3); color: rgba(255, 95, 86, .7); }
.thermal-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bronze-2);
}
.thermal-sub { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }

/* Restore Viz */
.bento-restore {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.restore-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.restore-cmd { color: #f4f4f6; }
.restore-check { color: #8fbf8a; font-weight: 500; font-family: var(--sans); font-size: 11px; }
.restore-sub { font-size: 11px; color: var(--muted); }
.warn { margin-top: 72px; text-align: center; font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); color: var(--muted); }

/* install */
.install { border: 1px solid var(--line); border-radius: 24px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; background: var(--bg-2); }
.install h2 { font-size: clamp(28px, 3.4vw, 42px); }
.install ol { list-style: none; counter-reset: s; display: grid; gap: 18px; }
.install li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--muted); font-weight: 400; }
.install li::before { content: counter(s); color: var(--bronze-1); font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.install b { color: var(--text); font-weight: 500; }

/* ---------- links and buttons shared by the pages ---------- */
.links a[aria-current="page"] { color: var(--text); }
.more-link { font-size: 14px; color: var(--muted); transition: color .2s var(--ease); }
.how-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); text-align: start;
}
.how-more { max-width: 560px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.how-foot .ghost-btn { flex: none; white-space: nowrap; }
.more-link:hover { color: var(--text); }
.ghost-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); color: var(--text); font-size: 15px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .15s var(--ease);
}
.ghost-btn:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); }
.ghost-btn:active { transform: scale(.98); }

/* ---------- free & open source ---------- */
.open-card {
  border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 56px);
  background: var(--bg-2);
}
.open-card .lead { margin-bottom: 32px; }
.perks { list-style: none; max-width: 640px; margin: 0 auto; text-align: start; border-top: 1px solid var(--line); }
.perks li { display: grid; grid-template-columns: 240px 1fr; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.perks strong { font-weight: 500; color: var(--text); font-size: 15px; line-height: 1.5; }
.perks span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.perks-foot { margin: 24px 0 32px; color: var(--muted); font-size: 15px; }
@media (max-width: 640px) { .perks li { grid-template-columns: 1fr; } }

/* ---------- how it works: title ---------- */
.page-hero { padding-top: clamp(140px, 16vw, 190px); }
.page-hero .sub { max-width: 600px; }

/* ---------- how it works: story and a night with LlMBO ---------- */
.story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.story-text p:not(.kicker) { color: var(--muted); font-weight: 400; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75; margin-top: 20px; }
.story-text h2 { margin-bottom: 8px; }
.night { border: 1px solid var(--line); border-radius: 24px; padding: 28px clamp(20px, 3vw, 32px); background: var(--bg-2); }
.night h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 18px; }
.night h3 em { font-style: normal; color: var(--bronze-1); }
.timeline { list-style: none; position: relative; display: grid; gap: 18px; }
.timeline::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 5px; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 70px 1fr; gap: 6px; padding-inline-start: 24px; position: relative; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--faint); }
.timeline li:last-child::before { background: var(--bronze-2); border-color: var(--bronze-2); }
.timeline time { color: var(--bronze-1); font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.timeline p { color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.55; }

/* ---------- how it works: features ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; text-align: start; }
.feat { border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: var(--bg-2); transition: border-color .2s var(--ease); }
.feat:hover { border-color: rgba(255, 255, 255, .16); }
.feat h3 { font-weight: 500; font-size: 16px; margin: 16px 0 8px; color: var(--text); line-height: 1.35; }
.feat p { color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.6; }
.feat code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bronze-1); background: rgba(246,197,140,.07); padding: 1px 6px; border-radius: 6px; }

/* ---------- how it works: questions ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); transition: border-color .2s var(--ease); }
.faq details[open] { border-color: rgba(255, 255, 255, .16); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 300; font-size: 20px; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 20px; color: var(--muted); font-weight: 400; line-height: 1.65; }

/* ---------- agents: the table ---------- */
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.legend .mark { display: inline-block; width: 1.4em; text-align: center; }
.mark.yes, .matrix td.yes { color: var(--bronze-2); }
.mark.part, .matrix td.part { color: var(--bronze-1); }
.mark.no, .matrix td.no { color: var(--faint); }
.matrix-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
.matrix th, .matrix td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix thead th { font-weight: 500; font-size: 13px; color: var(--muted); line-height: 1.35; vertical-align: bottom; }
.matrix .agent-col { text-align: start; position: sticky; inset-inline-start: 0; background: var(--bg-2); z-index: 1; min-width: 210px; }
.matrix tbody th.agent-col { font-weight: 400; color: var(--text); }
.matrix .agent { display: flex; align-items: center; gap: 10px; }
.matrix tbody th.agent-col small { display: block; color: var(--faint); font-size: 12px; }
.matrix .chip-icon { opacity: .8; }
.chip-icon.none { visibility: hidden; }
.matrix tr.group th { text-align: start; font-size: 13px; color: var(--bronze-1); font-weight: 500; padding-top: 24px; background: transparent; }
.matrix tbody tr:not(.group):hover td, .matrix tbody tr:not(.group):hover th { background: #131317; }
.matrix td { font-size: 16px; }
.matrix sup { position: absolute; font-size: 11px; margin-inline-start: 2px; color: var(--muted); transform: translateY(-.35em); } /* out of the flow, so the mark stays centred */
.matrix tbody tr:last-child td, .matrix tbody tr:last-child th { border-bottom: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.matrix-info { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: 48px; }
.matrix-info h3, .contact-side h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 16px; }
.col-defs { display: grid; gap: 12px; }
.col-defs dt { color: var(--text); font-weight: 500; font-size: 15px; }
.col-defs dd { color: var(--muted); font-weight: 400; font-size: 15px; line-height: 1.6; }
.matrix-notes { padding-inline-start: 20px; display: grid; gap: 12px; color: var(--muted); font-weight: 400; font-size: 15px; line-height: 1.6; }
.matrix-notes li::marker { color: var(--faint); }
.honest { margin-top: 24px; padding: 20px; border: 1px solid rgba(200, 180, 154, .25); border-radius: 12px; color: var(--muted); font-weight: 400; font-size: 15px; line-height: 1.65; background: var(--bg-2); }
.honest a, .form-note a { color: var(--bronze-1); border-bottom: 1px solid rgba(246, 197, 140, .35); }

/* ---------- safety: what LlMBO touches ---------- */
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
/* The permission card (with its command list) is twice as tall as the others: it takes the left column, the
   two shorter ones stack beside it, and the last runs full width underneath. */
@media (min-width: 861px) {   /* one column below that (see max-width: 860px) */
  .details { grid-template-areas: "perm cfg" "perm priv" "sign sign"; }
  .details > :nth-child(1) { grid-area: perm; }
  .details > :nth-child(2) { grid-area: cfg; }
  .details > :nth-child(3) { grid-area: priv; }
  .details > :nth-child(4) { grid-area: sign; }
}
.detail { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--bg-2); }
.detail h3 { font-weight: 500; font-size: 17px; margin-bottom: 10px; }
.detail p { color: var(--muted); font-weight: 400; font-size: 15px; line-height: 1.65; }
.detail p + p, .detail pre + p { margin-top: 12px; }
.detail code, .feat code, .honest code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bronze-1); }
.detail p code, .honest code { background: rgba(246,197,140,.07); padding: 1px 6px; border-radius: 6px; }
.code { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,.45); border: 1px solid var(--line); overflow-x: auto; line-height: 1.7; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-form { display: grid; gap: 18px; border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 36px); background: var(--bg-2); }
.contact-form label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; font-size: 15px; color: var(--text); background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .2s;
}
.contact-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f6c58c' fill='none' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
[dir="rtl"] .contact-form select { background-position: left 14px center; }
.contact-form option { background: var(--bg-2); }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: rgba(200, 180, 154, .6); }
.contact-form .btn { justify-self: start; }
.contact-form .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.form-note { font-size: 13px; color: var(--faint); line-height: 1.6; }
.form-note.soon { color: var(--muted); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { font-size: 14px; line-height: 1.6; color: var(--muted); }
.form-status.ok { color: var(--bronze-2); }
.form-status.err { color: #e8a0a0; }
.form-status a { color: var(--bronze-2); border-bottom: 1px solid rgba(246, 197, 140, .35); }
.contact-side { display: grid; gap: 32px; }
.contact-side p, .tips { color: var(--muted); font-weight: 400; font-size: 15px; line-height: 1.65; }
.contact-side p { margin-bottom: 10px; }
.tips { padding-inline-start: 18px; display: grid; gap: 6px; }
.tips li::marker { color: var(--faint); }
.email-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.email-row code { font: 15px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bronze-1); }
.ghost-btn.small { padding: 7px 16px; font-size: 13px; background: transparent; font-family: inherit; cursor: pointer; }
.ghost-btn.small[hidden] { display: none; }

.final { text-align: center; }
.appicon { width: 112px; height: 112px; margin: 0 auto 32px; position: relative; border-radius: 26px; background: radial-gradient(circle at 50% 45%, #121216, #08080a 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 20px 48px -20px rgba(0,0,0,.8); overflow: hidden; }
.appicon canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

footer { border-top: 1px solid var(--line); padding: 36px 0 48px; font-size: 13px; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-sep { color: var(--faint); }
.foot-tagline { color: var(--faint); }
.foot-links { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.foot-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color .2s; }
.foot-link:hover { color: var(--text); }
.foot-link svg { width: 14px; height: 14px; flex: none; }
.foot-icon svg { width: 17px; height: 17px; }

/* reveal */
.r { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.r.in { opacity: 1; transform: none; }
.matrix tr.row-r { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.matrix tr.row-r.in { opacity: 1; transform: none; }
.r.d1 { transition-delay: .06s; } .r.d2 { transition-delay: .12s; } .r.d3 { transition-delay: .18s; }

:lang(ja) h1, :lang(zh) h1, :lang(ko) h1, :lang(ja) h2, :lang(zh) h2, :lang(ko) h2 { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.3; word-break: auto-phrase; }
:lang(ko) h1, :lang(ko) h2 { word-break: keep-all; }
[dir="rtl"] .lang { padding: 6px 12px 6px 30px; background-position: left 12px center; }
@media (max-width: 960px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .story, .faq, .matrix-info, .details, .contact { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .how-side { width: min(460px, 100%); margin: 0 auto; }
  .how-foot { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 40px; }
}
@media (max-width: 760px) {
  .links a { display: none; }
  .grid, .install, .feat-grid { grid-template-columns: 1fr; }
  .matrix { font-size: 13px; min-width: 720px; }
  .matrix .agent-col { min-width: 132px; max-width: 132px; }
  .matrix th, .matrix td { padding: 10px 6px; }
  .matrix .agent { gap: 8px; }
  .step { padding: 28px 24px 32px; }
  .macbook-stage { height: 330px; }
  .mb-scale { transform: scale(.82); }
}
@media (max-width: 440px) {
  .macbook-stage { height: 290px; }
  .mb-scale { transform: scale(.68); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .macbook-wrap, .mb-lid, .mb-base, .mb-logo, .mb-desk-glow { transition: none !important; animation: none !important; }
  .seg.is-active::after { animation: none; width: 100%; }
  .macbook-wrap.phase-2, .macbook-wrap.phase-3 { transform: rotateX(0deg) rotateY(180deg) translate3d(0, 110px, 2.5px); }
  .macbook-wrap.phase-2 .mb-base, .macbook-wrap.phase-3 .mb-base { transform: translateZ(6px) rotateX(180deg); }
}

/* Pop-up before the Mac download (site.js openGatekeeper). */
.gk { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 4, 6, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gk-card { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 28px 24px;
  border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.gk-card h2 { font: 400 32px/1.1 var(--serif); color: var(--text); margin-bottom: 12px; }
.gk-lead { color: var(--muted); font-size: 15px; line-height: 1.6; }
.gk-steps { margin: 18px 0 6px; padding: 0; list-style: none; counter-reset: gk; }
.gk-steps li { counter-increment: gk; position: relative; padding: 8px 0 8px 34px; color: var(--text); font-size: 15px; line-height: 1.55; }
.gk-steps li::before { content: counter(gk); position: absolute; inset-inline-start: 4px; top: 4px;
  font: 400 15px/1.9 var(--sans); color: var(--bronze-1); font-variant-numeric: tabular-nums; }
[dir="rtl"] .gk-steps li { padding: 8px 34px 8px 0; }
.gk-steps b { color: var(--bronze-1); font-weight: 500; }
.gk-term { margin-top: 14px; color: var(--muted); font-size: 13px; }
.gk-cmd { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: rgba(0,0,0,.45); border: 1px solid var(--line); }
.gk-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bronze-1); }
.gk-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* The trash warning: macOS highlights "Move to Trash" and no longer offers "Open Anyway" in the dialog. */
.gk-warn { margin-top: 14px; padding: 12px 14px 12px 40px; position: relative; border-radius: 12px;
  background: rgba(232, 98, 72, .10); border: 1px solid rgba(232, 98, 72, .45); color: var(--text); font-size: 14px; line-height: 1.55; }
.gk-warn::before { content: "!"; position: absolute; inset-inline-start: 13px; top: 11px; width: 18px; height: 18px; border-radius: 50%;
  background: #e86248; color: #0b0b0d; font: 700 12px/18px var(--sans); text-align: center; }
[dir="rtl"] .gk-warn { padding: 12px 40px 12px 14px; }
.gk-warn b { color: #ff8a70; }
.gk-steps .gk-no { color: #ff8a70; font-weight: 600; }
.gk-term { color: var(--text) !important; font-weight: 500; }
.gk-cmd { border-color: rgba(246,197,140,.35) !important; }