body[data-app="shorts-safe-zone"] { --paper:#edf0ec; --surface:#fffefa; --ink:#27312d; --muted:#5c665f; --accent:#366656; --line:#d5ded6; --wash:#e6f1e9; }
.safe-preview { background:#dce5dd; }
.phone { width:min(100%,310px); aspect-ratio:9 / 16; border-radius:11px; background:#202822; }
.phone :is(video,#photo,#safe-mask,.platform-ui) { position:absolute; inset:0; width:100%; height:100%; }
.phone #photo,.phone video { object-fit:contain; }
.phone[data-fit="cover"] :is(video,#photo) { object-fit:cover; }
#safe-mask,.platform-ui { pointer-events:none; }
.platform-ui { color:white; container-type:inline-size; }
.platform-ui::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#1116 0%,transparent 17%,transparent 68%,#14181350 84%,#131815a1 100%); }
.platform-ui #ui-raster { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; filter:drop-shadow(0 1px 2px #0009); }
#ui-header { position:absolute; top:6%; left:5%; font-size:5.2cqi; font-weight:830; text-shadow:0 1px 4px #000; }
.phone[data-platform="reels"] #ui-header,.phone[data-platform="tiktok"] #ui-header { left:0; right:0; text-align:center; font-size:4.7cqi; }
.ui-caption { position:absolute; left:5%; right:19%; bottom:5.5%; display:grid; gap:2px; font-size:4.2cqi; line-height:1.26; text-shadow:0 1px 3px #000; }
.phone[data-platform="reels"] .ui-caption { bottom:7%; }
.phone[data-platform="tiktok"] .ui-caption { bottom:13%; }
.ui-caption > span { white-space:pre-line; overflow-wrap:anywhere; }
#ui-audio { font-size:3.7cqi; }
.frame-label { text-align:center; margin:10px 0 0; font-size:.75rem; color:#4a5f53; font-variant-numeric:tabular-nums; }
.example-frame { background:linear-gradient(148deg,#314a43 0 47%,#587466 47% 72%,#436455 72%); }
.example-frame strong { align-self:center; transform:translateY(-26px); }
.example-frame > span { bottom:27%; }
#reset-guide { min-height:34px; margin-top:6px; padding:4px 9px; }