/* public blog page extras + overlay visuals */

.blog-toc {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}
.blog-toc a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  padding: 8px 10px;
}
.blog-toc a:active { border-color: #404040 #fff #fff #404040; }
.blog-toc strong { display: block; }
.blog-toc span { font-size: 12px; color: #404040; }
.blog-crumb { font-size: 12px; margin: 0 0 10px; }
.nb-h { scroll-margin-top: 12px; }
body .nb-root { font-size: 15px; line-height: 1.55; }
body .nb-h { font-size: 22px; }
body .nb-article p, body .nb-root p { font-size: 15px; }
body .nb-fig figcaption { font-size: 12px; }

/* NOS 95 Blog — Help overlay reader */

.shortcuts-panel.blog-wide {
    width: min(760px, 96vw);
}

.shortcuts-panel.blog-wide #shortcuts-blog-body {
    max-height: min(72vh, 560px);
    padding: 0;
    background: #c0c0c0;
}

.nb-root {
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    font-size: 12px;
    color: #000;
    line-height: 1.45;
}

.nb-mast {
    background: #000080;
    color: #fff;
    padding: 10px 14px 8px;
    border-bottom: 3px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.nb-mast-brand {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.nb-mast-sub {
    font-size: 10px;
    color: #c0d8ff;
    margin-top: 2px;
}

.nb-mast-issue {
    font-size: 10px;
    text-align: right;
    color: #fff;
    opacity: 0.9;
}

.nb-index {
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nb-lede {
    margin: 0 0 4px;
    color: #202020;
}

.nb-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    text-align: left;
    width: 100%;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 8px;
    cursor: var(--cur-pointer, pointer);
    font: inherit;
    color: inherit;
}

.nb-card:hover {
    background: #d8d8d8;
}

.nb-card:active {
    border-color: #404040 #fff #fff #404040;
}

.nb-card-thumb {
    width: 72px;
    height: 64px;
    background: #008080;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    position: relative;
    overflow: hidden;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nb-card-thumb img {
    display: block;
    image-rendering: pixelated;
}

.nb-card-kicker {
    font-size: 10px;
    color: #000080;
    font-weight: bold;
}

.nb-card-title {
    font-size: 13px;
    font-weight: bold;
    margin: 2px 0 4px;
}

.nb-card-meta {
    font-size: 10px;
    color: #404040;
}

.nb-foot-cta {
    margin: 6px 2px 0;
    font-size: 11px;
}

.nb-foot-cta a {
    color: #000080;
}

.nb-article {
    padding: 8px 14px 16px;
}

.nb-back {
    font: inherit;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 3px 10px;
    cursor: var(--cur-pointer, pointer);
    margin-bottom: 10px;
}

.nb-back:active {
    border-color: #404040 #fff #fff #404040;
}

.nb-kicker {
    color: #000080;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nb-h {
    font-size: 18px;
    margin: 4px 0 6px;
    line-height: 1.2;
}

.nb-by {
    font-size: 11px;
    color: #404040;
    margin: 0 0 12px;
    border-bottom: 1px solid #808080;
    padding-bottom: 8px;
}

.nb-article p {
    margin: 0 0 10px;
}

.nb-fig {
    margin: 12px 0 14px;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 6px;
    cursor: var(--cur-pointer, pointer);
}

.nb-fig:active {
    border-color: #404040 #fff #fff #404040;
}

.nb-fig figcaption {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: #404040;
    font-style: italic;
}

/* --- visual: mini desktop --- */
.nb-desk {
    position: relative;
    height: 148px;
    background: #008080;
    border: 2px solid #000;
    overflow: hidden;
    image-rendering: pixelated;
}

.nb-desk-icons {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
    font-size: 9px;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
}

.nb-desk-icons span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
}

.nb-desk-icons img {
    image-rendering: pixelated;
}

.nb-desk-win {
    position: absolute;
    right: 14px;
    top: 18px;
    width: 58%;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: 3px 3px 0 #000;
}

.nb-dw-title {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
}

.nb-dw-body {
    padding: 8px;
    font-size: 11px;
    min-height: 48px;
    background: #fff;
    margin: 3px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
}

.nb-desk-tb {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: bold;
}

.nb-desk-tb b {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 1px 8px;
}

.nb-desk-tb span {
    flex: 1;
    height: 14px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #a8a8a8;
}

.nb-desk-tb i {
    font-style: normal;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 1px 6px;
    font-weight: normal;
}

/* --- visual: bevel anatomy --- */
.nb-bevels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px;
    background: #808080;
}

.nb-bev {
    background: #c0c0c0;
    border: 4px solid;
    padding: 16px 6px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}

.nb-bev.up { border-color: #fff #404040 #404040 #fff; }
.nb-bev.down { border-color: #404040 #fff #fff #404040; }
.nb-bev.flat { border-color: #808080; background: #b0b0b0; }

.nb-bev small {
    display: block;
    font-weight: normal;
    color: #404040;
    margin-top: 4px;
}

/* --- visual: taskbar strip --- */
.nb-tb {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    padding: 4px;
    box-shadow: inset 0 1px 0 #dfdfdf;
}

.nb-tb-start {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 2px 8px;
    font-weight: bold;
    font-size: 11px;
}

.nb-tb-app {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 2px 6px;
    font-size: 10px;
}

.nb-tb-app.on {
    border-color: #808080 #fff #fff #808080;
    background: #d8d8d8;
}

.nb-tb-clock {
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 2px 8px;
    font-size: 10px;
}

/* --- visual: start menu --- */
.nb-start {
    background: #008080;
    padding: 12px 12px 0;
}
.nb-start-menu {
    display: flex;
    width: min(280px, 100%);
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: 3px 3px 0 #000;
    margin-bottom: 0;
}
.nb-start-banner {
    width: 22px;
    background: linear-gradient(#000080, #1084d0);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.08em;
    padding: 8px 4px 6px;
    line-height: 1.15;
    text-align: center;
}
.nb-start-list {
    flex: 1;
    padding: 4px 0;
    font-size: 11px;
}
.nb-start-list div {
    padding: 4px 12px;
}
.nb-start-list div.on {
    background: #000080;
    color: #fff;
}
.nb-start-shut {
    border-top: 1px solid #808080;
    margin-top: 4px;
    font-weight: bold;
}
.nb-start .nb-tb {
    margin: 0 -12px;
}

/* --- visual: noms / clippy --- */
.nb-noms {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background:
        linear-gradient(#008080 0 72%, #c0c0c0 72% 100%);
    padding: 16px 14px 14px;
    min-height: 148px;
}

.nb-clippy {
    width: 88px;
    height: 124px;
    position: relative;
    flex-shrink: 0;
}

.nb-clippy-outer {
    position: absolute;
    left: 16px;
    top: 2px;
    width: 54px;
    height: 76px;
    border: 9px solid #d8d8d8;
    border-bottom-color: transparent;
    border-radius: 30px 30px 24px 24px;
    box-shadow: inset 2px 2px 0 #fff;
}

.nb-clippy-inner {
    position: absolute;
    left: 28px;
    top: 30px;
    width: 30px;
    height: 52px;
    border: 8px solid #b0b0b0;
    border-top-color: transparent;
    border-radius: 16px;
}

.nb-clippy-leg {
    position: absolute;
    left: 40px;
    top: 74px;
    width: 9px;
    height: 46px;
    background: linear-gradient(90deg, #f0f0f0, #9a9a9a 55%, #707070);
    border-radius: 4px;
    box-shadow: 1px 0 0 #404040;
}

.nb-clippy-face {
    position: absolute;
    left: 20px;
    top: 12px;
    z-index: 2;
}

.nb-clippy-brows {
    display: flex;
    gap: 12px;
    margin: 0 0 3px 8px;
}

.nb-clippy-brows span {
    width: 13px;
    height: 3px;
    background: #202020;
    border-radius: 1px;
    transform: rotate(-18deg);
}

.nb-clippy-brows span:last-child {
    transform: rotate(18deg);
}

.nb-clippy-eyes {
    display: flex;
    gap: 6px;
}

.nb-clippy-eye {
    width: 20px;
    height: 24px;
    background: #fff;
    border: 2px solid #101010;
    border-radius: 50%;
    position: relative;
    box-shadow: 1px 1px 0 #000;
}

.nb-clippy-eye i {
    position: absolute;
    width: 8px;
    height: 10px;
    background: #101010;
    border-radius: 50%;
    left: 5px;
    top: 8px;
}

.nb-noms-win {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
}

.nb-noms-win-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    background: #008080;
    margin: 3px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
}

.nb-bubble {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 8px;
    font-size: 11px;
    position: relative;
}

.nb-bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 16px;
    border: 6px solid transparent;
    border-right-color: #c0c0c0;
}

/* --- visual: two windows --- */
.nb-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #008080;
    padding: 10px;
}

.nb-mini {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
}

.nb-mini-t {
    background: #000080;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
}

.nb-mini-t.dead { background: #808080; }

.nb-mini-b {
    background: #fff;
    margin: 3px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 8px 6px;
    font-size: 10px;
    min-height: 52px;
}

/* --- visual: taunt buttons --- */
.nb-taunts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    background: #c0c0c0;
}

.nb-taunt {
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    background: #c0c0c0;
    padding: 4px 10px;
    font-size: 11px;
}

.nb-taunt.on {
    border-color: #404040 #fff #fff #404040;
    background: #d0d0d0;
}

/* --- visual: IDE --- */
.nb-ide {
    background: #c0c0c0;
    border: 2px solid #000;
}

.nb-ide-t {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
}

.nb-ide-m {
    padding: 2px 6px;
    font-size: 10px;
    border-bottom: 1px solid #808080;
}

.nb-ide-code {
    margin: 4px;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 8px;
    color: #000080;
    min-height: 72px;
    white-space: pre;
    line-height: 1.35;
}

/* --- visual: F7 F5 --- */
.nb-keys {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 14px;
    background: #808080;
}

.nb-key {
    width: 64px;
    height: 48px;
    background: #c0c0c0;
    border: 3px solid;
    border-color: #fff #404040 #404040 #fff;
    box-shadow: 2px 2px 0 #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.nb-key small {
    font-weight: normal;
    font-size: 9px;
    color: #404040;
}

/* --- visual: pong --- */
.nb-pong {
    position: relative;
    height: 100px;
    background: #000;
    border: 2px solid #404040;
    overflow: hidden;
}

.nb-pong::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(#fff 0 6px, transparent 6px 12px);
}

.nb-paddle {
    position: absolute;
    width: 5px;
    height: 28px;
    background: #c0c0c0;
    top: 36px;
}

.nb-paddle.l { left: 8px; }
.nb-paddle.r { right: 8px; top: 22px; }

.nb-ball {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    animation: nb-pong-ball 1.1s steps(10, end) infinite;
}

@keyframes nb-pong-ball {
    0% { left: 16px; top: 44px; }
    50% { left: calc(100% - 24px); top: 18px; }
    100% { left: 16px; top: 44px; }
}

.nb-pong-score {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 1em;
}

/* --- visual: n store bar --- */
.nb-dl {
    padding: 10px;
    background: #c0c0c0;
}

.nb-dl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    margin-bottom: 6px;
}

.nb-dl-bar {
    height: 16px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #fff;
    overflow: hidden;
}

.nb-dl-fill {
    height: 100%;
    width: 64%;
    background: repeating-linear-gradient(90deg, #000080 0 8px, #1084d0 8px 10px, #000080 10px 18px);
    animation: nb-dl 1.4s steps(8, end) infinite;
}

@keyframes nb-dl {
    0% { width: 18%; }
    100% { width: 92%; }
}

.nb-bubble { flex: 1; }

/* --- visual: url bar --- */
.nb-url {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
}
.nb-url-t {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
}
.nb-url-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    font-size: 11px;
}
.nb-url-bar {
    flex: 1;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    color: #000080;
}
.nb-url-row b {
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 3px 10px;
    font-weight: normal;
}

/* --- visual: boot splash --- */
.nb-boot {
    background: #000;
    color: #c0c0c0;
    text-align: center;
    padding: 22px 12px 16px;
    font-family: Tahoma, sans-serif;
}
.nb-boot-plate {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    background: #c0c0c0;
    color: #000080;
    font-weight: bold;
    font-size: 22px;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    box-shadow: 3px 3px 0 #000;
}
.nb-boot-name {
    margin: 10px 0 8px;
    letter-spacing: 0.28em;
    font-weight: bold;
}
.nb-boot-bar {
    width: 180px;
    height: 16px;
    margin: 0 auto;
    padding: 2px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
}
.nb-boot-bar i {
    display: block;
    height: 100%;
    width: 70%;
    background: repeating-linear-gradient(90deg, #000080 0 9px, #c0c0c0 9px 12px);
}
.nb-boot-status {
    margin-top: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* --- visual: minesweeper --- */
.nb-mines {
    background: #008080;
    padding: 12px;
    display: flex;
    justify-content: center;
}
.nb-mines-win {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
    width: min(220px, 100%);
}
.nb-mines-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: #c0c0c0;
}
.nb-mines-hud b {
    font-family: 'Courier New', monospace;
    background: #000;
    color: #ff3030;
    padding: 2px 6px;
    font-size: 14px;
}
.nb-mines-face {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    font-size: 12px;
}
.nb-mines-grid {
    display: grid;
    grid-template-columns: repeat(8, 16px);
    gap: 1px;
    background: #808080;
    padding: 4px;
    margin: 0 6px 8px;
    width: max-content;
}
.nb-mines-grid i {
    width: 16px;
    height: 16px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    box-sizing: border-box;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nb-mines-grid i.open {
    border-color: #808080;
    background: #d0d0d0;
}
.nb-mines-grid i.n1 { color: #0000ff; }
.nb-mines-grid i.n1::after { content: '1'; }
.nb-mines-grid i.n2 { color: #008000; }
.nb-mines-grid i.n2::after { content: '2'; }
.nb-mines-grid i.mine { background: #800000; }
.nb-mines-grid i.flag { background: #c0c0c0; }
.nb-mines-grid i.flag::after { content: '▸'; color: #800000; font-size: 10px; }

.nb-games {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    background: #008080;
    padding: 14px 8px;
    color: #fff;
    font-size: 10px;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
}
.nb-games span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
}
.nb-games img { image-rendering: pixelated; }

.nb-store {
    background: #c0c0c0;
    border: 2px solid #000;
}
.nb-store-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    background: #008080;
    margin: 3px;
}
.nb-shelf-item {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    padding: 8px 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nb-shelf-item.on {
    outline: 1px dotted #000;
    background: #d8d8d8;
}

@media (max-width: 520px) {
    .nb-card { grid-template-columns: 56px 1fr; }
    .nb-card-thumb { width: 56px; height: 48px; }
    .nb-desk-win { width: 52%; }
    .nb-two { grid-template-columns: 1fr; }
    .nb-h { font-size: 15px; }
}