:root{
  color-scheme: light;
  --ink:#070b20;
  --muted:#7a8496;
  --blue:#1267ff;
  --frame:#02062a;
  --paper:#f7f7f8;
}
*{box-sizing:border-box}
html{min-height:100%;background:#fff}
body{min-height:100%;margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif}
a{color:inherit}
.device-preview-page{min-height:100vh;padding:14px clamp(14px,2.5vw,42px) 28px;background:#fff}
.device-preview-header{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.device-preview-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#111827;font-size:17px;letter-spacing:-.02em}
.device-preview-brand img{width:30px;height:30px;object-fit:contain}
.device-preview-brand strong{font-weight:760}
.device-preview-brand small{margin-left:4px;font-size:.52em;font-weight:500;color:#7b8190;vertical-align:.14em}
.device-preview-actions{display:flex;align-items:center;gap:10px}
.device-preview-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid rgba(7,11,32,.1);border-radius:999px;background:#fff;text-decoration:none;font-size:13px;color:#3c4658;box-shadow:0 10px 26px rgba(15,23,42,.04)}
.device-preview-actions a:hover{border-color:rgba(18,103,255,.34);color:var(--blue)}
.device-preview-stage{width:min(1680px,100%);margin:0 auto;text-align:center}
.device-preview-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.device-preview-copy p{margin:0 0 4px;color:var(--blue);font-size:12px;font-weight:650;letter-spacing:.12em}
.device-preview-copy h1{margin:0;color:#101828;font-size:clamp(22px,2.3vw,36px);font-weight:560;letter-spacing:-.045em;line-height:1.15}
.device-preview-controls{width:max-content;margin:0 auto 18px;display:flex;align-items:center;gap:10px}
.device-switcher{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#f4f4f5;box-shadow:inset 0 0 0 1px rgba(17,24,39,.04)}
.device-switch{width:36px;height:36px;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#647084;cursor:pointer;transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease}
.device-switch svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.device-switch:hover{color:var(--blue)}
.device-switch:focus-visible{outline:3px solid rgba(18,103,255,.26);outline-offset:3px}
.device-switch.is-active{background:#1292f6;color:#fff;box-shadow:0 8px 18px rgba(18,103,255,.28)}
.device-frame{margin:0 auto;background:#fff;border:7px solid var(--frame);box-shadow:0 28px 58px rgba(15,23,42,.16);overflow:hidden;transition:max-width .28s ease,width .28s ease,height .28s ease,border-radius .28s ease,transform .28s ease}
.device-frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.device-preview-close{width:42px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#f4f4f5;border:1px solid rgba(17,24,39,.04);color:#647084;text-decoration:none;font-size:24px;line-height:1;font-weight:300;box-shadow:inset 0 0 0 1px rgba(17,24,39,.02)}
.device-preview-close:hover{color:var(--blue);border-color:rgba(18,103,255,.3)}
.device-preview-close:focus-visible{outline:3px solid rgba(18,103,255,.28);outline-offset:3px}
.device-frame.is-desktop{width:min(1580px,calc(100vw - 72px));height:min(900px,calc(100vh - 92px));min-height:560px;border-radius:24px}
.device-frame.is-tablet{width:min(768px,calc(100vw - 52px));height:min(860px,calc(100vh - 88px));min-height:620px;border-radius:30px}
.device-frame.is-mobile{width:min(414px,calc(100vw - 52px));height:min(820px,calc(100vh - 88px));min-height:620px;border-radius:30px}
@media (max-width:760px){
  .device-preview-page{padding:12px 10px 20px}
  .device-preview-controls{margin:0 auto 14px;gap:8px}
  .device-frame{border-width:6px}
  .device-frame.is-desktop{width:calc(100vw - 20px);height:calc(100vh - 74px);min-height:420px;border-radius:20px}
  .device-frame.is-tablet{width:calc(100vw - 30px);height:calc(100vh - 74px);min-height:520px;border-radius:26px}
  .device-frame.is-mobile{width:min(414px,calc(100vw - 30px));height:calc(100vh - 74px);min-height:520px;border-radius:26px}
}
@media (prefers-reduced-motion:reduce){
  .device-frame,.device-switch{transition:none}
}