@font-face{font-family:"Noto Sans Arabic";src:url("fonts/NotoSansArabic.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:light;--paper:#f6f0df;--cream:#fffaf0;--ink:#1e1a2d;--muted:#4d4855;--yellow:#f5d748;--blue:#9bc7e7;--coral:#ee7868;--lilac:#c8b7e4;--burgundy:#81021f;--line:#1e1a2d;--shadow:7px 7px 0 var(--ink)}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif;line-height:1.8}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#1e1a2d16 .55px,transparent .55px);background-size:15px 15px;opacity:.55}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--burgundy);outline-offset:4px}
img,svg{max-width:100%}
h1,h2,h3,p{margin-top:0}
p{color:var(--muted)}
.skip-link{position:fixed;top:-80px;right:18px;z-index:100;background:var(--yellow);border:2px solid var(--ink);padding:8px 14px;font-weight:800}
.skip-link:focus{top:12px}
.page-shell{position:relative;width:min(100% - 56px,1220px);min-height:100vh;margin:auto;display:flex;flex-direction:column}
.site-header{position:relative;z-index:30;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:2px solid var(--ink)}
.header-lead{display:flex;align-items:center;gap:24px;min-width:0}
.brand{display:flex;align-items:center;justify-content:center;width:136px;flex:none;border:2px solid var(--ink);background:#e5d4b6;box-shadow:4px 4px 0 var(--ink);transition:transform .18s,box-shadow .18s}
.brand img{display:block;width:132px;height:auto;aspect-ratio:1720/670}
.brand:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.menu-button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 15px;border:2px solid var(--ink);border-radius:100px;background:var(--cream);color:var(--ink);font-weight:800;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.menu-button:hover,.menu-button[aria-expanded="true"]{background:var(--yellow);text-decoration:none}
.menu-icon{width:18px;display:grid;gap:5px}
.menu-icon span{height:2px;width:100%;background:var(--ink);border-radius:3px}
.utility-nav{display:flex;align-items:center;gap:10px;font-size:.91rem;font-weight:750}
.utility-nav a,.utility-nav .text-button{padding:7px 11px;border-radius:8px;white-space:nowrap}
.utility-nav a:hover,.utility-nav .text-button:hover{background:#eee6d5;text-decoration:none}
.inline-form{display:inline;margin:0}
.text-button{color:var(--ink);background:none;border:0;font-weight:750}
main{flex:1;padding:clamp(32px,5vw,68px) 0 86px;min-width:0}
.site-footer{display:flex;justify-content:space-between;gap:20px;padding:19px 0 27px;border-top:2px solid var(--ink);font-size:.78rem;font-weight:650;color:var(--muted)}
.site-footer [lang=en]{font-family:Arial,sans-serif;font-weight:800;letter-spacing:.035em}
.eyebrow{display:inline-block;margin-bottom:15px;color:var(--burgundy);font-size:.8rem;font-weight:900;letter-spacing:.005em}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:51px;padding:9px 23px;border:2px solid var(--ink);border-radius:12px;background:var(--yellow);color:var(--ink);font-weight:900;line-height:1.45;box-shadow:4px 4px 0 var(--ink);transition:transform .18s,box-shadow .18s,background .18s}
.button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:#ffe360;text-decoration:none}
.button-secondary{background:var(--cream)}
.button-secondary:hover{background:#fff}
.button-danger{background:var(--coral)}
.button-danger:hover{background:#f39487}
.full{width:100%}
.text-link{font-weight:850;text-decoration:underline;text-underline-offset:5px}
.panel{background:var(--cream);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow)}

/* Hanging charm navigation */
[hidden]{display:none!important}
.charm-menu{position:absolute;z-index:25;top:88px;right:0;left:0;padding:28px 36px 34px;background:var(--cream);border:2px solid var(--ink);border-top:0;border-radius:0 0 22px 22px;box-shadow:9px 12px 0 var(--ink)}
.menu-heading{text-align:center}
.menu-heading .eyebrow{margin-bottom:0}
.menu-heading p{margin:0;font-size:.96rem}
.charm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.charm-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:248px;padding:70px 10px 10px;text-align:center;border-radius:12px;animation:charm-drop .72s cubic-bezier(.18,.7,.2,1.22) both}
.charm-link:nth-child(2){animation-delay:.08s}.charm-link:nth-child(3){animation-delay:.16s}.charm-link:nth-child(4){animation-delay:.24s}
.charm-link::before{content:"";position:absolute;top:0;left:50%;width:2px;height:77px;background:var(--ink)}
.charm-link:hover{background:#f5eddc;text-decoration:none}
.charm-link svg{position:relative;width:min(100%,145px);height:130px;flex:none;filter:drop-shadow(4px 4px 0 var(--ink));transform-origin:50% 0;animation:charm-sway 2.3s ease-in-out .65s 1}
.charm-label{display:grid;place-items:center;min-height:45px;padding:5px 9px;margin-top:7px;font-size:.88rem;font-weight:850;line-height:1.45;background:var(--paper);border:2px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--ink)}
.charm-ring,.charm-detail{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.charm-hole{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.charm-body,.charm-seal,.charm-spine,.charm-petals ellipse,.charm-center{stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.charm-envelope .charm-body{fill:#f2ddc4}.charm-envelope .charm-seal{fill:var(--coral)}
.charm-stone .charm-body{fill:#5d9ab3}.charm-stone .charm-seal{fill:#72adc3}
.charm-flower .charm-petals ellipse{fill:var(--coral)}.charm-flower .charm-center{fill:var(--paper)}
.charm-book .charm-body{fill:var(--paper)}.charm-book .charm-spine,.charm-book .charm-seal{fill:var(--coral)}
@keyframes charm-drop{from{opacity:0;transform:translateY(-100px) rotate(-7deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes charm-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg)}62%{transform:rotate(-2.5deg)}}

/* Homepage */
.home-page main{display:flex;flex-direction:column;justify-content:center;padding:30px 0 46px}
.hero{position:relative;display:grid;place-items:center;min-height:min(700px,calc(100svh - 192px));overflow:hidden;text-align:center}
.hero-content{position:relative;z-index:2;max-width:960px;padding:72px 24px 82px}
.hero-eyebrow{margin-bottom:23px;font-size:.94rem}
.hero h1{margin:0 0 24px;font-size:clamp(3.5rem,7.6vw,7.8rem);font-weight:900;line-height:1.28;letter-spacing:-.055em}
.hero-highlight{position:relative;display:inline-block;white-space:nowrap}
.hero-highlight::after{content:"";position:absolute;z-index:-1;right:-3%;left:-3%;bottom:10%;height:25%;background:var(--yellow);transform:rotate(-2deg);border-radius:20px}
.hero p{max-width:590px;margin:0 auto 29px;color:#34303e;font-size:clamp(1rem,1.75vw,1.18rem);font-weight:650;line-height:2.1}
.hero-actions{justify-content:center}
.hero-mark{position:absolute;display:block;z-index:1}
.hero-mark-one{width:150px;height:150px;top:9%;right:4%;border:3px solid var(--ink);border-radius:50%;background:var(--blue);box-shadow:8px 8px 0 var(--ink)}
.hero-mark-one::after{content:"";position:absolute;width:52px;height:52px;top:42px;left:44px;border:3px solid var(--ink);border-radius:50%;background:var(--paper)}
.hero-mark-two{width:123px;height:105px;bottom:17%;left:6%;border:3px solid var(--ink);border-radius:22px;background:var(--lilac);transform:rotate(16deg);box-shadow:7px 7px 0 var(--ink)}
.hero-mark-two::after{content:"";position:absolute;inset:20px 18px;border:2px solid var(--ink);border-radius:12px}
.hero-flower{position:absolute;bottom:4%;right:19%;width:72px;height:72px;transform:rotate(14deg);opacity:.95}
.hero-flower span{position:absolute;width:30px;height:42px;left:21px;top:3px;background:var(--coral);border:2px solid var(--ink);border-radius:100% 100% 65% 65%;transform-origin:50% 33px}
.hero-flower span:nth-child(2){transform:rotate(72deg)}.hero-flower span:nth-child(3){transform:rotate(144deg)}.hero-flower span:nth-child(4){transform:rotate(216deg)}.hero-flower span:nth-child(5){transform:rotate(288deg)}
.hero-flower i{position:absolute;top:27px;left:27px;width:18px;height:18px;background:var(--yellow);border:2px solid var(--ink);border-radius:50%}
.home-note{display:flex;justify-content:space-between;gap:18px;padding:15px 3px 0;border-top:2px solid var(--ink);font-size:.85rem;font-weight:800}
.home-note a{text-decoration:underline;text-underline-offset:4px}

/* Story pages */
.story-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(25px,5vw,72px);align-items:center;min-height:570px}
.story-copy h1,.page-intro h1,.about-copy h1{font-size:clamp(2.7rem,5.2vw,5.3rem);line-height:1.33;letter-spacing:-.045em;margin-bottom:20px}
.story-copy h1 em,.page-intro h1 em,.about-copy h1 em{font-style:normal;color:var(--burgundy)}
.story-copy p,.page-intro p,.about-copy p{font-size:1.07rem;line-height:2.25;max-width:690px}
.story-figure{margin:0;padding:12px;background:var(--blue);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);transform:rotate(-1.5deg)}
.story-figure img{display:block;width:100%;height:auto;border:1px solid var(--ink);border-radius:9px}
.story-figure figcaption{padding:9px 4px 2px;font-size:.76rem;font-weight:750;line-height:1.55}
.story-strip{display:flex;justify-content:space-between;gap:16px;max-width:800px;margin:70px auto 0;padding:20px 28px;border-block:2px solid var(--ink);font-size:1.15rem;font-weight:900;text-align:center}
.story-strip span:nth-child(2){color:var(--burgundy)}
.page-intro{max-width:900px;margin:0 auto 50px;text-align:center}
.page-intro p{margin-inline:auto}
.steps-list{list-style:none;display:grid;gap:15px;max-width:900px;margin:0 auto;padding:0}
.steps-list li{display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:start;padding:24px 28px;background:var(--cream);border:2px solid var(--ink);border-radius:15px;box-shadow:4px 4px 0 var(--ink)}
.steps-list li:nth-child(2){background:#e8dcf3}.steps-list li:nth-child(3){background:#e4f0f7}
.step-number{font:900 2rem Arial,sans-serif;color:var(--burgundy);direction:ltr;text-align:center}
.steps-list h2{font-size:1.28rem;margin:0 0 4px}.steps-list p{margin:0;line-height:2}
.note-box{max-width:900px;margin:35px auto 0;padding:25px 28px;background:var(--yellow);border:2px solid var(--ink);border-radius:15px}
.note-box strong{font-size:1.2rem}.note-box p{margin:4px 0 0;color:var(--ink)}
.page-end-action{text-align:center;margin-top:30px}
.concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.concept-card{min-width:0;margin:0;overflow:hidden;background:var(--cream);border:2px solid var(--ink);border-radius:17px;box-shadow:5px 5px 0 var(--ink)}
.concept-card img{display:block;width:100%;height:auto;background:#eee}
.concept-card figcaption{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 18px;border-top:2px solid var(--ink)}
.concept-card figcaption span{display:grid;place-items:center;width:34px;height:34px;flex:none;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font:800 .85rem Arial,sans-serif}
.concept-card strong{font-size:.96rem}.concept-card small{margin-inline-start:auto;font-size:.72rem;color:var(--muted);white-space:nowrap}
.about-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(35px,6vw,85px);align-items:center;min-height:580px}
.about-graphic{display:grid;place-items:center;min-height:390px;padding:35px;transform:rotate(5deg);background:var(--lilac);border:3px solid var(--ink);border-radius:34px;box-shadow:12px 12px 0 var(--ink)}
.about-graphic img{width:min(100%,400px);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.about-copy .button{margin-top:10px}

/* Recipient */
.recipient-page{background:#f3eadb}
.recipient-page main{display:grid;place-items:center;padding-top:35px}
.recipient-wrap{width:min(100%,730px);text-align:center}
.recipient-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;padding:0 3px;font-size:.79rem;font-weight:850}
.recipient-topline span:last-child{font-size:1.7rem;line-height:1;color:var(--burgundy)}
.recipient-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:370px;padding:clamp(30px,6vw,64px);background:var(--cream);border:3px solid var(--ink);border-radius:24px;box-shadow:9px 9px 0 var(--ink)}
.recipient-card::before,.recipient-card::after{content:"";position:absolute;width:42px;height:42px;border:2px solid var(--ink);background:var(--blue);border-radius:50%;opacity:.8}
.recipient-card::before{top:-19px;right:48px}.recipient-card::after{bottom:-19px;left:48px;background:var(--coral)}
.recipient-stamp{display:grid;place-items:center;width:45px;height:45px;margin-bottom:18px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:1.5rem;line-height:1}
.recipient-card .eyebrow{margin:0 0 4px}
.recipient-card h1{font-size:clamp(1.6rem,4vw,2.65rem);line-height:1.45;margin:0 0 17px}
.recipient-message{width:100%;max-width:610px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start;color:var(--ink);font-size:clamp(1.35rem,3vw,2.05rem);font-weight:750;line-height:2.05}
.recipient-empty{max-width:500px;margin:0;font-size:1.1rem;line-height:2.2}
.recipient-next{margin:37px auto 0;min-width:170px;background:var(--coral)}
.recipient-next:hover{background:#f39081}
.recipient-hint{font-size:.8rem;margin:14px 0 0}

/* Forms and account */
.form-panel{width:min(100%,610px);margin:12px auto;padding:clamp(25px,5vw,49px)}
.form-panel h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.4;margin-bottom:10px}
.form-panel .intro{margin-bottom:28px}
.field{margin:0 0 21px}
.field label{display:block;margin-bottom:7px;font-size:.92rem;font-weight:850}
.field input:not([type=checkbox]),.field textarea{display:block;width:100%;min-height:48px;padding:10px 13px;border:2px solid var(--ink);border-radius:10px;background:#fffdf7;color:var(--ink);outline:none;line-height:1.65}
.field input:focus,.field textarea:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px #81021f25}
.field textarea{min-height:160px;resize:vertical;unicode-bidi:plaintext}
.field input[name=code],.field input[name=username],.field input[name=password],.field input[name=password1],.field input[name=password2]{direction:ltr;text-align:left}
.checkbox-field{display:flex;align-items:center;gap:10px}.checkbox-field label{margin:0}.checkbox-field input{width:20px;height:20px;accent-color:var(--burgundy)}
.errors{margin:6px 0 0;color:#8a1024;font-size:.83rem;font-weight:700}.errors ul{margin:5px 0;padding-right:20px}
.below-form{text-align:center;margin:22px 0 0;font-size:.89rem}.below-form a{font-weight:900;text-decoration:underline;text-underline-offset:4px}
.dashboard-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:27px}
.dashboard-head h1{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.3;margin:0 0 7px}
.dashboard-head p{margin:0}.dashboard-head .button{flex:none}
.link-panel{padding:23px 27px;margin-bottom:37px;background:#e5eff7}.link-panel h2{font-size:1.2rem;margin:0 0 4px}.link-panel p{margin:0 0 10px;font-size:.9rem}.recipient-link{display:block;direction:ltr;text-align:left;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:4px;font:.88rem/1.7 Arial,sans-serif}
.messages-section h2{margin:0 0 17px;font-size:1.38rem}.count{display:inline-grid;place-items:center;min-width:31px;height:31px;padding:0 5px;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;font:800 .84rem Arial,sans-serif}
.message-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.message-item{min-width:0;padding:22px 24px;box-shadow:5px 5px 0 var(--ink)}
.message-item.muted{background:#eee9e1}.message-top{display:flex;justify-content:flex-start;margin-bottom:8px}
.status{display:inline-block;padding:3px 10px;border:1.5px solid var(--ink);border-radius:100px;font-size:.71rem;font-weight:850;line-height:1.4}.status.visible{background:#daf0db}.status.hidden{background:#e7e2dc}
.message-text{min-height:70px;margin:0 0 15px;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;color:var(--ink);font-weight:650}
.message-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px;padding-top:13px;border-top:1px solid #b8b0a6;font-size:.83rem;font-weight:850}
.message-actions a,.message-actions button{text-decoration:underline;text-underline-offset:4px}.message-actions form{margin:0}.danger-link{color:#8a1024}
.empty-list{padding:36px;text-align:center}.delete-preview{margin:22px 0 28px;padding:19px 23px;background:#f8e6dd;border:2px solid var(--ink);border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}
.cassette-panel{padding:24px 27px;margin-bottom:24px}.cassette-panel h2{font-size:1.2rem;margin:0 0 9px}.cassette-panel p{margin:0 0 15px}.cassette-panel .field{max-width:520px}.cassette-panel .text-button{font-weight:850;text-decoration:underline}
.cassette-tracks{display:grid;gap:11px;margin:0;padding:0;list-style:none;counter-reset:cassette}
.cassette-tracks li{counter-increment:cassette;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px}
.cassette-tracks li::before{content:counter(cassette);display:grid;place-items:center;flex:none;width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font:800 .8rem Arial,sans-serif}
.cassette-tracks li>div{flex:1;min-width:0}.cassette-tracks strong,.cassette-tracks small{display:block;overflow-wrap:anywhere}.cassette-tracks small{color:var(--muted)}
.cassette-note{font-size:.83rem;color:var(--muted)}.cassette-tap{margin:45px auto}.cassette-tap .button{margin-top:18px}
.cassette-tap .recipient-card{background:#f1d581}.cassette-tap .recipient-card::before,.cassette-tap .recipient-card::after{display:none}
.cassette-tap .recipient-card h1{margin-bottom:17px}.cassette-tap .recipient-card p{margin:9px 0}
.cassette-machine{width:min(100%,360px);padding:15px 18px 12px;margin:5px auto 15px;border:3px solid var(--ink);border-radius:14px;background:#fff8e9;box-shadow:5px 5px 0 var(--ink);direction:ltr}
.cassette-machine-label{display:flex;align-items:center;justify-content:space-between;padding:0 3px 7px;font:800 .72rem Arial,sans-serif;letter-spacing:.1em}.cassette-machine-label b{font-size:1.18rem;letter-spacing:0;color:var(--burgundy)}
.cassette-window{display:flex;align-items:center;justify-content:space-around;height:91px;border:3px solid var(--ink);border-radius:9px;background:#a7cad0;overflow:hidden}
.cassette-reel{position:relative;width:67px;height:67px;border:3px solid var(--ink);border-radius:50%;background:#fff8e9;box-shadow:inset 0 0 0 6px #e6a0a8}
.cassette-reel::after{content:"";position:absolute;inset:20px;border:3px solid var(--ink);border-radius:50%;background:#f1d581}
.cassette-tape{height:13px;flex:1;margin:0 -2px;background:var(--ink)}
.cassette-machine-base{display:flex;justify-content:space-between;width:65%;margin:13px auto 0}.cassette-machine-base span{width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:#e6a0a8}
.cassette-tap .recipient-card{min-height:0}.cassette-controls{width:min(100%,480px);display:grid;justify-items:center;gap:12px;margin-top:14px}.cassette-play{min-width:190px;font-size:1.1rem}.cassette-skip-controls{display:flex;gap:10px}.cassette-skip-controls .button{min-width:90px}.cassette-progress{display:flex;direction:ltr;align-items:center;gap:9px;width:100%;font:700 .8rem Arial,sans-serif}.cassette-progress input{flex:1;min-width:0;accent-color:var(--burgundy)}.cassette-status{min-height:2.5em;color:var(--burgundy);font-weight:800}.cassette-playlist{width:100%;margin:26px auto;padding:24px;background:var(--cream);text-align:right}.cassette-playlist h2{margin:0 0 15px;font-size:1.25rem}.cassette-playlist ol{padding:0;margin:0;list-style:none;display:grid;gap:8px}.cassette-playlist li{margin:0}.cassette-track{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:2px solid var(--ink);border-radius:10px;background:#fffaf0;color:var(--ink);font:inherit;text-align:right;cursor:pointer}.cassette-track:hover,.cassette-track:focus-visible{background:#f7e9bd}.cassette-track[aria-current="true"]{background:#f1d581;box-shadow:3px 3px 0 var(--ink)}.cassette-track-number{display:grid;place-items:center;flex:none;width:31px;height:31px;border:2px solid var(--ink);border-radius:50%;background:#e5eff7;font:800 .8rem Arial,sans-serif}.cassette-track-name{flex:1;min-width:0}.cassette-track-name strong,.cassette-track-name small{display:block;overflow-wrap:anywhere}.cassette-track-name small{font-size:.8rem;color:var(--muted)}.cassette-track-badge{flex:none;font-size:.72rem;font-weight:850;color:var(--burgundy)}.cassette-playlist .cassette-note{margin:17px 0}.cassette-telegram-link{display:inline-flex}.cassette-telegram-attention{outline:3px solid var(--burgundy);outline-offset:4px}
.cassette-playlist li{display:flex;align-items:center;gap:8px}.cassette-playlist li .cassette-track{flex:1;min-width:0}.cassette-track-telegram{flex:none;font-size:.78rem;font-weight:850;text-decoration:underline;text-underline-offset:3px;color:var(--burgundy)}
.cassette-controls .button{margin-top:0}
.web-upload progress{display:block;width:min(100%,480px);height:18px;margin:12px 0;accent-color:var(--burgundy)}.web-upload progress[hidden]{display:none}.web-upload-actions{display:flex;flex-wrap:wrap;gap:12px}.web-upload [data-upload-status]{min-height:1.8em;color:var(--burgundy);font-weight:800}.web-upload .field input[type=file]{padding:8px;max-width:520px}.cassette-tracks li{flex-wrap:wrap}.cassette-tracks li>button{flex:none;min-height:44px}.web-upload-success{padding:14px 18px;background:#e4f3df;color:#16451f;font-weight:850}
.cassette-tap.autoplay-blocked .cassette-play{min-width:220px;transform:scale(1.08);outline:4px solid var(--burgundy);outline-offset:4px}

@media(max-width:900px){.hero-mark-one{right:1%;width:105px;height:105px}.hero-mark-one::after{width:35px;height:35px;top:30px;left:30px}.hero-mark-two{left:2%;width:82px;height:74px}.hero-flower{right:7%}.story-hero,.about-layout{grid-template-columns:1fr}.story-hero{max-width:780px;margin:auto}.story-figure{max-width:520px;width:100%;margin:auto}.about-graphic{min-height:250px;max-width:460px;width:100%;margin:auto}.about-graphic img{max-width:300px}}
@media(max-width:650px){.page-shell{width:min(100% - 28px,1220px)}.site-header{min-height:76px;flex-wrap:wrap;gap:5px;padding:10px 0}.header-lead{gap:11px}.brand{width:97px;box-shadow:3px 3px 0 var(--ink)}.brand img{width:93px}.menu-button{min-height:40px;padding:5px 10px;font-size:.75rem;box-shadow:2px 2px 0 var(--ink)}.utility-nav{gap:0;font-size:.72rem}.utility-nav a,.utility-nav .text-button{padding:7px 5px}.charm-menu{top:76px;padding:17px 12px 22px;box-shadow:5px 8px 0 var(--ink)}.menu-heading p{font-size:.8rem}.charm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 6px}.charm-link{min-height:188px;padding:35px 2px 4px}.charm-link::before{height:39px}.charm-link svg{width:104px;height:104px}.charm-label{font-size:.74rem;min-height:43px;margin-top:3px;padding:3px 5px}.home-page main{padding:22px 0 36px}.hero{min-height:min(660px,calc(100svh - 170px))}.hero-content{padding:80px 8px 100px}.hero h1{font-size:clamp(2.8rem,10.2vw,4.9rem);line-height:1.4}.hero-eyebrow{font-size:.78rem;margin-bottom:12px}.hero p{max-width:380px;font-size:.93rem;line-height:2}.hero-mark-one{top:3%;right:3%;width:65px;height:65px;box-shadow:4px 4px 0 var(--ink)}.hero-mark-one::after{top:17px;left:17px;width:24px;height:24px}.hero-mark-two{bottom:4%;left:4%;width:60px;height:54px;box-shadow:4px 4px 0 var(--ink)}.hero-mark-two::after{inset:12px}.hero-flower{right:5%;bottom:8%;transform:scale(.68) rotate(14deg)}.home-note{font-size:.72rem}.site-footer{font-size:.71rem;line-height:1.5}.story-copy h1,.page-intro h1,.about-copy h1{font-size:clamp(2.45rem,9vw,3.7rem)}.story-copy p,.page-intro p,.about-copy p{font-size:.96rem}.story-strip{padding:16px 6px;font-size:.86rem}.concept-grid{grid-template-columns:1fr}.dashboard-head{display:block}.dashboard-head .button{margin-top:16px}.message-list{grid-template-columns:1fr}.recipient-page main{padding-top:42px}.recipient-card{min-height:360px;padding:36px 26px;box-shadow:6px 6px 0 var(--ink)}.recipient-message{font-size:1.28rem}.recipient-card::before{right:22px}.recipient-card::after{left:22px}}
@media(max-width:390px){.page-shell{width:calc(100% - 22px)}.header-lead{gap:7px}.brand{width:83px}.brand img{width:79px}.menu-button{font-size:.68rem;padding:4px 8px}.utility-nav{font-size:.67rem}.hero h1{font-size:clamp(2.45rem,10.1vw,3.1rem)}.hero-actions{gap:10px}.hero-actions .button{font-size:.8rem;padding:8px 11px;min-height:47px}.steps-list li{grid-template-columns:55px 1fr;gap:9px;padding:18px 15px}.step-number{font-size:1.25rem}.recipient-card{padding:32px 21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Homepage layout, kept separate from the shared interior-page styles. */
.home-page{background:#fff7e8}
.home-page::before{display:none}
.home-page .page-shell{width:100%;max-width:none;background:#fff7e8}
.home-page main{display:block;padding:0}
.home-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;min-height:92px;padding:10px max(24px,calc((100vw - 1180px)/2));border-bottom:3px solid var(--ink);background:#fffaf0}
.home-header-links{display:flex;justify-self:start;align-items:center;flex-wrap:wrap;gap:9px}
.home-header-links a{padding:7px 14px;border:2px solid var(--ink);border-radius:100px;background:#fffaf0;box-shadow:3px 3px 0 var(--ink);font-size:.85rem;font-weight:850;white-space:nowrap}
.home-header-links a:hover{background:#f5d748;text-decoration:none}
.home-brand{display:block;width:138px;border:2px solid var(--ink);border-radius:11px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg)}
.home-brand img{display:block;width:100%;height:auto}
.home-account{display:grid;place-items:center;justify-self:end;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:#f5d748;box-shadow:3px 3px 0 var(--ink)}
.home-account:hover{background:#ffe777}
.home-account svg{width:25px;height:25px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.home-banner{position:relative;display:grid;place-items:center;min-height:clamp(190px,18.75vw,270px);padding:18px 20px;background:#dd9819 url('launch-banner-desktop.png') center/cover no-repeat;color:#81021f;text-align:center;border-bottom:3px solid var(--ink)}
.home-banner-copy{position:relative;z-index:1;max-width:650px;padding:6px 20px;text-shadow:0 1px 0 #f6c768}
.home-banner-copy span{color:#81021f;font-size:.78rem;font-weight:900}
.home-banner-copy h1{margin:2px 0;font-size:clamp(1.7rem,3vw,2.9rem);line-height:1.4}
.home-banner-copy p{margin:0;color:#601626;font-size:.86rem;font-weight:700}
.home-explore{padding:clamp(34px,5vw,58px) max(20px,calc((100vw - 1180px)/2)) 72px;background:radial-gradient(#81021f13 .7px,transparent .7px) 0 0/18px 18px,#fff7e8}
.home-intro{text-align:center;margin:0 auto 28px;max-width:650px}
.home-intro .eyebrow{margin-bottom:4px}
.home-intro h2{margin:0 0 4px;font-size:clamp(1.5rem,3vw,2.45rem);line-height:1.45}
.home-intro p{margin:0;font-size:.89rem}
.home-slot-wrap{width:min(100% - 48px,650px);margin:auto}
.home-slot{position:relative;display:block;width:100%;min-height:115px;padding:12px 47px 12px 15px;border:4px solid var(--ink);border-radius:21px;background:#e9a64d;box-shadow:9px 9px 0 var(--ink);color:var(--ink);touch-action:pan-x}
.home-slot:hover .home-slot-face{background:#fffdf5}
.home-slot-face{display:flex;justify-content:center;align-items:center;gap:20px;min-height:81px;border:3px solid var(--ink);border-radius:10px;background:#fff7e8;box-shadow:inset 0 0 0 5px #f3d882;font-size:clamp(1.5rem,3vw,2.7rem);font-weight:950;line-height:1.2;white-space:nowrap}
.slot-star{color:#81021f;font-size:.65em}
.lever{position:absolute;right:-29px;top:-28px;width:86px;height:155px;pointer-events:none}
.lever-base{position:absolute;bottom:13px;right:18px;width:38px;height:38px;border:3px solid var(--ink);border-radius:8px;background:#c47a39}
.lever-stem{position:absolute;bottom:48px;right:34px;width:8px;height:79px;border:2px solid var(--ink);border-radius:6px;background:#f1d581;transform-origin:bottom center;transition:transform .36s ease}
.lever-ball{position:absolute;top:0;right:16px;width:46px;height:46px;border:3px solid var(--ink);border-radius:50%;background:#81021f;box-shadow:3px 3px 0 #df9b9c;transition:transform .36s ease}
.home-slot[aria-expanded="true"] .lever-stem{transform:rotate(30deg)}
.home-slot[aria-expanded="true"] .lever-ball{transform:translate(-17px,34px)}
.home-slot-hint{margin:20px 0 31px;text-align:center;color:#6f4b4b;font-size:.78rem;font-weight:800}
.home-products{max-width:1180px;margin:auto;scroll-margin-top:18px;border:3px solid var(--ink);border-radius:23px;background:#fffaf0;box-shadow:8px 8px 0 var(--ink);padding:19px 26px 34px}
.home-products[hidden]{display:none!important}
.home-products-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.home-products-head h2{margin:0;font-size:1.35rem}
.home-products-head span{font-size:.75rem;color:#70464b;font-weight:700}
.home-charm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-charm{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:300px;padding:142px 9px 8px;border-radius:13px;text-align:center}
.home-charm::before{content:"";position:absolute;top:0;left:50%;width:3px;height:117px;background:var(--ink);transform:translateX(-50%)}
.home-charm:hover{background:#f4ecda;text-decoration:none}
.home-charm-art{position:absolute;top:93px;left:50%;display:grid;place-items:center;width:122px;height:110px;transform:translateX(-50%);transition:transform .25s ease}
.home-charm:hover .home-charm-art{transform:translateX(-50%) rotate(6deg)}
.home-charm-art::before{content:"";position:absolute;top:-5px;left:calc(50% - 8px);width:16px;height:13px;border:3px solid var(--ink);border-radius:50%;background:#f3d882}
.home-charm-art svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(4px 4px 0 var(--ink))}
.home-charm-art svg>*{stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.home-charm-letter svg rect{fill:#edcca4}.home-charm-letter svg path{fill:none}.home-charm-letter svg circle{fill:#e7959d}
.home-charm-cassette svg rect:first-child{fill:#f1d581}.home-charm-cassette svg rect:nth-child(2){fill:#8ab9b8}.home-charm-cassette svg circle{fill:#fff7e8}.home-charm-cassette svg path{fill:none}
.home-charm-how svg circle{fill:#e9d4b3}.home-charm-how svg path{fill:none}
.home-charm-about svg path{fill:#e6a0a8}.home-charm-about svg circle{fill:#f1d581}
.home-charm strong{margin-top:65px;font-size:1.08rem;line-height:1.4}
.home-charm small{display:block;min-height:42px;margin:5px 0 9px;color:#574753;font-size:.76rem;line-height:1.7}
.home-charm-tag{display:inline-block;margin-top:auto;padding:3px 12px;border:2px solid var(--ink);border-radius:100px;background:#f5d748;font-size:.7rem;font-weight:850}
.home-charm-tag-muted{background:#eee5d7}
.home-footer{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding:30px max(24px,calc((100vw - 1180px)/2)) 38px;border-top:3px solid var(--ink);background:#81021f;color:#fff7e8}
.home-footer h2{margin:0 0 7px;color:#f5d748;font-size:.94rem}
.home-footer p{margin:0;color:#fff7e8;font-size:.78rem;line-height:1.9}
.home-footer nav a{display:block;width:max-content;max-width:100%;font-size:.78rem;line-height:2}
.home-contact-placeholder,.home-contact-value{display:inline-block;margin-top:9px;padding:4px 10px;border:1px dashed #e3bd8d;border-radius:7px;color:#f6dfba;font-size:.73rem;font-weight:700}
.home-contact-value{text-decoration:underline}
@media(max-width:700px){.home-header{min-height:76px;gap:8px;padding:8px 14px}.home-header-links{gap:4px}.home-header-links a{padding:6px 7px;font-size:.64rem;box-shadow:2px 2px 0 var(--ink)}.home-brand{width:96px;box-shadow:3px 3px 0 var(--ink)}.home-account{width:40px;height:40px}.home-account svg{width:22px}.home-banner{min-height:clamp(190px,50vw,320px);place-items:start center;padding:4px 8px;background-image:url('launch-banner-mobile.png');background-size:100% auto;background-position:center bottom}.home-banner-copy{padding:4px 8px}.home-banner-copy span{font-size:.67rem}.home-banner-copy h1{font-size:clamp(1.35rem,5.5vw,2rem)}.home-banner-copy p{font-size:.68rem}.home-explore{padding:33px 17px 55px}.home-slot{min-height:86px;padding:8px 32px 8px 9px;box-shadow:5px 5px 0 var(--ink)}.home-slot-face{min-height:62px;gap:7px;font-size:clamp(1.25rem,6vw,1.7rem)}.lever{transform:scale(.78);transform-origin:right center;right:-27px}.home-products{padding:15px 10px 22px;box-shadow:5px 5px 0 var(--ink)}.home-products-head{display:block;text-align:center}.home-products-head h2{font-size:1.1rem}.home-charm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.home-charm{min-height:250px;padding:122px 4px 6px}.home-charm::before{height:95px}.home-charm-art{top:73px;width:102px;height:93px}.home-charm strong{margin-top:49px;font-size:.9rem}.home-charm small{font-size:.68rem;min-height:37px}.home-footer{grid-template-columns:1fr 1fr;gap:21px;padding:25px 20px 31px}.home-footer>div{grid-column:1/-1}}
@media(max-width:390px){.home-header{padding-inline:8px}.home-header-links a{font-size:.58rem;padding:6px 5px}.home-brand{width:85px}.home-account{width:37px;height:37px}.home-banner-copy p{font-size:.62rem}.home-slot-wrap{width:calc(100% - 31px)}.home-slot-face{gap:4px}.slot-star{font-size:.48em}.home-charm small{font-size:.63rem}}

@media(max-width:700px){.home-banner-copy{padding:0 8px}.home-banner-copy span,.home-banner-copy p{display:none}.home-banner-copy h1{margin:0;font-size:clamp(1.25rem,5.5vw,1.75rem);line-height:1.4}}