/* =================================================================== Skribbl Solver - "Graphite Iris" design system Precision-tool surface: blue-grey neutral ramp, hairline borders, one iris accent for interaction, marker-yellow reserved for the moments that echo skribbl.io (mark highlight, picker hover swipe, pattern-input caret, brand nib). Single plain CSS file, no build step. Both themes are first-class token sets driven by [data-theme] on . =================================================================== */ /* ===== Tokens ===== Discipline: in dark theme --primary is for fills and rings; text on tinted surfaces uses --primary-strong (--link covers anchors). --mark-bg/--mark-text are a paired unit, never mixed with others. --accent is fill/caret/glyph only, never body text. Every load-bearing color-mix() sits after a plain fallback. */ :root { --bg: #f7f8fa; --surface: #ffffff; --surface2: #f1f2f5; --border: #e4e6eb; --border-strong: #d2d5dd; --text: #16181d; --text-muted: #5e6573; --primary: #4f46e5; --primary-hover: #4338ca; --primary-text: #ffffff; --primary-strong: #4338ca; --primary-tint: #edeefc; --link: #4f46e5; --ring-soft: rgba(79, 70, 229, 0.18); --accent: #eab308; --mark-bg: #fde047; --mark-text: #4a3a05; --picker-hover: color-mix(in srgb, #fde047 28%, transparent); --success: #0a7d59; --success-hover: #086b4d; --success-text: #ffffff; --danger: #dc2626; --danger-bg: #fdecec; --chip-bg: #f4f5f7; --chip-text: #2a2e37; --chip-border: #e4e6eb; --banner-bg: #faf6e8; --banner-border: #e6dcb1; --banner-text: #6d5712; --disclaimer-bg: #f1f2f5; --disclaimer-border: #e4e6eb; --disclaimer-text: #5e6573; --shared-bg: #e7f6ee; --shared-border: #bfe5cf; --shared-text: #135c43; --header-glass: rgba(255, 255, 255, 0.78); --scroll-thumb: #cdd1d9; --scroll-thumb-hover: #b3b9c4; --selection-bg: #dadefc; --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65); --shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.05); --shadow: 0 1px 2px rgba(16, 18, 24, 0.04), 0 4px 12px -2px rgba(16, 18, 24, 0.06); --shadow-lg: 0 2px 4px rgba(16, 18, 24, 0.05), 0 12px 32px -8px rgba(16, 18, 24, 0.14); /* Theme-invariant structure */ --radius: 10px; --radius-sm: 6px; --radius-xs: 4px; --radius-pill: 999px; --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, monospace; --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1); --t-med: 180ms cubic-bezier(0.2, 0, 0, 1); --transition: 120ms cubic-bezier(0.2, 0, 0, 1); /* legacy alias */ } [data-theme="dark"] { --bg: #0e1015; --surface: #15171e; --surface2: #1c1f27; --border: #262a33; --border-strong: #353b47; --text: #e8eaef; --text-muted: #9aa1ad; --primary: #7b87ff; --primary-hover: #8f99ff; --primary-text: #0e1015; --primary-strong: #aab2ff; --primary-tint: #20253c; --link: #aab2ff; --ring-soft: rgba(123, 135, 255, 0.25); --accent: #e8b931; --mark-bg: #4d3f0a; --mark-text: #fde047; --picker-hover: color-mix(in srgb, #fde047 12%, transparent); --success: #2fd49c; --success-hover: #45dcaa; --success-text: #0e1015; --danger: #f87171; --danger-bg: #2a1518; --chip-bg: #1c2028; --chip-text: #ced3dc; --chip-border: #2b303b; --banner-bg: #211c0e; --banner-border: #423818; --banner-text: #ddbf57; --disclaimer-bg: #15171e; --disclaimer-border: #262a33; --disclaimer-text: #9aa1ad; --shared-bg: #11241c; --shared-border: #1f4634; --shared-text: #63d6a4; --header-glass: rgba(21, 23, 30, 0.75); --scroll-thumb: #333947; --scroll-thumb-hover: #455062; --selection-bg: #343a6e; --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -8px rgba(0, 0, 0, 0.55); } /* ===== Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); line-height: 1.55; min-height: 100vh; transition: background-color var(--t-med), color var(--t-med); } ::selection { background: var(--selection-bg); } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* Keyboard-nav focus: bold ring. Typing focus on text fields is the calmer border + soft ring instead (see inputs). */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } input[type="text"]:focus-visible, input[type="number"]:focus-visible, textarea:focus-visible { outline: none; } button { font-family: inherit; font-size: 0.8125rem; font-weight: 500; height: 32px; padding: 0 0.9rem; border: none; border-radius: var(--radius-sm); background: none; color: inherit; white-space: nowrap; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); } button:active { transform: translateY(0.5px); } button:disabled { opacity: 0.5; cursor: default; } input[type="text"], input[type="number"] { font-family: inherit; font-size: 0.8125rem; height: 32px; width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 0.75rem; background: var(--surface); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); } input[type="number"] { font-variant-numeric: tabular-nums; } input::placeholder, textarea::placeholder { color: var(--text-muted); color: color-mix(in srgb, var(--text-muted) 60%, transparent); } input[type="text"]:focus, input[type="number"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-soft); } input[type="checkbox"] { accent-color: var(--primary); } /* ===== Scrollbars ===== */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; } /* ===== Header: glass sticky bar + brand nib ===== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); /* fallback first */ background: var(--header-glass); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--border); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--surface); } } .header-inner { max-width: 1100px; margin: 0 auto; padding: 0.55rem 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .site-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: center; gap: 0.45rem; text-decoration: none; flex: 1; min-width: 0; } .site-title:hover { text-decoration: none; } .site-title .logo-icon { color: var(--primary); flex-shrink: 0; } .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* ===== Buttons ===== */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; height: 30px; padding: 0 0.6rem; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.8125rem; font-weight: 500; } .btn-icon:hover { background: var(--surface2); border-color: var(--border-strong); text-decoration: none; } a.btn-icon { color: var(--text); } .btn-primary { background: var(--primary); color: var(--primary-text); font-weight: 600; box-shadow: var(--edge-highlight), var(--shadow-sm); } .btn-primary:hover { background: var(--primary-hover); text-decoration: none; } a.btn-primary { display: inline-flex; align-items: center; gap: 0.3rem; height: 30px; padding: 0 0.9rem; border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--primary-text); } .btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: var(--surface2); border-color: var(--border-strong); } .btn-success { background: var(--success); color: var(--success-text); font-weight: 600; } .btn-success:hover { background: var(--success-hover); } .btn-ghost { background: transparent; color: var(--text-muted); font-size: 0.75rem; height: 28px; padding: 0 0.55rem; } .btn-ghost:hover { background: var(--surface2); color: var(--text); } /* ===== Banners: thin system-notice strips with a left accent bar ===== */ .banner { padding: 0.45rem 1rem; font-size: 0.78rem; line-height: 1.5; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .banner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: 0.85; } .banner a:hover { opacity: 1; } .banner-storage { background: var(--banner-bg); border-bottom-color: var(--banner-border); color: var(--banner-text); box-shadow: inset 3px 0 0 var(--banner-border); } .banner-shared { background: var(--shared-bg); border-bottom-color: var(--shared-border); color: var(--shared-text); box-shadow: inset 3px 0 0 var(--shared-border); justify-content: center; } .banner-close { margin-left: auto; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-xs); font-size: 0.85rem; color: inherit; opacity: 0.7; } .banner-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); /* fallback first */ background: color-mix(in srgb, currentColor 10%, transparent); } /* ===== Main Content ===== */ .main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; display: flex; flex-direction: column; gap: 2rem; } /* ===== Card ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow); } [data-theme="dark"] .card { box-shadow: var(--shadow), var(--edge-highlight); } .card-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } /* ===== List Picker Panel ===== */ .list-picker-panel { border: 1px solid var(--border); border-radius: 8px; max-height: clamp(260px, 38vh, 380px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--surface); } /* Opaque sticky header: no backdrop-filter inside scroll containers */ .picker-group-header { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.75rem; background: var(--surface2); border-block: 1px solid var(--border); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); position: sticky; top: 0; z-index: 1; } .picker-group-header .group-toggle-all { height: auto; font-size: 0.72rem; font-weight: 500; text-transform: none; letter-spacing: 0; background: none; border: none; border-radius: var(--radius-xs); color: var(--link); cursor: pointer; padding: 0.1rem 0.3rem; } .picker-group-header .group-toggle-all:hover { text-decoration: underline; } .picker-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; cursor: pointer; font-size: 0.8125rem; transition: background var(--t-fast); } /* Highlighter-swipe hover: the marker-yellow brand moment */ .picker-item:hover { background: var(--surface2); /* fallback first */ background: var(--picker-hover); } /* Checked rows scan instantly; :has degrade is cosmetic-only */ .picker-item:has(input:checked) { background: var(--primary-tint); /* fallback first */ background: color-mix(in srgb, var(--primary) 6%, transparent); } /* Row-level keyboard focus: the focusable element is the checkbox child */ .picker-item:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; } .picker-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); } .picker-item label { cursor: pointer; flex: 1; } .picker-controls { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; } /* ===== Section layout ===== */ .section-row { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; align-items: start; } @media (max-width: 700px) { .section-row { grid-template-columns: 1fr; } } .section-left { display: flex; flex-direction: column; gap: 0.75rem; } .section-right { display: flex; flex-direction: column; gap: 0.75rem; } /* Custom tab hides the left picker panel and spans full width */ .section-row.custom-tab-active { grid-template-columns: 1fr; } .section-row.custom-tab-active .section-left { display: none; } /* ===== Custom Word List textarea ===== */ .custom-words-textarea { width: 100%; min-height: 96px; resize: vertical; padding: 0.6rem 0.75rem; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .custom-words-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-soft); } .custom-words-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } .custom-word-count { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: auto; } /* ===== Search / Pattern Input ===== */ .pattern-row { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; } .pattern-col { display: flex; flex-direction: column; gap: 0.25rem; } .pattern-col-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; line-height: 1.3; } .pattern-col-label small { font-weight: 400; font-size: 0.65rem; } .pattern-input-blanks { flex: 7; min-width: 120px; } .pattern-input-count { flex: 3; min-width: 80px; } .pattern-input-wrap { position: relative; min-width: 0; } /* Mono letterboxes with the marker-yellow caret */ .pattern-input-wrap input { font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; height: 36px; width: 100%; padding: 0 2rem 0 0.7rem; caret-color: var(--accent); } .pattern-input-wrap input::placeholder { letter-spacing: 0.12em; } .clear-btn { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--radius-xs); font-size: 0.9rem; color: var(--text-muted); cursor: pointer; line-height: 1; } .clear-btn:hover { color: var(--text); background: var(--surface2); } .clear-btn:active { transform: translateY(-50%); } /* keep centered while pressed */ .pattern-clear-col { flex-shrink: 0; justify-content: flex-end; } /* Standalone clear: circular ghost button matching input height */ .pattern-clear-col .clear-btn { position: static; transform: none; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; font-size: 0.95rem; } .pattern-clear-col .clear-btn:hover { background: var(--surface2); color: var(--text); } .pattern-clear-col .clear-btn:active { transform: none; } /* ===== Length Filter ===== */ .len-filter { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; flex-wrap: wrap; } .len-filter label { color: var(--text-muted); white-space: nowrap; } .len-filter input[type="number"] { width: 58px; padding: 0 0.4rem; height: 30px; text-align: center; } .len-filter .btn-secondary { margin-left: auto; } .controls-row-wrap { display: flex; flex-direction: column; gap: 0.3rem; } /* ===== Results Header ===== */ .results-header { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .results-header .btn-secondary { margin-left: auto; } .results-count { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; } .limit-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; } .word-count-badge { font-family: var(--font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; background: var(--surface2); color: var(--text-muted); border-radius: var(--radius-pill); padding: 0.15rem 0.6rem; border: 1px solid var(--border); font-weight: 500; } /* ===== Word Chip Grid ===== The scroll region reads as a canvas before any chips render. */ .word-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 48px; max-height: clamp(320px, 48vh, 540px); overflow-y: auto; padding: 0.4rem; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--surface2); /* fallback first */ background: color-mix(in srgb, var(--surface2) 50%, transparent); border: 1px solid var(--border); border-radius: 8px; } /* Letter-tile chips engineered for hundreds on screen: no transforms, no shadows, color-only hover. */ .word-chip { display: inline-flex; align-items: baseline; gap: 0.3em; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.45; padding: 0.125rem 0.45rem; background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); border-radius: var(--radius-xs); user-select: none; transition: border-color var(--t-fast), background var(--t-fast); } .word-chip:hover { border-color: var(--border-strong); background: var(--surface); /* fallback first */ background: color-mix(in srgb, var(--primary) 6%, var(--chip-bg)); } .word-chip .chip-len { font-size: 0.65rem; color: var(--text-muted); font-style: normal; font-variant-numeric: tabular-nums; } /* The brand moment: marker-yellow letter reveal, both themes */ .word-chip mark { background: var(--mark-bg); color: var(--mark-text); border-radius: 2px; padding: 0 1px; font-weight: 700; } .empty-state { font-size: 0.8125rem; color: var(--text-muted); font-style: normal; padding: 0.9rem 0.25rem; } .empty-state::before { content: "\270E\00A0"; color: var(--accent); } /* ===== Tool Tabs: segmented control ===== */ .tool-tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tool-tabs::-webkit-scrollbar { display: none; } .tab-btn { height: auto; border: none; border-radius: 5px; margin-bottom: 0; background: transparent; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; padding: 0.35rem 0.8rem; display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } .tab-btn:hover { color: var(--text); background: transparent; } .tab-btn.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); } .tab-btn.active svg { color: var(--primary); } .tab-btn:active { transform: none; } .tab-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } @media (max-width: 400px) { .tab-btn { font-size: 0.78rem; padding: 0.35rem 0.6rem; } } .tab-panel { display: flex; flex-direction: column; gap: 0.85rem; } /* ===== Builder controls ===== */ .builder-controls { display: flex; flex-direction: column; gap: 0.75rem; } .count-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } .count-presets label { font-size: 0.78rem; color: var(--text-muted); } .preset-btn { height: 28px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 0.78rem; font-variant-numeric: tabular-nums; padding: 0 0.65rem; border-radius: var(--radius-sm); font-family: inherit; } .preset-btn:hover { border-color: var(--border-strong); } .preset-btn.active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); font-weight: 600; } .custom-count-wrap { display: flex; align-items: center; gap: 0.3rem; } .custom-count-wrap input { width: 72px; text-align: center; } .action-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* ===== Builder preview filter ===== */ .preview-filter-wrap { position: relative; } .preview-filter-wrap input { padding-right: 2rem; } /* ===== Saved Combos ===== */ .saved-combos-section { margin-top: 0.5rem; } .combos-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.07em; } .combo-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; } .combo-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; } .combo-restore { flex: 1; height: auto; text-align: left; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; font-size: 0.78rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-restore:hover { background: var(--surface2); border-color: var(--border-strong); } .combo-delete { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); font-size: 0.85rem; line-height: 1; border-radius: var(--radius-xs); } .combo-delete:hover { color: var(--danger); background: var(--danger-bg); } .save-combo-row { display: flex; gap: 0.4rem; margin-top: 0.4rem; } .save-combo-row input { flex: 1; } /* ===== Share URL ===== */ .share-row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } /* ===== Footer ===== */ .site-footer { text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 2.5rem 1rem 2rem; border-top: 1px solid var(--border); max-width: 1100px; margin: 0 auto; } .site-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .site-footer a:hover { color: var(--text); } .site-footer p + p { margin-top: 0.35rem; } .site-footer .build-sha { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.75; } /* ===== Utility ===== */ .builder-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; } .custom-hint { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; } .builder-hint a, .custom-hint a { text-decoration: underline; text-underline-offset: 2px; } .divider { border: none; border-top: 1px solid var(--border); margin: 0.85rem 0; } .hidden { display: none !important; } .copied-flash { font-size: 0.78rem; color: var(--success); font-weight: 600; animation: fadeOut 1.8s ease forwards; } @keyframes fadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* ===== Spinner ===== */ .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== Responsive tweaks ===== */ @media (max-width: 480px) { .header-inner { gap: 0.5rem; } .card { padding: 1rem; } .action-row { gap: 0.4rem; } .site-title span.title-label { display: none; } } /* ===== 404 Error Page ===== */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 2rem 1rem; gap: 0.75rem; } .error-code { font-family: var(--font-mono); font-size: clamp(4rem, 18vw, 6rem); font-weight: 600; line-height: 1; color: var(--primary); letter-spacing: -0.04em; } /* Blinking marker-yellow terminal caret */ .error-code::after { content: ""; display: inline-block; width: 0.12em; height: 0.78em; margin-left: 0.08em; background: var(--accent); animation: blink 1.1s steps(2, start) infinite; } @keyframes blink { to { visibility: hidden; } } .error-title { font-size: 1.25rem; font-weight: 600; } .error-desc { color: var(--text-muted); max-width: 380px; font-size: 0.875rem; } .error-page .btn-primary { height: 36px; padding: 0 1.1rem; } /* ===== Privacy / Prose Pages ===== */ .prose { max-width: 680px; margin: 2rem auto; padding: 0 1rem 3rem; } .prose h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.25rem; } .prose .subtitle { color: var(--text-muted); font-size: 0.8125rem; margin-bottom: 2rem; } .prose h2 { font-size: 1.0625rem; font-weight: 600; margin: 2rem 0 0.5rem; } .prose p, .prose ul { font-size: 0.9375rem; margin-bottom: 0.75rem; line-height: 1.7; } .prose ul { padding-left: 1.4rem; } .prose li { margin-bottom: 0.3rem; } .prose code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.05em 0.35em; } .prose .notice { background: var(--disclaimer-bg); border: 1px solid var(--disclaimer-border); color: var(--disclaimer-text); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.8125rem; margin-bottom: 1.5rem; box-shadow: inset 3px 0 0 var(--disclaimer-border); } .back-link { display: inline-block; margin-bottom: 1.5rem; font-size: 0.8125rem; color: var(--link); } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } /* opacity-only fade is not motion: keep the confirmation visible */ .copied-flash { animation-duration: 1.8s !important; } .error-code::after { animation: none; } html { scroll-behavior: auto; } }