html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	/* Sepia-desk dim (village--ndi.9 design proposal), not neutral -- this is
	   what the letterbox and any pre-mount flash read as, so the "desk"
	   behind the notebook card is warm even before the iframe paints. */
	background: #1a130b;
	overflow: hidden;
	font-family: system-ui, -apple-system, sans-serif;
}

/* The canvas-host carves out the area Godot is allowed to render into.
   When the notebook is shown, we shrink it so the Godot UI is never
   hidden behind the iframe. With canvasResizePolicy=2, the canvas itself
   tracks this element, and Godot's viewport reflows to match. */
#canvas-host {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: top 120ms ease, left 120ms ease,
	            width 120ms ease, height 120ms ease;
}

#canvas-host.shrink-landscape {
	width: 50%;
}

#canvas-host.shrink-portrait {
	height: 33.333%;
}

#canvas {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
	touch-action: none;
}

/* village--riu.10: applied to every pooled notebook iframe host.js creates
   (plus the page-load default #marimo one it adopts as the pool's first
   entry) -- there can be more than one of these live in the DOM at once, so
   this can no longer be an #marimo id selector. */
.marimo-frame {
	position: absolute;
	border: 0;
	/* Paper, not white -- fixes the white-flash before marimo's own CSS
	   theme (injected at build time, scripts/build_web_bundle.sh) mounts. */
	background: #e8dcc0;
	z-index: 10;
}

.hidden {
	display: none !important;
}

.landscape-right-half {
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
}

.portrait-bottom-two-thirds {
	top: 33.333%;
	left: 0;
	width: 100%;
	height: 66.667%;
}

.fullscreen {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}