/* MICROSCOPE — STEP 9 layout: a single 1970s research-instrument
		   console. Left ~60% = a big rectangular CRT bezel whose black screen
		   holds the (still circular) observation field. Right ~40% = a green
		   CRT log (top) and a control panel (bottom: FOCUS dial + a plain
		   microscope diagram). Flat CSS, dark casing, no metal texture, no
		   strong glow. The field visuals, creature, focus logic and 5-stage
		   text are all unchanged — only the shell around them is new. */
		*, *::before, *::after { box-sizing: border-box; }

		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
			background: #0b0a09;
		}
		body {
			color: #d8d2c4;
			font-family: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
			overflow: hidden;
		}

		/* ---- the instrument -------------------------------------------- */
		.console {
			height: 100svh;
			display: flex;
			gap: clamp(0.5rem, 1.3vw, 1.3rem);
			padding: clamp(0.5rem, 1.3vw, 1.3rem);
			background: radial-gradient(130% 100% at 28% -10%, #26241f, #1a1917 58%, #121110 100%);
		}
		.console__left  { flex: 0 0 60%; min-width: 0; display: flex; }
		.console__right {
			flex: 1 1 40%;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: clamp(0.5rem, 1.1vw, 1rem);
		}

		/* ---- CRT bezel (shared) -------------------------------------- */
		.crt {
			background: linear-gradient(#2b2823, #211f1b 45%, #191713);
			border-radius: 9px;
			padding: clamp(0.55rem, 1.3vw, 1.2rem);
			box-shadow:
				inset 0 1px 0 rgba(255, 255, 255, 0.04),
				inset 0 0 0 1px rgba(0, 0, 0, 0.55),
				0 2px 6px rgba(0, 0, 0, 0.5);
		}
		.crt__screen {
			position: relative;
			width: 100%;
			height: 100%;
			container-type: size;
			background: #050505;
			border-radius: 13px;
			overflow: hidden;
			box-shadow: inset 0 0 55px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.8);
		}
		.crt--scope { flex: 1; display: flex; }

		/* the round observation field, centred in the left black screen —
		   nearly fills it; the area outside the circle is the screen's black. */
		.scope {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: min(94cqw, 94cqh);
			height: min(94cqw, 94cqh);
		}

		/* The illuminated field — a warm tungsten lamp behind the slide: a
		   bright ivory centre falling off through a WIDE, soft gradient to
		   black. No field stop, no rim line — the edge is just blur. The lit
		   spot is a touch off-centre and the fall-off is uneven, and there is
		   a little dust on the slide. */
		.scope__field {
			position: absolute;
			inset: 0;
			border-radius: 50%;
			overflow: hidden;
			background:
				/* dust on the slide — a few sharp dark specks + softer motes,
				   dark so they read against the bright field (no rings) */
				radial-gradient(circle at 33% 24%, rgba(58, 52, 40, 0.30) 0, transparent 0.42%),
				radial-gradient(circle at 67% 30%, rgba(58, 52, 40, 0.24) 0, transparent 0.4%),
				radial-gradient(circle at 72% 63%, rgba(58, 52, 40, 0.20) 0, transparent 0.44%),
				radial-gradient(circle at 45% 76%, rgba(58, 52, 40, 0.16) 0, transparent 0.36%),
				radial-gradient(circle at 25% 55%, rgba(64, 58, 46, 0.13) 0, transparent 0.32%),
				radial-gradient(circle at 57% 43%, rgba(64, 58, 46, 0.10) 0, transparent 0.28%),
				radial-gradient(circle at 81% 47%, rgba(64, 58, 46, 0.10) 0, transparent 0.26%),
				radial-gradient(circle at 39% 45%, rgba(64, 58, 46, 0.08) 0, transparent 0.24%),
				radial-gradient(1.8% 1.8% at 41% 61%, rgba(58, 52, 40, 0.10) 0, transparent 100%),
				radial-gradient(1.4% 1.4% at 64% 71%, rgba(58, 52, 40, 0.09) 0, transparent 100%),
				radial-gradient(2.2% 2.2% at 55% 22%, rgba(58, 52, 40, 0.07) 0, transparent 100%),
				/* uneven brightening toward one side of the lit spot */
				radial-gradient(50% 46% at 44% 41%, rgba(255, 253, 246, 0.5), transparent 72%),
				/* the field itself: warm ivory centre, a GENTLE fall-off — stays
				   lit well out, and the darkening is eased toward the very rim */
				radial-gradient(closest-side circle at 49% 48%,
					#efe9db 0%,
					#ece4d4 34%,
					#e0d7c0 54%,
					#cdc2a8 66%,
					#ada285 76%,
					#847c66 84%,
					#4a4536 91%,
					#1c1912 97%,
					#000 100%),
				#000;
		}

		/* a whisper of optical / sensor grain over the whole field (above the
		   creature) — static, faint, dark so it reads on the bright field. */
		.scope__field::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			border-radius: 50%;
			pointer-events: none;
			opacity: 0.5;
			mix-blend-mode: multiply;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
			background-size: 190px 190px;
		}

		/* STEP 6 — the artificial creature, driven by the shared
		   original-creature-engine.js (used unchanged).
		   STEP 7 — the specimen fills the field and is clipped exactly at the
		   circle by .scope__field's round overflow; its roam box maps 1:1 onto
		   the field, so it sits inside the circle and never leaves it. Centred.

		   FIELD CURVATURE — the specimen is painted to a stack of concentric
		   canvas layers (built in the script). Each layer is masked to one
		   radial ring and comes to focus at its own point along the dial, so
		   the sharp zone is a ring that sweeps outward as the dial turns and
		   the blur grades smoothly with radius — not a centre/edge switch. */
		.scope__lens {
			position: absolute;
			inset: 0;
			pointer-events: none;
			/* HARD circular clip. A blurred child can bleed past an ancestor's
			   overflow:hidden + border-radius; clip-path can't be escaped, so
			   nothing of the specimen is ever painted outside the field circle. */
			clip-path: circle(50% at 50% 50%);
			overflow: hidden;
			border-radius: 50%;
		}
		.scope__lens canvas {
			position: absolute;
			inset: 0;
			width: 100%;    /* fills .scope__field exactly; the round clip does the rest */
			height: 100%;
		}

		/* no field stop — just a soft, uneven extra darkening pulled to one
		   side, so the round edge isn't a perfectly even blur. No rim, no ring. */
		.scope__field::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 2;
			border-radius: 50%;
			pointer-events: none;
			mix-blend-mode: multiply;
			background: radial-gradient(82% 82% at 55% 58%,
				rgba(0, 0, 0, 0) 58%,
				rgba(0, 0, 0, 0.1) 85%,
				rgba(0, 0, 0, 0.26) 100%);
		}

		/* ---- unit info: small light-grey type INSIDE the left black screen */
		.unitinfo {
			position: absolute;
			z-index: 3;
			left: clamp(0.6rem, 3cqw, 1.6rem);
			top: clamp(0.6rem, 3cqh, 1.6rem);
			margin: 0;
			font-family: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
			font-size: clamp(0.5rem, 1.6cqh, 0.72rem);
			line-height: 1.65;
			letter-spacing: 0.14em;
			white-space: pre;
			color: rgba(233, 231, 224, 0.44);
			pointer-events: none;
			user-select: none;
			-webkit-user-select: none;
		}

		/* ---- right column: observation-record panel (top) + controls (bottom)
		   STEP 15 — no longer a green CRT. It is an "observation record" in the
		   same old-instrument language as the microscope: a very dark bistre /
		   charcoal card that naps with the casing, keeping only the panel's
		   frame + depth. No green, no glow, no scanlines, no noise. */
		.crt--log { flex: 1 1 auto; min-height: 0; }
		.crt--log .crt__screen {
			background: linear-gradient(#1a1712, #141110);
		}

		.panel--controls {
			flex: 0 0 auto;
			height: clamp(8rem, 27vh, 13rem);
			display: flex;
			align-items: stretch;
			gap: clamp(0.6rem, 1.4vw, 1.2rem);
			background: linear-gradient(#231f1b, #191612);
			border-radius: 9px;
			padding: clamp(0.7rem, 1.4vw, 1.15rem);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
		}
		.diagram {
			flex: 1;
			min-width: 0;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.diagram svg { width: 100%; height: 100%; }
		.diagram-fill { fill: #221f1b; stroke: #948b76; stroke-width: 1.4; stroke-linejoin: round; }
		.diagram-line { fill: none; stroke: #948b76; stroke-width: 1.4; stroke-linecap: round; }
		.diagram-leader { stroke: #6e6656; stroke-width: 0.7; }
		.diagram-label { fill: #8a8170; font-family: inherit; font-size: 6px; letter-spacing: 0.06em; }

		/* ---- focus dial (operation logic unchanged) --------------------
		   Now a control on the lower-right panel instead of a field corner. */
		.focus {
			position: relative;
			align-self: center;
			flex: 0 0 auto;
			width: clamp(66px, 10.5vw, 118px);
			height: clamp(66px, 10.5vw, 118px);
		}

		.focus__arc {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			overflow: visible;
		}
		.focus__arc-track,
		.focus__arc-head {
			fill: none;
			stroke: rgba(255, 255, 255, 0.3);
			stroke-width: 2.2;
			stroke-linecap: round;
			stroke-linejoin: round;
		}
		/* graduated focus-travel scale — the fixed skirt marking the knob
		   turns against; the arrow is the "toward sharp" direction. */
		.focus__arc-tick { stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.6; stroke-linecap: round; }
		.focus__arc-tick--long { stroke-width: 2.2; }
		.focus__arc-cap,
		.focus__arc-inf {
			fill: rgba(255, 255, 255, 0.34);
			font-family: inherit;
			text-anchor: middle;
		}
		.focus__arc-cap { font-size: 10px; letter-spacing: 0.18em; }
		.focus__arc-inf { font-size: 13px; }

		.focus__dial {
			position: absolute;
			left: 17%;
			top: 17%;
			right: 17%;
			bottom: 17%;
			border-radius: 50%;
			background: radial-gradient(circle at 38% 32%, #3a3a3a, #17171a 55%, #060606 100%);
			box-shadow:
				inset 0 0 0 1px rgba(255, 255, 255, 0.07),
				inset 0 2px 3px rgba(255, 255, 255, 0.05),
				inset 0 -3px 5px rgba(0, 0, 0, 0.65),
				0 1px 2px rgba(0, 0, 0, 0.5);
			cursor: grab;
			touch-action: none;
			user-select: none;
			-webkit-user-select: none;
		}
		.focus__dial:active { cursor: grabbing; }
		.focus__dial:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: 3px; }

		.focus__notch {
			position: absolute;
			left: 50%;
			top: 9%;
			width: 2px;
			height: 24%;
			background: rgba(255, 255, 255, 0.4);
			transform: translateX(-50%);
			border-radius: 1px;
			pointer-events: none;
		}

		/* ---- OBSERVATION LOG (STEP 15): a quiet record, not a monitor.
		   Header + counter are small fixed-pitch type like MICROSCOPE UNIT 01
		   on the left; the recorded lines are unbleached / pale ash-white and
		   are never boxed. Each keeps its generous leading. On appearance a
		   line just quietly gains brightness; once shown it stays. */
		.results {
			position: absolute;
			inset: 0;
			z-index: 2;
			display: flex;
			flex-direction: column;
			padding: clamp(0.9rem, 2.6cqw, 1.7rem);
			pointer-events: none;
			overflow: hidden;
		}
		.log__head {
			margin: 0 0 0.55em;
			font-family: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
			font-size: clamp(0.52rem, 1.7cqh, 0.74rem);
			letter-spacing: 0.16em;
			color: rgba(233, 231, 224, 0.5);
		}
		.log__count {
			margin: 0 0 1.5em;
			font-family: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
			font-size: clamp(0.5rem, 1.6cqh, 0.7rem);
			letter-spacing: 0.14em;
			color: rgba(233, 231, 224, 0.36);
		}
		.results__list {
			flex: 1;
			min-height: 0;
		}
		.results__stage {
			/* STEP 15.1 — ~15% smaller and a touch lighter, so the five lines
			   read as accumulated observations, not web body copy. The generous
			   space BETWEEN lines is kept. */
			margin: 0 0 clamp(0.85rem, 3cqh, 1.35rem);
			font-family: "Helvetica Neue", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Arial, sans-serif;
			font-size: clamp(0.76rem, 2.9cqh, 1.09rem);
			font-weight: 300;
			line-height: 1.85;
			letter-spacing: 0.02em;
			color: rgba(235, 232, 224, 0.72);
			text-wrap: pretty;
		}
		/* the closing line, set as two lines. STEP 15.3 — the SECOND line is
		   the conclusion, not a record: ~28% larger than the body (the first
		   line stays body size), with USOHONTO a little heavier. Its leading
		   is pulled in so the gap between the two lines stays as it was. No
		   glow, no rule, no box. */
		.log__final {
			font-size: 1.28em;
			line-height: 1.72;
		}
		.log__mark {
			color: rgba(246, 244, 238, 0.94);
			font-weight: 460;
			letter-spacing: 0.06em;
		}

		/* STEP 10/15 — lines 2–5 hold their space from the start; on reveal
		   they quietly rise in brightness (opacity), then stay. */
		.results__stage--2,
		.results__stage--3,
		.results__stage--4,
		.results__stage--5 {
			opacity: 0;
			transition: opacity 1.6s ease;
		}
		.results__stage.is-shown { opacity: 1; }

		/* ---- narrow screens: stack the console (left over right) -------- */
		@media (max-width: 56rem), (max-aspect-ratio: 0.92/1) {
			.console { flex-direction: column; }
			.console__left { flex: 0 0 48svh; }
			.console__right { flex: 1 1 auto; min-height: 0; }
			.crt--log { min-height: 0; }
			.panel--controls { height: clamp(6rem, 17svh, 9rem); }
		}

		/* ---- phone only (<= 600px): the observation record drops its two
		   fixed-pitch labels (OBSERVATION LOG / OBSERVATION n / 05). The
		   vertical space they held is given back to the five Japanese lines:
		   the list becomes a full-height column that distributes the five
		   stages evenly between its top and bottom edge, so every stage is
		   shown in full inside the panel AT FULL TEXT SIZE, with no clipping
		   on any phone height. The type size itself is unchanged. PC
		   (> 600px) is not touched. */
		@media (max-width: 600px) {
			.results { padding: clamp(0.55rem, 2.3vw, 0.85rem) clamp(0.7rem, 3.4vw, 1.05rem); }
			.log__head,
			.log__count { display: none; }
			.results__list {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.results__stage { margin-bottom: 0; line-height: 1.6; }
			.log__final { line-height: 1.55; }
		}

		/* ---- STEP 10 — 非常口 / EXIT ----------------------------------
		   An old induction-light fixture on the wall of the dark room, in
		   the far bottom-right corner, OUTSIDE the instrument — it is not
		   docked inside any panel. Old-facility hardware, not a web
		   button: a flat dark-green plate with a hard border, four corner
		   screws, a crude running-figure pictogram and the word EXIT.
		   It is clearly there in the dark but never brightly lit — a low
		   green backlight, and only a faint green haze leaking around it.
		   Hover / focus lifts it a little. No pulsing, no animation. */
		.exitsign {
			position: fixed;
			right: clamp(10px, 1.4vw, 18px);
			bottom: clamp(10px, 1.4vw, 18px);
			z-index: 50;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px 11px 6px 9px;
			white-space: nowrap;
			text-decoration: none;
			border-radius: 1px;
			color: #74c091;
			background:
				radial-gradient(2px 2px at 5px 5px, rgba(0, 0, 0, 0.55) 55%, transparent 60%),
				radial-gradient(2px 2px at calc(100% - 5px) 5px, rgba(0, 0, 0, 0.55) 55%, transparent 60%),
				radial-gradient(2px 2px at 5px calc(100% - 5px), rgba(0, 0, 0, 0.55) 55%, transparent 60%),
				radial-gradient(2px 2px at calc(100% - 5px) calc(100% - 5px), rgba(0, 0, 0, 0.55) 55%, transparent 60%),
				linear-gradient(#123720, #0d2917);
			border: 1px solid #2f5c3d;
			box-shadow:
				0 0 0 1px rgba(0, 0, 0, 0.55),
				0 0 14px 2px rgba(70, 180, 110, 0.13),
				0 0 5px rgba(70, 180, 110, 0.20),
				inset 0 0 11px rgba(80, 190, 120, 0.10);
			opacity: 0.9;
			transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
		}
		.exitsign:hover,
		.exitsign:focus-visible {
			opacity: 1;
			color: #a6e3bf;
			border-color: #3f7f52;
			box-shadow:
				0 0 0 1px rgba(0, 0, 0, 0.55),
				0 0 20px 3px rgba(95, 210, 140, 0.22),
				0 0 8px rgba(95, 210, 140, 0.28),
				inset 0 0 13px rgba(110, 220, 150, 0.16);
			outline: none;
		}
		.exitsign__pict {
			width: 30px;
			height: 20px;
			flex: 0 0 auto;
			display: block;
			fill: none;
			stroke: currentColor;
			stroke-width: 1.6;
			stroke-linecap: round;
			stroke-linejoin: round;
		}
		.exitsign__pict .exitsign__fig { fill: currentColor; stroke: none; }
		.exitsign__word {
			font-family: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
			font-size: 11px;
			font-weight: 600;
			letter-spacing: 0.22em;
			padding-right: 0.06em;
		}
		@media (prefers-reduced-motion: reduce) {
			.exitsign { transition: none; }
		}