/* Connect Claude: a step-by-step page in the site's own look. Every picture is a live, rebuilt component */
.links a.on { background: var(--blush); color: var(--ink); }
.cx main { padding-top: 120px; }
kbd { display: inline-block; min-width: 1.6em; padding: 2px 7px 3px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1.5px #ead9e4, 0 2px 0 #ead9e4; font: 700 .82em/1.3 var(--font); color: var(--ink); text-align: center; }
code.inline, .aside code, details code { padding: 2px 7px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #f0dce8; font: 600 .86em/1.4 var(--mono); color: var(--ink); }

/* hero */
.cx-hero { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 50px 0 40px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.cx-hero .sub { margin-left: 0; }
.cx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.cx-meta span { padding: 9px 14px; border-radius: 999px; background: #fff; font: 700 14px/1 var(--font); box-shadow: 0 8px 20px rgba(120, 70, 110, .1), inset 0 0 0 1.5px #f0dce8; }
.cx-plug { position: relative; height: 300px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.cx-plug .node { position: relative; z-index: 2; width: 150px; padding: 22px 14px 16px; border-radius: 26px; background: #fff; display: grid; justify-items: center; gap: 10px;
  box-shadow: 0 24px 50px rgba(110, 60, 100, .16), inset 0 0 0 1.5px #f0dce8; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.cx-plug .node b { font: 800 16px/1 var(--font); letter-spacing: -.02em; }
.cx-plug .node canvas { width: 86px; height: 75px; image-rendering: pixelated; }
.cx-plug .node img { width: 72px; height: 72px; padding: 6px; }
.cx-plug .node.mochi { rotate: -4deg; } .cx-plug .node.claude { rotate: 3deg; }
.cx-plug .wire { position: absolute; left: 150px; right: 150px; top: 50%; height: 60px; translate: 0 -50%; width: calc(100% - 300px); overflow: visible; }
.cx-plug .wire path { fill: none; stroke: #e6c9da; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; transition: stroke .5s; }
.cx-plug.on .wire path { stroke: var(--pink); stroke-dasharray: none; }
.cx-plug #spark { fill: var(--pink-deep); filter: drop-shadow(0 0 6px rgba(226, 100, 154, .7)); opacity: 0; }
.cx-plug.on #spark { opacity: 1; }
.cx-plug .status { position: absolute; left: 50%; bottom: 34px; translate: -50% 0; padding: 9px 15px; border-radius: 999px; background: #fff; font: 600 13px/1 var(--mono); color: var(--ink-soft);
  box-shadow: 0 10px 24px rgba(120, 70, 110, .12); transition: background .4s, color .4s; }
.cx-plug.on .status { background: var(--mint-d); color: #1c5a3c; }
.cx-plug.on .node { transform: translateY(-6px); }

/* how it fits */
.cx-how { width: min(1120px, calc(100% - 40px)); margin: 40px auto 0; }
.how-card { padding: 54px 48px 40px; border-radius: 34px; background: rgba(255, 255, 255, .86); box-shadow: 0 30px 70px rgba(110, 60, 100, .1), inset 0 0 0 1.5px #f3e3ec; text-align: center; }
.how-card .sub { max-width: 60ch; } .how-card .sub b { color: var(--ink); }
.how-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 36px 0 6px; flex-wrap: wrap; }
.hw { width: 200px; padding: 18px 14px; border-radius: 22px; background: #fff; display: grid; justify-items: center; gap: 6px; box-shadow: inset 0 0 0 1.5px #f0dce8; }
.hw b { font: 800 16px/1.15 var(--font); } .hw small { font: 500 13px/1.3 var(--font); color: var(--ink-soft); }
.hw.hot { background: var(--blush); box-shadow: inset 0 0 0 2px var(--pink); rotate: -2deg; }
.hw-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fdf5f9; margin-bottom: 4px; }
.hw-ic img { width: 34px; height: 34px; image-rendering: auto; } .hw-ic img[src*="mochi"] { image-rendering: pixelated; }
.hw-ic.term, .term-ic { background: #241f28; color: #9ff0c4; font: 700 17px/1 var(--mono); }
.hw-arrow { width: 34px; height: 2px; background: var(--pink); position: relative; flex: none; }
.hw-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--pink); border-right: 0; }

/* steps */
.cx-steps { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 90px 0 30px; display: grid; gap: 90px; }
.step { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.step:nth-child(even) .st-copy { order: 2; }
.st-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 20px/1 var(--font); margin-bottom: 18px; rotate: -6deg; }
.st-copy h3 { margin: 0 0 12px; font: 800 clamp(30px, 3.4vw, 44px)/1.04 var(--font); letter-spacing: -.04em; }
.st-copy p { font: 500 18px/1.6 var(--font); color: var(--ink-soft); } .st-copy p b { color: var(--ink); }
.st-copy .aside { margin-top: 14px; font-size: 15px; }
.ready { color: #1f8a57 !important; }
.code { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 8px 8px 18px; border-radius: 16px; background: #241f28; box-shadow: 0 14px 30px rgba(43, 38, 48, .2); }
.code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 600 15px/1.5 var(--mono); color: #f3eaf1; scrollbar-width: none; }
.code code::-webkit-scrollbar { display: none; }
.copy { flex: none; padding: 10px 16px; border: 0; border-radius: 11px; background: var(--pink); color: var(--ink); font: 700 14px/1 var(--font); cursor: pointer; transition: transform .15s, background .2s; }
.copy:hover { transform: scale(1.05); } .copy.done { background: var(--mint-d); }
.st-art { position: relative; min-height: 300px; display: grid; place-items: center; padding: 30px; border-radius: 34px; background: radial-gradient(120% 120% at 20% 10%, #fff4f9, #fbeef5 60%, #f6edfa); box-shadow: inset 0 0 0 1.5px #f3e3ec; }

/* 1 · Spotlight */
.spot { width: min(440px, 100%); border-radius: 22px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); box-shadow: 0 30px 60px rgba(90, 50, 90, .2), inset 0 0 0 1px rgba(0, 0, 0, .05); overflow: hidden; }
.sp-bar { display: flex; align-items: center; gap: 12px; padding: 18px 20px; font: 500 24px/1 var(--font); }
.sp-bar svg { width: 24px; height: 24px; fill: none; stroke: #8a8290; stroke-width: 2; stroke-linecap: round; flex: none; }
.caret { width: 2px; height: 26px; background: #2b7bff; animation: blink 1s steps(1) infinite; margin-left: -10px; }
@keyframes blink { 50% { opacity: 0; } }
.sp-hit { display: flex; align-items: center; gap: 12px; margin: 0 8px 8px; padding: 10px 12px; border-radius: 12px; background: #2b7bff; color: #fff; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
.sp-hit.on { opacity: 1; transform: none; }
.sp-hit .term-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; }
.sp-hit b { display: block; font: 700 16px/1.2 var(--font); } .sp-hit small { font: 500 12.5px/1.2 var(--font); opacity: .8; }
.sp-hit kbd { margin-left: auto; background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; transition: transform .1s; }
.sp-hit kbd.press { transform: scale(.86); background: rgba(255, 255, 255, .45); }

/* 2 + 3 · Terminal */
.term { width: min(520px, 100%); border-radius: 16px; overflow: hidden; background: #1f1b23; box-shadow: 0 34px 70px rgba(43, 30, 50, .32), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.tbar { position: relative; height: 34px; display: flex; align-items: center; gap: 7px; padding-left: 14px; background: #2b2630; }
.tbar i, .bbar i { width: 11px; height: 11px; border-radius: 50%; } .tbar i:nth-child(1), .bbar i:nth-child(1) { background: #ff6158; } .tbar i:nth-child(2), .bbar i:nth-child(2) { background: #ffbd2e; } .tbar i:nth-child(3), .bbar i:nth-child(3) { background: #28c840; }
.tbar span { position: absolute; inset: 0; text-align: center; font: 600 12px/34px var(--font); color: #a59cab; }
.tbody { margin: 0; min-height: 200px; padding: 18px 20px 22px; font: 500 14.5px/1.75 var(--mono); color: #eee6f0; white-space: pre-wrap; word-break: break-all; }
.tbody .pr { color: #ff9ec4; } .tbody .ok { color: #9ff0c4; } .tbody .dim { color: #8f8696; }
.tbody .cur { display: inline-block; width: 9px; height: 1.1em; vertical-align: -3px; background: #eee6f0; animation: blink 1s steps(1) infinite; }
.signin { min-height: 360px; }
.term.small { width: min(420px, 86%); justify-self: start; align-self: start; }
.term.small .tbody { min-height: 150px; }
.browser { position: absolute; right: 26px; bottom: 26px; width: min(290px, 64%); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(90, 50, 90, .24), inset 0 0 0 1px rgba(0, 0, 0, .05);
  opacity: 0; transform: translateY(24px) rotate(2deg); transition: opacity .4s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.browser.on { opacity: 1; transform: rotate(2deg); }
.bbar { position: relative; height: 30px; display: flex; align-items: center; gap: 6px; padding-left: 12px; background: #f5f1f4; border-bottom: 1px solid #ece4ea; }
.bbar i { width: 9px; height: 9px; }
.bbar .url { position: absolute; left: 50%; translate: -50% 0; padding: 3px 12px; border-radius: 99px; background: #fff; font: 600 11px/1.2 var(--mono); color: #8a8290; }
.bbody { display: grid; justify-items: center; gap: 4px; padding: 22px 18px 20px; text-align: center; }
.bbody img { width: 36px; height: 36px; margin-bottom: 6px; } .bbody b { font: 800 16px/1.2 var(--font); } .bbody small { font: 500 13px/1.3 var(--font); color: var(--ink-soft); }
.b-ok { margin-top: 12px; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 14px/1 var(--font); transition: transform .12s, background .3s; }
.b-ok.press { transform: scale(.92); } .b-ok.done { background: #1f8a57; }
.hand { position: absolute; width: 30px; image-rendering: pixelated; left: 0; top: 0; opacity: 0; transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .3s; pointer-events: none; }

/* 4 · Helpers (the app's own Settings card) */
.helpers { position: relative; width: min(380px, 100%); padding: 18px 16px 16px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px rgba(90, 50, 90, .18), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.hp-head { padding: 0 8px 10px; font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #a39aa8; }
.helpers .conn { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 12px; font: 600 15px/1 var(--font); }
.helpers .conn + .conn { margin-top: 2px; }
.helpers .dot { width: 10px; height: 10px; border-radius: 50%; background: #c9c1cd; flex: none; transition: background .3s; }
.helpers .conn button { margin-left: auto; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: none; font: 700 12px/1 var(--font); color: var(--ink); }
.helpers .conn em { display: none; margin-left: auto; font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #1f8a57; font-style: normal; }
.helpers .conn.on { background: #effaf3; } .helpers .conn.on .dot { background: #3fbf86; box-shadow: 0 0 0 5px rgba(63, 191, 134, .18); animation: ping 1.2s ease-out 1; }
.helpers .conn.on button { display: none; } .helpers .conn.on em { display: block; }
@keyframes ping { from { box-shadow: 0 0 0 0 rgba(63, 191, 134, .5); } to { box-shadow: 0 0 0 12px rgba(63, 191, 134, 0); } }
.hi { position: absolute; right: -26px; bottom: -40px; display: flex; align-items: flex-end; gap: 6px; opacity: 0; transform: translateY(10px) scale(.94); transform-origin: 100% 100%; transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.hi.on { opacity: 1; transform: none; }
.hi canvas { width: 54px; height: 47px; image-rendering: pixelated; order: 2; }
.hi p { max-width: 210px; padding: 12px 15px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: #fff; font: 600 14px/1.35 var(--font); box-shadow: 0 14px 30px rgba(43, 38, 48, .25); }

/* extras */
.cx-extra { width: min(860px, calc(100% - 40px)); margin: 0 auto; padding: 100px 0 10px; }
.extra-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.ex { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px #f0dce8; }
.ex img { width: 48px; height: 48px; border-radius: 13px; flex: none; } .ex b { display: block; font: 800 17px/1.2 var(--font); } .ex small { font: 500 14px/1.35 var(--font); color: var(--ink-soft); }
.ex-steps { margin: 24px 0 0; padding: 22px 26px 22px 46px; border-radius: 22px; background: rgba(255, 255, 255, .7); font: 500 17px/1.6 var(--font); color: var(--ink-soft); }
.ex-steps li + li { margin-top: 8px; } .ex-steps b, .ex-steps a { color: var(--ink); } .ex-steps a { font-weight: 700; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.cx-faq { padding-top: 100px; }
.cx-faq details p b { color: var(--ink); }
.cx-end { padding: 40px 20px 120px; text-align: center; }
.cx-end .dl-goo { display: block; width: 96px; height: 84px; margin: 0 auto 18px; image-rendering: pixelated; }
.cx-end h2 { margin-bottom: 26px; }

@media (max-width: 860px) {
  .cx main { padding-top: 96px; }
  .cx-hero { grid-template-columns: 1fr; gap: 10px; padding-top: 20px; }
  .cx-plug { height: 230px; } .cx-plug .node { width: 118px; padding: 16px 10px 12px; } .cx-plug .node canvas { width: 64px; height: 56px; } .cx-plug .node img { width: 54px; height: 54px; }
  .cx-plug .wire { left: 118px; width: calc(100% - 236px); } .cx-plug .status { bottom: 10px; }
  .how-card { padding: 38px 20px 28px; } .hw-arrow { rotate: 90deg; margin: 2px 0; } .how-row { flex-direction: column; gap: 10px; } .hw { width: min(260px, 100%); }
  .cx-steps { gap: 56px; padding-top: 60px; }
  .step { grid-template-columns: 1fr; gap: 24px; } .step:nth-child(even) .st-copy { order: 0; }
  .st-art { padding: 20px 14px; min-height: 240px; } .signin { min-height: 340px; }
  .browser { right: 12px; bottom: 14px; width: 74%; } .term.small { width: 100%; }
  .hi { right: -4px; bottom: -48px; }
  .extra-row { grid-template-columns: 1fr; }
  .links a:not(.on) { display: none; }
}

/* fixes after a look: the long command never widens a step (it scrolls inside its own box), the headline stays on two lines, and the sign-in browser sits below the terminal's words */
.step > *, .st-copy, .st-art { min-width: 0; }
.cx-hero { grid-template-columns: 1.2fr .8fr; }
.cx-hero h1 { font-size: clamp(44px, 5.4vw, 80px); }
.signin { min-height: 440px; align-content: start; }
.term.small { width: min(440px, 80%); }
.term.small .tbody { min-height: 130px; }
.browser { bottom: 22px; }
.term .tbody { font-size: 13.5px; }
@media (max-width: 860px) {
  .cx-hero { grid-template-columns: 1fr; }
  .signin { min-height: 430px; }
  .term.small { width: 100%; }
  .browser { width: 78%; }
  .hi { position: relative; right: auto; bottom: auto; margin-top: 12px; justify-content: flex-end; }
}

/* Mac / Windows: one guide, two ways in. The page picks your computer; the switch flips it */
.os-switch { position: relative; z-index: 2; width: max-content; max-width: calc(100% - 32px); margin: 70px auto -40px; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(120, 70, 110, .14), inset 0 0 0 1.5px #f0dce8; font: 600 14px/1 var(--font); color: var(--ink-soft); }
.os-switch > span { padding: 0 8px 0 12px; }
.os-switch button { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border: 0; border-radius: 999px; background: none; font: 700 14.5px/1 var(--font); color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; }
.os-switch button svg { width: 16px; height: 16px; fill: currentColor; }
.os-switch button.on { background: var(--ink); color: #fff; }
body:not(.os-win) .win, body.os-win .mac { display: none !important; }
body:not(.os-win) .win-flex, body.os-win .mac-flex { display: none !important; }
/* Windows looks: the Start search and a PowerShell window */
.wctl { display: none; position: absolute; right: 14px; top: 0; font: 500 12px/34px var(--font); font-style: normal; color: #a59cab; letter-spacing: .02em; }
body.os-win .tbar i { display: none; } body.os-win .tbar span { text-align: left; padding-left: 16px; } body.os-win .wctl { display: block; }
body.os-win .term { border-radius: 10px; background: #0f1a2e; } body.os-win .tbar { background: #18243b; }
body.os-win .spot { border-radius: 12px; background: rgba(243, 243, 246, .96); }
body.os-win .sp-hit { border-radius: 8px; background: #e6eef9; color: var(--ink); box-shadow: inset 3px 0 0 #0067c0; }
body.os-win .sp-hit kbd { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #d6dbe4; font-size: 12px; }
body.os-win .sp-hit .term-ic { background: #0f1a2e; color: #7fd1ff; }
@media (max-width: 860px) { .os-switch { margin-top: 46px; } .os-switch > span { display: none; } }