:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;color:#fff;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;overscroll-behavior:none}body{min-height:100dvh;background:#9ec5ff}.desktop{position:relative;isolation:isolate;min-height:100dvh;overflow:hidden;background:linear-gradient(135deg,#9ac5ff,#91b4ed 45%,#f7bc83)}.desktop-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 72% 25%,#5f7cf7 0,transparent 38%),radial-gradient(ellipse at 30% 76%,#4cbf9e 0,transparent 42%),linear-gradient(145deg,#90baf2,#e6b77d 55%,#91b1e8);background-size:cover;background-position:center;transition:background-image .25s ease}.desktop-content{width:min(100%,560px);min-height:100dvh;margin:auto;padding:clamp(18px,3.3vh,34px) 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;gap:12px}.pages-viewport{width:100%;overflow:hidden;flex:1;min-height:520px;touch-action:pan-y}.pages-track{display:flex;width:100%;height:100%;transition:transform .38s cubic-bezier(.2,.75,.25,1);will-change:transform}.desktop-page{flex:0 0 100%;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(68px,1fr));gap:clamp(10px,2.2vh,18px) 10px;padding:4px 2px 8px;min-height:520px}.app-item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;text-align:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.app-icon{width:min(74px,18vw);height:min(74px,18vw);max-width:76px;max-height:76px;border-radius:23%;object-fit:cover;box-shadow:0 8px 18px #172c4b35;border:1px solid #ffffff36;background:linear-gradient(145deg,#fff8,#ffffff20);display:grid;place-items:center;font-size:27px;font-weight:750;color:#fff;overflow:hidden}.app-name{max-width:100%;font-size:12px;line-height:1.25;font-weight:600;color:#fff;text-shadow:0 1px 5px #17233e90;overflow-wrap:anywhere}.widget-item{position:relative;overflow:hidden;border-radius:22px;background:#15223845;border:1px solid #ffffff42;box-shadow:0 12px 28px #172c4b30;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;min-width:0;min-height:0}.widget-item img{width:100%;height:100%;object-fit:cover;display:block}.widget-fallback{height:100%;min-height:100%;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#1d416b,#7b6eb4 50%,#efb76f)}.widget-fallback strong{font-size:15px}.widget-fallback small{opacity:.85;margin-top:5px}.widget-label{position:absolute;inset:auto 0 0;padding:28px 12px 10px;background:linear-gradient(transparent,#0008);font-size:13px;font-weight:650}.page-indicator{height:16px;display:flex;align-items:center;justify-content:center;gap:8px}.page-dot{width:7px;height:7px;border-radius:10px;background:#ffffff75;box-shadow:0 1px 4px #0003;transition:all .2s}.page-dot.active{width:25px;background:#fff}.dock{width:100%;min-height:104px;padding:12px 14px;border:1px solid #ffffffa8;border-radius:30px;background:linear-gradient(135deg,#ffffff8f,#eaf6ff70);box-shadow:0 12px 32px #1a416c25;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}.dock:empty{display:none}.dock .app-icon{width:min(67px,16vw);height:min(67px,16vw);max-width:68px;max-height:68px}.dock .app-name{color:#fff}.detail-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:#07132470;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.detail-overlay.hidden{display:none}.detail-card{position:relative;width:min(360px,100%);padding:25px 24px 22px;border:1px solid #ffffffb5;border-radius:28px;background:linear-gradient(145deg,#fffffff0,#f5f8fff0);box-shadow:0 22px 70px #07132445;color:#1e293b;text-align:center}.close-detail{position:absolute;right:14px;top:10px;border:0;background:#e8edf5;color:#334155;border-radius:50%;width:30px;height:30px;font-size:23px;line-height:1}.detail-image{width:88px;height:88px;object-fit:cover;border-radius:23px;box-shadow:0 8px 22px #1d355525}.detail-card h2{font-size:20px;margin:14px 0 8px}.detail-card p{font-size:14px;line-height:1.65;color:#64748b;min-height:24px;white-space:pre-wrap;overflow-wrap:anywhere}.visit-button{border:0;width:100%;margin-top:14px;padding:14px;border-radius:15px;background:linear-gradient(120deg,#1684ee,#5366da);color:#fff;font-size:15px;font-weight:700;box-shadow:0 7px 18px #2679d33b}.visit-button span{margin-left:5px}.desktop-toast{position:fixed;bottom:calc(130px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,12px);opacity:0;background:#18253de8;color:#fff;border-radius:22px;padding:9px 14px;font-size:13px;transition:.2s;pointer-events:none}.desktop-toast.show{opacity:1;transform:translate(-50%,0)}.loading-screen{width:100%;display:grid;place-items:center;color:#fff;text-shadow:0 1px 5px #444}.empty-page{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;color:#ffffff80;font-size:12px}@media(min-width:560px){.desktop-content{padding-top:24px}.desktop-page{grid-template-rows:repeat(6,minmax(82px,1fr));gap:18px 14px}.app-icon{width:76px;height:76px}.dock .app-icon{width:68px;height:68px}}@media(max-height:720px){.desktop-content{padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));gap:8px}.pages-viewport,.desktop-page{min-height:470px}.desktop-page{grid-template-rows:repeat(6,minmax(58px,1fr));gap:8px}.app-icon{width:min(62px,16vw);height:min(62px,16vw)}.dock{min-height:88px;padding:8px 10px}.dock .app-icon{width:min(58px,15vw);height:min(58px,15vw)}}

/* iPhone Safari compact layout refinement v1.0.1 */
@media (max-width: 600px) {
  .desktop-content {
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(10px, env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom));
    gap: 5px;
  }
  .pages-viewport {
    min-height: 0;
    flex: 1 1 0;
  }
  .desktop-page {
    min-height: 0;
    height: 100%;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: clamp(6px, 1.15vh, 11px) 7px;
    padding: 3px 1px 5px;
  }
  .app-item { gap: 4px; }
  .app-icon {
    width: min(60px, 14.5vw);
    height: min(60px, 14.5vw);
    max-width: 60px;
    max-height: 60px;
    border-radius: 22%;
  }
  .app-name { font-size: 11px; line-height: 1.18; }
  .widget-item { border-radius: 18px; }
  .page-indicator { height: 12px; flex: 0 0 12px; gap: 7px; }
  .page-dot { width: 6px; height: 6px; }
  .page-dot.active { width: 19px; }
  .dock {
    flex: 0 0 auto;
    min-height: 82px;
    padding: 6px 9px;
    gap: 5px;
    border-radius: 24px;
    box-shadow: 0 7px 20px #1a416c20;
  }
  .dock .app-item { gap: 3px; }
  .dock .app-icon {
    width: min(49px, 11.8vw);
    height: min(49px, 11.8vw);
    max-width: 49px;
    max-height: 49px;
  }
  .dock .app-name { font-size: 10px; line-height: 1.1; }
}
@media (max-width: 380px) {
  .desktop-content { padding-left: 11px; padding-right: 11px; }
  .app-icon { width: min(55px, 14vw); height: min(55px, 14vw); }
  .dock { min-height: 76px; padding: 5px 7px; }
  .dock .app-icon { width: min(45px, 11.5vw); height: min(45px, 11.5vw); }
}


/* v1.0.2: true single-screen iPhone desktop */
:root{--app-height:100dvh}
html,body{width:100%;height:100%;min-height:0;overflow:hidden}
body{min-height:0;height:var(--app-height);overscroll-behavior:none}
.desktop{height:var(--app-height);min-height:0;max-height:var(--app-height);overflow:hidden}
.desktop-content{height:100%;min-height:0;max-height:100%;padding:clamp(5px,1.1svh,12px) 12px calc(5px + env(safe-area-inset-bottom));gap:clamp(3px,.65svh,8px);justify-content:stretch}
.pages-viewport{height:0;min-height:0;flex:1 1 0;overflow:hidden}
.pages-track{height:100%;min-height:0}
.desktop-page{height:100%;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:clamp(3px,.65svh,8px) 6px;padding:2px 1px;align-content:stretch}
.app-item{min-height:0;gap:clamp(1px,.35svh,4px);overflow:hidden}
.app-icon{width:min(13.5vw,4.7svh,58px);height:min(13.5vw,4.7svh,58px);max-width:58px;max-height:58px;border-radius:22%}
.app-name{font-size:clamp(9px,2.55vw,11px);line-height:1.12;max-height:2.25em;overflow:hidden}
.widget-item{min-height:0;border-radius:clamp(10px,2.7vw,18px)}
.widget-label{padding:18px 7px 6px;font-size:clamp(9px,2.5vw,12px)}
.page-indicator{height:clamp(10px,1.6svh,16px);min-height:10px;flex:0 0 auto}
.dock{flex:0 0 auto;min-height:0;height:clamp(62px,8.5svh,82px);padding:5px 7px;gap:4px;border-radius:22px;overflow:hidden}
.dock .app-item{gap:2px;justify-content:center}
.dock .app-icon{width:min(10.5vw,5.1svh,46px);height:min(10.5vw,5.1svh,46px);max-width:46px;max-height:46px}
.dock .app-name{font-size:clamp(8px,2.3vw,10px);line-height:1.05;max-height:1.1em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.desktop-toast{bottom:calc(clamp(72px,10svh,95px) + env(safe-area-inset-bottom))}
@media(max-height:700px){.desktop-content{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom));gap:2px}.desktop-page{gap:2px 5px}.dock{height:58px;padding:3px 6px}.dock .app-icon{width:min(9.5vw,4.2svh,38px);height:min(9.5vw,4.2svh,38px)}}
@media(min-width:600px){.desktop-content{max-width:560px;margin:auto}.app-icon{width:min(58px,4.7svh);height:min(58px,4.7svh)}}


/* v1.0.3 — viewport-first compact iPhone layout */
html, body { width:100%; height:100%; min-height:0; margin:0; overflow:hidden; }
body { position:relative; }
.desktop {
  position:fixed; inset:0; width:100%; height:var(--app-height, 100dvh);
  min-height:0; max-height:none; overflow:hidden;
}
.desktop-content {
  width:min(100%, 560px); height:100%; min-height:0; max-height:none;
  margin-inline:auto; padding: max(3px, env(safe-area-inset-top)) 10px max(5px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:flex-start; gap:4px;
}
.pages-viewport { flex:1 1 0; height:0; min-height:0; width:100%; overflow:hidden; }
.pages-track { height:100%; min-height:0; align-items:stretch; }
.desktop-page {
  height:100%; min-height:0; min-width:100%; overflow:hidden;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr); gap:clamp(2px, .55vh, 6px) 5px;
  padding:2px 1px; align-content:stretch;
}
.app-item { min-width:0; min-height:0; gap:2px; overflow:hidden; justify-content:flex-start; }
.app-icon { width:min(12vw, 5.2vh, 48px); height:min(12vw, 5.2vh, 48px); max-width:48px; max-height:48px; border-radius:22%; }
.app-name { width:100%; max-width:100%; font-size:clamp(8px, 2.35vw, 10px); line-height:1.1; max-height:2.2em; overflow:hidden; text-overflow:ellipsis; }
.widget-item { min-width:0; min-height:0; overflow:hidden; border-radius:clamp(9px,2.5vw,16px); }
.widget-item img { width:100%; height:100%; object-fit:cover; }
.widget-fallback { min-height:0; padding:clamp(5px,1.5vw,10px); overflow:hidden; }
.widget-fallback strong { font-size:clamp(10px,2.8vw,13px); }
.widget-fallback small { font-size:clamp(8px,2.2vw,10px); }
.widget-label { padding:16px 6px 5px; font-size:clamp(8px,2.3vw,10px); }
.page-indicator { flex:0 0 11px; height:11px; min-height:11px; gap:6px; }
.page-dot { width:5px; height:5px; }
.page-dot.active { width:17px; }
.dock {
  flex:0 0 auto; width:100%; height:clamp(56px,8.2vh,70px); min-height:0;
  padding:4px 6px; gap:3px; border-radius:20px; overflow:hidden;
}
.dock .app-item { min-height:0; justify-content:center; gap:2px; }
.dock .app-icon { width:min(9.8vw,4.8vh,40px); height:min(9.8vw,4.8vh,40px); max-width:40px; max-height:40px; }
.dock .app-name { font-size:clamp(7px,2.05vw,9px); line-height:1; max-height:1em; white-space:nowrap; }
.desktop-toast { bottom:calc(clamp(64px,9vh,78px) + env(safe-area-inset-bottom)); }
@media (max-height:700px) {
  .desktop-content { gap:2px; padding-top:2px; }
  .desktop-page { gap:2px 4px; }
  .app-icon { width:min(11vw,4.6vh,40px); height:min(11vw,4.6vh,40px); }
  .dock { height:54px; padding:3px 5px; }
  .dock .app-icon { width:min(9vw,4vh,34px); height:min(9vw,4vh,34px); }
  .page-indicator { flex-basis:9px; height:9px; min-height:9px; }
}
@media (min-width:600px) {
  .desktop-content { padding-top:8px; padding-bottom:8px; }
  .app-icon { width:min(48px,5.2vh); height:min(48px,5.2vh); }
}


/* v1.0.4 — enlarge app artwork while preserving the single-screen layout */
@media (max-width: 599px) {
  .app-icon {
    width: min(15vw, 7vh, 62px);
    height: min(15vw, 7vh, 62px);
    max-width: 62px;
    max-height: 62px;
  }
  .dock .app-icon {
    width: min(10.8vw, 5.3vh, 46px);
    height: min(10.8vw, 5.3vh, 46px);
    max-width: 46px;
    max-height: 46px;
  }
  .app-item { gap: 2px; }
  .app-name { font-size: clamp(9px, 2.45vw, 11px); }
}
@media (max-height: 700px) and (max-width: 599px) {
  .app-icon {
    width: min(14vw, 6.2vh, 54px);
    height: min(14vw, 6.2vh, 54px);
    max-width: 54px;
    max-height: 54px;
  }
}

/* v1.0.5 — fuller app and Dock icons; keep the first-screen layout */
@media (max-width: 599px) {
  .app-icon {
    width: min(16vw, 7.6vh, 68px);
    height: min(16vw, 7.6vh, 68px);
    max-width: 68px;
    max-height: 68px;
    border-radius: 24%;
  }
  .dock .app-icon {
    width: min(12vw, 6.2vh, 52px);
    height: min(12vw, 6.2vh, 52px);
    max-width: 52px;
    max-height: 52px;
    border-radius: 24%;
  }
  .app-item { gap: 3px; }
  .dock .app-item { gap: 2px; }
}
@media (max-height: 700px) and (max-width: 599px) {
  .app-icon {
    width: min(15vw, 6.8vh, 62px);
    height: min(15vw, 6.8vh, 62px);
    max-width: 62px;
    max-height: 62px;
  }
  .dock .app-icon {
    width: min(11.5vw, 5.5vh, 46px);
    height: min(11.5vw, 5.5vh, 46px);
    max-width: 46px;
    max-height: 46px;
  }
}


/* v1.0.6 — iOS-style interactive page swiping */
.pages-viewport{position:relative;overflow:hidden;touch-action:pan-y;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none;}
.pages-track{transform:translate3d(0,0,0);transition:transform .42s cubic-bezier(.22,.75,.18,1);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.desktop-page{-webkit-user-select:none;user-select:none;}
.page-indicator{pointer-events:auto;}
.page-dot{cursor:pointer;transition:width .24s cubic-bezier(.2,.8,.2,1),background-color .2s ease,opacity .2s ease;}
.page-dot.active{width:24px;}
@media(prefers-reduced-motion:reduce){.pages-track,.page-dot{transition:none!important;}}