.beginning { background: radial-gradient(ellipse at 85% 0, #23101a80, transparent 35%); width: min(1280px, calc(100% - 80px)); margin-inline: auto; padding-inline: 0; }
.mode-guide { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.mode-guide-copy { min-width: 0; }
.mode-guide-copy .section-heading { margin-bottom: 28px; }
.mode-guide-copy .section-heading .eyebrow { margin: 0; }
.mode-guide-copy .section-heading h2 { font-size: clamp(30px, 2.8vw, 38px); line-height: 1.45; margin: 12px 0 16px; }
.mode-guide-copy .section-heading h2:focus { outline: none; }
.mode-guide-copy .section-lead { margin: 0; line-height: 1.8; }
.mode-guide h3, .start-subheading h3 { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 36px); line-height: 1.65; font-weight: 600; letter-spacing: -.04em; margin: 14px 0 24px; }
.mode-introduction > .eyebrow { margin: 0 0 8px; }
.mode-introduction > h3 { font-family: var(--serif); font-size: 23px; line-height: 1.65; margin: 0 0 14px; letter-spacing: -.035em; }
.mode-introduction > p:not(.eyebrow), .start-subheading > p:not(.eyebrow) { font-size: 16px; line-height: 1.85; color: #b3bac6; margin: 0 0 16px; }
.mode-command-list { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.mode-command-list span, .start-subheading code { font: inherit; background: #ed3b4617; border: 1px solid #ed3b4652; color: #f28690; padding: 5px 12px; }
.start-subheading code { display: inline-block; padding: 0 7px; font-size: 15px; line-height: 1.8; }
.mode-introduction > p.guide-hint { border-left: 2px solid var(--red); padding-left: 14px; font-size: 14px; line-height: 1.8; }
.mode-introduction > p.image-help { font-size: 14px; color: #8e97a6; margin: 12px 0 0; }
.mode-guide .starts { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
.mode-guide .starts article { display: grid; grid-template-columns: 165px minmax(0, 1fr); column-gap: 20px; padding-top: 16px; }
.mode-guide .starts article > .eyebrow { grid-column: 1; grid-row: 1; margin: 0; font-size: 10px; letter-spacing: .09em; }
.mode-guide .starts h3 { grid-column: 1; grid-row: 2; margin: 5px 0 6px; font-size: 20px; line-height: 1.6; }
.mode-guide .starts article > p:not(.eyebrow) { grid-column: 1; grid-row: 3; font-size: 14px; line-height: 1.7; margin: 0; }
.mode-guide .starts article > div { grid-column: 2; grid-row: 1 / span 3; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 18px; margin: 0; }
.mode-guide .starts article > div > span { font-size: 12px; line-height: 1.7; }
.mode-guide .starts article > div > p { font-size: 14px; line-height: 1.8; margin: 8px 0 0; }
.guide-image { display: block; min-width: 0; padding: 0; text-align: left; background: #10141d; border: 1px solid #ffffff25; width: 100%; }
.guide-image > img { width: 100%; height: auto; object-fit: contain; transition: filter .2s; }
.guide-image:hover > img { filter: brightness(1.07); }
.guide-image > span { display: flex; justify-content: space-between; align-items: center; padding: 12px 17px; font-size: 14px; color: #d8dce5; }
.guide-image b { font-weight: 400; color: #f07380; font-size: 20px; }
.mode-poster { max-width: 100%; }
.female-play, .female-notice { margin-top: 80px; border-top: 1px solid var(--line); padding-top: 35px; }
.start-subheading { margin-bottom: 30px; }
.female-gallery { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.female-scenes { display: grid; gap: 24px; }
.female-standing { background: #fafafa; }
.female-standing > span { background: #10141d; }
.female-choice-note { color: #b3bac6; font-size: 16px; line-height: 2; border-left: 2px solid var(--red); padding-left: 18px; margin: 28px 0 0; }
.notice-rules { background: #18111b; border: 1px solid #ed3b4645; padding: 22px 26px; }
.notice-rules p { margin: 4px 0; font-size: 16px; line-height: 1.9; }
.notice-rules strong { font-weight: 500; }
.notice-rules p:last-child { color: #ff8c98; }
.guide-download { display: inline-flex; gap: 24px; align-items: center; font-size: 14px; color: #bbc6d4; padding: 14px 0; border-bottom: 1px solid #ffffff40; margin: 18px 0 30px; }
.guide-download:hover { color: #fff; }
.notice-option { border-top: 1px solid var(--line); }
.notice-option:last-child { border-bottom: 1px solid var(--line); }
.notice-option > summary { display: flex; gap: 24px; align-items: center; padding: 24px 0; list-style: none; cursor: pointer; }
.notice-option > summary::-webkit-details-marker { display: none; }
.notice-index { color: #f17582; font-size: 13px; letter-spacing: .12em; }
.notice-option summary strong { display: block; font-size: 18px; font-weight: 500; }
.notice-option summary small { display: block; margin-top: 6px; color: #9ca7b6; font-size: 14px; }
.notice-plus { margin-left: auto; font-size: 26px; color: #f17582; }
.notice-option[open] .notice-plus { font-size: 0; }
.notice-option[open] .notice-plus::after { content: '−'; font-size: 26px; }
.notice-option summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.notice-content { padding: 0 0 30px 43px; min-width: 0; }
.notice-toolbar { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.guide-copy { display: flex; align-items: center; gap: 20px; padding: 10px 17px; background: #ed3b46; color: #fff; font-size: 14px; font-weight: 500; }
.guide-copy:hover { background: #ff5360; }
.guide-copy:disabled { opacity: .7; cursor: progress; }
.notice-toolbar p { flex: 1; min-width: 220px; color: #a9b4c5; font-size: 14px; line-height: 1.85; margin: 0; }
.copy-status { font-size: 14px; color: #8de0d3; margin: 12px 0 0; }
.copy-status:empty { display: none; }
.notice-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/2 var(--body); color: #c6cedb; background: #0e1219; border: 1px solid #ffffff17; padding: 24px; margin: 20px 0 0; }
.manual-copy { width: 100%; height: 230px; margin-top: 16px; padding: 16px; color: #e5e9f0; background: #141b27; border: 1px solid #91c8d6; font: 14px/1.8 var(--body); }
@media (max-width: 980px) {
  .beginning { width: calc(100% - 64px); }
  .mode-guide { grid-template-columns: 1fr; gap: 28px; }
  .mode-guide-copy { display: contents; }
  .mode-guide-copy .section-heading { grid-row: 1; margin: 0; }
  .mode-introduction { grid-row: 2; }
  .mode-poster { grid-row: 3; width: min(100%, 540px); justify-self: center; }
  .mode-guide .starts { grid-row: 4; margin-top: 0; }
  .female-gallery { gap: 20px; }
}
@media (max-width: 640px) {
  .beginning { width: calc(100% - 48px); }
  .mode-guide { gap: 24px; }
  .mode-guide-copy .section-heading h2 { font-size: 30px; }
  .mode-introduction > h3 { font-size: 22px; }
  .start-subheading h3 { font-size: 27px; }
  .mode-command-list { gap: 8px; margin: 22px 0; }
  .mode-command-list span { font-size: 14px; padding: 5px 10px; }
  .mode-guide .starts { gap: 24px; }
  .mode-guide .starts article { display: block; padding-top: 18px; }
  .mode-guide .starts h3 { font-size: 22px; margin: 7px 0 10px; }
  .mode-guide .starts article > p:not(.eyebrow) { font-size: 15px; }
  .mode-guide .starts article > div { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; margin-top: 14px; }
  .female-play, .female-notice { margin-top: 60px; padding-top: 26px; }
  .female-gallery { grid-template-columns: 1fr; gap: 20px; }
  .female-scenes { gap: 20px; }
  .female-standing { max-width: 450px; justify-self: center; }
  .guide-image > span { padding: 10px 14px; }
  .notice-rules { padding: 18px; }
  .notice-rules p { margin: 7px 0; }
  .notice-option > summary { gap: 13px; padding: 22px 0; }
  .notice-option summary strong { font-size: 16px; }
  .notice-option summary small { font-size: 13px; }
  .notice-content { padding-left: 0; }
  .notice-toolbar { gap: 12px; }
  .notice-toolbar p { min-width: 100%; }
  .notice-text { padding: 18px; font-size: 14px; }
}