@font-face{font-family:Book;src:local('Baskerville'),local('Georgia')}*{box-sizing:border-box}body{margin:0;background:#f7f5ef;color:#292b25;font-family:Arial,sans-serif}button,input,textarea,select{font:inherit;color:inherit}button,a,label.restore{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #7b8e79;outline-offset:5px}header{max-width:1440px;margin:auto;padding:30px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d8d8ce}.brand{font-family:Book,Georgia,serif;font-size:24px;font-style:italic;color:inherit;text-decoration:none}nav{display:flex;gap:25px;align-items:center;font-size:12px}select{border:0;background:transparent}main{max-width:1200px;margin:auto}.intro{text-align:center;padding:55px 20px 0}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:3px;color:#74796a}h1{font-family:Book,Georgia,serif;font-weight:400;font-size:clamp(43px,6vw,76px);letter-spacing:-2px;margin:19px 0 14px}p{line-height:1.65}.intro p{font-size:14px;color:#777a70;margin:auto;max-width:450px}.stage{height:390px;display:flex;align-items:center;justify-content:center;gap:80px}.margin-note{width:150px;font:italic 19px/1.6 Book,Georgia,serif;transform:rotate(-8deg);color:#838976}.side-note{width:150px;font-size:12px;color:#858777}.star{font-size:45px;color:#8b987b}.jar-wrap{position:relative;width:265px;height:290px;margin-top:30px}.jar-lid{position:absolute;z-index:5;width:193px;height:21px;border:1px solid #969b8c;border-radius:8px 8px 4px 4px;left:36px;top:0;background:repeating-linear-gradient(90deg,#e1e3d7 0 3px,#cbd0c0 4px 5px);transform-origin:85% 50%}.jar-neck{position:absolute;left:44px;top:20px;width:177px;height:24px;border:1px solid #aab2a2;border-bottom:0}.jar{position:absolute;top:36px;width:265px;height:244px;border:1.5px solid #a5b09e;border-radius:34px 34px 49px 49px;background:linear-gradient(100deg,#e3ead929,transparent 45%,#d5e1d133);box-shadow:inset 6px 0 8px #ffffff80,inset -5px -5px 9px #b8c4ae20;overflow:hidden}.shine{position:absolute;top:33px;left:15px;width:8px;height:135px;background:#fff8;border-radius:50%;transform:rotate(2deg)}.jar-label{position:absolute;top:58px;left:52px;width:160px;padding:17px 8px;background:#f8f6eae6;text-align:center;border:1px solid #deddd0;z-index:2;font:italic 21px Book,Georgia,serif;pointer-events:none}.jar-label small{display:block;font:9px Arial;margin-top:10px;letter-spacing:1px;color:#777c6e}.shadow{position:absolute;bottom:0;left:15px;width:235px;height:10px;border-radius:50%;background:#727c6420;filter:blur(7px)}.piece{position:absolute;width:29px;height:21px;border-radius:2px;box-shadow:1px 2px 3px #0002;background:#e7c5c0;color:#77785c;text-align:center;font-size:22px;line-height:23px;border:1px solid #0000000a}.piece.blank{background:#fffdf8}.piece.flower,.piece.grass,.piece.candy{background:transparent;border:0;box-shadow:none;font-size:31px}.actions{text-align:center;padding:0 20px 42px}#status{font-size:12px;color:#737a68;margin:0 0 20px}.primary{display:block;background:#394632;color:#fffef8;border-radius:2px;padding:17px 30px;min-width:230px;margin:15px auto;font-size:13px}.primary:hover{background:#4c5c42}.text-button{font-size:12px;text-decoration:underline;text-underline-offset:4px}.fine{font-size:11px;color:#848779;line-height:1.7}footer{border-top:1px solid #d8d8ce;margin:0 5%;padding:23px 0;display:flex;gap:20px;font-size:10px;color:#838779}footer>span{flex:1}dialog{border:1px solid #d7d9cd;padding:38px;width:min(92vw,510px);background:#faf8f1;color:inherit;box-shadow:0 20px 100px #202a2820}dialog::backdrop{background:#33392b45;backdrop-filter:blur(4px)}h2{font:normal 34px Book,Georgia,serif;margin:15px 0 25px}.close{position:absolute;right:13px;top:8px;font-size:27px;color:#888}textarea{width:100%;min-height:130px;background:#fffdf8;border:1px solid #d8dbce;padding:15px;resize:vertical;line-height:1.6}.row{display:flex;justify-content:space-between;font-size:10px;margin:10px 0 22px}.row button{text-decoration:underline}.upload{display:block;border:1px dashed #bdc2b0;padding:17px;text-align:center;font-size:12px;cursor:pointer}#photoPreview{max-width:100%;max-height:180px;margin-top:15px}#confirmedText{font:bold 27px/1.4 Book,Georgia,serif;overflow-wrap:anywhere}label[for]{display:block;font-size:12px;margin:22px 0 9px}input[type=date],#material{width:100%;padding:13px;border:1px solid #d2d7c7;background:#fffdf8}.error{color:#a34236;font-size:12px}#success{text-align:center}#book{border-top:1px solid #d8d8ce;padding:50px 25px;max-width:850px;margin:auto}#book h2{text-align:center;font-size:48px}.chapter{margin:45px 0 20px;letter-spacing:2px;font-size:12px;text-transform:uppercase}.entry{border-top:1px solid #dddccf;padding:25px 0;display:grid;grid-template-columns:40px 1fr;gap:15px}.entry p{font:24px/1.6 Book,Georgia,serif;margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}.entry img{max-width:100%;max-height:500px;display:block;margin:20px 0}.entry small{font-size:10px;color:#888}.entry input{margin-top:14px}.book-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.book-actions button{border:1px solid #aaa;padding:12px;font-size:12px}.opening .jar-lid{animation:lid 1.8s ease-in-out}.falling{animation:fall 1.2s ease-in-out}.new-jar{margin-top:40px}#giftWelcome{background:#eeece0;padding:20px;margin:20px auto;max-width:500px;font:italic 22px/1.6 Book,Georgia,serif;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere}@keyframes lid{0%,100%{transform:translateY(0) rotate(0)}30%,70%{transform:translate(25px,-55px) rotate(25deg)}}@keyframes fall{0%{transform:translateY(-260px) rotate(-30deg);opacity:0}30%{opacity:1}75%{transform:translateY(8px) rotate(15deg)}100%{transform:translateY(0)}}[hidden]{display:none!important}@media(max-width:600px){header{padding:22px 5%}nav{gap:10px;font-size:10px}.brand{font-size:20px}.intro{padding-top:40px}h1{letter-spacing:-1px}.stage{height:365px;gap:0}.margin-note{position:absolute;left:12px;width:80px;font-size:13px;z-index:3;top:300px}.side-note{display:none}.jar-wrap{transform:scale(.94)}footer{flex-wrap:wrap}dialog{padding:30px 23px}.entry p{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

/* Русская версия: выразительная типографика без засечек. */
body{font-family:Arial,Helvetica,sans-serif}
.brand{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:18px;font-weight:700;letter-spacing:-.6px}
h1{font-family:Arial,Helvetica,sans-serif;font-weight:400;line-height:.95;letter-spacing:-3px;margin:23px 0}
h1 strong{display:block;font-weight:800;font-size:clamp(68px,12vw,142px);letter-spacing:-.065em}
h1 span{display:block;font-size:clamp(35px,6vw,65px);font-weight:400;letter-spacing:-.045em;margin-top:8px}
h2,#book h2,.entry p,#confirmedText,.margin-note,.jar-label,#giftWelcome{font-family:Arial,Helvetica,sans-serif;font-style:normal}
.margin-note{font-size:15px;line-height:1.6}
.jar-label{font-size:19px;font-weight:600}
button,.primary,.book-actions button{border-radius:20px}
nav button{padding:9px 12px}
nav button:hover{background:#e9eadd}
.close{width:34px;height:34px;line-height:30px;padding:0}
@media(max-width:600px){.brand{font-size:14px}nav{gap:3px}nav button{padding:8px;font-size:10px}.margin-note{font-size:12px}.intro{padding-top:32px}.stage{height:340px}}

/* Банка как накопительный счёт счастливых моментов. */
header{padding-top:22px;padding-bottom:22px;border-bottom:0}
.brand-a{color:#a7ae95}
.intro{padding:30px 20px 0}
.eyebrow{letter-spacing:2px;font-size:9px}
h1{margin:18px 0 18px;display:flex;align-items:baseline;justify-content:center;gap:15px;line-height:1}
h1 strong{font-size:clamp(46px,6.5vw,76px);letter-spacing:-.065em}
h1 .extra-a{display:inline;font:inherit;color:#9ba78b;letter-spacing:inherit;margin:0}
h1 .title-second{font-size:clamp(35px,5.2vw,60px);margin:0;letter-spacing:-.05em}
.intro p{max-width:445px;font-size:13px;line-height:1.75;color:#74796d;text-wrap:pretty}
.stage{height:340px;gap:0}
.margin-note,.side-note{display:none}
.jar-wrap{width:250px;height:266px;margin-top:8px;filter:drop-shadow(0 14px 17px #67745912)}
.jar-lid{left:29px;top:0;width:192px;height:24px;border:1px solid #84917988;border-radius:12px 12px 6px 6px;background:repeating-linear-gradient(90deg,#d7deca 0 3px,#b7c4a5 4px 5px);box-shadow:inset 0 3px 3px #faffef,0 2px 2px #51634520}
.jar-neck{left:38px;top:24px;width:174px;height:23px;border-color:#a3b39c99;background:linear-gradient(90deg,#d8e5ce55,#ffffff99,#c6d7bd66)}
.jar{top:40px;width:250px;height:218px;border:1px solid #9bad9399;border-radius:38px 38px 45px 45px;background:linear-gradient(105deg,#ffffffb8 0%,#e7efdf50 12%,#ffffff15 38%,#d8e6ce50 78%,#ffffffa1 93%,#bbceae55);box-shadow:inset 6px 0 8px #fff9,inset -6px -8px 13px #93ab7d22,inset 0 -3px 3px #a0b38f66}
.shine{top:30px;left:15px;width:9px;height:130px;background:linear-gradient(#fff2,#fffd,#fff0);filter:blur(1px)}
.glass-rim{position:absolute;left:12px;right:12px;bottom:8px;height:18px;border:1px solid #b2c2a755;border-top:0;border-radius:0 0 50% 50%}
.jar-label{left:48px;top:61px;width:154px;padding:18px 8px 16px;border:1px solid #dedfd0;background:#faf9efeb;box-shadow:0 2px 4px #6574480a;font-size:16px;letter-spacing:-.5px;transform:rotate(-3deg)}
.jar-label:before{content:'✳';display:block;font-size:25px;font-weight:400;color:#8a9c75;margin-bottom:8px}
.jar-label small{font-size:8px;letter-spacing:.5px;margin-top:8px}
.shadow{width:210px;left:20px;bottom:1px;background:#66765020;filter:blur(9px)}
.actions{padding-bottom:28px}#status{margin-bottom:12px;font-size:11px}.primary{margin-top:12px;margin-bottom:15px;padding:16px 26px}.actions .fine{margin:18px auto 0;max-width:350px;font-size:10px}footer{padding-top:18px;padding-bottom:18px}
@media(max-width:600px){.intro{padding-top:24px}h1{gap:9px;margin:18px 0}h1 strong{font-size:49px}h1 .title-second{font-size:38px}.intro p{max-width:335px;font-size:12px}.stage{height:315px}.jar-wrap{transform:scale(.98)}.brand{font-size:14px}.eyebrow{font-size:8px;letter-spacing:1.4px}}
@media(max-width:360px){h1 strong{font-size:41px}h1 .title-second{font-size:32px}}
/* Тихая бумажная фактура и немного несовершенства ручного рисунка. */
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23grain)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:180px 180px;mix-blend-mode:multiply}
body{background:#f8f4ea}.stage{height:304px}.jar-wrap{transform:rotate(-2deg);filter:drop-shadow(4px 11px 9px #83735412)}.jar{border:1.6px solid #7c8c7180;border-radius:35px 42px 39px 46px;background:linear-gradient(102deg,#fdfcf499,#e5ecd754 30%,#f8f6e866 75%,#d4dfc954);box-shadow:inset 3px -3px 0 #a3b29420,inset -5px 0 9px #fdfcf4aa}.jar:after{content:'';position:absolute;inset:4px 3px 6px 5px;border:1px solid #8b9c7040;border-radius:34px 39px 42px 37px;pointer-events:none}.jar-lid{border-radius:9px 12px 5px 7px;transform:rotate(1deg);background:repeating-linear-gradient(92deg,#d7dcbf 0 4px,#adb992 5px 6px);box-shadow:inset 0 3px 0 #fbf6dfaa,1px 2px 0 #9ca87a44}.jar-label{background:#fff9e8;border-radius:2px 1px 3px 2px;border-color:#e6dbc5;box-shadow:2px 3px 1px #8f7e5310;transform:rotate(4deg)}.jar-label:before{color:#a7a06e}.piece.bulb{background:transparent;border:0;box-shadow:none;font-size:27px}.piece.candy,.piece.flower,.piece.grass{font-size:25px}
.filling{text-align:center;margin:0 auto 21px;padding:0 16px}.filling>p{font-size:11px;color:#7b7e6a;margin:0 0 12px}.filling-options{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.filling-options button{position:relative;display:flex;align-items:center;flex-direction:column;gap:7px;width:82px;padding:12px 5px 10px;border:1px solid transparent;font-size:10px;color:#777960;background:#efebdf88;transition:background .2s,transform .2s}.filling-options button>span{font-size:25px;line-height:30px}.filling-options button[data-material=paper]>span{background:#ecd6bd;width:28px;height:27px;line-height:26px;border-radius:2px;transform:rotate(-8deg);font-size:23px;color:#9b8060;box-shadow:2px 2px 0 #c7b49b33}.filling-options button:hover{transform:translateY(-3px);background:#e9e7d6}.filling-options button.selected{border-color:#84916e;background:#e8ecdc;color:#35472d}.filling-options button.selected:after{content:'✓';position:absolute;right:8px;top:5px;font-size:10px;color:#61744a}.telegram-share{display:block;margin:17px auto 0;padding:10px 17px;border:1px solid #b3bdaa;color:#65795b;font-size:11px}.telegram-share:hover{background:#e8ecdc}.telegram-share span{font-size:15px}.actions .fine{margin-top:12px}.actions .primary{margin-bottom:12px}header{padding-top:18px;padding-bottom:18px}.intro{padding-top:20px}h1{margin:16px 0}.intro p{font-size:12px;max-width:440px}
@media(max-width:600px){.stage{height:295px}.jar-wrap{transform:scale(.94) rotate(-2deg)}.filling-options{gap:5px}.filling-options button{width:65px;font-size:9px;padding:10px 2px}.filling-options button>span{font-size:23px}.filling{margin-bottom:17px}.intro{padding-top:17px}.intro p{max-width:330px}h1 strong{font-size:46px}h1 .title-second{font-size:35px}}
@media(max-width:360px){.filling-options{gap:3px}.filling-options button{width:56px;font-size:8px}h1 strong{font-size:40px}h1 .title-second{font-size:30px}}
/* Печатный постер: синие чернила, бумага, рисунки от руки. */
:root{--ink:#3d68ad;--paper:#f4efdf;--green:#315b43}body{background:var(--paper);color:#26382f}body:after{opacity:.12;background-size:145px 145px}.brand{color:var(--ink);font-weight:800;letter-spacing:-.8px}.brand-a{color:#7792bb}.eyebrow{color:#54729b;letter-spacing:2px;font-weight:600}h1{gap:14px;margin:18px 0 14px;transform:rotate(-1deg)}h1 strong{color:var(--ink);font-weight:900;font-size:clamp(52px,7vw,84px);letter-spacing:-.07em;text-shadow:.6px .5px 0 #3d68ad66}h1 .extra-a{color:var(--ink);opacity:.62}h1 .title-second{color:var(--ink);font-weight:750;font-size:clamp(40px,5.8vw,68px);letter-spacing:-.06em}.intro p{color:#5e655a;max-width:460px}.primary{background:var(--ink);font-weight:600;box-shadow:0 2px 0 #31538422}.primary:hover{background:#315b96}.text-button{color:#526b92}.jar-label{color:var(--ink);background:#f9f0d9;border:1px solid #d3bf9744}.jar-label:before{color:var(--ink)}.jar-label>span{font-weight:700}.jar-lid{background:repeating-linear-gradient(92deg,#bacbd9 0 4px,#849eb9 5px 6px);border-color:#5d7b9e99;box-shadow:inset 0 3px 0 #eceddaaa,1px 2px 0 #6d85a044}.jar{background:linear-gradient(105deg,#fefbf055,#dce5e333 30%,#faf0d555 75%,#cbd7d740);border-color:#718aa377}.jar:after{border-color:#56749440}.jar-neck{border-color:#8fa6b599;background:#dae4e133}.filling>p{color:#557094;letter-spacing:.4px}.filling-options{gap:10px}.filling-options button{width:86px;padding:10px 5px 11px;background:transparent;border:1px solid #c4c4ab66;color:#526346}.filling-options button>span{display:flex;justify-content:center;align-items:center;height:44px;width:48px}.filling-options button>span img{display:block;width:46px;height:46px}.filling-options button[data-material=paper]>span{background:none;box-shadow:none;width:48px;height:44px;transform:none}.filling-options button.selected{border-color:#6787b3;background:#d8e2ec77;color:#355b92}.filling-options button.selected:after{color:var(--ink)}.filling-options button:hover{background:#e1e5d7}.piece,.piece.paper,.piece.candy,.piece.flower,.piece.grass,.piece.bulb{width:35px;height:35px;background:transparent;border:0;box-shadow:none}.piece img{width:100%;height:100%;display:block}.piece.blank{width:29px;height:21px;background:#fffdf8;border:1px solid #dbd5c4;box-shadow:1px 2px 2px #0001}.telegram-share{border-color:#7e9bb2;color:#456e9c}.telegram-share:hover{background:#d9e4eb}.jar-label small{color:#6f7c84}#status{color:#67796e}.stage{height:310px}
@media(max-width:600px){h1{gap:9px}h1 strong{font-size:47px}h1 .title-second{font-size:37px}.filling-options{gap:5px}.filling-options button{width:64px;font-size:9px}.filling-options button>span,.filling-options button[data-material=paper]>span{height:40px;width:42px}.filling-options button>span img{width:41px;height:41px}.stage{height:290px}}
@media(max-width:360px){h1 strong{font-size:40px}h1 .title-second{font-size:31px}.filling-options button{width:55px;font-size:8px}}
/* Банк снаружи, банка-копилка внутри. */
h1{display:block;transform:none;margin:10px 0 16px}h1 .title-your{display:block;color:#526f94;font-size:12px;letter-spacing:5px;font-weight:500;margin:0 0 9px}h1 strong{display:block;font-size:clamp(38px,6vw,69px);letter-spacing:-.055em;line-height:1.08}.intro{padding-top:17px}.stage{height:310px}.jar-wrap{width:246px;height:260px;transform:rotate(-3deg);filter:drop-shadow(6px 12px 0 #b4a48310)}.jar-lid{left:21px;top:0;width:204px;height:28px;border-radius:10px 9px 5px 6px;background:#80a2bd;box-shadow:inset 0 4px 0 #adbed166;border:1.7px solid #4e7195;transform:rotate(1deg)}.jar-lid:before{content:'';position:absolute;width:71px;height:4px;background:#3d6080;left:64px;top:7px;border-radius:50%;transform:rotate(-1deg)}.jar-lid:after{content:'';position:absolute;left:6px;right:6px;bottom:5px;border-bottom:1px solid #51759780}.jar-neck{left:30px;top:28px;width:186px;height:16px;border:1.6px solid #708caa;border-bottom:0;background:#dce5dc66}.jar{top:39px;width:246px;height:211px;border:2px solid #7792a7;border-radius:26px 32px 35px 30px;background:#e1e9df77;box-shadow:inset 5px 0 0 #faf4df99,inset -5px -5px 0 #c6d4c733}.jar:after{inset:5px 4px 6px 5px;border:1px solid #7995a34d;border-radius:24px 28px 30px 25px}.shine{left:13px;top:24px;width:5px;height:112px;background:#fff9;filter:none;border-radius:9px;transform:rotate(1deg)}.glass-rim{bottom:8px;border-color:#91aaa344;height:10px}.jar-label{left:47px;top:62px;width:149px;padding:14px 7px 13px;transform:rotate(3deg);background:#f9edce;border:1px solid #ccbb9466;box-shadow:1px 2px 0 #b3a37e22}.jar-label:before{font-size:22px;margin-bottom:7px}.shadow{display:none}.piece.coin,.piece.chip,.piece.leaf{background:none;border:0;box-shadow:none;width:35px;height:35px}.jar-label span{font-size:15px}.intro p{max-width:450px}.filling>p{font-size:11px}
@media(max-width:600px){h1 strong{font-size:39px}h1 .title-your{font-size:10px;letter-spacing:4px}.stage{height:294px}.jar-wrap{transform:scale(.96) rotate(-3deg)}.intro{padding-top:18px}}
@media(max-width:360px){h1 strong{font-size:33px}}
.how-it-works{max-width:650px;margin:0 auto 30px;padding:0 24px}.how-it-works details{border-top:1px solid #a5afaa66;border-bottom:1px solid #a5afaa66}.how-it-works summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;padding:19px 0;color:#446998;font-size:13px;font-weight:600}.how-it-works summary::-webkit-details-marker{display:none}.how-it-works summary span{font-size:22px;font-weight:400;transition:transform .2s}.how-it-works details[open] summary span{transform:rotate(45deg)}.how-it-works summary:focus-visible{outline:2px solid #6787b3;outline-offset:5px}.how-content{padding:0 0 22px}.how-content ol{list-style:none;padding:0;margin:4px 0 24px}.how-content li{display:flex;gap:18px;padding:15px 0}.step-number{font-size:11px;letter-spacing:1px;color:#7992ad;padding-top:3px}.how-content h3{font-size:14px;color:#3d68ad;font-weight:600;margin:0 0 7px}.how-content p{font-size:12px;line-height:1.8;color:#626d60;margin:0}.how-content aside{padding:17px 19px;background:#e3e6d777;border-radius:12px}.how-content aside strong{display:block;font-size:12px;font-weight:600;margin-bottom:8px;color:#506345}@media(max-width:600px){.how-it-works{padding:0 22px;margin-bottom:23px}.how-content li{gap:13px}.how-content aside{padding:15px}}
/* Воздух и ясная иерархия действий. */
body{background:#faf8f2}body:after{opacity:.14;mix-blend-mode:multiply;background-size:160px 160px}header{max-width:1320px;padding:23px 5%}nav{gap:8px}nav button{font-size:11px;padding:9px 12px}nav #gift{border:1px solid #c4cbbb;margin-left:9px}.intro{padding-top:26px}.intro p{max-width:460px}.bank-workspace{display:grid;grid-template-columns:180px 300px;grid-template-areas:'fill jar';justify-content:center;align-items:center;column-gap:32px;padding:10px 180px 0 0}.bank-workspace .stage{grid-area:jar;height:310px}.bank-workspace .filling{grid-area:fill;margin:0;padding:0;text-align:left}.filling>p{font-size:11px;line-height:1.6;max-width:140px;margin:0 0 12px}.filling-options{display:flex;flex-direction:column;gap:5px}.filling-options button{width:157px;min-height:43px;flex-direction:row;gap:10px;padding:4px 12px;text-align:left;border-color:transparent;border-radius:20px;background:transparent;font-size:11px}.filling-options button>span,.filling-options button[data-material=paper]>span{width:33px;height:33px;flex-shrink:0}.filling-options button>span img{width:33px;height:33px}.filling-options button.selected{border-color:#95aacc;background:#e3eaf177}.filling-options button.selected:after{top:15px;right:12px}.filling-options button:hover{transform:none;background:#e9eee4}.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 20px;max-width:620px;margin:0 auto;padding:0 20px 25px}.actions #status{flex-basis:100%;margin:0;text-align:center}.actions .primary{margin:3px 0 6px;min-width:260px}.actions #open{flex-basis:100%;font-size:10px;order:3;margin:0;color:#7c8590}.actions .telegram-share{margin:0;padding:9px 0;border:0;border-radius:20px;font-size:11px;order:2;color:#6a819c}.actions .telegram-share:hover{background:transparent;text-decoration:underline}.actions .fine{order:4;flex-basis:100%;max-width:100%;margin:0;font-size:9px}.how-it-works{max-width:660px;margin-bottom:24px;scroll-margin-top:22px}.how-it-works summary{font-size:12px;padding:16px 0}#aboutDialog p{font-size:14px;line-height:1.85;color:#626d60}#aboutDialog h2{color:var(--ink)}footer{font-size:9px}
@media(max-width:650px){header{padding:18px 5%;align-items:flex-start;gap:12px;flex-direction:column}.brand{font-size:15px}nav{width:100%;justify-content:space-between;gap:1px}nav button{padding:7px 6px;font-size:10px}nav #gift{margin-left:0;padding:7px 9px}.intro{padding-top:17px}.bank-workspace{grid-template-columns:105px 235px;padding:7px 10px 0 0;column-gap:5px}.bank-workspace .stage{height:300px}.jar-wrap{transform:scale(.9) rotate(-3deg);flex-shrink:0}.filling>p{font-size:10px;max-width:100px;margin-bottom:8px}.filling-options{gap:5px}.filling-options button{width:105px;min-height:40px;font-size:9px;padding:3px 5px;gap:5px}.filling-options button>span,.filling-options button[data-material=paper]>span{width:28px;height:30px}.filling-options button>span img{width:28px;height:30px}.filling-options button.selected:after{right:5px;top:5px;font-size:8px}.actions{gap:10px 14px;padding-bottom:23px}.actions .primary{min-width:220px;padding:15px 20px;font-size:12px}.actions .telegram-share{font-size:10px}.actions #open{margin:0}.actions .fine{max-width:310px;line-height:1.6}}
@media(max-width:360px){.bank-workspace{grid-template-columns:94px 215px;column-gap:0;padding-right:0}.jar-wrap{transform:scale(.82) rotate(-3deg)}.filling-options button{width:96px;font-size:8px}.intro p{font-size:11px}.actions .primary{min-width:220px}.bank-workspace .stage{height:285px}}
.jar-label.has-today{padding:13px 9px 14px;background:#f7edcc;transform:rotate(3deg)}.jar-label.has-today>span{display:block;font-size:14px;line-height:1.35;max-width:128px;margin:auto}.jar-label.has-today:before{content:'✓';font-family:Arial,sans-serif;font-size:22px;color:#5f7c58;margin-bottom:8px}
#aboutDialog{max-height:86vh;overflow-y:auto;width:min(92vw,620px)}#aboutDialog .eyebrow{text-transform:none;letter-spacing:1px}#aboutDialog p{font-size:13px;line-height:1.85}#giftDialog .text-button{display:block;margin:15px auto}#giftFeedback{color:#657a91}.share-postcard{display:block;margin:10px auto;border:1px solid #9bafc5;border-radius:20px;padding:12px 18px;color:#456b9a;font-size:12px}.share-postcard:hover{background:#e5ecf0}.book-invitation{text-align:center;font-size:13px;color:#637f9e;margin:30px auto 18px;max-width:440px}
/* Кинематографичная версия: свет, плёночное зерно и голубые чернила. */
:root{--ink:#a9c5db;--paper:#484b4a}body{background:#484b4a;color:#ecece5;min-height:100vh;isolation:isolate}body:before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 70% 25%,#e3e2dc22,transparent 48%),linear-gradient(116deg,transparent 0 43%,#d4d3c522 44% 45%,#d4d3c508 47% 65%,transparent 66%),linear-gradient(116deg,#1c2021aa 10%,transparent 45%),linear-gradient(0deg,#171b1cc9,transparent 60%),#626563;filter:grayscale(1)}body:after{opacity:.22;mix-blend-mode:soft-light;background-size:130px 130px}.brand,.brand-a{color:#b5ccdf}header{border-bottom:1px solid #eee4}nav button{color:#dedfd8}nav #gift{border-color:#dce1dc55}nav button:hover{background:#ffffff12}.intro{padding-top:35px}h1 strong{color:#aac8e0;font-size:clamp(43px,7.4vw,87px);letter-spacing:-.065em;font-weight:800;text-shadow:0 1px 2px #c8deef22}h1 .title-your{color:#c1d1dc;letter-spacing:5px}.intro p{color:#d1d3cb;font-size:12px;max-width:460px}.bank-workspace{padding-top:16px}.bank-workspace .stage{height:325px}.filling>p{color:#d1d8d7}.filling-options button{color:#d3d9d5}.filling-options button:hover{background:#e5e9df13}.filling-options button.selected{background:#dce7e01a;border-color:#b2c8d088;color:#f0efe5}.filling-options button.selected:after{color:#c1d7e3}.filling-options button>span img{filter:saturate(.55);width:35px;height:35px}.jar-wrap{filter:drop-shadow(12px 16px 13px #060b0b44);transform:rotate(-2deg)}.jar-lid{background:linear-gradient(175deg,#b5bcb3,#808d87);border-color:#d0d6cd88;box-shadow:inset 0 3px 0 #dee3d333,inset 0 -4px 0 #343e3855;left:20px;width:205px;border-radius:9px 12px 5px 6px}.jar-lid:before{background:#39453f}.jar-lid:after{border-color:#d3ddc344}.jar-neck{background:#d2ded522;border-color:#d6e5d480}.jar{background:linear-gradient(103deg,#e8eed842,#dce9df0a 22%,#d3e2cc08 65%,#e4edda2e);border-color:#d3e0cc99;box-shadow:inset 4px 0 3px #fff9d522,inset -5px -7px 5px #d7e2cb22,6px 8px 20px #121b1733;border-radius:27px 32px 32px 37px}.jar:after{border-color:#d8e5ca40}.shine{background:linear-gradient(#fff7d733,#fff9de99,#fff8da00);width:4px;height:113px;filter:blur(.6px)}.glass-rim{border-color:#e7ebd044}.jar-label{background:#e9e2ce;color:#4a5e66;border:0;box-shadow:1px 3px 4px #17201b33;transform:rotate(4deg);border-radius:1px 4px 2px 3px;clip-path:polygon(1% 1%,25% 0,50% 2%,76% 0,99% 2%,100% 30%,98% 70%,100% 99%,67% 98%,32% 100%,1% 98%,2% 60%,0 30%);padding:14px 6px 13px}.jar-label:before{content:'✳';color:#778485;transform:rotate(12deg);font-weight:400}.jar-label>span{font-weight:500;letter-spacing:-.6px;font-size:16px}.jar-label small{color:#7c8178;font-size:8px}.jar-label.has-today{background:#ece5ca}.jar-label.has-today>span{color:#53695e}.actions #status{color:#c4cfc6}.primary{background:#abc7dc;color:#263e50;font-weight:600;box-shadow:0 2px 5px #15212a33}.primary:hover{background:#c0d6e7}.actions #open,.actions .telegram-share{color:#c8d6de}.actions .fine{color:#b0b9af}.how-it-works details{border-color:#d5dbcd33}.how-it-works summary{color:#c7d8e4}.how-content h3{color:#bed2e1}.how-content p{color:#ccd1c7}.how-content aside{background:#d0dfc512}.how-content aside strong{color:#d4decf}.step-number{color:#a8c4d6}footer{border-color:#dde4d133;color:#abb5aa}dialog{background:#f5f1e8;color:#324039;border-color:#e6e5d8}dialog h2,#aboutDialog h2{color:#52748d}dialog .eyebrow{color:#718b9a}dialog .primary{color:#263e50}.jar-wrap.opening .jar{animation:joy-glow 1.8s ease-in-out}.piece img{filter:saturate(.7)}@keyframes joy-glow{0%,100%{box-shadow:inset 4px 0 3px #fff9d522,inset -5px -7px 5px #d7e2cb22,6px 8px 20px #121b1733}45%,70%{background-color:#fff0b933;box-shadow:inset 0 0 45px #fff3b66e,0 0 35px #ffefaa6e,0 0 95px #ffe7a433;border-color:#fff6cbbb}}@media(max-width:650px){.intro{padding-top:25px}h1 strong{font-size:42px}.bank-workspace .stage{height:305px}.jar-wrap{transform:scale(.9) rotate(-2deg)}}@media(max-width:360px){h1 strong{font-size:35px}.jar-wrap{transform:scale(.82) rotate(-2deg)}}
/* Плотная постерная типографика. */
.intro{padding-top:28px}h1{max-width:1100px;margin:10px auto 18px}h1 strong{font-family:Arial,Helvetica,sans-serif;font-size:clamp(68px,11.5vw,142px);font-weight:900;letter-spacing:-.075em;line-height:.9;color:#b0cde0;text-shadow:none}h1 .title-your{font-size:11px;letter-spacing:6px;margin-bottom:15px}.intro p{font-size:12px;max-width:450px}.jar-wrap{filter:none}.jar{box-shadow:inset 3px 0 0 #f7f3de22;background:#d8e1d414}.shine{filter:none;background:#f7f3e633}.jar-lid{box-shadow:none}.jar-label{box-shadow:none}.primary{box-shadow:none}@media(max-width:650px){h1 strong{font-size:clamp(57px,12.3vw,78px);max-width:380px;margin:auto;line-height:.91}h1 .title-your{margin-bottom:13px}.intro{padding-top:28px}}
/* Фотография несёт фактуру: убраны искусственные лучи и градиенты. */
body{background:#555654}body:before{background-image:linear-gradient(#171b1d38,#171b1d38),url('assets/film-piano.png');background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(1);z-index:-2}body:after{opacity:.07;mix-blend-mode:soft-light}.bank-workspace{position:relative}.how-it-works{background:#262a281f;border-radius:2px}.how-content{padding:0 15px 20px}.how-it-works summary{padding-left:12px;padding-right:12px}.jar-label{background:#e9e1cc;color:#4e6168}.actions .fine{color:#d3d6ce}.filling-options button{color:#e6e7df;text-shadow:0 1px 2px #15191855}footer{color:#d6d8cf}.intro p{color:#ebede4;text-shadow:0 1px 3px #171b1d44}header{background:#22282614}nav button{color:#eee}.actions #status{color:#e0e6dc}.actions #open,.actions .telegram-share{color:#e0e9ef}
/* Карандашная банка вместо отрисованного интерфейсного стекла. */
.jar-wrap{width:260px;height:280px;transform:rotate(-2deg);filter:none;background:url('assets/jar-sketch.svg') center/contain no-repeat}.jar-lid,.jar-neck{opacity:0}.jar{left:17px;top:48px;width:226px;height:215px;border:0;border-radius:23px;background:transparent;box-shadow:none;overflow:hidden}.jar:after,.shine,.glass-rim{display:none}.jar-label{left:44px;top:61px;width:140px;padding:13px 7px 12px;background:#d9d3ba;color:#4e5959;opacity:.88;transform:rotate(-4deg);clip-path:polygon(0 3%,18% 0,36% 2%,63% 1%,80% 3%,98% 0,100% 19%,98% 47%,100% 75%,98% 100%,67% 98%,42% 100%,23% 97%,1% 100%,2% 66%);filter:url('#none')}.jar-label:before{font-size:18px;color:#6a7370;margin-bottom:6px}.jar-label>span{font-size:15px;font-weight:400;letter-spacing:-.4px}.jar-label small{font-size:7px}.jar-wrap.opening{animation:sketch-glow 1.8s ease-in-out}.jar-wrap.opening .jar{animation:none}.jar-label.has-today{background:#e0dac2;padding:13px 7px}.jar-label.has-today>span{font-size:13px}.piece img{opacity:.87}.bank-workspace .stage{height:325px}@keyframes sketch-glow{0%,100%{filter:drop-shadow(0 0 0 #fff0)}45%,70%{filter:drop-shadow(0 0 13px #ffedb39c) drop-shadow(0 0 38px #ffefbf66)}}@media(max-width:650px){.jar-wrap{transform:scale(.9) rotate(-2deg)}.bank-workspace .stage{height:305px}}@media(max-width:360px){.jar-wrap{transform:scale(.82) rotate(-2deg)}}
.jar-label{filter:none}.jar-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h130v130H0z' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.14;border-radius:35px}
body:before{background-image:linear-gradient(#12171933,#12171933),url('assets/film-smile.png');background-position:center center}@media(max-width:650px){body:before{background-position:62% center}}
/* Страница блокнота: настоящая кириллица Caveat, весь шрифт внутри public. */
@font-face{font-family:Handwritten;src:url('assets/handwriting.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{--ink:#466da6;--paper:#f8f6ed}body{background:#f8f6ed;color:#486899;font-family:Handwritten,'Comic Sans MS',cursive}body:before{background:none;filter:none}body:after{opacity:.11;mix-blend-mode:multiply;background-size:160px 160px}header{border-color:#b4c2cf66;background:transparent}.brand,.brand-a{font-family:Handwritten,cursive;color:#466da6;font-size:25px;letter-spacing:0;font-weight:600;transform:rotate(-2deg)}nav button{font-family:Handwritten,cursive;font-size:20px;color:#506a93}nav #gift{border-color:#91a5bb88;transform:rotate(1deg)}nav button:hover{background:#dfe7e655}h1{transform:rotate(-2deg);margin:8px auto 15px}h1 strong{font-family:Handwritten,cursive;color:#5278af;font-size:clamp(72px,12vw,135px);font-weight:600;letter-spacing:0;line-height:.88}h1 .title-your{font-family:Handwritten,cursive;font-size:25px;letter-spacing:5px;color:#5d7ca4;font-weight:400;margin-bottom:7px}.intro p{font-family:Handwritten,cursive;font-size:23px;line-height:1.25;color:#62758e;text-shadow:none;max-width:540px}.intro{padding-top:23px}.bank-workspace{padding-top:8px}.bank-workspace .stage{height:310px}.filling>p{font-size:19px;color:#5e78a0;line-height:1.05;max-width:150px}.filling-options button{font-family:Handwritten,cursive;font-size:20px;color:#546e95;text-shadow:none;gap:7px}.filling-options button:hover{background:#dfe8ec44}.filling-options button.selected{border-color:#6d8ab9aa;background:transparent;border-radius:48% 44% 49% 41%/39% 55% 44% 48%;transform:rotate(-2deg);color:#385c91}.filling-options button.selected:after{color:#5c7daa}.filling-options button>span img{filter:saturate(.7)}.jar-label{background:#ede5c9;color:#496b95;opacity:.95;transform:rotate(-4deg);padding:10px 6px 13px}.jar-label>span{font-family:Handwritten,cursive;font-size:25px;font-weight:500;line-height:1}.jar-label:before{color:#6885ac;font-size:21px}.jar-label small{font-family:Handwritten,cursive;font-size:14px;color:#71829a;letter-spacing:0}.jar-label.has-today{background:#ede5c9}.jar-label.has-today>span{font-family:Handwritten,cursive;font-size:22px;line-height:1}.actions #status{font-family:Handwritten,cursive;font-size:19px;color:#778aa1}.primary{font-family:Handwritten,cursive;font-size:23px;color:#365b8c;background:#d5e3ec;border:1px solid #9cb3ca;box-shadow:none;font-weight:600;transform:rotate(-1deg);padding:9px 23px}.primary:hover{background:#c8dce9}.actions .primary{font-size:23px;padding:10px 25px}.actions #open,.actions .telegram-share{font-family:Handwritten,cursive;font-size:19px;color:#6380a7;text-shadow:none}.actions .fine{font-family:Handwritten,cursive;font-size:16px;color:#8290a1;line-height:1.2}.how-it-works{background:none}.how-it-works details{border-color:#aebbc988}.how-it-works summary{font-family:Handwritten,cursive;font-size:23px;color:#5377a5}.how-content h3{font-family:Handwritten,cursive;color:#466da6;font-size:25px}.how-content p{font-family:Handwritten,cursive;font-size:21px;line-height:1.35;color:#687b92}.how-content aside{background:#e4e9de66}.how-content aside strong{font-size:21px;color:#57745d}.step-number{font-size:20px;color:#8ba1bb}footer{color:#8494a6;border-color:#b5c2cb66;font-size:16px}footer button{font-size:17px}dialog{font-family:Handwritten,cursive;color:#536e8f;background:#f8f6ed}dialog h2,#aboutDialog h2{font-family:Handwritten,cursive;color:#466da6;font-size:40px}#aboutDialog p,dialog p{font-family:Handwritten,cursive;font-size:22px;line-height:1.4}dialog textarea,dialog input,dialog select{font-family:Handwritten,cursive;font-size:23px}dialog .fine{font-size:18px}#confirmedText,.entry p,#book h2,#giftWelcome{font-family:Handwritten,cursive}.row{font-size:17px}.upload{font-size:21px}.share-postcard{font-family:Handwritten,cursive;font-size:21px}.book-invitation{font-size:22px}.book-actions button{font-size:19px}.chapter{font-size:20px}.entry small{font-size:17px}.entry p{font-size:29px}.eyebrow{font-family:Handwritten,cursive}.jar-wrap{opacity:.95}@media(max-width:650px){header{gap:8px}.brand{font-size:24px}nav button{font-size:17px;padding:6px 3px}nav #gift{padding:6px}.intro{padding-top:19px}h1 strong{font-size:74px;line-height:.85;max-width:370px}h1 .title-your{font-size:21px;letter-spacing:4px;margin-bottom:8px}.intro p{font-size:21px;max-width:345px;line-height:1.2}.filling>p{font-size:17px;max-width:100px}.filling-options button{font-size:17px;gap:3px}.actions .primary{font-size:22px}.actions .telegram-share{font-size:17px}.actions #open{font-size:18px}.actions .fine{font-size:15px;max-width:340px}.bank-workspace .stage{height:305px}.how-it-works summary{font-size:23px}.how-content h3{font-size:24px}.how-content p{font-size:21px}footer{font-size:14px}footer button{font-size:15px}}
@media(max-width:360px){h1 strong{font-size:66px}.intro p{font-size:19px}.filling-options button{font-size:15px}}
/* Печатный заголовок + спокойный интерфейс + одна рукописная деталь. */
body{font-family:Arial,Helvetica,sans-serif}.brand,.brand-a{font-family:Arial,Helvetica,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.6px;transform:none}nav button{font-family:Arial,Helvetica,sans-serif;font-size:11px}nav #gift{transform:none}h1{transform:none;margin:12px auto 20px}h1 strong{font-family:Arial,Helvetica,sans-serif;font-size:clamp(62px,10vw,120px);font-weight:900;letter-spacing:-.065em;line-height:.91;color:#5278af}h1 .title-your{font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:400;letter-spacing:5px;margin-bottom:14px}.intro p{font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.65;max-width:465px}.filling>p{font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.5;max-width:145px}.filling-options button{font-family:Arial,Helvetica,sans-serif;font-size:11px;gap:9px}.actions #status{font-family:Arial,Helvetica,sans-serif;font-size:11px}.primary,.actions .primary{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:500;transform:none;padding:15px 25px}.actions #open,.actions .telegram-share{font-family:Arial,Helvetica,sans-serif;font-size:11px}.actions .fine{font-family:Arial,Helvetica,sans-serif;font-size:10px;line-height:1.5}.how-it-works summary{font-family:Arial,Helvetica,sans-serif;font-size:13px}.how-content h3{font-family:Arial,Helvetica,sans-serif;font-size:14px}.how-content p{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.75}.how-content aside strong{font-size:12px}.step-number{font-family:Arial,Helvetica,sans-serif;font-size:11px}footer{font-family:Arial,Helvetica,sans-serif;font-size:10px}footer button{font-size:10px}.jar-label>span{font-family:Handwritten,cursive;font-weight:400;font-size:25px}.jar-label.has-today>span{font-weight:400;font-size:22px}.jar-label small{font-family:Arial,Helvetica,sans-serif;font-size:8px;font-weight:400}.jar-label:before{font-weight:400}dialog{font-family:Arial,Helvetica,sans-serif}dialog h2,#aboutDialog h2{font-family:Arial,Helvetica,sans-serif;font-size:32px}#aboutDialog p,dialog p{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.7}dialog textarea,dialog input,dialog select{font-family:Arial,Helvetica,sans-serif;font-size:15px}dialog .fine{font-size:11px}.row{font-size:11px}.upload{font-size:13px}.share-postcard{font-family:Arial,Helvetica,sans-serif;font-size:12px}.book-invitation{font-size:13px}.book-actions button{font-size:12px}.chapter{font-size:12px}.entry small{font-size:10px}.entry p,#confirmedText{font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:1.5}#book h2{font-family:Arial,Helvetica,sans-serif;font-weight:700}.eyebrow{font-family:Arial,Helvetica,sans-serif}#giftWelcome{font-family:Arial,Helvetica,sans-serif;font-size:20px}.intro{padding-top:25px}@media(max-width:650px){.brand{font-size:16px}nav button{font-size:10px;padding:8px 5px}nav #gift{padding:8px}.intro{padding-top:24px}h1 strong{font-size:clamp(55px,13vw,78px);max-width:390px;line-height:.93}h1 .title-your{font-size:10px;letter-spacing:4px;margin-bottom:12px}.intro p{font-size:12px;line-height:1.65;max-width:345px}.filling>p{font-size:10px;line-height:1.5;max-width:100px}.filling-options button{font-size:10px;gap:4px}.actions .primary{font-size:12px}.actions .telegram-share{font-size:10px}.actions #open{font-size:11px}.actions .fine{font-size:9px}.how-it-works summary{font-size:12px}.how-content h3{font-size:14px}.how-content p{font-size:12px}footer{font-size:9px}footer button{font-size:10px}}@media(max-width:360px){h1 strong{font-size:53px}.filling-options button{font-size:9px}}
/* Наполнение выбирается один раз; затем в центре остаётся банка. */
.bank-workspace{display:flex;flex-direction:column;padding:0 20px;gap:0}.bank-workspace .stage{width:100%;height:310px}.bank-workspace .filling{order:2;width:100%;text-align:center;margin:0 auto 17px;max-width:420px}.filling>p{max-width:none;font-size:10px;margin:0 0 8px}.filling-options{flex-direction:row;justify-content:center;gap:5px}.filling-options button{width:72px;min-height:58px;flex-direction:column;gap:3px;padding:6px 3px;font-size:9px;border:1px solid #aebbc455;border-radius:20px}.filling-options button>span,.filling-options button[data-material=paper]>span{width:28px;height:28px}.filling-options button>span img{width:28px;height:28px}.filling-options button.selected:after{right:7px;top:5px}.filling-options button.selected{border-radius:20px;transform:none}.bank-workspace:not(.choosing-filling) .stage{height:315px}@media(max-width:650px){.bank-workspace{padding:0 12px}.bank-workspace .stage,.bank-workspace:not(.choosing-filling) .stage{height:295px}.bank-workspace .filling{max-width:350px}.filling-options button{width:62px;font-size:8px;min-height:55px}.filling>p{font-size:10px;max-width:none}.jar-wrap{transform:scale(.94) rotate(-2deg)}}
/* Геометрический гротеск и тонкая каллиграфия по новому референсу. */
@font-face{font-family:JoyGeometric;src:url('assets/geometric.ttf') format('truetype');font-weight:100 900;font-display:swap}@font-face{font-family:JoyScript;src:url('assets/script.ttf') format('truetype');font-weight:400;font-display:swap}
body,button,input,textarea,select,.brand,.brand-a,nav button,.intro p,.filling>p,.filling-options button,.actions #status,.primary,.actions .primary,.actions #open,.actions .telegram-share,.actions .fine,.how-it-works summary,.how-content h3,.how-content p,.step-number,footer,footer button,dialog,dialog h2,#aboutDialog h2,#aboutDialog p,dialog p,dialog textarea,dialog input,dialog select,.share-postcard,.entry p,#confirmedText,#book h2,.eyebrow,#giftWelcome{font-family:JoyGeometric,Arial,sans-serif}
h1 strong{font-family:JoyGeometric,Arial,sans-serif;font-weight:900;letter-spacing:-.045em;line-height:.94;font-size:clamp(65px,10vw,122px)}h1 .title-your{font-family:JoyGeometric,Arial,sans-serif;letter-spacing:5px;font-size:12px}.brand{font-weight:750;letter-spacing:-.3px}.intro p{font-size:14px;line-height:1.6}nav button{font-size:12px}.actions .primary{font-size:14px;font-weight:500}.jar-label>span{font-family:JoyScript,cursive;font-size:20px;line-height:1.55;font-weight:400;letter-spacing:-.7px}.jar-label.has-today>span{font-family:JoyScript,cursive;font-size:16px;line-height:1.5;font-weight:400}.jar-label small{font-family:JoyGeometric,Arial,sans-serif;font-size:9px;margin-top:6px}.jar-label{padding-top:7px;padding-bottom:10px}.jar-label:before{font-size:17px;margin-bottom:2px}@media(max-width:650px){h1 strong{font-size:clamp(57px,13.5vw,82px)}h1 .title-your{font-size:11px}.intro p{font-size:13px}nav button{font-size:11px}.actions .primary{font-size:13px}.brand{font-size:17px}}
/* Приглушённые пастельные чернила на тёплой бумаге. */
h1 .joy-word{display:inline-block;white-space:nowrap}h1 .joy-letter{display:inline;font:inherit;letter-spacing:inherit;margin:0}h1 .pastel-0{color:#7899ba}h1 .pastel-1{color:#bc838f}h1 .pastel-2{color:#8b9d7c}h1 .pastel-3{color:#b49a65}h1 .pastel-4{color:#9c8cae}h1 .pastel-5{color:#be8d76}
h1 .joy-word{font:inherit;letter-spacing:inherit;margin:0;color:inherit}h1 .joy-letter{font:inherit;letter-spacing:inherit}
/* Маленькая отвалившаяся «а»: банк превращается в банку. */
h1 .bank-word{position:relative;padding-right:.17em;margin-right:.02em}h1 .fallen-a{position:absolute;right:-.02em;bottom:-.19em;display:block;font-family:JoyScript,cursive;font-size:.4em;line-height:1;font-weight:400;letter-spacing:0;color:#bc838f;transform:rotate(24deg);transform-origin:center;margin:0;pointer-events:none}
h1 .fallen-a{bottom:.02em;right:-.05em;font-size:.47em;color:#7899ba;transform:rotate(14deg)}
/* ТВОЙ / ТВОЯ: тихое чередование в одном неподвижном знакоместе. */
h1 .title-your{display:flex;justify-content:center;align-items:baseline;gap:0}h1 .title-your>span{font:inherit;letter-spacing:inherit;color:inherit;margin:0}h1 .ending-switch{display:inline-grid;position:relative;width:1.15em;text-align:left}h1 .ending-switch>span{grid-area:1/1;font:inherit;letter-spacing:inherit;margin:0;color:inherit}h1 .ending-y{animation:ending-y 10s ease-in-out infinite}h1 .ending-ya{animation:ending-ya 10s ease-in-out infinite}@keyframes ending-y{0%,40%,100%{opacity:1;transform:translateY(0)}48%,90%{opacity:0;transform:translateY(-3px)}98%{opacity:1;transform:translateY(0)}}@keyframes ending-ya{0%,40%,100%{opacity:0;transform:translateY(3px)}48%,90%{opacity:1;transform:translateY(0)}98%{opacity:0;transform:translateY(3px)}}@media(prefers-reduced-motion:reduce){h1 .ending-y{opacity:1}h1 .ending-ya{display:none}}
/* Стикер: свободный почерк вместо аккуратной каллиграфии. */
.jar-label>span{font-family:Handwritten,cursive;font-size:27px;font-weight:400;letter-spacing:.2px;line-height:.95;display:block;transform:rotate(-5deg) skewX(-4deg);max-width:120px;margin:auto}.jar-label.has-today>span{font-family:Handwritten,cursive;font-size:23px;font-weight:400;line-height:1.05;letter-spacing:0;transform:rotate(-4deg) skewX(-3deg)}
/* Читаемый рассказ о проекте и отдельная ссылка на напоминания. */
.reminder-entry{text-align:center;margin:-9px auto 24px;padding:0 20px}.reminder-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#5e7d9f;border:1px solid #acbacb99;border-radius:20px;padding:11px 20px;text-decoration:none;font:400 12px JoyGeometric,Arial,sans-serif;min-height:42px}.reminder-link:hover{background:#e5eced88}.reminder-link:focus-visible{outline:2px solid #638bb3;outline-offset:4px}#aboutDialog{padding:36px 40px;width:min(92vw,620px);max-height:86vh;overflow-y:auto;scrollbar-width:thin}#aboutDialog h2{font-size:32px;line-height:1.12;font-weight:700;letter-spacing:-.7px;margin:16px 0 20px}#aboutDialog p{font-size:14px;line-height:1.7;color:#626e79;margin:9px 0}#aboutDialog .about-lead{font-size:17px;line-height:1.5;color:#4d6688}#aboutDialog .about-part{margin:25px 0 0}#aboutDialog .about-part h3{font:600 16px/1.3 JoyGeometric,Arial,sans-serif;color:#4c6e9b;margin:0 0 9px}#aboutDialog .joy-examples{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0}#aboutDialog .joy-examples span{font-size:12px;line-height:1.4;padding:7px 11px;background:#e4e9dc77;border-radius:12px;color:#65765e}#aboutDialog .joy-examples span:nth-child(2){background:#eadacb66;color:#98775e}#aboutDialog .joy-examples span:nth-child(3){background:#e9d5dc66;color:#a47787}#aboutDialog .joy-examples span:nth-child(4){background:#e3dcbf66;color:#948350}#aboutDialog .more-examples summary{cursor:pointer;color:#6a86a8;font-size:12px;padding:8px 0}#aboutDialog .more-examples p{font-size:13px}#aboutDialog .about-occasion{font-size:12px;border-top:1px solid #bcc6ca66;padding-top:17px;margin-top:23px}#aboutDialog .primary{margin:24px auto 0}#aboutDialog .close{position:sticky;float:right;top:0;margin:-22px -24px 0 0;background:#f8f6ed;z-index:2}
@media(max-width:650px){#aboutDialog{padding:28px 23px;max-height:85dvh}#aboutDialog h2{font-size:28px}#aboutDialog .about-lead{font-size:16px}#aboutDialog p{font-size:14px}#aboutDialog .close{margin:-16px -12px 0 0}#aboutDialog .about-part{margin-top:23px}.reminder-entry{margin:0 auto 23px}.reminder-link{font-size:12px;min-height:44px}}
/* Крышка — отдельный карандашный рисунок, поднимается вместе с ритуалом. */
.jar-wrap{background-image:url('assets/jar-body.svg')}.jar-wrap .jar-lid{opacity:1;position:absolute;left:0;top:0;width:260px;height:280px;background:url('assets/jar-lid.svg') center/contain no-repeat;border:0;border-radius:0;box-shadow:none;transform:none;transform-origin:82% 18px;pointer-events:none;z-index:5}.jar-wrap .jar-lid:before,.jar-wrap .jar-lid:after{display:none}.opening .jar-lid{animation:sketch-lid-lift 1.8s ease-in-out}@keyframes sketch-lid-lift{0%,100%{transform:translate(0,0) rotate(0)}30%,68%{transform:translate(15px,-43px) rotate(13deg)}}#editJoy{display:block;margin:17px auto 0;font:400 13px JoyGeometric,Arial,sans-serif;color:#5d7fa6;min-height:32px}@media(prefers-reduced-motion:reduce){.opening .jar-lid{animation:none}}

#aboutDialog .about-lead{font-weight:400}#aboutDialog h2{font-weight:600}#aboutDialog .about-part h3{font-weight:500}

.jar-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px;padding:18px 0;border-top:1px solid #c3cbd077;border-bottom:1px solid #c3cbd077}.jar-stats>div{display:flex;flex-direction:column;gap:5px}.jar-stats strong{font:600 34px/1 JoyGeometric,Arial,sans-serif;color:#6787aa}.jar-stats span{font:400 12px/1.4 JoyGeometric,Arial,sans-serif;color:#7c8a96}.jar-stats>div+div{border-left:1px solid #c3cbd077;padding-left:20px}@media(max-width:400px){.jar-stats strong{font-size:30px}.jar-stats span{font-size:11px}.jar-stats>div+div{padding-left:12px}}

.beta-notice{display:flex;align-items:center;gap:16px;margin:12px 24px 0;padding:14px 18px;border:1px solid #c7cfbe;background:#e9eddf88;border-radius:16px;color:#63705c}.beta-tag{flex-shrink:0;font:500 9px JoyGeometric,Arial,sans-serif;letter-spacing:1px;border:1px solid #b4c0a7;border-radius:8px;padding:4px 7px}.beta-notice p{margin:0;font:400 12px/1.5 JoyGeometric,Arial,sans-serif}.beta-notice strong{font-weight:500}.beta-notice button{flex-shrink:0;min-height:40px;padding:8px 12px;font:400 12px JoyGeometric,Arial,sans-serif;border:1px solid #b4c0a7;border-radius:20px;color:#5b7350}.beta-notice button:hover{background:#dfe6d4}@media(max-width:650px){.beta-notice{margin:8px 16px 0;padding:12px 14px;gap:8px 11px;align-items:flex-start;flex-wrap:wrap}.beta-notice p{flex:1;min-width:220px;font-size:11px;line-height:1.55}.beta-notice button{margin-left:auto;font-size:11px;min-height:38px}.beta-tag{font-size:8px}.beta-notice+.intro{padding-top:23px}}@media(max-width:360px){.beta-notice p{min-width:180px}}

/* Компактная заметка вместо акцентного баннера. */
.beta-notice{max-width:800px;margin:7px auto 0;padding:8px 16px;gap:10px;border:0;background:transparent;border-radius:0;color:#899488}.beta-tag{font-size:8px;padding:2px 5px;border-color:#c6cdc0;letter-spacing:.6px}.beta-notice p{font-size:11px;line-height:1.4}.beta-notice button{border:0;padding:3px 0;min-height:28px;font-size:10px;color:#74876d;text-decoration:underline;text-underline-offset:3px}.feedback-link{color:#6d86a0;text-decoration:none;align-self:center}.feedback-link:hover{text-decoration:underline}.feedback-link:focus-visible{outline:2px solid #638bb3;outline-offset:4px}@media(max-width:650px){.beta-notice{margin:4px 16px 0;padding:6px 0;gap:4px 8px;align-items:baseline;flex-wrap:wrap}.beta-notice p{min-width:0;flex:1;font-size:10px;line-height:1.4}.beta-notice button{margin:0 0 0 38px;min-height:24px;font-size:10px}.beta-tag{font-size:7px;padding:2px 4px}.beta-notice+.intro{padding-top:18px}footer{gap:12px 16px}.feedback-link{flex-basis:100%;font-size:11px}}

/* Два Telegram-действия в одной спокойной строке. */
.social-actions{display:flex;justify-content:center;align-items:center;gap:10px;max-width:620px;margin:-5px auto 25px;padding:0 18px}.social-actions .telegram-share,.social-actions .reminder-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin:0;padding:10px 15px;border:1px solid #acbacb88;border-radius:20px;color:#6a83a1;font:400 12px/1.3 JoyGeometric,Arial,sans-serif;text-decoration:none;text-align:center}.social-actions .telegram-share:hover,.social-actions .reminder-link:hover{background:#e5eced88}.social-actions .telegram-share:focus-visible,.social-actions .reminder-link:focus-visible{outline:2px solid #638bb3;outline-offset:3px}@media(max-width:650px){.social-actions{gap:7px;margin-top:-7px;padding:0 16px}.social-actions .telegram-share,.social-actions .reminder-link{flex:1;max-width:185px;font-size:11px;padding:9px 10px;min-height:44px}}
/* Первый вход и наглядное наполнение. */
#config{max-height:90dvh;overflow:auto;width:min(94vw,560px)}.config-intro{font-size:14px;line-height:1.6;color:#768595;margin:-10px 0 20px}.date-rule{background:#e5ebdf77;border-radius:12px;padding:12px 14px;font:400 12px/1.6 JoyGeometric,Arial,sans-serif;color:#6d7b63}.date-consent{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font:400 12px/1.5 JoyGeometric,Arial,sans-serif;color:#748197}.date-consent input{margin-top:3px;flex-shrink:0}#material{display:none}.config-materials{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}.config-material-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 2px;border:1px solid #c5cfd077;border-radius:16px;font-size:11px}.config-material-choice img{width:34px;height:34px}.config-material-choice[aria-pressed=true]{background:#e3eaf0;border-color:#8fa9c2}.config-material-choice:hover{background:#e6ebe0}#date:disabled{opacity:1;color:#7990a5;background:#edf0eb}.jar-stats{margin-bottom:14px}
/* Книга как альбом: шесть воспоминаний на бумажной странице. */
#book{max-width:1060px;padding:45px 24px}.memory-page{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#fffdf6;border:1px solid #e1dfd2;box-shadow:2px 3px 0 #dedbcd66;margin:20px 0 35px;padding:26px;border-radius:3px}.memory-page .entry{display:block;position:relative;min-height:195px;border:0;padding:23px 16px 16px;background:#e8ecdf77;break-inside:avoid}.memory-page .entry:nth-child(3n+2){background:#e9dfe777}.memory-page .entry:nth-child(3n){background:#f0e5d377}.memory-page .entry input{position:absolute;right:10px;top:9px;margin:0;accent-color:#7f9cb7}.memory-page .entry small{display:block;font:400 10px JoyGeometric,Arial,sans-serif;color:#89929a;padding-right:15px}.memory-page .entry p{font:400 16px/1.5 JoyGeometric,Arial,sans-serif;margin:15px 0 0}.memory-page .entry img{width:100%;height:150px;object-fit:cover;margin:14px 0 0;border:5px solid #fffdf8;box-shadow:0 1px 2px #0001}.memory-page .quiet-card{background:#fbfaf5!important;border:1px dashed #e2dfd2}.memory-page .quiet-card p{font:400 22px Handwritten,cursive;color:#aaa998}.chapter{font-family:JoyGeometric,Arial,sans-serif;font-weight:500;font-size:13px;letter-spacing:2px;margin-top:34px}
@media(max-width:700px){.memory-page{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:15px}.memory-page .entry{min-height:165px;padding:24px 11px 12px}.memory-page .entry p{font-size:14px}.memory-page .entry img{height:110px}#book{padding:30px 14px}#book h2{font-size:32px}}@media(max-width:400px){#config{padding:29px 20px}.config-materials{gap:4px}.config-material-choice{font-size:9px}.config-material-choice img{width:29px;height:29px}.memory-page{padding:10px;gap:8px}.memory-page .entry p{font-size:13px}}
#storyDialog{width:min(94vw,560px);max-height:92dvh;overflow:auto;text-align:center;padding:30px 23px}#storyDialog h2{font-size:27px;margin:8px 15px 12px}#storyInfo{font-size:12px;line-height:1.6;color:#8090a0}#storyPreview{display:block;width:min(100%,315px);height:auto;margin:17px auto;border:1px solid #dddccf;box-shadow:0 3px 14px #35452c11}#storyDownload{width:max-content;min-width:210px;text-decoration:none;text-align:center;margin:20px auto 0}#storyError{font-size:12px;color:#a76457}.jar-label.setup-sticker{pointer-events:auto;cursor:pointer}.jar-label.setup-sticker>span{font-size:22px;line-height:1.04}.jar-label.setup-sticker:before{content:'';font-size:19px}.jar-label.setup-sticker:focus-visible{outline:2px solid #7899ba;outline-offset:5px}.jar-label.setup-sticker:hover{background:#e9dfbb}#configIntro{font-weight:400}
/* Стикер чуть выше на корпусе банки. */
.jar-label{top:46px}
.jar-label{top:31px}

.daily-note{flex-basis:100%;order:2;margin:-3px 0 4px;font:400 11px/1.5 JoyGeometric,Arial,sans-serif;color:#8693a0}.inline-link{display:inline;padding:0;border:0;border-radius:0;font:inherit;color:#5479a5;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.how-content li p+p{margin-top:9px}.actions:has(#add[hidden]) .daily-note{display:none}@media(max-width:650px){.daily-note{font-size:10px;max-width:290px;margin-left:auto;margin-right:auto}}

#config .config-intro{font:400 12px/1.65 JoyGeometric,Arial,sans-serif;color:#7e8b99;margin:0 0 19px}
/* Небольшой знак закрытия, удобная область нажатия. */
dialog .close,#aboutDialog .close{width:36px;height:36px;min-width:36px;min-height:36px;padding:0;font:400 19px/36px Arial,Helvetica,sans-serif;letter-spacing:0;border:0;border-radius:20px;text-align:center;color:#8a9298;cursor:pointer}dialog .close:hover{background:#e9ede555;color:#5e7185}@media(pointer:coarse){dialog .close,#aboutDialog .close{width:44px;height:44px;min-width:44px;min-height:44px;font-size:19px;line-height:44px}}