html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#compose-root {
width: 100%;
height: 100%;
}
#hyves-recyclable-underlays {
position: fixed;
inset: 0;
overflow: hidden;
/* Purely visual: Compose/the canvas keeps receiving every pointer event over this layer's
elements regardless of their own hole, so there's nothing to opt into here. */
pointer-events: none;
}
#splash {
position: fixed;
inset: 0;
background: #F6F1EB;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease;
}
/* Matches Material3's default CircularProgressIndicator (40dp diameter, 4dp stroke) - box-sizing
is required here, otherwise the border adds outside the 40px content box (48px total). */
.spinner {
box-sizing: border-box;
width: 40px;
height: 40px;
border: 4px solid transparent;
border-top-color: #4D6F87;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Didomi injects its consent banner into #didomi-host, appended to independently of the
Compose canvas. Without an explicit stacking context, nothing guarantees it stays above the
canvas once the app starts drawing - pin it on top unconditionally. */
#didomi-host {
position: fixed !important;
z-index: 2147483647 !important;
}