body.has-daily-background { background-image: linear-gradient(rgba(246,245,239,.8),rgba(246,245,239,.91)), var(--daily-background); background-position:center; background-size:cover; background-attachment:fixed; }
.bing-hero { padding: clamp(4rem,9vw,7.5rem) 0 clamp(2.8rem,5vw,4.6rem); }
.bing-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(19rem,.9fr); align-items:center; gap:clamp(2.4rem,8vw,7.5rem); }
.bing-copy { max-width:40rem; }.bing-hero h1 { max-width:9ch; }.bing-hero .intro { max-width:34rem; }
.hero-notes { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }.hero-notes span { padding:7px 10px; border:1px solid var(--line); border-radius:99px; color:var(--green-dark); background:rgba(255,255,255,.5); font-size:.76rem; font-weight:850; }
.today-photo { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:7px solid rgba(255,255,252,.72); border-radius:28px; background:#e9e7e1; box-shadow:var(--shadow); cursor:copy; transition:transform .3s var(--ease),box-shadow .3s var(--ease); }.today-photo:hover { transform:translateY(-5px) rotate(.35deg); box-shadow:0 29px 65px rgba(22,51,42,.19); }.today-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:opacity .25s,transform .5s var(--ease); }.today-photo img.loading { opacity:.35; }.today-photo:hover img { transform:scale(1.045); }
.photo-label,.photo-tip { position:absolute; color:#fff; background:rgba(9,40,31,.7); backdrop-filter:blur(10px); font-size:.72rem; font-weight:850; }.photo-label { top:12px; left:12px; padding:7px 9px; border-radius:8px; letter-spacing:.11em; }.photo-tip { right:12px; bottom:12px; padding:8px 11px; border-radius:99px; letter-spacing:0; }
.quick-pick,.archive { border:1px solid rgba(255,255,255,.67); border-radius:var(--radius); background:rgba(255,255,252,.59); box-shadow:var(--shadow-sm); backdrop-filter:blur(15px); }.quick-pick { margin-bottom:20px; padding:clamp(22px,4vw,34px); }.section-head,.archive-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }.section-head h2,.section-head p,.archive h2,.archive p { margin:0; }.section-head h2 { font-size:clamp(1.7rem,3vw,2.25rem); }.section-copy { max-width:40rem; margin:11px 0 0; color:var(--muted); line-height:1.75; }
.random-result { display:grid; grid-template-columns:12rem minmax(0,1fr) auto; gap:20px; align-items:center; margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }.random-result img { width:12rem; aspect-ratio:16/10; object-fit:cover; border-radius:15px; background:#e9e7e1; box-shadow:0 8px 18px rgba(22,51,42,.1); transition:opacity .2s,filter .2s; }.random-result img.loading { opacity:.48; filter:saturate(.55); animation:random-pulse .8s ease-in-out infinite alternate; }.result-meta { display:flex; flex-direction:column; gap:7px; }.result-meta span { color:var(--green); font-family:ui-monospace,monospace; font-size:.7rem; font-weight:900; letter-spacing:.1em; }.result-meta strong { line-height:1.45; font-size:clamp(1rem,2vw,1.25rem); }.notice { min-height:1.2rem; margin:13px 0 0!important; color:var(--muted); font-size:.87rem; }
.archive { margin-bottom:5rem; padding:clamp(22px,4vw,34px); }.archive-head { align-items:end; margin-bottom:22px; }.archive h2 { font-size:clamp(1.7rem,3vw,2.35rem); }.archive-head>p { color:var(--muted); font-size:.84rem; line-height:1.6; }.masonry { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:14px; }.archive-card { position:relative; display:block; width:100%; margin:0; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.75); border-radius:16px; background:#e9e7e1; box-shadow:0 8px 20px rgba(19,34,30,.08); cursor:copy; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }.archive-card img { display:block; width:100%; min-height:10rem; object-fit:cover; transition:transform .35s var(--ease); }.archive-card:hover { transform:translateY(-5px); box-shadow:0 17px 31px rgba(19,34,30,.15); }.archive-card:hover img { transform:scale(1.055); }.archive-card span { position:absolute; right:9px; bottom:9px; padding:5px 8px; border-radius:8px; color:#fff; background:rgba(9,40,31,.72); backdrop-filter:blur(8px); font-size:.75rem; }
button.button { font:inherit; cursor:pointer; }.button:disabled { cursor:wait; opacity:.72; }.button.is-loading::before { content:''; width:.78rem; height:.78rem; margin-right:.45rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .65s linear infinite; }.copy-button { white-space:nowrap; }.copy-button:disabled { cursor:not-allowed; opacity:.45; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes random-pulse { to { opacity:.7; filter:saturate(.8); } }
.toast { position:fixed; z-index:30; left:50%; bottom:24px; transform:translate(-50%,1rem); padding:11px 15px; border:1px solid rgba(255,255,255,.15); border-radius:99px; color:#fff; background:rgba(9,40,31,.91); box-shadow:0 12px 32px rgba(0,0,0,.2); font-size:.88rem; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }.toast.show { transform:translate(-50%,0); opacity:1; }
@media(max-width:760px) { body.has-daily-background { background-attachment:scroll; }.bing-hero-grid { grid-template-columns:1fr; }.today-photo { max-width:36rem; border-width:5px; }.section-head,.archive-head { align-items:flex-start; flex-direction:column; }.random-result { grid-template-columns:1fr; gap:14px; }.random-result img { width:100%; max-width:32rem; }.archive { padding:18px; }.masonry { grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:10px; } }