/* Duemello app shell v3.
   One navigation element becomes three different layouts:
   phones (<700px) get a floating bottom tab bar, tablets (700–1099px) a slim rail,
   desktops (>=1100px) a full sidebar. Older stylesheets are loaded in the `legacy`
   cascade layer (see legacy-*.css), so these unlayered rules win without !important. */

html[data-audience] [hidden]{display:none!important}
html[data-audience]{scroll-padding-top:84px}
body.dm-app{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden}
body.dm-app img,body.dm-app svg{max-width:100%}
body.dm-app::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--dm-pattern);opacity:.55}
.skip-link,body.dm-app>a.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:.7em 1em;border-radius:var(--dm-radius-sm);background:var(--dm-ink);color:var(--dm-page);font-weight:700;text-decoration:none}
.skip-link:focus,body.dm-app>a.skip:focus{top:12px}

/* ---------- Navigation ---------- */
.dm-nav{position:fixed;z-index:70;font-family:var(--dm-body);color:var(--dm-ink)}
.dm-nav-list{list-style:none;margin:0;padding:0;display:flex}
.dm-nav-list li{margin:0;padding:0}
.dm-nav-item{position:relative;display:flex;align-items:center;color:var(--dm-muted);text-decoration:none;font-weight:650;letter-spacing:-.005em;-webkit-tap-highlight-color:transparent;transition:color .2s ease,background-color .25s ease}
.dm-nav-item svg{width:22px;height:22px;flex:none;stroke-width:1.9}
.dm-nav-item:hover{color:var(--dm-ink)}
.dm-nav-item[aria-current="page"]{color:var(--dm-ink)}
.dm-nav-item[data-nav="ask"] svg{color:var(--dm-pop)}
.dm-nav-brand{display:inline-flex;text-decoration:none;color:var(--dm-ink);border-radius:var(--dm-radius-sm)}
.dm-nav-brand .duemello-brand-logo{display:block;height:100%;width:auto;color:var(--dm-ink)}
.dm-nav-heading{margin:0 0 .6rem;font:600 .8125rem/1.3 var(--dm-body);color:var(--dm-muted)}
.dm-theme-switch{display:grid;gap:6px}
.dm-theme-option{display:flex;align-items:center;gap:.6em;min-height:40px;padding:.35em .6em;border:var(--dm-border) solid transparent;border-radius:var(--dm-radius-sm);background:transparent;color:var(--dm-muted);font:600 .875rem/1.1 var(--dm-body);cursor:pointer;text-align:left}
.dm-theme-option:hover{background:var(--dm-soft);color:var(--dm-ink)}
.dm-theme-option[aria-pressed="true"]{background:var(--dm-soft);border-color:var(--dm-line);color:var(--dm-ink)}
.dm-swatch{position:relative;display:inline-block;width:26px;height:26px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.dm-swatch::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px var(--dm-surface)}
.dm-swatch[data-swatch="everyone"]{background:#1f5546}.dm-swatch[data-swatch="everyone"]::after{background:#f3bc4e}
.dm-swatch[data-swatch="couples"]{background:#8c2350}.dm-swatch[data-swatch="couples"]::after{background:#f28ca6}
.dm-swatch[data-swatch="friends"]{background:#4f4ce6}.dm-swatch[data-swatch="friends"]::after{background:#ffd43b}
.dm-swatch[data-swatch="family"]{background:#2770b5}.dm-swatch[data-swatch="family"]::after{background:#f26b5b}

@media (max-width:699px){
  body.dm-app{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .dm-nav{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:66px;border-radius:26px;background:color-mix(in srgb,var(--dm-surface) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:var(--dm-border) solid var(--dm-line);box-shadow:0 18px 40px -18px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.06)}
  .dm-nav-brand,.dm-nav-extra{display:none}
  .dm-nav-list{height:100%;align-items:center;justify-content:space-between;padding:0 6px}
  .dm-nav-list li{flex:1 1 0;min-width:0}
  .dm-nav-item{flex-direction:column;justify-content:center;gap:3px;height:54px;margin:0 2px;border-radius:20px;font-size:11px;line-height:1}
  .dm-nav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dm-nav-item[aria-current="page"]{background:var(--dm-soft);color:var(--dm-primary)}
  .dm-nav-item[aria-current="page"] svg{transform:translateY(-1px)}
  html[data-audience="friends"] .dm-nav{border-color:var(--dm-line-strong);box-shadow:4px 4px 0 var(--dm-line-strong)}
  html[data-audience="friends"] .dm-nav-item[aria-current="page"]{background:var(--dm-accent);color:var(--dm-on-accent)}
  html[data-audience="family"] .dm-nav-item[aria-current="page"]{background:var(--dm-primary);color:var(--dm-on-primary)}
  body.dm-playing .dm-nav{transform:translateY(130%);transition:transform .3s ease}
  body.dm-playing{padding-bottom:env(safe-area-inset-bottom)}
}
@media (min-width:700px) and (max-width:1099px){
  body.dm-app{padding-left:96px}
  .dm-nav{top:0;bottom:0;left:0;width:96px;display:flex;flex-direction:column;align-items:center;padding:18px 0 calc(16px + env(safe-area-inset-bottom));background:var(--dm-surface);border-right:var(--dm-border) solid var(--dm-line)}
  .dm-nav-brand{width:52px;height:52px;overflow:hidden;border-radius:16px}
  .dm-nav-brand .duemello-brand-logo{height:52px;width:auto;max-width:none}
  .dm-nav-list{flex-direction:column;gap:6px;margin-top:26px}
  .dm-nav-item{flex-direction:column;justify-content:center;gap:5px;width:76px;height:66px;border-radius:22px;font-size:11.5px;line-height:1}
  .dm-nav-item[aria-current="page"]{background:var(--dm-soft);color:var(--dm-primary)}
  .dm-nav-extra{margin-top:auto}
  .dm-nav-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .dm-theme-switch{gap:8px;justify-items:center}
  .dm-theme-option{width:44px;height:44px;min-height:0;padding:0;justify-content:center;border-radius:50%}
  .dm-theme-option>span:not(.dm-swatch){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .dm-theme-option[aria-pressed="true"]{border-color:var(--dm-ink)}
  html[data-audience="friends"] .dm-nav{border-right-color:var(--dm-line-strong)}
}
@media (min-width:1100px){
  body.dm-app{padding-left:264px}
  .dm-nav{top:0;bottom:0;left:0;width:264px;display:flex;flex-direction:column;padding:26px 18px 22px;background:var(--dm-surface);border-right:var(--dm-border) solid var(--dm-line);overflow-y:auto}
  .dm-nav-brand{height:42px;padding:2px 6px;align-self:flex-start}
  .dm-nav-list{flex-direction:column;gap:4px;margin-top:34px}
  .dm-nav-item{gap:14px;height:50px;padding:0 16px;border-radius:16px;font-size:15px}
  .dm-nav-item:hover{background:color-mix(in srgb,var(--dm-soft) 60%,transparent)}
  .dm-nav-item[aria-current="page"]{background:var(--dm-soft);color:var(--dm-ink)}
  .dm-nav-item[aria-current="page"]::before{content:"";position:absolute;left:-18px;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--dm-primary)}
  .dm-nav-extra{margin-top:auto;padding:16px;border-radius:var(--dm-radius-md);background:color-mix(in srgb,var(--dm-soft) 55%,transparent)}
  .dm-theme-switch{grid-template-columns:1fr 1fr}
  .dm-theme-option{padding:.4em .45em;font-size:.84rem}
  .dm-theme-option .dm-swatch{width:22px;height:22px}
  html[data-audience="friends"] .dm-nav{border-right-color:var(--dm-line-strong)}
  html[data-audience="friends"] .dm-nav-item[aria-current="page"]{background:var(--dm-accent);color:var(--dm-on-accent);box-shadow:3px 3px 0 var(--dm-line-strong);border:2px solid var(--dm-line-strong)}
  html[data-audience="friends"] .dm-nav-item[aria-current="page"]::before{display:none}
}

/* ---------- Top bar ---------- */
.dm-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;min-height:68px;margin:0;padding:10px clamp(16px,3.6vw,44px);background:color-mix(in srgb,var(--dm-page) 84%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 60%,transparent);color:var(--dm-ink);box-sizing:border-box}
.dm-topbar-brand{display:none;align-items:center;height:38px;padding:0;border:0;background:none;color:var(--dm-ink);cursor:pointer;text-decoration:none}
.dm-topbar-brand .duemello-brand-logo,.dm-topbar-brand svg{height:36px;width:auto}
.dm-topbar-title{min-width:0;display:flex;flex-direction:column;gap:2px}
.dm-topbar-title strong{font:var(--dm-display-weight) clamp(1.15rem,1.6vw,1.4rem)/1.1 var(--dm-display);letter-spacing:var(--dm-display-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-topbar-title small{font:500 .82rem/1.2 var(--dm-body);color:var(--dm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-topbar .header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.dm-icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border-radius:50%;border:var(--dm-border) solid var(--dm-line);background:var(--dm-surface);color:var(--dm-ink);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.dm-icon-btn svg{width:20px;height:20px}
.dm-icon-btn:hover{background:var(--dm-soft)}
html[data-audience="friends"] .dm-icon-btn{border-color:var(--dm-line-strong);box-shadow:2px 2px 0 var(--dm-line-strong)}
@media (max-width:699px){
  .dm-topbar{min-height:60px;padding:8px 14px;gap:8px}
  .dm-topbar-brand{display:inline-flex}
  .dm-topbar-title{display:none}
  .dm-topbar .header-actions{gap:6px}
  .dm-icon-btn{width:42px;height:42px}
}
@media (min-width:1100px){.dm-theme-sheet-button{display:none!important}}

/* ---------- Sheets and dialogs ---------- */
dialog.dm-sheet,body.dm-app dialog.app-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-height:min(86vh,860px);margin:auto;padding:22px 24px 26px;border:var(--dm-card-border);border-radius:var(--dm-radius-xl);background:var(--dm-surface);color:var(--dm-ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:auto}
dialog.dm-sheet::backdrop,body.dm-app dialog.app-dialog::backdrop{background:color-mix(in srgb,var(--dm-ink) 42%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog.dm-sheet[open],body.dm-app dialog.app-dialog[open]{animation:dm-sheet-in .32s cubic-bezier(.2,.9,.25,1)}
@keyframes dm-sheet-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:699px){
  dialog.dm-sheet,body.dm-app dialog.app-dialog{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;border-bottom:0}
  dialog.dm-sheet::before,body.dm-app dialog.app-dialog::before{content:"";display:block;width:44px;height:5px;margin:0 auto 12px;border-radius:5px;background:var(--dm-line)}
  @keyframes dm-sheet-in{from{transform:translateY(40%)}to{transform:none}}
}
.dm-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dm-sheet-head h2{margin:0;font:var(--dm-display-weight) 1.6rem/1.1 var(--dm-display);letter-spacing:var(--dm-display-tracking)}
.dm-sheet p{color:var(--dm-muted);line-height:1.5}

/* Theme picker cards (sheet and first-run chooser share these) */
.dm-theme-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.dm-theme-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:132px;padding:14px;border-radius:var(--dm-radius-md);border:2px solid transparent;cursor:pointer;text-align:left;overflow:hidden;font:inherit}
.dm-theme-card strong{font-size:1.2rem;line-height:1.1}
.dm-theme-card small{font-size:.82rem;line-height:1.3;opacity:.82}
.dm-theme-card[aria-pressed="true"]{border-color:currentColor;box-shadow:0 0 0 3px var(--dm-surface),0 0 0 5px var(--dm-accent)}
.dm-theme-card[data-preview="everyone"]{background:linear-gradient(160deg,#e2ece3,#f1f5ef 70%);color:#15302a}
.dm-theme-card[data-preview="everyone"] strong{font-family:"Young Serif",Georgia,serif;font-weight:400}
.dm-theme-card[data-preview="couples"]{background:linear-gradient(160deg,#f6dfe4,#fff4ee 72%);color:#3b1427}
.dm-theme-card[data-preview="couples"] strong{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:1.45rem}
.dm-theme-card[data-preview="friends"]{background:#fff4c4;color:#1d1a3a;border-color:#1d1a3a;box-shadow:3px 3px 0 #1d1a3a}
.dm-theme-card[data-preview="friends"] strong{font-family:"Shantell Sans",sans-serif;font-weight:800}
.dm-theme-card[data-preview="friends"][aria-pressed="true"]{box-shadow:3px 3px 0 #1d1a3a,0 0 0 4px #4f4ce6}
.dm-theme-card[data-preview="family"]{background:linear-gradient(160deg,#cfe7f6,#ecf5fb 70%);color:#17324a}
.dm-theme-card[data-preview="family"] strong{font-family:"Fredoka",sans-serif;font-weight:600}
.dm-theme-card .dm-theme-dots{display:flex;gap:4px;margin-top:auto}
.dm-theme-card .dm-theme-dots i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* ---------- Page frame and shared sections ---------- */
.dm-main{box-sizing:border-box;width:100%;max-width:1320px;margin:0 auto;padding:clamp(14px,3vw,36px) clamp(16px,3.6vw,44px) 48px}
.dm-section{margin-top:clamp(28px,4vw,48px)}
.dm-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px}
.dm-section-head h2{margin:0;font:var(--dm-display-weight) clamp(1.45rem,2.4vw,2.05rem)/1.08 var(--dm-display);letter-spacing:var(--dm-display-tracking);color:var(--dm-ink)}
.dm-section-head p{margin:.35rem 0 0;color:var(--dm-muted);font-size:.95rem;line-height:1.45;max-width:58ch}
.dm-link{display:inline-flex;align-items:center;gap:.35em;color:var(--dm-primary);font:650 .92rem/1.2 var(--dm-body);text-decoration:none;white-space:nowrap;background:none;border:0;padding:.4em 0;cursor:pointer}
.dm-link svg{width:17px;height:17px}
.dm-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:699px){
  .dm-scroller{display:flex!important;gap:12px;margin-inline:-14px;padding:2px 14px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:14px;scrollbar-width:none;overscroll-behavior-x:contain}
  .dm-scroller::-webkit-scrollbar{display:none}
  .dm-scroller>*{scroll-snap-align:start;flex:0 0 min(78vw,300px)}
}

/* ---------- Toast ---------- */
body.dm-app .toast,body.dm-app #toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;transform:translateX(-50%);max-width:min(92vw,520px);padding:.85em 1.15em;border-radius:var(--dm-radius-md);background:var(--dm-ink);color:var(--dm-page);font:600 .92rem/1.35 var(--dm-body);box-shadow:0 18px 40px -16px rgba(0,0,0,.5);text-align:center}
@media (min-width:700px){body.dm-app .toast,body.dm-app #toast{bottom:28px}}

/* ---------- Footer ---------- */
body.dm-app .public-footer,body.dm-app body>footer{box-sizing:border-box;max-width:1320px;margin:24px auto 0;padding:28px clamp(16px,3.6vw,44px) 36px;border-top:1px solid var(--dm-line);color:var(--dm-muted);background:transparent;display:grid;gap:14px}
body.dm-app .public-footer strong{font:var(--dm-display-weight) 1.35rem/1 var(--dm-display);color:var(--dm-ink)}
body.dm-app .public-footer p{margin:.3rem 0 0}
body.dm-app .public-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
body.dm-app .public-footer a{color:var(--dm-muted);text-decoration:none;font-size:.9rem}
body.dm-app .public-footer a:hover{color:var(--dm-ink);text-decoration:underline}
body.dm-app .public-footer small{font-size:.8rem}

/* Music controls from the ambience module, dressed as shell buttons until the player opens. */
.dm-topbar .ambience-controls{display:flex;align-items:center;gap:6px;margin:0}
.dm-topbar .ambience-toggle,.dm-topbar .ambience-settings{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:44px;min-width:44px;padding:0 .9em;border-radius:var(--dm-radius-pill);border:var(--dm-border) solid var(--dm-line);background:var(--dm-surface);color:var(--dm-ink);font:600 .9rem/1 var(--dm-body);cursor:pointer;box-shadow:none}
.dm-topbar .ambience-settings{padding:0}
.dm-topbar .ambience-toggle svg,.dm-topbar .ambience-settings svg{width:19px;height:19px}
.dm-topbar .ambience-controls[data-state="playing"] .ambience-toggle{background:var(--dm-soft);border-color:var(--dm-primary)}
html[data-audience="friends"] .dm-topbar .ambience-toggle,html[data-audience="friends"] .dm-topbar .ambience-settings{border-color:var(--dm-line-strong);box-shadow:2px 2px 0 var(--dm-line-strong)}
@media (max-width:1099px){.dm-topbar .ambience-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.dm-topbar .ambience-toggle{padding:0;width:44px}}
@media (max-width:699px){.dm-topbar .header-settings,.dm-topbar .ambience-settings{display:none!important}.dm-topbar .header-actions{flex-wrap:nowrap}}

@media (max-width:699px){
  body.dm-app .dm-topbar .header-room{width:44px;min-width:44px;padding:0;border-radius:50%}
  body.dm-app .dm-topbar .header-room #room-status-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .dm-topbar-brand .duemello-brand-logo,.dm-topbar-brand svg{height:32px}
}

/* ---------- Older .button markup and form controls, in the v3 style ---------- */
body.dm-app .button:where(:not(#game-stage *)){display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.65em 1.15em;border-radius:var(--dm-radius-pill);border:var(--dm-border) solid var(--dm-line);background:var(--dm-surface);color:var(--dm-ink);font:600 .95rem/1.1 var(--dm-body);text-decoration:none;cursor:pointer;box-shadow:none}
body.dm-app .button:where(:not(#game-stage *)) svg{width:18px;height:18px}
body.dm-app .button.primary:where(:not(#game-stage *)){background:var(--dm-primary);border-color:var(--dm-primary);color:var(--dm-on-primary)}
body.dm-app .button.quiet:where(:not(#game-stage *)){background:transparent;border-color:transparent;color:var(--dm-primary)}
body.dm-app .button:hover{filter:brightness(1.04)}
html[data-audience="friends"] body.dm-app .button:not(.quiet):where(:not(#game-stage *)){border:2px solid var(--dm-line-strong);box-shadow:3px 3px 0 var(--dm-line-strong)}
html[data-audience="family"] body.dm-app .button.primary{box-shadow:0 4px 0 color-mix(in srgb,var(--dm-primary) 62%,#000)}
body.dm-app :is(input[type="search"],input[type="text"],input:not([type]),input[type="email"],input[type="date"],input[type="number"],select,textarea):where(:not(:is(#game-stage,#puzzle-dialog,.puzzle-columns,.puzzle-card) *)){box-sizing:border-box;min-height:48px;padding:.65em .95em;border-radius:var(--dm-radius-md);border:var(--dm-border) solid var(--dm-line);background:var(--dm-surface);color:var(--dm-ink);font:500 1rem/1.3 var(--dm-body)}
html[data-audience="friends"] body.dm-app :is(input[type="search"],input[type="text"],input:not([type]),select,textarea):where(:not(:is(#game-stage,#puzzle-dialog,.puzzle-columns,.puzzle-card) *)){border-color:var(--dm-line-strong)}
body.dm-app input::placeholder,body.dm-app textarea::placeholder{color:color-mix(in srgb,var(--dm-muted) 80%,transparent)}
body.dm-app textarea:where(:not(:is(#game-stage,#puzzle-dialog,.puzzle-columns,.puzzle-card) *)){min-height:96px;line-height:1.45}
body.dm-app :is(input,select,textarea):focus-visible{outline:3px solid var(--dm-accent);outline-offset:1px}

/* ---------- Shop product cards (home shelf, Ask page, shop) ---------- */
.dm-product{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--dm-radius-lg);background:var(--dm-surface);border:var(--dm-card-border);box-shadow:var(--dm-shadow);overflow:hidden;color:var(--dm-ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
a.dm-product:hover{transform:translateY(-3px);box-shadow:var(--dm-shadow-lift)}
a.dm-product:focus-visible{outline:3px solid var(--dm-accent);outline-offset:3px}
.dm-product-art{display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(160deg,var(--dm-soft),color-mix(in srgb,var(--dm-soft-2) 70%,var(--dm-surface)));overflow:hidden}
.dm-product-art img{width:100%;height:100%;object-fit:cover}
.dm-product-art[data-art="pack"] img{object-fit:contain;padding:8%}
.dm-product-art svg{width:72%;height:auto}
.dm-product-art .pa-shadow{fill:color-mix(in srgb,var(--dm-ink) 14%,transparent)}
.dm-product-art .pa-a{fill:var(--dm-primary);stroke:var(--dm-ink);stroke-width:2.5;stroke-linejoin:round}
.dm-product-art .pa-b{fill:var(--dm-pop);stroke:var(--dm-ink);stroke-width:2.5;stroke-linejoin:round}
.dm-product-art .pa-c{fill:none;stroke:var(--dm-ink);stroke-width:2.5;stroke-linecap:round;opacity:.7}
.dm-product-art .pa-gem{fill:var(--dm-accent);stroke:var(--dm-ink);stroke-width:2}
.dm-product-art .pa-ring{fill:none;stroke:#d8a943;stroke-width:5}
.dm-product-art .pa-heart{fill:var(--dm-pop);stroke:var(--dm-ink);stroke-width:1.5}
.dm-product-art .pa-ribbon{fill:none;stroke:var(--dm-accent);stroke-width:5;stroke-linecap:round}
.dm-product-art .pa-paper{fill:#f6f1e6;stroke:var(--dm-ink);stroke-width:2.5}
.dm-product-art .pa-ink{stroke:#1f1c17;stroke-width:5;stroke-linecap:round}
.dm-product-art [data-art="paper"] .pa-c,.dm-product-art .pa-paper~g .pa-c{stroke:#1f1c17;opacity:.35}
.dm-product-art .pa-metal{fill:#2b2d33;stroke:var(--dm-ink);stroke-width:2.5}
.dm-product-art[data-art="card"] .pa-c{stroke:#e9e3d4}
.dm-product-copy{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.dm-product-tag{font:650 .74rem/1.2 var(--dm-body);color:var(--dm-muted)}
.dm-product[data-status="soon"] .dm-product-tag{color:color-mix(in srgb,var(--dm-pop) 70%,var(--dm-ink))}
.dm-product strong{font:700 1.04rem/1.2 var(--dm-body)}
.dm-product-blurb{font-size:.87rem;line-height:1.42;color:var(--dm-muted)}
.dm-product-action{margin-top:auto;padding-top:10px;font:650 .86rem/1 var(--dm-body);color:var(--dm-primary)}
.dm-product[data-status="soon"] .dm-product-action{color:var(--dm-muted)}
.dm-shop-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1099px) and (min-width:700px){.dm-shop-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.dm-scroller>.dm-product{flex:0 0 min(74vw,290px)}}
/* Guard the shell against older generic nav and header rules. */
.dm-nav-list{box-sizing:border-box}
@media (max-width:699px){.dm-nav{display:block}.dm-nav-list{width:100%}}
body.dm-app .dm-topbar .header-room>[data-icon]{display:inline-flex;align-items:center}
body.dm-app .dm-topbar .header-room>[data-icon] svg{width:19px;height:19px}

/* Older stylesheets force page, header and footer colours with !important. The
   dm-important layer is declared before `legacy`, so its !important rules win. */
:root{--dm-body-bg:var(--dm-page);--dm-topbar-bg:color-mix(in srgb,var(--dm-body-bg) 84%,transparent)}
@layer dm-important{
  html[data-audience] body.dm-app{background:var(--dm-body-bg)!important}
  html[data-audience] body.dm-app .dm-topbar{background:var(--dm-topbar-bg)!important}
  html[data-audience] body.dm-app .public-footer,html[data-audience] body.dm-app>footer{background:transparent!important;color:var(--dm-muted)!important}
  html[data-audience] body.dm-app .button.primary:hover,html[data-audience] body.dm-app .header-actions .header-room:hover{background:var(--dm-primary)!important;color:var(--dm-on-primary)!important}
  html[data-audience] body.dm-app>header.dm-topbar a{color:var(--dm-ink)!important}
}

/* ---------- Music sheet and mini player ---------- */
dialog.dm-music-sheet{width:min(620px,calc(100vw - 32px))}
dialog.dm-music-sheet .ambience-dialog-heading{display:flex;align-items:center;gap:10px}
dialog.dm-music-sheet #ambience-title{margin:0;font:var(--dm-display-weight) 1.7rem/1.1 var(--dm-display);color:var(--dm-ink)}
dialog.dm-music-sheet .ambience-dialog-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--dm-soft);color:var(--dm-primary)}
dialog.dm-music-sheet .ambience-dialog-icon svg{width:20px;height:20px}
dialog.dm-music-sheet p{font-size:.9rem;line-height:1.5}
.dm-music{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
.dm-np{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:var(--dm-radius-md);background:linear-gradient(135deg,var(--dm-primary),color-mix(in srgb,var(--dm-primary) 60%,var(--dm-pop)));color:var(--dm-on-primary)}
.dm-np-art{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--dm-on-primary) 18%,transparent)}
.dm-np-art svg{width:22px;height:22px}
.dm-np-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.dm-np-copy strong{font:700 1.02rem/1.2 var(--dm-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-np-copy small{font-size:.8rem;opacity:.85}
.dm-np-play{display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;background:var(--dm-on-primary);color:var(--dm-primary);cursor:pointer}
.dm-music-room{margin:0;color:var(--dm-muted)}
.dm-music-invite{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:10px 12px;border-radius:var(--dm-radius-md);background:color-mix(in srgb,var(--dm-pop) 18%,var(--dm-surface));color:var(--dm-ink)!important}
.dm-music-heading{margin:10px 0 0;font:700 .95rem/1.2 var(--dm-body);color:var(--dm-ink)}
.dm-music-note{margin:0;font-size:.82rem!important;color:var(--dm-muted)}
.dm-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dm-track{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:58px;padding:10px 12px;border-radius:var(--dm-radius-sm);border:var(--dm-border) solid var(--dm-line);background:var(--dm-page);color:var(--dm-ink);text-align:left;cursor:pointer}
.dm-track:hover{border-color:color-mix(in srgb,var(--dm-primary) 40%,var(--dm-line))}
.dm-track[aria-pressed="true"]{border-color:var(--dm-primary);background:color-mix(in srgb,var(--dm-primary) 10%,var(--dm-surface))}
.dm-track-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.dm-track strong{font:650 .9rem/1.2 var(--dm-body)}
.dm-track small{font-size:.75rem;line-height:1.25;color:var(--dm-muted)}
.dm-my-actions{display:flex;gap:8px}
.dm-my-actions .dm-btn svg{width:16px;height:16px}
.dm-songs{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.dm-songs:empty{display:none}
.dm-songs li{display:flex;align-items:center;gap:6px}
.dm-song-play{flex:1;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;border-radius:var(--dm-radius-sm);border:var(--dm-border) solid var(--dm-line);background:var(--dm-page);color:var(--dm-ink);font:600 .88rem/1.2 var(--dm-body);text-align:left;cursor:pointer;min-width:0}
.dm-song-play span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-song-play[aria-pressed="true"]{border-color:var(--dm-primary);background:color-mix(in srgb,var(--dm-primary) 10%,var(--dm-surface))}
.dm-song-remove{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--dm-muted);cursor:pointer}
.dm-song-remove svg{width:16px;height:16px}
.dm-eq{display:inline-flex;align-items:flex-end;gap:2px;width:14px;height:14px;flex:none;opacity:0}
.dm-eq i{display:block;width:3px;height:40%;border-radius:2px;background:currentColor}
.playing .dm-eq,.dm-miniplayer.on .dm-eq{opacity:1}
@media (prefers-reduced-motion:no-preference){.playing .dm-eq i,.dm-miniplayer.on .dm-eq i{animation:dm-eq .9s ease-in-out infinite}.playing .dm-eq i:nth-child(2),.dm-miniplayer.on .dm-eq i:nth-child(2){animation-delay:-.3s}.playing .dm-eq i:nth-child(3),.dm-miniplayer.on .dm-eq i:nth-child(3){animation-delay:-.6s}}
@keyframes dm-eq{0%,100%{height:30%}50%{height:100%}}
.dm-miniplayer{position:fixed;right:20px;bottom:20px;z-index:65;display:flex;align-items:center;gap:8px;width:min(340px,calc(100vw - 24px));padding:8px 8px 8px 14px;border-radius:999px;background:var(--dm-ink);color:var(--dm-page);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);box-sizing:border-box}
.dm-miniplayer .dm-eq{color:var(--dm-accent)}
.dm-mini-open{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.dm-mini-open strong{max-width:100%;font:700 .88rem/1.2 var(--dm-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-mini-open small{max-width:100%;font-size:.72rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-mini-play,.dm-mini-next{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:color-mix(in srgb,var(--dm-page) 14%,transparent);color:inherit;cursor:pointer}
.dm-mini-play{background:var(--dm-accent);color:var(--dm-on-accent)}
@media (max-width:699px){.dm-miniplayer{left:12px;right:12px;width:auto;bottom:calc(86px + env(safe-area-inset-bottom))}body.dm-playing .dm-miniplayer{bottom:calc(12px + env(safe-area-inset-bottom))}.dm-tracks{grid-template-columns:1fr}}
body.dm-moment-open .dm-miniplayer{display:none}

/* Touch targets: footer and inline text links meet a 44px minimum on touch screens. */
@media (pointer: coarse) {
  footer nav a, a.dm-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
}