html{scroll-behavior:smooth}:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-primary: #0b0b10;--bg-secondary: #14141b;--bg-tertiary: #1c1c26;--bg-elevated: #1f1f2a;--text-primary: #ffffff;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-inverse: #000000;--border-color: #2a2a35;--border-strong: #3f3f46;--accent-color: #7c5cff;--accent-hover: #6a47ff;--accent-soft: rgba(124, 92, 255, .14);--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--gradient-accent: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%);--gradient-hero: radial-gradient( 1200px 600px at 10% -10%, rgba(124, 92, 255, .25), transparent 60% ), radial-gradient( 900px 500px at 90% 0%, rgba(34, 211, 238, .18), transparent 60% );--shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);--shadow-md: 0 8px 24px rgba(0, 0, 0, .35);--shadow-glow: 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 40px rgba(124, 92, 255, .18);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-8: 48px;--space-10: 64px}[data-theme=light]{--bg-primary: #f7f7fb;--bg-secondary: #ffffff;--bg-tertiary: #f1f2f6;--bg-elevated: #ffffff;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #64748b;--text-inverse: #ffffff;--border-color: #e5e7eb;--border-strong: #cbd5e1;--accent-color: #6d28d9;--accent-hover: #5b21b6;--accent-soft: rgba(109, 40, 217, .1);--gradient-hero: radial-gradient( 1200px 600px at 10% -10%, rgba(109, 40, 217, .18), transparent 60% ), radial-gradient( 900px 500px at 90% 0%, rgba(14, 165, 233, .15), transparent 60% );--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);--shadow-md: 0 8px 24px rgba(15, 23, 42, .08);--shadow-glow: 0 0 0 1px rgba(15, 23, 42, .04), 0 10px 40px rgba(109, 40, 217, .12)}body{margin:0;padding:0;display:block;min-width:320px;min-height:100vh;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s,color .3s;-webkit-tap-highlight-color:transparent}#root{width:100%;min-height:100vh;margin:0;padding:0}*,*:before,*:after{box-sizing:border-box}a{color:inherit}button{font-family:inherit}:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;border-radius:6px}.container{max-width:800px;margin:0 auto;padding:2rem;color:var(--text-primary)}.container h1{font-size:2.5rem;margin-bottom:2rem;letter-spacing:-.02em}.container h2{font-size:1.6rem;margin-top:2rem;margin-bottom:1rem;letter-spacing:-.01em}.container p{line-height:1.8;color:var(--text-secondary);margin-bottom:1.5rem}.container ul{list-style-type:disc;padding-left:1.5rem;color:var(--text-secondary);margin-bottom:1.5rem}.container li{margin-bottom:.5rem}.bs-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.site-header{height:64px;background-color:color-mix(in srgb,var(--bg-secondary) 80%,transparent);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border-color);display:flex;align-items:center;position:sticky;top:0;z-index:50;width:100%}.header-content{max-width:1200px;margin:0 auto;padding:0 1.5rem;width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem}.logo-container{display:flex;align-items:center;gap:.6rem;color:var(--text-primary);text-decoration:none}.logo-mark{width:32px;height:32px;border-radius:8px;background:var(--gradient-accent);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm)}.logo-text{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}.logo-text .logo-accent{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent}.header-nav{display:flex;gap:1.25rem;align-items:center}.header-nav a{color:var(--text-secondary);font-size:.9rem;transition:color .2s;text-decoration:none;padding:.35rem .1rem;border-radius:6px}.header-nav a:hover{color:var(--text-primary)}.header-nav a.nav-cta{background:var(--accent-soft);color:var(--text-primary);padding:.45rem .85rem;border:1px solid transparent;font-weight:600}.header-nav a.nav-cta:hover{border-color:var(--accent-color)}.icon-btn{background:transparent;border:1px solid transparent;cursor:pointer;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;padding:.5rem;border-radius:10px;transition:all .2s}.icon-btn:hover{color:var(--text-primary);background:var(--bg-tertiary);border-color:var(--border-color)}.language-switcher{position:relative}.language-select{background-color:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color);padding:.35rem .55rem;border-radius:8px;font-size:.85rem;cursor:pointer;transition:all .2s;outline:none}.language-select:hover,.language-select:focus{color:var(--text-primary);border-color:var(--border-strong)}.language-select option{background-color:var(--bg-secondary);color:var(--text-primary)}.nav-tools{position:relative}.nav-tools-trigger{display:inline-flex;align-items:center;gap:4px;background:transparent;border:none;color:var(--text-secondary);font-size:.9rem;font-family:inherit;cursor:pointer;padding:.35rem .1rem;border-radius:6px}.nav-tools-trigger:hover{color:var(--text-primary)}.nav-tools-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:320px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-lg, 0 18px 60px rgba(0, 0, 0, .35));padding:8px;display:grid;gap:2px;z-index:60}.nav-tools-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text-primary);font-size:.9rem}.nav-tools-menu a:hover{background:var(--bg-tertiary)}.nav-tools-name{font-weight:600}.nav-tools-summary{font-size:.78rem;color:var(--text-secondary);line-height:1.35}.nav-toggle{display:none}@media(max-width:860px){.nav-tools-menu{position:static;min-width:0;box-shadow:none;border:1px solid var(--border-color);margin-top:4px}.nav-tools-trigger{padding:.75rem .5rem;width:100%;justify-content:space-between;border-radius:8px}.nav-tools-trigger:hover{background:var(--bg-tertiary)}.nav-toggle{display:inline-flex}.header-nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:.5rem;padding:1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.header-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}.header-nav a{padding:.75rem .5rem;border-radius:8px}.header-nav a:hover{background:var(--bg-tertiary)}}.site-footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);padding:3rem 1.5rem 1.5rem;margin-top:4rem}.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}.footer-brand .footer-logo{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}.footer-mark{width:28px;height:28px;border-radius:8px;background:var(--gradient-accent);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm)}.footer-tag{margin-top:.75rem;color:var(--text-secondary);max-width:420px;line-height:1.6;font-size:.925rem}.footer-col{display:flex;flex-direction:column;gap:.5rem}.footer-col h4{margin:0 0 .25rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.footer-col a{color:var(--text-secondary);text-decoration:none;font-size:.925rem;transition:color .2s}.footer-col a:hover{color:var(--text-primary)}.footer-bottom{max-width:1200px;margin:2rem auto 0;padding-top:1.25rem;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:.85rem;text-align:center}@media(max-width:720px){.footer-inner{grid-template-columns:1fr;gap:1.5rem}}.screen-tool-wrapper{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 1rem;display:flex;flex-direction:column;gap:2rem}.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.section-head h2{margin:0;font-size:1.15rem;font-weight:700;color:var(--text-primary);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.5rem}.section-actions{display:inline-flex;gap:.5rem;flex-wrap:wrap}.chip-toggle{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s}.chip-toggle:hover{color:var(--text-primary);border-color:var(--border-strong)}.chip-toggle.active{background:var(--accent-soft);color:var(--text-primary);border-color:var(--accent-color)}.chip-toggle.primary{background:var(--gradient-accent);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}.preview-container{width:100%;max-width:900px;margin:0 auto;aspect-ratio:16 / 9;background-color:#000;border-radius:var(--radius-lg);position:relative;box-shadow:var(--shadow-md),var(--shadow-glow);border:1px solid var(--border-color);transition:background-color .3s ease;cursor:pointer;overflow:hidden}.preview-container:hover .preview-overlay{opacity:1}.preview-overlay{position:absolute;inset:0;background:#00000059;display:grid;place-items:center;opacity:0;transition:opacity .3s ease;color:#fff;font-weight:600;font-size:1rem;pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,.5)}.preview-container.fullscreen-mode{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;z-index:9999;border-radius:0;cursor:none;aspect-ratio:auto}.preview-container.fullscreen-mode .preview-overlay,.preview-container.fullscreen-mode .hex-badge{display:none}.hex-badge{position:absolute;top:1rem;right:1rem;background:#ffffffe6;color:#000;padding:4px 8px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;font-weight:500;pointer-events:none;z-index:2}.fullscreen-hint{margin-top:.75rem;color:var(--text-secondary);font-size:.85rem;text-align:center}.pattern-checker,.pattern-gradient,.pattern-rgbbars{position:absolute;inset:0;pointer-events:none}.pattern-checker{background-image:conic-gradient(#000 25%,#fff 25% 50%,#000 50% 75%,#fff 75%);background-size:40px 40px}.pattern-gradient{background:linear-gradient(90deg,#000,#fff)}.pattern-rgbbars{background:linear-gradient(90deg,red 0 33.33%,#0f0 33.33% 66.66%,#00f 66.66% 100%)}.color-section,.settings-section{background:var(--bg-secondary);padding:1.25rem 1.5rem 1.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.pattern-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.pill-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .15s}.pill-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}.pill-btn.active{background:var(--accent-soft);color:var(--text-primary);border-color:var(--accent-color)}.color-grid{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.color-btn{padding:.5rem 1.25rem;border-radius:10px;border:1px solid var(--border-color);font-weight:500;cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm);background-color:var(--bg-tertiary);color:var(--text-primary)}.color-btn:hover{transform:translateY(-1px)}.color-btn.active{box-shadow:0 0 0 2px var(--bg-secondary),0 0 0 4px var(--accent-color);border-color:transparent}.custom-color-wrapper{display:inline-flex;align-items:center;gap:.5rem;background:var(--bg-tertiary);color:var(--text-primary);padding:.4rem .75rem;border-radius:10px;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--border-color);font-size:.85rem}.color-picker-input{width:24px;height:24px;padding:0;border:none;border-radius:4px;cursor:pointer;background:none}.settings-section{padding:0}.tabs{display:flex;gap:.25rem;padding:.5rem .75rem 0;border-bottom:1px solid var(--border-color)}.tab-btn{padding:.75rem 1rem;background:transparent;border:none;cursor:pointer;font-weight:500;color:var(--text-secondary);position:relative;top:1px;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--text-primary);border-bottom-color:var(--accent-color)}.settings-panel{padding:1.5rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-primary);font-size:.85rem}.input-row{display:flex;gap:1rem}.input-wrapper{background:var(--bg-tertiary);padding:.65rem .75rem;border-radius:10px;display:flex;align-items:center;flex:1;border:1px solid var(--border-color)}.input-wrapper input,.input-wrapper select{width:100%;background:transparent;border:none;outline:none;font-size:.95rem;color:var(--text-primary)}.unit-label{color:var(--text-secondary);font-size:.8rem;margin-left:.5rem}.action-btn{width:100%;padding:.85rem;background:var(--gradient-accent);color:#fff;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .15s;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;box-shadow:var(--shadow-sm)}.action-btn:hover{transform:translateY(-1px)}.refresh-pattern{position:absolute;inset:0;z-index:10;background:linear-gradient(45deg,#000 25%,#fff 25% 50%,#000 50% 75%,#fff 75%);background-size:40px 40px;animation:move-pattern .2s linear infinite}@keyframes move-pattern{0%{background-position:0 0}to{background-position:40px 40px}}.warning-note{background:#dc26261a;border-left:4px solid #dc2626;padding:.75rem;border-radius:0 8px 8px 0;font-size:.8rem;color:var(--text-primary);margin-top:.5rem}.protection-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:1.25rem;margin-bottom:1rem}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:.75rem}.card-header h3{margin:0;font-size:1rem;font-weight:600}.description{color:var(--text-secondary);font-size:.85rem;margin-bottom:.75rem;line-height:1.5}.toggle-btn{padding:.4rem .85rem;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-weight:600;cursor:pointer;transition:all .2s;font-size:.85rem}.toggle-btn.active{background:var(--success);color:#fff;border-color:var(--success)}.preset-row{display:flex;gap:.5rem;flex-wrap:wrap}.preset-btn{padding:.35rem .7rem;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-size:.85rem}.preset-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.range-input{width:100%;margin-top:.5rem;cursor:pointer;accent-color:var(--accent-color)}.info-note{background:var(--accent-soft);border-left:4px solid var(--accent-color);padding:.9rem;border-radius:0 8px 8px 0;font-size:.85rem;color:var(--text-primary)}@media(max-width:768px){.screen-tool-wrapper{padding:1rem}.color-grid{justify-content:flex-start}.input-row{flex-direction:column}.tabs{overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}}.info-section{padding:4rem 1.5rem;background-color:var(--bg-primary);color:var(--text-primary)}.info-container{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:6rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-card{background:var(--bg-secondary);padding:2rem;border-radius:16px;border:1px solid var(--border-color);transition:transform .2s}.feature-card:hover{transform:translateY(-5px);border-color:var(--text-secondary)}.feature-icon{margin-bottom:1.5rem;color:var(--text-primary);background:var(--bg-tertiary);width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:12px}.feature-card h3{margin:0 0 1rem;color:var(--text-primary);font-size:1.25rem}.feature-card p{margin:0;line-height:1.6;color:var(--text-secondary)}.content-block{text-align:center;max-width:800px;margin:0 auto}.content-block h2,.faq-section h2{font-size:2.5rem;color:var(--text-primary);margin-bottom:1.5rem}.content-block p{font-size:1.1rem;line-height:1.8;color:var(--text-secondary);margin-bottom:1.5rem}.faq-section{text-align:center}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem;text-align:left}.faq-item{background:var(--bg-secondary);padding:2rem;border-radius:12px;border:1px solid var(--border-color)}.faq-item h4{margin:0 0 .75rem;color:var(--text-primary);font-size:1.1rem}.faq-item p{margin:0;color:var(--text-secondary);line-height:1.6}@media(max-width:768px){.info-section{padding:3rem 1rem}.info-container{gap:4rem}.features-grid{grid-template-columns:1fr;gap:1.5rem}.content-block h2,.faq-section h2{font-size:2rem}.faq-grid{grid-template-columns:1fr}}.tools-grid-section{padding:56px 20px;background:var(--bg-primary)}.tools-grid-inner{max-width:1100px;margin:0 auto}.tools-grid-head{text-align:center;margin-bottom:28px}.tools-grid-head h2{font-size:clamp(24px,3vw,32px);margin:0 0 8px;letter-spacing:-.01em}.tools-grid-head p{max-width:640px;margin:0 auto;color:var(--text-secondary);font-size:15px;line-height:1.55}.tools-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.tools-grid-card{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:14px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);text-decoration:none;transition:border-color .15s ease,transform .15s ease;height:100%}.tools-grid-card:hover{border-color:var(--accent-color, #7c5cff);transform:translateY(-2px)}.tools-grid-name{font-weight:700;font-size:16px}.tools-grid-summary{font-size:13.5px;color:var(--text-secondary);line-height:1.45;flex:1}.tools-grid-cta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--accent-color, #7c5cff);margin-top:8px}.bs-hero{position:relative;padding:4.5rem 1.5rem 2.5rem;overflow:hidden}.bs-hero-glow{position:absolute;inset:0;pointer-events:none;background:var(--gradient-hero);z-index:0}.bs-hero-inner{position:relative;z-index:1;max-width:960px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.bs-hero-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:999px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);font-size:.78rem;letter-spacing:.01em;box-shadow:var(--shadow-sm)}.bs-hero-title{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1;letter-spacing:-.03em;margin:0;color:var(--text-primary);font-weight:800}.bs-hero-grad{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent}.bs-hero-sub{margin:0;max-width:680px;font-size:1.05rem;line-height:1.65;color:var(--text-secondary)}.bs-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem}.bs-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;border-radius:12px;border:1px solid transparent;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;transition:transform .15s ease,background .2s,border-color .2s,box-shadow .2s}.bs-btn:hover{transform:translateY(-1px)}.bs-btn-primary{background:var(--gradient-accent);color:#fff;box-shadow:var(--shadow-glow)}.bs-btn-primary:hover{filter:brightness(1.05)}.bs-btn-secondary{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)}.bs-btn-secondary:hover{border-color:var(--border-strong)}.bs-hero-chips{list-style:none;padding:0;margin:.75rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.bs-hero-chips li{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);font-size:.8rem}@media(max-width:640px){.bs-hero{padding:3rem 1rem 1.5rem}.bs-btn{padding:.75rem 1rem;font-size:.9rem}}.blog-page{padding-bottom:4rem}.blog-grid{display:grid;grid-template-columns:1fr;gap:2rem}.blog-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.5rem;padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.blog-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.blog-card h2{font-size:1.5rem;margin-top:0;margin-bottom:.5rem;color:var(--text-primary)}.blog-card-link{text-decoration:none;color:inherit}.blog-card-link:hover h2{color:var(--accent-color)}.blog-meta{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.blog-date:after{content:" • ";margin:0 .5rem}.blog-excerpt{color:var(--text-secondary);margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.read-more{display:inline-block;color:var(--accent-color);text-decoration:none;font-weight:500}.read-more:hover{text-decoration:underline}.blog-post-page{max-width:800px}.back-link{display:inline-block;margin-bottom:2rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem}.back-link:hover{color:var(--accent-color)}.blog-post-header{margin-bottom:2rem;border-bottom:1px solid var(--border-color);padding-bottom:2rem}.blog-post-header h1{margin-bottom:1rem;line-height:1.2}.blog-content{line-height:1.8;color:var(--text-secondary)}.blog-content h2{font-size:1.8rem;margin-top:3rem;margin-bottom:1.5rem;color:var(--text-primary)}.blog-content h3{font-size:1.4rem;margin-top:2rem;margin-bottom:1rem;color:var(--text-primary)}.blog-content p{margin-bottom:1.5rem}.blog-content ul,.blog-content ol{margin-bottom:1.5rem;padding-left:1.5rem}.blog-content li{margin-bottom:.5rem}.blog-content strong{color:var(--text-primary)}.blog-content a{color:var(--accent-color);text-decoration:none}.blog-content a:hover{text-decoration:underline}.related-posts{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-color, #333)}.related-posts h2{font-size:1.5rem;margin-bottom:1.5rem;color:var(--text-color, #fff)}.related-posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.related-post-card{background:var(--card-bg, #1a1a1a);border:1px solid var(--border-color, #333);border-radius:8px;padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.related-post-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.related-post-card a{text-decoration:none;color:inherit;display:block}.related-post-card h3{font-size:1.1rem;margin-bottom:.75rem;color:var(--text-color, #fff);line-height:1.4}.related-post-card p{font-size:.9rem;color:var(--text-secondary, #999);line-height:1.6;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.related-post-date{font-size:.85rem;color:var(--text-secondary, #666)}@media(max-width:768px){.related-posts-grid{grid-template-columns:1fr}}.diag-page{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem 3rem}.diag-header{text-align:center;margin-bottom:2rem}.diag-header h1{font-size:clamp(1.8rem,3.5vw,2.4rem);margin:0 0 .5rem;letter-spacing:-.02em}.diag-header .diag-sub{color:var(--text-secondary);max-width:640px;margin:0 auto;line-height:1.6}.diag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.diag-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.25rem 1.25rem 1rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s}.diag-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}.diag-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}.diag-card-title{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);font-size:1rem}.diag-card-icon{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent-color);display:grid;place-items:center}.diag-card-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5;margin:0}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary)}.badge.ok{border-color:#22c55e66;color:#86efac;background:#22c55e14}[data-theme=light] .badge.ok{color:#166534;background:#22c55e1f}.badge.warn{border-color:#f59e0b66;color:#fbbf24;background:#f59e0b14}.badge.bad{border-color:#ef444466;color:#fca5a5;background:#ef444414}.kv-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:max-content 1fr;gap:.35rem .75rem;font-size:.88rem}.kv-list dt{color:var(--text-muted)}.kv-list dd{margin:0;color:var(--text-primary);word-break:break-word;font-variant-numeric:tabular-nums}.kv-list dd .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}.diag-action{display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;padding:.45rem .85rem;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;font-size:.85rem;font-weight:500;transition:all .15s}.diag-action:hover{border-color:var(--accent-color);background:var(--accent-soft)}.diag-big{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent}.diag-unit{color:var(--text-secondary);font-size:.85rem;margin-left:.3rem}.touch-canvas{width:100%;height:180px;border-radius:10px;background:var(--bg-tertiary);border:1px dashed var(--border-color);display:block;touch-action:none}.swatch-row{display:flex;gap:.4rem;flex-wrap:wrap}.swatch{width:28px;height:28px;border-radius:6px;border:1px solid var(--border-color)}.pixel-test-launcher{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.4rem;margin-top:.25rem}.pixel-test-launcher button{aspect-ratio:1 / 1;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;padding:0;font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .1s}.pixel-test-launcher button:hover{transform:scale(1.04)}.pattern-overlay{position:fixed;inset:0;z-index:9999;cursor:crosshair;display:grid;place-items:center}.pattern-overlay .exit-hint{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);background:#0000008c;color:#fff;padding:.5rem 1rem;border-radius:999px;font-size:.8rem;pointer-events:none}.diag-foot{text-align:center;color:var(--text-muted);font-size:.85rem;margin-top:2rem}.tool-page{max-width:1100px;margin:0 auto;padding:24px 20px 80px}.tool-breadcrumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted, #8a8aa3);margin-bottom:12px}.tool-breadcrumbs a{color:inherit;text-decoration:none}.tool-breadcrumbs a:hover{color:var(--accent, #7c5cff)}.tool-breadcrumbs span[aria-current=page]{color:var(--text-strong, #fff)}.tool-page-hero{padding:28px 0 20px;border-bottom:1px solid var(--border-soft, rgba(255, 255, 255, .08));margin-bottom:28px}.tool-page-hero h1{margin:0 0 10px;font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-.01em}.tool-page-sub{max-width:720px;margin:0;color:var(--text-muted, #8a8aa3);font-size:16px;line-height:1.55}.tool-page-cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}.tool-page-body{display:grid;gap:28px}.tool-page-related{margin-top:56px;border-top:1px solid var(--border-soft, rgba(255, 255, 255, .08));padding-top:28px}.tool-page-related h2{font-size:20px;margin:0 0 16px}.related-grid{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.related-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:var(--card-bg, rgba(255, 255, 255, .04));border:1px solid var(--border-soft, rgba(255, 255, 255, .08));color:inherit;text-decoration:none;transition:border-color .15s ease,background .15s ease}.related-card:hover{border-color:var(--accent, #7c5cff);background:#7c5cff14}.related-name{font-weight:600;font-size:15px}.related-summary{font-size:13px;color:var(--text-muted, #8a8aa3);line-height:1.4}.related-cta{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--accent, #7c5cff);margin-top:4px}[data-theme=light] .tool-breadcrumbs{color:#555}[data-theme=light] .tool-breadcrumbs span[aria-current=page]{color:#111}[data-theme=light] .tool-page-hero{border-color:#00000014}[data-theme=light] .tool-page-sub{color:#555}[data-theme=light] .tool-page-related{border-color:#00000014}[data-theme=light] .related-card{background:#0000000a;border-color:#00000014}.tool-section{background:var(--card-bg, rgba(255, 255, 255, .04));border:1px solid var(--border-soft, rgba(255, 255, 255, .08));border-radius:14px;padding:22px}[data-theme=light] .tool-section{background:#00000008;border-color:#00000014}.tool-section h2{margin:0 0 12px;font-size:20px}.tool-section p{color:var(--text-muted, #8a8aa3);line-height:1.6}[data-theme=light] .tool-section p{color:#555}.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;border:none;border-radius:10px;background:var(--gradient-accent, linear-gradient(135deg, #7c5cff, #ff6ec7));color:#fff;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px #7c5cff59}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:500;border-radius:10px;background:transparent;color:inherit;border:1px solid var(--border-soft, rgba(255, 255, 255, .16));cursor:pointer}[data-theme=light] .btn-secondary{border-color:#00000029}.swatch-cycle{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:8px}.swatch-btn{height:54px;border-radius:8px;border:1px solid var(--border-soft, rgba(255, 255, 255, .08));cursor:pointer;position:relative;color:transparent;font-size:11px;transition:transform .1s ease}.swatch-btn:hover{transform:scale(1.04)}.fs-pattern{position:fixed;inset:0;z-index:9999;cursor:pointer;overflow:hidden}.fs-pattern-hint{position:absolute;bottom:24px;left:50%;transform:translate(-50%);padding:8px 14px;font-size:13px;font-weight:500;border-radius:999px;letter-spacing:.02em;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Inter,system-ui,-apple-system,sans-serif;animation:fs-pattern-fade 4s ease-out forwards}.fs-pattern-hint.on-dark{color:#fff;background:#ffffff1f;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.fs-pattern-hint.on-light{color:#111;background:#00000014;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes fs-pattern-fade{0%{opacity:1}70%{opacity:1}to{opacity:0}}.dpt-row{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}.dpt-row label{font-size:14px;color:var(--text-muted, #8a8aa3);display:inline-flex;align-items:center;gap:6px}.dpt-row label strong{color:var(--text-strong, #fff)}[data-theme=light] .dpt-row label strong{color:#111}.dpt-row input[type=range]{flex:1;min-width:180px}.dpt-fixer-card{display:flex;flex-direction:column;gap:14px}.dpt-fixer-area{width:100%;max-width:360px;height:200px;border-radius:10px;overflow:hidden;border:1px solid var(--border-soft, rgba(255, 255, 255, .12))}.dpt-fixer-canvas{width:100%;height:100%;display:block}.oled-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px}.oled-step{display:flex;flex-direction:column;justify-content:space-between;padding:16px;min-height:96px;border-radius:10px;border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;text-align:left;font-size:13px;transition:transform .1s ease,border-color .12s ease}.oled-step:hover{transform:translateY(-1px);border-color:var(--accent, #7c5cff)}.oled-step-val{font-weight:600;font-size:11px;opacity:.7;margin-top:8px}.rr-result{display:flex;align-items:baseline;gap:8px;margin:8px 0 14px}.rr-hz{font-size:64px;font-weight:700;line-height:1;background:var(--gradient-accent, linear-gradient(135deg, #7c5cff, #ff6ec7));-webkit-background-clip:text;background-clip:text;color:transparent}.rr-unit{font-size:20px;color:var(--text-muted, #8a8aa3);font-weight:600}.rr-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.preset-pill{padding:8px 14px;border-radius:999px;border:1px solid var(--border-soft, rgba(255, 255, 255, .12));background:transparent;color:inherit;cursor:pointer;font-size:13px}.preset-pill.active{background:var(--accent, #7c5cff);border-color:var(--accent, #7c5cff);color:#fff}.rr-target{margin:14px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.rr-target input[type=range]{flex:1;min-width:200px}.motion-track{position:relative;width:100%;height:60px;margin-top:18px;border-radius:8px;background:#0a0a14;overflow:hidden;border:1px solid var(--border-soft, rgba(255, 255, 255, .08))}.motion-bar{position:absolute;top:10px;left:0;width:60px;height:40px;background:#fff;border-radius:4px;will-change:transform}.ct-gamut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:8px 0 14px}.ct-gamut-grid>div{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}[data-theme=light] .ct-gamut-grid>div{background:#0000000a;border-color:#00000014}.ct-gamut-label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted, #8a8aa3)}.ct-gamut-value{font-weight:600;font-size:17px}.ct-gradient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}.ct-gradient{position:relative;height:64px;border-radius:10px;border:1px solid rgba(255,255,255,.12);cursor:pointer;overflow:hidden;color:transparent;font-size:12px}.ct-gradient span{position:absolute;bottom:6px;left:8px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);font-weight:600}.hdr-status{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.hdr-pill{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:500}.hdr-pill.on{background:#32dc8229;border-color:#32dc8266;color:#5be195}.hdr-pill.off{background:#ff6e6e1f;border-color:#ff6e6e52;color:#ff8a8a}.hdr-patterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}.hdr-pattern{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:var(--card-bg, rgba(255, 255, 255, .04));text-align:left;cursor:pointer;color:inherit;transition:border-color .12s ease}.hdr-pattern:hover{border-color:var(--accent, #7c5cff)}.hdr-pattern-preview{display:block;height:80px}.hdr-pattern-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:13px}.hdr-pattern-body strong{font-size:14px}.hdr-pattern-body span:not(strong){color:var(--text-muted, #8a8aa3)}[data-theme=light] .hdr-pattern{background:#00000008;border-color:#0000001a}.app-container{display:flex;flex-direction:column;min-height:100vh}main{flex:1}