.story-open{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 0 auto;font:inherit;color:inherit;opacity:.55;border:0;background:transparent;padding:0;cursor:pointer;min-height:44px;text-decoration:none}
.story-open svg{display:block;width:17px;height:17px;flex:none;pointer-events:none}
.story-open:hover{opacity:1;background:transparent;text-decoration:none}
.story-dialog{box-sizing:border-box;width:min(980px,calc(100% - 24px));max-height:92dvh;padding:24px;border:0;border-radius:20px;background:#faf9f6;color:#202020;box-shadow:0 24px 100px #0005;overflow:auto;color-scheme:light}
.story-dialog::backdrop{background:#0008;backdrop-filter:blur(5px)}
.story-dialog *{box-sizing:border-box}
.story-dialog [hidden]{display:none!important}
.story-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.story-heading h2{font:500 23px Georgia,serif;margin:0 0 8px}
.story-heading p,.story-dialog small,.story-preview p{font:12px/1.5 Arial,sans-serif;color:#62615e;margin:0}
.story-workspace{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:28px;align-items:start}
.story-preview{min-width:0;position:sticky;top:0}
.story-preview canvas{display:block;width:100%;height:auto;border-radius:8px;background:#eee;box-shadow:0 4px 25px #0001}
.story-preview p{margin-top:8px}
.story-controls{display:grid;gap:15px;min-width:0}
.story-dialog label{display:grid;gap:6px;font:13px/1.4 Arial,sans-serif;min-width:0}
.story-dialog input,.story-dialog select,.story-dialog textarea{font:16px/1.5 Arial,sans-serif;background:#fff;color:#222;border:1px solid #deddd9;border-radius:8px;padding:9px 10px;width:100%;min-width:0;margin:0}
.story-dialog textarea{resize:vertical;min-height:110px}
.story-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
.story-dialog button{font:14px/1.4 Arial,sans-serif;border:0;border-radius:9px;min-height:44px;padding:10px 14px;cursor:pointer;background:#eae8e2;color:#222;box-shadow:none;text-decoration:none}
.story-dialog button:hover{background:#dfdcd4;color:#111}
.story-dialog button:disabled{opacity:.45;cursor:not-allowed}
.story-dialog :focus-visible,.story-open:focus-visible{outline:2px solid #245aa3;outline-offset:3px}
.story-heading button{font-size:24px;padding:0;width:44px;flex-shrink:0}
.story-swatches{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
.story-swatches button{width:44px;border:1px solid #9995;box-shadow:inset 0 0 0 3px #faf9f6}
.story-swatches button[aria-pressed=true]{outline:2px solid #245aa3;outline-offset:1px}
.story-checks{display:flex;flex-wrap:wrap;gap:14px}
.story-checks label{display:flex;align-items:center;min-height:36px}
.story-checks input{width:18px;height:18px}
.story-dialog .story-video-check{display:flex;align-items:center;gap:8px;min-height:44px}
.story-dialog .story-video-check input{width:18px;height:18px}
.story-logo-color{display:flex;gap:6px;align-items:center;min-width:0}
.story-dialog .story-logo-color input[type=color]{width:40px;height:44px;flex:0 0 40px;padding:4px;cursor:pointer}
.story-footer{margin-top:22px;display:grid;gap:10px}
.story-footer p{font:14px/1.5 Arial,sans-serif;min-height:21px;margin:0}
.story-footer>div{display:flex;gap:10px}
.story-footer [data-story-share]{background:#263f57;color:white}
@media(max-width:640px){.story-dialog{padding:18px;width:calc(100% - 12px);max-height:96dvh;border-radius:14px}.story-workspace{grid-template-columns:1fr;gap:20px}.story-preview{position:static;width:min(100%,220px);margin:auto}.story-heading h2{font-size:21px}.story-controls{gap:13px}}
@media(prefers-reduced-motion:no-preference){.story-dialog[open]{animation:story-enter .18s ease-out}@keyframes story-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}}
.story-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.story-dialog .story-link input{font-size:13px;color:#444;background:#f3f2ee}
/* Home page "share this page" icon, sitting to the right of the footer menu. */
.site-footer .footer-story-share{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:50%;background:transparent;color:var(--text);cursor:pointer}
.site-footer .footer-story-share:hover{background:var(--surface-muted)}
.site-footer .footer-story-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-footer .footer-story-share svg{width:18px;height:18px}
@media(max-width:600px){.site-footer:has(.footer-story-share) .language-control{grid-column:2;grid-row:2;justify-self:start}.site-footer .footer-story-share{grid-column:2;grid-row:2;justify-self:end;align-self:start;margin-top:-6px}}
@media(min-width:601px){.site-footer .footer-story-share{margin-inline-start:-14px}}