/* Global glass controls; surfaces inherit these and may override them locally. */
:root{
  --glass-color:213 156 130;
  --glass-opacity:1;
  --glass-refraction:1.5;
  --glass-edge-refraction:1;
  --glass-edge-width:12;
  --glass-dispersion:1;
  --glass-transmission:.18;
  --glass-edge-transmission:.4;
  --glass-relief:1;
  --glass-tint:rgb(var(--glass-color) / calc(.5 * var(--glass-opacity)));
  --glass-wash:rgb(var(--glass-color) / calc(.8 * var(--glass-opacity)));
  --menu-wash:rgb(var(--glass-color) / calc(.9 * var(--glass-opacity)));
  --glass-rim:rgba(255,230,222,.85);
  --glass-ink:#2d1b1c;
  --glass-shade:rgba(69,35,37,.24);
  --glass-fallback:#eac6b6;
  --glass-fallback-ink:#2d1b1c;
  --lens-opacity:.85;
}

html[data-theme=dark]{--glass-fallback:#55413e;--glass-fallback-ink:#f2dfd8}
.liquid-glass{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--glass-rim);background:var(--glass-tint);-webkit-backdrop-filter:blur(7px) saturate(135%);backdrop-filter:blur(7px) saturate(135%);box-shadow:inset 0 1px 1px #fff8,inset 1px 0 1px #fff3,inset 0 -1px 2px var(--glass-shade),0 8px 28px var(--glass-shade);color:var(--glass-ink);transition:translate .48s cubic-bezier(.2,1.2,.3,1),opacity .32s ease,box-shadow .25s ease;translate:0 0;font:12px Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.glass-lens{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;z-index:-2;opacity:calc(var(--lens-opacity) * var(--glass-opacity));pointer-events:none}
.liquid-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(145deg,rgba(255,242,239,.25),transparent 36%,rgba(132,76,72,.08) 70%,rgba(255,226,221,.16)),var(--glass-wash);box-shadow:inset 0 2px 4px #fff4,inset 0 -2px 5px #45252a14}
.liquid-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;border:1px solid transparent;border-top-color:#fff9;border-left-color:#fff4;border-bottom-color:#f3d3a650;background:radial-gradient(ellipse at var(--glint-x,25%) var(--glint-y,0%),#fff3,transparent 65%);opacity:.65}
.liquid-glass:is(a,button){border-color:#b7827880;-webkit-backdrop-filter:blur(2px) saturate(115%);backdrop-filter:blur(2px) saturate(115%);box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 2px #572e3040,0 3px 9px #40282b24;--lens-opacity:1}
.liquid-glass:is(a,button)::before{background:radial-gradient(ellipse at 30% 5%,#fff3,transparent 55%),var(--glass-wash);box-shadow:inset 0 1px 3px #fff4,inset 0 -3px 5px #572e3018}
.liquid-glass:is(a,button)::after{border-top-color:#fff9;border-left-color:#fff4;border-right-color:#70434822;border-bottom-color:#70434844;background:radial-gradient(ellipse 30px 12px at var(--glint-x,30%) var(--glint-y,10%),#fff4,transparent 100%);opacity:.5}
@media(hover:hover) and (pointer:fine){.liquid-glass:is(a,button):not(:disabled):hover::after{background:radial-gradient(ellipse 30px 12px at var(--glint-x,30%) var(--glint-y,10%),#fff6,transparent 100%);opacity:.65}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.liquid-glass{background:var(--glass-fallback);color:var(--glass-fallback-ink)}}
@media(prefers-reduced-transparency:reduce){.liquid-glass{background:var(--glass-fallback);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--glass-fallback-ink);--glass-ink:var(--glass-fallback-ink)}.glass-lens,.liquid-glass::before,.liquid-glass::after{display:none}}
@media(forced-colors:active){.liquid-glass{background:Canvas;color:CanvasText;border:1px solid ButtonText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;--glass-ink:CanvasText}.glass-lens,.liquid-glass::before,.liquid-glass::after{display:none}}
@media(prefers-reduced-transparency:reduce){.liquid-glass:is(a,button){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-fallback)}}
@media(forced-colors:active){.liquid-glass:is(a,button){border-color:ButtonText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:Canvas}}
.liquid-glass.glass-elastic{--glass-material-filter:drop-shadow(0 6px 12px var(--glass-shade));overflow:visible;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:var(--glass-material-filter)}
.liquid-glass.glass-elastic[data-glass-paused=true]{background:#b78772;color:var(--glass-ink);border-color:transparent;box-shadow:inset 0 1px 1px #ffe6de55,inset 0 -1px 2px var(--glass-shade)}
.liquid-glass.glass-elastic::before,.liquid-glass.glass-elastic::after{display:none}
.liquid-glass.glass-elastic>.glass-lens{inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);border-radius:0;opacity:var(--glass-opacity)}
.liquid-glass.glass-elastic:is(a,button):not(:disabled):is(:hover,:active){scale:1}
.liquid-glass.glass-flat{--glass-relief:0;--glass-shade:rgba(65,40,32,.12)}
@media(prefers-reduced-transparency:reduce),(forced-colors:active){.liquid-glass.glass-elastic{--glass-material-filter:blur(0);overflow:hidden;background:var(--glass-fallback);border-color:var(--glass-rim);filter:none}}
@media(forced-colors:active){.liquid-glass.glass-elastic{background:Canvas;border-color:ButtonText}}

.glass-magnetic{transform:var(--glass-base-transform,translate(0,0)) translate(var(--glass-magnet-x,0px),var(--glass-magnet-y,0px))}

/* Shared feedback for reader, timed-viewer and media-preview controls. */
.liquid-glass:is(a,button){transition:translate .48s cubic-bezier(.2,1.2,.3,1),opacity .32s ease,filter .15s ease}
@media(hover:hover) and (pointer:fine){.liquid-glass:is(a,button):not(:disabled):hover::after{background:radial-gradient(ellipse 45px 28px at var(--glint-x,50%) var(--glint-y,20%),#fff5,transparent 100%);opacity:.75}}
@media(prefers-reduced-motion:reduce){.liquid-glass:is(a,button){transition:none}}

@media(hover:hover) and (pointer:fine){.liquid-glass.glass-elastic:is(a,button):not(:disabled):hover{filter:var(--glass-material-filter) brightness(1.05)}}
.liquid-glass.glass-elastic:is(a,button):not(:disabled):active{filter:var(--glass-material-filter) brightness(.94)}

/* Reader and media menus share one entrance and setupReaderMenu exit contract. */
:is(.reader-chrome.reader-popup,.media-popup.liquid-glass){opacity:0;scale:.82 .62;translate:var(--popup-x,-50%) var(--popup-shift,-18px);filter:var(--glass-material-filter,blur(0px)) blur(5px);border-radius:34px;transition:opacity .2s ease,scale .48s cubic-bezier(.2,1.45,.35,1),translate .48s cubic-bezier(.2,1.45,.35,1),filter .24s ease,border-radius .48s ease}
:is(.reader-chrome.reader-popup,.media-popup.liquid-glass):popover-open{opacity:1;scale:1;translate:var(--popup-x,-50%) 0;filter:var(--glass-material-filter,blur(0px)) blur(0);border-radius:24px}
@starting-style{:is(.reader-chrome.reader-popup,.media-popup.liquid-glass):popover-open{opacity:0;scale:.82 .62;translate:var(--popup-x,-50%) var(--popup-shift,-18px);filter:var(--glass-material-filter,blur(0px)) blur(5px);border-radius:34px}}
@media(prefers-reduced-motion:reduce){:is(.reader-chrome.reader-popup,.media-popup.liquid-glass){transition:none}}
