@-webkit-keyframes animation{0%,to{background-size:100%}50%{background-size:123%}}@keyframes animation{0%,to{background-size:100%}50%{background-size:123%}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}:root,[data-theme=warm]{--color-bg:#f3eee8;--color-surface:#fdfaf7;--color-surface-2:#f2ede6;--color-border:#e8ddd2;--color-border-strong:#c8b8a8;--color-text:#1a1410;--color-text-2:#4a3e34;--color-text-muted:#9a8878;--color-brand:#c4502a;--color-brandfree:#c4502a;--color-brand-subtle:#f5eae4;--color-scrollbar:#9a8878;--color-linkblau:#0044cc;--shadow-sm:0 1px 3px rgba(100, 60, 30, 0.08),
    0 0 0 1px rgba(100, 60, 30, 0.04);--shadow-md:0 4px 16px rgba(100, 60, 30, 0.1),
    0 1px 4px rgba(100, 60, 30, 0.06);--shadow-lg:0 12px 40px rgba(100, 60, 30, 0.12),
    0 2px 8px rgba(100, 60, 30, 0.06);--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-6:48px;--space-8:64px}.dead{--color-bg:#f8f8f8;--color-surface:#ffffff;--color-border:#e5e5e5;--color-text:#000000;--color-text-2:#666666;--color-text-muted:#999999;--color-brand:#2563eb;--color-brand-subtle:#dbeafe;--shadow-md:0 4px 12px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08)}*,::after,::before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{background:var(--color-bg);color:var(--color-text);font-family:"Poppins","Instrument Sans",sans-serif;font-size:17.5px;transition:background .4s,color .3s;min-height:100vh;line-height:1.5}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin-block-end:0}ol[role=list],ul[role=list]{list-style:none}button,h3,h4,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block;padding:0;margin:0}button,input,select,textarea{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}.page,.pagesection{max-width:1080px;margin:0 auto;padding:0 32px 150px}.pagesection{padding:0 32px 30px}.header-wrap{position:sticky;top:0;z-index:100;background:var(--color-bg);transition:background .4s,box-shadow .3s,border-color .35s}.header-wrap.scrolled{box-shadow:0 1px 0 var(--color-border),0 4px 24px rgba(0,0,0,.05)}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--color-border);max-width:1080px;margin:0 auto;transition:border-color .35s}.logo,.logobrand{font-family:"Chivo Mono",monospace;font-size:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted)}.logobrand img{filter:hue-rotate(5deg) saturate(1.2) drop-shadow(rgba(11,11,11,.1) -1px 2px 2px)}.logo{font-size:12px;font-weight:400}.logo strong{color:var(--color-brand);font-weight:400}.switcher{display:flex;align-items:center;gap:var(--space-1)}.switcher-label,.tbtn{font-family:"Chivo Mono",monospace;font-size:10px;text-transform:uppercase;color:var(--color-text-muted)}.switcher-label{letter-spacing:.12em;margin-right:4px}.tbtn{font-weight:400;letter-spacing:.1em;padding:6px 14px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;transition:all .2s}.tbtn:hover{border-color:var(--color-border-strong);color:var(--color-text)}.tbtn.active{background:var(--color-brand);border-color:var(--color-brand);color:#fff}@media (max-width:768px){.header-wrap{position:relative}}.hero{margin-bottom:var(--space-8);opacity:0;animation:rise .7s .05s forwards}.eyebrow{display:flex;align-items:center;gap:12px;font-family:"Chivo Mono",monospace;font-size:10.5px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--color-brand);margin-bottom:var(--space-3)}.eyebrow::before{content:"";display:block;width:22px;height:1px;background:var(--color-brand);opacity:.6;flex-shrink:0}.hero h1,.herotype,h1{font-family:"Fraunces",serif;font-weight:200;font-style:italic;font-optical-sizing:auto;font-size:clamp(36px,5.2vw,62px);line-height:.8;letter-spacing:-.02em;color:var(--color-text);margin-bottom:22px;max-width:680px}.hero-sub{font-size:15.5px;font-weight:300;color:var(--color-text-2);line-height:1.75;max-width:520px}.section{margin-bottom:88px;opacity:0;animation:rise .6s forwards}.section:nth-child(2){animation-delay:.12s}.section:nth-child(3){animation-delay:.18s}.section:nth-child(4){animation-delay:.24s}.section:nth-child(5){animation-delay:.3s}.section:nth-child(6){animation-delay:.36s}.section:nth-child(7){animation-delay:.42s}.section:nth-child(8){animation-delay:.48s}.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}.sec-num{font-family:"Chivo Mono",monospace;font-size:10px;font-weight:300;letter-spacing:.12em;color:var(--color-brand);opacity:.65;flex-shrink:0}.section h2{font-family:"Fraunces",serif;font-weight:300;font-optical-sizing:auto;font-size:clamp(20px,2.6vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--color-text)}.section-intro{font-size:14px;font-weight:300;color:var(--color-text-2);line-height:1.75;max-width:600px;margin:10px 0 28px}.rule{height:1px;background:var(--color-border);margin:0 0 88px;transition:background .35s}.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}@media (max-width:680px){.compare{grid-template-columns:1fr}}.panel{border-radius:12px;padding:26px;border:1px solid var(--color-border);background:var(--color-surface);transition:background .35s,border-color .35s}.panel-tag{font-family:"Chivo Mono",monospace;font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:8px}.panel-tag.bad{color:#c94040}.panel-tag.good{color:#3e8c5a}.panel-tag.bad::before,.panel-tag.good::before{content:"x";font-size:11px;font-weight:600}.panel-tag.good::before{content:"v"}.swatches{display:flex;flex-direction:column;gap:7px}.swatch-row{display:flex;align-items:center;gap:10px}.dot{flex-shrink:0;border:1px solid rgba(0,0,0,.07)}.swatch-info{font-family:"Chivo Mono",monospace;font-size:10px;font-weight:300;letter-spacing:.05em;line-height:1.4}.swatch-info small{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.5;margin-top:1px}.callout{background:var(--color-brand-subtle);border-left:3px solid var(--color-brand);border-radius:0 6px 6px 0;padding:14px 18px;margin-top:18px;font-size:13.5px;font-style:italic;font-weight:400;color:var(--color-text-2);line-height:1.7;transition:background .35s,border-color .35s,color .3s}.shadow-pair{display:flex;flex-direction:column;gap:14px}.sh-card{border-radius:10px;padding:18px 20px}.sh-label{font-family:"Chivo Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}.sh-title{font-size:14.5px;font-weight:500}.sh-code{font-family:"Chivo Mono",monospace;font-size:9.5px;line-height:1.85;letter-spacing:.04em;margin-top:12px;opacity:.6}.shadow-dead-card{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.08)}.shadow-dead-card .sh-label{color:#999}.shadow-dead-card .sh-title{color:#000}.shadow-cool-card{background:#fafbfd;box-shadow:0 1px 3px rgba(37,99,235,.08),0 4px 16px rgba(37,99,235,.06),0 0 0 1px rgba(37,99,235,.04)}.shadow-cool-card .sh-label{color:#7a8ba0}.shadow-cool-card .sh-title{color:#0f1520}.shadow-warm-card{background:#fdfaf7;box-shadow:0 1px 3px rgba(120,80,40,.08),0 4px 16px rgba(120,80,40,.05),0 0 0 1px rgba(120,80,40,.04)}.shadow-warm-card .sh-label{color:#9a8878}.shadow-warm-card .sh-title{color:#1a1410}.text-stack{display:flex;flex-direction:column;gap:12px;padding:4px 0}.text-row{display:flex;align-items:baseline;gap:12px}.tx{font-size:15px;font-weight:500}.tx-sub{font-size:14px;font-weight:400}.tx-hex,.tx-muted{font-size:13px;font-weight:300}.tx-hex{font-family:"Chivo Mono",monospace;font-size:9.5px;letter-spacing:.06em;opacity:.45;flex-shrink:0}.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}@media (max-width:780px){.three-col{grid-template-columns:1fr}}.sys-card{border-radius:14px;padding:26px 22px}.sys-card.warm{background:#fdfaf7;border:1px solid #e8ddd2;box-shadow:0 4px 16px rgba(100,60,30,.1),0 1px 4px rgba(100,60,30,.06)}.sys-card.cool{background:#fafbfd;border:1px solid #dde3ee;box-shadow:0 4px 16px rgba(30,50,100,.1),0 1px 4px rgba(30,50,100,.06)}.sys-card.dark{background:#161b27;border:1px solid #1e2738;box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 0 1px rgba(100,140,255,.06)}.sys-eyebrow{font-family:"Chivo Mono",monospace;font-size:9.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}.warm .sys-eyebrow{color:#9a8878}.cool .sys-eyebrow{color:#7a8ba0}.dark .sys-eyebrow{color:#4a5870}.sys-title{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:8px}.warm .sys-title{color:#1a1410}.cool .sys-title{color:#0f1520}.dark .sys-title{color:#e8edf5}.sys-body{font-size:13px;font-weight:300;line-height:1.65;margin-bottom:16px}.warm .sys-body{color:#4a3e34}.cool .sys-body{color:#3a4560}.dark .sys-body{color:#8a9ab5}.sys-badge,.sys-foot{font-family:"Chivo Mono",monospace;text-transform:uppercase}.sys-badge{display:inline-block;font-size:9.5px;font-weight:400;letter-spacing:.1em;padding:4px 10px;border-radius:4px}.warm .sys-badge{background:#f5eae4;color:#c4502a}.cool .sys-badge{background:#eef3ff;color:#2563eb}.dark .sys-badge{background:#1a2540;color:#5b8def}.sys-foot{font-size:9px;letter-spacing:.15em;text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid}.warm .sys-foot{color:#c8b8a8;border-color:#e8ddd2}.cool .sys-foot{color:#bcc6da;border-color:#dde3ee}.dark .sys-foot{color:#2a3650;border-color:#1e2738}.token-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:22px 0;border-radius:8px;overflow:hidden;border:1px solid var(--color-border);transition:border-color .35s}.token-table td,.token-table th{padding:10px 14px;border-bottom:1px solid var(--color-border)}.token-table th{font-family:"Chivo Mono",monospace;font-size:9.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);background:var(--color-surface-2);text-align:left;transition:background .35s,color .3s,border-color .35s}.token-table td{color:var(--color-text-2);vertical-align:middle;transition:background .2s,border-color .35s,color .3s}.token-table tr:last-child td{border-bottom:none}.token-table tr:hover td{background:var(--color-surface-2)}.token-table td:first-child{font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--color-brand)}.cdot{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:middle;margin-right:7px;border:1px solid rgba(0,0,0,.08)}.dark-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width:680px){.dark-compare{grid-template-columns:1fr}}.dp-bad,.dp-good{border-radius:12px;padding:26px}.dp-bad{background:#18181b;border:1px solid #27272a}.dp-good{background:#0f1117;border:1px solid #1e2738;box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 0 1px rgba(100,140,255,.06)}.dp-tag{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:8px}.dp-bad .dp-tag{color:#c94040}.dp-good .dp-tag{color:#3e8c5a}.dp-bad .dp-tag::before{content:"x";font-weight:600}.dp-good .dp-tag::before{content:"v";font-weight:600}.dp-mini{border-radius:8px;padding:15px;margin-bottom:10px}.dp-bad .dp-mini{background:#27272a;border:1px solid #3f3f46}.dp-good .dp-mini{background:#161b27;border:1px solid #1e2738;box-shadow:0 0 0 1px rgba(100,140,255,.08)}.dp-mini-label{font-family:"Chivo Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}.dp-bad .dp-mini-label{color:#71717a}.dp-good .dp-mini-label{color:#4a5870}.dp-mini-title{font-size:14px;font-weight:500}.dp-bad .dp-mini-title{color:#fafafa}.dp-good .dp-mini-title{color:#e8edf5}.dp-mini-body{font-size:12px;font-weight:300;line-height:1.6;margin-top:4px}.dp-bad .dp-mini-body{color:#a1a1aa}.dp-good .dp-mini-body{color:#8a9ab5}.browser{border-radius:14px;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);overflow:hidden;transition:background .4s,border-color .35s,box-shadow .4s}.browser-bar{background:var(--color-surface-2);border-bottom:1px solid var(--color-border);padding:11px 18px;display:flex;align-items:center;gap:7px;transition:background .35s,border-color .35s}.bdot{width:10px;height:10px;border-radius:50%}.bdot-1,.bdot-2,.bdot-3{background:var(--color-brand);opacity:.5}.bdot-2,.bdot-3{opacity:.28}.bdot-3{opacity:.12}.browser-url{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--color-text-muted);margin-left:12px;transition:color .3s}.browser-body{padding:28px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}@media (max-width:680px){.browser-body{grid-template-columns:1fr}}.live-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:10px;padding:18px;box-shadow:var(--shadow-sm);cursor:default;transition:background .35s,border-color .35s,box-shadow .35s,transform .2s}.live-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.lc-eye{font-family:"Chivo Mono",monospace;font-size:9px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:7px;transition:color .3s}.gbtn:hover,.lc-title{color:var(--color-text)}.lc-body,.lc-title{font-size:14.5px;font-weight:500;line-height:1.35;margin-bottom:7px;transition:color .3s}.lc-body{font-size:12.5px;font-weight:300;color:var(--color-text-2);line-height:1.65;margin-bottom:13px}.lc-badge{display:inline-block;background:var(--color-brand-subtle);color:var(--color-brand);font-family:"Chivo Mono",monospace;font-size:9.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:4px;transition:background .35s,color .3s}.grey-ctrl{display:flex;align-items:center;gap:12px;margin-bottom:18px}.gbtn,.grey-note{font-family:"Chivo Mono",monospace;font-size:10px;text-transform:uppercase;color:var(--color-text-muted)}.gbtn{letter-spacing:.12em;padding:8px 18px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;transition:all .2s}.gbtn:hover{border-color:var(--color-border-strong)}.gbtn.active{background:var(--color-brand);border-color:var(--color-brand);color:#fff}.grey-note{letter-spacing:.1em;transition:color .3s}.grey-target{transition:filter .4s ease}.grey-target.grey{filter:grayscale(1)}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media (max-width:680px){.rules{grid-template-columns:1fr}}.rule-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:22px;box-shadow:var(--shadow-sm);transition:background .35s,border-color .35s,box-shadow .25s,transform .2s}.rule-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.rule-n{font-family:"Chivo Mono",monospace;font-size:26px;font-weight:300;color:var(--color-brand);opacity:.28;line-height:1;margin-bottom:11px;transition:color .3s}.rule-title{font-size:13.5px;font-weight:600;color:var(--color-text);margin-bottom:7px;line-height:1.3;transition:color .3s}.rule-body{font-size:13px;font-weight:300;color:var(--color-text-2);line-height:1.65;transition:color .3s}.panel .color-indicator,.panel .width-indicator{font-family:"Chivo Mono",monospace;font-size:11px;font-weight:300;letter-spacing:-.1px;line-height:1.1;text-transform:uppercase;color:var(--color-brandfree);padding:0;margin:0;display:block}.panel .panelgritt{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:start}.panel .panelgritt .width-indicator{text-align:right}.footer{border-top:1px solid var(--color-border);padding-top:28px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;transition:border-color .35s}.footer-note{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--color-text-muted);transition:color .3s}.tags{display:flex;gap:7px;flex-wrap:wrap}.tag{font-family:"Chivo Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:3px;border:1px solid var(--color-border);color:var(--color-text-muted);transition:all .2s,border-color .35s}.tag:hover{border-color:var(--color-border-strong);color:var(--color-text)}.footer ul{list-style-type:none!important}.footer ul li{line-height:1.4;padding-bottom:var(--space-1)}.footer ul li:not(.icon-lock):before{font-family:"Material Icons";content:"";display:inline-block;margin-right:2px;color:var(--color-linkblau);margin-bottom:-2px;vertical-align:center;line-height:1.8}.footer ul li.icon-lock:before,a.linkmich:before,i.material-icons{font-family:"Material Icons";display:inline-block;vertical-align:center}.footer ul li.icon-lock:before{content:"";margin-right:2px;color:var(--color-linkblau);margin-bottom:-2px;line-height:1.8}.footer ul li a{font-weight:500;text-decoration:none}.footer ul li a,.footer ul li:hover:before{color:var(--color-linkblau)}.footer ul li a:hover,a.linkmich{color:var(--color-linkblau);text-decoration:underline}.slider,.slider-container{position:relative;background-color:transparent;margin:0 auto}.slider-container{max-width:100%;overflow:hidden;background-size:cover;background-position:center;transition:opacity 1s ease-in-out}.slider{background:0 0;width:100%;max-width:var(--width-content);aspect-ratio:16/9}.slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:0 0 16px 16px;transition:opacity 1s ease-in-out;background-size:cover;background-position:center;max-height:100%;-webkit-animation-name:animation;-webkit-animation-duration:45s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:animation;animation-duration:45s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-play-state:running;box-shadow:rgba(50,50,93,.25)0 30px 60px -12px inset,rgba(0,0,0,.3)0 18px 36px -18px inset}.slide.active{opacity:1}.slider-controls{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .15s}.dot.active{background:#fff}@media (max-width:500px){.slider{min-height:300px;width:auto}}.bredAll,.bredAll *{border:1px solid red!important}.mt_space6{margin-top:var(--space-6)}.mb_space6{margin-bottom:var(--space-6)}h2,h3,h4{font-weight:400;padding:var(--space-2)0}h2.ffamilyFraunces{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(33px,2.5vw,40px)}h2,h3,h4,p{font-optical-sizing:auto}h2{font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-.02em;color:var(--color-text)}h3,h4,p{font-size:clamp(22px,3vw,32px)}h4,p{font-size:clamp(19px,2vw,24px)}p{font-size:clamp(16px,1.1vw + 12px,20px)}.lowercase{text-transform:lowercase!important}a.linkmich:before,i.material-icons{color:var(--color-brand)}a.linkmich{text-decoration:none;line-height:.6}a.linkmich:before{content:"";margin-right:2px;color:var(--color-linkblau);margin-bottom:-2px;line-height:1.8}a.linkmich:hover{color:var(--color-linkblau)!important;text-decoration:none}*{scrollbar-width:thin;scrollbar-color:var(--color-scrollbar) transparent}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar);border-radius:10px}