:root{--bg: #F4F1EA;--fg: #5c4a3b;--muted: #A48D78;--accent: #A48D78;--accent-2: #CBB9A4;--btn-secondary: #CBB9A4;--font: "Noto Sans TC", system-ui, sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden}#app{display:flex;flex-direction:column}.site-bar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:calc(.35rem + env(safe-area-inset-top)) .9rem .35rem;background:#ede6da;border-bottom:1px solid var(--accent-2);z-index:20}.site-brand{color:var(--fg);text-decoration:none;font-weight:600;font-size:.98rem;letter-spacing:.01em}.site-ig{color:var(--fg);display:grid;place-items:center;width:2rem;height:2rem}.site-ig svg{width:1.35rem;height:1.35rem;display:block}.site-brand:hover,.site-ig:hover{color:#3f3228}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.page-col{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;background:var(--bg);overflow:hidden}.kiosk{flex:1;min-height:0;display:grid;grid-template-rows:auto 1fr auto}.cover-panel{position:relative;width:100%;max-height:calc(100% - 4.5rem);overflow:hidden;flex:0 1 auto;display:flex;flex-direction:column;min-height:0}.cover-panel .kiosk-title{flex:0 0 auto}.cover-panel .picker-scroller,.cover-panel .filter-grid{flex:1 1 auto;min-height:0;height:auto}.kiosk-title{text-align:center;font-size:clamp(1.2rem,4vw,1.75rem);font-weight:600;margin:0;padding:.45rem .75rem .25rem}.kiosk-foot{display:flex;justify-content:center;align-items:center;gap:clamp(1rem,6vw,3rem);padding:.55rem .75rem calc(.75rem + env(safe-area-inset-bottom))}.btn{min-width:9.5rem;min-height:3.4rem;padding:.85rem 1.6rem;font-size:1.15rem;font-weight:600;border-radius:4px}.btn-primary{background:var(--accent);color:#fff}.btn-secondary{background:var(--btn-secondary);color:var(--fg)}.btn:disabled{opacity:.45}.idle{flex:1;min-height:0;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;background:var(--bg);position:relative;overflow:hidden}.idle-cover{width:100%;height:auto;max-height:calc(100% - 3.2rem);object-fit:contain;object-position:top center;background:var(--bg);flex:0 1 auto}.idle-hint{flex:0 0 auto;margin:.35rem .75rem .85rem;text-align:center;font-size:2.1rem;font-weight:600;color:var(--fg);pointer-events:none;text-shadow:0 0 10px #fff,0 0 18px #fff,0 1px 0 #fff}@media(max-width:560px){.idle-hint{font-size:1.05rem;margin-top:.2rem}}.picker-scroller{display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:stretch;justify-content:center;padding:.25rem .75rem .35rem;height:100%;min-height:0}.picker-scroller::-webkit-scrollbar{display:none}.frame-slot{flex:1 1 0;scroll-snap-align:center;width:auto;max-width:min(48%,300px);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;min-width:0}.frame-preview{width:100%;max-width:100%;flex:1 1 auto;min-height:0;border:0 solid var(--accent);background:transparent;display:flex;align-items:center;justify-content:center}.frame-slot.selected .frame-preview{border-width:4px;border-color:var(--accent)}.frame-preview.landscape,.frame-preview.strip{width:100%;height:auto;max-height:100%;aspect-ratio:unset}.frame-preview.landscape{aspect-ratio:6 / 4;max-height:100%}.frame-preview.strip{aspect-ratio:2 / 6;width:auto;height:min(100%,100%);max-width:100%}.frame-sample{width:100%;height:100%;object-fit:contain;display:block;background:transparent}.preview-slots{width:100%;height:100%;display:grid;gap:4%;padding:6%}.preview-slots.one{grid-template-rows:1fr}.preview-slots.three{grid-template-rows:1fr 1fr 1fr}.preview-hole{background:#ede6da;border:1px dashed rgba(164,141,120,.55)}.filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;padding:.25rem 1rem .5rem;overflow:hidden;align-content:center;justify-content:center;min-height:0;width:100%;max-width:none;margin:0}@media(min-width:720px){.filter-grid{grid-template-columns:repeat(2,minmax(0,12rem));max-width:none}}.filter-card{display:flex;flex-direction:column;align-items:stretch;border-radius:16px;border:2px solid var(--accent-2);background:#fff;overflow:hidden;min-height:0;height:100%;max-height:100%}.filter-card.selected{border-width:4px;border-color:var(--accent)}.filter-swatch{flex:1 1 auto;min-height:4.5rem;height:auto;background-size:cover;background-position:center}.filter-name{padding:.55rem .4rem;font-size:1.15rem;text-align:center}.capture{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:var(--bg);overflow:hidden;position:relative}.capture-stage{position:relative;width:min(100%,calc((100dvh - 9rem) * var(--slot-ar, 1.333)));max-width:100%;max-height:calc(100% - 4.5rem);aspect-ratio:var(--slot-ar, 1.333);height:auto;margin:0 auto;background:#2a2420;overflow:hidden;flex:0 1 auto;container-type:size}.capture-stage video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.capture-guide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.capture-progress{position:absolute;top:.55rem;left:0;right:0;text-align:center;font-size:1.1rem;z-index:2;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45);margin:0}.capture-actions{flex:0 0 auto;display:flex;justify-content:center;gap:1.25rem;padding:.65rem .75rem calc(.75rem + env(safe-area-inset-bottom));z-index:2}.capture .error{flex:0 0 auto;margin:0;padding:.25rem .5rem}.capture-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;z-index:4;pointer-events:none;animation:shutter-flash .18s ease-out forwards}@keyframes shutter-flash{0%{opacity:1}to{opacity:0}}.processing-overlay .processing-msg{margin:0;font-size:clamp(1.35rem,6vw,2rem);font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;background:#00000047;z-index:3}.countdown-num{font-size:clamp(2.4rem,14vw,5rem);font-size:clamp(2.4rem,45cqh,5rem);font-weight:700;line-height:1;color:#fff;margin:0}.countdown-sub{position:static;font-size:clamp(.9rem,3.2vw,1.25rem);font-size:clamp(.9rem,10cqh,1.25rem);color:#fff;margin:0}.result-body{overflow-y:auto;padding:0 1.1rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;min-height:0}.result-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem;width:100%;max-width:920px}.result-media{flex:1 1 auto;min-width:0;display:grid;justify-items:center;gap:.45rem}.result-media img,.result-media video{max-height:min(52dvh,520px);max-width:100%;width:auto;object-fit:contain;background:var(--bg)}.tabs{display:flex;gap:.5rem}.tab{padding:.4rem .9rem;border-radius:999px;background:var(--accent-2);color:var(--fg);font-size:.95rem}.tab.on{background:var(--accent);color:#fff}.wa-box{flex:0 0 auto;display:grid;justify-items:center;gap:.45rem;padding:.5rem}.wa-box img{width:min(148px,28vw);height:min(148px,28vw);background:#fff;padding:8px;border-radius:8px}@media(max-width:560px){.result-row{flex-direction:column}.result-media img,.result-media video{max-height:38dvh}.picker-scroller{gap:.45rem;padding:.15rem .4rem;overflow-x:hidden}.frame-slot{max-width:48%;flex:1 1 48%}.frame-preview.landscape{max-height:100%;height:auto;width:100%}.frame-preview.strip{height:100%;width:auto;max-width:100%}.filter-grid{align-content:stretch;padding:.2rem .75rem;gap:.65rem}.btn{min-width:7.2rem;min-height:2.85rem;padding:.65rem 1rem;font-size:1rem}}.muted{color:var(--muted);font-size:.9rem;text-align:center}.error{color:#9a4a3a;text-align:center;padding:.5rem}