.thumbnail-demo,.csv-demo{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.thumbnail-demo-controls,.csv-demo-controls{display:grid;gap:16px;align-content:start;padding:24px;background:#f6f9fd;border-right:1px solid var(--line)}.thumbnail-demo-controls label,.csv-demo-controls label{display:grid;gap:7px;font-weight:800}.thumbnail-demo-controls textarea{resize:vertical}.thumbnail-demo-controls small{color:var(--muted);font-size:.72rem}.thumbnail-demo-controls fieldset,.csv-demo-controls fieldset{display:grid;gap:10px;padding:0;border:0}.thumbnail-demo-controls legend,.csv-demo-controls legend{margin-bottom:8px;font-weight:900}.layout-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.layout-choice-grid button{min-height:42px;padding:7px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.72rem;font-weight:800;text-transform:capitalize}.layout-choice-grid button[aria-pressed="true"]{color:var(--blue);background:var(--ice);border-color:#85acf0}.thumbnail-demo-stage{display:grid;gap:16px;align-content:center;padding:28px;background:linear-gradient(145deg,#101f3c,#07152f)}.thumbnail-demo-art{position:relative;overflow:hidden;aspect-ratio:16/9;background:radial-gradient(circle at 72% 30%,#ffd170 0 8%,transparent 9%),linear-gradient(135deg,#164576,#252d5e 55%,#68415f);border:1px solid rgb(255 255 255/.15);border-radius:15px;box-shadow:0 22px 55px -25px #000}.thumbnail-demo-stage[data-format="shorts"] .thumbnail-demo-art{max-height:520px;aspect-ratio:9/16;justify-self:center}.thumbnail-demo-art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(2 8 20/var(--demo-overlay,.56)),transparent 78%)}.thumbnail-demo-stage[data-layout="right-gradient"] .thumbnail-demo-art::before{background:linear-gradient(270deg,rgb(2 8 20/var(--demo-overlay,.56)),transparent 78%)}.thumbnail-demo-stage[data-layout="center-impact"] .thumbnail-demo-art::before{background:rgb(2 8 20/.46)}.thumbnail-demo-stage[data-layout="top-banner"] .thumbnail-demo-art::before{inset:0 0 65%;background:rgb(2 8 20/.75)}.thumbnail-demo-stage[data-layout="bottom-banner"] .thumbnail-demo-art::before{inset:65% 0 0;background:rgb(2 8 20/.75)}.thumbnail-demo-stage[data-layout="split-image"] .thumbnail-demo-art::before{inset:0 52% 0 0;background:rgb(2 8 20/.85)}.demo-person{position:absolute;right:9%;bottom:-16%;width:38%;aspect-ratio:.7;background:linear-gradient(160deg,#69b5ff,#244e97);border-radius:48% 48% 18% 18%;transform:rotate(-3deg)}.demo-person::before{content:"";position:absolute;top:-22%;left:24%;width:53%;aspect-ratio:1;background:#f2bd8c;border-radius:50%}.demo-safe-area{position:absolute;z-index:3;inset:5%;border:1px dashed rgb(255 255 255/.55);border-radius:8px}.thumbnail-demo-copy{position:absolute;z-index:2;top:34%;left:6%;display:grid;gap:7px;width:54%;color:#fff;text-shadow:0 2px 8px #000}.thumbnail-demo-copy i{width:28%;height:7px;background:#54a3ff;border-radius:6px}.thumbnail-demo-copy strong{font-size:clamp(1.75rem,5vw,4rem);font-weight:950;line-height:.9;letter-spacing:-.055em}.thumbnail-demo-copy small{font-weight:800}.thumbnail-demo-stage[data-layout="right-gradient"] .thumbnail-demo-copy{left:auto;right:6%;text-align:right}.thumbnail-demo-stage[data-layout="center-impact"] .thumbnail-demo-copy{left:8%;width:84%;text-align:center}.thumbnail-demo-stage[data-layout="center-impact"] .thumbnail-demo-copy i{margin-inline:auto}.thumbnail-demo-stage[data-layout="top-banner"] .thumbnail-demo-copy{top:7%;width:88%}.thumbnail-demo-stage[data-layout="bottom-banner"] .thumbnail-demo-copy{top:69%;width:88%}.thumbnail-demo-stage[data-layout="split-image"] .thumbnail-demo-copy{top:34%;left:5%;width:39%}.thumbnail-demo-art>em{position:absolute;z-index:4;right:3%;bottom:4%;padding:3px 6px;color:#fff;background:#111;border-radius:4px;font-size:.7rem;font-style:normal;font-weight:900}.thumbnail-feed-check{display:flex;gap:12px;align-items:center;color:#fff}.thumbnail-feed-check>div:last-child{display:grid;gap:3px}.thumbnail-feed-check span{color:#a8bbd8;font-size:.76rem}.thumbnail-mini{display:grid;place-items:center;width:132px;aspect-ratio:16/9;padding:8px;background:linear-gradient(130deg,#123e71,#553653);border-radius:8px;text-align:center}.thumbnail-mini b{font-size:.7rem;font-weight:950;line-height:.95}.thumbnail-package{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:14px;color:#cbd9ee;background:rgb(255 255 255/.07);border-radius:10px;font-size:.76rem}.thumbnail-package strong{grid-column:1/-1;color:#fff}.csv-detected{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.csv-detected span{display:grid;gap:2px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px}.csv-detected small{color:var(--muted);font-size:.65rem}.csv-demo-controls fieldset label{display:flex;gap:8px;align-items:flex-start;font-size:.82rem}.csv-demo-result{display:grid;gap:18px;align-content:start;padding:24px}.csv-demo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.csv-demo-stats article{display:grid;gap:2px;padding:13px;background:#f5f8fc;border:1px solid var(--line);border-radius:10px}.csv-demo-stats strong{font-size:1.3rem}.csv-demo-stats span{color:var(--muted);font-size:.7rem;font-weight:800}.csv-issue-list{display:grid;gap:8px}.csv-demo-issue{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px}.csv-demo-issue[hidden]{display:none}.csv-demo-issue>span:first-child{padding:4px 7px;border-radius:999px;font-size:.67rem;font-weight:900;text-transform:uppercase}.csv-demo-issue[data-severity="error"]>span:first-child{color:#8a2337;background:#fde8ec}.csv-demo-issue[data-severity="warning"]>span:first-child{color:#755000;background:#fff2d4}.csv-demo-issue div{display:grid;gap:2px}.csv-demo-issue small{color:var(--muted)}.csv-demo-issue>em{color:#08765e;font-size:.7rem;font-style:normal;font-weight:900}.csv-output-list{display:flex;flex-wrap:wrap;gap:7px}.csv-output-list strong{width:100%}.csv-output-list span{padding:6px 9px;color:#28466e;background:#edf4ff;border-radius:999px;font-size:.72rem;font-weight:800}@media(max-width:850px){.thumbnail-demo,.csv-demo{grid-template-columns:1fr}.thumbnail-demo-controls,.csv-demo-controls{border-right:0;border-bottom:1px solid var(--line)}.thumbnail-demo-stage{padding:20px}}@media(max-width:560px){.layout-choice-grid,.thumbnail-package{grid-template-columns:1fr}.csv-demo-stats{grid-template-columns:1fr 1fr}.csv-demo-issue{grid-template-columns:auto 1fr}.csv-demo-issue>em{grid-column:2}.thumbnail-demo-copy strong{font-size:1.7rem}.csv-detected{grid-template-columns:1fr}}
