*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#111;color:#f5f5f5;font-family:Arial,sans-serif;display:grid;grid-template-rows:76px minmax(0,1fr)30px}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 26px;border-bottom:1px solid #333;background:#090909;position:relative;z-index:2}.stack-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:210px}.stack-brand>svg{width:32px;height:32px}.stack-brand span{display:grid;gap:4px}.stack-brand small{font:9px/1.2 ui-monospace,monospace;letter-spacing:.12em;color:#999}.stack-brand strong{font-size:16px;font-weight:500}.device-controls{display:flex;padding:4px;border:1px solid #333;background:#101010;gap:4px}.device-controls button{font:11px/1.2 Arial,sans-serif;display:flex;align-items:center;gap:8px;padding:9px 15px;border:0;background:transparent;color:#999;cursor:pointer;transition:background .15s,color .15s}.device-controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.device-controls button[aria-pressed=true]{background:#332017;color:#ff9676}.device-controls button:hover:not(:disabled){background:#262626;color:white}.device-controls button:disabled{opacity:.28;cursor:not-allowed}.device-controls button:focus-visible,a:focus-visible{outline:2px solid #ff7046;outline-offset:3px}.overview-link{color:#aaa;text-decoration:none;font:10px ui-monospace,monospace;min-width:100px;text-align:right}.overview-link:hover{color:white}.overview-link span{color:#ff805b;margin-left:6px}.preview-stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#242424,#101010 75%)}.device-shell{flex:none;transform-origin:center;box-sizing:content-box;position:absolute;padding:10px;background:linear-gradient(130deg,#777,#222 20%,#424242 60%,#171717);border:1px solid #777;box-shadow:0 25px 70px #0009,inset 0 0 0 2px #121212;border-radius:54px}.device-face{overflow:hidden;position:relative;background:#fff;border-radius:44px;display:flex;flex-direction:column}.device-status{height:36px;flex-shrink:0;background:#fff;color:#161616;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 27px;font:12px Arial,sans-serif}.device-status .camera{position:absolute;left:50%;transform:translateX(-50%);width:100px;height:26px;top:3px;background:#080808;border-radius:18px}.system-icons{font-size:11px;letter-spacing:.02em}.device-home{height:24px;flex-shrink:0;background:#fff;display:grid;place-items:center}.device-home span{width:112px;height:4px;border-radius:4px;background:#111}iframe{border:0;display:block;background:white;flex-shrink:0}.preview-caption{font:9px/1.2 ui-monospace,monospace;display:flex;justify-content:space-between;gap:15px;align-items:center;padding:0 20px;background:#090909;color:#999;border-top:1px solid #292929}.preview-note{color:#666}body[data-device=web] .device-shell{position:absolute;inset:0;padding:0;border:0;border-radius:0;box-shadow:none;background:white;transform:none!important}body[data-device=web] .device-face{width:100%;height:100%;border-radius:0}body[data-device=web] .device-status,body[data-device=web] .device-home{display:none}body[data-device=web] iframe{width:100%;height:100%}body[data-device=android] .device-shell{border-radius:38px;background:linear-gradient(130deg,#7b8c81,#242b28 22%,#435249 70%,#111)}body[data-device=android] .device-face{border-radius:28px}body[data-device=android] .camera{width:13px;height:13px;top:10px;border-radius:50%}body[data-device=android] .device-home span{width:90px;height:3px}body[data-device=android] .device-status{padding-inline:24px}@media(max-width:700px){body{grid-template-rows:110px minmax(0,1fr)32px}.demo-toolbar{padding:12px 15px;gap:10px;flex-wrap:wrap;align-content:center}.stack-brand{min-width:0}.stack-brand>svg{width:27px;height:27px}.stack-brand strong{font-size:13px}.stack-brand small{font-size:8px}.overview-link{min-width:0;font-size:9px;margin-left:auto}.device-controls{order:3;width:100%;justify-content:center}.device-controls button{padding:6px 18px;font-size:10px}.device-controls svg{width:17px;height:17px}.preview-caption{padding-inline:12px;font-size:8px}.preview-note{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}