/* Template studio: mobile first, all illustrations are local SVG. */
.collection-hero{padding-top:42px;padding-top:clamp(42px,7vw,90px);padding-bottom:36px}.collection-hero h1,.create-heading h1{font-family:var(--serif,Georgia,'Noto Serif SC',serif);font-weight:500;letter-spacing:-.055em;font-size:48px;font-size:clamp(38px,6vw,72px);line-height:1.15;margin:18px 0 24px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent,#9d634e);font-weight:600}.collection-lead{font-size:15px;line-height:1.9;color:var(--muted,#77716b);max-width:600px}.collection-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}.filter-chip{border:1px solid var(--line,#ded8d0);background:transparent;color:var(--muted,#77716b);font:inherit;font-size:12px;padding:9px 16px;border-radius:24px;cursor:pointer}.filter-chip.is-active{background:var(--ink,#302c27);border-color:var(--ink,#302c27);color:var(--bg,#faf7f1)}.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 15px;padding:12px 0}.template-card{display:block;min-width:0;text-decoration:none;color:var(--ink,#302c27);border-radius:14px;background:var(--surface,#fffdfa);border:1px solid var(--line,#e7e0d5);overflow:hidden;transition:transform .2s,box-shadow .2s}.template-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px #2920140d}.template-card:focus-visible{outline:3px solid var(--accent,#9d634e);outline-offset:4px}.template-thumb{height:200px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:#f2e7da;color:#a36d4d}.template-thumb .motif,.template-thumb img{width:150px;height:150px}.template-number{position:absolute;top:14px;left:16px;font:10px Georgia,serif;letter-spacing:.14em;opacity:1;color:var(--muted);background:var(--surface);padding:1px 4px;border-radius:3px}.template-info{position:relative;padding:19px 15px 23px}.template-info h2{font-family:var(--serif,Georgia,serif);font-size:16px;font-weight:500;margin:0 0 7px;letter-spacing:.02em;padding-right:18px}.template-info p{font-size:11px;line-height:1.7;color:var(--muted,#77716b);margin:0;padding-right:8px}.template-arrow{position:absolute;right:13px;top:19px;color:var(--accent,#9d634e)}.thumb-letter{background:#f0e7df;color:#b07a5b}.thumb-tree{background:#e3e9dd;color:#6d8564}.thumb-dialog{background:#f4e1df;color:#b77476}.thumb-garden{background:#f2e2e0;color:#b4797e}.thumb-timeline{background:#e9e2d6;color:#8d7653}.thumb-album{background:#e2e7ec;color:#718195}.thumb-garden-night{background:#293f3b;color:#bdd1ad}.thumb-heart{background:#ebd6d1;color:#b16b6b}.thumb-orbit{background:#e5dfe8;color:#8d7099}.thumb-constellation{background:#252e48;color:#d1b996}.thumb-hearts{background:#f3e1dd;color:#c68d87}.thumb-dialog-boy{background:#dce7e2;color:#63877b}.collection-note{font-size:12px;line-height:1.8;text-align:center;color:var(--muted,#77716b);padding:35px 0 50px}.create-heading{padding-top:32px;padding-bottom:24px}.create-heading h1{font-size:38px;font-size:clamp(34px,5vw,52px);margin:12px 0 14px}.quiet-link{display:inline-block;color:var(--muted,#77716b);font-size:12px;text-decoration:none;margin-bottom:26px}.create-layout,.poem-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:70px}.create-form{padding:24px;min-width:0}.step-label{font-size:13px;font-weight:600;margin-bottom:26px;display:flex;gap:11px;align-items:center}.step-label span{font:11px Georgia,serif;border:1px solid var(--line,#ded8d0);border-radius:50%;padding:7px;color:var(--accent,#9d634e)}.field{display:flex;flex-direction:column;gap:9px;font-size:12px;line-height:1.6;margin-bottom:22px;min-width:0;color:var(--ink,#302c27)}.field input,.field textarea,.field select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;border:1px solid var(--line,#ded8d0);border-radius:8px;background:var(--bg,#faf7f1);font-family:inherit;font-size:16px;line-height:1.6;padding:11px 13px;color:var(--ink,#302c27)}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent,#9d634e);outline-offset:2px}.field textarea{resize:vertical;min-height:155px}.field input::placeholder,.field textarea::placeholder{color:var(--muted,#77716b);opacity:1}.name-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.field-help,.privacy-note,.optional{font-size:11px;line-height:1.8;color:var(--muted,#77716b);font-weight:400}.privacy-note{padding:14px 0 26px;border-bottom:1px solid var(--line,#ded8d0);margin-bottom:26px}.create-form>.button{width:100%;margin-top:4px}.create-form .field-help{margin-bottom:18px}.preview-column{min-width:0}.preview-topline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted,#77716b);margin-bottom:15px}.preview-dot{width:6px;height:6px;border-radius:50%;background:#6d8564}.preview-private{margin-left:auto;font-size:10px;letter-spacing:.08em}.preview-phone{max-width:390px;margin:0 auto;padding:8px;border:1px solid var(--line,#ded8d0);border-radius:28px;background:var(--surface,#fffdfa);box-shadow:0 20px 70px #30221c0a;overflow:hidden}.preview-phone iframe{display:block;width:100%;height:650px;border:0;border-radius:21px;background:var(--bg,#faf7f1)}.preview-caption{text-align:center;margin-top:16px}#local-result{padding-top:16px}#local-image{display:block;width:250px;max-width:100%;width:min(100%,250px);height:auto;margin:0 auto 12px}#local-download{display:flex;justify-content:center}.poem-paper{background:var(--surface,#fffdfa);border:1px solid var(--line,#ded8d0);border-radius:14px;position:relative;min-height:440px;padding:50px 30px;box-sizing:border-box;text-align:center;background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,#98816d08 32px)}.poem-paper h2{font-family:var(--serif,Georgia,serif);font-size:18px;font-weight:500;margin:24px 0}.poem-seal{display:flex;width:28px;height:33px;align-items:center;justify-content:center;color:var(--accent,#9d634e);border:1px solid currentColor;font-family:serif;margin:0 auto 20px;font-size:19px;border-radius:4px;transform:rotate(-4deg)}.poem-result{font-family:var(--serif,Georgia,serif);font-size:20px;font-size:clamp(16px,3vw,23px);line-height:2.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;margin:24px 0 32px;min-height:140px}.poem-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.poem-paper>.field-help{margin-top:28px}.story-body{margin:0;background:var(--bg,#faf7f1);color:var(--ink,#302c27);font-family:var(--sans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);min-width:0;overflow-x:hidden}.story-stage{--story-ink:#a76e5b;position:relative;min-height:calc(100vh - 70px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px 30px;isolation:isolate}.story-art{width:200px;height:200px;flex-shrink:0;color:var(--story-ink);margin:0 auto 15px;pointer-events:none}.story-art svg{width:100%;height:100%;overflow:visible}.story-content{width:100%;max-width:650px;text-align:center;position:relative;z-index:1;overflow-wrap:anywhere;word-break:break-word}.story-kicker{font-size:10px;letter-spacing:.16em;color:var(--muted,#77716b);margin:8px 0 21px}.story-content h1{font-family:var(--serif,Georgia,'Noto Serif SC',serif);font-size:32px;font-size:clamp(25px,4vw,42px);line-height:1.35;font-weight:500;letter-spacing:.03em;margin:0 0 23px}.story-text{white-space:pre-wrap;font-size:16px;line-height:2.1;margin:0 auto 24px;text-align:left;max-width:540px}.story-names{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;font:18px/1.7 var(--serif,Georgia,serif);margin:18px 0 24px}.names-heart{color:var(--story-ink)}.story-date{font-size:11px;color:var(--muted,#77716b);line-height:1.8;border-top:1px solid var(--line,#ded8d0);padding-top:20px;margin-top:24px;letter-spacing:.04em}.story-signature{font:italic 17px Georgia,serif;letter-spacing:.05em;color:var(--story-ink);margin:30px 0 16px}.story-footer{display:flex;align-items:center;justify-content:center;gap:18px;padding:24px 15px;font-size:11px;line-height:1.5;color:var(--muted,#77716b);box-sizing:border-box;flex-wrap:wrap}.story-footer a{color:inherit;text-decoration:none}.story-footer select{background:transparent;border:1px solid var(--line,#ded8d0);border-radius:16px;color:var(--muted,#77716b);font:inherit;padding:4px 9px}.story-audio{margin:20px auto 0;text-align:center;display:flex;flex-direction:column;gap:9px;position:relative;z-index:2}.music-toggle{background:transparent;border:1px solid var(--line,#ded8d0);color:var(--muted,#77716b);font-size:11px;line-height:1.5;font-family:inherit;padding:9px 15px;border-radius:30px;cursor:pointer}#music-status{font-size:10px;color:var(--muted,#77716b)}.story-content .story-dialog{padding:20px 0 0}#dialog-question{font-family:var(--serif,Georgia,serif);font-size:20px;line-height:1.7}.dialog-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}#dialog-response{font-size:13px;line-height:1.8;color:var(--story-ink);min-height:24px}.story-tree{--story-ink:#7c9170}.story-garden{--story-ink:#b7787d}.story-timeline{--story-ink:#a48b65}.story-album{--story-ink:#8293a1;background-image:radial-gradient(circle at 15% 15%,#adbfc61a 1px,transparent 2px),radial-gradient(circle at 70% 65%,#adbfc62a 2px,transparent 3px);background-size:42px 62px,81px 70px}.story-garden-night{--story-ink:#8ba984}.story-heart{--story-ink:#c17b7b}.story-orbit{--story-ink:#9d83af}.story-constellation{--story-ink:#b1966f;background-image:radial-gradient(circle at 40% 30%,#bc9b6818 1px,transparent 2px);background-size:43px 47px}.story-hearts{--story-ink:#c48885}.story-dialog-boy{--story-ink:#7d9a90}.story-letter .story-content{border:1px solid var(--line,#ded8d0);border-radius:4px;background:var(--surface,#fffdfa);padding:35px 24px;box-sizing:border-box;box-shadow:5px 5px 0 var(--bg,#faf7f1),6px 6px 0 var(--line,#ded8d0)}.story-letter .story-art{width:110px;height:110px;margin-bottom:24px}.story-note .story-art{width:100px;height:100px}.story-timeline .story-text{border-left:1px solid var(--line,#ded8d0);padding-left:20px;box-sizing:border-box}.is-preview .story-stage{min-height:100vh;padding:30px 22px}.is-preview .story-art{width:160px;height:160px}.is-preview .story-content h1{font-size:27px}.is-preview .story-text{font-size:14px;line-height:2}.is-preview .story-letter .story-content{padding:24px 18px}.is-preview .story-kicker{letter-spacing:.08em;font-size:9px}.tree-leaf{transform-box:fill-box;transform-origin:center;animation:leaf-grow 1.4s both}.tree-trunk{stroke-dasharray:240;stroke-dashoffset:0;animation:tree-grow 1.5s ease-out}.beating-heart{transform-origin:120px 120px;animation:heartbeat 3s ease-in-out infinite}.star-point{animation:twinkle 3s ease-in-out infinite alternate}.floating-heart{opacity:.5}.orbit-ring{transform-origin:120px 120px;animation:orbit-drift 18s ease-in-out infinite}.template-thumb *{animation:none!important}.story-body [hidden],.create-layout [hidden],.poem-layout [hidden]{display:none!important}
@keyframes leaf-grow{from{opacity:0;scale:.1}to{opacity:1;scale:1}}@keyframes tree-grow{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}@keyframes heartbeat{0%,100%{transform:scale(.98)}50%{transform:scale(1.025)}}@keyframes twinkle{from{opacity:.25}to{opacity:1}}@keyframes orbit-drift{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@media(min-width:680px){.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.template-thumb{height:230px}.template-thumb .motif,.template-thumb img{width:165px;height:165px}.template-info{padding:23px}.template-info h2{font-size:19px}.template-info p{font-size:12px}.template-arrow{right:21px;top:24px}.create-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}.create-form{padding:32px}.preview-column{position:sticky;top:28px}.poem-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}.story-stage{padding:60px 40px 35px}.story-art{width:240px;height:240px}.story-letter .story-content{padding:45px}}
@media(min-width:1120px){.template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.template-thumb{height:240px}.create-layout{max-width:1040px}.poem-layout{max-width:1040px}}
@media(max-width:359px){.template-grid{gap:12px 9px}.template-thumb{height:155px}.template-thumb .motif,.template-thumb img{width:125px;height:125px}.template-info{padding:14px 10px}.template-info h2{font-size:14px}.template-info p{font-size:10px}.template-arrow{right:9px;top:14px}.create-form{padding:18px}.name-fields{gap:10px}.poem-paper{padding:35px 20px}.story-stage{padding-left:18px;padding-right:18px}.story-footer{gap:12px}}
@media(prefers-reduced-motion:reduce){.story-body *,.template-card{animation:none!important;transition:none!important;scroll-behavior:auto!important}.tree-trunk{stroke-dashoffset:0}.tree-leaf{opacity:1}}

.story-footer select{width:auto;min-height:44px;padding:4px 9px}[data-theme=night] .story-art .motif{filter:brightness(1.3)}

.story-stage[data-paused=true] *{animation-play-state:paused!important}

/* Keep animated foliage inside the artwork, clear of the readable foreground. */
.story-tree .story-art{position:relative;z-index:0;overflow:hidden;isolation:isolate}
.story-tree .story-art svg{overflow:hidden}
/* Native select labels need a full row on narrow forms. */
.poem-layout .name-fields{grid-template-columns:minmax(0,1fr)}

.tree-falling-leaf{opacity:.65;animation:leaf-fall 8s ease-in-out infinite;pointer-events:none}
@keyframes leaf-fall{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:.65}65%{transform:translate(9px,48px) rotate(100deg);opacity:.55}100%{transform:translate(-6px,85px) rotate(170deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.tree-falling-leaf{animation:none!important;opacity:0}}

/* Scene shortcuts reuse the existing theme-aware chips and remain hidden without JS. */
.gallery-scenes{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px;color:var(--ink);font-size:12px}
.gallery-scenes[hidden]{display:none}
.gallery-scenes .filter-chip{min-height:44px;min-width:44px;box-sizing:border-box}
.gallery-scenes .filter-chip:focus{outline:2px solid var(--accent);outline-offset:3px}