.filter-bar{position:relative;z-index:10;justify-content:space-between;flex-wrap:wrap;gap:1rem;max-width:1200px;margin:0 auto 2.5rem;padding:0 .25rem}.filter-bar,.filter-group{display:flex;align-items:baseline}.filter-group{gap:.75rem}.filter-group--right{margin-left:auto}.filter-label{font-family:Lora,serif;font-size:.9rem;color:#5a4a3a;font-style:italic;white-space:nowrap}.sort-tabs{display:flex;gap:.15rem}.sort-tab{position:relative;font-family:Lora,serif;font-size:.9rem;font-weight:400;color:#5a4a3a;background:none;border:none;padding:.25rem .65rem;cursor:pointer;transition:color .2s ease}.sort-tab:hover{color:#2c251c}.sort-tab.active{color:#2c251c;font-weight:600}.sort-tab .tab-underline{position:absolute;bottom:0;left:10%;right:10%;height:2px;background:#5c82a6;border-radius:1px;transform:rotate(-.5deg) scaleX(1.05)}.per-page-options{display:flex;align-items:baseline;gap:.15rem}.per-page-divider{font-family:Lora,serif;font-size:.85rem;color:#d4c9bc;-webkit-user-select:none;-moz-user-select:none;user-select:none}.per-page-option{font-family:Lora,serif;font-size:.9rem;color:#5a4a3a;background:none;padding:.15rem .35rem;cursor:pointer;transition:color .2s ease;border:none;border-bottom:1.5px solid transparent}.per-page-option:hover{color:#5c82a6}.per-page-option.active{color:#2c251c;font-weight:600;border-bottom-color:#5c82a6;border-bottom-style:dashed}@media(max-width:768px){.filter-bar{flex-direction:column;gap:.75rem}.filter-group--right{margin-left:0}}.pagination{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:.5rem;max-width:1200px;margin:3rem auto 1rem;padding:0 1rem}.page-arrow{font-family:Lora,serif;font-size:.9rem;font-style:italic;color:#5c82a6;background:none;border:none;cursor:pointer;padding:.4rem .6rem;transition:all .2s ease;white-space:nowrap}.page-arrow:hover:not(:disabled){color:#4a6b8c;transform:translateX(-2px)}.page-arrow:last-child:hover:not(:disabled){transform:translateX(2px)}.page-arrow:disabled{color:#d4c9bc;cursor:default;opacity:.5}.page-numbers{display:flex;align-items:center;gap:.15rem}.page-number{font-family:Lora,serif;font-size:1rem;color:#5a4a3a;background:none;border:none;padding:.35rem .6rem;cursor:pointer;transition:all .15s ease;position:relative;min-width:2rem;text-align:center}.page-number:hover:not(.active){color:#2c251c}.page-number.active{color:#2c251c;font-weight:700;font-size:1.15rem}.page-number.active:after{content:"";position:absolute;top:50%;left:50%;width:2rem;height:2rem;border:1.5px solid #5c82a6;border-radius:50% 45% 55% 48%/48% 52% 45% 55%;transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none;opacity:.7}.page-ellipsis{font-family:Lora,serif;font-size:1rem;color:#d4c9bc;padding:.35rem .25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media(max-width:480px){.pagination{gap:.25rem}.page-arrow{font-size:.8rem;padding:.3rem .4rem}.page-number{font-size:.9rem;padding:.3rem .45rem;min-width:1.75rem}.page-number.active{font-size:1rem}.page-number.active:after{width:1.75rem;height:1.75rem}}:root{--paper-bg:#f9f6f0;--ink-dark:#2c251c;--ink-light:#5a4a3a;--accent-blue:#5c82a6;--accent-yellow:#f0c05a;--accent-red:#d96c6c;--border-brown:#d4c9bc;--font-header:Playfair Display,serif;--font-accent:Homemade Apple,cursive;--font-body:Lora,serif;--font-sans:Inter,sans-serif;--shadow-soft:0 4px 12px rgba(44,37,28,.08);--shadow-hard:0 8px 24px rgba(44,37,28,.15);--radius-sm:4px;--radius-md:8px;--radius-lg:12px}.view-page{min-height:100vh;background:linear-gradient(180deg,rgba(92,130,166,.05),transparent),#f9f6f0;padding:4rem 2rem}.view-page:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;opacity:.4;background-image:url('data:image/svg+xml,%3Csvg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="200" height="200" filter="url(%23noise)"/%3E%3C/svg%3E');mix-blend-mode:multiply}.view-header{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto 4rem;flex-wrap:wrap;gap:2rem;background:#fff;padding:2rem;border-radius:2px;box-shadow:rgba(44,37,28,.15);transform:rotate(-1deg);border:1px solid rgba(44,37,28,.05);min-width:0}.view-header h1{font-family:Playfair Display,serif;font-size:3rem;color:#2c251c;word-break:break-word;overflow-wrap:anywhere;min-width:0}.view-header h1 .recipient-name{font-family:Homemade Apple,cursive;color:#5c82a6;padding-left:.5rem;word-break:break-word;overflow-wrap:anywhere}.view-header .doodle-count{font-family:Inter,sans-serif;font-size:1rem;color:#5a4a3a;margin-top:.5rem;font-weight:500;letter-spacing:1px;text-transform:uppercase}.doodles-grid{position:relative;z-index:10;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:3rem;gap:3rem}.doodle-card{position:relative;background:#fff;padding:1rem;box-shadow:rgba(44,37,28,.15);border-radius:2px;border:1px solid rgba(44,37,28,.05);transition:transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s ease;display:flex;flex-direction:column;cursor:pointer}.doodle-card:before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(2deg);width:80px;height:25px;background:hsla(33,22%,78%,.7);box-shadow:0 1px 3px rgba(0,0,0,.1);z-index:12}.doodle-card:hover{transform:scale(1.05) translateZ(0)!important;box-shadow:0 20px 40px rgba(0,0,0,.15);z-index:20}.doodle-image-container{width:100%;aspect-ratio:4/3;background:#000;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.doodle-image-container .doodle-image{width:100%;height:100%;object-fit:contain;background:#fff}.doodle-message{padding:.75rem .25rem 0;text-align:center;flex-shrink:0}.doodle-message p{font-family:Homemade Apple,cursive;font-size:1.1rem;color:#2c251c;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.doodle-meta{display:flex;justify-content:space-between;padding:.5rem .25rem 0;font-family:Inter,sans-serif;font-size:.75rem;color:#5a4a3a;opacity:.6;flex-shrink:0;margin-top:auto}.doodle-meta .meta-views{display:flex;align-items:center;gap:.25rem}.empty-state{position:relative;z-index:10;text-align:center;background:#fff;padding:4rem;border-radius:2px;box-shadow:rgba(44,37,28,.15);max-width:600px;margin:0 auto;transform:rotate(2deg)}.empty-state h2{font-family:Playfair Display,serif;color:#2c251c;font-size:2.5rem;margin-bottom:1rem;word-break:break-word;overflow-wrap:anywhere}.empty-state h2 .recipient-name{font-family:Homemade Apple,cursive;color:#5c82a6;padding-left:.5rem;word-break:break-word;overflow-wrap:anywhere}.empty-state p{font-family:Lora,serif;color:#5a4a3a;margin-bottom:2rem}.gallery-loading{position:relative;z-index:10;text-align:center;padding:4rem 2rem}.gallery-loading p{font-family:Homemade Apple,cursive;font-size:1.3rem;color:#5c82a6}.gallery-loading--overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:hsla(40,43%,96%,.6);display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.error-banner{position:relative;z-index:10;text-align:center;background:#fff;padding:2rem;border-radius:2px;box-shadow:rgba(44,37,28,.15);max-width:600px;margin:2rem auto;border-left:4px solid #d96c6c}.error-banner p{font-family:Lora,serif;color:#2c251c;margin-bottom:1rem}@media(max-width:768px){.view-page{padding:2rem 1rem}.view-header{flex-direction:column;text-align:center}}