.component-page{background:#0b0d12;}
.component-detail{max-width:1480px; margin:0 auto; padding:42px 28px 80px;}
.component-detail__top{margin-bottom:24px;}
.back-link{display:inline-flex; margin-bottom:28px; color:var(--text-muted); font-size:12px; transition:color .15s;}.back-link:hover{color:var(--lime)}
.component-identity{display:flex; align-items:end; justify-content:space-between; gap:24px;}
.component-identity>div:first-child>span{display:block; margin-bottom:7px; color:var(--lime); font:9px var(--font-mono); text-transform:uppercase; letter-spacing:.12em;}
.component-identity h1{font:700 clamp(32px,4vw,52px)/1 var(--font-display); letter-spacing:-.04em;}
.component-identity__meta{display:flex; gap:8px; flex-wrap:wrap;}.component-identity__meta span{padding:6px 9px; border:1px solid var(--line); border-radius:6px; color:var(--text-muted); font:9px var(--font-mono);}
.workbench{display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); min-height:610px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#10131a;}
.workbench-preview{min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line);}
.preview-toolbar{height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; border-bottom:1px solid var(--line); color:var(--text-muted); font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.06em;}
.preview-toolbar>span{display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:live-pulse 1.8s ease-in-out infinite}@keyframes live-pulse{50%{opacity:.45}}
.preview-toolbar>div{display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--ink);}.preview-option{border:0; border-radius:5px; padding:6px 9px; color:#70798b; background:transparent; font-size:10px}.preview-option.active{color:var(--ink); background:var(--lime)}
.preview-canvas{flex:1; display:grid; place-items:center; min-height:550px; padding:40px; background:#151923; transition:background .2s,color .2s}.preview-canvas.light{background:#eef0f3;color:#131722}
.preview-canvas iframe{width:100%;height:100%;min-height:470px;border:0;background:transparent}
.detail-launch{display:flex; align-items:center; gap:20px; padding:14px 16px 14px 23px; border:0; border-radius:999px; color:#0b0d12; background:var(--lime); font-weight:700; box-shadow:0 18px 46px rgba(198,255,61,.16)}.detail-launch span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(11,13,18,.12)}
.detail-field{width:min(100%,290px);padding:20px 15px 9px;border:1px solid #3a4251;border-radius:10px;background:#11151c}.detail-field span{display:block;color:var(--lime);font-size:9px;text-transform:uppercase}.detail-field input{width:100%;margin-top:4px;border:0;outline:0;color:#d4d8e0;background:transparent}
.detail-toggle{width:68px;height:38px;padding:5px;border:1px solid rgba(198,255,61,.42);border-radius:99px;background:rgba(198,255,61,.15)}.detail-toggle span{display:block;width:26px;height:26px;margin-left:30px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px rgba(198,255,61,.35);transition:.2s}.detail-toggle[aria-checked=false] span{margin-left:0;background:#737d91}
.detail-metric{width:230px;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:#11151d}.detail-metric small{color:#8490a4}.detail-metric strong{display:block;margin:8px 0;font:700 34px var(--font-display)}.detail-metric span{color:var(--lime);font:10px var(--font-mono)}
.detail-loader{width:58px;height:58px;border:3px dashed var(--lime);border-radius:50%;animation:spin 2.5s linear infinite}
.detail-dock{display:flex;gap:7px;padding:8px;border:1px solid #323a47;border-radius:14px;background:#10141b}.detail-dock span,.detail-dock b{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;color:#8a94a6}.detail-dock b{color:#0b0d12;background:var(--lime)}
.detail-toast{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:11px;width:280px;padding:13px;border:1px solid #303845;border-radius:12px;background:#11151d}.detail-toast>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#0b0d12;background:var(--lime)}.detail-toast p{display:flex;flex-direction:column}.detail-toast b{font-size:11px}.detail-toast small{color:#788296;font-size:8px}.detail-toast i{font-style:normal;color:#788296}
.code-panel{position:relative;min-width:0;max-height:668px;overflow:auto;background:#1e1e1e;color:#d4d4d4;scrollbar-color:#424242 #1e1e1e;}
.editor-titlebar{position:sticky;top:0;z-index:5;height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 13px;border-bottom:1px solid #2b2b2b;background:#181818;font:10px var(--font-mono)}
.editor-titlebar>div{display:flex;gap:6px}.editor-titlebar>div span{width:9px;height:9px;border-radius:50%;background:#ff5f57}.editor-titlebar>div span:nth-child(2){background:#febc2e}.editor-titlebar>div span:nth-child(3){background:#28c840}.editor-titlebar p{color:#858585}.editor-titlebar strong{justify-self:end;color:var(--lime);font-weight:500}
.code-editor{border-bottom:1px solid #333;background:#1e1e1e}.code-editor:last-child{border-bottom:0}
.code-editor__header{position:sticky;top:44px;z-index:4;height:46px;display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;border-bottom:1px solid #2b2b2b;background:#252526}
.code-editor__header strong{font:500 11px var(--font-mono);color:#d4d4d4}.code-editor__header small{color:#777;font:9px var(--font-mono)}
.language-icon{display:grid;place-items:center;min-width:26px;height:22px;padding:0 4px;border-radius:4px;color:#fff;background:#e44d26;font:700 8px var(--font-mono)}.language-icon--css{background:#1572b6}.language-icon--js{background:#d7ba32;color:#1e1e1e}
.editor-copy{margin-left:auto;display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #3c3c3c;border-radius:5px;color:#c9c9c9;background:#2d2d30;font:9px var(--font-mono)}.editor-copy:hover{border-color:#6a6a6a;background:#353538}.editor-copy.copied{color:#0b0d12;border-color:var(--lime);background:var(--lime)}
.code-editor__body{display:grid;grid-template-columns:48px minmax(0,1fr);min-height:210px;background:#1e1e1e}
.line-numbers{padding:14px 10px 14px 0;border-right:1px solid #292929;color:#858585;text-align:right;white-space:pre;font:12px/1.7 var(--font-mono);user-select:none}
.code-surface{position:relative;min-height:210px;overflow:hidden}
.syntax-layer,.code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:14px 16px;border:0;outline:0;overflow:auto;white-space:pre;tab-size:2;font:12px/1.7 var(--font-mono)}
.syntax-layer{pointer-events:none;color:#d4d4d4;background:#1e1e1e}.syntax-layer code{font:inherit}
.code-input{z-index:2;resize:none;color:transparent;background:transparent;caret-color:#fff;-webkit-text-fill-color:transparent}.code-input::selection{background:rgba(38,79,120,.9)}
.tok-comment{color:#6a9955}.tok-string{color:#ce9178}.tok-number{color:#b5cea8}.tok-keyword{color:#c586c0}.tok-tag{color:#569cd6}.tok-attr,.tok-property{color:#9cdcfe}.tok-selector{color:#d7ba7d}.tok-function{color:#dcdcaa}.tok-punctuation{color:#d4d4d4}
.component-info{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center;gap:1px;margin-top:16px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--line)}.component-info>div,.component-info>a{height:72px;display:flex;flex-direction:column;justify-content:center;padding:0 18px;background:#11151c}.component-info span{margin-bottom:4px;color:#6e778a;font:8px var(--font-mono);text-transform:uppercase}.component-info strong{font-size:12px}.component-info>a{color:var(--lime);font-size:11px;justify-content:center}
.component-page .footer{margin-top:0}
@media(max-width:900px){.workbench{grid-template-columns:1fr;min-height:0}.workbench-preview{border-right:0;border-bottom:1px solid var(--line)}.preview-canvas{min-height:380px}.preview-canvas iframe{min-height:320px}.code-panel{max-height:680px}.component-info{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.component-detail{padding:28px 16px 60px}.component-identity{display:block}.component-identity__meta{margin-top:16px}.component-identity h1{font-size:36px}.workbench{border-radius:12px}.preview-canvas{min-height:310px;padding:14px}.preview-canvas iframe{min-height:280px}.editor-titlebar{grid-template-columns:1fr auto}.editor-titlebar p{display:none}.code-editor__header small{display:none}.editor-copy{font-size:0}.editor-copy span{font-size:12px}.code-editor__body{grid-template-columns:40px}.line-numbers,.syntax-layer,.code-input{font-size:10px}.component-info{grid-template-columns:1fr}.component-info>div,.component-info>a{height:60px}.detail-toast{width:250px}}
@media(prefers-reduced-motion:reduce){.detail-loader{animation:none}}

/* Refined neutral theme, tabbed editor and community */
.component-page{background:#090a0c}
.component-identity__side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.framework-export{position:relative}.framework-export__trigger{display:flex;align-items:center;gap:20px;padding:10px 13px;border:1px solid #34373c;border-radius:8px;color:var(--text);background:#15171a;font-size:11px}.framework-menu{position:absolute;z-index:20;right:0;top:calc(100% + 8px);width:260px;padding:7px;border:1px solid #34373c;border-radius:11px;background:#111315;box-shadow:0 24px 60px rgba(0,0,0,.55)}.framework-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:10px;border:0;border-radius:7px;color:var(--text);background:transparent;text-align:left}.framework-menu button:hover{background:#1d2024}.framework-menu button>span{display:flex;flex-direction:column}.framework-menu strong{font-size:12px}.framework-menu small{margin-top:2px;color:#7f858e;font-size:9px}.framework-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;font:700 15px Inter}.framework-icon--react{color:#61dafb;background:rgba(97,218,251,.1)}.framework-icon--vue{color:#42b883;background:rgba(66,184,131,.1)}.framework-icon--svelte{color:#ff3e00;background:rgba(255,62,0,.1)}.framework-icon--lit{color:#7c8cff;background:rgba(124,140,255,.1)}
.editor-tabs{position:sticky;top:44px;z-index:5;display:flex;height:50px;border-bottom:1px solid #333;background:#181818}.editor-tabs button{display:flex;align-items:center;gap:7px;padding:0 18px;border:0;border-right:1px solid #2b2b2b;border-bottom:2px solid transparent;color:#8d8d8d;background:#181818;font:500 11px Inter}.editor-tabs button[aria-selected=true]{color:#f0f0f0;border-bottom-color:var(--lime);background:#1e1e1e}
.code-editor[hidden]{display:none}.code-editor__header{position:relative;top:auto}.code-editor__body{grid-template-columns:52px minmax(0,1fr);min-height:528px}.code-surface{min-height:528px}.line-numbers{padding:16px 11px 16px 0;font:14px/1.72 Inter,sans-serif}.syntax-layer,.code-input{padding:16px 18px;font:14px/1.72 Inter,sans-serif}
.component-community{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:12px;margin-top:28px}.component-community article{min-height:145px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#111315}.author-card{display:flex;align-items:center;gap:13px}.author-card__avatar,.comment-avatar{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%;color:#0b0d12;background:var(--lime);font:700 11px Inter}.author-card div{flex:1}.author-card small,.license-card small,.hashtag-card>small{display:block;margin-bottom:4px;color:#787e87;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.author-card h2{font:600 15px var(--font-display)}.author-card a{color:#9197a0;font-size:10px}.author-card button{padding:7px 10px;border:1px solid #383c42;border-radius:7px;color:#ddd;background:#191b1f;font-size:10px}.license-card strong{display:block;margin:8px 0;font:700 28px var(--font-display)}.license-card p{color:#8e949d;font-size:11px;line-height:1.55}.hashtag-card div{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.hashtag-card a{padding:6px 8px;border:1px solid #32363b;border-radius:999px;color:#b7bbc2;background:#17191c;font-size:9px}
.discussion{margin-top:36px}.discussion__head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.discussion__head>div>span{color:var(--lime);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.discussion__head h2{margin-top:5px;font:700 25px var(--font-display)}.discussion__head h2 small{color:#737982;font-size:11px}.discussion__head>p{color:#858b94;font-size:11px}.comment-box{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#111315}.comment-box textarea{min-height:88px;padding:12px;border:1px solid #30343a;border-radius:8px;outline:0;resize:vertical;color:var(--text);background:#0c0d0f;font:12px/1.5 Inter}.comment-box>div{grid-column:2;display:flex;align-items:center;justify-content:space-between}.comment-box small{color:#727882;font-size:9px}.comment-list{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.comment{display:grid;grid-template-columns:42px 1fr;gap:13px;padding:18px;background:#0f1113;border-bottom:1px solid var(--line)}.comment:last-child{border-bottom:0}.comment header{display:flex;align-items:center;gap:8px}.comment header strong{font-size:12px}.comment header a,.comment time{color:#787e87;font-size:9px}.comment time{margin-left:auto}.comment p{margin:9px 0;color:#b4b8bf;font-size:11px;line-height:1.65}.comment p code{padding:2px 4px;border-radius:4px;background:#25272b}.comment footer{display:flex;gap:12px}.comment footer button{border:0;color:#747a83;background:transparent;font-size:9px}
@media(max-width:900px){.component-community{grid-template-columns:1fr 1fr}.author-card{grid-column:1/-1}}
@media(max-width:620px){.component-identity__side{align-items:flex-start;margin-top:16px}.editor-tabs button{flex:1;justify-content:center;padding:0 7px;font-size:9px}.editor-tabs .language-icon{display:none}.code-editor__body{grid-template-columns:42px;min-height:420px}.code-surface{min-height:420px}.line-numbers,.syntax-layer,.code-input{font-size:12px}.component-community{grid-template-columns:1fr}.component-community .author-card{grid-column:auto}.discussion__head{display:block}.discussion__head>p{margin-top:8px}.comment-box{grid-template-columns:34px 1fr}.comment-avatar{width:34px;height:34px}.comment{grid-template-columns:34px 1fr}.comment header{flex-wrap:wrap}.comment time{width:100%;margin:0}}

/* Professional live workbench and export lab */
.component-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}.view-stat{color:#9298a2;font-size:12px}.vote-button{display:flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid #363a40;border-radius:8px;color:#e2e4e8;background:#15171a;font-size:12px}.vote-button span{color:var(--lime)}.vote-button[aria-pressed=true]{color:#080a0b;border-color:var(--lime);background:var(--lime)}.vote-button[aria-pressed=true] span{color:#080a0b}
.preview-tools,.device-switch,.theme-switch{display:flex!important;gap:3px}.device-switch,.theme-switch{padding:3px;border:1px solid var(--line);border-radius:8px;background:#0b0d10}.preview-toolbar>div{border:0;background:transparent;padding:0}.preview-canvas iframe{max-width:100%;transition:max-width .24s,box-shadow .24s}.preview-canvas[data-device=tablet] iframe{max-width:720px;box-shadow:0 0 0 1px #353a43}.preview-canvas[data-device=mobile] iframe{max-width:390px;box-shadow:0 0 0 1px #353a43,0 22px 60px rgba(0,0,0,.35)}
.editor-utility{position:sticky;top:44px;z-index:6;display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid #303030;background:#1b1b1b}.editor-utility button{padding:7px 10px;border:1px solid #3c3c3c;border-radius:5px;color:#bfc2c7;background:#252526;font:500 11px Inter}.editor-utility button:hover{color:#fff;border-color:#5b5b5b;background:#303033}
.editor-tabs{top:89px}.code-editor,.code-editor__body,.code-surface{min-width:0;width:100%}.code-surface{overflow:auto}.syntax-layer,.code-input{overflow:auto;white-space:pre;overflow-wrap:normal;word-break:normal;font-size:15px;line-height:1.72}.line-numbers{font-size:15px;line-height:1.72}
.workbench.editor-focus{position:fixed;z-index:100;inset:14px;grid-template-columns:minmax(300px,.8fr) minmax(500px,1.2fr);box-shadow:0 30px 120px #000}.workbench.editor-focus .code-panel{max-height:none}
.modal-open{overflow:hidden}.export-modal{position:fixed;z-index:200;inset:0}.export-modal[hidden]{display:none}.export-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}.export-dialog{position:relative;width:min(1080px,calc(100% - 32px));max-height:calc(100vh - 50px);margin:25px auto;border:1px solid #393d43;border-radius:18px;overflow:hidden;background:#101214;box-shadow:0 35px 120px rgba(0,0,0,.75)}.export-dialog>header{display:flex;justify-content:space-between;gap:20px;padding:24px 26px;border-bottom:1px solid #2b2f34}.export-dialog>header span{color:var(--lime);font:10px Inter;letter-spacing:.12em}.export-dialog>header h2{margin:5px 0;font:700 28px var(--font-display)}.export-dialog>header p{color:#8e949d;font-size:13px}.export-dialog>header>button{width:38px;height:38px;border:1px solid #373b41;border-radius:8px;color:#c7cbd1;background:#191c20;font-size:22px}.export-layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:520px}.export-languages{padding:12px;border-right:1px solid #2b2f34;background:#0c0e10}.export-languages button{display:flex;align-items:center;gap:12px;width:100%;padding:13px;border:1px solid transparent;border-radius:9px;color:#b4bac3;background:transparent;text-align:left}.export-languages button:hover,.export-languages button.active{color:#fff;border-color:#373c43;background:#191c20}.export-languages button.active{box-shadow:inset 3px 0 var(--lime)}.export-languages svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.5}.export-languages button:nth-child(2) svg{fill:#42b883;stroke:none}.export-languages button:nth-child(3) svg{stroke:#ff3e00;stroke-width:2}.export-languages button:nth-child(4) svg{fill:#578cff;stroke:none}.export-languages button:nth-child(5) svg{fill:var(--lime);stroke:none}.export-languages span{display:flex;flex-direction:column}.export-languages b{font-size:14px}.export-languages small{margin-top:3px;color:#777f8b;font-size:10px}.export-code{min-width:0;background:#1e1e1e}.export-code__bar{display:flex;align-items:center;justify-content:space-between;height:49px;padding:0 15px;border-bottom:1px solid #303030;color:#aeb3ba;font:12px Inter}.export-code__bar button{padding:7px 10px;border:1px solid #444;border-radius:6px;color:#ddd;background:#2a2a2d;font-size:11px}.export-code pre{height:471px;margin:0;padding:22px;overflow:auto;color:#d4d4d4;font:14px/1.7 Inter;white-space:pre;tab-size:2}
.comment-avatar,.author-card__avatar{color:#cdd1d7;background:#25292e}.discussion__head>div>span{color:#8f959e}.comment-box{padding:20px;background:#0d0f11}.comment-box textarea{font-size:14px}.comment{padding:22px;background:#0c0e10}.comment header strong{font-size:14px}.comment header a,.comment time{font-size:11px}.comment p{font-size:14px;line-height:1.7}.comment footer button{font-size:11px}.discussion__head>p{font-size:13px}
@media(max-width:900px){.component-actions{justify-content:flex-start;flex-wrap:wrap}.workbench.editor-focus{grid-template-columns:1fr;overflow:auto}.export-layout{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:620px){.component-actions{align-items:stretch}.view-stat{width:100%}.preview-toolbar{height:auto;min-height:62px;align-items:flex-start;gap:10px;padding:10px;flex-direction:column}.preview-tools{width:100%;justify-content:space-between}.editor-utility{top:44px;overflow-x:auto}.editor-utility button{flex:0 0 auto}.editor-tabs{top:91px;overflow-x:auto}.code-panel{width:100%;max-width:100%;overflow:hidden}.code-editor__body{grid-template-columns:44px minmax(0,1fr);min-height:470px;overflow:hidden}.code-surface{min-height:470px;overflow:auto}.syntax-layer,.code-input{min-width:720px;width:max(100%,720px);font-size:14px;line-height:1.75}.line-numbers{font-size:14px;line-height:1.75}.editor-copy{font-size:0}.export-dialog{width:calc(100% - 16px);margin:8px;max-height:calc(100vh - 16px);border-radius:12px}.export-dialog>header{padding:18px}.export-dialog>header h2{font-size:22px}.export-dialog>header p{font-size:12px}.export-layout{display:block;min-height:0}.export-languages{display:flex;gap:5px;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid #2b2f34}.export-languages button{flex:0 0 auto;width:auto;padding:9px}.export-languages button span{display:none}.export-languages svg{width:25px;height:25px}.export-code pre{height:52vh;padding:16px;font-size:13px}.workbench.editor-focus{inset:0;border-radius:0}.comment{grid-template-columns:38px 1fr;padding:17px 12px}.comment p{font-size:13px}.comment-box{grid-template-columns:1fr}.comment-box>.comment-avatar{display:none}.comment-box>div{grid-column:1}}

.component-page,.component-detail{background:#000}.component-identity h1{display:none}.component-detail{max-width:1500px}.workbench{background:#0d0f11}.code-editor__header{height:42px;justify-content:flex-end}.code-editor__header .editor-copy{margin-left:0}.editor-utility button{display:flex;align-items:center;gap:6px}.framework-export__trigger{padding:12px 18px;border-color:rgba(198,255,61,.55);color:#0a0b0c;background:var(--lime);font-weight:700}.export-languages button:last-child svg{fill:none}.export-languages button:last-child svg path:nth-child(1){fill:#f24e1e}.component-community article,.comment-box,.comment,.comment-list{background:#090a0b}.workbench-preview,.component-info,.component-community article,.comment-box,.comment-list{border-color:#292c31}
.editor-utility svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.component-detail{padding-top:22px}.component-detail__top{margin-bottom:14px}.back-link{margin-bottom:14px}.component-identity{align-items:center}.component-identity>div:first-child>span{margin:0}.component-identity__side{gap:8px}.component-identity__meta span{padding:5px 8px}.component-actions{gap:8px}.figma-copy{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #363a40;border-radius:8px;color:#e3e5e8;background:#15171a;font:600 12px Inter}.figma-copy svg{width:20px;height:20px}.figma-copy:hover{border-color:#555a62;background:#1b1e22}.figma-copy.copied{border-color:#0acf83;color:#dfffee}
.editor-utility{top:0;justify-content:flex-end}.editor-live{display:flex;align-items:center;gap:7px;margin-right:auto;color:#9da3ac;font:11px Inter}.editor-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(198,255,61,.55)}.editor-tabs{top:47px}.code-panel{max-height:624px}
@media(max-width:620px){.component-detail{padding-top:16px}.component-identity{align-items:flex-start}.figma-copy span{display:none}.figma-copy{padding:10px}.component-actions{width:100%}.editor-tabs{top:47px}}
.svg-export{display:flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid #363a40;border-radius:8px;color:#dfe2e7;background:#15171a;font:600 12px Inter}.svg-export svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.svg-export:hover{border-color:#555a62;background:#1b1e22}.component-identity>div:first-child>span{font-size:13px}.component-identity__meta span{font-size:12px}.view-stat,.vote-button,.figma-copy,.framework-export__trigger{font-size:14px}.author-card small,.license-card small,.hashtag-card>small{font-size:12px}.author-card h2{font-size:18px}.author-card a,.license-card p{font-size:14px}.hashtag-card a{padding:8px 11px;font-size:13px}.component-info span{font-size:11px}.component-info strong,.component-info>a{font-size:14px}
.component-actions{display:flex!important;flex-wrap:wrap!important;overflow:visible}.framework-export__trigger{display:flex!important;align-items:center;gap:9px;order:-2;white-space:nowrap;visibility:visible!important;opacity:1!important}.framework-export__trigger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.framework-export__trigger b{font-size:16px}.view-stat{order:-1}
@media(max-width:720px){.framework-export__trigger{width:auto}.framework-export__trigger span{display:inline}.component-actions{align-items:center!important}}
.component-actions{flex-wrap:nowrap!important}.view-stat{order:1}.vote-button{order:2}.figma-copy{order:3}.svg-export{order:4}.framework-export__trigger{order:5;padding:10px 14px}.framework-export__trigger b{display:none}
@media(max-width:900px){.component-actions{flex-wrap:wrap!important}.view-stat{order:0;width:100%}.vote-button{order:1}.figma-copy{order:2}.svg-export{order:3}.framework-export__trigger{order:4}}
.preview-color{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid #343941;border-radius:9px;background:#0c0e11}.preview-color>span{color:#868e9a;font:10px Inter;text-transform:uppercase;letter-spacing:.06em}.preview-color input{width:30px;height:27px;padding:0;border:0;border-radius:6px;overflow:hidden;background:transparent;cursor:pointer}.preview-color input::-webkit-color-swatch-wrapper{padding:0}.preview-color input::-webkit-color-swatch{border:0;border-radius:6px}.preview-color output{min-width:58px;color:#d6d9de;font:11px Inter}.css-color-tools{border-top:1px solid #343434;background:#181818}.css-color-tools>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid #2d2d2d}.css-color-tools>header>div{display:flex;flex-direction:column;gap:3px}.css-color-tools strong{color:#e0e0e0;font:600 12px Inter}.css-color-tools small,.css-color-tools>header>span{color:#7f858d;font:10px Inter}.css-color-palette{display:flex;flex-wrap:wrap;gap:8px;padding:13px 16px;min-height:58px}.css-color-chip{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #373a3f;border-radius:8px;color:#b8bdc5;background:#222326;font:10px Inter;cursor:pointer}.css-color-chip input{width:22px;height:22px;padding:0;border:0;border-radius:5px;overflow:hidden;background:transparent}.css-color-chip input::-webkit-color-swatch-wrapper{padding:0}.css-color-chip input::-webkit-color-swatch{border:0;border-radius:5px}@media(max-width:620px){.preview-color{width:100%;justify-content:space-between}.css-color-palette{flex-wrap:nowrap;overflow-x:auto}.css-color-chip{flex:0 0 auto}}
.code-editor[data-editor=css]{position:relative}
.code-editor[data-editor=css]:not([hidden]){display:flex;height:535px;min-height:0;flex-direction:column}
.code-editor[data-editor=css] .code-editor__body{min-height:0;flex:1;overflow:hidden}
.code-editor[data-editor=css] .code-surface{min-height:0;height:100%;overflow:auto}
.css-color-tools{position:sticky;z-index:8;bottom:0;box-shadow:0 -12px 28px rgba(0,0,0,.28)}
.css-color-tools>header{padding:10px 14px}
.css-color-palette{flex-wrap:nowrap;overflow-x:auto;min-height:54px;padding:9px 14px;scrollbar-width:thin}
.css-color-chip{flex:0 0 auto}
.css-color-chip span{min-width:64px}
.code-editor[data-editor=css] .code-editor__body{padding-bottom:0}
@media(max-width:620px){.code-editor[data-editor=css]:not([hidden]){height:560px}}

/* One predictable scroll area: only the textarea scrolls. */
.code-panel{height:624px;max-height:624px;overflow:hidden}
.code-editor:not([hidden]){display:flex;height:527px;min-height:0;flex-direction:column}
.code-editor:not([hidden]) .code-editor__body{min-height:0;flex:1;overflow:hidden}
.code-editor:not([hidden]) .code-surface{height:100%;min-height:0;overflow:hidden!important}
.code-editor:not([hidden]) .syntax-layer{overflow:hidden;padding-bottom:52px}
.code-editor:not([hidden]) .syntax-layer,.code-editor:not([hidden]) .code-input{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important}
.code-editor:not([hidden]) .code-input{overflow-x:hidden;overflow-y:auto;padding-bottom:52px;scroll-padding-bottom:52px;scrollbar-gutter:stable}
.code-editor[data-editor=css]:not([hidden]){height:527px}
.css-color-tools{position:relative;bottom:auto;flex:0 0 auto}
@media(max-width:620px){.code-panel{height:650px;max-height:650px}.code-editor:not([hidden]),.code-editor[data-editor=css]:not([hidden]){height:553px}}

@media(min-width:901px){
  .component-detail{width:calc(100% - 32px);max-width:1720px}
  .workbench{height:clamp(720px,78vh,900px);min-height:720px;grid-template-columns:minmax(0,1.08fr) minmax(520px,1fr)}
  .workbench-preview{min-height:0;height:100%}
  .preview-canvas{min-height:0;height:auto}
  .preview-canvas iframe{display:block;min-height:0;height:100%}
  .code-panel{height:100%;max-height:none}
  .code-editor:not([hidden]),.code-editor[data-editor=css]:not([hidden]){height:calc(100% - 97px)}
}

@media(max-width:900px){
  .component-detail{width:100%;padding-inline:16px}
  .component-detail__top{min-width:0}.component-identity__side{width:100%;min-width:0}
  .component-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
  .component-actions>*{min-width:0;justify-content:center}.component-actions .view-stat{grid-column:1/-1;width:auto}
  .workbench{width:100%;min-width:0}
  .preview-canvas{padding:18px}.preview-canvas iframe{width:100%;pointer-events:auto;touch-action:manipulation}
  .code-panel{width:100%;min-width:0;overflow:hidden}
  .editor-utility{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.editor-utility::-webkit-scrollbar{display:none}
  .editor-tabs{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.editor-tabs::-webkit-scrollbar{display:none}
  .code-editor__body{grid-template-columns:42px minmax(0,1fr)!important;width:100%;overflow:hidden}
  .code-surface{width:100%;min-width:0!important;overflow:hidden!important}
  .syntax-layer,.code-input{left:0!important;right:0!important;min-width:0!important;width:100%!important;max-width:100%!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .code-input{overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y}
  .css-color-palette{overscroll-behavior-x:contain}
}
@media(max-width:620px){
  .component-detail{padding:18px 12px 52px}.back-link{margin-bottom:12px}
  .component-identity__meta{gap:6px}.component-identity__meta span{font-size:10px}
  .component-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.component-actions button{width:100%}
  .workbench{border-radius:12px}.preview-toolbar{padding:10px 12px}.preview-color{width:100%}
  .preview-canvas{min-height:390px!important;padding:12px}.preview-canvas iframe{min-height:360px!important}
  .editor-utility{padding:7px}.editor-utility button{padding:7px 8px;font-size:10px}
  .editor-tabs button{min-width:112px;font-size:11px}.editor-tabs .language-icon{display:grid}
  .code-panel{height:620px;max-height:620px}.code-editor:not([hidden]),.code-editor[data-editor=css]:not([hidden]){height:523px}
  .line-numbers,.syntax-layer,.code-input{font-size:13px!important;line-height:1.65!important}
  .syntax-layer,.code-input{padding:14px 12px!important;padding-bottom:52px!important}
  .component-info{grid-template-columns:1fr}.component-community{grid-template-columns:1fr}
}

/* Copy is a floating editor action, not a banner above the source. */
.code-editor{position:relative}
.code-editor__header{position:absolute!important;z-index:7;top:10px!important;right:12px;width:auto;height:auto!important;padding:0!important;border:0!important;background:transparent!important;pointer-events:none}
.code-editor__header .editor-copy{margin:0;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.editor-copy svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.editor-copy span{display:inline}
.code-editor:not([hidden]) .syntax-layer,.code-editor:not([hidden]) .code-input{padding-top:16px!important;padding-right:132px!important;padding-bottom:96px!important}
.code-editor:not([hidden]) .code-input{scroll-padding-bottom:96px!important}
@media(max-width:620px){
  .code-editor__header{top:8px!important;right:8px}
  .code-editor__header .editor-copy{min-width:38px;justify-content:center;padding:8px;font-size:0}
  .code-editor__header .editor-copy span{display:none}
  .code-editor:not([hidden]) .syntax-layer,.code-editor:not([hidden]) .code-input{padding-right:54px!important;padding-bottom:120px!important}
  .code-editor:not([hidden]) .code-input{scroll-padding-bottom:120px!important}
}