*{box-sizing:border-box}body{color:#0f172a;background:#eef2f6;height:100vh;margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif;display:flex}.panel{background:#fff;border-right:1px solid #dde3ea;flex:none;width:300px;padding:20px;overflow:auto}.panel h1{margin:0 0 16px;font-size:16px}.field{margin-bottom:12px;display:block}.field>span{color:#475569;margin-bottom:4px;font-size:12px;display:block}.field--inline{align-items:center;gap:8px;display:flex}.field--inline>span{color:#0f172a;margin:0;font-size:13px}.field select,.field input[type=number],.field input[type=range]{width:100%}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.note{color:#64748b;margin:16px 0;font-size:12px}.readout__head{color:#475569;justify-content:space-between;margin:12px 0 4px;font-size:12px;display:flex}.readout pre{color:#e2e8f0;background:#0f172a;border-radius:6px;max-height:220px;margin:0;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.45;overflow:auto}.stage{flex:1;justify-content:center;align-items:center;min-width:0;display:flex;overflow:auto}.stage__scaler{transform-origin:50%}.stage__scaler--embedded{background:#fff;border-radius:12px;width:390px;height:760px;overflow:hidden;box-shadow:0 18px 50px #1014182e}.page{box-sizing:border-box;height:100%;padding:16px calc(var(--device-safe-area-right) + 16px) calc(max(var(--device-safe-area-bottom) - var(--device-tab-bar-height), 0px) + 16px) calc(var(--device-safe-area-left) + 16px);color:#0f172a;background:linear-gradient(#dbeafe,#f8fafc 160px);overflow:auto}.page h2{margin:0 0 8px;font-size:18px}.page p{margin:0 0 8px;font-size:13px}.page__size{color:#1d4ed8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.mp-title-bar{color:#000;background:#ededed;align-items:center;height:100%;padding:0 12px;font:500 17px/1 -apple-system,BlinkMacSystemFont,sans-serif;display:flex;position:relative}.mp-title-bar__back{cursor:pointer;background:0 0;border:0;padding:0 8px;font-size:26px;line-height:1}.mp-title-bar__title{position:absolute;left:50%;transform:translate(-50%)}.h5-bar{color:#fff;background:#0f172a;align-items:center;gap:8px;height:100%;padding:0 12px;font:500 17px/1 -apple-system,BlinkMacSystemFont,sans-serif;display:flex}.h5-bar__title{text-align:center;flex:1}.h5-bar__back,.h5-bar__close{color:inherit;cursor:pointer;background:0 0;border:0;padding:0 4px;font-size:20px}.demo-tab-bar{height:100%;padding-bottom:var(--device-safe-area-bottom);background:#f7f7f7;border-top:1px solid #d8d8d8;display:flex}.demo-tab-bar__item{color:#7a7e83;cursor:pointer;background:0 0;border:0;flex:1;font-size:12px}.demo-tab-bar__item--on{color:#07c160}.safe-area-overlay{position:absolute;inset:0}.safe-area-overlay__band[hidden]{display:none}.safe-area-overlay__band{color:#fff;text-shadow:0 1px 2px #0009;justify-content:center;align-items:center;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;position:absolute}.safe-area-overlay__band--top{height:var(--device-safe-area-top);background:#ef444459;top:0;left:0;right:0}.safe-area-overlay__band--bottom{height:var(--device-safe-area-bottom);background:#10b98159;bottom:0;left:0;right:0}.safe-area-overlay__band--left{width:var(--device-safe-area-left);writing-mode:vertical-rl;background:#eab30859;top:0;bottom:0;left:0}.safe-area-overlay__band--right{width:var(--device-safe-area-right);writing-mode:vertical-rl;background:#3b82f659;top:0;bottom:0;right:0}body.demo-dark-page .page{color:#e2e8f0;background:linear-gradient(#0f172a,#1e293b 160px)}body.demo-dark-page device-frame{--device-screen-background:#0f172a}body.demo-dark-page .mp-title-bar{color:#fff;background:#1f1f1f}body.demo-dark-page .demo-tab-bar{background:#111827;border-top-color:#1f2937}body.demo-dark-page .demo-tab-bar__item{color:#94a3b8}body.demo-dark-page .demo-tab-bar__item--on{color:#34d399}