@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap");

html body.tool-page {
    --surface-0: var(--g-bg) !important;
    --surface-1: var(--g-panel) !important;
    --surface-2: var(--g-panel-2) !important;
    --text-primary: var(--g-ink) !important;
    --text-secondary: var(--g-ink-2) !important;
    --text-muted: var(--g-ink-3) !important;
    --border-default: var(--g-rule) !important;
    --border-hover: var(--g-rule-strong) !important;
    --rule-strong: var(--g-rule-strong) !important;
    --accent: var(--g-gold) !important;
    --accent-hover: var(--g-ink) !important;
    --accent-subtle: var(--g-gold-soft) !important;
    --nav-accent: var(--g-gold) !important;

    --tool-primary: var(--g-gold) !important;
    --tool-primary-hover: var(--g-ink) !important;
    --tool-primary-soft: var(--g-gold-soft) !important;
    --tool-success: var(--g-verdigris) !important;
    --tool-danger: var(--g-rose) !important;
    --tool-warning: var(--g-ember) !important;
    --tool-surface: var(--g-panel) !important;
    --tool-surface-raised: var(--g-panel-2) !important;
    --tool-border: var(--g-rule) !important;
    --tool-text: var(--g-ink) !important;
    --tool-text-muted: var(--g-ink-3) !important;
    --tool-canvas: var(--g-canvas) !important;
    --tool-radius-sm: 0 !important;
    --tool-radius-md: 0 !important;
    --tool-radius-lg: 0 !important;
    --tool-shadow-sm: none !important;
    --tool-shadow-md: none !important;

    --primary-color: var(--g-gold) !important;
    --primary-hover: var(--g-ink) !important;
    --primary-light: var(--g-gold-soft) !important;
    --success-color: var(--g-verdigris) !important;
    --success-hover: var(--g-verdigris) !important;
    --warning-color: var(--g-ember) !important;
    --danger-color: var(--g-rose) !important;
    --surface-color: var(--g-panel) !important;
    --surface-elevated: var(--g-panel-2) !important;
    --border-color: var(--g-rule) !important;
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
    --shadow-xl: none !important;
    --radius-sm: 0 !important;
    --radius-md: 0 !important;
    --radius-lg: 0 !important;
    --radius-xl: 0 !important;
    --radius-pill: 0 !important;

    --reference-ink: var(--g-ink) !important;
    --reference-muted: var(--g-ink-3) !important;
    --reference-line: var(--g-rule) !important;
    --reference-panel: var(--g-panel) !important;
    --reference-canvas: var(--g-canvas) !important;
    --reference-accent: var(--g-gold) !important;
    --reference-accent-soft: var(--g-gold-soft) !important;
    --reference-warm: var(--g-ember) !important;
    --reference-danger: var(--g-rose) !important;
    --reference-shadow: none !important;

    --visual-idle: var(--g-rule-strong) !important;
    --visual-current: var(--g-gold) !important;
    --visual-visited: var(--g-moon) !important;
    --visual-frontier: var(--g-verdigris) !important;
    --visual-success: var(--g-verdigris) !important;
    --visual-danger: var(--g-rose) !important;
    --visual-path: var(--g-gold) !important;
    --visual-wall: var(--g-ink-2) !important;
    --visual-grid: var(--g-grid) !important;
    --visual-pivot: var(--g-ember) !important;

    --optics-accent: var(--g-gold) !important;
    --optics-canvas-bg: #0e0f13 !important;
    --optics-card-bg: var(--g-panel) !important;
    --optics-card-border: var(--g-rule) !important;
    --optics-focus: var(--g-gold) !important;
    --optics-ink: var(--g-ink) !important;
    --optics-ink-2: var(--g-ink-2) !important;
    --optics-warn-bg: var(--g-gold-soft) !important;
    --optics-warn-ink: var(--g-ember) !important;
    --spectrum-cyan: var(--g-verdigris) !important;
    --spectrum-violet: var(--g-moon) !important;
    --spectrum-rose: var(--g-rose) !important;
    --spectrum-gold: var(--g-gold) !important;

    --abyss: var(--g-bg) !important;
    --obsidian: var(--g-panel) !important;
    --obsidian-raised: var(--g-panel-2) !important;
    --arcane-cyan: var(--g-verdigris) !important;
    --arcane-gold: var(--g-gold) !important;
    --arcane-violet: var(--g-moon) !important;
    --rune-line: var(--g-rule) !important;

    --math-cyan: var(--g-verdigris) !important;
    --math-gold: var(--g-gold) !important;
    --math-rose: var(--g-rose) !important;
    --math-violet: var(--g-moon) !important;
    --math-violet-bright: var(--g-moon) !important;

    --g-clasp:
        linear-gradient(var(--g-gold), var(--g-gold)) left top / 14px 1px no-repeat,
        linear-gradient(var(--g-gold), var(--g-gold)) left top / 1px 14px no-repeat,
        linear-gradient(var(--g-gold), var(--g-gold)) right bottom / 14px 1px no-repeat,
        linear-gradient(var(--g-gold), var(--g-gold)) right bottom / 1px 14px no-repeat;
    --g-mask-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12'%3E%3Cpath d='M0 6h86M114 6h86' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M100 1.5 104.5 6 100 10.5 95.5 6Z' fill='%23000'/%3E%3Cpath d='M91 6h2M107 6h2' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
    --g-mask-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 2 46 24 24 46 2 24Z' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3Cpath d='M24 11 37 24 24 37 11 24Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='2.6'/%3E%3Cpath d='M24 0v6M24 42v6M0 24h6M42 24h6' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");

    color: var(--g-ink);
    background-color: var(--g-bg) !important;
    font-family: var(--g-font-sans);
}

:where(body.tool-page) *,
:where(body.tool-page) *::before,
:where(body.tool-page) *::after {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

:where(body.tool-page) #dark-mode-button::before,
:where(body.tool-page) input[type="radio"],
:where(body.tool-page) .g-round,
:where(body.tool-page) .g-round::before,
:where(body.tool-page) .g-round::after {
    border-radius: 50% !important;
}

:where(body.tool-page) #dark-mode-button::after {
    border-radius: 7px 0 0 7px !important;
}

:where(body.tool-page.dark-mode) #dark-mode-button::after {
    border-radius: 0 7px 7px 0 !important;
}

body.tool-page ::selection {
    color: var(--g-ink);
    background: var(--g-gold-soft);
}

body.tool-page :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 1px solid var(--g-gold) !important;
    outline-offset: 2px !important;
}

body.tool-page .logo-mark {
    width: 0.6rem;
    height: 0.6rem;
    transform: rotate(45deg);
    background: var(--g-gold);
}

body.tool-page .breadcrumbs {
    font-family: var(--g-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--g-ink-3);
}

body.tool-page .breadcrumbs a {
    color: var(--g-ink-2);
}

body.tool-page .breadcrumbs a:hover {
    color: var(--g-gold);
}

body.tool-page h1,
body.tool-page .tool-header h1,
body.tool-page .math-app-header h1 {
    font-family: var(--g-font-display) !important;
    font-weight: 600 !important;
    font-size: clamp(2.3rem, 5vw, 3.5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.005em !important;
    color: var(--g-ink) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

body.tool-page h1 * {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

section:where(.tool-content)>* {
    max-width: none;
    margin: 0;
    padding: 0;
}

body.tool-page .tool-header {
    position: relative;
}

body.tool-page .tool-header .subtitle,
body.tool-page .math-app-header>p {
    color: var(--g-ink-2) !important;
}

body.tool-page .tool-header::after {
    content: "";
    display: block;
    width: 200px;
    height: 12px;
    margin: 24px auto 0;
    background: var(--g-gold);
    -webkit-mask: var(--g-mask-rule) center / contain no-repeat;
    mask: var(--g-mask-rule) center / contain no-repeat;
}

body.tool-page .header-icon {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border: 0 !important;
    background: var(--g-gold) !important;
    -webkit-mask: var(--g-mask-sigil) center / contain no-repeat;
    mask: var(--g-mask-sigil) center / contain no-repeat;
    transform: none !important;
    animation: none !important;
}

body.tool-page .header-icon::before,
body.tool-page .header-icon::after {
    display: none !important;
}

body.tool-page .header-icon * {
    display: none !important;
}

body.tool-page .stat-icon,
body.tool-page .card-icon,
body.tool-page .sidebar-header .icon,
body.tool-page .canvas-title .icon,
body.tool-page .section-header .icon {
    display: none !important;
}

body.tool-page .keyboard-hint {
    font-family: var(--g-font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    color: var(--g-ink-3) !important;
}

body.tool-page kbd {
    display: inline-block;
    padding: 1px 6px !important;
    font-family: var(--g-font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    color: var(--g-ink) !important;
    background: var(--g-panel) !important;
    border: 1px solid var(--g-rule-strong) !important;
    border-bottom-width: 2px !important;
}

body.tool-page .stats-bar {
    background: var(--g-panel) !important;
    border: 1px solid var(--g-rule) !important;
    border-top: 1px solid var(--g-rule-strong) !important;
    border-bottom: 1px solid var(--g-rule-strong) !important;
}

body.tool-page .stat-item {
    background: transparent !important;
    border-color: var(--g-rule) !important;
}

body.tool-page .stat-value {
    font-family: var(--g-font-mono) !important;
    font-weight: 500 !important;
    color: var(--g-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

body.tool-page .stat-label {
    font-family: var(--g-font-sans) !important;
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--g-ink-3) !important;
}

body.tool-page .options-sidebar,
body.tool-page .canvas-container,
body.tool-page .explanation-card,
body.tool-page .g-panel {
    background: var(--g-clasp), var(--g-panel) !important;
    border: 1px solid var(--g-rule) !important;
}

body.tool-page .sidebar-header,
body.tool-page .canvas-header,
body.tool-page .panel-header {
    background: transparent !important;
    border-bottom: 1px solid var(--g-rule) !important;
}

body.tool-page .sidebar-header h2,
body.tool-page .canvas-title,
body.tool-page .panel-header h2,
body.tool-page .panel-header h3,
body.tool-page .section-header h2,
body.tool-page .explanation-card h3 {
    font-family: var(--g-font-display) !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    font-variant: small-caps;
    letter-spacing: 0.06em !important;
    color: var(--g-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

body.tool-page .section-header h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem) !important;
}

body.tool-page .section-header::after {
    content: "";
    display: block;
    width: 160px;
    height: 12px;
    margin: 10px auto 0;
    background: var(--g-gold);
    -webkit-mask: var(--g-mask-rule) center / contain no-repeat;
    mask: var(--g-mask-rule) center / contain no-repeat;
}

body.tool-page .option-card {
    background: transparent !important;
    border-color: var(--g-rule) !important;
}

body.tool-page .option-card h3,
body.tool-page .control-label span:first-child,
body.tool-page label {
    color: var(--g-ink-2);
}

body.tool-page .option-card h3 {
    font-family: var(--g-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--g-ink-2) !important;
}

body.tool-page .control-label span:last-child {
    font-family: var(--g-font-mono);
    font-weight: 500 !important;
    color: var(--g-gold) !important;
}

body.tool-page .explanation-card li::before,
body.tool-page .help-box li::before {
    content: "◆" !important;
    color: var(--g-gold) !important;
    font-size: 0.55em !important;
    background: none !important;
}

body.tool-page .formula-box,
body.tool-page .help-box {
    background: var(--g-panel-2) !important;
    border: 0 !important;
    border-left: 2px solid var(--g-gold) !important;
}

body.tool-page .canvas-container>canvas {
    background-color: var(--g-canvas);
}

body.tool-page button:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)),
body.tool-page .preset-option,
body.tool-page .g-button {
    min-height: 36px;
    padding: 7px 14px;
    font-family: var(--g-font-sans) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    color: var(--g-ink) !important;
    background: transparent !important;
    border: 1px solid var(--g-rule-strong) !important;
    transform: none !important;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease !important;
}

body.tool-page button:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)):hover,
body.tool-page .preset-option:hover,
body.tool-page .g-button:hover {
    color: var(--g-gold) !important;
    background: transparent !important;
    border-color: var(--g-gold) !important;
    transform: none !important;
}

body.tool-page button[aria-pressed="true"]:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)),
body.tool-page button.active:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)),
body.tool-page .preset-option.active,
body.tool-page .g-button.active {
    color: var(--g-gold) !important;
    background: var(--g-gold-soft) !important;
    border-color: var(--g-gold) !important;
}

body.tool-page button.primary:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)),
body.tool-page button[type="submit"]:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)),
body.tool-page .g-button.primary {
    color: var(--g-on-gold) !important;
    background: var(--g-gold) !important;
    border-color: var(--g-gold) !important;
}

body.tool-page button.primary:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)):hover,
body.tool-page button[type="submit"]:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)):hover,
body.tool-page .g-button.primary:hover {
    color: var(--g-bg) !important;
    background: var(--g-ink) !important;
    border-color: var(--g-ink) !important;
}

body.tool-page button.danger:where(:not(#dark-mode-button, #navbar-toggle, .card-toggle)) {
    color: var(--g-rose) !important;
    border-color: var(--g-rose) !important;
}

body.tool-page button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

body.tool-page .card-toggle {
    color: var(--g-ink) !important;
    background: transparent !important;
    border: 0 !important;
}

body.tool-page .toggle-icon {
    color: var(--g-ink-3) !important;
}

body.tool-page input[type="text"],
body.tool-page input[type="number"],
body.tool-page input[type="search"],
body.tool-page input[type="email"],
body.tool-page input[type="url"],
body.tool-page input:not([type]),
body.tool-page select,
body.tool-page textarea {
    color: var(--g-ink) !important;
    background-color: var(--g-bg) !important;
    border: 1px solid var(--g-rule) !important;
    font-family: var(--g-font-sans);
    transition: border-color 140ms ease !important;
}

body.tool-page nav input.gsc-input {
    background-color: var(--g-bg) !important;
    border-color: var(--g-rule-strong) !important;
}

body.tool-page input[type="number"],
body.tool-page textarea {
    font-family: var(--g-font-mono) !important;
}

body.tool-page input[type="text"]:hover,
body.tool-page input[type="number"]:hover,
body.tool-page select:hover,
body.tool-page textarea:hover {
    border-color: var(--g-rule-strong) !important;
}

body.tool-page input[type="text"]:focus,
body.tool-page input[type="number"]:focus,
body.tool-page input[type="search"]:focus,
body.tool-page select:focus,
body.tool-page textarea:focus {
    outline: none !important;
    border-color: var(--g-gold) !important;
}

body.tool-page select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a8250' stroke-width='1.2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 10px 6px !important;
}

body.tool-page select option {
    color: var(--g-ink);
    background: var(--g-panel);
}

body.tool-page input[type="checkbox"],
body.tool-page input[type="radio"] {
    accent-color: var(--g-gold);
}

body.tool-page input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 2px !important;
    margin: 10px 0;
    background: var(--g-rule-strong) !important;
    border: 0 !important;
    accent-color: var(--g-gold);
    cursor: pointer;
}

body.tool-page input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
}

body.tool-page input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px !important;
    height: 12px !important;
    margin-top: 0;
    background: var(--g-gold) !important;
    border: 2px solid var(--g-panel) !important;
    outline: 1px solid var(--g-gold);
    transform: rotate(45deg) !important;
    cursor: pointer;
}

body.tool-page input[type="range"]::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    background: var(--g-gold) !important;
    border: 2px solid var(--g-panel) !important;
    outline: 1px solid var(--g-gold);
    transform: rotate(45deg) !important;
    cursor: pointer;
}

body.tool-page input[type="range"]::-moz-range-track {
    height: 2px;
    background: var(--g-rule-strong);
    border: 0;
}

body.tool-page input[type="range"]:hover::-webkit-slider-thumb {
    background: var(--g-ink) !important;
    outline-color: var(--g-ink);
}

body.tool-page .toggle-slider {
    background: transparent !important;
    border: 1px solid var(--g-rule-strong) !important;
}

body.tool-page .toggle-slider::before {
    width: 14px !important;
    height: 14px !important;
    left: 4px !important;
    bottom: 4px !important;
    background: var(--g-ink-3) !important;
}

body.tool-page .toggle-switch input:checked+.toggle-slider {
    background: var(--g-gold-soft) !important;
    border-color: var(--g-gold) !important;
}

body.tool-page .toggle-switch input:checked+.toggle-slider::before {
    background: var(--g-gold) !important;
}

body.tool-page table th {
    font-family: var(--g-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--g-ink-2);
}

body.tool-page .toast {
    font-family: var(--g-font-sans);
    background: var(--g-panel) !important;
    color: var(--g-ink) !important;
    border: 1px solid var(--g-rule-strong) !important;
    border-left: 2px solid var(--g-gold) !important;
}

body.tool-page .toast-icon {
    font-family: var(--g-font-mono);
    color: var(--g-gold);
}

body.tool-page {
    scrollbar-color: var(--g-rule-strong) transparent;
}

body.tool-page footer {
    border-top-color: var(--g-rule-strong);
}