/* HOWL MEMBERS ROOM — 紺の夜空と、金の星座の輪 */
:root{
  --ink:#050816; --night:#0a1030; --navy:#101a44; --line:rgba(232,196,119,.22);
  --gold:#e8c477; --gold-hi:#f8e2a8; --gold-deep:#b98a3a;
  --text:#e9e6f2; --muted:#a7a9c4; --card:rgba(16,24,64,.55); --card-b:rgba(232,196,119,.18);
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --latin:"Cormorant Garamond","Didot","Bodoni 72","Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.95 var(--sans);letter-spacing:.02em;overflow-x:hidden;transition:background-color 1.2s ease}
body[data-zone="harmony"]{--card:rgba(40,30,10,.45);--card-b:rgba(248,226,168,.32)}
img{max-width:100%;display:block}
a{color:var(--gold-hi)}
b{color:var(--gold-hi);font-weight:600}

/* 夜空 */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.nebula{position:fixed;inset:-20%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(40% 35% at 18% 20%,rgba(64,80,190,.28),transparent 70%),
    radial-gradient(35% 30% at 85% 15%,rgba(120,70,170,.22),transparent 70%),
    radial-gradient(45% 40% at 70% 85%,rgba(30,90,140,.22),transparent 70%),
    linear-gradient(180deg,#060a1f 0%,#070c26 40%,#050816 100%);
  animation:drift 60s ease-in-out infinite alternate}
body[data-zone="harmony"] .nebula{filter:sepia(.35) saturate(1.3) hue-rotate(-12deg)}
@keyframes drift{to{transform:translate3d(-3%,2%,0) scale(1.05)}}

.draft-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:60;text-align:center;font-size:12px;color:#120c00;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));padding:4px 8px;letter-spacing:.08em}

/* 上部ナビ */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:12px 24px;background:rgba(5,8,22,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gold-hi);font:600 18px/1 var(--latin);letter-spacing:.32em;white-space:nowrap}
.brand small{display:block;font:11px/1.4 var(--sans);letter-spacing:.12em;color:var(--muted);margin-top:4px}
.brand-icon{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:0 0 14px rgba(232,196,119,.55)}
.anchors{display:flex;gap:4px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.anchors::-webkit-scrollbar{display:none}
.anchors a{color:var(--muted);text-decoration:none;font-size:13px;padding:6px 12px;border-radius:999px;white-space:nowrap;transition:.3s}
.anchors a:hover,.anchors a.active{color:var(--gold-hi);background:rgba(232,196,119,.1)}
.anchors a.to-harmony{color:var(--gold);border:1px solid var(--line)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-hi));box-shadow:0 0 10px var(--gold)}

main{max-width:1040px;margin:0 auto;padding:0 24px 80px}
.label{font:600 12px/1 var(--latin);letter-spacing:.42em;color:var(--gold);text-transform:uppercase;margin:0 0 14px}
.label::before{content:"✦ ";letter-spacing:0}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.06em;line-height:1.55}
h2{font-size:clamp(24px,3.4vw,34px);margin:0 0 10px;background:linear-gradient(180deg,#fff7e0,var(--gold) 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.small{font-size:12px}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--gold-deep);padding-left:12px;margin-top:22px}

/* HERO */
.hero{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 0 40px;position:relative}
.orb{position:relative;width:min(300px,62vw);aspect-ratio:1;margin-bottom:34px}
.orb img{width:100%;height:100%;border-radius:50%;object-fit:cover;animation:spin 140s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 58%,transparent 71%);mask:radial-gradient(circle,#000 58%,transparent 71%)}
.halo{position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(232,196,119,.25);animation:breathe 6s ease-in-out infinite}
.halo.h2{inset:-28%;border-color:rgba(232,196,119,.12);animation-delay:-3s}
.orb::after{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(255,230,160,.45),transparent 65%);filter:blur(12px);animation:breathe 5s ease-in-out infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.45;transform:scale(.98)}50%{opacity:1;transform:scale(1.03)}}
.hero h1{font-size:clamp(30px,5.4vw,52px);margin:0 0 18px;color:#fff6dc;text-shadow:0 0 28px rgba(232,196,119,.35)}
.lead{max-width:560px;color:#d6d4e8}
.route{list-style:none;display:flex;align-items:center;gap:14px;padding:0;margin:30px 0 0}
.route li{display:flex;flex-direction:column;align-items:center;font:600 15px/1.3 var(--latin);letter-spacing:.3em}
.route em{font:12px/1.6 var(--sans);font-style:normal;color:var(--muted);letter-spacing:.06em;margin-top:4px}
.route .free span{color:#cfd6ff}
.route .paid span{color:var(--gold)}
.route .line{width:min(120px,18vw);height:1px;background:linear-gradient(90deg,#8fa0ff,var(--gold));position:relative}
.route .line::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 10px var(--gold);animation:travel 3.6s ease-in-out infinite}
@keyframes travel{0%{left:0}100%{left:calc(100% - 7px)}}
.scroll-cue{margin-top:46px;width:24px;height:40px;border:1px solid var(--line);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue span{width:3px;height:8px;border-radius:2px;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}50%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* ブロック共通 */
.block{padding:84px 0 20px;border-top:1px solid rgba(232,196,119,.08)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}

/* START */
.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.start-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:22px 20px;border-radius:18px;background:var(--card);border:1px solid var(--card-b);color:var(--text);text-decoration:none;transition:.35s;overflow:hidden}
.start-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 40px rgba(232,196,119,.12)}
.start-card .num{font:600 13px/1 var(--latin);color:var(--gold);letter-spacing:.3em}
.start-card b{font:600 18px/1.5 var(--serif);color:#fff6dc}
.start-card small{color:var(--muted)}
.start-card.primary{background:linear-gradient(135deg,rgba(232,196,119,.2),rgba(16,24,64,.6))}

/* RHYTHM */
.rhythm-stats,.h-stats{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.rhythm-stats span,.h-stats span{padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted)}
.part{margin:34px 0 0}
.part-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.part-head .pno{font:600 13px/1 var(--latin);letter-spacing:.3em;color:var(--gold)}
.part-head h3{margin:0;font-size:20px;color:#f3ecd6}
.chapters{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.chapter{border-radius:16px;background:var(--card);border:1px solid var(--card-b);transition:border-color .3s}
.chapter[open]{border-color:var(--gold)}
.chapter summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}
.chapter summary::-webkit-details-marker{display:none}
.chapter .cno{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--latin);color:var(--gold-hi);border:1px solid var(--line);background:radial-gradient(circle,rgba(232,196,119,.18),transparent 70%)}
.chapter .ctitle{flex:1;font-family:var(--serif);line-height:1.5}
.badge{font:600 10px/1 var(--latin);letter-spacing:.2em;padding:5px 8px;border-radius:6px;color:#0b1b10;background:#9fe0b8}
.chapter.done .cno{background:var(--gold);color:#1a1200}
.chapter .inner{padding:0 18px 16px 74px}
.chapter ol{margin:0 0 12px;padding-left:1.2em;color:var(--muted);font-size:14px;line-height:1.8}
.chapter .acts{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold-hi);font:13px/1 var(--sans);cursor:pointer;text-decoration:none;transition:.25s}
.btn:hover{background:rgba(232,196,119,.12)}
.btn.solid{background:var(--gold);color:#1a1200;border-color:var(--gold)}

/* 13週 */
.weeks{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;margin-top:20px}
.week{aspect-ratio:1/1.5;border-radius:12px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:11px;transition:.3s}
.week b{font:600 18px/1 var(--latin);color:var(--gold-hi)}
.week:hover{border-color:var(--gold);transform:translateY(-2px)}
.week.m1{box-shadow:inset 0 -3px 0 #8fa0ff}.week.m2{box-shadow:inset 0 -3px 0 #b49cff}.week.m3{box-shadow:inset 0 -3px 0 var(--gold)}

/* メモの型 */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.tool{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--card-b);display:flex;flex-direction:column}
.tool h3{margin:0 0 10px;font-size:17px;color:#fff6dc}
.chip{font:11px/1 var(--sans);padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--gold);vertical-align:middle;margin-left:6px}
.tool pre{flex:1;margin:0 0 12px;padding:14px;border-radius:12px;background:rgba(2,4,14,.7);border:1px dashed rgba(232,196,119,.25);font:13px/1.9 var(--sans);white-space:pre-wrap;color:#dcdaf0}
.copy{align-self:flex-start}
.copy{padding:8px 14px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold-hi);cursor:pointer;font:13px/1 var(--sans)}
.copy:hover{background:rgba(232,196,119,.12)}

/* 表 */
.table-wrap{overflow-x:auto;margin-top:20px;border-radius:16px;border:1px solid var(--card-b)}
table{width:100%;border-collapse:collapse;min-width:520px;background:var(--card)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(232,196,119,.1);font-size:14px}
th{font:600 12px/1 var(--latin);letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
tr:last-child td{border-bottom:0}

/* ===== THRESHOLD ===== */
.threshold{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100vw;margin:80px 0 0 calc(50% - 50vw);padding:80px 24px;overflow:hidden;
  background:radial-gradient(60% 50% at 50% 50%,rgba(232,196,119,.10),transparent 70%)}
.threshold::before,.threshold::after{content:"";position:absolute;left:0;right:0;height:30%;pointer-events:none}
.threshold::before{top:0;background:linear-gradient(180deg,var(--ink),transparent)}
.threshold::after{bottom:0;background:linear-gradient(0deg,var(--ink),transparent)}
.veil-line{position:relative;order:3;width:0;height:1px;margin:0 auto 34px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);box-shadow:0 0 18px var(--gold);transition:width 2.2s cubic-bezier(.2,.7,.1,1)}
.th-small{order:1;font-family:var(--serif);color:var(--muted);letter-spacing:.3em;opacity:0;transition:opacity 1.4s ease .2s}
.seal{order:2;position:relative;width:min(260px,58vw);aspect-ratio:1;margin:26px 0 30px;opacity:0;transform:scale(.7) rotate(-30deg);transition:opacity 1.8s ease .6s,transform 2.4s cubic-bezier(.2,.7,.1,1) .6s}
.seal img{position:absolute;inset:14%;width:72%;height:72%;border-radius:50%;object-fit:cover;-webkit-mask:radial-gradient(circle,#000 60%,transparent 71%);mask:radial-gradient(circle,#000 60%,transparent 71%);animation:spin 60s linear infinite reverse}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,196,119,.45)}
.ring.r1{animation:spin 30s linear infinite;border-style:dashed}
.ring.r2{inset:6%;border-color:rgba(232,196,119,.25);animation:spin 45s linear infinite reverse}
.ring.r3{inset:-10%;border-color:rgba(232,196,119,.12);animation:breathe 5s ease-in-out infinite}
.th-title{order:4;margin:0;font-size:clamp(28px,5vw,50px);color:#fff1cf;letter-spacing:.12em}
.th-title span{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(12px);transition:opacity 1.4s ease,filter 1.4s ease,transform 1.4s ease}
.th-title .gold{font-family:var(--latin);letter-spacing:.32em;background:linear-gradient(180deg,#fff7e0,var(--gold) 60%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;margin-left:.3em}
.th-sub{order:5;font:600 15px/1 var(--latin);letter-spacing:.5em;color:var(--gold);margin:22px 0;opacity:0;transition:opacity 1.6s ease 2.4s}
.th-text{order:6;max-width:440px;color:#d6d4e8;opacity:0;transition:opacity 1.6s ease 2.9s}
.threshold.lit .veil-line{width:min(820px,90%)}
.threshold.lit .th-small,.threshold.lit .th-sub,.threshold.lit .th-text{opacity:1}
.threshold.lit .seal{opacity:1;transform:none}
.threshold.lit .th-title span{opacity:1;filter:none;transform:none}
.threshold.lit .th-title span:nth-child(1){transition-delay:1.2s}
.threshold.lit .th-title span:nth-child(2){transition-delay:1.9s}

/* HARMONY */
.harmony{border-top:0}
.label.gold{color:var(--gold-hi)}
.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.group{position:relative;padding:22px;border-radius:20px;background:linear-gradient(160deg,rgba(232,196,119,.10),rgba(10,14,40,.7));border:1px solid var(--card-b);overflow:hidden}
.group.wide{grid-column:1/-1}
.group .gk{position:absolute;right:18px;top:6px;font:600 84px/1 var(--serif);color:rgba(232,196,119,.08);pointer-events:none}
.group .glabel{font:600 12px/1 var(--latin);letter-spacing:.3em;color:var(--gold)}
.group h3{margin:6px 0 2px;font-size:20px;color:#fff1cf}
.group .gcount{font-size:13px;color:var(--muted)}
.group ul{list-style:none;margin:14px 0 0;padding:0;font-size:14px;line-height:2}
.group li{display:flex;gap:8px;align-items:center;color:#e7e1cc}
.group li.locked{color:transparent;text-shadow:0 0 7px rgba(232,215,170,.75);user-select:none}
.group li.locked::before{content:"";flex:none;width:12px;height:12px;border:1px solid var(--gold-deep);border-radius:3px;background:linear-gradient(var(--gold-deep),var(--gold-deep)) center 6px/6px 1px no-repeat;opacity:.8}
.group .more{margin-top:8px;font-size:12px;color:var(--gold)}
.offer{position:relative;margin:40px auto 0;max-width:560px;text-align:center;padding:40px 28px;border-radius:28px;border:1px solid rgba(248,226,168,.45);background:radial-gradient(80% 60% at 50% 0%,rgba(232,196,119,.18),rgba(8,10,28,.85));overflow:hidden}
.offer-glow{position:absolute;inset:-40% -20% auto;height:80%;background:conic-gradient(from 0deg,transparent,rgba(248,226,168,.18),transparent 30%);animation:spin 18s linear infinite;pointer-events:none}
.price{font:600 clamp(44px,8vw,64px)/1 var(--latin);color:#fff1cf;margin:6px 0;letter-spacing:.04em;position:relative}
.price small{font:16px/1 var(--sans);color:var(--gold);margin-left:4px}
.price-note{color:var(--muted);position:relative}
.includes{list-style:none;padding:0;margin:20px auto;max-width:320px;text-align:left;position:relative}
.includes li{padding:6px 0 6px 26px;position:relative;border-bottom:1px solid rgba(232,196,119,.12)}
.includes li::before{content:"✦";position:absolute;left:4px;color:var(--gold)}
.cta{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-top:6px;padding:16px 40px;border-radius:999px;border:0;font:600 17px/1.2 var(--serif);letter-spacing:.12em;color:#1a1200;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep));box-shadow:0 0 30px rgba(232,196,119,.35);cursor:not-allowed;opacity:.92}
.cta small{font:11px/1 var(--sans);letter-spacing:.06em;opacity:.75}

/* Q&A */
details:not(.chapter){border-bottom:1px solid rgba(232,196,119,.12);padding:6px 0}
details:not(.chapter) summary{cursor:pointer;padding:12px 0;font-family:var(--serif);color:#f3ecd6;list-style:none}
details:not(.chapter) summary::before{content:"Q. ";color:var(--gold);font-family:var(--latin)}
details:not(.chapter) p{margin:0 0 12px;color:var(--muted)}

.footer{text-align:center;padding:40px 24px 60px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.footer .back{display:inline-block;margin-bottom:10px;text-decoration:none}
#toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);opacity:0;padding:10px 18px;border-radius:999px;background:var(--gold);color:#1a1200;font-size:13px;transition:.35s;z-index:70;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%)}

@media (max-width:820px){
  .topbar{padding:10px 16px;gap:10px}
  .brand small{display:none}
  main{padding:0 16px 80px}
  .start-grid,.tools,.chapters,.groups{grid-template-columns:1fr}
  .weeks{grid-template-columns:repeat(7,1fr)}
  .chapter .inner{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .threshold .veil-line{width:min(820px,90%)}
  .threshold .th-small,.threshold .th-sub,.threshold .th-text,.threshold .seal,.threshold .th-title span{opacity:1;filter:none;transform:none}
}

/* ===== INTRO：スクロールで輪の中心へ ===== */
.world{position:relative;height:620vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;opacity:var(--fade,1)}
.scrim{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 48% 38% at 50% 52%,rgba(5,8,22,var(--sc,.3)) 0%,rgba(5,8,22,calc(var(--sc,.3)*.55)) 55%,transparent 80%)}
.wheel-wrap{position:absolute;left:50%;top:50%;width:min(62vmin,560px);aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--ws,.55)) rotate(var(--wr,0deg));will-change:transform}
.wheel{width:100%;height:100%;border-radius:50%;object-fit:cover;-webkit-mask:radial-gradient(circle,#000 60%,transparent 71%);mask:radial-gradient(circle,#000 60%,transparent 71%);filter:brightness(var(--wb,1)) saturate(1.1) blur(var(--wbl,0px))}
.wheel-glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,calc(.18 + var(--wg,0)*.5)),transparent 60%);filter:blur(20px)}
.w-ring{position:absolute;border-radius:50%;border:1px solid rgba(232,196,119,.22)}
.wr1{inset:-12%;transform:rotate(calc(var(--wr,0deg)*-2))}
.wr2{inset:-26%;border-style:dashed;border-color:rgba(232,196,119,.14);transform:rotate(calc(var(--wr,0deg)*-3))}
.wr3{inset:-44%;border-color:rgba(232,196,119,.07)}
.bloom{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,244,214,var(--bl,0)) 0%,rgba(248,226,168,calc(var(--bl,0)*.85)) 30%,rgba(10,16,48,calc(var(--bl,0)*.6)) 75%)}
.scenes{position:relative;z-index:2;width:min(680px,92vw);text-align:center;pointer-events:none}
.scene{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + var(--sy,24px)));opacity:var(--so,0);filter:blur(var(--sb,6px))}
.scene .label{margin-bottom:16px}
.scene h1,.scene .st{font-family:var(--serif);font-size:clamp(32px,6vw,62px);line-height:1.45;margin:0 0 18px;color:#fff4d6;text-shadow:0 0 30px rgba(5,8,22,.9),0 0 22px rgba(232,196,119,.35);background:none;-webkit-background-clip:initial;background-clip:initial}
.scene p{color:#e2def3;text-shadow:0 0 16px rgba(5,8,22,1),0 0 4px rgba(5,8,22,1)}
.scene .enter{pointer-events:auto;margin-top:10px;padding:12px 26px;font-size:15px}
.route-nav{position:absolute;right:28px;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;z-index:3}
.route-nav li{position:relative;padding-right:18px;font:600 11px/1 var(--latin);letter-spacing:.24em;color:rgba(167,169,196,.55);text-align:right;transition:color .4s}
.route-nav li::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;border:1px solid rgba(232,196,119,.4);transition:.4s}
.route-nav li.on{color:var(--gold-hi)}
.route-nav li.on::after{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.hint{position:absolute;bottom:56px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.3em;color:var(--muted);opacity:var(--ho,1);display:flex;flex-direction:column;align-items:center;gap:10px}
.hint span{width:1px;height:40px;background:linear-gradient(transparent,var(--gold));animation:cue 1.8s ease-in-out infinite}
/* ルームが下からせり上がって、導入を覆う */
.sheet{position:relative;z-index:5;margin-top:-100vh;max-width:none;padding:0;background:linear-gradient(180deg,rgba(5,8,22,.0) 0,rgba(5,8,22,.74) 140px,rgba(5,8,22,.8) 100%);border-radius:36px 36px 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.6),0 -1px 0 rgba(232,196,119,.35)}
.sheet > section:not(.threshold){max-width:1040px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.sheet > #start{padding-top:120px;border-top:0}
@media (max-width:820px){
  .brand span{display:none}
  .route-nav{right:12px}
  .route-nav li{font-size:0;padding-right:10px}
  .sheet > section:not(.threshold){padding-left:16px;padding-right:16px}
  .sheet{border-radius:24px 24px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .world{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;padding:120px 0}
  .scenes{position:static}
  .scene{position:static;transform:none;opacity:1;filter:none;margin:0 0 60px}
  .sheet{margin-top:0}
}

.nf{text-align:center;padding-top:30vh}