@font-face { font-family:"Creepster"; src:url("creepster.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
/* Compact photographic stationery studio. Scrolling is a fallback for keyboard/zoom. */
.cm { --cm-ink:#211910; color:#fff0d5; border:1px solid #6e5841; border-radius:3px; background:#211714 url("stationery-desk-v2.webp") center/cover; box-shadow:0 25px 100px #000d; overflow:hidden; height:calc(var(--studio-height,100dvh) - 28px); max-height:calc(var(--studio-height,100dvh) - 28px); }
.cm-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; min-height:0; }
.cm-header { min-height:58px; padding:6px 22px; gap:16px; border:0; background:linear-gradient(#08050480,transparent); }
.cm-wordmark { display:block; flex:none; width:155px; height:46px; padding:5px 10px; background:#f0e2c9 url("card-stock-v2.webp") center/cover; box-shadow:1px 3px 5px #0007; transform:rotate(-2deg); }
.cm-wordmark img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cm-private { color:#fff1d7; font-size:11px; }
.cm-close { flex:none; width:40px; height:40px; min-width:40px; color:#fff5df; border-color:#bea98a; border-radius:2px; background:#160e0cdd; }
.cm-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; padding:3px 22px 12px; height:100%; max-height:none; min-height:0; overflow:hidden; }
.cm-editor { display:flex; flex-direction:column; height:100%; min-height:0; max-height:none; padding:18px 24px 12px; overflow:auto; color:#211910; background:linear-gradient(#fff6e5de,#fff6e5de),url("card-stock-v2.webp") center/cover; box-shadow:2px 6px 16px #0008,inset 0 0 25px #b0904c22; scrollbar-color:#715036 #efe0c3; }
.cm-steps { flex:none; gap:8px; padding:0 0 8px; margin:0 0 12px; border-bottom:1px solid #8e735878; }
.cm-steps button { display:flex; align-items:center; gap:7px; min-height:30px; padding:4px 6px; color:#463323; font-size:13px; border-bottom:2px solid transparent; }
.cm-steps b { display:inline; margin:0; color:inherit; font-size:11px; font-weight:600; letter-spacing:0; }
.cm-steps [aria-current="step"] { color:#66172b; font-weight:700; border-color:#7b2134; background:#fff9ec; }
.cm-steps [aria-current="step"] b { color:inherit; }
.cm h3 { color:#211910; font:400 30px/1.1 'IM Fell English',Georgia,serif; }
.cm-section-top { align-items:center; gap:12px; }
.cm-section-top .cm-link { font-size:12px; white-space:nowrap; }
.cm #cm-form { flex:1; min-height:0; }
.cm .cm-link { color:#6a182c; font-weight:600; text-decoration-thickness:1px; }
.cm .cm-link:hover { color:#a31532; }
.cm-madlib { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 16px; margin-top:14px; }
.cm-madlib .cm-field { display:block; min-width:0; margin:0; white-space:normal; color:#2d2016; font:600 13px/1.3 var(--tech-font,Arial,sans-serif); }
.cm-madlib .cm-field > span { display:inline; color:#4c3527; font-size:11px; font-weight:400; }
.cm-madlib input { display:block; width:100%; min-width:0; height:40px; min-height:40px; padding:7px 9px; margin:5px 0 0; border:1px solid #8b6d4e; border-bottom:2px solid #765036; border-radius:2px; background:#fffaf0; color:#20160f; font:18px/1.3 Georgia,serif; box-shadow:inset 0 1px 2px #674e2820; }
.cm-madlib input::placeholder { color:#65503c; opacity:1; font-style:italic; }
.cm-madlib input:hover { border-color:#60412b; }
.cm-madlib input:focus { border-color:#731c30; background:#fffdf7; }
.cm button:focus-visible,.cm input:focus-visible { outline:2px solid #86233b; outline-offset:2px; }
.cm-preview { display:flex; flex-direction:column; align-items:center; align-self:stretch; height:100%; min-height:0; max-width:none; margin:0; padding:2px 0 0; border:0; background:transparent; }
.cm-preview-heading { flex:none; width:100%; padding:0 4px 6px; color:#fff2d9; font-size:11px; text-transform:none; letter-spacing:.02em; }
#cm-card { flex:1; min-height:0; height:0; width:100%; max-width:100%; max-height:none; object-fit:contain; filter:drop-shadow(4px 10px 9px #0009); }
.cm-actionbar { padding:8px 22px 10px; background:#170c09f5; border-color:#b39a6470; }
.cm-actionbar .cm-link { color:#ffe6c6; }
.cm-actionbar .cm-controls { gap:14px; }
.cm-controls .cm-button,#cm-share.cm-secondary { min-height:42px; padding:9px 15px; font-size:14px; }
.cm-button { color:#fff8e8; background:#61162b; border:1px solid #9c5662; border-radius:2px; box-shadow:inset 0 1px #dbaaa326,0 2px 4px #0004; }
.cm-button:hover { background:#85213b; }
.cm-button.cm-secondary { min-height:36px; padding:7px 10px; margin-top:6px; color:#351b10; border-color:#826140; background:#fff8e8; font-size:13px; }
.cm-button.cm-secondary:hover { background:#ead2a8; }
#cm-share.cm-secondary { color:#fff1d7; background:#422819; border-color:#aa855e; }
.cm-options { margin-top:12px; gap:9px; }
.cm-options label > span { border-radius:2px; border:1px solid #9c805a; background:#fff9eb; box-shadow:1px 3px 5px #5d43232b; }
.cm-options input:checked + span { border-color:#7a1b32; background:#fffaf0; box-shadow:0 0 0 2px #7a1b32,1px 4px 6px #4e351f38; }
.cm-options strong { color:#271b13; font-weight:600; }
.cm-monsters { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cm-monsters label > span { display:block; padding:0 0 7px; text-align:center; }
.cm-monsters canvas { display:block; width:100%; height:75px; margin:0 0 6px; border-bottom:1px solid #af957978; object-fit:cover; object-position:center 35%; }
.cm-monsters strong { display:flex; align-items:center; justify-content:center; min-height:28px; padding:0 4px; font-size:12px; line-height:1.15; overflow-wrap:normal; }
.cm-photo-tools { grid-template-columns:82px minmax(0,1fr); gap:14px; margin:14px 0 10px; }
.cm-photo-title { color:#2e1e14; font:17px/1.2 Georgia,serif; margin:0 0 4px; }
#cm-face-preview { width:82px; height:94px; background:#a18b6e; border:3px solid #fff4dd; border-radius:1px; box-shadow:1px 3px 5px #4c351f50; }
#cm-remove-photo { margin-top:5px; font-size:11px; }
.cm-crop { padding:5px 0 0; margin:7px 0 0; border-top:1px solid #94765688; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cm-crop legend { font-size:12px; font-weight:600; padding-right:8px; }
.cm-crop label { display:block; color:#352417; margin:0; font-size:12px; }
.cm-crop input { display:block; width:100%; height:26px; min-height:26px; margin:2px 0 0; accent-color:#7a1b32; }
.cm-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cm-scenes label > span { padding:0 0 8px; }
.cm-scenes canvas { width:100%; height:clamp(85px,calc((var(--studio-height,100dvh) - 320px) / 2),160px); aspect-ratio:auto; margin-bottom:7px; object-fit:cover; object-position:center top; border-color:#af957978; }
.cm-scenes strong { margin:0 10px; font-size:14px; }
.cm-reset { flex:none; align-self:flex-start; min-height:26px; margin-top:10px; font-size:12px!important; }
.cm-status { color:#ffe1ce; }
.cm-actionbar .cm-status { font-size:12px; margin:0 0 5px; }
.cm-loading .cm-preview-loading,.cm-load-error .cm-preview-loading { color:#fff1d7; }
.cm-camera-active .cm-monsters,.cm-camera-active .cm-photo-tools,.cm-camera-active #cm-crop,.cm-camera-active .cm-reset { display:none; }
.cm-camera-panel { margin:12px 0 0; }
.cm-viewfinder { height:clamp(96px,calc(var(--studio-height,100dvh) - 370px),220px); width:min(100%,calc(clamp(96px,calc(var(--studio-height,100dvh) - 370px),220px) * 4 / 3)); aspect-ratio:4/3; margin:0 auto; border-radius:2px; }
.cm-camera-actions { justify-content:center; gap:16px; margin-top:8px; }
.cm-camera-actions .cm-button { min-height:36px; padding:7px 14px; }
.cm-camera-actions .cm-link { min-height:36px; font-size:12px; }
@media (max-width:760px),(max-height:550px) {
 .cm { width:100%; max-width:100%; height:var(--studio-height,100dvh); max-height:var(--studio-height,100dvh); margin:0; border:0; border-radius:0; }
 .cm-header { min-height:54px; padding:4px 14px; gap:12px; }
 .cm-wordmark { width:142px; height:43px; }
 .cm-private { font-size:10px; max-width:100px; }
 .cm-close { margin-left:auto; min-width:40px; width:40px; height:40px; }
 .cm-layout { display:block; padding:0 12px 8px; overflow:hidden; }
 .cm-editor { height:100%; padding:12px 16px 8px; overflow:auto; }
 .cm-steps { gap:6px; margin-bottom:9px; padding-bottom:5px; }
 .cm-steps button { min-height:30px; padding:3px 5px; font-size:12px; }
 .cm h3 { font-size:27px; }
 .cm-section-top .cm-link { max-width:none; white-space:nowrap; font-size:12px; }
 .cm-madlib { gap:7px 10px; margin-top:10px; }
 .cm-madlib .cm-field { font-size:12px; line-height:1.3; }
 .cm-madlib .cm-field:nth-child(n+3) { grid-column:1/-1; }
 .cm-madlib input { height:37px; min-height:37px; margin-top:3px; padding:6px 8px; font-size:16px; }
 .cm-madlib .cm-field > span { font-size:10px; }
 .cm-reset { min-height:24px; margin-top:7px; }
 .cm-preview { display:none; height:100%; padding:3px 0 0; }
 .cm-previewing .cm-editor { display:none; }
 .cm-previewing .cm-preview { display:flex; }
 .cm-preview-heading { max-width:430px; margin:0 auto; font-size:10px; }
 #cm-card { flex:1; height:0; width:100%; max-height:none; max-width:100%; }
 .cm-actionbar { padding:7px 12px calc(7px + env(safe-area-inset-bottom)); }
 .cm-actionbar .cm-controls { gap:10px; }
 .cm-controls .cm-link { min-height:40px; font-size:12px; }
 .cm-controls .cm-button,#cm-share.cm-secondary { min-height:40px; padding:9px 12px; font-size:13px; gap:10px; }
 .cm-full-label { display:none; }
 .cm-short-label { display:inline; }
 #cm-preview-toggle { display:block; }
 .cm-monsters { gap:7px; }
 .cm-monsters label > span { display:block; padding:0 0 5px; }
 .cm-monsters canvas { width:100%; height:64px; margin-bottom:5px; }
 .cm-monsters strong { justify-content:center; align-self:auto; padding:0 3px; min-height:28px; font-size:11px; }
 .cm-photo-tools { grid-template-columns:72px minmax(0,1fr); gap:12px; margin:12px 0 8px; }
 #cm-face-preview { width:72px; height:83px; }
 .cm-photo-title { font-size:16px; }
 .cm-button.cm-secondary { min-height:34px; font-size:12px; }
 .cm-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:none; margin:12px 0 0; }
 .cm-scenes canvas { height:clamp(82px,calc((var(--studio-height,100dvh) - 300px) / 2),145px); aspect-ratio:auto; }
 .cm-scenes strong { margin:0 6px; font-size:12px; }
 .cm-scenes label > span { padding-bottom:8px; }
}
@media (max-width:350px) {
 .cm-private { display:none; }
 .cm-editor { padding:10px 12px 6px; }
 .cm-controls .cm-button,#cm-share.cm-secondary { padding:9px; font-size:12px; }
 .cm-actionbar .cm-controls { gap:8px; }
}
@media (max-height:550px) and (min-width:600px) {
 .cm-header { min-height:48px; padding-top:3px; padding-bottom:3px; }
 .cm-wordmark { height:40px; width:132px; }
 .cm-editor { padding:8px 18px 5px; }
 .cm-steps { padding-bottom:3px; margin-bottom:6px; }
 .cm-steps button { min-height:26px; }
 .cm h3 { font-size:24px; }
 .cm-madlib { gap:6px 14px; margin-top:7px; }
 .cm-madlib .cm-field:nth-child(n+3) { grid-column:auto; }
 .cm-madlib input { height:34px; min-height:34px; margin-top:2px; }
 .cm-reset { min-height:22px; margin-top:5px; }
 .cm-step[data-panel="1"] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px 16px; }
 .cm-step[data-panel="1"] h3,.cm-step[data-panel="1"] .cm-crop { grid-column:1/-1; }
 .cm-monsters { margin:0; }
 .cm-monsters canvas { height:48px; }
 .cm-monsters strong { min-height:25px; }
 .cm-photo-tools { margin:0; }
 .cm-crop { margin:0; padding-top:2px; }
 .cm-crop legend,.cm-crop label { font-size:11px; }
 .cm-crop input { height:22px; min-height:22px; margin:0; }
 .cm-camera-active .cm-step[data-panel="1"] { display:block; }
 .cm-camera-panel { margin-top:6px; }
 .cm-camera-actions { margin-top:5px; }
 .cm-scenes { margin-top:8px; grid-template-columns:repeat(4,minmax(0,1fr)); }
 .cm-scenes canvas { height:clamp(60px,calc(var(--studio-height,100dvh) - 245px),140px); }
 .cm-actionbar { padding-top:5px; padding-bottom:5px; }
}
@media (max-height:550px) and (min-width:600px) {
 .cm-monsters { align-self:start; }
 .cm-photo-tools > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 7px; }
 .cm-photo-title,#cm-remove-photo { grid-column:1/-1; }
 .cm-photo-title { margin:0; font-size:15px; }
 .cm-photo-tools .cm-button.cm-secondary { margin:0; padding:5px; min-height:31px; font-size:12px; gap:5px; }
 .cm-camera-button img { width:25px; height:19px; }
 #cm-remove-photo { margin:0; min-height:18px; padding:0; font-size:10px; }
 .cm-scenes canvas { height:clamp(60px,calc(var(--studio-height,100dvh) - 252px),135px); }
}
@media (max-height:550px) and (min-width:600px) {
 .cm-crop legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .cm-crop label { line-height:1.2; }
}
@media (min-width:761px) and (min-height:551px) and (max-height:700px) {
 .cm-monsters canvas { height:56px; }
 .cm-photo-tools { grid-template-columns:68px minmax(0,1fr); gap:12px; }
 #cm-face-preview { width:68px; height:78px; }
 .cm-photo-tools > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 7px; }
 .cm-photo-title,#cm-remove-photo { grid-column:1/-1; margin:0; }
 .cm-photo-title { font-size:16px; }
 .cm-photo-tools .cm-button.cm-secondary { min-height:34px; margin:0; padding:5px; font-size:12px; gap:5px; }
 .cm-camera-button img { width:25px; height:19px; }
 .cm-scenes canvas { height:clamp(80px,calc((var(--studio-height,100dvh) - 420px) / 2),130px); }
}

/* Photographic leather-and-brass action plates; labels stay accessible and crisp. */
#card-maker :is(.cm-button,.cm-link,.cm-close,.cm-steps button) {
 background:transparent url("oxblood-button.webp") center/100% 100% no-repeat;
 border:0; border-radius:0; box-shadow:none; color:#fff3df;
 text-decoration:none; text-shadow:0 1px 2px #000; font-weight:600;
 transition:filter 140ms ease;
}
#card-maker .cm-link { padding:7px 12px; min-height:32px; }
#card-maker .cm-steps button { justify-content:center; padding:6px 9px; }
#card-maker :is(.cm-button,.cm-link,.cm-close,.cm-steps button):hover { filter:brightness(1.18); color:#fff8ed; }
#card-maker :is(.cm-button,.cm-link,.cm-close,.cm-steps button):active { filter:brightness(.88); }
#card-maker .cm-steps [aria-current="step"] { color:#fff7da; filter:brightness(1.22); box-shadow:0 2px 0 #9e6a36; }
#card-maker .cm-steps b { color:#d8b48a; }
#card-maker :is(.cm-button,.cm-link,.cm-close,.cm-steps button):focus-visible { outline:2px solid #bd8752; outline-offset:2px; }
#card-maker #cm-sample { font-size:12px; white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { #card-maker :is(.cm-button,.cm-link,.cm-close,.cm-steps button) { transition:none; } }

/* Keep the canvas and stationery at their pre-keyboard size. Only the form
   scrolls to expose the active field above the phone keyboard. */
@media (pointer:coarse) {
 #card-maker.cm-keyboard { position:fixed; top:0; bottom:auto; margin-top:0; height:var(--studio-height); max-height:var(--studio-height); }
 #card-maker.cm-keyboard .cm-editor { padding-bottom:calc(var(--keyboard-space,0px) + 24px); scroll-behavior:auto; }
}

#card-maker #cm-share { flex:0 0 42px; width:42px; min-width:42px; padding:9px; margin-left:auto; }
#card-maker #cm-share svg { display:block; flex:none; }
#card-maker #cm-download { margin-left:0; }
@media(max-width:600px) {
 #card-maker .cm-controls { gap:6px; }
 #card-maker #cm-share { flex-basis:40px; width:40px; min-width:40px; padding:8px; }
}