:root{--bg:#EFF6F3;--bg2:#E8F2EE;--card:rgba(255,255,255,.82);--text:#2D3B35;--muted:#62786D;--accent:#B07080;--border:#D8A8B0}
:root[data-theme="frost"]{--bg:#EEF2F8;--bg2:#E6ECF4;--text:#2E3640;--muted:#58677B;--accent:#5A80A8;--border:#A8C4E0}
:root[data-theme="rose"]{--bg:#F8F0F0;--bg2:#F5EAE8;--text:#4A3538;--muted:#806368;--accent:#B07080;--border:#D8A8B0}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(160deg,var(--bg),var(--bg2));color:var(--text);font:15px/1.75 system-ui,sans-serif;padding:max(28px,env(safe-area-inset-top)) 20px calc(56px + env(safe-area-inset-bottom))}main{max-width:560px;margin:auto}header{display:flex;align-items:center;gap:12px;margin-bottom:6px}h1{font-size:27px;font-weight:600;margin:0}h2{font-size:19px;font-weight:600;margin:0 0 10px}.back{margin-left:auto;color:var(--muted);text-decoration:none;font-size:14px}.sub{margin:4px 0 24px;color:var(--muted);font-size:14px}.feed{display:flex;flex-direction:column;gap:14px}.card{background:var(--card);border-radius:18px;padding:20px;box-shadow:0 2px 14px rgba(0,0,0,.04)}.content{white-space:pre-wrap;overflow-wrap:anywhere}.when{margin-top:14px;color:var(--muted);font-size:12px;text-align:right}.pixel-card{display:flex;flex-direction:column;align-items:center;padding:28px 20px 16px}.pixel-card canvas{image-rendering:pixelated;max-width:100%;height:auto!important}.pixel-card .when{align-self:flex-end}.empty{text-align:center;padding:70px 0;color:var(--muted)}.glyph{font-size:24px}.drawer-link{display:flex;align-items:center;gap:16px;color:var(--text);text-decoration:none;border:1px solid transparent;transition:border-color .2s}.drawer-link:hover{border-color:var(--border)}.drawer-link small{display:block;color:var(--muted)}.drawer-icon{position:relative;font-size:34px;opacity:.8}.drawer-icon.has-unseen{animation:drawer-breathe 4.2s ease-in-out infinite}.drawer-icon.has-unseen:after{content:'';position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(200,144,154,.24),transparent 72%);pointer-events:none}@keyframes drawer-breathe{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.06);opacity:1}}button,input,select{font:inherit}button{border:1px solid var(--border);border-radius:12px;padding:8px 14px;background:white;color:var(--accent);cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--border);outline-offset:3px}input{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--border);margin:8px 0 12px}select{background:var(--card);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:4px 8px}.tools{display:flex;flex-wrap:wrap;gap:10px}.demo{margin-top:24px}.note{color:var(--muted);font-size:13px}.status{margin-top:12px;color:var(--muted);white-space:pre-wrap}.theme{margin-top:28px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.drawer-icon.has-unseen{animation:none;opacity:1}}