/* Paper media cards (illustrations, demo frames), poster buttons, clip + live frames, dialogs (lightbox, full player). */
.paper{background:var(--paper);color:var(--paper-ink);border:3px solid var(--paper-ink);border-radius:12px;padding:10px;box-shadow:6px 6px 0 var(--paper-shadow);margin:0}
.paper-img{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in;border-radius:6px;overflow:hidden;position:relative}
.paper-img img{width:100%;height:auto;border-radius:6px}
.paper-img.single{cursor:default}
.ph{position:relative;display:grid;place-items:center;text-align:center;padding:24px;background:#E8E0CD;color:#4A4234;border-radius:6px;font:600 16px/1.35 var(--sans);aspect-ratio:var(--ar,16/10);min-height:140px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.thumbs button{border:2px solid var(--paper-ink);border-radius:6px;padding:0;background:none;cursor:zoom-in;overflow:hidden;min-height:44px}
.thumbs img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

/* Demo card */
.demo{--w:100%}
.demo.portrait{max-width:360px;margin-inline:auto;width:100%}
.demo-tabs{display:flex;gap:6px;margin-bottom:10px}
.demo-tabs button{flex:1;min-height:44px;border:2px solid var(--paper-ink);border-radius:8px;background:transparent;color:var(--paper-ink);font:600 13px/1.2 var(--sans);cursor:pointer;padding:6px 10px}
.demo-tabs button[aria-selected="true"]{background:var(--paper-ink);color:var(--paper)}
.demo-frame{position:relative;width:100%;aspect-ratio:9/16;background:#14171A;border-radius:6px;overflow:hidden;isolation:isolate}
.demo-frame .ph-title{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:#B9C0C4;font:600 16px/1.35 var(--sans);z-index:0}
.demo-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;z-index:1;display:block}
.demo-poster img,.demo-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.demo-frame video{z-index:1}
.demo-poster .play,.demo-clip-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--lime);box-shadow:0 4px 18px rgba(0,0,0,.45);z-index:2}
.demo-poster .play::after{content:"";position:absolute;left:27px;top:20px;border-left:21px solid #0F1113;border-top:14px solid transparent;border-bottom:14px solid transparent}
.demo-poster:hover .play{background:var(--lime300)}
.demo-tag{position:absolute;left:10px;top:10px;z-index:3;background:var(--lime);color:#0F1113;font:700 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;border-radius:6px;pointer-events:none}
.demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;background:#14171A}
.demo-frame.is-live .demo-poster{visibility:hidden}
.demo-sound{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;z-index:2;padding:0}
.demo-sound .badge{position:absolute;right:10px;bottom:10px;background:rgba(15,17,19,.82);color:#EEF0EE;font:600 12px/1 var(--sans);padding:8px 10px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}
.demo-frame.nofile video,.demo-frame.nofile .demo-sound{display:none}
.demo-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font:500 13px/1.45 var(--sans)}
.demo-cap .btn{min-height:44px;border-color:var(--paper-ink);color:var(--paper-ink);padding:6px 12px;font-size:13px;flex:none}
.demo-cap .btn:hover{background:var(--paper-ink);color:var(--paper)}
.hero-demo{width:100%}

/* Native dialogs */
dialog.dlg{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;color:#EEF0EE}
dialog.dlg::backdrop{background:rgba(5,6,7,.9)}
.dlg-box{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:56px 12px 12px}
.dlg-close{position:absolute;right:12px;top:8px;z-index:2;min-height:44px;min-width:44px;border-radius:var(--r2);border:1.5px solid #4A5157;background:#171A1D;color:#EEF0EE;font:600 14px/1 var(--sans);cursor:pointer;padding:0 14px}
.dlg-close:hover{border-color:#EEF0EE}
dialog.dlg :focus-visible{outline-color:#D4FF85}
.dlg iframe{width:100%;height:100%;border:0;background:#000;border-radius:8px}
.dlg-lb img{max-width:100%;max-height:calc(100dvh - 80px);width:auto;height:auto;border:3px solid var(--paper-ink);border-radius:8px;background:var(--paper)}
.dlg-nav{position:absolute;top:50%;transform:translateY(-50%);min-height:48px;min-width:48px;border-radius:50%;border:1.5px solid #4A5157;background:#171A1D;color:#EEF0EE;font:600 20px/1 var(--sans);cursor:pointer;z-index:2}
.dlg-nav.prev{left:10px}.dlg-nav.next{right:10px}
.dlg-nav[hidden]{display:none}