/* Arc Browser Use case study. Arc-like surfaces are drawn, not screenshots. */
:root {
  --arc-side: linear-gradient(162deg, #b9c2ff 0%, #cdb6ff 38%, #efb5e3 72%, #ffc3c8 100%);
  --arc-row: rgba(255, 255, 255, 0.42);
  --arc-row-on: rgba(255, 255, 255, 0.92);
  --arc-ink: #2a2440;
  --arc-ink-2: rgba(42, 36, 64, 0.62);
  --ok: #1f8a5b;
  --bad: #d23b4d;
  --warn: #b7791f;
  --accent: #4f63ff;
  --mono-bg: #0f1420;
  --mono-ink: #d7deea;
  --mono-dim: #7f8aa0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --arc-side: linear-gradient(162deg, #2c2f72 0%, #43307a 40%, #6a2f69 75%, #7a3245 100%);
    --arc-row: rgba(255, 255, 255, 0.06);
    --arc-row-on: rgba(255, 255, 255, 0.16);
    --arc-ink: #ece8ff;
    --arc-ink-2: rgba(236, 232, 255, 0.6);
    --ok: #4cc38a; --bad: #ff6b7d; --warn: #f2b25c; --accent: #8a98ff;
    --mono-bg: #0a0a0a;
  }
}
:root[data-theme="dark"] {
  --arc-side: linear-gradient(162deg, #2c2f72 0%, #43307a 40%, #6a2f69 75%, #7a3245 100%);
  --arc-row: rgba(255, 255, 255, 0.06);
  --arc-row-on: rgba(255, 255, 255, 0.16);
  --arc-ink: #ece8ff;
  --arc-ink-2: rgba(236, 232, 255, 0.6);
  --ok: #4cc38a; --bad: #ff6b7d; --warn: #f2b25c; --accent: #8a98ff;
  --mono-bg: #0a0a0a;
}

.cs-sec code, .cs-end code { font: 12.5px var(--mono); }
.cs-end p { margin: 0 0 8px; }
.cs-end .links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }

/* The hero lives in hero.css. */

/* ---------- 1. the hang ---------- */
.hang { position: absolute; inset: 0; }
.hang .col { position: absolute; top: 18px; bottom: 18px; border-radius: 10px; }
.hang .col h5 { margin: 0; padding: 12px 12px 0; font: 500 12px/16px var(--sans); color: var(--muted); }
.hang .lane { background: var(--card); box-shadow: 0 0 0 1px var(--card-edge); }
.hang .arcbox { background: var(--arc-side); }
.hang .arcbox h5 { color: var(--arc-ink-2); }
.node { position: absolute; height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 9px; font: 500 12px/16px var(--mono); background: var(--frame); color: var(--ink-2); white-space: nowrap; }
.node { white-space: normal; }
.node .ret { color: var(--ok); font-weight: 600; display: none; transform: scale(0); }
.node.patched .ret { display: inline-block; }
.node.patched .ret { animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.node.patched .call { text-decoration: line-through; text-decoration-color: var(--muted); opacity: 0.55; }
@keyframes pop { to { transform: scale(1); } }
.pill { position: absolute; left: 0; top: 0; height: 30px; padding: 0 11px; border-radius: 999px; display: flex; align-items: center; gap: 7px; font: 500 12.5px/16px var(--sans); background: var(--btn); color: var(--btn-ink); white-space: nowrap; will-change: transform; z-index: 2; }
.pill.done { background: var(--ok); color: #fff; }
.pill.stuck { background: var(--ctl); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--frame-2); }
.wire { position: absolute; height: 2px; background: repeating-linear-gradient(90deg, var(--muted) 0 6px, transparent 6px 11px); opacity: 0; transition: opacity 0.3s; background-size: 22px 2px; }
.wire.on { opacity: 0.7; animation: flow 0.8s linear infinite; }
@keyframes flow { to { background-position: 22px 0; } }
.ring { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(127, 127, 160, 0.25); border-top-color: var(--accent); opacity: 0; transition: opacity 0.3s; }
.ring.on { opacity: 1; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wait { position: absolute; font: 500 12px/16px var(--sans); color: var(--arc-ink-2); text-align: center; }
.wait b { display: block; font: 600 20px/24px var(--sans); color: var(--arc-ink); font-variant-numeric: tabular-nums; }
.minitabs { position: absolute; left: 10px; right: 10px; }
.minitab { height: 30px; border-radius: 8px; background: var(--arc-row); display: flex; align-items: center; gap: 9px; padding: 0 10px; font: 500 12px/16px var(--sans); color: var(--arc-ink); margin-bottom: 4px; overflow: hidden; white-space: nowrap; transform-origin: top; }
.minitab img { width: 14px; height: 14px; flex: none; }
.minitab span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.minitab .bar { position: absolute; }

/* ---------- 2 + 3. code ---------- */
.codebox { position: absolute; inset: 14px; border-radius: 10px; background: var(--mono-bg); color: var(--mono-ink); overflow: hidden; display: flex; flex-direction: column; }
.codebox .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font: 500 12px/16px var(--mono); color: var(--mono-dim); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.codebox .top b { color: #b9c4ff; font-weight: 500; }
.codebox .count { font-family: var(--sans); font-weight: 500; }
.codebox .count.ok { color: #6fe0a4; }
.codebox .count.bad { color: #ff8796; }
.codebox pre { margin: 0; padding: 14px; font: 12.5px/20px var(--mono); white-space: pre-wrap; word-break: break-all; flex: 1; overflow: hidden; color: #9aa6bd; }
.codebox pre .kw { color: #c792ea; }
.codebox pre .str { color: #a5d6a7; }
.codebox pre .nm { color: #e8edf7; }
.codebox pre .scr { color: #ffd479; }
.codebox pre .m { background: rgba(111, 140, 255, 0.28); color: #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(140, 160, 255, 0.5); }
.codebox pre .ins { display: inline-block; color: #6fe0a4; font-weight: 600; transform: scale(0); transform-origin: left center; }
.codebox pre .ins.on { animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.codebox .err { margin: 0 14px 14px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 107, 125, 0.12); color: #ffb3bd; font: 12px/18px var(--mono); display: none; }
.codebox .err.on { display: block; }

.namebox { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
.picker { background: var(--card); border-radius: 12px; box-shadow: 0 0 0 1px var(--card-edge), 0 12px 32px rgba(20, 16, 50, 0.08); padding: 14px; align-self: center; }
.picker small { display: block; font: 500 11.5px/16px var(--sans); color: var(--muted); margin-bottom: 8px; }
.pick { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 9px; font: 500 14px/18px var(--sans); color: var(--ink); }
.pick.on { background: var(--frame); }
.pick .dot { position: relative; width: 22px; height: 22px; flex: none; }
.pick .dot img { position: absolute; inset: 0; width: 22px; height: 22px; transition: opacity 0.25s; }
.pick .dot img.ch { opacity: 0; }
.pick.chrome .dot img.ch { opacity: 1; }
.pick.chrome .dot img.ar { opacity: 0; }
.pick .lbl { display: inline-block; will-change: filter, opacity; }
.pick .chk { margin-left: auto; color: var(--accent); font-weight: 600; }
.namebox .codebox { position: relative; inset: auto; }
.namebox pre { font-size: 12px; line-height: 19px; word-break: normal; overflow-wrap: normal; }
@media (max-width: 640px) { .namebox { grid-template-columns: 1fr; } .namebox .codebox { min-height: 120px; } }

/* ---------- 4. CRX ---------- */
.crx { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.strip { position: relative; height: 26px; border-radius: 6px; background: var(--card); box-shadow: 0 0 0 1px var(--card-edge); overflow: hidden; }
.strip .zip { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(90deg, var(--frame-2) 0 2px, transparent 2px 7px); }
.strip .zip span { position: absolute; left: 10px; top: 4px; font: 500 11.5px/18px var(--sans); color: var(--muted); background: var(--card); padding: 0 4px; border-radius: 4px; }
.strip .hd { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.strip .flip { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--bad); opacity: 0; border-radius: 2px; }
.zoom { position: relative; display: flex; gap: 3px; height: 54px; }
.seg { position: relative; border-radius: 6px; background: var(--card); box-shadow: 0 0 0 1px var(--card-edge); padding: 6px 7px; overflow: hidden; min-width: 0; transition: background 0.3s; }
.seg b { display: block; font: 600 11.5px/15px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg span { display: block; font: 400 11px/15px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg.read { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.seg.key { box-shadow: 0 0 0 1.5px var(--accent); }
.seg.bad { background: color-mix(in srgb, var(--bad) 16%, var(--card)); }
.cursor { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink); border-radius: 1px; opacity: 0; }
.steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font: 400 12.5px/18px var(--mono); }
.steps li { display: flex; gap: 9px; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--ink-2); }
.steps li.on { opacity: 1; transform: none; }
.steps li i { font-style: normal; width: 14px; flex: none; text-align: center; }
.steps li.ok i { color: var(--ok); }
.steps li.no i, .steps li.no { color: var(--bad); }

/* ---------- 5. extension ID ---------- */
.idv { position: relative; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.idrow small { display: block; font: 500 11.5px/16px var(--sans); color: var(--muted); margin-bottom: 4px; }
.idrow .val { font: 12px/18px var(--mono); color: var(--ink-2); word-break: break-all; }
.idrow .val.key { max-height: 36px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent); }
.hex { display: flex; flex-wrap: wrap; gap: 2px; }
.hex i { font: 500 12.5px/20px var(--mono); font-style: normal; width: 13px; text-align: center; border-radius: 3px; color: var(--ink-2); }
.hex i.take { color: var(--ink); background: var(--frame-2); }
.letters { display: flex; flex-wrap: wrap; gap: 2px; perspective: 400px; }
.letters i { font: 600 13px/22px var(--mono); font-style: normal; width: 15px; text-align: center; border-radius: 4px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--card-edge); transform-origin: center; }
.gate { display: flex; align-items: center; gap: 10px; margin-top: 2px; padding: 10px 12px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--card-edge); font: 12px/18px var(--mono); color: var(--ink-2); }
.gate .st { margin-left: auto; font: 600 12.5px/16px var(--sans); white-space: nowrap; }
.gate.ok { box-shadow: 0 0 0 1.5px var(--ok); }
.gate.ok .st { color: var(--ok); }
.gate.no { box-shadow: 0 0 0 1.5px var(--bad); }
.gate.no .st { color: var(--bad); }
.gate code { word-break: break-all; }

/* ---------- 6 + 7. terminal ---------- */
.term { position: absolute; inset: 14px; border-radius: 10px; background: var(--mono-bg); color: var(--mono-ink); padding: 14px 16px; font: 12.5px/20px var(--mono); overflow: hidden; }
.term .ln { white-space: pre-wrap; word-break: break-word; opacity: 0; transform: translateY(3px); transition: opacity 0.2s, transform 0.3s; }
.term .ln.on { opacity: 1; transform: none; }
.term .p { color: #8fa2ff; }
.term .ok { color: #6fe0a4; }
.term .fail { color: #ff8796; }
.term .fix, .term .dim { color: var(--mono-dim); }
.term .skip { color: #ffd479; }

.agent { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.agent .msg { max-width: 92%; opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
.agent .msg.on { opacity: 1; transform: none; }
.agent .say { padding: 9px 12px; border-radius: 13px; font: 400 13px/19px var(--sans); }
.agent .msg.me { align-self: flex-end; }
.agent .msg.me .say { background: var(--btn); color: var(--btn-ink); border-bottom-right-radius: 5px; }
.agent .msg.ai .say { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--card-edge); border-bottom-left-radius: 5px; }
.agent .msg.cmd { align-self: stretch; max-width: none; }
.agent .cmd .run { border-radius: 9px; background: var(--mono-bg); color: var(--mono-ink); padding: 8px 12px; font: 12px/18px var(--mono); }
.agent .cmd .run .p { color: #8fa2ff; }
.agent .cmd .run .o { display: block; color: var(--mono-dim); white-space: pre-wrap; }
.agent .cmd .run .o.ok { color: #6fe0a4; }
.agent .who { display: block; font: 600 11.5px/16px var(--sans); color: var(--muted); margin: 0 0 3px 2px; }

@media (max-width: 640px) {
  .node { font-size: 10.5px !important; line-height: 15px !important; }
}