:root { --ink:#1d1228; --cream:#fff2ed; --pink:#ffacc8; --muted:#e8ccd9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font:16px/1.55 system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,.stage:focus-visible { outline:3px solid #ff81b0; outline-offset:5px; }
header,footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:19px 6%; border-bottom:1px solid #ffcee437; }
.brand { font-weight:850; letter-spacing:.12em; font-size:14px; }
.brand span { color:var(--pink); font-size:24px; vertical-align:middle; margin-right:7px; }
.header-link,footer>a:last-child { font-size:13px; font-weight:750; }
.hero { isolation:isolate; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:690px; padding:46px 7%; background:radial-gradient(ellipse at 78% 45%,#ad567c 0%,#5c284e 34%,#22132e 72%); }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#201226f5,#20122686 56%,#36182b68),url('assets/fuji.webp') right center/cover; opacity:.55; }
.copy { position:relative; z-index:1; }
.ticker { display:inline-block; color:var(--pink); margin:0 0 19px; font-weight:850; letter-spacing:.2em; font-size:13px; }
h1,h2 { font:400 clamp(70px,9vw,148px)/.88 Georgia,"Times New Roman",serif; letter-spacing:-.06em; margin:0; }
h1 em,h2 em { color:var(--pink); font-weight:400; }
.lead { max-width:360px; color:var(--muted); font-size:clamp(16px,1.55vw,22px); margin:26px 0; }
.actions { display:flex; flex-wrap:wrap; gap:11px; }
.button { display:inline-flex; align-items:center; justify-content:center; background:var(--pink); color:var(--ink); border:1px solid var(--pink); border-radius:6px; padding:12px 17px; font-weight:800; font-size:13px; transition:transform .2s; }
.button:hover { transform:translateY(-3px); }
.outline { background:#25142dc0; color:var(--cream); border-color:#ffc5de60; }
.display { min-width:0; }
.stage { display:grid; place-items:center; perspective:900px; height:clamp(340px,43vw,610px); touch-action:pan-y; cursor:grab; }
.stage.dragging { cursor:grabbing; }
.coin { --depth:10px; position:relative; width:clamp(240px,35vw,490px); aspect-ratio:1; transform-style:preserve-3d; transform:rotateX(-6deg) rotateY(-17deg); transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.dragging .coin { transition:none; }
.face,.rim { position:absolute; inset:0; border-radius:50%; }
.face { overflow:hidden; backface-visibility:hidden; }
.front { transform:translateZ(var(--depth)); background:#d4cbd1; box-shadow:0 16px 55px #230e29a3; }
.front img { position:absolute; width:108%; height:108%; left:-3.7%; top:-3.1%; max-width:none; user-select:none; pointer-events:none; }
.front::after { content:""; position:absolute; inset:0; background:linear-gradient(124deg,#ffd4f545,transparent 55%,#c3507138); pointer-events:none; }
.rim { background:repeating-linear-gradient(90deg,#847580 0 2px,#d5c7cf 2px 5px); box-shadow:0 0 0 3px #bdb0bd; }
.back { transform:rotateY(180deg) translateZ(var(--depth)); display:grid; place-content:center; text-align:center; border:9px double #f3e2e7; background:radial-gradient(#efe4e9,#a794a6); color:#472c42; }
.back span { font-size:clamp(65px,10vw,130px); line-height:1.1; }
.back strong { font:700 clamp(20px,4vw,45px) Georgia,serif; }
.back small { font-weight:850; letter-spacing:.18em; margin-top:12px; }
.controls { display:flex; justify-content:center; align-items:center; gap:12px; color:#f9d7e6; font-size:12px; }
.controls button { cursor:pointer; background:#2d1733; color:var(--cream); border:1px solid #ffbfda78; padding:8px 13px; border-radius:6px; font:inherit; font-weight:800; }
.story { padding:65px 7%; background:#fff0eb; color:#371b34; }
.story-text { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; margin-bottom:32px; }
h2 { font-size:clamp(48px,6vw,90px); }
h2 em { color:#9b3461; }
.story p { font-size:clamp(16px,1.6vw,21px); max-width:430px; }
.panorama { display:block; width:100%; border-radius:13px; }
footer { border-top:1px solid #ffcee437; border-bottom:0; }
@media(max-width:720px) {
 .hero,.story-text { grid-template-columns:minmax(0,1fr); }
 .hero { padding:36px 6% 30px; text-align:center; }
 h1 { font-size:clamp(69px,15vw,105px); }
 .lead { margin:20px auto; }
 .actions { justify-content:center; }
 .stage { height:clamp(305px,70vw,430px); }
 .coin { width:clamp(230px,59vw,345px); }
 .story { padding:40px 6%; }
 .story-text { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }