body.home{height:100dvh;overflow:hidden}.app{flex-direction:column;height:100%;display:flex}.bar{--edge:clamp(.8rem, 4vw, 3rem);--round:80px;--gap:12px;background:linear-gradient(to bottom, var(--bar1), var(--bar2));border-top:3px solid var(--cyan);height:112px;padding:0 var(--edge);flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;display:grid;position:relative;box-shadow:0 -2px 10px #0000000f}.bar>:first-child{justify-self:start}.bar>:last-child{justify-self:end}.bar:before,.bar:after{content:"";width:calc(var(--round) + 40px);background:var(--bar1);border:3px solid var(--cyan);z-index:0;border-bottom:0;border-radius:60px 60px 0 0;height:80px;position:absolute;top:-40px}.bar:before{left:calc(var(--edge) - 20px)}.bar:after{right:calc(var(--edge) - 20px)}.bar.terminal:before{width:calc(var(--round) * 2 + var(--gap) + 40px)}.bar-left{gap:var(--gap);display:flex}.round{z-index:1;width:var(--round);height:var(--round);border:2px solid var(--tile-edge);color:#6e7880;background:radial-gradient(circle at 50% 30%,#fff,#eef1f3 70%,#dde2e6);border-radius:50%;place-items:center;margin-top:-42px;padding:0;text-decoration:none;transition:transform .14s,box-shadow .14s,border-color .14s;display:grid;position:relative;box-shadow:0 3px 6px #0000001f,inset 0 -3px 6px #0000000f}.round:hover,.round:focus-visible{border-color:var(--cyan);outline:none;transform:scale(1.06);box-shadow:0 0 0 3px #34beed59,0 0 16px #34beed80}.round:active{transform:scale(.96)}.round svg{width:38px;height:38px}.round[data-menu] svg{filter:drop-shadow(0 1px 1px #0000002e);width:46px;height:auto;margin-top:-2px}.round .lbl{color:var(--text);white-space:nowrap;font-size:.78rem;font-weight:700;position:absolute;bottom:-24px}.clock{text-align:center;z-index:1}.clock .time{color:var(--clock);letter-spacing:.02em;font-variant-numeric:tabular-nums;font-size:clamp(2.3rem,7vw,3.4rem);font-weight:500;line-height:1}.clock .time .colon{animation:2s step-end infinite blink}.clock .date{min-height:1.6em;color:var(--clock);margin-top:.35rem;font-size:1rem;font-weight:700}@media (width<=480px){.bar{--round:66px;--gap:8px}.round{margin-top:-30px}.bar:before,.bar:after{height:70px;top:-30px}.bar:not(.terminal):before,.bar:after{width:100px}.bar.terminal:before{width:calc(var(--round) * 2 + var(--gap) + 30px);left:calc(var(--edge) - 15px)}.round svg{width:30px;height:30px}.round[data-menu] svg{width:38px}}@media (width<=340px){.bar-left .slot-left2{display:none}.bar.terminal:before{width:100px}}@media (prefers-reduced-motion:no-preference){:root[data-flow] .bar{view-transition-name:bar}:root[data-flow] .menu,:root[data-flow] .term-screen{view-transition-name:screen}:root[data-flow] .slot-left{view-transition-name:bar-left}:root[data-flow] .slot-left2{view-transition-name:bar-left2}:root[data-flow] .slot-right{view-transition-name:bar-right}}::view-transition-group(bar),::view-transition-group(screen){animation-duration:.45s;animation-timing-function:cubic-bezier(.3,.7,.3,1)}::view-transition-old(bar-left),::view-transition-old(bar-right),::view-transition-new(bar-left),::view-transition-new(bar-right),::view-transition-old(bar-left2),::view-transition-new(bar-left2),::view-transition-old(screen),::view-transition-new(screen){mix-blend-mode:normal}::view-transition-old(bar-left),::view-transition-old(bar-right){animation:.16s cubic-bezier(.5,0,.9,.5) both flip-out}::view-transition-new(bar-left),::view-transition-new(bar-right){animation:.34s cubic-bezier(.25,1.5,.5,1) .16s both flip-in}::view-transition-old(bar-left2){animation:.16s ease-in both pop-out}::view-transition-new(bar-left2){animation:.34s cubic-bezier(.25,1.5,.5,1) .24s both pop-in}:root[data-flow=in]::view-transition-old(screen){animation:.32s cubic-bezier(.5,0,.8,.4) both screen-lift}:root[data-flow=in]::view-transition-new(screen){animation:.5s cubic-bezier(.2,.9,.25,1) 80ms both screen-rise}:root[data-flow=out]::view-transition-old(screen){z-index:1;animation:.3s cubic-bezier(.5,0,.8,.4) both screen-sink}:root[data-flow=out]::view-transition-new(screen){animation:.5s cubic-bezier(.2,.9,.25,1) .1s both screen-settle}@keyframes flip-out{to{transform:perspective(240px)rotateY(90deg)}}@keyframes flip-in{0%{transform:perspective(240px)rotateY(-90deg)}}@keyframes pop-in{0%{opacity:0;transform:scale(.3)translateY(24px)}}@keyframes pop-out{to{opacity:0;transform:scale(.3)translateY(24px)}}@keyframes screen-lift{to{opacity:0;transform:translateY(-12%)}}@keyframes screen-rise{0%{transform:translateY(100%)}}@keyframes screen-sink{to{transform:translateY(100%)}}@keyframes screen-settle{0%{opacity:0;transform:translateY(-12%)}}@media (prefers-reduced-motion:reduce){.round{transition:none}.clock .time .colon{animation:none}}