@import url('./assets/fonts/fonts.css?v=fontfix1');
@import url('./shared/starter.css');
/* Compact tool panel. Canvas rendering and image palettes remain in script.js. */
body{background:linear-gradient(180deg,#edf8f5 0%,#f7fbf9 38%,#fffaf4 100%)}
html{scroll-padding-top:78px}.site-header{position:sticky;top:0;z-index:30;max-width:none;width:100%;background:#fffefd;border-bottom:1px solid #e7eae4;padding:8px max(24px,calc((100% - 1032px)/2))}.site-header .brand{display:inline-flex;align-items:center;min-height:44px;font:400 20px/1.6 'Zen Kurenaido',sans-serif;letter-spacing:.04em;color:inherit;text-decoration:none}
.hero{text-align:center;padding:17px 16px 23px}.hero .eyebrow{margin:0 0 3px;font-size:11px}.hero h1{font:400 40px/1.35 'Zen Kurenaido',sans-serif;letter-spacing:.08em;margin:3px 0 8px}.hero>p{margin:7px 0;line-height:1.65}.hero .features{font-size:14px;color:var(--muted);margin:10px 0 0}
main{max-width:1080px;margin:auto;padding:0 24px}.workspace{display:grid;grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);gap:30px;padding:25px;background:var(--paper);border:1px solid var(--line);border-radius:14px;align-items:start}.preview-panel{min-width:0}.preview-panel h2{font-size:16px;margin:0 0 12px}.paper-frame{max-width:430px;margin:auto;border:1px solid var(--line);background:#fff;box-shadow:0 4px 16px #71544008}#preview{display:block;width:100%;height:auto;aspect-ratio:1}.editor{min-width:0;display:grid;gap:12px}.field{min-width:0}label,.field-label{display:block;font-size:15px;margin:0 0 5px}.date-row{display:flex;gap:12px;align-items:center}.date-row input[type=date]{flex:1;min-width:0}.year-option{display:flex;align-items:center;gap:7px;white-space:nowrap;min-height:44px;margin:0;font-size:14px;cursor:pointer}.year-option input{width:18px;height:18px;margin:0;accent-color:var(--accent)}input[type=date],input[type=text],select{display:block;max-width:100%;width:100%;min-width:0;min-height:44px;border:1px solid #cdbfaf;border-radius:7px;background:#fff;padding:8px 10px;font-size:16px;line-height:1.5}input[type=date]{min-inline-size:0}.hint{font-size:14px}.date-note{margin:3px 0 0}.phrase-hint{margin:5px 0 0}.counter{display:flex;justify-content:space-between;gap:8px;margin-top:4px}.counter #count{white-space:nowrap}.backgrounds{display:flex;flex-wrap:wrap;gap:6px}.background-choice{display:flex;flex:1 0 64px;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;border:1px solid var(--line);border-radius:7px;background:var(--paper);padding:5px 3px;font-size:14px}.swatch{display:block;width:20px;height:20px;border:1px solid #b5b7ad;border-radius:50%}.background-choice[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:-2px}.background-choice[aria-pressed=true] .swatch::after{content:'✓';display:block;text-align:center;font-size:14px;line-height:18px;color:#514b45}.background-choice:focus-visible{outline:3px solid #657f8a;outline-offset:4px}.save-area{text-align:center;padding:22px 0 0}.save-actions{max-width:400px;margin:auto;display:grid;gap:9px}.save-actions .primary{min-height:52px;font-size:17px}.save-actions .text-button{justify-self:center}.save-note{margin:12px 0 0}.status{font-size:14px;min-height:24px;margin:8px 0}.privacy{margin:5px 0}.information{margin-top:42px}.recommend,.howto{padding-left:24px}.recommend li,.howto li{margin:10px 0}.share{text-align:center}.information .hashtag{font-size:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}#export-dialog h2{padding-right:24px}
@media(max-width:760px){main{padding:0 16px}.site-header{padding:8px 16px}.site-header .brand{font-size:19px}.hero{padding:14px 16px 20px}.hero h1{font-size:34px}.workspace{grid-template-columns:minmax(0,1fr);padding:14px;gap:20px}.preview-panel{width:100%;max-width:320px;justify-self:center}.preview-panel h2{margin-bottom:8px}.editor{gap:12px}.date-row{flex-wrap:wrap;gap:3px}.date-row input[type=date]{flex-basis:100%}.year-option{min-height:36px}.date-note{margin-top:0}.save-area{padding-top:18px}.information{margin-top:32px}.information h2{font-size:25px}}
@media(max-width:760px){.background-choice{flex-basis:56px}}
@media(max-width:360px){.backgrounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Small hero tags follow Square Deco Photo's wrapping pill pattern. */
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:12px}.hero-tags span{font-size:13px;line-height:1.6;padding:4px 12px;border:1px solid #dce5dd;border-radius:999px;background:#ffffffb3;color:var(--muted)}
.save-note{max-width:580px;margin:14px auto 0;padding:12px 16px;border:1px solid #e1e7de;border-radius:9px;background:#f5f8f2}.status:empty{display:none}.privacy{margin:13px 0 0;font-size:14px}