.demo-hero{padding-bottom:55px}.demo-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.demo-meta span{font:8px var(--mono);letter-spacing:.1em;color:var(--green-dark);padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.52)}.demo-stage{padding-top:35px}.demo-shell{border:1px solid var(--line-strong);border-radius:34px;background:rgba(255,255,255,.72);box-shadow:var(--shadow-hover);overflow:hidden;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.demo-shell-top{height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);font:8px var(--mono);color:#77847c}.demo-shell-top div{display:flex;align-items:center;gap:9px}.demo-shell-top a{color:var(--green-dark);text-decoration:none}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(120,184,63,.11)}.demo-frame-wrap{position:relative;background:#fff}.demo-frame-wrap iframe{display:block;width:100%;height:760px;border:0;background:#fff}.iframe-fallback{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:11px 15px;border-radius:999px;background:rgba(245,247,241,.94);border:1px solid var(--line);box-shadow:var(--shadow);font:8px var(--mono);white-space:nowrap}.iframe-fallback a{color:var(--green-dark);text-decoration:none}.demo-notes{padding-top:40px}.demo-note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.demo-note-grid article{min-height:250px;border:1px solid var(--line);border-radius:28px;padding:28px;background:rgba(255,255,255,.55)}.demo-note-grid article>span{font:8px var(--mono);color:var(--green-dark)}.demo-note-grid h2{font-size:25px;margin:70px 0 12px}.demo-note-grid p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}.demo-hero h1{max-width:800px}@media(max-width:900px){.demo-frame-wrap iframe{height:680px}.demo-note-grid{grid-template-columns:1fr}.demo-shell-top{padding:0 15px}.iframe-fallback{max-width:calc(100% - 30px);white-space:normal;text-align:center;justify-content:center}}@media(max-width:560px){.demo-frame-wrap iframe{height:650px}.demo-shell{border-radius:25px}.demo-meta{gap:7px}.demo-meta span{font-size:7px}}
.iframe-fallback{position:static;transform:none;max-width:none;justify-content:flex-end;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:rgba(247,249,244,.78);padding:12px 18px;font:7px var(--mono);color:#8a958d}.iframe-fallback a{font-size:8px}@media(max-width:560px){.iframe-fallback{justify-content:center;flex-wrap:wrap}}