/* YOXOLO Moment Magic 1.5.8: always-reachable actions above templates and a larger preview. */
.yx-spark-v2 .yx-magic-service-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch;padding:0;border:0;border-radius:0;background:transparent}
.yx-spark-v2 .yx-magic-service-nav button{appearance:none;border:1px solid #c4d3f1;border-radius:10px;min-width:0;min-height:46px;background:#e7efff;color:#304a85;padding:7px 6px;font:900 13px/1.45 system-ui,Tahoma,sans-serif;cursor:pointer;box-shadow:0 2px 5px #1d37670d;transition:background .2s,color .2s,transform .2s}
.yx-spark-v2 .yx-magic-service-nav button:hover{transform:translateY(-2px);border-color:#bacaf5}
.yx-spark-v2 .yx-magic-service-nav button[aria-pressed="true"]{background:linear-gradient(120deg,#1c3f9b,#6475e8);color:white;box-shadow:0 6px 14px #304b9b52}
.yx-spark-v2 .yx-spark-v2-mini{appearance:none;cursor:pointer;text-align:start;font-family:inherit}
.yx-spark-v2 .yx-spark-v2-mini>small{color:#fff;font-size:11px;letter-spacing:0;text-align:center}
.yx-spark-v2 .yx-spark-v2-mini>strong{font-size:clamp(35px,4vw,56px)}
.yx-spark-v2 .yx-magic-service-panel{display:none}
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-magic-service-panel{display:none}
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="surprise"] .yx-magic-service-panel[data-magic-panel="surprise"],
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="memories"] .yx-magic-service-panel[data-magic-panel="memories"],
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="letter"] .yx-magic-service-panel[data-magic-panel="letter"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:24px;align-items:start;min-width:0;width:100%;margin-top:8px}
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="surprise"],
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="memories"],
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="letter"]{display:flex;flex-direction:column;align-items:stretch}
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-workspace-tabs,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-v2-form,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-v2-preview-head,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-v2-stage,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-v2-downloads,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-social-export,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-brand-workspace,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-v2-note,
.yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service]:not([data-magic-active-service="spark"]) .yx-spark-v2-status{display:none!important}
@media(min-width:1040px){
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"][data-spark-active-tab="design"]{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-magic-service-nav{grid-column:1/-1;grid-row:1}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-workspace-tabs{grid-column:1/-1;grid-row:2}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-form{grid-row:3/6}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-preview-head{grid-row:3}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-stage{grid-row:4}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-downloads{grid-row:5}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-status{grid-row:6}
}
.yx-spark-v2 .yx-magic-controls{min-width:0;container-type:inline-size}
.yx-spark-v2 .yx-magic-fields-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:7px 12px;align-items:start}
.yx-spark-v2 .yx-magic-form-field{min-width:0}
.yx-spark-v2 .yx-magic-form-field label{margin:6px 0 5px}
.yx-spark-v2 .yx-magic-form-field textarea{height:74px;min-height:74px;max-height:185px}
.yx-spark-v2 .yx-magic-form-field .yx-magic-file{padding:8px;min-height:44px}
.yx-spark-v2 .yx-magic-photo-list:empty{display:none}
.yx-spark-v2 .yx-magic-memory-extra{margin-top:5px}
.yx-spark-v2 .yx-magic-memory-options{margin-top:0}
@container (min-width:500px){
 .yx-spark-v2 .yx-magic-fields-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
 .yx-spark-v2 .yx-magic-field-sender{grid-column:1/-1;max-width:calc(50% - 6px)}
 .yx-spark-v2 .yx-magic-memory-extra{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
}
.yx-spark-v2 .yx-magic-kicker{display:inline-block;border:1px solid #c5d5ff;background:#eaf0ff;border-radius:99px;color:#365fc5;padding:5px 11px;font:900 10px system-ui,sans-serif;letter-spacing:.1em}
.yx-spark-v2 .yx-magic-controls h3{margin:12px 0 7px;font-size:clamp(23px,2.05vw,31px);line-height:1.4;color:#142b5b;font-weight:900}
.yx-spark-v2 .yx-magic-description{margin:0 0 10px;color:#66779b;font-size:13px;line-height:1.75}
.yx-spark-v2 .yx-magic-controls label{display:block;font-size:13px;font-weight:850;color:#1f3566;margin:9px 0 5px}
.yx-spark-v2 .yx-magic-controls input[type="text"],.yx-spark-v2 .yx-magic-controls textarea,.yx-spark-v2 .yx-magic-controls select{display:block;width:100%;min-width:0;border:1px solid #ccd9f2;border-radius:11px;background:#fff;color:#1d315e;padding:11px 12px;font:600 14px/1.6 system-ui,Tahoma,sans-serif;outline:0;box-shadow:none}
.yx-spark-v2 .yx-magic-controls input[type="text"],.yx-spark-v2 .yx-magic-controls select{height:46px}
.yx-spark-v2 .yx-magic-controls textarea{min-height:74px;max-height:200px;resize:vertical}
.yx-spark-v2 .yx-magic-controls input:focus,.yx-spark-v2 .yx-magic-controls textarea:focus,.yx-spark-v2 .yx-magic-controls select:focus{border-color:#5877f0;box-shadow:0 0 0 3px #647bf522}
.yx-spark-v2 .yx-magic-controls .yx-magic-file{display:block;width:100%;min-width:0;color:#42557e;font-size:12px;border:1px dashed #b5c6e9;border-radius:11px;background:#f0f4ff;padding:10px;cursor:pointer}
.yx-spark-v2 .yx-magic-file::file-selector-button{border:0;border-radius:9px;background:#d7e1fa;color:#264c9f;font-size:12px;font-weight:850;padding:8px 11px;margin-inline-end:9px;cursor:pointer}
.yx-spark-v2 .yx-magic-file-hint{display:block;margin-top:5px;color:#7a8baa;font-size:11px;line-height:1.5}
.yx-spark-v2 .yx-magic-photo-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.yx-spark-v2 .yx-magic-photo-chip{position:relative;display:flex;flex-direction:column;gap:4px;border:1px solid #c8d5ed;border-radius:11px;padding:5px;background:#f6f8fe;min-width:66px;box-shadow:0 3px 9px #16346912}
.yx-spark-v2 .yx-magic-photo-list img{display:block;width:60px;height:60px;object-fit:cover;border-radius:7px;border:2px solid #fff;box-shadow:0 1px 7px #16346935}
.yx-spark-v2 .yx-magic-photo-order{position:absolute;top:8px;inset-inline-start:8px;background:#244ca9;color:#fff;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;font:900 11px system-ui,sans-serif}
.yx-spark-v2 .yx-magic-photo-tools{display:flex;justify-content:center;gap:3px}
.yx-spark-v2 .yx-magic-photo-tools button{appearance:none;display:grid;place-items:center;border:1px solid #c7d5f0;border-radius:6px;width:22px;height:23px;cursor:pointer;color:#244da4;background:#fff;font:700 12px system-ui,sans-serif}
.yx-spark-v2 .yx-magic-photo-tools button:last-child{color:#b9234d}
.yx-spark-v2 .yx-magic-photo-tools button:disabled{opacity:.3;cursor:default}
.yx-spark-v2 .yx-magic-memory-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:5px}
.yx-spark-v2 .yx-magic-memory-options label{margin-top:9px}
.yx-spark-v2 .yx-magic-template-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 6px;color:#5e739c}
.yx-spark-v2 .yx-magic-template-toolbar>small{font-size:12px;line-height:1.5}
.yx-spark-v2 .yx-magic-template-toolbar>div{display:flex;gap:5px;flex-shrink:0}
.yx-spark-v2 .yx-magic-template-toolbar button{appearance:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid #c1d2ee;border-radius:10px;background:#f3f6ff;color:#2e57ac;cursor:pointer;font:900 23px/1 system-ui,sans-serif}
.yx-spark-v2 .yx-magic-template-toolbar button:hover{background:#e0eaff}
.yx-spark-v2 .yx-magic-template-gallery{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;padding:7px 4px 13px;margin:0 0 10px;scrollbar-width:thin;scrollbar-color:#8ea8de #e4ebf7}
.yx-spark-v2 .yx-magic-template-choice{appearance:none;display:flex;flex:0 0 clamp(98px,8vw,112px);scroll-snap-align:center;flex-direction:column;align-items:stretch;gap:6px;min-width:0;padding:5px 5px 8px;background:#fff;border:2px solid #d0dcef;border-radius:13px;cursor:pointer;box-shadow:0 4px 10px #1c3e8312;transition:transform .2s,border-color .2s,box-shadow .2s;text-align:center}
.yx-spark-v2 .yx-magic-template-choice canvas{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:8px;background:#e3eaf7;box-shadow:0 2px 9px #0b1a3430}
.yx-spark-v2 .yx-magic-template-choice span{display:block;color:#304c82;font:850 11px/1.4 system-ui,Tahoma,sans-serif;min-height:30px;align-content:center}
.yx-spark-v2 .yx-magic-template-choice:hover{transform:translateY(-3px);border-color:#8aa1e9}
.yx-spark-v2 .yx-magic-template-choice[aria-pressed="true"]{border-color:#5271ee;box-shadow:0 0 0 3px #5271ee21,0 8px 17px #2446a433}
.yx-spark-v2 .yx-magic-template-choice:focus-visible{outline:3px solid #5271ee;outline-offset:3px}
.yx-spark-v2 .yx-magic-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.yx-spark-v2 .yx-magic-actions button{appearance:none;min-width:0;min-height:46px;padding:10px;border:1px solid #c1d0f0;border-radius:10px;background:#fff;color:#2c4fa2;font:850 12px/1.5 system-ui,Tahoma,sans-serif;cursor:pointer}
.yx-spark-v2 .yx-magic-actions .yx-magic-action-play{grid-column:1/-1;color:#fff;border:0;background:linear-gradient(115deg,#3255bc,#647cf1);box-shadow:0 7px 20px #2445a43d}
.yx-spark-v2 .yx-magic-actions button:disabled{opacity:.6;cursor:wait}
.yx-spark-v2 .yx-magic-message-status{margin:5px 0 0;color:#2d57a7;font-size:12px;font-weight:800;line-height:1.5;min-height:17px}
@container (min-width:500px){
 .yx-spark-v2 .yx-magic-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .yx-spark-v2 .yx-magic-actions .yx-magic-action-play{grid-column:auto}
}
.yx-spark-v2 .yx-magic-preview-wrap{min-width:0;border:1px solid #c4d3f0;border-radius:17px;background:radial-gradient(ellipse at center,#edf4ff,#dce6f8);padding:9px;align-self:stretch;display:flex;flex-direction:column;gap:7px}
.yx-spark-v2 .yx-magic-preview-top{display:flex;justify-content:space-between;gap:7px;align-items:center;color:#294676;font:800 11px/1.4 system-ui,sans-serif}
.yx-spark-v2 .yx-magic-preview-top span:last-child{background:#fff;border:1px solid #d7e2f4;border-radius:7px;padding:5px 7px;color:#5672ac}
.yx-spark-v2 .yx-magic-stage{display:grid;place-items:center;flex:1;min-height:455px;overflow:hidden}
.yx-spark-v2 .yx-magic-stage canvas{display:block;max-width:100%;width:auto;height:auto;max-height:650px;aspect-ratio:9/16;border-radius:12px;box-shadow:0 14px 34px #0717396a}
.yx-spark-v2 .yx-magic-preview-bottom{font-size:10px;line-height:1.55;text-align:center;color:#627bad}
.yx-spark-v2 .yx-magic-panel-surprise .yx-magic-preview-wrap{background:radial-gradient(ellipse at center,#f7e9ff,#e4ddf6)}
.yx-spark-v2 .yx-magic-panel-memories .yx-magic-preview-wrap{background:radial-gradient(ellipse at center,#eaf4fc,#e2eaf5)}
.yx-spark-v2 .yx-magic-panel-letter .yx-magic-preview-wrap{background:radial-gradient(ellipse at center,#fff3ee,#f3e2e0)}
@media(max-width:1100px){
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="surprise"] .yx-magic-service-panel,
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="memories"] .yx-magic-service-panel,
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="letter"] .yx-magic-service-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
 .yx-spark-v2 .yx-magic-stage{min-height:350px}
}
@media(max-width:720px){
 .yx-spark-v2 .yx-magic-service-nav{gap:6px;padding:0;grid-template-columns:repeat(2,minmax(0,1fr))}
 .yx-spark-v2 .yx-magic-service-nav button{min-height:44px;font-size:12px;padding:7px 4px}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="surprise"] .yx-magic-service-panel,
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="memories"] .yx-magic-service-panel,
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="letter"] .yx-magic-service-panel{grid-template-columns:1fr;gap:22px}
 .yx-spark-v2 .yx-magic-stage{min-height:250px}
 .yx-spark-v2 .yx-magic-stage canvas{max-height:490px}
 .yx-spark-v2 .yx-magic-memory-options{grid-template-columns:1fr}
 .yx-spark-v2 .yx-magic-controls h3{font-size:24px}
 .yx-spark-v2 .yx-spark-v2-gallery{gap:8px;padding-inline:3px}
 .yx-spark-v2 .yx-spark-v2-mini{padding:9px}
 .yx-spark-v2 .yx-spark-v2-mini>strong{font-size:33px}
 .yx-spark-v2 .yx-spark-v2-mini>small{font-size:9px}
}
@media(max-width:420px){.yx-spark-v2 .yx-magic-template-gallery{gap:8px}.yx-spark-v2 .yx-magic-template-choice{flex-basis:112px;padding:5px 5px 8px}.yx-spark-v2 .yx-magic-template-choice span{font-size:11px}.yx-spark-v2 .yx-magic-template-toolbar>small{font-size:11px}}
/* Keep the complete design visible while visitors browse nine templates. */
@media(min-width:1040px){
 .yx-spark-v2 .yx-magic-service-panel>.yx-magic-preview-wrap{position:sticky;top:12px;align-self:start}
 .yx-spark-v2 .yx-magic-stage{min-height:0}
 .yx-spark-v2 .yx-magic-stage canvas{max-height:min(72vh,680px)}
}
/* Let the creative workspace own most of the desktop width, without tiny controls. */
@media(min-width:1200px){
 .yx-spark-v2 .yx-spark-v2-shell{width:min(1660px,calc(100% - 36px));max-width:1660px;grid-template-columns:minmax(235px,.48fr) minmax(0,2.32fr);gap:20px}
 .yx-spark-v2 .yx-spark-v2-studio{min-width:0}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"]{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
 .yx-spark-v2 .yx-magic-service-panel{min-width:0}
 .yx-spark-v2 .yx-magic-controls{min-width:0}
}
/* Short displays use moderate spacing; controls remain usable and readable. */
@media(min-width:1200px) and (max-height:900px){
 .yx-spark-v2{padding-block:24px 32px;min-height:0}
 .yx-spark-v2 .yx-spark-v2-story{padding-top:8px}
 .yx-spark-v2 .yx-spark-v2-story h2{font-size:clamp(31px,2.45vw,45px);margin:9px 0 12px;line-height:1.3}
 .yx-spark-v2 .yx-spark-v2-story>p{font-size:13px;line-height:1.75}
 .yx-spark-v2 .yx-spark-v2-gallery{margin-top:15px}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"]{padding:18px;gap:11px 16px}
 .yx-spark-v2 .yx-magic-service-nav button{min-height:48px;padding:8px 7px;font-size:12px}
 .yx-spark-v2 .yx-spark-workspace-tabs{gap:6px;padding:5px}
 .yx-spark-v2 .yx-spark-workspace-tabs button{min-height:42px;font-size:13px}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-form{gap:10px}
 .yx-spark-v2 .yx-spark-v2-mode-row button{min-height:41px;font-size:12px;padding:8px 6px}
 .yx-spark-v2 .yx-spark-v2-field input{min-height:42px;height:42px;padding:8px 11px;font-size:14px}
 .yx-spark-v2 .yx-spark-v2-field label,.yx-spark-v2 .yx-spark-v2-field-title,.yx-spark-v2 .yx-spark-v2-modes legend{font-size:13px;margin-bottom:5px}
 .yx-spark-v2 .yx-spark-v2-colors{min-height:32px;gap:7px}
 .yx-spark-v2 .yx-spark-v2-colors button{width:31px;height:31px}
 .yx-spark-v2 .yx-spark-v2-file{padding:9px;gap:6px}
 .yx-spark-v2 .yx-spark-v2-buttons button{min-height:42px;padding:8px 11px}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-stage{max-height:460px;padding:12px}
 .yx-spark-v2 .yx-spark-v2-studio[data-magic-active-service="spark"] .yx-spark-v2-stage canvas{max-height:435px}
 .yx-spark-v2 .yx-spark-v2-downloads button,.yx-spark-v2 .yx-spark-v2-downloads a{min-height:42px;padding:8px 10px;font-size:12px}
 .yx-spark-v2 .yx-spark-v2-note{font-size:11px}
}
/* The studio now starts close to the section boundaries; no oversized top/bottom gutters. */
@media(min-width:1040px){
 .yx-spark-v2{padding-block:14px 18px}
 .yx-spark-v2 .yx-spark-v2-story{padding-top:0}
 .yx-spark-v2 .yx-spark-v2-studio{padding:15px}
}
@media(max-width:1039px){
 .yx-spark-v2{padding-block:18px 24px}
}
@media(max-width:720px){
 .yx-spark-v2 .yx-spark-v2-shell{gap:19px}
 .yx-spark-v2 .yx-spark-v2-story h2{font-size:clamp(27px,7vw,39px);margin:9px 0;line-height:1.3}
 .yx-spark-v2 .yx-spark-v2-story>p{font-size:13px;line-height:1.7}
 .yx-spark-v2 .yx-spark-v2-benefits{margin-top:11px;gap:5px}
 .yx-spark-v2 .yx-spark-v2-benefits>span{padding:5px 7px}
 .yx-spark-v2 .yx-spark-brand-promo{margin-top:12px}
 .yx-spark-v2 .yx-spark-v2-daily{margin-top:12px;padding:9px}
 .yx-spark-v2 .yx-spark-v2-streak{margin-top:7px}
 .yx-spark-v2 .yx-spark-v2-gallery{margin-top:15px}
 .yx-spark-v2 .yx-magic-controls label{margin-top:8px}
 .yx-spark-v2 .yx-magic-controls textarea{min-height:74px}
}
@media(prefers-reduced-motion:reduce){.yx-spark-v2 .yx-magic-service-nav button,.yx-spark-v2 .yx-magic-template-choice{transition:none}}