:root{--twc-primary:#0ea5e9;--twc-primary-hover:#0284c7;--twc-text:#1e293b;--twc-text-muted:#64748b;--twc-bg:#fff;--twc-bg-secondary:#f8fafc;--twc-border:#e2e8f0;--twc-border-hover:#cbd5e1;--twc-shadow:0 1px 3px #0000001a;--twc-shadow-lg:0 8px 24px #0000001f;--twc-radius:8px;--twc-radius-lg:12px;--twc-radius-xl:16px;--twc-radius-full:9999px}._twc-container{gap:var(--main-space-6);flex-direction:column;max-width:1200px;margin:0 auto;display:flex}@media (max-width:640px){._twc-container{padding-left:var(--main-space-3);padding-right:var(--main-space-3);gap:var(--main-space-4)}}._twc-header{gap:var(--main-space-4);padding:var(--main-space-4);background:var(--twc-bg);border-radius:var(--twc-radius-lg);border-style:solid;border-width:1px;border-color:var(--twc-border);box-shadow:var(--twc-shadow);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}._twc-search-wrapper{flex:1;min-width:200px;max-width:400px;position:relative}._twc-search-icon{left:var(--main-space-3);color:var(--twc-text-muted);pointer-events:none;display:flex;position:absolute;top:50%;transform:translateY(-50%)}._twc-search{width:100%;padding:var(--main-space-2) var(--main-space-3) var(--main-space-2) var(--main-space-10);font-size:var(--main-text-sm);color:var(--twc-text);background:var(--twc-bg-secondary);border-style:solid;border-width:1.5px;border-color:var(--twc-border);border-radius:var(--twc-radius);outline:none;transition:border-color .15s,box-shadow .15s}._twc-search:focus{border-color:var(--twc-primary);box-shadow:0 0 0 3px #0ea5e926}._twc-search::placeholder{color:var(--twc-text-muted)}._twc-controls{gap:var(--main-space-3);flex-wrap:wrap;align-items:center;display:flex}._twc-select{padding:var(--main-space-2) var(--main-space-3);font-size:var(--main-text-sm);color:var(--twc-text);background:var(--twc-bg-secondary);border-style:solid;border-width:1.5px;border-color:var(--twc-border);border-radius:var(--twc-radius);cursor:pointer;outline:none;transition:border-color .15s}._twc-select:focus{border-color:var(--twc-primary)}._twc-btn{align-items:center;gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-3);font-size:var(--main-text-sm);border-radius:var(--twc-radius);cursor:pointer;border:none;font-weight:500;transition:opacity .15s,background-color .15s;display:inline-flex}._twc-btn-primary{background:var(--twc-primary);color:#fff}._twc-btn-primary:hover{opacity:.9}._twc-btn-secondary{background:var(--twc-bg-secondary);color:var(--twc-text);border-style:solid;border-width:1px;border-color:var(--twc-border)}._twc-btn-secondary:hover{background:var(--twc-border)}._twc-btn-ghost{color:var(--twc-text-muted);padding:var(--main-space-1);background:0 0}._twc-btn-ghost:hover{color:var(--twc-text)}._twc-favorites-count{min-width:20px;height:20px;font-size:var(--main-text-xs);color:#fff;background:var(--twc-primary);border-radius:var(--twc-radius-full);justify-content:center;align-items:center;padding:0 6px;font-weight:600;display:inline-flex}@media (max-width:768px){._twc-header{flex-direction:column;align-items:stretch}._twc-search-wrapper{max-width:none}._twc-controls{justify-content:space-between}}@media (max-width:480px){._twc-controls{flex-direction:column;align-items:stretch}._twc-filter-group,._twc-format-group,._twc-select{width:100%}}._twc-grid{gap:var(--main-space-1);flex-direction:column;min-height:400px;display:flex}._twc-family{align-items:stretch;gap:2px;display:flex}._twc-family-name{width:80px;min-width:80px;padding:var(--main-space-2) var(--main-space-3);font-size:var(--main-text-sm);color:var(--twc-text);background:var(--twc-bg);border-radius:var(--twc-radius) 0 0 var(--twc-radius);text-transform:capitalize;align-items:center;font-weight:600;display:flex}._twc-shades{flex:1;gap:2px;display:flex}._twc-shade{aspect-ratio:1;cursor:pointer;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:48px;padding:0;transition:box-shadow .15s;display:flex;position:relative}._twc-shade:first-child{border-radius:0}._twc-shade:last-child{border-radius:0 var(--twc-radius) var(--twc-radius) 0}._twc-shade:hover{box-shadow:0 0 0 2px var(--twc-bg), 0 0 0 4px var(--twc-text);z-index:10}._twc-shade-number{opacity:0;font-size:10px;font-weight:600;line-height:1;transition:opacity .15s}._twc-shade:hover ._twc-shade-number{opacity:1}._twc-shade-hex{opacity:0;font-size:9px;font-weight:500;line-height:1;transition:opacity .15s}._twc-shade:hover ._twc-shade-hex{opacity:1}._twc-shade[data-light=true] ._twc-shade-number,._twc-shade[data-light=true] ._twc-shade-hex{color:#fff}._twc-shade[data-light=false] ._twc-shade-number,._twc-shade[data-light=false] ._twc-shade-hex{color:#1e293b}._twc-shade-favorite{opacity:0;font-size:10px;transition:opacity .15s;position:absolute;top:4px;right:4px}._twc-shade:hover ._twc-shade-favorite,._twc-shade[data-favorited=true] ._twc-shade-favorite{opacity:1}._twc-shade[data-favorited=true] ._twc-shade-favorite{color:#fbbf24}._twc-empty{padding:var(--main-space-12);color:var(--twc-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}._twc-empty-icon{margin-bottom:var(--main-space-4);opacity:.5;font-size:48px}._twc-empty-text{font-size:var(--main-text-base)}@media (max-width:900px){._twc-family{-webkit-overflow-scrolling:touch;overflow-x:auto}._twc-family-name{z-index:5;border-radius:var(--twc-radius);position:sticky;left:0}._twc-shade{min-width:60px}}@media (max-width:640px){._twc-family-name{width:60px;min-width:60px;font-size:var(--main-text-xs);padding:var(--main-space-1) var(--main-space-2)}._twc-shade{min-width:50px;min-height:40px}._twc-shade-number{font-size:9px}._twc-shade-hex{display:none}}._twc-modal{z-index:1000;padding:var(--main-space-4);justify-content:center;align-items:center;display:none;position:fixed;top:0;bottom:0;left:0;right:0}._twc-modal.is-open{display:flex}._twc-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;position:absolute;top:0;bottom:0;left:0;right:0}._twc-modal-content{background:var(--twc-bg);border-radius:var(--twc-radius-xl);width:100%;max-width:420px;box-shadow:var(--twc-shadow-lg);position:relative;overflow:hidden}._twc-modal-header{padding:var(--main-space-4) var(--main-space-5);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--twc-border);justify-content:space-between;align-items:center;display:flex}._twc-modal-title{font-size:var(--main-text-lg);color:var(--twc-text);margin:0;font-weight:600}._twc-modal-body{padding:var(--main-space-5);gap:var(--main-space-5);flex-direction:column;display:flex}._twc-modal-preview{border-radius:var(--twc-radius-lg);border-style:solid;border-width:1px;border-color:var(--twc-border);width:100%;height:120px}._twc-modal-info{gap:var(--main-space-3);flex-direction:column;display:flex}._twc-info-row{justify-content:space-between;align-items:center;gap:var(--main-space-3);display:flex}._twc-info-label{font-size:var(--main-text-sm);color:var(--twc-text-muted);font-weight:500}._twc-info-value-wrapper{align-items:center;gap:var(--main-space-2);display:flex}._twc-info-value{font-size:var(--main-text-sm);font-family:var(--main-font-mono);color:var(--twc-text);background:var(--twc-bg-secondary);padding:var(--main-space-1) var(--main-space-2);border-radius:var(--twc-radius)}._twc-copy-btn{border-radius:var(--twc-radius);width:28px;height:28px;color:var(--twc-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:flex}._twc-copy-btn:hover{color:var(--twc-text);background:var(--twc-bg-secondary)}._twc-copy-btn.is-copied{color:#10b981}._twc-modal-shades{gap:var(--main-space-3);flex-direction:column;display:flex}._twc-shades-label{font-size:var(--main-text-sm);color:var(--twc-text-muted);font-weight:500}._twc-shades-grid{gap:4px;display:flex}._twc-shade-btn{aspect-ratio:1;border-radius:var(--twc-radius);cursor:pointer;border:none;flex:1;min-height:32px;transition:box-shadow .15s;position:relative}._twc-shade-btn:hover{box-shadow:0 0 0 2px var(--twc-bg), 0 0 0 3px var(--twc-text)}._twc-shade-btn.is-active{box-shadow:0 0 0 2px var(--twc-bg), 0 0 0 3px var(--twc-primary)}._twc-shade-btn-label{color:var(--twc-text-muted);white-space:nowrap;font-size:9px;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}._twc-modal-footer{padding:var(--main-space-4) var(--main-space-5);border-top-style:solid;border-top-width:1px;border-top-color:var(--twc-border);justify-content:center;display:flex}._twc-modal-footer ._twc-btn{justify-content:center;min-width:160px}@media (max-width:480px){._twc-modal-content{max-width:none;margin:var(--main-space-4)}._twc-modal-preview{height:100px}}._twc-favorites-panel{background:var(--twc-bg);z-index:1000;flex-direction:column;width:100%;max-width:360px;transition:transform .3s;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-4px 0 24px #00000026}._twc-favorites-panel.is-open{transform:translate(0)}._twc-favorites-header{padding:var(--main-space-4) var(--main-space-5);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--twc-border);justify-content:space-between;align-items:center;display:flex}._twc-favorites-title{font-size:var(--main-text-lg);color:var(--twc-text);margin:0;font-weight:600}._twc-favorites-content{padding:var(--main-space-4);flex:1;overflow-y:auto}._twc-favorites-grid{gap:var(--main-space-2);grid-template-columns:repeat(4,1fr);display:grid}._twc-favorite-item{aspect-ratio:1;border-radius:var(--twc-radius);cursor:pointer;border:none;padding:0;transition:box-shadow .15s;position:relative}._twc-favorite-item:hover{box-shadow:0 0 0 2px var(--twc-bg), 0 0 0 3px var(--twc-text)}._twc-favorite-remove{color:#fff;border-radius:var(--twc-radius-full);opacity:0;cursor:pointer;background:#00000080;border:none;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;transition:opacity .15s;display:flex;position:absolute;top:2px;right:2px}._twc-favorite-item:hover ._twc-favorite-remove{opacity:1}._twc-favorite-remove:hover{background:#ef4444cc}._twc-favorite-name{text-align:center;color:#fff;opacity:0;white-space:nowrap;text-overflow:ellipsis;background:#00000080;border-radius:4px;padding:2px;font-size:8px;font-weight:500;transition:opacity .15s;position:absolute;bottom:2px;left:2px;right:2px;overflow:hidden}._twc-favorite-item:hover ._twc-favorite-name{opacity:1}._twc-favorites-empty{padding:var(--main-space-8);color:var(--twc-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}._twc-favorites-empty-icon{margin-bottom:var(--main-space-3);opacity:.5;font-size:32px}._twc-favorites-actions{gap:var(--main-space-3);padding:var(--main-space-4) var(--main-space-5);border-top-style:solid;border-top-width:1px;border-top-color:var(--twc-border);display:flex}._twc-favorites-actions ._twc-btn{flex:1;justify-content:center}._twc-favorites-backdrop{z-index:999;opacity:0;visibility:hidden;background:#0000004d;transition:opacity .3s,visibility .3s;position:fixed;top:0;bottom:0;left:0;right:0}._twc-favorites-backdrop.is-open{opacity:1;visibility:visible}@media (max-width:480px){._twc-favorites-panel{max-width:none}._twc-favorites-grid{grid-template-columns:repeat(3,1fr)}}