.web-phone-frame,.web-phone-frame *{box-sizing:border-box}.web-phone-frame{aspect-ratio:var(--web-phone-aspect-ratio,428/900);filter:drop-shadow(0 5.6cqw 11.7cqw color-mix(in srgb,var(--xera-color-shadow,#000)38%,transparent));flex:none;container-type:inline-size}@layer components{.web-phone-frame,.web-watch-frame{position:relative}}.web-phone-frame-shell{z-index:1;width:100%;height:100%;padding:var(--web-phone-outer-padding);border:max(1px,.23cqw)solid color-mix(in srgb,var(--web-phone-color)48%,var(--xera-color-shadow,#000));border-radius:var(--web-phone-radius);background:linear-gradient(90deg,color-mix(in srgb,var(--web-phone-color)48%,var(--xera-color-shadow,#000))0%,color-mix(in srgb,var(--web-phone-color)35%,white)7%,var(--web-phone-color)18%,color-mix(in srgb,var(--web-phone-color)88%,white)50%,color-mix(in srgb,var(--web-phone-color)52%,var(--xera-color-shadow,#000))80%,color-mix(in srgb,var(--web-phone-color)42%,white)94%,color-mix(in srgb,var(--web-phone-color)44%,var(--xera-color-shadow,#000))100%),var(--web-phone-color);box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -2px 3px color-mix(in srgb,var(--xera-color-shadow,#000)32%,transparent),0 0 0 1px color-mix(in srgb,var(--xera-color-shadow,#000)62%,transparent);position:relative;overflow:hidden}.web-phone-frame-metal{width:100%;height:100%;padding:var(--web-phone-metal-padding);border:max(1px,.23cqw)solid color-mix(in srgb,var(--web-phone-color)56%,white);border-radius:calc(var(--web-phone-radius) - .94cqw);background:linear-gradient(180deg,color-mix(in srgb,var(--web-phone-color)70%,white)0%,var(--web-phone-color)18%,color-mix(in srgb,var(--web-phone-color)72%,var(--xera-color-shadow,#000))74%,color-mix(in srgb,var(--web-phone-color)42%,var(--xera-color-shadow,#000))100%);position:relative;box-shadow:inset 0 0 0 1px #ffffff29}.web-phone-frame-bezel{width:100%;height:100%;padding:var(--web-phone-bezel-padding);border:max(1px,.47cqw)solid color-mix(in srgb,var(--web-phone-color)26%,var(--xera-color-shadow,#000));border-radius:calc(var(--web-phone-radius) - 1.64cqw);box-shadow:inset 0 0 0 1px #ffffff1f,0 0 0 1px color-mix(in srgb,var(--xera-color-shadow,#000)88%,transparent);background:#050608}.web-phone-frame-screen{border-radius:var(--web-phone-screen-radius);background:var(--xera-color-background,#000);width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.web-phone-screenshot-content{background:var(--xera-color-background,#000);position:absolute;inset:2cqw 0 0;overflow:hidden}.web-phone-screenshot-content[data-placement=belowStatusBar]{inset:var(--web-phone-screenshot-content-top)0 0}.web-phone-screenshot-content>img{object-fit:contain;object-position:center bottom;width:100%;height:100%;display:block}.web-phone-screenshot-content[data-placement=belowStatusBar]>img{object-fit:fill;object-position:top;width:100%;height:auto}.web-phone-frame-status{z-index:11;top:var(--web-phone-status-top);width:var(--web-phone-status-region-width);height:var(--web-phone-status-height);pointer-events:none;color:var(--xera-color-on-background,#fff);justify-content:center;align-items:center;display:flex;position:absolute}.web-phone-frame-time{font-size:var(--web-phone-status-font-size);font-variant-numeric:tabular-nums;font-weight:600;line-height:1;left:2cqw}.web-phone-frame-indicators{gap:var(--web-phone-status-gap);right:2cqw}.web-phone-frame-indicators svg{flex:none;display:block;overflow:visible}.web-phone-frame-cellular{width:4.6cqw;height:2.9cqw}.web-phone-frame-wifi{width:4.6cqw;height:3.6cqw}.web-phone-frame-battery{width:6.8cqw;height:3.3cqw}.web-phone-frame-cellular rect,.web-phone-frame-wifi circle,.web-phone-frame-battery-fill,.web-phone-frame-battery-terminal{fill:currentColor}.web-phone-frame-wifi path{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round}.web-phone-frame-battery-shell{fill:none;stroke:currentColor;stroke-width:1.5px;opacity:.78}.web-phone-frame-battery-terminal{opacity:.7}.web-phone-frame-island{z-index:12;top:var(--web-phone-island-top);width:var(--web-phone-island-width);height:var(--web-phone-island-height);background:#000;border:max(1px,.23cqw) solid #ffffff14;border-radius:999px;position:absolute;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:inset 0 -1px 1px #ffffff0f}.web-phone-frame-island>span{aspect-ratio:1;background:color-mix(in srgb,var(--xera-color-primary-container,#243c54)80%,black);width:7%;box-shadow:inset 0 0 2px color-mix(in srgb,var(--xera-color-primary,#97c4e9)36%,transparent);border-radius:50%;position:absolute;top:37%;right:9%}.web-phone-frame-button{z-index:0;width:var(--web-phone-button-width);border:max(1px,.23cqw)solid color-mix(in srgb,var(--web-phone-color)52%,var(--xera-color-shadow,#000));background:linear-gradient(90deg,color-mix(in srgb,var(--web-phone-color)45%,var(--xera-color-shadow,#000)),color-mix(in srgb,var(--web-phone-color)58%,white)46%,color-mix(in srgb,var(--web-phone-color)50%,var(--xera-color-shadow,#000)));box-shadow:inset 0 0 0 1px #ffffff2e,0 1px 2px color-mix(in srgb,var(--xera-color-shadow,#000)44%,transparent);border-radius:999px;position:absolute;overflow:hidden}.web-phone-frame-action-button,.web-phone-frame-volume-up-button,.web-phone-frame-volume-down-button{left:var(--web-phone-button-offset)}.web-phone-frame-action-button{height:4.7%;top:14.5%}.web-phone-frame-volume-up-button{height:8.7%;top:21.3%}.web-phone-frame-volume-down-button{height:8.7%;top:31%}.web-phone-frame-power-button{top:24.6%;right:var(--web-phone-button-offset);height:13.7%}.web-watch-frame,.web-watch-frame *{box-sizing:border-box}.web-watch-frame{aspect-ratio:368/620;filter:drop-shadow(0 6.5cqw 13.5cqw color-mix(in srgb,var(--xera-color-shadow,#000)38%,transparent));flex:none;container-type:inline-size}.web-watch-frame-band{inset-block:0;border:max(1px,.25cqw)solid color-mix(in srgb,var(--web-watch-color)20%,var(--xera-color-shadow,#000));background:linear-gradient(90deg,color-mix(in srgb,var(--web-watch-color)12%,var(--xera-color-shadow,#000)),var(--xera-color-elevation-1,#1b1f27)18%,var(--xera-color-elevation-2,#20252e)50%,var(--xera-color-elevation-1,#1b1f27)82%,color-mix(in srgb,var(--web-watch-color)12%,var(--xera-color-shadow,#000)));width:38%;box-shadow:inset 1.2cqw 0 2.8cqw #ffffff12,inset -1.2cqw 0 2.8cqw color-mix(in srgb,var(--xera-color-shadow,#000)52%,transparent);border-radius:12%/4%;position:absolute;left:31%;overflow:hidden}.web-watch-frame-solo-loop{z-index:0;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.web-watch-frame-solo-loop-segment{stroke:color-mix(in srgb,var(--xera-color-elevation-5,#2d3440)68%,var(--xera-color-secondary-container,#424750));stroke-width:.3px;filter:drop-shadow(0 .5px .7px color-mix(in srgb,var(--xera-color-shadow,#000)30%,transparent))}.web-watch-frame-solo-loop-stop-light{stop-color:color-mix(in srgb,var(--xera-color-elevation-5,#2d3440)60%,var(--xera-color-secondary-container,#424750))}.web-watch-frame-solo-loop-stop-dark{stop-color:var(--xera-color-elevation-1,#1b1f27)}.web-watch-frame-case{z-index:1;aspect-ratio:416/496;border:max(1px,.35cqw)solid color-mix(in srgb,var(--web-watch-color)46%,var(--xera-color-shadow,#000));background:linear-gradient(135deg,color-mix(in srgb,var(--web-watch-color)42%,white)0%,var(--web-watch-color)22%,color-mix(in srgb,var(--web-watch-color)76%,var(--xera-color-shadow,#000))58%,color-mix(in srgb,var(--web-watch-color)28%,white)78%,color-mix(in srgb,var(--web-watch-color)58%,var(--xera-color-shadow,#000))100%),var(--web-watch-color);width:100%;box-shadow:inset 0 .45cqw .7cqw #ffffff8c,inset 0 -.8cqw 1.5cqw color-mix(in srgb,var(--xera-color-shadow,#000)38%,transparent),0 0 0 max(1px,.25cqw)color-mix(in srgb,var(--xera-color-shadow,#000)72%,transparent);border-radius:20cqw;padding:.75cqw;position:absolute;top:14%;left:0}.web-watch-frame-metal{z-index:1;border:max(1px,.25cqw)solid color-mix(in srgb,var(--web-watch-color)58%,white);background:linear-gradient(160deg,color-mix(in srgb,var(--web-watch-color)70%,white),var(--web-watch-color)28%,color-mix(in srgb,var(--web-watch-color)64%,var(--xera-color-shadow,#000))76%,color-mix(in srgb,var(--web-watch-color)44%,white));border-radius:19cqw;width:100%;height:100%;padding:.65cqw;position:relative;box-shadow:inset 0 0 0 max(1px,.2cqw) #ffffff24}.web-watch-frame-bezel{border:max(1px,.55cqw)solid color-mix(in srgb,var(--web-watch-color)24%,var(--xera-color-shadow,#000));width:100%;height:100%;box-shadow:inset 0 0 0 max(1px,.25cqw)#ffffff1c,0 0 0 max(1px,.2cqw)color-mix(in srgb,var(--xera-color-shadow,#000)86%,transparent);background:#050608;border-radius:18cqw;padding:2.5cqw}.web-watch-frame-screen{background:var(--web-watch-screen-color);border-radius:15.5cqw;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 max(1px,.2cqw) #ffffff17}.web-watch-frame-crown,.web-watch-frame-button{z-index:0;border:max(1px,.2cqw)solid color-mix(in srgb,var(--web-watch-color)48%,var(--xera-color-shadow,#000));background:linear-gradient(90deg,color-mix(in srgb,var(--web-watch-color)54%,var(--xera-color-shadow,#000)),color-mix(in srgb,var(--web-watch-color)58%,white)48%,color-mix(in srgb,var(--web-watch-color)46%,var(--xera-color-shadow,#000)));box-shadow:inset .2cqw 0 .35cqw #fff3,0 .35cqw .7cqw color-mix(in srgb,var(--xera-color-shadow,#000)42%,transparent);border-radius:999px;position:absolute;overflow:hidden}.web-watch-frame-crown{width:3.2cqw;height:12%;top:30%;right:-2.2cqw}.web-watch-frame-button{width:2.8cqw;height:9%;top:54.5%;right:-1.8cqw}.web-watch-frame-time{z-index:3;min-width:20cqw;color:var(--xera-color-on-background,#fff);background:var(--web-watch-screen-color);box-shadow:0 0 0 1.9cqw var(--web-watch-screen-color);font-variant-numeric:tabular-nums;text-align:right;text-shadow:0 .3cqw .6cqw color-mix(in srgb,var(--xera-color-shadow,#000)42%,transparent);pointer-events:none;font-size:5.2cqw;font-weight:600;line-height:1;position:absolute;top:8cqw;right:6.5cqw}.web-watch-screenshot-image{object-fit:contain;object-position:center;width:100%;height:100%;display:block}