/* Each family owns its layout. Colors/decorations are MochiFrame originals. */
.design-settings{display:grid;gap:14px;margin:20px 0}.design-settings[hidden],.design-settings [hidden]{display:none!important}.design-settings label{display:grid;gap:6px;font-size:14px}.design-settings input,.design-settings textarea,.design-settings select{width:100%;min-width:0;font:inherit;border:1px solid #ddd0e9;border-radius:10px;padding:10px;background:#fff;color:#554060}.design-settings fieldset{min-width:0;border:1px solid #ddd0e9;border-radius:12px;padding:12px;display:grid;gap:12px}.frame-select{max-height:320px;overflow:auto}.preview{min-width:0}.preview>#effectPreview{width:100%}
.sx-story .sx-scene:before{content:'';position:absolute;inset:0 0 auto;height:120px;background:linear-gradient(#211a4266,transparent);z-index:1;pointer-events:none}
.mochi-showcase{--sx-accent:#b494d5;--sx-paper:#fffaf0;--sx-ink:#57403a;position:relative;width:100%;max-width:900px;margin:auto;color:var(--sx-ink);font:16px/1.5 "Apple SD Gothic Neo",system-ui,sans-serif;text-align:center;container-type:inline-size}
.mochi-showcase[data-theme=rose]{--sx-paper:#fff1f4;--sx-ink:#923f56}.mochi-showcase[data-theme=midnight]{--sx-paper:#292c50;--sx-ink:#fff0cb}
.mochi-showcase *{box-sizing:border-box}.mochi-showcase button{font:inherit;cursor:pointer}.mochi-showcase button:focus-visible,.mochi-showcase input:focus-visible{outline:3px solid #9873d3;outline-offset:3px}
.sx-scene{position:relative;overflow:hidden;isolation:isolate;background:var(--sx-paper);color:var(--sx-ink);border-radius:16px}
.sx-photo-button{display:block;padding:0;border:0;background:transparent;width:100%;position:relative;overflow:hidden;color:inherit}.sx-photo{display:block;width:100%;height:100%;object-fit:cover}.sx-hint{font-size:13px;line-height:1.6;color:#796781;margin:12px 4px}.sx-caption{white-space:pre-line;font-weight:750;overflow-wrap:anywhere}.sx-date{font-size:13px;opacity:.7}.sx-pager{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px}.sx-pager[hidden]{display:none}.sx-pager button{border:1px solid #b998a755;background:#fff9;color:var(--sx-ink);border-radius:50%;width:38px;height:38px;font-size:24px;line-height:1}.sx-pager button:disabled{opacity:.3;cursor:not-allowed}.sx-count{font-size:14px;white-space:nowrap}.sx-transition .sx-photo{animation:sx-reveal .3s ease}
.sx-story{max-width:405px}.sx-story .sx-scene{aspect-ratio:9/16;background:#181522;color:white}.sx-story .sx-photo{position:absolute;inset:0}.sx-progress{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:5px;z-index:3}.sx-progress-item{border:0;background:#ffffff55;padding:0;height:5px;flex:1;position:relative;border-radius:4px}.sx-progress-item:after{content:'';position:absolute;inset:-9px 0}.sx-progress-item span{display:block;height:100%;background:white;border-radius:4px}.sx-profile{position:absolute;left:14px;top:30px;display:flex;gap:8px;align-items:center;z-index:2;text-shadow:0 1px 4px black;font-size:14px}.sx-profile img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid white}.sx-profile small{opacity:.7}.sx-story-zones{position:absolute;inset:80px 0 58px;display:grid;grid-template-columns:1fr 1.5fr 1fr}.sx-story-zones button{border:0;background:transparent;color:transparent;font-size:30px}.sx-story-zones button:hover,.sx-story-zones button:focus-visible,.sx-story[data-paused=true] .sx-story-pause{color:white;text-shadow:0 2px 6px #000}.sx-like{position:absolute;right:15px;bottom:15px;border:0;background:#0003;color:white;border-radius:50%;width:42px;height:42px;font-size:28px!important}.sx-like[aria-pressed=true]{color:#ff718f}
.sx-camera{max-width:405px}.sx-camera .sx-scene{background:#050505;color:white;padding-bottom:18px;border-radius:0}.sx-camera-top{padding:12px;font-size:16px;letter-spacing:5px}.sx-camera .sx-photo-button{aspect-ratio:3/4}.sx-camera-grid{position:absolute;inset:0;background:linear-gradient(transparent 33%,#fff2 33%,#fff2 33.3%,transparent 33.3%,transparent 66%,#fff2 66%,#fff2 66.3%,transparent 66.3%),linear-gradient(90deg,transparent 33%,#fff2 33%,#fff2 33.3%,transparent 33.3%,transparent 66%,#fff2 66%,#fff2 66.3%,transparent 66.3%)}.sx-camera-grid:after{content:'+';color:#f4d645;font-size:36px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.sx-camera-modes{font-size:12px;padding:12px;color:#f3d94d}.sx-shutter{display:block;width:62px;height:62px;margin:auto;border-radius:50%;border:4px solid black;outline:3px solid white;background:white}.sx-raw .sx-camera-grid{display:none}.sx-camera.sx-raw .sx-photo{object-fit:contain}.sx-camera.sx-raw .sx-camera-top,.sx-camera.sx-raw .sx-camera-modes{visibility:hidden}.sx-flash:after{content:'';position:absolute;inset:0;background:white;pointer-events:none;animation:sx-flash .45s both}
.sx-hud .sx-photo-button{aspect-ratio:16/9;background:#171725}.sx-hud.sx-raw .sx-photo{object-fit:contain}.sx-hud span.sx-hud{position:absolute;inset:16px;color:white;border:2px solid #fff9;border-radius:16px;text-shadow:0 1px 3px #000;pointer-events:none;font-size:clamp(8px,2.1cqw,16px)}.sx-hud-top{position:absolute;top:12px;left:14px}.sx-rec{position:absolute;top:12px;right:14px}.sx-rec:first-letter{color:#ff5368}.sx-exposure{position:absolute;left:12px;top:28%;white-space:pre-line;font-size:clamp(8px,2cqw,15px);line-height:1.15}.sx-hud-bottom{position:absolute;bottom:12px;left:12px;right:12px;font-size:clamp(7px,1.8cqw,14px)}.sx-raw span.sx-hud{display:none}
.sx-polaroid{max-width:480px}.sx-polaroid .sx-scene{padding:44px 30px 36px;background:linear-gradient(145deg,var(--sx-paper),color-mix(in srgb,var(--sx-accent) 40%,var(--sx-paper)));border-radius:0}.sx-paper{position:relative;padding:16px 16px 28px;background:#fffdf5;box-shadow:5px 10px 0 #ffffff55,0 8px 18px #0002;transform:rotate(-2deg);color:#5a4654}.sx-paper:before{content:'';position:absolute;z-index:3;top:-13px;left:30%;width:40%;height:30px;background:color-mix(in srgb,var(--sx-accent) 60%,transparent);transform:rotate(3deg)}.sx-polaroid .sx-photo-button{aspect-ratio:4/5}.sx-polaroid .sx-caption{font-size:clamp(13px,4cqw,19px);padding:15px 0 8px}.sx-polaroid .sx-date{text-align:right}.sx-polaroid .sx-count{position:absolute;right:24px;top:24px;background:#0005;color:white;border-radius:14px;padding:2px 8px}.sx-polaroid[data-index="1"] .sx-paper{transform:rotate(2deg)}
.sx-diary{max-width:440px}.sx-diary .sx-scene{border:10px solid color-mix(in srgb,var(--sx-accent) 30%,#e5dad1);border-radius:0;padding:22px 22px 22px 38px;text-align:left;min-height:560px;background:repeating-linear-gradient(var(--sx-paper) 0 29px,#bca4a015 29px 30px)}.sx-diary .sx-scene:before{content:'';position:absolute;left:8px;top:24px;bottom:24px;width:16px;background:radial-gradient(circle,var(--sx-accent) 0 6px,transparent 7px) 0 0/16px 42px}.sx-diary-title{font-family:ui-rounded,system-ui,sans-serif;font-size:clamp(20px,8cqw,34px);font-weight:950;line-height:1.05;margin:4px 0 8px;overflow-wrap:anywhere}.sx-diary .sx-photo-button{aspect-ratio:1;margin-top:20px;border:8px solid #fff;box-shadow:0 5px 15px #0002}.sx-diary .sx-caption{font-size:clamp(13px,4cqw,18px);padding:8px 0 20px}.sx-diary-footer{display:block;text-align:right;font-weight:850;font-size:12px}
.sx-card3d{max-width:420px}.sx-card3d .sx-scene{padding:65px 42px;background:#f5f1f9;overflow:visible}.sx-card3d .sx-photo-button{aspect-ratio:5/7;border-radius:2px;box-shadow:0 18px 28px #30203933;transition:transform .12s;transform-style:preserve-3d;touch-action:pan-y}.sx-shine{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}
.sx-fourcut .sx-scene{padding:28px;background:linear-gradient(145deg,var(--sx-paper),color-mix(in srgb,var(--sx-accent) 35%,var(--sx-paper)));border-radius:0}.sx-four-title{margin:0 0 24px;font-size:clamp(22px,5cqw,40px);font-weight:900}.sx-four-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sx-four-photo{aspect-ratio:4/3;display:block;border:2px solid #fff9;border-radius:12px;overflow:hidden;padding:0;background:#ffffff33}.sx-four-photo img{width:100%;height:100%;object-fit:cover}.sx-fourcut .sx-caption{margin-top:20px}.sx-full{position:absolute;inset:0;z-index:8;background:#000e;border:0;padding:10px;display:grid;place-items:center;width:100%;height:100%}.sx-full img{width:100%;height:100%;object-fit:contain}
.sx-cd .sx-scene{padding:36px 26px;background:linear-gradient(120deg,color-mix(in srgb,var(--sx-accent) 75%,#4370a0),var(--sx-paper));display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;color:var(--sx-ink);border-radius:0}.sx-cd-cover{position:relative;z-index:2;aspect-ratio:1;background:#16151e;border:6px solid #9e9ab355;box-shadow:5px 5px 0 #0003}.sx-cd-cover>.sx-photo{width:100%;height:100%;object-fit:cover}.sx-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;background:#6e547bbd;border-radius:50%;width:64px;height:64px;color:white;font-size:28px!important;z-index:4}.sx-disc{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;border:7px solid #33313b;margin-left:-14%;box-shadow:0 8px 14px #0004;animation:sx-spin 12s linear infinite;animation-play-state:paused}.sx-disc img{width:100%;height:100%;object-fit:cover}.sx-disc:after{content:'';position:absolute;inset:44%;border-radius:50%;background:#393343;border:5px solid #ccc9d5;box-shadow:0 0 0 10px #ffffff77}.sx-spinning{animation-play-state:running}.sx-volume-label{grid-column:1/-1;display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px;font-size:14px}.sx-volume{width:150px;accent-color:#8050b8;padding:0}.sx-cd .sx-caption{grid-column:1/-1;margin-top:12px}.sx-youtube,.sx-cd-cover iframe{position:absolute;inset:0;min-height:200px;width:100%;height:100%;z-index:5;border:0}.sx-cd-cover:has(iframe){min-height:220px;min-width:200px}
@keyframes sx-spin{to{transform:rotate(360deg)}}@keyframes sx-flash{from{opacity:.9}to{opacity:0}}@keyframes sx-reveal{from{opacity:.5;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@container(max-width:400px){.sx-cd .sx-scene{padding:20px 12px}.sx-play{width:44px;height:44px;font-size:20px!important}.sx-fourcut .sx-scene{padding:18px}.sx-four-grid{gap:8px}.sx-hud span.sx-hud{inset:8px}.sx-card3d .sx-scene{padding:38px 28px}}
.demo-card .mochi-showcase{max-width:100%}.demo-card .sx-diary-title{font-size:24px}.demo-card .sx-diary .sx-scene{min-height:0}.demo-card .sx-hint{font-size:12px}.demo-card .sx-cd-cover:has(iframe){min-width:200px}.demo-card:has(.sx-cd-cover iframe){min-width:240px}
@media(prefers-reduced-motion:reduce){.mochi-showcase *{animation:none!important;transition:none!important}.sx-card3d .sx-photo-button{transform:none!important}}
@container(max-width:440px){.sx-cd .sx-scene:has(iframe){grid-template-columns:minmax(0,1fr)}.sx-cd-cover:has(iframe){width:100%;aspect-ratio:16/9}.sx-cd .sx-scene:has(iframe) .sx-disc{width:55%;margin:12px auto 0}}