:root{--color-primary-darker: #162e51;--color-warning: #ffbe2e;--color-warning-lighter: #faf3d1;--color-white: #fff;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--space-1: .35rem;--space-2: .65rem;--space-3: 1rem;--space-4: 1.5rem}*,*:before,*:after{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;min-height:100%;margin:0;overflow-x:hidden}body{color:var(--color-white);background:#f0f0f0;font:1rem/1.5 var(--font-sans);font-synthesis:none;text-rendering:optimizeLegibility}.dashboard{display:flex;flex-direction:column;align-items:center;width:100%;min-height:100vh}@supports (height: 100dvh){.dashboard{min-height:100dvh}}.dashboard-frame{position:relative;display:grid;width:min(100vw,177.7778vh);aspect-ratio:16 / 9;grid-template-columns:minmax(0,1fr) clamp(15rem,31%,25rem);grid-template-rows:minmax(0,1fr) clamp(6.5rem,22%,10rem);overflow:hidden;background:var(--color-primary-darker);box-shadow:0 .35rem 1.25rem #1b1b1b2e}@supports (height: 100dvh){.dashboard-frame{width:min(100vw,177.7778dvh)}}.photo-stage{position:relative;grid-column:1;grid-row:1;min-width:0;min-height:0;margin:0;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 78% 22%,#fff0b3 0 4%,transparent 4.2%),linear-gradient(180deg,#7fb9d1 0 42%,#e4d0a3 43% 57%,#54775c 58% 100%)}.photo-stage:before,.photo-stage:after{position:absolute;right:-8%;bottom:8%;left:-8%;height:43%;border-radius:50% 50% 0 0;content:""}.photo-stage:before{z-index:-1;background:#668b65;transform:rotate(-4deg)}.photo-stage:after{z-index:-1;bottom:-13%;left:30%;height:46%;background:#365b4b;transform:rotate(3deg)}.frame-status{position:absolute;top:3%;right:3%;padding:var(--space-1) var(--space-2);border-radius:.35rem;background:#162e51d1;font-size:clamp(.7rem,1.3vw,1rem);font-weight:600}.photo-caption{position:absolute;right:3%;bottom:3%;margin:0;font-size:clamp(.7rem,1.3vw,1rem);text-shadow:0 .1rem .3rem #000}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:.2rem solid #00bde3;outline-offset:.2rem}.auth-state{display:grid;min-height:100vh;place-content:center;gap:var(--space-3);padding:var(--space-4);color:var(--color-primary-darker);text-align:center}.auth-state h1,.auth-state p{margin:0}.auth-state button{justify-self:center;min-height:2.5rem;padding:.4rem .8rem}.dashboard-brand{position:absolute;z-index:3;top:3%;left:3%;display:flex;align-items:center;gap:var(--space-2);max-width:90%;padding:var(--space-1) var(--space-2);border-radius:.4rem;background:#162e51e0;box-shadow:0 .1rem .4rem #0003}.dashboard-brand h1{margin:0;font-size:clamp(.8rem,1.4vw,1.1rem)}.environment-tag{padding:.1rem .4rem;border-radius:.25rem;color:var(--color-primary-darker);background:var(--color-warning);font-size:.75rem;font-weight:700}.sign-out-button{min-height:1.8rem;padding:.15rem .45rem;border:1px solid rgb(255 255 255 / 65%);border-radius:.25rem;color:var(--color-white);background:transparent;font:inherit;font-size:.75rem;cursor:pointer}.bottom-alert{display:flex;min-width:0;min-height:0;gap:var(--space-1);align-items:center;padding:clamp(var(--space-2),2.4vw,var(--space-4));color:#1b1b1b;background:var(--color-warning-lighter);border-top:.35rem solid var(--color-warning)}.bottom-alert h2{color:var(--color-primary-darker);font-size:clamp(.75rem,1.6vw,1.25rem)}.bottom-alert p{margin:0}.bottom-alert .alert-severity{color:#6a4c00;font-size:.75rem;font-weight:700;text-transform:uppercase}.bottom-alert .alert-message{flex:1;min-width:0}.bottom-alert button{flex:0 0 auto}.right-alert{display:flex;min-width:0;min-height:0;flex-direction:column;gap:var(--space-2);padding:clamp(var(--space-3),2.4vw,var(--space-4));color:var(--color-white);background:var(--color-primary-darker);box-shadow:-.3rem 0 .8rem #0000003d}.right-alert h2{color:#ffe08a;font-size:clamp(.75rem,1.6vw,1.25rem);line-height:1.2}.right-alert p{margin:0}.right-alert .alert-severity{color:#ffe08a;font-size:.75rem;font-weight:700;text-transform:uppercase}.right-alert .alert-message{flex:1}.dashboard-frame[data-alert-mode=both]{grid-template-columns:minmax(0,1fr) clamp(15rem,31%,25rem);grid-template-rows:minmax(0,1fr) clamp(6.5rem,22%,10rem)}.dashboard-frame[data-alert-mode=both] .bottom-alert{grid-column:1;grid-row:2}.dashboard-frame[data-alert-mode=both] .right-alert{grid-column:2;grid-row:1 / span 2}.dashboard-frame[data-alert-mode=bottom]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) clamp(6.5rem,22%,10rem)}.dashboard-frame[data-alert-mode=bottom] .bottom-alert{grid-column:1;grid-row:2}.dashboard-frame[data-alert-mode=right]{grid-template-columns:minmax(0,1fr) clamp(15rem,31%,25rem);grid-template-rows:minmax(0,1fr)}.dashboard-frame[data-alert-mode=right] .right-alert{grid-column:2;grid-row:1}.dashboard-frame[data-alert-mode=closed]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.dashboard-frame[data-alert-mode=right] .bottom-alert,.dashboard-frame[data-alert-mode=closed] .bottom-alert,.dashboard-frame[data-alert-mode=bottom] .right-alert,.dashboard-frame[data-alert-mode=closed] .right-alert{display:none}.preview-controls{display:flex;width:min(100%,70rem);flex-wrap:wrap;gap:var(--space-2);align-items:center;padding:var(--space-3) var(--space-4);color:var(--color-primary-darker)}.preview-controls button{min-height:2.5rem;padding:.4rem .8rem}.preview-controls button[aria-pressed=true]{box-shadow:inset 0 0 0 .15rem var(--color-primary-darker)}.preview-status{flex-basis:100%;margin:0;font-weight:600}
