/* Demo portal — built on the same Colorpack tokens as the templates (base.css) */
body.portal{background:var(--ground);--p:#1c2f6e;--pd:#121f4d;--a:#e0b13b;--on-a:#2d3236;--tint:#eceff8}
.ph{position:relative;color:#fff;background:linear-gradient(120deg,#0e1a45,#1c2f6e);overflow:hidden}
.ph::before{content:"";position:absolute;inset:-25%;pointer-events:none;filter:blur(26px);background:radial-gradient(38% 42% at 18% 28%,rgba(224,177,59,.4),transparent 70%),radial-gradient(34% 44% at 82% 72%,rgba(255,255,255,.18),transparent 70%);animation:aurora 22s ease-in-out infinite alternate}
.ph .wrap{position:relative;padding-block:56px 72px}
.ph h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.2;margin:0 0 12px;animation:fadeup .8s both}
.ph p{max-width:62ch;font-size:1.1875rem;margin:0;animation:fadeup .8s .1s both}
.ph .meta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;animation:fadeup .8s .2s both}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:.9375rem}
.pill b{color:var(--a)}
@keyframes aurora{0%{transform:translate3d(-4%,-3%,0) rotate(0)}100%{transform:translate3d(5%,4%,0) rotate(8deg) scale(1.1)}}
@keyframes fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;padding-block:12px}
.chips2{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--p)}
.chip[aria-pressed=true]{background:var(--p);border-color:var(--p);color:#fff}
.chip small{opacity:.7;font-weight:400;margin-left:4px}
.search{position:relative}
.search input{min-height:48px;min-width:240px;padding:0 16px;border:2px solid var(--line);border-radius:var(--r-md);font:inherit;background:var(--paper);color:var(--ink)}
.search input:focus{border-color:var(--p)}
main.pm{padding:40px 0 24px}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px}
.pcard{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:fadeup .6s both;animation-delay:calc(var(--i,0)*45ms)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-pop)}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tint);display:block;border-bottom:1px solid var(--line)}
.shot iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.shot .go{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 40%,rgba(10,20,50,.7));opacity:0;transition:opacity .25s;color:#fff;font-weight:700;align-content:end;padding-bottom:18px}
.pcard:hover .go,.shot:focus-visible .go{opacity:1}
.shot .skel{position:absolute;inset:0;background:linear-gradient(100deg,var(--tint) 30%,#fff 50%,var(--tint) 70%);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.pb{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pb h2{font-size:1.25rem;font-weight:700;margin:0}
.pb .org{color:var(--gray);font-size:.9375rem;margin:0}
.pb p.d{margin:0;font-size:.9688rem;line-height:1.6}
.sw{display:flex;gap:6px}
.sw i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tg{display:flex;gap:6px;flex-wrap:wrap}
.act{display:flex;gap:10px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.act .btn{min-height:44px;padding:0 16px;font-size:.9688rem}
.empty{text-align:center;padding:64px 0;color:var(--gray)}
.dl{background:var(--paper);padding:56px 0;margin-top:32px}
.dl .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:28px}
.dl .box{background:var(--tint);border-radius:var(--r-lg);padding:24px}
.dl code{background:var(--paper);padding:2px 8px;border-radius:6px;font-size:.9rem}
footer.pf{background:var(--ink);color:#fff;padding:24px 0;font-size:.9375rem;border-top:4px solid var(--a)}
/* preview page */
body.pv{display:flex;flex-direction:column;height:100vh;background:#e6e9ee;overflow:hidden}
.pt{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.pt h1{font-size:1.0625rem;font-weight:700;margin:0;flex:1;min-width:160px}
.pt h1 small{display:block;font-weight:400;color:var(--gray);font-size:.8125rem}
.seg[hidden]{display:none}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.seg button{min-height:40px;min-width:48px;border:0;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;padding:0 12px}
.seg button[aria-pressed=true]{background:var(--p);color:#fff}
.ib{min-height:44px;min-width:44px;border:2px solid var(--line);background:var(--paper);border-radius:var(--r-md);font:inherit;cursor:pointer;padding:0 12px;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ib:hover{border-color:var(--p)}
.stage{flex:1;display:flex;min-height:0}
.view{flex:1;display:grid;place-items:center;padding:16px;overflow:auto;min-width:0}
.dev{height:100%;width:100%;max-width:100%;background:#fff;border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.dev iframe{width:100%;height:100%;border:0;display:block}
.dev.tablet{width:820px}.dev.mobile{width:390px}
aside.info{display:flex;flex-direction:column;width:320px;background:var(--paper);border-left:1px solid var(--line);padding:20px;overflow:auto;transition:margin .3s}
aside.info.closed{margin-right:-321px}
aside.info h2{font-size:1.125rem;font-weight:700;margin:0 0 8px}
aside.info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.9375rem}
aside.info dt{color:var(--gray)}aside.info dd{margin:0}
.swl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 18px}
.swl div{font-size:.75rem;text-align:center;color:var(--gray)}
.swl i{display:block;height:40px;border-radius:8px;margin-bottom:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
aside.info a.l{display:flex;min-height:44px;align-items:center}
@media(max-width:900px){aside.info{position:fixed;right:0;top:0;bottom:0;z-index:50;box-shadow:var(--shadow-pop)}}
@media(prefers-reduced-motion:reduce){.pcard,.ph h1,.ph p,.ph .meta-row{animation:none}.ph::before{animation:none}.shot .skel{animation:none}}

aside.info .ct{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
aside.info .ct h2{margin:0}
aside.info .ct p{margin:0 0 6px;font-size:.9375rem}
aside.info .ct .cb{display:flex;min-height:44px;align-items:center;justify-content:center;background:var(--p);color:#fff;border-radius:var(--r-md);font-weight:700;text-decoration:none}
aside.info .ct .cl{display:flex;min-height:44px;align-items:center;color:var(--p);font-weight:600}
aside.info .ct small{display:block;color:#4a5160;font-size:.8125rem;line-height:1.5;margin-top:4px}
aside.info .ct small a{color:var(--p)}
aside.info .ct .cp{color:var(--ink)}