@charset "UTF-8";
/* Shared UI sizes use rem; native Story canvases retain their point-based pixel geometry. */
:root { --sidebar-width:17.10625rem; --ink:#202923; --muted:#7c847f; --green:#285c47; --green-dark:#1c4635; --mint:#eaf1eb; --canvas:#f8f9f7; --line:#e7eae5; --white:#fff; --focus-color:#6f7b74; --focus-width:0.1078125rem; --focus-offset:0.14375rem; --text-caption:0.790625rem; --text-control:0.934375rem; --text-body:1.00625rem; --text-card-title:1.00625rem; --text-dialog-title:1.653125rem; --text-secondary:#65735d; --radius:1.29375rem; --card-radius:1.00625rem; font-size:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); font-synthesis:none; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html,body { height:100%; overflow:hidden; }
#app { height:100dvh; overflow:auto; overscroll-behavior:contain; }
body { margin:0; font-size:var(--text-body); line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button { border:0; background:none; }
button:disabled { opacity:.4; cursor:not-allowed; }
a { color:inherit; }
button,a,input,select,textarea,[tabindex] { outline-offset:var(--focus-offset); }
:focus { outline:none; }
:where(.keyboard-navigation) :focus-visible { outline:var(--focus-width) solid var(--focus-color); }
dialog:focus { outline:none; }
#main:focus { outline:none; }
button:focus:not(:focus-visible) { outline:none; }
button { touch-action:manipulation; }
img,video { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
svg.icon { width:1.4375rem; height:1.4375rem; flex-shrink:0; vertical-align:middle; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:1.4375rem; top:-5.03125rem; z-index:100; padding:0.8625rem 1.4375rem; background:var(--green); color:white; border-radius:0.71875rem; }.skip-link:focus { top:1.078125rem; }
.workspace { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; background:#fff; border-right:1px solid var(--line); padding:2.15625rem 1.29375rem 1.221875rem; display:flex; flex-direction:column; z-index:10; }
.brand { display:flex; gap:0.790625rem; align-items:center; padding-left:0.934375rem; text-decoration:none; width:fit-content; }
.brand>img { width:2.5875rem; height:2.5875rem; }
.brand>span { font-size:2.084375rem; line-height:.9; letter-spacing:-0.115rem; font-weight:650; }.brand-by { display:block; letter-spacing:0.0215625rem; font-size:0.646875rem; line-height:1; font-weight:500; color:#8a918c; margin:0.575rem 0 0 0.14375rem; }
.workspace-switch { display:flex; gap:0.71875rem; align-items:center; padding:0.934375rem 0.646875rem; border:1px solid var(--line); border-radius:0.790625rem; margin:2.44375rem 0.2875rem 2.15625rem; font-size:0.790625rem; font-weight:600; }
.workspace-avatar { background:#eef1ed; width:2.228125rem; height:2.228125rem; display:grid; place-items:center; border-radius:0.646875rem; font-size:1.29375rem; font-weight:650; color:#47554b; }
.workspace-switch small { display:block; color:var(--muted); font-size:0.71875rem; font-weight:400; margin-top:0.071875rem; }.workspace-dot { margin-left:auto; width:0.359375rem; height:0.359375rem; border-radius:50%; background:#78a581; }
.nav-label { font-size:0.646875rem; color:#98a099; letter-spacing:0.129375rem; font-weight:600; margin:0 1.00625rem 0.71875rem; }
.nav-item { width:100%; padding:0.8625rem 1.00625rem; display:flex; align-items:center; gap:0.934375rem; border-radius:0.71875rem; color:#6f7972; font-size:0.8625rem; margin-bottom:0.359375rem; text-align:left; transition:background .15s,color .15s; }
.nav-item .icon { width:1.365625rem; height:1.365625rem; }.nav-item:hover { background:#f6f8f4; color:var(--green); }.nav-item.active { background:#eaf1e9; color:var(--green); font-weight:600; }.nav-item .nav-count { margin-left:auto; font-size:0.71875rem; background:#d7e6d8; min-width:1.365625rem; text-align:center; padding:0.071875rem 0.359375rem; border-radius:0.43125rem; }
.tiny-demo { margin-left:auto; font-size:0.646875rem; padding:0.071875rem 0.359375rem; color:#969e98; border:1px solid #e3e7e1; border-radius:0.359375rem; }
.sidebar-note { margin:3.01875rem 1.00625rem 1.796875rem; }.note-symbol { display:inline-flex; width:2.44375rem; height:2.44375rem; border-radius:0.790625rem; align-items:center; justify-content:center; background:#eff3eb; color:#72865a; }.note-symbol .icon { width:1.29375rem; height:1.29375rem; }
.sidebar-note p { margin:0.934375rem 0 0.43125rem; color:#899084; font-size:0.934375rem; line-height:1.7; letter-spacing:-0.014375rem; }.sidebar-note small { font-size:0.71875rem; color:#a9afa6; }
.sidebar-bottom { margin-top:auto; }.nav-item.subtle { font-size:0.790625rem; margin:0 0 0.8625rem; padding:0.71875rem 1.00625rem; }.nav-item.subtle .icon { width:1.221875rem; }
.source-panel { width:100%; padding:0.8625rem 0.71875rem; background:#f7f9f5; border:1px solid #e8ece4; border-radius:0.790625rem; display:flex; align-items:center; gap:0.646875rem; text-align:left; font-size:0.790625rem; }.source-panel:hover { background:#f0f5ed; }.source-panel small { display:block; color:#90998b; font-size:0.646875rem; margin-top:0.14375rem; }.source-panel>.icon { width:0.934375rem; margin-left:auto; color:#a2aaa0; }.source-dot { width:0.43125rem; height:0.43125rem; background:#b2bfa7; border-radius:50%; }.source-dot.connected { background:#529363; box-shadow:0 0 0 0.215625rem #e1eddf; }
.profile { display:flex; align-items:center; gap:0.71875rem; border-top:1px solid var(--line); margin-top:1.221875rem; padding:1.221875rem 0.215625rem 0; font-size:0.790625rem; }.profile small { display:block; font-size:0.646875rem; color:#929a91; margin-top:0.14375rem; }.profile>.icon-button { margin-left:auto; color:#8a948b; width:1.86875rem; }.avatar { display:inline-flex; align-items:center; justify-content:center; width:2.371875rem; height:2.371875rem; flex-shrink:0; background:#efece4; color:#7c7564; border:0.14375rem solid white; border-radius:50%; font-size:0.71875rem; font-weight:600; }.avatar.small { width:2.084375rem; height:2.084375rem; font-size:0.646875rem; }
.workspace-main { min-width:0; }.topbar { height:5.31875rem; padding:0 3.090625rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.55); }.breadcrumb { display:flex; align-items:center; gap:0.934375rem; font-size:0.790625rem; color:#949c96; }.breadcrumb>.icon { width:0.8625rem; height:0.8625rem; color:#b0b8b1; }.breadcrumb strong { font-weight:500; color:#59635b; }.topbar-right { display:flex; gap:1.29375rem; align-items:center; }.prototype-label { font-size:0.71875rem; color:#939a91; display:flex; align-items:center; gap:0.503125rem; }.prototype-label i { width:0.359375rem; height:0.359375rem; border-radius:50%; background:#9dad8d; }.topbar .icon-button { color:#98a094; width:1.940625rem; height:1.940625rem; }.topbar .icon-button .icon { width:1.221875rem; }
.mobile-menu { display:none!important; }
main { padding:3.01875rem 3.090625rem 1.725rem; max-width:115rem; margin:auto; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:1.796875rem; margin-bottom:2.515625rem; }.eyebrow { font-size:0.646875rem; letter-spacing:0.1509375rem; color:#8e9b8d; font-weight:600; margin-bottom:0.790625rem; }h1 { font-size:2.803125rem; font-weight:600; letter-spacing:-0.129375rem; line-height:1.15; }.page-subtitle { margin-top:0.8625rem; color:#8b938b; font-size:0.8625rem; letter-spacing:0.00359375rem; }.page-heading>.button { margin-top:1.4375rem; }
.button { border-radius:0.646875rem; padding:0.8625rem 1.221875rem; display:inline-flex; gap:0.575rem; align-items:center; justify-content:center; font-size:0.790625rem; font-weight:550; line-height:1.3; min-height:2.875rem; text-decoration:none; transition:background .15s,box-shadow .15s,transform .15s; white-space:nowrap; cursor:pointer; }.button .icon { width:1.15rem; height:1.15rem; }.button.primary { background:var(--green); color:white; box-shadow:0 0.215625rem 0.503125rem #25442c0c; }.button.primary:hover:not(:disabled) { background:var(--green-dark); box-shadow:0 0.2875rem 0.8625rem #25442c24; }.button.secondary { background:white; border:1px solid #e1e6dd; color:#5d6b5f; }.button.secondary:hover:not(:disabled) { background:#f3f6ef; }.button.danger { background:#a84138; color:white; }.button.compact { padding:0.575rem 0.8625rem; min-height:2.371875rem; font-size:var(--text-control); }.text-button { display:inline-flex; align-items:center; gap:0.359375rem; color:#7f8d7a; font-size:0.71875rem; padding:0.359375rem 0; }.text-button .icon { width:0.934375rem; height:0.934375rem; }.text-button:hover { color:var(--green); }.icon-button { display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border-radius:0.575rem; padding:0.43125rem; color:#7d877e; flex-shrink:0; }.icon-button:hover:not(:disabled) { color:var(--green); background:#edf2e9; }
.group-section { background:#fff; border:1px solid #e9ece6; border-radius:1.15rem; padding:1.4375rem 1.796875rem 1.58125rem; margin-bottom:2.228125rem; }.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.365625rem; }.section-heading h2 { font-size:0.8625rem; font-weight:550; letter-spacing:-0.0071875rem; }.group-rail { display:flex; gap:2.0125rem; overflow-x:auto;  padding:0.14375rem 0; }.group-bubble { display:flex; flex-direction:column; align-items:center; gap:0.503125rem; min-width:5.60625rem; padding:0 0.14375rem; }.group-bubble strong { font-size:0.71875rem; font-weight:500; color:#66715f; margin-top:0.14375rem; }.group-bubble small { font-size:0.646875rem; color:#a1a99b; margin-top:-0.43125rem; }.bubble-image { display:flex; justify-content:center; align-items:center; width:4.6rem; height:4.6rem; padding:0.215625rem; border:1px solid #e4e9df; border-radius:50%; color:#74866a; font-size:1.796875rem; font-weight:500; background:white; transition:border-color .2s,box-shadow .2s; }.bubble-image img { width:100%; height:100%; border-radius:50%; object-fit:cover; }.bubble-image.all-groups { background:#f0f4ec; color:#7c9171; border-color:#e2eadb; }.bubble-image .icon { width:1.653125rem; height:1.653125rem; }.group-bubble.selected .bubble-image { border:0.14375rem solid #6c936d; box-shadow:0 0 0 0.215625rem #edf4e9; }.group-bubble.selected strong { color:var(--green); font-weight:600; }.group-bubble:hover .bubble-image { border-color:#8fab7c; }.group-bubble.new-group .bubble-image { border:1px dashed #ccd6c5; background:#fafbf8; color:#8f9f83; }.group-bubble.new-group strong { color:#9aa592; }.group-bubble.new-group small { color:#b4bcae; }
.library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1.078125rem; padding-bottom:0; border-bottom:1px solid #e3e8de; }.tabs { display:flex; gap:1.653125rem; overflow-x:auto; }.tab { padding:0 0 1.078125rem; position:relative; display:inline-flex; align-items:center; gap:0.43125rem; font-size:0.71875rem; color:#929b8c; white-space:nowrap; }.tab span { font-size:var(--text-caption); background:#eef1e9; border-radius:0.2875rem; padding:0.071875rem 0.2875rem; color:#929e88; }.tab.active { color:#325d3d; font-weight:600; }.tab.active span { background:#dfeadc; color:#4e764c; }.tab.active:after { position:absolute; bottom:-0.071875rem; left:0; right:0; height:0.14375rem; border-radius:0.14375rem; background:#507d4d; content:''; }.library-controls { display:flex; gap:0.71875rem; align-items:center; margin-bottom:0.790625rem; }.search-input { display:flex; align-items:center; gap:0.503125rem; background:white; border:1px solid #e6eae0; padding:0.503125rem 0.71875rem; border-radius:0.575rem; }.search-input .icon { width:0.934375rem; height:0.934375rem; color:#a5afa0; }.search-input input { width:8.625rem; background:none; border:0; outline:none; font-size:var(--text-body); color:#55634f; padding:0; }.search-input:focus-within { border-color:#97b08b; }
:where(.keyboard-navigation) .search-input:focus-within { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }.search-input input::placeholder { color:#a3ac9c; }.sort-select { display:flex; align-items:center; gap:0.359375rem; color:#9ba592; }.sort-select>.icon { width:1.078125rem; height:1.078125rem; }.sort-select select { background:transparent; border:0; font-size:0.646875rem; color:#8c9882; max-width:7.1875rem; padding:0.359375rem 0; }
.result-caption { display:flex; justify-content:space-between; padding:1.29375rem 0 1.15rem; font-size:0.646875rem; color:#98a18f; }.result-caption span:last-child { color:#adb4a5; }.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.653125rem; }.story-card,.group-tile:not(.group-add) { border:1px solid #e8ece2; border-radius:var(--card-radius); background:white; box-shadow:0 0.215625rem 0.43125rem #3f542704; transition:box-shadow .2s,transform .2s; } .story-card { overflow:hidden; }.story-card:hover,.group-tile:not(.group-add):hover { box-shadow:0 0.575rem 1.796875rem #2b3f2410; transform:translateY(-0.14375rem); }.card-media { position:relative; aspect-ratio:1.46; background:#e8eee0; overflow:hidden; }.card-open { width:100%; height:100%; padding:0; }.card-open>img,.card-open>video { width:100%; height:100%; object-fit:cover; transition:transform .5s; }.story-card:hover .card-open>img { transform:scale(1.035); }.card-status { position:absolute; left:0.8625rem; top:0.8625rem; pointer-events:none; }.status { display:inline-flex; align-items:center; gap:0.359375rem; padding:0.359375rem 0.575rem; background:#fffc; backdrop-filter:blur(0.8625rem); border:1px solid #fff9; color:#65705c; font-size:var(--text-caption); line-height:1; font-weight:500; border-radius:0.43125rem; box-shadow:0 0.071875rem 0.359375rem #00000005; white-space:nowrap; }.status i { width:0.2875rem; height:0.2875rem; border-radius:50%; background:currentColor; }.status.gray { color:#7f8578; }.status.amber { color:#aa8535; }.status.blue { color:#5c8ba0; }.status.green { color:#527c48; }.card-menu { position:absolute; top:0.71875rem; right:0.71875rem; background:#ffffffd9; backdrop-filter:blur(0.8625rem); border-radius:50%; width:1.796875rem; height:1.796875rem; padding:0.359375rem; color:#63715c; }.card-menu:hover { background:white!important; }.card-menu .icon { width:1.078125rem; height:1.078125rem; }.card-body { padding:1.15rem 1.221875rem 0.71875rem; }.card-groups { display:flex; align-items:center; gap:0.359375rem; min-height:1.29375rem; margin-bottom:0.575rem; }.card-groups span { font-size:0.575rem; padding:0.14375rem 0.43125rem; background:#f1f5ed; border-radius:0.2875rem; color:#8b9b7c; }.card-groups .unassigned { background:#f5f5f0; color:#a5aa9d; }.card-title { font-size:0.934375rem; letter-spacing:-0.014375rem; font-weight:550; line-height:1.45; text-align:left; padding:0; width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:1.365625rem; }.card-title:hover { color:var(--green); }.card-body>p { font-size:0.71875rem; color:#9aa18f; margin-top:0.43125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.card-footer { margin-top:1.15rem; border-top:1px solid #f0f2eb; display:flex; align-items:center; justify-content:space-between; padding-top:0.503125rem; }.card-footer>span { display:flex; gap:0.359375rem; align-items:center; color:#a3ac98; font-size:0.575rem; }.card-footer>span>.icon { width:0.790625rem; height:0.790625rem; }.card-footer .icon-button { width:1.653125rem; height:1.653125rem; color:#95a58a; border:1px solid #edf1e6; border-radius:50%; }.card-footer .icon-button .icon { width:0.790625rem; height:0.790625rem; }.new-story-card,.group-add { border:1px dashed #d8e2cf; border-radius:var(--card-radius); background:#f4f7ef; color:#a1b093; } .new-story-card { min-height:18.6875rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.43125rem; }.new-story-icon { border:1px solid #dfe8d5; width:2.73125rem; height:2.73125rem; display:grid; place-items:center; border-radius:50%; margin-bottom:0.43125rem; }.new-story-icon .icon { width:1.221875rem; }.new-story-card strong { font-size:0.790625rem; font-weight:500; }.new-story-card small { font-size:0.646875rem; color:#b0bda2; }.new-story-card:hover,.group-add:hover { background:#eff4e7; border-color:#b6c7a8; }.page-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1.078125rem; margin-top:2.3rem; padding:1.29375rem 0 0; color:#afb7a7; font-size:0.646875rem; }
.live-notice,.demo-notice { display:flex; align-items:center; gap:0.71875rem; background:#edf4ec; border:1px solid #deead9; color:#6c8461; border-radius:0.71875rem; padding:0.8625rem 1.00625rem; font-size:0.71875rem; margin:-0.71875rem 0 1.725rem; }.live-notice .icon,.demo-notice .icon { width:1.15rem; height:1.15rem; }.live-notice strong { font-weight:600; }.demo-notice { background:#f2f4ed; color:#879376; border-color:#e5eadd; }.demo-notice .demo-tag { margin-left:auto; }.demo-tag { display:inline-flex; align-items:center; padding:0.215625rem 0.503125rem; border:1px solid #e3e9db; border-radius:0.359375rem; background:#f3f6ed; color:#8c9a7d; font-size:0.646875rem; font-weight:500; white-space:nowrap; }
.empty-state { min-height:23rem; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:3.234375rem 1.796875rem; text-align:center; }.empty-icon { width:4.3125rem; height:4.3125rem; background:#edf3e7; color:#8da477; border-radius:1.4375rem; display:grid; place-items:center; margin-bottom:1.4375rem; }.empty-icon .icon { width:1.86875rem; height:1.86875rem; }.empty-state h2 { font-size:1.58125rem; font-weight:550; letter-spacing:-0.0503125rem; margin-bottom:0.71875rem; }.empty-state p { color:#939d88; font-size:0.8625rem; max-width:27.3125rem; margin-bottom:1.58125rem; }.muted { color:#99a18f; font-size:0.790625rem; }
.groups-grid { display:grid; grid-auto-rows:1fr; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.58125rem; }.group-tile { --group-preview-width:3.7375rem; padding:1.653125rem; }.group-tile-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.29375rem; }.group-tile-top .bubble-image { width:4.671875rem; height:4.671875rem; }.group-tile h2 { font-size:1.29375rem; font-weight:550; letter-spacing:-0.02875rem; }.group-tile>p { font-size:0.790625rem; color:#99a38f; margin-top:0.359375rem; }.group-mini-stories { display:flex; gap:0.43125rem; min-height:3.59375rem; margin:1.4375rem 0; align-items:center; }.group-mini-stories>button { padding:0; width:3.234375rem; height:3.59375rem; border-radius:0.503125rem; overflow:hidden; background:#edf2e6; }.group-mini-stories img { width:100%; height:100%; object-fit:cover; }.group-mini-stories>span { font-size:0.71875rem; color:#b0b9a5; }.group-tile-footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #edf0e7; padding-top:0.8625rem; }.reorder-controls { display:flex; gap:0; }.reorder-controls .icon-button { width:1.796875rem; height:1.796875rem; }.reorder-controls .icon { width:0.934375rem; }.group-add { display:flex; justify-content:center; align-items:center; flex-direction:column; gap:1.15rem; min-height:20.125rem; text-align:center; }.group-add>.icon { width:2.0125rem; height:2.0125rem; }.group-add strong { font-size:0.934375rem; font-weight:500; max-width:12.9375rem; }.group-add>span { font-size:0.71875rem; color:#b2bfa4; }.group-order-panel { padding:1.796875rem; background:#fff; border:1px solid #e4eadd; border-radius:1.15rem; margin-top:2.15625rem; }.group-order-panel h2 { font-size:1.078125rem; font-weight:550; }.group-order-panel>p { color:#98a38c; font-size:0.790625rem; margin:0.503125rem 0 1.078125rem; }.group-order-panel>select { padding:0.71875rem 0.8625rem; border:1px solid #e3eadb; border-radius:0.575rem; background:#fafbf8; color:#69795e; min-width:14.375rem; font-size:0.790625rem; margin-bottom:0.71875rem; }.order-row { display:flex; align-items:center; gap:0.934375rem; padding:0.8625rem 0; border-top:1px solid #edf1e7; }.order-row>span { color:#acb6a1; font-size:0.71875rem; }.order-row>img { width:2.73125rem; height:2.73125rem; border-radius:0.575rem; object-fit:cover; }.order-row strong { font-size:0.8625rem; font-weight:500; flex:1; }.order-row>.icon-button { width:1.86875rem; height:1.86875rem; }.order-row>.icon-button .icon { width:1.00625rem; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; margin:2.0125rem 0 1.29375rem; }.calendar-heading h2 { font-size:1.29375rem; letter-spacing:-0.0359375rem; font-weight:550; }.calendar-heading>div { display:flex; gap:0.359375rem; align-items:center; }.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid #e1e8d9; border-radius:1.00625rem; overflow:hidden; background:white; }.calendar-day { min-height:26.59375rem; border-right:1px solid #e9eee2; }.calendar-day:last-child { border:0; }.calendar-day header { padding:1.29375rem 0.8625rem; border-bottom:1px solid #e9eee2; display:flex; flex-direction:column; gap:0.2875rem; }.calendar-day header span { font-size:0.71875rem; color:#9ba98c; }.calendar-day header strong { font-size:1.653125rem; font-weight:500; color:#657456; }.calendar-day.today { background:#f5f8ef; }.calendar-day.today header strong { color:var(--green); }.calendar-day>div { padding:0.71875rem 0.575rem; }.calendar-story { text-align:left; padding:0; border:1px solid #dfebd5; border-radius:0.646875rem; overflow:hidden; background:white; width:100%; margin-bottom:0.8625rem; }.calendar-story>img { height:5.390625rem; width:100%; object-fit:cover; }.calendar-story>small { display:block; padding:0.646875rem 0.646875rem 0.215625rem; color:#8c9d7c; font-size:0.646875rem; }.calendar-story>strong { display:block; padding:0 0.646875rem 0.71875rem; font-size:0.71875rem; font-weight:500; }.calendar-add { display:grid; place-items:center; width:100%; border:1px dashed #dfe7d5; border-radius:0.575rem; height:2.44375rem; color:#b1bfa3; }.calendar-add .icon { width:1.00625rem; }.calendar-add:hover { background:#eaf2e1; }.planning-bottom { display:flex; align-items:center; gap:1.15rem; padding:1.796875rem 0; }.planning-bottom h2 { font-size:1.00625rem; font-weight:500; }.planning-bottom p { margin-top:0.359375rem; color:#99a78c; font-size:0.790625rem; }.planning-bottom>.demo-tag { margin-left:auto; }
/* Editing surface */
dialog { padding:0; border:1px solid #dce4d6; color:var(--ink); box-shadow:0 1.796875rem 7.1875rem #14291e30; border-radius:1.4375rem; background:#fff; max-height:92vh; overflow:auto; }.editor-dialog { width:min(80.5rem,calc(100vw - 5.03125rem)); max-width:none; height:min(64.6875rem,calc(100vh - 4.3125rem)); overflow:hidden; }.editor-dialog[open] { display:flex; flex-direction:column; }dialog::backdrop { background:rgb(0 0 0 / 45%); }.editor-header { height:6.540625rem; flex-shrink:0; padding:1.653125rem 2.084375rem; border-bottom:1px solid #e6ebdf; display:flex; justify-content:space-between; align-items:center; gap:1.4375rem; }.editor-heading { display:flex; align-items:center; gap:1.00625rem; min-width:0; }
.editor-heading>div { min-width:0; }.editor-symbol { width:2.803125rem; height:3.090625rem; background:#edf3e7; color:#6e885c; border-radius:0.8625rem; display:grid; place-items:center; flex-shrink:0; }.editor-symbol>.icon { width:1.58125rem; height:1.58125rem; }.editor-heading .eyebrow { font-size:0.575rem; margin-bottom:0.2875rem; }.editor-heading h2 { font-size:1.365625rem; letter-spacing:-0.043125rem; font-weight:550; line-height:1.4; max-width:39.53125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.editor-header-right { display:flex; align-items:center; gap:1.15rem; flex-shrink:0; }.editor-layout { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 29.46875rem; }.editor-form { overflow:auto; overscroll-behavior:contain; padding:0.359375rem 2.3rem 1.078125rem; }.editor-section { padding:1.796875rem 0; border-bottom:1px solid #edf1e7; }.editor-section:last-of-type { border-bottom:0; }.editor-section-title { display:flex; align-items:center; justify-content:space-between; gap:1.078125rem; margin-bottom:1.29375rem; }.editor-section-title h3 { display:flex; gap:0.646875rem; align-items:center; font-size:0.934375rem; font-weight:550; letter-spacing:-0.0071875rem; }.editor-section-title h3>span { color:#b4c0a7; font-size:0.646875rem; border:1px solid #e7eddf; padding:0.14375rem 0.2875rem; border-radius:0.2875rem; font-weight:400; }.editor-section-title>span { color:#a5b198; font-size:0.646875rem; }.media-drop { border:1px dashed #cddbc0; border-radius:0.8625rem; background:#f7faf2; overflow:hidden; cursor:pointer; }.media-drop.dragging { outline:0.215625rem solid #a3bd8d; background:#e9f4df; }.upload-empty { min-height:14.80625rem; padding:1.796875rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.575rem; text-align:center; }.upload-empty>span:first-child { width:2.803125rem; height:2.803125rem; display:grid; place-items:center; background:#eaf1e1; border-radius:0.8625rem; color:#9bb288; margin-bottom:0.359375rem; }.upload-empty>span:first-child>.icon { width:1.365625rem; }.upload-empty>strong { font-weight:500; font-size:0.934375rem; color:#7d916a; }.upload-empty>p { color:#a7b698; font-size:0.71875rem; margin-bottom:0.359375rem; }.selected-media { position:relative; height:15.09375rem; background:#edf2e6; }.selected-media>img,.selected-media>video { width:100%; height:100%; object-fit:cover; }.selected-media>span { position:absolute; bottom:0.8625rem; left:0.8625rem; display:flex; align-items:center; gap:0.43125rem; font-size:0.71875rem; background:#ffffffeb; padding:0.503125rem 0.790625rem; border-radius:0.503125rem; color:#61784e; backdrop-filter:blur(0.43125rem); }.selected-media>span>.icon { width:1.00625rem; }.media-hints { display:flex; justify-content:space-between; gap:0.71875rem; margin-top:0.646875rem; color:#aebaa1; font-size:0.575rem; }
.field { display:flex; flex-direction:column; gap:0.503125rem; margin-bottom:1.29375rem; min-width:0; }.field>span { font-size:0.790625rem; font-weight:500; color:#718064; display:flex; justify-content:space-between; gap:0.71875rem; }.field small { font-size:0.646875rem; color:#aab69d; font-weight:400; }.field input:not([type="color"]),.field textarea,.field select,.product-add>input { border:1px solid #e1e8d8; border-radius:0.575rem; padding:0.71875rem 0.8625rem; color:#475a38; background:#fff; width:100%; font-size:0.790625rem; min-height:2.73125rem; transition:border-color .15s,box-shadow .15s; }.field input::placeholder,.field textarea::placeholder,.product-add>input::placeholder { color:#b2bca7; }.field textarea { resize:vertical; min-height:5.60625rem; line-height:1.7; }.field input:focus,.field textarea:focus,.field select:focus,.product-add>input:focus { border-color:#96af80; outline:0; }
:where(.keyboard-navigation) :is(.field input,.field textarea,.field select,.product-add>input):focus-visible { outline:var(--focus-width) solid var(--focus-color); }.field-inline { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }.field-help { display:block; color:#9eac8e; font-size:0.71875rem; line-height:1.65; margin-bottom:0.8625rem; }.field .field-help { margin-bottom:0; }.color-field>div { border:1px solid #e1e8d8; border-radius:0.575rem; padding:0.503125rem 0.71875rem; display:flex; align-items:center; gap:0.71875rem; min-height:2.73125rem; }.color-field input[type="color"] { width:1.725rem; height:1.725rem; padding:0; border:0; background:transparent; cursor:pointer; }.color-field>div>span { font-size:var(--text-caption); color:#899c76; }.language-switch { display:flex; gap:0.071875rem; border-radius:0.43125rem; padding:0.14375rem; background:#f0f4e9; }.language-switch button { font-size:var(--text-control); padding:0.215625rem 0.503125rem; border-radius:0.2875rem; color:#a3b292; }.language-switch button.active { background:white; color:#63844b; box-shadow:0 0.071875rem 0.215625rem #34421f0c; }.group-picker { display:grid; grid-template-columns:1fr 1fr; gap:0.646875rem; }.group-choice { display:flex; align-items:center; gap:0.575rem; border:1px solid #e6ecde; border-radius:0.646875rem; padding:0.646875rem; cursor:pointer; font-size:var(--text-control); color:#859675; }.group-choice:has(input:checked) { background:#f0f6e9; border-color:#b9cda5; color:#52733b; }.group-choice input { position:absolute; opacity:0; width:0.071875rem; height:0.071875rem; }:where(.keyboard-navigation) .group-choice:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }.choice-image { display:grid; place-items:center; width:2.0125rem; height:2.0125rem; border-radius:50%; background:#e7efdd; color:#95ab80; flex-shrink:0; }.choice-image img { width:100%; height:100%; border-radius:50%; object-fit:cover; }.choice-check { margin-left:auto; opacity:0; }.choice-check>.icon { width:0.934375rem; height:0.934375rem; }.group-choice:has(input:checked) .choice-check { opacity:1; }.channel-picker { display:grid; grid-template-columns:1fr 1fr; gap:0.71875rem; }.channel-picker label { display:flex; gap:0.503125rem; align-items:center; padding:0.790625rem 0.646875rem; border:1px solid #e6ecdf; border-radius:0.575rem; cursor:pointer; font-size:0.71875rem; color:#8fa07e; }.channel-picker label:has(input:checked) { border-color:#c5d7b4; background:#f6f9f0; color:#6c8b53; }.channel-picker input { accent-color:var(--green); width:0.8625rem; height:0.8625rem; margin:0; }.channel-picker .icon { width:1.00625rem; height:1.00625rem; }.channel-picker small { margin-left:auto; font-size:0.503125rem; color:#afbea0; }.inline-note { display:flex; align-items:flex-start; gap:0.646875rem; font-size:0.71875rem; line-height:1.65; padding:0.8625rem; background:#f3f6ed; border-radius:0.646875rem; color:#8fa07b; margin:0.71875rem 0 1.29375rem; }.inline-note>.icon { width:1.078125rem; height:1.078125rem; margin-top:0.071875rem; }.publication-section>.field { margin-bottom:0.934375rem; }.product-add { display:flex; gap:0.575rem; }.product-add>input { min-width:0; }.product-chip { display:flex; align-items:center; gap:0.646875rem; background:#f3f6ed; border:1px solid #e5ecdc; color:#879e70; font-size:0.790625rem; padding:0.503125rem 0.71875rem; border-radius:0.575rem; margin-top:0.575rem; }.product-chip>.icon { width:1.078125rem; height:1.078125rem; }.product-chip>.icon-button { margin-left:auto; width:1.509375rem; height:1.509375rem; }.product-chip>.icon-button .icon { width:0.8625rem; height:0.8625rem; }.form-error { padding:0.934375rem 1.078125rem; border-radius:0.646875rem; background:#fdf1ed; color:#b3634e; border:1px solid #f0d6ca; font-size:var(--text-control); margin:0.8625rem 0; line-height:1.5; }.form-error[hidden] { display:none; }
.preview-panel { padding:1.725rem 2.3rem; border-left:1px solid #e6ecde; background:#f6f8f2; overflow:auto; overscroll-behavior:contain; }.preview-heading { display:flex; justify-content:space-between; align-items:center; color:#9baa8b; font-size:0.646875rem; margin-bottom:1.653125rem; }.preview-heading>span:first-child { display:flex; gap:0.43125rem; align-items:center; color:#7b9167; font-weight:500; }.preview-heading .icon { width:0.934375rem; height:0.934375rem; }.phone-frame { width:18.975rem; height:34.35625rem; padding:0.43125rem; border:1px solid #292c2c; border-radius:2.515625rem; background:#111313; box-shadow:0 1.29375rem 2.875rem #14211b25,0 0.215625rem 0.575rem #14211b18; margin:auto; }.phone-story { position:relative; height:100%; width:100%; background:var(--story-color); border-radius:29px; overflow:hidden; color:#fff; isolation:isolate; }.phone-background,.phone-story>video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }.phone-story>video[controls] { z-index:0; }.phone-no-image { position:absolute; inset:0; display:grid; place-items:center; z-index:-2; background:#b9c9ac; }.phone-no-image .icon { width:55px; height:55px; opacity:.4; }.phone-shade { position:absolute; inset:0; background:linear-gradient(180deg,#102a1d40 0%,transparent 32%,#102a1d60 62%,#102a1de6 100%); z-index:-1; }.phone-top { padding:15px 15px 0; }.story-progress { display:flex; gap:4px; margin-bottom:13px; }.story-progress i { height:2px; border-radius:2px; flex:1; background:#ffffff54; }.story-progress i:first-child { background:#fff; }.phone-group { display:flex; align-items:center; gap:6px; font-size:9px; }.phone-group>span { display:grid; place-items:center; background:#ffffff30; border:1px solid #ffffff70; border-radius:50%; width:25px; height:25px; font-size:11px; }.phone-group>span>img { width:100%; height:100%; border-radius:50%; object-fit:cover; }.phone-group>strong { font-size:9px; font-weight:550; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:110px; }.phone-group>small { font-size:7px; opacity:.65; }.phone-group>.icon { margin-left:auto; width:17px; height:17px; }.phone-content { position:absolute; bottom:35px; left:20px; right:20px; }.phone-eyebrow { font-size:7px; letter-spacing:1.5px; text-transform:uppercase; opacity:.7; display:block; margin-bottom:10px; }.phone-content h3 { font-size:29px; font-weight:600; line-height:1.12; letter-spacing:-1.1px; overflow-wrap:anywhere; }.phone-content p { font-size:10px; line-height:1.6; opacity:.85; margin-top:12px; overflow-wrap:anywhere; }.phone-cta { display:flex; align-items:center; justify-content:space-between; background:#ffffffee; color:#425d35; padding:9px 11px; border-radius:8px; font-size:9px; margin-top:17px; width:100%; }.phone-cta .icon { width:13px; height:13px; }.phone-home { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:85px; height:3px; background:#ffffffa0; border-radius:3px; }.preview-note { color:#a8b49a; text-align:center; font-size:0.646875rem; line-height:1.7; margin:1.29375rem 0 1.653125rem; }.preview-tip { display:flex; gap:0.71875rem; padding:1.078125rem; border:1px solid #e4eadc; border-radius:0.71875rem; background:#fafbf7; color:#9faf90; }.preview-tip .icon { width:1.221875rem; height:1.221875rem; color:#9bb184; }.preview-tip p { font-size:0.646875rem; line-height:1.7; }.preview-tip strong { color:#8a9f77; font-weight:500; }
.editor-footer { display:flex; justify-content:space-between; align-items:center; padding:1.221875rem 2.0125rem; border-top:1px solid #e6ebdf; flex-shrink:0; gap:0.8625rem; background:#fff; }.editor-footer>span { display:flex; gap:0.503125rem; align-items:center; color:#a1af91; font-size:0.646875rem; }.editor-footer>span .icon { width:0.934375rem; height:0.934375rem; }.editor-footer>div { display:flex; gap:0.646875rem; }
/* Dialogs */
.small-dialog { width:34.5rem; }.modal-header { padding:1.796875rem 1.796875rem 1.4375rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1.4375rem; border-bottom:1px solid #e8ecdf; }.modal-header .eyebrow { margin-bottom:0.575rem; font-size:0.575rem; }.modal-header h2 { font-size:var(--text-dialog-title); line-height:1.25; font-weight:550; letter-spacing:-0.0575rem; }.modal-header>.icon-button { width:1.796875rem; height:1.796875rem; margin-top:-0.215625rem; }.modal-header>.icon-button .icon { width:1.221875rem; height:1.221875rem; }.modal-body { padding:1.653125rem 1.796875rem; }.modal-intro { color:#98a78b; font-size:0.8625rem; line-height:1.75; margin-bottom:1.58125rem; }.modal-body>p { color:#8e9f7e; font-size:0.8625rem; line-height:1.75; margin-bottom:1.078125rem; }.modal-body>.field:last-of-type { margin-bottom:0.575rem; }.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:0.646875rem; padding:1.29375rem 1.796875rem; border-top:1px solid #e9eedf; }.modal-footer>.muted { margin-right:auto; font-size:0.646875rem; }.group-icon-editor { display:flex; align-items:center; gap:1.29375rem; margin:0 0 1.796875rem; }.group-icon-upload { display:flex; justify-content:center; align-items:center; width:5.4625rem; height:5.4625rem; border-radius:50%; border:1px dashed #cbdcb9; background:#f0f5e8; color:#9cb585; padding:0.2875rem; cursor:pointer; flex-shrink:0; }.group-icon-upload>img { width:100%; height:100%; border-radius:50%; object-fit:cover; }.group-image-actions { display:flex; flex-direction:column; align-items:flex-start; gap:0.503125rem; }.group-icon-editor small { font-size:0.646875rem; color:#b0bda1; }.connection-destination { display:flex; align-items:center; gap:0.790625rem; padding:0.8625rem 1.00625rem; border:1px solid #e4ecda; border-radius:0.646875rem; background:#f7faf2; color:#7b965f; font-size:0.8625rem; margin-bottom:1.58125rem; }.connection-destination small { display:block; color:#acb99e; font-size:0.646875rem; margin-top:0.215625rem; }.connection-success { display:flex; align-items:center; gap:1.00625rem; color:#5a8342; background:#f0f6e7; border-radius:0.790625rem; padding:1.29375rem; margin-bottom:1.58125rem; }.connection-success p { color:#97ac80; font-size:0.71875rem; margin-top:0.2875rem; }.action-list { padding:0.71875rem 1.078125rem; }.action-list>button { width:100%; display:flex; align-items:center; gap:0.8625rem; padding:1.15rem 0.71875rem; border-radius:0.575rem; text-align:left; font-size:0.8625rem; color:#81976a; }.action-list>button>.icon:last-child { margin-left:auto; width:1.00625rem; }.action-list>button:hover { background:#f2f7e9; }.action-list>p { padding:1.078125rem 0.71875rem; }.action-list>button.danger-text { color:#b6806b; }.preview-dialog { width:28.75rem; background:#f7f9f2; }.standalone-preview { padding:1.796875rem 1.796875rem 1.4375rem; }.standalone-preview>p { font-size:0.646875rem; color:#a4b197; text-align:center; margin-top:1.365625rem; }.detail-body { white-space:pre-wrap; }.detail-preview>code { display:block; word-break:break-all; font-size:0.8625rem; padding:0.934375rem; background:#f3f7ec; border-radius:0.575rem; color:#7f985f; margin-bottom:1.078125rem; }.detail-preview>h3 { font-size:1.00625rem; font-weight:500; margin:1.4375rem 0 0.71875rem; }
.integration-dialog { width:46rem; }.integration-body h3 { font-size:0.934375rem; font-weight:550; margin:1.796875rem 0 0.934375rem; }.integration-summary { display:grid; grid-template-columns:1fr 1fr; gap:0.8625rem; }.integration-summary>div { display:flex; flex-direction:column; gap:0.43125rem; border:1px solid #e5edd9; border-radius:0.71875rem; padding:1.078125rem; color:#8ba271; }.integration-summary .icon { width:1.365625rem; margin-bottom:0.359375rem; }.integration-summary strong { font-size:0.8625rem; font-weight:500; }.integration-summary span { font-size:0.646875rem; color:#acbb9c; }.integration-list { list-style:none; margin:0; padding:0; border:1px solid #e7eddf; border-radius:0.71875rem; overflow:hidden; }.integration-list>li { display:flex; gap:0.71875rem; align-items:center; border-bottom:1px solid #edf1e5; padding:0.790625rem 0.934375rem; font-size:0.790625rem; color:#7b9564; }.integration-list>li:last-child { border:0; }.integration-list .icon { width:1.00625rem; height:1.00625rem; }.integration-list small { margin-left:auto; font-size:0.575rem; background:#eff5e7; color:#97ad7e; padding:0.14375rem 0.359375rem; border-radius:0.2875rem; }.integration-list.simulation>li { color:#9ba889; }.integration-list.simulation small { background:#f5f4e8; color:#b5ae86; }.contract-path { display:flex; align-items:center; gap:1.078125rem; padding:1.078125rem; border:1px solid #e8eedf; border-radius:0.71875rem; font-size:0.71875rem; color:#a0b18d; }.contract-path strong { font-size:0.790625rem; font-weight:500; color:#819e69; }.discard-dialog { width:min(30.90625rem,calc(100vw - 2.875rem)); max-width:none; padding:2.0125rem; }.discard-dialog::backdrop { background:rgb(0 0 0 / 55%); }.discard-dialog h3 { font-size:1.4375rem; font-weight:550; line-height:1.35; letter-spacing:-0.0359375rem; }.discard-dialog p { color:#97a78a; margin:0.934375rem 0 1.58125rem; font-size:0.8625rem; }.discard-dialog>div { display:flex; gap:0.71875rem; justify-content:flex-end; }
#toast { position:fixed; bottom:1.796875rem; left:calc(50% + var(--sidebar-width) / 2); transform:translate(-50%,1.4375rem); background:#294d35; color:#fff; font-size:var(--text-control); padding:0.934375rem 1.4375rem; border-radius:0.790625rem; box-shadow:0 0.71875rem 2.15625rem #17342125; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:1000; display:flex; align-items:center; gap:0.71875rem; max-width:calc(100% - var(--sidebar-width) - 2.875rem); line-height:1.5; }#toast.show { opacity:1; transform:translate(-50%,0); }#toast.error { background:#945a45; }#toast .icon { width:1.221875rem; height:1.221875rem; }.loader { width:1.078125rem; height:1.078125rem; display:inline-block; border:0.14375rem solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }@keyframes spin { to {transform:rotate(360deg);} }
@media(min-width:1955px) { .story-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.groups-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1438px) { :root { --sidebar-width:15.09375rem; }.sidebar { padding-left:0.934375rem; padding-right:0.934375rem; }.topbar { padding:0 2.15625rem; }main { padding:2.44375rem 2.15625rem 1.4375rem; }.story-grid { gap:1.221875rem; }.tabs { gap:1.078125rem; }.library-toolbar { flex-wrap:wrap; gap:0; }.library-controls { order:-1; width:100%; justify-content:flex-end; margin-bottom:1.078125rem; }.tabs { width:100%; }.card-title { font-size:0.8625rem; }.editor-layout { grid-template-columns:minmax(0,1fr) 25.15625rem; }.preview-panel { padding:1.725rem; }.editor-form { padding-left:1.796875rem; padding-right:1.796875rem; } }
@media(max-width:1150px) { :root { --sidebar-width:13.296875rem; }.workspace-switch { font-size:0.71875rem; margin-left:0; margin-right:0; padding:0.790625rem 0.503125rem; }.workspace-avatar { width:1.796875rem; height:1.796875rem; }.nav-item { padding:0.790625rem 0.71875rem; gap:0.646875rem; }.brand { padding-left:0.646875rem; }.sidebar-note { margin-left:0.71875rem; }.source-panel { font-size:0.71875rem; }.source-panel small { font-size:0.575rem; }.profile { gap:0.43125rem; font-size:0.71875rem; }.profile small { font-size:0.575rem; }.profile>.icon-button { width:1.58125rem; }.profile>.avatar { width:2.0125rem; height:2.0125rem; }.story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.groups-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.page-heading { gap:1.15rem; }h1 { font-size:2.371875rem; }.group-rail { gap:1.365625rem; }.calendar-grid { grid-template-columns:repeat(7,8.984375rem); overflow-x:auto; }.calendar-heading h2 { font-size:1.078125rem; }.editor-dialog { width:calc(100vw - 2.44375rem); }.editor-layout { grid-template-columns:minmax(0,1fr) 22.28125rem; }.phone-frame { width:17.10625rem; height:31.05rem; }.phone-content h3 { font-size:26px; }.preview-panel { padding:1.58125rem 1.29375rem; }.editor-form { padding:0.359375rem 1.58125rem 1.078125rem; }.group-picker,.channel-picker { grid-template-columns:1fr; }.editor-footer { padding:1.078125rem 1.58125rem; }.page-footer span:first-child { display:none; } }
@media(max-width:874px) { :root { --sidebar-width:0; } .workspace { display:block; }.sidebar { display:none; position:fixed; width:17.10625rem; left:0; box-shadow:1.078125rem 0 3.59375rem #203b2120; }.sidebar.mobile-open { display:flex; }.mobile-menu { display:flex!important; }.topbar { height:4.384375rem; padding:0 1.4375rem; }.topbar-right { gap:0.71875rem; }.prototype-label { font-size:0.575rem; }.breadcrumb { gap:0.575rem; font-size:0.71875rem; }main { padding:2.084375rem 1.4375rem 1.4375rem; }.page-heading { align-items:flex-start; margin-bottom:1.86875rem; }.page-heading .button { margin-top:1.29375rem; padding:0.71875rem 0.8625rem; }h1 { font-size:2.15625rem; letter-spacing:-0.0790625rem; }.page-subtitle { font-size:0.71875rem; max-width:15.8125rem; line-height:1.6; margin-top:0.646875rem; }.eyebrow { font-size:0.575rem; letter-spacing:0.1078125rem; }.group-section { padding:1.221875rem 1.15rem 1.365625rem; margin-bottom:1.653125rem; }.group-rail { gap:1.078125rem; }.group-bubble { min-width:4.815625rem; }.bubble-image { width:4.025rem; height:4.025rem; }.section-heading h2 { font-size:0.790625rem; }.section-heading .text-button { font-size:0.646875rem; }.library-controls { justify-content:space-between; }.search-input input { width:9.34375rem; font-size:var(--text-body); }.tabs { gap:1.365625rem; }.tab { font-size:0.646875rem; }.card-body { padding:0.934375rem 0.934375rem 0.646875rem; }.card-media { aspect-ratio:1.1; }.card-status { top:0.575rem; left:0.575rem; }.status { padding:0.2875rem 0.359375rem; }.card-menu { top:0.503125rem; right:0.503125rem; width:1.653125rem; height:1.653125rem; }.story-grid { gap:0.934375rem; }.card-title { font-size:0.790625rem; min-height:2.3rem; }.card-groups { margin-bottom:0.43125rem; }.card-body>p { font-size:0.646875rem; }.card-footer { margin-top:0.934375rem; }.card-footer>span { font-size:0.503125rem; }.card-footer>span>.icon { display:none; }.result-caption { font-size:0.575rem; }.new-story-card { min-height:15.8125rem; }.new-story-card strong { font-size:0.71875rem; }.new-story-card small { font-size:0.575rem; }.page-footer { margin-top:1.796875rem; font-size:0.575rem; }.live-notice,.demo-notice { font-size:0.646875rem; align-items:flex-start; }.groups-grid { gap:0.934375rem; }.group-tile { padding:1.221875rem; }.group-tile h2 { font-size:1.15rem; }.group-tile>p { font-size:0.646875rem; }.group-mini-stories { gap:0.2875rem; }.group-mini-stories>button { width:2.3rem; height:2.875rem; }.group-tile-footer { flex-wrap:wrap; gap:0.71875rem; }.group-add { min-height:17.25rem; }.group-order-panel { padding:1.4375rem; }.group-order-panel h2 { font-size:0.934375rem; }.calendar-heading { flex-wrap:wrap; gap:1.078125rem; }.planning-bottom p { font-size:0.71875rem; }.planning-bottom>.demo-tag { display:none; }
  .editor-dialog { width:calc(100vw - 1.29375rem); height:calc(100dvh - 1.29375rem); max-height:none; border-radius:1.078125rem; margin:0.646875rem; }.editor-header { height:5.60625rem; padding:1.29375rem; gap:0.8625rem; }.editor-heading { gap:0.646875rem; }.editor-heading h2 { font-size:1.078125rem; max-width:16.53125rem; }.editor-symbol { width:2.15625rem; height:2.515625rem; border-radius:0.646875rem; }.editor-symbol>.icon { width:1.29375rem; }.editor-header-right { gap:0.2875rem; }.editor-header-right>.demo-tag { display:none; }.editor-layout { display:block; overflow:auto; }.editor-form { overflow:visible; padding:0 1.509375rem 0.71875rem; }.preview-panel { overflow:visible; border-left:0; border-top:1px solid #e6ecde; padding:1.725rem; }.preview-heading { max-width:22.28125rem; margin:0 auto 1.58125rem; }.preview-note { margin-bottom:0; }.preview-tip { display:none; }.group-picker,.channel-picker { grid-template-columns:1fr 1fr; }.phone-frame { width:18.975rem; height:34.35625rem; }.phone-content h3 { font-size:29px; }.editor-footer { padding:0.8625rem 1.078125rem; }.editor-footer>span { font-size:0.575rem; max-width:9.34375rem; }.editor-footer .button { padding:0.71875rem 0.8625rem; }.editor-footer>div { gap:0.359375rem; }.small-dialog,.integration-dialog,.preview-dialog { width:calc(100vw - 2.15625rem); max-width:43.125rem; max-height:calc(100dvh - 2.15625rem); border-radius:1.221875rem; }.modal-header { padding:1.58125rem 1.509375rem 1.29375rem; }.modal-body { padding:1.509375rem; }.modal-footer { padding:1.15rem 1.509375rem; }.integration-summary { gap:0.646875rem; }.integration-summary>div { padding:0.8625rem; }.modal-footer>.muted { display:none; }.phone-group strong { max-width:120px; }
}
@media(max-width:460px) {main {padding-left:1.078125rem;padding-right:1.078125rem;}h1{font-size:2.0125rem;}.page-heading{gap:0.575rem;flex-wrap:wrap;}.page-heading .button{padding:0.71875rem;}.card-body{padding:0.71875rem;}.card-groups span{font-size:0.503125rem;padding:0.14375rem 0.2875rem;}.card-footer>span{font-size:0.43125rem;}.group-picker,.channel-picker{grid-template-columns:1fr;}.editor-footer>span{display:none;}.editor-footer{justify-content:flex-end;}.group-tile{padding:1.00625rem;}.group-add strong{font-size:0.790625rem;}.new-story-card strong{font-size:0.646875rem;}.new-story-card small{font-size:0.503125rem;} }
.group-choice input { outline:none; position:static; opacity:1; width:0.8625rem; height:0.8625rem; margin:0; accent-color:var(--green); flex-shrink:0; }
.group-choice .choice-check { display:none; }
.article-search-input { display:flex; align-items:center; gap:0.575rem; border:1px solid #dce5d3; padding:0 0.790625rem; border-radius:0.646875rem; }.article-search-input>.icon { width:1.15rem; color:#93a77e; }.field .article-search-input input { border:0; outline:none; box-shadow:none; padding-left:0; }.article-search-input:focus-within { border-color:#96af80; }
:where(.keyboard-navigation) .article-search-input:focus-within { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }
.article-results { padding:0.359375rem; border:1px solid #dce6d0; border-radius:0.71875rem; max-height:17.609375rem; overflow:auto; background:#fff; box-shadow:0 0.359375rem 1.29375rem #283b2510; }.article-results[hidden] { display:none; }.article-results>button { display:flex; gap:0.71875rem; width:100%; align-items:center; text-align:left; padding:0.8625rem; border-radius:0.503125rem; }.article-results>button:hover,.article-results>button[aria-selected="true"] { background:#eef5e6; }.article-results>button>.icon { width:1.221875rem; color:#8aa176; }.article-results>button>.icon:last-child { margin-left:auto; width:1.00625rem; }.article-results strong,.selected-article strong { display:block; font-size:0.8625rem; font-weight:550; color:#5f7e47; }.article-results small,.selected-article small { display:block; font-size:0.71875rem; color:#91a47e; margin-top:0.215625rem; }.selected-article { display:flex; align-items:center; gap:0.71875rem; background:#edf5e6; border:1px solid #cfdfbf; padding:0.8625rem; border-radius:0.646875rem; }.selected-article>.icon { width:1.29375rem; color:#7e9c66; }.selected-article>.icon:last-child { margin-left:auto; width:1.00625rem; }
.detail-cover { width:100%; height:12.9375rem; object-fit:cover; border-radius:0.790625rem; margin-bottom:1.29375rem; }
.review-actions { display:flex; gap:0.503125rem; margin-top:1.00625rem; }.review-actions .button { flex:1; font-size:0.646875rem; padding:0.575rem 0.646875rem; }
.new-story-card { grid-column:1 / -1; min-height:6.9rem; flex-direction:row; gap:1.078125rem; }.new-story-icon { margin:0; }.new-story-card small { margin-left:0.359375rem; }
@media(max-width:874px) { .new-story-card { min-height:6.109375rem; gap:0.71875rem; }.new-story-card small { display:none; } }
.advanced-settings { margin-top:1.15rem; color:#91a37e; font-size:0.71875rem; }.advanced-settings summary { cursor:pointer; padding:0.503125rem 0; }.advanced-settings[open] summary { margin-bottom:0.8625rem; }.detail-image-field { margin:1.078125rem 0 1.58125rem; color:#81976b; font-size:0.790625rem; }.detail-image-field>span { display:flex; justify-content:space-between; margin-bottom:0.71875rem; }.detail-image-field small { font-size:var(--text-caption); color:#a3b28f; }.detail-image-field img { height:7.90625rem; width:100%; object-fit:cover; border-radius:0.646875rem; margin-bottom:0.71875rem; }
/* Keep secondary UI readable while preserving the quiet visual hierarchy. */
.page-subtitle { color:#707a6c; font-size:0.934375rem; }
.nav-label,.eyebrow { color:#788672; }
.group-bubble small,.result-caption,.result-caption span:last-child,.card-body>p,.field-help,.field small,.preview-note { color:#7f8d72; }
.card-body>p { font-size:0.790625rem; }.card-title { font-size:1.00625rem; }.card-footer>span { color:#7e8d70; font-size:0.646875rem; }
.tab { font-size:0.790625rem; color:#78896b; }.group-bubble strong { font-size:0.790625rem; }.section-heading h2 { font-size:0.934375rem; }
.field>span { font-size:0.8625rem; color:#637855; }.field input:not([type="color"]),.field textarea,.field select { font-size:0.8625rem; }
.media-hints { color:#879974; }.editor-section-title>span { color:#8a9b76; }
.preview-heading { color:#81956c; }.preview-tip p { color:#81956c; }
.phone-cta[aria-hidden="true"] { pointer-events:none; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Design review: focused navigation, story ordering and content configuration. */
.sidebar nav { margin-top:3.45rem; }
.profile { padding-top:1.29375rem; border-top:1px solid var(--line); }
.profile .avatar>.icon { width:1.29375rem; height:1.29375rem; }
.library-toolbar { align-items:center; }
.library-controls { margin-left:auto; }
.result-caption { gap:1.15rem; line-height:1.6; }
.result-caption>span:last-child { text-align:right; max-width:19.40625rem; }
.card-body { padding:1.29375rem 1.29375rem 0.8625rem; }
.card-title { min-height:1.58125rem; }
.card-groups { margin-top:1.00625rem; margin-bottom:0; flex-wrap:wrap; }
.card-footer { min-height:2.875rem; margin-top:1.00625rem; gap:0.575rem; }
.card-actions { display:flex; gap:0.503125rem; align-items:center; flex-shrink:0; }
.card-footer .reorder-controls { gap:0.2875rem; }
.card-footer .reorder-controls .icon-button { width:1.796875rem; height:1.796875rem; border-radius:0.503125rem; }
.card-footer .icon-button:disabled { opacity:.28; cursor:default; }
.presentation-field { margin-top:1.653125rem; margin-bottom:0; }
.language-switch { flex-wrap:wrap; justify-content:flex-end; }
.language-switch button { padding:0.359375rem 0.646875rem; }
.image-colors { display:flex; flex-direction:column; gap:0.71875rem; margin-top:-0.215625rem; }
.image-colors>span,.image-colors>small { font-size:0.71875rem; color:#7f8d72; line-height:1.6; }
.color-swatches { display:flex; flex-wrap:wrap; gap:0.71875rem; }
.color-swatches>button { width:2.228125rem; height:2.228125rem; border:0.215625rem solid white; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 0.071875rem #dce5d3; }
.color-swatches>button:hover { box-shadow:0 0 0 0.14375rem #8ba679; }
.field [aria-invalid="true"] { border-color:#b3634e!important; box-shadow:0 0 0 0.215625rem #fdf1ed; }
.field input:disabled { background:#f5f6f2; color:#8f9788; cursor:not-allowed; }
.phone-shade { background:linear-gradient(180deg,#102a1d35 0%,transparent 30%,color-mix(in srgb,var(--story-color) 40%,transparent) 62%,color-mix(in srgb,var(--story-color) 95%,transparent) 100%); }
.phone-cta { color:var(--story-color); }
.phone-story.without-text .phone-eyebrow { display:none; }
.editor-footer #save-story { min-width:12.003125rem; justify-content:center; }
@media(max-width:1265px) {
  .library-controls { margin-left:0; }
  .result-caption>span:last-child { max-width:15.8125rem; }
}
@media(max-width:874px) {
  .sidebar nav { margin-top:2.15625rem; }
  .library-toolbar { gap:1.00625rem; }
  .library-controls,.search-input { width:100%; }
  .result-caption { align-items:flex-start; font-size:0.646875rem; }
  .result-caption>span:last-child { max-width:13.65625rem; }
  .card-body { padding:1.00625rem 0.934375rem 0.71875rem; }
  .card-actions { gap:0.2875rem; }
  .card-footer { flex-wrap:wrap; }
}
@media(max-width:483px) {
  .result-caption { flex-direction:column; gap:0.215625rem; }
  .result-caption>span:last-child { text-align:left; max-width:none; }
  .editor-footer #save-story { min-width:0; }
}
.page-footer span:first-child { display:inline; }
.card-footer { display:flex; flex-wrap:nowrap; align-items:center; flex:0 0 2.875rem; height:2.875rem; min-height:2.875rem; max-height:2.875rem; gap:0.575rem; }
.card-status .status { border:0; background:#fffffff0; padding:0.43125rem 0.575rem; }
.card-status .status>.icon { width:0.790625rem; height:0.790625rem; }
.card-status .status.green { background:#edf4e8f5; }
.card-status .status.blue { background:#edf4f7f5; }
.card-status .status.rose { color:#a77969; background:#faf0ebf5; }
.card-timing { display:flex; align-items:center; flex:1; min-width:0; }
.card-timing>small { color:#718064; font-size:0.646875rem; line-height:1.5; text-align:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.card-actions { justify-content:flex-end; margin-top:0; margin-left:auto; }
@media(max-width:874px) { .card-status .status { padding:0.2875rem 0.359375rem; gap:0.2875rem; } }
.story-card { display:flex; flex-direction:column; }
.card-media { flex-shrink:0; }
.card-body { display:flex; flex:1; flex-direction:column; }
.card-groups { margin-bottom:1.00625rem; }
.card-footer { margin-top:auto; }

/* Refinement: persistent footer, card controls, common selections and cropping. */
.workspace-main { display:flex; flex-direction:column; min-height:100dvh; }
.topbar { flex-shrink:0; }
main { display:flex; flex:1; flex-direction:column; width:100%; margin:0 auto; }
.library,.groups-grid { margin-bottom:2.3rem; }
.story-grid { margin-top:1.725rem; }
.page-footer { margin-top:auto; flex-shrink:0; }
.card-top-actions { position:absolute; top:0.71875rem; right:0.71875rem; display:flex; gap:0.43125rem; }
.card-top-actions>.icon-button { width:2.084375rem; height:2.084375rem; padding:0.43125rem; border-radius:50%; background:#fffffff0; color:#61715b; backdrop-filter:blur(0.71875rem); box-shadow:0 0.071875rem 0.359375rem #17291e0a; }
.card-top-actions>.icon-button:hover { background:#fff; color:#285744; }
.card-top-actions>.icon-button>.icon { width:1.15rem; height:1.15rem; }
.selected-media>img { object-fit:contain; background:#edf2e6; }
.color-swatches>button[aria-pressed="true"] { box-shadow:0 0 0 0.14375rem #285744,0 0 0 0.359375rem #e5eddf; }
.select-control { position:relative; width:100%; min-width:0; }
.select-control>select[hidden] { display:none; }
.select-trigger { position:relative; width:100%; min-height:2.875rem; border:1px solid #dfe7d7; border-radius:0.646875rem; padding:0.71875rem 3.1625rem 0.71875rem 0.8625rem; background:#fff; color:#475a38; text-align:left; font-size:0.8625rem; line-height:1.4; }
.select-trigger>span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.select-chevron { position:absolute; width:1.221875rem; height:1.221875rem; right:1.078125rem; top:50%; margin-top:-0.575rem; color:#849679; transition:transform .16s; }
.select-trigger[aria-expanded="true"] .select-chevron { transform:rotate(180deg); }
.select-trigger:hover { border-color:#aec1a0; }
.select-trigger:focus,.select-trigger[aria-expanded="true"] { border-color:#96af80; }
.select-trigger:disabled { opacity:.5; cursor:not-allowed; }
.select-menu { position:fixed; inset:auto; margin:0; padding:0.359375rem; border:1px solid #dfe7d7; border-radius:0.790625rem; background:#fff; box-shadow:0 0.8625rem 2.3rem #203b211f; overflow-y:auto; z-index:100; }
.select-menu[hidden] { display:none; }
.select-menu:popover-open { display:block; }
.select-menu>[role="option"] { display:block; position:relative; width:100%; padding:0.71875rem 2.15625rem 0.71875rem 0.790625rem; border-radius:0.503125rem; text-align:left; color:#5c7050; font-size:var(--text-control); line-height:1.45; }
.select-menu>[role="option"]:hover,.select-menu>[role="option"]:focus { outline:0; background:#f1f6eb; }
.select-menu>[aria-selected="true"] { background:#eaf2e4; color:#285744; font-weight:550; }
.select-menu>[aria-selected="true"]::after { content:'✓'; position:absolute; right:0.790625rem; }
.select-menu>[role="option"]:disabled { opacity:.4; cursor:not-allowed; }
.group-order-panel>.select-control { max-width:23rem; margin-bottom:0.8625rem; }
.field .field-error,.field-error { display:block; margin:0.359375rem 0 0; color:#ad5848; font-size:0.71875rem; line-height:1.6; }
.media-drop[aria-invalid="true"],.select-trigger[aria-invalid="true"] { border-color:#b3634e!important; box-shadow:0 0 0 0.215625rem #fdf1ed; }
.language-switch button.has-errors { color:#ad5848; background:#fcefe9; }
.validation-summary { margin:0.646875rem 0 0; padding:0 0 0 1.221875rem; }
.validation-summary li { margin-top:0.2875rem; }
.validation-summary button { padding:0.071875rem 0; text-align:left; color:inherit; font-size:0.790625rem; text-decoration:underline; text-underline-offset:0.215625rem; }
.preview-panel>.phone-frame,.preview-panel>#phone-preview { margin-top:0.503125rem; }
.preview-tip { margin-top:1.725rem; }
.crop-dialog { width:min(40.25rem,calc(100vw - 2.0125rem)); max-height:calc(100dvh - 2.0125rem); }
.crop-dialog .modal-header { align-items:center; padding:1.509375rem 1.725rem 1.15rem; }

.crop-dialog .modal-header p { color:#839475; font-size:0.790625rem; line-height:1.5; margin-top:0.43125rem; }
.crop-dialog .modal-header>.icon-button { font-size:1.725rem; font-weight:300; }
.crop-body { padding:1.29375rem 1.725rem; }
.crop-frame { position:relative; width:100%; height:clamp(12.9375rem,40dvh,25.875rem); overflow:hidden; margin:auto; background:#e7ede1; border-radius:0.8625rem; box-shadow:0 0 0 0.071875rem #dce5d4; touch-action:none; cursor:grab; }
.crop-frame.dragging { cursor:grabbing; }
:where(.keyboard-navigation) .crop-frame:focus-visible { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }
.crop-frame>img { position:absolute; max-width:none; max-height:none; pointer-events:none; user-select:none; }
.crop-selection { position:absolute; border:1px solid #ffffffe6; box-shadow:0 0 0 718.678125rem #10201966; overflow:hidden; pointer-events:none; }
.circle-crop .crop-selection { border-radius:50%; }
.crop-handles { position:absolute; pointer-events:none; }
.crop-handle { position:absolute; width:2.0125rem; height:2.0125rem; padding:0; transform:translate(-50%,-50%); pointer-events:auto; touch-action:none; }
.crop-handle[data-crop-handle="n"],.crop-handle[data-crop-handle="s"] { width:calc(100% - 2.0125rem); }
.crop-handle[data-crop-handle="e"],.crop-handle[data-crop-handle="w"] { height:calc(100% - 2.0125rem); }
.crop-handle::after { content:''; position:absolute; width:0.71875rem; height:0.71875rem; left:50%; top:50%; filter:drop-shadow(0 0 0.071875rem #10201999); }
.crop-handle[data-crop-handle="nw"]::after { border-top:0.14375rem solid white; border-left:0.14375rem solid white; }
.crop-handle[data-crop-handle="ne"]::after { transform:translateX(-100%); border-top:0.14375rem solid white; border-right:0.14375rem solid white; }
.crop-handle[data-crop-handle="se"]::after { transform:translate(-100%,-100%); border-bottom:0.14375rem solid white; border-right:0.14375rem solid white; }
.crop-handle[data-crop-handle="sw"]::after { transform:translateY(-100%); border-bottom:0.14375rem solid white; border-left:0.14375rem solid white; }
.crop-handle[data-crop-handle="n"]::after,.crop-handle[data-crop-handle="s"]::after { width:0.8625rem; height:0; transform:translate(-50%,-50%); border-top:0.14375rem solid white; }
.crop-handle[data-crop-handle="e"]::after,.crop-handle[data-crop-handle="w"]::after { width:0; height:0.8625rem; transform:translate(-50%,-50%); border-left:0.14375rem solid white; }
.crop-handle:hover::after,:where(.keyboard-navigation) .crop-handle:focus-visible::after { border-color:#d8efd0; }
.crop-handle[data-crop-handle="nw"],.crop-handle[data-crop-handle="se"],.crop-frame[data-resize="nw"],.crop-frame[data-resize="se"] { cursor:nwse-resize; }
.crop-handle[data-crop-handle="ne"],.crop-handle[data-crop-handle="sw"],.crop-frame[data-resize="ne"],.crop-frame[data-resize="sw"] { cursor:nesw-resize; }
.crop-handle[data-crop-handle="n"],.crop-handle[data-crop-handle="s"],.crop-frame[data-resize="n"],.crop-frame[data-resize="s"] { cursor:ns-resize; }
.crop-handle[data-crop-handle="e"],.crop-handle[data-crop-handle="w"],.crop-frame[data-resize="e"],.crop-frame[data-resize="w"] { cursor:ew-resize; }
.crop-grid { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to right,transparent 33%,#ffffff55 33%,#ffffff55 calc(33% + 0.071875rem),transparent calc(33% + 0.071875rem),transparent 66%,#ffffff55 66%,#ffffff55 calc(66% + 0.071875rem),transparent calc(66% + 0.071875rem)),linear-gradient(to bottom,transparent 33%,#ffffff55 33%,#ffffff55 calc(33% + 0.071875rem),transparent calc(33% + 0.071875rem),transparent 66%,#ffffff55 66%,#ffffff55 calc(66% + 0.071875rem),transparent calc(66% + 0.071875rem)); }
.crop-controls { margin:1.725rem auto 0.575rem; }
.crop-angle { display:grid; grid-template-columns:auto minmax(0,1fr) 3.45rem; align-items:center; gap:1.15rem; font-size:0.790625rem; color:#6e825f; }
.crop-angle-track { position:relative; padding-bottom:0.503125rem; }
.crop-angle-track::before { content:''; position:absolute; left:0.575rem; right:0.575rem; bottom:0; height:0.359375rem; background:repeating-linear-gradient(90deg,#b0bea3 0 0.071875rem,transparent 0.071875rem 10%); pointer-events:none; }
.crop-angle-track::after { content:''; position:absolute; left:50%; bottom:-0.14375rem; width:0.071875rem; height:0.646875rem; background:#6e825f; pointer-events:none; }
.crop-angle input { display:block; width:100%; margin:0; accent-color:#285744; }
.crop-angle output { text-align:right; font-variant-numeric:tabular-nums; }
.crop-angle [data-crop-angle-reset] { user-select:none; }
.crop-dialog .modal-footer { padding:1.15rem 1.725rem; }
.crop-dialog .modal-footer>.text-button { margin-right:auto; font-size:var(--text-control); }
@media(max-width:874px) {
  .card-top-actions { top:0.503125rem; right:0.503125rem; gap:0.2875rem; }
  .card-top-actions>.icon-button { width:1.86875rem; height:1.86875rem; padding:0.359375rem; }
  .preview-tip { display:flex; }
  .crop-dialog .modal-header { padding:1.29375rem; }

  .crop-dialog .modal-footer { padding:1.00625rem; flex-wrap:wrap; }
}

/* Third design review: clear selection, square media and compact contextual actions. */
.group-section { background:transparent; border:0; border-radius:0; padding:0; }
.group-rail { padding:0.43125rem 0; gap:0.8625rem; }
.group-bubble { border-radius:0.934375rem; padding:0.8625rem 0.71875rem 0.71875rem; min-width:6.46875rem; transition:background .18s; }
.group-bubble.selected { background:#e3eddf; }
.group-bubble.selected .bubble-image { border:1px solid transparent; box-shadow:none; }
.group-bubble:not(.selected):hover { background:#eef2e9; }
.group-bubble .bubble-image.all-groups { border-color:transparent; }
.tabs { gap:1.29375rem; flex-wrap:wrap; overflow:visible; }
.library-toolbar { gap:1.00625rem; }
/* Keep the create cell independent of neighboring content and row height. */
.new-story-card { grid-column:auto; aspect-ratio:auto; min-height:0; padding:0; display:block; align-self:start; container-type:inline-size; }
.new-story-content { display:flex; min-height:calc(100cqi / 1.46 + 13.36875rem); padding:1.725rem; flex-direction:column; align-items:center; justify-content:center; gap:1.078125rem; }
.new-story-card strong,.group-add strong { font-size:1.29375rem; text-align:center; max-width:15.8125rem; }
.group-add { gap:1.29375rem; }
.group-add>.icon { width:2.3rem; height:2.3rem; }
.card-open>img,.card-open>video { object-fit:cover; object-position:center; }
.story-card:hover .card-open>img { transform:none; }
img { -webkit-user-drag:none; user-select:none; }
.action-menu { position:fixed; inset:auto; margin:0; min-width:12.9375rem; max-width:min(21.5625rem,calc(100vw - 1.4375rem)); padding:0.359375rem; border:1px solid #dfe7d7; border-radius:0.790625rem; background:white; color:#526b44; box-shadow:0 0.8625rem 2.3rem #203b2126; }
.action-menu>button { display:block; width:100%; padding:0.790625rem 0.934375rem; font-size:var(--text-control); border-radius:0.503125rem; text-align:left; }
.select-menu>button+button,.action-menu>button+button,.article-results>button+button { margin-top:0.2875rem; }
.action-menu>button:hover,.action-menu>button:focus { outline:none; background:#eef4e8; }
.action-menu>p { padding:0.646875rem 0.8625rem; font-size:0.8625rem; line-height:1.6; max-width:17.609375rem; }
.action-menu>.danger-text { color:#a14d40; }
.action-menu>.danger-text:hover,.action-menu>.danger-text:focus { background:#fcf0eb; }
.section-language-bar,.group-editor-language { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:0.8625rem; font-size:0.790625rem; color:#728363; }
.section-language-bar { margin:-0.14375rem 0 1.4375rem; }
.language-switch button { font-size:var(--text-control); padding:0.43125rem 0.71875rem; color:#718064; }
.language-switch button.active { color:#285744; }
.group-editor-language { margin-bottom:1.725rem; }
.selected-media { aspect-ratio:auto; height:15.8125rem; }
.selected-media>img,.selected-media>video { width:100%; height:100%; object-fit:contain; }
.media-drop { min-height:0; }
.group-icon-editor { gap:1.4375rem; }
.group-image-actions { display:flex; flex-wrap:wrap; gap:0.575rem; }
.group-icon-upload { width:6.6125rem; height:6.6125rem; flex-shrink:0; }
.group-icon-upload img { width:100%; height:100%; border-radius:50%; object-fit:contain; }
.crop-format { display:flex; flex-direction:column; gap:0.503125rem; font-size:0.790625rem; color:#71845f; max-width:25.15625rem; margin:1.29375rem auto 0; }
.article-thumb { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:3.234375rem; height:3.234375rem; border-radius:0.503125rem; object-fit:contain; background:#f0f4eb; }
.article-thumb.placeholder { color:#9aab8b; }
.article-thumb.placeholder>.icon { width:1.4375rem; }
:where(.keyboard-navigation) .selected-article:focus-visible { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }
.detail-image-field img,.detail-cover { display:block; height:auto; max-height:25.875rem; object-fit:contain; background:#f2f5ed; }
.detail-image-tools { display:flex; flex-wrap:wrap; gap:0.575rem; }
.detail-product-groups { margin:1.725rem 0; }
.detail-action-fields { margin-top:1.725rem; }
.detail-action-fields h4 { font-size:var(--text-body); font-weight:550; }
.detail-product-groups>.section-heading { gap:0.8625rem; align-items:flex-start; }
.detail-product-groups h4 { font-size:0.8625rem; font-weight:550; }
.detail-product-group { border:1px solid #dfe7d7; border-radius:0.790625rem; background:#fbfcf9; padding:1.15rem; margin-bottom:1.00625rem; }
.product-group-heading { display:flex; justify-content:space-between; align-items:center; gap:0.8625rem; margin-bottom:0.8625rem; }
.product-chip>.article-thumb { width:2.5875rem; height:2.5875rem; }
.phone-frame { height:38.8125rem; }
.square-story { display:flex; flex-direction:column; background:white; }
.phone-square-media { aspect-ratio:1; width:100%; overflow:hidden; flex-shrink:0; background:#edf2e6; }
.phone-square-media>img,.phone-square-media>video { width:100%; height:100%; object-fit:contain; }
.square-story .phone-no-image { position:static; height:100%; }
.square-story .phone-content { position:static; padding:22px 18px 30px; color:#fff; background:var(--story-color); flex:1; overflow:auto; }
.square-story.default-template .phone-content { color:#344437; background:white; }
.square-story .phone-content h3 { font-size:25px; line-height:1.25; }
.square-story .phone-content>p { margin-top:10px; color:inherit; opacity:.85; }
.square-story .phone-cta { margin-top:18px; }
.square-story .phone-home { background:#9eab95; }
/* Both templates share the complete 402 by 874-point iPhone preview. */
.phone-frame:has(.story-screen) { container-type:inline-size; height:auto; }
.phone-device-screen>.phone-story.story-screen { width:100%; height:100%; min-height:0; border-radius:0; }
.story-screen { --story-background:var(--story-color); }
.phone-story.fresh-template { --fresh-unit:1px; }
/* One white backing for the 123-point chrome and 402-point image prevents scaled seams. */
.story-preview-canvas { position:absolute; top:0; left:0; width:402px; height:874px; display:flex; flex-direction:column; background:linear-gradient(to bottom,white 0 525px,var(--story-background) 525px); }
/* The complete iPhone reference includes 62-point status and 34-point bottom safe areas. */
.story-status-bar { height:62px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 38px; background:white; color:black; }
.story-status-battery { display:block; width:30px; height:15px; flex-shrink:0; }
.story-player-header { height:61px; flex-shrink:0; display:flex; align-items:center; gap:16px; padding:16px; background:white; color:black; }
.story-player-progress { min-width:0; flex:1; display:flex; align-items:center; gap:8px; }
.story-player-progress>i { position:relative; display:block; height:2px; min-width:0; flex:1; background:#aaa; }
.story-player-progress>i::before { content:""; display:block; height:100%; width:var(--segment-fill); background:black; }
.story-player-close { display:block; width:29px; height:29px; padding:0; flex-shrink:0; border-radius:50%; }
.story-player-close>svg { display:block; width:100%; height:100%; }
.story-preview-body { display:flex; flex-direction:column; flex:1; min-height:0; }
.story-bottom-safe-area { height:34px; flex-shrink:0; }
.story-screen .phone-square-media { position:relative; background:white; }
.fresh-draft-ribbon { position:absolute; top:16px; right:0; width:147.36px; height:32px; padding-left:10px; background:#555555a8; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9.4% 50%); color:white; font:italic 700 22px/32px Arial,sans-serif; text-align:center; }
.project-color-error { color:#b65743; font-size:var(--text-control); line-height:1.5; }
.story-preview-unavailable { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:32px; background:var(--canvas); color:var(--ink); text-align:center; font-size:18px; line-height:1.45; }
.story-preview-unavailable>.icon { width:28px; height:28px; flex-shrink:0; }
.standalone-preview:focus { outline:none; }
.story-preview-stage { display:grid; grid-template-columns:2.3rem minmax(0,1fr) 2.3rem; align-items:center; gap:0.575rem; }
.story-preview-stage>.phone-frame { max-width:100%; }
.story-preview-step { width:2.3rem; height:2.73125rem; border:1px solid #e1e8da; border-radius:0.790625rem; background:white; color:#627b52; }
.story-preview-step:hover:not(:disabled) { background:#eaf1e4; }
.story-preview-step:disabled { opacity:.3; cursor:default; }
.standalone-preview>.story-preview-position { margin-top:1.00625rem; font-size:0.790625rem; color:#788b69; }
.standalone-preview .phone-frame:has(.story-screen) { max-width:100%; width:min(18.975rem,calc((100dvh - 17.96875rem) * var(--story-device-width) / var(--story-device-height))); }
@media(min-width:875px) {
  .preview-panel:has(.story-screen) { container-type:size; }
  .preview-panel .phone-frame:has(.story-screen) { width:min(18.975rem,calc((100cqh - 7.90625rem) * var(--story-device-width) / var(--story-device-height))); }
}

/* Extend the curve into the shared accent surface to avoid subpixel seams when scaled. */
.fresh-story-curve { position:relative; z-index:1; display:block; width:100%; height:calc(18 * var(--fresh-unit)); margin-top:calc(-16 * var(--fresh-unit)); margin-bottom:calc(-2 * var(--fresh-unit)); flex-shrink:0; fill:var(--story-color); pointer-events:none; }
.phone-story.fresh-template .phone-content { display:flex; flex-direction:column; min-height:0; padding:0 0 16px; overflow:hidden; background:transparent; }
.fresh-story-copy { display:flex; flex-direction:column; gap:calc(16 * var(--fresh-unit)); min-height:0; overflow:hidden; flex:0 1 auto; padding:max(16px,calc(32 * var(--fresh-unit))) max(8px,calc(20 * var(--fresh-unit))) 8px; text-align:center; }
/* Match the rendered iOS reference's Black headline and heavier subtitle/action lettering. */
.phone-story.fresh-template .fresh-story-copy h3 { margin:0; color:white; font-size:calc(48 * var(--fresh-unit)); font-weight:1000; line-height:1.06; letter-spacing:normal; white-space:pre-wrap; }
.phone-story.fresh-template .fresh-story-copy p { margin:0 calc(5 * var(--fresh-unit)); color:white; opacity:1; font-size:calc(18 * var(--fresh-unit)); font-weight:860; line-height:1.2; white-space:pre-wrap; text-wrap:wrap; }
.fresh-story-copy>h3,.fresh-story-copy>p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--fresh-lines,unset); flex-shrink:0; overflow:hidden; text-overflow:ellipsis; text-wrap:balance; overflow-wrap:break-word; word-break:normal; hyphens:none; }
.fresh-story-copy>[hidden] { display:none; }
.phone-story.fresh-template .phone-cta { flex-direction:column; justify-content:center; gap:8px; flex-shrink:0; margin:auto 0 0; padding:0 max(8px,calc(20 * var(--fresh-unit))); border:0; border-radius:0; background:transparent; color:white; font-size:calc(18 * var(--fresh-unit)); font-weight:860; line-height:1.25; text-align:center; }
.phone-story.fresh-template .phone-cta>.fresh-story-chevron { width:24px; height:12px; }
.phone-story.fresh-template .phone-cta>span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone-story.fresh-template .phone-home { display:none; }
.story-sort-surface:has(.story-screen) { flex:0 0 auto; }
.story-sort-preview:has(.story-screen) { display:block; container-type:inline-size; }
.story-order-dialog .phone-frame:has(.story-screen) { min-height:0; flex:none; display:block; }
/* Keep the existing Default content treatment inside the shared native canvas. */
.phone-story.default-template { --story-background:white; }
.phone-story.default-template .phone-content { min-height:0; padding:35px 29px 48px; overflow:auto; }
.phone-story.default-template .phone-content h3 { font-size:40px; line-height:1.25; font-weight:600; letter-spacing:-1.76px; }
.phone-story.default-template .phone-content>p { margin-top:16px; font-size:16px; line-height:1.6; }
.phone-story.default-template .phone-cta { margin-top:29px; padding:14px 18px; font-size:14px; border-radius:13px; }
.phone-story.default-template .phone-cta .icon { width:21px; height:21px; }
.editor-detail-preview { background:white; border:1px solid #dfe7d7; border-radius:0.8625rem; padding:1.15rem; margin-bottom:1.58125rem; }
.editor-detail-preview h3 { font-size:1.15rem; }
.editor-detail-preview .detail-body { white-space:pre-wrap; margin:0.8625rem 0; font-size:0.8625rem; line-height:1.7; }
.detail-preview-group { border-top:1px solid #e7edde; margin-top:1.29375rem; padding-top:1.15rem; }
.detail-preview-group>h4 { font-size:0.934375rem; margin-bottom:0.8625rem; }
@media(max-width:874px) {
  .new-story-content { min-height:calc(100cqi / 1.1 + 11.5rem); }
  .tabs { gap:1.221875rem; }
  .new-story-card strong,.group-add strong { font-size:1.078125rem; }
  .group-bubble { min-width:5.75rem; padding:0.71875rem 0.575rem; }
  .detail-product-group { padding:0.934375rem; }
  .detail-product-groups>.section-heading { flex-direction:column; }
  .phone-frame { height:36.65625rem; }
}
/* Reordering preserves existing cells and suppresses competing hover movement. */
.is-reordering { overflow-anchor:none; }
.is-reordering>.story-card,.is-reordering>.group-tile:not(.group-add) { transform:none; transition:none; }
.group-tile:has(.group-edit) { position:relative; display:flex; flex-direction:column; min-width:0; }
.group-edit { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-width:100%; overflow:hidden; overflow-wrap:anywhere; padding:0; text-align:left; }
.group-edit::after { content:''; position:absolute; inset:0; border-radius:var(--card-radius); }
.group-edit:focus-visible { outline:0; }
:where(.keyboard-navigation) .group-edit:focus-visible::after { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }
.group-tile-top>.icon-button,.group-mini-stories>button,.group-tile-footer button { position:relative; z-index:1; }

/* Keep the workspace neutral until the server has confirmed the session state. */

/* Account access, sign-in form and explicit signed-out view. */
.profile { padding:1.15rem 0 0; }
.profile-button { display:flex; align-items:center; gap:0.71875rem; width:100%; padding:0.71875rem 0.575rem; border-radius:0.71875rem; text-align:left; transition:background .16s; }
.profile-button:hover,.profile-button[aria-expanded="true"] { background:#f0f4ed; }
:where(.keyboard-navigation) .profile-button:focus-visible { outline:var(--focus-width) solid var(--focus-color); }
.profile-copy { min-width:0; flex:1; }
.profile-copy>strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.profile-copy>small { font-weight:400; }
.profile-action { display:flex; flex-shrink:0; color:#8a948b; margin-left:auto; }
.profile-action>.icon { width:1.29375rem; height:1.29375rem; }
.profile-chevron { transition:transform .16s; }
.profile-button[aria-expanded="true"] .profile-chevron { transform:rotate(180deg); }
.action-menu>button:has(.menu-icon) { display:flex; align-items:center; gap:0.71875rem; }
.menu-icon { display:flex; color:#7c8e70; }
.menu-icon>.icon { width:1.221875rem; height:1.221875rem; }
.signed-out-state { display:flex; flex:1; min-height:30.1875rem; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.875rem 1.4375rem; }
.signed-out-state h1 { font-size:2.15625rem; }
.signed-out-state p { margin:0.8625rem 0 1.725rem; color:#7c8c70; max-width:26.59375rem; font-size:0.8625rem; line-height:1.7; }
.signed-out-state .demo-entry { margin-top:1.29375rem; font-size:0.790625rem; }
.login-dialog .modal-header { align-items:center; }
.login-dialog .modal-header>.icon-button { margin:0; }
.login-dialog .modal-body { padding-bottom:1.4375rem; }
.login-dialog #login-submit { min-width:7.90625rem; justify-content:center; }
@media(max-width:1150px) { .profile-button { gap:0.503125rem; padding:0.71875rem 0.359375rem; } }
/* Keep editor chrome independent of uploaded media and scrollable content. */
.editor-dialog { height:min(64.6875rem,calc(100dvh - 4.3125rem)); }
.editor-layout { flex:1 1 0; grid-template-rows:minmax(0,1fr); min-width:0; }
/* Keep offscreen file controls inside the form scroll container. */
.editor-form { position:relative; }
.editor-form,.preview-panel { min-width:0; min-height:0; }
.editor-footer { flex:0 0 5.4625rem; height:5.4625rem; min-height:5.4625rem; max-height:5.4625rem; overflow:hidden; }
.editor-footer>span { min-width:0; overflow:hidden; }
.editor-footer>span>span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.editor-footer>div { flex-shrink:0; }
.card-groups { flex-wrap:nowrap; overflow:hidden; }
.card-groups>span { flex:0 0 auto; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-groups>span[hidden] { display:none; }
.phone-cta { text-decoration:none; }
.add-product-group { border-color:#b9cba9!important; background:#edf4e6!important; color:#426137!important; }
.product-group-actions,.detail-order-controls { display:flex; align-items:center; gap:0.215625rem; flex-shrink:0; }
.detail-order-controls { border-right:1px solid #dfe7d7; padding-right:0.359375rem; }
.detail-order-controls .icon-button { width:1.940625rem; height:1.940625rem; padding:0.359375rem; }
.detail-order-controls .icon-button:disabled { opacity:.25; cursor:default; }
.selected-products>.product-chip { gap:0.503125rem; }
.selected-products .product-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.selected-products .product-chip>.icon-button { margin-left:0; flex-shrink:0; }
@media(max-width:874px) {
  .editor-dialog { height:calc(100dvh - 1.29375rem); }
  .editor-footer { flex-basis:4.8875rem; height:4.8875rem; min-height:4.8875rem; max-height:4.8875rem; }
  .selected-products>.product-chip { flex-wrap:wrap; }
  .selected-products .product-name { flex-basis:calc(100% - 3.953125rem); }
  .selected-products .detail-order-controls { margin-left:auto; }
}
.crop-formats { display:flex; flex-wrap:wrap; gap:0.43125rem; margin-top:1.29375rem; }
.crop-formats>button { min-height:2.44375rem; padding:0.503125rem 0.8625rem; border:1px solid #dce5d4; border-radius:0.503125rem; color:#71845f; background:#fafcf7; font-size:var(--text-control); }
.crop-formats>button:hover { background:#eef4e7; }
.crop-formats>button[aria-pressed="true"] { border-color:#73975e; color:#365d2b; background:#eaf2e2; box-shadow:0 0 0 0.071875rem #73975e; }

/* The dialog variant keeps the Story templates separate from device chrome. */
.story-order-button { white-space:nowrap; }
.story-order-button>.icon { width:1.078125rem; height:1.078125rem; }
.story-order-dialog { --story-sort-gap:1.725rem; --story-sort-inset:2.0125rem; --story-sort-card-width:clamp(7.475rem,min(62vw,calc((100dvh - 25.875rem) * 402 / 751)),16.24375rem); width:min(92rem,calc(100vw - 3.45rem)); max-width:none; height:fit-content; max-height:calc(100dvh - 3.45rem); overflow:hidden; }
.story-order-dialog[open] { display:flex; flex-direction:column; }
.story-order-dialog>.modal-header { flex-shrink:0; padding:1.725rem 2.0125rem 1.15rem; border-bottom:0; align-items:center; }

.story-order-dialog>.modal-header>.icon-button { margin:0; width:2.5875rem; height:2.5875rem; }
.story-order-summary { flex-shrink:0; padding:0 2.0125rem 1.4375rem; border-bottom:1px solid var(--line); }
.story-order-group { display:flex; align-items:center; gap:0.8625rem; color:var(--ink); font-size:1.00625rem; line-height:1.4; }
.story-order-group-image { width:2.3rem; height:2.3rem; flex:0 0 2.3rem; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#edf2e6; color:#65735d; }
.story-order-group-image>img { width:100%; height:100%; object-fit:cover; }
.story-order-group-image>.icon { width:1.29375rem; height:1.29375rem; }
.story-order-group-name { min-width:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.story-order-summary small { font-size:0.790625rem; font-weight:400; color:#65735d; }
.story-order-body { position:relative; display:flex; flex:0 1 auto; min-height:0; min-width:0; overflow:auto hidden; overscroll-behavior:contain; background:#f6f8f2;  }
.story-sort-strip { position:relative; display:flex; flex:0 0 auto; align-items:flex-start; justify-content:center; gap:var(--story-sort-gap); width:max-content; min-width:100%; padding:1.725rem var(--story-sort-inset) 1.15rem; }
.story-sort-card { width:var(--story-sort-fit-width,var(--story-sort-card-width)); flex:0 0 var(--story-sort-fit-width,var(--story-sort-card-width)); display:flex; flex-direction:column; gap:0.71875rem; user-select:none; -webkit-touch-callout:none; cursor:grab; }
.story-sort-surface { overflow:hidden; border:0; border-radius:1.15rem; background:transparent; box-shadow:0 0.575rem 1.725rem #00000024; transform-origin:50% 60%; }
.story-sort-preview { pointer-events:none; }
.story-template-frame { position:relative; width:100%; aspect-ratio:402 / 717; overflow:hidden; container-type:inline-size; }
.story-template-frame>.story-screen { width:100%; height:100%; min-height:0; border-radius:0; background:var(--story-background); }
.story-template-canvas { position:absolute; top:0; left:0; width:402px; height:717px; display:flex; flex-direction:column; background:var(--story-background); transform:scale(var(--story-device-scale,0)); transform-origin:top left; }
/* Match the iPhone's bottom safe area without adding device chrome. */
.story-order-dialog .story-template-frame { aspect-ratio:402 / 751; }
.story-order-dialog .story-template-canvas { height:751px; padding-bottom:34px; }
.story-sort-handle { width:3.1625rem; height:2.44375rem; min-height:2.44375rem; align-self:center; border-radius:0.575rem; display:grid; place-items:center; color:#65735d; cursor:grab; touch-action:none; background:transparent; }
.story-sort-handle:hover { color:var(--green); }
.story-sort-handle:focus,.story-sort-handle:focus-visible { outline:none; box-shadow:none; }
.sort-grip { display:grid; grid-template-columns:repeat(3,0.215625rem); gap:0.2875rem; }
.sort-grip i { width:0.215625rem; height:0.215625rem; background:currentColor; border-radius:50%; }
.story-sort-origin .story-sort-surface { opacity:.18; }
:where(.keyboard-navigation) .story-sort-card:has(.story-sort-handle:focus-visible) .story-sort-surface,
:where(.keyboard-navigation) .story-sort-keyboard .story-sort-surface { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }
.story-sort-floating { position:fixed; z-index:5; margin:0; pointer-events:none; cursor:grabbing; will-change:transform; }
.story-sort-floating .story-sort-surface { box-shadow:0 1.00625rem 2.3rem #00000052; }
.is-story-dragging,.is-story-dragging * { cursor:grabbing!important; }
.story-order-footer { flex-shrink:0; min-height:5.4625rem; padding:1.15rem 2.0125rem; justify-content:flex-end; gap:1.15rem; }
.story-order-footer>div { display:flex; align-items:center; gap:0.71875rem; margin-left:auto; }
.story-order-error { flex-shrink:0; max-height:5.75rem; overflow:auto; margin:0; border-radius:0; padding:0.8625rem 2.0125rem; }
.order-discard-dialog { width:min(34.5rem,calc(100vw - 2.875rem)); }
.order-discard-dialog>div { flex-wrap:wrap; }
@media(max-width:598px) {
  .order-discard-dialog>div>.button { flex:1 1 auto; }
  .order-discard-dialog>div>.button.primary { flex-basis:100%; }
}
@media(min-width:875px) {
  .story-order-body { container-type:inline-size; }
  .story-sort-strip { --story-sort-fit-width:min(var(--story-sort-card-width),calc((100cqw - 2 * var(--story-sort-inset) - (var(--story-sort-visible-count) - 1) * var(--story-sort-gap) - 0.071875rem) / var(--story-sort-visible-count))); }
}
@media(max-width:874px) {
  .story-order-dialog { --story-sort-gap:1.4375rem; --story-sort-inset:1.4375rem; width:calc(100vw - 1.725rem); max-height:calc(100dvh - 1.725rem); border-radius:1.15rem; }
  .story-order-dialog>.modal-header { padding:1.4375rem 1.4375rem 0.8625rem; }

  .story-order-summary { padding:0 1.4375rem 1.15rem; }
  .story-sort-strip { padding:1.4375rem var(--story-sort-inset) 0.8625rem; }
  .story-order-footer { padding:1.00625rem 1.15rem; gap:0.575rem; }
  .story-order-footer>div { gap:0.575rem; }
  .library-controls { gap:0.575rem; }
  .library-controls .search-input { flex:1; min-width:0; }
  .library-controls .search-input input { width:100%; min-width:0; }
}
@media(max-height:690px) {
  .story-order-dialog>.modal-header { padding-top:0.8625rem; padding-bottom:0.575rem; }
  .story-order-summary { padding-bottom:0.8625rem; }
  .story-sort-strip { padding-top:0.8625rem; padding-bottom:0.575rem; }
  .story-order-footer { min-height:4.3125rem; padding-top:0.71875rem; padding-bottom:0.71875rem; }
}
@media(max-height:552px) {
  .story-order-dialog { --story-sort-card-width:clamp(3.1625rem,calc((100dvh - 18.6875rem) * 402 / 751),10.0625rem); max-height:calc(100dvh - 1.725rem); }
}
/* Calendar and time popovers share the form controls and menu palette. */
.datetime-control { position:relative; min-width:0; }
.datetime-control>input[hidden] { display:none; }
.datetime-trigger { width:100%; min-height:3.090625rem; display:flex; align-items:center; justify-content:space-between; gap:0.8625rem; border:1px solid #dbe3d1; border-radius:0.575rem; padding:0.71875rem 0.934375rem; background:#fff; color:#52684a; text-align:left; font:inherit; font-size:var(--text-control); }
.datetime-trigger>svg { width:1.29375rem; height:1.29375rem; flex-shrink:0; color:#8b9c7f; }
.datetime-trigger:hover:not(:disabled) { border-color:#a7b998; }
.datetime-trigger[aria-expanded="true"] { border-color:#73975e; }
.datetime-trigger:disabled { opacity:.45; cursor:default; }
.datetime-trigger[aria-invalid="true"] { border-color:#bf6552; background:#fffaf7; }
.datetime-menu { position:fixed; inset:auto; margin:0; width:min(21.5625rem,calc(100vw - 1.725rem)); padding:1.00625rem; border:1px solid #dfe6d6; border-radius:1.00625rem; background:#fff; color:#52684a; box-shadow:0 0.8625rem 2.875rem #172a2025; font-size:0.8625rem; z-index:20; }
.datetime-menu[hidden] { display:none; }
.date-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:0.575rem; margin-bottom:0.8625rem; }
.date-picker-heading>strong { font-size:var(--text-control); font-weight:600; }
.date-picker-heading .icon-button { width:2.15625rem; height:2.15625rem; font-size:1.725rem; }
.date-picker-weekdays,.date-picker-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0.2875rem; }
.date-picker-weekdays { color:#9aa88e; text-align:center; margin-bottom:0.43125rem; font-size:var(--text-caption); }
.date-picker-grid button { display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:0.575rem; font-size:var(--text-control); }
.date-picker-grid button:hover:not(:disabled),.time-picker-list button:hover { background:#edf3e6; }
.date-picker-grid button.selected,.time-picker-list button[aria-selected="true"] { background:#285744; color:#fff; }
.date-picker-grid button[aria-current="date"] { box-shadow:inset 0 0 0 0.071875rem #a4b696; }
.date-picker-grid button:disabled { opacity:.25; cursor:default; }
.date-picker-footer { display:flex; align-items:center; justify-content:space-between; gap:0.575rem; margin-top:1.00625rem; padding-top:0.8625rem; border-top:1px solid #edf0e8; }
.date-picker-footer .button { flex:1; justify-content:center; }
.time-picker-columns { display:grid; grid-template-columns:1fr 1fr; gap:0.8625rem; }
.time-picker-columns strong { display:block; padding:0.14375rem 0 0.71875rem; text-align:center; font-size:0.790625rem; font-weight:500; color:#8a9a7d; }
.time-picker-list { max-height:13.65625rem; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:0.2875rem; padding:0.215625rem;  }
.time-picker-list button { flex-shrink:0; padding:0.646875rem; border-radius:0.575rem; text-align:center; font-size:var(--text-control); }
.story-player-chrome { height:123px; flex-shrink:0; background:white; border:0; box-shadow:none; }
.story-player-chrome>.story-status-bar,.story-player-chrome>.story-player-header { background:transparent; border:0; box-shadow:none; }
/* The native vector body and screen share one transform, including all corner geometry. */
.phone-frame:has(.story-screen) { position:relative; height:auto; aspect-ratio:var(--story-device-width)/var(--story-device-height); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.phone-device-canvas { position:absolute; top:0; left:0; width:calc(var(--story-device-width) * 1px); height:calc(var(--story-device-height) * 1px); transform:scale(var(--story-device-scale,0)); transform-origin:top left; filter:drop-shadow(0 18px 28px #14211b25); }
/* Scale from the container even before JavaScript measures a newly rendered preview. */
@supports (transform:scale(calc(1px / 1px))) {
  .phone-device-canvas { transform:scale(calc(100cqw / (var(--story-device-width) * 1px))); }
  .story-template-canvas { transform:scale(calc(100cqw / 402px)); }
}
.phone-device-body { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.phone-device-screen { position:absolute; overflow:hidden; }
.story-sort-surface:has(.phone-device-canvas) { border-radius:18% / 8.62%; overflow:visible; }
.story-status-bar { position:relative; }
.story-dynamic-island { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:126px; height:37px; border-radius:22px; background:#030303; }
.story-dynamic-island>i { position:absolute; top:13px; right:13px; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 42% 35%,#1c2936 0,#0b1018 30%,#030405 70%); }
#story-form input:disabled,#story-form textarea:disabled { color:#627258; -webkit-text-fill-color:#627258; opacity:.85; }
#media-drop[aria-disabled="true"] { cursor:default; }
.sidebar-language { padding:0.2875rem 0.575rem 0; }
.sidebar-language+.profile { margin-top:0.575rem; }
.ui-language-choice { display:flex; align-items:center; gap:0.2875rem; }
.ui-language-choice>button { padding:0.503125rem 0.646875rem; border-radius:0.503125rem; font-size:var(--text-control); color:#718064; white-space:nowrap; }
.ui-language-choice>button:hover { background:#f0f5eb; color:#49673c; }
.ui-language-choice>button[aria-pressed="true"] { background:#eaf1e3; color:#285744; font-weight:600; }
:where(.keyboard-navigation) .ui-language-choice>button:focus-visible { outline:var(--focus-width) solid var(--focus-color); outline-offset:var(--focus-offset); }
.language-divider { color:#a1ae97; font-size:0.8625rem; }
.story-card,.group-tile:not(.group-add) { cursor:pointer; }
.action-menu>hr { height:0.071875rem; border:0; background:#e3e8de; margin:0.43125rem 0.575rem; }
.action-menu>button { display:flex; align-items:center; gap:0.71875rem; }
.menu-check { width:1.15rem; height:1.15rem; margin-left:auto; flex-shrink:0; }
.menu-check svg { display:block; width:100%; height:100%; }
.article-image-dialog { width:min(37.375rem,calc(100vw - 2.3rem)); }
.article-image-dialog .modal-body { min-height:10.78125rem; }
.article-image-dialog .article-results { max-height:min(25.875rem,45dvh); box-shadow:none; }
.article-image-dialog .article-results>button { min-height:4.3125rem; }
.article-image-dialog .article-results>button>span { min-width:0; overflow-wrap:anywhere; }
.article-image-dialog .field-help { margin-bottom:0.8625rem; }
/* Keep every image action in one stable, contextual control group. */
.story-media-field { overflow:hidden; border:1px solid #dce5d4; border-radius:0.8625rem; background:#fff; }
.story-media-field .media-drop { margin:0; border:0; border-radius:0; }
.story-media-field:has(.media-drop[aria-invalid="true"]) { border-color:#b3634e; }
.story-media-field .media-drop[aria-invalid="true"] { box-shadow:none; }
.story-media-field+.field-error { margin-top:0.575rem; }
.media-actions { display:flex; align-items:center; flex-wrap:wrap; gap:0.43125rem 0.71875rem; padding:0.575rem; border-top:1px solid #e3e9dd; }
.media-source-actions { display:flex; align-items:center; flex-wrap:wrap; gap:0.2875rem; min-width:0; }
.media-crop-action { margin-left:auto; padding-left:0.71875rem; border-left:1px solid #e3e9dd; }
.media-action { display:inline-flex; justify-content:center; align-items:center; gap:0.503125rem; min-height:2.5875rem; padding:0.575rem 0.71875rem; border-radius:0.503125rem; color:#455c3b; font-size:var(--text-control); line-height:1.3; text-align:left; }
.media-action>.icon { width:1.15rem; height:1.15rem; flex-shrink:0; }
.media-action:hover:not(:disabled) { background:#eef4e8; }
.media-action:active:not(:disabled) { background:#e2ecda; }
.media-action:disabled { color:#899580; }
@media(max-width:621px) {
  .media-actions { gap:0.2875rem; }
  .media-crop-action { margin-left:0; padding-left:0; border-left:0; }
  .media-action { min-height:3.1625rem; }
}

/* Decorative iPhone status details use the same native scale as the Story. */
.story-status-time { font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:18px; font-weight:650; letter-spacing:-.25px; line-height:1; font-variant-numeric:tabular-nums; }
.story-status-connection { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.story-status-signal { display:block; width:22px; height:15px; flex-shrink:0; }
.story-status-network { font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:15px; font-weight:650; letter-spacing:-.6px; line-height:1; }

/* Real, create and loading cells share the same image and compact content dimensions. */
.card-media { aspect-ratio:var(--story-card-media-ratio,1.46); }
:root { --story-card-body-size:10.925rem; --story-card-media-ratio:1.46; --page-inset:3.090625rem; }
.card-body { flex:none; display:flex; flex-direction:column; gap:0; height:var(--story-card-body-size); min-height:var(--story-card-body-size); padding:0; }
.card-copy { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:0.2875rem; padding:0.8625rem 1.15rem 0.575rem; }
.card-title { flex-shrink:0; align-self:start; min-height:0; max-height:2.5875rem; line-height:1.29375rem; overflow-wrap:anywhere; }
.card-copy>.card-subtitle { flex-shrink:0; min-width:0; margin:0; font-size:0.790625rem; line-height:1.00625rem; color:#65735d; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.card-copy:has(.card-timing)>.card-subtitle { -webkit-line-clamp:1; }
.card-copy>.card-timing { flex:0 0 auto; min-width:0; margin-top:auto; padding-top:0.2875rem; }
.card-timing>small { display:block; min-width:0; color:#65735d; font-size:0.646875rem; line-height:0.8625rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.card-footer { flex:0 0 3.234375rem; height:3.234375rem; min-height:3.234375rem; max-height:3.234375rem; align-items:center; margin:0 1.15rem; padding:0.8625rem 0; border-top:1px solid var(--line); }
.card-footer .card-groups { width:100%; height:1.4375rem; min-height:1.4375rem; margin:0; overflow:hidden; flex-wrap:nowrap; }
.card-footer .card-groups>span { color:#65735d; font-size:0.646875rem; line-height:1.00625rem; padding:0.215625rem 0.575rem; border-radius:0.359375rem; }
.new-story-content { min-height:calc(100cqi / var(--story-card-media-ratio) + var(--story-card-body-size)); }
.story-loading-card { pointer-events:none; box-shadow:none; }
.story-loading-card:hover { transform:none; }
.loading-surface { background:#e6eae4; border-color:transparent; color:transparent; }
.loading-surface>.icon { visibility:hidden; }
.loading-text { position:relative; display:inline-block; max-width:100%; vertical-align:baseline; }
.loading-text>span { visibility:hidden; }
.loading-text::after { content:""; position:absolute; left:0; right:0; top:50%; height:.6em; transform:translateY(-50%); border-radius:0.215625rem; background:#dce1d9; }
.startup-view .page-heading { pointer-events:none; }
.startup-view .group-bubble { pointer-events:none; }
.startup-view .bubble-image { background:#e6eae4; border-color:transparent; }
.startup-view .library-toolbar { min-height:3.234375rem; }
.startup-view .tabs { visibility:hidden; }
.startup-view .search-input { position:relative; border-color:transparent; background:#e6eae4; }
.startup-view .search-input input::placeholder { color:transparent; }
.startup-search-label { position:absolute; left:2.515625rem; right:0.8625rem; overflow:hidden; font-size:0.71875rem; line-height:1.078125rem; }
.startup-view .search-input>.icon { visibility:hidden; }
.startup-profile .profile-button { width:100%; pointer-events:none; }
.startup-profile .avatar { background:#e6eae4; }
.startup-profile .profile-copy strong,.startup-profile .profile-copy small { width:fit-content; }
.version-button { display:block; max-width:calc(100% - 1.86875rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 0 0 0.934375rem; padding:0.215625rem 0; color:#858e80; font-size:0.71875rem; font-variant-numeric:tabular-nums; }
.version-button:hover { color:var(--green); text-decoration:underline; }
.environment-info { margin:0; display:grid; gap:1.4375rem; }
.environment-info dt { color:#7b8872; font-size:0.790625rem; margin-bottom:0.43125rem; }
.environment-info dd { margin:0; font-size:0.934375rem; overflow-wrap:anywhere; }
.startup-view .button.loading-surface { color:transparent; background:#e6eae4; border-color:transparent; opacity:1; }
.remove-image-action { color:#a95343; }
.group-mini-stories { display:flex; min-width:0; overflow:clip; align-items:flex-start; gap:0.575rem; height:calc(var(--group-preview-width) * 717 / 402); min-height:calc(var(--group-preview-width) * 717 / 402); flex:0 0 calc(var(--group-preview-width) * 717 / 402); margin:1.15rem 0; padding:0; }
.group-mini-stories>span { align-self:center; }
.group-story-preview { position:relative; flex:0 0 var(--group-preview-width); min-width:0; width:var(--group-preview-width); border-radius:0.43125rem; }
.group-story-preview>.story-template-frame { width:100%; pointer-events:none; }
.group-mini-stories .group-story-open { position:absolute; inset:0; width:100%; height:100%; border-radius:0.43125rem; z-index:2; background:transparent; }
:where(.keyboard-navigation) .group-story-open:focus-visible { outline:var(--focus-width) solid var(--focus-color); outline-offset:calc(-1 * var(--focus-offset)); }
.preview-panel { scrollbar-gutter:stable; }
.phone-device-canvas { filter:drop-shadow(0 14px 16px #14211b24); }
.story-preview-stage { min-height:0; }
.story-preview-position { font-variant-numeric:tabular-nums; }
@media(max-width:874px) {
  :root { --story-card-media-ratio:1.1; }
}
[hidden] { display:none!important; }
.group-story-preview>.story-template-frame { border-radius:0.43125rem; }
/* Match the backing paint to the native image and text areas at every scale. */
.group-story-preview .fresh-template { --story-background:linear-gradient(white calc(100% * 402 / 717),var(--story-color) 0); }
.reauth-description { margin-bottom:1.4375rem; color:#718064; font-size:0.8625rem; line-height:1.6; }
.sidebar-bottom>.profile { margin-top:0.2875rem; }
.group-rail>.group-bubble { --group-choice-width:6.46875rem; flex:0 0 var(--group-choice-width); width:var(--group-choice-width); min-width:var(--group-choice-width); max-width:var(--group-choice-width); }
.group-rail>.group-bubble strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; width:100%; height:2.0125rem; min-height:2.0125rem; line-height:1.00625rem; overflow:hidden; text-overflow:ellipsis; white-space:normal; overflow-wrap:anywhere; hyphens:auto; }
.group-rail>.group-bubble small { white-space:nowrap; }
@media(max-width:874px) {
  .group-rail>.group-bubble { --group-choice-width:5.75rem; }
}
#withdraw-prompt { max-height:calc(100dvh - 2.875rem); overflow:auto; }

.story-results-empty { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.00625rem; padding-top:1.725rem; }
.story-results-empty h2 { margin:0 0 0.2875rem; font-size:var(--text-body); font-weight:550; }
.story-results-empty p { margin:0; font-size:var(--text-caption); color:var(--text-secondary); line-height:1.5; }
.story-results-empty .button { max-width:100%; white-space:normal; }

/* Shared scrollbars use the existing neutral and green interaction colors. */
:where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea) { scrollbar-color:var(--muted) transparent; scrollbar-width:thin; }
@supports selector(::-webkit-scrollbar) {
  @media (forced-colors:none) {
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea) { scrollbar-color:auto; scrollbar-width:auto; }
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea)::-webkit-scrollbar { width:0.71875rem; height:0.71875rem; background:transparent; }
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea)::-webkit-scrollbar-track { background:transparent; border:0; }
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea)::-webkit-scrollbar-thumb { min-width:2.3rem; min-height:2.3rem; border:0.14375rem solid transparent; border-radius:1.15rem; background-color:var(--muted); background-clip:padding-box; }
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea)::-webkit-scrollbar-thumb:hover { background-color:var(--text-secondary); }
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea)::-webkit-scrollbar-thumb:active { background-color:var(--green); }
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea)::-webkit-scrollbar-button { display:none; width:0; height:0; }
    :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea)::-webkit-scrollbar-corner { background:transparent; }
  }
}
@media (forced-colors:active) {
  :where(#app,dialog,.editor-form,.editor-layout,.preview-panel,.group-rail,.tabs,.calendar-grid,.story-order-body,.story-order-error,.select-menu,.action-menu,.article-results,.datetime-menu,.time-picker-list,textarea) { scrollbar-color:auto; scrollbar-width:auto; }
}

/* Interface type roles remain independent of the native Story canvas. */
.nav-item,.button,.tab,.text-button,.profile-button,.group-bubble strong,.field>span,.select-trigger,.datetime-trigger { font-size:var(--text-control); }
.page-subtitle,.field input:not([type="color"]),.field textarea,.field select,.product-add>input,.article-search-input input,.product-name,.reauth-description { font-size:var(--text-body); }
.section-heading h2,.editor-section-title h3,.detail-product-groups h4 { font-size:var(--text-body); }
.card-title { font-size:var(--text-card-title); }
.group-tile>p,.group-mini-stories>span,.field-help,.field small,.media-hints,.result-caption,.breadcrumb,.page-footer,.profile small,.version-button,.card-timing>small,.editor-section-title>span,.group-bubble small,.preview-tip p { font-size:var(--text-caption); line-height:1.4; color:var(--text-secondary); }
.card-timing>small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.00625rem; white-space:normal; overflow-wrap:normal; }
.editor-heading .eyebrow,.modal-header .eyebrow,.eyebrow { font-size:var(--text-caption); line-height:1.3; letter-spacing:0.1em; }

.group-rail>.group-bubble strong { height:2.3rem; min-height:2.3rem; line-height:1.15rem; }
.card-footer .card-groups>span { font-size:var(--text-caption); line-height:1.078125rem; padding:0.14375rem 0.575rem; }
.card-footer .card-groups>.card-groups-overflow { flex:0 0 auto; min-width:1.365625rem; padding-inline:0.2875rem; text-align:center; }

.article-results strong,.selected-article strong { font-size:var(--text-control); }
.article-results small,.selected-article small { font-size:var(--text-caption); }
.article-search .field-help:empty,.article-image-dialog .field-help:empty { display:none; }
.phone-cta,.story-player-close { pointer-events:none; cursor:default; }
.detail-group-add { display:flex; align-items:center; justify-content:center; gap:0.8625rem; width:100%; padding:1.15rem; border:1px dashed #cbd7c4; border-radius:0.790625rem; background:#fbfcf9; color:#637855; font-size:var(--text-control); }
.detail-group-add:hover { border-color:#8fa783; background:#f1f5ec; }
.detail-group-add .new-story-icon { flex-shrink:0; width:2.3rem; height:2.3rem; margin:0; }
.group-add .new-story-icon { margin:0; }
.selected-article { gap:0.71875rem; }
.selected-article>span { flex:1; min-width:0; }
.selected-article>.icon-button { flex-shrink:0; }
@media(max-width:874px) {
  :root { --text-dialog-title:1.509375rem; }

  .card-top-actions>.icon-button { width:1.725rem; height:1.725rem; padding:0.2875rem; }
}
@media(max-width:460px) {
  .group-icon-editor { flex-wrap:wrap; }
  .group-image-actions { min-width:0; max-width:100%; }
  .group-image-actions .button { max-width:100%; white-space:normal; }
  .modal-footer { flex-wrap:wrap; }
  .modal-footer .button { max-width:100%; white-space:normal; }
}
@media(max-width:360px) {
  .editor-footer>div { min-width:0; flex-shrink:1; }
  .editor-footer .button { min-width:0; padding-inline:0.575rem; gap:0.359375rem; white-space:normal; }
  .card-top-actions { flex-direction:column; }
}

/* Laptop typography and component proportions retain room between content groups. */
@media (min-width:875px) and (max-width:1700px), (min-width:875px) and (max-height:900px) {
  :root { --sidebar-width:13rem; --page-inset:2.5rem; --text-caption:0.75rem; --text-control:0.8125rem; --text-body:0.875rem; --text-card-title:0.875rem; --text-dialog-title:1.375rem; --story-card-body-size:10rem; }
  .sidebar { padding:1.5rem 1rem 1rem; }
  .sidebar nav { margin-top:2.5rem; }
  .brand>img { width:2rem; height:2rem; }
  .brand>span { font-size:1.5625rem; }
  .nav-item { min-height:2.75rem; padding:0.625rem 0.75rem; }
  .nav-item .icon { width:1.125rem; height:1.125rem; }
  .topbar { height:3.5rem; padding-inline:var(--page-inset); }
  main { padding:2rem var(--page-inset) 1.75rem; }
  .page-heading { gap:1.5rem; margin-bottom:2rem; }
  .page-heading h1 { font-size:1.875rem; letter-spacing:-0.0625rem; }
  .page-heading>.button { margin-top:0; }
  .page-subtitle { margin-top:0.5rem; }
  .button { min-height:2.5rem; padding:0.625rem 0.875rem; }
  .button.compact { min-height:2.375rem; padding:0.5rem 0.75rem; }
  .button .icon { width:0.875rem; height:0.875rem; }
  .group-section { margin-bottom:2rem; }
  .section-heading { margin-bottom:1rem; }
  .group-rail { padding:0.25rem 0; gap:0.75rem; }
  .group-rail>.group-bubble { --group-choice-width:5.75rem; padding:0.5rem; gap:0.25rem; }
  .group-rail .bubble-image { width:3rem; height:3rem; }
  .group-rail .bubble-image .icon { width:1.25rem; height:1.25rem; }
  .group-rail>.group-bubble strong { height:2rem; min-height:2rem; line-height:1rem; margin-top:0; }
  .group-rail>.group-bubble small { margin-top:0; }
  .library-toolbar { gap:0.75rem; }
  .library-controls { order:0; width:auto; margin:0 0 0 auto; gap:0.75rem; }
  .tabs { width:auto; gap:1.25rem; }
  .tab { padding-block:0.75rem; }
  .search-input { height:2.375rem; padding:0 0.75rem; }
  .search-input input { width:10rem; padding:0; font-size:var(--text-control); }
  .story-grid,.groups-grid { grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1.5rem; }
  .story-grid { margin-top:1.5rem; }
  .card-copy { gap:0.25rem; padding:0.75rem 1rem 0.5rem; }
  .card-title { max-height:2.25rem; line-height:1.125rem; }
  .card-copy>.card-subtitle { font-size:var(--text-caption); line-height:1rem; }
  .card-timing>small { line-height:1rem; }
  .card-footer { flex-basis:2.75rem; height:2.75rem; min-height:2.75rem; max-height:2.75rem; margin-inline:1rem; padding:0.625rem 0; }
  .card-footer .card-groups { height:1.25rem; min-height:1.25rem; }
  .card-footer .card-groups>span { line-height:0.9375rem; }
  .card-top-actions { top:0.75rem; right:0.75rem; gap:0.5rem; }
  .card-top-actions>.icon-button { width:1.75rem; height:1.75rem; padding:0.375rem; }
  .card-top-actions>.icon-button>.icon { width:0.875rem; height:0.875rem; }
  .card-status { top:0.75rem; left:0.75rem; }
  .card-status .status { padding:0.3125rem 0.4375rem; font-size:var(--text-caption); line-height:1.25; }
  .new-story-card strong,.group-add strong { font-size:1rem; line-height:1.35; }
  .group-tile { --group-preview-width:3.25rem; padding:1.5rem; }
  .group-tile h2 { font-size:1rem; line-height:1.35; letter-spacing:-0.015rem; }
  .group-tile-top { margin-bottom:1rem; }
  .group-tile-top .bubble-image { width:3.5rem; height:3.5rem; }
  .editor-dialog { width:min(80.5rem,calc(100vw - 2rem)); height:min(64.6875rem,calc(100dvh - 2rem)); max-height:calc(100dvh - 2rem); }
  .editor-header { height:5rem; padding:1rem 1.5rem; gap:1rem; }
  .editor-heading h2 { font-size:1.125rem; }
  .editor-layout { grid-template-columns:minmax(0,1fr) 24rem; }
  .editor-form { padding:0.3125rem 1.5rem 1rem; }
  .editor-section { padding-block:1.5rem; }
  .editor-section-title { margin-bottom:1rem; }
  .preview-panel { padding:1rem; }
  .editor-footer { flex-basis:4.5rem; height:4.5rem; min-height:4.5rem; max-height:4.5rem; padding:0.75rem 1.5rem; }
}