.tide-field{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:#f5f2e9;opacity:0}
      html.tide-live .tide-field{opacity:1}
      html.tide-live .app-shell{background:transparent}
      .stage{position:relative;z-index:1}
      html[data-motion=on] .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(108deg,transparent 32%,rgba(245,242,233,.2) 48%,transparent 64%);background-size:240% 100%;mix-blend-mode:soft-light;animation:tide-gleam 12s ease-in-out infinite}
      .hero-water{z-index:2}
      .hero-copy{z-index:3}
      html[data-motion=on] .mark{transform-origin:center;animation:tide-mark 5.2s ease-in-out infinite}
      html[data-motion=on] .section-head:before{transform-origin:left center;animation:tide-rule 4.2s ease-in-out infinite alternate}
      html[dir=rtl][data-motion=on] .section-head:before{transform-origin:right center}
      .card{background:
        linear-gradient(180deg,rgba(255,253,248,.94),rgba(255,253,248,.97) 42%),
        radial-gradient(90% 70% at 0% 100%,rgba(230,146,76,.2),transparent 58%),
        radial-gradient(70% 60% at 100% 0%,rgba(28,97,112,.14),transparent 52%),
        #fffdf8}
      html[data-motion=on] .card{background-size:100% 100%,160% 160%,150% 150%,auto;animation:tide-card 18s ease-in-out infinite alternate}
      html[data-motion=on] .card .art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,250,240,.28) 50%,transparent 62%);background-size:260% 100%;mix-blend-mode:soft-light;animation:tide-gleam 14s ease-in-out infinite}
      .art .flag,.art .zoom{z-index:2}
      .callout,.note-card{background:
        linear-gradient(180deg,rgba(248,231,214,.92),rgba(248,231,214,.96)),
        radial-gradient(80% 80% at 100% 0%,rgba(230,146,76,.28),transparent 60%),
        var(--sand)}
      html[data-motion=on] .callout,html[data-motion=on] .note-card{background-size:100% 100%,180% 180%,auto;animation:tide-card 16s ease-in-out infinite alternate}
      .btn:not(.secondary){background-image:linear-gradient(105deg,transparent 30%,rgba(255,253,248,.45) 50%,transparent 70%),linear-gradient(var(--orange),var(--orange));background-size:240% 100%,100% 100%;background-position:130% 0,0 0;transition:background-position .5s ease,transform .2s ease}
      .btn:not(.secondary):hover{background-position:-30% 0,0 0}
      .site-footer{position:relative;overflow:hidden}
      .site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;opacity:.55;background-image:url("img/image-1.svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 34' preserveAspectRatio='none'><path d='M0 18c20-10 40-10 60 0s40 10 60 0 40-10 60 0 40 10 60 0' fill='none' stroke='%23f5f2e9' stroke-width='1.6'/><path d='M0 26c20-8 40-8 60 0s40 8 60 0 40-8 60 0 40 8 60 0' fill='none' stroke='%23e6924c' stroke-opacity='.7' stroke-width='1.4'/></svg>");background-repeat:repeat-x;background-size:240px 34px}
      html[data-motion=on] .site-footer::before{animation:tide-scroll 14s linear infinite}
      .site-footer>*{position:relative;z-index:1}
      html[data-motion=on] .section-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 40%,rgba(245,242,233,.16) 50%,transparent 60%);background-size:240% 100%;mix-blend-mode:soft-light;animation:tide-gleam 16s ease-in-out infinite}
      .banner-copy{position:relative;z-index:2}
      @keyframes tide-gleam{0%{background-position:120% 0}50%{background-position:-20% 0}100%{background-position:120% 0}}
      @keyframes tide-mark{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
      @keyframes tide-rule{from{transform:scaleX(.62)}to{transform:scaleX(1)}}
      @keyframes tide-card{from{background-position:0 0,0% 90%,100% 0,0 0}to{background-position:0 0,18% 40%,72% 28%,0 0}}
      @keyframes tide-scroll{from{background-position:0 0}to{background-position:-240px 0}}
      @media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .tide-field{display:none}}
      html[data-motion=off] .hero::before,html[data-motion=off] .card .art::before,html[data-motion=off] .section-banner::after,html[data-motion=off] .mark,html[data-motion=off] .section-head:before,html[data-motion=off] .card,html[data-motion=off] .callout,html[data-motion=off] .note-card,html[data-motion=off] .site-footer::before{animation:none}
    
      .intro-skip,.intro-enter{display:none !important}
      .intro-foot{left:0;right:0;bottom:0;padding:0;height:4px;display:block}
      .intro-progress.is-load{height:4px;gap:0}
      .intro-progress.is-load i{height:4px;border-radius:0;background:rgba(245,242,233,.28)}
      .intro-progress.is-load i.is-on:after,.intro.is-still .intro-progress.is-load i.is-on:after{animation:fill 5s linear forwards !important;transform-origin:left center}
      html[dir=rtl] .intro-progress.is-load i.is-on:after{transform-origin:right center}