*{box-sizing:border-box;scrollbar-width:none}*::-webkit-scrollbar{display:none}html,body{margin:0;height:100%}body{font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;background:radial-gradient(ellipse at 40% 20%,#434750,#191a20 72%);display:grid;place-items:center;color:#17171a}button,input,textarea,select{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #3388ff;outline-offset:-2px}#device{width:min(100vw,430px);height:min(920px,100dvh);position:relative;isolation:isolate;overflow:hidden;background:#23232a;box-shadow:0 24px 80px #0006;display:flex;flex-direction:column} @media(min-width:550px) and (min-height:650px){#device{height:min(900px,calc(100dvh - 32px));border-radius:40px;border:5px solid #1a1b1d}}.wall{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08091155,transparent 34%,transparent 60%,#08091155),var(--paper) center center/cover;background-color:#30323b}#system{height:calc(37px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 24px 0;display:flex;align-items:center;gap:5px;flex:none;color:#fff;font:600 14px/1 system-ui;z-index:3}#system b{margin-right:auto}.signal{height:11px;display:flex;align-items:flex-end;gap:1px}.signal i{background:currentColor;width:3px;border-radius:1px}.signal i:nth-child(1){height:4px}.signal i:nth-child(2){height:6px}.signal i:nth-child(3){height:8px}.signal i:nth-child(4){height:11px}#system svg{width:16px;fill:currentColor}.battery{width:20px;height:10px;outline:1px solid currentColor;border:2px solid transparent;border-radius:2px;background:currentColor;background-clip:padding-box;position:relative}.battery:after{content:"";position:absolute;left:19px;top:1px;height:4px;border-left:2px solid currentColor}
#view{flex:1;min-height:0;position:relative;overflow:auto;isolation:isolate}#homekey{height:calc(20px + env(safe-area-inset-bottom));padding:3px 0 env(safe-area-inset-bottom);width:100%;display:grid;place-items:center;flex:none;color:white}#homekey i{width:110px;height:4px;background:currentColor;border-radius:8px}.apps #system,.apps #homekey{color:#171719;background:#f6f6f8}.apps #view{background:white}.lock,.pin,.desk{height:100%;color:white}.lock{display:flex;flex-direction:column;text-align:center;padding:1vh 16px 12px}.lockmark{font-size:19px;height:27px}.lockdate{font-size:19px;font-weight:600}.locktime{font-size:clamp(68px,11dvh,100px);line-height:1.06;font-weight:650;letter-spacing:-5px}.lock-bottom{margin-top:auto;display:grid;gap:20px}.lockmsg,#banner button{width:100%;background:#f5f5f3e6;backdrop-filter:blur(16px);border-radius:19px;padding:12px 14px;color:#1d2023;display:flex;align-items:center;text-align:left;gap:10px;box-shadow:0 3px 14px #0001}.lockmsg img,#banner img{width:36px;height:36px;border-radius:9px}.msgcopy{display:grid;flex:1;font-size:14px}.msgcopy b{font-size:15px}.lockmsg small,#banner small{align-self:flex-start;color:#666;font-size:11px}.unlockbtn{font-weight:600;text-shadow:0 1px 5px #000}.pin{background:#181b27b3;backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;flex-direction:column}.pin h2{font-size:20px}.pindots{display:flex;gap:17px;margin:0 0 18px}.pindots i{width:12px;height:12px;border:1.5px solid white;border-radius:50%}.pindots .filled{background:white}.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 20px}.pinpad button{width:clamp(55px,9vh,72px);height:clamp(55px,9vh,72px);border-radius:50%;background:#ffffff38;font-size:30px;display:grid;align-content:center;line-height:1.05}.pinpad small{font-size:10px;letter-spacing:2px;min-height:10px}.pin-actions{display:flex;gap:56px;margin:22px}.desk{display:flex;flex-direction:column;padding:12px 17px 0;overflow:auto}.deskscroll{flex:1;overflow:auto}.widgets{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 3px 20px}.widget{aspect-ratio:1.12;min-height:100px;max-height:180px;padding:13px 15px;border-radius:22px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 3px 12px #0002}.weatherBox{background:linear-gradient(155deg,#4685b3,#76aad1);color:white}.weatherBox strong{font-size:clamp(32px,5vh,47px);line-height:1}.widget small{font-size:12px}.calBox{background:#f9f9fa;color:#37373b}.calBox label{font-size:13px;color:#d6463c;font-weight:bold}.calBox strong{font-size:44px;font-weight:400;line-height:1}.calBox small{color:#777}.appgrid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:17px}.tile{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;min-width:0}.tile>span:first-child{position:relative;width:clamp(46px,14vw,59px);aspect-ratio:1;border-radius:23%;box-shadow:0 2px 6px #0002;display:grid;place-items:center}.tile img{width:100%;height:100%;border-radius:23%;display:block}.tile .label{font-size:12px;font-weight:550;text-shadow:0 1px 5px #000,0 0 2px #000}.tile sup{position:absolute;top:-5px;right:-6px;background:#fb453c;border-radius:15px;padding:2px 6px;color:white;font:600 12px/15px system-ui}.calendarIcon{background:white;color:#1e1e21;line-height:1;display:grid;gap:3px}.tile:disabled{cursor:default}.tile:disabled>span:first-child{filter:brightness(.43) saturate(.55)}.calendarIcon small{font-size:10px;color:#ed463d}.calendarIcon b{font-size:28px;font-weight:450}.hupuIcon{background:#df123b;font-size:24px;font-style:italic;font-weight:900}.dots{display:flex;align-items:center;justify-content:center;min-height:29px}.dots button{width:24px;height:27px;color:#ffffff70}.dots button.active{color:white}.dots button:after{content:"";display:inline-block;background:currentColor;width:7px;height:7px;border-radius:50%}.dock{display:flex;align-items:center;justify-content:space-evenly;border-radius:28px;background:#dadbe253;backdrop-filter:blur(20px);padding:11px;max-height:90px}.anniv{display:grid;gap:16px;margin:4px}.anniv article{min-height:97px;padding:19px;border-radius:21px;background:#40434e98;backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 5px #0002}.anniv small{display:block;color:#f2f2f2}.flip{display:flex;align-items:center;gap:4px}.flip b{padding:1px 5px;border-radius:5px;background:linear-gradient(#ffffff48 49%,#ffffff22 50%);font-size:31px;line-height:1.3}.flip em{font-style:normal;font-size:13px}
#banner{position:absolute;z-index:20;top:calc(37px + env(safe-area-inset-top));left:10px;right:10px;pointer-events:none}#banner button{pointer-events:auto;animation:drop .25s ease-out}@keyframes drop{from{transform:translateY(-110%)}to{transform:translateY(0)}}#feedback{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:#222d;color:white;z-index:30;padding:8px 15px;border-radius:20px;width:max-content;max-width:90%;font-size:14px;text-align:center;pointer-events:none}#feedback:empty{display:none}#modal{position:fixed;inset:0;width:min(338px,90vw);border:0;border-radius:20px;padding:22px;background:#fafafa;color:#232326}#modal::backdrop{background:#0006}#modal h3{margin:0 0 8px}#modal p{margin:4px 0 18px;color:#666}#modal audio{width:100%;margin:12px 0}#modal button{color:#0676dd;padding:7px 12px}
.sys{min-height:100%;padding:12px 18px 24px;background:#f5f5f8}.sys h1{margin:12px 0 16px;font-size:31px;letter-spacing:-1px}.sys h2{font-size:17px;margin:20px 0 8px}.sysback{padding:2px 0;color:#1874d5}.rows{background:white;border-radius:15px;overflow:hidden}.sysrow{display:flex;align-items:center;justify-content:space-between;width:100%;border-bottom:1px solid #ddd8;min-height:49px;padding:10px 15px;text-align:left;gap:10px}.sysrow:last-child{border-bottom:0}.sysrow small{color:#83838b}.sysrow img{width:46px;height:46px;border-radius:50%;object-fit:cover}.sys .seg{display:flex;background:#dedee4;border-radius:11px;padding:3px;gap:2px;margin:18px 0}.seg button{flex:1;border-radius:8px;font-size:13px;padding:6px 0}.seg .on{background:white;box-shadow:0 1px 4px #0002}.clockface{text-align:center;font-size:clamp(37px,12vw,57px);letter-spacing:-2px;font-variant-numeric:tabular-nums;padding:38px 0}.clockact{display:flex;justify-content:space-around;margin-bottom:20px}.clockact button,.sys .pill{border-radius:30px;background:#e1e9e2;color:#207d41;padding:11px 19px}.clockact button:disabled{opacity:.45}.sys input[type=number]{width:4em;border:0;border-radius:8px;padding:8px 4px;text-align:center}.timer-input{display:flex;justify-content:center;align-items:center;gap:4px}.weatherview{background:linear-gradient(#548bb5,#a6c1d7);color:white}.weatherview .sysback{color:white}.cityhead{text-align:center;margin:25px 0}.cityhead b{font-size:68px;line-height:1.1}.weatherview .rows{background:#ffffff26}.monthhead{display:flex;align-items:center;justify-content:space-between}.monthhead button{font-size:25px;color:#d7433c}.monthgrid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:3px 0}.monthgrid button{position:relative;aspect-ratio:1;color:#222}.monthgrid .sel{border-radius:50%;background:#de433b;color:white}.monthgrid .event:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#ff8e7b;bottom:4px;left:47%}.monthgrid small{color:#95959b}.reset{color:#cb342d}.sys .switch{width:44px;height:26px;border-radius:20px;background:#d2d2d7;padding:3px;display:flex}.sys .switch i{display:block;width:20px;height:20px;border-radius:50%;background:white}.sys .switch.on{background:#32bd66;justify-content:flex-end}

/* Desktop motion and the live clock icon. */
.desk{overflow:hidden}
.deskviewport{flex:1;min-height:0;overflow:hidden;touch-action:pan-y}
.deskpages{display:flex;width:200%;height:100%;transition:transform .44s cubic-bezier(.22,1,.36,1);will-change:transform}
.deskpages.dragging{transition:none}
.deskpages>.deskscroll{flex:0 0 50%;width:50%;min-width:0;height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.clockIcon{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.clockIcon img{position:absolute;inset:0}
.clock-hand{position:absolute;inset:0;pointer-events:none;animation:clock-turn linear infinite}
.clock-hand::before{content:"";position:absolute;left:50%;bottom:50%;transform:translateX(-50%);border-radius:3px;background:#171719}
.clock-hour{animation-duration:43200s;animation-delay:var(--clock-hour-delay)}
.clock-hour::before{width:2.8px;height:25%}
.clock-minute{animation-duration:3600s;animation-delay:var(--clock-minute-delay)}
.clock-minute::before{width:2px;height:34%}
.clock-second{animation-duration:60s;animation-delay:var(--clock-second-delay)}
.clock-second::before{width:1.5px;height:39%;background:#e54643}
.clock-second::after{content:"";position:absolute;left:calc(50% - .75px);top:50%;width:1.5px;height:10%;background:#e54643}
.clockIcon::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#e54643}
@keyframes clock-turn{to{transform:rotate(360deg)}}

#view{view-transition-name:phone-view;transform-origin:var(--phone-origin-x,50%) var(--phone-origin-y,50%);z-index:1}
#system,#homekey{transition:background-color .18s,color .18s}
.phone-fallback-layer{position:absolute;overflow:auto;background:#fff;pointer-events:none;isolation:isolate}
html.phone-opening::view-transition-old(root),html.phone-opening::view-transition-new(root),html.phone-closing::view-transition-old(root),html.phone-closing::view-transition-new(root){animation:none}
html.phone-opening::view-transition-old(phone-view){z-index:1;animation:desktop-recede .19s cubic-bezier(.22,1,.36,1) both}
html.phone-opening::view-transition-new(phone-view){z-index:2;overflow:hidden;transform-origin:var(--phone-origin-x,50%) var(--phone-origin-y,50%);animation:app-grow .19s cubic-bezier(.22,.8,.2,1) both}
html.phone-closing::view-transition-old(phone-view){z-index:2;overflow:hidden;transform-origin:var(--phone-origin-x,50%) var(--phone-origin-y,50%);animation:app-shrink .17s cubic-bezier(.32,0,.6,1) both}
html.phone-closing::view-transition-new(phone-view){z-index:1;animation:desktop-return .17s cubic-bezier(.22,1,.36,1) both}
@keyframes app-grow{from{transform:scale(.14);border-radius:100px;opacity:.88}to{transform:scale(1);border-radius:0;opacity:1}}
@keyframes app-shrink{from{transform:scale(1);border-radius:0;opacity:1}to{transform:scale(.14);border-radius:100px;opacity:.85}}
@keyframes desktop-recede{from{transform:scale(1);opacity:1}to{transform:scale(.96);opacity:.62}}
@keyframes desktop-return{from{transform:scale(.96);opacity:.62}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.deskpages{transition:none}.clock-hand{animation-play-state:paused}}

/* Compact calendar and weather widgets follow the supplied iPhone reference. */
.widget{aspect-ratio:1;min-height:0;max-height:none;padding:13px 14px;border-radius:23px}
.calBox{background:linear-gradient(150deg,#2b2b2d,#181819);color:#fff}
.calTop{display:flex;align-items:flex-start;gap:8px}
.calTop strong{font-size:clamp(43px,11vw,55px);font-weight:350;line-height:.98}
.calTop>span{display:grid;gap:3px;padding-top:5px;text-align:left}
.calTop small{color:#a6a6aa;font-size:12px}
.calTop label{color:#f45858;font-size:12px}
.calBox .calEmpty{margin:auto 0;color:#a6a6aa;font-size:13px}
.weatherBox{background:linear-gradient(150deg,#abb5c5,#79879c);color:#fff}
.weatherBox>span:first-child{font-size:14px;font-weight:650}
.weatherBox strong{font-size:clamp(49px,12vw,68px);font-weight:300;letter-spacing:-4px;line-height:1}
.weatherSummary{display:flex;align-items:center;gap:7px;text-align:left}
.weatherSummary>span{font-size:20px}
.weatherSummary small{font-size:11px;line-height:1.2}
@media(max-height:520px){.pin{height:auto;min-height:100%;justify-content:flex-start;padding:10px 0}.pin h2{margin:8px 0}.pinpad{gap:5px 20px}.pin-actions{margin:9px}.pindots{margin-bottom:9px}}
.widget{aspect-ratio:1;max-height:none}.lockmark{display:grid;place-content:center}.lockmark i{position:relative;display:block;background:currentColor;border-radius:2px;width:12px;height:9px}.lockmark i:before{content:"";position:absolute;bottom:7px;left:2px;width:8px;height:7px;border:1.7px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0;box-sizing:border-box}.locktime{letter-spacing:-.055em}.lockdate,.locktime,.lockmark{text-shadow:0 1px 6px #0003}
@media (max-height:440px){.pin{padding:4px 0}.pin h2{margin:4px 0;font-size:18px}.pinpad button{width:46px;height:46px;font-size:22px}.pinpad{gap:3px 20px}.pin-actions{margin:5px}.pindots{margin-bottom:6px}.pinpad small{font-size:8px}}