.lg{--pb:max(16px, env(safe-area-inset-bottom,0px));--cell:min((100vw - 32px) / 5.9, 100vh - 380px, 220px);--band-top:calc(100vh - var(--pb) - var(--cell) - 78px - 5.25vw);--shx:calc(.6 - .6 * var(--px,0));--shy:calc(.8 - .5 * var(--py,0));--sh:#1b23302b;min-height:100dvh;position:relative}body:has(>.lg){background:var(--color-page);padding-bottom:0}.lg-backdrop{pointer-events:none;position:fixed;inset:0;overflow:hidden}.lg-dots{translate:calc(var(--px,0) * 6px) calc(var(--py,0) * 6px);transition:translate .9s var(--ease-soft);background:radial-gradient(circle,#cfd6de 1.3px,#0000 1.9px) 0 0/24px 24px;animation:1.2s backwards fade-in;position:absolute;inset:-30px}.lg-band,.lg-band2{width:120vw;rotate:-5deg;translate:calc(var(--px,0) * 10px) calc(var(--py,0) * 10px);transition:translate .9s var(--ease-soft), background .25s, color .25s;position:absolute;left:-10vw}.lg-band{top:var(--band-top);background:var(--color-notes);height:46px;color:var(--color-ink);box-shadow:calc(var(--shx) * 9px) calc(var(--shy) * 9px) 0 var(--sh);align-items:center;animation:.9s cubic-bezier(.7,0,.3,1) .3s backwards lg-band-in;display:flex;overflow:hidden}.lg-band2{top:calc(var(--band-top) + 58px);background:var(--color-ink);height:7px;box-shadow:calc(var(--shx) * 5px) calc(var(--shy) * 5px) 0 var(--sh);animation:.9s cubic-bezier(.7,0,.3,1) .45s backwards lg-band-in}@keyframes lg-band-in{0%{clip-path:inset(0 100% 0 0)}}.lg-band[data-state=err]{background:var(--color-danger);color:#fff}.lg-band[data-state=ok]{background:var(--color-ok);color:#fff}.lg-band-track{white-space:nowrap;flex:none;display:flex}.lg-band-item{letter-spacing:.18em;flex:none;align-items:center;gap:10px;padding:0 20px;font-size:13px;font-weight:800;display:inline-flex}.lg-band-item svg{fill:currentColor;flex:none;width:14px;height:14px}.lg-bm{width:0;height:0;position:absolute;top:0}.lg-bm.l{left:0}.lg-bm.r{right:0}.lg-dial{--d:min(86vh, 50vw);top:calc(var(--d) * -.12);right:calc(var(--d) * -.22);width:var(--d);height:var(--d);translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -16px);transition:translate .9s var(--ease-soft);pointer-events:auto;cursor:grab;touch-action:none;position:absolute}.lg-dial.grabbing{cursor:grabbing}.lg-dial:before{content:"";background:var(--sh);translate:calc(var(--shx) * var(--d) * .035) calc(var(--shy) * var(--d) * .035);border-radius:50%;animation:.6s 1s backwards fade-in;position:absolute;inset:0}.lg-dial-spin{width:100%;height:100%;animation:1.5s cubic-bezier(.2,1.15,.4,1) backwards lg-dial-in;position:relative}@keyframes lg-dial-in{0%{opacity:0;rotate:-200deg;scale:.7}}.lg-dial-face{width:100%;height:100%;rotate:var(--dr,0deg);display:block}.lg-dial-face text{fill:#c9d1db;font-size:34px;font-weight:700}.lg-dg{transform-box:fill-box;transform-origin:50%}.lg-hub{width:calc(var(--d) * .3);height:calc(var(--d) * .3);animation:tile-pop .6s var(--ease-spring) .9s backwards;place-items:center;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}.lg-hub svg{width:100%;height:100%;fill:var(--color-page);transition:fill .25s;position:absolute;inset:0}.lg-hub b{font-size:calc(var(--d) * .07);letter-spacing:-.04em;font-weight:800;transition:color .25s;position:relative}.lg-hub[data-state=ok] svg{fill:var(--color-ok)}.lg-hub[data-state=err] svg{fill:var(--color-danger)}.lg-hub[data-state] b{color:#fff}.lg-pointer{top:calc(50% - var(--d) * .024);left:calc(var(--d) * -.05);width:calc(var(--d) * .042);height:calc(var(--d) * .048);background:var(--color-ledger);clip-path:polygon(0 0,100% 50%,0 100%);transition:background .2s;animation:.4s 1.2s backwards fade-in;position:absolute}.lg-pointer.err{background:var(--color-danger)}.lg-stage{min-height:100dvh;padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) var(--pb) max(16px, env(safe-area-inset-left,0px));pointer-events:none;flex-direction:column;display:flex;position:relative}.lg-pw,.lg-cell{pointer-events:auto}.lg-top{min-height:30px;font-size:12px;font-weight:700}.lg-head{flex-direction:column;gap:20px;width:min(100%,420px);margin-top:clamp(16px,6vh,64px);display:flex}.lg-eyebrow{letter-spacing:.22em;color:var(--color-faint);animation:line-in .6s var(--ease-soft) backwards;margin:0 0 12px;font-size:10.5px;font-weight:800}.lg-clock{letter-spacing:-.04em;text-shadow:calc(var(--shx) * .045em) calc(var(--shy) * .045em) 0 var(--sh);animation:line-in .6s var(--ease-soft) 40ms backwards;align-items:flex-start;font-size:min(120px,10vw,15vh);font-weight:800;line-height:.85;display:flex}.lg-colon{flex-direction:column;gap:.2em;margin:.2em .1em 0;display:flex}.lg-colon i{background:var(--color-ink);width:.14em;height:.14em;transition:opacity .25s}.lg-colon.dim i{opacity:.18}.lg-sec{color:var(--color-ledger);margin:.06em 0 0 .1em;font-size:.38em;display:flex}.lg-meta{letter-spacing:.12em;color:var(--color-muted);animation:line-in .6s var(--ease-soft) 80ms backwards;margin:10px 0 0;font-size:12px;font-weight:700}.lg-pw{animation:line-in .6s var(--ease-soft) .12s backwards;flex-direction:column;gap:10px;display:flex}.lg-pw-box{--pw-sh:calc(var(--shx) * 8px) calc(var(--shy) * 8px) 0 var(--sh);background:var(--color-panel);height:56px;box-shadow:var(--pw-sh);border-radius:14px;align-items:center;padding:0 8px 0 18px;transition:box-shadow .2s;display:flex;position:relative}.lg-pw-box:focus-within{box-shadow:0 0 0 2px var(--color-ledger), var(--pw-sh)}.lg-pw-box input{z-index:1;opacity:0;cursor:text;border:0;width:100%;height:100%;margin:0;padding:0 18px;font-size:16px;position:absolute;inset:0}.lg-track{flex:1;align-items:center;min-width:0;height:100%;display:flex;overflow:hidden}.lg-glyphs{flex:none;align-items:center;gap:7px;display:flex}.lg-glyphs i{width:15px;height:15px;animation:lg-g-in .45s var(--ease-spring);flex:none}.lg-glyphs svg{width:100%;height:100%;fill:var(--c);display:block;overflow:visible}@keyframes lg-g-in{0%{rotate:-120deg;scale:0}}.lg-caret{background:var(--color-ink);opacity:0;flex:none;width:9px;height:20px;margin-left:6px}.lg-glyphs:empty+.lg-caret{margin-left:0}.lg-pw-box:focus-within .lg-caret{opacity:1;animation:1s step-end infinite blink}.lg-ph{color:var(--color-faint);white-space:nowrap;margin-left:6px;font-size:13.5px}.lg-glyphs:not(:empty)~.lg-ph{display:none}.lg-go{z-index:2;color:#fff;cursor:pointer;background:0 0;border:0;flex:none;place-items:center;width:42px;height:42px;padding:0;display:grid;position:relative}.lg-go:before{content:"";background:var(--color-ink);transition:rotate .55s var(--ease-spring), background .2s;border-radius:5px;position:absolute;inset:7px;rotate:45deg}.lg-go:hover:before,.lg-go:focus-visible:before{background:var(--color-ledger);rotate:135deg}.lg-go:focus-visible{outline:none}.lg-go span{font-size:15px;font-weight:800;position:relative}.lg-msg{min-height:1.5em;color:var(--color-muted);margin:0;font-size:11.5px}.lg-msg.err{color:#a4161a;font-weight:700}.lg-msg.warn{color:#9a5b00;font-weight:700}.lg-mcur{vertical-align:-.18em;background:currentColor;width:.55em;height:1.05em;margin-left:2px;animation:.8s step-end infinite blink;display:inline-block}.lg-row{align-items:flex-end;gap:calc(var(--cell) * .1);margin-top:auto;padding-top:24px;display:flex}.lg-cell{width:var(--cell);height:var(--cell);cursor:pointer;animation:lg-cell-in .8s var(--ease-spring) backwards;animation-delay:calc(var(--i) * 70ms + .12s);flex:none;place-items:center;display:grid;position:relative}.lg-cell.dot{width:calc(var(--cell) * .36);height:calc(var(--cell) * .36);margin-bottom:calc(var(--cell) * .08)}@keyframes lg-cell-in{0%{opacity:0;translate:0 50px;rotate:-30deg}}.lg-shape{filter:drop-shadow(calc(var(--shx) * var(--cell) * .07) calc(var(--shy) * var(--cell) * .07) 0 var(--sh));translate:calc(var(--px,0) * var(--dp)) calc(var(--py,0) * var(--dp));transition:translate .8s var(--ease-soft);position:absolute;inset:0}.lg-sp{background:var(--c);clip-path:var(--clip);rotate:var(--rot,0deg);transition:clip-path .55s var(--ease-spring), background-color .35s, rotate .6s var(--ease-spring) var(--td,0s);position:absolute;inset:0}.lg-sp i{top:var(--tky);background:var(--tx);opacity:.55;width:7%;height:7%;transition:top .45s var(--ease-soft), background-color .35s;border-radius:50%;margin:-3.5% 0 0 -3.5%;position:absolute;left:50%}.lg-cell.dot .lg-sp i{display:none}.lg-cell b{font-size:calc(var(--cell) * .52);color:var(--tx);scale:var(--lsc);translate:calc(var(--px,0) * var(--dp) * .4) calc(var(--py,0) * var(--dp) * .4 + var(--ly));transition:translate .5s var(--ease-soft), scale .5s var(--ease-spring), color .35s;pointer-events:none;font-weight:800;line-height:1;position:relative}.lg-cell.fast .lg-sp{transition:clip-path .12s linear, background-color .12s linear, rotate .6s var(--ease-spring)}.morph-slice .lg-backdrop,.morph-slice .pet{position:absolute}.morph-slice .lg,.morph-slice .lg *{transition:none!important;animation:none!important}@media (max-height:640px){.lg-eyebrow,.lg-meta{display:none}.lg-head{gap:14px;margin-top:12px}}@media (max-width:767px){.lg{--cell:calc((100vw - 32px) / 5.9);--band-top:calc(100dvh - var(--pb) - var(--cell) - 140px)}.lg-clock{font-size:72px}.lg-dial{--d:330px;top:calc(50dvh - 110px);right:-130px}.lg-band,.lg-band2{rotate:-9deg}.lg-band{height:38px}.lg-band2{top:calc(var(--band-top) + 48px);height:6px}.lg-band-item{padding:0 14px;font-size:11.5px}.lg .pet-sz{scale:.8}}
