:root{font-family:"Songti SC","STSong",Georgia,serif;color:#342d28;background:#c7d8cf}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(#779389 1px,transparent 1px),#c7d8cf;background-size:18px 18px}.book{width:min(1120px,calc(100% - 36px));min-height:calc(100vh - 52px);margin:26px auto;display:grid;grid-template-columns:52px 1fr;background:#f7f0df;box-shadow:0 20px 45px rgba(42,66,57,.25),inset 0 0 90px rgba(117,81,45,.05);border-radius:7px 20px 20px 7px;overflow:hidden}.cover-edge{background:#c75147;border-right:3px double #8f302b;color:#f5dec0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font:700 13px Arial,sans-serif;box-shadow:inset -6px 0 10px rgba(0,0,0,.12)}main{padding:46px clamp(25px,6vw,72px) 60px;background-image:linear-gradient(rgba(87,120,146,.09) 1px,transparent 1px);background-size:100% 31px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #867b6d;padding-bottom:28px}.date-line{font:600 11px Arial,sans-serif;letter-spacing:.18em;color:#8b6c58;text-transform:uppercase;margin:0 0 8px}h1{font-size:clamp(43px,6vw,72px);letter-spacing:-.06em;margin:0;line-height:1}h1 i{font-size:.45em;color:#c75147;font-style:normal;letter-spacing:.04em}.subtitle{color:#7c7168;margin:12px 0 0}.add-button{border:1px solid #342d28;border-radius:50%;background:#f7f0df;width:112px;height:112px;font:700 14px inherit;cursor:pointer;transform:rotate(3deg);box-shadow:3px 4px 0 #342d28;transition:.15s}.add-button span{display:block;font:300 34px Arial}.add-button:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:5px 6px 0 #342d28}.month-section{padding:38px 0 44px}.section-heading,.list-title{display:flex;justify-content:space-between;align-items:center}.section-heading>div{position:relative}.section-heading h2,.list-title h2{margin:0;font-size:23px}.section-heading p,.list-title span{font:12px Arial,sans-serif;color:#85776c}.tape{position:absolute;width:80px;height:25px;background:rgba(244,205,104,.55);left:-17px;top:0;transform:rotate(-4deg)}.section-heading h2{position:relative}.month-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.month-card{min-height:148px;padding:20px;background:#fffaf0;border:1px solid #d8c9ae;box-shadow:3px 3px 0 #e5d8c2;position:relative;transform:rotate(var(--tilt))}.month-card:nth-child(2n){background:#edf1e9}.month-card .day{font:800 38px Arial,sans-serif;color:#c75147;float:right;line-height:.8}.month-card h3{margin:7px 0 6px;font-size:22px}.month-card p{font-size:12px;color:#796d63;margin:0}.month-card .tag{position:absolute;left:20px;bottom:16px;font:10px Arial,sans-serif;letter-spacing:.1em;border-bottom:1px solid;padding-bottom:2px}.month-empty{grid-column:1/-1;border:1px dashed #a79a8e;padding:25px;text-align:center;color:#7d736a}.all-section{border-top:1px solid #867b6d;padding-top:30px}.table-head,.birthday-row{display:grid;grid-template-columns:58px minmax(180px,1.4fr) minmax(170px,1fr) 110px 44px;gap:14px;align-items:center}.table-head{padding:18px 10px 8px;font:10px Arial,sans-serif;letter-spacing:.12em;color:#8d7e72}.birthday-row{min-height:82px;padding:10px;border-bottom:1px solid #cfc2ae;transition:.15s}.birthday-row:hover{background:rgba(255,255,255,.45)}.order{font:italic 23px Georgia,serif;color:#ab9a8d}.person h3{margin:0 0 5px;font-size:19px}.person p,.next-date p{margin:0;color:#7d7167;font-size:12px}.calendar-tag{font:10px Arial,sans-serif;border:1px solid #9b8c80;padding:2px 5px;margin-left:6px}.next-date b{display:block;margin-bottom:4px}.countdown b{font:800 25px Arial,sans-serif;color:#c75147}.countdown small{font:11px Arial,sans-serif}.more{border:0;background:none;cursor:pointer;font-size:21px;color:#88796d}.row-actions{position:relative}.action-menu{position:absolute;right:0;top:28px;background:#fffaf0;border:1px solid #665a50;z-index:2;box-shadow:3px 3px 0 rgba(0,0,0,.15);min-width:82px}.action-menu button{display:block;border:0;background:none;width:100%;padding:9px;text-align:left;cursor:pointer}.action-menu button:hover{background:#eee4d1}.empty-book{text-align:center;padding:45px 15px;color:#7c7168;border-bottom:1px solid #cfc2ae}.empty-book b{display:block;font-size:20px;color:#342d28;margin-bottom:7px}dialog{border:0;padding:0;width:min(460px,calc(100% - 28px));background:#fffaf0;color:#342d28;box-shadow:12px 14px 0 rgba(52,45,40,.28)}dialog::backdrop{background:rgba(39,52,47,.62);backdrop-filter:blur(2px)}form{padding:30px}.dialog-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #c9bca9;padding-bottom:17px;margin-bottom:20px}.dialog-head small{font:10px Arial,sans-serif;letter-spacing:.2em;color:#c75147}.dialog-head h2{margin:4px 0 0}.dialog-head button{border:0;background:none;font-size:30px;cursor:pointer}form>label{display:block;font-weight:700;margin:16px 0 6px}form>label input{display:block;width:100%;border:0;border-bottom:1px solid #776a5f;background:transparent;font:16px inherit;padding:10px 2px;outline:none;border-radius:0}form>label input:focus{border-bottom:2px solid #c75147}fieldset{border:0;padding:0;margin:17px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}legend{font-weight:700;margin-bottom:9px}.radio-card input{position:absolute;opacity:0}.radio-card span{display:block;border:1px solid #b5a795;padding:11px;cursor:pointer}.radio-card b,.radio-card small{display:block}.radio-card small{font:11px Arial,sans-serif;color:#84776d;margin-top:4px}.radio-card input:checked+span{border:2px solid #c75147;background:#f8e3d5;padding:10px}.hint{font-size:11px;color:#836e5f;margin:5px 0}.form-error{min-height:18px;color:#b43730;font-size:12px}.save-button{width:100%;border:0;background:#c75147;color:#fff6e7;padding:14px;font:bold 15px inherit;cursor:pointer}.save-button:hover{background:#a93d35}@media(max-width:760px){.book{width:100%;margin:0;border-radius:0;grid-template-columns:22px 1fr;min-height:100vh}.cover-edge span{display:none}main{padding:28px 18px 45px}header{align-items:flex-start}.subtitle{font-size:13px}.add-button{width:78px;height:78px;font-size:11px}.add-button span{font-size:25px}.month-list{grid-template-columns:1fr 1fr}.table-head{display:none}.birthday-row{grid-template-columns:34px 1fr 70px 28px}.next-date{display:none}.countdown{text-align:right}}@media(max-width:480px){h1{font-size:42px}.month-list{grid-template-columns:1fr}.month-card{min-height:125px}.section-heading{align-items:flex-end}.birthday-row{gap:6px}.calendar-tag{display:inline-block;margin-top:4px}.person h3{font-size:17px}.countdown b{font-size:21px}}
