/* Product demo only: authentication component consumers remain unchanged. */
:root { --ink:#17202a; --muted:#667085; --paper:#f6f4ee; --card:#fffdf8; --line:#d9d5ca; --blue:#3157d5; --blue-dark:#213b92; --mint:#d8f2e6; --orange:#ffb45c; --danger:#a62828; font-family:Inter,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); line-height:1.55; }
a { color:inherit; text-underline-offset:.2em; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
.site-header,.lab-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px; padding:.6rem clamp(1rem,3vw,2.5rem); border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; min-width:0; font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.brand span { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.5rem; color:white; background:var(--ink); font-size:.75rem; }
.brand small { font-size:.72rem; font-weight:500; color:var(--muted); }
nav { display:flex; align-items:center; gap:1.15rem; font-size:.85rem; }
nav a { text-decoration:none; white-space:nowrap; }
.nav-toggle { display:none; border:1px solid var(--line); border-radius:.5rem; padding:.4rem .65rem; background:var(--card); cursor:pointer; }
.hero,.section,footer { max-width:1240px; margin:auto; padding:2.5rem clamp(1rem,3vw,2.5rem); }
.hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(17rem,.8fr); align-items:center; gap:2rem; padding-top:2.75rem; padding-bottom:2.75rem; }
.eyebrow,.demo-kicker { margin:0 0 .45rem; color:var(--blue); font-size:.72rem; font-weight:750; letter-spacing:.05em; }
.hero h1 { margin:0 0 .8rem; font-size:clamp(2rem,3.4vw,3rem); line-height:1.25; letter-spacing:-.025em; }
.lede { max-width:42rem; margin:0; color:#45505d; font-size:1rem; }
.hero__actions,.form-actions { display:flex; gap:.65rem; flex-wrap:wrap; margin:1.2rem 0; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; max-width:100%; padding:.55rem .9rem; border:1px solid var(--line); border-radius:.5rem; background:var(--card); color:var(--ink); font-size:.875rem; font-weight:650; text-decoration:none; cursor:pointer; }
.button.primary { border-color:var(--blue); background:var(--blue); color:white; }
.button.primary:hover { background:var(--blue-dark); }
.button.danger { border-color:#e0aaaa; color:var(--danger); }
.safe-note { margin:.8rem 0 0; padding:.6rem .8rem; border-left:3px solid var(--orange); background:#fff7e8; color:#594727; font-size:.8rem; overflow-wrap:anywhere; }
.boundary-card,.identity-card,.action-card,.playground__controls,.playground__preview { min-width:0; padding:1.4rem; border:1px solid var(--line); border-radius:.8rem; background:var(--card); }
.boundary-card h2 { margin:.25rem 0 .8rem; font-size:1.1rem; line-height:1.4; }
.boundary-card dl { margin:0; }
.boundary-card dl div,.identity-card dl div { padding:.5rem 0; border-top:1px solid var(--line); }
dt { font-size:.75rem; color:var(--muted); }
dd { margin:.15rem 0 0; font-size:.9rem; font-weight:600; overflow-wrap:anywhere; }
.section { border-top:1px solid var(--line); scroll-margin-top:4.5rem; }
.section-heading { max-width:54rem; margin-bottom:1.25rem; }
.section-heading h2 { margin:.2rem 0 .6rem; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.3; letter-spacing:-.02em; }
.section-heading>p:last-child { margin:.45rem 0 0; color:var(--muted); font-size:.9rem; }
.capability-grid,.demo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.capability-grid article,.demo-card { min-width:0; padding:1.2rem; border:1px solid var(--line); border-radius:.7rem; background:var(--card); overflow-wrap:anywhere; }
.capability-grid article>span { color:var(--blue); font:700 .8rem monospace; }
.capability-grid h3,.demo-card h3 { margin:.5rem 0 .4rem; font-size:1.1rem; line-height:1.35; }
.capability-grid p { margin:.7rem 0; font-size:.85rem; }
.capability-grid small { color:var(--muted); font-size:.75rem; }
.capability-grid code { font-size:.78rem; }
.live { max-width:none; background:#edf0f8; }
.live>.section-heading,.live>.demo-grid { max-width:1160px; margin-left:auto; margin-right:auto; }
.demo-card { display:flex; flex-direction:column; align-items:flex-start; min-height:225px; }
.demo-card p:not(.chip) { margin:.65rem 0 1rem; font-size:.875rem; color:var(--muted); }
.demo-card .button { align-self:stretch; margin-top:auto; }
.backend-name { display:block; max-width:100%; font-size:.73rem; color:var(--muted); overflow-wrap:anywhere; }
.chip { align-self:flex-start; margin:0; padding:.2rem .5rem; border-radius:.3rem; background:var(--mint); color:#285641; font-size:.7rem; font-weight:650; }
.code-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:1rem; align-items:start; }
.code-layout pre,.playground pre { max-width:100%; overflow:auto; margin:.7rem 0 0; padding:1rem; border-radius:.6rem; background:#111821; color:#dfe8ff; font-size:.78rem; line-height:1.65; }
.code-example,.config-details { min-width:0; border:1px solid var(--line); border-radius:.6rem; padding:.85rem 1rem; background:var(--card); }
summary { cursor:pointer; font-size:.875rem; font-weight:650; }
.integration-links { display:grid; gap:.8rem; min-width:0; }
.integration-links>p { margin:0; font-size:.85rem; color:var(--muted); overflow-wrap:anywhere; }
.integration-links a { display:flex; flex-direction:column; gap:.25rem; padding:1rem; border:1px solid var(--line); border-radius:.6rem; background:var(--card); text-decoration:none; }
.integration-links span { color:var(--muted); font-size:.85rem; }
.exclusion { padding-top:1.5rem; padding-bottom:1.5rem; }
.exclusion h2 { margin:.3rem 0; font-size:1.1rem; }
.exclusion p:last-child { max-width:65rem; font-size:.85rem; color:var(--muted); }
footer { display:flex; justify-content:space-between; gap:1rem; padding-top:1.2rem; padding-bottom:1.2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.lab-header p { margin:0; color:var(--muted); font-size:.75rem; }
.lab-header .back-link { margin:0; }
.headless-shell { max-width:1040px; min-height:calc(100dvh - 64px); margin:auto; padding:2.5rem 1rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.85fr); gap:2.5rem; align-items:center; }
.headless-shell h1 { margin:.4rem 0 1rem; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.35; }
.headless-shell>section>p { font-size:.9rem; }
.sequence { display:flex; flex-wrap:wrap; gap:.4rem; }
.sequence span { padding:.3rem .45rem; border:1px solid var(--line); border-radius:.3rem; font:600 .7rem monospace; }
.headless-login { min-width:0; padding:1.5rem; border-radius:.8rem; background:#17202a; color:white; }
.headless-login h2 { margin:.7rem 0; font-size:1.4rem; }
.headless-login label { display:grid; gap:.35rem; margin:.8rem 0; font-size:.875rem; }
.headless-login input { width:100%; min-width:0; padding:.65rem .8rem; border:1px solid #9aa4b2; border-radius:.4rem; background:white; color:var(--ink); }
.headless-login .button:not(.primary) { background:transparent; color:#edf3ff; border-color:#a4b2c5; }
.form-status { min-height:1.2rem; margin:.4rem 0 0; color:#ffd28e; }
.workspace { max-width:1050px; min-height:calc(100dvh - 64px); margin:auto; padding:2rem 1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.identity-card h1 { margin:.45rem 0 1rem; font-size:1.75rem; line-height:1.3; }
.identity-card dl { margin:.75rem 0; }
.action-card h2 { font-size:1.25rem; }
.action-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.action-output { min-height:5rem; white-space:pre-wrap; overflow-wrap:anywhere; padding:.8rem; border-radius:.5rem; background:#111821; color:#d8fbe9; font-size:.8rem; }
.playground { max-width:1250px; margin:auto; padding:1.2rem 1rem; display:grid; grid-template-columns:minmax(16rem,19rem) minmax(0,1fr); gap:1rem; align-items:start; }
.playground__controls { padding:1.1rem; }
.playground__controls h1 { margin:0; font-size:1.5rem; line-height:1.25; }
.playground__intro { margin:.4rem 0 .9rem; color:var(--muted); font-size:.8rem; }
.playground__inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.playground__inputs label { display:grid; min-width:0; gap:.3rem; font-size:.75rem; font-weight:600; }
.playground select { width:100%; min-width:0; min-height:40px; padding:.45rem .35rem; border:1px solid #aeb8c5; border-radius:.4rem; background:white; color:var(--ink); font-size:.8rem; }
.playground__toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; }
.playground .check { display:flex; align-items:center; gap:.4rem; margin:0; font-size:.8rem; }
.playground .check input { width:16px; height:16px; }
.playground__toolbar .button { min-height:36px; padding:.4rem .6rem; font-size:.8rem; }
.copy-status { margin:0; min-height:0; font-size:.75rem; color:var(--muted); }
.config-details { grid-column:1 / -1; margin-top:0; padding:.6rem .7rem; }
.config-details summary { font-size:.8rem; }
.playground__preview { min-height:0; padding:.5rem; background:#e9ecf3; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.25rem .45rem .6rem; color:var(--muted); font-size:.75rem; }
.playground iframe { display:block; width:100%; height:610px; min-height:0; border:0; border-radius:.5rem; background:white; }
.host-override { min-height:100dvh; display:grid; place-items:center; padding:1.5rem 1rem; background:linear-gradient(135deg,#e4faef,#d9f0ff); }
.host-override .host-login { width:min(100%,30rem); min-height:0; padding:0; background:none; }
.host-login__card { padding:1.6rem; border:1px solid #9bc8b0; border-radius:.9rem; background:#fff; box-shadow:0 12px 35px #244b3b16; }
.host-login__card label { display:grid; gap:.3rem; }
.host-login__card input { width:100%; padding:.65rem .8rem; border:1px solid #9aa4b2; border-radius:.4rem; }
.host-login__card button[type=submit] { width:100%; background:#244b3b; color:white; }
.back-link { display:inline-block; margin-bottom:.8rem; font-size:.85rem; }
@media(max-width:1100px) { .capability-grid,.demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .playground { grid-template-columns:minmax(0,1fr); } .playground__inputs { max-width:44rem; } }
@media(max-width:900px) { .hero,.code-layout,.headless-shell,.workspace { grid-template-columns:minmax(0,1fr); } .hero { gap:1.1rem; padding-top:2rem; padding-bottom:2rem; } .boundary-card { max-width:none; } .site-header nav { display:none; position:absolute; top:64px; left:0; right:0; padding:1rem; flex-direction:column; align-items:stretch; background:var(--paper); border-bottom:1px solid var(--line); } .site-header nav[data-open] { display:flex; } .nav-toggle { display:block; } .headless-shell { gap:1.5rem; padding-top:1.5rem; align-items:start; } }
@media(max-width:640px) { .hero,.section { padding:1.5rem 1rem; } .hero { gap:0; } .hero h1 { font-size:1.85rem; } .hero .boundary-card { display:none; } .lede { font-size:.9rem; } .hero__actions { margin:1rem 0; } .hero__actions .button { flex:1; padding:.55rem .6rem; } .safe-note { font-size:.75rem; } .capability-grid,.demo-grid { grid-template-columns:minmax(0,1fr); gap:.75rem; } .demo-card { min-height:0; padding:1rem; } .demo-card .button { margin-top:.2rem; } .section-heading h2 { font-size:1.5rem; } .section-heading { margin-bottom:1rem; } .section-heading>p:last-child { font-size:.85rem; } .lab-header { min-height:56px; padding:.5rem 1rem; } .lab-header p { display:none; } .playground { padding:.7rem; gap:.6rem; } .playground__controls { padding:.8rem; } .playground__controls h1 { font-size:1.25rem; } .playground__intro { margin:.25rem 0 .65rem; font-size:.75rem; } .playground__toolbar { margin-top:.55rem; } .config-details { margin-top:.55rem; padding:.45rem .6rem; } .playground iframe { height:530px; } .preview-toolbar { padding:.1rem .3rem .4rem; } .workspace { padding:1rem .75rem; } .identity-card,.action-card { padding:1rem; } .headless-shell h1 { font-size:1.5rem; } .headless-login { padding:1.2rem; } .form-actions .button { flex:1; } footer { flex-direction:column; gap:.35rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.resource-card { min-width:0; padding:1.4rem; border:1px solid var(--line); border-radius:.8rem; background:var(--card); }
.resource-card h2 { margin:.35rem 0 .55rem; font-size:1.3rem; }
.resource-card>p { font-size:.85rem; }
.resource-note { color:var(--muted); font-size:.75rem !important; }
.identity-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin:.9rem 0; }
.session-details { grid-column:1 / -1; }
.session-details>.action-list { margin-top:.8rem; }
.data-output { max-height:240px; min-height:6rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:.8rem; border-radius:.5rem; background:#111821; color:#d8fbe9; font-size:.78rem; }
@media(max-width:640px) { .resource-card { padding:1rem; } .workspace { gap:.75rem; } .headless-login .demo-fill { margin-bottom:.65rem; } }

.workspace { align-content:start; }
.workspace[data-state="guest"] [data-logout] { display:none; }