@font-face { font-family: 'NP Serif'; src: url('assets/fonts/np/pt-serif-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'NP Serif'; src: url('assets/fonts/np/pt-serif-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'NP Serif'; src: url('assets/fonts/np/pt-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

html[data-look="np"] {
    --np-paper: #f3efe6; --np-sheet: #f8f5ee; --np-shade: #ebe6db; --np-ink: #141210; --np-ink-2: #4a453e;
    --np-mute: #7a7368; --np-rule: #cfc7b8; --np-rule-2: #b9b09f;
    --np-serif: 'NP Serif', 'PT Serif', Georgia, 'Noto Serif', serif;

    
    --c-bg: var(--np-paper); --c-card: var(--np-sheet); --c-card-2: var(--np-shade);
    --c-border: var(--np-rule); --c-border-2: var(--np-rule-2); --c-border-soft: var(--np-rule);
    --c-text: var(--np-ink); --c-text-soft: var(--np-ink-2); --c-muted: var(--np-mute); --c-muted-2: var(--np-mute);
    --c-brand: var(--np-ink); --c-brand-strong: var(--np-ink); --c-indigo: var(--np-ink);
    
    --c-on-brand: var(--np-paper);
    --e-1: none; --e-2: none;
    
    --pet-bg: var(--np-paper); --pet-card: var(--np-sheet); --pet-soft: var(--np-shade); --pet-line: var(--np-rule);
    --pet-ink: var(--np-ink); --pet-mute: var(--np-mute); --pet-track: var(--np-shade);
}
html[data-look="np"].dark {
    --np-paper: #151412; --np-sheet: #1b1a17; --np-shade: #23211d; --np-ink: #ece6da; --np-ink-2: #c9c1b3;
    --np-mute: #8f877a; --np-rule: #3a362f; --np-rule-2: #4a453c;
    --pet-bg: var(--np-paper); --pet-card: var(--np-sheet); --pet-soft: var(--np-shade); --pet-line: var(--np-rule);
    --pet-ink: var(--np-ink); --pet-mute: var(--np-mute); --pet-track: var(--np-shade);
}

html[data-look="np"] body.skin-classic {
    --a-bg: var(--np-paper); --a-s1: var(--np-sheet); --a-s2: var(--np-paper); --a-s3: var(--np-shade);
    --a-b1: var(--np-ink); --a-b2: var(--np-ink); --a-txt: var(--np-ink); --a-muted: var(--np-mute); --a-border: var(--np-rule);
}
html[data-look="np"] body, html[data-look="np"] body.bg-gray-50 { background: var(--np-paper) !important; color: var(--np-ink) !important; }


.np-mast { display: none; }
html[data-look="np"] .np-mast { display: block; text-align: center; color: var(--np-ink); }
.np-mast-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--np-ink-2); }
.np-mast-name { font-family: var(--np-serif); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.01em; padding: 6px 0 7px; border-bottom: 3px double var(--np-ink); }
@media (min-width: 640px) { .np-mast-name { font-size: 40px; } }


html[data-look="np"] #top-stats-bar { background: var(--np-paper) !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--np-ink) !important; backdrop-filter: none !important; }
html[data-look="np"] #top-stats-bar button, html[data-look="np"] #top-stats-bar .hdr-tap { background: transparent !important; color: var(--np-ink) !important; }
html[data-look="np"] #top-stats-bar .ui-logo, html[data-look="np"] #top-stats-bar .ui-logo * { color: var(--np-ink) !important; }
html[data-look="np"] #stat-learned, html[data-look="np"] #stat-solved, html[data-look="np"] #stat-ege { font-family: var(--np-serif); }
html[data-look="np"] #bottom-nav { background: var(--np-paper) !important; border-top: 1px solid var(--np-ink) !important; box-shadow: none !important; }

html:root[data-look="np"] body.skin-classic #top-stats-bar, html:root[data-look="np"] body.skin-classic #bottom-nav { background: var(--np-paper) !important; box-shadow: none !important; }
html[data-look="np"] #main-header { background: var(--np-paper); }
html[data-look="np"] #bottom-nav button { color: var(--np-ink-2) !important; }
html[data-look="np"] .ui-nav-lb { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }


html[data-look="np"] .td-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 12px 0 14px; border-bottom: 1px solid var(--np-ink); }
html[data-look="np"] .td-card.urgent { border-bottom-color: var(--c-danger); }
html[data-look="np"] .td-kicker { color: var(--np-ink); letter-spacing: .16em; }
html[data-look="np"] .td-norm { color: var(--np-ink); border: 1.5px solid var(--np-ink); padding: 2px 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 0; }
html[data-look="np"] .td-norm.ok { background: var(--np-ink); color: var(--np-paper); }
html[data-look="np"] .td-title { font-family: var(--np-serif); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.015em; margin-top: 10px; }
html[data-look="np"] .td-sub { font-family: var(--np-serif); font-style: italic; font-size: 15px; color: var(--np-ink-2); margin-top: 6px; }
html[data-look="np"] .td-bar { height: 2px; border-radius: 0; background: var(--np-rule); }
html[data-look="np"] .td-bar > span { background: var(--np-ink); border-radius: 0; }
html[data-look="np"] .td-go { background: var(--np-ink); color: var(--np-paper); border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .14em; }
html[data-look="np"] .td-go::after { content: "\00a0\00a0→"; }
html[data-look="np"] .td-chip { border-radius: 0; background: transparent; border-color: var(--np-ink); }
html[data-look="np"] .td-more { gap: 0; border-top: 1px solid var(--np-rule); border-bottom: 1px solid var(--np-rule); margin-top: 14px; }
html[data-look="np"] .td-link, html[data-look="np"] body.skin-classic .td-link[data-action] { background: transparent !important; border: 0 !important; border-radius: 0; padding: 10px 0; color: var(--np-ink); font-family: var(--np-serif); font-weight: 700; font-size: 15px; }
html[data-look="np"] .td-link + .td-link { border-left: 1px solid var(--np-rule) !important; padding-left: 12px; }
html[data-look="np"] .td-link span { font-family: inherit; font-style: italic; font-weight: 400; color: var(--np-mute); }
html[data-look="np"] .td-path { border-top: 0; }
html[data-look="np"] .lp-strip i { border-radius: 0 !important; }
html[data-look="np"] .lp-cap { font-family: var(--np-serif); font-style: italic; }


html[data-look="np"] .la-tabs { border-bottom: 3px double var(--np-ink); }
html[data-look="np"] .la-tab { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--np-mute); }
html[data-look="np"] .la-tab[aria-selected="true"] { color: var(--np-ink); border-bottom-color: var(--np-ink); font-weight: 800; background: transparent; }
html[data-look="np"] #lobby-area .la-grid-3 { gap: 0; }
html[data-look="np"] #lobby-area .card-tile, html[data-look="np"] #lobby-area .card-row, html[data-look="np"] #lobby-area .card-feat {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid var(--np-rule) !important;
}
html[data-look="np"] #lobby-area .card-tile { padding: 12px 6px; }
html[data-look="np"] #lobby-area .la-grid-3 > .card-tile:nth-child(odd) { border-right: 1px solid var(--np-rule) !important; }
@media (min-width: 640px) {
    html[data-look="np"] #lobby-area .la-grid-3 > .card-tile:nth-child(odd) { border-right: 0 !important; }
    html[data-look="np"] #lobby-area .la-grid-3 > .card-tile:not(:nth-child(3n)) { border-right: 1px solid var(--np-rule) !important; }
}
html[data-look="np"] #lobby-area .card-tile:hover, html[data-look="np"] #lobby-area .card-row:hover { transform: none; background: var(--np-sheet) !important; }
html[data-look="np"] #lobby-area .card-tile b, html[data-look="np"] #lobby-area .card-row b { font-family: var(--np-serif); font-weight: 700; font-size: 15px; color: var(--np-ink); letter-spacing: 0; }
html[data-look="np"] #lobby-area .card-tile i, html[data-look="np"] #lobby-area .card-row i { font-family: var(--np-serif); font-style: italic; color: var(--np-mute); font-size: 13px; }
html[data-look="np"] #lobby-area .card-tile .ico, html[data-look="np"] #lobby-area .card-row .ico { color: var(--np-ink) !important; }
html[data-look="np"] #lobby-area .card-tile .ico::before, html[data-look="np"] #lobby-area .card-row .ico::before { background: transparent !important; }
html[data-look="np"] #lobby-area .card-tile .pb > .fill { background: var(--np-ink) !important; }
html[data-look="np"] #lobby-period-chip { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--np-rule) !important; border-radius: 0 !important; font-family: var(--np-serif); font-style: italic; color: var(--np-ink-2) !important; }
html[data-look="np"] #lobby-period-chip b { color: var(--np-ink) !important; font-style: normal; }


html[data-look="np"] .bg-white, html[data-look="np"] .bg-gray-50, html[data-look="np"] .bg-slate-50 { background-color: var(--np-sheet) !important; }
html[data-look="np"] .bg-gray-100, html[data-look="np"] .bg-gray-200, html[data-look="np"] .bg-blue-50, html[data-look="np"] .bg-slate-100 { background-color: var(--np-shade) !important; }
html[data-look="np"] .border-gray-100, html[data-look="np"] .border-gray-200, html[data-look="np"] .border-gray-300, html[data-look="np"] .border-slate-200 { border-color: var(--np-rule) !important; }
html[data-look="np"] .text-gray-800, html[data-look="np"] .text-gray-900, html[data-look="np"] .text-slate-800, html[data-look="np"] .text-gray-700 { color: var(--np-ink) !important; }
html[data-look="np"] .text-gray-600, html[data-look="np"] .text-gray-500 { color: var(--np-ink-2) !important; }
html[data-look="np"] .text-gray-400 { color: var(--np-mute) !important; }
html[data-look="np"] .bg-blue-500, html[data-look="np"] .bg-blue-600, html[data-look="np"] .bg-blue-700, html[data-look="np"] .bg-indigo-500, html[data-look="np"] .bg-indigo-600 { background-color: var(--np-ink) !important; color: var(--np-paper) !important; background-image: none !important; }
html[data-look="np"] .text-blue-500, html[data-look="np"] .text-blue-600, html[data-look="np"] .text-blue-700, html[data-look="np"] .text-blue-800, html[data-look="np"] .text-examBlue { color: var(--np-ink) !important; }
html[data-look="np"] .border-blue-500, html[data-look="np"] .border-blue-700, html[data-look="np"] .border-indigo-700 { border-color: var(--np-ink) !important; }
html[data-look="np"].dark .bg-white, html[data-look="np"].dark .bg-gray-50 { background-color: var(--np-sheet) !important; }
html[data-look="np"].dark .text-gray-800, html[data-look="np"].dark .text-gray-700 { color: var(--np-ink) !important; }
html[data-look="np"] .rounded-xl, html[data-look="np"] .rounded-2xl, html[data-look="np"] .rounded-3xl { border-radius: 8px; }
html[data-look="np"] [class*="shadow-"] { box-shadow: none !important; }


html[data-look="np"] #game-header { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--np-ink) !important; border-radius: 0 !important; backdrop-filter: none !important; }
html[data-look="np"] #game-title-display { font-family: var(--np-serif); text-transform: none; letter-spacing: 0; font-size: 15px; }
html[data-look="np"] #pool-panel { border-color: var(--np-ink) !important; border-radius: 0 !important; }
html[data-look="np"] #check-btn-doubt { background: transparent !important; color: var(--np-ink) !important; border: 1.5px solid var(--np-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-look="np"] #next-btn { background: var(--np-ink) !important; color: var(--np-paper) !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-look="np"] #game-period-chip { background: transparent !important; border: 1px solid var(--np-ink) !important; color: var(--np-ink) !important; border-radius: 0 !important; }
html[data-look="np"] .norm-strip { background: transparent; border: 0; border-bottom: 1px solid var(--np-rule); border-radius: 0; padding: 6px 2px; }
html[data-look="np"] .norm-strip .ns-txt b { font-family: var(--np-serif); }
html[data-look="np"] .norm-strip .ns-bar { height: 2px; border-radius: 0; background: var(--np-rule); }
html[data-look="np"] .norm-strip .ns-bar > span { background: var(--np-ink); border-radius: 0; }
html[data-look="np"] #table-container { background: var(--np-sheet) !important; border: 1px solid var(--np-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-look="np"] #table-container thead tr, html[data-look="np"] #table-head tr { background: transparent !important; }
html[data-look="np"] #table-head th { font-family: var(--np-serif); font-weight: 700; color: var(--np-ink) !important; border-bottom: 2px solid var(--np-ink) !important; background: transparent !important; }
html[data-look="np"] #task-table-body tr { background: transparent !important; border-color: var(--np-rule) !important; }
html[data-look="np"] #task-table-body td { border-color: var(--np-rule) !important; }
html[data-look="np"] #task-table-body td span { font-family: var(--np-serif); color: var(--np-ink) !important; }
html[data-look="np"] #task-table-body td span.font-bold { font-weight: 700; }

html[data-look="np"] #task-table-body td span { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }

html[data-look="np"] .th-ico { display: none; }
html[data-look="np"] .dnd-slot { border-radius: 0; border: 1.5px dashed var(--np-rule-2); background-color: transparent; box-shadow: none; }
html[data-look="np"] .dnd-slot:empty::before { color: var(--np-mute); font-family: var(--np-serif); }
html[data-look="np"] .dnd-slot:hover { background-color: var(--np-shade); border-color: var(--np-ink); }
html[data-look="np"] .dnd-slot.has-item { border: 1.5px solid var(--np-ink); background-color: var(--np-sheet); }
html[data-look="np"] .dnd-chip { border-radius: 0; background-color: var(--np-sheet); border: 1px solid var(--np-ink); color: var(--np-ink); box-shadow: none; font-family: var(--np-serif); font-weight: 700; }
html[data-look="np"] .dnd-chip.selected { background-color: var(--np-ink); color: var(--np-paper); border-color: var(--np-ink); }
html[data-look="np"] .dnd-chip.in-slot { border: 0; background: transparent; }
html[data-look="np"].dark .dnd-chip { background-color: var(--np-sheet); border-color: var(--np-ink-2); color: var(--np-ink); }
html[data-look="np"].dark .dnd-chip.selected { background-color: var(--np-ink); color: var(--np-paper); }
html[data-look="np"] #pool-title { font-family: var(--np-serif); text-transform: none; letter-spacing: 0; font-size: 16px; }
html[data-look="np"] #check-btn-sure { background: var(--np-ink) !important; color: var(--np-paper) !important; border-radius: 0 !important; letter-spacing: .14em; }
html[data-look="np"] #next-btn, html[data-look="np"] #next-btn * { border-radius: 0 !important; }
html[data-look="np"] .pbc { border-radius: 0; border-color: var(--np-ink); background: transparent; }
html[data-look="np"] .pbc-go { background: var(--np-ink); color: var(--np-paper); border-radius: 0; }
html[data-look="np"] .pbc.on > b { color: var(--np-ink); }


html[data-look="np"] .pet-sheet, html[data-look="np"] .lp-sheet { border-radius: 0 !important; }
html[data-look="np"] .pet-name, html[data-look="np"] .lp-head h2, html[data-look="np"] .modal-title, html[data-look="np"] h2.font-black, html[data-look="np"] h3.font-black { font-family: var(--np-serif); letter-spacing: 0; }
html[data-look="np"] .pet-todayc { border-radius: 0; border-color: var(--np-ink); background: transparent; }
html[data-look="np"] .pet-todo { border-radius: 0; background: transparent; }
html[data-look="np"] .pet-todo .petw-bar > span, html[data-look="np"] .pet-todayc button.go { background: var(--np-ink); color: var(--np-paper); border-radius: 0; }


html[data-look="np"] #onboarding-overlay > div { border-radius: 0 !important; border: 1.5px solid var(--np-ink); border-top: 4px double var(--np-ink); }
html[data-look="np"] #onboarding-overlay h2 { font-family: var(--np-serif); font-weight: 700; font-size: 26px; letter-spacing: 0; }
html[data-look="np"] #onboarding-overlay p { font-family: var(--np-serif); font-style: italic; }
html[data-look="np"] #onb-name-input { border-radius: 0 !important; border: 0 !important; border-bottom: 1.5px solid var(--np-ink) !important; background: transparent !important; box-shadow: none !important; font-family: var(--np-serif); font-size: 18px; color: var(--np-ink) !important; }
html[data-look="np"] #onb-start-btn { background: var(--np-ink) !important; color: var(--np-paper) !important; border-radius: 0 !important; box-shadow: none !important; letter-spacing: .14em; }
html[data-look="np"] #onb-has-account { color: var(--np-ink) !important; font-family: var(--np-serif); font-style: italic; text-decoration: underline; }

html[data-look="np"] #hw-composer-overlay > div {
    --c-brand: #141210; --c-brand-strong: #141210; --c-on-brand: #f3efe6;
    color-scheme: light; border-radius: 0 !important; border-top: 4px double #141210;
}


html[data-look="np"] .dm-fab { background: var(--np-ink); color: var(--np-paper); box-shadow: none; border-radius: 0; }


@media (min-width: 1400px) {
    html[data-look="np"] main.no-print, html[data-look="np"] #header-center { max-width: 1480px; }
    html[data-look="np"] #lobby-area { grid-template-columns: 230px minmax(0, 1fr) 330px; gap: 24px 40px; }
    html[data-look="np"] .np-mast-top { font-size: 13px; }
    html[data-look="np"] .np-mast-name { font-size: 60px; padding: 10px 0 12px; }
    html[data-look="np"] .td-kicker, html[data-look="np"] .td-norm { font-size: 13px; }
    html[data-look="np"] .td-title { font-size: 44px; margin-top: 14px; }
    html[data-look="np"] .td-sub { font-size: 19px; }
    html[data-look="np"] .td-go, html[data-look="np"] .td-chip { min-height: 54px; font-size: 15px; padding: 0 30px; }
    html[data-look="np"] .td-link, html[data-look="np"] body.skin-classic .td-link[data-action] { font-size: 19px; padding-top: 14px; padding-bottom: 14px; }
    html[data-look="np"] .td-link span { font-size: 15px; }
    html[data-look="np"] .lp-cap { font-size: 15px; }
    html[data-look="np"] .lp-strip i { height: 8px; }
    html[data-look="np"] .la-tab { font-size: 13px; min-height: 52px; }
    html[data-look="np"] #lobby-period-chip { font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
    html[data-look="np"] #lobby-area .card-tile { min-height: 84px; padding: 18px 12px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
    html[data-look="np"] #lobby-area .card-tile .ico svg { width: 24px; height: 24px; }
    html[data-look="np"] #lobby-area .card-tile b { font-size: 19px; }
    html[data-look="np"] #lobby-area .card-tile i { font-size: 15px; }
    html[data-look="np"] #lobby-side .side-card { background: transparent; border: 0; border-top: 3px double var(--np-ink); border-radius: 0; box-shadow: none; padding: 14px 0 0; }
    html[data-look="np"] #lobby-side h3 { font-size: 13px; letter-spacing: .12em; }
    html[data-look="np"] #lobby-side .side-kpi > div { background: transparent; border: 1px solid var(--np-rule); border-radius: 0; padding: 12px; }
    html[data-look="np"] #lobby-side .side-kpi b { font-family: var(--np-serif); font-size: 30px; }
    html[data-look="np"] #lobby-side .side-kpi i { font-size: 13px; }
    html[data-look="np"] #lobby-side .side-row { margin-bottom: 12px; }
    html[data-look="np"] #lobby-side .side-row .nm { font-family: var(--np-serif); font-size: 16px; flex-basis: 70px; }
    html[data-look="np"] #lobby-side .side-row .pc { font-size: 13px; flex-basis: 42px; }
    html[data-look="np"] #lobby-side .side-row .bar { height: 4px; border-radius: 0; }
    html[data-look="np"] #lobby-side .side-row .bar > span { background: var(--np-ink); border-radius: 0; }
    html[data-look="np"] #top-stats-bar { padding-top: 14px; padding-bottom: 14px; }
    html[data-look="np"] #top-stats-bar .ui-ico { width: 26px; height: 26px; }
    html[data-look="np"] #stat-learned, html[data-look="np"] #stat-solved, html[data-look="np"] #stat-ege { font-size: 24px; }
    
    html[data-look="np"] body.in-game #game-container { width: min(1280px, calc(100vw - 96px)); padding: 22px; border-color: var(--np-ink); border-radius: 0; }
    html[data-look="np"] #game-title-display { font-size: 20px; }
    html[data-look="np"] #table-head th { font-size: 17px; padding-top: 14px; padding-bottom: 14px; }
    html[data-look="np"] #task-table-body td span { font-size: 17px !important; line-height: 1.4; }
    html[data-look="np"] .dnd-slot { min-height: 52px; }
    html[data-look="np"] .dnd-chip { font-size: 16px; padding: 8px 12px; }
    html[data-look="np"] #pool-title { font-size: 20px; }
    html[data-look="np"] .norm-strip .ns-txt { font-size: 13px; }
}
@media (min-width: 1800px) {
    html[data-look="np"] main.no-print, html[data-look="np"] #header-center { max-width: 1640px; }
    html[data-look="np"] #lobby-area { grid-template-columns: 250px minmax(0, 1fr) 360px; gap: 28px 48px; }
    html[data-look="np"] .np-mast-name { font-size: 72px; }
    html[data-look="np"] .td-title { font-size: 52px; }
    html[data-look="np"] .td-sub { font-size: 21px; }
    html[data-look="np"] #lobby-area .card-tile b { font-size: 21px; }
    html[data-look="np"] #lobby-area .card-tile i { font-size: 16px; }
    html[data-look="np"] #task-table-body td span { font-size: 18px !important; }
    html[data-look="np"] .dnd-chip { font-size: 17px; }
}


html:root[data-look="np"] {
    --np-red: #a3261b; --np-ok: #2d6a36; --np-ok-tint: #e2ebdb; --np-bad-tint: #f3dfd9;
    --np-hatch: repeating-linear-gradient(-45deg, var(--np-red) 0 3px, transparent 3px 5px);

    --dm-me: var(--np-ink); --dm-me-fill: var(--np-ink);
    --dm-opp: var(--np-red); --dm-opp-fill: var(--np-hatch);
    --dm-track: var(--np-shade); --dm-ok: var(--np-ok); --dm-bad: var(--np-red);
    --dm-win: var(--np-ok); --dm-lose: var(--np-red); --dm-neutral: var(--np-mute); --dm-accent: var(--np-ink);
    --dm-sel: var(--np-ink); --dm-sel-ring: none;
    --dm-bar: var(--np-ink); --dm-bar-ink: var(--np-paper); --dm-bar-btn: transparent; --dm-bar-btn-ink: var(--np-paper);

    
    --sw-bg: var(--np-paper); --sw-ink: var(--np-ink); --sw-mute: var(--np-mute); --sw-link: var(--np-ink);
    --sw-btn: transparent; --sw-btn-line: 1.5px solid var(--np-ink); --sw-btn-ink: var(--np-ink);
    --sw-main: var(--np-ink); --sw-main-ink: var(--np-paper); --sw-main-line: 1.5px solid var(--np-ink);
    --sw-score: var(--np-ink); --sw-timer: var(--np-red);
    --sw-card: var(--np-sheet); --sw-card-line: 2px solid var(--np-ink); --sw-card-shadow: none; --sw-card-ink: var(--np-ink);
    --sw-left: var(--np-ink); --sw-left-ink: var(--np-ink); --sw-left-tint: transparent; --sw-left-line: var(--np-ink);
    --sw-right: var(--np-red); --sw-right-ink: var(--np-red); --sw-right-tint: transparent; --sw-right-line: var(--np-red);
    --sw-sheet: var(--np-sheet); --sw-sheet-line: var(--np-rule); --sw-item: transparent; --sw-item-on: var(--np-shade); --sw-item-line-on: var(--np-ink);

    
    --om-e1: #e2dbcb; --om-e2: #d3c9b4; --om-e3: #e2dbcb; --om-e4: #d3c9b4;
    --om-d1: var(--np-ink); --om-d2: var(--np-ink); --om-d3: var(--np-ink); --om-d4: var(--np-ink);
}
html:root[data-look="np"].dark {
    --np-red: #e2806f; --np-ok: #8cc38e; --np-ok-tint: #1f2c1d; --np-bad-tint: #36201b;
    --om-e1: #2b2823; --om-e2: #37332c; --om-e3: #2b2823; --om-e4: #37332c;
}


html:root[data-look="np"] #swipe-overlay [style*="border-radius"],
html:root[data-look="np"] #duel-search-bar, html:root[data-look="np"] #duel-search-bar button { border-radius: 0 !important; }
html:root[data-look="np"] #swipe-overlay, html:root[data-look="np"] #match-overlay, html:root[data-look="np"] #order-overlay,
html:root[data-look="np"] #tetris-overlay, html:root[data-look="np"] .tl-root, html:root[data-look="np"] .dp-wrap,
html:root[data-look="np"] #om-end, html:root[data-look="np"] #dt-end, html:root[data-look="np"] #mm-duel-end, html:root[data-look="np"] #mm-solo-end {
    --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --e-1: none; --e-2: none; --e-3: none;
}


html:root[data-look="np"] #duel-search-bar { border: 1.5px solid var(--np-ink); box-shadow: none !important; font-family: var(--np-serif); }
html:root[data-look="np"] #duel-search-bar-cancel { border: 1px solid var(--np-paper) !important; text-transform: uppercase; letter-spacing: .08em; }
html:root[data-look="np"] #duel-search-modal > div { border-radius: 0 !important; border: 1.5px solid var(--np-ink); }
html:root[data-look="np"] #duel-search-status { font-family: var(--np-serif); letter-spacing: .04em; }
html:root[data-look="np"] #duel-my-elo { color: var(--np-ink) !important; font-family: var(--np-serif); font-style: italic; }


html:root[data-look="np"] #duel-header {
    background: var(--np-sheet) !important; color: var(--np-ink) !important; border: 0 !important; border-radius: 0 !important;
    border-top: 3px double var(--np-ink) !important; border-bottom: 1px solid var(--np-ink) !important; box-shadow: none !important;
}
html:root[data-look="np"] #duel-header .text-white, html:root[data-look="np"] #duel-header #duel-timer { color: var(--np-ink) !important; filter: none; }
html:root[data-look="np"] #duel-my-score, html:root[data-look="np"] #duel-opp-score, html:root[data-look="np"] #duel-timer { font-family: var(--np-serif); text-shadow: none; }
html:root[data-look="np"] #duel-opp-name, html:root[data-look="np"] #duel-opp-score { color: var(--np-red) !important; }
html:root[data-look="np"] #duel-my-combo, html:root[data-look="np"] #duel-opp-combo { background: transparent !important; color: var(--np-ink-2) !important; border: 1px solid var(--np-rule-2); border-radius: 0 !important; }


html:root[data-look="np"] .dp-sheet { border-top: 3px double var(--np-ink); }
html:root[data-look="np"] .dp-head h3 { font-family: var(--np-serif); font-weight: 700; font-size: 24px; }
html:root[data-look="np"] .dp-sub { font-family: var(--np-serif); font-style: italic; }
html:root[data-look="np"] .dp-cap { color: var(--np-ink); letter-spacing: .14em; border-bottom: 1px solid var(--np-ink); padding-bottom: 6px; }
html:root[data-look="np"] .dp-x { border-radius: 0; background: transparent; border: 1px solid var(--np-ink); color: var(--np-ink); }
html:root[data-look="np"] .dp-any, html:root[data-look="np"] .dp-mode { background: transparent; border-color: var(--np-rule-2); }
html:root[data-look="np"] .dp-mode:hover { border-color: var(--np-ink); background: var(--np-sheet); }
html:root[data-look="np"] .dp-any { background: var(--np-ink); border-color: var(--np-ink); color: var(--np-paper); }
html:root[data-look="np"] .dp-any .dp-ico { background: transparent; color: var(--np-paper); }
html:root[data-look="np"] .dp-mode .dp-ico { background: transparent; color: var(--np-ink); }
html:root[data-look="np"] .dp-any b, html:root[data-look="np"] .dp-mode b { font-family: var(--np-serif); font-weight: 700; font-size: 15px; }
html:root[data-look="np"] .dp-any i, html:root[data-look="np"] .dp-mode i, html:root[data-look="np"] .dp-any small, html:root[data-look="np"] .dp-mode small { font-family: var(--np-serif); font-style: italic; }


html:root[data-look="np"] #sw-card > div:last-child { font-family: var(--np-serif) !important; font-weight: 700 !important; }
html:root[data-look="np"] #sw-stamp-left, html:root[data-look="np"] #sw-stamp-right { font-family: var(--np-serif); letter-spacing: .12em !important; border-style: double !important; border-width: 4px !important; }
html:root[data-look="np"] #sw-panels button > div:nth-child(2) { font-family: var(--np-serif); font-weight: 700 !important; }

@media (min-width: 700px) {
    html:root[data-look="np"] #swipe-overlay .sw-col { border-radius: 0; border: 1.5px solid var(--np-ink); border-top: 4px double var(--np-ink); box-shadow: none; }
}

html:root[data-look="np"] #sw-panels button { border-width: 1.5px !important; box-shadow: none !important; }
html:root[data-look="np"] #sw-arena #sw-verdict { font-family: var(--np-serif); font-style: italic; }
html:root[data-look="np"] #swipe-overlay #sw-score, html:root[data-look="np"] #swipe-overlay #sw-timer { font-family: var(--np-serif); font-size: 15px; }


html:root[data-look="np"] #match-overlay .mm-card {
    border: 1.5px solid var(--np-ink) !important; border-radius: 0 !important; background: var(--np-sheet) !important;
    color: var(--np-ink) !important; font-family: var(--np-serif);
}
html:root[data-look="np"] #match-overlay .mm-card.mm-sel { background: var(--np-ink) !important; color: var(--np-paper) !important; }
html:root[data-look="np"] #match-overlay .text-rose-500 { color: var(--np-red) !important; }
html:root[data-look="np"] #mm-timer { font-family: var(--np-serif); }
html:root[data-look="np"] #mm-exit { border-radius: 0 !important; border-color: var(--np-ink) !important; background: transparent !important; color: var(--np-ink) !important; }
html:root[data-look="np"] #mm-duel-end > div, html:root[data-look="np"] #mm-solo-end > div { border-radius: 0 !important; border: 1.5px solid var(--np-ink); border-top: 4px double var(--np-ink); }
html:root[data-look="np"] #mm-duel-end button, html:root[data-look="np"] #mm-solo-end button { border-radius: 0 !important; }
html:root[data-look="np"] #mm-d-exit, html:root[data-look="np"] #mm-close { background: transparent !important; border: 1.5px solid var(--np-ink) !important; color: var(--np-ink) !important; }
html:root[data-look="np"] #mm-d-top { color: var(--np-ink) !important; font-family: var(--np-serif); font-style: italic; }
html:root[data-look="np"] #mm-duel-end .tabular-nums, html:root[data-look="np"] #mm-solo-end .tabular-nums { font-family: var(--np-serif); }


html:root[data-look="np"] #order-overlay, html:root[data-look="np"] #order-overlay.om-onfire { background: var(--np-paper); color: var(--np-ink); }
html:root[data-look="np"] .om-kicker, html:root[data-look="np"] .om-rec, html:root[data-look="np"] .om-line-cap, html:root[data-look="np"] .om-tickmark { color: var(--np-mute); }
html:root[data-look="np"] .om-sub, html:root[data-look="np"] .om-num { color: var(--np-ink-2); }
html:root[data-look="np"] .om-sub b { color: var(--np-ink); }
html:root[data-look="np"] .om-ask b { color: var(--np-red); }
html:root[data-look="np"] .om-timer { color: var(--np-red); font-family: var(--np-serif); }
html:root[data-look="np"] .om-btn { background: transparent; color: var(--np-ink); border: 1.5px solid var(--np-ink); }
html:root[data-look="np"] .om-me { color: var(--np-ink); } html:root[data-look="np"] .om-op { color: var(--np-red); }
html:root[data-look="np"] .om-track { background: var(--np-shade); border-radius: 0; }
html:root[data-look="np"] .om-fill { border-radius: 0; } html:root[data-look="np"] .om-fill-me { background: var(--np-ink); } html:root[data-look="np"] .om-fill-op { background: var(--np-hatch); }

html:root[data-look="np"] .om-ask {
    font-family: var(--np-serif); font-size: 20px; font-weight: 700; line-height: 1.25;
    border-top: 1px solid var(--np-ink); border-bottom: 3px double var(--np-ink); padding: 8px 4px 9px; margin: 10px 0 8px;
}
html:root[data-look="np"] .om-ask b { font-style: italic; }
html:root[data-look="np"] .om-badge { border-radius: 0; background: transparent !important; border: 1px solid currentColor; font-family: var(--np-serif); letter-spacing: .04em; animation: none; }
html:root[data-look="np"] .om-badge-photo { color: var(--np-red) !important; } html:root[data-look="np"] .om-badge-trio { color: var(--np-ink) !important; }
html:root[data-look="np"] .om-card {
    background: var(--np-sheet); color: var(--np-ink); border: 1px solid var(--np-ink); border-bottom-width: 1px; box-shadow: none;
    padding: 34px 16px 18px; font-family: var(--np-serif); font-weight: 700; font-size: 19px; line-height: 1.28;
    rotate: -.7deg; 
}
html:root[data-look="np"] .om-card[data-i="1"] { rotate: .6deg; }
html:root[data-look="np"] .om-card[data-i="2"] { rotate: -.3deg; }
html:root[data-look="np"] .om-card:active { rotate: 0deg; border-bottom-width: 1px; }
html:root[data-look="np"] .om-card::before {
    content: 'Заметка I'; position: absolute; top: 9px; left: 12px; right: 12px; padding-bottom: 5px;
    border-bottom: 1px solid var(--np-rule-2); text-align: left;
    font-family: var(--np-serif); font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--np-mute);
}
html:root[data-look="np"] .om-card[data-i="1"]::before { content: 'Заметка II'; }
html:root[data-look="np"] .om-card[data-i="2"]::before { content: 'Заметка III'; }
html:root[data-look="np"] .om-card::after { content: 'год ?'; position: absolute; top: 7px; right: 12px; font-family: var(--np-serif); font-style: italic; font-size: 12px; color: var(--np-mute); }
html:root[data-look="np"] .om-card.om-revealed::after { content: none; }
html:root[data-look="np"] .om-card.om-long { font-size: 15.5px; }
html:root[data-look="np"] .om-stage-trio .om-card { padding: 30px 12px 12px; font-size: 15.5px; }

html:root[data-look="np"] .om-year {
    position: absolute; top: 3px; right: 8px; z-index: 1; max-height: none;
    padding: 1px 8px; border: 3px double currentColor; background: var(--np-sheet);
    font-family: var(--np-serif); font-size: 20px; font-weight: 700; line-height: 1.15;
    transform: rotate(-7deg); opacity: 0;
}
html:root[data-look="np"] .om-year.om-year-long { font-size: 15px; }
html:root[data-look="np"] .om-revealed .om-year { max-height: none; opacity: 1; animation: npStamp .32s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes npStamp { from { opacity: 0; transform: rotate(-7deg) scale(1.9); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }
html:root[data-look="np"] .om-right { border-color: var(--np-ok) !important; background: var(--np-ok-tint) !important; }
html:root[data-look="np"] .om-right .om-year { color: var(--np-ok); background: var(--np-ok-tint); }
html:root[data-look="np"] .om-wrong { border-color: var(--np-red) !important; background: var(--np-bad-tint) !important; }
html:root[data-look="np"] .om-wrong .om-year { color: var(--np-red); background: var(--np-bad-tint); }
html:root[data-look="np"] .om-picked { border-color: var(--np-ink); border-width: 2px; }
html:root[data-look="np"] .om-num-badge { top: auto; bottom: 8px; left: 10px; border-radius: 0; background: var(--np-ink); color: var(--np-paper); font-family: var(--np-serif); }
html:root[data-look="np"] .om-shown:not(.om-picked):not(.om-wrong) .om-num-badge { background: var(--np-ok); }

html:root[data-look="np"] .om-vs { border-radius: 0; background: var(--np-paper); border: 1px solid var(--np-ink); padding: 3px 12px; animation: none; }
html:root[data-look="np"] .om-vs:not(.om-vs-gap) { font-size: 0; }
html:root[data-look="np"] .om-vs:not(.om-vs-gap)::after { content: 'или'; font-family: var(--np-serif); font-style: italic; font-weight: 700; font-size: 16px; color: var(--np-ink); }
html:root[data-look="np"] .om-vs-gap { color: var(--np-ink); font-family: var(--np-serif); font-size: 14px; }
html:root[data-look="np"] .om-float { color: var(--np-ink); font-family: var(--np-serif); }
html:root[data-look="np"] .om-msg { color: var(--np-ink-2); font-family: var(--np-serif); }

html:root[data-look="np"] #order-overlay.om-onfire { box-shadow: inset 0 5px 0 var(--np-red); }
html:root[data-look="np"] .om-streak.om-hot { color: var(--np-red); }

html:root[data-look="np"] .om-line { height: 16px; border-radius: 0; border: 1px solid var(--np-ink); }
html:root[data-look="np"] .om-tickmark { font-family: var(--np-serif); font-style: italic; }
html:root[data-look="np"] .om-dot { border-color: var(--np-paper); border-radius: 0; box-shadow: none; }
@media (min-width: 640px) {
    html:root[data-look="np"] .om-stage-pair .om-card { font-size: 22px; padding: 42px 24px 26px; }
    html:root[data-look="np"] .om-ask { font-size: 24px; }
}


html:root[data-look="np"] #tetris-overlay { background: var(--np-paper); color: var(--np-ink); }
html:root[data-look="np"] .dt-kicker, html:root[data-look="np"] .dt-hint, html:root[data-look="np"] .dt-atk, html:root[data-look="np"] .dt-tut-n, html:root[data-look="np"] .dt-mis-cap { color: var(--np-mute); }
html:root[data-look="np"] .dt-sub, html:root[data-look="np"] .dt-opp-score { color: var(--np-ink-2); }
html:root[data-look="np"] .dt-sub b, html:root[data-look="np"] .dt-tut-t b, html:root[data-look="np"] .dt-mis-y { color: var(--np-ink); }
html:root[data-look="np"] .dt-timer { color: var(--np-red); font-family: var(--np-serif); }
html:root[data-look="np"] .dt-btn { background: transparent; color: var(--np-ink); border: 1.5px solid var(--np-ink); }
html:root[data-look="np"] .dt-opp-name, html:root[data-look="np"] .dt-opp-ammo { color: var(--np-red); }
html:root[data-look="np"] .dt-mini { border-color: var(--np-rule-2); } html:root[data-look="np"] .dt-mini i { background: var(--np-red); border-radius: 0; }
html:root[data-look="np"] .dt-charge i { background: var(--np-shade); border-radius: 0; } html:root[data-look="np"] .dt-charge i.dt-on { background: var(--np-ink); }
html:root[data-look="np"] .dt-field { background: var(--np-sheet); border: 1.5px solid var(--np-ink); }
html:root[data-look="np"] .dt-field.dt-field-danger { border-color: var(--np-red); animation: none; }
html:root[data-look="np"] .dt-cols i { border-right-color: var(--np-rule); }
html:root[data-look="np"] .dt-lane { background: color-mix(in srgb, var(--np-ink) 6%, transparent); }
html:root[data-look="np"] .dt-block { background: var(--np-ink); color: var(--np-paper); border-bottom: 4px solid var(--np-ink-2); font-family: var(--np-serif); }
html:root[data-look="np"] .dt-block.dt-burn { background: var(--np-ok); border-bottom-color: var(--np-ok); }
html:root[data-look="np"] .dt-brick { background: var(--np-shade); color: var(--np-ink-2); border-bottom-color: var(--np-rule-2); font-family: var(--np-serif); }
html:root[data-look="np"] .dt-brick.dt-junk { background: var(--np-ink-2); color: var(--np-paper); border-bottom-color: var(--np-ink); }
html:root[data-look="np"] .dt-brick.dt-danger { background: var(--np-bad-tint); color: var(--np-red); border-bottom-color: var(--np-red); }
html:root[data-look="np"] .dt-threat { background: var(--np-bad-tint); color: var(--np-red); border-color: var(--np-red); }
html:root[data-look="np"] .dt-threat i { background: var(--np-red); }
html:root[data-look="np"] .dt-toast-ok { color: var(--np-ok); } html:root[data-look="np"] .dt-toast-bad { color: var(--np-red); }
html:root[data-look="np"] .dt-toast { font-family: var(--np-serif); }
html:root[data-look="np"] .dt-cup { background: var(--np-sheet); color: var(--np-ink); border: 1.5px solid var(--np-ink); border-bottom-width: 5px; font-family: var(--np-serif); font-weight: 700; }
html:root[data-look="np"] .dt-cup-ok, html:root[data-look="np"] .dt-cup-hint { background: var(--np-ok-tint) !important; border-color: var(--np-ok) !important; color: var(--np-ok) !important; }
html:root[data-look="np"] .dt-cup-bad { background: var(--np-bad-tint) !important; border-color: var(--np-red) !important; color: var(--np-red) !important; }
html:root[data-look="np"] .dt-cup-float { color: var(--np-ok); }
html:root[data-look="np"] .dt-key { background: transparent; border: 1.5px solid var(--np-ink); border-bottom-width: 5px; color: var(--np-ink); }
html:root[data-look="np"] .dt-key-main { background: var(--np-ink); border-color: var(--np-ink); color: var(--np-paper); }
html:root[data-look="np"] .dt-fire { background: var(--np-red) !important; border-color: var(--np-red) !important; color: var(--np-paper) !important; }
html:root[data-look="np"] .dt-coach { background: var(--np-ink); color: var(--np-paper); }
html:root[data-look="np"] .dt-tut-card { background: var(--np-sheet); color: var(--np-ink); border: 1.5px solid var(--np-ink); border-top: 4px double var(--np-ink); }
html:root[data-look="np"] .dt-tut-btn { background: var(--np-ink); color: var(--np-paper); }
html:root[data-look="np"] .dt-spot { outline-color: var(--np-red); animation: none; }


html:root[data-look="np"] .om-end-card, html:root[data-look="np"] .dt-end-card { background: var(--np-sheet); color: var(--np-ink); border: 1.5px solid var(--np-ink); border-top: 4px double var(--np-ink); }
html:root[data-look="np"] .om-end-title, html:root[data-look="np"] .dt-end-title { font-family: var(--np-serif); letter-spacing: .08em; }
html:root[data-look="np"] .om-end-score, html:root[data-look="np"] .dt-end-score { font-family: var(--np-serif); font-weight: 700; }
html:root[data-look="np"] .om-end-sub, html:root[data-look="np"] .dt-end-sub, html:root[data-look="np"] .dt-mis-got { color: var(--np-mute); font-family: var(--np-serif); font-style: italic; }
html:root[data-look="np"] .om-mis, html:root[data-look="np"] .dt-mis { background: transparent; border-top: 1px solid var(--np-ink); border-bottom: 1px solid var(--np-ink); }
html:root[data-look="np"] .om-mis-y { color: var(--np-ink); font-family: var(--np-serif); }
html:root[data-look="np"] .om-mis-cap { color: var(--np-mute); }
html:root[data-look="np"] .om-big, html:root[data-look="np"] .dt-big { background: transparent; color: var(--np-ink); border: 1.5px solid var(--np-ink); }
html:root[data-look="np"] .om-big-main, html:root[data-look="np"] .dt-big-main { background: var(--np-ink) !important; color: var(--np-paper) !important; }
html:root[data-look="np"] .om-link, html:root[data-look="np"] .dt-link { color: var(--np-ink); font-family: var(--np-serif); font-style: italic; }


html:root[data-look="np"] .tl-root, html:root[data-look="np"] .tl-banner, html:root[data-look="np"] .tl-flash {
    --tl-me: var(--np-ink); --tl-op: var(--np-red); --tl-ok: var(--np-ok); --tl-bad: var(--np-red); --tl-axis: var(--np-ink);
}

html:root[data-look="np"] .tl-btn.is-primary, html:root[data-look="np"] .tl-chip.is-on, html:root[data-look="np"] .tl-flash.ok,
html:root[data-look="np"] .tl-flash.bad, html:root[data-look="np"] .tl-flash.op, html:root[data-look="np"] .tl-banner .tl-call { color: var(--np-paper); }
html:root[data-look="np"] .tl-head { background: var(--np-paper); border-bottom: 3px double var(--np-ink); }
html:root[data-look="np"] .tl-head h2 { font-family: var(--np-serif); font-weight: 700; font-size: 20px; }
html:root[data-look="np"] .tl-head .tl-sub { font-family: var(--np-serif); font-style: italic; }
html:root[data-look="np"] .tl-overline { color: var(--np-ink); letter-spacing: .14em; border-bottom: 1px solid var(--np-ink); padding-bottom: 5px; }
html:root[data-look="np"] .tl-card { background: transparent; border-color: var(--np-ink); }
html:root[data-look="np"] .tl-btn { border-color: var(--np-ink); background: transparent; }
html:root[data-look="np"] .tl-btn.is-primary { background: var(--np-ink); }
html:root[data-look="np"] .tl-chip, html:root[data-look="np"] .tl-delta, html:root[data-look="np"] .tl-flash,
html:root[data-look="np"] .tl-banner .tl-call, html:root[data-look="np"] .tl-banner .tl-x { border-radius: 0; }
html:root[data-look="np"] .tl-chip { border-color: var(--np-ink); background: transparent; }
html:root[data-look="np"] .tl-chip.is-on { background: var(--np-ink); }
html:root[data-look="np"] .tl-mini > * { background: transparent; border-width: 1.5px; }
html:root[data-look="np"] .tl-mini b, html:root[data-look="np"] .tl-year, html:root[data-look="np"] .tl-vs b, html:root[data-look="np"] .tl-clock text { font-family: var(--np-serif); }
html:root[data-look="np"] .tl-item .tl-ev, html:root[data-look="np"] .tl-hcard { font-family: var(--np-serif); background: var(--np-sheet); }
html:root[data-look="np"] .tl-hcard { border-color: var(--np-ink); }
html:root[data-look="np"] .tl-hcard.is-on { background: var(--np-ink); color: var(--np-paper); }
html:root[data-look="np"] .tl-hcard.is-on .tl-q { color: var(--np-paper); }
html:root[data-look="np"] .tl-banner { background: var(--np-sheet); border: 1.5px solid var(--np-ink); border-left: 5px solid var(--np-red); }
html:root[data-look="np"] .tl-link { color: var(--np-ink); text-decoration: underline; font-family: var(--np-serif); font-style: italic; }