:root{
  --bg-1:#09070a; --bg-2:#140f17; --gold:#c7a86a; --gold-soft:#ead7a9; --ink:#f1e9de;
  --line:rgba(234,215,169,.20); --shadow:rgba(0,0,0,.34);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(46,149,141,.12), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(199,168,106,.11), transparent 22%),
    linear-gradient(180deg,var(--bg-1),var(--bg-2) 42%, #110d13);
  font-family:"BIZ UDPMincho","Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
  min-height:100vh; overflow-x:hidden; position:relative; letter-spacing:.02em;
}
.dust{
  position:fixed; inset:0; pointer-events:none; opacity:.08;
  background-image: radial-gradient(rgba(255,255,255,.7) .45px, transparent .6px), radial-gradient(rgba(234,215,169,.5) .35px, transparent .55px);
  background-size:10px 10px, 14px 14px; mix-blend-mode:screen;
}
.ambient{position:fixed; border-radius:50%; pointer-events:none; filter:blur(90px); opacity:.22;}
.ambient-a{width:340px;height:340px; left:-60px; top:110px; background:radial-gradient(circle, rgba(46,149,141,.55), rgba(46,149,141,0));}
.ambient-b{width:380px;height:380px; right:-90px; top:260px; background:radial-gradient(circle, rgba(165,88,122,.48), rgba(165,88,122,0));}
.hero{padding:86px 20px 42px;}
.hero-inner{
  max-width:980px; margin:0 auto; padding:44px 38px; border-radius:26px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), linear-gradient(135deg, rgba(199,168,106,.10), rgba(46,149,141,.05));
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset, 0 28px 56px var(--shadow); position:relative;
}
.hero-inner::before,.hero-inner::after{content:"✦"; position:absolute; color:var(--gold-soft); font-size:18px; opacity:.78;}
.hero-inner::before{left:18px;top:14px} .hero-inner::after{right:18px;bottom:16px}
.eyebrow{margin:0 0 12px; color:var(--gold); font-family:"Times New Roman","Georgia","Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing:.18em; text-transform:uppercase; font-size:12px;}
h1{margin:0; font-family:"Yu Mincho","Hiragino Mincho ProN","Times New Roman",serif; font-size:clamp(38px,6vw,70px); line-height:1.08; font-weight:700; letter-spacing:.06em; text-shadow:0 0 22px rgba(234,215,169,.08);}
.lead{margin:18px 0 0; color:#efe2cf; line-height:1.95; font-size:15px;}
.hero-meta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.hero-meta span,.tag{border:1px solid var(--line); border-radius:999px; padding:9px 14px; background:rgba(255,255,255,.018); box-shadow:0 0 0 1px rgba(255,255,255,.015) inset; font-size:12px; color:var(--gold-soft);}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}
.jump-button,.download-button{
  display:inline-block; border-radius:999px; padding:11px 18px; text-decoration:none; font-weight:700;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif; transition:transform .15s ease, box-shadow .15s ease;
}
.jump-button{color:#1c1517; background:linear-gradient(180deg, #efddb2, var(--gold)); box-shadow:0 10px 24px rgba(199,168,106,.22); border:1px solid rgba(255,255,255,.15);}
.download-button{color:#f8f1e6; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), linear-gradient(180deg, #5e2843, #341624); border:1px solid rgba(234,215,169,.24); box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 20px rgba(46,149,141,.08);}
.download-button.large{margin-top:10px}
.jump-button:hover,.download-button:hover{transform:translateY(-1px)}
.download-note{margin:14px 0 0; font-size:13px; color:#d6c7b4;}
code{background:rgba(255,255,255,.05); padding:2px 6px; border-radius:6px;}
.container{max-width:1100px; margin:0 auto; padding:0 20px 84px;}
.panel{
  margin-top:24px; padding:24px; border-radius:24px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(43,30,47,.94), rgba(27,20,30,.94)); box-shadow:0 18px 42px rgba(0,0,0,.24); position:relative;
}
.panel::before{content:""; position:absolute; inset:10px; border-radius:18px; border:1px solid rgba(234,215,169,.07); pointer-events:none;}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(234,215,169,.10);}
.panel h2{margin:0; font-family:"Yu Mincho","Hiragino Mincho ProN","Times New Roman",serif; font-size:26px; letter-spacing:.08em;}
.tag{font-family:"Times New Roman","Georgia","Yu Mincho",serif; letter-spacing:.14em; text-transform:uppercase;}
.terms{margin:0; padding-left:1.2rem; line-height:1.95;}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:20px;}
.gallery-card{
  position:relative; padding:10px; border-radius:20px;
  background: linear-gradient(180deg, rgba(106,41,70,.95), rgba(51,20,33,.98) 62%, rgba(32,14,23,.98));
  box-shadow:0 0 0 1px rgba(255,255,255,.035) inset, 0 12px 26px rgba(0,0,0,.32);
}
.gallery-card::before{content:""; position:absolute; inset:6px; border-radius:15px; border:1px dashed rgba(234,215,169,.16); pointer-events:none;}
.gallery-frame{
  min-height:236px; padding:10px; border-radius:14px; position:relative; overflow:hidden; border:1px solid rgba(234,215,169,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), linear-gradient(180deg, #251a21, #120d13);
}
.gallery-frame::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 18%, rgba(255,255,255,.08), transparent 16%), radial-gradient(circle at 78% 15%, rgba(46,149,141,.12), transparent 20%), radial-gradient(circle at 70% 70%, rgba(234,215,169,.08), transparent 22%);
  pointer-events:none;
}
.chip-image{
  width:100%; height:auto; aspect-ratio:9/13; object-fit:cover; border-radius:10px; display:block; position:relative; z-index:1;
  border:1px solid rgba(234,215,169,.14); box-shadow:0 0 0 1px rgba(255,255,255,.02) inset; background:#120d13;
}
.spark{position:absolute; border-radius:50%; pointer-events:none; filter:blur(.2px); background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 70%); opacity:.72; z-index:2;}
.spark-a{width:16px; height:16px; right:16px; top:14px;} .spark-b{width:10px; height:10px; left:18px; bottom:68px; opacity:.58;}
.caption{margin-top:10px; display:flex; flex-direction:column; gap:4px;}
.caption strong{font-size:14px; font-weight:700; letter-spacing:.04em;}
.caption span{font-size:11px; color:#cfbea8; word-break:break-all; font-family:"Times New Roman","Georgia","Yu Mincho",serif;}
@media (max-width:640px){
  .hero-inner{padding:30px 22px} .panel{padding:18px} .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
}