:root { color-scheme: light; --paper: #f1f0e8; --ink: #242424; }
* { box-sizing: border-box; }
body { margin: 0; padding: 42px 20px; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: #0000cc; }
a:hover { color: #dc2828; }
a:focus-visible { outline: 2px dashed #dc2828; outline-offset: 5px; }
.site-shell { max-width: 760px; margin: 0 auto; background: #fffefa; border: 1px solid #9d9c94; box-shadow: 5px 5px 0 #d8d7cf; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 28px; border-bottom: 1px dashed #b9b8af; }
.wordmark { color: #242424; font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 28px; font-weight: bold; text-decoration: none; transform: rotate(-2deg); }
.wordmark span { color: #d52c24; font-size: 18px; }
header > a:last-child { font-size: 13px; }
main { padding: 32px 24px 38px; text-align: center; }
.construction { display: inline-block; margin: 0; padding: 7px 13px; background: #fff075; border: 1px solid #242424; font: bold 11px 'Courier New', monospace; letter-spacing: 1px; transform: rotate(1deg); }
.construction span { font-size: 15px; margin: 0 4px; }
figure { width: 250px; max-width: 80%; margin: 30px auto 28px; transform: rotate(-3deg); }
figure img { display: block; width: 100%; height: auto; border: 1px solid #ddd; }
figcaption { margin: 9px 0 0; font: 11px 'Courier New', monospace; color: #75756c; }
h1 { margin: 0; font: bold clamp(32px, 7vw, 52px)/1.1 'Courier New', monospace; letter-spacing: -3px; }
.dots { color: #d52c24; }
.intro { margin: 22px 0; font-size: 15px; line-height: 1.65; }
.youtube-button { display: inline-block; background: #e9e9e9; color: #0000cc; padding: 10px 20px; border: 2px outset #dedede; font: bold 14px Arial, sans-serif; }
.youtube-button:active { border-style: inset; }
.small-note { margin: 9px 0 28px; color: #75756c; font-size: 10px; }
.progress { width: 180px; height: 12px; margin: 0 auto; border: 1px solid #999; padding: 2px; background: #eeeeea; text-align: left; }
.progress span { display: block; height: 6px; width: 13%; background: #d52c24; }
.progress-note { margin: 8px 0 0; font: 10px 'Courier New', monospace; color: #75756c; }
footer { display: flex; justify-content: space-between; gap: 15px; border-top: 1px dashed #b9b8af; padding: 16px 28px; font: 10px 'Courier New', monospace; color: #75756c; }
@media (max-width: 500px) { body { padding: 18px 14px; } header { padding: 18px 16px; gap: 10px; } .wordmark { font-size: 23px; } .wordmark span { font-size: 14px; } header > a:last-child { font-size: 11px; } main { padding: 28px 14px 32px; } figure { width: 220px; margin-block: 26px; } h1 { letter-spacing: -2px; } footer { padding: 15px 16px; font-size: 9px; } }