/* 1.1: a single-screen Christmas mini-app, with the photograph as the hero. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#atelier{height:100dvh;min-height:0;background:radial-gradient(ellipse at 50% 38%,#294c38 0,#112b21 54%,#091e18 100%)}
.grain{opacity:.012}
.header{height:110px;padding:18px 38px;z-index:5;align-items:center}
.brand{gap:9px}.brand img{height:76px;width:76px}.brand>span{font-size:29px;line-height:.91}
.header-actions{gap:12px}.header-actions .icon-button{width:48px;height:48px;background:#0d261cb8;border-color:#d6b9823a}
.music-toggle[data-playing=true]{color:#f4d59d;background:#98743824}.music-toggle[data-playing=true]:after{content:'';position:absolute;margin-top:35px;width:3px;height:3px;background:#f4d59d;border-radius:50%}
.intro{top:36px;z-index:5;width:auto;left:50%;transform:translateX(-50%);padding:0}.filters{margin:0;background:#112c21de;border-color:#d6b9823a;padding:3px}.filters button{height:44px;min-width:100px;font-size:12px}
#gallery-interaction{inset:139px 0 194px;touch-action:none;user-select:none;-webkit-user-select:none;z-index:2}.fallback{overflow:visible}.fallback-card{max-width:82%;object-fit:cover;border-color:#cab58e70;border-radius:10px;transition:none;box-shadow:0 24px 70px #0005;user-select:none;-webkit-user-drag:none}
.gallery-arrow{top:50%;width:48px;height:48px;background:#122f24de;backdrop-filter:none;border-color:#d6b98255}.prev{left:max(24px,calc(50% - 350px))}.next{right:max(24px,calc(50% - 350px))}
.inspect{height:44px;width:44px;padding:0;bottom:20px;left:50%;margin-left:120px;opacity:1;transform:translateX(-50%);border-radius:50%;background:#173628c2;border-color:#f5edd562;box-shadow:0 2px 16px #0002}.inspect svg{width:19px;height:19px}
.gallery-hint{bottom:178px;transform:translateX(-50%);font-size:10px;gap:8px;color:#b6c5b8;transition:opacity .7s}.gallery-hint svg{width:17px;height:17px;color:var(--gold)}.has-interacted .gallery-hint{opacity:0}
.selection{bottom:70px;padding:0 24px;z-index:5}.selection h2{font-size:42px;line-height:1.07;margin:0 0 12px}.selection .cta{margin:0;min-height:52px;font-size:13px;min-width:300px;padding:0 20px;box-shadow:0 6px 28px #0002;border-radius:7px}.selection .cta-arrow{margin-left:32px}.selection .cta>svg:first-child{margin-right:14px}
.footer{height:62px;padding:0 34px 6px;z-index:5;bottom:env(safe-area-inset-bottom,0px);width:min(100%,560px);left:50%;transform:translateX(-50%)}.counter{font-size:10px;gap:12px}.counter-line{width:46px}.counter .small{margin-left:4px}.footer>.small{width:44px;height:44px;color:#c9c6af}.footer .about-button{margin-left:auto}.footer .small svg{width:20px;height:20px}.counter .small svg{width:14px;height:14px}#effects[aria-pressed=false]{opacity:.45}
#winter-decor svg{stroke:none;stroke-width:0;fill:none}
#winter-decor{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.winter-top{position:absolute;left:50%;top:-28px;transform:translateX(-50%);width:100%;height:245px}.winter-bottom{position:absolute;bottom:-20px;width:100%;height:185px;left:0}
/* Decoration layers. --u is one drawing unit in pixels (set in src/winter.js). The needle picture is painted once; lamps and ornaments are small layers of their own, so their motion costs no repaint. */
.decor-art{position:absolute;max-width:none;left:calc(50% + (var(--x) - 250)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));filter:drop-shadow(0 8px 9px #0004);transform:translateZ(0);user-select:none}
.winter-bottom .decor-art{top:calc(100% + (var(--y) - 160)*var(--u));opacity:.9;filter:drop-shadow(0 -5px 9px #0003)}
.lamp{position:absolute;left:calc(50% + (var(--x) - 250)*var(--u));top:calc(var(--y)*var(--u));width:0;height:0;animation:warm-light 4.8s ease-in-out infinite;animation-delay:var(--delay)}
.winter-bottom .lamp{top:calc(100% + (var(--y) - 160)*var(--u))}
.lamp .glow{position:absolute;left:calc(var(--rx)*-1*var(--u));top:calc(var(--ry)*-1*var(--u));width:calc(var(--rx)*2*var(--u));height:calc(var(--ry)*2*var(--u));border-radius:50%;background:radial-gradient(closest-side,#ffd5748c,#f5bd5e2e 35%,#f5bd5e00);will-change:transform}
.lamp svg{position:absolute;left:calc(-4*var(--u));top:calc(-8*var(--u));width:calc(8*var(--u));height:calc(16*var(--u));overflow:visible}
.ornament{position:absolute;left:calc(50% + (var(--x) - 250)*var(--u));top:calc(-8*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));overflow:visible;transform-origin:50% 0;animation:ornament-sway 8s ease-in-out infinite;animation-delay:var(--delay);filter:drop-shadow(0 8px 9px #0004)}@keyframes warm-light{0%,100%{opacity:.6}50%{opacity:1}}@keyframes ornament-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
#snow{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:1}.effects-paused .lamp,.effects-paused .ornament{animation-play-state:paused}.effects-paused #snow{opacity:0}
.audio-status{position:absolute;left:50%;top:105px;transform:translateX(-50%);z-index:7;max-width:90%;font-size:11px;background:#173c2f;padding:10px 15px;border:1px solid var(--line);border-radius:6px;text-align:center}.audio-status:empty{display:none}
.splash{background:radial-gradient(ellipse at 50% 37%,#2a4a35,#10291f 60%);z-index:20}.splash:before,.splash:after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,#d5ae5d25,transparent 65%);pointer-events:none}.splash:before{top:-70px;left:-60px}.splash:after{bottom:-90px;right:-40px}.splash img{width:250px;height:250px}.splash h2{font-size:46px;margin-top:15px}.splash-sub{font-size:23px;margin-top:9px}.splash-enter{background:var(--paper);border:1px solid #f0dbaf;color:var(--ink);font-weight:600;border-radius:6px;padding:0 25px;min-height:52px;margin-top:30px;gap:36px}.sound-invitation{display:flex;align-items:center;gap:7px;color:var(--gold);font-size:10px;margin-top:13px}.sound-invitation svg{width:14px;height:14px}.silent-enter{min-height:48px;font-size:11px;color:var(--muted);margin-top:5px;text-decoration:underline;text-underline-offset:4px}.splash-bottom{font-size:8px;letter-spacing:2px;bottom:max(24px,env(safe-area-inset-bottom,0px))}.splash-orbit{width:600px;height:600px}
.modal{overscroll-behavior:contain;touch-action:pan-y}.version-switch{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;border-top:1px solid #b89c6f70;margin-top:30px;padding-top:22px;font-size:11px;color:#706a59}.version-switch a{text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
@media(min-width:1100px){.winter-top{height:220px;top:-55px}.winter-bottom{height:200px;bottom:-55px}.header{padding:23px 42px}.selection h2{font-size:44px}.selection{bottom:75px}#gallery-interaction{top:136px;bottom:211px}.gallery-hint{bottom:190px}}
@media(max-width:1000px){
 .header{height:106px;top:env(safe-area-inset-top,0px);padding:18px 18px 10px}.brand img{height:72px;width:72px}.brand>span{font-size:26px;line-height:.93;letter-spacing:-.4px}.brand{gap:5px}.header-actions{gap:7px}.header-actions .icon-button{width:44px;height:44px}.header-actions svg{width:20px;height:20px}
 .intro{top:calc(111px + env(safe-area-inset-top,0px));left:50%;width:auto;padding:0;transform:translateX(-50%)}.filters{padding:3px}.filters button{height:40px;min-width:90px;font-size:11px;padding:0 12px}
 #gallery-interaction{top:calc(177px + env(safe-area-inset-top,0px));bottom:calc(185px + env(safe-area-inset-bottom,0px))}.prev{left:12px}.next{right:12px}.gallery-arrow{width:44px;height:44px;background:#102c21b5}.gallery-arrow svg{width:18px;height:18px}
 .inspect{bottom:12px;margin-left:0;left:50%;height:38px;width:38px;background:#1a382ab5}.inspect svg{width:17px;height:17px}
 .gallery-hint{bottom:calc(165px + env(safe-area-inset-bottom,0px));font-size:9px;gap:6px}.gallery-hint svg{width:14px;height:14px}
 .selection{bottom:calc(57px + env(safe-area-inset-bottom,0px));padding:0 25px}.selection h2{font-size:35px;line-height:1.1;margin:0 0 13px}.selection .cta{width:100%;max-width:360px;min-width:0;margin:0;min-height:50px;font-size:13px;padding:0 18px}.selection .cta>svg:first-child{margin-right:auto;width:21px;height:21px}.selection .cta-arrow{margin-left:auto}
 .footer{height:53px;width:100%;padding:0 22px}.counter{position:absolute;left:50%;transform:translateX(-50%);gap:8px;font-size:10px}.counter-line{width:34px}.footer .small{width:44px;height:44px}.footer .small svg{width:19px;height:19px}.counter .small svg{width:13px;height:13px}
 .winter-top{top:-35px;height:190px;width:100%}.winter-bottom{height:140px;bottom:-26px}.audio-status{top:158px;width:max-content;max-width:85%;font-size:10px}
 .splash img{width:224px;height:224px}.splash h2{font-size:40px}.splash-sub{font-size:21px}.splash-orbit{width:430px;height:430px}.splash-enter{font-size:12px}
}
@media(max-width:370px){.brand>span{font-size:23px}.brand img{width:60px;height:60px}.header{padding-inline:13px}.header-actions{gap:4px}.selection h2{font-size:32px}.filters button{min-width:85px}}
@media(max-width:700px) and (max-height:700px){.header{height:86px;padding-top:9px}.brand img{width:62px;height:62px}.brand>span{font-size:24px}.intro{top:calc(90px + env(safe-area-inset-top,0px))}.filters button{height:36px}.winter-top{height:145px;top:-36px}#gallery-interaction{top:calc(146px + env(safe-area-inset-top,0px));bottom:calc(163px + env(safe-area-inset-bottom,0px))}.gallery-hint{bottom:calc(145px + env(safe-area-inset-bottom,0px));font-size:8px}.selection{bottom:calc(52px + env(safe-area-inset-bottom,0px))}.selection h2{font-size:31px;margin-bottom:10px}.selection .cta{min-height:48px;font-size:12px}.footer{height:49px}.splash img{width:182px;height:182px}.splash h2{font-size:35px}.splash-sub{font-size:20px}.splash-enter{margin-top:20px}.splash-bottom{bottom:16px}.winter-bottom{height:110px;bottom:-28px}}
@media(max-height:540px) and (min-width:701px){.header{height:85px;padding:10px 25px}.brand img{height:60px;width:60px}.brand>span{font-size:24px}.intro{top:22px;left:50%;width:auto;text-align:center}.filters{margin:0}.filters button{min-width:80px;height:40px}#gallery-interaction{top:102px;left:0;bottom:146px}.selection{left:0;width:100%;bottom:48px;text-align:center;padding:0}.selection h2{font-size:28px;margin-bottom:8px}.selection .cta{min-height:42px;font-size:11px}.gallery-hint{display:none}.footer{height:43px}.counter{right:auto;left:50%;transform:translateX(-50%)}.winter-top{height:160px;top:-60px}.winter-bottom{height:100px;bottom:-30px}}
@media(prefers-reduced-motion:reduce){.lamp,.ornament{animation:none!important}#snow{display:none}.splash img{animation:none}.gallery-hint{transition:none}}

.gallery-hint span{font-size:inherit;color:inherit}
.inspect{bottom:calc((100% - var(--photo-height, 90%))/2 + 12px)}
@media(min-width:1001px){.winter-top{max-width:1200px;height:180px;top:-25px}.winter-bottom{width:min(100%,1200px);left:50%;transform:translateX(-50%);height:160px;bottom:-35px}}
@media(max-width:1000px){.winter-top{top:-14px;height:180px}.winter-bottom{bottom:-18px;height:140px}}
@media(max-width:700px) and (max-height:700px){.winter-top{top:-25px;height:145px}.winter-bottom{bottom:-20px;height:110px}}

/* About dialog: legal details of the business. */
.impressum{margin-top:26px;padding-top:18px;border-top:1px solid #b89c6f70;font-size:11px;line-height:1.65;color:#706a59}.impressum .eyebrow{font-size:8px;margin-bottom:6px}

/* Desktop shell. A large, mouse-driven window shows the app in a tablet frame on a festive backdrop
   (built by src/shell.js). Keep this media query identical to SHELL_QUERY in src/shell.js. The
   frame's own viewport is at most 1080px wide, so the framed document never matches it. Until the
   script runs, the unframed app stays hidden so it does not flash at full window size. */
@media(min-width:1120px) and (min-height:860px) and (hover:hover) and (pointer:fine){
  html:not(.no-shell){background:#1d080c}
  html:not(.no-shell) body>*:not(#device):not(noscript){display:none!important}
}
#device{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#6c2029 0,#451219 46%,#1d080c 100%)}
#device:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,#0a020466 100%)}
.backdrop-lights{position:absolute;inset:0;pointer-events:none}
.backdrop-lights i{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffd98c 0,#f1b95a 55%,#f1b95a00 72%);opacity:var(--glow);filter:blur(3px);animation:backdrop-twinkle 6.5s ease-in-out infinite;animation-delay:var(--delay)}
.backdrop-lights i.ruby{background:radial-gradient(circle,#ff9c8a 0,#d2553f 55%,#d2553f00 72%)}
@keyframes backdrop-twinkle{0%,100%{opacity:calc(var(--glow)*.55)}50%{opacity:var(--glow)}}
.backdrop-snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#device.effects-paused .backdrop-lights i{animation-play-state:paused}#device.effects-paused .backdrop-snow{opacity:0}
.tablet{--w:min(1080px,calc(100vw - 100px),calc((100vh - 100px)*4/3));position:relative;z-index:2;width:calc(var(--w) + 36px);height:calc(var(--w)*.75 + 36px);padding:18px;border-radius:46px;background:linear-gradient(145deg,#343438 0,#101012 28%,#060607 70%,#232326 100%);box-shadow:inset 0 0 0 1.5px #5b5b61,inset 0 0 0 3px #0b0b0c,0 0 0 1px #000,0 60px 120px #0009,0 22px 44px #0008}
.tablet iframe{display:block;width:100%;height:100%;border:0;border-radius:28px;background:#0e271e}
.tablet-camera{position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#16202c;box-shadow:0 0 0 1px #2d2d31}
@media(prefers-reduced-motion:reduce){.backdrop-lights i{animation:none!important}.backdrop-snow{display:none}}

/* Phone on its side, and any very short window: the photograph stands on the left; the name, the
   button and the counter stand on the right. Every value that an earlier block sets is set again. */
@media(max-height:540px) and (orientation:landscape){
  .header{height:60px;top:env(safe-area-inset-top,0px);padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
  .brand{gap:6px}.brand img{width:44px;height:44px}.brand>span{font-size:19px;line-height:.93}
  .header-actions{gap:6px}.header-actions .icon-button{width:40px;height:40px}.header-actions svg{width:18px;height:18px}
  .intro{top:calc(11px + env(safe-area-inset-top,0px));left:50%;width:auto;padding:0;transform:translateX(-50%);text-align:center}
  .filters{margin:0;padding:2px}.filters button{height:34px;min-width:74px;font-size:11px;padding:0 10px}
  #gallery-interaction{top:calc(62px + env(safe-area-inset-top,0px));bottom:10px;left:env(safe-area-inset-left,0px);right:40%}
  .prev{left:8px}.next{right:8px}.gallery-arrow{width:40px;height:40px;z-index:61}
  .gallery-hint{display:none}
  /* A full-height veil right of the photograph hides the neighbours behind the name and the button. */
  #gallery-interaction:after{content:'';position:absolute;z-index:60;left:calc(100% - 34px);top:-200px;bottom:-200px;width:100vw;pointer-events:none;background:linear-gradient(90deg,transparent 0,#0f281fd9 70px,#0f281f 150px)}
  .selection{top:calc(62px + env(safe-area-inset-top,0px));bottom:48px;left:60%;right:env(safe-area-inset-right,0px);width:auto;padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .selection h2{font-size:28px;line-height:1.1;margin:0 0 12px}
  .selection .cta{width:100%;max-width:280px;min-width:0;min-height:44px;font-size:12px;padding:0 16px}
  .footer{left:60%;right:env(safe-area-inset-right,0px);width:auto;transform:none;height:46px;padding:0 14px;bottom:env(safe-area-inset-bottom,0px)}
  .counter{position:absolute;left:50%;right:auto;transform:translateX(-50%)}
  .winter-top{height:120px;top:-34px}.winter-bottom{display:none}
  .audio-status{top:calc(66px + env(safe-area-inset-top,0px))}
  .splash img{width:104px;height:104px}.splash h2{font-size:30px;margin-top:6px}.splash-sub{font-size:17px;margin-top:2px}.splash-enter{margin-top:12px;min-height:44px}.sound-invitation{margin-top:8px}.silent-enter{min-height:40px;margin-top:0}.splash-bottom{display:none}.splash-orbit{width:340px;height:340px}
  .detail-image{min-height:0}.detail-image>img{max-height:92svh}.detail-copy{padding:26px 28px;gap:12px}.detail-copy h2{font-size:34px}
}

/* Overview of all wreaths: a calmer type scale, and room between the heading and the first row. */
.modal-heading{margin-bottom:22px;align-items:flex-start}
.modal-heading h2{font-size:38px;line-height:1.05;margin-top:6px}
.collection-grid{gap:26px 18px}
.collection-card strong{font:500 20px/1.2 Cormorant,serif;margin-top:11px}
.collection-card small{font-size:11px;letter-spacing:.3px;margin-top:3px}
.collection-card[aria-current=true] img{outline:2px solid #174533;outline-offset:2px}
/* A dialog opens with the focus on its heading, so no button shows a focus ring before the visitor uses the keyboard. */
.modal h2:focus{outline:none}
@media(max-width:700px){
  .collection-modal{padding:22px 16px 18px}
  .modal-heading{margin-bottom:18px}
  .modal-heading h2{font-size:29px}
  .modal-heading .eyebrow{font-size:9px;letter-spacing:2.4px}
  .collection-grid{gap:20px 12px}
  .collection-card strong{font-size:17.5px;margin-top:9px}
}
/* The overview cards are links (search engines read them). The splash names the offer in two lines. */
a.collection-card{display:block;color:inherit;text-decoration:none}
.collection-card img{height:auto}
.splash-bottom{text-align:center;line-height:2.1}
/* The large close-up button is off by default, so the photograph gets the room (--freed). A small
   gold link, the name and the photograph open the detail view. Class with-inspect ("?gumb=1")
   brings the large button back. */
#atelier{--freed:34px}
#gallery-interaction,.gallery-hint{margin-bottom:calc(-1*var(--freed))}
.selection #inspect{display:none}
.selection h2{cursor:pointer}
.inspect-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:-14px 0;padding:0 16px;font-size:10px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);transition:color .2s}
.inspect-link:hover{color:var(--paper)}
.inspect-link svg{width:14px;height:14px;transition:transform .2s}
.inspect-link:hover svg{transform:translateX(3px)}
#atelier.with-inspect{--freed:0px}
.with-inspect .selection #inspect{display:inline-flex}
.with-inspect .inspect-link{display:none}
@media(max-width:700px) and (max-height:700px){#atelier{--freed:30px}}
@media(max-height:540px) and (min-width:701px){#atelier{--freed:24px}}
@media(max-height:540px) and (orientation:landscape){#atelier{--freed:0px}.inspect-link{margin:-6px 0}}
/* Menu: micro icons and a glass look. The glass is painted (gradients and highlights), not a live
   blur: a live blur over the moving gallery costs frames. */
.filters{position:relative;background:linear-gradient(180deg,#ffffff29 0,#ffffff0d 44%,#06140e61 100%),#16372bd6;border:1px solid #f3ead836;box-shadow:inset 0 1px 0 #ffffff5c,inset 0 -1px 0 #0000005e,0 12px 30px #0000005c,0 2px 6px #00000040}
.filters:before{content:'';position:absolute;left:14px;right:14px;top:1px;height:44%;border-radius:999px;background:linear-gradient(180deg,#ffffff33,#ffffff00);pointer-events:none}
.filters button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .25s,color .25s,box-shadow .25s}
.filters svg{width:15px;height:15px;stroke-width:1.9}
.filters button:not([aria-pressed=true]) svg{color:var(--gold)}
.filters button[aria-pressed=true]{background:linear-gradient(180deg,#fffaf0,#eadfc8);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #b89c6f73,0 3px 10px #00000061}
.header-actions .icon-button{background:linear-gradient(180deg,#ffffff24 0,#ffffff0a 46%,#06140e61 100%),#12301fd6;border-color:#f3ead836;box-shadow:inset 0 1px 0 #ffffff4f,inset 0 -1px 0 #0000005e,0 8px 20px #0000004d}
/* Detail view: the second button opens the greeting card. */
.modal .cta.ghost{background:transparent;color:#174533;border-color:#17453399;margin-top:0}
.modal .cta.ghost:hover{background:#1745330f}
.detail-copy #make-card{margin-top:-6px}
/* Greeting card: the picture on the left, the words on the right; stacked on a phone. */
.card-modal[open]{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);width:940px}
.card-stage{background:#0c2219;display:flex;align-items:center;justify-content:center;padding:26px;min-height:0;border-radius:11px 0 0 11px}
.card-stage canvas{display:block;max-width:100%;max-height:calc(92svh - 54px);width:auto;height:auto;border-radius:10px;box-shadow:0 16px 44px #0008}
.card-form{padding:60px 34px 30px;display:flex;flex-direction:column;gap:11px;min-width:0}
.card-form h2{font-size:40px;line-height:1.05;margin-bottom:6px}
.card-form label{font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#956b36;margin-top:6px}
.card-form textarea,.card-form input{font:500 20px/1.25 Cormorant,serif;color:var(--ink);background:#fffaf0;border:1px solid #b89c6f99;border-radius:7px;padding:10px 13px;width:100%;resize:none;outline-offset:2px}
.card-form textarea{min-height:70px}
.card-form ::placeholder{color:#8f8672;font-style:italic}
.card-formats{display:inline-flex;align-self:flex-start;border:1px solid #b89c6f99;border-radius:24px;padding:3px}
.card-formats button{min-height:36px;padding:0 15px;border-radius:20px;font-size:11px;transition:background .2s,color .2s}
.card-formats button[aria-pressed=true]{background:#174533;color:var(--paper)}
.card-presets{display:flex;flex-wrap:wrap;gap:7px}
.card-presets button{min-height:38px;padding:0 13px;border:1px solid #b89c6f99;border-radius:20px;font:500 16px/1 Cormorant,serif;transition:background .2s,border-color .2s}
.card-presets button[aria-pressed=true]{background:#e8dbc0;border-color:#956b36}
.card-form .cta{margin-top:10px;width:100%}
.card-form [hidden]{display:none}
.card-note{font-size:11px;line-height:1.6;color:#706a59}
#card-status{font-size:11px;min-height:15px}
@media(max-width:1000px){
  .card-modal[open]{display:block;width:500px}
  .card-stage{padding:16px 16px 14px;border-radius:11px 11px 0 0}
  .card-stage canvas{max-height:40svh}
  .card-form{padding:20px 22px 22px;gap:9px}
  /* One row of ready greetings that scrolls sideways; the main button stays in view. */
  .card-presets{flex-wrap:nowrap;overflow-x:auto;margin:0 -22px;padding:0 22px 2px;scrollbar-width:none}
  .card-presets::-webkit-scrollbar{display:none}
  .card-presets button{flex:none}
  .card-form .cta{position:sticky;bottom:12px;z-index:2;box-shadow:0 10px 26px #0000004d}
  .card-form h2{font-size:31px;margin-bottom:2px}
  .card-modal .close{background:#f3ecdfe6}
}