/* A small 16-bit study console. Texture belongs to the frame, never to the text. */
@media screen {
html[data-theme][data-interface-font] {
    --arcade-radius: 3px;
    --retro-edge: var(--note-ink);
    --retro-highlight: color-mix(in srgb,var(--text-accent) 15%,var(--note-paper));
    --retro-inset: color-mix(in srgb,var(--text-accent) 8%,var(--note-bar));
    --retro-rim: color-mix(in srgb,var(--text-accent) 34%,var(--note-line));
}
html[data-theme] body:not(.taskPreviewPage) {
    background-image: radial-gradient(var(--note-line) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--note-line) 10%,transparent) 1px,transparent 1px);
    background-size: 24px 24px,96px 96px;
    background-color: var(--note-page);
}
/* Window chrome and the inset monitor surface. */
html[data-theme] body [data-field-note] {
    border-width: 2px;
    border-radius: 3px !important;
    box-shadow: inset 0 0 0 4px var(--note-bar),5px 6px 0 var(--note-shadow);
    background-image: linear-gradient(transparent 50%,color-mix(in srgb,var(--note-shadow) 4%,transparent) 50%),linear-gradient(to right,var(--note-line) 1px,transparent 1px),linear-gradient(to bottom,var(--note-line) 1px,transparent 1px);
    background-size: 100% 4px,28px 28px,28px 28px;
    background-color: var(--note-grid);
}
html[data-theme] body .fieldNoteBar {
    min-height: 44px;
    border-bottom: 2px solid var(--retro-edge);
    border-radius: 1px 1px 0 0;
    box-shadow: inset 0 2px 0 var(--retro-highlight),inset 0 -2px 0 var(--note-shadow);
    background: var(--note-bar);
    font-size: 11px;
    letter-spacing: .08em;
}
html[data-theme] body .fieldNoteBar span:last-child::before {
    display: inline-block;
    content: ''; width: 7px; height: 7px; margin-right: 22px;
    background: var(--text-accent);
    box-shadow: 10px 0 0 var(--note-line),20px 0 0 var(--note-line);
}
html[data-theme] body [data-field-note] h1 { text-shadow: 3px 3px 0 color-mix(in srgb,var(--text-accent) 22%,var(--note-grid)); }
html[data-theme] body :is(.aboutNoteBar,.authorNoteBar,#taskPreview>header,.studyDialogHeader) {
    background: var(--note-bar); border-bottom: 2px solid var(--retro-edge);
    box-shadow: inset 0 2px 0 var(--retro-highlight);
}
/* Rigid cartridges and quiet reading panels. */
html[data-theme] body :is(.dashboardCard,.tasksFilters,.taskCard,.theoryCatalog,.theoryNumberGroup,
    .trainingCatalogue,.trainingStart,.learningPanel,.statisticsCard,.statisticCard,.calendarSection,
    .profileCard,.profileSettingCard,.profilePersonalPanel,.priceCard,.checkoutOrder,.paymentCard,
    .aboutNote,.authorCard,.authorNote,.publicLab,.faqItem,.legalBox,.studyCalendar,.studyAnalysis) {
    border: 2px solid var(--retro-edge);
    border-radius: 3px !important;
    box-shadow: inset 2px 2px 0 var(--retro-highlight),inset -2px -2px 0 var(--note-bar),4px 5px 0 var(--note-shadow);
}
html[data-theme] body .taskCard.completedCard { border-color: var(--button-color); }
html[data-theme] body :is(.cardHeading,.theoryCatalogHeader,.paymentCardHeading) {
    border-bottom: 2px solid var(--note-line);
    padding-bottom: 14px;
}
html[data-theme] body :is(.taskTag,.taskId,.difficultyTag,.priceBadge,.checkoutBadge,.paymentStatus,
    .studyStrategyTags span,.studyAnalysisRole,.proBenefits>li,.refundEstimate) {
    border-radius: 2px !important;
    box-shadow: inset 1px 1px 0 var(--retro-highlight),2px 2px 0 var(--note-shadow);
}
/* Mechanical keys: the press is visible without changing the control's meaning. */
html[data-theme] body :is(.taskButton,.taskPrimaryButton,.secondaryButton,.pricingButton,.checkoutPay,
    .journalButton,.profileSmallButton,.studyButton,.authorButton,.homeEncouragement button,
    .publicLabTabs button,.pricingCompareSwitch button,.studyNavigation>button,.studyRhythm>summary) {
    border: 2px solid var(--retro-edge);
    border-radius: 3px !important;
    box-shadow: inset 2px 2px 0 #ffffff28,inset -2px -2px 0 #00000026,3px 4px 0 var(--note-shadow);
    text-decoration: none;
}
html[data-theme] body :is(.taskButton,.taskPrimaryButton,.secondaryButton,.pricingButton,.checkoutPay,
    .journalButton,.profileSmallButton,.studyButton,.authorButton,.publicLabTabs button,
    .pricingCompareSwitch button,.studyNavigation>button):active:not(:disabled) {
    transform: translate(2px,2px);
    box-shadow: inset 2px 2px 0 #00000024,1px 2px 0 var(--note-shadow);
}
html[data-theme] body :is(button,a,summary):focus-visible { outline-offset: 4px; }
html[data-theme] body :is(input.taskInput,textarea.paymentField,.taskSelect):not(:focus) {
    box-shadow: inset 2px 2px 0 var(--note-shadow);
    border-width: 2px;
}
/* Navigation is the console's control panel. */
html[data-theme] body .workspaceSidebar {
    border: 2px solid var(--retro-edge); border-radius: 3px !important;
    box-shadow: inset 3px 3px 0 var(--retro-highlight),inset -3px -3px 0 var(--retro-inset),5px 5px 0 var(--note-shadow);
}
html[data-theme] body .workspaceMark {
    background: var(--note-paper); border: 2px solid var(--retro-edge); border-radius: 2px;
    box-shadow: 2px 3px 0 var(--note-shadow); display: grid; place-items: center;
}
.workspaceMark img { image-rendering: pixelated; display: block; object-fit: contain; }
html[data-theme] body .workspaceNavLabel { border-bottom: 1px dashed var(--retro-rim); padding-bottom: 9px; }
html[data-theme] body .workspaceSidebar .listThings a { border-radius: 2px !important; }
html[data-theme] body .workspaceSidebar .listThings a.active {
    border: 1px solid var(--retro-edge);
    box-shadow: inset 3px 0 0 var(--text-accent),inset 0 -2px 0 var(--retro-rim),2px 2px 0 var(--note-shadow);
}
/* Segmented gauges retain the actual progress values. */
html[data-theme] body progress { border: 2px solid var(--retro-edge); border-radius: 0; background: var(--note-bar); padding: 2px; }
html[data-theme] body progress::-webkit-progress-bar { background: var(--note-bar); border-radius: 0; }
html[data-theme] body progress::-webkit-progress-value { background: repeating-linear-gradient(90deg,var(--text-accent) 0 8px,var(--note-bar) 8px 11px); border-radius: 0; }
html[data-theme] body progress::-moz-progress-bar { background: repeating-linear-gradient(90deg,var(--text-accent) 0 8px,var(--note-bar) 8px 11px); border-radius: 0; }
html[data-theme] body :is(.studyCalendarGrid,.studyMonthGrid,.studyGrid,.calendarGrid) { border: 2px solid var(--retro-edge); background: var(--retro-inset); }
html[data-theme] body :is(.calendarCell,.studyDay,.studyEvent) { border-radius: 2px !important; }
html[data-theme] body :is(#taskPreview,#feedbackDialog,#inboxDialog,#proGate,.sinusModal__card,.taskModalBox,.rhythmPanel) {
    border: 2px solid var(--retro-edge); border-radius: 3px !important;
    box-shadow: inset 2px 2px 0 var(--retro-highlight),5px 6px 0 var(--note-shadow);
}
html[data-theme] body .homeFooter { border-top: 3px double var(--retro-edge); }
html[data-theme] body .feedbackMascot img { filter: drop-shadow(3px 4px 0 var(--note-shadow)); }
html[data-theme] body .feedbackMascot>span { border: 2px solid var(--retro-edge); border-radius: 3px; box-shadow: 3px 3px 0 var(--note-shadow); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
html[data-theme] body :is(.pricingButton,.journalButton,.taskButton,.checkoutPay,.profileSmallButton) { transition: transform 90ms steps(2,end),box-shadow 90ms steps(2,end); }
html[data-theme] body :is(.pricingButton,.journalButton,.taskButton,.checkoutPay,.profileSmallButton):hover:not(:disabled) { transform: translateY(-2px); }
html[data-theme] body :is(.pricingButton,.journalButton,.taskButton,.checkoutPay,.profileSmallButton):active:not(:disabled) { transform: translate(2px,2px); }
}
@media(max-width:600px) {
    html[data-theme] body .fieldNoteBar { font-size: 10px; letter-spacing: .02em; }
    html[data-theme] body .fieldNoteBar span:last-child::before { width: 5px; height: 5px; margin-right: 16px; box-shadow: 7px 0 0 var(--note-line),14px 0 0 var(--note-line); }
    html[data-theme] body :is(.taskCard,.priceCard,.checkoutOrder,.statisticsCard,.publicLab) { box-shadow: inset 1px 1px 0 var(--retro-highlight),3px 4px 0 var(--note-shadow); }
}
}