[data-na-template-thumb] [data-na-component=NaPage]:before{content:none!important;animation:none!important;display:none!important}[data-na-template-thumb] [data-na-component=NaNav],[data-na-template-thumb] [data-na-component=NaEditorialNav]{--na-nav-scroll:none!important}[data-na-interactive-preview]>[data-na-component=NaPage]{min-height:800px}.na-modal-example{border-radius:var(--na-modal-radius);background:var(--na-color-bg);width:min(560px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--na-color-ink);box-shadow:var(--na-modal-shadow);font-family:var(--na-font-body);border:0;margin:auto;padding:0;overflow:auto}.na-modal-example::backdrop{background:var(--na-modal-scrim);backdrop-filter:blur(var(--na-modal-blur))}.na-modal-example header{border-bottom:1px solid var(--na-color-line);justify-content:space-between;align-items:center;gap:16px;padding:24px;display:flex}.na-modal-example h3{font-size:20px;font-weight:600}.na-modal-example-body{gap:16px;padding:24px;display:grid}.na-modal-example label{gap:6px;display:grid}.na-modal-example :is(input,textarea,button){background:var(--na-color-surface);color:var(--na-color-ink);border:1px solid var(--na-color-line);border-radius:var(--na-radius-sm);padding:10px 12px}.na-modal-example :is(input,textarea,button):focus-visible{outline:2px solid var(--na-color-accent);outline-offset:3px}.na-layout-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:-4px 0 24px;display:flex}.na-layout-device{background:#e5e7eb;border:1px solid #d1d5db;border-radius:8px;gap:2px;padding:3px;display:flex}.na-layout-device button{color:#4b5563;border-radius:5px;padding:7px 12px;font-size:12px;font-weight:500}.na-layout-device button:hover{color:#111827;background:#f3f4f6}.na-layout-device button[aria-pressed=true]{color:#111827;background:#fff}.na-layout-device button:focus-visible{outline-offset:3px;outline:2px solid #111827}.na-page-layout-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.na-layout-caption{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:12px;display:flex}.na-layout-caption h3{color:#111827;font-size:14px;font-weight:600}.na-layout-caption>span{color:#6b7280;font-size:11px}.na-layout-description{color:#4b5563;max-width:52ch;margin-top:12px;font-size:12px;line-height:1.6}.na-content-width-specimen{border-top:1px solid #e5e7eb;margin-top:32px;padding-top:24px}.na-content-width-preview{background:#fff;border:1px solid #cbd5e1;border-radius:14px;overflow:hidden}.na-content-width-band{background:#e2e8f0;justify-content:center;align-items:center;min-height:120px;padding:20px 0;display:flex}.na-content-width-container{background:#fff;border-inline:2px solid #7c3aed;gap:10px;min-height:78px;padding:14px;display:grid}.na-content-width-container span{background:#cbd5e1;border-radius:3px;height:8px;display:block}.na-content-width-container span:nth-child(2){width:74%}.na-content-width-container span:nth-child(3){width:88%}.na-page-layout-preview{overflow:hidden}.na-page-layout-preview [data-na-component=NaPage]{color:#111827;background:#fff}.na-page-layout-preview>div{border-radius:18px;margin-inline:auto;position:relative;overflow:hidden}.na-page-layout-preview>div:after{content:"";z-index:1;pointer-events:none;border:calc(1px / var(--layout-preview-scale,1)) solid #94a3b8;border-radius:inherit;position:absolute;inset:0}.na-page-layout-preview [data-na-component=NaPage]:before,.na-page-layout-preview [data-na-component=NaPage]:after{display:none}.na-page-layout-preview .na-layout-zone{box-sizing:border-box;background:#fff;width:100%;padding:28px}.na-page-layout-preview .na-layout-zone:after{content:"";background:#e2e8f0;border:0;border-radius:8px;height:100%;min-height:164px;display:block}.na-page-layout-preview .na-layout-band{height:144px}.na-page-layout-preview .na-layout-band:after{background:#334155;min-height:0}.na-page-layout-preview .na-layout-content{height:220px}.na-page-layout-preview .na-layout-rail{background:#cbd5e1;border:0;height:660px}.na-page-layout-preview .na-layout-rail:after{display:none}.na-page-layout-preview[data-device=mobile]{min-height:470px}@container na-viewport (width<=899px){.na-page-layout-preview .na-layout-rail{height:280px}}@container (width<=560px){.na-page-layout-options{grid-template-columns:minmax(0,1fr);gap:28px}}@container layout-preview (width<=899px){.na-page-layout-preview .na-layout-content{height:200px}.na-page-layout-preview .na-layout-content:after{min-height:144px}}.na-page-layout-preview[data-layout-preview=detail] .na-layout-zone{padding:0;position:relative}.na-page-layout-preview[data-layout-preview=detail] .na-layout-zone:after{height:100%;min-height:0}.na-page-layout-preview .na-layout-detail-heading{height:160px}.na-page-layout-preview .na-layout-detail-body{height:420px}.na-page-layout-preview .na-layout-detail-card{height:198px}.na-page-layout-preview .na-layout-zone>span{z-index:1;color:#334155;font:500 22px/1.4 system-ui,sans-serif;position:absolute;inset:24px}.na-color-roles{color:#1f2937;margin-top:32px;font:13px/1.6 system-ui,sans-serif}.na-color-roles h4{margin:0 0 8px;font-size:15px;font-weight:600}.na-color-note{color:#606b7b;margin:0 0 20px;font-size:12px}.na-color-note a{color:#374151;text-underline-offset:3px;text-decoration:underline}.na-color-role-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px 24px;margin:20px 0 28px;display:grid}.na-color-role-list dt{align-items:center;gap:8px;font-weight:600;display:flex}.na-color-role-list dt span{border:1px solid #d1d5db;border-radius:4px;flex-shrink:0;width:18px;height:18px}.na-color-role-list dd{color:#606b7b;margin:4px 0 0;font-size:12px}.na-color-role-list code{overflow-wrap:anywhere;margin-top:4px;font-size:10px;display:block}.na-color-surfaces{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;margin-bottom:24px;display:grid}.na-color-surfaces h5{margin:0 0 8px;font-size:12px;font-weight:600}.na-color-surface-demo{border-radius:var(--na-radius-md);min-height:200px;font-family:var(--na-font-body);padding:20px}.na-color-surface-demo p{margin:12px 0}.na-color-action{border-radius:var(--na-radius-button);margin-top:16px;padding:8px 12px;display:inline-block}.na-color-contrast-scroll{scrollbar-width:thin;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:16px;overflow-x:auto}.na-color-contrast-scroll:focus-visible{outline-offset:3px;outline:2px solid #64748b}.na-color-contrast-scroll table{border-collapse:collapse;background:#fff;width:100%;min-width:540px}.na-color-contrast-scroll :is(th,td){text-align:left;border-bottom:1px solid #e5e7eb;padding:12px 16px;font-weight:400}.na-color-contrast-scroll th{font-weight:600}.na-color-contrast-scroll small{color:#606b7b;display:block}.na-color-pair-sample{justify-content:center;align-items:center;width:64px;height:40px;font-size:18px;display:inline-flex}.na-color-roles{background:#fff;border-radius:8px;padding:20px}.na-spacing-examples{color:var(--na-color-ink);--spacing-guide:transparent;margin-top:32px}.na-spacing-examples[data-guides=true]{--spacing-guide:color-mix(in srgb, var(--na-color-accent) 18%, var(--na-color-bg))}.na-spacing-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.na-spacing-examples h4,.na-spacing-examples h5{margin:0;font:600 14px/1.5 system-ui,sans-serif}.na-spacing-examples h5{margin-bottom:8px}.na-spacing-heading button{border:1px solid var(--na-color-line);color:var(--na-color-ink);background:var(--na-color-surface);border-radius:6px;padding:6px 10px;font:12px/1.5 system-ui,sans-serif}.na-spacing-heading button[aria-pressed=true]{border-color:var(--na-color-accent)}.na-spacing-heading button:focus-visible{outline:2px solid var(--na-color-accent);outline-offset:3px}.na-spacing-note,.na-spacing-measure{color:var(--na-color-ink-muted);overflow-wrap:anywhere;margin:0 0 16px;font:12px/1.6 system-ui,sans-serif}.na-spacing-pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px;margin:24px 0 32px;display:grid}.na-spacing-card{padding:var(--na-card-pad);border:1px solid var(--na-color-line);border-radius:var(--na-radius-lg);background:var(--spacing-guide)}.na-spacing-card-content,.na-spacing-related-item,.na-spacing-band-content{background:var(--na-color-surface);color:var(--na-color-ink);font-family:var(--na-font-body);font-size:var(--na-size-text-sm);line-height:var(--na-leading-text);overflow-wrap:anywhere}.na-spacing-examples article p,.na-spacing-related p,.na-spacing-band p{margin:0}.na-spacing-gap{background:var(--spacing-guide)}.na-spacing-related-item{padding:var(--na-space-sm)}.na-spacing-sections{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));align-items:start;gap:20px;display:grid}.na-spacing-band{padding-block:var(--spacing-band-pad);background:var(--spacing-guide);border-block:1px solid var(--na-color-line)}.na-spacing-band-content{padding:var(--na-space-sm);text-align:center}.na-spacing-legend{margin-top:16px}.na-form-controls{gap:var(--na-space-lg);max-width:52rem;color:var(--na-color-ink);font-family:var(--na-font-body);font-size:var(--na-size-text-md);line-height:var(--na-leading-text);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));display:grid}.na-form-control-field{gap:var(--na-space-xs);flex-direction:column;min-width:0;display:flex}.na-form-control-wide{grid-column:1/-1}.na-form-controls label,.na-form-controls legend{overflow-wrap:anywhere;font-weight:500}.na-form-controls input[type=text],.na-form-controls textarea,.na-form-controls select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:var(--na-form-padding) min(var(--na-space-md), 4%);border:var(--na-form-border-width) solid var(--na-color-line);border-radius:var(--na-form-radius);background:var(--na-color-surface);color:var(--na-color-ink);font:inherit;caret-color:var(--na-color-accent)}.na-form-controls textarea{resize:vertical}.na-form-controls ::placeholder{color:var(--na-color-ink-muted);opacity:1}.na-form-controls :is(input,textarea,select):focus-visible{outline:2px solid var(--na-color-accent);outline-offset:3px}.na-form-controls fieldset{border:0;min-width:0;margin:0;padding:0}.na-form-controls legend{margin-bottom:var(--na-space-xs);padding:0}.na-form-control-hint{overflow-wrap:anywhere;font-size:var(--na-size-text-sm);color:var(--na-color-ink-muted);margin:0;font-weight:400}.na-form-control-option{align-items:center;gap:min(var(--na-space-sm), 4%);cursor:pointer;min-height:44px;display:flex}.na-form-controls input:is([type=checkbox],[type=radio]){width:18px;height:18px;accent-color:var(--na-color-accent);cursor:pointer;flex:0 0 18px;margin:0}.na-form-state-section{color:var(--na-color-ink);--na-form-error:color-mix(in srgb, #dc2626 70%, var(--na-color-ink));margin-top:32px}.na-form-state-section h4{margin:0 0 8px;font:600 14px/1.5 system-ui,sans-serif}.na-form-state-scroll{border:1px solid var(--na-color-line);scrollbar-width:thin;scrollbar-color:var(--na-color-line) var(--na-color-bg);border-radius:8px;max-width:100%;margin-top:16px;overflow-x:auto}.na-form-state-scroll table{border-collapse:separate;border-spacing:0;width:100%}.na-form-state-scroll th{text-align:left;font:500 12px/1.5 system-ui,sans-serif}.na-form-state-scroll :is(th,td){border-bottom:1px solid var(--na-color-line);vertical-align:top;padding:20px}.na-form-state-scroll th:first-child{z-index:2;background:var(--na-color-surface);min-width:130px;position:sticky;left:0}.na-form-state-scroll td{background:var(--na-color-bg);min-width:240px}.na-form-state-scroll tr:last-child>*{border-bottom:0}.na-form-state-cell{pointer-events:none;flex-direction:column;gap:10px;display:flex}.na-form-controls [data-form-focus],.na-form-state-scroll:focus-visible{outline:2px solid var(--na-color-accent);outline-offset:3px}.na-form-controls :disabled{opacity:.45;cursor:not-allowed}.na-form-controls [aria-invalid=true]{border-color:var(--na-form-error,#b42318)}.na-form-controls input:is([type=checkbox],[type=radio])[aria-invalid=true]{outline:2px solid var(--na-form-error,#b42318);outline-offset:2px}.na-form-control-error{color:var(--na-form-error,#b42318);font-size:var(--na-size-text-sm);margin:0;line-height:1.5}.na-interaction-states{color:var(--na-color-ink);margin-top:28px}.na-interaction-states h4{color:#111827;margin:0 0 8px;font:600 14px/1.5 system-ui,sans-serif}.na-states-note{color:#4b5563;margin:0 0 16px;font:12px/1.6 system-ui,sans-serif}.na-states-scroll{scrollbar-width:thin;scrollbar-color:var(--na-color-line) var(--na-color-bg);border:1px solid var(--na-color-line);border-radius:8px;max-width:100%;overflow-x:auto}.na-states-scroll:focus-visible{outline:2px solid var(--na-color-accent);outline-offset:3px}.na-states-scroll table{border-collapse:separate;border-spacing:0;width:100%}.na-states-scroll th{color:var(--na-color-ink);background:var(--na-color-surface);text-align:left;font:500 12px/1.5 system-ui,sans-serif}.na-states-scroll th,.na-states-scroll td{border-bottom:1px solid var(--na-color-line);padding:20px 18px}.na-states-scroll th:first-child{z-index:2;background:var(--na-color-surface);min-width:130px;position:sticky;left:0}.na-states-scroll tr:last-child>*{border-bottom:0}.na-states-scroll td{background:var(--na-color-bg);min-width:190px}.na-state-sample{white-space:nowrap}.na-states-live{margin-top:24px}.na-states-live-buttons{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.na-states-status{color:#4b5563;min-height:24px;margin-top:12px;font:12px/1.6 system-ui,sans-serif}