html[data-theme="dark"] {
color-scheme: dark;
--paper: #0f1112; --card: #1d2023; --card-2: #25282b; --card-3: #2e3135;
--ink: #f1f2f2; --ink-2: #c9cbcd; --ink-3: #a0a3a7; --line: #3a3d41;
--night: #1d2023; --night-2: #2a2d31;
--grain: var(--grain-dark);
}
html[data-theme="dark"] :is(.dash-card--lime, .dash-todo, .dash-gift, .dash-pill, .btn-paper, .sanc-tabs .is-on, .dash-unread) { --ink: #16181a; --ink-2: #414448; --ink-3: #414448; }
html[data-theme="dark"] .dash-card--paper { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
html[data-theme="dark"] .dash-card--night { background-color: #181b1d; box-shadow: inset 0 0 0 1px #2a2d31; }
html[data-theme="dark"] .btn-ink { background: #f1f2f2; color: #16181a; }
html[data-theme="dark"] .dash-book-list[data-dash-book-ready] li { background: #0f1112; box-shadow: inset 0 0 0 1.5px var(--lime); }
html[data-theme="dark"] .dash-book-panel { border-color: var(--line); }
html[data-theme="dark"] .dash-book-list li { border-top-color: var(--line); }
html[data-theme="dark"] .dash-book-list small, html[data-theme="dark"] .dash-book-lock { color: var(--ink-3); }
html[data-theme="dark"] .chat-msg { background: var(--card-2); color: var(--ink); }
html[data-theme="dark"] .chat-msg.from { background: #181b1d; box-shadow: inset 3px 0 0 var(--lime), inset 0 0 0 1px var(--line); color: var(--on-night); }
html[data-theme="dark"] .chat-write textarea { background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .chat-write textarea:focus { border-color: var(--lime); }
html[data-theme="dark"] .release-error { color: #ff9f9f; }
html[data-theme="dark"] .delivered-answer { border-top-color: var(--line); }
@media print {
html[data-theme="dark"] { color-scheme: light; --paper: #f5f6f6; --card: #eaebec; --card-2: #e0e1e2; --card-3: #d4d6d7; --ink: #16181a; --ink-2: #414448; --ink-3: #666a70; --line: #babcbe; --night: #16181a; --night-2: #25272a; --grain: none; }
}
html[data-theme="dark"] :is(.member-plan, .next-card, .mod-dialog, .define-card, .release-form input[type="text"]) { background-color: var(--card); }
html[data-theme="dark"] .mod-dialog { box-shadow: 10px 10px 0 var(--lime); }
html[data-theme="dark"] .lib-buy { color: #16181a; }
html[data-theme="dark"] :is(.art-aura-img, .art-record img) { background: none; border-radius: 0; box-shadow: none; }
html[data-theme="dark"] :is(.hero-col, .gridpaper, .book-pop-panel, .vault-soon, .dash-order-wait, .toast) { background-color: var(--card); }
html[data-theme="dark"] .gridpaper { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); }
html[data-theme="dark"] .tile-aura { background-color: var(--card-2); }
html[data-theme="dark"] .tile-quote, html[data-theme="dark"] .review-tone-1 { background-color: var(--card-2); --ink-2: var(--ink-2); --ink-3: #a0a3a7; }
html[data-theme="dark"] .review-tone-2 { background-color: var(--card-3); --ink-3: #a0a3a7; }
html[data-theme="dark"] .tile-start { background-color: #3a3d41; --ink-2: #e4e5e6; --ink-3: #c9cbcd; }
html[data-theme="dark"] :is(.chat-write textarea, [data-welcome-ask] input) { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .vault-soon { border-color: var(--line); }
html[data-theme="dark"] .pod-cover.is-live { background: #f5f6f6; }
.theme-pick { --s: 34px; --at: 0; position: relative; width: 40px; height: 40px; flex: none; }
.theme-pick-row {
position: absolute; top: 0; right: 0; z-index: 5; display: flex; justify-content: flex-end; height: 40px; width: 40px; padding: 2px; box-sizing: border-box;
overflow: hidden; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper);
transition: width .42s cubic-bezier(.32, .72, 0, 1), box-shadow .3s;
}
.theme-pick-row > button {
flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--ink); cursor: pointer;
transform: translateX(calc((2 - var(--at)) * var(--s)));
transition: transform .42s cubic-bezier(.32, .72, 0, 1), background .25s, color .25s, opacity .25s;
}
.theme-pick-row > button[aria-pressed="false"] { opacity: 0; }
.theme-pick-row > button[aria-pressed="true"] { background: var(--lime); color: #16181a; }
.theme-pick svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.theme-pick .ti-spark { transform-origin: 18.5px 7px; transition: transform .45s var(--ease), opacity .3s; }
.theme-pick.is-open .theme-pick-row, .theme-pick:has(:focus-visible) .theme-pick-row { width: calc(3 * var(--s) + 6px); box-shadow: 4px 4px 0 var(--ink); }
.theme-pick.is-open .theme-pick-row > button, .theme-pick:has(:focus-visible) .theme-pick-row > button { transform: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.theme-pick:hover .theme-pick-row { width: calc(3 * var(--s) + 6px); box-shadow: 4px 4px 0 var(--ink); }
.theme-pick:hover .theme-pick-row > button { transform: none; opacity: 1; }
.theme-pick-row > button[aria-pressed="false"]:hover { background: var(--card-3, rgba(22, 24, 26, .08)); }
.theme-pick-row > button:hover .ti-auto { transform: translateY(-1.5px) scale(1.06); }
.theme-pick-row > button:hover .ti-light { transform: rotate(45deg) scale(1.08); }
.theme-pick-row > button:hover .ti-dark { transform: rotate(-14deg) scale(1.05); }
.theme-pick-row > button:hover .ti-spark { transform: scale(1.25); }
}
.theme-pick-row > button.is-pop svg { animation: theme-pop .45s var(--ease); }
@keyframes theme-pop { 0% { transform: scale(.7) rotate(-20deg); } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }
.theme-pick-row > button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
html[data-theme="dark"] .theme-pick-row > button[aria-pressed="true"] { background: var(--lime); color: #16181a; }
@media (prefers-reduced-motion: reduce) { .theme-pick-row, .theme-pick-row > button, .theme-pick svg, .theme-pick .ti-spark { transition: none; } .theme-pick-row > button.is-pop svg { animation: none; } }
.theme-pick--open { --s: 46px; width: calc(3 * var(--s) + 6px); height: calc(var(--s) + 6px); }
.theme-pick--open .theme-pick-row { position: relative; width: 100%; height: 100%; box-shadow: 4px 4px 0 var(--ink); transition: none; }
.theme-pick--open .theme-pick-row > button { transform: none; opacity: 1; }
.theme-pick--open svg { width: 22px; height: 22px; }
html[data-theme="dark"] .sale-faq { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: background-color .25s, box-shadow .25s; }
html[data-theme="dark"] .sale-faq[open] { background: var(--card-2); box-shadow: inset 3px 0 0 var(--lime), inset 0 1px 0 rgba(255, 255, 255, .06); }
html[data-theme="dark"] .sale-faqs { border-bottom-color: var(--line); }
html[data-theme="dark"] .sale-faq summary { color: var(--ink); }
html[data-theme="dark"] .sale-faq p { color: var(--ink-2); }
html[data-theme="dark"] .sale-plus { color: var(--ink); border-color: var(--ink-3); }
@media (hover: hover) { html[data-theme="dark"] .sale-faq:not([open]) summary:hover .sale-plus { background-color: var(--card-3); } }
html[data-theme="dark"] .sale-step-n { color: #16181a; }
html[data-theme="dark"] { --canvas: var(--grain-dark); }
html[data-theme="dark"] .define-card { background-color: #2a2d31; color: #f1f2f2; box-shadow: inset 0 0 0 1px #3a3d41, 0 12px 22px -20px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .define-card .define-word, html[data-theme="dark"] .define-card .define-head i { color: #f1f2f2; }
html[data-theme="dark"] .define-card .define-say { color: #b4b7ba; }
html[data-theme="dark"] .define-card .define-def { color: #dcdddf; }
html[data-theme="dark"] .define-card .define-head { border-bottom-color: var(--lime); }
html[data-theme="dark"] .cc-on { background: var(--lime); color: #16181a; }
html[data-theme="dark"] :is(.row-info, .detail-less, .folder-dark .row-info, .folder-dark .detail-less) { color: #16181a; }
html[data-theme="dark"] .review-tone-1 { background-color: #25282b; }
html[data-theme="dark"] .review-tone-2 { background-color: #2c2f33; }
html[data-theme="dark"] .review-tone-3 { background-color: #33373b; --ink-3: #c9cbcd; }
html[data-theme="dark"] .review-tone-4 { background-color: #3a3e43; --ink-3: #d0d2d4; }
html[data-theme="dark"] .review-tone-1, html[data-theme="dark"] .review-tone-2 { --ink-3: #c9cbcd; }
html[data-theme="dark"] .folder[style*="--i:0"] { --fold-bg: #1b1e21; --ink-2: #d0d2d4; --ink-3: #aeb1b5; --line: #3a3d41; }
html[data-theme="dark"] .folder[style*="--i:1"] { --fold-bg: #202428; --ink-2: #d0d2d4; --ink-3: #b0b3b7; --line: #40444a; }
html[data-theme="dark"] .folder[style*="--i:2"] { --fold-bg: #262a2e; --ink-2: #d4d6d8; --ink-3: #b3b6ba; --line: #464a50; }
html[data-theme="dark"] .folder[style*="--i:3"] { --fold-bg: #2c3035; --ink-2: #d6d8da; --ink-3: #b6b9bd; --line: #4c5056; }
html[data-theme="dark"] .folder:not(.folder-dark) .folder-tab, html[data-theme="dark"] .folder:not(.folder-dark) .folder-body { color: var(--ink); }
html[data-theme="dark"] .soon-stamp > span { color: #16181a; background: var(--lime); border-color: #16181a; box-shadow: 0 0 0 2px var(--lime); mix-blend-mode: normal; opacity: 1; }
@media (max-width: 900px) {
.row.is-soon { padding-bottom: 6px; }
.row.is-soon .soon-stamp { position: static; inset: auto; display: block; margin-top: 12px; pointer-events: none; }
.row.is-soon .soon-stamp > span { display: inline-block; font-size: 17px; transform: rotate(-3deg); }
.row.is-soon .row-main, .row.is-soon .row-meta { opacity: .85; }
}
@media (max-width: 900px) {
.signup-field { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
.signup-field .soon-stamp { position: static; inset: auto; display: block; pointer-events: none; }
.signup-field .soon-stamp > span { display: inline-block; font-size: 17px; transform: rotate(-3deg); }
.signup-field input { width: 100%; }
}
html[data-theme="dark"] :is(.player-btn, .vault-icon, .lib-list li:nth-child(n+3) .vault-icon) { background: var(--lime); color: #16181a; }
html[data-theme="dark"] :is(.vault-status-btn, .sale-qty button[aria-checked="true"]) { color: #16181a; }
html[data-theme="dark"] :is(.player.is-playing .player-btn, .vault li.is-playing .play-btn) { color: #16181a; }