*{box-sizing:border-box;margin:0}html,body{height:100%;background:#000;color:#fff;font-family:system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}
main{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 10px)}
#time{font-size:min(34vw,62vh);font-weight:700;line-height:1;margin-top:3vh;font-variant-numeric:tabular-nums}
#ampm{font-size:6vh;opacity:.7}#date{font-size:min(7vw,6vh)}#nextAlarm{font-size:3.5vh;opacity:.7;min-height:4vh}
#answer{font-size:3.2vh;max-height:22vh;overflow:auto;text-align:center;padding:0 8px;width:100%}
.big{font-size:5vh;min-height:12vh;min-width:0;border:0;border-radius:3vh;background:#222;color:inherit;padding:1vh 3vh;cursor:pointer}
.big:active{transform:scale(.95)}
.talk{width:92%;font-size:8vh;min-height:16vh;background:#1554c0}.talk.listening{background:#c01515}.talk.thinking{background:#7a5c00}
.bar{display:flex;gap:2vw;width:100%}.bar .big{flex:1;padding:1vh 0}
.panel{position:fixed;inset:0;background:#000;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.panel h1{font-size:6vh}.panel h2{font-size:4vh}.hidden{display:none!important}
.green{background:#137a2c}.red{background:#b01818}
.setter{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.num{font-size:12vh;font-weight:700}.adj{min-height:9vh}
#alarmList{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
#alarmList li{display:flex;justify-content:space-between;align-items:center;font-size:7vh;background:#111;border-radius:2vh;padding:1vh 2vh}
.pick{display:flex;gap:8px}.who{flex:1}.who.on{background:#1554c0;outline:4px solid #fff}
label{display:flex;flex-direction:column;font-size:3vh;gap:4px}input{font-size:3vh;padding:1.5vh;border-radius:1vh;border:1px solid #555;background:#111;color:#fff}
summary{font-size:3vh;padding:1vh 0}
#ringing{position:fixed;inset:0;background:#b01818;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;animation:p 1s infinite}
#ringing .big{width:85%;font-size:9vh;min-height:20vh;background:#000}#ringTime{font-size:18vh;font-weight:700}
@keyframes p{50%{background:#600}}
body.dimred main{color:#ff2a00;filter:brightness(.45)}body.dimred .big{background:#200;color:#ff2a00}
body.day{background:#fff}body.day main{background:#fff;color:#000}body.day .big{background:#ddd}body.day .talk{background:#1554c0;color:#fff}
@media (orientation:landscape){#time{font-size:min(24vw,48vh);margin-top:1vh}.big{min-height:14vh}.talk{min-height:14vh;font-size:7vh}}
/* v2 */
#homeClock{font-size:3.5vh;opacity:.75;margin-top:1vh}
#status{font-size:3vh;opacity:.75;min-height:3.5vh;text-align:center}
#answerBox{width:100%;display:flex;flex-direction:column;align-items:center;gap:1vh}
#answer{font-size:4vh;line-height:1.25;max-height:20vh}
.ansBtns{display:flex;gap:2vw}.mid{font-size:3vh;min-height:7vh;border:0;border-radius:2vh;background:#222;color:inherit;padding:0 2.5vh}
.talkRow{display:flex;gap:2vw;width:100%}.talkRow .talk{flex:1;width:auto}
.whoBtn{font-size:3.5vh;min-width:24vw;background:#333}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.list li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:6vh;background:#111;border-radius:2vh;padding:1vh 2vh}
.list li span{flex:1}.hist li{display:block;font-size:2.8vh}.hist b{color:#8cf}
.hint{font-size:2.6vh;opacity:.7}.toggle.on,.snd.on,.stime.on{background:#1554c0;outline:3px solid #fff}
select{font-size:3vh;padding:1.5vh;background:#111;color:#fff;border-radius:1vh}
#ringLabel{font-size:7vh}
body.dimred .mid{background:#200;color:#ff2a00}
body.day .mid{background:#ddd}
.talk.hands{box-shadow:0 0 0 6px #0c6 inset}
@media (orientation:landscape){
 main{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto auto 1fr auto auto;column-gap:3vw;align-items:center;justify-items:center}
 #homeClock,#time,#ampm,#date,#status{grid-column:1}#time{grid-row:2/4;font-size:min(20vw,44vh)}
 #homeClock{grid-row:1}#ampm{grid-row:4;align-self:start}#date{grid-row:5}#status{grid-row:6}
 #answerBox{grid-column:2;grid-row:1/4}.talkRow{grid-column:2;grid-row:4/6}.bar{grid-column:2;grid-row:6}
 .bar .big{font-size:4vh;min-height:12vh}.talk{min-height:22vh}
}
.whoBtn{flex:0 0 26%;min-width:0;padding:0}
@media (orientation:landscape){.mid{font-size:4.5vh;min-height:13vh}.whoBtn{font-size:5vh}.talk{font-size:9vh}#answer{font-size:6vh;max-height:40vh}}
.talk{white-space:nowrap;font-size:min(8vh,11vw)}#homeClock{white-space:nowrap;font-size:min(3.5vh,5vw)}