:root { font-family: system-ui, sans-serif; color: #192657; background: #e5e4de; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: linear-gradient(#19265726, #19265726), url("site/bck.jpg") center / cover fixed no-repeat; }
main { position: relative; width: min(440px, calc(100% - 32px)); margin: 24px auto; padding: 32px; background: #fffdf5; border: 1px solid #d8cc9b; border-radius: 20px; box-shadow: 0 18px 60px #19265724; }
a { color: #253b7b; }
h1 { font-size: 1.8rem; margin: 0; }
p { line-height: 1.5; font-size: .95rem; }
#picker { text-align: center; width: min(540px, calc(100% - 32px)); }
#pickerDescription { margin: 12px 0; color: #626779; }
.close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; text-decoration: none; font-size: 1.6rem; border-radius: 8px; }
.close:hover { background: #eee8d4; }
.flow { color: #756021; margin: 18px 0; font-size: .9rem; }
button { font: inherit; min-height: 48px; padding: 12px 16px; border: 2px solid #ccaf55; border-radius: 10px; color: #192657; background: #fffdf3; }
button { font-weight: 700; cursor: pointer; }
button:hover { background: #f5e8b5; }
button:focus-visible, a:focus-visible { outline: 3px solid #2488cb; outline-offset: 3px; }
button:disabled { opacity: .45; cursor: default; }
.primary { background: #20285d; color: white; }
.primary:hover { background: #354582; }
#picker button { width: 100%; }
#themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#themes button { text-align: left; padding: 10px 12px; font-size: .9rem; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: .85rem; color: #626779; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #ded5b3; }
#player { width: 100%; height: 100dvh; display: flex; flex-direction: column; background: white; }
iframe { width: 100%; flex: 1; border: 0; min-height: 0; }
#complete a { display: inline-block; margin-top: 20px; }
@media(max-width:650px) {
  main { padding: 32px 22px 24px; }

}

#intro { width: min(540px, calc(100% - 32px)); }
#intro h1 { font-size: 1.5rem; }
#introTheme { font-weight: 700; }
#summary { padding-left: 24px; line-height: 1.6; }
#summary li { margin: 12px 0; }
#intro button { width: 100%; margin-top: 10px; }
#printMaterials { margin: 20px 0 10px; border-top: 1px solid #ded5b3; padding-top: 14px; }
#printMaterials summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
#printMaterials summary:focus-visible { outline: 3px solid #2488cb; outline-offset: 3px; }
#printMaterials p { font-size: .85rem; color: #626779; }
#materialList h2 { font-size: .95rem; margin: 16px 0 8px; }
.material-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.material-links a { border: 1px solid #d8cc9b; border-radius: 8px; padding: 10px; font-size: .8rem; line-height: 1.4; background: white; }