.system-hub{padding-top:24px}.system-hub h1{letter-spacing:-.055em;margin:24px 0;font-size:clamp(32px,4.3vw,60px);line-height:1.2}.system-hub>p{color:var(--muted);line-height:1.9}.system-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:44px 0 32px;display:grid}.system-card{border:1px solid var(--border);background:var(--surface);border-radius:20px;flex-direction:column;min-width:0;padding:30px;display:flex}.system-card:hover{border-color:var(--foreground)}.system-card>span:first-child{letter-spacing:.13em;color:var(--muted);font-size:10px}.system-card h2{letter-spacing:-.04em;margin:30px 0 12px;font-size:clamp(26px,3vw,40px)}.system-card>p,.system-card>strong{font-size:13px;line-height:1.8}.system-card>strong{margin-top:auto;font-weight:500}.system-card-sample{pointer-events:none;place-items:center;min-height:150px;margin:20px -8px;display:grid}.system-card-link{border-top:1px solid var(--border);justify-content:space-between;margin-top:24px;padding-top:20px;font-size:13px;display:flex}.scope-notice{border-left:2px solid var(--brand);color:var(--muted);margin:0 0 30px;padding:10px 16px;font-size:12px;line-height:1.9}.system-switcher{border-bottom:1px solid var(--border);margin-bottom:24px;padding-bottom:22px}.system-switcher>span{color:var(--muted);margin:8px;font-size:10px;display:block}.system-switcher a{border-radius:8px;justify-content:space-between;align-items:center;padding:10px;font-size:13px;display:flex}.system-switcher a[aria-current=true]{background:var(--surface);font-weight:600}@media (width<=760px){.system-cards{grid-template-columns:1fr;gap:16px;margin-top:28px}.system-card{padding:24px}}@font-face{font-family:Geist;src:url(/designsystem/fonts/Geist-Latin.woff2)format("woff2");font-style:normal;font-weight:100 900;font-display:swap}@font-face{font-family:Pretendard;src:url(/designsystem/fonts/PretendardVariable.woff2)format("woff2");font-style:normal;font-weight:45 920;font-display:swap}@font-face{font-family:Pretendard Variable;src:url(/designsystem/fonts/PretendardVariable.woff2)format("woff2");font-style:normal;font-weight:45 920;font-display:swap}:root{--background:#f4f5ef;--foreground:#0a0a0a;--surface:#eceee6;--well:#e9ece0;--border:#e1e3d8;--muted:#63655f;--brand:#a8d946;--ink:#0a0a0a;--control-bg:#0a0a0a;--control-ink:#f4f5ef;--shadow:0 12px 34px #262c1910;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;font-family:Geist,Pretendard,-apple-system,sans-serif}:root.dark{--background:#0a0a0a;--foreground:#fafafa;--surface:#171717;--well:#141611;--border:#292b26;--muted:#a5a79f;--control-bg:#fafafa;--control-ink:#0a0a0a;--shadow:0 12px 34px #0004;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:130px}body{background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;margin:0}body:has(dialog[open]){overflow:hidden}button,input,textarea,select{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}button{color:inherit}svg{stroke-width:1.6px;flex:none;width:18px;height:18px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--foreground);outline-offset:4px}::selection{background:var(--foreground);color:var(--background)}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.04em;font-weight:500}ul{margin:0;padding:0}.sr-only{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.skip-link{z-index:100;background:var(--control-bg);color:var(--control-ink);border-radius:12px;padding:14px 20px;position:fixed;top:-90px;left:20px}.skip-link:focus{top:14px}.site-header{z-index:20;background:var(--background);border-bottom:1px solid var(--border);align-items:center;gap:24px;max-width:1600px;height:80px;margin:auto;padding:0 40px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;display:flex}.brand img{width:32px;height:32px}.brand strong{letter-spacing:-.03em;font-size:18px;font-weight:650}.header-title{border-left:1px solid var(--border);color:var(--muted);padding-left:24px;font-size:14px}.site-header>nav{gap:6px;margin-left:auto;display:flex}.site-header>nav a{color:var(--muted);border-radius:999px;padding:9px 16px;font-size:13px}.site-header>nav a[aria-current],.site-header>nav a:hover{background:var(--surface);color:var(--foreground)}.header-actions{align-items:center;gap:6px;display:flex}.icon-button{width:38px;height:38px;color:var(--foreground);background:0 0;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-button:hover{background:var(--surface);border-color:var(--border)}.mobile-menu-button{display:none}.document-layout{grid-template-columns:232px minmax(0,1fr);max-width:1600px;margin:auto;display:grid}.desktop-sidebar{scrollbar-width:thin;scrollbar-color:var(--border) transparent;border-right:1px solid var(--border);height:calc(100dvh - 80px);padding:32px 24px 24px 32px;position:sticky;top:80px;overflow-y:auto}.search-shortcut{border:1px solid var(--border);width:100%;min-height:40px;color:var(--muted);text-align:left;background:0 0;border-radius:10px;align-items:center;gap:9px;padding:0 10px;font-size:12px;display:flex}.search-shortcut svg{width:15px;height:15px}.search-shortcut kbd{color:var(--muted);white-space:nowrap;margin-left:auto;font-family:inherit;font-size:10px}.docs-navigation{padding-top:28px}.docs-navigation>section{margin-bottom:28px}.docs-navigation h2{color:var(--muted);letter-spacing:0;margin:0 0 10px 8px;font-size:11px;font-weight:650}.docs-navigation a{color:var(--muted);border-radius:7px;margin:2px 0;padding:8px 10px;font-size:12px;line-height:1.5;display:block}.docs-navigation a[aria-current]{background:var(--surface);color:var(--foreground);font-weight:600}.docs-navigation a:hover{color:var(--foreground);background:var(--surface)}.sidebar-bottom{color:var(--muted);border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 8px;font-size:12px;display:flex}.main-content{min-width:0;max-width:1300px;padding:56px 56px 0}.main-content:focus{outline:none}.article-heading>span{color:var(--muted);margin-bottom:18px;font-size:12px;display:block}.article-heading h1{letter-spacing:-.05em;margin-bottom:18px;font-size:44px;line-height:1.18}.article-heading>p{color:var(--muted);max-width:660px;font-size:15px;line-height:1.8}.article-heading{margin-bottom:38px}.preview-panel{border:1px solid var(--border);background:var(--background);border-radius:18px;margin:0 0 48px;overflow:hidden}.preview-toolbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;font-size:11px;display:flex}.preview-toolbar>div:first-child{color:var(--muted);align-items:center;gap:8px;display:flex}.live-dot{background:var(--foreground);border-radius:50%;width:5px;height:5px}.preview-options{align-items:center;gap:16px;display:flex}.preview-options>label{align-items:center;display:flex;position:relative}.preview-options select{appearance:none;color:var(--foreground);cursor:pointer;background:0 0;border:0;max-width:145px;padding:8px 28px 8px 8px;font-size:12px}.preview-options label svg{pointer-events:none;width:13px;position:absolute;right:6px}.width-toggle{border:0;border-left:1px solid var(--border);color:var(--muted);background:0 0;padding:8px 0 8px 16px;font-size:11px}.preview-stage{background:var(--well);justify-content:center;align-items:center;min-height:270px;padding:40px 28px;display:flex}.preview-width{width:100%;max-width:100%;transition:max-width .18s}.preview-width.is-narrow{max-width:380px}.preview-caption{color:var(--muted);justify-content:space-between;gap:20px;padding:12px 20px;font-size:10px;line-height:1.6;display:flex}.reading-grid{grid-template-columns:minmax(0,760px) 160px;align-items:start;gap:44px;display:grid}.reading-grid>div{min-width:0}.article-tabs{border-bottom:1px solid var(--border);gap:28px;margin-bottom:36px;display:flex}.article-tabs button{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:0 0 15px;font-size:13px}.article-tabs button[aria-current]{border-color:var(--foreground);color:var(--foreground);font-weight:600}.article-prose{overflow-wrap:anywhere;color:var(--muted);font-size:14px;line-height:1.95}.article-prose h2{color:var(--foreground);letter-spacing:-.04em;margin:38px 0 16px;font-size:23px}.article-prose h2:first-child{margin-top:0}.article-prose h3{color:var(--foreground);margin:28px 0 12px;font-size:18px}.article-prose p{margin:14px 0}.article-prose ul,.article-prose ol{margin:16px 0;padding-left:20px}.article-prose li{margin:9px 0}.article-prose a{color:var(--foreground);text-underline-offset:4px;text-decoration:underline}.article-prose strong{color:var(--foreground);font-weight:600}.article-prose code{border:1px solid var(--border);background:var(--surface);border-radius:4px;padding:2px 4px;font-family:ui-monospace,monospace;font-size:12px}.article-prose pre,.source-section pre{background:var(--surface);border:1px solid var(--border);border-radius:12px;max-height:560px;padding:20px;font-size:12px;line-height:1.8;overflow:auto}.article-prose pre code{background:0 0;border:0;padding:0}.table-scroll{border:1px solid var(--border);border-radius:10px;max-width:100%;margin:24px 0;overflow:auto}.article-prose table{border-collapse:collapse;width:100%;min-width:490px;font-size:12px}.article-prose th{color:var(--foreground);text-align:left;background:var(--surface);font-weight:600}.article-prose td,.article-prose th{border-bottom:1px solid var(--border);vertical-align:top;padding:13px 14px}.on-this-page{border-left:1px solid var(--border);flex-direction:column;gap:13px;padding-left:20px;display:flex;position:sticky;top:115px}.on-this-page>span{color:var(--foreground);margin:0 0 6px;font-size:11px}.on-this-page a{color:var(--muted);font-size:11px;line-height:1.6}.on-this-page a:hover{color:var(--foreground)}.evidence-disclosure{border-top:1px solid var(--border);color:var(--muted);margin-top:44px;padding-top:20px;font-size:12px;line-height:1.9}.evidence-disclosure summary{cursor:pointer;color:var(--foreground);justify-content:space-between;align-items:center;font-weight:500;display:flex}.evidence-disclosure summary svg{width:14px}.evidence-disclosure p{margin:14px 0}.evidence-disclosure ul{margin:14px 0;list-style:none}.evidence-disclosure li{overflow-wrap:anywhere;justify-content:space-between;gap:14px;padding:6px 0;display:flex}.evidence-disclosure a{text-underline-offset:3px;text-decoration:underline}.source-link{flex:none;align-items:center;gap:4px;display:inline-flex}.source-link svg{width:12px}.source-section{min-width:0;font-size:13px;line-height:1.9}.source-section>div{justify-content:space-between;align-items:center;gap:16px;display:flex}.source-section h2{font-size:20px}.source-section p{color:var(--muted);margin:16px 0}.source-section h3{margin:24px 0 10px;font-size:15px}.source-section ul{overflow-wrap:anywhere;margin-bottom:20px;padding-left:20px}.source-section>a{text-underline-offset:4px;gap:10px;margin:12px 0;text-decoration:underline;display:flex}.quiet-button{border:1px solid var(--border);white-space:nowrap;background:0 0;border-radius:7px;align-items:center;gap:6px;padding:8px 10px;font-size:11px;display:flex}.quiet-button svg{width:13px}.overview-intro{grid-template-columns:minmax(0,1fr) minmax(300px,.95fr);align-items:center;gap:36px;padding:12px 0 60px;display:grid}.overview-intro h1{letter-spacing:-.065em;font-size:clamp(44px,4.6vw,68px);font-weight:500;line-height:1.05}.title-dot{color:var(--foreground)}.overview-intro>div>p{color:var(--muted);margin:28px 0;font-size:15px;line-height:1.85}.overview-intro .site-cta{font-size:12px}.intro-specimen{background:var(--surface);border:1px solid color-mix(in srgb, var(--foreground) 5%, transparent);border-radius:24px;min-height:340px;padding:28px;position:relative}.specimen-label{letter-spacing:.15em;color:var(--muted);font-size:9px}.intro-mini{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;margin-top:26px;padding-bottom:18px;display:flex}.mini-logo{letter-spacing:-.035em;font-size:12px;font-weight:650}.mini-status{color:var(--muted);align-items:center;gap:6px;font-size:9px;display:flex}.mini-status i{background:var(--foreground);border-radius:50%;width:4px;height:4px}.intro-copy{padding:24px 0}.intro-copy strong{letter-spacing:-.045em;font-size:26px;font-weight:500;line-height:1.3}.intro-copy p{color:var(--muted);margin-top:12px;font-size:11px;line-height:1.8}.intro-cta{justify-content:flex-end;display:flex}.intro-cta .cta-label{padding:10px 18px!important}.intro-cta .cta-arrow{width:34px!important}.section-heading{justify-content:space-between;align-items:center;gap:18px;margin-bottom:26px;display:flex}.section-heading h2{font-size:24px}.section-heading>span,.section-heading>a{color:var(--muted);font-size:11px}.section-heading>a{align-items:center;gap:8px;display:flex}.component-overview{border-top:1px solid var(--border);padding-top:36px}.component-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.component-card{border:1px solid var(--border);background:var(--background);border-radius:16px;min-width:0;overflow:hidden}.card-specimen{background:var(--well);pointer-events:none;justify-content:center;align-items:center;height:200px;padding:20px;display:flex;overflow:hidden}.card-specimen .sample{transform-origin:50%;width:100%;transform:scale(.9)}.component-card>a{justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;display:flex}.component-card>a h3{margin-bottom:5px;font-size:16px;font-weight:500}.component-card>a p{color:var(--muted);font-size:11px;line-height:1.6}.component-card>a:hover{background:var(--surface)}.component-card>a>svg{width:16px}.foundations-overview{margin-top:64px}.swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.swatches>div{min-width:0}.swatches>div>span{border:1px solid color-mix(in srgb, var(--foreground) 12%, transparent);border-radius:12px;height:100px;margin-bottom:12px;display:block}.swatches strong{font-size:11px;font-weight:500;line-height:1.7;display:block}.swatches code{color:var(--muted);font-size:10px}.foundation-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;display:grid}.foundation-links>a{border-top:1px solid var(--border);padding:24px 0}.foundation-links>a>span{letter-spacing:-.055em;align-items:center;height:68px;margin-bottom:12px;font-size:32px;display:flex}.foundation-links strong{font-size:13px;font-weight:500}.foundation-links p{color:var(--muted);margin-top:8px;font-size:11px}.spacing-lines{gap:8px;padding-bottom:6px;align-items:flex-end!important}.spacing-lines i{background:var(--foreground);border-radius:2px;width:9px;height:25px}.spacing-lines i:nth-child(2){width:16px;height:38px}.spacing-lines i:nth-child(3){width:24px;height:52px}.products-overview{border-top:1px solid var(--border);margin-top:50px;padding-top:40px}.products-overview h2{font-size:24px}.products-overview>p{color:var(--muted);margin-top:14px;font-size:13px}.products-overview>div{margin-top:26px}.products-overview a{border-bottom:1px solid var(--border);align-items:center;gap:20px;padding:22px 0;display:flex}.products-overview strong{width:130px;font-size:15px;font-weight:550}.products-overview span{color:var(--muted);font-size:12px}.products-overview svg{margin-left:auto}.type-specimen{padding:14px 18px}.type-large{letter-spacing:-.04em;font-size:64px}.type-specimen h3{margin-top:18px;font-size:30px}.type-specimen p{color:var(--muted);margin:16px 0;font-size:14px;line-height:1.8}.type-specimen code{font-size:12px}.space-specimen{flex-direction:column;gap:16px;display:flex}.space-specimen>div{align-items:center;gap:24px;display:flex}.space-specimen span{width:34px;font:11px ui-monospace,monospace}.space-specimen i{background:var(--foreground);border-radius:2px;height:15px}.icon-specimen{flex-wrap:wrap;justify-content:space-around;gap:20px;display:flex}.icon-specimen>div{justify-items:center;gap:16px;font-size:11px;display:grid}.icon-specimen svg{width:24px;height:24px}footer{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:28px;margin-top:80px;padding:30px 0 38px;display:flex}.footer-wordmark{letter-spacing:-.025em;align-items:center;gap:12px;font-size:15px;font-weight:650;display:flex}.footer-wordmark span{color:var(--muted);letter-spacing:0;font-size:11px;font-weight:400}footer p{display:none}footer>div{color:var(--muted);gap:22px;margin-left:auto;font-size:10px;display:flex}footer>div a{align-items:center;gap:4px;display:flex}footer svg{width:12px}.search-dialog{border:1px solid var(--border);background:var(--background);width:min(640px,100% - 32px);max-height:min(660px,85dvh);color:var(--foreground);border-radius:20px;padding:0;overflow:hidden;box-shadow:0 24px 90px #0003}.search-dialog::backdrop,.mobile-drawer::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006}.search-box{border-bottom:1px solid var(--border);align-items:center;gap:14px;padding:16px 20px;display:flex}.search-box>input{width:100%;min-width:0;color:var(--foreground);background:0 0;border:0;outline:none;padding:8px 0;font-size:14px}.search-result-list{max-height:520px;padding:12px 16px 20px;overflow-y:auto}.search-result-list>p{color:var(--muted);padding:12px;font-size:11px}.search-result-list>a{border-radius:10px;align-items:center;gap:16px;padding:14px 12px;display:flex}.search-result-list>a:hover{background:var(--surface)}.search-result-list>a>div{flex:1;min-width:0}.search-result-list strong{font-size:13px;font-weight:550;display:block}.search-result-list>a>div>span{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:5px;font-size:11px;display:block;overflow:hidden}.search-result-list>a>span{white-space:nowrap;color:var(--muted);font-size:10px}.search-result-list svg{width:14px}.mobile-drawer{border:0;border-left:1px solid var(--border);background:var(--background);width:330px;max-width:calc(100% - 48px);height:100dvh;max-height:none;color:var(--foreground);margin:0 0 0 auto;padding:24px}.mobile-drawer>div{justify-content:space-between;align-items:center;display:flex}.mobile-drawer>div strong{font-size:17px;font-weight:500}.mobile-drawer .docs-navigation a{padding:12px;font-size:13px}.missing-page{padding:80px 0}.missing-page h1{font-size:36px}.missing-page p{margin:24px 0}.missing-page a{text-decoration:underline}@media (width>=1800px){.main-content{padding-left:72px;padding-right:72px}}@media (width<=1240px){.main-content{padding:44px 32px 0}.reading-grid{grid-template-columns:minmax(0,1fr)}.on-this-page{display:none}.document-layout{grid-template-columns:210px minmax(0,1fr)}.desktop-sidebar{padding-left:22px;padding-right:18px}.overview-intro{grid-template-columns:1fr 1fr;gap:24px}.overview-intro h1{font-size:48px}.intro-specimen{padding:22px}.intro-copy strong{font-size:24px}.header-title{padding-left:18px}.site-header{gap:18px;padding:0 28px}.component-grid{gap:14px}.preview-caption{flex-direction:column;gap:2px}}@media (width<=960px){.overview-intro{grid-template-columns:1fr}.overview-intro>div:first-child{padding:8px 0 16px}.intro-specimen{grid-template-columns:1fr auto;column-gap:30px;max-width:none;min-height:300px;display:grid}.intro-mini{border-bottom:0;margin-top:0;padding-bottom:0}.intro-copy{padding-top:28px}.intro-cta{align-items:flex-end;padding-bottom:8px}.component-grid{grid-template-columns:1fr}.card-specimen{height:190px}.site-header>nav{display:none}.header-actions{margin-left:auto}.article-heading h1{font-size:38px}}@media (width<=760px){.site-header{gap:14px;height:70px;padding:0 20px}.brand img{width:27px;height:27px}.brand strong{font-size:15px}.header-title{padding-left:14px;font-size:11px}.header-actions{gap:0}.header-actions>.icon-button{width:34px}.mobile-menu-button{display:inline-flex}.desktop-sidebar{display:none}.document-layout{display:block}.main-content{padding:38px 20px 0}.overview-intro{padding-bottom:36px}.overview-intro h1{font-size:52px}.overview-intro>div>p{margin:22px 0;font-size:14px}.intro-specimen{border-radius:18px;min-height:280px;padding:22px}.mini-status{font-size:8px}.intro-copy strong{font-size:23px}.intro-copy p{font-size:10px}.intro-mini{gap:12px}.section-heading h2{font-size:21px}.section-heading>span{white-space:nowrap;font-size:10px}.component-grid{grid-template-columns:1fr}.card-specimen{height:195px}.swatches{gap:10px}.swatches>div>span{border-radius:8px;height:70px}.swatches strong,.swatches code{font-size:9px}.foundation-links{gap:14px}.foundation-links>a>span{font-size:23px}.foundation-links strong{font-size:11px}.foundation-links p{font-size:10px}.products-overview h2{font-size:22px}.products-overview a{gap:10px}.products-overview strong{width:110px;font-size:14px}.products-overview span{font-size:10px}.preview-toolbar{gap:4px;padding:10px 12px}.preview-toolbar>div:first-child{white-space:nowrap;font-size:10px}.preview-options{gap:6px}.preview-options select{max-width:120px;font-size:11px}.width-toggle{padding-left:10px;font-size:9px}.preview-stage{min-height:260px;padding:24px 16px}.preview-caption{padding:10px 12px;font-size:9px}.article-heading h1{font-size:36px}.article-heading>p{font-size:14px}.article-tabs{gap:22px}.article-tabs button{font-size:12px}.article-prose{font-size:13px}.article-prose h2{font-size:21px}.source-section>div{align-items:flex-start}.source-section h2{font-size:17px}.source-section{font-size:12px}footer{gap:16px;margin-top:60px;padding-bottom:30px}footer>div{width:100%;margin-left:0;font-size:10px}.search-result-list>a>span{display:none}.type-large{font-size:50px}.type-specimen h3{font-size:23px}.type-specimen p{font-size:12px}.source-section pre{font-size:10px}.evidence-disclosure li{flex-wrap:wrap;gap:4px}}@media (width<=360px){.header-title{display:none}.overview-intro h1{font-size:44px}.intro-specimen{display:block}.intro-mini{margin-top:16px}.intro-cta{justify-content:flex-start}.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.width-toggle{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}@media print{.site-header,.desktop-sidebar,.preview-options,.article-tabs,.on-this-page,.header-actions{display:none}.document-layout,.reading-grid{display:block}.main-content{padding:0}.preview-panel{break-inside:avoid}.article-prose{color:#111}.table-scroll{overflow:visible}.article-prose table{min-width:0}}.docs-navigation a{font-size:13px}.article-prose{font-size:15px}.card-specimen{pointer-events:auto}.compact-sample button,.compact-sample input{pointer-events:none}@media (width<=760px){.article-prose{font-size:14px}}.sample{--demo-bg:#f4f5ef;--demo-surface:#f9faf6;--demo-text:#0a0a0a;--demo-muted:#686b62;--demo-border:#daddd0;--demo-accent:#0a0a0a;--demo-accent-hover:#262626;--demo-ink:#f4f5ef;--demo-radius:12px;--demo-field-radius:12px;--demo-danger:#b7372c;--demo-danger-ink:#fff;--demo-hover:#eceee6;--demo-height:42px;--demo-input-height:42px;--demo-font:Geist, Pretendard, sans-serif;--wicked-text:var(--demo-text);--wicked-muted:var(--demo-muted);--wicked-canvas:var(--demo-bg);--wicked-surface-hover:var(--demo-hover);--wicked-surface:var(--demo-surface);--wicked-border:var(--demo-border);--wicked-border-strong:var(--demo-border);--wicked-radius:var(--demo-radius);--wicked-accent:var(--demo-accent);--wicked-accent-ink:var(--demo-ink);--arct-text:var(--demo-text);--arct-muted:var(--demo-muted);--arct-surface-hover:var(--demo-hover);--arct-panel:var(--demo-surface);--arct-panel-hover:var(--demo-hover);--arct-border:var(--demo-border);--arct-border-strong:var(--demo-border);--arct-radius:var(--demo-radius);--arct-accent:var(--demo-accent);--arct-accent-hover:var(--demo-accent-hover);--arct-accent-ink:var(--demo-ink);--arct-danger:var(--demo-danger);--vx-control-height:42px;--vx-control-height-compact:40px;--vx-sp-2:8px;--vx-sp-3:12px;--vx-sp-4:16px;--vx-r-md:var(--demo-radius);--vx-r-sm:var(--demo-radius);--vx-font-sans:var(--demo-font);--vx-text-sm:.875rem;--vx-dur-fast:.15s;--vx-btn-solid-text:var(--demo-ink);--vx-btn-solid-bg:var(--demo-accent);--vx-btn-solid-bg-hover:var(--demo-accent-hover);--vx-text:var(--demo-text);--vx-line-strong:var(--demo-border);--vx-surface-strong:var(--demo-surface);--vx-danger:var(--demo-danger);--vx-warning:#c98a1b;--wk-site-fg:var(--demo-text);--wk-site-bg:var(--demo-bg);--wk-site-border:var(--demo-border);--wk-site-muted:var(--demo-hover);color:var(--demo-text);font-family:var(--demo-font);min-width:0;max-width:100%;font-size:13px;line-height:1.6}.sample[data-family=wickedhost]{--demo-bg:#f6f7f3;--demo-surface:#fff;--demo-text:#171916;--demo-muted:#687066;--demo-border:#d7dcd2;--demo-accent:#8ccb24;--demo-accent-hover:#78b719;--demo-ink:#142006;--demo-radius:4px;--demo-field-radius:4px;--demo-danger:#b73737;--demo-warning:#805200;--demo-info:#285d91;--demo-hover:#f1f3ee;--demo-height:40px;--demo-font:"Pretendard Variable", Pretendard, Inter, sans-serif}.dark .sample{--demo-bg:#0a0a0a;--demo-surface:#171717;--demo-text:#fafafa;--demo-muted:#a3a3a3;--demo-border:#36392e;--demo-accent:#fafafa;--demo-accent-hover:#fff;--demo-ink:#0a0a0a;--demo-danger:#ef6a5e;--demo-hover:#20221b}.dark .sample[data-family=wickedhost]{--demo-bg:#121211;--demo-surface:#1f1f1f;--demo-text:#fcfcfc;--demo-muted:#9a9b97;--demo-border:#3a3c39;--demo-accent:#a4e238;--demo-accent-hover:#b7f54d;--demo-ink:#11170a;--demo-danger:#f08080;--demo-warning:#e5b04c;--demo-info:#93b8ec;--demo-hover:#262726}.sample button,.sample input,.sample textarea,.sample select{font-family:var(--demo-font)}.sample button{color:var(--demo-text)}.sample button:disabled{opacity:.48;cursor:not-allowed}.sample svg{stroke-width:1.7px;width:16px;height:16px}.site-cta{color:var(--foreground);cursor:pointer;vertical-align:middle;isolation:isolate;white-space:nowrap;background:0 0;border:0;justify-content:center;align-items:center;padding:0;font-family:inherit;text-decoration:none;display:inline-flex;position:relative}.cta-underlay{z-index:-1;background:#a8d946;border-radius:12px;position:absolute;inset:0 0 0 24px}.cta-label{background:var(--control-bg);color:var(--control-ink);border-radius:12px;justify-content:center;align-items:center;gap:7px;padding:12px 20px;font-size:14px;font-weight:500;line-height:20px;display:flex;position:relative}.cta-arrow{color:#0a0a0a;justify-content:center;align-items:center;width:40px;height:40px;margin-left:-1px;display:flex}.cta-arrow svg{width:16px;height:16px;transition:transform .3s}.site-cta:hover .cta-arrow svg{transform:rotate(-45deg)}.site-cta:disabled{opacity:.48;cursor:not-allowed}.sample-button{min-height:var(--demo-height);border-radius:var(--demo-radius);background:var(--demo-accent);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:7px;padding:0 16px;font-size:13px;font-weight:550;line-height:1.2;display:inline-flex;color:var(--demo-ink)!important}.sample-button.variant-secondary,.sample-button.variant-ghost{border-color:var(--demo-border);background:var(--demo-bg);color:var(--demo-text)!important}.sample-button.variant-secondary:hover{background:var(--demo-hover)}.sample-button.variant-danger{background:var(--demo-danger);color:var(--demo-danger-ink)!important}.sample-button:hover:not(:disabled){filter:brightness(.96)}.sample-button.variant-primary:hover:not(:disabled){background:var(--demo-accent-hover)}.sample .tw-dialog-danger{color:var(--arct-danger)!important}.button-specimens{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;padding:12px 0;display:flex}.button-specimens>div{flex-direction:column;align-items:center;gap:16px;min-width:92px;display:flex}.button-specimens small{color:var(--demo-muted);font-size:10px}.demo-spin{animation:1s linear infinite demo-spin}@keyframes demo-spin{to{transform:rotate(360deg)}}.demo-feedback{color:var(--demo-muted);text-align:center;min-height:18px;margin-top:26px;font-size:11px;line-height:1.7;display:block}.demo-field{text-align:left;flex-direction:column;gap:8px;min-width:0;display:flex}.demo-field>label{color:var(--demo-text);font-size:12px;font-weight:600}.demo-field>small{color:var(--demo-muted);font-size:10px}.demo-input{height:var(--demo-input-height);border:1px solid var(--demo-border);border-radius:var(--demo-field-radius);background:var(--demo-surface);width:100%;min-width:0;color:var(--demo-text);padding:0 12px;font-size:13px}.demo-input:focus{outline:2px solid color-mix(in srgb, var(--demo-accent) 22%, transparent);outline-offset:0;border-color:var(--demo-accent)}.demo-input::placeholder{color:var(--demo-muted)}.demo-input[aria-invalid=true]{border-color:var(--demo-danger)}.demo-error{color:var(--demo-danger);font-size:11px;line-height:1.6}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;display:grid}.field-grid>.demo-error{grid-column:1/-1}.stepper{max-width:240px;height:var(--demo-input-height);background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);display:flex;overflow:hidden}.stepper button{background:0 0;border:0;width:44px;font-size:18px}.stepper input{text-align:center;border:0;border-inline:1px solid var(--demo-border);width:100%;min-width:0;color:var(--demo-text);appearance:textfield;background:0 0}.stepper input::-webkit-inner-spin-button{appearance:none}.demo-options{border:0;flex-direction:column;gap:17px;padding:0;display:flex}.demo-options legend{margin-bottom:20px;font-size:13px;font-weight:600}.demo-options label{cursor:pointer;align-items:center;gap:10px;width:fit-content;min-height:24px;font-size:12px;display:flex}.sample input[type=checkbox],.sample input[type=radio]{width:16px;height:16px;accent-color:var(--demo-accent);flex:none;margin:0}.demo-options output{color:var(--demo-muted);font-size:11px}.toggle-example{flex-wrap:wrap;align-items:center;gap:24px;padding:10px;display:flex}.toggle-example>div{flex:1;min-width:150px}.toggle-example strong{font-size:13px;font-weight:600}.toggle-example p{color:var(--demo-muted);margin-top:5px;font-size:11px}.toggle-example output{width:38px;font-size:11px}.switch-control{width:48px;height:24px;display:block;position:relative}.switch-control input{opacity:0;cursor:pointer;position:absolute;inset:0;width:48px!important;height:24px!important}.switch-control>span{background:var(--demo-border);border:1px solid var(--demo-border);pointer-events:none;border-radius:12px;width:48px;height:24px;display:block}.switch-control>span:after{content:"";background:var(--demo-muted);border-radius:50%;width:16px;height:16px;margin:3px;transition:transform .16s;display:block}.switch-control input:checked+span{background:var(--demo-accent);border-color:var(--demo-accent)}.switch-control input:checked+span:after{background:var(--demo-ink);transform:translate(24px)}.switch-control input:focus-visible+span{outline:2px solid var(--demo-text);outline-offset:4px}.demo-form{background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);flex-direction:column;gap:20px;max-width:440px;margin:auto;padding:24px;display:flex}.demo-form h3{font-size:18px;line-height:1.3}.demo-form p{color:var(--demo-muted);margin-top:8px;font-size:11px}.demo-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.demo-dialog{color:var(--demo-text);background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);width:calc(100% - 40px);max-width:480px;padding:24px}.demo-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0007}.dialog-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.dialog-heading h3{font-size:20px}.demo-dialog>p{color:var(--demo-muted);margin:16px 0 26px;font-size:13px;line-height:1.8}.demo-dialog .icon-button{color:var(--demo-text)}.notice-stack{flex-direction:column;gap:12px;max-width:500px;margin:auto;display:flex}.demo-notice{border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);align-items:flex-start;gap:12px;padding:14px 16px;font-size:12px;display:flex}.demo-notice>svg{flex:none;margin-top:2px}.demo-notice>div{flex:1}.demo-notice strong{font-size:12px;font-weight:600}.demo-notice p{color:var(--demo-muted);margin-top:3px;font-size:11px;line-height:1.7}.demo-notice.success{border-left:3px solid #678137}.demo-notice.success>svg{color:#678137}.demo-notice.error{border-left:3px solid var(--demo-danger)}.demo-notice.error>svg{color:var(--demo-danger)}.demo-notice.warning{border-left:3px solid var(--demo-warning,#a87710)}.demo-notice.warning>svg{color:var(--demo-warning,#a87710)}.demo-notice.info{border-left:3px solid var(--demo-info,#526f91)}.demo-notice.info>svg{color:var(--demo-info,#526f91)}.demo-notice button{background:0 0;border:0;place-items:center;margin-left:auto;padding:2px;display:grid}.demo-notice button svg{width:14px;height:14px}.demo-table-scroll{border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);max-width:100%;overflow:auto}.demo-table{border-collapse:collapse;text-align:left;width:100%;min-width:440px;font-size:12px}.demo-table caption{text-align:left;border-bottom:1px solid var(--demo-border);padding:14px;font-size:13px;font-weight:600}.demo-table th,.demo-table td{border-bottom:1px solid var(--demo-border);white-space:nowrap;padding:14px 16px;font-weight:400}.demo-table thead th{background:var(--demo-bg);color:var(--demo-muted);font-size:11px}.demo-table th button{background:0 0;border:0;align-items:center;gap:6px;padding:0;font-size:11px;display:flex}.demo-table th button svg{width:12px}.demo-table tbody tr:last-child>*{border-bottom:0}.status-dot{color:var(--demo-muted);align-items:center;gap:6px;font-size:10px;display:inline-flex}.status-dot:before{content:"";background:#718947;border-radius:50%;width:5px;height:5px}.status-dot[data-status=중지됨]:before{background:var(--demo-muted)}.pagination-example{text-align:center;justify-content:center;gap:24px;display:grid}.pagination-example>p{color:var(--demo-muted);font-size:12px}.pagination-example nav{align-items:center;gap:24px;display:flex}.pagination-example nav>span{font-size:12px}.local-tabs{border-bottom:1px solid var(--demo-border);gap:24px;display:flex}.local-tabs>button{color:var(--demo-muted);background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 4px;font-size:12px}.local-tabs>button[aria-selected=true]{color:var(--demo-text);border-color:var(--demo-accent)}.demo-tab-panel{min-height:120px;padding:28px 10px}.demo-tab-panel strong{font-size:17px;font-weight:550}.demo-tab-panel p{color:var(--demo-muted);margin-top:12px;font-size:12px}.accordion-example{border-top:1px solid var(--demo-border)}.accordion-example>details{border-bottom:1px solid var(--demo-border)}.accordion-example summary{cursor:pointer;justify-content:space-between;align-items:center;padding:18px 6px;font-size:13px;list-style:none;display:flex}.accordion-example details[open] summary svg{transform:rotate(45deg)}.accordion-example p{color:var(--demo-muted);padding:0 30px 20px 6px;font-size:12px;line-height:1.9}.demo-breadcrumb{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.demo-breadcrumb>span{align-items:center;gap:10px;font-size:12px;display:flex}.demo-breadcrumb a{color:var(--demo-muted);text-underline-offset:4px;text-decoration:underline}.demo-breadcrumb svg{width:12px}.demo-breadcrumb+span{margin-top:24px}.tooltip-example{flex-direction:column;align-items:center;gap:22px;padding:22px;display:flex}.tooltip-example p{color:var(--demo-muted);font-size:11px}.tooltip-wrap{position:relative}.tooltip-wrap>.icon-button{background:var(--demo-surface);border-color:var(--demo-border);color:var(--demo-text)}.tooltip-wrap>[role=tooltip]{background:var(--demo-text);color:var(--demo-bg);white-space:nowrap;visibility:hidden;opacity:0;border-radius:5px;padding:7px 10px;font-size:11px;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.tooltip-wrap:hover>[role=tooltip],.tooltip-wrap:focus-within>[role=tooltip]{visibility:visible;opacity:1}.popover-example{min-height:170px;position:relative}.popover-example>button{min-height:38px}.ai-trigger{background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);align-items:center;gap:8px;padding:8px 13px;font-size:12px;display:inline-flex}.demo-popover{border-radius:var(--demo-radius);border:1px solid var(--demo-border);background:var(--demo-surface);max-width:340px;box-shadow:var(--shadow);margin-top:10px;padding:18px;position:relative}.popover-title{justify-content:space-between;gap:12px;display:flex}.popover-title strong{font-size:13px;font-weight:600}.popover-title button{background:0 0;border:0;align-items:center;padding:0;display:flex}.popover-title svg{width:14px}.demo-popover p{color:var(--demo-muted);margin:12px 0;font-size:12px;line-height:1.8}.demo-popover>a{text-underline-offset:4px;align-items:center;gap:6px;font-size:11px;text-decoration:underline;display:flex}.demo-popover>button{background:0 0;border:0;border-radius:4px;align-items:center;gap:6px;width:100%;padding:10px;font-size:12px;display:flex}.demo-popover>button:hover{background:var(--demo-hover)}.demo-popover>button.danger-text{color:var(--demo-danger);border-top:1px solid var(--demo-border);border-radius:0}.tag-example{flex-wrap:wrap;gap:10px;margin:18px 0;display:flex}.demo-tag{background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:999px;align-items:center;gap:8px;padding:5px 9px;font-size:11px;display:inline-flex}.demo-tag button{background:0 0;border:0;justify-content:center;align-items:center;padding:3px;display:flex}.demo-tag svg{width:12px;height:12px}.demo-tag.readonly{color:var(--demo-muted)}.tile-example{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.demo-tile{text-align:left;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);min-width:0;color:var(--demo-text);padding:22px;display:block}.demo-tile[aria-pressed=true]{border-color:var(--demo-accent)}.demo-tile>div{justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px;display:flex}.tile-icon{background:var(--demo-bg);border:1px solid var(--demo-border);border-radius:var(--demo-radius);place-items:center;width:32px;height:32px;display:grid}.demo-tile strong{font-size:14px;font-weight:550}.demo-tile p{color:var(--demo-muted);margin-top:8px;font-size:10px;line-height:1.8}.upload-drop{border:1px dashed var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);flex-direction:column;align-items:center;gap:14px;padding:30px 20px;display:flex}.upload-drop>svg{width:26px;height:26px;color:var(--demo-muted)}.upload-drop strong{text-align:center;font-size:13px;font-weight:500}.upload-drop>span{color:var(--demo-muted);text-align:center;font-size:10px}.upload-drop>label{cursor:pointer;min-height:36px;font-size:11px;position:relative}.upload-drop input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.upload-drop>label:focus-within{outline:2px solid var(--demo-text);outline-offset:4px}.upload-example>ul{margin-top:16px;list-style:none}.upload-example>ul>li{border-bottom:1px solid var(--demo-border);align-items:center;gap:10px;padding:14px 0;font-size:12px;display:flex}.upload-example>ul>li>span{overflow-wrap:anywhere;min-width:0}.upload-example small{color:var(--demo-muted);font-size:10px;display:block}.upload-example li>button{background:0 0;border:0;margin-left:auto;display:flex}.progress-example{max-width:470px;margin:auto}.progress-example>div:first-child{justify-content:space-between;margin-bottom:14px;font-size:12px;display:flex}.progress-example progress{background:var(--demo-border);width:100%;height:6px;accent-color:var(--demo-accent);border:none;border-radius:99px;display:block;overflow:hidden}.progress-example progress::-webkit-progress-bar{background:var(--demo-border)}.progress-example progress::-webkit-progress-value{background:var(--demo-accent)}.progress-example>p{color:var(--demo-muted);margin:14px 0 24px;font-size:11px}.steps-example>ol{margin:0 0 28px;padding:0;list-style:none;display:flex}.steps-example li{color:var(--demo-muted);flex:1;align-items:center;gap:8px;font-size:11px;display:flex;position:relative}.steps-example li>span{border:1px solid var(--demo-border);background:var(--demo-surface);border-radius:50%;place-items:center;width:26px;height:26px;font-size:10px;display:grid}.steps-example li[aria-current=step]{color:var(--demo-text)}.steps-example li[aria-current=step]>span,.steps-example li[data-complete=true]>span{background:var(--demo-accent);color:var(--demo-ink);border-color:var(--demo-accent)}.steps-example>p{color:var(--demo-muted);margin-bottom:24px;font-size:12px}.steps-example svg{width:12px}.code-example{border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);overflow:hidden}.code-example>div{border-bottom:1px solid var(--demo-border);color:var(--demo-muted);justify-content:space-between;align-items:center;padding:12px 16px;font-size:11px;display:flex}.code-example button{background:0 0;border:0;align-items:center;gap:6px;padding:4px;font-size:10px;display:flex}.code-example svg{width:13px}.code-example pre{margin:0;padding:22px;font:12px/1.8 ui-monospace,monospace;overflow:auto}.code-example output{color:var(--demo-danger);font-size:11px}.tree-example details{padding-left:16px}.tree-example>details{padding-left:0}.tree-example summary,.tree-example button{cursor:pointer;border-radius:4px;align-items:center;gap:8px;padding:9px 8px;font-size:12px;list-style:none;display:flex}.tree-example button{text-align:left;background:0 0;border:0;width:100%;padding-left:30px}.tree-example button.selected{background:var(--demo-surface)}.tree-example p{color:var(--demo-muted);margin-top:18px;font-size:11px}.link-example{flex-wrap:wrap;align-items:center;gap:28px;display:flex}.link-example>a{color:var(--demo-text);text-underline-offset:5px;align-items:center;gap:6px;font-size:13px;text-decoration:underline;display:flex}.link-example>a:hover{opacity:.7}.link-example>p{width:100%;color:var(--demo-muted);margin-top:10px;font-size:11px}.search-input{background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-field-radius);align-items:center;gap:10px;padding:0 12px;display:flex}.search-input input{width:100%;min-width:0;height:40px;color:var(--demo-text);background:0 0;border:0;outline:none;font-size:12px}.search-input:focus-within{outline:2px solid var(--demo-accent);outline-offset:2px}.search-input svg{color:var(--demo-muted)}.search-specimen ul{margin:18px 0;list-style:none}.search-specimen li{border-bottom:1px solid var(--demo-border);justify-content:space-between;align-items:center;gap:16px;padding:12px 4px;font-size:12px;display:flex}.search-specimen>output{color:var(--demo-muted);font-size:11px}.mini-list,.mini-cards{gap:12px;padding-top:20px;display:flex}.mini-list{flex-direction:column}.mini-list>div,.mini-cards>div{border:1px solid var(--demo-border);background:var(--demo-surface);border-radius:var(--demo-radius);align-items:center;gap:12px;padding:12px;font-size:11px;display:flex}.mini-cards>div{text-align:center;flex-direction:column;flex:1;min-width:0;padding:24px 10px}.compact-sample .button-specimens>div:nth-child(n+3),.compact-sample .button-specimens small,.compact-sample .demo-feedback,.compact-sample .demo-error,.compact-sample .notice-stack>.demo-notice:nth-child(n+3){display:none}.compact-sample .button-specimens{gap:16px}.compact-sample .field-grid{grid-template-columns:1fr;gap:14px}.compact-sample .field-grid>.demo-field:nth-child(n+2){display:none}.compact-sample .demo-field>small{font-size:10px}.compact-sample .demo-table{min-width:330px;font-size:10px}.compact-sample .demo-table th,.compact-sample .demo-table td{padding:10px 12px}.compact-sample .demo-table caption{padding:10px 12px;font-size:11px}.compact-sample .demo-notice{padding:10px 12px}.compact-sample .demo-tile{padding:16px}.compact-sample .demo-tile>div{margin-bottom:14px}.compact-sample .demo-tile p{font-size:9px}.compact-sample .demo-tile strong{font-size:12px}.wide-field{grid-column:1/-1}.demo-textarea{resize:vertical;height:88px;padding:12px;line-height:1.7}.compact-sample .wide-field{display:none}.stepper:has([aria-invalid=true]){border-color:var(--demo-danger)}.tooltip-wrap[data-dismissed=true]>[role=tooltip]{visibility:hidden;opacity:0}@media (width<=760px){.sample{font-size:12px}.button-specimens{gap:24px 18px}.button-specimens>div{min-width:108px}.field-grid{grid-template-columns:1fr;gap:20px}.preview-width.is-narrow{max-width:100%}.demo-form{padding:20px}.tile-example{gap:10px}.demo-tile{padding:16px}.demo-tile p{font-size:9px}.demo-dialog{padding:20px}.dialog-heading h3{font-size:18px}.demo-dialog .demo-actions{gap:8px}.sample .tw-dialog-button{width:auto!important;min-width:90px!important}.steps-example li{gap:6px;font-size:10px}.steps-example li>span{width:22px;height:22px}.link-example{gap:20px}.toggle-example{gap:16px;padding:0}.toggle-example>div{min-width:140px}.toggle-example output{width:30px}.demo-actions{gap:8px}.demo-input{font-size:16px}.compact-sample .demo-input{font-size:13px}.compact-sample .demo-table{min-width:300px}.compact-sample .demo-table td,.compact-sample .demo-table th{padding:8px}.source-link svg{width:12px}}.square-switch{flex:0 0 48px;width:48px;height:24px;position:relative}.square-switch>input{opacity:0;z-index:1;cursor:pointer;position:absolute;inset:0;width:48px!important;height:24px!important;margin:0!important}.square-switch>label{border:1px solid var(--demo-border);background:var(--demo-hover);border-radius:4px;width:48px;height:24px;margin:0;display:block;position:relative}.square-switch>label:before{content:"";background:var(--demo-muted);border-radius:2px;width:16px;height:16px;transition:right .12s,background .12s;display:block;position:absolute;top:3px;right:28px}.square-switch>input:checked+label{background:var(--demo-surface);border-color:var(--demo-accent)}.square-switch>input:checked+label:before{background:var(--demo-accent);right:3px}.square-switch>input:focus-visible+label{outline:2px solid var(--demo-accent);outline-offset:2px}.square-switch>input:disabled{cursor:not-allowed}.square-switch>input:disabled+label{opacity:.45}.square-switch>input[aria-readonly=true]{cursor:default}.switch-control input:disabled+span{opacity:.45}.switch-laboratory{max-width:790px;margin:auto}.switch-state-grid{border-top:1px solid var(--demo-border);grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;padding-top:24px;display:grid}.switch-state-grid>div{align-items:center;gap:12px;display:flex}.switch-state-grid>div>span{font-size:12px}.demo-failure-control{align-items:center;gap:8px;margin:12px 10px;font-size:12px;display:flex}.demo-failure-control input{width:auto!important}.expanded-panel{border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);overflow-wrap:anywhere;width:100%;max-width:740px;margin:auto;padding:24px}.expanded-panel>*+*{margin-top:18px}.expanded-panel h3{margin:0 0 6px;font-size:16px}.expanded-panel p{margin-bottom:0}.expanded-panel input:not([type=checkbox]):not([type=range]),.expanded-panel select{border:1px solid var(--demo-border);border-radius:var(--demo-field-radius);color:var(--demo-text);background:var(--demo-bg);min-height:var(--demo-input-height);min-width:0;max-width:100%;padding:8px 10px}.expanded-panel input[aria-invalid=true]{border-color:var(--demo-danger)!important}.expanded-panel [role=alert]{color:var(--demo-danger)}.expanded-panel input[type=checkbox]{accent-color:var(--demo-accent);width:16px;height:16px}.expanded-panel input[type=range]{width:100%;accent-color:var(--demo-accent);min-height:32px}.expanded-panel input:focus-visible,.expanded-panel button:focus-visible{outline:2px solid var(--demo-accent);outline-offset:3px}.expanded-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.expanded-toolbar label{align-items:center;gap:10px;display:flex}.expanded-toolbar input[type=number]{width:90px}.expanded-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.expanded-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.expanded-panel button:not(.sample-button):not(.site-cta){border:1px solid var(--demo-border);background:var(--demo-bg);color:var(--demo-text);border-radius:var(--demo-radius);align-items:center;gap:7px;padding:8px 12px;display:inline-flex}.expanded-panel button:disabled{opacity:.45;cursor:not-allowed}.input-with-action{gap:8px;width:100%;display:flex}.input-with-action input{width:100%;min-width:0}.input-with-action>button{flex-shrink:0}.input-group{border:1px solid var(--demo-border);border-radius:var(--demo-field-radius);background:var(--demo-bg);align-items:center;display:flex}.input-group>span{white-space:nowrap;color:var(--demo-muted);padding:8px;font-size:11px}.input-group input{width:100%;border:0!important}.expanded-checks{border:1px solid var(--demo-border);gap:10px;padding:16px;display:grid}.expanded-checks label{align-items:center;gap:8px;display:flex}.selected-chips{flex-wrap:wrap;gap:8px;display:flex}.selected-chips svg{width:13px;height:13px}.segmented-buttons{border:0;flex-wrap:wrap;gap:4px;margin:0;padding:0;display:flex}.segmented-buttons button[aria-pressed=true]{background:var(--demo-accent)!important;color:var(--demo-ink)!important}.empty-example{text-align:center;padding:24px}.empty-example>svg{width:30px;height:30px;color:var(--demo-muted);margin-bottom:16px}.empty-example p{margin:12px 0 24px}.loading-content{min-height:132px;padding-top:12px}.skeleton-line{background:var(--demo-hover);border:1px solid var(--demo-border);border-radius:3px;width:80%;height:18px;margin:14px 0}.skeleton-line.wide{width:100%;height:26px}.skeleton-line.short{width:45%}.status-pill{border:1px solid var(--demo-border);background:var(--demo-hover);border-radius:4px;gap:6px;padding:4px 10px;font-size:12px;display:inline-flex}.state-running{border-color:var(--demo-accent)}.state-suspended{border-color:var(--demo-danger);color:var(--demo-danger)}.resource-value{font-variant-numeric:tabular-nums;font-size:32px}.resource-value small{color:var(--demo-muted);font-size:15px}.expanded-panel meter{width:100%;height:20px}.console-demo .console-lines{color:#e5e9dc;resize:vertical;background:#121211;width:100%;min-height:160px;max-height:260px;padding:16px;font-family:monospace;font-size:12px;overflow:auto}.console-demo strong{align-items:center;gap:8px;display:flex}.expanded-table-scroll{overflow:auto}.expanded-panel table{border-collapse:collapse;text-align:left;width:100%}.expanded-panel th,.expanded-panel td{border-bottom:1px solid var(--demo-border);padding:10px}.expanded-panel td span{align-items:center;gap:8px;display:inline-flex}.settings-row{justify-content:space-between;align-items:center;gap:20px;display:flex}.settings-row p{color:var(--demo-muted);font-size:12px}.permission-list,.activity-list{margin:0;padding:0;list-style:none}.permission-list li{border-bottom:1px solid var(--demo-border);justify-content:space-between;align-items:center;gap:10px;padding:14px 0;display:flex}.permission-list li>span:last-child{align-items:center;gap:8px;font-size:11px;display:inline-flex}.invoice-lines{margin:0}.invoice-lines>div{border-bottom:1px solid var(--demo-border);justify-content:space-between;gap:20px;padding:12px 0;display:flex}.invoice-lines dd{font-variant-numeric:tabular-nums;margin:0}.invoice-total{font-size:18px;font-weight:650}.activity-list li{border-bottom:1px solid var(--demo-border);grid-template-columns:110px 1fr auto;gap:8px 16px;padding:14px 0;display:grid}.activity-list small{color:var(--demo-muted);grid-column:2/-1}.expanded-panel pre{background:var(--demo-bg);max-width:100%;padding:14px;overflow:auto}.catalog-controls{gap:16px;margin:24px 0;display:flex}.catalog-controls input{background:var(--background);border:1px solid var(--border);min-width:0;color:var(--foreground);border-radius:8px;flex:1;padding:12px}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.catalog-grid a{border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:12px;padding:22px;display:flex}.catalog-grid a:hover{background:var(--surface)}.catalog-grid h2{margin:0;font-size:18px}.catalog-grid p,.catalog-grid span{color:var(--muted);margin:0;font-size:12px;line-height:1.8}@media (width<=760px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.expanded-panel{padding:16px}.switch-state-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.expanded-columns{grid-template-columns:1fr}.input-group{flex-wrap:wrap}.input-group input{flex:1;width:80px}.activity-list li{grid-template-columns:1fr 1fr}.activity-list small{grid-column:1/-1}}@media (width<=450px){.catalog-grid{grid-template-columns:1fr}.switch-state-grid>div{flex-wrap:wrap;gap:8px}.input-group>span{padding:5px;font-size:10px}}@media (prefers-reduced-motion:reduce){.square-switch>label:before{transition:none!important}}.sample[data-family=wickedhost] [class*=Switch__ToggleContainer]{width:48px!important;line-height:24px!important}.sample[data-family=wickedhost] [class*=Switch__ToggleContainer]>input[type=checkbox]+label{cursor:pointer;position:relative;overflow:hidden;background:var(--arct-panel-hover)!important;border:1px solid var(--arct-border-strong)!important;border-radius:var(--arct-radius)!important;width:48px!important;height:24px!important;box-shadow:none!important;margin:0!important;transition:background-color .12s,border-color .12s!important}.sample[data-family=wickedhost] [class*=Switch__ToggleContainer]>input[type=checkbox]+label:before{background:var(--arct-muted)!important;width:16px!important;height:16px!important;box-shadow:none!important;border:0!important;border-radius:2px!important;transition:right .12s,background-color .12s!important;top:3px!important;right:28px!important}.sample[data-family=wickedhost] [class*=Switch__ToggleContainer]>input[type=checkbox]:checked+label{background:var(--arct-panel)!important;border-color:var(--arct-accent)!important}.sample[data-family=wickedhost] [class*=Switch__ToggleContainer]>input[type=checkbox]:checked+label:before{background:var(--arct-accent)!important;right:3px!important}.sample[data-family=wickedhost] [class*=Switch__ToggleContainer]>input[type=checkbox]:focus-visible+label{outline:2px solid var(--arct-accent);outline-offset:2px}.sample[data-family=wickedhost] [class*=Switch__ToggleContainer]>input[type=checkbox]:disabled+label{cursor:not-allowed;opacity:.45}.sample[data-family=wickedhost] .wicked-monitor-switch{cursor:pointer;align-items:center;gap:9px;display:inline-flex}.sample[data-family=wickedhost] .wicked-monitor-switch input{opacity:0;pointer-events:none;position:absolute}.sample[data-family=wickedhost] .wicked-monitor-switch>span{background:var(--arct-surface-hover);border:1px solid var(--arct-border-strong);border-radius:var(--arct-radius);flex:0 0 48px;width:48px;height:24px;position:relative}.sample[data-family=wickedhost] .wicked-monitor-switch>span:after{content:"";background:var(--arct-muted);border-radius:2px;width:16px;height:16px;transition:transform .16s,background .16s;position:absolute;top:3px;left:3px}.sample[data-family=wickedhost] .wicked-monitor-switch input:checked+span{background:color-mix(in srgb, var(--arct-accent) 22%, var(--arct-panel));border-color:var(--arct-accent)}.sample[data-family=wickedhost] .wicked-monitor-switch input:checked+span:after{background:var(--arct-accent);transform:translate(24px)}.sample[data-family=wickedhost] .wicked-monitor-switch input:focus-visible+span{outline:2px solid var(--arct-accent);outline-offset:2px}.sample[data-family=wickedhost] .wicked-monitor-switch strong{font-size:12px;font-weight:650}@media (width<=767px){.sample[data-family=wickedhost] .wicked-monitor-switch{border-top:1px solid var(--arct-border);grid-column:1/-1;justify-content:space-between;padding-top:12px}}.sample[data-family=wickedhost] .tw-dialog-button{border-radius:var(--arct-radius)!important;border:1px solid #0000!important;justify-content:center!important;align-items:center!important;width:120px!important;min-width:120px!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0 14px!important;font:650 13px/1 Pretendard Variable,Inter,sans-serif!important;display:inline-flex!important}.sample[data-family=wickedhost] .tw-dialog-secondary{color:var(--arct-text)!important;background:var(--arct-panel)!important;border-color:var(--arct-border-strong)!important}.sample[data-family=wickedhost] .tw-dialog-secondary:hover,.sample[data-family=wickedhost] .tw-dialog-secondary:focus{background:var(--arct-panel-hover)!important;outline:0!important}.sample[data-family=wickedhost] .tw-dialog-primary{color:var(--arct-accent-ink)!important;background:var(--arct-accent)!important;border-color:var(--arct-accent)!important}.sample[data-family=wickedhost] .tw-dialog-primary:hover,.sample[data-family=wickedhost] .tw-dialog-primary:focus{background:var(--arct-accent-hover)!important;border-color:var(--arct-accent-hover)!important;outline:0!important}.sample[data-family=wickedhost] .tw-dialog-danger{color:var(--arct-danger)!important;background:color-mix(in srgb, var(--arct-danger) 10%, var(--arct-panel))!important;border-color:color-mix(in srgb, var(--arct-danger) 45%, var(--arct-border))!important}.sample[data-family=wickedhost] .tw-dialog-danger:hover,.sample[data-family=wickedhost] .tw-dialog-danger:focus{background:color-mix(in srgb, var(--arct-danger) 16%, var(--arct-panel))!important;outline:0!important}.sample[data-family=wickedhost] .tw-dialog-button:disabled,.sample[data-family=wickedhost] .tw-dialog-button[aria-disabled=true]{cursor:not-allowed!important;opacity:.45!important}.sample[data-family=wickedhost] .tw-dialog-input,.sample[data-family=wickedhost] .tw-file-dialog-create input{width:100%;height:42px;color:var(--arct-text);background:var(--arct-canvas);border:1px solid var(--arct-border-strong);border-radius:var(--arct-radius);box-shadow:none;padding:0 12px;font:520 13px/1 Pretendard Variable,Inter,sans-serif}.sample[data-family=wickedhost] .tw-dialog-input:hover,.sample[data-family=wickedhost] .tw-file-dialog-create input:hover{border-color:color-mix(in srgb, var(--arct-accent) 38%, var(--arct-border-strong))}.sample[data-family=wickedhost] .tw-dialog-input:focus,.sample[data-family=wickedhost] .tw-file-dialog-create input:focus{border-color:var(--arct-accent);outline:2px solid color-mix(in srgb, var(--arct-accent) 16%, transparent);outline-offset:0}.sample[data-family=wickedhost] .tw-dialog-input::placeholder,.sample[data-family=wickedhost] .tw-file-dialog-create input::placeholder{color:var(--arct-subtle)}@media (width<=640px){.sample[data-family=wickedhost] .tw-dialog-button{width:100%!important;min-width:0!important}}