@font-face{font-family:Pretendard;src:url("/fonts/pretendard.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--black:#0b0a09;--night:#171410;--gold:#e2c092;--metal:#81613d;--paper:#f3ede3;--ink:#211a14;--muted:#c8bbaa;--line:#dec29a42;--paper-line:#82684a42;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:18px}body{margin:0;background:var(--black);color:var(--paper);font:400 16px/1.7 Pretendard,"Malgun Gothic",system-ui,sans-serif;word-break:keep-all}h1,h2,h3,p,figure{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;left:10px;top:10px;z-index:5;padding:10px;background:var(--gold);color:var(--ink);transform:translateY(-150%)}.skip:focus{transform:none}
header{border-bottom:1px solid var(--line);position:relative;z-index:2}.nav,.footer{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px}.brand{display:block;width:124px;height:58px;overflow:hidden;flex:none}.brand img{width:100%;height:100%;object-fit:cover;transform:scale(1.36)}nav{display:flex;gap:clamp(16px,3vw,40px);align-items:center;font-size:.9rem}nav a{padding:10px 0;color:var(--muted)}nav a:hover,nav a[aria-current]{color:var(--gold)}.mobile-menu{display:none}
.kix-stage{overflow:hidden;background:radial-gradient(ellipse at 78% 49%,#2b2015 0,transparent 53%),var(--black);border-bottom:1px solid var(--line)}.kix-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,4vw,66px);min-height:min(710px,calc(100svh - 76px));align-items:center;padding-block:clamp(55px,8vw,108px)}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:.78rem;font-weight:750;letter-spacing:.065em;color:var(--gold);margin-bottom:17px}.signal{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:4px;vertical-align:.08em}.kix-hero h1,.guide-hero h1{font-weight:820;letter-spacing:-.065em;line-height:1.02;font-size:clamp(3.2rem,6.5vw,6.7rem)}.intro{max-width:37ch;color:var(--muted);margin-top:22px;font-size:1.04rem}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:23px}.button,.outline{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:47px;padding:10px 17px;border:1px solid transparent;border-radius:2px;background:var(--gold);color:var(--ink);font-weight:770;font-size:.91rem;cursor:pointer}.button:hover{background:#f4d7ad}.quiet{min-height:44px;display:inline-flex;align-items:center;color:var(--paper);text-decoration:underline;text-underline-offset:4px;font-size:.89rem}.next{color:var(--muted);font-size:.87rem;margin-top:23px;padding-left:12px;border-left:1px solid var(--gold);max-width:35ch}.next b{display:block;color:var(--gold)}
.kix-art{position:relative;isolation:isolate;border:1px solid var(--line);padding:9px;background:#100e0b;box-shadow:0 22px 65px #0008}.kix-art::before,.kix-art::after{content:"";position:absolute;z-index:1;width:35px;height:35px;pointer-events:none}.kix-art::before{top:-1px;left:-1px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}.kix-art::after{right:-1px;bottom:-1px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold)}.kix-art img{display:block;width:100%;height:auto;aspect-ratio:2;object-fit:cover}.kix-art figcaption{display:flex;justify-content:space-between;gap:10px;padding:11px 3px 1px;color:var(--gold);font-size:.65rem;letter-spacing:.12em;font-weight:700}.agent-art img{aspect-ratio:1.48;object-position:75%;filter:sepia(.5) saturate(.58)}
.paper{background:var(--paper);color:var(--ink);color-scheme:light}.paper+.paper .wrap{border-top:1px solid var(--paper-line)}.section{padding-block:clamp(42px,6vw,86px)}.section h2,.form h2{font-size:clamp(2rem,4vw,3.85rem);letter-spacing:-.05em;line-height:1.12;font-weight:820}.paper .eyebrow{color:#705030}.lead,.reading{max-width:67ch;color:#524539;margin-top:19px}.lead+.timeline{margin-top:23px}.reading p+p{margin-top:14px}.ink-link{display:inline-block;margin-top:18px;color:#684728;font-weight:740;text-decoration:underline;text-underline-offset:4px}.rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 25px;margin-top:26px}.rows article{padding:14px 0;border-top:1px solid var(--paper-line)}.rows h3{font-size:1.3rem;letter-spacing:-.032em}.rows p,.faq p{margin-top:6px;color:#524539}.index{color:#76522d;font-size:.8rem;font-weight:780;font-variant-numeric:tabular-nums}.sample{display:block;background:#e9ddcb;color:#4d3b2c;margin-top:12px;padding:8px 11px;font-size:.88rem}.sample b{display:block;font-size:.75rem;color:#654627}.timeline .rows{grid-template-columns:minmax(0,750px);gap:0}.timeline article{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:baseline}.timeline article:nth-child(2){border-left:2px solid #98713e;padding-left:10px;grid-template-columns:30px minmax(0,1fr);background:#ece2d3}
.faq{max-width:750px;margin-top:22px}.faq details{border-top:1px solid var(--paper-line)}.faq summary{min-height:48px;padding:10px 0;font-weight:740;cursor:pointer}.faq details p{padding-bottom:15px}.guide-hero{background:radial-gradient(ellipse at 70% 40%,#2d2114,transparent 65%),var(--black)}.guide-hero .section{padding-block:clamp(54px,8vw,100px)}.guide-links{flex-wrap:wrap;gap:8px 18px;margin-top:18px}.guide-links a{text-decoration:underline;text-underline-offset:4px;color:var(--gold)}
.form{background:var(--night);max-width:750px;margin-block:clamp(38px,6vw,85px);padding:clamp(24px,5vw,52px);border:1px solid var(--line)}.notice{margin:12px 0 23px;color:var(--muted);max-width:48ch}.form form{display:grid;gap:17px}.form label{display:grid;grid-template-columns:max-content 1fr;gap:5px 7px;align-items:baseline;font-size:.95rem;font-weight:690}.form label span{color:var(--gold);font-size:.8rem}.form label .optional{color:var(--muted)}input,select,textarea{grid-column:1/-1;width:100%;min-height:46px;border:1px solid #9b8161;border-radius:3px;background:var(--black);color:var(--paper);padding:10px 12px;font-size:16px}textarea{min-height:98px;resize:vertical}input::placeholder,textarea::placeholder{color:#bead97}form .button{justify-self:start}.success{padding:19px;border:1px solid var(--gold)}.success p{margin-bottom:12px}.outline{background:transparent;color:var(--gold);border-color:var(--gold)}[hidden]{display:none!important}
footer{border-top:1px solid var(--line);color:var(--muted)}.footer a:not(.brand),.footer small{font-size:.82rem}.footer small{letter-spacing:.065em}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.paper :focus-visible{outline-color:var(--metal)}
@media(max-width:850px){.wrap{width:calc(100% - 52px)}.kix-hero{gap:25px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.nav,.footer{min-height:64px}.nav>nav{display:none}.mobile-menu{display:block}.mobile-menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);padding:7px 14px;min-height:44px;display:flex;align-items:center;gap:8px}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu summary::after{content:"+";color:var(--gold)}.mobile-menu[open] summary::after{content:"−"}.mobile-menu nav{display:grid;gap:0;position:absolute;inset:100% 0 auto;background:var(--night);border-bottom:1px solid var(--line);padding:5px 20px 13px}.mobile-menu nav a{border-bottom:1px solid var(--line);min-height:46px}.kix-hero{grid-template-columns:1fr;min-height:0;padding-block:37px 23px;gap:23px}.kix-hero h1,.guide-hero h1{font-size:clamp(2.75rem,11vw,4.5rem)}.intro{margin-top:14px}.actions,.next{margin-top:15px}.kix-art figcaption{font-size:.57rem}.agent-art img{aspect-ratio:1.7}.rows{grid-template-columns:1fr;gap:0}.footer{flex-wrap:wrap;padding-block:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The original broadcast photograph stays intact. Color grading belongs to the stage. */
.gold-mic { filter: grayscale(1) sepia(.92) saturate(1.6) brightness(1.25); }
.studio-stage { background: radial-gradient(ellipse at 82% 53%,#382917 0,transparent 60%),var(--black); }
.studio-stage .kix-hero { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.studio-shot { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.28; border: 1px solid #b892606b; background: #1b150f; box-shadow: 0 28px 72px #0009; }
.studio-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; animation: kix-cue 1.15s cubic-bezier(.22,1,.36,1) both; }
.studio-shot::before { content: ""; position: absolute; inset: 13px; border: 1px solid #e2c09248; z-index: 1; pointer-events: none; }
.studio-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#0b0a09ce,transparent 33%,transparent 70%,#0b0a097d); pointer-events: none; }
.studio-shot figcaption,.studio-hud { position: absolute; inset: 23px 25px auto; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #f4d7ad; font: 700 .68rem/1.4 ui-monospace,monospace; letter-spacing: .09em; }
.studio-shot figcaption span,.studio-hud span { padding: 5px 7px; background: #100c08cc; }
.studio-hud { inset: auto 25px 23px; }
.studio-meter { display: flex; align-items: end; gap: 4px; height: 17px; }
.studio-meter i { width: 3px; height: 100%; background: var(--gold); transform-origin: bottom; transform: scaleY(var(--level,.42)); animation: kix-meter .62s ease-out 2 alternate both; }
.studio-meter i:nth-child(3n) { --level: .77; animation-delay: 120ms; }
.studio-meter i:nth-child(3n + 1) { --level: .23; animation-delay: 220ms; }
@keyframes kix-cue { from { opacity: .65; transform: scale(1.055); } to { opacity: 1; transform: scale(1); } }
@keyframes kix-meter { from { transform: scaleY(var(--level,.42)); } to { transform: scaleY(.92); } }
.creator-format article { border-block-start: 2px solid #9e7545; }
.creator-format .index { display: block; margin-bottom: 8px; }
.media-section { background: #18130e; border-block: 1px solid var(--line); }
.media-section .media-label { font-size: .78rem; font-weight: 750; letter-spacing: .065em; }
.media-screen { border: 1px solid var(--line); padding: 8px; background: #0b0a09; }
.media-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16/7; object-fit: cover; object-position: 66% center; background: var(--black); }
.media-frame figcaption { color: var(--gold); font-size: .8rem; padding: 8px 3px 2px; }
@media(max-width:950px){
  header .nav>nav{display:none}
  header .mobile-menu{display:block}
  .mobile-menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);padding:7px 14px;min-height:44px;display:flex;align-items:center;gap:8px}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary::after{content:"+";color:var(--gold)}
  .mobile-menu[open] summary::after{content:"−"}
  .mobile-menu nav{display:grid;gap:0;position:absolute;inset:100% 0 auto;background:var(--night);border-bottom:1px solid var(--line);padding:5px 20px 13px}
  .mobile-menu nav a{border-bottom:1px solid var(--line);min-height:46px}
}
@media(max-width:760px){
  .studio-stage .kix-hero{grid-template-columns:1fr}
  .studio-shot{aspect-ratio:1.46}
  .studio-shot figcaption{inset:20px 20px auto}.studio-hud{inset:auto 20px 20px}
  .media-frame img{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){.studio-shot img,.studio-meter i{animation:none}}
/* The photo fills the stage behind the headline, as in the original layout. */
.studio-stage .kix-hero { position: relative; isolation: isolate; display: flex; min-height: min(760px,calc(100svh - 76px)); }
.studio-stage .hero-copy { width: min(57%,610px); }
.studio-stage .studio-shot { position: absolute; inset: 0 min(-48px,calc((1240px - 100vw)/2)) 0 36%; border: 0; aspect-ratio: auto; z-index: -1; box-shadow: none; background: transparent; }
.studio-stage .studio-shot img { object-position: 74% center; }
.studio-stage .studio-shot::before { inset: 23px 24px 23px 14%; }
.studio-stage .studio-shot::after { background: linear-gradient(90deg,#130f0b 0%,#130f0b60 19%,transparent 46%),linear-gradient(0deg,#100d0bc9 0%,transparent 24%,transparent 82%,#100d0b70 100%); }
.studio-stage .studio-shot figcaption { inset: 33px 34px auto calc(14% + 10px); }
.studio-stage .studio-hud { inset: auto 34px 33px calc(14% + 10px); }

@media(max-width:760px){
  .studio-stage .kix-hero { display: grid; min-height: 0; }
  .studio-stage .hero-copy { width: 100%; }
  .studio-stage .studio-shot { position: relative; inset: auto; z-index: 0; aspect-ratio: 1.4; margin-inline: -20px; }
  .studio-stage .studio-shot::before { inset: 13px; }
  .studio-stage .studio-shot::after { background: linear-gradient(0deg,#100d0bc9,transparent 37%,transparent 74%,#100d0b85); }
  .studio-stage .studio-shot figcaption { inset: 20px 20px auto; }
  .studio-stage .studio-hud { inset: auto 20px 20px; }
}

@media(min-width:761px){.studio-stage .studio-shot{mask-image:linear-gradient(90deg,transparent,#000 12%)}}
/* Highlight the top edge and use a darker base to show depth. */
.button {
  background: linear-gradient(180deg,#f5dab3 0%,#e3be8a 58%,#c79c66 100%);
  border: 1px solid #e8cda6;
  border-bottom-color: #a87743;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #fff2d8b0,0 3px 0 #765333,0 8px 17px #0006;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { background: linear-gradient(180deg,#ffe6c0,#dfb783); transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff2d8,0 5px 0 #765333,0 11px 20px #0006; }
.button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff2d8,0 1px 0 #765333,0 3px 7px #0005; }
.live-depth .rows { gap: 16px; }
.live-depth article {
  position: relative;
  padding: 24px 21px;
  border: 1px solid #cdb99d;
  border-top-color: #fff9ec;
  border-radius: 9px;
  background: linear-gradient(155deg,#fffbf3,#e9ddcb);
  box-shadow: inset 0 1px 0 #fff9ef,0 3px 0 #c7b397,0 11px 18px #61412620;
}
.live-depth .index { display: none; }
.live-depth h3 { line-height: 1.28; }
.live-depth p { margin-top: 10px; }
.media-screen,.form {
  border-top-color: #9e7951;
  box-shadow: inset 0 1px 0 #f1cda136,0 5px 0 #090704,0 15px 28px #0005;
}
@media(prefers-reduced-motion:reduce){.button{transition:none}.button:hover,.button:active{transform:none}}

.creator-showcase {
  padding: clamp(54px,8vw,114px) 0;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 42%,#2c2115 0%,#120e0b 45%,#0b0a09 77%);
}
.creator-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,1.4fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(16px,3vw,40px);
}
.creator-intro h2 {
  font-size: clamp(2.4rem,5vw,5rem);
  line-height: 1.02;
  letter-spacing: -.06em;
}
.creator-stage { position: relative; --card-width: clamp(200px,24vw,292px); }
.creator-stack {
  position: relative;
  height: calc(var(--card-width) * 16 / 9);
  margin: 0;
  padding: 0;
  list-style: none;
  isolation: isolate;
}
.creator-card {
  position: absolute;
  inset: 0 auto auto 50%;
  width: var(--card-width);
  aspect-ratio: 9/16;
  overflow: hidden;
  border: 2px solid #d6af7d;
  border-radius: 20px;
  background: #211912;
  box-shadow: 0 16px 46px #0009;
  transform: translateX(-50%);
  transition: transform .45s cubic-bezier(.2,.7,.3,1),filter .45s ease,opacity .45s ease;
}
.creator-card :is(img,video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.creator-card :is(img,video), .creator-dialog-media :is(img,video) { filter: brightness(.91) saturate(.88); }
.creator-card[data-offset="0"] {
  z-index: 3;
  border-color: #f1d5ad;
  box-shadow: 0 0 24px #d6a3663d,0 22px 46px #0009;
}
.creator-card[data-offset="1"],.creator-card[data-offset="-1"] { z-index: 2; filter: brightness(.65); }
.creator-card[data-offset="1"] { transform: translateX(-28%) translateY(9px) rotate(8deg) scale(.88); }
.creator-card[data-offset="-1"] { transform: translateX(-72%) translateY(9px) rotate(-8deg) scale(.88); }
.creator-card[data-offset="2"] { z-index: 1; transform: translateX(-50%) translateY(-22px) scale(.93); filter: brightness(.44); }
.creator-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid #d7b68985;
  border-radius: 50%;
  background: linear-gradient(#3b2c1d,#15100c);
  color: #f6dfba;
  box-shadow: 0 5px 13px #0009;
  cursor: pointer;
  font-size: 1.9rem;
  line-height: 1;
}
.creator-arrow:hover { border-color: var(--gold); }
.creator-prev { left: calc(50% - var(--card-width) / 2 - 34px); }
.creator-next { right: calc(50% - var(--card-width) / 2 - 34px); }
.creator-caption { max-width: 25ch; color: var(--muted); }
.creator-current { margin-bottom: 6px; color: var(--paper); font-weight: 780; font-size: clamp(1.25rem,2.7vw,2.25rem); }
@media(max-width: 850px) {
  .creator-layout { grid-template-columns: minmax(0,1fr); gap: 26px; text-align: center; }
  .creator-stage { width: min(100%,440px); margin-inline: auto; --card-width: clamp(175px,49vw,244px); }
  .creator-caption { max-width: none; }
}
@media(prefers-reduced-motion:reduce) { .creator-card { transition: none; } }
.studio-shot .studio-opening {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.studio-shot .studio-opening.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .studio-shot .studio-opening { display: none; }
}
/* Display only the KIX mark from the original brand artwork. */
.brand { height: 45px; }
.brand img {
  display: block;
  width: 230px;
  height: 115px;
  max-width: none;
  object-fit: contain;
  transform: translate(-64px, -23px);
}
/* Share content rows across neighboring cards at multi-column widths. */
@media (min-width: 761px) {
  .paper .rows { row-gap: 0; }
  .paper .rows:not(.timeline .rows) > article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  #support .rows > article { grid-row: span 4; }
  .paper .rows:not(.timeline .rows) > article > div { display: contents; }
  .paper .rows:not(.timeline .rows) > article > .index { grid-row: 1; }
  .paper .rows:not(.timeline .rows) > article h3 { grid-row: 2; }
  .paper .rows:not(.timeline .rows) > article p { grid-row: 3; }
  #support .sample { grid-row: 4; }
}
.creator-stage { touch-action: pan-y pinch-zoom; }
.creator-expand {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 50%;
  width: var(--card-width);
  transform: translateX(-50%);
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: zoom-in;
}
.creator-position { margin-top: 8px; color: var(--gold); font-variant-numeric: tabular-nums; }
.creator-dialog {
  width: min(92vw, 520px);
  max-height: 94dvh;
  margin: auto;
  padding: 14px;
  border: 1px solid var(--gold);
  border-radius: 16px;
  background: var(--night);
  color: var(--paper);
}
.creator-dialog::backdrop { background: #0b0a09df; }
.creator-dialog[open] { animation: creator-open .28s ease-out; }
.creator-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.creator-dialog h2 { font-size: 1rem; }
.creator-close { min-height: 44px; padding: 7px 12px; border: 1px solid var(--line); color: var(--gold); background: transparent; cursor: pointer; }
.creator-dialog-media :is(img, video) { display: block; width: 100%; height: min(72dvh,720px); object-fit: contain; }
@keyframes creator-open { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.creator-stage.is-lit::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0 auto 0 50%;
  width: var(--card-width);
  transform: translateX(-50%);
  box-sizing: border-box;
  border-radius: 20px;
  padding: 3px;
  pointer-events: none;
  background: linear-gradient(120deg,transparent 35%,#fff1ca 50%,transparent 65%) 130% center / 260% 100%;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: creator-glint 1.25s ease-out both;
}
@keyframes creator-glint {
  0% { opacity: 0; background-position: 130% center; }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; background-position: -30% center; }
}
@media (prefers-reduced-motion: reduce) {
  .creator-dialog[open], .creator-stage.is-lit::after { animation: none; }
  .creator-stage.is-lit::after { display: none; }
}
.creator-card[data-offset="3"], .creator-card[data-offset="4"] { visibility: hidden; }

.studio-shot .studio-status { padding: 0; background: none; }

:root {
  --surface-radius: 12px;
  --control-radius: 6px;
  --surface-shadow: 0 18px 48px #0005;
  --motion-ease: cubic-bezier(.22,1,.36,1);
}
.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -.12em;
}
.creator-arrow .ui-icon { width: 21px; height: 21px; }
.media-screen, .form, .kix-art {
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}
.media-frame img { border-radius: calc(var(--surface-radius) - 4px); }
.live-depth article {
  border-radius: var(--surface-radius);
  box-shadow: 0 14px 32px #6141261c;
}
.button, .outline, .creator-close, .mobile-menu summary {
  border-radius: var(--control-radius);
}
.button { box-shadow: inset 0 1px 0 #fff2d8b0, 0 8px 22px #0004; }
.button:hover {
  background: linear-gradient(180deg,#f5dab3 0%,#e3be8a 58%,#c79c66 100%);
}
.button:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #fff2d8, 0 3px 9px #0004; }
.creator-card { box-shadow: 0 20px 56px #0006; }
.creator-card[data-offset="0"] { box-shadow: 0 0 30px #d6a36630, 0 22px 58px #0007; }

@media (prefers-reduced-motion: no-preference) {
  .heading-reveal { animation: heading-in .55s var(--motion-ease); }
  .button, .outline, .creator-close, .creator-arrow, .mobile-menu summary, nav a, .ink-link, .live-depth article {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease, transform .3s var(--motion-ease);
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-out .16s ease-in both; }
  ::view-transition-new(root) { animation: page-in .26s ease-out both; }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 #fff2d8, 0 12px 28px #0005; }
  .creator-arrow:hover, .creator-close:hover, .mobile-menu summary:hover, .outline:hover {
    background-color: #e2c09218;
    border-color: var(--gold);
  }
  .live-depth article:hover { box-shadow: 0 19px 42px #61412626; }
}
@keyframes heading-in {
  from { opacity: .64; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes page-out { to { opacity: .75; } }
@keyframes page-in { from { opacity: .75; } }

@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}