/* Local polish guided by unslop, Damir Sokolovsky (@heydamir), CC BY 4.0.
   Keep the established ChenRaft colors; put emphasis on the design canvas. */
.hero>.showcase{background:#dfe9f9;border:0;border-radius:12px;box-shadow:0 10px 24px #172c4612}
.showcase .bench-top{background:transparent;border-color:#253d6212;height:48px;padding:0 24px}
.showcase-slide{padding:24px}.scene-kicker{letter-spacing:0;font-size:11px;color:#74839a}.scene-heading h2{font-size:26px;letter-spacing:-.5px;font-weight:550;margin:8px 0}.scene-heading p{font-size:12px;color:#65758b}.scene-visual{height:248px;margin-top:24px;gap:24px;transform:scale(.965);opacity:.55;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s ease}.is-active .scene-visual{transform:scale(1);opacity:1}.scene-caption{margin-top:16px;font-size:10px;color:#718198}.caption-dot{width:4px;height:4px}.showcase-controls{background:transparent;border-color:#253d6212;padding:0 24px;gap:24px}.showcase-controls button{font-size:12px;padding:16px 0 20px;color:#65758b;gap:8px}.showcase-controls small{font-size:10px;letter-spacing:0}.showcase-controls button[aria-current=true] i{background:#ced9e8}.showcase[data-paused=true] .showcase-controls button[aria-current=true] i:after{transform:scaleX(var(--progress))}.showcase[data-manual-paused=false] .play-symbol{width:8px;height:9px;border-left:2px solid currentColor;border-right:2px solid currentColor;border-top:0;border-bottom:0}.showcase-play{font-size:11px;color:#65758b}.mini-window{border:1px solid #253d6218;box-shadow:0 6px 16px #172c4606}.window-bar{color:#63748d}.clean-note strong{font-weight:500;letter-spacing:0}.clean-note strong span{color:#245dcc}.layer-result{color:#63748d}.note-label{color:#718198}.export-files{padding-left:4px}.export-file{border-color:#253d6212;padding:12px 0}.export-file>span{font-size:11px}.export-file small{font-size:9px;color:#718198}.export-file b{border:0;background:#f9eadb;color:#9e602e}.export-file i{color:#5a789e}.export-done{font-size:10px;color:#536d92}
/* Both screens render this exact same 240 × 360 SVG with object-fit: contain. */
.mobile-scene{display:flex;align-items:center;gap:0;justify-content:space-between;padding:0 4px}
.preview-desktop{position:relative;width:71%;margin:0;align-self:center;border:1px solid #314054;border-radius:7px;background:#303844;box-shadow:0 12px 20px #14223812;overflow:hidden}
.preview-desktop .window-bar{height:30px;background:#28313d;border-color:#ffffff0c;color:#aeb8c8;font-size:9px;padding:0 12px}
.ps-preview-workspace{height:196px;display:flex;background:#3a424e;padding:12px;gap:12px}
.ps-preview-tools{width:10px;display:flex;flex-direction:column;gap:12px;padding-top:4px;flex-shrink:0}.ps-preview-tools i{width:7px;height:7px;border:1px solid #95a0b1;display:block;opacity:.6}.ps-preview-tools i:first-child{border-color:#e69b64;opacity:1}
.ps-preview-canvas{display:flex;align-items:center;justify-content:center;flex:1;min-width:0}.shared-artwork{display:block;object-fit:contain;aspect-ratio:2/3;max-width:100%;height:100%;width:auto}
.ps-preview-layers{width:52px;flex-shrink:0;padding-top:4px;color:#b1bccd;font-size:6px}.ps-preview-layers>span{display:block;padding-bottom:8px;color:#8e9aab}.ps-preview-layers div{padding:6px 0;border-bottom:1px solid #ffffff0a;white-space:nowrap}.ps-preview-layers b{font-weight:400;color:#e1ac80}.preview-sync{height:24px;background:#28313d;border-color:#ffffff0c;color:#acb7c7;padding:0 12px;font-size:8px}
.preview-phone{position:relative;right:auto;top:auto;align-self:center;flex-shrink:0;width:118px;height:246px;padding:0;border:4px solid #233145;border-radius:22px;background:#f5f1e9;box-shadow:0 12px 20px #14223815;margin-left:-16px;overflow:hidden}
.phone-screen{position:absolute;inset:20px 5px 17px;display:flex;align-items:center;justify-content:center;overflow:hidden}.phone-screen .shared-artwork{width:100%;height:auto;max-height:100%}.phone-speaker{top:8px;background:#273247;width:24px;height:3px}.phone-home{bottom:7px;background:#7e8794;width:30px;height:3px}.sync-label{position:absolute;right:5px;bottom:-17px;font-size:9px;color:#718198}.mobile-scene+.scene-caption{margin-top:28px}
.is-active .remove-layer{animation-name:clean-fade}.is-active .remove-layer.second{animation-delay:.18s}.layer-list{position:relative}.layer-list .layer-result{transition:color .3s}.is-active .clean-note .paper-stack{animation:paper-settle .7s cubic-bezier(.22,1,.36,1) both}.is-active .export-file{animation-name:file-settle}.is-active .preview-desktop,.is-active .preview-phone{animation:device-settle .7s cubic-bezier(.22,1,.36,1) both}
@keyframes clean-fade{0%,20%{opacity:1;transform:translateX(0)}42%,100%{opacity:.15;transform:translateX(8px)}}
@keyframes file-settle{0%,10%{opacity:0;transform:translateY(10px)}28%,100%{opacity:1;transform:translateY(0)}}
@keyframes paper-settle{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes device-settle{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.showcase[data-paused=true] .is-active .preview-desktop,.showcase[data-paused=true] .is-active .preview-phone,.showcase[data-paused=true] .is-active .paper-stack,.showcase[data-paused=true] .is-active .export-file{animation-play-state:running}
@media(min-width:761px) and (max-width:1050px){.showcase-slide{padding:20px}.scene-heading h2{font-size:22px}.scene-heading p{font-size:11px}.scene-visual{gap:16px}.mobile-scene{gap:0;padding:0}.ps-preview-layers{display:none}.ps-preview-workspace{padding:12px 8px;gap:8px}.preview-phone{width:102px;height:224px;margin-left:-20px}.preview-desktop{width:73%}.export-file>span{font-size:9px}.export-file{gap:5px}.export-file b{width:22px}.showcase-controls{gap:12px;padding:0 20px}}
@media(max-width:760px){.showcase-slide{padding:20px}.scene-heading h2{font-size:24px}.scene-heading p{font-size:11px}.scene-visual{gap:16px}.mobile-scene{gap:0;padding:0}.ps-preview-layers{display:none}.ps-preview-workspace{padding:12px;gap:8px}.preview-desktop{width:73%}.preview-phone{width:106px;height:230px;margin-left:-12px}.showcase-controls{gap:16px;padding:0 20px}}
@media(max-width:360px){.showcase-slide{padding:16px}.scene-heading h2{font-size:22px}.scene-heading p{font-size:10px}.scene-visual{gap:12px;height:232px}.scene-caption{font-size:9px}.mobile-scene{gap:0}.preview-phone{width:94px;height:216px;margin-left:-20px}.ps-preview-workspace{height:180px;padding:10px 8px}.preview-desktop{width:74%}.preview-sync{font-size:7px;padding:0 8px}.ps-preview-tools{display:none}.window-bar{padding:0 8px}.export-file>span{font-size:9px}.export-file small{font-size:8px}.export-file{gap:5px}.export-file b{width:20px;font-size:7px}.showcase-controls{padding:0 16px;gap:12px}.showcase-controls button{font-size:11px;gap:6px}}
@media(prefers-reduced-motion:reduce){.scene-visual{transition:none;transform:none}.showcase *{animation:none!important}}