:root { --bg: #0f1419; --bg-2: #161c25; --panel: #1a2028; --panel-2: #232a35; --text: #e1e3e8; --text-dim: #8a91a0; --gold: #d4af37; --red: #d8556a; --green: #68d36e; --card-bg: #f4f0e6; --card-bg-2: #e8e0cd; --card-red: #b22230; --card-black: #1c1c1c; --border: #2c3340; --border-2: #3a4252; --primary-fg: #1c1c1c; --button-hover-bg: #2d3645; --primary-hover-bg: #e6c14f; --backdrop: rgba(0,0,0,0.7); --shadow: rgba(0,0,0,0.4); --glow: rgba(212,175,55,0.55); --glow-soft: rgba(212,175,55,0.2); --safe-bottom: env(safe-area-inset-bottom); --safe-top: env(safe-area-inset-top); --bar-h: calc(38px + var(--safe-top)); } :root[data-theme="light"] { --bg: #DDD5D0; --bg-2: #CFC0BD; --panel: #DDD5D0; --panel-2: #CFC0BD; --text: #586F6B; --text-dim: #7F9183; --gold: #586F6B; --red: #586F6B; --green: #7F9183; --border: #B8B8AA; --border-2: #7F9183; --primary-fg: #DDD5D0; --button-hover-bg: #B8B8AA; --primary-hover-bg: #7F9183; --backdrop: rgba(88,111,107,0.45); --shadow: rgba(88,111,107,0.25); --glow: rgba(88,111,107,0.55); --glow-soft: rgba(88,111,107,0.25); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; min-height: 100vh; min-height: 100dvh; max-width: 100%; -webkit-tap-highlight-color: transparent; } /* Clip horizontal overflow + contain overscroll on the ROOT scroller only. Putting these on as well turned it into a second, content-sized scroll container whose `overscroll-behavior: contain` swallowed wheel/trackpad scrolling (scrollbar drag still worked). Confining them to keeps wheel scrolling working normally. */ html { overflow-x: hidden; overscroll-behavior: contain; } h1, h2, h3 { margin: 0 0 12px; font-family: "Georgia", "Times New Roman", serif; } h1 { font-size: 44px; letter-spacing: -1px; } h2 { font-size: 22px; } h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); font-weight: 600; margin-bottom: 8px; } .muted { color: var(--text-dim); } .small { font-size: 12px; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px; } button { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-2); padding: 12px 16px; border-radius: 8px; cursor: pointer; font-size: 15px; font-family: inherit; min-height: 44px; transition: background 0.15s, border-color 0.15s, transform 0.05s; } button:hover:not(:disabled) { background: var(--button-hover-bg); border-color: var(--gold); } button:active:not(:disabled) { transform: translateY(1px); } button:disabled { opacity: 0.35; cursor: not-allowed; } button.primary { background: var(--gold); color: var(--primary-fg); border-color: var(--gold); font-weight: 700; } button.primary:hover:not(:disabled) { background: var(--primary-hover-bg); border-color: var(--primary-hover-bg); } input[type="text"] { background: var(--bg-2); color: var(--text); border: 1px solid var(--border-2); padding: 12px 14px; border-radius: 8px; font-size: 16px; font-family: inherit; width: 100%; min-height: 44px; } input[type="text"]:focus { outline: none; border-color: var(--gold); } kbd { background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11px; } .site-bar { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); padding: var(--safe-top) calc(8px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)); background: var(--bg-2); border-bottom: 1px solid var(--border); } .site-logo { font-family: "Georgia", "Times New Roman", serif; font-size: 11px; letter-spacing: 2px; color: var(--gold); user-select: none; } #theme-toggle { min-height: 26px; min-width: 32px; padding: 2px 10px; font-size: 13px; border-radius: 13px; background: transparent; border: 1px solid var(--border-2); color: var(--text-dim); } #theme-toggle:hover:not(:disabled) { color: var(--text); background: var(--button-hover-bg); border-color: var(--gold); }