*{box-sizing:border-box}
:root{color-scheme:light;--ink:#211c24;--muted:#514759;--brown:#582b11;--amber:#a35506;--paper:#fffcf8;--line:#eddfd4}
body{margin:0;min-height:100vh;padding:16px 16px 28px;background:radial-gradient(ellipse at 81% 21%,var(--background-glow,#ffedb5),transparent 48%),linear-gradient(160deg,var(--background-top,#fffaf5),var(--background-middle,#fff4e2) 48%,var(--background-bottom,#f3e5cf) 100%);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
button,select{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #aa5706;outline-offset:3px}
svg{display:block;width:24px;height:24px;flex:none}
.shell{max-width:1110px;margin:auto;padding:0 clamp(16px,4vw,44px) 22px}
.site-header{height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--brown)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:clamp(17px,2.4vw,23px);font-weight:850}
.brand svg{width:34px;height:34px;color:#ed940b}
.site-header nav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:700}
.site-header nav a:hover{text-decoration:underline;text-underline-offset:6px}
.public-backgrounds:not([hidden]){display:flex;align-items:center;margin-inline-start:auto}
.public-backgrounds button{display:grid;place-items:center;width:24px;height:32px;padding:0;border:0;border-radius:6px;background:transparent}
.public-backgrounds button::before{content:"";width:14px;height:14px;border:1px solid #715c5366;border-radius:0;background:var(--swatch-color)}
.public-backgrounds [data-background-preview="warm"]{--swatch-color:#f5dfa3}
.public-backgrounds [data-background-preview="blue"]{--swatch-color:#c6def3}
.public-backgrounds [data-background-preview="green"]{--swatch-color:#c8e1c6}
.public-backgrounds [data-background-preview="pink"]{--swatch-color:#f4c9bb}
.public-backgrounds [data-background-preview="lavender"]{--swatch-color:#dcd0eb}
.public-backgrounds [data-background-preview="slate"]{--swatch-color:#cdd6de}
.public-backgrounds button[aria-pressed=true]::before{border-color:#715c53aa}
.public-backgrounds button:hover::before{border-color:var(--brown)}
.menu{display:none}
.hero{display:grid;grid-template-columns:1.14fr 1fr;align-items:center;min-height:0;position:relative}
.hero h1{margin:0 0 8px;color:var(--brown);font-family:"Songti SC",SimSun,serif;font-size:clamp(28px,4vw,42px);font-weight:900;line-height:1.12;letter-spacing:-.025em}
.hero p{margin:0;color:var(--muted);font-size:clamp(13px,1.6vw,16px);letter-spacing:.7px}
.hero-image{width:100%;height:115px;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 7px #ac6a0f19)}
.search{position:relative;display:flex;align-items:center;gap:11px;margin:0 auto 14px;padding:8px 5px 8px 14px;max-width:850px;border:1px solid #efc9aa;border-radius:40px;background:#fffdfc;box-shadow:0 5px 11px #8f510f11;color:var(--brown)}
.search input{flex:1;min-width:0;padding:6px 3px;border:0;font-size:14px;background:transparent;color:var(--ink)}
.search input::placeholder{color:var(--muted);opacity:1;letter-spacing:.7px}
.search:focus-within{border-color:#aa5706}
.search input:focus-visible{outline:none}
.search input::-webkit-search-cancel-button{display:none}
.search-clear{display:grid;place-items:center;flex:none;width:32px;height:36px;border-radius:18px}
.search-clear:hover{background:#f7ead9}
.search button,.get{border:0;font-weight:750;white-space:nowrap}
.search button{min-width:80px;padding:9px 15px;font-size:14px;border-radius:24px;background:linear-gradient(#ffd777,#ffa817);color:#542800}
.search button:hover,.get:hover{background:linear-gradient(#ffe7a6,#ffc65e)}
.archive,.link-panel{padding:10px 12px 12px;border:1px solid #fff;border-radius:20px;background:#fffbf8;box-shadow:0 5px 18px #7446150c}
.archive-bar{display:flex;align-items:center;gap:8px;padding-bottom:8px}
h2{margin:0;font-size:16px}
.archive-bar h2{display:flex;align-items:center;gap:10px;margin-right:auto}
.archive-title-desktop{display:contents}
.archive-title-mobile{display:none}
.archive-bar h2 svg{color:#db8200}
.archive-hint{display:inline-flex;align-items:center;gap:6px;flex:none;color:var(--muted);font-size:14px;white-space:nowrap}
.archive-hint svg{width:18px;height:18px;color:#db8200}
.archive-bar select{min-width:104px;padding:6px 9px;border:1px solid var(--line);border-radius:10px;background:#fffdfa;font-size:13px;font-weight:650}
.archive-bar select:disabled{opacity:1;color:var(--muted);background:#f7f0e8;cursor:default}
.archive-controls{position:relative;flex:none}
.archive-picker{position:relative}
.archive-picker summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:156px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fffdfa;color:var(--brown);font-size:14px;cursor:pointer;list-style:none}
.archive-picker summary::-webkit-details-marker{display:none}
.archive-picker summary svg{width:18px;height:18px}
.archive-controls:has(.archive-clear) summary svg{margin-left:24px}
.archive-clear{position:absolute;top:6px;right:33px;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--muted)}
.archive-clear svg{width:14px;height:14px;padding:1px;border:1px solid currentColor;border-radius:50%}
.archive-clear:hover{background:#f7ead9;color:var(--brown)}
.archive-picker-form{position:absolute;z-index:3;right:0;top:calc(100% + 6px);display:grid;gap:8px;width:278px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 6px 16px #582b1126}
.archive-picker-form select{min-width:0}
.archive-days:not([hidden]){display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center;font-size:13px}
.archive-days span{padding:4px 0;color:var(--muted)}
.archive-days button{min-height:32px;border:0;border-radius:7px;background:transparent}
.archive-days button:hover,.archive-days button[aria-current="date"]{background:#ffe598;color:#723700}
.archive-picker-form .get{font-size:13px;padding:6px 9px}
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:8px}
@media(min-width:701px){
    .results-space{margin-top:4px}
    .results-space>.results{margin-top:0}
}
.resource{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:15px 8px;border:1px solid #f0e2da;border-radius:11px;background:linear-gradient(120deg,#fffdfc,#fffaf7)}
.resource-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#fff1cf;color:#a95d06}
.resource-icon svg{width:21px;height:21px}
.resource-icon img{object-fit:contain}
.resource:nth-child(3n+2) .resource-icon{background:#ffebda;color:#a64d0a}
.resource:nth-child(3n) .resource-icon{background:#eff0d5;color:#64711a}
.resource h3{margin:0 0 7px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.pin-label{display:inline-block;margin-right:5px;padding:1px 5px;border-radius:5px;background:#ffebbe;color:#743c08;font-size:11px;white-space:nowrap}
.meta{display:flex;align-items:center;flex-wrap:wrap}
.meta{gap:3px 8px;color:var(--muted);font-size:12px}
.meta time{white-space:nowrap}.meta time svg{display:inline-block;vertical-align:-2px;margin-right:4px}
.meta time svg{width:13px;height:13px;color:#a6530d}
.bv{padding:2px 5px;border-radius:5px;background:#f2ebf3}
.bv:hover{text-decoration:underline}
.get{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:13px;background:linear-gradient(#fff3c9,#ffe598);color:#723700}
.get svg{width:22px;height:22px}
.resource .get{min-height:36px;gap:4px;padding:5px 8px;border-radius:9px;font-size:12px}
.resource .get svg{width:16px;height:16px}
.resource{position:relative;box-shadow:0 3px 7px #74461524}
.resource .get::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.resource .bv{position:relative;z-index:2}
.resource:hover{border-color:#e5cdb3;background:#fff8ef;box-shadow:0 4px 8px #74461529}
.resource .get:hover{background:linear-gradient(#fff0bf,#ffdc8a)}
.resource:focus-within{border-color:#d7ae7d;background:#fff4e4;box-shadow:0 4px 9px #74461536}
.empty{grid-column:1/-1;margin:0;padding:28px 8px;text-align:center;color:var(--muted)}
.empty:has(>.get){padding-top:48px}
.empty p{margin:0 0 20px}
.share,.link-heading{display:flex;align-items:center;gap:14px}
.link-heading a{text-decoration:underline;color:var(--amber)}
.link-panel{margin-top:18px}
.link-heading{justify-content:space-between;align-items:baseline}
.link-heading h2{overflow-wrap:anywhere}
.link-heading a{flex:none}
.description{white-space:pre-wrap;overflow-wrap:anywhere}
.share{margin-top:10px;flex-wrap:wrap;overflow-wrap:anywhere}
code{background:#f6ede0;border-radius:5px;padding:3px 7px}
@media(min-width:701px){
    .hero{grid-template-columns:minmax(0,2fr) minmax(0,4fr) clamp(108px,14vw,160px);gap:clamp(10px,2vw,22px);margin:4px 0 14px}
    .hero h1{font-size:clamp(22px,2.7vw,30px);margin-bottom:5px}
    .hero p{font-size:13px;line-height:1.5}
    .hero-image{grid-column:3;grid-row:1;height:86px}
    .hero .search{grid-column:2;grid-row:1;width:100%;min-width:0;margin:0}
}
@media(min-width:701px) and (min-height:480px){
    body:has(.shell>.archive):not(:has(.link-panel)){height:100dvh;min-height:0;padding-block:12px}
    .shell:has(>.archive):not(:has(>.link-panel)){height:100%;display:flex;flex-direction:column;padding-bottom:clamp(4px,calc(10dvh - 45px),20px)}
    .shell:not(:has(>.link-panel))>.site-header,.shell:not(:has(>.link-panel))>.hero{flex-shrink:0}
    .shell:not(:has(>.link-panel))>.site-header{height:52px}
    .shell:not(:has(>.link-panel))>.hero{margin:clamp(12px,calc(8dvh - 32px),22px) 0 clamp(20px,calc(10dvh - 35px),34px)}
    .shell:not(:has(>.link-panel)) .hero-image{height:76px}
    .shell:not(:has(>.link-panel))>.archive{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:16px}
    .shell:not(:has(>.link-panel)) .archive-bar{padding-bottom:10px}
    .shell:not(:has(>.link-panel)) .resource{padding-block:14px}
    .shell:not(:has(>.link-panel)) .results-space{flex:1;min-height:0}
    .shell:not(:has(>.link-panel)) .results{max-height:var(--results-height,100%);margin-top:0;padding-inline-end:6px;row-gap:var(--results-row-gap,8px);align-content:start;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#c5ab90 transparent}
    .shell:not(:has(>.link-panel)) .results:has(>.resource){padding-bottom:8px}
}
@media(max-width:700px){
    body{padding:8px}
    .shell{padding:0 11px 22px}
    .site-header{position:relative;min-height:52px;height:auto;padding:0 4px;gap:4px}
    .public-backgrounds button{width:clamp(19px,6vw,32px);height:32px}
    .brand svg{width:34px;height:34px}
    .menu{display:block;border:0;padding:7px;background:transparent;color:var(--brown)}
    @media(max-width:360px){
        .site-header .brand{gap:6px;font-size:16px;overflow-wrap:anywhere}
        .site-header .brand svg{width:28px;height:28px}
        .site-header .menu{padding:4px}
    }
    .site-header nav{display:none;position:absolute;z-index:2;top:46px;right:0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);gap:14px}
    .menu[aria-expanded=true]+nav{display:flex;flex-wrap:wrap}
    .hero{display:flex;flex-direction:column;text-align:center;min-height:0}
    .hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .hero p{display:none}
    .hero-image{height:100px;width:min(100%,360px)}
    .search{align-self:stretch;margin:0 0 15px;padding:9px 3px 9px 12px;gap:4px}
    .search input{font-size:13px}
    .search svg{width:20px;height:20px}
    .search button{min-width:61px;padding:9px 12px;font-size:14px}
    .archive{padding:8px 0 2px;border:0;background:transparent;box-shadow:none}
    .archive-bar{gap:5px;padding:0 1px 8px}
    .archive-bar h2{font-size:14px;gap:4px}
    .archive-title-desktop,.archive-hint{display:none}
    .archive-title-mobile{display:inline}
    .archive-bar{flex-wrap:wrap}
    .archive-bar h2{flex-basis:100%;margin-bottom:3px}
    .archive-controls{width:100%}
    .archive-picker-form{position:static;width:100%;margin-top:6px}
    .results{grid-template-columns:minmax(0,1fr);gap:10px}
    .empty:has(>.get){container-type:inline-size}
    .empty p{font-size:min(15px,3.65cqi)}
    .resource .get{min-width:44px;min-height:44px}
    .resource .get span{display:none}
}