@charset "UTF-8";

/* 黄豆魔改短剧 本地样式 */

: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: 26px; }
.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 h1,
.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 h2,
.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 h2,
.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 h2,
.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; }

.faq-index {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 7px 28px;
 margin: 0 0 32px;
 padding: 20px 24px;
 border: 1px solid #e4dcc8;
 background: #fff;
}
.faq-index-label {
 grid-column: 1 / -1;
 margin: 10px 0 2px;
 color: var(--gold-deep);
 font-size: 13px;
 font-weight: 800;
 letter-spacing: 0.04em;
}
.faq-index-label:first-child { margin-top: 0; }
.faq-index a {
 color: #3f3a2f;
 font-size: 14px;
 line-height: 1.55;
}
.faq-list {
 display: grid;
 gap: 14px;
}
.faq-group {
 scroll-margin-top: 92px;
 display: grid;
 gap: 14px;
}
.faq-group > h2 {
 margin: 18px 0 2px;
 padding-bottom: 10px;
 border-bottom: 1px solid #e4dcc8;
 color: #1f2937;
 font-size: 20px;
 line-height: 1.4;
}
.faq-item {
 scroll-margin-top: 92px;
 padding: 22px 24px 20px;
 border: 1px solid #e4dcc8;
 background: #fffdf7;
}
.faq-item h3 {
 display: flex;
 gap: 12px;
 margin: 0 0 10px;
 font-size: 18px;
 line-height: 1.45;
}
.faq-item h3 b {
 flex: none;
 color: var(--gold-deep);
 font-size: 13px;
}
.faq-item p { color: #334155; font-size: 15px; line-height: 1.85; }
.faq-item a { color: #8a6408; font-weight: 700; }
.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 h1,
.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; padding-top: 48px; }
.footer-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 28px 32px;
 padding-bottom: 36px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-grid h2 {
 margin: 0 0 16px;
 color: var(--gold);
 font-size: 14px;
 font-weight: 800;
 letter-spacing: 0.12em;
}
.footer-grid ul {
 display: grid;
 gap: 10px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.footer-grid li,
.footer-grid a { color: #c0c6d0; font-size: 13px; line-height: 1.65; }
.footer-grid a:hover { color: var(--gold); }
.copyright { padding: 22px 0 28px; text-align: center; }
.copyright p { color: #858e9d; font-size: 12px; }
.copyright p + p { margin-top: 8px; }
.copyright-links {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px 20px;
}
.copyright-links a { color: var(--gold); }
.page-path {
 margin: 0 0 22px;
 color: #8a7f6b;
 font-size: 13px;
}
.page-path a { color: #8a6408; font-weight: 700; }
.faq-more { margin-top: 8px; }
.faq-more a { color: var(--gold-deep); font-size: 13px; font-weight: 700; }
.section-more {
 margin-top: 36px;
}
.section-more a {
 display: inline-flex;
 align-items: center;
 padding: 10px 18px;
 border: 1px solid var(--gold);
 color: var(--gold);
 font-size: 14px;
 font-weight: 800;
}
.column-copy {
 margin-top: 42px;
 display: grid;
 gap: 16px;
 max-width: 860px;
}
.column-copy h2 { font-size: 24px; }
.column-copy p,
.column-copy li { line-height: 1.85; }
.column-copy ul { padding-left: 1.2em; list-style: disc; }
.topic-links {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 8px;
}
.topic-links a {
 padding: 8px 14px;
 border: 1px solid currentColor;
 font-size: 13px;
 font-weight: 700;
}
.inner-main {
 padding: 72px 0 88px;
 color: var(--ink);
 background: var(--ivory);
}
.inner-article { max-width: 860px; }
.inner-article h1 { margin: 0 0 14px; font-size: clamp(32px, 5vw, 46px); }
.inner-lead { margin: 0 0 28px; color: #5c6574; font-size: 16px; line-height: 1.8; }
.inner-article h2 { margin: 34px 0 12px; font-size: 22px; }
.inner-article p,
.inner-article li { color: #334155; line-height: 1.85; }
.inner-article ul { margin: 0 0 16px; padding-left: 1.2em; list-style: disc; }
.contact-cards {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
 margin: 8px 0 28px;
}
.contact-cards article {
 padding: 20px 18px;
 border: 1px solid #d9d0bc;
 background: var(--paper);
}
.contact-cards h2 { margin: 0 0 8px; font-size: 16px; }
.contact-cards p { margin: 0; }
.contact-cards a { color: #8a6408; font-weight: 700; }
.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; }
 .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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; }
 .faq-index { grid-template-columns: 1fr; padding: 16px 14px; }
 .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-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}

@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-grid { grid-template-columns: 1fr; }
 .contact-cards { grid-template-columns: 1fr; }
 .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; }
}

.auto-link {
 color: var(--gold);
 text-decoration: underline;
 text-underline-offset: 3px;
 font-weight: 700;
}
.auto-related {
 width: min(calc(100% - 40px), var(--content));
 margin: 0 auto 56px;
 padding: 28px 24px;
 border: 1px solid #3a4354;
 background: #0b0f18;
 color: var(--white);
}
.auto-related h2 {
 margin-bottom: 16px;
 font-size: 22px;
}
.auto-related ul {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 10px 20px;
}
.auto-related a {
 color: var(--gold);
}

@media (max-width: 620px) {
 .auto-related { width: min(calc(100% - 28px), var(--content)); padding: 20px 16px; }
 .auto-related ul { grid-template-columns: 1fr; }
}