@charset "UTF-8";

/* 作者：搭客佬
官网：https://www.hddjmax.cn/ */

:root {
  --black: #05070c;
  --black-soft: #0b0f18;
  --panel: #111725;
  --panel-light: #171f31;
  --gold: #ffc72c;
  --gold-deep: #d99a12;
  --ivory: #f7f3e8;
  --paper: #fffdf7;
  --line: #273146;
  --ink: #15171d;
  --muted: #6e7480;
  --white: #ffffff;
  --content: 1200px;
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body {
  min-width: 320px;
  margin: 0;
  padding-top: var(--header-height);
  color: var(--ink);
  background: var(--ivory);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure { margin: 0; }
.screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  background: var(--black);
  border-bottom: 1px solid rgba(255, 199, 44, 0.25);
}
.topbar-frame,
.opening-frame,
.page-shell,
.download-console,
.footer-shell {
  width: min(calc(100% - 40px), var(--content));
  margin: 0 auto;
}
.topbar-frame { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.brand-mark, .footer-brand { display: inline-flex; min-width: 0; align-items: center; gap: 11px; }
.brand-mark img, .footer-brand img { width: 48px; height: 48px; object-fit: cover; border-radius: 11px; }
.brand-mark > span, .footer-brand > span { display: grid; min-width: 0; line-height: 1.25; }
.brand-mark strong, .footer-brand strong { color: var(--white); font-size: 18px; font-weight: 800; }
.brand-mark small, .footer-brand small { margin-top: 3px; color: #9da4b2; font-size: 12px; white-space: nowrap; }
.main-menu ul { display: flex; align-items: center; gap: 36px; }
.main-menu a { position: relative; display: block; padding: 26px 0 24px; color: #e6e8ec; font-size: 14px; font-weight: 700; }
.main-menu a::after {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  height: 2px;
  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transition: transform 0.16s ease;
}
.main-menu a:hover, .main-menu a.current { color: var(--gold); }
.main-menu a:hover::after, .main-menu a.current::after { transform: scaleX(1); }
.mobile-controls { display: none; }

.opening-stage {
  min-height: 730px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 13% 34%, rgba(255, 199, 44, 0.12), transparent 19%),
    linear-gradient(90deg, transparent 49.8%, rgba(255, 199, 44, 0.035) 50%, transparent 50.2%),
    var(--black);
  border-bottom: 9px solid #11151d;
}
.opening-frame { display: grid; grid-template-columns: 0.8fr 1.2fr; min-height: 730px; align-items: center; gap: 70px; padding: 70px 0; }
.overline { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; }
.opening-copy h1 {
  margin-top: 17px;
  color: var(--white);
  font-size: clamp(58px, 5vw, 82px);
  line-height: 1.05;
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.opening-copy h2 { max-width: 520px; margin-top: 19px; color: var(--gold); font-size: 27px; line-height: 1.35; }
.opening-lead { max-width: 530px; margin-top: 18px; color: #adb4c1; font-size: 15px; line-height: 1.9; }
.opening-action { display: flex; flex-direction: column; align-items: flex-start; margin-top: 29px; }
.opening-action a {
  display: inline-flex;
  min-width: 190px;
  justify-content: center;
  padding: 14px 25px;
  border: 1px solid #ffe9a4;
  border-radius: 4px;
  background: var(--gold);
  color: var(--black);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(255, 199, 44, 0.22);
}
.opening-action a:hover { background: #ffda63; }
.age-label { margin-top: 14px; color: #87909f; font-size: 12px; }
.opening-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.opening-tags span { padding: 6px 12px; border: 1px solid #384157; color: #c8ced8; font-size: 12px; }

.remix-console {
  position: relative;
  padding: 18px;
  border: 1px solid #3a4358;
  border-radius: 10px;
  background: linear-gradient(145deg, #171e2c, #080b12 78%);
  box-shadow: 0 36px 70px rgba(0, 0, 0, 0.55), inset 0 0 0 4px #0d111a;
}
.console-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px 14px; color: #cdd2dc; }
.console-head > span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.console-head p { display: flex; gap: 8px; }
.console-head p i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #343e50; }
.console-head p i:nth-child(2) { background: var(--gold-deep); }
.console-time { display: grid; grid-template-columns: repeat(5, 1fr); margin-left: 156px; color: #747e91; font-size: 12px; text-align: center; }
.track-set { position: relative; margin-top: 6px; border: 1px solid #2c3549; background: #080b12; }
.track-line { display: grid; grid-template-columns: 155px minmax(0, 1fr); min-height: 82px; align-items: center; border-bottom: 1px solid #252e40; }
.track-line:last-child { border-bottom: 0; }
.track-line strong { display: flex; height: 100%; align-items: center; gap: 11px; padding: 0 17px; color: #f0f1f4; font-size: 14px; }
.track-line strong > i { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid #725a19; color: var(--gold); font-size: 12px; font-style: normal; }
.film-symbol::before { width: 17px; height: 13px; border: 2px dotted var(--gold); content: ""; }
.character-symbol::before { width: 14px; height: 14px; border: 2px solid var(--gold); border-radius: 50%; content: ""; }
.topic-symbol::before { width: 16px; height: 12px; border: 2px solid var(--gold); content: ""; transform: rotate(-8deg); }
.wave { position: relative; display: block; height: 46px; margin-right: 17px; overflow: hidden; background: rgba(255, 199, 44, 0.06); }
.wave::before, .wave::after { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: var(--gold-deep); content: ""; }
.wave::after { height: 24px; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 199, 44, 0.8) 7px 10px); transform: translateY(-50%); }
.wave-two::after { height: 13px; opacity: 0.72; }
.wave-three::after { height: 31px; opacity: 0.55; }
.wave-four::after { height: 18px; opacity: 0.8; }
.playhead { position: absolute; top: 0; bottom: 0; left: 65%; width: 2px; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.playhead::before { position: absolute; top: -1px; left: -5px; border: 6px solid transparent; border-top-color: var(--gold); content: ""; }
.console-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; padding: 17px 4px 0; }
.console-footer > p { display: flex; gap: 10px; }
.console-footer > p span { width: 18px; height: 5px; background: #293246; }
.console-footer > button {
  display: grid;
  width: 72px;
  height: 72px;
  padding: 0;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #171b22;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(255, 199, 44, 0.08);
}
.console-footer > button i { margin-left: 5px; border: 12px solid transparent; border-left: 19px solid var(--gold); }
.level-meter { display: flex; justify-content: flex-end; align-items: flex-end; gap: 5px; height: 42px; }
.level-meter i { display: block; width: 7px; background: var(--gold); }
.level-meter i:nth-child(1) { height: 14px; }
.level-meter i:nth-child(2) { height: 26px; }
.level-meter i:nth-child(3) { height: 35px; }
.level-meter i:nth-child(4) { height: 20px; }
.level-meter i:nth-child(5) { height: 31px; }
.level-meter i:nth-child(6) { height: 10px; }

.studio-section, .radar-section, .interface-section, .help-section, .audience-section { padding: 92px 0; }
.section-title { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(280px, 0.72fr); align-items: end; gap: 18px; margin-bottom: 42px; }
.section-title > span { color: var(--gold-deep); font-size: 38px; font-weight: 900; line-height: 1; }
.section-title > div > p { color: var(--gold-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.15em; }
.section-title h2 { margin-top: 3px; font-size: clamp(38px, 4vw, 55px); line-height: 1.18; letter-spacing: -0.04em; }
.section-title > p { padding-bottom: 8px; color: var(--muted); font-size: 14px; }

.studio-section { background: #090d15; color: var(--white); }
.studio-section .section-title > p { color: #9aa3b2; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 34px; }
.studio-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.studio-flow::before { position: absolute; top: 27px; right: 11%; left: 11%; height: 2px; background: var(--gold); content: ""; }
.studio-flow article { position: relative; padding: 0 24px 28px; text-align: center; }
.studio-flow article > span {
  position: relative;
  z-index: 2;
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}
.studio-flow article > i { position: relative; display: block; width: 45px; height: 45px; margin: 0 auto 17px; border: 1px solid #3c465a; font-style: normal; }
.studio-flow article h3 { font-size: 18px; }
.studio-flow article p { margin-top: 8px; color: #9fa7b5; font-size: 13px; }
.search-icon::before { position: absolute; top: 11px; left: 11px; width: 15px; height: 15px; border: 2px solid var(--gold); border-radius: 50%; content: ""; }
.search-icon::after { position: absolute; top: 28px; left: 27px; width: 10px; height: 2px; background: var(--gold); content: ""; transform: rotate(45deg); }
.clap-icon::before { position: absolute; top: 14px; left: 10px; width: 23px; height: 16px; border: 2px solid var(--gold); content: ""; }
.clap-icon::after {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 24px;
  height: 6px;
  background: repeating-linear-gradient(135deg, var(--gold) 0 5px, transparent 5px 9px);
  content: "";
  transform: rotate(-9deg);
}
.list-icon::before { position: absolute; top: 12px; left: 12px; width: 20px; height: 18px; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); content: ""; }
.list-icon::after { position: absolute; top: 20px; left: 12px; width: 26px; height: 2px; background: var(--gold); content: ""; }
.bell-icon::before { position: absolute; top: 10px; left: 12px; width: 19px; height: 22px; border: 2px solid var(--gold); border-radius: 14px 14px 5px 5px; content: ""; }
.weekly-board { padding: 24px; border: 1px solid #5f4b16; background: linear-gradient(180deg, #151a26, #0a0d14); }
.weekly-board > p { color: var(--gold); font-size: 12px; letter-spacing: 0.12em; }
.weekly-board h3 { margin: 4px 0 19px; font-size: 24px; }
.weekly-board button { display: block; width: 100%; padding: 10px 12px; border: 1px solid #514724; background: transparent; color: #cbd0d9; cursor: pointer; font-size: 13px; }
.weekly-board button + button { margin-top: 9px; }
.weekly-board button.selected, .weekly-board button:hover { background: var(--gold); color: var(--black); }

.radar-section { background: var(--ivory); }
.radar-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #cfc7b6; background: var(--paper); }
.radar-column + .radar-column { border-left: 1px solid #cfc7b6; }
.radar-column header { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid #d8d1c3; background: #f1eadc; }
.radar-column header span {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}
.radar-column header h3 { font-size: 20px; }
.radar-column > p { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; padding: 18px 24px; border-bottom: 1px solid #e2dccf; }
.radar-column > p:last-child { border-bottom: 0; }
.radar-column strong { font-size: 15px; }
.radar-column > p > span { grid-column: 1; color: var(--muted); font-size: 12px; }
.radar-column > p > i { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--gold-deep); font-size: 12px; font-style: normal; font-weight: 800; }

.interface-section { color: var(--white); background: #070a11; }
.interface-section .section-title > p { color: #9da6b4; }
.interface-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.interface-grid figure { overflow: hidden; border: 1px solid #343d50; background: #0b0f18; }
.interface-view { display: block; width: 100%; aspect-ratio: 9 / 16; background: #070a0f; }
.interface-view img { width: 100%; height: 100%; object-fit: contain; }
.interface-grid figcaption { display: flex; min-height: 76px; align-items: center; gap: 13px; padding: 14px 16px; border-top: 1px solid #343d50; }
.interface-grid figcaption b { color: var(--gold); font-size: 12px; }
.interface-grid figcaption strong { font-size: 15px; }

.help-section { background: var(--paper); }
.question-list { border-top: 1px solid var(--ink); }
.question-list article { border-bottom: 1px solid #d5cfc2; }
.question-list button {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.question-list button span { display: inline-flex; align-items: center; gap: 20px; font-size: 16px; font-weight: 700; }
.question-list button b { color: var(--gold-deep); font-size: 12px; }
.question-list button i { font-size: 21px; font-style: normal; }
.question-list article > div { padding: 0 65px 21px; color: var(--muted); font-size: 14px; }
.site-address { width: 100%; margin-top: 20px; border: 1px solid var(--ink); background: var(--paper); }
.site-address summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  min-height: 72px;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}
.site-address summary::-webkit-details-marker { display: none; }
.site-address summary > i { color: var(--gold-deep); font-size: 19px; font-style: normal; }
.site-address summary strong { font-size: 16px; }
.site-address summary > span { position: relative; width: 18px; height: 18px; }
.site-address summary > span::before,
.site-address summary > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}
.site-address summary > span::after { transform: translate(-50%, -50%) rotate(90deg); }
.site-address[open] summary > span::after { display: none; }
.site-address > div { padding: 0 52px 20px; }
.site-address a { color: #315aaf; font-size: 14px; }

.audience-section { background: #f1ecdf; }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.audience-grid article { min-height: 250px; padding: 25px 23px; border: 1px solid #d4c7a8; background: var(--paper); box-shadow: inset 0 3px 0 var(--gold); }
.audience-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-bottom: 17px; border-bottom: 1px solid #ddd5c8; }
.audience-meta i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  font-size: 12px;
  font-style: normal;
}
.audience-meta strong { font-size: 14px; }
.audience-meta time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.audience-grid article > p { margin-top: 18px; font-size: 14px; line-height: 1.9; }

.download-section { padding: 72px 0; color: var(--white); background: #05070c; }
.download-console {
  display: grid;
  grid-template-columns: 105px 1fr minmax(380px, 1.2fr) 1fr 95px;
  min-height: 255px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #3a4354;
  background: linear-gradient(180deg, #141a25, #080b11);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.38);
}
.reel-control { position: relative; width: 72px; height: 72px; margin: auto; border: 8px solid #242c39; border-radius: 50%; background: #05070c; }
.reel-control::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
  transform: translate(-50%, -50%);
}
.reel-control i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #3a4558; }
.reel-control i:nth-child(1) { top: 7px; left: 20px; }
.reel-control i:nth-child(2) { top: 21px; right: 6px; }
.reel-control i:nth-child(3) { right: 18px; bottom: 6px; }
.reel-control i:nth-child(4) { bottom: 19px; left: 6px; }
.download-wave { position: relative; height: 70px; overflow: hidden; }
.download-wave::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #775d13; content: ""; }
.download-wave span {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 38px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 199, 44, 0.8) 7px 9px);
  transform: translateY(-50%);
}
.download-message { padding: 35px 20px; text-align: center; }
.download-message > p { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
.download-message h2 { margin-top: 6px; font-size: 31px; line-height: 1.28; }
.download-message > span { display: block; margin-top: 8px; color: #aab2bf; font-size: 13px; }
.download-message a {
  display: inline-flex;
  min-width: 190px;
  justify-content: center;
  margin-top: 22px;
  padding: 13px 24px;
  background: var(--gold);
  color: var(--black);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.mix-control { display: flex; height: 110px; justify-content: center; gap: 9px; border-left: 1px solid #30394b; }
.mix-control i { position: relative; width: 8px; height: 100%; background: #222b3a; }
.mix-control i::after { position: absolute; right: -4px; bottom: 20px; width: 16px; height: 24px; background: var(--gold); content: ""; }
.mix-control i:nth-child(2)::after { bottom: 50px; }
.mix-control i:nth-child(3)::after { bottom: 34px; }

.site-footer { color: var(--white); background: #03050a; }
.footer-row { display: flex; align-items: center; justify-content: space-between; padding: 35px 0 27px; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 28px; }
.footer-row nav a { color: #c0c6d0; font-size: 13px; }
.footer-row nav a:hover { color: var(--gold); }
.copyright { padding: 18px 0 24px; border-top: 1px solid rgba(255, 255, 255, 0.92); text-align: center; }
.copyright p { color: #858e9d; font-size: 12px; }
.back-top {
  position: fixed;
  z-index: 900;
  right: 24px;
  bottom: 24px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--gold);
  background: var(--black);
  color: var(--gold);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.back-top.visible { opacity: 1; pointer-events: auto; }
.back-top i { font-size: 21px; font-style: normal; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(255, 199, 44, 0.45); outline-offset: 3px; }

@media (max-width: 1040px) {
  .opening-frame { grid-template-columns: 0.75fr 1.25fr; gap: 40px; }
  .opening-copy h1 { font-size: 58px; }
  .console-time { margin-left: 130px; }
  .track-line { grid-template-columns: 130px minmax(0, 1fr); }
  .studio-flow article { padding-right: 14px; padding-left: 14px; }
  .download-console { grid-template-columns: 80px 0.8fr minmax(340px, 1.3fr) 0.8fr 75px; }
}

@media (max-width: 860px) {
  :root { --header-height: 66px; }
  body { padding-top: var(--header-height); }
  .topbar { height: var(--header-height); }
  .topbar-frame, .opening-frame, .page-shell, .download-console, .footer-shell { width: min(calc(100% - 28px), var(--content)); }
  .brand-mark img { width: 40px; height: 40px; }
  .brand-mark strong { font-size: 15px; }
  .brand-mark small { overflow: visible; font-size: 12px; text-overflow: clip; white-space: nowrap; }
  .mobile-controls { display: flex; align-items: center; gap: 8px; }
  .mobile-get { padding: 9px 11px; background: var(--gold); color: var(--black); font-size: 12px; font-weight: 800; white-space: nowrap; }
  .nav-switch { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid #8991a0; background: var(--black); cursor: pointer; }
  .nav-switch i, .nav-switch i::before, .nav-switch i::after { display: block; width: 19px; height: 2px; background: var(--white); content: ""; }
  .nav-switch i { position: relative; }
  .nav-switch i::before { position: absolute; top: -6px; }
  .nav-switch i::after { position: absolute; top: 6px; }
  .main-menu {
    position: fixed;
    z-index: 999;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    padding: 8px 14px 15px;
    background: var(--black);
    border-bottom: 1px solid #333c4e;
  }
  .main-menu.open { display: block; }
  .main-menu ul { display: block; }
  .main-menu li + li { border-top: 1px solid #252d3b; }
  .main-menu a { padding: 13px 4px; }
  .main-menu a::after { display: none; }
  .opening-stage, .opening-frame { min-height: 0; }
  .opening-frame { grid-template-columns: 1fr; gap: 45px; padding: 51px 0 60px; }
  .opening-copy { text-align: center; }
  .opening-copy h1 { font-size: clamp(48px, 12vw, 70px); white-space: normal; }
  .opening-copy h2, .opening-lead { margin-right: auto; margin-left: auto; }
  .opening-action { align-items: center; }
  .opening-tags { justify-content: center; }
  .remix-console { width: min(650px, 100%); margin: 0 auto; }
  .studio-section, .radar-section, .interface-section, .help-section, .audience-section { padding: 68px 0; }
  .section-title { grid-template-columns: auto 1fr; gap: 13px; margin-bottom: 31px; }
  .section-title > p { grid-column: 1 / 3; padding: 0; }
  .studio-layout { grid-template-columns: 1fr; }
  .studio-flow article { padding-bottom: 10px; }
  .weekly-board { display: grid; grid-template-columns: 1fr repeat(4, auto); align-items: center; gap: 8px; }
  .weekly-board > p { display: none; }
  .weekly-board h3 { margin: 0 12px 0 0; }
  .weekly-board button, .weekly-board button + button { width: auto; margin: 0; }
  .radar-board { grid-template-columns: 1fr; }
  .radar-column + .radar-column { border-top: 1px solid #cfc7b6; border-left: 0; }
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-console { grid-template-columns: 80px 1fr 80px; }
  .download-wave { display: none; }
  .footer-row { flex-direction: column; gap: 22px; text-align: center; }
  .footer-row nav { justify-content: center; }
}

@media (max-width: 620px) {
  .topbar-frame { gap: 7px; }
  .brand-mark { gap: 7px; }
  .brand-mark img { width: 34px; height: 34px; }
  .brand-mark strong { font-size: 14px; }
  .brand-mark small { font-size: 12px; }
  .mobile-get { padding: 8px 9px; }
  .nav-switch { width: 38px; height: 38px; }
  .opening-copy h2 { font-size: 22px; }
  .opening-lead { font-size: 14px; }
  .remix-console { padding: 10px; }
  .console-time { margin-left: 92px; }
  .console-time span { font-size: 12px; }
  .track-line { grid-template-columns: 92px minmax(0, 1fr); min-height: 68px; }
  .track-line strong { gap: 5px; padding: 0 8px; font-size: 12px; }
  .track-line strong > i { width: 26px; height: 26px; }
  .wave { margin-right: 8px; }
  .console-footer { gap: 10px; }
  .console-footer > button { width: 57px; height: 57px; }
  .section-title > span { font-size: 28px; }
  .section-title h2 { font-size: 38px; }
  .studio-flow { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .studio-flow::before { display: none; }
  .weekly-board { grid-template-columns: repeat(2, 1fr); }
  .weekly-board h3 { grid-column: 1 / 3; margin: 0 0 8px; }
  .weekly-board button { width: 100%; }
  .interface-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .interface-grid figcaption { min-height: 68px; padding: 10px; }
  .interface-grid figcaption strong { font-size: 13px; }
  .question-list button { padding: 14px 13px; }
  .question-list button span { gap: 8px; padding-right: 8px; font-size: 14px; }
  .question-list article > div { padding: 0 42px 18px; }
  .site-address summary { padding: 14px 13px; }
  .site-address summary strong { font-size: 14px; }
  .site-address > div { padding: 0 42px 18px; }
  .audience-grid { grid-template-columns: 1fr; }
  .audience-grid article { min-height: 0; }
  .audience-meta { grid-template-columns: auto 1fr auto; }
  .audience-meta time { justify-self: end; }
  .download-section { padding: 45px 0; }
  .download-console { grid-template-columns: 1fr; padding: 26px 20px; }
  .reel-control, .mix-control { display: none; }
  .download-message { padding: 8px 0; }
  .download-message h2 { font-size: 27px; }
  .download-message a { width: 100%; }
  .footer-brand { flex-direction: column; }
  .footer-row nav { gap: 13px 20px; }
  .back-top { right: 13px; bottom: 13px; width: 45px; height: 45px; }
}

@media (max-width: 390px) {
  .topbar-frame { width: calc(100% - 18px); }
  .brand-mark strong { font-size: 13px; }
  .mobile-get { padding: 7px; }
  .nav-switch { width: 36px; height: 36px; }
  .audience-meta { gap: 7px; }
  .audience-meta time { font-size: 12px; }
}

@media (hover: none), (max-width: 860px) {
  a, button, summary, .main-menu a::after, .back-top { transition: none !important; animation: none !important; }
  a:active, button:active, summary:active { opacity: 1; filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}