.sayo-wrapper{perspective:800px;transform-origin:50%;pointer-events:none;transform:scale(1.2)}@media (max-width:1280px){.sayo-wrapper{transform:scale(1)}}@media (max-width:1024px){.sayo-wrapper{transform:scale(.85)}}@media (max-width:768px){.sayo-wrapper{transform:scale(.72)}}@media (max-width:480px){.sayo-wrapper{transform:scale(.58)}}@media (max-width:360px){.sayo-wrapper{transform:scale(.48)}}.sayo-wrapper .scene-container{transform-style:preserve-3d;animation:8s ease-in-out infinite sayo-float;position:relative}@keyframes sayo-float{0%,to{transform:translateY(0)rotateX(-8deg)rotateY(10deg)rotate(-6deg)}50%{transform:translateY(-15px)rotateX(-8deg)rotateY(10deg)rotate(-6deg)}}.sayo-wrapper .keyboard-base{width:400px;height:180px;transform-style:preserve-3d;position:relative;transform:rotateX(-8deg)rotateY(10deg)rotate(-6deg)}.sayo-wrapper .device-edge{background:linear-gradient(#1a1a1a,#0a0a0a);position:absolute}.sayo-wrapper .edge-front{transform-origin:top;background:linear-gradient(#2a2a2a,#0a0a0a);width:100%;height:30px;bottom:-30px;transform:rotateX(-90deg)}.sayo-wrapper .edge-back{transform-origin:bottom;width:100%;height:30px;top:-30px;transform:rotateX(90deg)}.sayo-wrapper .edge-left{transform-origin:100%;width:30px;height:180px;left:-30px;transform:rotateY(-90deg)}.sayo-wrapper .edge-right{transform-origin:0;width:30px;height:180px;right:-30px;transform:rotateY(90deg)}.sayo-wrapper .keyboard-body{width:100%;height:100%;transform-style:preserve-3d;background:linear-gradient(135deg,#3a3a3a 0%,#4a4a4a 25%,#3a3a3a 50%,#5a5a5a 75%,#3a3a3a 100%);border-radius:15px;position:relative;transform:translateZ(15px);box-shadow:0 30px 60px #000000e6,0 15px 30px #000000b3,inset 0 2px #ffffff26,inset 0 -2px #0006,0 0 100px #00c8ff1a}.sayo-wrapper .surface-texture{pointer-events:none;opacity:.8;background:repeating-linear-gradient(90deg,#0000,#0000 1px,#ffffff08 1px 2px),repeating-linear-gradient(0deg,#0000,#0000 1px,#ffffff05 1px 2px);border-radius:15px;position:absolute;inset:0}.sayo-wrapper .knob-assembly{transform-style:preserve-3d;position:absolute;top:25px;left:30px;transform:translateZ(20px)}.sayo-wrapper .knob-base{background:radial-gradient(circle,#2a2a2a,#1a1a1a);border-radius:50%;width:45px;height:45px;position:absolute;box-shadow:inset 0 2px 5px #000c,0 1px #ffffff1a}.sayo-wrapper .volume-knob{width:40px;height:40px;transform-style:preserve-3d;transition:transform .2s;position:relative;transform:translateZ(15px)rotate(0)}.sayo-wrapper .knob-top{background:radial-gradient(circle at 40% 40%,#6a6a6a 0%,#4a4a4a 30%,#3a3a3a 60%,#2a2a2a 100%);border-radius:50%;width:40px;height:40px;position:absolute;transform:translateZ(10px);box-shadow:0 5px 15px #000000b3,inset 0 -2px 5px #00000080,inset 0 2px 2px #fff3}.sayo-wrapper .knob-indicator{background:linear-gradient(#0ff,#09c);border-radius:1px;width:3px;height:15px;position:absolute;top:5px;left:50%;transform:translate(-50%);box-shadow:0 0 5px #0ffc}.sayo-wrapper .knob-texture{background:repeating-conic-gradient(#0000 0deg 10deg,#0000001a 10deg 11deg);border-radius:50%;width:100%;height:100%;position:absolute}.sayo-wrapper .knob-side{background:linear-gradient(#3a3a3a,#1a1a1a);border-radius:50%;width:40px;height:15px;position:absolute;bottom:-5px;transform:rotateX(90deg)}.sayo-wrapper .knob-label{color:#666;letter-spacing:1px;font-size:8px;position:absolute;top:50px;left:10px}.sayo-wrapper .volume-knob:hover{transform:translateZ(17px)rotate(5deg)}.sayo-wrapper .display-panel{background:linear-gradient(145deg,#0a0a0a,#1a1a1a);border-radius:8px;width:200px;height:50px;padding:3px;position:absolute;top:20px;left:50%;transform:translate(-50%)translateZ(5px);box-shadow:inset 0 3px 8px #000000e6,0 1px #ffffff1a}.sayo-wrapper .display-screen{pointer-events:auto;cursor:pointer;background:linear-gradient(145deg,#000508,#0a1520);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.sayo-wrapper.playing .display-screen{box-shadow:inset 0 0 20px #00ffff40}.sayo-wrapper .key.play-mini{z-index:5;width:26px;height:26px;position:absolute;top:31px;left:calc(50% + 112px);transform:translateZ(15px)}.sayo-wrapper .key.play-mini .key-top{border-radius:6px}.sayo-wrapper .key.play-mini .key-label{font-size:11px;line-height:1}.sayo-wrapper .key.play-mini .key-side,.sayo-wrapper .key.play-mini .key-shadow{display:none}.sayo-wrapper .key.play-mini.active{transform:translateZ(8px)}.sayo-wrapper .display-screen:before{content:"";background:linear-gradient(90deg,#0000,#64c8ff26,#0000);width:100%;height:100%;animation:4s linear infinite sayo-scan;position:absolute;top:0;left:-100%}@keyframes sayo-scan{to{left:100%}}.sayo-wrapper .display-text{letter-spacing:3px;background:linear-gradient(90deg,#0ff,#f0f,#0ff) 0 0/200% 100%;-webkit-text-fill-color:transparent;text-shadow:0 0 20px #00ffff80;-webkit-background-clip:text;background-clip:text;font-size:12px;font-weight:600;animation:3s linear infinite sayo-gradient}@keyframes sayo-gradient{to{background-position:-200% 0}}.sayo-wrapper .display-info{color:#4a9eff;opacity:.9;letter-spacing:1px;margin-top:2px;font-size:8px}.sayo-wrapper .spectrum-visualizer{gap:2px;height:8px;display:flex;position:absolute;bottom:3px}.sayo-wrapper .spectrum-bar{opacity:.3;background:linear-gradient(#f0f,#0ff);width:3px;animation:.5s ease-in-out infinite paused sayo-spectrum}.sayo-wrapper.playing .spectrum-bar{opacity:.9;animation-play-state:running}.sayo-wrapper .spectrum-bar:first-child{height:40%;animation-delay:0s}.sayo-wrapper .spectrum-bar:nth-child(2){height:60%;animation-delay:.1s}.sayo-wrapper .spectrum-bar:nth-child(3){height:80%;animation-delay:.2s}.sayo-wrapper .spectrum-bar:nth-child(4){height:60%;animation-delay:.3s}.sayo-wrapper .spectrum-bar:nth-child(5){height:40%;animation-delay:.4s}@keyframes sayo-spectrum{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.5)}}.sayo-wrapper .keys-container{transform-style:preserve-3d;gap:40px;padding:0 30px;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.sayo-wrapper .key-wrapper{transform-style:preserve-3d;position:relative}.sayo-wrapper .key{transform-style:preserve-3d;cursor:pointer;pointer-events:auto;transition:transform .1s cubic-bezier(.4,0,.2,1);position:relative;transform:translateZ(20px)}.sayo-wrapper .main-key{width:50px;height:50px}.sayo-wrapper .key-top{background:linear-gradient(135deg,#5a5a5a 0%,#6a6a6a 25%,#4a4a4a 50%,#5a5a5a 75%,#4a4a4a 100%);border-radius:10px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;transform:translateZ(15px);box-shadow:inset 0 2px 3px #ffffff4d,inset 0 -3px 6px #0006,0 8px 20px #0009}.sayo-wrapper .key-top:before{content:"";pointer-events:none;background:linear-gradient(135deg,#0000 40%,#ffffff26 50%,#0000 60%);border-radius:7px;position:absolute;inset:3px}.sayo-wrapper .key-label{background:linear-gradient(#fff,#ccc);-webkit-text-fill-color:transparent;text-shadow:0 1px 3px #000000b3;z-index:1;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:700;position:relative}.sayo-wrapper .key-shadow{filter:blur(5px);background:radial-gradient(#00000080,#0000);border-radius:50%;height:10px;position:absolute;bottom:-15px;left:5%;right:5%;transform:translateZ(-5px)}.sayo-wrapper .key-side{background:linear-gradient(#3a3a3a,#1a1a1a);position:absolute}.sayo-wrapper .main-key .key-side-front{transform-origin:top;background:linear-gradient(#3a3a3a,#0a0a0a);border-radius:0 0 5px 5px;width:50px;height:15px;bottom:-15px;transform:rotateX(-90deg)}.sayo-wrapper .main-key .key-side-back{transform-origin:bottom;border-radius:5px 5px 0 0;width:50px;height:15px;top:-15px;transform:rotateX(90deg)}.sayo-wrapper .main-key .key-side-left{transform-origin:100%;border-radius:5px 0 0 5px;width:15px;height:50px;left:-15px;transform:rotateY(-90deg)}.sayo-wrapper .main-key .key-side-right{transform-origin:0;border-radius:0 5px 5px 0;width:15px;height:50px;right:-15px;transform:rotateY(90deg)}.sayo-wrapper .key:hover{transform:translateZ(17px)}.sayo-wrapper .key.active{transform:translateZ(8px)}.sayo-wrapper .key.active .key-top{background:linear-gradient(135deg,#ff6b6b 0%,#ff8787 25%,#ff5252 50%,#ff6b6b 75%,#ff5252 100%);box-shadow:inset 0 2px 3px #fff6,inset 0 -3px 6px #0000004d,0 8px 20px #ff6b6b99,0 0 40px #ff6b6b66}.sayo-wrapper .led-strip{background:linear-gradient(90deg,#0ff 0%,#f0f 20%,#ff0 40%,#0f0 60%,#f0f 80%,#0ff 100%) 0 0/300% 100%;height:4px;animation:5s linear infinite sayo-led;position:absolute;left:0;right:0;transform:translateZ(5px);box-shadow:0 0 15px #0ff9}.sayo-wrapper .top-led{border-radius:15px 15px 0 0;top:0}.sayo-wrapper .bottom-led{border-radius:0 0 15px 15px;bottom:0}@keyframes sayo-led{to{background-position:-300% 0}}.sayo-wrapper .bottom-details{justify-content:space-between;align-items:center;padding:0 30px;display:flex;position:absolute;bottom:12px;left:0;right:0}.sayo-wrapper .port{background:linear-gradient(#0a0a0a,#000);border-radius:3px;width:25px;height:10px;position:relative;box-shadow:inset 0 2px 4px #000000e6}.sayo-wrapper .port-pins,.sayo-wrapper .port-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sayo-wrapper .port-pins{background:repeating-linear-gradient(90deg,#333,#333 2px,#000 2px 4px);width:18px;height:4px}.sayo-wrapper .port-ring{background:#000;border:1px solid #333;border-radius:50%;width:8px;height:8px}.sayo-wrapper .brand-logo{color:#888;letter-spacing:2px;text-shadow:0 1px 2px #00000080;font-size:12px;font-weight:700}
.app-phone-wrap{perspective:1200px;justify-content:center;display:flex}.app-phone{background:linear-gradient(150deg,#3a3a40 0%,#141417 45%,#050505 100%);border-radius:48px;width:270px;height:560px;padding:12px;animation:6s ease-in-out infinite app-float;position:relative;box-shadow:0 50px 90px -20px #000000b3,inset 0 0 0 2px #ffffff12,inset 0 0 6px 2px #000000d9,0 0 70px #8b5cf640}@keyframes app-float{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-16px)rotate(-3deg)}}.app-phone-screen{background:radial-gradient(120% 80% at 50% 0,#8b5cf647,#0000 60%),radial-gradient(120% 80% at 50% 100%,#22d3ee2e,#0000 60%),linear-gradient(160deg,#0a0e18,#0d0a17 55%,#080b12);border-radius:38px;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.app-dynamic-island{z-index:10;background:#000;border-radius:16px;width:88px;height:26px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.app-island-cam{background:radial-gradient(circle at 35% 35%,#2b3a5c,#0a0f1c 70%);border-radius:50%;width:8px;height:8px;position:absolute;top:50%;right:14px;transform:translateY(-50%);box-shadow:0 0 4px #78a0ff80}.app-dynamic-island{transition:width .4s cubic-bezier(.2,.8,.2,1)}.app-phone:hover .app-dynamic-island{width:150px}.app-notifications{z-index:6;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:absolute;top:48px;left:14px;right:14px}.app-notif{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;background:#121420eb;border:1px solid #ffffff14;border-radius:14px;align-items:center;gap:8px;padding:8px 10px;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1);display:flex;transform:translateY(-16px)scale(.96);box-shadow:0 10px 30px #00000073}.app-phone:hover .app-notif{opacity:1;transform:translateY(0)scale(1)}.app-phone:hover .app-notif:first-child{transition-delay:50ms}.app-phone:hover .app-notif:nth-child(2){transition-delay:.14s}.app-phone:hover .app-notif:nth-child(3){transition-delay:.23s}@media (prefers-reduced-motion:reduce){.app-phone{animation:none}}
.sunset-control{--panel-bg:#232528;--clay-base:#2d3035;--clay-top:#383d43;--milled-dark:#161719;--orange-glow:#ff6a13;--orange-liquid:#ff8533;--shadow-dark:#0009;--shadow-light:#ffffff0f}.sunset-control *{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}.dashboard-container{background:var(--panel-bg);width:580px;max-width:580px;box-shadow:0px 40px 80px #000c, inset 0px 2px 4px var(--shadow-light);border-radius:24px;flex-direction:column;gap:50px;padding:40px;display:flex}.panel-row{justify-content:space-between;align-items:center;gap:20px;display:flex}.panel-grid-lower{grid-template-columns:1.2fr 1fr 1fr;gap:20px;display:grid}.control-column{flex-direction:column;gap:28px;display:flex}.control-column.center-align{justify-content:space-between;align-items:center}.dial-milled-track{background:var(--milled-dark);width:180px;height:180px;box-shadow:inset 0px 8px 16px #00000080, 0px 2px 3px var(--shadow-light);border-radius:50%;justify-content:center;align-items:center;padding:4px;display:flex}.dial-outer-glow{background:radial-gradient(circle, transparent 55%, #ff6a1326 65%, var(--orange-glow) 100%);border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;box-shadow:0 0 20px #ff6a1366}.rotary-knob-large{background:linear-gradient(135deg, var(--clay-top), var(--clay-base));cursor:grab;border-radius:50%;width:130px;height:130px;position:relative;box-shadow:0 15px 25px #0009,inset 0 2px 3px #ffffff1a,inset 0 -4px 10px #0006}.knob-indicator-line{background:var(--orange-liquid);width:3px;height:16px;box-shadow:0px 0px 8px var(--orange-glow);border-radius:2px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.control-block-top-right{flex-direction:column;align-items:flex-end;gap:22px;display:flex}.button-group-row{gap:20px;display:flex}.btn-clay{background:linear-gradient(135deg, var(--clay-top), var(--clay-base));cursor:pointer;color:#555c64;border:none;justify-content:center;align-items:center;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.btn-circle{border-radius:50%;width:56px;height:56px;font-size:20px;box-shadow:0 6px 12px #0006,inset 0 1px 2px #ffffff1a}.btn-circle-sm{border-radius:50%;width:42px;height:42px;font-size:13px;box-shadow:0 4px 8px #0006,inset 0 1px 2px #ffffff1a}.btn-clay.active{color:var(--orange-liquid);text-shadow:0px 0px 12px var(--orange-glow);box-shadow:0 2px 4px #0006,inset 0 3px 6px #000000b3}.btn-clay:active{transform:scale(.96)}.milled-well-capsule{background:var(--milled-dark);width:134px;height:48px;box-shadow:inset 0px 4px 8px #00000080, 0px 1px 1px var(--shadow-light);border-radius:14px}.segmented-container{background:var(--milled-dark);border-radius:12px;padding:4px;display:flex;box-shadow:inset 0 3px 6px #00000080}.segment-btn{color:#555c64;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;padding:12px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.segment-btn.active{background:linear-gradient(135deg, var(--clay-top), var(--clay-base));color:var(--orange-liquid);text-shadow:0px 0px 12px var(--orange-glow);box-shadow:0 4px 8px #0000004d,inset 0 1px 1px #ffffff1a}.toggle-row{gap:16px;display:flex}.toggle-track{background:var(--milled-dark);cursor:pointer;border-radius:13px;align-items:center;width:56px;height:26px;padding:3px;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:inset 0 3px 5px #0009}.toggle-handle{background:linear-gradient(135deg, var(--clay-top), var(--clay-base));border-radius:50%;width:20px;height:20px;transition:all .25s cubic-bezier(.175,.885,.32,1.15);box-shadow:0 2px 4px #0006}.toggle-track.active .toggle-handle{background:var(--orange-liquid);box-shadow:0px 0px 10px var(--orange-glow);transform:translate(30px)}.status-indicator-grid{grid-template-columns:1fr 1fr;gap:16px 24px;display:grid}.checkbox-clay,.radio-clay{background:var(--milled-dark);cursor:pointer;width:18px;height:18px;transition:all .2s;position:relative;box-shadow:inset 0 2px 4px #0009}.checkbox-clay{border-radius:4px}.radio-clay{border-radius:50%}.checkbox-clay.active:after{content:"✓";color:var(--orange-liquid);text-shadow:0 0 6px var(--orange-glow);font-size:14px;position:absolute;top:-2px;left:3px}.radio-clay.active:after{content:"";background:var(--orange-liquid);width:8px;height:8px;box-shadow:0 0 8px var(--orange-glow);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.secondary-dial-well{background:var(--milled-dark);border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;display:flex;box-shadow:inset 0 4px 8px #0009}.secondary-dial-knob{background:radial-gradient(circle, var(--clay-base) 60%, var(--clay-top) 100%);cursor:grab;border-radius:50%;width:80px;height:80px;position:relative;box-shadow:0 6px 12px #00000080}.rim-glow-arc{border:2px solid #0000;border-bottom-color:var(--orange-liquid);width:90%;height:90%;filter:drop-shadow(0px 0px 3px var(--orange-glow));border-radius:50%;position:absolute;top:5%;left:5%}.faders-row{flex-direction:row;justify-content:center;gap:30px}.slider-vertical-container{justify-content:center;height:190px;display:flex;position:relative}.slider-track-milled{width:10px;height:100%;box-shadow:inset 2px 0px 4px #000c, 1px 0px 1px var(--shadow-light);background:#18191b;border-radius:5px;position:relative}.slider-fill-liquid{background:linear-gradient(to top, var(--orange-glow), var(--orange-liquid));width:100%;box-shadow:0px 0px 10px var(--orange-glow);border-radius:5px;height:50%;position:absolute;bottom:0}.slider-thumb-clay{background:linear-gradient(135deg, var(--clay-top), var(--clay-base));cursor:ns-resize;z-index:5;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:28px;height:18px;display:flex;position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%);box-shadow:0 4px 6px #0009}.thumb-lines{background:#1e2023;width:16px;height:2px;box-shadow:0 1px #ffffff14}