.wallpaper-shell{--accent:#527386;--accent-light:#e4eff6;--paper:#f9f6f4;--card:#fffdfa;--line:#e5e1de;--ink:#3c4653;--muted:#5c6877}
body:has(.wallpaper-shell){background:#f9f6f4}
.wallpaper-shell .preview-panel{background:linear-gradient(145deg,#e4edf6,#f6e4e8);padding:24px}
.wallpaper-shell .preview-wrap{width:min(100%,250px);border-color:#485667}
.wallpaper-shell .preview-wrap.desktop{width:100%}
.preview-heading{display:flex;justify-content:space-between;gap:10px;font-size:.875rem;font-weight:650;margin-bottom:18px;color:#516577}
#size-label{font-weight:400;font-variant-numeric:tabular-nums}
.wallpaper-backgrounds{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wallpaper-backgrounds .swatch{height:auto;display:flex;flex-direction:column;border-radius:14px;background:white;padding:4px}
.wallpaper-backgrounds .swatch img{height:100px;border-radius:10px;object-fit:cover}
.wallpaper-backgrounds .swatch span{padding:8px 1px;font-size:.875rem;font-weight:650;line-height:1.2}
.wallpaper-backgrounds .swatch:after{border-radius:14px}
.simple-colors{margin-top:15px}.simple-colors summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:.875rem;color:var(--muted)}
.simple-colors .backgrounds{grid-template-columns:repeat(4,minmax(0,1fr))}
.cat-tools{margin-top:4px;padding-top:4px;align-items:flex-start}.cat-tools p{font-size:.875rem;margin:0;line-height:1.6}.cat-tools button{flex-shrink:0}.cat-tools h3{font-size:14px;margin:0}
.decoration-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.decoration-pick{min-width:0;min-height:86px;padding:10px 5px;line-height:1.5;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.875rem;background:#f7f4ef}
.decoration-pick img{width:42px;height:42px}
.sticker-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.sticker-list button{padding:6px 9px;font-size:.875rem;display:flex;align-items:center;gap:5px}
.sticker-list img{width:25px;height:25px}
.sticker-actions{margin:14px 0 0}.sticker-actions button{font-size:.875rem}
#sticker-editor{min-width:0;border:1px dashed #b4c8d5;border-radius:14px;margin:16px 0 0;padding:12px}
#sticker-editor legend{font-size:.875rem;padding:0 5px}
#sticker-editor .button-row button{font-size:.875rem}
.selection{position:absolute;pointer-events:none;border:2px dashed #fff;border-radius:8px;box-shadow:0 0 0 1px #52758e;transform-origin:center}
.editing-note{font-size:.875rem;margin:12px 0 0;color:#53657a}
.wallpaper-shell .guide.light-art{color:#3d536b;text-shadow:0 1px 6px #fff8}
.wallpaper-shell .field input[type=range]{min-height:44px}
@media(max-width:720px){.wallpaper-shell .preview-panel{padding:18px}.wallpaper-shell .preview-wrap{width:min(100%,205px)}.wallpaper-shell .preview-wrap.desktop{width:100%}.preview-heading{margin-bottom:12px}.wallpaper-backgrounds{gap:8px}.wallpaper-backgrounds .swatch img{height:90px}.decoration-picker{gap:6px}.decoration-pick img{width:36px;height:36px}.wallpaper-shell .clock{font-size:46px}.wallpaper-shell .topbar{flex-wrap:wrap}.wallpaper-shell .topbar nav{gap:14px}}
@media(max-width:350px){.wallpaper-backgrounds .swatch img{height:78px}.wallpaper-backgrounds .swatch span{font-size:.875rem}.decoration-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.decoration-pick img{width:30px;height:30px}}

.seasonal-options{margin-top:18px;padding:14px;border:1px solid #eec68b;border-radius:16px;background:linear-gradient(145deg,#fff5db,#f6ecff)}
.seasonal-options h3{margin:0 0 10px;font-size:1rem;color:#613b73}
.seasonal-options .hint{font-size:.875rem;color:#675467}
#season-backgrounds{grid-template-columns:repeat(2,minmax(0,1fr))}
#season-backgrounds .swatch span{font-size:.875rem;line-height:1.4}
#season-decorations{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#season-decorations .decoration-pick{min-height:80px;background:#fff9f0;font-size:.875rem;line-height:1.3;overflow:hidden}
.decoration-art{position:relative;display:inline-block;flex:none;width:42px;height:42px;overflow:hidden}
.decoration-frame{position:absolute;overflow:hidden}
.decoration-art img{position:absolute;max-width:none;border:0}
.sticker-list .decoration-art{width:25px;height:25px}
@media(max-width:720px){.decoration-art{width:36px;height:36px}.sticker-list .decoration-art{width:25px;height:25px}}

.wallpaper-shell { font-size:1rem; line-height:1.6; }
.wallpaper-shell :is(h1,h2,h3,p,button,a,span) { overflow-wrap:anywhere; }
.wallpaper-shell .lede { font-size:1rem; }
.wallpaper-shell :is(.hint,.preview-caption,.guide-controls button,.pick,.field,.tag,#status) { font-size:.875rem; line-height:1.6; }
 .wallpaper-shell .eyebrow,.wallpaper-shell .pick small { font-size:.75rem; }
 .wallpaper-shell .eyebrow .tag { display:inline-block; max-width:100%; vertical-align:middle; }
.wallpaper-shell .topbar a { font-size:.875rem; }
.wallpaper-shell .pick { justify-content:flex-start; border-width:2px; }
.wallpaper-shell .pick[aria-pressed=true] { border-color:var(--accent); background:#e4eff6; }
.wallpaper-shell .picker { max-height:360px; overscroll-behavior:contain; scrollbar-gutter:stable; }
.wallpaper-shell .field input[type=range] { min-height:44px; }
.wallpaper-shell .cat-adjustments { margin-top:16px; border-top:1px solid var(--line); padding-top:8px; }
.wallpaper-shell .cat-adjustments summary { min-height:44px; cursor:pointer; font-size:.875rem; font-weight:700; padding-block:10px; }
.wallpaper-shell summary:focus-visible { outline:3px solid #b98537; outline-offset:3px; }
.wallpaper-shell .split { flex-wrap:wrap; }
.wallpaper-shell .split h2 { margin-bottom:0; }
.wallpaper-shell #sticker-editor { padding:14px; }
.wallpaper-shell .decoration-pick img { object-fit:contain; }
.wallpaper-shell .button-row .action { flex:1; min-width:110px; text-align:center; }
.wallpaper-shell #open { color:var(--accent); background:var(--accent-light); }
.wallpaper-shell .swatch span { overflow-wrap:anywhere; }
.wallpaper-shell footer { font-size:.875rem; }
.wallpaper-shell .format-summary { display:grid; gap:2px; padding:14px; margin-top:14px; background:var(--accent-light); border:1px solid #c5d7e2; border-radius:12px; font-size:.875rem; }
.wallpaper-shell .format-summary strong { font-size:1.25rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.wallpaper-shell .size-help { margin-top:8px; }
.wallpaper-shell .size-help summary { min-height:44px; padding-block:10px; font-size:.875rem; cursor:pointer; }
.wallpaper-shell .size-help p { margin-top:4px; }
.wallpaper-shell .size-help a { display:inline-block; padding-block:8px; text-underline-offset:3px; }
.wallpaper-shell #format { font-size:1rem; }
@media(max-width:760px) {
  .wallpaper-shell { padding:16px 12px calc(24px + env(safe-area-inset-bottom)); }
  .wallpaper-shell .studio { grid-template-columns:minmax(0,1fr); gap:16px; }
  .wallpaper-shell .preview-panel { padding:16px; }
  .wallpaper-shell .panel { padding:16px; }
  .wallpaper-shell .decoration-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wallpaper-shell .preview-wrap { width:min(100%,160px); }
  .wallpaper-shell .topbar { flex-direction:column; gap:4px; margin-bottom:16px; }
  .wallpaper-shell .topbar nav { gap:16px; justify-content:flex-start; }
  .wallpaper-shell .pick img { height:68px; }
  .wallpaper-shell .clock { font-size:38px; }
  .wallpaper-shell .guide-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .wallpaper-shell .guide-controls button { padding:8px 3px; }
}