:root{--text:#94a3b8;--text-h:#e2e8f0;--text-dim:#64748b;--bg:#0c0e14;--bg-raised:#10131a;--surface:#151820;--surface-hover:#1c1f2a;--border:#1e2230;--border-strong:#2a2e3e;--accent:#818cf8;--accent-dim:#818cf81f;--accent-strong:#6366f1;--diff-changed-bg:#eab30814;--diff-added-text:#34d399;--diff-removed-text:#f87171;--mono:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--radius:10px;--radius-sm:6px;font:14px/1.5 var(--sans);color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root{--text:#475569;--text-h:#0f172a;--text-dim:#94a3b8;--bg:#f1f5f9;--bg-raised:#f8fafc;--surface:#fff;--surface-hover:#f8fafc;--border:#e2e8f0;--border-strong:#cbd5e1;--accent:#6366f1;--accent-dim:#6366f114;--accent-strong:#4f46e5;--diff-changed-bg:#eab3080f;--diff-added-text:#16a34a;--diff-removed-text:#dc2626;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}body{margin:0}#root{flex-direction:column;height:100svh;display:flex;overflow:hidden}h1,h2,h3{font-family:var(--sans);color:var(--text-h);font-weight:600}p{margin:0}code{font-family:var(--mono);background:var(--surface);color:var(--text-h);border-radius:4px;padding:2px 6px;font-size:12px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.tab-bar-wrapper{background:var(--bg-raised);position:relative}.tab-bar-wrapper:after{content:"";pointer-events:none;z-index:1;opacity:0;background:linear-gradient(to left, var(--bg-raised), transparent);width:32px;transition:opacity .2s;position:absolute;top:0;bottom:0;right:0}.tab-bar-wrapper.has-overflow:after{opacity:1}.tab-bar{border-bottom:1px solid var(--border);scrollbar-width:none;-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.tab-bar::-webkit-scrollbar{display:none}.tab{font-family:var(--mono);color:var(--text-dim);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-bottom:2px solid #0000;padding:8px 14px;font-size:11px;transition:all .15s}.tab:hover{color:var(--text);background:var(--surface)}.tab-active{color:var(--accent);border-bottom-color:var(--accent)}.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:2px}@media (width<=640px){.tab{padding:6px 10px;font-size:10px}}.property-table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:12px;line-height:1.5}.property-table th{background:var(--bg-raised);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;padding:6px 10px;font-size:10px;font-weight:600}.property-table td{border-bottom:1px solid var(--border);vertical-align:top;padding:3px 10px}.property-table tbody tr{transition:background .1s}.property-table tbody tr:hover{background:var(--accent-dim)}.prop-key{color:var(--text-h);white-space:nowrap;width:1%;font-weight:500}.prop-value{color:var(--text);word-break:break-all}.diff-changed,.diff-changed:hover{background:var(--diff-changed-bg)}.diff-removed{color:var(--diff-removed-text);text-decoration:line-through}.diff-added{color:var(--diff-added-text)}@media (width<=640px){.property-table thead{display:none}.property-table tr{border-bottom:1px solid var(--border);padding:4px 0;display:block}.property-table td{border-bottom:none;padding:1px 10px;display:block}.prop-key{color:var(--text-dim);margin-bottom:1px;font-size:10px}}.canvas-preview,.canvas-compare{margin-top:16px}.canvas-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:6px;font-size:10px;font-weight:600}.canvas-preview img,.canvas-compare img{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);max-width:100%;display:block}.canvas-compare{gap:20px;display:flex}.canvas-compare>div{flex:1}@media (width<=640px){.canvas-compare{flex-direction:column}}.fonts-summary{font-family:var(--mono);color:var(--text-dim);margin:0 0 12px;font-size:12px}.fonts-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px;display:grid}.font-item{border-radius:4px;align-items:center;gap:8px;padding:3px 8px;font-size:12px;transition:background .1s;display:flex}.font-item:hover{background:var(--accent-dim)}.font-detected{color:var(--text)}.font-not-detected{color:var(--text-dim);opacity:.5}.font-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.dot-yes{background:#34d399}.dot-no{background:var(--border-strong)}.font-name{font-family:var(--mono);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (prefers-color-scheme:light){.dot-yes{background:#16a34a}}.permissions-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px;display:grid}.permission-badge{border-radius:4px;align-items:center;gap:8px;padding:4px 10px;font-size:12px;transition:background .1s;display:flex}.permission-badge:hover{background:var(--surface-hover)}.badge-available{color:#34d399}.badge-unavailable{color:var(--text-dim)}.badge-icon{text-align:center;width:16px;font-size:12px;font-weight:700}.badge-name{font-family:var(--mono);font-size:12px}@media (prefers-color-scheme:light){.badge-available{color:#16a34a}}.app{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.app-header{border-bottom:1px solid var(--border);background:var(--bg-raised);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:12px;padding:10px 16px;display:flex}.app-header h1{letter-spacing:-.2px;white-space:nowrap;margin:0;font-size:14px;font-weight:600}.header-sep{background:var(--border);flex-shrink:0;width:1px;height:16px}.header-spacer{flex:1}.tab-content{flex:1;min-height:0;padding:0;overflow:auto}.tab-inner{padding:16px 20px;animation:.15s ease-out tab-fade-in}@keyframes tab-fade-in{0%{opacity:0}to{opacity:1}}.loading{flex-direction:column;height:100svh;display:flex;overflow:hidden}.loading-header{border-bottom:1px solid var(--border);background:var(--bg-raised);align-items:center;gap:12px;padding:10px 16px;display:flex}.loading-tabs{border-bottom:1px solid var(--border);background:var(--bg-raised);gap:0;display:flex}.loading-content{flex:1;padding:16px 20px}.skeleton{background:var(--surface);border-radius:4px;position:relative;overflow:hidden}.skeleton:after{content:"";background:linear-gradient(90deg, transparent, var(--surface-hover), transparent);animation:1.5s infinite skeleton-shimmer;position:absolute;inset:0}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-title{width:180px;height:16px}.skeleton-buttons{gap:8px;margin-left:auto;display:flex}.skeleton-btn{border-radius:var(--radius-sm);width:90px;height:24px}.skeleton-tab{width:64px;height:12px;margin:10px 16px}.skeleton-row{border-bottom:1px solid var(--border);gap:20px;padding:8px 0;display:flex}.skeleton-key{flex-shrink:0;width:140px;height:14px}.skeleton-value{flex:1;height:14px}.filter-pill{font-family:var(--mono);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .15s}.filter-pill:hover{border-color:var(--border-strong);color:var(--text)}.filter-pill.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.filter-pill.disabled{opacity:.35;cursor:not-allowed}.webgl-switcher{gap:4px;margin-bottom:12px;display:flex}.tab-error{color:var(--text-dim);padding:16px;font-size:13px}.snapshot-controls{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.snapshot-controls button{font-family:var(--sans);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;padding:4px 12px;font-size:12px;font-weight:500;transition:all .15s}.snapshot-controls button:hover{border-color:var(--border-strong);color:var(--text-h);background:var(--surface-hover)}.snapshot-controls button:active{transform:scale(.97)}.snapshot-controls button:first-child{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.snapshot-controls button:first-child:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.snapshot-controls .active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.snapshot-time{font-family:var(--mono);color:var(--text-dim);white-space:nowrap;font-size:11px}.section-heading{text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin:20px 0 8px;font-size:10px;font-weight:600}.section-heading:first-child{margin-top:0}.extensions-section{margin-top:20px}.extensions-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;margin:0;padding:0;list-style:none;display:grid}.extension-item{font-family:var(--mono);color:var(--text);border-radius:4px;padding:3px 8px;font-size:12px;transition:background .1s}.extension-item:hover{background:var(--accent-dim);color:var(--text-h)}@media (width<=900px){.app-header{gap:8px}}@media (width<=600px){.app-header h1{font-size:13px}.tab-inner{padding:12px}}