.ki:not([open]) { display:none; }
.ki[open] {
  position:fixed; inset:0; width:100%; height:100%; height:100dvh;
  max-width:none; max-height:none; margin:0; padding:0; border:0;
  overflow:auto; overscroll-behavior:contain; isolation:isolate;
  color:#fcfcf4; background:#10271e;
  font-family:var(--body,system-ui); animation:ki-leave 4.9s linear both;
}
.ki::backdrop { background:transparent; }
html:has(.ki[open]) { overflow:hidden; }
.ki-stage,.ki-stage::after,.ki-stage video,.ki-stage [data-intro-poster] { position:absolute; inset:0; width:100%; height:100%; }
.ki-stage { z-index:-1; overflow:hidden; background:radial-gradient(ellipse at 72% 38%,#526446,#152d22 65%); }
.ki-stage video,.ki-stage [data-intro-poster] { object-fit:cover; object-position:70% 50%; pointer-events:none; }
.ki-poster-motion [data-intro-poster] { animation:ki-poster-drift 4.9s ease-out both; transform-origin:76% 45%; }
.ki-stage::after { content:""; background:linear-gradient(90deg,#091d16f2 0%,#0b2118d6 29%,#10291d80 50%,transparent 73%),linear-gradient(0deg,#0a1c168c,transparent 23%); }
.ki-inner {
  position:relative; display:flex; flex-direction:column; margin:auto;
  width:min(90%,1500px); min-height:100%; padding:clamp(24px,5vh,62px) 0 clamp(22px,4vh,48px);
}
.ki-brand { align-self:flex-start; display:inline-flex; }
.ki-brand img { display:block; width:clamp(188px,18vw,318px); height:auto; aspect-ratio:1152/339; }
.ki-copy { margin:auto 0; padding:30px 0; width:57%; max-width:810px; }
.ki-copy p { margin:0; }
#ki-company { color:#fae6ab; font-size:clamp(.88rem,1.36vw,1.3rem); font-weight:600; letter-spacing:.035em; }
.ki-motto { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:.23em; padding:.23em 0; font:600 clamp(2.7rem,5.1vw,5.7rem)/1.12 var(--serif,Georgia,serif); text-wrap:balance; }
.ki-motto i { color:#e0c68f; font-style:normal; font-size:.76em; }
.ki-category { color:#ecf1e9; font-size:clamp(.98rem,1.32vw,1.24rem); }
.ki-entry { margin-top:clamp(20px,3.6vw,48px); display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.ki-entry button { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-height:48px; border:1px solid transparent; border-radius:6px; padding:13px 22px; color:#193025; background:#f6dda1; font:700 1rem/1.25 var(--body,system-ui); cursor:pointer; }
.ki-entry button:hover { background:#ffe9b5; }
.ki-entry button:focus-visible { outline:2px solid white; outline-offset:4px; }
#ki-timing,.ki-foot { font-size:.82rem; color:#e7ede2; }
.ki-foot { display:flex; align-items:center; gap:16px; font-size:.63rem; font-weight:650; letter-spacing:.17em; }
.ki-foot i { width:72px; height:1px; background:#9ba884; }
@keyframes ki-leave { 0%,90% {opacity:1} 100% {opacity:0} }
@keyframes ki-poster-drift { from {transform:scale(1.025)} to {transform:scale(1)} }
@media (min-width:701px) {
  html:not(:lang(zh)) .ki-motto { font-size:clamp(2.35rem,4.15vw,4.8rem); }
}
@media (min-width:701px) and (min-aspect-ratio:16/10) {
  /* Keep the complete pouch in view on wide displays. Blend the left edge of
     the film into the copy area instead of enlarging and cropping the bag. */
  .ki-stage video,.ki-stage [data-intro-poster] {
    left:auto; right:0; width:160vh; width:160dvh; max-width:100%;
    mask-image:linear-gradient(90deg,transparent,#000 22%);
  }
}
@media (max-width:900px) and (orientation:portrait) {
  .ki-inner { width:88%; padding:max(16px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom)); }
  .ki-brand img { width:clamp(138px,39vw,180px); }
  .ki-stage [data-intro-poster] { height:65%; object-position:80% 50%; }
  .ki-stage::after { background:radial-gradient(ellipse 76% 23% at 8% 0%,#091e17c2,transparent),linear-gradient(0deg,#10271e 0% 32%,#10271ee8 41%,#10271e00 60%),linear-gradient(180deg,#10271e47,transparent 22%); }
  .ki-copy { width:100%; margin:auto 0 0; padding:12px 0 16px; }
  #ki-company { font-size:clamp(.76rem,2.8vw,.92rem); line-height:1.45; }
  html:not(:lang(zh)) .ki-motto,.ki-motto { font-size:clamp(1.65rem,6.8vw,2.8rem); line-height:1.1; }
  .ki-category { font-size:clamp(.84rem,3.2vw,1rem); line-height:1.45; }
  .ki-entry { align-items:flex-start; flex-direction:column; gap:8px; margin-top:14px; }
  .ki-entry button { min-width:178px; min-height:48px; padding:12px 18px; }
  #ki-timing { font-size:.72rem; }
  .ki-foot { opacity:.80; font-size:.57rem; }
}
@media (max-width:900px) and (max-height:640px) and (orientation:portrait) {
  .ki-inner { padding-top:max(12px,env(safe-area-inset-top)); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .ki-brand img { width:132px; }
  .ki-copy { padding-bottom:6px; }
  .ki-motto,html:not(:lang(zh)) .ki-motto { font-size:clamp(1.5rem,6.6vw,1.85rem); }
  .ki-entry { gap:5px; margin-top:10px; }
  .ki-foot { display:none; }
}
@media (max-height:520px) and (orientation:landscape) {
  .ki-inner { padding:12px 0; }
  .ki-copy { padding:8px 0; }
  .ki-entry { margin-top:10px; }
  .ki-motto { font-size:clamp(1.8rem,4vw,3rem); }
  .ki-foot { display:none; }
}
@media (prefers-reduced-motion:reduce) { .ki[open],.ki-poster-motion [data-intro-poster] { animation:none; } }