:root{--paper:oklch(99% .002 80);--stage:oklch(95.5% .005 80);--surface:var(--paper);--surface-2:oklch(97.2% .004 80);--inset:oklch(96.5% .005 80);--border:oklch(90% .006 80);--border-strong:oklch(83% .008 80);--ink:oklch(18.5% .005 60);--text:var(--ink);--muted:oklch(50% .008 60);--faint:oklch(63% .008 60);--accent:oklch(62% .245 28);--accent-hover:oklch(56% .23 28);--accent-soft:oklch(93% .05 32);--on-accent:var(--paper);--shadow-preview:0 24px 60px -18px oklch(18.5% .02 60/.32), 0 4px 14px -6px oklch(18.5% .02 60/.2);--shadow-panel:0 18px 44px -14px oklch(18.5% .02 60/.3);--shadow-rail:-1px 0 0 var(--border);--rail-w:380px;--header-h:60px;--radius:12px;--radius-sm:8px;--font-display:"Anton", "Arial Narrow", sans-serif;--font-ui:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--ease:cubic-bezier(.22, .61, .36, 1)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-ui);color:var(--text);background:var(--stage);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:15px;line-height:1.45;overflow-x:hidden}#app{height:100%}.app{flex-direction:column;height:100%;min-height:0;display:flex}.topbar{flex:0 0 var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);z-index:2;align-items:center;gap:16px;padding:0 22px;display:flex}.brand-mark{filter:invert();opacity:.9;width:auto;height:26px}.brand-mark.working{animation:1.6s cubic-bezier(.55,.1,.35,.95) infinite brand-spin}@keyframes brand-spin{0%{filter:invert();transform:rotate(0)}50%{filter:invert()sepia()saturate(6)hue-rotate(-18deg);transform:rotate(180deg)}to{filter:invert();transform:rotate(360deg)}}@keyframes brand-pulse{0%,to{opacity:.35;filter:invert()}50%{opacity:1;filter:invert()sepia()saturate(6)hue-rotate(-18deg)}}@media (prefers-reduced-motion:reduce){.brand-mark.working{animation:2.4s ease-in-out infinite brand-pulse}}.brand{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin:0;font-size:25px;font-weight:400;line-height:1}.brand b{color:var(--accent);font-weight:400}.topbar-actions{align-items:center;gap:10px;margin-left:auto;display:flex}.body{flex:auto;min-height:0;display:flex}.stage{background:radial-gradient(120% 100% at 50% 0%, oklch(97.5% .004 80) 0%, var(--stage) 60%);flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:18px;min-width:0;padding:32px 40px 28px;display:flex;position:relative;overflow:auto}#preview{cursor:pointer}.stage.empty #preview{border:2px dashed var(--border-strong);background:var(--inset);place-items:center;min-height:60vh;display:grid}.stage.empty #preview:after{content:"Drop a photo here, click to browse, or paste a link";color:var(--faint);font-size:14px;font-weight:600}.stage.dropping #preview{outline:3px solid var(--accent);outline-offset:4px}.stage.dropping #preview:before{content:"";background:var(--accent);opacity:.14;z-index:1;position:absolute;inset:0}.photo-bar{flex-wrap:wrap;flex:none;justify-content:center;align-items:center;gap:8px;width:100%;max-width:640px;display:flex}.photo-bar input[type=url]{width:auto;min-width:160px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);flex:200px;padding:9px 11px;font-size:14px}.photo-bar-hint{text-align:center;color:var(--faint);flex:1 0 100%;font-size:11.5px}.export-panel{z-index:6;background:var(--surface);max-width:400px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-panel);gap:10px;padding:18px;display:grid;position:absolute;top:24px;right:24px}.export-panel[hidden]{display:none}.export-panel h3{text-transform:uppercase;letter-spacing:.14em;color:var(--faint);margin:0;font-size:11px;font-weight:800}.export-panel label{align-items:flex-start;gap:8px;font-size:13px;display:flex}.export-panel code{background:var(--inset);border-radius:4px;padding:1px 4px;font-size:12px}.export-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.export-progress{color:var(--muted);align-items:center;gap:10px;font-size:12.5px;font-weight:600;display:flex}.export-progress[hidden]{display:none}.export-spinner{filter:invert();opacity:.8;flex:none;width:auto;height:15px;animation:1.6s cubic-bezier(.55,.1,.35,.95) infinite brand-spin}@media (prefers-reduced-motion:reduce){.export-spinner{animation:2.4s ease-in-out infinite brand-pulse}}.export-panel.busy label{opacity:.55}.export-result{border:1px solid var(--border);border-left:3px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--inset);gap:8px;padding:10px 12px;font-size:12.5px;display:grid}.export-result[hidden]{display:none}.export-result p{color:var(--text);margin:0;font-weight:600}.export-result.bad{border-left-color:var(--accent);background:var(--accent-soft)}.export-result summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:700}.export-result pre{white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--border);-webkit-user-select:text;user-select:text;border-radius:6px;max-height:220px;margin:8px 0;padding:10px;font-size:11.5px;line-height:1.45;overflow:auto}#preview{max-height:calc(100vh - var(--header-h) - 150px);aspect-ratio:1080/1350;background:var(--inset);width:auto;max-width:100%;height:auto;box-shadow:var(--shadow-preview);display:block;position:relative;overflow:hidden}#preview svg{width:100%;height:auto;display:block}.rail{flex:0 0 var(--rail-w);width:var(--rail-w);background:var(--surface);box-shadow:var(--shadow-rail);overflow:hidden auto}.section{border-bottom:1px solid var(--border)}.section:last-of-type{border-bottom:0}.section-summary{cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface);align-items:baseline;gap:10px;padding:15px 22px;list-style:none;display:flex}.section-summary::-webkit-details-marker{display:none}.section-summary:hover{background:var(--surface-2,#00000008)}.section-arrow{color:var(--ink);flex:none;font-size:10px;line-height:1;transition:transform .15s;transform:rotate(0)}details[open]>.section-summary>.section-arrow{transform:rotate(90deg)}.section-summary .section-label{color:var(--ink);margin:0;font-size:12px}.section-hint{color:var(--faint);text-overflow:ellipsis;white-space:nowrap;max-width:45%;margin-left:auto;font-size:11.5px;font-weight:600;overflow:hidden}.section-body{padding:4px 22px 20px}.rail-pinned{background:var(--surface);border-bottom:3px solid var(--ink)}.event-fields{border-bottom:1px solid var(--border);padding:16px 22px}.event-fields>.section-label{margin:0 0 12px}.rail-pinned-label{background:var(--ink);color:var(--surface);text-transform:uppercase;letter-spacing:.14em;margin:0;padding:13px 22px 11px;font-size:11px;font-weight:800}.section-pinned{border-bottom:1px solid var(--border);padding:16px 22px}.section-pinned:last-child{border-bottom:0}.section-pinned>.section-label{color:var(--ink);margin-bottom:8px}.section-pinned .section-body{padding:0}.section-pinned .field>.field-label{display:none}.credit-row{margin-bottom:8px}.credit-row:last-of-type{margin-bottom:12px}.section-pinned .credit-row .field>.field-label{margin-bottom:4px;font-size:11px;display:block}.credit-row .row-2>.credit-pos{flex:0 0 84px}.credit-row input[type=text]{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 10px;font-size:14px}.section-label{text-transform:uppercase;letter-spacing:.11em;color:var(--faint);margin:0 0 14px;font-size:11px;font-weight:700;display:block}.field{margin-bottom:14px}.field:last-child{margin-bottom:0}#shadowGroup[hidden],#scrimGroup[hidden],#scrimTopGroup[hidden],#rail-hidden[hidden]{display:none}.field-label{color:var(--muted);margin-bottom:6px;font-size:12.5px;font-weight:600;display:block}.field-head{justify-content:space-between;align-items:baseline;margin-bottom:6px;display:flex}.field-head .field-label{margin:0}.field-val{color:var(--accent);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700}.hint{color:var(--faint);margin:6px 0 0;font-size:11.5px;display:block}.hint.warn{color:var(--accent)}select,input[type=text],input[type=number],textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);transition:border-color .15s var(--ease), box-shadow .15s var(--ease);padding:9px 11px;font-size:14px}select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888078' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-position:right 11px center;background-repeat:no-repeat;padding-right:32px}textarea{resize:vertical;min-height:74px;line-height:1.4}select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:26px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:var(--inset);border:1px solid var(--border);border-radius:999px;height:5px}input[type=range]::-moz-range-track{background:var(--inset);border:1px solid var(--border);border-radius:999px;height:5px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:3px solid var(--surface);width:18px;height:18px;transition:transform .12s var(--ease);border-radius:50%;margin-top:-7.5px;box-shadow:0 1px 4px oklch(27% .02 60/.35)}input[type=range]::-moz-range-thumb{background:var(--accent);border:3px solid var(--surface);border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px oklch(27% .02 60/.35)}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft)}input[type=color]{appearance:none;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;width:100%;height:40px;padding:4px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}input[type=color]::-moz-color-swatch{border:none;border-radius:5px}.row-2{gap:10px;display:flex}.row-2>.field{flex:1;margin-bottom:0}button{font:inherit;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);transition:background .15s var(--ease), border-color .15s var(--ease), transform 80ms var(--ease), color .15s var(--ease);padding:9px 15px;font-size:13.5px;font-weight:600}button:hover{background:var(--inset);border-color:var(--faint)}button:active{transform:translateY(1px)}button:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);outline:none}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}button.block{width:100%}button.danger{color:var(--muted)}button.danger:hover{color:var(--accent);border-color:var(--accent);background:var(--surface)}.status{min-height:18px;color:var(--muted);margin:0;padding:12px 22px 22px;font-size:12.5px;font-weight:600}.status:empty{padding-bottom:0}.mo4-auth{--ink:oklch(14.5% .005 30);--ink-2:oklch(19.5% .005 30);--ink-3:oklch(24.5% .005 30);--ink-fade:oklch(100% 0 0/.55);--ink-mute:oklch(100% 0 0/.35);--paper:oklch(99% .002 80);--signal:oklch(62% .245 28);--font-display:"Anton", "Arial Narrow", sans-serif;--font-body:"Hanken Grotesk", system-ui, sans-serif;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--d-fast:.12s;background:var(--ink);min-height:100%;color:var(--paper);font-family:var(--font-body)}.mo4-screen{min-height:100dvh;padding:var(--sp-7) var(--sp-5);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.mo4-screen[hidden]{display:none}.mo4-logo{opacity:.95;height:90px;margin-bottom:var(--sp-8)}.mo4-group{text-align:left;width:100%;max-width:360px}.mo4-centered .mo4-group{text-align:center}.mo4-eyebrow{margin:0 0 var(--sp-2);text-transform:uppercase;letter-spacing:.14em;color:var(--signal);font-size:11px;font-weight:700}.mo4-display{margin:0 0 var(--sp-6);font-family:var(--font-display);text-transform:uppercase;font-size:clamp(40px,9vw,72px);font-weight:400;line-height:.95}.mo4-centered .mo4-display{margin-bottom:var(--sp-2)}.mo4-lede{margin:0 auto var(--sp-5);max-width:42ch;color:var(--ink-fade);font-size:15px;line-height:1.6}.mo4-label{margin-bottom:var(--sp-2);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute);font-size:11px;font-weight:700;display:block}.mo4-auth input[type=email],.mo4-auth input[type=text]{width:100%;margin-bottom:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--ink-2);border:1px solid var(--ink-3);font-family:var(--font-body);color:var(--paper);transition:border-color var(--d-fast) var(--ease);border-radius:2px;outline:none;font-size:15px}.mo4-auth input:focus{border-color:var(--paper)}.mo4-auth input::placeholder{color:var(--ink-mute)}.mo4-btn{width:100%;padding:var(--sp-3) var(--sp-5);background:var(--signal);color:var(--paper);font-family:var(--font-body);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:opacity var(--d-fast) var(--ease);border:none;border-radius:2px;font-size:13px;font-weight:700;display:block}.mo4-btn:hover{opacity:.88}.mo4-btn:disabled{opacity:.4;cursor:not-allowed}.mo4-btn-ghost{margin-bottom:var(--sp-3);border:1px solid var(--ink-3);background:0 0}.mo4-btn-ghost:hover{border-color:var(--paper);opacity:1}.mo4-link{width:auto;color:var(--ink-mute);cursor:pointer;background:0 0;border:none;margin:0 auto;padding:0;font-size:12px}.mo4-link:hover{color:var(--paper)}.mo4-link:disabled{opacity:.5;cursor:not-allowed}.mo4-error{min-height:20px;margin:var(--sp-3) 0 0;color:var(--signal);font-size:13px}.mo4-hint{margin:var(--sp-3) 0 0;color:var(--ink-mute);font-size:12px}.mo4-note{margin:0 0 var(--sp-4);color:var(--ink-mute);font-size:12px}.mo4-otp{gap:var(--sp-2);margin-bottom:var(--sp-4);justify-content:center;display:flex}.mo4-auth .mo4-otp-box{text-align:center;width:44px;height:54px;margin-bottom:0;padding:0;font-size:22px;font-weight:700}@media (width<=820px){.body{flex-direction:column}.stage{flex:none;padding:24px}#preview{max-height:62vh}.rail{width:100%;box-shadow:0 -1px 0 var(--border);flex:auto}.topbar{gap:10px;padding:0 16px}.topbar-actions{gap:6px}.topbar-actions button{padding:8px 11px;font-size:12.5px}}.preview-tabs{gap:6px;margin:16px 20px;display:flex}.story-controls,.web-controls{padding:0 20px}.preview-tabs button{flex:1}.preview-tabs button[aria-selected=true]{background:var(--text);color:var(--surface)}.viewing-story .rail>:not(.preview-tabs):not(.story-controls):not(#status),.viewing-story .photo-bar,.viewing-web .rail>:not(.preview-tabs):not(.web-controls):not(#status),.viewing-web .photo-bar{display:none}.story-controls label,.web-controls label{margin:20px 0;display:block}.story-controls input[type=range],.web-controls input[type=range]{width:100%;display:block}.story-controls output,.web-controls output{float:right;font-variant-numeric:tabular-nums}.story-controls p,.web-controls p{color:var(--muted);font-size:13px;line-height:1.5}.viewing-story #preview,.viewing-web #preview{cursor:default}