:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:var(--page);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--page: #0b1324;--page-end: #0f172a;--surface: rgba(17, 28, 49, .84);--surface-strong: rgba(22, 35, 60, .94);--surface-raised: #1b2a45;--text: #f8fafc;--muted: #cbd5e1;--primary: #fbbf24;--primary-strong: #d97706;--primary-soft: #fde68a;--brand: #fbbf24;--theme-icon: #fbbf24;--border: #334155;--ghost: rgba(251, 191, 36, .18);--selection-halo: rgba(251, 191, 36, .38);--shadow: 0 22px 58px rgba(0, 0, 0, .34);--button-text: #0f172a;--button-bg: linear-gradient( 135deg, #fde68a, #f59e0b );--button-shadow: 0 14px 30px rgba(245, 158, 11, .22)}:root[data-theme=light]{--page: #fffdf9;--page-end: #f6f1e7;--surface: rgba(255, 253, 248, .92);--surface-strong: #fffdf8;--surface-raised: #fff6e5;--text: #0f172a;--muted: #475569;--primary: #d97706;--primary-strong: #b45309;--primary-soft: #f7d994;--brand: #d97706;--theme-icon: #0f172a;--border: #d8cab1;--ghost: rgba(217, 119, 6, .18);--selection-halo: rgba(217, 119, 6, .3);--shadow: 0 18px 42px rgba(30, 41, 59, .12);--button-text: #0f172a;--button-bg: linear-gradient(135deg, #fde68a, #f59e0b);--button-shadow: 0 14px 30px rgba(245, 158, 11, .22)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{margin:0;min-width:320px;background:var(--page)}button{font:inherit}.app-shell{width:100%;height:100dvh;min-height:560px;overflow:hidden;color:var(--text);background:radial-gradient(circle at top left,rgba(251,191,36,.16),transparent 28%),radial-gradient(circle at bottom right,rgba(30,58,95,.16),transparent 24%),linear-gradient(180deg,var(--page),var(--page-end));display:grid;grid-template-rows:auto minmax(0,1fr)}:root[data-theme=light] .app-shell{background:radial-gradient(circle at top left,rgba(251,191,36,.1),transparent 30%),radial-gradient(circle at bottom right,rgba(30,58,95,.04),transparent 18%),linear-gradient(180deg,var(--page),var(--page-end))}.topbar{height:60px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb,var(--page) 84%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:20}.brand-line{min-width:0;white-space:nowrap;overflow:hidden}.brand-name{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--brand);font-size:1.24rem;line-height:1;font-weight:950;letter-spacing:.08em}.theme-button,.save-button,.template-option{border:0;cursor:pointer}.theme-button{width:42px;height:42px;min-width:42px;border-radius:8px;display:grid;place-items:center;color:var(--theme-icon);background:var(--surface-strong);box-shadow:inset 0 0 0 1px var(--border)}.theme-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9}.theme-icon-moon{display:none}:root[data-theme=light] .theme-icon-sun{display:none}:root[data-theme=light] .theme-icon-moon{display:block}.workspace{width:min(100%,460px);height:100%;min-height:0;margin:0 auto;padding:12px 10px max(10px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;overflow:hidden}.preview-area{display:grid;place-items:center;min-height:0}.preview-frame{width:min(100%,410px);aspect-ratio:16 / 9;border-radius:8px;overflow:hidden;position:relative;background:var(--surface-strong);box-shadow:var(--shadow);outline:1px solid var(--border)}.preview-image{width:100%;height:100%;object-fit:cover;display:block}.preview-overlay{position:absolute;inset:auto 0 0;display:flex;align-items:end;min-height:46%;padding:34px 14px 13px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.76));color:#fff}.preview-title,.panel-kicker,.panel-count,.save-message{margin:0}.preview-title{font-size:1.18rem;line-height:1;text-transform:uppercase;font-style:italic;font-weight:950;overflow-wrap:anywhere}.control-panel{min-height:0;border-radius:8px;background:var(--surface);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:inset 0 0 0 1px var(--border),var(--shadow);padding:12px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-kicker{color:var(--text);text-transform:uppercase;font-size:.9rem;font-weight:900;letter-spacing:.08em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-meta{display:flex;align-items:center;flex:0 0 auto;gap:8px;min-width:0;white-space:nowrap}.panel-count{color:var(--primary);font-size:1rem;font-weight:900;text-transform:uppercase}.swipe-hint{margin:0;color:var(--muted);font-size:.74rem;font-weight:900;text-transform:uppercase}.template-strip{min-height:0;display:grid;grid-auto-columns:94px;grid-auto-flow:column;grid-template-rows:repeat(2,max-content);align-content:start;gap:14px;overflow-x:auto;overflow-y:hidden;padding:12px 2px 9px;scroll-snap-type:x mandatory;scrollbar-width:none}.template-strip::-webkit-scrollbar{display:none}.template-scrollbar{display:none}.template-option{width:94px;flex:0 0 94px;padding:0;background:transparent;color:var(--muted);display:grid;gap:9px;align-content:start;justify-items:center;scroll-snap-align:start}.template-option:focus-visible,.theme-button:focus-visible,.save-button:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.thumb-wrap{width:84px;height:84px;border-radius:8px;overflow:hidden;display:block;background:var(--surface-strong);box-shadow:inset 0 0 0 1px var(--border);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.thumb-image{width:100%;height:100%;object-fit:cover;display:block;opacity:.66;transition:opacity .16s ease}.template-option:hover .thumb-image,.template-option.is-selected .thumb-image{opacity:1}.template-option.is-selected{color:var(--primary)}.template-option.is-selected .thumb-wrap{box-shadow:inset 0 0 0 4px var(--primary),0 0 0 6px var(--selection-halo),0 8px 22px #0000003d}.template-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;text-transform:uppercase;font-size:.76rem;font-weight:900}.save-area{position:fixed;left:10px;right:10px;bottom:max(6px,env(safe-area-inset-bottom));z-index:30;display:grid;gap:7px;pointer-events:none}.save-message{justify-self:center;border-radius:8px;color:var(--muted);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);padding:7px 10px;font-size:.78rem;font-weight:800}.save-button{width:min(100%,420px);justify-self:center;min-height:60px;border-radius:8px;color:var(--button-text);background:var(--button-bg);box-shadow:var(--button-shadow);text-transform:uppercase;font-size:.92rem;font-weight:950;letter-spacing:.14em;pointer-events:auto;transition:transform .16s ease,opacity .16s ease}.save-button:not(:disabled):active{transform:translateY(1px) scale(.99)}.save-button:disabled{cursor:not-allowed;opacity:.52}@media(max-height:640px){.app-shell{min-height:520px}.topbar{height:54px;padding-block:7px}.workspace{gap:8px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.preview-frame{width:min(100%,360px)}.control-panel{padding:10px;gap:8px}.thumb-wrap{width:72px;height:72px}.template-option{width:84px;flex-basis:84px;gap:6px}.template-strip{padding-top:10px;grid-auto-columns:84px}.panel-kicker{font-size:.74rem}.panel-count{font-size:.82rem}.swipe-hint{font-size:.62rem}.template-name{font-size:.68rem}.save-button{min-height:54px}}@media(min-width:760px){.app-shell{min-height:620px}.topbar{height:64px;padding-inline:28px}.brand-name{font-size:1.7rem;letter-spacing:.12em}.theme-button{width:44px;height:44px;min-width:44px}.workspace{width:min(1160px,100%);padding:44px 26px 22px;grid-template-columns:minmax(0,720px) minmax(320px,380px);grid-template-rows:minmax(0,1fr);align-items:start;justify-content:center;gap:28px}.preview-frame{width:min(100%,720px)}.preview-title{font-size:1.85rem}.preview-overlay{padding:54px 22px 20px}.control-panel{align-self:start;height:min(100%,600px);padding:18px;grid-template-rows:auto minmax(0,1fr) auto;position:relative}.template-strip{display:grid;grid-auto-columns:auto;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;align-content:start;overflow-x:hidden;overflow-y:scroll;padding-right:18px;scrollbar-width:none}.template-strip::-webkit-scrollbar{display:none}.template-scrollbar.is-visible{display:block;position:absolute;top:66px;right:10px;bottom:94px;width:8px;border-radius:8px;background:color-mix(in srgb,var(--primary) 18%,transparent);pointer-events:none}.template-scrollbar.is-visible span{position:absolute;top:var(--scroll-thumb-top, 0%);left:0;width:100%;height:34%;border-radius:8px;background:var(--primary);box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 26%,transparent)}.template-option{width:100%;flex-basis:auto}.swipe-hint{display:none}.save-area{position:static;pointer-events:auto}.save-button{width:100%}}@media(min-width:1024px){.workspace{width:100%;padding:42px 42px 22px 56px;grid-template-columns:minmax(0,1fr) minmax(430px,500px);gap:34px;justify-content:start}.preview-area{place-items:center start}.preview-frame{width:min(100%,980px)}.control-panel{height:min(100%,620px);padding:22px}.template-scrollbar.is-visible{top:74px;right:12px;bottom:102px}.template-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px;padding:16px 12px 12px 6px}.thumb-wrap{width:96px;height:96px}.template-name{font-size:.78rem}}@media(min-width:1360px){.workspace{padding-left:72px;grid-template-columns:minmax(0,1fr) 520px}.preview-frame{width:min(100%,1240px)}.thumb-wrap{width:104px;height:104px}}@media(max-width:380px){.topbar{padding-inline:10px}.brand-name{font-size:1.1rem;letter-spacing:.06em}.panel-kicker{font-size:.76rem;letter-spacing:.04em}.panel-count{font-size:.8rem}.swipe-hint{font-size:.62rem}.preview-title{font-size:1.08rem}.theme-button{width:38px;height:38px;min-width:38px}}