*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0}img,svg{vertical-align:middle}
:root{--paper:#faf9f6;--paper-2:#f1f0ea;--card:#fff;--ink:#15171e;--ink-2:#4a4d59;--ink-3:#8a8d99;--line:color-mix(in srgb, var(--ink) 12%, transparent);--line-2:color-mix(in srgb, var(--ink) 6%, transparent);--cobalt:#2a45d0;--cobalt-deep:#1e33a8;--coral:#ff6b57;--coral-deep:#e8533f;--lime:#d8f24e;--lime-deep:#c7d92b;--tint:color-mix(in srgb, var(--cobalt) 7%, var(--paper));--accent:var(--cobalt);--accent-on:#fff;--rail-w:300px;--bar-h:58px;--measure:760px;--gutter:clamp(22px, 5vw, 72px);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--section-y:clamp(34px, 6vw, 64px);--lede-gap:clamp(20px, 3vw, 30px);--sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--mono:"Caveat", "Segoe Print", "Bradley Hand", cursive;--t-numeral:clamp(4.5rem, 15vw, 12.5rem);--t-h1:clamp(2.3rem, 5.2vw, 4.4rem);--t-h2:clamp(1.55rem, 3vw, 2.35rem);--t-h3:clamp(1.15rem, 1.7vw, 1.45rem);--t-lead:clamp(1.18rem, 1.7vw, 1.55rem);--t-body:1.0625rem;--t-sm:.9rem;--t-xs:.92rem;--e:cubic-bezier(.2, .7, .2, 1);--e-soft:cubic-bezier(.4, .05, .15, 1)}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;line-height:1.6}::selection{background:var(--accent);color:var(--accent-on)}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin:0}[data-lang=de] .en,[data-lang=en] .de{display:none!important}.shell,.app-main{min-height:100vh}@media (min-width:1024px){.app-main{margin-left:var(--rail-w)}}.container{max-width:calc(var(--measure) + var(--gutter) * 2);padding:0 var(--gutter);margin:0 auto}.container-wide{max-width:1180px;padding:0 var(--gutter);margin:0 auto}.rail{display:none}@media (min-width:1024px){.rail{width:var(--rail-w);background:var(--paper);border-right:1px solid var(--line);z-index:50;flex-direction:column;display:flex;position:fixed;inset:0 auto 0 0;overflow:hidden}}.rail-head{flex:none;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px 18px;display:flex}.rail-brand{align-items:center;gap:10px;display:flex}.rail-brand .mk{border-radius:9px;flex:none;justify-content:center;align-items:center;width:30px;height:30px;display:flex;overflow:hidden}.rail-brand .mk svg{width:100%;height:100%}.rail-brand b{letter-spacing:-.03em;font-size:17px;font-weight:800}.rail-tag{font-family:var(--mono);color:var(--ink-3);flex:none;padding:0 24px 14px;font-size:10px}.rail-list{scrollbar-width:thin;flex:1;padding:6px 14px 20px;overflow-y:auto}.rail-group{margin-top:18px}.rail-group:first-child{margin-top:4px}.rail-group-label{font-family:var(--mono);color:var(--ink-3);align-items:center;gap:8px;padding:0 10px 8px;font-size:9.5px;display:flex}.rail-group-label:before{content:"";background:var(--g-accent,var(--ink-3));border-radius:2px;width:7px;height:7px}.rail-item{transition:background .2s var(--e), color .2s var(--e);color:var(--ink-2);border-radius:9px;align-items:baseline;gap:12px;padding:7px 10px;display:flex;position:relative}.rail-item:hover{background:var(--paper-2);color:var(--ink)}.rail-item .num{font-family:var(--mono);color:var(--ink-3);flex:none;min-width:18px;font-size:11px;font-weight:600}.rail-item .label{letter-spacing:-.01em;font-size:13.5px;font-weight:600;line-height:1.25}.rail-item.active{background:color-mix(in srgb, var(--g-accent) 12%, transparent);color:var(--ink)}.rail-item.active .num{color:var(--g-accent)}.rail-item.active:before{content:"";background:var(--g-accent);border-radius:0 4px 4px 0;width:4px;position:absolute;top:8px;bottom:8px;left:-14px}.rail-foot{border-top:1px solid var(--line-2);flex:none;justify-content:space-between;align-items:center;padding:16px 24px 22px;display:flex}.rail-spin{width:34px;height:34px;animation:16s linear infinite spin}@media (prefers-reduced-motion:reduce){.rail-spin{animation:none}}@keyframes spin{to{transform:rotate(360deg)}}.bar{height:var(--bar-h);z-index:60;background:color-mix(in srgb, var(--paper) 86%, transparent);-webkit-backdrop-filter:saturate(150%)blur(14px);border-bottom:1px solid var(--line);align-items:center;gap:14px;padding:0 18px;display:flex;position:fixed;inset:0 0 auto}@media (min-width:1024px){.bar{display:none}}.bar-brand{letter-spacing:-.03em;align-items:center;gap:9px;font-size:16px;font-weight:800;display:flex}.bar-brand .mk{border-radius:8px;justify-content:center;align-items:center;width:27px;height:27px;display:flex;overflow:hidden}.bar-brand .mk svg{width:100%;height:100%}.bar-here{font-family:var(--mono);color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;max-width:36vw;margin-left:auto;font-size:11px;overflow:hidden}.bar-menu{border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:11px;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.bar-menu span,.bar-menu span:before,.bar-menu span:after{content:"";background:var(--ink);border-radius:2px;width:17px;height:2px;display:block;position:relative}.bar-menu span:before{position:absolute;top:-5px}.bar-menu span:after{position:absolute;top:5px}.progress{top:var(--bar-h);background:var(--accent);z-index:60;width:0;height:2px;transition:width .1s linear;position:fixed;left:0}@media (min-width:1024px){.progress{top:0;left:var(--rail-w)}}.overlay{z-index:100;background:var(--paper);opacity:0;visibility:hidden;transition:opacity .3s var(--e), transform .3s var(--e), visibility .3s;position:fixed;inset:0;overflow-y:auto;transform:translateY(-8px)}.overlay.open{opacity:1;visibility:visible;transform:none}.overlay-head{background:color-mix(in srgb, var(--paper) 90%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px 18px;display:flex;position:sticky;top:0}.overlay-close{border:1px solid var(--line);background:var(--card);cursor:pointer;width:40px;height:40px;color:var(--ink);border-radius:11px;font-size:20px;line-height:1}.overlay-body{padding:22px 18px 80px}.overlay-group{margin-top:26px}.overlay-group:first-child{margin-top:8px}.overlay-group-label{font-family:var(--mono);color:var(--ink-3);align-items:center;gap:9px;margin-bottom:10px;font-size:10px;display:flex}.overlay-group-label:before{content:"";background:var(--g-accent,var(--ink-3));border-radius:2px;width:8px;height:8px}.overlay-item{border-bottom:1px solid var(--line-2);align-items:baseline;gap:14px;padding:12px 6px;display:flex}.overlay-item .num{font-family:var(--mono);color:var(--ink-3);min-width:26px;font-size:13px}.overlay-item .label{letter-spacing:-.02em;font-size:19px;font-weight:700}.overlay-item.active .num,.overlay-item.active .label{color:var(--g-accent)}.chead{padding:clamp(48px,8vw,92px) 0 clamp(28px,4vw,52px);position:relative}.chead-inner{z-index:2;position:relative}.chead-kicker{font-family:var(--mono);font-size:var(--t-xs);color:var(--accent);align-items:center;gap:10px;margin-bottom:22px;display:flex}.chead-kicker .num{font-weight:700}.chead h1{font-size:var(--t-h1);letter-spacing:-.04em;max-width:16ch;font-weight:800;line-height:.98}.chead .sub{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);margin-top:14px}.chead .lead{font-size:var(--t-lead);color:var(--ink-2);max-width:30ch;margin-top:26px;font-weight:400;line-height:1.4}.section{padding:var(--section-y) 0;position:relative}.eyebrow{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);align-items:center;gap:12px;margin-bottom:22px;display:flex}.eyebrow .n{color:var(--accent);font-weight:600}.section h2{font-size:var(--t-h2);letter-spacing:-.03em;max-width:20ch;margin-bottom:16px;font-weight:800;line-height:1.05}.section h3{font-size:var(--t-h3);letter-spacing:-.02em;margin-bottom:8px;font-weight:700}.prose p{color:var(--ink-2);max-width:62ch;margin-bottom:16px}.prose p:last-child{margin-bottom:0}.prose strong,.prose b{color:var(--ink);font-weight:700}.lead-block{font-size:var(--t-lead);color:var(--ink);max-width:30ch;font-weight:500;line-height:1.45}.grid{gap:clamp(14px,2vw,22px);display:grid}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.split{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(28px,5vw,64px)}@media (max-width:860px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.cols-2,.cols-3,.cols-4,.split{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid var(--line);transition:transform .3s var(--e), box-shadow .3s var(--e);border-radius:16px;padding:clamp(20px,2.4vw,28px)}a.card.lift:hover,button.card.lift:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px #14172366}.card .ic{background:color-mix(in srgb, var(--accent) 13%, transparent);width:42px;height:42px;color:var(--accent);border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.card .ic svg{width:22px;height:22px}.card p{color:var(--ink-2);font-size:var(--t-sm)}.card.dark{background:var(--ink);color:#fff;border-color:#0000}.card.dark p{color:#ffffffbf}.card.accent{background:var(--accent);color:var(--accent-on);border-color:#0000}.card.accent p{color:color-mix(in srgb, var(--accent-on) 80%, transparent)}.swatch{border:1px solid var(--line);background:var(--card);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .25s var(--e), box-shadow .25s var(--e);border-radius:14px;padding:0;position:relative;overflow:hidden}.swatch:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px #14172373}.swatch .swatch-chip{height:96px;position:relative}.swatch .copied{font-family:var(--mono);color:#fff;opacity:0;background:#00000047;justify-content:center;align-items:center;font-size:12px;font-weight:600;transition:opacity .2s;display:flex;position:absolute;inset:0}.swatch.copied .copied{opacity:1}.swatch .meta{padding:12px 14px 14px}.swatch .name{font-weight:700;font-size:var(--t-sm)}.swatch .hex{font-family:var(--mono);color:var(--ink-3);margin-top:3px;font-size:12px}.swatch .role{color:var(--ink-3);margin-top:6px;font-size:12px;line-height:1.4}.specimen{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:clamp(22px,3vw,34px)}.specimen .big{letter-spacing:-.03em;color:var(--ink);font-weight:800;line-height:1}.specimen .meta{font-family:var(--mono);color:var(--ink-3);flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:11px;display:flex}.scale-row{border-bottom:1px solid var(--line-2);grid-template-columns:130px 1fr;align-items:baseline;gap:18px;padding:16px 0;display:grid}.scale-row:last-child{border-bottom:none}.scale-row .tag{font-family:var(--mono);color:var(--ink-3);font-size:11px}.scale-row .sample{letter-spacing:-.03em;color:var(--ink);font-weight:800;line-height:1}@media (max-width:600px){.scale-row{grid-template-columns:1fr;gap:6px}}.dd{border:1px solid var(--line);border-radius:14px;padding:18px 20px}.dd .tag{font-family:var(--mono);align-items:center;gap:8px;margin-bottom:10px;font-size:11px;font-weight:600;display:flex}.dd.do{background:color-mix(in srgb, #36b37e 9%, var(--card));border-color:#36b37e4d}.dd.do .tag{color:#1f8c5c}.dd.dont{background:color-mix(in srgb, var(--coral) 9%, var(--card));border-color:color-mix(in srgb, var(--coral) 30%, transparent)}.dd.dont .tag{color:var(--coral-deep)}.dd p{font-size:var(--t-sm);color:var(--ink-2)}.chip{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;align-items:center;gap:7px;padding:7px 13px;font-size:13px;font-weight:600;display:inline-flex}.kvs{flex-direction:column;display:flex}.kv{border-bottom:1px solid var(--line-2);font-size:var(--t-sm);justify-content:space-between;gap:16px;padding:11px 0;display:flex}.kv:last-child{border-bottom:none}.kv .k{color:var(--ink-3)}.kv .v{text-align:right;font-weight:600}.shapefield{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.shape{will-change:transform;position:absolute}.shape.circle{border-radius:50%}.shape.pill{border-radius:999px}.shape.tri{width:0;height:0;background:0 0!important}.shape.arch{border-radius:999px 999px 0 0}.shape.ring{border-radius:50%;background:0 0!important}.float-a{animation:9s ease-in-out infinite floatA}.float-b{animation:11s ease-in-out infinite floatB}.float-c{animation:13s ease-in-out infinite reverse floatA}@keyframes floatA{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-18px)rotate(5deg)}}@keyframes floatB{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(16px)rotate(-6deg)}}@media (prefers-reduced-motion:reduce){.float-a,.float-b,.float-c{animation:none}}.pager{grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;padding:clamp(40px,6vw,72px) 0 clamp(60px,8vw,110px);display:grid}@media (max-width:600px){.pager{grid-template-columns:1fr}}.pager a{border:1px solid var(--line);background:var(--card);transition:transform .25s var(--e), border-color .25s var(--e);border-radius:16px;padding:20px 22px}.pager a:hover{border-color:var(--accent);transform:translateY(-3px)}.pager a.next{text-align:right}.pager .dir{font-family:var(--mono);color:var(--ink-3);font-size:11px}.pager .ttl{letter-spacing:-.02em;margin-top:8px;font-size:19px;font-weight:800}.pager .num{font-family:var(--mono);color:var(--accent);font-size:12px}.reveal{opacity:0;transition:opacity .7s var(--e), transform .7s var(--e);will-change:opacity, transform;transform:translateY(22px)}.reveal.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}}.band{margin:clamp(34px, 6vw, 64px) calc(var(--gutter) * -1);padding:clamp(40px, 6vw, 72px) var(--gutter)}.band.ink{background:var(--ink);color:#fff}.band.ink .eyebrow{color:#fff9}.band.ink .eyebrow:after{background:#ffffff2e}.band.ink h2{color:#fff}.band.accent{background:var(--accent);color:var(--accent-on)}.btn{font:inherit;font-weight:700;font-size:var(--t-sm);letter-spacing:-.01em;background:var(--accent);color:var(--accent-on);cursor:pointer;transition:transform .25s var(--e), box-shadow .25s var(--e), background .2s;border:1px solid #0000;border-radius:12px;align-items:center;gap:9px;padding:13px 20px;display:inline-flex}.btn:hover{box-shadow:0 16px 30px -18px color-mix(in srgb, var(--accent) 70%, transparent);transform:translateY(-2px)}.btn svg{width:18px;height:18px}.btn.ghost{color:var(--ink);border-color:var(--line);background:0 0}.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}.mono{font-family:var(--mono);color:var(--accent);font-size:1.05em}.eyebrow{font-size:1.3rem;font-weight:700}.chead-kicker{font-size:1.35rem;font-weight:700}.rail-tag{font-size:1.15rem}.rail-group-label{font-size:1.15rem;font-weight:700}.overlay-group-label{font-size:1.25rem;font-weight:700}.rail-item .num{font-size:1.15rem;font-weight:700}.bar-here{font-size:1.15rem}.pager .dir{font-size:1.2rem}.pager .num{font-size:1.25rem;font-weight:700}.specimen .meta{font-size:1.15rem}.scale-row .tag{font-size:1.1rem}.swatch .hex{font-size:1.25rem}.swatch .role,.lang button{font-size:1.1rem}.stack-4>*+*{margin-top:var(--space-4)}.stack-5>*+*{margin-top:var(--space-5)}.stack-6>*+*{margin-top:var(--space-6)}.stack-7>*+*{margin-top:var(--space-7)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-7{margin-top:var(--space-7)}.section>*+.grid,.section>*+.lede-after{margin-top:var(--lede-gap)}.lang{background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:2px;display:inline-flex}.lang button{appearance:none;font:inherit;font-family:var(--mono);color:var(--ink-3);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;transition:all .2s}.lang button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #00000014}