:root{--paper:#fbf9f3;--dot:rgba(90,85,75,0.22);--ink:#3d3a33;--pencil:#8a857a;--line:#d9d4c7;--thread:#c0392b;--card:#ffffff}*{box-sizing:border-box;margin:0}body{background:var(--paper);background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);background-size:18px 18px;color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;min-height:100vh;padding-bottom:3rem}.hand{font-family:Segoe Print,Bradley Hand,Comic Sans MS,cursive}.page{max-width:960px;margin:2.5rem auto 0;background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(61,58,51,.08);padding:0 1.4rem 2rem;position:relative;overflow:hidden}.ribbon{position:absolute;top:-4px;right:44px;width:26px;height:78px;background:var(--thread);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}header{padding:2.6rem 0 1rem}header h1{font-size:clamp(2rem,5vw,2.8rem);font-weight:400;text-decoration:underline;-webkit-text-decoration-color:var(--thread);text-decoration-color:var(--thread);text-decoration-thickness:3px;text-underline-offset:8px}header p{color:var(--pencil);margin-top:.9rem}nav{display:flex;gap:1.4rem;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:1.2rem 0 0}nav a{font-size:1.02rem;text-decoration:none;padding:.6rem .2rem .7rem;color:var(--pencil);border-bottom:3px solid transparent;margin-bottom:-2px}nav a.active{color:var(--ink);border-bottom-color:var(--thread)}nav a:focus-visible{outline:2px solid var(--thread);outline-offset:2px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2rem 0 1.1rem}.section-head h2{font-size:1.45rem;font-weight:600}.section-head a{color:var(--thread);text-decoration:none;font-size:.98rem}.section-head a:hover{text-decoration:underline}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:1.2rem;gap:1.2rem}.card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:box-shadow .15s ease,translate .15s ease}.card:hover{box-shadow:0 8px 18px rgba(61,58,51,.14);translate:0 -3px}.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.card figcaption{padding:.6rem .8rem .75rem;font-size:.95rem;border-top:1px dashed var(--line)}.empty{color:var(--pencil);padding:1rem 0 2rem}.edit-row{display:flex;gap:.5rem;padding:0 .8rem .7rem}.edit-row button{font:inherit;font-size:.78rem;border:1px solid var(--line);border-radius:5px;padding:.15rem .55rem;color:var(--pencil)}.add-card,.edit-row button{background:none;cursor:pointer}.add-card{display:flex;align-items:center;justify-content:center;border:2px dashed var(--thread);border-radius:8px;font:inherit;color:var(--thread);min-height:200px}footer{text-align:center;margin-top:3.5rem;color:var(--pencil);font-size:.9rem}footer button{font:inherit;background:none;border:none;color:var(--pencil);-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:pointer;font-size:.9rem}dialog{border:none;border-radius:10px;background:var(--card);color:var(--ink);padding:1.4rem;max-width:min(560px,92vw);margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}dialog::-webkit-backdrop{background:rgba(61,58,51,.5)}dialog::backdrop{background:rgba(61,58,51,.5)}dialog img{max-width:100%;height:auto;border-radius:6px;display:block}dialog p{text-align:center;margin-top:.9rem;font-size:1.1rem}.form-grid{display:grid;grid-gap:.9rem;gap:.9rem;min-width:min(420px,84vw)}.form-grid label{display:grid;grid-gap:.35rem;gap:.35rem;font-size:.92rem;color:var(--pencil)}.form-grid input[type=password],.form-grid input[type=text]{font:inherit;padding:.5rem .7rem;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:var(--card)}.form-grid .preview{max-height:220px;object-fit:contain}.form-error{color:var(--thread);font-size:.9rem}.form-actions{display:flex;gap:.7rem;justify-content:flex-end}.form-actions button{font:inherit;padding:.45rem 1rem;border-radius:6px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}.form-actions button.primary{background:var(--thread);border-color:var(--thread);color:#fff}a:focus-visible,button:focus-visible{outline:2px solid var(--thread);outline-offset:2px}@media (prefers-reduced-motion:reduce){.card{transition:none}}