/* Reactor Control Room 2026 · © 2026 Coen Vink · oddgamez.com · All rights reserved. Copying, redistributing or hosting this game elsewhere is not permitted. */
/* Operator manual: photocopied A4 sheets in an open two-ring binder.
   Fixed 1700×1183 binder drawn at design size and scaled to the viewport (see manual.js fit()).
   Sheets hinge on the rings: each turns about a point 18px left of its edge, so a turned sheet
   lies mirrored on the left board and its back becomes the left page of the spread.
   Typed text is treated as toner on paper; handwriting lives only in the margins. */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Arimo:wght@400;700&family=Courier+Prime:wght@400;700&family=Caveat:wght@500;700&family=Nanum+Pen+Script&family=Reenie+Beanie&family=Permanent+Marker&display=swap");

.mn {
  --pw: 794px; --ph: 1123px;
  --type: #1d1c1a;
  --pen-blue: #1f3b8f; --pen-red: #b3221a; --pencil: #55575a; --marker: #1a1a1a;
  --f-body: "Crimson Pro", "Times New Roman", serif;
  --f-sans: "Arimo", "Helvetica Neue", Arial, sans-serif;
  --f-type: "Courier Prime", "Courier New", monospace;
  --f-pen: "Caveat", "Segoe Print", cursive;
  --f-red: "Nanum Pen Script", "Caveat", cursive;
  --f-pencil: "Reenie Beanie", "Caveat", cursive;
  --f-marker: "Permanent Marker", "Caveat", cursive;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .28 0 0 0 -1.2 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .03' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .40 0 0 0 0 .30 0 0 0 -2 1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.22'/%3E%3C/svg%3E");
  --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='turbulence' baseFrequency='.55' numOctaves='1' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 14 0 0 0 -9.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --fade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1100'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .006' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .95 0 0 0 0 .92 0 0 0 2.4 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --vinyl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='.16'/%3E%3C/svg%3E");

  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  font-family: var(--f-body); color: var(--type);
  background: radial-gradient(ellipse at 50% 40%, rgba(24,26,25,.72), rgba(6,7,7,.93) 75%);
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity .35s ease;
}
.mn[hidden] { display: none !important; }
/* Own compositing layers, isolated from the board underneath, so nothing repainting below re-rasterizes the pages */
.mn { isolation: isolate; will-change: opacity; contain: layout paint style; }
.mn.shown { opacity: 1; }
.mn *, .mn *::before, .mn *::after { box-sizing: border-box; }

/* ---------- Binder ---------- */
.mn-binder {
  position: absolute; left: 0; top: 0; width: 1700px; height: 1183px; transform-origin: 0 0;
  cursor: default;
  transition: translate .55s cubic-bezier(.2,.8,.25,1), rotate .55s cubic-bezier(.2,.8,.25,1);
  translate: 0 0; rotate: 0deg;
}
.mn:not(.shown) .mn-binder { translate: 0 110vh; rotate: -4deg; }
.mn-board {
  position: absolute; top: 0; height: 1183px; width: 840px; border-radius: 12px;
  background-color: #1b2130;
  background-image:
    var(--vinyl),
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
  box-shadow: 0 40px 80px rgba(0,0,0,.65), 0 8px 18px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.06), inset 0 0 40px rgba(0,0,0,.45);
}
.mn-board.l { left: 6px; border-radius: 12px 4px 4px 12px; }
.mn-board.r { left: 854px; border-radius: 4px 12px 12px 4px; }
/* worn corners and edges where the vinyl has rubbed through */
.mn-board::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(160,170,190,.08);
  background:
    radial-gradient(circle at 0 0, rgba(190,190,180,.22), transparent 22px),
    radial-gradient(circle at 0 100%, rgba(190,190,180,.18), transparent 26px),
    radial-gradient(circle at 100% 0, rgba(190,190,180,.2), transparent 24px),
    radial-gradient(circle at 100% 100%, rgba(190,190,180,.24), transparent 30px);
}
.mn-board.r::before {
  background:
    radial-gradient(circle at 100% 0, rgba(190,190,180,.2), transparent 24px),
    radial-gradient(circle at 100% 100%, rgba(190,190,180,.26), transparent 30px),
    linear-gradient(97deg, transparent 60%, rgba(220,220,210,.05) 61%, transparent 63%);
}
.mn-spine {
  position: absolute; left: 836px; top: 4px; width: 28px; height: 1175px; border-radius: 3px;
  background: linear-gradient(90deg, #0d1018, #262d3e 35%, #2b3244 50%, #262d3e 65%, #0d1018);
  box-shadow: inset 0 0 6px rgba(0,0,0,.8);
}
/* Inside front cover: clear pocket with the copy card */
.mn-pocket {
  position: absolute; left: 70px; top: 110px; width: 690px; height: 900px; border-radius: 4px;
  background: linear-gradient(115deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 40%, rgba(255,255,255,.06) 75%, rgba(255,255,255,.01));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -2px 0 rgba(255,255,255,.08);
}
.mn-pocket::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.mn-card {
  position: absolute; left: 150px; top: 180px; width: 420px; padding: 22px 26px 20px;
  background: #ece6d2; color: #222; rotate: -1.2deg;
  font-family: var(--f-type); font-size: 15px; line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  background-image: var(--grain), repeating-linear-gradient(180deg, transparent 0 26px, rgba(60,90,160,.25) 26px 27px);
  background-position: 0 0, 0 12px;
}
.mn-card b { font-weight: 700; letter-spacing: .08em; }
.mn-card .hand { font-family: var(--f-pen); color: var(--pen-blue); font-size: 26px; line-height: 1; }
.mn-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #b3261e; opacity: .75; }
.mn-sticky {
  position: absolute; width: 230px; padding: 18px 18px 22px; rotate: 3deg;
  background: linear-gradient(180deg, #fff27a, #f5e15a);
  font-family: var(--f-pen); font-size: 27px; line-height: 1.05; color: #263a8c;
  box-shadow: 0 14px 12px -10px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.25);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 92%);
}
.mn-sticky::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: rgba(0,0,0,.05); }
.mn-sticky.pink { background: linear-gradient(180deg, #ffb3c8, #f59ab4); color: #2b2b2b; }

/* Ring mechanism */
.mn-mech {
  position: absolute; left: 828px; top: 330px; width: 44px; height: 520px; border-radius: 20px;
  background: linear-gradient(90deg, #5d6266, #e5e8ea 30%, #fbfcfc 45%, #a9aeb2 60%, #474b4f);
  box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35);
}
.mn-mech::before, .mn-mech::after {
  content: ""; position: absolute; left: 15px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #8d9296 60%, #3e4245);
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.mn-mech::before { top: 14px; } .mn-mech::after { bottom: 14px; }
.mn-ring {
  position: absolute; left: 787px; width: 126px; height: 20px; margin-top: -10px; z-index: 900; pointer-events: none;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.0) 0, rgba(255,255,255,.95) 32%, rgba(255,255,255,.2) 50%, rgba(0,0,0,.25) 80%),
    linear-gradient(90deg, #6b7075 0, #c9cdd0 18%, #f7f8f9 50%, #c9cdd0 82%, #6b7075 100%);
  box-shadow: 0 8px 10px rgba(0,0,0,.45), 0 2px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.25);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 9px calc(100% - 9px), transparent calc(100% - 2px));
          mask: linear-gradient(90deg, transparent 0 2px, #000 9px calc(100% - 9px), transparent calc(100% - 2px));
}

/* Edges of the paper block under each stack */
.mn-block { position: absolute; top: 30px; width: 794px; height: 1123px; border-radius: 2px; background: #d9d5c9; }
.mn-block.r { left: 868px; box-shadow: 1px 1px 0 #cfcabc, 2px 2px 0 #e4e0d4, 3px 3px 0 #c8c3b5, 4px 3px 0 #ddd8cb, 5px 4px 1px rgba(0,0,0,.35), 8px 10px 18px rgba(0,0,0,.45); }
.mn-block.l { left: 38px; box-shadow: -1px 1px 0 #cfcabc, -2px 2px 0 #e4e0d4, -3px 3px 0 #c8c3b5, -4px 3px 0 #ddd8cb, -5px 4px 1px rgba(0,0,0,.35), -8px 10px 18px rgba(0,0,0,.45); }
.mn-block.empty { display: none; }

/* ---------- Sheets ---------- */
.mn-sheet {
  --tilt: 0deg; --dx: 0px; --dy: 0px;
  position: absolute; left: 868px; top: 30px; width: 794px; height: 1123px;
  transform-origin: -18px 50%;
  transform-style: preserve-3d;
  transform: translate(var(--dx), var(--dy)) perspective(3400px) rotateY(0deg) rotate(var(--tilt));
  transition: transform .82s cubic-bezier(.45,.05,.25,1);
  cursor: pointer;
}
.mn-sheet.turned { transform: translate(calc(-1 * var(--dx)), var(--dy)) perspective(3400px) rotateY(-180deg) rotate(var(--tilt)); }
.mn-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: var(--paper, #eeece4);
  /* real punched holes: see through to whatever is below */
  -webkit-mask: var(--holes); mask: var(--holes);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.mn-front { --holes: radial-gradient(circle 11px at 45px 411px, #0000 95%, #000 100%), radial-gradient(circle 11px at 45px 713px, #0000 95%, #000 100%); }
.mn-back  { --holes: radial-gradient(circle 11px at 749px 411px, #0000 95%, #000 100%), radial-gradient(circle 11px at 749px 713px, #0000 95%, #000 100%); transform: rotateY(180deg); }

/* Paper and copier layers, bottom to top */
.mn-face > .paper, .mn-face .copy, .mn-face > .wear, .mn-face > .shade { position: absolute; inset: 0; pointer-events: none; }
/* Inside a typed page the copier layer sits over the toner but under the handwriting */
.mn-page > .copy { inset: -52px -46px -54px -92px; }
.mn .circ::after, .mn .tick { z-index: 4; }
.mn-face > .paper { background-image: var(--grain), var(--fibre); }
.mn-face .copy {
  z-index: 3; mix-blend-mode: multiply;
  background-image:
    var(--speck),
    linear-gradient(90deg, rgba(40,40,40,var(--edge-l, 0)) 0, transparent 22px),
    linear-gradient(270deg, rgba(40,40,40,var(--edge-r, 0)) 0, transparent 26px),
    linear-gradient(180deg, rgba(40,40,40,var(--edge-t, 0)) 0, transparent 16px),
    repeating-linear-gradient(90deg, transparent 0 var(--streak-x, 517px), rgba(0,0,0,var(--streak, 0)) var(--streak-x, 517px) calc(var(--streak-x, 517px) + 1.5px), transparent 0 1200px),
    radial-gradient(ellipse 72% 68% at 52% 48%, transparent 50%, rgba(70,68,60,.16)),
    linear-gradient(rgba(95,92,84,.06), rgba(95,92,84,.06));
  background-size: var(--speck-size, 420px) var(--speck-size, 420px), auto, auto, auto, auto, auto, auto;
  background-position: var(--speck-pos, 0 0), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  opacity: .92;
}
/* faded toner patches: lightens typed text without hiding it */
.mn-face .copy::after { content: ""; position: absolute; inset: 0; background-image: var(--fade); background-size: 100% 100%; mix-blend-mode: screen; opacity: var(--fade-k, .45); }
.mn-face > .wear {
  z-index: 6; mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 110px 70px at 100% 100%, rgba(120,95,60,.18), transparent 70%),
    radial-gradient(ellipse 70px 120px at 100% 96%, rgba(110,90,60,.12), transparent 70%),
    linear-gradient(90deg, rgba(110,95,70,.12), transparent 4px, transparent calc(100% - 4px), rgba(110,95,70,.14)),
    linear-gradient(180deg, rgba(110,95,70,.12), transparent 4px, transparent calc(100% - 4px), rgba(110,95,70,.16));
}
.mn-back > .wear {
  background:
    radial-gradient(ellipse 110px 70px at 0 100%, rgba(120,95,60,.18), transparent 70%),
    linear-gradient(90deg, rgba(110,95,70,.14), transparent 4px, transparent calc(100% - 4px), rgba(110,95,70,.12)),
    linear-gradient(180deg, rgba(110,95,70,.12), transparent 4px, transparent calc(100% - 4px), rgba(110,95,70,.16));
}
/* the sheet curves up into the rings */
.mn-face > .shade { z-index: 8; }
.mn-front > .shade { background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.08) 26px, transparent 70px); }
.mn-back > .shade { background: linear-gradient(270deg, rgba(0,0,0,.3), rgba(0,0,0,.08) 26px, transparent 70px); }
.mn-front > .shade::after, .mn-back > .shade::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; }
.mn-sheet.fly-f .mn-front > .shade::after { animation: mn-dim-out .82s ease-in var(--d, 0s) both; }
.mn-sheet.fly-f .mn-back > .shade::after { animation: mn-dim-in .82s ease-out var(--d, 0s) both; }
.mn-sheet.fly-b .mn-back > .shade::after { animation: mn-dim-out .82s ease-in var(--d, 0s) both; }
.mn-sheet.fly-b .mn-front > .shade::after { animation: mn-dim-in .82s ease-out var(--d, 0s) both; }
@keyframes mn-dim-out { 0% { opacity: 0; } 50% { opacity: .26; } 100% { opacity: .26; } }
@keyframes mn-dim-in { 0% { opacity: .26; } 50% { opacity: .26; } 100% { opacity: 0; } }
.mn-sheet { box-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* Copied punch holes from the original (three-hole US pattern, printed black) */
.mn-ghost { position: absolute; left: 22px; width: 30px; height: 30px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 45% 40%, #222, #070707 70%); filter: blur(.4px); }
.mn-back .mn-ghost { left: auto; right: 22px; }
.mn-reinf { position: absolute; left: 31px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; z-index: 7; border: 6px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.12); }

/* Hole edges: a thin dark rim where light catches the cut */
.mn-hole { position: absolute; left: 33px; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; z-index: 7; box-shadow: 0 0 0 1px rgba(80,70,50,.35), inset 0 0 0 1px rgba(80,70,50,.35); }
.mn-back .mn-hole { left: auto; right: 33px; }

/* Dog-ear on the outer bottom corner */
.mn-ear { position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; z-index: 9; background: linear-gradient(315deg, #2a2d2c 0 49.5%, transparent 50%); }
.mn-ear::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0 50%, #d8d3c4 50.5%, #ebe6d8 75%, #cfc9b8); box-shadow: -2px -2px 5px rgba(0,0,0,.25); clip-path: polygon(0 0, 100% 0, 0 100%); rotate: 180deg; }
.mn-back .mn-ear { right: auto; left: 0; scale: -1 1; }

/* Coffee ring and other stains */
.mn-stain { position: absolute; z-index: 5; border-radius: 50%; mix-blend-mode: multiply; pointer-events: none; }
.mn-stain.coffee { width: 170px; height: 162px; border: 5px solid rgba(140,95,45,.22); box-shadow: inset 0 0 10px rgba(140,95,45,.18), 0 0 4px rgba(140,95,45,.12); background: radial-gradient(circle, rgba(160,120,60,.06), transparent 70%); }
.mn-stain.coffee::after { content: ""; position: absolute; inset: 14px -8px -6px 22px; border-radius: 50%; border: 2px solid rgba(140,95,45,.12); }
.mn-stain.thumb { width: 60px; height: 74px; border-radius: 48% 52% 45% 55%; background: repeating-radial-gradient(ellipse at 50% 60%, rgba(70,60,50,.1) 0 1.5px, transparent 1.5px 4px); filter: blur(.3px); }
.mn-crease { position: absolute; left: 0; right: 0; height: 3px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(0,0,0,.09) 60%, transparent); }
.mn-tape { position: absolute; z-index: 9; width: 120px; height: 34px; background: rgba(235,225,170,.45); box-shadow: 0 0 0 1px rgba(200,190,130,.25); backdrop-filter: brightness(1.02); }

/* ---------- Typed content ---------- */
.mn-page {
  position: absolute; left: 92px; top: 52px; right: 46px; bottom: 54px; z-index: 2;
  font-size: 15px; line-height: 1.33; hyphens: auto; -webkit-hyphens: auto;
  color: var(--type);
  text-shadow: 0 0 .6px rgba(0,0,0,.6);
  rotate: var(--skew, 0deg); translate: var(--shift, 0 0);
  display: flex; flex-direction: column;
}
.mn-live .mn-front .mn-page { filter: url(#mn-toner); }
/* Show-through of the printed side on the blank back of a sheet */
.mn-through { position: absolute; inset: 0; z-index: 1; transform: scaleX(-1); opacity: .032; filter: blur(.8px); pointer-events: none; }
.mn-through .copy { display: none; }
.mn-run { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 14px; }
.mn-run span:first-child { flex: 1; text-align: center; padding-left: 40px; }
.mn-folio { position: absolute; bottom: -30px; left: 0; right: 0; display: flex; justify-content: space-between; font-family: var(--f-sans); font-size: 10.5px; letter-spacing: .06em; color: #333; }
.mn h2, .mn h3 { font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: inherit; }
.mn h2 { font-size: 21px; margin: 4px 0 12px; }
.mn h3 { font-size: 14px; margin: 14px 0 6px; }
.mn p { margin: 0 0 8px; text-align: justify; }
.mn p + p { text-indent: 1.6em; }
.mn p.ni, .mn h3 + p { text-indent: 0; }
.mn ol, .mn ul { margin: 0 0 8px; padding-left: 1.4em; }
.mn li { margin-bottom: 3px; text-align: justify; }
.mn i, .mn em { font-style: italic; }
.mn sub { font-size: 70%; }

/* text column + margin column for handwritten notes */
.mn-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 26px; }
.mn-row > .mn-note { align-self: start; }
.mn-full { margin: 6px 0 10px; }
.mn-fig { margin: 6px 0 4px; }
.mn-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.mn-cap { font-size: 13px; line-height: 1.3; margin: 6px 0 12px; text-align: left; }
.mn-cap b { font-weight: 600; }
.mn-sp { flex: 1; }

/* Tables in the style of a 1970s handbook: rules, no boxes */
.mn table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.25; margin: 4px 0 10px; }
.mn caption { caption-side: top; text-align: center; font-size: 13.5px; font-weight: 600; padding-bottom: 6px; }
.mn thead th { font-weight: 600; text-align: left; vertical-align: bottom; padding: 4px 6px; border-bottom: 1px solid #222; }
.mn thead tr:first-child th { border-top: 1.6px solid #222; }
.mn tbody td { padding: 3px 6px; vertical-align: top; }
.mn tbody tr:first-child td { padding-top: 6px; }
.mn tbody tr:last-child td { padding-bottom: 6px; border-bottom: 1.6px solid #222; }
.mn td.c, .mn th.c { text-align: center; }
.mn td.r, .mn th.r { text-align: right; }
.mn .tn { font-size: 12px; line-height: 1.3; margin: -4px 0 10px; }
.mn .sans { font-family: var(--f-sans); }
.mn .box { border: 1.4px solid #222; padding: 10px 14px; margin: 6px 0 12px; }
.mn .box.warn { border-width: 3px; }
.mn .box h3 { margin-top: 0; }
.mn .sym { font-family: var(--f-sans); font-weight: 700; }

/* Typewritten insert page */
.mn-typed .mn-page { font-family: var(--f-type); font-size: 14px; line-height: 1.42; }
.mn-typed .mn-page p { text-align: left; }
.mn-typed .mn-page h2, .mn-typed .mn-page h3 { font-family: var(--f-type); letter-spacing: .02em; }
.mn-typed .mn-page table { font-size: 13px; }
.mn-typed .mn-page .step { display: grid; grid-template-columns: 34px minmax(0, 1fr); margin-bottom: 7px; }

/* ---------- Handwriting (margins only) ---------- */
.mn-note {
  position: relative; z-index: 4; display: block;
  font-family: var(--f-pen); font-size: 23px; line-height: .98; color: var(--pen-blue);
  rotate: var(--r, -2deg); translate: var(--t, 0 0);
  mix-blend-mode: multiply; text-shadow: none; filter: none;
  hyphens: none; text-align: left;
}
.mn-note.red { font-family: var(--f-red); color: var(--pen-red); font-size: 27px; line-height: .88; }
.mn-note.pencil { font-family: var(--f-pencil); color: var(--pencil); font-size: 25px; line-height: .9; opacity: .85; }
.mn-note.marker { font-family: var(--f-marker); color: var(--marker); font-size: 17px; line-height: 1.12; }
.mn-note.big { font-size: 30px; }
.mn-note .u { background: no-repeat 0 100% / 100% 6px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C20 2 40 5 60 3 S90 2 99 4' fill='none' stroke='%23b3221a' stroke-width='1.6'/%3E%3C/svg%3E"); padding-bottom: 2px; }
.mn-note.pt::before {
  content: ""; position: absolute; left: -24px; top: 6px; width: 22px; height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M21 8 C14 9 8 7 2 7 M6 3 L1.5 7 L6 11.5' fill='none' stroke='%231f3b8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mn-note.red.pt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M21 8 C14 9 8 7 2 7 M6 3 L1.5 7 L6 11.5' fill='none' stroke='%23b3221a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mn-note.boxed { border: 2px solid currentColor; border-radius: 6px 12px 5px 14px / 12px 6px 14px 5px; padding: 6px 8px 7px; }
.mn-note.warn::before {
  content: "!"; display: inline-grid; place-items: center; width: 24px; height: 22px; margin-right: 4px; vertical-align: -2px;
  font-family: var(--f-marker); font-size: 15px; color: currentColor;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1.5 L22.5 20.5 L1.5 20.3 Z' fill='none' stroke='%23b3221a' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  padding-top: 5px;
}
.mn-note.sign { font-size: 20px; opacity: .9; }

/* Free-placed notes (headers, footers, back pages): positioned in px on the face, never over the typed block */
.mn-free { position: absolute; z-index: 4; }

/* Marks on typed text that leave it readable */
.mn .hl { background: linear-gradient(176deg, transparent 8%, rgba(255,226,0,.5) 12% 88%, transparent 92%); mix-blend-mode: multiply; padding: 0 1px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mn .hl.g { background: linear-gradient(176deg, transparent 8%, rgba(120,235,110,.42) 12% 88%, transparent 92%); }
.mn .hl.p { background: linear-gradient(176deg, transparent 8%, rgba(255,120,200,.35) 12% 88%, transparent 92%); }
.mn .ul { background: no-repeat 0 100% / 100% 5px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='5' preserveAspectRatio='none'%3E%3Cpath d='M1 3 C25 1.5 50 4 75 2.5 S95 2 99 3.2' fill='none' stroke='%23b3221a' stroke-width='1.4'/%3E%3C/svg%3E"); padding-bottom: 1px; }
.mn .ul.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='5' preserveAspectRatio='none'%3E%3Cpath d='M1 3 C25 1.5 50 4 75 2.5 S95 2 99 3.2' fill='none' stroke='%231f3b8f' stroke-width='1.4'/%3E%3C/svg%3E"); }
.mn .circ { position: relative; white-space: nowrap; }
.mn .circ::after {
  content: ""; position: absolute; left: -7px; right: -7px; top: -4px; bottom: -4px; pointer-events: none; mix-blend-mode: multiply;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M58 3 C85 2 98 12 97 21 C96 33 70 38 47 37 C22 36 3 30 3 19 C4 8 26 3 52 4 C64 4 72 6 76 9' fill='none' stroke='%23b3221a' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.mn .circ.b::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M58 3 C85 2 98 12 97 21 C96 33 70 38 47 37 C22 36 3 30 3 19 C4 8 26 3 52 4 C64 4 72 6 76 9' fill='none' stroke='%231f3b8f' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.mn .tick { position: absolute; left: -52px; font-family: var(--f-pen); color: var(--pen-blue); font-size: 26px; line-height: 1; rotate: -6deg; mix-blend-mode: multiply; text-shadow: none; }
.mn .step { position: relative; }

/* Stamps */
.mn-stamp {
  position: absolute; z-index: 5; font-family: var(--f-sans); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(170,30,25,.78); border: 3px solid currentColor; border-radius: 4px; padding: 3px 10px; mix-blend-mode: multiply;
  -webkit-mask: var(--speck) 0 0 / 160px 160px, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  text-shadow: none;
}
.mn-stamp.ink { color: rgba(30,30,40,.82); }

/* ---------- Cover (card stock) ---------- */
.mn-cover { --paper: #b03a6a; }
.mn-cover .paper { background-image: var(--grain), var(--fibre), radial-gradient(ellipse at 70% 40%, rgba(255,255,255,.08), transparent 60%); }
.mn-cover .cv { position: absolute; inset: 0; z-index: 2; color: #f3d8b0; font-family: var(--f-sans); }
.mn-cover .cv svg { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; }
.mn-cover .cv h1 { position: absolute; right: 60px; top: 520px; margin: 0; text-align: right; font-family: var(--f-sans); font-weight: 700; font-size: 58px; line-height: .98; letter-spacing: -.01em; text-transform: lowercase; color: #f3d8b0; text-shadow: 0 0 1px rgba(0,0,0,.3); }
.mn-cover .cv .by { position: absolute; right: 62px; top: 800px; font-size: 15px; text-align: right; }
.mn-cover .cv .vol { position: absolute; right: 62px; top: 846px; font-size: 15px; letter-spacing: .08em; }
.mn-cover .cv .org { position: absolute; left: 0; right: 62px; bottom: 74px; font-size: 14px; text-align: right; letter-spacing: .02em; }
.mn-cover .cv .master { position: absolute; right: 70px; top: 930px; font-family: var(--f-sans); font-weight: 700; font-size: 46px; letter-spacing: -.02em; color: rgba(25,12,20,.82); rotate: -2deg; transform: scaleY(1.25); -webkit-mask: var(--speck) 0 0 / 120px 120px, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mn-cover .copy { --fade-k: .2; }

/* ---------- Index tabs ---------- */
.mn-tab {
  position: absolute; right: -34px; width: 40px; height: 118px; z-index: 1;
  border-radius: 0 8px 8px 0; cursor: pointer;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 8px), var(--tab, #e6d27a);
  background-image: var(--grain), linear-gradient(90deg, rgba(0,0,0,.18), transparent 8px);
  background-color: var(--tab, #e6d27a);
  box-shadow: 2px 2px 3px rgba(0,0,0,.35), inset -1px 0 0 rgba(255,255,255,.3);
  display: grid; place-items: center;
}
.mn-tab span { writing-mode: vertical-rl; font-family: var(--f-sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #1d1c1a; }
.mn-tab span b { font-family: var(--f-pen); font-size: 18px; letter-spacing: 0; font-weight: 700; color: var(--pen-blue); }
.mn-tabside.b .mn-tab { right: auto; left: -34px; border-radius: 8px 0 0 8px; background-image: var(--grain), linear-gradient(270deg, rgba(0,0,0,.18), transparent 8px); box-shadow: -2px 2px 3px rgba(0,0,0,.35); }
.mn-tabside.b .mn-tab span { writing-mode: vertical-rl; rotate: 180deg; }
/* tabs stick out of the sheet, so the face must not clip them */
.mn-tabholder { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.mn-tabholder > .mn-tabside { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mn-tabholder > .mn-tabside.b { transform: rotateY(180deg); }
.mn-tabholder .mn-tab { pointer-events: auto; }

/* ---------- Hint bar ---------- */
.mn-hint {
  position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  font-family: var(--f-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(230,230,225,.6);
  white-space: nowrap; pointer-events: none;
}
.mn-hint kbd { font-family: inherit; border: 1px solid rgba(230,230,225,.4); border-radius: 3px; padding: 0 5px; margin: 0 2px; }

/* ---------- Shift report (js/report.js): one loose OPS-7 form sheet ---------- */
.mn.rp { z-index: 70; cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
/* A meltdown ends the shift with the room lit red behind the report */
.mn.rp.melt { background: radial-gradient(ellipse at 50% 50%, rgba(120,10,0,.55), rgba(10,0,0,.88)); animation: rp-redpulse 1.4s ease-in-out infinite alternate; }
@keyframes rp-redpulse { from { background-color: rgba(60,0,0,.2); } to { background-color: rgba(160,10,0,.25); } }
.rp-wrap { position: relative; flex: none; translate: 0 40px; rotate: 1.5deg; transition: translate .5s cubic-bezier(.2,.8,.25,1), rotate .5s cubic-bezier(.2,.8,.25,1); }
.mn.rp.shown .rp-wrap { translate: 0 0; rotate: -.6deg; }
.rp-sheet { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; transform-origin: 0 0; box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.45); }
.rp .mn-page { filter: url(#rp-toner); }
.rp .mn-page h3 { margin-top: 20px; }
.rp-title { font-size: 30px !important; letter-spacing: .12em !important; margin: 10px 0 16px !important; }
/* Form fields: printed labels in sans, typed entries */
.mn table.rp-fields { font-size: 14px; margin: 0 0 4px; }
.rp-fields th { font-family: var(--f-sans); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-align: left; width: 120px; padding: 7px 8px 3px 0; vertical-align: bottom; }
.mn .rp-fields td { border-bottom: 1px solid #222 !important; padding: 7px 10px 2px !important; vertical-align: bottom; }
.rp-fields .mn-note { font-size: 26px; line-height: .8; }
.rp-perf td:first-child { width: 58%; }
.rp-perf .rp-val { text-align: right; font-weight: 700; }
.rp-perf .rp-mark { width: 130px; padding-left: 18px; }
.rp-perf .rp-mark .mn-note { font-size: 26px; line-height: .8; }
.rp-perf .rp-mark .mn-note.pt::before { left: -22px; }
.rp-grade-row { display: grid; grid-template-columns: minmax(0, 1fr) 230px; column-gap: 24px; align-items: start; }
.mn table.rp-scale { font-size: 12.5px; margin-bottom: 6px; }
.rp-grade { position: relative; height: 210px; margin-top: 12px; border: 1.6px solid #222; display: grid; place-items: center; }
.rp-grade::before { content: "GRADE"; position: absolute; left: 8px; top: 5px; font-family: var(--f-sans); font-weight: 700; font-size: 11px; letter-spacing: .1em; }
.rp-letter {
  position: relative; z-index: 4; font-family: var(--f-red); font-size: 190px; line-height: .7; color: var(--pen-red);
  mix-blend-mode: multiply; text-shadow: none; rotate: -6deg; translate: 0 14px; padding: 18px 34px 8px;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M60 5 C88 6 97 30 95 52 C93 80 70 96 46 95 C20 94 4 74 5 48 C6 22 26 6 50 6 C64 6 75 10 82 18' fill='none' stroke='%23b3221a' stroke-width='2.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.rp-best { position: absolute !important; right: -16px; bottom: -40px; font-size: 26px !important; }
.rp-remarks {
  position: relative; height: 150px; padding: 4px 6px 0;
  background: repeating-linear-gradient(180deg, transparent 0 37px, #2a2a2a 37px 38px);
}
.rp-remarks .rp-remark { font-size: 32px; line-height: 38px; display: block; }
.rp-remarks .rp-sign { position: absolute; right: 20px; bottom: 6px; font-size: 26px; }
.rp-stamp { font-size: 26px; line-height: 1.1; text-align: center; padding: 6px 16px; border-width: 4px; }
.rp-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; max-width: 96vw; }
.rp-submit { display: flex; align-items: center; gap: 10px; font-family: var(--f-sans); }
.rp-name {
  width: 190px; padding: 10px 12px; font-family: var(--f-type); font-size: 17px; color: #111;
  background: #f4f1e6; border: 1px solid #000; border-radius: 4px; box-shadow: inset 0 2px 3px rgba(0,0,0,.25);
}
.rp-name:focus-visible { outline: 3px solid #ffb000; outline-offset: 2px; }
.rp-send { cursor: pointer; font-family: var(--f-sans); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #111; background: linear-gradient(180deg, #ffd34d, #e8a915); border: 1px solid #000; border-radius: 5px; padding: 11px 16px; box-shadow: 0 2px 0 #6b4a00, inset 0 1px 0 rgba(255,255,255,.6); }
.rp-send:disabled { opacity: .5; cursor: default; }
.rp-send:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rp-status { min-width: 0; max-width: 300px; font-size: 13px; line-height: 1.25; color: #e8e6dc; }
.rp-submit.done .rp-name, .rp-submit.done .rp-send { display: none; }
.rp-board { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ffd34d; text-decoration: none; border-bottom: 1px solid currentColor; }
.rp-versus { font-family: var(--f-sans); font-size: 15px; font-weight: 700; color: #ffd34d; }
.rp-versus:empty { display: none; }
.rp-share {
  font: 700 14px var(--f-sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  padding: 9px 16px; border-radius: 4px; color: #1d1c1a; border: 1px solid #000;
  background: linear-gradient(180deg, #ffd34d, #e8a915); box-shadow: 0 2px 0 #6b4a00, 0 3px 8px rgba(0,0,0,.5);
}
.rp-share:active { translate: 0 2px; box-shadow: 0 0 0 #6b4a00; }
.rp-share:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rp-next {
  flex: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; letter-spacing: .14em; text-transform: uppercase;
  color: #111; background: linear-gradient(180deg, #f6f5ef, #d9d7cc); border: 1px solid #000; border-radius: 6px;
  padding: 12px 26px; box-shadow: 0 3px 0 #555, 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 #fff;
}
.rp-next:hover { background: linear-gradient(180deg, #fffef8, #e4e2d7); }
.rp-next:active { translate: 0 2px; box-shadow: 0 1px 0 #555, 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 #fff; }
.rp-next:focus-visible { outline: 3px solid #ffb000; outline-offset: 3px; }
.rp-next kbd { font-family: inherit; font-size: 11px; letter-spacing: .08em; border: 1px solid #555; border-radius: 3px; padding: 1px 5px; color: #444; }

@media (prefers-reduced-motion: reduce) {
  .rp-wrap { transition-duration: .01s; }
  .mn.rp.melt { animation: none; }
  .mn, .mn-binder, .mn-sheet { transition-duration: .01s; }
  .mn-sheet .shade::after { animation: none !important; }
}