/* Homepage styles 3/5: the app replica (rd-*) shared by every window on the page, the live library demo, the live 3D demo. */
/* ─── APP SHOWCASE (interactive review-tool replica) ─── */
.showcase{width:100vw;margin-left:calc(50% - 50vw);padding:1rem 1.5rem 4rem;position:relative;z-index:1}
/* the window is a size container: its narrow layouts follow its own width, not the viewport's, so
   a window shrunk to fit a phone (data-mini, below) keeps the layout of the width it is drawn at */
.rd-app{container:rdapp/inline-size;max-width:1080px;margin:0 auto;border:1px solid var(--rd-ln);border-radius:12px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);background:var(--rd-b);color:var(--rd-tx);font-size:14px;line-height:1.4;
  --rd-b:#0b0c0d;--rd-p:#17181b;--rd-p2:#1d1e22;--rd-p3:#222428;--rd-ln:#292b2f;--rd-tx:#e6e8ec;--rd-mu:#8a909c;--rd-ft:#5a606c;--rd-ac:#d98fa6;--rd-ac-h:#e6a6bb;--rd-soft:rgba(217,143,166,.14);--rd-on:#241016;--rd-blue:#8fa8d9;--rd-rose:#6d4250}
/* titlebar */
.rd-tb{position:relative;height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--rd-ln);background:var(--rd-p)}   /* the app's title bar is the panel colour, one band with the header below */
.rd-tb .bd .ac{color:var(--rd-ac)}
.rd-tb .bd{font-size:12px;font-weight:700}
.rd-tb .win{margin-left:auto;display:flex;gap:15px;color:var(--rd-ft)}
.rd-tb .win svg{width:13px;height:13px;display:block}
/* header */
.rd-hd{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--rd-p);border-bottom:1px solid var(--rd-ln)}
.rd-hbtn{display:inline-flex;align-items:center;gap:5px;background:var(--rd-p2);border:1px solid var(--rd-ln);color:var(--rd-tx);border-radius:7px;padding:5px 10px;font-size:12px;white-space:nowrap}
.rd-ttl{font-size:13px;font-weight:600;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* shrinks first, as .rv-title */
.rd-usr{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--rd-mu);white-space:nowrap}
.rd-usr .d{width:7px;height:7px;border-radius:50%;background:#4FC3D9}   /* the app's seeded owner colour for "Alex_laptop" (review.js uploaderColor) */
.rd-pill{display:inline-flex;align-items:center;gap:7px;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:7px;padding:5px 9px;font-size:12px;white-space:nowrap}
.rd-pill.st{border-radius:20px;background:rgba(14,16,20,.78)}   /* the status control is the status badge itself */
.rd-pill .ca{color:var(--rd-mu);font-size:9px}
.rd-pill .sd{width:7px;height:7px;border-radius:50%;background:#5AA0E0}   /* In review = blue, as base.css */
.rd-mt{font-family:var(--mono);font-size:11px;color:var(--rd-mu);white-space:nowrap}
.rd-hbtn svg{width:13px;height:13px;display:block;flex:0 0 auto}
/* a header too narrow for its buttons behaves like the app's: the extra actions fold into a More
   button (review.js rvMore), then the owner and note count go, then labels leave only their icons.
   Measured on the header itself, since the replicas sit in bands of different widths. */
.rd-hd{container:rdhd/inline-size}
.rd-lh{container:rdlh/inline-size}
.rd-more{display:none}
@container rdhd (max-width:1070px){.rd-addver,.rd-export{display:none}.rd-more{display:inline-flex}}
@container rdhd (max-width:900px){.rd-usr,.rd-mt{display:none}}
@container rdhd (max-width:640px){.rd-hbtn .bl{display:none}}
@container rdhd (max-width:440px){.rd-pill:not(.st){display:none}}
@container rdlh (max-width:600px){.rd-lhlbl,.rd-imp{display:none}}
.rd-hd .sp{flex:1}
.rd-send{position:relative}
.rd-exp{position:absolute;top:-9px;right:-6px;font-size:8px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--rd-ac);color:var(--rd-on);padding:1px 5px;border-radius:4px}
/* body */
.rd-body{display:flex;align-items:stretch}
.rd-stage{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--rd-b)}
.rd-screen{position:relative;flex:1;background:#000;display:flex;align-items:center;justify-content:center;min-height:280px}
.rd-pic{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.rd-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#dCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:crosshair;touch-action:none}
.rd-textin{position:absolute;transform:translateY(-2px);background:rgba(0,0,0,.28);border:1px dashed rgba(255,255,255,.35);outline:none;font-family:var(--mono);font-weight:600;font-size:15px;padding:0 3px;z-index:4;min-width:34px}
.rd-hint{position:absolute;left:12px;top:10px;font-size:11px;color:var(--rd-tx);background:rgba(0,0,0,.5);padding:3px 9px;border-radius:5px;pointer-events:none;z-index:3;transition:opacity .3s}
.rd-hint.hide{opacity:0}
/* scrub */
.rd-scrub{position:relative;height:8px;background:var(--rd-p2);cursor:pointer}
/* the film band: hidden until hover/scrub, expands ABOVE the bar (over the video
   bottom) and pans centred on the playhead, matching the app's scrubber */
.rd-fb{position:absolute;left:0;right:0;bottom:100%;height:0;overflow:hidden;transition:height .14s ease;background:#0a0c0f;z-index:4;pointer-events:none}
.rd-scrub.film-on .rd-fb{height:58px;border-top:1px solid var(--rd-ln)}
.rd-fb canvas{position:absolute;inset:0;width:100%;height:100%}
.rd-played{position:absolute;left:0;top:0;height:100%;width:0;background:var(--rd-soft)}
.rd-mk{position:absolute;top:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--rd-b);transform:translateX(-50%);z-index:2}
.rd-hh{position:absolute;top:-3px;left:0;width:2px;height:14px;background:var(--rd-ac);transform:translateX(-50%);z-index:5}
.rd-scrub.film-on .rd-hh{top:-58px;height:69px;box-shadow:0 0 6px rgba(0,0,0,.6)}
/* transport */
.rd-tr{display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--rd-ln)}
.rd-play{width:30px;height:30px;border-radius:50%;background:var(--rd-p2);border:1px solid var(--rd-ln);color:var(--rd-tx);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rd-play svg{width:12px;height:12px;margin-left:1px}
.rd-tc{font-family:var(--mono);font-size:13px;color:var(--rd-tx)}
.rd-tc .fr{color:var(--rd-ft);margin-left:7px}
.rd-tr .sp{flex:1}
.rd-ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--rd-mu);cursor:default}
.rd-ic svg{width:16px;height:16px}
/* toolbar */
.rd-tools{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-top:1px solid var(--rd-ln);background:var(--rd-b);position:relative}
.rd-tbtn{width:32px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:7px;color:var(--rd-mu);cursor:pointer;padding:0}
.rd-tbtn svg{width:15px;height:15px}
.rd-tbtn .tt{font-size:13px;font-weight:700}
.rd-tbtn:hover{color:var(--rd-tx)}
.rd-tbtn.active{background:var(--rd-soft);border-color:var(--rd-ac);color:var(--rd-ac)}
.rd-swatch{width:30px;height:30px;border-radius:7px;border:1px solid var(--rd-ln);cursor:pointer;padding:0;margin-left:4px}
.rd-pop{position:absolute;bottom:47px;right:9px;display:none;gap:6px;padding:8px;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:5}
.rd-pop.show{display:flex}
.rd-sw{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--rd-ln)}
.rd-sw.active{box-shadow:0 0 0 2px var(--rd-tx)}
/* notes panel */
.rd-notes{width:320px;flex:0 0 320px;border-left:1px solid var(--rd-ln);background:var(--rd-p);display:flex;flex-direction:column}
.rd-nhd{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid var(--rd-ln)}
.rd-nhd .lb{font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--rd-mu)}
.rd-nhd .ct{margin-left:auto;font-size:13px;color:var(--rd-tx);font-weight:600}
.rd-comp{padding:12px 14px;border-bottom:1px solid var(--rd-ln)}
#dInput,#t3Input{width:100%;background:var(--rd-p2);border:1px solid var(--rd-ln);color:var(--rd-tx);border-radius:8px;padding:9px 10px;font-family:inherit;font-size:12.5px;resize:none;line-height:1.5}
#dInput::placeholder,#t3Input::placeholder{color:var(--rd-ft)}
#dInput:focus,#t3Input:focus{outline:none;border-color:var(--rd-ac)}
.rd-crow{display:flex;align-items:center;margin:9px 0;font-size:12px}
.rd-crow .at{font-family:var(--mono);color:var(--rd-ac)}
.rd-crow .mk{margin-left:auto;color:var(--rd-mu);font-size:11px}
.rd-add{width:100%;background:var(--rd-rose);color:#f4dde4;border:none;border-radius:8px;padding:9px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.rd-add:hover{background:#7e4d5d}
.rd-help{font-size:11px;color:var(--rd-ft);margin-top:9px}
.rd-srch{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--rd-ln)}
.rd-srch .ip{flex:1;display:flex;align-items:center;gap:6px;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:7px;padding:0 8px}
.rd-srch .ip svg{width:13px;height:13px;color:var(--rd-ft);flex:0 0 auto}
.rd-srch input{flex:1;min-width:0;background:none;border:none;color:var(--rd-tx);font-family:inherit;font-size:12px;padding:6px 0;outline:none}
.rd-tg{background:var(--rd-p2);border:1px solid var(--rd-ln);color:var(--rd-mu);border-radius:7px;padding:0 10px;font-size:12px;cursor:default;display:flex;align-items:center;flex:0 0 auto;white-space:nowrap}
.rd-tg.on{color:var(--rd-tx);border-color:var(--rd-ft)}
.rd-list{flex:1;overflow-y:auto;min-height:120px;max-height:300px}
/* the live demos' note lists keep one height (arriving notes scroll inside), so a note never moves the page */
#dList,#t3List{flex:1 1 0px}
.rd-empty{padding:16px 14px;color:var(--rd-ft);font-size:12px}
.rd-note{padding:11px 14px;border-bottom:1px solid var(--rd-ln);cursor:pointer;border-left:2px solid transparent}
.rd-note:hover{background:var(--rd-p2)}
.rd-note .tc{font-family:var(--mono);font-size:11.5px;color:var(--rd-blue)}
.rd-note .tx{font-size:13px;color:var(--rd-tx);margin:3px 0 5px;word-break:break-word}
.rd-note .mt{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--rd-mu)}
.rd-note.reply{margin-left:18px;padding-top:8px}   /* a reply sits inset under its note with its own colour bar (the app's .mnote.reply) */
.rd-note .au{color:var(--rd-ac)}
.rd-note .frn{font-family:var(--mono);color:var(--rd-ft)}
.rd-note .badge{font-size:10px;color:var(--rd-mu);border:1px solid var(--rd-ln);border-radius:4px;padding:0 5px}
.demo-cap{text-align:center;color:var(--text-dim);font-size:.85rem;margin:1.4rem auto 0;max-width:38em}
/* live-demo lead-in + the try-strip that lights up as the visitor does each step */
.demo-lead{text-align:center;margin:0 0 1.8rem}
.demo-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.28rem .85rem;border:1px solid var(--accent);border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.demo-lead h2{font-size:1.5rem;color:var(--text-bright);letter-spacing:-0.02em}
.try-strip{display:flex;justify-content:center;gap:.8rem;margin:1.4rem auto 0;flex-wrap:wrap}
.try{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .95rem;background:var(--bg2);border:1px solid var(--border);border-radius:20px;font-size:.82rem;color:var(--text-dim);transition:border-color .25s,color .25s}
.try b{width:18px;height:18px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;color:var(--text-dim);transition:all .25s}
.try.done{border-color:var(--green);color:var(--text)}
.try.done b{background:var(--green);border-color:var(--green);color:#10241a;font-size:.62rem}
/* an incoming reviewer note: the row slides in, its marker blooms */
.rd-note.pop{animation:rd-note-in .4s ease}
@keyframes rd-note-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.rd-mk.pop{animation:rd-mk-in .45s ease}
@keyframes rd-mk-in{0%{transform:translateX(-50%) scale(0)}60%{transform:translateX(-50%) scale(1.6)}100%{transform:translateX(-50%) scale(1)}}

/* ─── LIVE LIBRARY DEMO (self-hosted section) — mimics the real library screen ─── */
.lib-lead{text-align:center;margin:3.2rem 0 1.4rem}
.lib-lead h3{font-size:1.25rem;color:var(--text-bright);letter-spacing:-0.01em;margin-top:.2rem}
.rd-libapp{font-size:13px}
/* the library replica copies the app's library screen (ReviewDeck/src/renderer: index.html,
   library.js, styles/library.css + base.css + titlebar.css + forReview.css), scaled to ~0.85 */
.rd-tabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex}   /* centred on the bar, as #modeSwitch */
.rd-mode{display:flex;gap:2px;padding:2px;background:rgba(255,255,255,.04);border:1px solid var(--rd-ln);border-radius:7px}
.rd-tab{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:5px;font-size:10.5px;font-weight:600;color:var(--rd-mu)}
.rd-tab.on{background:var(--rd-att,#E96D9E);color:var(--rd-on,#23161B)}   /* the attention pair - a studio brand retints it */
.rd-tab b{display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;border-radius:7px;background:var(--rd-att,#E96D9E);color:var(--rd-on,#23161B);font-size:9px;font-weight:700;padding:0 3px}
@container rdapp (max-width:480px){.rd-tabs{display:none}}
.rd-lh{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--rd-ln);background:var(--rd-p)}
.rd-lh .rd-hbtn svg{width:13px;height:13px;display:block}
.rd-lh .rd-ppt{padding:5px 7px}
.rd-lh .rd-sendp{background:#D98FA6;border-color:#D98FA6;color:#23161B;font-weight:600;opacity:.45}   /* the app's primary Send, disabled until something is selected */
.rd-lhlbl{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--rd-mu);font-weight:500}
.rd-libcard{min-width:0;flex:0 1 auto;overflow:hidden;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:8px;padding:4px 11px;line-height:1.25}
.rd-libcard b{display:block;font-size:11.5px;font-weight:600;color:var(--rd-tx)}
.rd-libcard small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--rd-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-envchip{background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:14px;padding:3px 10px;font-size:10px;color:var(--rd-mu)}
.rd-lsearch{flex:0 1 260px;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:8px;padding:5px 11px;font-size:11.5px;color:var(--rd-ft)}
.rd-lh .sp,.rd-filters .sp{flex:1}
.rd-lbody{display:flex;min-height:0}
.rd-lside{width:192px;flex:0 0 auto;border-right:1px solid var(--rd-ln);background:var(--rd-p);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.rd-lsec{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--rd-mu);font-weight:600;margin:8px 4px 5px}
.rd-lsec:first-child{margin-top:0}
.rd-lsec.ppl{margin:8px -10px 5px;padding:10px 14px 0;border-top:1px solid var(--rd-ln)}
.rd-lsep{height:1px;margin:5px 8px;background:var(--rd-ln)}
.rd-lrow{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:7px;font-size:11.5px;color:var(--rd-tx)}
.rd-lrow svg{width:12px;height:12px;flex:0 0 auto;color:var(--rd-mu)}
.rd-lrow.on{background:var(--rd-soft);color:var(--rd-ac);font-weight:600}
.rd-lrow.needs{color:#E96D9E;font-weight:600}
.rd-lrow .ct{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--rd-ft)}
.rd-lrow.on .ct{color:var(--rd-ac)}
.rd-nbadge{margin-left:auto;min-width:15px;height:15px;border-radius:9px;background:#E96D9E;color:#23161B;font-family:var(--mono);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.rd-lprow{display:flex;align-items:center;gap:7px;padding:4px 7px;font-size:11.5px;color:var(--rd-tx)}
.rd-lprow small{margin-left:auto;font-size:9.5px;color:var(--rd-ft);white-space:nowrap}
.rd-ext{font-size:7.5px;font-weight:500;letter-spacing:.04em;border:1px solid var(--rd-ln);border-radius:7px;padding:0 4px;color:var(--rd-mu)}
.rd-lav{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:#fff;flex:0 0 auto;position:relative}
.rd-newproj{margin-top:auto;border:1px solid var(--rd-ln);border-radius:7px;background:var(--rd-p2);padding:6px;text-align:center;font-size:11.5px;color:var(--rd-tx)}
.rd-lmain{flex:1;min-width:0;display:flex;flex-direction:column}
.rd-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 14px 4px}
.rd-fchip{display:inline-flex;align-items:center;gap:5px;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:14px;padding:3px 10px;font-size:11px;color:var(--rd-tx)}
.rd-fchip.on{background:var(--rd-soft);border-color:var(--rd-ac);color:var(--rd-ac)}
.rd-fchip i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--rd-mu)}
.rd-fchip.on i{color:var(--rd-ac)}
.rd-sort{position:relative;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:7px;padding:3px 22px 3px 9px;font-size:11px;color:var(--rd-tx);white-space:nowrap}
.rd-sort::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;margin-top:-4px;border:solid var(--rd-mu);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.rd-vtog{display:inline-flex;border:1px solid var(--rd-ln);border-radius:7px;overflow:hidden}
.rd-vtog span{display:flex;align-items:center;padding:4px 8px;background:var(--rd-p2);color:var(--rd-tx)}
.rd-vtog span.on{background:var(--rd-ac);color:var(--rd-on)}
.rd-vtog svg{width:12px;height:12px;display:block}
.rd-bbar{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid var(--rd-ln)}
.rd-crumb{padding:3px 7px;font-size:11.5px;font-weight:600;color:var(--rd-tx)}
.rd-bbar .rd-hbtn svg{width:13px;height:13px;display:block}
.rd-lcont{padding:2px 14px 14px}
.rd-lsub{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--rd-mu);font-weight:600;margin:16px 2px 10px}
.rd-lsub i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:0;color:var(--rd-ft)}
.rd-folders{display:flex;gap:10px}
.rd-folder{display:flex;flex-direction:column;gap:3px;background:var(--rd-p);border:1px solid var(--rd-ln);border-radius:11px;padding:13px 12px;min-width:150px}
.rd-folder svg{width:22px;height:22px;color:var(--rd-ac);margin-bottom:1px}
.rd-folder b{font-size:12px}
.rd-folder small{font-family:var(--mono);font-size:9.5px;color:var(--rd-ft)}
.rd-lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px}
.rd-card{position:relative;background:var(--rd-p);border:1px solid var(--rd-ln);border-radius:11px;overflow:hidden;transition:border-color .12s,transform .12s,box-shadow .12s}
.rd-card:hover,#libDemo .rd-card.ghosthover{transform:translateY(-3px);border-color:var(--rd-ft);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.rd-card.attn{border-color:rgba(233,109,158,.5)}   /* needs you: the app's attention border */
.rd-ccheck{position:absolute;top:7px;right:7px;z-index:3;width:19px;height:19px;border:1px solid var(--rd-ln);border-radius:5px;background:rgba(8,9,12,.66);opacity:0;transition:opacity .1s}
.rd-card:hover .rd-ccheck,#libDemo .rd-card.ghosthover .rd-ccheck{opacity:1}
.rd-cth{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.rd-cth[data-strip]{cursor:ew-resize}
.rd-cth.grad-a{background:linear-gradient(135deg,#2a3a4e,#151b26)}
.rd-cth.grad-3d{background:linear-gradient(135deg,#2b3b43,#141b20)}
.rd-3dic{width:32px;height:32px;color:#7fa0ad;opacity:.85}
.rd-cth.grad-b{background:linear-gradient(135deg,#4e2a34,#26151a)}
.rd-cth.grad-d{background:linear-gradient(135deg,#43304e,#1d1526)}
.rd-cth.wavebg{background:#0a0b0d}
.rd-wave{width:78%;height:30px;background:repeating-linear-gradient(90deg,var(--rd-ac) 0 2px,transparent 2px 5px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#0009 18%,#000 32%,#0005 46%,#000 60%,#0008 74%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#0009 18%,#000 32%,#0005 46%,#000 60%,#0008 74%,#000 88%,transparent)}
.rd-cstat{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:2.5px 9px;border-radius:12px;background:rgba(11,12,13,.78);backdrop-filter:blur(4px);color:var(--rd-tx)}
.rd-cstat i{width:6px;height:6px;border-radius:50%}
.rd-cstat.ok i{background:#5FB87A}.rd-cstat.wait i{background:#E96D9E}.rd-cstat.rev i{background:#5AA0E0}   /* approved / awaiting / in review, as base.css */
.rd-cnew{position:absolute;top:8px;right:32px;font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:11px;background:#E96D9E;color:#23161B}   /* left of the hover checkbox, as the app */
.rd-cdur{position:absolute;right:7px;bottom:7px;font-family:var(--mono);font-size:9.5px;color:#fff;background:rgba(11,12,13,.7);padding:1px 6px;border-radius:5px}
.rd-chint{position:absolute;left:8px;bottom:8px;font-size:9px;font-family:var(--mono);color:rgba(255,255,255,.6);background:rgba(11,12,13,.6);padding:2px 7px;border-radius:10px;transition:opacity .2s}
#libScrubCard:hover .rd-chint{opacity:0}
.rd-cbody{padding:9px 11px 10px}
.rd-cttl{display:flex;align-items:center;gap:6px;min-width:0}
.rd-cttl b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-vpill{flex:0 0 auto;font-family:var(--mono);font-size:9px;border:1px solid var(--rd-ln);border-radius:5px;padding:0 5px;color:var(--rd-mu)}
.rd-cbody small{display:block;color:var(--rd-mu);font-size:10.5px;margin-top:2px}
.rd-cown{display:flex;align-items:center;gap:5px;font-size:10px;margin-top:5px;color:var(--rd-mu)}   /* the uploader tag: an identity dot + the name */
.rd-cown i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.rd-cavs{display:flex;margin-top:6px}
.rd-cavs .rd-lav{width:20px;height:20px;font-size:9px;color:#10131a;border:2px solid var(--rd-p);margin-left:-6px}
.rd-cavs .rd-lav:first-child{margin-left:0}
.rd-cnone{font-size:10.5px;color:var(--rd-ft);margin-top:7px}
.rd-lfoot{display:flex;align-items:center;gap:7px;padding:7px 14px;border-top:1px solid var(--rd-ln);background:var(--rd-p);font-size:10.5px;color:var(--rd-mu)}
.rd-lfoot .fdot{width:6px;height:6px;border-radius:50%;background:#5FB87A}
.rd-card.pop{animation:rd-card-in .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rd-card-in{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
/* the live library's story (js/library-demo.js): every card keeps ONE shape whatever its text says, and
   the upload's card sits in the grid from the start, hidden - so nothing that lands moves the page */
#libDemo{position:relative;user-select:none;-webkit-user-select:none}
/* the visitor's own mouse is in the library: the story holds still and its pointer steps out of the way */
#libDemo.user-in .rd-ghost{opacity:0}
#libDemo.user-in .rd-card.ghosthover:not(:hover){transform:none;border-color:var(--rd-ln);box-shadow:none}
#libDemo.user-in .rd-card.ghosthover.attn:not(:hover){border-color:rgba(233,109,158,.5)}
#libDemo.user-in .rd-card.ghosthover:not(:hover) .rd-ccheck{opacity:0}
#libDemo .rd-cbody small{height:2.8em;overflow:hidden}
#libDemo .rd-cavs,#libDemo .rd-cnone{display:flex;align-items:center;height:20px;margin-top:8px}
#libDemo [hidden]{display:none!important}   /* the hidden attribute must beat the display rules above */
#libDemo .rd-card.hit{border-color:var(--rd-ac);box-shadow:0 0 0 3px var(--rd-soft);transition:border-color .3s,box-shadow .3s}
#libScrubCard.scrubbing .rd-chint{opacity:0}
#libGrid{transition:opacity .25s}
.rd-ghost{position:absolute;left:0;top:0;z-index:20;width:17px;height:23px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));transition:opacity .3s}
.rd-ghost svg{display:block;width:100%;height:100%}
.rd-ghost.on{opacity:1}
.rd-ghost.glide{transition:opacity .3s,transform .9s cubic-bezier(.35,.1,.25,1)}
.rd-lfoot .fdot.ping{animation:fdot-ping .9s ease-out}
@keyframes fdot-ping{from{box-shadow:0 0 0 0 rgba(127,184,154,.7)}to{box-shadow:0 0 0 8px rgba(127,184,154,0)}}
@container rdapp (max-width:700px){.rd-lside{display:none}.rd-lsearch{display:none}.rd-envchip{display:none}}
@container rdapp (max-width:772px){
  .rd-body{flex-direction:column}
  .rd-notes{width:auto;flex:0 0 auto;border-left:none;border-top:1px solid var(--rd-ln)}
  .rd-list{max-height:180px}
  #dList,#t3List{flex:0 0 auto;height:180px}
  .rd-usr,.rd-mt,.rd-addver,.rd-export{display:none}
  .rd-ttl{font-size:12px}
}

/* ─── LIVE 3D DEMO (the real viewer island; runtime CSS arrives lazily from 3d/viewer3d.css) ─── */
/* The island's stylesheet consumes the app's theme tokens - provide them scoped
   to the demo, matching the rd-app replica palette (accent is already global). */
#threedDemo{--panel:#17181b;--line:#292b2f;--muted:#8a909c;--fg:#e6e8ec;--stage:#101114}
/* a narrow window: the island's nav switch (top left) and its View / Light / Camera / Parts bar
   (top right) no longer share a line, so the bar steps down a row */
@container rdapp (max-width:460px){#threedDemo .v3d-hud.v3d-topbar{top:44px}}
/* ...and a shot's aspect / safe / thirds chips need a row the width of a desktop window: on a
   phone-narrow one they step aside (the shot itself still shows through its own frame) */
@container rdapp (max-width:500px){#threedDemo .v3d-guides{display:none}}
/* the shot's aspect chips sit centred in the 2.39 frame's lower letterbox bar, off the picture: on a 16:9
   stage that bar is 12.8% of the height, and the row is 30px tall */
#threedDemo .v3d-guides{bottom:calc(6.4% - 15px)}
.rd-pic3d{aspect-ratio:16/9;background:#101114}
.rd-pic3d .stage3d{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.rd-3dload{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#101114;color:var(--rd-mu);font-size:12.5px;text-align:center;padding:0 2.5rem;line-height:1.6}
.rd-3dload.hide{display:none}
.rd-3dload .sp3{width:22px;height:22px;border-radius:50%;border:2px solid var(--rd-ln);border-top-color:var(--rd-ac);animation:t3spin .9s linear infinite}
.rd-3dload.fail .sp3{display:none}
@keyframes t3spin{to{transform:rotate(360deg)}}
#t3Tools .tsep3{width:1px;height:18px;background:var(--rd-ln);margin:0 4px}
.rd-pop3d{flex-direction:column;align-items:stretch;gap:0}
.rd-pop3d .swrow{display:flex;gap:6px}
.rd-pop3d .wrow{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid var(--rd-ln)}
.rd-pop3d .wrow input[type=range]{flex:1;accent-color:var(--rd-ac);min-width:120px}
.rd-pop3d .wrow .wd{width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.rd-pop3d .wrow .wd i{display:block;border-radius:50%;background:var(--rd-tx)}
.rd-note.sel{background:var(--rd-p2)}
.rd-note .tc svg{width:11px;height:11px;vertical-align:-1px;margin-right:4px}