:root{--ui-font:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;color-scheme:light;--bg:#f5f3ee;--surface:#fffefa;--ink:#30362c;--muted:#777b70;--line:#dddfd3;--accent:#52613f;--soft:#e9eddf;--preview:#e2e5db;--title:var(--ui-font);--radius:10px;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;background:var(--surface);color:var(--ink)}button:hover{border-color:var(--accent)}button:disabled,input:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}h1:focus{outline:none}button,a,input{-webkit-tap-highlight-color:transparent}input:not([type=file]):not([type=range]),select{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px;min-height:46px;background:var(--surface);color:var(--ink);font-size:16px}input[type=range]{width:100%;accent-color:var(--accent)}[hidden]{display:none!important}.brand-bar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:920px;margin:auto;padding:0 22px;border-bottom:1px solid var(--line)}.brand{font-size:17px;font-weight:650;display:flex;align-items:center;gap:9px}.brand>span{font-size:29px}.privacy{font-size:11px;color:var(--muted);white-space:nowrap}.privacy i{width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block;margin-right:5px}main{padding:0 18px;max-width:760px;margin:auto}.welcome{padding:36px 2px 26px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--muted);margin:0 0 12px}.welcome h1{font-family:var(--title);font-size:34px;line-height:1.3;letter-spacing:1px;font-weight:500;margin:0}.welcome>p:last-child{font-size:14px;color:var(--muted);line-height:1.85;margin:17px 0 0}.style-choices{display:grid;gap:20px}.style-choice{text-align:left;overflow:hidden;padding:0;border-radius:13px;box-shadow:0 5px 18px #202e1910;transition:transform .15s}.style-choice:hover{transform:translateY(-2px)}.style-art{position:relative;background:#dfe3d6;aspect-ratio:1.65;overflow:hidden}.style-art canvas{width:100%;height:100%;object-fit:cover;display:block}.edition-tag{position:absolute;top:15px;left:17px;font-size:9px;letter-spacing:1.2px;color:#4b5545}.style-copy{padding:20px 22px 22px}.style-copy>div{display:flex;justify-content:space-between;align-items:center}.style-copy h2{font-family:var(--ui-font);font-size:25px;font-weight:500;margin:0}.choice-arrow{font-size:23px}.style-copy p{font-size:14px;line-height:1.8;margin:12px 0;color:#72776b}.style-tags{font-size:11px;letter-spacing:.5px;color:#6f7b58}.collage-choice{background:#fff2d1;border-color:#e4cad0;color:#724857}.collage-choice .style-art{background:#f2ddea}.collage-choice .style-copy h2{font-family:var(--ui-font);font-weight:700}.collage-choice .style-copy p{color:#98717a}.collage-choice .style-tags,.collage-choice .edition-tag{color:#ac5877}.entry-footer{text-align:center;font-size:13px;color:var(--muted);margin:27px 0}.entry-footer span{display:block;font-size:11px;margin-top:8px}.switch-note{font-size:13px;line-height:1.8;background:#eee9db;padding:15px;border-radius:9px}.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 0 18px}.editor-heading h1{font:500 25px var(--title);margin:0}.editor-heading .eyebrow{font-size:9px;margin-bottom:7px}.quiet-button{border:0;background:transparent;font-size:13px;padding:8px 0 8px 14px}.preview-card{background:var(--preview);border-radius:var(--radius);padding:14px;border:1px solid var(--line)}.preview-top,.preview-caption{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;color:var(--muted)}.preview-top{margin-bottom:11px}.preview-top>span:first-child{font-size:13px;color:var(--ink)}.preview-stage{display:flex;align-items:center;justify-content:center;min-height:240px;background:repeating-conic-gradient(#ffffff12 0 25%,#00000003 0 50%) 0 0/12px 12px}.preview-stage canvas{width:100%;height:auto;max-height:46dvh;object-fit:contain;display:block;filter:drop-shadow(0 3px 6px #26322018)}.preview-caption{font-size:10px;margin-top:11px;flex-wrap:wrap}.page-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:10px 0 0}.page-tabs button{border:0;border-radius:0;background:transparent;color:var(--muted);padding:11px 1px;font-size:13px;min-width:0;border-bottom:2px solid transparent}.page-tabs button[aria-selected=true]{color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}.set-status{font-size:12px;color:var(--muted);line-height:1.6;margin:13px 2px 18px}.photo-module{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px;margin-bottom:12px}.module-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 13px}.module-heading h2,.module-heading label{font-size:14px;font-weight:600;margin:0}.module-heading>span{font-size:11px;color:var(--muted)}.upload-button,.background-upload{display:flex;position:relative;align-items:center;justify-content:center;min-height:48px;padding:12px 8px;border:1px dashed var(--accent);background:var(--soft);border-radius:8px;font-size:14px;color:var(--accent);cursor:pointer}.upload-button input,.background-upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.upload-button:focus-within,.background-upload:focus-within{outline:3px solid var(--accent);outline-offset:3px}.hint{font-size:12px;line-height:1.75;color:var(--muted);margin:11px 0}.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.photos:empty{display:none}.photo-item{border-radius:7px;border:1px solid var(--line);overflow:hidden;min-width:0;background:var(--bg)}.photo-item img{width:100%;height:74px;display:block;object-fit:cover}.photo-actions{display:flex}.photo-actions button{flex:1;min-width:0;min-height:40px;padding:4px;font-size:12px;border:0;border-radius:0;background:transparent}.module{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}.module summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:16px;cursor:pointer;font-size:14px;font-weight:550}.module summary::-webkit-details-marker{display:none}.module summary small{font-size:11px;color:var(--muted);font-weight:400;display:inline-block;margin-left:5px}.module summary>span:last-child{font-size:20px;color:var(--accent)}.module[open] summary>span:last-child{transform:rotate(45deg)}.module-body{padding:3px 16px 17px}.share-settings .module-body{padding-top:17px}.fields{display:grid;gap:15px}.fields label,#slot-photo-label{display:block;font-size:14px}.fields input{display:block;margin-top:7px}.tracks-heading{margin-top:24px}.track-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}.track-number{font-size:12px;flex:0 0 20px;color:var(--muted)}.track-row input{min-width:0;font-size:14px!important}.track-row button{border:0;padding:6px 8px;background:transparent;font-size:19px;flex:0 0 36px}.text-button{border:0;background:transparent;color:var(--accent);font-size:13px;padding-left:0}.layout-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.layout-grid.share-layouts{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-card{padding:7px;font-size:12px;min-width:0;background:var(--surface)}.layout-card[aria-pressed=true]{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}.layout-card canvas{display:block;width:100%;height:72px;object-fit:contain;margin-bottom:7px}.layout-card>span{display:block;line-height:1.5}.layout-card small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.slot-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:2px}.slot-button{padding:6px;font-size:12px;min-width:0}.slot-button canvas{width:100%;height:74px;object-fit:contain;display:block;margin-bottom:5px}.segmented{display:flex;padding:4px;background:var(--bg);border-radius:8px;gap:4px;margin-bottom:13px}.segmented button{flex:1;border:0;font-size:13px;background:transparent}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px #0000000a}.background-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.background-card{font-size:12px;padding:7px;min-width:0}.background-card i{display:block;height:52px;border-radius:5px;border:1px solid #0001;margin-bottom:7px}.background-card[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}.background-actions{display:flex;gap:8px;margin-top:10px}.background-actions button{font-size:12px;flex:1}.overlay-label{display:block;font-size:13px;margin-top:17px}.overlay-label output{float:right}.export-info{text-align:center;padding:15px 0 10px}.export-info h2{font:500 19px var(--title);margin:8px 0 10px}.export-info p{font-size:11px;color:var(--muted);line-height:1.7}.export-info button{padding:6px}.export-dock{position:sticky;bottom:0;z-index:2;display:flex;gap:10px;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}.export-dock button{flex:1;padding:13px 7px;min-width:0;font-size:14px}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{filter:brightness(1.08)}.primary small{font-size:10px;opacity:.8;margin-left:5px}footer{text-align:center;color:var(--muted);font-size:11px;padding:20px 16px 26px}dialog{width:min(94vw,480px);max-height:92dvh;overflow:auto;border:1px solid var(--line);border-radius:15px;padding:20px;color:var(--ink);background:var(--surface)}dialog::backdrop{background:#1b221bbc;backdrop-filter:blur(3px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-header h2{font-size:18px;margin:0}.dialog-header button{font-size:25px;border:0;background:transparent;padding:0 10px}.crop-stage{margin:14px 0;background:var(--preview);display:flex;justify-content:center;overflow:hidden;border-radius:7px}#crop-canvas{max-width:100%;max-height:37dvh;object-fit:contain;touch-action:none;cursor:grab}.crop-sliders label{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;font-size:13px;margin-bottom:13px}.dialog-actions{display:flex;gap:10px;justify-content:space-between}#slot-photo-label select{margin-top:6px}.download-row{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:9px;padding:11px;margin-top:10px}.download-row img{width:70px;height:76px;object-fit:contain;background:var(--preview)}.download-row strong{display:block;font-size:14px}.download-row small{display:block;font-size:11px;color:var(--muted);margin:5px 0}.download-row a{color:var(--accent);font-size:13px;display:inline-block;padding:8px 0;margin-right:16px}#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;padding:13px 18px;background:#30362df2;color:white;font-size:13px;line-height:1.6;border-radius:9px;opacity:0;pointer-events:none;z-index:8;transition:opacity .2s}#toast.visible{opacity:1}
@media(min-width:640px){main{padding:0 28px}.welcome{padding:44px 0 30px}.welcome h1{font-size:42px}.style-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.style-art{aspect-ratio:1.25}.style-copy{padding:20px 18px}.style-copy p{font-size:13px}.style-copy h2{font-size:27px}#editor-screen{max-width:520px;margin:auto}.preview-stage canvas{max-height:450px}.editor-heading{padding-top:28px}.photo-item img{height:96px}.layout-card canvas{height:92px}.background-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.brand-bar{height:72px}}
@media(max-width:350px){main{padding:0 12px}.brand-bar{padding:0 14px}.privacy{font-size:10px}.page-tabs button{font-size:12px}.module summary small{display:block;margin:4px 0 0}.preview-caption{font-size:9px}.style-copy{padding:17px}.welcome h1{font-size:31px}.layout-card{font-size:11px}.export-dock button{font-size:13px}}
.photo-module summary{display:flex;list-style:none;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:550;min-height:30px}.photo-module summary::-webkit-details-marker{display:none}.photo-module summary #photo-count{margin-left:auto;font-size:11px;font-weight:400;color:var(--muted)}.photo-module summary>span:last-child{font-size:20px;color:var(--accent)}.photo-module[open] summary{margin-bottom:14px}.photo-module[open] summary>span:last-child{transform:rotate(45deg)}
@media(max-width:639px){.style-choice{display:grid;grid-template-columns:42% 1fr;min-height:208px}.style-art{aspect-ratio:auto;height:100%;min-height:208px}.style-art canvas{object-fit:contain}.edition-tag{top:12px;left:8px;font-size:7px;letter-spacing:.2px}.style-copy{padding:19px 14px}.style-copy h2{font-size:23px}.style-copy p{font-size:12px;line-height:1.8;margin:11px 0}.style-copy p br{display:none}.style-tags{font-size:10px;line-height:1.7;display:block}.choice-arrow{font-size:19px}.style-choices{gap:15px}.welcome{padding-top:28px}.entry-footer{margin:23px 0}}
/* 流程改动：照片库常显，手势仅占用预览的横向移动。 */
#preview{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
#import-screen{max-width:520px;margin:24px auto 0}#import-screen .welcome{padding-top:16px}
.photos{display:flex;overflow-x:auto;gap:10px;padding:0 0 10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.photo-item{flex:0 0 100px;scroll-snap-align:start}.photo-item img{height:82px}.photo-actions button{min-height:44px}
.adjustment-heading{padding:17px 16px 0}.slot-photo-library{display:flex;overflow-x:auto;gap:8px;padding:5px 1px 12px;margin-bottom:8px;max-width:100%}
.slot-library-photo{flex:0 0 72px;padding:5px;font-size:12px}.slot-library-photo img{width:60px;height:60px;object-fit:cover;display:block;margin-bottom:4px}
.slot-library-photo[aria-pressed=true]{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}
#new-album-dialog h2{font-size:19px;line-height:1.5}#new-album-dialog p{font-size:14px;margin:16px 0 24px}
@media(max-width:639px){.preview-stage canvas{max-height:34dvh}.preview-stage{min-height:180px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* UI 字体只来自统一 token；作品字体仅在 Canvas 渲染器使用。 */
button,input,select,summary,dialog{font-family:var(--ui-font)}
.palette-options,.text-layout-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.palette-option,.text-layout-option{min-width:0;padding:9px 5px;font-size:12px;line-height:1.5}
.palette-option[aria-pressed=true],.text-layout-option[aria-pressed=true]{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}
.palette-chips{display:flex;justify-content:center;gap:3px;margin:4px 0 9px}.palette-chips i{width:19px;height:23px;display:block;border-radius:3px;border:1px solid #0001}
.text-layout-option canvas{display:block;width:100%;height:84px;object-fit:contain;margin-bottom:7px}.text-layout-option small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.option-heading{margin-top:22px}.text-layout-options{margin-bottom:22px}#spine-options button{font-size:13px}#artwork-summary{font-size:10px}
.welcome h1{font-size:clamp(25px,4.3vw,34px);line-height:1.5;font-weight:550;letter-spacing:0}.style-copy h2{font-weight:600}

/* DISC home: one balanced group, independent of artwork typography. */
#style-screen:not([hidden]){min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;padding:20px 0 68px;gap:25px;box-sizing:border-box}
#style-screen .welcome{padding:0}#style-screen .eyebrow{margin-top:0}#style-screen .style-choices{flex-shrink:0}.brand{letter-spacing:2px;font-weight:650}
.palette-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.palette-option{padding:12px 8px}.palette-chips{gap:0;overflow:hidden;border-radius:5px;margin:0 0 9px}.palette-chips i{border:0;border-radius:0;width:25%;height:30px}.palette-chips i:first-child{width:40%}
@media(max-width:639px){#style-screen:not([hidden]){padding:24px 0 44px;gap:24px}.style-choice{grid-template-columns:56% 1fr;min-height:185px}.style-art{min-height:185px}.style-copy{padding:14px 10px}.style-copy h2{font-size:20px}.style-copy p{font-size:11px}.edition-tag{display:none}}

/* Actual exported image, displayed inside the current page instead of a blob popup. */
.download-row .export-preview-button{border:0;background:transparent;color:var(--accent);font-size:13px;padding:8px 0;min-height:44px;text-decoration:underline}
#export-preview-dialog{width:min(96vw,920px);padding:16px}#export-preview-dialog .dialog-header{margin-bottom:12px}.export-image-stage{display:flex;justify-content:center;background:repeating-conic-gradient(#efefec 0% 25%,#fafaf7 0% 50%) 0 0/20px 20px}.export-image-stage img{display:block;max-width:100%;max-height:70dvh;width:auto;height:auto;object-fit:contain}.export-preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-top:12px}.export-preview-footer a{color:var(--accent);padding:12px 8px}

.live-export-button{display:block;width:100%;margin:12px 0 0;min-height:46px}#live-status:empty{display:none}#live-video{display:block;max-height:62dvh;width:100%;margin:12px 0;background:#efefeb}#live-download{padding:13px 8px;color:var(--accent);font-size:14px}

/* Compact option rows: native horizontal scrolling on phones and desktop. */
.layout-grid,.palette-options,.text-layout-options,.background-grid,.slot-controls,.segmented{
  display:flex;flex-wrap:nowrap;gap:10px;max-width:100%;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scroll-padding-inline:4px;padding:4px 4px 10px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.layout-card,.palette-option,.text-layout-option,.background-card,.slot-button{
  flex:0 0 112px;scroll-snap-align:start;
}
.palette-option{flex-basis:124px;white-space:nowrap}
.background-card{flex-basis:120px;white-space:nowrap}
.slot-button{flex-basis:108px;white-space:nowrap}
.layout-card>span{white-space:nowrap}
.layout-grid.share-layouts .layout-card{flex-basis:148px}
.segmented{gap:6px;padding:4px}
.segmented button{flex:1 0 auto;min-width:80px;white-space:nowrap;scroll-snap-align:start}
.text-layout-options{margin-bottom:16px}
#artwork-settings .module-body>.hint{margin:0 0 8px}
.option-heading{margin-top:14px}