:root { color-scheme: light; font-family: "Microsoft YaHei", sans-serif; background: #0e171a; color: #ebf2ee; }
* { box-sizing: border-box; }
body { margin: 0; background: #0e171a; }
body > header.b35-brand { padding: 16px 4vw; background: #121f23; border-bottom: 2px solid #e74e85; font: 700 23px/1.4 sans-serif; letter-spacing: .08em; }
.b35-brand a { color: #f1fbf6; text-decoration: none; }
nav.b35-navigation { display: flex; gap: 8px 15px; flex-wrap: wrap; padding: 12px 4vw; background: #17282d; border-bottom: 1px solid #31505a; }
nav.b35-navigation a { color: #a8d8d3; text-decoration: none; font-size: 13px; }
main { max-width: 1360px; margin: auto; padding: 30px 4vw 70px; }
main > h1 { margin: 0 0 20px; color: #fbf0fa; font: 700 clamp(27px,4vw,48px)/1.2 sans-serif; }
.p11-intro { display: grid; grid-template-columns: minmax(0,1fr) 255px; gap: 26px; padding: 28px; background: #1c2e33; border: 1px solid #36545a; border-radius: 22px; }
.p11-intro-head > p { margin: 0 0 8px; color: #ff7fa8; font-size: 13px; }
.p11-intro h2 { margin: 0 0 15px; color: #a9e4d7; font-size: 22px; }
.p11-intro-head > div { line-height: 2; }
.p11-art-shelf { display: flex; flex-wrap: wrap; gap: 7px; align-content: start; }
.p11-art { width: 55px; margin: 0; padding: 6px; border-radius: 14px; background: #263e43; text-align: center; }
.p11-art img { display: block; width: 42px; height: 42px; object-fit: contain; margin: auto; }
.p11-art figcaption { margin-top: 4px; color: #94bab5; font-size: 9px; }
.p11-control-room { display: grid; grid-template-columns: 166px minmax(0,1fr); gap: 24px; margin-top: 32px; }
.p11-side-note { align-self: start; position: sticky; top: 12px; padding: 20px 14px; border: 1px solid #426369; background: #132328; color: #c2d8d3; }
.p11-side-note h2 { color: #ff7fa8; font-size: 16px; }
.p11-side-note p { padding: 9px 0; border-bottom: 1px dashed #45636a; }
.p11-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.p11-block { min-width: 0; padding: 21px; background: #17272c; border: 1px solid #314c52; border-top: 3px solid #37b8a9; border-radius: 5px 17px 5px 17px; }
.p11-block h2 { margin: 0 0 15px; color: #c8f0e4; font-size: 21px; }
.p11-panel { padding: 17px; border-left: 2px solid #e74e85; background: #20363b; line-height: 1.9; }
.p11-panel h3 { margin: 0 0 9px; color: #ff92b3; font-size: 17px; }
.p11-panel p { margin: 0; }
.p11-echoes { display: grid; grid-template-columns: 1fr; gap: 12px; }
.p11-echo { padding: 15px; border: 1px solid #3a5d61; background: #102126; line-height: 1.8; }
.p11-echo span { color: #84ddd0; font-weight: 700; }
.p11-echo p { margin: 8px 0; }
.p11-echo small { color: #ff9ab8; }
.p11-story-list { list-style: none; padding: 0; margin: 0; }
.p11-story { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #355158; }
.p11-story img { width: 42px; height: 42px; object-fit: contain; }
.p11-story time { color: #8dafab; font-size: 11px; }
.p11-story h3 { margin: 5px 0 7px; color: #f6ccda; font-size: 17px; }
.p11-story p { margin: 0; line-height: 1.9; }
.p11-q-list { display: grid; gap: 7px; }
.p11-question { padding: 13px 15px; border: 1px solid #355257; background: #102126; }
.p11-question summary { color: #b7ebe0; cursor: pointer; font-weight: 650; }
.p11-answer { line-height: 1.9; }
.p11-inner { max-width: 1120px; margin: auto; padding: 28px; background: #17272c; border: 1px solid #355058; }
.p11-inner header { margin-bottom: 23px; }
.p11-inner header p { color: #ff7fa8; }
.p11-inner h1 { color: #e9f4ef; font-size: 34px; }
.p11-milestones { list-style: none; margin: 0 0 26px; padding: 0 0 0 28px; border-left: 2px solid #37b8a9; }
.p11-milestones li { position: relative; margin: 0 0 20px; }
.p11-milestones li::before { content: ""; position: absolute; left: -35px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: #e74e85; }
.p11-feed header { border-bottom: 1px solid #395960; }
.p11-feed header p { color: #9abfba; }
.p11-dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 25px; }
.p11-dossier-grid section { position: relative; padding: 14px 0 0; }
.p11-dossier-grid b { display: inline-block; margin-bottom: 8px; color: #ff7fa8; font: 24px Georgia,serif; }
.p11-window-body { display: grid; grid-template-columns: 190px 1fr; gap: 22px; margin-bottom: 26px; }
.p11-window blockquote, .p11-screen-title { display: grid; place-content: center; margin: 0; min-height: 240px; background: #243c42; color: #90e1d2; font-size: 21px; line-height: 1.9; text-align: center; }
.p11-window-body .p11-panel + .p11-panel, .p11-device-screen .p11-panel + .p11-panel { margin-top: 12px; }
.p11-device-screen { display: grid; grid-template-columns: 180px 1fr; gap: 22px; margin-bottom: 25px; }
body > footer.b35-footer { padding: 28px 4vw; background: #121f23; color: #b9d0cb; }
.b35-footer a { color: #a8d8d3; margin-right: 16px; }
@media (max-width: 850px) {
  main { padding: 20px 4vw 45px; }
  .p11-intro, .p11-control-room, .p11-window-body, .p11-device-screen { grid-template-columns: 1fr; }
  .p11-side-note { position: static; }
  .p11-stage { grid-template-columns: 1fr; }
  .p11-dossier-grid { grid-template-columns: 1fr; }
}