/* The project cursor uses the existing self-hosted Manrope Medium asset. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../asset/fonts/manrope-medium.ttf") format("truetype");
}
@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../asset/fonts/caveat-regular.ttf") format("truetype");
}
.home, .footer {
  width: min(var(--home-content-desktop), calc(100% - 40px));
  margin-inline: auto;
}
.home { padding-top: var(--home-padding-top-desktop); }
.hero { display: flex; flex-direction: column; gap: var(--space-24); }
.hero-portrait-row { height: 72px; display: flex; align-items: center; }
.portrait {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: var(--home-testimonial-portrait-size);
  height: var(--home-testimonial-portrait-size);
  border-radius: var(--radius-portrait);
  background: #827676;
  outline: 4px solid white;
  overflow: clip;
  box-shadow: 0 0 2px #00000014, 0 2px 6px #0000000D;
}
.portrait img { position: absolute; max-width: none; }
.portrait--hero {
  width: var(--home-portrait-size);
  height: var(--home-portrait-size);
  box-shadow: none;
  filter: var(--home-cover-filter-first-desktop);
}
.portrait--hero img { width: 72px; height: 72px; left: -8px; top: -6px; }
.portrait--farhad-idris, .portrait--ryan-pratama, .portrait--arif-kurnia, .portrait--atrasina-winona, .portrait--agam-riangga, .portrait--refornia-mei, .portrait--redoni { box-shadow: none; filter: drop-shadow(0 0 1px #00000014) drop-shadow(0 0 0 #0000000D); }
.portrait--farhad-idris img { width: 96px; height: 96px; left: -26px; top: -12px; }
.portrait--ryan-pratama img, .portrait--arif-kurnia img { width: 56px; height: 56px; left: -4px; top: 0; }
.portrait--atrasina-winona img { width: 96px; height: 96px; left: -26px; top: -4px; }
.portrait--agam-riangga img { width: 48px; height: 48px; left: 0; top: 0; }
.portrait--refornia-mei img { width: 96px; height: 96px; left: -24px; top: -10px; }
.portrait--redoni img { width: 72px; height: 72px; left: -12px; top: -17px; }
.hero-greeting { width: fit-content; max-width: 100%; }
.greeting-prefix, .name { display: inline-block; white-space: pre; }
.name { padding: 0; border: 0; background: transparent; letter-spacing: inherit; text-align: left; }
.name { font-weight: var(--font-weight-medium); text-decoration: underline dashed var(--color-name-underline); text-underline-offset: 5px; }
.hero-divider { 
  margin-top: var(--home-section-gap-desktop); 
  margin-bottom: var(--home-section-gap-desktop); 
}
.pen { margin-block: var(--home-section-gap-desktop); }
.works h2 { margin-bottom: var(--space-32); }
.projects { list-style: none; }
.project { position: relative; }
.project-link {
  display: grid;
  grid-template-columns: var(--home-project-number-desktop) minmax(0, 1fr);
  column-gap: var(--home-project-gap-desktop);
}
.project::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 16px;
  top: 33px;
  bottom: 0;
  border-left: 1px dashed var(--color-border);
}
.project-number {
  display: grid;
  place-items: center;
  width: var(--home-project-number-desktop);
  height: var(--home-project-number-desktop);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small);
  color: var(--color-text-secondary);
}
.project-content { min-width: 0; padding-top: 2px; padding-bottom: 88px; }
.project h3 {
  font-family: var(--font-project-title);
  font-size: var(--font-size-body);
  line-height: var(--line-height-project-title);
  font-weight: var(--font-weight-semibold);
}
/* Cursor feedback decorates the existing link; it is not a second control. */
.project-link h3 {
  text-decoration-style: dashed;
  text-decoration-color: var(--color-name-underline);
  text-decoration-thickness: var(--case-text-link-underline-thickness);
  text-underline-offset: var(--case-text-link-underline-offset);
}
.project-link:is(:focus-visible, :active) h3 { text-decoration-line: underline; }
@media (any-hover: hover) and (any-pointer: fine) {
  .project-link:hover h3 { text-decoration-line: underline; }
  .project-link.has-project-cursor { cursor: none; }
}
/* Preserve the native dashed decoration; reveal only its decorative copy. */
.project-link h3.has-title-underline { position: relative; text-decoration-line: none; }
.project-title-underline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  text-decoration: underline dashed var(--color-name-underline);
  text-decoration-thickness: var(--case-text-link-underline-thickness);
  text-underline-offset: var(--case-text-link-underline-offset);
}
.project-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--home-project-cursor-background);
  color: var(--color-background);
  font-family: var(--font-project-title);
  font-size: var(--font-size-supporting);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-supporting);
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 619px) {
  .project-cursor {
    padding: 6px var(--space-12);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }
}
.tags { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; margin-top: var(--space-16); }
.tags li {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-supporting);
  line-height: var(--line-height-supporting);
}
.cover {
  position: relative;
  container-type: inline-size;
  margin: 32px 8px 0;
  border-radius: var(--radius-cover);
  outline: var(--home-cover-surround-desktop) solid white;
  filter: var(--home-cover-filter-other-desktop);
}
.cover img { width: 100%; height: auto; aspect-ratio: 468 / 263; object-fit: cover; border-radius: inherit; }
.project:first-child .cover { filter: var(--home-cover-filter-first-desktop); }
/* The banner occupies the final project's long trailing space in Paper. */
.project:last-child .project-content { padding-bottom: 110px; }
.kind-words { width: var(--home-testimonial-desktop); margin-left: -25px; }
.testimonial-intro {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-testimonial-desktop);
  font-size: var(--font-size-supporting);
  line-height: var(--line-height-supporting);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 24px;
}
.testimonial-intro::after {
  content: "";
  position: absolute;
  left: 40px;
  top: calc(100% + 1px);
  height: var(--space-24);
  border-left: 1px dashed var(--color-border);
  pointer-events: none;
}
.testimonial-intro span { flex: 1; min-width: 0; }
.testimonial-intro img {
  flex: 0 0 8px;
  animation: testimonial-sparkle var(--home-sparkle-duration) ease-in-out infinite;
}
@keyframes testimonial-sparkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--home-sparkle-min-scale)); }
}
.testimonial-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 24px; border: 1px dashed var(--color-border); border-radius: var(--radius-testimonial-desktop); }
.testimonial-heading {
  grid-area: 1 / 1 / 2 / 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.testimonial-heading::before { content: ""; position: absolute; width: 100%; bottom: 0; left: 0; border-bottom: 1px dashed var(--color-border); }
.testimonial-heading::after { content: ""; position: absolute; width: 75.714px; height: 1px; background: var(--color-text-secondary); bottom: 0; left: 0; }
.testimonial-heading.has-story-progress::after { display: none; }
.testimonial-progress {
  position: absolute;
  bottom: 0;
  height: 1px;
  width: calc(100% / 7);
  background: var(--color-text-secondary);
  transform-origin: left;
  pointer-events: none;
}
.testimonial-playback-icon { width: 8px; height: 8px; border-inline: 2px solid var(--color-text-secondary); }
.testimonial-playback[data-paused="true"] .testimonial-playback-icon {
  width: 0;
  border: 4px solid transparent;
  border-left: 6px solid var(--color-text-secondary);
  margin-left: 4px;
}
.story-text { position: relative; }
.story-text.is-fading, .story-text.is-scrambling { color: transparent; }
.story-fade, .story-scramble { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.testimonial-highlight-layer { position: absolute; inset: 0; pointer-events: none; }
.testimonial-highlight-stroke {
  position: absolute;
  height: var(--home-story-highlight-height);
  background: var(--home-story-highlight-color);
  opacity: var(--home-story-highlight-opacity);
  transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-intro img { animation: none; }
}
/* Controls follow the quote in reading order, retaining their visual header slot. */
.testimonial-controls { position: relative; z-index: 1; grid-area: 1 / 2; align-self: start; display: flex; gap: 8px; height: 16px; align-items: center; margin-right: -4px; }
.testimonial-controls button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; border-radius: 3px; }
.testimonial-controls img { filter: brightness(1); }
.testimonial { display: flex; flex-direction: column; gap: 24px; }
.testimonial + .testimonial { margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--color-border); }
.testimonials { grid-area: 2 / 1 / 3 / 3; }
/* All slides size one shared row; only the active slide is visible/readable. */
.testimonials.is-enhanced { display: grid; }
.testimonials.is-enhanced .testimonial { grid-area: 1 / 1; align-self: end; min-width: 0; margin: 0; padding: 0; border: 0; }
.testimonials.is-enhanced .testimonial[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.testimonial-attribution { display: flex; align-items: center; gap: 20px; padding: 8px 0 8px 8px; }
.testimonial-attribution .portrait { background: #F8F8F7; }
.testimonial-attribution > span:last-child { min-width: 0; }
.person-name, .person-role { display: block; font-size: var(--font-size-supporting); line-height: var(--line-height-supporting); }
.person-name { font-weight: var(--font-weight-medium); margin-bottom: 2px; }
.person-role { color: var(--color-text-secondary); }
.mobile-break { display: none; }
.about { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 112px; }
.about h2, .about-copy, .contact-links { width: 100%; }
.photo-strip { width: 570px; max-width: calc(100vw - 40px); overflow-x: auto; overflow-y: hidden; }
.photos { position: relative; display: flex; align-items: flex-start; width: 570px; height: 204px; padding-left: 8px; }
.photo-card {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: white;
  border-radius: 1.6px;
  outline: 3.2px solid white;
  transform-origin: top left;
  rotate: var(--photo-angle, 0deg);
  filter: drop-shadow(0 0 0 #00000033) drop-shadow(0 0 .4px #00000014) drop-shadow(0 .8px 1.2px #0000001A);
  transition: scale var(--home-photo-hover-duration) ease-out, translate var(--home-photo-hover-duration) ease-out;
}
.photo--kochia { width: 108.02px; height: 144.03px; margin-top: 43.23px; --photo-angle: -5.97deg; }
.photo--kochia .photo { object-position: 0 82.24%; }
.photo--hogwarts { width: 108.05px; height: 144.06px; margin-left: 8.37px; margin-top: 36px; --photo-angle: 4.3deg; }
.photo--hogwarts .photo { object-position: 0 50%; }
.photo--bubbles { width: 108.05px; height: 144.06px; margin-left: -.44px; margin-top: 36px; }
.photo--bubbles .photo { object-position: 50% 0; }
.photo--food { width: 108px; height: 144px; margin-left: -.05px; margin-top: 44.53px; --photo-angle: -4deg; }
.photo--food .photo { border-radius: 1.60669px; outline-width: 3.21338px; object-position: 0 16.09%; filter: drop-shadow(0 0 0 #00000033) drop-shadow(0 0 .4px #00000014) drop-shadow(0 .8px 1.21px #0000001A); }
.photo--sunset { width: 108px; height: 144px; margin-left: 11.04px; margin-top: 35px; --photo-angle: 2.41deg; --photo-hover-x: -14px; }
.photo--sunset .photo { object-position: 0 100.43%; }
.photos.is-stacked .photo-card {
  transform: translate(var(--photo-stack-x), var(--photo-stack-y));
  z-index: var(--photo-stack-order);
}
.photo-card:is(.is-selected, :focus-visible) { z-index: 10; }
.photo-card:is(.is-selected, :focus-visible) .photo { scale: var(--home-photo-hover-scale); translate: var(--photo-hover-x, 0px) 0; }
.photo-caption {
  position: absolute;
  top: var(--home-photo-caption-top);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 220px;
  font-family: Caveat, cursive;
  font-weight: 400;
  font-size: var(--home-photo-caption-size);
  line-height: var(--home-photo-caption-line-height);
  letter-spacing: 0;
  color: var(--color-text-secondary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--home-photo-hover-duration) ease-out, visibility 0s linear var(--home-photo-hover-duration);
}
.photo--kochia .photo-caption { left: 0; translate: 0; }
.photo--sunset .photo-caption { left: auto; right: 0; translate: 0; }
.photo-card:is(.is-selected, :focus-visible) .photo-caption {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
  .photos:not(.is-interactive) .photo-card:hover { z-index: 10; }
  .photos:not(.is-interactive) .photo-card:hover .photo { scale: var(--home-photo-hover-scale); translate: var(--photo-hover-x, 0px) 0; }
  .photos:not(.is-interactive) .photo-card:hover .photo-caption { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .photo, .photo-caption { transition: none; }
}
.about-copy { display: flex; flex-direction: column; gap: 8px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 40px; list-style: none; }
.contact-links a { display: inline-flex; gap: 4px; align-items: center; min-height: 24px; }
.contact-links a:is(:hover, :focus-visible, :active) .contact-label {
  color: var(--case-color-heading);
  text-decoration: underline dashed var(--color-name-underline);
  text-decoration-thickness: var(--case-text-link-underline-thickness);
  text-underline-offset: var(--case-text-link-underline-offset);
}
.external-arrow { width: 16px; height: 16px; background: url("../asset/icons/arrow-up-right.svg") center / 9px 9px no-repeat; }
.footer { padding-top: 144px; padding-bottom: var(--home-padding-bottom-desktop); color: var(--color-text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-small); letter-spacing: var(--tracking-small); }
.footer > div { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
/* Supplied 105×16px clock: 25px pairs, 8px colon, 8px gap and 39px timezone. */
.footer-clock-display { display: inline-flex; gap: 8px; height: 16px; vertical-align: bottom; }
.footer-clock, .clock-pair { display: inline-flex; height: 16px; }
.footer-clock { font: 300 12px/16px var(--font-body); color: var(--color-text-primary); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.clock-pair { gap: 1px; }
.clock-digit { position: relative; width: 12px; height: 16px; border: .5px solid var(--color-border); border-radius: 1px; perspective: 80px; }
.clock-half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--home-clock-face-background); backface-visibility: hidden; }
.clock-half--top { top: 0; border-radius: .75px .75px 0 0; transform-origin: center bottom; }
.clock-half--bottom { bottom: 0; border-radius: 0 0 .75px .75px; transform-origin: center top; }
.clock-glyph { position: absolute; left: 0; right: 0; height: 16px; display: grid; place-items: center; }
.clock-half--top .clock-glyph { top: -.5px; }
.clock-half--bottom .clock-glyph { bottom: -.5px; }
.clock-flap { z-index: 2; }
.clock-digit::after { content: ""; position: absolute; z-index: 3; top: calc(50% - .2px); left: 1.5px; right: 1.5px; height: .4px; background: var(--home-clock-face-background); pointer-events: none; }
.footer-clock.is-live .clock-colon { animation: clock-colon-blink var(--home-clock-blink-duration) ease-in-out var(--clock-blink-offset, 0ms) infinite; }
.footer-clock.is-paused .clock-colon { animation-play-state: paused; }
@keyframes clock-colon-blink { 0%, 10%, 100% { opacity: 1; } 50%, 60% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .footer-clock.is-live .clock-colon { animation: none; opacity: 1; }
}
/* Browser decision: switch when the 580px card plus 20px gutters no longer fits. */
@media (max-width: 619px) {
  body { font-size: var(--font-size-supporting); line-height: var(--line-height-body-mobile); }
  .home { padding-top: var(--home-padding-top-mobile); }
  .hero-divider { margin-top: var(--home-section-gap-mobile); margin-bottom: var(--home-section-gap-mobile); }
  .pen { display: none; }
  .portrait--hero, .portrait--farhad-idris { filter: drop-shadow(0 0 2px #00000014) drop-shadow(0 2px 6px #0000000D); }
  .project-link { grid-template-columns: var(--home-project-number-mobile) minmax(0, 1fr); gap: var(--home-project-gap-mobile); }
  .project::before { left: 12px; top: 25px; }
  .project-number { width: var(--home-project-number-mobile); height: var(--home-project-number-mobile); font-size: var(--font-size-number-mobile); line-height: var(--line-height-number-mobile); }
  .project h3 { font-family: var(--font-body); font-size: var(--font-size-supporting); line-height: var(--line-height-supporting); font-weight: var(--font-weight-medium); }
  .tags { margin-top: 12px; }
  .tags li { font-size: var(--font-size-small); line-height: var(--line-height-small); letter-spacing: var(--tracking-small); }
  .cover { margin: 24px 5.21px 0 5.79px; border-radius: var(--home-cover-radius-mobile); outline-width: var(--home-cover-surround-mobile); }
  .cover, .project:first-child .cover { filter: var(--home-cover-filter-mobile); }
  .cover img { aspect-ratio: 305 / 171.4; }
  .project-content { padding-bottom: 63.64px; }
  .project:last-child .project-content { padding-bottom: 64.52px; }
  .kind-words { width: 100%; margin-left: 0; }
  .testimonial-intro { font-size: var(--font-size-small); line-height: var(--line-height-small); letter-spacing: var(--tracking-small); padding-inline: 16px; border-radius: var(--radius-testimonial-mobile); margin-bottom: 16px; }
  .testimonial-intro::after { left: 11px; height: var(--space-16); }
  .testimonial-card { padding: 24px 16px; border-radius: var(--radius-testimonial-mobile); }
  .testimonial-heading::after { width: 45.142px; }
  .person-name, .person-role { font-size: var(--font-size-small); line-height: var(--line-height-small); letter-spacing: var(--tracking-small); }
  .mobile-break { display: initial; }
  .about { margin-top: 88px; }
  .photo-strip { align-self: flex-start; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scrollbar-width: none; }
  .photo-strip::-webkit-scrollbar { display: none; }
  .footer { padding-top: 112px; padding-bottom: var(--home-padding-bottom-mobile); }
}
@media (max-width: 359px) {
  .contact-links { column-gap: 24px; }
}

/* One-time, component-level reveals; no layout movement or hidden content without JS. */
.home-reveal-pending { opacity: 0; }
.home-reveal-active {
  animation: home-fade var(--home-reveal-duration) ease both;
}
.home-reveal-active[data-home-reveal="horizontal"],
.project.home-rail-active::before,
.testimonial-intro.home-connector-active::after,
.testimonial-heading.home-rule-active::before,
.testimonial-heading.home-rule-active::after {
  mask-image: linear-gradient(to right, #000 33.333%, transparent 66.667%);
  mask-size: 300% 100%;
  animation: home-fade-right var(--home-reveal-duration) ease both;
}
.project.home-rail-pending::before,
.testimonial-intro.home-connector-pending::after,
.testimonial-heading.home-rule-pending::before,
.testimonial-heading.home-rule-pending::after { opacity: 0; }
.project.home-rail-active::before,
.testimonial-intro.home-connector-active::after {
  mask-image: linear-gradient(to bottom, #000 33.333%, transparent 66.667%);
  mask-size: 100% 300%;
  animation-name: home-fade-down;
}
.home-reveal-pending:focus-within,
.home-reveal-active[data-home-reveal]:focus-within {
  opacity: 1;
  animation: none;
  mask-image: none;
}
@keyframes home-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes home-fade-right {
  from { opacity: 0; mask-position: 100% 0; }
  to { opacity: 1; mask-position: 0 0; }
}
@keyframes home-fade-down {
  from { opacity: 0; mask-position: 0 100%; }
  to { opacity: 1; mask-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-reveal-pending { opacity: 1; }
  .home-reveal-active,
  .project.home-rail-active::before,
  .testimonial-intro.home-connector-active::after,
  .testimonial-heading.home-rule-active::before,
  .testimonial-heading.home-rule-active::after { animation: none; mask-image: none; }
  .project.home-rail-pending::before,
  .testimonial-intro.home-connector-pending::after,
  .testimonial-heading.home-rule-pending::before,
  .testimonial-heading.home-rule-pending::after { opacity: 1; }
}

/* Exact artwork styles from the selected Paper preview frames. */
.preview-art-1 { box-sizing:border-box; filter:drop-shadow(#00000014 0px 0px 1px) drop-shadow(#0000001F 0px 5.52px 11.04px); height:32px; left:363.4px; position:absolute; rotate:-15deg; top:197px; transform-origin:0% 0%; width:32px; }
.preview-art-2 { left:0px; top:0px; width:32px; height:32px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-3 { left:0px; top:0px; width:468px; height:263px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-4 { box-sizing:border-box; filter:drop-shadow(#0000000A 0px 0px 1px) drop-shadow(#0000001F 0px 5.52px 11.04px); height:32px; left:63.98px; position:absolute; rotate:-6.72deg; top:193px; transform-origin:0% 0%; width:32px; }
.preview-art-5 { width:100%; height:100%; left:0%; top:0%; display:inline-block; overflow:visible; position:absolute; }
.preview-art-6 { box-sizing:border-box; height:round(58.3333%, 1px); left:16.6667%; position:absolute; top:20.8333%; width:round(66.6667%, 1px); }
.preview-art-7 { background-color:#4CA94C; border-radius:0.72px; box-sizing:border-box; height:100%; left:12.5%; position:absolute; top:0%; width:round(87.5%, 1px); }
.preview-art-8 { background-color:#4CA94C; border-radius:0.72px; box-sizing:border-box; height:round(14.2857%, 1px); left:0%; outline:0.36px solid #EBF8F6; position:absolute; top:21.4286%; width:round(25%, 1px); }
.preview-art-9 { background-color:#4CA94C; border-radius:0.72px; box-sizing:border-box; height:round(14.2857%, 1px); left:0%; outline:0.36px solid #EBF8F6; position:absolute; top:64.2857%; width:round(25%, 1px); }
.preview-art-10 { width:round(50%, 1px); height:round(57.1429%, 1px); left:37.5%; top:21.4286%; display:inline-block; overflow:visible; position:absolute; }
.preview-art-11 { width:round(25%, 1px); height:round(28.5714%, 1px); left:50%; top:35.7143%; display:inline-block; overflow:visible; position:absolute; }
.preview-art-12 { background-color:#4CA94C; border-radius:0.72px; box-sizing:border-box; height:round(7.14286%, 1px); left:59.375%; position:absolute; rotate:-90deg; top:71.4286%; transform-origin:0% 0%; width:round(37.5%, 1px); }
.preview-art-13 { background-color:#4CA94C; border-radius:0.72px; box-sizing:border-box; height:round(7.14286%, 1px); left:43.75%; position:absolute; top:46.4286%; width:round(37.5%, 1px); }
.preview-art-14 { background-color:#4CA94C; border-radius:0.72px; box-sizing:border-box; height:round(7.14286%, 1px); left:51.4515%; position:absolute; rotate:45deg; top:32.3223%; transform-origin:0% 0%; width:round(37.5%, 1px); }
.preview-art-15 { background-color:#4CA94C; border-radius:0.72px; box-sizing:border-box; height:round(7.14286%, 1px); left:47.032%; position:absolute; rotate:-45deg; top:62.6269%; transform-origin:0% 0%; width:round(37.5%, 1px); }
.preview-art-16 { box-sizing:border-box; filter:drop-shadow(#0000000A 0px 0px 1px) drop-shadow(#0000001F 0px 5.52px 11.04px); height:32px; left:47.24px; position:absolute; rotate:15deg; top:83px; transform-origin:0% 0%; width:32px; }
.preview-art-17 { box-sizing:border-box; height:round(66.6667%, 1px); left:20.8333%; position:absolute; top:16.6667%; width:round(58.3333%, 1px); }
.preview-art-18 { width:round(57.1429%, 1px); height:round(31.25%, 1px); left:21.4286%; top:0%; display:inline-block; overflow:visible; position:absolute; }
.preview-art-19 { width:100%; height:round(68.75%, 1px); left:0%; top:31.25%; display:inline-block; overflow:visible; position:absolute; }
.preview-art-20 { background-color:#EBF8F6; border-radius:0.72px; box-sizing:border-box; height:round(25%, 1px); left:21.4286%; position:absolute; top:37.5%; width:round(14.2857%, 1px); }
.preview-art-21 { background-color:#EBF8F6; border-radius:0.72px; box-sizing:border-box; height:round(25%, 1px); left:64.2857%; position:absolute; top:37.5%; width:round(14.2857%, 1px); }
.preview-art-22 { box-sizing:border-box; height:98px; left:154px; position:absolute; top:99px; width:157px; }
.preview-art-25 { box-sizing:border-box; height:130.37px; left:162px; position:absolute; top:116px; width:144px; }
.preview-art-26 { width:144px; height:130.37px; left:0px; top:0px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-27 { box-sizing:border-box; filter:drop-shadow(#00000014 0px 0px 1.2px) drop-shadow(#0000001F 0px 6.63px 13.25px); height:141.27px; left:19.13px; position:absolute; rotate:14.81deg; top:-36.25px; transform-origin:0% 0%; width:143.23px; }
.preview-art-28 { align-items:start; border-radius:4.63401px; box-sizing:border-box; display:flex; flex-direction:column; height:108.04px; left:0px; outline:0.289625px solid #0000001F; outline-offset:-0.289625px; overflow:clip; position:absolute; rotate:-21.39deg; top:40.67px; transform-origin:0% 0%; width:111.51px; }
.preview-art-29 { align-items:center; background-color:#FAFAFA; box-sizing:border-box; display:flex; gap:3.48px; padding-block:5.21px; padding-left:2.32px; padding-right:4.63px; width:111.51px; }
.preview-art-30 { box-sizing:border-box; color:#000000; font-family:"JetBrains Mono", system-ui, sans-serif; font-size:5.76px; letter-spacing:0.02em; line-height:100%; width:max-content; }
.preview-art-31 { background-color:#D9D9D9; border-radius:144px; box-sizing:border-box; flex-shrink:0; height:2.88px; width:44.64px; }
.preview-art-32 { align-items:center; background-color:#FAFAFA; box-sizing:border-box; display:flex; width:111.51px; }
.preview-art-33 { align-items:center; border-top-color:#0000001F; border-top-style:solid; border-top-width:0.289625px; box-sizing:border-box; display:flex; flex-basis:99.92px; flex-grow:1; gap:2.9px; justify-content:center; min-width:0px; padding-bottom:6.95px; padding-left:2.32px; padding-right:4.63px; padding-top:3.48px; }
.preview-art-34 { box-sizing:border-box; flex-shrink:0; height:8.64px; position:relative; width:90.16px; }
.preview-art-35 { background-color:#D9D9D9; border-radius:144px; box-sizing:border-box; height:2.88px; left:0px; position:absolute; top:0px; width:52.73px; }
.preview-art-36 { background-color:#D9D9D9; border-radius:144px; box-sizing:border-box; height:2.88px; left:3.4px; position:absolute; top:5.76px; width:86.76px; }
.preview-art-37 { align-items:center; align-self:stretch; box-sizing:border-box; display:flex; flex-direction:column; flex-shrink:0; justify-content:center; min-height:0px; position:relative; width:8.11px; }
.preview-art-38 { align-self:stretch; box-sizing:border-box; flex-shrink:0; height:2.32px; min-width:0px; overflow:clip; }
.preview-art-39 { width:14.43px; flex-grow:1; flex-basis:0%; min-height:0px; height:0.58px; display:inline-block; overflow:visible; rotate:90deg; transform-origin:50% 50%; }
.preview-art-40 { align-items:center; background-color:#F7F7F7; box-sizing:border-box; display:flex; gap:2.9px; height:5.04px; justify-content:center; left:calc(50% + 0.2px); position:absolute; top:calc(50% + 0.81px); translate:-50% -50%; width:2.16px; }
.preview-art-41 { box-sizing:border-box; color:#0ED777; font-family:"JetBrains Mono", system-ui, sans-serif; font-size:3.19px; letter-spacing:-0.04em; line-height:150%; width:max-content; }
.preview-art-42 { align-items:center; align-self:stretch; border-top-color:#0000001F; border-top-style:solid; border-top-width:0.289625px; box-sizing:border-box; display:flex; flex-shrink:0; gap:2.9px; justify-content:center; min-height:0px; padding-bottom:6.95px; padding-top:3.48px; width:3.48px; }
.preview-art-43 { align-items:center; background-color:#F7F7F7; box-sizing:border-box; display:flex; gap:2.9px; height:5.04px; justify-content:center; left:calc(50% + 0.2px); position:absolute; top:calc(50% + 0.8px); translate:-50% -50%; width:2.16px; }
.preview-art-44 { align-items:center; border-top-color:#0000001F; border-top-style:solid; border-top-width:0.289625px; box-sizing:border-box; display:flex; flex-basis:111.51px; flex-grow:1; gap:2.9px; justify-content:center; min-width:0px; padding-block:3.48px; padding-left:2.32px; padding-right:4.63px; }
.preview-art-45 { box-sizing:border-box; flex-shrink:0; height:8.64px; position:relative; width:101.36px; }
.preview-art-46 { background-color:#D9D9D9; border-radius:144px; box-sizing:border-box; height:2.88px; left:0px; position:absolute; top:0px; width:59.29px; }
.preview-art-47 { background-color:#D9D9D9; border-radius:144px; box-sizing:border-box; height:2.88px; left:3.83px; position:absolute; top:5.76px; width:97.54px; }
.preview-art-48 { box-sizing:border-box; filter:drop-shadow(#00000014 0px 0px 1.2px) drop-shadow(#0000001F 0px 6.63px 13.25px); height:108.04px; left:17.367px; position:absolute; rotate:none; top:-9.344px; transform-origin:0% 0%; translate:none; width:111.51px; }
.preview-art-49 { align-items:start; border-radius:4.63401px; box-sizing:border-box; display:flex; flex-direction:column; height:108.04px; left:0px; outline:0.289625px solid #0000001F; outline-offset:-0.289625px; overflow:clip; position:absolute; top:0px; width:111.51px; }
.preview-art-50 { width:14.43px; flex-grow:1; flex-basis:4.27px; min-height:0px; display:inline-block; overflow:visible; rotate:90deg; transform-origin:50% 50%; }
.preview-art-51 { box-sizing:border-box; flex-shrink:0; height:2.36px; position:relative; width:6.71px; }
.preview-art-52 { left:0px; top:0px; width:6.71px; height:2.36px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-53 { align-items:center; background-color:#0857C3; border-radius:4.8px; box-sizing:border-box; display:flex; filter:drop-shadow(#00000014 0px 0px 1.2px) drop-shadow(#0000001F 0px 6.63px 13.25px); gap:4.8px; justify-content:center; left:54px; padding-block:6px; padding-inline:9.6px; position:absolute; rotate:-7.48deg; top:38.28px; transform-origin:0% 0%; }
.preview-art-54 { box-sizing:border-box; flex-shrink:0; height:9.6px; position:relative; width:9.6px; }
.preview-art-55 { left:0.5px; top:0.5px; width:8.6px; height:8.6px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-56 { align-content:center; box-sizing:border-box; color:#FFFFFF; font-family:"Inter", system-ui, sans-serif; font-size:9.6px; font-weight:500; letter-spacing:0.002em; line-height:14.4px; width:max-content; }
.preview-art-57 { align-items:center; background-color:#FFFFFF; border-color:#E3E6EB; border-radius:108px; border-style:solid; border-width:1.08px; box-sizing:border-box; display:flex; filter:drop-shadow(#00000014 0px 0px 1.08px) drop-shadow(#0000001F 0px 5.96px 11.93px); gap:4.32px; height:23.76px; left:86px; padding-block:2.16px; padding-inline:8.64px; position:absolute; rotate:-6.75deg; top:41.43px; transform-origin:0% 0%; }
.preview-art-58 { box-sizing:border-box; flex-shrink:0; height:12.96px; overflow:clip; position:relative; width:12.96px; }
.preview-art-59 { width:round(62.5%, 1px); height:round(43.75%, 1px); left:18.7543%; top:31.2516%; display:inline-block; overflow:visible; position:absolute; }
.preview-art-60 { box-sizing:border-box; color:#5D6564; display:flex; flex-wrap:wrap; font-family:"Geist", system-ui, sans-serif; font-size:12.96px; font-weight:300; justify-content:center; letter-spacing:0.324px; line-height:17.28px; text-align:center; width:max-content; }
.preview-art-61 { align-items:center; background-color:#FDF0E4; border-radius:2.4px; box-sizing:border-box; display:flex; filter:drop-shadow(#00000014 0px 0px 1.2px) drop-shadow(#0000001F 0px 6.63px 13.25px); justify-content:center; left:6px; padding-block:3.6px; padding-inline:4.8px; position:absolute; rotate:15.1deg; top:29px; transform-origin:0% 0%; }
.preview-art-62 { box-sizing:border-box; color:#000000; display:flex; flex-wrap:wrap; font-family:"BRIDigitalText-Regular_Medium", "BRI Digital Text", system-ui, sans-serif; font-size:8.4px; font-weight:500; justify-content:center; line-height:12px; text-align:center; white-space:pre-wrap; width:max-content; }
.preview-art-63 { background-color:#78B9E3; border-radius:23.2485px; box-sizing:border-box; filter:blur(2.4px); height:97.51px; left:0px; position:absolute; top:32.85px; width:144px; }
.preview-art-64 { width:144px; height:97.51px; left:0px; top:32.844px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-65 { box-sizing:border-box; height:22.58px; left:132.28px; position:absolute; rotate:-6.75deg; top:153.27px; transform-origin:0% 0%; width:224px; }
.preview-art-66 { bottom:-0.42px; box-sizing:border-box; position:absolute; right:14.08px; top:0px; width:3.84px; }
.preview-art-67 { left:1.92px; top:0px; bottom:0px; width:0.64px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-68 { width:3.84px; left:0px; top:0px; height:0.64px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-69 { width:3.84px; left:0px; bottom:-0.64px; height:0.64px; display:inline-block; overflow:visible; position:absolute; }
.preview-art-70 { align-items:start; background-color:#F316B0; border-radius:2.24px; box-sizing:border-box; display:flex; justify-content:center; left:4.48px; overflow:clip; padding-block:1.28px; padding-inline:1.92px; position:absolute; top:calc(50% + 0.5px); translate:0px -50%; }
.preview-art-71 { box-sizing:border-box; color:#FFFFFF; display:flex; flex-wrap:wrap; font-family:"Inter", system-ui, sans-serif; font-size:7.04px; font-weight:500; justify-content:center; letter-spacing:0.01em; line-height:10.24px; text-align:center; width:max-content; }
.cover:is(.is-preview-active, .is-preview-retiring) [data-pose="0"] { left: 136.6px; top: 79.75px; }
.cover:is(.is-preview-active, .is-preview-retiring) [data-pose="1"] { left: -12.67px; rotate: 1.39deg; top: -55.14px; }
.cover:is(.is-preview-active, .is-preview-retiring) [data-pose="2"] { left: 0; rotate: -8.5deg; top: 0; translate: -1.144px -40.466px; }
.cover:is(.is-preview-active, .is-preview-retiring) [data-pose="3"] { left: 72.12px; rotate: 5.36deg; top: -6px; }
.cover:is(.is-preview-active, .is-preview-retiring) [data-pose="4"] { left: 117px; top: 19.43px; }
.cover:is(.is-preview-active, .is-preview-retiring) [data-pose="5"] { left: -10.32px; rotate: -0.43deg; top: 0.07px; }

/* Preview artwork scales as one source canvas inside the existing cover. */
.cover > .cover-idle { display: block; }
.cover-scene {
  position: absolute;
  inset: 0 auto auto 0;
  width: 468px;
  height: 263px;
  overflow: clip;
  border-radius: 4px;
  pointer-events: none;
  letter-spacing: 0;
  font-size: 12px;
  line-height: 16px;
  opacity: 0;
  transform: scale(calc(100cqw / 468px));
  transform-origin: 0 0;
  transition: opacity 260ms ease-out;
}
.cover.is-preview-active .cover-scene { opacity: 1; transition-delay: 0ms; }
.cover--raya:not(.is-preview-active) .cover-scene { transition: none; }
.cover-scene img { max-width: none; border-radius: 0; aspect-ratio: auto; object-fit: contain; }
.cover-scene--raya, .cover-scene--system { background-position: center; background-size: cover; }
.cover-scene .preview-component { width: 100%; height: 100%; }
.cover-scene--badges { background: #FDFAFA; }
.preview-reward {
  position: absolute;
  left: 252px;
  top: 125px;
  width: 71.73px;
  height: 37.63px;
  overflow: hidden;
  border-radius: 3.5279px;
  background: #F3FBFD;
  font-family: Lato, sans-serif;
  font-size: 7.06px;
  line-height: 9.40773px;
  color: #66788A;
}
.preview-reward-content {
  height: 37.63px;
  display: flex;
  align-items: center;
  gap: 2.35px;
  padding: 7.06px 4.7px;
}
.preview-reward-content span { width: 42.33px; flex-shrink: 0; }
.preview-reward-content strong { display: block; margin-top: 2.35px; color: #03213E; font-weight: 700; }
.preview-reward-content img { width: 17.64px; height: 17.64px; }
.preview-scatter { transition: left 800ms cubic-bezier(.22, 1, .36, 1), top 800ms cubic-bezier(.22, 1, .36, 1), rotate 800ms cubic-bezier(.22, 1, .36, 1), translate 800ms cubic-bezier(.22, 1, .36, 1); }
.cover:not(.is-preview-active) .preview-scatter { transition: none; }
/* Keep the source rotation origin; grow only the measurement line. */
.preview-measure { opacity: 0; transition: none; }
.preview-measure > div { transform: scaleY(0); transform-origin: 50% 50%; transition: none; }
.is-preview-active .preview-measure { opacity: 1; transition: opacity 200ms ease 800ms; }
.is-preview-active .preview-measure > div { transform: scaleY(1); transition: transform 450ms ease 800ms; }
.is-preview-retiring .preview-measure { opacity: 1; transition: none; }
.is-preview-retiring .preview-measure > div { transform: scaleY(1); transition: none; }
.preview-pen { position: absolute; left: 215px; top: 180px; width: 40px !important; height: 40px !important; }
.preview-badge {
  position: absolute;
  transform-origin: 0 0;
  transition: translate 650ms cubic-bezier(.4, 0, .02, 1);
}
.preview-badge--banner {
  left: 58px;
  top: 151px;
  width: 92px;
  height: 92px;
  translate: 109px 0;
}
.preview-badge--banner .preview-float { border: .6px solid #E6E6E6; border-radius: 8.84615px; box-shadow: 0 3.06px 12.25px #00000026; overflow: hidden; }
.preview-badge--banner img { border-radius: 8.24615px; }
.preview-badge--blue { left: 285.12px; top: 31.99px; width: 85px; height: 85px; rotate: 18deg; translate: -57.85px 0; }
.preview-badge--gold { left: 330.21px; top: 182.14px; width: 75px; height: 72px; rotate: 10deg; translate: 0 80.86px; }
.preview-hand { position: absolute; left: 139px; top: 27px; width: 425.7px !important; height: 398.83px !important; }
.preview-badge .preview-float, .preview-badge img { width: 100%; height: 100%; }
.cover:is(.is-preview-active, .is-preview-retiring) .preview-badge { translate: 0 0; }
.cover:not(.is-preview-active) .preview-badge,
.cover.is-preview-completing .preview-badge { transition: none; }
.is-preview-active .preview-badge--blue { transition-delay: 650ms; }
.is-preview-active .preview-badge--gold { transition-delay: 1300ms; }
@media (prefers-reduced-motion: reduce) {
  .cover-scene { display: none; }
}

@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url("../asset/fonts/lato-regular.ttf") format("truetype"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url("../asset/fonts/lato-bold.ttf") format("truetype"); }