/* Wrapped-like scale and organic artwork, within Gratify's existing palette. */
.platform-demo{margin:0 0 28px;min-width:0;--demo-accent:#d7fb69;--demo-fill:#f59c75}
.platform-demo[data-track="1"]{--demo-accent:#bba5f5;--demo-fill:#bba5f5}
.platform-demo[data-track="2"]{--demo-accent:#ffadcd;--demo-fill:#d7fb69}
.demo-label{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;margin-bottom:14px;color:#bbb9b2}
.demo-label>span:first-child{display:flex;align-items:center;gap:7px;color:#eeeadd;font-weight:700;font-size:12px}
.demo-label i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.demo-stage{height:418px;position:relative;isolation:isolate;display:grid;place-items:center;overflow:clip;background:#c9f657;border-radius:26px 65px 26px 26px}
.windows-card .demo-stage{background:#bba5f5;border-radius:65px 26px 26px 26px}
.demo-decoration{position:absolute;z-index:-1;pointer-events:none;animation:demo-drift 12s ease-in-out infinite;animation-play-state:paused}
.demo-decoration-one{width:330px;height:330px;top:-120px;left:-125px;background:#2b4938;border-radius:34% 65% 36% 60% / 58% 38% 64% 42%;transform:rotate(-26deg)}
.demo-decoration-two{width:300px;height:300px;right:-150px;bottom:-100px;background:#f59c75;border-radius:50%;border:52px solid #bba5f5;transform:rotate(18deg);animation-delay:-5s}
.windows-card .demo-decoration-one{background:#382b4e;left:-65px;top:-150px;transform:rotate(35deg)}
.windows-card .demo-decoration-two{border-color:#c9f657;background:transparent;width:390px;height:390px;right:-170px;bottom:-180px;border-width:65px;border-radius:38% 65% 44% 58%}
.platform-demo[data-playing="true"][data-visible="true"]:not([data-page-hidden="true"]) .demo-decoration{animation-play-state:running}
.demo-sticker{position:absolute;font-size:26px;line-height:.95;font-weight:800;letter-spacing:-1.5px;bottom:27px;left:16px;transform:rotate(-9deg);color:#203625;z-index:-1}
.windows-card .demo-sticker{top:21px;bottom:auto;left:auto;right:18px;color:#30243f;transform:rotate(8deg)}
.demo-device{position:relative;background:#17191a;color:#f2efeb;box-shadow:0 16px 25px #17221c36;font-family:Manrope,sans-serif;overflow:hidden;border:3px solid #343535;transition:box-shadow .3s}
.demo-phone{width:204px;border-radius:25px;transform:rotate(5deg)}
.demo-desktop{width:calc(100% - 28px);max-width:435px;border-radius:12px;transform:rotate(-3deg);margin-top:24px}
.demo-chrome{display:flex;justify-content:space-between;align-items:center;height:23px;padding:4px 12px;font-size:8px;font-weight:700;color:#d4d3cf}
.demo-camera{width:43px;height:9px;background:#080a09;border-radius:20px}
.demo-desktop .demo-chrome{height:23px;background:#262829;font-weight:500;font-size:9px}
.demo-window-dots{display:flex;gap:4px}.demo-window-dots i{width:4px;height:4px;border-radius:50%;background:#888b87}
.demo-app-head{display:flex;align-items:center;gap:5px;padding:3px 10px 7px;font-size:13px;letter-spacing:-.5px}
.demo-app-head img{width:17px;height:17px}
.demo-device button{display:inline-grid;place-items:center;font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;flex-shrink:0;touch-action:manipulation;transition:background .2s,transform .2s,color .2s}
.demo-device button:hover{background:#ffffff16}.demo-device button:active{transform:scale(.92)}
.demo-device button:focus-visible,.demo-seek:focus-visible{outline:2px solid #d7fb69;outline-offset:3px}
.demo-app-head .demo-lyrics-toggle{margin-left:auto;border-radius:12px;min-width:44px;min-height:36px;font-size:10px;letter-spacing:0;color:var(--demo-accent);background:#ffffff0e}
.demo-workspace{display:flex;min-width:0}
.demo-screen{flex:1;min-width:0;position:relative}
.demo-art-view{display:grid;justify-items:center;gap:8px;padding:0 12px 6px}
.demo-cover{display:block;width:100%;max-width:160px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px 26px 10px 10px}
.demo-mood{font-size:9px;color:#bbbdb5;text-align:center;line-height:1.3;min-height:12px}
.demo-sidebar{width:72px;flex-shrink:0;padding:6px 5px 8px 10px;font-size:9px;display:grid;grid-template-columns:12px 1fr;gap:8px 2px;align-content:start;color:#b9bcb4}
.demo-sidebar>div{grid-column:1/-1;height:25px}.demo-sidebar>span:nth-last-child(2),.demo-sidebar>b{grid-column:1/-1}.demo-sidebar>b{color:var(--demo-accent);font-size:17px;letter-spacing:-1px;margin-top:-8px}
.demo-desktop .demo-screen{height:155px;padding:0 5px 0 0}
.demo-desktop .demo-art-view{display:flex;align-items:center;gap:12px;height:100%;padding:5px 9px 8px 0}
.demo-desktop .demo-cover{width:57%;max-width:145px;border-radius:6px 22px 6px 6px}
.demo-desktop .demo-mood{font-size:16px;letter-spacing:-.7px;font-weight:800;color:#eeeadd;text-align:left;line-height:1.1;max-width:95px;text-wrap:balance}
.demo-player{padding:0 12px 7px}
.demo-song{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 3px}
.demo-song>div{min-width:0;display:grid;gap:1px}
.demo-track-title{font-size:12px;line-height:1.3;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.demo-song>div>span{font-size:9px;color:#a4aaa3}
.demo-song .demo-love{width:36px;height:36px;border-radius:50%;color:#c3c6bc}
.demo-love svg{fill:none;stroke:currentColor;stroke-width:1.7;width:17px;height:17px}
.demo-love[aria-pressed="true"]{color:#ffadcd}.demo-love[aria-pressed="true"] svg{fill:currentColor;stroke-width:0}
.demo-seek{display:block;appearance:none;-webkit-appearance:none;width:100%;height:20px;margin:0;cursor:pointer;background:transparent;--position:0%}
.demo-seek::-webkit-slider-runnable-track{height:3px;border-radius:5px;background:linear-gradient(to right,var(--demo-accent) var(--position),#555a54 var(--position))}
.demo-seek::-moz-range-track{height:3px;border-radius:5px;background:#555a54}.demo-seek::-moz-range-progress{background:var(--demo-accent);height:3px}
.demo-seek::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:var(--demo-accent);border-radius:50%;margin-top:-3px}.demo-seek::-moz-range-thumb{width:9px;height:9px;background:var(--demo-accent);border:0;border-radius:50%}
.demo-times{display:flex;justify-content:space-between;font-size:8px;color:#b5b9af;font-variant-numeric:tabular-nums;margin-top:-4px}
.demo-transport{display:flex;align-items:center;justify-content:center;gap:12px}
.demo-transport button{width:44px;height:44px;border-radius:50%}.demo-transport svg{width:16px;height:16px;fill:currentColor}
.demo-transport .demo-play{width:44px;height:44px;color:#20271e;background:var(--demo-accent)}.demo-play svg{width:19px;height:19px}.demo-play:hover{background:#eeeadd!important}
.demo-desktop .demo-player{padding:5px 12px 7px;border-top:1px solid #333b32;display:grid;grid-template-columns:1fr 136px;gap:0 10px;align-items:center}
.demo-desktop .demo-song{grid-column:1;grid-row:1/4;margin:0}.demo-desktop .demo-seek{grid-column:2;grid-row:2}.demo-desktop .demo-times{grid-column:2;grid-row:3}.demo-desktop .demo-transport{grid-column:2;grid-row:1;gap:1px}.demo-desktop .demo-transport button{width:44px;height:44px}.demo-desktop .demo-transport .demo-play{width:44px;height:44px}
.demo-lyric-view{padding:6px 14px 0;height:191px;overflow:hidden;background:#35352a;border-radius:12px;margin:0 10px 4px}
.demo-lyric-view>span{font-size:9px;color:#d0d1bf}.demo-lines{margin-top:13px;display:grid;gap:9px}
.platform-card .demo-lines p{font-size:15px;line-height:1.25;margin:0;color:#8d907c;font-weight:800;letter-spacing:-.5px;transition:color .3s,transform .3s;transform-origin:left}
.platform-card .demo-lines p.is-current{color:var(--demo-accent);transform:translateX(2px)}
.demo-phone .demo-lines{gap:8px;margin-top:10px}.platform-card .demo-phone .demo-lines p{font-size:13px;line-height:1.2}
.demo-desktop .demo-lyric-view{height:145px;margin:0 3px;padding:8px 12px;background:#34312e}.demo-desktop .demo-lines{gap:5px;margin-top:7px}.demo-desktop .demo-lines p{font-size:14px}
.platform-demo [hidden]{display:none!important}
.platform-card .demo-hint{font-size:12px;color:#e3dfd2;line-height:1.7;margin:13px 0 0}
.demo-hint>span{display:block;color:#a8aa9f;font-size:10px}
.demo-track-source{text-decoration:underline;text-underline-offset:3px}.demo-track-source:hover{color:var(--cream)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.download-intro{position:relative;isolation:isolate}.download-intro::after{content:'';position:absolute;width:95px;height:95px;right:0;top:10px;background:url('/assets/organic-rhythm.svg') center/contain no-repeat;transform:rotate(-12deg);opacity:.8;z-index:-1}
@keyframes demo-drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:8px -10px;rotate:12deg}}
@media(min-width:1250px){.demo-phone{width:218px}.demo-stage{height:438px}.demo-phone .demo-cover{max-width:173px}.demo-phone .demo-lyric-view{height:204px}.demo-sticker{font-size:31px;left:24px}}
@media(max-width:1000px) and (min-width:761px){.demo-desktop .demo-sidebar{display:none}.demo-desktop .demo-player{grid-template-columns:1fr 134px;gap:0 4px}.demo-desktop .demo-mood{font-size:14px}.demo-desktop .demo-love{width:26px}.demo-sticker{font-size:22px;left:10px}.demo-desktop{width:calc(100% - 18px)}.demo-label{font-size:10px}}
@media(max-width:760px){.demo-stage{height:414px}.demo-desktop{max-width:430px}.platform-demo{margin-bottom:25px}.demo-sticker{left:25px;font-size:30px}.download-intro::after{top:0;width:80px;opacity:.5}}
@media(max-width:400px){.demo-stage{height:392px}.demo-phone{width:194px}.demo-phone .demo-cover{max-width:150px}.demo-phone .demo-lyric-view{height:181px}.demo-sticker{font-size:23px;left:12px}.demo-desktop .demo-sidebar{display:none}.demo-desktop .demo-player{grid-template-columns:1fr 134px;gap:0 5px}.demo-desktop .demo-love{width:28px}.demo-desktop .demo-mood{font-size:15px}.demo-desktop .demo-transport{gap:0}.demo-label{font-size:10px}.demo-label>span:first-child{font-size:11px}}
@media(max-width:450px){.demo-desktop .demo-player{grid-template-columns:1fr;padding:4px 12px 6px}.demo-desktop .demo-song{grid-column:1;grid-row:1}.demo-desktop .demo-song .demo-love{width:40px;height:36px}.demo-desktop .demo-transport{grid-column:1;grid-row:2;gap:10px}.demo-desktop .demo-seek{grid-column:1;grid-row:3}.demo-desktop .demo-times{grid-column:1;grid-row:4}.demo-desktop .demo-track-title{font-size:12px}.demo-desktop .demo-song>div>span{white-space:nowrap}.windows-card .demo-sticker{top:9px;font-size:22px}.demo-desktop{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.platform-demo *,.platform-demo *::before,.platform-demo *::after{animation:none!important;transition:none!important}}