:root { --ink:#070806; --bone:#f2f0e7; --acid:#d9ff52; --burn:#ff5a3c; --steel:#565b58; --line:rgba(242,240,231,.2); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--ink); }
body { background:var(--ink); color:var(--bone); font-family:"Trebuchet MS","Microsoft YaHei",sans-serif; text-wrap:pretty; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
.tf-nav { position:fixed; z-index:20; left:0; right:0; top:0; min-height:64px; padding:0 clamp(18px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(7,8,6,.86); backdrop-filter:blur(14px); }
.tf-brand { font:400 22px Impact,sans-serif; letter-spacing:.05em; }.tf-brand span { color:var(--acid); }
.tf-nav-right { display:flex; align-items:center; gap:24px; font:700 9px Consolas,monospace; letter-spacing:.12em; }
.tf-nav-right button { border:0; background:none; cursor:pointer; color:#92958e; }.tf-nav-right > a:not(.nav-play) { color:#92958e; }
.nav-play { padding:11px 15px; background:var(--acid); color:var(--ink); }
main { padding-top:64px; }
.hero { position:relative; min-height:calc(100vh - 64px); display:grid; grid-template-columns:1.03fr .97fr; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-grid { position:absolute; inset:0; opacity:.38; background-image:linear-gradient(rgba(242,240,231,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(242,240,231,.07) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000,transparent 88%); }
.hero-copy { position:relative; z-index:2; min-height:680px; padding:clamp(54px,8vw,112px) 4vw 70px 8vw; display:flex; flex-direction:column; justify-content:center; }
.hero-kicker,.section-index { color:var(--acid); font:700 9px Consolas,monospace; letter-spacing:.25em; }
.hero h1 { display:flex; flex-direction:column; margin:25px 0 0; font:400 clamp(92px,14vw,210px)/.68 Impact,Haettenschweiler,sans-serif; letter-spacing:-.035em; }
.hero h1 span:last-child { color:transparent; -webkit-text-stroke:1px var(--bone); transform:translateX(.28em); }
.hero-cn { position:absolute; left:4.2vw; top:40%; writing-mode:vertical-rl; color:var(--acid); font-weight:900; letter-spacing:.4em; }
.hero-line { margin:46px 0 22px; font:700 clamp(13px,1.2vw,17px)/1.45 Consolas,monospace; letter-spacing:.08em; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.cta { width:min(340px,100%); min-height:60px; padding:0 20px; background:var(--acid); color:var(--ink); display:flex; align-items:center; justify-content:space-between; font:900 12px Consolas,monospace; letter-spacing:.12em; clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%); transition:transform .15s,background .15s; }
.cta:hover { transform:translateX(5px); background:var(--bone); }.cta b { font-size:24px; }
.hero-meta { color:#7f827c; font:700 8px Consolas,monospace; letter-spacing:.11em; }
.hero-art { position:relative; z-index:2; min-height:680px; display:flex; align-items:center; padding:6vw 5vw 5vw 0; }
.hero-frame { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); box-shadow:0 35px 100px rgba(0,0,0,.55); transform:rotate(1.8deg); }
.hero-frame::after { content:"LIVE RECORD // 04 ECHOES"; position:absolute; left:14px; top:12px; color:var(--acid); font:700 8px Consolas,monospace; letter-spacing:.15em; }
.hero-frame img { width:100%; height:100%; display:block; object-fit:cover; background:#0a0b09; }
.hero-count { position:absolute; right:3vw; bottom:8vh; display:flex; align-items:end; gap:10px; color:var(--burn); transform:rotate(-5deg); }
.hero-count b { font:400 clamp(82px,10vw,150px)/.7 Impact,sans-serif; }.hero-count span { font:700 8px/1.4 Consolas,monospace; letter-spacing:.1em; }
.band { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.mechanic article { min-height:280px; padding:46px clamp(24px,4vw,62px); border-right:1px solid var(--line); }
.mechanic article:last-child { border-right:0; }.mechanic article > b { color:var(--burn); font:400 42px Impact,sans-serif; }
.mechanic h2 { margin-top:35px; font:400 clamp(36px,4vw,62px)/1 Impact,sans-serif; }
.mechanic p { max-width:360px; margin-top:14px; color:#93968f; font-size:14px; line-height:1.65; }
.section { padding:clamp(72px,10vw,150px) clamp(20px,8vw,130px); border-bottom:1px solid var(--line); }
.story { display:grid; grid-template-columns:1.2fr .8fr; gap:9vw; align-items:end; min-height:760px; background:radial-gradient(circle at 75% 60%,rgba(255,90,60,.09),transparent 32%); }
.story h2,.chapters h2,.secret h2,.score-section h2,.faq h2 { margin-top:25px; font:400 clamp(58px,7vw,112px)/.82 Impact,Haettenschweiler,sans-serif; }
.story-columns { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:45px; }
.story-columns p,.chapters-head > p,.secret p,.score-section p { color:#999c95; font-size:15px; line-height:1.75; }
.story blockquote { padding:0 0 18px 26px; border-left:3px solid var(--burn); font:700 clamp(20px,2vw,32px)/1.4 Consolas,monospace; }
.chapters-head { display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:8vw; }.chapters-head > p { padding-bottom:10px; max-width:480px; }
.landing-chapters { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:70px; background:var(--line); border:1px solid var(--line); }
.landing-chapter { min-height:220px; padding:24px; display:grid; grid-template-columns:56px 1fr; gap:14px; background:var(--ink); transition:background .15s,color .15s; }
.landing-chapter:hover { background:var(--acid); color:var(--ink); }.lc-num { font:400 35px Impact,sans-serif; color:var(--burn); }
.landing-chapter h3 { font:700 12px/1.3 Consolas,monospace; letter-spacing:.11em; }.landing-chapter b { display:block; margin-top:8px; font-size:13px; }
.landing-chapter p { margin-top:32px; color:#858881; font-size:12px; line-height:1.55; }.landing-chapter:hover p { color:rgba(7,8,6,.66); }
.secret { position:relative; display:grid; grid-template-columns:.55fr 1.45fr; gap:6vw; align-items:center; min-height:620px; background:var(--bone); color:var(--ink); overflow:hidden; }
.secret::after { content:"REDACTED REDACTED REDACTED"; position:absolute; bottom:-40px; left:-10px; color:rgba(7,8,6,.08); font:400 130px/1 Impact,sans-serif; white-space:nowrap; }
.secret .section-index { color:#a52f20; }.secret-lock { font:400 clamp(180px,26vw,380px)/1 Impact,sans-serif; color:transparent; -webkit-text-stroke:1px var(--ink); }
.secret h2 { font-size:clamp(54px,6vw,95px); }.secret p { max-width:650px; margin-top:30px; color:#4d4f4a; }
.score-section { display:grid; grid-template-columns:1fr .85fr; gap:8vw; align-items:center; min-height:700px; }.score-section p { margin-top:28px; max-width:580px; }
.small-cta { margin-top:28px; width:270px; }.landing-board { border:1px solid var(--line); }.board-head,.board-row { display:grid; grid-template-columns:58px 1fr auto; gap:15px; padding:14px 18px; }
.board-head { color:var(--steel); font:700 8px Consolas,monospace; letter-spacing:.15em; border-bottom:1px solid var(--line); }.board-row { font:700 12px Consolas,monospace; border-bottom:1px solid rgba(242,240,231,.09); }.board-row:last-child { border-bottom:0; }.board-row:first-child { color:var(--acid); }.board-row b { font-size:14px; }.board-empty { padding:45px 20px; color:var(--steel); font:700 10px Consolas,monospace; text-align:center; }
.faq h2 { margin-bottom:50px; }.faq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }.faq details { min-height:220px; padding:25px; background:var(--ink); }.faq summary { cursor:pointer; list-style:none; font:400 28px/1.1 Impact,sans-serif; }.faq summary::after { content:"+"; float:right; color:var(--acid); }.faq details[open] summary::after { content:"−"; }.faq details p { margin-top:30px; color:#969992; font-size:13px; line-height:1.65; }
.final-cta { min-height:300px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:50px 8vw; background:var(--acid); color:var(--ink); }.final-cta span { font:700 10px Consolas,monospace; letter-spacing:.18em; }.final-cta a { font:400 clamp(48px,8vw,120px)/.9 Impact,sans-serif; border-bottom:5px solid var(--ink); }
footer { min-height:100px; padding:0 6vw; display:flex; align-items:center; justify-content:space-between; color:#797c76; font:700 9px Consolas,monospace; letter-spacing:.14em; }
@media (max-width:900px) {
  .tf-nav-right > a:not(.nav-play) { display:none; }.tf-nav-right { gap:10px; }
  .hero { grid-template-columns:1fr; }.hero-copy { min-height:680px; padding-left:12vw; }.hero-art { min-height:auto; padding:0 6vw 100px; }.hero-count { bottom:30px; }
  .band { grid-template-columns:1fr; }.mechanic article { min-height:220px; border-right:0; border-bottom:1px solid var(--line); }
  .story,.score-section { grid-template-columns:1fr; }.story { min-height:auto; }.story blockquote { margin-top:20px; }
  .landing-chapters { grid-template-columns:repeat(2,1fr); }.secret { grid-template-columns:1fr; }.secret-lock { position:absolute; right:-5%; top:4%; opacity:.18; }.secret > div:last-child { position:relative; z-index:2; }
  .faq-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .tf-nav { padding:0 14px; }.nav-play { padding:10px 11px; }
  .hero-copy { min-height:610px; padding:70px 20px 60px 54px; }.hero h1 { font-size:clamp(82px,28vw,130px); }.hero-cn { left:18px; }.hero-line { margin-top:35px; }
  .hero-art { padding:0 18px 80px; }.hero-count { right:20px; bottom:20px; }.hero-count b { font-size:72px; }
  .section { padding:80px 20px; }.story-columns { grid-template-columns:1fr; }.story h2,.chapters h2,.secret h2,.score-section h2,.faq h2 { font-size:54px; }
  .chapters-head { grid-template-columns:1fr; }.landing-chapters { grid-template-columns:1fr; margin-top:45px; }.landing-chapter { min-height:180px; }
  .secret { min-height:600px; }.final-cta { align-items:flex-start; flex-direction:column; }.final-cta a { font-size:58px; }
  footer { align-items:flex-start; flex-direction:column; justify-content:center; gap:12px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition-duration:.01ms !important; } }