/* Client landing (presentation links) and client feedback for the team.
   Motion for .st/.sv/.io/.dm follows Watermelon UI (MIT): Save Toggle, Split Button, Inline Overflow, Inline Disclosure Menu.
   Watermelon UI: Copyright (c) 2026 Watermelon Platform Contributors, MIT License. */
:root{--cr-ink:#1c2433;--cr-ink-2:#384357;--cr-muted:#6b7587;--cr-faint:#98a1b0;--cr-line:#e1e6ee;--cr-line-2:#d3dae5;--cr-page:#e9edf3;--cr-panel:#f7f9fc;--cr-card:#fbfcfe;--cr-soft:#f2f5f9;--cr-navy:#24406b;--cr-navy-ink:#1d3557;--cr-blue:#3f78d8;--cr-ava:#7d9fd9;--cr-ava-team:#a3adbd;--cr-ok:#2f7d5b;--cr-danger:#d94442;--cr-spring:cubic-bezier(.34,1.45,.64,1);--cr-out:cubic-bezier(.22,1,.36,1)}

/* Reset inside the client UI with zero extra specificity, so component classes always win. */
:where(.cr-ui){font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--cr-ink);-webkit-font-smoothing:antialiased}
:where(.cr-ui) button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;min-height:0;line-height:1.2;cursor:pointer;text-align:inherit}
:where(.cr-ui) button:hover{background:none}
:where(.cr-ui) button:disabled{opacity:1;cursor:default}
:where(.cr-ui) button:focus-visible{outline:2px solid var(--cr-blue);outline-offset:2px}
:where(.cr-ui) h2,:where(.cr-ui) h3,:where(.cr-ui) p{margin:0}
.cr-ui svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cr-ui svg.fill{fill:currentColor;stroke:none}

/* Page takeover in presentation mode */
#client-landing[hidden]{display:none}
.client-presentation{background:var(--cr-page)!important;overflow:auto!important;height:auto!important;min-height:100dvh}
.client-presentation>header,.client-presentation #board,.client-presentation #link-manager,.client-presentation #start-screen{display:none!important}
.client-presentation main{display:block;overflow:visible;padding:0;max-width:none;margin:0}
.client-presentation #client-landing{display:block}
#client-landing{padding:32px 24px 48px}

/* 01 · Overview */
.cr-shell{max-width:1132px;margin:0 auto;background:var(--cr-panel);border:1px solid var(--cr-line);border-radius:14px;box-shadow:0 1px 2px #1c243308,0 18px 40px -22px #1c24332e;overflow:hidden}
.cr-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:0 16px 0 26px;border-bottom:1px solid var(--cr-line)}
.cr-id{display:flex;align-items:center;gap:16px;min-width:0;font-size:14px;color:var(--cr-ink-2)}
.cr-id b{font-size:15px;font-weight:600;color:var(--cr-ink);letter-spacing:-.01em;white-space:nowrap}
.cr-id i{width:1px;height:20px;background:var(--cr-line-2)}
.cr-id span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border:1px solid var(--cr-line-2);border-radius:999px;background:#fff;font-size:12px;font-weight:500;color:var(--cr-ink-2);transition:background .15s,border-color .15s,transform .15s}
.cr-pill:hover{background:var(--cr-soft);border-color:#c3ccd9}
.cr-pill:active{transform:scale(.97)}
.cr-pill svg{width:16px;height:16px}
.cr-pill small{font-size:11px;font-weight:600;color:var(--cr-navy)}
.cr-pill small:empty{display:none}
.cr-list{display:grid;gap:16px;padding:16px}
.cr-empty{padding:72px 16px;text-align:center;color:var(--cr-muted);font-size:14px}

.cr-card{background:var(--cr-card);border:1px solid var(--cr-line);border-radius:10px;padding:12px 12px 0;cursor:pointer;transition:border-color .2s,box-shadow .25s var(--cr-out)}
.cr-card:hover{border-color:#cdd5e1;box-shadow:0 10px 28px -18px #1c243359}
.cr-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px}
.cr-tile{position:relative;display:block;width:100%;aspect-ratio:var(--ratio,1.86);border-radius:5px;overflow:hidden;background:#e7ebf1;isolation:isolate}
.cr-grid[style*="--n:1"] .cr-tile{--ratio:2.6}
.cr-grid[style*="--n:2"] .cr-tile{--ratio:1.9}
.cr-tile:hover,.cr-dpreview:hover{background:#e7ebf1}
.cr-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #1c24330d;pointer-events:none}
.cr-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#e9edf2}
.cr-media::before{content:"";position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;box-sizing:border-box;border-radius:50%;border:2.5px solid #1c243314;border-top-color:#24406bb3;opacity:0;animation:st-spin .8s linear infinite;transition:opacity .3s;pointer-events:none}
.cr-media.is-loading::before{opacity:1}
.cr-media.is-loaded::before{display:none}
.cr-media img,.cr-media video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;filter:blur(10px);scale:1.04;transition:opacity .7s var(--cr-out),filter .8s var(--cr-out),scale 1s var(--cr-out),transform .6s var(--cr-out)}
.cr-media img.is-shown,.cr-media video.is-shown{opacity:1;filter:none;scale:1}
.cr-tile:hover .cr-media img,.cr-tile:hover .cr-media video{transform:scale(1.035)}
.cr-media-error{padding:12px;font-size:12px;color:var(--cr-muted);text-align:center}
.cr-play{position:absolute;left:10px;bottom:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffffd9;color:var(--cr-ink);box-shadow:0 2px 8px #1c243326}
.cr-play svg{width:14px;height:14px;margin-left:2px}
.cr-file{display:grid;justify-items:center;gap:6px;color:var(--cr-muted);font-size:12px}
.cr-no-media{display:grid;place-items:center;height:160px;border-radius:6px;background:var(--cr-soft);color:var(--cr-muted);font-size:13px}

.cr-carousel{position:relative;padding:0 44px}
.cr-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.cr-track::-webkit-scrollbar{display:none}
.cr-track .cr-tile{flex:0 0 calc((100% - 40px)/5);--ratio:1.7;scroll-snap-align:start}
.cr-round{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--cr-line);color:var(--cr-ink-2);box-shadow:0 1px 3px #1c24331a;transition:transform .2s var(--cr-spring),opacity .2s,background .15s}
.cr-round:hover{background:var(--cr-soft)}
.cr-round:active{transform:scale(.92)}
.cr-round:disabled{opacity:.35;cursor:default;transform:none}
.cr-round svg{width:17px;height:17px}
.cr-carousel>.cr-round{position:absolute;top:50%;translate:0 -50%;z-index:2}
.cr-carousel>.prev{left:0}
.cr-carousel>.next{right:0}
.cr-carousel.is-static>.cr-round{opacity:0;pointer-events:none}

.cr-card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:10px 2px 12px}
.cr-card-info{display:grid;gap:4px;min-width:0;padding:2px 0}
.cr-card-info h2{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--cr-ink);transition:color .15s}
.cr-card-info p{font-size:13px;line-height:1.35;color:var(--cr-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-card-info:hover h2{color:var(--cr-navy)}
.cr-card-actions{display:flex;align-items:center;gap:14px;flex:none}
.cr-cbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:38px;padding:0 10px;box-sizing:border-box;border:1.5px solid var(--cr-line-2);border-radius:9px;background:#fff;color:var(--cr-ink-2);font-size:13px;font-weight:600;transition:border-color .15s,color .15s,background .15s,transform .15s}
.cr-cbtn:hover{border-color:var(--cr-navy);color:var(--cr-navy);background:#f3f6fb}
.cr-cbtn:active{transform:scale(.95)}
.cr-cbtn svg{width:18px;height:18px}
.cr-cbtn span:empty{display:none}
.cr-counter{font-size:13px;color:var(--cr-muted);font-variant-numeric:tabular-nums}

/* Split Button: version count expands into ‹ 1 2 3 */
.sv{position:relative;height:34px;width:var(--sv-closed,auto);transition:width .6s var(--cr-spring)}
.sv.open{width:var(--sv-open,auto)}
.sv-main,.sv-row{position:absolute;right:0;top:50%;translate:0 -50%;transition:transform .6s var(--cr-spring),opacity .3s,filter .3s}
.sv-main{height:30px;padding:0 4px;font-size:13px;color:var(--cr-muted);white-space:nowrap;border-radius:8px}
.sv-main:hover{color:var(--cr-navy);text-decoration:underline;text-underline-offset:3px}
.sv-row{display:flex;gap:6px;transform:scaleX(.2) scaleY(.9);transform-origin:right center;opacity:0;filter:blur(8px);pointer-events:none}
.sv.open .sv-main{transform:scaleX(1.5) scaleY(.9);opacity:0;filter:blur(8px);pointer-events:none}
.sv.open .sv-row{transform:none;opacity:1;filter:none;pointer-events:auto}
.sv-btn{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:999px;background:var(--cr-soft);border:1px solid var(--cr-line);font-size:13px;font-weight:600;color:var(--cr-ink-2);transition:transform .2s var(--cr-spring),background .15s}
.sv-btn:hover{background:#e8edf4}
.sv-btn:active{transform:scale(1.08)}
.sv-back svg{width:15px;height:15px}
.sv-btn{position:relative}
.sv-btn.is-approved{background:#eef7f2;border-color:#bfd4c8;color:var(--cr-ok)}
.sv-btn.is-approved::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--cr-ok);box-shadow:0 0 0 2px var(--cr-card)}

/* Save Toggle: idle → loading (circle) → success → saved */
.st-wrap{display:inline-flex;justify-content:flex-end}
.st-wrap.is-block{display:flex;justify-content:center;width:100%}
.st{position:relative;display:block;flex:none;height:38px;width:var(--st-w,160px);border:1.5px solid var(--cr-navy);border-radius:9px;background:#fff;color:var(--cr-navy-ink);font-size:13px;font-weight:600;overflow:hidden;isolation:isolate;transition:width .55s var(--cr-spring),border-radius .35s var(--cr-out),background-color .2s,border-color .2s,color .2s,transform .15s}
.is-block>.st{width:100%}
.st:hover{background:#f3f6fb}
.st:active{transform:scale(.97)}
.st[data-state=loading],.st[data-state=success]{width:38px;border-radius:19px;background:var(--cr-navy);cursor:progress;transition:width .42s var(--cr-out),border-radius .3s var(--cr-out),background-color .2s,border-color .2s,color .2s,transform .15s}
.st[data-state=saved]{border-color:#bfd4c8;background:#f1f8f4;color:var(--cr-ok)}
.st.is-locked{cursor:default}
.st-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .45s var(--cr-spring),filter .25s}
.st-face em{font-style:normal}
.st-idle{transform:translateY(12px)}
.st-spin{transform:scale(.8);filter:blur(4px)}
.st-done{transform:translateY(-10px);filter:blur(4px)}
.st[data-state=idle] .st-idle{opacity:1;transform:none}
.st[data-state=loading] .st-spin{opacity:1;transform:none;filter:none}
.st[data-state=success] .st-done,.st[data-state=saved] .st-done{opacity:1;transform:none;filter:none}
.st[data-state=success] .st-done em{display:none}
.st[data-state=success] .st-done svg{color:#fff;transform:scale(1.15)}
.st[data-state=saved] .st-idle{transform:translate(-14px,-12px)}
.st-done svg{width:18px;height:18px;transition:transform .45s var(--cr-spring),color .2s}
.st-done em{animation:st-label .35s .05s both var(--cr-out)}
.st-spin svg{width:20px;height:20px;animation:st-spin .7s linear infinite}
.st-spin circle{fill:none;stroke:#ffffff40;stroke-width:3}
.st-spin path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
@keyframes st-spin{to{transform:rotate(360deg)}}
@keyframes st-label{from{opacity:0;transform:translateX(-8px)}}

/* 02 · Card drawer */
.cr-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;background:#fff;box-shadow:-24px 0 60px #1c243324;overflow-y:auto;overscroll-behavior:contain}
.cr-drawer[open]{animation:cr-drawer-in .45s var(--cr-out)}
.cr-drawer::backdrop,.cr-viewer::backdrop,.cr-inbox::backdrop{background:#1c243347;backdrop-filter:blur(2px)}
.cr-drawer-in{position:relative;display:grid;gap:14px;padding:24px 24px 28px}
.cr-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--cr-ink-2);transition:background .15s}
.cr-x:hover{background:var(--cr-soft)}
.cr-dslider{position:relative;margin-top:22px}
.cr-dpreview{position:relative;display:block;width:100%;aspect-ratio:1.75;border-radius:8px;overflow:hidden;background:#e7ebf1}
.cr-dpreview:hover .cr-media img{transform:scale(1.025)}
.cr-dnav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:32px;height:32px}
.cr-dnav.prev{left:10px}
.cr-dnav.next{right:10px}
.cr-dnav:disabled{opacity:0;pointer-events:none}
.cr-dcount{position:absolute;right:10px;bottom:10px;z-index:2;padding:3px 8px;border-radius:999px;background:#1c2433a6;color:#fff;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);pointer-events:none}
.cr-drawer-in h2{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3;padding-right:36px}
.cr-feed-title{margin-top:6px}
.cr-desc{font-size:13.5px;line-height:1.5;color:var(--cr-muted);margin-top:-6px}
.cr-desc p{margin:0 0 6px}


/* Discussion */
.cr-discussion{display:grid;gap:10px;align-content:start;min-height:0}
.cr-discussion h3{font-size:14px;font-weight:600;margin-top:6px}
.cr-thread{display:grid;gap:6px;align-content:start}
.cr-muted{font-size:13px;color:var(--cr-faint);padding:10px 2px}
.cr-c{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:10px 10px 10px 12px;border-radius:9px;background:var(--cr-soft);animation:cr-pop .35s var(--cr-out)}
.cr-ava{width:18px;height:18px;flex:none;border-radius:50%;background:var(--cr-ava);box-shadow:inset 0 0 0 2px #ffffff8c;margin-top:1px}
.cr-ava.is-team{background:var(--cr-ava-team)}
.cr-c-body{display:grid;gap:3px;min-width:0}
.cr-c-text{font-size:13px;line-height:1.45;color:var(--cr-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.cr-c-meta{font-size:11px;color:var(--cr-faint)}
.cr-c.is-done .cr-c-text{color:var(--cr-muted);text-decoration:line-through;text-decoration-color:#98a1b080}
.cr-c-more{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:inherit;color:var(--cr-muted);opacity:0;box-shadow:-8px 0 8px -2px var(--cr-soft);transition:opacity .15s,background .15s}
.cr-c:hover .cr-c-more,.cr-c:focus-within .cr-c-more,.cr-c-more[aria-expanded]{opacity:1}
.cr-c-more:hover,.cr-c-more[aria-expanded]{background:#e3e8ef}
.cr-c-more svg{width:16px;height:16px}
.cr-edit{width:100%;min-height:64px;resize:vertical;box-sizing:border-box;padding:8px 10px;border:1px solid var(--cr-line-2);border-radius:8px;font:inherit;font-size:13px;color:var(--cr-ink);background:#fff}
.cr-edit:focus{outline:2px solid #3f78d84d;border-color:var(--cr-blue)}
.cr-edit-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}
.cr-edit-actions button{height:28px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--cr-ink-2)}
.cr-edit-actions button:hover{background:#e3e8ef}
.cr-edit-actions .is-primary{background:var(--cr-navy);color:#fff}
.cr-edit-actions .is-primary:hover{background:var(--cr-navy-ink)}

.cr-compose{display:grid;gap:8px}
.cr-input{position:relative;display:flex;align-items:flex-end;border:1px solid var(--cr-line-2);border-radius:9px;background:#fff;transition:border-color .15s,box-shadow .15s}
.cr-input:focus-within{border-color:#9db5de;box-shadow:0 0 0 3px #3f78d81a}
.cr-input textarea{flex:1;min-height:40px;max-height:140px;box-sizing:border-box;padding:11px 0 10px 12px;border:0;outline:0;resize:none;background:none;font:inherit;font-size:13px;line-height:1.4;color:var(--cr-ink)}
.cr-input textarea::placeholder{color:var(--cr-faint)}
.cr-send{display:grid;place-items:center;width:38px;height:38px;flex:none;color:var(--cr-navy);border-radius:8px;transition:transform .2s var(--cr-spring),color .15s}
.cr-send:hover{color:var(--cr-blue)}
.cr-send:active{transform:scale(.9) translateX(2px)}
.cr-send:disabled{opacity:.4;cursor:progress}
.cr-send svg{width:17px;height:17px}
.cr-error{font-size:12px;color:var(--cr-danger)}
.cr-error:empty{display:none}

/* Inline Overflow: comment tags */
.io{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:28px}
.io-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px 0 10px;border:1px solid var(--cr-line-2);border-radius:999px;background:#fff;font-size:11.5px;font-weight:500;color:var(--cr-ink-2);white-space:nowrap;transition:transform .2s var(--cr-spring),background .15s,border-color .15s}
.io-chip span{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.io-chip svg{width:12px;height:12px;color:var(--cr-muted)}
.io-chip:hover{background:var(--cr-soft)}
.io-chip:hover svg{color:var(--cr-ink)}
.io-chip:active{transform:scale(.96)}
.io-chip.is-add{border-style:dashed;color:var(--cr-muted)}
.io-in{animation:io-in .55s var(--cr-spring) both}
.io-out{animation:io-out .18s ease-in both}
.io-note{font-size:11.5px;color:var(--cr-faint)}
.io-more{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--cr-line-2);background:#fff;color:var(--cr-muted);transition:transform .2s var(--cr-spring)}
.io-more:hover{background:var(--cr-soft)}
.io-more:active{transform:scale(.9)}
.io-more>span{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .25s,transform .45s var(--cr-spring),filter .25s}
.io-more svg{width:14px;height:14px}
.io-close,.io-more.is-open .io-dots{opacity:0;transform:scale(0);filter:blur(3px)}
.io-more.is-open .io-close{opacity:1;transform:none;filter:none}
@keyframes io-in{from{opacity:0;transform:scale(0);filter:blur(4px)}}
@keyframes io-out{to{opacity:0;transform:scale(.4);filter:blur(4px)}}

/* Inline Disclosure Menu: comment actions */
.dm{position:fixed;z-index:20;width:228px;background:#fff;border:1.5px solid #eceef3;border-radius:14px;box-shadow:0 16px 40px -10px #1c243338;overflow:hidden;animation:dm-in .32s var(--cr-out)}
.dm.is-leaving{animation:dm-out .16s ease-in forwards}
.dm-head{padding:8px 14px;border-bottom:1.5px solid #eceef3;background:#fafafc;font-size:12px;font-weight:500;color:#828287}
.dm-items{display:grid;gap:2px;padding:6px}
.dm-item{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:9px;font-size:13.5px;font-weight:500;color:#363538;transition:background .12s}
.dm-item:hover,.dm-item:focus-visible{background:#f5f6fa}
.dm-item svg{width:17px;height:17px;color:#8a8f99}
.dm-item.is-danger,.dm-item.is-danger svg{color:var(--cr-danger)}
.dm-del{position:relative;height:48px;border-top:1.5px solid #eceef3;overflow:hidden}
.dm-ask,.dm-confirm{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 6px;transition:transform .4s var(--cr-out)}
.dm-confirm{transform:translateY(100%)}
.dm-del.confirm .dm-ask{transform:translateY(-100%)}
.dm-del.confirm .dm-confirm{transform:none}
.dm-yes,.dm-no{flex:1;height:34px;border-radius:9px;font-size:12.5px;font-weight:600;text-align:center}
.dm-yes{background:var(--cr-danger);color:#fff}
.dm-yes:hover{background:#c53a38}
.dm-no{border:1px solid #e3e5ea;color:#5f6470}
.dm-no:hover{background:#f5f6fa}
@keyframes dm-in{from{opacity:0;transform:scale(.94)}}
@keyframes dm-out{to{opacity:0;transform:scale(.94)}}

/* 03 · Version viewer */
.cr-viewer{width:min(1320px,calc(100vw - 32px));max-width:none;height:min(860px,calc(100dvh - 32px));max-height:none;padding:0;border:0;border-radius:14px;background:#fff;box-shadow:0 30px 80px -20px #1c24334d;overflow:hidden}
.cr-viewer[open]{animation:cr-viewer-in .4s var(--cr-out)}
.cr-v{display:grid;grid-template-columns:minmax(0,1fr) 352px;height:100%}
.cr-v-main{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;min-width:0;min-height:0;padding:12px 16px 14px}
.cr-crumbs{display:flex;align-items:center;gap:8px;min-width:0;height:28px;font-size:12px;color:var(--cr-muted)}
.cr-crumbs button{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:var(--cr-muted)}
.cr-crumbs button:hover{background:var(--cr-soft);color:var(--cr-ink)}
.cr-crumbs button svg{width:16px;height:16px}
.cr-crumbs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-crumbs i{font-style:normal;color:var(--cr-faint)}
.cr-crumbs b{font-weight:600;color:var(--cr-ink);white-space:nowrap}
.cr-stage{position:relative;min-height:0}
.cr-full.cr-media{background:none}
.cr-full.cr-media img,.cr-full.cr-media video{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.cr-full iframe{width:100%;height:100%;border:0}
.cr-full audio{width:min(480px,90%)}
.cr-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;width:38px;height:38px}
.cr-arrow.prev{left:12px}
.cr-arrow.next{right:12px}
.cr-bubbles{position:absolute;top:calc(var(--fit-top,0px) + 14px);right:calc(var(--fit-right,0px) + 14px);z-index:2;display:grid;gap:8px;justify-items:end;max-width:min(280px,60%)}
.cr-bubble{display:flex;align-items:flex-start;gap:9px;padding:9px 12px 9px 10px;border-radius:10px;background:#ffffffd1;backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 6px 18px -6px #1c243340;font-size:12px;line-height:1.4;color:var(--cr-ink);text-align:left;animation:cr-pop .45s var(--cr-spring);transition:transform .2s var(--cr-spring)}
.cr-bubble:hover{transform:translateY(-1px);background:#fffffff0}
.cr-bubble .cr-ava{width:16px;height:16px}
.cr-bubble span:last-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cr-strip{display:flex;justify-content:safe center;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.cr-strip::-webkit-scrollbar{display:none}
.cr-strip button{position:relative;flex:none;width:88px;aspect-ratio:1.62;border-radius:6px;overflow:hidden;background:#e7ebf1;box-shadow:0 0 0 1px var(--cr-line);transition:box-shadow .2s,transform .2s var(--cr-spring)}
.cr-strip button:hover{transform:translateY(-1px);background:#e7ebf1}
.cr-strip button[aria-current=true]{box-shadow:0 0 0 2px var(--cr-blue)}
.cr-v-count{text-align:center;font-size:12px;color:var(--cr-muted);font-variant-numeric:tabular-nums}
.cr-v-side{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;min-height:0;padding:18px;border-left:1px solid var(--cr-line);background:#fff}
.cr-v-head{position:relative;display:flex;align-items:center;min-height:30px}
.cr-v-head h2{font-size:17px;font-weight:600;letter-spacing:-.015em}
.cr-v-head .cr-x{top:-4px;right:-6px}
.cr-discussion.is-panel .cr-c-more{box-shadow:-8px 0 8px -2px #fff}
.cr-discussion.is-panel{grid-template-rows:auto minmax(0,1fr) auto}
.cr-discussion.is-panel .cr-thread{overflow-y:auto;padding:8px;border-radius:10px;background:var(--cr-soft);overscroll-behavior:contain}
.cr-discussion.is-panel .cr-c{background:#fff;box-shadow:0 1px 2px #1c24330a}
.cr-v-side .st{height:40px}

/* Help guide */
.cr-guide{width:min(880px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:16px;background:#fff;box-shadow:0 30px 80px -20px #1c24334d;overflow-y:auto}
.cr-guide[open]{animation:cr-viewer-in .4s var(--cr-out)}
.cr-guide::backdrop{background:#1c243347;backdrop-filter:blur(2px)}
.cr-guide-in{position:relative;display:grid;gap:12px;padding:26px 28px 24px}
.cr-guide-in h2{font-size:20px;font-weight:600;letter-spacing:-.02em;padding-right:40px}
.cr-guide-in>.cr-desc{margin-top:-4px}
.cr-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:6px 0 4px;padding:0;list-style:none}
.cr-steps li{display:grid;grid-template-rows:auto 1fr;gap:12px;padding:12px 12px 14px;border:1px solid var(--cr-line);border-radius:12px;background:var(--cr-card);animation:cr-pop .5s calc(var(--i) * 70ms) both var(--cr-out)}
.cr-steps figure{margin:0;border-radius:9px;background:var(--cr-soft);overflow:hidden}
.cr-ui svg.cr-art{display:block;width:100%;height:auto;stroke:none;flex:none}
.cr-steps b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--cr-ink)}
.cr-steps b span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cr-navy);color:#fff;font-size:11px;font-weight:600;flex:none}
.cr-steps p{margin-top:6px;font-size:13px;line-height:1.45;color:var(--cr-muted)}
.cr-guide-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.cr-guide-foot .cr-pill{height:36px}
.cr-primary{height:38px;padding:0 22px;border-radius:9px;background:var(--cr-navy);color:#fff;font-size:13px;font-weight:600;transition:background .15s,transform .15s}
.cr-primary:hover{background:var(--cr-navy-ink)}
.cr-primary:active{transform:scale(.97)}

/* Team side */
#client-comments{display:inline-flex;gap:6px;align-items:center}
#client-comments[hidden]{display:none}
#client-comments svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.cr-inbox{position:relative;width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:24px;border:0;border-radius:14px;background:#fff;box-shadow:0 30px 80px -20px #1c24334d}
.cr-inbox h2{font-size:18px;font-weight:600;margin:0 40px 14px 0}
.cr-inbox .cr-thread{gap:8px}
.cr-approval-summary{font-size:12px;color:var(--cr-ok);padding:8px 10px;margin:0 0 6px;background:#eef6f1;border-radius:8px}
.cr-editor-badge{display:block;font-size:10px;padding:4px 10px;color:#627b69}
.cr-editor-feedback{border-top:1px solid #d4dfeb;margin-top:18px;padding-top:8px}
.cr-editor-feedback h3{font-size:14px;margin:6px 0 8px}
.cr-editor-approvals{font-size:12px;color:var(--cr-ok);margin-bottom:10px}
.cr-editor-approvals:empty{display:none}
#share-presentation-settings{margin:12px 0}
#share-presentation-settings label{font-size:13px}
#share-organization-wrap{margin-top:12px}

@keyframes cr-pop{from{opacity:0;transform:translateY(4px) scale(.98)}}
@keyframes cr-drawer-in{from{transform:translateX(40px);opacity:0}}
@keyframes cr-viewer-in{from{transform:translateY(12px) scale(.985);opacity:0}}

@media(hover:none){.cr-c-more{opacity:1}}
@media(max-width:980px){
  .cr-track .cr-tile{flex-basis:calc((100% - 20px)/3)}
  .cr-v{grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:760px){
  #client-landing{padding:12px 10px 32px}
  .cr-top{padding:0 10px 0 14px;min-height:54px}
  .cr-id{gap:10px;font-size:13px}
  .cr-id b{font-size:14px}
  .cr-top .cr-pill span{display:none}
  .cr-guide-in{padding:20px 16px}
  .cr-guide{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .cr-list{padding:10px;gap:10px}
  .cr-card{padding:8px 8px 0}
  .cr-grid{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -8px;padding:0 8px}
  .cr-grid::-webkit-scrollbar{display:none}
  .cr-grid .cr-tile{flex:0 0 82%;scroll-snap-align:center;--ratio:1.6}
  .cr-grid[style*="--n:1"] .cr-tile{flex-basis:100%}
  .cr-carousel{padding:0}
  .cr-carousel>.cr-round{display:none}
  .cr-track .cr-tile{flex-basis:calc((100% - 10px)/2)}
  .cr-card-foot{flex-wrap:wrap;gap:10px}
  .cr-card-info{flex:1 1 100%}
  .cr-card-actions{width:100%;justify-content:flex-end}
  .cr-viewer{width:100vw;height:100dvh;border-radius:0}
  .cr-v{display:block;height:100%;overflow-y:auto}
  .cr-v-main{height:auto;grid-template-rows:auto auto auto auto;padding:10px}
  .cr-stage{min-height:0}
  .cr-full.cr-media{position:relative;inset:auto;min-height:220px}
  .cr-full.cr-media:has(img,video){min-height:0}
  .cr-full.cr-media img,.cr-full.cr-media video{width:100%;max-height:62dvh}
  .cr-v-side{border-left:0;border-top:1px solid var(--cr-line);padding:16px 12px 24px;grid-template-rows:auto auto auto}
  .cr-discussion.is-panel{grid-template-rows:auto auto auto}
  .cr-strip button{width:68px}
}
@media(prefers-reduced-motion:reduce){
  .cr-ui *,.cr-ui *::before,.cr-ui *::after,.cr-drawer,.cr-viewer{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}