/* Atlas activity visual language * * This is a palette and interaction substrate, not a blanket reskin. An * activity chooses a scene mode on and retains its * own authored composition. The shared tokens keep paper, ink, wash, negative * space, cinnabar, shadow and touch scale coherent across that catalog. */ :root { color-scheme: light; --atlas-paper: #f2eee3; --atlas-paper-warm: #e9e1d0; --atlas-ink: #252923; --atlas-ink-soft: #5d6258; --atlas-ink-faint: rgba(37, 41, 35, .16); --atlas-water: #8eafb2; --atlas-water-pale: #cbdedd; --atlas-flora: #687b61; --atlas-earth: #8a745a; --atlas-cinnabar: #a34332; --atlas-mist: rgba(242, 238, 227, .68); --atlas-side-shadow: rgba(35, 42, 36, .16); --atlas-touch: 44px; --atlas-control-paper: rgba(242, 238, 227, .82); --atlas-control-ink: var(--atlas-ink); --atlas-scene-ground: radial-gradient(ellipse at 27% 13%, rgba(255,255,255,.6), transparent 44%), linear-gradient(115deg, var(--atlas-paper), var(--atlas-paper-warm)); } html[data-atlas-sumi="underwater"] { --atlas-paper: #d9e4df; --atlas-paper-warm: #b7cfca; --atlas-ink: #263f3c; --atlas-ink-soft: #4d6965; --atlas-mist: rgba(216, 231, 225, .5); --atlas-control-paper: rgba(236, 235, 215, .7); } html[data-atlas-sumi="nocturne"] { color-scheme: dark; --atlas-paper: #33383a; --atlas-paper-warm: #46444a; --atlas-ink: #ece4d5; --atlas-ink-soft: #bdb5a8; --atlas-ink-faint: rgba(236, 228, 213, .18); --atlas-mist: rgba(73, 74, 78, .56); --atlas-control-paper: rgba(45, 48, 48, .78); --atlas-control-ink: #f0e8d9; } html[data-atlas-sumi="performance"] { --atlas-paper: #eee8dc; --atlas-paper-warm: #e2d8c7; --atlas-flora: #667566; } html[data-atlas-sumi] body { color: var(--atlas-ink); background-color: var(--atlas-paper); background-image: var(--atlas-scene-ground); } html[data-atlas-sumi] button, html[data-atlas-sumi] [role="button"] { min-width: var(--atlas-touch); min-height: var(--atlas-touch); -webkit-tap-highlight-color: transparent; } html[data-atlas-sumi] .activity-title, html[data-atlas-sumi] [data-atlas-title] { color: var(--atlas-cinnabar); text-shadow: none; } html[data-atlas-sumi] .atlas-paper-control { border: 1px solid var(--atlas-ink-faint); background: var(--atlas-control-paper); color: var(--atlas-control-ink); box-shadow: 0 6px 22px var(--atlas-side-shadow); backdrop-filter: blur(7px); } html[data-atlas-sumi] .atlas-ink-mark { color: var(--atlas-ink); filter: drop-shadow(0 1px .45px var(--atlas-side-shadow)); mix-blend-mode: multiply; } html[data-atlas-sumi] [data-ink-src] { display: inline-grid; place-items: center; width: var(--atlas-mark-size, 1em); height: var(--atlas-mark-size, 1em); } html[data-atlas-sumi] [data-ink-src] > img, html[data-atlas-sumi] [data-ink-src] > svg { display: block; width: 100%; height: 100%; object-fit: contain; overflow: visible; filter: sepia(.22) saturate(.72) contrast(1.22); mix-blend-mode: multiply; } /* The Color corpus is already authored as a restrained sumi-e variant. Do not run it through the ink-only sepia/desaturation filter after hydration. */ html[data-atlas-sumi] [data-emojinq-variant="color"] > img, html[data-atlas-sumi] [data-emojinq-variant="color"] > svg { filter: drop-shadow(0 1px .45px var(--atlas-side-shadow)); } html[data-atlas-sumi] .atlas-inline-glyph { --atlas-mark-size: 1.35em; display: inline-grid; place-items: center; margin-inline-end: .28em; vertical-align: -.27em; color: var(--atlas-ink); } html[data-atlas-sumi] .atlas-inline-glyph > img, html[data-atlas-sumi] .atlas-inline-glyph > svg { width: 100%; height: 100%; } html[data-atlas-sumi] .atlas-painted-glyph path, html[data-atlas-sumi] .atlas-painted-glyph line, html[data-atlas-sumi] .atlas-painted-glyph polyline, html[data-atlas-sumi] .atlas-painted-glyph circle, html[data-atlas-sumi] .atlas-painted-glyph ellipse { opacity: 0; transform: translateY(2px) scale(.985); transform-origin: center; } html[data-atlas-sumi] .atlas-painted-glyph.is-painted path, html[data-atlas-sumi] .atlas-painted-glyph.is-painted line, html[data-atlas-sumi] .atlas-painted-glyph.is-painted polyline, html[data-atlas-sumi] .atlas-painted-glyph.is-painted circle, html[data-atlas-sumi] .atlas-painted-glyph.is-painted ellipse { animation: atlas-ink-arrive 360ms cubic-bezier(.22,.72,.2,1) forwards; animation-delay: var(--ink-delay, 0ms); } @keyframes atlas-ink-arrive { from { opacity: 0; transform: translateY(2px) scale(.985); } 55% { opacity: .72; } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html[data-atlas-sumi] *, html[data-atlas-sumi] *::before, html[data-atlas-sumi] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }