*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--surface: #12121a;--border: #2a2a3a;--text: #e0e0f0;--text-muted: #8080a0;--accent: #7afcff;--accent2: #ff7eb3;--card-w: 180px;--card-h: 252px;--card-radius: 12px;--panel-w: 320px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:14px;line-height:1.5}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font:inherit}input[type=range]{accent-color:var(--accent);width:100%}select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font:inherit;width:100%}#app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--surface)}.logo{font-size:22px;font-weight:700;letter-spacing:.05em;background:linear-gradient(90deg,var(--accent2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-links{display:flex;gap:12px;align-items:center}main{flex:1;display:flex;gap:0;overflow:hidden}#showcase{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;gap:24px}.card-grid{display:grid;grid-template-columns:repeat(2,var(--card-w));grid-template-rows:repeat(2,var(--card-h));gap:20px}.holo-card{width:var(--card-w);height:var(--card-h);border-radius:var(--card-radius);cursor:pointer;border:2px solid var(--border);transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}.holo-card:hover{transform:scale(1.04);box-shadow:0 8px 32px #7afcff26}.holo-card.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 8px 32px #7afcff33}.card-label{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#fff;pointer-events:none}#settings{width:var(--panel-w);border-left:1px solid var(--border);background:var(--surface);overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:20px}.panel-section{display:flex;flex-direction:column;gap:12px}.panel-section h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding-bottom:4px;border-bottom:1px solid var(--border)}.field{display:flex;flex-direction:column;gap:4px}.field label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted)}.field label span{color:var(--accent);font-variant-numeric:tabular-nums}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:12px}.toggle{position:relative;width:36px;height:20px}.toggle input{opacity:0;width:0;height:0}.slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--border);border-radius:20px;cursor:pointer;transition:background .2s}.slider:before{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}.toggle input:checked+.slider{background:var(--accent)}.toggle input:checked+.slider:before{transform:translate(16px)}#snippet-section{border-top:1px solid var(--border);padding:16px 20px;background:var(--surface)}#snippet-section h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:8px}.snippet-wrapper{position:relative}pre{background:#0d0d14;border:1px solid var(--border);border-radius:8px;padding:12px;font-size:11px;line-height:1.6;overflow-x:auto;color:#c9d1d9;white-space:pre-wrap;word-break:break-all}.copy-btn{position:absolute;top:8px;right:8px;background:var(--border);color:var(--text);border:none;border-radius:4px;padding:3px 8px;font-size:11px;opacity:.7;transition:opacity .15s}.copy-btn:hover{opacity:1}footer{text-align:center;padding:12px;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border)}@media (max-width: 700px){main{flex-direction:column}#settings{width:100%;border-left:none;border-top:1px solid var(--border)}.card-grid{grid-template-columns:repeat(2,140px);grid-template-rows:repeat(2,196px);--card-w: 140px;--card-h: 196px}}