@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{color-scheme:light;--bg:#f9fafb;--panel:#fff;--ink:#202229;--muted:#646974;--line:#e3e5e9;--purple:#5c43cf;--soft:#ede9ff;--demo:#f1f2f6;--lime:#d4ed92;--shadow:0 10px 40px #2326380a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 'DM Sans',sans-serif}body.dark{color-scheme:dark;--bg:#14151a;--panel:#1d1f26;--ink:#f1f1f5;--muted:#a4a8b5;--line:#343740;--purple:#b3a4ff;--soft:#312b4e;--demo:#242731;--shadow:none}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:4px}button{border:0;background:none}svg{flex-shrink:0;vertical-align:middle}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:Manrope,'DM Sans',sans-serif}a.skip{position:fixed;left:20px;top:-100px;z-index:100;background:var(--panel);padding:12px}a.skip:focus{top:10px}.site-header{height:86px;border-bottom:1px solid var(--line);background:var(--panel)}.header-inner{max-width:1280px;padding:0 36px;margin:auto;height:100%;display:flex;align-items:center;gap:45px}.brand{font-size:22px;font-weight:800;display:flex;align-items:center;gap:11px;letter-spacing:-1px;white-space:nowrap}.brand-mark{width:32px;height:34px;display:flex;gap:3px;align-items:center}.brand-mark i{display:block;width:8px;height:24px;border:2px solid var(--purple);border-radius:2px}.brand-mark i:nth-child(2){height:30px}.brand-mark i:nth-child(3){transform:rotate(-16deg);margin-left:2px;background:var(--purple)}.brand em{font-style:normal;color:var(--purple)}.site-header nav{display:flex;align-self:stretch;align-items:center;gap:30px}.site-header nav a{font-size:14px;color:var(--muted);font-weight:600;height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}.site-header nav a.active{border-color:var(--purple);color:var(--ink)}.header-end{margin-left:auto;display:flex;align-items:center;gap:18px}.locale{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--muted);font-weight:600}.icon-button{height:40px;width:40px;display:grid;place-items:center;border-radius:8px}.icon-button:hover{background:var(--soft)}main{max-width:1280px;padding:0 36px;margin:auto}.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:56px 0 35px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:14px}.eyebrow:before{content:'';height:7px;width:7px;background:var(--purple);border-radius:50%}h1{font-size:clamp(32px,3.4vw,46px);line-height:1.17;font-weight:800;letter-spacing:-2px}h1 em{font-style:normal;color:var(--purple)}.hero p{max-width:630px;color:var(--muted);font-size:16px;margin-top:18px;line-height:1.7}.hero-note{transform:rotate(4deg);border:1px solid #bfd784;background:var(--lime);color:#344520;border-radius:8px;padding:21px 27px;box-shadow:4px 5px 0 #00000007;max-width:196px;position:relative}.hero-note small{font-size:11px;letter-spacing:1.3px;display:block;font-weight:700;margin-bottom:10px}.hero-note strong{font-family:Manrope,sans-serif;font-weight:750;line-height:1.35;font-size:19px;display:block}.hero-note span{font-size:25px;display:block;line-height:1;margin-top:10px}.searchbox{height:65px;background:var(--panel);border:1px solid #cdd0d8;border-radius:12px;display:flex;align-items:center;gap:14px;padding:0 20px;box-shadow:0 4px 12px #22243803}.searchbox:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--soft)}.searchbox>svg{color:var(--purple);width:22px;height:22px}.searchbox input{min-width:0;flex:1;border:0;outline:0!important;background:transparent;color:var(--ink);height:100%;font-size:16px}.searchbox input::placeholder{color:#858994}.searchbox kbd{font-size:12px;background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 7px}.clear-search{display:none}.clear-search.visible{display:block}.suggestions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 37px;font-size:13px;color:var(--muted)}.suggestions>span{margin-right:3px}.suggestions button{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:var(--panel);color:var(--muted)}.suggestions button:hover{color:var(--purple);border-color:var(--purple)}.catalog-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.catalog-top h2{font-size:18px;letter-spacing:-.4px}.count{font-family:'DM Sans',sans-serif;font-size:12px;vertical-align:middle;margin-left:8px;background:var(--soft);color:var(--purple);border-radius:5px;padding:3px 7px;font-weight:600}.sort-wrap{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.sort-wrap select{border:0;background:transparent;font-size:13px;color:var(--ink);max-width:140px}.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}.filters button{font-size:13px;padding:6px 13px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-weight:500}.filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--panel)}.filters button:hover{border-color:var(--muted)}.results-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:15px}.random{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}.random:hover{color:var(--purple)}.random svg{width:16px;height:16px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.entry-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;min-width:0}.entry-card:hover{transform:translateY(-4px);border-color:#b9adea;box-shadow:var(--shadow)}.entry-card>.demo{height:210px;border-bottom:1px solid var(--line)}.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-heading h3{font-size:17px;letter-spacing:-.5px;line-height:1.35}.card-heading>svg{width:17px;color:var(--muted);transform:rotate(-45deg);transition:transform .2s}.entry-card:hover .card-heading>svg{transform:rotate(0deg);color:var(--purple)}.english{font-size:12px;color:var(--purple);font-weight:500;margin-top:4px}.card-body p{font-size:14px;line-height:1.6;margin:12px 0 20px;color:var(--muted)}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}.tag{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:2px 7px;border-radius:4px}.card-bottom code{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65%}.empty{grid-column:1/-1;text-align:center;border:1px dashed var(--line);border-radius:12px;padding:55px 20px}.empty h3{font-size:22px;margin-bottom:10px}.empty p{color:var(--muted);margin-bottom:20px}.solid-button{background:var(--purple);color:#fff;padding:10px 17px;border-radius:7px;font-size:14px;font-weight:600;display:inline-flex;gap:8px;align-items:center}.dark .solid-button{color:#15151a}.site-footer{max-width:1208px;border-top:1px solid var(--line);margin:60px auto 0;padding:27px 0 32px;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.footer-brand{font-size:16px;font-weight:700;color:var(--ink)}.site-footer a{text-decoration:underline;text-underline-offset:3px}.footer-links{display:flex;gap:20px}dialog{padding:0;border:1px solid var(--line);border-radius:17px;max-height:90vh;width:min(860px,calc(100% - 32px));max-width:860px;background:var(--panel);color:var(--ink);box-shadow:0 30px 130px #0005}dialog::backdrop{background:#15121f8c;backdrop-filter:blur(5px)}body:has(dialog[open]){overflow:hidden}.dialog-toolbar{padding:14px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);position:sticky;top:0;background:var(--panel);z-index:3}.detail{padding:32px}.detail .demo{height:240px;border-radius:10px;margin:25px 0;border:1px solid var(--line)}.detail h1,.detail h2.detail-title{font-size:32px;letter-spacing:-1px;line-height:1.2;margin:8px 0}.detail .lead{font-size:17px;color:var(--muted);margin:18px 0 0}.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.detail h3{font-size:14px;margin-bottom:8px}.detail-columns p{font-size:14px;color:var(--muted)}.prompt-box{margin-top:28px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:20px}.prompt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.prompt-top h3{margin:0;font-size:15px}.prompt-box textarea{width:100%;min-height:150px;border:0;resize:vertical;font:14px/1.7 'DM Sans',sans-serif;background:transparent;color:var(--muted);display:block}.detail-links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:13px}.detail-links a{color:var(--purple);text-decoration:underline}.related{border-top:1px solid var(--line);margin-top:25px;padding-top:20px}.related>div{display:flex;flex-wrap:wrap;gap:8px}.related a{font-size:13px;border:1px solid var(--line);border-radius:6px;padding:5px 9px}.detail-page{max-width:850px;margin:35px auto;border:1px solid var(--line);background:var(--panel);border-radius:14px}.back-link{display:inline-flex;margin-top:30px;color:var(--muted);font-size:14px}.notification{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);z-index:20;background:var(--ink);color:var(--panel);padding:12px 22px;border-radius:8px;font-size:14px;max-width:calc(100vw - 30px);text-align:center;transition:transform .2s}.notification.show{transform:translateX(-50%) translateY(0)}.about{max-width:740px;margin:55px auto}.about h1{margin-bottom:24px}.about h2{font-size:22px;margin:32px 0 12px}.about p{color:var(--muted);margin-bottom:18px}.about a{color:var(--purple);text-decoration:underline}.demo{background:var(--demo);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#31333e;font:12px/1.5 'DM Sans',sans-serif}.demo strong{font-weight:650}.demo button{font-size:12px}.demo small{font-size:10px}.demo .mini-window{background:#fff;border:1px solid #dedee9;border-radius:10px;padding:20px 22px;width:245px;box-shadow:0 10px 30px #37374b13}.mini-kicker{font-size:9px;letter-spacing:1.5px;color:#858599;display:block;margin-bottom:8px}.mini-window strong{display:block;font-size:15px;letter-spacing:-.3px}.mini-window p{font-size:11px;color:#848496;margin:8px 0 15px}.mini-actions{display:flex;gap:16px;justify-content:flex-end;align-items:center;font-size:11px}.mini-primary{background:#6750cb;color:white;padding:5px 14px;border-radius:5px}.demo-dialog{background-color:#eeedf5;background-image:linear-gradient(#eeedf5ba,#eeedf5ba),repeating-linear-gradient(0deg,transparent 0 25px,#e2deeb 26px 27px)}.mini-toast{display:flex;align-items:center;gap:11px;background:white;border:1px solid #e0e4e0;box-shadow:0 7px 20px #2b473b09;padding:16px;border-radius:9px;width:290px;max-width:90%}.mini-toast>i{height:27px;width:27px;background:#e9f4ec;color:#4f8660;border-radius:50%;display:grid;place-items:center}.mini-toast svg{width:15px}.mini-toast strong{font-size:12px;display:block}.mini-toast small{color:#8a8c91;display:block;margin-top:3px}.mini-toast>span{margin-left:auto;color:#999}.demo-toast{background:#edf3ef}.tooltip-example{position:relative;text-align:center}.tip-bubble{display:block;background:#292a33;color:#fff;font-size:10px;padding:8px 12px;border-radius:5px;position:relative;margin-bottom:12px;box-shadow:0 5px 12px #0002}.tip-bubble:after{content:'';position:absolute;bottom:-5px;left:50%;border-top:5px solid #292a33;border-left:5px solid transparent;border-right:5px solid transparent}.tip-trigger{display:inline-grid;place-items:center;border:1px solid #dcdce7;background:#fff;width:40px;height:36px;border-radius:6px}.cursor{position:absolute;font-size:27px;color:#252638;bottom:-15px;right:75px}.mini-accordion{background:#fff;border:1px solid #e3e3eb;border-radius:8px;width:260px;font-size:11px}.mini-accordion details+details{border-top:1px solid #e8e8ed}.mini-accordion summary{padding:12px 15px;font-weight:600;cursor:pointer}.mini-accordion p{padding:0 15px 13px;color:#838396;font-size:11px}.demo-accordion{background:#f1eff7}.mini-tabs{width:270px;background:#fff;padding:15px 18px;border-radius:9px;border:1px solid #e2e3ec}.mini-tabs>div:first-child{display:flex;gap:8px;border-bottom:1px solid #eee}.mini-tabs button{font-size:10px;padding:6px 4px 9px;color:#92909d}.mini-tabs button.active{color:#6b4fd4;border-bottom:2px solid #6b4fd4}.mini-tabs p{font-size:11px;margin-top:20px;color:#656173}.mini-lines{margin-top:15px;display:grid;gap:7px}.mini-lines i{height:5px;background:#eeecf3;border-radius:4px}.mini-lines i:last-child{width:68%}.mini-menu{width:193px;background:#fff;padding:5px;border:1px solid #dddfe8;border-radius:9px;box-shadow:0 8px 20px #27263c0b}.mini-menu>div{display:flex;align-items:center;gap:8px;padding:7px 9px;font-size:11px}.mini-menu svg{width:13px;height:13px}.mini-menu small{margin-left:auto;color:#999}.mini-menu .mini-menu-heading{border-bottom:1px solid #eee;margin-bottom:3px;font-weight:600;justify-content:space-between}.mini-menu .danger{color:#b64d69}.mini-settings{background:#fff;padding:4px 19px;border:1px solid #e2e3e9;border-radius:10px;width:270px}.mini-settings label{display:flex;align-items:center;justify-content:space-between;padding:15px 0;gap:15px;font-size:12px}.mini-settings label+label{border-top:1px solid #eee}.mini-settings small{display:block;color:#888;margin-top:3px;font-size:9px}.demo input[role=switch]{appearance:none;width:31px;height:19px;border-radius:20px;background:#d6d7df;position:relative;margin:0;flex-shrink:0;cursor:pointer}.demo input[role=switch]:checked{background:#765cce}.demo input[role=switch]:before{content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .15s}.demo input[role=switch]:checked:before{left:15px}.mini-skeleton{padding:24px;background:#fff;border:1px solid #e1e3e8;border-radius:10px;display:flex;gap:13px;width:255px}.skeleton-avatar{width:36px;height:36px;background:#e7e7ef;border-radius:50%}.mini-skeleton>div:last-child{flex:1;display:grid;gap:8px}.mini-skeleton i{display:block;height:8px;background:#e7e7ef;border-radius:4px;animation:pulse 2s ease-in-out infinite}.mini-skeleton i:nth-child(2){width:80%}.mini-skeleton i:last-child{width:55%}@keyframes pulse{50%{opacity:.45}}.mini-crumb{display:flex;gap:12px;align-items:center;padding:15px 18px;background:#fff;border:1px solid #e1e1e9;border-radius:7px;color:#858392;font-size:11px}.mini-crumb strong{color:#5d43c6;font-weight:500}.mini-crumb b{font-weight:400;color:#b1acbf}.mini-range{width:240px;padding:20px;background:white;border:1px solid #e1e1e9;border-radius:9px}.mini-range label{font-size:11px}.mini-range output{float:right;color:#6750bf}.mini-range input{width:100%;accent-color:#7257ca;display:block;margin:18px 0 7px}.mini-range>div{display:flex;justify-content:space-between;font-size:9px;color:#999}.mini-card{background:#fff;padding:8px 8px 12px;border-radius:9px;width:185px;border:1px solid #dedee8}.mini-card-art{background:#dfdbf7;height:66px;border-radius:4px;display:flex;align-items:center;justify-content:space-around;margin-bottom:10px;color:#6852b5}.mini-card-art span{font:500 38px Georgia,serif;letter-spacing:-3px}.mini-card-art i{font-size:10px;font-style:normal;border:1px solid #b7abdf;border-radius:50%;padding:5px}.mini-card>small{font-size:7px;letter-spacing:1px;padding:0 4px;color:#999}.mini-card>strong{font-size:11px;display:block;padding:2px 4px 5px}.mini-card>span{font-size:9px;color:#7955c7;padding:4px}.mini-command{width:270px;border:1px solid #dedee9;background:#fff;border-radius:9px;padding:12px;font-size:11px;box-shadow:0 12px 25px #1b163012}.mini-command>div{border-bottom:1px solid #eee;padding-bottom:10px;display:flex;gap:6px;color:#888}.mini-command kbd{margin-left:auto;font-size:8px;color:#999;background:#f4f4f7;padding:1px 3px;border-radius:3px}.mini-command small{font-size:8px;letter-spacing:1px;color:#999;display:block;margin:10px 0 5px}.mini-command p{display:flex;align-items:center;padding:5px;border-radius:4px}.mini-command p:first-of-type{background:#f0ebfb;color:#7655c8}.demo.interactive input,.demo.interactive button{min-height:28px}.noscript{background:var(--soft);padding:10px 20px;margin:15px 0;border-radius:8px;font-size:14px}.demo.interactive{font-size:14px}
@media(min-width:1450px){.header-inner,main{max-width:1340px}.grid{gap:24px}.entry-card>.demo{height:225px}.site-footer{max-width:1268px}}
@media(max-width:1050px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-inner{gap:30px}.hero-note{margin-right:8px}.site-footer{margin-left:36px;margin-right:36px}}
@media(max-width:700px){.header-inner{padding:0 20px;gap:22px}.site-header{height:74px}.brand{font-size:19px}.brand-mark{transform:scale(.9);width:29px}.site-header nav{gap:18px}.site-header nav a{font-size:12px}.header-end{gap:3px}.locale{display:none}.site-header nav a:last-child{display:none}main{padding:0 20px}.hero{padding:36px 0 26px;display:block}.hero-note{display:none}h1{letter-spacing:-1.4px;max-width:460px}.hero p{font-size:15px;margin-top:15px}.eyebrow{font-size:10px;letter-spacing:1.4px}.searchbox{height:58px;padding:0 14px;gap:10px}.searchbox input{font-size:14px}.searchbox kbd{display:none}.suggestions{margin-bottom:29px;gap:7px}.suggestions>span{width:100%}.catalog-top h2{font-size:17px}.sort-wrap>span{display:none}.filters{gap:6px;margin-bottom:18px}.filters button{padding:6px 10px;font-size:12px}.grid{gap:16px}.card-body{padding:16px}.card-heading h3{font-size:16px}.card-body p{font-size:14px}.card-bottom code{display:none}.entry-card>.demo{height:195px}.site-footer{margin:38px 20px 0;display:block;font-size:12px}.footer-links{margin-top:15px}.detail{padding:23px}.detail-columns{grid-template-columns:1fr;gap:22px}.detail h1,.detail h2.detail-title{font-size:28px}.prompt-top{align-items:flex-start;flex-direction:column}.detail .demo{height:220px}.prompt-box textarea{min-height:240px}.dialog-toolbar{padding:10px 14px}.detail-page{margin:25px 0}.about{margin:35px auto}.about h1{font-size:32px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.entry-card>.demo{height:215px}.card-body{padding:19px 20px}.card-body p{margin-bottom:17px}.card-bottom code{display:block}.site-header nav{gap:14px}.header-inner{gap:18px}.header-end{margin-left:auto}.brand{gap:7px;font-size:18px}.header-end .icon-button{width:32px}.site-header nav a{font-size:11px}.card-heading h3{font-size:18px}.results-meta{font-size:11px}.searchbox input{font-size:13px}.mini-window,.mini-toast,.mini-settings,.mini-command,.mini-tabs,.mini-accordion{max-width:90%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.detail-labels{display:flex;align-items:center;justify-content:space-between}.favorite{font-size:13px;border:1px solid var(--line);border-radius:6px;padding:6px 12px}.favorite[aria-pressed=true]{color:var(--purple);background:var(--soft);border-color:var(--purple)}.demo-caption{font-size:12px;color:var(--muted);margin-top:-16px;margin-bottom:24px}.code-box{margin-top:26px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.code-box .prompt-top{padding:14px 18px;margin:0;border-bottom:1px solid var(--line)}.code-box pre{margin:0;padding:18px;background:var(--bg);font:13px/1.7 ui-monospace,monospace;overflow:auto;tab-size:2}.code-box>p{font-size:12px;color:var(--muted);padding:10px 18px}.copy-code{font-size:12px;display:inline-flex;align-items:center;gap:5px;color:var(--purple)}.copy-code svg{width:15px}.specimen{max-width:90%;width:270px;border:1px solid #dfe1eb;border-radius:9px;padding:18px;background:#fff;box-shadow:0 7px 25px #28284605}.specimen p{font-size:11px;color:#77758a;margin:8px 0}.specimen hr{border:0;border-top:1px solid #e5e4eb;margin:15px 0}.sample-btn{display:inline-block;padding:7px 13px;border:1px solid #dfe1e9;border-radius:6px;background:#fff;color:#605f72;font-size:11px}.sample-btn.primary{background:#7254cc;border-color:#7254cc;color:#fff}.sample-btn.danger{background:#a72c48;color:#fff;border-color:#a72c48}.sample-field{display:block}.sample-field>span{font-size:11px;font-weight:600;display:block;margin-bottom:7px}.sample-field small{color:#77758a;display:block;font-size:9px;margin-top:7px}.sample-field input:not([type=color]),.sample-field textarea,.sample-field select,.sample-input{font-size:11px;border:1px solid #dcdce8;background:#fff;color:#393746;border-radius:5px;padding:9px;width:100%;min-width:0;display:block}.sample-field input[aria-invalid]{border-color:#bd526b;outline-color:#bd526b}.sample-field textarea{resize:vertical}.sample-field input[type=color]{width:70px;height:40px;padding:3px;border:1px solid #ddd;background:white;border-radius:5px}.sample-navbar{display:flex;gap:17px;align-items:center;font-size:10px;border-bottom:1px solid #eee;padding-bottom:12px}.sample-navbar b{margin-right:auto}.selected{color:#6949c2!important;background:#f0ebfb}.sidebar-sample{display:grid;grid-template-columns:95px 1fr;gap:15px;font-size:11px}.sidebar-sample aside{display:flex;flex-direction:column;gap:8px;border-right:1px solid #eee;padding-right:9px}.sidebar-sample aside>b{font-size:8px;letter-spacing:1px;color:#9a95a8;margin-bottom:4px}.sidebar-sample aside>span{padding:5px;border-radius:4px;font-size:9px}.sidebar-sample>div>b{font-size:11px}.sample-bottomnav{display:flex;justify-content:space-around;gap:8px;margin-top:45px;padding-top:12px;border-top:1px solid #eee;text-align:center;font-size:18px}.sample-bottomnav>span{padding:2px 8px;border-radius:5px}.sample-bottomnav small{display:block;font-size:8px}.hamburger-sample summary{cursor:pointer;font-size:16px}.hamburger-sample b{font-size:11px;margin-left:10px}.hamburger-sample p{padding:5px 0 5px 20px}.sample-pagination{display:flex;gap:5px;align-items:center;font-size:11px}.sample-pagination button{background:white;border:1px solid #dddee8;border-radius:5px;width:32px;height:33px;font-size:11px}.sample-pagination button.selected{color:#fff!important;background:#7254cc}.sample-pagination>span{margin-left:8px}.sample-steps{display:flex;align-items:flex-start;text-align:center;gap:8px;padding:5px}.sample-steps>span{min-width:40px;background:transparent}.sample-steps b{border-radius:50%;background:#eeeef3;color:#9894a7;display:grid;place-items:center;width:26px;height:26px;margin:auto;font-size:11px}.sample-steps small{display:block;margin-top:8px;font-size:9px}.sample-steps .selected b{background:#7254cc;color:#fff}.sample-steps .done b{background:#dff0e4;color:#478260}.sample-steps i{height:1px;flex:1;background:#dfdce9;margin-top:13px}.sample-scrollspy{display:grid;grid-template-columns:1fr 95px;gap:20px;font-size:10px}.sample-scrollspy aside{display:flex;flex-direction:column;gap:10px;font-size:8px;color:#9c97aa;border-left:1px solid #e1dce9;padding-left:8px}.sample-scrollspy aside span{font-size:9px;padding:3px}.sample-anchor{display:grid;gap:9px}.sample-anchor span{color:#7254cc}.sample-anchor code{font-size:10px;color:#999;margin-top:8px}.sample-backtop{text-align:right;color:#7254cc;margin-top:25px;font-size:20px}.sample-backtop span{font-size:10px}.sample-mega{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}.sample-mega>div{display:grid;gap:8px;font-size:10px}.sample-mega span{color:#8a839a}.sample-tree details{margin:5px 0}.sample-tree details details{padding-left:14px}.sample-tree p{margin-left:27px;font-size:10px}.sample-tree summary{cursor:pointer}.sample-segments{border:0;display:flex;gap:3px;background:#e7e5ef;padding:4px;border-radius:8px}.sample-segments legend{font-size:10px;padding-bottom:12px;text-align:center;color:#817a95}.sample-segments label{position:relative}.sample-segments input{position:absolute;opacity:0;inset:0;cursor:pointer}.sample-segments span{display:block;padding:8px 18px;border-radius:5px;font-size:11px}.sample-segments input:checked+span{background:white;box-shadow:0 2px 6px #0001;color:#6241bb}.sample-segments input:focus-visible+span{outline:2px solid #6241bb}.example-link{color:#7152c8;text-decoration:underline;text-underline-offset:3px;font-size:11px}.button-specimens{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:260px}.button-specimens>small{width:100%;text-align:center;color:#999;margin-top:6px}.sample-options{border:0;padding:0;margin:0;display:grid;gap:12px;font-size:11px}.sample-options legend{font-weight:600;margin-bottom:15px}.sample-options label{display:flex;align-items:center;gap:7px}.demo input[type=checkbox],.demo input[type=radio]{accent-color:#7254cc}.date-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}.upload-zone{border:1px dashed #bcb1da;border-radius:6px;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.upload-zone>span:first-child{font-size:24px;color:#9477d6}.upload-zone small{color:#999}.sample-password{display:flex;align-items:stretch;border:1px solid #ddd;border-radius:5px;overflow:hidden}.sample-password input{border:0!important}.sample-password button{font-size:9px;color:#6b4dbe;padding:0 10px}.sample-otp{letter-spacing:10px;font-size:20px!important;text-align:center}.sample-number{display:flex;align-items:center;gap:15px}.sample-number>span{margin-right:auto;font-size:11px}.sample-number button{background:#eeeaf8;color:#6946bf;width:28px;height:28px;border-radius:5px;font-size:16px}.sample-number output{font-size:13px}.sample-number+small{display:block;margin-top:12px;color:#8c879b}.sample-rating{border:0;text-align:center}.sample-rating legend{font-size:11px;margin-bottom:13px}.sample-rating label{position:relative;display:inline-block}.sample-rating input{position:absolute;opacity:0;inset:0;cursor:pointer}.sample-rating span{font-size:28px;color:#bcb3d0;padding:1px}.sample-rating input:checked+span{color:#6e48c0}.sample-rating input:focus-visible+span{outline:2px solid #6040b5}.red-label{color:#b43651!important}.green-label{color:#397555;background:#ebf6ef;padding:2px 5px;border-radius:4px}.annotation{color:#7752c6;font-size:9px;letter-spacing:1.5px;margin-bottom:8px}.sample-fieldset{border:1px solid #d9d4e6;border-radius:6px;padding:10px}.sample-fieldset legend{font-size:11px;padding:0 6px}.sample-fieldset .sample-field+.sample-field{margin-top:8px}.sample-fieldset input{padding:5px!important}.sample-progress{font-size:11px}.sample-progress>b{float:right;font-size:10px;color:#7559c4}.sample-progress progress,.sample-progress meter{width:100%;display:block;height:10px;margin:16px 0 9px;accent-color:#7254cc}.sample-progress small{color:#928c9f}.sample-spinner{text-align:center;color:#9890a4}.sample-spinner>span,.small-spinner{display:inline-block;width:29px;height:29px;border-radius:50%;border:3px solid #d9d4e5;border-top-color:#7758c9;animation:spin 1.5s linear infinite}.small-spinner{width:12px;height:12px;border-width:2px;vertical-align:middle;margin-right:5px}.sample-spinner p{margin-top:13px;font-size:11px}.sample-ring{width:102px;height:102px;border-radius:50%;background:conic-gradient(#7755ce 64%,#ded8ec 0);padding:9px}.sample-ring>span{width:100%;height:100%;display:grid;place-content:center;border-radius:50%;background:#f1f2f6;font-size:27px;font-weight:650;position:relative}.sample-ring small{font-size:10px;position:absolute;right:12px;top:29px}.sample-alert,.sample-callout{max-width:85%;width:285px;border:1px solid #dfd1a6;background:#fbf5df;color:#816324;border-radius:7px;padding:15px;font-size:11px}.sample-alert p,.sample-callout p{font-size:10px;margin-top:5px}.sample-callout{border-color:#cfc3e7;background:#f0eafb;color:#7752b5}.sample-banner{background:#ede7fb;font-size:9px;padding:7px;color:#7653b8;margin:-18px -18px 18px;border-radius:8px 8px 0 0}.sample-empty{text-align:center}.sample-empty>span:first-child{font-size:25px;display:block;color:#a398c3;margin-bottom:7px}.sample-empty>b{display:block;font-size:12px}.sample-empty p{font-size:10px;margin:5px 0 13px}.badge-set{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.badge-mail{font-size:12px;background:#fff;padding:10px 15px;border:1px solid #dedee8;border-radius:6px}.badge-mail b{margin-left:9px;background:#7554c8;color:white;padding:1px 6px;border-radius:4px;font-size:10px}.sample-badge{display:inline-block;background:#eee8f9;border:1px solid #e4daef;color:#72529a;padding:3px 8px;font-size:10px;border-radius:4px}.sample-person{display:flex;align-items:center;gap:12px}.sample-person small{display:block;color:#7d8585;margin-top:3px}.sample-avatar{background:#e3ddf2;color:#765f9a;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:12px;position:relative;flex-shrink:0}.sample-avatar i{position:absolute;right:-1px;bottom:1px;width:11px;height:11px;border:2px solid #fff;background:#59936c;border-radius:50%}.sample-avatar.alternate{background:#f0e3d7;color:#a98062}.sample-avatar.third{background:#dbe7e2;color:#5f8a74}.sample-avatar.large{width:56px;height:56px;font-size:17px}.sample-avatar.tiny{width:25px;height:25px;font-size:8px}.sample-avatars{display:flex;gap:14px}.sample-snackbar{background:#34323f;color:#fff;display:flex;gap:25px;border-radius:6px;padding:15px 18px;max-width:92%;font-size:11px}.sample-snackbar b{color:#d1b8ff}.overlay-sample{height:135px;position:relative;background:#e7e5ef;margin:-8px;overflow:hidden;border-radius:5px;padding:15px}.sample-drawer{position:absolute;right:0;top:0;bottom:0;width:65%;padding:15px;background:#fff;box-shadow:-10px 0 20px #0001}.sample-drawer>small{display:block;color:#aaa;font-size:8px}.sample-drawer>b{font-size:12px}.sample-drawer .sample-btn{margin-top:15px;padding:4px 12px;font-size:9px}.sample-bottomsheet{position:absolute;bottom:0;left:0;right:0;background:white;border-radius:12px 12px 0 0;padding:12px 18px 6px;box-shadow:0 -8px 15px #0001}.sample-bottomsheet>i{display:block;height:3px;width:25px;background:#dbd7e3;border-radius:2px;margin:0 auto 10px}.sample-bottomsheet b{font-size:11px}.sample-bottomsheet p{font-size:10px}.sample-popover{position:relative;text-align:center}.sample-popover>div{position:relative;margin-top:12px;width:195px;background:#fff;border:1px solid #ded9e8;border-radius:8px;padding:15px;box-shadow:0 5px 15px #0001;text-align:left}.sample-popover>div:before{content:'';width:9px;height:9px;position:absolute;background:#fff;border-left:1px solid #ded9e8;border-top:1px solid #ded9e8;transform:rotate(45deg);top:-6px;left:90px}.sample-popover label{display:flex;align-items:center;font-size:10px;margin-top:13px;gap:6px}.sample-popover b{font-size:11px}.context-target{font-size:11px;padding:6px;background:#f0ebfa;color:#7350bf;border-radius:4px}.sample-context{width:143px;margin:8px 0 0 auto;box-shadow:0 6px 15px #0001;border:1px solid #ddd;border-radius:6px;background:#fff;padding:5px}.sample-context>span{display:flex;justify-content:space-between;padding:4px 8px;font-size:10px}.sample-context small{color:#aaa}.sample-lightbox{background:#282336;color:#fff;padding:10px;position:relative;border-radius:6px;text-align:center}.sample-lightbox>span{position:absolute;right:8px;top:4px;color:#fff9}.abstract-media{background:#d9c4ec;color:#614377;width:150px;margin:auto;padding:22px 10px;font-size:10px}.abstract-media b{font-size:24px;font-family:Georgia,serif}.sample-lightbox>small{color:#bbb;margin-top:7px;display:block;font-size:8px}.sample-backdrop{background:#5c576d;padding:24px 15px;border-radius:6px;color:white;text-align:center}.sample-backdrop>div{background:white;color:#383045;padding:20px;border-radius:6px;margin-bottom:10px;font-size:11px}.sample-backdrop>span{font-size:8px}.sample-hovercard{border:1px solid #e5ddea;border-radius:6px;padding:12px;margin-top:8px}.sample-hovercard>.sample-avatar{float:left;margin-right:10px;width:29px;height:29px;font-size:10px}.sample-hovercard>b{font-size:11px}.sample-hovercard small{display:block;font-size:8px;color:#999}.sample-hovercard p{clear:both;padding-top:7px;font-size:9px}.alert-dialog-demo{text-align:center}.alert-dialog-demo>span{display:block;background:#f7e9ed;color:#ba5570;width:25px;height:25px;border-radius:50%;margin:0 auto 8px;font-weight:700}.alert-dialog-demo>b{font-size:12px}.alert-dialog-demo>div{display:flex;justify-content:center;gap:7px}.sample-coach{display:flex;flex-direction:column;align-items:flex-start}.sample-coach>div{background:#7554c8;color:white;padding:14px;border-radius:7px;margin-top:10px;position:relative}.sample-coach small{font-size:8px;display:block;color:#ddd0f6;margin-bottom:3px}.sample-coach b{font-size:11px}.sample-coach p{color:#e1d5f3;font-size:9px;margin-bottom:0}.sample-spotlight{background:#62576f;color:#fff;padding:20px;display:flex;align-items:center;gap:15px;border-radius:6px}.sample-spotlight>span{font-size:25px;background:white;color:#7653bd;padding:5px 9px;border-radius:5px;box-shadow:0 0 0 5px #ffffff33}.sample-spotlight>div{font-size:11px}.sample-spotlight small{display:block;color:#d6cfe0;margin-top:5px}.sample-footer{border-top:1px solid #ddd;padding-top:10px;margin-top:28px;font-size:10px;display:flex;justify-content:space-between;flex-wrap:wrap}.sample-footer small{width:100%;color:#999;margin-top:5px}.sample-bento{width:260px;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:55px 55px 30px;gap:7px}.sample-bento>div{background:#fff;border:1px solid #dedbe8;border-radius:7px;padding:8px 12px}.sample-bento>div:first-child{grid-row:span 2;background:#e5def5}.sample-bento>div:last-child{grid-column:span 2;font-size:9px;padding:7px 12px;color:#775bb7}.sample-bento b{font-size:22px;line-height:1.1;display:block;color:#7255b5}.sample-bento small{font-size:8px;display:block;color:#9689ac}.sample-bento>div:first-child>b{font-size:20px;margin-top:16px}.sample-masonry{columns:3;column-gap:7px;width:250px}.sample-masonry span{display:flex;align-items:center;justify-content:center;background:#ded7ef;color:#88719f;border-radius:5px;margin-bottom:7px;font-size:13px}.sample-masonry span:nth-child(even){background:#eee5d9;color:#a48c70}.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:245px}.sample-grid span{background:#e6dff3;color:#937db0;display:grid;place-items:center;height:54px;border-radius:5px}.sample-split{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}.sample-split aside{display:grid;gap:7px;border-right:2px solid #d9d0e6;padding-right:9px}.sample-split aside b{font-size:10px;margin-bottom:8px}.sample-split aside span{font-size:8px;padding:4px;border-radius:3px}.sample-split section>b{font-size:11px}.sample-sticky{height:130px;overflow:auto}.sample-sticky>div:first-child{position:sticky;top:0;background:#e8dff7;color:#7a56b8;font-size:9px;padding:8px;border-radius:4px;z-index:1}.sample-fixed{position:relative;height:130px}.sample-fixed>.sample-btn{position:absolute;bottom:0;right:0;font-size:9px}.mini-carousel{position:relative;background:#e1d9f3;border:1px solid #d4c8e9;border-radius:8px;width:265px;padding:19px 23px;color:#7253ac}.mini-carousel>small{font-size:9px;opacity:.8}.mini-carousel>strong{display:block;font-size:20px;line-height:1.2;width:180px;margin:10px 0}.mini-carousel button{position:absolute;right:14px;top:50%;background:#fff9;border-radius:50%;height:26px;width:26px}.mini-carousel>span{font-size:9px;letter-spacing:3px}.sample-marquee{width:280px;overflow:hidden;padding:20px 0;border-top:1px solid #d9d4e5;border-bottom:1px solid #d9d4e5;color:#827391}.sample-marquee span{display:block;white-space:nowrap;font-weight:700;animation:marquee 16s linear infinite}.sample-marquee:hover span{animation-play-state:paused}.sample-scrollarea{overflow:auto;height:120px;padding-right:10px}.sample-scrollarea p{border-bottom:1px solid #eee;padding-bottom:8px;font-size:10px}.sample-table{border-collapse:collapse;width:100%;font-size:9px}.sample-table caption{text-align:left;font-weight:600;font-size:11px;margin-bottom:12px}.sample-table th{text-align:left;color:#8b8497;font-weight:500;font-size:8px}.sample-table td,.sample-table th{border-bottom:1px solid #eee;padding:7px 2px}.sample-table th:last-child,.sample-table td:last-child{text-align:right}.sample-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:92%}.sample-kanban>div{background:#e6e3ee;border:1px solid #ddd7e7;padding:7px;border-radius:6px;font-size:8px}.sample-kanban b{font-size:8px;display:block;margin-bottom:8px;white-space:nowrap}.sample-kanban span{display:block;background:white;padding:8px 7px;border:1px solid #dfdce7;border-radius:4px;margin:7px 0;line-height:1.4}.sample-kanban i{font-style:normal;font-size:6px;background:#eee8f8;color:#9679bd;display:block;margin-top:8px;padding:2px}.sample-timeline{list-style:none;margin:0;padding:0 0 0 10px}.sample-timeline li{position:relative;border-left:1px solid #d4c7e6;padding:0 0 16px 20px;font-size:10px}.sample-timeline li:last-child{padding-bottom:0}.sample-timeline li:before{content:'';position:absolute;left:-4px;top:4px;background:#9a7cc9;width:7px;height:7px;border-radius:50%}.sample-timeline small{display:block;font-size:8px;color:#999}.sample-avatar-group{display:flex;flex-wrap:wrap;justify-content:center;max-width:260px}.sample-avatar-group .sample-avatar{border:3px solid #f1f2f6;margin-left:-9px}.sample-avatar-group .sample-avatar:nth-child(even){background:#e2e8df;color:#7f937a}.sample-avatar-group>small{width:100%;text-align:center;margin-top:10px;color:#968da3;font-size:10px}.sample-chips,.sample-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:280px}.sample-chips span{background:#e6ddf3;border:1px solid #d2c3e6;border-radius:20px;padding:5px 10px;color:#755c9a;font-size:11px}.sample-chips b{font-size:13px;margin-left:6px;color:#997bb9}.sample-chat{width:265px;display:flex;flex-direction:column;gap:13px}.sample-chat p{background:#fff;border:1px solid #e0dce8;padding:11px 13px;max-width:90%;border-radius:12px 12px 12px 2px;font-size:10px}.sample-chat p+ p{background:#e4dbf4;align-self:flex-end;border-radius:12px 12px 2px 12px}.sample-chat small{display:block;font-size:7px;color:#a394b5;text-align:right;margin-top:6px}.sample-stat>small{font-size:8px;letter-spacing:1px;color:#938b9e}.sample-stat>strong{display:block;font-size:33px;letter-spacing:-1px;color:#4d3c64;margin:5px 0}.sample-stat>span{font-size:10px;color:#528566}.sample-stat>span>small{font-size:8px;color:#999}.sample-bars{margin:0}.sample-bars figcaption,.sample-line figcaption{font-size:10px;font-weight:600;margin-bottom:10px}.sample-bars>div{height:100px;display:flex;align-items:end;justify-content:space-around;gap:12px}.sample-bars>div>span{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:1;height:100%;position:relative;padding-bottom:16px}.sample-bars i{height:var(--bar);width:100%;background:#aa95d2;border-radius:3px 3px 0 0;display:block}.sample-bars small{font-size:7px;color:#999;position:absolute;bottom:0}.sample-line{margin:0}.sample-line svg{width:100%;height:80px}.sample-line>div{display:flex;justify-content:space-between;font-size:8px;color:#999}.sample-donut{display:flex;gap:16px;align-items:center}.sample-donut>i{width:80px;height:80px;border-radius:50%;background:conic-gradient(#9374c5 0 55%,#c5b6dc 55% 85%,#e4dcee 85%);position:relative;flex-shrink:0}.sample-donut>i:after{content:'';position:absolute;inset:17px;background:white;border-radius:50%}.sample-donut b{font-size:10px;display:block;margin-bottom:8px}.sample-donut span{display:block;font-size:8px;color:#9781ae;margin-top:5px}.sample-calendar>b{font-size:11px}.sample-calendar>div{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:10px;text-align:center}.sample-calendar span{font-size:8px;padding:3px;border-radius:3px}.sample-calendar span:nth-child(-n+7){color:#999}.sample-list{list-style:none;margin:0;padding:0}.sample-list li{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #eee}.sample-list li>span:first-child{font-size:22px;color:#aa93c7}.sample-list li>span:last-child{margin-left:auto;color:#aaa}.sample-list b{font-size:10px}.sample-list small{font-size:8px;color:#999;display:block}.sample-activity p{display:flex;gap:10px;font-size:9px}.sample-activity small{font-size:8px;color:#aaa;display:block;margin-top:2px}.mac-window{width:285px;max-width:90%;border:1px solid #cbcbd7;box-shadow:0 8px 30px #29283c15;border-radius:9px;background:#fafaff;overflow:hidden}.mac-title{display:flex;align-items:center;gap:15px;background:#e9e8ee;padding:8px 10px;min-height:30px;border-bottom:1px solid #dcd9e4}.mac-title>span:last-child{font-size:9px;color:#8b8498}.traffic{display:inline-flex;gap:5px}.traffic i{background:#e5959d;width:8px;height:8px;border-radius:50%;border:1px solid #c77884}.traffic i:nth-child(2){background:#ecc786;border-color:#d0ab69}.traffic i:nth-child(3){background:#95caa5;border-color:#7fb58e}.mac-content{padding:15px;font-size:11px}.traffic-labels{display:flex;gap:16px;font-size:9px;color:#998da9}.sample-menubar{display:flex;align-items:center;gap:14px;background:#e7e4ed;border:1px solid #dcd6e5;padding:7px 11px;border-radius:5px;font-size:8px;max-width:92%}.sample-menubar b:last-child{margin-left:auto}.sample-menu-extra{margin:6px 0 0 auto;background:#f7f5fb;border:1px solid #ded7e8;padding:12px;width:175px;border-radius:6px}.sample-menu-extra b{font-size:10px}.sample-menu-extra p{font-size:9px}.sample-menu-extra .sample-btn{padding:3px 8px;font-size:9px}.sample-dock{display:flex;gap:10px;background:#e7e2ed;border:1px solid #d5c9e1;border-radius:14px;padding:11px;box-shadow:0 8px 20px #70647710}.sample-dock>span{display:grid;place-items:center;background:#b5a1d1;width:43px;height:43px;border-radius:10px;font-size:23px;color:#f8f2ff;position:relative}.sample-dock>span:nth-child(2){background:#99b7cc}.sample-dock>span:nth-child(3){background:#d4a0b4}.sample-dock b{position:absolute;right:-5px;top:-5px;font-size:9px;background:#b64763;border:1px solid white;color:#fff;border-radius:20px;padding:0 5px}.sample-mac-sheet{margin:0 22px 18px;background:white;padding:18px;border:1px solid #ddd;border-top:0;border-radius:0 0 8px 8px;box-shadow:0 6px 12px #0001;text-align:center;font-size:11px}.sample-mac-sheet p{font-size:9px;margin:8px 0 12px}.sample-mac-sheet .sample-btn{font-size:8px;margin:0 3px;padding:4px 10px}.sample-inspector{display:grid;grid-template-columns:1fr 100px;gap:14px;padding:12px}.sample-inspector aside{padding-left:10px;border-left:1px solid #ddd;display:grid;gap:12px}.sample-inspector aside>b{font-size:8px;color:#999}.sample-inspector aside>span{display:flex;justify-content:space-between;font-size:8px}.sample-inspector i{width:16px;height:12px;background:#b99bd7;border:1px solid #9272b0;border-radius:2px}.sample-toolbar{display:flex;gap:20px;padding:8px 15px;border-bottom:1px solid #e3dce9;color:#9785aa;font-size:15px}.sample-toolbar span:nth-last-child(2){margin-left:auto}.sample-colorwell{display:flex;align-items:center;justify-content:space-between;font-size:11px}.sample-colorwell input{width:33px;height:27px;background:white;border:1px solid #ccc;border-radius:4px;padding:2px}.mac-content>.sample-field+.sample-field{margin-top:9px}.mac-content .sample-input{font-size:9px;padding:5px}.mac-content .mini-actions{margin-top:14px}.mac-content .sample-btn{font-size:9px;padding:4px 12px}.sample-vibrancy{display:flex;align-items:center;gap:20px;background:linear-gradient(125deg,#c6b1d6,#9d99c2,#dbc4ce);padding:13px;border-radius:9px;border:1px solid #c4b9d0;width:280px;max-width:90%}.sample-vibrancy>div{background:#ffffff52;backdrop-filter:blur(12px);border:1px solid #ffffff6b;padding:15px 12px;display:grid;gap:9px;border-radius:6px}.sample-vibrancy b{font-size:10px}.sample-vibrancy>div>span{font-size:9px;color:#71617d;padding:2px 5px;border-radius:3px}.sample-vibrancy>span{font-size:13px;color:#fff}.sample-focus{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:270px}.sample-focus>button{border:2px solid #fff;border-radius:5px;background:#7554c8;color:white;box-shadow:0 0 0 2px #9877d2;padding:6px 13px;font-size:11px}.sample-focus small{width:100%;text-align:center;color:#9c8aa8;font-size:9px;margin-top:7px}.sample-cursors{display:flex;gap:28px;text-align:center}.sample-cursors>span{font-size:30px;color:#877299}.sample-cursors small{font-size:8px;display:block;margin-top:10px;color:#96839f}.sample-caret{font-size:15px;color:#705582;padding:15px 0}.sample-caret>span{display:inline-block;width:2px;height:19px;vertical-align:middle;background:#8b60bc;animation:blink 1s step-end infinite}.sample-drag{border:1px solid #d8cbe5;background:white;box-shadow:2px 3px 0 #e8dfee;padding:12px;display:flex;gap:8px;transform:rotate(-3deg);border-radius:5px;font-size:10px}.sample-drag span{color:#b29bbf}.sample-drag small{margin-left:auto;background:#eee6f5;padding:1px 5px;border-radius:3px;color:#9980b0}.sample-drop{border:1px dashed #c3afd4;text-align:center;padding:12px;margin-top:16px;border-radius:5px;color:#ac94bc;font-size:9px}.sample-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#75518f;padding:10px;background:#f1eaf7;border-radius:4px;margin-bottom:15px}.sample-truncate+code{color:#ab94b7;font-size:9px}.sample-snap{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.sample-snap>span{scroll-snap-align:start;flex:0 0 100px;display:grid;place-items:center;background:#e2d7ed;border:1px solid #cbb9dc;height:80px;font-size:18px;color:#9272ad;border-radius:6px}.sample-snap+small{font-size:9px;color:#a591ae}.sample-feed>small{font-size:9px;color:#a592b0}.sample-feed>.small-spinner{margin-top:14px}.sample-fab{position:relative;height:125px}.sample-fab>span{position:absolute;right:0;bottom:0;width:42px;height:42px;background:#9371b8;border-radius:14px;color:white;box-shadow:0 4px 10px #0001;display:grid;place-items:center;font-size:25px}.sample-undo{display:flex;gap:25px;font-size:11px;padding:17px;background:white;border:1px solid #dfd1e6;border-radius:7px}.sample-splitbutton{display:flex;background:#8767b2;border:1px solid #74539f;border-radius:6px;color:white;font-size:12px;overflow:hidden}.sample-splitbutton>span{padding:8px 18px}.sample-splitbutton>span+span{border-left:1px solid #b398cd;padding:8px 10px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:0}}@keyframes marquee{to{transform:translateX(-50%)}}
.demo[class*="demo-style-"]{padding:0}.style-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:22px}.style-sample{width:250px;height:170px;padding:18px 22px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;max-width:100%}.style-sample>small{font-size:8px;letter-spacing:1.2px}.style-sample>strong{font-size:24px;line-height:1.1;letter-spacing:-1px}.style-sample>span{font-size:10px}.stage-glass{background:linear-gradient(125deg,#8098d2,#b8a2d5,#d19faa)}.stage-glass .style-sample{background:#ffffff40;border:1px solid #ffffff85;border-radius:12px;backdrop-filter:blur(14px);color:#3d3865;box-shadow:0 10px 30px #38406610}.stage-neo{background:#e5dcfb}.stage-neo .style-sample{background:#dbf69f;border:2px solid #222;border-radius:0;box-shadow:5px 5px 0 #222;color:#222}.stage-neo strong{font-weight:900;letter-spacing:-1.5px}.stage-neo .style-sample>span{background:#fff;border:1.5px solid #222;box-shadow:2px 2px 0 #222;padding:4px 8px;font-weight:700;font-size:8px}.stage-minimal{background:#f6f5f2}.stage-minimal .style-sample{background:#fff;color:#292c2e}.stage-minimal strong{font-family:Georgia,serif;font-weight:400;font-size:28px}.stage-minimal small{font-size:6px;letter-spacing:1.8px}.stage-minimal .style-sample>span{font-size:8px;border-bottom:1px solid;padding-bottom:3px}.stage-flat{background:#d0e5e2}.stage-flat .style-sample{background:#39726c;color:#fff;border-radius:5px}.stage-flat .style-sample>span{background:#f2c87c;color:#294f4a;padding:6px 15px;font-weight:700;font-size:9px}.stage-neu{background:#e4e8ed}.stage-neu .style-sample{background:#e4e8ed;box-shadow:7px 7px 15px #bbc1cb,-7px -7px 15px #fff;border-radius:17px;color:#606c7e}.stage-neu .style-sample>span{box-shadow:3px 3px 8px #bac1cb,-3px -3px 8px #fff;padding:9px 20px;border-radius:20px;font-size:12px}.stage-skeuo{background:#d7c8b4}.stage-skeuo .style-sample{background:repeating-linear-gradient(0deg,#f2ead8 0 22px,#d7c6ae 23px 24px);border-left:8px solid #775340;border-radius:4px;box-shadow:3px 4px 7px #0002;color:#755a42}.stage-skeuo strong{font:italic 24px Georgia,serif;line-height:1.1}.stage-skeuo .style-sample>small{background:#f2ead8}.stage-clay{background:#e7e0f0}.stage-clay .style-sample{background:#cbb8e7;border-radius:24px;color:#574275;box-shadow:inset 8px 8px 15px #e9dafa,inset -8px -8px 15px #a993c9,6px 8px 12px #c7bad8}.stage-clay .style-sample>span{background:#f2d8b6;box-shadow:inset 3px 3px 5px #ffe8d5,inset -3px -3px 5px #dab08a,3px 5px 7px #a48cbe;border-radius:12px;padding:7px 18px;color:#8d6547}.stage-brutal{background:#eaeaea}.stage-brutal .style-sample{font-family:'Times New Roman',serif;background:#fff;border:1px solid black;color:black}.stage-brutal .style-sample>strong{font-family:'Times New Roman',serif;font-size:27px;letter-spacing:0}.stage-brutal small{letter-spacing:0}.stage-brutal .style-sample>span{color:blue;text-decoration:underline}.stage-swiss{background:#ddd}.stage-swiss .style-sample{background:#df3d37;color:#181818;padding:15px}.stage-swiss strong{font:800 34px/1 sans-serif;letter-spacing:-2px;border-top:1px solid #181818;width:100%;padding-top:8px}.stage-swiss small{font-size:7px;letter-spacing:0}.stage-swiss .style-sample>span{font-size:9px}.stage-bauhaus{background:#efe9de}.stage-bauhaus .style-sample{color:#111;background:linear-gradient(90deg,#f4cd53 0 65%,#31509b 65%);border-bottom:8px solid #c75343;border-radius:0}.stage-bauhaus strong{font-size:24px;color:#192b52}.stage-bauhaus .style-sample>span{font-size:24px;letter-spacing:6px;color:#c64233}.stage-editorial{background:#e8e5df}.stage-editorial .style-sample{background:#fffdf8;color:#454038;border-top:4px double #454038}.stage-editorial strong{font:400 27px/1.05 Georgia,serif;letter-spacing:-.6px}.stage-editorial .style-sample>span{font:italic 10px Georgia,serif;border-top:1px solid #ccc;padding-top:5px;width:100%}.stage-darkstyle{background:#171920}.stage-darkstyle .style-sample{background:#242731;border:1px solid #3c4050;border-radius:9px;color:#eeecf6}.stage-darkstyle small{color:#9c95ae}.stage-darkstyle .style-sample>span{color:#aed5b0}.stage-mono{background:#dae1ea}.stage-mono .style-sample{background:#c0cbdb;border:1px solid #95a7c0;color:#293e5c;border-radius:6px}.stage-mono .style-sample>span{background:#365175;color:white;border-radius:4px;padding:6px 10px}.stage-duo{background:#f1be87}.stage-duo .style-sample{background:#244564;color:#ffd09b;border-radius:0}.stage-duo .style-sample>span{border:1px solid;padding:4px 10px}.stage-gradient{background:#d8cce8}.stage-gradient .style-sample{background:linear-gradient(120deg,#46308e,#96407f);border-radius:12px;color:#fff}.stage-gradient .style-sample>span{background:#ffffff25;border:1px solid #ffffff55;border-radius:20px;padding:5px 16px}.stage-terminal{background:#192a20}.stage-terminal .style-sample{background:#122218;color:#93cea2;border:1px solid #497254;font-family:monospace}.stage-terminal strong{font:500 22px/1.2 monospace;letter-spacing:0}.stage-terminal small{letter-spacing:0}.stage-terminal .style-sample>span{font-size:9px}.stage-pixel{background:#dad3eb}.stage-pixel .style-sample{background:#392d62;border:4px solid #9783c4;box-shadow:4px 4px 0 #271d45;color:#e8dda1;border-radius:0;font-family:monospace}.stage-pixel strong{font:700 23px/1.2 monospace;letter-spacing:-1px}.stage-pixel .style-sample>span{color:#b3d3b3;font-weight:700}.stage-y2k{background:linear-gradient(145deg,#b9c8df,#d5b8da)}.stage-y2k .style-sample{background:linear-gradient(130deg,#eff7ff,#a2aec6 45%,#f2edf9 55%,#b2a6c5);border:2px solid #e8e1f6;border-radius:30px 6px 30px 6px;color:#635888;box-shadow:inset 2px 2px 10px white,5px 5px 0 #929cc033}.stage-y2k strong{font-style:italic;letter-spacing:-2px;font-size:29px;text-shadow:1px 1px white}.stage-y2k .style-sample>span{background:linear-gradient(#e6cce8,#bc96c8);border:1px solid #a38fb9;padding:4px 15px;border-radius:20px}.stage-aero{background:linear-gradient(140deg,#b2d6f0,#d2e9d6)}.stage-aero .style-sample{background:linear-gradient(#f4ffffa0,#93cece85);border:1px solid #ffffffe6;border-radius:12px;color:#28697a;box-shadow:inset 0 14px 18px #ffffff99,0 5px 14px #49757822}.stage-aero .style-sample>span{background:linear-gradient(#d9f1f5,#81becf);border:1px solid #70b4c7;border-radius:20px;padding:5px 16px}.stage-material{background:#f0eafa}.stage-material .style-sample{background:#e2d5f2;color:#4e3866;border-radius:24px}.stage-material .style-sample>span{background:#6d4d99;color:#fff;border-radius:18px;padding:8px 16px;font-size:9px}.stage-material strong{font-weight:500;letter-spacing:-.5px}.stage-fluent{background:linear-gradient(135deg,#ccd8ed,#e1e7ef)}.stage-fluent .style-sample{background:#f9fbffad;border:1px solid #ffffffb5;border-radius:6px;color:#30496b;box-shadow:0 7px 14px #4c5c7b18}.stage-fluent .style-sample>span{background:#4677ac;color:#fff;border-radius:4px;padding:6px 14px;border-bottom:1px solid #234971}.stage-liquid{background:linear-gradient(120deg,#a7badb,#c0a0c9,#e0c2cb)}.stage-liquid .style-sample{background:linear-gradient(120deg,#ffffff18,#ffffff66,#ffffff15);border:1px solid #fff9;box-shadow:inset 1px 2px 5px #fff9,inset -1px -2px 3px #7b6b9155,0 5px 15px #62576b19;border-radius:23px;color:#484c71}.stage-liquid .style-sample>span{background:#ffffff45;border:1px solid #fff9;box-shadow:inset 1px 2px 4px #fffa;border-radius:20px;padding:8px 23px}.stage-contrast{background:#222}.stage-contrast .style-sample{background:#050505;border:2px solid #fff;color:#fff;border-radius:0}.stage-contrast .style-sample>span{background:#f3eb58;color:#111;border:2px solid white;outline:2px solid #f3eb58;outline-offset:2px;padding:4px 10px}.stage-soft{background:#e8e1ec}.stage-soft .style-sample{background:#f6edf3;color:#695770;border-radius:20px;box-shadow:0 7px 20px #85748a12}.stage-soft .style-sample>span{background:#d9c7e6;color:#624a72;border-radius:20px;padding:7px 14px}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.guide-card{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:26px;display:flex;flex-direction:column}.guide-card:hover{border-color:var(--purple)}.guide-card>small{color:var(--purple);font-size:12px;margin-bottom:12px}.guide-card h2{font-size:23px;line-height:1.3;letter-spacing:-.5px}.guide-card p{font-size:15px;color:var(--muted);margin:14px 0 20px}.guide-card>span{font-size:13px;color:var(--purple);margin-top:auto}.guide-article{max-width:820px;margin:45px auto}.guide-article h1{font-size:40px;letter-spacing:-1.5px;margin-bottom:20px}.guide-article .lead{font-size:19px;color:var(--muted);margin-bottom:35px}.guide-article h2{font-size:24px;letter-spacing:-.5px;margin:35px 0 15px}.guide-article p,.guide-article li{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:15px}.guide-article ul,.guide-article ol{padding-left:24px}.guide-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px;margin:22px 0}.guide-table{border-collapse:collapse;width:100%;font-size:14px}.guide-table td,.guide-table th{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.guide-table th{background:var(--soft);color:var(--purple);font-size:13px}.guide-table td{color:var(--muted)}.guide-table td:first-child{font-weight:600;color:var(--ink);min-width:130px}.guide-article a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}.guide-example{background:var(--soft);border-left:3px solid var(--purple);padding:20px;border-radius:0 8px 8px 0;margin:25px 0;font-size:15px}.guide-article code{font-size:13px;background:var(--soft);padding:2px 5px;border-radius:4px}.guide-article pre{white-space:pre-wrap;background:var(--panel);padding:20px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:14px;line-height:1.7}.source-note{font-size:12px!important;color:var(--muted);border-top:1px solid var(--line);margin-top:30px;padding-top:15px}
@media(max-width:700px){.guide-grid{grid-template-columns:1fr}.guide-article h1{font-size:31px}.guide-article{margin:30px auto}.guide-table td,.guide-table th{padding:10px 12px;font-size:13px}.site-header nav a:last-child{display:flex}.date-range{grid-template-columns:1fr}.date-range .sample-field input{padding:4px}.guide-card{padding:22px}.sample-kanban{gap:5px}.sample-menubar{gap:9px}.detail .style-stage{padding:20px}.code-box pre{font-size:12px}.catalog-top{align-items:center}.hero{grid-template-columns:minmax(0,1fr)}.hero>div{min-width:0}.grid{min-width:0}.detail,.detail-columns>section{min-width:0}.guide-article p{overflow-wrap:anywhere}.header-inner{gap:12px}.site-header nav{gap:12px}.site-header nav a{font-size:11px}}
@media(prefers-reduced-motion:reduce){.sample-spinner>span,.small-spinner,.sample-caret>span,.sample-marquee span{animation:none}}
@media(max-width:700px){.hero{padding:29px 0 22px}.hero p{font-size:14px;line-height:1.65}.suggestions{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;margin:12px 0 25px;scrollbar-width:thin}.suggestions>span{display:none}.suggestions button{flex-shrink:0;white-space:nowrap}.catalog-top{gap:8px}.catalog-top h2{font-size:16px;letter-spacing:-.5px}.count{margin-left:4px}.sort-wrap select{font-size:12px;width:112px}.card-body p{font-size:14px}}
@media(max-width:380px){.header-inner{padding:0 14px;gap:10px}.brand{font-size:16px;gap:5px}.brand-mark{transform:scale(.8);width:25px}.site-header nav{gap:8px}.site-header nav a{font-size:10px}.header-end .icon-button{width:27px}main{padding:0 16px}.hero h1{font-size:29px}.catalog-top h2{font-size:15px}.sort-wrap select{width:105px;font-size:11px}.count{font-size:10px}.mini-crumb{gap:8px;font-size:10px;padding:12px}.sample-menubar{font-size:7px;gap:7px}}