/* Yigcore live preview: the film stylesheet, scoped to .yd so nothing leaks into the site. Tokens match styles/tokens.css. */
.yd {
  --ink: #0A0A0A; --paper: #FAF9F5; --cinnabar: #C8321B; --phosphor: #00B85A;
  --ink-60: #6B6B66; --ink-40: #9B9A94; --line: #E2E0D8; --white: #FFFFFF;
  --sans: 'Inter Variable', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
.yd #stage, .yd #stage * { box-sizing: border-box; margin: 0; padding: 0; }
.yd #stage {
  width: 1920px; height: 1080px; position: relative; overflow: hidden; flex: none;
  background-color: var(--paper); color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11';
  transform-origin: 50% 50%;
}
.yd /* Swiss hairline grid: the site's 1px-gap grid, .yd used as the backdrop instead of gradients */
#grid {
  position: absolute; inset: -40px;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 120px 120px; opacity: .55;
}
.yd .abs { position: absolute; }
.yd .mono { font-family: var(--mono); }
.yd .eyebrow { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.yd .cin { color: var(--cinnabar); }
.yd .pho { color: var(--phosphor); }
.yd .h1 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.yd /* Windows: flat, .yd hairline border, .yd 2px radius, .yd no shadows (brand rule) */
.win { position: absolute; background: var(--white); border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.yd .win .bar { height: 44px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: 15px; font-weight: 500; }
.yd .win .bar .dim { color: var(--ink-60); font-weight: 400; }
.yd .mark { width: 18px; height: 18px; flex: none; }
.yd /* Product UI pieces (Yigcore run UI, .yd copy from the run-ui renderer, .yd restyled in YiG VI) */
.runbar { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 58px; border-bottom: 1px solid var(--line); font-size: 18px; }
.yd .runbar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.yd .runbar .right { margin-left: auto; font-family: var(--mono); font-size: 14px; color: var(--ink-60); }
.yd .rail-h { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 22px 10px; }
.yd .rail-h b { font-size: 15px; font-weight: 600; }
.yd .step { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; height: 62px; padding: 0 22px; border-top: 1px solid var(--line); font-size: 17px; }
.yd .step .n { font-family: var(--mono); font-size: 14px; color: var(--ink-60); }
.yd .chip { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; padding: 5px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-60); white-space: nowrap; }
.yd .chip.working { color: var(--ink); border-color: var(--ink); }
.yd .chip.done { color: var(--phosphor); border-color: var(--phosphor); }
.yd .chip.you { color: var(--white); background: var(--cinnabar); border-color: var(--cinnabar); }
.yd .btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 2px; font-size: 16px; font-weight: 500; letter-spacing: .01em; }
.yd .btn.ink { background: var(--ink); color: var(--paper); }
.yd .btn.ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.yd /* Question card ("Yigcore stopped to ask") */
.ask { background: var(--white); border: 1px solid var(--ink); border-radius: 2px; position: absolute; overflow: hidden; }
.yd .ask::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cinnabar); }
.yd .ask .in { padding: 34px 40px 34px 46px; }
.yd .opt { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 22px; border: 1px solid var(--line); border-radius: 2px; font-size: 19px; margin-top: 10px; }
.yd .opt .hint { font-family: var(--mono); font-size: 13px; color: var(--ink-60); }
.yd #cursor { position: absolute; width: 34px; height: 34px; z-index: 50; pointer-events: none; }
.yd #flash { position: absolute; inset: 0; background: var(--white); opacity: 0; z-index: 40; pointer-events: none; }
.yd .lockup { display: flex; align-items: center; gap: 22px; }
.yd .wordmark { font-weight: 700; letter-spacing: -0.022em; font-size: 96px; line-height: 1; position: relative; }
.yd /* "Yigcore" set with a dotless i and the wordmark's cinnabar i-dot */
.idot { position: relative; display: inline-block; }
.yd .idot::after { content: ''; position: absolute; left: 50%; top: .02em; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: var(--cinnabar); }