/* Généré par tools/build.mjs depuis style.css : ne pas retoucher. */
@keyframes gm-lit-night { 0%, 10% { background: var(--orange); box-shadow: 0 0 8px rgba(255, 112, 33, 0.7); } 18%, 100% { background: #383732; } }
@keyframes fl-glow-night { to { filter: drop-shadow(0 0 calc(var(--f) * .24) rgba(255, 112, 33, 0.85)); } }
@keyframes shield-glow-night { to { filter: drop-shadow(0 0 5px rgba(255, 112, 33, 0.9)); } }
@keyframes daily-call-night {
  from { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 6px 0 #ff985e, 0 14px 18px -8px rgba(255, 152, 94, 0.5), 0 0 0 0 rgba(255, 112, 33, 0.45); }
  to { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 6px 0 #ff985e, 0 14px 18px -8px rgba(255, 152, 94, 0.5), 0 0 0 16px rgba(255, 112, 33, 0); }
}
@keyframes bar-in-night { from { height: 100%; background: #000000; box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); transform: translateY(-140%); opacity: 0; } 40% { opacity: 1; transform: none; } }
@keyframes flash-p-night { 15% { --glow: rgba(5, 150, 65, 0.75); } }
@keyframes flash-g-night { 15% { --glow: rgba(11, 11, 9, 0.4); } }
@keyframes flash-m-night { 15% { --glow: rgba(255, 112, 33, 0.7); } }
@keyframes asked-night { 50% { box-shadow: inset 0 0 0 1px var(--orange), 0 2px 0 #585752, 0 0 0 4px rgba(255, 112, 33, 0.18); } }
@keyframes ring-night { from { box-shadow: 0 0 0 0 rgba(255, 112, 33, 0.55); } to { box-shadow: 0 0 0 14px rgba(255, 112, 33, 0); } }
@keyframes seg-on-night {
  from { background: #d3d3d3; }
  40% { background: #000000; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
  to { background: #0b0b09; }
}
@keyframes seg-top-night {
  from { background: #d3d3d3; }
  40% { background: #da5518; box-shadow: 0 0 8px rgba(255, 112, 33, 0.8); }
  to { background: var(--orange); }
}
@keyframes sd-call-night {
  from { box-shadow: inset 0 0 0 1px #ff8643, 0 .35cqw 0 #ff985e, 0 0 0 0 rgba(255, 112, 33, 0.45); }
  to { box-shadow: inset 0 0 0 1px #ff8643, 0 .35cqw 0 #ff985e, 0 0 0 1.4cqw rgba(255, 112, 33, 0); }
}
@keyframes rk-on-night { from { background: #2b2a25; } 40% { background: var(--orange); } to { background: var(--ink); } }
@keyframes cal-open-night { 50% { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 4px rgba(255, 112, 33, 0.15); } }
@keyframes sc-led-night { from { background: #d9d9d7; box-shadow: none; } }
:root:where(.is-night) { --bg: #11110f; --ink: #e5e5e5; --grey: #72726e; --soft: #aaaaaa; --orange: #ff7021; --blue: #5c9cff; }
:where(html.is-night) body { background: var(--bg); color: var(--ink); }
:where(html.is-night) a { color: inherit; text-decoration: none; }
:where(html.is-night) button { color: inherit; border: 0; background: none; }
:where(html.is-night) :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
:where(html.is-night) .top { color: var(--grey); }
:where(html.is-night) .top::before { background: rgba(17, 17, 15, 0.78); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); }
:where(html.is-night) .logo { fill: var(--ink); }
:where(html.is-night) .logo .crest { fill: #4e4d48; }
:where(html.is-night) .logo .crest--mid { fill: #7b300b; }
:where(html.is-night) .menu svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
:where(html.is-night) .top a:hover { color: var(--ink); }
:where(html.is-night) .menu .m-daily { color: var(--ink); }
:where(html.is-night) .m-daily .m-cal-top { fill: var(--orange); stroke: none; }
:where(html.is-night) .m-daily .m-day { fill: currentColor; stroke: none; }
:where(html.is-night) .is-due .m-state { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
:where(html.is-night) .is-done .m-state { border: solid #059641; border-width: 0 0 2px 2px; border-radius: 0; }
:where(html.is-night) .m-next time { color: var(--ink); }
:where(html.is-night) .nw-list li { border-top: 1px solid #383732; }
:where(html.is-night) .nw-list li:last-child { border-bottom: 1px solid #383732; }
:where(html.is-night) .nw-list small { color: var(--grey); }
:where(html.is-night) .nw-list p { color: var(--grey); }
:where(html.is-night) .nw-go { color: var(--orange); }
:where(html.is-night) .set-news { box-shadow: inset 0 0 0 1px #3d3c37; }
:where(html.is-night) .set-news .led { background: #4e4d48; }
:where(html.is-night) .set-news.is-new .led { background: var(--orange); }
:where(html.is-night) .set-news span { color: var(--orange); }
:where(html.is-night) .elsewhere { background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
:where(html.is-night) .get:hover, :where(html.is-night) .dsc:hover { background: rgba(0, 0, 0, 0.7); }
:where(html.is-night) .dsc::before { background: rgba(255, 255, 255, 0.12); }
:where(html.is-night) .get svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .get:hover svg { stroke: var(--orange); }
:where(html.is-night) .dsc svg { fill: #7e8bff; }
:where(html.is-night) .me[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); }
:where(html.is-night) .me.is-new::after, :where(html.is-night) .bar-me.is-new::after, :where(html.is-night) .mm-set.is-new b::after { background: var(--orange); }
:where(html.is-night) .mm { background: rgba(11, 11, 9, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(255, 255, 255, 0.06); }
:where(html.is-night) .mm > :is(a, button) { color: var(--grey); }
:where(html.is-night) .mm > :is(a, button):hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
:where(html.is-night) .mm svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .mm b { color: var(--ink); }
:where(html.is-night) .mm .mm-head { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
:where(html.is-night) .mm-head:not(:has(img, .initial)) b { color: var(--orange); }
:where(html.is-night) .me > b { color: var(--ink); }
:where(html.is-night) .initial { background: var(--ink); color: var(--bg); }
:where(html.is-night) .hero p { color: var(--grey); }
:where(html.is-night) .tag { border: 1px solid currentColor; }
:where(html.is-night) .notice { color: var(--soft); }
:where(html.is-night) .notice h3 { color: var(--ink); }
:where(html.is-night) .notice b { color: var(--ink); }
:where(html.is-night) .discord { background: #1b1b18; }
:where(html.is-night) .discord p { color: var(--grey); }
:where(html.is-night) .discord p b { color: var(--ink); }
:where(html.is-night) .discord-go { background: var(--ink); color: var(--bg); }
:where(html.is-night) .discord-go:hover { background: var(--orange); }
:where(html.is-night) .discord-go svg { fill: currentColor; }
:where(html.is-night) .foot { border-top: 1px solid #2a2a26; color: var(--grey); }
:where(html.is-night) .foot-brand .mark { color: var(--ink); }
:where(html.is-night) .foot h3 { color: var(--ink); }
:where(html.is-night) .foot nav a { color: var(--soft); }
:where(html.is-night) .foot nav a:hover { color: var(--orange); }
:where(html.is-night) .foot nav small { color: var(--grey); }
:where(html.is-night) .foot-soon { color: var(--grey); }
:where(html.is-night) .up { background: linear-gradient(#0c0b07, #25231e); color: #cccccc; box-shadow: inset 0 0 0 1px #4c4b46, 0 4px 0 #585752; }
:where(html.is-night) .up:hover .led { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
:where(html.is-night) .up:active { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .legal { color: var(--soft); }
:where(html.is-night) .legal h2 { color: var(--ink); }
:where(html.is-night) .legal a { color: var(--ink); text-decoration: underline; }
:where(html.is-night) .legal a:hover { color: var(--orange); }
:where(html.is-night) .lost a { color: var(--blue); }
:where(html.is-night) .slot::after { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.18), transparent); }
:where(html.is-night) .ruler i { background: #4e4d48; }
:where(html.is-night) .ruler i.maj { background: #949490; }
:where(html.is-night) .ruler span { color: var(--grey); }
:where(html.is-night) .ruler span.is-on { color: var(--ink); }
:where(html.is-night) .needle { background: var(--orange); }
:where(html.is-night) .needle::before { background: var(--orange); }
:where(html.is-night) .daily-where { color: var(--grey); }
:where(html.is-night) .daily-where svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
:where(html.is-night) .daily-where .dw-discord svg { fill: currentColor; stroke: none; }
:where(html.is-night) .daily-where a:hover { color: var(--orange); }
:where(html.is-night) .gm-card { background: linear-gradient(#12110d, #292823); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.8), inset 0 -3px 0 rgba(255, 255, 255, 0.04), 0 26px 40px -24px rgba(255, 255, 255, 0.38), 0 2px 4px rgba(255, 255, 255, 0.05); }
:where(html.is-night) .gm-card:hover { box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.8), inset 0 -3px 0 rgba(255, 255, 255, 0.04), 0 34px 48px -24px rgba(255, 255, 255, 0.42), 0 2px 4px rgba(255, 255, 255, 0.05); }
:where(html.is-night) .gm-rack i { border: 1.5px solid var(--ink); border-radius: 5px; }
:where(html.is-night) .gm-rack i::before { background: #383732; }
:where(html.is-night) .gm-rack i::after { border: 1.5px solid var(--ink); border-radius: 50%; }
:where(html.is-night) .gm-watch { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
:where(html.is-night) .gm-waves { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
:where(html.is-night) .gm-waves .gm-mine { stroke: var(--orange); stroke-width: 2; }
:where(html.is-night) .gm-hand { stroke: var(--orange); stroke-width: 2; }
:where(html.is-night) .gm-spots { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
:where(html.is-night) .gm-spots .gm-goal { stroke: var(--grey); stroke-width: 1; stroke-dasharray: 1.5 3; }
:where(html.is-night) .gm-spots .gm-ghost { stroke: var(--grey); stroke-width: 1; stroke-dasharray: 2 2.4; }
:where(html.is-night) .gm-spots .gm-lift { stroke: var(--orange); stroke-width: 2.4; stroke-dasharray: 25; stroke-dashoffset: 9; }
:where(html.is-night) .gm-spots .gm-ping { stroke: var(--orange); stroke-width: 1.2; }
:where(html.is-night) .gm-pin { fill: var(--orange); stroke: none; }
:where(html.is-night) .gm-name small { color: var(--grey); }
:where(html.is-night) .gm-name .gm-best { color: #a77500; }
:where(html.is-night) .gm-best svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
:where(html.is-night) .gm-line { color: var(--grey); }
:where(html.is-night) .gm-facts { border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--grey); }
:where(html.is-night) .gm-facts b { color: var(--ink); }
:where(html.is-night) .gm-facts .is-miss b { color: var(--orange); }
:where(html.is-night) .gm-key { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 5px 0 #ff985e, 0 12px 16px -8px rgba(255, 152, 94, 0.45); }
:where(html.is-night) .gm-card.is-locked .gm-name { color: var(--grey); }
:where(html.is-night) .gm-card.is-locked .gm-key { background: linear-gradient(#1d1c18, #2e2d28); color: var(--grey); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 1px 0 1px rgba(0, 0, 0, 0.7), 0 5px 0 #44433e, 0 12px 16px -8px rgba(255, 255, 255, 0.2); }
:where(html.is-night) .gm-card.is-locked .gm-key svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
:where(html.is-night) .gm-card:not(.is-locked):active .gm-key, :where(html.is-night) .gm-card.is-go .gm-key { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 1px 0 #ff985e; }
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .gm-rack i::before { animation: gm-lit-night 4s calc(var(--k) * .5s) infinite; }
}
:where(html.is-night) .play-rows .play-row + .play-row { border-left: 1px solid rgba(255, 255, 255, 0.09); }
:where(html.is-night) .play-head h2 small { color: var(--grey); }
:where(html.is-night) .play-head p { color: var(--grey); }
@media (max-width: 1100px) {
:where(html.is-night) .play-rows .play-row + .play-row { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
:where(html.is-night) .play-jump { background: rgba(17, 17, 15, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px -14px rgba(255, 255, 255, 0.35); }
:where(html.is-night) .play-jump a { color: var(--grey); }
:where(html.is-night) .play-jump a[aria-current="true"] { background: var(--ink); color: #0b0b09; }
:where(html.is-night) .play-jump small { background: rgba(255, 255, 255, 0.08); color: inherit; }
:where(html.is-night) .play-jump a[aria-current="true"] small { background: rgba(0, 0, 0, 0.16); }
}
:where(html.is-night) .play-arrows button { background: linear-gradient(#12110d, #292823); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 1px 0 1px rgba(0, 0, 0, 0.8), 0 3px 0 #3d3c37, 0 8px 12px -6px rgba(255, 255, 255, 0.25); }
:where(html.is-night) .play-arrows svg { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .play-arrows button:active:not(:disabled) { box-shadow: inset 0 0 0 1px #3d3c37, inset 0 1px 0 1px rgba(0, 0, 0, 0.8), 0 1px 0 #3d3c37; }
:where(html.is-night) .play-track > * { --a: min(1, max(-1, var(--d))); --far: min(2, max(var(--d), -1 * var(--d))); }
:where(html.is-night) .play-track > ::after { background: #181713; }
:where(html.is-night) .play-track .gm-card:not(.is-front) .gm-key { background: linear-gradient(#1d1c18, #2e2d28); color: var(--grey); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 1px 0 1px rgba(0, 0, 0, 0.7), 0 5px 0 #44433e, 0 12px 16px -8px rgba(255, 255, 255, 0.2); }
:where(html.is-night) .land-screen { background: linear-gradient(115deg, rgba(0, 0, 0, 0.07), transparent 38%), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 24px), #f4f4f4; box-shadow: inset 0 0 0 1px #ffffff, inset 0 2px 10px rgba(255, 255, 255, 0.8), 0 1px 0 rgba(0, 0, 0, 0.7); }
:where(html.is-night) .land-screen .gm-rack i { border-color: #0b0b09; }
:where(html.is-night) .land-screen .gm-rack i::before { background: #c5c5c5; }
:where(html.is-night) .land-screen .gm-rack i::after { border-color: #0b0b09; }
:where(html.is-night) .land-screen .gm-piano { stroke: #0b0b09; }
:where(html.is-night) .land-screen .gm-piano .gm-black { fill: #d5d5d5; }
:where(html.is-night) .gm-name .gm-bonus { background: var(--ink); color: #12110d; }
:where(html.is-night) .gm-name .gm-x2 { background: var(--orange); color: #000000; }
:where(html.is-night) .hero .x2 { color: var(--ink); }
:where(html.is-night) .play-dial button::before { background: #3d3c37; }
:where(html.is-night) .play-dial button[aria-current="true"]::before { background: var(--orange); }
@media (min-width: 1100px) {
:where(html.is-night) .hero ~ .play-rows .play-row + .play-row { border-left: 0; }
:where(html.is-night) .hero ~ .play-rows .gm-card:not(.is-locked):hover .gm-key { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 5px 0 #ff985e, 0 12px 16px -8px rgba(255, 152, 94, 0.45); }
}
:where(html.is-night) .gm-piano { fill: none; stroke: var(--ink); stroke-width: 1.2; }
:where(html.is-night) .gm-piano .gm-hit { fill: var(--orange); }
:where(html.is-night) .gm-piano .gm-black { fill: var(--ink); }
:where(html.is-night) .land-kicker { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--grey); }
:where(html.is-night) .land-kicker .led { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
:where(html.is-night) .land-lede { color: var(--grey); }
:where(html.is-night) .land-key { background: linear-gradient(#12110d, #292823); color: var(--ink); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 1px 0 1px rgba(0, 0, 0, 0.8), 0 5px 0 #44433e, 0 12px 16px -8px rgba(255, 255, 255, 0.2); }
:where(html.is-night) .land-key.is-main { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 5px 0 #ff985e, 0 12px 16px -8px rgba(255, 152, 94, 0.45); }
:where(html.is-night) .top .land-key:hover, :where(html.is-night) .land-key:hover { color: inherit; }
:where(html.is-night) .land-key.is-main:hover { color: #000000; }
:where(html.is-night) .land-key:active { box-shadow: inset 0 0 0 1px #3d3c37, 0 1px 0 #44433e; }
:where(html.is-night) .land-key.is-main:active { box-shadow: inset 0 0 0 1px #ff8643, 0 1px 0 #ff985e; }
:where(html.is-night) .land-slot::after { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent); }
:where(html.is-night) .land-how li { background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .land-how svg { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .land-how span { color: var(--grey); }
:where(html.is-night) .land-panel { background: linear-gradient(#12110d, #292823); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.8), 0 30px 46px -26px rgba(255, 255, 255, 0.4); }
:where(html.is-night) .land-panel small { color: var(--grey); }
:where(html.is-night) .land-panel b { color: var(--ink); }
:where(html.is-night) .land-line { color: var(--grey); }
:where(html.is-night) .land-more { color: var(--orange); }
:where(html.is-night) .land-learn { border-block: 1px solid rgba(255, 255, 255, 0.1); }
:where(html.is-night) .land-learn p { color: var(--grey); }
:where(html.is-night) .land-where a { color: var(--grey); }
:where(html.is-night) .land-where svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
:where(html.is-night) .land-where b { color: var(--ink); }
:where(html.is-night) .land-where a:hover { color: var(--ink); }
:where(html.is-night) .land-end p { color: var(--grey); }
:where(html.is-night) .gm-brand svg { fill: var(--ink); }
:where(html.is-night) .gm-brand .gm-ant { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
:where(html.is-night) .gm-brand i { background: var(--orange); box-shadow: 0 0 0 2.5px #181713; }
:where(html.is-night) .gm-brand i::after { border: 1.5px solid var(--orange); border-radius: 50%; }
:where(html.is-night) .flame { color: var(--ink); }
:where(html.is-night) .flame svg { fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 calc(var(--f) * .14) rgba(255, 112, 33, 0.5)); }
:where(html.is-night) .flame .fl-in { fill: rgba(255, 112, 33, 0.28); }
:where(html.is-night) .flame small { color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .flame svg { animation: fl-glow-night 1.3s ease-in-out infinite alternate; }
}
:where(html.is-night) .daily-id > .flame { color: var(--ink); }
:where(html.is-night) .daily-id .flame small { color: var(--grey); }
:where(html.is-night) :is(.today-panel, .daily-slot) .tp-shield { background: linear-gradient(#0d0c08, #1f1e19); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 1px 0 1px rgba(0, 0, 0, 0.8), 0 6px 12px -8px rgba(255, 255, 255, 0.35); }
:where(html.is-night) .tp-shield > svg { fill: none; stroke: #3d3c37; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .tp-shield svg.is-on { stroke: var(--ink); }
:where(html.is-night) .tp-shield svg.is-on .sh-body { fill: rgba(238, 238, 238, 0.12); }
:where(html.is-night) .sh-ray { stroke: none; fill: #000000; }
:where(html.is-night) .tp-shield svg.is-spent { stroke: var(--orange); filter: drop-shadow(0 0 2px rgba(255, 112, 33, 0.6)); }
:where(html.is-night) .tp-shield > small { color: var(--grey); }
:where(html.is-night) .tp-shield.is-used > small { color: var(--ink); }
:where(html.is-night) .tp-i { border: 0; background: none; color: var(--grey); }
:where(html.is-night) .tp-i svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
:where(html.is-night) .tp-rule { background: var(--ink); color: #0b0b09; box-shadow: 0 16px 30px -12px rgba(255, 255, 255, 0.55); }
:where(html.is-night) .tp-shield::after { background: var(--ink); }
:where(html.is-night) .tp-rule b { color: var(--orange); }
:where(html.is-night) .tp-rule p small { color: #72726e; }
:where(html.is-night) .tp-shield:is(:has(.tp-i:focus-visible), .is-open) .tp-i { color: var(--ink); }
@media (hover: hover) {
:where(html.is-night) .tp-i:hover { color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .tp-shield svg.is-spent { animation: shield-glow-night 1.6s ease-in-out infinite alternate; }
}
:where(html.is-night) .daily-or { color: var(--grey); }
:where(html.is-night) .daily-or::before, :where(html.is-night) .daily-or::after { background: currentColor; }
:where(html.is-night) .fiche a:hover { color: var(--orange); }
:where(html.is-night) .fiche a::after { color: var(--orange); }
:where(html.is-night) .fiche-learn { color: var(--grey); }
:where(html.is-night) .hint { color: var(--grey); }
:where(html.is-night) .flash { background: var(--bg); }
:where(html.is-night) .daily { background: linear-gradient(#12110d, #292823); box-shadow: inset 0 0 0 1px #3d3c37,
    inset 0 2px 0 1px rgba(0, 0, 0, 0.8),
    inset 0 -3px 0 rgba(255, 255, 255, 0.04),
    0 26px 40px -22px rgba(255, 255, 255, 0.38),
    0 2px 4px rgba(255, 255, 255, 0.05); }
:where(html.is-night) .daily:hover { box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.8), inset 0 -3px 0 rgba(255, 255, 255, 0.04), 0 34px 48px -22px rgba(255, 255, 255, 0.42), 0 2px 4px rgba(255, 255, 255, 0.05); }
:where(html.is-night) .daily-id > span { color: var(--grey); }
:where(html.is-night) .daily-id > .daily-streak { color: var(--ink); }
:where(html.is-night) .daily-streak .led { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
:where(html.is-night) .daily[data-state="done"] .daily-streak .led { background: #059641; box-shadow: 0 0 6px #059641; }
:where(html.is-night) .today-panel { background: linear-gradient(#12110d, #292823); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.8), inset 0 -3px 0 rgba(255, 255, 255, 0.04), 0 22px 34px -24px rgba(255, 255, 255, 0.38); color: var(--ink); }
:where(html.is-night) .tp-zero b { color: #4c4b46; }
:where(html.is-night) .tp-clock { border-inline: 1px solid rgba(255, 255, 255, 0.1); }
:where(html.is-night) .tp-clock .led { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
:where(html.is-night) .today-panel.is-done .tp-clock .led { background: #059641; box-shadow: 0 0 6px #059641; }
:where(html.is-night) .tp-clock span { color: var(--grey); }
:where(html.is-night) :is(.tp-zero, .tp-clock, .tp-stats) small { color: var(--grey); }
@media (max-width: 600px) {
:where(html.is-night) .today-i { color: var(--grey); }
:where(html.is-night) .today-i svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
:where(html.is-night) .today-i[aria-expanded="true"] { color: var(--orange); }
:where(html.is-night) .today > p { background: var(--ink); color: #181713; box-shadow: 0 20px 40px -16px rgba(255, 255, 255, 0.5); }
}
:where(html.is-night) .daily-screen { background: linear-gradient(#e7e7e7, #f5f5f5); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 0 0 5px #32312d, inset 0 0 0 1px #d9d9d9, inset 0 10px 24px rgba(255, 255, 255, 0.6); color: #0b0b09; }
:where(html.is-night) .daily-screen::after { background: linear-gradient(105deg, transparent 30%, rgba(0, 0, 0, 0.07) 48%, rgba(0, 0, 0, 0.02) 56%, transparent 70%); }
:where(html.is-night) .ds-bars i { background: #cccccc; }
:where(html.is-night) .ds-bars .c-p { background: #0b0b09; }
:where(html.is-night) .ds-bars .c-g { background: #0b0b09; }
:where(html.is-night) .ds-bars .c-m { background: var(--orange); }
:where(html.is-night) .ds-bars .c-now { background: var(--orange); }
:where(html.is-night) .daily[data-state="play"] .ds-bars i:not(.c-now) { background: #d9d9d9; }
:where(html.is-night) .daily[data-state="play"]:hover .ds-bars i:not(.c-now) { background: #c2c2c0; }
:where(html.is-night) .ds-name { color: #767672; }
:where(html.is-night) .ds-name > span { color: #373733; }
:where(html.is-night) .ds-read { border-left: 1px solid #dddddd; }
:where(html.is-night) .ds-read b i { color: #cccccc; }
:where(html.is-night) .ds-read time { color: #0b0b09; }
:where(html.is-night) .ds-read small { color: #767672; }
:where(html.is-night) .daily-key { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 6px 0 #ff985e, 0 14px 18px -8px rgba(255, 152, 94, 0.5); }
:where(html.is-night) .daily-key .led { background: #7b300b; }
:where(html.is-night) .daily:active .daily-key, :where(html.is-night) .daily.is-go .daily-key { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 1px 0 #ff985e, 0 4px 8px -4px rgba(255, 152, 94, 0.5); }
:where(html.is-night) .daily.is-go .daily-key .led { background: #000000; box-shadow: 0 0 8px #000000; }
:where(html.is-night) .daily.is-go .ds-bars i:not(.c-m) { background: #0b0b09; }
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .daily[data-state="play"] .daily-key, :where(html.is-night) .daily[data-state="resume"] .daily-key { animation: daily-call-night 1.8s ease-out infinite; }
}
:where(html.is-night) .daily[data-state="done"] .daily-key { background: linear-gradient(#0c0b07, #25231e); color: #cccccc; box-shadow: inset 0 0 0 1px #4c4b46, 0 6px 0 #585752; }
:where(html.is-night) .daily[data-state="done"] .daily-key .led { background: #059641; box-shadow: 0 0 6px #059641; }
:where(html.is-night) .daily[data-state="done"]:active .daily-key { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .daily[data-state="wait"] .daily-key { background: linear-gradient(#0c0b07, #25231e); color: #676661; box-shadow: inset 0 0 0 1px #4c4b46, 0 6px 0 #585752; }
:where(html.is-night) .boot { background: var(--bg); }
:where(html.is-night) .boot-line { color: var(--grey); }
:where(html.is-night) .boot.is-set .boot-line { color: var(--ink); }
:where(html.is-night) .boot-go { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.22), 0 5px 0 #ff985e; }
:where(html.is-night) .boot-go:focus-visible { outline: none; }
:where(html.is-night) .boot-go .led { background: #7b300b; }
:where(html.is-night) .boot.is-ready .boot-go:active { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.22), 0 1px 0 #ff985e; }
:where(html.is-night) .boot.is-gone .boot-go .led { background: #000000; box-shadow: 0 0 8px #000000; }
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .boot.is-ready:not(.is-gone) .boot-go { animation: daily-call-night 1.8s ease-out .5s infinite; }
}
:where(html.is-night) .boot-tip b { color: var(--orange); }
:where(html.is-night) .boot-tip span { color: #a3a39f; }
:root:where(.is-night) { --sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px)); --saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
:where(html.is-night) .no { color: var(--grey); }
:where(html.is-night) .tabs button { color: var(--grey); }
:where(html.is-night) .tabs button:hover { color: var(--ink); }
:where(html.is-night) .tabs [aria-current="page"] { color: var(--ink); }
:where(html.is-night) .tabs [aria-current="page"]::after { background: var(--orange); }
:where(html.is-night) .act-hero p { color: var(--grey); }
:where(html.is-night) .how svg { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .how span { color: var(--grey); }
@media (max-width: 640px) {
:where(html.is-night) .tabs { background: var(--bg); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08); }
:where(html.is-night) .tabs svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
}
:where(html.is-night) .is-pip .daily-key { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 2px 0 #ff985e; }
:where(html.is-night) .is-pip .ds-read { border-left: 0; border-top: 1px solid #dddddd; }
:where(html.is-night) .back, :where(html.is-night) .modes-back { color: var(--grey); }
:where(html.is-night) :is(.back, .modes-back)::before { color: var(--orange); }
:where(html.is-night) :is(.back, .modes-back):hover { color: var(--ink); }
:where(html.is-night) .crew h2 { color: var(--grey); }
:where(html.is-night) .players li { border-top: 1px solid #2a2a26; }
:where(html.is-night) .rtag i { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
:where(html.is-night) .rtag.t1 { color: var(--grey); box-shadow: inset 0 0 0 1px currentColor; }
:where(html.is-night) .rtag.t2 { color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
:where(html.is-night) .rtag:is(.t3, .t4) { color: var(--bg); background: var(--ink); }
:where(html.is-night) .rtag.t5 { color: #000000; background: linear-gradient(#d4d4d4, #f1f1f1); box-shadow: inset 0 0 0 1px rgba(255, 112, 33, 0.7), 0 3px 10px -4px rgba(255, 112, 33, 0.6); }
:where(html.is-night) .rtag.t5::after { background: linear-gradient(105deg, transparent 35%, rgba(0, 0, 0, 0.5) 50%, transparent 65%); }
:where(html.is-night) .rtag.t6 { color: #000000; border: 1.5px solid transparent; background: linear-gradient(#e3e3e3, #f8f8f8) padding-box, conic-gradient(from var(--rtag-a), #ff7021, #4b1e04, #ff7021 40%, #ffcdb1 60%, #ff7021) border-box; box-shadow: 0 0 16px -4px rgba(255, 112, 33, 0.8); }
:where(html.is-night) .rtag.t6 b { background: linear-gradient(#000000, #632707); background-clip: text; color: transparent; }
:where(html.is-night) .rtag.t6 i { background: #000000; box-shadow: 0 0 4px #000000, 0 0 10px var(--orange); }
:where(html.is-night) .meter { background: linear-gradient(#eaeaea, #f4f4f4); box-shadow: 0 0 0 3px #64635e; }
:where(html.is-night) .meter i { background: #c5c5c5; }
:where(html.is-night) .meter .c-p { background: #0b0b09; }
:where(html.is-night) .meter .c-g { background: #0b0b09; }
:where(html.is-night) .meter .c-m { background: var(--orange); }
:where(html.is-night) .invite { border-top: 1px solid #2a2a26; }
:where(html.is-night) .invite::before { color: var(--orange); }
:where(html.is-night) .invite:hover { color: var(--orange); }
:where(html.is-night) .players:empty::before { border-top: 1px solid #2a2a26; color: var(--grey); }
:where(html.is-night) .crew .invite { border: 0; border-radius: 12px; background: #7e8bff; color: #000000; box-shadow: 0 4px 0 #a4adff; }
:where(html.is-night) .crew .invite svg { fill: currentColor; }
:where(html.is-night) .crew .invite:hover { color: #000000; background: #8a96ff; }
:where(html.is-night) .crew .invite:active { box-shadow: 0 1px 0 #a4adff; }
:where(html.is-night) .crew h3 { color: var(--grey); }
:where(html.is-night) .here-title .led { background: #44433e; }
:where(html.is-night) .here-title.is-on .led { background: #059641; box-shadow: 0 0 7px #059641; }
:where(html.is-night) .here-n { color: var(--ink); }
:where(html.is-night) .here:empty::before { border-top: 1px solid #2a2a26; color: var(--grey); }
:where(html.is-night) .peer { border-top: 1px solid #2a2a26; }
:where(html.is-night) .peer-face .led { background: #059641; box-shadow: 0 0 0 2px var(--bg, #11110f); }
:where(html.is-night) .peer-what { color: var(--grey); }
:where(html.is-night) .peer-joined { background: var(--orange); color: #000000; }
:where(html.is-night) .peer-screen { background: radial-gradient(120% 160% at 30% 0%, #e4e4e4, #f5f5f5 70%); box-shadow: 0 0 0 3px var(--b2, #64635e), 0 0 0 4px var(--edge, #4e4d48), inset 0 0 18px var(--glow), inset 0 1px 0 rgba(0, 0, 0, 0.06); }
:where(html.is-night) .peer-lives i { background: #c5c5c5; }
:where(html.is-night) .peer-lives i.on { background: #0b0b09; }
:where(html.is-night) .peer-lives b { color: #868682; }
:where(html.is-night) .peer-bars i { background: #cccccc; }
:where(html.is-night) .peer-bars .c-p { background: #0b0b09; }
:where(html.is-night) .peer-bars .c-g { background: #0b0b09; }
:where(html.is-night) .peer-bars .c-m { background: var(--orange); }
:where(html.is-night) .peer-bars .c-now { background: var(--orange); }
:where(html.is-night) .peer-bars .is-in { animation: bar-in-night .7s cubic-bezier(.2, .8, .2, 1) both; }
:where(html.is-night) .peer-score { --n: var(--to, 0); color: #0b0b09; }
:where(html.is-night) .peer:not([data-where="play"]) .peer-idle { color: #868682; }
:where(html.is-night) .peer:not([data-where="play"]) .peer-screen::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent); }
:where(html.is-night) .peer[data-flash="p"] .peer-screen { animation: flash-p-night 1.1s ease-out; }
:where(html.is-night) .peer[data-flash="g"] .peer-screen { animation: flash-g-night 1.1s ease-out; }
:where(html.is-night) .peer[data-flash="m"] .peer-screen { animation: flash-m-night 1.1s ease-out, shake .42s; }
:where(html.is-night) .peer-duel { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 2px 0 #585752; }
:where(html.is-night) .peer-duel svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
:where(html.is-night) .peer-duel:hover { color: var(--orange); }
:where(html.is-night) .peer-duel:active { box-shadow: inset 0 0 0 1px #4c4b46; }
:where(html.is-night) .peer-duel.is-asked { color: var(--orange); animation: asked-night 1.4s ease-in-out infinite; }
:where(html.is-night) .duel-link { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 3px 0 #585752; }
:where(html.is-night) .duel-link svg { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; }
:where(html.is-night) .duel-link small { color: var(--grey); }
:where(html.is-night) .duel-link:hover { color: var(--orange); }
:where(html.is-night) .duel-link:active { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .duel-pick.is-link .dp-anyone { border-radius: 50%; border: 2px dashed #585752; color: var(--grey); }
:where(html.is-night) .peer.is-duel .peer-lives b { color: var(--orange); }
:where(html.is-night) .peer.is-duel .peer-screen { box-shadow: 0 0 0 3px var(--b2, #64635e), 0 0 0 4px var(--orange), inset 0 0 18px var(--glow), inset 0 1px 0 rgba(0, 0, 0, 0.06); }
:where(html.is-night) :is(.dp-cancel, .de-home, .dt-no) { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 4px 0 #585752; }
:where(html.is-night) :is(.dp-send, .de-again, .dt-yes) { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 4px 0 #ff985e; }
:where(html.is-night) :is(.dp-send, .de-again, .dt-yes) .led { background: #7b300b; }
:where(html.is-night) :is(.dp-cancel, .de-home, .dt-no):active { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) :is(.dp-send, .de-again, .dt-yes):active { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 1px 0 #ff985e; }
:where(html.is-night) .dt-yes::after, :where(html.is-night) .de-again.is-asked::after { animation: ring-night 1.6s ease-out infinite; }
:where(html.is-night) .duel-toast { background: linear-gradient(#151410, #282722); color: var(--ink); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.75), 0 22px 44px -14px rgba(255, 255, 255, 0.45); }
:where(html.is-night) .duel-toast img { box-shadow: 0 0 0 2px #151410, 0 0 0 3.5px var(--orange); }
:where(html.is-night) .dt-sub { color: var(--grey); }
:where(html.is-night) .dt-time { background: var(--orange); }
:where(html.is-night) :is(.duel-pick, .duel-end) { border: 0; border-radius: 20px; background: linear-gradient(#151410, #282722); color: var(--ink); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.75), 0 30px 60px -20px rgba(255, 255, 255, 0.45); }
:where(html.is-night) :is(.duel-pick, .duel-end):focus-visible { outline: none; }
:where(html.is-night) :is(.duel-pick, .duel-end)::backdrop { background: rgba(17, 17, 15, 0.7); }
:where(html.is-night) .dp-faces svg { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; }
:where(html.is-night) .dp-rules { color: var(--grey); }
:where(html.is-night) .dp-mode { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px #383732; }
:where(html.is-night) .dp-mode:hover { background: rgba(0, 0, 0, 0.7); }
:where(html.is-night) .dp-mode[aria-pressed="true"] { background: #000000; box-shadow: inset 0 0 0 2px var(--orange); }
:where(html.is-night) .dp-robe { background: linear-gradient(var(--b1, #1e1d19), var(--b2, #363530)); box-shadow: inset 0 0 0 1px var(--edge, #4e4d48); }
:where(html.is-night) .dp-robe i { background: #eeeeee; }
:where(html.is-night) .dp-mode[aria-pressed="true"] .dp-robe i { background: #eeeeee linear-gradient(90deg, transparent 30%, var(--orange) 30% 38%, transparent 38%); }
:where(html.is-night) .dp-mode b { color: var(--grey); }
:where(html.is-night) .vs { background: #f4f4f4; color: #0b0b09; }
:where(html.is-night) .vs::before { background: linear-gradient(100deg, #ffdccb, #feeee7 80%); }
:where(html.is-night) .vs::after { background: linear-gradient(260deg, #d9d9d9, #ededed 80%); }
:where(html.is-night) .vs-side img { box-shadow: 0 0 0 4px #f4f4f4, 0 0 0 7px var(--ring, #0b0b09), 0 0 40px -6px var(--ring, #0b0b09); }
:where(html.is-night) .vs-me { --ring: var(--orange); }
:where(html.is-night) .vs-word { color: var(--orange); text-shadow: 0 0 40px rgba(255, 112, 33, 0.55); }
:where(html.is-night) .vs-mode { color: #767672; }
:where(html.is-night) .vs.is-go .vs-count { color: var(--orange); }
:where(html.is-night) .vs.is-on .vs-mid::before { background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 112, 33, 0.18) 30%, transparent 60%); }
:where(html.is-night) .duel-hud { background: radial-gradient(120% 160% at 30% 0%, #e4e4e4, #f5f5f5 70%); color: #0b0b09; box-shadow: 0 0 0 3px #64635e, 0 0 0 4px #484742, inset 0 1px 0 rgba(0, 0, 0, 0.06); }
:where(html.is-night) .dh-side { box-shadow: inset 0 0 22px var(--glow); }
:where(html.is-night) .dh-side img { box-shadow: 0 0 0 2px #f5f5f5, 0 0 0 3.5px var(--ring, #a5a5a2); }
:where(html.is-night) .dh-me { --ring: var(--orange); }
:where(html.is-night) .dh-name { color: #575752; }
:where(html.is-night) .dh-side.is-done .dh-name::after { color: #059641; }
:where(html.is-night) .dh-score { --n: var(--to, 0); }
:where(html.is-night) .dh-pips i { background: #cccccc; }
:where(html.is-night) .dh-pips .c-p { background: #0b0b09; }
:where(html.is-night) .dh-pips .c-g { background: #0b0b09; }
:where(html.is-night) .dh-pips .c-m { background: var(--orange); }
:where(html.is-night) .dh-pips .c-now { background: var(--orange); }
:where(html.is-night) .dh-pips .is-in { animation: bar-in-night .7s cubic-bezier(.2, .8, .2, 1) both; }
:where(html.is-night) .dh-side[data-flash="p"] { animation: flash-p-night 1.1s ease-out; }
:where(html.is-night) .dh-side[data-flash="g"] { animation: flash-g-night 1.1s ease-out; }
:where(html.is-night) .dh-side[data-flash="m"] { animation: flash-m-night 1.1s ease-out, shake .42s; }
:where(html.is-night) .duel-hud[data-lead="1"] .dh-lead { color: var(--orange); }
:where(html.is-night) .dh-tug { background: #d9d9d9; }
:where(html.is-night) .dh-tug::before { background: #b5b5b2; }
:where(html.is-night) .dh-tug i { background: #0b0b09; }
:where(html.is-night) .duel-hud[data-lead="1"] .dh-tug i { background: var(--orange); box-shadow: 0 0 10px rgba(255, 112, 33, 0.6); }
:where(html.is-night) .dh-q { color: #868682; }
:where(html.is-night) .de-mode { color: var(--grey); }
:where(html.is-night) .duel-end[data-result="win"] h2 { color: var(--orange); }
:where(html.is-night) .de-why { color: var(--grey); }
:where(html.is-night) .de-plate { background: radial-gradient(120% 160% at 30% 0%, #e4e4e4, #f5f5f5 70%); color: #0b0b09; box-shadow: 0 0 0 3px #64635e, 0 0 0 4px #484742; }
:where(html.is-night) .de-name { color: #575752; }
:where(html.is-night) .de-score { --n: var(--to, 0); }
:where(html.is-night) .de-plate.is-win { box-shadow: 0 0 0 3px var(--orange), 0 0 0 4px #c04b13, 0 0 36px -6px rgba(255, 112, 33, 0.7); }
:where(html.is-night) .de-crown svg { fill: var(--orange); stroke: #ff985e; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(255, 112, 33, 0.5)); }
:where(html.is-night) .de-vs { color: var(--grey); }
:where(html.is-night) .de-grid { background: radial-gradient(120% 160% at 30% 0%, #e4e4e4, #f5f5f5 70%); box-shadow: 0 0 0 3px #64635e, 0 0 0 4px #484742; }
:where(html.is-night) .de-grid::after { background: #d3d3d3; }
:where(html.is-night) .de-grid i { background: #cccccc; }
:where(html.is-night) .de-grid .c-p { background: #0b0b09; }
:where(html.is-night) .de-grid .c-g { background: #0b0b09; }
:where(html.is-night) .de-grid .c-m { background: var(--orange); }
:where(html.is-night) .de-grid .is-mine { background: rgba(255, 112, 33, 0.16); }
:where(html.is-night) .de-grid .is-theirs { background: rgba(11, 11, 9, 0.07); }
:where(html.is-night) .streaks { background: radial-gradient(120% 140% at 30% 0%, #e4e4e4, #f5f5f5 70%); box-shadow: 0 0 0 3px #64635e, 0 0 0 4px #484742, inset 0 1px 0 rgba(0, 0, 0, 0.06); }
:where(html.is-night) .streaks::after { background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.07), transparent); }
:where(html.is-night) .streaks div + div { border-left: 1px solid #d9d9d9; }
:where(html.is-night) .streaks dt { color: #868682; }
:where(html.is-night) .streaks dd { color: #0b0b09; }
:where(html.is-night) .streaks b { --n: var(--to); }
:where(html.is-night) .streaks small { color: #72726e; }
:where(html.is-night) .streaks .seg i { background: #d3d3d3; }
:where(html.is-night) .streaks .seg i.on { animation: seg-on-night .25s calc(.45s + var(--i) * 70ms) both; }
:where(html.is-night) .streaks .seg i.on:nth-child(10) { animation-name: seg-top-night; }
:where(html.is-night) .results { border: 0; border-radius: 20px; background: linear-gradient(#151410, #282722); color: var(--ink); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.75), 0 30px 60px -20px rgba(255, 255, 255, 0.45); }
:where(html.is-night) .results:focus-visible { outline: none; }
:where(html.is-night) .results::backdrop { background: rgba(17, 17, 15, 0.7); }
:where(html.is-night) .results-no { color: var(--grey); }
:where(html.is-night) .results .players li { border-color: #383732; }
:where(html.is-night) :is(.results, .crew) .players li::before { color: var(--grey); }
:where(html.is-night) :is(.results, .crew) .players .is-me .player-name { color: var(--orange); }
:where(html.is-night) .results .invite { border: 0; }
:where(html.is-night) .results-close { background: linear-gradient(#0c0b07, #25231e); color: #cccccc; box-shadow: inset 0 0 0 1px #4c4b46, 0 5px 0 #585752; }
:where(html.is-night) .results-close .led { background: #059641; box-shadow: 0 0 6px #059641; }
:where(html.is-night) .results-close:active { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .results-tally { color: var(--grey); }
:where(html.is-night) .results-where { color: var(--grey); }
:where(html.is-night) .results-practice { border-top: 1px solid #383732; border-bottom: 1px solid #383732; }
:where(html.is-night) .results-practice small { color: var(--grey); }
:where(html.is-night) .results-practice small::after { color: var(--orange); }
:where(html.is-night) .results-practice:hover { color: var(--orange); }
:where(html.is-night) .results-profile { color: var(--grey); }
:where(html.is-night) .results-profile:hover { color: var(--orange); }
:where(html.is-night) .leave-line { color: var(--grey); }
:where(html.is-night) .results :is(.share, .leave-go, .run-again) { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.22), 0 5px 0 #ff985e; }
:where(html.is-night) .results :is(.share, .run-again) .led { background: #7b300b; }
:where(html.is-night) .results :is(.share, .leave-go, .run-again):active { box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.22), 0 1px 0 #ff985e; }
:where(html.is-night) .run-again::before { background: rgba(0, 0, 0, 0.9); }
:where(html.is-night) .run-again::after { box-shadow: 0 0 0 2px var(--orange); }
:where(html.is-night) .run-best.is-new dt { color: var(--orange); }
:where(html.is-night) .sd { background: linear-gradient(var(--b1, #1e1d19), var(--b2, #363530)); box-shadow: inset 0 0 0 1px var(--edge, #4e4d48),
    inset 0 2px 0 1px rgba(0, 0, 0, 0.7),
    0 3cqw 5cqw -1cqw rgba(255, 255, 255, 0.18),
    0 .6cqw 1cqw rgba(255, 255, 255, 0.08); }
:where(html.is-night) .sd-grille { background: radial-gradient(circle, var(--dots, #ababa5) 0 32%, transparent 36%) 0 0 / 1.2cqw 1.3cqw; }
:where(html.is-night) .sd-screen { background: linear-gradient(#5b5a55, #6c6b67); box-shadow: inset 0 .2cqw .4cqw rgba(255, 255, 255, 0.25), 0 1px 0 rgba(0, 0, 0, 0.6); }
:where(html.is-night) .sd-screen::after { background: linear-gradient(115deg, rgba(0, 0, 0, 0.035) 0 24%, transparent 24.2%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
:where(html.is-night) .ptr { background: rgba(238, 238, 238, 0.42); }
:where(html.is-night) .ptr::after { background: rgba(0, 0, 0, 0.85); }
:where(html.is-night) .ptr.is-dark { background: rgba(0, 0, 0, 0.55); }
:where(html.is-night) .ptr.is-dark::after { background: rgba(255, 255, 255, 0.7); }
:where(html.is-night) .knob span { color: var(--soft); }
:where(html.is-night) .ring { background: radial-gradient(circle at 50% 38%, #24231f, #4b4a45 78%, #5e5d58); box-shadow: 0 .35cqw 0 #5c5b56, inset 0 1px 0 rgba(0, 0, 0, 0.6); }
:where(html.is-night) .ring::before { background: repeating-conic-gradient(from -135deg, #73726d 0 1.2deg, transparent 1.2deg 27deg); }
:where(html.is-night) .cap { background: radial-gradient(circle at 40% 35%, #5e5d59, #9f9e9a); box-shadow: 0 .3cqw .5cqw rgba(255, 255, 255, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.45); }
:where(html.is-night) .cap i::before { background: #000000; }
:where(html.is-night) .sd-vu { background: #3e3d38; }
:where(html.is-night) .sd-vu::before { background: linear-gradient(to top, #d5d5d3 0 72%, var(--orange) 72%); }
:where(html.is-night) .sd-key { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 .35cqw 0 #585752; color: #cccccc; }
:where(html.is-night) .sd-key:active { box-shadow: inset 0 0 0 1px #4c4b46, 0 .05cqw 0 #585752; }
:where(html.is-night) .sd-key small { color: #888888; }
:where(html.is-night) .led { background: #65645f; }
:where(html.is-night) .is-on .led, :where(html.is-night) [aria-pressed="true"] .led { background: var(--orange); box-shadow: 0 0 .8cqw var(--orange); }
:where(html.is-night) .sd-fn.is-spent { background: linear-gradient(#1f1e1a, #312f2a); box-shadow: inset 0 0 0 1px #3f3e39, 0 .15cqw 0 #4d4c47; color: #585752; }
:where(html.is-night) .sd-fn.is-spent .led { background: #3f3e39; box-shadow: none; }
:where(html.is-night) .sd-ok { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, 0 .35cqw 0 #ff985e; }
:where(html.is-night) .sd-ok:active { box-shadow: inset 0 0 0 1px #ff8643, 0 .05cqw 0 #ff985e; }
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .sd-ok.is-ready { animation: sd-call-night 1.6s ease-out infinite; }
}
:where(html.is-night) .sd-keys .sd-key { color: #aaaaaa; }
:where(html.is-night) .sd-keys .sd-key[aria-pressed="true"] { background: linear-gradient(#181712, #2d2b26); box-shadow: inset 0 0 0 1px #53524d, inset 0 .2cqw .3cqw rgba(255, 255, 255, 0.08), 0 .13cqw 0 #585752; color: var(--ink); }
:where(html.is-night) .sd-name { color: var(--print, #cccccc); }
:where(html.is-night) .sd-name span { border: 1px solid currentColor; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="2"] { --b1: #070705; --b2: #1c1c18; --edge: #31312c; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="3"] { --b1: #1f190c; --b2: #3a311f; --edge: #4e4532; --print: #c4bcae; --dots: #837a65; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="4"] { --b1: #b3b3b1; --b2: #cbcbc9; --edge: #d9d9d7; --print: #242420; --label: #474742; --dots: #e3e3e2; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="5"] { --b1: #d7d7d7; --b2: #eaeaea; --edge: #f8f8f8; --print: #2e2e2a; --label: #575752; --dots: #c7c7c7; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="6"] { --b1: #f15e1c; --b2: #ff7e36; --edge: #ff9255; --print: #fde5d9; --label: #fcd9c7; --dots: #ffa16c; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="7"] { --b1: #1b1e21; --b2: #3f4348; --edge: #565a5f; --print: #caced2; --dots: #8b8f94; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="8"] { --b1: #a0a9ba; --b2: #bcc3d1; --edge: #d0d5df; --print: #1f232b; --label: #414753; --dots: #d3d8e3; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="9"] { --b1: #222619; --b2: #3b432f; --edge: #505943; --print: #cad0c5; --dots: #848d7b; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="10"] { --b1: #96b2a4; --b2: #b1c9bd; --edge: #c5d8cf; --print: #151f17; --label: #324438; --dots: #cdddd5; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="12"] { --b1: #514f2a; --b2: #6e6c45; --edge: #83815c; --print: #dddcd2; --label: #c9c8b8; --dots: #989676; }
:where(html.is-night) :is(.sd, .mini, .peer, .dp-mode)[data-m="11"] { --b1: #4f6352; --b2: #697e6d; --edge: #819485; --print: #d1dcd3; --label: #bfcdc2; --dots: #99aa9d; }
:where(html.is-night) .sd[data-m="6"] .sd-ok { background: linear-gradient(#cccccc, #eaeaea); box-shadow: inset 0 0 0 1px #ffffff, 0 .35cqw 0 #ffffff; }
:where(html.is-night) .sd .knob span { color: var(--label, var(--soft)); }
:where(html.is-night) .sd-vumeter { background: radial-gradient(120% 110% at 50% 115%, #080500, #211a06); box-shadow: 0 0 0 .35cqw #6a614c, 0 0 0 .5cqw #837a65, inset 0 .25cqw .4cqw rgba(255, 255, 255, 0.18); }
:where(html.is-night) .sd-vumeter path { fill: none; }
:where(html.is-night) .vu-arc, :where(html.is-night) .vu-tick { stroke: #cfc8ba; stroke-width: .7; }
:where(html.is-night) .vu-red { stroke: var(--orange); stroke-width: 1.6; }
:where(html.is-night) .sd-vumeter text { fill: #cfc8ba; }
:where(html.is-night) .sd-needle line { stroke: #e5e5e5; stroke-width: .9; stroke-linecap: round; }
:where(html.is-night) .sd-spk { background: radial-gradient(circle, var(--dots) 0 30%, transparent 36%) 0 0 / .8cqw .8cqw, #d3d3d2; box-shadow: inset 0 .3cqw .6cqw rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.12); }
:where(html.is-night) .sd-gr i { background: #cccccc; }
:where(html.is-night) .sd-gr i.on { background: #502800; box-shadow: 0 0 .6cqw #502800; }
:where(html.is-night) .sd-gr i.on:nth-child(n + 8) { background: var(--orange); box-shadow: 0 0 .6cqw var(--orange); }
:where(html.is-night) .sd-reel { background: radial-gradient(circle, #dddddd 0 14%, #1c190f 15% 22%, transparent 23%), repeating-conic-gradient(#1c190f 0 20deg, #c5c5c3 20deg 60deg); box-shadow: 0 0 0 .35cqw #1c190f, 0 0 0 .6cqw #6d7176; }
:where(html.is-night) .sd-slots { background: repeating-linear-gradient(90deg, var(--dots) 0 .5cqw, transparent .5cqw 1.2cqw); }
:where(html.is-night) .sd-piano i { background: #100e07; box-shadow: inset 0 -.35cqw 0 rgba(255, 255, 255, 0.12); }
:where(html.is-night) .sd-piano i:is(:nth-child(2), :nth-child(4), :nth-child(7), :nth-child(9), :nth-child(11)) { background: #e2e2e1; box-shadow: none; }
:where(html.is-night) .sd-piano i.on { background: var(--orange); box-shadow: 0 0 .7cqw var(--orange); }
:where(html.is-night) .sd-learn { color: var(--grey); }
:where(html.is-night) .sd-learn::after { color: var(--orange); }
:where(html.is-night) .sd-learn:hover { color: var(--ink); }
:where(html.is-night) .sd-tour { border: 1px solid currentColor; border-radius: 50%; color: inherit; }
:where(html.is-night) .tour-veil { background: rgba(241, 241, 240, 0.62); }
:where(html.is-night) .tour-hole::after { box-shadow: inset 0 0 0 2px var(--orange), 0 0 22px rgba(255, 112, 33, 0.35); }
:where(html.is-night) .tour-tip { background: linear-gradient(#0d0c08, #1b1a15); color: var(--ink); box-shadow: inset 0 0 0 1px #383732, inset 0 2px 0 1px rgba(0, 0, 0, 0.7), 0 22px 44px -14px rgba(255, 255, 255, 0.55); }
:where(html.is-night) .tour-tip small { color: var(--grey); }
:where(html.is-night) .tour-tip p { color: #a1a19d; }
:where(html.is-night) .tour-seg i { background: #383732; }
:where(html.is-night) .tour-seg i.on { background: var(--orange); }
:where(html.is-night) .tour-skip { color: var(--grey); }
:where(html.is-night) .tour-next { background: var(--orange); box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.22), 0 3px 0 #ff985e; color: #000000; }
:where(html.is-night) .tour-next:active { box-shadow: inset 0 0 0 1px #ff8643, 0 0 0 #ff985e; }
@media (hover: hover) {
:where(html.is-night) .tour-skip:hover { color: var(--ink); }
}
:where(html.is-night) .sd-compare { background: linear-gradient(#0c0b07, #25231e); color: #cccccc; box-shadow: inset 0 0 0 1px #4c4b46, 0 3px 0 #585752; }
:where(html.is-night) .sd-compare small { color: var(--grey); }
:where(html.is-night) .sd-compare[aria-pressed="true"] .led { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
:where(html.is-night) .sd-compare:active, :where(html.is-night) .sd-compare[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .keys { color: var(--grey); }
:where(html.is-night) .sd-match .sd-fn.is-on .led { background: var(--orange); box-shadow: 0 0 .8cqw var(--orange); }
@container (max-width: 560px) {
:where(html.is-night) .ring { box-shadow: 0 .6cqw 0 #5c5b56, inset 0 1px 0 rgba(0, 0, 0, 0.6); }
:where(html.is-night) .sd-key { box-shadow: inset 0 0 0 1px #4c4b46, 0 .6cqw 0 #585752; }
:where(html.is-night) .sd-ok { box-shadow: inset 0 0 0 1px #ff8643, 0 .6cqw 0 #ff985e; }
}
:where(html.is-night) .profile h2 { border-bottom: 1px solid #2a2a26; }
:where(html.is-night) .profile .note { color: var(--grey); }
:where(html.is-night) .profile .error { color: var(--orange); }
:where(html.is-night) .profile .key { background: var(--ink); color: var(--bg); }
:where(html.is-night) .profile .key:hover { background: var(--orange); }
:where(html.is-night) .profile .key.ghost { background: none; color: var(--grey); box-shadow: inset 0 0 0 1px #373733; }
:where(html.is-night) .profile .key.ghost:hover { color: var(--ink); }
:where(html.is-night) .mail input { border: 1px solid #373733; border-radius: 6px; background: #080806; color: var(--ink); }
:where(html.is-night) .mail input:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: transparent; }
:where(html.is-night) .gate { background: linear-gradient(#1e1d19, #363530); box-shadow: inset 0 0 0 1px #4e4d48,
    inset 0 2px 0 1px rgba(0, 0, 0, 0.7),
    0 24px 40px -10px rgba(255, 255, 255, 0.18),
    0 4px 8px rgba(255, 255, 255, 0.08); }
:where(html.is-night) .gate-screen { background: #f4f4f4; box-shadow: 0 0 0 1.4cqw #64635e, inset 0 0 0 1px rgba(0, 0, 0, 0.04); color: #0b0b09; }
:where(html.is-night) .gate-screen b { color: #868682; }
:where(html.is-night) .gate-screen b.on { color: var(--orange); }
:where(html.is-night) .gate-screen small { color: #868682; }
:where(html.is-night) .gate-screen small.warn { color: var(--orange); }
:where(html.is-night) .gate-screen input { border: 0; border-bottom: 1px solid #c5c5c5; border-radius: 0; background: none; color: #0b0b09; caret-color: var(--orange); }
:where(html.is-night) .gate-screen input::placeholder { color: #b5b5b2; }
:where(html.is-night) .gate-screen input:focus { outline: none; border-bottom-color: var(--orange); }
:where(html.is-night) .gate-key { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 1.2cqw 0 #585752; color: #cccccc; }
:where(html.is-night) .gate-key small { color: #888888; }
:where(html.is-night) .gate-key svg { fill: currentColor; }
:where(html.is-night) .gate-key:hover { color: var(--orange); }
:where(html.is-night) .gate-key:active { box-shadow: inset 0 0 0 1px #4c4b46, 0 .2cqw 0 #585752; }
:where(html.is-night) .gate-ok { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, 0 1.2cqw 0 #ff985e; }
:where(html.is-night) .gate-ok:hover { color: #000000; }
:where(html.is-night) .gate-ok:active { box-shadow: inset 0 0 0 1px #ff8643, 0 .2cqw 0 #ff985e; }
:where(html.is-night) .gate-name { color: #cccccc; }
:where(html.is-night) .gate-name span { border: 1px solid currentColor; }
:where(html.is-night) .save > p { color: var(--grey); }
:where(html.is-night) .save-later { color: var(--grey); }
:where(html.is-night) .save-later:hover { color: var(--ink); }
:where(html.is-night) .toast { background: var(--ink); color: var(--bg); }
:where(html.is-night) .st-sets { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .st-sets button { color: var(--grey); }
:where(html.is-night) .st-sets button:hover { color: var(--ink); }
:where(html.is-night) .st-sets button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
:where(html.is-night) .st-pick { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .st-pick svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .st-menu { background: rgba(5, 5, 3, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -16px rgba(255, 255, 255, 0.35); }
:where(html.is-night) .st-menu button:hover { background: rgba(255, 255, 255, 0.05); }
:where(html.is-night) .st-menu button[aria-checked="true"] { color: var(--orange); }
:where(html.is-night) .st-note { color: var(--grey); }
:where(html.is-night) .st-panel { background: linear-gradient(#0e0d09, #1d1c17); box-shadow: inset 0 0 0 1px #34332d, inset 0 2px 0 1px rgba(0, 0, 0, 0.8), 0 22px 36px -24px rgba(255, 255, 255, 0.3); }
:where(html.is-night) .st-head small { color: var(--grey); }
:where(html.is-night) .st-head span { color: var(--grey); }
:where(html.is-night) .st-row:hover, :where(html.is-night) .st-row[aria-expanded="true"] { background: rgba(0, 0, 0, 0.7); }
:where(html.is-night) .st-code { color: var(--grey); }
:where(html.is-night) .st-bar { background: rgba(255, 255, 255, 0.08); }
:where(html.is-night) .st-bar i { background: var(--ink); }
:where(html.is-night) .st-row small { color: var(--grey); }
:where(html.is-night) .st-row.is-best { box-shadow: inset 0 0 0 1.5px #059641; }
:where(html.is-night) .st-row.is-best em { background: rgba(5, 150, 65, 0.12); color: #4cb674; }
:where(html.is-night) .st-row.is-best .st-bar i { background: #059641; }
:where(html.is-night) .st-row.is-weakest { box-shadow: inset 0 0 0 1.5px var(--orange); }
:where(html.is-night) .st-row.is-weakest em { background: rgba(255, 112, 33, 0.12); color: #ff9256; }
:where(html.is-night) .st-row.is-weakest .st-bar i { background: var(--orange); }
:where(html.is-night) .st-face { color: var(--grey); }
:where(html.is-night) .st-face svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
:where(html.is-night) .st-face .eye { fill: currentColor; stroke: none; }
:where(html.is-night) .st-face.is-happy { color: #059641; }
:where(html.is-night) .st-face.is-sad { color: var(--orange); }
:where(html.is-night) .st-row.off small { color: var(--orange); }
:where(html.is-night) .st-detail { background: rgba(0, 0, 0, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:where(html.is-night) .st-side > small { color: #4cb674; }
:where(html.is-night) .st-side.is-weak > small { color: var(--orange); }
:where(html.is-night) .st-side:last-child > small { color: var(--grey); }
:where(html.is-night) .st-side p span { color: var(--grey); }
:where(html.is-night) .st-few { color: var(--grey); }
:where(html.is-night) .st-side a { color: var(--orange); }
:where(html.is-night) .st-lv i { background: var(--ink); }
:where(html.is-night) .st-lv i.is-low { background: var(--orange); }
:where(html.is-night) .st-lv small { color: var(--grey); }
:where(html.is-night) .du-tally { color: var(--grey); }
:where(html.is-night) .du-tally b { color: var(--ink); }
:where(html.is-night) .du-tally .is-won { color: #4cb674; }
:where(html.is-night) .du-tally .is-lost { color: var(--orange); }
:where(html.is-night) .du-rival { background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .du-initial { background: var(--ink); color: var(--bg); }
:where(html.is-night) .du li { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:where(html.is-night) .du li.is-won { box-shadow: inset 3px 0 0 #059641, inset 0 0 0 1px rgba(5, 150, 65, 0.25); }
:where(html.is-night) .du li.is-lost { box-shadow: inset -3px 0 0 var(--orange), inset 0 0 0 1px rgba(255, 112, 33, 0.2); }
:where(html.is-night) .du-side strong { color: #4c4b46; }
:where(html.is-night) .du-side.is-lead strong { color: var(--ink); }
:where(html.is-night) .du-mid small { color: var(--grey); }
:where(html.is-night) .du-result { background: rgba(255, 255, 255, 0.06); color: var(--grey); }
:where(html.is-night) .is-won .du-result { background: rgba(5, 150, 65, 0.14); color: #4cb674; }
:where(html.is-night) .is-lost .du-result { background: rgba(255, 112, 33, 0.12); color: #ff9256; }
:where(html.is-night) .ov-tile { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .ov-tile small { color: var(--grey); }
:where(html.is-night) a.ov-tile span { color: var(--orange); }
:where(html.is-night) a.ov-tile:hover { box-shadow: inset 0 0 0 1px var(--orange); }
:where(html.is-night) .hist-none { color: var(--grey); }
:where(html.is-night) .hist-none a { color: var(--orange); }
:where(html.is-night) .bd { color: #4d4c47; }
:where(html.is-night) .bd-disc { box-shadow: inset 0 0 0 1.5px #32312c; color: #3e3d38; }
:where(html.is-night) .bd small { color: var(--grey); }
:where(html.is-night) .bd-leds i { background: #32312c; }
:where(html.is-night) .bd-leds i.on { background: var(--orange); }
:where(html.is-night) .bd.is-won { color: var(--ink); }
:where(html.is-night) .bd.is-won .bd-disc { background: var(--ink); color: #0b0b09; box-shadow: 0 2px 0 #ffffff, 0 8px 16px -8px rgba(255, 255, 255, 0.5); }
:where(html.is-night) .bd.is-won .bd-disc::after { background: var(--orange); }
:where(html.is-night) .bd.is-hard .bd-disc { background: var(--orange); color: #000000; box-shadow: 0 2px 0 #ff9256, 0 8px 16px -8px rgba(255, 255, 255, 0.4); }
:where(html.is-night) .bd.is-hard .bd-disc::after { background: #000000; }
:where(html.is-night) .bd.bdc { color: var(--soft); background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .bdc .bd-disc { box-shadow: inset 0 0 0 1.5px #494843; color: #63625d; }
:where(html.is-night) .bdc p { color: var(--grey); }
:where(html.is-night) .bdc .bd-leds i { background: #3d3c37; }
:where(html.is-night) .bdc .bd-leds i.on { background: var(--orange); }
:where(html.is-night) .bdc .bdc-lit { color: var(--soft); }
:where(html.is-night) .bd.bdc.is-won { color: var(--ink); background: rgba(0, 0, 0, 0.7); }
:where(html.is-night) .bdc-state i { background: #059641; box-shadow: 0 0 6px #059641; }
:where(html.is-night) .bdc-state svg { fill: none; stroke: currentColor; stroke-width: 1.3; }
:where(html.is-night) .bdc.is-won .bdc-state { background: rgba(5, 150, 65, 0.12); color: #4cb674; }
:where(html.is-night) .bdc:not(.is-won) .bdc-state { background: rgba(255, 255, 255, 0.05); color: var(--grey); }
:where(html.is-night) .bd.bdc:not(.is-won) { background: none; box-shadow: none; outline: 1px dashed #44433e; outline-offset: -1px; }
:where(html.is-night) .bdc-count { color: var(--grey); }
:where(html.is-night) .rk { border-top: 1px solid #383732; }
:where(html.is-night) .rk b { color: var(--ink); }
:where(html.is-night) .rk .seg i { background: #2b2a25; }
:where(html.is-night) .rk .seg i.on { background: var(--ink); animation: rk-on-night .25s calc(.2s + var(--i) * 60ms) both; }
:where(html.is-night) .rk small { color: var(--grey); }
:where(html.is-night) .rankup { background: rgba(247, 247, 247, 0.92); color: #0b0b09; }
:where(html.is-night) .rankup::before { background: radial-gradient(circle at 50% 45%, rgba(255, 112, 33, 0.5), rgba(255, 112, 33, 0.12) 35%, transparent 65%); }
:where(html.is-night) .ru-eyebrow { color: #767672; }
:where(html.is-night) .ru-eyebrow em { color: var(--orange); }
:where(html.is-night) .ru-new { color: var(--orange); text-shadow: 0 0 60px rgba(255, 112, 33, 0.55); }
:where(html.is-night) .ru-ring, :where(html.is-night) .ru-ping { background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 112, 33, 0.18) 30%, transparent 60%); }
:where(html.is-night) .ru-rays i { background: linear-gradient(#000000, var(--orange) 60%, transparent); }
:where(html.is-night) .rankup .seg i { background: #d3d3d3; }
:where(html.is-night) .rankup .seg i.on { background: #0b0b09; }
:where(html.is-night) .rankup .seg i.on:nth-child(10) { background: var(--orange); }
:where(html.is-night) .ru-line { color: #767672; }
:where(html.is-night) .rankup.is-on .seg i.on { animation: seg-on-night .25s both; }
:where(html.is-night) .rankup.is-on .seg i.on:nth-child(10) { animation-name: seg-top-night; }
:where(html.is-night) .ru-unlock { background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 112, 33, 0.55), 0 0 40px -10px rgba(255, 112, 33, 0.45); }
:where(html.is-night) .ru-unlock::after { background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.18), transparent); }
:where(html.is-night) .ru-unlock small { color: var(--orange); }
:where(html.is-night) .ru-unlock .gm-spots { stroke: #0b0b09; }
:where(html.is-night) .ru-unlock span { color: #767672; }
:where(html.is-night) .bd-toast { border: 0; border-radius: 16px; background: linear-gradient(#151410, #282722); color: var(--ink); box-shadow: inset 0 0 0 1px #3d3c37, inset 0 2px 0 1px rgba(0, 0, 0, 0.75), 0 22px 44px -14px rgba(255, 255, 255, 0.45); }
:where(html.is-night) .bd-toast::after { background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.55), transparent); }
:where(html.is-night) .bd-toast p small { color: var(--orange); }
:where(html.is-night) .bd-toast p span { color: var(--grey); }
:where(html.is-night) .bt-bar { background: var(--orange); }
:where(html.is-night) .rankcard { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .rc-bar { background: rgba(255, 255, 255, 0.08); }
:where(html.is-night) .rc-bar i { background: var(--orange); }
:where(html.is-night) .rankcard p { color: var(--grey); }
:where(html.is-night) .rankcard p span:first-child { color: var(--ink); }
:where(html.is-night) .bd-news { border-top: 1px solid #383732; }
:where(html.is-night) .bd-news p { color: var(--soft); }
:where(html.is-night) .bd-news p b { color: var(--ink); }
:where(html.is-night) .bar-me { background: linear-gradient(#090907, #1d1c18); box-shadow: inset 0 0 0 1px #383732, inset 0 1px 0 1px rgba(0, 0, 0, 0.8), 0 6px 14px -10px rgba(255, 255, 255, 0.35); }
:where(html.is-night) .bar-me img { box-shadow: 0 0 0 2px #0f0e0b, 0 0 0 3px #383732; }
:where(html.is-night) .bar-me.is-hot img { box-shadow: 0 0 0 2px #0f0e0b, 0 0 0 3.5px var(--orange), 0 0 12px -2px rgba(255, 112, 33, 0.6); }
:where(html.is-night) .bar-me.is-kept img { box-shadow: 0 0 0 2px #0f0e0b, 0 0 0 3.5px #059641; }
:where(html.is-night) .bar-streak { color: var(--grey); }
:where(html.is-night) .bar-streak .flame { color: var(--grey); }
:where(html.is-night) .bar-streak .flame b { color: var(--ink); }
:where(html.is-night) .bar-me:disabled { box-shadow: none; }
:where(html.is-night) .bar-me:not(:disabled):hover { box-shadow: inset 0 0 0 1px #585752, 0 6px 14px -8px rgba(255, 255, 255, 0.35); }
:where(html.is-night) .bar-me:not(:disabled):hover img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--orange); }
:where(html.is-night) .cal-head small { color: var(--grey); }
:where(html.is-night) .cal-step { color: var(--ink); }
:where(html.is-night) .cal-step:hover { background: rgba(255, 255, 255, 0.06); }
:where(html.is-night) .cal-step:disabled { background: none; }
:where(html.is-night) .cal-grid em { color: var(--grey); }
:where(html.is-night) .cal-day { color: #4c4b46; }
:where(html.is-night) .cal-day.is-off { color: #31302b; }
:where(html.is-night) .cal-day.is-missed { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:where(html.is-night) .cal-day:is(.is-done, .is-part) { color: var(--ink); background: linear-gradient(#090907, #191814); box-shadow: inset 0 0 0 1px #32312d, inset 0 1px 0 1px rgba(0, 0, 0, 0.8); }
:where(html.is-night) .cal-day.is-part { box-shadow: inset 0 0 0 1px #32312d, inset 0 0 0 2px rgba(255, 255, 255, 0.04); background: none; }
:where(html.is-night) .cal-day:is(.is-done, .is-part)::after { background: var(--ink); }
:where(html.is-night) .cal-day.is-done::after { background: #059641; }
:where(html.is-night) .cal-day.is-open { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--orange); }
:where(html.is-night) .cal-day.is-picked { box-shadow: inset 0 0 0 1.5px var(--orange), 0 6px 14px -8px rgba(255, 112, 33, 0.55); }
:where(html.is-night) .cal-detail { background: linear-gradient(#080806, #151410); box-shadow: inset 0 0 0 1px #2d2c27, inset 0 1px 0 1px rgba(0, 0, 0, 0.8), 0 18px 30px -24px rgba(255, 255, 255, 0.35); }
:where(html.is-night) .cal-when { color: var(--soft); }
:where(html.is-night) .cal-when b { color: var(--ink); }
:where(html.is-night) .cal-tag { background: rgba(255, 255, 255, 0.05); color: var(--grey); }
:where(html.is-night) .cal-tag.is-done { background: rgba(5, 150, 65, 0.12); color: #4cb674; }
:where(html.is-night) .cal-score span { color: var(--grey); }
:where(html.is-night) .cal-score i { background: linear-gradient(90deg, var(--ink) calc(var(--s) * 100%), rgba(255, 255, 255, 0.08) 0); }
:where(html.is-night) .cal-ms li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
:where(html.is-night) .cal-ms li small { color: var(--grey); }
:where(html.is-night) :is(.cal-sq, .cal-key) i { background: rgba(255, 255, 255, 0.07); }
:where(html.is-night) :is(.cal-sq, .cal-key) .c-p { background: var(--ink); }
:where(html.is-night) :is(.cal-sq, .cal-key) .c-g { background: linear-gradient(to top, var(--ink) 50%, rgba(255, 255, 255, 0.07) 50%); }
:where(html.is-night) :is(.cal-sq, .cal-key) .c-m::after { background: var(--orange); }
:where(html.is-night) .cal-key { color: var(--grey); }
:where(html.is-night) .cal-none { color: var(--grey); }
:where(html.is-night) .cal-none a { color: var(--orange); }
:where(html.is-night) .hist .score small { color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .cal-day.is-open { animation: cal-open-night 1.6s ease-in-out infinite; }
}
:where(html.is-night) .hist li:hover { background: rgba(0, 0, 0, 0.7); }
:where(html.is-night) .hist-kind { background: rgba(255, 255, 255, 0.06); color: var(--soft); }
:where(html.is-night) .hist-kind.is-daily { background: var(--ink); color: #0b0b09; }
:where(html.is-night) .hist-kind:is(.is-rush, .is-theory-rush) { background: rgba(255, 112, 33, 0.12); color: #ff9256; }
:where(html.is-night) .hist-kind.is-match { background: rgba(5, 150, 65, 0.12); color: #4cb674; }
:where(html.is-night) .hist-kind.is-duel { background: rgba(92, 156, 255, 0.12); color: var(--blue); }
:where(html.is-night) .hist-kind:is(.is-weak-spots, .is-theory-weak-spots) { background: none; box-shadow: inset 0 0 0 1px rgba(255, 112, 33, 0.55); color: #ff9256; }
:where(html.is-night) .hist-name small { color: var(--grey); }
:where(html.is-night) .hist-bars i { background: #3d3c37; }
:where(html.is-night) .hist-bars .c-p { background: var(--ink); }
:where(html.is-night) .hist-bars .c-g { background: var(--ink); }
:where(html.is-night) .hist-bars .c-m { background: var(--orange); }
:where(html.is-night) .hist-more { color: var(--soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
:where(html.is-night) .hist-more:hover { color: var(--ink); }
:where(html.is-night) .to-keys { color: var(--grey); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
:where(html.is-night) .to-keys svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .to-keys:hover { color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
:where(html.is-night) .id-card { background: linear-gradient(#e9e9e9, #f1f1f1); color: #12120f; box-shadow: 0 0 0 1px #ffffff, inset 0 1px 0 rgba(0, 0, 0, 0.06), 0 40px 70px -40px rgba(255, 255, 255, 0.55); }
:where(html.is-night) .id-head { border-bottom: 1px solid #dbdbdb; }
:where(html.is-night) .id-head :is(img, .initial) { box-shadow: 0 0 0 1px #d3d3d3; }
:where(html.is-night) .id-head .initial { background: #12120f; color: #ededed; }
:where(html.is-night) .id-head h2 { border: 0; color: #0b0b09; }
:where(html.is-night) .id-head small { color: #767672; }
:where(html.is-night) .id-doors li { border-bottom: 1px solid #e2e2e2; }
:where(html.is-night) .id-icon { color: #12120f; }
:where(html.is-night) .id-icon svg { fill: currentColor; }
:where(html.is-night) .id-state { color: #666662; }
:where(html.is-night) .id-state i { background: #059641; box-shadow: 0 0 8px rgba(5, 150, 65, 0.8); }
:where(html.is-night) .id-link { box-shadow: inset 0 0 0 1px #c5c5c5; color: #12120f; }
:where(html.is-night) .id-link:hover { box-shadow: inset 0 0 0 1px var(--orange); color: var(--orange); }
:where(html.is-night) .id-card .mail input { background: #e5e5e5; border-color: #cccccc; color: #12120f; }
:where(html.is-night) .id-card .mail .key { background: none; box-shadow: inset 0 0 0 1px #c5c5c5; color: #12120f; }
:where(html.is-night) .id-card .mail .key:hover { box-shadow: inset 0 0 0 1px var(--orange); color: var(--orange); background: none; }
:where(html.is-night) .id-card .mail + .note { color: #767672; }
:where(html.is-night) .id-foot p { color: #767672; }
:where(html.is-night) .id-kill { color: #a1a19d; }
:where(html.is-night) .id-kill:hover { color: var(--orange); }
:where(html.is-night) .id-danger { border-top: 1px solid #dbdbdb; }
:where(html.is-night) .id-danger p { color: #666662; }
:where(html.is-night) .id-confirm input { border: 1px solid #cccccc; border-radius: 6px; background: #e5e5e5; color: #12120f; }
:where(html.is-night) .id-confirm input:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: transparent; }
:where(html.is-night) .id-go { background: var(--orange); color: #000000; }
:where(html.is-night) .id-out { color: #767672; }
:where(html.is-night) .id-out:hover { color: #0b0b09; }
:where(html.is-night) .start a { color: var(--ink); }
:where(html.is-night) .start a::after { color: var(--orange); }
:where(html.is-night) .start a:hover { color: var(--orange); }
:where(html.is-night) .signing .logo { fill: var(--ink); }
:where(html.is-night) .signing p { color: var(--grey); }
:where(html.is-night) .lab-pick button { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 3px 0 #585752; color: var(--ink); }
:where(html.is-night) .lab-pick button::after { background: var(--p); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
:where(html.is-night) .lab-pick button:hover { background: linear-gradient(#060502, #1d1c17); }
:where(html.is-night) .lab-pick .lab-ico { fill: none; stroke: #b7b6b2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .lab-pick .lab-ico .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .lab-pick small { color: var(--grey); }
:where(html.is-night) .lab-pick [aria-pressed="true"] { background: linear-gradient(#000000, #151410); box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .lab-pick [aria-pressed="true"] .led { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
:where(html.is-night) .lab-pick [aria-pressed="true"] .lab-ico { stroke: var(--orange); }
:where(html.is-night) .lab-track [data-n="1"] { --p: #1a1915; }
:where(html.is-night) .lab-track [data-n="2"] { --p: #0d0d0a; }
:where(html.is-night) .lab-track [data-n="3"] { --p: #282111; }
:where(html.is-night) .lab-track [data-n="4"] { --p: #c5c5c3; }
:where(html.is-night) .lab-track [data-n="5"] { --p: #e4e4e4; }
:where(html.is-night) .lab-track [data-n="6"] { --p: #ff712c; }
:where(html.is-night) .lab-track [data-n="7"] { --p: #2b2f34; }
:where(html.is-night) .lab-track [data-n="8"] { --p: #b4bccc; }
:where(html.is-night) .vh { --p: #1a1915; --ink: #e2e2e0; --acc: #5c9cff; background: var(--p); color: var(--ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--p), #ffffff 12%); }
:where(html.is-night) .vh[data-m="2"] { --p: #0d0d0a; --acc: #26a55d; }
:where(html.is-night) .vh[data-m="3"] { --p: #282111; --ink: #d2cbc0; --acc: #ba8b3f; }
:where(html.is-night) .vh[data-m="4"] { --p: #c5c5c3; --ink: #1a1a16; --acc: #0b0b09; }
:where(html.is-night) .vh[data-m="5"] { --p: #e4e4e4; --ink: #282824; --acc: #502800; }
:where(html.is-night) .vh[data-m="6"] { --p: #ff712c; --ink: #fae8e2; --acc: #000000; }
:where(html.is-night) .vh[data-m="7"] { --p: #2b2f34; --ink: #d2d6da; --acc: #5c9cff; }
:where(html.is-night) .vh[data-m="8"] { --p: #b4bccc; --ink: #191d24; --acc: #7259c2; }
:where(html.is-night) .vh-key { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 30%, transparent); }
:where(html.is-night) .vh-key:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
:where(html.is-night) .vh-key i { background: color-mix(in oklab, var(--ink) 30%, transparent); }
:where(html.is-night) .vh-key[aria-pressed="true"] i { background: var(--acc); }
:where(html.is-night) .vh-play { background: var(--ink); color: var(--p); box-shadow: none; }
:where(html.is-night) .vh-play:hover { background: color-mix(in oklab, var(--ink), var(--p) 15%); }
:where(html.is-night) .vk-l { color: color-mix(in oklab, var(--ink) 70%, transparent); }
:where(html.is-night) .vk-track { fill: none; stroke: color-mix(in oklab, var(--ink) 16%, transparent); stroke-width: 3; stroke-linecap: round; }
:where(html.is-night) .vk-arc { fill: none; stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 3; stroke-linecap: round; }
:where(html.is-night) .vk-disc { fill: color-mix(in oklab, var(--p), #ffffff 7%); }
:where(html.is-night) .vk-ptr { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
:where(html.is-night) .vk.is-on .vk-l { color: var(--ink); }
:where(html.is-night) .vh-genres { border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
:where(html.is-night) .vh-genres button { color: color-mix(in oklab, var(--ink) 55%, transparent); }
:where(html.is-night) .vh-genres button:hover { color: var(--ink); }
:where(html.is-night) .vh-genres [aria-pressed="true"] { color: var(--ink); box-shadow: 0 1px 0 var(--acc); }
:where(html.is-night) .lab-what { color: var(--soft); }
:where(html.is-night) .lab-what b { color: var(--ink); }
:where(html.is-night) .lab-notice a { color: var(--ink); }
:where(html.is-night) .lab-notice a:hover { color: var(--orange); }
:where(html.is-night) .dbg button { background: #000000; box-shadow: inset 0 0 0 1px #242420; color: var(--ink); }
:where(html.is-night) .dbg small { color: var(--grey); }
:where(html.is-night) .dbg [aria-pressed="true"] { background: var(--ink); color: #000000; box-shadow: none; }
:where(html.is-night) .dbg [aria-pressed="true"] small { color: #4c4c48; }
:where(html.is-night) .save-app { background: var(--ink); color: #000000; }
@media (max-width: 600px) {
:where(html.is-night) .results.sets { background: #1b1a16; }
:where(html.is-night) .sets > h2 { background: linear-gradient(#1b1a16 78%, rgba(27, 26, 22, 0)); }
:where(html.is-night) .sets > h2::before { background: #44433e; }
:where(html.is-night) .sets .results-keys { background: linear-gradient(rgba(27, 26, 22, 0), #1b1a16 48%); }
}
:where(html.is-night) .id-act { color: #93938f; }
:where(html.is-night) .id-act:hover, :where(html.is-night) .id-act.is-sure { color: var(--orange); }
:where(html.is-night) .set-in { box-shadow: inset 0 0 0 1px #3d3c37; }
:where(html.is-night) .set-in b { color: var(--orange); }
:where(html.is-night) .set-in small { color: var(--grey); }
:where(html.is-night) .set { border-top: 1px solid #383732; }
:where(html.is-night) .set:last-of-type { border-bottom: 1px solid #383732; }
:where(html.is-night) .set small { color: var(--grey); }
:where(html.is-night) .set-sw { background: #3d3c37; box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.28); }
:where(html.is-night) .set-sw::after { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 2px 3px rgba(255, 255, 255, 0.3); }
:where(html.is-night) .set[aria-checked="true"] .set-sw { background: var(--orange); }
@media (hover: hover) {
:where(html.is-night) .set:hover b { color: var(--orange); }
}
:where(html.is-night) .snd-head small { color: var(--grey); }
:where(html.is-night) .snd-row { border-top: 1px solid #383732; }
:where(html.is-night) .snd-row:last-child { border-bottom: 1px solid #383732; }
:where(html.is-night) .snd-row small { color: var(--grey); }
:where(html.is-night) .snd-sw[aria-checked="true"] .set-sw { background: var(--orange); }
:where(html.is-night) .snd-del { box-shadow: inset 0 0 0 1px #3d3c37; color: var(--grey); }
@media (hover: hover) {
:where(html.is-night) .snd-del:hover { color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
:where(html.is-night) .snd-add:hover { box-shadow: inset 0 0 0 1px var(--orange); }
}
:where(html.is-night) .snd-add { box-shadow: inset 0 0 0 1px #3d3c37; }
:where(html.is-night) .snd-add:focus-within { box-shadow: inset 0 0 0 2px var(--orange); }
:where(html.is-night) .snd-add small { color: var(--grey); }
:where(html.is-night) .snd-add i { background: var(--orange); }
:where(html.is-night) .snd-add i::before, :where(html.is-night) .snd-add i::after { background: #000000; }
:where(html.is-night) .snd-add.is-busy i { background: none; box-shadow: inset 0 0 0 2px #3d3c37; }
:where(html.is-night) .snd-add.is-busy i::before { border-radius: 50%; background: none; border: 2px solid transparent; border-top-color: var(--orange); }
:where(html.is-night) .snd-tip button { color: var(--grey); }
:where(html.is-night) .snd-tip button:hover, :where(html.is-night) .snd-tip button[aria-expanded="true"] { color: var(--orange); }
:where(html.is-night) .snd-tip svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .snd-tip-text { background: var(--ink); color: #282722; }
:where(html.is-night) .snd-tip-text b { color: #000000; }
:where(html.is-night) .snd-note { color: var(--ink); }
:where(html.is-night) .sets.is-drop { box-shadow: inset 0 0 0 2px var(--orange); }
:where(html.is-night) .set-pair { background: #3d3c37; box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.28); }
:where(html.is-night) .set-pair > i:not(.set-thumb) { color: #868682; }
:where(html.is-night) .set-pair svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .set-thumb { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 2px 3px rgba(255, 255, 255, 0.25); }
:where(html.is-night) .set[aria-checked="false"] .set-pair > i:nth-child(2), :where(html.is-night) .set[aria-checked="true"] .set-pair > i:nth-child(3) { color: var(--ink); }
:where(html.is-night) .set-run { stroke: var(--orange); stroke-width: 2.2; stroke-dasharray: 0 100; }
:where(html.is-night) .turn { background: var(--ink); color: #0b0b09; box-shadow: 0 14px 30px -12px rgba(255, 255, 255, 0.55); }
:where(html.is-night) .turn small { color: #585752; }
:where(html.is-night) .turn-phone i { border: 1.6px solid currentColor; border-radius: 4px; }
:where(html.is-night) .turn-phone i::after { background: var(--orange); }
:where(html.is-night) .sc-act.is-soon h2 { color: var(--grey); }
:where(html.is-night) .sc-soon { background: var(--ink); color: #12110d; }
:where(html.is-night) .sc-act { background: linear-gradient(#100f0b, #262520); box-shadow: inset 0 0 0 1px #3b3a35, inset 0 2px 0 1px rgba(0, 0, 0, 0.85), 0 30px 50px -30px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(255, 255, 255, 0.05); }
:where(html.is-night) .sc-cover { background: linear-gradient(100deg, #1e1a0f 0, #080600 7%, #0f0c04 60%, #1a160c 100%); box-shadow: inset 6px 0 0 var(--orange), inset 9px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 26px -14px rgba(255, 255, 255, 0.45), 0 2px 3px rgba(255, 255, 255, 0.12); }
:where(html.is-night) .sc-cover-tag { color: var(--grey); }
:where(html.is-night) .sc-act-line { color: var(--soft); }
:where(html.is-night) .sc-here { background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .sc-here .sc-ico { background: #f4f4f4; color: var(--orange); }
:where(html.is-night) .sc-here-text small { color: var(--grey); }
:where(html.is-night) .sc-here-text em { color: var(--soft); }
:where(html.is-night) .sc-chaps i { background: rgba(255, 255, 255, 0.1); }
:where(html.is-night) .sc-chaps b { background: var(--orange); }
:where(html.is-night) .sc-machines a { background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
:where(html.is-night) .sc-machines a:hover { background: #000000; color: var(--orange); }
:where(html.is-night) .sc-machines b { color: var(--grey); }
:where(html.is-night) .sc-act-body .sc-facts svg { fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-linecap: round; }
:where(html.is-night) .sc-act-body .sc-facts .fill { fill: var(--orange); stroke: none; }
:where(html.is-night) .sc-cols { background: #f4f4f4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.6), 0 18px 30px -18px rgba(255, 255, 255, 0.5); }
:where(html.is-night) .sc-col i { background: #d9d9d7; }
:where(html.is-night) .sc-col i.on { background: var(--orange); box-shadow: 0 0 5px rgba(255, 112, 33, 0.7); }
:where(html.is-night) .sc-col i.next { background: #0e0e0a; }
:where(html.is-night) .sc-facts { color: var(--grey); }
:where(html.is-night) .sc-facts b { color: var(--ink); }
:where(html.is-night) .sc-readout { background: #f4f4f4; color: #0e0e0a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.6), 0 14px 26px -16px rgba(255, 255, 255, 0.5); }
:where(html.is-night) .sc-ro-text b { color: var(--orange); }
:where(html.is-night) .sc-ro-text small { color: #81817c; }
:where(html.is-night) .sc-ro-text small svg, :where(html.is-night) .sc-kind svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-ro-text small .fill, :where(html.is-night) .sc-kind .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-ch { border-top: 1px solid rgba(255, 255, 255, 0.08); }
:where(html.is-night) .sc-ch-name small { color: var(--grey); }
:where(html.is-night) .sc-ico { color: var(--ink); }
:where(html.is-night) .sc-ico svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-ico .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-ico text { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-ch-name .sc-ico { color: #878682; }
:where(html.is-night) .sc-ring { stroke: rgba(255, 255, 255, 0.1); stroke-width: 2; }
:where(html.is-night) .sc-ring-on { stroke: var(--orange); stroke-width: 2.4; }
:where(html.is-night) .sc-ch-name em { color: var(--grey); }
:where(html.is-night) .sc-pad { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 3px 0 #585752; color: #94938f; }
:where(html.is-night) .sc-pad svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-pad .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-pad:hover:not(:disabled) { color: var(--ink); }
:where(html.is-night) .sc-pad:active:not(:disabled) { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .sc-pad:disabled { background: #201f1b; box-shadow: inset 0 0 0 1px #34332e; color: #484742; }
:where(html.is-night) .sc-suns i { background: #3f3e39; }
:where(html.is-night) .sc-pad.is-done { background: linear-gradient(#140801, #3f1904); box-shadow: inset 0 0 0 1px #8e4018, 0 3px 0 #af5527; color: var(--orange); }
:where(html.is-night) .sc-pad.is-done .sc-suns i.on { background: var(--orange); box-shadow: 0 0 4px rgba(255, 112, 33, 0.6); }
:where(html.is-night) .sc-pad.is-done.is-info { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 3px 0 #585752; }
:where(html.is-night) .sc-pad.is-next::after { border-radius: 11px; border: 1.5px solid var(--orange); }
@media (prefers-reduced-motion: no-preference) {
:where(html.is-night) .sc-col i.on { animation: sc-led-night .35s ease-out calc(var(--c) * 40ms + var(--k) * 25ms) backwards; }
}
:where(html.is-night) .sc-back { color: var(--grey); }
:where(html.is-night) .sc-back:hover { color: var(--ink); }
:where(html.is-night) .sc-back svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-title small { color: var(--orange); }
:where(html.is-night) .sc-kind { color: var(--grey); }
:where(html.is-night) .sc-chap { color: var(--grey); }
:where(html.is-night) .sc-text { color: var(--soft); }
:where(html.is-night) .sc-task { color: var(--ink); }
:where(html.is-night) .sc-page .sc-text { color: var(--ink); }
:where(html.is-night) .sc-keep { background: linear-gradient(#140801, #291002); box-shadow: inset 0 0 0 1px #5d2b0e; }
:where(html.is-night) .sc-keep b { color: var(--orange); }
:where(html.is-night) .sc-keep p { color: var(--ink); }
:where(html.is-night) .sc-coming b, :where(html.is-night) .sc-examples > b { color: var(--grey); }
:where(html.is-night) .sc-coming p { color: var(--soft); }
:where(html.is-night) .sc-coming span { color: var(--grey); }
:where(html.is-night) .sc-coming svg { fill: none; stroke: var(--grey); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-coming .fill { fill: var(--grey); stroke: none; }
:where(html.is-night) .sc-ex-head { color: var(--grey); }
:where(html.is-night) .sc-ex { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 3px 0 #585752; }
:where(html.is-night) .sc-ex:active { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .sc-ex span { color: #d4d4d3; }
:where(html.is-night) .sc-ex .fill { fill: var(--orange); }
:where(html.is-night) .sc-dots i { background: rgba(255, 255, 255, 0.12); }
:where(html.is-night) .sc-dots i.done { background: rgba(255, 112, 33, 0.45); }
:where(html.is-night) .sc-dots i.on { background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 112, 33, 0.18); }
:where(html.is-night) .sc-chap em { color: var(--grey); }
:where(html.is-night) .sc-notice { background: linear-gradient(#0d0c08, #1b1a15); box-shadow: inset 0 0 0 1px #31302b, inset 0 2px 0 1px rgba(0, 0, 0, 0.8), 0 16px 30px -22px rgba(255, 255, 255, 0.35); }
:where(html.is-night) .sc-notice-ico { background: #f4f4f4; color: var(--orange); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 6px 14px -8px rgba(255, 255, 255, 0.5); }
:where(html.is-night) .sc-notice-ico svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-notice-ico .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-chip { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--soft); }
:where(html.is-night) .sc-chip svg { fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-linecap: round; }
:where(html.is-night) .sc-chip .fill { fill: var(--orange); stroke: none; }
:where(html.is-night) .sc-chip b { color: var(--ink); }
:where(html.is-night) .sc-chip.is-plain svg { stroke: currentColor; }
:where(html.is-night) .sc-dev { background: linear-gradient(#1e1d19, #363530); box-shadow: inset 0 0 0 1px #4e4d48, inset 0 2px 0 1px rgba(0, 0, 0, 0.7), 0 3cqw 5cqw -1cqw rgba(255, 255, 255, 0.18), 0 .6cqw 1cqw rgba(255, 255, 255, 0.08); }
:where(html.is-night) .sc-dev-head { color: #94938f; }
:where(html.is-night) .sc-dev-head b { color: var(--ink); }
:where(html.is-night) .sc-steps > i { color: #767570; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:where(html.is-night) .sc-steps svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-steps .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-steps > i.is-on { color: var(--ink); background: linear-gradient(#0c0b07, #1d1c17); box-shadow: inset 0 0 0 1px #4c4b46, 0 2px 0 #585752; }
:where(html.is-night) .sc-steps > i.is-on .led { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
:where(html.is-night) .sc-steps > i.is-on.is-bad .led { background: #ff7676; box-shadow: 0 0 6px #ff7676; }
:where(html.is-night) .sc-steps > i:nth-child(3).is-on:not(.is-bad) .led { background: #00893b; box-shadow: 0 0 6px #00893b; }
:where(html.is-night) .sc-steps > i.is-past { color: #94938f; }
:where(html.is-night) .sc-hint { color: #767570; }
:where(html.is-night) .sc-train { background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.is-night) .sc-train b { color: var(--orange); }
:where(html.is-night) .sc-train p { color: var(--soft); }
:where(html.is-night) .sc-train em { color: var(--ink); }
:where(html.is-night) .sc-train-go { background: #e6e5e3; color: #100f0b; }
:where(html.is-night) .sc-train-go svg { background: var(--orange); fill: #000000; stroke: none; }
:where(html.is-night) .sc-train-go .fill { fill: #000000; }
:where(html.is-night) .sc-key.sc-tx { background: #e6e5e3; box-shadow: inset 0 0 0 1px #ffffff, 0 2px 0 #ffffff; color: #100f0b; }
:where(html.is-night) .sc-key.sc-tx > span svg { background: var(--orange); stroke: #000000; }
:where(html.is-night) .sc-key.sc-tx > span .fill { fill: #000000; }
:where(html.is-night) .sc-key.sc-tx:active:not(:disabled) { box-shadow: inset 0 0 0 1px #ffffff; }
:where(html.is-night) .sc-ans-label { color: #92918c; }
:where(html.is-night) .sc-answers.is-seg { background: #383732; box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25); }
:where(html.is-night) .sc-answers.is-seg > .sc-key { background: transparent; box-shadow: none; color: #acaba6; }
:where(html.is-night) .sc-answers.is-seg > .sc-key:hover:not(:disabled) { background: rgba(0, 0, 0, 0.35); }
:where(html.is-night) .sc-answers.is-seg > .sc-key.is-on { background: linear-gradient(#080300, #2f1302); box-shadow: inset 0 0 0 2px var(--orange), 0 3px 6px rgba(255, 255, 255, 0.18); color: #ff8f51; }
:where(html.is-night) .sc-answers.is-seg > .sc-key.is-right { background: linear-gradient(#010803, #031d0c); box-shadow: inset 0 0 0 2px #00893b; color: #60bb88; }
:where(html.is-night) .sc-answers.is-seg > .sc-key.is-wrong { background: linear-gradient(#120807, #3c1c19); box-shadow: inset 0 0 0 2px #ff7676; color: #ff9b9b; }
:where(html.is-night) .sc-foot { border-top: 1px solid #383732; }
:where(html.is-night) .sc-foot-hint { color: #7c7b76; }
:where(html.is-night) .sc-key { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 4px 0 #585752, 0 8px 12px -8px rgba(255, 255, 255, 0.3); color: #d4d4d3; }
:where(html.is-night) .sc-key > span svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-key > span .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-key small { color: #7c7b76; }
:where(html.is-night) .sc-key:active:not(:disabled), :where(html.is-night) .sc-key.is-down { box-shadow: inset 0 0 0 1px #4c4b46, 0 1px 0 #585752; }
:where(html.is-night) .sc-key.is-go { background: linear-gradient(#f45f1b, #ff7a32); color: #000000; box-shadow: inset 0 0 0 1px #ff8643, inset 0 1px 0 1px rgba(0, 0, 0, 0.25), 0 4px 0 #ff985e, 0 10px 16px -8px rgba(255, 152, 94, 0.45); }
:where(html.is-night) .sc-key.is-go small { color: rgba(0, 0, 0, 0.75); }
:where(html.is-night) .sc-key.is-go:active, :where(html.is-night) .sc-key.is-go.is-down { box-shadow: inset 0 0 0 1px #ff8643, 0 1px 0 #ff985e; }
:where(html.is-night) .sc-key.is-on { background: linear-gradient(#140801, #3f1904); box-shadow: inset 0 0 0 1px #8e4018, 0 4px 0 #af5527; color: var(--orange); }
:where(html.is-night) .sc-key.is-right { box-shadow: inset 0 0 0 2px #00893b, 0 4px 0 #3eab73; color: #60bb88; }
:where(html.is-night) .sc-key.is-wrong { box-shadow: inset 0 0 0 2px #ff7676, 0 4px 0 #ffa3a3; color: #ff9b9b; }
:where(html.is-night) .sc-key.is-lit .led, :where(html.is-night) .sc-mic.is-on .led { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
:where(html.is-night) .sc-piano { background: linear-gradient(#d4d4d2, #e9e9e8); box-shadow: inset 0 0 0 1px #f2f2f1, 0 10px 18px -12px rgba(255, 255, 255, 0.5); }
:where(html.is-night) .sc-w { background: linear-gradient(#060502, #1d1c17); box-shadow: inset 0 -5px 0 #32312c, inset 0 0 0 1px #44433e; color: #767570; }
:where(html.is-night) .sc-w:active, :where(html.is-night) .sc-w.is-down { background: linear-gradient(#12110d, #282722); box-shadow: inset 0 -2px 0 #32312c, inset 0 0 0 1px #44433e; }
:where(html.is-night) .sc-b { background: linear-gradient(#c5c5c3, #ededec); box-shadow: inset 0 -4px 0 #ffffff, inset 0 0 0 1px #ffffff, 0 3px 4px rgba(255, 255, 255, 0.4); }
:where(html.is-night) .sc-b:active, :where(html.is-night) .sc-b.is-down { box-shadow: inset 0 -1px 0 #ffffff, inset 0 0 0 1px #ffffff; }
:where(html.is-night) .sc-mode { background: #3d3c37; box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.28); }
:where(html.is-night) .sc-mode button { color: #868682; }
:where(html.is-night) .sc-mode button[aria-pressed="true"] { color: var(--ink); }
:where(html.is-night) .sc-mode svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-mode .fill { fill: currentColor; stroke: none; }
:where(html.is-night) .sc-mode-thumb { background: linear-gradient(#0c0b07, #25231e); box-shadow: inset 0 0 0 1px #4c4b46, 0 2px 3px rgba(255, 255, 255, 0.25); }
:where(html.is-night) .sc-voice { background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: var(--soft); }
:where(html.is-night) .sc-voice svg { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; }
:where(html.is-night) .sc-key.has-glyph .sc-glyph { color: #b7b6b2; }
:where(html.is-night) .sc-key.is-right .sc-glyph, :where(html.is-night) .sc-key.is-wrong .sc-glyph { color: inherit; }
:where(html.is-night) .sc-glyph svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:where(html.is-night) .sc-glyph .fill { fill: currentColor; stroke: none; }