/* NII Brand Guidelines v3.0 — dark website theme. */
:root{color-scheme:dark;--paper:#0B1220;--card:#111B2E;--ink:#FFFFFF;--muted:#8A92A6;--line:rgba(125,212,200,.19);--navy:#111B2E;--teal:#7DD4C8;--coral:#E8734A;--body-text:#C5CBD9;--hover:#1A2640;--dark-ink:#0B1220}
body{background:radial-gradient(ellipse at 78% 0,rgba(125,212,200,.055),transparent 38%),var(--paper)}
::selection{background:var(--teal);color:var(--dark-ink)}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#5CE0D2}
.skip{color:var(--dark-ink)}
.site-header,.community{border-color:var(--line)}
.brand-sub,.site-header nav{color:var(--body-text)}
.brand strong span{color:var(--teal)}
.back-bot,.outline-button{border-color:rgba(125,212,200,.6);color:var(--teal);border-radius:8px}
.back-bot:hover,.outline-button:hover{background:rgba(125,212,200,.12)}
.live-dot{background:var(--teal);box-shadow:0 0 12px rgba(125,212,200,.35)}
.hero .eyebrow{color:var(--teal)}
.demo-badge{color:var(--body-text);border-color:var(--line)}
.with-ai{color:var(--teal)}
.with-ai:before{background:rgba(125,212,200,.13)}
.hero-copy>p,.catalog-heading p,.community p{color:var(--body-text)}
.begin-link{color:var(--teal);border-color:rgba(125,212,200,.6)}
.hero{position:relative;isolation:isolate;min-height:432px;overflow:hidden}
.hero-copy{position:relative;z-index:1}
.hero-art{position:absolute;z-index:0;inset:0 -24px 0 auto;width:62%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 73%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 73%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-art img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:55% 45%;border:0;border-radius:0}
.hero-art figcaption{display:none}
@media(max-width:1050px) and (min-width:701px){.hero-art{width:57%;right:-30px}.hero-art img{object-position:58% 45%}.hero{min-height:390px}}
@media(max-width:700px){.hero{min-height:0;gap:12px;overflow:visible}.hero-art{position:relative;inset:auto;width:calc(100% + 32px);max-width:none;height:260px;margin:-4px -16px -16px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 72%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 72%,transparent 100%)}.hero-art img{object-position:54% 43%}}
.ask-section{color:var(--ink);background:linear-gradient(135deg,#111B2E,#1A2640);border:1px solid rgba(125,212,200,.3);border-radius:16px;box-shadow:0 8px 36px rgba(5,11,22,.22)}
.ask-note{color:var(--body-text)}
#question{background:#0B1220;border-color:rgba(125,212,200,.36);border-radius:8px;color:#FFFFFF}
#question::placeholder{color:#8A92A6}
.primary{color:var(--dark-ink);border-radius:8px}
.primary:hover{background:#5CE0D2;border-color:#5CE0D2}
.examples{color:#8A92A6}
.examples button{color:var(--body-text);border-color:rgba(125,212,200,.24);background:rgba(11,18,32,.25)}
.examples button:hover{background:var(--hover);border-color:var(--teal)}
.answer{background:#0B1220;border:1px solid rgba(125,212,200,.25);border-radius:12px}
.answer .eyebrow{color:var(--teal)}
.answer p{color:var(--body-text)}
.answer .demo-explanation{color:var(--muted)}
.answer-link{background:#111B2E;border-color:var(--line);color:#FFFFFF;border-radius:8px}
.answer-link:hover{background:var(--hover);border-color:var(--teal)}
.view-tabs button{border:1px solid rgba(125,212,200,.27);border-radius:12px;background:#111B2E;color:var(--body-text)}
.view-tabs button:hover{background:#1A2640;border-color:var(--teal)}
.view-tabs button[aria-selected=true]{background:var(--teal);color:var(--dark-ink);border-color:var(--teal);box-shadow:0 0 24px rgba(125,212,200,.08)}
.filter{color:var(--body-text);background:rgba(17,27,46,.5);border-radius:8px}
.filter:hover{border-color:var(--teal);background:#1A2640}
.filter[aria-pressed=true]{background:rgba(125,212,200,.16);border-color:var(--teal);color:var(--teal)}
.filter small{opacity:.8}
.mode-description{color:var(--body-text)}
.results-toolbar button{color:var(--teal)}
.material-card{background:#111B2E;border:1px solid rgba(125,212,200,.18);border-radius:12px}
.material-card:hover{box-shadow:0 12px 28px rgba(5,11,22,.3);border-color:rgba(125,212,200,.6)}
.card-ribbon{background:rgba(125,212,200,.07);border-color:var(--line);color:var(--teal)}
.material-card:nth-child(4n+1) .card-ribbon{background:rgba(232,115,74,.08);color:#F09A79}
.material-card:nth-child(4n+3) .card-ribbon{background:rgba(59,130,246,.08);color:#94BEFF}
.card-body>p{color:var(--body-text)}
.card-meta{color:var(--teal)}
.card-meta span{background:rgba(125,212,200,.1);border-radius:4px}
.card-footer{border-color:var(--line);color:var(--muted)}
.card-footer button{color:var(--teal)}
.empty{background:#111B2E;border-radius:12px;border-color:rgba(125,212,200,.3)}
.empty p{color:var(--body-text)}
.footer{color:var(--muted)}
.footer a{color:var(--teal)}
dialog{background:#111B2E;border:1px solid rgba(125,212,200,.4);border-radius:16px;box-shadow:0 24px 100px rgba(5,11,22,.75)}
dialog::backdrop{background:rgba(5,11,22,.78)}
.dialog-top .eyebrow{color:var(--teal)}
.close-button{border-color:var(--line);color:var(--teal)}
.close-button:hover{background:#1A2640;border-color:var(--teal)}
dialog p,dialog li{color:var(--body-text)}
.dialog-tags span{background:rgba(125,212,200,.12);color:var(--teal)}
.source-links a{background:#0B1220;color:var(--teal);border-color:rgba(125,212,200,.3);border-radius:8px}
.source-links a:hover{background:#1A2640;border-color:var(--teal)}
.source-note{color:var(--muted)!important}