@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap";:root{--c-sidebar: 11 17 32;--c-surface: 15 23 42;--c-surface-deep: 2 6 23;--c-surface-raised: 30 41 59;--c-surface-muted: 51 65 85;--content-primary: 248 250 252;--content-secondary: 226 232 240;--content-tertiary: 203 213 225;--content-muted: 163 178 199;--content-faint: 136 150 170;--content-ghost: 106 120 140;--c-purple-500: 168 85 247;--c-purple-400: 192 132 252;--c-violet-500: 139 92 246;--accent: var(--c-purple-500);--accent-hover: var(--c-purple-400);--danger: 248 113 113}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(1200px 600px at 50% -10%,rgb(var(--c-violet-500) / .1),transparent 60%),rgb(var(--c-surface-deep));color:rgb(var(--content-primary));font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.pf-center{min-height:100vh;display:grid;place-items:center;padding:24px}.pf-muted{color:rgb(var(--content-muted))}.pf-faint{color:rgb(var(--content-faint))}.pf-header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid rgb(var(--c-surface-raised));position:-webkit-sticky;position:sticky;top:0;z-index:5;background:rgb(var(--c-surface-deep) / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pf-brand{font-size:16px;font-weight:800;letter-spacing:-.02em}.pf-brand span{color:rgb(var(--accent))}.pf-sub{font-size:12px;color:rgb(var(--content-faint));margin-left:8px;font-weight:500}.pf-actions{display:flex;align-items:center;gap:12px;font-size:13px}.pf-btn{background:rgb(var(--accent));color:#fff;border:none;border-radius:10px;padding:11px 22px;font:inherit;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;box-shadow:0 6px 18px rgb(var(--c-purple-500) / .28)}.pf-btn:hover{background:rgb(var(--accent-hover))}.pf-btn:active{transform:translateY(1px)}.pf-ghost{background:transparent;color:rgb(var(--content-tertiary));border:1px solid rgb(var(--c-surface-raised));border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer;transition:background .15s,color .15s}.pf-ghost:hover{background:rgb(var(--c-surface-raised));color:rgb(var(--content-primary))}.pf-panel{background:rgb(var(--c-surface));border:1px solid rgb(var(--c-surface-raised));border-radius:20px;padding:40px 38px;text-align:center;max-width:380px;box-shadow:0 24px 60px #02061780}.pf-panel h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em}.pf-panel h1 span{color:rgb(var(--accent))}.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;padding:24px}.pf-card{background:rgb(var(--c-surface));border:1px solid rgb(var(--c-surface-raised));border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s}.pf-card:hover{border-color:rgb(var(--accent) / .55);transform:translateY(-3px);box-shadow:0 16px 34px #0206178c}.pf-preview{display:flex;height:128px;border:none;padding:0;cursor:pointer;position:relative}.pf-preview .pf-play-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#02061700;color:#fff;opacity:0;transition:background .15s,opacity .15s;font-size:30px}.pf-card:hover .pf-play-hint{background:#0206176b;opacity:1}.pf-body{padding:13px 14px 14px}.pf-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pf-meta{font-size:11px;color:rgb(var(--content-faint));margin:4px 0 12px;text-transform:capitalize}.pf-play{width:100%;padding:9px 0;font-size:13px;border-radius:9px}.pf-err{background:rgb(var(--danger) / .12);border:1px solid rgb(var(--danger) / .4);color:rgb(var(--danger));padding:10px 14px;border-radius:10px;font-size:13px;margin:0 24px 4px}