.lp:not(:has(.df-nav)){--df-nav-height:0px}html:has(.df-nav){scrollbar-width:none}html:has(.df-nav)::-webkit-scrollbar{display:none}.lp:has(.df-nav){--df-nav-height:calc(75px + env(safe-area-inset-bottom));padding-bottom:var(--df-nav-height)}.lp:has(.df-nav) :is(button,a,input,summary,footer){scroll-margin-block:80px calc(var(--df-nav-height) + 20px)}.lp:has(.df-nav)>.lp-skip{z-index:50}.app-shell:has(.df-shell){min-height:0}.lp:has(.df-shell){min-height:0;padding-bottom:0}:is(html:has(.df-shell) body,html:has(.lp>.df-page) body){background:#ffd65a}.lp:has(>.df-page){--lp-bg:#ffd65a;--lp-surface:#fffaf1;--lp-soft:#fbf0d9;--lp-text:#432843;--lp-muted:#6b4e6b;--lp-line:#4328432e;--lp-accent:#432843;--lp-accent-text:#fffaf1;--bg:#ffd65a;--surface:#fffaf1;--surface-soft:#fbf0d9;--ink:#432843;--muted:#6b4e6b;--line:#4328432e;--border:#4328432e;--accent:#432843;--accent-dark:#2b1b2b;--accent-soft:#fbf0d9;--on-accent:#fffaf1;--mat-line:#432843;--mat-field-line:#43284347;--mat-lift:0 5px 0 #43284338;--mat-lift-small:0 3px 0 #43284330;--df-yellow:#ffd65a;--df-plum:#432843;--df-plum-soft:#6b4e6b;--df-cream:#fffaf1;--df-berry:#b8587a;--df-line:3px solid #432843;--df-lift:0 5px 0 #43284338;color:#432843;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#ffd65a}.df-shell{--df-offset:0px;--df-yellow:#ffd65a;--df-plum:#432843;--df-plum-soft:#6b4e6b;--df-cream:#fffaf1;--df-berry:#b8587a;--df-wood:#f2d7a0;--df-line:3px solid var(--df-plum);--df-lift:0 5px 0 #43284338;--df-gutter:max(12px, env(safe-area-inset-left));--df-top:calc(64px + env(safe-area-inset-top));height:calc(100dvh - var(--df-offset));width:100%;min-height:280px;padding-bottom:var(--df-nav-height);background:var(--df-yellow);color:var(--df-plum);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;flex-direction:column;display:flex;position:relative;overflow:hidden}:is(.df-shell,.df-page) :is(button,a):focus-visible{outline:3px solid var(--df-berry);outline-offset:3px}.df-page,.df-page-head{width:100%;max-width:900px;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);margin-inline:auto}.df-page{flex-direction:column;flex:1;display:flex}.df-page-main{flex:1;padding:12px 20px 32px}.df-page>.lp-footer{width:auto;margin-inline:20px}.df-header{min-height:64px;padding:calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;display:flex;position:relative}.df-header .doolpop-brand{width:96px;height:38px}.df-header>div{align-items:center;gap:8px;display:flex}.df-header>div>:is(button,a){border:2px solid var(--lp-text);background:var(--lp-surface);min-width:44px;height:44px;min-height:44px;color:var(--lp-text);font-size:var(--text-caption);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0;font-weight:700;line-height:1;display:inline-flex;box-shadow:0 4px #43284330}.df-header>div>.df-code{padding:0 13px}.df-header>div>:is(button,a):active{transform:translateY(2px);box-shadow:0 2px #43284330}@media (width<=360px){.df-header .doolpop-brand{width:80px}.df-header>div{gap:6px}.df-header>div>.df-code{padding:0 10px}}@media (width<=340px){.df-header>div>.df-code{width:44px;padding:0}.df-header .df-code>span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.df-header .df-list-button>span,.df-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.df-nav{box-sizing:border-box;height:calc(75px + env(safe-area-inset-bottom));z-index:40;padding:6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));border-top:3px solid var(--lp-text);background:var(--lp-surface);color:var(--lp-text);grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid;position:fixed;inset:auto 0 0}.df-nav button{min-width:0;min-height:60px;color:var(--lp-muted);font-size:var(--text-caption);font-weight:var(--weight-label);text-align:center;word-break:keep-all;overflow-wrap:anywhere;border:2px solid #0000;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 4px;line-height:1.4;display:flex}.df-nav button svg{flex:0 0 24px}.df-nav [aria-current]{color:#432843;font-weight:var(--weight-title);background:#ffd65a;border-color:#432843;box-shadow:0 3px #43284333}.df-shell .df-header{z-index:4;pointer-events:none;position:absolute;inset:0 0 auto}.df-shell .df-header>*{pointer-events:auto}:is(.df-shell,.df-page) .df-header>.brand{border:var(--df-line);background:var(--df-cream);height:44px;box-shadow:var(--df-lift);border-radius:999px;padding:0 12px 0 8px}:is(.df-shell,.df-page) .df-header .doolpop-brand{width:76px;height:30px}.lp :is(.df-shell,.df-page) .doolpop-logo-light{display:block}.lp :is(.df-shell,.df-page) .doolpop-logo-dark{display:none}:is(.df-shell,.df-page) .df-header>div>:is(button,a){border:var(--df-line);background:var(--df-cream);color:var(--df-plum);box-shadow:var(--df-lift)}:is(.df-shell,.df-page) .df-nav{border-top:var(--df-line);background:var(--df-cream);color:var(--df-plum)}:is(.df-shell,.df-page) .df-nav button:not([aria-current]){color:var(--df-plum-soft)}.df-main{flex:1;min-height:0}.df-scroll{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;touch-action:pan-y;height:100%;position:relative;overflow:hidden auto}.df-scroll::-webkit-scrollbar{display:none}.df-scroll:focus-visible{outline:3px solid var(--df-berry);outline-offset:-4px}.df-slide{isolation:isolate;height:100%;padding:var(--df-top) max(12px, env(safe-area-inset-right)) 12px var(--df-gutter);scroll-snap-align:start;scroll-snap-stop:always;flex-direction:column;display:flex;position:relative;overflow:hidden}.df-slide:before,.df-slide:after{content:"";z-index:-2;pointer-events:none;position:absolute}.df-slide:before{background:var(--df-poster) center / cover no-repeat;opacity:.2;filter:blur(14px)saturate(.85);inset:-12%}.df-slide:after{background:radial-gradient(circle at 50% 40%,#fffaf166,#0000 60%),linear-gradient(#ffd65a99,#0000 22% 70%,#ffd65ab3);inset:0}.df-stage{min-height:0;margin:8px calc(-1 * max(12px, env(safe-area-inset-right))) 12px calc(-1 * var(--df-gutter));pointer-events:none;flex:auto;position:relative}.df-stage>.df-media{object-fit:contain;border-block:var(--df-line);background:var(--df-wood);-webkit-user-drag:none;width:100%;height:auto;max-height:100%;margin:auto;display:block;position:absolute;inset:0;box-shadow:0 6px #43284329}.df-stage[data-preview-fit=cover]{position:static}.df-stage[data-preview-fit=cover]>.df-media{z-index:-1;object-fit:cover;object-position:50% 70%;height:74%;max-height:none;box-shadow:none;border:0;bottom:auto}.df-stage[data-preview-fit=cover-art]>.df-media{border:var(--df-line);border-radius:22px;width:min(86%,100% - 32px)}.df-bubble{z-index:3;letter-spacing:-.03em;word-break:keep-all;text-wrap:balance;border-radius:22px;max-width:82%;margin:0;padding:11px 15px;line-height:1.28;position:relative}.df-you{top:calc(var(--df-top) + 14px);left:var(--df-gutter);transform-origin:0 100%;border:var(--df-line);background:var(--df-cream);color:var(--df-plum);box-shadow:var(--df-lift);border-bottom-left-radius:8px;font-size:clamp(1.125rem,5.4vw,1.4375rem);font-weight:800;position:absolute}.df-me{transform-origin:100% 0;background:var(--df-plum);color:var(--df-cream);box-shadow:var(--df-lift);border-top-right-radius:8px;flex-shrink:0;align-self:flex-end;margin-bottom:14px;font-size:clamp(.875rem,4vw,1.03125rem);font-weight:700}.df-tag{border:2px solid var(--df-plum);background:var(--df-yellow);color:var(--df-plum);letter-spacing:0;border-radius:999px;align-items:center;gap:4px;padding:3px 9px 3px 6px;font-size:.75rem;font-weight:800;line-height:1.1;display:inline-flex;position:absolute;top:-14px}.df-tag svg{width:14px;height:13px}.df-you .df-tag{left:12px}.df-you .df-tag path{fill:var(--df-berry)}.df-me .df-tag{right:12px}.df-me .df-tag path{fill:var(--df-plum)}.df-info{z-index:4;border:var(--df-line);background:var(--df-cream);color:var(--df-plum);transform-origin:50% 100%;border-radius:26px;flex-shrink:0;gap:7px;padding:10px 16px 14px;display:grid;position:relative;box-shadow:0 6px #43284342}.df-position{justify-self:center;margin:-16px 0 -14px;display:flex}.df-position button{place-items:center;width:44px;height:44px;padding:0;display:grid}.df-position button span{background:#43284338;border-radius:99px;width:7px;height:7px}.df-position [aria-current] span{background:var(--df-plum);width:20px}.df-meta{min-width:0;color:var(--df-plum-soft);font-size:var(--text-caption);white-space:nowrap;align-items:center;gap:8px;font-weight:700;display:flex}.df-meta>span:first-child{border:2px solid var(--df-plum);background:var(--df-yellow);color:var(--df-plum);border-radius:999px;flex:none;padding:3px 9px;font-weight:800}.df-meta>span:last-child{text-overflow:ellipsis;min-width:0;overflow:hidden}.df-title-row{align-items:center;gap:10px;display:flex}.lp .df-title-row h2{min-width:0;color:var(--df-plum);letter-spacing:-.045em;flex:1;margin:0;font-size:clamp(1.5625rem,7.4vw,1.9375rem);font-weight:800;line-height:1.15}.df-title-actions{flex:none;gap:8px;display:flex}.df-title-actions :is(.favorite-toggle,.df-share){border:var(--df-line);background:var(--df-cream);width:44px;height:44px;min-height:44px;color:var(--df-plum);box-shadow:var(--df-lift);border-radius:50%;place-items:center;padding:0;display:grid}.df-title-actions .favorite-toggle[aria-pressed=true]{background:var(--df-berry);color:var(--df-cream)}.df-info>p{color:var(--df-plum-soft);font-size:var(--text-small);word-break:keep-all;margin:0;line-height:1.5}.df-info>small{color:var(--df-berry);font-size:var(--text-caption);display:block}.df-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;margin-top:3px;display:grid}.df-actions button{min-height:52px;font-size:var(--text-body);letter-spacing:-.02em;white-space:normal;border-radius:18px;justify-content:center;align-items:center;gap:7px;padding:10px 8px;font-weight:800;display:flex;position:relative;overflow:hidden}.df-play{border:var(--df-line);background:var(--df-cream);color:var(--df-plum);box-shadow:var(--df-lift)}.df-together{background:var(--df-plum);color:var(--df-cream);font-size:1.0625rem;box-shadow:0 5px #43284357}.df-together svg{color:var(--df-yellow)}.df-together:disabled{opacity:.55}.df-together:after{content:"";pointer-events:none;background:linear-gradient(105deg,#0000 35%,#fffaf147 50%,#0000 65%);position:absolute;inset:0;transform:translate(-120%)}.df-actions button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px #4328434d}.df-swipe-hint{z-index:5;border:var(--df-line);background:var(--df-yellow);max-width:calc(100% - 48px);color:var(--df-plum);box-shadow:var(--df-lift);font-size:var(--text-small);white-space:nowrap;pointer-events:none;border-radius:999px;align-items:center;gap:6px;padding:8px 14px;font-weight:800;line-height:1.4;display:flex;position:absolute;top:44%;left:50%;transform:translate(-50%)}.df-swipe-hint svg{flex-shrink:0}@media (prefers-reduced-motion:no-preference){.df-swipe-hint:not([data-still]) svg{animation:1s ease-in-out 2 df-swipe-nudge}}@keyframes df-swipe-nudge{50%{transform:translateY(-4px)}}.df-party{background:var(--lp-soft);min-height:44px;color:var(--lp-accent);font-size:var(--text-caption);border-radius:12px;justify-content:center;align-items:center;gap:7px;margin:6px 20px;padding:8px 12px;display:flex}.df-shell>.df-party{z-index:5;top:var(--df-top);margin:0 max(12px, env(safe-area-inset-right)) 0 var(--df-gutter);border:var(--df-line);background:var(--df-cream);color:var(--df-plum);box-shadow:var(--df-lift);border-radius:999px;font-weight:700;position:absolute;left:0;right:0}.df-page>.df-party{margin:4px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));color:#432843;background:#fffaf1;border:3px solid #432843;border-radius:999px;font-weight:700;box-shadow:0 5px #43284338}.df-shell:has(>.df-party) .df-you{top:calc(var(--df-top) + 66px)}.lp-feed-return{justify-content:center;margin:0 20px;padding-block:6px;display:flex}.lp-feed-return>button{width:100%}@media (height<=700px) and (orientation:portrait){.df-shell{--df-top:calc(58px + env(safe-area-inset-top))}.df-header{min-height:58px;padding-top:calc(7px + env(safe-area-inset-top));padding-bottom:7px}.df-me{display:none}.df-you{top:calc(var(--df-top) + 10px);padding:9px 13px;font-size:1.0625rem}.df-stage{margin-top:4px;margin-bottom:10px}.df-info{border-radius:22px;gap:5px;padding:8px 14px 12px}.lp .df-title-row h2{font-size:1.4375rem}.df-info>p{font-size:.84375rem;line-height:1.4}.df-actions button{border-radius:16px;min-height:46px;font-size:.9375rem}}@media (orientation:landscape) and (height<=600px){.df-shell{--df-top:calc(60px + env(safe-area-inset-top))}.df-slide{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:16px;display:grid}.df-stage{margin:0 0 0 calc(-1 * var(--df-gutter));grid-area:1/1;align-self:stretch}.df-stage[data-preview-fit=cover]{position:relative}.df-stage[data-preview-fit=cover]>.df-media{border-block:var(--df-line);height:100%}.df-me{display:none}.df-you{max-width:46%;padding:8px 12px;font-size:1rem}.df-info{grid-area:1/2;gap:5px}.lp .df-title-row h2{font-size:var(--text-title-sm)}.df-actions button{min-height:44px}.df-shell>.df-party{top:auto;right:52%;bottom:calc(var(--df-nav-height) + 16px)}}@media (prefers-reduced-motion:no-preference){.df-actions button,.df-header>div>:is(button,a),.df-position button span{transition:transform .12s,width .25s}}
