:root{
    --global-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
    --system-status-offset:0px;
    --home-wallpaper:none;
    --system-shell-color:#1d1d1f;
    --system-device-width:390px;
    --system-device-height:844px;
    --system-shell-thickness:7px;
  }

  body.global-font-active,
  body.global-font-active *:not(svg):not(path){font-family:var(--global-font-family)}

  .global-text-placeholder{
    margin:0;
    max-width:82vw;
    color:color-mix(in srgb,rgb(var(--ui-ink-rgb)) 46%,transparent);
    font-family:var(--global-font-family);
    font-size:12px;
    font-weight:400;
    line-height:1.6;
    letter-spacing:.04em;
    text-align:center;
    white-space:nowrap;
  }

  #page-home{isolation:isolate}
  #page-home::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-color:var(--ui-surface-background);
    background-image:var(--home-wallpaper);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  #page-home .home-viewport{z-index:1}

  .device-stage{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    overflow:visible;
    background:transparent;
  }
  body.system-shell-active{background:#f7f9fc}
  body.system-shell-active .device-stage{
    box-sizing:border-box;
    inset:auto;
    left:50%;
    top:50%;
    width:var(--system-device-width);
    height:var(--system-device-height);
    transform:translate(-50%,-50%) scale(var(--system-device-scale,1));
    transform-origin:50% 50%;
    overflow:hidden;
    border:var(--system-shell-thickness) solid var(--system-shell-color);
    border-radius:var(--system-shell-radius,59px);
    background:var(--ui-color);
    box-shadow:var(--system-shell-shadow,var(--app-shell-shadow));
    transition:width .22s ease,height .22s ease,border-color .18s ease,border-radius .22s ease,box-shadow .18s ease;
  }
  body.system-shell-active.system-shell-edge-fit .device-stage{
    box-shadow:none;
  }
  body.system-shell-active .device-stage .screen{width:100%;height:100%}
  body.system-shell-active .device-stage .screen-page{max-width:none;max-height:none}
  .system-shell-frame{display:none}

  .system-status-bar{
    position:fixed;
    z-index:124;
    left:0;
    right:0;
    top:env(safe-area-inset-top);
    height:28px;
    padding:0 max(17px,var(--side-pad));
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--text-main);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.015em;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .18s ease,transform .2s ease,visibility 0s linear .2s;
    text-shadow:-1px -1px 1.4px rgba(var(--highlight-tint-rgb),.5),1px 1px 2px rgba(var(--shadow-warm-rgb),.09);
  }
  .system-status-bar.is-visible{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
  .system-status-right{display:flex;align-items:center;gap:7px}
  .system-status-signal{display:flex;align-items:flex-end;gap:1.5px;height:10px}
  .system-status-signal i{display:block;width:2px;border-radius:3px;background:currentColor}
  .system-status-signal i:nth-child(1){height:4px}.system-status-signal i:nth-child(2){height:6px}.system-status-signal i:nth-child(3){height:8px}.system-status-signal i:nth-child(4){height:10px}
  .system-status-battery{position:relative;width:19px;height:9px;border:1.2px solid currentColor;border-radius:3px}
  .system-status-battery::before{content:"";position:absolute;top:1.6px;bottom:1.6px;left:1.7px;width:12px;border-radius:1.5px;background:currentColor}
  .system-status-battery::after{content:"";position:absolute;right:-3px;top:2.2px;width:1.5px;height:3.3px;border-radius:0 2px 2px 0;background:currentColor}

  .global-weather-layer{position:fixed;z-index:121;inset:0;overflow:hidden;pointer-events:none}
  .global-weather-layer .weather-drop{
    --rain-angle:12deg;
    --rain-drift:-16vw;
    --rain-opacity:.42;
    --rain-length:48px;
    --rain-width:1px;
    position:absolute;
    top:-18vh;
    display:block;
    width:var(--rain-width);
    height:var(--rain-length);
    border-radius:999px;
    pointer-events:none;
    will-change:transform,opacity;
    opacity:0;
    background:linear-gradient(to bottom,rgba(226,238,246,0) 0%,rgba(196,216,231,.24) 20%,rgba(126,158,184,.76) 100%);
    filter:blur(var(--rain-blur,0px));
    transform:rotate(var(--rain-angle));
    animation:strawberry-rain-fall linear infinite;
  }
  .global-weather-layer .weather-flake-svg{
    --snow-drift:18px;
    --snow-spin:260deg;
    position:absolute;
    top:-12vh;
    display:block;
    width:var(--snow-size,12px);
    height:var(--snow-size,12px);
    color:rgba(var(--highlight-tint-rgb),var(--snow-opacity,.72));
    fill:none;
    stroke:currentColor;
    pointer-events:none;
    will-change:transform,opacity;
    filter:drop-shadow(0 0 2px rgba(var(--highlight-tint-rgb),.12));
    animation:strawberry-snow-fall linear infinite;
  }
  .global-weather-layer .weather-flake-svg path{fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
  @keyframes strawberry-rain-fall{
    0%{transform:translate3d(0,-16vh,0) rotate(var(--rain-angle));opacity:0}
    8%{opacity:var(--rain-opacity)}
    88%{opacity:var(--rain-opacity)}
    100%{transform:translate3d(var(--rain-drift),132vh,0) rotate(var(--rain-angle));opacity:0}
  }
  @keyframes strawberry-snow-fall{
    0%{transform:translate3d(0,-12vh,0) rotate(0deg);opacity:0}
    9%{opacity:var(--snow-opacity,.72)}
    84%{opacity:var(--snow-opacity,.72)}
    100%{transform:translate3d(var(--snow-drift),122vh,0) rotate(var(--snow-spin));opacity:0}
  }