.sinusNotice {
    position: fixed; inset: 0; margin: auto; box-sizing: border-box;
    width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 48px);
    overflow-y: auto; padding: 32px; border: 1px solid var(--card-border);
    border-radius: 24px; background: var(--bg-solid, #0f1117);
    color: var(--text-main, #fff); box-shadow: 0 24px 80px var(--card-shadow);
    font-family: inherit;
}
.sinusNotice::backdrop { background: rgba(10, 5, 14, .64); backdrop-filter: blur(5px); }
.sinusNoticeBadge { display: block; margin-bottom: 16px; color: var(--text-accent); font-size: 14px; letter-spacing: .16em; font-weight: 700; }
.sinusNotice h2 { margin: 0 28px 18px 0; font-size: 24px; line-height: 1.3; color: inherit; }
.sinusNotice p { margin: 0 0 28px; font-size: 18px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.sinusNoticeClose { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font: 28px/1 sans-serif; }
.sinusNoticeConfirm { display: block; width: 100%; min-height: 46px; padding: 12px 20px; border: 0; border-radius: 12px; background: #bd145c; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.sinusNoticeConfirm:hover { background: #9d104c; }
.sinusNoticeClose:hover { background: var(--btn-bg); }
.sinusNotice button:focus-visible { outline: 3px solid var(--text-accent); outline-offset: 3px; }
@media (max-width: 480px) { .sinusNotice { padding: 28px 22px; } }
.sinusHelp a { color: var(--text-accent, #e00560); overflow-wrap: anywhere; }
.sinusHelp p { margin-bottom: 18px; }
.sinusHelp textarea { display: block; box-sizing: border-box; width: 100%; margin: 12px 0; padding: 12px; resize: vertical; min-height: 120px; border: 1px solid #8886; border-radius: 12px; background: transparent; color: inherit; font: inherit; }
.sinusHelp [role=status]:empty { display: none; }

.supportHoney{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.theoryMove{display:inline-flex;gap:8px;flex-wrap:wrap}
.registerPage .authWrapper{max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 24px}.registerWelcome{position:relative;padding:28px;line-height:1.7}.registerWelcome h1{font-size:clamp(24px,3vw,40px);line-height:1.5}.registerWelcome img{width:min(100%,340px);height:auto;object-fit:contain;animation:registerFloat 5s ease-in-out infinite}.registerWelcome ul{padding-left:20px}.registerWelcome>span{color:var(--accent,#e90075);font-size:12px}.registerPage .login{width:100%;min-width:0}@keyframes registerFloat{50%{transform:translateY(-10px) rotate(-2deg)}}@media(max-width:800px){.registerPage .authWrapper{display:block;padding:20px 16px}.registerWelcome{padding:8px 16px}.registerWelcome img,.registerWelcome ul{display:none}.registerWelcome h1{font-size:22px}.registerWelcome p{font-size:14px}}@media(prefers-reduced-motion:reduce){.registerWelcome img{animation:none}}

.registerWelcome{color:var(--text-main);box-sizing:border-box}.registerWelcome p,.registerWelcome li{font-family:inherit}.theoryMove .secondaryButton{min-height:40px}.registerPage .authWrapper{box-sizing:border-box}.registerWelcome img{aspect-ratio:1.2;object-fit:contain}

.registerPage .loginMascot{display:none}.registerPage .login{height:auto;min-height:0}.registerPage .loginForm{gap:16px}



/* Loaded after page-specific styles, including inline styles. */
.mobileBar { display: none; }
.mobileMenu:not([open]) { display: none; }
.mobileMenu { color: var(--text-main); background: var(--bg-solid); border: 1px solid var(--card-border); }
.mobileMenu::backdrop { background: rgb(0 0 0 / 65%); backdrop-filter: blur(3px); }
.mobileMenuOpen { overflow: hidden; }
@media (max-width: 900px) {
    html { scroll-padding-top: 80px; }
    body { min-width: 0; }
    .mobileBar { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--bg-solid); border-bottom: 1px solid var(--card-border); }
    .mobileBrand { font-size: 24px; font-weight: 800; }
    .mobileBrand span { color: var(--text-accent); }
    .mobileBar button, .mobileMenuClose { min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--btn-bg); color: var(--text-main); font: inherit; }
    .mobileMenu { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(340px, calc(100vw - 32px)); max-width: none; height: 100dvh; max-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 0 20px 20px 0; }
    .mobileMenuClose { display: block; margin-left: auto; margin-bottom: 16px; }
    .mobileMenu .tasksSidebar { position: static !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; overflow: visible !important; border: 0 !important; background: transparent !important; }
    .mobileMenu .tasksSidebar nav.listThings { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 100% !important; margin: 12px 0 !important; overflow: visible !important; }
    .mobileMenu .tasksSidebar nav.listThings a, .mobileMenu .logoutLink { display: flex !important; align-items: center; gap: 12px; min-height: 48px; padding: 12px !important; font-size: 18px !important; white-space: normal !important; opacity: 1 !important; }
    .mobileMenu .tasksSidebar nav.listThings a span { display: inline-block !important; }
    .mobileMenu .sidebarBottom { margin: 16px 0 0 !important; width: 100%; }
    .tasksMain, .profileMain, .statisticsMain, .variantsMain { margin-left: 0 !important; width: 100% !important; max-width: 100%; padding: 24px 16px 40px !important; }
    .homeHeader { flex-wrap: wrap; }
    input:not([type=checkbox]):not([type=radio]), textarea, select { font-size: 18px !important; max-width: 100%; }
    button, input[type=submit], a.taskButton, a.profileSmallButton { min-height: 44px; touch-action: manipulation; }
    img, video { max-width: 100%; }
    .taskText, .taskContent, .ql-editor { overflow-wrap: anywhere; }
    .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
    .adminTable { display: block; max-width: 100%; overflow-x: auto; }
    .modalContent, .modal-content, .profileModalCard, .sinusModal__card, .variantResultModal, .contactsModal { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 32px) !important; overflow-y: auto; overscroll-behavior: contain; }
    .filtersGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .filterSubmitBlock .taskButton { width: 100% !important; }
    .authWrapper { padding: 28px 16px 36px; }
    .authPage .login { padding: 28px 22px; }
}
@media (max-width: 540px) {
    h1 { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.2 !important; overflow-wrap: anywhere; }
    h2 { font-size: clamp(21px, 5.8vw, 28px); line-height: 1.3; }
    .homeMain, .faqMain, .legalPage, .paymentMain { width: 100%; max-width: 100%; padding-left: 16px !important; padding-right: 16px !important; }
    .filtersGrid, .statisticsOverview, .statisticsGrid, .statsGrid, .modalGrid, .variantModalGrid, .variantResultsGrid { grid-template-columns: minmax(0, 1fr) !important; }
    .tasksHeader, .profileHeader, .variantAdminActions, .adminTaskActions, .sinusModal__actions { flex-wrap: wrap; gap: 12px; }
    .taskCard, .statisticsCard, .paymentCard { padding: 18px 14px !important; min-width: 0; }
    .taskButton, .profileSmallButton, .authButton { font-size: 17px !important; white-space: normal; }
    .footerContainer { width: calc(100% - 32px); gap: 24px; }
    .footerNavGrid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .footerColumn a, .footerLinkBtn { min-height: 44px; display: flex; align-items: center; font-size: 16px; overflow-wrap: anywhere; }
    .richToolbar button { min-width: 40px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 900px) {
    .legalPage, .legalWrap, .legalContent, .legalCard { overflow-wrap: anywhere; }
    .aboutMePage .heroMain, .aboutMePage .heroVisual, .aboutMePage .imageFrame,
    .aboutProjectPage .heroMain, .aboutProjectPage .heroVisual { min-width: 0; width: 100%; max-width: 100%; }
    .aboutMePage .heroVisual { padding: 0; }
    .aboutMePage .heroMascotGlow { width: min(280px, 80vw); height: min(280px, 80vw); }
}
@media (max-width: 900px) {
    body { font-family: 'Pixy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 18px; line-height: 1.5; }
    button, input, select, textarea { font-family: inherit !important; }
    .mobileBrand, .footerLogo { font-family: 'Pixy', sans-serif; }
    .authPage .login button[type=submit] { width: 100%; padding: 12px 16px; font-size: 18px; line-height: 1.4; white-space: normal; }
    .checkboxLabel { align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; }
    .checkboxInput { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
    .registerHint { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 900px) {
    body:has(> .paymentPage) { display: block; padding: 0; }
    .paymentPage { width: calc(100% - 32px); margin: 24px auto; }
}
@media (max-width: 900px) {
    .mobileMenu .sidebarBottom { display: flex !important; flex-direction: column; }
    .aboutMePage .heroMain { grid-template-columns: minmax(0, 1fr); }
    .aboutMePage .heroCopy { min-width: 0; }
    .aboutMePage .heroActions { flex-wrap: wrap; }
    .aboutMePage .heroActions a { white-space: normal; }
    :focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
}

/* Keep native buttons and links identical, including Safari text autosizing. */
@media (max-width: 900px) {
    .homeFooter {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    .homeFooter .footerColumn a,
    .homeFooter .footerColumn .footerLinkBtn {
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: normal;
        min-height: 44px;
    }
    .homeFooter .footerColumnTitle { font-size: 14px; line-height: 1.5; }
    .homeFooter .footerColumn:last-child { grid-column: 1 / -1; }
}

/* Compact, centered content images on every screen size. */
.taskImage,
.taskText img,
.solutionText img,
.richEditable img.editorImage {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 260px !important;
    object-fit: contain;
    margin: 16px auto !important;
    border-radius: 8px;
}

.sharedVariantLookup{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.sharedVariantLookup label{flex-basis:100%}.sharedVariantLookup input{flex:1;min-width:180px}.variantShare input{width:100%;max-width:460px;font-family:monospace;box-sizing:border-box}.variantShare p{line-height:1.6}

@media(max-width:600px){.taskImage,.taskText img,.solutionText img,.richEditable img.editorImage{max-height:200px!important}}



/* One palette shared with task cards, on all screen sizes. */
:root { --task-panel-bg: #d699b930; --task-panel-border: rgba(136,13,77,.12); }
html[data-theme="dark"] { --task-panel-bg: #880d4d30; --task-panel-border: rgba(255,255,255,.07); }
html body.tasksPage :is(.taskCard, .tasksFilters, .statisticCard, .statisticsCard, .variantsSection, .calendarSection, .supportTicketCard) {
    background: var(--task-panel-bg);
    border-color: var(--task-panel-border);
    backdrop-filter: none;
}
html body.statisticsPage .calendarSection::before,
html body.statisticsPage .calendarSection::after { display: none; }

/* Completion is a deliberate exception to the shared neutral palette. */
html body.tasksPage .taskCard.completedCard {
    background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(16,185,129,.09));
    border-color: rgba(34,197,94,.5);
    box-shadow: inset 3px 0 0 rgba(34,197,94,.75), 0 4px 20px rgba(16,185,129,.06);
}
html body.tasksPage .taskCard.completedCard .taskId {
    background: rgba(34,197,94,.18);
    color: #15803d;
}
html[data-theme="dark"] body.tasksPage .taskCard.completedCard .taskId,
html[data-theme="dark"] body.tasksPage .taskCard.completedCard .taskResult.correct {
    color: #86efac;
}
html body.tasksPage .completeToggle input[type="checkbox"] { accent-color: #22c55e; }



/* Shared visual language for the catalog, checkout and Pro dialogs. */
.proOrbit{position:relative;width:112px;height:100px;margin:0 auto 24px;display:grid;place-items:center;color:var(--text-accent,#e00560);isolation:isolate;pointer-events:none}
.proOrbit:before{content:"";position:absolute;inset:12px;border:1px solid #ec45825c;border-radius:50%;transform:rotate(-25deg) scaleX(1.35);background:radial-gradient(circle,#e0056024,transparent 70%)}
.proOrbit span{font-size:66px;filter:drop-shadow(0 0 18px #ed43885c);animation:proFloat 5s ease-in-out infinite}.proOrbit i,.proOrbit b{position:absolute;font-style:normal;font-size:22px;animation:proFloat 5s ease-in-out infinite reverse}.proOrbit i{top:4px;right:4px}.proOrbit b{bottom:3px;left:0}
.pricingHero{position:relative}.pricingHero h1{letter-spacing:-.025em}.pricingHero,.checkoutIntro{animation:proEnter .65s ease both}
.priceCard{box-shadow:0 20px 60px #00000012;transition:transform .25s,box-shadow .25s;animation:proEnter .7s ease both}.priceCardPro{animation-delay:.1s;background:radial-gradient(ellipse at top right,#ec45821c,transparent 65%),var(--lightBox);box-shadow:0 18px 70px #cb14551c}
.priceCardPro:after{content:"✦";position:absolute;right:28px;top:65px;font-size:46px;color:var(--text-accent);opacity:.4;pointer-events:none}
.priceCard ul{list-style:none;padding:0}.priceCard li{position:relative;padding-left:28px}.priceCard li:before{content:"✓";position:absolute;left:0;color:var(--text-accent)}
.pricingButton,.checkoutPay,#proModal .sinusProPay,.proAccessCard .proAccessBuy{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 20px;box-sizing:border-box;border:1px solid #ed52866b;border-radius:15px;background:linear-gradient(120deg,#bb1756,#db326a);color:#fff;text-align:center;text-decoration:none;font:inherit;cursor:pointer;box-shadow:0 8px 24px #bd145c25;transition:transform .2s,box-shadow .2s,filter .2s}
.pricingButton.pricingSecondary{background:transparent;color:var(--text-main);box-shadow:none}
.pricingButton:focus-visible,.checkoutPay:focus-visible,#proModal a:focus-visible,.proAccessCard a:focus-visible{outline:3px solid var(--text-accent);outline-offset:5px}
.pricingSteps article{background:var(--lightBox);transition:transform .25s}.pricingSteps article>span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#da296b18}.pricingTableWrap thead{background:#cf226818}.pricingTableWrap td:last-child{background:#cf226809}.pricingQuestions details{border:1px solid #bc59742b;border-radius:16px;padding:20px 24px;margin:12px 0;background:var(--lightBox)}.pricingQuestions details[open]{border-color:#d9367360}.pricingQuestions details[open] p{animation:proEnter .25s ease}.pricingSeller{padding:28px;border:1px solid #bc59742b;border-radius:22px;background:var(--lightBox)}
.checkoutPage{color:var(--text-main)}.checkoutMain{max-width:1100px;margin:0 auto;padding:40px 24px 64px;box-sizing:border-box}.checkoutBack{display:inline-block;margin-bottom:36px;color:var(--text-main);text-decoration:none;opacity:.75}.checkoutLayout{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}.checkoutIntro .proOrbit{margin:28px 0}.checkoutIntro h1{font-size:clamp(30px,4vw,46px);line-height:1.2;margin:20px 0}.checkoutIntro h1 em{font-style:normal;color:var(--text-accent)}.checkoutIntro>p{line-height:1.7}.checkoutFeatures{list-style:none;padding:0;margin:28px 0}.checkoutFeatures li{margin:18px 0;line-height:1.5;padding-left:28px;position:relative}.checkoutFeatures li:before{content:"✓";position:absolute;left:0;color:var(--text-accent)}
.checkoutOrder{min-width:0;padding:36px;border:1px solid #d3337066;border-radius:28px;background:radial-gradient(ellipse at top right,#df307822,transparent 65%),var(--lightBox);box-shadow:0 24px 80px #00000018;animation:proEnter .7s .1s ease both}.checkoutBadge{display:inline-block;padding:8px 12px;border-radius:20px;background:#da296b20;color:var(--text-accent);font-size:14px;letter-spacing:.08em}.checkoutOrder h2{font-size:28px;line-height:1.3;margin:24px 0 14px}.checkoutOrder>p{line-height:1.6}.checkoutTotal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #bc597435;padding-top:26px;margin-top:28px}.checkoutTotal strong{font-size:46px}.checkoutHint{font-size:14px;opacity:.75;margin:10px 0 26px}.checkoutPay{width:100%}.checkoutFine{font-size:14px;line-height:1.6;opacity:.8;overflow-wrap:anywhere}.checkoutFine a{color:var(--text-accent);text-underline-offset:3px}.checkoutActivation{display:flex;gap:16px;align-items:center;border-top:1px solid #bc597435;margin-top:26px;padding-top:16px}.checkoutActivation>span{font-size:32px;color:var(--text-accent)}.checkoutActivation p{font-size:15px;line-height:1.6}.checkoutSupport{display:block;background:none;border:0;color:var(--text-main);font:inherit;font-size:14px;padding:16px 0 0;text-align:left;cursor:pointer}.checkoutNotice{padding:16px;border-radius:12px;background:#d3337012;line-height:1.6;margin:20px 0}
#proModal .sinusModal__card,.proAccessCard{border:1px solid #d3337066;border-radius:26px;box-shadow:0 24px 80px #0003;background:var(--lightBox);padding:clamp(24px,5vw,40px)}
#proModal .sinusModal__card{background:var(--bg-main,#250e1c);max-height:calc(100dvh - 40px);overflow-y:auto;animation:proEnter .3s ease}
#proModal .sinusProBadge{color:var(--text-accent)}#proModal .sinusProFeature{padding:10px 0;line-height:1.5}#proModal .sinusProDescription,#proModal .sinusProNote{line-height:1.65}#proModal .sinusProPrice{margin:24px 0}#proModal .sinusProPrice strong{color:var(--text-accent)}
.paymentMain{max-width:560px;padding:64px 20px;margin:auto}.paymentResult{padding:36px;border:1px solid #d3337066;border-radius:26px;background:var(--lightBox);color:var(--text-main)}.paymentResultIcon{font-size:48px;color:var(--text-accent)}.paymentResult p{line-height:1.7}.paymentResult .paymentButton{display:block;color:var(--text-accent);margin-top:24px}
@media(hover:hover){.priceCard:hover{transform:translateY(-5px);box-shadow:0 24px 70px #cb145528}.pricingSteps article:hover{transform:translateY(-3px)}.pricingButton:hover,.checkoutPay:hover,#proModal .sinusProPay:hover,.proAccessCard .proAccessBuy:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 30px #bd145c35}}
@keyframes proFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(5deg)}}
@keyframes proEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.checkoutLayout{grid-template-columns:1fr;gap:28px}.checkoutMain{padding:24px 16px 40px}.checkoutOrder{padding:24px 20px}.checkoutBack{margin-bottom:24px}.checkoutIntro .proOrbit{float:right;margin:0;width:88px}.checkoutIntro .homeLogo{display:block}.checkoutIntro .pricingEyebrow{clear:both;padding-top:20px}.checkoutTotal strong{font-size:38px}.pricingSeller{padding:22px}.proOrbit{width:88px;height:80px}.proOrbit span{font-size:52px}}
@media(prefers-reduced-motion:reduce){.proOrbit *,.pricingHero,.checkoutIntro,.priceCard,.checkoutOrder,#proModal .sinusModal__card,.pricingQuestions details[open] p{animation:none!important}.priceCard,.pricingButton,.checkoutPay,.pricingSteps article,#proModal .sinusProPay{transition:none!important;transform:none!important}}
[data-theme="light"] #proModal .sinusModal__card{background:#fff1f7}
.checkoutOrder .checkoutFine{margin-top:16px;margin-bottom:16px}



/* Equal controls and aligned labels in the task-bank filter. */
.filtersGrid .filterBlock{min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.filtersGrid .filterRow{width:100%}
.filtersGrid .taskInput{box-sizing:border-box;width:100%;height:48px;min-height:48px;padding:10px 14px;border-radius:12px;font-size:16px;line-height:1.4}
.filtersGrid .filterHint{font-size:13px;line-height:1.4;margin:6px 0}
.filtersGrid .filterSubmitBlock .taskButton{width:min(100%,360px);min-height:48px;margin:0}
#inboxBell{position:fixed;right:22px;bottom:24px;z-index:10000;width:52px;height:52px;display:grid;place-items:center;border:1px solid #ee4d8b80;border-radius:18px;background:var(--bg-solid,#25101f);color:var(--text-accent,#dd286d);box-shadow:0 6px 25px #0003;cursor:pointer}
#inboxCount{position:absolute;top:-7px;right:-5px;min-width:22px;padding:3px 5px;background:#c41859;color:white;border-radius:20px;font:14px/1.2 sans-serif}
#inboxCount[hidden],#inboxToast[hidden]{display:none}
#inboxDialog{box-sizing:border-box;width:min(560px,calc(100vw - 28px));max-height:80dvh;padding:26px;border:1px solid #d83c7270;border-radius:24px;background:var(--bg-solid,#25101f);color:var(--text-main);box-shadow:0 22px 90px #0005;overflow:auto}
#inboxDialog::backdrop{background:#09051099;backdrop-filter:blur(5px)}
#inboxDialog header{display:flex;align-items:center;justify-content:space-between;gap:16px}#inboxDialog h2{margin:0;font-size:24px}#inboxClose,#inboxToastClose{background:none;border:0;color:inherit;font:28px sans-serif;min-width:44px;min-height:44px;cursor:pointer}
#inboxStatus{font-size:14px;line-height:1.5;opacity:.75}#inboxItems article{padding:18px;margin:12px 0;border:1px solid #ab637a40;border-radius:16px}#inboxItems .inboxUnread{border-color:#d3337070;background:#d3337010}#inboxItems h3{margin:0 0 8px;font-size:18px;overflow-wrap:anywhere}#inboxItems time{font-size:12px;opacity:.7}#inboxItems p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;margin-bottom:0}
#inboxRead{border:1px solid #d3337070;border-radius:12px;padding:12px;background:#d3337018;color:inherit;font:inherit;cursor:pointer;width:100%}
#inboxToast{position:fixed;z-index:10020;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));display:flex;align-items:center;padding:12px 14px;border:1px solid #ed468575;border-radius:18px;background:var(--bg-solid,#25101f);color:var(--text-main);box-shadow:0 15px 50px #0004;animation:inboxArrival .35s ease-out}
#inboxToastOpen{border:0;background:none;color:inherit;font:inherit;text-align:left;line-height:1.5;flex:1;min-width:0;overflow-wrap:anywhere;cursor:pointer}
.inboxAdmin{margin:24px 0}.inboxAdmin label{display:block;margin:14px 0}.inboxAdmin .taskInput{display:block;width:100%;box-sizing:border-box;margin-top:8px}.inboxAdmin textarea{height:auto;min-height:100px;resize:vertical}
@keyframes inboxArrival{from{opacity:0;translate:0 -20px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#inboxToast{animation:none}}
@media(max-width:600px){#inboxBell{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}#inboxDialog{padding:20px}.filtersGrid{grid-template-columns:1fr!important}}
#inboxDialog{position:fixed;inset:0;margin:auto}
/* Use the ID field's shape and typography for all four filters. */
.filtersGrid .filterRow .taskInput {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--card-border, #ce8fad);
    border-radius: 12px;
    background-color: transparent;
    color: var(--text-main);
    font-family: 'Pixy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-align-last: center;
    padding: 10px 32px;
}
.filtersGrid .filterRow select.taskInput {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b6881' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.filtersGrid .filterRow .taskInput::placeholder { font-size: inherit; }
.filtersGrid .filterRow select.taskInput option { background: var(--bg-solid); color: var(--text-main); }
.filtersGrid .filterBlock.filterSubmitBlock{grid-column:1 / -1;align-items:center;justify-content:center}



/* Shared mathematical keyboard, styled like the platform controls. */
.mathKeys{flex-basis:100%;width:100%;box-sizing:border-box;margin:12px 0 14px;padding:14px;border:1px solid #c7336b40;border-radius:18px;background:var(--btn-bg);color:var(--text-main);text-align:left}
.mathKeys[hidden]{display:none}.mathKeysRow{display:flex;flex-wrap:wrap;gap:8px}
.mathKeys .mathKeysRow button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;min-height:44px;margin:0;padding:10px 12px;border:1px solid #c7336b55;border-radius:10px;background:transparent;color:var(--text-main);font:18px/1.2 'Pixy',sans-serif!important;box-shadow:none;cursor:pointer;transition:background .15s,color .15s}
.mathKeys .mathKeysRow button:hover,.mathKeys .mathKeysRow button:focus-visible{background:var(--btn-change-bg);color:var(--text-main);outline:2px solid var(--text-accent);outline-offset:2px}
.mathKeys small{display:block;margin-top:12px;font:14px/1.7 'Pixy',sans-serif;color:var(--text-main);opacity:.7}
.answerRow{flex-wrap:wrap}.answerRow>.mathKeys{order:3}
@media(max-width:600px){.mathKeys{padding:12px}.mathKeysRow{gap:7px}.mathKeys .mathKeysRow button{padding:9px;min-width:42px;min-height:44px}.mathKeys small{font-size:13px}}

.mathInputHostRow{flex-wrap:wrap!important;min-width:0}.mathInputHostRow>.mathKeys{flex:0 0 100%;min-width:0;max-width:100%;order:99}.mathInputHostGrid>.mathKeys{grid-column:1/-1;min-width:0}.variantAnswerRow{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;min-width:0}.variantAnswerRow>.answerInput{width:min(100%,360px);box-sizing:border-box}.variantAnswerRow>.mathKeys{width:100%;max-width:640px;min-width:0;flex:none}.variantShareRow{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.variantShareRow #variantShareCode{flex:1 1 260px;min-width:0}.variantShareRow #copyVariantCode{min-height:44px;margin:0;padding:12px 16px;flex:0 0 auto;font-size:14px}#variantCopyStatus{display:block;margin-top:8px;font-size:13px;color:var(--text-accent)}@media(max-width:600px){.variantShareRow #variantShareCode{flex-basis:100%;max-width:100%}.variantShareRow #copyVariantCode{width:100%}}



html[data-interface-font=pixy]{--interface-family:'Pixy',sans-serif}
html[data-interface-font=task]{--interface-family:'Task',Arial,sans-serif}
html[data-interface-font=arial]{--interface-family:Arial,sans-serif}
html[data-interface-font=georgia]{--interface-family:Georgia,serif}
html[data-interface-font=verdana]{--interface-family:Verdana,sans-serif}
html:not([data-interface-font=default]) body,
html:not([data-interface-font=default]) body :where(h1,h2,h3,h4,p,a,span,div,label,button,input,select,textarea,li,summary,small,strong,blockquote,td,th,legend):not(:where(.katex,.katex *,.MathJax,.MathJax *,.boardCanvasWrap,.boardCanvasWrap *,.fontPicker,.fontPicker *,.fontPanel,.fontPanel *,.richEditable,.richEditable *,svg,svg *)){
font-family:var(--interface-family)!important}
.typographyForm{display:flex;flex-wrap:wrap;gap:12px;align-items:end;min-width:0}
.typographyForm label{display:grid;gap:8px;font-size:14px}
.typographyForm select{max-width:240px;width:100%;min-height:44px;padding:10px;border:1px solid #c7336b66;border-radius:12px;color:var(--text-main);background:var(--btn-bg);font:inherit}
.typographyForm button{min-height:44px}
@media(max-width:700px){.typographyForm{width:100%}.typographyForm label{flex:1 1 160px}.typographyForm select{max-width:100%}}



@font-face{font-family:Hollowetica;src:url("/static/fonts/Hollowetica.ttf")}@font-face{font-family:serio-v2;src:url("/static/fonts/serio-v2.ttf")}
.fontPicker{position:relative;min-width:160px;max-width:100%;font-family:Arial,sans-serif}.fontNative{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}.fontTrigger{width:100%;min-height:44px;padding:10px 14px!important;border:1px solid var(--card-border,#c7336b66)!important;border-radius:14px!important;background:var(--btn-bg,#321225)!important;color:var(--text-main,#fff)!important;text-align:left;font-size:14px!important}.fontPanel{position:fixed;z-index:2147483000;top:0;left:0;width:300px;max-width:calc(100vw - 40px);padding:12px;background:var(--bg-main-2,#24101c);color:var(--text-main,#fff);border:1px solid var(--card-border,#c7336b66);border-radius:20px;box-shadow:0 15px 40px #0005}.fontPanel[hidden]{display:none}.fontPanel input{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid #c7336b66;background:var(--btn-bg,#321225);color:inherit;font:16px Arial!important}.fontList{max-height:320px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#e53780 transparent}.fontList strong{display:block;margin:18px 8px 6px;color:var(--text-accent,#e53780);font:12px Arial!important;letter-spacing:1px;text-transform:uppercase}.fontList button{display:block;width:100%;padding:12px!important;border:0!important;border-radius:12px!important;background:transparent!important;color:inherit!important;text-align:left;font-size:14px!important;min-height:42px}.fontList button:hover,.fontList button:focus-visible,.fontList button[aria-selected=true]{background:#e5378020!important;color:var(--text-accent,#e53780)!important}.boardTextTools{overflow:visible!important}.boardTextTools .fontPicker{min-width:155px}.boardInlineText{box-shadow:none!important;outline:none}

.fontPanel{box-sizing:border-box;isolation:isolate;line-height:1.4}.fontPanel .fontList button{margin:0!important;position:static!important;transform:none!important;font-size:14px!important;font-weight:400;line-height:1.4;white-space:normal;overflow-wrap:anywhere}.fontPanel .fontList strong{font-size:11px!important}.fontPanel .sinusSearch{font-size:14px!important;min-height:42px!important;text-align:left!important}.sinusSearch{box-sizing:border-box;border:1px solid var(--card-border,#c7336b66)!important;border-radius:14px!important;padding:12px 16px!important;background:var(--btn-bg,#321225)!important;color:var(--text-main,#fff)!important;outline:none;transition:border-color .15s,box-shadow .15s}.sinusSearch:focus{border-color:#e53780!important;box-shadow:0 0 0 3px #e5378018!important}.sinusSearch::placeholder{color:var(--text-muted,#a88799);opacity:1}.filterPicker{width:100%;min-width:0}.filterPicker .fontTrigger{min-height:48px;width:100%;font:inherit;font-size:14px!important;text-align:center}.filtersGrid .filterPicker .fontTrigger{height:48px}.filterPicker .fontTrigger:focus-visible{outline:2px solid #e53780;outline-offset:2px}

.sinusSearch{font-size:16px!important;min-height:48px}.fontPanel input.sinusSearch{font-size:14px!important;min-height:42px}

.richToolbar .fontPicker{min-width:75px;max-width:140px}.richToolbar .fontTrigger{min-height:34px;padding:6px 8px!important;font-size:12px!important}

.boardAppearance .fontPicker{min-width:0;width:105px}.boardAppearance .fontTrigger{padding:7px!important;min-height:34px;font-size:12px!important}.boardTextTools .filterPicker{min-width:70px;width:auto}.typographyForm .filterPicker{min-width:110px;width:auto}

/* Avoid Safari zooming the page when the search keyboard opens. */
@media(pointer:coarse){.fontPanel input.sinusSearch{font-size:16px!important}}



.accentForm{display:flex;flex-wrap:wrap;gap:16px;align-items:center;max-width:100%}.accentChoices{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}.accentLegend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.accentChoice{position:relative;display:grid;justify-items:center;gap:7px;font-size:12px;cursor:pointer}.accentChoice input{position:absolute;opacity:0;width:1px;height:1px}.accentDot{display:block;width:32px;height:32px;box-sizing:border-box;border-radius:50%;border:3px solid var(--bg-solid);box-shadow:0 0 0 1px var(--card-border)}.accentDot[data-color=pink]{background:#d70668}.accentDot[data-color=gray]{background:#838892}.accentDot[data-color=blue]{background:#397eea}.accentDot[data-color=green]{background:#21a866}.accentDot[data-color=purple]{background:#9959de}.accentDot[data-color=orange]{background:#e7892c}.accentChoice input:checked+.accentDot{outline:2px solid var(--text-main);outline-offset:3px}.accentChoice input:focus-visible+.accentDot{outline:3px solid var(--text-main);outline-offset:4px}@media(max-width:700px){.accentForm{width:100%;justify-content:flex-start}.accentChoices{gap:14px}}

html[data-interface-accent=gray]{--text-accent:#abb0bc;--text-secondary:#a6a1a6;--text-hover:#d7d7dc}html[data-interface-accent=gray][data-theme=light]{--text-accent:#555b65;--text-hover:#333842;--links-color:#555b65}

.accentCustomDot{display:grid;place-items:center;color:#fff;font:22px Arial}.accentCustomPicker{display:flex;align-items:center;gap:8px;font-size:12px}.accentCustomPicker input{width:48px;height:40px;padding:3px;border:1px solid var(--card-border);border-radius:10px;background:var(--bg-solid)}



.feedbackMascot{position:fixed;right:14px;bottom:90px;z-index:9999;display:flex;flex-direction:column;align-items:center;gap:2px;width:90px;padding:4px;border:0;background:transparent;color:var(--text-main);font:inherit;cursor:pointer;touch-action:manipulation}.feedbackMascot img{display:block;width:66px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 8px #0003);transition:transform .18s}.feedbackMascot span{padding:5px 8px;border:1px solid var(--card-border);border-radius:12px;background:var(--bg-solid);font-size:11px;white-space:nowrap}.feedbackMascot:hover img{transform:translateY(-4px) rotate(-4deg)}.feedbackMascot:focus-visible{outline:2px solid var(--text-accent);outline-offset:3px;border-radius:16px}
#feedbackDialog{box-sizing:border-box;position:fixed;inset:auto 20px 24px auto;margin:0;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:26px;border:1px solid var(--card-border);border-radius:26px;background:var(--bg-solid);color:var(--text-main);box-shadow:0 18px 70px #0004;font:inherit}#feedbackDialog::backdrop{background:#0005}#feedbackClose{position:absolute;right:12px;top:10px;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:inherit;font:28px/1 sans-serif;cursor:pointer}.feedbackIntro{display:flex;align-items:center;gap:15px;padding-right:20px}.feedbackIntro img{object-fit:contain;flex-shrink:0}.feedbackIntro small{color:var(--text-accent);font-size:10px}.feedbackIntro h2{margin:9px 0 0;font-size:21px;line-height:1.35}#feedbackDialog p{font-size:14px;line-height:1.6}#feedbackForm label{display:block;margin:18px 0 8px;font-size:14px}#feedbackMessage{box-sizing:border-box;display:block;width:100%;min-height:130px;max-height:35dvh;resize:vertical;padding:14px;border:1px solid var(--card-border);border-radius:15px;background:var(--card-bg,var(--bg-solid));color:inherit;font:inherit;font-size:16px;line-height:1.5;text-align:left}#feedbackMessage:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px}#feedbackDialog .feedbackHint{opacity:.75;font-size:12px}#feedbackDialog a{color:var(--text-accent)}#feedbackSend{width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:15px;background:var(--accent-solid,var(--text-accent));color:var(--button-text,#fff);font:inherit;font-size:15px;cursor:pointer}#feedbackSend:disabled{opacity:.6;cursor:wait}#feedbackStatus:empty{display:none}
@media(max-width:600px){.feedbackMascot{right:10px;bottom:calc(80px + env(safe-area-inset-bottom));width:70px}.feedbackMascot img{width:51px;height:61px}.feedbackMascot span{font-size:10px}#feedbackDialog{right:16px;bottom:max(16px,env(safe-area-inset-bottom));padding:22px}.feedbackIntro img{width:60px;height:70px}.feedbackIntro h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.feedbackMascot img{transition:none}.feedbackMascot:hover img{transform:none}}



.taskReportButton{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 11px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1.4;cursor:pointer;text-decoration:none;opacity:.8;white-space:normal}.taskReportButton:hover{opacity:1;border-color:var(--accent,#e00560);color:var(--accent,#e00560)}.taskReportButton:focus-visible{outline:3px solid var(--accent,#e00560);outline-offset:3px}#sinusSupportContext{padding:12px;border-radius:12px;background:rgba(224,5,96,.08);font-size:13px;overflow-wrap:anywhere}.boardTaskCard .taskReportButton{align-self:flex-start;pointer-events:auto}.taskTags{flex-wrap:wrap}.learningMain .taskButton{display:inline-block;text-decoration:none}



.siteSparkles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:strict}.siteSparkles span{position:absolute;left:var(--spark-x);top:var(--spark-y);font:22px/1 Arial,sans-serif;color:var(--text-accent,#d12c70);opacity:.16;animation:siteSparkleDrift var(--spark-duration) ease-in-out var(--spark-delay) infinite alternate}.siteSparkles span:nth-child(3n){font-size:12px;opacity:.22}.siteSparkles span:nth-child(5n){filter:drop-shadow(0 0 6px currentColor)}@keyframes siteSparkleDrift{from{transform:translate3d(-7px,12px,0) rotate(-12deg) scale(.8)}to{transform:translate3d(10px,-18px,0) rotate(24deg) scale(1.15)}}.sparklesPaused span{animation-play-state:paused}.sparklePreference{display:flex;gap:10px;align-items:center;font-size:12px;line-height:1.7}.sparklePreference input{width:20px;height:20px;accent-color:var(--text-accent,#d12c70)}@media(max-width:650px){.siteSparkles span:nth-child(n+13){display:none}}@media(prefers-reduced-motion:reduce){.siteSparkles span{animation:none}}@media print{.siteSparkles{display:none!important}}

html[data-interface-sparkles="off"] .homeEncouragementStar{display:none}



/* Shared rhythm and restrained motion; keep existing fonts and accent preferences. */
html body.tasksPage .tasksSubtitle {opacity:1;color:var(--text-secondary);line-height:1.75;max-width:60ch}
html body.tasksPage .tasksHeader {gap:24px}
html body.tasksPage :is(.taskInput,button,a,summary):focus-visible {outline:2px solid var(--text-accent);outline-offset:4px}
html body.tasksPage :is(.taskButton,.taskPrimaryButton,.secondaryButton) {transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
html body.tasksPage :is(.taskButton,.taskPrimaryButton,.secondaryButton):active {transform:translateY(1px)}
/* Decorations sit behind content, never over exercise text. */
.siteSparkles {z-index:0}
.siteSparkles span {opacity:.1}
html body.tasksPage .tasksMain {position:relative;z-index:1}
html body.variantsPage .variantsIntro {position:relative;align-items:center;margin-bottom:24px;padding:0;border:0;background:none;box-shadow:none}
.variantsIntro h1 {margin:8px 0 12px}
.variantsIntro .variantHeroBadges {margin:16px 0 0;gap:8px}
.variantsIntro .variantHeroBadges span {border:0;padding:5px 10px;background:var(--task-panel-bg);color:var(--text-main);font-size:11px}
.variantIntroStar {font:72px/1 Arial,sans-serif;color:var(--text-accent);opacity:.55;margin-right:16px;animation:sinusStarTurn 9s ease-in-out infinite}
html body.variantsPage .variantGenerator {padding:24px;margin-bottom:16px;border-radius:18px;display:grid;grid-template-columns:minmax(180px,1fr) minmax(320px,1.3fr);gap:20px 28px;align-items:center}
.variantGeneratorHeading h2 {margin:0 0 8px;font-size:19px;line-height:1.5}
.variantGeneratorHeading p {margin:0;color:var(--text-secondary);font-size:12px;line-height:1.8}
.variantQuickForm {display:flex;align-items:flex-end;gap:12px;min-width:0}
.variantDifficultyField {flex:1;min-width:0}
.variantDifficultyField label {display:block;margin-bottom:8px;font-size:12px}
.variantQuickForm .taskInput {width:100%;min-height:48px;box-sizing:border-box;margin:0}
.variantQuickForm .taskPrimaryButton {min-height:48px;width:auto;margin:0;white-space:normal;padding:12px 18px;font-size:12px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:12px}
.variantAdminRow {grid-column:1/-1;border-top:1px solid var(--task-panel-border);padding-top:14px}
.variantAdminRow .taskButton {width:auto;padding:8px 12px;min-height:36px;font-size:11px;margin:0;background:transparent;color:var(--text-accent)}
html body.variantsPage .variantLookupCard {padding:18px 24px;margin-bottom:32px;border-radius:16px}
.variantIdDetails summary {cursor:pointer;font-size:13px;line-height:1.6}
.variantYearSection {margin-bottom:32px}
.variantsGrid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.variantsGrid>div {min-width:0}
html body.variantsPage .variantCardLink {display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;padding:22px;border-radius:18px;min-height:150px;box-sizing:border-box}
html body.variantsPage .variantLibraryTitle {color:var(--text-main);margin:14px 0 0;font-size:16px;line-height:1.65;overflow-wrap:anywhere}
.variantLibraryArrow {display:flex;justify-content:flex-end;margin-top:20px;color:var(--text-accent);font-size:22px;transition:transform .2s}
.variantCardLink:hover .variantLibraryArrow {transform:translateX(4px)}
@keyframes sinusStarTurn {0%,100%{transform:rotate(-8deg) scale(.95)}50%{transform:rotate(12deg) scale(1.05)}}
@keyframes sinusPanelEnter {from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){body.tasksPage .tasksHeader,body.tasksPage .tasksFilters,body.tasksPage .variantGenerator {animation:sinusPanelEnter .4s ease both}html body.tasksPage :is(.taskButton,.taskPrimaryButton):hover {transform:translateY(-2px)}}
@media(max-width:900px){html body.variantsPage .variantGenerator {grid-template-columns:1fr}.variantQuickForm {width:100%}}
@media(max-width:560px){.variantIntroStar{font-size:44px;margin:0}.variantQuickForm{flex-direction:column;align-items:stretch}.variantQuickForm .taskPrimaryButton{width:100%}html body.variantsPage .variantGenerator{padding:18px}html body.variantsPage .variantLookupCard{padding:16px 18px}.variantsIntro .variantHeroBadges{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.variantIntroStar{animation:none}html body.tasksPage :is(.taskButton,.taskPrimaryButton,.secondaryButton,.variantLibraryArrow,.variantLibraryCard){transition:none;transform:none}}
html[data-interface-sparkles="off"] .variantIntroStar{display:none}
@media print{.variantIntroStar{display:none}}
html body.variantsPage .variantsIntro {display:block;min-height:0}
.variantsIntro>div:first-child {padding-right:72px}
.variantIntroStar {position:absolute;right:0;top:24px}
@media(max-width:560px){.variantsIntro>div:first-child{padding-right:0}.variantIntroStar{right:8px;top:0;font-size:30px}.variantsIntro .tasksSubtitle{padding-right:12px}}
/* Keep drifting stars in the outer margins, away from reading columns. */
.siteSparkles span:nth-child(n+7){display:none}
.siteSparkles span:nth-child(odd){left:2%}
.siteSparkles span:nth-child(even){left:97%}

/* Personal practice: a compact optional shortlist, never a second task feed. */
html body.tasksPage .recommendedTasks{padding:22px;margin-bottom:22px;border-radius:18px}
.recommendationHeading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.recommendationHeading h2{font-size:18px;line-height:1.5;margin:0}
.recommendationNote,.recommendationHint{font-size:11px;line-height:1.8;color:var(--text-secondary)}
.recommendationGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.recommendationLink{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 30px 16px 16px;border:1px solid var(--task-panel-border);border-radius:14px;text-decoration:none;color:var(--text-main);font-size:11px;line-height:1.7;transition:transform .18s,border-color .18s}
.recommendationNumber{color:var(--text-accent);font-size:12px}.recommendationArrow{position:absolute;right:12px;top:14px;color:var(--text-accent)}
.recommendationLink:hover{transform:translateY(-2px);border-color:var(--text-accent)}
.recommendationHint{margin:14px 0 0;max-width:90ch}
.personalSelectionAbout{max-width:1000px;margin:56px auto;padding:32px;box-sizing:border-box;border:1px solid var(--card-border);border-radius:22px;background:var(--card-bg)}
.personalSelectionAbout h2{font-size:clamp(22px,3vw,32px);line-height:1.5}.personalSelectionAbout p{line-height:1.9;max-width:78ch}.personalSelectionAbout .heroSecondaryButton{margin-top:12px;display:inline-flex}
@media(min-width:1000px){html body :is(.taskButton,.taskPrimaryButton,.secondaryButton,.themeButton,.heroSecondaryButton){width:auto;min-height:40px;padding:10px 16px;font-size:12px;line-height:1.5;border-radius:11px}html body .filterSubmitBlock .taskButton{width:auto;min-width:160px}html body.tasksPage .tasksHeader h1{font-size:clamp(28px,3vw,38px)}html body.tasksPage .tasksHeader{margin-bottom:26px}html body.tasksPage .taskCard{border-radius:18px}html body.tasksPage .tasksFilters{padding:24px}}
@media(max-width:760px){.recommendationGrid{grid-template-columns:1fr}.recommendationHeading{align-items:flex-start;flex-direction:column;gap:6px}.personalSelectionAbout{margin:28px 16px;padding:22px}}
@media(prefers-reduced-motion:reduce){.recommendationLink{transition:none;transform:none}}

/* Consistent page rhythm: clear headings, quiet cards, compact desktop actions. */
html body :is(.profileSettingCard,.profileRecoveryCard,.statisticCard,.statisticsCard,.featureCard,.faqItem,.pricingPlan,.learningCard){border-radius:18px;box-shadow:0 4px 18px rgba(0,0,0,.035)}
html body :is(.tasksSubtitle,.profileSubtitle,.statisticsSubtitle,.aboutSubtitle){line-height:1.8;max-width:65ch}
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){box-sizing:border-box;max-width:100%}
html body :is(.taskButton,.taskPrimaryButton,.secondaryButton,.themeButton,.profileSmallButton,.enterButton,.heroPrimaryButton,.heroSecondaryButton,.pricingButton,.finalCtaButton):focus-visible{outline:2px solid var(--text-accent);outline-offset:4px}
@media(min-width:1000px){
 html body :is(.taskButton,.taskPrimaryButton,.secondaryButton,.themeButton,.profileSmallButton,.enterButton,.heroPrimaryButton,.heroSecondaryButton,.pricingButton,.finalCtaButton){min-height:38px;height:auto;padding:9px 15px;font-size:12px;line-height:1.5;border-radius:11px;box-shadow:none}
 html body :is(.heroPrimaryButton,.heroSecondaryButton,.pricingButton,.finalCtaButton){min-height:42px;width:auto;max-width:100%;padding:11px 20px;font-size:13px}
 html body .enterButton{min-height:42px;width:100%;max-width:360px}
 html body .profileSmallButton{width:auto;min-width:0}
 html body :is(.tasksFilters,.profilePersonalPanel){padding:22px}
 html body .taskCard{padding:22px}
 html body :is(.tasksHeader,.profileHeader){margin-bottom:24px}
 html body :is(.heroMain,.finalCta){gap:28px}
}
@media(max-width:760px){html body :is(.taskButton,.taskPrimaryButton,.secondaryButton,.themeButton,.profileSmallButton,.enterButton,.heroPrimaryButton,.heroSecondaryButton,.pricingButton){min-height:44px}.recommendationLink{min-height:44px}.personalSelectionAbout{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:no-preference){html body :is(.profileSmallButton,.enterButton,.heroPrimaryButton,.heroSecondaryButton,.pricingButton){transition:transform .18s ease,background-color .18s ease}html body :is(.profileSmallButton,.enterButton,.heroPrimaryButton,.heroSecondaryButton,.pricingButton):hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){html body :is(.heroMascot,.mathCard,.heroCircleText,.bgMath,.heroOrb,.heroMascotGlow){animation:none!important;transition:none!important}}



/* Original Sinus constellation accents, shared by every base-layout page. */
:root{--play-surface:rgba(255,255,255,.78);--play-line:rgba(202,75,134,.2);--play-ink:#71304e}
html[data-theme="dark"]{--play-surface:rgba(47,27,46,.88);--play-line:rgba(249,160,206,.24);--play-ink:#ffd2e7}
.dailyMission{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:26px 30px;margin:24px 0;background:var(--play-surface);border:1px solid var(--play-line);border-radius:24px;box-shadow:0 8px 30px #9c38600a;position:relative;overflow:hidden}
.dailyMission>div:first-child{flex:1;min-width:220px}.dailyMission h2{font-size:22px;margin:12px 0;line-height:1.35}.dailyMission p{font-size:14px;line-height:1.7;max-width:480px;margin:0;opacity:.8}.missionBadge{font-size:11px;letter-spacing:1.4px;color:var(--play-ink);background:#ed86b51c;border:1px solid var(--play-line);padding:7px 11px;border-radius:20px}
.missionSteps{display:flex;gap:10px}.missionStep{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;min-height:76px;border:1px solid var(--play-line);border-radius:18px;color:var(--play-ink);text-decoration:none;background:#ec8cbb0c;transition:transform .2s,background .2s}.missionStep span{font-size:34px;line-height:1.2}.missionStep small{font-size:11px}.missionStep:hover,.missionStep:focus-visible{transform:translateY(-5px) rotate(-3deg);background:#ed86b52a}.missionStep.is-done{background:#ed86b52a}.missionProgress{display:grid;gap:8px;min-width:140px}.missionProgress small{font-size:10px;opacity:.65}.missionProgress progress{width:100%;height:7px;accent-color:#e44c97}
.playBurst{position:fixed;pointer-events:none;z-index:100000;font-size:19px;color:#e977af;animation:playBurst .7s ease-out forwards}
@keyframes playBurst{to{transform:translate(var(--dx),var(--dy)) rotate(100deg);opacity:0}}
@media(hover:hover){.dashboardCard,.taskCard,.faqItem,.variantCard{transition:box-shadow .22s,border-color .22s}.dashboardCard:hover,.taskCard:hover,.faqItem:hover,.variantCard:hover{box-shadow:0 10px 30px #ac4a7b16;border-color:var(--play-line)}button:not(:disabled):active,.btn:active{transform:scale(.98)}}
summary{transition:color .2s}summary:hover{color:var(--play-ink)}
@media(max-width:600px){.dailyMission{padding:20px;gap:18px}.dailyMission h2{font-size:19px}.missionProgress{flex:1}.missionStep{min-width:55px}}
@media(prefers-reduced-motion:reduce){.playBurst{display:none}.missionStep,.dashboardCard,.taskCard,.faqItem,.variantCard{transition:none!important;transform:none!important}}
@media print{.dailyMission,.playBurst{display:none!important}}

html body .dashboardCard,html body .taskCard,html body .tasksFilters,html body .welcomeBlock,html body .homeEncouragement{border-width:1px;border-color:var(--play-line)}
html body button,html body .btn,html body input,html body select,html body textarea{border-width:1px}
html body button,html body .btn,html body summary,html body .taskLinks>a{transition:background-color .18s,box-shadow .18s,transform .18s,border-color .18s}
html body button:focus-visible,html body .btn:focus-visible,html body .taskLinks a:focus-visible{outline:2px solid var(--text-accent,#d12c70);outline-offset:4px}
@media(hover:hover){html body button:not(:disabled):hover,html body .btn:hover{transform:translateY(-2px);box-shadow:0 5px 14px #b23c7526}html body .taskLinks>a:hover{background:#ed86b51a;transform:translateY(-4px)}html body .taskLinks>a>i{transition:transform .2s}html body .taskLinks>a:hover>i{transform:translateX(5px)}}
html body button:not(:disabled):active,html body .btn:active,html body .taskLinks>a:active{transform:translateY(1px) scale(.97);box-shadow:none}
@media(prefers-reduced-motion:reduce){html body button,html body .btn,html body summary,html body .taskLinks>a,html body .taskLinks>a>i{transition:none!important;transform:none!important}}



/* Sinus: the daily constellation visual language across the whole application. */
html[data-theme="light"]{--constellation-paper:linear-gradient(115deg,#fff9fc 0%,#fff 72%);--constellation-inset:#fffafd;--constellation-border:#f4cee0;--constellation-muted:#855c73;--card-border:#f4cee0;--card-bg:#fff;--task-panel-bg:#fffafd;--task-panel-border:#f4cee0;--bg-pattern-opacity:.14}
html[data-theme="dark"]{--constellation-paper:linear-gradient(120deg,#352636 0%,#2e2331 52%,#29212d 100%);--constellation-inset:#302330;--constellation-border:#634050;--constellation-muted:#d6b2c7;--card-border:#634050;--card-bg:#302330;--task-panel-bg:#302330;--task-panel-border:#634050;--bg-pattern-opacity:.035}
html body :is(.dashboardCard,.taskCard:not(.completedCard),.tasksFilters,.statisticCard,.statisticsCard,.calendarSection,.variantsSection,.profileCard,.profilePersonalPanel,.profileSettingCard,.profileRecoveryCard,.faqItem,.featureCard,.authorCard,.priceCard,.paymentCard,.rateCard,.supportTicketCard,.learningPanel,.learningHero,.trainingStart,.trainingCatalogue,.theoryCatalogBanner,.theoryNumberGroup,.variantLibraryCard,.variantLookupCard,.proAccessCard,.boardSearchPanel,.boardToolPanel){background:var(--constellation-paper);border:1px solid var(--constellation-border);border-radius:24px;box-shadow:0 5px 20px #9b386608;backdrop-filter:none}
html body :is(.welcomeBlock,.aboutHero,.authorHero,.pricingHero,.variantHero){background:var(--constellation-paper);border:1px solid var(--constellation-border);border-radius:28px;box-shadow:none}
html body :is(.authPage .login,.sinusModal__card,.profileModalCard){background:var(--constellation-paper)!important;border:1px solid var(--constellation-border)!important;border-radius:24px!important;box-shadow:0 18px 55px #35142a1a!important}
html body :is(.taskTag,.taskId,.badge,.priceBadge,.checkoutBadge,.sinusProBadge,.trainingProBadge,.learningPlayBadge,.theoryNumberBadge){border:1px solid var(--constellation-border);border-radius:999px;background:var(--constellation-inset);color:var(--constellation-muted);box-shadow:none}
html body :is(.tasksEyebrow,.profileEyebrow,.statisticsEyebrow,.learningEyebrow,.authEyebrow,.pricingEyebrow,.authorEyebrow,.sectionEyebrow,.heroKicker,.legalEyebrow){display:table;padding:7px 12px;border:1px solid var(--constellation-border);border-radius:999px;background:var(--constellation-inset);color:var(--constellation-muted);font-size:10px;letter-spacing:.12em;line-height:1.6}
html body :is(.taskInput,.profileInput,.loginInput,.fontTrigger,select,textarea){background:var(--constellation-inset);border:1px solid var(--constellation-border);border-radius:14px;box-shadow:none}
html body :is(input,textarea,select):focus{border-color:var(--text-accent,#cd305f);box-shadow:0 0 0 3px #e681b315;outline-offset:3px}
html body :is(.buttons,.changeButtons){border:1px solid var(--constellation-border)!important;box-shadow:none;backdrop-filter:none}
html body :is(.taskLinks>a,.theoryTopicChip,.statItem){border:1px solid transparent;border-radius:16px;background:transparent}
html body .listThings a{border:1px solid transparent}.listThings a.active{border-color:var(--constellation-border);background:var(--constellation-inset)}
html body :is(.solutionDetails,.theoryDetails){border:1px solid var(--constellation-border);border-radius:16px;padding:0 14px;background:var(--constellation-inset)}
html body :is(.solutionDetails,.theoryDetails)[open]{box-shadow:0 5px 18px #ac4a7b09}
html body :is(.taskActions,.profileActions,.heroActions){gap:10px}
html body :is(.tasksMain,.profileMain,.statisticsMain,.theoryMain,.learningMain) h1{letter-spacing:-.025em;line-height:1.4}
html body .siteSparkles span:nth-child(n){display:block;opacity:.14}.siteSparkles span:nth-child(3n){opacity:.2}
@media(hover:hover){html body :is(.taskLinks>a,.theoryTopicChip,.statItem):hover{border-color:var(--constellation-border);background:var(--constellation-inset);box-shadow:0 6px 16px #b23c7510}html body :is(.dashboardCard,.faqItem,.authorCard,.priceCard,.variantLibraryCard):hover{border-color:color-mix(in srgb,var(--constellation-border),var(--text-accent) 24%)}html body :is(button,.btn,.buttons,.changeButtons,.heroPrimaryButton,.heroSecondaryButton):not(:disabled):hover{filter:brightness(1.035);transform:translateY(-2px);box-shadow:0 5px 14px #b23c751c}}
html body :is(button,.btn,.buttons,.changeButtons,.heroPrimaryButton,.heroSecondaryButton):not(:disabled):active{transform:translateY(1px) scale(.97);filter:brightness(.98)}
@media(max-width:650px){html body :is(.dashboardCard,.taskCard,.tasksFilters,.statisticsCard,.profilePersonalPanel,.faqItem,.priceCard,.learningPanel,.variantLibraryCard){border-radius:19px}html body .siteSparkles span:nth-child(n+13){display:none}}
@media(prefers-reduced-motion:reduce){html body :is(button,.btn,.buttons,.changeButtons,.heroPrimaryButton,.heroSecondaryButton){transform:none!important;transition:none!important}}
@media print{html body :is(.taskCard,.theoryNumberGroup,.learningPanel){background:white;box-shadow:none;border-color:#ddd}}
html body :is(.legalBox,.recommendationPanel,.theoryCatalog,.trainingQueue,.adminCard){background:var(--constellation-paper);border:1px solid var(--constellation-border);border-radius:22px;box-shadow:none}
html body.tasksPage .taskCard.completedCard{border-color:rgba(34,197,94,.45)}
html body :is(.badgeSuccess,.badgeWarning){color:inherit}
@media(min-width:1000px){html body #tasksFilterForm button[type="submit"]{width:auto;min-width:180px;justify-self:start;padding-inline:24px}html body :is(.heroPrimaryButton,.heroSecondaryButton,.enterButton){font-size:12px}}

/* Preserve the original palette; polish spacing and hierarchy instead. */
html body .taskLinks>a{color:var(--text-main);padding:20px 22px;transition:background .2s ease,transform .2s ease,border-color .2s ease}
html body .taskLinks>a small{color:var(--text-secondary);line-height:1.6}
html body .taskLinks{gap:14px}
html body .dailyMission{gap:18px}
html body .missionStep{transition:transform .2s ease,background .2s ease,border-color .2s ease}
@media(max-width:600px){html body .taskLinks>a{padding:16px}html body .taskLinks{gap:10px}}
@media(prefers-reduced-motion:reduce){html body .taskLinks>a,html body .missionStep{transition:none}}

/* Subtle feedback: accent glow, tactile links and a moving navigation arrow. */
html[data-theme="dark"] body :is(.taskLinks>a,.theoryTopicChip,.statItem){background:var(--constellation-paper);border-color:var(--constellation-border)}
html[data-theme="dark"] body.tasksPage :is(.taskCard:not(.completedCard),.tasksFilters){background:var(--constellation-paper)}
html body :is(.dashboardCard,.faqItem,.authorCard,.priceCard,.variantLibraryCard,.taskLinks>a){transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
html body :is(.taskLinks>a,.variantCardLink):focus-visible{outline:2px solid var(--text-accent);outline-offset:4px;box-shadow:0 0 0 5px color-mix(in srgb,var(--text-accent) 12%,transparent)}
@media(hover:hover) and (pointer:fine){
html body :is(.dashboardCard,.faqItem,.priceCard,.variantLibraryCard):hover{box-shadow:0 8px 28px #160b2018,0 0 20px color-mix(in srgb,var(--text-accent) 7%,transparent)}
html body :is(.taskLinks>a,.variantCardLink):hover{transform:translateY(-3px);box-shadow:0 8px 22px color-mix(in srgb,var(--text-accent) 12%,transparent)}
html body .taskLinks>a>i{transition:transform .22s ease}
html body .taskLinks>a:hover>i{transform:translateX(4px)}
html body .missionStep:hover{border-color:var(--text-accent);box-shadow:0 0 18px color-mix(in srgb,var(--text-accent) 15%,transparent)}
}
@media(prefers-reduced-motion:reduce){html body :is(.dashboardCard,.faqItem,.authorCard,.priceCard,.variantLibraryCard,.taskLinks>a,.variantCardLink,.taskLinks>a>i,.missionStep){transition:none!important;transform:none!important}}

html[data-theme="dark"] body .homeEncouragement{background:var(--constellation-paper);border-color:var(--constellation-border)}

/* Original wine surfaces, before the opaque neutral card redesign. */
html[data-theme="dark"]{--constellation-paper:#880d4d30;--constellation-inset:#75234551;--constellation-border:rgba(255,255,255,.07);--card-bg:#880d4d30;--card-border:rgba(255,255,255,.07);--task-panel-bg:#880d4d30;--task-panel-border:rgba(255,255,255,.07)}

/* Disclosures open immediately; solution is a plain text action. */
html body details,html body details *,html body details::details-content{animation:none!important;transition:none!important}
html body details>summary,html body details>summary:hover,html body details>summary:active{transform:none!important;filter:none!important;box-shadow:none!important}
html body .solutionDetails,html body .solutionDetails[open]{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
html body .solutionDetails>summary,html body .solutionDetails>summary:hover{display:block;list-style:none;background:none!important;border:0!important;padding:10px 0!important;color:var(--text-main)!important;cursor:pointer;width:fit-content}
html body .solutionDetails>summary::-webkit-details-marker{display:none}
html body .solutionDetails>summary::marker{content:''}
html body .solutionDetails>summary:focus-visible{outline:2px solid var(--text-accent);outline-offset:3px}

/* Keep the exercise catalogue comfortably inside its shared card. */
html body .trainingCatalogue{box-sizing:border-box;padding:32px;min-width:0}
@media(max-width:620px){html body .trainingCatalogue{padding:20px 16px}}

/* Compact bank search: primary choice and action share a baseline. */
html body.tasksPage .tasksFilters{padding:28px;max-width:100%;box-sizing:border-box}
html body.tasksPage .filterHeader{margin-bottom:20px;align-items:center}
html body.tasksPage .filterHeader h2{font-size:20px;line-height:1.5}
html body.tasksPage .filterIcon{font-size:26px;color:var(--text-accent);opacity:.7}
html body.tasksPage #tasksFilterForm{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 16px}
html body.tasksPage #tasksFilterForm>.filterBlock:first-child{grid-column:1;grid-row:1}
html body.tasksPage #tasksFilterForm .filterSubmitBlock{grid-column:2;grid-row:1;align-self:end;margin:0}
html body.tasksPage #tasksFilterForm .filterBlock label{display:block;margin:0 0 8px;font-size:11px;line-height:1.5;color:var(--text-secondary)}
html body.tasksPage #tasksFilterForm .taskInput{min-height:46px;height:46px;padding:10px 14px;font-size:14px;text-align:left;border-radius:12px;box-sizing:border-box;max-width:100%}
html body.tasksPage #tasksFilterForm button[type="submit"]{height:46px;min-height:46px;min-width:0;width:auto;margin:0;padding:10px 22px;font-size:11px;border-radius:12px;white-space:nowrap}
html body.tasksPage .bankAdvancedFilters{grid-column:1/-1;grid-row:2;padding-top:14px;margin-top:0}
html body.tasksPage .bankAdvancedFilters>summary{font-size:11px;gap:10px;padding:6px 0;min-height:28px}
html body.tasksPage .bankAdvancedFilters>summary span{font-size:10px;opacity:.8}
html body.tasksPage .bankAdvancedGrid{gap:16px;padding-top:18px}
html body.tasksPage .tasksFilters .adminAddButton{display:inline-flex;align-items:center;gap:6px;width:auto;min-height:36px;margin:16px 0 0;padding:6px 0;border:0;border-radius:0;background:none;color:var(--text-accent);font-size:11px;box-shadow:none}
@media(max-width:650px){html body.tasksPage .tasksFilters{padding:20px 16px}html body.tasksPage #tasksFilterForm{grid-template-columns:minmax(0,1fr);gap:14px}html body.tasksPage #tasksFilterForm .filterSubmitBlock{grid-column:1;grid-row:3}html body.tasksPage #tasksFilterForm button[type="submit"]{width:100%}html body.tasksPage .bankAdvancedGrid{grid-template-columns:minmax(0,1fr)}html body.tasksPage .bankAdvancedFilters>summary span{display:block;width:100%;padding-left:24px}}

/* Mathematical helpers follow the card width, with safe inner spacing. */
html body .taskCard .answerRow{width:100%;max-width:none;box-sizing:border-box;min-width:0}
html body .taskCard .mathKeys,html body .variantAnswerRow>.mathKeys{width:100%;max-width:none;box-sizing:border-box;min-width:0}
html body .learningHero{box-sizing:border-box;padding:28px 32px;max-width:100%;min-width:0}
html body .learningHero h1{font-size:clamp(24px,3vw,40px);line-height:1.45;margin:18px 0 14px;overflow-wrap:anywhere}
html body .learningHero p{margin:0;line-height:1.8;overflow-wrap:anywhere}
html body #inboxTitle:focus{outline:none}
html body #inboxClose:focus:not(:focus-visible){outline:none;box-shadow:none}
@media(max-width:620px){html body .learningHero{padding:22px 18px}html body .learningHero h1{font-size:24px;line-height:1.5}}

/* Text actions stay light: no rectangular surface or hover shadow. */
html body #homeEncouragementNext,
html body #homeEncouragementNext:is(:hover,:focus,:active){
    appearance:none;
    display:inline-flex;
    align-items:center;
    width:fit-content;
    max-width:100%;
    min-height:44px;
    padding:10px 0;
    margin-top:8px;
    border:0;
    border-radius:12px;
    background:none;
    box-shadow:none;
    filter:none;
    transform:none;
    color:var(--text-accent);
    transition:color .15s ease;
}
html body #homeEncouragementNext:hover{text-decoration:underline;text-underline-offset:4px}
html body #homeEncouragementNext:focus-visible{outline:2px solid var(--text-accent);outline-offset:4px}
html body #homeEncouragementNext::before,
html body #homeEncouragementNext::after{content:none}



/* The journal palette is shared by the landing page and the study tools. */
html[data-theme="light"] {
    --journal-canvas: #f6f2ff;
    --journal-paper: #fffcff;
    --journal-inset: #eee7f8;
    --journal-line: #d4c6e7;
    --journal-ink: #271d38;
    --journal-muted: #645475;
    --journal-shadow: #4b386d;
    --journal-pink: #fbd5e3;
    --journal-blue: #e0ecff;
    --journal-green: #d7eee3;
    --journal-grid: #655184;
    --journal-dot: #e7dff4;
}

html[data-theme="dark"] {
    --journal-canvas: #181425;
    --journal-paper: #241e35;
    --journal-inset: #302641;
    --journal-line: #544469;
    --journal-ink: #faf0ff;
    --journal-muted: #cebedc;
    --journal-shadow: #0c0914;
    --journal-pink: #483048;
    --journal-blue: #29364e;
    --journal-green: #293c41;
    --journal-grid: #bba6ed;
    --journal-dot: #302740;
}

html[data-theme] {
    --bg-solid: var(--journal-canvas);
    --card-bg: var(--journal-paper);
    --card-border: var(--journal-line);
    --constellation-paper: var(--journal-paper);
    --constellation-inset: var(--journal-inset);
    --constellation-border: var(--journal-line);
    --constellation-muted: var(--journal-muted);
    --task-panel-bg: var(--journal-paper);
    --task-panel-border: var(--journal-line);
    --sidebar-bg: var(--journal-paper);
    --sidebar-text: var(--journal-ink);
    --text-main: var(--journal-ink);
    --text-color: var(--journal-ink);
    --text-secondary: var(--journal-muted);
    --heading-color: var(--journal-ink);
    --btn-bg: var(--journal-inset);
    --input-bg: var(--journal-paper);
    --play-surface: var(--journal-paper);
    --play-line: var(--journal-line);
    --play-ink: var(--journal-ink);
    --bg-pattern: radial-gradient(var(--journal-grid) 1px, transparent 1px);
    --bg-pattern-size: 24px 24px;
    --bg-pattern-opacity: .12;
}

html[data-theme="dark"][data-interface-accent="pink"] { --text-accent: #ff9bc3; }
html[data-theme="light"][data-interface-accent="pink"] { --text-accent: #a12460; }

@media screen {
    html[data-theme] {
        background: var(--journal-canvas);
        color: var(--journal-ink);
    }

    html[data-theme] body,
    html[data-theme] body.journalLanding {
        background: radial-gradient(var(--journal-dot) 1px, transparent 1px) 0 0 / 24px 24px,
            var(--journal-canvas);
        color: var(--journal-ink);
    }

    html[data-theme] body::before { opacity: 0; }
}

html body :is(.journalLanding, .homeMain, .homeHeader) :focus-visible {
    outline: 2px solid var(--text-accent);
    outline-offset: 4px;
}

.journalWidth,
html body.homePage :is(.homeHeader, .homeMain) {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto;
}

.journalHeader,
html body.homePage .homeHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 8px 0;
    border-bottom: 1px solid var(--journal-line);
}

.journalHeader nav,
.journalActions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.journalHeader nav > a,
html body.homePage .homeNav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--journal-ink);
    font-size: 15px;
    opacity: 1;
}

.journalHeader nav > a:hover,
html body.homePage .homeNav a:hover {
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.journalLogo,
html body.homePage .homeLogo {
    color: var(--journal-ink);
    font-size: 36px;
    line-height: 1;
    font-weight: 400;
}

:is(.journalLogo, .homeLogo) span { color: var(--text-accent); }

.journalHero {
    display: grid;
    grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 85px);
    position: relative;
    padding-block: clamp(42px, 6vw, 78px) 48px;
}

.journalCopy { min-width: 0; }

.journalLabel {
    color: var(--journal-muted);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .11em;
}

.journalCopy .journalLabel { color: var(--text-accent); }

.journalLanding .journalCopy h1 {
    margin: 16px 0 20px;
    color: var(--journal-ink);
    font-size: clamp(48px, 6.7vw, 104px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .96;
}

.journalCopy h1 em {
    display: block;
    color: var(--text-accent);
    font-style: normal;
}

.journalIntro {
    max-width: 34ch;
    margin-bottom: 26px;
    color: var(--journal-muted);
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.4;
}

.journalLanding .journalButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 15px;
    border: 1px solid var(--journal-line);
    border-radius: 6px;
    background: var(--journal-paper);
    color: var(--journal-ink);
    font-size: 16px;
    line-height: 1.25;
}

.journalLanding .journalPrimary {
    border-color: #372747;
    background: #ffb5cd;
    color: #2b1c38;
    box-shadow: 3px 3px 0 #372747;
}

.journalLanding .journalButton:hover { text-decoration: underline; text-underline-offset: 4px; }

.journalScene {
    min-width: 0;
    margin: 0 5px 5px 0;
    overflow: hidden;
    border: 1px solid #463662;
    border-radius: 10px;
    background: #f6eefe;
    color: #423259;
    box-shadow: 5px 5px 0 var(--journal-shadow);
}

.journalScene > :is(figcaption, div) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.25;
}

.journalScene img {
    width: 100%;
    height: auto;
    border-block: 1px solid #463662;
}

.journalSectionHeading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 14px;
}

.journalSectionHeading h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 400; }

.journalTiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.journalTile {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 16px 42px 18px 18px;
    border: 1px solid var(--journal-line);
    border-radius: 8px;
    color: var(--journal-ink);
}

.journalTilePink { background: var(--journal-pink); }
.journalTileBlue { background: var(--journal-blue); }
.journalTileGreen { background: var(--journal-green); }
.journalTileIndex { color: var(--journal-muted); font-size: 14px; }
.journalTileIndex b { margin-left: 5px; }
.journalTile strong { font-size: clamp(22px, 3vw, 32px); line-height: 1.05; font-weight: 400; }
.journalTile > span:not(.journalTileIndex, .journalTileArrow) { color: var(--journal-muted); font-size: 16px; line-height: 1.35; }
.journalTileArrow { position: absolute; right: 16px; bottom: 15px; font-size: 22px; }

@media (hover: hover) {
    .journalTile:hover { box-shadow: 0 9px 24px color-mix(in srgb, var(--journal-shadow) 18%, transparent); transform: translateY(-3px); }
}

.journalLanding :is(.howSection, .forWhoModern, .finalCta) { --accent: var(--text-accent); }

html body.homePage .homeMain { padding-block: 28px 60px; }
html body.homePage .welcomeBlock {
    gap: 22px;
    padding: clamp(18px, 4vw, 36px);
    border-radius: 12px;
    background: var(--journal-paper);
}

.homePage .welcomeBlock > div { min-width: 0; }
.homePage .welcomeBlock h1 { font-size: clamp(26px, 4vw, 48px); line-height: 1.15; overflow-wrap: anywhere; }
.homePage .homeEyebrow { color: var(--text-accent); }
.homePage .welcomeBlock > div > p:last-child { color: var(--journal-muted); opacity: 1; font-size: 18px; }

html body.homePage .homeEncouragement {
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--journal-inset);
    box-shadow: none;
}

.homePage .welcomeBlock #homeEncouragementText { min-height: 0; line-height: 1.5; }
.homePage .dailyMission { border-radius: 10px; background: var(--journal-blue); }
.homePage .dailyMission > div:first-child { min-width: min(100%, 240px); }
.homePage .missionBadge { background: var(--journal-paper); border-radius: 5px; }
.homePage .missionStep { background: var(--journal-paper); border-radius: 8px; }
.homePage .missionStep.is-done { background: var(--journal-green); }
.homePage .missionProgress progress { accent-color: var(--text-accent); }
html body.homePage .dashboardCard { border-radius: 12px; min-width: 0; }

html body.homePage .taskLinks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

html body.homePage .taskLinks > a {
    min-width: 0;
    min-height: 114px;
    padding: 12px 24px 12px 12px;
    border-color: var(--journal-line);
    border-radius: 8px;
    background: var(--journal-inset);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

html body.homePage .taskLinks > a:nth-child(1) { background: var(--journal-pink); }
html body.homePage .taskLinks > a:nth-child(2) { background: var(--journal-green); }
html body.homePage .taskLinks > a:nth-child(5) { background: var(--journal-blue); }
html body.homePage .taskLinks > a > :is(span, i) { color: var(--text-accent); }
html body.homePage .taskLinks > a > small { opacity: 1; }
.homePage .cardLabel { color: var(--journal-muted); opacity: 1; }
.homePage .studentTop h2 { overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .journalLanding .journalHeader,
    html body.homePage .homeHeader { display: none; }
    .journalHero { gap: 26px; padding-block: 32px; }
    .journalLanding .journalCopy h1 { font-size: clamp(40px, 7vw, 64px); }
    html body.homePage .taskLinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .journalWidth { width: calc(100% - 32px); }
    .journalHero { grid-template-columns: minmax(0, 1fr); }
    html body.journalLanding .journalCopy h1 { font-size: clamp(39px, 10.8vw, 64px) !important; line-height: .98 !important; }
    .journalIntro { margin-bottom: 18px; }
    .journalTiles { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    html body.homePage .homeMain { width: 100%; }
    html body.homePage .welcomeBlock { flex-direction: column; align-items: stretch; }
    html body.homePage .homeEncouragement { flex: auto; }
    html body.homePage .taskLinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.homePage .statsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .journalTile:hover { transform: none; }
    .journalLanding .journalTile { transition: none; }
}

/* Frames for interactive pages. Print layouts have their own stylesheet. */
@media screen {
    html[data-theme="light"] {
        --journal-frame: #ab9bc8;
        --journal-grid-line: #d8cbed;
        --journal-header: #ece3fa;
    }

    html[data-theme="dark"] {
        --journal-frame: #6f5c92;
        --journal-grid-line: #3f3353;
        --journal-header: #302540;
    }

    html[data-theme] {
        --journal-step: 0 2px 0 var(--journal-line);
        --journal-graph-paper:
            linear-gradient(to right, var(--journal-grid-line) 1px, transparent 1px),
            linear-gradient(to bottom, var(--journal-grid-line) 1px, transparent 1px),
            var(--journal-header);
    }

    html[data-theme] body :is(.tasksSidebar, .mobileBar, .mobileMenu) {
        background: var(--journal-paper);
        border-color: var(--journal-frame);
    }

    html[data-theme] body .tasksSidebar .sidebarLogo {
        color: var(--journal-ink) !important;
    }

    html[data-theme] body .tasksSidebar .sidebarLogo span { color: var(--text-accent); }

    html[data-theme] body .listThings a {
        color: var(--journal-ink) !important;
        border-radius: 6px;
    }

    html[data-theme] body .listThings a.active {
        background: var(--journal-pink);
        border-color: var(--journal-frame);
        box-shadow: 2px 2px 0 var(--journal-shadow);
    }

    html[data-theme] body .listThings a.active::before {
        background: var(--text-accent);
        border-radius: 0;
    }

    html[data-theme] body :is(.homeHeader, .authorNav, .homeFooter) {
        border-color: var(--journal-frame);
    }

    html[data-theme] body :is(.dashboardCard, .tasksFilters, .taskCard, .theoryCatalog, .theoryCatalogBanner,
        .theoryNumberGroup, .variantCardLink, .variantGenerator, .variantLookupCard,
        .variantExamTimer, .learningPanel, .trainingStart, .trainingCatalogue, .learningPuzzle,
        .profileCard, .profilePersonalPanel, .profileSettingCard, .profileRecoveryCard,
        .statisticsCard, .statisticCard, .calendarSection, .variantsSection, .recommendationPanel,
        .faqItem, .featureCard, .authorCard, .priceCard, .checkoutOrder, .paymentCard,
        .legalBox, .supportTicketCard, .adminCard, .boardFloat, .boardToolPanel,
        .boardSearchPanel, .boardTextTools, .boardImageTools, .boardGraphTools) {
        background: var(--journal-paper);
        border: 1px solid var(--journal-frame);
        border-radius: 9px;
        box-shadow: var(--journal-step);
    }

    html[data-theme] body :is(.completedCard, .learningPuzzle.is-done) { border-color: var(--button-color); }
    html[data-theme] body :is(.recommendedTasks, .trainingStart, .checkoutOrder) { background: var(--journal-blue); }

    html[data-theme] body.homePage .welcomeBlock,
    html[data-theme] body :is(.tasksHeader, .statisticsHeader, .profileHeader,
        .trainingHeader, .learningHero, .pricingHero, .authorHero, .faqHero,
        .legalHeader, .checkoutIntro, .registerWelcome, .finalCta, .faqCta, .authorNote) {
        background: var(--journal-graph-paper);
        background-size: 22px 22px;
        border: 1px solid var(--journal-frame);
        border-top: 2px solid var(--journal-frame);
        border-radius: 10px;
        box-shadow: var(--journal-step);
    }

    html[data-theme] body :is(.tasksHeader, .statisticsHeader, .profileHeader, .trainingHeader, .faqHero, .legalHeader, .checkoutIntro) {
        padding: clamp(16px, 3vw, 28px);
    }

    html[data-theme] body :is(.tasksHeader, .statisticsHeader, .profileHeader, .trainingHeader,
        .learningHero, .pricingHero, .authorHero, .faqHero, .legalHeader, .checkoutIntro) h1 {
        color: var(--journal-ink);
    }

    html[data-theme] body :is(.tasksEyebrow, .profileEyebrow, .statisticsEyebrow, .learningEyebrow,
        .pricingEyebrow, .authorEyebrow, .legalEyebrow, .sectionEyebrow, .taskTag,
        .taskId, .theoryNumberBadge, .priceBadge, .checkoutBadge, .trainingPlan) {
        background: var(--journal-inset);
        border: 1px solid var(--journal-line);
        border-radius: 5px;
        color: var(--journal-ink);
    }

    html[data-theme] body :is(.login, .sinusModal__card, .profileModalCard, .variantResultModal, .contactsModalContent) {
        background: var(--journal-paper) !important;
        border: 1px solid var(--journal-frame) !important;
        border-radius: 10px !important;
        box-shadow: 5px 5px 0 var(--journal-shadow) !important;
    }

    html[data-theme] body :is(.taskInput, .profileInput, .loginInput, .fontTrigger, .sinusSearch,
        .theoryTopicChip, .taskTag, .statItem, .missionStep, .trainingNumber) {
        border-radius: 6px !important;
    }

    html[data-theme] body .trainingStartCopy > .taskButton,
    html[data-theme] body :is(.taskPrimaryButton, .authButton, .pricingButton, .paymentButton,
        .checkoutPayButton, .authorButton, .heroPrimaryButton, .finalCtaButton) {
        background: #ffb5cd;
        border: 1px solid #4b386d;
        border-radius: 6px;
        box-shadow: 3px 3px 0 var(--journal-shadow);
        color: #2b1c38 !important;
    }

    html[data-theme] body .trainingNumber.isSelected {
        background: var(--journal-pink);
        border-color: var(--journal-frame);
        box-shadow: var(--journal-step);
        color: var(--journal-ink);
    }

    html[data-theme] body :is(.taskButton, .profileSmallButton, .themeButton, .mobileBar button,
        .mobileMenuClose, .heroSecondaryButton, .boardGroupTrigger, .learningBack) {
        border-radius: 6px;
    }

    html body.boardPage .boardCanvasWrap {
        border-radius: 9px;
        border-color: var(--journal-frame);
    }

    html[data-theme] body :is(.errorPage, .userAdmin, .telegramAdmin, .solutionReviewAdmin) h1 {
        color: var(--journal-ink);
    }

    html[data-theme] body :is(a, button, input, select, textarea, summary):focus-visible {
        outline: 2px solid var(--text-accent);
        outline-offset: 3px;
    }

    @media (hover: hover) {
        html[data-theme] body :is(.learningPuzzle, .variantCardLink, .theoryTopicChip):hover {
            background: var(--journal-inset);
            border-color: var(--journal-frame);
            box-shadow: var(--journal-step);
        }
    }

    @media (max-width: 640px) {
        html[data-theme] { --journal-step: 2px 2px 0 var(--journal-shadow); }

        html[data-theme] body :is(.tasksHeader, .statisticsHeader, .profileHeader,
            .trainingHeader, .faqHero, .legalHeader, .checkoutIntro) {
            padding: 16px;
            overflow-wrap: anywhere;
        }
    }
}

@media screen {
    html[data-theme="light"] {
        --journal-canvas: #f8f6fd;
        --journal-header: #f0ebfc;
        --journal-ink: #241b36;
        --journal-green: #e4e0ff;
        --journal-dot: #eee7f7;
    }

    html[data-theme="dark"] {
        --journal-canvas: #161322;
        --journal-header: #28203a;
        --journal-green: #332b50;
    }

    .journalLanding .journalScene {
        margin: 0;
        border-color: var(--journal-frame);
        border-radius: 16px;
        background: var(--journal-paper);
        color: var(--journal-ink);
        box-shadow: 0 20px 45px -24px color-mix(in srgb, var(--journal-shadow) 70%, transparent);
    }

    .journalWave {
        display: block;
        width: 100%;
        height: auto;
        border-block: 1px solid var(--journal-frame);
        background: #dfd5fc;
    }

    .journalScene:has(.journalWaveControls:not([hidden])) .journalWave { cursor: crosshair; }
    .journalScene .journalWaveControls[hidden] { display: none; }

    .journalScene .journalWaveControls {
        display: grid;
        grid-template-columns: auto minmax(55px, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: 52px;
        color: var(--journal-muted);
    }

    .journalWaveControls input {
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 0;
        cursor: ew-resize;
        accent-color: var(--text-accent);
    }

    .journalLanding .journalPrimary {
        border-color: #35274a;
        background: #35274a;
        box-shadow: none;
        color: #fff5ff;
    }

    html[data-theme="dark"] .journalLanding .journalPrimary {
        background: #f5c4ed;
        border-color: #f5c4ed;
        color: #261c36;
    }

    .journalTile { border-radius: 12px; }
    .journalTileArrow { transition: translate .18s ease; }
    .journalTile:is(:hover, :focus-visible) .journalTileArrow { translate: 2px -2px; }

    html[data-theme] body :is(.quickNavTrigger, .quickNavigation button) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 8px 13px;
        border: 1px solid var(--journal-frame);
        border-radius: 9px;
        background: var(--journal-paper);
        color: var(--journal-ink);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
    }

    html[data-theme] body .quickNavTrigger[hidden],
    .quickNavigation [hidden] { display: none !important; }

    .quickNavTrigger {
        position: fixed;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        z-index: 950;
        box-shadow: var(--journal-step);
    }

    .quickNavigation {
        position: fixed;
        inset: 0;
        width: min(500px, calc(100% - 32px));
        max-height: min(650px, calc(100dvh - 32px));
        margin: auto;
        padding: 20px;
        overflow: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--journal-frame);
        border-radius: 16px;
        background: var(--journal-paper);
        color: var(--journal-ink);
        box-shadow: 0 24px 80px #160b2e52;
    }

    .quickNavigation::backdrop { background: #1c142a99; backdrop-filter: blur(4px); }

    .quickNavigation :is(header, footer) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .quickNavigation h2 { margin-top: 5px; font-size: 27px; }
    .quickNavSearch { display: grid; gap: 6px; margin: 18px 0 10px; font-size: 13px; }

    .quickNavSearch input {
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        border: 1px solid var(--journal-frame);
        border-radius: 8px;
        background: var(--journal-inset);
        color: var(--journal-ink);
        font: inherit;
        font-size: 16px;
    }

    html[data-theme] body .quickNavLinks :is(a, .listThings) {
        margin: 0;
        opacity: 1;
    }

    html[data-theme] body .quickNavLinks a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 7px;
        color: var(--journal-ink);
        font-size: 15px;
        line-height: 1.35;
    }

    html[data-theme] body .quickNavLinks a:is(:hover, :focus-visible) {
        background: var(--journal-inset);
        border-color: var(--journal-line);
        box-shadow: none;
    }

    .quickNavEmpty { padding: 12px 0; color: var(--journal-muted); font-size: 14px; }

    .quickNavigation footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--journal-line);
    }

    .quickNavigation kbd { color: var(--journal-muted); font-size: 12px; }

    @media (max-width: 900px) {
        .mobileBar .quickNavTrigger { position: static; margin-left: auto; box-shadow: none; }
    }

    @media (max-width: 500px) {
        .journalScene .journalWaveControls { grid-template-columns: minmax(0, 1fr) auto; }
        .journalWaveControls label { grid-column: 1 / -1; }
        .mobileBar { gap: 6px; }
        html[data-theme] body .mobileBar button { padding-inline: 8px; font-size: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .journalTileArrow { transition: none; }
        .journalTile:is(:hover, :focus-visible) .journalTileArrow { translate: none; }
    }
}

@media print {
    .quickNavTrigger, .quickNavigation, .journalWaveControls { display: none !important; }
}



/* Shared layout for the study workspace and its public entry points. */
@media screen {
    html[data-theme="light"] {
        --workspace-bg: #f8f8fc;
        --workspace-rail: #f0eff8;
        --workspace-card: #fff;
        --workspace-border: #e1dfee;
        --workspace-soft: #ebe6fb;
        --workspace-rose: #f9e8f3;
        --workspace-blue: #e6effc;
        --workspace-title: #241c38;
        --workspace-action: #4a3474;
        --workspace-action-text: #fff;
        --workspace-elevation: 0 8px 24px #31204a0a;
    }

    html[data-theme="dark"] {
        --workspace-bg: #181624;
        --workspace-rail: #211d30;
        --workspace-card: #252134;
        --workspace-border: #3b334d;
        --workspace-soft: #322948;
        --workspace-rose: #422d43;
        --workspace-blue: #29374c;
        --workspace-title: #faf2ff;
        --workspace-action: #dfcbff;
        --workspace-action-text: #251938;
        --workspace-elevation: 0 8px 24px #0a071b33;
    }

    html[data-theme] {
        --workspace-sidebar: 236px;
        --workspace-body: system-ui, sans-serif;
    }

    html[data-theme] body:not(.journalLanding) {
        background: var(--workspace-bg);
    }

    html[data-theme] body .workspaceSidebar {
        inset: 12px auto 12px 12px;
        width: calc(var(--workspace-sidebar) - 12px);
        height: auto;
        max-height: calc(100dvh - 24px);
        padding: 14px 12px 10px;
        overflow: auto;
        border: 1px solid var(--workspace-border);
        border-radius: 19px;
        background: var(--workspace-rail);
    }

    html[data-theme] body .workspaceSidebar .workspaceBrand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 4px 2px 21px;
        padding: 6px;
        font-weight: 400;
        letter-spacing: 0;
    }

    html[data-theme] body .workspaceBrand > span { color: var(--workspace-title); }

    .workspaceMark {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        border-radius: 10px;
        background: var(--workspace-action);
    }

    html[data-theme] body .workspaceBrand .workspaceMark { color: var(--workspace-action-text); }
    .workspaceBrand strong, .workspaceBrand small { display: block; }
    .workspaceBrand strong { font-size: 23px; }
    .workspaceBrand small { margin-top: 5px; color: var(--journal-muted); font-size: 10px; }

    html[data-theme] body :is(.workspaceSidebar, .mobileMenu) .listThings {
        display: grid !important;
        flex: 0 0 auto;
        gap: 12px;
        margin: 0;
        overflow: visible;
    }

    .workspaceNavGroup { display: grid; gap: 2px; }

    .workspaceNavLabel {
        padding: 2px 10px 5px;
        color: var(--journal-muted);
        font-size: 10px;
        letter-spacing: .12em;
    }

    html[data-theme] body .quickNavLinks .workspaceNavLabel { display: none; }
    html[data-theme] body .quickNavLinks .workspaceNavGroup:not(:has(a:not([hidden]))) { display: none; }

    html[data-theme] body .workspaceSidebar .listThings a {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        margin: 0;
        padding: 7px 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        opacity: 1;
        font-size: 13px;
        line-height: 1.2;
    }

    html[data-theme] body .workspaceSidebar .listThings a span {
        display: grid;
        flex: 0 0 23px;
        width: 23px;
        height: 23px;
        place-items: center;
        margin: 0;
        border-radius: 6px;
        background: var(--workspace-card);
        color: var(--workspace-title);
        font-size: 14px;
    }

    html[data-theme] body .workspaceSidebar .listThings a:is(.active, :hover) {
        background: var(--workspace-soft);
        border-color: var(--workspace-border);
        box-shadow: none;
        transform: none;
    }

    html[data-theme] body .workspaceSidebar .listThings a::before { display: none; }

    html[data-theme] body .workspaceSidebarBottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: auto;
        padding: 14px 4px 0;
        border: 0;
    }

    html[data-theme] body .workspaceSidebarBottom :is(a, .logoutLink) {
        display: inline-flex;
        align-items: center;
        width: auto;
        min-height: 36px;
        margin: 0;
        padding: 4px 6px;
        border: 0;
        background: none;
        color: var(--journal-muted);
        font: inherit;
        font-size: 12px;
        cursor: pointer;
    }

    html[data-theme] body .workspaceSidebarBottom :is(a, .logoutLink):hover {
        color: var(--workspace-title);
        text-decoration: underline;
        box-shadow: none;
    }

    html[data-theme] body:has(> .workspaceSidebar) > :is(.tasksMain, .statisticsMain, .profileMain, .homeMain) {
        width: min(1320px, calc(100% - var(--workspace-sidebar)));
        max-width: none;
        margin: 0 0 0 var(--workspace-sidebar);
        padding: clamp(24px, 4vw, 52px) clamp(18px, 4vw, 56px) 70px;
    }

    html[data-theme] body.boardPage .boardApp {
        margin-left: var(--workspace-sidebar);
        width: calc(100% - var(--workspace-sidebar));
    }

    html[data-theme] body.boardPage .boardApp:is(.boardExpanded, :fullscreen) { margin-left: 0; width: 100%; }

    html[data-theme] body :is(.tasksHeader, .statisticsHeader, .profileHeader, .trainingHeader, .learningHero,
        .faqHero, .pricingHero, .authorHero, .legalHeader, .checkoutIntro),
    html[data-theme] body.homePage .welcomeBlock {
        position: relative;
        padding: clamp(22px, 4vw, 42px);
        border: 1px solid var(--workspace-border);
        border-radius: 22px;
        background: linear-gradient(115deg, var(--workspace-soft), var(--workspace-card) 86%);
        box-shadow: var(--workspace-elevation);
    }

    html[data-theme] body :is(.theoryPageMain .tasksHeader, .trainingHeader, .checkoutIntro) {
        background: linear-gradient(120deg, var(--workspace-blue), var(--workspace-card) 88%);
    }

    html[data-theme] body :is(.profileHeader, .pricingHero, .authorHero) {
        background: linear-gradient(120deg, var(--workspace-rose), var(--workspace-card) 88%);
    }

    html[data-theme] body :is(.tasksHeader, .statisticsHeader, .profileHeader, .trainingHeader, .learningHero) h1 {
        margin-top: 4px;
        color: var(--workspace-title);
        font-size: clamp(29px, 4vw, 47px);
        letter-spacing: -.035em;
        line-height: 1.2;
    }

    html[data-theme] body :is(.tasksSubtitle, .profileSubtitle, .trainingHeader p, .journalIntro,
        .faqAnswer, .faqHeroSubtitle, .legalBox p, .authWelcome p, .loginHeader p, .welcomeBlock > div > p:last-child) {
        font-family: var(--workspace-body);
        font-size: 15px;
        line-height: 1.65;
        color: var(--journal-muted);
    }

    html[data-theme] body :is(.tasksEyebrow, .profileEyebrow, .statisticsEyebrow, .learningEyebrow,
        .pricingEyebrow, .authorEyebrow, .legalEyebrow, .sectionEyebrow) {
        padding: 0;
        border: 0;
        background: none;
        color: var(--text-accent);
    }

    html[data-theme] body :is(.tasksFilters, .taskCard, .theoryCatalog, .theoryCatalogBanner, .theoryNumberGroup,
        .variantCardLink, .learningPanel, .trainingStart, .trainingCatalogue, .learningPuzzle, .profileCard,
        .profilePersonalPanel, .profileSettingCard, .statisticsCard, .statisticCard, .calendarSection,
        .variantsSection, .dashboardCard, .faqItem, .featureCard, .authorCard, .priceCard, .checkoutOrder,
        .paymentCard, .legalBox, .boardFloat, .boardToolPanel, .recommendationPanel, .adminCard) {
        border-color: var(--workspace-border);
        border-radius: 16px;
        background: var(--workspace-card);
        box-shadow: var(--workspace-elevation);
    }

    html[data-theme] body :is(.completedCard, .learningPuzzle.is-done) { border-color: var(--button-color); }
    html[data-theme] body :is(.recommendedTasks, .trainingStart) { background: var(--workspace-blue); }

    html[data-theme] body :is(.taskPrimaryButton, .authButton, .pricingButton, .paymentButton, .checkoutPayButton),
    html[data-theme] body .trainingStartCopy > .taskButton {
        border: 1px solid transparent;
        border-radius: 9px;
        background: var(--workspace-action);
        color: var(--workspace-action-text) !important;
        box-shadow: none;
    }

    html[data-theme] body :is(.themeButton, .taskInput, .profileInput, .loginInput, .fontTrigger,
        .sinusSearch, .taskTag, .trainingNumber, .theoryTopicChip) {
        border-color: var(--workspace-border);
        border-radius: 9px !important;
    }

    html[data-theme] body.tasksPage .tasksFilters {
        padding: clamp(16px, 3vw, 28px);
    }

    .tasksPage .tasksListHeader { border-bottom: 1px solid var(--workspace-border); padding-bottom: 14px; }
    .tasksPage .tasksListHeader h2 { font-size: 25px; }

    html[data-theme] body.homePage .dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    html[data-theme] body.homePage .dashboard .tasksCard,
    html[data-theme] body.homePage .dashboard .statsCard {
        grid-column: 1 / -1;
    }

    html[data-theme] body.homePage .dailyMission {
        grid-column: 1 / -1;
        margin: 0;
        border-color: var(--workspace-border);
        border-radius: 16px;
        background: var(--workspace-blue);
    }

    html[data-theme] body.homePage .taskLinks > a {
        border-color: var(--workspace-border);
        border-radius: 12px;
    }

    html[data-theme] body.authPage .authWrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(330px, .88fr);
        align-items: stretch;
        gap: 16px;
        width: min(1010px, calc(100% - 36px));
        max-width: none;
        margin: 0 auto;
        padding: clamp(24px, 6vw, 78px) 0;
    }

    html[data-theme] body.authPage .authWrapper .login {
        width: 100%;
        max-width: none;
        margin: 0;
        border: 1px solid var(--workspace-border) !important;
        border-radius: 22px !important;
        background: var(--workspace-card) !important;
        box-shadow: var(--workspace-elevation) !important;
    }

    html[data-theme] body.authPage :is(.authWelcome, .registerWelcome) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        min-width: 0;
        padding: clamp(24px, 4vw, 46px);
        border: 1px solid var(--workspace-border);
        border-radius: 22px;
        background: linear-gradient(145deg, var(--workspace-soft), var(--workspace-blue));
        color: var(--workspace-title);
        box-shadow: var(--workspace-elevation);
    }

    .authWelcome h1 { margin: 12px 0; font-size: clamp(27px, 4vw, 46px); line-height: 1.25; }
    .authWelcome img { width: min(100%, 270px); height: auto; }
    .authPage .loginMascot { display: none; }

    html[data-theme] body :is(.quickNavigation, .sinusModal__card, .profileModalCard, .variantResultModal, .contactsModalContent) {
        border: 1px solid var(--workspace-border) !important;
        border-radius: 20px !important;
        background: var(--workspace-card) !important;
        box-shadow: 0 20px 75px #120c2b33 !important;
    }

    @media (max-width: 900px) {
        html[data-theme] body.boardPage .boardApp { margin-left: 0; width: 100%; }
        html[data-theme] body.homePage .homeMain { width: 100%; padding-top: 22px; }
        html[data-theme] body .mobileMenu .workspaceSidebar { max-height: none; }
        html[data-theme] body .mobileMenu .workspaceBrand { display: none; }
        html[data-theme] body .mobileMenu .workspaceSidebarBottom { margin-top: 0 !important; }
    }

    @media (max-width: 700px) {
        html[data-theme] body.authPage .authWrapper { grid-template-columns: minmax(0, 1fr); }
        html[data-theme] body.authPage .authWrapper .login { order: -1; }
        html[data-theme] body.authPage :is(.authWelcome, .registerWelcome) img { width: 110px; }
        html[data-theme] body.homePage .dashboard { grid-template-columns: minmax(0, 1fr); }
    }
}

@media screen {
    html[data-theme] body #taskCards > .taskCard {
        padding: clamp(18px, 3vw, 30px);
    }

    html[data-theme] body #taskCards .taskCardHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-bottom: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--workspace-border);
    }

    .workspaceTaskNumber {
        display: inline-grid;
        place-items: center;
        min-width: 40px;
        min-height: 40px;
        padding: 6px 8px;
        border-radius: 10px;
        background: var(--workspace-soft);
        color: var(--workspace-title);
        font-size: 19px;
    }

    .workspaceTaskActions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .workspaceTaskStats { margin-top: 10px; color: var(--journal-muted); font: 13px/1.55 var(--workspace-body); }

    html[data-theme] body #taskCards .taskText {
        font-size: clamp(16px, 2vw, 19px);
        line-height: 1.65;
    }

}

@media screen {
    html[data-theme] body .tasksMain .freeAllowanceNote {
        margin: 0 0 18px;
        padding: 10px 14px;
        border: 1px solid var(--workspace-border);
        border-radius: 10px;
        background: var(--workspace-card);
        color: var(--journal-muted);
        line-height: 1.5;
    }

    html[data-theme] body .tasksMain .freeAllowanceNote a { color: var(--workspace-action); }

    html[data-theme] body.tasksPage #tasksFilterForm button[type="submit"] {
        border-radius: 9px;
        background: var(--workspace-action);
        color: var(--workspace-action-text);
        box-shadow: none;
    }
}

@media screen {
    html[data-theme] body #taskCards > .taskCard {
        border-radius: 18px;
        padding: clamp(18px, 3vw, 28px);
    }

    html[data-theme] body #taskCards .taskCardHeader {
        margin-bottom: 18px;
        padding-bottom: 15px;
    }

    .workspaceTaskIdentity { display: flex; align-items: center; gap: 11px; }
    .workspaceTaskIdentity h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.2; }
    .workspaceTaskIdentity p { color: var(--journal-muted); font: 13px/1.4 var(--workspace-body); }
    .workspaceTaskNumber { min-width: 46px; min-height: 46px; font-size: 16px; }
    .workspaceTaskActions :is(.taskFavorite, .taskReportButton) { border-radius: 8px; font-size: 11px; }
    .workspaceTaskActions .taskReportButton { border-color: transparent; }




    .workspaceTaskFeedback { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
    .workspaceTaskFeedback .taskResult:empty { display: none; }

    html[data-theme] body #taskCards .workspaceTaskFeedback .taskResult {
        width: auto;
        min-height: 0;
        margin: 0;
        font: 600 13px/1.5 var(--workspace-body);
        opacity: 1;
    }

    html[data-theme] body #taskCards .workspaceTaskFeedback .taskResult.correct { color: #24764f; }
    html[data-theme] body #taskCards .workspaceTaskFeedback .taskResult:is(.incorrect, .red) { color: #a4355c; }
    html[data-theme="dark"] body #taskCards .workspaceTaskFeedback .taskResult.correct { color: #95dfb5; }
    html[data-theme="dark"] body #taskCards .workspaceTaskFeedback .taskResult:is(.incorrect, .red) { color: #ffacc7; }

    html[data-theme] body #taskCards .workspaceTaskFeedback .solutionDetails { margin: 0; }
    html[data-theme] body #taskCards .workspaceTaskFeedback .solutionDetails[open] { flex-basis: 100%; }
    html[data-theme] body #taskCards .workspaceTaskFeedback .solutionDetails > summary::before {
        content: '›';
        display: inline-block;
        margin-right: 6px;
    }
    html[data-theme] body #taskCards .workspaceTaskFeedback .solutionDetails[open] > summary::before { rotate: 90deg; }
    html[data-theme] body #taskCards .workspaceTaskFeedback .solutionText {
        margin-top: 0;
        padding: 12px 15px;
        border-radius: 10px;
        background: var(--workspace-bg);
    }

    .workspaceTaskFooter {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 12px;
        margin-top: 14px;
        padding-top: 10px;
        border-top: 1px solid var(--workspace-border);
    }

    .workspaceTaskFooter .workspaceTaskStats { margin: 0; }
    .workspaceTaskAdmin { margin-left: auto; }
    .workspaceTaskAdmin summary { padding: 4px 0; color: var(--journal-muted); font-size: 11px; cursor: pointer; }
    .workspaceTaskAdmin .adminTaskActions { margin: 4px 0 0; padding: 0; border: 0; }
}



/* Pixy is the UI face. Formula renderers and editable documents own their typography. */
html[data-theme][data-interface-font] {
    --interface-family: 'Pixy', sans-serif;
    --workspace-body: var(--interface-family);
    --arcade-radius: 8px;
}

html[data-theme][data-interface-font] body,
html[data-theme][data-interface-font] body :where(*):not(:where(
    .katex, .katex *, .MathJax, .MathJax *, mjx-container, mjx-container *,
    .richEditable, .richEditable *, .boardInlineText, .boardInlineText *,
    .boardWidgetBody, .boardWidgetBody *, svg, svg *, math, math *
)) {
    font-family: var(--interface-family) !important;
}

@media screen {
    html[data-theme="light"] {
        --arcade-accent: #a42660;
        --arcade-focus: #b52d6e;
        --arcade-edge: #dac3d1;
        --arcade-shadow: #eedde8;
        --arcade-selected: #f8e0ed;
        --workspace-action: #a42660;
        --workspace-soft: #fae9f2;
        --workspace-rail: #f5edf2;
        --chart-bg: #ce6397;
    }

    html[data-theme="dark"] {
        --arcade-accent: #ff9aca;
        --arcade-focus: #ffa8d1;
        --arcade-edge: #695064;
        --arcade-shadow: #130e17;
        --arcade-selected: #503047;
        --workspace-action: #ffc0dd;
        --workspace-soft: #3a2838;
        --workspace-rail: #251e2b;
        --chart-bg: #e377ae;
        --journal-muted: #cfc1e2;
    }

    html[data-theme] {
        --bg-main-1: var(--workspace-bg);
        --bg-main-2: var(--workspace-card);
        --bg-main-3: var(--workspace-bg);
        --card-border: var(--arcade-edge);
        --journal-line: var(--arcade-edge);
        --journal-frame: var(--arcade-edge);
    }

    html[data-theme][data-interface-accent="pink"] {
        --text-accent: var(--arcade-accent);
    }

    html[data-theme] body :is(
        .workspaceSidebar, .mobileBar, .mobileMenu, .dashboardCard, .welcomeBlock,
        .dailyMission, .homeEncouragement, .statItem, .taskLinks > a, .journalScene, .journalTile,
        .tasksHeader, .tasksFilters, .taskCard, .theoryCatalog, .theoryCatalogBanner,
        .theoryNumberGroup, .variantCardLink, .variantGenerator, .variantLookupCard, .variantExamTimer,
        .trainingHeader, .trainingStart, .trainingCatalogue, .trainingNumber, .learningPanel,
        .learningHero, .learningPuzzle, .profileHeader, .profileCard, .profileAppearance,
        .profilePersonalPanel, .profileSettingCard, .profileRecoveryCard, .profileModalCard,
        .statisticsHeader, .statisticCard, .statisticsCard, .calendarSection, .variantsSection,
        .pricingHero, .priceCard, .checkoutIntro, .checkoutOrder, .paymentCard, .legalHeader,
        .legalBox, .faqHero, .faqItem, .faqCta, .authorHero, .authorCard, .authorNote,
        .personalSelectionAbout, .processStep, .featureCard, .finalCta, .login,
        .authWelcome, .registerWelcome, .quickNavigation, .fontPanel, .boardFloat, .boardCanvasWrap,
        .boardToolPanel, .boardSearchPanel, .sinusModal__card, .contactsModalContent,
        .variantResultModal, .recommendationPanel, .recommendationLink, .adminCard,
        .taskTag, .difficultyTag, .missionStep, .workspaceTaskNumber, .workspaceTaskFeedback .solutionText
    ),
    html[data-theme] body :is(#feedbackDialog, #platformTour, #inboxDialog, #inboxBell, #inboxToast) {
        border-radius: var(--arcade-radius) !important;
    }

    html[data-theme] body :is(
        button:not(.feedbackMascot), input:not([type="range"], [type="checkbox"], [type="radio"]),
        select, textarea, .journalButton, .pricingButton, .authorButton, .heroSecondaryButton,
        .finalCtaButton, .listThings a
    ):not(:where(.boardWidget *, .richEditable *, .boardInlineText)) {
        border-radius: var(--arcade-radius) !important;
    }

    html[data-theme] body :is(.taskCard, .dashboardCard, .profileCard, .profileSettingCard,
        .statisticsCard, .trainingCatalogue, .priceCard, .journalTile) {
        border-color: var(--arcade-edge);
        box-shadow: 2px 3px 0 var(--arcade-shadow);
    }

    html[data-theme] body .taskCard.completedCard { border-color: var(--button-color); }

    html[data-theme] body :is(.tasksHeader, .statisticsHeader, .trainingHeader, .learningHero, .profileHeader,
        .pricingHero, .authorHero, .faqHero, .legalHeader, .checkoutIntro),
    html[data-theme] body.homePage .welcomeBlock {
        background:
            linear-gradient(to right, var(--arcade-shadow) 1px, transparent 1px) 0 0 / 22px 22px,
            linear-gradient(to bottom, var(--arcade-shadow) 1px, transparent 1px) 0 0 / 22px 22px,
            var(--workspace-soft);
        border-color: var(--arcade-edge);
        box-shadow: 3px 4px 0 var(--arcade-shadow);
    }

    html[data-theme] body :is(.fontPanel, #feedbackDialog, #inboxDialog) {
        background: var(--workspace-card);
        color: var(--workspace-title);
        border: 1px solid var(--arcade-edge);
    }

    html[data-theme][data-interface-font] body .fontPanel :is(.fontList button, .fontList strong, .sinusSearch),
    html[data-theme][data-interface-font] body .fontPicker .fontTrigger {
        font-family: var(--interface-family) !important;
    }

    html[data-theme] body .fontPanel .fontList button:is(:hover, :focus-visible, [aria-selected="true"]) {
        background: var(--arcade-selected) !important;
        color: var(--workspace-title) !important;
    }

    html[data-theme] body :is(.fontPanel .sinusSearch, .profileInput, .taskInput, .loginInput) {
        background: var(--workspace-bg) !important;
        border-color: var(--arcade-edge) !important;
        color: var(--workspace-title) !important;
    }

    html[data-theme] body .fontPanel .sinusSearch:focus {
        box-shadow: none;
        outline-offset: 2px;
    }

    html[data-theme] body :is(a, button, input, select, textarea, summary):focus-visible {
        outline-color: var(--arcade-focus);
    }

    html[data-theme] body :is(.studentGoal strong, .accentStat strong, .statsMore, .rateCard .cardIcon,
        .profilePage .settingIcon, .profilePage .profilePersonalMark) {
        color: var(--text-accent);
        opacity: 1;
    }

    html[data-theme] body :is(.profilePage .profileCard, .profilePage .profileAppearance,
        .profilePage .profilePersonalPanel, .profilePage .profileRecoveryCard, .profilePage .profileSettingCard) {
        background: var(--workspace-card);
        border-color: var(--arcade-edge);
        color: var(--workspace-title);
    }

    html[data-theme] body :is(.profilePage .profileSmallButton, .profilePage .settingIcon,
        .profilePage .profilePersonalMark, .rateCard .cardIcon, .statsGrid .statItem) {
        background: var(--workspace-soft);
        border-color: var(--arcade-edge);
        border-radius: var(--arcade-radius) !important;
    }

    html[data-theme] body :is(.statItem span, .studentGoal span, .studentGoal small, .proActiveInfo) {
        color: var(--journal-muted);
        opacity: 1;
    }

    html[data-theme] body :is(.quickNavTrigger, #inboxBell, .feedbackMascot > span) {
        border: 1px solid var(--arcade-edge);
        border-radius: var(--arcade-radius) !important;
        background: var(--workspace-card);
        color: var(--workspace-title);
        box-shadow: 2px 2px 0 var(--arcade-shadow);
    }

    html[data-theme] body :is(.feedbackMascot img, .feedbackIntro img, .authWelcome img,
        .registerWelcome img, .pricingHeroArt img, .tourArt img, .forWhoVisual img, .finalMascot) {
        object-fit: contain;
        image-rendering: pixelated;
    }

    @media (min-width: 901px) {
        body:has(#inboxBell) .quickNavTrigger { right: 88px; bottom: 24px; }
    }

    @media (prefers-reduced-motion: no-preference) {
        .arcadeWaveTail { transform-origin: 71px 44px; animation: arcadeTailFlick 2s steps(1, end) infinite; }
        @keyframes arcadeTailFlick { 0%, 85%, 100% { transform: none; } 62% { transform: rotate(10deg); } 74% { transform: rotate(-7deg); } }
    }
}

@media screen {
    html[data-theme] .journalLanding .journalPrimary {
        background: var(--workspace-action);
        border-color: var(--workspace-action);
        color: var(--workspace-action-text);
    }

    html[data-theme] body .homeFooter {
        width: 100%;
        margin: 32px 0 0;
        padding: 26px 0 84px;
        background: transparent;
        color: var(--workspace-title);
        border-top: 1px solid var(--arcade-edge);
    }

    html[data-theme] body > .homeFooter {
        width: min(1160px, calc(100% - 36px));
        margin-inline: auto;
    }

    html[data-theme] body:has(> .workspaceSidebar) > .homeFooter {
        width: min(1210px, calc(100% - var(--workspace-sidebar) - 2 * clamp(18px, 4vw, 56px)));
        margin-inline: calc(var(--workspace-sidebar) + clamp(18px, 4vw, 56px)) 0;
    }

    html[data-theme] body .footerContainer {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(140px, .7fr) minmax(0, 2fr);
        gap: 24px;
    }

    html[data-theme] body .footerNavGrid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 18px;
    }

    .footerColumn { min-width: 0; gap: 4px; }
    html[data-theme] body :is(.footerColumnTitle, .footerLogo span) { color: var(--text-accent); }

    html[data-theme] body :is(.footerColumn a, .footerLinkBtn, .footerDescription, .footerMeta a) {
        z-index: auto;
        color: var(--journal-muted);
        opacity: 1;
        font-size: 12px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    html[data-theme] body :is(.footerColumn a, .footerLinkBtn, .footerMeta a):hover {
        color: var(--text-accent);
        text-decoration: underline;
        box-shadow: none;
        transform: none;
    }

    .footerMeta {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 22px;
        padding-top: 13px;
        border-top: 1px solid var(--workspace-border);
        color: var(--journal-muted);
        font-size: 12px;
    }

    html[data-theme] body .progressHero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr);
        align-items: center;
        gap: 20px;
        margin-bottom: 16px;
    }

    .progressScore {
        display: grid;
        gap: 8px;
        padding: 16px;
        border: 1px solid var(--arcade-edge);
        border-radius: var(--arcade-radius);
        background: var(--workspace-card);
        color: var(--journal-muted);
        font-size: 12px;
    }

    .progressScore strong { color: var(--text-accent); font-size: clamp(28px, 4vw, 43px); }
    .progressScore progress { width: 100%; height: 9px; accent-color: var(--workspace-action); }

    .progressNav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

    .progressNav a, .progressEmpty a {
        display: inline-flex;
        align-items: center;
        min-height: 42px;
        padding: 7px 12px;
        border: 1px solid var(--arcade-edge);
        border-radius: var(--arcade-radius);
        background: var(--workspace-card);
        color: var(--workspace-title);
        font-size: 12px;
    }

    .progressNav a:is(:hover, :focus-visible), .progressEmpty a:hover { background: var(--arcade-selected); }

    html[data-theme] body .statisticsMain #progressMetrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html[data-theme] body #progressMetrics .statisticCard { padding: 14px; gap: 10px; }
    html[data-theme] body #progressMetrics .statisticIcon {
        border-radius: var(--arcade-radius);
        background: var(--workspace-soft);
        color: var(--text-accent);
    }

    html[data-theme] body #progressMetrics .statisticCard :is(small, div > span) { opacity: 1; color: var(--journal-muted); }
    html[data-theme] body #progressMetrics .statisticCard strong { color: var(--workspace-title); }

    html[data-theme] body #progressCalendar .calendarCell {
        border-radius: var(--arcade-radius);
        background: var(--workspace-bg);
        border-color: var(--workspace-border);
    }

    html[data-theme] body #progressCalendar .calendarCell.hasTasks { background: var(--workspace-soft); }
    html[data-theme] body #progressCalendar .calendarCell.hasTasksHigh { background: var(--arcade-selected); }
    html[data-theme] body #progressCalendar .calendarCell.today { outline: 1px solid var(--text-accent); }
    html[data-theme] body #progressCalendar .taskBadge { color: var(--text-accent); }

    .progressCalendarLegend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 13px; font-size: 11px; color: var(--journal-muted); }
    .progressCalendarLegend span { display: inline-flex; align-items: center; gap: 6px; }
    .progressCalendarLegend span::before { content: ''; width: 10px; height: 10px; border: 1px solid var(--arcade-edge); background: var(--workspace-bg); }
    .progressCalendarLegend span:nth-child(2)::before { background: var(--workspace-soft); }
    .progressCalendarLegend span:nth-child(3)::before { background: var(--arcade-selected); }
    .progressEmpty { display: grid; justify-items: start; gap: 10px; padding: 14px; background: var(--workspace-bg); color: var(--journal-muted); border-radius: var(--arcade-radius); font-size: 13px; line-height: 1.6; }

    @media (max-width: 900px) {
        html[data-theme] body:has(> .workspaceSidebar) > .homeFooter {
            width: calc(100% - 32px);
            margin-inline: auto;
        }
    }

    @media (max-width: 700px) {
        html[data-theme] body .footerContainer,
        html[data-theme] body .progressHero { grid-template-columns: minmax(0, 1fr); }

        html[data-theme] body .footerNavGrid,
        html[data-theme] body .statisticsMain #progressMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        html[data-theme] body #progressMetrics .statisticCard { flex-direction: column; align-items: flex-start; }
    }
}



/* Window frames and graph paper from the Sinus field note. */
@media screen {
    html[data-theme="light"] {
        --note-page: #f6f1fd;
        --note-paper: #fffbff;
        --note-bar: #f3ebfb;
        --note-grid: #e4d8f7;
        --note-line: #c4aee8;
        --note-ink: #50386e;
        --note-shadow: #4b3566;
        --note-rose: #f9dbe9;
        --note-blue: #e1eafa;
    }

    html[data-theme="dark"] {
        --note-page: #181423;
        --note-paper: #251e33;
        --note-bar: #30253e;
        --note-grid: #352746;
        --note-line: #4a385e;
        --note-ink: #9a7fb9;
        --note-shadow: #0d0914;
        --note-rose: #482c43;
        --note-blue: #29374e;
    }

    html[data-theme] body:not(.journalLanding) {
        background: radial-gradient(var(--note-line) .85px, transparent 1px) 8px 8px / 24px 24px,
            var(--note-page);
    }

    html[data-theme] body .workspaceSidebar {
        background: var(--note-bar);
        border-color: var(--note-ink);
        box-shadow: 4px 4px 0 var(--note-shadow);
    }

    html[data-theme] body .workspaceSidebar .listThings a.active {
        background: var(--note-rose);
        border-color: var(--note-ink);
    }

    html[data-theme] body :is(.dashboardCard, .tasksFilters, .taskCard, .variantCardLink, .theoryNumberGroup,
        .theoryCatalog, .trainingStart, .trainingCatalogue, .learningPanel, .learningPuzzle,
        .profileCard, .profileSettingCard, .profilePersonalPanel, .statisticsCard, .calendarSection,
        .variantsSection, .faqItem, .priceCard, .checkoutOrder, .legalBox, .authWelcome,
        .registerWelcome, .boardFloat, .boardToolPanel, .fontPanel) {
        background: var(--note-paper);
        border-color: var(--note-ink);
        box-shadow: 3px 4px 0 var(--note-shadow);
    }

    html[data-theme] body .taskCard.completedCard { border-color: var(--button-color); }
    html[data-theme] body :is(.tasksCard, .statsCard) .cardHeading {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--note-ink);
    }

    html[data-theme] body [data-field-note],
    html[data-theme] body.homePage .welcomeBlock[data-field-note] {
        --note-top: 44px;
        position: relative;
        padding-top: calc(var(--note-top) + clamp(18px, 3vw, 36px));
        border: 1px solid var(--note-ink);
        background:
            linear-gradient(to right, var(--note-line) 1px, transparent 1px) 0 var(--note-top) / 24px 24px,
            linear-gradient(to bottom, var(--note-line) 1px, transparent 1px) 0 var(--note-top) / 24px 24px,
            var(--note-grid);
        box-shadow: 5px 5px 0 var(--note-shadow);
    }

    .fieldNoteBar {
        position: absolute;
        z-index: 2;
        inset: 0 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-height: var(--note-top);
        padding: 7px clamp(12px, 2.5vw, 24px);
        border-bottom: 1px solid var(--note-ink);
        border-radius: calc(var(--arcade-radius) - 1px) calc(var(--arcade-radius) - 1px) 0 0;
        background: var(--note-bar);
        color: var(--workspace-title);
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: .04em;
        pointer-events: none;
    }

    .fieldNoteBar span:last-child { white-space: nowrap; }
    html[data-theme] body [data-field-note] .variantIntroStar { top: calc(var(--note-top) + 20px); }

    html[data-theme] body.homePage .homeEncouragement {
        position: relative;
        background: var(--note-paper);
        border-color: var(--note-ink);
        box-shadow: 3px 3px 0 var(--note-shadow);
    }

    .fieldNoteCat { position: absolute; top: 2px; right: 10px; object-fit: contain; }
    .homeEncouragement .homeEncouragementLabel { padding-right: 50px; min-height: 32px; }
    .homeEncouragement .homeEncouragementStar { display: none; }

    html[data-theme] body.homePage .taskLinks > a {
        border-color: var(--note-ink);
        background: var(--note-bar);
    }

    html[data-theme] body.homePage .taskLinks > a:nth-child(1),
    html[data-theme] body.homePage .taskLinks > a:nth-child(4) { background: var(--note-rose); }

    html[data-theme] body.homePage .taskLinks > a:nth-child(3),
    html[data-theme] body.homePage .dailyMission { background: var(--note-blue); }

    html[data-theme] body.homePage .dailyMission { border-color: var(--note-ink); box-shadow: 3px 4px 0 var(--note-shadow); }

    @media (hover: hover) {
        html[data-theme] body.homePage .taskLinks > a:hover { box-shadow: 3px 3px 0 var(--note-shadow); }
    }

    @media (max-width: 640px) {
        html[data-theme] body [data-field-note],
        html[data-theme] body.homePage .welcomeBlock[data-field-note] {
            --note-top: 40px;
            padding-top: 56px;
            box-shadow: 3px 3px 0 var(--note-shadow);
        }

        .fieldNoteBar { font-size: 11px; }
    }
}

@media print { .fieldNoteBar { display: none; } }



@media screen {
    .studyNavigation { display: flex; gap: 8px; margin: 0 0 14px; }
    .studyNavigation:has([data-study-top]) { justify-content: space-between; margin-top: 20px; }
    .studyNavigation button, #taskPreview header button {
        min-height: 42px;
        padding: 8px 12px;
        background: var(--workspace-card);
        border: 1px solid var(--note-ink);
        color: var(--text-main);
        cursor: pointer;
    }
    #taskPreview {
        inset: 0;
        margin: auto;
        width: min(780px, calc(100% - 24px));
        max-height: calc(100dvh - 24px);
        padding: 0;
        border: 1px solid var(--note-ink);
        border-radius: var(--arcade-radius);
        box-shadow: 4px 4px 0 var(--note-shadow);
        background: var(--workspace-card);
        color: var(--text-main);
    }
    #taskPreview::backdrop { background: #160e24aa; }
    #taskPreview header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 16px;
        border-bottom: 1px solid var(--note-ink);
        background: var(--note-bar);
    }
    #taskPreview iframe { display: block; width: 100%; height: min(64dvh, 560px); border: 0; }
    .taskPreviewFull { display: block; padding: 14px 16px; color: var(--text-accent); }
    html[data-theme] body.taskPreviewPage { background: var(--workspace-card); padding: 12px; }
    html[data-theme] body.taskPreviewPage #taskCards > .taskCard { margin: 0 4px 4px 0; }
    html[data-theme][data-interface-font] body :is(.taskText, .solutionText, .theoryContent,
        .taskText *, .solutionText *, .theoryContent *):not(:where(.katex, .katex *, .MathJax, .MathJax *, mjx-container, mjx-container *, svg, svg *)) {
        font-family: system-ui, sans-serif !important;
    }
    html[data-theme] body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), textarea):focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-accent) 25%, transparent), 0 0 18px color-mix(in srgb, var(--text-accent) 22%, transparent);
    }
    @media (max-width: 900px) {
        html[data-theme] body .learningMain { margin: 0 !important; width: 100% !important; max-width: none; min-width: 0; }
        .learningMain :is(.learningPanel, .trainingHome, .trainingCatalogue) { min-width: 0; max-width: 100%; }
    }
}

@media screen {
    #calendarDayDialog {
        inset: 0;
        margin: auto;
        width: min(540px, calc(100% - 24px));
        max-height: calc(100dvh - 24px);
        padding: 16px;
        border: 1px solid var(--note-ink);
        border-radius: var(--arcade-radius);
        background: var(--workspace-card);
        color: var(--text-main);
    }
    #calendarDayDialog::backdrop { background: #160e24aa; }
    #calendarDayDialog header, #calendarDayTasks li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    #calendarDayTasks { list-style: none; }
    #calendarDayTasks li { padding: 12px 0; border-bottom: 1px solid var(--workspace-border); }
    #calendarDayTasks a { color: var(--text-accent); }
    #calendarDayTasks small { flex-shrink: 0; }
    #calendarGrid button.calendarCell { min-width: 0; cursor: pointer; color: var(--text-main); }
}

.boardToolIcon { display: block; margin: auto; pointer-events: none; }
.boardApp #boardMindLink[aria-pressed="true"] { background: var(--arcade-selected); color: var(--text-accent); }

@media screen {
    .studyPlanForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin-top: 16px; }
    .studyPlanForm label { display: grid; gap: 6px; min-width: 0; }
    .studyPlanForm input, .studyPlanForm select { width: 100%; min-width: 0; }
    .studyPlanForm p { grid-column: 1 / -1; color: var(--journal-muted); line-height: 1.5; }
    .studyPlanBlock ul { display: grid; gap: 8px; margin: 12px 0 0; list-style: none; }
    .studyPlanBlock a { color: var(--text-accent); }
    .studyPlanDone { color: var(--button-color); }
}

@media screen {
    html[data-theme] {
        --note-page: color-mix(in srgb, var(--arcade-accent) 7%, var(--workspace-bg));
        --note-bar: color-mix(in srgb, var(--arcade-accent) 11%, var(--workspace-card));
        --note-grid: color-mix(in srgb, var(--arcade-accent) 13%, var(--workspace-card));
        --note-line: color-mix(in srgb, var(--arcade-accent) 24%, var(--workspace-border));
        --note-rose: color-mix(in srgb, var(--arcade-accent) 18%, var(--workspace-card));
    }
    html[data-theme="light"] {
        --note-ink: color-mix(in srgb, var(--arcade-accent) 46%, #655374);
        --note-shadow: color-mix(in srgb, var(--arcade-accent) 32%, #524169);
    }
    html[data-theme] body.journalLanding {
        background: radial-gradient(var(--note-line) .75px, transparent 1px) 8px 8px / 24px 24px, var(--note-page);
    }
    .aboutFieldGuide { display: grid; gap: clamp(20px, 4vw, 40px); margin-top: clamp(32px, 6vw, 64px); }
    .aboutNote { border: 1px solid var(--note-ink); border-radius: var(--arcade-radius); background: var(--note-paper); box-shadow: 4px 4px 0 var(--note-shadow); min-width: 0; }
    .aboutNoteBar { display: flex; justify-content: space-between; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--note-ink); border-radius: 7px 7px 0 0; background: var(--note-bar); color: var(--workspace-title); font-size: 12px; }
    .aboutNoteBody { padding: clamp(16px, 4vw, 34px); }
    .aboutNote h2 { margin: 0 0 14px; line-height: 1.3; font-size: clamp(23px, 4vw, 38px); }
    .aboutNote p { margin-bottom: 14px; color: var(--journal-muted); line-height: 1.65; }
    .aboutRoute { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,185px),1fr)); gap: 10px; list-style: none; }
    .aboutRoute a { display: grid; align-content: start; gap: 8px; min-height: 100%; padding: 13px; border: 1px solid var(--arcade-edge); border-radius: var(--arcade-radius); background: var(--note-bar); color: var(--workspace-title); }
    .aboutRoute a:hover { background: var(--note-rose); }
    .aboutRoute b { color: var(--text-accent); }
    .aboutRoute span { color: var(--journal-muted); font-size: 13px; line-height: 1.5; }
    .aboutProgress { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); align-items: center; gap: 20px; }
    .aboutProgressExample { display: grid; gap: 14px; padding: 15px; background: var(--note-bar); border-radius: var(--arcade-radius); }
    .aboutProgressExample div, .aboutProgressExample dd { display: flex; gap: 10px; align-items: center; min-width: 0; }
    .aboutProgressExample dt { flex: 0 0 42px; }
    .aboutProgressExample dd { flex: 1; font-size: 13px; }
    .aboutProgressExample meter { width: 100%; min-width: 0; }
    .aboutProgressExample meter::-webkit-meter-optimum-value { background: var(--arcade-accent); }
    .aboutProgressExample meter::-moz-meter-bar { background: var(--arcade-accent); }
    .aboutMeet { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px; padding: clamp(16px, 4vw, 34px); background: var(--note-bar); }
    .aboutMeet img { width: clamp(64px, 15vw, 140px); height: auto; }
    .emailLoginChoice { font-size: 13px; line-height: 1.5; }
}

@media screen {
    html[data-theme] body [data-caret-glow]:focus {
        background-image: radial-gradient(ellipse 100px 58px at var(--study-focus-x, 50%) var(--study-focus-y, 50%),
            color-mix(in srgb, var(--text-accent) 58%, transparent) 0%,
            color-mix(in srgb, var(--text-accent) 32%, transparent) 34%, transparent 78%) !important;
    }
    .proGatePage { min-height: 70dvh; }
    #proGate { inset: 0; margin: auto; width: min(590px,calc(100% - 24px)); max-height: calc(100dvh - 24px); border: 1px solid var(--note-ink); border-radius: var(--arcade-radius); background: var(--note-paper); color: var(--text-main); box-shadow: 5px 5px 0 var(--note-shadow); }
    #proGate::backdrop { background: #140c20bf; }
    #proGate header a { color: var(--text-main); font-size: 20px; }
    .proGateBody { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: start; padding: clamp(14px,4vw,28px); }
    .proGateBody img { width: clamp(46px,13vw,86px); height: auto; }
    .proGateBody h1 { font-size: clamp(22px,4vw,36px); line-height: 1.2; margin-bottom: 10px; }
    .proGateBody p, .proGateBody li { line-height: 1.6; color: var(--journal-muted); font-size: 14px; }
    .proGateBody ul { grid-column: 1 / -1; padding-left: 20px; }
    .proGateActions { grid-column: 1 / -1; display: grid; justify-items: start; gap: 12px; font-size: 13px; }
    .proGateActions .journalPrimary { padding: 12px 14px; border-radius: var(--arcade-radius); background: var(--workspace-action); color: var(--workspace-action-text); }
    .proGateActions a:last-child { color: var(--text-accent); }
}

@media screen {
    #taskPreview header button {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        padding: 0;
        font-size: 27px;
        line-height: 1;
        background: var(--workspace-action);
        border-color: var(--workspace-action);
        color: var(--workspace-action-text);
    }

    html[data-theme][data-interface-font] body :is(.taskText, .solutionText, .theoryContent,
        .taskText *, .solutionText *, .theoryContent *):not(:where(.katex, .katex *, .MathJax, .MathJax *, mjx-container, mjx-container *, svg, svg *)) {
        font-family: "Task", "Trebuchet MS", sans-serif !important;
        letter-spacing: normal;
    }

    html[data-theme] body.boardPage .boardApp {
        inset: 0 0 0 var(--workspace-sidebar);
        margin: 0;
        width: auto;
        height: auto;
        min-width: 0;
    }

    html[data-theme] body.boardPage .boardApp:is(.boardExpanded, :fullscreen) { inset: 0; margin: 0; width: 100%; height: 100dvh; }
    body.boardPage :is(#feedbackMascot, #inboxBell, .quickNavTrigger) { display: none; }
    body.boardPage .mobileBar .quickNavTrigger { display: inline-flex; }

    @media (max-width: 900px) {
        html[data-theme] body.boardPage .boardApp { inset: 65px 0 0; padding: 6px; }
        html[data-theme] body.boardPage .boardApp:is(.boardExpanded, :fullscreen) { inset: 0; }
        .studyNavigation:has([data-study-top]) { padding-right: 0; }
        .studyNavigation [data-study-top] { margin-right: auto; }
        html[data-theme] body :is(.statisticsMain, .tasksMain, .profileMain, .userAdmin, .legalPage) {
            min-width: 0;
            max-width: 100%;
        }
        html[data-theme] body :is(.variantsTableWrapper, .editorTableWrap, .table-responsive) {
            max-width: 100%;
            overflow-x: auto;
        }
        html[data-theme] body :is(.variant_table, .adminTable, .editorTable) :is(td, th) {
            min-width: max-content;
            word-break: normal;
            overflow-wrap: normal;
            white-space: nowrap;
        }
        html[data-theme] body :is(.variantScore, .variantTime, .statisticCard strong, .calendarMonthCount) {
            word-break: normal;
            overflow-wrap: normal;
            white-space: nowrap;
        }
    }
}

.taskTopicGuide { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--workspace-border); border-radius: var(--arcade-radius); font-size: 13px; }
.taskTopicGuide summary { cursor: pointer; color: var(--text-accent); }
.taskTopicGuide p { margin: 10px 0; line-height: 1.65; }
.taskTopicGuide a { color: var(--text-accent); }

.studyPlanActions, .studyPlanRemove { display: inline-flex; flex-wrap: wrap; gap: .45rem; }
.studyPlanRemove { margin: .3rem .5rem; }
.studyPlanActions button:disabled { opacity: .45; cursor: default; }