/* Tide foreground content imported from C:/Users/litia/Downloads/index.html. */
.tide-source-top-nav {
      position: fixed;
      top: clamp(18px, 3vw, 34px);
      left: clamp(18px, 3.4vw, 42px);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: clamp(18px, 3vw, 38px);
      color: rgba(237, 241, 229, 0.84);
      opacity: 0;
      transform: translateY(-12px);
      animation: navEnter 1.2s ease 0.6s forwards;
    }

    .tide-source-brand-icon {
      width: clamp(30px, 3.2vw, 46px);
      height: clamp(30px, 3.2vw, 46px);
      object-fit: contain;
      filter: drop-shadow(0 0 14px rgba(181, 255, 59, 0.34));
    }

    .tide-source-nav-actions {
      display: flex;
      align-items: center;
      gap: clamp(14px, 2.2vw, 30px);
    }

    .tide-source-nav-action {
      appearance: none;
      border: 0;
      padding: 0;
      background: transparent;
      text-decoration: none;
      color: rgba(229, 235, 221, 0.76);
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      font-size: clamp(13px, 1vw, 16px);
      font-weight: 400;
      letter-spacing: 0.08em;
      line-height: 1;
      cursor: pointer;
      text-shadow: 0 0 14px rgba(6, 6, 24, 0.75);
      transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
    }

    .tide-source-nav-action:hover,
    .tide-source-nav-action:focus-visible {
      color: rgba(247, 249, 240, 0.94);
      text-shadow: 0 0 18px rgba(194, 255, 91, 0.38);
      transform: translateY(-1px);
      outline: none;
    }

    #tide-source-platform-title,
    #tide-source-protocol-title,
    #tide-source-practice-title,
    #tide-source-dev-title {
      scroll-margin-top: 110px;
    }

    body.tide-content-about-open {
      overflow: hidden;
    }

    html.tide-content-promo-playing,
    body.tide-content-promo-playing {
      overflow: hidden;
      overscroll-behavior: none;
    }

    body.tide-content-promo-playing {
      touch-action: none;
    }

    .tide-source-about-modal {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: grid;
      place-items: center;
      padding: clamp(16px, 4vw, 48px);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      transition: opacity 240ms ease, visibility 240ms ease;
    }

    .tide-source-about-modal.is-open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .tide-source-about-backdrop {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 30%, rgba(178, 51, 121, 0.2), transparent 44%),
        rgba(2, 2, 14, 0.82);
      backdrop-filter: blur(14px);
    }

    .tide-source-about-dialog {
      position: relative;
      width: min(940px, 100%);
      max-height: min(86svh, 860px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(220, 211, 255, 0.18);
      border-radius: 18px;
      color: rgba(237, 233, 250, 0.9);
      background:
        radial-gradient(circle at 90% 0%, rgba(114, 79, 196, 0.18), transparent 32%),
        linear-gradient(155deg, rgba(18, 17, 42, 0.98), rgba(7, 8, 24, 0.98));
      box-shadow: 0 38px 110px rgba(0, 0, 12, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transform: translateY(18px) scale(0.985);
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .tide-source-about-modal.is-open .tide-source-about-dialog {
      transform: translateY(0) scale(1);
    }

    .tide-source-about-header {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 20px clamp(22px, 4vw, 42px);
      border-bottom: 1px solid rgba(220, 211, 255, 0.1);
      background: rgba(8, 8, 27, 0.72);
      backdrop-filter: blur(18px);
    }

    .tide-source-about-header-copy {
      min-width: 0;
    }

    .tide-source-about-eyebrow {
      margin: 0 0 5px;
      color: rgba(164, 146, 224, 0.68);
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .tide-source-about-header h2 {
      margin: 0;
      color: rgba(247, 244, 255, 0.96);
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    .tide-source-about-close {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(220, 211, 255, 0.16);
      border-radius: 50%;
      color: rgba(229, 223, 247, 0.72);
      background: rgba(255, 255, 255, 0.035);
      font: 300 25px/1 Arial, sans-serif;
      cursor: pointer;
      transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .tide-source-about-close:hover,
    .tide-source-about-close:focus-visible {
      color: #fff;
      border-color: rgba(220, 211, 255, 0.38);
      background: rgba(130, 102, 207, 0.16);
      transform: rotate(6deg);
      outline: none;
    }

    .tide-source-about-content {
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: clamp(28px, 5vw, 58px) clamp(22px, 5vw, 60px) 64px;
      scrollbar-width: thin;
      scrollbar-color: rgba(146, 120, 214, 0.5) rgba(255, 255, 255, 0.03);
    }

    .tide-source-about-content::-webkit-scrollbar {
      width: 8px;
    }

    .tide-source-about-content::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(146, 120, 214, 0.42);
    }

    .tide-source-about-readme-hero {
      padding: 8px 0 34px;
      text-align: center;
    }

    .tide-source-about-readme-hero h3 {
      margin: 0;
      color: #f6f2ff;
      font-size: clamp(38px, 7vw, 66px);
      font-weight: 600;
      letter-spacing: 0.05em;
    }

    .tide-source-about-readme-hero > p {
      margin: 10px 0 20px;
      color: rgba(232, 226, 247, 0.76);
      font-size: clamp(14px, 2vw, 17px);
    }

    .tide-source-about-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .tide-source-about-badge {
      display: inline-flex;
      overflow: hidden;
      border: 1px solid rgba(220, 211, 255, 0.12);
      border-radius: 5px;
      color: rgba(240, 236, 252, 0.84);
      background: rgba(255, 255, 255, 0.035);
      font: 11px/1.8 "Cascadia Code", Consolas, monospace;
    }

    .tide-source-about-badge span {
      padding: 1px 8px;
    }

    .tide-source-about-badge span:last-child {
      color: #fff;
      background: rgba(112, 79, 194, 0.62);
    }

    .tide-source-about-content > h3 {
      margin: 52px 0 20px;
      padding-top: 6px;
      color: rgba(247, 244, 255, 0.96);
      font-size: clamp(21px, 3vw, 27px);
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .tide-source-about-content h4 {
      margin: 34px 0 14px;
      color: rgba(235, 230, 250, 0.92);
      font-size: 18px;
      font-weight: 500;
    }

    .tide-source-about-content p,
    .tide-source-about-content li {
      color: rgba(215, 209, 233, 0.78);
      font-size: 14px;
      line-height: 1.9;
    }

    .tide-source-about-content p {
      margin: 14px 0;
    }

    .tide-source-about-content ul,
    .tide-source-about-content ol {
      margin: 12px 0;
      padding-left: 24px;
    }

    .tide-source-about-content li + li {
      margin-top: 5px;
    }

    .tide-source-about-content strong {
      color: rgba(246, 242, 255, 0.94);
      font-weight: 600;
    }

    .tide-source-about-content a {
      color: #b9a7ef;
      text-decoration-color: rgba(185, 167, 239, 0.36);
      text-underline-offset: 3px;
    }

    .tide-source-about-content a:hover {
      color: #d6caff;
    }

    .tide-source-about-content blockquote {
      margin: 22px 0;
      padding: 14px 18px;
      border-left: 2px solid rgba(158, 127, 231, 0.66);
      background: rgba(120, 87, 190, 0.07);
    }

    .tide-source-about-content blockquote p,
    .tide-source-about-content blockquote ul {
      margin-top: 0;
      margin-bottom: 0;
    }

    .tide-source-about-warning {
      margin: 24px 0 !important;
      padding: 16px 18px;
      border: 1px solid rgba(236, 130, 142, 0.2);
      border-radius: 8px;
      color: rgba(255, 187, 194, 0.86) !important;
      background: rgba(116, 37, 58, 0.12);
    }

    .tide-source-about-table-wrap {
      margin: 18px 0 28px;
      overflow-x: auto;
      border: 1px solid rgba(220, 211, 255, 0.11);
      border-radius: 9px;
    }

    .tide-source-about-content table {
      width: 100%;
      min-width: 690px;
      border-collapse: collapse;
      font-size: 13px;
    }

    .tide-source-about-content th,
    .tide-source-about-content td {
      padding: 13px 15px;
      border-bottom: 1px solid rgba(220, 211, 255, 0.08);
      color: rgba(214, 208, 232, 0.78);
      text-align: left;
      vertical-align: top;
    }

    .tide-source-about-content th {
      color: rgba(242, 238, 253, 0.9);
      font-weight: 500;
      background: rgba(118, 85, 190, 0.1);
    }

    .tide-source-about-content tr:last-child td {
      border-bottom: 0;
    }

    .tide-source-about-content code {
      padding: 2px 6px;
      border: 1px solid rgba(220, 211, 255, 0.09);
      border-radius: 4px;
      color: rgba(211, 199, 247, 0.94);
      background: rgba(3, 4, 18, 0.54);
      font: 12px/1.6 "Cascadia Code", Consolas, monospace;
    }

    .tide-source-about-content pre {
      margin: 18px 0 26px;
      padding: 18px 20px;
      overflow: auto;
      border: 1px solid rgba(220, 211, 255, 0.1);
      border-radius: 9px;
      background: rgba(2, 3, 15, 0.72);
    }

    .tide-source-about-content pre code {
      padding: 0;
      border: 0;
      color: rgba(211, 205, 230, 0.84);
      background: none;
      white-space: pre;
    }

    @media (max-width: 640px) {
      .tide-source-about-modal {
        padding: 10px;
      }

      .tide-source-about-dialog {
        max-height: 92svh;
        border-radius: 13px;
      }

      .tide-source-about-header {
        padding: 16px 18px;
      }

      .tide-source-about-content {
        padding: 26px 18px 44px;
      }
    }

    @keyframes navEnter {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .tide-source-copy-panel {
      position: absolute;
      right: clamp(24px, 4vw, 72px);
      top: 52vh;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(720px, 960px);
      gap: clamp(12px, 1.6vw, 24px);
      justify-items: end;
      align-items: start;
      max-width: min(78vw, 860px);
      color: rgba(238, 232, 255, 0.92);
      pointer-events: auto;
      opacity: 0;
      transform: translate(-96px, -50%);
      filter: blur(7px);
    }

    .tide-source-copy-mark {
      justify-self: end;
      text-align: right;
      font-family: "Cooper Black", "Comic Sans MS", "Segoe Print", "Marker Felt", "Brush Script MT", cursive;
      font-size: clamp(48px, 4.8vw, 88px);
      font-weight: 900;
      font-style: italic;
      line-height: 0.78;
      letter-spacing: 0.035em;
      color: rgba(229, 218, 255, 0.96);
      text-shadow: 0 0 28px rgba(255, 82, 164, 0.24);
    }

    .tide-source-copy-body {
      margin: 0;
      padding-top: 0;
      width: min(88vw, 960px);
      text-align: right;
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      font-size: clamp(15px, 1.28vw, 22px);
      font-weight: 400;
      line-height: 1.55;
      letter-spacing: 0.035em;
      color: rgba(229, 235, 221, 0.82);
      text-shadow: 0 0 18px rgba(6, 6, 24, 0.78);
      white-space: nowrap;
    }

    .tide-source-hero-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: clamp(10px, 1.2vw, 18px);
      pointer-events: auto;
    }

    .tide-source-hero-action {
      appearance: none;
      border: 1px solid rgba(228, 235, 218, 0.28);
      border-radius: 999px;
      min-width: clamp(92px, 8vw, 132px);
      padding: clamp(9px, 0.9vw, 13px) clamp(18px, 1.6vw, 26px);
      background: rgba(16, 13, 38, 0.26);
      color: rgba(229, 218, 255, 0.88);
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      font-size: clamp(13px, 1.08vw, 17px);
      font-weight: 600;
      font-style: normal;
      letter-spacing: 0.035em;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      box-shadow: inset 0 0 18px rgba(179, 142, 255, 0.08), 0 0 22px rgba(8, 6, 28, 0.34);
      text-shadow: 0 0 16px rgba(255, 82, 164, 0.22);
      transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .tide-source-hero-action:hover,
    .tide-source-hero-action:focus-visible {
      border-color: rgba(229, 218, 255, 0.54);
      background: rgba(66, 45, 118, 0.28);
      color: rgba(248, 244, 255, 0.96);
      transform: translateY(-1px);
      outline: none;
    }

    @keyframes copyPanelEnter {
      from {
        opacity: 0;
        transform: translate(-96px, -50%);
        filter: blur(7px);
      }
      to {
        opacity: 1;
        transform: translate(0, -50%);
        filter: blur(0);
      }
    }

    @media (max-width: 760px) {
      .tide-source-copy-panel {
        right: clamp(18px, 4vw, 30px);
        top: 18vh;
        grid-template-columns: minmax(260px, 1fr);
        gap: 18px;
        max-width: calc(100vw - 36px);
        justify-items: end;
      }

      .tide-source-copy-mark {
        font-size: clamp(36px, 9vw, 60px);
        justify-self: end;
        text-align: right;
      }

      .tide-source-copy-body {
        width: calc(100vw - 48px);
        font-size: clamp(12px, 2.3vw, 16px);
        line-height: 1.68;
        white-space: nowrap;
        text-align: right;
      }

      .tide-source-hero-actions {
        gap: 10px;
      }

      .tide-source-hero-action {
        min-width: 82px;
        padding: 8px 15px;
        font-size: 12px;
      }
    }
    /* ===== 宣传片场景样式 (整合自 po.html) ===== */
    .tide-source-promo-overlay { position: fixed; inset: 0; z-index: 10; opacity: 0; visibility: hidden; pointer-events: none; background: transparent; transition: opacity .4s ease; }
    .tide-source-promo-overlay.active { opacity: 1; visibility: visible; }
    .tide-source-promo-overlay .tide-source-grain { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .04; mix-blend-mode: screen;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      animation: promograin .5s steps(3) infinite; }
    @keyframes promograin { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(-2%,-1%)} }
    .tide-source-promo-overlay .tide-source-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: radial-gradient(ellipse 80% 76% at 50% 48%, transparent 44%, rgba(0,0,0,.62) 100%); }
    #tide-source-promoCam { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 50%; will-change: transform;
      filter: brightness(calc(1 + var(--beat,0) * .22)) saturate(calc(1 + var(--beat,0) * .35)); }
    #tide-source-promoBeatwrap { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
    .tide-source-promo-overlay .tide-source-scene { position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center; padding: 0 6vw;
      opacity: 0; transform: scale(1.07); filter: blur(7px); pointer-events: none;
      transition: opacity .7s ease, transform 1.15s cubic-bezier(.16,1,.3,1), filter .7s ease; }
    .tide-source-promo-overlay .tide-source-scene.show { opacity: 1; transform: scale(1); filter: blur(0); }
    .tide-source-promo-overlay .tide-source-scene.leaving { opacity: 0; transform: scale(.93); filter: blur(7px); transition: opacity .6s ease, transform .8s cubic-bezier(.4,0,.2,1), filter .6s ease; }
    .tide-source-promo-overlay .tide-source-kin .tide-source-w { display: inline-block; overflow: hidden; vertical-align: top; }
    .tide-source-promo-overlay .tide-source-kin .tide-source-wi { display: inline-block; transform: translateY(118%) rotate(4deg);
      transition: transform 1s cubic-bezier(.16,1,.3,1); }
    .tide-source-promo-overlay .tide-source-scene.show .tide-source-kin .tide-source-wi { transform: none; }
    .tide-source-promo-overlay .tide-source-line { color: #eef4fb; }
    .tide-source-promo-overlay .tide-source-big { font-size: clamp(36px,6.2vw,78px); font-weight: 800; letter-spacing: 3px; line-height: 1.28; }
    .tide-source-promo-overlay .tide-source-mid { font-size: clamp(20px,3.2vw,38px); font-weight: 600; letter-spacing: 1px; }
    .tide-source-promo-overlay .tide-source-dim { color: #8a97ad; font-weight: 300; }
    .tide-source-promo-overlay .tide-source-accent { color: #d3ff91; }
    .tide-source-promo-overlay .float { animation: promofloaty 6s ease-in-out infinite; }
    @keyframes promofloaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .tide-source-promo-overlay .tide-source-hero { position: relative; font-weight: 800; letter-spacing: 4px; color: #eaf6fb;
      font-size: clamp(64px,12vw,150px); opacity: 0; }
    .tide-source-promo-overlay .tide-source-scene.show .tide-source-hero { animation: promoheroIn 1.3s cubic-bezier(.16,1,.3,1) forwards, promoheroBreathe 4.6s ease-in-out 1.4s infinite; }
    .tide-source-promo-overlay .tide-source-hero::before, .tide-source-promo-overlay .tide-source-hero::after { content: attr(data-text); position: absolute; left: 0; top: 0; pointer-events: none; }
    .tide-source-promo-overlay .tide-source-hero::before { color: rgba(90,220,235,.5); transform: translateX(-3px); mix-blend-mode: screen; }
    .tide-source-promo-overlay .tide-source-hero::after { color: rgba(235,110,120,.32); transform: translateX(3px); mix-blend-mode: screen; }
    .tide-source-promo-overlay .tide-source-hero .tide-source-warm { color: #ffcf6a; text-shadow: 0 0 26px rgba(255,190,90,.55); }
    @keyframes promoheroIn { from { opacity:0; filter:blur(14px); transform:translateX(-90px) scale(1.1); } to { opacity:1; filter:blur(0); transform:none; } }
    @keyframes promoheroBreathe { 0%,100%{text-shadow:0 0 22px rgba(213,255,160,.35),0 0 50px rgba(181,255,59,.18);filter:brightness(.95)} 50%{text-shadow:0 0 34px rgba(225,255,186,.6),0 0 80px rgba(194,255,103,.34);filter:brightness(1.1)} }
    .tide-source-promo-overlay .tide-source-cards { display: flex; gap: clamp(16px,2.4vw,34px); perspective: 1400px; }
    .tide-source-promo-overlay .tide-source-pcard { width: clamp(150px,17vw,230px); height: clamp(190px,22vw,290px); border-radius: 22px;
      border: 1px solid rgba(255,255,255,.09); background: linear-gradient(160deg, rgba(26,28,36,.78), rgba(12,13,18,.82));
      box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
      opacity: 0; transform: translateY(50px) rotateX(24deg) rotateY(-12deg) scale(.9); filter: blur(9px);
      transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1); }
    .tide-source-promo-overlay .tide-source-scene.show .tide-source-pcard { opacity: 1; transform: none; filter: blur(0); }
    .tide-source-promo-overlay .tide-source-scene.show .tide-source-pcard.tide-source-c2 { transition-delay: .13s; }
    .tide-source-promo-overlay .tide-source-scene.show .tide-source-pcard.tide-source-c3 { transition-delay: .26s; }
    .tide-source-promo-overlay .tide-source-pcard .tide-source-orb { width: 64px; height: 64px; border-radius: 18px;
      background: radial-gradient(circle at 50% 36%, rgba(210,218,255,.95), rgba(120,132,220,.9) 46%, rgba(70,80,160,.92));
      box-shadow: 0 0 30px rgba(130,150,235,.5); animation: promofloaty 5s ease-in-out infinite; }
    .tide-source-promo-overlay .tide-source-pcard .tide-source-pn { color: #e6ecf7; font-size: clamp(15px,1.7vw,20px); font-weight: 700; }
    .tide-source-promo-overlay .tide-source-pcard .tide-source-pt { color: #7c8aa2; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
    .tide-source-promo-overlay .tide-source-diy { display: flex; flex-direction: column; align-items: center; gap: 40px; }
    .tide-source-promo-overlay .tide-source-diy-pv { --pv:#b5ff3b; --pv2:rgba(181,255,59,.4); width: min(52vw,520px); border-radius: 20px;
      border: 1px solid rgba(255,255,255,.09); padding: 26px 30px;
      background: linear-gradient(160deg, rgba(24,26,32,.85), rgba(12,13,18,.9));
      box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px var(--pv2);
      display: flex; flex-direction: column; gap: 15px; transition: box-shadow .8s ease; }
    .tide-source-promo-overlay .tide-source-diy-pv .tide-source-b { height: 12px; border-radius: 6px; }
    .tide-source-promo-overlay .tide-source-diy-pv .tide-source-ba { width: 62%; background: var(--pv); box-shadow: 0 0 16px var(--pv); transition: background .8s ease, box-shadow .8s ease; }
    .tide-source-promo-overlay .tide-source-diy-pv .tide-source-bb { width: 86%; background: linear-gradient(90deg, var(--pv), transparent); transition: background .8s ease; }
    .tide-source-promo-overlay .tide-source-diy-pv .tide-source-btn { align-self: flex-start; margin-top: 4px; padding: 9px 26px; border-radius: 999px; color: #06232a;
      font-size: 13px; font-weight: 800; background: var(--pv); box-shadow: 0 8px 22px var(--pv2); transition: background .8s ease, box-shadow .8s ease; }
    .tide-source-promo-overlay .tide-source-sws { display: flex; gap: 18px; }
    .tide-source-promo-overlay .tide-source-sw { width: 42px; height: 42px; border-radius: 50%; border: 2px solid transparent;
      transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; }
    .tide-source-promo-overlay .tide-source-sw.on { transform: scale(1.22); border-color: rgba(255,255,255,.75); box-shadow: 0 0 24px currentColor; }
    .tide-source-promo-overlay .tide-source-demoin { width: min(52vw,520px); height: 58px; position: relative; overflow: hidden; display: flex; align-items: center;
      border-radius: 999px; border: 1px solid rgba(181,255,59,.5);
      background: linear-gradient(180deg, rgba(181,255,59,.06), rgba(255,255,255,.015)), rgba(8,13,24,.64);
      box-shadow: 0 0 0 1px rgba(181,255,59,.08), 0 0 34px rgba(181,255,59,.2); animation: promoinGlow 2.4s ease-in-out infinite; }
    @keyframes promoinGlow { 0%,100%{box-shadow:0 0 0 1px rgba(181,255,59,.08),0 0 26px rgba(181,255,59,.16)} 50%{box-shadow:0 0 0 1px rgba(181,255,59,.14),0 0 46px rgba(181,255,59,.32)} }
    .tide-source-promo-overlay .tide-source-demoin .tide-source-dp { padding: 0 8px 0 24px; color: #b5ff3b; font: 800 20px "Cascadia Code",Consolas,monospace; }
    .tide-source-promo-overlay .tide-source-demoin .tide-source-dt { color: #d7deec; font: 17px "Cascadia Code",Consolas,"Microsoft YaHei UI",monospace; white-space: nowrap; }
    .tide-source-promo-overlay .tide-source-demoin .tide-source-cr { display: inline-block; width: 2px; height: 22px; background: #b5ff3b; margin-left: 3px; vertical-align: middle; animation: promocr .9s step-end infinite; }
    @keyframes promocr { 50% { opacity: 0; } }
    .tide-source-promo-overlay .tide-source-demoin .tide-source-sweep { position: absolute; left: -40%; top: 0; width: 36%; height: 100%; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-18deg); opacity: 0; }
    .tide-source-promo-overlay .tide-source-scene.show .tide-source-demoin .tide-source-sweep { animation: promodsweep 2.6s ease-out .4s infinite; }
    @keyframes promodsweep { 0%{left:-40%;opacity:0} 12%{opacity:1} 58%{left:120%;opacity:0} 100%{left:120%;opacity:0} }
    .tide-source-promo-overlay .tide-source-mock { width: min(72vw,860px); height: min(52vh,470px); border-radius: 24px; border: 1px solid rgba(255,255,255,.08);
      background: radial-gradient(ellipse 60% 50% at 84% 6%, rgba(255,47,143,.1), transparent 55%), linear-gradient(160deg, rgba(22,24,30,.9), rgba(10,11,16,.92));
      box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); padding: 22px 26px; text-align: left; overflow: hidden;
      opacity: 0; transform: perspective(1600px) rotateX(12deg) scale(.92); filter: blur(11px);
      transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); }
    .tide-source-promo-overlay .tide-source-scene.show .tide-source-mock { opacity: 1; transform: perspective(1600px) rotateX(0) scale(1); filter: blur(0); }
    .tide-source-promo-overlay .tide-source-mock .tide-source-mrow { height: 13px; border-radius: 6px; margin: 12px 0; background: linear-gradient(90deg, rgba(120,140,190,.22), rgba(120,140,190,.06)); }
    .tide-source-promo-overlay .tide-source-mock .tide-source-mrow.tide-source-ok { background: linear-gradient(90deg, rgba(181,255,59,.4), rgba(181,255,59,.08)); }
    .tide-source-promo-overlay .tide-source-mock .tide-source-mrow.tide-source-w40{width:40%} .tide-source-promo-overlay .tide-source-mock .tide-source-mrow.tide-source-w70{width:70%} .tide-source-promo-overlay .tide-source-mock .tide-source-mrow.tide-source-w55{width:55%} .tide-source-promo-overlay .tide-source-mock .tide-source-mrow.tide-source-w85{width:85%}
    #tide-source-promoFx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
    #tide-source-promoFlash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen;
      background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(150,200,255,.5), rgba(255,47,143,.16) 45%, transparent 72%); }
    .tide-source-promo-overlay .tide-source-streak { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
    .tide-source-promo-overlay .tide-source-streak.go { animation: promostreak 1s ease-out; }
    @keyframes promostreak { 0%{opacity:0;background:linear-gradient(115deg,transparent 40%,rgba(150,200,255,.14) 50%,transparent 60%);background-size:300% 100%;background-position:100% 0}
      30%{opacity:1} 100%{opacity:0;background-position:-100% 0} }
    .tide-source-promo-overlay .tide-source-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; z-index: 5;
      background: linear-gradient(90deg,#b5ff3b,#ff2f8f,#ffe65c); }
    .tide-source-promo-overlay .tide-source-replay { position: absolute; right: 20px; bottom: 16px; z-index: 5; color: #55607a; font-size: 12px;
      letter-spacing: 2px; opacity: 0; transition: opacity .6s ease; cursor: pointer; }
    .tide-source-promo-overlay .tide-source-replay.show { opacity: 1; }
    .tide-source-promo-overlay .tide-source-replay:hover { color: #9aa6ba; }

    /* ===== 下滑内容 ===== */
    .tide-source-scroll-cue {
      position: absolute;
      top: calc(100vh - 68px);
      left: 50%;
      z-index: 2;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(229, 235, 221, 0.58);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-decoration: none;
      transform: translateX(-50%);
      animation: scrollCue 2.6s ease-in-out infinite;
    }

    .tide-source-scroll-cue span {
      color: rgba(205, 255, 145, 0.9);
      font-size: 18px;
      line-height: 1;
    }

    @keyframes scrollCue {
      0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
      50% { opacity: 1; transform: translate(-50%, 6px); }
    }

    .tide-source-scroll-content {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100% - 48px));
      min-height: 100vh;
      margin: 100vh auto 0;
      padding: clamp(96px, 12vw, 168px) 0 clamp(100px, 13vw, 180px);
      color: rgba(238, 232, 255, 0.92);
    }

    .tide-source-scroll-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
      align-items: end;
      gap: clamp(34px, 8vw, 120px);
      margin-bottom: clamp(70px, 10vw, 132px);
    }

    .tide-source-scroll-kicker {
      margin: 0 0 18px;
      color: #d3ff91;
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .tide-source-scroll-title {
      max-width: 690px;
      margin: 0;
      font-size: clamp(38px, 6vw, 78px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: 0.02em;
      text-wrap: balance;
      text-shadow: 0 0 30px rgba(255, 82, 164, 0.2);
    }

    .tide-source-scroll-title .tide-source-accent {
      color: #d3ff91;
    }

    .tide-source-scroll-lede {
      max-width: 420px;
      margin: 0 0 6px auto;
      color: rgba(229, 235, 221, 0.7);
      font-size: clamp(15px, 1.35vw, 19px);
      line-height: 1.9;
      letter-spacing: 0.04em;
    }

    .tide-source-platform-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 26px;
    }

    .tide-source-platform-heading h2,
    .tide-source-protocol-copy h2,
    .terminal-copy h2 {
      margin: 0;
      font-size: clamp(22px, 2.4vw, 34px);
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .tide-source-platform-heading p {
      margin: 0;
      color: rgba(138, 151, 173, 0.82);
      font-size: 13px;
      letter-spacing: 0.08em;
    }

    .tide-source-platform-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .tide-source-platform-card {
      position: relative;
      min-height: 250px;
      padding: clamp(24px, 3vw, 36px);
      overflow: hidden;
      border: 1px solid rgba(228, 235, 218, 0.12);
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(28, 24, 59, 0.62), rgba(8, 10, 28, 0.76));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 70px rgba(1, 1, 15, 0.28);
      transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
    }

    .tide-source-platform-card::after {
      position: absolute;
      right: -22px;
      bottom: -42px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(205, 255, 145, 0.12);
      border-radius: 50%;
      content: "";
      box-shadow: 0 0 0 18px rgba(205, 255, 145, 0.025), 0 0 0 36px rgba(205, 255, 145, 0.018);
    }

    .tide-source-platform-card:hover {
      transform: translateY(-5px);
      border-color: rgba(205, 255, 145, 0.34);
      background: linear-gradient(145deg, rgba(45, 36, 87, 0.7), rgba(8, 13, 34, 0.82));
    }

    .tide-source-platform-index {
      display: block;
      margin-bottom: 42px;
      color: rgba(205, 255, 145, 0.66);
      font: 700 12px/1 "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.16em;
    }

    .tide-source-platform-card h3 {
      margin: 0 0 10px;
      color: #e6ecf7;
      font-size: clamp(19px, 2vw, 26px);
      letter-spacing: 0.03em;
    }

    .tide-source-platform-card p {
      max-width: 210px;
      margin: 0;
      color: rgba(124, 138, 162, 0.9);
      font-size: 13px;
      line-height: 1.8;
    }

    .tide-source-platform-code {
      position: absolute;
      right: 26px;
      top: 28px;
      color: rgba(255, 207, 106, 0.8);
      font: 12px "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.08em;
    }

    .tide-source-protocol-band {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
      gap: clamp(34px, 8vw, 120px);
      align-items: center;
      margin-top: clamp(100px, 15vw, 210px);
      padding: clamp(34px, 5vw, 68px) 0;
      border-top: 1px solid rgba(228, 235, 218, 0.12);
      border-bottom: 1px solid rgba(228, 235, 218, 0.12);
    }

    .tide-source-protocol-copy p,
    .terminal-copy p {
      max-width: 470px;
      margin: 18px 0 0;
      color: rgba(229, 235, 221, 0.68);
      font-size: 15px;
      line-height: 1.9;
    }

    .tide-source-protocol-word {
      margin-top: 26px;
      color: rgba(205, 255, 145, 0.72);
      font: 11px "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .tide-source-terminal-window {
      min-height: 215px;
      padding: 22px 24px;
      border: 1px solid rgba(205, 255, 145, 0.2);
      border-radius: 8px;
      background: linear-gradient(160deg, rgba(19, 28, 46, 0.72), rgba(8, 10, 24, 0.88));
      box-shadow: 0 24px 70px rgba(1, 1, 15, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .tide-source-terminal-bar {
      display: flex;
      gap: 7px;
      margin-bottom: 34px;
    }

    .tide-source-terminal-bar i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #b5ff3b;
      box-shadow: 0 0 12px rgba(181, 255, 59, 0.6);
    }

    .tide-source-terminal-line {
      color: #d7deec;
      font: clamp(14px, 1.4vw, 19px)/1.9 "Cascadia Code", Consolas, monospace;
    }

    .tide-source-terminal-line .tide-source-prompt {
      color: #ffcf6a;
    }

    .tide-source-terminal-line .tide-source-result {
      display: block;
      padding-left: 22px;
      color: rgba(205, 255, 145, 0.76);
      font-size: 0.84em;
    }

    .tide-source-practice-section {
      margin-top: clamp(100px, 14vw, 190px);
    }

    .tide-source-practice-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
      align-items: end;
      gap: clamp(28px, 7vw, 92px);
      margin-bottom: 42px;
    }

    .tide-source-practice-heading h2 {
      margin: 0;
      font-size: clamp(28px, 4.2vw, 54px);
      line-height: 1.18;
      letter-spacing: 0.03em;
    }

    .tide-source-practice-heading p {
      margin: 0;
      color: rgba(229, 235, 221, 0.68);
      font-size: 14px;
      line-height: 1.9;
    }

    .tide-source-workflow-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid rgba(228, 235, 218, 0.14);
      border-bottom: 1px solid rgba(228, 235, 218, 0.14);
    }

    .tide-source-workflow-step {
      min-height: 210px;
      padding: 28px 24px 30px;
      border-right: 1px solid rgba(228, 235, 218, 0.1);
    }

    .tide-source-workflow-step:last-child { border-right: 0; }

    .tide-source-workflow-number {
      display: block;
      margin-bottom: 48px;
      color: rgba(205, 255, 145, 0.68);
      font: 700 11px/1 "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.16em;
    }

    .tide-source-workflow-step h3 {
      margin: 0 0 10px;
      color: #e6ecf7;
      font-size: 18px;
      letter-spacing: 0.04em;
    }

    .tide-source-workflow-step p {
      margin: 0;
      color: rgba(138, 151, 173, 0.86);
      font-size: 13px;
      line-height: 1.75;
    }

    .tide-source-support-matrix {
      margin-top: 54px;
      border-top: 1px solid rgba(228, 235, 218, 0.12);
    }

    .tide-source-support-row {
      display: grid;
      grid-template-columns: minmax(170px, 0.65fr) minmax(0, 1.8fr) minmax(130px, 0.48fr);
      align-items: center;
      gap: 24px;
      min-height: 92px;
      padding: 18px 10px;
      border-bottom: 1px solid rgba(228, 235, 218, 0.1);
      transition: background 180ms ease;
    }

    .tide-source-support-row:hover { background: rgba(178, 51, 121, 0.08); }

    .tide-source-support-platform {
      color: #e6ecf7;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .tide-source-support-items {
      color: rgba(229, 235, 221, 0.68);
      font-size: 13px;
      line-height: 1.75;
    }

    .tide-source-support-auth {
      justify-self: end;
      color: #d3ff91;
      font: 11px "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.08em;
      text-align: right;
    }

    .tide-source-safety-note {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      align-items: start;
      margin-top: 28px;
      padding: 22px 24px;
      border-left: 2px solid rgba(255, 207, 106, 0.72);
      background: linear-gradient(90deg, rgba(255, 207, 106, 0.055), transparent 72%);
    }

    .tide-source-safety-note strong {
      color: #ffcf6a;
      font: 11px "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.12em;
    }

    .tide-source-safety-note p {
      margin: 0;
      color: rgba(229, 235, 221, 0.66);
      font-size: 13px;
      line-height: 1.8;
    }

    .tide-source-dev-section {
      margin-top: clamp(110px, 15vw, 210px);
    }

    .tide-source-dev-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: 34px;
    }

    .tide-source-dev-heading h2 {
      margin: 0;
      font-size: clamp(30px, 4.6vw, 60px);
      line-height: 1.12;
      letter-spacing: 0.035em;
    }

    .tide-source-dev-heading p {
      max-width: 370px;
      margin: 0 0 4px;
      color: rgba(229, 235, 221, 0.64);
      font-size: 14px;
      line-height: 1.8;
      text-align: right;
    }

    .tide-source-dev-list {
      border-top: 1px solid rgba(228, 235, 218, 0.14);
    }

    .tide-source-dev-member {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(24px, 4vw, 54px);
      min-height: 174px;
      padding: 26px 10px;
      border-bottom: 1px solid rgba(228, 235, 218, 0.12);
      transition: background 180ms ease;
    }

    .tide-source-dev-member:hover {
      background: linear-gradient(90deg, rgba(91, 73, 172, 0.1), transparent 74%);
    }

    .tide-source-dev-avatar {
      width: 118px;
      height: 118px;
      object-fit: cover;
      border: 1px solid rgba(228, 235, 218, 0.2);
      border-radius: 8px;
      box-shadow: 0 18px 44px rgba(1, 1, 15, 0.32), 0 0 26px rgba(205, 255, 145, 0.08);
    }

    .tide-source-dev-role {
      display: block;
      margin-bottom: 12px;
      color: #d3ff91;
      font: 11px "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .tide-source-dev-copy h3 {
      margin: 0 0 10px;
      color: #eef4fb;
      font-size: clamp(24px, 3vw, 36px);
      letter-spacing: 0.03em;
    }

    .tide-source-dev-copy p {
      margin: 0;
      color: rgba(229, 235, 221, 0.7);
      font-size: 14px;
      line-height: 1.8;
    }

    .tide-source-dev-scope {
      color: rgba(255, 207, 106, 0.78);
      font: 11px/1.8 "Cascadia Code", Consolas, monospace;
      letter-spacing: 0.12em;
      text-align: right;
      white-space: nowrap;
    }

    .tide-source-scroll-close {
      display: grid;
      justify-items: center;
      gap: 18px;
      padding-top: clamp(110px, 15vw, 190px);
      text-align: center;
    }

    .tide-source-scroll-close h2 {
      margin: 0;
      font-size: clamp(32px, 5vw, 68px);
      letter-spacing: 0.04em;
    }

    .tide-source-scroll-close p {
      margin: 0;
      color: rgba(138, 151, 173, 0.76);
      font-size: 12px;
      letter-spacing: 0.2em;
    }

    @media (max-width: 760px) {
      .tide-source-scroll-cue { top: calc(100vh - 58px); }
      .tide-source-scroll-content { width: min(100% - 32px, 580px); margin-top: 100svh; padding-top: 92px; }
      .tide-source-scroll-intro,
      .tide-source-protocol-band,
      .tide-source-practice-heading { grid-template-columns: 1fr; gap: 28px; }
      .tide-source-scroll-lede { margin-left: 0; }
      .tide-source-platform-heading { display: block; }
      .tide-source-platform-heading p { margin-top: 10px; }
      .tide-source-platform-grid { grid-template-columns: 1fr; }
      .tide-source-platform-card { min-height: 205px; }
      .tide-source-platform-index { margin-bottom: 28px; }
      .tide-source-terminal-window { min-height: 190px; }
      .tide-source-workflow-grid { grid-template-columns: 1fr 1fr; }
      .tide-source-workflow-step:nth-child(2) { border-right: 0; }
      .tide-source-workflow-step:nth-child(-n+2) { border-bottom: 1px solid rgba(228, 235, 218, 0.1); }
      .tide-source-support-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 8px; }
      .tide-source-support-auth { justify-self: start; text-align: left; }
      .tide-source-safety-note { grid-template-columns: 1fr; gap: 10px; }
      .tide-source-dev-heading { display: block; }
      .tide-source-dev-heading p { margin-top: 16px; text-align: left; }
      .tide-source-dev-member { grid-template-columns: 82px minmax(0, 1fr); gap: 18px; min-height: 132px; padding: 22px 4px; }
      .tide-source-dev-avatar { width: 82px; height: 82px; }
      .tide-source-dev-scope { grid-column: 2; justify-self: start; text-align: left; white-space: normal; }
    }
/* FIELD / 006 integration: source background intentionally excluded. */
.tide-archive {
  min-height: auto;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
}

.tide-archive > .tide-source-top-nav {
  position: absolute;
  top: calc(var(--header-h) + 24px);
  right: var(--page-x);
  left: var(--page-x);
  z-index: 8;
  max-width: none;
}

.tide-archive .tide-source-nav-actions {
  min-width: max-content;
}

.tide-archive > .tide-source-copy-panel {
  animation: copyPanelEnter 1.65s cubic-bezier(0.19, 1, 0.22, 1) 0.35s forwards;
}

.tide-source-about-modal {
  z-index: 240;
}

.tide-source-promo-overlay {
  z-index: 230;
  font-family: Inter, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.tide-source-promo-overlay.active {
  pointer-events: auto;
  cursor: default;
}

.tide-source-promo-overlay.active button {
  cursor: pointer;
}

.tide-promo-close {
  position: absolute;
  z-index: 8;
  top: 24px;
  right: 28px;
  padding: 10px 16px;
  border: 1px solid rgba(240, 236, 223, 0.24);
  border-radius: 999px;
  color: rgba(240, 236, 223, 0.72);
  background: rgba(7, 9, 13, 0.52);
  font: 400 9px/1 Consolas, monospace;
  letter-spacing: 0.14em;
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.tide-promo-close:hover,
.tide-promo-close:focus-visible {
  color: var(--bone);
  border-color: rgba(255, 230, 92, 0.48);
  background: rgba(7, 9, 13, 0.78);
  outline: none;
}

.tide-source-replay {
  appearance: none;
  border: 0;
  background: transparent;
}

@media (min-width: 721px) and (pointer: fine) {
  .tide-archive a,
  .tide-archive button,
  .tide-source-about-modal a,
  .tide-source-about-modal button,
  .tide-source-promo-overlay button {
    cursor: none;
  }
}

html.tide-content-promo-playing .site-header,
body.tide-content-promo-playing .site-header,
body.tide-content-promo-playing .telemetry,
body.tide-content-promo-playing .field-progress,
body.tide-content-promo-playing .cursor,
body.tide-content-promo-playing .tide-source-top-nav,
body.tide-content-promo-playing .tide-source-copy-panel,
body.tide-content-promo-playing .tide-source-scroll-cue {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1020px) {
  .tide-archive > .tide-source-copy-panel {
    grid-template-columns: minmax(0, 1fr);
    width: min(82vw, 760px);
    max-width: calc(100vw - 40px);
  }

  .tide-archive .tide-source-copy-body {
    width: 100%;
    white-space: normal;
    text-wrap: balance;
  }
}

@media (max-width: 760px) {
  .tide-archive > .tide-source-top-nav {
    right: 16px;
    left: 16px;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .tide-archive > .tide-source-top-nav::-webkit-scrollbar {
    display: none;
  }

  .tide-archive > .tide-source-copy-panel {
    top: 42vh;
  }

  .tide-archive .tide-source-copy-body {
    width: min(100%, calc(100vw - 40px));
    white-space: normal;
    text-wrap: balance;
  }

  .tide-source-promo-overlay .tide-source-cards {
    width: min(92vw, 430px);
    gap: 8px;
  }

  .tide-source-promo-overlay .tide-source-pcard {
    width: calc((100% - 16px) / 3);
    height: clamp(142px, 46vw, 190px);
    gap: 10px;
    border-radius: 14px;
  }

  .tide-source-promo-overlay .tide-source-pcard .tide-source-orb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .tide-source-promo-overlay .tide-source-pcard .tide-source-pn {
    font-size: 11px;
  }

  .tide-source-promo-overlay .tide-source-pcard .tide-source-pt {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .tide-source-promo-overlay .tide-source-diy-pv,
  .tide-source-promo-overlay .tide-source-demoin {
    width: min(88vw, 520px);
  }

  .tide-source-promo-overlay .tide-source-diy {
    gap: 28px;
  }

  .tide-source-promo-overlay .tide-source-sws {
    gap: 10px;
  }

  .tide-source-promo-overlay .tide-source-sw {
    width: 32px;
    height: 32px;
  }

  .tide-promo-close {
    top: 16px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .tide-source-workflow-grid {
    grid-template-columns: 1fr;
  }

  .tide-source-workflow-step,
  .tide-source-workflow-step:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(228, 235, 218, 0.1);
  }

  .tide-source-workflow-step:last-child {
    border-bottom: 0;
  }
}

/* README follows the same material system as the integrated TIDE page. */
.tide-source-about-backdrop {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 230, 92, 0.08), transparent 42%),
    rgba(7, 9, 13, 0.9);
}

.tide-source-about-dialog {
  border-color: var(--line);
  border-radius: 0;
  color: var(--bone);
  background:
    radial-gradient(circle at 92% 0%, rgba(181, 255, 59, 0.12), transparent 34%),
    linear-gradient(155deg, rgba(12, 15, 21, 0.99), rgba(7, 9, 13, 0.99));
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tide-source-about-header {
  border-bottom-color: var(--line);
  background: rgba(7, 9, 13, 0.82);
}

.tide-source-about-eyebrow,
.tide-source-about-content > h3,
.tide-source-about-content strong,
.tide-source-about-content a { color: var(--acid); }

.tide-source-about-header h2,
.tide-source-about-readme-hero h3,
.tide-source-about-content h4 { color: var(--bone); }

.tide-source-about-close {
  border-color: var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
}

.tide-source-about-close:hover,
.tide-source-about-close:focus-visible {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
}

.tide-source-about-content,
.tide-source-about-content p,
.tide-source-about-content li { color: rgba(240, 236, 223, 0.68); }

.tide-source-about-badge {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.tide-source-about-badge span:last-child,
.tide-source-about-content code { color: var(--acid); }

.tide-source-about-warning {
  border-color: rgba(255, 47, 143, 0.32);
  border-left-color: var(--orange);
  background: rgba(255, 47, 143, 0.07);
}

.tide-source-about-content blockquote,
.tide-source-about-content pre,
.tide-source-about-table-wrap {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.022);
}

.tide-source-about-content th,
.tide-source-about-content td { border-color: var(--line); }
.tide-source-about-content th { color: var(--bone); background: rgba(255, 230, 92, 0.035); }
.tide-source-about-content::-webkit-scrollbar-thumb { background: rgba(255, 230, 92, 0.25); }

.tide-source-about-content a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 230, 92, 0.42);
  text-underline-offset: 0.22em;
}

.tide-source-replay { pointer-events: none; }
.tide-source-replay.show { pointer-events: auto; }