.design-system{background:var(--paper);min-height:100dvh;color:var(--ink)}.design-header{align-items:center;gap:16px;max-width:960px;margin:auto;padding:24px;display:flex}.design-header>span{border-left:var(--hairline-width) solid var(--line);color:var(--muted);padding-left:16px}.design-header>.design-mode{margin-left:auto}.design-header .brand-symbol{width:24px;height:24px}[data-color-mode=dark] .design-header .brand-symbol{filter:invert()}.design-mode{background:var(--soft);border-radius:var(--public-action-radius);align-items:center;gap:4px;padding:4px;display:flex}.design-mode button{border-radius:var(--public-action-radius);min-height:36px;color:var(--muted);padding:6px 14px;font-size:12px}.design-mode button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #0000000d}.design-main{max-width:720px;margin:auto;padding:48px 24px 24px}.design-intro h1{font-size:clamp(28px,5vw,40px);line-height:1.15}.design-intro p{color:var(--muted);margin-top:16px;font-size:16px}.design-nav{flex-wrap:wrap;gap:8px;margin:32px 0 48px;display:flex}.design-nav a{border:var(--hairline-width) solid var(--line);border-radius:var(--public-action-radius);padding:10px 16px}.design-nav a:hover{background:var(--soft)}.design-section{margin-top:48px;scroll-margin-top:24px}.design-section h2{margin-bottom:20px;font-size:20px}.design-colors{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;display:grid}.design-colors>div{min-width:0}.design-swatch{width:100%;height:72px;box-shadow:inset 0 0 0 var(--hairline-width) var(--line);border-radius:16px;margin-bottom:12px;display:block}.design-colors strong,.design-colors code{overflow-wrap:anywhere;font-size:12px;display:block}.design-colors strong{font-weight:500}.design-colors code{color:var(--muted);margin-top:4px}.design-rules{border-top:var(--hairline-width) solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;padding-top:24px;display:grid}.design-rules>div{flex-direction:column;gap:12px;display:flex}.design-rules strong{align-items:center;min-height:56px;font-size:24px;font-weight:500;display:flex}.design-rules span{color:var(--muted);font-size:12px}.design-rules .design-radius-sample{border-radius:var(--public-card-radius);border:var(--hairline-width) solid var(--line);justify-content:center;width:76px}.design-sample{padding:var(--public-card-content-inset);border:var(--hairline-width) solid var(--line);border-radius:var(--public-card-radius)}.design-actions{flex-wrap:wrap;gap:12px;display:flex}.design-actions .button{border-radius:var(--public-action-radius);min-height:48px;padding:12px 24px}.design-note{color:var(--muted);margin-top:12px;font-size:12px}.design-field-sample{text-align:left;margin-top:24px}.design-field-sample label{margin-bottom:8px;font-weight:500;display:block}.design-identity{align-items:center;gap:16px;margin-bottom:16px;display:flex}.design-identity strong{font-weight:500}.design-identity p{color:var(--muted);margin-top:4px;font-size:12px}.design-system .session-pass-card{max-width:440px}.design-section-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.design-section-heading h2{margin:0}.design-alert-preview.is-compact{max-width:390px;margin-inline:auto}.design-footer{border-top:var(--hairline-width) solid var(--line);color:var(--muted);margin-top:64px;padding-top:24px;font-size:12px}@media (max-width:520px){.design-header{gap:12px;padding:20px}.design-header .brand-wordmark{font-size:16px}.design-header>span{display:none}.design-main{padding:32px 20px 20px}.design-colors{gap:8px}.design-swatch{border-radius:12px;height:56px}.design-colors code{font-size:10px}.design-rules{gap:12px}.design-rules strong{font-size:20px}.design-section-heading{flex-wrap:wrap}.design-system .session-pass-card{max-width:none}}.design-section .participant-access-card h3{margin-bottom:8px;font-size:20px;font-weight:600}.design-section .participant-access-card>p{font-size:14px}.design-chat-preview{min-height:208px;margin-top:16px;padding-right:88px;position:relative}.design-chat-preview>strong{margin-top:12px;font-weight:500;display:block}.design-chat-preview>p{max-width:320px;color:var(--muted);margin-top:8px;font-size:14px}.design-chat-preview .public-chat-fab{z-index:1;position:absolute;bottom:24px;right:24px}