/* parchment.css - the optional "Parchment" theme (day and candlelight).
   Everything here only applies when <html> has the class "parchment", so Light and Dark mode are untouched.
   Textures, flourishes and the wax seal are self-made CSS/SVG. Fonts: Cinzel, Cinzel Decorative, IM Fell English
   (SIL Open Font License, files in /fonts). */

@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/cinzel-latin.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/cinzel-decorative-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-italic.woff2) format('woff2'); }



/* ---------- shared parchment rules */
html.parchment body {
    --radius: 3px; --radius-lg: 4px;
    font-family: 'IM Fell English', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    font-size: 17px;
}
html.parchment .header h1 { font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: 0.04em; font-size: 1.9rem; }
html.parchment .controls h3, html.parchment .et-settings h3 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 1rem; }
html.parchment .btn, html.parchment input[type="submit"], html.parchment .btn-answer, html.parchment .answer-btn,
html.parchment .btn-play-pitch, html.parchment .btn-start, html.parchment .btn-next, html.parchment .btn-reset,
html.parchment #dark-mode-toggle { font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.03em; }
/* chord names need real lower case (Am is not AM), so answers and chord names use IM Fell English */
html.parchment .btn-answer, html.parchment .chord-diagram-name { font-family: 'IM Fell English', Georgia, serif; letter-spacing: 0; font-size: 1.1rem; }
html.parchment label { font-family: 'IM Fell English', Georgia, serif; }
html.parchment select, html.parchment input[type="number"] { font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif; font-size: 0.95rem; }
html.parchment .notelist label { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.9rem; }
html.parchment .score-board, html.parchment .keys-hint { font-variant-numeric: lining-nums; }
html.parchment .form-group label, html.parchment .checkbox-item label { font-size: 1rem; }
html.parchment #countdown-timer, html.parchment #countdown-timer-chord { font-family: 'Cinzel', Georgia, serif; }

/* cards: position for the ornaments */
html.parchment .header,
html.parchment .intro-section,
html.parchment .controls,
html.parchment #paper,
html.parchment #chord-paper,
html.parchment .et-settings,
html.parchment .play-area { position: relative; border-radius: 4px; }
html.parchment .header::before,
html.parchment .intro-section::before,
html.parchment .controls::before,
html.parchment #paper::before,
html.parchment #chord-paper::before,
html.parchment .et-settings::before,
html.parchment .play-area::before {
    content: ''; position: absolute; inset: 6px; pointer-events: none; border-radius: 2px; z-index: 0; }
html.parchment .header > *, html.parchment .intro-section > *, html.parchment .controls > *, html.parchment .et-settings > *, html.parchment .play-area > * { position: relative; z-index: 1; }

/* wax seal with ribbon under the page title */
html.parchment .header { overflow: visible; margin-bottom: calc(var(--spacing-xl) + 26px); }
html.parchment .header::after { content: ''; position: absolute; left: 50%; bottom: -46px; width: 84px; height: 67px; transform: translateX(-50%) rotate(-4deg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96' viewBox='0 0 120 96'%3E %3Cdefs%3E%3CradialGradient id='w' cx='40%25' cy='35%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23c8372a'/%3E%3Cstop offset='0.6' stop-color='%238f1d14'/%3E%3Cstop offset='1' stop-color='%235c0f0a'/%3E%3C/radialGradient%3E %3ClinearGradient id='rb' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%237d1a12'/%3E%3Cstop offset='1' stop-color='%234f0d08'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M44 48 L30 92 L38 86 L42 95 L54 54 Z' fill='url(%23rb)'/%3E %3Cpath d='M76 48 L90 92 L82 86 L78 95 L66 54 Z' fill='url(%23rb)'/%3E %3Cpath d='M60 6 C70 5 74 11 82 12 C90 14 92 22 95 29 C99 37 96 44 98 51 C99 60 92 64 88 71 C83 78 76 78 68 82 C61 85 54 83 47 80 C39 77 33 75 29 68 C25 61 21 56 22 48 C22 40 24 33 28 26 C33 18 38 14 46 10 C51 7 55 6 60 6 Z' fill='url(%23w)'/%3E %3Ccircle cx='60' cy='44' r='26' fill='none' stroke='%235a0d08' stroke-width='2' opacity='0.7'/%3E %3Ccircle cx='60' cy='44' r='22' fill='none' stroke='%23e2675a' stroke-width='0.8' opacity='0.45'/%3E %3Cg fill='%235a0d08' opacity='0.85'%3E%3Cellipse cx='54' cy='55' rx='7' ry='5' transform='rotate(-20 54 55)'/%3E%3Crect x='59.5' y='26' width='2.6' height='29'/%3E %3Cpath d='M62 26 c3 6 13 8 9 19 c4 -9 -4 -11 -9 -13 z'/%3E%3C/g%3E %3Cellipse cx='50' cy='26' rx='9' ry='4' fill='%23fff' opacity='0.18' transform='rotate(-25 50 26)'/%3E %3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(40,15,5,.45)); pointer-events: none; z-index: 2; }
html.parchment #logo { border-radius: 50%; box-shadow: 0 0 0 2px var(--p-orn), 0 0 0 5px var(--p-card), 0 0 0 6px var(--p-orn); }

/* ribbon banners for the card titles (quest-log style) */
html.parchment .controls h3 {
    position: relative; display: block; text-align: center; margin: -0.25rem auto var(--spacing-lg); padding: 0.55rem 2.2rem; max-width: 92%;
    border: none; border-radius: 0; text-shadow: 0 1px 0 rgba(0,0,0,.35);
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
html.parchment .et-settings h3 { text-align: center; padding-bottom: 22px; }

/* buttons */
html.parchment .btn-primary, html.parchment input[type="submit"].btn-primary, html.parchment .btn-start, html.parchment .btn-next, html.parchment #quiz-start {
    background: linear-gradient(180deg, #9a3324 0%, #741f15 55%, #5c160e 100%); color: #fbecc9; border: 1px solid #3f0d07;
    box-shadow: inset 0 1px 0 rgba(255,220,180,.35), 0 2px 4px rgba(40,15,5,.4); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
html.parchment .btn-primary:hover, html.parchment .btn-start:hover, html.parchment .btn-next:hover { background: linear-gradient(180deg, #a83a2a 0%, #80241a 55%, #651a10 100%); }
html.parchment .btn-success, html.parchment .btn-play-pitch {
    background: linear-gradient(180deg, #4f7a35 0%, #355a22 60%, #284618 100%); color: #f3ecc8; border: 1px solid #1c3310;
    box-shadow: inset 0 1px 0 rgba(230,255,200,.3), 0 2px 4px rgba(20,30,5,.4); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
html.parchment .btn-success:hover, html.parchment .btn-play-pitch:hover { background: linear-gradient(180deg, #5a8a3d 0%, #3d6627 60%, #2e511c 100%); }
html.parchment .btn-play-pitch:disabled { filter: grayscale(.7) brightness(.9); opacity: .7; }
html.parchment input[type="submit"] { font-size: 1.15rem; }
html.parchment .intro-section a[href*="docs.google.com"] { background-color: #3c4f7c !important; font-family: 'Cinzel', Georgia, serif !important; border: 1px solid #23305a; }

/* the generated music: sepia ink on its own sheet */
html.parchment #paper svg .abcjs-title, html.parchment #chord-paper svg .abcjs-title { font-family: 'IM Fell English', Georgia, serif; }
html.parchment .chord-sheet { background: transparent; box-shadow: none; }
html.parchment #chord-charts svg line, html.parchment .quiz-question svg line { stroke: var(--p-paper-ink); }
html.parchment #chord-charts svg circle[fill="#222"], html.parchment .quiz-question svg circle[fill="#222"],
html.parchment #chord-charts svg rect, html.parchment .quiz-question svg rect { fill: var(--p-paper-ink); }
html.parchment #chord-charts svg circle[fill="none"], html.parchment .quiz-question svg circle[fill="none"] { stroke: var(--p-paper-ink); }
html.parchment #chord-charts svg text, html.parchment .quiz-question svg text { fill: var(--p-paper-ink2); font-family: 'IM Fell English', Georgia, serif; }
html.parchment .chord-diagram-name { color: var(--p-paper-ink); font-weight: 700; }

/* small divider under the ribbon of the music sheet */
html.parchment #paper > svg:first-child, html.parchment #paper .abcjs-container { position: relative; z-index: 1; }

/* ---------- DAY */
html.parchment-day body {
    --p-ink: #3b2412; --p-ink2: #6b4a2a; --p-orn: #7a4b22; --p-card: #f3e5c0; --p-paper-ink: #2a170a; --p-paper-ink2: #5a3a1c;
    --card-bg: #f3e5c0; --text-primary: #3b2412; --text-secondary: #6b4a2a; --border-color: #b48a52;
    --secondary-color: #ead6a4; --primary-color: #8a2a1c; --primary-hover: #6b1d12; --accent-color: #3f6b2a;
    --shadow-sm: 0 1px 2px rgba(60,35,10,.2); --shadow-md: 0 3px 8px rgba(60,35,10,.28); --shadow-lg: 0 8px 22px rgba(60,35,10,.35);
    color: #3b2412;
    background: transparent;
}
html.parchment-day { min-height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.28 0 0 0 0 0.1 0 0 0 0.38 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0 0.08 0 0 0 0.22 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 30%, #e8d3a6 0%, #d8bd8a 55%, #b8955f 100%); background-color: #d6bb88; }
html.parchment-day .header,
html.parchment-day .intro-section,
html.parchment-day .controls,
html.parchment-day #paper,
html.parchment-day #chord-paper,
html.parchment-day .et-settings,
html.parchment-day .play-area {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0 0.08 0 0 0 0.22 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 40%, #f8ecce 0%, #f1e1b8 60%, #e3c993 100%);
    border: 1px solid #a57b45; box-shadow: inset 0 0 28px rgba(140,90,30,.32), inset 0 0 3px rgba(110,70,20,.5), 0 4px 12px rgba(60,35,10,.3);
    color: #3b2412;
}
html.parchment-day .header::before,
html.parchment-day .intro-section::before,
html.parchment-day .controls::before,
html.parchment-day #paper::before,
html.parchment-day #chord-paper::before,
html.parchment-day .et-settings::before,
html.parchment-day .play-area::before { border: 1px solid rgba(122,75,34,.45); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg fill='none' stroke='%237a4b22' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg fill='%237a4b22'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") left 0 top 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(64,0) scale(-1,1)' fill='none' stroke='%237a4b22' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(64,0) scale(-1,1)' fill='%237a4b22'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") right 0 top 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(0,64) scale(1,-1)' fill='none' stroke='%237a4b22' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(0,64) scale(1,-1)' fill='%237a4b22'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") left 0 bottom 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(64,64) scale(-1,-1)' fill='none' stroke='%237a4b22' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(64,64) scale(-1,-1)' fill='%237a4b22'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") right 0 bottom 0 / 44px 44px no-repeat; }
html.parchment-day .controls h3 { background: linear-gradient(180deg, #9b3022 0%, #7a2115 60%, #5f170e 100%); color: #fbe9c3; }
html.parchment-day .et-settings h3 { color: #3b2412; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='18' viewBox='0 0 220 18'%3E %3Cg fill='none' stroke='%237a4b22' stroke-linecap='round'%3E%3Cpath d='M4 9 H92' stroke-width='1'/%3E%3Cpath d='M128 9 H216' stroke-width='1'/%3E %3Cpath d='M92 9 c6 -7 12 -7 18 0 c6 7 12 7 18 0' stroke-width='1.3'/%3E%3C/g%3E %3Cg fill='%237a4b22'%3E%3Cpath d='M110 4 l5 5 l-5 5 l-5 -5 z'/%3E%3Ccircle cx='4' cy='9' r='1.6'/%3E%3Ccircle cx='216' cy='9' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center bottom / 200px 16px no-repeat; }
html.parchment-day .header h1 { color: #3a1f0c; text-shadow: 0 1px 0 rgba(255,245,215,.8); }
html.parchment-day .intro-section p { color: #6b4a2a; }
html.parchment-day a, html.parchment-day .intro-section a, html.parchment-day .jump-link { color: #8a2a1c; }
html.parchment-day button, html.parchment-day select, html.parchment-day input[type="number"], html.parchment-day input[type="button"] {
    background: #fbf2d9; color: #3b2412; border: 1px solid #a8804c; }
html.parchment-day button:hover, html.parchment-day select:hover, html.parchment-day input[type="number"]:hover { border-color: #7a2115; box-shadow: 0 0 0 3px rgba(138,42,28,.15); }
html.parchment-day .btn-secondary, html.parchment-day .btn-answer, html.parchment-day .answer-btn, html.parchment-day .btn-reset, html.parchment-day #dark-mode-toggle {
    background: linear-gradient(180deg, #f6e7c2, #e6cf9b); color: #3b2412; border: 1px solid #a07440; box-shadow: inset 0 1px 0 rgba(255,250,230,.7), 0 1px 2px rgba(60,35,10,.25); }
html.parchment-day .btn-secondary:hover, html.parchment-day .btn-answer:hover:not(:disabled) { background: linear-gradient(180deg, #f9edd0, #ead6a8); }
html.parchment-day .btn-answer.correct, html.parchment-day .btn-answer.reveal, html.parchment-day .answer-btn.correct { background: linear-gradient(180deg, #5d8a3f, #3c6526); color: #f6f0d2; border-color: #26431a; }
html.parchment-day .btn-answer.wrong, html.parchment-day .answer-btn.incorrect { background: linear-gradient(180deg, #a63a2a, #7a2115); color: #fbe9c3; border-color: #4a0f08; }
html.parchment-day .action-buttons { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0 0.08 0 0 0 0.22 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #ecd9ad, #dcc08a); border-top: 3px double #7a4b22; box-shadow: 0 -4px 18px rgba(60,35,10,.35); }
html.parchment-day .checkbox-item input[type="checkbox"] { accent-color: #7a2115; }
html.parchment-day .checkbox-item:hover { background-color: rgba(160,116,64,.16); }
html.parchment-day .music-notice { background: rgba(122,75,34,.12); color: #4a2a10; border-left: 3px solid #7a4b22; }
html.parchment-day .music-notice.info { background: rgba(63,107,42,.12); color: #2f4a1f; border-left-color: #3f6b2a; }
html.parchment-day .sc-correct, html.parchment-day .feedback-message.correct { color: #2f5d1c; }
html.parchment-day .sc-wrong, html.parchment-day .feedback-message.wrong { color: #8e1b10; }
html.parchment-day .sc-streak { color: #8a3d0c; } html.parchment-day .sc-best { color: #7a5a10; }
html.parchment-day .challenge-stats, html.parchment-day .playback-challenge, html.parchment-day .challenge-answer { background: rgba(160,116,64,.14); color: #3b2412; }
html.parchment-day #paper, html.parchment-day #chord-paper { color: #2a170a; }

html.parchment-day #countdown-timer { background: linear-gradient(180deg, #4a2c14, #2e1a0b); color: #f6dfa8; border: 1px solid #2a170a; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
html.parchment-day #countdown-timer-chord { color: #3b2412; }

/* ---------- CANDLELIGHT */
html.parchment-night body {
    --p-ink: #f1dcae; --p-ink2: #d2b07a; --p-orn: #c99a4b; --p-card: #2a1b0e; --p-paper-ink: #24130a; --p-paper-ink2: #4f3218;
    --card-bg: #2a1b0e; --text-primary: #f1dcae; --text-secondary: #d2b07a; --border-color: #7c5527;
    --secondary-color: #3a2714; --primary-color: #e8b061; --primary-hover: #f5c77f; --accent-color: #6e9a4a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 4px 10px rgba(0,0,0,.55); --shadow-lg: 0 10px 28px rgba(0,0,0,.65);
    color: #f1dcae;
    background: transparent;
}
html.parchment-night { min-height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='3' seed='11' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.0 0 0 0 0 0.0 0 0 0 0 0.0 0 0 0 0.45 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 0%, #3a230f 0%, #1c1008 900px, #0b0603 1800px); background-color: #0e0804; }
/* the candle: a warm glow that flickers softly, plus dark edges */
html.parchment-night body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background: radial-gradient(circle at 50% 22%, rgba(255,170,70,.30) 0%, rgba(255,140,40,.14) 28%, rgba(255,120,30,0) 60%);
    animation: candle-flicker 5.5s infinite ease-in-out; }
html.parchment-night body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 998;
    background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); }
@keyframes candle-flicker {
    0%, 100% { opacity: 1; transform: scale(1); } 12% { opacity: .9; } 23% { opacity: .97; transform: scale(1.01); }
    37% { opacity: .86; } 48% { opacity: 1; transform: scale(.995); } 61% { opacity: .92; } 74% { opacity: .98; transform: scale(1.012); } 86% { opacity: .89; } }
@media (prefers-reduced-motion: reduce) { html.parchment-night body::before { animation: none; } }
html.parchment-night .header,
html.parchment-night .intro-section,
html.parchment-night .controls,
html.parchment-night #paper,
html.parchment-night #chord-paper,
html.parchment-night .et-settings,
html.parchment-night .play-area {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.7 0 0 0 0 0.4 0 0 0 0.07 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 0%, rgba(255,175,80,.16) 0%, rgba(255,175,80,0) 70%), linear-gradient(180deg, #33210f, #24170b);
    border: 1px solid #6e4a22; box-shadow: inset 0 0 30px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.6); color: #f1dcae;
}
html.parchment-night .header::before,
html.parchment-night .intro-section::before,
html.parchment-night .controls::before,
html.parchment-night #paper::before,
html.parchment-night #chord-paper::before,
html.parchment-night .et-settings::before,
html.parchment-night .play-area::before { border: 1px solid rgba(201,154,75,.38); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg fill='none' stroke='%23c99a4b' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg fill='%23c99a4b'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") left 0 top 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(64,0) scale(-1,1)' fill='none' stroke='%23c99a4b' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(64,0) scale(-1,1)' fill='%23c99a4b'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") right 0 top 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(0,64) scale(1,-1)' fill='none' stroke='%23c99a4b' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(0,64) scale(1,-1)' fill='%23c99a4b'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") left 0 bottom 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(64,64) scale(-1,-1)' fill='none' stroke='%23c99a4b' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(64,64) scale(-1,-1)' fill='%23c99a4b'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") right 0 bottom 0 / 44px 44px no-repeat; }
/* the music sheet catches the candlelight: lit parchment with dark ink */
html.parchment-night #paper, html.parchment-night #chord-paper {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='5' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0.06 0 0 0 0.16 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 0%, #f4dcaa 0%, #e2c186 55%, #c9a065 100%);
    border: 1px solid #8a5e2c; box-shadow: inset 0 0 36px rgba(90,50,10,.5), 0 0 40px rgba(255,160,60,.18), 0 8px 24px rgba(0,0,0,.6); color: #24130a; }
html.parchment-night #paper::before, html.parchment-night #chord-paper::before { border-color: rgba(90,55,20,.45); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg fill='none' stroke='%236b4320' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg fill='%236b4320'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") left 0 top 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(64,0) scale(-1,1)' fill='none' stroke='%236b4320' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(64,0) scale(-1,1)' fill='%236b4320'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") right 0 top 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(0,64) scale(1,-1)' fill='none' stroke='%236b4320' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(0,64) scale(1,-1)' fill='%236b4320'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") left 0 bottom 0 / 44px 44px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E %3Cg transform='translate(64,64) scale(-1,-1)' fill='none' stroke='%236b4320' stroke-linecap='round'%3E %3Cpath d='M3 62 V14 Q3 3 14 3 H62' stroke-width='1.6'/%3E %3Cpath d='M8 58 V18 Q8 8 18 8 H58' stroke-width='0.8'/%3E %3Cpath d='M14 40 C14 22 22 14 40 14' stroke-width='1.1'/%3E %3Cpath d='M14 40 c0 6 -7 7 -7 1 c0 -3 3 -4 5 -2' stroke-width='1.1'/%3E %3Cpath d='M40 14 c6 0 7 -7 1 -7 c-3 0 -4 3 -2 5' stroke-width='1.1'/%3E %3Cpath d='M20 20 c4 -2 9 -1 9 4 c0 4 -6 5 -7 1 c-1 -3 3 -4 4 -2' stroke-width='1'/%3E %3C/g%3E %3Cg transform='translate(64,64) scale(-1,-1)' fill='%236b4320'%3E%3Cpath d='M18 18 l3 -3 l3 3 l-3 3 z'/%3E%3Ccircle cx='50' cy='14' r='1.4'/%3E%3Ccircle cx='14' cy='50' r='1.4'/%3E%3C/g%3E %3C/svg%3E") right 0 bottom 0 / 44px 44px no-repeat; }
html.parchment-night .chord-diagram-name { color: #24130a; }
html.parchment-night .quiz-question .chord-diagram svg { background: radial-gradient(ellipse at 50% 20%, #f2d9a5, #d9b77a); border-radius: 4px; box-shadow: 0 0 18px rgba(255,160,60,.25); }
html.parchment-night .controls h3 { background: linear-gradient(180deg, #7c2418 0%, #5a170e 60%, #420f09 100%); color: #f3cf86; text-shadow: 0 0 8px rgba(255,180,80,.35), 0 1px 0 #000; }
html.parchment-night .et-settings h3 { color: #f1dcae; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='18' viewBox='0 0 220 18'%3E %3Cg fill='none' stroke='%23c99a4b' stroke-linecap='round'%3E%3Cpath d='M4 9 H92' stroke-width='1'/%3E%3Cpath d='M128 9 H216' stroke-width='1'/%3E %3Cpath d='M92 9 c6 -7 12 -7 18 0 c6 7 12 7 18 0' stroke-width='1.3'/%3E%3C/g%3E %3Cg fill='%23c99a4b'%3E%3Cpath d='M110 4 l5 5 l-5 5 l-5 -5 z'/%3E%3Ccircle cx='4' cy='9' r='1.6'/%3E%3Ccircle cx='216' cy='9' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center bottom / 200px 16px no-repeat; }
html.parchment-night .header h1 { color: #f0c46c; text-shadow: 0 0 14px rgba(255,170,60,.45), 0 2px 0 #000; }
html.parchment-night .intro-section p { color: #d2b07a; }
html.parchment-night a, html.parchment-night .intro-section a, html.parchment-night .jump-link { color: #f0b860; }
html.parchment-night button, html.parchment-night select, html.parchment-night input[type="number"], html.parchment-night input[type="button"] {
    background: #1d1209; color: #f1dcae; border: 1px solid #7c5527; }
html.parchment-night button:hover, html.parchment-night select:hover, html.parchment-night input[type="number"]:hover { border-color: #e8b061; box-shadow: 0 0 0 3px rgba(232,176,97,.18); }
html.parchment-night .btn-secondary, html.parchment-night .btn-answer, html.parchment-night .answer-btn, html.parchment-night .btn-reset, html.parchment-night #dark-mode-toggle {
    background: linear-gradient(180deg, #4a3119, #33210f); color: #f3dcae; border: 1px solid #8a5e2c; box-shadow: inset 0 1px 0 rgba(255,200,120,.18), 0 2px 4px rgba(0,0,0,.5); }
html.parchment-night .btn-secondary:hover, html.parchment-night .btn-answer:hover:not(:disabled) { background: linear-gradient(180deg, #5a3b1e, #3d2812); }
html.parchment-night .btn-answer.correct, html.parchment-night .btn-answer.reveal, html.parchment-night .answer-btn.correct { background: linear-gradient(180deg, #4f7a35, #355a22); color: #f3ecc8; border-color: #1c3310; }
html.parchment-night .btn-answer.wrong, html.parchment-night .answer-btn.incorrect { background: linear-gradient(180deg, #9a3324, #6a1a12); color: #fbe9c3; border-color: #3f0d07; }
html.parchment-night .action-buttons { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.7 0 0 0 0 0.4 0 0 0 0.07 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c1c0d, #1a1007); border-top: 3px double #a87a3a; box-shadow: 0 -6px 22px rgba(0,0,0,.7); }
html.parchment-night .instrument-selector { color: #d2b07a; }
html.parchment-night .checkbox-item input[type="checkbox"] { accent-color: #d99a3e; }
html.parchment-night .checkbox-item:hover { background-color: rgba(232,176,97,.1); }
html.parchment-night .music-notice { background: rgba(232,176,97,.12); color: #f3dcae; border-left: 3px solid #c99a4b; }
html.parchment-night .music-notice.info { background: rgba(110,154,74,.16); color: #e3efc9; border-left-color: #8fbf63; }
html.parchment-night .sc-correct, html.parchment-night .feedback-message.correct { color: #a8d68a; }
html.parchment-night .sc-wrong, html.parchment-night .feedback-message.wrong { color: #ff9f86; }
html.parchment-night .sc-streak { color: #ffb46b; } html.parchment-night .sc-best { color: #f0cf75; }
html.parchment-night .challenge-stats, html.parchment-night .playback-challenge, html.parchment-night .challenge-answer { background: rgba(232,176,97,.08); color: #f1dcae; }
html.parchment-night .keys-hint, html.parchment-night .hint, html.parchment-night .level-info { color: #d2b07a; }
html.parchment-night #logo { box-shadow: 0 0 0 2px #c99a4b, 0 0 0 5px #2a1b0e, 0 0 0 6px #c99a4b, 0 0 22px rgba(255,170,60,.35); }
html.parchment-night #countdown-timer { background: linear-gradient(180deg, #120b05, #1f140a); color: #f3c46b; border: 1px solid #7c5527; text-shadow: 0 0 10px rgba(255,170,60,.5); box-shadow: inset 0 2px 8px rgba(0,0,0,.7); }
html.parchment-night .error { background: rgba(160,40,25,.25); color: #ffb3a1; border-color: #7a2115; }

/* phones */
@media (max-width: 768px) {
    html.parchment .header h1 { font-size: 1.35rem; }
    html.parchment .controls h3 { padding: 0.5rem 1.6rem; }
    html.parchment .header::before,
html.parchment .intro-section::before,
html.parchment .controls::before,
html.parchment #paper::before,
html.parchment #chord-paper::before,
html.parchment .et-settings::before,
html.parchment .play-area::before { inset: 4px; background-size: 30px 30px; }
    html.parchment .header::after { width: 64px; height: 51px; bottom: -36px; }
}

/* ================= theme control (one control replaces the old Dark Mode button) ================= */
#dark-mode-toggle { display: none !important; }
.header { position: relative; }
.header > [data-theme-control] { position: absolute !important; z-index: 6 !important; }
.theme-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.theme-swatch { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }
.sw-light { background: linear-gradient(135deg, #ffffff 0 50%, #dbe3ee 50%); }
.sw-dark { background: linear-gradient(135deg, #3b4b63 0 50%, #0f172a 50%); }
.sw-parchment-day { background: radial-gradient(circle at 35% 30%, #fbf0d4, #dcc28f 65%, #a57b45); }
.sw-parchment-night { background: radial-gradient(circle at 50% 42%, #ffe08a 0 14%, #e08a2a 26%, #4a2c12 52%, #120a05); }
[data-theme-control] button { font-family: inherit; line-height: 1.2; margin: 0; }
[data-theme-control] button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
html.parchment [data-theme-control] { font-family: 'Cinzel', Georgia, serif; letter-spacing: .02em; }
/* list used by options B and C */
[data-theme-control] .theme-list { position: absolute; right: 0; top: calc(100% + 6px); width: max-content; min-width: 100%; margin: 0; padding: 6px; list-style: none;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 1001; text-align: left; }
[data-theme-control] .theme-list[hidden] { display: none; }
[data-theme-control] .theme-list:focus { outline: none; }
[data-theme-control] .tl-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary);
    font-size: .9rem; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: none; text-align: left; }
[data-theme-control] .tl-item:hover, [data-theme-control] .tl-item.is-active { background: rgba(127,127,127,.15); border: 0; box-shadow: none; }
[data-theme-control] .tl-item:focus-visible, [data-theme-control] .theme-list:focus .tl-item.is-active { outline: none; box-shadow: inset 0 0 0 2px var(--primary-color); }
[data-theme-control] .tl-name { flex: 1; }
[data-theme-control] .tl-check { width: 6px; height: 11px; margin: 0 2px 3px 14px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); visibility: hidden; }
[data-theme-control] [aria-checked="true"] .tl-check, [data-theme-control] [aria-selected="true"] .tl-check { visibility: visible; }
[data-theme-control] .tm-caret { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .75; transition: transform .15s; }
[data-theme-control].is-open .tm-caret { transform: rotate(180deg); }
html.parchment-day [data-theme-control] .theme-list { background: radial-gradient(ellipse at 50% 0%, #fbf1d6, #ecd8a8); border: 1px solid #a57b45;
    box-shadow: inset 0 0 0 3px #f6e9c8, inset 0 0 0 4px rgba(122,75,34,.45), 0 8px 20px rgba(60,35,10,.35); }
html.parchment-night [data-theme-control] .theme-list { background: linear-gradient(180deg, #33210f, #22160a); border: 1px solid #8a5e2c;
    box-shadow: inset 0 0 0 3px #2a1b0e, inset 0 0 0 4px rgba(201,154,75,.4), 0 10px 26px rgba(0,0,0,.7); }
html.parchment-day [data-theme-control] .tl-item:hover, html.parchment-day [data-theme-control] .tl-item.is-active { background: rgba(160,116,64,.2); }
html.parchment-night [data-theme-control] .tl-item:hover, html.parchment-night [data-theme-control] .tl-item.is-active { background: rgba(232,176,97,.14); }
html.parchment [data-theme-control] .tl-item { font-family: 'IM Fell English', Georgia, serif; font-size: 1rem; }
/* OPTION C: one button that cycles through the themes, plus a small arrow for the list */
.header > .theme-cycle { top: 12px; right: 14px; display: flex; align-items: stretch; border-radius: 999px; border: 1px solid var(--border-color); background: var(--card-bg); box-shadow: var(--shadow-sm); }
[data-theme-control] .tc-main { display: flex; align-items: center; gap: 7px; min-width: 9.2em; padding: 6px 10px 6px 12px; border: 0; border-radius: 999px 0 0 999px;
    background: transparent; color: var(--text-primary); font-size: .82rem; font-weight: 600; box-shadow: none; cursor: pointer; }
[data-theme-control] .tc-caret { display: flex; align-items: center; padding: 0 11px; border: 0; border-left: 1px solid var(--border-color); border-radius: 0 999px 999px 0;
    background: transparent; color: var(--text-primary); box-shadow: none; cursor: pointer; }
[data-theme-control] .tc-main:hover, [data-theme-control] .tc-caret:hover { background: rgba(127,127,127,.13); border-color: var(--border-color); box-shadow: none; }
html.parchment-day .header > .theme-cycle { background: linear-gradient(180deg, #f6e7c2, #e6cf9b); border-color: #a07440; }
html.parchment-night .header > .theme-cycle { background: linear-gradient(180deg, #4a3119, #33210f); border-color: #8a5e2c; }
html.parchment-day [data-theme-control] .tc-main, html.parchment-day [data-theme-control] .tc-caret { color: #3b2412; border-color: #a07440; }
html.parchment-night [data-theme-control] .tc-main, html.parchment-night [data-theme-control] .tc-caret { color: #f3dcae; border-color: #8a5e2c; }
html.parchment [data-theme-control] .tc-main { min-width: 10.4em; }
@media (max-width: 768px) {
    .header > .theme-cycle { top: 10px; right: 10px; }
    [data-theme-control] .tc-main { font-size: .76rem; padding: 6px 8px 6px 10px; gap: 6px; min-width: 0; }
    html.parchment [data-theme-control] .tc-main { min-width: 0; letter-spacing: 0; font-size: .72rem; padding: 6px 5px 6px 8px; gap: 5px; }
    html.parchment [data-theme-control] .tc-caret { padding: 0 8px; }
    html.parchment .header > .theme-cycle { right: 8px; }
}

/* SEO 2026-10-30: H1 subtitle and the home-page About section in the parchment skins */
html.parchment .header h1 .h1-tagline { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-weight: 400; font-size: max(0.58em, 0.95rem); letter-spacing: 0.01em; text-transform: none; }
html.parchment .seo-about h2 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 1.1rem; }
html.parchment .seo-about h3 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: 0.06em; font-size: 0.95rem; }
html.parchment .seo-about p, html.parchment .seo-about li { font-size: 1.05rem; }
html.parchment-day .header h1 .h1-tagline, html.parchment-day .seo-about li { color: #6b4a2a; text-shadow: none; }
html.parchment-day .seo-about h2, html.parchment-day .seo-about h3 { color: #3a1f0c; }
html.parchment-night .header h1 .h1-tagline, html.parchment-night .seo-about li { color: #d2b07a; text-shadow: none; }
html.parchment-night .seo-about h2, html.parchment-night .seo-about h3 { color: #f3cf86; }