:root { /* ── Surface · espresso ─────────────────────────────────── */ --nsm-espresso-900: #1B110B; /* stage floor */ --nsm-espresso-800: #1F150F; /* slab foot */ --nsm-espresso-700: #241811; /* panel foot, tile floor */ --nsm-espresso-600: #2C1D14; /* stage ceiling */ --nsm-espresso-500: #33241B; /* primary ink + panel */ --nsm-espresso-400: #3A2920; /* slab head */ --nsm-espresso-300: #3E2C21; /* espresso tile head */ --nsm-recess-top: #170E09; /* engraved wells */ --nsm-recess-bot: #2A1B13; /* ── Surface · cream ────────────────────────────────────── */ --nsm-cream-050: #FFFBF0; /* row / card */ --nsm-cream-100: #FAF1DD; /* masthead field */ --nsm-cream-200: #F7F0DE; /* screen ground */ --nsm-cream-300: #F3EAD6; /* off-air row */ --nsm-cream-400: #F2E6CC; /* tile gradient foot */ --nsm-cream-500: #E7DBC0; /* off-air tile */ --nsm-skeleton: #EFE3C8; --nsm-skeleton-soft: #F2E9D5; --nsm-desk: #CFC7B6; /* canvas behind frames */ /* ── Accent · masthead wave, left → right ───────────────── */ --nsm-gold: #EFC078; --nsm-apricot: #D98A3F; --nsm-coral: #D4635F; --nsm-crimson: #C42A46; --nsm-rose: #E4707E; /* equaliser bars */ --nsm-rose-soft: #F0A9B2; /* live timecode */ --nsm-clay: #8A4A2B; /* Arabic secondary */ --nsm-wave: linear-gradient(90deg, var(--nsm-gold) 0%, var(--nsm-coral) 50%, var(--nsm-crimson) 100%); /* ── Ink ────────────────────────────────────────────────── */ --nsm-ink: #33241B; --nsm-ink-70: rgba(51,36,27,.62); --nsm-ink-50: rgba(51,36,27,.50); --nsm-ink-40: rgba(51,36,27,.40); --nsm-ink-hairline: rgba(51,36,27,.07); --nsm-ink-on-gold: #2A1B12; --nsm-cream-ink: #FFF6E8; --nsm-cream-ink-55: rgba(247,240,222,.55); --nsm-cream-ink-45: rgba(247,240,222,.45); --nsm-cream-fill: rgba(247,240,222,.06); --nsm-cream-hairline: rgba(247,240,222,.09); /* ── Gradient ───────────────────────────────────────────── */ --nsm-grad-stage: linear-gradient(180deg,#2C1D14 0%,#1B110B 100%); --nsm-grad-slab: linear-gradient(180deg,#3A2920 0%,#1F150F 100%); --nsm-grad-panel: linear-gradient(180deg,#33241B 0%,#241811 100%); --nsm-grad-recess: linear-gradient(180deg,#170E09 0%,#2A1B13 100%); --nsm-tile-cream: linear-gradient(165deg,#FFFBF0 0%,#F2E6CC 100%); --nsm-tile-espresso:linear-gradient(160deg,#3E2C21 0%,#241811 100%); --nsm-glow-stage: radial-gradient(120% 46% at 50% 32%, rgba(239,192,120,.16) 0%, rgba(239,192,120,0) 62%); --nsm-edge-fade: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%); /* ── Elevation ──────────────────────────────────────────── */ --nsm-sh-recess: inset 0 3px 8px rgba(0,0,0,.6), inset 0 -1px 0 rgba(247,240,222,.07); --nsm-sh-art: 0 22px 44px rgba(0,0,0,.48), 0 0 0 1px rgba(247,240,222,.14); --nsm-sh-row: 0 0 0 1px rgba(51,36,27,.07), 0 2px 8px rgba(51,36,27,.045); --nsm-sh-row-live:0 0 0 1.5px var(--nsm-crimson), 0 3px 10px rgba(51,36,27,.06); --nsm-sh-play: 0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35); --nsm-sh-slab: 0 -12px 30px rgba(45,30,20,.28); --nsm-sh-panel: 0 10px 24px rgba(45,30,20,.26); --nsm-sh-frame: 0 30px 70px rgba(45,30,20,.38); /* ── Type ───────────────────────────────────────────────── */ --nsm-font-ui: 'IBM Plex Sans Arabic', system-ui, sans-serif; --nsm-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --nsm-font-arabic: 'Amiri', serif; --nsm-t-station: 29px; /* player station, EN */ --nsm-t-arabic-hero: 31px; /* player station, AR */ --nsm-t-episode: 30px; /* episode title, Amiri */ --nsm-t-nowplaying: 16px; --nsm-t-row: 14.5px; /* list row, EN */ --nsm-t-row-arabic: 15px; /* list row, AR */ --nsm-t-mini: 14px; --nsm-t-chip: 12.5px; /* chip label, EN */ --nsm-t-chip-arabic:13.5px; /* chip label, AR */ --nsm-t-meta: 11px; --nsm-t-mono: 10.5px; --nsm-t-micro: 9.5px; --nsm-track-mono: .14em; --nsm-track-eyebrow: .20em; /* ── Radius ─────────────────────────────────────────────── */ --nsm-r-frame: 46px; --nsm-r-art: 22px; --nsm-r-slab: 22px; --nsm-r-row: 14px; --nsm-r-control: 12px; --nsm-r-chip: 11px; --nsm-r-tile: 11px; --nsm-r-recess: 10px; --nsm-r-badge: 0 0 8px 0; /* rank badge, top-left */ --nsm-r-pill: 999px; /* ── Size ───────────────────────────────────────────────── */ --nsm-hit: 44px; /* never smaller */ --nsm-play-hero: 86px; --nsm-play-mini: 44px; --nsm-transport: 58px; --nsm-chip-h: 40px; --nsm-tile-row: 44px; --nsm-tile-mini: 40px; --nsm-art: 226px; --nsm-dial-player: 64px; --nsm-dial-home: 40px; --nsm-row-h: 68px; --nsm-frame-w: 390px; --nsm-frame-h: 844px; /* ── Motion ─────────────────────────────────────────────── */ --nsm-eq-1: .90s; --nsm-eq-2: 1.10s; --nsm-eq-3: .78s; --nsm-eq-4: 1.25s; --nsm-needle: 2.6s; --nsm-ease: cubic-bezier(.4, 0, .2, 1); } /* Equaliser bars: four staggered scaleY loops, transform-origin bottom. Dial needle: opacity breath only — never move the needle. */ @keyframes nsm-eq1 { 0%,100% { transform: scaleY(.30) } 50% { transform: scaleY(1) } } @keyframes nsm-eq2 { 0%,100% { transform: scaleY(1) } 45% { transform: scaleY(.25) } } @keyframes nsm-eq3 { 0%,100% { transform: scaleY(.55) } 30% { transform: scaleY(.95) } 70% { transform: scaleY(.20) } } @keyframes nsm-eq4 { 0%,100% { transform: scaleY(.85) } 55% { transform: scaleY(.30) } } @keyframes nsm-needle { 0%,100% { opacity: .55 } 50% { opacity: 1 } } @media (prefers-reduced-motion: reduce) { [data-nsm-eq] > * { animation: none; transform: scaleY(.7) } [data-nsm-needle] { animation: none; opacity: 1 } } /* ── legacy aliases + base (pre-existing, kept) ── */ :root { --bg:var(--nsm-cream-200); --card:var(--nsm-cream-050); --panel:var(--nsm-cream-300); --panel2:var(--nsm-cream-500); --line:#D9C9A6; --amber:var(--nsm-apricot); --amber-dim:#B06E2C; --red:var(--nsm-crimson); --text:var(--nsm-ink); --dim:var(--nsm-ink-70); --faint:var(--nsm-ink-40); --ok:#4F7C48; --radius:var(--nsm-r-row); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%;overflow-x:hidden} body{ background:var(--bg); color:var(--text); font-family:var(--nsm-font-ui); font-size:16px; overscroll-behavior-y:none; } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input{font:inherit} .ar{font-family:var(--nsm-font-ui);} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} }