/* P261: full-width rooftop world and a short brick-to-lavender transition. */
.showcase-gradient-bg{background:none!important}
#showcase{padding-bottom:0;background:linear-gradient(#fff 0%,#f3f7ff 48%,#b5d5ff 78%,#539efe 100%)}
#showcase .showcase-container{padding-bottom:120px}
.courier-following{overflow:hidden;background:linear-gradient(#c5a4ef 0%,#a890f8 18%,#78c8f0 39%,#50d8c8 57%,#1a5070 78%,#1a2050 90%,#000 100%)}
.courier-following #fitur{padding-top:96px;padding-bottom:96px;scroll-margin-top:110px;background:linear-gradient(180deg,transparent calc(100% - 120px),rgba(20,30,72,.3) 100%)}
/* P266: section "Introducing HeyTML Studio" dirancang untuk latar GELAP (teks putih/abu, cahaya ungu). Gradasi
   pembungkus di atas menaruhnya di tosca TERANG (kontras 1,1–1,75:1). Latar malam ditambatkan ke section itu
   sendiri — tidak ikut bergeser walau tinggi konten berubah; tanjakannya dimulai 120px sebelum section. */
.courier-following #cta-studio-section{background:linear-gradient(180deg,rgba(20,30,72,.3) 0,rgba(20,30,72,.62) 64px,rgba(20,30,72,.86) 124px,rgba(20,30,72,.9) 320px,rgba(14,8,40,.93) 65%,rgba(0,0,0,.96) 100%)}
.courier-following #cta-studio-section [data-translate="cine.cta.desc"]{color:#d1d5db}
/* P269: UI piksel 8-bit. Bingkai = peta piksel SVG (crispEdges) lewat border-image → tajam di layar HD mana pun.
   --u = ukuran satu "piksel" bingkai. Huruf piksel = Pixelify Sans milik beranda (berkas yang sama dengan hero). */
@font-face{font-family:'HeyPixel';src:url('../fonts/hero-personal/pixelify-sans.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
.courier{--courier-stage-height:clamp(440px,calc(100svh - 210px),660px);--u:3px;--px-font:'HeyPixel',ui-monospace,monospace;
 --px-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM0 5h1v1h-1zM8 5h1v1h-1zM0 6h1v1h-1zM8 6h1v1h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5z'/%3E%3Cpath fill='%23ffffff' d='M2 1h5v1h-5zM1 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1z'/%3E%3Cpath fill='%23fff4e0' d='M2 2h5v1h-5zM2 3h5v1h-5zM2 4h5v1h-5zM2 5h5v1h-5zM2 6h5v1h-5z'/%3E%3Cpath fill='%23e3c38a' d='M7 2h1v1h-1zM7 3h1v1h-1zM7 4h1v1h-1zM7 5h1v1h-1zM7 6h1v1h-1zM2 7h5v1h-5z'/%3E%3C/svg%3E");
 --px-bubble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M1 0h5v1h-5zM0 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM1 6h5v1h-5z'/%3E%3Cpath fill='%23ffffff' d='M1 1h5v1h-5zM1 2h5v1h-5zM1 3h5v1h-5zM1 4h5v1h-5z'/%3E%3Cpath fill='%23cfdcf8' d='M1 5h5v1h-5z'/%3E%3C/svg%3E");
 --px-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M1 0h5v1h-5zM0 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM1 6h5v1h-5z'/%3E%3Cpath fill='%23ffffff' d='M1 1h5v1h-5zM1 2h5v1h-5zM1 3h5v1h-5z'/%3E%3Cpath fill='%23b9c4de' d='M1 4h5v1h-5zM1 5h5v1h-5z'/%3E%3C/svg%3E");
 --px-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M1 0h5v1h-5zM0 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM1 6h5v1h-5z'/%3E%3Cpath fill='%234f7fe8' d='M1 1h5v1h-5z'/%3E%3Cpath fill='%2315306e' d='M1 2h5v1h-5zM1 3h5v1h-5zM1 4h5v1h-5zM1 5h5v1h-5z'/%3E%3C/svg%3E");
 --px-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M1 0h5v1h-5zM0 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM1 6h5v1h-5z'/%3E%3Cpath fill='%23ffffff' d='M1 1h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M2 1h4v1h-4zM1 2h5v1h-5zM1 3h5v1h-5zM1 4h5v1h-5z'/%3E%3Cpath fill='%23d98b1f' d='M1 5h5v1h-5z'/%3E%3C/svg%3E");
 --px-tail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23cfdcf8' d='M0 0h7v1h-7z'/%3E%3Cpath fill='%230b1f55' d='M0 1h2v1h-2zM5 1h2v1h-2zM1 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h3v1h-3zM2 2h3v1h-3zM3 3h1v1h-1z'/%3E%3C/svg%3E");
 position:relative;isolation:isolate;color:#09255b;background:#539efe;scroll-margin-top:96px;overflow:hidden;font-family:Geist,Arial,sans-serif}
/* P269-IKON-CSS mulai (dibuat pasang_ikon.py dari peta piksel agen ikon) */
.courier{--px-ribbon-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h5v1h-5zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM0 6h5v1h-5z'/%3E%3Cpath fill='%23ffb3cf' d='M1 1h3v1h-3z'/%3E%3Cpath fill='%23ff5c9a' d='M1 2h3v1h-3zM1 3h3v1h-3zM1 4h3v1h-3z'/%3E%3Cpath fill='%23d63a78' d='M1 5h3v1h-3z'/%3E%3C/svg%3E");--px-ribbon-tail-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h9v1h-9zM0 1h1v1h-1zM8 1h1v1h-1zM1 2h1v1h-1zM8 2h1v1h-1zM2 3h1v1h-1zM8 3h1v1h-1zM3 4h1v1h-1zM8 4h1v1h-1zM2 5h1v1h-1zM8 5h3v1h-3zM1 6h1v1h-1zM8 6h1v1h-1zM0 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM0 8h10v1h-10z'/%3E%3Cpath fill='%23ff5c9a' d='M9 0h2v1h-2zM9 1h2v1h-2zM9 2h2v1h-2zM9 3h2v1h-2z'/%3E%3Cpath fill='%23d63a78' d='M1 1h7v1h-7zM2 2h6v1h-6zM3 3h5v1h-5zM4 4h4v1h-4zM9 4h2v1h-2zM3 5h5v1h-5zM2 6h6v1h-6zM1 7h7v1h-7z'/%3E%3Cpath fill='%23a3245a' d='M9 6h2v1h-2zM9 7h1v1h-1z'/%3E%3C/svg%3E");--px-ribbon-tail-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff5c9a' d='M0 0h2v1h-2zM0 1h2v1h-2zM0 2h2v1h-2zM0 3h2v1h-2z'/%3E%3Cpath fill='%230b1f55' d='M2 0h9v1h-9zM2 1h1v1h-1zM10 1h1v1h-1zM2 2h1v1h-1zM9 2h1v1h-1zM2 3h1v1h-1zM8 3h1v1h-1zM2 4h1v1h-1zM7 4h1v1h-1zM0 5h3v1h-3zM8 5h1v1h-1zM2 6h1v1h-1zM9 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM10 7h1v1h-1zM1 8h10v1h-10z'/%3E%3Cpath fill='%23d63a78' d='M3 1h7v1h-7zM3 2h6v1h-6zM3 3h5v1h-5zM0 4h2v1h-2zM3 4h4v1h-4zM3 5h5v1h-5zM3 6h6v1h-6zM3 7h7v1h-7z'/%3E%3Cpath fill='%23a3245a' d='M0 6h2v1h-2zM1 7h1v1h-1z'/%3E%3C/svg%3E");--px-frame-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h8v1h-8zM0 3h8v1h-8z'/%3E%3Cpath fill='%23c27b52' d='M0 1h1v1h-1zM4 1h1v1h-1z'/%3E%3Cpath fill='%239a5b3b' d='M1 1h3v1h-3zM5 1h3v1h-3z'/%3E%3Cpath fill='%23fff0b3' d='M0 2h1v1h-1zM4 2h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M1 2h2v1h-2zM5 2h2v1h-2z'/%3E%3Cpath fill='%23d98b1f' d='M3 2h1v1h-1zM7 2h1v1h-1z'/%3E%3C/svg%3E");--px-frame-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h8v1h-8zM0 3h8v1h-8z'/%3E%3Cpath fill='%23d98b1f' d='M0 1h1v1h-1zM4 1h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M1 1h2v1h-2zM5 1h2v1h-2z'/%3E%3Cpath fill='%23fff0b3' d='M3 1h1v1h-1zM7 1h1v1h-1z'/%3E%3Cpath fill='%239a5b3b' d='M0 2h3v1h-3zM4 2h3v1h-3z'/%3E%3Cpath fill='%23c27b52' d='M3 2h1v1h-1zM7 2h1v1h-1z'/%3E%3C/svg%3E");--px-frame-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='8' viewBox='0 0 4 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1z'/%3E%3Cpath fill='%23c27b52' d='M1 0h1v1h-1zM1 4h1v1h-1z'/%3E%3Cpath fill='%23fff0b3' d='M2 0h1v1h-1zM2 4h1v1h-1z'/%3E%3Cpath fill='%239a5b3b' d='M1 1h1v1h-1zM1 2h1v1h-1zM1 3h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M2 1h1v1h-1zM2 2h1v1h-1zM2 5h1v1h-1zM2 6h1v1h-1z'/%3E%3Cpath fill='%23d98b1f' d='M2 3h1v1h-1zM2 7h1v1h-1z'/%3E%3C/svg%3E");--px-frame-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='8' viewBox='0 0 4 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1z'/%3E%3Cpath fill='%23d98b1f' d='M1 0h1v1h-1zM1 4h1v1h-1z'/%3E%3Cpath fill='%239a5b3b' d='M2 0h1v1h-1zM2 1h1v1h-1zM2 2h1v1h-1zM2 4h1v1h-1zM2 5h1v1h-1zM2 6h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M1 1h1v1h-1zM1 2h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1z'/%3E%3Cpath fill='%23fff0b3' d='M1 3h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%23c27b52' d='M2 3h1v1h-1zM2 7h1v1h-1z'/%3E%3C/svg%3E");--px-corner-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h12v1h-12zM0 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h6v1h-6zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM0 6h7v1h-7zM0 7h1v1h-1zM3 7h1v1h-1zM0 8h1v1h-1zM3 8h1v1h-1zM0 9h1v1h-1zM3 9h1v1h-1zM0 10h1v1h-1zM3 10h1v1h-1zM0 11h1v1h-1zM3 11h1v1h-1z'/%3E%3Cpath fill='%23fff0b3' d='M1 1h1v1h-1zM8 2h1v1h-1zM2 8h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M2 1h3v1h-3zM1 2h1v1h-1zM9 2h2v1h-2zM1 3h1v1h-1zM1 4h1v1h-1zM2 9h1v1h-1zM2 10h1v1h-1z'/%3E%3Cpath fill='%23d98b1f' d='M5 1h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM11 2h1v1h-1zM5 3h1v1h-1zM5 4h1v1h-1zM1 5h5v1h-5zM2 7h1v1h-1zM2 11h1v1h-1z'/%3E%3Cpath fill='%239a5b3b' d='M7 1h1v1h-1zM9 1h3v1h-3zM1 7h1v1h-1zM1 9h1v1h-1zM1 10h1v1h-1zM1 11h1v1h-1z'/%3E%3Cpath fill='%23c27b52' d='M8 1h1v1h-1zM1 8h1v1h-1z'/%3E%3Cpath fill='%23ffb3cf' d='M2 2h1v1h-1z'/%3E%3Cpath fill='%23ff5c9a' d='M3 2h1v1h-1zM2 3h2v1h-2z'/%3E%3Cpath fill='%23d63a78' d='M4 2h1v1h-1zM4 3h1v1h-1zM2 4h2v1h-2z'/%3E%3Cpath fill='%23a3245a' d='M4 4h1v1h-1z'/%3E%3C/svg%3E");--px-corner-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h12v1h-12zM5 1h1v1h-1zM11 1h1v1h-1zM5 2h1v1h-1zM11 2h1v1h-1zM0 3h6v1h-6zM11 3h1v1h-1zM5 4h1v1h-1zM11 4h1v1h-1zM5 5h1v1h-1zM11 5h1v1h-1zM5 6h7v1h-7zM8 7h1v1h-1zM11 7h1v1h-1zM8 8h1v1h-1zM11 8h1v1h-1zM8 9h1v1h-1zM11 9h1v1h-1zM8 10h1v1h-1zM11 10h1v1h-1zM8 11h1v1h-1zM11 11h1v1h-1z'/%3E%3Cpath fill='%239a5b3b' d='M0 1h3v1h-3zM4 1h1v1h-1zM10 7h1v1h-1zM10 9h1v1h-1zM10 10h1v1h-1zM10 11h1v1h-1z'/%3E%3Cpath fill='%23c27b52' d='M3 1h1v1h-1zM10 8h1v1h-1z'/%3E%3Cpath fill='%23d98b1f' d='M6 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM6 3h1v1h-1zM6 4h1v1h-1zM6 5h5v1h-5zM9 7h1v1h-1zM9 11h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M7 1h3v1h-3zM1 2h2v1h-2zM10 2h1v1h-1zM10 3h1v1h-1zM10 4h1v1h-1zM9 9h1v1h-1zM9 10h1v1h-1z'/%3E%3Cpath fill='%23fff0b3' d='M10 1h1v1h-1zM3 2h1v1h-1zM9 8h1v1h-1z'/%3E%3Cpath fill='%23d63a78' d='M7 2h1v1h-1zM7 3h1v1h-1zM8 4h2v1h-2z'/%3E%3Cpath fill='%23ff5c9a' d='M8 2h1v1h-1zM8 3h2v1h-2z'/%3E%3Cpath fill='%23ffb3cf' d='M9 2h1v1h-1z'/%3E%3Cpath fill='%23a3245a' d='M7 4h1v1h-1z'/%3E%3C/svg%3E");--px-corner-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M8 0h1v1h-1zM11 0h1v1h-1zM8 1h1v1h-1zM11 1h1v1h-1zM8 2h1v1h-1zM11 2h1v1h-1zM8 3h1v1h-1zM11 3h1v1h-1zM8 4h1v1h-1zM11 4h1v1h-1zM5 5h7v1h-7zM5 6h1v1h-1zM11 6h1v1h-1zM5 7h1v1h-1zM11 7h1v1h-1zM0 8h6v1h-6zM11 8h1v1h-1zM5 9h1v1h-1zM11 9h1v1h-1zM5 10h1v1h-1zM11 10h1v1h-1zM0 11h12v1h-12z'/%3E%3Cpath fill='%23d98b1f' d='M9 0h1v1h-1zM9 4h1v1h-1zM6 6h5v1h-5zM6 7h1v1h-1zM6 8h1v1h-1zM0 9h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM6 10h1v1h-1z'/%3E%3Cpath fill='%239a5b3b' d='M10 0h1v1h-1zM10 1h1v1h-1zM10 2h1v1h-1zM10 4h1v1h-1zM0 10h3v1h-3zM4 10h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M9 1h1v1h-1zM9 2h1v1h-1zM10 7h1v1h-1zM10 8h1v1h-1zM1 9h2v1h-2zM10 9h1v1h-1zM7 10h3v1h-3z'/%3E%3Cpath fill='%23fff0b3' d='M9 3h1v1h-1zM3 9h1v1h-1zM10 10h1v1h-1z'/%3E%3Cpath fill='%23c27b52' d='M10 3h1v1h-1zM3 10h1v1h-1z'/%3E%3Cpath fill='%23a3245a' d='M7 7h1v1h-1z'/%3E%3Cpath fill='%23d63a78' d='M8 7h2v1h-2zM7 8h1v1h-1zM7 9h1v1h-1z'/%3E%3Cpath fill='%23ff5c9a' d='M8 8h2v1h-2zM8 9h1v1h-1z'/%3E%3Cpath fill='%23ffb3cf' d='M9 9h1v1h-1z'/%3E%3C/svg%3E");--px-corner-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1f55' d='M0 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM0 5h7v1h-7zM0 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM6 7h1v1h-1zM0 8h1v1h-1zM6 8h6v1h-6zM0 9h1v1h-1zM6 9h1v1h-1zM0 10h1v1h-1zM6 10h1v1h-1zM0 11h12v1h-12z'/%3E%3Cpath fill='%239a5b3b' d='M1 0h1v1h-1zM1 1h1v1h-1zM1 2h1v1h-1zM1 4h1v1h-1zM7 10h1v1h-1zM9 10h3v1h-3z'/%3E%3Cpath fill='%23d98b1f' d='M2 0h1v1h-1zM2 4h1v1h-1zM1 6h5v1h-5zM5 7h1v1h-1zM5 8h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM11 9h1v1h-1zM5 10h1v1h-1z'/%3E%3Cpath fill='%23ffcf5a' d='M2 1h1v1h-1zM2 2h1v1h-1zM1 7h1v1h-1zM1 8h1v1h-1zM1 9h1v1h-1zM9 9h2v1h-2zM2 10h3v1h-3z'/%3E%3Cpath fill='%23c27b52' d='M1 3h1v1h-1zM8 10h1v1h-1z'/%3E%3Cpath fill='%23fff0b3' d='M2 3h1v1h-1zM8 9h1v1h-1zM1 10h1v1h-1z'/%3E%3Cpath fill='%23d63a78' d='M2 7h2v1h-2zM4 8h1v1h-1zM4 9h1v1h-1z'/%3E%3Cpath fill='%23a3245a' d='M4 7h1v1h-1z'/%3E%3Cpath fill='%23ff5c9a' d='M2 8h2v1h-2zM3 9h1v1h-1z'/%3E%3Cpath fill='%23ffb3cf' d='M2 9h1v1h-1z'/%3E%3C/svg%3E")}
/* P269-IKON-CSS selesai */
.courier *{box-sizing:border-box}
.courier [hidden]{display:none!important}
.courier .courier-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.courier-sprite{position:absolute;width:0;height:0;overflow:hidden}
.courier .px-icon,.courier .px-art{display:block;flex:none;overflow:visible}
.courier-inner{position:relative;width:100%;padding:0;margin:0}
.courier-play{height:var(--courier-stage-height);position:relative;overflow:hidden;background:#539efe;outline-offset:-3px;border:0;border-radius:0;box-shadow:none}
.courier-play:focus-visible{outline:3px solid #fff}
.courier-backdrop,.courier-canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;image-rendering:auto}
.courier-transition-top{position:absolute;inset:0 0 auto;height:64px;background:linear-gradient(#539efe,transparent);z-index:1;pointer-events:none}
/* P269 poin 7: redup untuk kartu/jeda/akhir duduk DI BAWAH .courier-transition-top (z-index 1) dan mulai transparan
   di tepi atas → sambungan ke latar halaman tetap gradasi, tidak ada garis biru terpotong di mode apa pun. */
.courier-dim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .24s steps(4,end);background:linear-gradient(180deg,rgba(16,20,58,0) 0,rgba(16,20,58,.16) 72px,rgba(16,20,58,.42) 180px,rgba(16,20,58,.52) 100%)}
.courier-play.is-dimmed .courier-dim{opacity:.7}
.courier-play.is-modal .courier-dim{opacity:1}
.courier-play.is-modal .courier-hud,.courier-play.is-modal .courier-counter{opacity:.4;pointer-events:none}
.courier-foundation{position:relative;isolation:isolate;background:#c5a4ef;--foundation-fade:104px}
.courier-foundation:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("../images/courier/masonry-p268.webp") left top/160px 160px repeat;mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--foundation-fade)),transparent 100%)}
.courier-transition-bottom{position:relative;height:var(--foundation-fade);pointer-events:none}
.courier-overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:start end;padding:28px max(4vw,24px) 20px;overflow:auto;background:transparent}
.courier-panel{width:320px;max-width:100%;max-height:100%;min-height:0;padding:64px 30px 28px;background:transparent url('../images/courier/menu.webp?v=261b') center/100% 100% no-repeat;color:#09255b;overflow:auto;overscroll-behavior:contain;text-align:left}
.courier-panel h3{font:800 23px/1.12 Geist,Arial,sans-serif;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid #a69b8a}
.courier-panel p{font-size:14px;line-height:1.45;margin:0 0 12px}
.courier button,.courier a{touch-action:manipulation}
.courier button:focus-visible,.courier a:focus-visible{outline:3px solid #f7bd5c;outline-offset:3px}
.courier-primary{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;width:100%;padding:12px 20px;min-height:52px;background:transparent url('../images/courier/button.webp?v=261b') center/100% 100% no-repeat;color:#fff;border:0;box-shadow:none;font:700 15px/1.25 Geist,Arial,sans-serif;text-decoration:none;cursor:pointer}
.courier-primary:hover{filter:brightness(1.12)}
.courier-primary:active{transform:translateY(2px)}
.courier-primary:disabled{opacity:.7;cursor:wait}
.courier-primary .px-icon{width:20px;height:20px}
.courier-secondary{display:block;margin:10px auto 0;text-decoration:underline;font-size:14px;font-weight:700;min-height:32px;background:none;border:0;color:inherit;cursor:pointer}
.courier-skip{display:block;text-align:center;font-size:13px;margin-top:10px;text-decoration:underline;text-underline-offset:3px;color:inherit}
/* Kartu akhir: permainan sudah selesai → tautan "main nanti saja ↓" tidak relevan (cukup CTA + main lagi) */
.courier-panel.is-finished .courier-skip{display:none}
/* Chip piksel (rekap kenangan & waktu) */
.courier-tally{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.courier-panel .courier-tally{margin:2px 0 14px}
.courier-chip{display:inline-flex;align-items:center;min-height:30px;padding:2px 8px 3px;font:700 15px/1 var(--px-font);color:#0b1f55;white-space:nowrap;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-gold);border-image-slice:2 fill;border-image-repeat:stretch}
/* HUD kanan atas */
.courier-hud{position:absolute;top:18px;right:20px;z-index:2;pointer-events:none;transition:opacity .2s steps(2,end)}
.courier-actions{display:flex;gap:8px;pointer-events:auto}
.courier-actions button,.courier-directions button{display:grid;place-items:center;width:52px;min-height:52px;padding:0;background:transparent url('../images/courier/control.webp?v=261b') center/100% 100% no-repeat;border:0;color:#fff;cursor:pointer;filter:drop-shadow(0 3px 0 rgba(11,31,85,.32))}
.courier-actions .px-icon{width:24px;height:24px}
.courier-actions button:hover{filter:brightness(1.12) drop-shadow(0 3px 0 rgba(11,31,85,.32))}
.courier-actions button:active{transform:translateY(2px);filter:drop-shadow(0 1px 0 rgba(11,31,85,.32))}
.courier-actions [data-action=sound][aria-pressed=true] .px-sound-off,.courier-actions [data-action=sound][aria-pressed=false] .px-sound-on{display:none}
.courier-play:has(.courier-overlay:not([hidden])) .courier-hud{visibility:hidden}
/* Penghitung kenangan kiri atas */
.courier-counter{position:absolute;top:18px;left:20px;z-index:2;display:flex;align-items:center;gap:8px;min-height:44px;padding:3px 12px 5px 8px;font:700 19px/1 var(--px-font);color:#0b1f55;pointer-events:none;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-bubble);border-image-slice:2 fill;border-image-repeat:stretch;filter:drop-shadow(0 3px 0 rgba(11,31,85,.28));transition:opacity .2s steps(2,end)}
.courier-counter .px-icon{width:18px;height:18px}
.courier-counter.is-bump{animation:courier-bump .5s steps(5,end)}
.courier-play:has(.courier-overlay:not([hidden])) .courier-counter{visibility:hidden}
/* Saat perayaan serah kado, HUD & penghitung minggir → spanduk "sampai" tampil lega seperti adegan film */
.courier.is-celebrating .courier-hud,.courier.is-celebrating .courier-counter{opacity:0;pointer-events:none}
/* Spanduk tahap (1/3 · 2/3 · 3/3) */
.courier-banner{position:absolute;top:24px;left:50%;z-index:4;display:flex;align-items:center;gap:12px;padding:6px 16px 8px;transform:translateX(-50%);white-space:nowrap;pointer-events:none;color:#fff;font:700 22px/1 var(--px-font);letter-spacing:.06em;text-transform:uppercase;text-shadow:2px 2px 0 #0b1f55;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-navy);border-image-slice:2 fill;border-image-repeat:stretch;filter:drop-shadow(0 4px 0 rgba(11,31,85,.3))}
.courier-banner-tag{padding:2px 7px 3px;font-size:14px;letter-spacing:0;color:#0b1f55;text-shadow:none;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-gold);border-image-slice:2 fill;border-image-repeat:stretch}
.courier-banner.is-show{animation:courier-banner 2.4s steps(5,end) both}
/* Gelembung aksi: melayang di atas benda/penerima, posisi diatur skrip lewat transform */
.courier-prompt{position:absolute;left:0;top:0;z-index:3;padding:0;margin:0;border:0;background:none;color:inherit;cursor:pointer;will-change:transform}
.courier-prompt-body{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:3px 10px 5px 8px;color:#0b1f55;font:700 17px/1 var(--px-font);white-space:nowrap;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-bubble);border-image-slice:2 fill;border-image-repeat:stretch;filter:drop-shadow(0 4px 0 rgba(11,31,85,.3));transform-origin:var(--tail,50%) 100%;animation:courier-bob 1s steps(4,end) infinite}
.courier-prompt-body:after{content:"";position:absolute;left:calc(var(--tail,50%) - 7px - var(--u)*2);bottom:calc(var(--u)*-5);width:calc(var(--u)*7);height:calc(var(--u)*5);background:var(--px-tail) center/100% 100% no-repeat;pointer-events:none}
.courier-prompt.is-pop .courier-prompt-body{animation:courier-pop .34s steps(4,end),courier-bob 1s steps(4,end) .34s infinite}
.courier-prompt:hover .courier-prompt-body{filter:brightness(1.05) drop-shadow(0 4px 0 rgba(11,31,85,.3))}
.courier-prompt:active .courier-prompt-body{filter:drop-shadow(0 1px 0 rgba(11,31,85,.3));margin-top:3px}
.courier-prompt:focus-visible{outline:none}
.courier-prompt:focus-visible .courier-prompt-body{outline:3px solid #f7bd5c;outline-offset:4px}
.courier-prompt-icon{width:28px;height:28px}
.courier-prompt-key{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 5px 2px;font:700 13px/1 var(--px-font);color:#0b1f55;background:none;border-style:solid;border-width:3px 3px 4px;border-image-source:var(--px-key);border-image-slice:2 2 3 2 fill;border-image-width:3px 3px 4px;border-image-repeat:stretch}
.courier-deliver .courier-prompt-body{color:#7a1f47}
/* Kartu kenangan & bantuan: bingkai krem bersudut tangga, tekstur kertas dither 2px */
.courier-memory,.courier-help{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:14px;background:transparent}
/* Wadah dialog menerima fokus program (tabindex=-1): cincin fokus bawaannya menggambar garis gelap di tepi atas area
   game → dimatikan; tombol di dalam kartu tetap punya penanda fokus kuning sendiri. */
.courier-memory:focus,.courier-help:focus,.courier-play:focus:not(:focus-visible){outline:none}
.courier-card{position:relative;width:min(420px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"ribbon" "media" "body" "close";gap:12px;padding:12px 16px 16px;color:#0b1f55;text-align:center;border-style:solid;border-width:calc(var(--u)*3);border-image-source:var(--px-card);border-image-slice:3;border-image-repeat:stretch;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.7),transparent 62%),repeating-conic-gradient(rgba(150,104,44,.05) 0 25%,transparent 0 50%) 0 0/4px 4px,#fff4e0;background-clip:padding-box;filter:drop-shadow(0 calc(var(--u)*2) 0 rgba(11,31,85,.4));animation:courier-card-in .34s steps(4,end)}
.courier-card>.courier-ribbon{grid-area:ribbon}
.courier-card>.courier-gallery,.courier-card>.courier-letter,.courier-card>.courier-player{grid-area:media}
.courier-card>.courier-card-body{grid-area:body}
.courier-card>.courier-card-close{grid-area:close}
/* Pita judul: badan pink lentur (tinggi ikut jumlah baris) + ekor bertakik asli dari peta piksel agen di kedua sisi */
.courier-ribbon{position:relative;isolation:isolate;justify-self:center;max-width:calc(100% - var(--u)*18);margin:0 calc(var(--u)*9) calc(var(--u)*3);padding:3px 14px 4px;color:#fff;border-style:solid;border-width:calc(var(--u)*2) var(--u);border-image-source:var(--px-ribbon-band);border-image-slice:2 1 fill;border-image-repeat:stretch}
.courier-ribbon:before,.courier-ribbon:after{content:"";position:absolute;z-index:-1;bottom:calc(var(--u)*-5);width:calc(var(--u)*11);height:calc(var(--u)*9);background:center/100% 100% no-repeat;pointer-events:none}
.courier-ribbon:before{left:calc(var(--u)*-9);background-image:var(--px-ribbon-tail-l)}
.courier-ribbon:after{right:calc(var(--u)*-9);background-image:var(--px-ribbon-tail-r)}
.courier-ribbon h3{margin:0;font:700 21px/1.15 var(--px-font);letter-spacing:.02em;text-shadow:2px 2px 0 rgba(11,31,85,.6);text-wrap:balance}
.courier-card-body{margin:0;font-size:15px;line-height:1.5;color:#3a3556}
.courier-card-close{justify-self:center;width:min(100%,260px)}
.courier-card[data-kind=message] .courier-card-body{display:none}
/* Galeri foto: bingkai kayu-emas, tombol ◀ ▶, keterangan tulisan tangan, deret thumbnail */
.courier-gallery{display:grid;gap:10px;min-width:0}
/* Bingkai galeri dari ubin piksel agen: tepi kayu bertrim emas (periode 4 piksel) + 4 sudut berpermata pink */
.courier-frame{position:relative;padding:calc(var(--u)*4);background:var(--px-frame-top) left top/calc(var(--u)*8) calc(var(--u)*4) repeat-x,var(--px-frame-bottom) left bottom/calc(var(--u)*8) calc(var(--u)*4) repeat-x,var(--px-frame-left) left top/calc(var(--u)*4) calc(var(--u)*8) repeat-y,var(--px-frame-right) right top/calc(var(--u)*4) calc(var(--u)*8) repeat-y,#2a1a3c;filter:drop-shadow(0 calc(var(--u)*2) 0 rgba(11,31,85,.35))}
.courier-frame-view{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1d1433;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.courier-frame-view img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}
.courier-frame.is-turning .courier-frame-view img{animation:courier-wipe .36s steps(6,end)}
.courier-corner{position:absolute;z-index:1;width:calc(var(--u)*12);height:calc(var(--u)*12);background:center/100% 100% no-repeat;pointer-events:none}
.courier-corner.is-tl{top:0;left:0;background-image:var(--px-corner-tl)}
.courier-corner.is-tr{top:0;right:0;background-image:var(--px-corner-tr)}
.courier-corner.is-bl{bottom:0;left:0;background-image:var(--px-corner-bl)}
.courier-corner.is-br{bottom:0;right:0;background-image:var(--px-corner-br)}
.courier-gallery-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:44px;padding:0;margin-top:-22px;color:#fff;cursor:pointer;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-navy);border-image-slice:2 fill;border-image-repeat:stretch;background:none;filter:drop-shadow(0 3px 0 rgba(11,31,85,.35))}
.courier-gallery-nav .px-icon{width:22px;height:22px}
.courier-gallery-nav.is-prev{left:-12px}
.courier-gallery-nav.is-next{right:-12px}
.courier-gallery-nav:hover{filter:brightness(1.18) drop-shadow(0 3px 0 rgba(11,31,85,.35))}
.courier-gallery-nav:active{margin-top:-20px;filter:drop-shadow(0 1px 0 rgba(11,31,85,.35))}
.courier-caption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:0 4px;text-align:left}
.courier-caption-text{font:400 25px/1.05 Yellowtail,cursive;color:#8a2a55}
.courier-gallery-count{font:700 14px/1 var(--px-font);color:#5b6480;white-space:nowrap}
.courier-thumbs{display:flex;justify-content:center;gap:10px}
.courier-thumbs button{position:relative;width:58px;height:44px;padding:0;overflow:visible;cursor:pointer;background:#1d1433;border:3px solid #0b1f55;box-shadow:0 3px 0 rgba(11,31,85,.3)}
.courier-thumbs img{display:block;width:100%;height:100%;object-fit:cover;opacity:.72}
.courier-thumbs button[aria-pressed=true]{border-color:#ffcf5a;box-shadow:0 0 0 2px #0b1f55,0 3px 0 rgba(11,31,85,.3);transform:translateY(-3px)}
.courier-thumbs button[aria-pressed=true] img,.courier-thumbs button:hover img{opacity:1}
.courier-thumbs button[aria-pressed=true]:after{content:"";position:absolute;left:50%;bottom:-13px;width:10px;height:6px;margin-left:-5px;background:#0b1f55;clip-path:polygon(0 100%,50% 0,100% 100%);animation:courier-blink 1s steps(1) infinite}
/* Surat: amplop piksel membuka, kertas bergaris, isi diketik ala RPG */
.courier-letter{display:grid;gap:10px;justify-items:center;min-width:0}
/* Amplop (geometri agen ikon): badan 40x26, tutup 40x14 berengsel di tepi atas badan — terbuka = dibalik ke atas,
   ruang 14 piksel di atas badan disiapkan untuk tutup yang terbuka; segel berpusat di (20, 12.5) badan. */
.courier-envelope{position:relative;width:calc(var(--u)*40);height:calc(var(--u)*40);flex:none}
.courier-env-back,.courier-env-front{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--u)*26)}
.courier-env-back{z-index:1}
.courier-env-front{z-index:2}
.courier-env-flap{position:absolute;left:0;top:calc(var(--u)*14);z-index:3;width:100%;height:calc(var(--u)*14);transform-origin:50% 0;overflow:visible}
.courier-env-seal{position:absolute;left:calc(var(--u)*15.5);top:calc(var(--u)*22);z-index:4;width:calc(var(--u)*9);height:calc(var(--u)*9)}
.courier-letter.is-open .courier-env-flap{animation:courier-flap .5s steps(4,end) both}
.courier-letter.is-open .courier-env-seal{animation:courier-seal .6s steps(5,end) both}
.courier-paper{position:relative;z-index:2;width:100%;margin:0;padding:10px 16px 12px;text-align:left;color:#2a2344;cursor:default;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-bubble);border-image-slice:2;border-image-repeat:stretch;background:repeating-linear-gradient(180deg,transparent 0 23px,#dde7fb 23px 24px) 0 9px/100% 24px,#fffdf8;background-clip:padding-box}
.courier-letter.is-open .courier-paper{animation:courier-unfold .5s steps(5,end) .18s both}
.courier-letter.is-typing .courier-paper{cursor:pointer}
.courier-letter-greet{margin:0 0 2px;font:400 24px/1.1 Yellowtail,cursive;color:#c23a73}
.courier-letter-text{min-height:72px;margin:0;font-size:15px;line-height:24px}
.courier-letter.is-typing .courier-letter-text:after{content:"";display:inline-block;width:8px;height:15px;margin-left:2px;vertical-align:-2px;background:#0b1f55;animation:courier-blink .7s steps(1) infinite}
.courier-letter-sign{margin:4px 0 0;text-align:right;font:400 22px/1.1 Yellowtail,cursive;color:#8a2a55}
.courier-letter-skip{min-height:28px;padding:2px 6px;border:0;background:none;color:#5b6480;cursor:pointer;font:700 13px/1 var(--px-font);animation:courier-blink 1.2s steps(1) infinite}
/* Pemutar kaset: gulungan berputar, EQ balok piksel mengikuti suara, bilah progres bersegmen */
.courier-player{display:grid;gap:12px;justify-items:center;min-width:0}
/* Kaset (agen ikon, 48x30): lebar kelipatan bulat (240 = 5x) supaya piksel tajam; gulungan berputar pada pusatnya
   (16.5,16.5) & (31.5,16.5) satuan viewBox; label di area krem polos x 5–42, y 3–10. */
.courier-cassette{position:relative;width:240px;max-width:100%;aspect-ratio:48/30;filter:drop-shadow(0 calc(var(--u)*2) 0 rgba(11,31,85,.35))}
.courier-cassette-body{position:absolute;inset:0;width:100%;height:100%}
.courier-cassette .px-reel{transform-box:view-box}
.courier-cassette .px-reel-l{transform-origin:16.5px 16.5px}
.courier-cassette .px-reel-r{transform-origin:31.5px 16.5px}
.courier-player.is-playing .px-reel{animation:courier-spin 1.1s steps(8) infinite}
.courier-cassette-label{position:absolute;left:10.4%;right:10.4%;top:10%;height:26.7%;margin:0;display:grid;place-content:center;gap:2px;text-align:center;font:700 16px/1 var(--px-font);color:#0b1f55;white-space:nowrap;overflow:hidden}
.courier-cassette-label span{font-size:12px;color:#8a2a55}
.courier-eq{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:36px}
.courier-eq i{width:10px;height:calc(var(--h,1) * 4px);background:linear-gradient(to top,#37c46b 0 20px,#ffcf5a 20px 28px,#ff5c9a 28px 32px) bottom/100% 32px no-repeat;-webkit-mask:repeating-linear-gradient(to top,#000 0 3px,transparent 3px 4px);mask:repeating-linear-gradient(to top,#000 0 3px,transparent 3px 4px)}
.courier-song-bar{width:min(100%,240px);height:14px;padding:0;overflow:hidden;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-navy);border-image-slice:2 fill;border-image-repeat:stretch}
.courier-song-bar span{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,#ffcf5a 0 6px,#ffe9a8 6px 8px)}
.courier-song-button{width:min(100%,240px)}
/* Kartu bantuan: tuts keyboard & tombol layar mini */
.courier-keys{display:grid;gap:10px;margin:0;padding:0;list-style:none;text-align:left}
.courier-keys li{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);align-items:center;gap:12px;font-size:15px;font-weight:600;color:#2a2344}
.courier-keycaps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.courier-keycaps kbd{display:inline-grid;place-items:center;min-width:32px;height:34px;padding:0 6px 2px;font:700 14px/1 var(--px-font);color:#0b1f55;background:none;border-style:solid;border-width:4px 4px 6px;border-image-source:var(--px-key);border-image-slice:2 2 3 2 fill;border-image-width:4px 4px 6px;border-image-repeat:stretch}
.courier-keycaps kbd.is-wide{min-width:62px}
.courier-mini{display:inline-grid;place-items:center;width:40px;height:40px;background:transparent url('../images/courier/control.webp?v=261b') center/100% 100% no-repeat}
.courier-mini.is-wide{width:72px;background-image:url('../images/courier/button.webp?v=261b')}
.courier-mini.is-bubble{background:none;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-bubble);border-image-slice:2 fill;border-image-repeat:stretch}
.courier-mini .px-icon{width:22px;height:22px}
.courier-keys--touch{display:none}
.courier-keys--touch li{grid-template-columns:96px minmax(0,1fr)}
@media(pointer:coarse){.courier-keys--desk{display:none}.courier-keys--touch{display:grid}}
/* Perayaan serah kado */
.courier-delivered{position:absolute;left:50%;top:13%;z-index:4;display:grid;justify-items:center;gap:12px;width:min(92%,660px);transform:translateX(-50%);text-align:center;pointer-events:none}
.courier-delivered-title{margin:0;font:700 clamp(34px,5.6vw,66px)/1 var(--px-font);letter-spacing:.05em;text-transform:uppercase;color:#ffcf5a;white-space:nowrap;text-shadow:0 4px 0 #c47515,4px 0 0 #0b1f55,-4px 0 0 #0b1f55,0 -4px 0 #0b1f55,0 8px 0 #0b1f55,4px 4px 0 #0b1f55,-4px 4px 0 #0b1f55,4px -4px 0 #0b1f55,-4px -4px 0 #0b1f55,4px 8px 0 #0b1f55,-4px 8px 0 #0b1f55,6px 13px 0 rgba(11,31,85,.35)}
.courier-delivered-title span{display:inline-block;animation:courier-wave 1.1s steps(4,end) calc(var(--i) * 70ms) infinite}
.courier-delivered.is-show .courier-delivered-title{animation:courier-drop .62s steps(6,end) both}
.courier-delivered-sub{margin:0;padding:5px 14px 7px;font:700 17px/1.3 var(--px-font);color:#fff;text-shadow:2px 2px 0 #0b1f55;border-style:solid;border-width:calc(var(--u)*2);border-image-source:var(--px-navy);border-image-slice:2 fill;border-image-repeat:stretch}
.courier-delivered .courier-tally{justify-content:center;margin:0}
.courier-delivered .courier-chip{animation:courier-pop .3s steps(4,end) both}
.courier-delivered-skip{margin:4px 0 0;font:700 13px/1 var(--px-font);color:#fff;text-shadow:2px 2px 0 #0b1f55;animation:courier-blink 1s steps(1) infinite}
.courier-controls{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(24px,calc((100% - 1120px)/2));background:transparent}
.courier-directions{display:flex;gap:10px}
.courier-directions button{width:58px;min-height:56px}
.courier-directions .px-icon{width:33px;height:33px}
.courier-controls button{touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;font-weight:700}
.courier-controls [data-control=jump]{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:140px;min-height:56px;padding:10px 18px 12px;background:transparent url('../images/courier/button.webp?v=261b') center/100% 100% no-repeat;border:0;color:white;font:700 19px/1 var(--px-font);letter-spacing:.02em;text-shadow:2px 2px 0 #0b1f55;filter:drop-shadow(0 3px 0 rgba(11,31,85,.32))}
.courier-controls [data-control=jump] .px-icon{width:22px;height:22px}
.courier-controls button:active,.courier-controls button.is-down{transform:translateY(3px);filter:brightness(1.18) drop-shadow(0 0 0 rgba(11,31,85,0))}
.courier-controls.is-fresh [data-control=right]:not(.is-down){animation:courier-nudge 1.1s steps(2,end) infinite}
.courier-controls.is-locked{opacity:.55;pointer-events:none}
@keyframes courier-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes courier-pop{0%{transform:scale(.3) translateY(12px);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes courier-bump{0%,100%{transform:scale(1)}40%{transform:scale(1.28)}}
@keyframes courier-banner{0%{transform:translate(-50%,-190%);opacity:0}10%{transform:translate(-50%,10%);opacity:1}15%{transform:translate(-50%,0)}86%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,-190%);opacity:0}}
@keyframes courier-card-in{0%{transform:translateY(18px) scale(.94);opacity:0}100%{transform:none;opacity:1}}
@keyframes courier-wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0)}}
@keyframes courier-flap{0%{transform:scaleY(1)}50%{transform:scaleY(0)}100%{transform:scaleY(-1)}}
@keyframes courier-seal{0%{transform:none;opacity:1}40%{transform:translateY(-8px) scale(1.25);opacity:1}100%{transform:translateY(-14px) scale(.6);opacity:0}}
@keyframes courier-unfold{0%{clip-path:inset(0 0 100% 0);transform:translateY(-12px)}100%{clip-path:inset(0);transform:none}}
@keyframes courier-spin{to{transform:rotate(360deg)}}
@keyframes courier-drop{0%{transform:translateY(-140%) scale(1.3);opacity:0}70%{transform:translateY(8%) scale(1);opacity:1}100%{transform:none;opacity:1}}
@keyframes courier-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes courier-blink{50%{opacity:0}}
@keyframes courier-nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
/* Layar lebar: kartu foto & kaset dua kolom (media kiri, cerita kanan); surat lebih lebar dengan amplop di samping */
@media(min-width:768px){
 .courier-card[data-kind=photo],.courier-card[data-kind=music]{width:min(720px,100%);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"media ribbon" "media body" "media close";align-items:center;column-gap:24px;text-align:left}
 .courier-card[data-kind=photo] .courier-ribbon,.courier-card[data-kind=music] .courier-ribbon{justify-self:start}
 .courier-card[data-kind=photo] .courier-card-close,.courier-card[data-kind=music] .courier-card-close{justify-self:start}
 .courier-card[data-kind=message]{width:min(620px,100%)}
 .courier-card[data-kind=message] .courier-letter{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:18px}
 .courier-card[data-kind=message] .courier-letter-skip{grid-column:2}
 .courier-card--help{width:min(460px,100%)}
}
@media(max-width:767px){
 #showcase .showcase-container{padding-bottom:80px}
 .courier-following #fitur{padding-top:64px;padding-bottom:64px;background:linear-gradient(180deg,transparent calc(100% - 96px),rgba(20,30,72,.3) 100%)}
 .courier-following #cta-studio-section{background:linear-gradient(180deg,rgba(20,30,72,.3) 0,rgba(20,30,72,.62) 48px,rgba(20,30,72,.86) 92px,rgba(20,30,72,.9) 280px,rgba(14,8,40,.93) 65%,rgba(0,0,0,.96) 100%)}
 .courier{--courier-stage-height:clamp(290px,calc(100svh - 170px),620px);--u:2px}
 .courier-overlay{padding:22px 16px;place-items:start end}
 .courier-panel{width:280px;padding:58px 26px 25px}
 .courier-panel h3{font-size:21px}
 .courier.has-started .courier-overlay{place-items:center}
 .courier-hud{top:14px;right:14px}
 .courier-counter{top:14px;left:14px;min-height:40px;font-size:17px;padding:3px 10px 5px 6px}
 .courier-banner{top:74px;gap:8px;padding:5px 12px 7px;font-size:17px}
 .courier-controls{padding:10px 16px}
 .courier-directions{gap:12px}
 .courier-directions button{width:62px;min-height:60px}
 .courier-controls [data-control=jump]{width:134px;min-height:60px}
 .courier-transition-top{height:44px}
 .courier-foundation{--foundation-fade:72px}
 .courier-prompt-body{font-size:16px}
 .courier-prompt-icon{width:24px;height:24px}
 .courier-memory,.courier-help{padding:10px}
 .courier-card{gap:10px;padding:10px 12px 12px}
 .courier-ribbon h3{font-size:18px}
 .courier-card-body{font-size:14px}
 .courier-caption-text{font-size:22px}
 .courier-thumbs button{width:52px;height:40px}
 .courier-delivered{top:11%}
 .courier-delivered-sub{font-size:15px}
}
@media(max-width:767px) and (max-height:760px){
 .courier-thumbs{display:none}
 .courier-frame-view{aspect-ratio:16/10}
 .courier-envelope{display:none}
 .courier-letter-text{min-height:0}
 .courier-card{gap:8px}
}
@media(max-width:1023px){html.courier-playing #heychat-bubble{visibility:hidden;pointer-events:none}}
@media(max-width:767px) and (max-height:650px){
 .courier.has-started .courier-panel{padding:34px 24px 20px}
 .courier.has-started .courier-panel [data-overlay-body],.courier-panel.is-finished .courier-skip{display:none}
 .courier-panel.is-finished h3{font-size:20px}
 .courier-memory,.courier-help{padding:8px}
 .courier-card{padding:8px 10px 10px}
 .courier-card-body{font-size:13px;line-height:1.4}
 .courier-cassette{width:192px}
 .courier-eq{height:24px}
}
@media(max-height:500px) and (max-width:1023px) and (orientation:landscape){
 .courier{--courier-stage-height:clamp(170px,calc(100svh - 180px),280px);--u:2px}
 .courier-overlay{padding:10px 24px;place-items:center end}
 .courier-panel{width:320px;padding:40px 28px 20px}
 .courier.has-started .courier-panel{padding:22px 25px 16px}
 .courier.has-started .courier-panel [data-overlay-body],.courier.has-started .courier-skip{display:none}
 .courier-panel h3{font-size:20px;margin-bottom:8px;padding-bottom:6px}
 .courier-hud{top:8px;right:16px}
 .courier-counter{top:8px;left:12px;min-height:34px;font-size:15px}
 .courier-actions button{width:44px;min-height:44px}
 .courier-banner{top:10px;font-size:15px}
 .courier-memory,.courier-help{padding:6px}
 .courier-card,.courier-card[data-kind]{width:min(600px,100%);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"media ribbon" "media body" "media close";gap:4px 12px;padding:6px 10px 8px;text-align:left;align-items:center}
 .courier-card--help{grid-template-columns:minmax(0,1fr);grid-template-areas:"ribbon" "media" "body" "close";text-align:center}
 .courier-card--help .courier-ribbon,.courier-card--help .courier-card-close{justify-self:center}
 .courier-keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
 .courier-keys li,.courier-keys--touch li{grid-template-columns:auto minmax(0,1fr);gap:8px}
 .courier-mini{width:32px;height:32px}
 .courier-mini.is-wide{width:56px}
 .courier-keycaps kbd{min-width:26px;height:28px;font-size:12px}
 .courier-ribbon{justify-self:start;padding:3px 12px 5px}
 .courier-ribbon h3{font-size:15px}
 .courier-card-body{font-size:12px;line-height:1.35}
 .courier-card-close{justify-self:start;min-height:40px;padding:6px 16px}
 .courier-frame{padding:5px}
 .courier-frame-view{width:150px}
 .courier-thumbs,.courier-caption,.courier-envelope,.courier-eq,.courier-letter-skip{display:none}
 .courier-letter-text{min-height:0;font-size:12px;line-height:18px}
 .courier-letter-greet,.courier-letter-sign{font-size:17px}
 .courier-paper{padding:6px 10px;max-width:260px}
 .courier-cassette{width:144px}
 .courier-song-bar,.courier-song-button{width:144px}
 .courier-song-button{min-height:40px;padding:6px 10px}
 .courier-keys{gap:4px}
 .courier-keys li{font-size:13px}
 .courier-delivered{top:6%;gap:6px}
 .courier-delivered-title{font-size:30px}
 .courier-delivered-sub{font-size:13px}
 .courier-controls{padding-right:104px}
 .courier-directions button{width:52px;min-height:48px}
 .courier-controls [data-control=jump]{width:120px;min-height:48px}
}
@media(prefers-reduced-motion:reduce){.courier *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.courier-following #fitur h2{color:#fff}.courier-following #fitur [data-translate="features.subtitle"]{color:#fffffff0}
.courier-primary[data-action=start]:after{content:"›";font-size:25px;line-height:1;margin-left:12px}

@media(max-width:350px){.courier:not(.has-started) .courier-panel{width:214px;padding:42px 20px 20px}.courier:not(.has-started) .courier-panel h3{font-size:18px}.courier:not(.has-started) .courier-panel p{font-size:14px}.courier:not(.has-started) .courier-overlay{padding:14px 10px}.courier-prompt-key{display:none}}
@media(pointer:coarse){.courier-prompt-key{display:none}}
@media(max-height:500px) and (max-width:1023px) and (orientation:landscape){
 .courier-panel,.courier.has-started .courier-panel{padding:22px 25px 16px}
 .courier-panel [data-overlay-body]{display:none}
}