:root{
color-scheme:dark;
--bg:#050a0c;
--ink:#e8efeb;
--muted:#91a29f;
--aqua:#5ce3d0;
--line:#263d3d;
--panel:#0b1416;
--mono:ui-monospace,SFMono-Regular,Consolas,monospace;
--sans:Arial,Helvetica,sans-serif}

*{
box-sizing:border-box}

body{
margin:0;
min-width:0;
overflow-x:hidden;
background:radial-gradient(ellipse at 68% 25%,#10313175,transparent 48%),var(--bg);
color:var(--ink);
font-family:var(--sans);
line-height:1.5}

body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
background:repeating-linear-gradient(115deg,transparent 0 160px,#67b7ad05 160px 162px,transparent 162px 270px)}

a{
color:inherit;
text-decoration:none}

button,input,textarea{
font:inherit}

button,a,input,textarea{
touch-action:manipulation}

button{
border:1px solid #38504e;
background:#111f21;
color:var(--ink);
padding:14px 19px;
cursor:pointer;
border-radius:3px;
transition:background .15s,transform .15s}

button:hover:not(:disabled){
background:#1b3333;
transform:translateY(-1px)}

button:disabled{
opacity:.4;
cursor:not-allowed}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
outline:2px solid var(--aqua);
outline-offset:4px}

.primary{
background:var(--aqua);
border-color:var(--aqua);
color:#05231f;
font-weight:700}

.primary:hover:not(:disabled){
background:#a3ffe9}

header{
max-width:1440px;
margin:auto;
padding:32px 5%;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #1f3334}

.brand{
min-width:0;
overflow-wrap:anywhere;
font-size:20px;
font-weight:800;
letter-spacing:5px}

.brand span{
display:block;
font:9px var(--mono);
letter-spacing:1.2px;
color:var(--muted);
margin-top:6px}

.back{
font:10px var(--mono);
letter-spacing:1px;
color:#b2c8c3}

.scene{
max-width:1320px;
margin:0 auto;
display:grid;
grid-template-columns:1.05fr 1fr;
column-gap:9%;
padding:78px 5% 50px;
align-items:center}

.intro{
padding:0 0 35px}

.eyebrow{
font:11px var(--mono);
color:var(--aqua);
letter-spacing:2px;
display:flex;
gap:10px;
align-items:center}

.dot{
display:inline-block;
width:7px;
height:7px;
background:var(--aqua);
border-radius:50%;
box-shadow:0 0 12px #5ce3d066;
flex-shrink:0}

.intro>.eyebrow .dot{
position:relative;
isolation:isolate;
color:var(--state-color,var(--aqua));
background:currentColor;
box-shadow:0 0 4px currentColor}

.intro>.eyebrow .dot:after{
content:"";
position:absolute;
left:50%;
top:50%;
z-index:-1;
width:10px;
height:10px;
border-radius:50%;
background:currentColor;
filter:blur(3px);
transform:translate(-50%,-50%) scale(.55);
opacity:.2;
will-change:transform,opacity;
animation:line-open-breathe 2.8s cubic-bezier(.45,0,.55,1) infinite}

@keyframes line-open-breathe{
0%,100%{
opacity:.2;
transform:translate(-50%,-50%) scale(.55)}
50%{
opacity:1;
transform:translate(-50%,-50%) scale(1.35)}
}

h1{
font-size:clamp(48px,5.5vw,78px);
line-height:1.04;
font-weight:500;
letter-spacing:-3px;
margin:34px 0 25px}

h1 em{
font-family:Georgia,serif;
color:var(--aqua);
font-weight:400}

.lede{
color:#b3c0ba;
font-size:15px;
line-height:1.9}

.manifest{
display:flex;
gap:20px;
margin-top:45px;
border-top:1px solid var(--line);
padding-top:20px;
font:9px var(--mono);
letter-spacing:.5px}

.caption{
font:11px var(--mono);
color:var(--muted);
margin-top:22px}

.phone-area{
grid-column:2;
grid-row:1 / span 2;
align-self:start;
max-width:440px;
width:100%;
margin:auto}

.booth-sign{
width:100%;
border-radius:0;
border:1px solid #497774;
background:#83d9c911;
padding:13px 20px;
letter-spacing:6px;
font-size:20px;
color:#c4f9e7;
box-shadow:0 0 32px #42e3be13,inset 0 0 25px #42e3be0a;
display:flex;
justify-content:space-between;
align-items:center}

.booth-sign:hover{
box-shadow:0 0 42px #42e3be33,inset 0 0 28px #42e3be16}

.night-shift{
background:radial-gradient(ellipse at 68% 25%,#66501555,transparent 48%),var(--bg)}

.night-shift .booth-sign{
color:#fff2b5;
border-color:#b59d55;
box-shadow:0 0 48px #ffe48a33,inset 0 0 28px #ffe48a18}

.booth-sign span{
font:8px var(--mono);
letter-spacing:1px;
color:#7ebaae}

.phone{
position:relative;
margin:18px 10px 0;
padding:23px 25px 15px;
background:linear-gradient(110deg,#263332,#141e20 40%,#1c2928 70%,#111b1c);
border:1px solid #56706a;
border-radius:13px 13px 22px 22px;
box-shadow:inset 2px 2px 1px #84978c30,inset -4px -3px 4px #0009,12px 25px 55px #0009}

.plate{
display:flex;
gap:10px;
justify-content:space-between;
border-bottom:1px solid #5c6e6255;
padding-bottom:16px;
font:8px var(--mono);
letter-spacing:1.7px;
color:#a5b4aa}

.plate span,.phone-bottom span{
min-width:0;
overflow-wrap:anywhere}

.plate span:last-child,.phone-bottom span:last-child{
text-align:right}

.hardware{
display:flex;
gap:22px;
padding-top:25px}

.receiver{
position:relative;
flex-shrink:0;
width:73px;
height:286px;
border:0;
border-radius:30px;
background:transparent;
padding:0;
filter:drop-shadow(5px 8px 4px #000a)}

.receiver:hover:not(:disabled){
background:transparent;
transform:rotate(-5deg)}

.handle{
position:absolute;
width:32px;
height:204px;
top:39px;
left:20px;
border-radius:15px;
background:linear-gradient(90deg,#0b1011,#2f3f3c 40%,#131e1e 80%);
border:1px solid #3b4c45}

.ear,.mouth{
position:absolute;
left:0;
width:73px;
height:79px;
border-radius:30px 23px 20px 22px;
background:linear-gradient(100deg,#101819,#34443e 40%,#0c1716);
border:1px solid #43544c;
box-shadow:inset 2px 1px 2px #65786c30;
z-index:1}

.ear{
top:0}

.mouth{
bottom:0;
transform:rotate(180deg)}

.ear:after,.mouth:after{
content:"";
display:block;
position:absolute;
inset:20px 17px;
border-radius:10px;
background:radial-gradient(#050b0a 1.5px,transparent 2px);
background-size:6px 6px}

.face{
flex:1;
min-width:0}

.display{
background:#071c18;
border:2px solid #050b0b;
outline:1px solid #455d50;
box-shadow:inset 0 0 16px #000b;
padding:13px 10px;
color:#9befc5;
font-family:var(--mono);
min-height:94px}

.display-label{
display:block;
font-size:7px;
letter-spacing:1px;
color:#699980}

.display strong{
font-size:23px;
display:block;
letter-spacing:1px;
margin:5px 0;
white-space:nowrap;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis}

.display>span:last-child{
font-size:7px;
letter-spacing:.5px;
display:block}

.keypad{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px;
margin-top:22px}

.keypad>button{
border:1px solid #607267;
border-radius:3px;
text-align:center;
background:linear-gradient(#9aa99a,#52655c);
color:#111f19;
box-shadow:0 3px 0 #071110;
font:20px var(--mono);
line-height:1.1;
padding:6px 0 4px;
min-height:44px}

.keypad>button:hover:not(:disabled),.keypad>button:focus-visible{
background:linear-gradient(#c5d2c5,#71857a);
color:#07110d}

.keypad>button:active:not(:disabled){
transform:translateY(2px);
box-shadow:0 1px 0 #071110}

.keypad small{
font:6px var(--mono);
display:block;
min-height:8px;
letter-spacing:1px}

.coin-slot{
display:flex;
align-items:center;
justify-content:space-between;
margin:22px 0;
color:#96a697;
font:7px var(--mono)}

.coin-slot i{
display:block;
width:42px;
height:6px;
background:#020806;
border:1px solid #57645b}

.cord{
height:72px;
width:50px;
margin-left:12px;
border-left:10px solid #0a1010;
border-bottom:10px solid #0a1010;
border-radius:0 0 0 25px;
box-shadow:-2px 1px 1px #43534a;
background:repeating-linear-gradient(0deg,transparent 0 4px,#4f605933 4px 6px);
position:relative;
margin-top:-10px}

.instruction{
margin:0 0 24px 28px;
padding:16px 10px;
background:#bdc5ad;
color:#203a30;
transform:rotate(-1deg);
box-shadow:1px 3px 8px #0007}

.instruction span{
font:7px var(--mono);
letter-spacing:1px}

.instruction p{
font-family:Georgia,serif;
font-style:italic;
font-size:17px;
margin:5px 0}

.phone-bottom{
display:flex;
justify-content:space-between;
font:7px var(--mono);
color:#95a69a;
letter-spacing:1px}

.console{
grid-column:1;
align-self:start;
border-top:1px solid var(--line);
padding-top:20px}

.console-head{
display:flex;
justify-content:space-between;
font:9px var(--mono);
letter-spacing:1px;
color:var(--muted);
margin-bottom:17px}

.console-head>span:last-child{
color:var(--state-color,var(--aqua))}

#sessionState{
transition:color .25s ease}

.public-page[data-app-state="booting"]{--state-color:#86b7ff}
.public-page[data-app-state="unavailable"],.public-page[data-app-state="error"]{--state-color:#ff8178}
.public-page[data-app-state="standby"],.public-page[data-app-state="record-ready"]{--state-color:#5ce3d0}
.public-page[data-app-state="connecting"],.public-page[data-app-state="requesting-mic"],.public-page[data-app-state="submitting"]{--state-color:#ffd36a}
.public-page[data-app-state="listening"],.public-page[data-app-state="submitted"]{--state-color:#8effb0}
.public-page[data-app-state="exhausted"]{--state-color:#ffae63}
.public-page[data-app-state="quiet"]{--state-color:#a7b8ff}
.public-page[data-app-state="recording"]{--state-color:#ff6f7d}
.public-page[data-app-state="preparing"]{--state-color:#c6a0ff}
.public-page[data-app-state="preview"]{--state-color:#79c8ff}

.actions{
display:flex;
flex-wrap:wrap;
gap:10px}

.actions button{
flex:1;
white-space:nowrap;
font-size:13px}

.status{
font-size:13px;
color:var(--aqua);
min-height:20px;
margin:18px 0}

.console-note{
font-size:10px;
line-height:1.8;
color:#7c918c;
border-top:1px solid #213533;
padding-top:20px;
margin-top:25px}

.row{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
margin:14px 0}

.row button{
font-size:12px}

.text-btn{
border:0;
padding:0;
background:transparent;
color:var(--muted);
font-size:11px}

.text-btn:hover:not(:disabled){
background:transparent;
color:var(--aqua);
transform:none}

audio{
display:block;
width:100%;
height:44px;
margin:12px 0;
max-width:100%}

.message-meta{
display:flex;
align-items:center;
justify-content:space-between;
font-size:12px;
margin-top:22px}

.message-meta span{
font:10px var(--mono);
color:var(--muted)}

.line-complete{
margin-top:22px}

.line-complete strong{
color:var(--cream)}

#reportForm{
margin-top:16px;
padding-top:14px;
border-top:1px solid var(--line)}

#reportForm>label:first-child{
margin-top:0}

label{
display:block;
font-size:12px;
margin:14px 0 6px;
color:#bdcfc7}

label span,.small,small{
color:var(--muted)}

input:not([type=checkbox]),textarea{
display:block;
width:100%;
background:#081214;
border:1px solid #344a45;
border-radius:3px;
color:#eef6ee;
padding:12px}

textarea{
min-height:90px;
resize:vertical}

.consent{
display:flex;
align-items:start;
gap:10px;
font-size:11px;
line-height:1.6}

.consent input{
margin-top:4px;
accent-color:var(--aqua)}

input[type=checkbox]{
flex:0 0 22px;
width:22px;
height:22px;
min-height:22px}

.consent span{
color:#bdcfc7}

.small{
font-size:10px;
line-height:1.7}

.timer{
display:flex;
align-items:center;
gap:12px;
padding:18px 0;
font:13px var(--mono)}

.timer strong{
font-size:32px;
font-weight:400}

.timer>span:last-child{
margin-left:auto;
font-size:9px}

.record-prompt{
font-family:Georgia,serif;
font-style:italic;
font-size:18px}

.recording-now #recordDot{
background:#ff6f6f;
box-shadow:0 0 14px #f55;
animation:pulse 1s infinite}

.upload-option{
padding:6px 0 18px;
border-bottom:1px solid #233735}

.upload-option input{
font-size:11px;
max-width:100%}

.upload-option small{
font-size:10px}

.trap{
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden}

footer{
max-width:1440px;
margin:30px auto 0;
padding:30px 5%;
border-top:1px solid #1f3334;
display:flex;
gap:20px;
justify-content:space-between;
flex-wrap:wrap;
color:#748f87;
font:9px var(--mono);
letter-spacing:1px}

footer nav{
display:flex;
gap:24px}

footer .text-btn{
font:inherit}

dialog{
background:#101e20;
color:var(--ink);
max-width:580px;
width:calc(100% - 32px);
max-height:85vh;
max-height:85dvh;
overflow-y:auto;
overscroll-behavior:contain;
border:1px solid #45635c;
padding:35px;
border-radius:6px}

dialog::backdrop{
background:#000b;
backdrop-filter:blur(5px)}

dialog h2{
font:36px Georgia,serif;
line-height:1.2}

dialog p{
font-size:13px;
color:#b9ccc4;
line-height:1.8}

.dialog-close{
position:absolute;
right:12px;
top:8px;
border:0;
background:none;
font-size:24px}

.noscript{
padding:25px}

.admin-main{
max-width:1050px;
margin:50px auto;
padding:0 24px}

.admin-main h1{
font-size:48px;
letter-spacing:-1px}

.auth-box{
max-width:480px;
padding:25px;
background:var(--panel);
border:1px solid var(--line)}

.admin-toolbar{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:space-between;
margin-bottom:20px}

.admin-cards{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px}

.admin-card{
padding:22px;
background:var(--panel);
border:1px solid var(--line);
overflow-wrap:anywhere}

.admin-card .row button{
flex-grow:1}

.admin-card h3{
margin:10px 0}

.admin-card .tag{
font:10px var(--mono);
color:var(--aqua)}

.admin-card .reports{
font-size:12px;
color:#ffd1a5}

.danger{
color:#ffb4a8;
border-color:#663e39}

.notice{
padding:15px;
border:1px solid var(--line);
font-size:13px;
color:var(--muted);
overflow-wrap:anywhere}

summary{
display:flex;
align-items:center;
min-height:44px;
cursor:pointer}

[hidden]{
display:none!important}

@keyframes pulse{
50%{
opacity:.35}

}

@media(max-width:900px){
.scene{
column-gap:5%;
padding-top:50px}

.phone{
padding:20px 17px}

.hardware{
gap:15px}

.manifest{
gap:10px;
font-size:8px}

.back{
font-size:8px}

.actions{
flex-direction:column}

}

@media(max-width:680px){
header{
padding:22px max(16px,env(safe-area-inset-right)) 22px max(16px,env(safe-area-inset-left))}

.brand{
font-size:17px}

.brand span{
font-size:7px;
letter-spacing:.7px}

.back{
display:none}

.scene{
display:flex;
flex-direction:column;
padding:36px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}

.intro{
width:100%;
padding-bottom:24px}

h1{
font-size:clamp(42px,13.8vw,54px);
margin-top:25px}

.lede{
font-size:14px}

.manifest{
margin-top:25px;
font-size:8px;
flex-wrap:wrap}

.caption{
font-size:10px}

.phone-area{
max-width:350px;
margin-bottom:24px}

.phone{
margin:15px 5px 0}

.hardware{
gap:22px}

.display strong{
font-size:clamp(15px,4.7vw,21px)}

.receiver{
height:274px}

.handle{
height:190px}

.cord{
height:45px}

.instruction{
margin-bottom:19px}

.console{
width:100%}

.actions{
flex-direction:row}

.actions button{
white-space:normal}

.admin-cards{
grid-template-columns:1fr}

footer{
padding:25px max(16px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
margin-top:5px}

footer>span:last-child{
display:none}

}

@media(max-width:420px){
.scene{
padding-top:24px}

.intro{
padding-bottom:18px}

h1{
font-size:clamp(38px,13vw,48px);
letter-spacing:-2px}

.lede br{
display:none}

.phone-area{
max-width:360px}

.booth-sign{
padding:12px 14px;
font-size:17px;
letter-spacing:4px}

.phone{
margin:12px 4px 0;
padding:18px 12px 12px}

.hardware{
gap:12px;
padding-top:20px}

.receiver{
width:64px;
height:252px}

.ear,.mouth{
width:64px;
height:70px}

.ear:after,.mouth:after{
inset:17px 14px}

.handle{
width:30px;
height:178px;
top:36px;
left:17px}

.display{
min-height:88px;
padding:11px 8px}

.display strong{
font-size:clamp(14px,5vw,18px);
letter-spacing:.04em}

.keypad{
gap:6px;
margin-top:16px}

.coin-slot{
margin:16px 0}

.instruction{
margin-left:16px;
padding:13px 9px}

.actions{
flex-direction:column}

.actions button,.row button{
width:100%}

.timer{
gap:8px;
flex-wrap:wrap}

.timer>span:last-child{
width:100%;
margin-left:19px}

dialog{
width:calc(100% - 20px);
padding:44px 20px 24px}

dialog h2{
font-size:30px}

.admin-main{
margin:28px auto;
padding:0 16px}

.admin-main h1{
font-size:40px}

.auth-box,.admin-card,.submitted{
padding:18px}

.admin-toolbar>.row{
width:100%}

.admin-toolbar>.row button{
width:auto;
flex:1 1 calc(50% - 5px)}

.auth-box>button{
width:100%}
}

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important}

}

/* Interaction and accessibility layer. These tokens are the shared control
   vocabulary for the public and operator surfaces. */
:root{
--focus:#b8fff0;
--danger:#ffb4a8;
--control-min:44px;
--space-1:8px;
--space-2:16px;
--space-3:24px;
--radius:4px;
}

button,input,textarea,a{
min-height:var(--control-min);
}

.brand,.back,footer a{
display:inline-flex;
align-items:center;
}

.header-actions{
display:flex;
align-items:center;
gap:var(--space-2);
}

.sound-toggle{
min-height:var(--control-min);
padding:8px 12px;
font:9px var(--mono);
letter-spacing:1px;
color:var(--aqua);
background:transparent;
}

.sound-toggle[aria-pressed="false"]{
color:var(--muted);
border-style:dashed;
}

.submitted{
padding:var(--space-3);
border:1px solid var(--line);
background:linear-gradient(145deg,#102123,#091315);
}

.submitted>p:not(.eyebrow){
color:#c2d2cd;
}

.reference-row{
display:grid;
grid-template-columns:1fr auto;
gap:var(--space-1);
margin:var(--space-1) 0 var(--space-3);
}

.reference-row input{
font:12px var(--mono);
letter-spacing:.04em;
}

.reference-row button{
white-space:nowrap;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,audio:focus-visible{
outline:3px solid var(--focus);
outline-offset:3px;
}

.status[role="status"]{
border-left:2px solid var(--aqua);
padding-left:12px;
}

.setup-notice{
margin:12px 0 0;
padding:12px 14px;
border:1px solid var(--line);
color:var(--muted);
font:11px/1.6 var(--mono);
}

.setup-notice a{
color:var(--aqua);
text-decoration:underline;
text-underline-offset:3px;
}

@media(max-width:680px){
.header-actions{
gap:8px;
}
.sound-toggle{
font-size:8px;
padding:8px;
}
.reference-row{
grid-template-columns:1fr;
}
}

@media(forced-colors:active){
.dot,.primary{
forced-color-adjust:none;
}
.phone,.display,.submitted,.auth-box,.admin-card{
border:1px solid CanvasText;
}
}

/* Stable desktop stage and optional user-arranged layout. */
.layout-panel{
--layout-x:0px;
--layout-y:0px;
position:relative;
translate:var(--layout-x) var(--layout-y);
transition:translate .32s cubic-bezier(.2,.8,.2,1),opacity .24s ease,filter .24s ease;
}

.layout-handle,.mode-toggle,.layout-reset{
display:none;
}

body.layout-custom .layout-panel{
z-index:3;
}

body.layout-custom .layout-handle{
display:block;
position:absolute;
top:-12px;
right:0;
z-index:10;
min-height:30px;
padding:5px 9px;
border:1px dashed #5ce3d088;
background:#071314e8;
color:var(--aqua);
font:8px var(--mono);
letter-spacing:1px;
cursor:grab;
touch-action:none;
box-shadow:0 0 0 1px #050a0c,0 0 18px #5ce3d01c;
animation:layout-handle-arrive .3s ease both;
}

body.layout-custom .console>.layout-handle{
top:-38px;
}

body.layout-custom .intro>.layout-handle{
top:8px;
}

body.layout-custom .console{
overflow:visible;
}

body.layout-custom .layout-dragging{
transition:none;
filter:drop-shadow(0 0 16px #5ce3d044);
}

body.layout-custom .layout-dragging .layout-handle{
cursor:grabbing;
background:var(--aqua);
color:#05231f;
}

@keyframes layout-handle-arrive{
from{opacity:0;transform:translateY(-7px)}
}

@media(min-width:901px){
.mode-toggle,.layout-reset:not([hidden]){
display:inline-block;
}

.public-page{
height:100vh;
height:100dvh;
display:grid;
grid-template-rows:61px minmax(0,1fr) 32px;
overflow:hidden;
}

.public-page>.rain{
position:fixed;
inset:0;
pointer-events:none;
}

.public-page>header{
width:100%;
height:61px;
margin:0 auto;
padding:8px 5%;
}

.public-page .scene{
width:100%;
max-width:1440px;
height:100%;
max-height:100%;
min-height:0;
padding:6px 5%;
grid-template-columns:minmax(0,1.05fr) minmax(360px,1fr);
grid-template-rows:minmax(0,1fr);
column-gap:8%;
align-items:center;
align-self:stretch;
overflow:hidden;
}

.public-page .intro{
grid-column:1;
grid-row:1;
align-self:start;
padding:12px 0 0;
max-width:560px;
}

.public-page .intro h1{
font-size:clamp(45px,4.6vw,70px);
margin:22px 0 14px;
}

.public-page .intro .lede{
margin:0;
line-height:1.7;
}

.public-page .manifest{
margin-top:28px;
padding-top:14px;
}

.public-page .caption{
margin-top:14px;
}

.public-page .phone-area{
grid-column:2;
grid-row:1;
align-self:center;
}

.public-page .console{
grid-column:1;
grid-row:1;
align-self:end;
display:flex;
flex-direction:column;
width:100%;
min-height:0;
max-height:48%;
margin-bottom:24px;
padding-top:14px;
overflow:hidden;
}

.public-page .console-scroll{
flex:1 1 auto;
width:100%;
min-height:0;
max-height:none;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
padding:0 8px 6px 6px;
}

.public-page .console-head{
margin-bottom:12px;
}

.public-page .status{
margin:12px 0;
}

.public-page .console-note{
margin-top:16px;
padding-top:12px;
}

.public-page>footer{
width:100%;
height:32px;
margin:0 auto;
padding:4px 5% 6px;
min-height:0;
align-items:center;
}

.public-page>footer a,
.public-page>footer .text-btn{
min-height:18px;
padding:0;
line-height:1;
}

.public-page[data-app-state="record-ready"] .intro,
.public-page[data-app-state="requesting-mic"] .intro,
.public-page[data-app-state="recording"] .intro,
.public-page[data-app-state="preparing"] .intro,
.public-page[data-app-state="preview"] .intro,
.public-page[data-app-state="submitting"] .intro,
.public-page[data-app-state="submitted"] .intro{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.public-page[data-app-state="record-ready"] .console,
.public-page[data-app-state="requesting-mic"] .console,
.public-page[data-app-state="recording"] .console,
.public-page[data-app-state="preparing"] .console,
.public-page[data-app-state="preview"] .console,
.public-page[data-app-state="submitting"] .console,
.public-page[data-app-state="submitted"] .console{
align-self:stretch;
min-height:0;
max-height:100%;
margin-bottom:0;
}

.public-page[data-app-state="record-ready"] .console-scroll,
.public-page[data-app-state="requesting-mic"] .console-scroll,
.public-page[data-app-state="recording"] .console-scroll,
.public-page[data-app-state="preparing"] .console-scroll,
.public-page[data-app-state="preview"] .console-scroll,
.public-page[data-app-state="submitting"] .console-scroll,
.public-page[data-app-state="submitted"] .console-scroll{
height:100%;
min-height:0;
}

.public-page[data-app-state="record-ready"] .console-note,
.public-page[data-app-state="requesting-mic"] .console-note,
.public-page[data-app-state="recording"] .console-note,
.public-page[data-app-state="preparing"] .console-note,
.public-page[data-app-state="preview"] .console-note,
.public-page[data-app-state="submitting"] .console-note{
display:none;
}

.public-page.layout-custom .intro{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.public-page.cinema-mode{
display:block;
position:relative;
overflow:hidden;
background:radial-gradient(circle at 50% 48%,#16403d99 0,transparent 46%),var(--bg);
}

.public-page.cinema-mode>header{
position:fixed;
top:max(12px,env(safe-area-inset-top));
right:max(14px,env(safe-area-inset-right));
z-index:30;
width:auto;
min-height:0;
padding:0;
margin:0;
border:0;
}

.public-page.cinema-mode>header .brand,
.public-page.cinema-mode>header .back,
.public-page.cinema-mode #layoutToggle,
.public-page.cinema-mode #layoutReset,
.public-page.cinema-mode>footer,
.public-page.cinema-mode .intro,
.public-page.cinema-mode .console{
display:none!important;
}

.public-page.cinema-mode .scene{
height:100vh;
height:100dvh;
max-width:none;
padding:0;
display:grid;
grid-template-columns:1fr;
place-items:center;
overflow:hidden;
}

.public-page.cinema-mode .phone-area{
grid-column:1;
grid-row:1;
align-self:center;
width:min(440px,calc(100vw - 28px));
translate:0 0;
transform:none;
zoom:var(--cinema-scale,1);
animation:cinema-phone-in .6s cubic-bezier(.18,.8,.22,1) both;
}

@keyframes cinema-phone-in{
from{opacity:0;translate:0 18px}
}
}

@media(min-width:901px) and (max-height:820px){
.public-page{
grid-template-rows:61px minmax(0,1fr);
}

.public-page>header{
height:61px;
}

.public-page>footer{
display:none;
}

.public-page .scene{
padding-top:5px;
padding-bottom:5px;
}

.public-page .intro{
padding-top:0;
}

.public-page .intro h1{
font-size:clamp(40px,4.2vw,60px);
margin:14px 0 10px;
line-height:.98;
}

.public-page .intro .lede{
font-size:13px;
line-height:1.5;
}

.public-page .manifest{
margin-top:18px;
padding-top:10px;
}

.public-page .caption{
margin-top:9px;
}

.public-page .phone-area{
max-width:370px;
}

.public-page .booth-sign{
padding:8px 14px;
font-size:17px;
min-height:42px;
}

.public-page .phone{
margin-top:10px;
padding:14px 18px 10px;
}

.public-page .plate{
padding-bottom:9px;
}

.public-page .hardware{
padding-top:13px;
gap:16px;
}

.public-page .receiver{
width:64px;
height:238px;
}

.public-page .handle{
height:164px;
top:37px;
left:16px;
}

.public-page .ear,.public-page .mouth{
width:64px;
height:70px;
}

.public-page .ear:after,.public-page .mouth:after{
inset:17px 14px;
}

.public-page .display{
min-height:78px;
padding:8px;
}

.public-page .display strong{
font-size:18px;
}

.public-page .keypad{
gap:5px;
margin-top:12px;
}

.public-page .keypad>button{
min-height:38px;
font-size:17px;
padding:3px 0 2px;
}

.public-page .coin-slot{
margin:11px 0;
}

.public-page .cord{
height:43px;
margin-top:-6px;
}

.public-page .instruction{
margin:0 0 12px 22px;
padding:9px 8px;
}

.public-page .instruction p{
font-size:15px;
margin:2px 0;
}

.public-page .console{
max-height:45%;
}
}

@media(max-width:900px){
.public-page .layout-panel{
translate:0 0!important;
}
}