.pu-site{background:#fff;border-radius:14px;height:330px;position:relative;overflow:hidden}.pu-hd{border-bottom:1px solid #eef0f3;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.pu-logo{background:var(--color-ink);border-radius:6px;width:76px;height:12px}.pu-nav{gap:8px;display:flex}.pu-nav i{background:var(--color-border);border-radius:4px;width:34px;height:8px;display:block}.pu-pg{flex-direction:column;gap:10px;padding:20px 18px;display:flex}.pu-pg .hero{background:#eef0f3;border-radius:12px;height:86px}.pu-pg i{background:var(--color-border);border-radius:4px;height:8px;display:block}.pu-pg .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.pu-pg .cols span{background:#f4f5f7;border-radius:10px;height:64px}.pu-scrim{background:color-mix(in srgb, var(--color-ink) 42%, transparent);transition:opacity .4s;position:absolute;inset:0}.pu-card{box-sizing:border-box;width:58%;box-shadow:0 30px 60px -24px color-mix(in srgb, var(--color-ink) 60%, transparent);background:#fff;border-radius:16px;flex-direction:column;gap:9px;padding:18px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pu-card .im{background:linear-gradient(135deg,var(--pri-tint),var(--pri-soft));border-radius:10px;height:62px}.pu-card b{letter-spacing:-.02em;color:var(--color-ink);font:600 17px/1.2 Instrument Sans,system-ui,sans-serif}.pu-card .in{border:1px solid var(--color-border);border-radius:9px;height:30px}.pu-btn{background:var(--pri);color:#fff;border-radius:999px;justify-content:center;align-items:center;height:32px;font:600 12.5px/1 Instrument Sans,system-ui,sans-serif;display:flex}.pu-x{background:#f4f5f7;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;position:absolute;top:10px;right:10px}.pu-x svg{stroke:var(--color-body)}.pu-hero .pu-card{animation:1s cubic-bezier(.16,1,.3,1) .6s both puIn}@keyframes puIn{0%{opacity:0;transform:translate(-50%,-38%)scale(.94)}to{opacity:1;transform:translate(-50%,-50%)}}.pu-tag{box-shadow:0 24px 44px -20px color-mix(in srgb, var(--color-ink) 45%, transparent);background:#fff;border-radius:14px;align-items:center;gap:10px;padding:10px 14px 10px 10px;display:flex;position:absolute;bottom:28px;right:28px}.pu-tag .ico{border-radius:11px;width:36px;height:36px}.pu-tag b{color:var(--color-ink);font:600 13.5px/1.2 Instrument Sans,system-ui,sans-serif;display:block}.pu-tag small{color:var(--color-body);font-size:12px}.pu-ed{grid-template-columns:minmax(0,1fr) 168px;gap:12px;display:grid}.pu-prev{background:var(--color-border);border-radius:14px;justify-content:center;align-items:center;padding:18px;display:flex}.pu-prev .pu-card{width:100%;box-shadow:0 20px 40px -24px color-mix(in srgb, var(--color-ink) 50%, transparent);position:relative;top:auto;left:auto;transform:none}.pu-set{background:#fff;border-radius:14px;flex-direction:column;gap:12px;padding:14px;display:flex}.pu-set small{letter-spacing:1px;text-transform:uppercase;color:var(--color-body);font:600 11px/1 Instrument Sans,system-ui,sans-serif}.pu-set label{color:var(--color-ink);flex-direction:column;gap:7px;font:500 12.5px/1.2 Instrument Sans,system-ui,sans-serif;display:flex}.pu-sl{background:var(--color-border);border-radius:3px;height:6px;display:block;position:relative}.pu-sl i{background:var(--pri);border-radius:3px;position:absolute;top:0;bottom:0;left:0}.pu-sl i:after{content:"";width:14px;height:14px;box-shadow:0 0 0 2px var(--pri);background:#fff;border-radius:50%;position:absolute;top:-4px;right:-7px}.pu-tg{color:var(--color-ink);justify-content:space-between;align-items:center;font:500 12.5px/1.2 Instrument Sans,system-ui,sans-serif;display:flex}.pu-tg i{background:var(--pri);border-radius:999px;width:32px;height:18px;position:relative}.pu-tg i:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;position:absolute;top:2px;right:2px}.pu-tg.off i{background:#d5dbe1}.pu-tg.off i:after{left:2px;right:auto}.pu-cap{color:var(--color-ink);margin-top:14px;font:600 14px/1.3 Instrument Sans,system-ui,sans-serif}.pu-play{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;display:grid}.pu-side{flex-direction:column;align-items:center;display:flex}.pu-stage{background:#fff;border-radius:14px;height:380px;position:relative;overflow:hidden}.pu-stage .pu-scrim{opacity:0}.pu-stage .pu-scrim.on{opacity:1}.pu-pop{box-sizing:border-box;box-shadow:0 24px 48px -20px color-mix(in srgb, var(--color-ink) 55%, transparent);background:#fff;border-radius:12px;flex-direction:column;gap:7px;padding:14px;transition:left .5s cubic-bezier(.16,1,.3,1),top .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1),border-radius .5s;display:flex;position:absolute;overflow:hidden}.pu-pop b{color:var(--color-ink);font:600 14px/1.2 Instrument Sans,system-ui,sans-serif}.pu-pop i{background:var(--color-border);border-radius:4px;flex:none;height:7px;display:block}.pu-pop .pu-btn{flex:none;height:26px;font-size:11.5px}.pu-pop:before{content:"";background:var(--pri);border-radius:2px;flex:none;width:36px;height:4px}.pu-at-mid{width:52%;height:60%;top:20%;left:24%}.pu-at-lb{width:42%;height:44%;top:14px;left:14px}.pu-at-rb{width:42%;height:44%;top:14px;left:calc(58% - 14px)}.pu-at-lo{width:42%;height:44%;top:calc(56% - 14px);left:14px}.pu-at-ro{width:42%;height:44%;top:calc(56% - 14px);left:calc(58% - 14px)}.pu-at-lz{border-radius:0 14px 14px 0;width:36%;height:100%;top:0;left:0}.pu-at-rz{border-radius:14px 0 0 14px;width:36%;height:100%;top:0;left:64%}.pu-at-bb{border-radius:0 0 14px 14px;width:100%;height:24%;top:0;left:0}.pu-at-ob{border-radius:14px 14px 0 0;width:100%;height:24%;top:76%;left:0}.pu-pick{border:1px solid var(--color-border);background:#fff;border-radius:18px;grid-template-columns:repeat(3,56px);gap:8px;padding:12px;display:grid}.pu-pb{border:1px solid var(--color-border);background:var(--color-surface-alt);cursor:pointer;border-radius:12px;width:56px;height:48px;padding:0;position:relative}.pu-pb:before{content:"";border:1.5px solid #c9cdd6;border-radius:4px;position:absolute;inset:9px 10px}.pu-pb:after{content:"";background:#8a8a94;border-radius:2px;position:absolute}.pu-pb:hover{border-color:var(--color-ink)}.pu-pb:focus-visible{outline:2px solid var(--pri);outline-offset:2px}.pu-pb.on{background:var(--pri-tint);border-color:var(--pri)}.pu-pb.on:before{border-color:var(--pri)}.pu-pb.on:after{background:var(--pri)}.pu-pb-mid:after{width:14px;height:12px;top:18px;left:21px}.pu-pb-lb:after{width:12px;height:8px;top:12px;left:13px}.pu-pb-rb:after{width:12px;height:8px;top:12px;right:13px}.pu-pb-lo:after{width:12px;height:8px;bottom:12px;left:13px}.pu-pb-ro:after{width:12px;height:8px;bottom:12px;right:13px}.pu-pb-lz:after{width:8px;height:26px;top:11px;left:12px}.pu-pb-rz:after{width:8px;height:26px;top:11px;right:12px}.pu-pb-bb:after{width:32px;height:6px;top:11px;left:12px}.pu-pb-ob:after{width:32px;height:6px;bottom:11px;left:12px}.pu-now{color:var(--color-ink);text-align:center;margin-top:12px;font:600 14px/1.3 Instrument Sans,system-ui,sans-serif}.pu-now span{color:var(--pri-ink)}.pu-uses{flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;display:flex}.pu-uses li{color:#fff;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:10px;min-height:48px;padding:0 18px;font:500 15.5px/1.3 Instrument Sans,system-ui,sans-serif;display:inline-flex}.pu-uses li:before{content:"";background:var(--pri);border-radius:50%;flex:none;width:8px;height:8px}.pu-slide .pu-card{width:52%;inset:auto 16px 16px auto;transform:none}.pu-vidc{background:linear-gradient(135deg,var(--color-ink),#2a3447);border-radius:10px;justify-content:center;align-items:center;height:96px;display:flex;position:relative}.pu-vidc span{background:var(--pri);width:40px;height:40px;box-shadow:0 0 0 7px color-mix(in srgb, var(--pri) 22%, transparent);border-radius:50%;justify-content:center;align-items:center;display:flex}.pu-time{background:var(--color-ink);color:#fff;border-radius:999px;align-items:center;gap:8px;height:30px;padding:0 12px;font:600 12px/1 Instrument Sans,system-ui,sans-serif;display:inline-flex;position:absolute;top:16px;left:16px}.pu-time svg{stroke:#fff}.pu-quote{background:var(--color-surface-alt);border-radius:10px;flex-direction:column;gap:6px;padding:10px;display:flex}.pu-quote i{background:var(--color-border);border-radius:3px;height:6px;display:block}.pu-stars{gap:2px;display:flex}.pu-stars svg{fill:var(--pri)}.pu-code{background:var(--color-ink);color:#c9cdd6;white-space:pre;border-radius:18px;margin-top:20px;padding:18px 20px;font:500 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}.pu-code b{color:#fff;font-weight:500}.pu-code span{color:var(--pri-soft)}@container page (max-width:1059px){.pu-play{grid-template-columns:minmax(0,1fr);gap:24px}.pu-side{order:-1}}@container page (max-width:600px){.pu-ed{grid-template-columns:minmax(0,1fr)}.pu-card{width:78%}.pu-slide .pu-card{width:72%}.pu-tag{left:16px;right:16px}.pu-site{height:360px}}@media (prefers-reduced-motion:reduce){.pu-hero .pu-card{animation:none}.pu-pop,.pu-scrim{transition:none}}