/* ------------------------------------------------------------------------------------------------ tokens */
.iambai-scope {
	--iambai-ink: #0b0b0d;
	--iambai-paper: #f4f3ef;
	--iambai-pink: #ff5c93;
	--iambai-win: #17171c;
	--iambai-win-2: #131317;
	--iambai-fg: #f4f3ef;
	--iambai-muted: #bdbcb5;
	--iambai-edge: #f4f3ef;
	--iambai-hard: #f4f3ef;
	--iambai-shadow: var(--iambai-hard);
	--iambai-hi: rgba(255, 92, 147, 0.14);
	--iambai-on-pink: #0b0b0d;
	--iambai-floor: rgba(0, 0, 0, 0.55);
	--iambai-gold: #ff5c93;
	--iambai-bw: 2px;
	--iambai-sh: 4px;
	/* the site's faces: its pixel display type for titles, its reading type for what is read (never a family of our own) */
	--iambai-display: var(--ic-font-menu, var(--ic-font-display, ui-monospace, monospace));
	--iambai-font: var(--ic-font-read, var(--sb-font, ui-sans-serif, system-ui, sans-serif));
	--iambai-mono: var(--sb-mono, var(--ic-font-code, ui-monospace, monospace));
	/* corners stepped one pixel at a time, as the site's 4 px corner would be drawn in pixels */
	--iambai-steps: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
	--iambai-steps-sm: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
}
@media (prefers-color-scheme: light) {
	.iambai-scope:not(.iambai-dark) {
		--iambai-pink: #c4124f;
		--iambai-win: #ffffff;
		--iambai-win-2: #f1efe9;
		--iambai-fg: #121212;
		--iambai-muted: #46453f;
		--iambai-edge: #121212;
		--iambai-hard: #121212;
		--iambai-hi: rgba(196, 18, 79, 0.09);
		--iambai-on-pink: #ffffff;
		--iambai-floor: rgba(18, 18, 18, 0.16);
	}
}
:root[data-mode="light"] .iambai-scope:not(.iambai-dark),
.iambai-scope.iambai-light {
	--iambai-pink: #c4124f;
	--iambai-win: #ffffff;
	--iambai-win-2: #f1efe9;
	--iambai-fg: #121212;
	--iambai-muted: #46453f;
	--iambai-edge: #121212;
	--iambai-hard: #121212;
	--iambai-hi: rgba(196, 18, 79, 0.09);
	--iambai-on-pink: #ffffff;
	--iambai-floor: rgba(18, 18, 18, 0.16);
}
:root[data-mode="dark"] .iambai-scope:not(.iambai-light),
.iambai-scope.iambai-dark {
	--iambai-pink: #ff5c93;
	--iambai-win: #17171c;
	--iambai-win-2: #131317;
	--iambai-fg: #f4f3ef;
	--iambai-muted: #bdbcb5;
	--iambai-edge: #f4f3ef;
	--iambai-hard: #f4f3ef;
	--iambai-hi: rgba(255, 92, 147, 0.14);
	--iambai-on-pink: #0b0b0d;
	--iambai-floor: rgba(0, 0, 0, 0.55);
}

/* a small reset, so a theme's button and textarea rules never reach in */
.iambai-scope, .iambai-scope *, .iambai-scope *::before, .iambai-scope *::after { box-sizing: border-box; }
.iambai-scope button, .iambai-scope textarea {
	all: unset;
	box-sizing: border-box;
	font: inherit;
	color: inherit;
}
.iambai-scope button { cursor: pointer; }
.iambai-scope :focus-visible { outline: 2px solid var(--iambai-pink); outline-offset: 2px; }
.iambai-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.iambai-scope img.iambai-px { display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ------------------------------------------------------------------------------------------------ her */
/* Her box is 32 x 34 of her pixels (--iambai-px screen pixels each); the canvas reaches past it for hats and sparkles. */
.iambai-root {
	--iambai-px: 3px;
	position: fixed;
	left: 0;
	top: 0;
	width: var(--iambai-w, 96px);
	height: var(--iambai-h, 102px);
	pointer-events: none;
	will-change: transform;
	contain: layout style;
}
.iambai-root.iambai-inline { position: relative; display: inline-block; vertical-align: top; transform: none !important; contain: none; }
.iambai-scope .iambai-bot {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
}
.iambai-root .iambai-bot { clip-path: circle(calc(var(--iambai-px) * 13) at calc(var(--iambai-px) * 16) calc(var(--iambai-px) * 19)); }
.iambai-root .iambai-bot:focus-visible { outline: none; }
.iambai-root .iambai-bot:focus-visible + .iambai-ring { opacity: 1; }
/* the keyboard's focus: a dashed square round her, a pixel thick */
.iambai-ring { position: absolute; left: calc(var(--iambai-px) * 2); top: calc(var(--iambai-px) * 5); width: calc(var(--iambai-px) * 28); height: calc(var(--iambai-px) * 29); border: 2px dashed var(--iambai-pink); opacity: 0; pointer-events: none; }
.iambai-phys, .iambai-float, .iambai-squash, .iambai-moodbox { position: absolute; inset: 0; pointer-events: none; }
/* a spin turns her about her middle in quarter turns (the script gives whole multiples of 90 degrees) */
.iambai-phys { transform: rotate(var(--iambai-rot, 0deg)); transform-origin: calc(var(--iambai-px) * 16) calc(var(--iambai-px) * 20); }
.iambai-cv {
	position: absolute;
	left: calc(var(--iambai-px) * -12);
	top: calc(var(--iambai-px) * -12);
	width: calc(var(--iambai-px) * 56);
	height: calc(var(--iambai-px) * 52);
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	/* the site's own hard shadow, one of her pixels down and right, with no blur */
	filter: drop-shadow(var(--iambai-px) var(--iambai-px) 0 var(--iambai-hard));
}
.iambai-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the floor under her: a stepped oval of shadow that stays put while she bobs */
.iambai-floor {
	position: absolute;
	left: calc(var(--iambai-px) * 9);
	top: calc(var(--iambai-px) * 35);
	width: calc(var(--iambai-px) * 14);
	height: calc(var(--iambai-px) * 3);
	background: var(--iambai-floor);
	clip-path: polygon(14.3% 0, 85.7% 0, 85.7% 33.4%, 100% 33.4%, 100% 66.7%, 85.7% 66.7%, 85.7% 100%, 14.3% 100%, 14.3% 66.7%, 0 66.7%, 0 33.4%, 14.3% 33.4%);
	pointer-events: none;
}
.iambai-root.iambai-quiet .iambai-floor { opacity: 0.6; }

/* the hit zone of the paddle game, and the paddle cursor */
.iambai-zone { position: absolute; left: 50%; top: 56%; width: 150%; height: 150%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.iambai-root.iambai-paddle .iambai-zone { pointer-events: auto; cursor: var(--iambai-paddle-cursor), pointer; }
.iambai-root.iambai-paddle .iambai-bot { cursor: var(--iambai-paddle-cursor), pointer; }
.iambai-root.iambai-gaming .iambai-zone::after { content: ""; position: absolute; inset: 14%; border: 2px dashed color-mix(in srgb, var(--iambai-pink) 50%, transparent); border-radius: 50%; animation: iambai-blinkc 1.2s steps(1, end) infinite; }

/* quiet: small, still, in her corner */
.iambai-root.iambai-quiet { opacity: 0.92; }

/* ------------------------------------------------------------------------------------------------ the window */
/* A block of the site: the edge (a stepped frame), the window inside it, and the site's hard shadow under both. */
.iambai-win {
	position: fixed;
	width: min(440px, calc(100vw - 20px));
	max-height: min(70vh, 560px);
	display: flex;
	flex-direction: column;
	color: var(--iambai-fg);
	font: 400 16px/1.5 var(--iambai-font);
	pointer-events: auto;
	filter: drop-shadow(var(--iambai-sh) var(--iambai-sh) 0 var(--iambai-hard));
	transform-origin: var(--iambai-origin, 100% 100%);
	animation: iambai-winin 0.2s steps(4, end) both;
}
.iambai-win[hidden] { display: none; }
.iambai-win.iambai-closing { animation: iambai-winout 0.15s steps(3, end) both; }
@keyframes iambai-winin { from { opacity: 0; transform: scale(0.25, 0.08); } to { opacity: 1; transform: none; } }
@keyframes iambai-winout { to { opacity: 0; transform: scale(0.6, 0.1); } }
.iambai-frame { display: flex; flex-direction: column; min-height: 0; max-height: inherit; padding: var(--iambai-bw); background: var(--iambai-edge); clip-path: var(--iambai-steps); }
.iambai-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 12px 16px 14px;
	background: var(--iambai-win);
	clip-path: var(--iambai-steps);
}
.iambai-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
/* her name on a pink block, as the site's NEW badge has it */
.iambai-plate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px 3px 7px;
	background: var(--iambai-pink);
	color: var(--iambai-on-pink);
	font: 400 14px/1.1 var(--iambai-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	clip-path: var(--iambai-steps-sm);
}
.iambai-plate::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.iambai-say-as { color: var(--iambai-muted); font: 400 12px/1.2 var(--iambai-display); letter-spacing: 0.06em; text-transform: uppercase; }
.iambai-tools { display: flex; gap: 6px; margin-left: auto; }
/* the window's own buttons: small blocks with an edge and a hard shadow that sink when pressed, as the site's do */
.iambai-scope .iambai-tool {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: var(--iambai-bw) solid var(--iambai-edge);
	background: var(--iambai-win);
	color: var(--iambai-fg);
	box-shadow: 2px 2px 0 var(--iambai-hard);
	transition: transform 0.08s steps(1, end), box-shadow 0.08s steps(1, end);
}
.iambai-scope .iambai-tool:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--iambai-hard); background: var(--iambai-win-2); }
.iambai-scope .iambai-tool:active { transform: translate(2px, 2px); box-shadow: none; }
.iambai-scope .iambai-tool svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; shape-rendering: crispEdges; }
.iambai-scope .iambai-tool[aria-pressed="true"] { background: var(--iambai-pink); color: var(--iambai-on-pink); }
.iambai-body { position: relative; display: flex; flex-direction: column; min-height: 0; gap: 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.iambai-text { margin: 0; min-height: 1.5em; padding-right: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; }
.iambai-text:empty { display: none; }
/* her line never gives up its room to a long list under it (the shop's shelves) */
.iambai-body > .iambai-text { flex-shrink: 0; }
.iambai-em { color: var(--iambai-pink); font-weight: 700; }
/* the "more" cursor: a pixel arrow pointing down, blinking in steps */
.iambai-more { position: absolute; right: 2px; bottom: 2px; width: 10px; height: 8px; font-size: 0; color: transparent; background: var(--iambai-pink); clip-path: polygon(0 0, 100% 0, 100% 25%, 80% 25%, 80% 50%, 60% 50%, 60% 75%, 40% 75%, 40% 50%, 20% 50%, 20% 25%, 0 25%); animation: iambai-blinkc 0.8s steps(1, end) infinite; }
.iambai-more[hidden] { display: none; }
@keyframes iambai-blinkc { 50% { opacity: 0; } }
.iambai-hint { color: var(--iambai-muted); font: 400 12px/1.4 var(--iambai-mono); letter-spacing: 0.02em; }
.iambai-hint kbd { display: inline-block; padding: 0 4px; border: 1px solid currentColor; box-shadow: 1px 1px 0 currentColor; font: inherit; line-height: 1.3; }

/* the menu: a pixel cursor that blinks, a row that stands up as a block of the site */
.iambai-menu { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0 4px 4px 0; outline: none; }
.iambai-menu[hidden] { display: none; }
.iambai-opt {
	position: relative;
	display: grid;
	grid-template-columns: 16px 1fr auto;
	align-items: baseline;
	gap: 6px;
	padding: 6px 10px 6px 6px;
	border: var(--iambai-bw) solid transparent;
	font-size: 16px;
	line-height: 1.35;
	cursor: pointer;
}
.iambai-opt-cursor { align-self: center; width: 8px; height: 14px; font-size: 0; color: transparent; background: var(--iambai-pink); opacity: 0; clip-path: polygon(0 0, 25% 0, 25% 14.3%, 50% 14.3%, 50% 28.6%, 75% 28.6%, 75% 42.9%, 100% 42.9%, 100% 57.1%, 75% 57.1%, 75% 71.4%, 50% 71.4%, 50% 85.7%, 25% 85.7%, 25% 100%, 0 100%); }
.iambai-opt.iambai-on { border-color: var(--iambai-edge); background: var(--iambai-win-2); box-shadow: 3px 3px 0 var(--iambai-hard); }
.iambai-opt.iambai-on .iambai-opt-cursor { opacity: 1; animation: iambai-blinkc 0.8s steps(1, end) infinite; }
.iambai-opt-label { overflow-wrap: anywhere; font-weight: 700; }
.iambai-opt-hint { color: var(--iambai-muted); font: 400 12px/1.2 var(--iambai-mono); text-align: right; white-space: nowrap; }
.iambai-menu:focus-visible .iambai-opt.iambai-on { outline: 2px dashed var(--iambai-pink); outline-offset: 2px; }
.iambai-opt.iambai-secret .iambai-opt-label { color: var(--iambai-pink); animation: iambai-glitch 0.3s steps(2) 3; }
@keyframes iambai-glitch { 50% { transform: translateX(-2px); } }
.iambai-flash { color: var(--iambai-pink); font-size: 13px; text-align: center; }
@keyframes iambai-row-in {
	from { opacity: 0; max-height: 0; margin-top: -4px; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; transform: translateY(6px); }
	55% { opacity: 0.5; }
	to { opacity: 1; max-height: 8em; transform: none; }
}
@keyframes iambai-row-in-first {
	from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; transform: translateY(6px); }
	55% { opacity: 0.5; }
	to { opacity: 1; max-height: 8em; transform: none; }
}
/* the space the list and the hint take (the gaps of her window's body, the list's padding) opens just as smoothly */
@keyframes iambai-list-in { from { margin-top: -10px; padding-bottom: 0; } }
@keyframes iambai-hint-in { from { opacity: 0; max-height: 0; margin-top: -10px; } to { max-height: 4em; } }
.iambai-menu.iambai-reveal { animation: iambai-list-in 380ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.iambai-menu.iambai-reveal .iambai-opt { overflow: hidden; animation: iambai-row-in 380ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.iambai-menu.iambai-reveal .iambai-opt:first-child { animation-name: iambai-row-in-first; }
.iambai-hint.iambai-reveal { overflow: hidden; animation: iambai-hint-in 340ms cubic-bezier(0.4, 0, 0.2, 1) both; }

/* the SHOP frame: a pink sign hung on two pixel chains, price tags with a pixel coin */
.iambai-shop .iambai-inner { padding-top: 40px; }
.iambai-sign { position: absolute; left: 50%; top: 2px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); pointer-events: none; }
.iambai-sign-chains { display: flex; gap: 74px; height: 8px; }
.iambai-sign-chains i { width: 2px; height: 8px; background: repeating-linear-gradient(var(--iambai-fg) 0 2px, transparent 2px 4px); }
.iambai-sign-board { padding: 5px 14px 4px; border: var(--iambai-bw) solid var(--iambai-edge); background: var(--iambai-pink); color: var(--iambai-on-pink); font: 400 16px/1.1 var(--iambai-display); letter-spacing: 0.3em; text-indent: 0.3em; box-shadow: 3px 3px 0 var(--iambai-hard); }
.iambai-win:not(.iambai-shop) .iambai-sign { display: none; }
.iambai-shop .iambai-opt { grid-template-columns: 16px 1fr auto; }
.iambai-shop .iambai-opt-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--iambai-fg); font: 400 13px/1.2 var(--iambai-display); }
/* the coin: an 8-pixel disc drawn in steps */
.iambai-shop .iambai-opt-hint::before { content: ""; width: 12px; height: 12px; background: var(--iambai-pink); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.35); clip-path: polygon(33.3% 0, 66.7% 0, 66.7% 16.7%, 83.3% 16.7%, 83.3% 33.3%, 100% 33.3%, 100% 66.7%, 83.3% 66.7%, 83.3% 83.3%, 66.7% 83.3%, 66.7% 100%, 33.3% 100%, 33.3% 83.3%, 16.7% 83.3%, 16.7% 66.7%, 0 66.7%, 0 33.3%, 16.7% 33.3%, 16.7% 16.7%, 33.3% 16.7%); }
.iambai-shop .iambai-opt-hint:empty::before { display: none; }
.iambai-shop .iambai-opt-sub { grid-column: 2 / 4; margin-top: 2px; color: var(--iambai-muted); font-size: 13px; line-height: 1.4; font-weight: 400; }
.iambai-shop .iambai-text { padding-bottom: 10px; border-bottom: 2px dashed color-mix(in srgb, var(--iambai-fg) 30%, transparent); }

/* the input box: the chat */
.iambai-input { display: flex; flex-direction: column; gap: 8px; }
.iambai-input[hidden] { display: none; }
.iambai-field { display: flex; align-items: stretch; gap: 8px; padding-right: 3px; padding-bottom: 3px; }
.iambai-scope .iambai-ta { flex: 1; min-height: 46px; max-height: 140px; padding: 10px 12px; border: var(--iambai-bw) solid var(--iambai-edge); background: var(--iambai-win-2); color: var(--iambai-fg); font: 400 16px/1.45 var(--iambai-font); caret-color: var(--iambai-pink); white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; field-sizing: content; }
.iambai-scope .iambai-ta:focus-visible { outline: 2px dashed var(--iambai-pink); outline-offset: 2px; }
.iambai-scope .iambai-ta::placeholder { color: var(--iambai-muted); opacity: 1; }
/* SEND: the site's primary button */
.iambai-scope .iambai-send { display: grid; place-items: center; padding: 0 14px; border: var(--iambai-bw) solid var(--iambai-edge); background: var(--iambai-pink); color: var(--iambai-on-pink); font: 400 14px/1 var(--iambai-display); letter-spacing: 0.06em; box-shadow: 3px 3px 0 var(--iambai-hard); transition: transform 0.08s steps(1, end), box-shadow 0.08s steps(1, end); }
.iambai-scope .iambai-send:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--iambai-hard); }
.iambai-scope .iambai-send:active { transform: translate(3px, 3px); box-shadow: none; }

/* ------------------------------------------------------------------------------------------------ the layer above the page */
.iambai-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
/* her chirps: a small block of the site, with a pixel tail toward her */
.iambai-chirp {
	position: absolute;
	left: 0;
	top: 0;
	max-width: min(250px, 70vw);
	padding: 7px 11px;
	border: var(--iambai-bw) solid var(--iambai-edge);
	background: var(--iambai-win);
	color: var(--iambai-fg);
	font: 600 14px/1.4 var(--iambai-font);
	box-shadow: 3px 3px 0 var(--iambai-hard);
	animation: iambai-chirpin 0.2s steps(3, end) both;
}
.iambai-chirp::after { content: ""; position: absolute; left: var(--iambai-tail, 50%); bottom: -8px; width: 8px; height: 6px; margin-left: -4px; background: var(--iambai-edge); clip-path: polygon(0 0, 100% 0, 100% 33.3%, 75% 33.3%, 75% 66.7%, 50% 66.7%, 50% 100%, 25% 100%, 25% 33.3%, 0 33.3%); }
.iambai-chirp.iambai-below::after { top: -8px; bottom: auto; transform: scaleY(-1); }
.iambai-chirp.iambai-side::after { display: none; }
.iambai-chirp.iambai-out { animation: iambai-fade 0.24s steps(3, end) both; }
@keyframes iambai-chirpin { from { opacity: 0; transform: translateY(6px) scale(0.6); } }
@keyframes iambai-fade { to { opacity: 0; transform: translateY(-6px); } }
.iambai-pop { position: absolute; left: 0; top: 0; color: var(--iambai-pink); font: 400 20px/1 var(--iambai-display); letter-spacing: 0.04em; white-space: nowrap; text-shadow: 2px 0 0 var(--iambai-ink), -2px 0 0 var(--iambai-ink), 0 2px 0 var(--iambai-ink), 0 -2px 0 var(--iambai-ink), 2px 2px 0 var(--iambai-ink), 3px 3px 0 var(--iambai-ink); animation: iambai-popup 0.9s steps(9, end) both; }
.iambai-pop.iambai-pop-big { font-size: 26px; }
.iambai-pop.iambai-pop-gold { color: var(--iambai-paper); }
.iambai-pop.iambai-pop-paper { color: var(--iambai-paper); }
@keyframes iambai-popup { 0% { opacity: 0; transform: translate(-50%, 0); } 12% { opacity: 1; transform: translate(-50%, -12px); } 70% { opacity: 1; transform: translate(-50%, -30px); } 100% { opacity: 0; transform: translate(-50%, -42px); } }
.iambai-swing { position: absolute; left: 0; top: 0; margin: -24px 0 0 -18px; animation: iambai-swing 0.24s steps(3, end) both; }
@keyframes iambai-swing { 0% { opacity: 1; transform: rotate(-90deg); } 66% { opacity: 1; transform: rotate(0deg); } 100% { opacity: 0; transform: rotate(0deg); } }
.iambai-confetti { position: absolute; left: 0; top: 0; width: 6px; height: 6px; animation: iambai-confetti var(--d, 1.4s) steps(12, end) both; }
@keyframes iambai-confetti { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)) rotate(180deg); } }
.iambai-banner {
	position: absolute;
	left: 50%;
	top: 30%;
	padding: 14px 26px 16px;
	border: var(--iambai-bw) solid var(--iambai-edge);
	text-align: center;
	background: var(--iambai-win);
	color: var(--iambai-fg);
	transform: translateX(-50%);
	box-shadow: 6px 6px 0 var(--iambai-hard);
	animation: iambai-banner 2.8s steps(28, end) both;
}
.iambai-banner b { display: block; color: var(--iambai-pink); font: 400 clamp(22px, 5vw, 32px)/1.1 var(--iambai-display); letter-spacing: 0.08em; }
.iambai-banner span { display: block; margin-top: 6px; font: 600 14px/1.35 var(--iambai-font); color: var(--iambai-muted); }
@keyframes iambai-banner { 0% { opacity: 0; transform: translateX(-50%) scale(0.3, 0.1); } 8% { opacity: 1; transform: translateX(-50%); } 86% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%) translateY(-12px); } }
.iambai-rally { position: absolute; left: 50%; top: 14px; padding: 5px 12px 4px; border: var(--iambai-bw) solid var(--iambai-edge); background: var(--iambai-win); transform: translateX(-50%); color: var(--iambai-fg); font: 400 16px/1.2 var(--iambai-display); letter-spacing: 0.06em; white-space: nowrap; box-shadow: 3px 3px 0 var(--iambai-hard); }
.iambai-rally em { color: var(--iambai-pink); font-style: normal; }

/* the game's HUD, its pickups, the Reviewer 2 cloud */
.iambai-hud {
	position: absolute;
	left: 50%;
	top: max(10px, env(safe-area-inset-top));
	display: flex;
	align-items: center;
	gap: 4px 14px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: calc(100vw - 24px);
	padding: 7px 10px 7px 14px;
	border: var(--iambai-bw) solid var(--iambai-edge);
	background: var(--iambai-win);
	color: var(--iambai-fg);
	font: 700 13px/1.2 var(--iambai-mono);
	transform: translateX(-50%);
	pointer-events: auto;
	width: max-content;
	box-shadow: var(--iambai-sh) var(--iambai-sh) 0 var(--iambai-hard);
}
.iambai-hud-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.iambai-hud-cell small { color: var(--iambai-muted); font: 400 11px/1 var(--iambai-display); letter-spacing: 0.08em; }
.iambai-hud-cell b { font: 400 16px/1 var(--iambai-display); font-variant-numeric: tabular-nums; }
.iambai-hud-score { color: var(--iambai-pink); }
.iambai-hud-lives { display: inline-flex; gap: 3px; }
.iambai-hud-lives .iambai-lost { opacity: 0.22; }
.iambai-hud-shield[hidden] { display: none; }
.iambai-hud-btns { display: inline-flex; gap: 6px; }
.iambai-scope .iambai-hud .iambai-tool { width: 26px; height: 26px; }
.iambai-hud-combo.iambai-hot b { color: var(--iambai-pink); }
.iambai-paused { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--iambai-ink) 22%, transparent); }
.iambai-paused[hidden] { display: none; }
.iambai-paused div { padding: 14px 22px; border: var(--iambai-bw) solid var(--iambai-edge); background: var(--iambai-win); color: var(--iambai-fg); font: 600 14px/1.4 var(--iambai-font); text-align: center; box-shadow: var(--iambai-sh) var(--iambai-sh) 0 var(--iambai-hard); }
.iambai-paused b { display: block; color: var(--iambai-pink); font: 400 24px/1.2 var(--iambai-display); letter-spacing: 0.16em; }
.iambai-item { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); animation: iambai-item 1.2s steps(2, end) infinite; }
.iambai-item.iambai-got { animation: iambai-got 0.32s steps(4, end) both; }
.iambai-item.iambai-going { animation: iambai-fade 0.4s steps(4, end) both; }
@keyframes iambai-item { 0%, 100% { margin-top: 0; } 50% { margin-top: -3px; } }
@keyframes iambai-got { to { opacity: 0; transform: translate(-50%, -50%) scale(2); } }
.iambai-cloud { position: absolute; left: 0; top: 0; margin-left: -34px; }
.iambai-wind { position: absolute; left: 50%; top: 40px; width: 120px; height: 200px; transform: translateX(-50%); background: repeating-linear-gradient(var(--iambai-wind-dir, 100deg), transparent 0 14px, color-mix(in srgb, var(--iambai-muted) 30%, transparent) 14px 16px); -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); animation: iambai-windmove 0.6s steps(4, end) infinite; }
@keyframes iambai-windmove { to { background-position: 32px 0; } }
.iambai-serve { position: absolute; left: 0; top: 0; padding: 3px 8px 2px; border: var(--iambai-bw) solid var(--iambai-edge); background: var(--iambai-win); color: var(--iambai-fg); font: 400 12px/1.2 var(--iambai-display); letter-spacing: 0.08em; white-space: nowrap; box-shadow: 2px 2px 0 var(--iambai-hard); animation: iambai-blinkc 1s steps(1, end) infinite; }

/* ------------------------------------------------------------------------------------------------ the trail behind her flight */
.iambai-trail { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); animation: iambai-trail 0.6s steps(4, end) both; }
.iambai-trail svg { width: 12px; height: 12px; overflow: visible; }
@keyframes iambai-trail { from { opacity: 1; } to { opacity: 0; margin-top: 10px; } }

/* ------------------------------------------------------------------------------------------------ calm, for those who ask */
@media (prefers-reduced-motion: reduce) {
	.iambai-scope *, .iambai-scope *::before, .iambai-scope *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
	.iambai-opt.iambai-on .iambai-opt-cursor, .iambai-more, .iambai-serve, .iambai-item, .iambai-wind, .iambai-root.iambai-gaming .iambai-zone::after { animation: none !important; }
	.iambai-win, .iambai-banner, .iambai-chirp, .iambai-pop, .iambai-hud { animation: none !important; }
}

@media (max-width: 560px) {
	.iambai-win { font-size: 15px; }
	.iambai-text, .iambai-opt { font-size: 15px; }
	.iambai-inner { padding: 10px 12px 12px; }
	.iambai-hud { gap: 2px 10px; padding: 6px 8px 6px 10px; font-size: 12px; }
}

/* ------------------------------------------------------------------------------------------------ the dressing room (face.dress) */
/* Her own looks are pixel maps in the script; these are the windows' (bubble) and anything a 1.0 cosmetic set with CSS. */
:root .iambai-scope.iambai-scope[data-dress-bubble="parchment"] {
	--iambai-win: #f1e2c2; --iambai-win-2: #fbf2dc; --iambai-fg: #3b2a17; --iambai-muted: #6e5638; --iambai-edge: #3b2a17;
	--iambai-hard: #3b2a17; --iambai-pink: #a2153f; --iambai-hi: rgba(162, 21, 63, 0.1); --iambai-on-pink: #fff8ea;
}
:root .iambai-scope.iambai-scope[data-dress-bubble="chalkboard"] {
	--iambai-win: #1f3b2f; --iambai-win-2: #284a3b; --iambai-fg: #eef3ea; --iambai-muted: #b6cbbc; --iambai-edge: #b98a55;
	--iambai-hard: #6b4a2a; --iambai-pink: #ffb3cb; --iambai-hi: rgba(255, 255, 255, 0.08); --iambai-on-pink: #1f3b2f;
}
:root .iambai-scope.iambai-scope[data-dress-bubble="terminal"] {
	--iambai-win: #03170a; --iambai-win-2: #062611; --iambai-fg: #8dffb0; --iambai-muted: #4fbf75; --iambai-edge: #8dffb0;
	--iambai-hard: #1a7f3f; --iambai-pink: #c6ffd8; --iambai-hi: rgba(141, 255, 176, 0.12); --iambai-on-pink: #03170a;
}
:root .iambai-scope.iambai-scope[data-dress-bubble="terminal"] .iambai-text { font-family: var(--iambai-mono); }
:root .iambai-scope.iambai-scope[data-dress-bubble="bubble_catalog_card"] {
	--iambai-win: #fffaf0; --iambai-win-2: #f6efe0; --iambai-fg: #1d1b16; --iambai-muted: #5b5547; --iambai-edge: #1d1b16;
	--iambai-hard: #1d1b16; --iambai-pink: #b3123f; --iambai-hi: rgba(179, 18, 63, 0.08); --iambai-on-pink: #fffaf0;
}
:root .iambai-scope.iambai-scope[data-dress-bubble="bubble_catalog_card"] .iambai-inner { background: repeating-linear-gradient(var(--iambai-win) 0 23px, rgba(80, 140, 200, 0.28) 23px 24px); }
:root .iambai-scope.iambai-scope[data-dress-bubble="bubble_scroll"] {
	--iambai-win: #efe1c0; --iambai-win-2: #f7ecd2; --iambai-fg: #3b2a17; --iambai-muted: #6e5638; --iambai-edge: #5b3f1f;
	--iambai-hard: #5b3f1f; --iambai-pink: #9b2c1f; --iambai-hi: rgba(155, 44, 31, 0.1); --iambai-on-pink: #fff6e0;
}
:root .iambai-scope.iambai-scope[data-dress-bubble="bubble_scroll"] .iambai-inner { border-block: 6px solid #d9c49a; }

@keyframes iambai-special { 0% { box-shadow: 0 0 0 2px var(--iambai-pink), 3px 3px 0 var(--iambai-hard); } 50% { box-shadow: 0 0 0 2px var(--iambai-edge), 3px 3px 0 var(--iambai-pink); } 100% { box-shadow: 0 0 0 2px var(--iambai-pink), 3px 3px 0 var(--iambai-hard); } }
@keyframes iambai-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.iambai-opt.iambai-special { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--iambai-pink) 18%, transparent), transparent); animation: iambai-special 1.2s steps(3, end) infinite; }
.iambai-opt.iambai-special .iambai-opt-label { color: var(--iambai-pink); }
.iambai-opt.iambai-special .iambai-opt-label::before { content: "\2726  "; display: inline-block; animation: iambai-twinkle 0.9s steps(2, end) infinite; }
@media (prefers-reduced-motion: reduce) { .iambai-opt.iambai-special, .iambai-opt.iambai-special .iambai-opt-label::before { animation: none !important; } }

.iambai-root.iambai-tucked, .iambai-chirp.iambai-tucked {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.iambai-root.iambai-tucked * { pointer-events: none !important; }