/* ============================================================
   MASTERCLASS FIGMA — deck system
   Mac 1984 · tokens from foscacordidonne.webflow.io
   Stage 1920x1080, scaled to viewport. Type roles are FIXED:
   display / h2 / h3 / body / small / label / key
   ============================================================ */

@font-face {
  font-family: "FK Raster";
  src: url("fonts/FKRasterRomanCompactTrial-Sharp.otf") format("opentype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* color tokens (sito) */
  --black: #000000;
  --white: #ffffff;
  --silver: #c4c4c4;
  --blue: #2c3eff;
  --blue-dark: #00258b;
  --ice: #c0e6ff;
  --ink: #222222;
  --muted: #5a5a63;
  --line: #dddddd;
  --paper: #f8f8f8;

  /* type roles */
  --f-display: "FK Raster", Verdana, sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display: 168px;
  --t-h1: 120px;
  --t-h2: 88px;
  --t-h3: 48px;
  --t-body: 36px;
  --t-small: 26px;
  --t-label: 22px;

  /* spacing (8-step) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;

  --border: 4px solid var(--black);
  --shadow: 12px 12px 0 var(--black);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body {
  font-family: var(--f-text);
  font-weight: 500;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- stage ---------- */
#viewport { position: fixed; inset: 0; overflow: hidden; background: #000; }
#stage {
  width: 1920px; height: 1080px; position: absolute; left: 50%; top: 50%; margin: -540px 0 0 -960px;
  transform-origin: center center;
  background: var(--white) url("assets/pattern-grey.svg") 0 0 / 16px 16px;
  overflow: hidden;
}

/* ---------- menu bar (functional: course · lesson · counter) ---------- */
.menubar {
  position: absolute; z-index: 10; left: 0; right: 0; top: 0; height: 64px;
  background: var(--silver); border-bottom: var(--border);
  display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s4);
  font-family: var(--f-display); font-size: 34px; color: var(--black);
}
.menubar .brand { display: flex; align-items: center; height: 100%; padding: 0 4px; }
.menubar .brand img { height: 44px; width: auto; display: block; }
.menubar .pick { position: relative; display: block; margin-left: var(--s2); }
.menubar .pick::after { content: ""; position: absolute; right: 14px; top: 50%; width: 0; height: 0; margin-top: -4px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--black); pointer-events: none; }
.menubar select { appearance: none; -webkit-appearance: none; font-family: var(--f-text); font-weight: 600; font-size: var(--t-label); color: var(--black); background: var(--white); border: 3px solid var(--black); box-shadow: 4px 4px 0 var(--black); padding: 4px 44px 4px 14px; height: 40px; cursor: pointer; border-radius: 0; }
.menubar select:hover { background: var(--ice); }
.menubar select:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.menubar select option { font-size: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menubar .lesson { font-family: var(--f-text); font-weight: 600; font-size: var(--t-label); letter-spacing: .02em; }
.menubar .count { margin-left: auto; font-family: var(--f-text); font-weight: 700; font-size: var(--t-label); font-variant-numeric: tabular-nums; }
.menubar .bar { width: 260px; height: 16px; border: 3px solid var(--black); background: var(--white); position: relative; }
.menubar .bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--black); }

/* ---------- slides ---------- */
.slide { position: absolute; inset: 64px 0 0 0; display: none; padding: 48px 80px 64px; }
.slide.is-active { display: block; }

.win {
  position: relative; width: 100%; height: 100%;
  background: var(--white); border: var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.win-bar {
  height: 64px; flex: none; border-bottom: var(--border);
  background: repeating-linear-gradient(to bottom, var(--black) 0 4px, var(--white) 4px 12px);
  background-clip: padding-box;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.win-bar .close { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: var(--white); border: 4px solid var(--black); }
.win-bar .title {
  background: var(--white); padding: 0 24px; height: 100%; display: flex; align-items: center;
  font-family: var(--f-display); font-size: 34px; color: var(--black); letter-spacing: 1px;
}
.win-body { flex: 1; min-height: 0; padding: var(--s5) 96px; position: relative; display: flex; flex-direction: column; }

/* question band: every content slide can end with a reflection prompt */
.slide.has-q { padding: 32px 80px 28px; }
.has-q .win-body { padding-top: var(--s4); padding-bottom: var(--s4); }
.qbar { flex: none; height: 96px; border-top: var(--border); background: var(--ice); display: flex; align-items: center; gap: var(--s4); padding: 0 96px; }
.qbar .qk { flex: none; font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--black); background: var(--white); border: 3px solid var(--black); box-shadow: 4px 4px 0 var(--black); padding: 8px 16px; }
.qbar .qt { font-size: 30px; font-weight: 600; line-height: 1.25; color: var(--black); }

/* ---------- type roles ---------- */
.display { font-family: var(--f-display); font-size: var(--t-display); line-height: .92; letter-spacing: 2px; color: var(--black); font-weight: 400; }
h1, .h1  { font-family: var(--f-display); font-size: var(--t-h1); line-height: .98; letter-spacing: 2px; color: var(--black); font-weight: 400; }
h2, .h2  { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1; letter-spacing: 2px; color: var(--black); font-weight: 400; text-wrap: balance; }
h3, .h3  { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.05; letter-spacing: 1px; color: var(--black); font-weight: 400; }
p, li, .body { font-size: var(--t-body); line-height: 1.38; font-weight: 500; color: var(--ink); max-width: 30em; }
.small { font-size: var(--t-small); line-height: 1.4; color: var(--muted); font-weight: 500; }
.label {
  font-family: var(--f-text); font-weight: 700; font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
mark { background: var(--blue); color: var(--white); padding: 0 .14em; }
mark.ice { background: var(--ice); color: var(--black); }
kbd {
  font-family: var(--f-text); font-weight: 700; font-size: .72em; letter-spacing: .02em;
  background: var(--white); color: var(--black); border: 3px solid var(--black); border-radius: 4px;
  box-shadow: 3px 3px 0 var(--black); padding: .08em .42em; white-space: nowrap; vertical-align: .08em;
}
code { font-family: var(--f-text); font-weight: 600; font-feature-settings: "zero","tnum"; background: var(--paper); border: 2px solid var(--black); padding: 0 .3em; font-size: .86em; }

.stack > * + * { margin-top: var(--s3); }
.grow { flex: 1; min-height: 0; }
.mt-auto { margin-top: auto; }

/* ---------- layout: cover ---------- */
.L-cover .win-body { flex-direction: row; align-items: stretch; gap: var(--s5); }
.L-cover .col-l { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.L-cover .num {
  flex: 0 0 520px; background: var(--blue); border: var(--border); box-shadow: 8px 8px 0 var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 420px; line-height: 1; color: var(--white);
}
.L-cover .meta { display: flex; gap: var(--s4); }
.L-cover .meta span { font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; }
.L-cover .sub { font-size: var(--t-body); max-width: 22em; }

/* ---------- layout: section ---------- */
.L-section .win { background: var(--blue); }
.L-section .win-body { justify-content: space-between; }
.L-section h1, .L-section .label, .L-section p { color: var(--white); }
.L-section .label { opacity: .85; }
.L-section .big-n { position: absolute; right: 96px; bottom: 32px; font-family: var(--f-display); font-size: 520px; line-height: 1; color: var(--white); opacity: .16; }
.L-section .topics { display: flex; flex-direction: column; gap: var(--s2); position: relative; }
.L-section .topics p { font-size: var(--t-body); font-weight: 600; max-width: none; display: flex; gap: var(--s3); align-items: center; }
.L-section .topics p::before { content: ""; width: 24px; height: 24px; background: var(--white); flex: none; }

/* ---------- layout: statement ---------- */
.L-statement .win-body { justify-content: center; gap: var(--s4); }
.L-statement h1 { max-width: 15em; text-wrap: balance; }
.L-statement .small { max-width: 34em; font-size: var(--t-body); }

/* ---------- generic content ---------- */
.head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.cols { display: grid; gap: var(--s5); flex: 1; min-height: 0; }
.cols.c2 { grid-template-columns: 1fr 1fr; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cols.c5-7 { grid-template-columns: 5fr 7fr; }
.card.n-y { background: #ffe45c; } .card.n-r { background: #ff7468; } .card.n-o { background: #ffab4a; } .card.n-g { background: #7fe39a; }
/* four cards in two columns: tighter so the footnote never overlaps the second row */
.cols.c2:has(> :nth-child(3)) { gap: var(--s4); align-content: start; }
.cols.c2:has(> :nth-child(3)) .card { padding: var(--s3) var(--s4); }
.cols.c6-6 { grid-template-columns: 1fr 1fr; }

.card { background: var(--white); border: var(--border); box-shadow: 8px 8px 0 var(--black); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.card.blue { background: var(--blue); } .card.blue * { color: var(--white); }
.card.ice { background: var(--ice); }
.card .h3 { margin-bottom: var(--s1); }
.card p, .card li { font-size: 30px; line-height: 1.38; max-width: none; }

/* steps (ONLY for non-obvious operations) */
ol.steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: var(--s3); }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: start; font-size: 32px; line-height: 1.32; max-width: none; }
ol.steps li::before {
  content: counter(s); width: 56px; height: 56px; background: var(--blue); color: var(--white); border: 4px solid var(--black);
  display: grid; place-items: center; font-family: var(--f-display); font-size: 34px; line-height: 1; padding-top: 4px;
}

/* bullet list, short */
ul.list { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
ul.list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; }
ul.list li::before { content: ""; width: 20px; height: 20px; background: var(--black); margin-top: .5em; }
ul.list.sm li { font-size: var(--t-small); }
ul.list.sm li::before { width: 16px; height: 16px; margin-top: .45em; }

/* compare */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); flex: 1; min-height: 0; }
.compare .no, .compare .yes { border: var(--border); box-shadow: 8px 8px 0 var(--black); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.compare .no { background: var(--paper); }
.compare .yes { background: var(--ice); }
.compare .tag { font-weight: 700; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }
.compare .no .tag { color: var(--muted); }
.compare .yes .tag { color: var(--blue-dark); }
.compare .row { font-size: 32px; font-weight: 600; padding: 14px 20px; background: var(--white); border: 3px solid var(--black); }
.compare .no .row { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--muted); font-weight: 500; }

/* flow */
.flow { display: flex; align-items: stretch; gap: 0; flex: 1; min-height: 0; }
.flow .node { flex: 1; border: var(--border); background: var(--white); padding: var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s2); box-shadow: 8px 8px 0 var(--black); min-width: 0; }
.flow .node.blue { background: var(--blue); } .flow .node.blue * { color: var(--white); }
.flow .node.ice { background: var(--ice); }
.flow .arrow { flex: 0 0 64px; display: grid; place-items: center; font-family: var(--f-display); font-size: 56px; color: var(--black); }
.node .h3 { font-size: 40px; }
.node p, .node li { font-size: 26px; line-height: 1.35; max-width: none; }
.node .small { font-size: 22px; }

/* table-ish rows */
.rows { display: flex; flex-direction: column; border: var(--border); background: var(--white); box-shadow: 8px 8px 0 var(--black); }
.rows .r { display: grid; grid-template-columns: 450px 1fr; gap: var(--s4); padding: 12px var(--s4); align-items: baseline; }
.rows .r + .r { border-top: 3px solid var(--black); }
.rows .r b { font-family: var(--f-display); font-weight: 400; font-size: 36px; color: var(--black); letter-spacing: 1px; }
.rows .r span { font-size: 27px; line-height: 1.3; }

/* code / terminal */
.term { border: var(--border); box-shadow: 8px 8px 0 var(--black); background: var(--black); color: var(--white); padding: 32px; display: flex; flex-direction: column; gap: var(--s2); }
.term .cmd { font-family: var(--f-text); font-weight: 600; font-feature-settings: "zero","tnum"; font-size: 26px; line-height: 1.4; color: var(--white); word-break: break-word; }
.term .cmd::before { content: "> "; color: var(--ice); }
.term .cap { font-size: 22px; color: var(--ice); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* screenshot window */
.shotwrap { position: relative; display: flex; align-items: stretch; min-height: 0; }
.shot { position: relative; width: 100%; border: var(--border); box-shadow: 10px 10px 0 var(--black); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; }
.shot .bar { height: 40px; flex: none; border-bottom: 4px solid var(--black); background: repeating-linear-gradient(to bottom, var(--black) 0 3px, var(--white) 3px 9px); display: flex; align-items: center; justify-content: center; }
.shot .bar span { background: var(--white); padding: 0 16px; font-family: var(--f-display); font-size: 24px; color: var(--black); }
.shot .imgbox { position: relative; flex: 1; min-height: 0; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.shot .mark {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 4px solid var(--black); background: var(--blue); color: var(--white);
  display: grid; place-items: center; font-family: var(--f-display); font-size: 32px; line-height: 1; padding-top: 3px; box-shadow: 4px 4px 0 var(--black);
}
.shot .ring { position: absolute; border: 5px solid var(--blue); box-shadow: 0 0 0 3px var(--white); }
.shot figcaption { padding: 10px 20px; border-top: 4px solid var(--black); background: var(--white); font-size: 22px; font-weight: 600; color: var(--muted); }

/* about + gallery (only lesson 1 intro) */
.about { display: grid; grid-template-columns: 400px 1fr; gap: var(--s5); align-items: center; flex: 1; min-height: 0; }
.about .photo { width: 400px; align-self: center; }
.about .photo .imgbox { flex: none; aspect-ratio: 1 / 1; }
.about .photo img { object-position: center top; image-rendering: auto; }
.about h2 { font-size: 104px; line-height: .95; }
.about p { max-width: 22em; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); flex: 1; min-height: 0; }
.gallery .shot { min-height: 0; }
.gallery .shot img { object-fit: cover; object-position: top center; }

/* articles */
.arts { display: flex; flex-direction: column; gap: var(--s2); flex: none; }
.small a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.art { flex: none; min-height: 80px; display: grid; grid-template-columns: 220px 1fr 72px; align-items: stretch; background: var(--white); border: var(--border); box-shadow: 6px 6px 0 var(--black); color: inherit; text-decoration: none; transition: transform .12s steps(2), box-shadow .12s steps(2); }
.art:hover, .art:focus-visible { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--black); outline: none; }
.art:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }
.art .th { border-right: var(--border); background: var(--ice); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.art .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art .th b { font-family: var(--f-display); font-weight: 400; font-size: 56px; line-height: 1; color: var(--black); }
.art .tx { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px var(--s3); min-width: 0; }
.art .h3 { font-size: 34px; margin: 0; }
.art p { font-size: 25px; line-height: 1.25; margin: 0; max-width: none; }
.art > i { font-style: normal; font-size: 44px; color: var(--blue); display: flex; align-items: center; justify-content: center; }

/* component sources panel */
.cmp { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border: var(--border); background: var(--silver); padding: 10px var(--s3); margin-top: var(--s2); }
.cmp b { font-family: var(--f-display); font-weight: 400; font-size: 36px; color: var(--black); letter-spacing: 1px; }
.srcs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.src { background: var(--white); border: var(--border); box-shadow: 6px 6px 0 var(--black); padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: 8px; }
.src .top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.src .nm { font-family: var(--f-display); font-size: 34px; line-height: 1; color: var(--black); letter-spacing: 1px; }
.src p { font-size: 25px; line-height: 1.3; margin: 0; max-width: none; }
.chip { font-family: var(--f-text); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; border: 3px solid var(--black); padding: 4px 12px; background: var(--white); color: var(--black); white-space: nowrap; }
.chip.ok { background: #7fe39a; } .chip.warn { background: #ffe45c; } .chip.bad { background: #ff7468; }
.chip.truth { background: var(--blue); color: var(--white); }

/* exercise */
.L-link .win-body { gap: var(--s4); }
.linkbox { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; margin-top: var(--s3); }
.linkbox > p:first-child { font-size: var(--t-body); max-width: 30em; }
.linkbtn { display: inline-flex; align-items: center; gap: var(--s3); background: var(--blue); color: var(--white); text-decoration: none; border: var(--border); box-shadow: 12px 12px 0 var(--black); padding: 24px 48px; font-family: var(--f-display); font-size: 64px; line-height: 1; transition: transform .12s steps(2), box-shadow .12s steps(2); }
.linkbtn:hover, .linkbtn:focus-visible { transform: translate(6px, 6px); box-shadow: 6px 6px 0 var(--black); outline: none; }
.linkbtn:focus-visible { outline: 4px solid var(--black); outline-offset: 6px; }
.linkbtn i { font-style: normal; }
.L-exercise .win { background: var(--blue); }
.L-exercise .win-body { gap: var(--s4); }
.L-exercise h2, .L-exercise .label, .L-exercise li, .L-exercise p { color: var(--white); }
.L-exercise .label { opacity: .85; }
.L-exercise .time { position: absolute; right: 96px; top: var(--s5); border: var(--border); background: var(--white); box-shadow: 6px 6px 0 var(--black); padding: 8px 24px; font-family: var(--f-display); font-size: 48px; color: var(--black); }
.L-exercise ol.steps li::before { background: var(--white); color: var(--black); }
.L-exercise ol.steps li { font-size: 34px; }
.L-exercise .deliver { margin-top: auto; border: var(--border); background: var(--white); padding: 16px 28px; box-shadow: 6px 6px 0 var(--black); display: flex; gap: var(--s3); align-items: center; }
.L-exercise .deliver .label { color: var(--blue); opacity: 1; }
.L-exercise .deliver span { font-size: 30px; font-weight: 600; color: var(--black); }

/* recap */
.L-recap .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); flex: 1; min-height: 0; margin-bottom: var(--s4); }
.L-recap .item { border: var(--border); box-shadow: 8px 8px 0 var(--black); padding: var(--s4); background: var(--white); display: flex; flex-direction: column; gap: var(--s2); }
.L-recap .item .n { font-family: var(--f-display); font-size: 96px; line-height: .9; color: var(--blue); }
.L-recap .item p { font-size: 32px; max-width: none; }
.L-recap .next { display: flex; align-items: center; gap: var(--s3); border-top: var(--border); padding-top: var(--s3); }
.L-recap .next b { font-family: var(--f-display); font-weight: 400; font-size: 44px; color: var(--black); }

/* checklist */
.check { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.check li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: start; font-size: 32px; max-width: none; }
.check li::before { content: ""; width: 36px; height: 36px; border: 4px solid var(--black); background: var(--white); margin-top: .2em; }

/* notes (press N) */
#notes {
  position: absolute; z-index: 30; left: 80px; right: 80px; bottom: 24px; display: none;
  background: var(--black); color: var(--white); border: 4px solid var(--white); padding: 20px 28px; font-size: 26px; line-height: 1.4; font-weight: 500;
}
#notes.on { display: block; }
#notes b { color: var(--ice); letter-spacing: .1em; text-transform: uppercase; font-size: 20px; margin-right: 12px; }

/* overview (press G) */
#overview { position: fixed; inset: 0; z-index: 50; display: none; background: #111; overflow: auto; padding: 32px; }
#overview.on { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-content: start; }
#overview button {
  all: unset; cursor: pointer; position: relative; aspect-ratio: 16/9; background: var(--white); border: 4px solid #fff; overflow: hidden;
}
#overview button:focus-visible, #overview button:hover { border-color: var(--blue); }
#overview .thumb { width: 1920px; height: 1080px; transform-origin: top left; pointer-events: none; position: absolute; left: 0; top: 0; background: var(--white) url("assets/pattern-grey.svg") 0 0 / 16px 16px; }
#overview .thumb .slide { display: block; }
#overview .no { position: absolute; left: 0; bottom: 0; background: #000; color: #fff; font: 700 14px var(--f-text); padding: 2px 8px; z-index: 2; }

/* hint */
#hint { position: absolute; z-index: 20; right: 24px; bottom: 12px; font-size: 20px; font-weight: 600; color: var(--black); background: var(--white); border: 3px solid var(--black); padding: 2px 12px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#hint.on { opacity: 1; }
#fs { position: absolute; z-index: 30; top: 76px; right: 12px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; font-family: var(--f-text); font-weight: 600; font-size: 20px; color: var(--black); background: rgba(255, 255, 255, .55); border: 3px solid var(--black); border-radius: 0; cursor: pointer; opacity: .5; transition: opacity .15s, background .15s; }
#fs:hover, #fs:focus-visible { opacity: 1; background: var(--white); }
#fs:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .slide.is-active .win { animation: pop .18s steps(3) both; }
  @keyframes pop { from { transform: translate(6px, 6px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* print: one slide per page */
@media print {
  html, body { overflow: visible; background: #fff; }
  #viewport { position: static; display: block; }
  #stage { transform: none !important; width: 1920px; height: auto; overflow: visible; }
  .slide { display: block !important; position: relative; inset: auto; height: 1080px; page-break-after: always; }
  .menubar, #notes, #hint, #overview, #fs { display: none !important; }
  @page { size: 1920px 1080px; margin: 0; }
}