:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; color: #edf4f7; background: #0c121a; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #ffc857; text-underline-offset: 4px; }
a:hover { color: #fff0cc; }
a:focus-visible { outline: 3px solid #ffc857; outline-offset: 5px; border-radius: 3px; }
.skip { position: absolute; left: 16px; top: -100px; padding: 12px; background: #0c121a; z-index: 2; }
.skip:focus { top: 12px; }
.page { max-width: 1120px; margin: auto; padding: 0 32px; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid #33404e; }
.brand { font-size: 34px; font-weight: 900; letter-spacing: -1px; text-decoration: none; color: #edf4f7; }
.play { display: inline-flex; align-items: center; gap: 24px; min-height: 46px; padding: 12px 20px; background: #ffc857; color: #111820; font-weight: 750; text-decoration: none; border-radius: 6px; }
.play:hover { background: #ffdc90; color: #111820; }
.intro { padding: 64px 0 44px; max-width: 780px; }
.eyebrow, .number { font-size: 12px; font-weight: 750; letter-spacing: 1.4px; color: #ffc857; }
h1 { font-size: clamp(34px, 5.5vw, 58px); line-height: 1.08; letter-spacing: -1.5px; margin: 16px 0 24px; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.5px; margin: 12px 0 24px; }
h3 { font-size: 19px; line-height: 1.4; margin: 28px 0 8px; }
p, li, dd { line-height: 1.7; color: #bdcbd8; font-size: 17px; }
.intro > p:not(.eyebrow) { font-size: 19px; }
.intro > .muted { font-size: 15px !important; color: #a4b4c4; }
strong { color: #edf4f7; font-weight: 650; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 60px; border-top: 1px solid #33404e; }
.contents { position: sticky; top: 24px; align-self: start; padding: 26px 0; }
.contents a { display: block; padding: 12px 0; color: #bdcbd8; text-decoration: none; font-size: 15px; }
.contents a:hover { color: #ffc857; text-decoration: underline; }
.chapters { min-width: 0; }
section { padding: 32px 0 40px; border-bottom: 1px solid #33404e; scroll-margin-top: 24px; }
li { padding-left: 6px; margin: 14px 0; }
ol, ul { padding-left: 22px; }
.note { margin: 24px 0 0; background: #162230; border-left: 3px solid #ffc857; padding: 18px 22px; color: #bdcbd8; font-size: 16px; line-height: 1.7; }
.note > strong:first-child { display: block; margin-bottom: 4px; }
kbd { font: 600 13px/1.5 ui-monospace, monospace; padding: 2px 6px; border: 1px solid #546579; border-radius: 4px; color: #edf4f7; white-space: nowrap; }
.controls { border: 1px solid #33404e; border-radius: 8px; overflow: hidden; }
.controls > div { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; gap: 12px; padding: 14px 18px; }
.controls > div + div { border-top: 1px solid #33404e; }
dt { font-size: 15px; } dd { margin: 0; font-size: 15px; }
.end { padding: 40px 0 64px; }
footer { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; border-top: 1px solid #33404e; padding: 24px 0; color: #a4b4c4; font-size: 14px; }
footer a { padding: 10px 0; } footer span { margin-right: auto; }
@media (max-width: 760px) { .page { padding: 0 20px; } .intro { padding: 40px 0 24px; } .guide-layout { display: block; } .contents { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; border-bottom: 1px solid #33404e; } .contents .eyebrow { grid-column: 1 / -1; } section { padding: 24px 0 32px; } .brand { font-size: 28px; } }
@media (max-width: 360px) { .controls > div { grid-template-columns: 1fr; gap: 6px; } .play { gap: 12px; padding: 12px; } }
@media print { :root { color-scheme: light; } body { background: white; color: black; } p, li, dd, strong { color: black; } .contents, .play, .skip, footer { display: none; } .guide-layout { display: block; } }