/* Consumers opt in to this variable; the grass homepage is not styled here. */
:root { --yuan-wallpaper:url('/assets/wallpapers/cozy-evening.jpg'); }
@media (max-width:650px) {
  :root { --yuan-wallpaper:url('/assets/wallpapers/cozy-evening-mobile.jpg'); }
}

.yuan-wallpaper-dialog {
  width:min(500px,calc(100% - 32px)); max-width:calc(100% - 32px);
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  box-sizing:border-box; margin:auto; padding:0; inset:0;
  border:1px solid #ffffff24; border-radius:24px; overflow:auto;
  background:#303030e8; color:#fafafa; color-scheme:dark; text-align:left;
  box-shadow:0 28px 90px #0009,0 1px 0 #ffffff0c inset;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.6; letter-spacing:normal; overscroll-behavior:contain;
}
.yuan-wallpaper-dialog::backdrop { background:#101010b8; -webkit-backdrop-filter:none; backdrop-filter:none; }
.yuan-wallpaper-dialog * { box-sizing:border-box; }
.yuan-wallpaper-dialog [hidden] { display:none!important; }
.yuan-wallpaper-content { padding:24px; }
.yuan-wallpaper-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin:0 0 22px; }
.yuan-wallpaper-heading > div { min-width:0; }
.yuan-wallpaper-dialog p { margin:0; }
.yuan-wallpaper-dialog .yuan-wallpaper-eyebrow { margin:0 0 6px; color:#eeeeee; font-size:11px; letter-spacing:.12em; }
.yuan-wallpaper-dialog h2 { margin:0; color:#fafafa; font-size:24px; line-height:1.4; font-weight:600; letter-spacing:-.025em; }
.yuan-wallpaper-dialog button {
  appearance:none; min-width:44px; min-height:44px; margin:0; padding:10px 16px;
  border:1px solid #ffffff29; border-radius:12px; background:#ffffff07;
  color:#f4f4f4; font:inherit; font-size:13px; line-height:1.5; letter-spacing:normal;
  text-align:center; cursor:pointer; touch-action:manipulation;
}
.yuan-wallpaper-dialog button:focus-visible { outline:2px solid #ffffff; outline-offset:3px; }
.yuan-wallpaper-dialog .yuan-wallpaper-close { display:grid; place-items:center; flex:0 0 44px; width:44px; padding:0; border-color:transparent; background:transparent; color:#d5d5d5; }
.yuan-wallpaper-preview {
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:15px;
  border:1px solid #ffffff26; background-color:#353535;
  background-image:var(--yuan-wallpaper); background-position:center; background-size:cover;
}
.yuan-wallpaper-preview::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#111111ba); pointer-events:none; }
.yuan-wallpaper-preview span { position:absolute; left:14px; bottom:12px; z-index:1; color:#fafafa; font-size:12px; text-shadow:0 1px 5px #000b; }
.yuan-wallpaper-details { margin:18px 0 20px; }
.yuan-wallpaper-dialog .yuan-wallpaper-local { display:flex; flex-wrap:wrap; gap:3px 10px; margin:0 0 7px; color:#e9e9e9; font-size:13px; }
.yuan-wallpaper-local span { color:#c7c7c7; font-size:12px; }
.yuan-wallpaper-dialog #yuan-wallpaper-constraints { color:#c7c7c7; font-size:12px; line-height:1.85; overflow-wrap:anywhere; }
.yuan-wallpaper-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; }
.yuan-wallpaper-dialog .yuan-wallpaper-choose { background:#ebebeb; border-color:#ebebeb; color:#272727; font-weight:600; }
.yuan-wallpaper-dialog .yuan-wallpaper-status { min-height:42px; margin:13px 0 0; color:#c9c9c9; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.yuan-wallpaper-status[data-kind="error"] { color:#f3c1a5; }
.yuan-wallpaper-status[data-kind="success"] { color:#e0e0e0; }
@media (hover:hover) {
  .yuan-wallpaper-dialog button:hover { background:#ffffff12; border-color:#ffffff4a; }
  .yuan-wallpaper-dialog .yuan-wallpaper-choose:hover { background:#fff; border-color:#fff; }
}
@media (max-width:380px) {
  .yuan-wallpaper-dialog { border-radius:20px; }
  .yuan-wallpaper-content { padding:18px; }
  .yuan-wallpaper-heading { margin-bottom:17px; }
  .yuan-wallpaper-dialog h2 { font-size:20px; }
  .yuan-wallpaper-actions { gap:8px; }
  .yuan-wallpaper-dialog button { padding-inline:10px; }
}