/* Its own computer (scenes/computer.html, scenes/computer.js): Sunshine's desktop, live, in the OS's own
   window. Everything here is scoped under .sc-computer. The window is fluid (up to 640 px) and lays itself
   out by its own width (a container query), so its text never shrinks: a mail app with a list and a
   reading pane when there is room, one pane at a time when there is not. Without JS, or with reduced
   motion, the markup as written is the picture: Sunshine mid-reply, chip "Working". */

.sc-computer {
  --cx-amber: #e59a0b;
  --cx-amber-ink: #8a5300;
  --cx-amber-tint: #fff3d6;
  --cx-green: #2bb24c;
  --cx-green-ink: #1c7a34;
  --cx-wall: #e8e8e4;
  --cx-mono: "Geist Mono", ui-monospace, monospace;
}
.sc-computer [hidden] { display: none !important; }

/* The section: copy on the left, the window on the right; stacked below 1180 px (the page's .split). */
.sc-computer .cx-col { display: flex; justify-content: center; flex: 1 1 0; min-width: 0; }
.sc-computer .cx-try { margin-top: -4px; color: var(--graphite); }
@media (min-width: 1180.02px) {
  .sc-computer .cx-split { gap: 56px; padding: 130px var(--gutter); }
  .sc-computer .cx-copy { width: min(40vw, 570px); }
}
@media (max-width: 1180px) {
  .sc-computer .cx-copy { width: 100%; max-width: 640px; }
  .sc-computer .cx-col { flex: none; margin: 0 calc(var(--edge, var(--gutter)) - var(--gutter)); }
}
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .sc-computer .cx-copy { width: 44%; max-width: none; flex-shrink: 0; }
  .sc-computer .cx-col { flex: 1 1 0; min-width: 0; margin: 0; }
}
/* Phones: the headline keeps its two lines ("Take the wheel." is the long one), so on the narrowest
   phones it comes out a touch under the page's 52 px. */
@media (max-width: 640px) {
  .sc-computer .h2 { font-size: min(52px, calc((100vw - 40px) / 7)); }
}

/* The window. */
.sc-computer .cx-win {
  position: relative;
  width: 100%;
  max-width: 640px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
  text-align: left;
  container: cxwin / inline-size;
}

/* Header: monitor, "Sunshine's computer", the chip, and the one control that matters now. */
.sc-computer .cx-head { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--hair); }
.sc-computer .cx-mon { flex-shrink: 0; color: #8e8e8a; }
.sc-computer .cx-title { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; }
.sc-computer .cx-name { font-weight: 600; font-size: 13.5px; line-height: 18px; white-space: nowrap; }
.sc-computer .cx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; background: #f0f0ee; color: var(--graphite); font-family: var(--cx-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.sc-computer .cx-chip i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.sc-computer .cx-chip[data-state="watching"] i { opacity: 0.45; }
.sc-computer .cx-chip[data-state="control"] { background: rgba(43, 178, 76, 0.14); color: var(--cx-green-ink); }
.sc-computer .cx-chip[data-state="needs"] { background: rgba(229, 154, 11, 0.17); color: var(--cx-amber-ink); }
.sc-computer.is-live .cx-chip[data-state="working"] i { animation: sc-computer-pulse 1.6s ease-in-out infinite; }

.sc-computer .cx-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.sc-computer .cx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-family: inherit; font-weight: 600; font-size: 13px; line-height: 16px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, opacity 0.12s ease; }
/* 44 px to tap, 34 px to look at. */
.sc-computer .cx-btn::before { content: ""; position: absolute; inset: -5px -3px; }
.sc-computer .cx-btn:hover { transform: translateY(-1px); }
.sc-computer .cx-btn:active { transform: scale(0.97); }
.sc-computer .cx-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sc-computer .cx-btn-ink { background: var(--ink); color: #fff; box-shadow: none; }
.sc-computer .cx-btn.is-ready { animation: sc-computer-ready 1.1s ease-in-out infinite; }

/* The screen: the reason line (Needs you) slides down over the top of the desktop. */
.sc-computer .cx-screen { position: relative; overflow: hidden; }
.sc-computer .cx-reason { position: absolute; left: 0; right: 0; top: 0; z-index: 10; padding: 8px 14px 10px; background: var(--cx-amber-tint); box-shadow: 0 1px 0 rgba(229, 154, 11, 0.4), 0 10px 20px -14px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease, visibility 0s linear 0.3s; }
.sc-computer.is-needs .cx-reason { opacity: 1; visibility: visible; transform: none; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease; }
.sc-computer .cx-reason-text { font-size: 12.5px; line-height: 17px; color: var(--ink); }
.sc-computer .cx-wait { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cx-amber); transform-origin: left center; }

/* The desktop: a plain light wallpaper, a browser, and the terminal. */
.sc-computer .cx-desk { position: relative; height: 420px; overflow: hidden; background: var(--cx-wall); -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sc-computer .cx-desk::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; }
.sc-computer.is-control .cx-desk::after { opacity: 1; box-shadow: inset 0 0 0 2px rgba(43, 178, 76, 0.75); }
.sc-computer.is-needs .cx-desk::after { opacity: 1; box-shadow: inset 0 0 0 2px rgba(229, 154, 11, 0.85); }
.sc-computer.is-control .cx-desk, .sc-computer.is-needs .cx-desk { cursor: crosshair; }
.sc-computer.is-needs .cx-signin { cursor: text; }

.sc-computer .cx-icons { display: none; position: absolute; left: 8px; top: 12px; width: 58px; flex-direction: column; align-items: center; gap: 14px; }
.sc-computer .cx-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 500; font-size: 11px; line-height: 14px; color: #3a3a38; }

/* The browser. */
.sc-computer .cx-browser { position: absolute; left: 8px; right: 8px; top: 8px; height: 310px; z-index: 2; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 14px 30px -16px rgba(0, 0, 0, 0.35); }
.sc-computer .cx-tabs { display: flex; align-items: flex-end; gap: 2px; height: 28px; padding: 0 8px; background: #efefec; flex-shrink: 0; }
.sc-computer .cx-tab { display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 12px 0 9px; border-radius: 7px 7px 0 0; font-weight: 500; font-size: 11.5px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.sc-computer .cx-tab.is-active { background: #fff; color: var(--ink); }
.sc-computer .cx-tab svg { flex-shrink: 0; }
.sc-computer .cx-bar { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.sc-computer .cx-nav { flex-shrink: 0; }
.sc-computer .cx-url { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 20px; padding: 0 10px; overflow: hidden; border-radius: 999px; background: #f3f3f0; font-size: 11.5px; line-height: 14px; color: var(--graphite); white-space: nowrap; }
.sc-computer .cx-url svg { flex-shrink: 0; }
.sc-computer .cx-page { position: relative; flex: 1; min-height: 0; transition: opacity 0.3s ease; }
.sc-computer .cx-page.is-fading { opacity: 0; }
.sc-computer .cx-mail, .sc-computer .cx-cal { position: absolute; inset: 0; }
.sc-computer .cx-page[data-tab="mail"] .cx-cal, .sc-computer .cx-page[data-tab="cal"] .cx-mail { display: none; }
.sc-computer.is-live .cx-page[data-tab="mail"] .cx-mail, .sc-computer.is-live .cx-page[data-tab="cal"] .cx-cal { animation: sc-computer-in 0.25s ease-out; }

/* Mail: the inbox list. */
.sc-computer .cx-list { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.sc-computer .cx-folders { display: flex; gap: 4px; padding: 7px 8px 6px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.sc-computer .cx-folder { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--muted); }
.sc-computer .cx-folder.is-on { background: var(--ink); color: #fff; }
.sc-computer .cx-count { display: inline-block; font-family: var(--cx-mono); font-weight: 600; font-size: 11px; line-height: 14px; }
.sc-computer .cx-count.is-bump { animation: sc-computer-bump 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.sc-computer .cx-rows { flex: 1; min-height: 0; overflow: hidden; }
.sc-computer .cx-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: center; padding: 8px 10px 8px 20px; border-bottom: 1px solid var(--hair); transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.26s ease; }
.sc-computer .cx-row::before { content: ""; position: absolute; left: 8px; top: 14px; width: 6px; height: 6px; border-radius: 999px; background: var(--ink); opacity: 0; }
.sc-computer .cx-row.is-unread::before { opacity: 1; }
.sc-computer .cx-row.is-open { background: #efefec; box-shadow: inset 2px 0 0 var(--ink); }
.sc-computer .cx-row.is-leaving { opacity: 0; transform: translateX(-16px); }
.sc-computer.is-control .cx-row:hover, .sc-computer.is-needs .cx-row:hover { background: #f5f5f3; }
.sc-computer .cx-from { overflow: hidden; font-weight: 500; font-size: 12.5px; line-height: 17px; color: #3a3a38; text-overflow: ellipsis; white-space: nowrap; }
.sc-computer .cx-row.is-unread .cx-from { font-weight: 700; color: var(--ink); }
.sc-computer .cx-time { font-size: 11px; line-height: 17px; color: var(--muted); white-space: nowrap; }
.sc-computer .cx-subj { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--graphite); text-overflow: ellipsis; white-space: nowrap; }
.sc-computer .cx-lead { justify-self: end; padding: 1px 5px; border-radius: 4px; background: var(--lime); color: var(--ink); font-family: var(--cx-mono); font-weight: 600; font-size: 11px; line-height: 13px; letter-spacing: 0.04em; }

/* Mail: the open message, with Sunshine's reply. One pane at a time when narrow: it slides over the list. */
.sc-computer .cx-read { position: absolute; inset: 0; background: #fff; transform: translateX(102%); transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1); }
.sc-computer .cx-mail.is-reading .cx-read { transform: none; }
.sc-computer .cx-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; }
.sc-computer .cx-msg-top { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.sc-computer .cx-back { flex-shrink: 0; }
.sc-computer .cx-msg-subj { font-weight: 700; font-size: 14px; line-height: 18px; letter-spacing: -0.01em; }
.sc-computer .cx-msg-from { display: flex; align-items: center; gap: 8px; width: 100%; }
.sc-computer .cx-ini { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; background: #e6e6e3; font-weight: 600; font-size: 11px; line-height: 1; }
.sc-computer .cx-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-computer .cx-msg-name { font-weight: 600; font-size: 12.5px; line-height: 15px; }
.sc-computer .cx-msg-org { font-size: 11px; line-height: 14px; color: var(--muted); }
.sc-computer .cx-msg-time { align-self: flex-start; }
.sc-computer .cx-msg-body { font-size: 12.5px; line-height: 18px; color: #2a2a28; }
.sc-computer .cx-compose { width: 100%; margin-top: 2px; padding: 6px 10px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px #dcdcd8; }
.sc-computer .cx-compose.is-focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sc-computer .cx-compose-label { display: block; font-size: 11px; line-height: 14px; color: var(--muted); }
.sc-computer .cx-compose-text { min-height: 34px; font-size: 12.5px; line-height: 17px; color: var(--ink); }
.sc-computer .cx-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--ink); opacity: 0; }
.sc-computer .cx-compose.is-focus .cx-caret { opacity: 1; }
.sc-computer.is-live .cx-compose.is-focus:not(.is-typing) .cx-caret { animation: sc-computer-blink 1s steps(1) infinite; }
.sc-computer .cx-send { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 12px; line-height: 14px; transition: transform 0.12s ease; }
.sc-computer .cx-send.is-pressed { transform: scale(0.92); }
.sc-computer .cx-empty { display: none; }

/* Calendar: a sign-in that wants the code from your phone, then the day. */
.sc-computer .cx-cal { background: #fff; }
.sc-computer .cx-signin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; transition: opacity 0.25s ease; }
.sc-computer .cx-cal-logo { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 9px; background: var(--ink); }
.sc-computer .cx-signin-title { font-weight: 700; font-size: 15px; line-height: 19px; letter-spacing: -0.01em; }
.sc-computer .cx-signin-text { font-size: 12px; line-height: 16px; color: var(--graphite); }
.sc-computer .cx-code { display: flex; gap: 5px; margin: 6px 0 4px; }
.sc-computer .cx-code i { display: flex; align-items: center; justify-content: center; width: 26px; height: 32px; border-radius: 7px; box-shadow: inset 0 0 0 1px #d6d6d2; font-style: normal; }
.sc-computer .cx-code .cx-gap { margin-left: 8px; }
.sc-computer .cx-code b { font-family: var(--cx-mono); font-weight: 600; font-size: 15px; line-height: 1; opacity: 0; transform: translateY(3px); transition: opacity 0.15s ease, transform 0.15s ease; transition-delay: calc(var(--i) * 70ms); }
.sc-computer .cx-code.is-filled b { opacity: 1; transform: none; }
.sc-computer.is-needs .cx-code i { box-shadow: inset 0 0 0 1.5px var(--cx-amber); }
.sc-computer .cx-verify { display: inline-flex; align-items: center; height: 28px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 12px; line-height: 14px; opacity: 0.3; transition: opacity 0.2s ease; }
.sc-computer .cx-code.is-filled ~ .cx-verify { opacity: 1; }
.sc-computer .cx-day { position: absolute; inset: 0; padding: 10px 14px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.sc-computer .cx-cal.is-signed .cx-signin { opacity: 0; visibility: hidden; }
.sc-computer .cx-cal.is-signed .cx-day { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.sc-computer .cx-day-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; }
.sc-computer .cx-day-head b { font-weight: 700; font-size: 14px; line-height: 18px; }
.sc-computer .cx-day-head span { font-size: 11px; line-height: 14px; color: var(--muted); }
.sc-computer .cx-hours li { position: relative; display: flex; height: 36px; border-top: 1px solid var(--hair); }
.sc-computer .cx-hours span { width: 46px; flex-shrink: 0; padding-top: 3px; font-size: 11px; line-height: 14px; color: var(--muted); }
.sc-computer .cx-ev { position: absolute; left: 50px; right: 34%; top: 3px; display: flex; align-items: center; height: 28px; padding: 0 9px; overflow: hidden; border-radius: 6px; background: #efefec; font-style: normal; font-weight: 500; font-size: 11.5px; line-height: 14px; color: #3a3a38; white-space: nowrap; }
.sc-computer .cx-ev-new { background: var(--lime); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); opacity: 0; transform: scale(0.9); transform-origin: left center; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35); }
.sc-computer .cx-cal.is-booked .cx-ev-new { opacity: 1; transform: none; }

/* The activity terminal: the commands Sunshine runs, newest at the bottom. */
.sc-computer .cx-term { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 88px; z-index: 3; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #111110; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 14px 28px -14px rgba(0, 0, 0, 0.45); }
.sc-computer .cx-term-bar { display: flex; align-items: center; justify-content: center; height: 20px; flex-shrink: 0; background: #232321; font-weight: 500; font-size: 11px; line-height: 14px; color: #a3a39f; }
.sc-computer .cx-term-body { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-height: 0; padding: 4px 9px 6px; overflow: hidden; }
.sc-computer .cx-tl { flex-shrink: 0; font-family: var(--cx-mono); font-weight: 500; font-size: 11px; line-height: 15px; color: #ececea; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-computer .cx-tl b { font-weight: 600; color: var(--lime); }
.sc-computer .cx-tl.cx-out { color: #a8a8a4; }
.sc-computer .cx-tl.is-new { animation: sc-computer-line 0.25s ease-out; }

/* Clicks (Sunshine's, and yours when you have control) and the message flying to Sent. */
.sc-computer .cx-fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.sc-computer .cx-ripple { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px; background: rgba(233, 255, 59, 0.55); box-shadow: 0 0 0 1.5px var(--ink); animation: sc-computer-ripple 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.sc-computer .cx-ripple.is-you { background: rgba(10, 10, 10, 0.08); box-shadow: 0 0 0 2px var(--ink); }
.sc-computer .cx-fly { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 11px; line-height: 14px; white-space: nowrap; will-change: transform, opacity; }

/* Sunshine's pointer and name tag. Where it rests in the picture (near Send); JS moves it when live. */
.sc-computer .cx-cursor { position: absolute; left: 58px; top: 266px; z-index: 8; pointer-events: none; transition: opacity 0.3s ease; }
.sc-computer.is-live .cx-cursor { left: 0; top: 0; will-change: transform; }
.sc-computer .cx-arrow { display: block; transform-origin: 2px 1.5px; transition: transform 0.1s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.sc-computer .cx-cursor.is-down .cx-arrow { transform: scale(0.84); }
.sc-computer .cx-tag { position: absolute; left: 14px; top: 19px; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 9px 0 4px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 11.5px; line-height: 14px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.3); }
.sc-computer .cx-tag img { width: 27px; height: 16px; object-fit: contain; }
.sc-computer.is-control .cx-cursor, .sc-computer.is-needs .cx-cursor { opacity: 0; }

/* Footer: what watching or driving means right now. */
.sc-computer .cx-foot { padding: 7px 14px 8px; border-top: 1px solid var(--hair); font-size: 11.5px; line-height: 16px; color: var(--muted); }
.sc-computer .cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A narrow window (phones, tablets, small laptops): the chip goes under the name. */
@container cxwin (max-width: 439.98px) {
  .sc-computer .cx-head { padding-left: 12px; }
  .sc-computer .cx-title { flex-direction: column; align-items: flex-start; }
  .sc-computer .cx-btn { padding: 0 12px; }
}

/* A wide window: desktop icons, a bigger browser with list and reading pane side by side, and the
   terminal at the bottom right as on the real computers. */
@container cxwin (min-width: 580px) {
  .sc-computer .cx-desk { height: 368px; }
  .sc-computer .cx-icons { display: flex; }
  .sc-computer .cx-browser { left: 72px; right: 12px; top: 12px; bottom: 12px; height: auto; }
  .sc-computer .cx-term { left: auto; right: 10px; bottom: 10px; width: 240px; height: 92px; }
  .sc-computer .cx-list { right: auto; width: 36%; border-right: 1px solid var(--hair); background: #fbfbfa; }
  .sc-computer .cx-read { left: 36%; transform: none; transition: none; }
  .sc-computer .cx-msg { padding: 12px; opacity: 0; transition: opacity 0.25s ease; }
  .sc-computer .cx-mail.is-reading .cx-msg { opacity: 1; }
  .sc-computer .cx-back { display: none; }
  .sc-computer .cx-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 16px; color: #8e8e8a; transition: opacity 0.25s ease; }
  .sc-computer .cx-mail.is-reading .cx-empty { opacity: 0; }
  .sc-computer .cx-cursor { left: calc(126px + (100% - 84px) * 0.36); top: 272px; }
  .sc-computer.is-live .cx-cursor { left: 0; top: 0; }
}

@keyframes sc-computer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes sc-computer-ready { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@keyframes sc-computer-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sc-computer-bump { 0% { transform: none; } 40% { transform: scale(1.45); } 100% { transform: none; } }
@keyframes sc-computer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-computer-line { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes sc-computer-ripple { from { opacity: 1; transform: scale(0.25); } to { opacity: 0; transform: scale(1.25); } }
@keyframes sc-computer-fade { from { opacity: 0.9; } to { opacity: 0; } }

/* Reduced motion: no loop (computer.js leaves the picture as written), nothing slides or pulses. Take
   control still works, and a click shows as a ring that simply fades. */
@media (prefers-reduced-motion: reduce) {
  .sc-computer .cx-btn, .sc-computer .cx-reason, .sc-computer .cx-desk::after, .sc-computer .cx-page, .sc-computer .cx-row,
  .sc-computer .cx-read, .sc-computer .cx-msg, .sc-computer .cx-empty, .sc-computer .cx-send, .sc-computer .cx-signin,
  .sc-computer .cx-code b, .sc-computer .cx-verify, .sc-computer .cx-day, .sc-computer .cx-ev-new, .sc-computer .cx-cursor,
  .sc-computer .cx-arrow { transition: none; }
  .sc-computer .cx-btn:hover, .sc-computer .cx-btn:active { transform: none; }
  .sc-computer .cx-chip i, .sc-computer .cx-btn.is-ready, .sc-computer .cx-caret, .sc-computer .cx-count.is-bump,
  .sc-computer .cx-tl.is-new, .sc-computer .cx-mail, .sc-computer .cx-cal { animation: none !important; }
  .sc-computer .cx-ripple { transform: scale(0.8); animation: sc-computer-fade 0.5s ease-out forwards; }
}