html{color-scheme:dark;background:var(--glass-bg-canvas,#0a0c12);color:var(--glass-text,#f1f4f6);font-family:var(--glass-font,system-ui)}html[data-theme=light-warm]{color-scheme:light}html[data-theme=high-contrast]{color-scheme:light dark}body{margin:0}.integration-demo,.integration-demo *{box-sizing:border-box}.integration-demo{max-width:1320px;margin:auto;padding:32px 40px 60px;font-size:14px;line-height:1.5}.integration-demo a{color:var(--glass-accent,#64c8dc);text-decoration:none}.integration-demo a:hover{text-decoration:underline}.integration-demo__header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--glass-border-hairline,#ffffff12)}.integration-demo__brand{font-weight:600;letter-spacing:-.5px;font-size:22px}.integration-demo__brand small{color:var(--glass-text-secondary,#ffffffb3);font-size:12px;font-weight:400;margin-left:12px}.integration-demo__preferences{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.integration-demo label{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--glass-text-secondary,#ffffffb3)}.integration-demo select,.integration-demo button{font:inherit;color:inherit;background:var(--glass-surface-base,#14161e);border:1px solid var(--glass-border-subtle,#ffffff30);border-radius:var(--glass-radius-md,10px);padding:10px 12px;min-height:40px}.integration-demo button{cursor:pointer}.integration-demo button:hover,.integration-demo select:hover{border-color:var(--glass-accent,#64c8dc)}.integration-demo button:focus-visible,.integration-demo select:focus-visible,.integration-demo a:focus-visible{outline:2px solid var(--glass-accent,#64c8dc);outline-offset:3px}.integration-demo button.primary{background:var(--glass-accent,#64c8dc);color:var(--glass-on-accent,#0a1418);border-color:var(--glass-accent,#64c8dc)}.integration-demo__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:36px 0 28px}.integration-demo__eyebrow{color:var(--glass-accent,#64c8dc);letter-spacing:1.4px;font:11px ui-monospace,monospace;margin:0 0 10px}.integration-demo h1{font-size:clamp(30px,3.5vw,44px);font-weight:600;line-height:1.15;letter-spacing:-1.3px;margin:0 0 12px}.integration-demo h2{font-size:16px;margin:0;font-weight:600}.integration-demo p{color:var(--glass-text-secondary,#ffffffb3);margin:0;max-width:650px}.integration-demo__columns{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}.integration-demo__card{background:var(--glass-surface-base,#14161e);border:1px solid var(--glass-border-subtle,#ffffff30);border-radius:var(--glass-radius-lg,14px);overflow:hidden}.integration-demo__cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--glass-border-hairline,#ffffff12)}.integration-demo__stage{height:360px;min-height:360px!important;border-radius:0!important;background:var(--glass-bg-solid,#14161e)}.integration-demo__stage.secondary{height:360px;min-height:360px!important}.integration-demo__content{min-height:360px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;color:#f0f8f5;background:linear-gradient(#07121622,#07121666)}.integration-demo__content strong{font-size:22px;letter-spacing:-.4px;line-height:1.25;max-width:300px}.integration-demo__content span{font:10px ui-monospace,monospace;letter-spacing:1.4px;color:#eef8f4bb}.integration-demo__controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:18px 20px}.integration-demo__status{font:11px ui-monospace,monospace;padding:0 20px 18px;color:var(--glass-text-tertiary,#ffffff85);min-height:36px}.integration-demo__contract{margin-top:24px;padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.integration-demo__contract h2{margin-bottom:10px}.integration-demo pre{margin:12px 0 0;padding:16px;max-width:100%;overflow:auto;font:11px/1.7 ui-monospace,monospace;border:1px solid var(--glass-border-hairline,#ffffff12);border-radius:var(--glass-radius-md,10px);color:var(--glass-text,#f0f4f6);background:var(--glass-bg-solid,#14161e)}.integration-demo__contract a{display:inline-flex;align-items:center;min-height:40px;margin-top:12px}.integration-demo__foot{margin-top:24px;border-top:1px solid var(--glass-border-hairline,#ffffff12);padding-top:20px;font-size:12px;color:var(--glass-text-tertiary,#ffffff85)}html[data-density=compact] .integration-demo__cardhead,html[data-density=compact] .integration-demo__controls{padding:12px 16px}html[data-density=spacious] .integration-demo__cardhead,html[data-density=spacious] .integration-demo__controls{padding:24px}html[data-theme=high-contrast] .integration-demo__card{background:Canvas;border-color:CanvasText}html[data-theme=high-contrast] .integration-demo button{background:ButtonFace;color:ButtonText;border-color:ButtonText}html[data-theme=high-contrast] .integration-demo button.primary{background:Highlight;color:HighlightText}
@media(max-width:800px){.integration-demo{padding:20px}.integration-demo__header,.integration-demo__intro{align-items:flex-start;flex-direction:column}.integration-demo__columns,.integration-demo__contract{grid-template-columns:1fr}.integration-demo__preferences{gap:8px}.integration-demo select,.integration-demo button{min-height:44px}.integration-demo__stage,.integration-demo__stage.secondary{height:330px;min-height:330px!important}.integration-demo__content{min-height:330px;padding:24px}.integration-demo__cardhead{padding:16px}.integration-demo__contract{padding:20px}.integration-demo__controls{padding:16px}.integration-demo__intro{padding:28px 0 24px}}
@media(prefers-reduced-motion:reduce){.integration-demo *{scroll-behavior:auto}}

.integration-demo__columns>* , .integration-demo__contract>*{min-width:0}

html[data-theme=high-contrast] .integration-demo__content{background:none;color:CanvasText}html[data-theme=high-contrast] .integration-demo__content :is(strong,span){background:Canvas;color:CanvasText;width:fit-content;padding:6px;border:1px solid CanvasText}
.integration-demo__stage.is-native{background:radial-gradient(ellipse at 14% 18%,#b7d8c866,transparent 52%),radial-gradient(ellipse at 88% 75%,#75a0b666,transparent 55%),var(--glass-bg-solid,#182c35)}
/* The selected GlassCard reference uses one bounded card, not a full-size pane. */
.integration-demo__stage.is-native{background:var(--glass-bg-page,#0a0c12)}
.integration-demo__stage.is-native .di4-material-component__surface{inset:40px auto auto 50%;transform:translateX(-50%);width:min(360px,calc(100% - 48px));height:180px}