/* ===== Shared: scaled 1440×1024 live artboards ===== */
.art{position:relative;width:min(100% - 48px,1552px);margin:0 auto;aspect-ratio:1440/1024;overflow:hidden;border-radius:clamp(18px,3vw,44px)}
.art > .board{position:absolute;left:0;top:0;width:1440px;height:1024px;transform-origin:0 0}
.art button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.art svg{display:block}

/* ===== Smart Home ===== */
.sh{--teal:#A8C1BE;--tile:rgba(255,255,255,.12);--knob:rgba(0,0,0,.24);font-family:'Urbanist',sans-serif;color:#fff;background:#b9b9b9}
.sh .board{background:linear-gradient(160deg,#c2c2c2,#b3b3b3)}
.sh .tile{position:absolute;border-radius:40px;background:var(--tile);transition:background .4s}
.sh .rb{width:64px;height:64px;border-radius:50%;background:var(--knob);display:grid;place-items:center;transition:background .25s, transform .25s}
.sh .rb:hover{background:rgba(0,0,0,.34)}
.sh .rb:active{transform:scale(.94)}
.sh .rb svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sh .t1{font-size:18px;font-weight:500}
.sh .t2{font-size:16px;opacity:.6;margin-top:4px}

/* sidebar */
.sh .side{left:30px;top:30px;width:90px;height:512px;display:flex;flex-direction:column;align-items:center;padding:22px 0}
.sh .side .nb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;transition:background .25s}
.sh .side .nb svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.sh .side .nb.on{background:rgba(255,255,255,.22)}
.sh .side .nb:hover{background:rgba(255,255,255,.14)}
.sh .side img{margin-top:auto;width:46px;height:46px;border-radius:50%;object-fit:cover}

/* camera */
.sh .cam{left:142px;top:30px;width:548px;height:512px;overflow:hidden;background:#8a7a6c}
.sh .cam > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 8s ease-out}
.sh .cam:hover > img{transform:scale(1.06)}
.sh .cam::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(30,20,10,.65));pointer-events:none}
.sh .room{position:absolute;left:24px;top:24px;z-index:2;height:48px;padding:0 18px 0 22px;border-radius:24px;background:rgba(120,110,100,.45);backdrop-filter:blur(10px);display:flex;align-items:center;gap:8px;font-size:15px}
.sh .room svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;transition:transform .25s}
.sh .room.open svg{transform:rotate(180deg)}
.sh .menu{position:absolute;left:24px;top:80px;z-index:3;min-width:180px;padding:8px;border-radius:20px;background:rgba(40,36,32,.72);backdrop-filter:blur(14px);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.2s}
.sh .menu.open{opacity:1;transform:none;pointer-events:auto}
.sh .menu button{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:12px;font-size:15px}
.sh .menu button:hover,.sh .menu button.on{background:rgba(255,255,255,.14)}
.sh .live{position:absolute;right:24px;top:24px;z-index:2;height:42px;padding:0 16px;border-radius:21px;background:#fff;color:#111;display:flex;align-items:center;gap:7px;font-size:15px;font-weight:500}
.sh .live i{width:7px;height:7px;border-radius:50%;background:#e01010;animation:shlive 1.4s infinite}
@keyframes shlive{50%{opacity:.2}}
.sh .cam .cap{position:absolute;left:24px;bottom:24px;z-index:2}
.sh .cam .clock{position:absolute;right:24px;bottom:28px;z-index:2;font-size:14px;opacity:.8;font-variant-numeric:tabular-nums}

/* scene */
.sh .scene{left:30px;top:562px;width:320px;height:108px;border-radius:54px;display:flex;align-items:center;padding:0 16px 0 16px;gap:18px}
.sh .scene .ic{width:76px;height:76px;border-radius:50%;background:var(--teal);display:grid;place-items:center;flex:none}
.sh .scene .ic svg{width:26px;height:26px;stroke:#333;fill:none;stroke-width:1.6;stroke-linejoin:round}
.sh .scene .rb{margin-left:auto;width:64px;height:64px}
.sh .scene.on{background:rgba(168,193,190,.55)}

/* gamepad */
.sh .game{left:30px;top:690px;width:320px;height:304px;padding:24px}
.sh .row{display:flex;gap:12px;align-items:center}
.sh .state{margin-left:auto;font-size:18px;font-weight:500}
.sh .foot{position:absolute;left:24px;bottom:24px}
.sh .sw{margin-top:22px;width:48px;height:28px;border-radius:14px;background:rgba(0,0,0,.25);position:relative;transition:background .25s}
.sh .sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.3,.8,.3,1.2)}
.sh .sw.on{background:#111}
.sh .sw.on::after{transform:translateX(20px)}

/* TV */
.sh .tv{left:370px;top:562px;width:320px;height:304px;padding:24px;color:#111}
.sh .tv.on{background:var(--teal)}
.sh .tv .rb{background:rgba(0,0,0,.22)}

/* brightness */
.sh .bright{left:370px;top:886px;width:320px;height:108px;border-radius:54px;overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none}
.sh .bright .fill{position:absolute;left:0;top:0;bottom:0;border-radius:54px;background:var(--teal);min-width:108px}
.sh .bright svg{position:absolute;left:32px;top:39px;width:30px;height:30px;stroke:#333;fill:none;stroke-width:1.6;stroke-linecap:round}
.sh .bright .pct{position:absolute;right:32px;top:40px;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}

/* plug */
.sh .plug{left:710px;top:30px;width:700px;height:602px;text-align:center}
.sh .plug .gear{position:absolute;right:20px;top:20px;width:64px;height:64px;transition:transform .5s, background .25s}
.sh .plug h3{margin:112px 0 0;font-size:40px;font-weight:500}
.sh .plug .sub{margin-top:14px;font-size:18px;opacity:.8}
.sh .dial{position:absolute;left:200px;top:220px;width:300px;height:300px;touch-action:none;cursor:grab}
.sh .dial:active{cursor:grabbing}
.sh .dial circle{fill:none;stroke-linecap:round}
.sh .dial .trk{stroke:rgba(0,0,0,.16);stroke-width:18}
.sh .dial .val{stroke:var(--teal);stroke-width:18;transition:stroke .3s}
.sh .dial .dot{fill:#fff;transition:opacity .3s}
.sh .plug.off .val{stroke:rgba(255,255,255,.25)}
.sh .pwr{position:absolute;left:294px;top:314px;width:112px;height:112px;border-radius:50%;background:#8c8c8c;display:grid;place-items:center;transition:background .3s, box-shadow .3s}
.sh .pwr svg{width:44px;height:44px;stroke:var(--teal);fill:none;stroke-width:2.2;stroke-linecap:round;transition:stroke .3s}
.sh .plug.off .pwr{background:#9d9d9d}
.sh .plug.off .pwr svg{stroke:#cfcfcf}
.sh .plug:not(.off) .pwr{box-shadow:0 0 0 10px rgba(168,193,190,.18)}
.sh .watts{position:absolute;left:0;right:0;top:490px;font-size:38px;font-weight:500;font-variant-numeric:tabular-nums}
.sh .wlbl{position:absolute;left:0;right:0;top:546px;font-size:18px;opacity:.85}

/* music */
.sh .music{left:710px;top:652px;width:700px;height:342px}
.sh .music .cover{position:absolute;left:20px;top:20px;width:312px;height:302px;border-radius:24px;object-fit:cover;transition:opacity .3s}
.sh .chip{position:absolute;left:350px;top:25px;height:48px;padding:0 18px 0 14px;border-radius:24px;background:rgba(0,0,0,.2);display:flex;align-items:center;gap:8px;font-size:15px}
.sh .chip b{width:20px;height:20px;border-radius:50%;background:#1ed760;display:grid;place-items:center}
.sh .chip b::before{content:"";width:10px;height:6px;border-top:1.6px solid #111;border-bottom:1.6px solid #111}
.sh .music .meta{position:absolute;left:352px;right:0;top:160px;text-align:center}
.sh .ctrl{position:absolute;left:352px;right:0;top:226px;display:flex;justify-content:center;align-items:center;gap:30px}
.sh .ctrl .sk svg{width:26px;height:26px;fill:#fff;opacity:.9}
.sh .ctrl .pp{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .2s}
.sh .ctrl .pp:active{transform:scale(.92)}
.sh .ctrl .pp svg{width:22px;height:22px;fill:#111}
.sh .bar{position:absolute;left:372px;right:40px;top:306px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sh .bar i{display:block;height:100%;background:#fff;width:0}

/* ===== Waven ===== */
.wv{font-family:'Urbanist',sans-serif;color:#fff;background:#0f0f0f}
.wv .board{background:#0f0f0f}
.wv .logo{position:absolute;left:44px;top:52px;font-family:'Unbounded',sans-serif;font-weight:600;font-size:30px;letter-spacing:.04em}
.wv .tabs{position:absolute;left:346px;top:18px;height:72px;padding:0 10px;border-radius:36px;background:#1d1d1d;display:flex;align-items:center;gap:6px}
.wv .tabs button{height:56px;padding:0 30px;border-radius:28px;font-size:18px;opacity:.75;transition:.25s}
.wv .tabs button:hover{opacity:1}
.wv .tabs button.on{background:#2e2e2e;opacity:1}
.wv .side{position:absolute;left:14px;top:270px;width:68px;height:500px;border-radius:34px;background:#1d1d1d;display:flex;flex-direction:column;align-items:center;padding:24px 0;gap:22px}
.wv .side .nb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:background .25s}
.wv .side .nb.on{background:#3a3a3a}
.wv .side .nb:hover{background:#2a2a2a}
.wv .side svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wv .side img{margin-top:auto;width:46px;height:46px;border-radius:50%;object-fit:cover}

.wv .albums{position:absolute;left:100px;top:110px;width:720px;height:400px}
.wv .alb{position:absolute;top:24px;width:250px;height:335px;clip-path:path('M30,0 H62 C76,0 88,9 99,17 C106,22 115,26 125,26 C135,26 144,22 151,17 C162,9 174,0 188,0 H220 C237,0 250,13 250,30 V305 C250,322 237,335 220,335 H30 C13,335 0,322 0,305 V30 C0,13 13,0 30,0Z');transition:transform .45s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.wv .alb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wv .alb::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.wv .alb .nr{position:absolute;left:24px;top:36px;z-index:1;font-size:11px;opacity:.9}
.wv .alb .hrt{position:absolute;right:22px;top:30px;z-index:2}
.wv .alb .inf{position:absolute;left:20px;bottom:22px;z-index:1}
.wv .alb h4{margin:0;font-size:22px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.wv .alb .ar{font-size:14px;opacity:.75;margin-top:2px}
.wv .alb .mt{font-size:12px;opacity:.75;margin-top:14px}
.wv .alb .pl{position:absolute;right:18px;bottom:20px;z-index:2;width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .2s}
.wv .alb .pl:hover{transform:scale(1.08)}
.wv .alb .pl svg{width:16px;height:16px;fill:#111}
.wv .a0{left:0;transform:rotate(0deg)}
.wv .a1{left:250px;transform:rotate(2deg) translateY(4px)}
.wv .a2{left:490px;transform:rotate(-8deg) translateY(-20px)}
.wv .albums:hover .alb{filter:brightness(.8)}
.wv .albums .alb:hover{filter:none;transform:rotate(0) translateY(-12px) scale(1.03);z-index:5}

.wv .hrt svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.6;transition:.2s}
.wv .hrt.on svg{fill:#ff4d6d;stroke:#ff4d6d}
.wv .hrt:active svg{transform:scale(.8)}

.wv .list{position:absolute;left:80px;top:526px;width:770px}
.wv .tr{display:grid;grid-template-columns:60px 1fr 90px 60px 50px;align-items:center;gap:16px;height:94px;padding:0 24px;border-radius:18px;cursor:pointer;transition:background .2s;position:relative}
.wv .tr + .tr::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:rgba(255,255,255,.07)}
.wv .tr:hover{background:#161616}
.wv .tr.on{background:#1a1a1a}
.wv .tr.on::before,.wv .tr.on + .tr::before{opacity:0}
.wv .tr img{width:60px;height:60px;border-radius:50%;object-fit:cover}
.wv .tr .nm{font-size:20px;display:flex;align-items:center;gap:10px}
.wv .tr .by{font-size:13px;opacity:.6;margin-top:4px}
.wv .tr .du{font-size:16px;font-variant-numeric:tabular-nums;opacity:.9}
.wv .dots{display:flex;gap:4px;justify-content:center}
.wv .dots i{width:4px;height:4px;border-radius:50%;background:#fff}
.wv .eq{display:none;gap:2px;align-items:flex-end;height:14px}
.wv .eq i{width:3px;background:#b7f0ff;border-radius:1px;animation:wveq .9s ease-in-out infinite}
.wv .eq i:nth-child(2){animation-delay:-.3s}.wv .eq i:nth-child(3){animation-delay:-.6s}
@keyframes wveq{0%,100%{height:4px}50%{height:14px}}
.wv .tr.on.playing .eq{display:flex}
.wv .tr.on:not(.playing) .eq{display:flex}
.wv .tr.on:not(.playing) .eq i{animation-play-state:paused}

.wv .now{position:absolute;left:870px;top:144px;width:550px;height:860px;clip-path:path('M62,0 H173 C195,0 215,14 233,27 C245,36 259,41 275,41 C290,41 304,36 316,27 C334,14 354,0 377,0 H488 C522,0 550,28 550,62 V798 C550,832 522,860 488,860 H62 C28,860 0,832 0,798 V62 C0,28 28,0 62,0Z');background:#123}
.wv .now > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s, transform 6s ease-out}
.wv .now.playing > img{transform:scale(1.05)}
.wv .now::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(transparent,rgba(8,20,40,.88));pointer-events:none}
.wv .now .top{position:absolute;right:28px;top:44px;z-index:2;display:flex;gap:18px;align-items:center}
.wv .now .body{position:absolute;left:36px;right:36px;bottom:34px;z-index:2}
.wv .now .nr{font-size:12px;opacity:.8}
.wv .now h2{margin:10px 0 0;font-size:38px;font-weight:600;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.wv .now .ln{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:15px}
.wv .now .ln .lk{display:flex;align-items:center;gap:6px;font-size:14px;opacity:.85}
.wv .prog{margin-top:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);cursor:pointer;position:relative;touch-action:none}
.wv .prog::before{content:"";position:absolute;inset:-10px 0}
.wv .prog i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#fff}
.wv .prog b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;opacity:0;transition:opacity .2s}
.wv .prog:hover b{opacity:1}
.wv .times{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;opacity:.85;font-variant-numeric:tabular-nums}
.wv .ctl{margin-top:22px;display:flex;justify-content:space-between;align-items:center;padding:0 22px}
.wv .ctl .ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .2s, opacity .2s}
.wv .ctl .ib:hover{background:rgba(255,255,255,.12)}
.wv .ctl .ib svg{width:22px;height:22px}
.wv .ctl .ib.dim{opacity:.45}
.wv .ctl .ib.act{background:rgba(255,255,255,.18)}
.wv .ctl .pp{width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .2s}
.wv .ctl .pp:active{transform:scale(.92)}
.wv .ctl .pp svg{width:24px;height:24px;fill:#111}