/* CRT kit for the Component Gallery: the nilocortex.com palette, type and tube overlay.
   Every component page links this first, then its own styles. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+JP:wght@500;700&family=Share+Tech+Mono&display=swap');

:root {
  --bg: #020607; --panel: #061012; --panel2: #0A1B1E;
  --cy: #54F0E0; --cyd: rgba(84, 240, 224, .45); --cyf: rgba(84, 240, 224, .12); --teal: #1C8F88;
  --amb: #FFB43A; --ambd: rgba(255, 180, 58, .45); --red: #FF4A3A; --ph: #79F7A6; --mag: #FF6AD5;
  --wh: #E8FBF7; --film: #F2EFE6; --dim: #6F8A87; --dim2: #3B5553; --line: #1F3134; --ink: #031012;
  --font-ui: 'Share Tech Mono', ui-monospace, Consolas, monospace;
  --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --glow: 0 0 12px rgba(84, 240, 224, .35);
  --fringe: -1.5px 0 rgba(255, 40, 90, .45), 1.5px 0 rgba(40, 150, 255, .45);
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: radial-gradient(ellipse 90% 70% at 50% 40%, #07181b, var(--bg) 75%); color: var(--wh); font-family: var(--font-ui); }
::selection { background: var(--amb); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amb); outline-offset: 2px; }

/* header injected by crt-kit.js */
.nc-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: rgba(2, 6, 7, .92); border-bottom: 1px solid var(--line); font: 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.nc-bar b { color: var(--cy); font-weight: 400; }
.nc-bar .nc-id { color: var(--amb); }
.nc-bar .nc-sp { flex: 1; }
.nc-bar a, .nc-bar button { background: none; border: 1px solid var(--line); color: var(--cy); font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 5px 10px; cursor: pointer; text-decoration: none; }
.nc-bar a:hover, .nc-bar button:hover { border-color: var(--cy); color: var(--wh); }
body.nc-has-bar { padding-top: 34px; }
@media (max-width: 560px) { .nc-bar .nc-arch { display: none; } }

/* the tube: scanlines, vignette, a slow roll bar and a little flicker, above everything and click-through */
.crt-fx { position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .26) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, .55) 100%); }
.crt-fx::before { content: ""; position: absolute; left: 0; right: 0; height: 22vh; top: -22vh;
  background: linear-gradient(transparent, rgba(84, 240, 224, .035), transparent); animation: nc-roll 7s linear infinite; }
.crt-fx::after { content: ""; position: absolute; inset: 0; background: rgba(84, 240, 224, .018); animation: nc-flicker 3.2s steps(1) infinite; }
@keyframes nc-roll { to { transform: translateY(144vh); } }
@keyframes nc-flicker { 0%, 100% { opacity: .4; } 12% { opacity: .9; } 13% { opacity: .2; } 58% { opacity: .7; } 59% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .crt-fx::before, .crt-fx::after { animation: none; } }
/* the real tube shader draws its own scanlines on the main canvas; keep the CSS layer light so they don't beat */
body.nc-tube .crt-fx { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 3px), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, .45) 100%); }

/* phosphor text layer (crt-kit.js tags the page's HTML) */
body.nc-phos-on .nc-phos { filter: url(#nc-phos); -webkit-font-smoothing: antialiased; }
body.nc-phos-on .nc-bar { filter: url(#nc-phos); }
body.nc-phos-on { text-shadow: 0 0 1px currentColor; }
/* bright fills bleed into dark lettering on a tube; heavier strokes keep pressed buttons readable */
body.nc-phos-on button, body.nc-phos-on .nc-btn { -webkit-text-stroke: .4px currentColor; }

/* shared bits components can use */
.nc-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wh); text-shadow: var(--fringe), var(--glow); }
.nc-jp { font-family: var(--font-jp); font-weight: 700; color: var(--cy); letter-spacing: 0; }
.nc-label { font: 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.nc-btn { background: rgba(6, 20, 22, .7); border: 1px solid var(--cyd); color: var(--cy); font: 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; }
.nc-btn:hover, .nc-btn.active, .nc-btn[aria-pressed="true"] { background: var(--cy); color: var(--ink); border-color: var(--cy); }
.nc-panel { background: rgba(6, 20, 22, .72); border: 1px solid var(--cyd); }