:root{color-scheme:dark;font-family:Arial,"PingFang TC","Microsoft JhengHei",sans-serif;background:#000;color:#eee;font-synthesis:none;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:focus-visible{outline:2px solid #21aaff;outline-offset:4px}button:disabled{cursor:wait}button:active{filter:brightness(.8)}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.app{position:relative;width:min(100%,480px);height:100svh;height:100dvh;min-height:580px;margin:auto;overflow:hidden;background:#000;container-type:inline-size}main{position:absolute;inset:0 0 calc(86px + env(safe-area-inset-bottom))}.page{position:absolute;inset:0;overflow:auto}.gate-page{overflow:hidden}.brand{position:absolute;top:12%;left:13%;width:74%}.brand svg{display:block;width:100%;height:auto}.approval{position:absolute;top:33%;width:100%;text-align:center;font-size:10cqw;line-height:1.1;color:#fff;font-weight:400;white-space:nowrap}.employee-number,.date,.time{position:absolute;left:4%;width:92%;padding:0;background:transparent;text-align:center;line-height:1.08;font-weight:400;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}.employee-number{top:43%;font-size:9.7cqw}.date{top:50.5%;font-size:12.5cqw}.time{top:59%;font-size:15.2cqw}.camera-button{position:absolute;top:69%;left:19%;width:62%;height:31%;background:transparent;padding:0;display:flex;align-items:center;justify-content:center}.camera{width:100%;height:100%;overflow:visible}.version{position:absolute;bottom:0;right:5%;font-size:3.6cqw;color:#ccc}.version small{font-size:.58em;color:#777;vertical-align:middle}.tab-bar{position:absolute;z-index:3;bottom:max(14px,env(safe-area-inset-bottom));left:4.8%;right:4.8%;height:64px;display:flex;border:1px solid #303032;background:rgba(20,20,20,.96);border-radius:40px;padding:3px;box-shadow:0 0 0 1px #111}.tab{width:20%;padding:6px 0 5px;background:transparent;border-radius:35px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;color:#e6e6e6}.tab svg{width:29px;height:29px;overflow:visible}.tab span{font-size:10px;line-height:1.2;white-space:nowrap}.tab.active{background:#353535;color:#17a9fb}.records-page{padding:26% 4.8% 20px}.record{display:flex;align-items:center;gap:3px;min-height:51px}.record-state{font-size:6.3cqw;letter-spacing:-.06em;white-space:nowrap;font-weight:bold;color:#ff0072;-webkit-text-stroke:.45px white;text-shadow:1px 1px 0 #bbb,-1px -1px 0 #bbb}.record-state.open{color:#202bff}.record-details{align-self:stretch;flex:1;min-width:0;border-bottom:1px solid #292929;padding:3px 0}.record-details time{display:block;font-size:3.7cqw;white-space:nowrap;letter-spacing:-.025em;line-height:1.25}.record-details small{display:block;margin-top:4px;color:#888;font-size:3.2cqw}.alarm-toolbar{position:relative;display:flex;justify-content:space-between;align-items:center;margin:60px 4.5% 20px}.pill{border:1px solid #303032;border-radius:30px;background:#121212;padding:11px 17px;font-size:17px}.pill.plus{width:44px;height:44px;font-size:36px;line-height:32px;padding:0;font-weight:200}.clear-alarms{position:absolute;bottom:16px;left:0;width:100%;background:transparent;color:#009dff;font-size:16px}.alarm-row{display:flex;margin:0 6%;padding:16px 0;border-bottom:1px solid #2a2a2c;align-items:center;gap:12px}.alarm-clock{font-size:34px;font-variant-numeric:tabular-nums}.alarm-caption{font-size:12px;color:#999}.alarm-toggle{margin-left:auto;width:44px;height:26px;border-radius:20px;background:#353535;padding:3px}.alarm-toggle:after{content:"";display:block;width:20px;height:20px;border-radius:50%;background:white}.alarm-toggle.on{background:#2eb75b}.alarm-toggle.on:after{margin-left:18px}.delete-alarm{margin-left:auto;color:#ff5e66;background:#291619;border-radius:20px;padding:8px 10px;font-size:12px}.info-page,.more-page{background:#fff;color:#111;top:12%;bottom:-2px}.light-heading{font-size:15px;color:#777;padding:20px 6% 8px}.light-row{display:flex;align-items:center;width:100%;height:67px;background:white;color:#111;text-align:left;padding:0 5%;gap:16px}.light-row svg{width:46px;height:55px;flex-shrink:0}.light-row span{display:flex;align-items:center;height:100%;flex:1;border-bottom:1px solid #aaa;font-size:17px}.light-row b{font-size:35px;font-weight:200;align-self:center}.registration{height:63px;gap:16px}.registration svg{width:60px;height:60px}.registration span{font-size:18px}.registration b{font-size:36px}#registration-details{padding:25px 8%;font-size:15px}#registration-details p{font-weight:600}#registration-details dl{display:grid;grid-template-columns:80px 1fr;gap:14px}#registration-details dd{margin:0;color:#666}#registration-details .secondary-action{margin-top:12px;background:#ededed;color:#222}.dark-dialog{color:#eee;background:rgba(23,22,23,.96);border:1px solid #3a373a;border-radius:34px;padding:24px 26px 16px;width:calc(100% - 64px);max-width:355px;box-shadow:0 4px 30px #0008;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.dark-dialog::backdrop{background:rgba(0,0,0,.49)}.dark-dialog h2{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 9px}.dark-dialog p{margin:0;font-size:15px;line-height:1.5;color:#a7a4a7}.camera-dialog{padding:24px 16px 16px}.camera-dialog h2,.camera-dialog p{margin-left:14px;margin-right:14px}.dialog-actions{display:flex;gap:8px;margin-top:22px}.dialog-actions button{flex:1;border-radius:35px;background:#363435;font-size:21px;height:50px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.dialog-heading h2{margin:0}.close{width:30px;height:30px;border-radius:50%;background:#343436;color:#bbb;font-size:24px;line-height:26px}.settings-dialog{padding:22px;border-radius:26px;max-height:calc(100dvh - 32px);overflow:auto}.settings-dialog .form-intro{font-size:13px;margin-bottom:18px}.settings-dialog label,.settings-dialog legend{display:block;font-size:13px;color:#ccc;margin:16px 0 7px}.settings-dialog input:not([type=radio]){width:100%;min-width:0;display:block;color:#fff;background:#29292c;border:1px solid #424246;border-radius:10px;padding:11px 10px;font-size:16px;outline:none}.settings-dialog input:focus{border-color:#1aa9ff}.field-help{display:block;font-size:11px;color:#888;margin-top:7px;line-height:1.4}.settings-dialog fieldset{padding:0;border:0;margin:0}.settings-dialog legend{margin-bottom:7px}.segmented{display:flex;border:1px solid #424246;background:#29292c;border-radius:10px;padding:3px}.segmented label{margin:0;flex:1;text-align:center;position:relative;cursor:pointer}.segmented input{position:absolute;opacity:0}.segmented span{display:block;padding:9px 3px;border-radius:7px;font-size:12px}.segmented input:checked+span{background:#535359;color:white}.segmented input:focus-visible+span{outline:2px solid #1aa9ff}.settings-dialog .local-note{font-size:11px;color:#85858c;margin-top:18px;line-height:1.6}.settings-actions{display:flex;gap:8px;margin-top:20px}.primary-action,.secondary-action{padding:12px 14px;border-radius:11px;font-size:13px}.primary-action{background:#189ff1;color:white;flex:1}.secondary-action{background:#333336;color:#cfcfd4}.full-width{width:100%;margin-top:18px}.settings-dialog ol{padding-left:20px;font-size:14px;color:#bbb;line-height:1.7}.settings-dialog li{margin:10px 0}.busy{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#0002}.spinner{width:60px;height:60px;border:6px solid #7775;border-top-color:#eee;border-radius:50%;animation:spin .75s linear infinite}.toast{position:absolute;z-index:20;bottom:100px;left:50%;transform:translateX(-50%);max-width:85%;width:max-content;padding:11px 17px;background:#323236;color:#fff;border:1px solid #555;border-radius:30px;box-shadow:0 5px 20px #0005;font-size:13px;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:600px){body{background:#151517}.app{width:min(480px,48dvh);box-shadow:0 0 70px #0007;border-left:1px solid #222;border-right:1px solid #222}.tab span{font-size:11px}.tab-bar{height:68px}.tab svg{width:31px;height:31px}}@media(max-height:700px){.approval{top:34%}.employee-number{top:44%}.date{top:52%}.time{top:61%;font-size:13.5cqw}.camera-button{top:70%;height:29%;width:55%;left:22.5%}.brand{width:64%;left:18%}.tab-bar{height:58px}.tab svg{height:25px}.version{font-size:12px}main{bottom:78px}.record{min-height:49px}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:1.5s}}

/* Reference camera proportions: the body and red circle share the same scale. */
.camera-button{top:auto;bottom:0;left:18%;width:64%;height:auto;aspect-ratio:1}
.camera{display:block;flex:none;width:100%;height:100%}
.camera-dialog{width:73%;max-width:350px;padding:22px 16px 16px;border-radius:35px;background:rgba(21,20,21,.94);border-color:#3b383a;box-shadow:inset 0 -8px 18px #5b2d2d12,0 8px 30px #0004}
.camera-dialog h2{font-size:17px;margin-bottom:8px}
.camera-dialog p{font-size:14.5px;line-height:1.45;color:#a6a3a6}
.camera-dialog .dialog-actions{margin-top:16px;gap:8px}
.camera-dialog .dialog-actions button{height:48px;font-size:20px;background:rgba(67,64,66,.67)}
.busy{background:transparent;display:block}
.spinner{position:absolute;left:24%;top:47%;width:52%;height:auto;border:0;border-radius:0;animation:spin 1s steps(12) infinite}
@media(max-height:700px){.camera-button{top:auto;bottom:0;left:18%;width:64%;height:auto}.camera-dialog{padding:18px 14px 14px}.camera-dialog p{font-size:13px}.camera-dialog .dialog-actions{margin-top:12px}}
.camera-dialog{background:linear-gradient(145deg,rgba(21,21,21,.98),rgba(28,25,27,.98));backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
.camera-dialog h2{font-size:clamp(15px,3.8vw,17px)}
.camera-dialog p{font-size:clamp(12px,3.15vw,15px);line-height:1.45}
.camera-dialog .dialog-actions button{height:clamp(42px,10.8vw,48px);font-size:clamp(17px,4.5vw,20px)}