/**
 * M2 Unified Login — "Simpler" skin, stage design 7.0: THE LOCK SCREEN
 *
 * Clean-room sheet generated from DESIGN-LOCK.md — change that document and
 * regenerate rather than patching selectors here. Budget: 30 KB.
 *
 * The login is M2//OS's own lock screen. The clock is the hero, the fields
 * float on the OS's live sky (the Deep Field program at a lock-screen camera,
 * m2ul-login-lock.js), the status word lives in a status bar, and one
 * "Lands in" disclosure holds the two doors and the classic destinations.
 * There is no card: the veil under the column is the legibility floor.
 *
 * This sheet loads ONLY while stage_design = lock. The markup it serves is the
 * shared Simpler stage — every id, data-m2ul-* hook, view class and form
 * contract is the same one the LAGOON and SEAM sheets serve — plus the lock
 * chrome (.m2ul-lock-*). The root's attributes drive everything:
 *   data-side    = os | game
 *   data-view    = login | lost | rp | verify | held
 *   data-phase   = idle | error | align | retract | open
 *   data-classic = on | off           the "Lands in" disclosure is open
 *   data-game-mobile = hold | ready   M2 WORLD withheld from the port
 */

/* =========================================================================
   Root, palette (os.css + world.css values) and the rhythm scale
   ========================================================================= */

.m2ul-simpler {
	/* Safari paints autofill ink black unless told the room is dark */
	color-scheme: dark;

	/* the OS spine — os.css --bg / --ink / --muted */
	--lock-bg: #030309;
	--lock-ink: #E9EEFA;
	--lock-soft: rgba(214, 226, 246, 0.86);
	--lock-muted: rgba(186, 198, 222, 0.72);
	--lock-label: rgba(214, 226, 246, 0.84);
	--lock-glass: rgba(9, 11, 24, 0.55);
	--lock-glass-solid: #0B0E1C;         /* autofill inset — must be opaque */
	--lock-rim: rgba(176, 212, 255, 0.17);
	--lock-rim-strong: rgba(176, 212, 255, 0.3);
	--lock-sheet: rgba(11, 13, 26, 0.94);
	--lock-bad: #FF7A6B;
	--lock-bad-ink: #FFB9AF;
	--lock-ok: #A7EFD2;
	--lock-gold: #E0B264;                /* the boot mark's 2 */

	/* M2//OS armed: Deep Field cyan */
	--lock-ac: #3AD0FF;
	--lock-ac-ink: #04202B;
	--lock-ring: rgba(58, 208, 255, 0.15);
	--lock-key-grad: linear-gradient(180deg, #D6F3FF 0%, #8FD6F1 100%);
	--lock-key-grad-open: linear-gradient(180deg, #EAFAFF 0%, #A9E4F8 100%);
	--lock-key-shadow: 0 14px 34px -14px rgba(58, 208, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);

	/* faces — the OS's own, so the boot's type gate is already warm */
	--lock-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--lock-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* the one-viewport scale — wound in by the open disclosure and the panels */
	--lock-bar-h: 46px;
	--lock-foot-h: 64px;
	--lock-time: clamp(64px, 15.5vh, 140px);
	--lock-gap-clock: clamp(24px, 8vh, 76px);
	--lock-gap-col: clamp(16px, 5vh, 44px);
	--lock-gap-field: clamp(10px, 1.6vh, 14px);
	--lock-gap-key: clamp(8px, 1.4vh, 12px);
	--lock-clock-h: calc(var(--lock-time) * 0.95 + 38px);
	--lock-reserve: calc(var(--lock-bar-h) + var(--lock-gap-clock) + var(--lock-clock-h) + var(--lock-gap-col) + var(--lock-foot-h));

	position: relative;
	background: var(--lock-bg);
	color: var(--lock-ink);
	font-family: var(--lock-sans);
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

/* M2 WORLD armed: guild gold (world.css) */
.m2ul-simpler[data-side="game"] {
	--lock-ac: #E8B840;
	--lock-ac-ink: #211605;
	--lock-ring: rgba(232, 184, 64, 0.16);
	--lock-glass: rgba(24, 16, 9, 0.6);
	--lock-glass-solid: #16100A;
	--lock-rim: rgba(232, 184, 64, 0.24);
	--lock-rim-strong: rgba(232, 184, 64, 0.4);
	--lock-sheet: rgba(24, 16, 9, 0.95);
	--lock-soft: rgba(240, 232, 216, 0.88);
	--lock-label: rgba(232, 214, 184, 0.84);
	--lock-key-grad: linear-gradient(180deg, #F7E3B4 0%, #E2BE72 100%);
	--lock-key-grad-open: linear-gradient(180deg, #FCF0D2 0%, #EFD08D 100%);
	--lock-key-shadow: 0 14px 34px -14px rgba(232, 184, 64, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* The clock steps back under every panel, and further while a member is
   choosing — the open sheet takes the foot's reserve too, so the whole list
   fits a 900px desk without the column having to scroll. */
.m2ul-simpler:not([data-view="login"]) {
	--lock-time: clamp(48px, 9vh, 84px);
	--lock-gap-clock: clamp(14px, 3.6vh, 34px);
	--lock-gap-col: clamp(12px, 3vh, 26px);
}

.m2ul-simpler[data-classic="on"] {
	--lock-time: clamp(40px, 7vh, 64px);
	--lock-gap-clock: clamp(12px, 2.6vh, 24px);
	--lock-gap-col: clamp(12px, 2.6vh, 22px);
	--lock-foot-h: 16px;
}

.m2ul-simpler *,
.m2ul-simpler *::before,
.m2ul-simpler *::after {
	box-sizing: border-box;
}

.m2ul-simpler a {
	color: var(--lock-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(214, 226, 246, 0.4);
}

.m2ul-simpler a:hover {
	color: #fff;
}

.m2ul-simpler :focus-visible {
	outline: 2px solid var(--lock-ac);
	outline-offset: 2px;
	border-radius: 6px;
}

/* While the key turns, the whole stage reads busy */
.m2ul-simpler[data-phase="align"],
.m2ul-simpler[data-phase="retract"],
.m2ul-simpler[data-phase="open"] {
	cursor: progress;
}

/* =========================================================================
   The room: stage, sky, veil
   ========================================================================= */

.m2ul-sim-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--lock-bar-h) 0 0;
	overflow: hidden;
}

.m2ul-sim-hero {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* The washes are the first paint and the forever fallback: Deep Field's ramp
   with the night planet's limb at the clock's foot (os.css), and the guild's
   dusk burning down to coral over near-black ground (world.css). The canvas
   fades in over them; m2ul-aurora-dead leaves them standing. */
.m2ul-sim-hero-bg {
	position: absolute;
	inset: 0;
	transition: opacity 0.9s ease;
}

.m2ul-sim-hero-bg--os {
	background:
		radial-gradient(160% 116% at 50% 150%, transparent 94%, rgba(58, 208, 255, 0.16) 98.5%, transparent 100%),
		radial-gradient(160% 110% at 50% 150%, #0E1838 0%, #060A1C 22%, #020309 84%, #020309 99.4%, rgba(150, 228, 255, 0.6) 99.6%, transparent 100%),
		radial-gradient(56% 50% at 72% 22%, rgba(58, 208, 255, 0.14), transparent 70%),
		radial-gradient(50% 46% at 16% 34%, rgba(154, 92, 255, 0.13), transparent 70%),
		linear-gradient(180deg, #02020A 0%, #060818 38%, #0A0C24 64%, #05040F 100%);
}

.m2ul-sim-hero-bg--game {
	background:
		linear-gradient(180deg, transparent 79%, #120B05 79%, #060402 100%),
		radial-gradient(50% 20% at 50% 79%, rgba(255, 140, 90, 0.22), transparent 100%),
		linear-gradient(180deg, #08081A 0%, #1B1331 38%, #47203B 60%, #8E3F44 73%, #D9744F 79%, #D9744F 100%);
}

.m2ul-simpler[data-side="os"] .m2ul-sim-hero-bg--game,
.m2ul-simpler[data-side="game"] .m2ul-sim-hero-bg--os {
	opacity: 0;
}

/* REVEAL CONTRACT: the canvas is 0 until the script's first frame stamps
   html.m2ul-aurora-live; on this stage it IS the sky, so the ceiling is 1.
   m2ul-aurora-dead (or no class at all) leaves the washes standing forever. */
.m2ul-sim-hero-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
}

@keyframes m2ulLockCanvasIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

html.m2ul-aurora-live .m2ul-sim-hero-canvas {
	animation: m2ulLockCanvasIn 1.2s ease forwards;
}

html.m2ul-aurora-dead .m2ul-sim-hero-canvas {
	display: none;
}

/* THE WAKE (render_lock_wake): until the sky's first frame, its bail or a
   1.2s cap, the room stays dark and every rise holds at its first frame. */
html.m2ul-sky-wait .m2ul-simpler[data-stage="lock"] * {
	animation-play-state: paused !important;
}

html.m2ul-sky-wait .m2ul-simpler[data-stage="lock"] .m2ul-sim-hero-bg {
	opacity: 0;
}

@keyframes m2ulLockWake {
	from { opacity: 0; }
}

/* The legibility floor: a soft pool under the column and bands top and
   bottom. Restrained on purpose — the sky is the argument of the page. */
.m2ul-sim-hero-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		radial-gradient(30% 44% at 50% 62%, rgba(3, 4, 10, 0.42), rgba(3, 4, 10, 0) 100%),
		linear-gradient(180deg, rgba(2, 3, 8, 0.42), rgba(2, 3, 8, 0) 22%, rgba(2, 3, 8, 0) 74%, rgba(2, 3, 8, 0.5));
	transition: opacity 1s ease;
}

.m2ul-simpler[data-side="game"] .m2ul-sim-hero-veil {
	background:
		radial-gradient(36% 52% at 50% 60%, rgba(8, 5, 3, 0.76), rgba(8, 5, 3, 0) 100%),
		linear-gradient(180deg, rgba(4, 3, 6, 0.4), rgba(4, 3, 6, 0) 22%, rgba(4, 3, 6, 0) 74%, rgba(4, 3, 6, 0.55));
}

/* The room brightens as the door opens — the last frame is the sky */
.m2ul-simpler[data-phase="open"] .m2ul-sim-hero-veil {
	opacity: 0;
}

/* The jam's red breath, legible at a glance over the shader's own flush */
.m2ul-sim-hero-veil::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(62% 52% at 50% 50%, rgba(220, 60, 60, 0.13), transparent 72%);
	transition: opacity 0.9s ease;
}

.m2ul-simpler[data-phase="error"] .m2ul-sim-hero-veil::before {
	opacity: 1;
	transition-duration: 0.12s;
}

/* =========================================================================
   The status bar — where an OS keeps status
   ========================================================================= */

.m2ul-lock-bar {
	animation: m2ulLockWake 0.6s ease 0.2s backwards;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	height: var(--lock-bar-h);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 24px;
	font-family: var(--lock-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lock-label);
	transition: opacity 0.5s ease;
}

.m2ul-simpler[data-phase="open"] .m2ul-lock-bar {
	opacity: 0;
	transition-delay: 0.35s;
}

/* The mark — the boot wordmark's own two-tone: pale M, gold 2 */
.m2ul-sim-brand {
	display: flex;
	align-items: baseline;
}

.m2ul-sim-brand-mark {
	font-family: var(--lock-sans);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: #F0E3C8;
}

.m2ul-sim-brand-mark::first-letter {
	color: #F0E3C8;
}

.m2ul-lock-sep {
	width: 1px;
	height: 14px;
	background: rgba(176, 212, 255, 0.2);
}

/* Only the armed world is named — one word, not a pair of policies */
.m2ul-lock-world-name {
	display: none;
}

.m2ul-simpler[data-side="os"] .m2ul-lock-world-name--os,
.m2ul-simpler[data-side="game"] .m2ul-lock-world-name--game {
	display: inline;
}

/* The gate: the same [data-m2ul-status] words the dials engraved, now in
   the bar's right end. Only the armed side's word shows; armed vs dormant
   is told by presence, never by a dimmed 11px string. */
.m2ul-sim-gate {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--lock-ink);
}

.m2ul-sim-gate-ping {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lock-ac);
	box-shadow: 0 0 8px var(--lock-ac);
}

.m2ul-simpler[data-phase="error"] .m2ul-sim-gate-ping {
	background: var(--lock-bad);
	box-shadow: 0 0 8px var(--lock-bad);
}

.m2ul-simpler[data-phase="open"] .m2ul-sim-gate-ping {
	background: #7CF0C4;
	box-shadow: 0 0 10px #7CF0C4;
}

.m2ul-sim-gateword {
	display: none;
}

.m2ul-simpler[data-side="os"] .m2ul-sim-gateword--os,
.m2ul-simpler[data-side="game"] .m2ul-sim-gateword--game {
	display: inline;
}

.m2ul-sim-gatename {
	display: none;
}

.m2ul-simpler[data-phase="error"] .m2ul-sim-gatestatus {
	color: var(--lock-bad-ink);
}

@keyframes m2ulLockFlip {
	0% { opacity: 0.2; transform: translateY(3px); }
	100% { opacity: 1; transform: none; }
}

.m2ul-sim-gatestatus {
	display: inline-block;
}

.m2ul-sim-gatestatus.is-flip {
	animation: m2ulLockFlip 0.32s ease;
}

/* =========================================================================
   The clock — the hero an OS already has
   ========================================================================= */

.m2ul-lock-clock {
	position: relative;
	z-index: 3;
	margin-top: var(--lock-gap-clock);
	text-align: center;
	transition: margin-top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2ul-lock-time {
	display: block;
	font-size: var(--lock-time);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	color: rgba(236, 241, 252, 0.95);
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
	transition: font-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2ul-lock-date {
	display: block;
	margin-top: 14px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(226, 232, 246, 0.74);
}

.m2ul-simpler[data-phase="open"] .m2ul-lock-clock {
	opacity: 0;
	transform: translateY(-28px) scale(0.96);
}

/* =========================================================================
   The column — no card; glass fields float on the sky
   ========================================================================= */

.m2ul-sim-col {
	position: relative;
	z-index: 3;
	width: min(372px, calc(100vw - 40px));
	margin-top: var(--lock-gap-col);
	/* One-viewport law: capped at what the clock and the foot leave, any
	   overflow scrolls INSIDE, and no scrollbar ever paints. */
	max-height: calc(100vh - var(--lock-reserve));
	max-height: calc(100svh - var(--lock-reserve));
	overflow-y: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
	transition: margin-top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2ul-sim-col::-webkit-scrollbar {
	display: none;
}

.m2ul-simpler:not([data-view="login"]) .m2ul-sim-col {
	width: min(396px, calc(100vw - 40px));
}

/* The headline survives for assistive tech; the clock is the visible hero */
.m2ul-sim-title--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The departure: the column lifts away while the sky pulls back to the
   desktop's framing — nothing goes dark. `forwards` keeps the last frame
   through the network wait; reduced motion exempts it (see the tail). */
@keyframes m2ulLockLift {
	to { opacity: 0; transform: translateY(-12px); }
}

.m2ul-simpler[data-phase="open"] .m2ul-sim-col {
	animation: m2ulLockLift 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
	pointer-events: none;
}

/* Entrance — on CHILDREN, never on the shaking form element itself */
@keyframes m2ulLockRise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.m2ul-lock-clock,
.m2ul-sim-view > *,
.m2ul-sim-sub,
.m2ul-sim-foot,
.m2ul-sim-facts {
	animation: m2ulLockRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.m2ul-sim-view > * { animation-delay: 0.12s; }
.m2ul-sim-view > .m2ul-sim-field ~ .m2ul-sim-field { animation-delay: 0.18s; }
.m2ul-sim-view > .m2ul-sim-key { animation-delay: 0.24s; }
.m2ul-sim-view > .m2ul-sim-key ~ * { animation-delay: 0.3s; }
.m2ul-sim-foot { animation-delay: 0.4s; }
.m2ul-sim-facts { animation-delay: 0.5s; }

/* =========================================================================
   Views — exactly one form is on stage
   ========================================================================= */

.m2ul-sim-view {
	display: none;
}

.m2ul-simpler[data-view="login"] .m2ul-sim-view--login,
.m2ul-simpler[data-view="lost"] .m2ul-sim-view--lost,
.m2ul-simpler[data-view="rp"] .m2ul-sim-view--rp,
.m2ul-simpler[data-view="verify"] .m2ul-sim-view--verify,
.m2ul-simpler[data-view="held"] .m2ul-sim-view--held {
	display: flex;
}

.m2ul-sim-form {
	flex-direction: column;
	gap: var(--lock-gap-field);
	margin: 0;
	padding: 2px;   /* room for the focus ring inside the scroll box */
}

@keyframes m2ulLockShake {
	0%, 100% { transform: translateX(0); }
	15% { transform: translateX(-12px); }
	30% { transform: translateX(10px); }
	45% { transform: translateX(-7px); }
	60% { transform: translateX(5px); }
	75% { transform: translateX(-2px); }
}

.m2ul-sim-form.is-shake {
	animation: m2ulLockShake 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* The fields dim while the server answers; the key holds */
.m2ul-simpler[data-phase="align"] .m2ul-sim-field,
.m2ul-simpler[data-phase="retract"] .m2ul-sim-field {
	opacity: 0.55;
	transition: opacity 0.3s ease;
}

/* =========================================================================
   Fields
   ========================================================================= */

.m2ul-sim-field {
	display: grid;
	gap: 8px;
}

.m2ul-sim-labelrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.m2ul-sim-label {
	font-family: var(--lock-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lock-label);
}

.m2ul-sim-forgot {
	font-size: 13px;
	font-weight: 500;
	color: var(--lock-soft);
	text-decoration: none;
}

.m2ul-sim-forgot:hover {
	text-decoration: underline;
}

/* The staff link ships [hidden]; the secret code reveals it with a rise */
.m2ul-sim-forgot[hidden] {
	display: none;
}

.m2ul-staff-revealed {
	animation: m2ulLockRise 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.m2ul-sim-input {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid var(--lock-rim);
	background: var(--lock-glass);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	color: var(--lock-ink);
	/* Safari can hold a stale black fill while typing over autofilled text */
	-webkit-text-fill-color: var(--lock-ink);
	caret-color: var(--lock-ac);
	font-family: var(--lock-sans);
	/* 16px at base: smaller inputs make iOS Safari zoom-jump the viewport */
	font-size: 16px;
	line-height: 1;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.m2ul-sim-input {
		font-size: 15px;
	}
}

.m2ul-sim-input::placeholder {
	color: rgba(186, 198, 222, 0.55);
	-webkit-text-fill-color: rgba(186, 198, 222, 0.55);
}

.m2ul-sim-input:hover {
	border-color: var(--lock-rim-strong);
}

.m2ul-sim-input:focus {
	border-color: var(--lock-ac);
	box-shadow: 0 0 0 4px var(--lock-ring);
}

/* A jam marks the field it names: the script puts is-err on the address
   input, or on the wrap around a passphrase */
.m2ul-sim-input.is-err,
.is-err .m2ul-sim-input {
	border-color: rgba(255, 122, 107, 0.75);
	box-shadow: 0 0 0 4px rgba(255, 122, 107, 0.12);
}

/* Dark-theme autofill: the ink is PINNED (Safari's sheet forces black at
   important weight) and the fill is painted as an opaque inset shadow */
.m2ul-sim-input:-webkit-autofill,
.m2ul-sim-input:-webkit-autofill:hover,
.m2ul-sim-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lock-ink) !important;
	caret-color: var(--lock-ac) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--lock-glass-solid) inset;
	transition: background-color 9999s ease-out;
}

textarea.m2ul-sim-input {
	height: 92px;
	padding: 12px 16px;
	line-height: 1.45;
	resize: none;
}

.m2ul-sim-passwrap {
	position: relative;
	display: block;
}

.m2ul-sim-passwrap .m2ul-sim-input {
	padding-right: 72px;
}

.m2ul-sim-showtoggle {
	position: absolute;
	right: 7px;
	top: 8px;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--lock-label);
	font-family: var(--lock-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.m2ul-sim-showtoggle:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

/* =========================================================================
   The key, the error line, the status lines
   ========================================================================= */

.m2ul-sim-key {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 52px;
	margin-top: var(--lock-gap-key);
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: var(--lock-key-grad);
	color: var(--lock-ac-ink);
	font-family: var(--lock-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	box-shadow: var(--lock-key-shadow);
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.12s ease, background 0.4s ease;
}

.m2ul-sim-key:hover {
	filter: brightness(1.05);
}

.m2ul-sim-key:active {
	transform: translateY(1px);
}

.m2ul-sim-key-icon {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.m2ul-simpler[data-phase="align"] .m2ul-sim-key-icon,
.m2ul-simpler[data-phase="retract"] .m2ul-sim-key-icon,
.m2ul-simpler[data-phase="open"] .m2ul-sim-key-icon {
	transform: rotate(90deg);
}

/* Once the key is turning the door is committed — no second press */
.m2ul-simpler[data-phase="align"] .m2ul-sim-view--login .m2ul-sim-key,
.m2ul-simpler[data-phase="retract"] .m2ul-sim-view--login .m2ul-sim-key,
.m2ul-simpler[data-phase="open"] .m2ul-sim-view--login .m2ul-sim-key {
	pointer-events: none;
	cursor: progress;
}

.m2ul-simpler[data-phase="align"] .m2ul-sim-view--login .m2ul-sim-key,
.m2ul-simpler[data-phase="retract"] .m2ul-sim-view--login .m2ul-sim-key {
	filter: saturate(0.7) brightness(0.92);
}

.m2ul-simpler[data-phase="open"] .m2ul-sim-view--login .m2ul-sim-key {
	background: var(--lock-key-grad-open);
}

.m2ul-sim-key--panel {
	margin-top: var(--lock-gap-key);
}

.m2ul-sim-key--panel[disabled] {
	opacity: 0.6;
	pointer-events: none;
}

/* The signed-in card's key is an anchor — the engraved ink must out-rank
   the global link colour, resting and hovering */
.m2ul-simpler .m2ul-sim-key--link,
.m2ul-simpler .m2ul-sim-key--link:hover {
	color: var(--lock-ac-ink);
	text-decoration: none;
}

/* The caps-lock telltale the script plants under every passphrase field */
.m2ul-sim-caps {
	display: none;
	font-family: var(--lock-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lock-gold);
}

.m2ul-sim-caps.is-on {
	display: block;
}

/* An empty error line spends no height; a jam re-opens it as it prints */
.m2ul-sim-err {
	font-size: 14px;
	line-height: 1.45;
	color: var(--lock-bad-ink);
}

.m2ul-sim-err:empty {
	display: none;
}

.m2ul-sim-err.is-ok,
.m2ul-sim-status.is-ok {
	color: var(--lock-ok);
}

.m2ul-sim-status {
	font-size: 14px;
	line-height: 1.45;
	color: var(--lock-bad-ink);
}

.m2ul-sim-status:empty {
	display: none;
}

/* =========================================================================
   The remember row and "Lands in" — one control for the destination
   ========================================================================= */

.m2ul-sim-rememberrow,
.m2ul-sim-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 34px;
}

.m2ul-sim-remember {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--lock-soft);
	cursor: pointer;
}

.m2ul-sim-remember input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 5px;
	border: 1px solid var(--lock-rim-strong);
	background: var(--lock-glass);
	cursor: pointer;
}

.m2ul-sim-remember input:checked {
	border-color: var(--lock-ac);
	background: var(--lock-ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%2306121a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

.m2ul-sim-verify-note {
	cursor: default;
}

/* The row and the disclosure share one line, in ordinary flow: the row
   floats and the summary is its own formatting context, so "Lands in" sits
   beside the checkbox while it fits and drops beneath it when it cannot.
   Nothing overlays the checkbox, and the <details> stays a plain block (the
   one layout every engine gives it), so the open sheet runs full width.
   (.m2ul-lock-land wraps the pair; as a flex item of the form it is already
   a formatting context of its own, so it needs no rule.) */
.m2ul-sim-rememberrow {
	float: left;
	margin-right: 12px;
}

.m2ul-sim-usual {
	display: flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	max-width: 100%;
	height: 34px;
	margin-left: auto;
	padding: 0 10px 0 13px;
	overflow: hidden;
	border-radius: 999px;
	border: 1px solid var(--lock-rim);
	background: var(--lock-glass);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--lock-label);
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.2s ease;
}

.m2ul-sim-usual::-webkit-details-marker {
	display: none;
}

.m2ul-sim-usual:hover,
.m2ul-sim-classic[open] .m2ul-sim-usual {
	border-color: var(--lock-ac);
}

/* A name too long for the line ends in an ellipsis, never in a collision */
.m2ul-sim-usual b {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	color: var(--lock-ink);
}

.m2ul-lock-land-chev {
	flex: none;
	width: 12px;
	margin-left: auto;
	height: 12px;
	transition: transform 0.2s ease;
}

.m2ul-sim-classic[open] .m2ul-lock-land-chev {
	transform: rotate(180deg);
}

/* The sheet: worlds, then the usual way. Picking is one tap per row. */
.m2ul-lock-sheet {
	margin-top: 10px;
	padding: 6px;
	border-radius: 14px;
	border: 1px solid var(--lock-rim);
	background: var(--lock-sheet);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	text-align: left;
	animation: m2ulLockRise 0.25s ease backwards;
}

.m2ul-lock-sheet-h {
	margin: 10px 10px 6px;
	font-family: var(--lock-mono);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(186, 198, 222, 0.68);
}

.m2ul-sim-tabs,
.m2ul-sim-dests {
	display: grid;
	gap: 2px;
}

.m2ul-sim-tab,
.m2ul-sim-dest {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18px;
	column-gap: 10px;
	row-gap: 2px;
	width: 100%;
	margin: 0;
	padding: 9px 10px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--lock-ink);
	font-family: var(--lock-sans);
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}

.m2ul-sim-tab:hover,
.m2ul-sim-dest:hover,
.m2ul-sim-dest:focus-within {
	background: rgba(255, 255, 255, 0.05);
}

.m2ul-sim-dest:focus-within {
	outline: 2px solid var(--lock-ac);
	outline-offset: -2px;
}

.m2ul-sim-dest input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.m2ul-lock-door-name,
.m2ul-sim-dest-name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}

.m2ul-lock-door-desc,
.m2ul-sim-dest-desc {
	display: block;
	font-size: 12.5px;
	line-height: 1.3;
	color: rgba(196, 206, 226, 0.72);
}

.m2ul-sim-dest-text {
	display: block;
}

/* The check: a door shows it while it is the landing; a classic pick takes
   it over (the world still arms the room, the pick decides the landing).
   :has() covers both the script's .is-on and the no-JS :checked. */
.m2ul-sim-tab::after,
.m2ul-sim-dest::after {
	content: "";
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
	width: 16px;
	height: 16px;
	opacity: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%233AD0FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

.m2ul-simpler[data-side="game"] .m2ul-sim-tab::after,
.m2ul-simpler[data-side="game"] .m2ul-sim-dest::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23E8B840' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.m2ul-sim-tab[aria-pressed="true"]::after,
.m2ul-sim-dest.is-on::after,
.m2ul-sim-dest:has(input:checked)::after {
	opacity: 1;
}

.m2ul-sim-tab[aria-pressed="true"] {
	background: rgba(255, 255, 255, 0.07);
}

.m2ul-sim-classic:has(.m2ul-sim-dest.is-on) .m2ul-sim-tab[aria-pressed="true"]::after,
.m2ul-sim-classic:has(.m2ul-sim-dest input:checked) .m2ul-sim-tab[aria-pressed="true"]::after {
	opacity: 0;
}

.m2ul-sim-classic:has(.m2ul-sim-dest.is-on) .m2ul-sim-tab[aria-pressed="true"],
.m2ul-sim-classic:has(.m2ul-sim-dest input:checked) .m2ul-sim-tab[aria-pressed="true"] {
	background: transparent;
}

/* "Desktop only, for now" — shown only where the port withholds M2 WORLD */
.m2ul-lock-door-hold {
	display: none;
	font-size: 12.5px;
	line-height: 1.3;
	color: rgba(196, 206, 226, 0.72);
}

.m2ul-sim-dest-hint {
	margin: 8px 10px 6px;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(186, 198, 222, 0.68);
}

.m2ul-sim-dest-hint i {
	font-style: normal;
}

/* =========================================================================
   Panels — lost / rp / verify / held
   ========================================================================= */

.m2ul-sim-panel-title {
	margin: 0;
	font-size: 27px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.m2ul-sim-panel-hint,
.m2ul-sim-sent,
.m2ul-sim-junk {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--lock-soft);
}

.m2ul-sim-sent b,
.m2ul-sim-junk b {
	font-weight: 500;
	color: #fff;
}

.m2ul-sim-junk b {
	color: var(--lock-gold);
}

/* The six cells sit over the real input (paste, autofill and one-time-code
   suggestions all keep working); once the script builds them the input
   surrenders every pixel of chrome. The WebKit pins are hard-won (v4.4.1):
   text-fill paints OVER color, and the autofill sheet out-ranks everything
   that is not !important. */
.m2ul-sim-code {
	position: relative;
}

.m2ul-sim-code-input {
	font-family: var(--lock-mono);
	letter-spacing: 0.35em;
	height: 60px;
}

.m2ul-sim-code.is-jscode .m2ul-sim-code-input,
.m2ul-sim-code.is-jscode .m2ul-sim-code-input:hover,
.m2ul-sim-code.is-jscode .m2ul-sim-code-input:focus {
	color: transparent;
	-webkit-text-fill-color: transparent;
	caret-color: transparent;
	text-shadow: none;
	border-color: transparent;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

.m2ul-sim-code.is-jscode .m2ul-sim-code-input:-webkit-autofill,
.m2ul-sim-code.is-jscode .m2ul-sim-code-input:-webkit-autofill:hover,
.m2ul-sim-code.is-jscode .m2ul-sim-code-input:-webkit-autofill:focus {
	-webkit-text-fill-color: transparent !important;
	caret-color: transparent !important;
	-webkit-box-shadow: none;
}

.m2ul-sim-code.is-jscode .m2ul-sim-code-input::placeholder {
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.m2ul-sim-code-cells {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	pointer-events: none;
}

.m2ul-sim-code-cells[hidden] {
	display: none;
}

@keyframes m2ulLockStamp {
	0% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

.m2ul-sim-code-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-family: var(--lock-mono);
	font-size: 26px;
	font-weight: 500;
	color: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.m2ul-sim-code-cell.is-filled {
	border-color: var(--lock-rim-strong);
	animation: m2ulLockStamp 0.18s ease;
}

.m2ul-sim-code-cell.is-armed {
	border-color: var(--lock-ac);
	box-shadow: 0 0 0 4px var(--lock-ring);
}

.m2ul-sim-code.is-bad .m2ul-sim-code-cell {
	border-color: rgba(255, 122, 107, 0.75);
}

/* Success sweeps the cells green one by one (--i is set by the script) */
.m2ul-sim-code.is-ok .m2ul-sim-code-cell {
	border-color: var(--lock-ok);
	color: var(--lock-ok);
	transition-delay: calc(var(--i, 0) * 50ms);
}

.m2ul-sim-resend {
	padding: 0;
	border: 0;
	background: none;
	color: var(--lock-label);
	font-family: var(--lock-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.m2ul-sim-resend:hover {
	color: #fff;
}

.m2ul-sim-resend[disabled] {
	opacity: 0.6;
	cursor: default;
}

.m2ul-sim-verify-why {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--lock-soft);
}

.m2ul-sim-verify-why summary {
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.m2ul-sim-verify-why summary::-webkit-details-marker {
	display: none;
}

.m2ul-sim-verify-why summary:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m2ul-sim-verify-why p {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(176, 212, 255, 0.1);
	background: var(--lock-glass);
}

.m2ul-sim-back {
	align-self: center;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--lock-soft);
	text-decoration: none;
}

.m2ul-sim-back:hover {
	text-decoration: underline;
}

/* =========================================================================
   Signed-in card
   ========================================================================= */

.m2ul-sim-sub {
	margin: 0 0 var(--lock-gap-field);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	color: var(--lock-soft);
}

.m2ul-sim-signedin-dest {
	margin-top: 12px;
	font-size: 13px;
	text-align: center;
	color: var(--lock-muted);
}

/* =========================================================================
   The foot and the notification
   ========================================================================= */

/* The foot lives inside the column's markup (shared with every stage) but
   belongs to the bottom of the screen, so it is fixed to the viewport: a
   scroll container never clips a fixed descendant, and the column's lift on
   the open phase only ever runs while the foot is already fading. */
.m2ul-sim-foot {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 3;
	padding: 0 24px;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(214, 226, 246, 0.66);
	transition: opacity 0.4s ease;
}

.m2ul-sim-foot a {
	color: rgba(236, 241, 252, 0.9);
}

.m2ul-sim-recaptcha {
	margin-top: 4px;
	font-size: 11px;
	color: rgba(186, 198, 222, 0.5);
}

/* Google's own badge is redundant with the printed notice */
.grecaptcha-badge {
	visibility: hidden;
}

/* "Did you know?" rides as a lock-screen notification: the same admin
   content, native furniture. One card per load; extras stack beneath. */
.m2ul-sim-facts {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 3;
	display: grid;
	gap: 8px;
	width: 304px;
	/* the hero is pointer-events: none; the card's links must still click */
	pointer-events: auto;
	transition: opacity 0.4s ease;
}

.m2ul-sim-fact {
	padding: 12px 14px 13px;
	border-radius: 14px;
	border: 1px solid rgba(176, 212, 255, 0.11);
	background: rgba(9, 11, 24, 0.5);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.m2ul-fact-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--lock-mono);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(196, 206, 226, 0.75);
}

.m2ul-fact-label::before {
	content: "M2";
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: #16130D;
	color: var(--lock-gold);
	font-family: var(--lock-sans);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0;
}

.m2ul-fact-text {
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lock-ink);
}

.m2ul-fact-text a {
	color: #fff;
}

/* The foot yields while the member is choosing (the sheet takes its room)
   and as the door opens. "By continuing" is read before the key, not after. */
.m2ul-simpler[data-classic="on"] .m2ul-sim-foot,
.m2ul-simpler[data-phase="open"] .m2ul-sim-facts,
.m2ul-simpler[data-phase="open"] .m2ul-sim-foot {
	opacity: 0;
	pointer-events: none;
}

/* =========================================================================
   The ports
   ========================================================================= */

/* Below 1100px the notification would run under the column */
@media (max-width: 1099px) {
	.m2ul-sim-facts {
		display: none;
	}
}

@media (max-width: 979px) {
	.m2ul-simpler {
		--lock-bar-h: 44px;
		--lock-foot-h: 72px;
		--lock-time: clamp(52px, 11svh, 86px);
		--lock-gap-clock: clamp(14px, 4.5svh, 42px);
		--lock-gap-col: clamp(14px, 4svh, 36px);
		--lock-gap-field: clamp(9px, 1.6svh, 14px);
		--lock-clock-h: calc(var(--lock-time) * 0.95 + 34px);
	}

	.m2ul-simpler:not([data-view="login"]) {
		--lock-time: clamp(40px, 7svh, 56px);
		--lock-gap-clock: clamp(10px, 2.6svh, 22px);
		--lock-gap-col: clamp(10px, 2.4svh, 20px);
	}

	.m2ul-simpler[data-classic="on"] {
		--lock-time: clamp(36px, 6svh, 48px);
		--lock-gap-clock: clamp(8px, 2svh, 16px);
		--lock-gap-col: clamp(10px, 2.4svh, 20px);
		--lock-foot-h: 12px;
	}

	.m2ul-lock-bar {
		padding: 0 20px;
	}

	.m2ul-lock-sep,
	.m2ul-lock-world {
		display: none;
	}

	.m2ul-lock-date {
		margin-top: 12px;
		font-size: 15px;
	}

	/* The card IS the frame in the port: full width. (The one-viewport cap
	   is the base rule's — told against svh, browser bars up, the state every
	   visit starts in.) */
	.m2ul-sim-col,
	.m2ul-simpler:not([data-view="login"]) .m2ul-sim-col {
		width: calc(100vw - 40px);
		max-width: 560px;
	}

	/* A full-screen blur is the most expensive paint on the page */
	.m2ul-sim-input,
	.m2ul-sim-usual,
	.m2ul-sim-code-cell,
	.m2ul-lock-sheet {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.m2ul-sim-input {
		background: rgba(9, 11, 24, 0.78);
	}

	.m2ul-simpler[data-side="game"] .m2ul-sim-input {
		background: rgba(24, 16, 9, 0.8);
	}

	.m2ul-sim-foot {
		bottom: calc(16px + env(safe-area-inset-bottom));
		padding: 0 20px;
	}

	.m2ul-sim-code-cell {
		font-size: 23px;
	}

	.m2ul-sim-code-input {
		height: 54px;
	}

	.m2ul-sim-panel-title {
		font-size: 24px;
	}

	/* M2 WORLD is not offered in the port — the door stays in the list but
	   stands down, and says why. Being CSS it holds with JavaScript off; the
	   script's own guard refuses the side regardless. Mid-verify nothing in
	   the list is on stage, so the carve-out costs nothing here. */
	.m2ul-simpler[data-game-mobile="hold"] .m2ul-sim-tab--game {
		opacity: 0.55;
		pointer-events: none;
	}

	.m2ul-simpler[data-game-mobile="hold"] .m2ul-sim-tab--game .m2ul-lock-door-desc {
		display: none;
	}

	.m2ul-simpler[data-game-mobile="hold"] .m2ul-sim-tab--game .m2ul-lock-door-hold {
		display: block;
	}
}

/* Under 412px the column is narrower than the desk's 372: the row and
   "Lands in" stack, and the pill runs the full line — so no pick can make it
   jump lines mid-choice. */
@media (max-width: 411px) {
	.m2ul-sim-rememberrow {
		float: none;
	}

	.m2ul-sim-usual {
		width: auto;
		margin-top: 4px;
	}
}

/* THE ONE-VIEWPORT LAW, RELEASED. A viewport this short cannot honour it —
   capping the column leaves a strip (157px on a landscape phone) and hides
   the key or the back link under a fold with no scrollbar. So the column
   fills the stage uncapped, the foot sits at its end (the bottom of the
   screen while the view fits, after the content when it does not), and the
   page scrolls like any page. */
@media (max-height: 700px) {
	.m2ul-sim-col {
		display: flex;
		flex: 1 0 auto;
		flex-flow: column;
		max-height: none;
		overflow: visible;
	}

	.m2ul-sim-foot {
		position: static;
		margin-top: auto;
		padding: 24px 0 20px;
	}
}

/* =========================================================================
   Access
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.m2ul-simpler *,
	.m2ul-simpler *::before,
	.m2ul-simpler *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
	}

	.m2ul-sim-hero,
	.m2ul-sim-hero *,
	.m2ul-sim-hero *::before,
	.m2ul-sim-hero *::after {
		animation: none !important;
		transition: none !important;
	}

	/* REVEAL CONTRACT without the fade: still 0 by default, still only ever
	   lit by html.m2ul-aurora-live, still dead under m2ul-aurora-dead */
	html.m2ul-aurora-live .m2ul-sim-hero-canvas {
		opacity: 1 !important;
	}

	/* A zeroed `forwards` lift would blank the column the instant the open
	   phase lands while the page still waits on the network. No lift — the
	   page just leaves. */
	.m2ul-simpler[data-phase="open"] .m2ul-sim-col {
		animation: none !important;
	}
}

@media (prefers-contrast: more) {
	.m2ul-simpler,
	.m2ul-simpler[data-side="game"] {
		--lock-glass: rgba(6, 8, 18, 0.95);
		--lock-rim: rgba(226, 236, 255, 0.5);
		--lock-rim-strong: rgba(226, 236, 255, 0.7);
		--lock-sheet: rgba(6, 8, 18, 0.98);
		--lock-soft: #F2F5FF;
		--lock-label: #F2F5FF;
		--lock-muted: rgba(226, 236, 255, 0.85);
	}

	.m2ul-sim-hero-veil {
		background: rgba(2, 3, 8, 0.6);
	}
}

@media (forced-colors: active) {
	.m2ul-sim-hero-canvas,
	.m2ul-sim-hero-bg,
	.m2ul-sim-hero-veil {
		display: none;
	}

	.m2ul-sim-input,
	.m2ul-sim-key,
	.m2ul-sim-usual,
	.m2ul-lock-sheet,
	.m2ul-sim-code-cell {
		border: 1px solid CanvasText;
	}

	.m2ul-sim-tab::after,
	.m2ul-sim-dest::after {
		background: none;
		border: 2px solid CanvasText;
		border-radius: 50%;
	}
}

@media print {
	.m2ul-sim-hero,
	.m2ul-lock-bar,
	.m2ul-sim-facts {
		display: none;
	}
}