/* Marble Sudoku technique pages: shared lesson and practice board styles. */
.ns-page { --ns-card:#141826; --ns-line:rgba(255,255,255,.09); --ns-ink:#eef0f5; --ns-muted:#a6adbf; --ns-good:#7fd197; --ns-warn:#ff9b8a; }

.ns-hero__kicker { margin:0 0 .6rem !important; font-size:.72rem !important; font-weight:800 !important; letter-spacing:.16em; color:rgba(11,13,23,.7) !important; }
.ns-hero h1 { margin-bottom:.6rem; }

.ns-article { width:min(1120px, calc(100% - 2.5rem)); margin:0 auto 5rem; color:var(--ns-muted); }
.ns-article h2 { color:var(--ns-ink); font-family:var(--font-heading); letter-spacing:-.02em; line-height:1.15; }
.ns-article a { color:var(--brand-gold); }
.ns-overline { margin:0 0 .5rem; color:var(--brand-gold); font-size:.68rem; font-weight:800; letter-spacing:.16em; }

/* What is it + 3 checks */
.ns-answer { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(1.25rem,4vw,3rem); padding:clamp(1.25rem,3.5vw,2.25rem); margin:0 0 2.5rem; border:1px solid var(--border-gold); border-radius:20px; background:linear-gradient(135deg,rgba(255,160,52,.08),rgba(255,255,255,.02)); }
.ns-answer h2 { margin:0 0 .9rem; font-size:clamp(1.5rem,3vw,2rem); }
.ns-answer p { margin:0 0 .85rem; line-height:1.75; }
.ns-lead { color:#d6d9e2; font-size:1.06rem; }
.ns-lead strong { color:var(--ns-ink); }
.ns-answer__steps { padding:1.1rem 1.2rem; border-radius:14px; background:rgba(8,10,18,.45); border:1px solid var(--ns-line); }
.ns-answer__steps h3 { margin:0 0 .8rem; color:var(--ns-ink); font-family:var(--font-heading); font-size:1.05rem; }
.ns-steps { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ns-steps li { display:grid; grid-template-columns:28px 1fr; gap:.7rem; align-items:start; line-height:1.55; font-size:.95rem; }
.ns-steps li > span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--brand-gold); color:#11131b; font-weight:800; font-size:.85rem; }
.ns-steps strong { color:var(--ns-ink); }
.ns-steps__result { margin:.9rem 0 0 !important; padding-top:.8rem; border-top:1px dashed rgba(255,255,255,.12); font-size:.95rem; }
.ns-steps__result strong { color:var(--brand-gold); }

/* Interactive sections */
.ns-lab { position:relative; margin:0 0 2.5rem; padding:clamp(1.1rem,3.5vw,2.25rem); border:1px solid var(--ns-line); border-radius:20px; background:radial-gradient(120% 90% at 0% 0%,rgba(255,160,52,.08),transparent 55%),var(--ns-card); }
.ns-section-head { max-width:680px; }
.ns-section-head h2 { margin:0 0 .55rem; font-size:clamp(1.5rem,3vw,2.1rem); }
.ns-section-head p:last-child { margin:0; line-height:1.7; }
.ns-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; }
.ns-toggle { display:inline-flex; align-items:center; gap:.5rem; min-height:36px; padding:.4rem .85rem .4rem .5rem; border:1px solid var(--ns-line); border-radius:999px; background:rgba(255,255,255,.03); color:var(--ns-muted); font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; }
.ns-toggle__dot { position:relative; width:30px; height:18px; border-radius:999px; background:rgba(255,255,255,.14); transition:background .2s ease; }
.ns-toggle__dot::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s ease; }
.ns-toggle[aria-pressed="true"] { color:var(--ns-ink); border-color:var(--border-gold); }
.ns-toggle[aria-pressed="true"] .ns-toggle__dot { background:var(--brand-gold); }
.ns-toggle[aria-pressed="true"] .ns-toggle__dot::after { transform:translateX(12px); }
.ns-toggle:focus-visible,.ns-btn:focus-visible,.ns-chip:focus-visible,.ns-cell:focus-visible,.ns-marble:focus-visible { outline:3px solid var(--brand-gold); outline-offset:2px; }

.ns-lab__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); grid-template-areas:"play coach"; gap:clamp(1.25rem,4vw,3rem); align-items:start; margin-top:1.4rem; }
.ns-lab__play { grid-area:play; }
.ns-lab__coach { grid-area:coach; position:sticky; top:96px; }

.ns-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; list-style:none; margin:0 0 1rem; padding:0; counter-reset:ns; }
.ns-progress li { position:relative; padding:.5rem .3rem .45rem; border-radius:8px; background:rgba(255,255,255,.04); color:#6f7790; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-align:center; text-transform:uppercase; transition:background .25s ease,color .25s ease; }
.ns-progress li.is-active { background:rgba(255,160,52,.16); color:var(--brand-gold); box-shadow:inset 0 0 0 1px rgba(255,160,52,.45); }
.ns-progress li.is-done { background:rgba(127,209,151,.12); color:var(--ns-good); }
.ns-progress li.is-done::before { content:"✓ "; }

.ns-coach { padding:1.1rem 1.2rem; border:1px solid rgba(255,160,52,.25); border-radius:14px; background:linear-gradient(140deg,rgba(255,160,52,.09),rgba(255,255,255,.02)); }
.ns-coach__count { margin:0; color:var(--brand-gold); font-size:.66rem; font-weight:800; letter-spacing:.14em; }
.ns-coach h3 { margin:.4rem 0 .4rem; color:var(--ns-ink); font-family:var(--font-heading); font-size:1.3rem; line-height:1.2; }
.ns-coach p { margin:0; line-height:1.65; font-size:.95rem; }
.ns-coach__meter { margin-top:.6rem !important; color:#ffd18f; font-size:.82rem !important; font-weight:700; }
.ns-coach__meter:empty { display:none; }
.ns-link { font-weight:800; text-decoration:none; }
.ns-coach__actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.ns-btn { min-height:40px; padding:.5rem .95rem; border:1px solid rgba(255,160,52,.38); border-radius:9px; background:rgba(255,160,52,.1); color:#ffd18f; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .12s ease; }
.ns-btn:hover { background:rgba(255,160,52,.2); border-color:var(--brand-gold); }
.ns-btn:active { transform:scale(.97); }
.ns-btn--ghost { background:transparent; }
.ns-btn[hidden] { display:none; }

.ns-toast { min-height:3.2em; margin:.85rem 0 0; padding:.65rem .85rem; border-left:3px solid rgba(255,255,255,.18); border-radius:0 10px 10px 0; background:rgba(255,255,255,.03); color:#c9cdd8; font-size:.92rem; line-height:1.55; }
.ns-toast:empty { visibility:hidden; }
.ns-toast[data-tone="good"] { border-color:var(--ns-good); color:#d9f3df; background:rgba(127,209,151,.08); }
.ns-toast[data-tone="warn"] { border-color:var(--ns-warn); color:#ffe0da; background:rgba(255,155,138,.07); }
.ns-toast.is-pop { animation:ns-toast .3s ease; }
@keyframes ns-toast { from { opacity:.3; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Board */
.ns-board { position:relative; width:min(100%,520px); margin:0 auto; aspect-ratio:868/882; container-type:inline-size; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.ns-board__wood { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:4%; pointer-events:none; }
.ns-unit { position:absolute; z-index:1; opacity:0; pointer-events:none; border:2px solid rgba(255,196,99,.95); border-radius:1.8cqw; background:rgba(255,174,55,.16); box-shadow:0 0 22px rgba(255,160,52,.35); transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,opacity .25s ease; }
.ns-unit.is-on { opacity:1; animation:ns-unit-glow 1.8s ease-in-out infinite; }
@keyframes ns-unit-glow { 50% { box-shadow:0 0 34px rgba(255,160,52,.55); } }
.ns-board--practice .ns-unit { border-width:1.5px; background:rgba(255,174,55,.08); box-shadow:none; animation:none; }
.ns-board--practice .ns-unit--box { background:rgba(255,174,55,.05); border-style:dashed; }

.ns-marble { position:absolute; z-index:2; left:var(--x); top:var(--y); width:8.3%; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:none; transform:translate(-50%,-50%); transition:opacity .25s ease,filter .25s ease; }
button.ns-marble { cursor:pointer; }
.ns-marble img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); pointer-events:none; }
.ns-num { position:absolute; inset:0; display:none; place-items:center; color:#fff; font-family:var(--font-heading); font-weight:800; font-size:4.2cqw; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 4px rgba(0,0,0,.5); pointer-events:none; }
.ns-show-numbers .ns-num { display:grid; }
.ns-board[data-unit="row"] .ns-marble:not(.in-unit),.ns-board[data-unit="column"] .ns-marble:not(.in-unit),.ns-board[data-unit="box"] .ns-marble:not(.in-unit) { opacity:.32; filter:saturate(.5); }
.ns-board[data-unit] .ns-marble.in-unit:hover { transform:translate(-50%,-50%) scale(1.1); }
.ns-marble.in-unit { transition:transform .15s ease,opacity .25s ease; }
.ns-marble.is-found::after { content:"✓"; position:absolute; right:-6%; top:-6%; display:grid; place-items:center; width:42%; height:42%; border-radius:50%; background:var(--ns-good); color:#0f2416; font-size:2.6cqw; font-weight:900; box-shadow:0 1px 3px rgba(0,0,0,.4); animation:ns-pop .25s ease; }
.ns-board[data-sel="1"] .ns-marble:not(.in-unit) { opacity:.55; }
/* Already crossed out in an earlier step: dim it and mark it with a grey check. */
.ns-board[data-unit] .ns-marble.in-unit.is-known { opacity:.55; filter:saturate(.4); }
.ns-marble.is-known::after { content:"✓"; position:absolute; right:-6%; top:-6%; display:grid; place-items:center; width:42%; height:42%; border-radius:50%; background:#8b8f9c; color:#1b1d24; font-size:2.6cqw; font-weight:900; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.ns-marble.is-dropped { animation:ns-drop .42s cubic-bezier(.3,1.6,.5,1); }
.ns-marble.is-answer img { filter:drop-shadow(0 0 1.6cqw rgba(255,214,140,.9)) drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); }
.is-shake { animation:ns-shake .4s ease !important; }
.is-bump { animation:ns-bump .35s ease !important; }
.is-hit { animation:ns-bump .35s ease; }
.is-pop { animation:ns-pop .3s ease; }
.ns-marble.is-conflict { animation:ns-conflict .9s ease !important; opacity:1 !important; filter:none !important; }
@keyframes ns-shake { 20%,60% { translate:-5px 0; } 40%,80% { translate:5px 0; } }
@keyframes ns-bump { 40% { scale:1.14; } }
@keyframes ns-pop { from { scale:.6; opacity:0; } to { scale:1; opacity:1; } }
@keyframes ns-drop { 0% { transform:translate(-50%,-50%) scale(1.5); opacity:.4; } 60% { transform:translate(-50%,-50%) scale(.92); opacity:1; } 100% { transform:translate(-50%,-50%) scale(1); } }
@keyframes ns-conflict { 0%,100% { box-shadow:0 0 0 0 rgba(255,90,70,0); } 20%,60% { box-shadow:0 0 0 .8cqw rgba(255,90,70,.95); scale:1.15; } }

.ns-target { position:absolute; z-index:3; width:9.6%; aspect-ratio:1; border:2.5px solid rgba(255,248,220,.98); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(255,160,52,.9),0 0 20px rgba(255,211,124,.65); pointer-events:none; animation:ns-ring 1.6s ease-in-out infinite; }
#labTarget::after { content:"?"; position:absolute; inset:0; display:grid; place-items:center; color:#fff6dc; font-family:var(--font-heading); font-weight:900; font-size:4.4cqw; line-height:1; text-shadow:0 0 6px rgba(255,160,52,.9),0 1px 2px rgba(0,0,0,.6); animation:ns-q 1.6s ease-in-out infinite; }
@keyframes ns-q { 50% { scale:1.12; } }
#labTarget.has-marble::after { display:none; }
@keyframes ns-ring { 50% { box-shadow:0 0 0 5px rgba(255,160,52,.55),0 0 30px rgba(255,211,124,.85); } }

.ns-flyer { position:fixed; z-index:9999; pointer-events:none; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.ns-spark { position:absolute; z-index:6; width:1.6cqw; height:1.6cqw; min-width:5px; min-height:5px; border-radius:50%; pointer-events:none; box-shadow:0 0 6px rgba(255,255,255,.6); }
.ns-ripple { position:absolute; z-index:4; width:9%; aspect-ratio:1; border:2px solid rgba(255,236,190,.95); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; animation:ns-ripple .7s ease-out forwards; }
@keyframes ns-ripple { to { width:26%; opacity:0; } }

/* Practice cells */
.ns-cell { position:absolute; z-index:3; left:var(--x); top:var(--y); width:9.2%; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:transparent; transform:translate(-50%,-50%); cursor:pointer; transition:box-shadow .15s ease,background .15s ease; }
.ns-cell:hover { background:rgba(255,236,190,.16); box-shadow:inset 0 0 0 2px rgba(255,236,190,.5); }
.ns-cell.is-selected { background:rgba(255,236,190,.2); box-shadow:0 0 0 2.5px #fff6dc,0 0 0 5px rgba(255,160,52,.9),0 0 18px rgba(255,211,124,.7); animation:ns-ring 1.4s ease-in-out infinite; }
.ns-cell.is-hint { animation:ns-hint 1s ease-in-out infinite; }
@keyframes ns-hint { 50% { box-shadow:0 0 0 4px rgba(127,209,151,.95),0 0 24px rgba(127,209,151,.8); } }
.ns-notes { position:absolute; inset:9%; display:none; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:3%; pointer-events:none; }
.show-notes .ns-notes { display:grid; }
.ns-notes i { display:grid; place-items:center; border-radius:50%; background:center/contain no-repeat; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.ns-notes b { display:none; color:#fff; font-size:1.5cqw; font-weight:800; line-height:1; text-shadow:0 0 2px #000; }
.ns-show-numbers .ns-notes b { display:block; }
.ns-cell[data-count="1"] .ns-notes { inset:18%; }
.show-notes .ns-cell[data-count="1"] { box-shadow:inset 0 0 0 2px rgba(127,209,151,.75); }
.ns-board.is-solved { animation:ns-solved 1.2s ease; }
@keyframes ns-solved { 30% { filter:brightness(1.15) saturate(1.2); } }

/* Tray */
.ns-tray { width:min(100%,520px); margin:.9rem auto 0; padding:.7rem .7rem .6rem; border-radius:16px; background:linear-gradient(180deg,#6b4325,#4a2c17); box-shadow:inset 0 2px 0 rgba(255,220,170,.18),inset 0 -3px 6px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.3); }
.ns-tray__label { display:flex; justify-content:space-between; margin:0 .2rem .5rem; color:rgba(255,232,200,.75); font-size:.66rem; font-weight:800; letter-spacing:.12em; }
.ns-tray__label span { color:#ffd18f; }
.ns-tray__label span.is-one { color:#b9f5c8; }
.ns-tray__chips { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:.25rem; }
.ns-chip { position:relative; display:flex; flex-direction:column; align-items:center; gap:.2rem; min-width:0; padding:.25rem 0 .2rem; border:0; border-radius:10px; background:rgba(0,0,0,.18); color:#f2e2cc; font:inherit; cursor:pointer; transition:background .15s ease,transform .12s ease,opacity .25s ease; }
.ns-chip:hover:not(:disabled) { background:rgba(255,236,190,.12); transform:translateY(-2px); }
.ns-chip:active:not(:disabled) { transform:scale(.94); }
.ns-chip__marble { position:relative; display:block; width:min(100%,46px); aspect-ratio:1; container-type:inline-size; }
.ns-chip__marble img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.ns-chip .ns-num { font-size:40cqw; }
.ns-chip__name { max-width:100%; overflow:hidden; font-size:.64rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.ns-chip.is-crossed { opacity:.45; }
.ns-chip.is-crossed .ns-chip__marble img { filter:grayscale(1) brightness(.7); }
.ns-chip.is-crossed .ns-chip__name { text-decoration:line-through; }
.ns-chip.is-crossed .ns-chip__marble::after { content:""; position:absolute; left:-6%; top:46%; width:112%; height:12%; border-radius:4px; background:#ff6f5c; transform:rotate(-38deg); box-shadow:0 1px 2px rgba(0,0,0,.5); animation:ns-slash .25s ease-out; transform-origin:left center; }
@keyframes ns-slash { from { width:0; } }
.ns-chip.is-last { opacity:1; background:rgba(255,236,190,.16); animation:ns-last 1.1s ease-in-out infinite; }
@keyframes ns-last { 50% { box-shadow:0 0 0 2px #ffe3a8,0 0 20px rgba(255,211,124,.85); transform:translateY(-3px); } }
.ns-chip.is-correct { opacity:1; background:rgba(127,209,151,.2); box-shadow:0 0 0 2px var(--ns-good); }
.ns-chip:disabled { cursor:default; }

.ns-words { margin-top:1.4rem; padding:.85rem 1rem; border:1px solid var(--ns-line); border-radius:12px; background:rgba(255,255,255,.02); }
.ns-words summary { color:var(--ns-ink); font-weight:700; cursor:pointer; }
.ns-words p { margin:.7rem 0 0; line-height:1.75; }

/* Practice scoreboard */
.ns-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin:0 0 .8rem; padding:3px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid var(--ns-line); }
.ns-levels button { min-height:36px; border:0; border-radius:8px; background:transparent; color:var(--ns-muted); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:background .18s ease,color .18s ease; }
.ns-levels button[aria-pressed="true"] { background:var(--brand-gold); color:#11131b; }
.ns-levels button:focus-visible { outline:3px solid var(--brand-gold); outline-offset:2px; }
.ns-score { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.ns-score > div { padding:.7rem .5rem; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--ns-line); text-align:center; }
.ns-score__num { display:block; color:var(--ns-ink); font-family:var(--font-heading); font-size:1.7rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.ns-score__label { color:#7d859c; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.ns-meter { height:8px; margin:.8rem 0 0; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.ns-meter span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffa034,#ffd27d,#7fd197); transition:width .45s cubic-bezier(.3,1.3,.5,1); }
.ns-toast--big { font-size:.95rem; }

/* Article prose */
.ns-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,4vw,3rem); }
.ns-prose { margin:0 0 2.25rem; }
.ns-prose h2 { margin:0 0 .85rem; font-size:clamp(1.35rem,2.6vw,1.75rem); }
.ns-prose p { margin:0 0 .9rem; line-height:1.8; }
.ns-tips { margin:0; padding:0; list-style:none; display:grid; gap:.7rem; }
.ns-tips li { position:relative; padding:.8rem 1rem .8rem 2.6rem; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--ns-line); line-height:1.65; }
.ns-tips li::before { content:"✦"; position:absolute; left:1rem; top:.8rem; color:var(--brand-gold); }
.ns-tips--warn li::before { content:"!"; display:grid; place-items:center; width:18px; height:18px; top:.95rem; border-radius:50%; background:rgba(255,155,138,.18); color:var(--ns-warn); font-size:.75rem; font-weight:900; }
.ns-tips strong { color:var(--ns-ink); }
.ns-table-wrap { overflow-x:auto; border:1px solid var(--ns-line); border-radius:14px; }
.ns-compare table { width:100%; min-width:520px; border-collapse:collapse; font-size:.95rem; }
.ns-compare th,.ns-compare td { padding:.8rem 1rem; border-bottom:1px solid var(--ns-line); text-align:left; vertical-align:top; line-height:1.55; }
.ns-compare thead th { color:var(--brand-gold); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,160,52,.06); }
.ns-compare tbody th { color:var(--ns-ink); font-weight:700; width:24%; }
.ns-compare tr:last-child th,.ns-compare tr:last-child td { border-bottom:0; }
.ns-faq details { border-bottom:1px solid var(--ns-line); }
.ns-faq summary { position:relative; padding:1rem 2rem 1rem 0; color:var(--ns-ink); font-weight:700; cursor:pointer; list-style:none; }
.ns-faq summary::-webkit-details-marker { display:none; }
.ns-faq summary::after { content:"+"; position:absolute; right:.25rem; top:.85rem; color:var(--brand-gold); font-size:1.3rem; transition:transform .2s ease; }
.ns-faq details[open] summary::after { transform:rotate(45deg); }
.ns-faq details p { margin:0 0 1rem; }
.ns-takeaways { margin:0 0 1rem; padding:1.3rem 1.5rem; border-left:4px solid var(--brand-gold); border-radius:0 14px 14px 0; background:var(--ns-card); }
.ns-takeaways h2 { margin:0 0 .6rem; font-size:1.25rem; }
.ns-takeaways ul { margin:0; padding-left:1.2rem; line-height:1.8; }
.ns-byline { margin:1rem 0 0; color:#6f7790; font-size:.85rem; }

/* Techniques overview */
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ns-ink { color:var(--ns-ink); }
.ns-hub-progress__bar { height:10px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.ns-hub-progress__bar span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand-gold),#ffd18f); transition:width .8s cubic-bezier(.3,.9,.3,1); }
.ns-hub-progress__text { margin:.55rem 0 1rem !important; color:var(--ns-ink); font-weight:700; font-size:.92rem; }
.ns-path { margin:0 0 2.75rem; }
.ns-path__list { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; counter-reset:none; }
.ns-tech { position:relative; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:1.1rem; align-items:start; padding:1rem; border:1px solid var(--ns-line); border-radius:18px; background:radial-gradient(120% 90% at 0% 0%,rgba(255,160,52,.07),transparent 60%),var(--ns-card); transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.ns-tech:hover { border-color:var(--border-gold); transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.28); }
.ns-tech__board { display:block; border-radius:12px; }
.ns-board--mini { width:100%; pointer-events:none; }
.ns-board--mini .ns-unit { animation:none; }
.ns-tech__body h3 { margin:.35rem 0 .35rem; font-family:var(--font-heading); font-size:1.35rem; line-height:1.15; }
.ns-tech__body h3 a { color:var(--ns-ink); text-decoration:none; }
.ns-tech__body h3 a::after { content:""; position:absolute; inset:0; border-radius:18px; }
.ns-tech__body p { margin:0 0 .6rem; line-height:1.6; font-size:.93rem; }
.ns-tech__hook { color:#ffd18f; font-weight:700; }
.ns-tech__scene { color:#7f879c; font-size:.82rem !important; font-style:italic; }
.ns-tech__meta { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:0 !important; }
.ns-tech__num { color:var(--brand-gold); font-family:var(--font-heading); font-weight:900; font-size:1rem; letter-spacing:.04em; }
.ns-tech__lvl,.ns-tech__done { padding:.15rem .55rem; border-radius:99px; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ns-tech__lvl--beginner { background:rgba(127,209,151,.14); color:var(--ns-good); }
.ns-tech__lvl--intermediate { background:rgba(56,182,230,.14); color:#8fd6f2; }
.ns-tech__done { display:none; background:var(--ns-good); color:#0d1a12; }
.ns-tech.is-complete .ns-tech__done { display:inline-block; }
.ns-tech.is-complete { border-color:rgba(127,209,151,.45); }
.ns-tech__cta { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.35rem; margin-top:.2rem; text-decoration:none; }
.ns-tech:hover .ns-tech__cta { background:rgba(255,160,52,.2); border-color:var(--brand-gold); }
.ns-routine { margin:1rem 0 0; }
.ns-glossary dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem; margin:0; }
.ns-glossary dl > div { padding:.85rem 1rem; border:1px solid var(--ns-line); border-radius:12px; background:rgba(255,255,255,.03); }
.ns-glossary dt { color:var(--ns-ink); font-weight:800; margin:0 0 .25rem; }
.ns-glossary dd { margin:0; line-height:1.6; font-size:.93rem; }
@media (max-width:1000px) { .ns-path__list { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .ns-tech { grid-template-columns:1fr; padding:.85rem; }
  .ns-tech__board { width:min(100%,320px); margin:0 auto; }
}
@media (prefers-reduced-motion:reduce) { .ns-tech:hover { transform:none; } }

/* Game tie-ins: icons, store buttons, board credit, promo cards */
.ns-icon { width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-.18em; }
.ns-icon--sm { width:.95em; height:.95em; }
.ns-stores { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.1rem 0 0; }
.ns-store { display:inline-flex; align-items:center; gap:.6rem; min-height:50px; padding:.45rem 1rem .45rem .75rem; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:#0b0d14; color:#f3f4f7 !important; font-family:var(--font-heading); font-size:1rem; font-weight:700; line-height:1.05; text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.ns-store img { width:24px; height:24px; object-fit:contain; }
.ns-store small { display:block; margin-bottom:.15rem; color:#9aa2b4; font-family:var(--font-body,inherit); font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.ns-store:hover { transform:translateY(-2px); border-color:var(--brand-gold,#ffa034); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.ns-store.is-mine,.ns-stores > .ns-store:first-child { border-color:rgba(255,160,52,.6); background:linear-gradient(180deg,#1b1610,#0b0d14); }
.ns-store--web { background:rgba(255,255,255,.03); }
.ns-store[data-store="android"]:hover { border-color:#34c759; color:#34c759 !important; }
.ns-store[data-store="ios"]:hover { border-color:#0d96f6; color:#0d96f6 !important; }
.ns-store[data-store="web"]:hover { border-color:#9b6bff; color:#9b6bff !important; }
.ns-store img { transition:filter .18s ease; }
.ns-store small { transition:color .18s ease; }
.ns-store[data-store]:hover small { color:inherit; opacity:.85; }
.ns-store[data-store="android"]:hover img { filter:brightness(0) saturate(100%) invert(63%) sepia(35%) saturate(825%) hue-rotate(82deg) brightness(94%) contrast(95%); }
.ns-store[data-store="ios"]:hover img { filter:brightness(0) saturate(100%) invert(46%) sepia(43%) saturate(3648%) hue-rotate(180deg) brightness(99%) contrast(94%); }
.ns-store[data-store="web"]:hover img { filter:brightness(0) saturate(100%) invert(47%) sepia(22%) saturate(2045%) hue-rotate(219deg) brightness(101%) contrast(101%); }
.ns-stores--compact .ns-store { min-height:44px; font-size:.92rem; }
.ns-store:focus-visible,.ns-next:focus-visible { outline:3px solid var(--brand-gold,#ffa034); outline-offset:2px; }

.ns-credit { display:flex; align-items:center; gap:.6rem; margin:.9rem 0 0; color:#a6adbf; font-size:.88rem; line-height:1.5; }
.ns-credit img { width:22px; height:22px; flex:0 0 auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }

.ns-promo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(1.1rem,3.5vw,2.25rem); align-items:center; margin:2.5rem 0 1rem; padding:clamp(1rem,3vw,1.6rem); border:1px solid var(--border-gold,rgba(255,160,52,.35)); border-radius:20px; background:radial-gradient(120% 100% at 100% 0%,rgba(255,160,52,.12),transparent 60%),var(--ns-card,#141826); }
.ns-promo__art { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.ns-promo h2,.ns-promo h3 { margin:0 0 .55rem; color:var(--ns-ink,#eef0f5); font-family:var(--font-heading); letter-spacing:-.02em; line-height:1.15; }
.ns-promo h2 { font-size:clamp(1.4rem,2.8vw,1.9rem); }
.ns-promo h3 { font-size:1.2rem; }
.ns-promo p { margin:0; line-height:1.7; }
.ns-promo .ns-overline { margin-bottom:.45rem; }
.ns-next { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.1rem; padding:.8rem 1rem; border-radius:12px; border:1px solid var(--ns-line,rgba(255,255,255,.09)); background:rgba(255,255,255,.03); color:var(--ns-ink,#eef0f5) !important; font-family:var(--font-heading); font-weight:800; font-size:1.05rem; text-decoration:none; transition:border-color .18s ease,background .18s ease; }
.ns-next small { display:block; color:var(--brand-gold,#ffa034); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.ns-next .ns-icon { width:1.5em; height:1.5em; color:var(--brand-gold,#ffa034); transition:transform .2s ease; }
.ns-next:hover { border-color:var(--border-gold,rgba(255,160,52,.4)); background:rgba(255,160,52,.07); }
.ns-next:hover .ns-icon { transform:translateX(4px); }
.ns-promo--done { grid-template-columns:56px minmax(0,1fr); align-items:start; margin:1.4rem 0 0; border-color:rgba(127,209,151,.45); background:radial-gradient(120% 100% at 0% 0%,rgba(127,209,151,.12),transparent 60%),rgba(8,10,18,.5); }
.ns-promo--done .ns-overline { color:var(--ns-good,#7fd197); }
.ns-promo__icon { width:56px; height:56px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.ns-promo--done.is-in { animation:ns-promo-in .7s cubic-bezier(.2,1.2,.4,1) both; }
.ns-promo--done.is-in .ns-promo__icon { animation:ns-promo-drop .8s cubic-bezier(.3,1.5,.5,1) .1s both; }
@keyframes ns-promo-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes ns-promo-drop { from { transform:translateY(-30px) scale(.6); opacity:0; } to { transform:none; opacity:1; } }
@media (max-width:760px) {
  .ns-promo { grid-template-columns:1fr; }
  .ns-promo--done { grid-template-columns:44px minmax(0,1fr); }
  .ns-promo__icon { width:44px; height:44px; }
  .ns-stores { display:grid; grid-template-columns:1fr 1fr; }
  .ns-store { justify-content:flex-start; padding-right:.6rem; font-size:.92rem; }
  .ns-stores > .ns-store:last-child:nth-child(odd) { grid-column:1 / -1; }
  .ns-store span { white-space:nowrap; }
}
@media (max-width:560px) {
  .ns-promo--done { grid-template-columns:1fr; }
  .ns-promo--done .ns-promo__icon { display:none; }
  .ns-stores--compact { grid-template-columns:1fr; }
}
@media (max-width:360px) { .ns-stores { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .ns-promo--done.is-in,.ns-promo--done.is-in .ns-promo__icon { animation:none; } .ns-store:hover { transform:none; } }

/* Marble Sudoku game page */
.mh-try-link { display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; color:#ffd18f; font-size:.92rem; font-weight:700; text-decoration:none; }
.mh-try-link .ns-icon { width:1.6em; height:1.6em; padding:.35em; border-radius:50%; background:rgba(255,160,52,.16); color:var(--brand-gold); }
.mh-try-link:hover { color:#fff; }
.mh-try { margin:4.5rem 0 0; scroll-margin-top:90px; }
.mh-try__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1rem 2rem; }
.mh-try__head h2 { margin:.6rem 0 .5rem; color:#f8f8fa; font-family:var(--font-heading); font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.04em; line-height:1.1; }
.mh-try__head p:last-child { max-width:620px; margin:0; color:#9da5b6; line-height:1.7; }
.mh-try__head .ns-toolbar { margin:0; }
.mh-try__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:clamp(1.25rem,4vw,3rem); align-items:start; margin-top:1.4rem; }
.mh-try__side { position:sticky; top:96px; }
.mh-try__score { display:flex; justify-content:space-between; align-items:baseline; color:#9da5b6; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mh-try__score strong { color:var(--ns-ink); text-transform:none; font-family:var(--font-heading); font-size:1.6rem; letter-spacing:0; font-variant-numeric:tabular-nums; }
.mh-try .ns-btn { display:inline-flex; align-items:center; gap:.4rem; }
.mh-colors { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:.5rem; margin:1.6rem 0 0; padding:.9rem; list-style:none; border-radius:16px; background:linear-gradient(180deg,#6b4325,#4a2c17); box-shadow:inset 0 2px 0 rgba(255,220,170,.18),0 14px 30px rgba(0,0,0,.3); }
.mh-colors li { display:flex; flex-direction:column; align-items:center; gap:.2rem; color:#f2e2cc; }
.mh-colors img { width:min(44px,100%); height:auto; aspect-ratio:1; filter:drop-shadow(0 3px 3px rgba(27,14,5,.5)); transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
.mh-colors li:hover img { transform:translateY(-4px) scale(1.08); }
.mh-colors b { font-family:var(--font-heading); font-size:1rem; line-height:1; }
.mh-colors span { font-size:.62rem; font-weight:700; letter-spacing:.04em; opacity:.8; }
.mh-colors__note { margin:.8rem 0 0; color:#9da5b6; font-size:.88rem; }
.mh-mini { width:78px; height:78px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:5px; border-radius:10px; background:linear-gradient(180deg,#8a5a33,#5d3a1f); }
.mh-mini i { display:grid; place-items:center; aspect-ratio:1; min-width:0; border-radius:50%; background:rgba(40,20,8,.55); box-shadow:inset 0 2px 3px rgba(0,0,0,.45); }
.mh-mini i img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.mh-features { padding-top:5.2rem; }
.mh-feat { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.8rem 0 0; padding:0; list-style:none; }
.mh-feat li { display:flex; gap:.9rem; padding:1.15rem; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); }
.mh-feat__icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:rgba(255,160,52,.12); color:var(--brand-gold); }
.mh-feat__icon .ns-icon { width:22px; height:22px; }
.mh-feat h3 { margin:0 0 .3rem; color:#f5f6f8; font-size:1rem; }
.mh-feat p { margin:0; color:#929bad; font-size:.85rem; line-height:1.55; }
.marble-text-link .ns-icon { margin-left:.25rem; transition:transform .2s ease; }
.marble-text-link:hover .ns-icon { transform:translateX(4px); }
.mh-tech-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; margin:1.55rem 0 0; padding:0; list-style:none; }
.mh-tech a { display:flex; flex-direction:column; gap:.45rem; height:100%; padding:.8rem; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:#121725; color:#9da5b6; text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.mh-tech a:hover { transform:translateY(-4px); border-color:rgba(255,160,52,.55); }
.mh-tech .ns-board--mini { margin-bottom:.35rem; }
.mh-tech__meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; color:var(--brand-gold); font-family:var(--font-heading); font-weight:900; }
.mh-tech strong { color:#fff; font-family:var(--font-heading); font-size:1.15rem; }
.mh-tech__hook { font-size:.84rem; line-height:1.55; }
.mh-tech__cta { display:inline-flex; align-items:center; gap:.35rem; margin-top:auto; padding-top:.4rem; color:var(--brand-gold); font-size:.85rem; font-weight:800; }
.mh-tech a:hover .mh-tech__cta .ns-icon { transform:translateX(4px); }
.mh-tech__cta .ns-icon { transition:transform .2s ease; }
.mh-tech.is-complete a { border-color:rgba(127,209,151,.45); }
.mh-tech.is-complete .ns-tech__done { display:inline-flex; align-items:center; gap:.2rem; }
.mh-faq { margin-top:4.5rem; color:#9da5b6; }
.mh-faq h2 { margin:.6rem 0 .8rem; color:#f8f8fa; font-family:var(--font-heading); font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.04em; }
.mh-faq a { color:var(--brand-gold); }
.mh-final { margin-top:3rem; }
@media (max-width:980px) {
  .mh-tech-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mh-feat { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mh-try__grid { grid-template-columns:1fr; }
  .mh-try__side { position:static; }
}
@media (max-width:700px) { .mh-mini { grid-row:span 2; width:70px; height:70px; } }
@media (max-width:600px) {
  .mh-try { margin-top:3rem; padding:1rem .75rem; }
  .mh-feat { grid-template-columns:1fr; }
  .mh-colors { gap:.15rem; padding:.6rem .35rem; }
  .mh-colors span { display:none; }
  .mh-tech-grid { gap:.6rem; }
  .mh-tech a { padding:.55rem; }
  .mh-tech strong { font-size:1rem; }
  .mh-tech__hook { display:none; }
}

@media (max-width:900px) {
  .ns-answer,.ns-columns { grid-template-columns:1fr; }
  .ns-lab__grid { grid-template-columns:1fr; grid-template-areas:"coach" "play"; }
  .ns-lab__coach { position:static; }
}
@media (max-width:560px) {
  .ns-article { width:calc(100% - 1.5rem); }
  .ns-lab { padding:1rem .75rem; border-radius:16px; }
  .ns-coach { padding:.85rem .9rem; }
  .ns-coach h3 { font-size:1.12rem; }
  .ns-coach p { font-size:.9rem; }
  .ns-tray { padding:.55rem .35rem .45rem; border-radius:12px; }
  .ns-tray__chips { gap:.12rem; }
  .ns-chip__name { font-size:.56rem; }
  .ns-score__num { font-size:1.4rem; }
  .ns-toast { font-size:.88rem; }
}
/* Completed row, column or box (game page demo). */
/* Finished row, column or box: marbles light up one after another. */
.ns-star { position:absolute; z-index:6; width:2cqw; height:2cqw; min-width:8px; min-height:8px; pointer-events:none; background:radial-gradient(circle,#fff 0 30%,#ffe9b0 60%,transparent 70%); clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); filter:drop-shadow(0 0 3px rgba(255,226,150,.9)); transform:translate(-50%,-50%) scale(0); animation:ns-twinkle .9s ease-out forwards; }
@keyframes ns-twinkle { 0% { transform:translate(-50%,-50%) scale(0) rotate(0); opacity:0; } 35% { transform:translate(-50%,-50%) scale(var(--s,1)) rotate(30deg); opacity:1; } 100% { transform:translate(-50%,-50%) scale(0) rotate(90deg); opacity:0; } }
.ns-marble.is-lit img { animation:ns-lit 1.5s ease var(--ld,0ms) both; }
@keyframes ns-lit { 0% { filter:drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); } 18% { filter:brightness(1.28) drop-shadow(0 0 1.8cqw rgba(255,226,150,.95)) drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); } 45% { filter:brightness(1.12) drop-shadow(0 0 1.2cqw rgba(255,214,130,.7)) drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); } 100% { filter:drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); } }
.ns-marble.is-lit { animation:ns-lit-pop .7s cubic-bezier(.3,1.4,.5,1) var(--ld,0ms) both; }
@keyframes ns-lit-pop { 35% { scale:1.14; translate:0 -6%; } 70% { scale:.98; translate:0 0; } }
.ns-marble.is-wave { animation:ns-wave .6s cubic-bezier(.3,1.5,.5,1) var(--wave,0ms) both; }
.ns-marble.is-wave img { animation:ns-wave-glow .7s ease-out var(--wave,0ms) both; }
@keyframes ns-wave { 0%,100% { translate:0 0; scale:1; } 40% { translate:0 -14%; scale:1.2; } }
@keyframes ns-wave-glow { 40% { filter:brightness(1.3) drop-shadow(0 0 1.6cqw rgba(255,232,160,.95)) drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); } }

@media (prefers-reduced-motion:reduce) {
  .ns-marble.is-lit,.ns-marble.is-lit img { animation:none; }
  .ns-marble.is-wave,.ns-marble.is-wave img { animation:none; }
  .ns-unit.is-on,.ns-target,#labTarget::after,.ns-ghost,.ns-cell.is-selected,.ns-cell.is-hint,.ns-chip.is-last { animation:none; }
  .ns-marble.is-dropped,.is-shake,.is-bump,.is-hit,.is-pop { animation:none !important; }
}

/* Color focus: dim every marble except the color being tracked. */
.ns-board[data-focus]:not([data-focus=""]) .ns-marble:not(.is-focus) { opacity:.3; filter:saturate(.35); }
.ns-board[data-focus]:not([data-focus=""]) .ns-marble.is-focus img { filter:drop-shadow(0 0 1.2cqw rgba(255,240,200,.75)) drop-shadow(0 .4cqw .4cqw rgba(27,14,5,.45)); }
button.ns-marble.is-focus:hover { transform:translate(-50%,-50%) scale(1.1); }

/* Ghost marbles mark holes where one color is still possible. */
.ns-ghost { position:absolute; inset:27%; width:46%; height:46%; object-fit:contain; opacity:.6; pointer-events:none; transition:opacity .25s ease, transform .25s ease, filter .25s ease; animation:ns-ghost 2.4s ease-in-out infinite; }
@keyframes ns-ghost { 50% { opacity:.85; } }
.ns-cell.has-ghost:hover .ns-ghost { opacity:.95; animation:none; }
.ns-cell.is-blocked .ns-ghost { opacity:.18; filter:grayscale(1); transform:scale(.8); animation:none; }
.ns-cell.is-blocked::after { content:""; position:absolute; inset:24%; background:linear-gradient(45deg,transparent 43%,#ff6f5c 43%,#ff6f5c 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#ff6f5c 43%,#ff6f5c 57%,transparent 57%); border-radius:20%; opacity:.9; animation:ns-pop .25s ease; pointer-events:none; }
.ns-cell.is-plain { cursor:default; }
.ns-cell.is-plain:hover { background:transparent; box-shadow:none; }
.ns-cell.is-pair { box-shadow:0 0 0 2.5px #b9f5c8,0 0 14px rgba(127,209,151,.7); }
.ns-cell.is-pair .ns-ghost { opacity:1; animation:none; transform:scale(1.25); }
.ns-cell.has-ghost.is-selected .ns-ghost { opacity:1; animation:none; transform:scale(1.25); }

/* Beams: a color's row or column sweeping across the board. */
.ns-beam { position:absolute; z-index:1; opacity:0; pointer-events:none; border-radius:1.6cqw; background:linear-gradient(90deg,rgba(255,236,190,.05),rgba(255,214,140,.45),rgba(255,236,190,.05)); box-shadow:0 0 18px rgba(255,200,120,.55),inset 0 0 0 1.5px rgba(255,236,190,.85); }
.ns-beam.is-on { opacity:1; }
.ns-beam--row { transform-origin:var(--ox) 50%; animation:ns-beam-x .5s cubic-bezier(.3,.9,.3,1) both; }
.ns-beam--column { background:linear-gradient(180deg,rgba(255,236,190,.05),rgba(255,214,140,.45),rgba(255,236,190,.05)); transform-origin:50% var(--oy); animation:ns-beam-y .5s cubic-bezier(.3,.9,.3,1) both; }
@keyframes ns-beam-x { from { transform:scaleX(0); } }
@keyframes ns-beam-y { from { transform:scaleY(0); } }

/* Pair link and popping notes. */
.ns-link-line { position:absolute; z-index:1; height:.9cqw; min-height:3px; margin-top:-.45cqw; border-radius:99px; background:linear-gradient(90deg,#b9f5c8,#7fd197); box-shadow:0 0 12px rgba(127,209,151,.8); transform-origin:0 50%; pointer-events:none; animation:ns-link .45s cubic-bezier(.3,.9,.3,1) both; opacity:.85; }
@keyframes ns-link { from { scale:0 1; } }
.ns-notes i.is-popping { animation:ns-note-pop .5s ease-in forwards; }
@keyframes ns-note-pop { 30% { transform:scale(1.6); } 100% { transform:scale(0) translateY(-40%); opacity:0; } }
.ns-board.show-notes .ns-cell .ns-notes,.ns-board .ns-cell.in-unit .ns-notes { display:grid; }

/* Picked color chip in the tray. */
.ns-chip.is-picked { background:rgba(255,236,190,.2); box-shadow:0 0 0 2px #ffe3a8,0 0 16px rgba(255,211,124,.7); transform:translateY(-3px); }
.ns-reveal { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.75rem; color:var(--ns-muted); font-size:.85rem; }
.ns-reveal[hidden] { display:none; }
.ns-reveal img { width:28px; height:28px; }
.ns-reveal img.is-key { width:36px; height:36px; filter:drop-shadow(0 0 6px rgba(255,236,190,.9)); }
.ns-round-color { color:var(--ns-ink); font-weight:800; }

.ns-cell.has-ghost { outline:2px dashed rgba(255,248,220,.55); outline-offset:-3px; }
.ns-cell.has-ghost.is-blocked { outline-color:rgba(255,111,92,.35); }
.ns-board:not(.ns-board--practice) .ns-cell .ns-notes { inset:4%; gap:2%; }

/* Naked pairs: the worked row drawn large under the board. */
.np-zoom { width:min(100%,520px); margin:.8rem auto 0; padding:.55rem .6rem .65rem; border-radius:14px; background:linear-gradient(180deg,#6b4325,#4a2c17); box-shadow:inset 0 2px 0 rgba(255,220,170,.18),inset 0 -3px 6px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.28); container-type:inline-size; }
.np-zoom__label { margin:0 .2rem .45rem; color:rgba(255,232,200,.78); font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.np-zoom__row { display:grid; grid-template-columns:repeat(9,1fr); gap:1.2cqw; }
.np-zoom__cell { position:relative; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:rgba(20,10,4,.45); box-shadow:inset 0 .6cqw 1.2cqw rgba(0,0,0,.55); transition:box-shadow .15s ease,background .15s ease; -webkit-tap-highlight-color:transparent; }
.np-zoom__cell.is-edge { margin-right:1.2cqw; }
button.np-zoom__cell { cursor:pointer; }
button.np-zoom__cell:hover { background:rgba(255,236,190,.14); }
.np-zoom__cell img { position:absolute; inset:4%; width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 .5cqw .5cqw rgba(0,0,0,.45)); }
.np-zoom__cell.is-given img { opacity:.55; filter:saturate(.5) drop-shadow(0 .5cqw .5cqw rgba(0,0,0,.45)); }
.np-zoom__cell.is-placed img { animation:ns-pop .3s ease; }
.np-zoom__cell .ns-notes { display:grid; inset:5%; gap:1%; }
.np-zoom__cell .ns-notes b { font-size:2cqw; }
.np-zoom__cell.is-selected { background:rgba(255,236,190,.2); box-shadow:0 0 0 2px #fff6dc,0 0 0 4px rgba(255,160,52,.9),0 0 14px rgba(255,211,124,.7); }
.np-zoom__cell.is-pair { box-shadow:0 0 0 2px #b9f5c8,0 0 12px rgba(127,209,151,.7); }
.np-zoom__cell.is-hint { animation:ns-hint 1s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .np-zoom__cell.is-hint,.np-zoom__cell.is-placed img { animation:none; } }

/* ===== Language switcher (header + mobile drawer) ===== */
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; display: flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .8rem; border: 2px solid #fff; border-radius: 999px; color: #fff; font-family: var(--font-heading); font-size: .8rem; font-weight: 800; letter-spacing: .08em; cursor: pointer; user-select: none; transition: background-color .2s ease, color .2s ease; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary .ns-icon { width: 18px; height: 18px; }
.lang-switch > summary:hover, .lang-switch[open] > summary { background: #fff; color: #0b0d17; }
.lang-switch > summary:focus-visible { outline: 3px solid #0b0d17; outline-offset: 2px; }
.lang-switch__menu { position: absolute; right: 0; top: calc(100% + .55rem); min-width: 10.5rem; padding: .4rem; background: #fff; border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); display: grid; gap: .15rem; z-index: 120; animation: langIn .18s ease-out; }
.lang-switch__menu a { display: block; padding: .6rem .8rem; border-radius: 9px; color: #0b0d17 !important; font-weight: 700; font-size: .95rem; }
.lang-switch__menu a:hover, .lang-switch__menu a:focus-visible { background: #f3f0e8; }
.lang-switch__menu a[aria-current] { background: var(--brand-gold); color: #fff !important; }
@keyframes langIn { from { opacity: 0; transform: translateY(-4px); } }
.lang-drawer { display: flex; align-items: center; gap: 1.1rem; color: #fff; margin-top: .5rem; }
.lang-drawer .ns-icon { width: 22px; height: 22px; }
.lang-drawer a { color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; letter-spacing: .06em; opacity: .8; }
.lang-drawer a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 920px) { .lang-switch > summary { padding: 0 .65rem; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .lang-switch__menu { animation: none; } }

/* Anything marked hidden stays hidden, even when a class gives it a display value (the finish promo showed too early). */
[hidden] { display:none !important; }

/* Keep "LUMA PLAY" on one line next to the language button on narrow phones. */
.brand-text { white-space:nowrap; }
@media (max-width:440px) { .site-header { padding:0 1rem; } .brand-badge { gap:.55rem; } .brand-logo-box img { width:40px; height:40px; } .brand-text { font-size:1.2rem; letter-spacing:.06em; } .header-right { gap:.5rem; } .lang-switch > summary { padding:0 .55rem; gap:.3rem; } }
@media (max-width:350px) { .brand-text { font-size:1.05rem; } .lang-switch > summary .ns-icon { display:none; } }

/* ===== Game page: screenshot carousel in the hero ===== */
.mh-shots { isolation:isolate; touch-action:pan-y; }
.mh-shots::after { z-index:1; inset:45% 0 0; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(8,10,16,.55) 45%, rgba(8,10,16,.9)); }
.mh-shots__track { position:absolute; inset:0; }
.mh-shot { position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.03); transition:opacity .7s ease, transform 1.2s ease, visibility 0s linear .7s; }
.mh-shot.is-active { opacity:1; visibility:visible; transform:none; transition:opacity .7s ease, transform 1.2s ease, visibility 0s; }
.mh-shot img, .mh-shot video { display:block; width:100%; height:100%; object-fit:cover; }
.mh-shot__cap { position:absolute; z-index:2; right:1.2rem; bottom:1.1rem; left:1.2rem; display:flex; align-items:center; gap:.8rem; color:#fff; padding-right:5.5rem; }
.mh-shot__cap strong, .mh-shot__cap small { display:block;  text-shadow:0 1px 3px rgba(0,0,0,.6); }
.mh-shot__cap strong { font-family:var(--font-heading); font-size:.95rem; }
.mh-shot__cap small { margin-top:.15rem; color:#d1d3d9; font-size:.75rem; line-height:1.4; }
.mh-shot__cap .marble-art-mark { position:relative; }
.mh-shots__nav { position:absolute; z-index:3; top:50%; width:42px; height:42px; display:grid; place-items:center; margin-top:-21px; padding:0; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(12,15,22,.55); color:#fff; cursor:pointer; backdrop-filter:blur(8px); opacity:0; transition:opacity .25s ease, background .2s ease, transform .2s ease; }
.mh-shots__nav .ns-icon { width:20px; height:20px; }
.mh-shots__nav--prev { left:.8rem; }
.mh-shots__nav--next { right:.8rem; }
.mh-shots:hover .mh-shots__nav, .mh-shots__nav:focus-visible { opacity:1; }
.mh-shots__nav:hover { background:rgba(255,160,52,.9); color:#0b0d17; }
.mh-shots__nav:active { transform:scale(.94); }
.mh-shots__nav:focus-visible, .mh-shots__dots button:focus-visible { outline:3px solid var(--marble-accent,#ffa034); outline-offset:2px; }
.mh-shots__dots { position:absolute; z-index:3; right:1.2rem; bottom:1.55rem; display:flex; gap:.45rem; }
.mh-shots__dots button { width:9px; height:9px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.45); cursor:pointer; transition:width .3s ease, background .3s ease; }
.mh-shots__dots button[aria-current] { width:26px; background:var(--marble-accent,#ffa034); }
@media (hover:none) { .mh-shots__nav { opacity:.85; width:36px; height:36px; margin-top:-18px; } }
@media (max-width:640px) { .mh-shot__cap { right:.85rem; bottom:.8rem; left:.85rem; padding-right:0; } .mh-shot__cap small { font-size:.7rem; } .mh-shots__dots { top:.85rem; right:.85rem; bottom:auto; } .mh-shots__nav--prev { left:.5rem; } .mh-shots__nav--next { right:.5rem; } }
@media (prefers-reduced-motion:reduce) { .mh-shot, .mh-shot.is-active { transform:none; transition:opacity .2s linear, visibility 0s; } }
.social-icon-svg { width:1.15rem; height:1.15rem; display:block; }
body:not(.ns-show-numbers) .txt-n, body.ns-show-numbers .txt-c { display:none; }
.ns-tech__lvl--advanced { background:rgba(255,160,52,.16); color:var(--brand-gold,#ffa034); }

/* Lesson "at a glance" board (2026-10-27): plays the move next to the numbered steps. */
.ns-glance { max-width:340px; margin:0 auto 1rem; border-radius:12px; }
.ns-answer__steps .ns-steps li, .ns-answer__steps .ns-steps__result { transition:opacity .35s ease, transform .35s ease; }
.ns-answer__steps:has(.is-on) .ns-steps li:not(.is-on), .ns-answer__steps:has(.is-on) .ns-steps__result:not(.is-on) { opacity:.5; }
.ns-steps li.is-on > span { box-shadow:0 0 0 4px rgba(255,160,52,.25), 0 0 18px rgba(255,160,52,.55); transform:scale(1.08); }
.ns-steps li > span { transition:box-shadow .35s ease, transform .35s ease; }
.ns-steps li.is-on strong, .ns-steps__result.is-on strong { color:var(--brand-gold); }
@media (prefers-reduced-motion: reduce) { .ns-answer__steps:has(.is-on) .ns-steps li:not(.is-on) { opacity:1; } }

/* Advanced lessons (2026-10-27): Skyscraper base, sight lines, wing pivots. */
.ns-link-line.is-base { background:linear-gradient(90deg,#ffe2a6,#ffb44a); box-shadow:0 0 12px rgba(255,180,74,.85); }
.ns-link-line.is-sight { height:.45cqw; min-height:2px; margin-top:-.22cqw; background:repeating-linear-gradient(90deg,rgba(255,236,190,.85) 0 6px,transparent 6px 11px); box-shadow:none; opacity:.7; }
.ns-cell.is-base { box-shadow:0 0 0 2.5px rgba(255,211,124,.85),0 0 12px rgba(255,180,74,.5); }
.ns-cell.is-base .ns-ghost { opacity:.75; animation:none; }
.ns-cell.is-pivot { box-shadow:0 0 0 2.5px #fff6dc,0 0 0 5px rgba(255,180,74,.95),0 0 18px rgba(255,211,124,.8); }
.ns-cell.is-wing { box-shadow:0 0 0 2.5px #b9f5c8,0 0 14px rgba(127,209,151,.75); }
.ns-notes i.is-dim { opacity:.2; filter:grayscale(1); transition:opacity .3s ease; }
.ns-marble.is-ghosty { opacity:.6; filter:saturate(.85); animation:ns-ghosty-in .35s ease-out; pointer-events:none; }
@keyframes ns-ghosty-in { from { opacity:0; transform:translate(-50%,-50%) scale(.6); } }
/* Simple Coloring: the two teams of a chain */
.ns-cell.is-tone-a { box-shadow:0 0 0 2.5px #ffb44a,0 0 14px rgba(255,170,60,.85); }
.ns-cell.is-tone-b { box-shadow:0 0 0 2.5px #8fd0ff,0 0 14px rgba(110,180,255,.9); }
.ns-cell.is-tone-a .ns-ghost,.ns-cell.is-tone-b .ns-ghost { opacity:1; animation:none; transform:scale(1.2); }
.ns-link-line.is-hintline { opacity:.4; }