/* Lipi overrides for handwriting demos inside /play/* iframes (loaded last in ) */ :root { --ink: #142824; --accent: #1e9b8c; --accent-dark: #157a6f; --bg: #f6fcfa; --card: #ffffff; --line: #d4ebe6; --muted: #4a6460; } html.theme-dark { --ink: #e6f3ef; --accent: #26b3a1; --accent-dark: #5fd6c4; --bg: #0c1715; --card: #13211e; --line: #26352f; --muted: #9cbab4; } html, body { background: var(--bg) !important; color: var(--ink) !important; } /* Active chips and tabs */ .tab.active, .pbtn.active, .fchip.active, .lchip.active, .custom button { background: var(--accent) !important; color: #fff !important; } html.theme-dark .tab.active, html.theme-dark .pbtn.active, html.theme-dark .fchip.active, html.theme-dark .lchip.active, html.theme-dark .custom button { background: var(--accent) !important; } .pbtn.active .rlbl { color: rgba(255, 255, 255, 0.82) !important; } .tab, .pbtn, .fchip, .lchip, .stage, .langbar select, .basebar select { background: var(--card) !important; color: var(--ink) !important; border-color: var(--line) !important; } .tab { box-shadow: 0 1px 3px rgba(21, 122, 111, 0.08) !important; color: var(--muted) !important; } .pbtn, .fchip, .lchip { box-shadow: 0 1px 3px rgba(21, 122, 111, 0.08) !important; } .stage { box-shadow: 0 2px 12px rgba(21, 122, 111, 0.1) !important; background: var(--card) !important; } .btn.show { background: #e8f7f4 !important; color: var(--accent-dark) !important; } html.theme-dark .btn.show { background: #15302b !important; color: var(--accent-dark) !important; } .btn.clear { background: var(--card) !important; color: var(--muted) !important; border: 1px solid var(--line) !important; } .custom input { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink) !important; } .teaser { background: #e8f7f4 !important; border-color: #b8e8de !important; color: var(--accent-dark) !important; } .teaser b { color: var(--accent-dark) !important; } html.theme-dark .teaser { background: #15302b !important; border-color: #26352f !important; color: #9af0e0 !important; } html.theme-dark .teaser b { color: #9af0e0 !important; } .sub, .msg, .meta, .foot p, .hint, .fonts .lbl { color: var(--muted) !important; } .settings { border-top-color: var(--line) !important; } .res.active { border-color: var(--accent) !important; } .res .lvl { color: var(--accent-dark) !important; background: #e8f7f4 !important; } html.theme-dark .res .lvl { background: #15302b !important; color: var(--accent-dark) !important; } .langbar label, .basebar label { color: var(--muted) !important; } /* Embedded in /learn shell: hide old in-demo chrome */ html.hw-embedded .wrap > h1, html.hw-embedded .wrap > .sub, html.hw-embedded .foot, html.hw-embedded .teaser { display: none !important; } html.hw-embedded .wrap { max-width: 100% !important; padding: 8px 10px 18px !important; }