/* Fonts loaded from HTML (preconnect + non-blocking) — no CSS @import */
:root {
/* Typography — display (titles) / UI body / runes only */
--font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
--font-ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-runes: 'Noto Sans Runic', 'Segoe UI Historic', 'Segoe UI Symbol', sans-serif;
--bg-page-start: #FDFCFB;
--bg-page-end: #E4DED4;
--bg-panel: linear-gradient(155deg, #ffffff 0%, #faf7f2 55%, #f5f1ea 100%);
/* Warm parchment well — depth under the runes */
--bg-canvas: #F1EDE4;
--text-primary: #2C2A28;
--text-secondary: #4A4842;
/* Logo red + ink depth (pure #FF0000 stays brand-true) */
--text-runes: #FF0000;
/*
* Light runes: multi-layer “carved ink on parchment”
* (match dark-mode richness: highlight + drop + soft red bloom)
*/
--rune-relief:
0 1px 0 rgba(255, 255, 255, 0.65),
0 0 0.6px rgba(90, 12, 8, 0.45),
0 1px 2px rgba(60, 18, 10, 0.22),
0 3px 8px rgba(40, 20, 10, 0.14),
0 0 12px rgba(255, 35, 25, 0.2),
0 0 28px rgba(200, 40, 25, 0.12);
--rune-relief-lg:
0 1px 0 rgba(255, 255, 255, 0.7),
0 0 0.8px rgba(80, 10, 6, 0.5),
0 2px 4px rgba(50, 15, 8, 0.2),
0 4px 14px rgba(30, 15, 8, 0.14),
0 0 16px rgba(255, 40, 30, 0.26),
0 0 40px rgba(200, 35, 25, 0.14);
--accent: #A68A4E;
--accent-hover: #8A703C;
--accent-light: rgba(166, 138, 78, 0.14);
/* High-contrast chip/button fill (WCAG AA ≥ 4.5:1 with fg) */
--chip-active-bg: #3D3424;
--chip-active-fg: #FDFCFB;
--border-light: #DDD7CC;
--border-highlight: rgba(255, 255, 255, 0.9);
--border-focus: #C4BDB0;
--shadow-sm: 0 4px 12px rgba(45, 35, 20, 0.06), 0 1px 3px rgba(45, 35, 20, 0.04);
--shadow-md: 0 16px 36px rgba(45, 35, 20, 0.09), 0 6px 14px rgba(45, 35, 20, 0.05);
--shadow-lg: 0 28px 55px rgba(45, 35, 20, 0.11), 0 12px 24px rgba(45, 35, 20, 0.06);
--inner-shadow: inset 0 5px 16px rgba(60, 45, 25, 0.07), inset 0 1px 4px rgba(60, 45, 25, 0.04);
--radius-sm: 14px;
--radius-md: 22px;
--radius-lg: 32px;
--success: #4A7C59;
--block-bg: #ffffff;
--empty-state: #5C584E;
/* Updated live by JS from the spacing slider (0–20) */
--rune-letter-spacing: 0.15em;
--rune-v-gap-px: 30px;
--focus-ring: 0 0 0 3px var(--accent-light);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 200ms;
}
/* html.dark-theme: set in before paint (no FOUC). body.dark-theme: runtime toggle. */
html.dark-theme,
body.dark-theme {
--bg-page-start: #2C2C2E;
--bg-page-end: #1C1C1E;
--bg-panel: linear-gradient(145deg, #353538, #2A2A2D);
/* Slightly warmer/lifted canvas so pure red has a surface to sit on */
--bg-canvas: #262428;
--text-primary: #F2F2F5;
--text-secondary: #C4C4CA;
/*
* Dark runes: pure #FF0000 blooms/vibrates on near-black and looks flat
* because the light-mode black drop-shadow disappears into the canvas.
* Soften chroma a touch + ember glow for depth (not neon flat).
*/
--text-runes: #FF4A4A;
--rune-relief:
0 0 0.5px rgba(0, 0, 0, 0.85),
0 1px 0 rgba(255, 220, 200, 0.1),
0 0 10px rgba(255, 55, 55, 0.32),
0 0 22px rgba(255, 40, 40, 0.16),
0 2px 6px rgba(0, 0, 0, 0.55);
--rune-relief-lg:
0 0 0.5px rgba(0, 0, 0, 0.9),
0 1px 0 rgba(255, 220, 200, 0.12),
0 0 14px rgba(255, 60, 60, 0.38),
0 0 32px rgba(255, 45, 45, 0.2),
0 3px 10px rgba(0, 0, 0, 0.6);
--accent: #C7AA6E;
--accent-hover: #DFBF7E;
--accent-light: rgba(199, 170, 110, 0.12);
--chip-active-bg: #F0E2B6;
--chip-active-fg: #1C1C1E;
--border-light: #404044;
--border-highlight: rgba(255, 255, 255, 0.03);
--border-focus: #5A5A60;
--shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 15px 35px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.35), 0 10px 25px rgba(0, 0, 0, 0.2);
--inner-shadow: inset 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 3px rgba(0,0,0,0.08);
--success: #63A877;
--block-bg: #2D2D30;
--empty-state: #B0B1B6;
color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background:
radial-gradient(900px 480px at 8% -5%, rgba(166, 138, 78, 0.14), transparent 55%),
radial-gradient(700px 420px at 95% 8%, rgba(255, 40, 30, 0.07), transparent 52%),
radial-gradient(600px 380px at 50% 100%, rgba(166, 138, 78, 0.06), transparent 55%),
radial-gradient(circle at top left, var(--bg-page-start) 0%, var(--bg-page-end) 100%);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 1.015rem;
font-weight: 400;
line-height: 1.55;
font-optical-sizing: auto;
font-feature-settings: "kern" 1, "liga" 1;
letter-spacing: 0.005em;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 2rem 1.75rem 1.6rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: background 0.4s ease, color 0.4s ease;
}
html.dark-theme body,
body.dark-theme {
background:
radial-gradient(900px 480px at 8% -5%, rgba(199, 170, 110, 0.1), transparent 55%),
radial-gradient(700px 420px at 95% 10%, rgba(255, 60, 60, 0.06), transparent 50%),
radial-gradient(circle at top left, var(--bg-page-start) 0%, var(--bg-page-end) 100%);
}
.controls-panel, .canvas-wrapper, .rune-canvas, .translation-block, .info-box, textarea, .studio-bar {
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.app-container {
width: 100%;
max-width: 1480px;
display: grid;
grid-template-columns: 520px 1fr;
gap: 2.8rem;
align-items: stretch;
}
.controls-panel {
background: var(--bg-panel);
border-radius: var(--radius-lg);
padding: 2.35rem 2.25rem;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: 1.35rem;
border: 1px solid var(--border-light);
border-top: 2px solid var(--border-highlight);
border-left: 1px solid var(--border-highlight);
/* No max-height/inner scroll: accordion content must stay fully reachable via page scroll */
position: sticky;
top: 1rem;
align-self: start;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
gap: 0.75rem;
}
.logo-title-wrap {
display: flex;
align-items: center;
gap: 0.95rem;
min-width: 0;
}
/*
* Brand mark: 3D tile with logo (not plain logo.png).
* Light = parchment canvas · Dark = chip brown (#3D3424 family)
*/
.brand-mark {
--s: 56px;
width: var(--s);
height: var(--s);
border-radius: calc(var(--s) * 0.28);
flex-shrink: 0;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
/*
* Light: bright parchment + same pop craft as dark
* (hard specular, gold rim glow, soft depth — mirrors bronze tile)
*/
background:
radial-gradient(ellipse 100% 70% at 26% 8%, rgba(255, 255, 255, 1), transparent 48%),
radial-gradient(ellipse 55% 40% at 50% 42%, rgba(199, 170, 110, 0.18), transparent 58%),
radial-gradient(ellipse 75% 55% at 74% 90%, rgba(120, 90, 50, 0.16), transparent 54%),
linear-gradient(150deg, #FFFFFF 0%, #FBF7EF 32%, #F0E8D6 64%, #E0D5C0 100%);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 1),
inset 0 -2px 7px rgba(100, 75, 40, 0.12),
inset 0 0 0 1px rgba(199, 170, 110, 0.32),
0 1px 0 rgba(255, 255, 255, 0.95),
0 6px 18px rgba(45, 35, 20, 0.16),
0 0 32px rgba(199, 170, 110, 0.22);
transform: translateZ(0);
}
html.dark-theme .brand-mark,
body.dark-theme .brand-mark {
/*
* Dark: polished bronze / chip-brown with gold sheen
* (more depth than flat #3D3424 — matches dark accent #C7AA6E)
*/
background:
radial-gradient(ellipse 90% 60% at 30% 12%, rgba(240, 226, 182, 0.28), transparent 42%),
radial-gradient(ellipse 70% 50% at 70% 85%, rgba(0, 0, 0, 0.45), transparent 50%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(199, 170, 110, 0.12), transparent 60%),
linear-gradient(150deg, #7A6A52 0%, #4E4232 38%, #3D3424 62%, #231E18 100%);
box-shadow:
inset 0 1px 0 rgba(240, 226, 182, 0.22),
inset 0 -2px 6px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(199, 170, 110, 0.2),
0 1px 0 rgba(255, 255, 255, 0.06),
0 6px 16px rgba(0, 0, 0, 0.5),
0 0 28px rgba(199, 170, 110, 0.16);
}
/* Disc behind logo for contrast */
.brand-mark::before {
content: "";
position: absolute;
width: 62%;
height: 62%;
border-radius: 50%;
/* Polished bronze well — specular + depth like dark’s gold disc */
background:
radial-gradient(circle at 32% 26%, #6E5C44 0%, #4A3E2C 40%, #3D3424 72%, #231E18 100%);
box-shadow:
inset 0 2px 5px rgba(255, 255, 255, 0.22),
inset 0 -2px 6px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(199, 170, 110, 0.28),
0 2px 8px rgba(45, 35, 20, 0.28),
0 0 12px rgba(199, 170, 110, 0.12);
}
html.dark-theme .brand-mark::before,
body.dark-theme .brand-mark::before {
/* Soft gold well — logo lifts off without a flat cream sticker look */
background:
radial-gradient(circle at 35% 30%, #F7E9C4 0%, #E8D4A0 42%, #C7AA6E 78%, #A68A4E 100%);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.35),
inset 0 -2px 5px rgba(80, 55, 20, 0.35),
0 0 0 1px rgba(240, 226, 182, 0.25),
0 2px 6px rgba(0, 0, 0, 0.35);
}
.brand-mark-logo {
position: relative;
z-index: 1;
width: 48%;
height: 48%;
object-fit: contain;
display: block;
/* Matching pop relief on light — same dual shadow craft as dark */
filter:
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35))
drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}
html.dark-theme .brand-mark-logo,
body.dark-theme .brand-mark-logo {
filter:
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2))
drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.header h1 {
font-family: var(--font-display);
font-size: 1.78rem;
line-height: 1.12;
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: 0.04em;
font-feature-settings: "kern" 1, "liga" 1;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.55rem;
flex-shrink: 0;
}
/* Compact pill: two round flags side by side */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 0.28rem;
padding: 0.28rem;
background: var(--bg-canvas);
border: 1px solid var(--border-light);
border-radius: 99px;
box-shadow: var(--shadow-sm);
}
.lang-flag {
position: relative;
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: block;
border: 2px solid transparent;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
transition:
transform var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
opacity var(--dur) var(--ease);
text-decoration: none;
opacity: 0.72;
}
.lang-flag .flag-svg {
width: 100%;
height: 100%;
display: block;
/* Slight zoom so circular crop looks full, not letterboxed */
transform: scale(1.08);
}
.lang-flag:hover {
opacity: 1;
transform: translateY(-1px) scale(1.06);
border-color: var(--accent);
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.1),
0 4px 12px var(--accent-light);
}
.lang-flag:focus-visible {
outline: none;
opacity: 1;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.lang-flag.is-active {
opacity: 1;
border-color: var(--accent);
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.08),
0 0 0 3px var(--accent-light),
var(--shadow-sm);
cursor: default;
pointer-events: none;
}
html.dark-theme .lang-flag,
body.dark-theme .lang-flag {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html.dark-theme .lang-flag.is-active,
body.dark-theme .lang-flag.is-active {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
0 0 0 3px var(--accent-light),
0 2px 8px rgba(0, 0, 0, 0.35);
}
.icon-btn {
background: var(--bg-canvas);
border: 1px solid var(--border-light);
color: var(--text-primary);
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.95rem;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
box-shadow: var(--shadow-sm);
text-decoration: none;
font-family: var(--font-ui);
font-weight: 600;
line-height: 1;
}
.icon-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 6px 16px var(--accent-light);
}
.icon-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring), var(--shadow-sm);
border-color: var(--accent);
}
/* Theme toggle: stacked sun/moon SVGs with soft crossfade + spin */
.theme-toggle {
color: var(--text-primary);
position: relative;
}
.theme-toggle .theme-icon {
position: relative;
width: 20px;
height: 20px;
display: block;
}
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon {
position: absolute;
inset: 0;
width: 20px;
height: 20px;
transition:
opacity 0.35s var(--ease),
transform 0.45s var(--ease),
color 0.25s ease;
}
/* Light mode → show moon (offer dark) */
.theme-toggle .theme-icon-moon {
opacity: 1;
transform: rotate(0deg) scale(1);
color: var(--text-secondary);
}
.theme-toggle .theme-icon-sun {
opacity: 0;
transform: rotate(-75deg) scale(0.55);
color: var(--accent);
pointer-events: none;
}
/* Dark mode → show sun (offer light) */
html.dark-theme .theme-toggle .theme-icon-moon,
body.dark-theme .theme-toggle .theme-icon-moon {
opacity: 0;
transform: rotate(70deg) scale(0.55);
pointer-events: none;
}
html.dark-theme .theme-toggle .theme-icon-sun,
body.dark-theme .theme-toggle .theme-icon-sun {
opacity: 1;
transform: rotate(0deg) scale(1);
color: var(--accent-hover);
}
.theme-toggle:hover .theme-icon-moon,
.theme-toggle:hover .theme-icon-sun {
color: var(--accent);
}
html.dark-theme .theme-toggle:hover .theme-icon-sun,
body.dark-theme .theme-toggle:hover .theme-icon-sun {
color: #f0d78a;
filter: drop-shadow(0 0 6px rgba(240, 215, 138, 0.45));
}
.theme-toggle:hover {
color: var(--accent);
}
.header p {
color: var(--text-secondary);
font-size: 0.98rem;
line-height: 1.68;
font-weight: 400;
margin-bottom: 0.55rem;
}
.header p:last-of-type { margin-bottom: 0; }
.header p.lead {
font-family: var(--font-display);
font-size: clamp(1.22rem, 2.2vw, 1.42rem);
font-weight: 600;
color: var(--text-primary);
line-height: 1.32;
letter-spacing: 0.025em;
margin-bottom: 0.6rem;
}
.header p.lead strong {
font-weight: 700;
color: var(--text-primary);
}
.header p.lead .lead-em {
display: inline;
font-weight: 500;
font-style: italic;
color: var(--accent);
letter-spacing: 0.015em;
}
.header p.sublead {
font-family: var(--font-ui);
font-size: 1.02rem;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.7;
letter-spacing: 0.01em;
margin-bottom: 0.55rem;
max-width: 32em;
}
/* Differentiator — between practical CTA and soft disclaimer */
.header p.pitch {
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.65;
letter-spacing: 0.01em;
margin-bottom: 0.7rem;
max-width: 34em;
}
.header p.pitch strong {
color: var(--text-primary);
font-weight: 600;
}
.disclaimer {
font-family: var(--font-ui);
font-size: 0.78rem;
color: var(--text-secondary);
opacity: 0.88;
font-style: italic;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.01em;
padding-top: 0.55rem;
border-top: 1px dashed var(--border-light);
}
.info-pitch {
margin: 0 0 1.1rem;
padding: 0.75rem 0.9rem;
font-size: 0.92rem;
line-height: 1.65;
color: var(--text-primary);
background: var(--accent-light);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.input-group { display: flex; flex-direction: column; gap: 0.55rem; }
.input-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.15rem;
}
.label {
font-family: var(--font-ui);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--text-secondary);
}
.clear-btn {
font-family: var(--font-ui);
font-size: 0.74rem;
font-weight: 500;
padding: 0.25rem 0.9rem;
border-radius: 99px;
background: var(--bg-canvas);
border: 1px solid var(--border-light);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.clear-btn:hover { background: var(--border-focus); color: var(--text-primary); }
.clear-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-color: var(--accent);
}
textarea {
width: 100%;
background: var(--bg-canvas);
border: 1px solid var(--border-light);
border-top: 1px solid var(--border-focus);
border-radius: var(--radius-sm);
padding: 1.15rem 1.25rem;
font-family: var(--font-ui);
font-size: 1.15rem;
font-weight: 400;
color: var(--text-primary);
resize: vertical;
min-height: 104px;
outline: none;
line-height: 1.55;
box-shadow: var(--inner-shadow);
letter-spacing: 0.015em;
font-optical-sizing: auto;
}
textarea:focus {
background: var(--block-bg);
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-light), var(--inner-shadow);
}
textarea::placeholder {
color: var(--border-focus);
font-weight: 400;
opacity: 0.75;
}
/* Studio controls */
.studio-panel {
background: var(--bg-canvas);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 1.05rem 1.15rem 1.2rem;
box-shadow: var(--inner-shadow);
display: flex;
flex-direction: column;
gap: 0.95rem;
}
.studio-row {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.studio-row-label {
font-family: var(--font-ui);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.09em;
font-weight: 600;
color: var(--text-secondary);
}
.chip-group {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.chip {
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 0.48rem 0.95rem;
border-radius: 99px;
background: var(--block-bg);
border: 1px solid var(--border-light);
color: var(--text-secondary);
cursor: pointer;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
line-height: 1.2;
}
.chip:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
}
.chip:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-color: var(--accent);
}
.chip[aria-pressed="true"],
.chip.active {
background: var(--chip-active-bg);
border-color: var(--chip-active-bg);
color: var(--chip-active-fg);
font-weight: 700;
box-shadow: 0 4px 12px rgba(61, 52, 36, 0.18);
}
html.dark-theme .chip[aria-pressed="true"],
html.dark-theme .chip.active,
body.dark-theme .chip[aria-pressed="true"],
body.dark-theme .chip.active {
box-shadow: 0 4px 14px rgba(240, 226, 182, 0.15);
}
.toggle-row {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.slider-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.slider-row input[type="range"] {
flex: 1;
accent-color: var(--accent);
cursor: pointer;
}
.slider-value {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
min-width: 2.5rem;
text-align: right;
}
.examples {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.1rem;
}
.example-btn {
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 0.38rem 0.95rem;
border-radius: 99px;
background: var(--bg-canvas);
border: 1px solid var(--border-light);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.example-btn:hover {
background: var(--chip-active-bg);
color: var(--chip-active-fg);
border-color: var(--chip-active-bg);
transform: translateY(-1px);
}
.example-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-color: var(--accent);
}
.history-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.history-item {
font-family: var(--font-ui);
font-size: 0.78rem;
font-weight: 500;
padding: 0.35rem 0.8rem;
border-radius: 99px;
background: var(--block-bg);
border: 1px dashed var(--border-light);
color: var(--text-secondary);
cursor: pointer;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.history-item:hover {
border-color: var(--accent);
color: var(--accent);
border-style: solid;
}
.history-empty {
font-family: var(--font-ui);
font-size: 0.84rem;
color: var(--text-secondary);
font-weight: 400;
font-style: italic;
}
.info-box {
background: var(--bg-canvas);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
box-shadow: var(--inner-shadow);
overflow: hidden; /* rounded corners; content not clipped when expanded (height grows) */
flex-shrink: 0;
}
.info-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1rem 1.3rem;
cursor: pointer;
user-select: none;
background: var(--bg-panel);
border: none;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
font: inherit;
color: inherit;
text-align: left;
border-radius: var(--radius-sm);
}
.info-box:not(.collapsed) .info-header {
border-bottom-color: var(--border-light);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.info-header:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--accent);
}
.info-header h2 {
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.info-toggle {
font-size: 1.05rem;
color: var(--accent);
transition: transform 0.3s ease;
}
.info-box.collapsed .info-content { display: none; }
.info-box.collapsed .info-toggle { transform: rotate(-90deg); }
/* Expanded accordion grows with content — page scroll shows everything */
.info-content {
padding: 1.25rem 1.35rem 1.55rem;
font-family: var(--font-ui);
font-size: 0.97rem;
color: var(--text-secondary);
line-height: 1.75;
font-weight: 400;
letter-spacing: 0.01em;
}
.info-content h4 {
font-family: var(--font-display);
color: var(--text-primary);
font-weight: 600;
font-size: 0.88rem;
text-transform: none;
letter-spacing: 0.03em;
margin: 1.45rem 0 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
line-height: 1.35;
}
.info-content h4:first-child { margin-top: 0; }
.info-content p { margin-bottom: 0.8rem; max-width: 42em; }
.info-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.info-link:hover {
color: var(--accent-hover);
text-decoration: underline;
}
.highlight-runes {
font-family: var(--font-runes);
font-size: 1.35em;
color: var(--text-runes);
font-weight: normal;
text-transform: none;
letter-spacing: normal;
}
.canvas-wrapper {
background: var(--bg-panel);
border-radius: var(--radius-lg);
padding: 1.55rem;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
border: 1px solid var(--border-light);
border-top: 2px solid var(--border-highlight);
min-width: 0;
gap: 0.85rem;
}
.rune-canvas {
flex: 1;
/* Light: soft red bloom + gold wash + bottom vignette on parchment */
background:
radial-gradient(ellipse 58% 42% at 50% 44%, rgba(255, 45, 30, 0.08), transparent 58%),
radial-gradient(ellipse 72% 52% at 50% 38%, rgba(166, 138, 78, 0.12), transparent 70%),
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(70, 50, 30, 0.05), transparent 55%),
var(--bg-canvas);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
box-shadow: var(--inner-shadow);
border: 1px solid var(--border-light);
min-height: 520px;
position: relative;
overflow: auto;
}
html.dark-theme .rune-canvas,
body.dark-theme .rune-canvas {
/* Soft ember pool under glyphs + warm gold wash — less “void + neon red” */
background:
radial-gradient(ellipse 58% 42% at 50% 44%, rgba(255, 55, 55, 0.07), transparent 58%),
radial-gradient(ellipse 70% 50% at 50% 40%, rgba(199, 170, 110, 0.09), transparent 70%),
var(--bg-canvas);
}
/* Focus mode: canvas becomes a fixed stage; focus-view fills it (no overlap).
CRITICAL: focus-view is position:absolute, so canvas must keep an explicit
min-height — otherwise height collapses on mobile (min-height:auto) and runes vanish. */
.rune-canvas.is-focus {
align-items: stretch;
justify-content: stretch;
padding: 0;
overflow: hidden;
min-height: 480px;
min-height: min(62vh, 560px);
}
.rune-canvas.mirror .rune-text,
.rune-canvas.mirror .focus-runes {
transform: scaleX(-1);
}
.quad-grid {
display: none;
width: 100%;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 1.6rem 1.4rem;
align-items: stretch;
animation: fadeIn 0.35s ease-out;
}
.quad-grid.active { display: grid; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.translation-block {
background:
linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, var(--block-bg) 100%);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 1.1rem 1.05rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
cursor: pointer;
position: relative;
box-shadow: var(--shadow-sm);
text-align: left;
font: inherit;
color: inherit;
width: 100%;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.translation-block:hover {
border-color: var(--accent);
box-shadow: 0 12px 32px var(--accent-light), 0 4px 12px rgba(45, 35, 20, 0.06);
transform: translateY(-2px);
}
html.dark-theme .translation-block,
body.dark-theme .translation-block {
background: var(--block-bg);
}
.translation-block:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring), var(--shadow-sm);
}
.translation-block.copied { border-color: var(--success); }
.translation-block.focused {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-light), var(--shadow-sm);
}
.runic-label {
font-family: var(--font-ui);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
font-weight: 600;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--accent-light);
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.rune-count-small {
font-size: 0.62rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-canvas);
padding: 2px 7px;
border-radius: 99px;
border: 1px solid var(--border-light);
letter-spacing: normal;
flex-shrink: 0;
}
.rune-text {
font-family: var(--font-runes);
color: var(--text-runes);
line-height: 1.25;
word-break: break-word;
white-space: pre-wrap;
transition: font-size 0.25s ease, letter-spacing 0.2s ease, line-height 0.2s ease, color 0.35s ease, text-shadow 0.35s ease;
/* Theme-aware relief (light = emboss, dark = ember glow) */
text-shadow: var(--rune-relief);
min-height: 2.4rem;
letter-spacing: var(--rune-letter-spacing);
text-align: center;
}
/* Vertical stack: each .rune-glyph is block; spacing = margin-bottom via --rune-v-gap-px */
.rune-text.vertical {
display: block !important;
letter-spacing: normal !important;
line-height: 1 !important;
min-height: 4rem;
margin: 0 auto;
white-space: normal !important;
word-break: normal;
text-align: center;
}
.transcription {
font-size: 0.78rem;
color: var(--text-secondary);
font-weight: 400;
line-height: 1.45;
opacity: 0.92;
text-align: center;
font-family: var(--font-ui);
letter-spacing: 0.015em;
}
.transcription:empty { display: none; }
body.hide-steps .transcription { display: none; }
.block-actions {
display: flex;
gap: 0.35rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 0.15rem;
opacity: 0.85;
}
.mini-btn {
font-family: var(--font-ui);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.28rem 0.55rem;
border-radius: 99px;
border: 1px solid var(--border-light);
background: var(--bg-canvas);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.mini-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.mini-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Focus / single system view — pinned to canvas; runes scroll; meta bar solid */
.focus-view {
display: none;
position: absolute;
inset: 0;
width: auto;
height: auto;
min-height: 0;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
animation: fadeIn 0.35s ease-out;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background: var(--bg-canvas);
border-radius: inherit;
}
.focus-view.active { display: flex; }
.focus-label {
flex: 0 0 auto;
font-family: var(--font-ui);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
font-weight: 600;
text-align: center;
padding: 1.15rem 3.25rem 0.5rem 1.15rem;
position: relative;
z-index: 2;
}
/* Corner control — does not steal vertical space from the rune column */
.focus-back {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 3;
margin: 0;
flex-shrink: 0;
padding: 0.55rem 0.9rem;
font-size: 0.68rem;
}
/* Scrollport only — no flex centering (that painted overflow over siblings) */
.focus-runes-scroll {
flex: 1 1 0;
min-height: 0;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Centers short texts; when taller than viewport, grows and parent scrolls cleanly */
.focus-runes-center {
box-sizing: border-box;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem 1rem;
}
.focus-runes {
font-family: var(--font-runes);
color: var(--text-runes);
font-size: clamp(2rem, 5.5vw, 3.8rem);
line-height: 1.3;
word-break: break-word;
white-space: pre-wrap;
text-shadow: var(--rune-relief-lg);
letter-spacing: var(--rune-letter-spacing);
max-width: 100%;
text-align: center;
transition: letter-spacing 0.2s ease, line-height 0.2s ease, font-size 0.25s ease, color 0.35s ease, text-shadow 0.35s ease;
}
.focus-runes.vertical {
display: block !important;
letter-spacing: normal !important;
line-height: 1 !important;
font-size: clamp(1.75rem, 3.8vw, 2.75rem);
white-space: normal !important;
word-break: normal;
max-height: none;
text-align: center;
}
/*
* Vertical spacing: margin-bottom on each glyph, driven by --rune-v-gap-px (0–100px).
* This updates LIVE when the slider changes the CSS variable — no JS re-render needed.
*/
.rune-glyph {
display: block !important;
line-height: 1 !important;
margin: 0 auto var(--rune-v-gap-px, 30px) auto !important;
padding: 0 !important;
text-align: center;
/* Inherit parent relief so vertical stacks keep the same depth */
text-shadow: inherit;
color: inherit;
}
.rune-text.vertical .rune-glyph:last-child,
.focus-runes.vertical .rune-glyph:last-child {
margin-bottom: 0 !important;
}
/* Word separator ":" — inherits rune color (so stencil mode turns it black too) */
.rune-sep {
color: inherit;
opacity: 0.9;
font-family: var(--font-runes);
font-weight: 500;
}
/* Lives under the canvas (outside #captureArea) — never overlaps runes */
.focus-meta-bar {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
width: 100%;
padding: 0.85rem 1rem 0.15rem;
text-align: center;
}
.focus-meta-bar.is-visible {
display: flex;
}
.focus-meta-bar .transcription {
margin: 0;
max-width: 100%;
font-size: 0.78rem;
line-height: 1.45;
word-break: break-word;
}
.focus-meta {
font-family: var(--font-ui);
font-size: 0.88rem;
color: var(--text-secondary);
font-weight: 500;
letter-spacing: 0.01em;
}
.empty-state {
color: var(--empty-state);
font-family: var(--font-display);
font-size: clamp(1.25rem, 2.5vw, 1.65rem);
font-weight: 500;
letter-spacing: 0.045em;
max-width: 18em;
line-height: 1.45;
opacity: 0.92;
padding: 1.5rem;
}
.empty-state.hidden { display: none; }
.canvas-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 0.25rem 0.15rem;
gap: 1rem;
flex-wrap: wrap;
}
.meta-info {
font-family: var(--font-ui);
font-size: 0.82rem;
color: var(--text-secondary);
font-weight: 500;
display: flex;
gap: 0.7rem;
align-items: center;
flex-wrap: wrap;
}
.meta-badge {
font-family: var(--font-ui);
background: var(--bg-canvas);
border: 1px solid var(--border-light);
padding: 0.35rem 0.9rem;
border-radius: 99px;
color: var(--text-primary);
box-shadow: var(--shadow-sm);
letter-spacing: 0.02em;
font-weight: 600;
}
.action-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.btn {
padding: 0.75rem 1.2rem;
font-size: 0.76rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 99px;
cursor: pointer;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
font-family: var(--font-ui);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn-outline {
background: var(--bg-canvas);
color: var(--text-primary);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
}
.btn-outline:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-primary {
background: linear-gradient(145deg, var(--chip-active-bg), #2a2418);
color: var(--chip-active-fg);
border: 1px solid var(--chip-active-bg);
box-shadow: 0 4px 14px rgba(61, 52, 36, 0.22);
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(145deg, var(--accent-hover), var(--chip-active-bg));
border-color: var(--accent);
transform: translateY(-2px);
color: #fff;
box-shadow: 0 10px 26px var(--accent-light);
}
html.dark-theme .btn-primary,
body.dark-theme .btn-primary {
background: linear-gradient(145deg, var(--chip-active-bg), #d4c49a);
color: var(--chip-active-fg);
border-color: var(--chip-active-bg);
box-shadow: 0 4px 16px rgba(240, 226, 182, 0.18);
}
html.dark-theme .btn-primary:hover:not(:disabled),
body.dark-theme .btn-primary:hover:not(:disabled) {
background: linear-gradient(145deg, var(--accent-hover), var(--accent));
color: #1c1c1e;
}
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none !important;
}
.toast {
position: fixed;
bottom: 22px;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--text-primary);
color: var(--bg-page-start);
padding: 0.8rem 1.5rem;
border-radius: 99px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
display: flex;
align-items: center;
gap: 0.55rem;
z-index: 9999;
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
max-width: min(90vw, 420px);
text-align: center;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Stencil preview: pure black ink on white — matches SVG export intent */
.rune-canvas.stencil-mode {
background:
linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.08),
inset 0 0 40px rgba(0, 0, 0, 0.03) !important;
}
.rune-canvas.stencil-mode .rune-text,
.rune-canvas.stencil-mode .focus-runes,
.rune-canvas.stencil-mode .rune-glyph,
.rune-canvas.stencil-mode .rune-sep {
color: #000000 !important;
opacity: 1 !important;
text-shadow: none !important;
filter: none !important;
-webkit-text-fill-color: #000000 !important;
}
/* Hide decorative chrome in stencil; keep focus-back so navigation still works */
.rune-canvas.stencil-mode .focus-label,
.rune-canvas.stencil-mode .runic-label,
.rune-canvas.stencil-mode .block-actions,
.rune-canvas.stencil-mode .transcription,
.rune-canvas.is-exporting .focus-back,
.rune-canvas.is-exporting .focus-label,
.rune-canvas.is-exporting .runic-label,
.rune-canvas.is-exporting .block-actions,
.rune-canvas.is-exporting .transcription {
display: none !important;
}
.rune-canvas.stencil-mode .focus-back {
display: inline-flex !important;
background: #ffffff !important;
border-color: #c8c8c8 !important;
color: #222222 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.rune-canvas.stencil-mode .focus-back:hover {
border-color: #888 !important;
color: #000 !important;
}
.rune-canvas.stencil-mode .empty-state {
color: #666666 !important;
opacity: 0.85;
}
/* Meta badge when stencil preview is on */
.meta-badge.is-stencil {
background: #111111;
color: #ffffff;
border-color: #111111;
letter-spacing: 0.06em;
}
html.dark-theme .meta-badge.is-stencil,
body.dark-theme .meta-badge.is-stencil {
background: #f0e2b6;
color: #1c1c1e;
border-color: #f0e2b6;
}
html.dark-theme .rune-canvas.stencil-mode,
body.dark-theme .rune-canvas.stencil-mode {
background:
linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%) !important;
}
@media (max-width: 1250px) {
body { align-items: flex-start; }
.app-container {
grid-template-columns: 1fr;
gap: 1.8rem;
}
.controls-panel {
padding: 2rem;
position: static;
}
.rune-canvas {
min-height: 320px;
padding: 1.6rem;
}
.rune-canvas.is-focus {
min-height: 380px;
min-height: min(58vh, 520px);
padding: 0;
}
.quad-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 640px) {
body { padding: 0.85rem; }
.controls-panel { padding: 1.25rem 1.05rem; gap: 1.05rem; }
/*
* Header: brand left, controls right — no mid-row wrap that
* leaves flags floating under a two-line title.
*/
.header-top {
align-items: center;
gap: 0.5rem;
margin-bottom: 0.65rem;
}
.logo-title-wrap {
flex: 1 1 auto;
min-width: 0;
gap: 0.55rem;
}
.brand-mark {
--s: 44px;
}
.header h1 {
font-size: clamp(1.12rem, 4.8vw, 1.32rem);
letter-spacing: 0.02em;
line-height: 1.15;
/* Prefer single line; ellipsis if still too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-actions {
flex: 0 0 auto;
gap: 0.35rem;
}
.lang-switch {
padding: 0.18rem;
gap: 0.18rem;
}
.lang-flag {
width: 28px;
height: 28px;
}
.icon-btn {
width: 34px;
height: 34px;
font-size: 0.85rem;
}
.theme-toggle .theme-icon,
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon {
width: 18px;
height: 18px;
}
.header p.sublead { font-size: 0.95rem; max-width: none; }
.header p.pitch { font-size: 0.9rem; max-width: none; }
/* Chips: tighter so Mirror/Vertical/Steps/Stencil fit more evenly */
.chip {
font-size: 0.72rem;
padding: 0.42rem 0.72rem;
}
.chip-group,
.toggle-row {
gap: 0.35rem;
}
.studio-panel { padding: 0.9rem 0.95rem 1rem; }
/* History: wrap cleanly, avoid cut-off mid-word feel */
.history-item {
font-size: 0.72rem;
max-width: min(100%, 11.5rem);
}
.canvas-actions { flex-direction: column; align-items: stretch; }
.action-buttons { justify-content: center; }
.btn { justify-content: center; padding: 0.8rem 1rem; font-size: 0.7rem; }
.examples { justify-content: center; }
.meta-info { justify-content: center; }
.rune-canvas {
min-height: 280px;
}
.rune-canvas.is-focus {
min-height: 320px;
min-height: min(52vh, 460px);
}
.focus-runes {
font-size: clamp(1.75rem, 9vw, 2.6rem) !important;
}
.focus-runes.vertical {
font-size: clamp(1.5rem, 8vw, 2.2rem) !important;
}
.rune-text {
font-size: clamp(1.35rem, 6.5vw, 2rem);
}
/*
* Focus header: short title + clear gap for absolute back button
* (was colliding: "ELDER FUTHARK (P" / "NORSE)" under ← ALL SYSTEMS)
*/
.focus-label {
text-align: left;
font-size: 0.72rem;
letter-spacing: 0.08em;
line-height: 1.35;
padding: 0.95rem 6.75rem 0.55rem 0.9rem;
max-width: 100%;
box-sizing: border-box;
}
.focus-back {
top: 0.5rem;
right: 0.5rem;
padding: 0.4rem 0.65rem;
font-size: 0.62rem;
letter-spacing: 0.04em;
max-width: 42%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Very narrow phones (iPhone SE 320–375) */
@media (max-width: 380px) {
body { padding: 0.65rem; }
.controls-panel { padding: 1.05rem 0.9rem; }
.brand-mark { --s: 40px; }
.header h1 { font-size: 1.08rem; }
.lang-flag { width: 26px; height: 26px; }
.icon-btn { width: 32px; height: 32px; }
.focus-back {
font-size: 0.58rem;
padding: 0.35rem 0.5rem;
}
.focus-label {
padding-right: 5.75rem;
font-size: 0.68rem;
}
}