/* The paper stays cream outdoors; the reader becomes warm charcoal at dusk. */
/* A clear lens with a bevel: colour stays on its edges, not across the icon. */
.beach-light{position:fixed;top:calc(24px + env(safe-area-inset-top,0px));right:calc(24px + env(safe-area-inset-right,0px));z-index:12;width:56px;height:56px;padding:0;display:grid;place-items:center;isolation:isolate;color:#fff;background:radial-gradient(ellipse at 27% 12%,#ffffff57,transparent 58%),linear-gradient(145deg,#ffffff1f,#ffffff05 48%,#ffffff26);border:1px solid #ffffff18;border-radius:50%;box-shadow:inset 0 1px 2px #ffffff66,inset 1px 0 3px #d3f5ff33,inset -1px -2px 3px #ffd4f033,0 2px 3px #5c4c3c12,0 6px 18px #44372a1a;-webkit-backdrop-filter:blur(9px) saturate(1.65) brightness(1.06);backdrop-filter:blur(9px) saturate(1.65) brightness(1.06);transition:background-color .35s,box-shadow .35s,transform .4s cubic-bezier(.22,1,.36,1)}
.beach-light::before{opacity:.20;content:"";position:absolute;inset:1px;padding:1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from -42deg,#fff9eaf2 0deg,#ffffffeb 38deg,#88deffcc 80deg,#d4f4ff40 120deg,#b5b1f699 158deg,#f6aee7d9 200deg,#ffc4a4b3 245deg,#fff0b6cc 290deg,#fff9eaf2 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.beach-light::after{content:"";position:absolute;inset:4px;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 28% 5%,#ffffff70,transparent 43%),radial-gradient(ellipse at 100% 65%,#c0dcff35,transparent 53%),radial-gradient(ellipse at 72% 105%,#ffd5ec42,transparent 50%);box-shadow:inset 0 1px 2px #ffffff40,inset 1px 0 3px #fff4d326,inset -1px -1px 2px #ffffff26;opacity:.85;transition:opacity .35s}
.beach-light svg{z-index:1;filter:drop-shadow(0 1px .6px #69584a26)}
.beach-light:hover{background-color:#ffffff12;box-shadow:inset 0 1px 2px #ffffff80,inset 1px 0 3px #d3f5ff55,inset -1px -2px 3px #ffd4f055,0 3px 5px #5c4c3c14,0 8px 20px #44372a21;transform:translateY(-1px)}
.beach-light:hover::after{opacity:1}
.beach-light:active{transform:scale(.95)}
.beach-light:focus-visible{outline:1px solid #ffffff80;outline-offset:2px}
.beach-light svg{position:absolute;inset:17px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transition:opacity .4s,transform .6s}
.beach-light .light-sun{opacity:0;transform:rotate(-50deg) scale(.7)}
[data-beach-light=dusk] .beach-light .light-sun{opacity:1;transform:none}
[data-beach-light=dusk] .beach-light .light-moon{opacity:0;transform:rotate(50deg) scale(.7)}
.finds,.beach-title,.shell,.pebble,#sand-drawing,.shore-fallback{transition:filter .9s}
.shore-credit,.toy-actions{transition:color .9s}
[data-beach-light=dusk]{color-scheme:dark}
[data-beach-light=dusk] body{background:#51434d}
[data-beach-light=dusk] .finds{filter:brightness(.78) saturate(.82)}
[data-beach-light=dusk] .beach-title{filter:brightness(.85) saturate(.5)}
[data-beach-light=dusk] .shell,[data-beach-light=dusk] .pebble{filter:brightness(.65) saturate(.55) drop-shadow(-4px 6px 3px #14182566)}
[data-beach-light=dusk] #sand-drawing{filter:brightness(.7) saturate(.4)}
[data-beach-light=dusk] .shore-fallback{filter:brightness(.45) saturate(.45) hue-rotate(325deg)}
[data-beach-light=dusk] .shore-credit,[data-beach-light=dusk] .toy-actions{color:#e7d6c8}
[data-beach-light=dusk] .shore-credit{opacity:.85}
[data-beach-light=dusk] .beach-light{color:#fff;background:linear-gradient(145deg,#ffffff24,#302b351a 48%,#ffffff0d);border-color:#ffffff18}
[data-beach-light=dusk] .beach-light:hover{background-color:#ffffff14}
[data-beach-light=dusk] .beach-light:focus-visible{outline-color:#ffffff80}
[data-beach-light=dusk] .sand-tools button:focus-visible{outline-color:#f4d4a6}
[data-beach-light=dusk] .toy-tray .sand-toy[aria-pressed=true]::after{background:#f4d4a6}
[data-beach-light=dusk] .toy-tray .sand-toy span,[data-beach-light=dusk] .toy-tray .toy-hint{background:#302b35;color:#f0e2cd}
[data-beach-light=dusk] #inspect.is-reading{--reader-paper:#2c292b;box-shadow:1px 0 0 #8a7870,2px 1px 0 #51474a,5px 16px 35px #13131b66;scrollbar-color:#b8a59b66 transparent}
[data-beach-light=dusk] #inspect.is-reading .recap-reader,[data-beach-light=dusk] #inspect.is-reading .recap-navigation{color:#eee2cf;background-color:var(--reader-paper);background-image:linear-gradient(90deg,#0002,transparent 3% 97%,#0003);box-shadow:inset 1px 0 0 #e8d6bb22,inset -1px 0 0 #e8d6bb18}
[data-beach-light=dusk] #inspect.is-reading .recap-reader::before,[data-beach-light=dusk] #inspect.is-reading .recap-navigation::before{opacity:.12;mix-blend-mode:screen}
[data-beach-light=dusk] .reader-heading h3,[data-beach-light=dusk] .reader-speaker,[data-beach-light=dusk] .reader-body h4{color:#f3e6d3}
[data-beach-light=dusk] .reader-intro,[data-beach-light=dusk] .reader-body p{color:#d9cec0}
[data-beach-light=dusk] .reader-heading .small-label,[data-beach-light=dusk] .reader-role,[data-beach-light=dusk] .reader-colophon{color:#bcae9f}
[data-beach-light=dusk] .reader-heading,[data-beach-light=dusk] .reader-colophon{border-color:#d8c8b52b}
[data-beach-light=dusk] .reader-authorship{color:#e4c5ad;background:#473735;border-left-color:#cc977c}
[data-beach-light=dusk] #inspect.is-reading .recap-navigation button:hover{background:#e9d5b91a}
[data-beach-light=dusk] .postcard-collection{background:#302b30}
[data-beach-light=dusk] .collection-card{color:#30485a;filter:brightness(.86)}
[data-beach-light=dusk] .mention-card{background:#343034;color:#eee2cf;border-color:#bda99555}
[data-beach-light=dusk] .mention-card>p{color:#c9bbad}
[data-beach-light=dusk] .reader-figure figcaption{color:#c9bbad}
[data-beach-light=dusk] .small-dialog{background:#2c292b;color:#eee2cf}
[data-beach-light=dusk] .small-dialog small{color:#c9bbad}
[data-beach-light=dusk] #inspect::backdrop,[data-beach-light=dusk] #album-dialog::backdrop,[data-beach-light=dusk] dialog::backdrop{background:#14152380}
@media(max-width:380px){.sand-tools.toy-tray{padding:0 3px;max-width:calc(100vw - 16px)}}
@media(prefers-reduced-motion:reduce){.beach-light,.beach-light svg,.finds,.beach-title,.shell,.pebble,#sand-drawing,.shore-fallback,.shore-credit,.toy-actions{transition:none}}

@media(max-width:700px){.beach-light{top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px))}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.beach-light{background-color:#ede5d2d9}[data-beach-light=dusk] .beach-light{background-color:#433b45d9}}
@media(prefers-reduced-transparency:reduce){.beach-light{background:#eee5d5;-webkit-backdrop-filter:none;backdrop-filter:none}[data-beach-light=dusk] .beach-light{background:#433b45}}

/* A light, clear pane rather than a shaded lens or concentric bevel. */
.beach-light,
[data-beach-light=dusk] .beach-light{
  background:linear-gradient(145deg,#ffffff16,#ffffff04 65%);
  border-color:#ffffff16;
  box-shadow:inset 0 1px 0 #ffffff26;
  -webkit-backdrop-filter:blur(3px) saturate(1.08);
  backdrop-filter:blur(3px) saturate(1.08);
}
.beach-light::before{opacity:.12;padding:.75px;inset:0}
.beach-light::after{content:none}
.beach-light:hover,
[data-beach-light=dusk] .beach-light:hover{
  background-color:#ffffff08;
  box-shadow:inset 0 1px 0 #ffffff40;
}