.demo-page{background:var(--canvas);flex-direction:column;height:100dvh;display:flex}.demo-top{border-bottom:1px solid var(--line);background:#fff;flex:none}.demo-top-in{align-items:center;gap:18px;height:64px;padding:0 20px;display:flex}.demo-hint{min-width:0;color:var(--ink-2);background:var(--accent-50);border-radius:12px;flex:1;padding:8px 14px;font-size:15px;font-weight:500;line-height:1.35}.demo-hint b{color:var(--accent-800)}.back{color:var(--ink-2);white-space:nowrap;border-radius:12px;align-items:center;gap:8px;padding:8px 12px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex}.back:hover{background:var(--canvas);color:var(--accent-700)}.demo-frame{flex:1;min-height:0;position:relative}.demo-frame iframe{background:#0f172a;border:0;width:100%;height:100%;position:absolute;inset:0}.demo-small{display:none}@media (max-width:900px){.demo-hint,.demo-top-in .btn{display:none}.back{margin-left:auto}.demo-frame iframe{display:none}.demo-small{text-align:center;color:var(--accent-700);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:32px 28px;display:flex;position:absolute;inset:0}.demo-small h1{color:var(--ink);letter-spacing:-.02em;font-size:26px;font-weight:800}.demo-small p{color:var(--ink-3);max-width:34ch;font-size:17px;font-weight:500}}