/* =========================================================
   網頁設計（基礎）首頁 ｜ NEO-CODE 風格
   純黑底＋電光藍＋酸性萊姆綠，程式碼編輯器／終端機語彙。
   與 web-design（海洋藍綠＋橘）刻意做出不同識別。前綴 nx-
   ========================================================= */
:root {
  --nx-bg: #06070b;
  --nx-bg2: #0b0d14;
  --nx-panel: #10131c;
  --nx-line: rgba(160, 180, 255, .14);
  --nx-ink: #e8ecf6;
  --nx-dim: #8d96ad;
  --nx-faint: #5b6378;
  --nx-blue: #4d7cff;
  --nx-lime: #c6ff3d;
  --nx-pink: #ff4fa3;
  --nx-cyan: #3df0ff;
  --nx-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --nx-display: "Space Grotesk", "Noto Sans TC", sans-serif;
  --nx-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --nx-ease: cubic-bezier(.2, .8, .2, 1);

  /* 覆寫 main.css 的全站變數（頁首、頁尾一起變暗） */
  --background-color: var(--nx-bg);
  --default-color: var(--nx-ink);
  --heading-color: #fff;
  --accent-color: var(--nx-lime);
  --surface-color: var(--nx-panel);
  --contrast-color: #06070b;
  --nav-font: var(--nx-sans);
  --nav-color: rgba(232, 236, 246, .72);
  --nav-hover-color: var(--nx-lime);
  --nav-mobile-background-color: #0b0d14;
  --nav-dropdown-background-color: #10131c;
  --nav-dropdown-color: #cfd5e6;
  --nav-dropdown-hover-color: var(--nx-lime);
}
html { scroll-behavior: smooth; }
body.index-page { background: var(--nx-bg); color: var(--nx-ink); font-family: var(--nx-sans); -webkit-font-smoothing: antialiased; }
body.index-page ::selection { background: var(--nx-lime); color: #06070b; }

/* ---------- 共用 ---------- */
.nx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000; pointer-events: none; }
.nx-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--nx-blue), var(--nx-cyan), var(--nx-lime)); box-shadow: 0 0 12px var(--nx-lime); }
.nx-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.nx-sec { padding: clamp(64px, 9vw, 120px) 0 0; position: relative; }
.nx-head { margin-bottom: 36px; }
.nx-kicker { font-family: var(--nx-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-lime); display: inline-flex; align-items: center; gap: 10px; }
.nx-kicker::before { content: ""; width: 26px; height: 1px; background: var(--nx-lime); }
.nx-head h2 { font-family: var(--nx-display); font-weight: 700; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.15; letter-spacing: -.02em; color: #fff; margin: 14px 0 0; }
.nx-head h2 em { font-style: normal; color: var(--nx-lime); }
.nx-lead { color: var(--nx-dim); font-size: 17px; line-height: 1.85; max-width: 760px; margin: 0 0 8px; }
.nx-lead strong { color: var(--nx-ink); font-weight: 700; }
.nx-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--nx-mono); font-weight: 600; font-size: 14px; padding: 13px 22px; border-radius: 10px; border: 1px solid var(--nx-lime); background: var(--nx-lime); color: #06070b; text-decoration: none; transition: transform .2s var(--nx-ease), box-shadow .2s, background .2s; cursor: pointer; }
.nx-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(198, 255, 61, .18), 0 14px 30px -10px rgba(198, 255, 61, .5); color: #06070b; }
.nx-btn.ghost { background: transparent; color: var(--nx-ink); border-color: var(--nx-line); }
.nx-btn.ghost:hover { border-color: var(--nx-lime); color: var(--nx-lime); box-shadow: none; }
.nx-btn.sm { padding: 9px 15px; font-size: 12.5px; }
.nx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--nx-ease), transform .7s var(--nx-ease); }
.nx-reveal.in { opacity: 1; transform: none; }
.nx-js-off .nx-reveal { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.nx-hero { position: relative; overflow: hidden; padding: 150px 0 0; background:
  radial-gradient(900px 500px at 85% -10%, rgba(77, 124, 255, .28), transparent 60%),
  radial-gradient(700px 420px at -5% 30%, rgba(198, 255, 61, .09), transparent 60%), var(--nx-bg); }
.nx-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--nx-line) 1px, transparent 1px), linear-gradient(90deg, var(--nx-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); opacity: .55; }
.nx-spot { position: absolute; width: 520px; height: 520px; border-radius: 50%; left: var(--mx, 60%); top: var(--my, 30%); transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(61, 240, 255, .14), transparent 65%); pointer-events: none; transition: left .15s linear, top .15s linear; }
.nx-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-bottom: 70px; }
@media (max-width: 1000px) { .nx-hero-grid { grid-template-columns: 1fr; } .nx-hero { padding-top: 120px; } }
.nx-tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--nx-mono); font-size: 12px; color: var(--nx-dim); align-items: center; margin-bottom: 22px; }
.nx-tags .pill { border: 1px solid var(--nx-line); border-radius: 999px; padding: 4px 12px; background: rgba(255, 255, 255, .03); }
.nx-tags .pill.solid { background: rgba(198, 255, 61, .12); color: var(--nx-lime); border-color: rgba(198, 255, 61, .4); }
.nx-hero h1 { font-family: var(--nx-display); font-weight: 700; font-size: clamp(54px, 8.4vw, 112px); line-height: .98; letter-spacing: -.04em; color: #fff; margin: 0 0 6px; position: relative; }
.nx-hero h1 .en { display: block; font-family: var(--nx-mono); font-size: 14px; letter-spacing: .08em; font-weight: 500; color: var(--nx-lime); margin-bottom: 18px; }
.nx-hero h1 .glitch { position: relative; display: inline-block; }
.nx-hero h1 .glitch::before, .nx-hero h1 .glitch::after { content: attr(data-t); position: absolute; inset: 0; opacity: 0; }
.nx-hero h1 .glitch::before { color: var(--nx-cyan); }
.nx-hero h1 .glitch::after { color: var(--nx-pink); }
.nx-hero h1:hover .glitch::before { opacity: .85; animation: nxGl1 .5s steps(2) infinite; }
.nx-hero h1:hover .glitch::after { opacity: .85; animation: nxGl2 .5s steps(2) infinite; }
@keyframes nxGl1 { 0% { transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); } 50% { transform: translate(3px, -1px); clip-path: inset(60% 0 8% 0); } 100% { transform: translate(-2px, 0); clip-path: inset(30% 0 30% 0); } }
@keyframes nxGl2 { 0% { transform: translate(3px, -1px); clip-path: inset(50% 0 10% 0); } 50% { transform: translate(-3px, 1px); clip-path: inset(5% 0 60% 0); } 100% { transform: translate(2px, 0); clip-path: inset(35% 0 25% 0); } }
.nx-rot { font-family: var(--nx-mono); font-size: clamp(15px, 1.8vw, 19px); color: var(--nx-ink); margin: 20px 0 0; min-height: 1.6em; }
.nx-rot .w { color: var(--nx-lime); }
.nx-caret { display: inline-block; width: .55em; height: 1.05em; background: var(--nx-lime); vertical-align: -.18em; margin-left: 3px; animation: nxBlink 1s steps(1) infinite; }
@keyframes nxBlink { 50% { opacity: 0; } }
.nx-sub { color: var(--nx-dim); font-size: 17px; line-height: 1.9; max-width: 540px; margin: 22px 0 28px; }
.nx-sub strong { color: #fff; }
.nx-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* 編輯器＋即時預覽 */
.nx-ide { border: 1px solid var(--nx-line); border-radius: 16px; background: rgba(11, 13, 20, .85); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 0 80px -30px rgba(77, 124, 255, .55); overflow: hidden; backdrop-filter: blur(6px); }
.nx-ide-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--nx-line); font-family: var(--nx-mono); font-size: 12px; color: var(--nx-faint); }
.nx-ide-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a3042; }
.nx-ide-bar i:nth-child(1) { background: #ff5f57; } .nx-ide-bar i:nth-child(2) { background: #febc2e; } .nx-ide-bar i:nth-child(3) { background: #28c840; }
.nx-ide-bar .tab { margin-left: 10px; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05); color: var(--nx-ink); }
.nx-ide-bar .live { margin-left: auto; color: var(--nx-lime); display: flex; align-items: center; gap: 6px; }
.nx-ide-bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-lime); box-shadow: 0 0 10px var(--nx-lime); animation: nxBlink 1.4s infinite; }
.nx-ide-body { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 340px; }
@media (max-width: 640px) { .nx-ide-body { grid-template-columns: 1fr; } }
.nx-code { margin: 0; padding: 16px 16px 16px 12px; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.75; color: #c3cbe0; white-space: pre-wrap; counter-reset: ln; border-right: 1px solid var(--nx-line); min-height: 300px; word-break: break-all; }
.nx-code .t { color: #ff7ab2; } .nx-code .a { color: var(--nx-cyan); } .nx-code .s { color: var(--nx-lime); } .nx-code .p { color: #82a8ff; } .nx-code .c { color: var(--nx-faint); }
.nx-pv-wrap { background: #0a0c12; padding: 14px; display: flex; flex-direction: column; }
.nx-pv-url { font-family: var(--nx-mono); font-size: 11px; color: var(--nx-faint); border: 1px solid var(--nx-line); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
.nx-pv { flex: 1; border-radius: 10px; background: #fff; color: #111; padding: 18px; font-family: "Times New Roman", "Noto Serif TC", serif; transition: all .5s var(--nx-ease); overflow: hidden; }
.nx-pv .hero { display: block; transition: all .5s var(--nx-ease); }
.nx-pv h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; font-family: inherit; color: #111; letter-spacing: 0; line-height: 1.2; transition: color .5s, font-family .5s; }
.nx-pv p { font-size: 13px; margin: 0 0 10px; color: #333; }
.nx-pv .btn { display: inline-block; font-size: 13px; color: #00e; text-decoration: underline; transition: all .5s var(--nx-ease); }
.nx-pv [data-r] { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.nx-pv [data-r].on { opacity: 1; transform: none; }
.nx-pv.s1 { background: #0b0d14; color: #fff; }
.nx-pv.s1 .hero { display: grid; place-items: center; text-align: center; height: 100%; align-content: center; gap: 4px; }
.nx-pv.s1 h1 { font-family: var(--nx-display); font-size: 34px; }
.nx-pv.s1 p { color: #aab3c8; font-family: var(--nx-sans); }
.nx-pv.s2 h1 { color: var(--nx-lime); text-shadow: 0 0 24px rgba(198, 255, 61, .45); }
.nx-pv.s3 .btn { border-radius: 999px; background: var(--nx-lime); color: #06070b; text-decoration: none; padding: 9px 20px; font-weight: 700; font-family: var(--nx-mono); }

.nx-marquee { position: relative; z-index: 2; border-block: 1px solid var(--nx-line); background: rgba(6, 7, 11, .7); overflow: hidden; }
.nx-marquee-track { display: flex; width: max-content; animation: nxMar 40s linear infinite; }
.nx-marquee span { font-family: var(--nx-mono); font-size: 13px; color: var(--nx-dim); padding: 16px 28px; white-space: nowrap; }
.nx-marquee span::before { content: "◆"; color: var(--nx-lime); margin-right: 28px; font-size: 8px; vertical-align: 2px; }
@keyframes nxMar { to { transform: translateX(-50%); } }

/* ---------- 數據列 ---------- */
.nx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--nx-line); border: 1px solid var(--nx-line); border-radius: 16px; overflow: hidden; margin-top: -1px; }
@media (max-width: 760px) { .nx-stats { grid-template-columns: repeat(2, 1fr); } }
.nx-stats > div { background: var(--nx-bg2); padding: 26px 22px; }
.nx-stats b { display: block; font-family: var(--nx-display); font-size: clamp(34px, 5vw, 56px); line-height: 1; color: #fff; letter-spacing: -.03em; }
.nx-stats b::after { content: attr(data-suf); color: var(--nx-lime); }
.nx-stats small { display: block; margin-top: 10px; font-family: var(--nx-mono); font-size: 12px; color: var(--nx-dim); letter-spacing: .06em; }

/* ---------- 簡介 ---------- */
.nx-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .nx-intro { grid-template-columns: 1fr; } }
.nx-intro .lede { font-size: 18px; line-height: 1.95; color: var(--nx-dim); margin: 0 0 16px; }
.nx-intro .lede strong { color: var(--nx-ink); background: linear-gradient(transparent 62%, rgba(198, 255, 61, .22) 0); }

/* ---------- RWD 實驗 ---------- */
.nx-lab { border: 1px solid var(--nx-line); border-radius: 20px; background: var(--nx-bg2); padding: 20px; position: relative; overflow: hidden; }
.nx-lab::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(77, 124, 255, .3), transparent 70%); filter: blur(20px); }
.nx-lab-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; position: relative; font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); }
.nx-lab-top .val { color: var(--nx-lime); font-weight: 600; }
.nx-lab input[type=range] { -webkit-appearance: none; appearance: none; width: min(360px, 100%); height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--nx-blue), var(--nx-lime)); outline: none; }
.nx-lab input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--nx-lime); cursor: grab; box-shadow: 0 0 14px rgba(198, 255, 61, .7); }
.nx-lab input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--nx-lime); cursor: grab; }
.nx-stage { position: relative; display: flex; justify-content: center; padding: 16px; border-radius: 14px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 20px); border: 1px dashed var(--nx-line); }
.nx-frame { width: 100%; max-width: 100%; container-type: inline-size; background: #fff; border-radius: 12px; overflow: hidden; color: #111; box-shadow: 0 30px 60px -30px #000; transition: width .12s linear; }
.nx-m-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; font-family: var(--nx-display); font-weight: 700; font-size: 15px; }
.nx-m-nav .links { display: none; gap: 18px; font-size: 13px; font-weight: 500; color: #555; }
.nx-m-nav .burger { font-size: 20px; line-height: 1; }
.nx-m-hero { padding: 30px 18px; background: linear-gradient(135deg, #0b0d14, #1b2a6b); color: #fff; }
.nx-m-hero h4 { font-family: var(--nx-display); font-size: 22px; margin: 0 0 6px; color: #fff; }
.nx-m-hero p { font-size: 12.5px; margin: 0; color: #b8c2e0; }
.nx-m-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px; }
.nx-m-grid div { height: 74px; border-radius: 10px; background: linear-gradient(135deg, #e6ecff, #f3ffd1); display: grid; place-items: center; font-family: var(--nx-mono); font-size: 12px; color: #334; }
@container (min-width: 480px) { .nx-m-grid { grid-template-columns: repeat(2, 1fr); } .nx-m-hero h4 { font-size: 28px; } }
@container (min-width: 720px) { .nx-m-grid { grid-template-columns: repeat(3, 1fr); } .nx-m-nav .links { display: flex; } .nx-m-nav .burger { display: none; } .nx-m-hero { padding: 48px 32px; } .nx-m-hero h4 { font-size: 36px; } }
.nx-lab-code { margin: 14px 0 0; font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); position: relative; }
.nx-lab-code .s { color: var(--nx-lime); } .nx-lab-code .p { color: #82a8ff; }

/* ---------- 學習管線 ---------- */
.nx-pipe { position: relative; }
.nx-pipe-rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 760px) { .nx-pipe-rail { grid-template-columns: 1fr; } }
.nx-pipe-rail::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: var(--nx-line); }
.nx-pipe-rail::after { content: ""; position: absolute; left: 6%; top: 34px; height: 2px; width: calc(88% * var(--p, 0)); background: linear-gradient(90deg, var(--nx-blue), var(--nx-lime)); box-shadow: 0 0 10px var(--nx-lime); transition: width .5s var(--nx-ease); }
@media (max-width: 760px) { .nx-pipe-rail::before, .nx-pipe-rail::after { display: none; } }
.nx-node { position: relative; z-index: 1; background: none; border: 0; text-align: center; color: var(--nx-dim); padding: 0 6px; cursor: pointer; font-family: inherit; }
.nx-node .dot { width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; background: var(--nx-panel); border: 1px solid var(--nx-line); font-family: var(--nx-mono); font-weight: 700; font-size: 15px; color: var(--nx-dim); transition: all .3s var(--nx-ease); }
.nx-node b { display: block; font-family: var(--nx-display); font-size: 16px; color: var(--nx-ink); }
.nx-node small { font-family: var(--nx-mono); font-size: 11px; color: var(--nx-faint); }
.nx-node:hover .dot, .nx-node[aria-selected="true"] .dot { border-color: var(--nx-lime); color: #06070b; background: var(--nx-lime); box-shadow: 0 0 0 6px rgba(198, 255, 61, .15), 0 0 30px -4px rgba(198, 255, 61, .6); transform: translateY(-4px); }
.nx-pipe-panel { margin-top: 28px; border: 1px solid var(--nx-line); border-radius: 18px; background: var(--nx-bg2); padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; min-height: 170px; }
@media (max-width: 800px) { .nx-pipe-panel { grid-template-columns: 1fr; } }
.nx-pipe-panel h3 { font-family: var(--nx-display); font-size: 26px; color: #fff; margin: 0 0 10px; }
.nx-pipe-panel p { color: var(--nx-dim); line-height: 1.85; margin: 0; }
.nx-pipe-panel pre { margin: 0; padding: 16px 18px; border-radius: 12px; background: #06070b; border: 1px solid var(--nx-line); font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.8; color: #c3cbe0; overflow-x: auto; }
.nx-pipe-panel pre .t { color: #ff7ab2; } .nx-pipe-panel pre .a { color: var(--nx-cyan); } .nx-pipe-panel pre .s { color: var(--nx-lime); } .nx-pipe-panel pre .p { color: #82a8ff; } .nx-pipe-panel pre .c { color: var(--nx-faint); }

/* ---------- 期中→期末 ---------- */
.nx-two { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .nx-two { grid-template-columns: 1fr; } .nx-arrow { transform: rotate(90deg); justify-self: center; } }
.nx-card { border: 1px solid var(--nx-line); border-radius: 18px; background: var(--nx-bg2); padding: 26px; position: relative; overflow: hidden; transition: border-color .3s, transform .3s var(--nx-ease); }
.nx-card:hover { border-color: rgba(198, 255, 61, .5); transform: translateY(-4px); }
.nx-card .file { font-family: var(--nx-mono); font-size: 12px; color: var(--nx-lime); display: inline-flex; gap: 8px; align-items: center; padding: 4px 10px; border: 1px solid rgba(198, 255, 61, .35); border-radius: 6px; background: rgba(198, 255, 61, .06); }
.nx-card.final .file { color: var(--nx-cyan); border-color: rgba(61, 240, 255, .4); background: rgba(61, 240, 255, .06); }
.nx-card h3 { font-family: var(--nx-display); font-size: 24px; color: #fff; margin: 16px 0 8px; }
.nx-card .q { color: var(--nx-dim); line-height: 1.8; margin: 0 0 14px; }
.nx-card ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.nx-card li { display: flex; gap: 12px; align-items: flex-start; color: var(--nx-ink); font-size: 15px; }
.nx-card li i { color: var(--nx-lime); font-size: 18px; margin-top: 2px; }
.nx-card.final li i { color: var(--nx-cyan); }
.nx-card li small { display: block; color: var(--nx-faint); font-size: 12.5px; }
.nx-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.nx-tools span { font-family: var(--nx-mono); font-size: 11.5px; color: var(--nx-dim); border: 1px solid var(--nx-line); border-radius: 6px; padding: 3px 9px; }
.nx-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.nx-arrow { align-self: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--nx-line); display: grid; place-items: center; color: var(--nx-lime); background: var(--nx-bg2); }

/* ---------- 課程地圖 ---------- */
.nx-ctrl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.nx-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-filter button, .nx-seg button { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); background: transparent; border: 1px solid var(--nx-line); border-radius: 8px; padding: 8px 13px; cursor: pointer; transition: all .2s; }
.nx-filter button:hover, .nx-seg button:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.nx-filter button[aria-pressed="true"], .nx-seg button[aria-pressed="true"] { background: var(--nx-lime); border-color: var(--nx-lime); color: #06070b; font-weight: 600; }
.nx-filter .c { opacity: .6; margin-left: 4px; }
.nx-right { display: flex; gap: 10px; align-items: center; }
.nx-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--nx-line); border-radius: 8px; padding: 0 12px; background: var(--nx-bg2); color: var(--nx-faint); }
.nx-search:focus-within { border-color: var(--nx-lime); }
.nx-search input { background: none; border: 0; outline: 0; color: var(--nx-ink); font-family: var(--nx-mono); font-size: 12.5px; padding: 9px 0; width: 210px; }
.nx-seg { display: flex; gap: 6px; }
.nx-count { font-family: var(--nx-mono); font-size: 12px; color: var(--nx-faint); margin: 0 0 14px; }
.nx-units { display: grid; gap: 34px; }
.nx-group { display: block; }
.nx-cards { display: grid; gap: 14px; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
@media (max-width: 1100px) { .nx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .nx-cards { grid-template-columns: 1fr; } }
.nx-phase { display: flex; align-items: center; gap: 14px; font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); margin: 0 0 14px; }
.nx-phase span { color: var(--nx-lime); } .nx-phase b { color: #fff; font-weight: 600; } .nx-phase i { flex: 1; height: 1px; background: var(--nx-line); }
.nx-unit { display: flex; flex-direction: column; border: 1px solid var(--nx-line); border-radius: 14px; overflow: hidden; background: var(--nx-bg2); text-decoration: none; color: inherit; transition: transform .25s var(--nx-ease), border-color .25s, box-shadow .25s; }
.nx-unit:hover { transform: translateY(-5px); border-color: rgba(198, 255, 61, .55); box-shadow: 0 24px 50px -24px rgba(198, 255, 61, .35); color: inherit; }
.nx-unit .ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.nx-unit .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) contrast(1.05) brightness(.8); transition: filter .4s, transform .5s var(--nx-ease); }
.nx-unit:hover .ph img { filter: none; transform: scale(1.06); }
.nx-unit .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 7, 11, .9)); }
.nx-unit .no { position: absolute; left: 12px; bottom: 6px; z-index: 2; font-family: var(--nx-display); font-weight: 700; font-size: 28px; color: #fff; line-height: 1; }
.nx-unit .badge { position: absolute; right: 10px; top: 10px; z-index: 2; font-family: var(--nx-mono); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--nx-pink); color: #fff; }
.nx-unit .bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nx-unit .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--nx-mono); font-size: 11px; color: var(--nx-faint); }
.nx-unit .meta .fn { color: var(--nx-lime); }
.nx-unit h3 { font-size: 15.5px; font-weight: 700; color: #fff; margin: 0; line-height: 1.45; }
.nx-unit p { color: var(--nx-dim); font-size: 13px; line-height: 1.6; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-unit .go { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-lime); }
.nx-unit .go i { transition: transform .2s; display: inline-block; } .nx-unit:hover .go i { transform: translateX(5px); }
.nx-units.list .nx-unit { flex-direction: row; align-items: center; }
.nx-units.list .ph { width: 120px; flex: none; aspect-ratio: 16 / 10; } .nx-units.list .no { font-size: 22px; }
.nx-units.list .bd { flex-direction: row; align-items: center; gap: 16px; padding: 10px 16px; flex-wrap: wrap; }
.nx-units.list h3 { font-size: 15.5px; flex: 1 1 260px; } .nx-units.list p { display: none; } .nx-units.list .go { display: none; } .nx-units.list .meta { order: 3; }
.nx-empty { grid-column: 1 / -1; text-align: center; padding: 44px; color: var(--nx-faint); font-family: var(--nx-mono); border: 1px dashed var(--nx-line); border-radius: 14px; }

/* ---------- 作業 ---------- */
.nx-hw { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .nx-hw { grid-template-columns: 1fr; } }
.nx-hwcard { border: 1px solid var(--nx-line); border-radius: 18px; padding: 28px; background: linear-gradient(160deg, var(--nx-bg2), #080a10); position: relative; overflow: hidden; }
.nx-hwcard .big { position: absolute; right: 18px; top: 4px; font-family: var(--nx-display); font-weight: 700; font-size: 120px; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(198, 255, 61, .3); pointer-events: none; }
.nx-hwcard.final .big { -webkit-text-stroke-color: rgba(61, 240, 255, .35); }
.nx-hwcard .tag { font-family: var(--nx-mono); font-size: 12px; color: var(--nx-lime); letter-spacing: .08em; }
.nx-hwcard.final .tag { color: var(--nx-cyan); }
.nx-hwcard h3 { font-family: var(--nx-display); font-size: 28px; color: #fff; margin: 12px 0 10px; position: relative; }
.nx-hwcard p { color: var(--nx-dim); line-height: 1.8; margin: 0 0 20px; position: relative; }

/* ---------- 資源 ---------- */
.nx-res3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .nx-res3 { grid-template-columns: 1fr; } }
.nx-res { border: 1px solid var(--nx-line); border-radius: 16px; padding: 24px; background: var(--nx-bg2); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: all .25s var(--nx-ease); position: relative; overflow: hidden; }
.nx-res::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 160px at var(--rx, 50%) -20%, rgba(77, 124, 255, .25), transparent); opacity: 0; transition: opacity .3s; }
.nx-res:hover { border-color: var(--nx-blue); transform: translateY(-4px); color: inherit; } .nx-res:hover::before { opacity: 1; }
.nx-res .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--nx-lime); background: rgba(198, 255, 61, .08); border: 1px solid rgba(198, 255, 61, .25); position: relative; }
.nx-res b { font-family: var(--nx-display); font-size: 19px; color: #fff; position: relative; }
.nx-res p { color: var(--nx-dim); font-size: 14px; line-height: 1.8; margin: 0; flex: 1; position: relative; }
.nx-res .go { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-lime); position: relative; }

/* ---------- 結尾 ---------- */
.nx-end { margin: clamp(64px, 9vw, 120px) 0 90px; border-radius: 24px; padding: clamp(32px, 6vw, 70px); border: 1px solid var(--nx-line); position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; background:
  radial-gradient(600px 300px at 90% 0%, rgba(198, 255, 61, .18), transparent 60%),
  radial-gradient(600px 300px at 0% 100%, rgba(77, 124, 255, .28), transparent 60%), var(--nx-bg2); }
.nx-end h2 { font-family: var(--nx-display); font-size: clamp(30px, 5vw, 54px); line-height: 1.12; letter-spacing: -.03em; color: #fff; margin: 12px 0; }
.nx-end p { color: var(--nx-dim); margin: 0; max-width: 480px; line-height: 1.8; }
.nx-end code { font-family: var(--nx-mono); color: var(--nx-lime); }

.scroll-top { background: var(--nx-lime); } .scroll-top i { color: #06070b; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .nx-reveal { opacity: 1; transform: none; } }

@media (min-width: 1101px) {
  .nx-cards[data-n="1"] .nx-unit, .nx-cards[data-n="2"] .nx-unit { flex-direction: row; }
  .nx-cards[data-n="1"] .nx-unit .ph, .nx-cards[data-n="2"] .nx-unit .ph { width: 38%; flex: none; aspect-ratio: auto; min-height: 150px; }
  .nx-cards[data-n="1"] .nx-unit .bd, .nx-cards[data-n="2"] .nx-unit .bd { justify-content: center; padding: 18px 22px; }
  .nx-cards[data-n="1"] .nx-unit h3, .nx-cards[data-n="2"] .nx-unit h3 { font-size: 18px; }
  .nx-cards[data-n="1"] .nx-unit p, .nx-cards[data-n="2"] .nx-unit p { flex: none; }
}
.nx-units.list .nx-cards { grid-template-columns: 1fr !important; gap: 8px; }
.nx-units.list .nx-cards > :last-child:nth-child(odd) { grid-column: auto; }
.nx-units.list .nx-unit { flex-direction: row !important; }
.nx-units.list .nx-unit .ph { width: 120px !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; }
.nx-units.list .nx-unit .bd { flex-direction: row; padding: 10px 16px !important; }