.pc-bridge-design {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 84px 0 44px;
  background: linear-gradient(180deg, #080c1130, #080c1180), linear-gradient(90deg, #080c11d9 0%, #080c1140 55%, #080c1170 100%), url("assets/design/bifrost-space-01.webp") center / cover no-repeat, #080c11;
  color: #edf3f8;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-margin-top: 72px;
}
.pc-bridge-shell { width: min(calc(100% - 112px), 1240px); margin-inline: auto; }
.pc-bridge-intro { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 30px; align-items: end; }
.pc-bridge-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; font-size: .94rem; font-weight: 600; color: #d4dbe2; }
.pc-bridge-kicker > span:first-child { inline-size: 7px; block-size: 7px; background: #90dacf; border-radius: 50%; box-shadow: 0 0 12px #90dacf69; }
.pc-bridge-included { font-size: .68rem; font-weight: 500; color: #a7c5c2; border: 1px solid #45645f; border-radius: 100px; padding: 4px 9px; margin-left: 6px; }
.pc-bridge-copy h2 { margin: 0 0 26px; font-size: clamp(2.75rem, 4.5vw, 4rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; text-wrap: nowrap; }
.pc-bridge-copy h2 > span { color: #efb68d; }
.pc-bridge-lead { margin: 0; max-width: 455px; font-size: 1rem; line-height: 1.65; color: #c0cbd4; }
.pc-bridge-transfer { margin: 14px 0 0; max-width: 455px; font-size: .91rem; line-height: 1.65; color: #a8b8c3; }
.pc-bridge-editors { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; list-style: none; margin: 25px 0 0; padding: 0; }
.pc-bridge-editors li { display: flex; align-items: center; gap: 8px; font-size: .71rem; line-height: 1.5; color: #c5ccd3; }
.pc-bridge-editors img { inline-size: 26px; block-size: 26px; object-fit: contain; }
.pc-bridge-stage { position: relative; height: 405px; min-width: 0; }
.pc-bridge-stage figure { margin: 0; position: absolute; }
.pc-bridge-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: #121b22; box-shadow: 0 12px 40px #0009; }
.pc-bridge-media img, .pc-bridge-media video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pc-bridge-media [hidden] { display: none; }
.pc-bridge-stage figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .66rem; line-height: 1.5; color: #e9edf0; margin-bottom: 7px; }
.pc-bridge-source { width: 43%; left: 3%; bottom: 190px; transform: rotate(-4deg); z-index: 1; }
.pc-bridge-source .pc-bridge-media { border: 1px solid #b9cdd147; }
.pc-bridge-result { width: 70%; right: 0; bottom: 75px; transform: rotate(2deg); z-index: 2; }
.pc-bridge-result .pc-bridge-media { border: 1px solid #d9ebe978; }
.pc-bridge-result figcaption > span:last-child { color: #90dacf; font-size: .9rem; }
.pc-bridge-source-kind, .pc-bridge-result-kind { display: inline-block; margin-top: 7px; font-size: .61rem; line-height: 1.4; color: #c8d1d9; }
.pc-bridge-result-kind { color: #bde1d7; }
.pc-bridge-prompt { position: absolute; inset: auto 0 0; margin: 0; padding: 10px 0 0 13px; border-left: 2px solid #779e98; font-size: .72rem; line-height: 1.65; color: #bcc9d2; max-width: 510px; }
.pc-bridge-prompt[hidden] { display: none; }
.pc-bridge-prompt > span { display: block; color: #90dacf; font-size: .62rem; line-height: 1.5; margin-bottom: 4px; }
.pc-bridge-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 48px; border-top: 1px solid #788d9647; }
.pc-bridge-mode { position: relative; display: flex; gap: 16px; align-items: center; padding: 24px 0 17px; color: #edf3f8; text-align: left; font: inherit; border: 0; border-top: 2px solid transparent; margin-top: -1px; background: none; cursor: pointer; min-width: 0; transition: border-color 180ms ease; }
.pc-bridge-mode[aria-pressed="true"] { border-top-color: #90dacf; }
.pc-bridge-mode-icon { width: 64px; height: 32px; object-fit: contain; flex: none; margin-top: 0; }
.pc-bridge-mode-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pc-bridge-mode-copy > strong { font-size: 1.18rem; line-height: 1.4; font-weight: 500; letter-spacing: -.025em; }
.pc-bridge-mode-copy > strong > span { margin-inline: 5px; color: #899b9f; }
.pc-bridge-mode-copy > span { font-size: .76rem; line-height: 1.55; color: #aebbc4; }
.pc-bridge-mode-arrow { margin-left: auto; padding-top: 2px; font-size: 1.3rem; color: #6f828e; transition: color 180ms ease, transform 180ms ease; }
.pc-bridge-mode[aria-pressed="true"] .pc-bridge-mode-arrow { color: #90dacf; transform: translate(2px,-2px); }
.pc-bridge-mode:hover .pc-bridge-mode-arrow { color: #efb68d; }
.pc-bridge-mode:focus-visible { outline: 2px solid #90dacf; outline-offset: 6px; border-radius: 3px; }
.pc-bridge-status { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.pc-bridge-design[data-active-mode="edit"] .pc-bridge-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: center; padding-bottom: 90px; }
.pc-bridge-design[data-active-mode="edit"] .pc-bridge-stage figure { position: static; width: auto; transform: none; }
.pc-bridge-design[data-active-mode="edit"] .pc-bridge-media { aspect-ratio: 7 / 4; }
.pc-bridge-panel { max-width: 360px; margin: 24px 0 0; overflow: hidden; border: 1px solid #52617080; border-radius: 8px; background: #1e1e1e; box-shadow: 0 16px 38px #0005; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.pc-bridge-panel-host { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid #0008; background: #252525; color: #adb1b7; font-size: 10px; line-height: 16px; }
.pc-bridge-panel-host img { display: block; object-fit: contain; }
.pc-bridge-panel-dots { margin-left: auto; font-size: 15px; }
.pc-bridge-panel figcaption { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 0; font-size: 13px; line-height: 18px; color: #d6d6d6; font-weight: 500; }
.pc-bridge-panel figcaption > span { color: #a7a7a7; }
.pc-bridge-native-toolbar { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 63px; padding: 8px; }
.pc-bridge-native-actions { flex: none; }
.pc-bridge-native-row { display: flex; align-items: center; justify-content: center; gap: 5px; }
.pc-bridge-native-button { display: block; flex: none; width: 66px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.pc-bridge-native-button img { display: block; width: 66px; height: 34px; }
.pc-bridge-native-button:hover { filter: brightness(1.12); }
.pc-bridge-native-button[aria-pressed="true"] { outline: 1px solid #a0bdb4; outline-offset: 2px; }
.pc-bridge-native-button:focus-visible { outline: 2px solid #90dacf; outline-offset: 3px; }
.pc-bridge-native-stripe { display: block; width: 210px; height: 3px; margin-top: 5px; }
.pc-bridge-native-settings { flex: none; margin-bottom: 8px; color: #999; }
@media (max-width: 1120px) {
  .pc-bridge-shell { width: calc(100% - 56px); }
  .pc-bridge-copy h2 { font-size: clamp(2.75rem,4.5vw,4rem); }
  .pc-bridge-stage { height: 380px; }
  .pc-bridge-source { left: 0; width: 46%; bottom: 194px; }
  .pc-bridge-result { width: 78%; right: 0; bottom: 93px; }
  .pc-bridge-modes { gap: 22px; }
  .pc-bridge-mode { gap: 10px; }
  .pc-bridge-mode-copy > strong { font-size: 1rem; }
  .pc-bridge-mode-icon { width: 58px; height: 29px; }
}
@media (max-width: 760px) {
  .pc-bridge-design { padding: 65px 0 38px; scroll-margin-top: 64px; }
  .pc-bridge-shell { width: calc(100% - 36px); }
  .pc-bridge-intro { grid-template-columns: 1fr; gap: 12px; }
  .pc-bridge-kicker { font-size: .85rem; margin-bottom: 21px; }
  .pc-bridge-copy h2 { font-size: clamp(2.5rem,10.7vw,3.5rem); margin-bottom: 20px; letter-spacing: -.035em; }
  .pc-bridge-lead { font-size: .92rem; max-width: 340px; }
  .pc-bridge-transfer { font-size: .85rem; max-width: 340px; margin-top: 12px; }
  .pc-bridge-editors { margin-top: 20px; gap: 14px; }
  .pc-bridge-editors li { font-size: .65rem; }
  .pc-bridge-editors img { inline-size: 23px; block-size: 23px; }
  .pc-bridge-stage { height: 350px; }
  .pc-bridge-source { left: 3%; bottom: 194px; width: 49%; }
  .pc-bridge-result { width: 80%; right: 0; bottom: 100px; }
  .pc-bridge-prompt { font-size: .68rem; max-width: none; padding-left: 11px; }
  .pc-bridge-stage figcaption { font-size: .6rem; }
  .pc-bridge-modes { margin-top: 29px; gap: 0; grid-template-columns: 1fr; }
  .pc-bridge-mode { align-items: center; padding: 18px 0; margin: 0; border-top: 0; border-bottom: 1px solid #5c73753d; }
  .pc-bridge-mode[aria-pressed="true"]::before { content: ""; position: absolute; inset: 12px auto 12px -9px; width: 2px; background: #90dacf; }
  .pc-bridge-mode-icon { width: 64px; height: 32px; margin-right: 3px; margin-top: 0; }
  .pc-bridge-mode-copy { gap: 5px; }
  .pc-bridge-mode-copy > strong { font-size: 1.03rem; }
  .pc-bridge-mode-copy > span { font-size: .72rem; }
  .pc-bridge-mode-copy br { display: none; }
  .pc-bridge-mode-arrow { padding: 0; }
  .pc-bridge-design[data-active-mode="edit"] .pc-bridge-stage { height: auto; grid-template-columns: 1fr; gap: 24px; padding: 20px 0 0; }
  .pc-bridge-design[data-active-mode="edit"] .pc-bridge-prompt { position: static; grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-bridge-mode, .pc-bridge-mode-arrow { transition: none; }
}