@media (min-width: 641px) {

   #ind-sheet, #ind-scrim2 { display: none !important; }

   body.sheet-up .app {
      transform: none !important;
      filter: none !important;
      border-radius: 0 !important;
      overflow: visible !important;
   }

   #modal-indicators-content {
      display: grid !important;
      grid-template-rows: 0fr;
      transition: grid-template-rows .95s cubic-bezier(.7, 0, .4, 1);
   }

   #modal-indicators-content[style*="1fr"] {
      grid-template-rows: 1fr;
      transition: grid-template-rows 1.3s cubic-bezier(.45, .12, .5, .94);
   }

   #modal-summary-content {
      display: grid;
      grid-template-rows: 1fr;
      transition: grid-template-rows .8s cubic-bezier(.7, 0, .4, 1),
         opacity .4s ease .3s;
   }

   #modal-summary-content > * { overflow: hidden; min-height: 0; }

   body:has(.expandbtn.is-open) #modal-summary-content {
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows .8s cubic-bezier(.45, .12, .5, .94),
         opacity .3s ease;
   }

   @keyframes eDevelop {
      0% { opacity: 0; background: #FFFFFF; border-color: rgba(22, 19, 14, .05);
           color: transparent; transform: rotate(var(--r, 0deg)) scale(.96); }
      35% { opacity: 1; background: #FFFFFF; color: transparent; }
      100% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
   }

   #modal-indicators-content[style*="1fr"] .pstamp {
      animation: eDevelop .8s cubic-bezier(.3, 0, .2, 1) both !important;
      animation-delay: calc(.30s + var(--n, 0) * .05s) !important;
   }

   #modal-indicators-content .stampwrap {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      align-items: start;
   }

   #modal-indicators-content .pstamp {
      max-width: none !important;
      width: 100%;
      box-sizing: border-box;
      display: block;
      min-height: 34px;          /* a one-line chip still fills its row */
      overflow-wrap: break-word;
      transform: rotate(calc(var(--r, 0deg) * .45));
   }

   #modal-indicators-content .stampwrap { padding-right: 4px; }

   #state-modal.statecard {
      max-height: var(--e-cardmax, min(calc(100vh - 380px), 560px));
      transition: max-height .6s cubic-bezier(.45, .12, .5, .94);
   }

   #state-modal .statecard-body { overflow-y: auto; overflow-x: hidden; }

   #state-modal.statecard {
      padding-left: 12px !important;
      padding-right: 12px !important;
   }

   #state-modal .statecard-body {
      padding-left: 16px;
      padding-right: 16px;
      margin-right: 0;
      padding-bottom: 14px;
   }

   #state-modal .expandbtn {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
   }

   body:not(.tour-invited) #tourcard { display: none !important; }
   body.tour-on:not(.tour-invited) .fieldlegend { opacity: 1 !important; }

   .story-hint {
      position: fixed;
      z-index: 3600;
      font-family: var(--mono, 'JetBrains Mono', monospace);
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(245, 243, 238, .62);
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
   }

   body.story-hint-on .story-hint { opacity: 1; transform: none; }

   #mark-stage .ms-line i,
   .filmline i,
   .dash-standfirst i {
      align-self: center !important;
   }

   .dash-standfirst {
      position: fixed;
      left: 40px;
      right: 40px;
      bottom: 22px;
      z-index: 26;
      display: flex;
      align-items: baseline;
      gap: 16px;
      font-family: var(--mono, 'JetBrains Mono', monospace);
      font-size: 9.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #A79E92;
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
   }

   body:has(#intro.is-gone) .dash-standfirst {
      opacity: 1;
      transform: none;
      transition-delay: .5s;
   }

   .dash-standfirst b { font-weight: 400; color: inherit; }

   .dash-standfirst i {
      font-style: normal;
      flex: 1;
      height: 1px;
      background: rgba(22, 19, 14, .16);
   }

   .fieldlegend { bottom: 58px !important; }
   .fieldlegend::after { display: none !important; }

   #dotfield {
      top: var(--fld-top, 50%) !important;
      height: var(--fld-h, 66vh) !important;
      transform: translate(-50%, 0) !important;
   }

   #dotfield { width: var(--fld-w, 62vw) !important; }

   html.fld-sized #dotfield {
      left: var(--fld-left) !important;
      transform: none !important;
   }

   html.fld-sized #dotfield .ssq,
   html.fld-sized #dotfield .ghostsq {
      width: var(--sq) !important;
      height: var(--sq) !important;
   }

   body:has(.dash-standfirst) #mark-stage .ms-line {
      left: 40px;
      right: 40px;
      bottom: 22px;
      gap: 16px;
      font-size: 9.5px;
      letter-spacing: .2em;
      transform: none;
      transition: opacity .34s ease;
   }

   body.mark-stage #mark-stage .ms-line { transition-delay: .1s; }

   body:has(.dash-standfirst) #mark-stage .ms-line i {
      transform: scaleX(1);
      transition: none;
   }

   @keyframes clauseIn {
      from { opacity: 0; transform: translateY(7px); }
      to   { opacity: 1; transform: none; }
   }

   body:has(.dash-standfirst) #mark-stage .ms-line span {
      display: inline-block;
   }

   body.mark-stage #mark-stage .ms-line span {
      animation: clauseIn .55s cubic-bezier(.16, 1, .3, 1) .3s both;
   }

   .dash-standfirst span {
      display: inline-block;
      transition: opacity .3s ease .34s,
                  transform .55s cubic-bezier(.16, 1, .3, 1) .34s;
   }

   body.mark-stage .dash-standfirst span {
      opacity: 0;
      transform: translateY(-7px);
      transition-delay: 0s, 0s;
   }

   .kpisum {
      display: block;
   }


   .kpisum-row {
      box-sizing: border-box;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
   }

   .kpisum { padding-top: 8px; }

   .kpisum-row .kicker { color: #9A9186; }

   .kpisum-val {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #5E574D;
      white-space: nowrap;
   }

   .kpisum-val b { font-weight: 500; color: #3A352E; }

   .kpisum-val i {
      font-style: normal;
      color: #CFC7BB;
      margin: 0 7px;
   }

   .kpikey .kk--tick {
      width: 1px;
      height: 7px;
      background: rgba(22, 19, 14, .26);
      vertical-align: -1px;
   }

   @keyframes upOut   { from { opacity: 1; transform: none; }
                        to   { opacity: 0; transform: translateY(-9px); } }
   @keyframes upIn    { from { opacity: 0; transform: translateY(-11px); }
                        to   { opacity: 1; transform: none; } }
   @keyframes leftOut { from { opacity: 1; transform: none; }
                        to   { opacity: 0; transform: translateX(-24px); } }
   @keyframes leftIn  { from { opacity: 0; transform: translateX(-28px); }
                        to   { opacity: 1; transform: none; } }
   @keyframes dropOut { from { opacity: 1; transform: none; }
                        to   { opacity: 0; transform: translateY(18px) scale(.972); } }
   @keyframes dropIn  { from { opacity: 0; transform: translateY(24px) scale(.966); }
                        to   { opacity: 1; transform: none; } }
   @keyframes slideOut { from { opacity: 1; transform: none; }
                         to   { opacity: 0; transform: translateX(14px); } }
   @keyframes slideIn  { from { opacity: 0; transform: translateX(16px); }
                         to   { opacity: 1; transform: none; } }
   @keyframes sqAway {
      from { opacity: 1; filter: blur(0);
             transform: translate(-50%, -50%) rotate(0deg) scale(1); }
      70%  { opacity: 1; }
      to   { opacity: 0; filter: blur(5px);
             transform: translate(calc(-50% + var(--sx, 0px)),
                                  calc(-50% + var(--sy, 0px)))
                        rotate(var(--sr, 0deg)) scale(.85); }
   }

   @keyframes ctaOut { from { opacity: 1; transform: none; }
                       to   { opacity: 0; transform: translateY(22px); } }
   @keyframes ctaIn  { from { opacity: 0; transform: translateY(26px); }
                       to   { opacity: 1; transform: none; } }
   @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
   @keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

   body.mark-stage .app { pointer-events: none; }

   body.mark-stage #intro-replay { animation: upOut .26s ease both; }
   body.mark-stage #tour-btn     { animation: upOut .26s ease both .04s; }
   body.mark-stage .searchwrap   { animation: upOut .28s ease both .08s; }
   body.mark-stage .topright     { animation: upOut .28s ease both .11s; }
   body.mark-stage .segment      { animation: slideOut .3s ease both .14s; }

   body.mark-stage #hero-title   { animation: leftOut .4s cubic-bezier(.45, .12, .5, .94) both .06s; }
   body.mark-stage #hero-sub     { animation: leftOut .4s cubic-bezier(.45, .12, .5, .94) both .12s; }
   body.mark-stage #score-panel  { animation: dropOut .42s cubic-bezier(.45, .12, .5, .94) both .18s; }
   body.mark-stage #profile-cta  { animation: fadeOut .3s ease both .22s; }
   body.mark-stage #kpis-wrap,
   body.mark-stage #card-wrap    { animation: dropOut .44s cubic-bezier(.45, .12, .5, .94) both .24s; }

   body.mark-stage #dotfield .ssq {
      animation: sqAway .5s cubic-bezier(.45, .12, .5, .94) both;
      animation-delay: calc(var(--sd, .1s) * .55);
   }

   body.mark-stage #dotfield .ghostsq  { animation: fadeOut .3s ease both; }
   body.mark-stage #dotfield .histaxis { animation: fadeOut .34s ease both .16s; }
   body.mark-stage .fieldlegend        { animation: fadeOut .3s ease both .2s; }
   body.mark-stage .dash-standfirst    { animation: upOut .34s ease both .26s; }

   body.film-landing #dotfield .ssq {
      animation: fieldSettle .8s cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: var(--sd, .1s);
   }

   body.film-landing #dotfield .ghostsq  { animation: fadeIn .4s ease both .12s; }
   body.film-landing #dotfield .histaxis { animation: fadeIn .4s ease both .2s; }

   body.film-landing #hero-title  { animation: leftIn .52s cubic-bezier(.16, 1, .3, 1) both .1s; }
   body.film-landing #hero-sub    { animation: leftIn .52s cubic-bezier(.16, 1, .3, 1) both .16s; }
   body.film-landing #score-panel { animation: dropIn .56s cubic-bezier(.16, 1, .3, 1) both .22s; }
   body.film-landing #profile-cta { animation: fadeIn .36s ease both .3s; }
   body.film-landing #kpis-wrap,
   body.film-landing #card-wrap   { animation: dropIn .58s cubic-bezier(.16, 1, .3, 1) both .28s; }

   body.film-landing #intro-replay { animation: upIn .42s cubic-bezier(.16, 1, .3, 1) both .3s; }
   body.film-landing #tour-btn     { animation: upIn .42s cubic-bezier(.16, 1, .3, 1) both .34s; }
   body.film-landing .searchwrap   { animation: upIn .44s cubic-bezier(.16, 1, .3, 1) both .38s; }
   body.film-landing .topright     { animation: upIn .44s cubic-bezier(.16, 1, .3, 1) both .42s; }
   body.film-landing .segment      { animation: slideIn .46s cubic-bezier(.16, 1, .3, 1) both .46s; }
   body.film-landing .fieldlegend  { animation: fadeIn .4s ease both .46s; }
   body.film-landing .dash-standfirst { animation: upIn .46s cubic-bezier(.16, 1, .3, 1) both .5s; }

   @keyframes deskFilmIn { from { opacity: 0; } to { opacity: 1; } }

   body.mark-stage #mark-stage {
      animation: deskFilmIn .5s ease .18s both;
   }

   body:not(.mark-stage) #mark-stage { transition: opacity .45s ease !important; }

   body.story-film #intro-stage,
   body.story-film .intro-rail,
   body.story-film #intro-skip {
      opacity: 0;
      transition: opacity .5s ease;
      pointer-events: none;
   }

   #intro-stage, .intro-rail {
      transition: opacity .5s ease;
   }

   #story-colophon {
      position: absolute;
      inset: 0;
      z-index: 40;
      opacity: 0;
      pointer-events: none;
      transition: opacity .5s ease .12s;
   }

   body.story-film #story-colophon { opacity: 1; }
   body.mark-pin #story-colophon { pointer-events: auto; }

   .ms-method {
      position: absolute;
      left: 40px;
      bottom: 84px;
      width: min(64ch, 46vw);
      color: rgba(245, 243, 238, .74);
      font-family: var(--ui, system-ui), sans-serif;
      font-size: 13.5px;
      line-height: 1.62;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .5s ease .18s,
                  transform .9s cubic-bezier(.16, 1, .3, 1) .18s;
   }

   body.mark-stage .ms-method,
   body.story-film .ms-method { opacity: 1; transform: none; }

   .ms-method .msm-k {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(245, 243, 238, .5);
      margin-bottom: 12px;
   }

   .ms-method p { margin: 0 0 11px 0; }
   .ms-method p:last-child { margin-bottom: 0; }
   .ms-method b { font-weight: 500; color: rgba(245, 243, 238, .95); }

   .ms-method .msm-caveat {
      color: rgba(245, 243, 238, .56);
      font-size: 12.5px;
      padding-top: 10px;
      border-top: 1px solid rgba(245, 243, 238, .16);
   }

   #story-colophon .sc-line {
      position: absolute;
      left: 40px;
      right: 40px;
      bottom: 22px;
      display: flex;
      align-items: baseline;
      gap: 16px;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(245, 243, 238, .58);
      opacity: 1;
      transform: none;
   }

   #story-colophon .sc-line b {
      font-weight: 500;
      color: rgba(245, 243, 238, .92);
   }

   #story-colophon .sc-line i {
      font-style: normal;
      flex: 1;
      height: 1px;
      align-self: center;
      background: rgba(245, 243, 238, .22);
      transform: none;
   }

   .ms-line a, #story-colophon .sc-line a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid rgba(245, 243, 238, .28);
      padding-bottom: 1px;
      transition: color .25s ease, border-color .25s ease;
   }

   body.mark-pin .ms-line a,
   body.mark-pin #story-colophon .sc-line a { pointer-events: auto; }

   .ms-line a:hover, #story-colophon .sc-line a:hover {
      color: #F7F5F1;
      border-bottom-color: rgba(245, 243, 238, .8);
   }

   .ms-line em, #story-colophon .sc-line em {
      font-style: normal;
      color: rgba(245, 243, 238, .34);
      margin: 0 7px;
   }


   body.film-hold #mark-stage {
      animation: none !important;
      opacity: 1 !important;
   }

   @keyframes deskFilmOut { from { opacity: 1; } to { opacity: 0; } }

   body.film-closing #mark-stage {
      animation: deskFilmOut .6s ease .18s both !important;
   }

   body.colophon-out .ms-method {
      opacity: 0 !important;
      transform: translateY(8px) !important;
      transition: opacity .28s ease,
                  transform .34s cubic-bezier(.45, .12, .5, .94) !important;
   }

   body.colophon-out #mark-stage .ms-line {
      opacity: 0 !important;
      transform: translateY(6px) !important;
      transition: opacity .3s ease .06s,
                  transform .36s cubic-bezier(.45, .12, .5, .94) .06s !important;
   }

   body.colophon-out #mark-stage .ms-line i {
      transform: scaleX(0) !important;
      transition: transform .34s cubic-bezier(.45, .12, .5, .94) !important;
   }

   body.colophon-out #story-colophon {
      opacity: 0 !important;
      transition: opacity .34s ease !important;
   }

   body.colophon-out #intro-stage,
   body.colophon-out .intro-rail,
   body.colophon-out #intro-skip { opacity: 0 !important; }

   body.film-hold #cp-card,
   body.film-hold #cp-card.on,
   body.film-closing #cp-card,
   body.film-closing #cp-card.on {
      background: transparent !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border: 0 !important;
      box-shadow: none !important;
   }

   body.film-hold #cp-card .cp-body,
   body.film-closing #cp-card .cp-body {
      opacity: 0 !important;
      transition: opacity .14s ease !important;
   }

   body.photo-free #cp-card {
      overflow: visible !important;
   }

   body.film-hold #cp-card .cp-kicker,
   body.film-closing #cp-card .cp-kicker { color: rgba(245, 243, 238, .62) !important; }
   body.film-hold #cp-card .cp-fullname,
   body.film-closing #cp-card .cp-fullname { color: #F7F5F1 !important; }
   body.film-hold #cp-card .cp-row,
   body.film-hold #cp-card .cp-row span,
   body.film-closing #cp-card .cp-row,
   body.film-closing #cp-card .cp-row span { color: rgba(245, 243, 238, .88) !important; }
   body.film-hold #cp-card .cp-row i,
   body.film-closing #cp-card .cp-row i { color: rgba(245, 243, 238, .62) !important; }
   body.film-hold #cp-card .cp-row + .cp-row::before,
   body.film-closing #cp-card .cp-row + .cp-row::before {
      background: rgba(245, 243, 238, .18) !important;
   }

   body.film-arming #cp-ring,
   body.mark-stage #cp-ring,
   body.film-hold #cp-ring,
   body.film-closing #cp-ring { opacity: 0 !important; }

   body.film-arming #cp-card,
   body.film-arming #cp-card.on {
      background: rgba(16, 13, 10, .40) !important;
      -webkit-backdrop-filter: blur(18px) saturate(185%) !important;
      backdrop-filter: blur(18px) saturate(185%) !important;
      border: 0 !important;
      box-shadow: 0 18px 44px rgba(0, 0, 0, .38) !important;
   }

   body.film-arming #cp-card .cp-kicker { color: rgba(245, 243, 238, .62) !important; }
   body.film-arming #cp-card .cp-fullname { color: #F7F5F1 !important; }
   body.film-arming #cp-card .cp-row,
   body.film-arming #cp-card .cp-row span { color: rgba(245, 243, 238, .88) !important; }
   body.film-arming #cp-card .cp-row i { color: rgba(245, 243, 238, .62) !important; }
   body.film-arming #cp-card .cp-row + .cp-row::before {
      background: rgba(245, 243, 238, .18) !important;
   }

   @keyframes ringBack { from { opacity: 0; } to { opacity: .9; } }

   body.ring-back #cp-ring {
      animation: ringBreath 2.4s cubic-bezier(.4, 0, .6, 1) infinite,
                 ringBack .34s ease both;
   }


   #cp-card .cp-row::after {
      top: 3px !important;
      bottom: 3px !important;
   }


   body.story-closing #intro:not(.is-gone) #intro-stage {
      opacity: 0 !important;
      transition: none !important;
   }

   body.mark-pin #mark-stage { pointer-events: auto; }
   body.mark-pin #mark-stage .ms-line { pointer-events: auto; }
}

@media (max-width: 640px) {
   .kpisum { display: none !important; }
}

@media (max-width: 640px) {
   body:not(.tour-invited) #tourcard { display: none !important; }

   .tap-hint {
      position: fixed;
      z-index: 3600;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(22, 19, 14, .82);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #F7F5F1;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
   }

   body.tap-hint-on .tap-hint { opacity: 1; transform: none; }

   #dotfield .ssq.is-hinted {
      transform: translate(-50%, -50%) scale(1.35);
      z-index: 30;
      box-shadow: 0 6px 18px rgba(28, 20, 14, .3);
      transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
   }

   #dotfield .ghostsq.is-hinted {
      border-color: rgba(22, 19, 14, .55) !important;
      z-index: 29;
   }

   body.film-arming #cp-card,
   body.film-arming #cp-card.on,
   body.story-film #cp-card,
   body.story-film #cp-card.on,
   body.story-film #cp-card,
   body.story-film #cp-card.on,
   body.colophon-out #cp-card,
   body.colophon-out #cp-card.on,
   body.film-closing #cp-card,
   body.film-closing #cp-card.on {
      background: rgba(16, 13, 10, .4) !important;
      -webkit-backdrop-filter: blur(18px) saturate(185%) !important;
      backdrop-filter: blur(18px) saturate(185%) !important;
      box-shadow: 0 18px 44px rgba(0, 0, 0, .38) !important;
      border: 0 !important;
   }

   body.film-arming #cp-card { transition: none !important; }

   body.story-film #cp-ring { opacity: 0 !important; }

   body.film-arming #cp-card .cp-kicker,
   body.story-film #cp-card .cp-kicker,
   body.colophon-out #cp-card .cp-kicker,
   body.film-closing #cp-card .cp-kicker { color: rgba(245, 243, 238, .62) !important; }
   body.film-arming #cp-card .cp-fullname,
   body.story-film #cp-card .cp-fullname,
   body.colophon-out #cp-card .cp-fullname,
   body.film-closing #cp-card .cp-fullname { color: #F7F5F1 !important; }
   body.film-arming #cp-card .cp-row,
   body.film-arming #cp-card .cp-row span,
   body.story-film #cp-card .cp-row,
   body.story-film #cp-card .cp-row span,
   body.colophon-out #cp-card .cp-row,
   body.colophon-out #cp-card .cp-row span,
   body.film-closing #cp-card .cp-row,
   body.film-closing #cp-card .cp-row span { color: rgba(245, 243, 238, .88) !important; }
   body.film-arming #cp-card .cp-row i,
   body.story-film #cp-card .cp-row i,
   body.colophon-out #cp-card .cp-row i,
   body.film-closing #cp-card .cp-row i { color: rgba(245, 243, 238, .62) !important; }
   body.story-film #cp-card .cp-row + .cp-row::before {
      background: rgba(245, 243, 238, .18) !important;
   }

   @keyframes upOut   { from { opacity: 1; transform: none; }
                        to   { opacity: 0; transform: translateY(-18px); } }
   @keyframes upIn    { from { opacity: 0; transform: translateY(-22px); }
                        to   { opacity: 1; transform: none; } }
   @keyframes leftOut { from { opacity: 1; transform: none; }
                        to   { opacity: 0; transform: translateX(-40px); } }
   @keyframes leftIn  { from { opacity: 0; transform: translateX(-46px); }
                        to   { opacity: 1; transform: none; } }
   @keyframes dropOut { from { opacity: 1; transform: none; }
                        to   { opacity: 0; transform: translateY(34px) scale(.94); } }
   @keyframes dropIn  { from { opacity: 0; transform: translateY(40px) scale(.93); }
                        to   { opacity: 1; transform: none; } }
   @keyframes slideOut { from { opacity: 1; transform: none; }
                         to   { opacity: 0; transform: translateX(30px); } }
   @keyframes slideIn  { from { opacity: 0; transform: translateX(34px); }
                         to   { opacity: 1; transform: none; } }
   @keyframes sqAway {
      from { opacity: 1; filter: blur(0);
             transform: translate(-50%, -50%) rotate(0deg) scale(1); }
      70%  { opacity: 1; }
      to   { opacity: 0; filter: blur(5px);
             transform: translate(calc(-50% + var(--sx, 0px)),
                                  calc(-50% + var(--sy, 0px)))
                        rotate(var(--sr, 0deg)) scale(.85); }
   }

   @keyframes ctaOut { from { opacity: 1; transform: none; }
                       to   { opacity: 0; transform: translateY(22px); } }
   @keyframes ctaIn  { from { opacity: 0; transform: translateY(26px); }
                       to   { opacity: 1; transform: none; } }
   @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
   @keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

   body.story-film .app { pointer-events: none; }

   body.film-arming:not(.story-film) #cp-card,
   body.film-arming:not(.story-film) #cp-ring {
      opacity: 0 !important;
      transition: none !important;
   }

   @keyframes cardIn { from { opacity: 0; transform: translateY(-6px); }
                       to   { opacity: 1; transform: none; } }

   body.story-film #cp-card { animation: cardIn .42s cubic-bezier(.16, 1, .3, 1) both; }

   body.film-arming #intro,
   body.film-arming #film-ground { will-change: opacity; }

   #film-ground {
      position: fixed;
      inset: 0;
      z-index: 2998;
      background: #0C0A08;
      opacity: 0;
      pointer-events: none;
   }

   @keyframes groundIn  { from { opacity: 0; } to { opacity: 1; } }
   @keyframes groundOut { from { opacity: 1; } to { opacity: 0; } }

   body.story-film #film-ground,
   body.film-closing #film-ground { opacity: 0; animation: none; }

   body.story-film #intro.is-gone {
      display: flex !important;
      opacity: 0;
      pointer-events: none !important;
   }

   body.story-film #intro.is-gone #intro-stage,
   body.story-film #intro.is-gone .intro-rail,
   body.story-film #intro.is-gone #intro-skip {
      opacity: 0 !important;
      transition: none !important;
   }

   body.story-film #intro-replay { animation: upOut .22s ease both; }
   body.story-film #tour-btn     { animation: upOut .22s ease both .03s; }
   body.story-film .segment      { animation: slideOut .26s ease both .07s; }
   body.story-film .searchwrap   { animation: upOut .26s ease both .1s; }
   body.story-film .topright     { animation: upOut .26s ease both .13s; }

   body.story-film #hero-title   { animation: leftOut .34s cubic-bezier(.45, .12, .5, .94) both .02s; }
   body.story-film #hero-sub     { animation: leftOut .34s cubic-bezier(.45, .12, .5, .94) both .07s; }
   body.story-film #score-panel  { animation: dropOut .36s cubic-bezier(.45, .12, .5, .94) both .12s; }
   body.story-film #profile-cta  { animation: ctaOut .32s cubic-bezier(.45, .12, .5, .94) both .18s; }
   body.story-film #kpis-wrap,
   body.story-film #card-wrap    { animation: dropOut .34s cubic-bezier(.45, .12, .5, .94) both .16s; }

   body.story-film #dotfield .ssq {
      animation: sqAway .46s cubic-bezier(.45, .12, .5, .94) both;
      animation-delay: calc(var(--sd, .1s) * .5);
   }

   body.story-film #dotfield .ghostsq  { animation: fadeOut .22s ease both; }
   body.story-film #dotfield .histaxis { animation: fadeOut .24s ease both .08s; }
   body.story-film .fieldlegend        { animation: fadeOut .24s ease both .1s; }

   body.dash-landing #dotfield .ssq {
      animation: fieldSettle .76s cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: var(--sd, .1s);
   }

   body.dash-landing #dotfield .ghostsq  { animation: fadeIn .36s ease both .1s; }
   body.dash-landing #dotfield .histaxis { animation: fadeIn .36s ease both .18s; }

   body.dash-landing #hero-title  { animation: leftIn .6s cubic-bezier(.16, 1, .3, 1) both .12s; }
   body.dash-landing #hero-sub    { animation: leftIn .6s cubic-bezier(.16, 1, .3, 1) both .2s; }
   body.dash-landing #score-panel { animation: dropIn .64s cubic-bezier(.16, 1, .3, 1) both .28s; }
   body.dash-landing #profile-cta { animation: ctaIn .5s cubic-bezier(.16, 1, .3, 1) both .3s; }
   body.dash-landing #kpis-wrap,
   body.dash-landing #card-wrap   { animation: dropIn .54s cubic-bezier(.16, 1, .3, 1) both .25s; }

   body.dash-landing #intro-replay { animation: upIn .4s cubic-bezier(.16, 1, .3, 1) both .28s; }
   body.dash-landing #tour-btn     { animation: upIn .4s cubic-bezier(.16, 1, .3, 1) both .32s; }
   body.dash-landing .segment      { animation: slideIn .42s cubic-bezier(.16, 1, .3, 1) both .36s; }
   body.dash-landing .searchwrap   { animation: upIn .42s cubic-bezier(.16, 1, .3, 1) both .4s; }
   body.dash-landing .topright     { animation: upIn .42s cubic-bezier(.16, 1, .3, 1) both .44s; }
   body.dash-landing .fieldlegend  { animation: fadeIn .38s ease both .42s; }

   body.story-film #intro.is-gone,
   body.film-closing #intro.is-gone {
      display: flex !important;
      pointer-events: auto !important;
      transition: opacity .45s ease;
   }

   .topright {
      flex: 0 0 178px !important;
      width: 178px !important;
   }

   .searchwrap { flex: 1 1 auto !important; }

   .kpikey .kk--tick {
      width: 1px !important;
      height: 7px !important;
      background: rgba(22, 19, 14, .26) !important;
      vertical-align: -1px;
   }

   body.story-film .leftcol,
   body.colophon-out .leftcol,
   body.film-closing .leftcol {
      overflow: hidden !important;
   }

   body:has(#intro.is-gone) #cp-card.on .cp-body,
   body:has(#intro.is-gone).credit-closing #cp-card .cp-body {
      padding: 26px 15px 25px !important;
   }

   body:has(#intro.is-gone) #cp-card.on .cp-avwrap {
      width: 42px !important;
      height: 42px !important;
   }

   body:has(#intro.is-gone) #cp-card.on .cp-avwrap {
      top: 26px !important;
   }

   body.credit-open #cp-scrim { opacity: 0 !important; }

   body.credit-open #cp-card,
   body.credit-open #cp-card.on {
      background: rgba(16, 13, 10, .4) !important;
      -webkit-backdrop-filter: blur(18px) saturate(185%) !important;
      backdrop-filter: blur(18px) saturate(185%) !important;
      box-shadow: 0 18px 44px rgba(0, 0, 0, .38) !important;
      border: 0 !important;
   }

   body.credit-open #cp-ring { opacity: 0 !important; }

   body.credit-open #cp-card .cp-kicker { color: rgba(245, 243, 238, .62) !important; }
   body.credit-open #cp-card .cp-fullname { color: #F7F5F1 !important; }
   body.credit-open #cp-card .cp-row,
   body.credit-open #cp-card .cp-row span { color: rgba(245, 243, 238, .88) !important; }
   body.credit-open #cp-card .cp-row i { color: rgba(245, 243, 238, .62) !important; }
   body.credit-open #cp-card .cp-row + .cp-row::before {
      background: rgba(245, 243, 238, .18) !important;
   }

   body.story-film #intro.is-gone #promo-scrim,
   body.film-closing #intro.is-gone #promo-scrim {
      opacity: 1 !important;
      animation: none !important;
   }

   @keyframes filmIn { from { opacity: 0; } to { opacity: 1; } }

   body.story-film #intro.is-gone {
      animation: filmIn .62s cubic-bezier(0, .45, .35, 1) both;
   }
   @keyframes filmOut { from { opacity: 1; } to { opacity: 0; } }

   body.film-closing #intro.is-gone {
      animation: filmOut .6s ease .18s both;
   }


   body.film-closing #intro.is-gone #intro-stage,
   body.film-closing #intro.is-gone .intro-rail,
   body.film-closing #intro.is-gone #intro-skip { opacity: 0 !important; }

   body.film-arming #cp-ring,
   body.story-film #cp-ring,
   body.story-film #cp-ring,
   body.colophon-out #cp-ring,
   body.film-closing #cp-ring { opacity: 0 !important; }

   @keyframes ringBack { from { opacity: 0; } to { opacity: 1; } }

   body.ring-back #cp-ring { animation: ringBack .34s ease both; }

   body.colophon-out #story-colophon {
      opacity: 0 !important;
      transition: opacity .34s ease !important;
   }

   body.colophon-out #intro-stage,
   body.colophon-out .intro-rail,
   body.colophon-out #intro-skip { opacity: 0 !important; }


   body.story-film #cp-ring,
   body.film-closing #cp-ring {
      border-color: rgba(245, 243, 238, .55) !important;
   }

   body.film-arming .tap-hint,
   body.film-arming .hl-read,
   body.film-arming #hint-layer,
   body.story-film .tap-hint,
   body.story-film .hl-read,
   body.story-film #hint-layer,
   body.colophon-out .tap-hint,
   body.colophon-out .hl-read,
   body.colophon-out #hint-layer,
   body.film-closing .tap-hint,
   body.film-closing .hl-read,
   body.film-closing #hint-layer {
      opacity: 0 !important;
      transition: opacity .2s ease !important;
   }

   #hint-layer {
      position: fixed;
      inset: 0;
      z-index: 3550;
      pointer-events: none;
      opacity: 0;
      transition: opacity .45s ease;
   }

   body.tap-hint-on #hint-layer { opacity: 1; }

   #hint-layer .hl-run {
      fill: none;
      stroke: rgba(22, 19, 14, .5);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-dasharray: 1 5;
   }

   #hint-layer .hl-head { fill: rgba(22, 19, 14, .62); }

   .hl-read {
      position: fixed;
      z-index: 3560;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 11px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .52);
      -webkit-backdrop-filter: blur(18px) saturate(185%);
      backdrop-filter: blur(18px) saturate(185%);
      border: 1px solid rgba(255, 255, 255, .6);
      box-shadow: 0 8px 22px rgba(28, 20, 14, .14);
      font-family: var(--mono);
      font-size: 8.5px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #6B645A;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateY(5px);
      transition: opacity .4s ease .12s,
                  transform .6s cubic-bezier(.16, 1, .3, 1) .12s;
   }

   .hl-read b { font-size: 13px; letter-spacing: 0; color: #2F2A22; font-weight: 600; }
   .hl-read i { font-style: normal; color: #B9B2A6; }
   .hl-read u {
      text-decoration: none;
      padding: 2px 5px;
      border-radius: 5px;
      background: rgba(197, 106, 68, .13);
      color: #B0552F;
   }

   body.tap-hint-on .hl-read { opacity: 1; transform: none; }

   .tap-hint {
      left: 50%;
      transform: translate(-50%, 6px);
   }

   body.tap-hint-on .tap-hint { transform: translate(-50%, 0); }
}

@media (max-width: 640px) {

   .intro-chart {
      width: 89vw !important;
      height: 30vh !important;
      min-height: 176px !important;
      margin-top: 26px !important;
   }

   body.story-film #intro:not(.is-gone) {
      display: flex !important;
      opacity: 1 !important;
      pointer-events: auto !important;
   }

   body.story-film #intro.is-gone {
      display: flex !important;
      pointer-events: auto !important;
   }

   body.story-film #intro-stage,
   body.story-film .intro-rail,
   body.story-film #intro-skip {
      opacity: 0 !important;
      pointer-events: none;
      transition: opacity .5s ease;
   }

   body.film-closing #intro-stage,
   body.film-closing .intro-rail,
   body.film-closing #intro-skip { transition: opacity .3s ease; }

   #intro-stage, .intro-rail, #intro-skip {
      transition: opacity .34s ease;
   }

   @keyframes sbDown { from { opacity: 0; transform: translateY(-10px); }
                       to   { opacity: 1; transform: none; } }
   @keyframes sbUp   { from { opacity: 0; transform: translateY(16px); }
                       to   { opacity: 1; transform: none; } }

   body.film-closing #intro:not(.is-gone) #intro-stage {
      opacity: 0 !important;
      animation: none !important;
   }

   body.story-back #intro:not(.is-gone) #intro-stage {
      opacity: 1 !important;
   }

   body.film-closing #intro:not(.is-gone) #intro-skip {
      animation: sbDown .5s cubic-bezier(.16, 1, .3, 1) .42s both;
   }

   body.film-closing #intro:not(.is-gone) .intro-rail {
      animation: sbUp .58s cubic-bezier(.16, 1, .3, 1) .62s both;
   }

   #story-colophon {
      position: absolute;
      inset: 0;
      z-index: 40;
      opacity: 0;
      pointer-events: none;
      transition: opacity .5s ease .42s;
   }

   body.story-film #story-colophon { opacity: 1; pointer-events: auto; }

   #story-colophon .ms-method {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 78px;
      width: auto;
      color: rgba(245, 243, 238, .74);
      font-family: var(--ui, system-ui), sans-serif;
      font-size: 12.5px;
      line-height: 1.55;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .5s ease .52s,
                  transform .9s cubic-bezier(.16, 1, .3, 1) .52s;
   }

   body.story-film #story-colophon .ms-method { opacity: 1; transform: none; }

   #story-colophon .msm-k {
      font-family: var(--mono);
      font-size: 8.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(245, 243, 238, .5);
      margin-bottom: 9px;
   }

   #story-colophon .ms-method p { margin: 0 0 9px 0; }
   #story-colophon .ms-method p:last-child { margin-bottom: 0; }
   #story-colophon .ms-method b { font-weight: 500; color: rgba(245, 243, 238, .95); }

   #story-colophon .msm-caveat {
      color: rgba(245, 243, 238, .56);
      font-size: 11.5px;
      padding-top: 8px;
      border-top: 1px solid rgba(245, 243, 238, .16);
   }

   #story-colophon .sc-line {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 18px;
      display: block;
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(245, 243, 238, .58);
   }

   #story-colophon .sc-line b,
   #story-colophon .sc-line span { display: block; }

   #story-colophon .sc-line b { font-weight: 500; color: rgba(245, 243, 238, .92); }

   #story-colophon .sc-line i {
      display: block;
      height: 0;
      margin: 6px 0 0;
      background: none;
   }

   #story-colophon .sc-line a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid rgba(245, 243, 238, .3);
   }

   #story-colophon .sc-line em {
      font-style: normal;
      color: rgba(245, 243, 238, .34);
      margin: 0 4px;
   }

   body.story-film #cp-ring {
      border-color: rgba(245, 243, 238, .55) !important;
   }

   body.story-film #cp-scrim { opacity: .22 !important; }

   body.film-arming #cp-scrim,
   body.story-film #cp-scrim,
   body.colophon-out #cp-scrim,
   body.film-closing #cp-scrim {
      opacity: 0 !important;
      transition: opacity .28s ease !important;
   }
}

body.story-heal #intro-stage,
body.story-heal .intro-rail,
body.story-heal #intro-skip,
body.story-heal .intro-scene.on {
   opacity: 1 !important;
   visibility: visible !important;
}

@media (max-width: 640px) and (max-height: 720px) {
   #score-panel { margin-top: 6px !important; }
   #profile-cta { margin-top: 6px !important; }
}

@media (max-width: 640px) and (max-height: 700px) {
   .leftcol { bottom: 42% !important; }
}

@media (max-width: 640px) and (max-height: 620px) {
   .leftcol { bottom: 36% !important; }
}