@font-face{font-family:studio-local;src:local("PingFang TC")}*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#eaf0f0;color:#152c36;font-family:studio-local,"Noto Sans CJK TC","Microsoft JhengHei",sans-serif;font-size:16px;line-height:1.5;padding-bottom:calc(100px + env(safe-area-inset-bottom))}button,input,textarea{font:inherit}button,a,.file-button,summary{touch-action:manipulation}button{min-height:44px;border:1px solid #aebdc0;border-radius:10px;background:#fff;color:#152c36;padding:9px 15px;cursor:pointer;font-weight:650}button:hover{background:#eaf1f2}button:disabled{opacity:.5;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #147984;outline-offset:3px}[hidden]{display:none!important}.topbar{height:54px;background:#152c36;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1160px)/2));gap:10px}.topbar a{text-decoration:none;min-height:44px;display:flex;align-items:center;font-weight:650}.topbar span{font-size:12px;letter-spacing:.12em;color:#bbd0d4}.studio{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);align-items:start;gap:38px;padding:28px 24px}.preview-pane{position:sticky;top:16px;min-width:0}.preview-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.preview-title p{font-size:12px;letter-spacing:.14em;margin:0;color:#587078}.preview-title h1{font-size:clamp(21px,2.3vw,30px);letter-spacing:-.03em;margin:2px 0 0}.preview-title button{background:transparent}.paper-stage{position:relative;min-height:170px;display:flex;align-items:center;justify-content:center;background:#d6e1e1;border:1px solid #c2d0d2;border-radius:16px;padding:22px;overflow:hidden}#preview{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 244px);box-shadow:0 12px 30px #15303d24;touch-action:none;cursor:move;user-select:none;-webkit-user-select:none}#loading{position:absolute;background:#152c36;color:white;padding:12px 18px;border-radius:10px;font-size:14px}.preview-caption{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin:10px 0;color:#41616a}.drag-note{font-size:14px;margin:0;color:#526a70}.editor{background:#fff;border:1px solid #c5d3d6;border-radius:16px;overflow:hidden;min-width:0}.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#f5f8f8;border-bottom:1px solid #d4dfe1;padding:8px;gap:4px}.tabs button{border:0;background:transparent;font-size:14px;padding:9px 4px}.tabs button[aria-selected=true]{background:#152c36;color:white}.panel{padding:22px}.panel h2{font-size:20px;margin:0 0 18px;letter-spacing:-.02em}.panel-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px;justify-content:space-between}.panel-heading h2{margin:0}.file-button{display:inline-flex;align-items:center;min-height:44px;background:#edf3f3;border:1px solid #bbccce;border-radius:9px;padding:8px 12px;font-size:14px;font-weight:650;cursor:pointer}.file-button:focus-within{outline:3px solid #147984;outline-offset:3px}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.hint{font-size:14px;color:#51676c;line-height:1.65;margin:12px 0 16px}.category{display:flex;gap:8px;margin:16px 0 12px}.category button{flex:1;font-size:14px;padding:7px}.category button[aria-pressed=true]{border-color:#152c36;background:#eaf1f2}.category span{font-size:12px;color:#547078;margin-left:5px}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:330px;overflow-y:auto;padding:3px 5px 8px 3px;overscroll-behavior:contain;scrollbar-gutter:stable}.photo-choice{padding:4px;min-width:0;text-align:left;border:2px solid transparent;background:#f0f4f4;position:relative}.photo-choice[aria-pressed=true]{border-color:#147984;background:#e0f1f0}.photo-choice img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px}.photo-choice span{display:block;font-size:12px;line-height:1.4;margin:5px 2px;overflow-wrap:anywhere}.photo-choice[aria-pressed=true]:after{content:"已選";position:absolute;top:7px;right:7px;font-size:12px;padding:1px 5px;background:#152c36;color:white;border-radius:4px}.adjustments{border-top:1px solid #d7e0e2;margin-top:16px;padding-top:13px}.adjustments summary{min-height:44px;cursor:pointer;font-size:14px;font-weight:650}.panel label,.adjustments label{display:block;font-size:14px;font-weight:600;margin:0 0 16px}.panel input[type=text],.panel textarea,.panel input[type=date]{display:block;width:100%;margin-top:7px;min-height:44px;border:1px solid #aabcc1;border-radius:8px;padding:9px 11px;background:#fbfdfd;color:#152c36;font-size:16px}.panel textarea{resize:vertical}.panel input[type=range]{display:block;width:100%;min-height:44px;accent-color:#147984;margin-top:4px}.panel output{float:right;font-weight:500;color:#587078}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.template-choice{padding:14px;text-align:left;min-height:134px;position:relative;border:2px solid transparent;display:flex;flex-direction:column;justify-content:flex-end}.template-choice strong{font-size:18px}.template-choice small{font-size:12px;line-height:1.5;margin-top:6px}.template-choice[data-template=paper]{background:#fff4d5;color:#152c36;border-top:9px solid #152c36}.template-choice[data-template=energy]{background:#ffda39;color:#172b61;border-right:12px solid #172b61}.template-choice[data-template=light]{background:linear-gradient(145deg,#2e626e,#163441);color:white}.template-choice[data-template=sleep]{background:#142d43;color:#ffe4a0;border-bottom:9px solid #ffbd49}.template-choice[aria-pressed=true]{outline:3px solid #147984;outline-offset:2px}.format{margin:24px 0 0;border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.format legend{font-size:14px;font-weight:650;margin-bottom:9px}.format label{border:1px solid #b8c8ce;padding:10px;border-radius:8px;min-height:70px;cursor:pointer;margin:0}.format input{accent-color:#147984;margin:0 6px 0 0}.format small{display:block;margin-left:24px;color:#51676c;font-size:12px}.text-actions{margin:-7px 0 18px}.text-actions button{font-size:14px}.date-row{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;align-items:end}.date-row .check{display:flex;min-height:44px;align-items:center;gap:8px}.date-row .check input{width:20px;height:20px;accent-color:#147984}.color-row{display:flex!important;align-items:center;justify-content:space-between}.color-row input{width:60px;height:44px;border:1px solid #afc1c5;border-radius:6px;padding:3px;background:white}.status{font-size:14px;color:#43606a;background:#f0f6f6;padding:14px 22px;margin:0;border-top:1px solid #d3dfe1;min-height:52px}.status[data-error=true]{color:#882d25;background:#fff0eb}.editor>#retry-image{margin:12px 22px}.save-fallback{padding:18px 22px;border-top:1px solid #d3dfe1}.save-fallback p{font-size:14px;margin-top:0}.save-fallback a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}.save-fallback img{display:block;width:100%;margin-top:12px}.export-bar{position:fixed;z-index:5;bottom:0;left:0;right:0;background:#152c36;color:white;display:flex;align-items:center;gap:10px;padding:12px max(18px,calc((100vw - 1160px)/2)) calc(12px + env(safe-area-inset-bottom));border-top:1px solid #34555d}.export-bar>div{flex:1}.export-bar strong{display:block;font-size:16px}.export-bar span{display:block;font-size:12px;color:#c0d0d4}.export-bar button{background:#29434d;border-color:#5b7178;color:white;font-size:14px}.export-bar button.primary{background:#ffda39;color:#152c36;border-color:#ffda39}dialog{border:0;border-radius:14px;width:min(850px,calc(100vw - 28px));max-height:92svh;padding:16px;background:#edf3f3;color:#152c36}dialog::backdrop{background:#0d232ade}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.dialog-header h2{font-size:18px;margin:0}#large-preview{display:block;max-width:100%;max-height:calc(86svh - 75px);width:auto;height:auto;margin:auto}@media(max-width:760px){.topbar{height:48px;padding:0 14px}.topbar span{display:none}.studio{display:block;padding:12px 12px 0}.preview-pane{top:0;z-index:3;background:#eaf0f0;padding:8px 0 10px}.preview-title{margin:0 0 8px}.preview-title p{display:none}.preview-title h1{font-size:22px}.preview-title button{min-height:44px;padding:7px 12px;font-size:14px}.paper-stage{padding:10px;border-radius:10px;min-height:140px}#preview{max-height:31svh;max-width:100%}.preview-caption{margin:6px 0 0;font-size:12px}.drag-note{display:none}.editor{margin-top:4px}.panel{padding:18px}.panel h2{font-size:18px}.photo-grid{max-height:260px}.template-choice{min-height:120px}.export-bar{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:7px}.export-bar>div{display:none}.export-bar button{flex:1;min-height:48px}.status{padding:12px 18px}.panel-heading{gap:8px}}@media(max-height:580px) and (min-width:600px){.studio{grid-template-columns:minmax(0,1fr) 330px;gap:16px;padding:12px}.preview-pane{top:8px}#preview{max-height:calc(100svh - 170px)}.preview-title{margin-bottom:6px}.preview-title p,.drag-note{display:none}.paper-stage{padding:12px}.export-bar>div{display:none}.export-bar button{flex:1}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}@media(min-width:761px){.preview-pane:has(canvas[data-format=square]) .paper-stage{min-height:350px}}

.style-options,.fit-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 18px}.style-options button{font-size:15px}.style-options button[aria-pressed=true]{background:#9d153b;color:#fff;border-color:#9d153b}.fit-options{margin-top:18px;padding:0;border:0}.fit-options legend{font-size:14px;font-weight:700;margin-bottom:8px}.fit-options label{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid #bbccce;border-radius:8px;padding:9px;margin:0}.fit-options input{accent-color:#9d153b}.template-choice[data-template=rose]{background:#fff0d1 url(/image-assets/b5de41bfc18511b660e6-240.webp) center/cover;color:#a30727}.template-choice[data-template=lotus]{background:#9ceffd url(/image-assets/8d551d53f57eabe8fc0e-240.webp) center/cover;color:#9d075a}.template-choice[data-template=sunshine]{background:#ffe57d url(/image-assets/00cceeb2d44dad59163e-240.webp) center/cover;color:#7a1725}.template-choice[data-template=friendship]{background:#b7f3d9 url(/image-assets/6fcb248543e217737311-240.webp) center/cover;color:#00442b}.template-choice[data-template=rose] strong,.template-choice[data-template=lotus] strong,.template-choice[data-template=sunshine] strong,.template-choice[data-template=friendship] strong{font-size:20px;text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff}.template-choice[data-template=rose] small,.template-choice[data-template=lotus] small,.template-choice[data-template=sunshine] small,.template-choice[data-template=friendship] small{background:#ffffffeb;border-radius:4px;padding:4px;font-size:14px}.photo-choice span{font-size:14px}#preview[data-fit=full]{cursor:default;touch-action:pan-y}.template-choice small{font-size:14px}
.template-choice[data-template=redletter]{background:#ffddbc url(/image-assets/e2abe2b8ad5f3a2e5c31-240.webp) center/cover;color:#a30725;border-left:12px solid #a30725}.template-choice[data-template=lotus-letter]{background:#bcefea url(/image-assets/8d551d53f57eabe8fc0e-240.webp) center/cover;color:#8c126b;border-bottom:12px solid #8c126b}.template-choice[data-template=lucky]{background:#ffe399 url(/image-assets/b5de41bfc18511b660e6-240.webp) center/cover;color:#8d0b26;border:5px double #987322}.template-choice[data-template=blessing]{background:#c4f2df url(/image-assets/a26ab8867424b0d05f6d-240.webp) center/cover;color:#14583f;border-right:12px solid #14583f}.template-choice[data-template=redletter] strong,.template-choice[data-template=lotus-letter] strong,.template-choice[data-template=lucky] strong,.template-choice[data-template=blessing] strong{text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff}.template-choice[data-template=redletter] small,.template-choice[data-template=lotus-letter] small,.template-choice[data-template=lucky] small,.template-choice[data-template=blessing] small{background:#ffffffeb;padding:4px;border-radius:4px}.template-choice[data-template=polaroid]{background:#ebd9bd;color:#593529;border-bottom:16px solid #fff}.template-choice[data-template=duet]{background:linear-gradient(90deg,#8fb7b2 48%,#d9ebe6 48%);color:#164951}.template-choice[data-template=postcard]{background:#f4ead7;color:#294253;border-bottom:12px solid #a3b9bb}.template-choice[data-template=album]{background:linear-gradient(90deg,#e9dce8 48%,#bba3ba 48%,#bba3ba 50%,#eee7ed 50%);color:#603e61}.template-grid{gap:12px}

.artwork-options{border:0;padding:0;margin:24px 0 0;min-width:0}.artwork-options legend{font-size:16px;font-weight:700}.artwork-options .hint{margin:8px 0 12px}.artwork-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.artwork-choice{padding:4px;min-width:0;border:2px solid transparent;background:#f0f4f4}.artwork-choice img{display:block;width:100%;height:auto;aspect-ratio:1.4;object-fit:cover;border-radius:6px}.artwork-choice span{display:block;font-size:14px;line-height:1.5;padding:5px 0}.artwork-choice[aria-pressed=true]{border-color:#147984;background:#e0f1f0}.editor>#retry-artwork{margin:12px 22px}
.category{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.category button{padding:9px 5px;font-size:14px;min-width:0}.category span{font-size:12px}.photo-choice[data-source=cutout] img{object-fit:contain;padding:7px;background:radial-gradient(ellipse at 50% 70%,#f4dab9,#fffaf1 75%)}#preview[data-fit=cutout]{cursor:grab;touch-action:none}#preview[data-fit=cutout]:active{cursor:grabbing}

.photo-choice small{display:block;margin:2px;font-size:12px;line-height:1.5;color:#526a70}
@media(max-width:420px){.category button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px}.category span{margin:0}}

.studio-actions{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid #d4dfe1;background:#f5f8f8}.studio-actions button{flex-shrink:0;border-color:#147984;color:#115d65}.studio-actions span#random-note{min-width:0;font-size:13px;line-height:1.5;color:#51676c}@media(max-width:420px){.studio-actions{gap:9px;padding:10px 12px}.studio-actions button{padding:9px 11px}.studio-actions span#random-note{font-size:12px}}

.qr-options{margin-top:20px;padding:14px;border:1px solid var(--line,#d9dedb);border-radius:14px}.qr-options .check{display:flex;align-items:center;gap:10px;min-height:44px}.qr-options input{width:20px;height:20px;flex:none}

.preset-words{border:0;border-bottom:1px solid #d7e0e2;padding:0 0 20px;margin:0 0 20px;min-width:0}.preset-words legend{font-size:16px;font-weight:700}.preset-words .hint{margin:8px 0 12px}.word-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}.word-groups button{min-width:0;font-size:14px;padding:9px 7px}.word-groups button[aria-pressed=true]{background:#152c36;color:white;border-color:#152c36}.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.word-choice{display:flex;flex-direction:column;gap:6px;min-width:0;text-align:left;padding:11px;border:2px solid #d7e0e2;background:#fbfdfd}.word-choice strong{font-size:15px;line-height:1.5;overflow-wrap:anywhere}.word-choice span{font-size:13px;font-weight:400;color:#51676c;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere}.word-choice[aria-pressed=true]{border-color:#147984;background:#e0f1f0}@media(max-width:420px){.word-grid{grid-template-columns:minmax(0,1fr)}}

.artwork-heading{font-size:15px;line-height:1.6;margin:20px 0 10px}.season-artwork-section{margin-top:20px;padding:12px;border:1px solid #ddc5ed;border-radius:12px;background:#f8f1fb}.season-artwork-section .artwork-heading{margin-top:0}.season-badge{display:inline-block;font-size:12px;vertical-align:middle;color:#68402b;background:#ffead1;border-radius:20px;padding:2px 8px}.season-artwork-section[hidden]{display:none}

.composition-toggle{min-height:44px}

/* Shared control rhythm and readable labels. */
.studio :is(button,a,input,textarea,summary) { border-radius:12px; }
.studio button { line-height:1.5; }
.studio :is(h1,h2,p,button,span,strong,small) { overflow-wrap:anywhere; }
.photo-choice span,.word-choice span,.artwork-choice span { font-size:.875rem; line-height:1.6; }
.word-choice strong { font-size:1rem; }
.studio-actions span#random-note { font-size:.875rem; }
.adjustments summary { padding-block:10px; }
.adjustments[open] summary { margin-bottom:8px; }
.composition-toggle { display:flex!important; align-items:center; gap:10px; line-height:1.6; }
.composition-toggle input { width:20px; height:20px; flex:none; accent-color:#147984; }
.save-fallback { scroll-margin-bottom:100px; }
.save-fallback a { padding:10px 16px; border-radius:12px; background:#152c36; color:#fff; text-decoration:none; }
.export-bar { flex-wrap:wrap; }
.export-bar button { min-height:48px; border-radius:12px; }
@media(max-width:760px) {
  .preview-pane { background:#eaf0f0; padding:8px 0; }
  .preview-caption { font-size:.875rem; flex-wrap:wrap; gap:4px 12px; }
  .category button { line-height:1.5; }
  .studio-actions { align-items:flex-start; }
  .template-choice { padding:12px; }
  .export-bar button { min-width:0; white-space:normal; }
  .paper-stage { min-height:0; }
  #preview { max-height:28svh; }
}

.photo-frame-options .hint{grid-column:1/-1;min-width:0;margin:4px 0 0}
.localized-date{grid-column:1/-1;display:block;max-width:100%;font-size:14px;line-height:1.65;color:#51676c;overflow-wrap:anywhere}

/* Fieldsets have a native min-content width; allow translated options to reflow. */
.studio fieldset { min-inline-size:0; max-width:100%; }
.format,.fit-options,.style-options,.template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.date-row { grid-template-columns:minmax(0,1fr); gap:0; }
.date-row>label { min-width:0; width:100%; }
/* WebKit still counts the native file button's overflow at opacity:0. */
.file-button { position:relative; }
.file-button input[type=file] {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
}
.panel input[type=date] {
  min-width:0; min-inline-size:0; max-width:100%; max-inline-size:100%;
  width:100%; inline-size:100%; box-sizing:border-box;
  appearance:none; -webkit-appearance:none; text-align:left;
}
.panel input[type=date]::-webkit-date-and-time-value { min-height:1.5em; text-align:left; }
.studio :is(label,legend,.preview-title>div,.preview-actions,.dialog-header>*),.export-bar>* { min-width:0; overflow-wrap:anywhere; }
.studio input:is([type=radio],[type=checkbox]) { flex:none; }
.photo-frame-options label { display:flex; align-items:center; gap:8px; }
.photo-frame-options input { margin:0; }
.studio-actions { flex-wrap:wrap; }
.studio-actions button { min-width:0; max-width:100%; flex-shrink:1; }
.preview-caption>span:last-child { flex:none; }
@media(max-width:319px) {
  .format,.fit-options,.style-options,.template-grid,.date-row { grid-template-columns:minmax(0,1fr); }
  .photo-grid,.artwork-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio { padding-inline:8px; }
  .panel { padding:12px; }
  .export-bar { position:static; }
  body { padding-bottom:0!important; }
}

/* Anchor each thumbnail to the card top when translated labels wrap. */
.photo-choice,.artwork-choice {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  appearance:none;
  -webkit-appearance:none;
}
.photo-choice img,.artwork-choice img { flex:none; }
.artwork-choice .japanese-phrase { display:inline-block; max-width:100%; padding:0; font:inherit; line-height:inherit; }
html:lang(ja) .artwork-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(6rem,calc((100% - 16px)/3))),1fr));
}