/* Original product interface demonstrations */
.product-frame{border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg);min-height:440px}
.framebar{display:flex;align-items:center;gap:1rem;min-height:52px;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:.8rem}.framebar span{color:#ff6b6b;letter-spacing:.15em}.framebar b{margin:auto}.framebar em{color:var(--muted);font-style:normal}
.dash{display:grid;grid-template-columns:64px 1fr;min-height:390px}.dash aside{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}.dash aside b{display:grid;place-items:center;width:2rem;height:2rem;background:var(--primary);color:#fff;border-radius:.55rem}.dash aside i{width:1.5rem;height:.4rem;border-radius:1rem;background:var(--surface-3)}.dash>div{padding:1.25rem}.metric-main span,.metric-main small{display:block;color:var(--muted)}.metric-main strong{display:block;font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.07em}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0}.metric-row article{padding:.9rem;border:1px solid var(--line);border-radius:.7rem}.metric-row span{display:block;color:var(--muted);font-size:.75rem}.metric-row b{font-size:1.25rem}.chart{width:100%;height:auto;overflow:visible}.chart .gridline{stroke:var(--line);stroke-width:1}.chart .trend{stroke:var(--primary);stroke-width:4}.chart .area{stroke:none;fill:color-mix(in srgb,var(--primary) 13%,transparent)}
.canvas{position:relative;min-height:390px;background-image:radial-gradient(circle,var(--line) 1px,transparent 1px);background-size:22px 22px}.node{position:absolute;width:175px;padding:.9rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface);box-shadow:var(--shadow-md);z-index:2}.node small,.node span{display:block;color:var(--muted);font-size:.72rem}.node b{display:block;font-size:.9rem;margin:.2rem 0}.n1{left:5%;top:40%}.n2{left:29%;top:18%}.n3{left:53%;top:48%}.n4{right:4%;top:24%}.line{position:absolute;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));transform-origin:left;z-index:1}.l1{width:28%;left:19%;top:48%;transform:rotate(-18deg)}.l2{width:29%;left:42%;top:37%;transform:rotate(16deg)}.l3{width:27%;left:66%;top:50%;transform:rotate(-21deg)}
.finance-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:1rem;padding:1.2rem}.finance-grid>article,.fin-table{padding:1.2rem;border:1px solid var(--line);border-radius:.8rem}.finance-grid article strong{display:block;font-size:2.1rem}.finance-grid article svg{margin-top:1.5rem;width:100%;stroke:var(--accent);stroke-width:4}.donut{display:grid;place-content:center;text-align:center;background:conic-gradient(var(--accent) 0 72%,var(--surface-3) 72%);border-radius:50%!important;aspect-ratio:1;max-width:210px;margin:auto;box-shadow:inset 0 0 0 35px var(--surface)}.donut b{font-size:2rem}.donut span{font-size:.73rem;color:var(--muted)}.fin-table{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}.fin-table span{color:var(--muted)}
.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1rem;background:var(--surface-2);min-height:390px}.columns section{padding:.8rem;background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:.75rem}.columns h3{font-size:.8rem;color:var(--muted)}.columns article{padding:.8rem;margin:.6rem 0;border:1px solid var(--line);border-radius:.55rem;background:var(--surface);font-size:.82rem;box-shadow:var(--shadow-sm)}
.product-frame.settings{padding:0}.product-frame.settings article{display:grid;grid-template-columns:2.5rem 1fr auto;align-items:center;gap:.8rem;margin:0;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.code-ui{border-radius:var(--radius-lg);overflow:hidden;background:#07101f;color:#c8d7ed;box-shadow:var(--shadow-lg);border:1px solid #25334b}.code-ui .tabs{background:#0d1829;border:0;border-radius:0;margin:0}.code-ui .tabs button{color:#8fa1ba}.code-ui .tabs button[aria-selected="true"]{background:#18253a;color:#fff}.codeblock{position:relative;margin:0;padding:1.4rem;overflow:auto;font-family:var(--font-mono);font-size:.82rem;line-height:1.8;white-space:pre}.codeblock .copy,.code-ui>[data-copy]{position:absolute;right:1rem;top:4.2rem}.code-ui button[data-copy]{float:right;margin:1rem;border:1px solid #30425e;background:#15243a;color:#fff;border-radius:.5rem;padding:.45rem .65rem}
.phone-stage{position:relative;min-height:540px;display:grid;place-items:center}.phone{width:min(280px,75vw);aspect-ratio:9/18.5;padding:12px;border:6px solid var(--text);border-radius:2.8rem;background:var(--text);box-shadow:var(--shadow-lg);transform:rotate(3deg)}.screen{height:100%;border-radius:2.15rem;background:linear-gradient(180deg,#fbf8f3,#eff6ff);color:#142033;padding:1.1rem;overflow:hidden}.screen::before{content:"";display:block;width:36%;height:.35rem;margin:0 auto 1.3rem;border-radius:1rem;background:#152033}.screen h3{font-size:1.6rem}.screen>article{padding:.8rem;margin:.7rem 0;background:#fff;border-radius:.8rem;box-shadow:0 7px 20px rgb(35 50 75 / .08);font-size:.8rem}.float-card{position:absolute;padding:.9rem 1rem;border:1px solid var(--line);border-radius:.8rem;background:var(--surface);box-shadow:var(--shadow-md);font-size:.78rem}.float-card.a{left:2%;top:25%}.float-card.b{right:1%;bottom:25%}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.demo-grid>a{padding:1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform var(--normal),box-shadow var(--normal)}.demo-grid>a:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.demo-grid small{color:var(--primary);font-weight:800}.demo-grid h3{margin:.7rem 0 .3rem}.thumb{position:relative;aspect-ratio:16/10;border-radius:.7rem;overflow:hidden;margin-bottom:1rem;background:#10192a}.thumb::before{content:"";position:absolute;left:8%;right:8%;top:12%;height:10%;border-radius:.3rem;background:rgb(255 255 255 / .12)}.thumb i,.thumb b,.thumb span{position:absolute;border-radius:.45rem;background:rgb(255 255 255 / .18)}.thumb i{left:8%;top:30%;width:30%;height:50%}.thumb b{right:8%;top:30%;width:48%;height:23%}.thumb span{right:8%;bottom:20%;width:48%;height:20%}.thumb.b2b{background:#eaf1fc}.thumb.b2b::before,.thumb.b2b i,.thumb.b2b b,.thumb.b2b span{background:#3157f633}.thumb.fintech{background:#0b1b21}.thumb.fintech b{background:#20c99755}.thumb.developer{background:#070d16}.thumb.mobile{background:#fff0e8}.thumb.mobile i{left:37%;width:25%;height:60%;background:#ff6d4b55}.thumb.one{background:linear-gradient(135deg,#eef2ff,#e5fff7)}
.ring{width:180px;aspect-ratio:1;border:22px solid var(--surface-3);border-top-color:var(--primary);border-right-color:var(--accent);border-radius:50%;display:grid;place-items:center}.ring::after{content:"72%";font-weight:850;font-size:2rem}
.verify{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);margin:1rem auto}.verify .icon{width:2rem;height:2rem}
/* Complete product-interface gallery */
.ui-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.ui-window{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}.ui-window>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--line);background:var(--surface-2)}.ui-window>header div{display:grid}.ui-window>header span,.ui-window small{color:var(--muted);font-size:.75rem}.customer-table-ui,.api-viewer{grid-column:1/-1}.activity-feed{list-style:none;padding:0;margin:0}.activity-feed li{display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;padding:1rem;border-bottom:1px solid var(--line)}.activity-feed li>span{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--surface-3);font-size:.7rem;font-weight:850}.activity-feed small{display:block}.notification-list>article{display:grid;grid-template-columns:.7rem 1fr;gap:.8rem;padding:1rem;border-bottom:1px solid var(--line)}.notification-list i{width:.65rem;height:.65rem;margin-top:.35rem;border-radius:50%;background:var(--primary)}.notification-list i.urgent{background:var(--warning)}.notification-list p{margin:0;font-size:.83rem}.user-row{display:grid;grid-template-columns:2.4rem 1fr minmax(120px,.5fr);align-items:center;gap:.8rem;padding:1rem;border-bottom:1px solid var(--line)}.user-row small{display:block}.user-row select{min-height:38px;padding:.45rem}.billing-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem}.billing-summary div{display:grid}.billing-summary strong{font-size:1.8rem}.billing-summary span{color:var(--muted);font-size:.8rem}.usage-meter{padding:0 1.2rem 1.2rem}.usage-meter>div{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem}.usage-meter>i{display:block;height:.55rem;border-radius:1rem;background:var(--surface-3);overflow:hidden;margin-top:.45rem}.usage-meter b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent))}.security-ui>label{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--line)}.security-ui>label div{display:grid}.security-ui>label span{color:var(--muted);font-size:.78rem}.security-ui input[type="checkbox"]{width:1.2rem;min-height:auto}.security-ui select{width:auto;min-width:120px}.api-viewer pre{margin:0;min-height:230px}
/* Root preview presentation */
.doc-preview{padding:1.2rem;border:1px solid #30405a;border-radius:var(--radius-lg);background:#0b1525;color:#eaf2ff;box-shadow:var(--shadow-lg)}.doc-preview>span{color:#7f93af;font-size:.75rem}.doc-preview>strong{display:block;font-size:1.35rem;margin:.4rem 0 1rem}.doc-preview pre{overflow:auto;padding:1rem;border-radius:.6rem;background:#07101d;color:#a9d9c8;font-family:var(--font-mono);font-size:.75rem}.doc-preview>div{display:flex;justify-content:space-between;color:#8fa1ba;font-size:.75rem}.device-stage{position:relative;min-height:470px}.device{position:absolute;border:5px solid var(--text);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden}.device::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface))}.device span,.device i,.device b{position:absolute;z-index:1;display:block;border-radius:.4rem;background:color-mix(in srgb,var(--primary) 25%,var(--surface-3))}.desktop-device{left:0;top:10px;width:82%;aspect-ratio:16/10;border-radius:1rem}.desktop-device span{left:6%;top:8%;width:88%;height:8%}.desktop-device i{left:6%;top:22%;width:28%;height:62%}.desktop-device b{right:6%;top:22%;width:54%;height:30%}.tablet-device{right:2%;bottom:15px;width:42%;aspect-ratio:3/4;border-radius:1.2rem}.tablet-device span{left:8%;top:7%;width:84%;height:8%}.tablet-device i{left:8%;top:20%;width:84%;height:30%}.phone-device{left:8%;bottom:0;width:24%;aspect-ratio:9/18;border-radius:1.6rem}.phone-device span{left:10%;top:7%;width:80%;height:7%}.phone-device i{left:10%;top:20%;width:80%;height:45%}.browser-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}.browser-grid article{display:grid;text-align:center;padding:1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.browser-grid span{color:var(--muted);font-size:.75rem}.center-action{text-align:center;margin-top:1.5rem}