:root{
  --black:#000;--deep:#0a0a0a;--card:#111;--card2:#1a1a1a;--hover:#222;
  --white:#fff;--text:#e8e8e8;--muted:#b0b0b0;--faint:#777;--line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.35);--max:1280px;--radius:14px;--nav:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:#000;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;line-height:1.75;overflow-x:hidden}
body.overlay-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
img{max-width:100%;display:block}
.skip-link{position:fixed;left:12px;top:-80px;z-index:500;background:#fff;color:#000;padding:10px 16px;border-radius:999px}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.site-header{position:sticky;top:0;z-index:110;background:rgba(0,0,0,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav-shell{height:var(--nav);max-width:var(--max);margin:auto;padding:0 24px;display:flex;align-items:center;gap:22px;min-width:0}
.brand-link{display:flex;align-items:center;flex:0 0 auto;min-height:44px}
.brand-logo{max-width:128px;max-height:40px;width:auto;height:auto;object-fit:contain}
.brand-text{font-weight:900;font-size:22px;letter-spacing:-.05em;color:#fff;white-space:nowrap}
.desktop-nav{display:flex;align-items:center;gap:5px;white-space:nowrap;min-width:0}
.desktop-nav a{padding:8px 10px;border-radius:999px;color:#aaa;font-size:14px}
.desktop-nav a:hover,.desktop-nav a.is-current{color:#fff;background:#1a1a1a}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-action,.app-action{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;cursor:pointer;font-size:14px}
.nav-action:hover{background:#1a1a1a}
.app-action{background:#fff;color:#000;border-color:#fff;font-weight:800;padding:0 18px}
.menu-button{width:44px;height:44px;border:1px solid var(--line-strong);background:#111;border-radius:50%;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.menu-button span{width:16px;height:1px;background:#fff;display:block}
.mobile-menu-button{display:none}
.site-main{min-height:60vh}
.shell{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.page-hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#aaa;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700}
.eyebrow:before{content:"";width:22px;height:1px;background:#777}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,6.4vw,86px);line-height:1.03;letter-spacing:-.055em;color:#fff;margin-bottom:24px;max-width:1080px}
h2{color:#fff;line-height:1.16;letter-spacing:-.035em}
h3{color:#fff;line-height:1.3}
.lead{font-size:18px;color:#cfcfcf;max-width:780px}
.meta-line{display:flex;flex-wrap:wrap;gap:8px 16px;color:#777;font-size:13px}
.section{padding:72px 0;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.section-head h2{font-size:clamp(30px,4vw,54px);margin:0}
.section-head p{max-width:560px;color:#9d9d9d;margin:0}
.kicker{font-size:12px;color:#888;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;min-height:46px;align-items:center;justify-content:center;border-radius:999px;padding:0 20px;border:1px solid var(--line-strong);font-weight:800;white-space:nowrap}
.btn.primary{background:#fff;color:#000;border-color:#fff}
.btn:hover{transform:translateY(-1px)}
.text-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700}
.text-link:after{content:"→";color:#888}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:#111;border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-width:0}
.card:hover{border-color:var(--line-strong);background:#151515}
.card p{color:#aaa;margin-bottom:0}
.card small{color:#777;display:block;margin-bottom:8px}
.card h3{font-size:22px;margin-bottom:10px}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:#ccc;background:#0a0a0a}
.media-frame{background:#0a0a0a;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:280px;display:grid;place-items:center}
.media-frame img{width:100%;height:100%;object-fit:contain}
.media-placeholder{padding:40px;color:#666;text-align:center}
.feature-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:26px;align-items:stretch}
.feature-copy{background:#111;border:1px solid var(--line);border-radius:18px;padding:34px}
.feature-copy h2{font-size:clamp(34px,4vw,58px)}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{padding:18px 0;border-bottom:1px solid var(--line)}
.list-plain li:last-child{border-bottom:0}
.list-plain strong{display:block;color:#fff;margin-bottom:4px}
.list-plain span{color:#8f8f8f}
.number-list{counter-reset:rank}
.number-item{display:grid;grid-template-columns:82px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.number-item:before{counter-increment:rank;content:counter(rank,decimal-leading-zero);font-size:38px;font-weight:900;color:#555;line-height:1}
.number-item h3{font-size:26px;margin-bottom:8px}
.number-item p{color:#aaa;margin:0}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);overflow-x:auto;overscroll-behavior-inline:contain;gap:14px;padding-bottom:8px;scrollbar-width:thin}
.track .card{min-height:220px}
.timeline{display:grid;gap:0}
.timeline-item{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.timeline-item .status{color:#fff;font-weight:800}
.timeline-item p{color:#aaa}
.editor-note{border-left:2px solid #fff;padding:8px 0 8px 20px;color:#bbb}
.quote-block{font-size:clamp(28px,4vw,50px);line-height:1.3;color:#fff;letter-spacing:-.04em;max-width:940px}
.quick-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0a0a}
.quick-scroll{display:flex;gap:18px;overflow-x:auto;padding:14px 0;white-space:nowrap}
.quick-scroll a{color:#aaa;padding:5px 0}
.quick-scroll a:hover{color:#fff}
.magazine-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px;align-items:start}
.magazine-grid article{padding:28px;background:#111;border:1px solid var(--line);border-radius:16px}
.magazine-grid article:first-child{grid-row:span 2;min-height:420px}
.poster-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.poster{min-height:320px;border:1px solid var(--line);background:#111;border-radius:14px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end}
.poster:nth-child(2n){min-height:380px}
.poster p{color:#aaa}
.album-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.album{border:1px solid var(--line);border-radius:16px;background:#111;padding:24px;min-height:210px}
.album .index{font-size:12px;color:#777}
.album h3{margin-top:28px}
.article-list article{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--line)}
.article-list time,.article-list .label{color:#777;font-size:13px}
.article-list p{color:#aaa}
.knowledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.knowledge-grid article{border:1px solid var(--line);border-radius:16px;padding:28px;background:#111}
.knowledge-grid p{color:#aaa}
.faq-list details{border-top:1px solid var(--line);padding:0}
.faq-list summary{cursor:pointer;color:#fff;font-weight:800;padding:22px 2px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"＋";float:right;color:#777}
.faq-list details[open] summary:after{content:"－"}
.faq-list details p{color:#aaa;max-width:900px;padding:0 2px 24px}
.info-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-block{border:1px solid var(--line);border-radius:16px;padding:28px;background:#111}
.info-block p,.info-block li{color:#aaa}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.process article{background:#0a0a0a;padding:24px}
.process strong{color:#fff;display:block;margin-bottom:10px}
.process span{color:#8f8f8f}
.app-showcase{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:42px;align-items:center}
.phone-frame{max-width:430px;margin:auto;border:1px solid var(--line-strong);border-radius:36px;padding:14px;background:#0a0a0a;box-shadow:0 16px 48px rgba(0,0,0,.7)}
.phone-frame img{border-radius:24px;width:100%;height:auto}
.brand-statement{padding:80px 0}
.brand-statement p{font-size:clamp(24px,3.5vw,42px);line-height:1.45;color:#fff;max-width:1080px;letter-spacing:-.03em}
.site-footer{border-top:1px solid var(--line);background:#000;padding:64px 0 90px}
.footer-shell{width:min(var(--max),calc(100% - 48px));margin:auto}
.footer-brand{display:grid;grid-template-columns:280px 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.footer-brand-link{display:flex;align-items:center;gap:14px}
.footer-brand-link img{width:84px;max-height:42px;object-fit:contain}
.footer-brand-link strong,.footer-brand-link em{display:block;color:#fff}
.footer-brand-link em{font-size:11px;color:#777;font-style:normal;letter-spacing:.16em}
.footer-brand p{color:#888;max-width:620px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:38px 0}
.footer-grid h2{font-size:13px;color:#777;text-transform:uppercase;letter-spacing:.12em}
.footer-grid a{display:block;color:#aaa;padding:6px 0}
.footer-grid a:hover{color:#fff}
.footer-note{font-size:13px;color:#777;border-top:1px solid var(--line);padding-top:24px}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;color:#666;font-size:12px;padding-top:18px}
.footer-bottom a{margin-left:16px;color:#999}
.site-overlay{position:fixed;inset:0;z-index:180;background:rgba(0,0,0,.72);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.site-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.channel-panel{position:fixed;z-index:200;right:0;top:0;height:100dvh;width:min(460px,88vw);background:#0a0a0a;border-left:1px solid var(--line);transform:translateX(102%);visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility .22s ease;display:flex;flex-direction:column}
.channel-panel.is-open{transform:translateX(0);visibility:visible;pointer-events:auto}
.panel-head{height:74px;flex:0 0 74px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line)}
.panel-brand{display:flex;align-items:center;gap:10px}
.panel-brand img{max-width:86px;max-height:34px;object-fit:contain}
.panel-brand strong,.panel-brand em{display:block}
.panel-brand em{font-size:9px;color:#666;font-style:normal;letter-spacing:.12em}
.panel-close,.search-head button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#111;color:#fff;font-size:24px;cursor:pointer}
.panel-scroll{overflow-y:auto;padding:20px}
.panel-group{padding:10px 0 18px}
.panel-group h2{font-size:12px;color:#666;letter-spacing:.12em;text-transform:uppercase}
.panel-group a{display:block;border-top:1px solid var(--line);padding:15px 2px}
.panel-group strong{display:block;color:#fff}
.panel-group span{display:block;color:#777;font-size:13px;margin-top:3px}
.search-panel{position:fixed;z-index:205;left:0;right:0;top:74px;background:#0a0a0a;border-bottom:1px solid var(--line);visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-10px);transition:.18s ease}
.search-panel.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.search-shell{width:min(var(--max),calc(100% - 48px));margin:auto;padding:26px 0 34px}
.search-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.search-box input{width:100%;height:58px;border:1px solid var(--line-strong);border-radius:999px;background:#000;color:#fff;padding:0 22px;outline:none}
.search-keywords{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0}
.search-keywords span{color:#777;font-size:12px}
.search-keywords button{border:1px solid var(--line);background:#111;border-radius:999px;padding:7px 12px;cursor:pointer}
.search-results{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.search-results a{border:1px solid var(--line);border-radius:12px;padding:14px;background:#111}
.search-results strong,.search-results span{display:block}
.search-results span{color:#777;font-size:12px}
.search-empty{color:#888;margin:18px 0 0}
.mobile-bottom-nav{display:none}
.hero-home{padding:34px 0 30px}
.hero-home-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);gap:22px}
.hero-home-copy{background:#111;border:1px solid var(--line);border-radius:18px;padding:34px}
.hero-home-copy h1{font-size:clamp(38px,4.8vw,72px)}
.reco-mini{display:grid;gap:0;margin-top:24px}
.reco-mini a{border-top:1px solid var(--line);padding:14px 0}
.reco-mini strong{display:block;color:#fff}
.reco-mini span{color:#888;font-size:13px}
.inspiration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.inspiration-grid a{border:1px solid var(--line);border-radius:999px;padding:14px 18px;background:#0a0a0a;min-width:0}
.inspiration-grid strong,.inspiration-grid span{display:block}
.inspiration-grid span{color:#777;font-size:12px;white-space:normal}
.clip-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.clip-directory a{background:#0a0a0a;padding:28px}
.clip-directory .num{color:#555;font-size:36px;font-weight:900}
.clip-directory p{color:#999}
.series-bands{display:grid;gap:10px}
.series-band{display:grid;grid-template-columns:190px 1fr;gap:22px;border:1px solid var(--line);border-radius:14px;background:#111;padding:22px}
.series-band p{color:#aaa;margin:0}
.grade-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grade-scale article{border:1px solid var(--line);border-radius:14px;padding:24px;background:#111}
.grade-scale strong{font-size:26px;color:#fff}
.grade-scale p{color:#aaa}
@media(max-width:1080px){
  .desktop-nav{gap:1px}.desktop-nav a{padding:8px 7px;font-size:13px}.desktop-action{display:none}
  .feature-split,.hero-home-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,1fr)}.poster-wall,.album-grid{grid-template-columns:repeat(3,1fr)}
  .magazine-grid{grid-template-columns:1fr 1fr}.magazine-grid article:first-child{grid-column:1/-1;grid-row:auto}
  .inspiration-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  :root{--nav:64px}
  .nav-shell{height:64px;padding:0 15px;gap:8px;display:grid;grid-template-columns:44px 1fr auto}
  .mobile-menu-button{display:inline-flex}.desktop-menu-button,.desktop-nav,.desktop-action{display:none}
  .brand-link{justify-self:center;min-width:0}.brand-logo{max-width:104px;max-height:34px}.brand-text{font-size:20px}
  .nav-actions{margin:0;justify-self:end}.app-action{min-width:58px;padding:0 14px}
  .shell,.footer-shell,.search-shell{width:calc(100% - 30px)}
  .page-hero{padding:48px 0 34px}h1{font-size:clamp(38px,11vw,58px)}.lead{font-size:16px}
  .section{padding:52px 0}.section-head{display:block}.section-head h2{margin-bottom:12px}
  .feature-copy{padding:24px}.card-grid,.knowledge-grid,.info-columns{grid-template-columns:1fr}
  .poster-wall{grid-template-columns:repeat(2,1fr)}.poster,.poster:nth-child(2n){min-height:260px}
  .album-grid{grid-template-columns:repeat(2,1fr)}.album{min-height:180px}
  .magazine-grid{grid-template-columns:1fr}.magazine-grid article:first-child{min-height:0}
  .timeline-item{grid-template-columns:1fr;gap:6px}
  .article-list article{grid-template-columns:1fr;gap:6px}
  .process{grid-template-columns:1fr 1fr}
  .app-showcase{grid-template-columns:1fr;gap:28px}.phone-frame{max-width:340px}
  .footer-brand{grid-template-columns:1fr;gap:16px}.footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.footer-bottom a{margin-left:0;margin-right:16px}
  .site-footer{padding-bottom:120px}
  .search-panel{top:0;height:100dvh;overflow-y:auto}.search-shell{padding:16px 0 90px}.search-results{grid-template-columns:1fr 1fr}
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:105;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom);background:rgba(0,0,0,.96);border-top:1px solid var(--line)}
  .mobile-bottom-nav a{min-height:54px;display:grid;place-items:center;color:#777;font-size:12px}
  .mobile-bottom-nav a.is-current{color:#fff;background:#111}
  .channel-panel{width:88vw}
  .hero-home-grid{display:flex;flex-direction:column}.hero-home-copy{order:0;padding:24px}.hero-home-grid .media-frame{order:1}
  .inspiration-grid{grid-template-columns:1fr}
  .clip-directory{grid-template-columns:1fr}
  .series-band{grid-template-columns:1fr;gap:6px}
  .grade-scale{grid-template-columns:1fr}
}
@media(max-width:420px){
  .poster-wall,.album-grid,.search-results,.process{grid-template-columns:1fr}
  .brand-logo{max-width:92px}.app-action{min-width:54px;padding:0 11px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

.hero-home-grid>.hero-visual{grid-column:1;grid-row:1 / span 2}
.hero-home-grid>.hero-home-copy{grid-column:2;grid-row:1}
.hero-home-grid>.hero-recos{grid-column:2;grid-row:2;margin-top:0}
@media(max-width:1080px){
  .hero-home-grid>.hero-visual,.hero-home-grid>.hero-home-copy,.hero-home-grid>.hero-recos{grid-column:auto;grid-row:auto}
}
@media(max-width:760px){
  .hero-home-grid>.hero-home-copy{order:0}
  .hero-home-grid>.hero-visual{order:1}
  .hero-home-grid>.hero-recos{order:2}
}

.panel-search{width:100%;min-height:52px;border:1px solid var(--line-strong);border-radius:999px;background:#111;color:#fff;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;text-align:left}
.panel-search span{color:#777;font-size:12px}
.panel-search:hover{background:#1a1a1a}
@media(max-width:480px){.panel-search span{display:none}}

.eyebrow:before,.text-link:after,.faq-list summary:after{pointer-events:none}
.media-frame{aspect-ratio:16/9}