:root {
  --nb-primary: #fdc800;
  --nb-secondary: #432dd7;
  --nb-surface: #fbfbf9;
  --nb-paper: #ffffff;
  --nb-text: #1c293c;
  --nb-ink: #111111;
  --nb-success: #21b56b;
  --nb-coral: #ff7868;
  --nb-blue: #69baff;
  --nb-muted: #e9e7df;
  --nb-border: 3px solid var(--nb-ink);
  --nb-shadow: 7px 7px 0 var(--nb-ink);
  --nb-shadow-small: 4px 4px 0 var(--nb-ink);
}

* { box-sizing: border-box; }
html { color: var(--nb-text); background: var(--nb-primary); font-family: Inter, "Microsoft YaHei", "PingFang SC", sans-serif; }
body {
  margin: 0;
  min-width: 320px;
  background-color: var(--nb-surface);
  background-image: linear-gradient(rgba(17,17,17,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.055) 1px, transparent 1px);
  background-size: 24px 24px;
  font-size: 17px;
  line-height: 1.55;
}
::selection { background: var(--nb-secondary); color: white; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid var(--nb-secondary); outline-offset: 4px; }
.nb-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.nb-topbar { position: sticky; top: 0; z-index: 20; border-bottom: var(--nb-border); background: var(--nb-primary); }
.nb-nav { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.nb-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 15px; color: var(--nb-ink); font-size: 23px; font-weight: 950; text-decoration: none; letter-spacing: -.045em; }
.nb-brand > span:last-child { display: grid; gap: 5px; line-height: 1; }
.nb-brand small { display: block; margin: 0; font: 900 12px/1 Consolas, monospace; letter-spacing: .14em; }
.nb-brand-mark { display: grid; width: 72px; height: 72px; flex: 0 0 72px; place-items: center; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.nb-brand-mark img { width: 72px; height: 72px; max-width: 100%; display: block; object-fit: contain; }
.nb-menu, .nb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nb-menu { justify-content: flex-end; }
.nb-button {
  appearance: none;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: var(--nb-border);
  border-radius: 0;
  background: var(--nb-paper);
  box-shadow: var(--nb-shadow-small);
  color: var(--nb-ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.nb-button:hover { background: var(--nb-primary); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--nb-ink); }
.nb-button:active { transform: translate(4px,4px); box-shadow: none; }
.nb-button--violet, .nb-button--active { background: var(--nb-secondary); color: white; }
.nb-button--violet:hover, .nb-button--active:hover { background: #3522b5; }
.nb-main { min-height: calc(100vh - 172px); padding: 52px 0 88px; }
.nb-hero { display: grid; grid-template-columns: minmax(0,.78fr) minmax(480px,1.22fr); gap: 28px; align-items: stretch; }
.nb-hero-copy, .nb-hero-art, .nb-panel, .nb-page-head, .nb-form-card, .nb-result { border: var(--nb-border); box-shadow: var(--nb-shadow); }
.nb-hero-copy { position: relative; display: flex; min-height: 590px; flex-direction: column; justify-content: space-between; padding: clamp(26px,4vw,52px); overflow: hidden; background: var(--nb-primary); }
.nb-hero-copy::after { content: "BW"; position: absolute; right: -18px; bottom: -40px; color: rgba(255,255,255,.32); font: 950 180px/.8 Consolas, monospace; letter-spacing: -.12em; pointer-events: none; }
.nb-hero-copy > * { position: relative; z-index: 1; }
.nb-kicker { width: fit-content; display: inline-block; padding: 6px 10px; border: 2px solid var(--nb-ink); background: var(--nb-paper); color: var(--nb-ink); font: 800 13px/1.4 "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.nb-title, .nb-page-head h1, .nb-result h1 { color: var(--nb-ink); font-weight: 950; letter-spacing: -.075em; line-height: .93; text-wrap: balance; }
.nb-title { max-width: 9.5ch; margin: 34px 0 22px; font-size: clamp(48px,5.9vw,78px); }
.nb-lead { max-width: 29rem; margin: 0; color: var(--nb-ink); font-size: clamp(18px,2vw,22px); font-weight: 700; line-height: 1.55; text-wrap: pretty; }
.nb-actions { margin-top: 34px; }
.nb-hero-note { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.nb-hero-note span { width: 42px; height: 3px; background: var(--nb-ink); }
.nb-hero-art { position: relative; min-height: 590px; overflow: hidden; background: var(--nb-paper); }
.nb-hero-art > img { width: 100%; height: 100%; min-height: 590px; display: block; object-fit: cover; object-position: 52% center; transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.nb-hero:hover .nb-hero-art > img { transform: scale(1.025); }
.nb-logo-stage { display: grid; place-items: center; padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.nb-logo-stage > .nb-hero-logo { width: 100%; height: 100%; max-width: 100%; min-height: 0; object-fit: contain; filter: none; }
.nb-hero:hover .nb-logo-stage > .nb-hero-logo { transform: none; }
.nb-logo-chip { position: absolute; left: 18px; top: 18px; width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden; transform: rotate(-2deg); border: var(--nb-border); background: var(--nb-paper); box-shadow: var(--nb-shadow-small); }
.nb-logo-chip img { width: 104px; height: 104px; object-fit: contain; }
.nb-stamp { position: absolute; right: 18px; bottom: 18px; max-width: 220px; padding: 12px 14px; transform: rotate(2deg); border: var(--nb-border); background: var(--nb-secondary); box-shadow: var(--nb-shadow-small); color: white; font: 800 13px/1.35 "JetBrains Mono", Consolas, monospace; }
.nb-section { margin-top: clamp(64px,8vw,104px); }
.nb-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.nb-section h2 { margin: 0; color: var(--nb-ink); font-size: clamp(35px,5vw,56px); font-weight: 950; letter-spacing: -.06em; line-height: .95; }
.nb-section-head p { max-width: 36rem; margin: 0; font-size: 15px; font-weight: 650; text-align: right; }
.nb-downloads { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; }
.nb-download-card { grid-column: span 4; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: var(--nb-border); background: var(--nb-paper); box-shadow: var(--nb-shadow-small); color: var(--nb-ink); text-decoration: none; transition: transform 140ms ease, box-shadow 140ms ease; }
.nb-download-card:nth-child(2n) { background: #ece9ff; }
.nb-download-card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--nb-ink); }
.nb-download-card:active { transform: translate(4px,4px); box-shadow: none; }
.nb-download-card strong { display: block; margin-top: 18px; font-size: 27px; line-height: 1.05; letter-spacing: -.04em; }
.nb-download-card span { font: 750 13px/1.4 "JetBrains Mono", Consolas, monospace; }
.nb-download-card b { align-self: flex-end; font-size: 21px; }
.nb-panel { padding: clamp(24px,4vw,40px); background: var(--nb-secondary); color: white; }
.nb-panel-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.nb-panel h2 { color: white; }
.nb-panel p { max-width: 52rem; margin: 16px 0 0; font-weight: 600; }
.nb-story { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: 0; padding: 0; overflow: hidden; border: var(--nb-border); background: var(--nb-paper); box-shadow: var(--nb-shadow); }
.nb-story-art { min-width: 0; min-height: 680px; margin: 0; overflow: hidden; border-right: var(--nb-border); background: var(--nb-secondary); }
.nb-story-art img { width: 100%; height: 100%; min-height: 680px; display: block; object-fit: cover; object-position: 48% center; }
.nb-story article { max-width: 820px; align-self: center; padding: clamp(34px,5vw,64px); }
.nb-story h2, .nb-map-panel h2 { margin: 22px 0; }
.nb-story p { max-width: 42rem; font-weight: 620; }
.nb-story-lead { font-size: clamp(18px,2.2vw,24px); line-height: 1.65; }
.nb-story blockquote { margin: 34px 0; padding: 26px 30px; border-left: 10px solid var(--nb-secondary); background: #ece9ff; color: var(--nb-ink); font-size: clamp(24px,3.2vw,36px); font-weight: 950; line-height: 1.3; }
.nb-story blockquote cite { display: block; margin-top: 16px; font: 700 12px/1.4 Consolas, monospace; letter-spacing: .1em; }
.nb-memory-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; align-items: stretch; }
.nb-memory-card { min-height: 240px; padding: 24px; border: var(--nb-border); background: var(--nb-paper); box-shadow: var(--nb-shadow-small); }
.nb-memory-card { grid-column: span 4; }
.nb-memory-card--wide { grid-column: span 5; }
.nb-memory-card--wide + .nb-memory-card { grid-column: span 3; }
.nb-memory-card:nth-child(2) { background: var(--nb-primary); }
.nb-memory-card:nth-child(3) { background: #ece9ff; }
.nb-memory-card > span { font: 800 12px/1.4 Consolas, monospace; letter-spacing: .08em; }
.nb-memory-card h3 { margin: 58px 0 14px; color: var(--nb-ink); font-size: clamp(25px,3vw,34px); line-height: 1; letter-spacing: -.045em; }
.nb-memory-card p { margin: 0; font-weight: 650; }
.nb-manifesto { width: calc(100vw - 18px); margin: clamp(70px,9vw,118px) 0 0 50%; padding: clamp(30px,4vw,54px) max(18px,calc((100vw - 1180px)/2)); transform: translateX(-50%); display: grid; grid-template-columns: 1fr; align-items: center; border-block: var(--nb-border); background: var(--nb-ink); color: white; }
.nb-manifesto > span { color: var(--nb-primary); font: 900 13px/1 Consolas, monospace; letter-spacing: .18em; }
.nb-manifesto p { margin: 0; text-align: center; font-size: clamp(28px,5vw,62px); font-weight: 850; line-height: 1.08; letter-spacing: -.055em; }
.nb-manifesto p b { color: white; font: 900 .78em/1 Consolas, monospace; letter-spacing: -.05em; }
.nb-manifesto strong { color: var(--nb-primary); }
.nb-map-panel { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); overflow: hidden; border: var(--nb-border); background: var(--nb-primary); box-shadow: var(--nb-shadow); }
.nb-section-art { width: 100%; height: 100%; min-height: 500px; display: block; border-right: var(--nb-border); object-fit: cover; object-position: center; }
.nb-map-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,4vw,52px); }
.nb-map-panel h2 { max-width: 15ch; }
.nb-map-panel p { max-width: 720px; font-weight: 700; }
.nb-places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.nb-places span { padding: 8px 12px; border: 2px solid var(--nb-ink); background: var(--nb-paper); box-shadow: 3px 3px 0 var(--nb-ink); font-weight: 850; }
.nb-class-strip { display: grid; grid-template-columns: repeat(6,1fr); border: var(--nb-border); box-shadow: var(--nb-shadow-small); }
.nb-wide-art { position: relative; height: clamp(380px,48vw,620px); margin: 0 0 26px; overflow: hidden; border: var(--nb-border); background: var(--nb-ink); box-shadow: var(--nb-shadow); }
.nb-wide-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.nb-wide-art figcaption { position: absolute; left: 22px; bottom: 22px; max-width: 480px; padding: 14px 18px; border: var(--nb-border); background: var(--nb-primary); box-shadow: var(--nb-shadow-small); color: var(--nb-ink); font-size: 18px; font-weight: 900; }
.nb-wide-art figcaption small { display: block; margin-bottom: 4px; font: 800 11px/1.4 Consolas, monospace; letter-spacing: .12em; }
.nb-class-strip > span { min-height: 140px; padding: 20px 14px; border-right: var(--nb-border); background: var(--nb-paper); color: var(--nb-ink); font-size: 19px; font-weight: 900; }
.nb-class-strip > span:nth-child(2n) { background: #ece9ff; }
.nb-class-strip > span:last-child { border-right: 0; }
.nb-class-strip small { display: block; margin-top: 38px; font-size: 12px; font-weight: 650; }
.nb-page-head { position: relative; overflow: hidden; padding: clamp(28px,5vw,56px); background: var(--nb-primary); }
.nb-page-head::after { content: ""; position: absolute; width: 160px; height: 160px; right: -45px; bottom: -70px; border: var(--nb-border); background: var(--nb-secondary); transform: rotate(18deg); }
.nb-page-head h1 { position: relative; z-index: 1; max-width: 12ch; margin: 24px 0 14px; font-size: clamp(46px,7vw,78px); }
.nb-page-head p { position: relative; z-index: 1; max-width: 54rem; margin: 0; font-weight: 650; }
.nb-form-card { margin-top: 28px; padding: clamp(24px,5vw,52px); background: var(--nb-paper); }
.nb-tool-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 28px; align-items: stretch; }
.nb-tool-layout .nb-form-card { margin-top: 28px; }
.nb-tool-art { position: relative; min-height: 520px; margin-top: 28px; overflow: hidden; border: var(--nb-border); background: var(--nb-secondary); box-shadow: var(--nb-shadow); }
.nb-tool-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.nb-tool-art span { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 11px 13px; border: var(--nb-border); background: var(--nb-primary); box-shadow: var(--nb-shadow-small); color: var(--nb-ink); font: 900 13px/1.35 "JetBrains Mono", Consolas, monospace; letter-spacing: .04em; }
.nb-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; }
.nb-field { display: grid; grid-template-rows: auto auto minmax(20px,auto); align-content: start; gap: 8px; }
.nb-field--wide { grid-column: 1 / -1; }
.nb-field label, .nb-label { min-height: 27px; display: flex; align-items: flex-end; color: var(--nb-ink); font-weight: 900; }
.nb-hint { margin: 0; color: #4d586a; font-size: 13px; font-weight: 650; }
.nb-input, .nb-select { width: 100%; min-height: 50px; padding: 10px 13px; border: var(--nb-border); border-radius: 0; background: #fffef7; box-shadow: 3px 3px 0 var(--nb-ink); color: var(--nb-ink); }
.nb-input:hover, .nb-select:hover { background: #fff8cf; }
.nb-choice-row { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 0; }
.nb-choice { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; }
.nb-choice input { width: 20px; height: 20px; accent-color: var(--nb-secondary); }
.nb-captcha { display: grid; grid-template-columns: minmax(120px,1fr) auto; gap: 14px; align-items: center; }
.nb-captcha img { height: 36px; min-width: 92px; border: 2px solid var(--nb-ink); background: white; image-rendering: crisp-edges; }
.nb-form-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.nb-notice { margin: 0 0 24px; padding: 14px 16px; border: var(--nb-border); background: #e9f7ff; box-shadow: 3px 3px 0 var(--nb-ink); font-weight: 650; }
.nb-result { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; padding: clamp(28px,6vw,64px); background: #ffe9e4; }
.nb-result--success { background: #dbffe9; }
.nb-result-mark { display: grid; width: 86px; height: 86px; place-items: center; border: var(--nb-border); background: var(--nb-coral); box-shadow: var(--nb-shadow-small); color: var(--nb-ink); font: 950 34px/1 Consolas, monospace; }
.nb-result--success .nb-result-mark { background: var(--nb-success); }
.nb-result h1 { margin: 0 0 18px; font-size: clamp(42px,7vw,72px); }
.nb-result-message { margin: 0 0 28px; font-size: 19px; font-weight: 750; }
.nb-character-list { display: grid; gap: 18px; }
.nb-footer { border-top: var(--nb-border); background: var(--nb-ink); color: white; }
.nb-footer-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font: 13px/1.4 "JetBrains Mono", Consolas, monospace; }

@media (max-width: 900px) {
  .nb-nav, .nb-section-head, .nb-footer-inner { align-items: flex-start; flex-direction: column; }
  .nb-nav { padding: 14px 0 18px; }
  .nb-menu { justify-content: flex-start; }
  .nb-hero { grid-template-columns: 1fr; }
  .nb-hero-copy, .nb-hero-art, .nb-hero-art > img { min-height: 390px; }
  .nb-section-head p { text-align: left; }
  .nb-download-card { grid-column: span 6; }
  .nb-tool-layout { grid-template-columns: 1fr; }
  .nb-tool-art { min-height: 420px; }
  .nb-memory-grid { grid-template-columns: 1fr; }
  .nb-story { grid-template-columns: 1fr; }
  .nb-story-art { min-height: 430px; border-right: 0; border-bottom: var(--nb-border); }
  .nb-story-art img { min-height: 430px; object-position: center 54%; }
  .nb-memory-card, .nb-memory-card--wide, .nb-memory-card--wide + .nb-memory-card { grid-column: auto; }
  .nb-map-panel { grid-template-columns: 1fr; }
  .nb-section-art { min-height: 380px; border-right: 0; border-bottom: var(--nb-border); }
  .nb-class-strip { grid-template-columns: repeat(3,1fr); }
  .nb-class-strip > span:nth-child(3) { border-right: 0; }
  .nb-class-strip > span:nth-child(4) { border-top: var(--nb-border); }
  .nb-class-strip > span:nth-child(5) { border-top: var(--nb-border); }
  .nb-class-strip > span:nth-child(6) { border-top: var(--nb-border); }
}
@media (max-width: 600px) {
  .nb-shell { width: min(100% - 20px,1180px); }
  .nb-topbar { position: static; }
  .nb-brand { gap: 10px; font-size: 20px; }
  .nb-brand > span:last-child { gap: 4px; }
  .nb-brand small { font-size: 10px; letter-spacing: .12em; }
  .nb-brand-mark { width: 60px; height: 60px; flex-basis: 60px; }
  .nb-brand-mark img { width: 60px; height: 60px; }
  .nb-menu { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .nb-button { width: 100%; }
  .nb-main { padding: 28px 0 48px; }
  .nb-hero-copy, .nb-hero-art { min-height: 340px; }
  .nb-logo-stage > .nb-hero-logo { min-height: 0; }
  .nb-download-card { grid-column: 1 / -1; }
  .nb-panel-grid, .nb-form-grid, .nb-result, .nb-tool-layout { grid-template-columns: 1fr; }
  .nb-field--wide { grid-column: auto; }
  .nb-logo-chip { width: 88px; height: 88px; }
  .nb-logo-chip img { width: 82px; height: 82px; }
  .nb-tool-art { min-height: 360px; }
  .nb-section-art { min-height: 280px; }
  .nb-wide-art { height: 430px; }
  .nb-wide-art img { object-position: 43% center; }
  .nb-story-art, .nb-story-art img { min-height: 320px; }
  .nb-manifesto { text-align: center; }
  .nb-class-strip { grid-template-columns: 1fr 1fr; }
  .nb-class-strip > span:nth-child(n) { border-top: var(--nb-border); border-right: var(--nb-border); }
  .nb-class-strip > span:nth-child(-n+2) { border-top: 0; }
  .nb-class-strip > span:nth-child(2n) { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}