@font-face{font-family:Caveat;src:url('/fonts/caveat.ttf') format('truetype');font-display:swap}
@font-face{font-family:Nunito;src:url('/fonts/nunito.ttf') format('truetype');font-display:swap}
@font-face{font-family:Playfair;src:url('/fonts/playfair.ttf') format('truetype');font-style:italic;font-display:swap}
:root{--blue:#0071e3;--ink:#1d1d1f;--muted:#62626a;--line:#e6e6eb;--canvas:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;color:var(--ink);font-size:16px;background:var(--canvas);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer;border:0}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,label[role=button]:focus-visible{outline:3px solid #0071e380;outline-offset:4px}
.site-header{display:flex;align-items:center;gap:28px;min-height:76px;padding:14px max(5%,calc((100vw - 1280px)/2));border-bottom:1px solid #ffffffb3;background:#fafafcd9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.brand{display:flex;align-items:center;gap:9px;font-size:23px;letter-spacing:-1px;font-weight:650;white-space:nowrap}.brand-mark{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:11px;background:linear-gradient(150deg,#34353b,#080809);color:white;font-family:Georgia,serif;font-style:italic;font-size:28px;letter-spacing:-3px;padding-right:4px}.brand-period{display:none}nav{display:flex;gap:9px;margin:auto;font-size:14px}nav a{padding:10px 16px;border-radius:30px;color:#5c5c64;white-space:nowrap}nav a.active{background:#e8e8ed;color:#1d1d1f}.header-note{font-size:11px;letter-spacing:1.5px;color:var(--muted)}
.view{max-width:1280px;margin:auto;padding:52px 5% 70px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:40px}.eyebrow{font-size:15px;font-weight:600;letter-spacing:-.2px;color:#6e6e73;margin:0 0 14px}h1{font-size:clamp(36px,4.2vw,60px);line-height:1.03;font-weight:650;letter-spacing:-2.8px;margin:0 0 20px}h1 span{color:var(--blue)}.page-heading>div>p:last-child{font-size:18px;color:var(--muted);line-height:1.5;margin:0}.edition{font-size:13px;color:var(--muted);padding-bottom:4px}
.workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:start}.editor{background:#fff;border:1px solid #fff;border-radius:26px;box-shadow:0 8px 30px #1d1d1f06;overflow:hidden}.editor-tabs{display:flex;margin:22px 24px 0;padding:4px;border-radius:12px;background:#f0f0f3;gap:3px}.editor-tabs button{flex:1;background:transparent;border-radius:9px;padding:12px 7px;color:var(--muted);font-size:14px;white-space:nowrap}.editor-tabs button span{display:none}.editor-tabs button[aria-selected=true]{background:white;color:#1d1d1f;box-shadow:0 2px 7px #00000010;font-weight:600}.editor-panel{padding:29px 28px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}h2{font-size:23px;letter-spacing:-.6px;font-weight:600;margin:0}.tiny-label{font-size:12px;color:#81818a;white-space:nowrap}label,legend{display:block;font-size:14px;font-weight:500;margin-bottom:9px}label>span:not(.theme-swatch),label small{font-size:12px;font-weight:400;color:var(--muted);margin-left:6px}input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;border:1px solid #dddde3;border-radius:12px;background:#fafafc;padding:13px 14px;color:var(--ink);font-size:16px;min-height:48px}input::placeholder,textarea::placeholder{color:#82828a}input:focus,textarea:focus,select:focus{border-color:var(--blue);outline:3px solid #0071e318}textarea{resize:vertical;line-height:1.65;min-height:200px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.writing-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted);margin:12px 0;line-height:1.5}.photo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:22px 0}.upload-button{font-size:14px;color:var(--blue);background:#f1f7ff;padding:12px 16px;border-radius:20px;margin:0;cursor:pointer}.next-button{display:flex;align-items:center;justify-content:space-between;width:100%;background:#f5f5f7;color:#1d1d1f;border-radius:12px;padding:15px 17px;font-size:14px}.next-button span{color:var(--blue);font-size:18px}.editor-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 28px}.editor-footer>span{font-size:12px;color:var(--muted)}.send-permanently{max-width:310px}.send-permanently label{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:12px;line-height:1.5;color:var(--muted);cursor:pointer}.send-permanently input{flex:0 0 auto;margin:2px 0 0;accent-color:var(--blue)}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;color:white;background:var(--blue);border-radius:30px;padding:14px 22px;font-size:15px;font-weight:500}.primary-button:hover{background:#0077ed}.secondary-button{border:1px solid #d2d2d7;border-radius:24px;padding:12px 18px;font-size:14px;background:white;color:#1d1d1f}.text-button{background:none;padding:5px 0;color:var(--blue);font-size:14px}.preview-column{padding-top:4px}.preview-label{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);letter-spacing:.3px;margin:0 8px 17px}.preview-label button{font-size:13px}.preview-caption{text-align:center;font-size:13px;color:var(--muted);margin-top:23px;line-height:1.6}
.letter-card{--letter-bg:#182741;--letter-fg:#f5f5f7;--letter-muted:#b4bdd0;--letter-line:#ffffff26;--letter-accent:#b2cdfb;--letter-song:#ffffff0c;background:var(--letter-bg);color:var(--letter-fg);border-radius:25px;padding:30px 35px;position:relative;isolation:isolate;overflow:hidden;box-shadow:0 18px 45px #202c4d15;min-height:640px}.letter-card>*{position:relative;z-index:1}.letter-topline{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11px;letter-spacing:1.1px;line-height:1.6;color:var(--letter-muted);padding-bottom:22px;border-bottom:1px solid var(--letter-line)}.letter-topline>span:last-child{font-family:Georgia,serif;font-style:italic;font-size:21px;letter-spacing:-1px;color:var(--letter-fg)}.letter-to{font-family:Georgia,serif;font-style:italic;color:var(--letter-accent);font-size:18px;margin:34px 0 17px}.letter-card h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,3.2vw,43px);line-height:1.13;letter-spacing:-1.3px;margin-bottom:27px;overflow-wrap:anywhere}.letter-body{white-space:pre-wrap;overflow-wrap:anywhere;font-family:Georgia,serif;font-size:17px;line-height:1.85;max-height:250px;overflow:auto;margin:0 0 25px}.placeholder-copy{color:var(--letter-muted)}.letter-signoff{font-family:Georgia,serif;font-style:italic;font-size:16px;line-height:1.7;margin:26px 0 34px;color:var(--letter-muted);overflow-wrap:anywhere}.song-card{display:flex;gap:13px;align-items:center;border:1px solid var(--letter-line);background:var(--letter-song);border-radius:16px;padding:16px}.play-button{width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--letter-bg);background:var(--letter-accent);font-size:14px;padding-left:6px}.song-card>div{min-width:0}.song-card strong{display:block;font-weight:500;font-size:14px;overflow-wrap:anywhere}.song-card>div>span{display:block;font-size:12px;line-height:1.4;color:var(--letter-muted);margin-top:5px;overflow-wrap:anywhere}.song-card>div>span[hidden]{display:none}.song-timing{margin-left:auto;font-size:12px;color:var(--letter-muted);line-height:1.5}.song-provider-mark,.preview-provider-mark{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto;color:var(--letter-muted);font-size:12px;font-weight:600;white-space:nowrap}.letter-bottomline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:10px;letter-spacing:.8px;line-height:1.5;margin-top:23px;color:var(--letter-muted)}.paper{--letter-bg:#f8f5ed;--letter-fg:#34312c;--letter-muted:#6e675c;--letter-line:#34312c20;--letter-accent:#76552f;--letter-song:#fff8}.rose{--letter-bg:#f9e9ee;--letter-fg:#592638;--letter-muted:#875d6c;--letter-line:#59263825;--letter-accent:#933d5a;--letter-song:#fff5}.forest{--letter-bg:#163b32;--letter-fg:#f2f4e8;--letter-muted:#b6c6b7;--letter-line:#ffffff26;--letter-accent:#c5d8a7;--letter-song:#ffffff0c}.letter-photo{display:block;width:100%;max-height:350px;object-fit:cover;border-radius:12px;margin:24px 0}
.letter-card.font-sans :is(.letter-body,h2,.letter-signoff,.letter-to){font-family:-apple-system,BlinkMacSystemFont,sans-serif}.letter-card.font-mono :is(.letter-body,h2,.letter-signoff,.letter-to){font-family:ui-monospace,monospace}.letter-card.font-mono h2{font-size:30px}.letter-card.font-hand :is(.letter-body,h2,.letter-signoff,.letter-to){font-family:Caveat,cursive}.letter-card.font-hand .letter-body{font-size:26px;line-height:1.5}.letter-card.font-hand :is(.letter-to,.letter-signoff){font-size:24px}.letter-card.font-rounded :is(.letter-body,h2,.letter-signoff,.letter-to){font-family:Nunito,ui-rounded,sans-serif}.letter-card.font-romantic :is(.letter-body,h2,.letter-signoff,.letter-to){font-family:Playfair,Georgia,serif;font-style:italic}.quote-line{display:block;border-left:2px solid var(--letter-accent);padding-left:14px;color:var(--letter-muted)}
.letter-card.has-backdrop{--letter-fg:#fff;--letter-muted:#e1e4eb;--letter-accent:#fff;--letter-line:#ffffff35;--letter-song:#10111baa;background:#20263b}.letter-card.has-backdrop:after{content:'';position:absolute;inset:0;background:#070d22a8;z-index:0;pointer-events:none}.letter-card>.card-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.background-credit{font-size:12px;color:var(--letter-muted);margin:18px 0 0;overflow-wrap:anywhere}.listening-choice{border:1px solid var(--letter-line);background:var(--letter-song);border-radius:13px;padding:13px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:25px}.listen-button{background:var(--letter-accent);color:var(--letter-bg);padding:11px 15px;border-radius:20px;font-size:14px}.listening-choice>span{font-size:12px;color:var(--letter-muted)}
.panel-intro{font-size:16px;color:var(--muted);line-height:1.6;margin:-10px 0 25px}#panel-song>input{margin-bottom:20px}.or-line{border-top:1px solid var(--line);text-align:center;margin:30px 0 23px;height:0}.or-line span{position:relative;top:-10px;background:white;padding:0 12px;font-size:12px;color:var(--muted)}.audio-upload{text-align:center;cursor:pointer;border:1px dashed #c9c9d2;background:#fafafc;border-radius:14px;padding:18px;font-size:14px;line-height:1.5}.audio-upload>span{display:block;font-size:12px;margin:7px 0 0}.file-status{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 22px;overflow-wrap:anywhere}.clip-controls{display:flex;align-items:flex-end;gap:12px}.clip-controls>div{flex:1;min-width:0}.clip-controls label{font-size:14px}.clip-arrow{padding-bottom:14px;color:var(--muted)}.clip-controls button{height:48px;white-space:nowrap;padding:10px 14px}.help-text{font-size:13px;line-height:1.65;color:var(--muted)}.media-player{margin:20px 0}.media-player iframe{width:100%;height:260px;border:0;border-radius:14px;background:transparent}.media-player iframe.provider-player{height:175px}.media-player iframe.provider-player.spotify{height:152px}.media-player audio{width:100%}.media-player p{font-size:13px;line-height:1.6}.letter-card .media-player .help-text{color:var(--letter-muted)}.provider-link{display:inline-block;font-size:14px;margin-top:12px;text-decoration:underline;text-underline-offset:4px}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}.theme-option{position:relative;cursor:pointer;font-size:14px;margin:0}.theme-option input{position:absolute;top:12px;right:12px;width:17px;height:17px;accent-color:var(--blue)}.theme-option small{display:block;margin:6px 0 0;font-size:12px;line-height:1.5}.theme-swatch{display:flex;align-items:center;justify-content:center;height:95px;border-radius:13px;margin-bottom:11px;background:var(--letter-bg,#182741);color:var(--letter-fg,#fff);font-family:Georgia,serif;font-size:36px}.theme-option:has(input:checked) .theme-swatch{outline:2px solid var(--blue);outline-offset:4px}fieldset{border:0;padding:0;margin:0 0 26px}.background-settings{margin-top:26px;padding-top:25px;border-top:1px solid var(--line)}#background-upload-panel{margin-top:18px}.checkbox-label{display:flex;gap:12px;align-items:flex-start;margin:25px 0 0}.checkbox-label input{appearance:none;-webkit-appearance:none;width:38px;flex:0 0 38px;height:23px;margin:0;border-radius:15px;background:#d7d7df;position:relative;cursor:pointer}.checkbox-label input:before{content:'';display:block;position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002}.checkbox-label input:checked{background:#248541}.checkbox-label input:checked:before{left:17px}.checkbox-label>span{font-size:14px!important;color:var(--ink)!important;margin:0!important}.checkbox-label small{display:block;margin:7px 0 0;font-size:13px;line-height:1.65}.privacy-note{background:#f5f5f7;border-radius:12px;padding:15px;font-size:13px;line-height:1.65;color:var(--muted);margin-top:22px}
.message-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px}.message-label>label{margin:0}.message-label>label>span:not(.sr-only){display:block;margin:5px 0 0}.format-choice select{font-size:13px;min-height:38px;padding:8px 12px;border-radius:20px}.format-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.format-toolbar button{background:#f1f1f5;border-radius:7px;padding:8px 12px;min-width:34px;font-size:14px}.format-toolbar span{font-size:12px;color:var(--muted)}.catalog-search{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:23px}.catalog-options{display:flex;gap:10px;margin-top:10px}.catalog-options>label{flex:1;min-width:0;margin:0}.catalog-options select{font-size:13px;min-height:40px;padding:8px 11px}.music-results{max-height:360px;overflow:auto;border-radius:13px}.music-result{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:12px 3px}.music-result>img{width:48px;height:48px;object-fit:cover;border-radius:8px}.song-result-button{background:none;color:var(--ink);text-align:left;flex:1;min-width:0;padding:0}.song-result-button strong,.song-result-button span,.song-result-button small{display:block;overflow-wrap:anywhere}.song-result-button strong{font-size:14px;font-weight:600}.song-result-button span{font-size:13px;margin-top:5px;color:var(--muted)}.song-result-button small{font-size:12px;color:var(--muted);margin-top:4px}.catalog-provider-link{font-size:12px;color:var(--blue);max-width:65px;line-height:1.5}.selected-song{background:#edf5ff;border:1px solid #c5defe;border-radius:13px;padding:16px;margin-bottom:23px}.selected-song strong,.selected-song span{display:block}.selected-song span{color:var(--muted);font-size:13px;margin-top:5px}
.narrow-view{max-width:1080px;min-height:75vh;padding-top:65px}.lead{font-size:18px;color:var(--muted);line-height:1.65}.search-form{display:flex;gap:12px;margin:35px 0 14px}.search-form input{flex:1;background:#fff}.search-form button{white-space:nowrap}.empty-state{text-align:center;border:1px solid var(--line);border-radius:22px;background:#fff9;padding:55px 20px;margin:35px 0;color:var(--muted)}.empty-state>span{font-size:40px;color:var(--blue)}.empty-state h2{margin-top:15px;color:var(--ink)}.empty-state p{font-size:16px;line-height:1.5}.result-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}.result-card{display:block;background:#fff;border:1px solid transparent;border-radius:22px;padding:27px}.result-card:hover{border-color:#9abfe9}.result-to{font-size:12px;color:var(--blue);margin-bottom:17px;overflow-wrap:anywhere}.result-card h2{font-size:23px;overflow-wrap:anywhere}.result-card p{font-size:16px;line-height:1.6;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.result-meta{display:flex;justify-content:space-between;gap:15px;font-size:12px;border-top:1px solid var(--line);padding-top:18px;overflow-wrap:anywhere}.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}details{border-bottom:1px solid var(--line);padding:20px 0}summary{font-size:16px;font-weight:500;line-height:1.5;cursor:pointer}details p{font-size:16px;line-height:1.7;color:var(--muted)}.support-form{background:#fff;border-radius:23px;padding:28px}.support-form>p{font-size:14px;color:var(--muted);line-height:1.7}.support-form input,.support-form textarea{margin-bottom:22px}.reader-view{max-width:860px}.reader-view .letter-card,.expanded-letter{min-height:auto;padding:42px 50px}.reader-view .letter-body,.expanded-letter .letter-body{max-height:none;overflow:visible}.reader-view .letter-card h2,.expanded-letter h2{font-size:44px}.reader-toolbar{display:flex;justify-content:space-between;gap:15px;font-size:14px;margin-bottom:25px;color:var(--muted)}.reader-footer{display:flex;justify-content:space-between;gap:18px;margin-top:25px}.reader-note{font-size:14px;color:var(--muted);text-align:center}
.site-footer{display:flex;justify-content:space-between;gap:25px;max-width:1280px;margin:auto;padding:25px 5% 35px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--muted)}.site-footer>span{font-size:18px;font-weight:600;color:var(--ink)}.footer-note{font-size:12px;font-weight:400;margin-left:13px;color:var(--muted)}dialog{border:1px solid #ffffff90;background:#f5f5f7;border-radius:26px;padding:24px;color:var(--ink);width:640px;max-width:calc(100vw - 28px);max-height:90vh;box-shadow:0 30px 100px #0003}dialog::backdrop{background:#171b2780;backdrop-filter:blur(10px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;margin-bottom:20px}.success-content{padding:20px}.success-content h2{font-size:33px;letter-spacing:-1px}.success-content>p{font-size:15px;line-height:1.7;color:var(--muted)}.copy-row{display:flex;gap:10px}.copy-row input{min-width:0}.success-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:27px}.error{color:#b02a39;font-size:14px;line-height:1.6}.form-error{padding:0 28px 24px;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1500px){.view{padding-left:0;padding-right:0}.site-footer{padding-left:0;padding-right:0}}
@media(max-width:1100px){.header-note,.edition{display:none}.workspace{gap:24px}.editor-tabs{margin:20px 20px 0}.editor-panel{padding:25px 22px}.editor-footer{padding:22px}.field-row{grid-template-columns:1fr}.letter-card{padding:28px}.clip-controls{flex-wrap:wrap}.clip-controls button{width:100%}.catalog-options{flex-direction:column}.message-label{flex-wrap:wrap}.message-label>label>span:not(.sr-only){display:inline;margin-left:5px}}
@media(max-width:760px){.site-header{padding:16px 5%;flex-wrap:wrap;gap:16px}.brand{font-size:23px}nav{gap:1px;margin:0 0 0 auto}nav a{padding:8px 10px;font-size:13px}.view{padding:35px 5% 50px}.page-heading{margin-bottom:30px}h1{font-size:45px;letter-spacing:-2px}.page-heading>div>p:last-child{font-size:17px}.workspace{grid-template-columns:1fr;gap:32px}.field-row{grid-template-columns:1fr 1fr}.letter-card{min-height:590px;padding:30px}.letter-card h2{font-size:40px}.catalog-options{flex-direction:row}.clip-controls button{width:auto}.preview-label{font-size:12px}.support-grid,.result-list{grid-template-columns:1fr}.support-grid{gap:30px}.reader-view .letter-card,.expanded-letter{padding:30px}.reader-view .letter-card h2,.expanded-letter h2{font-size:37px}.site-footer{flex-direction:column;gap:10px}.search-form{flex-wrap:wrap}.search-form input{flex-basis:100%}.search-form button{width:100%}.copy-row{flex-wrap:wrap}.copy-row input{flex-basis:100%}.success-content{padding:6px}}
@media(max-width:430px){.editor-footer{flex-wrap:wrap}.send-permanently{width:100%;max-width:none}.site-header nav{width:100%;justify-content:space-between}.field-row{grid-template-columns:1fr}.editor-tabs{margin:18px 16px 0}.editor-tabs button{font-size:13px}.editor-panel{padding:25px 20px}.editor-footer>span{display:none}.editor-footer .primary-button{width:100%}.message-label{gap:10px}.catalog-options{flex-direction:column}.clip-controls button{width:100%}.song-card{flex-wrap:wrap}.song-timing{margin-left:55px}.letter-card{padding:25px}.reader-toolbar{flex-wrap:wrap}.letter-topline{font-size:10px}.theme-grid{gap:20px 14px}.dialog-heading{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){.site-header{background:#fafafc;backdrop-filter:none}dialog::backdrop{backdrop-filter:none;background:#171b27e0}}
.letter-body strong{font-weight:700;font-synthesis:weight}.letter-body em{font-synthesis:style}
.turnstile-wrap{margin:0 28px 18px;padding:16px 18px;border:1px solid #e6e6eb;border-radius:16px;background:#fafafc}.turnstile-title{margin:0 0 8px;font-size:14px;font-weight:600}.turnstile-note{margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:1100px){.turnstile-wrap{margin:0 22px 16px}}
@media(max-width:430px){.turnstile-wrap{margin:0 20px 16px;padding:14px}}

/* SendTheLetter responsive browse and history layouts */
body{overflow-x:hidden}
.view{width:100%;max-width:1320px;margin-inline:auto}
.site-header{width:100%;padding-inline:max(5%,calc((100% - 1320px)/2));gap:clamp(12px,2vw,30px)}
.brand{white-space:nowrap;gap:9px}.brand-mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-size:23px;font-family:Georgia,serif;font-style:italic}
.site-header nav{display:flex;align-items:center;gap:clamp(2px,1vw,15px);margin-left:auto}
.site-header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px clamp(9px,1.2vw,17px);border-radius:24px;white-space:nowrap}
.site-header nav a.active{background:#edf3ff;color:var(--blue)}
.browse-view{max-width:none;padding:clamp(46px,7vw,100px) max(5%,calc((100% - 1320px)/2)) 76px}
.browse-hero{max-width:1280px;margin:0 auto clamp(46px,7vw,92px);display:flex;flex-direction:column;align-items:flex-start}
.browse-hero .eyebrow{margin-bottom:18px}.browse-hero h1{font-size:clamp(46px,7vw,88px);line-height:.99;letter-spacing:-.065em;margin:0 0 18px}.browse-hero h1 span{color:var(--blue)}
.browse-hero>p:not(.eyebrow){max-width:55ch;color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.6;margin:0 0 25px}
.browse-hero .primary-button{min-height:48px}
.letter-lanes{width:calc(100% + 10vw);margin:0 -5vw 70px;overflow:hidden;padding:0 max(5vw,calc((100vw - 1320px)/2)) 20px}
.lane-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1320px;margin:0 auto 16px;padding-inline:4px;color:var(--muted);font-size:12px;letter-spacing:.1em}
.lane-heading span:last-child{letter-spacing:0}
.lane-heading>span:first-child{white-space:nowrap}
.letter-lane{height:clamp(285px,29vw,370px);overflow:hidden;position:relative;margin:0 0 14px;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.lane-track{position:absolute;inset:0 auto auto 0;display:flex;width:max-content;will-change:transform;animation:lane-left 70s linear infinite}
.lane-group{display:flex;align-items:stretch;gap:clamp(14px,1.5vw,22px);padding-right:clamp(14px,1.5vw,22px)}
.lane-right .lane-track{animation-name:lane-right;animation-duration:78s}
.lane-track:hover,.letter-lane:focus-within .lane-track{animation-play-state:paused}
@keyframes lane-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lane-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.browse-card{flex:0 0 clamp(270px,29vw,370px);min-height:clamp(250px,26vw,320px);height:calc(100% - 4px);margin-block:2px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border:1px solid #dedee3;border-radius:19px;background:#fff;color:var(--ink);box-shadow:0 2px 5px #00000012;transition:box-shadow .2s ease,transform .2s ease}
.browse-card:hover{box-shadow:0 9px 27px #00000014;transform:translateY(-2px)}
.browse-card-head{padding:19px 21px 0}.browse-recipient{display:inline-block;border:1px solid #dddde2;background:#f5f5f7;border-radius:18px;padding:7px 12px;font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browse-excerpt{align-self:start;margin:15px 21px 18px;font-family:var(--font-hand,'Caveat'),cursive;font-size:clamp(23px,2.3vw,31px);line-height:1.38;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:#26262c}
.browse-song{display:flex;align-items:center;gap:11px;min-height:70px;padding:12px 17px;background:#f3f3f5;border-top:1px solid #e2e2e7;min-width:0}
.browse-art,.browse-note-icon{width:45px;height:45px;flex:0 0 45px;border-radius:8px;object-fit:cover}.browse-note-icon{display:grid;place-items:center;background:#e7eafb;color:var(--blue);font-size:22px}
.browse-song-detail{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.browse-song-detail strong,.browse-song-detail small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browse-song-detail strong{font-size:13px;font-weight:600}.browse-song-detail small{font-size:11px;color:var(--muted)}.browse-provider{font-size:20px;color:#29292d}
.lane-empty{max-width:1320px;margin:18px auto;padding:25px;border:1px dashed #d3d3da;border-radius:16px;text-align:center;color:var(--muted);line-height:1.6}
.browse-finder{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,70px);align-items:start;border-top:1px solid var(--line);padding-top:44px}
.browse-finder h2{font-size:clamp(26px,4vw,40px);letter-spacing:-.04em;margin:0 0 12px}.browse-finder .search-form{margin:0 0 10px}.browse-finder .search-form input{min-width:0}.browse-finder .result-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.history-view{max-width:1120px;padding-top:clamp(36px,6vw,70px)}.history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
.history-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:23px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 4px 20px #00000006}.history-card h2{overflow-wrap:anywhere}.history-excerpt{color:var(--muted);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.history-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.bot-trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.send-permanently{display:none!important}
@media(max-width:900px){.site-header{flex-wrap:wrap}.site-header nav{order:3;width:100%;justify-content:space-between;margin:0;overflow-x:auto}.browse-view{padding-top:52px}.letter-lane{height:295px}.browse-card{flex-basis:310px;min-height:250px}.browse-finder{grid-template-columns:1fr;gap:12px}.browse-finder .result-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.site-header{padding:13px 16px;gap:9px}.brand{font-size:20px}.brand-mark{width:32px;height:32px}.site-header nav{gap:4px}.site-header nav a{flex:1;padding:8px 9px;font-size:13px;min-width:max-content}.browse-view{padding:42px 0 48px}.browse-hero{padding-inline:20px;margin-bottom:40px}.browse-hero h1{font-size:clamp(44px,12vw,65px)}.letter-lanes{width:100%;margin-inline:0;padding-inline:0}.lane-heading{padding:0 20px;font-size:10px}.letter-lane{height:270px;margin-bottom:12px;mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}.browse-card{flex-basis:min(82vw,330px);min-height:238px}.browse-card-head{padding:15px 16px 0}.browse-excerpt{margin:13px 16px 14px;font-size:24px}.browse-song{min-height:62px;padding:9px 14px}.browse-art,.browse-note-icon{width:40px;height:40px;flex-basis:40px}.lane-empty{margin:10px 18px;padding:20px}.browse-finder{padding:34px 20px 0}.browse-finder .search-form{flex-direction:column}.browse-finder .search-form button{width:100%;min-height:46px}.browse-finder .result-list,.history-list{grid-template-columns:1fr}.history-view{padding:35px 18px 50px}.history-card{padding:20px}.workspace{grid-template-columns:minmax(0,1fr)}.editor,.preview-column{min-width:0}.editor-panel{padding-inline:18px}.field-row{grid-template-columns:minmax(0,1fr)}.clip-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.clip-controls button{grid-column:1/-1;width:100%}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reader-view{padding-inline:16px}.reader-view .letter-card,.expanded-letter{padding:25px 20px}.reader-view .letter-card h2,.expanded-letter h2{font-size:clamp(30px,9vw,40px)}.site-footer{padding:22px 18px}.support-grid{grid-template-columns:minmax(0,1fr)}.search-form{flex-direction:column}.search-form button{width:100%;min-height:46px}}
@media(prefers-reduced-motion:reduce){.lane-track{animation:none!important;position:relative;transform:none!important}.letter-lane{height:auto;overflow-x:auto;mask-image:none}.lane-group{width:max-content}.browse-card:hover{transform:none}}

/* Touch-friendly controls and shared radii across desktop, iOS, and Android. */
:root{color-scheme:light;--radius-control:14px;--radius-card:20px;--radius-panel:24px}
button,input,textarea,select{font:inherit}
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{border-radius:var(--radius-control);min-height:48px}
textarea{min-height:150px;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:44px;background-color:#fff;background-image:linear-gradient(45deg,transparent 50%,#687181 50%),linear-gradient(135deg,#687181 50%,transparent 50%);background-position:calc(100% - 21px) 21px,calc(100% - 15px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;touch-action:manipulation}
select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #2675d8;outline-offset:2px}
button,.primary-button,.secondary-button,.upload-button,.audio-upload{min-height:46px;border-radius:var(--radius-control);touch-action:manipulation}
.browse-card,.history-card,.result-card,.letter-card,.support-form,.editor,.preview-column,.empty-state{border-radius:var(--radius-card)}
.photo-consent-note{display:grid;gap:9px;margin:20px 0 12px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-control);background:#f7f8fa;color:var(--ink);font-size:14px;line-height:1.55}
.photo-consent-note>span{color:var(--muted)}.photo-consent-note .checkbox-label{margin:0}.photo-consent-note input[type=checkbox]{width:20px;height:20px;flex:0 0 20px}
.upload-button[aria-disabled=true]{opacity:.52;cursor:not-allowed}
.blur-setting{margin-top:18px}.blur-setting input[type=range]{width:100%;min-height:40px;accent-color:var(--blue)}.blur-setting output{float:right;color:var(--muted);font-variant-numeric:tabular-nums}
.card-background{transform:scale(1.12);transition:filter .15s ease}
.image-editor-dialog{width:min(560px,calc(100vw - 24px));border-radius:var(--radius-panel)}.image-crop-viewport{width:100%;aspect-ratio:4/3;overflow:hidden;position:relative;border-radius:var(--radius-control);background:#e8e9ed;touch-action:none;cursor:grab}.image-crop-viewport:active{cursor:grabbing}.image-crop-viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;user-select:none;-webkit-user-drag:none}.image-editor-dialog input[type=range]{width:100%;accent-color:var(--blue)}.image-editor-actions{display:flex;justify-content:flex-end;margin-top:18px}
.image-editor-dialog .help-text{line-height:1.55}.image-editor-dialog .dialog-heading{font-size:16px}
.support-form textarea{width:100%;min-height:190px}
.history-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0}.history-tools>span{max-width:52ch;color:var(--muted);font-size:13px;line-height:1.5}.unlock-letter{max-width:650px;margin:10vh auto;padding:clamp(22px,5vw,48px);border:1px solid var(--line);border-radius:var(--radius-panel);background:#fff}.sealed-result{cursor:default}.sealed-result p{line-height:1.6}
@media(max-width:600px){.image-editor-dialog{padding:18px}.image-editor-actions .primary-button{width:100%}.photo-consent-note{padding:14px}}

/* One clear privacy choice keeps Private link and Public Browse easy to compare. */
.recipient-code-note{margin:10px 0 24px;padding:13px 15px}
.privacy-choice-group{display:grid;gap:12px;margin:24px 0;padding:0}
.privacy-choice-group legend{margin-bottom:12px;font-size:16px;font-weight:600;color:var(--ink)}
.privacy-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.privacy-choice{position:relative;display:flex;align-items:flex-start;gap:12px;min-width:0;min-height:125px;margin:0;padding:18px 44px 18px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}
.privacy-choice:hover{transform:translateY(-2px);box-shadow:0 8px 22px #17203312}
.privacy-choice:has(input:checked){border-color:var(--blue);background:#f4f8ff;box-shadow:0 0 0 1px var(--blue)}
.privacy-choice input{position:absolute;width:1px;height:1px;opacity:0}
.privacy-choice:has(input:focus-visible){outline:3px solid #007aff55;outline-offset:3px}
.privacy-choice-copy{display:grid;gap:7px;min-width:0}
.privacy-choice-copy strong{font-size:15px;line-height:1.35}
.privacy-choice-copy small{font-size:13px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.privacy-choice-mark{position:absolute;top:18px;right:18px;width:20px;height:20px;border:1.5px solid #92949b;border-radius:50%;background:#fff}
.privacy-choice:has(input:checked) .privacy-choice-mark{border:6px solid var(--blue)}
.privacy-choice-help{font-size:13px;line-height:1.5;color:var(--muted)}
.retention-settings>.help-text{max-width:72ch}
@media(max-width:640px){.privacy-choice-grid{grid-template-columns:1fr}.privacy-choice{min-height:0}}

/* Sparse Browse stays centered and uses unique real letters only. */
.lane-track.lane-sparse{position:relative;inset:auto;width:100%;justify-content:center;animation:none;will-change:auto}
.lane-track.lane-sparse .lane-group{width:min(100%,760px);justify-content:center;padding:0 18px}
.lane-track.lane-sparse .browse-card{flex:0 1 min(100%,620px);min-height:clamp(300px,34vw,390px)}
.letter-lane.sparse-lane{height:auto;min-height:clamp(310px,35vw,400px);mask-image:none;overflow:visible}

/* Keep the optional retention choices visually grouped and clearly separated. */
.retention-settings{display:grid;gap:12px;margin:26px 0 30px}
.retention-settings .privacy-note{margin:0 0 6px;padding:17px 18px;border:1px solid var(--line);border-radius:var(--radius-control);line-height:1.65}
.retention-settings>label{margin:0}
.retention-settings>.help-text{margin:0;line-height:1.65}
#panel-design>.checkbox-label{margin-top:27px}
#panel-design>.checkbox-label small{line-height:1.6}

/* Photo consent is a checkbox, not one of the app's toggle switches. */
.photo-consent-note .checkbox-label input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;padding:0;border:1.5px solid #8b8b93;border-radius:6px;background:#fff;cursor:pointer}
.photo-consent-note .checkbox-label input[type=checkbox]::before{content:none;position:static;inset:auto;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:#fff;font-size:15px;line-height:1;font-weight:700}
.photo-consent-note .checkbox-label input[type=checkbox]:checked{border-color:var(--blue);background:var(--blue)}
.photo-consent-note .checkbox-label input[type=checkbox]:checked::before{content:'✓';color:#fff}

/* Source choices work as a compact segmented control on touch screens too. */
.music-source-picker{display:flex;gap:6px;margin:0 0 18px;padding:4px;border-radius:var(--radius-control);background:#f0f0f3}
.music-source-picker button{flex:1;min-width:0;min-height:42px;padding:9px 10px;border-radius:10px;background:transparent;color:var(--muted);font-size:13px}
.music-source-picker button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 5px #00000012;font-weight:600}
.music-search-label{margin-top:4px}
#editor-player:empty{display:none}

/* Give the live letter more room without shrinking the editor below usability. */
@media(min-width:1101px){.workspace{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px}.letter-card{min-height:clamp(680px,72vh,900px)}}
@media(max-width:600px){.lane-track.lane-sparse .lane-group{padding-inline:12px}.lane-track.lane-sparse .browse-card{flex-basis:100%;min-height:290px}.letter-lane.sparse-lane{min-height:300px}.music-source-picker{gap:3px}.music-source-picker button{font-size:12px;padding-inline:5px}}

/* Keep the full message and show the exact 4:3 photo crop that is sent. */
.letter-body{max-height:none;overflow:visible}
.letter-photo{height:auto;max-height:none;aspect-ratio:4/3;object-fit:contain;border-radius:12px}
.browse-excerpt.font-sans{font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.browse-excerpt.font-serif{font-family:Georgia,serif}
.browse-excerpt.font-mono{font-family:ui-monospace,monospace}
.browse-excerpt.font-hand{font-family:Caveat,cursive}
.browse-excerpt.font-rounded{font-family:Nunito,ui-rounded,sans-serif}
.browse-excerpt.font-romantic{font-family:Playfair,Georgia,serif;font-style:italic}
.browse-excerpt strong{font-weight:700}.browse-excerpt em{font-style:italic}
.image-crop-viewport{position:relative;aspect-ratio:4/3;overflow:hidden}
.image-crop-viewport img{display:block;object-fit:cover}
.image-markup{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none}
.image-crop-viewport.draw-mode{cursor:crosshair}
.image-crop-viewport.draw-mode .image-markup{pointer-events:auto}
.photo-edit-tools{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:14px 0}
.photo-edit-tools>button{min-height:40px;padding:8px 12px;font-size:13px}
.photo-edit-tools>button[aria-pressed=true]{background:#e7f1ff;border-color:#a9c8ed;color:#0058bd}
.photo-edit-tools>label{display:grid;gap:5px;margin:0;font-size:12px;color:var(--muted)}
.photo-edit-tools input[type=color]{width:48px;height:38px;min-height:38px;padding:3px;border:1px solid var(--line);border-radius:9px;background:#fff}
.photo-edit-tools input[type=range]{width:95px;min-height:20px;accent-color:var(--blue)}
.photo-edit-tools output{float:right;color:var(--ink);font-variant-numeric:tabular-nums}
.image-editor-dialog{max-height:94vh;overflow:auto}
@media(max-width:600px){.photo-edit-tools{gap:7px}.photo-edit-tools>button{flex:1 1 auto}.photo-edit-tools input[type=range]{width:82px}}

/* Date, history, lanes, and editor controls refinements. */
.letter-sent-time{font-variant-numeric:tabular-nums;letter-spacing:.015em;text-transform:none;white-space:nowrap}
.history-card .history-date{font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.045em;margin:2px 0 4px}
.history-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;line-height:1.5}
.lane-group{min-width:100vw}
.lane-track.lane-sparse .lane-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));width:min(100%,1160px);min-width:0;justify-content:center;padding-inline:18px}
.browse-card{flex-basis:clamp(350px,31vw,430px);min-height:clamp(280px,28vw,350px)}
.browse-excerpt{font-size:clamp(23px,2.1vw,29px);line-height:1.48}
.lane-track.lane-sparse .browse-card{width:100%;min-height:clamp(330px,38vw,440px);flex:initial}
select{background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;padding-block:12px;line-height:1.35}
input[type=range]{appearance:none;-webkit-appearance:none;height:32px;min-height:32px;padding:0;background:transparent;accent-color:var(--blue);cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#d7d9df}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:1px solid #d4d7de;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#d7d9df}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:1px solid #d4d7de;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002}
.photo-edit-tools{align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:#f8f9fb;gap:9px}
.photo-edit-tools>button{min-height:42px;border-radius:12px;padding:8px 12px}
.photo-color-picker,.pen-width-control{display:grid;gap:7px;margin:0!important;font-size:12px!important;color:var(--muted)}
.photo-color-options{display:flex;align-items:center;gap:6px}
.photo-edit-tools .ink-swatch{width:25px;height:25px;min-height:25px;flex:0 0 25px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #c9ccd3}
.photo-edit-tools .ink-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--blue)}
.photo-edit-tools input[type=color]{width:34px;height:34px;min-height:34px;padding:2px;border-radius:50%;overflow:hidden}
.photo-edit-tools .pen-width-control{grid-template-columns:auto auto;align-items:center;min-width:150px}
.photo-edit-tools .pen-width-control output{justify-self:end}
.photo-edit-tools .pen-width-control input[type=range]{grid-column:1/-1;width:100%;min-height:26px}
.photo-edit-tools output{float:none;font-variant-numeric:tabular-nums}
.image-editor-dialog #image-zoom{margin-top:2px}
@media(max-width:600px){.browse-card{flex-basis:min(84vw,360px);min-height:270px}.browse-excerpt{font-size:24px}.lane-track.lane-sparse .lane-group{grid-template-columns:minmax(0,1fr);padding-inline:12px}.lane-track.lane-sparse .browse-card{min-height:310px}.photo-edit-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}.photo-color-picker,.pen-width-control{min-width:0}.photo-edit-tools .pen-width-control{grid-template-columns:1fr auto}.photo-edit-tools .pen-width-control input[type=range]{grid-column:1/-1}.photo-edit-tools>button{width:100%}.photo-edit-tools #clear-photo-drawing{grid-column:1/-1}}

/* Browse lanes keep a seamless loop even when only a few real public letters exist. */
.letter-lane.sparse-lane{height:clamp(330px,38vw,440px);min-height:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.letter-lane .lane-track.lane-sparse{position:absolute;inset:0 auto auto 0;width:max-content;justify-content:initial;animation:lane-left 70s linear infinite;will-change:transform}
.letter-lane.lane-right .lane-track.lane-sparse{animation-name:lane-right;animation-duration:78s}
.lane-track.lane-sparse .lane-group{display:flex;align-items:stretch;justify-content:center;gap:clamp(14px,1.5vw,22px);width:max-content;min-width:100vw;max-width:none;padding-inline:18px}
.lane-track.lane-sparse .browse-card{width:clamp(350px,31vw,430px);min-height:clamp(300px,31vw,390px);flex:0 0 clamp(350px,31vw,430px)}
.lane-empty{display:grid;justify-items:center;gap:10px;padding:38px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:0 5px 24px #00000006}
.lane-empty-note{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#edf3ff;color:var(--blue);font-size:22px}
.lane-empty h2{font-size:clamp(20px,3vw,26px);letter-spacing:-.04em}.lane-empty p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;text-align:center}
.selected-song{position:relative;padding-right:54px}.selected-song-remove{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:32px;height:32px;min-height:32px;border:0;border-radius:50%;background:#fff;color:#555;font-size:21px;line-height:1}.selected-song-remove:hover{background:#dcecff;color:var(--blue)}
.letter-card.lavender{--letter-bg:#f0eafb;--letter-fg:#302545;--letter-muted:#746687;--letter-line:#30254522;--letter-accent:#7352a3;--letter-song:#fff8}
.letter-card.sunset{--letter-bg:#fff0df;--letter-fg:#43291d;--letter-muted:#86614a;--letter-line:#43291d22;--letter-accent:#b95e36;--letter-song:#fff8}
.letter-card.cloud{--letter-bg:#e9f3fb;--letter-fg:#203247;--letter-muted:#63778b;--letter-line:#20324722;--letter-accent:#3f76aa;--letter-song:#fff8}
.letter-card.sage{--letter-bg:#e9efe5;--letter-fg:#29372b;--letter-muted:#687769;--letter-line:#29372b22;--letter-accent:#587758;--letter-song:#fff8}
.theme-swatch.lavender{--letter-bg:#f0eafb;--letter-fg:#302545}.theme-swatch.sunset{--letter-bg:#fff0df;--letter-fg:#43291d}.theme-swatch.cloud{--letter-bg:#e9f3fb;--letter-fg:#203247}.theme-swatch.sage{--letter-bg:#e9efe5;--letter-fg:#29372b}
@media(max-width:600px){.letter-lane.sparse-lane{height:330px}.lane-track.lane-sparse .lane-group{grid-template-columns:none;padding-inline:0}.lane-track.lane-sparse .browse-card{width:min(84vw,360px);min-height:300px;flex-basis:min(84vw,360px)}}

/* Browse cards keep their real-letter text aligned and legible on narrow viewports. */
.lane-heading{width:100%;max-width:1320px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;text-align:left}
.lane-heading>span:last-child{white-space:nowrap;text-align:right;flex:0 0 auto}
.letter-lanes{min-width:0}
.lane-track,.lane-group{align-items:stretch}
.browse-card{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.browse-card-head{display:flex;align-items:flex-start;min-width:0}
.browse-excerpt{width:auto;min-width:0;text-align:left;align-self:start;line-height:1.45}
.letter-lane.sparse-lane .lane-track{height:100%}
.letter-lane.sparse-lane .lane-group{height:100%;align-items:stretch;justify-content:flex-start}
.letter-lane.sparse-lane .browse-card{height:calc(100% - 4px)}

/* Keep the editor tools on a consistent grid instead of uneven wrapped flex rows. */
.photo-edit-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-control);background:#f8f9fb}
.photo-edit-tools>button{width:100%;min-width:0;min-height:44px;padding:8px 10px;white-space:nowrap}
.photo-edit-tools .photo-color-picker{grid-column:span 2;min-width:0}
.photo-edit-tools .photo-color-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.photo-edit-tools .pen-width-control{grid-column:span 2;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px}
.photo-edit-tools .pen-width-control input[type=range]{grid-column:1/-1;width:100%;min-height:30px}
.photo-edit-tools #clear-photo-drawing{justify-self:start;width:auto}
.letter-photo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;width:100%;margin:20px 0}
.letter-photo-gallery[hidden]{display:none!important}
.letter-photo-gallery .letter-photo{width:100%;height:auto;max-height:560px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-control)}
.reader-view .letter-card:not(#live-letter),.reader-view .letter-card:not(#live-letter) *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.catalog-search{border-bottom:0;padding-bottom:0;margin-bottom:0}
.catalog-search.has-selection{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:23px}
.music-search-form{display:flex;align-items:stretch;gap:10px}
.music-search-form input{flex:1;min-width:0}
.music-search-form button{min-width:104px}
.music-suggestions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 18px;color:var(--muted);font-size:13px}
.music-suggestions>span{margin-right:2px}
.music-suggestions button{padding:7px 11px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--muted);font-size:13px}
.music-suggestions button:hover{border-color:#b9d4f8;color:var(--blue)}
@media(max-width:430px){.music-search-form button{min-width:82px;padding-inline:13px}.music-suggestions{gap:7px}}
@media(max-width:600px){.photo-edit-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}.photo-edit-tools .photo-color-picker,.photo-edit-tools .pen-width-control{grid-column:1/-1}.photo-edit-tools .photo-color-options{justify-content:flex-start}.lane-heading{gap:10px}.lane-heading>span:first-child{letter-spacing:.07em}}

/* Keep the marquee gapless on wide screens by looping over card content, not viewport width. */
.letter-lane .lane-track .lane-group{width:max-content;min-width:max-content;flex:0 0 max-content}

/* Responsive Browse cards: their content and marquee are measured in CSS pixels,
   so browser zoom changes the viewport and the rows rebuild without losing letters. */
.browse-card{flex-basis:clamp(360px,34vw,480px);min-height:clamp(320px,31vw,410px);grid-template-rows:auto auto 1fr auto;border-radius:24px;box-shadow:0 7px 24px #1720330d;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease}
.browse-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px #17203320;border-color:#d2d9e8}
.browse-card-title{min-width:0}
.browse-title{padding:13px 23px 0;margin:0;color:#25252b;font-size:clamp(20px,2vw,25px);font-weight:650;letter-spacing:-.045em;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.browse-excerpt{margin-top:14px;margin-bottom:20px;line-height:1.4;-webkit-line-clamp:5}
.lane-heading{max-width:1440px}
.letter-lane{height:clamp(340px,34vw,430px)}
.lane-track{animation-duration:64s}
.lane-right .lane-track{animation-duration:72s}
.lane-track:hover,.letter-lane:focus-within .lane-track{animation-play-state:paused}
.letter-lane .browse-card:focus-visible{outline-offset:-5px}
.letter-photo-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(145px,22vw,300px);gap:clamp(9px,1.5vw,16px);margin:clamp(22px,4vw,40px) 0;width:100%;overflow:hidden;border-radius:18px}
.letter-photo-gallery .letter-photo{width:100%;height:100%;max-height:none;min-width:0;min-height:0;aspect-ratio:auto;object-fit:cover;margin:0;border-radius:14px;box-shadow:0 8px 24px #00000014}
.letter-photo-gallery[data-count="1"]{grid-template-columns:minmax(0,1fr);grid-auto-rows:clamp(240px,38vw,480px)}
.letter-photo-gallery[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(180px,28vw,380px)}
.letter-photo-gallery[data-count="3"] .letter-photo:first-child{grid-row:span 2}
.letter-photo-gallery[data-count="5"] .letter-photo:first-child{grid-row:span 2}
.music-provider-group{padding:14px 14px 4px;margin:10px 0;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#fff,#fafbfe);box-shadow:0 4px 16px #18274108}
.music-provider-group h3{margin:0 0 4px;font-size:13px;letter-spacing:.01em;color:var(--muted)}
.music-provider-group .music-result:last-child{border-bottom:0}
.provider-search-note{font-size:12px;line-height:1.55;color:var(--muted);margin:7px 0 12px}
.youtube-search-group .secondary-button{display:inline-flex;align-items:center;min-height:38px;margin:4px 0 0;padding:8px 12px;font-size:12px}
.music-result,.music-provider-group,.browse-card,.letter-photo{transition:box-shadow .25s ease,transform .25s ease}
.music-result:hover{background:#f8faff}
.song-result-button:hover strong{color:var(--blue)}
@media(max-width:900px){.browse-card{flex-basis:clamp(330px,62vw,450px)}.letter-lane{height:clamp(320px,48vw,400px)}}
@media(max-width:600px){.browse-card{flex-basis:min(86vw,400px);min-height:300px}.browse-title{padding-inline:17px}.browse-excerpt{font-size:24px;margin-inline:17px}.letter-lane{height:320px}.letter-photo-gallery{grid-auto-rows:clamp(130px,34vw,220px);gap:9px;border-radius:14px}.letter-photo-gallery[data-count="1"]{grid-auto-rows:clamp(220px,64vw,360px)}.letter-photo-gallery[data-count="2"]{grid-auto-rows:clamp(160px,44vw,260px)}.letter-photo-gallery .letter-photo{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.browse-card:hover{transform:none}}

/* Final responsive polish: theme-faithful, dated, fully clickable Browse cards. */
.browse-card{position:relative;z-index:0;cursor:pointer;pointer-events:auto;grid-template-rows:auto auto 1fr auto auto;background:var(--browse-bg,#fff);color:var(--browse-fg,#1d1d1f);border-color:var(--browse-line,#dedee3);text-align:left;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .25s ease,filter .25s ease}
.browse-card.midnight{--browse-bg:#182741;--browse-fg:#f5f5f7;--browse-muted:#b4bdd0;--browse-line:#ffffff26;--browse-footer:#ffffff0c}
.browse-card.paper{--browse-bg:#f8f5ed;--browse-fg:#34312c;--browse-muted:#6e675c;--browse-line:#34312c20;--browse-footer:#fff8}
.browse-card.rose{--browse-bg:#f9e9ee;--browse-fg:#592638;--browse-muted:#875d6c;--browse-line:#59263825;--browse-footer:#fff5}
.browse-card.forest{--browse-bg:#163b32;--browse-fg:#f2f4e8;--browse-muted:#b6c6b7;--browse-line:#ffffff26;--browse-footer:#ffffff0c}
.browse-card.lavender{--browse-bg:#f0eafb;--browse-fg:#302545;--browse-muted:#746687;--browse-line:#30254522;--browse-footer:#fff8}
.browse-card.sunset{--browse-bg:#fff0df;--browse-fg:#43291d;--browse-muted:#86614a;--browse-line:#43291d22;--browse-footer:#fff8}
.browse-card.cloud{--browse-bg:#e9f3fb;--browse-fg:#203247;--browse-muted:#63778b;--browse-line:#20324722;--browse-footer:#fff8}
.browse-card.sage{--browse-bg:#e9efe5;--browse-fg:#29372b;--browse-muted:#687769;--browse-line:#29372b22;--browse-footer:#fff8}
.browse-card .browse-recipient{color:var(--browse-fg);background:color-mix(in srgb,var(--browse-bg),var(--browse-fg) 7%);border-color:var(--browse-line)}
.browse-card .browse-title,.browse-card .browse-excerpt{color:var(--browse-fg)}
.browse-card .browse-song{background:var(--browse-footer);border-color:var(--browse-line)}
.browse-card .browse-song-detail small,.browse-card .browse-provider{color:var(--browse-muted)}
.browse-card .browse-note-icon{background:color-mix(in srgb,var(--browse-bg),#788dee 18%);color:var(--browse-fg)}
.browse-card-date{display:block;justify-self:end;padding:0 18px 13px;color:var(--browse-muted,#74747b);font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.025em;white-space:nowrap}
.browse-card .browse-excerpt.font-sans{font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.browse-card .browse-excerpt.font-serif{font-family:Georgia,serif}
.browse-card .browse-excerpt.font-mono{font-family:ui-monospace,monospace}
.browse-card .browse-excerpt.font-hand{font-family:Caveat,cursive}
.browse-card .browse-excerpt.font-casual{font-family:'Bradley Hand','Comic Sans MS',cursive;font-style:italic}
.browse-card .browse-excerpt.font-marker{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:600;letter-spacing:.01em}
.browse-card .browse-excerpt.font-rounded{font-family:Nunito,ui-rounded,sans-serif}
.browse-card .browse-excerpt.font-romantic{font-family:Playfair,Georgia,serif;font-style:italic}
.browse-card:hover{z-index:2;filter:saturate(1.04);transform:translateY(-6px) scale(1.012);box-shadow:0 20px 46px #17203326}
.browse-card:active{transform:translateY(-2px) scale(.995)}
.browse-card:focus-visible{z-index:3;outline:3px solid #0071e3;outline-offset:-5px}
.lane-track .browse-card[aria-hidden=true]{pointer-events:auto}
.letter-card.font-casual :is(.letter-body,h2,.letter-signoff,.letter-to){font-family:'Bradley Hand','Comic Sans MS',cursive;font-style:italic}
.letter-card.font-marker :is(.letter-body,h2,.letter-signoff,.letter-to){font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:600;letter-spacing:.01em}
.rich-heading{display:block;margin:.45em 0;font-size:1.2em;line-height:1.25;letter-spacing:-.025em}
.rich-list-item{display:block;padding-left:1.25em;position:relative}
.letter-body s{text-decoration-thickness:.08em;text-decoration-color:var(--letter-accent)}
.rich-list-item::before{content:'•';position:absolute;left:.15em;color:var(--letter-accent,#0071e3)}
.format-toolbar button{transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.format-toolbar button:hover{background:#e4edfb;box-shadow:0 3px 10px #18274112;transform:translateY(-1px)}
.photo-selection{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 18px}
.photo-selection-item{position:relative;width:clamp(74px,18vw,112px);aspect-ratio:1;border:1px solid var(--line);border-radius:14px;overflow:visible;background:#f4f5f8;box-shadow:0 5px 16px #17203310}
.photo-selection-item img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Palette fills are stylesheet rules because the site's CSP blocks inline style attributes. */
.background-color-swatch{background-color:#f4ebdd;background-image:none}
.background-color-swatch.color-paper{background-color:#f4ebdd}
.background-color-swatch.color-sage{background-color:#e6efe8}
.background-color-swatch.color-blue{background-color:#e7edf7}
.background-color-swatch.color-pink{background-color:#f5e7ec}
.background-color-swatch.color-lavender{background-color:#eee9f7}
.background-color-swatch.color-amber{background-color:#f7ebd8}
.photo-edit-tools .ink-swatch{background:#25252a}
.photo-edit-tools .ink-swatch.ink-black{background:#25252a}
.photo-edit-tools .ink-swatch.ink-red{background:#e63946}
.photo-edit-tools .ink-swatch.ink-blue{background:#1677d2}
.photo-edit-tools .ink-swatch.ink-green{background:#2e8b57}
.theme-picker-tools{display:flex;align-items:center;gap:12px;margin:0 0 15px}
.theme-picker-tools select{width:auto;min-width:150px;min-height:40px;padding:8px 38px 8px 12px;font-size:14px;background-color:#fafafc;background-position:calc(100% - 16px) 17px,calc(100% - 10px) 17px}
#theme-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.theme-grid{gap:15px 14px}
.theme-option{min-width:0}
.theme-option .theme-swatch{height:58px;margin-bottom:8px;border-radius:12px;font-size:27px}
.theme-option .theme-name{display:block;margin:0;color:var(--ink);font-size:14px;font-weight:550;line-height:1.35}
.theme-option small{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.35}
.theme-option[hidden]{display:none!important}
.theme-swatch.midnight{--letter-bg:#182741;--letter-fg:#f5f5f7}
.theme-swatch.paper{--letter-bg:#f8f5ed;--letter-fg:#34312c}
.theme-swatch.rose{--letter-bg:#f9e9ee;--letter-fg:#592638}
.theme-swatch.forest{--letter-bg:#163b32;--letter-fg:#f2f4e8}
.theme-swatch.gray{--letter-bg:#e8e9ed;--letter-fg:#30323a}
.theme-swatch.red{--letter-bg:#873843;--letter-fg:#fff5f4}
.theme-swatch.blue{--letter-bg:#dbeafa;--letter-fg:#183652}
.theme-swatch.pink{--letter-bg:#f8dce8;--letter-fg:#57263d}
.theme-swatch.ocean{--letter-bg:#1d4853;--letter-fg:#f2fbfc}
.theme-swatch.brown{--letter-bg:#6b4a36;--letter-fg:#fff8f1}
.photo-ink-help{margin:-5px 0 10px;color:var(--muted);font-size:11px;line-height:1.4}
.theme-swatch.lavender{--letter-bg:#f0eafb;--letter-fg:#302545}
.theme-swatch.sunset{--letter-bg:#fff0df;--letter-fg:#43291d}
.theme-swatch.cloud{--letter-bg:#e9f3fb;--letter-fg:#203247}
.theme-swatch.sage{--letter-bg:#e9efe5;--letter-fg:#29372b}
.theme-swatch.citrus{--letter-bg:#fff0e7;--letter-fg:#482b20}
.theme-swatch.marigold{--letter-bg:#fff6d9;--letter-fg:#453810}
.theme-swatch.onyx{--letter-bg:#24262d;--letter-fg:#f5f5f7}
.theme-swatch.snow{--letter-bg:#fff;--letter-fg:#292c32}
.theme-swatch.crimson{--letter-bg:#5C0701;--letter-fg:#fff8f6}
.theme-swatch.deep-harbor{--letter-bg:#133C55;--letter-fg:#f7fbfd}
.theme-swatch.atlantic{--letter-bg:#386FA4;--letter-fg:#fff}
.theme-swatch.mauve{--letter-bg:#D1B1CB;--letter-fg:#34283a}
.theme-swatch.graphite{--letter-bg:#191a1e;--letter-fg:#f4f4f5}
@media(max-width:430px){.theme-grid{gap:13px 11px}.theme-option .theme-swatch{height:52px}.theme-picker-tools select{min-width:130px}}
.photo-remove-one{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:28px;height:28px;min-height:28px;padding:0;border:2px solid #fff;border-radius:50%;background:#242832;color:#fff;font-size:20px;line-height:1;box-shadow:0 3px 9px #0003;transition:transform .2s ease,background .2s ease}
.photo-remove-one:hover{background:#bd3142;transform:scale(1.08)}
#photo-layout-control{margin:0 0 18px}#photo-layout-control[hidden]{display:none!important}
#photo-layout-control select{max-width:100%}
#theme-settings:disabled{opacity:.48}
#theme-settings:disabled .theme-option{cursor:not-allowed}
#theme-settings:disabled .theme-option input{pointer-events:none}
#theme-disabled-note{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#f5f6f8}
.letter-photo-gallery[data-layout="stack"]{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;overflow:visible}
.letter-photo-gallery[data-layout="stack"] .letter-photo{height:auto;aspect-ratio:16/10;object-fit:cover}
.letter-photo-gallery[data-layout="overlap"]{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0;overflow:visible;padding:clamp(8px,2vw,22px)}
.letter-photo-gallery[data-layout="overlap"] .letter-photo{width:min(62%,520px);height:auto;aspect-ratio:4/3;flex:0 1 62%;margin:clamp(-25px,-2vw,-8px);transform:rotate(-2deg);position:relative;z-index:1;box-shadow:0 18px 35px #1114;transition:transform .25s ease,z-index .1s}
.letter-photo-gallery[data-layout="overlap"] .letter-photo:nth-child(even){transform:rotate(2deg) translateY(5px)}
.letter-photo-gallery[data-layout="overlap"] .letter-photo:hover{z-index:2;transform:rotate(0) scale(1.035)}
@media(max-width:600px){.browse-card-date{padding-inline:15px}.letter-photo-gallery[data-layout="overlap"] .letter-photo{width:78%;flex-basis:78%;margin:-10px}}
@media(prefers-reduced-motion:reduce){.browse-card,.browse-card:hover,.browse-card:active,.photo-remove-one,.format-toolbar button{transition:none;transform:none;filter:none}}

/* Zoom-resilient marquee: stable card height, room for hover shadows, and no clipped edges. */
.letter-lane{height:clamp(370px,38vw,500px);overflow:hidden;padding-block:14px;margin-bottom:28px;mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.letter-lane .lane-track{top:14px;bottom:14px;animation-duration:var(--lane-duration,64s)}
.letter-lane.lane-right .lane-track{animation-duration:var(--lane-duration,72s)}
.letter-lane .lane-group{height:100%;gap:clamp(20px,2vw,34px);padding-right:clamp(20px,2vw,34px)}
.letter-lane .browse-card{height:100%;min-height:0;margin:0;flex-basis:clamp(370px,36vw,510px);overflow:hidden;grid-template-rows:auto auto minmax(0,1fr) auto auto}
.letter-lanes{padding-bottom:24px}
.letter-lane:last-child{margin-bottom:0}
.browse-card:hover{z-index:4;filter:saturate(1.035);transform:translateY(-4px);box-shadow:0 22px 48px #17203326}
.browse-card:active{transform:translateY(-1px)}
.browse-card .browse-song{margin-top:8px;min-height:78px;padding:14px 20px;gap:14px}
.browse-card-date{padding:10px 20px 14px;margin-top:4px;border-top:1px solid var(--browse-line);font-size:12px}
.browse-card .browse-excerpt{padding-inline:3px;margin-inline:20px;line-height:1.42}
.history-list{gap:22px}
.history-card{display:flex;flex-direction:column;min-width:0;gap:13px;padding:23px;border:1px solid var(--line);background:linear-gradient(155deg,#fff 0%,#fbfcff 100%);box-shadow:0 5px 18px #1827410a;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.history-card:hover{transform:translateY(-4px);border-color:#cbd8ed;box-shadow:0 16px 32px #18274117}
.history-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.history-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.history-sent{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.history-card .history-date{margin:0;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.04em}
.history-card .history-excerpt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6;color:#565963}
.history-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.history-loading{grid-column:1/-1;padding:16px}
.browse-card,.browse-card *, .history-card,.history-card *, .result-card,.result-card *, .letter-card,.letter-card *,#find-results .result-card,#find-results .result-card *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.browse-card-date,.history-sent{font-variant-numeric:tabular-nums}
.image-crop-viewport img{pointer-events:none}
.image-crop-viewport .crop-grid{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:linear-gradient(to right,transparent calc(33.333% - .75px),#111b calc(33.333% - .75px),#111b calc(33.333% + .75px),transparent calc(33.333% + .75px),transparent calc(66.666% - .75px),#111b calc(66.666% - .75px),#111b calc(66.666% + .75px),transparent calc(66.666% + .75px)),linear-gradient(to bottom,transparent calc(33.333% - .75px),#111b calc(33.333% - .75px),#111b calc(33.333% + .75px),transparent calc(33.333% + .75px),transparent calc(66.666% - .75px),#111b calc(66.666% - .75px),#111b calc(66.666% + .75px),transparent calc(66.666% + .75px));filter:drop-shadow(0 1px 1px #fff) drop-shadow(0 -1px 1px #0009)}
@media(max-width:900px){.letter-lane{height:clamp(350px,45vw,450px)}.letter-lane .browse-card{flex-basis:clamp(340px,64vw,470px)}}
@media(max-width:600px){.letter-lane{height:330px;padding-block:10px;margin-bottom:20px}.letter-lane .lane-track{top:10px;bottom:10px}.letter-lane .browse-card{height:100%;flex-basis:min(86vw,410px)}.letter-lane .lane-group{gap:16px;padding-right:16px}.browse-card .browse-song{min-height:66px;padding:10px 14px}.browse-card-date{padding:8px 14px 11px}.history-card{padding:18px}.history-card-head{align-items:flex-start;flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){.browse-card:hover,.browse-card:active,.history-card:hover{transform:none}}

/* Compact Browse cards follow the reference's calm, many-letter wall. */
.letter-lane{height:clamp(270px,27vw,330px);margin-bottom:22px}
.letter-lane .lane-track{top:10px;bottom:10px}
.letter-lane .lane-group{gap:clamp(12px,1vw,20px);padding-right:clamp(12px,1vw,20px)}
.letter-lane .browse-card{flex-basis:clamp(215px,12vw,270px);grid-template-rows:auto auto minmax(0,1fr) auto;border-radius:18px}
.browse-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;padding:15px 15px 0}
.browse-card .browse-recipient{min-width:0;max-width:100%;margin:0;padding:6px 10px;font-size:11px}
.browse-card-date{display:block;justify-self:end;align-self:start;max-width:120px;padding:5px 0;margin:1px 0 0;border:0;text-align:right;white-space:normal;overflow-wrap:normal;font-size:clamp(9px,.72vw,11px);line-height:1.25;font-variant-numeric:tabular-nums}
.browse-card .browse-title{padding:12px 15px 0;font-size:clamp(16px,1.25vw,20px);line-height:1.2}
.browse-card .browse-excerpt{margin:11px 15px 13px;padding:0;font-size:clamp(17px,1.35vw,21px);line-height:1.38;-webkit-line-clamp:4}
.browse-card .browse-song{display:flex;min-height:58px;margin:0 10px 10px;padding:8px 10px;gap:9px;border:1px solid var(--browse-line);border-radius:12px;background:var(--browse-footer);box-shadow:0 2px 7px #1720330c;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.browse-card:hover .browse-song{transform:translateY(-1px);box-shadow:0 5px 12px #17203312}
.browse-card .browse-art,.browse-card .browse-note-icon{width:34px;height:34px;flex-basis:34px;border-radius:7px}
.browse-card .browse-song-detail{gap:2px}
.browse-card .browse-song-detail strong{font-size:11px;line-height:1.3}
.browse-card .browse-song-detail small{font-size:10px}
.browse-card .browse-provider{font-size:16px}
.history-card{height:100%;display:grid;grid-template-rows:auto auto minmax(5.5em,1fr) auto;align-content:stretch;gap:13px}
.history-card-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,45%);align-items:start;gap:12px}
.history-card-head .result-to{min-width:0;margin:0;padding-top:2px}
.history-sent{max-width:100%;white-space:normal;text-align:right;line-height:1.3;overflow-wrap:anywhere}
.history-card .history-date{min-width:0;line-height:1.2;overflow-wrap:anywhere}
.history-card .history-excerpt{min-width:0;margin:0;align-self:start}
.history-meta{align-self:end;min-width:0;overflow-wrap:anywhere}
.history-song{display:inline-flex;align-items:center;min-height:36px;padding:7px 11px;border:1px solid var(--line);border-radius:11px;background:#f7f8fb;color:var(--ink);font-weight:550;line-height:1.35;transition:background .2s ease,border-color .2s ease,color .2s ease}
.history-card:hover .history-song{background:#edf4ff;border-color:#c7dcf8;color:#145da8}
@media(max-width:900px){.letter-lane{height:clamp(260px,32vw,310px)}.letter-lane .browse-card{flex-basis:clamp(230px,28vw,270px)}}
@media(max-width:600px){.letter-lane{height:300px;margin-bottom:18px}.letter-lane .browse-card{flex-basis:min(78vw,310px)}.browse-card-head{padding:14px 13px 0}.browse-card .browse-title{padding-inline:13px;font-size:18px}.browse-card .browse-excerpt{margin-inline:13px;font-size:19px}.browse-card-date{max-width:112px;font-size:10px}.history-card{grid-template-rows:auto auto minmax(5.5em,1fr) auto;padding:18px}.history-card-head{grid-template-columns:minmax(0,1fr) minmax(0,45%);align-items:start;flex-direction:initial}.history-sent{font-size:11px}}
.letter-lane .browse-card{grid-template-rows:minmax(0,1fr) auto}
.browse-open{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0;overflow:hidden;color:inherit}
.browse-open:not(.has-title){grid-template-rows:auto minmax(0,1fr)}
.browse-song-link{color:inherit;text-decoration:none}
.browse-song-link:focus-visible,.history-song:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.history-card{grid-template-rows:minmax(0,1fr) auto}
.history-open{display:grid;grid-template-rows:auto auto minmax(5.5em,1fr);align-content:start;gap:13px;min-width:0;color:inherit}
.history-open:not(.has-title){grid-template-rows:auto minmax(5.5em,1fr)}
.history-card:focus-within{outline:3px solid #0071e34d;outline-offset:3px}
.history-song{text-decoration:none}
@media(max-width:600px){.history-card{grid-template-rows:minmax(0,1fr) auto}}

/* Slightly roomier Browse cards keep the receiver and sent date readable. */
.letter-lane{height:clamp(285px,29vw,340px)}
.letter-lane .lane-group{gap:clamp(14px,1.15vw,22px);padding-right:clamp(14px,1.15vw,22px)}
.letter-lane .browse-card{flex-basis:clamp(255px,15vw,310px)}
.browse-card-head{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:10px;padding:15px 16px 0}
.browse-card .browse-recipient{justify-self:start;min-width:0;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}
.browse-card-date{justify-self:end;max-width:100%;padding-right:2px;text-align:right;line-height:1.25}
@media(max-width:900px){.letter-lane{height:clamp(270px,34vw,320px)}.letter-lane .browse-card{flex-basis:clamp(255px,32vw,310px)}}
@media(max-width:600px){.letter-lane{height:300px}.letter-lane .browse-card{flex-basis:min(86vw,340px)}.browse-card-head{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:8px;padding:14px 13px 0}.browse-card .browse-recipient{font-size:11px}.browse-card-date{max-width:100%;font-size:10px}}

/* Full-bleed responsive Browse wall, with excerpts constrained so music stays anchored. */
.letter-lanes{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding-inline:clamp(20px,3vw,64px)}
.letter-lane{height:clamp(300px,30vw,370px)}
.letter-lane .browse-card{flex-basis:clamp(280px,19vw,390px)}
.letter-lane .lane-track{animation-duration:var(--lane-duration,52s)}
.letter-lane.lane-right .lane-track{animation-duration:var(--lane-duration,52s)}
.browse-open{min-width:0}
.browse-card .browse-title{min-width:0;max-width:100%;overflow-wrap:anywhere;font-size:clamp(17px,1.4vw,21px)}
.browse-card .browse-excerpt{display:-webkit-box;min-width:0;max-width:100%;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.history-card .history-excerpt{display:-webkit-box;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.result-card>p:not(.result-to){display:-webkit-box;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.browse-card-head{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
.browse-card-date{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.browse-card .browse-recipient{overflow-wrap:anywhere}
.letter-photo-gallery .letter-photo{cursor:zoom-in}
.photo-viewer{position:fixed;width:min(94vw,1500px);height:min(92dvh,1100px);max-width:none;max-height:none;padding:54px 18px 18px;border:0;border-radius:20px;background:#111e;color:#fff;overflow:hidden}
.photo-viewer::backdrop{background:#10131acc;backdrop-filter:blur(9px)}
.photo-viewer img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}
.photo-viewer-close{position:absolute;z-index:2;top:12px;right:15px;width:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:#fff;color:#17171b;font-size:28px;line-height:1;cursor:pointer}
@media(max-width:900px){.letter-lanes{padding-inline:clamp(16px,2vw,28px)}.letter-lane{height:clamp(280px,34vw,340px)}.letter-lane .browse-card{flex-basis:clamp(260px,35vw,340px)}}
@media(max-width:600px){.letter-lanes{width:100vw;margin-left:calc(50% - 50vw);padding-inline:0}.letter-lane{height:300px}.letter-lane .browse-card{flex-basis:min(86vw,360px)}.browse-card-head{grid-template-columns:minmax(0,1fr) minmax(0,42%)}.photo-viewer{width:100vw;height:100dvh;padding:60px 10px 12px;border-radius:0}}

/* Keep the moving letter wall legible as desktop browser zoom changes the CSS viewport. */
@media(min-width:901px){
  .letter-lane{height:clamp(320px,32vw,62vh)}
  .letter-lane .browse-card{flex-basis:clamp(300px,22vw,62vh)}
}

/* Responsive wall and archive refinements. Viewport units keep the cards a
   consistent physical size when browser zoom changes the CSS viewport. */
.letter-lanes{width:100vw;margin-left:calc(50% - 50vw);padding-inline:clamp(18px,3vw,64px)}
.letter-lane{height:clamp(300px,24vw,700px);margin-bottom:clamp(16px,2vw,34px)}
.letter-lane .browse-card{flex-basis:clamp(280px,24vw,580px);border-radius:22px}
.letter-lane .lane-group{gap:clamp(14px,1.5vw,26px);padding-right:clamp(14px,1.5vw,26px)}
.browse-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;padding:clamp(14px,1.5vw,22px) clamp(15px,1.6vw,24px) 0}
.browse-card .browse-recipient{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.browse-card-date{max-width:46%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.browse-card .browse-title{padding-inline:clamp(15px,1.6vw,34px);margin-top:12px;font-size:clamp(18px,1.5vw,42px)}
.browse-open{grid-template-rows:auto auto minmax(0,1fr);height:100%;align-content:stretch}
.browse-open.has-title{grid-template-rows:auto auto auto minmax(0,1fr)}
.browse-card .browse-excerpt{margin:10px clamp(15px,1.6vw,34px) 16px;-webkit-line-clamp:4;font-size:clamp(25px,2.1vw,64px);line-height:1.3}
.browse-card.has-photos .browse-excerpt{-webkit-line-clamp:2}
.browse-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;height:clamp(54px,6vw,176px);margin:9px clamp(15px,1.6vw,34px) 0;overflow:hidden;border-radius:10px}
.browse-photos .letter-photo{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;margin:0;border-radius:0}
.browse-photos[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.browse-photos[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}
.browse-photos[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
.browse-photos[data-layout="stack"] .letter-photo:nth-child(n+4){display:none}
.browse-photos[data-layout="overlap"]{display:flex;align-items:center;padding:5px 7px;background:#0000000b}
.browse-photos[data-layout="overlap"] .letter-photo{width:29%;height:90%;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 8px #0003}
.browse-photos[data-layout="overlap"] .letter-photo:nth-child(2){transform:rotate(-5deg) translateX(8px)}
.browse-photos[data-layout="overlap"] .letter-photo:nth-child(3){transform:rotate(5deg) translateX(-8px)}
.history-view{width:100%;max-width:none;padding-inline:clamp(24px,5vw,112px)}
.history-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(18px,2vw,30px)}
.history-card{min-height:clamp(290px,32vw,760px);padding:clamp(22px,2.2vw,68px);border-radius:22px}
.history-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.history-sent{text-align:right;white-space:nowrap;font-size:clamp(12px,.9vw,26px)}
.history-card .history-date{overflow-wrap:anywhere;line-height:1.15}
.history-card .history-date{font-size:clamp(22px,1.8vw,50px)}
.history-card .history-excerpt{display:-webkit-box;max-height:7.2em;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-height:1.65;font-size:clamp(17px,1.15vw,34px)}
.history-card .history-song{font-size:clamp(13px,.85vw,25px)}
.browse-card .browse-recipient{font-size:clamp(13px,.9vw,27px);padding:clamp(6px,.55vw,15px) clamp(9px,.7vw,20px)}
.browse-card-date{font-size:clamp(11px,.78vw,24px)}
.browse-song-detail strong{font-size:clamp(13px,.9vw,27px)}
.browse-song-detail small{font-size:clamp(12px,.75vw,22px)}
.link-privacy-note>small{font-size:12px;line-height:1.5;color:var(--muted)}
.photo-viewer{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;width:min(94vw,1560px);height:min(94dvh,1180px);padding:12px;border:1px solid #ffffff30;border-radius:24px;background:linear-gradient(160deg,#20232bf2,#101115f5);box-shadow:0 24px 90px #0008}
.photo-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 4px 0 10px;color:#f5f5f7;font-size:13px;letter-spacing:.03em}
.photo-viewer img{grid-row:2;grid-column:1;width:100%;height:100%;object-fit:contain;border-radius:14px;background:#08090b}
.photo-viewer-close{position:static;width:38px;min-height:38px;color:#17171b;font-size:25px}
.photo-viewer-nav{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:46px;height:54px;min-height:54px;border:1px solid #ffffff50;border-radius:16px;background:#17191dbd;color:#fff;font-size:38px;line-height:1;transform:translateY(-50%);backdrop-filter:blur(10px)}
.photo-viewer-nav:hover{background:#343840}
.photo-viewer-prev{left:22px}.photo-viewer-next{right:22px}
input[type="color"]{display:block;width:72px;height:48px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
@media(max-width:900px){.letter-lane{height:clamp(300px,40vw,520px)}.letter-lane .browse-card{flex-basis:clamp(280px,40vw,450px)}.history-view{padding-inline:clamp(20px,4vw,44px)}}
@media(max-width:600px){.letter-lanes{padding-inline:0}.letter-lane{height:320px}.letter-lane .browse-card{flex-basis:min(86vw,370px)}.browse-card-head{grid-template-columns:minmax(0,1fr) auto;padding:14px 13px 0}.browse-card .browse-title{padding-inline:13px}.browse-card .browse-excerpt{margin-inline:13px}.browse-photos{margin-inline:13px;height:64px}.history-view{padding-inline:18px}.history-list{grid-template-columns:1fr}.history-card{min-height:280px;padding:20px}.photo-viewer{width:100vw;height:100dvh;padding:10px;border-radius:0}.photo-viewer-prev{left:12px}.photo-viewer-next{right:12px}}

/* Editorial controls: clear section order, compact palettes, and tidy photo tools. */
.background-settings{margin:0 0 28px;padding:0 0 24px;border-top:0;border-bottom:1px solid var(--line)}
#background-color-panel{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fafafd}
#background-color-panel>label{margin:0 0 12px}
.background-color-choices{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.background-swatch-slot{position:relative;display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px}
.background-color-swatch{width:42px;height:42px;min-height:42px;flex:0 0 42px;padding:0;border:1px solid #1d1d1f24;border-radius:50%;background:var(--swatch);box-shadow:0 1px 3px #1112;transition:transform .18s ease,box-shadow .18s ease}
.background-color-swatch:hover{transform:translateY(-2px);box-shadow:0 5px 12px #1113}
.background-color-swatch[aria-pressed=true]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blue)}
.custom-color-choice{display:flex;align-items:center;gap:9px;margin:0 0 0 4px;padding:5px 10px 5px 13px;border:1px solid var(--line);border-radius:24px;background:#fff;color:var(--muted);font-size:13px;font-weight:500}
.custom-color-choice input[type=color]{width:34px;height:34px;min-height:34px;padding:2px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer}
.background-swatch-edit,.background-swatch-reset{display:none;position:absolute;z-index:2;place-items:center;width:21px;height:21px;min-height:21px;margin:0;padding:0;border:1px solid #d8d9de;border-radius:50%;background:#fff;color:#34343a;box-shadow:0 2px 6px #0002;cursor:pointer}
.background-swatch-edit{top:-2px;right:-2px;font-size:13px}
.background-swatch-edit input{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:50%;opacity:0;cursor:pointer}
.background-swatch-reset{right:-2px;bottom:-2px;font-size:17px;line-height:1}
.background-color-choices.is-customizing .background-swatch-edit,.background-color-choices.is-customizing .background-swatch-reset{display:grid}
.swatch-customization-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:13px}
.swatch-customization-actions .secondary-button{min-height:38px;padding:8px 12px;font-size:13px}
.swatch-customization-actions .text-button{font-size:13px}
.swatch-customization-actions .help-text{flex-basis:100%;margin:0!important;font-size:12px}
.swatch-customization-actions #reset-color-swatches{display:none}
.swatch-customization-actions.is-customizing #reset-color-swatches{display:inline-flex}
#background-color-panel .help-text{margin:13px 0 0}
/* Keep the six saved swatches and the custom picker in one aligned palette row. */
#background-color-panel{padding:22px 24px 20px}
#background-color-panel>label{margin-bottom:16px}
#background-color-choices{display:grid;grid-template-columns:repeat(6,50px) max-content;align-items:center;justify-content:start;gap:14px 16px}
#background-color-choices .background-swatch-slot{width:50px;height:50px}
#background-color-choices .custom-color-choice{margin:0 0 0 4px;min-height:54px;padding:7px 12px 7px 16px}
#background-color-choices .custom-color-choice input[type=color]{width:38px;height:38px;min-height:38px}
#swatch-customization-actions{gap:12px 16px;margin-top:18px}
#swatch-customization-actions .help-text{line-height:1.5}
@media(max-width:720px){#background-color-choices{grid-template-columns:repeat(3,50px);gap:14px 16px}#background-color-choices .custom-color-choice{grid-column:1/-1;justify-self:start;margin-left:0}}
@media(max-width:420px){#background-color-panel{padding:18px 16px}#background-color-choices{grid-template-columns:repeat(3,46px);gap:12px}#background-color-choices .background-swatch-slot{width:46px;height:46px}#background-color-choices .background-color-swatch{width:40px;height:40px;min-height:40px;flex-basis:40px}}
.browse-consent-note{margin-top:14px}
.browse-consent-note[hidden]{display:none!important}
.link-privacy-note,.browse-consent-note{overflow:visible;min-width:0}

/* Browse is a randomized, seamless loop of the unique featured letters. */
.lane-heading>span:last-child{white-space:nowrap}
.letter-lane{position:relative;overflow:hidden;overflow-x:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);scroll-snap-type:none;touch-action:pan-y}
.letter-lane .lane-track:not(.lane-static){position:absolute;inset:12px auto 12px 0;display:flex;width:max-content;min-width:0;height:auto;justify-content:flex-start;animation:lane-left var(--lane-duration,52s) linear infinite;animation-play-state:running;will-change:transform}
.letter-lane.lane-right .lane-track:not(.lane-static){animation-name:lane-right}
.letter-lane .lane-track:hover,.letter-lane:focus-within .lane-track{animation-play-state:paused}
.letter-lane .lane-group{display:flex;width:max-content;min-width:max-content;max-width:none;height:100%;align-items:stretch;justify-content:flex-start;gap:clamp(18px,1.5vw,28px);padding:0 clamp(18px,1.5vw,28px) 0 0;flex:0 0 max-content}
.letter-lane .lane-track.lane-static{position:relative;inset:auto;display:flex;width:100%;min-width:100%;height:100%;align-items:center;justify-content:center;animation:none;transform:none;will-change:auto}
.letter-lane .lane-track.lane-static .lane-group{width:max-content;min-width:0;max-width:100%;height:100%;align-items:stretch;justify-content:center;padding-inline:clamp(16px,2vw,30px);flex:0 1 auto}
.letter-lane .lane-track.lane-static .browse-card{flex:0 1 clamp(280px,24vw,580px);max-width:100%}
@media(prefers-reduced-motion:reduce){.letter-lane{overflow-x:auto;scrollbar-width:none;mask-image:none}.letter-lane .lane-track:not(.lane-static){position:relative;inset:auto;width:max-content;min-width:0;animation:none;transform:none;will-change:auto}.letter-lane .lane-track>.lane-group[aria-hidden=true]{display:none}}
.link-privacy-note>span,.link-privacy-note>small,.browse-consent-note>span{display:block;max-width:none;overflow:visible;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.link-privacy-note>small{margin:0;color:var(--muted)}
#theme-settings{margin:0 0 26px}
#panel-design>label[for="letter-font"]{margin:0 0 9px}
#find-results .result-card.sealed-result>p{display:block!important;max-height:none!important;overflow:visible!important;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;white-space:normal}
.photo-selection{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(104px,10vw,170px),1fr));gap:16px;margin:14px 0 22px;align-items:start}
.photo-selection-item{width:100%;max-width:220px;aspect-ratio:4/3;overflow:hidden;border-radius:16px;box-shadow:0 5px 18px #17203312}
.photo-selection-item img{object-fit:cover}
.photo-remove-one{top:8px;right:8px;width:32px;height:32px;min-height:32px;border:1px solid #ffffffb8;background:#171a21e8;font-size:20px;font-weight:500;box-shadow:0 2px 8px #0004}
.photo-remove-one:hover{background:#bd3142}
.photo-edit-again{position:absolute;left:9px;bottom:9px;z-index:2;min-height:32px;padding:5px 12px;border:1px solid #ffffffb8;border-radius:999px;background:#171a21df;color:#fff;font-size:13px;font-weight:600;box-shadow:0 2px 8px #0004;backdrop-filter:blur(8px)}
.photo-edit-again:hover{background:#171a21f5;transform:translateY(-1px)}
.image-editor-dialog{width:min(820px,calc(100vw - 32px));max-width:none;max-height:min(94dvh,1200px);padding:clamp(18px,3vw,30px);overflow:auto;border:1px solid #ffffffb8;border-radius:24px;box-shadow:0 24px 90px #10152130}
.image-editor-dialog .dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;font-weight:600}
.image-editor-dialog>.help-text{margin:8px 0 18px}
.photo-edit-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px;margin:0 0 16px;border:1px solid var(--line);border-radius:18px;background:#f8f9fb}
.photo-edit-tools>button{width:100%;min-width:0;min-height:44px;padding:8px 10px;white-space:normal}
.photo-edit-tools .photo-color-picker,.photo-edit-tools .pen-width-control{grid-column:span 2;min-width:0}
.photo-edit-tools .photo-color-picker{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.photo-edit-tools .photo-color-picker>label{margin:0 0 8px}
.photo-edit-tools .photo-color-options{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.photo-edit-tools .pen-width-control{display:grid;grid-template-columns:1fr auto;align-content:center;gap:5px 12px;padding:9px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.photo-edit-tools .pen-width-control input[type=range]{grid-column:1/-1;width:100%}
.photo-edit-tools #clear-photo-drawing{justify-self:stretch;width:100%}
.image-crop-viewport{width:min(100%,calc(58dvh * 4 / 3));max-height:none;aspect-ratio:4/3;margin:0 auto;background:#edeef1}
.photo-background-removal{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fafbfc}
.photo-background-removal summary{font-size:13px;font-weight:600;color:var(--ink)}
.photo-background-removal>p{max-width:68ch;margin:10px 0;color:var(--muted);font-size:12px;line-height:1.55}
.background-removal-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.background-removal-controls>button{min-height:38px;padding:8px 13px;font-size:13px}
.background-removal-controls>label{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;min-width:min(100%,240px);margin:0;font-size:12px;color:var(--muted)}
.background-removal-controls>label input{grid-column:1/-1;width:100%;min-height:28px}
.background-removal-controls output{color:var(--ink);font-variant-numeric:tabular-nums}
.background-removal-status{min-height:0!important;margin:8px 0 0!important;color:var(--muted);font-size:12px!important}
.image-crop-viewport.is-picking-background{cursor:crosshair}
.photo-viewer:not([open]){display:none}
.photo-viewer[open]{display:grid}
.photo-viewer img{background:transparent}
.result-card.sealed-result{cursor:default}
.browse-photos{height:clamp(110px,11vw,250px);gap:clamp(5px,.65vw,10px);margin-top:clamp(12px,1.1vw,20px);border-radius:14px}
.browse-photos .letter-photo{border-radius:8px}
.browse-photos[data-layout="stack"] .letter-photo{display:block}
.browse-photos[data-layout="overlap"]{height:clamp(140px,14vw,285px);justify-content:center;gap:0;padding:8px 12px}
.browse-photos[data-layout="overlap"] .letter-photo{width:34%;height:88%;border-width:3px;border-radius:12px;box-shadow:0 8px 18px #0004}
.browse-photos[data-layout="overlap"] .letter-photo:nth-child(2){transform:rotate(-7deg) translateX(12px)}
.browse-photos[data-layout="overlap"] .letter-photo:nth-child(3){transform:rotate(7deg) translateX(-12px)}
@media(max-width:700px){.photo-edit-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}.photo-edit-tools .photo-color-picker,.photo-edit-tools .pen-width-control{grid-column:1/-1}.image-crop-viewport{width:min(100%,calc(52dvh * 4 / 3))}.browse-photos{height:clamp(88px,25vw,150px)}.browse-photos[data-layout="overlap"]{height:clamp(120px,32vw,185px)}}

/* Browse and History remain readable across browser zoom levels. */
.browse-finder{width:100%;max-width:none;grid-template-columns:minmax(230px,.32fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.browse-finder .result-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));align-items:stretch}
.result-card{min-width:0;min-height:250px;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,32px);border:1px solid var(--line);box-shadow:0 5px 18px #17203309;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.result-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #17203316;border-color:#cbd8ed}
.result-card>p:not(.result-to){flex:1;margin:0;max-height:7em;line-height:1.55}
.result-meta{margin-top:auto;align-items:flex-start;line-height:1.45}
.result-meta span:first-child{min-width:0;overflow-wrap:anywhere}
.history-view{width:100%;max-width:none;padding-inline:clamp(22px,4vw,88px)}
.history-sections{display:grid;gap:34px;margin-top:28px;min-width:0}
.history-shelf{min-width:0;padding:0 0 9px}
.history-shelf-heading{margin:0 0 14px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.04em}
.history-shelf-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(88vw,420px),clamp(360px,30vw,600px));grid-template-rows:minmax(340px,1fr);gap:clamp(16px,2vw,26px);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#c4cad4 transparent;padding:3px 4px 18px}
.history-card{height:auto;min-height:340px;scroll-snap-align:start;background:var(--history-bg,linear-gradient(155deg,#fff,#fbfcff));color:var(--history-fg,#1d1d1f);border-color:var(--history-line,var(--line));transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.history-card.midnight{--history-bg:#182741;--history-fg:#f5f5f7;--history-muted:#b4bdd0;--history-line:#ffffff26;--history-footer:#ffffff0c}
.history-card.paper{--history-bg:#f8f5ed;--history-fg:#34312c;--history-muted:#6e675c;--history-line:#34312c20;--history-footer:#fff8}
.history-card.rose{--history-bg:#f9e9ee;--history-fg:#592638;--history-muted:#875d6c;--history-line:#59263825;--history-footer:#fff5}
.history-card.forest{--history-bg:#163b32;--history-fg:#f2f4e8;--history-muted:#b6c6b7;--history-line:#ffffff26;--history-footer:#ffffff0c}
.history-card.lavender{--history-bg:#f0eafb;--history-fg:#302545;--history-muted:#746687;--history-line:#30254522;--history-footer:#fff8}
.history-card.sunset{--history-bg:#fff0df;--history-fg:#43291d;--history-muted:#86614a;--history-line:#43291d22;--history-footer:#fff8}
.history-card.cloud{--history-bg:#e9f3fb;--history-fg:#203247;--history-muted:#63778b;--history-line:#20324722;--history-footer:#fff8}
.history-card.sage{--history-bg:#e9efe5;--history-fg:#29372b;--history-muted:#687769;--history-line:#29372b22;--history-footer:#fff8}
.history-card .history-open,.history-card .history-date{color:var(--history-fg)}
.history-card .history-sent,.history-card .history-excerpt,.history-card .history-retention{color:var(--history-muted,var(--muted))}
.history-card .history-sent{white-space:normal;overflow-wrap:normal;max-width:52%;font-size:clamp(12px,.85vw,16px)}
.history-card .result-to{white-space:normal;overflow-wrap:anywhere}
.history-card .history-song{max-width:100%;background:var(--history-footer,#f7f8fb);border-color:var(--history-line,var(--line));color:var(--history-fg)}
.history-card .history-meta{border-color:var(--history-line,var(--line))}
.browse-card{flex-basis:clamp(360px,22vw,520px);min-height:0}
.letter-lane{height:clamp(350px,30vw,560px);margin-bottom:clamp(18px,2vw,30px)}
.letter-lane .lane-track{top:12px;bottom:12px}
.letter-lane .lane-group{height:100%;gap:clamp(18px,1.4vw,26px);padding-right:clamp(18px,1.4vw,26px)}
.letter-lane .browse-card{flex-basis:clamp(360px,22vw,520px);height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto}
.browse-card-head{grid-template-columns:minmax(0,1fr) minmax(0,52%);align-items:start}
.browse-card .browse-recipient{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.browse-card-date{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;font-size:clamp(12px,.8vw,16px);line-height:1.35}
.browse-card .browse-title{font-size:clamp(20px,1.55vw,28px)}
.browse-card .browse-excerpt{font-size:clamp(21px,1.75vw,34px);line-height:1.34;white-space:pre-wrap;-webkit-line-clamp:4}
.browse-photos{height:clamp(108px,10vw,190px);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
.browse-photos[data-count="1"]{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr}
.browse-photos[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}
.browse-photos[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
.browse-photos .letter-photo{min-width:0;min-height:0;object-fit:cover;background:#e9eaf0}
.browse-photo-fallback{display:grid;place-items:center;min-width:0;min-height:0;padding:8px;background:linear-gradient(145deg,#e7e9ef,#f7f7f9);color:#686b75;font-size:12px;text-align:center}
.browse-card.has-photos .browse-excerpt{-webkit-line-clamp:3}
.browse-card[style*="--browse-bg"]{background:var(--browse-bg)}
.browse-card .browse-song{min-width:0}
.browse-card .browse-open.has-title{grid-template-rows:auto auto minmax(0,1fr)}
.browse-card.has-photos .browse-open.has-title{grid-template-rows:auto auto auto minmax(0,1fr)}
.browse-card .browse-song-detail strong{overflow-wrap:anywhere;white-space:nowrap}
@media(max-width:900px){.browse-finder{grid-template-columns:minmax(0,1fr)}.history-view{padding-inline:22px}.letter-lane{height:clamp(350px,50vw,520px)}.letter-lane .browse-card{flex-basis:clamp(350px,64vw,480px)}}
@media(max-width:600px){.history-shelf-track{grid-auto-columns:minmax(84vw,1fr);grid-template-rows:minmax(320px,1fr)}.history-card{min-height:320px;padding:22px}.history-card .history-sent{font-size:12px}.browse-finder{padding-inline:20px}.browse-finder .result-list{grid-template-columns:minmax(0,1fr)}.letter-lane{height:360px}.letter-lane .browse-card{flex-basis:min(88vw,420px)}.browse-photos{height:clamp(104px,30vw,150px)}}
@media(prefers-reduced-motion:reduce){.result-card,.history-card{transition:none}.result-card:hover,.history-card:hover{transform:none}}

/* Browse and saved-letter shelves share theme, backdrop, and photo rendering. */
.browse-card,.result-card,.history-card{position:relative;isolation:isolate;overflow:hidden}
.browse-card-backdrop{position:absolute;z-index:0;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);object-fit:cover;filter:blur(var(--backdrop-blur,0px));transform:scale(1.04);pointer-events:none}
.browse-card.has-browse-backdrop::after,.result-card.has-browse-backdrop::after,.history-card.has-history-backdrop::after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(145deg,#070d2299,#070d227a 55%,#070d22a6);pointer-events:none}
.browse-card>.browse-open,.browse-card>.browse-song,.result-card>*:not(.browse-card-backdrop),.history-card>*:not(.browse-card-backdrop){position:relative;z-index:1}
.browse-card-backdrop~.browse-open,.browse-card-backdrop~.browse-song{z-index:1}
.browse-card.has-browse-backdrop .browse-title,.browse-card.has-browse-backdrop .browse-excerpt{color:var(--browse-fg)}
.browse-card.has-browse-backdrop .browse-recipient{color:var(--browse-fg);background:#ffffff1c}
.browse-card.has-browse-backdrop .browse-song{color:var(--browse-fg)}
.result-card{background:var(--browse-bg,#fff);color:var(--browse-fg,#1d1d1f);border-color:var(--browse-line,var(--line))}
.result-card .result-to,.result-card h2,.result-card>p,.result-card .result-meta{color:var(--browse-fg,#1d1d1f)}
.result-card .result-to{opacity:.82}
.result-card .result-meta{border-color:var(--browse-line,var(--line))}
.result-card .result-excerpt{font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;max-height:7em;line-height:1.55;color:var(--browse-muted,var(--muted))}
.result-card.font-sans .result-excerpt{font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.result-card.font-serif .result-excerpt{font-family:Georgia,serif}
.result-card.font-mono .result-excerpt{font-family:ui-monospace,monospace}
.result-card.font-hand .result-excerpt{font-family:Caveat,cursive}
.result-card.font-casual .result-excerpt{font-family:'Bradley Hand','Comic Sans MS',cursive;font-style:italic}
.result-card.font-marker .result-excerpt{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:600}
.result-card.font-rounded .result-excerpt{font-family:Nunito,ui-rounded,sans-serif}
.result-card.font-romantic .result-excerpt{font-family:Playfair,Georgia,serif;font-style:italic}
.result-card.has-browse-backdrop .result-meta{color:#fff;border-color:#ffffff40}
.result-card.has-browse-backdrop .result-excerpt{color:#f1f2f6}
.result-photos,.history-photos{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(76px,9vw,148px);gap:6px;width:100%;margin:8px 0 12px;overflow:hidden;border-radius:14px}
.result-photos[data-count="1"],.history-photos[data-count="1"]{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;grid-auto-rows:clamp(125px,16vw,230px)}
.result-photos[data-count="2"],.history-photos[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}
.result-photos[data-count="3"],.history-photos[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
.result-photos .letter-photo,.history-photos .letter-photo{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;margin:0;border-radius:8px}
.result-photos[data-layout="overlap"],.history-photos[data-layout="overlap"]{display:flex;align-items:center;justify-content:center;padding:9px 12px;gap:0;overflow:hidden}
.result-photos[data-layout="overlap"] .letter-photo,.history-photos[data-layout="overlap"] .letter-photo{width:34%;height:92%;flex:0 0 34%;border:2px solid #fff;border-radius:10px;box-shadow:0 7px 18px #0004;transform:rotate(-4deg)}
.result-photos[data-layout="overlap"] .letter-photo:nth-child(even),.history-photos[data-layout="overlap"] .letter-photo:nth-child(even){transform:rotate(4deg) translateY(4px)}
.result-photos[data-layout="stack"] .letter-photo:nth-child(n+4),.history-photos[data-layout="stack"] .letter-photo:nth-child(n+4){display:none}
.history-card{overflow:hidden}
.history-card.has-history-backdrop{background:var(--history-bg,#182741)}
.history-card.has-history-backdrop:after{background:linear-gradient(145deg,#070d227d,#070d225f 55%,#070d228f)}
.history-card .history-open{position:relative;z-index:1;grid-template-rows:auto auto minmax(0,1fr)}
.history-card .history-open.has-photos{grid-template-rows:auto auto auto minmax(0,1fr)}
.history-card .history-excerpt{display:block;max-height:7.2em;overflow:hidden;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.history-card .history-date,.history-card .history-excerpt{font-family:inherit}
.history-card.font-sans .history-excerpt,.history-card.font-sans .history-date{font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.history-card.font-serif .history-excerpt,.history-card.font-serif .history-date{font-family:Georgia,serif}
.history-card.font-mono .history-excerpt,.history-card.font-mono .history-date{font-family:ui-monospace,monospace}
.history-card.font-hand .history-excerpt,.history-card.font-hand .history-date{font-family:Caveat,cursive}
.history-card.font-casual .history-excerpt,.history-card.font-casual .history-date{font-family:'Bradley Hand','Comic Sans MS',cursive;font-style:italic}
.history-card.font-marker .history-excerpt,.history-card.font-marker .history-date{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:600}
.history-card.font-rounded .history-excerpt,.history-card.font-rounded .history-date{font-family:Nunito,ui-rounded,sans-serif}
.history-card.font-romantic .history-excerpt,.history-card.font-romantic .history-date{font-family:Playfair,Georgia,serif;font-style:italic}
.history-shelf-track{grid-auto-columns:minmax(min(92vw,680px),clamp(640px,48vw,980px));grid-template-rows:minmax(390px,1fr);overflow-y:hidden;padding:20px 8px 32px;margin:-14px 0 -14px;scrollbar-gutter:stable}
.history-card:hover{transform:none;box-shadow:0 14px 34px #1827411b;border-color:color-mix(in srgb,var(--history-fg,#1d1d1f) 24%,transparent)}
.history-card-head{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px}
.history-card .result-to{width:max-content;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.history-card .history-sent{max-width:none;min-width:0;text-align:right;white-space:normal;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums}
.browse-card .browse-excerpt{display:block;max-height:5.36em;overflow:hidden;text-overflow:clip;-webkit-line-clamp:unset;-webkit-box-orient:initial;white-space:pre-wrap;overflow-wrap:anywhere}
.browse-card.has-photos .browse-excerpt{max-height:4.02em;-webkit-line-clamp:unset}
.browse-photos[data-layout="overlap"]{height:clamp(140px,14vw,245px);justify-content:center;gap:0;padding:8px 14px}
.browse-photos[data-layout="overlap"] .letter-photo{width:34%;height:90%;border:3px solid #fff;border-radius:12px;box-shadow:0 8px 18px #0004;transform:rotate(-4deg)}
.browse-photos[data-layout="overlap"] .letter-photo:nth-child(even){transform:rotate(4deg) translateY(4px)}
.browse-photos[data-layout="stack"]{height:clamp(140px,14vw,245px);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.browse-photos[data-layout="stack"] .letter-photo{display:block}
.browse-photos[data-count="4"]{grid-template-rows:repeat(2,minmax(0,1fr))}
.browse-photos[data-count="5"]{grid-template-rows:repeat(2,minmax(0,1fr))}
.browse-photos[data-count="6"]{grid-template-rows:repeat(2,minmax(0,1fr))}
.browse-photos[data-layout="stack"] .letter-photo:nth-child(n+4){display:block}
.letter-photo-fallback{display:grid;place-items:center;min-width:0;min-height:0;padding:8px;border-radius:8px;background:linear-gradient(145deg,#e7e9ef,#f7f7f9);color:#686b75;font-size:12px;text-align:center}
.browse-card.font-sans .browse-title,.result-card.font-sans h2{font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.browse-card.font-serif .browse-title,.result-card.font-serif h2{font-family:Georgia,serif}
.browse-card.font-mono .browse-title,.result-card.font-mono h2{font-family:ui-monospace,monospace}
.browse-card.font-hand .browse-title,.result-card.font-hand h2{font-family:Caveat,cursive}
.browse-card.font-casual .browse-title,.result-card.font-casual h2{font-family:'Bradley Hand','Comic Sans MS',cursive;font-style:italic}
.browse-card.font-marker .browse-title,.result-card.font-marker h2{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:600}
.browse-card.font-rounded .browse-title,.result-card.font-rounded h2{font-family:Nunito,ui-rounded,sans-serif}
.browse-card.font-romantic .browse-title,.result-card.font-romantic h2{font-family:Playfair,Georgia,serif;font-style:italic}
.lane-heading{max-width:none}
.browse-finder .result-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(350px,24vw,540px)),1fr))}
.result-card h2{color:var(--browse-fg,#1d1d1f)}
@media(max-width:700px){.history-shelf-track{grid-auto-columns:minmax(88vw,1fr);grid-template-rows:minmax(360px,1fr);padding:18px 4px 28px}.history-card-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.history-card .history-sent{font-size:12px}.result-photos,.history-photos{grid-auto-rows:clamp(82px,28vw,150px)}.browse-photos[data-layout="overlap"]{height:clamp(130px,34vw,190px)}}
.history-card .history-open{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(12px,1.3vw,20px);min-width:0;color:var(--history-fg,#1d1d1f)}
.history-card.midnight .history-excerpt,.history-card.forest .history-excerpt{color:var(--history-muted,var(--muted))}
.history-card.paper .history-excerpt,.history-card.rose .history-excerpt,.history-card.lavender .history-excerpt,.history-card.sunset .history-excerpt,.history-card.cloud .history-excerpt,.history-card.sage .history-excerpt{color:var(--history-muted)}
.history-card .history-date{color:var(--history-fg);overflow-wrap:anywhere}
.history-card .result-to{color:var(--history-fg);background:color-mix(in srgb,var(--history-bg),var(--history-fg) 8%);border:1px solid var(--history-line);border-radius:999px;padding:7px 11px;max-width:100%;width:max-content}
.history-card .history-sent{color:var(--history-muted)}
.browse-card.midnight .browse-song-detail small,.browse-card.forest .browse-song-detail small{color:#d6dce8}
.browse-card .browse-card-date{align-self:start}
.browse-card .browse-excerpt .quote-line{display:block;padding-left:.65em;border-left:2px solid currentColor}
.browse-card .browse-excerpt .rich-heading{display:block;font-size:1.08em;font-weight:700}
.browse-card .browse-excerpt .rich-list-item{display:block;padding-left:1em;position:relative}
.browse-card .browse-excerpt .rich-list-item::before{content:"•";position:absolute;left:.15em}
.browse-card .browse-excerpt strong{font-weight:750}
.browse-card .browse-excerpt em{font-style:italic}
.browse-card .browse-excerpt s{text-decoration-thickness:.08em}

/* Last cascade layer: keep the card composition stable at browser zoom levels. */
.browse-photos{height:clamp(150px,13vw,250px)}
.browse-card .browse-excerpt{display:block;max-height:5.36em;overflow:hidden;text-overflow:clip;-webkit-line-clamp:unset;-webkit-box-orient:initial}
.browse-card.has-photos .browse-excerpt{max-height:4.02em;-webkit-line-clamp:unset}
.history-card .history-open{grid-template-rows:auto auto minmax(0,1fr)}
.history-card .history-open.has-photos{grid-template-rows:auto auto auto minmax(0,1fr)}
.history-card .history-excerpt{display:block;max-height:7.2em;overflow:hidden;-webkit-line-clamp:unset;-webkit-box-orient:initial}
#find-results .result-card .result-excerpt{display:block!important;max-height:none;min-height:0;flex:1 1 auto;overflow:hidden;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;text-overflow:clip;white-space:pre-wrap}
.history-shelf-track{grid-auto-columns:minmax(min(92vw,680px),clamp(640px,48vw,980px));grid-template-rows:minmax(390px,1fr);overflow-y:hidden;padding:32px 8px 40px;margin:-24px 0 -24px}
.history-card:hover{transform:none}
.browse-card-backdrop{z-index:0}
.browse-card.has-browse-backdrop::after,.result-card.has-browse-backdrop::after,.history-card.has-history-backdrop::after{z-index:0}
.browse-photos[data-layout="stack"] .letter-photo:nth-child(n+4){display:block}
@media(max-width:700px){.history-shelf-track{grid-auto-columns:minmax(88vw,1fr);grid-template-rows:minmax(360px,1fr);padding:22px 4px 32px}.browse-photos{height:clamp(120px,30vw,185px)}}

/* Manual horizontal shelves and a responsive, non-animated search grid. */
#browse-view.view{width:min(2000px,calc(100vw - 48px));max-width:none;padding-inline:clamp(24px,4vw,80px)}
#history-view.view{width:min(2000px,calc(100vw - 48px));max-width:none;padding-inline:clamp(24px,4vw,80px)}
.history-shelf-track{display:flex;align-items:stretch;gap:0;width:100%;height:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x;padding:16px 0 24px;margin:-8px 0 -12px;mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent)}
.history-shelf-track::-webkit-scrollbar{display:none}
.history-shelf-set{display:flex;align-items:stretch;gap:clamp(16px,1.5vw,24px);width:max-content;height:auto;padding-right:clamp(16px,1.5vw,24px);box-sizing:border-box;flex:0 0 max-content}
.history-shelf-set[aria-hidden="true"]{pointer-events:auto}
.history-shelf-set>.history-card{flex:0 0 clamp(600px,30vw,780px);width:clamp(600px,30vw,780px);height:clamp(450px,22vw,620px);min-height:0;padding:clamp(18px,1.25vw,36px);scroll-snap-align:start}
.history-card .history-photos{grid-auto-rows:clamp(70px,6vw,125px);margin-block:6px}
.history-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px #18274120;border-color:color-mix(in srgb,var(--history-fg,#1d1d1f) 28%,transparent);z-index:3}
.browse-card:hover{transform:translateY(-7px) scale(1.012);box-shadow:0 22px 52px #17203330;z-index:5}
.browse-card:active{transform:translateY(-2px) scale(.995)}
.letter-lanes .lane-track{animation-timing-function:linear}
.browse-finder #find-results{width:100%;min-width:0;overflow:visible}
.browse-finder .result-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));align-items:stretch;gap:clamp(16px,1.5vw,24px);width:100%;height:auto;overflow:visible;scrollbar-width:auto;mask-image:none;padding:10px 0 18px;margin:10px 0 22px;box-sizing:border-box}
.browse-finder .result-card{width:auto;height:auto;min-height:clamp(340px,23vw,480px);max-height:none;overflow:hidden;padding:clamp(20px,1.8vw,30px);box-shadow:0 7px 24px #17203312;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .25s ease}
.browse-finder .result-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px #17203320;z-index:3}
.browse-finder .result-card .result-excerpt{max-height:none;min-height:0;flex:1 1 auto}
.browse-finder .result-photos{grid-auto-rows:clamp(82px,8vw,132px);flex:0 0 auto}
.browse-finder .result-meta{margin-top:auto}

/* Manual shelves leave vertical wheel and touch scrolling to the page. */
.history-shelf-track{touch-action:pan-x pan-y}
.history-private-status{flex:0 0 auto;color:var(--blue);font-size:12px;font-weight:600;white-space:nowrap}
.history-card.onyx .history-excerpt{color:var(--history-muted,var(--muted))}
.paragraph-alignment{display:grid;grid-template-columns:auto minmax(180px,240px);align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:13px}
.paragraph-alignment select{margin:0;min-height:42px;padding-block:9px;font-size:14px}
.letter-card.citrus{--letter-bg:#fff0e7;--letter-fg:#482b20;--letter-muted:#866356;--letter-line:#482b2022;--letter-accent:#ac684b;--letter-song:#fff9}
.letter-card.marigold{--letter-bg:#fff6d9;--letter-fg:#453810;--letter-muted:#786a3d;--letter-line:#45381022;--letter-accent:#98751a;--letter-song:#fff9}
.letter-card.onyx{--letter-bg:#24262d;--letter-fg:#f5f5f7;--letter-muted:#c1c3ca;--letter-line:#ffffff28;--letter-accent:#d9dce5;--letter-song:#ffffff10}
.letter-card.snow{--letter-bg:#fff;--letter-fg:#292c32;--letter-muted:#70737c;--letter-line:#292c321c;--letter-accent:#4d6c9b;--letter-song:#f7f8fa}
.theme-swatch.citrus{--letter-bg:#fff0e7;--letter-fg:#482b20}
.theme-swatch.marigold{--letter-bg:#fff6d9;--letter-fg:#453810}
.theme-swatch.onyx{--letter-bg:#24262d;--letter-fg:#f5f5f7}
.theme-swatch.snow{--letter-bg:#fff;--letter-fg:#292c32}
.browse-photos .letter-photo,.letter-photo-gallery .letter-photo{background:transparent}
.photo-selection-item{background-color:#f4f5f8;background-image:linear-gradient(45deg,#e2e4e9 25%,transparent 25%),linear-gradient(-45deg,#e2e4e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e4e9 75%),linear-gradient(-45deg,transparent 75%,#e2e4e9 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.image-crop-viewport{background-color:#f3f4f6;background-image:linear-gradient(45deg,#e1e3e8 25%,transparent 25%),linear-gradient(-45deg,#e1e3e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e1e3e8 75%),linear-gradient(-45deg,transparent 75%,#e1e3e8 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
.letter-lane .lane-track,.letter-lane .lane-track:hover,.letter-lane:focus-within .lane-track{animation-play-state:running!important}
.letter-lanes .lane-track{animation-duration:var(--lane-duration,52s)}
@media(max-width:600px){.paragraph-alignment{grid-template-columns:1fr;gap:6px}.history-private-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.letter-lane .lane-track{animation:none!important}}
@media(max-width:700px){#browse-view.view,#history-view.view{width:100%;padding-inline:18px}.history-shelf-set>.history-card{flex-basis:min(88vw,620px);width:min(88vw,620px);height:480px}.browse-finder .result-list{grid-template-columns:minmax(0,1fr)}.browse-finder .result-card{min-height:330px}}
@media(prefers-reduced-motion:reduce){.browse-card:hover,.history-card:hover,.browse-finder .result-card:hover{transform:none}}

/* Custom-photo cards get a soft readability fade without changing their layout. */
.browse-card.has-custom-photo-backdrop .browse-card-head,
.history-card.has-custom-photo-backdrop .history-card-head,
.browse-card.has-custom-photo-backdrop .browse-song,
.history-card.has-custom-photo-backdrop .history-meta{
  position:relative;isolation:isolate
}
.browse-card.has-custom-photo-backdrop .browse-card-head::before,
.history-card.has-custom-photo-backdrop .history-card-head::before,
.browse-card.has-custom-photo-backdrop .browse-song::before,
.history-card.has-custom-photo-backdrop .history-meta::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-24px -14px;
  -webkit-backdrop-filter:blur(12px) saturate(1.08);backdrop-filter:blur(12px) saturate(1.08);
  background:linear-gradient(180deg,#10182732 0%,#1018271c 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 55%,transparent 100%)
}
.browse-card.has-custom-photo-backdrop .browse-song::before,
.history-card.has-custom-photo-backdrop .history-meta::before{
  background:linear-gradient(0deg,#10182742 0%,#10182720 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 24%,#000 55%,transparent 100%);
  mask-image:linear-gradient(0deg,transparent 0%,#000 24%,#000 55%,transparent 100%)
}
.browse-card.has-custom-photo-backdrop .browse-recipient,
.history-card.has-custom-photo-backdrop .history-card-head .result-to{color:#fff}
.browse-card.has-custom-photo-backdrop .browse-card-date,
.history-card.has-custom-photo-backdrop .history-sent,
.browse-card.has-custom-photo-backdrop .browse-song,
.history-card.has-custom-photo-backdrop .history-meta{color:#f7f8fc}
.browse-card.has-custom-photo-backdrop .browse-song-detail small,
.browse-card.has-custom-photo-backdrop .browse-provider{color:#e6eaf2}
.letter-card.backdrop-custom:after{background:#070d22b8}
.browse-card.has-custom-photo-backdrop::after,
.result-card.has-custom-photo-backdrop::after,
.history-card.has-custom-photo-backdrop::after{background:#070d2299}
.browse-card.has-custom-photo-backdrop .browse-title,
.browse-card.has-custom-photo-backdrop .browse-excerpt,
.browse-card.has-custom-photo-backdrop .browse-card-date,
.browse-card.has-custom-photo-backdrop .browse-song,
.history-card.has-custom-photo-backdrop .history-date,
.history-card.has-custom-photo-backdrop .history-excerpt,
.history-card.has-custom-photo-backdrop .history-sent,
.history-card.has-custom-photo-backdrop .result-to,
.result-card.has-custom-photo-backdrop .result-to,
.result-card.has-custom-photo-backdrop h2,
.result-card.has-custom-photo-backdrop .result-excerpt,
.result-card.has-custom-photo-backdrop .result-meta{
  color:#fff;text-shadow:0 1px 3px #070d22b8
}
.browse-card.has-custom-photo-backdrop .browse-recipient,
.history-card.has-custom-photo-backdrop .history-card-head .result-to{
  color:#fff;background:#101827a6;border-color:#ffffff42;text-shadow:0 1px 3px #070d22b8
}

.browse-open:not(.has-photos){grid-template-rows:auto auto minmax(0,1fr)}
.browse-open.has-photos{grid-template-rows:auto auto auto minmax(0,1fr)}
.browse-card .browse-excerpt{min-height:0;height:100%;max-height:none;overflow:hidden}
.browse-card.has-photos .browse-excerpt{max-height:none}

.browse-card.has-custom-photo-backdrop .browse-excerpt.is-truncated,
.history-card.has-custom-photo-backdrop .history-excerpt.is-truncated,
.result-card.has-custom-photo-backdrop .result-excerpt.is-truncated{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - .8em),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - .8em),transparent 100%);
  text-overflow:clip
}

.browse-photos,.result-photos,.history-photos{
  box-sizing:border-box;height:clamp(132px,13vw,214px);min-height:132px;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);align-content:stretch;gap:8px;overflow:hidden;flex:0 0 auto
}
.browse-photos[data-count="1"],.result-photos[data-count="1"],.history-photos[data-count="1"]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.browse-photos[data-count="2"],.result-photos[data-count="2"],.history-photos[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.browse-photos[data-count="3"],.result-photos[data-count="3"],.history-photos[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.browse-photos[data-count="4"],.browse-photos[data-count="5"],.browse-photos[data-count="6"],
.result-photos[data-count="4"],.result-photos[data-count="5"],.result-photos[data-count="6"],
.history-photos[data-count="4"],.history-photos[data-count="5"],.history-photos[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.browse-photos[data-layout="gallery"][data-count="5"] .letter-photo:first-child,
.letter-photo-gallery[data-layout="gallery"][data-count="5"] .letter-photo:first-child{grid-row:span 2}
.letter-photo-gallery[data-layout="stack"]{
  display:grid;grid-auto-rows:minmax(0,1fr);overflow:hidden
}
.letter-photo-gallery[data-layout="stack"] .letter-photo:nth-child(n+4){display:block}
.letter-photo-gallery[data-layout="stack"] .letter-photo{border:2px solid #fff;box-shadow:0 5px 14px #10182724}
.letter-photo-gallery[data-layout="stack"] .letter-photo:nth-child(even){transform:translateY(3px) rotate(.6deg)}
.browse-photos[data-layout="stack"] .letter-photo:nth-child(n+4){display:block}
.browse-photos[data-layout="overlap"],.result-photos[data-layout="overlap"],.history-photos[data-layout="overlap"]{height:clamp(132px,13vw,214px);min-height:132px}
.browse-photos .letter-photo,.result-photos .letter-photo,.history-photos .letter-photo{min-width:0;min-height:0;width:100%;height:100%;object-fit:cover}
.history-shelf-set>.history-card{border-color:color-mix(in srgb,var(--history-fg,#1d1d1f) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--history-fg,#1d1d1f) 12%,transparent),0 8px 26px #00000012}
.history-shelf-set>.history-card:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--history-fg,#1d1d1f) 17%,transparent),0 18px 38px #00000020}

/* Keep the original card surfaces and soften custom-photo contrast across the whole card. */
.browse-card.has-custom-photo-backdrop::after,
.result-card.has-custom-photo-backdrop::after,
.history-card.has-custom-photo-backdrop::after{
  background:linear-gradient(180deg,#070d2278 0%,#070d224f 18%,#070d222b 42%,#070d222b 58%,#070d224a 82%,#070d2278 100%)
}
.browse-card.has-custom-photo-backdrop .browse-card-head::before,
.history-card.has-custom-photo-backdrop .history-card-head::before,
.browse-card.has-custom-photo-backdrop .browse-song::before,
.history-card.has-custom-photo-backdrop .history-meta::before{content:none}

/* Give the message its own bounded grid track so it can never run beneath music. */
.browse-card>.browse-open,
.history-card>.history-open{height:100%;min-height:0;align-content:stretch;overflow:hidden}
.browse-card .browse-excerpt,
.history-card .history-excerpt{height:auto;min-height:0;max-height:100%;align-self:stretch;overflow:hidden;text-overflow:clip}
.browse-card .browse-excerpt.is-truncated,
.history-card .history-excerpt.is-truncated,
.result-card .result-excerpt.is-truncated{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 1.25em),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 1.25em),transparent 100%)}
.browse-card .browse-excerpt{margin-bottom:clamp(12px,1.2vw,20px)}
.browse-card .browse-photos,
.history-card .history-photos{min-height:0;max-height:min(34vh,214px)}

/* The privacy label stays attached to the recipient and remains legible on every theme. */
.history-recipient-group{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.history-private-status{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:28px;padding:4px 10px;border:1px solid #d6e7ff;border-radius:999px;background:#f5f9ff;color:#075cb5;font-size:12px;font-weight:650;line-height:1.2;white-space:nowrap;box-shadow:0 1px 2px #0000000a}
@media(max-width:700px){.history-private-status{min-height:25px;padding:3px 8px;font-size:10px}}
@media(max-width:700px){
  .browse-photos,.result-photos,.history-photos{height:clamp(126px,34vw,190px);min-height:126px;gap:6px}
  .browse-photos[data-layout="overlap"],.result-photos[data-layout="overlap"],.history-photos[data-layout="overlap"]{height:clamp(126px,34vw,190px);min-height:126px}
}

/* Keep gallery photos fully in frame and let the letter theme show through
   transparent PNGs. Photo Stack keeps its layered feel without white outlines. */
.letter-photo-gallery[data-layout="gallery"] .letter-photo,
.browse-photos[data-layout="gallery"] .letter-photo,
.result-photos[data-layout="gallery"] .letter-photo,
.history-photos[data-layout="gallery"] .letter-photo{
  object-fit:contain;
  background:transparent;
}
.letter-photo-gallery[data-layout="stack"]{
  overflow:visible;
}
.letter-photo-gallery[data-layout="stack"] .letter-photo{
  aspect-ratio:4/3;
  object-fit:contain;
  border:0;
  box-shadow:0 4px 12px #10182716;
  background:transparent;
}
.browse-photos[data-layout="stack"] .letter-photo,
.result-photos[data-layout="stack"] .letter-photo,
.history-photos[data-layout="stack"] .letter-photo{
  object-fit:contain;
  border:0;
  background:transparent;
}

/* Let card shadows breathe beyond each Browse lane instead of clipping into a hard band. */
.letter-lanes{
  overflow-x:clip;
  overflow-y:visible;
  padding-block:0 12px;
  margin-bottom:36px;
}
.letter-lane{
  overflow-x:clip;
  overflow-y:visible;
  padding-block:0;
  margin-bottom:clamp(12px,1vw,18px);
}
.letter-lane:last-child{margin-bottom:0}

/* History stays manually scrollable and page-level vertical scrolling remains native. */
.history-shelf-track{
  scroll-snap-type:none;
  scroll-behavior:auto;
  touch-action:pan-x pan-y;
  padding-block:28px 36px;
  margin-block:-18px -18px;
}
.history-shelf-set>.history-card{scroll-snap-align:none}
@media(prefers-reduced-motion:reduce){
  .letter-lane{height:auto;overflow-x:auto;overflow-y:hidden;mask-image:none}
}

/* Support page: optional Ko-fi preview and launch-focused help. */
.support-kofi-card{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:22px 0 36px;padding:27px 30px;border:1px solid #dce5f1;border-radius:var(--radius-panel);background:linear-gradient(120deg,#fff 0%,#f5f8fd 100%);box-shadow:0 8px 24px #1d1d1f08}
.support-kofi-copy{max-width:620px}.support-kofi-copy .eyebrow{margin:0 0 8px;color:var(--blue);font-size:11px;letter-spacing:1px}.support-kofi-copy h2{margin:0 0 8px;font-size:clamp(21px,2.7vw,28px);letter-spacing:-.7px}.support-kofi-copy>p:last-child{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.support-kofi-action{display:flex;flex:0 0 auto;align-items:center;gap:12px}.support-kofi-action .primary-button{min-height:46px;white-space:nowrap}.support-official-profiles{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--muted);font-size:12px}.support-official-profiles>a{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fafbfc;transition:background .18s ease,border-color .18s ease,transform .18s ease}.support-official-profiles>a:hover{background:#fff;border-color:#b9cce4;transform:translateY(-1px)}.support-official-profiles>a:focus-visible{outline:3px solid #1677e8;outline-offset:3px}.support-social-icon{display:block;width:17px;height:17px;fill:#1877f2}.support-instagram-icon{fill:none;stroke:#c13584;stroke-width:1.8}.support-instagram-flash{fill:#c13584;stroke:none}
.support-about{margin:0 0 30px;padding:25px 28px;border:1px solid #e4e7ed;border-radius:var(--radius-panel);background:#fff;box-shadow:0 8px 24px #1d1d1f08}.support-about .eyebrow{margin:0 0 8px;color:var(--blue);font-size:11px;letter-spacing:1px}.support-about h2{margin:0 0 9px;font-size:clamp(21px,2.7vw,28px);letter-spacing:-.7px}.support-about>p{max-width:76ch;margin:0;color:var(--muted);font-size:15px;line-height:1.7}
@media(max-width:600px){.support-kofi-card{align-items:flex-start;flex-direction:column;gap:17px;margin:18px 0 30px;padding:22px 20px}.support-kofi-action{align-items:flex-start}.support-kofi-action>p{text-align:left}.support-about{padding:22px 20px}}
@media(max-width:600px){.support-official-profiles{margin-top:16px}}
.support-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.support-title-row h1{margin-bottom:0}
.support-version{flex:0 0 auto;margin:0 0 12px;padding:8px 13px;border:1px solid #e6e7eb;border-radius:999px;background:#fff;box-shadow:0 4px 12px #1827410c;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.04em;white-space:nowrap}
.support-lead{max-width:720px;margin:-4px 0 28px}.support-about{display:block}.support-about-copy{max-width:760px}.support-about-copy>.eyebrow{margin-bottom:9px}.support-about-copy>p:last-child{max-width:68ch}.support-about .support-official-profiles{display:flex;align-items:center;gap:8px;margin-top:16px}.support-about .support-official-profiles>a{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:13px;background:#f5f6f9;transition:background .18s ease,transform .18s ease}.support-about .support-official-profiles>a:hover{transform:translateY(-1px);background:#eef1f7}.support-about .support-official-profiles>a:focus-visible{outline:3px solid #1677e8;outline-offset:3px}.support-about .support-social-icon{width:17px;height:17px}.support-form{box-shadow:0 8px 24px #1d1d1f08}.support-form>.eyebrow{margin:0 0 8px;color:var(--blue);font-size:11px;letter-spacing:1px}.support-form h2{margin-bottom:8px}.support-form>p:not(.eyebrow){margin:0 0 19px}.support-form label:not(.sr-only){margin:0 0 8px}.support-form #support-contact{margin-bottom:0}.support-form .support-contact-note{margin:7px 0 18px!important;font-size:12px;line-height:1.5}.support-form textarea{margin:0 0 18px;min-height:160px;resize:vertical}.support-form textarea::-webkit-resizer{width:10px;height:10px;background:linear-gradient(135deg,transparent 0 57%,#aeb4bd 58% 61%,transparent 62%),linear-gradient(135deg,transparent 0 77%,#aeb4bd 78% 81%,transparent 82%)}.support-form button{min-width:130px}.support-status-warning{color:#9a5a00}
.editor-panel .editor-footer{margin-top:30px;padding:24px 0 0}
.support-form textarea{ text-align:left }
.support-form textarea::-webkit-resizer{width:7px;height:7px;background:linear-gradient(135deg,transparent 0 62%,#d2d5da 63% 66%,transparent 67%),linear-gradient(135deg,transparent 0 82%,#d2d5da 83% 86%,transparent 87%)}
.support-about{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:32px;row-gap:18px}
.support-about-copy{max-width:900px}
.support-about-copy>p:last-child{max-width:78ch;line-height:1.75}
.support-about .support-official-profiles{align-self:end;justify-self:end;margin:0 0 2px}
@media(max-width:600px){.support-about{grid-template-columns:minmax(0,1fr);align-items:start}.support-about .support-official-profiles{justify-self:start;margin:0}}

/* Browse uses the marquee rules at the end of this file; search results remain unique. */
.history-card .history-song,.history-card:hover .history-song{background:var(--history-footer);border-color:var(--history-line);color:var(--history-fg)}
.rich-paragraph{display:block;min-width:0}

/* Optional Browse rotation feature stays separate from Browse search visibility. */
.rotation-feature-choice{margin:4px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fafbfc}
.rotation-feature-choice[hidden]{display:none!important}
.rotation-feature-choice input:disabled{opacity:.5;cursor:not-allowed}
.rotation-feature-choice>span{display:block;line-height:1.45}
.rotation-feature-choice>span strong{font-size:14px}
.rotation-feature-choice>span small{color:var(--muted)}

/* Small History collections use one visible card at a time. Larger ones scroll once. */
.history-carousel-track{display:block;overflow:hidden;mask-image:none;touch-action:pan-y;padding:10px 4px 22px;margin:-4px 0 -8px}
.history-carousel-track>.history-shelf-set{display:block;width:100%;padding:0}
.history-carousel-track>.history-shelf-set>.history-card{width:100%;max-width:none;min-width:0;flex-basis:100%;height:clamp(390px,40vw,560px);scroll-snap-align:none}
.history-carousel-track>.history-shelf-set>.history-card[hidden]{display:none!important}
.history-carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 12px}
.history-carousel-button{min-height:40px;padding:8px 14px;font-size:13px}
.history-carousel-count{min-width:54px;text-align:center;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
@media(max-width:700px){.history-carousel-track>.history-shelf-set>.history-card{height:420px}.history-carousel-controls{margin-top:8px}}

/* Two sharing choices now use the full panel width after removing the third option. */
.privacy-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.privacy-choice{width:100%}
@media(max-width:640px){.privacy-choice-grid{grid-template-columns:minmax(0,1fr)}}

/* Give moving cards room inside scroll viewports so their rounded edges and
   shadows stay visible throughout the hover animation. */
.letter-lane{height:calc(clamp(320px,31vw,430px) + 20px);padding-block:22px 42px}
.history-shelf-track{padding-block:28px 56px}
.history-carousel-track{padding-block:24px 50px}
@media(max-width:900px){.letter-lane{height:calc(clamp(340px,50vw,460px) + 20px)}}
@media(max-width:600px){.letter-lane{height:380px}}
.letter-lane .browse-card,
.history-shelf-track .history-card,
.history-carousel-track .history-card{
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .2s ease,filter .2s ease;
}
.letter-lane .browse-card:hover,
.history-shelf-track .history-card:hover,
.history-carousel-track .history-card:hover{
  filter:none;
  z-index:3;
}
.letter-lane .browse-card:hover{transform:translateY(-5px) scale(1.008);box-shadow:0 18px 38px #17203322;border-color:color-mix(in srgb,var(--browse-fg,#1d1d1f) 24%,transparent)}
.letter-lane .browse-card:active{transform:translateY(-2px) scale(.995)}
.history-shelf-track .history-card:hover,
.history-carousel-track .history-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--history-fg,#1d1d1f) 17%,transparent),0 18px 38px #00000020;border-color:color-mix(in srgb,var(--history-fg,#1d1d1f) 32%,transparent)}
@media(prefers-reduced-motion:reduce){
  .letter-lane .browse-card:hover,.letter-lane .browse-card:active,
  .history-shelf-track .history-card:hover,.history-carousel-track .history-card:hover{transform:none}
}

/* Keep rich-text tools compact and make paragraph alignment one clear control. */
.format-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:14px;row-gap:9px;padding:11px 0;margin:0 0 12px;border-block:1px solid var(--line)}
.inline-format-buttons{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.inline-format-buttons button{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:7px 10px;border:1px solid transparent;border-radius:9px;background:#f5f5f7;color:var(--ink);font-size:14px;white-space:nowrap}
.inline-format-buttons button:hover,.alignment-buttons button:hover{background:#e9f2ff;color:var(--blue)}
.paragraph-format-group{display:flex;flex:1 1 100%;align-items:center;gap:9px;padding:0;border:0;white-space:nowrap}
.format-toolbar .alignment-buttons{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #e3e3e8;border-radius:11px;background:#f7f7f9}
.alignment-buttons button{display:grid;place-items:center;width:34px;height:32px;padding:6px;border:0;border-radius:7px;background:transparent;color:#5f626c}
.inline-format-buttons button[aria-pressed="true"],.alignment-buttons button[aria-pressed="true"]{background:#e5f1ff;color:var(--blue);border-color:#b8d7ff;box-shadow:0 0 0 1px #0071e322}
.alignment-buttons svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.format-toolbar .toolbar-help{flex:1 0 100%;margin:0;padding-left:2px;font-size:12px;line-height:1.45;color:var(--muted)}
@media(max-width:520px){.format-toolbar{column-gap:8px}.inline-format-buttons{flex-basis:100%;gap:5px}.inline-format-buttons button{min-width:35px;height:36px;padding:6px 8px}.paragraph-format-group{flex-basis:100%;padding:0;border:0}.alignment-buttons button{width:31px}}
#message-editor{display:block;width:100%;min-height:200px;padding:13px 14px;border:1px solid #dddde3;border-radius:12px;background:#fafafc;color:var(--ink);font-size:16px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;outline:none}
#message-editor:focus{border-color:var(--blue);outline:3px solid #0071e318}
#message-editor:empty::before{content:attr(data-placeholder);color:#82828a;pointer-events:none}
#message-editor .rich-paragraph{min-height:1.65em}
#message-editor .rich-heading{font-weight:700}
#message-editor .quote-line{border-left:2px solid var(--blue);padding-left:12px;color:var(--muted)}


/* Final layout overrides: true Browse marquee, stable card gaps at zoom, and usable color controls. */
.letter-lane{position:relative;height:clamp(350px,30vw,460px);overflow:hidden!important;overflow-x:hidden!important;overflow-y:hidden!important;scroll-snap-type:none!important;scrollbar-width:none;overscroll-behavior:none;mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);padding:20px 0 30px;margin:0 0 18px;box-sizing:border-box}
.letter-lane::-webkit-scrollbar{display:none}
.letter-lane .lane-track{position:absolute;inset:10px auto 18px 0;display:flex;width:max-content;min-width:0;height:auto;align-items:stretch;justify-content:flex-start;will-change:transform;animation:lane-left var(--lane-duration,60s) linear infinite;scroll-snap-type:none;gap:0}
.letter-lane.lane-right .lane-track{animation-name:lane-right}
.letter-lane .lane-track.lane-static{position:relative;inset:auto;display:flex;width:100%;min-width:100%;height:100%;justify-content:center;animation:none!important;transform:none!important;will-change:auto}
.letter-lane .lane-group{display:flex;width:max-content;min-width:max-content;max-width:none;height:100%;flex:0 0 max-content;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:clamp(14px,1.25vw,24px);padding:0 clamp(12px,1.5vw,26px) 0 0;box-sizing:border-box}
.letter-lane .lane-track.lane-static .lane-group{width:100%;min-width:0;max-width:100%;flex:0 1 auto;justify-content:center;padding:0 clamp(12px,1.5vw,26px);gap:clamp(12px,1.25vw,24px)}
.letter-lane .browse-card{position:relative;flex:0 0 clamp(300px,23vw,480px);width:clamp(300px,23vw,480px);min-width:0;max-width:clamp(300px,23vw,480px);height:100%;min-height:0;margin:0;box-sizing:border-box;overflow:hidden}
.letter-lane .lane-track.lane-static .browse-card{flex:0 1 clamp(260px,23vw,480px);width:auto;max-width:100%}
@media(max-width:900px){.letter-lane{height:clamp(340px,48vw,450px)}.letter-lane .browse-card{flex-basis:clamp(280px,44vw,420px);width:clamp(280px,44vw,420px);max-width:clamp(280px,44vw,420px)}}
@media(max-width:600px){.letter-lane{height:360px;padding-block:14px 24px;margin-bottom:14px}.letter-lane .lane-track{inset-block:8px 14px}.letter-lane .lane-group{gap:14px;padding-right:14px}.letter-lane .browse-card{flex-basis:min(84vw,380px);width:min(84vw,380px);max-width:min(84vw,380px)}}
@media(prefers-reduced-motion:reduce){.letter-lane .lane-track{animation:none!important;transform:none!important}.letter-lane .lane-track:not(.lane-static){position:relative;inset:auto;width:100%;min-width:100%;justify-content:center}.letter-lane .lane-track>.lane-group[aria-hidden=true]{display:none}}
#background-color-panel{padding:24px 26px 22px}
#background-color-choices{grid-template-columns:repeat(6,58px) max-content;gap:16px 18px}
#background-color-choices .background-swatch-slot{width:58px;height:58px}
#background-color-choices .background-color-swatch{width:48px;height:48px;min-height:48px;flex-basis:48px}
.background-swatch-edit,.background-swatch-reset{width:28px;height:28px;min-height:28px;border:1px solid #d2d4da;box-shadow:0 2px 7px #0003}
.background-swatch-edit{top:-1px;right:-1px;font-size:16px}
.background-swatch-reset{right:-1px;bottom:-1px;font-size:21px;line-height:1}
#background-color-choices .custom-color-choice{min-height:60px;gap:12px;padding:8px 14px 8px 18px;font-size:15px}
#background-color-choices .custom-color-choice input[type=color]{width:44px;height:44px;min-height:44px}
#swatch-customization-actions{gap:12px 18px;margin-top:20px}
#swatch-customization-actions .secondary-button{min-height:46px;padding:10px 18px;font-size:14px}
#swatch-customization-actions .text-button{min-height:44px;padding:8px 12px;font-size:14px}
@media(max-width:720px){#background-color-choices{grid-template-columns:repeat(3,58px);gap:14px 16px}#background-color-choices .custom-color-choice{grid-column:1/-1}}
@media(max-width:420px){#background-color-panel{padding:18px 16px}#background-color-choices{grid-template-columns:repeat(3,52px);gap:12px}#background-color-choices .background-swatch-slot{width:52px;height:52px}#background-color-choices .background-color-swatch{width:44px;height:44px;min-height:44px;flex-basis:44px}}
.site-version{margin-left:12px;color:var(--muted);font-size:11px;letter-spacing:.04em;white-space:nowrap}
@media(max-width:600px){.site-version{margin-left:0}}


/* Final refinements from the zoomed layout review. */
#background-color-panel{min-width:0;max-width:100%;box-sizing:border-box;overflow:visible}
#background-color-choices{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:14px 16px;min-width:0;max-width:100%;box-sizing:border-box}
#background-color-choices .background-swatch-slot{flex:0 0 58px}
#background-color-choices .custom-color-choice{flex:0 1 auto;max-width:100%;box-sizing:border-box;white-space:nowrap}
.letter-lane{height:clamp(390px,30vw,460px);padding:0;margin-bottom:10px;overflow:hidden!important;mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%)}
.letter-lane .lane-track{inset:28px auto 34px 0}
.letter-lane .lane-group{padding-left:clamp(34px,2.2vw,54px);padding-right:clamp(16px,1.2vw,24px);gap:clamp(16px,1.25vw,24px)}
.letter-lane .lane-track.lane-static .lane-group{padding-inline:clamp(20px,2vw,34px)}
.letter-lane .browse-card{box-shadow:0 12px 34px #18274118;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .24s ease}
.letter-lane .browse-card:hover{transform:translateY(-5px) scale(1.008);box-shadow:0 20px 48px #18274125}
@media(max-width:900px){.letter-lane{height:clamp(380px,48vw,450px)}.letter-lane .lane-track{inset:26px auto 32px 0}}
@media(max-width:600px){.letter-lane{height:370px;margin-bottom:8px}.letter-lane .lane-track{inset:22px auto 30px 0}.letter-lane .lane-group{padding-left:24px;padding-right:16px;gap:14px}}
@media(prefers-reduced-motion:reduce){.letter-lane .browse-card:hover{transform:none;box-shadow:0 12px 34px #18274118}}


/* Let the full soft card shadows escape the marquee viewport vertically. */
.letter-lanes{overflow-x:clip!important;overflow-y:visible!important;padding-block:22px 44px;margin-bottom:42px}
.letter-lane{height:clamp(430px,30vw,500px);overflow-x:clip!important;overflow-y:visible!important;padding:0;margin-bottom:28px;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.letter-lane .lane-track{inset:38px auto 50px 0}
.letter-lane .lane-group{padding-left:clamp(48px,3vw,72px);padding-right:clamp(28px,2vw,48px)}
.letter-lane .lane-track.lane-static .lane-group{padding-inline:clamp(34px,3vw,56px)}
.letter-lane .browse-card{box-shadow:0 4px 10px #18274108,0 18px 38px #18274116,0 42px 70px #1827410d;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,border-color .24s ease}
.letter-lane .browse-card:hover{box-shadow:0 8px 18px #18274110,0 26px 58px #18274121,0 52px 86px #18274112}
@media(max-width:900px){.letter-lanes{padding-block:16px 36px;margin-bottom:32px}.letter-lane{height:clamp(400px,48vw,470px);margin-bottom:22px}.letter-lane .lane-track{inset:32px auto 42px 0}.letter-lane .lane-group{padding-left:34px;padding-right:24px}}
@media(max-width:600px){.letter-lanes{padding-block:12px 30px;margin-bottom:26px}.letter-lane{height:390px;margin-bottom:18px}.letter-lane .lane-track{inset:24px auto 34px 0}.letter-lane .lane-group{padding-left:24px;padding-right:18px;gap:14px}}
@media(prefers-reduced-motion:reduce){.letter-lane .browse-card,.letter-lane .browse-card:hover{box-shadow:0 4px 10px #18274108,0 18px 38px #18274116,0 42px 70px #1827410d}}


/* The lane clips motion horizontally only; vertical shadows remain uncut. */
.letter-lanes{overflow-x:clip!important;overflow-y:visible!important;padding-block:28px 52px;margin-bottom:56px}
.letter-lane{height:clamp(470px,32vw,540px);overflow-x:clip!important;overflow-y:visible!important;mask-image:none!important;margin-bottom:48px}
.letter-lane::before,.letter-lane::after{content:"";position:absolute;z-index:10;top:0;bottom:0;width:clamp(36px,5vw,88px);pointer-events:none}
.letter-lane::before{left:0;background:linear-gradient(90deg,var(--canvas) 0%,color-mix(in srgb,var(--canvas) 70%,transparent) 52%,transparent 100%)}
.letter-lane::after{right:0;background:linear-gradient(270deg,var(--canvas) 0%,color-mix(in srgb,var(--canvas) 70%,transparent) 52%,transparent 100%)}
.letter-lane .lane-track{inset:44px auto 58px 0}
.letter-lane .lane-group{padding-left:clamp(76px,5vw,112px);padding-right:clamp(56px,4vw,88px)}
.letter-lane .lane-track.lane-static .lane-group{padding-inline:clamp(40px,4vw,72px)}
.letter-lane .browse-card{box-shadow:0 5px 14px #18274108,0 20px 42px #18274118,0 48px 78px #18274110}
.letter-lane .browse-card:hover{box-shadow:0 8px 20px #18274110,0 30px 64px #18274124,0 62px 96px #18274114}
@media(max-width:900px){.letter-lanes{padding-block:22px 42px;margin-bottom:42px}.letter-lane{height:clamp(430px,50vw,500px);margin-bottom:36px}.letter-lane .lane-track{inset:36px auto 48px 0}.letter-lane .lane-group{padding-left:56px;padding-right:40px}}
@media(max-width:600px){.letter-lanes{padding-block:16px 34px;margin-bottom:30px}.letter-lane{height:420px;margin-bottom:28px}.letter-lane .lane-track{inset:28px auto 40px 0}.letter-lane .lane-group{padding-left:38px;padding-right:28px;gap:14px}.letter-lane::before,.letter-lane::after{width:30px}}
@media(prefers-reduced-motion:reduce){.letter-lane .lane-track{animation:none!important}.letter-lane .browse-card,.letter-lane .browse-card:hover{box-shadow:0 5px 14px #18274108,0 20px 42px #18274118,0 48px 78px #18274110}}

/* 1.4.0: preserve card shadow breathing room at every zoom level. The moving
   lanes clip only on the sides; vertical space stays open around each row. */
.letter-lanes{
  overflow-x:clip!important;overflow-y:visible!important;
  padding-block:30px 66px;margin-bottom:68px;isolation:isolate
}
.letter-lane{
  height:clamp(390px,27vw,500px);overflow-x:clip!important;overflow-y:visible!important;
  margin:0 0 48px;contain:layout;mask-image:none!important
}
.letter-lane:last-child{margin-bottom:0}
.letter-lane::before,.letter-lane::after{top:0;bottom:0}
.letter-lane .lane-track{inset:46px auto 64px 0;align-items:stretch}
.letter-lane .lane-group{align-items:stretch;gap:clamp(20px,1.5vw,32px);padding-left:clamp(64px,5vw,112px);padding-right:clamp(48px,4vw,88px)}
.letter-lane .lane-track.lane-static .lane-group{padding-inline:clamp(24px,3vw,64px);gap:clamp(16px,1.5vw,28px)}
.letter-lane .browse-card{
  flex:0 0 clamp(280px,24vw,560px);width:clamp(280px,24vw,560px);max-width:clamp(280px,24vw,560px);
  box-shadow:0 6px 14px #1827410a,0 22px 44px #18274118,0 48px 72px #1827410d;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,border-color .24s ease
}
.letter-lane .browse-card:hover{transform:translateY(-5px);box-shadow:0 10px 22px #18274112,0 30px 58px #18274122,0 58px 88px #18274112}
.history-shelf-track{
  align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;
  padding:48px clamp(38px,4vw,76px) 72px;margin:-16px calc(-1 * clamp(38px,4vw,76px)) 0;
  width:calc(100% + clamp(38px,4vw,76px) + clamp(38px,4vw,76px));mask-image:none;scrollbar-width:none
}
.history-shelf-set{gap:clamp(20px,1.5vw,32px);padding-inline:0 clamp(38px,4vw,76px)}
.history-shelf-set>.history-card{
  flex-basis:clamp(280px,30vw,560px);width:clamp(280px,30vw,560px);
  height:clamp(360px,28vw,500px);scroll-snap-align:none
}
.history-card,.history-card:hover{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,border-color .24s ease}
.history-shelf-track .history-card:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--history-fg,#1d1d1f) 17%,transparent),0 22px 48px #00000020,0 48px 70px #0000000c}
.history-carousel-track{padding:34px 10px 62px;margin:-14px 0 0;overflow:visible}
.history-carousel-track>.history-shelf-set>.history-card{height:clamp(360px,36vw,500px)}
select{
  -webkit-appearance:none;appearance:none;border-radius:18px!important;
  background-color:#fff;background-clip:padding-box;
  padding-right:48px!important;box-shadow:0 1px 2px #18274108;
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
}
select:focus{border-radius:18px!important}
body{font-variant-emoji:emoji}
.letter-card,.browse-card,.history-card,.result-card,.letter-body,.browse-excerpt,.history-excerpt,.letter-signoff{
  font-variant-emoji:emoji
}
@media(max-width:900px){
  .letter-lanes{padding-block:24px 56px;margin-bottom:54px}
  .letter-lane{height:clamp(370px,48vw,470px);margin-bottom:38px}
  .letter-lane .lane-track{inset:38px auto 54px 0}
  .letter-lane .lane-group{padding-left:48px;padding-right:36px}
  .history-shelf-track{padding-block:42px 64px}
  .history-shelf-set>.history-card{height:clamp(350px,42vw,460px)}
}
@media(max-width:700px){
  #browse-view.view,#history-view.view{width:100%;padding-inline:14px}
  .letter-lanes{padding-block:14px 40px;margin-bottom:38px}
  .letter-lane{height:330px;margin-bottom:28px}
  .letter-lane .lane-track{inset:24px auto 42px 0}
  .letter-lane .lane-group{gap:14px;padding-left:24px;padding-right:20px}
  .letter-lane .lane-track.lane-static .lane-group{padding-inline:14px;gap:12px}
  .letter-lane .browse-card,.letter-lane .lane-track.lane-static .browse-card{
    flex:0 0 min(78vw,310px);width:min(78vw,310px);max-width:min(78vw,310px)
  }
  .history-shelf-track{
    padding:34px max(16px,4vw) 54px;margin:-10px -14px 0;
    width:calc(100% + 28px);scroll-snap-type:none
  }
  .history-shelf-set{gap:16px;padding-inline:0 max(16px,4vw)}
  .history-shelf-set>.history-card{flex-basis:min(78vw,330px);width:min(78vw,330px);height:330px}
  .history-carousel-track{padding:28px 4px 52px;margin:-8px 0 0}
  .history-carousel-track>.history-shelf-set>.history-card{height:330px}
  .history-carousel-controls{margin:0 0 14px}
  .editor-panel .next-button{scroll-margin-top:12px}
}
@media(max-width:380px){
  .letter-lane .browse-card,.letter-lane .lane-track.lane-static .browse-card{flex-basis:76vw;width:76vw;max-width:76vw}
  .history-shelf-set>.history-card{flex-basis:76vw;width:76vw}
}
@media(prefers-reduced-motion:reduce){
  .letter-lane .browse-card,.letter-lane .browse-card:hover{transform:none}
}

/* 1.5.0: measured card sizing, breathing room, and calmer controls. */
.letter-lane .lane-group{
  gap:clamp(14px,1.1vw,22px);
  padding-left:clamp(28px,2.4vw,48px);
  padding-right:clamp(24px,2vw,40px)
}
.letter-lane .lane-track.lane-static .lane-group{
  padding-inline:clamp(20px,2vw,36px);
  gap:clamp(12px,1vw,20px)
}
.letter-lane .browse-card{
  flex-basis:clamp(280px,23vw,420px);
  width:clamp(280px,23vw,420px);
  max-width:clamp(280px,23vw,420px)
}
.letter-lane .lane-track.lane-static .browse-card{
  flex-basis:min(100%,420px);width:auto;max-width:100%
}
.letter-lanes{padding-block:28px 58px;margin-bottom:56px}
.letter-lane{height:clamp(400px,29vw,510px);margin-bottom:40px}
.letter-lane .lane-track{inset:50px auto 68px 0}
.history-shelf-set{gap:clamp(16px,1.2vw,24px)}
.history-shelf-set>.history-card{
  flex-basis:clamp(280px,27vw,500px);width:clamp(280px,27vw,500px);
  height:clamp(350px,29vw,490px)
}
.history-carousel-track>.history-shelf-set>.history-card{height:clamp(350px,34vw,490px)}
@media (min-width:1800px) and (max-width:3200px){
  .letter-lane{height:clamp(760px,30vw,940px)}
  .letter-lane .browse-card{flex-basis:clamp(620px,27vw,760px);width:clamp(620px,27vw,760px);max-width:clamp(620px,27vw,760px)}
  .letter-lane .lane-track.lane-static .browse-card{flex-basis:min(100%,760px);width:auto;max-width:100%}
  .history-shelf-set>.history-card{flex-basis:clamp(620px,27vw,760px);width:clamp(620px,27vw,760px);height:clamp(700px,31vw,860px)}
  .history-carousel-track>.history-shelf-set>.history-card{height:clamp(700px,34vw,860px)}
}
@media (hover:hover){
  #reader-content>.letter-card:hover,#full-preview .letter-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px #18274118,0 34px 70px #18274116
  }
}
#reader-content>.letter-card,#full-preview .letter-card{
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease
}
.primary-button,.next-button,.secondary-button{
  transition:transform .18s ease,box-shadow .22s ease,background-color .18s ease,border-color .18s ease
}
.primary-button:hover,.next-button:hover,.secondary-button:hover{
  transform:translateY(-1px);box-shadow:0 7px 20px #0071e326
}
.primary-button:focus-visible,.next-button:focus-visible,.secondary-button:focus-visible{
  box-shadow:0 0 0 4px #0071e31c,0 8px 24px #0071e326
}
#background-color-panel{
  padding:24px;border:1px solid #e5e7ed;border-radius:22px;
  background:linear-gradient(155deg,#fbfbfd,#f6f7fa);
  box-shadow:0 8px 24px #18274108
}
#background-color-panel>label{font-size:16px;font-weight:650;margin-bottom:18px}
#background-color-choices{gap:18px 20px;align-items:center}
#background-color-choices .background-swatch-slot{
  width:62px;height:62px;flex:0 0 62px;border-radius:18px;
  background:#fff;border:1px solid #e5e6eb;box-shadow:0 3px 10px #1827410b
}
#background-color-choices .background-color-swatch{width:46px;height:46px;min-height:46px;flex-basis:46px}
#background-color-choices .background-swatch-edit,
#background-color-choices .background-swatch-reset{box-shadow:0 2px 9px #1827411c}
#background-color-choices .custom-color-choice{
  min-height:62px;padding:8px 10px 8px 18px;border:1px solid #dfe2e9;
  border-radius:18px;background:#fff;font-size:15px;font-weight:600
}
#background-color-choices .custom-color-choice input[type=color]{width:46px;height:46px;min-height:46px;border-radius:14px;padding:4px}
#swatch-customization-actions{display:flex;align-items:center;gap:12px 16px;margin-top:22px}
#swatch-customization-actions .secondary-button{min-height:48px;padding:12px 20px;border-radius:15px;font-weight:600}
#swatch-customization-actions .text-button{min-height:44px;padding:10px 14px;border:1px solid #e2e4ea;border-radius:14px;background:#fff}
#swatch-customization-actions .help-text{flex-basis:100%;margin:0!important}
.site-footer{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;position:relative;max-width:1280px;
  margin:28px auto 18px;padding:20px 5%;border:1px solid #ffffffd9;
  border-radius:24px;background:#ffffffc9;box-shadow:0 12px 34px #1827410d;
  color:var(--muted);font-size:12px;line-height:1.5
}
.site-footer-brand{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.site-footer-note{color:var(--muted);font-size:12px}
.site-version{
  position:static;transform:none;margin:1px 0 0;padding:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.04em;white-space:nowrap
}
body[data-page="support"] .site-footer{max-width:1080px;width:calc(100% - 48px)}
.site-footer{padding-block:24px}
.letter-lane .lane-group,
.letter-lane .lane-track.lane-static .lane-group{gap:clamp(8px,.55vw,12px);padding-inline:clamp(8px,.55vw,12px);}
.letter-lane .lane-track:hover,
.letter-lane:focus-within .lane-track{animation-play-state:running!important;}
.history-shelf-track.history-single-track{display:block;overflow:visible;overflow-x:visible;scroll-snap-type:none;touch-action:auto;mask-image:none;padding:42px 0 64px;margin:0;}
.history-single-track>.history-shelf-set{display:flex;width:100%;max-width:100%;min-width:0;justify-content:center;gap:0;padding:0;}
.history-single-track>.history-shelf-set>.history-card{flex:0 1 var(--rotation-card-width);width:var(--rotation-card-width);max-width:var(--rotation-card-width);min-width:0;height:var(--rotation-card-height);}
body[data-page="support"] .site-footer{margin-inline:auto;}
@media(max-width:700px){
  .letter-lanes{padding-block:20px 44px;margin-bottom:42px}
  .letter-lane{height:350px;margin-bottom:32px}
  .letter-lane .lane-track{inset:30px auto 48px 0}
  .letter-lane .lane-group{gap:14px;padding-left:22px;padding-right:18px}
  .letter-lane .browse-card,.letter-lane .lane-track.lane-static .browse-card{flex-basis:min(78vw,360px);width:min(78vw,360px);max-width:min(78vw,360px)}
  .history-shelf-set>.history-card{flex-basis:min(78vw,360px);width:min(78vw,360px);height:350px}
  .history-carousel-track>.history-shelf-set>.history-card{height:350px}
  .site-footer{margin:20px 14px 14px;padding:22px 16px}
}
@media(max-width:420px){
  #background-color-panel{padding:18px 16px}
  #background-color-choices{gap:14px}
  #background-color-choices .background-swatch-slot{width:56px;height:56px;flex-basis:56px}
  #background-color-choices .background-color-swatch{width:42px;height:42px;min-height:42px;flex-basis:42px}
  .site-footer{padding:22px 16px}
}
@media(prefers-reduced-motion:reduce){
  .primary-button,.next-button,.secondary-button,#reader-content>.letter-card,#full-preview .letter-card{transition:none}
  .primary-button:hover,.next-button:hover,.secondary-button:hover{transform:none;box-shadow:none}
  #reader-content>.letter-card:hover,#full-preview .letter-card:hover{transform:none}
}

/* 1.5.3: keep Browse and History cards in step at different desktop zoom levels. */
:root{
  --rotation-card-width:clamp(280px,23vw,420px);
  --rotation-card-height:clamp(350px,29vw,490px);
}
.letter-lane{height:calc(var(--rotation-card-height) + 120px);}
.letter-lane .lane-track{inset:50px auto 70px 0!important;}
.letter-lane .browse-card,
.letter-lane .lane-track.lane-static .browse-card,
.history-shelf-set>.history-card,
.history-carousel-track>.history-shelf-set>.history-card{
  flex-basis:var(--rotation-card-width);
  width:var(--rotation-card-width);
  max-width:var(--rotation-card-width);
  height:var(--rotation-card-height);
  min-height:0;
  box-sizing:border-box;
}
.letter-lane .lane-track.lane-static .browse-card{flex-basis:min(100%,var(--rotation-card-width));width:auto;max-width:100%;}
.history-shelf-track{padding-block:52px 70px;}
.history-carousel-track{padding-block:44px 64px;}
.letter-lane .lane-group[aria-hidden="true"]{pointer-events:none!important;}
.letter-lane .lane-track,
.letter-lane .lane-track:hover,
.letter-lane:focus-within .lane-track{animation-play-state:running!important;}
.letter-lane .browse-card,
.history-shelf-track .history-card,
.history-carousel-track .history-card{position:relative;z-index:0;}
@media(hover:hover) and (pointer:fine){
  .letter-lane .browse-card:hover,
  .history-shelf-track .history-card:hover,
  .history-carousel-track .history-card:hover{z-index:4;transform:translateY(-5px);}
}
@media(min-width:1500px) and (max-width:2199px){
  :root{--rotation-card-width:clamp(300px,20vw,420px);--rotation-card-height:clamp(340px,25vw,440px);}
}
@media(min-width:2200px) and (max-width:3599px){
  :root{--rotation-card-width:clamp(600px,24vw,720px);--rotation-card-height:clamp(680px,26vw,820px);}
}
@media(max-width:700px), (hover:none) and (pointer:coarse){
  :root{--rotation-card-width:min(78vw,360px);--rotation-card-height:350px;}
  .letter-lanes{padding-block:18px 42px;margin-bottom:38px;}
  .letter-lane{height:calc(var(--rotation-card-height) + 72px);margin-bottom:22px;}
  .letter-lane .lane-track{inset:24px auto 36px 0!important;}
  .letter-lane .lane-group{gap:14px;padding-inline:24px 20px;}
  .letter-lane .browse-card,
  .letter-lane .lane-track.lane-static .browse-card,
  .history-shelf-set>.history-card,
  .history-carousel-track>.history-shelf-set>.history-card{flex-basis:var(--rotation-card-width);width:var(--rotation-card-width);max-width:var(--rotation-card-width);height:var(--rotation-card-height);}
  .history-shelf-track{padding-block:40px 56px;}
  .history-carousel-track{padding-block:34px 52px;}
  .site-footer{margin:20px 14px 14px;padding:22px 16px;gap:5px;}
  .site-version{position:static;transform:none;margin-top:1px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:10px;letter-spacing:.02em;}
}
@media(max-width:380px){
  :root{--rotation-card-width:76vw;--rotation-card-height:330px;}
}
@media(max-width:700px){
  .support-title-row{align-items:flex-start;gap:12px;}
  .support-title-row h1{font-size:clamp(34px,9vw,45px);}
  .support-version{margin-top:4px;margin-bottom:0;padding:6px 9px;font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
  .letter-lane .browse-card:hover,.history-shelf-track .history-card:hover,.history-carousel-track .history-card:hover{transform:none;}
}

/* 1.5.5: keep selected typography consistent across both card dates and browsers. */
.browse-card.font-sans :is(.browse-title,.browse-card-date){font-family:-apple-system,BlinkMacSystemFont,sans-serif;}
.browse-card.font-serif :is(.browse-title,.browse-card-date){font-family:Georgia,serif;}
.browse-card.font-mono :is(.browse-title,.browse-card-date){font-family:ui-monospace,monospace;}
.browse-card.font-hand :is(.browse-title,.browse-card-date){font-family:Caveat,cursive;}
.browse-card.font-casual :is(.browse-title,.browse-card-date){font-family:'Bradley Hand','Comic Sans MS',cursive;font-style:italic;}
.browse-card.font-marker :is(.browse-title,.browse-card-date){font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:600;letter-spacing:.01em;}
.browse-card.font-rounded :is(.browse-title,.browse-card-date){font-family:Nunito,ui-rounded,sans-serif;}
.browse-card.font-romantic :is(.browse-title,.browse-card-date){font-family:Playfair,Georgia,serif;font-style:italic;}
.history-card.font-sans :is(.history-date,.history-sent){font-family:-apple-system,BlinkMacSystemFont,sans-serif;}
.history-card.font-serif :is(.history-date,.history-sent){font-family:Georgia,serif;}
.history-card.font-mono :is(.history-date,.history-sent){font-family:ui-monospace,monospace;}
.history-card.font-hand :is(.history-date,.history-sent){font-family:Caveat,cursive;}
.history-card.font-casual :is(.history-date,.history-sent){font-family:'Bradley Hand','Comic Sans MS',cursive;font-style:italic;}
.history-card.font-marker :is(.history-date,.history-sent){font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:600;letter-spacing:.01em;}
.history-card.font-rounded :is(.history-date,.history-sent){font-family:Nunito,ui-rounded,sans-serif;}
.history-card.font-romantic :is(.history-date,.history-sent){font-family:Playfair,Georgia,serif;font-style:italic;}

/* 1.5.7: keep card gaps compact and stable at browser zoom levels. */
.letter-lane .lane-group,
.letter-lane .lane-track.lane-static .lane-group{gap:clamp(8px,.55vw,12px)!important;padding-inline:clamp(8px,.55vw,12px)!important;}
.letter-lane .lane-track,
.letter-lane .lane-track:hover,
.letter-lane:focus-within .lane-track{animation-play-state:running!important;}
.history-shelf-track.history-single-track{display:block;overflow:visible;overflow-x:visible;scroll-snap-type:none;touch-action:auto;mask-image:none;padding:42px 0 64px;margin:0;}
.history-single-track>.history-shelf-set{display:flex;width:100%;max-width:100%;min-width:0;justify-content:center;gap:0;padding:0;}
.history-single-track>.history-shelf-set>.history-card{flex:0 1 var(--rotation-card-width);width:var(--rotation-card-width);max-width:var(--rotation-card-width);min-width:0;height:var(--rotation-card-height);}
body[data-page="support"] .site-footer{width:calc(100% - 48px);max-width:1080px;margin-inline:auto;}
@media(max-width:700px){
  .site-footer{padding:22px 16px;}
  .site-version{position:static;transform:none;margin-top:1px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
  .history-shelf-track.history-single-track{padding-block:34px 52px;}
}
.submit-progress{flex:1 1 180px;min-width:150px;color:var(--muted);font-size:13px;line-height:1.4;}
#submit-letter[aria-busy="true"]{opacity:1;filter:saturate(.88);}
@media(max-width:760px){.submit-progress{order:3;flex-basis:100%;}}