.demo-page{background:var(--color-surface);min-height:100dvh;color:var(--color-on-surface);padding:24px 32px 16px;font-size:12px;overflow-x:hidden}.demo-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:24px;padding-bottom:22px;display:flex}.demo-logo{font-family:var(--font-syne);letter-spacing:-.06em;align-items:baseline;gap:8px;font-size:32px;font-weight:800;display:flex}.demo-logo span{color:var(--color-accent)}.demo-logo small{font-family:var(--font-inter);letter-spacing:.2em;color:var(--color-muted);margin-left:12px;font-size:9px;font-weight:500}.demo-controls{align-items:center;gap:8px;display:flex}.demo-controls button,.demo-controls select{border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-on-surface);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:10px 12px;display:flex}.demo-controls button:disabled{opacity:.4;cursor:default}.demo-controls .demo-play,.demo-controls .active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}.demo-speeds{border:1px solid var(--color-border);border-radius:12px;gap:2px;padding:3px;display:flex}.demo-speeds button{border:0;min-height:32px;padding:8px}.demo-story{color:var(--color-muted);justify-content:space-between;align-items:center;gap:24px;padding:24px 0;display:flex}.demo-story>div{flex:1}.demo-story p{font-family:var(--font-syne);color:var(--color-on-surface);font-size:16px;font-weight:600}.demo-story p span{color:var(--color-accent);padding:0 12px}.demo-progress{background:var(--color-border);border-radius:3px;height:3px;margin-top:14px}.demo-progress i{background:var(--color-primary);height:100%;transition:width .2s;display:block}.demo-story>span{font-family:var(--font-jetbrains);white-space:nowrap;font-size:10px}.demo-stage{background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 70%);justify-content:center;width:100%;padding:12px 0 24px;display:flex}.demo-stage-size{position:relative}.demo-devices{transform-origin:0 0;align-items:flex-start;gap:24px;width:2068px;display:flex}.demo-device{flex-shrink:0}.demo-hardware{background:var(--color-surface-alt);border:1px solid var(--color-border);box-shadow:0 32px 100px var(--color-scrim);padding:10px;position:relative;overflow:hidden}.demo-device.phone .demo-hardware{border-radius:42px;width:410px;height:864px}.demo-device.tablet .demo-hardware{border-radius:28px;width:1200px;height:840px;margin-top:12px}.demo-hardware iframe{background:var(--color-surface);border:0;width:100%;height:100%;display:block}.phone iframe{border-radius:32px}.tablet iframe{border-radius:18px}.demo-camera{z-index:5;background:var(--color-muted);opacity:.5;border-radius:50%;width:5px;height:5px;position:absolute;top:3px;left:50%}.demo-caption{align-items:center;gap:12px;padding:20px 6px;display:flex}.demo-caption span{letter-spacing:.2em;color:var(--color-accent);font-size:10px}.demo-caption strong{font-size:12px;font-weight:500}.demo-caption a{color:var(--color-muted);align-items:center;gap:5px;margin-left:auto;font-size:10px;display:flex}.demo-log{border:1px solid var(--color-border);background:var(--color-surface-raised);max-height:180px;font-family:var(--font-jetbrains);border-radius:14px;margin:8px 0;padding:12px 16px;font-size:10px;overflow:auto}.demo-log>div{border-bottom:1px solid var(--color-border);gap:16px;padding:6px 0;display:flex}.demo-log time{color:var(--color-muted);min-width:85px}.demo-log strong{min-width:160px;color:var(--color-accent);font-weight:500}.demo-log span{text-overflow:ellipsis;white-space:nowrap;color:var(--color-muted);overflow:hidden}.demo-error{border:1px solid var(--color-danger);color:var(--color-danger);border-radius:12px;padding:12px}.demo-footer{border-top:1px solid var(--color-border);color:var(--color-muted);justify-content:space-between;gap:12px;padding-top:16px;font-size:10px;display:flex}.record{height:100dvh;overflow:hidden}.record .demo-caption a{visibility:hidden}.record .demo-log{display:none}@media (max-width:900px){.demo-page{padding:16px}.demo-header,.demo-controls{flex-wrap:wrap}.demo-logo small{display:none}.demo-story p{font-size:12px}.demo-footer{flex-wrap:wrap}}