/* Small game-screen details: use the selected palette, leave reading surfaces quiet. */
@media screen {
html[data-theme] body [data-field-note] { background-size: 28px 28px,28px 28px,auto; }
html[data-theme] body [data-field-note] h1 { text-shadow: 2px 3px 0 color-mix(in srgb,var(--text-accent) 14%,transparent); text-wrap: balance; }
html[data-theme] body .fieldNoteBar { background: linear-gradient(90deg,var(--note-bar),color-mix(in srgb,var(--text-accent) 7%,var(--note-paper))); }
html[data-theme] body .fieldNoteBar span:last-child::before { content: '▪ ▪ ▪'; margin-right: 14px; color: var(--text-accent); letter-spacing: 3px; }
html[data-theme] body :is(.dashboardCard,.statisticsCard,.profileSettingCard,.theoryCatalog,.priceCard,.trainingCatalogue) { border-top-width: 2px; }
html[data-theme] body :is(.cardLabel,.tasksEyebrow,.profileEyebrow,.pricingEyebrow) { display: inline-flex; align-items: center; gap: 9px; }
html[data-theme] body :is(.cardLabel,.tasksEyebrow,.profileEyebrow,.pricingEyebrow)::before { content: ''; flex: 0 0 5px; width: 5px; height: 5px; background: var(--text-accent); box-shadow: 3px -3px 0 color-mix(in srgb,var(--text-accent) 30%,transparent); }
.studyNavigation { align-items: start; justify-content: space-between; }
.studyRhythm { position: relative; z-index: 15; color: var(--text-main); }
.studyRhythm>summary { display: flex; align-items: center; gap: 10px; min-height: 42px; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--note-ink); border-radius: 9px; background: var(--note-paper); cursor: pointer; list-style: none; font-size: 12px; box-shadow: 2px 3px 0 var(--note-shadow); }
.studyRhythm>summary::-webkit-details-marker { display: none; }
.studyRhythm[open]>summary { background: var(--note-rose); }
.rhythmLights { display: flex; gap: 3px; }
.rhythmLights i { width: 6px; height: 6px; background: var(--note-line); }
.rhythmLights i.is-lit { background: var(--text-accent); box-shadow: 0 0 7px color-mix(in srgb,var(--text-accent) 35%,transparent); }
.rhythmPanel { position: absolute; inset: calc(100% + 12px) 0 auto auto; width: min(340px,calc(100vw - 36px)); box-sizing: border-box; padding: 22px; border: 1px solid var(--note-ink); border-radius: 12px; box-shadow: 4px 5px 0 var(--note-shadow); background: var(--note-paper); }
.rhythmHeading { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.rhythmHeading h2 { font-size: 17px; line-height: 1.5; margin: 8px 0; }
.rhythmHeading img { image-rendering: pixelated; flex-shrink: 0; }
.rhythmPanel small { font-size: 10px; line-height: 1.7; color: var(--journal-muted); }
.rhythmPanel p { font-size: 12px; line-height: 1.8; }
.rhythmPanel label { display: flex; align-items: center; gap: 9px; padding-block: 13px; border-bottom: 1px dashed var(--note-line); font-size: 12px; line-height: 1.6; }
.rhythmPanel input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--text-accent); flex-shrink: 0; }
.rhythmPanel a { margin-left: auto; min-width: 32px; min-height: 32px; display: grid; place-items: center; color: var(--text-accent); background: var(--note-bar); border-radius: 6px; text-decoration: none; }
.rhythmStatus { color: var(--text-accent); }
.studyRhythm summary:focus-visible,.rhythmPanel :is(a,input):focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
html[data-theme] body :is(.taskLinks>a,.variantCardLink,.pricingBenefitGrid>article) { transition: transform .16s ease,box-shadow .16s ease; }
html[data-theme] body :is(.taskLinks>a,.variantCardLink,.pricingBenefitGrid>article):hover { transform: translateY(-3px); box-shadow: 4px 6px 0 var(--note-shadow); }
}
@media(max-width:600px) { html[data-theme] body .fieldNoteBar span:last-child::before { content: none; } .studyRhythm>summary { padding-inline: 10px; font-size: 11px; } }
}