:root{
  --pink:#ffa7ac;
  --pink-deep:#e66f76;
  --mint:#bcefe3;
  --ink:#262b35;
  --bg:#f5f5f6;
  --phone-w:min(100vw, 430px, calc(46.18dvh - 30px));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;}
body{overflow:hidden;}
.demo-shell{height:100dvh;display:grid;place-items:center;grid-template-columns:1fr;background:
  radial-gradient(circle at 22% 12%, rgba(188,239,227,.28), transparent 24rem),
  radial-gradient(circle at 78% 82%, rgba(255,167,172,.2), transparent 22rem),#f3f3f4;}
.phone{position:relative;width:var(--phone-w);aspect-ratio:750/1624;max-height:932px;overflow:hidden;background:#fff;box-shadow:0 28px 80px rgba(40,50,70,.16);}
.screen-scroll{position:absolute;inset:0;overflow:auto;background:#fff;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.fixed-top{position:absolute;left:0;right:0;top:0;z-index:35;overflow:hidden;background:#fff;pointer-events:none;transform:translateZ(0);}
.top-image{display:block;width:100%;height:auto;user-select:none;pointer-events:none;}

.screen-scroll::-webkit-scrollbar{display:none;}
.image-stage{position:relative;width:100%;min-height:1px;background:#fff;}
.page-image{display:block;width:100%;height:auto;user-select:none;pointer-events:none;}
.hotspots{position:absolute;inset:0;width:100%;height:100%;}
.hotspot{position:absolute;border:0;padding:0;margin:0;background:rgba(255,255,255,0);cursor:pointer;border-radius:16px;outline:none;touch-action:manipulation;}
.hotspot:active{background:rgba(255,255,255,.08);}
.bottom-pad{height:0;background:#fff;}
.fixed-nav{position:absolute;left:0;right:0;bottom:0;z-index:30;pointer-events:auto;}
.fixed-nav.hidden{display:none;}
.nav-image{display:block;width:100%;height:auto;user-select:none;pointer-events:none;}
.nav-hit{position:absolute;border:0;background:transparent;cursor:pointer;padding:0;margin:0;border-radius:20px;touch-action:manipulation;}
.nav-hit:active{background:rgba(255,255,255,.08);}
.nav-home{left:0%;width:20%;}
.nav-device{left:20%;width:20%;}
.nav-tv{left:40%;width:20%;top:0;height:100%;border-radius:999px;}
.nav-record{left:60%;width:20%;}
.nav-profile{left:80%;width:20%;}
.toast{position:absolute;left:50%;bottom:112px;transform:translate(-50%,12px);z-index:50;pointer-events:none;opacity:0;padding:10px 16px;border-radius:999px;background:rgba(38,43,53,.78);color:#fff;font-size:14px;letter-spacing:.02em;box-shadow:0 12px 28px rgba(38,43,53,.18);transition:opacity .24s ease, transform .24s ease;white-space:nowrap;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.desktop-guide{display:none;}
.guide-card{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.78);backdrop-filter:blur(22px);border-radius:28px;box-shadow:0 24px 60px rgba(55,64,88,.12);padding:24px;max-width:300px;}
.guide-card img{width:64px;height:64px;object-fit:contain;display:block;margin-bottom:12px;}
.guide-card h1{margin:0 0 6px;font-size:24px;letter-spacing:.04em;}
.guide-card p{margin:0 0 16px;font-size:14px;line-height:1.6;color:#6a7280;}
.guide-card button,.guide-card a{display:block;width:100%;border:0;text-align:center;text-decoration:none;color:#fff;border-radius:999px;padding:12px 14px;margin-top:10px;font-weight:600;background:linear-gradient(135deg,#ef7f87,#ffa7ac);box-shadow:0 10px 24px rgba(230,111,118,.22);cursor:pointer;}
.guide-card a{background:linear-gradient(135deg,#97a5ff,#bcefe3);color:#44506a;}
@media (min-width:900px){
  .demo-shell{grid-template-columns:minmax(320px,430px) 340px;gap:48px;padding:32px;}
  .phone{border-radius:34px;outline:10px solid rgba(255,255,255,.72);}
  .desktop-guide{display:block;}
}
@media (max-width:899px), (hover:none) and (pointer:coarse){
  :root{--phone-w:100vw;}
  .demo-shell{display:block;padding:0;background:#fff;}
  .phone{width:100vw;height:100dvh;aspect-ratio:auto;max-height:none;border-radius:0;outline:0;box-shadow:none;}
  .desktop-guide{display:none!important;}
}
@supports not (height: 100dvh){
  .demo-shell{height:100vh;}
  :root{--phone-w:min(100vw, 430px, calc(46.18vh - 30px));}
  @media (max-width:899px), (hover:none) and (pointer:coarse){.phone{height:100vh;aspect-ratio:auto;}}
}