.ip{--ip-w:300px;--ip-status:calc(var(--ip-w) * .1667);--ip-pt:calc(var(--ip-w) * .002351);width:var(--ip-w);height:calc(var(--ip-w) * 2.0667);border-radius:calc(var(--ip-w) * .17);box-shadow:inset 0 0 0 1px #ffffff73, inset 0 0 0 calc(var(--ip-w) * .012) #121214, inset 0 0 0 calc(var(--ip-w) * .014) #2a2a2e, 0 40px 70px -40px #10182899, 0 14px 30px -18px #10182866;-webkit-font-smoothing:antialiased;background:linear-gradient(155deg,#a9a9ae 0%,#6a6a70 40%,#4f4f55 60%,#8d8d93 100%);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Instrument Sans,Arial,sans-serif;position:relative}.ip-btn{width:calc(var(--ip-w) * .0117);background:linear-gradient(90deg,#4a4a4f,#7a7a80);border-radius:2px;position:absolute}.ip-btn--mute{left:calc(var(--ip-w) * -.0117);height:4.2%;top:19%}.ip-btn--vol1{left:calc(var(--ip-w) * -.0117);height:8%;top:26.5%}.ip-btn--vol2{left:calc(var(--ip-w) * -.0117);height:8%;top:36.5%}.ip-btn--side{right:calc(var(--ip-w) * -.0117);height:12.6%;top:30.6%}.ip-screen{inset:calc(var(--ip-w) * .038);border-radius:calc(var(--ip-w) * .135);color:#000;background:#fff;position:absolute;overflow:hidden}.ip-island{z-index:5;left:50%;top:calc(var(--ip-pt) * 11);width:calc(var(--ip-pt) * 126);height:calc(var(--ip-pt) * 37);background:#000;border-radius:999px;position:absolute;transform:translate(-50%)}.ip-status{z-index:4;grid-template-columns:minmax(0, 1fr) calc(var(--ip-pt) * 126) minmax(0, 1fr);grid-template-rows:calc(var(--ip-pt) * 37);height:var(--ip-status);padding:calc(var(--ip-pt) * 11) 0 0;font-size:calc(var(--ip-pt) * 17);letter-spacing:-.01em;color:#000;pointer-events:none;align-items:center;font-weight:600;line-height:1;display:grid;position:absolute;top:0;left:0;right:0}.ip-ear{justify-content:center;align-items:center;min-width:0;height:100%;display:inline-flex}.ip-status-l{grid-column:1}.ip-status-r{gap:calc(var(--ip-pt) * 5.5);grid-column:3}.ip-time{white-space:nowrap}.ip-signal{align-items:flex-end;gap:calc(var(--ip-pt) * 1.6);height:calc(var(--ip-pt) * 11);display:inline-flex}.ip-signal i{width:calc(var(--ip-pt) * 3);border-radius:calc(var(--ip-pt) * .9);background:currentColor}.ip-signal i:first-child{height:36%}.ip-signal i:nth-child(2){height:57%}.ip-signal i:nth-child(3){height:79%}.ip-signal i:nth-child(4){height:100%}.ip-wifi{width:calc(var(--ip-pt) * 15.5);height:calc(var(--ip-pt) * 11.6);display:block;overflow:visible}.ip-battery{width:calc(var(--ip-pt) * 25);height:calc(var(--ip-pt) * 12);margin-right:calc(var(--ip-pt) * 2.5);border:max(1px, calc(var(--ip-pt) * 1)) solid color-mix(in srgb, currentColor 40%, transparent);border-radius:calc(var(--ip-pt) * 4);position:relative}.ip-battery:after{content:"";right:calc(var(--ip-pt) * -3.2);width:calc(var(--ip-pt) * 1.6);height:calc(var(--ip-pt) * 4.2);border-radius:0 calc(var(--ip-pt) * 1.2) calc(var(--ip-pt) * 1.2) 0;opacity:.4;background:currentColor;position:absolute;top:50%;transform:translateY(-50%)}.ip-battery i{inset:calc(var(--ip-pt) * 1.2);border-radius:calc(var(--ip-pt) * 2.4);background:currentColor;position:absolute}.ip[data-lock] .ip-time{visibility:hidden}.ip-screen:has([data-ip-lock]) .ip-time{visibility:hidden}.ip-content{position:absolute;inset:0}.ip-home{z-index:6;left:50%;bottom:calc(var(--ip-w) * .027);width:calc(var(--ip-w) * .4267);height:calc(var(--ip-w) * .0167);background:#000;border-radius:999px;position:absolute;transform:translate(-50%)}.ip-screen[data-dark]{background:#000}.ip-screen[data-dark] .ip-status{color:#fff}.ip-screen[data-dark] .ip-home{background:#fff}.ip[data-bar] .ip-status{background:var(--ip-bar,#f7f7f8);color:var(--ip-bar-fg,#000);pointer-events:none}.ip[data-bar] .ip-content{top:var(--ip-status)}.ip-safari{z-index:5;left:calc(var(--ip-pt) * 14);right:calc(var(--ip-pt) * 14);bottom:calc(var(--ip-pt) * 24);align-items:center;gap:calc(var(--ip-pt) * 8);pointer-events:none;color:#000;display:flex;position:absolute}.ip-safari-btn,.ip-safari-url{height:calc(var(--ip-pt) * 48);box-shadow:inset 0 0 0 max(.5px, calc(var(--ip-pt) * .5)) #ffffffe6, 0 calc(var(--ip-pt) * 4) calc(var(--ip-pt) * 16) #00000029;-webkit-backdrop-filter:blur(12px)saturate(180%);backdrop-filter:blur(12px)saturate(180%);background:#ffffffc7;border-radius:999px;justify-content:center;align-items:center;display:inline-flex}.ip-safari-btn{width:calc(var(--ip-pt) * 48);flex:none}.ip-safari-btn svg{width:auto;height:calc(var(--ip-pt) * 17)}.ip-safari-btn:last-child svg{height:calc(var(--ip-pt) * 4.5)}.ip-safari-url{min-width:0;padding:0 calc(var(--ip-pt) * 14);font-size:calc(var(--ip-pt) * 16);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;flex:auto;font-weight:500;line-height:1;overflow:hidden}.ip[data-bar-tone=dark] .ip-safari{color:#fff}.ip[data-bar-tone=dark] .ip-home{background:#fff}.ip[data-bar-tone=dark] :is(.ip-safari-btn,.ip-safari-url){box-shadow:inset 0 0 0 max(.5px, calc(var(--ip-pt) * .5)) #ffffff24, 0 calc(var(--ip-pt) * 4) calc(var(--ip-pt) * 16) #0000004d;background:#28282cb8}