/* Integrations (/integrations/). Enpasse's MCP server, presented the way a docs page presents a server: the LED mark behind
   the title with the server address and a "Works with" row, a row of assistants answering with cited passages, docs-style setup
   beside Enpasse's own consent page, a tool list, four switches, one day of History drawn as lanes, security notes, questions,
   siblings and a 40px pre-footer. Prefix in-. Ported from /assistants/ (aa-).
   Claude, ChatGPT and Claude Code appear as plain text only: no logos, no brand colour. */

.in-sec { padding: 160px 0 128px; }
.in-two { max-width: 760px; margin: 0 auto; font-size: 24px; line-height: 1.33; letter-spacing: -0.012em; color: var(--fg-3); }
.in-two span { color: var(--fg-1); }
.in-mono-cap { margin: 32px auto 0; max-width: 760px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.6; color: var(--fg-4); }
/* ---------- hero ---------- */
.in-hero { position: relative; padding-top: 196px; padding-bottom: 72px; overflow: clip; }
.in-fx { position: absolute; left: 50%; top: 0; width: max(100%, 1440px); height: 860px; transform: translateX(-50%); opacity: .34; pointer-events: none;
  -webkit-mask-image: radial-gradient(56% 62% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(56% 62% at 50% 40%, #000 30%, transparent 100%); }
.in-fx img, .in-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="light"] .in-fx { opacity: .22; filter: invert(1) hue-rotate(180deg) contrast(.9); }
.in-hero::after { content: ""; position: absolute; left: 0; right: 0; top: 520px; height: 360px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg) 80%); }
.in-hero-copy::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--bg), transparent); opacity: .55; z-index: -1; pointer-events: none; }
.in-hero-copy { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.in-hero-copy .eyebrow { margin-bottom: 20px; color: var(--fg-2); }
.in-h1 { margin: 0; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 560; text-shadow: 0 0 40px var(--bg); }
.in-lede { margin-top: 20px; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--fg-3); }
.in-pill { margin-top: 32px; }

/* the row of assistant panels: the centre one is active, its neighbours dim and run off both edges */
.in-row { position: relative; z-index: 3; margin-top: 96px; height: 470px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.in-track { position: absolute; left: 50%; top: 4px; display: flex; gap: 24px; transition: transform .9s var(--ease-enter); }
.in-p { position: relative; flex: none; width: 400px; height: 440px; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 60px #00000055; display: grid; grid-template-rows: 44px minmax(0, 1fr) auto; overflow: hidden; font-size: 13px; color: var(--fg-1); transition: opacity .7s var(--ease-enter), filter .7s var(--ease-enter); }
:root[data-theme="light"] .in-p { background: #fff; box-shadow: inset 0 0 0 1px #0000001a, 0 20px 50px #00000014; }
.in-p:not(.on) { opacity: .42; filter: blur(.6px) saturate(.5); }
.in-p.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 30%, var(--cu) 50%, transparent 70%) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: in-sweep 3.6s linear infinite; }
@keyframes in-sweep { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.in-p-bar { padding: 0 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 12px; }
.in-p-bar b { color: var(--fg-1); font-weight: 560; font-size: 13px; }
.in-p-bar .in-conn { height: 20px; padding: 0 7px; border-radius: 5px; display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px var(--line-3); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.in-p-bar .ctl { margin-left: auto; display: flex; gap: 10px; color: var(--fg-4); }
.in-p-bar .ctl i { width: 9px; height: 9px; display: block; border-radius: 2px; box-shadow: inset 0 0 0 1.2px currentColor; }
.in-p-bar .ctl i:first-child { height: 1.2px; margin-top: 4px; box-shadow: none; background: currentColor; }
.in-p-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.in-p-q { align-self: flex-end; max-width: 88%; padding: 9px 12px; border-radius: 10px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); line-height: 1.45; }
.in-p-tool { display: flex; align-items: center; gap: 7px; color: var(--fg-3); font-size: 12px; }
.in-p-tool svg { width: 12px; height: 12px; }
.in-p-tool .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-4); }
.in-p-tool.run .dot { background: var(--cu); animation: in-pulse 1s ease-in-out infinite; }
@keyframes in-pulse { 50% { opacity: .3; } }
.in-p-a { display: grid; gap: 10px; line-height: 1.6; color: var(--fg-1); }
.in-p-a > * { transition: opacity .45s var(--ease-enter), transform .45s var(--ease-enter); }
.in-p-a > .pre { opacity: 0; transform: translateY(6px); }
.in-p-a .src { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg); }
.in-p-a .src small { color: var(--fg-3); font-size: 11.5px; }
.in-p-a .ref { display: flex; align-items: center; gap: 8px; }
.in-p-a .mut { color: var(--fg-3); }
.in-p-a .refuse { padding: 10px 12px; border-radius: 8px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-2); }
.in-p-comp { margin: 0 12px 12px; height: 40px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; color: var(--fg-4); box-shadow: inset 0 0 0 1px var(--line-3); }
.in-row-foot { position: relative; z-index: 3; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.in-row-lbl { display: flex; gap: 12px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--fg-3); min-width: 0; }
.in-row-lbl span:first-child { color: var(--fg-4); }
.in-arrows { display: flex; gap: 6px; }
.in-arrow { width: 32px; height: 32px; border: 0; border-radius: 999px; display: grid; place-items: center; background: var(--bg-3); box-shadow: var(--glass); color: var(--fg-2); cursor: pointer; transition: color .16s, transform .16s; }
.in-arrow:hover { color: var(--fg-1); }
.in-arrow:active { transform: scale(.94); }
.in-arrow svg { width: 14px; height: 14px; }

/* ---------- 1: consent window (ported) ---------- */
.in-c-top { height: 52px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 12px; }
.in-c-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-1); font-weight: 600; font-size: 14px; }
.in-c-brand svg { width: 22px; height: 11px; }
.in-c-body { padding: 24px 28px 8px; }
.in-c-body h4 { margin: 0 0 16px; font-size: 20px; font-weight: 560; letter-spacing: -0.02em; }
.in-c-row { padding: 12px 0; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid var(--line-2); }
.in-c-row.top { align-items: start; }
.in-c-row > span { color: var(--fg-3); font-size: 12.5px; }
.in-c-row b { font-weight: 500; }
.in-c-row p { margin-top: 2px; color: var(--fg-2); line-height: 1.55; }
.in-c-pick { margin-top: 18px; display: grid; gap: 8px; }
.in-c-pick-h { font-size: 12.5px; color: var(--fg-3); }
.in-opt { height: 46px; padding: 0 14px; border-radius: 10px; display: flex; align-items: center; gap: 12px; box-shadow: inset 0 0 0 1px var(--line-3); transition: box-shadow .3s, background .3s; }
.in-opt b { font-weight: 500; }
.in-opt .r { margin-left: auto; color: var(--fg-3); font-size: 12px; }
.in-radio { width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.3px var(--fg-4); position: relative; flex: none; transition: box-shadow .3s; }
.in-opt.on { box-shadow: inset 0 0 0 1px var(--fg-3); background: var(--bg-2); }
.in-opt.on .in-radio { box-shadow: inset 0 0 0 1.3px var(--fg-1); }
.in-opt.on .in-radio::after { content: ""; position: absolute; inset: 3.5px; border-radius: 999px; background: var(--fg-1); }
.in-c-foot { padding: 20px 28px; display: flex; justify-content: flex-end; gap: 8px; }
.in-allow { opacity: .4; transition: opacity .3s, transform .15s; }
.in-allow.ready { opacity: 1; }
.in-allow.press { transform: scale(.94); }
.in-c-done { margin: 0 28px; padding: 12px 14px; border-radius: 10px; display: flex; align-items: center; gap: 10px; background: var(--ok-tint); color: var(--fg-1); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-enter), transform .5s var(--ease-enter); }
.in-c-done svg { width: 15px; height: 15px; color: var(--ok); flex: none; }
.in-c-done.on { opacity: 1; transform: none; }
.in-cursor { z-index: 20; }

/* ---------- 3: one day of what crossed (replaces the hairline 2x2) ----------
   Six lanes, one per kind of record an assistant may read; each call sits at its time.
   Each call is a stack of small squares, one per item it carried: Claude for Maria Reyes in white, ChatGPT for Sam Ortiz in slate. No copper: outside assistants never carry Enpasse's AI mark. */
.in-day {
  --d-c: var(--fg-1); --d-g: #7f93b3; --d-grid: #ffffff0b; --d-lane: #ffffff06; --d-now: var(--fg-1);
  position: relative; margin: 88px 0 0; padding: 28px 32px 0; border-radius: 20px;
  background: radial-gradient(70% 90% at 50% 0%, #1b1c1f 0%, #111214 45%, var(--bg) 90%);
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 0 0 1px #ffffff0a;
}
:root[data-theme="light"] .in-day {
  --d-g: #4f6788; --d-grid: #0000000c; --d-lane: #00000005;
  background: radial-gradient(70% 90% at 50% 0%, #f1f1f3 0%, #f7f7f8 50%, var(--bg) 100%); box-shadow: inset 0 0 0 1px #0000000d;
}
.in-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.in-day-top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; font-size: 13px; color: var(--fg-3); }
.in-day-play { appearance: none; border: 0; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--bg-1); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-3); cursor: pointer; }
.in-day-play:hover { background: var(--bg-2); }
.in-day-play svg { width: 14px; height: 14px; }
.in-day-play[aria-pressed="true"] .pl, .in-day-play[aria-pressed="false"] .pa { display: none; }
.in-day-when { display: flex; align-items: baseline; gap: 8px; }
.in-day-when b { min-width: 3.1em; font-size: 22px; font-weight: 520; letter-spacing: -0.02em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.in-day-ttl { display: flex; gap: 8px; padding-left: 20px; box-shadow: -1px 0 0 var(--line-3); }
.in-day-ttl b { color: var(--fg-1); font-weight: 500; }
.in-day-who { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.in-day-who button { appearance: none; border: 0; height: 32px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-3); font: inherit; font-size: 13px; cursor: pointer; transition: color .2s, background .2s; }
.in-day-who button:hover { color: var(--fg-1); }
.in-day-who button[aria-pressed="true"] { color: var(--fg-1); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3), var(--glass, none); }
.in-k { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.in-k.c { background: var(--d-c); }
.in-k.g { background: var(--d-g); }

.in-day-row { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; }
.in-day-plot { position: relative; min-width: 0; --lbl: 150px; }
.in-day-hours { position: relative; height: 22px; margin-left: var(--lbl); font-size: 11px; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.in-day-hours span { position: absolute; top: 0; transform: translateX(-50%); }
.in-day-hours span:first-child { transform: none; }
.in-day-hours span:last-child { transform: translateX(-100%); }
.in-day-lanes { position: relative; }
.in-lane { position: relative; height: 62px; display: grid; grid-template-columns: var(--lbl) minmax(0, 1fr); align-items: center; }
.in-lane + .in-lane { box-shadow: 0 -1px 0 var(--d-grid); }
.in-lane > span { font-size: 13px; color: var(--fg-2); padding-right: 16px; }
.in-lane > span small { display: block; font-size: 11.5px; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.in-lane.acts { height: 46px; }
.in-lane.acts > span { color: var(--fg-3); }
.in-ln { position: relative; height: 100%; background: repeating-linear-gradient(to right, var(--d-grid) 0 1px, transparent 1px calc(100% / 11)); background-size: calc(100% + 1px) 100%; }
.in-call { position: absolute; top: 50%; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--r), 5px); grid-auto-columns: 5px; gap: 1.5px; padding: 3px; margin: 0; border-radius: 4px; transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: transform .45s var(--ease-spring), opacity .3s, background .3s; }
.in-call b { border-radius: 1.5px; background: var(--d-c); }
.in-call.g b { background: var(--d-g); }
.in-call.on { transform: translate(-50%, -50%); opacity: .9; }
.in-call.fresh { background: color-mix(in srgb, var(--fg-1) 12%, transparent); }
.in-call.dim { opacity: .12; }
.in-call.on:hover { opacity: 1; background: color-mix(in srgb, var(--fg-1) 10%, transparent); }
/* the act lane: settings and connections as thin pins, with the ChatGPT connection drawn as a span */
.in-span { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--d-g) 55%, transparent); transform-origin: left; transform: scaleX(0); transition: transform .2s linear; }
.in-pin { position: absolute; top: 9px; bottom: 9px; width: 0; border-left: 1px solid var(--fg-3); opacity: 0; transition: opacity .3s; }
.in-pin.on { opacity: 1; }
.in-pin i { position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 2px; background: var(--fg-2); transform: rotate(45deg); }
.in-pin.end i { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.in-day-head { position: absolute; top: 18px; bottom: 54px; left: var(--lbl); width: 1px; pointer-events: none; background: var(--d-now); opacity: .55; }
.in-day-head::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--d-now); }
.in-day-tip { position: absolute; z-index: 3; pointer-events: none; width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 16px 40px #00000059; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
:root[data-theme="light"] .in-day-tip { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 16px 40px #00000014; }
.in-day-tip b { display: block; color: var(--fg-1); font-weight: 500; }
.in-day-tip small { display: block; margin-top: 2px; color: var(--fg-4); font-size: 11.5px; }
.in-day-scrub { display: block; margin: 14px 0 0 var(--lbl); padding-bottom: 6px; }
.in-day-scrub input { width: 100%; accent-color: var(--fg-2); }

.in-day-side { padding: 18px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 40px #0000004d; font-size: 13px; }
:root[data-theme="light"] .in-day-side { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 16px 40px #00000010; }
.in-day-h { font-size: 12px; color: var(--fg-4); margin-bottom: 8px; }
.in-day-sent { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.in-day-sent li { display: grid; gap: 1px; color: var(--fg-3); font-size: 12px; line-height: 1.35; }
.in-day-sent b { font-size: 20px; font-weight: 520; letter-spacing: -0.02em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.in-day-feed { list-style: none; margin: 0; padding: 0; height: 292px; overflow: hidden; }
.in-day-feed li { padding: 9px 0; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; line-height: 1.4; }
.in-day-feed li.in { animation: in-day-in .4s var(--ease-enter); }
@keyframes in-day-in { from { opacity: 0; transform: translateY(-5px); } }
.in-day-feed time { color: var(--fg-4); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.in-day-feed b { display: block; font-weight: 500; color: var(--fg-1); }
.in-day-feed span { color: var(--fg-3); }
.in-day-feed li.act b { color: var(--fg-2); font-weight: 450; }
.in-day-feed li.dim { opacity: .3; }

.in-day-never { margin: 28px -32px 0; padding: 20px 32px 24px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.in-day-never .in-day-h { margin: 0; }
.in-day-never ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13px; color: var(--fg-3); }
.in-day-never li { display: inline-flex; align-items: baseline; gap: 8px; }
.in-day-never b { font-weight: 520; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.in-day-never p { margin-left: auto; font-size: 12.5px; color: var(--fg-4); }
.in-day-cap { position: static; margin-top: 28px; }

@media (max-width: 1100px) {
  .in-day-row { grid-template-columns: 1fr; }
  .in-day-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .in-day-side > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .in-day-side > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .in-day-side > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .in-day-side > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .in-day-feed { height: 196px; }
  .in-day-never p { margin-left: 0; }
}
@media (max-width: 768px) {
  .in-day { margin-top: 56px; padding: 20px 14px 0; border-radius: 16px; }
  .in-day-ttl { display: none; }
  .in-day-who { margin-left: 0; }
  .in-day-who button { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .in-day-plot { --lbl: 0px; }
  .in-lane { grid-template-columns: 1fr; height: 76px; align-items: stretch; }
  .in-lane.acts { height: 52px; }
  .in-lane > span { position: absolute; left: 0; top: 4px; font-size: 11.5px; color: var(--fg-3); z-index: 1; }
  .in-ln { margin-top: 20px; height: calc(100% - 20px); }
  .in-day-feed { height: 228px; }
  .in-lane > span small { display: none; }
  .in-day-hours span:nth-child(even) { display: none; }
  .in-day-side { display: block; }
  .in-day-never { margin: 24px -14px 0; padding: 18px 14px 20px; }
  .in-day-never ul { gap: 8px 18px; }
}

/* ---------- siblings, pre-footer ---------- */
.in-sib-sec { padding: 96px 0 64px; border-top: 1px solid var(--line); }
.in-sib-h { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.026em; font-weight: 560; }
.in-sibs { margin-top: 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.in-sib { position: relative; min-height: 280px; padding: 24px; border-radius: 12px; display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg-1) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.in-sib:hover { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.in-sib-viz { flex: 1; display: grid; place-items: center; min-height: 140px; }
.in-sib small { font-size: 13px; color: var(--fg-3); }
.in-sib b { margin-top: 4px; font-size: 15px; font-weight: 500; padding-right: 28px; }
.in-chev { position: absolute; right: 22px; bottom: 24px; width: 16px; height: 16px; color: var(--fg-3); transition: transform .2s, color .2s; }
.in-sib:hover .in-chev { transform: translateX(3px); color: var(--fg-1); }
.in-modes { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg); font-size: 12.5px; color: var(--fg-3); }
.in-modes span { height: 28px; padding: 0 12px; border-radius: 7px; display: inline-flex; align-items: center; }
.in-modes .on { background: var(--bg-3); color: var(--fg-1); box-shadow: var(--glass); }
.in-sib-ask { display: grid; gap: 8px; justify-items: end; font-size: 12.5px; }
.in-sib-q { padding: 7px 10px; border-radius: 9px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-1); }
.in-sib-draft { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg); font-size: 13px; color: var(--fg-1); }
.in-pre { padding: 96px 0 128px; }
.in-pre-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.in-pre h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.026em; font-weight: 560; }

/* ---------- hero additions: actions, the address chip, Works with ---------- */
.in-hero-act { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.in-addr { height: 44px; padding: 0 4px 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--bg-1) 82%, transparent); box-shadow: inset 0 0 0 1px var(--line-3); font-size: 13px; color: var(--fg-3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.in-addr code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--fg-1); white-space: nowrap; }
.in-addr-k { color: var(--fg-4); font-size: 12px; }
.in-addr.sm { height: 40px; margin-top: 12px; padding-left: 14px; border-radius: 10px; background: var(--bg-1); max-width: 100%; }
.in-addr.sm code { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.in-copy { position: relative; appearance: none; border: 0; width: 36px; height: 36px; flex: none; border-radius: 999px; display: grid; place-items: center; background: transparent; color: var(--fg-3); cursor: pointer; transition: color .16s, background .16s; }
.in-addr.sm .in-copy { border-radius: 8px; width: 34px; height: 34px; }
.in-copy:hover, .in-copy:focus-visible { color: var(--fg-1); background: var(--bg-3); }
.in-copy svg { width: 15px; height: 15px; }
.in-copied { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 3px 8px; border-radius: 6px; background: var(--inv); color: var(--inv-fg); font-size: 11.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.in-copy.done .in-copied { opacity: 1; transform: translate(-50%, 0); }
.in-works { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; font-size: 14px; color: var(--fg-2); }
.in-works-k { color: var(--fg-4); font-size: 13px; padding-right: 2px; }
.in-works span:not(.in-works-k) { display: inline-flex; align-items: center; gap: 22px; }
.in-works span:not(.in-works-k):not(:last-child)::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }

/* ---------- shared section pieces ---------- */
.in-sec-tight { padding: 120px 0 112px; }
.in-h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.026em; font-weight: 560; }
.in-cap { margin-top: 28px; max-width: 520px; }
.in-cap h3 { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.in-cap p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--fg-3); }

/* ---------- 1: setup (docs style) beside the consent page ---------- */
.in-setup { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: start; }
.in-ol { list-style: none; margin: 0; padding: 0; display: grid; }
.in-ol li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 0 0 28px; }
.in-ol li:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 4px; width: 1px; background: var(--line-3); }
.in-num { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg); font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.in-ol b { display: block; padding-top: 3px; font-size: 15px; font-weight: 500; color: var(--fg-1); }
.in-ol p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--fg-3); }
.in-tabs { margin-top: 8px; display: flex; gap: 4px; padding: 3px; width: fit-content; max-width: 100%; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-1); }
.in-tabs button { appearance: none; border: 0; height: 34px; padding: 0 14px; border-radius: 8px; background: transparent; color: var(--fg-3); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: color .16s, background .16s; }
.in-tabs button:hover { color: var(--fg-1); }
.in-tabs button[aria-selected="true"] { background: var(--bg-3); color: var(--fg-1); box-shadow: var(--glass); }
.in-panel { margin-top: 16px; min-height: 132px; }
.in-panel p { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.in-ic { padding: 1px 6px; border-radius: 5px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--fg-1); }
.in-code { position: relative; margin-top: 14px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); }
.in-code pre { margin: 0; padding: 16px 56px 16px 16px; overflow-x: auto; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.6; color: var(--fg-1); white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; }
.in-addr code, .in-ic { font-variant-ligatures: none; }
.in-code .in-copy { position: absolute; right: 8px; top: 8px; border-radius: 8px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.in-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.55; color: var(--fg-3); }

.in-cstage { position: relative; padding: 40px 40px 0; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 0%, #1b1c1f 0%, #111214 50%, var(--bg) 100%); box-shadow: inset 0 1px 0 #ffffff12, inset 0 0 0 1px #ffffff0a; }
:root[data-theme="light"] .in-cstage { background: radial-gradient(70% 80% at 50% 0%, #f1f1f3 0%, #f7f7f8 55%, var(--bg) 100%); box-shadow: inset 0 0 0 1px #0000000d; }
.in-cstage .win.in-consent { position: relative; left: auto; top: auto; width: 100%; max-width: 560px; margin: 0 auto; height: auto; padding-bottom: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ---------- 2: tool list ---------- */
.in-tools { margin-top: 72px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 56px; border-top: 1px solid var(--line); }
.in-tg-h { padding: 24px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.in-tg-h b { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.in-tg-h span { font-size: 13px; color: var(--fg-4); }
.in-tg ul { list-style: none; margin: 0; padding: 0; }
.in-tg li { min-height: 56px; padding: 12px 0; display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; border-top: 1px solid var(--line-2); font-size: 14px; }
.in-tg li b { font-weight: 500; color: var(--fg-1); }
.in-tg li span { color: var(--fg-3); line-height: 1.5; }
.in-tag { font-style: normal; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-3); white-space: nowrap; }
.in-tag.dim { color: var(--fg-4); }
.in-tag.no { color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--bg-1); }
.in-tg ul + .in-tg-h { margin-top: 28px; }
.in-steps { position: sticky; top: 112px; }

/* ---------- 3: four switches, a plain numbered rail ---------- */
.in-gates { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.in-gates::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--line-3); }
.in-gate { position: relative; }
.in-g-n { position: relative; display: inline-grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-3); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--fg-3); transition: color .5s, box-shadow .5s, background .5s; }
.in-gate.on .in-g-n { color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu); background: var(--cu-tint); }
.in-gate b { display: block; margin-top: 20px; font-size: 15px; font-weight: 500; color: var(--fg-1); }
.in-gate p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--fg-3); }

/* ---------- 5: security notes ---------- */
.in-sn { margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.in-sn > div { padding: 28px 32px 32px 0; border-bottom: 1px solid var(--line-2); }
.in-sn > div:not(:nth-child(3n+1)) { padding-left: 32px; box-shadow: inset 1px 0 0 var(--line-2); }
.in-sn dt { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.in-sn dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-3); }

/* ---------- 6: questions ---------- */
.in-faq-sec { padding-top: 40px; }
.in-faq-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.in-faq { border-top: 1px solid var(--line); }
.in-faq details { border-bottom: 1px solid var(--line-2); }
.in-faq summary { list-style: none; min-height: 60px; padding: 16px 40px 16px 0; position: relative; display: flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--fg-1); cursor: pointer; }
.in-faq summary::-webkit-details-marker { display: none; }
.in-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.4px solid var(--fg-3); border-bottom: 1.4px solid var(--fg-3); transform: rotate(45deg); transition: transform .2s; }
.in-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.in-faq summary:hover::after { border-color: var(--fg-1); }
.in-faq details p { padding: 0 40px 20px 0; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--fg-3); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .in-setup { grid-template-columns: 1fr; gap: 48px; }
  .in-steps { max-width: 560px; position: static; }
  .in-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .in-gates::before { display: none; }
  .in-sn { grid-template-columns: 1fr 1fr; }
  .in-sn > div:not(:nth-child(3n+1)) { padding-left: 0; box-shadow: none; }
  .in-sn > div:nth-child(even) { padding-left: 32px; box-shadow: inset 1px 0 0 var(--line-2); }
}
@media (max-width: 900px) {
  .in-tools { grid-template-columns: 1fr; }
  .in-sibs { grid-template-columns: 1fr; }
  .in-faq-wrap { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 768px) {
  .in-hero { padding-top: 128px; }
  .in-fx { width: 820px; height: 620px; top: 40px; -webkit-mask-image: radial-gradient(46% 50% at 50% 42%, #000 20%, transparent 100%); mask-image: radial-gradient(46% 50% at 50% 42%, #000 20%, transparent 100%); }
  .in-lede { font-size: 16px; }
  .in-hero-act { flex-direction: column; gap: 14px; }
  .in-addr { max-width: 100%; }
  .in-addr-k { display: none; }
  .in-addr code { font-size: 12.5px; }
  .in-copy { width: 40px; height: 40px; }
  .in-addr.sm .in-copy { width: 40px; height: 40px; }
  .in-works { margin-top: 24px; font-size: 14px; gap: 8px 16px; }
  .in-works-k { flex-basis: 100%; text-align: center; padding: 0; }
  .in-works span:not(.in-works-k) { gap: 16px; }
  .in-sib { min-height: 0; }
  .in-sib-viz { min-height: 120px; }
  .in-row { margin-top: 56px; height: 420px; -webkit-mask-image: none; mask-image: none; }
  .in-p { width: 300px; height: 400px; font-size: 12.5px; }
  .in-track { gap: 16px; }
  .in-row-foot { justify-content: space-between; }
  .in-arrow { width: 40px; height: 40px; }
  .in-sec { padding: 80px 0 72px; }
  .in-sec-tight { padding: 72px 0 64px; }
  .in-two { font-size: 20px; }
  .in-setup { margin-top: 48px; }
  .in-tabs { width: 100%; }
  .in-tabs button { flex: 1; height: 40px; padding: 0 8px; }
  .in-panel { min-height: 0; }
  .in-cstage { padding: 16px 12px 0; margin: 0 -8px; border-radius: 16px; }
  .in-c-top { padding: 0 16px; }
  .in-c-top > span:last-child { display: none; }
  .in-c-body { padding: 18px 16px 4px; }
  .in-c-row { grid-template-columns: 1fr; gap: 4px; }
  .in-c-foot { padding: 16px; }
  .in-c-done { margin: 0 16px; }
  .in-opt .r { display: none; }
  .in-cap { margin-top: 20px; }
  .in-tools { margin-top: 48px; }
  .in-tg li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .in-tg li span { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .in-tg li i { grid-column: 2; grid-row: 1; }
  .in-gates { grid-template-columns: 1fr; margin-top: 48px; row-gap: 32px; }
  .in-gate b { margin-top: 12px; }
  .in-sn { grid-template-columns: 1fr; margin-top: 40px; }
  .in-sn > div, .in-sn > div:nth-child(even) { padding: 22px 0; box-shadow: none; }
  .in-faq summary { font-size: 15.5px; }
  .in-sib-sec { padding-top: 72px; }
  .in-pre { padding: 72px 0 96px; }
  .in-pre h2 { font-size: 30px; }
  .in-day-play { width: 40px; height: 40px; }
  .in-day-who button { height: 40px; padding: 0 12px; }
  .in-day-scrub input { height: 40px; margin: 0; }
  .in-call::after { content: ""; position: absolute; inset: -12px -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .in-p.on::after, .in-p-tool.run .dot { animation: none; }
}

/* ================= integration pass (24 Oct) ================= */
/* hero: the LED mark runs at half speed (data-fx-speed, driven in integrations.js) and sits further back */
.in-fx { opacity: .24; filter: grayscale(1) brightness(.85); } /* the brand mark is silver: copper is for AI only */
.in-fx canvas { transition: opacity 1.2s var(--ease-spring); }
:root[data-theme="light"] .in-fx { opacity: .3; filter: invert(1) grayscale(1) contrast(1.1); mix-blend-mode: multiply; }

/* six History lines, in place of the day scrubber */
.in-hist { margin: 48px 0 0; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); padding: 0 32px; }
.in-hist-top { display: flex; align-items: baseline; gap: 12px; padding: 20px 0 16px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--fg-3); }
.in-hist-top b { font-weight: 520; font-size: 15px; color: var(--fg-1); }
.in-hist-top .r { margin-left: auto; }
.in-hist-l { list-style: none; margin: 0; padding: 0; }
.in-hist-l li { display: grid; grid-template-columns: 56px 28px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.in-hist-l li:last-child { border-bottom: 0; }
.in-hist-l time { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.in-hist-l li div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; }
.in-hist-l li b { font-weight: 500; color: var(--fg-1); }
.in-hist-l li div span { color: var(--fg-3); }
.in-hist-ic { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; color: var(--fg-3); background: var(--bg-3); }
.in-hist-ic svg { width: 12px; height: 12px; }
.in-hist .ap-av.mr { background: #5a3a22; color: #f6e3d2; box-shadow: none; }
.in-hist .in-day-never { margin: 0 -32px; }
:root[data-theme="light"] .in-hist { background: #fff; box-shadow: inset 0 0 0 1px #0000001a, 0 16px 40px #0000000d; }
@media (max-width: 760px) {
  .in-hist { padding: 0 16px; margin-top: 32px; }
  .in-hist-top { flex-wrap: wrap; }
  .in-hist-top .r { margin-left: 0; width: 100%; }
  .in-hist-l li { grid-template-columns: 44px 24px minmax(0, 1fr); gap: 10px; }
  .in-hist-l li div { font-size: 14px; flex-direction: column; gap: 2px; }
  .in-hist .in-day-never { margin: 0 -16px; padding: 18px 16px 20px; }
}

/* ---------- minimal pass (24 Oct): labels, not sentences ---------- */
.in-tools.in-lbls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; border-top: 0; margin-top: 56px; }
.in-lbls .in-tg-h { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.in-lbls .in-tg-h span { font-variant-numeric: tabular-nums; }
.in-lbls .in-tg li { display: block; min-height: 0; padding: 10px 0; border-top: 0; font-size: 14.5px; color: var(--fg-1); }
.in-lbls .in-tg li[title] { cursor: help; }
.in-lbls .in-tg ul.dim li { color: var(--fg-4); }
.in-lbls .in-tg ul.no li { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--fg-4); text-decoration-thickness: 1px; }
.in-lbls .in-tg ul + .in-tg-h { margin-top: 24px; }
.in-gate p { color: var(--fg-4); font-size: 13.5px; }
.in-gate.on .in-g-n { color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-3); background: var(--bg-2); } /* copper is AI only */
.in-hist .ap-av.mr { background: #3b4a5c; color: #eef3f8; }
.in-hist-l li b .ap-ev, .in-hist-l li b .ap-key { margin-left: 6px; }
.in-av { width: 20px; height: 20px; font-size: 9px; background: #3b4a5c; color: #eef3f8; }
.in-sn dd { color: var(--fg-4); font-size: 13.5px; }
@media (max-width: 1023px) { .in-tools.in-lbls { grid-template-columns: 1fr 1fr; gap: 32px 32px; } }
@media (max-width: 640px) { .in-tools.in-lbls { grid-template-columns: 1fr; } }
.in-p-a .ref .in-sg { color: var(--cu); } /* Suggested is copper */
.in-p-a .ref span:not(.ap-key) { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- depth restored, quiet (24 Oct, follow-up): status-icon rows, detail on hover ---------- */
.in-tools.in-rows { grid-template-columns: 1.15fr 1fr; gap: 0 56px; border-top: 0; margin-top: 56px; }
.in-rows .in-tg-h { padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.in-rows .in-tg ul + .in-tg-h { margin-top: 28px; }
.in-prog { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--fg-3); }
.in-prog svg { width: 13px; height: 13px; color: var(--fg-3); }
.in-rows .in-tg li { min-height: 0; padding: 11px 0; display: grid; grid-template-columns: 18px 168px minmax(0, 1fr); gap: 12px; align-items: center; border-top: 0; border-bottom: 1px solid var(--line-2); font-size: 14px; cursor: default; }
.in-rows .in-tg li b { font-weight: 500; color: var(--fg-1); }
.in-rows .in-tg li > span:last-child { color: var(--fg-4); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--dur-hover); }
.in-rows .in-tg li:hover > span:last-child { opacity: 1; }
.in-st { display: grid; place-items: center; width: 16px; height: 16px; color: var(--fg-2); }
.in-st svg { width: 14px; height: 14px; }
.in-rows li.status .in-st, .in-rows li.later .in-st { color: var(--fg-4); }
.in-rows li.later b { color: var(--fg-3); }
.in-rows li.never .in-st { color: var(--fg-4); }
.in-rows li.never b { color: var(--fg-3); }
.in-q1 { margin-top: 20px; font-size: 13.5px; color: var(--fg-4); }
.in-c-row b.q { color: var(--fg-2); font-weight: 400; }
.in-c-row[title] { cursor: help; }
.in-c-top .in-av { display: inline-grid; vertical-align: middle; margin-right: 8px; }
.in-ol p { font-size: 13.5px; color: var(--fg-4); margin-top: 2px; }
@media (max-width: 1023px) { .in-tools.in-rows { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .in-rows .in-tg li { grid-template-columns: 18px minmax(0, 1fr); }
  .in-rows .in-tg li > span:last-child { display: none; }
}

/* =====================================================================
   Bold pass (24 Oct): Linear's frame. Full-bleed hairline bands, quiet lists with status icons,
   a properties side panel per surface. No glow, no bounce; copper only for Enpasse AI.
   ===================================================================== */
.in-fb { margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.in-fb > .wrap { display: grid; align-items: stretch; }
.in-fb > .wrap > * { min-width: 0; }
.in-fb > .wrap > * + * { box-shadow: -1px 0 0 var(--line); }

/* status icons, CSS only: todo, half (in progress / status only), done, later (dashed), never (slashed) */
.st { position: relative; flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px currentColor; color: var(--fg-4); vertical-align: -2px; transition: color var(--dur-hover), background var(--dur-hover); }
.st[data-st="half"] { color: var(--fg-3); }
.st[data-st="half"]::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(currentColor 0 50%, transparent 0); }
.st[data-st="done"] { color: var(--fg-2); background: currentColor; box-shadow: none; }
.st[data-st="done"]::after { content: ""; position: absolute; left: 4.6px; top: 2.6px; width: 3px; height: 6px; border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.st[data-st="later"] { box-shadow: none; border: 1.4px dashed currentColor; box-sizing: border-box; }
.st[data-st="never"]::after, .st[data-st="fail"]::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1.4px; margin-left: -.7px; background: currentColor; transform: rotate(45deg); }
.st[data-st="fail"] { color: var(--fg-1); }
.st[data-st="run"] { color: var(--fg-2); }
.st[data-st="run"]::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(currentColor 0 25%, transparent 0); animation: in-spin 1s linear infinite; }
@keyframes in-spin { to { transform: rotate(360deg); } }
.in-ring { --p: 0; display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px; margin-right: 8px; background: conic-gradient(var(--fg-3) calc(var(--p) * 360deg), var(--line-3) 0); -webkit-mask: radial-gradient(circle, transparent 3.6px, #000 4px); mask: radial-gradient(circle, transparent 3.6px, #000 4px); }
.in-prog { display: inline-flex; align-items: center; color: var(--fg-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* properties side panel */
.in-props { padding: 28px 0 28px 28px; font-size: 13px; }
.in-props-h { font-size: 13px; font-weight: 500; color: var(--fg-1); padding-bottom: 14px; }
.in-props dl { margin: 0; display: grid; }
.in-props dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 34px; }
.in-props dt { color: var(--fg-4); }
.in-props dd { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--fg-1); min-width: 0; transition: opacity .3s; }
.in-props dd.dim { color: var(--fg-3); }
.in-props .ap-ev { flex: none; }

/* ---------- 1: a live connection ---------- */
.in-live { grid-template-columns: minmax(0, 330px) minmax(0, 1fr) 300px; }
.in-live-l { padding: 36px 32px 36px 0; }
.in-ls { list-style: none; margin: 0; padding: 0; display: grid; }
.in-ls li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; padding: 0 0 22px; }
.in-ls li:not(:last-child)::before { content: ""; position: absolute; left: 6.5px; top: 20px; bottom: 2px; width: 1px; background: var(--line-3); }
.in-ls .st { margin-top: 3px; }
.in-ls li.on .st { color: var(--fg-1); }
.in-ls b { display: block; font-size: 14.5px; font-weight: 500; color: var(--fg-1); }
.in-ls p { margin-top: 2px; font-size: 13px; color: var(--fg-4); }
.in-ls .in-addr { margin-top: 10px; }
.in-live-l .in-tabs { margin-top: 8px; }
.in-live-c { padding: 36px 32px 0; display: flex; align-items: flex-end; }
.in-live-c .in-cstage { width: 100%; padding: 28px 28px 0; border-radius: 12px 12px 0 0; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .in-live-c .in-cstage { background: var(--bg-2); box-shadow: inset 0 0 0 1px #0000000d; }
.in-live-c .win.in-consent { box-shadow: inset 0 0 0 1px var(--line-3); }
.in-c-done { transition: opacity .3s var(--ease-swap); }

/* ---------- 2: read-scope map ---------- */
.in-map { position: relative; grid-template-columns: 200px minmax(80px, 1fr) minmax(0, 340px) 300px; }
.in-map > .in-map-w { box-shadow: none; }
.in-map-src { padding: 36px 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.in-node { padding: 14px 16px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); display: grid; gap: 8px; }
.in-node b { font-weight: 500; font-size: 14px; }
.in-node span { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12.5px; }
.in-node-k { font-size: 12px; color: var(--fg-4); padding-left: 16px; }
.in-map-w { width: 100%; height: 100%; overflow: visible; }
.in-map-w path { fill: none; stroke: var(--line-3); stroke-width: 1; transition: stroke .3s; }
.in-map-w path.later { stroke-dasharray: 3 4; }
.in-map-w path.status { stroke-dasharray: 1 3; }
.in-map-w path.on { stroke: var(--fg-3); }
.in-map-w path.flow { stroke: var(--fg-2); stroke-width: 1.2; stroke-dasharray: 3 140; animation: in-march 2.6s linear infinite; }
.in-map-w path.flow.d1 { animation-delay: -.5s; } .in-map-w path.flow.d2 { animation-delay: -1s; } .in-map-w path.flow.d3 { animation-delay: -1.5s; } .in-map-w path.flow.d4 { animation-delay: -2s; } .in-map-w path.flow.d5 { animation-delay: -2.3s; }
@keyframes in-march { from { stroke-dashoffset: 143; } to { stroke-dashoffset: 0; } }
.in-map-w line.wall { stroke: var(--fg-4); stroke-width: 1; }
.in-map-scope { padding: 28px 0; box-shadow: none !important; }
.in-map-g { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 8px; font-size: 13px; }
.in-map-g b { font-weight: 500; }
.in-map-g.sub { padding-top: 16px; }
.in-map-g.sub b { font-weight: 400; color: var(--fg-4); font-size: 12px; }
.in-mi { appearance: none; border: 0; background: none; font: inherit; color: inherit; width: 100%; height: 34px; padding: 0 12px; border-radius: 7px; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; font-size: 14px; cursor: pointer; transition: background var(--dur-hover); }
.in-mi b { font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-mi > span:last-child { color: var(--fg-4); font-size: 12.5px; }
.in-mi:hover, .in-mi.on { background: var(--bg-2); }
.in-mi.later b, .in-mi.never b { color: var(--fg-3); }
.in-mi:focus-visible { outline: 1px solid var(--fg-3); outline-offset: -1px; }

/* ---------- 3: a request through the checks ---------- */
.in-flow { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.in-reqs { padding: 28px 28px 28px 0; display: grid; align-content: start; gap: 2px; }
.in-req { appearance: none; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 7px; transition: background var(--dur-hover); }
.in-req .st { grid-row: 1 / 3; }
.in-req-w { font-size: 12px; color: var(--fg-4); }
.in-req b { font-weight: 450; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-req:hover, .in-req[aria-selected="true"] { background: var(--bg-2); }
.in-pipe { padding: 28px 0 28px 36px; display: grid; align-content: start; gap: 24px; }
.in-pipe-h { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.in-pipe-h b { font-weight: 500; }
.in-pipe-h .r { margin-left: auto; color: var(--fg-4); font-size: 13px; }
.in-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.in-checks li { position: relative; display: grid; gap: 12px; padding-right: 12px; font-size: 12.5px; color: var(--fg-4); transition: color .3s; }
.in-checks li::before { content: ""; position: absolute; left: 22px; right: 8px; top: 7px; height: 1px; background: var(--line-3); }
.in-checks li:last-child::before { display: none; }
.in-checks li::after { content: ""; position: absolute; left: 22px; top: 7px; height: 1px; width: 0; background: var(--fg-3); transition: width .35s var(--ease-swap); }
.in-checks li.ok::after { width: calc(100% - 30px); }
.in-checks li:last-child::after { display: none; }
.in-checks li b { font-weight: 450; line-height: 1.35; }
.in-checks li.ok, .in-checks li.stop { color: var(--fg-1); }
.in-checks li.skip { opacity: .4; }
.in-reply { min-height: 76px; padding: 16px 18px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; gap: 6px; transition: opacity .3s var(--ease-swap); }
.in-reply-k { font-size: 12px; color: var(--fg-4); }
.in-reply p { font-size: 14px; color: var(--fg-1); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-reply.wait { opacity: .35; }

/* ---------- 4: four switches as small panels ---------- */
.in-gates.in-gp { margin: 0 auto; padding: 0 var(--outer); gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.in-gates.in-gp::before { display: none; }
.in-gp .in-gate { padding: 32px 28px 32px; }
.in-gp .in-gate:first-child { padding-left: 0; }
.in-gp .in-gate + .in-gate { box-shadow: -1px 0 0 var(--line); }
.in-gp .in-gate b { margin-top: 16px; }
.in-gs { margin: 16px 0 14px; display: grid; }
.in-gs > div { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--fg-2); }
.in-gs > div > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-gs > div.off { color: var(--fg-4); }
.in-gs > div.kv span { color: var(--fg-4); }
.in-gs em { font-style: normal; display: inline-flex; align-items: center; color: var(--fg-1); white-space: nowrap; }
.in-tg-on, .in-tg-off { flex: none; position: relative; width: 24px; height: 14px; border-radius: 99px; background: var(--fg-3); transition: background .4s; }
.in-tg-on::after, .in-tg-off::after { content: ""; position: absolute; top: 2px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); transition: left .4s var(--ease-swap); }
.in-tg-off { background: var(--line-3); }
.in-tg-off::after { left: 2px; background: var(--fg-4); }
.in-gp .in-gate:not(.on) .in-tg-on { background: var(--line-3); }
.in-gp .in-gate:not(.on) .in-tg-on::after { left: 2px; }
.in-gp .in-gate { transition: opacity .4s; }
.in-gp .in-gate:not(.on) .in-gs { opacity: .55; }

/* ---------- 5: History with its properties ---------- */
.in-hwrap { grid-template-columns: minmax(0, 1fr) 300px; }
.in-hwrap .in-hist { margin: 0; padding: 0 32px 0 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-theme="light"] .in-hwrap .in-hist { background: none; box-shadow: none; }
.in-hwrap .in-hist .in-day-never { margin: 0 -32px 0 0; padding-left: 0; }
.in-hist-l li { cursor: pointer; border-radius: 0; transition: background var(--dur-hover); }
.in-hist-l li.sel { background: linear-gradient(90deg, transparent, var(--bg-2) 8%, var(--bg-2) 92%, transparent); }
.in-hist-l li:focus-visible { outline: 1px solid var(--fg-3); outline-offset: -1px; }

@media (max-width: 1180px) {
  .in-live { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .in-live .in-props { grid-column: 1 / -1; box-shadow: 0 -1px 0 var(--line); padding-left: 0; }
  .in-live .in-props dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .in-map { grid-template-columns: 180px minmax(60px, 1fr) minmax(0, 320px); }
  .in-map .in-props { grid-column: 1 / -1; box-shadow: 0 -1px 0 var(--line); padding-left: 0; }
  .in-gates.in-gp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-gp .in-gate:nth-child(3) { padding-left: 0; box-shadow: 0 -1px 0 var(--line); }
  .in-gp .in-gate:nth-child(4) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
}
@media (max-width: 860px) {
  .in-fb > .wrap > * + * { box-shadow: 0 -1px 0 var(--line); }
  .in-live, .in-flow, .in-hwrap { grid-template-columns: 1fr; }
  .in-live-l, .in-reqs { padding-right: 0; }
  .in-live-c { padding: 28px 0 0; }
  .in-live-c .in-cstage { padding: 16px 16px 0; }
  .in-pipe { padding-left: 0; }
  .in-hwrap .in-hist { padding-right: 0; }
  .in-hwrap .in-hist .in-day-never { margin-right: 0; }
  .in-props { padding-left: 0; }
  .in-map { grid-template-columns: 1fr; }
  .in-map-src, .in-map-w { display: none; }
  .in-map > .in-map-scope { box-shadow: none; }
  .in-map .in-props { box-shadow: 0 -1px 0 var(--line); }
  .in-checks { grid-template-columns: 1fr; gap: 14px; }
  .in-checks li { grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: center; }
  .in-checks li::before, .in-checks li::after { display: none; }
}
@media (max-width: 640px) {
  .in-live .in-props dl { grid-template-columns: 1fr; }
  .in-gates.in-gp { grid-template-columns: 1fr; }
  .in-gp .in-gate, .in-gp .in-gate:first-child { padding: 24px 0; }
  .in-gp .in-gate + .in-gate, .in-gp .in-gate:nth-child(3), .in-gp .in-gate:nth-child(4) { box-shadow: 0 -1px 0 var(--line); }
}
@media (prefers-reduced-motion: reduce) { .in-map-w path.flow { display: none; } .st[data-st="run"]::before { animation: none; } }

/* ================= Invention round: the consent page becomes the connection ================= */
.in-cn { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); padding-top: 48px; padding-bottom: 48px; }
.in-fb > .wrap.in-cn > * + * { box-shadow: none; }
.in-cn-src { display: flex; flex-direction: column; gap: 10px; padding-right: 48px; }
.in-cn-k { margin-top: 18px; font-size: 12.5px; color: var(--fg-3); }
.in-cn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.in-cn-none { font-size: 13px; color: var(--fg-4); }
.in-cn-row { padding: 12px 14px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; font-size: 13px; animation: in-left-in var(--dur-enter) var(--ease-spring) both; }
.in-cn-row .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); grid-row: span 2; }
.in-cn-row b { font-weight: 500; } .in-cn-row span:last-child { color: var(--fg-3); font-size: 12px; }
.in-cn-stage { position: relative; display: grid; justify-items: center; align-items: start; min-height: 380px; }
.in-cs { width: 100%; max-width: 460px; padding: 20px 22px 18px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px #0000004d; transform-origin: 0 0; transition: transform .6s var(--ease-swap), opacity .6s var(--ease-swap), filter .6s var(--ease-swap); }
:root[data-theme="light"] .in-cs { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 20px 60px #0000001a; }
.in-cs.gone { opacity: 0; filter: blur(6px); pointer-events: none; }
.in-cs.hidden { visibility: hidden; transition: none; }
.in-cs-top { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--fg-3); }
.in-cs-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-1); font-weight: 600; } .in-cs-brand svg { width: 18px; height: 9px; color: var(--fg-2); }
.in-cs-who { display: inline-flex; align-items: center; gap: 8px; }
.in-cs-h { margin-top: 18px; font-size: 18px; font-weight: 560; letter-spacing: -0.015em; }
.in-cs-p { margin-top: 4px; font-size: 13px; color: var(--fg-3); }
.in-cs-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.in-cs-o { border: 0; font: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; background: var(--bg-2); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-3); cursor: pointer; transition: box-shadow var(--dur-hover), background var(--dur-hover); }
.in-cs-o .rd { width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.25px var(--fg-4); flex: none; transition: box-shadow var(--dur-hover); }
.in-cs-o[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.in-cs-o[aria-checked="true"] .rd { box-shadow: inset 0 0 0 4px var(--fg-1); }
.in-cs-o .t { display: flex; flex-direction: column; min-width: 0; } .in-cs-o b { font-weight: 500; font-size: 13.5px; } .in-cs-o .t span { font-size: 12px; color: var(--fg-3); }
.in-cs-o.off { opacity: .55; cursor: not-allowed; }
.in-cs-o.off.tried { opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 55%, transparent); } .in-cs-o.off.tried .why { color: var(--red); }
.in-cs-o.done { cursor: default; } .in-cs-o.done .rd { box-shadow: none; background: var(--ok); }
.in-cs-o:focus-visible, .in-cs-f button:focus-visible, .in-cn-again:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }
.in-cs-f { margin-top: 16px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--fg-3); }
.in-cs-f .r { margin-left: auto; display: flex; gap: 6px; }
.in-cs-f button { border: 0; font: inherit; font-size: 12.5px; cursor: pointer; }
.in-cs-f button:disabled { opacity: .4; cursor: default; }
.in-cn-again { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 36px; padding: 0 16px; border: 0; border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--fg-1); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--dur-enter); }
.in-cn.idle .in-cn-again { opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .in-cn { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-top: 32px; padding-bottom: 32px; } .in-cn-src { padding-right: 0; } .in-cn-stage { min-height: 0; } .in-cs-f { flex-wrap: wrap; } }

/* ================= Invention round: what left, to the line ================= */
.in-left { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.in-left-chat { padding: 32px 32px 32px 0; display: flex; flex-direction: column; gap: 14px; }
.in-left-h { display: flex; gap: 10px; align-items: baseline; font-size: 13px; } .in-left-h b { font-weight: 500; } .in-left-h span { color: var(--fg-3); }
.in-left-qs { display: flex; flex-direction: column; gap: 6px; }
.in-lq { border: 0; font: inherit; text-align: left; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; color: var(--fg-2); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); cursor: pointer; transition: color var(--dur-hover), box-shadow var(--dur-hover), background var(--dur-hover); }
.in-lq:hover { color: var(--fg-1); }
.in-lq[aria-pressed="true"] { color: var(--fg-1); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--fg-4); }
.in-lq:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }
.in-left-a { min-height: 150px; font-size: 13.5px; line-height: 1.6; color: var(--fg-2); }
.in-left-a .dim { color: var(--fg-4); }
.in-left-a > * { animation: in-left-in var(--dur-enter) var(--ease-spring) both; }
.in-left-a .ap-ev { margin: 0 2px; }
@keyframes in-left-in { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } }
.in-left-map { padding: 32px 0 28px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.in-left-mh { display: flex; align-items: baseline; gap: 12px; font-size: 13px; } .in-left-mh b { font-weight: 500; } .in-left-mh span { margin-left: auto; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.in-left-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 330px; align-items: start; }
.in-left-pages .src-excerpt { padding: 10px 12px 12px; font-size: 11.5px; line-height: 1.5; animation: in-left-in var(--dur-enter) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 80ms); }
.in-left-pages .src-excerpt-h { margin: -10px -12px 8px; padding: 7px 12px; font-size: 11px; }
.in-left-pages ol { list-style: none; margin: 0; padding: 0; }
.in-left-pages li { padding: 2px 0 2px 8px; color: #b4b6ba; box-shadow: inset 2px 0 0 transparent; transition: color .4s, box-shadow .4s; }
.in-left-pages li.out { color: #111113; box-shadow: inset 2px 0 0 #111113; }
.in-left-rest { font-size: 12.5px; color: var(--fg-3); }
.in-left-hist { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); font-size: 12.5px; color: var(--fg-2); }
.in-left-hist .t { color: var(--fg-3); flex: none; }
@media (max-width: 900px) {
  .in-left { grid-template-columns: minmax(0, 1fr); }
  .in-left-chat { padding: 28px 0 8px; }
  .in-left-map { padding: 20px 0 28px; }
  .in-fb > .wrap.in-left > * + * { box-shadow: 0 -1px 0 var(--line); }
  .in-left-pages { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
.in-left-pages .src-excerpt-h .r { display: none; }
.in-left-pages[data-k="0"] li, .in-left-pages .mono li { font-family: "Geist Mono", monospace; }

/* ================= Linear round: A4 the mark in a channel row ================= */
.in-ch { margin: 0 auto 72px; max-width: 880px; padding: 0 var(--outer); }
.in-ch-row { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 56px); padding: 12px 0 0; }
.in-ch-row::before { content: ""; position: absolute; left: 0; right: 0; top: calc(12px + 52px); height: 1px; background: var(--line-3); }
.in-ch-g, .in-ch-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.in-ch-g { opacity: .85; padding-top: 18px; }
.in-ch-g.out { opacity: .6; }
.in-ch-t { width: 68px; height: 68px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 color-mix(in srgb, var(--fg-1) 5%, transparent); color: var(--fg-2); }
.in-ch-t svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.in-ch-g small { font-size: 12.5px; color: var(--fg-3); white-space: nowrap; }
.in-ch-c { transform: translateY(-6px); }
.in-ch-cap { margin-top: 18px; display: flex; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--fg-3); }
.in-ch-cap b { font-weight: 500; color: var(--fg-1); }
@media (max-width: 640px) {
  .in-ch { margin-bottom: 48px; padding: 0; }
  .in-ch-row { gap: 12px; }
  .in-ch-row::before { top: calc(12px + 36px); }
  .in-ch-t { width: 48px; height: 48px; border-radius: 12px; }
  .in-ch-t svg { width: 20px; height: 20px; }
  .in-ch-g { padding-top: 12px; }
  .in-ch-g small { font-size: 11px; }
  .in-ch-c .mark-tile { --s: 72px !important; }
}

/* ================= Linear round: four switches as one settings panel ================= */
.in-set { margin-top: 56px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); overflow: hidden; }
.in-set-h { height: 52px; padding: 0 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--fg-3); }
.in-set-h b { color: var(--fg-1); font-weight: 500; }
.in-set-h .r { margin-left: auto; color: var(--fg-4); }
.in-set-l { list-style: none; margin: 0; padding: 0; }
.in-set-l li { min-height: 84px; padding: 16px 24px; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, auto) 32px; gap: 20px; align-items: center; border-bottom: 1px solid var(--line-2); }
.in-set-l li:last-child { border-bottom: 0; }
.in-set-t b { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.in-set-t p { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--fg-3); }
.in-set-v { display: inline-flex; align-items: center; gap: 6px; justify-self: end; font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.in-set-off { margin-left: 6px; color: var(--fg-4); }
.in-set-l .in-g-n { justify-self: start; }
.in-sw { position: relative; width: 32px; height: 18px; border-radius: 99px; background: var(--line-3); transition: background 300ms var(--ease-swap); }
.in-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 99px; background: var(--fg-3); transition: transform 300ms var(--ease-swap), background 300ms var(--ease-swap); }
.in-set-l li.on .in-sw { background: var(--fg-2); }
.in-set-l li.on .in-sw::after { transform: translateX(14px); background: var(--bg); }
.in-set-l li .in-set-v { opacity: .45; transition: opacity 300ms var(--ease-swap); }
.in-set-l li.on .in-set-v { opacity: 1; }
.in-set-l li.on .in-g-n { color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-3); background: var(--bg-2); }
@media (max-width: 760px) {
  .in-set-h { padding: 0 16px; }
  .in-set-l li { padding: 16px; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px 14px; }
  .in-set-l .in-g-n { display: none; }
  .in-set-v { grid-column: 1; grid-row: 2; justify-self: start; white-space: normal; flex-wrap: wrap; }
  .in-sw { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .in-sw, .in-sw::after, .in-set-l li .in-set-v { transition: none; } }

/* ================= Linear round: bento card fragments (the shared .bento styles the card) ================= */
.in-bf { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--fg-2); }
.in-bf .in-modes { align-self: flex-start; font-size: 12.5px; color: var(--fg-3); }
.in-bf-row { width: 420px; height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border-radius: 9px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.in-bf-row .ap-badge { margin-left: auto; }
.in-bf-q { align-self: flex-start; padding: 8px 12px; border-radius: 10px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-1); white-space: nowrap; }
.in-bf-a { width: 400px; line-height: 1.6; }
.in-bf-a.dim { opacity: .55; }
.in-bf-dl { margin: 0; width: 360px; display: grid; }
.in-bf-dl > div { height: 40px; display: grid; grid-template-columns: 110px 1fr; align-items: center; border-bottom: 1px solid var(--line-2); }
.in-bf-dl dt { color: var(--fg-3); } .in-bf-dl dd { margin: 0; color: var(--fg-1); }