@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f7f5ef;color:#263e35;font-family:'Noto Sans Thai',sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:24px 6%;border-bottom:1px solid #dfdfd4;gap:16px}.brand{font-size:28px;font-weight:700;text-decoration:none;color:inherit}.brand span{color:#8b995d}.brand small{display:block;font-size:11px;font-weight:400}button,.primary,.upload{font:inherit;border:0;border-radius:12px;padding:12px 18px;cursor:pointer;background:#264f40;color:white;text-decoration:none;display:inline-block}button:disabled{opacity:.5}main{max-width:1000px;margin:auto;padding:38px 24px}.intro p,.hint{color:#6c776e;font-size:14px}h1{font-size:clamp(26px,5vw,40px);margin:10px 0}#status{font-size:13px;background:#e9eddf;padding:14px;border-radius:12px}#shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 8px 22px;border-bottom:12px solid #d7c6a8;box-shadow:0 8px 7px -7px #85745c}.book{position:relative;text-align:left;border-radius:5px 14px 14px 5px;min-height:260px;padding:24px 18px 20px 26px;box-shadow:6px 6px 0 #e3dfd3,10px 12px 16px #314a3420;border-left:8px solid #ffffff20;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s}.book:hover{transform:translateY(-6px)}.book strong{font-size:21px}.book small{opacity:.8}.book .symbol{font-size:48px;font-weight:400}.note{margin-top:36px;padding:20px;border:1px solid #dcded1;border-radius:16px;font-size:13px;color:#637365}.note p:last-child{font-size:12px}dialog{width:min(480px,94vw);border:0;border-radius:24px;padding:28px;color:#263e35;background:#fffef9;max-height:90vh}dialog::backdrop{background:#142a2377}#close{float:right;background:#edf0e7;color:#263e35;padding:5px 12px}.eyebrow{font-size:12px;color:#7d8b6b}h2{font-size:30px}.primary{width:100%;text-align:center}h3{font-size:16px;margin-top:28px}.version{border:1px solid #dedfd5;padding:14px;border-radius:12px;margin:12px 0;overflow-wrap:anywhere}.version small{display:block;color:#6c776e;margin:6px 0}.version button{font-size:13px;padding:8px 12px}.upload{width:100%;text-align:center;background:#e8eddd;color:#264f40;margin-top:12px}.upload input{display:block;width:100%;font-size:12px;margin-top:10px}.hint,#message{font-size:12px}button:focus-visible,a:focus-visible{outline:3px solid #b79247;outline-offset:4px}@media(max-width:700px){#shelf{grid-template-columns:repeat(2,1fr);gap:22px}.book{min-height:225px}header{padding:18px}header button{font-size:12px;padding:10px}main{padding:24px 18px}.book strong{font-size:20px}}

.tools{margin-top:28px}.tools>.upload{max-width:450px;display:block}input:disabled{opacity:.5}