/* /cheatsheet and /teach: the cheat sheet as a web page. Generated markup (tools/cheatsheet_web.mjs); three themes, never blended. */
:root {
  --bg: #050605; --panel: #0e110f; --ink: #f5f5f7; --ink2: rgba(245,245,247,.78); --ink3: #9aa59d; --line: rgba(255,255,255,.12);
  --accent: #37f08a; --accent-ink: #37f08a; --on-accent: #050605; --edge: rgba(55,240,138,.38); --shadow: #0b3b22; --sh: 6px 6px 0;
  --t: #1a3221; --l: #102016; --r: #0b170f; --e: #37f08a; --eo: .5; --at: #2bd65c; --al: #18923c; --ar: #0f6629; --ae: #b8ffca;
  --mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] { --bg: #f5f5f7; --panel: #ffffff; --ink: #1d1d1f; --ink2: #424245; --ink3: #6e6e73; --line: rgba(0,0,0,.12);
  --accent: #0a7a3d; --accent-ink: #0a7a3d; --on-accent: #fff; --edge: #1d1d1f; --shadow: #163d28;
  --t: #eef8f1; --l: #cfeedb; --r: #a6dcbb; --e: #0a7a3d; --eo: .55; --at: #7ee2a0; --al: #3fbf6e; --ar: #239552; --ae: #0a5a2c; color-scheme: light; }
:root[data-theme="nagai"] { --bg: #e9f3f4; --panel: #fbfbf7; --ink: #1b2a4a; --ink2: #34496e; --ink3: #4f6a8a; --line: rgba(27,42,74,.25);
  --accent: #ff7a59; --accent-ink: #b03a1e; --on-accent: #1b2a4a; --edge: #1b2a4a; --shadow: #1b2a4a; --sh: 6px 6px 0;
  --t: #eaf6fc; --l: #cbe8f6; --r: #a3d3ec; --e: #1b2a4a; --eo: .8; --at: #ffb09a; --al: #ff7a59; --ar: #e0603f; --ae: #1b2a4a; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 108px; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; }
:root[data-theme="nagai"] body { background: linear-gradient(180deg, #4fb0e6 0, #9ad6f3 520px, #f6bfd3 1100px, #fbe3cf 1700px, #e9f3f4 2400px) fixed; }
h1, h2, h3, h4, p, ul, ol, table, figure { margin: 0; padding: 0; }
a { color: inherit; } .mono { font-family: var(--mono); letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.sw { width: min(100% - 32px, 1160px); margin-inline: auto; }
/* nav */
.sn { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--edge); }
:root[data-theme="nagai"] .sn { background: rgba(251,251,247,.9); border-bottom: 2px solid #1b2a4a; }
.sn-in { width: min(100% - 32px, 1160px); margin-inline: auto; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.sn-brand { text-decoration: none; font-size: 14px; } .sn-r { display: flex; align-items: center; gap: 4px; }
.sn-r a { text-decoration: none; font-size: 13px; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; opacity: .85; }
.sn-r a:hover, .sn-r a[aria-current] { opacity: 1; } .sn-r .sn-yt { color: var(--accent-ink); opacity: 1; }
.theme-tg { min-height: 44px; min-width: 44px; border: 0; background: transparent; color: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; opacity: .8; }
@media (max-width: 520px) { .sn-r a:nth-child(2) { display: none; } }
/* hero */
.hero { padding-block: 72px 28px; }
.eyebrow { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
h1 { font-size: clamp(40px, 7vw, 84px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; margin-top: 10px; } h1 b { color: var(--accent-ink); font-weight: 600; }
.lead { margin-top: 18px; max-width: 60ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--ink2); }
.pdfbar { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 24px; border-radius: 980px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; font-size: 17px; }
:root[data-theme="light"] .btn { background: #0a7a3d; color: #fff; }
.btn:active { transform: scale(.97); } .alt { color: var(--accent-ink); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
/* toc */
.toc { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 18px 6px; }
.toc a { text-decoration: none; font-size: 14px; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--edge); border-radius: 980px; background: var(--panel); }
.toc a:hover { border-color: var(--accent-ink); }
.body { padding-bottom: 40px; }
.sec { padding-top: 64px; } .sec h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.026em; font-weight: 600; }
.sec-l { margin-top: 10px; color: var(--ink2); max-width: 62ch; } .sub { margin-top: 38px; font-size: 22px; font-weight: 600; letter-spacing: -0.016em; }
/* cards */
.tc, .pg, .ag, .dg { display: grid; gap: 18px; margin-top: 22px; }
.tc { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .pg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .ag { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .dg { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tcard, .pc, .ac, .ds, .stp, .eb { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--sh) var(--shadow); padding: 18px 18px 16px; }
:root[data-theme="nagai"] :is(.tcard, .pc, .ac, .ds, .stp, .eb) { border-width: 2px; box-shadow: 6px 6px 0 #1b2a4a; }
.tL { font-size: 34px; font-weight: 700; line-height: 1; color: var(--accent-ink); letter-spacing: -0.04em; }
.tcard h3, .pc h3, .ac h4, .ds h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.014em; margin-top: 6px; }
.tcard p, .pc p, .ac p, .ds p { margin-top: 8px; font-size: 15px; line-height: 1.42; color: var(--ink2); }
.say .mono, .ex .mono, .miss .mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-right: 4px; }
.ex b { color: var(--accent-ink); font-weight: 600; }
.code { position: relative; margin-top: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 7px 7px 12px; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--accent-ink); }
:root[data-theme="light"] .code { background: #f5f5f7; } :root[data-theme="nagai"] .code { background: #eaf6fc; color: #1b2a4a; }
.code > code, .code > pre { font: inherit; white-space: pre; margin: 0; display: block; flex: 1; min-width: 0; overflow-x: auto; padding-block: 3px; } .code > code { white-space: pre-wrap; overflow-wrap: anywhere; } .code.block { align-items: flex-start; padding-block: 8px; } .code > pre > code { font: inherit; }
.copy { flex: none; min-height: 32px; min-width: 52px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); color: var(--ink); font: 500 12px var(--mono); cursor: pointer; }
.copy:hover { border-color: var(--accent-ink); } .copy.done { color: var(--accent-ink); }
.pc-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; min-height: 28px; }
.lc { font-size: 12px; color: var(--ink3); } .watch { font-size: 13px; color: var(--accent-ink); text-underline-offset: 3px; min-height: 28px; display: inline-flex; align-items: center; }
.cx { font-size: 12.5px !important; color: var(--accent-ink) !important; }
/* tables */
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
thead th { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } tbody th { font-weight: 600; } td.mono, th.mono { font-size: 13px; }
.eg { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); margin-top: 22px; } .eb h3 { font-size: 18px; margin-bottom: 8px; }
.eb { overflow-x: auto; } .eb table { min-width: 380px; }
.asks { margin-top: 14px; padding-left: 24px; display: grid; gap: 6px; color: var(--ink2); } .asks li::marker { color: var(--accent-ink); font-family: var(--mono); }
.stp { margin-top: 20px; } .stp-h { display: flex; gap: 16px; align-items: flex-start; } .stp-h h3 { font-size: 22px; } .def { color: var(--ink2); margin-top: 2px; }
.stp-b { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 16px; } .stp-b h4 { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.stp-b ul { padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.42; color: var(--ink2); } .chk { list-style: "✓  "; } .chk li::marker { color: var(--accent-ink); }
.miss { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink2); }
.ds .art { background: var(--bg); border-radius: 10px; padding: 10px; margin-bottom: 8px; height: 150px; display: grid; place-items: center; } .ds .art svg { width: 100%; height: 100%; }
.ops { margin-top: 10px; } .ops th, .ops td { font-size: 13.5px; padding: 5px 4px; } .tip { font-size: 13.5px !important; color: var(--ink3) !important; }
.sz { margin-top: 18px; max-width: 520px; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; }
.iso { overflow: visible; display: block; } .iso .ft { fill: var(--t); } .iso .fl { fill: var(--l); } .iso .fr { fill: var(--r); }
.iso .a.ft { fill: var(--at); } .iso .a.fl { fill: var(--al); } .iso .a.fr { fill: var(--ar); }
.iso path.face { stroke: var(--e); stroke-opacity: var(--eo); stroke-width: .022; stroke-linejoin: round; } .iso .edge { stroke: var(--e); stroke-opacity: .7; stroke-width: .045; fill: none; stroke-linecap: round; }
.iso .arrow { stroke: var(--accent-ink); stroke-width: .05; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.iso .lbl { font-family: var(--mono); font-weight: 500; fill: var(--ink); } .iso .a-lbl { fill: #062a14; } .iso .note { font-family: var(--mono); fill: var(--ink3); } .iso .anote { font-family: var(--mono); fill: var(--accent-ink); }
/* /teach */
.tl { list-style: none; display: grid; gap: 18px; margin-top: 24px; } .ts { display: flex; gap: 18px; align-items: flex-start; padding: 16px 18px; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--sh) var(--shadow); }
:root[data-theme="nagai"] .ts { border-width: 2px; box-shadow: 6px 6px 0 #1b2a4a; } .ts h3 { font-size: 20px; } .ts p { margin-top: 4px; color: var(--ink2); font-size: 16px; }
.cta { padding-bottom: 40px; } .cta .btn { margin-top: 18px; }
.sf { border-top: 1px solid var(--line); padding-block: 28px; color: var(--ink3); font-size: 14px; } .sf p + p { margin-top: 6px; } .sf a { text-underline-offset: 3px; }
@media (max-width: 600px) { .hero { padding-block: 44px 16px; } .sec { padding-top: 48px; } .tcard, .pc, .ac, .ds, .stp, .eb { padding: 15px; } }
@media print { .sn, .toc, .pdfbar, .copy, .cta { display: none; } body { background: #fff; color: #000; } }
[hidden] { display: none !important; }
/* the isometric art lives in a fixed box: it never overlaps the text below it */
.ds .art { position: relative; overflow: hidden; height: 168px; display: block; padding: 8px; }
.ds .art svg.iso { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); overflow: hidden; }
.ds h3 { position: relative; }

/* v7.7: tested code behind a "Show code" toggle. The one-line hint stays plain text. */
.hint { margin-top: 12px !important; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--accent-ink) !important; overflow-wrap: anywhere; }
.cb { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.cb > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; font: 600 15px var(--sans); color: var(--ink); }
.cb > summary::-webkit-details-marker { display: none; }
.cb > summary::before { content: "›"; display: inline-block; width: 14px; font-size: 20px; line-height: 1; color: var(--accent-ink); transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.cb[open] > summary::before { transform: rotate(90deg); }
.cb-n { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink3); }
.cb-bar { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.js .cb[open] .cb-bar { display: flex; }
.cb-tabs { display: none; gap: 4px; padding: 3px; border: 1px solid var(--edge); border-radius: 10px; background: var(--bg); }
.js .cb-tabs { display: inline-flex; }
.cb-tabs button { min-height: 36px; min-width: 76px; border: 0; border-radius: 7px; background: transparent; color: var(--ink2); font: 500 13px var(--mono); cursor: pointer; }
.cb-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
:root[data-theme="light"] .cb-tabs button[aria-selected="true"] { background: #0a7a3d; color: #fff; }
.cb .copy { position: static; }
/* the code block: Dark is the terminal (green on black, scanlines UNDER the code); Light and Nagai get their own page-coloured blocks */
.cb-p { position: relative; margin-top: 10px; border-radius: 10px; border: 1px solid var(--line); background: #040605; overflow: hidden; }
.cb-p::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.cb-p pre { position: relative; z-index: 2; margin: 0; padding: 14px 16px; overflow-x: auto; font: 13px/1.6 var(--mono); color: #7dffb6; tab-size: 4; }
.cb-p pre code { font: inherit; white-space: pre; }
:root[data-theme="light"] .cb-p { background: #fff; border-color: #1d1d1f; } :root[data-theme="light"] .cb-p::before { display: none; } :root[data-theme="light"] .cb-p pre { color: #0b4f27; }
:root[data-theme="nagai"] .cb-p { background: #eaf6fc; border: 2px solid #1b2a4a; } :root[data-theme="nagai"] .cb-p::before { display: none; } :root[data-theme="nagai"] .cb-p pre { color: #1b2a4a; }
.js .cb-p[hidden] { display: none; }
.cb-p + .cb-p { margin-top: 10px; } .js .cb-p + .cb-p { margin-top: 10px; }
.cb-t { margin-top: 10px !important; font-size: 12px !important; color: var(--ink3) !important; }
@media (prefers-reduced-motion: reduce) { .cb > summary::before { transition: none; } }
.pg, .ag, .dg { align-items: start; }
/* long snippets: clipped to ~16 lines until "Show full code"; Copy always copies everything */
.cb-long:not(.is-full) .cb-p pre { max-height: 20.8em; overflow: hidden; }
.cb-long:not(.is-full) .cb-p::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, transparent, #040605); }
:root[data-theme="light"] .cb-long:not(.is-full) .cb-p::after { background: linear-gradient(to bottom, transparent, #fff); } :root[data-theme="nagai"] .cb-long:not(.is-full) .cb-p::after { background: linear-gradient(to bottom, transparent, #eaf6fc); }
.cb-more { display: none; margin-top: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.js .cb-long[open]:not(.is-full) .cb-more, .js .cb-long.is-full[open] .cb-more { display: inline-flex; align-items: center; }
/* an opened code box takes the full grid row, so no line is clipped at the card edge; a scroll shadow shows when a line is still wider */
.pc.is-open, .ac.is-open, .ds.is-open { grid-column: 1 / -1; }
.pc:has(> .cb[open]), .ac:has(> .cb[open]), .ds:has(> .cb[open]) { grid-column: 1 / -1; }
.cb-p pre { background: linear-gradient(to left, #040605, #040605) right / 28px 100% no-repeat local, linear-gradient(to left, rgba(125,255,182,.22), transparent) right / 28px 100% no-repeat scroll; }
:root[data-theme="light"] .cb-p pre { background: linear-gradient(to left, #fff, #fff) right / 28px 100% no-repeat local, linear-gradient(to left, rgba(10,122,61,.2), transparent) right / 28px 100% no-repeat scroll; }
:root[data-theme="nagai"] .cb-p pre { background: linear-gradient(to left, #eaf6fc, #eaf6fc) right / 28px 100% no-repeat local, linear-gradient(to left, rgba(27,42,74,.22), transparent) right / 28px 100% no-repeat scroll; }

/* v7.8: one looping diagram per pattern, DP family and data-structure card. Fixed 8:5 box (no layout shift); poster is a plain image, the mp4 only loads near the viewport and plays while visible. */
.loop { margin: 0 0 14px; }
.loop-box { position: relative; width: 100%; aspect-ratio: 8 / 5; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.loop-box img, .loop-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.loop-box img { display: none; } .loop-box video { opacity: 0; transition: opacity 240ms ease; pointer-events: none; }
.loop-box video.on { opacity: 1; }
:root:not([data-theme="light"]):not([data-theme="nagai"]) .loop-box .th-dark { display: block; }
:root[data-theme="light"] .loop-box .th-light { display: block; }
:root[data-theme="nagai"] .loop-box .th-nagai { display: block; }
:root[data-theme="nagai"] .loop-box { border: 2px solid #1b2a4a; }
@media (prefers-reduced-motion: reduce) { .loop-box video { display: none; } }
.ds .loop { margin-bottom: 10px; }

/* v7.8 decoration parity: the same skyline bands and emoji markers as the home page */
.band, .skyline, .skyline-echo { display: block; line-height: 0; overflow: hidden; } .skyline { height: 150px; } .skyline-echo { height: 56px; }
.skyline svg, .skyline-echo svg { display: none; width: 100%; } .band .sky { display: none; line-height: 0; }
:root:not([data-theme="light"]):not([data-theme="nagai"]) :is(.skyline, .skyline-echo) .sk-night { display: block; }
:root[data-theme="light"] :is(.skyline, .skyline-echo) .sk-morn { display: block; }
:root[data-theme="nagai"] .band .sky { display: block; } :root[data-theme="nagai"] :is(.skyline, .skyline-echo) { display: none; }
.band .sky svg { display: block; width: 100%; height: 150px; }
:root[data-theme="light"] .skyline-echo { background: #f5f5f7; } :root:not([data-theme="light"]):not([data-theme="nagai"]) .skyline-echo { background: #050605; }
.sn { position: sticky; }

/* v7.8: the site's own line icons (tools/icons.json) in place of colour emoji: one stroke weight, the theme's accent colour */
.em { display: inline-flex; align-items: center; margin-right: .4em; font-size: .74em; vertical-align: -.06em; line-height: 1; color: var(--green, var(--accent-ink)); }
.em .ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.eyebrow .em, .legal .block h2 .em, .sub .em, .contact-title .em { font-size: 1.15em; margin-right: .5em; vertical-align: -.2em; }
.sub .em, .contact-title .em { font-size: .9em; }
.em { color: var(--accent-ink); }
.sun-n, .sky-n { display: none; }
@media (max-width: 700px) { .sun-w, .sky-w { display: none; } .sun-n, .sky-n { display: inline; } }

/* v7.9: the /cheat-sheet landing page */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; }
.chips li { padding: 7px 14px; border: 1px solid var(--edge); border-radius: 980px; background: var(--panel); font: 500 13px var(--mono); }
.nl { display: flex; flex-wrap: wrap; gap: 10px; width: min(100%, 520px); margin-top: 22px; }
.nl input[type="email"] { flex: 1 1 240px; min-width: 0; height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); font-size: 16px; }
:root[data-theme="nagai"] .nl input[type="email"] { border: 2px solid #1b2a4a; }
.nl input::placeholder { color: var(--ink3); } .nl input[aria-invalid="true"] { box-shadow: 0 0 0 2px #ff8a80; }
.nl .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 24px; border: 0; border-radius: 980px; background: var(--accent); color: var(--on-accent); font: 600 16px var(--sans); cursor: pointer; }
:root[data-theme="light"] .nl .pill { background: #0a7a3d; color: #fff; } .nl .pill[disabled] { opacity: .7; cursor: default; }
.nl-status { min-height: 22px; margin-top: 10px; font-size: 13px; color: var(--accent-ink); } .nl-status.err { color: #b3261e; }
:root:not([data-theme="light"]):not([data-theme="nagai"]) .nl-status.err { color: #ff8a80; }
.nl-fix { margin: 0 4px; padding: 6px 12px; min-height: 36px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); color: var(--ink); font: 500 13px var(--mono); cursor: pointer; }
.micro { margin-top: 12px; max-width: 56ch; font-size: 12px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.nl-dl { color: var(--accent-ink); text-underline-offset: 3px; }
.pgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.pgf { margin: 0; } .pgi { position: relative; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--shadow); aspect-ratio: 480 / 621; }
:root[data-theme="nagai"] .pgi { border: 2px solid #1b2a4a; box-shadow: 6px 6px 0 #1b2a4a; }
.pgf:nth-child(odd) .pgi { transform: rotate(-1deg); } .pgf:nth-child(even) .pgi { transform: rotate(1deg); }
.pgi img { display: none; width: 100%; height: 100%; object-fit: cover; }
:root:not([data-theme="light"]):not([data-theme="nagai"]) .pgi .th-dark { display: block; }
:root[data-theme="light"] .pgi .th-light { display: block; } :root[data-theme="nagai"] .pgi .th-nagai { display: block; }
.pgf figcaption { margin-top: 12px; font-size: 14px; line-height: 1.35; color: var(--ink2); } .pgf figcaption .mono { display: block; font-size: 12px; color: var(--accent-ink); }
@media (max-width: 900px) { .pgs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 6px 4px 18px; } .pgf { flex: 0 0 min(64vw, 240px); scroll-snap-align: start; } }
.pg-free { grid-template-columns: minmax(0, 1fr); } .fp .cx { margin-top: 4px; }
.ag-mini { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; } .ag-mini .ac { padding-bottom: 14px; }
.cta .nl { margin-inline: 0; }
@media print { .nl, .micro { display: none; } }
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* v7.10: Big-O at a glance */
.bg-w { margin-top: 22px; padding: 20px; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 6px 6px 0 var(--shadow); }
:root[data-theme="nagai"] .bg-w { border: 2px solid #1b2a4a; box-shadow: 6px 6px 0 #1b2a4a; }
.bg-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bg-ctl label { font: 600 15px var(--sans); }
.bg-ctl input[type="range"] { flex: 1 1 240px; min-width: 160px; height: 44px; accent-color: var(--accent); cursor: pointer; }
:root[data-theme="light"] .bg-ctl input[type="range"] { accent-color: #0a7a3d; }
.bg-ctl output { min-width: 15ch; font-size: 14px; color: var(--accent-ink); }
.bg-lang { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--edge); border-radius: 10px; background: var(--bg); }
.bg-lang button { min-height: 36px; min-width: 76px; border: 0; border-radius: 7px; background: transparent; color: var(--ink2); font: 500 13px var(--mono); cursor: pointer; }
.bg-lang button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
:root[data-theme="light"] .bg-lang button[aria-pressed="true"] { background: #0a7a3d; color: #fff; }
.bg-hint { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink3); max-width: 70ch; }
.bg-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.bg-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(112px, auto) 118px; align-items: center; gap: 12px; min-height: 36px; }
.bg-c { font-size: 14px; } .bg-bar { height: 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.bg-bar i { display: block; height: 100%; width: 2%; border-radius: 6px; background: var(--rc, var(--accent)); transition: width 200ms ease; }
.bg-ops { font-size: 13px; color: var(--ink2); text-align: right; } .bg-v { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bg-list li[data-v="instant"] { --rc: #1fb264; } .bg-list li[data-v="fine"] { --rc: #5aa832; } .bg-list li[data-v="borderline"] { --rc: #d99a00; } .bg-list li[data-v="too-slow"] { --rc: #e0415f; }
.bg-v { color: var(--ink); } .bg-v::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--rc); vertical-align: 0; }
.bg-aim { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; }
@media (max-width: 640px) { .bg-list li { grid-template-columns: 78px minmax(0, 1fr) 84px; } .bg-ops { grid-column: 2 / 4; text-align: left; } .bg-list li { row-gap: 2px; } .bg-v { grid-column: 3; grid-row: 1; font-size: 11px; } .bg-bar { grid-column: 2; grid-row: 1; } .bg-c { grid-row: 1; } }
@media (prefers-reduced-motion: reduce) { .bg-bar i { transition: none; } }
.bgt { margin-top: 20px; } .bg-lead { margin: 0 0 8px; font-size: 14px; color: var(--ink3); } .bgt table { min-width: 560px; } .bgt th.first { width: 24%; }
.bgt td .o { display: block; font: 500 13.5px var(--mono); } .bgt td .w { display: block; margin-top: 2px; font: 500 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.bgt td[class^="r-"] { background: color-mix(in srgb, var(--rc) 15%, transparent); box-shadow: inset 3px 0 0 var(--rc); }
.r-excellent { --rc: #1fb264; } .r-good { --rc: #5aa832; } .r-fair { --rc: #d99a00; } .r-bad { --rc: #e8681a; } .r-horrible { --rc: #e0415f; }

.sec > p.note { margin: 14px 0 0; padding: 12px 16px; border: 1.5px solid var(--line, currentColor); border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink2, var(--ink)); background: var(--panel); max-width: 78ch; }

.pc .also { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink3); }

.pickw { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.pickw > div { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); display: grid; gap: 4px; }
.pickw span { font-size: 14px; line-height: 1.35; color: var(--ink2); } .pickw b { font-size: 15px; font-weight: 600; color: var(--ink); }