.extension-replica {
  --replica-ink: #f8f1ff;
  --replica-muted: #cdbde8;
  --replica-plum: #1f0e3d;
  --replica-aqua: #d8b4fe;
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(72px, 10vw, 144px) 16px clamp(48px, 5vw, 72px);
  color: var(--replica-ink);
  background:
    radial-gradient(circle at 8% 15%, rgba(168, 85, 247, .22), transparent 24rem),
    radial-gradient(circle at 92% 68%, rgba(192, 132, 252, .16), transparent 22rem),
    linear-gradient(145deg, #07020f, #1a0b33 54%, #12061f);
  scroll-margin-top: 78px;
}

.extension-replica[hidden], .extension-demo[hidden] { display: none; }
.extension-replica::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(216, 180, 254, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(216, 180, 254, .06) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 78%, transparent); }
.extension-replica-shell { position: relative; width: min(1240px, 100%); margin: 0 auto; }
.extension-replica-copy { max-width: 780px; }
.extension-replica-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--replica-aqua); font: 700 10px/1.4 "Space Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.extension-replica-kicker span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 15px currentColor; }
.extension-replica-copy h2 { margin: 0; color: var(--replica-ink); font-size: clamp(34px, 5.1vw, 65px); line-height: .95; letter-spacing: -.055em; text-transform: uppercase; }
.extension-replica-copy h2 em { color: transparent; font-size: .8em; font-style: normal; -webkit-text-stroke: .85px rgba(223, 202, 255, .72); }
.extension-replica-copy > p:not(.extension-replica-kicker) { max-width: 650px; margin: 22px 0 0; color: var(--replica-muted); font-size: 16px; }
.extension-replica-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 27px; color: #e4daee; font-size: 12px; }
.extension-replica-legend span { display: inline-flex; align-items: center; gap: 8px; }
.extension-replica-legend b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(134, 239, 172, .45); color: var(--replica-aqua); font: 700 9px/1 "Space Mono", monospace; }

.replica-workspace { position: relative; min-height: 640px; margin-top: clamp(40px, 6vw, 76px); isolation: isolate; }
.replica-browser { position: relative; min-height: 628px; overflow: hidden; border: 1px solid rgba(216, 180, 254, .38); border-radius: 10px; color: #272035; background: #f5f3f7; box-shadow: 0 32px 88px rgba(0, 0, 0, .42), 0 0 0 8px rgba(168, 85, 247, .04); }
.replica-browser-bar { display: flex; align-items: center; gap: 13px; min-height: 42px; padding: 0 14px; color: #776d88; background: #e6e2e9; font: 700 9px/1 "Space Mono", monospace; }
.replica-browser-dots { display: flex; gap: 5px; }.replica-browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: #bcafcc; }.replica-browser-dots i:first-child { background: #e98a98; }.replica-browser-dots i:nth-child(2) { background: #e9c784; }
.replica-browser-url { flex: 1; overflow: hidden; padding: 7px 11px; border: 1px solid #d6cce0; border-radius: 4px; color: #71667e; background: #faf9fc; text-overflow: ellipsis; white-space: nowrap; }.replica-browser-url span { color: #4c996f; }
.replica-settings-open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(101, 52, 180, .9); border-radius: 6px; color: #fff; background: linear-gradient(135deg, #7e22ce, #4f46e5); font: 800 9px/1 "Space Mono", monospace; letter-spacing: .035em; text-transform: uppercase; cursor: pointer; box-shadow: 0 7px 15px rgba(94, 47, 163, .30); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }.replica-settings-open span { font-size: 14px; line-height: 0; }.replica-settings-open:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 19px rgba(94, 47, 163, .42); }.replica-settings-open:focus-visible, .replica-question-actions button:focus-visible, .replica-solver-panel button:focus-visible, .replica-popup button:focus-visible, .replica-popup input:focus-visible + i { outline: 3px solid #93c5fd; outline-offset: 2px; }
.replica-moodle-nav { display: flex; gap: clamp(16px, 3vw, 38px); align-items: center; min-height: 58px; padding: 0 clamp(20px, 4vw, 52px); color: #665a71; background: #fff; box-shadow: 0 2px 8px rgba(40, 24, 58, .06); font-size: 12px; }.replica-moodle-nav strong { color: #58406e; font-size: 17px; }.replica-moodle-nav span:last-child { margin-left: auto; color: #8054ab; font-weight: 700; }
.replica-moodle-page { min-height: 528px; padding: clamp(27px, 4vw, 52px); background: linear-gradient(135deg, #f8f7fa, #f1edf5); }.replica-breadcrumb { color: #806f90; font-size: 11px; }.replica-progress { display: flex; justify-content: space-between; gap: 14px; margin-top: 24px; padding-bottom: 15px; border-bottom: 1px solid #ded8e4; color: #796b86; font: 700 10px/1.3 "Space Mono", monospace; letter-spacing: .04em; }.replica-question-card { max-width: 720px; margin-top: 28px; padding: clamp(20px, 3.2vw, 34px); border: 1px solid #ded6e6; border-radius: 7px; background: #fff; box-shadow: 0 12px 26px rgba(48, 28, 70, .06); }.replica-question-number { margin: 0; color: #8056ab; font: 700 11px/1 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.replica-question-card h3 { max-width: 570px; margin: 14px 0 9px; color: #30263d; font-size: clamp(20px, 2.4vw, 29px); line-height: 1.12; letter-spacing: -.035em; }.replica-question-help { margin: 0 0 19px; color: #81758d; font-size: 12px; }
.replica-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.replica-options button { display: grid; grid-template-columns: 16px auto 1fr; gap: 9px; align-items: center; min-height: 60px; padding: 12px; border: 1px solid #ded6e6; border-radius: 6px; color: #332842; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }.replica-options button:hover { border-color: #a47be0; }.replica-options button > span { width: 14px; height: 14px; border: 1.5px solid #a092b0; border-radius: 50%; }.replica-options b { font: 700 13px/1 "Space Mono", monospace; }.replica-options small { color: #756a82; font-size: 11px; line-height: 1.15; }.replica-options button.is-selected { border-color: #9360d3; background: #f6efff; box-shadow: inset 0 0 0 1px rgba(147, 96, 211, .16); }.replica-options button.is-selected > span { border: 4px solid #814ac3; }.replica-options button.is-suggested { border-color: #58bd8b; background: linear-gradient(115deg, #effff6, #f6efff); box-shadow: 0 0 0 2px rgba(74, 222, 128, .15); }.replica-options button.is-suggested::after { content: "VOIDEX"; align-self: start; color: #248357; font: 700 8px/1 "Space Mono", monospace; letter-spacing: .06em; }
.replica-question-actions { display: flex; align-items: center; gap: 17px; margin-top: 23px; }.replica-question-actions > button:first-child { padding: 10px 13px; border: 1px solid #6941a0; border-radius: 5px; color: #fff; background: linear-gradient(135deg, #7e22ce, #4f46e5); font: 700 11px/1 "Space Mono", monospace; cursor: pointer; box-shadow: 0 8px 16px rgba(100, 48, 161, .18); }.replica-question-actions > button:first-child:disabled { cursor: wait; opacity: .68; }.replica-text-button { padding: 0; border: 0; color: #70538e; background: transparent; font: 700 11px/1 "Space Mono", monospace; cursor: pointer; }.replica-keyboard { display: flex; align-items: center; gap: 6px; margin: 17px 0 0; color: #887a96; font-size: 10px; }.replica-keyboard [data-replica-hotkey-inline] { display: inline-flex; gap: 4px; }.replica-keyboard kbd, .replica-hotkey kbd { padding: 3px 5px; border: 1px solid #d4cade; border-radius: 4px; color: #5c5066; background: #f7f4fa; font: 700 9px/1 "Space Mono", monospace; }

.replica-solver-panel { position: absolute; top: 72px; right: 28px; z-index: 4; width: min(420px, calc(100% - 48px)); max-height: 82%; overflow: hidden; border: 1px solid rgba(216, 180, 254, .34); border-radius: 10px; color: #f8f1ff; background: linear-gradient(180deg, rgba(31, 14, 61, .97), rgba(8, 3, 18, .97)); box-shadow: 0 18px 45px rgba(0, 0, 0, .42), 0 0 30px rgba(168, 85, 247, .28); font: 14px/1.4 Arial, sans-serif; touch-action: none; }.replica-solver-panel.is-hidden { display: none; }.replica-solver-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(216, 180, 254, .24); background: rgba(18, 7, 36, .74); cursor: grab; user-select: none; }.replica-solver-header:active { cursor: grabbing; }.replica-solver-brand { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 800; }.replica-solver-brand strong { letter-spacing: .02em; }.replica-solver-brand small { color: #cdbde8; font-size: 11px; }.replica-rune, .replica-popup-rune { width: 42px; height: 42px; border-radius: 999px; display: inline-block; flex: 0 0 auto; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .12), transparent 62%), url("/assets/voidex-selected/rune-logo.webp") center / 92% 92% no-repeat, radial-gradient(circle at 65% 28%, #3b1478, #17072d 72%); box-shadow: 0 0 24px rgba(216, 180, 254, .72); }.replica-panel-toggle { cursor: pointer; border: 1px solid rgba(216, 180, 254, .34); border-radius: 6px; padding: 4px 10px; color: #f9fafb; background: rgba(255, 255, 255, .08); font-size: 16px; line-height: 1.2; }.replica-solver-body { min-height: 34px; max-height: calc(82vh - 66px); overflow: auto; padding: 12px; }.replica-solver-body[hidden] { display: none; }.replica-panel-status { color: #eadcff; }.replica-version { margin-top: 6px; color: #8b7aa6; font-size: 11px; }.replica-result { margin-top: 10px; padding-top: 10px; border-top: 1px solid #374151; }.replica-result-head { color: #93c5fd; }.replica-result-question { margin-top: 4px; color: #f8f1ff; }.replica-result ul { margin: 8px 0 0 18px; padding: 0; }.replica-result li { margin-top: 2px; }.replica-result-meta { margin-top: 4px; color: #9ca3af; font-size: 12px; }.replica-result-ok { margin-top: 4px; color: #86efac; font-size: 12px; }.replica-result-pipeline { margin-top: 4px; color: #6b7280; font-size: 11px; }.replica-panel-reading { display: inline-flex; align-items: center; gap: 8px; }.replica-panel-reading::before { content: ""; width: 9px; height: 9px; border: 2px solid rgba(216, 180, 254, .30); border-top-color: #eadcff; border-radius: 50%; animation: replica-spin .8s linear infinite; }@keyframes replica-spin { to { transform: rotate(1turn); } }

.replica-popup { position: absolute; top: 18px; right: 18px; z-index: 7; width: 340px; box-sizing: border-box; padding: 16px; border: 1px solid rgba(216, 180, 254, .40); border-radius: 11px; color: #f8f1ff; background: radial-gradient(circle at 82% 0%, rgba(255, 255, 255, .28), transparent 44px), radial-gradient(circle at 15% 0%, rgba(168, 85, 247, .38), transparent 120px), linear-gradient(145deg, #07020f, #1a0b33 54%, #071116); box-shadow: 0 25px 60px rgba(0, 0, 0, .55), 0 0 28px rgba(168, 85, 247, .32); font: 14px/1.45 Arial, sans-serif; }.replica-popup[hidden] { display: none; }.replica-popup-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.replica-popup-top > div { display: flex; align-items: center; gap: 11px; }.replica-popup-top strong { letter-spacing: .06em; text-transform: uppercase; }.replica-popup-top button { padding: 0 5px; border: 0; color: #cdbde8; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; }.replica-popup-rune { width: 54px; height: 54px; }.replica-popup-version { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; color: #cdbde8; font-size: 12px; }.replica-popup-pill { padding: 3px 8px; border: 1px solid rgba(216, 180, 254, .38); border-radius: 999px; color: #f0abfc; background: rgba(168, 85, 247, .16); }.replica-popup-card { margin-top: 12px; padding: 12px; border: 1px solid rgba(216, 180, 254, .26); border-radius: 8px; background: linear-gradient(180deg, rgba(38, 18, 73, .86), rgba(8, 13, 26, .94)), rgba(10, 6, 20, .94); box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 20px rgba(168, 85, 247, .18); }.replica-popup-card small { display: block; margin-top: 3px; color: #cdbde8; font-size: 12px; }.replica-popup-title { color: #f0abfc; font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }.replica-popup-main, .replica-popup-secondary { width: 100%; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(233, 213, 255, .42); border-radius: 8px; color: #fff; background: linear-gradient(135deg, #7e22ce, #4f46e5); font-size: 14px; line-height: 1.2; font-weight: 800; cursor: pointer; box-shadow: 0 0 18px rgba(168, 85, 247, .36); }.replica-popup-secondary { margin: 10px 0 0; color: #eadcff; background: rgba(255, 255, 255, .07); box-shadow: none; }.replica-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px; border: 1px solid rgba(216, 180, 254, .20); border-radius: 8px; color: #eadcff; background: rgba(255, 255, 255, .045); cursor: pointer; user-select: none; }.replica-switch-row b, .replica-switch-row small { display: block; }.replica-switch-row b { color: #f8f1ff; }.replica-switch-row small { margin-top: 2px; color: #a99abd; font-size: 12px; }.replica-switch-row input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }.replica-switch-row i { position: relative; display: block; flex: 0 0 auto; width: 48px; height: 28px; border: 1px solid rgba(216, 180, 254, .28); border-radius: 999px; background: rgba(15, 23, 42, .72); box-shadow: inset 0 0 10px rgba(0, 0, 0, .35); transition: background .16s ease, border-color .16s ease; }.replica-switch-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #f8f1ff, #cdbde8); box-shadow: 0 3px 8px rgba(0, 0, 0, .38); transition: transform .16s ease; }.replica-switch-row input:checked + i { border-color: rgba(134, 239, 172, .64); background: linear-gradient(135deg, rgba(20, 184, 166, .86), rgba(126, 34, 206, .92)); box-shadow: 0 0 16px rgba(45, 212, 191, .22), inset 0 0 10px rgba(255, 255, 255, .10); }.replica-switch-row input:checked + i::after { transform: translateX(20px); }.replica-delay-label { display: block; margin-top: 12px; color: #cdbde8; font-size: 12px; }.replica-delay { box-sizing: border-box; width: 100%; margin-top: 6px; padding: 9px; border: 1px solid rgba(216, 180, 254, .28); border-radius: 8px; color: #f4f0ff; background: rgba(255, 255, 255, .06); }.replica-hotkey { margin-top: 12px; padding: 10px; border: 1px solid rgba(216, 180, 254, .22); border-radius: 8px; background: rgba(255, 255, 255, .05); }.replica-hotkey > span { display: inline-block; color: #eadcff; }.replica-hotkey kbd { float: right; border-color: rgba(216, 180, 254, .34); color: #fff; background: rgba(255, 255, 255, .08); }.replica-hotkey small { clear: both; padding-top: 8px; }.replica-popup-message { margin: 11px 2px 0; color: #cdbde8; font-size: 12px; }

.replica-popup { width: 372px; }

.extension-replica-mobile { display: none; }.extension-replica-action { display: inline-flex; align-items: center; gap: 11px; margin-top: 36px; padding-bottom: 6px; border-bottom: 1px solid rgba(134, 239, 172, .58); color: var(--replica-aqua); font: 700 11px/1 "Space Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }.extension-replica-action:hover, .extension-replica-action:focus-visible { color: #fff; }.extension-replica-action span { font-size: 15px; }

@media (max-width: 640px) {
  .extension-replica { padding: 66px 16px 68px; }.extension-replica-copy h2 { font-size: clamp(34px, 10vw, 49px); }.extension-replica-copy > p:not(.extension-replica-kicker) { font-size: 14px; }.extension-replica-legend { display: grid; grid-template-columns: 1fr; gap: 8px; }.replica-workspace { display: none; }.extension-replica-mobile { display: block; width: min(100%, 390px); margin: 37px auto 0; }.extension-replica-mobile-frame { position: relative; overflow: hidden; border: 1px solid rgba(134, 239, 172, .48); border-radius: 8px; background: #0a0412; box-shadow: 0 26px 60px rgba(0, 0, 0, .45), 0 0 0 7px rgba(177, 120, 255, .04); aspect-ratio: 390 / 690; }.extension-replica-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0a0412; }.extension-replica-video-fallback { position: absolute; inset: 0; z-index: -1; display: grid; align-content: center; justify-items: center; gap: 12px; color: #f7f3ff; background: radial-gradient(circle at 65% 28%, rgba(101, 242, 255, .17), transparent 22%), linear-gradient(155deg, #250c40, #080310 72%); }.extension-replica-video-fallback span { color: #86efac; font: 700 13px/1 "Space Mono", monospace; letter-spacing: .15em; }.extension-replica-video-fallback strong { color: #86efac; font: 700 86px/1 "Space Mono", monospace; }.extension-replica-video-fallback small { color: #d7cce8; }.extension-replica-video-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 5px; color: #fff; background: rgba(8, 3, 16, .76); backdrop-filter: blur(8px); font: 700 9px/1 "Space Mono", monospace; cursor: pointer; }.extension-replica-video-toggle i { width: 7px; height: 10px; border-right: 2px solid currentColor; border-left: 2px solid currentColor; }.extension-replica-video-toggle[aria-pressed="true"] i { width: 0; height: 0; border-top: 6px solid transparent; border-right: 0; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }.extension-replica-mobile figcaption { display: grid; gap: 7px; margin-top: 13px; color: #c5b7d5; font-size: 12px; line-height: 1.4; }.extension-replica-mobile figcaption span { color: #86efac; font: 700 9px/1 "Space Mono", monospace; letter-spacing: .1em; }.extension-replica-action { margin-top: 36px; }
}

@media (max-width: 640px) { .replica-options { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .extension-replica-mobile, .extension-mobile-demo { width: min(100%, 620px); }
  .extension-replica-mobile-frame, .extension-mobile-frame { aspect-ratio: 780 / 1160; }
}
@media (prefers-reduced-motion: reduce) { .extension-replica *, .extension-replica *::before, .extension-replica *::after { scroll-behavior: auto; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* The stage follows the page width. The portrait recording stays undistorted
   inside a responsive cinematic frame instead of forcing a narrow column. */
.extension-replica-video-stage { display: grid; gap: 16px; margin: clamp(40px, 6vw, 76px) 0 0; }
.extension-replica-video-frame { position: relative; width: 100%; min-width: 0; overflow: hidden; border: 1px solid rgba(216, 180, 254, .58); border-radius: 14px; background: radial-gradient(circle at 50% 38%, rgba(126, 34, 206, .30), transparent 36%), linear-gradient(145deg, #160623, #07020f); box-shadow: 0 32px 74px rgba(0, 0, 0, .45), 0 0 0 8px rgba(177, 120, 255, .08); aspect-ratio: 16 / 9; }
.extension-replica-video-frame::before { content: "ЗАПИСЬ РАБОТЫ · MOODLE"; position: absolute; top: 16px; left: 18px; z-index: 1; padding: 7px 9px; border: 1px solid rgba(216, 180, 254, .34); border-radius: 999px; color: #eadcff; background: rgba(18, 6, 31, .78); font: 700 9px/1 "Space Mono", monospace; letter-spacing: .13em; }
.extension-replica-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.extension-replica-video-fallback { position: absolute; inset: 0; z-index: -1; display: grid; align-content: center; justify-items: center; gap: 12px; color: #f7f3ff; background: radial-gradient(circle at 65% 28%, rgba(192, 132, 252, .25), transparent 22%), linear-gradient(155deg, #250c40, #080310 72%); }.extension-replica-video-fallback span, .extension-replica-video-fallback strong { color: #d8b4fe; font-family: "Space Mono", monospace; }.extension-replica-video-fallback span { font-size: 13px; font-weight: 700; letter-spacing: .15em; }.extension-replica-video-fallback strong { font-size: 86px; line-height: 1; }.extension-replica-video-fallback small { color: #d7cce8; }
.extension-replica-video-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid rgba(216, 180, 254, .58); border-radius: 6px; color: #fff; background: rgba(18, 6, 31, .82); backdrop-filter: blur(8px); font: 700 9px/1 "Space Mono", monospace; cursor: pointer; }.extension-replica-video-toggle i { width: 7px; height: 10px; border-right: 2px solid currentColor; border-left: 2px solid currentColor; }.extension-replica-video-toggle[aria-pressed="true"] i { width: 0; height: 0; border-top: 6px solid transparent; border-right: 0; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }.extension-replica-video-toggle:focus-visible { outline: 3px solid #d8b4fe; outline-offset: 3px; }
.extension-replica-video-stage figcaption { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 12px clamp(24px, 4vw, 54px); align-items: start; padding: clamp(20px, 2.8vw, 30px); border: 1px solid rgba(216, 180, 254, .32); border-radius: 12px; background: linear-gradient(145deg, rgba(59, 21, 96, .55), rgba(8, 3, 18, .78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }.extension-replica-video-stage figcaption span { display: block; grid-column: 1 / -1; color: #d8b4fe; font: 700 10px/1 "Space Mono", monospace; letter-spacing: .13em; }.extension-replica-video-stage figcaption strong { display: block; color: #f8f1ff; font-size: clamp(20px, 2vw, 28px); line-height: 1.08; letter-spacing: -.035em; }.extension-replica-video-stage figcaption p { margin: 0; color: var(--replica-muted); font-size: 14px; line-height: 1.55; }
.extension-replica-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; box-sizing: border-box; margin-top: clamp(26px, 4vw, 42px); padding: 18px 20px; border: 1px solid rgba(233, 213, 255, .72); border-radius: 10px; color: #fff; background: linear-gradient(120deg, #5b1aa2, #7e22ce 54%, #4c1478); box-shadow: 0 16px 34px rgba(119, 44, 180, .32), inset 0 1px 0 rgba(255, 255, 255, .18); font: 800 clamp(14px, 1.5vw, 17px)/1.2 "Space Mono", monospace; letter-spacing: .01em; text-transform: uppercase; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }.extension-replica-action:hover, .extension-replica-action:focus-visible { color: #fff; filter: brightness(1.13); transform: translateY(-2px); box-shadow: 0 22px 42px rgba(119, 44, 180, .43), inset 0 1px 0 rgba(255, 255, 255, .24); }.extension-replica-action:focus-visible { outline: 3px solid #e9d5ff; outline-offset: 4px; }.extension-replica-action-copy { display: grid; gap: 6px; }.extension-replica-action-copy small { color: #eadcff; font: 700 9px/1 "Space Mono", monospace; letter-spacing: .14em; }.extension-replica-action-arrow { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, .46); border-radius: 50%; font-size: 23px; line-height: 1; }

@media (max-width: 760px) {
  .extension-replica-video-stage { display: block; margin-top: 37px; }.extension-replica-video-frame { width: 100%; max-height: 74svh; margin: 0 auto; border-radius: 10px; aspect-ratio: 780 / 1160; }.extension-replica-video-frame::before { top: 13px; left: 14px; }.extension-replica-video-stage figcaption { display: block; width: 100%; margin: 16px auto 0; padding: 0; border: 0; background: transparent; box-shadow: none; }.extension-replica-video-stage figcaption strong { margin-top: 9px; font-size: 18px; }.extension-replica-video-stage figcaption p { margin-top: 8px; font-size: 13px; }.extension-replica-video-toggle { right: 12px; bottom: 12px; }.extension-replica-action { padding: 16px; }
}