/* Existing samples are layout studies; native previews use supplied real footage. */
.native-poster{display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:16/10;width:100%;background:#071017;overflow:hidden}.native-poster img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}.native-poster>span{position:absolute;left:12px;bottom:12px;padding:7px 10px;border-radius:6px;background:#071017e8;color:#eef7fa;font-size:14px}#style-show-all[hidden],#style-selection[hidden]{display:none}
.style-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.style-filters button{min-height:44px;white-space:normal}.style-filters [aria-pressed=true]{background:#c4fa83;color:#17212e;border-color:#c4fa83}.native-intro{font-size:16px;line-height:1.6;max-width:650px;color:#d7e6ee;margin:0 0 20px}.native-flow{display:grid;gap:12px;width:100%;padding:22px;background:#102330;border-bottom:1px solid #526572}.native-flow-label{font-size:12px;letter-spacing:.1em;color:#a9c2d0}.native-flow-step{display:flex;align-items:center;gap:14px;color:#eaf3fa;font-size:16px;line-height:1.4}.native-flow-step b{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid #5d7c82;border-radius:50%;font-size:14px;color:#c4fa83}.native-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.native-guide div{border-top:1px solid #526572;padding-top:12px;min-width:0}.native-guide dt{font-size:14px;color:#b4cfac;margin-bottom:7px}.native-guide dd{font-size:16px;line-height:1.5;margin:0;color:#edf4f8}.native-preview{display:block;width:100%;max-width:310px;aspect-ratio:9/16;max-height:58dvh;object-fit:contain;background:#05090c;margin:0 auto;border-radius:10px}#style-dialog>.native-flow{max-width:550px;margin:auto;border-radius:10px}
@media(max-width:600px){.native-guide{grid-template-columns:1fr;gap:12px}.style-filters button{font-size:14px}.native-preview{max-height:55dvh}}
.style-library-controls{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.style-library-controls label{display:grid;gap:8px;flex:1;min-width:200px;font-weight:600}.style-library-controls input,.style-library-controls select{width:100%;min-height:48px;padding:12px;background:#14232f;color:#ecf4f8;border:1px solid #617583;border-radius:8px;font:inherit}
.style-library-current{margin-bottom:20px;color:#bdcfd8;font-size:16px}.style-grid,.style-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.style-card{padding:0;text-align:left;min-width:0;overflow:hidden;border:1px solid #526572;background:#192a36;border-radius:12px;color:#f2f6f8;cursor:pointer;font:inherit;display:flex;flex-direction:column}.style-card:hover,.style-card:focus-visible{border-color:var(--lime);outline:2px solid var(--lime);outline-offset:2px}.style-card-copy{padding:18px;display:grid;gap:10px}.style-card-copy strong{font-size:20px;line-height:1.35}.style-card-copy>span{font-size:16px;line-height:1.55;color:#c8d6df}.style-card-copy .style-card-action{color:#c1ff95;font-weight:600}.style-footnote{font-size:14px;line-height:1.6;color:#aebec7;margin:18px 0}#style-show-all{display:block;margin:24px auto}
.style-sample{width:100%;aspect-ratio:16/10;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;padding:10%;background:var(--sample-bg);color:var(--sample-ink);border-bottom:1px solid #566778}.style-sample strong{font:800 clamp(20px,2.1vw,36px)/1.05 var(--body);letter-spacing:-.035em;position:relative;z-index:2;max-width:100%;overflow-wrap:anywhere}.sample-detail{position:absolute;bottom:8%;left:10%;font:600 12px/1.3 var(--body);letter-spacing:.07em}.sample-rule{position:absolute;top:12%;left:10%;height:5px;width:20%;background:var(--sample-accent)}.sample-block{position:absolute;right:-8%;top:20%;width:40%;height:70%;background:var(--sample-accent);opacity:.3;transform:rotate(-14deg)}.sample-dot{position:absolute;right:12%;top:15%;width:16%;aspect-ratio:1;border:2px solid var(--sample-accent);border-radius:50%}
.sample-scrapbook strong,.sample-cutout-type strong{background:var(--sample-bg);transform:rotate(-3deg);box-shadow:7px 8px 0 #0003;padding:8px}.sample-scrapbook .sample-block{opacity:.85;clip-path:polygon(0 5%,15% 0,30% 5%,50% 1%,80% 5%,100% 0,100% 100%,0 95%)}.sample-scrapbook .sample-rule{height:14px;width:35%;opacity:.6;transform:rotate(6deg)}
.sample-product-stage{justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 80%,#c4ced7,transparent 50%),var(--sample-bg)}.sample-product-stage .sample-block{width:45%;height:50%;border-radius:50%;right:25%;top:20%;opacity:.08}.sample-product-stage .sample-dot,.sample-mono-luxury .sample-dot{display:none}.sample-product-stage .sample-rule{width:12%;height:2px}
.sample-kinetic-type strong{font-size:clamp(28px,3vw,48px);transform:rotate(-8deg)}.sample-kinetic-type .sample-block{opacity:1;width:18%;height:160%;top:-30%;right:4%;transform:rotate(16deg)}
.sample-flat-vector .sample-block{border-radius:50%;width:60%;height:90%;top:30%;right:-20%;opacity:.8}.sample-flat-vector .sample-dot{background:#e65e92;border:0;border-radius:30%;transform:rotate(25deg);width:22%}
.sample-dark-glow{box-shadow:inset 0 0 65px #4ddd2420}.sample-dark-glow .sample-block{background:transparent;border:2px solid var(--sample-accent);box-shadow:0 0 18px #7cff3d55;opacity:1;border-radius:12px}.sample-dark-glow .sample-dot{display:none}
.sample-editorial-grid strong,.sample-mono-luxury strong,.sample-retro-film strong{font-family:Georgia,serif;font-weight:400}.sample-editorial-grid .sample-block{transform:none;top:0;right:0;height:100%;width:30%;opacity:.7}.sample-editorial-grid .sample-rule{background:var(--sample-ink);height:1px;width:80%}
.sample-archive-dossier{background:repeating-linear-gradient(0deg,transparent 0 22px,#0001 23px 24px),var(--sample-bg)}.sample-archive-dossier strong{font-family:monospace}.sample-archive-dossier .sample-block{height:14%;width:60%;top:62%;right:5%;opacity:.65;transform:rotate(-4deg)}
.sample-map-story .sample-block{background:transparent;width:55%;height:50%;border:6px dashed var(--sample-accent);border-left:0;right:-8%;opacity:.65;transform:rotate(-25deg);border-radius:50%}.sample-map-story .sample-dot{background:var(--sample-accent);width:7%;right:18%;top:18%}
.sample-data-story .sample-block{transform:none;bottom:0;top:auto;right:6%;width:18%;height:60%;opacity:.6;box-shadow:-34px 25px 0 var(--sample-accent),-68px 50px 0 var(--sample-accent)}.sample-data-story .sample-dot{display:none}
.sample-blueprint{background-image:linear-gradient(#ffffff13 1px,transparent 1px),linear-gradient(90deg,#ffffff13 1px,transparent 1px);background-size:20px 20px}.sample-blueprint .sample-block{background:none;border:2px dashed var(--sample-accent);opacity:.8;transform:rotate(25deg)}
.sample-glass-ui{background:radial-gradient(at 80% 80%,#367f96,transparent 60%),var(--sample-bg)}.sample-glass-ui strong{padding:16px;background:#ffffff13;border:1px solid #ffffff55;border-radius:12px;box-shadow:10px 14px 30px #0003}.sample-glass-ui .sample-block{border-radius:12px;background:#ffffff25;transform:rotate(8deg);opacity:1}
.sample-mono-luxury{justify-content:center;text-align:center}.sample-mono-luxury strong{font-size:clamp(24px,2.5vw,40px);letter-spacing:.06em}.sample-mono-luxury .sample-block{background:transparent;opacity:.4;border:1px solid var(--sample-accent);transform:none;inset:8%;width:auto;height:auto}.sample-mono-luxury .sample-rule{display:none}
.sample-soft-gradient{background:radial-gradient(at 100% 90%,var(--sample-accent),transparent 65%),radial-gradient(at 0 0,#a7cefa,transparent 65%),var(--sample-bg)}.sample-soft-gradient .sample-block{border-radius:50%;filter:blur(20px)}
.sample-bento .sample-block{transform:none;border-radius:12px;top:10%;right:8%;width:24%;height:35%;box-shadow:0 85px 0 var(--sample-accent),-85px 85px 0 var(--sample-accent)}.sample-bento .sample-dot{display:none}
.sample-swiss-poster{align-items:flex-start;padding-top:22%}.sample-swiss-poster .sample-block{transform:none;opacity:1;width:35%;height:35%;top:auto;bottom:0;right:0}.sample-swiss-poster .sample-dot{border-color:var(--sample-ink);width:12%}
.sample-brutalist strong{background:var(--sample-ink);color:var(--sample-bg);padding:10px;box-shadow:8px 8px 0 var(--sample-accent)}.sample-brutalist .sample-block{transform:rotate(30deg);opacity:.9}.sample-brutalist .sample-dot{display:none}
.sample-cutout-type strong{background:#fff7d7;border:6px solid var(--sample-accent);letter-spacing:.08em}.sample-cutout-type .sample-dot{border-radius:0;background:var(--sample-accent);transform:rotate(18deg)}
.sample-split-screen{background:linear-gradient(90deg,var(--sample-bg) 49%,var(--sample-ink) 49% 51%,#566886 51%)}.sample-split-screen strong{word-spacing:.3em}.sample-split-screen .sample-block{width:20%;right:10%;transform:none;opacity:.7;border-radius:50%}
.sample-sports-impact .sample-block{opacity:.9;transform:skew(-20deg);width:35%;top:-10%;height:130%}.sample-sports-impact strong{font-style:italic;font-size:clamp(28px,3vw,48px)}.sample-sports-impact .sample-dot{display:none}
.sample-isometric .sample-block{transform:rotate(-30deg) skew(25deg);width:45%;height:45%;right:0;top:40%;opacity:.6;box-shadow:15px 15px 0 #8dacae}.sample-isometric .sample-dot{display:none}
.sample-line-draw .sample-block{background:none;border:3px dashed var(--sample-ink);border-radius:45%;opacity:.3}.sample-line-draw .sample-rule{transform:rotate(-3deg);border-radius:50%}.sample-line-draw strong{font-family:Georgia,serif;font-style:italic}
.sample-paper-depth .sample-block{opacity:.5;transform:rotate(-15deg);box-shadow:-16px 16px 0 #ccab99,-32px 32px 0 #b49383}.sample-paper-depth strong{text-shadow:2px 3px 0 #fff5}.sample-paper-depth .sample-dot{display:none}
.sample-stop-motion .sample-block{opacity:.8;transform:rotate(10deg);border:6px solid #fff9}.sample-stop-motion strong{transform:rotate(-2deg);font-family:Georgia,serif}.sample-stop-motion .sample-dot{border-radius:15%}
.sample-clay .sample-block{border-radius:35%;opacity:1;box-shadow:inset -10px -12px 20px #8b655855,12px 12px 25px #34453544}.sample-clay .sample-dot{border-radius:35%;background:var(--sample-bg);box-shadow:inset -5px -8px 15px #34453544}
.sample-retro-film{border:12px solid #1e1c19;background-image:linear-gradient(115deg,#ffffff0a,transparent)}.sample-retro-film .sample-rule{height:2px}.sample-retro-film .sample-block{opacity:.1;border-radius:50%}
.sample-retro-desktop strong{font-family:monospace;padding:20px 12px 12px;background:#d8dddd;border:3px outset #eaf2f2;box-shadow:8px 8px 0 #0005}.sample-retro-desktop .sample-rule{z-index:3;top:26%;left:12%;width:52%;background:#274d6a;height:12px}.sample-retro-desktop .sample-dot{display:none}
.sample-pixel strong{font-family:monospace;letter-spacing:.02em;text-shadow:4px 4px 0 #725798}.sample-pixel .sample-dot{border-radius:0;box-shadow:6px 6px 0 var(--sample-accent)}.sample-pixel .sample-block{transform:none;clip-path:polygon(0 0,65% 0,65% 30%,100% 30%,100% 100%,30% 100%,30% 65%,0 65%)}
.sample-comic{background-image:radial-gradient(#24233422 1px,transparent 1px);background-size:6px 6px}.sample-comic strong{background:var(--sample-bg);border:3px solid var(--sample-ink);padding:10px;box-shadow:7px 7px 0 var(--sample-ink);transform:rotate(-4deg)}.sample-comic .sample-block{opacity:.7}
.sample-neon-noir{background-image:linear-gradient(135deg,transparent 50%,#97368655)}.sample-neon-noir strong{text-shadow:2px 2px 0 #b053a7,-1px -1px 0 #3bc7d3}.sample-neon-noir .sample-block{background:transparent;opacity:.6;border:3px solid var(--sample-accent);box-shadow:0 0 15px var(--sample-accent)}
.sample-liquid .sample-block{border-radius:60% 35% 65% 40%;opacity:.8;transform:rotate(30deg);width:65%;height:110%;right:-25%}.sample-liquid .sample-dot{border-radius:60% 40% 70% 30%;background:var(--sample-accent);opacity:.5}
.style-selection{margin:24px;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:20px;border:1px solid #58717b;border-radius:10px;background:#15252d}.style-selection>div{min-width:0}.style-selection-label{display:block;color:#aac1ca;font-size:14px;margin-bottom:6px}.style-selection strong{display:block;font-size:20px;line-height:1.4}.style-selection p{color:#bdcdd5;font-size:16px;line-height:1.5;margin:8px 0 0}.style-selection button{flex-shrink:0}
#style-dialog{color:#f1f5f7;background:#0f1b24;border:1px solid #607888;border-radius:16px;padding:24px;width:min(920px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}#style-dialog::backdrop{background:#000b}body:has(#style-dialog[open]){overflow:hidden}.style-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.style-dialog-header h2{font:600 28px/1.25 var(--display);margin:0}.style-dialog-header button{flex-shrink:0}#style-dialog>p{font-size:16px;line-height:1.6}#style-dialog>.style-sample{max-width:550px;margin:auto;border-radius:10px}#style-dialog>.style-sample strong{font-size:clamp(24px,5vw,48px)}.style-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.style-picker-footer,.style-detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.style-spec{margin-top:20px;border-top:1px solid #485e6d;padding-top:18px}.style-spec summary{cursor:pointer;font-size:16px}.style-spec pre{white-space:pre-wrap;overflow-wrap:anywhere;font:400 16px/1.65 var(--body);color:#cbdae2}.style-dialog-status{font-size:16px;color:#c1ff95}.style-dialog-status textarea{width:100%;min-height:150px}
@media(max-width:1200px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.style-sample strong{font-size:28px}}
@media(max-width:600px){.style-grid,.style-quick-grid{grid-template-columns:1fr}.style-library-controls{gap:14px}.style-library-controls label{min-width:0;flex-basis:100%}.style-selection{margin:18px;padding:16px;align-items:stretch;flex-direction:column;gap:14px}.style-selection strong{font-size:18px}#style-dialog{padding:18px}.style-dialog-header h2{font-size:26px}.style-detail-actions{flex-direction:column}.style-sample strong{font-size:32px}.style-picker-footer{flex-direction:column}.style-picker-footer button{width:100%}}
@media(prefers-reduced-motion:no-preference){.style-card:hover .sample-block{transition:transform .45s ease;transform:translateY(-6px) rotate(-5deg)}}