@font-face {
   font-family: 'Display Black';
   src: url('/assets/fonts/shg_black.otf') format('opentype'),
        url('/assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
   font-weight: 900;
   font-display: swap;
}

@font-face {
   font-family: 'Display Book';
   src: url('/assets/fonts/SharpGrotesk-Book20.otf') format('opentype'),
        url('/assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
   font-weight: 400;
   font-display: swap;
}

@font-face {
   font-family: 'Display Medium';
   src: url('/assets/fonts/SharpGrotesk-Medium22.otf') format('opentype'),
        url('/assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
   font-weight: 500;
   font-display: swap;
}

@font-face {
   font-family: 'Display Semi';
   src: url('/assets/fonts/SharpGrotesk-SemiBold22.otf') format('opentype'),
        url('/assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
   font-weight: 600;
   font-display: swap;
}

:root {
   --ui: 'Display Medium', 'Space Grotesk', system-ui, sans-serif;
   --ui-med: 'Display Medium', 'Space Grotesk', system-ui, sans-serif;
   --ui-semi: 'Display Semi', 'Space Grotesk', system-ui, sans-serif;
   --display: 'Display Semi', 'Display Black', 'Space Grotesk', sans-serif;
   --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
   --stage: #FFFFFF;
   --edge: #12100E;
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body,
html {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
   background: #FFFFFF;
   color-scheme: light;
   font-family: var(--ui);
   -webkit-font-smoothing: antialiased;
   color: var(--edge);
}

body {
   background: #FFFFFF;
}

.kicker {
   font-family: var(--mono);
   text-transform: uppercase;
   letter-spacing: 0.13em;
   font-size: 9.5px;
   font-weight: 500;
}

.num {
   font-variant-numeric: tabular-nums;
   letter-spacing: -0.025em;
}

.app {
   position: fixed;
   inset: 0;
   overflow: hidden;
}

.dotfield {
   position: absolute;
   left: 64.5%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 62vw;
   height: 66vh;
   z-index: 8;
}

.ssq {
   position: absolute;
   transform: translate(-50%, -50%);
   padding: 0;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   display: grid;
   place-items: center;
   box-shadow: 0 2px 8px rgba(28, 20, 14, 0.14);
   opacity: 1;
   transition: left 0.7s var(--ease), top 0.7s var(--ease),
      background 0.4s var(--ease),
      transform 0.25s var(--ease);
}

.ssq:hover {
   transform: translate(-50%, -50%) scale(1.18);
   z-index: 30;
}

.ssq .sdot-abbr {
   position: static;
   width: auto;
   height: auto;
   font-family: var(--mono);
   font-size: 9.5px;
   letter-spacing: .02em;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.95);
}

.ssq.is-selected {
   outline: 2.5px solid #16130E;
   outline-offset: 2.5px;
   z-index: 25;
}

.ssq--protective {
   background: linear-gradient(160deg, #9FBFAC 0%, #7FA891 100%);
}

.ssq--mixed {
   background: linear-gradient(160deg, #E8CD9C 0%, #D9B678 100%);
}

.ssq--restrictive {
   background: linear-gradient(160deg, #ECA08D 0%, #DE7C64 100%);
}

.ghostsq {
   position: absolute;
   transform: translate(-50%, -50%);
   box-sizing: border-box;
   border: 1.4px solid rgba(22, 19, 14, 0.22);
   border-radius: 5px;
   pointer-events: auto;
   cursor: pointer;
   z-index: 0;
   transition: left 0.7s var(--ease), top 0.7s var(--ease),
      border-color 0.22s ease, background 0.22s ease,
      box-shadow 0.22s ease;
}

.ghostsq.is-linked {
   border-color: #16130E;
   border-width: 2px;
   background: rgba(22, 19, 14, 0.05);
   box-shadow: 0 0 0 3.5px rgba(22, 19, 14, 0.07);
}

.ghost-abbr {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font-family: var(--mono);
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: .02em;
   color: #16130E;
   opacity: 0;
   transition: opacity 0.22s ease;
}

.ghostsq.is-linked .ghost-abbr {
   opacity: 0.92;
}

.ssq.is-linksrc:not(.is-selected) {
   outline: 2px solid rgba(22, 19, 14, 0.55);
   outline-offset: 2.5px;
}

#linklayer {
   position: fixed;
   inset: 0;
   width: 100vw;
   height: 100vh;
   z-index: 9;
   pointer-events: none;
   opacity: 0;
   overflow: visible;
}

.linkpath {
   fill: none;
   stroke: #16130E;
   stroke-width: 2.7;
   stroke-linecap: round;
   stroke-dasharray: 0.01 7.5;
   opacity: 0.8;
}

.linkhead {
   fill: #16130E;
   opacity: 0.88;
}

.linkpath.is-flat {
   stroke: rgba(22, 19, 14, 0.3);
}

#linktag {
   position: fixed;
   z-index: 900;
   pointer-events: none;
   transform: translate(-50%, -50%);
   opacity: 0;
   display: flex;
   align-items: center;
   gap: 13px;
   padding: 11px 16px;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.34);
   -webkit-backdrop-filter: blur(18px) saturate(185%);
   backdrop-filter: blur(18px) saturate(185%);
   border: 1px solid rgba(255, 255, 255, 0.55);
   box-shadow: 0 10px 28px rgba(28, 20, 14, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.lt-cell {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   line-height: 1;
   min-width: 58px;
}

.lt-cell b {
   font-family: var(--ui-semi);
   font-weight: 600;
   font-size: 17px;
   letter-spacing: -0.01em;
   color: #16130E;
}

.lt-cell i {
   font-family: var(--mono);
   font-style: normal;
   font-size: 7.5px;
   letter-spacing: .15em;
   color: #A79C8E;
}

.lt-arrow {
   font-family: var(--mono);
   font-size: 15px;
   line-height: 1;
   color: #16130E;
   opacity: .8;
   align-self: center;
}

.lt-delta {
   font-family: var(--mono);
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: .04em;
   padding: 5px 8px;
   border-radius: 8px;
   align-self: center;
}

.lt-delta.up {
   color: #A4402A;
   background: rgba(222, 124, 100, 0.20);
}

.lt-delta.down {
   color: #38614A;
   background: rgba(127, 168, 145, 0.26);
}

.lt-same {
   font-family: var(--mono);
   font-size: 8.5px;
   letter-spacing: .15em;
   color: #8C8478;
   align-self: center;
}

.histaxis {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.fieldlegend {
   position: absolute;
   right: 26px;
   bottom: 22px;
   z-index: 25;
   display: flex;
   align-items: center;
   gap: 12px;
   pointer-events: none;
}

.lgtrail {
   position: relative;
   width: 96px;
   height: 16px;
}

.lgtrail .g {
   position: absolute;
   top: 1px;
   width: 14px;
   height: 14px;
   border-radius: 3.5px;
   border: 1.4px solid rgba(22, 19, 14, 0.30);
}

.lgtrail .g1 {
   left: 0;
   opacity: .25;
}

.lgtrail .g2 {
   left: 26px;
   opacity: .5;
}

.lgtrail .g3 {
   left: 52px;
   opacity: .8;
}

.lgtrail .lgf {
   position: absolute;
   top: 1px;
   left: 80px;
   width: 14px;
   height: 14px;
   border-radius: 3.5px;
   background: linear-gradient(160deg, #EED9AC, #C08F3C);
}

.lgcap {
   font-family: var(--mono);
   font-size: 8px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #5E574D;
   line-height: 1.6;
}

.lgcap .dim {
   color: #B9B2A6;
}

.fieldlegend {
   transition: opacity .35s ease;
}

body.tour-on .fieldlegend {
   opacity: 0;
}

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

@media (min-width: 641px) {
   .fieldlegend .lgtrail,
   .fieldlegend .lgcap {
      display: none;
   }

   .fieldlegend::after {
      content: 'Hover any square';
      font-family: var(--mono);
      font-size: 8.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #8C8478;
      transition: opacity .5s ease;
   }

   body.legend-demo .fieldlegend::after {
      opacity: .25;
   }
}

.histaxis-n {
   position: absolute;
   bottom: 8.5%;
   transform: translateX(-50%);
   font-family: var(--mono);
   font-size: 10px;
   color: #A79C8E;
}

.histaxis-end {
   position: absolute;
   bottom: 4.2%;
   white-space: nowrap;
   font-family: var(--mono);
   font-size: 9.5px;
   letter-spacing: .14em;
   color: #B9B2A6;
}

.sdot-abbr {
   position: absolute;
   left: 0;
   top: 0;
   width: var(--d);
   height: var(--d);
   display: grid;
   place-items: center;
   font-size: clamp(8.5px, calc(var(--d) * 0.34), 12px);
   letter-spacing: 0.02em;
   font-weight: 600;
   color: rgba(22, 19, 14, 0.78);
}

@keyframes rise {
   from {
      opacity: 0;
      transform: translateY(22px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(12px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes dropIn {
   from {
      opacity: 0;
      transform: translateY(-14px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes xfadeIn {
   from {
      opacity: 0;
      filter: blur(8px);
   }

   to {
      opacity: 1;
      filter: blur(0);
   }
}

@keyframes xfadeOut {
   from {
      opacity: 1;
      filter: blur(0);
   }

   to {
      opacity: 0;
      filter: blur(11px);
   }
}

@keyframes xfadeInSub {
   from {
      opacity: 0;
      filter: blur(15px);
   }

   to {
      opacity: 1;
      filter: blur(0);
   }
}

@keyframes xfadeOutSub {
   from {
      opacity: 1;
      filter: blur(0);
   }

   to {
      opacity: 0;
      filter: blur(18px);
   }
}

.xfade {
   position: relative;
   display: block;
}

.xfade-in {
   position: relative;
   z-index: 1;
   white-space: nowrap;
}

.xfade-out {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   white-space: nowrap;
   pointer-events: none;
   z-index: 2;
}

@keyframes cardDock {
   from {
      opacity: 0;
      transform: translateY(10px) scale(0.975);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

.glass {
   background: rgba(255, 255, 255, 0.66);
   -webkit-backdrop-filter: blur(30px) saturate(170%);
   backdrop-filter: blur(30px) saturate(170%);
   border: 1px solid rgba(255, 255, 255, 0.7);
   box-shadow: 0 14px 44px rgba(28, 20, 14, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.topbar {
   position: absolute;
   top: 22px;
   left: 26px;
   right: 26px;
   z-index: 30;
   height: 40px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.brandmark {
   flex: 0 0 auto;
}

.bar-break {
   display: none;
}

.searchwrap {
   position: relative;
   flex: 0 1 300px;
   margin-left: auto;
   transition: flex-basis .5s var(--ease);
}

@media (min-width: 641px) {
   .searchwrap:focus-within {
      flex-basis: 440px;
   }
}

:root {
   --btn-radius: 12px;
   --btn-radius-inner: 9px;
   --menu-radius: 16px;
}

.searchwrap,
.searchfield {
   isolation: isolate;
}

.searchfield {
   width: 100%;
   height: 40px;
   box-sizing: border-box;
   padding: 0 20px;
   border-radius: var(--btn-radius);
   outline: none;
   font-family: var(--mono);
   font-size: 10px;
   letter-spacing: .06em;
   color: #16130E;
   background: rgba(255, 255, 255, 0.30);
   border: 1px solid rgba(22, 19, 14, 0.22);
   -webkit-backdrop-filter: blur(18px) saturate(140%);
   backdrop-filter: blur(18px) saturate(140%);
   transition: background 0.3s var(--ease);
}

.searchfield input::placeholder {
   color: #7C746A;
   font-family: var(--mono);
   font-size: 9px;
   letter-spacing: .13em;
   text-transform: uppercase;
}

#state-search:focus-within,
.searchfield:focus-within {
   background: rgba(255, 255, 255, 0.6) !important;
   border-color: var(--accent, #63997A) !important;
   outline: none !important;
   box-shadow: none !important;
}

.searchfield input {
   width: 100% !important;
   height: 100% !important;
   background: transparent !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   padding: 0 !important;
   margin: 0 !important;
   font: inherit !important;
   color: inherit !important;
   border-radius: var(--btn-radius);
}

.searchresults {
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
   right: 0;
   z-index: 50;
   border-radius: var(--menu-radius);
   overflow: hidden;
   padding: 6px;
   background: rgba(255, 255, 255, 0.42);
   border: 1px solid rgba(255, 255, 255, 0.5);
   -webkit-backdrop-filter: blur(46px) saturate(190%);
   backdrop-filter: blur(46px) saturate(190%);
   box-shadow: 0 20px 52px rgba(28, 20, 14, 0.20);
   animation: dropIn 0.28s var(--ease) both;
}

.searchresults {
   display: none;
}

.searchwrap:focus-within .searchresults {
   display: grid;
}

.searchrow {
   padding: 9px 14px;
   font-size: 12.5px;
   color: #3A352E;
   cursor: pointer;
   border-radius: 12px;
   transition: background 0.18s var(--ease),
      color 0.18s var(--ease);
}

.searchrow:hover {
   background: rgba(255, 255, 255, 0.6);
   color: #16130E;
}

.searchrow--empty {
   color: #9A9186;
   cursor: default;
}

.searchrow--empty:hover {
   background: none;
}

.topright {
   width: 272px;
}

.segment {
   position: relative;
   display: flex;
   padding: 3px;
   border-radius: var(--btn-radius);
   border: 1px solid rgba(22, 19, 14, 0.22);
   background: rgba(252, 251, 249, 0.94);
}

.segment::before {
   content: '';
   position: absolute;
   top: 3px;
   bottom: 3px;
   left: 3px;
   width: calc(50% - 3px);
   border-radius: var(--btn-radius-inner);
   background: var(--accent, #63997A);
   z-index: 0;
   transition: transform .42s var(--ease);
}

.segment:has(#btn-post.is-on)::before {
   transform: translateX(100%);
}

.segment:has(#btn-pre.is-on)::before {
   transform: translateX(0);
}

.segbtn {
   position: relative;
   z-index: 1;
   border: none;
   background: transparent;
   cursor: pointer;
   height: 32px;
   padding: 0 15px;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: var(--btn-radius-inner);
   font-family: var(--mono);
   font-size: 9px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #7C746A;
   white-space: nowrap;
   flex: 1 1 0;
   transition: color .3s var(--ease);
}

.seg-short {
   display: none;
}

.segbtn.is-on {
   background: transparent;
   color: #fff;
   font-weight: 700;
}

.segbtn::after {
   content: attr(data-label);
   display: block;
   height: 0;
   line-height: 0;
   overflow: hidden;
   visibility: hidden;
   font-weight: 700;
   pointer-events: none;
}

.barctrls {
   display: flex;
   gap: 7px;
}

.scoretile {
   position: relative;
   overflow: hidden;
   border-radius: 18px;
   min-height: 132px;
   padding: 15px 16px;
   margin: 0 0 13px 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   box-shadow: 0 4px 12px rgba(28, 20, 14, 0.07);
}

.profile-cta {
   display: none;
}

.scoretile-grain {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   opacity: 0.5;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sn)'/%3E%3C/svg%3E");
}

.scoretile-in {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1 1 auto;
   gap: 20px;
}

.periodtag {
   font-family: var(--mono);
   font-size: 7.5px;
   font-weight: 500;
   letter-spacing: .12em;
   text-transform: uppercase;
   padding: 6px 11px;
   border-radius: 999px;
   line-height: 1;
   color: #A79C8E;
   border: 1px solid rgba(22, 19, 14, 0.20);
   white-space: nowrap;
}

.periodtag--onglass {
   color: rgba(255, 255, 255, 0.92);
   border-color: rgba(255, 255, 255, 0.55);
}

.scoretile-pill {
   align-self: flex-start;
   font-family: var(--mono);
   font-size: 10px;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.94);
   text-shadow: 0 1px 8px rgba(20, 16, 12, 0.35);
}

.scoretile-num {
   font-family: var(--display);
   font-size: 46px;
   font-weight: 400;
   letter-spacing: 0;
   line-height: 0.95;
   color: #FFFFFF;
}

.scoretile-cap {
   font-family: var(--mono);
   font-size: 10px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.94);
   margin-top: 7px;
   text-shadow: 0 1px 8px rgba(20, 16, 12, 0.35);
}

.scorepanel {
   display: flex;
   flex-direction: column;
}

.scorepair {
   display: flex;
   gap: 9px;
}

.scoretile--half {
   flex: 1 1 0;
   min-width: 0;
}

.ctabar {
   width: 100%;
   border: none;
   cursor: pointer;
   border-radius: 15px;
   padding: 13px 15px;
   margin-bottom: 3px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   background: #1B409B;
   color: #FFFFFF;
   font-family: var(--mono);
   font-size: 9px;
   letter-spacing: .15em;
   text-transform: uppercase;
   transition: background .3s var(--ease);
}

.ctabar:hover {
   background: #16357F;
}

.ctabar-arrow {
   width: 26px;
   height: 26px;
   flex: 0 0 26px;
   border-radius: 50%;
   background: #FFFFFF;
   color: #1B409B;
   display: grid;
   place-items: center;
   font-size: 13px;
   line-height: 1;
   transition: transform .45s var(--ease);
}

.ctabar.is-open .ctabar-arrow {
   transform: rotate(90deg);
}

.spark {
   height: 44px;
   margin-top: 9px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.bigchart {
   height: 132px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   margin-top: 2px;
}

.chartcap {
   font-family: var(--mono);
   font-size: 9.5px;
   letter-spacing: .11em;
   text-transform: uppercase;
   color: #A79C8E;
   margin: 7px 0 0;
}

.tilefade {
   position: relative;
   display: block;
}

.tilefade-out {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 2;
}

.tilefade-in {
   position: relative;
   z-index: 1;
}

@keyframes tileIn {
   from {
      opacity: 0;
      filter: blur(12px);
      transform: scale(.97);
   }

   to {
      opacity: 1;
      filter: blur(0);
      transform: none;
   }
}

@keyframes tileOut {
   from {
      opacity: 1;
      filter: blur(0);
   }

   to {
      opacity: 0;
      filter: blur(14px);
   }
}

.brandmark,
.barctrls,
.topright,
button.dash-dropdown.metricbox {
   isolation: isolate;
}

.brandmark {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 0 18px;
   height: 40px;
   border-radius: var(--btn-radius);
   background: transparent;
   -webkit-backdrop-filter: blur(30px) saturate(150%);
   backdrop-filter: blur(30px) saturate(150%);
   border: 1px solid rgba(22, 19, 14, 0.22);
   white-space: nowrap;
}

.dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #63997A;
   display: inline-block;
   position: relative;
   flex: none;
   animation: dotBreath 2.6s cubic-bezier(.4, 0, .6, 1) infinite;
}

.dot::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 1.5px solid #63997A;
   opacity: 0;
   pointer-events: none;
   animation: dotRing 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
}

@keyframes dotBreath {

   0%,
   100% {
      transform: scale(1);
      opacity: 1;
   }

   50% {
      transform: scale(.86);
      opacity: .78;
   }
}

@keyframes dotRing {
   0% {
      transform: scale(1);
      opacity: .55;
   }

   70% {
      transform: scale(2.6);
      opacity: 0;
   }

   100% {
      transform: scale(2.6);
      opacity: 0;
   }
}

@media (prefers-reduced-motion: reduce) {

   .dot,
   .dot::after {
      animation: none;
   }

   .dot::after {
      opacity: 0;
   }
}

button.dash-dropdown.metricbox {
   height: 40px !important;
   padding: 0 16px !important;
   border-radius: var(--btn-radius) !important;
   cursor: pointer;
   font-family: var(--mono) !important;
   background: transparent !important;
   border: 1px solid rgba(22, 19, 14, 0.22) !important;
   -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
   backdrop-filter: blur(30px) saturate(150%) !important;
   box-shadow: none !important;
   transition: background 0.3s var(--ease);
}

button.dash-dropdown.metricbox:hover {
   background: rgba(255, 255, 255, 0.5) !important;
}

.dash-dropdown-value,
.dash-dropdown-placeholder,
.dash-dropdown-value-item {
   color: #7C746A !important;
   font-size: 9px !important;
   letter-spacing: .13em !important;
   text-transform: uppercase !important;
   font-family: var(--mono) !important;
}

.dash-dropdown-placeholder {
   color: #7C746A !important;
}

button.metricbox .dash-dropdown-grid-container {
   grid-template-columns: 1fr 15px !important;
   width: 100% !important;
   box-sizing: border-box !important;
   padding: 0 !important;
}

button.metricbox .dash-dropdown-value {
   justify-self: start;
   text-align: left;
}

button.metricbox .dash-dropdown-value,
button.metricbox .dash-dropdown-value-item {
   max-width: none !important;
   overflow: visible !important;
   text-overflow: clip !important;
   white-space: nowrap !important;
}

#map-color-dropdown:focus,
#map-color-dropdown:focus-visible {
   outline: none !important;
   border-color: var(--accent, #63997A) !important;
}

.dash-dropdown-wrapper {
   position: relative;
   width: 100%;
}

.dash-dropdown-wrapper>[data-radix-popper-content-wrapper] {
   position: absolute !important;
   transform: none !important;
   left: 0 !important;
   top: 100% !important;
   right: auto !important;
   bottom: auto !important;
   width: 100% !important;
   min-width: 0 !important;
   max-width: none !important;
   z-index: 60 !important;
}

.dash-dropdown-content {
   margin-top: 10px !important;
   border-radius: var(--menu-radius) !important;
   max-height: 46vh !important;
   overflow-y: auto !important;
   overscroll-behavior: contain;
   width: 100% !important;
   min-width: 0 !important;
   box-sizing: border-box;
   padding: 6px !important;
   background: rgba(255, 255, 255, 0.42) !important;
   border: 1px solid rgba(255, 255, 255, 0.5) !important;
   -webkit-backdrop-filter: blur(46px) saturate(190%) !important;
   backdrop-filter: blur(46px) saturate(190%) !important;
   box-shadow: 0 20px 52px rgba(28, 20, 14, 0.20) !important;
   animation: dropIn 0.28s var(--ease) both;
}

.dash-options-list-option:has(input:checked),
.dash-options-list-option-wrapper:has(input:checked),
.dash-options-list-option[aria-selected='true'] {
   background: rgba(22, 19, 14, 0.07) !important;
   border-radius: 12px !important;
}

.dash-options-list-option:has(input:checked) .dash-options-list-option-text,
.dash-options-list-option-wrapper:has(input:checked) .dash-options-list-option-text,
.dash-options-list-option[aria-selected='true'] .dash-options-list-option-text {
   font-weight: 700 !important;
   color: #16130E !important;
}

.dash-dropdown-search {
   border-radius: var(--btn-radius) !important;
   height: 34px !important;
   padding: 0 14px !important;
   font-family: var(--ui) !important;
   font-size: 12.5px !important;
   color: #16130E !important;
   background: rgba(255, 255, 255, 0.55) !important;
   border: 1px solid rgba(255, 255, 255, 0.7) !important;
   outline: none !important;
}

.dash-dropdown-search:focus {
   border-color: rgba(99, 153, 122, 0.5) !important;
   box-shadow: 0 0 0 3px rgba(99, 153, 122, 0.14) !important;
}

.dash-dropdown-search-container {
   padding: 0 0 6px 0 !important;
}

.dash-options-list-option,
.dash-dropdown-option {
   border-radius: 12px !important;
   border: none !important;
   padding: 9px 14px !important;
   margin: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   cursor: pointer;
   transition: background 0.18s var(--ease),
      color 0.18s var(--ease);
}

.dash-options-list-option:hover,
.dash-dropdown-option:hover {
   background: rgba(255, 255, 255, 0.6) !important;
}

.dash-options-list-option:hover .dash-options-list-option-text,
.dash-dropdown-option:hover .dash-options-list-option-text {
   color: #16130E !important;
}

.dash-options-list {
   padding: 0 !important;
}

.dash-options-list-option-text {
   font-family: var(--ui) !important;
   font-size: 12.5px !important;
   color: #3A352E !important;
}

.dash-options-list-option-checkbox {
   display: none !important;
}

:root {
   --band-top: 62px;
   --band-bot: 100px;
}

.leftcol {
   position: absolute;
   left: 30px;
   top: calc(50% - (var(--band-bot) - var(--band-top)) / 2);
   transform: translateY(-50%);
   width: 418px;
   z-index: 20;
   display: flex;
   flex-direction: column;
   gap: 0;
   overflow: visible;
   padding-right: 6px;
   pointer-events: none;
}

.leftcol>*+* {
   margin-top: 18px;
}

.leftcol>.reveal:not(.on) {
   margin-top: 0;
}

@media (min-width: 641px) and (max-height: 940px) {
   .leftcol>*+* {
      margin-top: 12px;
   }

   .herokpis {
      padding: 13px 16px;
   }

   .kpiline {
      padding: 4px 0;
   }
}

@media (min-width: 641px) and (max-height: 850px) {
   .leftcol>*+* {
      margin-top: 9px;
   }

   .herokpis {
      padding: 11px 15px;
   }

   .kpiline {
      padding: 2px 0;
   }
}

@media (max-height: 760px) and (min-width: 641px) {
   .leftcol {
      max-height: calc(100vh - var(--band-top) - var(--band-bot));
      overflow-y: auto;
   }
}

.leftcol>* {
   pointer-events: auto;
}

.leftcol #hero-title,
.leftcol .herosub {
   pointer-events: none;
}

.leftcol {
   scrollbar-width: none;
   scroll-behavior: smooth;
}

.leftcol::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
}

#hero-title {
   width: max-content;
   max-width: 60vw;
   margin: 0;
   font-family: var(--display);
   font-size: 46px;
   font-weight: 400;
   letter-spacing: -0.01em;
   line-height: 1.0;
   color: #16130E;
}

.herosub {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.herokpis {
   flex: 0 0 auto;
   padding: 16px 18px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.42);
   border: 1px solid rgba(22, 19, 14, 0.22);
   -webkit-backdrop-filter: blur(34px) saturate(160%);
   backdrop-filter: blur(34px) saturate(160%);
}

.kpiline {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 12px;
   padding: 7px 0;
}

@media (min-width: 641px) and (max-height: 940px) {
   

   #herokpis.herokpis {
      padding: 13px 16px;
   }

   #herokpis .kpiline {
      padding: 4px 0;
   }

   #herokpis .kptrack {
      margin: 4px 0 0;
   }

   #herokpis .kpikey {
      padding: 7px 0 1px;
   }
}

@media (min-width: 641px) and (max-height: 850px) {
   

   #herokpis.herokpis {
      padding: 10px 15px;
   }

   #herokpis .kpiline {
      padding: 1.5px 0;
   }
}


.kpivals {
   display: flex;
   align-items: baseline;
   gap: 7px;
   font-size: 15px;
}

.statecard {
   z-index: 30;
   width: auto;
   transform-origin: 50% 0%;
   flex: 0 0 auto;
   max-height: clamp(260px, calc(100vh - 580px), 54vh);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: 18px;
   padding: 16px 6px 16px 18px;
   background: rgba(255, 255, 255, 0.42);
   -webkit-backdrop-filter: blur(34px) saturate(160%);
   backdrop-filter: blur(34px) saturate(160%);
   border: 1px solid rgba(22, 19, 14, 0.22);
   box-shadow: none;
}

.statecard-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 14px;
   padding-right: 16px;
}

.mtrack {
   position: relative;
   height: 4px;
   border-radius: 2px;
   background: rgba(22, 19, 14, 0.08);
   margin: 7px 0 1px;
   animation: stripFade 0.4s ease both;
}

.mavg {
   position: absolute;
   top: -3px;
   width: 1.5px;
   height: 10px;
   background: rgba(22, 19, 14, 0.30);
   animation: tickIn 0.3s ease both;
}

.mdot {
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 9px;
   height: 9px;
   border-radius: 50%;
   box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
   animation: dotGo 0.55s var(--ease) both;
}

.mseg {
   position: absolute;
   top: 0;
   height: 100%;
   border-radius: 2px;
   opacity: 0.3;
   animation: segGrow 0.55s var(--ease) both;
}

@keyframes stripFade {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes tickIn {
   from {
      opacity: 0;
      transform: scaleY(0);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes dotGo {
   from {
      left: var(--avg);
      opacity: 0;
   }

   12% {
      opacity: 1;
   }

   to {
      left: var(--p);
      opacity: 1;
   }
}

@keyframes segGrow {
   from {
      transform: scaleX(0);
   }

   to {
      transform: scaleX(1);
   }
}

.statecard-body {
   overflow-y: auto;
   padding-right: 14px;
   margin-right: 2px;
}

.statecard-body::-webkit-scrollbar {
   width: 5px;
}

.statecard-body::-webkit-scrollbar-thumb {
   background: rgba(22, 19, 14, 0.18);
   border-radius: 3px;
}

.statecard-body::-webkit-scrollbar-track {
   background: transparent;
}

.ghostbtn {
   font-family: var(--mono);
   font-size: 9px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   background: none;
   border: none;
   cursor: pointer;
   color: #9A9186;
   padding: 5px 2px;
   transition: color 0.25s var(--ease);
}

.ghostbtn:hover {
   color: #16130E;
}

.stampwrap {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   padding: 2px 2px 6px;
}

.pstamp {
   font-family: var(--mono);
   font-size: 9px;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 8px 11px;
   border-radius: 7px;
   line-height: 1.35;
   max-width: 150px;
   animation: stampIn 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.pstamp.on {
   color: #A4402A;
   border: 1.8px solid rgba(201, 85, 63, 0.55);
   background: rgba(222, 124, 100, 0.07);
   transform: rotate(var(--r, 0deg));
}

.pstamp.off {
   color: rgba(22, 19, 14, 0.32);
   border: 1.4px dashed rgba(22, 19, 14, 0.18);
}

.pstamp.na {
   color: rgba(22, 19, 14, 0.25);
   border: 1.4px dotted rgba(22, 19, 14, 0.15);
}

.pstamp.prot {
   color: #38614A;
   border: 1.8px solid rgba(99, 153, 122, 0.55);
   background: rgba(127, 168, 145, 0.08);
   transform: rotate(var(--r, 0deg));
}

@keyframes stampIn {
   0% {
      opacity: 0;
      transform: rotate(var(--r, 0deg)) scale(1.6);
   }

   55% {
      opacity: 1;
      transform: rotate(var(--r, 0deg)) scale(0.96);
   }

   100% {
      opacity: 1;
      transform: rotate(var(--r, 0deg)) scale(1);
   }
}

.cardclose {
   display: none;
}

@media (max-width: 640px) {
   .cardclose {
      display: inline-block;
   }
}

.collapsible {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.55s var(--ease);
}

.reveal {
   display: grid;
   grid-template-rows: 0fr;
   opacity: 0;
   transition: grid-template-rows 0.55s cubic-bezier(0.45, 0, 0.22, 1),
      margin-top 0.55s cubic-bezier(0.45, 0, 0.22, 1),
      opacity 0.42s ease;
}

.reveal.on {
   grid-template-rows: 1fr;
   opacity: 1;
}

.reveal-inner {
   overflow: hidden;
   min-height: 0;
}

.collapsible-inner {
   overflow: hidden;
   min-height: 0;
}

@keyframes stampOut {
   0% {
      opacity: 1;
      transform: rotate(var(--r, 0deg)) scale(1);
   }

   60% {
      opacity: 0;
      transform: rotate(var(--r, 0deg)) scale(0.82) translateY(-4px);
   }

   100% {
      opacity: 0;
      transform: rotate(var(--r, 0deg)) scale(0.82) translateY(-4px);
   }
}

.collapsible[style*="0fr"] .pstamp {
   animation: stampOut .58s cubic-bezier(.4, 0, .6, 1) both;
}

.collapsible[style*="0fr"] .pstamp:nth-child(2) {
   animation-delay: .04s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(3) {
   animation-delay: .08s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(4) {
   animation-delay: .12s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(5) {
   animation-delay: .16s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(6) {
   animation-delay: .20s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(7) {
   animation-delay: .24s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(8) {
   animation-delay: .28s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(9) {
   animation-delay: .32s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(10) {
   animation-delay: .36s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(11) {
   animation-delay: .40s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(12) {
   animation-delay: .44s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(13) {
   animation-delay: .48s;
}

.collapsible[style*="0fr"] .pstamp:nth-child(n+14) {
   animation-delay: .52s;
}

.collapsible {
   transition: grid-template-rows 0.95s cubic-bezier(.35, 0, .3, 1);
}

.collapsible[style*="0fr"] {
   transition: grid-template-rows 0.95s cubic-bezier(.7, 0, .4, 1);
}

.expandbtn {
   display: flex;
   align-items: center;
   justify-content: center;
}

.xlblwrap {
   display: flex;
   align-items: center;
   line-height: 1;
}

.xlbl {
   line-height: 1;
}

.caretbox {
   width: 9px;
   height: 9px;
   display: inline-grid;
   place-items: center;
   margin-right: 8px;
   flex: none;
}

.caret {
   width: 4.5px;
   height: 4.5px;
   display: block;
   border-right: 1.5px solid currentColor;
   border-bottom: 1.5px solid currentColor;
   transform: translateY(-1.6px) rotate(45deg);
   transition: transform 0.45s var(--ease);
}

.expandbtn.is-open .caret {
   transform: translateY(1.6px) rotate(-135deg);
}

.xlblwrap {
   position: relative;
   display: inline-block;
}

.xlbl {
   display: block;
   white-space: nowrap;
   transition: opacity .3s ease, filter .3s ease,
      transform .45s var(--ease);
}

.xlbl-hide {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, calc(-50% + 7px));
   opacity: 0;
   filter: blur(4px);
}

.expandbtn.is-open .xlbl-show {
   opacity: 0;
   filter: blur(4px);
   transform: translateY(-7px);
}

.expandbtn.is-open .xlbl-hide {
   opacity: 1;
   filter: blur(0);
   transform: translate(-50%, -50%);
}

.expandbtn {
   width: 100%;
   margin-top: 12px;
   padding: 11px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.34);
   border: 1px solid rgba(255, 255, 255, 0.5);
   transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.expandbtn:hover {
   background: rgba(255, 255, 255, 0.6);
   color: #7C746A !important;
}

.expandbtn:active {
   transform: scale(0.985);
}

::-webkit-scrollbar {
   width: 7px;
   height: 7px;
}

::-webkit-scrollbar-thumb {
   background: #D8D1C6;
   border-radius: 4px;
}

::-webkit-scrollbar-track {
   background: transparent;
}


:root {
   --accent: #63997A;
}

#intro {
   position: fixed;
   inset: 0;
   z-index: 3000;
   background: #FBFAF8;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0;
   font-family: 'Space Grotesk', sans-serif;
   transition: opacity .6s cubic-bezier(.16, 1, .3, 1);
}

#intro.is-gone {
   opacity: 0;
   pointer-events: none;
}

#cp-card {
   position: fixed;
   left: 26px;
   bottom: 22px;
   z-index: 3002;
   width: 78px;
   height: 78px;
   overflow: hidden;
   background: transparent;
   box-sizing: border-box;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   transition: width .46s cubic-bezier(.16, 1, .3, 1),
      height .46s cubic-bezier(.16, 1, .3, 1),
      border-radius .46s cubic-bezier(.16, 1, .3, 1),
      background .28s ease,
      border-color .3s ease;
}

#cp-card.on {
   width: 226px;
   height: 216px;
   border-radius: 16px;
   background: #FFFFFF;
}

.cp-avwrap {
   position: absolute;
   left: 13px;
   bottom: 13px;
   width: 48px;
   height: 48px;
   z-index: 2;
   animation: avBreath 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
   transition: left .46s cubic-bezier(.16, 1, .3, 1),
      top .46s cubic-bezier(.16, 1, .3, 1),
      bottom .46s cubic-bezier(.16, 1, .3, 1),
      width .46s cubic-bezier(.16, 1, .3, 1),
      height .46s cubic-bezier(.16, 1, .3, 1);
}

#cp-card.on .cp-avwrap {
   left: 14px;
   bottom: 12px;
}

#cp-card.on .cp-avwrap::after {
   animation: none;
   opacity: 0;
   transition: opacity .25s ease;
}

#cp-ring {
   position: fixed;
   left: 32px;
   bottom: 28px;
   z-index: 3003;
   width: 62px;
   height: 62px;
   border-radius: 50%;
   border: 2.5px solid var(--accent, #63997A);
   box-sizing: border-box;
   pointer-events: none;
   animation: ringBreath 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
   transition: left .46s cubic-bezier(.16, 1, .3, 1),
      bottom .46s cubic-bezier(.16, 1, .3, 1),
      width .46s cubic-bezier(.16, 1, .3, 1),
      height .46s cubic-bezier(.16, 1, .3, 1),
      border-radius .46s cubic-bezier(.16, 1, .3, 1);
}

#cp-ring.on {
   left: 26px;
   bottom: 22px;
   width: 226px;
   height: 216px;
   border-radius: 16px;
   animation: none;
}

.cp-avatar {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   overflow: hidden;
   background: #16130E;
}

.cp-avatar img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.cp-init {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font-family: var(--ui-semi);
   font-size: 12px;
   letter-spacing: .06em;
   color: #FFFFFF;
}

@keyframes ringBreath {

   0%,
   100% {
      transform: scale(1);
      opacity: .9;
   }

   35% {
      transform: scale(1.11);
      opacity: .55;
   }
}

@keyframes avBreath {

   0%,
   100% {
      transform: scale(1);
   }

   35% {
      transform: scale(1.045);
   }
}

.cp-me-label {
   position: absolute;
   left: 74px;
   bottom: 12px;
   z-index: 2;
   height: 48px;
   display: flex;
   align-items: center;
   font-family: var(--ui-med);
   font-size: 10px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(22, 19, 14, 0.5);
   white-space: nowrap;
   opacity: 0;
   transform: translateX(-6px);
   transition: opacity .2s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

#cp-card.on .cp-me-label {
   opacity: 1;
   transform: none;
   transition-delay: .2s;
}

.cp-body {
   position: absolute;
   left: 16px;
   right: 16px;
   top: 5px;
   opacity: 0;
   transform: translateY(4px);
   transition: opacity .2s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
   pointer-events: none;
}

#cp-card.on .cp-body {
   opacity: 1;
   transform: none;
   pointer-events: auto;
   transition-delay: .18s;
}

.cp-kicker {
   font-family: var(--ui-med);
   font-size: 8.5px;
   line-height: 1.45;
   margin: 0;
   padding: 0;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: rgba(22, 19, 14, 0.45);
   white-space: normal;
}

.cp-fullname {
   font-family: var(--ui-semi);
   font-size: 15.5px;
   font-weight: 500;
   color: #16130E;
   margin: 8px 0 9px;
   letter-spacing: -.01em;
   white-space: nowrap;
}

.cp-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   padding: 8px 0;
   text-decoration: none;
   border-top: 1px solid rgba(22, 19, 14, 0.08);
   white-space: nowrap;
}

.cp-row:first-of-type {
   border-top: none;
}

.cp-row span {
   font-family: var(--ui-med);
   font-size: 11.5px;
   letter-spacing: .01em;
   color: rgba(22, 19, 14, 0.68);
   transition: color .25s ease;
}

.cp-row i {
   font-style: normal;
   font-size: 11px;
   color: rgba(22, 19, 14, 0.35);
   transition: color .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.cp-row:hover span,
.cp-row:hover i {
   color: var(--accent);
}

.cp-row:hover i {
   transform: translate(2px, -2px);
}

@media (max-width: 640px) {

   #cp-card.on {
      width: calc(46vw - 2.5px);
      height: 200px;
   }

   .cp-me-label {
      left: 68px;
      bottom: 12px;
      height: 44px;
   }

   .cp-body {
      top: 9px;
      left: 16px;
      right: 19px;
   }
}

.intro-skip {
   position: absolute;
   top: 26px;
   right: 30px;
   z-index: 2;
}

.intro-stage {
   position: relative;
   z-index: 1;
   width: min(78vw, 1180px);
   height: 66vh;
   border-radius: 6px;
   background: #F5F3EE;
   overflow: hidden;
}

.intro-scene {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 0 9vw;
   opacity: 0;
   transition: opacity .4s ease, transform .4s ease, filter .4s ease;
   pointer-events: none;
}

.intro-scene.on {
   opacity: 1;
   pointer-events: auto;
}

.intro-scene.fx0:not(.on) {
   transform: translateY(-16px);
   filter: blur(7px);
}

.intro-scene.fx1:not(.on) {
   transform: translateX(-30px);
   filter: blur(7px);
}

.intro-scene.fx2:not(.on) {
   transform: scale(.965);
   filter: blur(7px);
}

.intro-scene .intro-kick,
.intro-scene .intro-head,
.intro-scene .intro-body,
.intro-scene .intro-fig,
.intro-scene .intro-enter {
   opacity: 0;
}

@keyframes fxRise {
   from {
      opacity: 0;
      transform: translateY(26px);
      filter: blur(12px);
   }

   to {
      opacity: 1;
      filter: blur(0);
   }
}

@keyframes fxTrack {
   from {
      opacity: 0;
      letter-spacing: .5em;
   }

   to {
      opacity: 1;
   }
}

@keyframes fxSlideL {
   from {
      opacity: 0;
      transform: translateX(-44px);
      filter: blur(8px);
   }

   to {
      opacity: 1;
      transform: none;
      filter: blur(0);
   }
}

@keyframes fxSlideR {
   from {
      opacity: 0;
      transform: translateX(44px);
      filter: blur(8px);
   }

   to {
      opacity: 1;
      transform: none;
      filter: blur(0);
   }
}

@keyframes fxZoom {
   from {
      opacity: 0;
      transform: scale(.9);
      filter: blur(10px);
   }

   to {
      opacity: 1;
      filter: blur(0);
   }
}

.intro-scene.fx0.on .intro-kick {
   animation: fxTrack .8s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-scene.fx0.on .intro-head {
   animation: fxRise .75s cubic-bezier(.16, 1, .3, 1) .1s both;
}

.intro-scene.fx0.on .intro-body {
   animation: fxRise .75s cubic-bezier(.16, 1, .3, 1) .24s both;
}

.intro-scene.fx0.on .intro-fig,
.intro-scene.fx0.on .intro-enter {
   animation: fxRise .8s cubic-bezier(.16, 1, .3, 1) .38s both;
}

.intro-scene.fx1.on .intro-kick {
   animation: fxRise .6s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-scene.fx1.on .intro-head {
   animation: fxSlideL .8s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.intro-scene.fx1.on .intro-body {
   animation: fxSlideR .8s cubic-bezier(.16, 1, .3, 1) .22s both;
}

.intro-scene.fx1.on .intro-fig,
.intro-scene.fx1.on .intro-enter {
   animation: fxRise .8s cubic-bezier(.16, 1, .3, 1) .4s both;
}

.intro-scene.fx2.on .intro-kick {
   animation: fxTrack .7s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-scene.fx2.on .intro-head {
   animation: fxZoom .8s cubic-bezier(.16, 1, .3, 1) .06s both;
}

.intro-scene.fx2.on .intro-body {
   animation: fxZoom .8s cubic-bezier(.16, 1, .3, 1) .2s both;
}

.intro-scene.fx2.on .intro-fig,
.intro-scene.fx2.on .intro-enter {
   animation: fxZoom .85s cubic-bezier(.16, 1, .3, 1) .34s both;
}

.intro-kick {
   font-family: 'JetBrains Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: #8C8377;
}

.intro-scene.accent .intro-kick {
   color: #B0442F;
}

@media (min-width: 641px) {
   .intro-kick {
      font-size: 12.5px;
   }
}

.intro-head {
   font-family: var(--display);
   font-weight: 400;
   font-size: clamp(26px, 3.1vw, 44px);
   line-height: 1.04;
   letter-spacing: 0;
   color: #16130E;
   margin: 14px 0 12px;
}

.intro-body {
   font-family: var(--ui);
   font-size: 15.5px;
   line-height: 1.75;
   color: #5D564D;
   max-width: 62ch;
}

.intro-fig {
   margin: 22px 0 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}

.intro-fig img {
   max-height: 26vh;
   max-width: 50vw;
   border-radius: 4px;
   box-shadow: 0 14px 34px rgba(28, 20, 14, .16);
}

.intro-plate {
   display: none;
   width: 200px;
   height: 15vh;
   min-height: 96px;
   border-radius: 4px;
   place-items: center;
   font-family: var(--display);
   font-size: 34px;
   color: #FFFFFF;
}

.intro-cap {
   font-family: 'JetBrains Mono', monospace;
   font-size: 9px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #A79C8E;
}

.intro-enter {
   margin-top: 26px;
   font-family: var(--ui-semi);
   font-size: 13.5px;
   letter-spacing: .01em;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: 999px;
   padding: 14px 28px;
   cursor: pointer;
   transition: filter .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.intro-enter:hover {
   filter: brightness(1.12);
   transform: translateY(-1px);
}

.intro-rail {
   width: min(78vw, 1180px);
   margin-top: 18px;
   position: relative;
   z-index: 1;
}

.intro-blocks {
   display: flex;
   gap: 8px;
}

.intro-block {
   flex: 1;
   height: 64px;
   box-sizing: border-box;
   border: 3px solid transparent;
   border-radius: 10px;
   background: #F1EFE9;
   display: grid;
   place-items: center;
   cursor: pointer;
   font-family: var(--ui-med);
   font-size: 14.5px;
   font-weight: 600;
   color: #3A352E;
   transition: background .3s ease;
   user-select: none;
}

.intro-block.live {
   background: #E4E0D4;
}

.intro-block.split {
   background: transparent;
   border: 3px solid #FF3126;
}

.intro-block.split.live {
   background: rgba(255, 49, 38, 0.08);
}

.intro-head-marker {
   position: absolute;
   top: -9px;
   bottom: 0;
   width: 0;
   pointer-events: none;
   z-index: 2;
}

.intro-head-marker::before {
   content: '';
   position: absolute;
   top: 0;
   left: -6px;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 8px solid #16130E;
}

.intro-head-marker::after {
   content: '';
   position: absolute;
   top: 7px;
   bottom: 0;
   left: -0.75px;
   width: 1.5px;
   background: #16130E;
}

.intro-ticks {
   display: flex;
   justify-content: space-between;
   margin-top: 7px;
   padding: 0 2px;
}

.intro-ticks i {
   width: 1px;
   height: 6px;
   background: #C6BCAE;
}

@media (max-width: 640px) {
   #intro {
      justify-content: center;
      padding-top: 0;
   }

   .intro-stage {
      width: 92vw;
      height: 64vh;
   }

   .intro-rail {
      width: 92vw;
      margin-top: 14px;
   }

   .intro-scene {
      padding: 0 7vw;
   }

   .intro-head {
      font-size: clamp(30px, 9vw, 40px);
   }

   .intro-body {
      font-size: 12.5px;
      line-height: 1.6;
   }

   .intro-blocks {
      gap: 5px;
   }

   .intro-block {
      height: 48px;
      border-radius: 8px;
      font-size: 11.5px;
      white-space: nowrap;
   }

   .intro-skip {
      top: 14px;
      bottom: auto;
      right: 12px;
   }

   .intro-plate {
      width: 58vw;
      min-height: 84px;
      font-size: 32px;
   }

   .intro-fig img {
      max-width: 80vw;
      max-height: 22vh;
   }

   .intro-enter {
      padding: 13px 22px;
   }
}

@media (max-width: 640px) {

   .app {
      height: var(--vvh, 100vh) !important;
      bottom: auto !important;
   }

   .topbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      height: auto;
      row-gap: 4px;
      column-gap: 6px;
      top: 20px;
      left: 12px;
      right: 12px;
   }

   #cp-card,
   #cp-ring {
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
   }


   #cp-card .cp-avwrap {
      left: 5px !important;
      bottom: 5px !important;
      right: auto !important;
      top: auto !important;
      width: 30px !important;
      height: 30px !important;
   }

   #cp-card .cp-me-label {
      display: none !important;
   }

   #cp-card.on,
   #cp-ring.on {
      height: 157px !important;
      border-radius: 16px !important;
   }

   #cp-card.on {
      background: rgba(255, 255, 255, 0.62) !important;
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      backdrop-filter: blur(30px) saturate(180%);
   }

   #cp-card .cp-body {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }

   #cp-card .cp-body {
      position: absolute;
      left: 0;
      right: 0;
      top: auto !important;
      bottom: 0;
      padding: 17px 15px 19px 15px;
      pointer-events: none;
      width: calc(100vw - 24px);
      box-sizing: border-box;
   }

   #cp-card.on .cp-body {
      pointer-events: auto;
   }

   body:has(#intro.is-gone) #cp-card .cp-body {
      top: 0 !important;
      bottom: auto !important;
      padding: 32px 15px 0 15px;
   }

   #cp-card .cp-kicker {
      font-size: 8px;
      line-height: 1.5;
   }

   #cp-card .cp-fullname {
      margin-top: 3px;
   }

   #cp-card.on .cp-avwrap {
      left: 20px !important;
      bottom: 32px !important;
      top: auto !important;
      width: 42px !important;
      height: 42px !important;
   }

   #cp-card .cp-avatar {
      transition: transform .62s cubic-bezier(.16, 1, .3, 1) .06s;
   }

   #cp-card.on .cp-avatar {
      transform: scale(1.12);
   }

   #cp-card .cp-kicker,
   #cp-card .cp-fullname,
   #cp-card .cp-row {
      padding-left: 78px;
   }

   #cp-card .cp-row {
      max-width: 262px;
      box-sizing: border-box;
      gap: 10px;
      justify-content: flex-start;
      position: relative;
   }

   #cp-card .cp-row i {
      margin-left: auto;
   }

   #cp-card .cp-row {
      border-top: none !important;
   }

   #cp-card .cp-row+.cp-row::before {
      content: '';
      position: absolute;
      left: 78px;
      right: 0;
      top: 0;
      height: 1px;
      background: rgba(22, 19, 14, 0.10);
   }

   #cp-card .cp-kicker,
   #cp-card .cp-fullname,
   #cp-card .cp-row {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .28s ease, transform .38s var(--ease);
   }

   #cp-card.on .cp-kicker {
      opacity: 1;
      transform: none;
      transition-delay: .14s, .14s;
   }

   #cp-card.on .cp-fullname {
      opacity: 1;
      transform: none;
      transition-delay: .21s, .21s;
   }

   #cp-card.on .cp-row:nth-of-type(1) {
      opacity: 1;
      transform: none;
      transition-delay: .28s, .28s;
   }

   #cp-card.on .cp-row:nth-of-type(2) {
      opacity: 1;
      transform: none;
      transition-delay: .35s, .35s;
   }

   body.credit-closing #cp-card .cp-kicker,
   body.credit-closing #cp-card .cp-fullname,
   body.credit-closing #cp-card .cp-row {
      transition: opacity .30s cubic-bezier(.4, 0, .7, 1),
         transform .34s cubic-bezier(.4, 0, .7, 1) !important;
   }

   body.credit-closing #cp-card .cp-row:nth-of-type(2) {
      transition-delay: 0s, 0s !important;
   }

   body.credit-closing #cp-card .cp-row:nth-of-type(1) {
      transition-delay: .05s, .05s !important;
   }

   body.credit-closing #cp-card .cp-fullname {
      transition-delay: .10s, .10s !important;
   }

   body.credit-closing #cp-card .cp-kicker {
      transition-delay: .15s, .15s !important;
   }

   body.credit-closing #cp-card {
      background: rgba(255, 255, 255, 0.62) !important;
      -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
      backdrop-filter: blur(30px) saturate(180%) !important;
   }

   #cp-scrim {
      position: fixed;
      inset: 0;
      z-index: 4050;
      background: rgba(22, 19, 14, 0.20);
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease;
      -webkit-backdrop-filter: blur(14px) saturate(120%);
      backdrop-filter: blur(14px) saturate(120%);
   }

   body.credit-open #cp-scrim {
      opacity: 1;
      pointer-events: auto;
   }

   body:has(#intro.is-gone) #cp-card .cp-avwrap {
      left: 5px !important;
      top: 5px !important;
      bottom: auto !important;
      right: auto !important;
   }

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


   #cp-card,
   #cp-ring {
      left: 12px !important;
      right: auto !important;
      bottom: auto !important;
      top: calc(var(--railbot, calc(var(--vvh, 100vh) * 0.865)) + 16px) !important;
   }

   #cp-card.on,
   #cp-ring.on {
      left: 12px !important;
      right: auto !important;
      bottom: auto !important;
      top: calc(var(--railbot, calc(var(--vvh, 100vh) * 0.865)) + 16px - 128px) !important;
      width: calc(100vw - 24px) !important;
      max-width: none;
   }

   body:has(#intro.is-gone) #cp-card,
   body:has(#intro.is-gone) #cp-ring {
      top: 20px !important;
      bottom: auto !important;
      left: 12px !important;
      right: auto !important;
   }

   body:has(#intro.is-gone) #cp-card.on,
   body:has(#intro.is-gone) #cp-ring.on {
      top: 20px !important;
      bottom: auto !important;
      left: 12px !important;
      right: auto !important;
      width: calc(100vw - 24px) !important;
      max-width: none;
   }

   body.credit-closing #cp-card,
   body.credit-closing #cp-ring {
      transition: width .58s cubic-bezier(.45, 0, .2, 1) .45s,
         height .58s cubic-bezier(.45, 0, .2, 1) .45s,
         border-radius .58s cubic-bezier(.45, 0, .2, 1) .45s,
         top .58s cubic-bezier(.45, 0, .2, 1) .45s,
         left .58s cubic-bezier(.45, 0, .2, 1) .45s,
         background 0s !important;
   }

   body.credit-closing #cp-card .cp-avatar {
      transition: transform .58s cubic-bezier(.45, 0, .2, 1) .45s;
   }

   body.credit-closing #cp-ring {
      animation: none !important;
   }

   body.credit-closing #cp-card .cp-avwrap {
      transition: left .58s cubic-bezier(.45, 0, .2, 1) .45s,
         top .58s cubic-bezier(.45, 0, .2, 1) .45s,
         bottom .58s cubic-bezier(.45, 0, .2, 1) .45s,
         width .58s cubic-bezier(.45, 0, .2, 1) .45s,
         height .58s cubic-bezier(.45, 0, .2, 1) .45s !important;
   }

   body.credit-closing #cp-scrim {
      transition: opacity .58s ease .45s !important;
   }


   #cp-card,
   #cp-ring {
      transition: top .46s cubic-bezier(.16, 1, .3, 1),
         left .46s cubic-bezier(.16, 1, .3, 1),
         width .46s cubic-bezier(.16, 1, .3, 1),
         height .46s cubic-bezier(.16, 1, .3, 1),
         background .3s ease,
         border-radius .46s cubic-bezier(.16, 1, .3, 1);
   }

   .searchwrap {
      margin-left: 0 !important;
   }

   .histaxis-end--lo {
      transform: none;
   }

   .bar-break {
      display: block;
      flex: 0 0 100%;
      height: 0;
      margin: 0;
      order: 1;
   }

   .brandmark {
      display: none;
   }

   .brandmark .kicker {
      font-size: 8px;
      letter-spacing: .09em;
   }

   .brandmark .kicker {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   #intro-replay {
      flex: 0 0 auto;
      order: -2;
      margin-left: 46px;
   }

   #tour-btn {
      flex: 0 0 auto;
      order: -1;
   }

   .segment {
      flex: 1 1 auto;
      min-width: 0;
      order: 0;
      margin-left: 0;
      background: transparent;
   }

   .segment .segbtn {
      flex: 1 1 0;
      min-width: 0;
   }

   .topright {
      flex: 0 0 168px;
      width: 168px;
      order: 2;
   }

   .searchwrap {
      flex: 1 1 auto;
      margin-left: 0;
      min-width: 0;
      order: 3;
   }

   .searchfield {
      padding: 0 13px;
   }

   .searchfield input {
      font-size: 16px !important;
   }

   .searchfield input::placeholder {
      font-size: 9px;
      letter-spacing: .11em;
   }

   .storybtn {
      padding: 0 11px;
   }

   .storybtn .btn-tx {
      display: none;
   }

   .storybtn .btn-ic {
      font-size: 15px;
   }

   .seg-long {
      display: inline;
   }

   .seg-short {
      display: none;
   }

   .segbtn {
      padding: 0 9px;
      flex: 1 1 50%;
      width: 50%;
   }

   .segbtn::after {
      content: attr(data-short);
   }

   button.dash-dropdown.metricbox {
      padding: 0 10px !important;
   }

   #hero-title {
      font-size: 30px;
      line-height: 1.02;
   }

   #hero-sub {
      height: 20px;
      align-items: center;
      overflow: hidden;
   }

   .scoretile {
      min-height: 84px;
      padding: 11px 13px;
      border-radius: 14px;
      margin: 0 0 8px 0;
   }

   .scoretile-in {
      gap: 10px;
   }

   .scoretile-num {
      font-size: 32px;
   }

   .scoretile-cap {
      font-size: 8.5px;
      letter-spacing: .11em;
   }

   .scoretile-pill {
      font-size: 8.5px;
   }

   .scorepair {
      gap: 8px;
   }

   .herokpis {
      padding: 10px 12px;
      border-radius: 14px;
   }

   .kpiline {
      padding: 4px 0;
   }

   .kpivals {
      font-size: 12.5px;
   }

   .herokpis .kicker {
      margin-bottom: 6px !important;
   }

   #herokpis .kpiline.kpiline--strip {
      display: block;
   }

   #herokpis .kpiline {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 7px 0;
   }

   #herokpis .kpiline:last-child {
      border-bottom: none;
   }

   #herokpis .kpiline>.kicker {
      flex: 1;
   }

   #herokpis .kpivals {
      gap: 7px;
      font-size: 15px;
   }

   #herokpis .kpivals .num {
      font-size: 15px;
      font-weight: 600;
   }

   #herokpis .kpivals .kicker {
      font-size: 8px;
   }

   #herokpis .kpikey {
      padding: 13px 0 2px;
      margin-right: -8px;
   }

   #herokpis .sheet-body>.kicker {
      display: none;
   }

   .profile-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      height: 42px;
      flex: 0 0 42px;
      margin-top: 10px;
      border-radius: 12px;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: #5E574D;
      background: rgba(255, 255, 255, 0.42);
      border: 1px solid rgba(22, 19, 14, 0.22);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      backdrop-filter: blur(18px) saturate(160%);
      transition: background .22s var(--ease), color .22s var(--ease),
         transform .18s var(--ease);
   }

   .profile-cta::after {
      content: '↑';
      font-size: 11px;
   }

   .profile-cta:active {
      transform: scale(.985);
      color: #16130E;
      background: rgba(255, 255, 255, 0.68);
   }

   .leftcol {
      left: 12px;
      right: 12px;
      width: auto;
      top: 128px;
      bottom: 52%;
      max-height: none;
      transform: none;
      overflow-y: auto;
   }

   .leftcol.is-scrollable {
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px),
            transparent 100%);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 26px),
            transparent 100%);
   }

   .leftcol>*+* {
      margin-top: 8px;
   }

   .leftcol>#score-panel {
      margin-top: 14px;
   }

   body.dash-enter .leftcol {
      animation-name: dashIn;
   }

   .dotfield {
      left: 50% !important;
      top: auto !important;
      bottom: 1.5%;
      transform: translateX(calc(-50% - 1.2%)) !important;
      width: 97vw !important;
      height: 46% !important;
   }

   .ssq,
   .ghostsq {
      width: 4.9vw !important;
      height: 4.9vw !important;
   }

   .ssq {
      border-color: transparent !important;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(28, 20, 14, 0.10);
   }

   .ghostsq {
      border-radius: 4px;
   }

   .ssq .sdot-abbr {
      font-size: 7.5px;
   }

   .ghost-abbr {
      font-size: 7.5px;
   }

   .ssq,
   .ghostsq,
   .profile-cta,
   .storybtn,
   .segbtn,
   button.dash-dropdown.metricbox {
      touch-action: manipulation;
   }

   #linktag {
      gap: 8px;
      padding: 8px 10px;
      border-radius: 8px;
   }

   .lt-cell b {
      font-size: 14px;
   }

   .lt-cell i {
      font-size: 6.5px;
      letter-spacing: .12em;
   }

   .lt-arrow {
      font-size: 11px;
   }

   .lt-delta {
      font-size: 8.5px;
      padding: 3px 5px;
   }

   .lt-same {
      font-size: 7.5px;
      letter-spacing: .12em;
   }

   .histaxis-n {
      font-size: 8px;
   }

   .histaxis-end {
      font-size: 8px;
      bottom: 1.8%;
   }

   .histaxis-end--lo {
      left: 5.2% !important;
      transform: none !important;
   }

   .histaxis-end:not(.histaxis-end--lo) {
      left: auto !important;
      right: 2.8% !important;
      transform: none !important;
   }

   .histaxis-end--lo {
      transform: translateX(72px);
   }


   #card-wrap {
      opacity: 1 !important;
      grid-template-rows: 1fr !important;
      margin-top: 0 !important;
   }

   #card-wrap>.reveal-inner {
      overflow: visible;
   }

   .statecard,
   #herokpis {
      box-sizing: border-box !important;
      position: fixed;
      left: 0 !important;
      right: 0 !important;
      top: 0 !important;
      bottom: auto !important;
      width: auto !important;
      height: 100% !important;
      max-height: none !important;
      z-index: 3005;
      border-radius: 22px 22px 0 0;
      padding: 20px 6px 0 18px !important;
      animation: none !important;
      background: rgba(255, 255, 255, 0.58);
      -webkit-backdrop-filter: blur(44px) saturate(200%);
      backdrop-filter: blur(44px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-bottom: none;
      box-shadow: 0 -18px 50px rgba(28, 20, 14, 0);
      transform: translateY(var(--sheet-y, 120vh));
      transition: transform .52s cubic-bezier(.22, 1, .28, 1),
         height .52s cubic-bezier(.22, 1, .28, 1),
         box-shadow .52s cubic-bezier(.22, 1, .28, 1);
   }

   .statecard.is-drag,
   #herokpis.is-drag {
      transition: none !important;
   }

   .statecard.is-folding,
   #herokpis.is-folding {
      transition: transform .95s cubic-bezier(.7, 0, .4, 1),
         height .95s cubic-bezier(.7, 0, .4, 1);
   }

   #herokpis {
      border-radius: 22px 22px 0 0 !important;
      padding: 20px 6px 0 18px !important;
      display: flex !important;
      flex-direction: column;
   }

   #kpis-wrap {
      opacity: 1 !important;
      grid-template-rows: 1fr !important;
      margin-top: 0 !important;
   }

   #kpis-wrap>.reveal-inner {
      overflow: visible;
   }

   .statecard::before,
   #herokpis::before {
      content: '';
      position: absolute;
      top: 9px;
      left: 50%;
      transform: translateX(-50%);
      width: 38px;
      height: 4px;
      border-radius: 2px;
      background: rgba(22, 19, 14, 0.20);
      transition: background .2s ease;
   }

   .statecard.is-drag::before,
   #herokpis.is-drag::before {
      background: rgba(22, 19, 14, 0.34);
   }

   .statecard-head,
   .sheet-head {
      touch-action: none;
      cursor: grab;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 16px;
      margin-bottom: 12px;
   }

   .statecard.is-drag .statecard-head {
      cursor: grabbing;
   }

   .sheet-state {
      display: none;
   }

   .statecard-body,
   .sheet-body {
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 14px;
      margin-right: 2px;
      -webkit-overflow-scrolling: touch;
      transition: max-height .5s cubic-bezier(.22, 1, .28, 1);
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
   }

   body.sheet-live .app {
      z-index: 4100;
   }

   body.sheet-live .leftcol {
      z-index: auto;
   }

   body.sheet-live .leftcol {
      -webkit-mask-image: none !important;
      mask-image: none !important;
   }

   body.sheet-deep .statecard,
   body.sheet-deep #herokpis {
      background: rgba(255, 255, 255, 0.80) !important;
   }

   body.sheet-live #linklayer,
   body.sheet-live #linktag {
      opacity: 0 !important;
      transition: opacity .3s ease;
   }

   #sheet-scrim {
      position: fixed;
      inset: 0;
      z-index: 3004;
      margin: 0 !important;
      background: rgba(22, 19, 14, 0.34);
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease;
   }

   #sheet-scrim.is-drag {
      transition: none;
   }

   body.sheet-open #cp-card {
      opacity: 1;
   }

   body.sheet-open #cp-ring {
      opacity: 1;
   }

   body.sheet-live #cp-card,
   body.sheet-live #cp-card *,
   body.sheet-live #cp-ring {
      pointer-events: none !important;
   }

   #cp-card {
      pointer-events: auto !important;
      z-index: 3002 !important;
   }

   #cp-ring {
      z-index: 3003 !important;
   }

   body.credit-open #cp-card,
   body.credit-closing #cp-card {
      z-index: 4060 !important;
   }

   body.credit-open #cp-ring,
   body.credit-closing #cp-ring {
      z-index: 4070 !important;
   }
}

@media (max-width: 640px) and (max-height: 720px) {
   #hero-title {
      font-size: 26px;
   }

   .scoretile {
      min-height: 74px;
      padding: 10px 12px;
   }

   .scoretile-num {
      font-size: 28px;
   }

   .scoretile-in {
      gap: 7px;
   }

   .leftcol {
      bottom: 48%;
   }

   .dotfield {
      height: 42% !important;
   }
}

@media (max-width: 360px) {
   .topright {
      flex: 0 0 104px;
      width: 104px;
   }

   .segbtn {
      padding: 0 7px;
   }

   .brandmark {
      padding: 0 10px;
   }

   .brandmark .kicker {
      font-size: 8px;
      letter-spacing: .10em;
   }

   .searchwrap {
      flex: 1 1 76px;
   }
}

@keyframes dashIn {
   from {
      opacity: 0;
      transform: scale(.988) translateY(10px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes dashInCol {
   from {
      opacity: 0;
      transform: translateY(-50%) scale(.988) translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(-50%);
   }
}

body.dash-enter .topbar {
   animation: dashIn .7s cubic-bezier(.16, 1, .3, 1) both;
}

@media (min-width: 641px) {
   body.dash-enter .leftcol {
      animation: dashInCol .8s cubic-bezier(.16, 1, .3, 1) .08s both;
   }
}

@media (max-width: 640px) {
   body.dash-enter .leftcol {
      animation: dashIn .8s cubic-bezier(.16, 1, .3, 1) .08s both;
   }
}

body.dash-enter .dotfield {
   animation: fieldFade .35s ease both;
}

body.dash-enter .ssq {
   animation: fieldSettle .8s var(--ease) both;
   animation-delay: var(--sd, 0.1s);
}

body.dash-enter .ghostsq {
   animation: ghostIn .5s ease .5s both;
}

body.dash-enter .histaxis {
   animation: fadeUp .5s ease .55s both;
}

@keyframes ghostIn {
   from {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 10px));
   }

   to {
      opacity: 1;
      transform: translate(-50%, -50%);
   }
}

@keyframes fieldFade {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes fieldSettle {
   from {
      opacity: 0;
      filter: blur(5px);
      transform: translate(calc(-50% + var(--sx, 0px)),
            calc(-50% + var(--sy, 0px))) rotate(var(--sr, 0deg)) scale(0.85);
   }

   30% {
      opacity: 1;
   }

   to {
      opacity: 1;
      filter: blur(0);
      transform: translate(-50%, -50%);
   }
}


#tourcard.wide {
   width: min(600px, 92vw);
}

.ssq.recolor {
   animation: metricPulse 0.5s var(--ease) both;
   animation-delay: var(--rd, 0ms);
}

@keyframes metricPulse {
   0% {
      filter: saturate(0.15) brightness(1.12);
      transform: translate(-50%, -50%) scale(0.9);
   }

   100% {
      filter: none;
      transform: translate(-50%, -50%) scale(1);
   }
}

body.tour-lock #dotfield .ssq:not(.tour-free) {
   pointer-events: none;
}

body.tour-lock .ghostsq {
   pointer-events: none !important;
}

.tour-inner {
   animation: tourCardIn .45s var(--ease) both;
}

@keyframes tourCardIn {
   from {
      opacity: 0;
      transform: translateY(8px);
      filter: blur(6px);
   }

   to {
      opacity: 1;
      transform: none;
      filter: blur(0);
   }
}

.tour-wait {
   display: block;
   font-family: var(--mono);
   font-size: 7.5px;
   letter-spacing: .14em;
   color: var(--accent, #63997A);
   text-transform: uppercase;
   padding: 9px 0 0;
   animation: waitPulse 1.6s ease-in-out infinite;
}

@keyframes waitPulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: .45;
   }
}

#tourcard {
   position: fixed;
   z-index: 4001;
   width: min(400px, 92vw);
   box-sizing: border-box;
   border-radius: 14px;
   padding: 14px 16px;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.6);
   -webkit-backdrop-filter: blur(18px) saturate(180%);
   backdrop-filter: blur(18px) saturate(180%);
   box-shadow: 0 14px 40px rgba(28, 20, 14, 0.20);
   transition: left .6s var(--ease), top .6s var(--ease),
      width .6s var(--ease), opacity .35s ease;
}

#tourcard.out {
   opacity: 0;
   pointer-events: none;
}

.tour-step {
   font-family: var(--mono);
   font-size: 8.5px;
   letter-spacing: .14em;
   color: var(--accent);
   margin-bottom: 6px;
}

.tour-text {
   font-size: 12.5px;
   line-height: 1.5;
   color: #3A352E;
   min-height: 38px;
}

.tour-btns {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
}

.tour-skip {
   font-family: var(--mono);
   font-size: 8px;
   letter-spacing: .12em;
   color: #A79C8E;
   text-transform: uppercase;
   cursor: pointer;
   background: none;
   border: none;
   padding: 4px 0;
}

.tour-skip:hover {
   color: #5E574D;
}

.tour-dots {
   display: flex;
   gap: 5px;
}

.tour-dots i {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgba(22, 19, 14, 0.15);
   transition: background .3s;
}

.tour-dots i.on {
   background: var(--accent);
}

.tour-next {
   font-family: var(--mono);
   font-size: 8.5px;
   letter-spacing: .12em;
   color: #fff;
   background: var(--accent);
   border: none;
   cursor: pointer;
   border-radius: 999px;
   padding: 7px 15px;
   text-transform: uppercase;
   transition: filter .25s ease;
}

.tour-next:hover {
   filter: brightness(1.08);
}

.storybtn,
.intro-skip {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 9px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #7C746A;
   background: transparent;
   border: 1px solid rgba(22, 19, 14, 0.22);
   border-radius: var(--btn-radius);
   height: 40px;
   padding: 0 16px;
   cursor: pointer;
   transition: color .25s ease, border-color .25s ease;
}

.storybtn:hover,
.intro-skip:hover {
   color: #16130E;
   border-color: #C6BCAE;
}

@media (min-width: 641px) {
   .storybtn {
      will-change: transform;
      transition: color .25s ease, border-color .25s ease,
         transform .46s cubic-bezier(.16, 1, .3, 1);
   }

   .storybtn:hover {
      transform: scale(1.08);
   }

   .storybtn:active {
      transform: scale(.95);
      transition-duration: .25s, .25s, .16s;
   }

   .expandbtn {
      will-change: transform;
      transition: color .25s ease, border-color .25s ease,
         background .25s ease, transform .46s cubic-bezier(.16, 1, .3, 1);
   }

   .expandbtn:hover {
      transform: scale(1.08);
      border-color: #C6BCAE !important;
      color: #16130E !important;
   }

   .expandbtn:active {
      transform: scale(.95);
      transition-duration: .25s, .25s, .25s, .16s;
   }

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

.btn-ic {
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 0;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 14px;
   height: 14px;
}
@media (min-width: 641px) {

   #cp-ring {
      transition: left .46s cubic-bezier(.16, 1, .3, 1),
         bottom .46s cubic-bezier(.16, 1, .3, 1),
         width .46s cubic-bezier(.16, 1, .3, 1),
         height .46s cubic-bezier(.16, 1, .3, 1),
         border-radius .46s cubic-bezier(.16, 1, .3, 1),
         opacity .22s ease;
   }

   body:has(#intro:not(.is-gone)) #cp-ring.on {
      opacity: 0;
   }

   #cp-card.on,
   #cp-ring.on {
      width: var(--cp-open-w, 356px);
      height: 157px;
      border-radius: 16px;
   }

   #cp-card.on {
      background: rgba(255, 255, 255, 0.62);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      backdrop-filter: blur(30px) saturate(180%);
   }

   #cp-card .cp-body {
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 0;
      width: var(--cp-open-w, 356px);
      box-sizing: border-box;
      padding: 17px 15px 19px 15px;
      pointer-events: none;
   }

   #cp-card.on .cp-body {
      pointer-events: auto;
   }

   #cp-card .cp-kicker,
   #cp-card .cp-fullname,
   #cp-card .cp-row {
      padding-left: 78px;
   }

   #cp-card .cp-kicker {
      font-family: var(--ui-med);
      font-size: 9.5px;
      line-height: 1.5;
      letter-spacing: .01em;
      text-transform: none;
   }

   .hglyph {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 600;
   }

   #cp-card .cp-fullname {
      margin-top: 3px;
   }

   #cp-card .cp-row {
      max-width: 262px;
      box-sizing: border-box;
      gap: 10px;
      justify-content: flex-start;
      position: relative;
      border-top: none;
   }

   #cp-card .cp-row i {
      margin-left: auto;
   }

   #cp-card .cp-row+.cp-row::before {
      content: '';
      position: absolute;
      left: 78px;
      right: 0;
      top: 0;
      height: 1px;
      background: rgba(22, 19, 14, 0.10);
   }

   #cp-card.on .cp-avwrap {
      left: 20px;
      bottom: 32px;
      top: auto;
      width: 42px;
      height: 42px;
   }

   #cp-card .cp-avatar {
      transition: transform .62s cubic-bezier(.16, 1, .3, 1) .06s;
   }

   #cp-card.on .cp-avatar {
      transform: scale(1.12);
   }

   #cp-card.on .cp-me-label {
      opacity: 0;
   }
}

@media (min-width: 641px) {

   #cp-card .cp-body {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }

   #cp-card .cp-kicker,
   #cp-card .cp-fullname,
   #cp-card .cp-row {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .28s ease, transform .38s var(--ease);
   }

   #cp-card.on .cp-kicker {
      opacity: 1;
      transform: none;
      transition-delay: .14s, .14s;
   }

   #cp-card.on .cp-fullname {
      opacity: 1;
      transform: none;
      transition-delay: .21s, .21s;
   }

   #cp-card.on .cp-row:nth-of-type(1) {
      opacity: 1;
      transform: none;
      transition-delay: .28s, .28s;
   }

   #cp-card.on .cp-row:nth-of-type(2) {
      opacity: 1;
      transform: none;
      transition-delay: .35s, .35s;
   }

   body.credit-closing #cp-card .cp-kicker,
   body.credit-closing #cp-card .cp-fullname,
   body.credit-closing #cp-card .cp-row {
      transition: opacity .30s cubic-bezier(.4, 0, .7, 1),
         transform .34s cubic-bezier(.4, 0, .7, 1) !important;
   }

   body.credit-closing #cp-card .cp-row:nth-of-type(2) {
      transition-delay: 0s, 0s !important;
   }

   body.credit-closing #cp-card .cp-row:nth-of-type(1) {
      transition-delay: .05s, .05s !important;
   }

   body.credit-closing #cp-card .cp-fullname {
      transition-delay: .10s, .10s !important;
   }

   body.credit-closing #cp-card .cp-kicker {
      transition-delay: .15s, .15s !important;
   }

   body.credit-closing #cp-card {
      background: rgba(255, 255, 255, 0.62) !important;
      -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
      backdrop-filter: blur(30px) saturate(180%) !important;
   }

   body.credit-closing #cp-card,
   body.credit-closing #cp-ring {
      transition: width .58s cubic-bezier(.45, 0, .2, 1) .45s,
         height .58s cubic-bezier(.45, 0, .2, 1) .45s,
         border-radius .58s cubic-bezier(.45, 0, .2, 1) .45s,
         left .58s cubic-bezier(.45, 0, .2, 1) .45s,
         bottom .58s cubic-bezier(.45, 0, .2, 1) .45s,
         opacity .34s ease .45s,
         background 0s !important;
   }

   body.credit-closing #cp-card .cp-avwrap {
      transition: left .58s cubic-bezier(.45, 0, .2, 1) .45s,
         top .58s cubic-bezier(.45, 0, .2, 1) .45s,
         bottom .58s cubic-bezier(.45, 0, .2, 1) .45s,
         width .58s cubic-bezier(.45, 0, .2, 1) .45s,
         height .58s cubic-bezier(.45, 0, .2, 1) .45s !important;
   }

   body.credit-closing #cp-card .cp-avatar {
      transition: transform .58s cubic-bezier(.45, 0, .2, 1) .45s !important;
   }

   body.credit-closing #cp-ring {
      animation: none !important;
   }
}


@keyframes menuGrow {
   from {
      grid-template-rows: 0fr;
      opacity: 0;
   }

   8% {
      opacity: 1;
   }

   0% { background-color: #F2F0E9; }
   40% { background-color: #F2F0E9; }

   to {
      grid-template-rows: 1fr;
      opacity: 1;
      background-color: rgba(255, 255, 255, 0.42);
   }
}

.searchresults {
   grid-template-rows: 1fr;
   padding: 0;
   animation: menuGrow .46s cubic-bezier(.30, 0, .22, 1) both;
}

.menurows {
   overflow: hidden;
   min-height: 0;
   padding: 6px;
}

.dash-dropdown-content {
   display: grid !important;
   grid-template-rows: 1fr;
   padding: 0 !important;
   max-height: none !important;
   overflow: visible !important;
   animation: menuGrow .46s cubic-bezier(.30, 0, .22, 1) both;
}

.dash-dropdown-content>.dash-options-list {
   overflow: hidden;
   overscroll-behavior: contain;
   min-height: 0;
   max-height: 46vh;
   padding: 6px !important;
}

.dash-dropdown-content.is-open>.dash-options-list {
   overflow-y: auto;
}

.dash-options-list-option {
   animation: slideRow .32s var(--ease) both;
}

.dash-options-list-option:nth-child(1)  { animation-delay: 0s }
.dash-options-list-option:nth-child(2)  { animation-delay: .028s }
.dash-options-list-option:nth-child(3)  { animation-delay: .056s }
.dash-options-list-option:nth-child(4)  { animation-delay: .084s }
.dash-options-list-option:nth-child(5)  { animation-delay: .112s }
.dash-options-list-option:nth-child(6)  { animation-delay: .140s }
.dash-options-list-option:nth-child(7)  { animation-delay: .168s }
.dash-options-list-option:nth-child(8)  { animation-delay: .196s }
.dash-options-list-option:nth-child(9)  { animation-delay: .224s }
.dash-options-list-option:nth-child(10) { animation-delay: .252s }

.kpiline--strip {
   display: block;
}

.kpitop {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 12px;
}

.kptrack {
   margin: 7px 0 1px;
}

.is-rewind .mtrack,
.is-rewind .mavg,
.is-rewind .mdot,
.is-rewind .mseg {
   animation-name: none !important;
}

.kptrack .mseg {
   opacity: .38;
}

.mdot--hollow {
   background: #FBFAF8;
   box-shadow: 0 0 0 2px currentColor,
      0 0 0 5px color-mix(in srgb, currentColor 18%, transparent);
}

.kpikey {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px 18px;
   flex-wrap: wrap;
   padding: 11px 0 2px;
   font-family: var(--mono);
   font-size: 8.4px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #B6ADA1;
}

.kpikey-tiers {
   display: flex;
   align-items: center;
   gap: 14px;
}

.kpikey .kk {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   margin-right: 6px;
   vertical-align: -1px;
}

.kpikey .kk--prot {
   background: #4E8C74;
}

.kpikey .kk--rest {
   background: #C9553F;
}

.kpikey .kk--tick {
   width: 1.5px;
   height: 10px;
   border-radius: 0;
   background: rgba(22, 19, 14, .34);
   margin-right: 7px;
   vertical-align: -2px;
}

.kpikey-span {
   color: #CFC7BB;
}


  :root{
    --edge:38px;                      /* skip from the top, rail from the bottom */
    --mark:rgba(245,243,238,.45);     /* the family the rail ticks are drawn in */
    --span:min(92vw, max(74.5vw, 132.44vh));
    --stage-top:calc(var(--edge) + 40px);
    --stage-bot:calc(var(--edge) + 65px);
    --dotcore:#0C0A08;                /* what a "filled" chart dot is filled WITH */
  }
  #intro{background:#0C0A08}
  #promo-box{position:absolute;inset:0;z-index:0;overflow:hidden}
  #promo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    display:block;z-index:0;
    transform:scale(1.22);filter:blur(16px) saturate(.85);
    animation:promoSettle 2.6s cubic-bezier(.16,1,.3,1) both}
  @keyframes promoSettle{
    from{transform:scale(1.22);filter:blur(16px) saturate(.85)}
    to{transform:scale(1);filter:blur(0) saturate(1)}}
  #promo-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
    border-radius:inherit;
    background:linear-gradient(180deg,
      rgba(12,10,8,.52) 0%,rgba(12,10,8,.60) 38%,rgba(12,10,8,.80) 62%,
      rgba(12,10,8,.94) 84%,rgba(12,10,8,.98) 100%);
    animation:promoScrim 1.3s var(--ease) .55s both}
  @keyframes promoScrim{from{opacity:0}to{opacity:1}}
  #intro-stage{position:absolute;z-index:2;left:0;right:0;margin:0 auto;
    width:var(--span);top:var(--stage-top);bottom:var(--stage-bot);
    height:auto}
  #intro-ava{position:absolute;top:var(--edge);
    left:calc((100vw - var(--span)) / 2);z-index:3;
    width:40px;height:40px;border-radius:50%;padding:0;border:0;cursor:pointer;
    background:transparent;display:grid;place-items:center;
    animation:avaIn .62s cubic-bezier(.34,1.56,.64,1) .12s both}
  #intro-ava img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}
  #intro-ava::after{content:'';position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 1.5px rgba(245,243,238,.80);
    animation:avaRing .58s var(--ease) .12s both,
              avaBreath 3.4s ease-in-out .78s infinite}
  #intro-ava img{transition:transform .3s var(--ease)}
  #intro-ava::after{transition:box-shadow .25s var(--ease)}
  #intro-ava:hover::after{box-shadow:0 0 0 2px rgba(245,243,238,1);
    animation-play-state:paused;transform:scale(1.06)}
  #intro-ava:hover img{transform:scale(1.08)}
  #intro-ava:active img{transform:scale(.96)}
  #intro-ava:active::after{box-shadow:0 0 0 2.5px rgba(245,243,238,1);transform:scale(.99)}
  #intro-ava:focus-visible{outline:none}
  #intro-ava:focus-visible::after{box-shadow:0 0 0 2px rgba(245,243,238,1),
    0 0 0 5px rgba(245,243,238,.28)}
  @keyframes avaIn{from{opacity:0;transform:scale(.72)}
    55%{opacity:1}to{opacity:1;transform:none}}
  @keyframes avaRing{from{opacity:0;transform:scale(1.55)}to{opacity:1;transform:none}}
  @keyframes avaBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.09);opacity:.45}}
  @media (max-width:640px){
    #intro-ava{width:40px;height:40px}
    #intro-ava img{width:29px;height:29px}
    #intro-ava::after{inset:3px}
  }

  #intro-skip{position:absolute;top:var(--edge);left:auto;transform:none;
    right:calc((100vw - var(--span)) / 2);z-index:2;
    animation:skipIn .62s cubic-bezier(.34,1.56,.64,1) .12s both}
  @media (min-width:641px){
    #intro-skip{right:28px;height:46px;padding:0 20px;font-size:10px}
  }
  @keyframes skipIn{from{opacity:0;transform:translateX(14px)}
    55%{opacity:1}to{opacity:1}}
  .intro-rail{position:absolute;left:0;right:0;bottom:var(--edge);
    width:var(--span);margin:0 auto;z-index:2}
  @media (max-width:640px){:root{--edge:20px;--stage-bot:calc(var(--edge) + 61px)}}

  .intro-head{color:#F7F5F1}
  .intro-body{color:rgba(245,243,238,.82)}
  .intro-kick{color:rgba(245,243,238,.60)}
  .intro-scene.accent .intro-kick{color:#E08A72}
  .intro-cap{color:rgba(245,243,238,.50)}
  .intro-block{background:rgba(245,243,238,.10);color:rgba(245,243,238,.72)}
  .intro-block.live{background:rgba(245,243,238,.24);color:#F7F5F1}
  .intro-block.split{border-color:#D8412F}
  .intro-block.split.live{background:rgba(216,65,47,.12)}
  .intro-ticks i{background:rgba(245,243,238,.26)}
  .intro-head-marker::before{border-top-color:rgba(245,243,238,.78)}
  .intro-head-marker::after{background:rgba(245,243,238,.78)}
  .intro-skip{color:rgba(245,243,238,.72);border-color:rgba(245,243,238,.30)}
  .intro-skip:hover{color:#F7F5F1;border-color:rgba(245,243,238,.55)}

  .intro-skip,.intro-enter{position:relative;isolation:isolate}
  .intro-skip::before,.intro-enter::before{
    content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
    background:rgba(16,13,10,.40);
    -webkit-backdrop-filter:blur(18px) saturate(185%);
    backdrop-filter:blur(18px) saturate(185%);
    opacity:0;transition:opacity .28s ease}
  .intro-enter::before{
    background:linear-gradient(180deg,rgba(245,243,238,.13),rgba(245,243,238,.07))}
  @media (max-width:640px){
    .intro-enter::before{
      background:linear-gradient(180deg,rgba(245,243,238,.10),rgba(245,243,238,.05))}}
  .intro-skip:hover::before,.intro-enter:hover::before{opacity:1}
  .intro-enter{
    font-family:'JetBrains Mono',monospace!important;font-size:11px;
    letter-spacing:.15em;text-transform:uppercase;font-weight:500;
    color:#F7F5F1;background:transparent;
    border:1px solid rgba(245,243,238,.55);border-radius:var(--btn-radius,12px);
    padding:0 28px;height:52px;
    transition:background .28s var(--ease),color .28s var(--ease),
               border-color .28s var(--ease),transform .3s var(--ease)}
  .intro-enter:hover{
    background:transparent;color:#FFFFFF;border-color:rgba(245,243,238,.85);
    filter:none}

  @media (min-width:641px){
    .intro-head{font-size:70px;line-height:1.02;margin-bottom:46px}
    .intro-fig{margin-top:68px}
    .intro-fig.cta{margin-top:26px}
  }
  @media (max-width:640px){
    .intro-head{margin-bottom:22px}
    .intro-fig{margin-top:22px}
    .intro-fig.cta{margin-top:22px}
  }

  @media (min-width:641px){
    .intro-block{height:52px;font-size:13px}
    .intro-rail{width:min(var(--span), 920px)}

    #promo-scrim{background:linear-gradient(180deg,
      rgba(12,10,8,.50) 0%,
      rgba(12,10,8,.58) 32%,
      rgba(12,10,8,.86) 52%,
      rgba(12,10,8,.95) 76%,
      rgba(12,10,8,.99) 100%)}
  }

  @media (max-width:640px){.intro-head br{display:none}}

  .intro-chart{
    width:min(44vw,660px); height:26vh; min-height:150px;
    position:relative; margin:0 auto;
  }
  @media (min-width:641px){
    .intro-chart{width:min(47vw,700px); height:28vh; min-height:162px}
  }
  .intro-chart svg{width:100%;height:100%;display:block;overflow:visible}
  .intro-cap .nb{white-space:nowrap}
  .intro-cap .cap-row{display:flex;flex-wrap:wrap;justify-content:center;
    column-gap:22px;row-gap:0}
  .intro-fig.cta{display:grid;place-items:center}
  .intro-fig.cta{min-height:0!important}
  @media (max-width:640px){
    .intro-fig.cta .intro-enter{margin-top:0}
  }
  .intro-chart .ax{font-family:'JetBrains Mono',monospace;font-size:8.4px;
    letter-spacing:.12em;fill:#9A9186}
  .intro-chart .endlab{font-family:var(--ui);font-size:10.5px;opacity:0;
    transition:opacity .5s var(--ease) .45s}
  .lc.lit .endlab{opacity:1}
  .lc .dob{opacity:0;transition:opacity .5s var(--ease) .3s}
  .lc.lit .dob{opacity:.45}
  .lc .scrub,.lc .scrubdot{opacity:0;transition:opacity .2s ease}
  .lc.hov .scrub{opacity:.28}.lc.hov .scrubdot{opacity:1}

  .fc .sq{opacity:0;transform-origin:center;transform-box:fill-box;
    transition:fill .55s var(--ease),stroke .18s var(--ease);cursor:pointer}
  .fc.lit .sq{animation:sqSettle .8s var(--ease) both;animation-delay:var(--sd,.1s)}
  @keyframes sqSettle{
    from{opacity:0;filter:blur(5px);
      transform:translate(var(--sx,0px),var(--sy,0px)) rotate(var(--sr,0deg)) scale(.85)}
    30%{opacity:1}
    to{opacity:1;filter:blur(0);transform:none}
  }
  .fc .sq:hover{stroke:#16130E;stroke-width:1.4}

  .sl .st{stroke:#CFC8BC;stroke-width:.9;fill:none;stroke-linecap:round;
    transition:stroke .3s var(--ease),stroke-width .3s var(--ease),opacity .3s var(--ease)}
  .sl .st.mv{stroke-width:2.3;opacity:0}
  .sl.lit .st.mv{opacity:1}
  .sl.lit .st:not(.mv){stroke:#DCD6CB}
  .sl .st.hot{stroke:#16130E!important;stroke-width:2.7}
  .sl.probing .st:not(.hot){opacity:.42}
  .sl .hit{stroke:transparent;stroke-width:12;fill:none;cursor:pointer}
  .sl .mvlab,.sl .lead,.sl .mvdot{opacity:0;transition:opacity .5s var(--ease)}
  .sl.lit .mvlab,.sl.lit .mvdot{opacity:1}
  .sl.lit .lead{opacity:.5}
  .sl .mvlab{font-family:var(--ui);font-size:10.5px}
  .sl .lead{stroke-width:1;fill:none}

  .ev .ci,.ev .evdot{opacity:0;transform:scaleY(.2);transform-origin:center;
    transform-box:fill-box;transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .ev.lit .ci,.ev.lit .evdot{opacity:1;transform:none}
  .ev .band{opacity:0;transition:opacity .6s var(--ease) .2s}
  .ev.lit .band{opacity:.10}

  .sx-tip{
    position:fixed;z-index:4000;pointer-events:none;
    display:flex;align-items:center;gap:13px;
    padding:11px 16px;border-radius:8px;
    background:rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(18px) saturate(185%);
    backdrop-filter:blur(18px) saturate(185%);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 10px 28px rgba(28,20,14,.14),
               inset 0 1px 0 rgba(255,255,255,.6);
    opacity:0;transform:translateY(4px) scale(.97);
    transition:opacity .2s var(--ease),transform .26s var(--ease);
    white-space:nowrap}
  .sx-tip.on{opacity:1;transform:none}

  .sx-tip .lt-cell{display:flex;flex-direction:column;align-items:center;gap:5px;
    line-height:1;min-width:62px}
  .sx-tip .lt-wide{min-width:96px}
  .sx-tip.dense{gap:18px}
  .sx-tip.dense .lt-cell b{font-size:14px}
  .sx-tip.dense .lt-cell{min-width:52px}
  .sx-tip.dense .lt-wide{min-width:88px}
  .sx-tip .lt-cell b{font-family:var(--ui-semi);font-weight:600;font-size:17px;
    letter-spacing:-.01em;color:#16130E}
  .sx-tip .lt-cell i{font-family:var(--mono);font-style:normal;font-size:7.5px;
    letter-spacing:.15em;color:#A79C8E}
  .sx-tip .lt-arrow{font-family:var(--mono);font-size:15px;line-height:1;
    color:#16130E;opacity:.8}
  .sx-tip .lt-name{font-family:var(--ui-semi);font-weight:600;font-size:13px;
    letter-spacing:-.005em;color:#16130E;padding-right:2px}
  .sx-tip .lt-id{display:flex;flex-direction:column;align-items:flex-start;
    gap:6px;padding-right:2px}
  .sx-tip .lt-id b{font-family:var(--ui-semi);font-weight:600;font-size:13px;
    letter-spacing:-.005em;color:#16130E;line-height:1}
  .sx-tip .lt-id em{font-family:var(--mono);font-style:normal;font-size:7.5px;
    letter-spacing:.15em;line-height:1;border-radius:4px;padding:4px 6px;
    white-space:nowrap}
  .sx-tip .lt-id em.up{color:#A4402A;background:rgba(201,85,63,.12);
    box-shadow:inset 0 0 0 1px rgba(201,85,63,.26)}
  .sx-tip .lt-id em.down{color:#356B55;background:rgba(78,140,116,.14);
    box-shadow:inset 0 0 0 1px rgba(78,140,116,.30)}

  @media (max-width:640px){
    .intro-chart{width:80vw;height:22vh;min-height:132px}
    .intro-scene.wide-head .intro-head{margin-left:-22px;margin-right:-22px}

    .sx-tip{gap:8px;padding:8px 10px}
    .lc.hov .endlab{opacity:0;transition:opacity .16s var(--ease)}

    .sx-tip.dense{
      flex-direction:column;align-items:stretch;gap:0;
      padding:9px 11px 10px;min-width:150px}
    .sx-tip.dense .lt-cell{
      flex-direction:row;align-items:center;gap:8px;min-width:0;padding:3.5px 0}
    .sx-tip.dense .lt-head{
      padding:0 0 7px;margin-bottom:6px;
      border-bottom:1px solid rgba(22,19,14,.10)}
    .sx-tip.dense .lt-head b{
      font-family:var(--mono);font-weight:400;font-size:7px;letter-spacing:.18em;
      color:#A79C8E}
    .sx-tip.dense .lt-head i{display:none}
    .sx-tip.dense .lt-row::before{
      content:'';width:6px;height:6px;border-radius:50%;flex:none;
      background:var(--c,#A79C8E)}
    .sx-tip.dense .lt-row i{order:1;font-size:7px;letter-spacing:.13em;color:#8C8378}
    .sx-tip.dense .lt-row b{
      order:2;margin-left:auto;padding-left:10px;font-size:13px;
      font-variant-numeric:tabular-nums}
    .sx-tip.dense .lt-wide b{font-size:11px;color:#5E564C}
    .sx-tip .lt-id b{font-size:11.5px}
    .sx-tip .lt-id em{font-size:6.5px;padding:3px 5px;letter-spacing:.12em}
    .sx-tip .lt-cell{min-width:46px}
    .sx-tip .lt-cell b{font-size:14px}
    .sx-tip .lt-cell i{font-size:6.5px;letter-spacing:.12em}
    .sx-tip .lt-arrow{font-size:13px}
    .sx-tip .lt-name{font-size:11.5px}
  }

  .intro-stage{background:transparent}

  .sx-tip{
    background:rgba(16,13,10,.40);
    border:0;
    box-shadow:0 18px 44px rgba(0,0,0,.38)}
  .sx-tip .lt-cell b,.sx-tip .lt-id b,.sx-tip .lt-name,.sx-tip .lt-arrow{color:#F7F5F1}
  .sx-tip .lt-cell i{color:rgba(245,243,238,.58)}
  .sx-tip .lt-head b{color:rgba(245,243,238,.58)}
  .sx-tip .lt-id em.up{color:#EE9B84;background:rgba(201,85,63,.22);
    box-shadow:inset 0 0 0 1px rgba(201,85,63,.42)}
  .sx-tip .lt-id em.down{color:#8FD3B2;background:rgba(78,140,116,.22);
    box-shadow:inset 0 0 0 1px rgba(78,140,116,.42)}
  @media (max-width:640px){
    .sx-tip.dense .lt-head{border-bottom-color:rgba(245,243,238,.16)}
    .sx-tip.dense .lt-wide b{color:rgba(245,243,238,.78)}
    .sx-tip.dense .lt-row i{color:rgba(245,243,238,.58)}}

  .intro-chart .ax{fill:rgba(245,243,238,.55)}
  .fc .sq:hover{stroke:#F7F5F1;stroke-width:1.4}
  .fc line{stroke:rgba(245,243,238,.20)}
  .sl .st{stroke:rgba(245,243,238,.16)}
  .sl.lit .st:not(.mv){stroke:rgba(245,243,238,.24)}
  .sl .st.hot{stroke:#F7F5F1!important}
  .sl .lead{stroke:rgba(245,243,238,.30)}
  .sl .mvlab{fill:rgba(245,243,238,.85)}
  .ev line[stroke-dasharray]{stroke:rgba(245,243,238,.34)}
  .lc .scrub{stroke:#F7F5F1}
  .lc .scrubdot{stroke:#0C0A08}


@media (max-width: 640px) {
   body:has(#intro:not(.is-gone)) #cp-card,
   body:has(#intro:not(.is-gone)) #cp-ring {
      top: var(--edge) !important;
      bottom: auto !important;
      left: 12px !important;
   }
   body:has(#intro:not(.is-gone)) #cp-card.on,
   body:has(#intro:not(.is-gone)) #cp-ring.on {
      top: var(--edge) !important;
      bottom: auto !important;
      left: 12px !important;
   }
   body:has(#intro:not(.is-gone)) #cp-card .cp-avwrap {
      top: 5px !important;
      bottom: auto !important;
   }
   body:has(#intro:not(.is-gone)) #cp-card.on .cp-avwrap {
      left: 20px !important;
      top: 37px !important;
      bottom: auto !important;
   }
   body:has(#intro:not(.is-gone)) #cp-card .cp-body {
      top: 0 !important;
      bottom: auto !important;
   }
}


@media (min-width: 641px) {
   #state-modal.statecard {
      max-height: 446px;
   }
}


body > .sx-tip {
   position: fixed !important;
   z-index: 4000 !important;
   pointer-events: none !important;
}


@media (min-width: 641px) {
   .topbar .topright { order: 1; }
   .topbar .segment  { order: 2; }
}


@media (min-width: 641px) {
   #credits-box{position:fixed;right:26px;bottom:22px;z-index:3002;
      height:40px;width:112px;overflow:hidden;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      border:1px solid transparent;border-radius:12px;background:transparent;
      transition:width .46s cubic-bezier(.16,1,.3,1),height .46s cubic-bezier(.16,1,.3,1),
         border-radius .46s cubic-bezier(.16,1,.3,1),background .28s ease,border-color .3s ease}
   #credits-box .cb-label{font-family:'JetBrains Mono',monospace;font-size:9px;
      letter-spacing:.13em;text-transform:uppercase;color:#7C746A;transition:opacity .2s ease}
   #credits-box .cb-body{position:absolute;inset:0;padding:17px 20px;opacity:0;
      pointer-events:none;display:flex;flex-direction:column;gap:11px;
      transition:opacity .3s ease .12s}
   #credits-box .cb-title{font-family:'JetBrains Mono',monospace;font-size:8px;
      letter-spacing:.16em;color:#A79C8E}
   #credits-box .cb-row{display:flex;flex-direction:column;gap:1px;
      text-decoration:none;cursor:pointer}
   #credits-box .cb-row b i{font-style:normal;font-size:10px;font-weight:400;
      margin-left:6px;opacity:.5;display:inline-block;
      transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s ease}
   #credits-box .cb-row:hover b i{transform:translate(2px,-2px);opacity:1}
   #credits-box .cb-row:active{transform:translateY(1px)}
   #credits-box .cb-row b{font-family:var(--ui-semi,'Space Grotesk'),sans-serif;
      font-size:12.5px;font-weight:600;color:#16130E}
   #credits-box .cb-row span{font-size:10.5px;color:#6B6359}
   #credits-box.on{width:266px;height:182px;border-radius:16px;background:#FFFFFF;
      border-color:transparent;box-shadow:0 18px 44px rgba(28,20,14,.18)}
   #credits-box.on .cb-label{opacity:0}
   #credits-box.on .cb-body{opacity:1;pointer-events:auto}
}
@media (max-width: 640px){ #credits-box{display:none} }

body:has(#intro.is-gone) #credits-box { display: none !important; }

#credits-box { display: none !important; }

@media (min-width: 641px) {
   body:has(#intro:not(.is-gone)) #credits-box {
      right: auto;
      left: 28px;                              /* mirrors the skip's inset */
      bottom: calc(var(--edge) + 16px);
      box-sizing: border-box;                  /* 46 means 46, padding inside */
      height: 46px;
      width: 150px;
      padding: 0 20px;
      border-color: transparent;
      background: transparent;
   }
   body:has(#intro:not(.is-gone)) #credits-box .cb-label {
      font-size: 10px;
      color: rgba(245, 243, 238, .72);
   }
   body:has(#intro:not(.is-gone)) #credits-box:hover .cb-label {
      color: #F7F5F1;
   }
   body:has(#intro:not(.is-gone)) #credits-box.on {
      width: 266px;
      height: 182px;
      padding: 0;
      background: rgba(16, 13, 10, .40);
      -webkit-backdrop-filter: blur(18px) saturate(185%);
      backdrop-filter: blur(18px) saturate(185%);
      border-color: transparent;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
   }
   body:has(#intro:not(.is-gone)) #credits-box .cb-title { color: rgba(245, 243, 238, .55); }
   body:has(#intro:not(.is-gone)) #credits-box .cb-row b { color: #F7F5F1; transition: color .25s ease; }
   body:has(#intro:not(.is-gone)) #credits-box .cb-row span { color: rgba(245, 243, 238, .78); }
   body:has(#intro:not(.is-gone)) #credits-box .cb-row:hover b { color: #FFFFFF; }
   body:has(#intro:not(.is-gone)) #credits-box .cb-row:hover span { color: rgba(245, 243, 238, .95); }
}

@media (min-width: 641px) {
   .topbar::after {
      content: '';
      position: fixed;
      right: 0; bottom: 0;
      width: 2px; height: 2px;
      opacity: .01;
      pointer-events: none;
      -webkit-backdrop-filter: blur(46px);
      backdrop-filter: blur(46px);
   }
}


#intro-skip,.intro-enter{will-change:transform}
#intro-skip{transition:color .25s ease,border-color .25s ease,
   transform .46s cubic-bezier(.16,1,.3,1)}
#intro-skip:hover{transform:scale(1.08)}
#intro-skip:active{transform:scale(.95);transition-duration:.25s,.25s,.16s}
.intro-enter{transition:background .28s var(--ease,ease),color .28s var(--ease,ease),
   border-color .28s var(--ease,ease),transform .46s cubic-bezier(.16,1,.3,1)}
.intro-enter:hover{transform:translateY(-2px) scale(1.06)}
.intro-enter:active{transform:scale(.97);transition-duration:.28s,.28s,.28s,.16s}

@media (min-width:641px){
  .intro-enter{transform:translate(var(--magx,0px),var(--magy,0px));
    transition:background .28s var(--ease,ease),color .28s var(--ease,ease),
      border-color .28s var(--ease,ease),
      transform .58s cubic-bezier(.34,1.56,.64,1)}
  .intro-enter.magnet-live{
    transition:background .28s var(--ease,ease),color .28s var(--ease,ease),
      border-color .28s var(--ease,ease),
      transform .16s cubic-bezier(.25,.6,.35,1)}
  .intro-enter:hover{
    transform:translate(var(--magx,0px),var(--magy,0px)) translateY(-2px) scale(1.06)}
  .intro-enter:active{
    transform:translate(var(--magx,0px),var(--magy,0px)) scale(.97)}
}


body:has(#intro:not(.is-gone)) #cp-ring {
   border-color: rgba(245, 243, 238, .55);
}
body.credit-closing:has(#intro:not(.is-gone)) #cp-card,
body:has(#intro:not(.is-gone)) #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:has(#intro:not(.is-gone)) #cp-card .cp-kicker { color: rgba(245,243,238,.62) !important; }
body:has(#intro:not(.is-gone)) #cp-card .cp-fullname { color: #F7F5F1 !important; }
body:has(#intro:not(.is-gone)) #cp-card .cp-row,
body:has(#intro:not(.is-gone)) #cp-card .cp-row span { color: rgba(245,243,238,.88) !important; }
body:has(#intro:not(.is-gone)) #cp-card .cp-row i { color: rgba(245,243,238,.62) !important; }
body:has(#intro:not(.is-gone)) #cp-card .cp-row + .cp-row::before {
   background: rgba(245,243,238,.18) !important;
}
body:has(#intro:not(.is-gone)) #cp-card .cp-me-label { color: rgba(245,243,238,.55) !important; }

@media (min-width: 641px) {
   #cp-card .cp-row {
      position: relative;
      transition: transform .15s ease;
   }

   #cp-card .cp-row::after {
      content: '';
      position: absolute;
      left: 70px;
      right: -8px;
      top: 1px;
      bottom: 1px;
      z-index: -1;
      border-radius: 8px;
      background: transparent;
      transition: background .22s ease;
   }

   #cp-card .cp-row:hover::after {
      background: rgba(22, 19, 14, .05);
   }

   #cp-card .cp-row:active {
      transform: translateY(1px);
   }

   body:has(#intro:not(.is-gone)) #cp-card .cp-row:hover::after {
      background: rgba(245, 243, 238, .10);
   }

   body:has(#intro:not(.is-gone)) #cp-card .cp-row:hover span { color: #FFFFFF !important; }
   body:has(#intro:not(.is-gone)) #cp-card .cp-row:hover i { color: #FFFFFF !important; }
}

@media (max-width: 640px) {
   body:has(#intro:not(.is-gone)) #cp-card.on,
   body:has(#intro:not(.is-gone)) #cp-ring.on {
      width: calc(100vw - 24px) !important;   /* 12 each side, as the bar */
   }
   body:has(#intro:not(.is-gone)) #cp-card.on .cp-avwrap {
      top: 26px !important;
      bottom: auto !important;
   }
   body:has(#intro:not(.is-gone)) #cp-card.on .cp-body,
   body.credit-closing:has(#intro:not(.is-gone)) #cp-card .cp-body {
      padding-top: 26px !important;
      padding-bottom: 25px !important;
   }
}


body:has(#intro:not(.is-gone)) #tourcard { display: none !important; }


@media (min-width: 641px) {
   #promo {
      transform: scale(1.35);
      animation-name: promoSettleWide;
   }
   @keyframes promoSettleWide {
      from { transform: scale(1.65); filter: blur(16px) saturate(.85); }
      to   { transform: scale(1.35); filter: blur(0) saturate(1); }
   }
}


body:not(.sheet-open) #sheet-scrim {
   pointer-events: none !important;
   opacity: 0 !important;
}


@media (max-width: 640px) {
   .collapsible {
      transition: grid-template-rows 1.3s cubic-bezier(0.45, 0.12, 0.5, 0.94);
   }
}

@keyframes stampInSoft {
   0% {
      opacity: 0;
      transform: rotate(var(--r, 0deg)) scale(0.82) translateY(-4px);
   }

   60% {
      opacity: 1;
      transform: rotate(var(--r, 0deg)) scale(1);
   }

   100% {
      opacity: 1;
      transform: rotate(var(--r, 0deg)) scale(1);
   }
}

@media (max-width: 640px) {
   .collapsible[style*="1fr"] .pstamp {
      animation: stampInSoft 0.58s cubic-bezier(0.4, 0, 0.6, 1) both;
      animation-delay: .6s !important;
   }
   .collapsible[style*="1fr"] .pstamp:nth-child(2)  { animation-delay: .645s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(3)  { animation-delay: .69s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(4)  { animation-delay: .735s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(5)  { animation-delay: .78s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(6)  { animation-delay: .825s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(7)  { animation-delay: .87s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(8)  { animation-delay: .915s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(9)  { animation-delay: .96s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(10) { animation-delay: 1.005s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(11) { animation-delay: 1.05s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(12) { animation-delay: 1.095s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(13) { animation-delay: 1.14s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(n+14) { animation-delay: 1.185s !important; }
}

@media (min-width: 641px) {
   .collapsible {
      transition: grid-template-rows 1.3s cubic-bezier(0.45, 0.12, 0.5, 0.94);
   }

   .collapsible[style*="0fr"] {
      transition: grid-template-rows 0.95s cubic-bezier(.7, 0, .4, 1) .22s;
   }

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

   .collapsible[style*="1fr"] .collapsible-inner > .kicker {
      animation: countIn .45s cubic-bezier(.4, 0, .6, 1) .18s both;
   }

   .collapsible[style*="1fr"] .pstamp {
      animation: stampInSoft 0.58s cubic-bezier(0.4, 0, 0.6, 1) both;
      animation-delay: .35s !important;
   }
   .collapsible[style*="1fr"] .pstamp:nth-child(2)  { animation-delay: .44s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(3)  { animation-delay: .53s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(4)  { animation-delay: .62s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(5)  { animation-delay: .71s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(6)  { animation-delay: .80s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(7)  { animation-delay: .89s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(8)  { animation-delay: .98s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(9)  { animation-delay: 1.07s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(10) { animation-delay: 1.16s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(11) { animation-delay: 1.25s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(12) { animation-delay: 1.34s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(13) { animation-delay: 1.43s !important; }
   .collapsible[style*="1fr"] .pstamp:nth-child(n+14) { animation-delay: 1.52s !important; }
}


@media (max-width: 640px) {
   body.corner-morph #cp-card {
      transition: top .65s cubic-bezier(.16, 1, .3, 1),
                  left .65s cubic-bezier(.16, 1, .3, 1);
   }
   body.corner-morph #cp-ring {
      transition: top .65s cubic-bezier(.16, 1, .3, 1),
                  left .65s cubic-bezier(.16, 1, .3, 1),
                  border-color .65s ease;
   }
   body.corner-handoff .topbar .segment { clip-path: inset(0 0 0 100%); }

   .corner-ghost {
      position: fixed; z-index: 4200; pointer-events: none;
      box-sizing: border-box;
      display: flex; align-items: center; justify-content: center;
      font-family: 'JetBrains Mono', monospace; font-size: 9px;
      letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
      overflow: hidden; border: 1px solid; border-radius: 12px;
      transition: top .62s cubic-bezier(.16, 1, .3, 1),
                  left .62s cubic-bezier(.16, 1, .3, 1),
                  width .62s cubic-bezier(.16, 1, .3, 1),
                  height .62s cubic-bezier(.16, 1, .3, 1),
                  color .38s ease, border-color .62s ease,
                  background-color .62s ease, border-radius .62s ease,
                  opacity .26s ease;
   }
}


@media (min-width: 641px) {
   body.corner-handoff .topbar .segment { clip-path: inset(0 0 0 100%); }

   .corner-ghost {
      position: fixed; z-index: 4200; pointer-events: none;
      box-sizing: border-box;
      display: flex; align-items: center; justify-content: center;
      font-family: 'JetBrains Mono', monospace; font-size: 9px;
      letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
      overflow: hidden; border: 1px solid; border-radius: 12px;
      transition: top .62s cubic-bezier(.16, 1, .3, 1),
                  left .62s cubic-bezier(.16, 1, .3, 1),
                  width .62s cubic-bezier(.16, 1, .3, 1),
                  height .62s cubic-bezier(.16, 1, .3, 1),
                  color .38s ease, border-color .62s ease,
                  background-color .62s ease, border-radius .62s ease,
                  opacity .26s ease;
   }
}


@media (min-width: 641px) {
   #cp-card:not(.on) {
      top: 30px !important;
      bottom: auto !important;
      left: 28px !important;
      width: 62px !important;
      height: 62px !important;
   }
   #cp-card.on {
      top: 20px !important;
      bottom: auto !important;
      left: 22px !important;
   }
   #cp-card {
      transition: top .46s cubic-bezier(.16, 1, .3, 1),
         left .46s cubic-bezier(.16, 1, .3, 1),
         bottom .46s cubic-bezier(.16, 1, .3, 1),
         width .46s cubic-bezier(.16, 1, .3, 1),
         height .46s cubic-bezier(.16, 1, .3, 1),
         border-radius .46s cubic-bezier(.16, 1, .3, 1),
         background .28s ease,
         border-color .3s ease;
   }
   #cp-ring {
      top: 30px !important;
      bottom: auto !important;
      left: 28px !important;
   }
   #cp-ring.on {
      top: 20px !important;
      bottom: auto !important;
      left: 22px !important;
   }

   #cp-ring {
      transition: top .46s cubic-bezier(.16, 1, .3, 1),
         left .46s cubic-bezier(.16, 1, .3, 1),
         bottom .46s cubic-bezier(.16, 1, .3, 1),
         width .46s cubic-bezier(.16, 1, .3, 1),
         height .46s cubic-bezier(.16, 1, .3, 1),
         border-radius .46s cubic-bezier(.16, 1, .3, 1),
         opacity .22s ease,
         border-color .5s ease;
   }
   body.credit-closing #cp-card,
   body.credit-closing #cp-ring {
      transition: width .58s cubic-bezier(.45, 0, .2, 1) .45s,
         height .58s cubic-bezier(.45, 0, .2, 1) .45s,
         border-radius .58s cubic-bezier(.45, 0, .2, 1) .45s,
         left .58s cubic-bezier(.45, 0, .2, 1) .45s,
         top .58s cubic-bezier(.45, 0, .2, 1) .45s,
         bottom .58s cubic-bezier(.45, 0, .2, 1) .45s,
         opacity .34s ease .45s,
         background 0s !important;
   }

   #cp-card:not(.on) .cp-avwrap {
      top: 7px !important;
      left: 7px !important;
      bottom: auto !important;
   }
   #cp-card.on .cp-avwrap {
      top: 26px !important;
      bottom: auto !important;
      left: 20px !important;
   }
   #cp-card .cp-body {
      top: 0 !important;
      bottom: auto !important;
   }
   #cp-card.on .cp-body,
   body.credit-closing #cp-card .cp-body {
      padding-top: 26px !important;
      padding-bottom: 25px !important;
   }
}

@media (min-width: 641px) {
   .brandmark {
      display: none;
   }

   .topbar {
      top: 38px;
      left: 28px;
      right: 28px;
      height: 46px;
      padding-left: 90px;
   }

   .storybtn {
      height: 46px;
   }

   .searchfield {
      height: 46px;
   }

   button.dash-dropdown.metricbox {
      height: 46px !important;
   }

   .segbtn {
      height: 38px;
   }

   .segbtn,
   .segment::before {
      border-radius: 8px;
   }

   .segment {
      background: transparent;
      -webkit-backdrop-filter: blur(30px) saturate(150%);
      backdrop-filter: blur(30px) saturate(150%);
   }

   button.dash-dropdown.metricbox:focus:not(:focus-visible) {
      border-color: rgba(22, 19, 14, 0.22) !important;
      box-shadow: none !important;
   }

   :root {
      --band-top: 93px;
   }
}


@media (min-width: 641px) {
   .app {
      transform-origin: 50% 0;
      transition: transform .8s cubic-bezier(.16, 1, .3, 1),
         filter .6s ease, border-radius .8s cubic-bezier(.16, 1, .3, 1);
   }

   body.sheet-up .app {
      transform: scale(.955) translateY(-14px);
      border-radius: 16px;
      filter: brightness(.9);
      overflow: hidden;
   }

   .shscrim {
      position: fixed;
      inset: 0;
      z-index: 4300;
      background: rgba(22, 19, 14, .26);
      opacity: 0;
      pointer-events: none;
      transition: opacity .6s ease;
   }

   body.sheet-up .shscrim { opacity: 1; pointer-events: auto; }

   .indsheet {
      position: fixed;
      left: 11%;
      right: 11%;
      bottom: 0;
      height: auto;
      max-height: 82vh;
      z-index: 4400;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, .74);
      -webkit-backdrop-filter: blur(44px) saturate(200%);
      backdrop-filter: blur(44px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, .75);
      border-bottom: none;
      border-radius: 24px 24px 0 0;
      box-shadow: 0 -22px 60px rgba(28, 20, 14, .22);
      transform: translateY(101%);
      transition: transform .72s cubic-bezier(.16, 1, .3, 1);
      padding: 16px 34px 0;
   }

   .indsheet.is-up { transform: translateY(0); }

   .shgrip {
      width: 44px; height: 4px; border-radius: 2px;
      background: rgba(22, 19, 14, .16);
      margin: 0 auto 14px; cursor: pointer;
   }

   .shhead {
      display: flex; align-items: baseline; justify-content: space-between;
      margin-bottom: 16px;
   }

   .shhead b {
      font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
      text-transform: uppercase; color: #7C746A; font-weight: 500;
   }

   .shclose {
      border: 1px solid rgba(22, 19, 14, .22); background: none; cursor: pointer;
      border-radius: 9px; padding: 6px 12px;
      font-family: var(--mono); font-size: 8.4px; letter-spacing: .14em;
      text-transform: uppercase; color: #7C746A;
      transition: transform .46s cubic-bezier(.16, 1, .3, 1),
         border-color .25s ease, color .25s ease;
   }

   .shclose:hover { transform: scale(1.08); border-color: #C6BCAE; color: #16130E; }
   .shclose:active { transform: scale(.95); }

   .shfigs {
      display: flex; gap: 44px;
      padding: 0 0 16px; margin-bottom: 20px;
      border-bottom: 1px solid rgba(22, 19, 14, .14);
   }

   .shfig { opacity: 0; transform: translateY(7px);
      transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
   .indsheet.is-up .shfig { opacity: 1; transform: none; }
   .indsheet.is-up .shfig:nth-child(1) { transition-delay: .34s; }
   .indsheet.is-up .shfig:nth-child(2) { transition-delay: .40s; }
   .indsheet.is-up .shfig:nth-child(3) { transition-delay: .46s; }
   .indsheet.is-up .shfig:nth-child(4) { transition-delay: .52s; }

   .shfig b {
      display: block; font-family: var(--ui-semi); font-size: 27px;
      font-weight: 700; letter-spacing: -.6px; color: #16130E;
   }

   .shfig span {
      font-family: var(--mono); font-size: 7.6px; letter-spacing: .14em;
      text-transform: uppercase; color: #7C746A;
   }

   .shlower {
      display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
      gap: 38px;
      padding-bottom: 30px;      /* the seals never sit on the window's edge */
      overflow-y: auto;          /* only if a short window demands it */
      overscroll-behavior: contain;
   }

   .shread p {
      font-size: 14px; line-height: 1.55; letter-spacing: -.1px;
      margin-bottom: 12px; color: #7C746A;
      opacity: 0; transform: translateY(8px);
      transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
   }

   .shread p:first-child { font-size: 16.5px; line-height: 1.45; color: #16130E; }
   .indsheet.is-up .shread p { opacity: 1; transform: none; }
   .indsheet.is-up .shread p:nth-child(1) { transition-delay: .50s; }
   .indsheet.is-up .shread p:nth-child(2) { transition-delay: .60s; }
   .indsheet.is-up .shread p:nth-child(3) { transition-delay: .70s; }

   .shstamps .collapsible-inner > div:first-child { display: none; }  /* the 22px spacer */
   .shstamps .kicker { display: none; }        /* the count is in the masthead now */
   .shstamps .stampwrap { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
   .shstamps .pstamp { max-width: 168px; }

   .indsheet .pstamp { animation: none; opacity: 0; }
   .indsheet.is-up .pstamp {
      animation: stampInSoft .58s cubic-bezier(.4, 0, .6, 1) both;
      animation-delay: calc(.80s + var(--n, 0) * .045s) !important;
   }

   #modal-indicators-content { display: none !important; }

   body.sheet-up .sx-tip,
   body.sheet-up #tourcard,
   body.sheet-up #linktag,
   body.sheet-up #linklayer {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .25s ease;
   }
}

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

   #mark-stage {
      position: fixed;
      inset: 0;
      z-index: 3800;
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
      transition: opacity .55s ease;
   }

   #mark-stage video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.35);
      filter: saturate(.92);
      transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
   }

   #mark-stage .ms-scrim {
      position: absolute;
      inset: 0;
      background:
         radial-gradient(120% 90% at 22% 26%,
            rgba(12, 10, 8, 0) 0%, rgba(12, 10, 8, .30) 52%, rgba(12, 10, 8, .70) 100%),
         linear-gradient(180deg,
            rgba(12, 10, 8, .48) 0%, rgba(12, 10, 8, .56) 38%,
            rgba(12, 10, 8, .74) 62%, rgba(12, 10, 8, .90) 84%,
            rgba(12, 10, 8, .96) 100%);
   }

   #mark-stage .ms-line {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 30px;
      display: flex;
      align-items: baseline;
      gap: 14px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(245, 243, 238, .58);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .5s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
   }

   #mark-stage .ms-line b {
      font-weight: 500;
      color: rgba(245, 243, 238, .92);
   }

   #mark-stage .ms-line i {
      font-style: normal;
      flex: 1;
      height: 1px;
      background: rgba(245, 243, 238, .22);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .12s;
   }

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

   body.mark-stage #mark-stage .ms-line i { transform: scaleX(1); }

   body.mark-stage #mark-stage {
      opacity: 1;
   }

   #mark-stage video { transform: scale(1.44); }
   body.mark-stage #mark-stage video { transform: scale(1.35); }

   body.mark-stage #cp-card { z-index: 3900 !important; }
   body.mark-stage #cp-ring { z-index: 3910 !important; }

   body.mark-stage #cp-card.on,
   body.mark-stage.credit-closing #cp-card {
      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.mark-stage #cp-ring { border-color: rgba(245, 243, 238, .55) !important; }
   body.mark-stage #cp-ring.on { opacity: 0; }

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

   }


@media (min-width: 641px) {
   .intro-body { max-width: 900px; }
}