@font-face {



    font-family: "Roboto";



    font-style: normal;



    font-weight: normal;



    src: url("../fonts/Roboto-VariableFont.ttf") format("truetype");



}







@font-face {



    font-family: "Espionage";



    font-style: normal;



    font-weight: normal;



    src: url("../fonts/Espionage.woff") format("woff");



    /* Espionage maps several punctuation code points to visible placeholder
       boxes. Keep its intended display glyphs and let the UI font render
       punctuation and symbols. */
    unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;



}







@font-face {



    font-family: "Metal Gear";



    font-style: normal;



    font-weight: normal;



    src: url("../fonts/Metal Gear.woff") format("woff");



}







*,



*::before,



*::after {



    box-sizing: border-box;



    -webkit-tap-highlight-color: #0000;



}







:root {



    --step--2: clamp(0.7813rem, 0.6829rem + 0.3575vw, 0.96rem);



    --step--1: clamp(0.9375rem, 0.7931rem + 0.525vw, 1.2rem);



    --step-0: clamp(1.125rem, 0.9188rem + 0.75vw, 1.5rem);



    --step-05: clamp(1.25rem, 0.975rem + 0.9vw, 1.625rem);



    --step-1: clamp(1.35rem, 1.0613rem + 1.05vw, 1.875rem);



    --step-2: clamp(1.62rem, 1.2219rem + 1.4475vw, 2.3438rem);



    --step-3: clamp(1.944rem, 1.4019rem + 1.9714vw, 2.9297rem);



    --step-4: clamp(2.3328rem, 1.6017rem + 2.6586vw, 3.6621rem);



    --step-5: clamp(2.7994rem, 1.8213rem + 3.5566vw, 4.5776rem);







    --text-outline: 0.04em 0 0.06em #11111175,



        0 0.04em 0.06em #11111175,



        -0.04em 0 0.06em #11111175,



        0 -0.04em 0.06em #11111175,



        -0.04em -0.04em 0.06em #11111175,



        -0.04em 0.04em 0.06em #11111175,



        0.04em -0.04em 0.06em #11111175,



        0.04em 0.04em 0.06em #11111175;



    /* === Monochrome palette: single hue drives all accent colors === */



    --accent-h: 220;



    /* Primary accent */

    --accent: hsl(var(--accent-h) 100% 60%);

    --accent-bright: hsl(var(--accent-h) 100% 72%);

    --accent-muted: hsl(var(--accent-h) 40% 55%);

    --accent-dim: hsl(var(--accent-h) 30% 40%);

    --accent-subtle: hsl(var(--accent-h) 50% 18%);



    /* Functional colors */

    --correct-color: #192;

    --wrong-color: #912;



    /* Glow helpers */

    --accent-glow: 0 0 20px hsl(var(--accent-h) 100% 60% / 0.5);

    --accent-glow-sm: 0 0 10px hsl(var(--accent-h) 100% 60% / 0.3);



    --text-color: #ffffff;



    --background-color: #0a0a0f;



    --preamble-color: hsl(var(--accent-h) 30% 60%);



    --big-input-bg-color: #000a;



    --theme-color: #3377ff;



    --body-gradient-start: color-mix(in srgb, var(--theme-color, #217fe4) 8%, #000);



    --theme-glow: 0 0 6px hsl(var(--accent-h) 100% 60% / 0.3);



    --theme-glow-sm: 0 1px 2px hsl(var(--accent-h) 100% 60% / 0.2);



    --theme-glow-lg: 0 0 0.15rem hsl(var(--accent-h) 100% 60% / 0.4), 0 0 0.1rem hsl(var(--accent-h) 100% 60% / 0.2);



    --bracket-color: var(--accent);



    --bracket-box-shadow: 0 0 0.33rem hsl(var(--accent-h) 100% 60% / 0.4);



    --display-label-color: #ffffff;



    --offcanvas-fg: #ffffff;



    --offcanvas-bg: #111119;



    --small-input-bg-color: #1a1a25a0;



    --profile-bg: #12121a;



    --profile-arrow-bg: #0a0a0f;



    --profile-border: 1px solid hsl(var(--accent-h) 100% 60% / 0.2);



    --profile-select-bg: #12121a;



    --profile-select-border: 1px solid hsl(var(--accent-h) 100% 60% / 0.2);



    --multi-input-bg: #0a0a0fa0;



    --single-input-bg: #12121aa0;



    --spinner-bg: #0a0a0fa0;



    --folder-bg: #1a1a25;



    --profile-select-highlight: hsl(var(--accent-h) 100% 60% / 0.15);



    --profile-select-hover: #1a1a25;



    --profile-select-highlight-hover: hsl(var(--accent-h) 100% 60% / 0.25);



    --profile-select-delete: hsl(var(--accent-h) 50% 32% / 0.2);



    --profile-select-delete-hover: hsl(var(--accent-h) 50% 32% / 0.4);



    --switch-background-color: #1a1a25;



    --switch-unselected-color: #2a2a3a;



    --switch-selected-color: var(--accent);



    --switch-border-color: hsl(var(--accent-h) 100% 60% / 0.2);



    --switch-border-checked-color: hsl(var(--accent-h) 100% 60% / 0.6);



    --linear-settings-background-color: #12121a;



    --select-background-color: #12121a;



    --background-image-bg-color: #0a0a0fc0;



    --background-brightness: 0.35;



    --label-background-color: #0a0a0fdd;



    --label-color: var(--accent);



    --overlay-background-color: #0a0a0f;



    --three-d-background: rgba(18, 18, 26, 0.94);



    --inline-input-bg-color: #1a1a25;



    /* Background palette */

    --bg-dark: #0a0a0f;

    --bg-card: #12121a;

    --bg-panel: #1a1a25;

    --text-secondary: hsl(var(--accent-h) 20% 55%);



}







.light-mode {



    --accent: hsl(var(--accent-h) 80% 40%);

    --accent-bright: hsl(var(--accent-h) 80% 50%);

    --accent-muted: hsl(var(--accent-h) 30% 45%);

    --accent-dim: hsl(var(--accent-h) 20% 35%);

    --correct-color: #093;

    --wrong-color: #A03;



    --text-color: #111;



    --background-color: #e8e8f0;



    --text-outline: 0 0.01em 0.04em #11111175;



    --preamble-color: #555;



    --big-input-bg-color: #AAAa;



    --display-label-color: #001122;



    --offcanvas-fg: #111;



    --offcanvas-bg: #e2e4ec;



    --small-input-bg-color: #ffffffa0;



    --profile-bg: #d8d8e8;



    --profile-arrow-bg: #c0c0d0;



    --profile-border: 1px solid #888;



    --profile-select-bg: #d8d8e8;



    --profile-select-border: 1px solid #888;



    --multi-input-bg: #c8c8d8a0;



    --single-input-bg: #d0d0e0a0;



    --spinner-bg: #ffffffa0;



    --folder-bg: #c0c0d0a0;



    --profile-select-highlight: hsl(var(--accent-h) 60% 70%);



    --profile-select-hover: #c0c0d0;



    --profile-select-highlight-hover: hsl(var(--accent-h) 60% 78%);



    --profile-select-delete: hsl(var(--accent-h) 40% 70%);



    --profile-select-delete-hover: hsl(var(--accent-h) 40% 80%);



    --switch-background-color: #d0d0e0;



    --switch-unselected-color: #ffffff;



    --switch-selected-color: var(--accent);



    --switch-border-color: #888;



    --switch-border-checked-color: hsl(var(--accent-h) 80% 30%);



    --linear-settings-background-color: #d0d0e0;



    --select-background-color: #d0d0e0;



    --background-image-bg-color: #ffffff;



    --background-brightness: 0.75;



    --label-background-color: #ffffffdd;



    --label-color: var(--accent);



    --overlay-background-color: #d0d0e0a0;



    --three-d-background: rgba(236, 240, 246, 0.94);



    --inline-input-bg-color: #e8e8f0;



    --bg-dark: #e8e8f0;

    --bg-card: #d8d8e8;

    --bg-panel: #c0c0d0;

    --text-secondary: hsl(var(--accent-h) 20% 45%);



}



.light-mode label.open {



    background: rgb(248, 248, 248);



    border: 1px solid var(--theme-color, #217fe4);



}



.light-mode label.open:hover {



    background: rgb(244, 246, 250);



    box-shadow: 0 0 10px rgba(var(--accent-rgb, 33, 127, 228), 0.3), inset 0 0 6px rgba(var(--accent-rgb, 33, 127, 228), 0.1);



    text-shadow: 0 0 4px rgba(var(--accent-rgb, 33, 127, 228), 0.4);



}







/* Colorless mode - black and white */



.colorless {



    filter: grayscale(100%) !important;



}







.colorless svg,



.colorless .junk,



.colorless .emoji,



.colorless img {



    filter: grayscale(100%) !important;



}







body {



    height: 100svh;



    margin: 0;



    padding: 0;



    font-family: 'Rajdhani', "Roboto", sans-serif;



    font-size: var(--step-0);



    color: var(--text-color);



    background-color: var(--background-color);



    background-image: none;



}







h1,



h2,



h3,



h4,



h5,



h6,



p,



pre,



ul {



    margin: 0;



    padding: 0;



}







ul {



    list-style: none;



    max-height: 7.5em;



    padding: 0 1em;



    overflow: auto;



}







ul li:not(:last-child) {



    margin-bottom: 0.3em;



}







a {



  color: #1e90ff;



  text-decoration: none;



  transition: color 0.3s ease;



}







button {



    padding: 0.25em 0.75em;



    font-family: inherit;



    font-size: inherit;



    color: #dfe9ec;



    border: 0;



    background-color: #3c6c64;



    cursor: pointer;



}







button:disabled {



    background-color: #2b3a37;



}







button:not(:disabled):hover {



    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);



}







button.delete {



    background-color: #981f25;



}







button.delete:hover {



    box-shadow: 0 2px 4px #bf3f65;



}







button.explanation-button {



    background: var(--bracket-color, #4aa39a);



    border: 1px solid var(--bracket-color, #4aa39a);



    color: #fff;



    padding: 0.4rem 0.8rem;



    font-size: var(--step--2);



    font-weight: 600;



    border-radius: 6px;



    cursor: pointer;



    transition: all 0.2s ease;



    text-transform: uppercase;



    letter-spacing: 0.05em;



    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);



}







button.explanation-button:hover {



    background: rgb(var(--accent-rgb, 33,127,228));



    box-shadow: 0 4px 12px rgba(var(--accent-rgb, 33,127,228), 0.4);



    transform: translateY(-1px);



}







button.explanation-button:active {



    transform: translateY(0);



    box-shadow: 0 2px 4px rgba(var(--accent-rgb, 33,127,228), 0.3);



}







/* start of Utils */



.mb-05 {



    margin-bottom: 1rem;



}







.mb-1 {



    margin-bottom: 1.5rem;



}







.mb-2 {



    margin-bottom: 2.5rem;



}







.ffmono {



    font-family: monospace;



}



/* end of Utils */







.feedback {



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: 2000;



    position: fixed;



    transition: all 0.5s ease;



    display: flex;



    align-items: center;



    justify-content: center;



    opacity: 0;



    pointer-events: none;



}







.feedback.active {



    opacity: 1.0;



    pointer-events: all;



}







.feedback .noise-bg {



    border: 8px solid;



    border-left: none;



    border-right: none;



    background-image: url(../img/nnnoise.svg);



    opacity: 0.9;



    position: fixed;



    height: 100vh;



    width: 100vw;



    top: 0;



    left: 0;



    transition: all 0.5s ease;



    transform: scaleY(0);



}







.feedback.active .noise-bg {



    transform: scaleY(1);



}







.feedback--wrong {



    color: #d00;



}







.feedback--missed {



    color: #fff;



}







.feedback--right {



    color: #0d0;



}







.feedback span {



    font-family: "metal gear", sans-serif;



    font-size: var(--step-5);



    letter-spacing: 0.75rem;



    padding: 0.75rem;



    margin-bottom: 10rem;



    position: fixed;



    z-index: 10;



}







.feedback--wrong span {



    border: 4px solid #f00a;



}







.feedback--missed span {



    border: 4px solid #bbba;



}







.feedback--right span {



    border: 4px solid #0f0a;



}







.feedback .line {



    height: 4px;



    position: fixed;



    top: 50%;



    width: 100%;



    z-index: 10;



}







.feedback--wrong .line {



    background-color: #f00a;



}







.feedback--missed .line {



    background-color: #bbba;



}







.feedback--right .line {



    background-color: #0f0a;



}







@keyframes GameAreaFadeIn {



    from {



        filter: blur(12px);



        opacity: 0;



        transform: scale(0.97);



    }



    to {



        filter: blur(0);



        opacity: 1;



        transform: scale(1);



    }



}







.main-view {



    align-content: center;



    align-items: center;



    border: 1px solid hsl(var(--accent-h) 100% 60% / 0.2);



    box-shadow: 0 0 30px hsl(var(--accent-h) 100% 60% / 0.1), inset 0 0 60px rgba(0, 0, 0, 0.3);



    display: grid;



    height: 100%;



    letter-spacing: 0.1em;



    justify-content: space-evenly;



    max-width: 1200px;



    margin: 0 auto;



    overflow: hidden;



    position: relative;



    animation: GameAreaFadeIn 600ms ease-out forwards;



}







.overlay {



    position: absolute;



    top: 0;



    left: 0;



    z-index: -1;



    width: 100%;



    height: 100%;



    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="4" stitchTiles="stitch" /></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.12"/></svg>');



    background-color: var(--overlay-background-color);



    opacity: 0.30;



}







.background-image {



    position: absolute;



    top: 0;



    left: 0;



    z-index: -2;



    width: 100%;



    height: 100%;



    background-color: var(--background-image-bg-color);



    background-size: cover;



    background-position: center;



    filter: brightness(var(--background-brightness));



}







.metal-gear {



    font-family: "Espionage", sans-serif;



    letter-spacing: 0.25em;



}







.metal-gear .v3 {



    position: relative;



    display: inline-block;



    isolation: isolate;



}







.metal-gear .v3 img {



    position: absolute;



    top: 75%;



    left: 75%;



    z-index: -1;



    transform: translate(-50%, -50%);



    height: 5em;



    opacity: 0.75;



}







.metal-gear h1 {



    font-family: "Metal Gear", serif;



    letter-spacing: 0.3em;



}







.timer-wrap {



    width: 100%;



    margin: 0 auto;



    margin-bottom: 0.5rem;



}







.timer {



    background-color: #111a;



    border: 1px solid #000;



    border-bottom-width: 1px;



    position: relative;



    border-radius: 6px;



    overflow: auto;



}



.timer__bar {



    background: #3377ff;



    height: 8px;



    border-radius: 0 4px 4px 0;



    box-shadow: 0 0 8px rgba(51, 119, 255, 0.3);



    position: relative;



    overflow: hidden;



    will-change: width;



    transition: none;



}







/* Timer bar shimmer removed per user feedback */







.timer__bar.override {



    background: #2255cc;



    box-shadow: 0 0 8px rgba(51, 119, 255, 0.4);



}







.timer-controls {



    margin-top: 0.25rem;



    margin-bottom: 0.1rem;



    border-radius: 6px;



    padding: 0.25rem 0.7rem;



    gap: 0.5rem;



    justify-content: center;



    background: transparent;



    border: 1px solid rgba(255,255,255,0.06);



}







.timer-controls .inline-input__inner input {



    background: transparent;



    border: 1px solid rgba(var(--accent-rgb), 0.3);



    border-radius: 4px;



    padding: 0.25rem 0.5rem;



    color: inherit;



    font-family: inherit;



}







.timer-controls .inline-input__inner input:focus {



    border-color: var(--accent-border, var(--bracket-color, #4aa39a));



    outline: none;



    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);



}







.timer__bar.override {



    background: #21A179;



    box-shadow: 0 0 8px rgba(33, 161, 121, 0.4);



}







.custom-time-info {



    display: none;



    font-family: monospace;



    position: absolute;



    height: 100%;



    width: 100%;



    font-size: var(--step--2);



    align-items: center;



    justify-content: flex-end;



    color: var(text-color);



    text-shadow: 0 1px 1px #000;



}







.custom-time-info.visible {



    display: flex;



}







.inline-input__outer {



    align-items: center;



    display: flex;



    font-family: "Espionage", sans-serif;



    gap: 1.25rem;



    justify-content: space-between;



    padding: .25rem 1rem;



}



.inline-input__inner {



    font-family: "Roboto", sans-serif;



    padding: .25rem;



    white-space: nowrap;



}



.inline-input__inner > input,



.inline-input__inner > select,



.inline-premise-spinner > input {



    text-align: right;



    background-color: var(--inline-input-bg-color);



    border: none;



    border-bottom: 2px solid #ffd700;



    margin: 0 3px;



    color: var(--text-color);



    font-size: var(--step--1);



    box-shadow: 0px 0px 2px #112a;



}







/* Remove spinner buttons on WebKit browsers (Chrome, Safari, etc.) */



input[type="number"]::-webkit-inner-spin-button,



input[type="number"]::-webkit-outer-spin-button {



  margin-left: 5px; /* Adds distance from text */



}







/* Optional: Style spinner buttons for Firefox */



input[type="number"]::-moz-inner-spin-button {



  margin-left: 5px; /* Adds distance from text in Firefox */



}







.inline-input__inner > select option {



    color: #000;



}







.inline-premise-wrapper {



    align-items: center;



    background-color: #000a;



    display: flex;



    gap: 1.25rem;



    justify-content: space-between;



    padding: .25rem .75rem;



    margin-left: 1rem;



}







.inline-premise-spinner {



    background-color: transparent;



    font-family: "Roboto", sans-serif;



    padding: .12rem 0;



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 0.25rem;



    position: relative;



    color: var(--text-color);



    font-size: var(--step--2);

}







/* Compact timer value and unit on one line. */



.timer-controls .inline-input__inner {



    display: flex;



    flex-direction: row;



    align-items: center;



    gap: 0.2rem;



    padding: 0;



    background: transparent;



}







.timer-controls .inline-input__inner input[type="number"] {



    background: transparent;



    border: 1px solid rgba(255,255,255,0.06);



    color: var(--text-color);



    padding: 0.28rem 0.5rem;



    border-radius: 6px;



    min-width: 6ch;



    box-shadow: none;



}







.timer-controls input[type="checkbox"] {



    -webkit-appearance: none;



    appearance: none;



    width: 40px;



    height: 26px;



    border-radius: 6px;



    border: 1px solid rgba(255,255,255,0.08);



    background: rgba(255,255,255,0.02);



    cursor: pointer;



    margin-left: 0.5rem;



}







.timer-controls input[type="checkbox"]:checked {



    background: rgba(255,255,255,0.06);



    border-color: rgba(255,255,255,0.12);



    box-shadow: none;



}







.light-mode .timer-controls input[type="checkbox"] {



    border: 2px solid rgba(0,0,0,0.4) !important;



    background: #e0e0e0 !important;



    outline: 1px solid rgba(0,0,0,0.15) !important;



    -webkit-appearance: none !important;



    appearance: none !important;



    visibility: visible !important;



    opacity: 1 !important;



}







.light-mode .timer-controls input[type="checkbox"]:hover {



    background: #d0d0d0 !important;



    border-color: rgba(0,0,0,0.5) !important;



}







.light-mode .timer-controls input[type="checkbox"]:checked {



    background: var(--accent-color) !important;



    border-color: rgba(var(--accent-rgb), 0.9) !important;



    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25) !important;



    color: #fff !important;



}







.multi-input {



    align-items: center;



    display: flex;



    gap: 0.2rem;



    justify-content: flex-start;



    padding: .25rem 0 .25rem .75rem;



    margin-left: 1rem;



    margin-bottom: 2.5rem;



}







.single-input {



    display: flex;



    gap: 0.2rem;



    text-align: center;



    width: fit-content;



    padding: 0 4px;



    flex-direction: column;



    white-space: nowrap;



}







.single-input.grow {



    flex-grow: 1;



}







.single-input.shrink {



    flex-shrink: 1;



}







.select-item {



    background-color: var(--select-background-color);



    color: var(--text-color);



    border: 1px solid #444;



    padding: 8px 10px;



    border-radius: 2px;



    cursor: pointer;



    appearance: none;



}







.select-item:focus {



    outline: none;



    border-color: var(--theme-color, #217fe4);



}







.ux-customize {



    display: flex;



    justify-content: space-around;



}







.divider {



    height: 1px; /* Line thickness */



    background-color: #ddd; /* Light gray color */



    margin: 20px 0; /* Space above and below the line */



    border: none; /* No border styles */



}







.game-display {



    flex-grow: 1;



}







.game-area {



    display: flex;



    gap: 0.5rem;



    flex-direction: column;



    border-radius: 0 0 20px 20px;



    max-width: 750px;



    transition: box-shadow 0.3s ease-in-out;



    position: relative;



    box-sizing: content-box;



}







.game-area:before {



    display: none;



    font-family: "Espionage", sans-serif;



    position: absolute;



    bottom: 100%;



    width: calc(100% + 4px);



    left: -2px;



    text-align: center;



}







.game-area.right, .game-area.right:before {



    border: 2px solid #28a745; /* Green border */



    box-shadow: 0 0 10px rgba(40, 167, 69, 0.7); /* Glowing green effect */



}







.game-area.right:before {



    content: 'RIGHT';



    display: block;



    background: #28a745;



}







.game-area.wrong, .game-area.wrong:before {



    border: 2px solid #dc3545;



    box-shadow: 0 0 10px rgba(220, 53, 69, 0.7);



}







.game-area.wrong:before {



    content: 'WRONG';



    display: block;



    background: #dc3545;



}







.game-area.missed, .game-area.missed:before {



    border: 2px solid #6c757d;



    box-shadow: 0 0 10px rgba(108, 117, 125, 0.7);



}







.game-area.missed:before {



    content: 'MISSED';



    display: block;



    background: #6c757d;



}







.ux-customize {



    display: flex;



    gap: 1rem;



}







.carousel, .display-outer {



    margin: 0 auto;



    height: fit-content;



    display: none;



}







.carousel.visible, .display-outer.visible {



    display: block;



}







.confirmation-buttons {



    display: flex;



    gap: 1rem;



    justify-content: center;



    margin: 0.5rem 0;



    transition: all 0.3s ease-out;



}



.confirmation-buttons.swap-buttons {



    flex-direction: row-reverse;



}







.confirmation-true,

.confirmation-indeterminable,

.confirmation-false {



    flex-grow: 1;



    font-size: var(--step-1);



    max-width: 8rem;



    padding: 0.24rem 0.56rem;



}







.confirmation-true {



    background-color: var(--correct-color)!important;



}



.confirmation-true:hover {



    box-shadow: 0 3px 5px 0 #0908!important;



}







.confirmation-indeterminable {
    max-width: 11rem;
    background: color-mix(in srgb, var(--theme-color, #3377ff) 34%, var(--single-input-bg, #171b27)) !important;
    font-size: clamp(0.62rem, 2.4vw, var(--step-0));
    letter-spacing: 0.03em;
}

.confirmation-indeterminable:hover {
    box-shadow: 0 3px 5px 0 rgba(var(--accent-rgb, 51, 119, 255), 0.45) !important;
}

.confirmation-false {



    background-color: var(--wrong-color)!important;



}



.confirmation-false:hover {



    box-shadow: 0 3px 5px 0 #9008!important;



}







.score {



    padding: 0.3rem 1rem;



    font-size: var(--step-1);



    text-shadow: var(--text-outline);



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 18px;



    background: rgba(0, 0, 0, 0.15);



    border-radius: 20px;



    border: 1px solid rgba(var(--accent-rgb), 0.15);



}







.carousel {



    text-align: center;



}







.carousel_display_label-wrapper, .display-inner {



    position: relative;



    gap: 1em;



}







.carousel_display_label-wrapper {



    padding: 1.5em 1em;



    margin: 0 1.5rem;



}







.display-outer {



    width: fit-content;



}







.display-inner {



    padding: 1rem 1.5rem;



    margin: 0 3rem;



}







.carousel_display_label-wrapper h2, .display-inner h2 {



    display: flex;



    font-family: 'Orbitron', "Espionage", sans-serif;



    font-size: var(--step-0);



    letter-spacing: 0.15em;



    justify-content: space-between;



    margin-top: -0.6rem;



    padding: 0 0.5rem 0 0.65rem;



    position: absolute;



    width: 100%;



    gap: 0.5rem;



    top: 0;



    z-index: 2;



    left: 0;



    text-shadow: var(--text-outline);



    color: var(--accent);



}







.carousel_display_label_progress, .display_label_level {



    font-family: 'Orbitron', monospace;



    color: var(--accent-dim);



}







.display_label_type {



    white-space: nowrap;



    color: var(--accent);



}







.display_text {



    max-height: calc(100vh - 260px);



    min-width: 270px;



    line-height: 1.5;



    padding: 0.5rem 0.75rem 0 0.125rem;



    overflow-y: auto;



    overflow-x: hidden;



}







.display_text.big-question .formatted-premise {



    margin-bottom: 0.2rem;



}







.display_text.minimal .formatted-premise,



.display_text.minimal .formatted-operation,



.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion {



    display: grid;



    grid-template-columns: 1fr auto 1fr;



    justify-items: center;



    gap: 1.2rem;



}







.display_text.minimal .formatted-premise > span:nth-child(1),



.display_text.minimal .formatted-operation > span:nth-child(1),



.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion > span:nth-child(1) {



    justify-self: end;



}







.display_text.minimal .formatted-premise > span:nth-child(2),



.display_text.minimal .formatted-operation > span:nth-child(2),



.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion > span:nth-child(2) {



    min-width: 2rem;



    justify-self: center;



    text-align: center;



    display: flex;



    justify-content: center;



    align-items: center;



}







.display_text.minimal .formatted-premise > span:nth-child(3),



.display_text.minimal .formatted-operation > span:nth-child(3),



.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion > span:nth-child(3) {



    justify-self: start;



}







/* Half-Minimal Mode: Alternating premises with explicit minimal-style class */



.display_text.half-minimal .formatted-premise.minimal-style {



    display: grid;



    grid-template-columns: 1fr auto 1fr;



    justify-items: center;



    gap: 1.2rem;



}







/* Don't apply half-minimal grid when wide-premises is active - use wide layout instead */



.display_text.half-minimal.wide-premises .formatted-premise.minimal-style {



    display: grid;



    grid-template-columns: 1fr 2.5fr 1fr 2.5fr 1fr;



    justify-items: center;



    gap: 0.7rem;



}







.display_text.half-minimal .formatted-premise.minimal-style > span:nth-child(1),



.display_text.half-minimal.wide-premises .formatted-premise.minimal-style > span:nth-child(1) {



    justify-self: end;



}







/* For half-minimal + wide: span 1 in wide layout (positioned differently) */



.display_text.half-minimal.wide-premises .formatted-premise.minimal-style > span:nth-child(1) {



    justify-self: end;



}







.display_text.half-minimal .formatted-premise.minimal-style > span:nth-child(2),



.display_text.half-minimal.wide-premises .formatted-premise.minimal-style > span:nth-child(2) {



    min-width: 2rem;



    justify-self: center;



    text-align: center;



    display: flex;



    justify-content: center;



    align-items: center;



}







.display_text.half-minimal .formatted-premise.minimal-style > span:nth-child(3),



.display_text.half-minimal.wide-premises .formatted-premise.minimal-style > span:nth-child(3) {



    justify-self: start;



}







.game-area.wide-premises {



    max-width: 900px;



}







.display_text.wide-premises .formatted-premise {



    display: grid;



    grid-template-columns: 1fr 2.5fr 1fr 2.5fr 1fr;



    justify-items: center;



    gap: 0.7rem;



}







.display_text.wide-premises.minimal .formatted-premise {



    grid-template-columns: repeat(5, 1fr);



    gap: 1.2rem;



}







.display_text.wide-premises .formatted-premise > span:nth-child(1) {



    justify-self: end;



}







.display_text.wide-premises .formatted-premise > span:nth-child(3) {



    justify-self: center;



}







.display_text.wide-premises .formatted-premise > span:nth-child(5) {



    justify-self: start;



}







.ci-Wifi_None {



    visibility: hidden;



}







.hqli-preamble,



.hqli-postamble,



.hqli-transform-header {



    font-size: var(--step--2);



    opacity: 0.7;



}







.formatted-premise,



.formatted-operation {



    margin-bottom: 1rem;



}







/* Binary mode premise grouping - visual separation for sub-questions */



.premise-group {



    padding: 0.75rem;



    margin-bottom: 1.25rem;



    border: 2px solid rgba(var(--accent-rgb, 51, 119, 255), 0.3);



    border-radius: 8px;



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.05);



}







.premise-group .formatted-premise {



    margin-bottom: 0.75rem;



}







.premise-group .formatted-premise:last-child {



    margin-bottom: 0;



}







/* Different visual styles for each group */



.premise-group-1 {



    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.4);



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.06);



}







.premise-group-2 {



    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.35);



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.04);



    border-style: dashed;



}







.premise-group-3 {



    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.3);



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.03);



    border-style: dotted;



}







/* Light mode adjustments */



.light-mode .premise-group {



    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.25);



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.03);



}







.light-mode .premise-group-1 {



    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.35);



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.04);



}







.light-mode .premise-group-2 {



    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.3);



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.025);



}







.light-mode .premise-group-3 {



    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.25);



    background: rgba(var(--accent-rgb, 51, 119, 255), 0.02);



}







.hqli-premise,



.hqli-operation {



    margin-bottom: 0.4rem;



}







.preamble,



.postamble,



.transform-header {



    user-select: none;



    color: var(--preamble-color);



    display: block;



    font-size: var(--step--1);



    font-weight: bolder;



    line-height: 0.4rem;



    margin: 0.5rem 0 0.9rem 0;



}







.postamble, .transform-header {



    margin-top: 2.2rem;



}







/* Smaller CONCLUSION label */



.postamble {



    font-size: 0.75em;



    opacity: 0.7;



    text-transform: uppercase;



    letter-spacing: 0.15em;



    margin-top: 1.5rem;



}







.highlight {



    font-weight: 700;



    padding: 0 3px;



    background-color: var(--background-color);



    letter-spacing: normal;



    border-radius: 2px;



}







.pos-degree {



    color: #00E5FF;



}







.neg-degree {



    color: #FF6700;



}







.formatted-conclusion {



    margin-top: 0;



    position: relative;



}







.formatted-conclusion,



.formatted-premise,



.formatted-operation,



.preamble,



.postamble,



.transform-header {



    padding: 0 1px;



    text-shadow: var(--text-outline);



}







.spoiler .formatted-conclusion::after {



    content: '';



    position: absolute;



    bottom: 0;



    left: 0;



    width: 100%;



    height: 100%;



    padding: 3px;



    background: var(--game-bg, #0e1117);



    border-radius: inherit;



    transition: background 0.15s ease;



}



.spoiler:hover .formatted-conclusion::after {



    background: transparent;



    pointer-events: none;



}



.light-mode .spoiler .formatted-conclusion::after {



    background: var(--game-bg, #f0f0f0);



}

.light-mode .spoiler:hover .formatted-conclusion::after {
    background: transparent;
    pointer-events: none;
}







.carousel_controls {



    display: inline-flex;



    gap: 150px;



    margin: 0.5rem auto 0 auto;



}







.border-left, .border-right,



.bracket-lip-top-left, .bracket-lip-top-right,



.bracket-lip-bottom-left, .bracket-lip-bottom-right {



    position: absolute;



    background-color: var(--bracket-color, var(--theme-color, #217fe4)) !important;



    box-shadow: var(--theme-glow-lg, 0 0 0.25rem #217fe4) !important;



}







.border-left,



.border-right {



    height: 100%;



    width: 0.33rem;



    top: 0;



}







.border-left {



    left: -1rem;



}







.border-right {



    right: -1rem;



}







.bracket-lip-top-left {



    top: 0;



    left: -1rem;



    width: 1rem;



    height: 0.33rem;



}







.bracket-lip-bottom-left {



    bottom: 0;



    left: -1rem;



    width: 1rem;



    height: 0.33rem;



}







.bracket-lip-top-right {



    top: 0;



    right: -1rem;



    width: 1rem;



    height: 0.33rem;



}







.bracket-lip-bottom-right {



    bottom: 0;



    right: -1rem;



    width: 1rem;



    height: 0.33rem;



}







.subject {



    font-weight: bolder;



    text-transform: uppercase;



}



.subject .set-op {

    font-weight: normal;

    text-transform: lowercase;

    font-size: 0.85em;

    opacity: 0.6;

}







.analogy-statement {



    font-size: var(--step--1);



    margin: 2px 0;



}







.level-wrapper {



    justify-self: center;



    width: fit-content;



    margin: 0 auto;



    padding-bottom: 20px;



}







.level {



    position: relative;



    padding: 0 0.5rem 0 calc(4px + 0.5rem);



}







.progress-tracker {



    display: none;



    position: relative;



    bottom: 10px;



    height: 10px;



    margin-top: -4px;



    left: 5%;



    width: 90%;



    align-items: center;



    justify-content: flex-start;



    flex-direction: row-reverse;



    opacity: 0.25;



}







.progress-tracker.visible {



    display: flex;



}







.trailing-dot {



    width: 5%;



    text-align: center;



    position: relative;



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



}







.trailing-dot::before {



    content: '';



    display: inline-block;



    width: 95%;



    height: 6px;



    border: 1px solid #0007;



}







.trailing-dot.success::before {



    background-color: #11ff44;



}







.trailing-dot.fail::before {



    background-color: #ee4411;



}







.is-connector {



    color: #2bdef9;



    text-transform: uppercase;



}







.binary-analogy-conclusion {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.35rem;

    max-width: 100%;

    margin: 0.15rem auto;

    white-space: normal;

    line-height: 1.25;

    vertical-align: middle;

}

.binary-analogy-row {

    flex-wrap: nowrap;

}

.binary-analogy-tree {

    flex-direction: column;

    gap: 0.22rem;

    padding: 0.15rem 0.25rem;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.025);

}

.binary-expression-row {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.25rem;

    max-width: 100%;

}

.binary-expression-slot {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    max-width: 100%;

}

.binary-expression-slot > .binary-analogy-conclusion {

    margin: 0;

}

.binary-operator {

    flex: 0 0 auto;

    letter-spacing: 0.08em;

    text-align: center;

    white-space: nowrap;

}

.binary-operator-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 4.8ch;

    padding: 0.1rem 0.45rem;

    border: 1px solid currentColor;

    border-radius: 999px;

    background: rgba(43, 222, 249, 0.08);

    box-shadow: 0 0 0.4rem rgba(43, 222, 249, 0.08);

    font-weight: 800;

    line-height: 1.1;

}

.binary-paren {

    flex: 0 0 auto;

    color: #ffff00;

    font-weight: 800;

    line-height: 1;

}

.binary-sub-conclusion {

    display: inline-block;

    flex: 0 1 auto;

    min-width: 0;

    width: fit-content;

    max-width: min(100%, 24rem);

    padding: 0.25rem 0.75rem;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 4px;

    background: rgba(255, 255, 255, 0.05);

    margin: 0;

    vertical-align: middle;

    box-sizing: border-box;

    overflow-wrap: anywhere;

    white-space: normal;

    text-align: left;

    color: var(--text-color);

}

.binary-analogy-row > .binary-sub-conclusion {

    max-width: min(42%, 22rem);

}

.binary-analogy-tree .binary-sub-conclusion {

    max-width: min(100%, 22rem);

}

.binary-analogy-tree .binary-analogy-tree {

    max-width: 100%;

    margin: 0.05rem 0;

}

.formatted-conclusion .binary-analogy-conclusion {

    font-size: 0.95em;

}

.hqli-conclusion .binary-analogy-conclusion {

    justify-content: flex-start;

}

@media (max-width: 600px) {

    .binary-analogy-row {

        flex-wrap: wrap;

    }

    .binary-analogy-row > .binary-sub-conclusion {

        max-width: calc(100% - 2rem);

    }

    .binary-analogy-tree {

        width: 100%;

    }

    .binary-expression-row {

        width: 100%;

    }

    .binary-expression-slot {

        flex: 1 1 auto;

    }

    .binary-sub-conclusion {

        width: auto;

        max-width: 100%;

    }

}

/* === Universal Half-Minimal rendering ===
   Generators retain both relation forms so the final displayed row can choose
   after Binary/Analogy scrambling. Full rows remain readable; alternating
   compact rows use symbols without changing the underlying logic. */
.mode-text-minimal {
    display: none !important;
}

.display_text.minimal .mode-text-full,
.display_text.half-minimal .formatted-premise.minimal-style .mode-text-full {
    display: none !important;
}

.display_text.minimal .mode-text-minimal,
.display_text.half-minimal .formatted-premise.minimal-style .mode-text-minimal {
    display: inline !important;
    font-weight: 800;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

/* Half-Minimal questions retain their alternating compact rows in History.
   The preamble is child one, so premise one lands on the even child index. */
.hqli-premises .hqli-premise:nth-child(even) .mode-text-full {
    display: none !important;
}

.hqli-premises .hqli-premise:nth-child(even) .mode-text-minimal {
    display: inline !important;
    font-weight: 800;
    white-space: nowrap;
}

.display_text.half-minimal .formatted-premise.minimal-style {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Non-relational rows (quantified syllogisms, transforms, custom statements)
   must wrap naturally instead of being forced into a three-cell relation grid. */
.display_text.half-minimal .formatted-premise.minimal-style:not(:has(> .relation)):not(:has(> .facing-wide-pair)):not(:has(.deictic-swap-line)):not(:has(.web-lattice)),
.display_text[data-question-type="syllogism"].minimal .formatted-premise,
.display_text[data-question-type="syllogism"].minimal .formatted-conclusion,
.display_text[data-question-type="syllogism"].half-minimal .formatted-premise.minimal-style,
.display_text .binary-source-type-syllogism .formatted-premise,
.display_text .binary-source-type-syllogism .formatted-conclusion {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.65rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
}

/* A Syllogism embedded in Binary/Binary Analogy still belongs to the parent
   question's display node. Mark its source group explicitly so Minimal/Wide
   grid rules cannot split one quantified statement into anonymous columns. */
.display_text .binary-source-type-syllogism .formatted-premise > .subject,
.display_text .binary-source-type-syllogism .formatted-conclusion > .subject {
    min-width: 0;
    white-space: normal;
}

.display_text[data-question-type="syllogism"] .formatted-premise,
.display_text[data-question-type="syllogism"] .formatted-conclusion {
    overflow-wrap: anywhere;
}

.display_text.half-minimal .formatted-premise.minimal-style:has(.deictic-swap-line) {
    display: block !important;
}

@media (max-width: 700px) {
    .display_text.half-minimal .formatted-premise.minimal-style {
        gap: 0.25rem 0.45rem;
    }

    .display_text.half-minimal .formatted-premise.minimal-style > .subject {
        min-width: 0;
        white-space: normal;
    }
}

/* Default-theme Cyan is a complete palette, not only a game-card color.
   Keep the selected bracket color independent so stimuli retain their chosen
   reading cue while the surrounding application uses the Cyan identity. */
body.cyan-preset:not(.original-v3-theme) {
    --accent-h: 188;
    --accent: #2bdef9;
    --accent-bright: #abf4ff;
    --accent-muted: #70b7c0;
    --accent-dim: #397983;
    --accent-subtle: #0b4148;
    --accent-color: #2bdef9;
    --accent-rgb: 43, 222, 249;
    --accent-bg: rgba(43, 222, 249, 0.08);
    --accent-border: rgba(43, 222, 249, 0.24);
    --accent-hover: rgba(43, 222, 249, 0.14);
    --accent-gear-bg: rgba(43, 222, 249, 0.10);
    --accent-gear-bg-strong: rgba(43, 222, 249, 0.20);
    --theme-color: #2bdef9;
    --background-color: #082e2e;
    --body-gradient-start: #0d4242;
    --preamble-color: #9bcbd0;
    --big-input-bg-color: #062222cc;
    --small-input-bg-color: #0d3a3acc;
    --offcanvas-bg: radial-gradient(circle at top center, #0d4144 0%, #082b2f 58%, #062226 100%);
    --profile-bg: #0d3a3a;
    --profile-arrow-bg: #062626;
    --profile-border: 1px solid rgba(108, 226, 226, 0.24);
    --profile-select-bg: #0d3a3a;
    --profile-select-border: 1px solid rgba(108, 226, 226, 0.24);
    --profile-select-highlight: rgba(43, 222, 249, 0.16);
    --profile-select-hover: #124747;
    --profile-select-highlight-hover: rgba(43, 222, 249, 0.24);
    --multi-input-bg: #062626cc;
    --single-input-bg: #0d3a3acc;
    --spinner-bg: #062626cc;
    --folder-bg: #104141;
    --switch-background-color: #104141;
    --switch-unselected-color: #195555;
    --switch-selected-color: #2bdef9;
    --switch-border-color: rgba(108, 226, 226, 0.24);
    --switch-border-checked-color: rgba(43, 222, 249, 0.72);
    --linear-settings-background-color: #0d3a3a;
    --select-background-color: #0a3030;
    --background-image-bg-color: #0a3a3acc;
    --background-brightness: 0.58;
    --label-background-color: #062626e8;
    --label-color: #abf4ff;
    --overlay-background-color: #155858;
    --three-d-background: rgba(13, 58, 63, 0.94);
    --inline-input-bg-color: #0a3030;
    --bg-dark: #06282b;
    --bg-card: #0d3539;
    --bg-panel: #124349;
    --text-secondary: #8ab7bd;
    --panel-line: rgba(108, 226, 226, 0.24);
    --panel-line-soft: rgba(108, 226, 226, 0.14);
    --panel-glass: rgba(34, 126, 126, 0.20);
    --panel-glass-strong: rgba(34, 142, 142, 0.28);
    --soft-text: rgba(218, 246, 246, 0.72);
    color-scheme: dark;
    background: #082e2e !important;
}

body.cyan-preset:not(.original-v3-theme) .main-view {
    border-color: rgba(108, 226, 226, 0.28);
    background:
        radial-gradient(circle at 50% 48%, rgba(39, 132, 132, 0.34) 0%,
            rgba(13, 67, 67, 0.28) 48%, rgba(6, 34, 38, 0.38) 100%) !important;
}

body.cyan-preset:not(.original-v3-theme) .background-image {
    background-color: #0a3a3a;
}

body.cyan-preset:not(.original-v3-theme) .overlay {
    background-color: var(--overlay-background-color);
    opacity: 0.24;
}

body.cyan-preset:not(.original-v3-theme) .game-area {
    background: #1a5a5acc !important;
}

body.cyan-preset:not(.original-v3-theme) .timer-wrap {
    background: rgba(8, 46, 46, 0.88) !important;
}

body.cyan-preset:not(.original-v3-theme) .timer {
    border-color: rgba(108, 226, 226, 0.20);
    background: rgba(6, 34, 34, 0.72);
}

body.cyan-preset:not(.original-v3-theme) .timer-controls {
    border-color: var(--panel-line-soft) !important;
    background: rgba(6, 34, 34, 0.52) !important;
}

/* Cyan colors the surrounding timer surface, but the progress bar remains an
   independent cue: blue normally, green for an override, or the user's
   separate bracket color when Colored Timer is enabled. */
body.cyan-preset:not(.original-v3-theme):not(.colored-timer) .timer__bar {
    background: #3377ff !important;
}

body.cyan-preset:not(.original-v3-theme):not(.colored-timer) .timer__bar.override {
    background: #21A179 !important;
}

body.cyan-preset:not(.original-v3-theme).colored-timer .timer__bar,
body.cyan-preset:not(.original-v3-theme).colored-timer .timer__bar.override {
    background: var(--bracket-color, #3377ff) !important;
}

body.cyan-preset:not(.original-v3-theme) .section-nav-bar .settings-main-menu,
body.cyan-preset:not(.original-v3-theme) .section-search-wrap,
body.cyan-preset:not(.original-v3-theme) .history-filter-rail,
body.cyan-preset:not(.original-v3-theme) .history-footer {
    background: rgba(6, 34, 38, 0.54) !important;
}

body.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .mb-1,
body.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .mb-2,
body.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .folder,
body.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .multi-input,
body.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .ctrl__inner {
    border-color: var(--panel-line-soft);
    background: rgba(18, 71, 71, 0.38);
}

body.cyan-preset:not(.original-v3-theme)
    .section-nav-bar .settings-menu-btn:hover .btn-text-wrap,
body.cyan-preset:not(.original-v3-theme)
    .section-nav-bar .settings-menu-btn:focus-visible .btn-text-wrap {
    border-color: var(--panel-line-soft);
    background: #082f33;
}

body.cyan-preset:not(.original-v3-theme) .offcanvas input:not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.cyan-preset:not(.original-v3-theme) .offcanvas select,
body.cyan-preset:not(.original-v3-theme) .offcanvas textarea {
    border-color: var(--panel-line-soft);
}

body.cyan-preset:not(.original-v3-theme) .graph-popup {
    border-color: var(--panel-line) !important;
    background: #082f33 !important;
}

body.cyan-preset:not(.original-v3-theme) .graph-popup-content {
    border-color: var(--panel-line-soft) !important;
    background: #0d3a3f !important;
}

body.cyan-preset:not(.original-v3-theme) .graph-summary-card,
body.cyan-preset:not(.original-v3-theme) #graph-close-popup.graph-close-popup,
body.cyan-preset:not(.original-v3-theme) .graph-mode-filter select {
    border-color: var(--panel-line-soft) !important;
    background: #124349 !important;
}

body.cyan-preset:not(.original-v3-theme) .graph-range-controls,
body.cyan-preset:not(.original-v3-theme) .graph-controls,
body.cyan-preset:not(.original-v3-theme) .graph-end-controls {
    border-color: var(--panel-line-soft) !important;
    background: #062a2d !important;
}

body.cyan-preset:not(.original-v3-theme) .graph-range-select:hover,
body.cyan-preset:not(.original-v3-theme) .graph-range-select:focus-visible,
body.cyan-preset:not(.original-v3-theme) .graph-range-select.selected,
body.cyan-preset:not(.original-v3-theme) .graph-select:hover,
body.cyan-preset:not(.original-v3-theme) .graph-select:focus-visible,
body.cyan-preset:not(.original-v3-theme) .graph-select.selected,
body.cyan-preset:not(.original-v3-theme) .graph-select.selected:hover,
body.cyan-preset:not(.original-v3-theme) #graph-close-popup.graph-close-popup:hover,
body.cyan-preset:not(.original-v3-theme) #graph-close-popup.graph-close-popup:focus-visible {
    border-color: rgba(43, 222, 249, 0.50) !important;
    background: #17545a !important;
}

body.cyan-preset:not(.original-v3-theme) .graph-series-key {
    border-color: var(--panel-line-soft);
    background: #082f33;
}

body.cyan-preset:not(.original-v3-theme) .custom-modal {
    border-color: var(--panel-line);
    background: rgba(8, 47, 51, 0.97);
}

body.cyan-preset:not(.original-v3-theme) .error-popup,
body.cyan-preset:not(.original-v3-theme) #error-stack {
    border-color: var(--panel-line-soft);
    background: #06282b;
}

body.cyan-preset:not(.original-v3-theme) .error-popup-content {
    background: #0d3a3f;
}

/* Feedback controls use one durable form grid at every normal density/font. */
#appearance-section .ux-customize {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 0.8rem;
    border: 1px solid var(--panel-line-soft);
    border-radius: 10px;
}

#appearance-section .ux-customize > .ctrl__inner {
    display: grid !important;
    grid-template-columns: minmax(8.5rem, 0.75fr) minmax(8rem, 1.25fr) 2.25rem;
    align-items: center !important;
    width: 100% !important;
    min-width: 0;
    min-height: 3.4rem;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    gap: 0.65rem !important;
    border-bottom: 1px solid var(--panel-line-soft);
    box-sizing: border-box;
}

#appearance-section .ux-customize > .ctrl__inner:last-child {
    border-bottom: 0;
}

#appearance-section .ux-customize > .ctrl__inner:first-child > select {
    grid-column: 2 / -1;
    width: 100%;
    min-width: 0;
    max-width: none;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.25rem;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) > div:first-child {
    grid-column: 1;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) > label:not(.switch) {
    grid-column: 2;
    min-width: 0;
    margin: 0;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) > .tooltip-container {
    grid-column: 3;
    justify-self: end;
}

#appearance-section .sfx-volume-control {
    grid-template-columns: minmax(8.5rem, 0.75fr) minmax(8rem, 1.25fr) 2.25rem !important;
}

#appearance-section .sfx-volume-control label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

#appearance-section .sfx-volume-control .settings-range {
    width: 100%;
    min-width: 0;
}

@media (max-width: 620px) {
    #appearance-section .ux-customize > .ctrl__inner,
    #appearance-section .sfx-volume-control {
        grid-template-columns: minmax(7rem, 0.8fr) minmax(6rem, 1.2fr) 2.25rem !important;
    }
}

@media (max-width: 420px) {
    #appearance-section .ux-customize {
        padding-inline: 0.6rem;
    }

    #appearance-section .ux-customize > .ctrl__inner,
    #appearance-section .sfx-volume-control {
        grid-template-columns: minmax(6.2rem, 0.75fr) minmax(5rem, 1.25fr) 2.1rem !important;
        gap: 0.45rem !important;
    }
}

/* === Binary task boundaries and operator grammar === */
.display_text[data-question-type="binary"] .premise-group,
.display_text[data-question-type="binary-analogy"] .premise-group {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: 0.75rem 0.75rem 0.65rem 1rem;
    border: 0;
    border-left: 3px solid var(--binary-source-color, #4fc7ff);
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}

.display_text[data-question-type="binary"] .premise-group + .premise-group,
.display_text[data-question-type="binary-analogy"] .premise-group + .premise-group {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.light-mode .display_text[data-question-type="binary"] .premise-group + .premise-group,
.light-mode .display_text[data-question-type="binary-analogy"] .premise-group + .premise-group {
    border-top-color: rgba(20, 29, 45, 0.22);
}

.premise-group-1,
.hqli-premise-group:nth-of-type(1) {
    --binary-source-color: #4fc7ff;
}

.premise-group-2,
.hqli-premise-group:nth-of-type(2) {
    --binary-source-color: #df70ff;
}

.premise-group-3,
.hqli-premise-group:nth-of-type(3) {
    --binary-source-color: #55d98a;
}

.binary-source-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    margin: 0 0 0.75rem;
    color: var(--binary-source-color, #4fc7ff);
    font-family: var(--ui-font, system-ui, sans-serif);
}

.binary-source-key {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid currentColor;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 900;
}

.binary-source-title {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.hqli-premise-group {
    --binary-source-color: #4fc7ff;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.65rem 0.45rem;
    border-left: 3px solid var(--binary-source-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.light-mode .hqli-premise-group {
    border-bottom-color: rgba(20, 29, 45, 0.13);
}

.binary-formula-group {
    --binary-op-color: #d9e2f2;
}

.binary-formula-group.binary-op-and { --binary-op-color: #55d98a; }
.binary-formula-group.binary-op-nand { --binary-op-color: #ff72b6; }
.binary-formula-group.binary-op-or { --binary-op-color: #4fd7f5; }
.binary-formula-group.binary-op-nor { --binary-op-color: #ff9a55; }
.binary-formula-group.binary-op-xor { --binary-op-color: #ffe34f; }
.binary-formula-group.binary-op-xnor { --binary-op-color: #b987ff; }

.binary-formula-group > .binary-formula-paren,
.binary-formula-group > .binary-formula-operator {
    color: var(--binary-op-color) !important;
}

/* === Stable UX foundation: explanations, settings, history and recovery === */

.explanation-workspace {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
}

.explanation-workspace-model > .explanation-section,
.explanation-workspace-model > .explanation-resolution-section {
    border: 0;
    padding: 0;
}

.explanation-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    padding: 0.18rem;
    border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.12));
    border-radius: 7px;
}

.explanation-view-switch button {
    min-height: 1.9rem;
    padding: 0.25rem 0.55rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--soft-text);
    font: 750 0.72rem/1 var(--ui-font, system-ui, sans-serif);
}

.explanation-view-switch button.is-active {
    background: var(--accent-color, var(--bracket-color));
    color: #fff;
}

.explanation-depth-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

.explanation-depth-slice {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

.explanation-depth-slice .explanation-slice-label {
    position: static;
    width: max-content;
    padding: 0;
    color: var(--soft-text);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.explanation-spatial-canvas-3d {
    display: block;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible;
}

.explanation-spatial-canvas-3d .three-d-plane {
    width: 100%;
    min-width: max-content;
    margin: 0;
}

.explanation-content .td {
    justify-content: center;
    overflow: hidden;
    white-space: normal;
}

.explanation-cell-items {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.18rem;
    min-width: 0;
}

.explanation-cell-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}

.explanation-cell-comma {
    margin-right: 0.08rem;
    color: var(--soft-text);
}

.explanation-cell-item svg,
.explanation-coordinate-stimulus svg {
    max-width: 2rem !important;
    max-height: 2rem !important;
    overflow: visible;
}

.explanation-relation-checks,
.explanation-compact-verdict {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.explanation-relation-check,
.explanation-compact-verdict-row {
    position: relative;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.12));
    border-radius: 8px;
}

.explanation-check-index {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    color: var(--soft-text);
    font-size: 0.7rem;
}

.explanation-check-claim,
.explanation-compact-claim {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1em;
}

.explanation-check-actual {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--panel-line-soft, rgba(255,255,255,0.1));
}

.explanation-check-actual > span {
    color: var(--soft-text);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.explanation-check-actual strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.explanation-check-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.explanation-lie-result,
.explanation-user-result {
    padding: 0.3rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
}

.explanation-lie-result { color: #ff9a55; }
.explanation-user-result.is-correct { color: #42cf73; }
.explanation-user-result.is-wrong { color: #ee6675; }

.explanation-premise-list-compact {
    margin-bottom: 0.2rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--panel-line-soft, rgba(255,255,255,0.1));
}

.setting-dependency-hidden { display: none !important; }

.hqli-trial-meta {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.hqli-trial-actions,
.history-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hqli-trial-actions button {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.14));
    border-radius: 6px;
    background: transparent;
    color: var(--text-color);
    font: 750 0.68rem/1 var(--ui-font, system-ui, sans-serif);
}

.hqli-trial-actions .delete { color: #ee6675; }

.generation-recovery-card {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    width: min(100%, 32rem);
    margin: 1rem auto;
    padding: 1rem;
    border: 1px solid #ff9a55;
    border-radius: 9px;
    text-align: center;
}

.generation-recovery-card > span { color: var(--soft-text); }
.generation-recovery-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.generation-recovery-actions button {
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: var(--text-color);
}

.carousel-conclusion.lie-mode-box { padding: 0.65rem; }

@media (max-width: 760px) {
    .binary-analogy-operands { grid-template-columns: minmax(0, 1fr) !important; }
    .facing-wide-pair { grid-template-columns: minmax(0, 1fr); }
    .formatted-premise,
    .formatted-operation,
    .formatted-conclusion { max-width: 100%; overflow-wrap: anywhere; }
    .explanation-check-actual { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

@media (max-width: 520px) {
    .hqli-footer { align-items: stretch; }
    .hqli-trial-actions { width: 100%; }
}

@media (max-width: 700px) {
    .explanation-popup-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .explanation-view-switch {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }
    .explanation-view-switch button { flex: 1 1 50%; }
    .explanation-depth-slice .three-d-plane { min-width: max(18rem, 100%); }
}

.binary-formula-group > .binary-formula-paren {
    font-size: 1.2em;
    text-shadow: none !important;
}

.binary-formula-group > .binary-formula-operator {
    margin-inline: 0.22rem;
    padding: 0.08rem 0.28rem;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
    background: transparent;
    text-shadow: none !important;
}

.binary-expression-summary {
    background: transparent;
}

.binary-analogy-operands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.facing-analogy-pair {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.32rem;
    min-width: 0;
    white-space: nowrap;
}

.facing-analogy-pair::before {
    content: "FACING";
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0.08rem 0.3rem;
    border: 1px solid #4fd7f5;
    border-radius: 4px;
    color: #4fd7f5;
    font: 850 0.52em/1 var(--ui-font, system-ui, sans-serif);
    letter-spacing: 0.07em;
}

.facing-analogy-connector {
    color: #4fd7f5;
    font-weight: 800;
    white-space: normal;
}

@media (max-width: 600px) {
    .display_text[data-question-type="binary"] .premise-group,
    .display_text[data-question-type="binary-analogy"] .premise-group {
        padding-inline: 0.65rem 0.45rem;
    }

    .binary-source-title {
        font-size: 0.64rem;
    }

    .facing-analogy-pair::before {
        padding-inline: 0.22rem;
        font-size: 0.46em;
    }

    .binary-analogy-operands {
        grid-template-columns: minmax(0, 1fr);
    }

}







.is-negated {



    color: #e84057;



}







.is-negated > svg {



    fill: #e84057 !important;



}







.negation-explainer {



    color: #eddb7e;



    font-size: var(--step--1);



    font-style: italic;



}







.vanishing-notice {



    color: #eddb7e;



    font-size: var(--step--1);



    font-style: italic;



    margin-bottom: 1rem;



    padding: 0.5rem;



    border: 1px dashed #eddb7e;



    text-align: center;



}







/* Vanishing premises with spoiler - smooth transitions */



.vanish-premises .preamble,



.vanish-premises .formatted-premise,



.vanish-premises .transform-header,



.vanish-premises .formatted-operation {



    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, filter 0.5s ease-in-out;



    transform-origin: center top;



}







/* When spoiler is active and user hovers, premises vanish */



.spoiler.vanish-premises:hover .preamble,



.spoiler.vanish-premises:hover .formatted-premise,



.spoiler.vanish-premises:hover .transform-header,



.spoiler.vanish-premises:hover .formatted-operation {



    opacity: 0;



    transform: translateY(-20px) scale(0.95);



    filter: blur(4px);



    pointer-events: none;



}











.sign {



    position: absolute;



    bottom: 0.5em;



    left: 50%;



    transform: translateX(-50%);



    font-family: "Metal Gear", serif;



    color: #444;



    text-decoration: none;



}







label.open {



    display: block;



    background-color: var(--label-background-color);



    color: var(--label-color);



    cursor: pointer;



    font-size: var(--step-0);



    font-weight: bold;



    padding: 0.8rem 1.8rem;



    position: absolute;



    z-index: 50;



    border: 1px solid hsl(var(--accent-h) 100% 60% / 0.1);



    transition: all 0.3s ease;



}







label.open[for="offcanvas-settings"] {



    left: 0;



    top: 0;



    transform-origin: top left;



    transform: rotateZ(90deg) translateY(-100%);



}







label.open[for="offcanvas-history"] {



    right: 0;



    top: 0;



    transform-origin: top right;



    transform: rotateZ(-90deg) translateY(-100%);



}







label.open[for="offcanvas-credits"] {



    left: 0;



    bottom: 0;



    transform-origin: bottom left;



    transform: rotateZ(90deg) translateX(calc(-100%));



}







label.open[for="offcanvas-graph"] {



    right: 0;



    bottom: 0;



    transform-origin: bottom right;



    transform: rotateZ(-90deg) translateX(calc(100%));



}







label.open:hover {



    background: var(--label-background-color);



    box-shadow: 0 0 12px rgba(var(--accent-rgb, 33, 127, 228), 0.4), inset 0 0 8px rgba(var(--accent-rgb, 33, 127, 228), 0.15);



    text-shadow: 0 0 6px rgba(var(--accent-rgb, 33, 127, 228), 0.6);



}







/* Hide Side Buttons - hover-reveal mode */



/* In hide mode: buttons positioned outside game-area */



body.hide-side-buttons label.side-btn-reveal {



    opacity: 0;



    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);



    pointer-events: none;



}



/* Revealed state - slide in and fade in */



body.hide-side-buttons label.side-btn-reveal.revealed {



    opacity: 1;



    pointer-events: auto;



}



/* Settings: hidden outside top-left, slides in */



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-settings"] {



    transform: rotateZ(90deg) translateY(calc(-100% - 60px));



}



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-settings"].revealed {



    transform: rotateZ(90deg) translateY(-100%);



}



/* History: hidden outside top-right, slides in */



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-history"] {



    transform: rotateZ(-90deg) translateY(calc(-100% - 60px));



}



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-history"].revealed {



    transform: rotateZ(-90deg) translateY(-100%);



}



/* Credits: hidden outside bottom-left, slides in */



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-credits"] {



    transform: rotateZ(90deg) translateX(calc(-100% - 60px));



}



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-credits"].revealed {



    transform: rotateZ(90deg) translateX(-100%);



}



/* Graph: hidden outside bottom-right, slides in */



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-graph"] {



    transform: rotateZ(-90deg) translateX(calc(100% + 60px));



}



body.hide-side-buttons label.side-btn-reveal[for="offcanvas-graph"].revealed {



    transform: rotateZ(-90deg) translateX(100%);



}







/* Hide on mobile utility */



.hide-on-mobile {



    display: block;



}



@media (max-width: 768px) {



    .hide-on-mobile {



        display: none !important;



    }



}







#offcanvas-settings:checked + .offcanvas {



    transform: translateX(0);



}







#offcanvas-history:checked + .offcanvas {



    transform: translateX(0);



}







#offcanvas-credits:checked + .offcanvas {



    transform: translateX(0);



}



#offcanvas-changelog:checked + .offcanvas {



    transform: translateX(0);



}







.offcanvas {



    align-content: start;



    color: var(--offcanvas-fg);



    background: var(--offcanvas-bg);



    display: flex;



    height: 100%;



    max-width: 480px;



    position: absolute;



    top: 0;



    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;



    width: fit-content;



    z-index: 1000;



}







.offcanvas-body {



    overflow-y: auto;



    overflow-x: hidden;



    padding: 1rem;



    width: calc(100% - 2rem);



    font-size: var(--step--1);



}







/* Custom scrollbar for all offcanvas bodies - FUTURISTIC square */



.offcanvas-body::-webkit-scrollbar {



    width: 6px;



}







.offcanvas-body::-webkit-scrollbar-button {



    display: none !important;



}







.offcanvas-body::-webkit-scrollbar-track {



    background: rgba(0, 0, 0, 0.2);



    border: none;



    border-radius: 0 !important;



}







.offcanvas-body::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    background-clip: padding-box !important;



    background-clip: content-box !important;



    box-shadow: none !important;



    min-height: 20px;



}







.offcanvas-body::-webkit-scrollbar-thumb:hover {



    background-color: rgba(var(--accent-rgb, 33,127,228), 1);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



}







/* Specific override for settings panel scrollbar */



#sidebar-settings .offcanvas-body::-webkit-scrollbar {



    width: 6px !important;



}







#sidebar-settings .offcanvas-body::-webkit-scrollbar-button {



    display: none !important;



}







#sidebar-settings .offcanvas-body::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4) !important;



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    background-clip: padding-box !important;



    background-clip: content-box !important;



    box-shadow: none !important;



    min-height: 20px !important;



}







#sidebar-settings .offcanvas-body::-webkit-scrollbar-track {



    border-radius: 0 !important;



}







.offcanvas-side {



    width: 2rem;



}







.offcanvas--left {



    left: 0;



    transform: translateX(-100%);



}







.offcanvas--left .offcanvas-body {



    direction: rtl;



}







.offcanvas--right {



    right: 0;



    transform: translateX(100%);



}







.offcanvas-close {



    cursor: pointer;



    font-size: 2rem;



    line-height: 1;



    padding: 0.5rem;



    padding-bottom: 300%;



    position: absolute;



    top: 0;



}







.offcanvas--left .offcanvas-close {



    right: 0;



}







.offcanvas--right .offcanvas-close {



    left: 0;



}







.explainer {



    font-size: var(--step--1);



    font-style: italic;



    list-style: none;



    margin: 0.5rem 0.2rem;



    padding-left: 1rem;



}







.ctrl__outer {



    align-items: center;



    display: flex;



    flex-wrap: wrap;



    justify-content:space-between;



    gap: 1.25rem;



}







.ctrl__inner {



    align-items: center;



    display: flex;



    gap: 0.6rem;



}







.big-input {



    font-size: var(--step-0);



}







.switch {

    --track-w: 2.75rem;

    --track-h: 1.6rem;

    --knob: 1.1rem;

    --pad: 0.15rem;



    position: relative;

    display: inline-block;

    width: var(--track-w);

    height: var(--track-h);

    border: 1px solid var(--switch-border-color);

    border-radius: 999px;

    background: color-mix(in oklab, var(--switch-background-color) 88%, black 12%);

    cursor: pointer;

    transition:

        background-color 0.22s ease,

        border-color 0.22s ease,

        box-shadow 0.22s ease,

        transform 0.18s ease;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);

}



.switch::after {

    content: "";

    position: absolute;

    top: 50%;

    left: var(--pad);

    width: var(--knob);

    height: var(--knob);

    border-radius: 50%;

    background: var(--switch-unselected-color);

    transform: translateY(-50%);

    transition:

        left 0.22s ease,

        background-color 0.22s ease,

        box-shadow 0.22s ease,

        transform 0.22s ease;

    box-shadow:

        0 1px 2px rgba(0,0,0,0.18),

        0 0 0 1px rgba(255,255,255,0.05) inset;

}



.switch:hover {

    border-color: var(--switch-border-checked-color);

}



input[type="checkbox"]:checked + .switch {

    background: color-mix(in oklab, var(--switch-selected-color) 26%, var(--switch-background-color));

    border-color: var(--switch-border-checked-color);

    box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-border-checked-color) 20%, transparent);

}



input[type="checkbox"]:checked + .switch::after {

    left: calc(100% - var(--knob) - var(--pad));

    background: var(--switch-selected-color);

}



.inline-premise-spinner .switch {

    --track-w: 2.2rem;

    --track-h: 1.3rem;

    --knob: 0.9rem;

    --pad: 0.12rem;

}



input[type="checkbox"]:focus-visible + .switch {

    outline: 2px solid var(--switch-border-checked-color);

    outline-offset: 3px;

}





.shortcuts {



    display: table;



    border-spacing: 36px 1px;



    margin: 0 -24px;



    border-collapse: separate;



}





.keyboard-shortcut {



    display: table-row;



}







.keyboard-shortcut > span {



    display: table-cell;



}







.keyboard-shortcut > p:nth-child(2) {



    margin: 0 auto;



    text-align: center;



}







.hql-frame {



    display: flex;



    flex-direction: column;



    height: 100%;



    overflow: hidden;



}







.history-stats {



    flex-shrink: 0;



    padding: 0.5rem 0 1rem 0;



    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);



    margin-bottom: 0.5rem;



}







.stat-row {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 0.25rem 0;



    font-size: var(--step--1);



}







.stat-label {



    color: #fffffd;



    font-weight: 600;



    opacity: 0.9;



}







.stat-row span:not(.stat-label) {



    color: #fffffd;



}







.hqli {



    display: flex;



    flex-direction: column;



    gap: 0.75rem;



    padding: 0;



    flex: 1;



    overflow-y: auto;



    overflow-x: hidden;



    min-height: 0;



    background-color: transparent;



    box-shadow: none;



    position: relative;



}







.hqli > * {



    flex-shrink: 0;



}







.hqli-premise,



.hqli-conclusion,



.hqli-answer-user,



.hqli-answer,



.hqli-response-time,



.hqli-footer {



    color: #fffffd !important;



    font-family: var(--font-family, 'Segoe UI', system-ui, -apple-system, sans-serif);



}







/* Ensure all history text is white */



.hql {



    color: #fffffd;



}







.clear-history-btn {



    width: 100%;



    padding: 0.75rem 1rem;



    font-size: var(--step--1);



    font-weight: 600;



    background: #4a2d2d;



    border: 1px solid rgba(220, 53, 69, 0.4);



    border-radius: 6px;



    color: #fff;



    cursor: pointer;



    transition: all 0.2s ease;



    text-transform: uppercase;



    letter-spacing: 0.05em;



}







.clear-history-btn:hover {



    background: #5a3d3d;



    border-color: rgba(220, 53, 69, 0.6);



    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);



}







.clear-history-btn:active {



    transform: translateY(1px);



}







/* History list item styling */



#history-list > div {



    background-color: var(--bg-card);



    box-shadow: 0 1px 15px 5px rgba(0, 0, 0, 0.3);



    position: relative;



    border: 1px solid hsl(var(--accent-h) 100% 60% / 0.08);



}







.hqli .inner {



    border: 1px solid hsl(var(--accent-h) 100% 60% / 0.1);



    border-bottom: 2px dashed hsl(var(--accent-h) 100% 60% / 0.15);



    display: grid;



    gap: 0.3rem;



    padding: 0.15rem 2rem 0.5rem 0.5rem;



}







.hqli .inner > .hqli-premise:nth-child(even) {



    background-color: hsl(var(--accent-h) 100% 60% / 0.02);



}







.hqli-premises, .hqli-conclusion {



    margin-bottom: 4px;



}







.hqli--right .inner {



    background-color: hsl(var(--accent-h) 90% 72% / 0.05);



    border-bottom-style: solid;



    border-bottom-color: hsl(var(--accent-h) 90% 72% / 0.3) !important;



}







.hqli--wrong .inner {



    background-color: hsl(var(--accent-h) 50% 32% / 0.05);



    border-bottom-style: solid;



    border-bottom-color: hsl(var(--accent-h) 50% 32% / 0.3) !important;



}







.hqli-answer-user::before,



.hqli-answer::before,



.hqli-response-time::before {



    color: var(--text-color);



    font-weight: bold;



    margin-right: 0.25rem;



}







.hqli-answer-user::before {



    content: "User Answer:"



}







.hqli-answer::before {



    content: "Right Answer:"



}







.hqli-answer-user.true, .hqli-answer.true {



    color: var(--correct-color) !important;



}







.hqli-answer-user.false, .hqli-answer.false {



    color: var(--wrong-color) !important;



}







/* Multiple conclusions color styling */



.hqli-conclusion.correct {



    color: var(--correct-color) !important;



}



.hqli-conclusion.wrong {



    color: var(--wrong-color) !important;



}



.hqli-answer-user.hqli--right {



    color: var(--correct-color) !important;



}



.hqli-answer-user.hqli--wrong {



    color: var(--wrong-color) !important;



}



.hqli-postamble .conc-true {



    color: var(--correct-color);



    font-weight: 600;



}



.hqli-postamble .conc-false {



    color: var(--wrong-color);



    font-weight: 600;



}

.hqli-postamble .conc-indeterminable {
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font-weight: 600;
}







.hqli-response-time::before {



    content: "Response Time:"



}







.hqli-footer {



    color: var(--text-secondary);



    font-size: var(--step--2);



    margin-right: -1rem;



    text-align: right;



    display: flex;



    align-items: center;



    justify-content: space-between;



}







.hqli .inner .index {



    position: absolute;



    padding: 4px;



    top: 0;



    right: 0;



    font-family: 'Orbitron', monospace;



    color: var(--text-secondary);



}







.table {



    display: grid;



    grid-auto-rows: minmax(40px, 1fr);



}







.td {



    padding: 3px;



    border: 1px solid var(--switch-border-color);



    text-align: center;



    display: flex;



    align-items: center;



    justify-content: center;



}







.three-d-scene {



    perspective: 1000px;



    padding: 0 0 10px 20px;



    transform-style: preserve-3d;



}







.three-d-plane {



    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);



    background: var(--three-d-background);



}







.plane-1 { transform: rotateY(10deg) rotateX(10deg) translateZ(0px);}



.plane-2 { transform: rotateY(12deg) rotateX(10deg) translateZ(-60px);}



.plane-3 { transform: rotateY(14deg) rotateX(10deg) translateZ(-120px);}



.plane-4 { transform: rotateY(16deg) rotateX(10deg) translateZ(-180px);}



.plane-5 { transform: rotateY(18deg) rotateX(10deg) translateZ(-240px);}



.plane-6 { transform: rotateY(20deg) rotateX(10deg) translateZ(-300px);}



.plane-7 { transform: rotateY(22deg) rotateX(10deg) translateZ(-360px);}



.plane-8 { transform: rotateY(24deg) rotateX(10deg) translateZ(-420px);}



.plane-9 { transform: rotateY(26deg) rotateX(10deg) translateZ(-480px);}



.plane-10 { transform: rotateY(26deg) rotateX(10deg) translateZ(-540px);}



.plane-11 { transform: rotateY(26deg) rotateX(10deg) translateZ(-600px);}







.three-d-scene:has(.plane-2) { padding-left: 10px; }



.three-d-scene:has(.plane-3) { padding-left: 20px; }



.three-d-scene:has(.plane-4) { padding-left: 30px; }



.three-d-scene:has(.plane-5) { padding-left: 40px; }



.three-d-scene:has(.plane-6) { padding-left: 50px; }



.three-d-scene:has(.plane-7) { padding-left: 60px; }



.three-d-scene:has(.plane-8) { padding-left: 70px; }



.three-d-scene:has(.plane-9) { padding-left: 80px; }



.three-d-scene:has(.plane-10) { padding-left: 90px; }



.three-d-scene:has(.plane-11) { padding-left: 100px; }







.four-d-scene {



    padding: 30px;



}







.four-d-scene .three-d-scene {



    padding: 0;



}







.floor-heading {



    border-left: 1px solid #0000;



    border-right: 1px solid #0000;



}







.floor-heading.top {



    border-top: 1px solid #0000;



}







.binary-explainer-separator {



    height: 2px; 



    margin: 10px 0;



    width: 100%;



    background-color: #2bdef9;



}







.depth-a {



    color: #FFFF00;



}







.depth-b {



    color: #00FFFF;



}







.depth-c {



    color: #FF00FF;



}







.depth-d {



    color: #00FF00;



}







.depth-e {



    color: #FF8000;



}







.depth-f {



    color: #0080FF;



}







.depth-g {



    color: #8000FF;



}







.depth-h {



    color: #008040;



}







.depth-i {



    color: #000080;



}







.indent-a::before { content: ''; visibility: hidden; }



.indent-b::before { content: '('; visibility: hidden; }



.indent-c::before { content: '(('; visibility: hidden; }



.indent-d::before { content: '((('; visibility: hidden; }



.indent-e::before { content: '(((('; visibility: hidden; }



.indent-f::before { content: '((((('; visibility: hidden; }



.indent-g::before { content: '(((((('; visibility: hidden; }



.indent-h::before { content: '((((((('; visibility: hidden; }



.indent-i::before { content: '(((((((('; visibility: hidden; }







svg.junk, svg.noise, svg.anchor, svg.abstract-symbol, svg.pattern-shape {



    height: var(--stimulus-size, 1.125em);



    width: auto;



    vertical-align: middle;



}







.emoji {



    font-size: var(--stimulus-size, 1.125em);



    line-height: 1;



}







svg.junk, svg.noise, svg.abstract-symbol {



    box-shadow: 0 0 0.01em 0.03em #000;



}







svg.topo-stimulus {



    box-shadow: 0 0 0.02em 0.04em rgba(0, 0, 0, 0.2);



    height: var(--stimulus-size, 1.125em);



    width: auto;



    vertical-align: middle;



}







svg.junk:hover, svg.noise:hover, svg.abstract-symbol:hover {



    box-shadow: 0 0 0.02em 0.06em #000;



}







svg.topo-stimulus:hover {



    box-shadow: 0 0 0.03em 0.08em rgba(0, 0, 0, 0.3);



}







.subject svg.junk {



    margin-bottom: 3px;



}







svg.arrow {



    fill: var(--text-color);



}







table.distinction td,



table.distinction th {



    vertical-align: top;



    border-left: 1px solid var(--text-color);



    border-right: 1px solid var(--text-color);



    min-width: 1em;



}







table.distinction {



    margin: 0 auto;



    border-collapse: collapse;



}







.sidebar-button {



    display: inline-block;



    font-family: "Espionage", sans-serif;



    letter-spacing: 0.15em;



    text-transform: uppercase;



}



.settings-label::before,



.history-label::before,



.credits-label::before,



.graph-label::before {



    content: none;



}







.tooltip-container {



    position: relative;



    display: inline-flex;



    align-items: center;



    justify-content: center;



    font-family: monospace;



    width: 20px;



    height: 20px;



    padding-left: 2px;



    background-color: #404E4D;



    color: #fff;



    font-size: var(--step--2);



    font-weight: bold;



    border-radius: 50%;



    cursor: pointer;



    text-align: center;



    user-select: none;



}







.tooltip-text {



    visibility: hidden;



    background-color: var(--background-color);



    color: var(--text-color);



    text-align: left;



    padding: 8px;



    border-radius: 4px;



    position: absolute;



    z-index: 100;



    bottom: 120%;



    white-space: nowrap;



    font-size: var(--step--2);



    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);



}







.tooltip-text.right {



    right: 1px;



}







.tooltip-text.shift-left {



    margin-right: 100px;



}







.tooltip-text.shift-left-small {



    margin-right: 10px;



}







.tooltip-text.shift-left-medium {



    margin-right: 145px;



}







.tooltip-text.shift-left-left {



    margin-right: 200px;



}







.tooltip-text.shift-right {



    margin-left: 100px;



}







.tooltip-text.shift-right-small {



    transform: translateX(15%);



}







/* Proper left/right positioning for tooltips to avoid edge clipping */



.tooltip-text.pos-left-150 {



    transform: translateX(-35%);



}







.tooltip-text.pos-left-50 {



    right: -50px;



}







.tooltip-text.pos-left-20 {



    right: -20px;



}







.tooltip-text.pos-left-10 {



    right: -10px;



}







.tooltip-text.pos-left-5 {



    right: -5px;



}







.tooltip-text.pos-center {



    transform: translateX(-60%);



    left: 50%;



}







.tooltip-text.pos-right-small {



    right: 20px;



}







.tooltip-container:hover .tooltip-text,



.tooltip-container:focus-within .tooltip-text,



.tooltip-container.show .tooltip-text {



    visibility: visible;



}







.profile-container {



    display: flex;



    position: relative;



    gap: 2px;



    align-items: center;



    justify-content: space-between;



    flex-wrap: wrap;



    min-height: 70px;



}







.profile-dropdown {



    position: relative;



    font-size: var(--step-0);



    font-family: monospace;



    flex: 1 1 220px;



    min-width: 0;



}







.profile-input {



    width: 100%;



    padding: 8px;



    font-size: var(--step--1);



    font-family: inherit;



    letter-spacing: inherit;



    box-sizing: border-box;



    color: var(--text-color);



    background-color: var(--profile-bg);



    border: var(--profile-border);



    height: 50px;



}







.profile-arrow {



    position: absolute;



    right: 1px;



    top: 0;



    width: 20%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



}







.profile-actions {



    display: flex;



    flex: 1 1 210px;



    gap: 2px;



    min-width: 0;



}



.profile-plus {



    min-width: 50px;



}



.profile-export, .profile-import {



    min-width: 74px;



}







.profile-arrow, .profile-plus, .profile-export, .profile-import {



    font-size: var(--step-2);



    cursor: pointer;



    user-select: none;



    background-color: var(--profile-arrow-bg);



    text-align: center;



    border: 1px solid #333;



    height: 50px;



}







.profile-plus, .profile-export, .profile-import {



    flex-grow: 1;



    display: flex;



    align-items: center;



    justify-content: center;



}







.profile-export .icon {



    line-height: 0;



    font-size: var(--step-1);



}







.profile-export .text, .profile-import .text {



    font-size: var(--step--1);



}







.profile-copied {



    pointer-events: none;



    opacity: 0;



    position: absolute;



    top: 100%;



    right: 0;



    padding: 4px;



    border-radius: 2px;



    background-color: #224222;



    transition: all 0.2s ease-out;



}







.profile-copied.toast {



    opacity: 0.92;



}







.profile-list {



    display: none;



    position: absolute;



    margin-top: 2px;



    border: var(--profile-select-border);



    background: var(--profile-select-bg);



    max-height: 300px;



    width: 360px;



    overflow-y: auto;



    overflow-x: hidden;



    z-index: 1000;



    user-select: none;



}







.profile-list .profile-select {



    border-top: 1px solid #444;



    padding: 8px;



    cursor: pointer;



    display: flex;



    position: relative;



    align-items: center;



    justify-content: space-between;



    white-space: nowrap;



    overflow: hidden;



    max-width: 380px;



}







.profile-list .profile-select.highlight {



    background-color: var(--profile-select-highlight);



}







.profile-list .profile-select:hover {



    background-color: var(--profile-select-hover);



}







.profile-list .profile-select.highlight:hover {



    background-color: var(--profile-select-highlight-hover);



}







.profile-list .profile-delete {



    display: flex;



    position: absolute;



    right: 9px;



    justify-content: center;



    align-items: center;



    background-color: var(--profile-select-delete);



    width: 40px;



    padding: 8px;



    margin: -9px;



    border-left: 1px solid #444;



    height: 100%;



}







.profile-list .profile-delete:hover {



    background-color: var(--profile-select-delete-hover);



}











.dropdown-settings {



    position: relative;



}







#progression-dropdown {



    font-size: var(--step--2);



    right: 0;



    left: auto;



    min-width: 20rem;



    max-width: calc(100% - 2rem);



    gap: 6px;



}







#linear-dropdown {



    right: 0;



    left: auto;



    min-width: 20rem;



}







.form-select {



    background-color: var(--select-background-color);



    color: var(--text-color);



    border: 1px solid #AAA;



    padding: 5px;



    padding-right: 30px;



    font-size: 16px;



    border-radius: 2px;



    appearance: none;



    cursor: pointer;



    width: 100%;



    white-space: normal;



    overflow-wrap: anywhere;



    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5z"/></svg>');



    background-repeat: no-repeat;



    background-position: right 5px center;



    background-size: 20px;



}







.form-select:hover, .form-select:focus {



    border-color: #666;



}







.settings-gear {



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



}







#linear-settings-button {



    background-color: var(--linear-settings-background-color);



    color: var(--accent-color, var(--text-color));



    border: 1px solid var(--accent-border, rgba(0,0,0,0.15));



    padding: 3px 6px;



    border-radius: 4px;



    display: inline-flex;



    gap: 6px;



    align-items: center;



}







.dropdown {



    display: none;



    flex-direction: column;



    top: 120%;



    position: absolute;



    left: 0;



    right: auto;



    min-width: 10rem;



    max-width: calc(100% - 1rem);



    background-color: var(--background-color);



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);



    z-index: 9999;



    padding: 6px;



    border-radius: 7px;



    box-sizing: border-box;



}







.dropdown-item {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 4px;



    margin-bottom: 4px;



    



}







.error-popup {



    display: none;



    position: fixed;



    bottom: 5%;



    right: 5%;



    background-color: #222;



    font-size: var(--step-0);



    width: fit-content;



    height: fit-content;



    justify-content: center;



    align-items: center;



    z-index: 1000;



}







.error-popup-content {



    background-color: #333;



    padding: 15px;



    padding-bottom: 50px;



    border-radius: 4px;



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);



    max-width: 350px;



    overflow-wrap: break-word;



}







#error-stack {



    width: 100%;



    height: 150px;



    margin-top: 10px;



    padding: 10px;



    border: 1px solid #555;



    color: #eee;



    background: #111;



    border-radius: 4px;



    font-family: monospace;



    font-size: var(--step--2);



    resize: none;



}







#error-close-popup {



    font-family: "Espionage";



    font-size: var(--step-1);



    background-color: #633;



    border: 1px solid #522;



    padding: 2px;



    cursor: pointer;



}







#error-close-popup:hover {



    background-color: #744;



}







#error-close-popup {



    position: absolute;



    bottom: 4px;



    right: 4px;



}







#graph-close-popup {



    position: relative;



    padding: 10px 28px;



    font-family: "Espionage", sans-serif;



    font-size: var(--step--1);



    font-weight: 600;



    background: #4a2d2d;



    border: 1px solid rgba(220, 53, 69, 0.3);



    border-radius: 8px;



    color: #e8d5d5;



    cursor: pointer;



    transition: all 0.25s ease;



    white-space: nowrap;



    overflow: hidden;



}







#graph-close-popup:hover {



    background: #5a3d3d;



    border-color: rgba(220, 53, 69, 0.5);



    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.25);



    transform: translateY(-1px);



}







.graph-popup {



    position: fixed;



    display: none;



    z-index: 1000;



    padding: 24px;



    background: #141c26;



    border-radius: 16px;



    box-shadow:



        0 20px 60px rgba(0, 0, 0, 0.5),



        0 0 0 1px rgba(var(--accent-rgb), 0.2),



        inset 0 1px 0 rgba(255, 255, 255, 0.05);



    top: 5%;



    left: 5%;



    width: 90vw;



    height: 90vh;



    backdrop-filter: blur(10px);



}







.graph-popup.visible {



    display: flex;



    gap: 16px;



    flex-direction: column;



}







.graph-popup-content {



    flex: 1;



    min-height: 0;



    display: none;



    background: rgba(0, 0, 0, 0.2);



    border-radius: 12px;



    padding: 16px;



    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);



}







.graph-popup-content.visible {



    display: flex;



    align-items: center;



    justify-content: center;



}







.graph-popup-content canvas {



    max-width: 100%;



    max-height: 100%;



}







/* Graph Controls - Tab Style */



.graph-controls {



    display: flex;



    flex-wrap: wrap;



    gap: 8px;



    padding: 6px;



    background: rgba(0, 0, 0, 0.3);



    border-radius: 12px;



    border: 1px solid var(--accent-border);



}







.graph-select {



    flex: 1 1 auto;



    white-space: nowrap;



    overflow: hidden;



    padding: 12px 20px;



    font-size: var(--step--1);



    font-weight: 500;



    background: var(--accent-bg);



    border: 1px solid var(--accent-border);



    border-radius: 8px;



    color: var(--text-color);



    cursor: pointer;



    transition: all 0.25s ease;



    position: relative;



    overflow: hidden;



}







.graph-select::before {



    content: '';



    position: absolute;



    top: 0;



    left: 0;



    right: 0;



    height: 2px;



    background: var(--bracket-color, #4aa39a);



    opacity: 0;



    transition: opacity 0.25s ease;



}







.graph-select:hover {



    background: var(--accent-hover);



    border-color: rgba(var(--accent-rgb), 0.3);



    transform: translateY(-1px);



    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);



}







.graph-select.selected {



    background: rgba(var(--accent-rgb), 0.16);



    border-color: rgba(var(--accent-rgb), 0.4);



    color: var(--bracket-color, #4aa39a);



    font-weight: 600;



}







.graph-select.selected::before {



    opacity: 1;



}







.graph-select.selected:hover {



    background: rgba(var(--accent-rgb), 0.22);



    border-color: rgba(var(--accent-rgb), 0.5);



}







/* Graph End Controls */



.graph-end-controls {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 12px 16px;



    background: rgba(0, 0, 0, 0.2);



    border-radius: 10px;



    border: 1px solid rgba(var(--accent-rgb), 0.1);



    gap: 16px;



}







.graph-end-controls > div {



    font-size: var(--step--2);



    opacity: 0.7;



    font-style: italic;



    flex: 0 0 auto;



}







.graph-end-controls > button {



    flex: 0 0 auto;



}







.folder {



    cursor: pointer;



    padding: 8px;



    width: 300px;



    display: flex;



    align-items: center;



    height: 50px;



    background-color: var(--folder-bg);



    margin-bottom: 20px;



    user-select: none;



}







.folder-content {



    display: none;



    margin-bottom: 20px;



}







.folder-arrow {



    width: 25px;



    height: 25px;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: var(--step--1);



}







.folder-arrow.open {



    transform: rotate(90deg) translateX(3px);



}







#reset-app {



    margin-top: 10px;



    padding: 10px;



    width: 200px;



}







.anchor-explanation {



    display: grid;



    grid-template-columns: repeat(3, 20px);



    grid-template-rows: repeat(3, 20px);



    gap: 2px;



    width: 70px;



    height: 70px;



    margin: 0 auto;



}







#svg-0 { grid-column: 2 / 3; grid-row:  1 / 2; }



#svg-1 { grid-column: 3 / 4; grid-row:  2 / 3; }



#svg-3 { grid-column: 2 / 3; grid-row:  3 / 4; }



#svg-2 { grid-column: 1 / 2; grid-row:  2 / 3; }







.progress-container {



    display: none;



    flex-direction: column;



    align-items: center;



    position: absolute;



    top: 50%;



    transform: translateY(-50%);



    z-index: 100;



    font-family: "Espionage", sans-serif;



}







.progress-container.visible {



    display: flex;



}







#daily-progress-container {



    left: 0;



}







#weekly-progress-container {



    right: 0;



}







.progress-bar-vertical {



    height: 40vh;



    width: 24px;



    background: rgba(var(--accent-rgb, 33, 127, 228), 0.08);



    border: 1px solid rgba(var(--accent-rgb, 33, 127, 228), 0.25);



    border-radius: 12px;



    position: relative;



    overflow: hidden;



    display: flex;



    align-items: center;



    justify-content: center;



    backdrop-filter: blur(4px);



}







.progress-fill {



    position: absolute;



    bottom: 0;



    width: 100%;



    background: rgba(var(--accent-rgb, 33, 127, 228), 0.52);



    box-shadow: 0 0 6px rgba(var(--accent-rgb, 33, 127, 228), 0.3);



    border-radius: 0 0 12px 12px;



    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);



}







.progress-fill.halfway {



    background: rgba(var(--accent-rgb, 33, 127, 228), 0.72);



    box-shadow: 0 0 8px rgba(var(--accent-rgb, 33, 127, 228), 0.4);



}







.progress-fill.complete {



    background: color-mix(in srgb, var(--theme-color, #217fe4) 58%, #eddb7e);



    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color, #217fe4) 50%, #eddb7e);



}







.progress-content {



    writing-mode: vertical-lr;



    transform: rotate(180deg);



    position: absolute;



    z-index: 1;



    height: 100%;



    width: 100%;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: space-between;



    padding: 12px 0;



    pointer-events: none;



    color: rgba(255, 255, 255, 0.8);



    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);



}







.progress-label {



    font-size: 14px;



    letter-spacing: 1px;



    text-transform: uppercase;



}







.progress-value {



    font-family: "Roboto", sans-serif;



    font-size: 13px;



    white-space: nowrap;



    color: rgba(255, 255, 255, 0.9);



    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);



}







@media (max-width: 768px) {



    .main-view {



        border: 0;



        box-shadow: none;



    }



    .progress-bar-vertical {



      width: 20px;



    }



    .progress-content {



      padding: 8px 0;



    }



    .progress-label {



      font-size: 12px;



    }



    .progress-value {



      font-size: 11px;



    }



    .display_text {



        font-size: var(--step-05);



    }



    .graph-select {



        font-size: var(--step--1);



        flex: 1 1 auto;



        white-space: nowrap;



        overflow: hidden;



    }



}







@media (max-width: 500px) {



    .offcanvas {



        max-width: none;



        width: calc(100vw);



    }







    .display-inner {



        padding: 0.5rem 0.125rem 0.5rem 0.625rem;



        margin: 0;



    }







    .display_text {



        padding-right: 0.375em;



    }













    label.open {



        padding: 0.6rem 1rem;



        font-size: var(--step--1);



    }







    .game-area {



        max-width: calc(100vw - 3rem);



    }







    .inline-input__outer {



        gap: 0.2rem;



    }







    .carousel_display_label-wrapper h2, .display-inner h2 {



        gap: 0.2rem;



    }







    .display_text.minimal {



        font-size: var(--step-1);



    }







    svg.junk, svg.noise, svg.anchor, svg.abstract-symbol {



        height: var(--stimulus-size, 1.25em);



    }







    .profile-container {



        flex-wrap: wrap;



        height: auto;



    }







    .profile-dropdown {



        width: 100%;



        flex-basis: 100%;



    }



    .profile-actions {



        width: 100%;



        flex-basis: 100%;



    }







    .profile-list {



        position: static !important;



        display: block !important;



        max-height: none !important;



        width: 100% !important;



    }







    .profile-arrow {



        display: none;



    }



}







@media (max-width: 360px) {



    label.open {



        padding: 0.5rem 0.8rem;



        font-size: var(--step--1);



    }







    .display-inner {



        padding: 0.5rem 0 0.5rem 0.25rem;



        margin: 0;



    }







    .display_text {



        padding-right: 0.125em;



    }



}







/* Mobile bracket sizing - hide on mobile */



@media (max-width: 500px) {



    .border-left,



    .border-right,



    .bracket-lip-top-left,



    .bracket-lip-bottom-left,



    .bracket-lip-top-right,



    .bracket-lip-bottom-right {



        display: none;



    }



}







/* === Modern UI Improvements === */







/* Custom Scrollbar - Square Futuristic */



::-webkit-scrollbar {



    width: 6px;



    height: 6px;



}







::-webkit-scrollbar-button {



    display: none !important;



}







::-webkit-scrollbar-track {



    background: rgba(0, 0, 0, 0.15);



    border: none;



    border-radius: 0 !important;



}







::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    background-clip: padding-box !important;



    min-height: 20px;



}







::-webkit-scrollbar-thumb:hover {



    background-color: #5bb4ab;



    border: 1px solid transparent !important;



    border-radius: 0 !important;



}







::-webkit-scrollbar-corner {



    background: transparent;



    border-radius: 0 !important;



}







/* Enhanced Buttons */



button {



    position: relative;



    overflow: hidden;



    transition: all 0.2s ease;



    border-radius: 6px;



    font-weight: 500;



}







button:not(:disabled):active {



    transform: translateY(1px);



}




button:not(:disabled)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: none;
    transition: left 0.5s;
}


button:not(:disabled):hover::after {
    left: 100%;
}


/* Enhanced Game Area */


.game-area {



    border-radius: 0 0 var(--game-area-radius, 12px) var(--game-area-radius, 12px);



    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);



    transition: box-shadow 0.3s ease-in-out;



}







.game-area:hover {



    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);



}







/* Display Text Improvements */



.display_text {



    border-radius: 8px;



    padding: 1rem;



    background: transparent;



    font-size: calc(var(--step-0) * 0.98);



}







/* Premise Styling */



.formatted-premise {



    line-height: 1.3;



}







.formatted-conclusion {



    font-weight: 600;



    color: var(--conclusion-color, #ffffff);



}







/* Confirmation Buttons Enhancement */
    
.confirmation-buttons button {
    


    min-width: 96px;



    padding: 0.6em 1.2em;



    font-size: 0.88em;



    border-radius: 8px;



    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);



}

/* Keep the longer ternary answer fully visible inside the three-button row. */
.confirmation-buttons .confirmation-indeterminable {
    flex: 1.35 1 10rem;
    min-width: 0;
    max-width: 11.5rem;
    padding-inline: clamp(0.32rem, 1.2vw, 0.62rem);
    font-size: clamp(0.66rem, 2.55vw, 0.82em);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

@media (max-width: 430px) {
    .confirmation-buttons:has(.confirmation-indeterminable:not([hidden])) {
        gap: 0.42rem;
    }

    .confirmation-buttons:has(.confirmation-indeterminable:not([hidden])) button {
        min-width: 0;
        padding-inline: 0.4rem;
    }

    .confirmation-buttons .confirmation-indeterminable {
        font-size: clamp(0.58rem, 3vw, 0.7rem);
    }
}















/* Success/Error States Enhancement */



.game-area.right {



    animation: pulse-green 0.5s ease;



}







.game-area.wrong {



    animation: shake 0.5s ease;



}







@keyframes pulse-green {



    0%, 100% { box-shadow: 0 0 10px rgba(40, 167, 69, 0.7); }



    50% { box-shadow: 0 0 25px rgba(40, 167, 69, 1); }



}







@keyframes shake {



    0%, 100% { transform: translateX(0); }



    25% { transform: translateX(-5px); }



    75% { transform: translateX(5px); }



}







/* Timer Enhancement */



.timer-display {



    font-variant-numeric: tabular-nums;



    letter-spacing: 0.05em;



}







/* Settings Panel Improvements */



.dropdown-item {



    padding: 0.75rem 1rem;



    border-bottom: 1px solid rgba(255, 255, 255, 0.06);



    transition: background 0.2s ease;



}







.dropdown-item:hover {



    background: rgba(255, 255, 255, 0.03);



}







.dropdown-item:last-child {



    border-bottom: none;



}







.light-mode .dropdown-item {



    border-bottom: 1px solid rgba(0, 0, 0, 0.08);



}







.light-mode .dropdown-item:hover {



    background: rgba(0, 0, 0, 0.04);



}







/* Form Select Enhancement */



.form-select {



    border-radius: 6px;



    border: 1px solid rgba(255, 255, 255, 0.1);



    background: rgba(0, 0, 0, 0.15);



    transition: border-color 0.2s ease, box-shadow 0.2s ease;



}







.form-select:focus {



    border-color: var(--theme-color, #217fe4);



    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);



    outline: none;



}







/* Input Number Enhancement - neutral defaults; sidebar/timer override for transparent inputs */



input[type="number"] {



    border-radius: 4px;



    border: 1px solid rgba(255,255,255,0.08);



    background: rgba(0, 0, 0, 0.12);



    transition: all 0.12s ease;



}







input[type="number"]:focus {



    border-color: var(--theme-color, #217fe4);



    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 33,127,228), 0.08);



    outline: none;



}







/* Switch/Toggle Enhancement */



.switch {



    position: relative;



    display: inline-block;



    width: 44px;



    height: 24px;



}







.switch input {



    opacity: 0;



    width: 0;



    height: 0;



}







.slider {



    position: absolute;



    cursor: pointer;



    top: 0;



    left: 0;



    right: 0;



    bottom: 0;



    background-color: #2b3a37;



    transition: .3s;



    border-radius: 24px;



}







.slider:before {



    position: absolute;



    content: "";



    height: 18px;



    width: 18px;



    left: 3px;



    bottom: 3px;



    background-color: white;



    transition: .3s;



    border-radius: 50%;



}







input:checked + .slider {



    background-color: var(--bracket-color, #4aa39a);



}







input:checked + .slider:before {



    transform: translateX(20px);



}







/* History List Enhancement */



#history-list li {



    border-left: 3px solid transparent;



    transition: all 0.2s ease;



}







#history-list li.hqli--right {



    border-left-color: hsl(var(--accent-h) 90% 72% / 0.6);



}







#history-list li.hqli--wrong {



    border-left-color: var(--wrong-color);



}







/* Tooltip Enhancement */



.tooltip-text {



    border-radius: 8px;



    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);



    backdrop-filter: blur(4px);



}







/* Junk/Noise Icons Enhancement */



.junk {



    border-radius: 6px;



    transition: transform 0.2s ease;



}







.junk:hover {



    transform: scale(1.05);



}







/* Offcanvas Enhancement */



.offcanvas {



    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.4);



    transition: none;



}







.offcanvas--left {



    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4);



}







/* === Settings Panel Revamp === */







/* Better section organization with visual hierarchy */



#sidebar-settings .offcanvas-body {



    padding: 0.5rem 1rem 1rem 1rem;



}







#sidebar-settings .mb-1 {



    margin-bottom: 0.6rem !important;



    padding: 0.6rem 0.75rem;



    background: rgba(0, 0, 0, 0.15);



    border-radius: 8px;



    border: 1px solid rgba(255, 255, 255, 0.06);



    transition: all 0.2s ease;



}







#sidebar-settings .mb-1:hover {



    background: rgba(0, 0, 0, 0.2);



    border-color: rgba(255, 255, 255, 0.1);



}







#sidebar-settings .mb-2 {



    margin-bottom: 1rem !important;



}







/* Section headers */



#sidebar-settings .inline-input__outer.big-input {



    font-size: var(--step-1);



    font-weight: 600;



    color: var(--bracket-color, #4aa39a);



    background: transparent;



    gap: 0.5rem;



    padding: 0.5rem 0;



    border-bottom: 2px solid rgba(255, 255, 255, 0.1);



    margin-bottom: 0.75rem;



}







#sidebar-settings .inline-input__outer {



    background: transparent;



    gap: 0.5rem;



}







/* Divider enhancement */



#sidebar-settings hr.divider {



    border: none;



    height: 2px;



    background: var(--theme-color, #217fe4);



    opacity: 0.4;



    margin: 1.25rem 0;



}







/* Toggle switches with better spacing */



#sidebar-settings .ctrl__inner {



    gap: 0.8rem;



    padding: 0.25rem 0;



}







#sidebar-settings .ctrl__inner label {



    font-size: var(--step--1);



    flex: 1;



}







.sub-option {



    display: flex;



    align-items: center;



    gap: 0.5rem;



    margin-left: 1.5rem;



    padding: 0.15rem 0;



    font-size: var(--step--2);



    opacity: 0.85;



}







/* Nested/indented options */



#sidebar-settings div[style*="margin-left: 2rem"] {



    margin-left: 1.5rem !important;



    padding-left: 0.75rem;



    border-left: 2px solid rgba(255, 255, 255, 0.08);



    margin-top: 0.25rem !important;



}







/* Multi-input groups */



#sidebar-settings .multi-input {



    display: flex;



    /* allow wrapping so controls flow instead of forcing a scrollbar */



    flex-wrap: wrap;



    gap: 0.5rem;



    margin-top: 0.5rem;



    padding: 0.5rem;



    border-radius: 6px;



    overflow-x: visible; /* prevent horizontal scrollbar */



}







#sidebar-settings .single-input {



    font-size: var(--step--2);



    padding: 0.25rem 0.5rem;



    border-radius: 4px;



    /* make inputs harmoniously sized in a row */



    flex: 1 1 0;



    min-width: 80px;



}







/* Explainer lists */



#sidebar-settings ul.explainer {



    margin: 0.5rem 0 0.5rem 1.5rem;



    font-size: var(--step--2);



    opacity: 0.7;



}







#sidebar-settings ul.explainer li {



    margin-bottom: 0.15rem;



    padding-left: 0.5rem;



}







/* Profile section enhancement */



#sidebar-settings .profile-container {



    padding: 0.75rem;



    background: rgba(0, 0, 0, 0.15);



    border-radius: 8px;



    border: 1px solid var(--accent-border);



}







#sidebar-settings .profile-actions {



    gap: 0.35rem;



}







#sidebar-settings .profile-input {



    background: rgba(0, 0, 0, 0.3);



    border: 1px solid var(--accent-border);



    border-radius: 4px;



    padding: 0.4rem 0.6rem;



    font-size: var(--step--1);



}







#sidebar-settings .profile-plus,



#sidebar-settings .profile-export,



#sidebar-settings .profile-import {



    transition: all 0.2s ease;



    border-radius: 4px;



    padding: 0.3rem 0.6rem;



}







#sidebar-settings .profile-plus:hover,



#sidebar-settings .profile-export:hover,



#sidebar-settings .profile-import:hover {



    background: var(--accent-hover);



}







/* Settings gear icon */



#sidebar-settings .settings-gear {



    display: inline-flex;



    align-items: center;



    gap: 0.4rem;



    padding: 0.3rem 0.6rem;



    background: var(--accent-gear-bg);



    border-radius: 4px;



    border: 1px solid var(--accent-border);



    transition: all 0.2s ease;



    font-size: var(--step--2);



}







#sidebar-settings .settings-gear:hover {



    background: var(--accent-hover);



    border-color: var(--accent-gear-bg-strong);



}







/* Dropdown within settings */



#sidebar-settings .dropdown {



    margin-top: 0.5rem;



    border-radius: 8px;



    z-index: 9999;



}







/* Ensure dropdown container has proper positioning */



#sidebar-settings .dropdown-settings {



    position: relative;



    z-index: 100;



}







#sidebar-settings .dropdown-item {



    padding: 0.6rem 0.75rem;



}







/* Glowing pill input styling for settings - futuristic game look */



#sidebar-settings input[type="number"],



#sidebar-settings input[type="text"],



#sidebar-settings .inline-premise-spinner > input,



#sidebar-settings .inline-input__inner > input {



    background: transparent;



    color: var(--text-color, #ffffff);



    border: none;



    outline: none;



    border-radius: 50px;



    padding: 0.3rem 0.5rem;



    text-align: center;



    font-size: var(--step--1);



    font-weight: 600;



    min-width: 7ch;



    /* The glowing underline effect */



    box-shadow: inset 0px -2px 0px 0px var(--theme-color, #217fe4), 0px 4px 12px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.4);



    transition: box-shadow 0.3s ease;



}







#sidebar-settings input[type="number"]:focus,



#sidebar-settings .inline-premise-spinner > input:focus,



#sidebar-settings .inline-input__inner > input:focus {



    background: transparent;



    outline: none;



    box-shadow: inset 0px -3px 0px 0px var(--theme-color, #217fe4), 0px 6px 16px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.6);



}







/* Form select in settings */



#sidebar-settings .form-select {



    background: rgba(0, 0, 0, 0.15);



    border: 1px solid rgba(255, 255, 255, 0.1);



    border-radius: 4px;



    padding: 0.4rem 0.6rem;



    font-size: var(--step--2);



    color: var(--text-color);



}







#sidebar-settings .form-select:focus {



    border-color: var(--theme-color, #217fe4);



    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 33,127,228), 0.1);



}







#sidebar-settings .form-select option {



    background-color: var(--background-color);



    color: var(--text-color);



}







.light-mode #sidebar-settings .form-select {



    background: rgba(0, 0, 0, 0.05);



    border: 1px solid rgba(0, 0, 0, 0.15);



}







.light-mode #sidebar-settings .form-select:focus {



    border-color: var(--theme-color, #217fe4);



}







.light-mode #sidebar-settings .form-select option {



    background-color: #FFF;



    color: #111;



}







/* Tooltip in settings */



#sidebar-settings .tooltip-container {



    margin-left: 0.5rem;



}







/* Labels with icons */



#sidebar-settings label[for] {



    cursor: pointer;



    user-select: none;



}







/* Question type sections */



#sidebar-settings div:has(> .ctrl__inner > label[for^="p-1"]) + ul.explainer,



#sidebar-settings div:has(> .ctrl__inner > label[for^="p-2"]) + ul.explainer,



#sidebar-settings div:has(> .ctrl__inner > label[for^="p-3"]) + ul.explainer,



#sidebar-settings div:has(> .ctrl__inner > label[for^="p-4"]) + ul.explainer {



    font-style: italic;



    color: var(--bracket-color, #4aa39a);



}







/* Reset section at bottom */



#sidebar-settings #reset-app {



    width: 100%;



    padding: 0.75rem;



    font-size: var(--step--1);



    font-weight: 600;



    background: rgba(230, 107, 128, 0.06);



    border: 0px solid rgba(220, 53, 69, 0);



    border-radius: 6px;



    margin-top: 0.5rem;



    transition: all 0.2s ease;



}







#sidebar-settings #reset-app:hover {



    background: rgba(230, 107, 128, 0.06);



    border-color: rgba(230, 107, 128, 0.12);



}







/* Progress Display Enhancement */



#progress-display {



    font-variant-numeric: tabular-nums;



}







/* Carousel Enhancement */



.carousel-button {



    border-radius: 50%;



    width: 40px;



    height: 40px;



    display: flex;



    align-items: center;



    justify-content: center;



    transition: all 0.2s ease;



}







.carousel-button:hover:not(:disabled) {



    transform: scale(1.1);



    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);



}







/* Focus styles for keyboard navigation */



button:focus-visible,



a:focus-visible,



input:focus-visible,



select:focus-visible,



textarea:focus-visible {



    outline: 2px solid var(--bracket-color, #4aa39a);



    outline-offset: 2px;



}







/* Dropdown depth */



.dropdown {



    border-radius: 10px;



    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);



    overflow: hidden;



}







/* Respect reduced motion preferences */



@media (prefers-reduced-motion: reduce) {



    * {



        animation-duration: 0.01ms !important;



        animation-iteration-count: 1 !important;



        transition-duration: 0.01ms !important;



        scroll-behavior: auto !important;



    }



}







/* Settings Section Organization — card-style list like modern settings */



.settings-section-header {



    display: flex;



    align-items: center;



    gap: 0.75rem;



    cursor: pointer;



    font-weight: 700;



    color: var(--text-color);



    text-transform: uppercase;



    font-size: 0.95rem;



    padding: 0.9rem 1rem;



    background: rgba(255,255,255,0.018);



    border-radius: 10px;



    border: 1px solid rgba(255,255,255,0.03);



    transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;



    align-items: center;



    justify-content: space-between;



    letter-spacing: 0.06em;



}







.settings-section-header:hover {



    transform: translateY(-3px);



    background: rgba(255,255,255,0.03);



    box-shadow: 0 12px 30px rgba(0,0,0,0.6);



}







.settings-section-header .section-arrow {



    transition: transform 0.25s ease;



    font-size: 0.9em;



    margin-left: 0.75rem;



    color: rgba(255,255,255,0.7);



}







.settings-section-header.collapsed .section-arrow {



    transform: rotate(-90deg);



}







.settings-section-header .section-icon {



    width: 28px;



    height: 28px;



    margin-right: 0.75rem;



    padding: 4px;



    border-radius: 8px;



    background: rgba(255,255,255,0.03);



    box-shadow: 0 2px 6px rgba(0,0,0,0.6);



    opacity: 0.95;



    transition: transform 0.15s ease, box-shadow 0.15s ease;



    flex-shrink: 0;



}







.settings-section-header:hover .section-icon {



    transform: scale(1.08);



    opacity: 1;



    box-shadow: 0 6px 14px rgba(0,0,0,0.6);



}







/* Section-specific icon tints (subtle) */



.settings-section.profile-section .settings-section-header .section-icon {



    background: rgba(237, 219, 126, 0.10);



    box-shadow: 0 2px 6px rgba(237, 219, 126, 0.08);



}







.settings-section.difficulty-section .settings-section-header .section-icon {



    background: rgba(255, 107, 107, 0.08);



    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.06);



}







.settings-section.content-section .settings-section-header .section-icon {



    background: rgba(107, 255, 148, 0.08);



    box-shadow: 0 2px 6px rgba(107, 255, 148, 0.06);



}







.settings-section.gamemode-section .settings-section-header .section-icon {



    background: var(--accent-gear-bg, rgba(33, 127, 228, 0.08));



    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);



}







.settings-section.appearance-section .settings-section-header .section-icon {



    background: rgba(255, 148, 200, 0.08);



    box-shadow: 0 2px 6px rgba(255, 148, 200, 0.06);



}







.settings-section.advanced-section .settings-section-header .section-icon {



    background: rgba(200, 148, 255, 0.08);



    box-shadow: 0 2px 6px rgba(200, 148, 255, 0.06);



}







.settings-section-header .settings-left {



    display: flex;



    align-items: center;



    gap: 0.6rem;



    flex: 1 1 auto;



}







.section-label {



    display: inline-block;



}







.settings-section-content {



    padding: 1rem;



    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;



    max-height: none;



    opacity: 1;



    overflow: visible;



}







.settings-section-content.collapsed {



    max-height: 0;



    opacity: 0;



    padding: 0 1rem;



    overflow: hidden;



}







/* Modal-style settings view - hide main menu when section is active */



.settings-main-menu.hidden {



    display: none !important;



}







/* Full-screen section view */



.settings-section {



    display: none;



    margin-bottom: 0 !important;



    background: transparent;



    border: none;



    box-shadow: none;



    overflow: visible;



}







.settings-section.active {



    display: block;



    animation: fadeIn 0.3s ease;



}







/* When section is active, ensure content is visible - OVERRIDE ALL */



.settings-section.active .settings-section-content,



.settings-section.active .settings-section-content.collapsed,



.settings-section.active > .settings-section-content {



    max-height: none !important;



    opacity: 1 !important;



    padding: 1rem !important;



    overflow: visible !important;



    display: block !important;



    visibility: visible !important;



}







/* Hide section headers when in modal view */



.settings-section.active .settings-section-header {



    display: none;



}







@keyframes fadeIn {



    from { opacity: 0; transform: translateY(10px); }



    to { opacity: 1; transform: translateY(0); }



}







/* Flat Settings mode - all sections in one scrollable page */



.flat-settings .settings-main-menu {



    display: none !important;



}



.flat-settings .settings-back-btn {



    display: none !important;



}



.flat-settings .settings-section {



    display: block !important;



    margin-bottom: 0 !important;



    padding-bottom: 1rem !important;



    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;



}







.light-mode .flat-settings .settings-section {



    border-bottom-color: rgba(0, 0, 0, 0.06) !important;



}



.flat-settings .settings-section .settings-section-content,

.flat-settings .settings-section .settings-section-content.collapsed,

.flat-settings .settings-section > .settings-section-content {



    max-height: none !important;



    opacity: 1 !important;



    padding: 1rem !important;



    padding-bottom: 1.5rem !important;



    overflow: visible !important;



    display: block !important;



    visibility: visible !important;



}



.flat-settings .settings-section .settings-section-header {

    display: flex !important;

    justify-content: center !important;

    cursor: default;

    pointer-events: none;

    padding: 0.6rem 1rem 0.8rem;

    margin: 2rem 0 0.75rem 0;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    border-radius: 0;

    font-size: 1.25rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    opacity: 0.95;

    position: relative;

}



.flat-settings .settings-section .settings-section-header::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 1px;

    background: currentColor;

    opacity: 0.5;

}



.flat-settings .settings-section .settings-section-header .section-icon {

    display: none !important;

}



.flat-settings .settings-section .settings-section-header .settings-left {

    flex: 0 1 auto;

    justify-content: center;

    width: auto;

    gap: 0;

}



.flat-settings .settings-section .settings-section-header .section-arrow {



    display: none;



}



.flat-settings .settings-section .settings-section-header:hover {



    background: inherit;



    transform: none;



    box-shadow: none;



}







.flat-settings .folder-content,

.flat-settings .legacy-folder-content {



    display: block !important;



    max-height: none !important;



    opacity: 1 !important;



    overflow: visible !important;



    padding: 0.5rem 1rem !important;



}







/* Section Nav Bar mode - compact left-side navigation */



.section-nav-bar .offcanvas-body > div {



    display: flex;



    flex-direction: row;



    height: 100%;



}



.section-nav-bar .offcanvas-body {



    height: 100%;



}



.section-nav-bar .settings-main-menu {



    display: flex !important;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    width: 52px;



    min-width: 52px;



    padding: 0.5rem 0;



    gap: 0.35rem;



    border-right: 1px solid rgba(255, 255, 255, 0.06);



    flex-shrink: 0;



}



.section-nav-bar .settings-main-menu.hidden {



    display: flex !important;



}



.section-nav-bar .settings-menu-btn {



    padding: 0;



    background: transparent;



    border: none;



    border-radius: 8px;



    width: 44px;



    height: 44px;



    justify-content: center;



    align-items: center;



    backdrop-filter: none;



    -webkit-backdrop-filter: none;



}



.section-nav-bar .settings-menu-btn::before {



    display: none;



}



.section-nav-bar .settings-menu-btn:hover {



    background: rgba(255, 255, 255, 0.06);



    transform: none;



}



.section-nav-bar .settings-menu-btn:active {



    transform: scale(0.92);



}



.section-nav-bar .settings-menu-btn .btn-icon-wrap {



    width: 36px;



    height: 36px;



    border-radius: 6px;



}



.section-nav-bar .settings-menu-btn .btn-icon-wrap svg {



    width: 22px;



    height: 22px;



}



.section-nav-bar .settings-menu-btn .btn-text-wrap,



.section-nav-bar .settings-menu-btn .btn-chevron {



    display: none;



}



.section-nav-bar .settings-menu-footer {



    display: none;



}



.section-nav-bar .settings-back-btn {



    display: none !important;



}



.section-nav-bar .settings-section.active {
    flex: 1 1 auto;
    width: 100%;
    max-width: none !important;
    overflow-y: auto;
    padding: 0 !important;
}

.section-nav-bar .settings-section.active .settings-section-content {
    padding: 1.25rem !important;
    width: 100%;
    max-width: none !important;
}

.section-nav-bar .offcanvas-body {
    height: 100%;
    padding: 0 !important;
}



.section-nav-bar .settings-section.active .settings-section-header {



    display: flex !important;



    justify-content: center !important;



    padding: 0.6rem 1rem 0.8rem;



    margin: 2rem 0 0.75rem 0;



    cursor: default;



    pointer-events: none;



    background: transparent !important;



    border: none !important;



    box-shadow: none !important;



    border-radius: 0;



    font-size: 1.25rem;



    letter-spacing: 0.15em;



    text-transform: uppercase;



    opacity: 0.95;



    position: relative;



}



.section-nav-bar .settings-section.active .settings-section-header .section-arrow {



    display: none;



}



.section-nav-bar .settings-section.active .settings-section-header .section-icon {



    display: none;



}



.section-nav-bar .settings-section.active .settings-section-header::after {



    content: '';



    position: absolute;



    bottom: 0;



    left: 50%;



    transform: translateX(-50%);



    width: 100px;



    height: 1px;



    background: currentColor;



    opacity: 0.5;



}



.section-nav-bar .settings-section.active .settings-section-content {



    padding: 1.25rem !important;
    width: 100%;
    max-width: none !important;



}



.section-nav-bar .settings-section.active .settings-section-header .settings-left {



    flex: 0 1 auto;



    justify-content: center;



    width: 100%;



}



.section-nav-bar .settings-menu-btn[data-active] {



    background: rgba(255, 255, 255, 0.08);



}



.light-mode .section-nav-bar .settings-main-menu {



    border-right-color: rgba(0, 0, 0, 0.06);



}



.light-mode .section-nav-bar .settings-menu-btn:hover {



    background: rgba(0, 0, 0, 0.06);



}



.light-mode .section-nav-bar .settings-menu-btn[data-active] {



    background: rgba(0, 0, 0, 0.08);



}



.light-mode .section-nav-bar .settings-section.active .settings-section-header {



    border-bottom-color: rgba(0, 0, 0, 0.06);



}







.section-nav-bar.offcanvas {



    max-width: 560px;



}







/* Settings Main Menu — modern list layout */



.settings-main-menu {



    display: flex;



    flex-direction: column;



    gap: 0.5rem;



    padding: 0.25rem 0;



}







.settings-menu-btn {



    position: relative;



    padding: 0.85rem 1rem;



    background: rgba(255, 255, 255, 0.02);



    border: 1px solid rgba(255, 255, 255, 0);



    border-radius: 10px;



    cursor: pointer;



    transition: all 0.2s ease;



    display: flex;



    align-items: center;



    gap: 0.75rem;



    width: 100%;



    text-align: left;



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



}







.settings-menu-btn::before {



    content: '';



    position: absolute;



    left: 0;



    top: 0;



    bottom: 0;



    width: 3px;



    border-radius: 10px 0 0 10px;



    background: var(--btn-accent, hsl(var(--accent-h) 80% 55%));



    opacity: 0.5;



    transition: opacity 0.2s ease, width 0.2s ease;



}







.settings-menu-btn:hover {



    background: rgba(255, 255, 255, 0.05);



    border-color: rgba(255, 255, 255, 0);



    transform: translateX(4px);



}







.settings-menu-btn:hover::before {



    opacity: 1;



    width: 4px;



}







.settings-menu-btn:active {



    transform: translateX(2px) scale(0.99);



}







.settings-menu-btn .btn-icon-wrap {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 36px;



    height: 36px;



    border-radius: 8px;



    background: var(--btn-accent-bg, hsl(var(--accent-h) 40% 40% / 0.12));



    flex-shrink: 0;



    transition: background 0.2s ease;



}







.settings-menu-btn:hover .btn-icon-wrap {



    background: var(--btn-accent-bg-hover, hsl(var(--accent-h) 50% 50% / 0.18));



}







.settings-menu-btn .btn-text-wrap {



    display: flex;



    flex-direction: column;



    gap: 0.1rem;



    flex: 1 1 auto;



    min-width: 0;



}







.settings-menu-btn .btn-label {



    font-family: "Espionage", sans-serif;



    font-size: var(--step--1);



    letter-spacing: 0.08em;



    text-transform: uppercase;



    color: var(--text-color);



}







.settings-menu-btn .btn-sublabel {



    font-size: var(--step--3);



    opacity: 0.5;



    color: var(--text-color);



    font-weight: 400;



    letter-spacing: 0.02em;



}







.settings-menu-btn .btn-chevron {



    opacity: 0.3;



    flex-shrink: 0;



    transition: opacity 0.2s ease, transform 0.2s ease;



}







.settings-menu-btn:hover .btn-chevron {



    opacity: 0.7;



    transform: translateX(2px);



}







/* Section-specific accent colors */



.settings-menu-btn[data-section="profile-section"] {



    --btn-accent: #eddb7e;



    --btn-accent-bg: rgba(237, 219, 126, 0.10);



    --btn-accent-bg-hover: rgba(237, 219, 126, 0.18);



}







.settings-menu-btn[data-section="profile-section"] .btn-icon-wrap {



    color: #eddb7e;



}







.settings-menu-btn[data-section="difficulty-section"] {



    --btn-accent: #ff6b6b;



    --btn-accent-bg: rgba(255, 107, 107, 0.10);



    --btn-accent-bg-hover: rgba(255, 107, 107, 0.18);



}







.settings-menu-btn[data-section="difficulty-section"] .btn-icon-wrap {



    color: #ff6b6b;



}







.settings-menu-btn[data-section="content-section"] {



    --btn-accent: #6bff94;



    --btn-accent-bg: rgba(107, 255, 148, 0.10);



    --btn-accent-bg-hover: rgba(107, 255, 148, 0.18);



}







.settings-menu-btn[data-section="content-section"] .btn-icon-wrap {



    color: #6bff94;



}







.settings-menu-btn[data-section="gamemode-section"] {



    --btn-accent: #3377ff;



    --btn-accent-bg: rgba(51, 119, 255, 0.10);



    --btn-accent-bg-hover: rgba(51, 119, 255, 0.18);



}







.settings-menu-btn[data-section="gamemode-section"] .btn-icon-wrap {



    color: #3377ff;



}







.settings-menu-btn[data-section="appearance-section"] {



    --btn-accent: #ff94c8;



    --btn-accent-bg: rgba(255, 148, 200, 0.10);



    --btn-accent-bg-hover: rgba(255, 148, 200, 0.18);



}







.settings-menu-btn[data-section="appearance-section"] .btn-icon-wrap {



    color: #ff94c8;



}







.settings-menu-btn[data-section="advanced-section"] {



    --btn-accent: #c894ff;



    --btn-accent-bg: rgba(200, 148, 255, 0.10);



    --btn-accent-bg-hover: rgba(200, 148, 255, 0.18);



}







.settings-menu-btn[data-section="advanced-section"] .btn-icon-wrap {



    color: #c894ff;



}







/* Discord button */



.settings-menu-footer {



    margin-top: 0.75rem;



    padding-top: 0.75rem;



    border-top: 1px solid rgba(255, 255, 255, 0.06);



    display: flex;



    flex-direction: column;



    gap: 0;



}







.settings-menu-btn.footer-btn {



    --btn-accent-bg: transparent;



    --btn-accent-bg-hover: rgba(255, 255, 255, 0.03);



    border-color: transparent;



    opacity: 0.65;



    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;



}







.settings-menu-btn.footer-btn:hover {



    opacity: 1;



    border-color: rgba(255, 255, 255, 0);



    transform: translateX(4px);



}







.settings-menu-btn.footer-btn .btn-icon-wrap {



    width: 28px;



    height: 28px;



    font-size: 14px;



}







.settings-menu-btn.footer-btn .btn-label {



    font-size: var(--step--2);



    opacity: 0.8;



}







.settings-menu-btn.discord-btn .btn-icon-wrap svg {



    width: 18px;



    height: 18px;



}







.settings-menu-btn.discord-btn {



    --btn-accent: #5865f2;



    --btn-accent-bg: rgba(88, 101, 242, 0.10);



    --btn-accent-bg-hover: rgba(88, 101, 242, 0.18);



    text-decoration: none;



}







.settings-menu-btn.discord-btn .btn-icon-wrap {



    color: #5865f2;



}







.settings-menu-btn.discord-btn:hover {



    background: rgba(88, 101, 242, 0.10);



    border-color: rgba(255, 255, 255, 0);



}







.settings-menu-btn.discord-btn .btn-label {



    color: #8b95f8;



    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;



    letter-spacing: 0.03em;



}







/* Reset button */



.settings-menu-btn.reset-btn {



    --btn-accent: #e66b80;



    --btn-accent-bg: rgba(230, 107, 128, 0.08);



    --btn-accent-bg-hover: rgba(230, 107, 128, 0.15);



    border-color: rgba(230, 107, 128, 0.08);



    margin-top: 0.5rem;



}







.settings-menu-btn.reset-btn .btn-icon-wrap {



    color: #e66b80;



}







.settings-menu-btn.reset-btn:hover {



    border-color: rgba(230, 107, 128, 0.2);



}







/* Back button */



.settings-back-btn {



    display: none;



    align-items: center;



    gap: 0.4rem;



    padding: 0.6rem 1rem;



    margin-bottom: 0.75rem;



    background: rgba(255, 255, 255, 0.02);



    border: 1px solid rgba(255, 255, 255, 0);



    border-radius: 8px;



    cursor: pointer;



    font-family: "Espionage", sans-serif;



    font-size: var(--step--1);



    letter-spacing: 0.05em;



    color: var(--text-color);



    transition: all 0.2s ease;



    position: sticky;



    top: 0;



    z-index: 50;



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



}







.settings-back-btn.visible {



    display: flex;



}







.settings-back-btn:hover {



    background: rgba(255, 255, 255, 0.05);



    border-color: rgba(255, 255, 255, 0);



    transform: translateX(-3px);



}







/* Prominent Reset button - only in main menu */



#reset-app {



    background: rgba(230, 107, 128, 0.06);



    border: 0px solid rgba(220, 53, 69, 0);



    color: #e66b80;



    font-weight: 700;



    cursor: pointer;



    font-size: var(--step--1);



    text-transform: uppercase;



    letter-spacing: 0.08em;



    transition: all 0.2s ease;



}







#reset-app:hover {



    background: rgba(230, 107, 128, 0.06);



    border-color: rgba(230, 107, 128, 0.12);



    transform: translateX(4px);



}







/* Remove section icons from headers */



.section-icon {



    display: none !important;



}







.settings-section-header {



    display: none;



}







/* Section-specific colors with enhanced acrylic styling */



.settings-section.profile-section {



    border-color: rgba(237, 219, 126, 0.1);



    background: transparent;



}







.settings-section.profile-section .settings-section-header {



    background: rgba(237, 219, 126, 0.08);



    color: #eddb7e;



    border-color: rgba(237, 219, 126, 0.2);



}







/* Image upload and clear button styling */



#image-upload {



    display: block;



    width: 100%;



    padding: 0.5rem 0.75rem;



    border: 1px solid rgba(255,255,255,0.1);



    border-radius: 6px;



    background: rgba(0,0,0,0.1);



    color: var(--text-color);



    font-family: "Roboto", sans-serif;



    font-size: var(--step--2);



    cursor: pointer;



    transition: all 0.2s ease;



}







#image-upload:hover {



    border-color: rgba(255,255,255,0.2);



    background: rgba(0,0,0,0.15);



}







#sidebar-settings .inline-input__inner #image-upload {



    padding: 0.4rem 0.6rem;



}







/* Clear Image button styling */



#sidebar-settings button[onclick*="clearBackgroundImage"] {



    padding: 0.5rem 1rem;



    border: 1px solid rgba(255,255,255,0.1);



    border-radius: 6px;



    background: rgba(255,255,255,0.03);



    color: var(--text-color);



    font-family: "Espionage", sans-serif;



    font-size: var(--step--2);



    letter-spacing: 0.05em;



    cursor: pointer;



    transition: all 0.2s ease;



    float: none;



    margin-top: 0.5rem;



}







#sidebar-settings button[onclick*="clearBackgroundImage"]:hover {



    background: rgba(255,255,255,0.08);



    border-color: rgba(255,255,255,0.2);



}







/* Light mode image input styling */



.light-mode #image-upload {



    border: 1px solid rgba(0,0,0,0.15);



    background: rgba(0,0,0,0.04);



}







.light-mode #image-upload:hover {



    border-color: rgba(0,0,0,0.25);



    background: rgba(0,0,0,0.08);



}







.light-mode #sidebar-settings button[onclick*="clearBackgroundImage"] {



    background: rgba(0,0,0,0.03);



    border-color: rgba(0,0,0,0.15);



}







.light-mode #sidebar-settings button[onclick*="clearBackgroundImage"]:hover {



    background: rgba(0,0,0,0.08);



    border-color: rgba(0,0,0,0.25);



}







.settings-section.profile-section .settings-section-header:hover {



    background: rgba(237, 219, 126, 0.3);



    box-shadow: 0 4px 20px rgba(237, 219, 126, 0.2);



}







.settings-section.difficulty-section {



    border-color: rgba(255, 107, 107, 0.1);



    background: transparent;



}







.settings-section.difficulty-section .settings-section-header {



    background: rgba(255, 107, 107, 0.08);



    color: #ff6b6b;



    border-color: rgba(255, 107, 107, 0.2);



}







.settings-section.difficulty-section .settings-section-header:hover {



    background: rgba(255, 107, 107, 0.3);



    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.2);



}







.settings-section.content-section {



    border-color: rgba(107, 255, 148, 0.1);



    background: transparent;



}







.settings-section.content-section .settings-section-header {



    background: rgba(107, 255, 148, 0.08);



    color: #6bff94;



    border-color: rgba(107, 255, 148, 0.2);



}







.settings-section.content-section .settings-section-header:hover {



    background: rgba(107, 255, 148, 0.3);



    box-shadow: 0 4px 20px rgba(107, 255, 148, 0.2);



}







.settings-section.gamemode-section {



    border-color: hsl(var(--accent-h) 40% 40% / 0.1);



    background: transparent;



}







.settings-section.gamemode-section .settings-section-header {



    background: hsl(var(--accent-h) 60% 50% / 0.06);



    color: hsl(var(--accent-h) 80% 60%);



    border-color: hsl(var(--accent-h) 40% 40% / 0.12);



}







.settings-section.gamemode-section .settings-section-header:hover {



    background: hsl(var(--accent-h) 60% 50% / 0.12);



}







.settings-section.appearance-section {



    border-color: rgba(255, 148, 200, 0.1);



    background: transparent;



}







.settings-section.appearance-section .settings-section-header {



    background: rgba(255, 148, 200, 0.08);



    color: #ff94c8;



    border-color: rgba(255, 148, 200, 0.12);



}







.settings-section.appearance-section .settings-section-header:hover {



    background: rgba(255, 148, 200, 0.3);



    box-shadow: 0 4px 20px rgba(255, 148, 200, 0.2);



}







.settings-section.advanced-section {



    border-color: rgba(200, 148, 255, 0.1);



    background: transparent;



}







.settings-section.advanced-section .settings-section-header {



    background: rgba(200, 148, 255, 0.08);



    color: #c894ff;



    border-color: rgba(200, 148, 255, 0.12);



}







.settings-section.advanced-section .settings-section-header:hover {



    background: rgba(200, 148, 255, 0.3);



    box-shadow: 0 4px 20px rgba(200, 148, 255, 0.2);



}







/* Keep existing folder styles for compatibility */



.folder {



    cursor: pointer;



    padding: 0.5rem;



    margin: 0.5rem 0;



    background: rgba(0, 0, 0, 0.2);



    border-radius: 4px;



    display: flex;



    align-items: center;



    gap: 0.5rem;



    font-weight: 600;



}







.folder-arrow {



    transition: transform 0.3s ease;



}







.folder.collapsed .folder-arrow {



    transform: rotate(-90deg);



}







.folder-content,



.legacy-folder-content {



    padding: 0.5rem 1rem;



    transition: max-height 0.3s ease, opacity 0.3s ease;



    max-height: 2000px;



    opacity: 1;



}







.folder-content.collapsed,



.legacy-folder-content.collapsed {



    max-height: 0;



    opacity: 0;



    padding: 0 1rem;



    overflow: hidden;



}







/* Light Mode Styles for Settings Sections */



.light-mode .settings-section {



    background: rgba(255, 255, 255, 0.7);



    border-color: rgba(0, 0, 0, 0.15);



}







.light-mode .settings-section-header {



    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);



}







.light-mode .settings-section.profile-section .settings-section-header {



    background: rgba(237, 219, 126, 0.25);



    color: #8a7a3a;



    border-color: rgba(237, 219, 126, 0.4);



}







.light-mode .settings-section.profile-section .settings-section-header:hover {



    background: rgba(237, 219, 126, 0.4);



}







.light-mode .settings-section.difficulty-section .settings-section-header {



    background: rgba(255, 107, 107, 0.25);



    color: #a04040;



    border-color: rgba(255, 107, 107, 0.4);



}







.light-mode .settings-section.difficulty-section .settings-section-header:hover {



    background: rgba(255, 107, 107, 0.4);



}







.light-mode .settings-section.content-section .settings-section-header {



    background: rgba(107, 255, 148, 0.25);



    color: #2a8a4a;



    border-color: rgba(107, 255, 148, 0.4);



}







.light-mode .settings-section.content-section .settings-section-header:hover {



    background: rgba(107, 255, 148, 0.4);



}







.light-mode .settings-section.gamemode-section .settings-section-header {



    background: rgba(0, 0, 0, 0.05);



    color: var(--text-color);



    border-color: rgba(0, 0, 0, 0.1);



}







.light-mode .settings-section.gamemode-section .settings-section-header:hover {



    background: rgba(0, 0, 0, 0.08);



}







.light-mode .settings-section.appearance-section .settings-section-header {



    background: rgba(255, 148, 200, 0.25);



    color: #a04070;



    border-color: rgba(255, 148, 200, 0.4);



}







.light-mode .settings-section.appearance-section .settings-section-header:hover {



    background: rgba(255, 148, 200, 0.4);



}







.light-mode .settings-section.advanced-section .settings-section-header {



    background: rgba(200, 148, 255, 0.25);



    color: #7040a0;



    border-color: rgba(200, 148, 255, 0.4);



}







.light-mode .settings-section.advanced-section .settings-section-header:hover {



    background: rgba(200, 148, 255, 0.4);



}







/* Light mode icon adjustments */



.light-mode .settings-section-header .section-icon {



    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) opacity(0.9);



}







.light-mode .settings-section-header:hover .section-icon {



    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) opacity(1);



}







/* Light mode menu buttons - same philosophy as dark mode */



.light-mode .settings-menu-btn {



    background: rgba(0, 0, 0, 0.04);



    border-color: rgba(0, 0, 0, 0.06);



    box-shadow: none;



}







.light-mode .settings-menu-btn:hover {



    background: rgba(0, 0, 0, 0.08);



    border-color: rgba(0, 0, 0, 0);



    box-shadow: none;



}







.light-mode .settings-menu-btn .btn-label {



    color: var(--text-color);



    text-shadow: none;



}







.light-mode .settings-back-btn {



    background: rgba(0, 0, 0, 0.04);



    border-color: rgba(0, 0, 0, 0.06);



    box-shadow: none;



}







.light-mode .settings-back-btn:hover {



    background: rgba(0, 0, 0, 0.08);



    border-color: rgba(0, 0, 0, 0);



    box-shadow: none;



}







/* Light mode scrollbar for offcanvas panels - theme colored square */



.light-mode .offcanvas-body::-webkit-scrollbar {



    width: 6px;



}







.light-mode .offcanvas-body::-webkit-scrollbar-button {



    display: none !important;



}







.light-mode .offcanvas-body::-webkit-scrollbar-track {



    background: rgba(0, 0, 0, 0.06);



    border: none;



    border-radius: 0 !important;



}







.light-mode .offcanvas-body::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    background-clip: padding-box !important;



    background-clip: content-box !important;



    box-shadow: none !important;



    min-height: 20px;



}







.light-mode .offcanvas-body::-webkit-scrollbar-thumb:hover {



    background-color: rgba(var(--accent-rgb, 33,127,228), 1);



    border-radius: 0 !important;



}







/* Light mode settings panel scrollbar override */



.light-mode #sidebar-settings .offcanvas-body::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4) !important;



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    background-clip: padding-box !important;



    background-clip: content-box !important;



    box-shadow: none !important;



    min-height: 20px !important;



}







/* Light mode section button colors - no colored bg/border, same as dark mode */



.light-mode .settings-menu-btn[data-section="profile-section"],



.light-mode .settings-menu-btn[data-section="difficulty-section"],



.light-mode .settings-menu-btn[data-section="content-section"],



.light-mode .settings-menu-btn[data-section="gamemode-section"],



.light-mode .settings-menu-btn[data-section="appearance-section"],



.light-mode .settings-menu-btn[data-section="advanced-section"] {



    background: rgba(0, 0, 0, 0.04);



    border-color: rgba(0, 0, 0, 0.06);



}







.light-mode .settings-menu-btn.discord-btn {



    background: rgba(0, 0, 0, 0.04);



    border-color: rgba(0, 0, 0, 0.06);



}







.light-mode .settings-menu-btn.discord-btn:hover {



    background: rgba(88, 101, 242, 0.12);



    border-color: rgba(0, 0, 0, 0);



}



/* ... */

/* Light mode footer buttons */



.light-mode .settings-menu-footer {



    border-top-color: rgba(0, 0, 0, 0.1);



}







.light-mode .settings-menu-btn.footer-btn {



    opacity: 0.7;



}







.light-mode .settings-menu-btn.footer-btn:hover {



    opacity: 1;



    border-color: rgba(0, 0, 0, 0);



}







.light-mode .settings-menu-btn.reset-btn {



    background: rgba(230, 107, 128, 0.06);



    border-color: rgba(0, 0, 0, 0);



}







.light-mode .settings-menu-btn.reset-btn:hover {



    background: rgba(230, 107, 128, 0.08);



    border-color: rgba(0, 0, 0, 0);



}







/* Light mode section search */



.light-mode .section-search-input {



    background: rgba(0, 0, 0, 0.03);



    border-color: rgba(0, 0, 0, 0.12);



    color: var(--text-color);



}







.light-mode .section-search-input::placeholder {



    color: rgba(0, 0, 0, 0.35);



}







.light-mode .section-search-input:focus {



    border-color: rgba(51, 119, 255, 0.35);



    background: rgba(0, 0, 0, 0.05);



}







.light-mode .section-search-icon {



    opacity: 0.4;



    color: #333;



}







/* Light mode progress bars */



.light-mode .main-view {



    border-color: rgba(0, 0, 0, 0.08) !important;



    box-shadow: 0 0 15px rgba(0, 0, 0, 0.04), inset 0 0 60px rgba(255, 255, 255, 0.5) !important;



}







.light-mode .progress-bar-vertical {



    background: rgba(255, 255, 255, 0.4);



    border-color: hsl(var(--accent-h) 80% 40% / 0.25);



    box-shadow: none;



}







.light-mode .progress-fill {



    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);



}







.light-mode .progress-fill.halfway {



    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);



}







.light-mode .progress-fill.complete {



    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);



}







.light-mode .progress-content {



    color: rgba(0, 0, 0, 0.75);



    text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);



}







/* Light-mode timer controls neutral styling */



.light-mode .timer-controls {



    background: rgba(0,0,0,0.03);



    border-color: rgba(0,0,0,0.12);



}







.light-mode .timer-controls .inline-input__inner input[type="number"] {



    border-color: rgba(0,0,0,0.12);



}







/* Light mode switch styling - use theme color */



.light-mode input[type="checkbox"]:checked + .switch {



    border-color: var(--theme-color, #217fe4);



}



.light-mode input[type="checkbox"]:checked + .switch::after {



    background-color: var(--theme-color, #217fe4);



}







/* Light mode form-select */



.light-mode .form-select {



    border: 1px solid rgba(0, 0, 0, 0.15);



    background: rgba(0, 0, 0, 0.05);



}







.light-mode .form-select:focus {



    border-color: var(--theme-color, #217fe4);



    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 33,127,228), 0.1);



}







/* Light mode sidebar number inputs */



.light-mode #sidebar-settings input[type="number"] {



    border: 1px solid rgba(0, 0, 0, 0.1);



}







.light-mode #sidebar-settings input[type="number"]:focus {



    border-color: var(--theme-color, #217fe4);



    background: rgba(var(--accent-rgb, 33,127,228), 0.04);



}







/* Light mode postamble */



.light-mode .postamble {



    color: var(--text-color);



    opacity: 0.6;



}







#history-list {



    flex: 1;



    min-height: 0;



    overflow-y: auto;



    overflow-x: hidden;



    padding-right: 10px;



    margin-top: 10px;



}







/* Make the scrollbar look nice to match your theme - FUTURISTIC square */



#history-list::-webkit-scrollbar {



    width: 6px;



}







#history-list::-webkit-scrollbar-button {



    display: none !important;



}







#history-list::-webkit-scrollbar-track {



    background: rgba(0, 0, 0, 0.15);



    border: none;



    border-radius: 0 !important;



}







#history-list::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    background-clip: padding-box !important;



    background-clip: content-box !important;



    box-shadow: none !important;



    min-height: 20px;



}







#history-list::-webkit-scrollbar-thumb:hover {



    background-color: rgba(var(--accent-rgb, 33,127,228), 1);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



}







/* Light mode history list scrollbar */



.light-mode #history-list::-webkit-scrollbar-track {



    background: rgba(0, 0, 0, 0.06);



    border: none;



    border-radius: 0 !important;



}







.light-mode #history-list::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    background-clip: padding-box !important;



    background-clip: content-box !important;



    box-shadow: none !important;



    min-height: 20px;



}







.light-mode #history-list::-webkit-scrollbar-thumb:hover {



    background-color: rgba(var(--accent-rgb, 33,127,228), 1);



    border: 1px solid transparent !important;



    border-radius: 0 !important;



}







/* Light mode history tab text colors */



.light-mode .stat-label {



    color: #111;



}



.light-mode .stat-row span:not(.stat-label) {



    color: #111;



}



.light-mode .hqli-premise,



.light-mode .hqli-conclusion,



.light-mode .hqli-response-time,



.light-mode .hqli-footer {



    color: #111 !important;



}



.light-mode .hqli-answer-user,



.light-mode .hqli-answer {



    color: #111;



}



.light-mode .hqli-answer-user.true,



.light-mode .hqli-answer.true {



    color: var(--correct-color) !important;



}



.light-mode .hqli-answer-user.false,



.light-mode .hqli-answer.false {



    color: var(--wrong-color) !important;



}



.light-mode .hqli-conclusion.correct {



    color: var(--correct-color) !important;



}



.light-mode .hqli-conclusion.wrong {



    color: var(--wrong-color) !important;



}



.light-mode .hqli-answer-user.hqli--right {



    color: var(--correct-color) !important;



}



.light-mode .hqli-answer-user.hqli--wrong {



    color: var(--wrong-color) !important;



}



.light-mode .hqli-postamble .conc-true {



    color: var(--correct-color);



}



.light-mode .hqli-postamble .conc-false {



    color: var(--wrong-color);



}



.light-mode .hql {



    color: #111;



}



.light-mode .clear-history-btn {



    background: #b85a5a;



    color: #fff;



}



/* Light mode graph popup */



.light-mode .graph-popup {



    background: #f1f3f8;



    box-shadow:

        0 20px 60px rgba(0, 0, 0, 0.15),

        0 0 0 1px rgba(var(--accent-rgb), 0.15),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);



}



.light-mode .graph-popup-content {



    background: rgba(0, 0, 0, 0.04);



    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);



}



.light-mode .graph-controls {



    background: rgba(0, 0, 0, 0.05);



}



.light-mode .graph-end-controls {



    background: rgba(0, 0, 0, 0.04);



}



.light-mode .graph-end-controls > div {



    color: #333;



}



/* Light mode graph close button */



.light-mode #graph-close-popup {



    background: #b85a5a;



    color: #fff;



}



.light-mode #graph-close-popup:hover {



    background: #c97a7a;



}







/* === Appearance Customization === */



:root {



    --base-font-size: 1rem;



    --ui-padding: 1rem;



    --bracket-color: #4aa39a;



}







/* Font size scaling */



html {



    font-size: var(--base-font-size);



}







/* UI Density - override with higher specificity */



#sidebar-settings .settings-section-content .mb-2 {



    margin-bottom: var(--ui-padding, 1rem) !important;



}







/* Premise styles with UI density support */



:root {



    --premise-gap: 0.5rem;



    --premise-padding-y: 0.25rem;



    --premise-padding-x: 0;



}







.premise-minimal .formatted-premise {



    padding: var(--premise-padding-y) var(--premise-padding-x);



    border: none;



    background: transparent;



}







.premise-boxed .formatted-premise {



    padding: calc(var(--premise-padding-y) + 0.25rem) calc(var(--premise-padding-x) + 0.75rem);



    border: 1px solid var(--bracket-color, #217fe4);



    border-radius: 4px;



    background: rgba(0, 0, 0, 0.1);



}







.premise-card .formatted-premise {



    padding: calc(var(--premise-padding-y) + 0.5rem) calc(var(--premise-padding-x) + 0.75rem);



    border: 1px solid var(--bracket-color, #217fe4);



    border-radius: 8px;



    background: rgba(33, 127, 228, 0.1);



    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);



}







.premise-underline .formatted-premise {
    padding: calc(var(--premise-padding-y) + 0.25rem) var(--premise-padding-x);
    border-bottom: 2px solid var(--bracket-color, #217fe4);
}

.premise-quote .formatted-premise {
    padding: calc(var(--premise-padding-y) + 0.25rem) calc(var(--premise-padding-x) + 0.75rem);
    border-left: 3px solid var(--bracket-color, #217fe4);
    background: rgba(33, 127, 228, 0.08);
}

.premise-highlight .formatted-premise {
    padding: calc(var(--premise-padding-y) + 0.25rem) calc(var(--premise-padding-x) + 0.75rem);
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 4px;
}

.premise-pill .formatted-premise {
    padding: calc(var(--premise-padding-y) + 0.35rem) calc(var(--premise-padding-x) + 1rem);
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 9999px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}








/* Premise font: monospace */



.premise-mono .formatted-premise,



.premise-mono .formatted-conclusion {



    font-family: 'Courier New', Courier, monospace;



    letter-spacing: 0.02em;



}







/* Subject highlight - removed */







/* Conclusion styles */



.conclusion-minimal .formatted-conclusion {



    padding: var(--premise-padding-y) var(--premise-padding-x);



    border: none;



    background: transparent;



}







.conclusion-boxed .formatted-conclusion {



    padding: calc(var(--premise-padding-y) + 0.25rem) calc(var(--premise-padding-x) + 0.75rem);



    border: 1px solid var(--conclusion-color, #ffffff);



    border-radius: 4px;



    background: rgba(255, 255, 255, 0.05);



}







.conclusion-card .formatted-conclusion {



    padding: calc(var(--premise-padding-y) + 0.5rem) calc(var(--premise-padding-x) + 0.75rem);



    border: 1px solid var(--conclusion-color, #ffffff);



    border-radius: 8px;



    background: rgba(255, 255, 255, 0.1);



    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);



}







.conclusion-underline .formatted-conclusion {
    padding: calc(var(--premise-padding-y) + 0.25rem) var(--premise-padding-x);
    border-bottom: 2px solid var(--conclusion-color, #ffffff);
}

.conclusion-quote .formatted-conclusion {
    padding: calc(var(--premise-padding-y) + 0.25rem) calc(var(--premise-padding-x) + 0.75rem);
    border-left: 3px solid var(--conclusion-color, #ffffff);
    background: rgba(255, 255, 255, 0.06);
}

.conclusion-highlight .formatted-conclusion {
    padding: calc(var(--premise-padding-y) + 0.25rem) calc(var(--premise-padding-x) + 0.75rem);
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 4px;
}

.conclusion-pill .formatted-conclusion {
    padding: calc(var(--premise-padding-y) + 0.35rem) calc(var(--premise-padding-x) + 1rem);
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 9999px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}








/* Premise container gap */



.premises-container {



    gap: var(--premise-gap);



}







/* Button styles */



.btn-contrast .confirmation-buttons button {



    background: rgba(var(--accent-rgb), 0.3);



    border: none;



}







.btn-solid .confirmation-buttons button:first-child {



    background: rgba(58, 138, 106, 0.72);



}







.btn-solid .confirmation-buttons button:last-child {
    background: rgba(138, 79, 92, 0.72);
}

/* Outline Style */
.btn-outline .confirmation-buttons button {
    background: transparent !important;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    box-shadow: none !important;
}

.btn-outline .confirmation-buttons button:hover {
    background: rgba(var(--accent-rgb), 0.1) !important;
    box-shadow: none !important;
}

/* Minimal Style */
.btn-minimal .confirmation-buttons button {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-color);
    opacity: 0.8;
}

.btn-minimal .confirmation-buttons button:hover {
    opacity: 1;
    background: rgba(var(--accent-rgb), 0.15);
}







/* Bracket color override - brackets use background-color not border-color */



.border-left, .border-right,



.bracket-lip-top-left, .bracket-lip-bottom-left,



.bracket-lip-top-right, .bracket-lip-bottom-right {



    background-color: var(--bracket-color, #4aa39a) !important;



    box-shadow: 0 0 0.25rem var(--bracket-color, #4aa39a), 0 0 0.15rem var(--bracket-color, #4aa39a) !important;



    z-index: 1;



}







/* Timer bar height set in JS */







/* Sticky timer - always visible when scrolling through many premises */



.timer-wrap {



    position: sticky;



    top: 0;



    z-index: 10;



    background: var(--background-color, #111);



    padding-bottom: 0.5rem;



    margin-bottom: 0.5rem;



}







.light-mode .timer-wrap {



    background: var(--background-color, #FFF);



}







/* Colored words option - only affects subject words, not in conclusion */



.colored-words .subject:not(.formatted-conclusion .subject) {



    color: var(--bracket-color, var(--theme-color, #217fe4)) !important;



}







/* Colored timer bar option */



.colored-timer .timer__bar {



    background: var(--accent-color, var(--theme-color, #217fe4)) !important;



    box-shadow: 0 0 8px rgba(var(--accent-rgb, 33,127,228), 0.5) !important;



}







.colored-timer .timer__bar.override {



    background: var(--accent-color, var(--theme-color, #217fe4)) !important;



    box-shadow: 0 0 8px rgba(var(--accent-rgb, 33,127,228), 0.6) !important;



}







/* Light mode colored timer */



.light-mode.colored-timer .timer__bar {



    background: var(--accent-color, var(--theme-color, #217fe4)) !important;



}







/* ===== Input / Timer final overrides =====



   Make inline inputs (premises/time/priority/qty) transparent,



   use neutral outlines, and restyle the timer toggle as a neutral button.



*/







/* Global inline inputs (stacked & single) */



.inline-input__inner > input,



.inline-input__inner > select,



.inline-premise-spinner > input,



.inline-input__inner input[type="number"] {



    background: transparent;



    border: 1px solid rgba(255,255,255,0.06);



    box-shadow: none;



    color: var(--text-color);



    border-radius: 6px;



    padding: 0.22rem 0.45rem;



    min-width: 4ch;



}







.inline-input__inner > input:focus,



.inline-premise-spinner > input:focus,



.inline-input__inner input[type="number"]:focus {



    border-color: rgba(255,255,255,0.12);



    box-shadow: none;



    outline: none;



}







/* Timer-specific neutral outline + transparent input */



.timer-controls {



    background: transparent !important;



}







.timer-controls .inline-input__inner input[type="number"] {



    background: transparent;



    color: var(--text-color, #ffffff);



    border: none;



    outline: none;



    border-radius: 50px;



    padding: 0.3rem 0.5rem;



    font-size: var(--step--1);



    font-weight: 600;



    text-align: center;



    min-width: 7ch;



    /* The glowing underline effect */



    box-shadow: inset 0px -2px 0px 0px var(--theme-color, #217fe4), 0px 4px 12px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.4);



    transition: box-shadow 0.3s ease;



}







.timer-controls .inline-input__inner input[type="number"]:focus {



    background: transparent;



    outline: none;



    box-shadow: inset 0px -3px 0px 0px var(--theme-color, #217fe4), 0px 6px 16px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.6);



}







/* Style the timer checkbox to look like a small neutral button */



.timer-controls input[type="checkbox"] {



    -webkit-appearance: none;



    appearance: none;



    width: 34px;



    height: 22px;



    border-radius: 6px;



    border: 1px solid rgba(255,255,255,0.06);



    background: rgba(255,255,255,0.02);



    cursor: pointer;



    display: inline-block;



    vertical-align: middle;



}







.timer-controls input[type="checkbox"]:hover {



    background: rgba(255,255,255,0.035);



}







.timer-controls input[type="checkbox"]:checked {



    background: var(--accent-color);



    border-color: rgba(var(--accent-rgb), 0.85);



    box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.12);



    color: #fff;



}







/* Light-mode timer button - OVERRIDE for visibility */



.light-mode .timer-controls input[type="checkbox"] {



    border: 2px solid rgba(0,0,0,0.4) !important;



    background: #e0e0e0 !important;



    outline: 1px solid rgba(0,0,0,0.15) !important;



}







.light-mode .timer-controls input[type="checkbox"]:hover {



    background: #d0d0d0 !important;



    border-color: rgba(0,0,0,0.5) !important;



}







.light-mode .timer-controls input[type="checkbox"]:checked {



    background: var(--accent-color) !important;



    border-color: rgba(var(--accent-rgb), 0.9) !important;



    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25) !important;



}







/* Light-mode variants */



.light-mode .inline-input__inner > input,



.light-mode .inline-input__inner input[type="number"],



.light-mode .inline-premise-spinner > input {



    border: 1px solid rgba(0,0,0,0.12);



}







.light-mode .inline-input__inner > input:focus,



.light-mode .inline-input__inner input[type="number"]:focus {



    border-color: rgba(0,0,0,0.2);



}







/* Light mode glowing pill inputs for sidebar and timer */



.light-mode #sidebar-settings input[type="number"],



.light-mode #sidebar-settings input[type="text"],



.light-mode #sidebar-settings .inline-premise-spinner > input,



.light-mode #sidebar-settings .inline-input__inner > input {



    background-color: rgba(245, 245, 250, 0.9);



    color: #111;



    box-shadow: inset 0px -3px 0px 0px var(--theme-color, #217fe4), 0px 4px 12px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.3);



}



.light-mode #sidebar-settings input[type="number"]:focus,



.light-mode #sidebar-settings input[type="text"]:focus,



.light-mode #sidebar-settings .inline-premise-spinner > input:focus,



.light-mode #sidebar-settings .inline-input__inner > input:focus {



    background-color: rgba(255, 255, 255, 1);



    box-shadow: inset 0px -4px 0px 0px var(--theme-color, #217fe4), 0px 6px 16px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.5);



}



.light-mode .timer-controls .inline-input__inner input[type="number"] {



    background-color: rgba(245, 245, 250, 0.9);



    color: #111;



    box-shadow: inset 0px -3px 0px 0px var(--theme-color, #217fe4), 0px 4px 12px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.3);



}



.light-mode .timer-controls .inline-input__inner input[type="number"]:focus {



    background-color: rgba(255, 255, 255, 1);



    box-shadow: inset 0px -4px 0px 0px var(--theme-color, #217fe4), 0px 6px 16px -2px rgba(var(--accent-rgb, 33, 127, 228), 0.5);



}







/* Small spacing tweak so unit labels sit just below inputs */



.inline-premise-spinner {



    gap: 0.15rem;



}







/* Ensure sidebar inline input containers are transparent so inputs look truly "flat" */



#sidebar-settings .inline-input__inner {



    background: transparent;



    padding: 0;



    box-shadow: none;



}







/* Make the timer-toggle clearly show the theme/accent when enabled in light-mode too */



.light-mode .timer-controls input[type="checkbox"]:checked {



    background: var(--accent-color);



    border-color: rgba(var(--accent-rgb), 0.85);



    box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.12);



    color: #fff;



}







/* Make the timer-toggle clearly show the theme/accent when enabled in light-mode too */



.light-mode .timer-controls input[type="checkbox"]:checked {



    background: var(--accent-color);



    border-color: rgba(var(--accent-rgb), 0.85);



    box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.12);



    color: #fff;



}







/* === UNIVERSAL SCROLLBAR OVERRIDE - Force all scrollbars square and thin === */



*::-webkit-scrollbar {



    width: 6px !important;



    height: 6px !important;



}







*::-webkit-scrollbar:vertical {



    width: 6px !important;



}







*::-webkit-scrollbar:horizontal {



    height: 6px !important;



}







*::-webkit-scrollbar-button {



    display: none !important;



    height: 0 !important;



    width: 0 !important;



}







*::-webkit-scrollbar-thumb {



    background-color: var(--theme-color, #217fe4) !important;



    border: 1px solid transparent !important;



    border-radius: 0 !important;



    -webkit-border-radius: 0 !important;



    background-clip: padding-box !important;



    background-clip: content-box !important;



    min-height: 20px !important;



    box-shadow: none !important;



}







*::-webkit-scrollbar-thumb:vertical {



    border-radius: 0 !important;



    -webkit-border-radius: 0 !important;



}







*::-webkit-scrollbar-thumb:horizontal {



    border-radius: 0 !important;



    -webkit-border-radius: 0 !important;



}







*::-webkit-scrollbar-track,



*::-webkit-scrollbar-track-piece {



    background: rgba(0, 0, 0, 0.2) !important;



    border-radius: 0 !important;



    -webkit-border-radius: 0 !important;



}







*::-webkit-scrollbar-corner {



    background: transparent !important;



}







*::-webkit-scrollbar-track-piece {



    background: rgba(0, 0, 0, 0.2) !important;



    border-radius: 0 !important;



    -webkit-border-radius: 0 !important;



}







*::-webkit-scrollbar-track-piece:start {



    border-radius: 0 !important;



}







*::-webkit-scrollbar-track-piece:end {



    border-radius: 0 !important;



}







*::-webkit-scrollbar-track-piece:vertical:start,



*::-webkit-scrollbar-track-piece:vertical:end,



*::-webkit-scrollbar-track-piece:horizontal:start,



*::-webkit-scrollbar-track-piece:horizontal:end {



    border-radius: 0 !important;



}



/* Light mode body gradient - placed at end for cascade priority */



body.light-mode {



    background-color: #f5f5f5 !important;



    background-image: none !important;



}







/* Custom Confirm/Alert Modal */



.custom-modal-overlay {



    position: fixed;



    inset: 0;



    background: rgba(0, 0, 0, 0.6);



    backdrop-filter: blur(4px);



    -webkit-backdrop-filter: blur(4px);



    display: flex;



    align-items: center;



    justify-content: center;



    z-index: 10000;



    animation: modalFadeIn 0.15s ease;



}







@keyframes modalFadeIn {



    from { opacity: 0; }



    to { opacity: 1; }



}







.custom-modal {



    background: hsl(var(--accent-h, 220) 15% 14% / 0.95);



    border: 1px solid hsl(var(--accent-h, 220) 30% 40% / 0.2);



    border-radius: 14px;



    padding: 1.5rem;



    max-width: 340px;



    width: 90%;



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 1rem;



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);



    animation: modalSlideIn 0.2s ease;



}







@keyframes modalSlideIn {



    from { opacity: 0; transform: translateY(10px) scale(0.97); }



    to { opacity: 1; transform: translateY(0) scale(1); }



}







.custom-modal-icon {



    opacity: 0.6;



}







.custom-modal-icon svg {



    width: 40px;



    height: 40px;



}







.custom-modal-message {



    font-size: var(--step--1);



    color: var(--text-color);



    text-align: center;



    line-height: 1.5;



    letter-spacing: 0.02em;



}







.custom-modal-buttons {



    display: flex;



    gap: 0.5rem;



    width: 100%;



}







.custom-modal-buttons button {



    flex: 1;



    padding: 0.6rem 1rem;



    border-radius: 8px;



    cursor: pointer;



    font-family: "Espionage", sans-serif;



    font-size: var(--step--2);



    letter-spacing: 0.08em;



    text-transform: uppercase;



    transition: all 0.15s ease;



    border: 1px solid transparent;



}







.custom-modal-buttons .modal-btn-cancel {



    background: rgba(255, 255, 255, 0.06);



    border-color: rgba(255, 255, 255, 0.1);



    color: var(--text-color);



}







.custom-modal-buttons .modal-btn-cancel:hover {



    background: rgba(255, 255, 255, 0.1);



    border-color: rgba(255, 255, 255, 0.2);



}







.custom-modal-buttons .modal-btn-confirm {



    background: rgba(230, 107, 128, 0.15);



    border-color: rgba(230, 107, 128, 0.25);



    color: #e66b80;



}







.custom-modal-buttons .modal-btn-confirm:hover {



    background: rgba(230, 107, 128, 0.25);



    border-color: rgba(230, 107, 128, 0.4);



}







.custom-modal-buttons .modal-btn-ok {



    background: hsl(var(--accent-h, 220) 60% 50% / 0.15);



    border-color: hsl(var(--accent-h, 220) 60% 50% / 0.25);



    color: hsl(var(--accent-h, 220) 80% 60%);



}







.custom-modal-buttons .modal-btn-ok:hover {



    background: hsl(var(--accent-h, 220) 60% 50% / 0.25);



    border-color: hsl(var(--accent-h, 220) 60% 50% / 0.4);



}







/* Section search bar */



.section-search-wrap {



    position: relative;



    margin-bottom: 0.75rem;



}







.section-search-icon {



    position: absolute;



    left: 0.6rem;



    top: 50%;



    transform: translateY(-50%);



    opacity: 0.35;



    pointer-events: none;



}







.section-search-input {



    width: 100%;



    background: rgba(255, 255, 255, 0.04);



    border: 1px solid rgba(255, 255, 255, 0.08);



    border-radius: 8px;



    padding: 0.45rem 0.6rem 0.45rem 2rem;



    color: var(--text-color);



    font-size: var(--step--2);



    outline: none;



    transition: border-color 0.15s ease, background 0.15s ease;



    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;



}







.section-search-input::placeholder {



    color: rgba(255, 255, 255, 0.25);



}







.section-search-input:focus {



    border-color: hsl(var(--accent-h, 220) 60% 50% / 0.3);



    background: rgba(255, 255, 255, 0.06);



}







.section-search-input.search-empty ~ .mb-1,



.section-search-input.search-empty ~ .mb-2,



.section-search-input.search-empty ~ .folder,



.section-search-input.search-empty ~ hr {



    display: block;



}

/* === UX polish pass: settings/history/info/graph panels === */



:root {

    --step--3: clamp(0.68rem, 0.61rem + 0.25vw, 0.82rem);

    --panel-radius: 18px;

    --panel-gap: 0.8rem;

    --panel-line: rgba(var(--accent-rgb, 33, 127, 228), 0.18);

    --panel-line-soft: rgba(var(--accent-rgb, 33, 127, 228), 0.10);

    --panel-glass: rgba(255,255,255,0.035);

    --panel-glass-strong: rgba(var(--accent-rgb, 33, 127, 228), 0.12);

    --panel-shadow: 0 20px 50px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);

    --soft-text: rgba(255,255,255,0.66);

}



.light-mode {

    --panel-line: rgba(var(--accent-rgb, 33, 127, 228), 0.22);

    --panel-line-soft: rgba(0,0,0,0.09);

    --panel-glass: rgba(255,255,255,0.72);

    --panel-glass-strong: rgba(255,255,255,0.84);

    --panel-shadow: 0 18px 42px rgba(15,20,45,0.14), inset 0 1px 0 rgba(255,255,255,0.62);

    --soft-text: rgba(0,0,0,0.58);

}



/* Side panels: a little more app-like, without changing the existing offcanvas logic. */

.offcanvas {

    width: min(92vw, 520px);

    max-width: min(92vw, 520px);

    background: var(--offcanvas-bg) !important;

    border-color: var(--panel-line-soft);

    box-shadow: 0 24px 70px rgba(0,0,0,0.42);

    backdrop-filter: blur(18px) saturate(1.08);

    -webkit-backdrop-filter: blur(18px) saturate(1.08);

}



.offcanvas--left {

    border-right: 1px solid var(--panel-line);

}



.offcanvas--right {

    border-left: 1px solid var(--panel-line);

}



.offcanvas-body {

    padding: 1rem 1.05rem;

    scrollbar-gutter: stable;

}



.offcanvas-close {

    width: 2rem;

    height: 2rem;

    display: grid;

    place-items: center;

    margin: 0.55rem 0;

    padding: 0;

    border-radius: 999px;

    color: var(--text-color);

    background: rgba(var(--accent-rgb, 33,127,228), 0.08);

    border: 1px solid var(--panel-line-soft);

    opacity: 0.72;

    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;

}



.offcanvas-close:hover {

    opacity: 1;

    background: rgba(var(--accent-rgb, 33,127,228), 0.18);

    transform: scale(1.04);

}



.panel-shell-header,

.graph-header {

    position: relative;

    padding: 1rem 1rem 0.95rem;

    margin: 0 0 0.85rem;

    border: 1px solid var(--panel-line);

    border-radius: var(--panel-radius);

    background: var(--panel-glass-strong);

    box-shadow: var(--panel-shadow);

    overflow: hidden;

}



.panel-shell-header::after,

.graph-header::after {

    content: "";

    position: absolute;

    inset: auto 1rem 0;

    height: 1px;

    background: rgba(var(--accent-rgb, 33,127,228), 0.5);

    opacity: 0.62;

}



.panel-eyebrow {

    display: block;

    margin-bottom: 0.35rem;

    color: var(--accent-bright, var(--accent));

    font-size: var(--step--3, 0.75rem);

    letter-spacing: 0.16em;

    text-transform: uppercase;

    opacity: 0.88;

}



.panel-shell-header h2,

.graph-header h2 {

    margin: 0;

    font-family: "Espionage", "Roboto", system-ui, sans-serif;

    color: var(--text-color);

    font-size: clamp(1.15rem, 1.7vw, 1.55rem);

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



/* Edge tabs: clearer hit targets and better affordance. */

label.open {

    border-radius: 14px 14px 0 0;

    background: var(--label-background-color);

    box-shadow: 0 10px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.06);

}



label.open:hover {

    letter-spacing: 0.02em;

    border-color: rgba(var(--accent-rgb, 33,127,228), 0.34);

}



.sidebar-button {

    display: inline-flex;

    align-items: center;

    gap: 0.45em;

}



.sidebar-button::before {

    content: "";

    width: 0.44em;

    height: 0.44em;

    border-radius: 999px;

    background: currentColor;

    box-shadow: 0 0 12px currentColor;

    opacity: 0.72;

}



/* Settings menu: lighter hierarchy, stronger active/focus feedback. */

#sidebar-settings .settings-main-menu {

    gap: 0.65rem;

    padding: 0.15rem 0.1rem 1rem;

}



.settings-panel-title {

    margin-bottom: 0.75rem;

}



.section-nav-bar .settings-panel-title,

.flat-settings .settings-panel-title {

    display: none !important;

}



.section-nav-bar .settings-menu-btn {

    min-height: 44px;

    box-shadow: none;

}



.section-nav-bar .settings-menu-btn:hover,

.section-nav-bar .settings-menu-btn[data-active] {

    box-shadow: none;

    transform: none;

}



.settings-menu-btn {

    min-height: 64px;

    border-radius: 15px;

    border-color: var(--panel-line-soft);

    background: var(--panel-glass);

    box-shadow: 0 10px 26px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.035);

}



.settings-menu-btn::before {

    width: 4px;

    opacity: 0.7;

}



.settings-menu-btn:hover,

.settings-menu-btn[data-active] {

    background: linear-gradient(135deg, var(--btn-accent-bg-hover, rgba(var(--accent-rgb, 33,127,228), 0.16)), rgba(255,255,255,0.035));

    border-color: var(--panel-line);

    box-shadow: 0 16px 36px rgba(0,0,0,0.22), 0 0 0 1px rgba(var(--accent-rgb, 33,127,228), 0.04) inset;

}



.settings-menu-btn:focus-visible,

.graph-select:focus-visible,

.clear-history-btn:focus-visible,

.offcanvas-close:focus-visible {

    outline: 2px solid rgba(var(--accent-rgb, 33,127,228), 0.75);

    outline-offset: 3px;

}



.settings-menu-btn .btn-icon-wrap {

    width: 40px;

    height: 40px;

    border-radius: 12px;

}



.settings-menu-btn .btn-label {

    font-size: var(--step--1);

    letter-spacing: 0.1em;

}



.settings-menu-btn .btn-sublabel {

    color: var(--soft-text);

    opacity: 0.82;

}



.settings-back-btn {

    border-radius: 999px;

    background: var(--panel-glass);

    border-color: var(--panel-line-soft);

    margin: 0.1rem 0 0.9rem;

}



.section-search-wrap {

    position: relative;

    top: auto;

    z-index: auto;

    margin-bottom: 0.85rem;

    border-radius: 999px;

    background: rgba(0,0,0,0.18);

    border: 1px solid var(--panel-line-soft);

    box-shadow: 0 10px 24px rgba(0,0,0,0.12);

}



.section-search-input {

    min-height: 42px;

}



.settings-section.active .settings-section-content > .mb-1,

.settings-section.active .settings-section-content > .mb-2,

.settings-section.active .settings-section-content > .folder,

.settings-section.active .settings-section-content > .multi-input,

.settings-section.active .settings-section-content > .ctrl__inner {

    border: 1px solid var(--panel-line-soft);

    border-radius: 14px;

    background: rgba(255,255,255,0.026);

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);

    padding: 0.85rem;

}



.settings-section.active .settings-section-content > .folder {

    width: 100%;

    margin-bottom: 0.65rem;

}



.settings-section.active .settings-section-content .multi-input {

    gap: 0.55rem;

}



.settings-section.active .single-input,

.settings-section.active .inline-input__outer,

.settings-section.active .profile-dropdown,

.settings-section.active .profile-plus,

.settings-section.active .profile-export,

.settings-section.active .profile-import {

    border-radius: 12px;

}



/* History: stats become scan-friendly cards, entries feel like modern cards. */

.history-panel-title {

    flex-shrink: 0;

}



.history-stats {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.55rem;

    padding: 0 0 0.85rem;

    border-bottom: none;

    margin-bottom: 0.55rem;

}



.history-stats .stat-row {

    min-height: 64px;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 0.2rem;

    padding: 0.65rem 0.75rem;

    border-radius: 14px;

    border: 1px solid var(--panel-line-soft);

    background: var(--panel-glass);

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);

}



.stat-label {

    color: var(--soft-text);

    font-size: var(--step--3, 0.75rem);

    letter-spacing: 0.11em;

    text-transform: uppercase;

}



.stat-row span:not(.stat-label) {

    color: var(--text-color);

    font-size: var(--step--1);

    font-weight: 800;

}



#history-list {

    padding-right: 0.15rem;

}



#history-list > div {

    border-radius: 16px;

    border-color: var(--panel-line-soft);

    background: var(--bg-card);

    box-shadow: 0 14px 32px rgba(0,0,0,0.22);

    overflow: hidden;

}



.hqli .inner {

    position: relative;

    border: 0;

    border-left: 4px solid rgba(var(--accent-rgb, 33,127,228), 0.36);

    border-bottom: 0;

    padding: 0.85rem 1rem 0.85rem 0.9rem;

    gap: 0.45rem;

}



.hqli--right .inner {

    border-left-color: var(--correct-color);

    background: color-mix(in srgb, var(--correct-color) 10%, var(--bg-card));

}



.hqli--wrong .inner {

    border-left-color: var(--wrong-color);

    background: color-mix(in srgb, var(--wrong-color) 10%, var(--bg-card));

}



.hqli-preamble,

.hqli-postamble,

.hqli-transform-header {

    color: var(--accent-bright, var(--accent)) !important;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.hqli-footer {

    margin: 0.35rem 0 0;

    padding-top: 0.5rem;

    border-top: 1px solid var(--panel-line-soft);

}



.history-footer {

    flex-shrink: 0;

    padding-top: 0.65rem;

    background: rgba(0,0,0,0.08);

}



.clear-history-btn {

    border-radius: 12px;

}



/* Info panel: turn long reference content into readable cards. */

.info-panel-body .mb-2,

.info-panel-body .inline-input__outer,

.info-panel-body ul.explainer,

.symbol-category {

    border: 1px solid var(--panel-line-soft);

    border-radius: 15px;

    background: var(--panel-glass);

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);

}



.info-panel-body .mb-2,

.info-panel-body ul.explainer {

    padding: 0.85rem;

}



.info-panel-body .inline-input__outer {

    padding: 0.7rem 0.85rem;

    margin: 0.8rem 0 0.55rem;

}



.info-panel-body .explainer {

    margin: 0;

    padding-left: 0;

}



.info-panel-body .divider {

    opacity: 0.28;

}



.history-filter-rail {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0.45rem;

    margin: 0.15rem 0 0.45rem;

    padding: 0.35rem;

    border: 1px solid var(--panel-line-soft);

    border-radius: 16px;

    background: rgba(0,0,0,0.16);

}



.history-filter-btn {

    min-height: 40px;

    border: 0;

    border-radius: 12px;

    color: var(--soft-text);

    background: transparent;

    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;

    font-size: var(--step--3, 0.75rem);

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    cursor: pointer;

    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;

}



.history-filter-btn:hover {

    color: var(--text-color);

    background: rgba(var(--accent-rgb, 33,127,228), 0.10);

}



.history-filter-btn.selected {

    color: var(--text-color);

    background: rgba(var(--accent-rgb, 33,127,228), 0.20);

    box-shadow: 0 8px 22px rgba(var(--accent-rgb, 33,127,228), 0.14), inset 0 1px 0 rgba(255,255,255,0.05);

}



.history-filter-btn:focus-visible {

    outline: 2px solid rgba(var(--accent-rgb, 33,127,228), 0.75);

    outline-offset: 2px;

}



.history-filter-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 1.45em;

    height: 1.45em;

    margin-left: 0.25em;

    padding: 0 0.35em;

    border-radius: 999px;

    background: rgba(255,255,255,0.08);

    color: var(--text-color);

    font-size: 0.82em;

}



.history-filter-summary {

    margin: 0 0 0.65rem;

    color: var(--soft-text);

    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;

    font-size: var(--step--3, 0.75rem);

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.symbol-guide {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.65rem;

}



.symbol-category {

    padding: 0.75rem;

}



.symbol-category h5 {

    margin-top: 0;

    color: var(--accent-bright, var(--accent));

    letter-spacing: 0.08em;

}



/* Graph popup: clearer header, tabs, and canvas framing. */

.graph-popup {

    width: min(1120px, calc(100vw - 2rem));

    height: min(820px, calc(100vh - 2rem));

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    padding: clamp(0.85rem, 2vw, 1.4rem);

    border: 1px solid var(--panel-line);

    border-radius: 24px;

    background: rgba(16, 20, 29, 0.985);

    box-shadow: 0 28px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.055);

}



.graph-popup.visible {

    gap: 0.85rem;

}



.graph-header {

    margin: 0;

    flex-shrink: 0;

}



.graph-summary {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0.6rem;

}



.graph-summary-card {

    min-height: 72px;

    padding: 0.72rem 0.8rem;

    border: 1px solid var(--panel-line-soft);

    border-radius: 16px;

    background: var(--panel-glass);

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);

}



.graph-summary-card span {

    display: block;

    margin-bottom: 0.24rem;

    color: var(--soft-text);

    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;

    font-size: var(--step--3, 0.75rem);

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.graph-summary-card strong {

    display: block;

    color: var(--text-color);

    font-size: clamp(1.1rem, 2.3vw, 1.65rem);

    line-height: 1;

}



.graph-controls {

    gap: 0.45rem;

    padding: 0.45rem;

    border-radius: 999px;

    background: rgba(0,0,0,0.22);

    border-color: var(--panel-line-soft);

}



.graph-select {

    min-height: 44px;

    border-radius: 999px;

    background: transparent;

    border-color: transparent;

}



.graph-select:hover {

    background: rgba(var(--accent-rgb, 33,127,228), 0.10);

}



.graph-select.selected {

    color: var(--text-color);

    background: rgba(var(--accent-rgb, 33,127,228), 0.22);

    box-shadow: 0 8px 22px rgba(var(--accent-rgb, 33,127,228), 0.16);

}



.graph-popup-content {

    border: 1px solid var(--panel-line-soft);

    border-radius: 18px;

    background: #111720;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 16px 32px rgba(0,0,0,0.20);

}



.graph-end-controls {

    border-radius: 16px;

    border-color: var(--panel-line-soft);

    background: rgba(0,0,0,0.16);

}



.graph-close-popup {

    border-radius: 999px !important;

    padding-inline: 1.2rem !important;

}



/* Light mode adjustments for the polished layer. */

.light-mode .offcanvas,

.light-mode .graph-popup {

    background: var(--offcanvas-bg) !important;

}



.light-mode .section-search-wrap,

.light-mode .graph-controls,

.light-mode .graph-end-controls,

.light-mode .history-filter-rail {

    background: rgba(255,255,255,0.52);

}



.light-mode .settings-section.active .settings-section-content > .mb-1,

.light-mode .settings-section.active .settings-section-content > .mb-2,

.light-mode .settings-section.active .settings-section-content > .folder,

.light-mode .settings-section.active .settings-section-content > .multi-input,

.light-mode .settings-section.active .settings-section-content > .ctrl__inner,

.light-mode .history-stats .stat-row,

.light-mode #history-list > div,

.light-mode .graph-summary-card,

.light-mode .info-panel-body .mb-2,

.light-mode .info-panel-body .inline-input__outer,

.light-mode .info-panel-body ul.explainer,

.light-mode .symbol-category {

    background: rgba(255,255,255,0.62);

}



.light-mode .graph-popup-content {

    background: rgba(255,255,255,0.72);

}



.light-mode .graph-popup {

    box-shadow: 0 28px 80px rgba(20,25,45,0.24), inset 0 1px 0 rgba(255,255,255,0.72);

}



.light-mode .panel-eyebrow,

.light-mode .symbol-category h5,

.light-mode .hqli-preamble,

.light-mode .hqli-postamble,

.light-mode .hqli-transform-header {

    color: var(--accent) !important;

}



/* Small screens: keep the new cards from feeling cramped. */

@media (max-width: 620px) {

    .offcanvas {

        width: 100vw;

        max-width: 100vw;

    }



    .panel-shell-header,

    .graph-header {

        border-radius: 16px;

        padding: 0.85rem;

    }



    .history-stats,

    .history-filter-rail,

    .graph-summary {

        grid-template-columns: 1fr;

    }



    .graph-popup {

        width: calc(100vw - 0.75rem);

        height: calc(100vh - 0.75rem);

        border-radius: 18px;

    }



    .graph-controls {

        border-radius: 16px;

    }



    .graph-select {

        flex: 1 1 100%;

        border-radius: 12px;

    }

    #sidebar-history .offcanvas-body {

        padding: 0.55rem 0.65rem 0.65rem;

    }

    #sidebar-history .history-stats {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0.35rem;

        margin-bottom: 0.35rem;

        padding-bottom: 0.35rem;

    }

    #sidebar-history .history-stats .stat-row {

        min-height: 46px;

        padding: 0.42rem 0.55rem;

        border-radius: 11px;

    }

    #sidebar-history .stat-label {

        font-size: 0.64rem;

        letter-spacing: 0.08em;

    }

    #sidebar-history .stat-row span:not(.stat-label) {

        font-size: 0.95rem;

    }

    #sidebar-history .history-filter-rail {

        grid-template-columns: repeat(4, max-content);

        gap: 0.25rem;

        margin: 0 0 0.3rem;

        padding: 0.25rem;

        overflow-x: auto;

        overscroll-behavior-x: contain;

    }

    #sidebar-history .history-filter-btn {

        min-height: 32px;

        padding: 0.25rem 0.5rem;

        border-radius: 9px;

        font-size: 0.64rem;

        white-space: nowrap;

    }

    #sidebar-history .history-filter-summary {

        margin-bottom: 0.35rem;

        font-size: 0.64rem;

    }

    #sidebar-history #history-list {

        min-height: 12rem;

    }

    #sidebar-history .hqli .inner {

        padding: 0.6rem 0.7rem;

    }

    #sidebar-history .history-footer {

        padding-top: 0.35rem;

    }

    #sidebar-history .clear-history-btn {

        min-height: 40px;

    }

}





/* === UX upgrade v3: actual customization and cleaner navigation === */



/* Range slider styling */

.settings-range {

    -webkit-appearance: none;

    appearance: none;

    width: 100%;

    height: 6px;

    border-radius: 3px;

    background: rgba(255,255,255,0.1);

    outline: none;

    cursor: pointer;

}



.settings-range::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--theme-color, #3377ff);

    cursor: pointer;

    border: 2px solid rgba(255,255,255,0.2);

    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

    transition: transform 0.15s ease;

}



.settings-range::-webkit-slider-thumb:hover {

    transform: scale(1.15);

}



.settings-range::-moz-range-thumb {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--theme-color, #3377ff);

    cursor: pointer;

    border: 2px solid rgba(255,255,255,0.2);

    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

}



.slider-value {

    font-size: 0.82rem;

    opacity: 0.65;

    min-width: 5ch;

    text-align: right;

}



.light-mode .settings-range {

    background: rgba(0,0,0,0.1);

}



.light-mode .settings-range::-webkit-slider-thumb {

    border-color: rgba(0,0,0,0.15);

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

}



.light-mode .settings-range::-moz-range-thumb {

    border-color: rgba(0,0,0,0.15);

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

}



/* Custom font file input */

.custom-font-file {

    width: 100%;

    margin-top: 0.3rem;

    font-size: 0.82rem;

    color: var(--text-color);

}



.custom-font-file::file-selector-button {

    padding: 0.3rem 0.7rem;

    border-radius: 8px;

    border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.08));

    background: rgba(255,255,255,0.06);

    color: var(--text-color);

    cursor: pointer;

    font: 500 0.82rem var(--ui-font, "Roboto", system-ui, sans-serif);

    margin-right: 0.5rem;

    transition: background 0.15s ease;

}



.custom-font-file::file-selector-button:hover {

    background: rgba(var(--accent-rgb, 33,127,228), 0.12);

}



.light-mode .custom-font-file::file-selector-button {

    background: rgba(0,0,0,0.05);

    border-color: rgba(0,0,0,0.1);

}



body {

    font-family: var(--ui-font, 'Inter', "Roboto", sans-serif);

}



body.ui-font-inter .ffmono,

body.ui-font-space-grotesk .ffmono,

body.ui-font-rajdhani .ffmono,

body.ui-font-exo-2 .ffmono,

body.ui-font-orbitron .ffmono,

body.ui-font-jetbrains-mono .ffmono {

    font-family: var(--ui-font, monospace);

}



body:not(.premise-font-default):not(.premise-mono) .formatted-premise,

body:not(.premise-font-default):not(.premise-mono) .formatted-conclusion {

    font-family: var(--premise-font, inherit);

}



.panel-shell-header,

.graph-header {

    display: none !important;

}



.appearance-presets__title {

    width: 100%;

    margin-bottom: 0.7rem;

    color: var(--soft-text, rgba(255,255,255,0.66));

    font-size: var(--step--2);

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.appearance-preset-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.6rem;

    width: 100%;

}



.appearance-preset-card {

    min-height: 76px;

    padding: 0.75rem;

    text-align: left;

    color: var(--text-color);

    border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.08));

    border-radius: 14px;

    background: rgba(var(--accent-rgb,33,127,228),0.10);

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);

    cursor: pointer;

    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;

}



.appearance-preset-card:hover {

    transform: translateY(-2px);

    border-color: rgba(var(--accent-rgb,33,127,228),0.36);

    background: rgba(var(--accent-rgb,33,127,228),0.18);

}



.appearance-preset-card span {

    display: block;

    font: 800 var(--step--1) var(--ui-font, "Roboto", system-ui, sans-serif);

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.appearance-preset-card small {

    display: block;

    margin-top: 0.28rem;

    color: var(--soft-text, rgba(255,255,255,0.65));

    font-size: var(--step--3, 0.76rem);

    line-height: 1.25;

}



.section-nav-bar.offcanvas {

    max-width: min(92vw, 800px);

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

}



.section-nav-bar .offcanvas-body > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: stretch;
    gap: 0;
}



.section-nav-bar .settings-main-menu {
display: flex !important;
flex-direction: row;
width: 100%;
min-width: auto;
height: 64px;
min-height: 64px;
justify-content: space-around;
align-items: center;
gap: 1.25rem;
padding: 0.5rem 1.5rem;
margin: 0;
border-right: none;
border-bottom: 1px solid var(--panel-line-soft, rgba(255,255,255,0.08));
border-radius: 0;
background: rgba(255,255,255,0.025);
overflow-x: auto;
overflow-y: hidden;
flex-shrink: 0;
}



.section-nav-bar .settings-menu-footer {

display: none !important;

}



.section-nav-bar .settings-menu-btn {
position: relative;
width: 54px;
height: 54px;
min-width: 54px;
border-radius: 16px;
border: 1px solid transparent;
background: transparent;
flex-shrink: 0;
}



.section-nav-bar .settings-menu-btn .btn-icon-wrap {
width: 44px;
height: 44px;
margin: auto;
border-radius: 14px;
background: rgba(var(--accent-rgb,33,127,228),0.08);
}



.section-nav-bar .settings-menu-btn:hover,

.section-nav-bar .settings-menu-btn[data-active] {

border-color: var(--panel-line-soft, rgba(255,255,255,0.08));

background: rgba(var(--accent-rgb,33,127,228),0.10);

}



.section-nav-bar .settings-menu-btn[data-active]::after {

content: "";

position: absolute;

left: 0.25rem;

right: 0.25rem;

bottom: -0.15rem;

height: 3px;

border-radius: 999px;

background: var(--theme-color, #3377ff);

box-shadow: 0 0 10px var(--theme-color, #3377ff);

}



.section-nav-bar .settings-menu-btn:hover .btn-text-wrap,

.section-nav-bar .settings-menu-btn:focus-visible .btn-text-wrap {

display: block;

position: absolute;

left: calc(100% + 0.65rem);

top: 50%;

transform: translateY(-50%);

z-index: 30;

min-width: max-content;

padding: 0.55rem 0.7rem;

border-radius: 10px;

background: rgba(8, 10, 16, 0.94);

border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.08));

box-shadow: 0 14px 34px rgba(0,0,0,0.32);

pointer-events: none;

}



.section-nav-bar .settings-menu-btn:hover .btn-sublabel,

.section-nav-bar .settings-menu-btn:focus-visible .btn-sublabel {

display: none;

}



.section-nav-bar .settings-section.active {

padding-right: 0.3rem;

}



.side-tabs-floating label.open {

border-radius: 999px;

padding-inline: 0.7rem;

}



.side-tabs-floating label.open:hover {

filter: brightness(1.12);

}



.side-tabs-minimal label.open {

background: transparent !important;

border-color: transparent !important;

box-shadow: none !important;

opacity: 0.68;

}



.side-tabs-minimal label.open:hover {

opacity: 1;

background: rgba(var(--accent-rgb,33,127,228),0.06) !important;

}



.side-tabs-minimal .sidebar-button::before {

width: 2px;

height: 1.2em;

border-radius: 999px;

}



.light-mode .appearance-preset-card,

.light-mode .section-nav-bar .settings-menu-btn:hover .btn-text-wrap,

.light-mode .section-nav-bar .settings-menu-btn:focus-visible .btn-text-wrap {

background: rgba(255,255,255,0.72);

}



@media (max-width: 640px) {

.appearance-preset-grid {

grid-template-columns: 1fr;

}

.section-nav-bar.offcanvas {

max-width: none;

width: 100vw;

}

.section-nav-bar .settings-section.active {

padding: 0 !important;

width: 100%;

max-width: none !important;

flex: 1 1 auto;

}

.section-nav-bar .settings-section.active .settings-section-content {

padding: 1.25rem !important;

width: 100%;

max-width: none !important;

}

.section-nav-bar .offcanvas-body {

width: 100% !important;

max-width: none !important;

padding: 0 !important;

overflow-x: hidden !important;

}

.section-nav-bar .offcanvas-body > div {

flex-direction: column;

gap: 0;

width: 100%;

direction: ltr;

}

.section-nav-bar .settings-main-menu {

flex-direction: row;

width: 100%;

min-width: auto;

height: 52px;

min-height: 52px;

padding: 0.35rem 0.5rem;

margin: 0;

gap: 0.35rem;

border-right: none;

border-bottom: 1px solid var(--panel-line-soft, rgba(255,255,255,0.08));

border-radius: 0;

overflow-x: auto;

overflow-y: hidden;

flex-shrink: 0;

}

.section-nav-bar .settings-menu-btn {

width: 44px;

height: 44px;

min-width: 44px;

flex-shrink: 0;

}

.section-nav-bar .settings-menu-btn .btn-icon-wrap {

width: 34px;

height: 34px;

margin: auto;

}

.section-nav-bar .settings-menu-btn[data-active]::after {

left: 0.25rem;

right: 0.25rem;

top: auto;

bottom: -0.15rem;

width: auto;

height: 3px;

}

}


body.hide-feedback .game-area.right,
body.hide-feedback .game-area.wrong,
body.hide-feedback .game-area.missed,
body.hide-feedback .game-area.right::before,
body.hide-feedback .game-area.wrong::before,
body.hide-feedback .game-area.missed::before {
    border-color: var(--bracket-color) !important;
    box-shadow: none !important;
}

body.hide-feedback .game-area.right::before,
body.hide-feedback .game-area.wrong::before,
body.hide-feedback .game-area.missed::before,
body.hide-feedback .feedback {
    display: none !important;
}

body.hide-feedback .hqli--right .inner,
body.hide-feedback .hqli--wrong .inner,
body.hide-feedback #history-list li.hqli--right,
body.hide-feedback #history-list li.hqli--wrong {
    background-color: transparent !important;
    border-color: var(--bracket-color) !important;
    border-left-color: var(--bracket-color) !important;
    border-bottom-color: var(--bracket-color) !important;
}

body.hide-feedback .hqli-answer-user,
body.hide-feedback .hqli-answer {
    display: none !important;
}

body.hide-feedback .hqli-conclusion.correct,
body.hide-feedback .hqli-conclusion.wrong,
body.hide-feedback .hqli-postamble .conc-true,
body.hide-feedback .hqli-postamble .conc-false {
    color: inherit !important;
}

body.hide-feedback .trailing-dot.success::before,
body.hide-feedback .trailing-dot.fail::before {
    background-color: transparent !important;
}

/* Web Premises lattice layout */

.display_text.wide-premises .formatted-premise:has(.web-lattice) {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    overflow: visible;
}

.web-lattice {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 0.32rem 0.95rem;
    width: fit-content;
    max-width: 100%;
    margin: 0.2rem auto 0.7rem;
    overflow: visible;
}

.web-lattice-cell {
    min-width: 2.25rem;
    min-height: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.web-lattice-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    padding: 0 0.12rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--text-color);
    white-space: nowrap;
    text-shadow: var(--text-outline);
    line-height: 1;
}

.web-lattice-relation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    font-weight: 900;
    color: var(--text-color);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: var(--text-outline);
    line-height: 1;
}

.web-lattice-gap {
    display: inline-block;
    width: 0.2rem;
}

.web-lattice-extras {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.8rem;
    max-width: 100%;
    margin: 0.1rem auto 0.6rem;
    font-size: 0.82em;
    opacity: 0.9;
}

.web-lattice svg,
.web-lattice-extras,
.web-lattice-extra-edge,
.web-lattice-extra-node {
    display: none !important;
}

/* Stop normal Wide Premises span rules from touching Web Premises */
.display_text.wide-premises .formatted-premise:has(.web-lattice) span {
    justify-self: unset !important;
}

.formatted-conclusion.lie-mode-box {
	border: 2px solid;
	border-radius: 0.5rem;
	padding: 0.45rem 0.65rem;
}

.formatted-conclusion.lie-mode-true {
	border-color: #ff4d4d;
	box-shadow: 0 0 0.5rem rgba(255, 77, 77, 0.45);
}

.formatted-conclusion.lie-mode-false {
	border-color: #42d96b;
	box-shadow: 0 0 0.5rem rgba(66, 217, 107, 0.35);
}

.lie-mode-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0.25rem auto 0.35rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.lie-mode-badge-false {
	background: rgba(255, 77, 77, 0.18);
	color: #ff7070;
	border: 1px solid rgba(255, 77, 77, 0.55);
}

.lie-mode-badge-true {
	background: rgba(66, 217, 107, 0.16);
	color: #64e889;
	border: 1px solid rgba(66, 217, 107, 0.45);
}

.swap-command {
    display: inline !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.swap-token,
.relation-token {
    display: inline !important;
    white-space: nowrap;
    font-weight: 800;
}

.relation-token {
    opacity: 0.95;
}

.minimal-symbol-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.minimal-symbol-table td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.minimal-symbol-table td:first-child {
    font-weight: 800;
    white-space: nowrap;
}

/* === Legacy / Experimental folder overlap fix ===
   Experimental has more rows than the old 2000px max-height.
   When it was open, the next Legacy folder started before Experimental
   actually finished, so it visually overlapped Harder/Precise options. */
#advanced-section #experimental-folder-content,
#advanced-section #legacy-folder-content,
#advanced-section .folder-content,
#advanced-section .legacy-folder-content {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

#advanced-section #experimental-folder-content {
    display: flow-root;
    clear: both !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1.25rem !important;
}

#advanced-section #experimental-folder-content::after {
    content: "";
    display: block;
    clear: both;
}

#advanced-section .legacy-folder-toggle,
#advanced-section #legacy-folder-arrow,
#advanced-section #legacy-folder-content {
    position: relative !important;
    z-index: 1 !important;
}

#advanced-section .legacy-folder-toggle,
#advanced-section .folder[onclick="toggleLegacyFolder()"] {
    clear: both !important;
    display: flex !important;
    width: 100% !important;
    margin-top: 2.25rem !important;
    margin-bottom: 1rem !important;
}

/* JS toggles folder visibility with inline display:block/none.
   Do not animate max-height here; max-height was the overlap bug. */
#advanced-section .folder-content[style*="display: none"],
#advanced-section .legacy-folder-content[style*="display: none"] {
    display: none !important;
}


/* === Deictic/facing mobile safety, because long swap sentences were doing gymnastics === */
.display_text {
    overflow-x: hidden !important;
}

.deictic-swap-line,
.swap-command,
.swap-token,
.relation-token {
    max-width: 100%;
}

.deictic-swap-line {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.deictic-swap-line .swap-command {
    display: inline !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.display_text.minimal .formatted-premise:has(.deictic-swap-line),
.display_text.half-minimal .formatted-premise:has(.deictic-swap-line),
.display_text.wide-premises .formatted-premise:has(.deictic-swap-line) {
    display: block !important;
    text-align: center;
    max-width: 100%;
}

.display_text.minimal .formatted-conclusion:has(.deictic-expression),
.display_text.half-minimal .formatted-conclusion:has(.deictic-expression),
.display_text.wide-premises .formatted-conclusion:has(.deictic-expression) {
    display: block !important;
    max-width: 100%;
}

@media (max-width: 700px) {
    .display-inner {
        margin-left: 2.1rem !important;
        margin-right: 2.1rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .display_text {
        min-width: 0 !important;
        max-width: calc(100vw - 5.2rem) !important;
        padding-right: 0.25rem !important;
    }

    .display_text .formatted-premise,
    .display_text .formatted-conclusion,
    .display_text .formatted-operation {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .display_text.minimal .formatted-premise,
    .display_text.minimal .formatted-operation,
    .display_text.minimal:not(.complicated-conclusion) .formatted-conclusion {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.55rem;
    }

    .deictic-swap-line {
        font-size: 0.88em;
        gap: 0.25rem;
    }
}

/* Binary Analogy owns its layout. Two source analogies are rendered once as
   stable operand cards; nested logic stays in a compact A/B formula. */
.display_text[data-question-type="binary-analogy"] .formatted-premise,
.display_text[data-question-type="binary-analogy"] .formatted-operation,
.display_text[data-question-type="binary-analogy"] .formatted-conclusion {
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
}

.display_text[data-question-type="binary-analogy"] .formatted-conclusion {
    display: block !important;
    width: 100%;
    padding-inline: clamp(0rem, 1.5vw, 0.75rem);
    overflow: visible;
    text-align: center;
}

.binary-analogy-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    width: min(100%, 58rem);
    max-width: 100%;
    margin: 0 auto;
    color: var(--text-color);
    line-height: 1.3;
}

.binary-analogy-operands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
}

.binary-operand-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 5.2rem;
    padding: 0.75rem 0.8rem 0.7rem 2.35rem;
    border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.12));
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    box-sizing: border-box;
    overflow: hidden;
}

.binary-operand-key {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid currentColor;
    border-radius: 5px;
    color: var(--accent, #3377ff);
    font: 800 0.72rem/1 var(--ui-font, "Roboto", system-ui, sans-serif);
}

.binary-operand-card > .binary-sub-conclusion {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-wrap: anywhere;
    text-align: center;
}

.binary-operand-card .analogy-statement {
    margin: 0.3rem 0;
    line-height: 1.2;
}

.binary-expression-summary {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--panel-line-soft, rgba(255,255,255,0.10));
    border-radius: 10px;
    background: rgba(var(--accent-rgb, 33,127,228), 0.08);
    box-sizing: border-box;
    overflow-wrap: anywhere;
    text-align: center;
}

.binary-formula-group {
    display: inline;
    white-space: normal;
}

.binary-formula-leaf,
.binary-formula-operator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1ch;
    margin: 0.1rem 0.2rem;
    padding: 0.08rem 0.3rem;
    border-radius: 5px;
    vertical-align: middle;
    white-space: nowrap;
}

.binary-formula-leaf {
    border: 1px solid var(--panel-line, rgba(255,255,255,0.16));
    color: var(--text-color);
    font-weight: 800;
}

.binary-formula-operator {
    color: var(--accent-bright, var(--accent));
    font-weight: 800;
    letter-spacing: 0.04em;
}

.binary-formula-paren {
    color: var(--soft-text, currentColor);
    opacity: 0.65;
}

.light-mode .binary-operand-card {
    background: #ffffff;
}

.light-mode .binary-expression-summary {
    background: rgba(var(--accent-rgb, 33,127,228), 0.08);
}

.hqli-conclusion .binary-analogy-layout {
    width: 100%;
}

.hqli-conclusion .binary-analogy-operands {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 700px) {
    .binary-analogy-operands {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .binary-operand-card {
        min-height: 0;
        padding: 0.65rem 0.65rem 0.65rem 2.15rem;
    }

    .binary-expression-summary {
        padding: 0.45rem 0.5rem;
        font-size: 0.84em;
    }
}

/* Flat edge navigation: keep the tabs readable without emitted glow, depth
   shadows, or decorative status dots. */
label.open,
label.open:hover,
.side-tabs-floating label.open,
.side-tabs-floating label.open:hover,
.side-tabs-minimal label.open,
.side-tabs-minimal label.open:hover {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

.sidebar-button {
    gap: 0 !important;
    text-shadow: none !important;
}

.sidebar-button::before,
.settings-label::before,
.history-label::before,
.credits-label::before,
.graph-label::before,
.side-tabs-minimal .sidebar-button::before {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
}

.offcanvas,
.offcanvas--left,
.offcanvas--right {
    box-shadow: none !important;
}

/* Keep outer shells flat. Feedback still uses border/color changes, but no
   element emits a glow beyond the screen or panel edge. */
:root {
    --theme-glow: none;
    --theme-glow-sm: none;
    --theme-glow-lg: none;
    --bracket-box-shadow: none;
    --panel-shadow: none;
}

.main-view,
.game-area,
.game-area:hover,
.game-area::before,
.timer__bar,
.progress-fill,
.section-nav-bar .settings-menu-btn[data-active]::after {
    box-shadow: none !important;
    filter: none !important;
}

/* The graph is a real opaque surface now, not frosted glass. */
.graph-popup {
    background: #10151e !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.graph-popup-content {
    background: #151c27 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.graph-summary-card {
    background: #18202c !important;
    box-shadow: none !important;
}

.graph-controls,
.graph-end-controls {
    background: #0c1118 !important;
    box-shadow: none !important;
}

.graph-popup *,
.graph-popup *::before,
.graph-popup *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.light-mode .graph-popup {
    background: #f1f3f7 !important;
}

.light-mode .graph-popup-content,
.light-mode .graph-summary-card {
    background: #ffffff !important;
}

.light-mode .graph-controls,
.light-mode .graph-end-controls {
    background: #e7ebf1 !important;
}

/* Appearance UX controls: wrap cleanly instead of pushing Hide Feedback out
   of the panel. */
#appearance-section .ux-customize {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    align-items: start;
    justify-content: stretch;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#appearance-section .ux-customize > .ctrl__inner {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 0.6rem;
}

#appearance-section .ux-customize > .ctrl__inner:first-child {
    justify-content: space-between !important;
}

/* Difficulty controls: neutralize the old inline no-wrap layout so Start,
   Step, Max, Mode, Window, and targets stay inside narrow panels. */
#difficulty-section .multi-input {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    gap: 0.6rem;
    box-sizing: border-box;
}

#difficulty-section .multi-input > .single-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#difficulty-section .inline-input__outer,
#difficulty-section .ctrl__inner,
#difficulty-section .form-select {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#difficulty-section .inline-input__outer:has(#p-31-progressive) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

#difficulty-section .inline-input__outer:has(#p-31-progressive) > .mb-1 {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
}

.section-nav-bar .settings-main-menu {
    display: flex !important;
    justify-content: stretch !important;
    gap: 0.3rem !important;
    padding: 0.35rem 3.25rem 0.35rem 0.35rem !important;
    box-sizing: border-box;
    overflow: hidden;
}

.section-nav-bar .settings-menu-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 54px;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
}

.section-nav-bar .settings-menu-btn .btn-icon-wrap {
    margin: auto;
}

.section-nav-bar .offcanvas-side {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 80;
    width: 3rem;
    height: 64px;
    background: var(--offcanvas-bg);
}

.section-nav-bar .offcanvas-close {
    position: absolute;
    top: 0.55rem;
    right: 0.45rem;
    margin: 0;
}

/* History controls and entries stay flat and visually separated. */
.history-filter-btn,
.history-filter-btn:hover,
.history-filter-btn.selected,
.history-filter-btn:active,
.history-filter-count {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

#history-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#history-list > div {
    flex: 0 0 auto;
    margin: 0 !important;
}

@media (max-width: 640px) {
    #appearance-section .ux-customize,
    #difficulty-section .multi-input {
        grid-template-columns: 1fr;
    }
}

/* === Facing / Wide Premises harmony ===
   Wide chains have five direct spans. Shorter relations (Facing, Deictic and
   leftover single edges) need three real columns instead of occupying the
   first three cells of a five-column grid. */
.game-area.wide-premises .display-outer {
    width: 100%;
    min-width: 0;
}

.game-area.wide-premises .display-inner,
.display_text.wide-premises {
    min-width: 0;
    box-sizing: border-box;
}

.display_text.wide-premises {
    width: 100%;
}

.display_text.wide-premises .formatted-premise:not(:has(> span:nth-child(5))) {
    grid-template-columns: minmax(0, 1fr) minmax(2.25rem, 2.5fr) minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    column-gap: clamp(0.45rem, 2vw, 1rem);
}

.display_text.wide-premises .formatted-premise:not(:has(> span:nth-child(5))) > span:nth-child(1) {
    justify-self: start;
    text-align: left;
}

.display_text.wide-premises .formatted-premise:not(:has(> span:nth-child(5))) > span:nth-child(2) {
    justify-self: center;
    text-align: center;
}

.display_text.wide-premises .formatted-premise:not(:has(> span:nth-child(5))) > span:nth-child(3) {
    justify-self: end;
    text-align: right;
}

.display_text.wide-premises .formatted-premise:not(:has(> span:nth-child(3))) > span:nth-child(2) {
    grid-column: 2 / 4;
    justify-self: start;
    text-align: left;
}

.display_text.wide-premises .formatted-premise:not(:has(> span:nth-child(5))) > .subject {
    white-space: nowrap;
}

/* Facing includes stateful turns as well as graph edges. Wide Premises pairs
   those logical steps into one row; shared stimuli use the same five-part
   chain as Distinction, while non-chainable turns remain two clear clauses. */
.display_text.wide-premises .formatted-premise:has(> .facing-wide-pair) {
    display: block;
    width: 100%;
    max-width: 100%;
}

.facing-wide-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    gap: clamp(0.45rem, 1.5vw, 0.9rem);
}

.facing-wide-clause {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(2.25rem, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.3rem, 1vw, 0.65rem);
    min-width: 0;
}

.facing-wide-clause > .subject:first-child {
    justify-self: start;
}

.facing-wide-clause > .subject:last-child {
    justify-self: end;
}

.facing-wide-clause > .relation {
    text-align: center;
}

.facing-wide-clause:not(:has(> .subject:nth-child(3))) {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 2.25fr);
}

.facing-wide-divider {
    color: var(--accent-dim);
    opacity: 0.8;
}

/* Reserve a real header row. The old absolute label sat on top of premise 1. */
.display-inner {
    padding-top: 2.65rem;
}

.display-inner > h2 {
    top: 0.55rem;
    margin: 0;
    box-sizing: border-box;
    min-width: 0;
}

.display_label_type {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.display_label_level {
    flex: 0 0 auto;
}

/* Flat surfaces keep the controls readable without decorative lighting. */
:root {
    --panel-glass: rgba(255, 255, 255, 0.035);
    --panel-glass-strong: rgba(var(--accent-rgb, 33, 127, 228), 0.12);
}

.light-mode {
    --panel-glass: rgba(255, 255, 255, 0.72);
    --panel-glass-strong: rgba(255, 255, 255, 0.84);
}

.appearance-preset-card,
.appearance-preset-card:hover {
    background: var(--panel-glass);
}

.binary-operator-label {
    box-shadow: none;
}

@media (max-width: 700px) {
    .display-inner {
        padding-top: 2.55rem !important;
    }

    .display-inner > h2 {
        padding-inline: 0.35rem;
        gap: 0.35rem;
        font-size: clamp(0.72rem, 3.4vw, 0.9rem);
        letter-spacing: 0.08em;
    }

    .display_text.wide-premises .formatted-premise:not(:has(> span:nth-child(5))) {
        font-size: 0.92em;
        column-gap: 0.45rem;
    }
}

/* Compact binary expressions on phones: the leaf cards and operators already
   communicate grouping, so repeated colored parentheses and nested frames are noise. */
@media (max-width: 600px) {
    .binary-analogy-conclusion .binary-paren {
        display: none !important;
    }

    .binary-analogy-row {
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .binary-analogy-tree,
    .binary-analogy-tree .binary-analogy-tree {
        width: 100%;
        padding: 0.1rem 0;
        gap: 0.35rem;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .binary-expression-row,
    .binary-expression-slot,
    .binary-expression-slot > .binary-analogy-conclusion {
        width: 100%;
    }

    .binary-operator-label {
        min-width: 4.2ch;
        padding: 0.12rem 0.42rem;
        background: transparent;
        font-size: 0.78em;
        letter-spacing: 0.05em;
    }

    .binary-sub-conclusion,
    .binary-analogy-row > .binary-sub-conclusion,
    .binary-analogy-tree .binary-sub-conclusion {
        width: min(100%, 22rem);
        max-width: 100%;
        padding: 0.32rem 0.5rem;
        text-align: center;
    }
}

/* === Crisp stimulus rendering === */
svg.junk,
svg.noise,
svg.topo-stimulus,
svg.abstract-symbol {
    box-shadow: none !important;
    shape-rendering: geometricPrecision;
    image-rendering: auto;
}

svg.junk use {
    stroke: rgba(0, 0, 0, 0.32);
    stroke-width: 0.42;
    paint-order: stroke fill;
    vector-effect: non-scaling-stroke;
}

.emoji {
    display: inline-grid;
    place-items: center;
    min-width: 1em;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
    font-variant-emoji: emoji;
    text-rendering: optimizeLegibility;
    vertical-align: -0.08em;
    filter: saturate(1.04) contrast(1.025);
}

/* === Sound controls === */
#appearance-section .settings-group-title {
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0 0 0.45rem;
    border-bottom: 1px solid var(--panel-line-soft);
    color: var(--soft-text);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#appearance-section .sfx-volume-control {
    display: grid !important;
    grid-template-columns: minmax(7rem, auto) minmax(6rem, 1fr) 2.25rem;
    align-items: center;
    gap: 0.65rem;
}

#appearance-section .sfx-volume-control label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sfx-preview-button,
.sfx-preview-button:hover,
.sfx-preview-button:active {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--panel-line);
    border-radius: 8px;
    background: var(--panel-glass);
    color: var(--text-color);
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* === Explanation workspace === */
button.explanation-button,
button.explanation-button:hover,
button.explanation-button:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: rgba(var(--accent-rgb, 33,127,228), 0.12);
    color: var(--text-color);
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
}

.explanation-popup {
    --explanation-gap: 0.85rem;
    --explanation-padding: 0.9rem;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    width: min(92vw, 72rem);
    max-height: min(90vh, 58rem);
    padding: 0;
    overflow: hidden;
    transform: translate(-50%, -50%);
    border: 1px solid var(--panel-line);
    border-radius: 14px;
    background: #111722;
    color: var(--text-color);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: left;
    pointer-events: none;
}

.explanation-popup[data-pinned="true"] {
    border-color: var(--accent-color, var(--bracket-color));
    pointer-events: auto;
}

.explanation-popup-wide {
    width: min(96vw, 92rem);
}

.light-mode .explanation-popup {
    background: #f7f8fb;
}

.explanation-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--panel-line-soft);
    background: rgba(var(--accent-rgb, 33,127,228), 0.055);
}

.explanation-popup-heading {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.explanation-popup-eyebrow {
    color: var(--soft-text);
    font: 700 0.68rem/1.2 var(--ui-font, system-ui, sans-serif);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.explanation-popup-title {
    overflow: hidden;
    color: var(--text-color);
    font: 750 0.98rem/1.3 var(--ui-font, system-ui, sans-serif);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explanation-popup-close,
.explanation-popup-close:hover,
.explanation-popup-close:active {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px solid var(--panel-line-soft);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    box-shadow: none !important;
    transform: none !important;
}

.explanation-popup-scroll {
    min-height: 0;
    padding: var(--explanation-padding);
    overflow: auto;
    overscroll-behavior: contain;
}

.explanation-content {
    display: grid;
    gap: var(--explanation-gap);
    min-width: 0;
    margin: 0;
    font: 500 0.94rem/1.45 var(--ui-font, system-ui, sans-serif);
    white-space: normal;
    text-align: left;
}

.explanation-popup-hint {
    flex: 0 0 auto;
    padding: 0.45rem 0.9rem;
    border-top: 1px solid var(--panel-line-soft);
    color: var(--soft-text);
    font-size: 0.7rem;
    text-align: center;
    pointer-events: none;
}

.mixed-explanation,
.facing-explanation,
.deictic-explanation,
.explanation-dimension-stack {
    display: grid;
    gap: var(--explanation-gap);
    min-width: 0;
}

.binary-explanation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--explanation-gap);
    min-width: 0;
}

.binary-explanation-source > .explanation-section-body {
    display: grid;
    gap: 0.65rem;
}

.explanation-section {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    padding: var(--explanation-padding);
    border: 1px solid var(--panel-line-soft);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
}

.light-mode .explanation-section {
    background: #ffffff;
}

.explanation-section-title {
    color: var(--accent-bright, var(--accent));
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.explanation-section-body {
    min-width: 0;
    overflow: auto;
}

.mixed-types-header,
.explanation-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.explanation-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--panel-line);
    border-radius: 999px;
    background: rgba(var(--accent-rgb, 33,127,228), 0.08);
    font-size: 0.78rem;
    font-weight: 700;
}

.explanation-callout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid var(--accent-color, var(--bracket-color));
    border-radius: 7px;
    background: rgba(var(--accent-rgb, 33,127,228), 0.08);
}

.explanation-callout span {
    color: var(--soft-text);
    font-size: 0.84rem;
}

.explanation-dimension-grid,
.explanation-layer-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.7rem !important;
    min-width: 0;
    padding: 0 !important;
}

.explanation-time-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    overflow-x: auto;
}

.explanation-time-slice,
.explanation-slice {
    display: grid;
    flex: 0 0 auto;
    min-width: min(100%, 11rem);
    gap: 0.35rem;
}

.explanation-slice-label {
    color: var(--soft-text);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.explanation-content .three-d-scene {
    perspective: none;
    transform-style: flat;
}

.explanation-content .three-d-plane,
.explanation-content .plane-1,
.explanation-content .plane-2,
.explanation-content .plane-3,
.explanation-content .plane-4,
.explanation-content .plane-5,
.explanation-content .plane-6,
.explanation-content .plane-7,
.explanation-content .plane-8,
.explanation-content .plane-9,
.explanation-content .plane-10,
.explanation-content .plane-11 {
    position: static;
    padding: 0;
    transform: none !important;
    border: 1px solid var(--panel-line-soft);
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
}

.explanation-content .table {
    min-width: max-content;
    overflow: hidden;
    border-radius: 7px;
}

.explanation-content .td {
    min-width: 2.5rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.45rem;
    border-color: var(--panel-line-soft);
}

.explanation-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.explanation-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.explanation-table th,
.explanation-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--panel-line-soft);
    vertical-align: top;
}

.explanation-table th {
    color: var(--soft-text);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.facing-map {
    display: grid;
    gap: 0.4rem;
    min-width: max-content;
}

.facing-map-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--panel-line-soft);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    text-align: center;
}

.facing-map-object {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.facing-map-arrow {
    color: var(--accent-bright, var(--accent));
    font-size: 1.15em;
    font-weight: 800;
}

.explanation-trace {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: trace-step;
}

.explanation-trace li {
    counter-increment: trace-step;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--panel-line-soft);
}

.explanation-trace li::before {
    content: counter(trace-step, decimal-leading-zero);
    color: var(--soft-text);
    font-size: 0.72rem;
    font-weight: 800;
}

.explanation-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.explanation-flow-item {
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--panel-line-soft);
    border-radius: 6px;
}

.explanation-flow-arrow {
    color: var(--soft-text);
}

.explanation-empty {
    padding: 1rem;
    color: var(--soft-text);
    text-align: center;
}

.explanation-content .binary-explainer-separator {
    height: 0;
    margin: 0.35rem 0;
    border-top: 1px solid var(--panel-line);
    background: transparent;
}

@media (max-width: 700px) {
    #appearance-section .sfx-volume-control {
        grid-template-columns: minmax(0, 1fr) 2.25rem;
    }

    #appearance-section .sfx-volume-control label {
        grid-column: 1 / -1;
    }

    .explanation-popup,
    .explanation-popup-wide {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        border-radius: 11px;
    }

    .explanation-popup-header,
    .explanation-popup-scroll {
        padding: 0.65rem;
    }

    .explanation-callout {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .explanation-dimension-grid,
    .explanation-layer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* === Final form alignment and readable explanation canvas === */
#appearance-section .ux-customize {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0.8rem !important;
    border: 1px solid var(--panel-line-soft) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

#appearance-section .ux-customize > .ctrl__inner,
#appearance-section .ux-customize > .ctrl__inner:first-child,
#appearance-section .sfx-volume-control {
    display: grid !important;
    grid-template-columns: minmax(8.5rem, 0.75fr) minmax(8rem, 1.25fr) 2.25rem !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.4rem !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    gap: 0.65rem !important;
    border-bottom: 1px solid var(--panel-line-soft) !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}

#appearance-section .ux-customize > .ctrl__inner:last-child {
    border-bottom: 0 !important;
}

#appearance-section .ux-customize > .ctrl__inner:first-child > select {
    grid-column: 2 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.25rem !important;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) > div:first-child {
    grid-column: 1 !important;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) > label:not(.switch) {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#appearance-section .ux-customize > .ctrl__inner:has(input[type="checkbox"]) > .tooltip-container {
    grid-column: 3 !important;
    justify-self: end !important;
}

#appearance-section .sfx-volume-control label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-column: 1 !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-width: 0 !important;
}

#appearance-section .sfx-volume-control .settings-range {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
}

#appearance-section .sfx-volume-control .sfx-preview-button {
    grid-column: 3 !important;
}

.explanation-popup,
.explanation-popup-wide {
    --explanation-gap: 1rem;
    --explanation-padding: 1rem;
    width: min(calc(100vw - 2rem), 68rem);
    min-height: min(24rem, calc(100vh - 3rem));
    max-height: calc(100vh - 2rem);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-left: 3px solid var(--accent-color, var(--bracket-color));
    border-radius: 12px;
    background: #0c1017;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.explanation-popup-wide {
    width: min(calc(100vw - 2rem), 82rem);
}

.light-mode .explanation-popup {
    border-color: rgba(20, 29, 45, 0.2);
    border-left-color: var(--accent-color, var(--bracket-color));
    background: #ffffff;
}

.explanation-popup-header {
    min-height: 4.25rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
}

.light-mode .explanation-popup-header {
    border-bottom-color: rgba(20, 29, 45, 0.13);
}

.explanation-popup-heading {
    gap: 0.2rem;
}

.explanation-popup-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

.explanation-popup-title {
    font-size: 1.15rem;
    line-height: 1.25;
}

.explanation-popup-scroll {
    padding: var(--explanation-padding);
}

.explanation-content {
    gap: var(--explanation-gap);
    font: 500 17px/1.5 var(--ui-font, system-ui, sans-serif);
}

.explanation-workspace {
    display: grid;
    gap: 0;
    min-width: 0;
}

.explanation-workspace > .explanation-section {
    gap: 0.8rem;
    padding: 1rem 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: transparent;
}

.light-mode .explanation-workspace > .explanation-section {
    border-bottom-color: rgba(20, 29, 45, 0.13);
    background: transparent;
}

.explanation-workspace > .explanation-section:first-child {
    padding-top: 0.15rem;
}

.explanation-workspace > .explanation-section:last-child {
    padding-bottom: 0.15rem;
    border-bottom: 0;
}

.explanation-section-title {
    color: var(--soft-text);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.explanation-resolution-section > .explanation-section-body {
    overflow: visible;
}

.explanation-resolution-section .explanation-section {
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: transparent;
}

.light-mode .explanation-resolution-section .explanation-section {
    border-color: rgba(20, 29, 45, 0.13);
    background: transparent;
}

.explanation-premise-list {
    display: grid;
    gap: 0;
    min-width: 0;
}

.explanation-premise-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.light-mode .explanation-premise-row {
    border-bottom-color: rgba(20, 29, 45, 0.08);
}

.explanation-premise-row:last-child {
    border-bottom: 0;
}

.explanation-row-index {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--soft-text);
    font-size: 0.72rem;
    font-weight: 800;
}

.light-mode .explanation-row-index {
    border-color: rgba(20, 29, 45, 0.18);
}

.explanation-premise-expression,
.explanation-conclusion-expression {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    min-width: 0;
    min-height: 2.25rem;
    overflow-wrap: normal;
}

.explanation-premise-expression .subject,
.explanation-conclusion-expression .subject,
.explanation-order-item,
.explanation-bucket-item {
    font-weight: 800;
    white-space: nowrap;
}

.explanation-premise-expression .relation,
.explanation-conclusion-expression .relation {
    color: var(--soft-text);
    white-space: normal;
}

.explanation-content .emoji {
    min-width: 1.45em;
    font-size: 1.45em;
    line-height: 1;
}

.explanation-content svg.junk,
.explanation-content svg.noise,
.explanation-content svg.topo-stimulus,
.explanation-content svg.abstract-symbol,
.explanation-content svg.pattern-shape {
    width: 1.8em !important;
    height: 1.8em !important;
    flex: 0 0 auto;
    vertical-align: middle;
}

.explanation-conclusion-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
}

.explanation-truth {
    padding: 0.35rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.explanation-truth.is-true {
    color: #42cf73;
}

.explanation-truth.is-false {
    color: #ee6675;
}

.explanation-conclusion-separator {
    margin-inline: 0.55rem;
    color: var(--soft-text);
}

.explanation-spatial-canvas {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 0.4rem;
    overflow: auto;
    box-sizing: border-box;
}

.explanation-spatial-canvas .table {
    width: max-content;
    min-width: min(100%, 18rem);
    margin: 0 auto;
    grid-auto-rows: minmax(4rem, auto);
}

.explanation-content .td {
    min-width: 4.5rem;
    min-height: 4rem;
    padding: 0.65rem 0.8rem;
    overflow: visible;
    overflow-wrap: normal;
    white-space: nowrap;
    box-sizing: border-box;
}

.explanation-order {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    min-height: 5rem;
    padding: 0.6rem;
    font-size: 1.12em;
}

.explanation-order-vertical {
    flex-direction: column;
}

.explanation-order-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.25rem 0.65rem;
}

.explanation-order-arrow {
    color: var(--soft-text);
    font-size: 1.25em;
}

.explanation-bucket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.8rem;
    min-width: 0;
}

.explanation-bucket-column {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.light-mode .explanation-bucket-column {
    border-color: rgba(20, 29, 45, 0.13);
}

.explanation-bucket-label {
    color: var(--soft-text);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.binary-explanation-grid {
    grid-template-columns: repeat(2, minmax(20rem, 1fr));
    gap: 1rem;
}

.binary-explanation-source {
    align-content: start;
    min-width: 0;
}

.binary-explanation-source > .explanation-section-body {
    overflow: visible;
}

.explanation-chip,
.explanation-callout,
.facing-map-cell {
    background: transparent;
}

.explanation-callout {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--accent-color, var(--bracket-color));
}

.light-mode .explanation-callout {
    border-color: rgba(20, 29, 45, 0.13);
    border-left-color: var(--accent-color, var(--bracket-color));
}

.facing-map-cell {
    min-width: 5rem;
    min-height: 4.25rem;
}

@media (max-width: 700px) {
    #appearance-section .ux-customize > .ctrl__inner,
    #appearance-section .ux-customize > .ctrl__inner:first-child,
    #appearance-section .sfx-volume-control {
        grid-template-columns: minmax(7rem, 0.8fr) minmax(6rem, 1.2fr) 2.25rem !important;
    }

    #appearance-section .sfx-volume-control label {
        grid-column: 1 !important;
    }

    .explanation-popup,
    .explanation-popup-wide {
        width: calc(100vw - 0.75rem);
        min-height: min(22rem, calc(100vh - 0.75rem));
        max-height: calc(100vh - 0.75rem);
        border-radius: 9px;
    }

    .explanation-popup-header {
        min-height: 3.8rem;
        padding: 0.65rem 0.75rem;
    }

    .explanation-popup-scroll {
        padding: 0.75rem;
    }

    .explanation-content {
        font-size: 16px;
    }

    .binary-explanation-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .explanation-premise-row {
        grid-template-columns: 1.7rem minmax(0, 1fr);
        gap: 0.45rem;
    }

    .explanation-row-index {
        width: 1.55rem;
        height: 1.55rem;
    }

    .explanation-content .td {
        min-width: 3.8rem;
        min-height: 3.6rem;
        padding: 0.5rem 0.6rem;
    }

    .explanation-conclusion-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    #appearance-section .ux-customize {
        padding-inline: 0.6rem !important;
    }

    #appearance-section .ux-customize > .ctrl__inner,
    #appearance-section .ux-customize > .ctrl__inner:first-child,
    #appearance-section .sfx-volume-control {
        grid-template-columns: minmax(6.2rem, 0.75fr) minmax(5rem, 1.25fr) 2.1rem !important;
        gap: 0.45rem !important;
    }
}

/* Keep the binary source operator between A and B after all legacy rules. */
.section-search-wrap {
    box-shadow: none !important;
}

.history-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.clear-history-btn {
    flex: 1 1 9rem;
}

.display_text[data-question-type="binary-analogy"] .binary-analogy-operands,
.hqli-conclusion .binary-analogy-operands {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch;
}

.binary-formula-group.binary-op-and { --binary-op-color: #55d98a; }
.binary-formula-group.binary-op-nand { --binary-op-color: #ff72b6; }
.binary-formula-group.binary-op-or { --binary-op-color: #4fd7f5; }
.binary-formula-group.binary-op-nor { --binary-op-color: #ff9a55; }
.binary-formula-group.binary-op-xor { --binary-op-color: #ffe34f; }
.binary-formula-group.binary-op-xnor { --binary-op-color: #b987ff; }

.binary-formula-group > .binary-formula-paren,
.binary-formula-group > .binary-formula-operator {
    color: var(--binary-op-color) !important;
}

/* Priority colors override gate-name colors and restore the original reading
   order: yellow is the outermost operation (read last), then colors move inward. */
.binary-formula-group.binary-priority-0 { --binary-op-color: #ffff00; }
.binary-formula-group.binary-priority-1 { --binary-op-color: #00ffff; }
.binary-formula-group.binary-priority-2 { --binary-op-color: #ff00ff; }
.binary-formula-group.binary-priority-3 { --binary-op-color: #00ff00; }
.binary-formula-group.binary-priority-4 { --binary-op-color: #ff8000; }
.binary-formula-group.binary-priority-5 { --binary-op-color: #0080ff; }
.binary-formula-group.binary-priority-6 { --binary-op-color: #8000ff; }
.binary-formula-group.binary-priority-7 { --binary-op-color: #008040; }
.binary-formula-group.binary-priority-8 { --binary-op-color: #000080; }

/* Binary source identity follows A/B all the way into its conclusion card. */
.binary-operand-card.binary-operand-a { --binary-source-color: #4fc7ff; }
.binary-operand-card.binary-operand-b { --binary-source-color: #df70ff; }

.binary-operand-card .binary-operand-key {
    color: var(--binary-source-color);
}

.facing-analogy-pair {
    --facing-analogy-color: #4fd7f5;
}

.binary-operand-card .facing-analogy-pair {
    --facing-analogy-color: var(--binary-source-color);
}

.facing-analogy-pair::before {
    border-color: var(--facing-analogy-color);
    color: var(--facing-analogy-color);
}

.facing-analogy-connector {
    color: var(--facing-analogy-color);
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
    font-size: 1.12em;
    letter-spacing: 0;
}

.facing-comparison-statement {
    color: var(--soft-text);
    font-weight: 800;
    letter-spacing: 0.025em;
}

/* Classic explanation layout adapted from soamsy/Syllogimous-v3. */
.explanation-popup.classic-explanation-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    display: block !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 98vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 98vh !important;
    padding: 20px !important;
    overflow: auto !important;
    transform: translate(-50%, -50%);
    border: 1px solid var(--switch-border-color) !important;
    border-radius: 8px;
    background: var(--background-color) !important;
    color: var(--text-color);
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-align: center;
    box-sizing: border-box;
}

.classic-explanation-content {
    display: block;
    width: max-content;
    min-width: min(18rem, calc(100vw - 42px));
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: inherit;
    font: inherit;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
}

.classic-explanation-content .table {
    display: grid;
    grid-auto-rows: minmax(40px, 1fr);
    width: max-content;
    min-width: 100%;
}

.classic-explanation-content .td {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.5rem;
    padding: 3px;
    overflow: visible;
    border: 1px solid var(--switch-border-color);
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}

.classic-explanation-cell-items,
.classic-explanation-cell-items > span,
.classic-facing-object {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
}

.classic-explanation-comma {
    color: var(--soft-text);
}

.classic-explanation-content svg {
    width: 1.65em !important;
    height: 1.65em !important;
    max-width: 2rem;
    max-height: 2rem;
    overflow: visible;
    vertical-align: middle;
}

.classic-facing-object b {
    color: var(--accent-bright, var(--bracket-color));
    font-size: 1.15em;
}

.classic-explanation-content .three-d-scene {
    perspective: 1000px !important;
    padding: 0 0 10px 20px !important;
    transform-style: preserve-3d !important;
}

.classic-explanation-content .three-d-plane {
    position: static !important;
    background: var(--three-d-background) !important;
    box-shadow: none !important;
}

.classic-explanation-content .plane-1 { transform: rotateY(10deg) rotateX(10deg) translateZ(0) !important; }
.classic-explanation-content .plane-2 { transform: rotateY(12deg) rotateX(10deg) translateZ(-60px) !important; }
.classic-explanation-content .plane-3 { transform: rotateY(14deg) rotateX(10deg) translateZ(-120px) !important; }
.classic-explanation-content .plane-4 { transform: rotateY(16deg) rotateX(10deg) translateZ(-180px) !important; }
.classic-explanation-content .plane-5 { transform: rotateY(18deg) rotateX(10deg) translateZ(-240px) !important; }
.classic-explanation-content .plane-6 { transform: rotateY(20deg) rotateX(10deg) translateZ(-300px) !important; }
.classic-explanation-content .plane-7 { transform: rotateY(22deg) rotateX(10deg) translateZ(-360px) !important; }
.classic-explanation-content .plane-8 { transform: rotateY(24deg) rotateX(10deg) translateZ(-420px) !important; }
.classic-explanation-content .plane-9 { transform: rotateY(26deg) rotateX(10deg) translateZ(-480px) !important; }
.classic-explanation-content .plane-10 { transform: rotateY(26deg) rotateX(10deg) translateZ(-540px) !important; }
.classic-explanation-content .plane-11 { transform: rotateY(26deg) rotateX(10deg) translateZ(-600px) !important; }

.classic-explanation-content .four-d-scene {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: max-content;
    padding: 30px;
}

.classic-explanation-content .four-d-scene .three-d-scene {
    padding: 0 !important;
}

.classic-dimension-slice,
.classic-dimension-band,
.classic-membership-band,
.five-d-scene,
.six-d-scene {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    width: max-content;
}

.classic-dimension-band,
.classic-membership-band {
    padding: 0.6rem;
    border: 1px solid var(--switch-border-color);
}

.five-d-scene,
.six-d-scene {
    gap: 0.85rem;
}

.classic-dimension-label {
    justify-self: start;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.classic-explanation-content .binary-explainer-separator {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    background: #2bdef9;
}

.classic-explanation-content .distinction {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0.8rem 0;
}

.classic-explanation-content .distinction td {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--switch-border-color);
    vertical-align: top;
}

.classic-deictic-swaps {
    margin-bottom: 0.7rem;
}

.classic-deictic-table {
    margin: 0 auto;
    border-collapse: collapse;
}

.classic-deictic-table td {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid var(--switch-border-color);
}

/* Binary explanations keep the two source proofs separate, then resolve the
 * Boolean expression once. This avoids the old stacked "mishmash" when two
 * large or different source modes are combined. */
.classic-binary-explanation,
.classic-single-explanation,
.classic-syllogism-model {
    display: grid;
    gap: 0.8rem;
}

.classic-binary-explanation {
    width: min(72rem, calc(100vw - 3rem));
    max-width: 100%;
    text-align: left;
}

.classic-binary-sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: start;
}

.classic-binary-source {
    --explanation-source: #4fc7ff;
    min-width: 0;
    padding: 0.85rem;
    overflow: auto;
    border: 1px solid var(--switch-border-color);
    border-left: 3px solid var(--explanation-source);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.018);
}

.classic-binary-source-b {
    --explanation-source: #df70ff;
}

.classic-binary-source > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--switch-border-color);
}

.classic-binary-source-key {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid var(--explanation-source);
    border-radius: 5px;
    color: var(--explanation-source);
    font-weight: 800;
}

.classic-binary-source > header > b {
    min-width: 0;
    overflow-wrap: anywhere;
}

.classic-explanation-premise-details {
    border-top: 1px solid var(--switch-border-color);
}

.classic-explanation-premise-details > summary {
    padding: 0.55rem 0 0;
    cursor: pointer;
    color: var(--soft-text);
    font-size: 0.78em;
    font-weight: 750;
}

.classic-explanation-premises,
.classic-syllogism-chain {
    display: grid;
    gap: 0.42rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: explanation-premise;
}

.classic-explanation-premises li,
.classic-syllogism-chain li {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-height: 2.2rem;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid var(--switch-border-color);
    counter-increment: explanation-premise;
}

.classic-explanation-premises li::before,
.classic-syllogism-chain li::before {
    content: counter(explanation-premise);
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid var(--switch-border-color);
    border-radius: 4px;
    color: var(--soft-text);
    font-size: 0.72em;
    font-weight: 800;
}

.classic-explanation-query {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.6rem;
    align-items: center;
    padding-top: 0.65rem;
    border-top: 1px solid var(--switch-border-color);
}

.classic-explanation-query-label {
    grid-column: 1 / -1;
    color: var(--soft-text);
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.classic-explanation-query-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.classic-explanation-truth,
.classic-binary-result b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0.18rem 0.48rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7em;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
}

.classic-explanation-truth.is-true,
.classic-binary-result .is-true {
    color: #24cf74;
}

.classic-explanation-truth.is-false,
.classic-binary-result .is-false {
    color: #ff5d68;
}

.classic-explanation-truth.is-indeterminable,
.classic-syllogism-query-resolution.is-indeterminable {
    color: var(--accent-bright, var(--theme-color, #3377ff));
}

.classic-syllogism-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.classic-syllogism-model {
    width: min(38rem, calc(100vw - 3rem));
    max-width: 100%;
    text-align: left;
}

.classic-syllogism-proof {
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--switch-border-color);
    border-radius: 7px;
}

.classic-syllogism-proof > header {
    display: grid;
    gap: 0.18rem;
    margin-bottom: 0.5rem;
}

.classic-syllogism-proof > header > span {
    color: var(--soft-text);
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.classic-syllogism-proof > header > p,
.classic-syllogism-inference > p {
    margin: 0;
    color: var(--soft-text);
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.45;
}

.classic-syllogism-statement {
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.classic-syllogism-chain .classic-syllogism-statement {
    display: block;
}

.classic-syllogism-statement .subject {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    vertical-align: middle;
}

.classic-syllogism-pairs > div,
.classic-syllogism-inference {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
    border: 1px solid var(--switch-border-color);
    border-radius: 6px;
}

.classic-syllogism-pairs > div > span,
.classic-syllogism-inference > span {
    color: var(--soft-text);
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.classic-syllogism-pairs em {
    color: var(--soft-text);
    font-size: 0.76em;
}

.classic-syllogism-network-result {
    border-left: 3px solid var(--explanation-accent, #8db5dd);
}

.classic-syllogism-query-resolution {
    border-left: 3px solid #ff5d68;
}

.classic-syllogism-query-resolution.is-true {
    border-left-color: #24cf74;
}

.classic-syllogism-query-resolution > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.classic-syllogism-query-resolution > header > span {
    color: var(--soft-text);
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.classic-syllogism-question {
    color: var(--text-color);
    font-size: 0.92em;
    font-weight: 800;
    line-height: 1.3;
}

.classic-syllogism-query-resolution em {
    color: var(--soft-text);
    font-size: 0.76em;
}

/* Legacy history entries may still contain the old outer-NOT wrapper. */
.syllogism-negated-conclusion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35em;
}

.postamble.syllogism-question-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.38rem;
    margin-bottom: 0.75rem;
    font-size: 1em;
    line-height: 1.2;
    letter-spacing: 0;
    opacity: 1;
    text-transform: none;
}

.syllogism-question-kicker {
    color: var(--preamble-color);
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.15em;
    opacity: 0.72;
    text-transform: uppercase;
}

.syllogism-question-prompt {
    color: #55c8ff;
    font-size: 0.92em;
    font-weight: 850;
    letter-spacing: 0.01em;
}

.syllogism-question-could .syllogism-question-prompt {
    color: #d68bff;
}

.syllogism-history-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
}

.syllogism-history-prompt {
    color: var(--accent-bright, var(--theme-color));
    font-weight: 800;
    text-transform: none;
}

.hqli-conclusion-feedback {
    margin: -0.2rem 0 0.35rem;
    color: var(--soft-text);
    font-size: 0.72em;
}

.classic-binary-resolution {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--switch-border-color);
    border-radius: 8px;
}

.classic-binary-values {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.classic-binary-value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--soft-text);
    font-size: 0.74em;
}

.classic-binary-value b {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border: 1px solid var(--switch-border-color);
    border-radius: 4px;
    color: var(--text-color);
}

.classic-binary-expression {
    min-width: 0;
    overflow-x: auto;
    text-align: center;
}

.classic-binary-result {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--soft-text);
    font-size: 0.8em;
}

.light-mode .classic-binary-source,
.light-mode .classic-binary-resolution {
    background: rgba(10, 38, 70, 0.025);
}

@media (max-width: 700px) {
    .explanation-popup.classic-explanation-popup {
        max-width: calc(100vw - 0.35rem) !important;
        max-height: calc(100vh - 0.35rem) !important;
        padding: 12px !important;
    }

    .classic-explanation-content .four-d-scene {
        padding: 16px;
    }

    .classic-binary-explanation {
        width: calc(100vw - 2rem);
    }

    .classic-binary-sources,
    .classic-syllogism-pairs {
        grid-template-columns: 1fr;
    }

    .classic-binary-resolution {
        grid-template-columns: 1fr;
    }

    .classic-binary-expression {
        text-align: left;
    }
}

/* Final compact timer layout. Keep the unit beside the value at every width. */
.timer-wrap {
    padding-bottom: 0.15rem !important;
    margin-bottom: 0.25rem !important;
}

.timer-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 2.35rem;
    padding: 0.2rem 0.7rem !important;
    gap: 0.5rem !important;
    line-height: 1 !important;
}

.timer-controls .timer-label {
    justify-self: start;
}

.timer-controls .inline-input__inner {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-self: center;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.timer-controls .inline-input__inner input[type="number"] {
    width: 5.5ch !important;
    min-width: 5.5ch !important;
    padding: 0.18rem 0.35rem !important;
    margin: 0 !important;
    box-shadow: inset 0 -2px 0 var(--theme-color, #217fe4) !important;
}

.timer-controls input[type="checkbox"] {
    justify-self: end;
    margin: 0 !important;
}

/* Focus Layout gives the trial itself the viewport. The timer remains usable
   as a small overlay while decorative labels, brackets and score stay out of
   the document flow. */
body.focus-layout .game-area {
    gap: 0.2rem;
}

.focus-timer-readout {
    display: none;
}

body.focus-layout .timer-wrap {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 20;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.focus-layout .timer,
body.focus-layout .timer-controls {
    display: none !important;
}

body.focus-layout .focus-timer-readout {
    --focus-timer-progress: 0%;
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    transform: translate(35%, -35%);
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(var(--accent-color, #3377ff) var(--focus-timer-progress), rgba(126, 141, 170, 0.3) 0);
    color: var(--text-color, #fff);
    box-shadow: none !important;
    font: 800 0.78rem/1 var(--ui-font, system-ui, sans-serif);
    cursor: pointer;
    isolation: isolate;
}

body.focus-layout .focus-timer-readout::before {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: -1;
    border-radius: inherit;
    background: var(--background-color, #0e1117);
}

body.focus-layout .focus-timer-readout::after {
    content: none !important;
}

body.focus-layout .focus-timer-readout:hover,
body.focus-layout .focus-timer-readout:focus-visible {
    transform: translate(35%, -35%);
    outline: 2px solid var(--accent-color, #3377ff);
    outline-offset: 2px;
}

body.focus-layout .focus-timer-readout.is-off {
    background: rgba(126, 141, 170, 0.3);
    color: var(--soft-text, #9aa4b8);
}

body.focus-layout .focus-timer-readout.is-urgent {
    background: conic-gradient(var(--wrong-color, #e24b5b) var(--focus-timer-progress), rgba(226, 75, 91, 0.22) 0);
    color: #ff6b78;
}

.focus-timer-value {
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
}

body.focus-layout .display-inner > h2,
body.focus-layout .carousel_display_label-wrapper > h2,
body.focus-layout .level-wrapper {
    display: none !important;
}

body.focus-layout .game-area .border-left,
body.focus-layout .game-area .border-right,
body.focus-layout .game-area .bracket-lip-top-left,
body.focus-layout .game-area .bracket-lip-top-right,
body.focus-layout .game-area .bracket-lip-bottom-left,
body.focus-layout .game-area .bracket-lip-bottom-right {
    display: none !important;
}

body.focus-layout .display-outer,
body.focus-layout .carousel,
body.focus-layout .carousel_display {
    width: 100% !important;
    min-width: 0 !important;
}

body.focus-layout .display-inner,
body.focus-layout .carousel_display_label-wrapper {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0.65rem 0.8rem 0.35rem !important;
}

body.focus-layout .display_text,
body.focus-layout .carousel_display_text {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100svh - 7.5rem) !important;
    padding-right: 0.25rem !important;
    box-sizing: border-box;
    overflow-y: auto;
}

body.focus-layout .confirmation-buttons {
    margin: 0.2rem 0 0.35rem;
    gap: 0.65rem;
}

body.focus-layout .confirmation-buttons button {
    flex: 0 1 6.75rem;
    width: clamp(5.75rem, 19vw, 6.75rem);
    min-width: 0;
    max-width: 6.75rem;
    min-height: 2.35rem;
    padding: 0.18rem 0.45rem;
    font-size: var(--step-0);
}

@media (max-width: 500px) {
    body.focus-layout .focus-timer-readout {
        width: 2rem;
        height: 2rem;
        transform: translate(25%, -25%);
        font-size: 0.72rem;
    }

    body.focus-layout .focus-timer-readout:hover,
    body.focus-layout .focus-timer-readout:focus-visible {
        transform: translate(25%, -25%);
    }

    body.focus-layout .display-inner,
    body.focus-layout .carousel_display_label-wrapper {
        padding: 0.55rem 0.45rem 0.25rem !important;
    }

    body.focus-layout .display_text,
    body.focus-layout .carousel_display_text {
        max-height: calc(100svh - 6.75rem) !important;
    }

body.focus-layout .confirmation-buttons button {
        width: clamp(5.25rem, 27vw, 6.1rem);
        max-width: 6.1rem;
        min-height: 2.2rem;
    }
}

/* Progress graph: focused metrics with separate smooth mode curves.
   Every surface is deliberately flat and opaque. */
.graph-popup {
    box-sizing: border-box;
    width: min(920px, calc(100vw - 1.5rem)) !important;
    height: min(700px, calc(100svh - 1.5rem)) !important;
    padding: clamp(0.7rem, 1.6vw, 1.1rem) !important;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--panel-line, rgba(51, 119, 255, 0.24)) !important;
    border-radius: 18px !important;
    background: #0f151e !important;
    box-shadow: none !important;
    scrollbar-color: rgba(var(--accent-rgb, 51, 119, 255), 0.55) transparent;
}

.graph-popup.visible {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
}

.graph-popup.is-loading .graph-popup-content {
    opacity: 0.55;
}

.graph-toolbar,
.graph-chart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

#graph-close-popup.graph-close-popup {
    position: absolute !important;
    top: clamp(0.7rem, 1.6vw, 1.1rem) !important;
    right: clamp(0.7rem, 1.6vw, 1.1rem) !important;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 !important;
    border: 1px solid var(--panel-line-soft, rgba(127, 151, 190, 0.18)) !important;
    border-radius: 9px !important;
    background: #151c27 !important;
    color: var(--text-color, #fff) !important;
    box-shadow: none !important;
    font: 400 1.45rem/1 system-ui, sans-serif;
    transform: none !important;
}

#graph-close-popup.graph-close-popup:hover,
#graph-close-popup.graph-close-popup:focus-visible {
    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.65) !important;
    background: #1a2330 !important;
    outline: none;
    box-shadow: none !important;
    transform: none !important;
}

.graph-toolbar {
    gap: 0.65rem;
    box-sizing: border-box;
    min-height: 2.45rem;
    padding-right: 3rem;
}

.graph-range-controls {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(2.75rem, auto));
    gap: 0.2rem;
    padding: 0.22rem;
    border: 1px solid var(--panel-line-soft, rgba(127, 151, 190, 0.16));
    border-radius: 10px;
    background: #0b1118;
}

.graph-range-select,
.graph-select {
    border: 1px solid transparent;
    background: transparent;
    color: var(--soft-text, #8e9bb0);
    box-shadow: none !important;
    cursor: pointer;
    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.025em;
    transform: none !important;
}

.graph-range-select {
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border-radius: 7px;
    font-size: 0.75rem;
}

.graph-range-select:hover,
.graph-range-select:focus-visible,
.graph-range-select.selected {
    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.34);
    background: #192437;
    color: var(--text-color, #fff);
    outline: none;
}

.graph-mode-filter {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--soft-text, #8e9bb0);
    font: 800 0.68rem/1 "Roboto", "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.graph-mode-filter select {
    width: min(15rem, 42vw);
    min-height: 2.45rem;
    padding: 0.35rem 2rem 0.35rem 0.7rem;
    overflow: hidden;
    border: 1px solid var(--panel-line-soft, rgba(127, 151, 190, 0.18));
    border-radius: 9px;
    background-color: #151c27;
    color: var(--text-color, #fff);
    box-shadow: none !important;
    text-overflow: ellipsis;
    font: 700 0.78rem/1.2 "Roboto", "Segoe UI", system-ui, sans-serif;
    text-transform: none;
}

.graph-mode-filter select:focus-visible {
    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.72);
    outline: none;
}

.graph-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
}

.graph-summary-card {
    box-sizing: border-box;
    min-height: 58px !important;
    padding: 0.55rem 0.65rem !important;
    border: 1px solid var(--panel-line-soft, rgba(127, 151, 190, 0.15)) !important;
    border-radius: 11px !important;
    background: #151c27 !important;
    box-shadow: none !important;
}

.graph-summary-card span {
    margin-bottom: 0.18rem !important;
    overflow: hidden;
    color: var(--soft-text, #8e9bb0) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.085em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graph-summary-card strong {
    overflow: hidden;
    color: var(--text-color, #fff) !important;
    font-size: clamp(0.98rem, 2vw, 1.25rem) !important;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graph-controls {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem !important;
    padding: 0.25rem !important;
    border: 1px solid var(--panel-line-soft, rgba(127, 151, 190, 0.15)) !important;
    border-radius: 11px !important;
    background: #0b1118 !important;
    box-shadow: none !important;
}

.graph-select {
    min-height: 2.25rem !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 8px !important;
    font-size: clamp(0.66rem, 1.5vw, 0.76rem) !important;
    white-space: nowrap;
}

.graph-select::before {
    content: none !important;
    display: none !important;
}

.graph-select:hover,
.graph-select:focus-visible,
.graph-select.selected,
.graph-select.selected:hover {
    border-color: rgba(var(--accent-rgb, 51, 119, 255), 0.34) !important;
    background: #192437 !important;
    color: var(--text-color, #fff) !important;
    outline: none;
    box-shadow: none !important;
    transform: none !important;
}

.graph-popup-content {
    display: flex !important;
    flex: 1 0 340px !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: stretch !important;
    min-height: 340px !important;
    padding: 0.65rem !important;
    border: 1px solid var(--panel-line-soft, rgba(127, 151, 190, 0.15)) !important;
    border-radius: 12px !important;
    background: #111822 !important;
    box-shadow: none !important;
}

.graph-chart-heading {
    flex: 0 0 auto;
    gap: 0.75rem;
    min-height: 2.35rem;
    margin-bottom: 0.35rem;
}

.graph-chart-heading strong,
.graph-chart-heading span {
    display: block;
    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
}

.graph-chart-heading strong {
    color: var(--text-color, #fff);
    font-size: 0.86rem;
}

.graph-chart-heading div > span {
    margin-top: 0.1rem;
    color: var(--soft-text, #8e9bb0);
    font-size: 0.66rem;
}

.graph-insight {
    max-width: 48%;
    color: var(--soft-text, #8e9bb0);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: right;
}

.graph-insight.is-positive { color: #3fca78; }
.graph-insight.is-negative { color: #ef6a78; }

.graph-series-legend {
    display: flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0 0 0.35rem;
    padding-bottom: 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb, 51, 119, 255), 0.42) transparent;
}

.graph-series-legend[hidden] {
    display: none !important;
}

.graph-series-key {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.35rem;
    min-height: 1.65rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--panel-line-soft, rgba(127, 151, 190, 0.15));
    border-radius: 7px;
    background: #0c121b;
    color: var(--soft-text, #8e9bb0);
    box-shadow: none !important;
    font: 700 0.62rem/1 "Roboto", "Segoe UI", system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.graph-series-key i {
    display: block;
    width: 0.52rem;
    height: 0.52rem;
    border: 1px solid var(--series-color);
    border-radius: 50%;
    background: var(--series-color);
}

.graph-series-key:hover,
.graph-series-key:focus-visible {
    border-color: var(--series-color);
    color: var(--text-color, #fff);
    outline: none;
}

.graph-series-key.is-muted {
    opacity: 0.38;
}

.graph-canvas-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 225px;
}

.graph-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.graph-canvas-wrap.is-empty canvas {
    visibility: hidden;
}

.graph-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.3rem;
    color: var(--soft-text, #8e9bb0);
    text-align: center;
    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
}

.graph-empty[hidden] {
    display: none !important;
}

.graph-empty strong {
    color: var(--text-color, #fff);
    font-size: 0.9rem;
}

.graph-empty span {
    font-size: 0.72rem;
}

.light-mode .graph-popup {
    background: #f3f5f8 !important;
}

.light-mode #graph-close-popup.graph-close-popup,
.light-mode .graph-mode-filter select,
.light-mode .graph-summary-card {
    background: #ffffff !important;
}

.light-mode .graph-range-controls,
.light-mode .graph-controls {
    background: #e8edf4 !important;
}

.light-mode .graph-range-select:hover,
.light-mode .graph-range-select:focus-visible,
.light-mode .graph-range-select.selected,
.light-mode .graph-select:hover,
.light-mode .graph-select:focus-visible,
.light-mode .graph-select.selected,
.light-mode .graph-select.selected:hover {
    background: #dce7f8 !important;
}

.light-mode .graph-popup-content {
    background: #ffffff !important;
}

.light-mode .graph-series-key {
    background: #f3f6fa;
}

@media (max-width: 720px) {
    .graph-popup {
        width: 100vw !important;
        height: 100svh !important;
        padding: 0.55rem !important;
        border-radius: 0 !important;
    }

    .graph-popup.visible {
        gap: 0.5rem !important;
    }

    .graph-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding-right: 2.8rem;
    }

    .graph-range-controls {
        width: 100%;
        box-sizing: border-box;
    }

    .graph-mode-filter {
        justify-content: space-between;
    }

    .graph-mode-filter select {
        width: min(68vw, 18rem);
    }

    .graph-summary {
        grid-template-columns: repeat(5, minmax(5.5rem, 1fr)) !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .graph-summary::-webkit-scrollbar {
        display: none;
    }

    .graph-summary-card {
        min-height: 54px !important;
    }

    .graph-controls {
        display: flex !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .graph-controls::-webkit-scrollbar {
        display: none;
    }

    .graph-select {
        flex: 0 0 auto !important;
        min-width: 6.8rem;
        border-radius: 8px !important;
    }

    .graph-popup-content {
        flex-basis: 330px !important;
        min-height: 330px !important;
    }
}

@media (max-width: 430px) {
    .graph-chart-heading {
        align-items: flex-start;
    }

    .graph-insight {
        max-width: 55%;
        font-size: 0.62rem;
    }
}

/* Text-only diagonal directions for minimal and half-minimal modes. */
.minimal-direction-arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-family: inherit;
    font-style: normal;
    font-variant-emoji: text;
    text-align: center;
    vertical-align: -0.08em;
    transform-origin: 50% 50%;
}

.minimal-direction-arrow--northeast {
    transform: rotate(-45deg);
}

.minimal-direction-arrow--southeast {
    transform: rotate(45deg);
}

.minimal-direction-arrow--southwest {
    transform: rotate(135deg);
}

.minimal-direction-arrow--northwest {
    transform: rotate(-135deg);
}

/* Binary Analogy: source modes reuse their normal mode settings. */
.binary-source-settings {
    margin: 0.65rem 0 1rem 2rem !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--panel-line-soft) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.018) !important;
    box-shadow: none !important;
}

.binary-source-settings > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.65rem 0.8rem;
    cursor: pointer;
    color: var(--text-color);
    font-size: var(--step--2);
    font-weight: 700;
    list-style: none;
}

.binary-source-settings > summary::-webkit-details-marker {
    display: none;
}

.binary-source-settings > summary::after {
    content: '+';
    color: rgba(var(--accent-rgb), 0.95);
    font-size: 1.05rem;
    line-height: 1;
}

.binary-source-settings[open] > summary::after {
    content: '−';
}

.binary-source-settings > summary small {
    margin-left: auto;
    color: var(--muted-text-color, var(--text-color));
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.62;
}

.binary-source-settings > p {
    margin: 0;
    padding: 0 0.8rem 0.7rem;
    color: var(--muted-text-color, var(--text-color));
    font-size: 0.68rem;
    line-height: 1.45;
    opacity: 0.72;
}

.binary-source-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.4rem;
    padding: 0 0.65rem 0.7rem;
}

.binary-source-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
    min-height: 36px;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--panel-line-soft);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.68rem;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.binary-source-option > span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
}

.binary-source-option > input {
    flex: 0 0 auto;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0;
    accent-color: rgb(var(--accent-rgb, 33, 127, 228));
}

.binary-source-option:has(input:checked) {
    border-color: rgba(var(--accent-rgb, 33, 127, 228), 0.5);
    background: rgba(var(--accent-rgb, 33, 127, 228), 0.1);
}

.light-mode .binary-source-settings,
.light-mode .binary-source-option {
    background: rgba(10, 38, 70, 0.025) !important;
}

.light-mode .binary-source-option:has(input:checked) {
    background: rgba(var(--accent-rgb, 33, 127, 228), 0.1) !important;
}

/* Spatial modes: weighted 2–5-level distribution. */
.mode-option-block {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}

.mode-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2rem;
}

.mode-option-row > label:first-child {
    color: var(--text-color);
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.04em;
}

.mode-option-select,
.mode-option-select select {
    width: 100%;
    min-width: 0;
}

.mode-option-block [hidden],
.multiple-choice-answer-panel[hidden],
.construct-answer-panel[hidden],
.skip-question-button[hidden],
.confirmation-buttons[hidden] {
    display: none !important;
}

.height-frequency-control {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    container-type: inline-size;
}

/* Opt-in relation multiple-choice answer surface. */
.multiple-choice-answer-panel {
    display: grid;
    width: min(100%, 34rem);
    margin: 0.55rem auto;
    transition: opacity 0.18s ease;
}

.multiple-choice-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: 0.48rem;
    width: 100%;
}

.multiple-choice-option {
    min-width: 0;
    min-height: 2.7rem;
    padding: 0.58rem 0.68rem;
    border: 0;
    outline: 0;
    border-radius: 8px;
    box-shadow: none;
    background: color-mix(in srgb, var(--single-input-bg, #171b27) 88%, transparent);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1.2;
    overflow-wrap: anywhere;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.multiple-choice-option:hover,
.multiple-choice-option:focus-visible {
    background: color-mix(in srgb, var(--theme-color, #3377ff) 24%, var(--single-input-bg, #171b27));
    color: var(--accent-bright, #68cfff);
}

.multiple-choice-option:active {
    transform: translateY(1px);
}

.multiple-choice-option.is-minimal {
    font-size: clamp(0.78rem, 2.8vw, 1rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Opt-in constructed-relation answer surface. */
.construct-answer-panel {
    display: grid;
    gap: 0.6rem;
    width: min(100%, 34rem);
    margin: 0.55rem auto;
    transition: opacity 0.18s ease;
}

.construct-axis-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.construct-axis-control {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.construct-axis-name {
    color: color-mix(in srgb, var(--text-color) 68%, transparent);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.construct-axis-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
}

.construct-axis-choice,
.construct-submit-button,
.skip-question-button {
    border: 0;
    outline: 0;
    border-radius: 8px;
    box-shadow: none;
    background: color-mix(in srgb, var(--single-input-bg, #171b27) 88%, transparent);
    color: var(--text-color);
    font-family: inherit;
    font-weight: 750;
}

.construct-axis-choice {
    min-width: 0;
    padding: 0.48rem 0.25rem;
    font-size: 0.66rem;
    line-height: 1.1;
}

.construct-axis-choice.is-selected {
    background: color-mix(in srgb, var(--theme-color, #3377ff) 24%, transparent);
    color: var(--accent-bright, #68cfff);
}

.construct-submit-button {
    justify-self: center;
    min-width: 10.5rem;
    padding: 0.62rem 1rem;
    background: color-mix(in srgb, var(--theme-color, #3377ff) 28%, var(--single-input-bg, #171b27));
}

.construct-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.construct-unknown-relation {
    display: inline-flex;
    min-width: 2.2rem;
    justify-content: center;
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font-weight: 900;
}

.skip-question-button {
    display: block;
    margin: 0.1rem auto 0.35rem;
    padding: 0.4rem 0.9rem;
    border-color: color-mix(in srgb, currentColor 22%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--text-color) 62%, transparent);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.skip-question-button:hover {
    border-color: color-mix(in srgb, var(--theme-color, #3377ff) 56%, transparent);
    color: var(--text-color);
}

.skip-question-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.hqli-answer-user,
.hqli-conclusion-feedback {
    overflow-wrap: anywhere;
    white-space: normal;
}

.classic-explanation-query-constructed .classic-explanation-answer-key {
    color: var(--accent-bright, var(--theme-color, #3377ff));
}

@media (max-width: 560px) {
    .construct-axis-controls {
        grid-template-columns: 1fr;
    }
}

.height-frequency-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.height-frequency-grid > label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 0.66rem;
    text-align: center;
}

.height-frequency-grid > label > span:first-child {
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.78;
}

.height-frequency-grid > label > span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.2rem;
}

.height-frequency-input {
    box-sizing: content-box;
    flex: 0 0 6ch;
    width: 6ch !important;
    min-width: 6ch !important;
    max-width: 6ch !important;
    padding-right: 0.35rem !important;
    padding-left: 0.35rem !important;
    text-align: center !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

.height-frequency-input::-webkit-inner-spin-button,
.height-frequency-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

@container (max-width: 22rem) {
    .height-frequency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0.55rem;
    }
}

.binary-relational-web-source {
    width: 100%;
    min-width: 0;
}

.binary-relational-web-source .relational-web-trial {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.45rem;
}

@media (max-width: 560px) {
    .binary-source-settings {
        margin-left: 0.65rem !important;
        margin-right: 0.1rem !important;
    }

    .binary-source-option-grid {
        grid-template-columns: 1fr;
    }

    .height-frequency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Optional integrated spatial maps. Each height is a literal floor plan:
   North is screen-up, East is screen-right, and higher floors are rendered
   above lower floors. This avoids the directional ambiguity of a projected
   wireframe while keeping every spatial axis in one visual stack. */
.integrated-explanation-shell {
    display: grid;
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
}

.integrated-three-d-map-wrap {
    width: 100%;
    min-width: 0;
    padding: 0.2rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
}

.integrated-three-d-map {
    min-width: 280px;
    margin: 0 auto;
}

.integrated-floor-stack {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: 10px;
    background: var(--three-d-background);
    box-shadow: inset 0 0 0 1px var(--panel-line-soft);
}

.integrated-map-floor {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    min-width: 0;
    background: var(--three-d-background);
}

.integrated-map-floor:not(.has-level-label) {
    grid-template-columns: minmax(0, 1fr);
}

.integrated-map-floor.is-top {
    background: rgba(142, 160, 188, 0.045);
}

.integrated-map-floor + .integrated-map-floor {
    border-top: 2px solid var(--panel-line-soft);
}

.integrated-map-floor-label {
    display: grid;
    place-items: center;
    padding: 0.35rem 0.25rem;
    border-right: 2px solid var(--panel-line-soft);
    color: var(--soft-text);
    font-size: 0.62em;
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: 0.055em;
    text-align: center;
    text-transform: uppercase;
}

.integrated-map-floor-grid {
    display: grid;
    grid-template-columns: repeat(var(--integrated-cols), minmax(2.8rem, 1fr));
    grid-template-rows: repeat(var(--integrated-rows), minmax(2.55rem, auto));
    min-width: 0;
}

.integrated-map-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.55rem;
    padding: 0.24rem 0.3rem;
    border-right: 1px solid var(--panel-line-soft);
    border-bottom: 1px solid var(--panel-line-soft);
    color: var(--text-color);
    box-sizing: border-box;
}

.integrated-map-cell.is-row-end {
    border-right: 0;
}

.integrated-map-cell.is-occupied {
    background: rgba(142, 160, 188, 0.055);
}

.integrated-map-cell .integrated-three-d-node-items {
    position: relative;
    z-index: 1;
    max-width: 100%;
    min-height: 1.85rem;
    padding: 0.22rem 0.4rem;
    border-radius: 7px;
    background: var(--three-d-background);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    color: var(--text-color);
    font-weight: 780;
    line-height: 1;
    white-space: nowrap;
}

.integrated-floor-stack.is-compact {
    min-width: 220px;
}

.integrated-floor-stack.is-compact .integrated-map-floor {
    grid-template-columns: 2.9rem minmax(0, 1fr);
}

.integrated-floor-stack.is-compact .integrated-map-floor:not(.has-level-label) {
    grid-template-columns: minmax(0, 1fr);
}

.integrated-floor-stack.is-compact .integrated-map-floor-label {
    font-size: 0.54em;
}

.integrated-floor-stack.is-compact .integrated-map-floor-grid {
    grid-template-columns: repeat(var(--integrated-cols), minmax(2.3rem, 1fr));
    grid-template-rows: repeat(var(--integrated-rows), minmax(2.2rem, auto));
}

.integrated-floor-stack.is-compact .integrated-map-cell {
    min-height: 2.2rem;
    padding: 0.18rem 0.22rem;
}

.integrated-floor-stack.is-compact .integrated-map-cell .integrated-three-d-node-items {
    min-height: 1.65rem;
    padding: 0.18rem 0.32rem;
    font-size: 0.86em;
}

.classic-explanation-content .four-d-scene.integrated-higher-d-scene,
.classic-explanation-content .integrated-higher-d-scene .four-d-scene {
    gap: 0.8rem;
    padding: 0.65rem;
}

.classic-explanation-content .integrated-higher-d-scene {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.integrated-higher-d-scene .classic-dimension-slice {
    min-width: min(100%, 300px);
}

.integrated-higher-d-scene .integrated-three-d-map-wrap {
    padding-block: 0;
}

/* Mobile questions should use the game card's available width. Older spacing
   reserved several rem on both sides even though the side tabs already sit
   outside the card, which forced long 5D/6D relations into a narrow column. */
@media (max-width: 700px) {
    .game-area:not(.wide-premises) {
        width: calc(100vw - 3rem);
        max-width: calc(100vw - 3rem);
        box-sizing: border-box;
    }

    .game-area .display-outer,
    .game-area .game-display,
    .game-area #spoiler-area {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .game-area .display-inner {
        width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        padding-inline: 0.55rem !important;
        box-sizing: border-box;
    }

    .game-area .display_text {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-inline: 0.35rem 0.25rem !important;
        box-sizing: border-box;
    }
}

.integrated-three-d-node-items,
.integrated-three-d-node-items > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
}

.integrated-three-d-node-items.has-multiple-stimuli {
    gap: 0.28rem;
}

.integrated-map-cell .classic-explanation-comma {
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin: 0 0.03rem !important;
    color: var(--text-color);
    opacity: 0.82;
}

.integrated-map-cell svg {
    width: 1.65em !important;
    height: 1.65em !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
}

@media (max-width: 560px) {
    .integrated-three-d-map-wrap {
        margin-inline: -0.2rem;
        width: calc(100% + 0.4rem);
    }

    .integrated-map-floor {
        grid-template-columns: 2.8rem minmax(0, 1fr);
    }

    .integrated-map-floor:not(.has-level-label) {
        grid-template-columns: minmax(0, 1fr);
    }

    .integrated-map-floor-label {
        font-size: 0.53em;
    }

    .integrated-higher-d-scene .classic-dimension-slice {
        min-width: 100%;
    }
}

/* One-time, versioned release notes. */
body.changelog-open {
    overflow: hidden;
}

.changelog-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
}

.changelog-dialog {
    width: min(560px, 100%);
    max-height: min(720px, calc(100dvh - 2rem));
    overflow: auto;
    padding: 1rem;
    border: 1px solid var(--panel-line-soft, rgba(90, 120, 180, 0.2));
    border-radius: 12px;
    background: var(--offcanvas-bg, #111119);
    color: var(--offcanvas-fg, var(--text-color));
    box-shadow: none;
}

.changelog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.changelog-header h2,
.changelog-item h3,
.changelog-item p {
    margin: 0;
}

.changelog-header h2 {
    font-family: "Roboto", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
}

.changelog-close {
    display: grid;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--single-input-bg, #1a1a25);
    color: inherit;
    box-shadow: none;
    cursor: pointer;
}

.changelog-close svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.changelog-list {
    display: grid;
    gap: 0.55rem;
}

.changelog-panel-body {
    direction: ltr;
    width: 100%;
    box-sizing: border-box;
}

.changelog-panel-heading {
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--panel-line-soft, rgba(90, 120, 180, 0.2));
}

.changelog-panel-heading span {
    color: var(--accent-bright, var(--theme-color));
    font: 750 0.7rem/1 "Roboto", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.changelog-panel-heading h2 {
    margin: 0.2rem 0 0;
    font: 800 1.25rem/1.1 "Roboto", sans-serif;
    letter-spacing: 0;
}

.changelog-item {
    padding: 0.75rem;
    border: 0;
    border-radius: 9px;
    background: var(--single-input-bg, #1a1a25);
}

body:not(.light-mode) #sidebar-changelog .changelog-item {
    border: 1px solid rgba(184, 201, 235, 0.13);
    background: #1a1d27;
}

.changelog-item h3 {
    font-family: "Roboto", sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
}

.changelog-item time {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--soft-text);
    font: 700 0.68rem/1.2 "Roboto", sans-serif;
    letter-spacing: 0.03em;
}

.changelog-item p {
    margin-top: 0.25rem;
    color: color-mix(in srgb, currentColor 72%, transparent);
    font: 500 0.8rem/1.4 "Roboto", sans-serif;
    letter-spacing: 0;
}

.changelog-location {
    margin-top: 0.45rem;
    color: var(--accent-bright, var(--theme-color));
    font: 750 0.72rem/1.3 "Roboto", sans-serif;
    letter-spacing: 0.015em;
}

.changelog-dismiss {
    width: 100%;
    margin-top: 0.8rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 9px;
    background: var(--accent, var(--theme-color));
    color: #fff;
    box-shadow: none;
    font: 800 0.84rem/1 "Roboto", sans-serif;
    letter-spacing: 0;
    cursor: pointer;
}

.changelog-close:hover,
.changelog-dismiss:hover {
    filter: brightness(1.08);
}

.changelog-close:focus-visible,
.changelog-dismiss:focus-visible {
    outline: 2px solid var(--accent-bright, var(--theme-color));
    outline-offset: 2px;
}

.light-mode .changelog-overlay {
    background: rgba(18, 22, 34, 0.48);
}

.light-mode .changelog-dialog {
    background: var(--offcanvas-bg, #e2e4ec);
}

@media (max-width: 560px) {
    .changelog-overlay {
        align-items: end;
        padding: 0.65rem;
    }

    .changelog-dialog {
        max-height: calc(100dvh - 1.3rem);
        padding: 0.85rem;
        border-radius: 12px;
    }

    .changelog-item {
        padding: 0.68rem;
    }
}

/* The explanation is a reading surface, not part of the selected game skin.
   Keep its contrast and measurements stable across every appearance preset. */
.explanation-popup.classic-explanation-popup {
    --explanation-bg: #090b10;
    --explanation-surface: #11151d;
    --explanation-surface-2: #171c25;
    --explanation-text: #f4f6f8;
    --explanation-muted: #9aa4b2;
    --explanation-line: #343c49;
    --explanation-accent: #8db5dd;
    --background-color: var(--explanation-bg);
    --text-color: var(--explanation-text);
    --soft-text: var(--explanation-muted);
    --switch-border-color: var(--explanation-line);
    --three-d-background: var(--explanation-surface-2);
    --accent-bright: var(--explanation-accent);
    --bracket-color: var(--explanation-accent);
    width: max-content !important;
    max-width: 96vw !important;
    max-height: 94dvh !important;
    padding: clamp(0.65rem, 1.4vw, 1rem) !important;
    border: 1px solid var(--explanation-line) !important;
    border-radius: 10px !important;
    background: var(--explanation-bg) !important;
    color: var(--explanation-text) !important;
    color-scheme: dark;
    font-family: "Roboto", "Segoe UI", sans-serif !important;
    font-size: clamp(0.92rem, 1.2vw, 1.08rem) !important;
}

.explanation-popup.classic-explanation-popup-wide {
    width: min(96vw, 100rem) !important;
}

.explanation-popup.classic-explanation-popup-spatial {
    min-width: min(22rem, calc(100vw - 0.75rem)) !important;
    padding-inline: clamp(1.15rem, 3vw, 1.65rem) !important;
}

.classic-explanation-popup .classic-explanation-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--explanation-text) !important;
}

/* Linear explanations use a small, explicit flex layout instead of relying on
   inline SVG baselines. This keeps Voronoi and abstract-symbol stimuli centered
   exactly like text and emoji in every linear submode. */
.explanation-popup.classic-explanation-popup-linear {
    min-width: min(15.5rem, calc(100vw - 0.75rem)) !important;
    padding: clamp(0.78rem, 1.65vw, 1.08rem) !important;
    font-size: clamp(0.96rem, 1.24vw, 1.11rem) !important;
}

.classic-explanation-popup-linear .classic-single-explanation {
    gap: 0.9rem;
}

.classic-linear-explanation,
.classic-linear-order,
.classic-linear-row,
.classic-linear-buckets,
.classic-linear-bucket,
.classic-linear-item {
    box-sizing: border-box;
}

.classic-linear-explanation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
}

.classic-linear-order-horizontal {
    flex-flow: row wrap;
    gap: 0.4rem;
}

.classic-linear-order-vertical {
    flex-direction: column;
    gap: 0.48rem;
}

.classic-linear-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.8em;
}

.classic-linear-separator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--explanation-muted);
    line-height: 1;
}

.classic-linear-buckets-horizontal {
    align-items: stretch;
    gap: 0;
}

.classic-linear-buckets-vertical {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.classic-linear-bucket {
    display: flex;
    flex: 1 1 auto;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-width: 2.6rem;
    min-height: 2.25rem;
    padding: 0.3rem 0.48rem;
}

.classic-linear-buckets-vertical .classic-linear-bucket {
    width: 100%;
}

.classic-linear-buckets .divider {
    align-self: stretch;
    flex: 0 0 1px;
    width: 1px;
    min-height: 2.25rem;
    margin: 0 0.18rem;
    background: var(--explanation-line);
}

.classic-linear-buckets-vertical .divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
    margin: 0.18rem 0;
}

.classic-linear-item {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.55em;
    min-height: 1.7em;
    margin: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    text-align: center;
    vertical-align: middle !important;
    white-space: nowrap;
}

.classic-linear-item > svg,
.classic-linear-item > .emoji,
.classic-linear-item > .pattern-shape {
    position: static !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
}

.classic-linear-item > svg.junk,
.classic-linear-item > svg.noise,
.classic-linear-item > svg.topo-stimulus,
.classic-linear-item > svg.abstract-symbol,
.classic-linear-item > svg.pattern-shape {
    width: 1.7em !important;
    height: 1.7em !important;
    max-width: 1.9rem !important;
    max-height: 1.9rem !important;
    overflow: visible !important;
}

.classic-explanation-popup .classic-explanation-comma,
.classic-explanation-popup .classic-dimension-label,
.classic-explanation-popup .classic-explanation-premise-details > summary {
    color: var(--explanation-muted) !important;
}

.classic-explanation-popup .td,
.classic-explanation-popup .classic-dimension-slice,
.classic-explanation-popup .classic-dimension-band,
.classic-explanation-popup .classic-membership-band,
.classic-explanation-popup .classic-binary-source,
.classic-explanation-popup .classic-binary-resolution,
.classic-explanation-popup .classic-deictic-table td,
.classic-explanation-popup .classic-explanation-premise-details,
.classic-explanation-popup .classic-explanation-premises li,
.classic-explanation-popup .classic-syllogism-chain li {
    border-color: var(--explanation-line) !important;
}

.classic-explanation-popup .classic-dimension-slice,
.classic-explanation-popup .classic-dimension-band,
.classic-explanation-popup .classic-membership-band,
.classic-explanation-popup .classic-binary-source,
.classic-explanation-popup .classic-binary-resolution {
    background: var(--explanation-surface) !important;
}

.classic-explanation-popup .three-d-plane,
.classic-explanation-popup .integrated-floor-stack,
.classic-explanation-popup .integrated-map-floor,
.classic-explanation-popup .integrated-map-cell .integrated-three-d-node-items {
    background: var(--explanation-surface-2) !important;
    color: var(--explanation-text) !important;
}

.classic-explanation-popup .integrated-floor-stack,
.classic-explanation-popup .integrated-map-floor + .integrated-map-floor,
.classic-explanation-popup .integrated-map-floor-label,
.classic-explanation-popup .integrated-map-cell {
    border-color: var(--explanation-line) !important;
}

/* A shared map cell is one inline value such as “💵, NIQ”. Stimulus-specific
   positioning must not pull either item out of that line. */
.classic-explanation-popup .classic-explanation-cell-items,
.classic-explanation-popup .integrated-three-d-node-items {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.18rem !important;
    width: max-content !important;
    min-width: max-content !important;
    margin: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
}

.classic-explanation-popup .classic-explanation-cell-item,
.classic-explanation-popup .classic-explanation-comma {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    transform: none !important;
    line-height: 1 !important;
}

.classic-explanation-popup .classic-explanation-cell-item > .emoji,
.classic-explanation-popup .integrated-three-d-node-items .emoji {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 1em !important;
    margin: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
}

.classic-explanation-popup-spatial .classic-explanation-content {
    display: grid;
    justify-items: center;
}

.classic-explanation-popup-spatial .three-d-scene {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0 1rem 10px !important;
    box-sizing: border-box;
}

.classic-explanation-popup-spatial .three-d-plane {
    margin-inline: auto;
    transform-origin: center center !important;
}

/* Space 4D–6D keeps the original complete nested grids. Only the containers
   wrap across the viewport, so no coordinate plane or empty reference cell is
   discarded just to shorten the explanation. */
.classic-explanation-popup .five-d-scene,
.classic-explanation-popup .six-d-scene {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    align-items: start;
    gap: 0.65rem !important;
    width: min(94vw, 96rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.classic-explanation-popup .classic-dimension-band,
.classic-explanation-popup .classic-membership-band {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.55rem !important;
    box-sizing: border-box;
}

.classic-explanation-popup .six-d-scene > .classic-membership-band {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
    gap: 0.55rem;
}

.classic-explanation-popup .six-d-scene > .classic-membership-band > .classic-dimension-label {
    grid-column: 1 / -1;
}

.classic-explanation-popup .four-d-scene {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0.45rem !important;
    box-sizing: border-box;
}

.classic-explanation-popup .four-d-scene > .classic-dimension-slice {
    flex: 1 1 14rem;
    width: auto !important;
    min-width: min(100%, 14rem) !important;
    max-width: 100%;
    padding: 0.4rem;
    overflow: auto;
    box-sizing: border-box;
}

.classic-explanation-popup .four-d-scene .three-d-scene {
    width: max-content;
    min-width: 100%;
    padding: 0.2rem !important;
}

/* Permanent middle-right changelog entry. It is the same rotated tab component
   as HISTORY and GRAPH; only its anchor point differs. Keep its text metrics
   fixed on hover so the button never jumps or changes size. */
label.open.changelog-side-tab {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    z-index: 50;
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0.8rem 1.8rem;
    transform-origin: top right;
    transform: rotateZ(-90deg) translateY(-100%) translateX(50%);
    transition: border-color 0.2s ease, background-color 0.2s ease,
        opacity 0.25s ease;
}

label.open.changelog-side-tab:hover {
    border-color: rgba(var(--accent-rgb, 33, 127, 228), 0.34);
    background: var(--label-background-color);
    color: var(--label-color);
    letter-spacing: normal;
    transform: rotateZ(-90deg) translateY(-100%) translateX(50%);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 33, 127, 228), 0.16) !important;
    text-shadow: none !important;
    filter: none !important;
}

.changelog-side-tab:focus-visible {
    outline: 2px solid var(--label-color);
    outline-offset: -3px;
}

label.open.changelog-side-tab .changelog-label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: inherit;
    letter-spacing: 0.15em;
    line-height: 1;
}

label.open.changelog-side-tab:hover .changelog-label {
    font-size: inherit;
    letter-spacing: 0.15em;
}

.changelog-label::before {
    content: none !important;
    display: none !important;
}

body.hide-side-buttons .changelog-side-tab {
    opacity: 0;
    transform: rotateZ(-90deg) translateY(calc(-100% - 60px)) translateX(50%);
    pointer-events: none;
}

body.hide-side-buttons .changelog-side-tab.revealed {
    opacity: 1;
    transform: rotateZ(-90deg) translateY(-100%) translateX(50%);
    pointer-events: auto;
}

@media (max-width: 700px) {
    .explanation-popup.classic-explanation-popup-wide {
        width: calc(100vw - 0.5rem) !important;
        max-width: calc(100vw - 0.5rem) !important;
        max-height: calc(100dvh - 0.5rem) !important;
        padding: 0.45rem !important;
    }

    .classic-explanation-popup .five-d-scene,
    .classic-explanation-popup .six-d-scene,
    .classic-explanation-popup .six-d-scene > .classic-membership-band {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem !important;
    }

    .classic-explanation-popup .four-d-scene {
        padding: 0.3rem !important;
    }

    .classic-explanation-popup .four-d-scene > .classic-dimension-slice {
        flex-basis: 100%;
        padding: 0.35rem;
    }

    label.open.changelog-side-tab {
        top: 50%;
        right: 0;
        display: grid;
        width: 1.5rem;
        min-width: 1.5rem;
        max-width: 1.5rem;
        height: 3.9rem;
        min-height: 3.9rem;
        max-height: 3.9rem;
        padding: 0;
        place-items: center;
        border-radius: 9px 0 0 9px;
        font-size: 0;
        transform: translateY(-50%);
        transform-origin: center;
    }

    label.open.changelog-side-tab:hover {
        transform: translateY(-50%);
    }

    label.open.changelog-side-tab .changelog-label,
    label.open.changelog-side-tab:hover .changelog-label {
        display: grid;
        place-items: center;
        font-size: 0;
        letter-spacing: 0;
        line-height: 1;
    }

    label.open.changelog-side-tab .changelog-label::after {
        content: 'LOG';
        writing-mode: vertical-rl;
        color: inherit;
        font-size: 0.52rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        line-height: 1;
        transform: rotate(180deg);
    }

    body.hide-side-buttons label.open.changelog-side-tab {
        opacity: 0;
        transform: translate(100%, -50%);
        pointer-events: none;
    }

    body.hide-side-buttons label.open.changelog-side-tab.revealed {
        opacity: 1;
        transform: translateY(-50%);
        pointer-events: auto;
    }
}

/* Clickable settings thumbnail */
.settings-menu-btn.nice-secret-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    opacity: 1;
    border-color: var(--panel-line-soft);
    background: #050607;
}

.nice-secret-size-spacer {
    visibility: hidden;
}

.settings-menu-btn.nice-secret-btn::before {
    display: none;
}

.settings-menu-btn.nice-secret-btn:hover {
    border-color: var(--panel-line);
    background: #050607;
}

.nice-secret-thumbnail {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease, filter 220ms ease;
}

.nice-secret-btn:hover .nice-secret-thumbnail {
    transform: scale(1.025);
    filter: brightness(0.9);
}

.nice-secret-message {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.7rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.76);
    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(0.62rem, 2.5vw, 0.78rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: none;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.nice-secret-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reference-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.reference-image-grid img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Adaptive abstract stimuli and relation-cue gaps */
.abstract-symbol-preview {
    color: var(--accent-bright, var(--theme-color));
}

.abstract-symbol-preview-motif {
    fill: color-mix(in srgb, currentColor 52%, #ff5f87 48%);
}

.adaptive-abstract-symbol {
    overflow: visible;
}

.setting-label-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.setting-label-with-icon > svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
}

.relation-gap-setting {
    padding: 0.15rem 0;
}

.relation-gap-dependent-fields {
    display: grid;
    gap: 0.42rem;
    margin: 0.55rem 0 0 2rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid var(--panel-line-soft, rgba(112, 138, 190, 0.18));
    border-radius: 9px;
    background: color-mix(in srgb, var(--single-input-bg, #171b27) 76%, transparent);
}

.relation-gap-dependent {
    min-height: 2rem;
    gap: 0.7rem;
}

.relation-gap-dependent + .relation-gap-dependent {
    padding-top: 0.42rem;
    border-top: 1px solid var(--panel-line-soft, rgba(112, 138, 190, 0.14));
}

.relation-gap-dependent > label {
    color: color-mix(in srgb, currentColor 78%, transparent);
    font-size: 0.78rem;
}

.relation-gap-number {
    margin-left: auto;
}

.relation-gap-boundary[hidden] {
    display: none !important;
}

.relation-gap-mask {
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    color: inherit;
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.relation-gap-mask .subject,
.relation-gap-mask .swap-token {
    display: inline-flex;
    align-items: center;
}

.relation-gap-question {
    color: var(--accent-bright, var(--theme-color));
    font: inherit;
    font-weight: 900;
}

.display_text .formatted-premise.has-relation-gap-mask {
    display: block !important;
    text-align: inherit;
}

.formatted-premise.has-relation-gap-mask > .relation-gap-mask {
    display: inline-flex !important;
    min-width: 0 !important;
    justify-self: auto !important;
}

/* Changelog suggestion entry point */
.changelog-panel-actions {
    position: sticky;
    bottom: -0.05rem;
    z-index: 2;
    margin-top: 0.75rem;
    padding: 0.65rem 0 0.1rem;
    background: linear-gradient(to bottom, transparent, var(--single-input-bg, #111119) 28%);
}

.submit-suggestion-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 3.7rem;
    padding: 0.65rem 0.7rem;
    border: 0;
    border-radius: 10px;
    outline: 0;
    background: color-mix(in srgb, var(--accent, var(--theme-color)) 24%, #171b27);
    color: inherit;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, filter 150ms ease, transform 150ms ease;
}

.submit-suggestion-button:hover {
    background: color-mix(in srgb, var(--accent, var(--theme-color)) 34%, #171b27);
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.submit-suggestion-button:focus-visible {
    outline: 0;
    filter: brightness(1.12);
}

.submit-suggestion-button > span:nth-child(2) {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.submit-suggestion-button strong {
    font: 800 0.84rem/1.1 "Roboto", sans-serif;
}

.submit-suggestion-icon {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-bright, var(--theme-color)) 18%, transparent);
    color: var(--accent-bright, var(--theme-color));
}

.submit-suggestion-icon svg,
.submit-suggestion-arrow {
    width: 1.12rem;
    height: 1.12rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.submit-suggestion-arrow {
    width: 1rem;
    opacity: 0.58;
}

/* Public suggestion dialog */
body.suggestion-dialog-open {
    overflow: hidden;
}

.suggestion-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 12500;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 6, 12, 0.76);
    backdrop-filter: none;
}

.suggestion-dialog-overlay[hidden] {
    display: none !important;
}

.suggestion-dialog {
    width: min(620px, 100%);
    max-height: min(820px, calc(100dvh - 2rem));
    overflow: auto;
    padding: clamp(0.9rem, 2.5vw, 1.25rem);
    border: 1px solid var(--panel-line, rgba(100, 130, 190, 0.32));
    border-radius: 14px;
    background: var(--offcanvas-bg, #111119);
    color: var(--offcanvas-fg, var(--text-color));
    box-shadow: none;
    box-sizing: border-box;
}

.suggestion-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.suggestion-dialog-header > div {
    min-width: 0;
}

.suggestion-dialog-header > div > span {
    color: var(--accent-bright, var(--theme-color));
    font: 800 0.68rem/1 "Roboto", sans-serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.suggestion-dialog-header h2 {
    margin: 0;
    font: 850 clamp(1.2rem, 4vw, 1.55rem)/1.1 "Roboto", sans-serif;
    letter-spacing: -0.02em;
}

.suggestion-dialog-header p {
    max-width: 46ch;
    margin: 0.42rem 0 0;
    color: var(--soft-text);
    font: 500 0.8rem/1.4 "Roboto", sans-serif;
}

.suggestion-dialog-close {
    display: grid;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--panel-line-soft, rgba(100, 130, 190, 0.2));
    border-radius: 9px;
    background: var(--single-input-bg, #181d29);
    color: inherit;
    box-shadow: none;
    cursor: pointer;
}

.suggestion-dialog-close svg,
.suggestion-primary-button svg,
.suggestion-image-picker svg,
.suggestion-image-preview button svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#suggestion-form {
    display: grid;
    gap: 0.9rem;
}

.suggestion-field {
    display: grid;
    gap: 0.42rem;
}

.suggestion-field > span,
.suggestion-image-heading {
    font: 750 0.76rem/1.2 "Roboto", sans-serif;
}

.suggestion-field input,
.suggestion-field textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--panel-line-soft, rgba(100, 130, 190, 0.22));
    border-radius: 10px;
    background: var(--single-input-bg, #171b27);
    color: inherit;
    box-shadow: none;
    font: 500 0.92rem/1.45 "Roboto", sans-serif;
    box-sizing: border-box;
}

.suggestion-field input {
    min-height: 2.75rem;
}

.suggestion-field textarea {
    min-height: 8.5rem;
    resize: vertical;
}

.suggestion-field input::placeholder,
.suggestion-field textarea::placeholder {
    color: color-mix(in srgb, var(--soft-text) 72%, transparent);
}

.suggestion-field input:focus,
.suggestion-field textarea:focus,
.suggestion-image-picker:focus-within {
    border-color: var(--accent-bright, var(--theme-color));
    outline: 2px solid color-mix(in srgb, var(--accent-bright, var(--theme-color)) 25%, transparent);
    outline-offset: 1px;
}

.suggestion-field > small {
    justify-self: end;
    color: var(--soft-text);
    font: 600 0.68rem/1 "Roboto", sans-serif;
}

.suggestion-image-field {
    display: grid;
    gap: 0.55rem;
}

.suggestion-image-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.suggestion-image-heading small,
#suggestion-image-count {
    color: var(--soft-text);
    font-weight: 600;
}

.suggestion-image-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.18rem 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px dashed color-mix(in srgb, var(--accent-bright, var(--theme-color)) 48%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, var(--theme-color)) 7%, var(--single-input-bg, #171b27));
    cursor: pointer;
}

.suggestion-image-picker svg {
    grid-row: 1 / span 2;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--accent-bright, var(--theme-color));
}

.suggestion-image-picker > span {
    font: 750 0.78rem/1.2 "Roboto", sans-serif;
}

.suggestion-image-picker > small {
    color: var(--soft-text);
    font: 500 0.66rem/1.2 "Roboto", sans-serif;
}

.suggestion-image-previews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.suggestion-image-preview {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--panel-line-soft, rgba(100, 130, 190, 0.2));
    border-radius: 9px;
    background: var(--single-input-bg, #171b27);
}

.suggestion-image-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.suggestion-image-preview figcaption {
    overflow: hidden;
    padding: 0.38rem 0.48rem;
    color: var(--soft-text);
    font: 600 0.62rem/1.1 "Roboto", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-image-preview button {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: rgba(5, 7, 12, 0.82);
    color: #fff;
    box-shadow: none;
    cursor: pointer;
}

.suggestion-image-preview button svg {
    width: 0.9rem;
    height: 0.9rem;
}

.suggestion-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.suggestion-diagnostics-note {
    margin: -0.15rem 0 0;
    color: var(--soft-text);
    font: 600 0.68rem/1.35 "Roboto", sans-serif;
}

.suggestion-form-status {
    min-height: 1.1rem;
    margin: 0;
    color: var(--soft-text);
    font: 650 0.75rem/1.35 "Roboto", sans-serif;
}

.suggestion-form-status.is-error {
    color: #ff738a;
}

.suggestion-form-status.is-success {
    color: #58df9b;
}

.suggestion-form-status.is-working {
    color: var(--accent-bright, var(--theme-color));
}

.suggestion-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.suggestion-secondary-button,
.suggestion-primary-button {
    min-height: 2.7rem;
    padding: 0.68rem 1rem;
    border-radius: 9px;
    box-shadow: none;
    font: 800 0.78rem/1 "Roboto", sans-serif;
    cursor: pointer;
}

.suggestion-secondary-button {
    border: 1px solid var(--panel-line-soft, rgba(100, 130, 190, 0.22));
    background: var(--single-input-bg, #171b27);
    color: inherit;
}

.suggestion-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    border: 1px solid var(--accent-bright, var(--theme-color));
    background: var(--accent, var(--theme-color));
    color: #fff;
}

.suggestion-primary-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.suggestion-dialog-close:focus-visible,
.suggestion-secondary-button:focus-visible,
.suggestion-primary-button:focus-visible,
.suggestion-image-preview button:focus-visible {
    outline: 2px solid var(--accent-bright, var(--theme-color));
    outline-offset: 2px;
}

.light-mode .suggestion-dialog-overlay {
    background: rgba(18, 22, 34, 0.52);
}

@media (max-width: 560px) {
    .relation-gap-dependent-fields {
        margin-left: 0;
    }

    .suggestion-dialog-overlay {
        align-items: end;
        padding: 0.55rem;
    }

    .suggestion-dialog {
        max-height: calc(100dvh - 1.1rem);
        padding: 0.85rem;
        border-radius: 13px;
    }

    .suggestion-image-previews {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .suggestion-dialog-actions {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
    }

}

@media (prefers-reduced-motion: reduce) {
    .nice-secret-thumbnail,
    .nice-secret-message,
    .submit-suggestion-button {
        transition: none;
    }
}

/* Suggestion owner message notification */
.changelog-panel-actions {
    display: grid;
    gap: 0.5rem;
}

.suggestion-replies-indicator {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #f0a33b;
    box-shadow: none;
}

.suggestion-replies-dialog {
    width: min(520px, 100%);
}

.suggestion-replies-list {
    min-height: 1.5rem;
}

.suggestion-owner-message {
    display: grid;
    gap: 0.65rem;
    padding: 0.15rem 0 0.05rem;
}

.suggestion-owner-message p {
    margin: 0;
    overflow-wrap: anywhere;
    font: 500 0.9rem/1.55 "Roboto", sans-serif;
    white-space: pre-wrap;
}

.suggestion-owner-message time {
    color: var(--soft-text);
    font: 600 0.65rem/1.3 "Roboto", sans-serif;
}

.suggestion-reply-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 12600;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(360px, calc(100vw - 2rem));
    min-height: 2.9rem;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: 10px;
    outline: 0;
    background: var(--offcanvas-bg, #111119);
    color: inherit;
    box-shadow: none;
    font: 750 0.76rem/1.3 "Roboto", sans-serif;
    text-align: left;
    cursor: pointer;
}

.suggestion-reply-toast[hidden] {
    display: none !important;
}

.suggestion-reply-toast:hover,
.suggestion-reply-toast:focus,
.suggestion-reply-toast:focus-visible {
    border: 0;
    outline: 0;
    background: var(--offcanvas-bg, #111119);
    box-shadow: none;
    filter: none;
}

@media (max-width: 560px) {
    .suggestion-reply-toast {
        right: 0.55rem;
        bottom: 0.55rem;
        max-width: calc(100vw - 1.1rem);
    }
}

/* Final theme and alignment corrections. */
body:not(.original-v3-theme) .timer {
    border: 0;
    outline: 0;
}

.timer__bar {
    z-index: 0;
    border: 0;
    outline: 0;
}

.custom-time-info {
    inset: 0;
    z-index: 2;
    color: var(--text-color);
    pointer-events: none;
}

.progress-bar-vertical {
    isolation: isolate;
    box-sizing: border-box;
    border-radius: 0;
}

.progress-fill {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 100%;
    min-height: 0;
    border-radius: 0;
}

/* Result feedback: keep the banner and outline on the same border box so the
   side lines meet its square corners cleanly. */
.game-area.right::before,
.game-area.wrong::before,
.game-area.missed::before {
    box-sizing: border-box;
    width: calc(100% + 4px);
    left: -2px;
    border-bottom: 0;
    border-radius: 0;
    color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body:not(.original-v3-theme):not(.hide-feedback) .game-area.right {
    box-shadow: 0 0 7px rgba(40, 167, 69, 0.42) !important;
}

body:not(.original-v3-theme):not(.hide-feedback) .game-area.wrong {
    box-shadow: 0 0 7px rgba(220, 53, 69, 0.42) !important;
}

body:not(.original-v3-theme):not(.hide-feedback) .game-area.missed {
    box-shadow: 0 0 7px rgba(108, 117, 125, 0.38) !important;
}

/* Trial-result markers need more than the dark-theme 25% opacity against a
   light game surface. */
body.light-mode .progress-tracker {
    opacity: 0.82;
}

body.light-mode .trailing-dot::before {
    border-color: rgba(20, 31, 40, 0.48);
}

body.light-mode .trailing-dot.success::before {
    background-color: #0b9f3b;
}

body.light-mode .trailing-dot.fail::before {
    background-color: #d33c26;
}

.light-mode .progress-content,
.light-mode .progress-value {
    color: var(--label-color, var(--accent));
    text-shadow: none;
}

.light-mode .settings-menu-btn .btn-icon-wrap {
    border: 1px solid color-mix(in srgb, currentColor 38%, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, currentColor 12%, rgba(255, 255, 255, 0.7));
    filter: saturate(1.3) contrast(1.12);
    opacity: 1;
}

.light-mode .settings-menu-btn .btn-icon-wrap svg {
    stroke-width: 2.25;
}

.settings-menu-btn.nice-secret-btn,
.settings-menu-btn.nice-secret-btn:hover,
.settings-menu-btn.nice-secret-btn:focus,
.settings-menu-btn.nice-secret-btn:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.history-stats .stat-row,
.info-panel-body .mb-2,
.info-panel-body .inline-input__outer,
.info-panel-body ul.explainer,
.info-panel-body .symbol-category,
.info-panel-body .reference-image-grid img {
    border-radius: 0 !important;
}

#sidebar-settings .profile-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: stretch;
    min-height: 0;
    height: auto;
    gap: 0.35rem;
}

#sidebar-settings .profile-dropdown,
#sidebar-settings .profile-actions {
    width: 100%;
    min-width: 0;
}

.suggestion-field input:focus,
.suggestion-field textarea:focus,
.suggestion-image-picker:focus-within {
    outline: 0;
    outline-offset: 0;
    box-shadow: none;
}

/* Cyan remains a full palette in light mode without recoloring the
   independent timer progress cue. */
body.light-mode.cyan-preset:not(.original-v3-theme) {
    --accent-h: 188;
    --accent: #087f91;
    --accent-bright: #087f91;
    --accent-muted: #4c8f97;
    --accent-dim: #6b9da2;
    --accent-subtle: #c3e6e8;
    --accent-color: #087f91;
    --accent-rgb: 8, 127, 145;
    --accent-bg: rgba(8, 127, 145, 0.08);
    --accent-border: rgba(8, 127, 145, 0.24);
    --accent-hover: rgba(8, 127, 145, 0.14);
    --theme-color: #087f91;
    --text-color: #10282b;
    --display-label-color: #123a3f;
    --background-color: #dceff0;
    --body-gradient-start: #edfafa;
    --preamble-color: #53777b;
    --big-input-bg-color: #d5e9eacc;
    --small-input-bg-color: #f2fbfbcc;
    --offcanvas-fg: #10282b;
    --offcanvas-bg: radial-gradient(circle at top center, #f4fbfb 0%, #e3f2f3 62%, #d4e9ea 100%);
    --profile-bg: #eaf6f6;
    --profile-arrow-bg: #d0e7e8;
    --profile-border: 1px solid rgba(8, 127, 145, 0.24);
    --profile-select-bg: #eaf6f6;
    --profile-select-border: 1px solid rgba(8, 127, 145, 0.24);
    --multi-input-bg: #d7eaebcc;
    --single-input-bg: #e8f4f4cc;
    --spinner-bg: #f5fbfbcc;
    --folder-bg: #d6e9ea;
    --switch-background-color: #d1e6e7;
    --switch-unselected-color: #f8ffff;
    --switch-selected-color: #087f91;
    --switch-border-color: rgba(8, 127, 145, 0.28);
    --switch-border-checked-color: rgba(8, 127, 145, 0.72);
    --linear-settings-background-color: #dceced;
    --select-background-color: #e6f3f3;
    --background-image-bg-color: #e8f6f6;
    --background-brightness: 0.78;
    --label-background-color: #f4fbfbe8;
    --label-color: #087f91;
    --overlay-background-color: #b9dfe1;
    --three-d-background: rgba(220, 239, 240, 0.96);
    --inline-input-bg-color: #e8f4f4;
    --bg-dark: #dceff0;
    --bg-card: #edf7f7;
    --bg-panel: #d1e6e7;
    --text-secondary: #52777b;
    --panel-line: rgba(8, 127, 145, 0.24);
    --panel-line-soft: rgba(8, 127, 145, 0.14);
    --panel-glass: rgba(255, 255, 255, 0.58);
    --panel-glass-strong: rgba(255, 255, 255, 0.76);
    --soft-text: rgba(16, 40, 43, 0.68);
    color: #10282b;
    color-scheme: light;
    background: #dceff0 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .main-view {
    border-color: rgba(8, 127, 145, 0.22) !important;
    background: radial-gradient(circle at 50% 48%, #f0fafa 0%, #dceff0 68%, #cde5e6 100%) !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .game-area {
    background: #d0e9eacc !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .timer-wrap {
    background: rgba(220, 239, 240, 0.92) !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .timer,
body.light-mode.cyan-preset:not(.original-v3-theme) .timer-controls {
    border-color: rgba(8, 127, 145, 0.16) !important;
    background: rgba(246, 252, 252, 0.72) !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .offcanvas,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-popup {
    color: #10282b !important;
    background: var(--offcanvas-bg) !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .graph-popup-content,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-summary-card,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-controls,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-end-controls,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-range-controls {
    border-color: var(--panel-line-soft) !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

/* Theme-boundary and color-harmony corrections.
   Rounded cards belong to the default skin; Original v3 keeps its square UI. */
.original-palette-option {
    display: none;
}

body.original-v3-theme .original-palette-option {
    display: block;
}

body:not(.original-v3-theme) .history-stats .stat-row,
body:not(.original-v3-theme) .info-panel-body .mb-2,
body:not(.original-v3-theme) .info-panel-body .inline-input__outer,
body:not(.original-v3-theme) .info-panel-body ul.explainer,
body:not(.original-v3-theme) .info-panel-body .symbol-category,
body:not(.original-v3-theme) .info-panel-body .reference-image-grid img {
    border-radius: 8px !important;
}

body:not(.original-v3-theme) #history-list > div,
body:not(.original-v3-theme) .history-filter-rail {
    border-radius: 10px;
}

/* The timer sits directly below the square result banner. Keep every clipping
   layer straight so the feedback outline cannot curve at the join. */
body:not(.original-v3-theme):not(.focus-layout) .timer-wrap {
    overflow: clip;
    border-radius: 0;
}

body:not(.original-v3-theme) .timer {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-color, #3377ff) 24%, rgba(20, 28, 42, 0.34));
    border-radius: 0;
    outline: 0;
}

body:not(.original-v3-theme) .timer__bar {
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(8, 18, 32, 0.16);
}

/* Suggestion entry point follows each theme instead of mixing every accent
   with a hard-coded dark surface. */
body:not(.original-v3-theme) .changelog-panel-actions {
    background: var(--offcanvas-bg, var(--background-color));
}

body:not(.original-v3-theme) .submit-suggestion-button {
    border: 0;
    background: color-mix(in srgb, var(--single-input-bg, #171b27) 82%, var(--accent-color, #3377ff) 18%);
    color: var(--text-color);
}

body:not(.original-v3-theme) .submit-suggestion-button:hover {
    background: color-mix(in srgb, var(--single-input-bg, #171b27) 72%, var(--accent-color, #3377ff) 28%);
}

body:not(.original-v3-theme) .submit-suggestion-icon {
    background: color-mix(in srgb, var(--accent-color, #3377ff) 14%, var(--single-input-bg, #171b27));
    color: var(--accent-bright, var(--accent-color, #3377ff));
}

body.light-mode:not(.original-v3-theme) .submit-suggestion-button {
    background: color-mix(in srgb, var(--accent-color, #3377ff) 12%, #eef2f6);
    color: #19252f;
}

body.light-mode:not(.original-v3-theme) .submit-suggestion-button:hover {
    background: color-mix(in srgb, var(--accent-color, #3377ff) 19%, #e9eef3);
}

body.light-mode:not(.original-v3-theme) .submit-suggestion-icon {
    background: color-mix(in srgb, var(--accent-color, #3377ff) 13%, #f8fbfd);
    color: color-mix(in srgb, var(--accent-color, #3377ff) 82%, #183044);
}

body.light-mode:not(.original-v3-theme) .suggestion-dialog,
body.light-mode:not(.original-v3-theme) .suggestion-field input,
body.light-mode:not(.original-v3-theme) .suggestion-field textarea,
body.light-mode:not(.original-v3-theme) .suggestion-image-picker,
body.light-mode:not(.original-v3-theme) .suggestion-secondary-button {
    color: var(--text-color);
    border-color: var(--panel-line-soft);
    background: #f4f7f9;
}

/* A quieter cyan-light palette: cyan stays identifiable without a dark teal
   island inside an otherwise light page. */
body.light-mode.cyan-preset:not(.original-v3-theme) {
    --background-color: #e5f0f1;
    --body-gradient-start: #f3f8f8;
    --big-input-bg-color: #dcebec;
    --small-input-bg-color: #f5f9f9;
    --offcanvas-bg: #eef6f6;
    --profile-bg: #edf6f6;
    --profile-arrow-bg: #d9e9ea;
    --multi-input-bg: #dcebec;
    --single-input-bg: #edf5f5;
    --folder-bg: #dbeaec;
    --linear-settings-background-color: #e1eeee;
    --select-background-color: #f1f7f7;
    --background-image-bg-color: #e5f0f1;
    --overlay-background-color: #a7d2d5;
    --three-d-background: rgba(229, 240, 241, 0.97);
    --inline-input-bg-color: #f2f8f8;
    --bg-dark: #e5f0f1;
    --bg-card: #f3f8f8;
    --bg-panel: #dcebec;
    background: #e5f0f1 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .main-view {
    border-color: rgba(8, 127, 145, 0.22) !important;
    background: #dcebed !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .background-image {
    background-color: #e5f0f1 !important;
    filter: none;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .overlay {
    background: #94c5c9 !important;
    opacity: 0.12;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .game-area {
    background: #edf5f5 !important;
    box-shadow: 0 5px 18px rgba(37, 78, 82, 0.13);
}

body.light-mode.cyan-preset:not(.original-v3-theme) .timer-wrap {
    background: transparent !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .timer,
body.light-mode.cyan-preset:not(.original-v3-theme) .timer-controls {
    color: #10282b;
    border-color: rgba(8, 127, 145, 0.20) !important;
    background: #f7fbfb !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .changelog-panel-actions {
    background: #eef6f6;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .submit-suggestion-button {
    background: #d5e8e9;
    color: #12363a;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .submit-suggestion-button:hover {
    background: #c9e1e3;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .submit-suggestion-icon {
    background: #edf7f7;
    color: #087f91;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .suggestion-dialog,
body.light-mode.cyan-preset:not(.original-v3-theme) .suggestion-field input,
body.light-mode.cyan-preset:not(.original-v3-theme) .suggestion-field textarea,
body.light-mode.cyan-preset:not(.original-v3-theme) .suggestion-image-picker,
body.light-mode.cyan-preset:not(.original-v3-theme) .suggestion-secondary-button {
    color: #10282b;
    border-color: rgba(8, 127, 145, 0.20);
    background: #f3f9f9;
}

/* Cyan-light v2: carry cyan through Settings and History while keeping every
   nested surface light. */
body.light-mode.cyan-preset:not(.original-v3-theme) {
    --background-color: #d4eaec;
    --body-gradient-start: #e8f6f7;
    --big-input-bg-color: #cce5e7;
    --small-input-bg-color: #eaf5f6;
    --offcanvas-bg: #e6f4f5;
    --profile-bg: #c8e3e5;
    --profile-arrow-bg: #b4d7da;
    --profile-select-bg: #e7f4f5;
    --multi-input-bg: #d8ebed;
    --single-input-bg: #e8f4f5;
    --spinner-bg: #f0f8f8;
    --folder-bg: #b9dade;
    --linear-settings-background-color: #d2e8ea;
    --select-background-color: #edf7f7;
    --background-image-bg-color: #d4eaec;
    --overlay-background-color: #68b1b8;
    --three-d-background: rgba(212, 234, 236, 0.97);
    --inline-input-bg-color: #edf7f7;
    --bg-dark: #d4eaec;
    --bg-card: #eaf5f6;
    --bg-panel: #c8e3e5;
    --panel-glass: #d5eaec;
    --panel-glass-strong: #c8e3e5;
    background: #d4eaec !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .main-view {
    background: #c1dfe2 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .background-image {
    background-color: #d4eaec !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .overlay {
    background: #68b1b8 !important;
    opacity: 0.15;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .offcanvas,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-popup {
    background: #e6f4f5 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .mb-1,
body.light-mode.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .mb-2,
body.light-mode.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .folder,
body.light-mode.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .multi-input,
body.light-mode.cyan-preset:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .ctrl__inner,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .profile-container {
    border-color: rgba(8, 127, 145, 0.25) !important;
    background: #c8e3e5 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .mb-1,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .mb-1:hover,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .multi-input,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .inline-input__outer,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .single-input {
    border-color: rgba(8, 127, 145, 0.18) !important;
    background: #dceef0 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .profile-dropdown,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .profile-input,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .profile-plus,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .profile-export,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings .profile-import,
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings input:not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.light-mode.cyan-preset:not(.original-v3-theme) #sidebar-settings select {
    color: #10282b !important;
    border-color: rgba(8, 127, 145, 0.26) !important;
    background: #edf7f7 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .history-filter-rail {
    border-color: rgba(8, 127, 145, 0.24) !important;
    background: #c8e3e5 !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .history-filter-btn:hover {
    color: #10282b;
    background: #b7dadd !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .history-filter-btn.selected {
    color: #10282b;
    background: #acd3d7 !important;
    box-shadow: none;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .history-stats .stat-row,
body.light-mode.cyan-preset:not(.original-v3-theme) .info-panel-body .mb-2,
body.light-mode.cyan-preset:not(.original-v3-theme) .info-panel-body .inline-input__outer,
body.light-mode.cyan-preset:not(.original-v3-theme) .info-panel-body ul.explainer,
body.light-mode.cyan-preset:not(.original-v3-theme) .info-panel-body .symbol-category {
    border-color: rgba(8, 127, 145, 0.18) !important;
    background: #d9edef !important;
}

/* Clear Session is the action itself; its container must not create another
   dark or tinted bar behind it. */
.history-footer,
body.cyan-preset:not(.original-v3-theme) .history-footer,
body.light-mode.cyan-preset:not(.original-v3-theme) .history-footer {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Shared-profile confirmation follows the active application palette.
   Default keeps a rounded-square card; Original v3 stays flat and square. */
.custom-modal-overlay {
    background: rgba(4, 7, 12, 0.64);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.custom-modal {
    width: min(360px, calc(100vw - 1.5rem));
    max-width: none;
    padding: 1.1rem;
    gap: 0.8rem;
    border: 1px solid var(--panel-line, rgba(var(--accent-rgb, 51, 119, 255), 0.28));
    border-radius: 12px;
    background: var(--bg-card, #111722);
    color: var(--text-color, #fff);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.custom-modal-icon {
    color: var(--accent-bright, var(--theme-color, #3377ff));
    opacity: 1;
}

.custom-modal-icon svg {
    width: 2rem;
    height: 2rem;
}

.custom-modal-message {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    color: inherit;
    font-family: var(--ui-font-family, "Roboto", sans-serif);
    line-height: 1.45;
    white-space: pre-line;
}

.custom-modal-title {
    color: inherit;
    font-size: var(--step--1);
    font-weight: 750;
    line-height: 1.25;
}

.custom-modal-message > span {
    color: var(--soft-text, rgba(255, 255, 255, 0.68));
}

.custom-modal-buttons {
    gap: 0.55rem;
}

.custom-modal-buttons button {
    min-height: 2.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-family: var(--ui-font-family, "Roboto", sans-serif);
    font-size: var(--step--2);
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: none;
}

.custom-modal-buttons .modal-btn-cancel,
.custom-modal-buttons .modal-btn-ok {
    border-color: var(--panel-line-soft, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--bg-panel, #1a2230) 88%, transparent);
    color: inherit;
}

.custom-modal-buttons .modal-btn-cancel:hover,
.custom-modal-buttons .modal-btn-ok:hover {
    border-color: var(--panel-line, rgba(var(--accent-rgb, 51, 119, 255), 0.30));
    background: color-mix(in srgb, var(--bg-panel, #1a2230) 78%, var(--theme-color, #3377ff) 22%);
}

.custom-modal-buttons .modal-btn-confirm {
    border-color: color-mix(in srgb, var(--theme-color, #3377ff) 54%, transparent);
    background: color-mix(in srgb, var(--theme-color, #3377ff) 22%, var(--bg-card, #111722));
    color: var(--accent-bright, #7da6ff);
}

.custom-modal-buttons .modal-btn-confirm:hover {
    border-color: color-mix(in srgb, var(--theme-color, #3377ff) 72%, transparent);
    background: color-mix(in srgb, var(--theme-color, #3377ff) 30%, var(--bg-card, #111722));
}

body.light-mode .custom-modal {
    border-color: var(--panel-line, rgba(var(--accent-rgb, 51, 119, 255), 0.24));
    background: var(--bg-card, #f3f6f8);
    color: var(--text-color, #17222d);
}

body.light-mode .custom-modal-message > span {
    color: var(--soft-text, rgba(23, 34, 45, 0.68));
}

body.light-mode .custom-modal-buttons .modal-btn-cancel,
body.light-mode .custom-modal-buttons .modal-btn-ok {
    background: color-mix(in srgb, var(--bg-panel, #dfe6eb) 86%, #fff);
}

body.light-mode .custom-modal-buttons .modal-btn-confirm {
    background: color-mix(in srgb, var(--theme-color, #3377ff) 16%, #f7fafc);
    color: color-mix(in srgb, var(--theme-color, #3377ff) 78%, #17222d);
}

body.light-mode.cyan-preset:not(.original-v3-theme) .custom-modal {
    border-color: rgba(8, 127, 145, 0.25) !important;
    background: #eaf5f6 !important;
    color: #10282b !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .custom-modal-message > span {
    color: rgba(16, 40, 43, 0.68);
}

body.light-mode.cyan-preset:not(.original-v3-theme) .custom-modal-buttons .modal-btn-cancel,
body.light-mode.cyan-preset:not(.original-v3-theme) .custom-modal-buttons .modal-btn-ok {
    border-color: rgba(8, 127, 145, 0.18);
    background: #d8ebed;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .custom-modal-buttons .modal-btn-confirm {
    border-color: rgba(8, 127, 145, 0.45);
    background: #c8e3e5;
    color: #087f91;
}

body.original-v3-theme .custom-modal {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--theme-color, #eddb7e) 36%, #333);
    background: #090909;
    color: #f2f2ef;
    font-family: "Espionage", sans-serif;
}

body.original-v3-theme .custom-modal-message,
body.original-v3-theme .custom-modal-buttons button {
    font-family: "Espionage", sans-serif;
}

body.original-v3-theme .custom-modal-buttons button {
    border-radius: 0;
}

body.original-v3-theme.light-mode .custom-modal {
    border-color: color-mix(in srgb, var(--theme-color, #eddb7e) 42%, #aeb9bb);
    background: #f1f5f5;
    color: #172326;
}

body.original-v3-theme.light-mode .custom-modal-message > span {
    color: rgba(23, 35, 38, 0.66);
}

body.original-v3-theme.light-mode.cyan-preset .custom-modal {
    border-color: #86bfc4;
    background: #e7f3f4;
    color: #10282b;
}

body.original-v3-theme.light-mode.cyan-preset .custom-modal-buttons .modal-btn-cancel,
body.original-v3-theme.light-mode.cyan-preset .custom-modal-buttons .modal-btn-ok {
    border-color: #a9d1d4;
    background: #d6eaec;
}

body.original-v3-theme.light-mode.cyan-preset .custom-modal-buttons .modal-btn-confirm {
    border-color: #75b3b9;
    background: #c8e3e5;
    color: #087f91;
}

/* Per-mode presentation overrides shown directly beneath each mode toggle. */
.mode-minimal-override,
.mode-wide-override {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 0.45rem 0 0.7rem 2rem;
    color: var(--soft-text, #b8c2ca);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.3;
    cursor: pointer;
}

.mode-minimal-override[hidden],
.mode-wide-override[hidden] {
    display: none !important;
}

.mode-minimal-override input[type="checkbox"],
.mode-wide-override input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--accent-bright, var(--theme-color, #35d5e8));
}

.mode-minimal-override span,
.mode-wide-override span {
    min-width: 0;
}

@media (max-width: 560px) {
    .mode-minimal-override,
    .mode-wide-override {
        max-width: calc(100% - 1rem);
        margin-left: 1rem;
    }
}

/* Per-mode Wide opt-outs inside Binary/Binary Analogy stay local to that
   source. The compound question keeps a stable Wide card while an opted-out
   source uses the ordinary compact relation layout. */
.display_text.wide-premises .binary-source-no-wide .formatted-premise {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.display_text.wide-premises.minimal .binary-source-no-wide .formatted-premise,
.display_text.wide-premises.half-minimal
    .binary-source-no-wide .formatted-premise.minimal-style {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: center;
    gap: clamp(0.35rem, 2vw, 0.8rem);
}

.display_text.wide-premises.minimal
    .binary-source-no-wide .formatted-premise > span:nth-child(1),
.display_text.wide-premises.half-minimal
    .binary-source-no-wide .formatted-premise.minimal-style > span:nth-child(1) {
    justify-self: end;
}

.display_text.wide-premises.minimal
    .binary-source-no-wide .formatted-premise > span:nth-child(2),
.display_text.wide-premises.half-minimal
    .binary-source-no-wide .formatted-premise.minimal-style > span:nth-child(2) {
    justify-self: center;
}

.display_text.wide-premises.minimal
    .binary-source-no-wide .formatted-premise > span:nth-child(3),
.display_text.wide-premises.half-minimal
    .binary-source-no-wide .formatted-premise.minimal-style > span:nth-child(3) {
    justify-self: start;
}

@media (max-width: 700px) {
    /* Prevent the question card from changing between content-width and
       viewport-width when different Binary sources opt out of Wide. */
    .game-area.wide-premises {
        width: calc(100vw - 3rem);
        max-width: calc(100vw - 3rem);
        min-width: 0;
        box-sizing: border-box;
    }

    .display_text.wide-premises .binary-source-no-wide .formatted-premise {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Keep the edge navigation compact on short notebook displays without
   overriding the dedicated mobile layout. */
@media (min-width: 769px) and (max-height: 900px) {
    label.open.side-btn-reveal {
        font-size: clamp(0.72rem, 1.8vh, var(--step-0));
    }

    body:not(.side-tabs-floating) label.open.side-btn-reveal {
        padding: clamp(0.45rem, 1.2vh, 0.8rem)
            clamp(0.9rem, 2.5vh, 1.8rem);
    }

    body.side-tabs-floating label.open.side-btn-reveal {
        padding: clamp(0.4rem, 1vh, 0.6rem)
            clamp(0.45rem, 1.4vh, 0.7rem);
    }
}

/* Final interaction and surface pass.
   Close controls are plain glyphs centered inside their edge gutter. */
.offcanvas .offcanvas-side {
    position: relative;
    flex: 0 0 2.5rem;
    width: 2.5rem;
}

.offcanvas .offcanvas-close {
    position: absolute;
    top: 0.5rem;
    right: auto !important;
    left: 50% !important;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text-color);
    box-shadow: none !important;
    opacity: 0.72;
    transform: translateX(-50%) !important;
    transition: color 160ms ease, opacity 160ms ease;
    touch-action: manipulation;
}

.offcanvas .offcanvas-close:hover,
.offcanvas .offcanvas-close:focus,
.offcanvas .offcanvas-close:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--accent-bright, var(--theme-color, #3377ff));
    box-shadow: none !important;
    opacity: 1;
    transform: translateX(-50%) !important;
}

.section-nav-bar .offcanvas-side {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 80;
    width: 3rem;
    height: 64px;
    background: var(--offcanvas-bg);
}

.section-nav-bar .offcanvas-close {
    top: 50%;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.section-nav-bar .offcanvas-close:hover,
.section-nav-bar .offcanvas-close:focus,
.section-nav-bar .offcanvas-close:focus-visible {
    transform: translate(-50%, -50%) !important;
}

/* Default edge tabs use a quiet animated outline. Their fill does not flash. */
body:not(.original-v3-theme) label.open.side-btn-reveal {
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition:
        outline-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        opacity 220ms ease;
}

body:not(.original-v3-theme) label.open.side-btn-reveal:hover,
body:not(.original-v3-theme) label.open.side-btn-reveal:focus-visible {
    outline-color: color-mix(in srgb, var(--theme-color, #3377ff) 52%, transparent);
    background: var(--label-background-color);
    box-shadow: 0 0 7px color-mix(in srgb, var(--theme-color, #3377ff) 22%, transparent) !important;
    text-shadow: none !important;
    filter: none !important;
}

/* INFO opens from the left like SETTINGS, so its close gutter belongs on the
   panel's inner (right) edge as well. */
#sidebar-credits .offcanvas-body {
    order: 1;
}

#sidebar-credits .offcanvas-side {
    order: 2;
}

/* Focus Layout keeps the compact card, but restores the real horizontal
   countdown bar. The result trail sits below the answer buttons. */
body.focus-layout .timer-wrap {
    position: relative !important;
    inset: auto !important;
    z-index: 20;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 0.2rem !important;
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
}

body.focus-layout .timer {
    display: block !important;
    width: 100% !important;
}

body.focus-layout .timer-controls,
body.focus-layout .focus-timer-readout {
    display: none !important;
}

body.focus-layout #progress-tracker.progress-tracker {
    bottom: auto !important;
    left: 5%;
    width: 90%;
    height: 7px;
    margin: 0.55rem 0 0.1rem;
}

/* Filled surfaces provide grouping on their own; reserve outlines for inputs,
   focus, and state instead of tracing every background card. */
body:not(.original-v3-theme) .offcanvas,
body:not(.original-v3-theme) .offcanvas--left,
body:not(.original-v3-theme) .offcanvas--right,
body:not(.original-v3-theme) .settings-menu-btn,
body:not(.original-v3-theme) .settings-section.active .settings-section-content > .mb-1,
body:not(.original-v3-theme) .settings-section.active .settings-section-content > .mb-2,
body:not(.original-v3-theme) .settings-section.active .settings-section-content > .folder,
body:not(.original-v3-theme) .settings-section.active .settings-section-content > .multi-input,
body:not(.original-v3-theme) .settings-section.active .settings-section-content > .ctrl__inner,
body:not(.original-v3-theme) #sidebar-settings .profile-container,
body:not(.original-v3-theme) .history-filter-rail,
body:not(.original-v3-theme) .history-stats .stat-row,
body:not(.original-v3-theme) .info-panel-body .mb-2,
body:not(.original-v3-theme) .info-panel-body .inline-input__outer,
body:not(.original-v3-theme) .info-panel-body ul.explainer,
body:not(.original-v3-theme) .info-panel-body .symbol-category {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Light settings navigation keeps each category color and reveals it as a
   restrained gradient on hover. Icons use contrast, not outlined tiles. */
body.light-mode:not(.original-v3-theme)
    #sidebar-settings:not(.section-nav-bar) .settings-menu-btn[data-section] {
    border-color: transparent !important;
    background: linear-gradient(
        110deg,
        color-mix(in srgb, var(--btn-accent) 5%, #eef1f6),
        color-mix(in srgb, var(--btn-accent) 2%, #e4e8ef)
    );
}

body.light-mode:not(.original-v3-theme)
    #sidebar-settings:not(.section-nav-bar) .settings-menu-btn[data-section]:hover,
body.light-mode:not(.original-v3-theme)
    #sidebar-settings:not(.section-nav-bar) .settings-menu-btn[data-section]:focus-visible,
body.light-mode:not(.original-v3-theme)
    #sidebar-settings:not(.section-nav-bar) .settings-menu-btn[data-section][data-active] {
    border-color: transparent !important;
    background: linear-gradient(
        110deg,
        color-mix(in srgb, var(--btn-accent) 19%, #f4f6f9),
        color-mix(in srgb, var(--btn-accent) 7%, #e4e8ef)
    );
    box-shadow: none !important;
}

body.light-mode:not(.original-v3-theme) .settings-menu-btn .btn-icon-wrap {
    border: 0 !important;
    outline: 0 !important;
    background: color-mix(in srgb, currentColor 16%, rgba(255, 255, 255, 0.82));
    filter: saturate(1.5) contrast(1.18);
}

body.light-mode:not(.original-v3-theme) .settings-menu-btn .btn-icon-wrap svg {
    stroke-width: 2.35;
}

/* The label is printed over a colored countdown bar in every palette. */
.custom-time-info,
body.light-mode .custom-time-info {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.68);
}

@media (max-width: 768px) {
    /* The game card wins overlap conflicts; exposed portions of the edge tabs
       remain clickable outside it. */
    .game-area {
        z-index: 2;
    }

    label.open.side-btn-reveal {
        z-index: 1 !important;
    }

    /* Binary Analogy can grow to the full narrow viewport and cover the edge
       tabs' hit boxes. Raise only those tabs while this trial is present; all
       other mobile modes keep the intentionally low-profile tab layering. */
    body:has(.display_text[data-question-type="binary-analogy"])
        label.open.side-btn-reveal {
        z-index: 3 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .offcanvas {
        z-index: 1000;
    }

    #sidebar-settings .offcanvas-side {
        z-index: 1001;
        pointer-events: auto;
    }

    #sidebar-settings .offcanvas-close {
        pointer-events: auto;
    }
}

/* Surface harmony and final outline cleanup.
   Cyan + dark is the reference palette: soft separation comes from adjacent
   fills, while borders stay reserved for real controls and focus states. */
body:not(.original-v3-theme) {
    --ui-shell-soft: color-mix(
        in srgb,
        var(--background-color, #0b1018) 92%,
        var(--theme-color, #3377ff) 8%
    );
    --ui-card-soft: color-mix(
        in srgb,
        var(--single-input-bg, #171d27) 94%,
        var(--theme-color, #3377ff) 6%
    );
    --ui-card-raised: color-mix(
        in srgb,
        var(--single-input-bg, #171d27) 88%,
        var(--theme-color, #3377ff) 12%
    );
}

body.light-mode:not(.original-v3-theme) {
    --ui-shell-soft: color-mix(in srgb, #edf3f4 96%, var(--theme-color, #3377ff) 4%);
    --ui-card-soft: color-mix(in srgb, #f6f8f9 97%, var(--theme-color, #3377ff) 3%);
    --ui-card-raised: color-mix(in srgb, #edf2f3 94%, var(--theme-color, #3377ff) 6%);
}

/* Nested Experimental controls do not need extra frames. The option cards
   themselves inherit the same .mb-1 surface as Content and Game Modes. */
#experimental-folder-content,
#experimental-folder-content .multi-input,
#experimental-folder-content .single-input,
#experimental-folder-content ul.explainer,
#experimental-folder-content div[style*="margin-left: 2rem"] {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#experimental-folder-content div[style*="margin-left: 2rem"] {
    border-left: 0 !important;
}

#experimental-folder-content .multi-input,
#experimental-folder-content .single-input,
#experimental-folder-content ul.explainer {
    background: transparent !important;
}

body.light-mode:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .mb-1,
body.light-mode:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .mb-2,
body.light-mode:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .folder,
body.light-mode:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .multi-input,
body.light-mode:not(.original-v3-theme)
    .settings-section.active .settings-section-content > .ctrl__inner,
body.light-mode:not(.original-v3-theme)
    #advanced-section #experimental-folder-content > .mb-1,
body.light-mode:not(.original-v3-theme)
    #advanced-section #legacy-folder-content > .mb-1,
body.light-mode:not(.original-v3-theme)
    .history-stats .stat-row,
body.light-mode:not(.original-v3-theme)
    .history-filter-rail {
    border-color: transparent !important;
    background: var(--ui-card-soft) !important;
    box-shadow: none !important;
}

/* Light history uses the same calm paper surfaces as Info. Correctness is
   still visible as a very light tint instead of a dark trial slab. */
body.light-mode:not(.original-v3-theme) #history-list > .hqli,
body.light-mode:not(.original-v3-theme) #history-list > div {
    border: 0 !important;
    background: var(--ui-card-soft) !important;
    box-shadow: none !important;
}

body.light-mode:not(.original-v3-theme) #history-list .hqli .inner {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.light-mode:not(.original-v3-theme) #history-list .hqli--right .inner {
    background: color-mix(in srgb, var(--correct-color, #13a850) 7%, var(--ui-card-soft)) !important;
}

body.light-mode:not(.original-v3-theme) #history-list .hqli--wrong .inner {
    background: color-mix(in srgb, var(--wrong-color, #c9183a) 7%, var(--ui-card-soft)) !important;
}

/* Graph: controls remain legible by fill and spacing; the graph no longer
   looks like a stack of outlined cards. */
.graph-popup,
.graph-range-controls,
.graph-summary-card,
.graph-controls,
.graph-popup-content,
.graph-end-controls,
.graph-series-key {
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.graph-popup {
    background: var(--ui-shell-soft, #0f151e) !important;
}

.graph-range-controls,
.graph-controls {
    background: color-mix(in srgb, var(--ui-card-soft, #111822) 78%, transparent) !important;
}

.graph-summary-card,
.graph-popup-content {
    background: var(--ui-card-soft, #151c27) !important;
}

.graph-series-key {
    background: color-mix(in srgb, var(--ui-card-raised, #192437) 74%, transparent) !important;
}

.graph-range-select,
.graph-select,
.graph-range-select:hover,
.graph-range-select:focus-visible,
.graph-range-select.selected,
.graph-select:hover,
.graph-select:focus-visible,
.graph-select.selected,
.graph-select.selected:hover {
    border-color: transparent !important;
}

#graph-close-popup.graph-close-popup {
    border-color: transparent !important;
}

body.light-mode:not(.original-v3-theme) .graph-popup {
    background: var(--ui-shell-soft) !important;
}

body.light-mode:not(.original-v3-theme) .graph-range-controls,
body.light-mode:not(.original-v3-theme) .graph-controls {
    background: var(--ui-card-raised) !important;
}

body.light-mode:not(.original-v3-theme) .graph-summary-card,
body.light-mode:not(.original-v3-theme) .graph-popup-content,
body.light-mode:not(.original-v3-theme) .graph-series-key {
    background: var(--ui-card-soft) !important;
}

/* Changelog articles and the dialog shell are backgrounds, not controls.
   Their descendants keep their own input and picker boundaries. */
#sidebar-changelog .changelog-item {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.suggestion-dialog {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Anchor Space's pattern action now reads like a normal compact command. */
.anchor-pattern-refresh-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.anchor-pattern-refresh {
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: 7px;
    background: var(--ui-card-raised, var(--single-input-bg, #171d27));
    color: var(--text-color);
    box-shadow: none;
    font: 750 var(--step--2, 0.8rem)/1 var(--ui-font-family, "Roboto", sans-serif);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.anchor-pattern-refresh:hover,
.anchor-pattern-refresh:focus-visible {
    outline: 0;
    background: color-mix(
        in srgb,
        var(--ui-card-raised, var(--single-input-bg, #171d27)) 76%,
        var(--theme-color, #3377ff) 24%
    );
    color: var(--accent-bright, var(--theme-color, #3377ff));
}

.anchor-pattern-refresh-help {
    color: var(--soft-text);
    font: 500 var(--step--3, 0.72rem)/1.35 var(--ui-font-family, "Roboto", sans-serif);
}

body.light-mode:not(.original-v3-theme) .anchor-pattern-refresh {
    background: var(--ui-card-raised);
}

/* The Focus timer is a direct mouse/touch/keyboard control. */
body.focus-layout .timer {
    cursor: pointer;
    touch-action: manipulation;
}

body.focus-layout .timer:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px color-mix(
        in srgb,
        var(--theme-color, #3377ff) 62%,
        transparent
    );
}

@media (max-width: 560px) {
    .anchor-pattern-refresh-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}

/* Ultra-flat controls and Advanced settings.
   Enabled switches use a restrained theme-tinted rail, without glow. */
.switch,
.switch:hover,
.switch:focus,
.switch:focus-visible,
input[type="checkbox"]:checked + .switch {
    border-color: var(--switch-border-color) !important;
    background: color-mix(
        in oklab,
        var(--switch-background-color) 88%,
        black 12%
    ) !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.switch::after,
input[type="checkbox"]:checked + .switch::after {
    box-shadow: none !important;
}

input[type="checkbox"]:checked + .switch {
    background: color-mix(
        in oklab,
        var(--switch-background-color) 82%,
        var(--theme-color, #3377ff) 18%
    ) !important;
}

/* Experimental and Legacy are one continuous, always-visible Advanced list. */
#advanced-section #experimental-folder-content,
#advanced-section #legacy-folder-content,
#advanced-section .folder-content,
#advanced-section .legacy-folder-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

#advanced-section .folder,
#advanced-section .legacy-folder-toggle {
    display: none !important;
}

#advanced-section #legacy-folder-content {
    margin-top: 0.65rem !important;
}

#advanced-section #experimental-folder-content > .mb-1,
#advanced-section #legacy-folder-content > .mb-1,
#advanced-section #experimental-folder-content > .mb-1:hover,
#advanced-section #legacy-folder-content > .mb-1:hover {
    border: 0 !important;
    outline: 0 !important;
}

#advanced-section #experimental-folder-content .multi-input,
#advanced-section #legacy-folder-content .multi-input,
#advanced-section #experimental-folder-content .single-input,
#advanced-section #legacy-folder-content .single-input,
#advanced-section #experimental-folder-content ul.explainer,
#advanced-section #legacy-folder-content ul.explainer,
#advanced-section #experimental-folder-content div[style*="margin-left: 2rem"],
#advanced-section #legacy-folder-content div[style*="margin-left: 2rem"] {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Confirmation, alert, suggestion, and update overlays share one restrained
   blur. Their dialog surfaces are frameless; controls remain readable by fill. */
.custom-modal-overlay,
.suggestion-dialog-overlay,
.changelog-overlay {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.custom-modal {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.custom-modal-buttons button,
.custom-modal-buttons button:hover,
.custom-modal-buttons button:focus,
.custom-modal-buttons button:focus-visible,
.custom-modal-buttons button:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.custom-modal-buttons .modal-btn-cancel,
.custom-modal-buttons .modal-btn-ok {
    background: var(--ui-card-raised, var(--bg-panel, #1a2230)) !important;
    color: var(--text-color) !important;
}

.custom-modal-buttons .modal-btn-cancel:hover,
.custom-modal-buttons .modal-btn-ok:hover {
    background: color-mix(
        in srgb,
        var(--ui-card-raised, var(--bg-panel, #1a2230)) 88%,
        white 12%
    ) !important;
}

.custom-modal[data-tone="danger"] .custom-modal-icon {
    color: #ee5269 !important;
}

.custom-modal[data-tone="danger"] .modal-btn-confirm {
    background: #b5263f !important;
    color: #fff !important;
}

.custom-modal[data-tone="danger"] .modal-btn-confirm:hover {
    background: #c92e49 !important;
}

.custom-modal:not([data-tone="danger"]) .modal-btn-confirm {
    background: var(--theme-color, #3377ff) !important;
    color: #fff !important;
}

.custom-modal:not([data-tone="danger"]) .modal-btn-confirm:hover {
    background: color-mix(
        in srgb,
        var(--theme-color, #3377ff) 86%,
        white 14%
    ) !important;
}

/* History actions use fill instead of outlined button frames. */
.hqli-trial-actions button,
.hqli-trial-actions button:hover,
.hqli-trial-actions button:focus,
.hqli-trial-actions button:focus-visible,
.hqli-trial-actions button:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.hqli-trial-actions .delete,
.hqli-trial-actions .delete:hover,
.hqli-trial-actions .delete:focus,
.hqli-trial-actions .delete:focus-visible,
.hqli-trial-actions .delete:active {
    border: 0 !important;
    outline: 0 !important;
    background: #b5263f !important;
    color: #fff !important;
    box-shadow: none !important;
}

.hqli-trial-actions .delete {
    display: grid !important;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    place-items: center;
    padding: 0 !important;
}

.hqli-trial-actions .delete svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
}

.clear-history-btn,
.clear-history-btn:hover,
.clear-history-btn:focus,
.clear-history-btn:focus-visible,
.clear-history-btn:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Stronger state fills keep light history as readable as dark history without
   reintroducing a card outline. */
body.light-mode:not(.original-v3-theme) #history-list > .hqli.hqli--right,
body.light-mode:not(.original-v3-theme) #history-list > .hqli.hqli--right .inner {
    background: #c9e7d2 !important;
}

body.light-mode:not(.original-v3-theme) #history-list > .hqli.hqli--wrong,
body.light-mode:not(.original-v3-theme) #history-list > .hqli.hqli--wrong .inner {
    background: #efcbd1 !important;
}

body.light-mode:not(.original-v3-theme) #history-list > .hqli,
body.light-mode:not(.original-v3-theme) #history-list > .hqli .inner {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

/* Cyan outline behavior is intentionally split by brightness:
   - dark cyan keeps the graph flat;
   - light cyan keeps the graph's thin structure, while Settings cards remain
     quiet, filled surfaces. */
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-popup,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-range-controls,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-summary-card,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-controls,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-popup-content,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-end-controls,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-series-key,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) #graph-close-popup.graph-close-popup,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-mode-filter select,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-range-select,
body.cyan-preset:not(.light-mode):not(.original-v3-theme) .graph-select {
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .graph-popup {
    border: 1px solid rgba(8, 127, 145, 0.20) !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) .graph-range-controls,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-summary-card,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-controls,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-popup-content,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-end-controls,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-series-key {
    border: 1px solid rgba(8, 127, 145, 0.14) !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme) #graph-close-popup.graph-close-popup,
body.light-mode.cyan-preset:not(.original-v3-theme) .graph-mode-filter select {
    border: 1px solid rgba(8, 127, 145, 0.18) !important;
}

body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .settings-section-content > .mb-1,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .settings-section-content > .mb-2,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .settings-section-content > .folder,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .settings-section-content > .multi-input,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .settings-section-content > .ctrl__inner,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .profile-container,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .mb-1,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .mb-2,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .multi-input,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .inline-input__outer,
body.light-mode.cyan-preset:not(.original-v3-theme)
    #sidebar-settings .single-input {
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Multiple Conclusions is configured in one place. Per-mode values stay
   optional: an empty field follows the default instead of duplicating it. */
.conclusion-count-settings .conclusion-default-row,
.conclusion-count-settings .conclusion-bonus-row,
.conclusion-count-settings .per-mode-conclusion-settings {
    margin-top: 0.55rem;
    margin-left: 1.5rem;
}

.per-mode-conclusion-settings {
    min-width: 0;
    padding: 0.65rem;
    border: 0;
    border-radius: 8px;
    background: color-mix(
        in srgb,
        var(--single-input-bg, rgba(0, 0, 0, 0.18)) 90%,
        var(--theme-color, #3377ff) 10%
    );
}

.per-mode-conclusion-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.per-mode-conclusion-heading > span {
    font-weight: 750;
}

.per-mode-conclusion-heading small {
    color: var(--soft-text);
    font-size: var(--step--3, 0.7rem);
    white-space: nowrap;
}

.per-mode-conclusion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.per-mode-conclusion-grid label {
    display: flex;
    min-width: 0;
    min-height: 2.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: color-mix(
        in srgb,
        var(--single-input-bg, rgba(0, 0, 0, 0.2)) 94%,
        transparent
    );
    font-size: var(--step--3, 0.72rem);
}

.per-mode-conclusion-grid label > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.per-mode-conclusion-grid input {
    flex: 0 0 4.35rem;
    width: 4.35rem;
    min-width: 0;
    padding-inline: 0.35rem;
    text-align: center;
}

body.original-v3-theme .per-mode-conclusion-settings,
body.original-v3-theme .per-mode-conclusion-grid label {
    border-radius: 0;
}

/* Mobile panels deliberately use the app's Smallest type scale regardless of
   the game-card font preference. This keeps every control visible without
   shrinking the trial itself. */
@media (max-width: 620px) {
    #sidebar-settings,
    #sidebar-history,
    #sidebar-changelog,
    #sidebar-credits,
    .graph-popup,
    .changelog-dialog,
    .suggestion-dialog {
        --base-font-size: 0.75rem;
        --step--3: 0.62rem;
        --step--2: 0.68rem;
        --step--1: 0.75rem;
        --step-0: 0.84rem;
        --step-05: 0.9rem;
        font-size: 0.75rem;
    }

    .offcanvas-body {
        padding: 0.55rem 0.65rem 0.7rem;
    }

    #sidebar-settings .settings-section.active .settings-section-content {
        padding: 0.55rem !important;
    }

    #sidebar-settings .settings-section-content > .mb-1,
    #sidebar-settings .settings-section-content > .mb-2,
    #sidebar-settings .settings-section-content > .multi-input,
    #sidebar-settings .settings-section-content > .ctrl__inner {
        min-width: 0;
        padding: 0.55rem !important;
    }

    #sidebar-settings .ctrl__inner {
        min-width: 0;
        gap: 0.45rem;
    }

    #sidebar-settings .ctrl__inner > span,
    #sidebar-settings .ctrl__inner > label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #sidebar-settings .multi-input {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        margin-left: 0 !important;
        padding: 0.4rem !important;
    }

    #sidebar-settings .single-input {
        width: 100%;
        min-width: 0;
        padding: 0.3rem;
    }

    #sidebar-settings input,
    #sidebar-settings select,
    #sidebar-settings button {
        max-width: 100%;
        min-width: 0;
        font-size: 0.75rem;
    }

    #sidebar-settings .section-search-input {
        min-height: 36px;
    }

    #sidebar-settings .settings-menu-btn {
        min-height: 52px;
        padding: 0.45rem 0.55rem;
    }

    #sidebar-settings .settings-menu-btn .btn-icon-wrap {
        width: 2rem;
        height: 2rem;
    }

    .conclusion-count-settings .conclusion-default-row,
    .conclusion-count-settings .conclusion-bonus-row,
    .conclusion-count-settings .per-mode-conclusion-settings {
        margin-left: 0;
    }

    .per-mode-conclusion-settings {
        padding: 0.5rem;
    }

    .per-mode-conclusion-grid {
        gap: 0.3rem;
    }

    .per-mode-conclusion-grid label {
        min-height: 2rem;
        padding: 0.28rem 0.35rem;
        font-size: 0.62rem;
    }

    .per-mode-conclusion-grid input {
        flex-basis: 3.75rem;
        width: 3.75rem;
        font-size: 0.68rem;
    }

    #sidebar-history .history-filter-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
    }

    #sidebar-history .history-filter-btn {
        min-width: 0;
        padding-inline: 0.2rem;
        white-space: normal;
    }

    #sidebar-history .history-filter-count {
        min-width: 1.2em;
        margin-left: 0.08em;
        padding-inline: 0.18em;
    }

    #sidebar-history .hqli .inner {
        gap: 0.3rem;
        padding: 0.5rem 0.55rem;
    }

    #sidebar-history .hqli-premise,
    #sidebar-history .hqli-conclusion {
        overflow-wrap: anywhere;
    }

    .info-panel-body .mb-2,
    .info-panel-body ul.explainer,
    .info-panel-body .inline-input__outer,
    .symbol-category,
    .changelog-item {
        padding: 0.55rem;
    }

    .info-panel-body .keyboard-shortcut {
        gap: 0.4rem;
    }

    .changelog-panel-heading h2,
    .changelog-header h2 {
        font-size: 1rem;
    }

    .changelog-item h3 {
        font-size: 0.78rem;
    }

    .changelog-item p,
    .changelog-location {
        font-size: 0.66rem;
    }

    .submit-suggestion-button {
        min-height: 2.65rem;
        padding: 0.45rem 0.55rem;
    }

    .graph-popup {
        padding: 0.55rem;
    }

    .graph-toolbar,
    .graph-summary,
    .graph-controls {
        gap: 0.3rem;
    }

    .graph-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .graph-summary-card {
        min-width: 0;
        padding: 0.45rem;
    }

    .graph-controls {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .graph-select {
        min-width: 0;
        padding: 0.4rem 0.15rem;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    #sidebar-settings .multi-input {
        grid-template-columns: 1fr;
    }

    .per-mode-conclusion-grid {
        grid-template-columns: 1fr;
    }
}

/* TEST relational prototypes */
.settings-menu-btn[data-section="test-section"] {
    --btn-accent: #ff9f43;
    --btn-accent-bg: rgba(255, 159, 67, 0.1);
    --btn-accent-bg-hover: rgba(255, 159, 67, 0.18);
}

.settings-menu-btn[data-section="test-section"] .btn-icon-wrap {
    color: #ff9f43;
}

.settings-section.test-section {
    border-color: transparent;
    background: transparent;
}

.settings-section.test-section .settings-section-header {
    border-color: transparent;
    background: rgba(255, 159, 67, 0.08);
    color: #ff9f43;
}

.settings-section.test-section .settings-section-header:hover {
    background: rgba(255, 159, 67, 0.16);
}

.test-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.test-lab-controls,
.test-mode-option {
    border-color: transparent !important;
}

.test-mode-cue,
.test-mode-frame,
.test-mode-operator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.45em;
    padding: 0.08em 0.42em;
    border-radius: 0.38em;
    background: color-mix(in srgb, var(--theme-color, #3377ff) 15%, transparent);
    color: color-mix(in srgb, var(--theme-color, #3377ff) 78%, #fff);
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    vertical-align: 0.08em;
}

.test-mode-cue-update {
    background: rgba(255, 159, 67, 0.16);
    color: #ffad61;
}

.test-mode-cue-fault {
    background: rgba(240, 61, 92, 0.17);
    color: #ff5a75;
}

.test-mode-frame {
    background: color-mix(in srgb, var(--theme-color, #3377ff) 10%, transparent);
}

.test-mode-operator {
    min-width: 2em;
    font-family: var(--font-mono, monospace);
    font-size: 0.86em;
}

.test-mode-compose {
    opacity: 0.72;
}

.classic-test-mode-explanation {
    display: grid;
    gap: 0.75rem;
}

.classic-test-mode-explanation > p {
    margin: 0;
    color: var(--muted-color, #a7afbc);
    line-height: 1.45;
}

.classic-test-mode-explanation > div {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-color, #3377ff) 9%, transparent);
}

.classic-test-mode-explanation > div > span {
    color: var(--muted-color, #a7afbc);
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.classic-test-mode-explanation > div > b {
    font-weight: 600;
}

body.light-mode .test-mode-cue,
body.light-mode .test-mode-frame,
body.light-mode .test-mode-operator {
    color: color-mix(in srgb, var(--theme-color, #3377ff) 72%, #14202b);
}

body.original-v3-theme .test-mode-cue,
body.original-v3-theme .test-mode-frame,
body.original-v3-theme .test-mode-operator,
body.original-v3-theme .test-section .section-label,
body.original-v3-theme .settings-menu-btn[data-section="test-section"] .btn-label {
    font-family: "Espionage", sans-serif;
}

/* Relational Web
   The graph structure is stable while both visual layouts are regenerated.
   Highlighted roles are selected in the displayed color order. */
#advanced-section #experimental-folder-content > #relational-web-setting {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.relational-web-setting-heading {
    flex-wrap: wrap;
}

.setting-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    margin-left: auto;
    padding: 0.1rem 0.48rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(
        in srgb,
        var(--theme-color, #3377ff) 22%,
        transparent
    );
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
}

.relational-web-display {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.75rem 0.25rem 0.25rem;
    box-sizing: border-box;
    overflow: hidden;
}

.game-area.relational-web-active {
    width: min(800px, calc(100vw - 3rem));
    max-width: min(800px, calc(100vw - 3rem));
    box-sizing: border-box;
}

.game-area.relational-web-active #spoiler-area,
.game-area.relational-web-active .game-display {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.game-area.relational-web-active .display-outer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.game-area.relational-web-active .display-inner {
    width: calc(100% - 4.4rem);
    min-width: 0;
    max-width: calc(100% - 4.4rem);
    margin-inline: 2.2rem;
    padding-inline: 0.7rem;
    box-sizing: border-box;
}

.game-area.relational-web-active:not(.relational-web-choice-active)
    .confirmation-buttons {
    display: none !important;
}

.game-area.relational-web-choice-active .confirmation-buttons {
    display: flex !important;
}

.relational-web-trial,
.relational-web-explanation,
.hqli-relational-web {
    --rw-blue: #3483ff;
    --rw-yellow: #ffd43b;
    --rw-edge: color-mix(in srgb, currentColor 64%, var(--theme-color, #3377ff) 36%);
    --rw-node: color-mix(in srgb, var(--text-color, #f5f7fb) 90%, var(--theme-color, #3377ff) 10%);
    --rw-panel: color-mix(
        in srgb,
        var(--single-input-bg, #171b27) 91%,
        var(--theme-color, #3377ff) 9%
    );
    color: var(--text-color);
}

.relational-web-trial {
    display: grid;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.relational-web-instruction {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 1.6rem;
    color: color-mix(in srgb, var(--text-color) 72%, transparent);
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.rw-order-dot {
    display: inline-block;
    width: 0.68rem;
    height: 0.68rem;
    flex: 0 0 auto;
    border-radius: 50%;
    vertical-align: -0.08em;
}

.rw-order-dot.is-blue {
    background: var(--rw-blue, #3483ff);
}

.rw-order-dot.is-yellow {
    background: var(--rw-yellow, #ffd43b);
}

.rw-order-dot.is-role {
    background: var(--rw-role-color, var(--rw-blue, #3483ff));
}

.rw-role-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.22rem;
}

.rw-degree-key {
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    margin-inline-start: 0.45rem;
    padding-inline-start: 0.55rem;
    border-inline-start: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
}

.rw-degree-key b,
.rw-degree-key i {
    font: inherit;
    font-weight: 900;
}

.rw-degree-key i {
    color: color-mix(in srgb, var(--text-color) 46%, transparent);
}

.rw-degree-key .is-outgoing {
    color: #2586ff;
}

.rw-degree-key .is-incoming {
    color: #f0465d;
}

.relational-web-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.relational-web-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.4rem;
    border: 0;
    border-radius: 12px;
    background: var(--rw-panel);
    overflow: hidden;
}

.relational-web-panel-label {
    position: absolute;
    top: 0.55rem;
    left: 0.7rem;
    z-index: 2;
    color: color-mix(in srgb, var(--text-color) 56%, transparent);
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
}

.relational-web-transfer {
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font: 900 1.1rem/1 var(--ui-font, Inter, system-ui, sans-serif);
}

.relational-web-svg {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 14rem;
    max-height: 17.5rem;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

.rw-edge {
    fill: none;
    stroke: var(--rw-edge);
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}

.rw-edge.is-dashed {
    stroke-dasharray: 5 4;
}

.rw-edge.is-loop {
    stroke-width: 1.95;
}

.rw-arrowhead {
    fill: var(--rw-edge);
}

.rw-node-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;
    pointer-events: all;
}

.rw-node-core {
    fill: var(--rw-node);
    stroke: none;
    transition: fill 140ms ease;
    shape-rendering: geometricPrecision;
}

.rw-degree-counts {
    pointer-events: none;
}

.rw-degree-count,
.rw-degree-separator {
    dominant-baseline: middle;
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    font-size: var(--rw-degree-size, 2.65px);
    font-weight: 950;
    letter-spacing: -0.12px;
    text-anchor: middle;
    paint-order: stroke fill;
    stroke: color-mix(in srgb, var(--rw-node) 86%, transparent);
    stroke-width: 0.42px;
    stroke-linejoin: round;
}

.rw-degree-count.is-outgoing {
    fill: #0c5fc4;
}

.rw-degree-count.is-incoming {
    fill: #df2646;
}

.rw-degree-separator {
    fill: color-mix(in srgb, #111827 76%, transparent);
    font-size: calc(var(--rw-degree-size, 2.65px) * 0.85);
}

.rw-node.is-source-role .rw-degree-count,
.rw-node.is-selected-role .rw-degree-count,
.rw-node.is-correct-role .rw-degree-count,
.rw-node.is-source-role .rw-degree-separator,
.rw-node.is-selected-role .rw-degree-separator,
.rw-node.is-correct-role .rw-degree-separator {
    stroke: color-mix(in srgb, #ffffff 38%, transparent);
}

.rw-node[role="button"] {
    cursor: pointer;
}

.rw-node,
.rw-node:focus,
.rw-node[role="button"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.rw-node.is-source-role .rw-node-core,
.rw-node.is-selected-role .rw-node-core,
.rw-node.is-correct-role .rw-node-core {
    fill: var(--rw-role-color, var(--rw-blue));
}

.relational-web-trial.is-checking [data-rw-target] {
    pointer-events: none;
}

.relational-web-property-prompt {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    color: color-mix(in srgb, var(--text-color) 72%, transparent);
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.relational-web-property-prompt strong {
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font-size: 1.04rem;
}

.relational-web-property-prompt small {
    flex-basis: 100%;
    color: color-mix(in srgb, var(--text-color) 62%, transparent);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
}

.rw-property-truth {
    position: absolute;
    top: 0.48rem;
    right: 0.65rem;
    z-index: 2;
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rw-property-truth.is-true,
.rw-property-resolution .is-true {
    color: #20c878;
}

.rw-property-truth.is-false,
.rw-property-resolution .is-false {
    color: #f04f67;
}

.rw-property-compare {
    min-width: 1.25rem;
    text-align: center;
}

.relational-web-explanation {
    display: grid;
    gap: 0.7rem;
    min-width: min(42rem, calc(100vw - 3rem));
}

.rw-explanation-heading {
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    color: color-mix(in srgb, var(--text-color) 72%, transparent);
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    text-align: center;
}

.rw-explanation-heading strong {
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rw-explanation-heading span {
    max-width: 52rem;
    font-size: 0.76rem;
    line-height: 1.35;
}

.relational-web-pair.is-compact .relational-web-svg {
    min-height: 9rem;
    max-height: 11.5rem;
}

.relational-web-role-summaries,
.rw-property-resolution {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    color: color-mix(in srgb, var(--text-color) 76%, transparent);
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    font-size: 0.72rem;
}

.rw-role-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.3rem 0.48rem;
    border: 0;
    border-radius: 8px;
    background: color-mix(
        in srgb,
        var(--rw-panel) 82%,
        transparent
    );
}

.rw-role-summary b {
    text-transform: capitalize;
}

.rw-role-summary em {
    color: var(--text-color);
    font-style: normal;
    font-weight: 800;
}

.rw-property-resolution strong {
    color: var(--text-color);
    font-weight: 900;
}

.rw-history-property {
    display: grid;
    gap: 0.5rem;
}

.rw-history-property > strong {
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font-family: var(--ui-font, Inter, system-ui, sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The generic explanation renderer deliberately shrinks inline icons. A
   Relational Web SVG is the explanation itself, so it must retain its panel
   dimensions instead of becoming a two-rem icon. */
.explanation-popup.classic-explanation-popup-relational-web {
    width: min(94vw, 68rem) !important;
}

.classic-explanation-popup-relational-web .relational-web-explanation {
    width: 100%;
    min-width: 0;
}

.classic-explanation-popup-relational-web .relational-web-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 9rem !important;
    max-width: 100% !important;
    max-height: 12rem !important;
}

.relational-web-key {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    color: color-mix(in srgb, var(--text-color) 68%, transparent);
    font-size: 0.68rem;
    font-weight: 700;
}

.relational-web-key > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hqli-relational-web {
    width: min(100%, 38rem);
}

.hqli-relational-web .relational-web-pair {
    gap: 0.35rem;
}

.hqli-relational-web .relational-web-panel {
    padding: 0.2rem;
    background: color-mix(in srgb, var(--rw-panel) 82%, transparent);
}

.hqli-relational-web .relational-web-panel-label {
    top: 0.4rem;
    left: 0.45rem;
}

body.light-mode .relational-web-trial,
body.light-mode .relational-web-explanation,
body.light-mode .hqli-relational-web {
    --rw-edge: color-mix(in srgb, #18313a 78%, var(--theme-color, #3377ff) 22%);
    --rw-node: #fbfdff;
    --rw-panel: color-mix(in srgb, #f5f9fa 91%, var(--theme-color, #3377ff) 9%);
}



body.original-v3-theme .setting-new-badge,
body.original-v3-theme .relational-web-panel-label,
body.original-v3-theme .relational-web-instruction,
body.original-v3-theme .relational-web-property-prompt,
body.original-v3-theme .rw-explanation-heading,
body.original-v3-theme .relational-web-role-summaries,
body.original-v3-theme .rw-property-resolution {
    border-radius: 0;
    font-family: "Espionage", sans-serif;
}

body.original-v3-theme .relational-web-panel {
    border-radius: 0;
}


/* The original skin loads after the main stylesheet and normally contracts
   every trial to its text width. Keep this two-graph task wide enough to
   compare both structures without changing the compact sizing of other modes. */
body.original-v3-theme .game-area.relational-web-active {
    width: min(800px, calc(100vw - 3rem)) !important;
    inline-size: min(800px, calc(100vw - 3rem)) !important;
    max-width: min(800px, calc(100vw - 3rem)) !important;
    max-inline-size: min(800px, calc(100vw - 3rem)) !important;
}

body.original-v3-theme .game-area.relational-web-active #spoiler-area,
body.original-v3-theme .game-area.relational-web-active .game-display,
body.original-v3-theme .game-area.relational-web-active .display-outer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body.original-v3-theme
    .game-area.relational-web-active
    .display-inner {
    width: calc(100% - 4.4rem) !important;
    min-width: 0 !important;
    max-width: calc(100% - 4.4rem) !important;
    margin-inline: 2.2rem !important;
    padding-inline: 0.7rem !important;
}

body.original-v3-theme
    .game-area.relational-web-active
    .display_text.relational-web-display {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0.75rem 0.25rem 0.25rem !important;
}

@media (max-width: 720px) {
    .relational-web-display {
        width: calc(100vw - 5.6rem);
        min-width: 0;
        padding-inline: 0;
    }

    .game-area.relational-web-active .display-outer {
        width: calc(100vw - 1.5rem);
    }

    .game-area.relational-web-active .display-inner {
        width: calc(100% - 4rem);
        max-width: calc(100% - 4rem);
        margin-inline: 2rem;
        padding-inline: 0.65rem;
    }

    .relational-web-pair {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .relational-web-transfer {
        transform: rotate(90deg);
        justify-self: center;
    }

    .relational-web-transfer.rw-property-compare {
        transform: none;
    }

    .relational-web-svg {
        min-height: 10.5rem;
        max-height: 12.25rem;
    }

    .relational-web-panel {
        padding: 0.25rem;
    }

    .rw-degree-key {
        margin-inline-start: 0.2rem;
        padding-inline-start: 0.38rem;
        font-size: 0.6rem;
    }

    .relational-web-explanation {
        min-width: min(22rem, calc(100vw - 2rem));
    }

    .explanation-popup.classic-explanation-popup-relational-web {
        width: calc(100vw - 0.5rem) !important;
        max-width: calc(100vw - 0.5rem) !important;
    }

    .classic-explanation-popup-relational-web .relational-web-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .classic-explanation-popup-relational-web .relational-web-transfer {
        transform: rotate(90deg);
        justify-self: center;
    }

    .classic-explanation-popup-relational-web .relational-web-svg {
        min-height: 7.25rem !important;
        max-height: 8.5rem !important;
    }

    .relational-web-pair.is-compact .relational-web-svg {
        min-height: 7rem;
        max-height: 8.25rem;
    }

    .hqli-relational-web .relational-web-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hqli-relational-web .relational-web-transfer {
        display: none;
    }

    body.original-v3-theme .game-area.relational-web-active {
        width: calc(100vw - 2.5rem) !important;
        inline-size: calc(100vw - 2.5rem) !important;
        max-width: calc(100vw - 2.5rem) !important;
        max-inline-size: calc(100vw - 2.5rem) !important;
    }

    body.original-v3-theme
        .game-area.relational-web-active
        .display-inner {
        width: calc(100% - 4rem) !important;
        max-width: calc(100% - 4rem) !important;
        margin-inline: 2rem !important;
        padding-inline: 0.65rem !important;
    }

body.original-v3-theme
        .game-area.relational-web-active
        .display_text.relational-web-display {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
    }
}

/* Nested analogy: two complete analogy claims become the operands of one
   higher-order comparison. */
.display_text[data-question-type="nested-analogy"] .premise-group {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: 0.75rem 0.75rem 0.65rem 1rem;
    border: 0;
    border-left: 3px solid var(--binary-source-color, #4fc7ff);
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}

.display_text[data-question-type="nested-analogy"] .premise-group + .premise-group {
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 18%, transparent);
}

.display_text[data-question-type="nested-analogy"] .formatted-conclusion {
    display: block !important;
    width: 100%;
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
}

.nested-analogy-conclusion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.55rem;
    width: min(100%, 54rem);
    margin: 0 auto;
}

.nested-analogy-system {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 4.75rem;
    padding: 0.7rem 0.7rem 0.7rem 2rem;
    border: 0;
    border-radius: 10px;
    background: color-mix(
        in srgb,
        var(--single-input-bg, #171b27) 90%,
        var(--theme-color, #3377ff) 10%
    );
    box-sizing: border-box;
}

.nested-analogy-system-key {
    position: absolute;
    top: 0.55rem;
    left: 0.6rem;
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font: 900 0.68rem/1 var(--ui-font, Inter, system-ui, sans-serif);
}

.nested-analogy-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.nested-analogy-inner .analogy-statement {
    display: inline-flex;
    margin: 0 0.18rem;
}

.nested-analogy-bridge {
    align-self: center;
    max-width: 8.5rem;
    color: var(--accent-bright, var(--theme-color, #3377ff));
    font: 850 0.68rem/1.25 var(--ui-font, Inter, system-ui, sans-serif);
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.classic-explanation-queries,
.classic-syllogism-query-list {
    display: grid;
    gap: 0.55rem;
}

.classic-explanation-queries .classic-explanation-query {
    padding: 0.65rem;
    border: 0;
    border-left: 3px solid color-mix(
        in srgb,
        var(--theme-color, #3377ff) 70%,
        transparent
    );
    border-radius: 7px;
    background: color-mix(
        in srgb,
        var(--single-input-bg, #171b27) 92%,
        var(--theme-color, #3377ff) 8%
    );
}

.classic-explanation-query-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--soft-text);
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.classic-explanation-response,
.classic-explanation-answer-key {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.12rem 0.4rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.classic-explanation-response.is-correct {
    color: #24cf74;
}

.classic-explanation-response.is-wrong,
.classic-explanation-answer-key {
    color: #ff6976;
}

.classic-nested-analogy-resolution {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 0;
    border-radius: 8px;
    background: color-mix(
        in srgb,
        var(--single-input-bg, #171b27) 90%,
        var(--theme-color, #3377ff) 10%
    );
}

.classic-nested-analogy-resolution > strong {
    min-width: 0;
    color: var(--soft-text);
    font-size: 0.78em;
    text-align: center;
}

.classic-nested-analogy-value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74em;
    font-weight: 800;
}

.classic-nested-analogy-value .is-true,
.classic-nested-analogy-result.is-true {
    color: #24cf74;
}

.classic-nested-analogy-value .is-false,
.classic-nested-analogy-result.is-false {
    color: #ff5d68;
}

.classic-nested-analogy-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 0.72em;
    font-weight: 900;
}

.rw-node.is-source-role .rw-degree-count.is-outgoing,
.rw-node.is-selected-role .rw-degree-count.is-outgoing,
.rw-node.is-correct-role .rw-degree-count.is-outgoing {
    fill: #08111f;
}

.rw-node.is-source-role .rw-degree-count.is-incoming,
.rw-node.is-selected-role .rw-degree-count.is-incoming,
.rw-node.is-correct-role .rw-degree-count.is-incoming {
    fill: #a9072a;
}

@media (max-width: 700px) {
    .nested-analogy-conclusion {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
    }

    .nested-analogy-bridge {
        justify-self: center;
        max-width: none;
        padding-block: 0.12rem;
    }

    .nested-analogy-system {
        min-height: 3.9rem;
    }

    .classic-nested-analogy-resolution {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classic-nested-analogy-resolution > strong {
        order: 3;
        grid-column: 1 / -1;
    }

    .classic-nested-analogy-result {
        order: 4;
        grid-column: 1 / -1;
        justify-self: center;
    }
}

.confirmation-indeterminable[hidden] { display: none !important; }

/* Circular mode settings and symbolic Construct Relations controls. */
.circular-submode-row {
    margin: 0.55rem 0 0.65rem 1.9rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--single-input-bg, #171b27) 64%, transparent);
}

.circular-submode-row .ctrl__inner {
    gap: 0.55rem;
}

.circular-priority {
    margin-left: auto;
}

.construct-axis-choice.is-minimal {
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1;
}

@media (max-width: 560px) {
    .circular-submode-row {
        margin-left: 0.85rem;
    }

    .circular-submode-row .ctrl__inner {
        flex-wrap: wrap;
    }

    .circular-priority {
        flex-basis: 100%;
        margin-left: 2.65rem;
    }
}


/* Multiple Choice is a child answer style inside Construct Conclusions. */
.construct-conclusions-suboption {
    margin: 0.75rem 0 0.25rem 1.5rem;
    padding: 0.65rem 0 0.2rem 0.9rem;
    border-left: 2px solid rgba(51, 119, 255, 0.28);
}

.construct-conclusions-suboption[hidden] {
    display: none !important;
}

.construct-conclusions-suboption > .ctrl__inner {
    padding-top: 0;
}

.construct-conclusions-suboption .explainer {
    margin-left: 0;
}

@media (max-width: 560px) {
    .construct-conclusions-suboption {
        margin-left: 0.75rem;
        padding-left: 0.7rem;
    }
}