/* SEJR IDENTITY + SEJR UI — FLADGJORT FOR DASHBOARDET. GENERERET af * scripts/byg-identitet.mjs. RET ALDRIG HER: ret kilden i "SEJR IDENTITY" * og kør generatoren igen. En kopi der redigeres ved siden af sin kilde, * er en kopi der lyver næste gang kilden ændrer sig. * * Kilde: kits/ui/react/sejr-ui-komplet.css og dens @import-kæde * Filer: 45 * Aktiver: 49 (skrift og gravureplader, i ./aktiver/) * * Indlæsningsrækkefølgen er kildens egen: farve, skrift, bevægelse, kit. * Se kilder.json for hver fils sha256, så drift kan måles og ikke huskes. */ /* SEJR UI — ét importpunkt for React-laget. * * INDLÆSNINGSRÆKKEFØLGEN ER IKKE VALGFRI. Den står i sejr-ui.css's eget * hoved: identiteten (farve, skrift, bevægelse) skal ligge FØR kittet. * Mangler identiteten, fejler kitlaget stille — var() falder tilbage til * ingenting, og fladerne bliver gennemsigtige. */ /* ─── fundament/02-farve/sejr-farver.css ─── */ /* SEJR — farver. Fundamentet, ikke systemet. * * Udtrukket 16. august 2026 fra 02-COLOR/tokens/sejr-colors.css i SEJR BRAND. * Den fil har 145 unikke tokens over 434 linjer. Denne har det der ikke kan * undværes. Hver værdi er KOPIERET, ikke skrevet efter hukommelsen — det er * netop dét der har fået farver til at drive fra hinanden før. * * Reglen der holder resten sammen: FARVE ER FUNKTION. * Crimson er handlingen. Grøn er penge der kommer ind. Alt andet er grund, * blæk og grå. En farve uden en opgave hører ikke til her. * * ─── OG DEN REGEL DER BINDER HÅRDEST ────────────────────────────────────── * * FARVE ER BEKRÆFTELSE. ALDRIG SELVE SIGNALET. * * Båret hertil fra SEJR BRAND 17. august 2026, hvor den blev fundet ved * måling og så blev efterladt i arkivet. Målt PÅ NÆRVÆRENDE palet, ikke * skrevet af — de gamle tal beskrev tokens der ikke findes mere: * * --fn-success mod --fn-info dE 4,5 på dag · 6,3 på nat (tritanopi) * --money-in mod --fn-success dE 9,0 på dag (deuteranopi) * * «Gennemført» og «til orientering» er altså den SAMME FARVE for en bruger * med tritanopi. Det er ikke en fejl i paletten der kan rettes: rød, grøn og * neutral adskiller sig ikke under dikromasi ved læsbar kontrast. Det er * øjet, ikke værdierne. * * Derfor, bindende og uden undtagelse: * · Hvert beløb bærer sit fortegn. + og − , ikke grøn og rød. * · Hver tilstand bærer et ORD. «Afvist», ikke en rød prik. * · Hver serie i et diagram bærer sin etiket eller sin egen signatur. * · Farven må bekræfte det, ordet allerede har sagt. Aldrig bære det alene. * * Seriefarverne nedenfor er den ene undtagelse der bekræfter reglen: de er * søgt frem netop for at overleve alle tre former for farveblindhed, og selv * dér skal en etiket kunne findes. */ :root { /* ---- grunde ------------------------------------------------------------ To flader, og valget mellem dem er ikke smag: lyset er arbejdet, mørket er beslutningen. Paper er produktets og dokumenternes grund; Ink er marketing, film og de øjeblikke hvor der skal træffes et valg. */ --ink: #0F1419; --ink-2: #1A2028; /* løftet flade PÅ ink — modaler, ark, skuffer */ --paper: #FAFAF7; --cream: #F2F1ED; /* papir med varme: dokumenter, tryk, kortbagsider */ /* ---- accenten ---------------------------------------------------------- ÉN farve, ét job: handlingen, krydsningen, afregningen. Ét sted pr. skærm. Crimson som dekoration er ikke tilladt — i det øjeblik den pynter, holder den op med at betyde noget. ROLLERNE ER MÅLT, IKKE VALGT EFTER NAVN. Rettet 17. august 2026: #C1213F hvile. Papirtekst ovenpå 5,65:1. Bærer selv tekst på papir. #911C36 hover og tryk PÅ PAPIR. Papirtekst ovenpå 8,29:1 — kontrasten BLIVER BEDRE når man rører den. Det er hele pointen: en tilstand må aldrig gøre en knap sværere at læse. #5C1124 dybeste flade på papir. Papirtekst 12,87:1. #DC3D58 crimson dér hvor grunden er mørk — tekst, streg, ikon. Måler 4,28:1 på ink mod fuld crimsons 3,14:1. #DC3D58 hed før «hover». Det var forkert: som FLADE bærer den kun papirtekst med 4,14:1, altså under AA. En knap må ikke falde under AA i det øjeblik markøren rammer den, så hover går NEDAD i skalaen, ikke opad. #5C1124 hed før «på ink, hvor fuld crimson blænder». Også forkert — crimson blænder ikke på ink, den forsvinder (3,14:1), og #5C1124 måler 1,38:1 dér. Den hører på papir. */ --crimson: #C1213F; --crimson-bright: #DC3D58; /* crimson på MØRK grund — se nedenfor */ --crimson-shade: #911C36; /* hover OG tryk på papir — se nedenfor */ --crimson-deep: #5C1124; /* dybeste crimson-flade på PAPIR */ /* ---- handlingens gradient --------------------------------------------- Besluttet af Morris 15. september 2026: «a main color that was always gradient … our main crimson for actions». Retningen er vandret, fra crimson mod lys, læseretningen. Lyset er bygget af paletten alene (crimson, bright, paper blandet), så ingen ny farve kommer ind. MÅLT samme dag: en flade må højst gå 73 % fra crimson mod bright (#D53551, 4,51:1) hvis der står et paper-ord på den. Bright som flade bærer kun 4,14:1, bright+25 % paper 2,97:1. Ordets sidste bogstav står ved ~88 % af en knaps bredde og ved ~45 % af en stor flade. Derfor SKALERES LYSET TIL PLADSEN: hvor langt det når, afhænger af hvor meget plads der er til højre for ordet. Tre grader, én retning: · --handling-flade knappen, 36 px. Crimson til 40 %, kanten når 91 % mod bright. Ordets sidste bogstav 4,5:1. · --handling-lille tælling og prik. Crimson til bright; cifret står i midten på 4,9:1. · --handling-stor den ene store crimson-flade en side må have. Crimson til 20 %, kanten når bright+25 % paper. Ordet slutter ved 45 %, dér måler den 5,2:1. Hover og tryk er stadig flade shade (8,29:1) — gradienten er hvile. Den rører ikke ordmærket, app-ikonet, Morgenen eller tekst i crimson; de er flade. Efterprøvet på skitser/skaerme/02–04. */ --handling-flade: linear-gradient(90deg, var(--crimson) 0%, var(--crimson) 40%, color-mix(in srgb, var(--crimson-bright) 91%, var(--crimson)) 100%); --handling-lille: linear-gradient(90deg, var(--crimson) 0%, var(--crimson-bright) 100%); --handling-stor: linear-gradient(90deg, var(--crimson) 0%, var(--crimson) 20%, color-mix(in srgb, var(--crimson-bright) 75%, var(--paper)) 100%); /* ---- makkeren: porcelæn ------------------------------------------------ Besluttet af Morris 12. september 2026, efter «SEJR fra bunden»: ét par med låst forhold, som IKEA er blåt med gult ét sted. Porcelæn er grunden (terminalens hus, kortet, vinduesmærkets inderside), crimson er lakken (seglet, den ene knap, ringen). Forholdet ændrer sig aldrig. TO REGLER, SOM ER HELE PARRET: · Crimson er lakken, aldrig grunden. Aldrig større end et segl. Så betyder rødt aldrig minus, for et segl er aldrig en saldo. · Porcelæn optræder aldrig uden seglet. Uden det er den en lyseblå flise som seks andre danske mærker; med det er den den eneste på hylden med et rødt mærke. MÅLT 12. september 2026 (WCAG, mod #C1213F, #0F1419, #FAFAF7): #C2D2E2 porcelæn. crimson-segl 3,83:1 · blæk som tekst 12,00:1 · som lys på ink 12,00:1. Til alt der støbes og trykkes: køligere og gråere, som glasuren, så den ikke bliver babyblå på plast. #C6D9EE porcelæn-lys. crimson-segl 4,09:1 · blæk 12,84:1. Varmere; til skærm, hvor lyset alligevel er koldt. Fire andre makkere blev målt og forkastet: guld, sand og skovgrøn i deres første grader lod seglet forsvinde (1,61–2,65:1); i lysere grader bestod de, men kun porcelæn er uejet i dansk betaling. PÅ NAT vender parret: grunden er ink, porcelæn er lyset (datoen, chippen, den aktive fane, ikonerne), og crimson er stadig kun lakken, i --crimson-bright. Grønt er stadig penge ind. */ --porcelaen: #C2D2E2; --porcelaen-lys: #C6D9EE; /* ---- penge ------------------------------------------------------------- Et beløb har en retning. Ind er grøn, ud er neutral — ikke rød, for penge der forlader kontoen er ikke en fejl. Rød er forbeholdt fejl. */ --money-in: #056153; --money-out: #0F1419; /* ---- tilstand ---------------------------------------------------------- Mørke, mættede toner der bærer tekst på Paper. De er IKKE pengefarver: «det gik galt» og «pengene gik ud» er to forskellige beskeder, og de må aldrig dele et token. */ --fn-danger: #7A001F; --fn-warning: #563D02; --fn-success: #03493E; --fn-info: #004660; /* ---- tilstandsflader --------------------------------------------------- Tilføjet 16. august 2026, efter måling. Fire apps havde skrevet Tailwinds standardblå #2563EB ind i deres egen globals.css. Målt lå den 68-78 ΔE fra --fn-info. Det var ikke sjusk: de manglede en FLADE at lægge en tilstand på. --fn-info kunne allerede bære tekst på papir og fungere som massiv fyld med papirtekst, men der fandtes ikke noget at lægge bag et badge eller et banner, så de opfandt det. Svaret er ikke en lysere blå — det ville kollidere med at crimson er handlingen, ét sted pr. skærm. Svaret er en flade i tilstandens EGEN kulør, som tilstandens egen tekstfarve kan stå på. Udledt i HSL så kuløren overlever, ikke blandet mod papir (det giver grå). Målt i samme rækkefølge som tokens står nedenfor — danger / warning / success / info: 9,41 / 9,12 / 9,41 / 9,05:1. (Stod før som 9,05/9,41/9,12/9,41, hvilket var de samme fire tal i en anden rækkefølge end de tokens de beskrev. Rettet 17. august 2026.) */ --fn-danger-flade: #F8E5EA; --fn-warning-flade: #F8F2E5; --fn-success-flade: #E5F8F5; --fn-info-flade: #E5F3F8; /* ---- seriefarver til diagrammer ---------------------------------------- Tilføjet 17. august 2026, fordi hullet var målbart: Recharts er afhængighed i tre apps, og to projekter havde allerede opfundet deres egne (--chart-1…5, --viz-*). Én af dem, #C92351, lå 8,8 ΔE fra crimson — en dataserie der lignede handlingen. I et diagram ER farven funktionen: den er det eneste der binder en kurve til sin etiket. Derfor bryder disse ikke med «farve er funktion» — de er det eneste sted hvor kulør bærer identitet frem for tilstand. SEKS, og ikke flere. Ud over seks kan man ikke længere holde en signatur og en kurve sammen i hovedet; da skal der grupperes, ikke tilføjes farve. Hver farve er valgt af en søgning under fire begrænsninger på én gang: · mindst 3:1 mod sin grund · mindst 25 ΔE fra HVER af brandets egne farver, 32 fra crimson — en serie må aldrig kunne forveksles med handlingen eller en tilstand · mindst 40° kulørafstand indbyrdes, så etiketterne kan matches · adskillelige for normalt syn OG protanopi, deuteranopi og tritanopi. Målt værste tilfælde: 20,0 ΔE (protanopi). Lysheden trapper 30 → 58 i L*, med mindst 4,8 mellem trinene. Det er ikke æstetik: et kontoudtog bliver printet, og i gråtone er lysheden det eneste der er tilbage. */ --serie-1: #55387F; /* L* 30 · violet · 8,89:1 mod paper */ --serie-2: #0D682E; /* L* 38 · skovgrøn · 6,61:1 */ --serie-3: #9D4971; /* L* 43 · hindbær · 5,54:1 */ --serie-4: #7C741E; /* L* 48 · oliven · 4,59:1 */ --serie-5: #0F84CD; /* L* 53 · blå · 3,86:1 */ --serie-6: #B18167; /* L* 58 · ler · 3,24:1 */ /* ---- den neutrale skala, på Paper -------------------------------------- Tolv trin fra papir til blæk. Alt grå i grænsefladen kommer herfra; der findes ikke en trettende. */ --n-1: #FAFAF7; --n-2: #ECECE9; --n-3: #D9D9D6; --n-4: #C5C5C2; --n-5: #AFAFAC; --n-6: #96989A; --n-7: #808284; --n-8: #686B6D; --n-9: #515457; --n-10: #3A3E42; --n-11: #24282D; --n-12: #0F1419; /* ---- hårstreg og hover ------------------------------------------------- En kant er blæk ved lav alpha, aldrig en grå værdi: så følger den grunden i stedet for at ligge oven på den. */ --hair: rgba(15, 20, 25, .08); --hover: rgba(15, 20, 25, .03); } /* ---- den neutrale skala, på Ink ------------------------------------------ Samme tolv trin, vendt om. Et ophøjet felt på nat TRÆDER OP ad skalaen i stedet for at kaste en skygge — en skygge kan ikke ses på mørk grund. */ [data-ground="nat"], .nat { --n-1: #0F1419; --n-2: #191E22; --n-3: #282B2F; --n-4: #383B3E; --n-5: #4B4D50; --n-6: #5F6163; --n-7: #757779; --n-8: #8E8E8C; --n-9: #A7A7A4; --n-10: #C1C1BF; --n-11: #DDDDDA; --n-12: #FAFAF7; --hair: rgba(250, 250, 247, .12); --hover: rgba(250, 250, 247, .06); /* Penge og tilstand SKAL skifte værdi her, ikke bare arves. Målt mod Ink: dagsværdierne ligger på 1,63-2,50:1 og er ulæselige; disse på 6,32-10,49:1. Et token der beholder sin dagsværdi på nat er en tilgængelighedsfejl der ikke ses før nogen prøver at læse den. */ --money-in: #34A893; /* handlingens gradient på nat: bright er hvilen, lyset er bright mod paper */ --handling-flade: linear-gradient(90deg, var(--crimson-bright) 0%, var(--crimson-bright) 40%, color-mix(in srgb, var(--crimson-bright) 80%, var(--paper)) 100%); --handling-lille: linear-gradient(90deg, var(--crimson-bright) 0%, color-mix(in srgb, var(--crimson-bright) 75%, var(--paper)) 100%); --handling-stor: linear-gradient(90deg, var(--crimson-bright) 0%, var(--crimson-bright) 20%, color-mix(in srgb, var(--crimson-bright) 55%, var(--paper)) 100%); /* Penge UD er brødtekstens blæk, ikke en farve — og brødtekstens blæk vender med grunden. Uden denne linje beholdt --money-out sin dagsværdi #0F1419 og stod ink-på-ink: målt 1,00:1, altså usynlig. Hvert eneste hævet beløb forsvandt i mørk tilstand. Fanget og rettet 17. august 2026 — præcis den fejl advarslen ovenfor beskriver. */ --money-out: #FAFAF7; --fn-danger: #FFA3A6; --fn-warning: #E3BE78; --fn-success: #72D4BE; --fn-info: #7CCCF6; /* Tilstandsfladerne vender med. Samme kulør, lav lyshed i stedet for høj, så nattens lyse tilstandsfarve kan stå på den. Målt: 8,91 / 8,44 / 8,22 / 8,67:1. */ --fn-danger-flade: #321314; --fn-warning-flade: #2F2616; --fn-success-flade: #182D28; --fn-info-flade: #132732; /* Serierne beholder deres kulør og bliver løftet, ikke byttet om: en kurve skal være den samme kurve når skærmen skifter grund. På ink kræver 3:1 at L* ≥ 43,4, så dagens mørke toner kan ikke gå igen. Målt værste tilfælde: 22,3 ΔE (tritanopi). Kontrast 3,84-12,48:1. */ --serie-1: #726AAA; /* L* 48 · 3,84:1 mod ink */ --serie-2: #379A69; /* L* 57 · 5,28:1 */ --serie-3: #C589AD; /* L* 64 · 6,66:1 */ --serie-4: #ADB360; /* L* 71 · 8,28:1 */ --serie-5: #9ABCFD; /* L* 76 · 9,68:1 */ --serie-6: #F2CDB3; /* L* 85 · 12,48:1 */ /* Crimson bliver stående: #C1213F måler 3,14:1 på Ink og bærer derfor ikke tekst dér -- den er en FLADE på nat (knap, streg, prik), ikke en skrift. Skal der stå crimson tekst på mørk grund, er svaret et lysere token, ikke en større skriftgrad. */ } /* ─── fundament/03-skrift/sejr-typografi.css ─── */ /* SEJR — typografi. Söhne fra Klim, og en skala der ikke kan forhandles. * * Udtrukket 16. august 2026 fra 03-TYPOGRAPHY/tokens/sejr-type.css. Værdierne * er kopieret, ikke skrevet af hukommelsen. * * TO REGLER BÆRER RESTEN: * 1. Et pengetal står ALTID i mono, med tnum og zero slået til. Ellers * skifter cifrene bredde mellem to opdateringer, og en kolonne tal * hopper. Et beløb er ikke brødtekst. * 2. Et pengetal er aldrig mindre end brødtekst. Gulvet er 11 px for al * type overhovedet; et beløb starter ved 14. * * OM GULVET, RETTET 17. AUGUST 2026: filen sagde før at 11 px «er et lovkrav * for betalingstjenester i EU». Det passer ikke. WCAG 2.1 AA — som EN 301 549 * indarbejder, og som EU's tilgængelighedsdirektiv (2019/882) kræver af * betalingstjenester — stiller INTET krav om en mindste skriftstørrelse. Den * stiller krav om at tekst kan forstørres 200 % (1.4.4) og om tekstafstand * (1.4.12). 11 px er SEJRs eget gulv, og det er et godt gulv — men det er * vores beslutning, ikke lovens. En brandbog der citerer en lov der ikke * findes, bliver citeret videre. * * Söhne er licenseret fra Klim Type Foundry. Se fonts/LICENSE.md før filerne * lægges på et nyt domæne — licensen tæller domæner, ikke projekter. */ @font-face{font-family:'Söhne';src:url("/identitet/aktiver/soehne-buch.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Söhne';src:url("/identitet/aktiver/soehne-kraftig.woff2") format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Söhne Breit';src:url("/identitet/aktiver/soehne-breit-halbfett.woff2") format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Söhne Mono';src:url("/identitet/aktiver/soehne-mono-buch.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap} :root { /* ---- snit -------------------------------------------------------------- Tre familier, ikke flere. Breit er KUN til display og ordmærke; bruges den til brødtekst, forsvinder forskellen på en overskrift og en sætning. */ --font-sans: 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-breit: 'Söhne Breit', 'Söhne', sans-serif; --font-mono: 'Söhne Mono', ui-monospace, SFMono-Regular, monospace; /* ---- skala ------------------------------------------------------------- NI trin. Der var ti indtil 17. august 2026, og faren viste sig at være den modsatte af den filen vogtede mod: den advarede mod et ellevte trin, men problemet lå i bunden. 11 · 12 · 13 · 14 er fire trin inden for 3 px (forhold 1,077-1,091) — for tæt til at vælges bevidst, og derfor valgt tilfældigt. Kittet brugte de fire nederste 18 gange og de to øverste nul. 12 px er derfor væk. Billedtekst og hjælpetekst bruger nu 13, altså ét trin STØRRE — færre valg og bedre læsbarhed på én gang. Hvert trin har ét job. Er du i tvivl om hvilket, mangler der hierarki i designet, ikke en værdi her. */ --fs-meta: 11px; --lh-meta: 1.4; /* KUN versal-etiketter, med spor */ --fs-body-s: 13px; --lh-body-s: 1.5; /* tætte flader, tabelceller, hjælpetekst */ --fs-body: 14px; --lh-body: 1.5; --fs-lead: 16px; --lh-lead: 1.45; --fs-title: 20px; --lh-title: 1.25; --fs-h3: 26px; --lh-h3: 1.15; --fs-h2: 34px; --lh-h2: 1.15; --fs-h1: 44px; --lh-h1: 1.05; --fs-display: 60px; --lh-display: 1.05; /* ---- spor -------------------------------------------------------------- Tilføjet 17. august 2026. Uden dem opfandt hver komponent sin egen: der lå seks forskellige værdier i UI-kittet, og .06em stod skrevet på to måder, så de ikke engang faldt sammen. Sporet følger graden omvendt: små versaler skal spredes for at kunne læses, store grader skal strammes for ikke at falde fra hinanden. */ --spor-etiket: .06em; /* VERSAL-ETIKETTER på 11-13 px */ --spor-brod: 0; /* brødtekst rører man ikke */ --spor-titel: -.01em; /* 20-34 px */ --spor-display:-.015em; /* 44-60 px */ /* ---- mål --------------------------------------------------------------- Linjelængde. Stod ingen steder før, så hver side gættede. 65 tegn er hvor øjet finder næste linje uden at lede. Tabeller og talkolonner er undtaget — de læses lodret, ikke i linjer. */ --maal-brod: 65ch; --maal-kort: 48ch; /* ---- vægte ------------------------------------------------------------- Tre. Söhne har flere; brandet bruger disse. */ --fw-body: 400; --fw-medium: 500; --fw-display: 600; /* ---- tal --------------------------------------------------------------- Ikke en stilart. En regel. */ --num-font: var(--font-mono); --num-features: "tnum" 1, "zero" 1; } /* Ingen forfalskede snit. Mangler en vægt eller et kursiv, tegner browseren det selv ved at skråstille eller fortykke — og et syntetisk halvfedt Söhne ligner næsten det rigtige. Næsten er værre end forkert: det opdages ikke. Med denne fejler et manglende snit synligt i stedet for stille. */ :where(html) { font-synthesis: none; } /* Et beløb sættes med denne, ikke med en klasse der ligner den. */ .belob, [data-belob] { font-family: var(--num-font); font-feature-settings: var(--num-features); font-size: max(14px, 1em); /* aldrig under brødtekst */ } /* ─── fundament/07-bevaegelse/sejr-bevaegelse.css ─── */ /* SEJR IDENTITY — bevægelse. * * Skrevet 16. august 2026 som en del af SEJR UI. Flyttet i fundamentet * 17. august 2026: bevægelse er ikke skåret til én modtager. Terminalen, * websitet og en film står på de samme regler, og et kit må ikke eje noget * andre kits skal bruge. * * REGLEN: BEVÆGELSE ER BESKED, IKKE UDSMYKNING. * En overgang må kun findes hvis den svarer på et spørgsmål brugeren ellers * ville stille: hvor kom det fra, hvor gik det hen, hvad hører sammen. Kan * animationen fjernes uden at nogen bliver i tvivl om noget, skulle den ikke * have været der. * * OG DEN VIGTIGSTE: ET BELØB ANIMERER ALDRIG SIN VÆRDI. * Et tal der tæller op til saldoen er legetøj. I det sekund det ruller, viser * skærmen et beløb der ikke er sandt — og en handelsdrivende der skimmer * kolonnen aflæser et forkert tal. Beløbet skifter i ét spring, eller lader * være. */ :root { /* ---- varighed ---------------------------------------------------------- Fire trin. Jo større fladen er, jo længere må den om at komme frem — et ark på 600px der åbner på 120ms læses som et glimt, ikke en bevægelse. */ --tid-1: 120ms; /* tilstand: hover, fokus, tryk */ --tid-2: 180ms; /* små ting ind/ud: chip, tooltip, række */ --tid-3: 240ms; /* ark, dialog, skuffe */ --tid-4: 320ms; /* sideskift, stor flade */ /* ---- kurver ------------------------------------------------------------ Noget der kommer FREM bremser op (ease-ud). Noget der forsvinder tager fart (ease-ind) — det skal ikke bede om opmærksomhed på vej ud. Ingen fjedre, intet overshoot: penge må ikke hoppe. */ --ease-ud: cubic-bezier(.2, 0, 0, 1); --ease-ind: cubic-bezier(.4, 0, 1, 1); --ease-std: cubic-bezier(.3, 0, .2, 1); /* ---- færdige overgange ------------------------------------------------- Brug disse frem for at sætte varighed og kurve hver for sig. */ --overgang-tilstand: var(--tid-1) var(--ease-std); --overgang-ind: var(--tid-3) var(--ease-ud); --overgang-ud: var(--tid-2) var(--ease-ind); /* ── De lange tider, 2. september 2026 ────────────────────────────────── Kom til da kittet fik levende plader og en tæller. De er ikke overgange — de er TEMPI, og de er langsomme med vilje: en plade der drejer på 90 sekunder, kan man ikke SE bevæge sig, kun se at den er anderledes hver gang man kigger. Det er forskellen på en tekstur og en animation. Tælleren er 900 ms, fordi et beløb der tælles op på 320 ms er et lotteri: øjet skal kunne følge med, og kurven skal bremse ind i tallet. */ --tid-taeller: 900ms; --tempo-omdrejning: 90s; --tempo-drift: 60s; } /* Respekter systemvalget. Dette er ikke en venlighed — for nogen udløser bevægelse kvalme og svimmelhed, og en betalingsapp er ikke et sted man kan vælge at forlade. REGLEN: DET DER FLYTTER SIG, STOPPER. DET DER SKIFTER FARVE, BLIVER. Reduceret bevægelse er ikke en ringere udgave af grænsefladen — det er den samme grænseflade, hvor kun bevægelsen er taget ud. En knap der ikke kvitterer for et tryk er i stykker, ikke tilgængelig. RETTET 17. AUGUST 2026. Blokken satte før `transition-duration: 1ms` på `*` med !important. Den ramte ALT — også farveskiftet på en knap. Filen holdt `--tid-1` på 120ms og skrev i kommentaren at tilstandsskift beholder en anelse tid; målt i Chrome med reduceret bevægelse var den faktiske varighed 1 ms. Kommentaren beskrev en hensigt, ikke koden. Nu begrænses `transition-property` i stedet: kun farve og gennemsigtighed må overgå, og de gør det på --tid-1. Alt der har med sted, størrelse eller form at gøre — transform, height, top — er ikke på listen og springer derfor. Det er samme svar, men uden at slå kvitteringen ihjel. */ @media (prefers-reduced-motion: reduce) { :root { --tid-2: var(--tid-1); --tid-3: var(--tid-1); --tid-4: var(--tid-1); --overgang-ind: var(--tid-1) var(--ease-std); --overgang-ud: var(--tid-1) var(--ease-std); } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; /* Hvidliste, ikke sortliste: en ny egenskab der kan flytte noget, er udelukket som udgangspunkt i stedet for at skulle huskes. */ transition-property: color, background-color, border-color, outline-color, box-shadow, fill, stroke, opacity !important; transition-duration: var(--tid-1) !important; } } /* ─── kits/ui/sejr-ui.css ─── */ /* SEJR UI — ét importpunkt. * * Version 3.0.0 · 22. august 2026 · lag ovenpå SEJR IDENTITY. * * 22. august 2026: materialet kom til. Lysfaldet er læst ud af app-ikonet, * den delte skala ud af instrument-pladen, skraveringskoden ud af hatch- * fliserne. Indtil da var kittet korrekt og uden kendetegn — det kunne have * været et hvilket som helst systems. * * ─── INDLÆSNINGSRÆKKEFØLGEN ER IKKE VALGFRI ──────────────────────────────── * * 1. sejr-farver.css (SEJR IDENTITY / fundament/02-farve) * 2. sejr-typografi.css (SEJR IDENTITY / fundament/03-skrift) * 3. sejr-bevaegelse.css (SEJR IDENTITY / fundament/07-bevaegelse) * 4. denne fil * * SEJR UI definerer INGEN farver, INGEN skriftgrader og INGEN varigheder. * Den definerer rum, radius, flader, løft og glas — og giver de rå tokens fra * identiteten semantiske navne. Bevægelsen lå her indtil 17. august 2026 og * hører i fundamentet: terminalen og websitet står på de samme kurver. Findes en værdi begge steder, driver de fra * hinanden; det er ikke en hypotese, det er målt i seks apps 16. august 2026. * * Mangler identiteten, fejler dette lag stille: var() falder tilbage til * ingenting, og fladerne bliver gennemsigtige. Det er med vilje synligt. */ /* ─── kits/ui/01-tokens/sejr-rum.css ─── */ /* SEJR UI — rum og radius. Laget OVENPÅ fundamentet. * * Skrevet 16. august 2026. Denne fil definerer INGEN farver og INGEN * skriftgrader — de kommer fra SEJR IDENTITY og må ikke gentages her. * Gentages en værdi to steder, driver de fra hinanden. Det er ikke en teori: * seks apps har allerede gjort det, målt samme dag som denne fil blev skrevet. * * REGLEN DER BÆRER RESTEN: RUMMET ER 4-GITTERET. * Hvert eneste mellemrum i grænsefladen er et multiplum af 4. Ikke fordi 4 er * magisk, men fordi et gitter kun virker hvis der ikke findes undtagelser — * én 5'er, og resten af skærmen står skævt uden at nogen kan se hvorfor. */ :root { /* ---- rum --------------------------------------------------------------- Tolv trin. Under 8 er det detaljer inde i en komponent; over 32 er det afstand MELLEM ting. Mangler du et trin imellem, mangler du hierarki — samme svar som skriftskalaen giver i fundament/03-skrift. */ --rum-0: 0; --rum-1: 2px; /* hårfin: ikon mod tekst, optisk justering */ --rum-2: 4px; /* gitterets grundenhed */ --rum-3: 8px; /* inde i en kontrol */ --rum-4: 12px; /* tæt indhold, tabelceller */ --rum-5: 16px; /* standard: kortets indre luft */ --rum-6: 20px; --rum-7: 24px; /* mellem beslægtede blokke */ --rum-8: 32px; /* mellem sektioner */ --rum-9: 40px; --rum-10: 48px; /* mellem hovedområder */ --rum-11: 64px; --rum-12: 80px; /* sidens yderste luft */ /* ---- radius ------------------------------------------------------------ Radius er ikke pynt — den siger hvor stor fladen er. Små ting får små hjørner. En 4px radius på et ark og en 4px radius på en chip får arket til at ligne en fejl. Tokenet hedder --hjorne-* og ikke --radius-*, fordi Tailwind v4 ejer --radius-namespacet i @theme. Kaldte vi dem det samme, ville mapningen blive selvrefererende (--radius-1: var(--radius-1)) og CSS ville smide hele erklæringen væk — stille, uden fejl nogen steder. */ /* V4, 27. august 2026 — HJØRNELOVEN. Morris: kittet lignede alle andres, og en del af hvorfor var hjørnerne: 10-14 px runder er app-plastik. Husets forbillede er kortet — ISO-hjørnet er 3,71 % af kortets bredde, præcist, ikke blødt — og aktiebrevets ramme. Skalaen er strammet tilsvarende. OG: pillen (--hjorne-fuld) er forbeholdt ting der GEOMETRISK er runde — kontaktens knap, prikken, avataren, chippens kryds. Aldrig knapper, badges eller vælgere: en pille er de andres formsprog. */ --hjorne-1: 3px; /* chip, badge, farveprøve */ --hjorne-2: 5px; /* input, tæt knap */ --hjorne-3: 6px; /* knap, indre kort */ --hjorne-4: 8px; /* kort */ --hjorne-5: 12px; /* ark, panel */ --hjorne-6: 16px; /* stor flade, fuldskærmsark */ --hjorne-fuld: 999px; /* KUN geometrisk rundt: kontaktknap, prik, avatar */ /* Mærket er undtagelsen: app-ikonets squircle er rx=115 på 512 = 22,46 %. Skal noget gengive ikonets form, bruges FORHOLDET, ikke en fast px-værdi — ellers holder formen kun i én størrelse. */ --hjorne-maerke: 22.46%; /* ---- kontrolhøjder ----------------------------------------------------- Én skala for hvor høj en klikbar ting er. Densiteten herunder skifter hvilken der gælder; komponenter refererer ALTID --kontrol-h, aldrig et tal. */ --kontrol-h-s: 32px; --kontrol-h-m: 40px; --kontrol-h-l: 48px; /* ---- densitet: komfortabel (standard) ---------------------------------- Kontorbrug, mus og tastatur. Erhvervskontoen sidder her. */ --kontrol-h: var(--kontrol-h-m); --kontrol-px: var(--rum-5); --kontrol-gap: var(--rum-3); --raekke-h: 44px; /* tabelrække */ --felt-px: var(--rum-4); --touch-min: var(--kontrol-h-m); } /* ---- densitet: kompakt --------------------------------------------------- Datatunge skærme — depotlister, afstemning, lange tabeller. Teksten bliver IKKE mindre; kun luften omkring den. 11px-gulvet i fundament/03-skrift er et lovkrav for betalingstjenester i EU, ikke en anbefaling, og densitet er ingen undtagelse. */ [data-taethed="kompakt"], .taethed-kompakt { --kontrol-h: var(--kontrol-h-s); --kontrol-px: var(--rum-4); --kontrol-gap: var(--rum-2); --raekke-h: 36px; --felt-px: var(--rum-3); } /* ---- densitet: berøring -------------------------------------------------- POS, terminal, telefon i hånden. 48px er gulvet for et mål der rammes med en finger — ikke 44, fordi en POS betjenes i fart, ofte skævt, nogle gange med handske. Alt klikbart SKAL opfylde --touch-min her. */ [data-taethed="beroring"], .taethed-beroring { --kontrol-h: var(--kontrol-h-l); --kontrol-px: var(--rum-6); --kontrol-gap: var(--rum-4); --raekke-h: 56px; --felt-px: var(--rum-5); --touch-min: var(--kontrol-h-l); } /* ══ KUN OPLÆST ═════════════════════════════════════════════════════════════ Tekst der findes for skærmlæseren og ikke for øjet. Den kom ind 23. august 2026 sammen med beslutningen om `÷`: en skærmlæser udtaler `÷` som «divided by», så «÷ 186.000 kr.» bliver læst op som et REGNESTYKKE og ikke som et beløb. Glyffen er præsentation; ordet er oplysningen, og de skal derfor stå hver for sig: minus `clip-path` frem for `clip`, og 1×1 px frem for 0×0: et element uden udstrækning springes over af nogle skærmlæsere. `white-space: nowrap` forhindrer at et langt ord ombrydes til en usynlig spalte der alligevel skubber til layoutet. */ .kun-oplaest { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ─── kits/ui/02-materiale/sejr-flader.css ─── */ /* SEJR UI — flader, tekstroller og løft. * * Skrevet 16. august 2026. Kræver at sejr-farver.css er indlæst FØRST. * * DENNE FIL DEFINERER INGEN FARVEVÆRDIER. Ikke én hex. Alt herunder peger på * --n-1 … --n-12 fra fundament/02-farve/sejr-farver.css. * * ─── HVORFOR SELEKTOREN ER SÅ MÆRKELIG ───────────────────────────────────── * * Man skulle tro at dette var nok: * * :root { --flade: var(--n-1); } * * Det er det ikke, og fejlen er stille. En custom property opløser sin var() * DÉR HVOR ERKLÆRINGEN STÅR — ikke dér hvor den bruges. Står --flade kun på * :root, bliver den regnet ud mod rodens --n-1 (#FAFAF7) én gang, og det * FÆRDIGE resultat arves nedad. Når identiteten så sætter --n-1: #0F1419 på * [data-ground="nat"], kører vores erklæring aldrig igen. Fladen bliver hvid * på nat, uden en eneste fejlmeddelelse nogen steder. * * Målt 16. august 2026: præcis dét skete. Derfor gentages selektorlisten fra * identiteten herunder, så erklæringen kører igen på nat-elementet og * opløses mod nat-elementets egen --n-1. * * Ændrer identiteten sin nat-selektor, SKAL denne liste følge med. */ :root, [data-ground="nat"], .nat { /* ---- flader ------------------------------------------------------------ Tre trin. Grunden, den løftede flade, og den nedsænkede. Dag: #FAFAF7 → #ECECE9 → #D9D9D6. Nat: #0F1419 → #191E22 → #282B2F. */ --flade: var(--n-1); /* sidens grund */ --flade-2: var(--n-2); /* kort, panel, række der er løftet */ --flade-3: var(--n-3); /* nedsænket: input-brønd, tom tilstand */ /* ---- tekstroller ------------------------------------------------------- Målt 16. august 2026 mod --flade og --flade-2, i begge grunde. Tallene står her fordi de er regnet, ikke skønnet. */ --tekst: var(--n-12); /* 17,70:1 / 15,64:1 — brødtekst, tal, titler */ --tekst-2: var(--n-9); /* 7,29:1 / 6,44:1 — sekundært, etiketter */ --tekst-3: var(--n-8); /* 5,13:1 / 4,53:1 — tertiært. GULVET. */ /* --n-7 er MED VILJE ikke en tekstrolle. Den måler 3,69:1 på dag og 4,12:1 på nat — under AA's 4,5:1 for brødtekst. Den må bruges til ikoner, skillelinjer og dekorativ grafik, aldrig til noget der skal læses. SEJR er en betalingstjeneste; tilgængelighed er et lovkrav her, ikke smag. */ --dekor: var(--n-7); /* ---- kanter ------------------------------------------------------------ Fra identiteten: blæk ved lav alpha, så kanten følger grunden i stedet for at ligge oven på den. Vender selv med på nat. */ --kant: var(--hair); --kant-staerk: var(--n-4); --flade-hover: var(--hover); /* ---- handling ---------------------------------------------------------- Crimson måler 5,65:1 på papir og 3,14:1 på ink. Derfor: på dag bærer den tekst, på nat er den en FLADE — knap, streg, prik — aldrig en skrift. Skal der stå crimson tekst på mørk grund, er svaret --crimson-bright, ikke en større skriftgrad. */ --handling: var(--crimson); /* Hover går NEDAD i skalaen, ikke opad. --crimson-bright bærer kun papirtekst med 4,14:1 som flade — under AA. Med --crimson-shade stiger kontrasten til 8,29:1 når man rører knappen, og --crimson-deep til 12,87:1 når man trykker. En tilstand må aldrig gøre en knap sværere at læse. Rettet 17. august 2026; se rollelisten i sejr-farver.css. */ --handling-hover: var(--crimson-shade); --handling-tryk: var(--crimson-deep); --paa-handling: var(--paper); /* tekst PÅ en crimson flade */ } /* ---- V4, 27. august 2026: PAPIRET FIK SIN VARME -------------------------- * * Morris: kittet lignede alle andres. En del af hvorfor var fladerne — den * løftede flade var kold grå (--n-2), mens identiteten hele tiden har haft * CREAM: «papir med varme: dokumenter, tryk, kortbagsider». Et kort i * appen ER husets dokument, så det står nu på dokumentpapir. * * Kun papir-grunden skifter. Nat gen-erklærer sine egne trin — det er * arvefælden fra filens top: uden gen-erklæringen ville nat arve papirets * FÆRDIGT opløste cream og male natkort lyse, stille, uden fejl. * * Målt: --tekst (#0F1419) på cream (#F2F1ED) er 16,38:1; --tekst-3 (#686B6D) * er 4,75:1 — begge over gulvet fra rollelisten ovenfor. */ :root { --flade-2: var(--cream); --flade-3: var(--n-2); } [data-ground="nat"], .nat { --flade-2: var(--n-2); --flade-3: var(--n-3); } /* ---- husets flade: porcelæn -------------------------------------------- * * Skrevet 14. september 2026. Porcelæn kom i fundamentet 12. september som * crimsons makker, og indtil i dag fandtes den ikke på nogen skærm: kittets * flader var tre gråtoner, og appen var grå med én crimson knap. * * ROLLEN: den ene flade pr. skærm der er SEJR's. Saldoblokken på hjem. Den * nyeste af de små sejre. Første dag. Ikke en anden gråtone, og ikke en * flade man må bruge hvor som helst: én pr. skærm, ellers er den ingen. * * PARRET: crimson bliver hvor den er, som handlingen. Morris, samme dag: * «porcelæn og crimson skal kunne eksistere på samme tid». De må gerne stå * i samme synsfelt; de må ikke stå på samme flade. Crimson på porcelæn * måler 3,2:1 og bærer ikke tekst. * * TEKSTEN PÅ DEN ER BLÆK, også på nat. Det er ikonets logik: blæk på * porcelæn. Derfor sætter .flade-hus sine egne tekstroller, så en komponent * inde i den ikke arver nattens lyse tekst og forsvinder. Målt: blæk på * porcelæn 12,0:1, på porcelæn-lys 12,8:1. */ :root, [data-ground="nat"], .nat { --flade-hus: var(--porcelaen); --tekst-hus: var(--ink); } [data-ground="nat"], .nat { --flade-hus: var(--porcelaen-lys); } .flade-hus { background-color: var(--flade-hus); color: var(--tekst-hus); --flade: var(--flade-hus); --flade-2: var(--flade-hus); --flade-3: color-mix(in srgb, var(--tekst-hus) 8%, var(--flade-hus)); --tekst: var(--tekst-hus); --tekst-2: color-mix(in srgb, var(--tekst-hus) 78%, var(--flade-hus)); --tekst-3: color-mix(in srgb, var(--tekst-hus) 64%, var(--flade-hus)); --kant: color-mix(in srgb, var(--tekst-hus) 18%, transparent); --kant-staerk: color-mix(in srgb, var(--tekst-hus) 34%, transparent); --dekor: color-mix(in srgb, var(--tekst-hus) 55%, var(--flade-hus)); /* Kortets varme og lys er tegnet til gråt; på husets flade er der intet at varme. Lysfaldet bliver, for det er materialets lov. */ --kort-varme: none; --kort-lys: none; --kort-kant-top: var(--kant); --kort-kant-bund: var(--kant); } /* ---- grunden skal males, også når den skifter midt på siden -------------- * * FUNDET 22. august 2026, af `eksempler.html`. * * `sejr-ui.css` maler grunden på :where(html). Det er nok så længe hele siden * har samme grund. Men et ark der viser en natskærm midt i en dagsside — * eller en app der lader ét panel være mørkt — sætter [data-ground="nat"] på * en BEHOLDER, og så skete der indtil nu dette: * * · --flade og --tekst fik rigtigt nok nattens værdier på beholderen, * · men beholderens egen `color` var allerede arvet fra , hvor * var(--tekst) var opløst mod dagens --n-12. Altså blæk. * * Komponenterne skjulte fejlen, fordi næsten alle sætter deres egen farve. * Det der IKKE gør — alt der bygger på currentColor — blev usynligt: den * delte skala stod mørk på mørk grund og forsvandt sporløst. * * Derfor maler krogen sig selv. :where() giver den nul vægt, så enhver * komponent stadig vinder over den. */ :where([data-ground="nat"], .nat, [data-ground="dag"], .dag) { color: var(--tekst); } /* MEN ALDRIG PAA RODEN, og det er ikke en detalje. * * FUNDET 23. august 2026, i hq-sejr-co. Den satte krogen paa for at * vende hele paletten -- helt efter bogen -- og Boersen-tapetet forsvandt. * * Mekanikken er en af de faa i CSS hvor rodelementet opfoerer sig anderledes * end alt andet: * * Har INGEN baggrund, propagerer 's til laerredet, og body * maler saa ingen kasse selv. Et element med `z-index: -10` inde i body * ligger dermed oven paa laerredet og ses. * * Faar en baggrund, gaar DEN til laerredet -- og body maler nu sin * egen som en ugennemsigtig kasse. Negative z-index males FOER body's * baggrund i maleraekkefoelgen, saa tapetet forsvinder under den. * * Maalt i browseren: uden krogen er html transparent og body #0F1419; med * krogen er html #FAFAF7 OG body #0F1419. Ingen fejl, ingen advarsel, bare * et billede der er vaek. * * Roden males derfor af `sejr-ui.css`' egen `:where(html)`-regel, som en app * kan lade vaere med at hente hvis den selv maler grunden. Krogen paa roden * skal stadig vende TOKENS -- det goer den i sejr-farver.css -- og teksten, * som ovenfor. Bare ikke baggrunden. * * `:where(:not(html))` og ikke `:not(html)`: uden det ydre :where() vejer * selektoren (0,0,1), og hele pointen med denne blok er at den vejer nul, saa * enhver komponent stadig vinder over den. */ :where([data-ground="nat"], .nat, [data-ground="dag"], .dag):where(:not(html)) { background-color: var(--flade); } /* ---- løft: dag ----------------------------------------------------------- Papir kan bære en skygge. Fire trin, alle med samme lysretning: lyset kommer ovenfra, så skyggen falder nedad. 6. SEPTEMBER 2026: SKYGGEN BLEV TIL TRE LAG, OG DEN BLEV TIL BLÆK. Morris, med kataloget åbent lige efter at knappen fik dybde: fladerne var det næste der var fladt. Den gamle skygge var ét blødt lag ved 5–8 %, og på cream mod papir — hvor kortet er MØRKERE end grunden — læses det som en plet, ikke som noget der ligger oven på bordet. Nu har hvert løft tre lag med hver sin opgave: en kontaktskygge på 1 px der holder kanten skarp, en nær skygge der giver fladen tykkelse, og en blød der løfter den fra grunden. Det er den opbygning glasset har haft siden 16. august; kortet fik den aldrig. Og blækket kommer nu fra --ink gennem color-mix, ikke som rgba() skrevet i hånden. Mappens regel er at intet hex står her; denne blok var den ene af to der brød den. Den anden var glasset, rettet samme dag. Blokken står på :root ALENE — modsat farverne ovenfor. --ink og --paper vender ikke om på nat, så der er intet at gen-opløse; nat-blokken herunder erstatter værdierne helt, fordi det er en anden fysik. */ :root { --loft-1: 0 1px 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent); --loft-2: 0 1px 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--ink) 7%, transparent), 0 12px 24px -12px color-mix(in srgb, var(--ink) 14%, transparent); --loft-3: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent), 0 6px 12px -4px color-mix(in srgb, var(--ink) 9%, transparent), 0 20px 40px -16px color-mix(in srgb, var(--ink) 18%, transparent); --loft-4: 0 2px 4px color-mix(in srgb, var(--ink) 7%, transparent), 0 12px 24px -8px color-mix(in srgb, var(--ink) 12%, transparent), 0 32px 64px -20px color-mix(in srgb, var(--ink) 24%, transparent); --saenket: inset 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent); } /* ---- løft: nat ----------------------------------------------------------- "En skygge kan ikke ses på mørk grund" står ordret i sejr-farver.css, og det er derfor denne blok findes: løft er IKKE en omvendt værdi, det er en anden fysik. På nat kommer dybden af to ting — en tynd lysstribe i OVERKANTEN, hvor lyset ville ramme en hævet kant, og en rigtig mørk skygge under, der forankrer fladen. Fladen træder desuden op ad gråskalaen, præcis som identiteten foreskriver. Her er gentagelsen ægte: værdierne er andre, ikke bare omvendte. Skyggen var rent sort til 6. september 2026; nu er den --ink, husets eget mørke, fem procentpoint tættere for at veje det samme. */ [data-ground="nat"], .nat { --loft-1: inset 0 1px 0 color-mix(in srgb, var(--paper) 7%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 45%, transparent); --loft-2: inset 0 1px 0 color-mix(in srgb, var(--paper) 7%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 40%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--ink) 65%, transparent); --loft-3: inset 0 1px 0 color-mix(in srgb, var(--paper) 7%, transparent), 0 2px 4px color-mix(in srgb, var(--ink) 45%, transparent), 0 18px 36px -14px color-mix(in srgb, var(--ink) 70%, transparent); --loft-4: inset 0 1px 0 color-mix(in srgb, var(--paper) 9%, transparent), 0 4px 8px color-mix(in srgb, var(--ink) 50%, transparent), 0 32px 64px -20px color-mix(in srgb, var(--ink) 75%, transparent); --saenket: inset 0 2px 5px color-mix(in srgb, var(--ink) 60%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--paper) 7%, transparent); } /* ---- fokus --------------------------------------------------------------- Én fokusring for hele systemet. Den skal kunne ses på begge grunde og oven på både flade og glas, derfor to lag: en mørk/lys kerne og en ydre ring i grundens egen farve, så den aldrig forsvinder ind i det den ligger på. Fjern aldrig outline uden at sætte noget i stedet — tastaturbrug er den eneste vej gennem appen for nogle brugere. Samme selektorliste som farverne ovenfor, og af præcis samme grund: ringen er bygget af --flade og --tekst, så den skal erklæres igen på nat for at blive opløst mod nat-værdierne. */ :root, [data-ground="nat"], .nat { --fokus-ring: 0 0 0 2px var(--flade), 0 0 0 4px var(--tekst); /* Sløret bag et ark. Altid blæk, også på nat — et slør er fravær af lys, ikke en flade der skal vende om. Det er et token og ikke en rgba() gemt nede i en komponent, så der findes ét sted at ændre det. */ --slor: color-mix(in srgb, var(--ink) 55%, transparent); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--fokus-ring); border-radius: var(--hjorne-2); } /* ─── kits/ui/02-materiale/sejr-lys.css ─── */ /* SEJR UI — lysfaldet. Materialeloven, læst ud af mærket. * * Skrevet 22. august 2026. * * ─── HVOR DEN KOMMER FRA ─────────────────────────────────────────────────── * * Den er ikke opfundet til lejligheden. Den står allerede i * `fundament/01-maerke/sejr-icon.svg`, som blev valgt 16. august 2026: * * * * * * Altså: lyset kommer OVENFRA, i papir, ved lav alpha, og er væk ved 55 %. * Intet reflekspunkt. Ingen bevel. Intet korn. Ikonet er hele materialeloven * skrevet ned i fire linjer, og indtil nu var appen ikke lavet af det samme. * * ─── HVORFOR DAGEN OGSÅ HAR ET LYSFALD (fra 6. september 2026) ───────── * * Indtil 6. september 2026 var `--lysfald` `none` på dag, med argumentet at * papir løftes med skygge alene. Det holdt så længe den løftede flade var * LYSERE end grunden. Men siden V4 (27. august) står kortet på cream, og * cream er mørkere end papir: et kort uden lys i overkanten læses som en * plet i bordet, ikke som noget der ligger oven på det. Morris så det med * kataloget åbent, lige efter at knappen havde fået sin dybde. * * Dagens lysfald er derfor det samme fald som nattens, men i papir mod * cream: en hårstreg på 1 px i overkanten hvor lyset rammer — det ikonet * kalder `lit` — og et fald der er væk ved 55 %. Stadig intet reflekspunkt, * ingen bevel. Fordi det ligger i LYSFALDET og ikke i løftet, rammer det * kun de flader der er lavet af papir: tooltip'en, tabellens * handlingslinje og betalingskortet er blæk, bruger `--loft-*` uden * lysfald (kortet omdefinerer sit eget), og får ingen hvid streg. * * En komponent skriver stadig * * background-image: var(--lysfald); * * ÉN gang, uden en grundselektor, og får det rigtige begge steder. * * ─── HVORFOR DER IKKE STÅR EN FARVE I FILEN ──────────────────────────────── * * Reglen for denne mappe er at der ikke skrives hex her. `sejr-glas.css` * brød den med rgba(250,250,247,…) skrevet i hånden fra 16. august til * 6. september 2026: papir stod to steder, og to steder driver. Her — og * nu også dér — er det løst med color-mix, så papiret bliver ved med at komme * fra `--paper` i identiteten. Ændres papiret, følger lyset med. */ :root { /* Dag: papir mod cream. Hårstregen først, så faldet. */ --lysfald: linear-gradient( 180deg, color-mix(in srgb, var(--paper) 90%, transparent) 0, color-mix(in srgb, var(--paper) 90%, transparent) 1px, color-mix(in srgb, var(--paper) 55%, transparent) 1px, color-mix(in srgb, var(--paper) 0%, transparent) 55%); --lysfald-svag: linear-gradient( 180deg, color-mix(in srgb, var(--paper) 30%, transparent) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 55%); /* Den lyse hårstreg som KANT — bruges hvor en flade ikke har et lysfald at lægge den i. På dag er det den stærkere blækkant. */ --kant-lyst: var(--kant-staerk); } /* Samme selektorliste som resten af mappen, og af samme grund: en custom property opløser sin var() dér hvor erklæringen står. --kant-lyst peger på --kant-staerk → --n-4, som vender om på nat; stod erklæringen kun på :root, ville nattens værdi blive dagens. Se hovedet af sejr-flader.css. */ [data-ground="nat"], .nat { /* 11,5 % og ikke ikonets 13 %: ikonet er 512 px og ses som ét objekt, en flade er 400-1200 px bred og ses ved siden af tre andre. Faldet til nul ved 55 % er uændret — det er DÉT der gør at fladen ser krum ud i stedet for at se ud som om den har en lysere kant limet på. */ --lysfald: linear-gradient( 180deg, color-mix(in srgb, var(--paper) 11.5%, transparent) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 55%); /* Til flader der ligger LAVERE end grunden — en nedsænket brønd, en graf der er baggrund for noget andet. Mindre lys, samme fald. */ --lysfald-svag: linear-gradient( 180deg, color-mix(in srgb, var(--paper) 6%, transparent) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 55%); --kant-lyst: color-mix(in srgb, var(--paper) 20%, transparent); } /* ---- fladen som materiale ------------------------------------------------ En klasse for det der ikke er en komponent: en vilkårlig flade der skal være lavet af det samme som resten. Komponenterne bruger `--lysfald` direkte og har ikke brug for denne. */ .flade-lys { background-color: var(--flade-2); background-image: var(--lysfald); border: 1px solid var(--kant); border-radius: var(--hjorne-4); } .flade-lys-dyb { background-color: var(--flade); background-image: var(--lysfald-svag); } /* ─── kits/ui/02-materiale/sejr-skala.css ─── */ /* SEJR UI — den delte skala. Husets kendetegn i grænsefladen. * * Skrevet 22. august 2026. * * ─── HVAD DEN ER, OG HVOR DEN KOMMER FRA ─────────────────────────────────── * * En grundlinje med en stregning pr. enhed og hver femte ført helt igennem. * Den er ikke tegnet til lejligheden: det er den lineære del af * `instrument()` i `fundament/05-gravure/byg-gravure.py` — «graferens rette * akse, som en korde inde i limben». * * `fundament/09-dataviz/SEJR-Dataviz.md` regel 6 siger allerede med ord hvad * den betyder: «aksen er en delt skala, ikke et gitter. Et fuldt gitter * lægger streger hen over dataene, en skala står ved siden af og lader fladen * være.» Her får den sætning en form, og formen bliver husets kendetegn: * under overskriften, langs kortets underkant, under tabellen, som grafens * akse. Fladen er MÅLT, ikke bare en firkant. * * ─── HVORFOR DEN ER REN CSS OG IKKE EN GENERERET SVG ─────────────────────── * * Første udkast lagde den ind som to data-URI'er — én i blæk, én i papir — * skrevet af en generator. Det virkede, og det var forkert af tre grunde: * farven blev bagt ind (og denne mappe skriver ingen farver), skalaen kunne * ikke arve `currentColor` fra det den lå i, og der skulle en generator til * for tre gradienter. * * Her er den tre baggrundslag: hovedstregningerne, de små, og grundlinjen. * Alle tre i `currentColor`, så skalaen tager farve efter det den ligger i og * vender med på nat af sig selv. * * ─── HVOR DEN ALDRIG MÅ LIGGE ────────────────────────────────────────────── * * Ikke hen over et beløb og ikke hen over en postering. Det er den samme lov * som for gravuren i `fundament/05-gravure`: mønstret parterer sig OMKRING * tallet og lader midten være. Skalaen er en KANT — over, under eller ved * siden af — aldrig en grund. */ :root { --skala-h: 13px; /* båndets højde */ --skala-delt: 10px; /* afstand mellem to små stregninger */ --skala-styrke: .34; /* dagens: blæk på papir tåler lidt mere */ } [data-ground="nat"], .nat { /* Nat: en lys streg på mørk grund lyser optisk mere end den måler. Samme forhold som stregvægten i gravuren — se `--gk` i byg-gravure.py. */ --skala-styrke: .30; } .skala { height: var(--skala-h); opacity: var(--skala-styrke); flex: none; /* Tre lag, alle bundstillede: hoved, små, grundlinje. Lagenes indbyrdes vægt er de samme tre tal som pladen tegner med (0,7 / 0,35 / 0,55) — ellers er det ikke den samme skala, det er bare nogle streger. */ background-repeat: no-repeat; background-position: left bottom; background-size: 100% calc(var(--skala-h) * .72), 100% calc(var(--skala-h) * .34), 100% 1px; background-image: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 70%, transparent) 0 1px, transparent 1px calc(var(--skala-delt) * 5)), repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 35%, transparent) 0 1px, transparent 1px var(--skala-delt)), linear-gradient( color-mix(in srgb, currentColor 55%, transparent), color-mix(in srgb, currentColor 55%, transparent)); } /* Stregningerne peger NEDAD. Til en skala der ligger OVER indholdet — under en overskrift, over en tabel — så tænderne vender ind mod det de måler. Kun positionen skifter: lagene og deres højder er de samme tre, ellers er det ikke den samme skala vendt om, det er en anden skala. */ .skala-ned { background-position: left top; } /* Kortets fod: skalaen ført helt ud til kanten, uanset kortets polstring. Læg den som SIDSTE barn i kortet. */ .skala-fod { margin-left: calc(var(--rum-6) * -1); margin-right: calc(var(--rum-6) * -1); margin-top: var(--rum-5); opacity: calc(var(--skala-styrke) * .72); } /* Svagere udgave — når skalaen er ren rytme og ikke skal ses som en akse. */ .skala-svag { opacity: calc(var(--skala-styrke) * .6); } /* Reduceret gennemsigtighed betyder ikke reduceret mønster, men en skala der er så svag at den flimrer, er værre end ingen. */ @media (prefers-contrast: more) { :root, [data-ground="nat"], .nat { --skala-styrke: .55; } } /* ─── kits/ui/02-materiale/sejr-skravering.css ─── */ /* SEJR UI — skraveringskoden som maske. GENERERET. * * ██ RET ALDRIG DENNE FIL I HÅNDEN. Ret `byg-ui.py` og kør den igen. * * Fliserne er læst ud af `fundament/05-gravure/byg-gravure.py` og lagt ind * som masker, ikke som billeder: mærket tager farve efter det det ligger i, * via `background-color: currentColor`. Der står derfor ikke én farve i * filen — heller ikke selvom den er genereret. * * DEN LOV MÆRKET FINDES FOR: * Farve er bekræftelse, aldrig selve signalet. Cirka hver tolvte mand ser * rød og grøn ens, og `--fn-success` og `--fn-info` ligger 4,5 ΔE fra * hinanden under tritanopi. En skravering er ikke en farve — den overlever * dikromasi, gråtone, en fotokopi og en fax. * * Men skraveringen står ALDRIG alene heller. Rækkefølgen er: * ord først, så farve, så skravering. Tre bærere af samme besked. */ .kode { display: inline-block; width: 16px; height: 16px; border-radius: var(--hjorne-1); flex: none; /* Farven kommer fra det mærket ligger i. Ikke fra denne fil. */ background-color: currentColor; mask-repeat: repeat; mask-size: 8px 8px; mask-position: center; } /* INGEN -webkit-maskepræfiks, og det er et valg. Kittet bruger allerede color-mix() i `sejr-lys.css` og `sejr-skala.css`, og Tailwind v4 — som seks af syv apps kører — sætter selv gulvet ved Safari 16.4. Umaskeret `mask-image` har været i Safari siden 15.4, altså under det gulv. Præfikset ville fordoble filen (hver data-URI skrevet to gange) for browsere der alligevel ikke kan køre resten af kittet. Uden maskestøtte falder mærket tilbage til en fyldt firkant i tilstandens egen farve. Så er koden væk, men ordet og farven står stadig — og de var de to første bærere alligevel. Aldrig et halvt resultat. */ @supports not (mask-image: none) { .kode { opacity: .55; } } /* lodret — --fn-danger · kategori 1 */ .kode-lodret { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiIGFyaWEtaGlkZGVuPSJ0cnVlIj48cGF0aCBkPSJNNC4wMCAtMC41MEw0LjAwIDguNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOTYiIG9wYWNpdHk9IjAuNyIgc3R5bGU9Ii0tdzowLjk2O3N0cm9rZS13aWR0aDpjYWxjKHZhcigtLXcpICogdmFyKC0tZ2ssIDEpKSIvPjwvc3ZnPg==); } /* vandret — --fn-info · kategori 2 */ .kode-vandret { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiIGFyaWEtaGlkZGVuPSJ0cnVlIj48cGF0aCBkPSJNLTAuNTAgNC4wMEw4LjUwIDQuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOTYiIG9wYWNpdHk9IjAuNyIgc3R5bGU9Ii0tdzowLjk2O3N0cm9rZS13aWR0aDpjYWxjKHZhcigtLXcpICogdmFyKC0tZ2ssIDEpKSIvPjwvc3ZnPg==); } /* diagonal — --fn-success · --money-in · kategori 3 */ .kode-diagonal { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiIGFyaWEtaGlkZGVuPSJ0cnVlIj48cGF0aCBkPSJNLTAuNTAgOC41MEw4LjUwIC0wLjUwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjk2IiBvcGFjaXR5PSIwLjciIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48cGF0aCBkPSJNLTguNTAgOC41MEwwLjUwIC0wLjUwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjk2IiBvcGFjaXR5PSIwLjciIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48cGF0aCBkPSJNNy41MCA4LjUwTDE2LjUwIC0wLjUwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjk2IiBvcGFjaXR5PSIwLjciIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48L3N2Zz4=); } /* stippel — --fn-warning · kategori 4 */ .kode-stippel { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiIGFyaWEtaGlkZGVuPSJ0cnVlIj48cGF0aCBkPSJNMS41NSAyLjAwQTAuNDUgMC40NSAwIDEgMCAyLjQ1IDIuMDBBMC40NSAwLjQ1IDAgMSAwIDEuNTUgMi4wMFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOTYiIG9wYWNpdHk9IjAuODUiIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48cGF0aCBkPSJNNS41NSA2LjAwQTAuNDUgMC40NSAwIDEgMCA2LjQ1IDYuMDBBMC40NSAwLjQ1IDAgMSAwIDUuNTUgNi4wMFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOTYiIG9wYWNpdHk9IjAuODUiIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48L3N2Zz4=); } /* modsat — kategori 5 */ .kode-modsat { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiIGFyaWEtaGlkZGVuPSJ0cnVlIj48cGF0aCBkPSJNLTAuNTAgLTAuNTBMOC41MCA4LjUwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjk2IiBvcGFjaXR5PSIwLjciIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48cGF0aCBkPSJNLTguNTAgLTAuNTBMMC41MCA4LjUwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjk2IiBvcGFjaXR5PSIwLjciIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48cGF0aCBkPSJNNy41MCAtMC41MEwxNi41MCA4LjUwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjk2IiBvcGFjaXR5PSIwLjciIHN0eWxlPSItLXc6MC45NjtzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48L3N2Zz4=); } /* kryds — kategori 6 */ .kode-kryds { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiIGFyaWEtaGlkZGVuPSJ0cnVlIj48cGF0aCBkPSJNNC4wMCAtMC41MEw0LjAwIDguNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOTYiIG9wYWNpdHk9IjAuNyIgc3R5bGU9Ii0tdzowLjk2O3N0cm9rZS13aWR0aDpjYWxjKHZhcigtLXcpICogdmFyKC0tZ2ssIDEpKSIvPjxwYXRoIGQ9Ik0tMC41MCA0LjAwTDguNTAgNC4wMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC45NiIgb3BhY2l0eT0iMC43IiBzdHlsZT0iLS13OjAuOTY7c3Ryb2tlLXdpZHRoOmNhbGModmFyKC0tdykgKiB2YXIoLS1naywgMSkpIi8+PC9zdmc+); } /* ---- båndet på betalingskortet ------------------------------------------- `baand`-pladen: flettede sinusbånd, frøet med husets eget navn. Den ligger i SIN EGEN BANE på kortet og aldrig bag cifrene — første udkast førte den tværs gennem kortnummeret, hvilket er præcis det pladereglen forbyder: mønstret parterer sig omkring tallet og lader midten være. Også her en maske, så båndet tager kortets egen tekstfarve. */ .gravure-baand { height: 30px; background-color: currentColor; opacity: .34; mask-repeat: repeat-x; mask-size: 600px 30px; mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMzAiIGZpbGw9Im5vbmUiIGFyaWEtaGlkZGVuPSJ0cnVlIj48cGF0aCBkPSJNMC4wMCAxNi43M0wzLjc1IDE5LjczTDcuNTAgMjIuMTlMMTEuMjUgMjMuNzhMMTUuMDAgMjQuMzFMMTguNzUgMjMuNjdMMjIuNTAgMjEuOTVMMjYuMjUgMTkuMzRMMzAuMDAgMTYuMTZMMzMuNzUgMTIuODBMMzcuNTAgOS42N0w0MS4yNSA3LjE3TDQ1LjAwIDUuNjNMNDguNzUgNS4yM0w1Mi41MCA2LjA1TDU2LjI1IDcuOThMNjAuMDAgMTAuODFMNjMuNzUgMTQuMThMNjcuNTAgMTcuNjdMNzEuMjUgMjAuODZMNzUuMDAgMjMuMzRMNzguNzUgMjQuNzlMODIuNTAgMjUuMDRMODYuMjUgMjQuMDRMOTAuMDAgMjEuOTJMOTMuNzUgMTguOTNMOTcuNTAgMTUuNDRMMTAxLjI1IDExLjg5TDEwNS4wMCA4LjcyTDEwOC43NSA2LjMzTDExMi41MCA1LjAwTDExNi4yNSA0LjkyTDEyMC4wMCA2LjA4TDEyMy43NSA4LjM1TDEyNy41MCAxMS40NEwxMzEuMjUgMTQuOTZMMTM1LjAwIDE4LjQ4TDEzOC43NSAyMS41NUwxNDIuNTAgMjMuODFMMTQ2LjI1IDI0Ljk2TDE1MC4wMCAyNC44OEwxNTMuNzUgMjMuNThMMTU3LjUwIDIxLjIzTDE2MS4yNSAxOC4xMkwxNjUuMDAgMTQuNjVMMTY4Ljc1IDExLjI1TDE3Mi41MCA4LjM0TDE3Ni4yNSA2LjI3TDE4MC4wMCA1LjMwTDE4My43NSA1LjU0TDE4Ny41MCA2Ljk0TDE5MS4yNSA5LjMxTDE5NS4wMCAxMi4zN0wxOTguNzUgMTUuNzFMMjAyLjUwIDE4LjkyTDIwNi4yNSAyMS42MkwyMTAuMDAgMjMuNDZMMjEzLjc1IDI0LjI0TDIxNy41MCAyMy44N0wyMjEuMjUgMjIuNDJMMjI1LjAwIDIwLjA3TDIyOC43NSAxNy4xNEwyMzIuNTAgMTMuOThMMjM2LjI1IDExLjAwTDI0MC4wMCA4LjU2TDI0My43NSA2Ljk0TDI0Ny41MCA2LjM0TDI1MS4yNSA2LjgyTDI1NS4wMCA4LjI5TDI1OC43NSAxMC41NkwyNjIuNTAgMTMuMzNMMjY2LjI1IDE2LjI3TDI3MC4wMCAxOS4wMEwyNzMuNzUgMjEuMTlMMjc3LjUwIDIyLjU4TDI4MS4yNSAyMy4wMkwyODUuMDAgMjIuNDdMMjg4Ljc1IDIxLjAxTDI5Mi41MCAxOC44NEwyOTYuMjUgMTYuMjRMMzAwLjAwIDEzLjUzTDMwMy43NSAxMS4wNUwzMDcuNTAgOS4wOUwzMTEuMjUgNy45MEwzMTUuMDAgNy41OUwzMTguNzUgOC4xOUwzMjIuNTAgOS42MkwzMjYuMjUgMTEuNjlMMzMwLjAwIDE0LjEzTDMzMy43NSAxNi42NEwzMzcuNTAgMTguOTFMMzQxLjI1IDIwLjY3TDM0NS4wMCAyMS43MUwzNDguNzUgMjEuOTFMMzUyLjUwIDIxLjI3TDM1Ni4yNSAxOS44NkwzNjAuMDAgMTcuODdMMzYzLjc1IDE1LjU2TDM2Ny41MCAxMy4yMEwzNzEuMjUgMTEuMDhMMzc1LjAwIDkuNDdMMzc4Ljc1IDguNTRMMzgyLjUwIDguNDJMMzg2LjI1IDkuMTFMMzkwLjAwIDEwLjUxTDM5My43NSAxMi40NkwzOTcuNTAgMTQuNzJMNDAxLjI1IDE3LjAwTDQwNS4wMCAxOS4wM0w0MDguNzUgMjAuNTVMNDEyLjUwIDIxLjQwTDQxNi4yNSAyMS40NUw0MjAuMDAgMjAuNzFMNDIzLjc1IDE5LjI3TDQyNy41MCAxNy4yOUw0MzEuMjUgMTUuMDNMNDM1LjAwIDEyLjc1TDQzOC43NSAxMC43NEw0NDIuNTAgOS4yNEw0NDYuMjUgOC40NUw0NTAuMDAgOC40Nkw0NTMuNzUgOS4yOEw0NTcuNTAgMTAuODJMNDYxLjI1IDEyLjg5TDQ2NS4wMCAxNS4yNEw0NjguNzUgMTcuNTlMNDcyLjUwIDE5LjY0TDQ3Ni4yNSAyMS4xNUw0ODAuMDAgMjEuOTFMNDgzLjc1IDIxLjgyTDQ4Ny41MCAyMC44OEw0OTEuMjUgMTkuMjBMNDk1LjAwIDE2Ljk3TDQ5OC43NSAxNC40Nkw1MDIuNTAgMTEuOThMNTA2LjI1IDkuODRMNTEwLjAwIDguMzBMNTEzLjc1IDcuNTdMNTE3LjUwIDcuNzZMNTIxLjI1IDguODVMNTI1LjAwIDEwLjczTDUyOC43NSAxMy4xN0w1MzIuNTAgMTUuODhMNTM2LjI1IDE4LjU0TDU0MC4wMCAyMC44MEw1NDMuNzUgMjIuMzdMNTQ3LjUwIDIzLjA1TDU1MS4yNSAyMi43NUw1NTUuMDAgMjEuNDZMNTU4Ljc1IDE5LjM1TDU2Mi41MCAxNi42Nkw1NjYuMjUgMTMuNzJMNTcwLjAwIDEwLjg4TDU3My43NSA4LjUxTDU3Ny41MCA2LjkxTDU4MS4yNSA2LjI5TDU4NS4wMCA2Ljc1TDU4OC43NSA4LjI1TDU5Mi41MCAxMC42MUw1OTYuMjUgMTMuNTZMNjAwLjAwIDE2LjczIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIG9wYWNpdHk9IjAuOCIgc3R5bGU9Ii0tdzowLjc7c3Ryb2tlLXdpZHRoOmNhbGModmFyKC0tdykgKiB2YXIoLS1naywgMSkpIi8+PHBhdGggZD0iTTAuMDAgMTMuMjdMMy43NSAxMC4yNkw3LjUwIDcuODFMMTEuMjUgNi4yMUwxNS4wMCA1LjY5TDE4Ljc1IDYuMzNMMjIuNTAgOC4wNUwyNi4yNSAxMC42NkwzMC4wMCAxMy44NEwzMy43NSAxNy4yMUwzNy41MCAyMC4zM0w0MS4yNSAyMi44M0w0NS4wMCAyNC4zN0w0OC43NSAyNC43N0w1Mi41MCAyMy45NUw1Ni4yNSAyMi4wMUw2MC4wMCAxOS4xOUw2My43NSAxNS44Mkw2Ny41MCAxMi4zMkw3MS4yNSA5LjE0TDc1LjAwIDYuNjZMNzguNzUgNS4yMUw4Mi41MCA0Ljk2TDg2LjI1IDUuOTZMOTAuMDAgOC4wOEw5My43NSAxMS4wOEw5Ny41MCAxNC41NkwxMDEuMjUgMTguMTFMMTA1LjAwIDIxLjI4TDEwOC43NSAyMy42OEwxMTIuNTAgMjUuMDBMMTE2LjI1IDI1LjA4TDEyMC4wMCAyMy45MUwxMjMuNzUgMjEuNjVMMTI3LjUwIDE4LjU2TDEzMS4yNSAxNS4wNEwxMzUuMDAgMTEuNTJMMTM4Ljc1IDguNDVMMTQyLjUwIDYuMTlMMTQ2LjI1IDUuMDRMMTUwLjAwIDUuMTJMMTUzLjc1IDYuNDJMMTU3LjUwIDguNzhMMTYxLjI1IDExLjg4TDE2NS4wMCAxNS4zNUwxNjguNzUgMTguNzVMMTcyLjUwIDIxLjY2TDE3Ni4yNSAyMy43M0wxODAuMDAgMjQuNzBMMTgzLjc1IDI0LjQ2TDE4Ny41MCAyMy4wNkwxOTEuMjUgMjAuNjhMMTk1LjAwIDE3LjYzTDE5OC43NSAxNC4yOUwyMDIuNTAgMTEuMDdMMjA2LjI1IDguMzhMMjEwLjAwIDYuNTRMMjEzLjc1IDUuNzZMMjE3LjUwIDYuMTNMMjIxLjI1IDcuNThMMjI1LjAwIDkuOTNMMjI4Ljc1IDEyLjg2TDIzMi41MCAxNi4wMkwyMzYuMjUgMTkuMDBMMjQwLjAwIDIxLjQ0TDI0My43NSAyMy4wNkwyNDcuNTAgMjMuNjZMMjUxLjI1IDIzLjE4TDI1NS4wMCAyMS43MUwyNTguNzUgMTkuNDRMMjYyLjUwIDE2LjY3TDI2Ni4yNSAxMy43M0wyNzAuMDAgMTEuMDBMMjczLjc1IDguODFMMjc3LjUwIDcuNDJMMjgxLjI1IDYuOThMMjg1LjAwIDcuNTNMMjg4Ljc1IDguOTlMMjkyLjUwIDExLjE2TDI5Ni4yNSAxMy43NkwzMDAuMDAgMTYuNDdMMzAzLjc1IDE4Ljk1TDMwNy41MCAyMC45MUwzMTEuMjUgMjIuMTBMMzE1LjAwIDIyLjQxTDMxOC43NSAyMS44MUwzMjIuNTAgMjAuMzhMMzI2LjI1IDE4LjMxTDMzMC4wMCAxNS44N0wzMzMuNzUgMTMuMzZMMzM3LjUwIDExLjA5TDM0MS4yNSA5LjMzTDM0NS4wMCA4LjI5TDM0OC43NSA4LjA5TDM1Mi41MCA4LjczTDM1Ni4yNSAxMC4xNEwzNjAuMDAgMTIuMTNMMzYzLjc1IDE0LjQ0TDM2Ny41MCAxNi44MEwzNzEuMjUgMTguOTJMMzc1LjAwIDIwLjUzTDM3OC43NSAyMS40NkwzODIuNTAgMjEuNThMMzg2LjI1IDIwLjg5TDM5MC4wMCAxOS40OUwzOTMuNzUgMTcuNTRMMzk3LjUwIDE1LjI4TDQwMS4yNSAxMy4wMEw0MDUuMDAgMTAuOTdMNDA4Ljc1IDkuNDVMNDEyLjUwIDguNjBMNDE2LjI1IDguNTVMNDIwLjAwIDkuMjlMNDIzLjc1IDEwLjczTDQyNy41MCAxMi43MUw0MzEuMjUgMTQuOThMNDM1LjAwIDE3LjI1TDQzOC43NSAxOS4yNkw0NDIuNTAgMjAuNzZMNDQ2LjI1IDIxLjU1TDQ1MC4wMCAyMS41NEw0NTMuNzUgMjAuNzJMNDU3LjUwIDE5LjE4TDQ2MS4yNSAxNy4xMUw0NjUuMDAgMTQuNzZMNDY4Ljc1IDEyLjQxTDQ3Mi41MCAxMC4zNkw0NzYuMjUgOC44NUw0ODAuMDAgOC4wOUw0ODMuNzUgOC4xOEw0ODcuNTAgOS4xMkw0OTEuMjUgMTAuODBMNDk1LjAwIDEzLjAzTDQ5OC43NSAxNS41NEw1MDIuNTAgMTguMDJMNTA2LjI1IDIwLjE3TDUxMC4wMCAyMS43MEw1MTMuNzUgMjIuNDNMNTE3LjUwIDIyLjI0TDUyMS4yNSAyMS4xNUw1MjUuMDAgMTkuMjdMNTI4Ljc1IDE2LjgzTDUzMi41MCAxNC4xMUw1MzYuMjUgMTEuNDZMNTQwLjAwIDkuMjBMNTQzLjc1IDcuNjNMNTQ3LjUwIDYuOTRMNTUxLjI1IDcuMjVMNTU1LjAwIDguNTRMNTU4Ljc1IDEwLjY1TDU2Mi41MCAxMy4zNEw1NjYuMjUgMTYuMjlMNTcwLjAwIDE5LjEyTDU3My43NSAyMS40OUw1NzcuNTAgMjMuMDlMNTgxLjI1IDIzLjcxTDU4NS4wMCAyMy4yNUw1ODguNzUgMjEuNzVMNTkyLjUwIDE5LjM5TDU5Ni4yNSAxNi40NEw2MDAuMDAgMTMuMjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgb3BhY2l0eT0iMC44IiBzdHlsZT0iLS13OjAuNztzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48cGF0aCBkPSJNMC4wMCAyMS42OUwzLjc1IDIzLjk0TDcuNTAgMjUuMDlMMTEuMjUgMjQuOThMMTUuMDAgMjMuNjRMMTguNzUgMjEuMjNMMjIuNTAgMTguMDVMMjYuMjUgMTQuNTBMMzAuMDAgMTEuMDFMMzMuNzUgOC4wM0wzNy41MCA1LjkyTDQxLjI1IDQuOTRMNDUuMDAgNS4yMEw0OC43NSA2LjY4TDUyLjUwIDkuMThMNTYuMjUgMTIuMzhMNjAuMDAgMTUuODhMNjMuNzUgMTkuMjZMNjcuNTAgMjIuMDhMNzEuMjUgMjQuMDBMNzUuMDAgMjQuODBMNzguNzUgMjQuMzlMODIuNTAgMjIuODJMODYuMjUgMjAuMzBMOTAuMDAgMTcuMTVMOTMuNzUgMTMuNzhMOTcuNTAgMTAuNTlMMTAxLjI1IDcuOThMMTA1LjAwIDYuMjdMMTA4Ljc1IDUuNjVMMTEyLjUwIDYuMTlMMTE2LjI1IDcuODFMMTIwLjAwIDEwLjI5TDEyMy43NSAxMy4zMUwxMjcuNTAgMTYuNTBMMTMxLjI1IDE5LjQ2TDEzNS4wMCAyMS44MkwxMzguNzUgMjMuMzFMMTQyLjUwIDIzLjc2TDE0Ni4yNSAyMy4xMkwxNTAuMDAgMjEuNDlMMTUzLjc1IDE5LjEwTDE1Ny41MCAxNi4yNEwxNjEuMjUgMTMuMjhMMTY1LjAwIDEwLjU4TDE2OC43NSA4LjQ3TDE3Mi41MCA3LjE5TDE3Ni4yNSA2LjkwTDE4MC4wMCA3LjYwTDE4My43NSA5LjIwTDE4Ny41MCAxMS40OEwxOTEuMjUgMTQuMTZMMTk1LjAwIDE2Ljg5TDE5OC43NSAxOS4zNEwyMDIuNTAgMjEuMjJMMjA2LjI1IDIyLjMwTDIxMC4wMCAyMi40N0wyMTMuNzUgMjEuNzJMMjE3LjUwIDIwLjE2TDIyMS4yNSAxNy45OUwyMjUuMDAgMTUuNTBMMjI4Ljc1IDEyLjk4TDIzMi41MCAxMC43NEwyMzYuMjUgOS4wNkwyNDAuMDAgOC4xNEwyNDMuNzUgOC4wN0wyNDcuNTAgOC44NEwyNTEuMjUgMTAuMzdMMjU1LjAwIDEyLjQ0TDI1OC43NSAxNC44MEwyNjIuNTAgMTcuMTZMMjY2LjI1IDE5LjIzTDI3MC4wMCAyMC43NkwyNzMuNzUgMjEuNTdMMjc3LjUwIDIxLjU2TDI4MS4yNSAyMC43NUwyODUuMDAgMTkuMjRMMjg4Ljc1IDE3LjIyTDI5Mi41MCAxNC45M0wyOTYuMjUgMTIuNjdMMzAwLjAwIDEwLjcwTDMwMy43NSA5LjI2TDMwNy41MCA4LjU0TDMxMS4yNSA4LjYxTDMxNS4wMCA5LjQ3TDMxOC43NSAxMS4wMUwzMjIuNTAgMTMuMDRMMzI2LjI1IDE1LjMyTDMzMC4wMCAxNy41N0wzMzMuNzUgMTkuNTFMMzM3LjUwIDIwLjkwTDM0MS4yNSAyMS41N0wzNDUuMDAgMjEuNDNMMzQ4Ljc1IDIwLjUwTDM1Mi41MCAxOC44N0wzNTYuMjUgMTYuNzZMMzYwLjAwIDE0LjQwTDM2My43NSAxMi4xMEwzNjcuNTAgMTAuMTNMMzcxLjI1IDguNzRMMzc1LjAwIDguMTJMMzc4Ljc1IDguMzNMMzgyLjUwIDkuMzhMMzg2LjI1IDExLjE1TDM5MC4wMCAxMy40MUwzOTMuNzUgMTUuOTFMMzk3LjUwIDE4LjMzTDQwMS4yNSAyMC4zOEw0MDUuMDAgMjEuNzlMNDA4Ljc1IDIyLjM3TDQxMi41MCAyMi4wNUw0MTYuMjUgMjAuODRMNDIwLjAwIDE4Ljg5TDQyMy43NSAxNi40MUw0MjcuNTAgMTMuNzJMNDMxLjI1IDExLjE0TDQzNS4wMCA4Ljk5TDQzOC43NSA3LjU2TDQ0Mi41MCA3LjAzTDQ0Ni4yNSA3LjQ4TDQ1MC4wMCA4Ljg4TDQ1My43NSAxMS4wN0w0NTcuNTAgMTMuNzlMNDYxLjI1IDE2LjcxTDQ2NS4wMCAxOS40Nkw0NjguNzUgMjEuNzFMNDcyLjUwIDIzLjE1TDQ3Ni4yNSAyMy42MUw0ODAuMDAgMjIuOTlMNDgzLjc1IDIxLjM3TDQ4Ny41MCAxOC45M0w0OTEuMjUgMTUuOTZMNDk1LjAwIDEyLjgyTDQ5OC43NSA5LjkxTDUwMi41MCA3LjU4TDUwNi4yNSA2LjE1TDUxMC4wMCA1LjgxTDUxMy43NSA2LjYwTDUxNy41MCA4LjQ1TDUyMS4yNSAxMS4xNEw1MjUuMDAgMTQuMzVMNTI4Ljc1IDE3LjY4TDUzMi41MCAyMC43MUw1MzYuMjUgMjMuMDdMNTQwLjAwIDI0LjQ0TDU0My43NSAyNC42Nkw1NDcuNTAgMjMuNjdMNTUxLjI1IDIxLjYwTDU1NS4wMCAxOC42OUw1NTguNzUgMTUuMjlMNTYyLjUwIDExLjgzTDU2Ni4yNSA4Ljc0TDU3MC4wMCA2LjQxTDU3My43NSA1LjEzTDU3Ny41MCA1LjA3TDU4MS4yNSA2LjI0TDU4NS4wMCA4LjUwTDU4OC43NSAxMS41OUw1OTIuNTAgMTUuMTBMNTk2LjI1IDE4LjYyTDYwMC4wMCAyMS42OSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43IiBvcGFjaXR5PSIwLjgiIHN0eWxlPSItLXc6MC43O3N0cm9rZS13aWR0aDpjYWxjKHZhcigtLXcpICogdmFyKC0tZ2ssIDEpKSIvPjxwYXRoIGQ9Ik0wLjAwIDcuOTBMMy43NSA1LjgxTDcuNTAgNC44NUwxMS4yNSA1LjE1TDE1LjAwIDYuNjZMMTguNzUgOS4yMUwyMi41MCAxMi40N0wyNi4yNSAxNi4wM0wzMC4wMCAxOS40NUwzMy43NSAyMi4zMUwzNy41MCAyNC4yNUw0MS4yNSAyNS4wNEw0NS4wMCAyNC41OEw0OC43NSAyMi45NUw1Mi41MCAyMC4zNEw1Ni4yNSAxNy4wOUw2MC4wMCAxMy42MUw2My43NSAxMC4zM0w2Ny41MCA3LjY1TDcxLjI1IDUuOTFMNzUuMDAgNS4zMEw3OC43NSA1Ljg5TDgyLjUwIDcuNjBMODYuMjUgMTAuMjBMOTAuMDAgMTMuMzdMOTMuNzUgMTYuNjlMOTcuNTAgMTkuNzdMMTAxLjI1IDIyLjIyTDEwNS4wMCAyMy43NUwxMDguNzUgMjQuMThMMTEyLjUwIDIzLjQ4TDExNi4yNSAyMS43NUwxMjAuMDAgMTkuMjFMMTIzLjc1IDE2LjE5TDEyNy41MCAxMy4wN0wxMzEuMjUgMTAuMjRMMTM1LjAwIDguMDRMMTM4Ljc1IDYuNzJMMTQyLjUwIDYuNDVMMTQ2LjI1IDcuMjNMMTUwLjAwIDguOTVMMTUzLjc1IDExLjM4TDE1Ny41MCAxNC4yMkwxNjEuMjUgMTcuMTBMMTY1LjAwIDE5LjY4TDE2OC43NSAyMS42M0wxNzIuNTAgMjIuNzRMMTc2LjI1IDIyLjg4TDE4MC4wMCAyMi4wNUwxODMuNzUgMjAuMzdMMTg3LjUwIDE4LjA3TDE5MS4yNSAxNS40MkwxOTUuMDAgMTIuNzdMMTk4Ljc1IDEwLjQ0TDIwMi41MCA4LjcxTDIwNi4yNSA3Ljc3TDIxMC4wMCA3Ljc0TDIxMy43NSA4LjYwTDIxNy41MCAxMC4yM0wyMjEuMjUgMTIuNDFMMjI1LjAwIDE0Ljg5TDIyOC43NSAxNy4zNEwyMzIuNTAgMTkuNDZMMjM2LjI1IDIxLjAyTDI0MC4wMCAyMS44MUwyNDMuNzUgMjEuNzZMMjQ3LjUwIDIwLjg4TDI1MS4yNSAxOS4yOUwyNTUuMDAgMTcuMTlMMjU4Ljc1IDE0Ljg0TDI2Mi41MCAxMi41NEwyNjYuMjUgMTAuNTZMMjcwLjAwIDkuMTRMMjczLjc1IDguNDVMMjc3LjUwIDguNTZMMjgxLjI1IDkuNDdMMjg1LjAwIDExLjA2TDI4OC43NSAxMy4xMkwyOTIuNTAgMTUuNDFMMjk2LjI1IDE3LjY0TDMwMC4wMCAxOS41NEwzMDMuNzUgMjAuODhMMzA3LjUwIDIxLjUwTDMxMS4yNSAyMS4zMkwzMTUuMDAgMjAuMzVMMzE4Ljc1IDE4LjczTDMyMi41MCAxNi42M0wzMjYuMjUgMTQuMzNMMzMwLjAwIDEyLjEwTDMzMy43NSAxMC4yMUwzMzcuNTAgOC45MEwzNDEuMjUgOC4zNEwzNDUuMDAgOC41OUwzNDguNzUgOS42NUwzNTIuNTAgMTEuMzdMMzU2LjI1IDEzLjU3TDM2MC4wMCAxNS45NkwzNjMuNzUgMTguMjdMMzY3LjUwIDIwLjIwTDM3MS4yNSAyMS41MUwzNzUuMDAgMjIuMDJMMzc4Ljc1IDIxLjY4TDM4Mi41MCAyMC40OUwzODYuMjUgMTguNjFMMzkwLjAwIDE2LjI1TDM5My43NSAxMy42OUwzOTcuNTAgMTEuMjZMNDAxLjI1IDkuMjVMNDA1LjAwIDcuOTNMNDA4Ljc1IDcuNDZMNDEyLjUwIDcuOTNMNDE2LjI1IDkuMjhMNDIwLjAwIDExLjM4TDQyMy43NSAxMy45Nkw0MjcuNTAgMTYuNzJMNDMxLjI1IDE5LjMxTDQzNS4wMCAyMS40MUw0MzguNzUgMjIuNzVMNDQyLjUwIDIzLjE1TDQ0Ni4yNSAyMi41M0w0NTAuMDAgMjAuOTdMNDUzLjc1IDE4LjYzTDQ1Ny41MCAxNS44MEw0NjEuMjUgMTIuODJMNDY1LjAwIDEwLjA2TDQ2OC43NSA3Ljg3TDQ3Mi41MCA2LjU0TDQ3Ni4yNSA2LjI0TDQ4MC4wMCA3LjAzTDQ4My43NSA4LjgyTDQ4Ny41MCAxMS40Mkw0OTEuMjUgMTQuNTBMNDk1LjAwIDE3LjY5TDQ5OC43NSAyMC41OEw1MDIuNTAgMjIuODNMNTA2LjI1IDI0LjEyTDUxMC4wMCAyNC4zMEw1MTMuNzUgMjMuMzJMNTE3LjUwIDIxLjI5TDUyMS4yNSAxOC40NUw1MjUuMDAgMTUuMTVMNTI4Ljc1IDExLjgwTDUzMi41MCA4LjgxTDUzNi4yNSA2LjU1TDU0MC4wMCA1LjMzTDU0My43NSA1LjMwTDU0Ny41MCA2LjQ4TDU1MS4yNSA4LjcyTDU1NS4wMCAxMS43N0w1NTguNzUgMTUuMjNMNTYyLjUwIDE4LjY5TDU2Ni4yNSAyMS43MUw1NzAuMDAgMjMuOTJMNTczLjc1IDI1LjAyTDU3Ny41MCAyNC44OUw1ODEuMjUgMjMuNTNMNTg1LjAwIDIxLjExTDU4OC43NSAxNy45Mkw1OTIuNTAgMTQuMzZMNTk2LjI1IDEwLjg4TDYwMC4wMCA3LjkwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIG9wYWNpdHk9IjAuOCIgc3R5bGU9Ii0tdzowLjc7c3Ryb2tlLXdpZHRoOmNhbGModmFyKC0tdykgKiB2YXIoLS1naywgMSkpIi8+PHBhdGggZD0iTTAuMDAgMjMuOTNMMy43NSAyNC41OUw3LjUwIDI0LjA2TDExLjI1IDIyLjQzTDE1LjAwIDE5Ljg5TDE4Ljc1IDE2Ljc5TDIyLjUwIDEzLjUwTDI2LjI1IDEwLjQ1TDMwLjAwIDcuOTlMMzMuNzUgNi40M0wzNy41MCA1Ljk1TDQxLjI1IDYuNThMNDUuMDAgOC4yNUw0OC43NSAxMC43MUw1Mi41MCAxMy42Nkw1Ni4yNSAxNi43NEw2MC4wMCAxOS41NEw2My43NSAyMS43NUw2Ny41MCAyMy4wOUw3MS4yNSAyMy40MUw3NS4wMCAyMi43MEw3OC43NSAyMS4wNUw4Mi41MCAxOC42OUw4Ni4yNSAxNS45Mkw5MC4wMCAxMy4wOEw5My43NSAxMC41M0w5Ny41MCA4LjU3TDEwMS4yNSA3LjQ0TDEwNS4wMCA3LjI1TDEwOC43NSA4LjAxTDExMi41MCA5LjYyTDExNi4yNSAxMS44NkwxMjAuMDAgMTQuNDRMMTIzLjc1IDE3LjA1TDEyNy41MCAxOS4zN0wxMzEuMjUgMjEuMTFMMTM1LjAwIDIyLjA4TDEzOC43NSAyMi4xNkwxNDIuNTAgMjEuMzdMMTQ2LjI1IDE5LjgwTDE1MC4wMCAxNy42N0wxNTMuNzUgMTUuMjRMMTU3LjUwIDEyLjgyTDE2MS4yNSAxMC43MEwxNjUuMDAgOS4xM0wxNjguNzUgOC4zMEwxNzIuNTAgOC4zMEwxNzYuMjUgOS4xMkwxODAuMDAgMTAuNjZMMTgzLjc1IDEyLjcxTDE4Ny41MCAxNS4wM0wxOTEuMjUgMTcuMzJMMTk1LjAwIDE5LjMyTDE5OC43NSAyMC43N0wyMDIuNTAgMjEuNTBMMjA2LjI1IDIxLjQzTDIxMC4wMCAyMC41N0wyMTMuNzUgMTkuMDNMMjE3LjUwIDE2Ljk5TDIyMS4yNSAxNC43MkwyMjUuMDAgMTIuNDhMMjI4Ljc1IDEwLjU1TDIzMi41MCA5LjE2TDIzNi4yNSA4LjUwTDI0MC4wMCA4LjYzTDI0My43NSA5LjU2TDI0Ny41MCAxMS4xNUwyNTEuMjUgMTMuMjRMMjU1LjAwIDE1LjU1TDI1OC43NSAxNy44MUwyNjIuNTAgMTkuNzRMMjY2LjI1IDIxLjEwTDI3MC4wMCAyMS43MkwyNzMuNzUgMjEuNTFMMjc3LjUwIDIwLjQ5TDI4MS4yNSAxOC43OEwyODUuMDAgMTYuNThMMjg4Ljc1IDE0LjE2TDI5Mi41MCAxMS44MUwyOTYuMjUgOS44MkwzMDAuMDAgOC40NUwzMDMuNzUgNy44N0wzMDcuNTAgOC4xOEwzMTEuMjUgOS4zM0wzMTUuMDAgMTEuMjFMMzE4Ljc1IDEzLjYwTDMyMi41MCAxNi4xOUwzMjYuMjUgMTguNjhMMzMwLjAwIDIwLjc2TDMzMy43NSAyMi4xNUwzMzcuNTAgMjIuNjhMMzQxLjI1IDIyLjI1TDM0NS4wMCAyMC45MkwzNDguNzUgMTguODJMMzUyLjUwIDE2LjIxTDM1Ni4yNSAxMy40MEwzNjAuMDAgMTAuNzRMMzYzLjc1IDguNTdMMzY3LjUwIDcuMTZMMzcxLjI1IDYuNzBMMzc1LjAwIDcuMjdMMzc4Ljc1IDguODJMMzgyLjUwIDExLjE2TDM4Ni4yNSAxNC4wM0wzOTAuMDAgMTcuMDZMMzkzLjc1IDE5Ljg5TDM5Ny41MCAyMi4xNUw0MDEuMjUgMjMuNTVMNDA1LjAwIDIzLjkyTDQwOC43NSAyMy4xN0w0MTIuNTAgMjEuMzlMNDE2LjI1IDE4Ljc5TDQyMC4wMCAxNS42OEw0MjMuNzUgMTIuNDRMNDI3LjUwIDkuNDhMNDMxLjI1IDcuMTZMNDM1LjAwIDUuODBMNDM4Ljc1IDUuNTZMNDQyLjUwIDYuNDlMNDQ2LjI1IDguNTBMNDUwLjAwIDExLjM0TDQ1My43NSAxNC42Nkw0NTcuNTAgMTguMDZMNDYxLjI1IDIxLjExTDQ2NS4wMCAyMy40M0w0NjguNzUgMjQuNzJMNDcyLjUwIDI0LjgxTDQ3Ni4yNSAyMy42OEw0ODAuMDAgMjEuNDdMNDgzLjc1IDE4LjQzTDQ4Ny41MCAxNC45Nkw0OTEuMjUgMTEuNDdMNDk1LjAwIDguNDBMNDk4Ljc1IDYuMTRMNTAyLjUwIDQuOTdMNTA2LjI1IDUuMDRMNTEwLjAwIDYuMzRMNTEzLjc1IDguNzNMNTE3LjUwIDExLjg5TDUyMS4yNSAxNS40NEw1MjUuMDAgMTguOTRMNTI4Ljc1IDIxLjk1TDUzMi41MCAyNC4xMEw1MzYuMjUgMjUuMTJMNTQwLjAwIDI0Ljg4TDU0My43NSAyMy40Mkw1NDcuNTAgMjAuOTNMNTUxLjI1IDE3LjcxTDU1NS4wMCAxNC4xNkw1NTguNzUgMTAuNzRMNTYyLjUwIDcuODZMNTY2LjI1IDUuODhMNTcwLjAwIDUuMDNMNTczLjc1IDUuNDNMNTc3LjUwIDcuMDBMNTgxLjI1IDkuNTVMNTg1LjAwIDEyLjc0TDU4OC43NSAxNi4xOUw1OTIuNTAgMTkuNDZMNTk2LjI1IDIyLjE1TDYwMC4wMCAyMy45MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43IiBvcGFjaXR5PSIwLjgiIHN0eWxlPSItLXc6MC43O3N0cm9rZS13aWR0aDpjYWxjKHZhcigtLXcpICogdmFyKC0tZ2ssIDEpKSIvPjxwYXRoIGQ9Ik0wLjAwIDYuMzBMMy43NSA1LjI0TDcuNTAgNS40MEwxMS4yNSA2Ljc0TDE1LjAwIDkuMDhMMTguNzUgMTIuMTNMMjIuNTAgMTUuNTFMMjYuMjUgMTguNzhMMzAuMDAgMjEuNTVMMzMuNzUgMjMuNDlMMzcuNTAgMjQuMzVMNDEuMjUgMjQuMDVMNDUuMDAgMjIuNjVMNDguNzUgMjAuMzJMNTIuNTAgMTcuMzdMNTYuMjUgMTQuMTdMNjAuMDAgMTEuMTFMNjMuNzUgOC41OEw2Ny41MCA2Ljg4TDcxLjI1IDYuMjBMNzUuMDAgNi42Mkw3OC43NSA4LjA1TDgyLjUwIDEwLjMyTDg2LjI1IDEzLjEyTDkwLjAwIDE2LjExTDkzLjc1IDE4LjkxTDk3LjUwIDIxLjE4TDEwMS4yNSAyMi42NkwxMDUuMDAgMjMuMTdMMTA4Ljc1IDIyLjY3TDExMi41MCAyMS4yNEwxMTYuMjUgMTkuMDdMMTIwLjAwIDE2LjQzTDEyMy43NSAxMy42N0wxMjcuNTAgMTEuMTJMMTMxLjI1IDkuMDlMMTM1LjAwIDcuODJMMTM4Ljc1IDcuNDVMMTQyLjUwIDguMDFMMTQ2LjI1IDkuNDJMMTUwLjAwIDExLjQ5TDE1My43NSAxMy45NUwxNTcuNTAgMTYuNTFMMTYxLjI1IDE4Ljg0TDE2NS4wMCAyMC42NkwxNjguNzUgMjEuNzZMMTcyLjUwIDIyLjAyTDE3Ni4yNSAyMS40MUwxODAuMDAgMjAuMDNMMTgzLjc1IDE4LjA1TDE4Ny41MCAxNS43MUwxOTEuMjUgMTMuMzJMMTk1LjAwIDExLjE2TDE5OC43NSA5LjUwTDIwMi41MCA4LjUyTDIwNi4yNSA4LjM1TDIxMC4wMCA5LjAwTDIxMy43NSAxMC4zOEwyMTcuNTAgMTIuMzJMMjIxLjI1IDE0LjU3TDIyNS4wMCAxNi44N0wyMjguNzUgMTguOTJMMjMyLjUwIDIwLjQ5TDIzNi4yNSAyMS4zN0wyNDAuMDAgMjEuNDdMMjQzLjc1IDIwLjc4TDI0Ny41MCAxOS4zN0wyNTEuMjUgMTcuNDJMMjU1LjAwIDE1LjE3TDI1OC43NSAxMi44OUwyNjIuNTAgMTAuODdMMjY2LjI1IDkuMzVMMjcwLjAwIDguNTJMMjczLjc1IDguNDhMMjc3LjUwIDkuMjZMMjgxLjI1IDEwLjc0TDI4NS4wMCAxMi43N0wyODguNzUgMTUuMDlMMjkyLjUwIDE3LjQyTDI5Ni4yNSAxOS40OEwzMDAuMDAgMjEuMDBMMzAzLjc1IDIxLjc5TDMwNy41MCAyMS43NkwzMTEuMjUgMjAuODhMMzE1LjAwIDE5LjI2TDMxOC43NSAxNy4wOUwzMjIuNTAgMTQuNjNMMzI2LjI1IDEyLjE3TDMzMC4wMCAxMC4wNEwzMzMuNzUgOC40OEwzMzcuNTAgNy43MUwzNDEuMjUgNy44NEwzNDUuMDAgOC44NkwzNDguNzUgMTAuNjdMMzUyLjUwIDEzLjA0TDM1Ni4yNSAxNS43MEwzNjAuMDAgMTguMzJMMzYzLjc1IDIwLjU3TDM2Ny41MCAyMi4xN0wzNzEuMjUgMjIuOTBMMzc1LjAwIDIyLjY1TDM3OC43NSAyMS40NUwzODIuNTAgMTkuNDJMMzg2LjI1IDE2LjgxTDM5MC4wMCAxMy45MkwzOTMuNzUgMTEuMTFMMzk3LjUwIDguNzVMNDAxLjI1IDcuMTJMNDA1LjAwIDYuNDVMNDA4Ljc1IDYuODNMNDEyLjUwIDguMjRMNDE2LjI1IDEwLjUyTDQyMC4wMCAxMy4zOUw0MjMuNzUgMTYuNTFMNDI3LjUwIDE5LjQ5TDQzMS4yNSAyMS45Nkw0MzUuMDAgMjMuNTlMNDM4Ljc1IDI0LjE4TDQ0Mi41MCAyMy42M0w0NDYuMjUgMjEuOTlMNDUwLjAwIDE5LjQ3TDQ1My43NSAxNi4zNUw0NTcuNTAgMTMuMDNMNDYxLjI1IDkuOTFMNDY1LjAwIDcuMzlMNDY4Ljc1IDUuNzlMNDcyLjUwIDUuMzJMNDc2LjI1IDYuMDVMNDgwLjAwIDcuOTBMNDgzLjc1IDEwLjY1TDQ4Ny41MCAxMy45N0w0OTEuMjUgMTcuNDRMNDk1LjAwIDIwLjY0TDQ5OC43NSAyMy4xNkw1MDIuNTAgMjQuNjhMNTA2LjI1IDI1LjAxTDUxMC4wMCAyNC4xMEw1MTMuNzUgMjIuMDVMNTE3LjUwIDE5LjExTDUyMS4yNSAxNS42Nkw1MjUuMDAgMTIuMTFMNTI4Ljc1IDguOTFMNTMyLjUwIDYuNDZMNTM2LjI1IDUuMDZMNTQwLjAwIDQuODlMNTQzLjc1IDUuOTdMNTQ3LjUwIDguMThMNTUxLjI1IDExLjIzTDU1NS4wMCAxNC43NEw1NTguNzUgMTguMjhMNTYyLjUwIDIxLjQwTDU2Ni4yNSAyMy43M0w1NzAuMDAgMjQuOTdMNTczLjc1IDI0Ljk3TDU3Ny41MCAyMy43NEw1ODEuMjUgMjEuNDRMNTg1LjAwIDE4LjM1TDU4OC43NSAxNC44N0w1OTIuNTAgMTEuNDJMNTk2LjI1IDguNDRMNjAwLjAwIDYuMzAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgb3BhY2l0eT0iMC44IiBzdHlsZT0iLS13OjAuNztzdHJva2Utd2lkdGg6Y2FsYyh2YXIoLS13KSAqIHZhcigtLWdrLCAxKSkiLz48cGF0aCBkPSJNMC4wMCAyMi43N0wzLjc1IDIxLjg0TDcuNTAgMjAuMDlMMTEuMjUgMTcuNzVMMTUuMDAgMTUuMTFMMTguNzUgMTIuNTBMMjIuNTAgMTAuMjVMMjYuMjUgOC42MUwzMC4wMCA3Ljc4TDMzLjc1IDcuODVMMzcuNTAgOC43OUw0MS4yNSAxMC40OUw0NS4wMCAxMi43MEw0OC43NSAxNS4xN0w1Mi41MCAxNy41OEw1Ni4yNSAxOS42NUw2MC4wMCAyMS4xMUw2My43NSAyMS44MUw2Ny41MCAyMS42Nkw3MS4yNSAyMC43MEw3NS4wMCAxOS4wNUw3OC43NSAxNi45Mkw4Mi41MCAxNC41N0w4Ni4yNSAxMi4zMEw5MC4wMCAxMC4zOEw5My43NSA5LjA0TDk3LjUwIDguNDRMMTAxLjI1IDguNjVMMTA1LjAwIDkuNjRMMTA4Ljc1IDExLjI4TDExMi41MCAxMy4zOEwxMTYuMjUgMTUuNjdMMTIwLjAwIDE3Ljg4TDEyMy43NSAxOS43M0wxMjcuNTAgMjEuMDBMMTMxLjI1IDIxLjUzTDEzNS4wMCAyMS4yNUwxMzguNzUgMjAuMjFMMTQyLjUwIDE4LjUxTDE0Ni4yNSAxNi4zOEwxNTAuMDAgMTQuMDZMMTUzLjc1IDExLjg1TDE1Ny41MCAxMC4wMUwxNjEuMjUgOC43N0wxNjUuMDAgOC4zMEwxNjguNzUgOC42NUwxNzIuNTAgOS43OUwxNzYuMjUgMTEuNTlMMTgwLjAwIDEzLjgzTDE4My43NSAxNi4yNEwxODcuNTAgMTguNTNMMTkxLjI1IDIwLjQyTDE5NS4wMCAyMS42NUwxOTguNzUgMjIuMDhMMjAyLjUwIDIxLjYzTDIwNi4yNSAyMC4zNUwyMTAuMDAgMTguMzhMMjEzLjc1IDE1Ljk3TDIxNy41MCAxMy4zOUwyMjEuMjUgMTAuOTdMMjI1LjAwIDkuMDFMMjI4Ljc1IDcuNzdMMjMyLjUwIDcuNDBMMjM2LjI1IDcuOThMMjQwLjAwIDkuNDRMMjQzLjc1IDExLjYyTDI0Ny41MCAxNC4yN0wyNTEuMjUgMTcuMDVMMjU1LjAwIDE5LjYyTDI1OC43NSAyMS42NkwyNjIuNTAgMjIuOTFMMjY2LjI1IDIzLjE5TDI3MC4wMCAyMi40NkwyNzMuNzUgMjAuNzhMMjc3LjUwIDE4LjM1TDI4MS4yNSAxNS40NkwyODUuMDAgMTIuNDZMMjg4Ljc1IDkuNzNMMjkyLjUwIDcuNjJMMjk2LjI1IDYuMzlMMzAwLjAwIDYuMjFMMzAzLjc1IDcuMTNMMzA3LjUwIDkuMDRMMzExLjI1IDExLjczTDMxNS4wMCAxNC44NkwzMTguNzUgMTguMDZMMzIyLjUwIDIwLjkyTDMyNi4yNSAyMy4wOEwzMzAuMDAgMjQuMjZMMzMzLjc1IDI0LjMwTDMzNy41MCAyMy4xOUwzNDEuMjUgMjEuMDRMMzQ1LjAwIDE4LjExTDM0OC43NSAxNC43NkwzNTIuNTAgMTEuNDFMMzU2LjI1IDguNDdMMzYwLjAwIDYuMzJMMzYzLjc1IDUuMjNMMzY3LjUwIDUuMzRMMzcxLjI1IDYuNjZMMzc1LjAwIDkuMDJMMzc4Ljc1IDEyLjE0TDM4Mi41MCAxNS42NEwzODYuMjUgMTkuMDhMMzkwLjAwIDIyLjAzTDM5My43NSAyNC4xMkwzOTcuNTAgMjUuMDlMNDAxLjI1IDI0LjgxTDQwNS4wMCAyMy4zMUw0MDguNzUgMjAuNzhMNDEyLjUwIDE3LjUzTDQxNi4yNSAxMy45NUw0MjAuMDAgMTAuNTBMNDIzLjc1IDcuNjFMNDI3LjUwIDUuNjRMNDMxLjI1IDQuODJMNDM1LjAwIDUuMjdMNDM4Ljc1IDYuOTJMNDQyLjUwIDkuNTZMNDQ2LjI1IDEyLjg3TDQ1MC4wMCAxNi40NEw0NTMuNzUgMTkuODFMNDU3LjUwIDIyLjU3TDQ2MS4yNSAyNC4zOEw0NjUuMDAgMjUuMDJMNDY4Ljc1IDI0LjQyTDQ3Mi41MCAyMi42N0w0NzYuMjUgMTkuOTdMNDgwLjAwIDE2LjY5TDQ4My43NSAxMy4yMkw0ODcuNTAgMTAuMDFMNDkxLjI1IDcuNDNMNDk1LjAwIDUuODJMNDk4Ljc1IDUuMzVMNTAyLjUwIDYuMDhMNTA2LjI1IDcuOTBMNTEwLjAwIDEwLjU3TDUxMy43NSAxMy43NUw1MTcuNTAgMTcuMDVMNTIxLjI1IDIwLjA2TDUyNS4wMCAyMi40MEw1MjguNzUgMjMuODBMNTMyLjUwIDI0LjEwTDUzNi4yNSAyMy4yN0w1NDAuMDAgMjEuNDVMNTQzLjc1IDE4Ljg1TDU0Ny41MCAxNS44Mkw1NTEuMjUgMTIuNzRMNTU1LjAwIDkuOTlMNTU4Ljc1IDcuODlMNTYyLjUwIDYuNzBMNTY2LjI1IDYuNTVMNTcwLjAwIDcuNDRMNTczLjc1IDkuMjRMNTc3LjUwIDExLjcyTDU4MS4yNSAxNC41Nkw1ODUuMDAgMTcuNDBMNTg4Ljc1IDE5LjkwTDU5Mi41MCAyMS43NUw1OTYuMjUgMjIuNzRMNjAwLjAwIDIyLjc3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIG9wYWNpdHk9IjAuOCIgc3R5bGU9Ii0tdzowLjc7c3Ryb2tlLXdpZHRoOmNhbGModmFyKC0tdykgKiB2YXIoLS1naywgMSkpIi8+PHBhdGggZD0iTTAuMDAgNy40NkwzLjc1IDguNDlMNy41MCAxMC4yOUwxMS4yNSAxMi42NUwxNS4wMCAxNS4yNUwxOC43NSAxNy43OEwyMi41MCAxOS45M0wyNi4yNSAyMS40NEwzMC4wMCAyMi4xM0wzMy43NSAyMS45NEwzNy41MCAyMC45MUw0MS4yNSAxOS4xNkw0NS4wMCAxNi45M0w0OC43NSAxNC40OUw1Mi41MCAxMi4xNUw1Ni4yNSAxMC4xOEw2MC4wMCA4LjgzTDYzLjc1IDguMjVMNjcuNTAgOC41MUw3MS4yNSA5LjU1TDc1LjAwIDExLjI2TDc4Ljc1IDEzLjQxTDgyLjUwIDE1Ljc0TDg2LjI1IDE3Ljk3TDkwLjAwIDE5LjgxTDkzLjc1IDIxLjA1TDk3LjUwIDIxLjU1TDEwMS4yNSAyMS4yM0wxMDUuMDAgMjAuMTVMMTA4Ljc1IDE4LjQ0TDExMi41MCAxNi4zMUwxMTYuMjUgMTQuMDFMMTIwLjAwIDExLjg0TDEyMy43NSAxMC4wNUwxMjcuNTAgOC44N0wxMzEuMjUgOC40NEwxMzUuMDAgOC44MkwxMzguNzUgOS45NkwxNDIuNTAgMTEuNzRMMTQ2LjI1IDEzLjkzTDE1MC4wMCAxNi4yNkwxNTMuNzUgMTguNDZMMTU3LjUwIDIwLjI1TDE2MS4yNSAyMS40MUwxNjUuMDAgMjEuNzhMMTY4Ljc1IDIxLjMyTDE3Mi41MCAyMC4wN0wxNzYuMjUgMTguMTdMMTgwLjAwIDE1Ljg2TDE4My43NSAxMy40MEwxODcuNTAgMTEuMTFMMTkxLjI1IDkuMjhMMTk1LjAwIDguMTJMMTk4Ljc1IDcuODFMMjAyLjUwIDguMzhMMjA2LjI1IDkuNzlMMjEwLjAwIDExLjg3TDIxMy43NSAxNC4zOEwyMTcuNTAgMTcuMDBMMjIxLjI1IDE5LjQyTDIyNS4wMCAyMS4zM0wyMjguNzUgMjIuNDlMMjMyLjUwIDIyLjczTDIzNi4yNSAyMi4wMUwyNDAuMDAgMjAuNDBMMjQzLjc1IDE4LjEwTDI0Ny41MCAxNS4zNkwyNTEuMjUgMTIuNTNMMjU1LjAwIDkuOTZMMjU4Ljc1IDcuOTdMMjYyLjUwIDYuODNMMjY2LjI1IDYuNjhMMjcwLjAwIDcuNTdMMjczLjc1IDkuNDFMMjc3LjUwIDExLjk3TDI4MS4yNSAxNC45NUwyODUuMDAgMTcuOTlMMjg4Ljc1IDIwLjcxTDI5Mi41MCAyMi43NUwyOTYuMjUgMjMuODZMMzAwLjAwIDIzLjg4TDMwMy43NSAyMi44MEwzMDcuNTAgMjAuNzJMMzExLjI1IDE3LjkwTDMxNS4wMCAxNC42OUwzMTguNzUgMTEuNDZMMzIyLjUwIDguNjRMMzI2LjI1IDYuNTdMMzMwLjAwIDUuNTNMMzMzLjc1IDUuNjZMMzM3LjUwIDYuOTVMMzQxLjI1IDkuMjZMMzQ1LjAwIDEyLjMwTDM0OC43NSAxNS43MkwzNTIuNTAgMTkuMDdMMzU2LjI1IDIxLjk1TDM2MC4wMCAyMy45OUwzNjMuNzUgMjQuOTJMMzY3LjUwIDI0LjYzTDM3MS4yNSAyMy4xNEwzNzUuMDAgMjAuNjNMMzc4Ljc1IDE3LjQxTDM4Mi41MCAxMy44N0wzODYuMjUgMTAuNDVMMzkwLjAwIDcuNTlMMzkzLjc1IDUuNjNMMzk3LjUwIDQuODRMNDAxLjI1IDUuMzBMNDA1LjAwIDYuOTZMNDA4Ljc1IDkuNjJMNDEyLjUwIDEyLjk2TDQxNi4yNSAxNi41NEw0MjAuMDAgMTkuOTNMNDIzLjc1IDIyLjcxTDQyNy41MCAyNC41M0w0MzEuMjUgMjUuMTdMNDM1LjAwIDI0LjU1TDQzOC43NSAyMi43NEw0NDIuNTAgMTkuOTlMNDQ2LjI1IDE2LjYzTDQ1MC4wMCAxMy4wOUw0NTMuNzUgOS44MEw0NTcuNTAgNy4xN0w0NjEuMjUgNS41M0w0NjUuMDAgNS4wN0w0NjguNzUgNS44M0w0NzIuNTAgNy43Mkw0NzYuMjUgMTAuNTBMNDgwLjAwIDEzLjgwTDQ4My43NSAxNy4yMkw0ODcuNTAgMjAuMzNMNDkxLjI1IDIyLjc2TDQ5NS4wMCAyNC4yMEw0OTguNzUgMjQuNDlMNTAyLjUwIDIzLjYxTDUwNi4yNSAyMS42OEw1MTAuMDAgMTguOTZMNTEzLjc1IDE1Ljc4TDUxNy41MCAxMi41NUw1MjEuMjUgOS42Nkw1MjUuMDAgNy40N0w1MjguNzUgNi4yNEw1MzIuNTAgNi4xMUw1MzYuMjUgNy4wNkw1NDAuMDAgOC45OEw1NDMuNzUgMTEuNjFMNTQ3LjUwIDE0LjYxTDU1MS4yNSAxNy42MUw1NTUuMDAgMjAuMjRMNTU4Ljc1IDIyLjE5TDU2Mi41MCAyMy4yMUw1NjYuMjUgMjMuMjJMNTcwLjAwIDIyLjIxTDU3My43NSAyMC4zNEw1NzcuNTAgMTcuODRMNTgxLjI1IDE1LjA0TDU4NS4wMCAxMi4yOUw1ODguNzUgOS45MUw1OTIuNTAgOC4yMEw1OTYuMjUgNy4zNUw2MDAuMDAgNy40NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43IiBvcGFjaXR5PSIwLjgiIHN0eWxlPSItLXc6MC43O3N0cm9rZS13aWR0aDpjYWxjKHZhcigtLXcpICogdmFyKC0tZ2ssIDEpKSIvPjxwYXRoIGQ9Ik0wLjAwIDE5LjkyTDMuNzUgMTguMTFMNy41MCAxNS45M0wxMS4yNSAxMy42NEwxNS4wMCAxMS41MUwxOC43NSA5LjgxTDIyLjUwIDguNzVMMjYuMjUgOC40NkwzMC4wMCA4Ljk4TDMzLjc1IDEwLjIzTDM3LjUwIDEyLjA5TDQxLjI1IDE0LjMxTDQ1LjAwIDE2LjY0TDQ4Ljc1IDE4Ljc4TDUyLjUwIDIwLjQ2TDU2LjI1IDIxLjQ5TDYwLjAwIDIxLjcyTDYzLjc1IDIxLjEyTDY3LjUwIDE5Ljc2TDcxLjI1IDE3Ljc5TDc1LjAwIDE1LjQ1TDc4Ljc1IDEzLjAyTDgyLjUwIDEwLjgxTDg2LjI1IDkuMDhMOTAuMDAgOC4wN0w5My43NSA3LjkxTDk3LjUwIDguNjJMMTAxLjI1IDEwLjE0TDEwNS4wMCAxMi4yOUwxMDguNzUgMTQuODFMMTEyLjUwIDE3LjQwTDExNi4yNSAxOS43M0wxMjAuMDAgMjEuNTFMMTIzLjc1IDIyLjUxTDEyNy41MCAyMi42MEwxMzEuMjUgMjEuNzNMMTM1LjAwIDIwLjAxTDEzOC43NSAxNy42NEwxNDIuNTAgMTQuODlMMTQ2LjI1IDEyLjExTDE1MC4wMCA5LjY0TDE1My43NSA3Ljc5TDE1Ny41MCA2LjgxTDE2MS4yNSA2Ljg0TDE2NS4wMCA3Ljg5TDE2OC43NSA5Ljg0TDE3Mi41MCAxMi40N0wxNzYuMjUgMTUuNDZMMTgwLjAwIDE4LjQ0TDE4My43NSAyMS4wNEwxODcuNTAgMjIuOTNMMTkxLjI1IDIzLjg2TDE5NS4wMCAyMy43MEwxOTguNzUgMjIuNDVMMjAyLjUwIDIwLjI1TDIwNi4yNSAxNy4zN0wyMTAuMDAgMTQuMTVMMjEzLjc1IDEwLjk5TDIxNy41MCA4LjI5TDIyMS4yNSA2LjM5TDIyNS4wMCA1LjU0TDIyOC43NSA1Ljg1TDIzMi41MCA3LjMyTDIzNi4yNSA5Ljc1TDI0MC4wMCAxMi44N0wyNDMuNzUgMTYuMjhMMjQ3LjUwIDE5LjU3TDI1MS4yNSAyMi4zMkwyNTUuMDAgMjQuMThMMjU4Ljc1IDI0LjkyTDI2Mi41MCAyNC40MkwyNjYuMjUgMjIuNzZMMjcwLjAwIDIwLjEyTDI3My43NSAxNi44MkwyNzcuNTAgMTMuMjlMMjgxLjI1IDkuOTRMMjg1LjAwIDcuMjFMMjg4Ljc1IDUuNDRMMjkyLjUwIDQuODRMMjk2LjI1IDUuNTBMMzAwLjAwIDcuMzVMMzAzLjc1IDEwLjE0TDMwNy41MCAxMy41NEwzMTEuMjUgMTcuMTNMMzE1LjAwIDIwLjQ1TDMxOC43NSAyMy4wOUwzMjIuNTAgMjQuNzNMMzI2LjI1IDI1LjE3TDMzMC4wMCAyNC4zNEwzMzMuNzUgMjIuMzZMMzM3LjUwIDE5LjQ4TDM0MS4yNSAxNi4wNUwzNDUuMDAgMTIuNTFMMzQ4Ljc1IDkuMjlMMzUyLjUwIDYuODBMMzU2LjI1IDUuMzNMMzYwLjAwIDUuMDdMMzYzLjc1IDYuMDNMMzY3LjUwIDguMTBMMzcxLjI1IDExLjAwTDM3NS4wMCAxNC4zN0wzNzguNzUgMTcuNzhMMzgyLjUwIDIwLjgzTDM4Ni4yNSAyMy4xMkwzOTAuMDAgMjQuMzlMMzkzLjc1IDI0LjQ5TDM5Ny41MCAyMy40Mkw0MDEuMjUgMjEuMzJMNDA1LjAwIDE4LjQ4TDQwOC43NSAxNS4yNEw0MTIuNTAgMTIuMDFMNDE2LjI1IDkuMTlMNDIwLjAwIDcuMTNMNDIzLjc1IDYuMDZMNDI3LjUwIDYuMTFMNDMxLjI1IDcuMjVMNDM1LjAwIDkuMzNMNDM4Ljc1IDEyLjA2TDQ0Mi41MCAxNS4xMkw0NDYuMjUgMTguMTFMNDUwLjAwIDIwLjY4TDQ1My43NSAyMi41MEw0NTcuNTAgMjMuMzdMNDYxLjI1IDIzLjIwTDQ2NS4wMCAyMi4wM0w0NjguNzUgMjAuMDFMNDcyLjUwIDE3LjQyTDQ3Ni4yNSAxNC41N0w0ODAuMDAgMTEuODNMNDgzLjc1IDkuNTJMNDg3LjUwIDcuOTJMNDkxLjI1IDcuMjNMNDk1LjAwIDcuNDlMNDk4Ljc1IDguNjdMNTAyLjUwIDEwLjYxTDUwNi4yNSAxMy4wNUw1MTAuMDAgMTUuNjlMNTEzLjc1IDE4LjIwTDUxNy41MCAyMC4yOEw1MjEuMjUgMjEuNjdMNTI1LjAwIDIyLjIzTDUyOC43NSAyMS44OUw1MzIuNTAgMjAuNzFMNTM2LjI1IDE4Ljg1TDU0MC4wMCAxNi41NUw1NDMuNzUgMTQuMDhMNTQ3LjUwIDExLjc3TDU1MS4yNSA5Ljg4TDU1NS4wMCA4LjY0TDU1OC43NSA4LjE5TDU2Mi41MCA4LjU5TDU2Ni4yNSA5Ljc3TDU3MC4wMCAxMS41OEw1NzMuNzUgMTMuNzlMNTc3LjUwIDE2LjEzTDU4MS4yNSAxOC4zMkw1ODUuMDAgMjAuMDhMNTg4Ljc1IDIxLjIxTDU5Mi41MCAyMS41N0w1OTYuMjUgMjEuMTJMNjAwLjAwIDE5LjkyIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIG9wYWNpdHk9IjAuOCIgc3R5bGU9Ii0tdzowLjc7c3Ryb2tlLXdpZHRoOmNhbGModmFyKC0tdykgKiB2YXIoLS1naywgMSkpIi8+PHBhdGggZD0iTTAuMDAgOS4zMUwzLjc1IDEwLjkxTDcuNTAgMTMuMDBMMTEuMjUgMTUuMzJMMTUuMDAgMTcuNThMMTguNzUgMTkuNTFMMjIuNTAgMjAuODhMMjYuMjUgMjEuNTJMMzAuMDAgMjEuMzVMMzMuNzUgMjAuNDBMMzcuNTAgMTguNzlMNDEuMjUgMTYuNzJMNDUuMDAgMTQuNDNMNDguNzUgMTIuMjFMNTIuNTAgMTAuMzRMNTYuMjUgOS4wM0w2MC4wMCA4LjQ2TDYzLjc1IDguNjlMNjcuNTAgOS43MUw3MS4yNSAxMS4zOEw3NS4wMCAxMy41MUw3OC43NSAxNS44NEw4Mi41MCAxOC4wOEw4Ni4yNSAxOS45N0w5MC4wMCAyMS4yNUw5My43NSAyMS43N0w5Ny41MCAyMS40NkwxMDEuMjUgMjAuMzVMMTA1LjAwIDE4LjU1TDEwOC43NSAxNi4zMEwxMTIuNTAgMTMuODVMMTE2LjI1IDExLjUxTDEyMC4wMCA5LjU3TDEyMy43NSA4LjI4TDEyNy41MCA3LjgwTDEzMS4yNSA4LjIyTDEzNS4wMCA5LjQ4TDEzOC43NSAxMS40NUwxNDIuNTAgMTMuOTBMMTQ2LjI1IDE2LjUzTDE1MC4wMCAxOS4wMUwxNTMuNzUgMjEuMDNMMTU3LjUwIDIyLjMzTDE2MS4yNSAyMi43NUwxNjUuMDAgMjIuMjBMMTY4Ljc1IDIwLjc1TDE3Mi41MCAxOC41NkwxNzYuMjUgMTUuODhMMTgwLjAwIDEzLjA0TDE4My43NSAxMC40MEwxODcuNTAgOC4yOEwxOTEuMjUgNi45N0wxOTUuMDAgNi42NEwxOTguNzUgNy4zNEwyMDIuNTAgOS4wMUwyMDYuMjUgMTEuNDZMMjEwLjAwIDE0LjM5TDIxMy43NSAxNy40NUwyMTcuNTAgMjAuMjVMMjIxLjI1IDIyLjQ0TDIyNS4wMCAyMy43M0wyMjguNzUgMjMuOTZMMjMyLjUwIDIzLjA3TDIzNi4yNSAyMS4xNkwyNDAuMDAgMTguNDZMMjQzLjc1IDE1LjI4TDI0Ny41MCAxMi4wM0wyNTEuMjUgOS4xMUwyNTUuMDAgNi44OEwyNTguNzUgNS42NEwyNjIuNTAgNS41NUwyNjYuMjUgNi42NEwyNzAuMDAgOC43N0wyNzMuNzUgMTEuNzFMMjc3LjUwIDE1LjA4TDI4MS4yNSAxOC40OEwyODUuMDAgMjEuNDdMMjg4Ljc1IDIzLjY5TDI5Mi41MCAyNC44NEwyOTYuMjUgMjQuNzdMMzAwLjAwIDIzLjQ5TDMwMy43NSAyMS4xNUwzMDcuNTAgMTguMDNMMzExLjI1IDE0LjUyTDMxNS4wMCAxMS4wNUwzMTguNzUgOC4wNUwzMjIuNTAgNS45MUwzMjYuMjUgNC44OUwzMzAuMDAgNS4xMkwzMzMuNzUgNi41OEwzMzcuNTAgOS4wOEwzNDEuMjUgMTIuMzJMMzQ1LjAwIDE1Ljg5TDM0OC43NSAxOS4zNUwzNTIuNTAgMjIuMjdMMzU2LjI1IDI0LjI4TDM2MC4wMCAyNS4xNUwzNjMuNzUgMjQuNzVMMzY3LjUwIDIzLjE1TDM3MS4yNSAyMC41NUwzNzUuMDAgMTcuMjdMMzc4Ljc1IDEzLjczTDM4Mi41MCAxMC4zNkwzODYuMjUgNy41OUwzOTAuMDAgNS43NEwzOTMuNzUgNS4wNUwzOTcuNTAgNS42MEw0MDEuMjUgNy4zMEw0MDUuMDAgOS45NEw0MDguNzUgMTMuMTdMNDEyLjUwIDE2LjYxTDQxNi4yNSAxOS44MUw0MjAuMDAgMjIuMzhMNDIzLjc1IDI0LjAyTDQyNy41MCAyNC41M0w0MzEuMjUgMjMuODZMNDM1LjAwIDIyLjExTDQzOC43NSAxOS41MEw0NDIuNTAgMTYuMzdMNDQ2LjI1IDEzLjEyTDQ1MC4wMCAxMC4xNEw0NTMuNzUgNy44MEw0NTcuNTAgNi4zOEw0NjEuMjUgNi4wNEw0NjUuMDAgNi44MUw0NjguNzUgOC41N0w0NzIuNTAgMTEuMDlMNDc2LjI1IDE0LjA1TDQ4MC4wMCAxNy4wOEw0ODMuNzUgMTkuODFMNDg3LjUwIDIxLjkwTDQ5MS4yNSAyMy4xMUw0OTUuMDAgMjMuMzBMNDk4Ljc1IDIyLjQ3TDUwMi41MCAyMC43NEw1MDYuMjUgMTguMzNMNTEwLjAwIDE1LjU2TDUxMy43NSAxMi43N0w1MTcuNTAgMTAuMzBMNTIxLjI1IDguNDVMNTI1LjAwIDcuNDNMNTI4Ljc1IDcuMzZMNTMyLjUwIDguMjNMNTM2LjI1IDkuOTFMNTQwLjAwIDEyLjE5TDU0My43NSAxNC43N0w1NDcuNTAgMTcuMzRMNTUxLjI1IDE5LjU4TDU1NS4wMCAyMS4yMkw1NTguNzUgMjIuMDhMNTYyLjUwIDIyLjA1TDU2Ni4yNSAyMS4xNkw1NzAuMDAgMTkuNTNMNTczLjc1IDE3LjM2TDU3Ny41MCAxNC45NEw1ODEuMjUgMTIuNTVMNTg1LjAwIDEwLjUwTDU4OC43NSA5LjAyTDU5Mi41MCA4LjI5TDU5Ni4yNSA4LjM5TDYwMC4wMCA5LjMxIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIG9wYWNpdHk9IjAuOCIgc3R5bGU9Ii0tdzowLjc7c3Ryb2tlLXdpZHRoOmNhbGModmFyKC0tdykgKiB2YXIoLS1naywgMSkpIi8+PHBhdGggZD0iTTAuMDAgMTcuMTZMMy43NSAxNC42MEw3LjUwIDEyLjA1TDExLjI1IDkuODJMMTUuMDAgOC4yMEwxOC43NSA3LjQwTDIyLjUwIDcuNTNMMjYuMjUgOC42MEwzMC4wMCAxMC40OEwzMy43NSAxMi45NkwzNy41MCAxNS43NEw0MS4yNSAxOC40OEw0NS4wMCAyMC44M0w0OC43NSAyMi41MEw1Mi41MCAyMy4yNkw1Ni4yNSAyMy4wMEw2MC4wMCAyMS43NEw2My43NSAxOS42MUw2Ny41MCAxNi44OEw3MS4yNSAxMy44Nkw3NS4wMCAxMC45NEw3OC43NSA4LjQ3TDgyLjUwIDYuNzhMODYuMjUgNi4wOUw5MC4wMCA2LjUwTDkzLjc1IDcuOTdMOTcuNTAgMTAuMzVMMTAxLjI1IDEzLjM0TDEwNS4wMCAxNi41OEwxMDguNzUgMTkuNjZMMTEyLjUwIDIyLjIxTDExNi4yNSAyMy44OUwxMjAuMDAgMjQuNDhMMTIzLjc1IDIzLjkwTDEyNy41MCAyMi4yMUwxMzEuMjUgMTkuNTlMMTM1LjAwIDE2LjM4TDEzOC43NSAxMi45NkwxNDIuNTAgOS43NkwxNDYuMjUgNy4xOUwxNTAuMDAgNS41NkwxNTMuNzUgNS4xMEwxNTcuNTAgNS44NkwxNjEuMjUgNy43NkwxNjUuMDAgMTAuNThMMTY4Ljc1IDEzLjk2TDE3Mi41MCAxNy40OUwxNzYuMjUgMjAuNzNMMTgwLjAwIDIzLjI4TDE4My43NSAyNC44MEwxODcuNTAgMjUuMTJMMTkxLjI1IDI0LjE4TDE5NS4wMCAyMi4xMEwxOTguNzUgMTkuMTNMMjAyLjUwIDE1LjY1TDIwNi4yNSAxMi4wOUwyMTAuMDAgOC44OUwyMTMuNzUgNi40NEwyMTcuNTAgNS4wNkwyMjEuMjUgNC45MUwyMjUuMDAgNi4wMUwyMjguNzUgOC4yMkwyMzIuNTAgMTEuMjZMMjM2LjI1IDE0Ljc1TDI0MC4wMCAxOC4yNkwyNDMuNzUgMjEuMzVMMjQ3LjUwIDIzLjYzTDI1MS4yNSAyNC44NEwyNTUuMDAgMjQuODNMMjU4Ljc1IDIzLjYwTDI2Mi41MCAyMS4zMkwyNjYuMjUgMTguMjhMMjcwLjAwIDE0Ljg2TDI3My43NSAxMS40OUwyNzcuNTAgOC41OEwyODEuMjUgNi40OUwyODUuMDAgNS40N0wyODguNzUgNS42NEwyOTIuNTAgNi45NkwyOTYuMjUgOS4yNUwzMDAuMDAgMTIuMjJMMzAzLjc1IDE1LjUwTDMwNy41MCAxOC42N0wzMTEuMjUgMjEuMzVMMzE1LjAwIDIzLjIxTDMxOC43NSAyNC4wNEwzMjIuNTAgMjMuNzRMMzI2LjI1IDIyLjM3TDMzMC4wMCAyMC4xMkwzMzMuNzUgMTcuMjdMMzM3LjUwIDE0LjE5TDM0MS4yNSAxMS4yNkwzNDUuMDAgOC44M0wzNDguNzUgNy4yMUwzNTIuNTAgNi41NkwzNTYuMjUgNi45NkwzNjAuMDAgOC4zNUwzNjMuNzUgMTAuNTJMMzY3LjUwIDEzLjIxTDM3MS4yNSAxNi4wN0wzNzUuMDAgMTguNzVMMzc4Ljc1IDIwLjkyTDM4Mi41MCAyMi4zM0wzODYuMjUgMjIuODFMMzkwLjAwIDIyLjMzTDM5My43NSAyMC45NkwzOTcuNTAgMTguODhMNDAxLjI1IDE2LjM3TDQwNS4wMCAxMy43Mkw0MDguNzUgMTEuMjhMNDEyLjUwIDkuMzRMNDE2LjI1IDguMTJMNDIwLjAwIDcuNzZMNDIzLjc1IDguMjlMNDI3LjUwIDkuNjRMNDMxLjI1IDExLjYzTDQzNS4wMCAxNC4wMEw0MzguNzUgMTYuNDZMNDQyLjUwIDE4LjcxTDQ0Ni4yNSAyMC40N0w0NTAuMDAgMjEuNTRMNDUzLjc1IDIxLjgwTDQ1Ny41MCAyMS4yMkw0NjEuMjUgMTkuODhMNDY1LjAwIDE3Ljk2TDQ2OC43NSAxNS42OUw0NzIuNTAgMTMuMzZMNDc2LjI1IDExLjI0TDQ4MC4wMCA5LjYwTDQ4My43NSA4LjY0TDQ4Ny41MCA4LjQ2TDQ5MS4yNSA5LjA5TDQ5NS4wMCAxMC40NEw0OTguNzUgMTIuMzVMNTAyLjUwIDE0LjU4TDUwNi4yNSAxNi44Nkw1MTAuMDAgMTguOTFMNTEzLjc1IDIwLjQ4TDUxNy41MCAyMS4zOEw1MjEuMjUgMjEuNDlMNTI1LjAwIDIwLjgwTDUyOC43NSAxOS4zOUw1MzIuNTAgMTcuNDRMNTM2LjI1IDE1LjE3TDU0MC4wMCAxMi44Nkw1NDMuNzUgMTAuODBMNTQ3LjUwIDkuMjVMNTUxLjI1IDguMzlMNTU1LjAwIDguMzVMNTU4Ljc1IDkuMTNMNTYyLjUwIDEwLjY0TDU2Ni4yNSAxMi43Mkw1NzAuMDAgMTUuMTBMNTczLjc1IDE3LjUwTDU3Ny41MCAxOS42Mkw1ODEuMjUgMjEuMjBMNTg1LjAwIDIyLjAzTDU4OC43NSAyMi4wMEw1OTIuNTAgMjEuMDlMNTk2LjI1IDE5LjQyTDYwMC4wMCAxNy4xNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43IiBvcGFjaXR5PSIwLjgiIHN0eWxlPSItLXc6MC43O3N0cm9rZS13aWR0aDpjYWxjKHZhcigtLXcpICogdmFyKC0tZ2ssIDEpKSIvPjxwYXRoIGQ9Ik0wLjAwIDEzLjA5TDMuNzUgMTUuNzFMNy41MCAxOC4yOUwxMS4yNSAyMC41MEwxNS4wMCAyMi4wNkwxOC43NSAyMi43N0wyMi41MCAyMi41MkwyNi4yNSAyMS4zM0wzMC4wMCAxOS4zM0wzMy43NSAxNi43NkwzNy41MCAxMy45MUw0MS4yNSAxMS4xNkw0NS4wMCA4LjgzTDQ4Ljc1IDcuMjNMNTIuNTAgNi41OEw1Ni4yNSA2Ljk2TDYwLjAwIDguMzZMNjMuNzUgMTAuNjFMNjcuNTAgMTMuNDRMNzEuMjUgMTYuNTFMNzUuMDAgMTkuNDVMNzguNzUgMjEuODhMODIuNTAgMjMuNDhMODYuMjUgMjQuMDVMOTAuMDAgMjMuNTFMOTMuNzUgMjEuODlMOTcuNTAgMTkuMzlMMTAxLjI1IDE2LjMxTDEwNS4wMCAxMy4wMkwxMDguNzUgOS45NEwxMTIuNTAgNy40NUwxMTYuMjUgNS44N0wxMjAuMDAgNS40MUwxMjMuNzUgNi4xNEwxMjcuNTAgNy45OEwxMzEuMjUgMTAuNzFMMTM1LjAwIDE0LjAxTDEzOC43NSAxNy40NUwxNDIuNTAgMjAuNjJMMTQ2LjI1IDIzLjEyTDE1MC4wMCAyNC42M0wxNTMuNzUgMjQuOTVMMTU3LjUwIDI0LjA0TDE2MS4yNSAyMS45OUwxNjUuMDAgMTkuMDdMMTY4Ljc1IDE1LjYzTDE3Mi41MCAxMi4wOUwxNzYuMjUgOC45MEwxODAuMDAgNi40NkwxODMuNzUgNS4wN0wxODcuNTAgNC45MUwxOTEuMjUgNS45OUwxOTUuMDAgOC4yMEwxOTguNzUgMTEuMjVMMjAyLjUwIDE0Ljc2TDIwNi4yNSAxOC4zMUwyMTAuMDAgMjEuNDRMMjEzLjc1IDIzLjc2TDIxNy41MCAyNS4wMEwyMjEuMjUgMjUuMDBMMjI1LjAwIDIzLjc2TDIyOC43NSAyMS40NEwyMzIuNTAgMTguMzRMMjM2LjI1IDE0Ljg0TDI0MC4wMCAxMS4zN0wyNDMuNzUgOC4zOEwyNDcuNTAgNi4yMkwyNTEuMjUgNS4xNkwyNTUuMDAgNS4zM0wyNTguNzUgNi42OEwyNjIuNTAgOS4wNUwyNjYuMjUgMTIuMTNMMjcwLjAwIDE1LjU0TDI3My43NSAxOC44NUwyNzcuNTAgMjEuNjRMMjgxLjI1IDIzLjU5TDI4NS4wMCAyNC40NkwyODguNzUgMjQuMTZMMjkyLjUwIDIyLjczTDI5Ni4yNSAyMC4zNkwzMDAuMDAgMTcuMzdMMzAzLjc1IDE0LjEzTDMwNy41MCAxMS4wNEwzMTEuMjUgOC40OEwzMTUuMDAgNi43NkwzMTguNzUgNi4wN0wzMjIuNTAgNi41MEwzMjYuMjUgNy45NkwzMzAuMDAgMTAuMjdMMzMzLjc1IDEzLjExTDMzNy41MCAxNi4xNUwzNDEuMjUgMTguOTlMMzQ1LjAwIDIxLjMwTDM0OC43NSAyMi43OUwzNTIuNTAgMjMuMzBMMzU2LjI1IDIyLjc5TDM2MC4wMCAyMS4zM0wzNjMuNzUgMTkuMTFMMzY3LjUwIDE2LjQ0TDM3MS4yNSAxMy42M0wzNzUuMDAgMTEuMDRMMzc4Ljc1IDguOThMMzgyLjUwIDcuNzBMMzg2LjI1IDcuMzNMMzkwLjAwIDcuOTFMMzkzLjc1IDkuMzVMMzk3LjUwIDExLjQ1TDQwMS4yNSAxMy45Nkw0MDUuMDAgMTYuNTVMNDA4Ljc1IDE4LjkxTDQxMi41MCAyMC43Nkw0MTYuMjUgMjEuODZMNDIwLjAwIDIyLjEyTDQyMy43NSAyMS40OUw0MjcuNTAgMjAuMDhMNDMxLjI1IDE4LjA3TDQzNS4wMCAxNS43MEw0MzguNzUgMTMuMjhMNDQyLjUwIDExLjExTDQ0Ni4yNSA5LjQzTDQ1MC4wMCA4LjQ2TDQ1My43NSA4LjMwTDQ1Ny41MCA4Ljk2TDQ2MS4yNSAxMC4zNkw0NjUuMDAgMTIuMzJMNDY4Ljc1IDE0LjU5TDQ3Mi41MCAxNi44OUw0NzYuMjUgMTguOTVMNDgwLjAwIDIwLjUyTDQ4My43NSAyMS40MEw0ODcuNTAgMjEuNDhMNDkxLjI1IDIwLjc3TDQ5NS4wMCAxOS4zNUw0OTguNzUgMTcuNDBMNTAyLjUwIDE1LjE1TDUwNi4yNSAxMi44OEw1MTAuMDAgMTAuODdMNTEzLjc1IDkuMzZMNTE3LjUwIDguNTVMNTIxLjI1IDguNTJMNTI1LjAwIDkuMzBMNTI4Ljc1IDEwLjc5TDUzMi41MCAxMi44MEw1MzYuMjUgMTUuMTFMNTQwLjAwIDE3LjQyTDU0My43NSAxOS40NUw1NDcuNTAgMjAuOTVMNTUxLjI1IDIxLjcyTDU1NS4wMCAyMS42OEw1NTguNzUgMjAuODBMNTYyLjUwIDE5LjE5TDU2Ni4yNSAxNy4wNEw1NzAuMDAgMTQuNjFMNTczLjc1IDEyLjE5TDU3Ny41MCAxMC4wOUw1ODEuMjUgOC41N0w1ODUuMDAgNy44Mkw1ODguNzUgNy45NUw1OTIuNTAgOC45N0w1OTYuMjUgMTAuNzVMNjAwLjAwIDEzLjA5IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIG9wYWNpdHk9IjAuOCIgc3R5bGU9Ii0tdzowLjc7c3Ryb2tlLXdpZHRoOmNhbGModmFyKC0tdykgKiB2YXIoLS1naywgMSkpIi8+PC9zdmc+); } /* GENERERET af byg-ui.py */ /* ─── kits/ui/02-materiale/sejr-illustration.css ─── */ /* SEJR UI — illustrationerne. GENERERET. * * ██ RET ALDRIG DENNE FIL I HÅNDEN. Ret `byg-ui.py` og kør den igen. * * SEJR har ingen stregtegninger og skal ikke have nogen. En tom tilstand * tegnet med en glad figur er et andet firmas sprog, og den ville være det * eneste i hele systemet der ikke var målt. * * Til gengæld ligger der tyve plader i fundamentet med BETYDNING i sig — * valgt og begrundet i §05. Betydningen er ikke opfundet her. * * EN ILLUSTRATION ER ALDRIG BESKEDEN. Pladen står over en overskrift og en * sætning der siger hvad man gør. Samme lov som farve og skravering: pladen * bekræfter det, ordet allerede har sagt. En bro alene fortæller ingen at de * skal knytte deres bank til kontoen. * * ─── HVORFOR PLADERNE ER FILER OG SKRAVERINGEN ER DATA-URI'ER ───────────── * * Skraveringsfliserne er 370 bytes og gentages i hvert eneste tilstandsmærke * på skærmen; de hører i CSS'en. Pladerne er 12-36 kB hver, og lagt ind som * data-URI'er blev denne fil 175 kB — båret af hver app, også dem der aldrig * viser en tom tilstand. * * De ligger derfor som filer i `./illustration/`, INDE i pakken, så en * relativ URL overlever at nogen bundler kittet. Samme svar som * terminal-kittet giver: små ting bages ind, store ting leveres ved siden af. * * Filerne er KOPIER, tegnet af den samme plade som fundamentet tegner. De må * aldrig rettes i hånden: `proev-alt.py` bygger dem igen og fælder hvis en * kopi er drevet fra sin kilde. */ .gravure { display: block; background-color: currentColor; opacity: .38; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } /* Pladen er tegning, ikke tekst. Bærer den betydning i en bestemt sammenhæng, skal den have et rigtigt navn i markup — role="img" og aria-label — og oplysningen skal ALLIGEVEL stå som tekst på samme flade. Uden label er den dekoration og skal være aria-hidden. */ @supports not (mask-image: none) { .gravure { display: none; } } /* rosette — The seal itself. Signature moments and locked prospects. */ .gravure-rosette { aspect-ratio: 200 / 200; mask-image: url("/identitet/aktiver/gravure-rosette.svg"); } /* baand — The note edge. Card faces, price rules, section seams. */ .gravure-baand { aspect-ratio: 600 / 28; mask-image: url("/identitet/aktiver/gravure-baand.svg"); } /* hjoerne — The certificate corner. Onboarding, card order, anything that is a proof. */ .gravure-hjoerne { aspect-ratio: 160 / 160; mask-image: url("/identitet/aktiver/gravure-hjoerne.svg"); } /* segl — The stamp. Where a file becomes a document. */ .gravure-segl { aspect-ratio: 180 / 180; mask-image: url("/identitet/aktiver/gravure-segl.svg"); } /* krans — Laurel. The result: granted, opened, on its way. */ .gravure-krans { aspect-ratio: 190 / 190; mask-image: url("/identitet/aktiver/gravure-krans.svg"); } /* bro — The crossing. Payments and transfers. */ .gravure-bro { aspect-ratio: 380 / 190; mask-image: url("/identitet/aktiver/gravure-bro.svg"); } /* akser — Wheat. The overview — what grows. */ .gravure-akser { aspect-ratio: 170 / 170; mask-image: url("/identitet/aktiver/gravure-akser.svg"); } /* lineal — The ledger ruling. Statements, books, any reckoning. */ .gravure-lineal { aspect-ratio: 420 / 260; mask-image: url("/identitet/aktiver/gravure-lineal.svg"); } /* kartouche — The figure's setting. Where the balance lives. */ .gravure-kartouche { aspect-ratio: 340 / 150; mask-image: url("/identitet/aktiver/gravure-kartouche.svg"); } /* instrument — The graduated scale. How SEJR draws a chart. */ .gravure-instrument { aspect-ratio: 320 / 108; mask-image: url("/identitet/aktiver/gravure-instrument.svg"); } /* lagt-papir — The laid ground. Letterhead, section fields, empty states. */ .gravure-lagt-papir { aspect-ratio: 300 / 200; mask-image: url("/identitet/aktiver/gravure-lagt-papir.svg"); } /* vaev — The cross-ply tint. Large empty ground only. */ .gravure-vaev { aspect-ratio: 300 / 200; mask-image: url("/identitet/aktiver/gravure-vaev.svg"); } /* marmor — Nonpareil marbling. The one organic plate. Print only. */ .gravure-marmor { aspect-ratio: 300 / 200; mask-image: url("/identitet/aktiver/gravure-marmor.svg"); } /* port — The gateway. Openness - a bank that lets you in. */ .gravure-port { aspect-ratio: 300 / 210; mask-image: url("/identitet/aktiver/gravure-port.svg"); } /* genstand — The balance scale. Fair measure, which is what settlement is. */ .gravure-genstand { aspect-ratio: 300 / 170; mask-image: url("/identitet/aktiver/gravure-genstand.svg"); } /* hatch — The hatch code. Colour without colour, on every plate. */ .gravure-hatch { aspect-ratio: 400 / 78; mask-image: url("/identitet/aktiver/gravure-hatch.svg"); } /* kant — The running edge that meets the corner without a seam. */ .gravure-kant { aspect-ratio: 300 / 300; mask-image: url("/identitet/aktiver/gravure-kant.svg"); } /* mikro — The legal furniture. True registration only, never security. */ .gravure-mikro { aspect-ratio: 420 / 130; mask-image: url("/identitet/aktiver/gravure-mikro.svg"); } /* annullering — The cancellation. The one plate allowed over content. */ .gravure-annullering { aspect-ratio: 420 / 190; mask-image: url("/identitet/aktiver/gravure-annullering.svg"); } /* vandmaerke — The watermark. A density change in the same material. */ .gravure-vandmaerke { aspect-ratio: 420 / 200; mask-image: url("/identitet/aktiver/gravure-vandmaerke.svg"); } /* boelge — The wave underprint. The restless ground every old note carries. */ .gravure-boelge { aspect-ratio: 420 / 200; mask-image: url("/identitet/aktiver/gravure-boelge.svg"); } /* spiro — Engine turning proper. The lathe's own closed line. */ .gravure-spiro { aspect-ratio: 220 / 220; mask-image: url("/identitet/aktiver/gravure-spiro.svg"); } /* boers — The Exchange, 1625. Trade's own house, dragon spire and all. */ .gravure-boers { aspect-ratio: 380 / 240; mask-image: url("/identitet/aktiver/gravure-boers.svg"); } /* skib — The merchant full-rigger. What carried Danish trade. */ .gravure-skib { aspect-ratio: 300 / 220; mask-image: url("/identitet/aktiver/gravure-skib.svg"); } /* palae — Erichsens Palae, 1799. A trade fortune's house on Holmens Kanal. */ .gravure-palae { aspect-ratio: 300 / 230; mask-image: url("/identitet/aktiver/gravure-palae.svg"); } /* moent — Svend Tveskaeg's coin, 995. The first to bear king and country. */ .gravure-moent { aspect-ratio: 160 / 160; mask-image: url("/identitet/aktiver/gravure-moent.svg"); } /* merkur — The caduceus. Trade's own emblem, the Exchange's own god. */ .gravure-merkur { aspect-ratio: 140 / 220; mask-image: url("/identitet/aktiver/gravure-merkur.svg"); } /* rundetaarn — The Round Tower, 1642. Science over the trading city. */ .gravure-rundetaarn { aspect-ratio: 160 / 260; mask-image: url("/identitet/aktiver/gravure-rundetaarn.svg"); } /* kronborg — Kronborg, 1585. The Sound Toll's castle - money history itself. */ .gravure-kronborg { aspect-ratio: 380 / 200; mask-image: url("/identitet/aktiver/gravure-kronborg.svg"); } /* opgoerelse — The itemised bill. A closed reckoning, not an open book. */ .gravure-opgoerelse { aspect-ratio: 420 / 200; mask-image: url("/identitet/aktiver/gravure-opgoerelse.svg"); } /* deling — The fee in three. Two parts that are not ours, one that is. */ .gravure-deling { aspect-ratio: 340 / 150; mask-image: url("/identitet/aktiver/gravure-deling.svg"); } /* fjerdedel — VAT as a quarter, true by construction rather than by claim. */ .gravure-fjerdedel { aspect-ratio: 240 / 200; mask-image: url("/identitet/aktiver/gravure-fjerdedel.svg"); } /* register — The lookup. Someone else's register, and the entry found. */ .gravure-register { aspect-ratio: 300 / 180; mask-image: url("/identitet/aktiver/gravure-register.svg"); } /* tydning — The key. The line as printed, and what it means. */ .gravure-tydning { aspect-ratio: 320 / 190; mask-image: url("/identitet/aktiver/gravure-tydning.svg"); } /* kaede — The IBAN chain, and the one link that carries the check. */ .gravure-kaede { aspect-ratio: 400 / 140; mask-image: url("/identitet/aktiver/gravure-kaede.svg"); } /* skilt — The hung board. The one tool that ends as paper in a window. */ .gravure-skilt { aspect-ratio: 260 / 210; mask-image: url("/identitet/aktiver/gravure-skilt.svg"); } /* indfatning — The medallion rim. The milled ring that sets chaos as a coin. */ .gravure-indfatning { aspect-ratio: 240 / 240; mask-image: url("/identitet/aktiver/gravure-indfatning.svg"); } /* marmorkirken — Marmorkirken, 1894. Tietgen's dome - the ruin finance finished. */ .gravure-marmorkirken { aspect-ratio: 260 / 240; mask-image: url("/identitet/aktiver/gravure-marmorkirken.svg"); } /* telegraf — Great Northern's mast, 1869. Tietgen wired Denmark to the world. */ .gravure-telegraf { aspect-ratio: 300 / 220; mask-image: url("/identitet/aktiver/gravure-telegraf.svg"); } /* dampskib — The DFDS steamer, 1866. Tietgen's steam succeeding sail. */ .gravure-dampskib { aspect-ratio: 300 / 200; mask-image: url("/identitet/aktiver/gravure-dampskib.svg"); } /* ringbaand — The calm medallion band. A wreath, not weather. */ .gravure-ringbaand { aspect-ratio: 240 / 240; mask-image: url("/identitet/aktiver/gravure-ringbaand.svg"); } /* engangs — Paid once. One field at the start, and the band goes quiet. */ .gravure-engangs { aspect-ratio: 340 / 150; mask-image: url("/identitet/aktiver/gravure-engangs.svg"); } /* tilbagevendende — Every month. The same field, again, and off the edge. */ .gravure-tilbagevendende { aspect-ratio: 340 / 150; mask-image: url("/identitet/aktiver/gravure-tilbagevendende.svg"); } /* trin — The tier rising, and crossing the flat line it overtakes. */ .gravure-trin { aspect-ratio: 340 / 150; mask-image: url("/identitet/aktiver/gravure-trin.svg"); } /* GENERERET af byg-ui.py */ /* ─── kits/ui/02-materiale/sejr-venter.css ─── */ /* SEJR UI — det der venter. Skelettet, mens tallet er på vej. * * Skrevet 22. august 2026. * * ─── DEN ENE REGEL DER GØR DET FARLIGT ───────────────────────────────────── * * ET SKELET VISER ALDRIG ET TAL. Ikke et gråt tal, ikke et udtonet tal, ikke * «0,00» mens det rigtige hentes. Et beløb der står på skærmen bliver læst, * også når det er lyst, og en handelsdrivende der ser 0,00 i et halvt sekund * har set noget der ikke er sandt. * * Det er den samme lov som «et beløb animerer aldrig sin værdi», og den er * skrappere her: en optælling er i det mindste ærlig om at være i gang. Et * bleget tal ligner et resultat. * * Derfor har `.venter` `color: transparent` — tekst inde i den forsvinder, * selvom nogen skriver et tal ind i markup ved et uheld. Det er ikke pynt; * det er en spærre. * * ─── OG SÅ EN TIL ───────────────────────────────────────────────────────── * * SKELETTET HAR SAMME FORM SOM DET DER KOMMER. Er beløbet 116 px bredt, er * bjælken 116 px bred. Ellers hopper hele fladen når indholdet lander, og et * hop er den dyreste bevægelse der findes — den flytter det man var ved at * læse. * * ─── BRUG ────────────────────────────────────────────────────────────────── * * * * Beholderen skal bære `aria-busy="true"`, og der skal være et * `aria-live`-område der siger til når indholdet er landet. Et skelet er * usynligt for en skærmlæser — for den er der bare ingenting, i ubestemt tid. */ .venter { color: transparent !important; /* spærren. Se hovedet. */ background-color: var(--flade-3); border-radius: var(--hjorne-1); border-color: transparent; box-shadow: none; user-select: none; pointer-events: none; /* Strejfet af lys. Det er materialeloven igen — lyset kommer ovenfra og bevæger sig hen over fladen, ikke en farve der pulserer. */ background-image: linear-gradient( 100deg, transparent 30%, color-mix(in srgb, var(--tekst) 7%, transparent) 50%, transparent 70%); background-size: 220% 100%; background-repeat: no-repeat; animation: venter-strejf 1.4s var(--ease-std) infinite; } @keyframes venter-strejf { from { background-position: 120% 0; } to { background-position: -20% 0; } } /* En linje tekst der venter. Højden er linjehøjden, ikke et tal. */ .venter-linje { height: 1em; display: block; } .venter-linje + .venter-linje { margin-top: var(--rum-2); } /* Sidste linje i et afsnit er kortere, som en rigtig sidste linje. */ .venter-linje:last-child { width: 62%; } /* Et rundt mærke — avatar, initialer, ikon. */ .venter-mrk { border-radius: var(--hjorne-3); } /* ---- reduceret bevægelse ------------------------------------------------- Strejfet slås fra, men fladen bliver. Et skelet uden bevægelse er stadig et skelet; et skelet der forsvinder er en tom skærm. `fundament/07-bevaegelse` slår ikke denne animation fra af sig selv — den fil hvidlister hvad der må overleve, og en uendelig animation hører ikke på den liste. Derfor står den her. */ @media (prefers-reduced-motion: reduce) { .venter { animation: none; background-image: none; } } /* ---- den optagne kontrol ------------------------------------------------- Skelettet ovenfor er til INDHOLD der endnu ikke er kommet. En knap man lige har trykket på er noget andet: fladen er der, handlingen er i gang, og brugeren skal se at systemet arbejder uden at knappen forsvinder. Huset havde ikke den tilstand. Det blev fundet 29. august 2026 ved at rulle kittet ud i dashboardet, hvor 31 filer hentede lucides `Loader2` ind — ikke af dovenskab, men fordi der ikke var noget at hente her. `ic-spinner` er husets bue; .snurrer får den til at dreje. Ordet skal stadig med: en knap der arbejder siger det oplæst, ikke kun visuelt. */ .snurrer { animation: snurrer 900ms linear infinite; transform-origin: 50% 50%; } @keyframes snurrer { to { transform: rotate(360deg); } } /* Samme begrundelse som skelettet ovenfor: uendelige animationer står ikke på bevægelsesfilens hvidliste, så de slås fra her. Buen bliver stående — den er stadig et tegn på at noget er i gang. */ @media (prefers-reduced-motion: reduce) { .snurrer { animation: none; } } /* ─── kits/ui/02-materiale/sejr-glas.css ─── */ /* SEJR UI — glas. * * Skrevet 16. august 2026, efter at materialet blev prøvet af på skærm og * ikke bare antaget. * * HVAD GLAS ER: en flade der lader grunden skinne igennem, sløret. Intet andet. * Den er lavet af nøjagtig to farver — --ink og --paper — ved lav alpha. Der * kommer ingen tredje farve ind i glasset. Nogensinde. * * DEN REGEL DER AFGØR OM DET VIRKER: GLAS SKAL HAVE NOGET BAG SIG. * Et sløret panel over en ensfarvet flade er ikke glas — det er en lysere * firkant, og det ser ud som en fejl. Ligger der ikke indhold, gradient eller * struktur bagved, skal fladen være massiv (.flade-massiv) i stedet. Dette er * ikke en smagssag; det blev prøvet, og den ensfarvede udgave så ud som en plet. */ /* 6. SEPTEMBER 2026: PAPIRET OG BLÆKKET KOMMER FRA TOKENS. Fra 16. august stod rgba(250,250,247,…) og rgba(15,20,25,…) skrevet i hånden herunder — den ældste udgave i mappen og en lille løgn i tre uger: papiret stod to steder, og to steder driver. Nu color-mix af --paper og --ink, som resten af materialet. Dagens to skygger er samtidig sat et par procentpoint op (10→12, 20→26), i samme runde som kortet fik sine tre lag — glasset er heltekortet på forsiden, og det skal ikke ligge fladere end panelerne under det. Nattens sorte blev til --ink, fem procentpoint tættere. */ :root { /* Glassets slør. 22px er nok til at indhold bag bliver ulæseligt (så det ikke konkurrerer med teksten foran) uden at fladen mister fornemmelsen af at der ER noget bagved. */ --glas-blur: 22px; --glas-maetning: 1.4; /* ---- glas på papir ----------------------------------------------------- Rettet 16. august 2026: første udgave slørede BLÆK ind over papiret, og resultatet var mørkere end sin omgivelse. En flade der er mørkere end grunden læses ikke som glas — den læses som en plet. Det var også præcis den fejl der gjorde de første tilstandsflader grå. Mælkeglas er lysere end det, det ligger på. Derfor er glasset nu PAPIR på begge grunde; forskellen er kun hvad man ser det imod. Definitionen kommer så fra to ting papir ikke selv kan give: en tynd mørk hårstreg hele vejen rundt, og en rigtig skygge under. Uden dem flyder en lys flade ud i en lys grund. */ --glas-1: color-mix(in srgb, var(--paper) 78%, transparent); --glas-2: color-mix(in srgb, var(--paper) 52%, transparent); --glas-kant: color-mix(in srgb, var(--ink) 14%, transparent); --glas-kant-top: color-mix(in srgb, var(--paper) 92%, transparent); /* lyset rammer overkanten */ --glas-rand: color-mix(in srgb, var(--paper) 92%, transparent); --glas-skygge-naer: color-mix(in srgb, var(--ink) 12%, transparent); /* kontaktskygge, holder kanten skarp */ --glas-skygge: color-mix(in srgb, var(--ink) 26%, transparent); /* løftet, det der får den til at svæve */ } /* ---- glas på ink --------------------------------------------------------- Papiret er sløret, og kraftigere: på mørk grund skal der mere lys til før fladen overhovedet aflæses som en flade. Overkanten er lysest — det er dér lyset ville ramme. */ [data-ground="nat"] , .nat { --glas-1: color-mix(in srgb, var(--paper) 10%, transparent); --glas-2: color-mix(in srgb, var(--paper) 3%, transparent); --glas-kant: color-mix(in srgb, var(--paper) 16%, transparent); --glas-kant-top: color-mix(in srgb, var(--paper) 30%, transparent); --glas-rand: color-mix(in srgb, var(--paper) 10%, transparent); --glas-skygge-naer: color-mix(in srgb, var(--ink) 45%, transparent); --glas-skygge: color-mix(in srgb, var(--ink) 60%, transparent); } /* ---- selve fladen -------------------------------------------------------- Én klasse. Radius og polstring kommer udefra — glas er et materiale, ikke en komponent. */ .glas { background: linear-gradient(160deg, var(--glas-1), var(--glas-2)); border: 1px solid var(--glas-kant); border-top-color: var(--glas-kant-top); /* Tre lag: randlys i overkanten, en tæt kontaktskygge der holder kanten skarp, og en blød skygge der løfter fladen fra grunden. Den tætte er det der gør forskellen på lys grund — uden den flyder mælkeglas ud i papir. */ box-shadow: inset 0 1px 0 var(--glas-rand), 0 1px 2px var(--glas-skygge-naer), 0 20px 44px -18px var(--glas-skygge); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .glas { -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-maetning)); backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-maetning)); } } /* Browsere uden backdrop-filter får en massiv flade i stedet for et gennemsigtigt panel man ikke kan læse hen over. Aldrig et halvt resultat. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glas { background: var(--flade-2); } } /* ---- massiv flade -------------------------------------------------------- Samme form og løft, ingen gennemsigtighed. Brug den når der ikke er noget bag glasset — og altid når teksten SKAL kunne læses uanset hvad der ligger under. */ .flade-massiv { background: var(--flade-2); border: 1px solid var(--kant); box-shadow: var(--loft-2); } /* ---- POS og berøring: glasset slås fra ----------------------------------- Dette er den vigtigste blok i filen. En POS står på en disk under loftlys, ofte med sollys fra siden, og bliver aflæst på et halvt sekund af en der har travlt. Gennemsigtighed koster kontrast, og kontrasten er allerede brugt på at teksten skal kunne læses skævt fra og i blænding. Derfor: i berøringstæthed er glas massivt. Glasset er en æstetik. At kunne se beløbet er et krav. Når de to er i konflikt, vinder beløbet. Fire selektorer, ikke to: tætheden kan stå på en FORFADER (typisk i en POS-app) eller på SELVE glasfladen. Skrives kun descendant-varianten, virker
ikke — glasset bliver stående gennemsigtigt på netop den skærm hvor det ikke må. Målt og fanget af selvtest.html 16. august 2026. */ [data-taethed="beroring"] .glas, [data-taethed="beroring"].glas, .taethed-beroring .glas, .taethed-beroring.glas { background: var(--flade-2); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--kant-staerk); box-shadow: var(--loft-2); } /* Samme hensyn, brugerens eget valg: nogle systemer beder om mindre gennemsigtighed af hensyn til læsbarhed. Det respekteres. */ @media (prefers-reduced-transparency: reduce) { .glas { background: var(--flade-2); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ─── kits/ui/02-materiale/sejr-gloed.css ─── */ /* SEJR UI — glød og de levende plader. * * Skrevet 2. september 2026, den dag reglerne for kittet blev ophævet. * * ─── HVORFOR DEN FINDES ──────────────────────────────────────────────────── * * Morris' beslutning: kittet skal STÅ UD. Ikke ved at ligne noget nyt, men * ved at det materiale ingen andre har — gravurerne, seglet, guillochen — * får lov at bevæge sig. Indtil i dag lå pladerne stille bag en tom * tilstand, og glasset var pensioneret «fordi det blev til støj». Det er * vendt om: en flade må gløde, en plade må dreje, og et segl må stemple. * * Det der IKKE er vendt om: farverne. Hver glød er et af husets tokens ved * lav alpha. Der står ingen hex i denne fil, og `proev-alt.py` fælder hvis * der kommer en. * * ─── GLØDEN ──────────────────────────────────────────────────────────────── * * En glød er lys der kommer INDEFRA en flade — modsat lysfaldet, der kommer * ovenfra. På nat er den synlig; på dag er den næsten ingenting, for papir * lyser ikke. Det er samme fysik som `--lysfald`: én egenskab, to grunde, * og komponenten behøver ikke vide hvilken. * * ─── DE LEVENDE PLADER ───────────────────────────────────────────────────── * * `spiro` og `ringbaand` er lukkede, koncentriske figurer — de kan dreje * uendeligt uden at nogen kan se hvor de begyndte. `boelge` er et bånd — * det kan drive sidelæns. `segl` drejer kun når man rører det. * * Tempoet er LANGSOMT. 90 sekunder for én omdrejning: man skal ikke kunne * se det bevæge sig, man skal kunne se at det er anderledes hver gang man * kigger. Det er forskellen på en tekstur og en animation. * * `prefers-reduced-motion` standser alt. En plade der står stille, er * stadig en plade. */ :root { /* Gløden: husets farver ved lav alpha. Dag er svag, fordi papir ikke lyser. */ --gloed: color-mix(in srgb, var(--paper) 0%, transparent); --gloed-crimson: color-mix(in srgb, var(--crimson) 10%, transparent); --gloed-succes: color-mix(in srgb, var(--fn-success) 10%, transparent); --gloed-radius: 60%; /* Den levende plades styrke: hvor tydelig grunden bag en flade er. */ --plade-levende-alpha: .07; } [data-ground="nat"], .nat { --gloed: color-mix(in srgb, var(--paper) 7%, transparent); --gloed-crimson: color-mix(in srgb, var(--crimson) 22%, transparent); --gloed-succes: color-mix(in srgb, var(--fn-success) 22%, transparent); --plade-levende-alpha: .10; } /* ─── .gloed · en flade der lyser indefra ───────────────────────────────── */ .gloed { position: relative; isolation: isolate; } .gloed::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 30%, var(--gloed) 0%, transparent var(--gloed-radius)); } .gloed-crimson::before { background: radial-gradient(circle at 50% 30%, var(--gloed-crimson) 0%, transparent var(--gloed-radius)); } .gloed-succes::before { background: radial-gradient(circle at 50% 30%, var(--gloed-succes) 0%, transparent var(--gloed-radius)); } /* ─── .gravure-levende · en plade der drejer bag en flade ─────────────────── Lægges på et .gravure-element der ligger ABSOLUT bag indholdet. Selve masken kommer fra .gravure-spiro / -ringbaand / -segl. */ .gravure-levende { position: absolute; pointer-events: none; opacity: var(--plade-levende-alpha); animation: gravure-drej var(--tempo-omdrejning) linear infinite; will-change: transform; } .gravure-levende--modsat { animation-direction: reverse; } @keyframes gravure-drej { from { transform: rotate(0turn); } to { transform: rotate(1turn); } } /* ─── .gravure-drift · båndet der driver sidelæns ────────────────────────── */ .gravure-drift { position: absolute; pointer-events: none; opacity: var(--plade-levende-alpha); mask-repeat: repeat-x; mask-size: auto 100%; animation: gravure-glid var(--tempo-drift) linear infinite; } @keyframes gravure-glid { from { mask-position: 0 0; } to { mask-position: 420px 0; } /* én flise af boelge-pladen */ } /* ─── Seglet drejer kun når man rører det ────────────────────────────────── */ .gravure-segl.gravure-roer { transition: transform var(--tid-4) var(--ease-std); } .gravure-segl.gravure-roer:hover { transform: rotate(12deg); } /* ─── Fladen der har en levende grund ──────────────────────────────────────── Beholderen: klipper pladen, så den ikke stikker ud af kortet. */ .levende { position: relative; overflow: hidden; isolation: isolate; } .levende > .gravure-levende, .levende > .gravure-drift { z-index: 0; } .levende > :not(.gravure-levende):not(.gravure-drift) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .gravure-levende, .gravure-drift { animation: none; } .gravure-segl.gravure-roer:hover { transform: none; } } /* gløden og de levende plader, 2. sept. 2026 */ /* ─── kits/ui/02-materiale/sejr-segl.css ─── */ /* SEJR UI — det personlige segl. * * Skrevet 2. september 2026. * * Seglet er tegnet af matematik og frøet med en streng, og strengen er * HANS: partnerens id, kundens id. Ét segl, hans, ingen andens, det samme i * al fremtid. Det står som §Sejrsfølelsens punkt 2 — «en ting man kan være * stolt af, fordi den ikke kunne købes» — og indtil i dag var det kun en * sætning. Nu er det en avatar, et hoved på en side, et stempel på en * opgørelse. * * SVG'en tegnes INLINE af `Segl.tsx` (den samme algoritme som * `byg-gravure.py`, FNV-1a ind i mulberry32, så et segl regnet her og et * segl regnet dér er det samme segl). Denne fil giver den kun størrelse, * farve og de tre roller. * * Stregerne er `currentColor`, så seglet tager farve efter det det står i. * Det er hele pointen med en maske frem for en tegning: et segl på en * crimson knap er crimson-hvidt, et segl på papir er blæk. */ .segl { display: inline-block; inline-size: var(--segl-str, 40px); block-size: var(--segl-str, 40px); color: currentColor; flex: none; /* Stregvægten er tegnet til 180 px. Under 48 px bliver de fem indre ringe til gråt; kompensationen tykner dem, så de stadig kan læses. */ --gk: 1; } .segl svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; } /* ─── Tre roller ─────────────────────────────────────────────────────────── */ /* Avataren. Sidder hvor initialerne sad. På en handlingsflade er den papir. */ .segl-avatar { --segl-str: 28px; /* Tegningen er 180 enheder; ved 28 px er én enhed 0,155 px. Stregen på 0,65 skal ganges med ~6 for at blive en pixel — under det er seglet en grå tåge, målt i dokken 5. september 2026. */ --gk: 6; border-radius: 50%; padding: 2px; background: var(--flade-3); color: var(--tekst); } /* De tre inderste lappede ringe (sti 6–8) forsvinder ved 28 px: fem ringe på 24 px er ét gråt felt. Tænderne, de to ringe og de to yderste lapper er stadig HANS segl — de bærer alle tallene frøet gav. */ .segl-avatar path:nth-child(n + 6) { display: none; } /* Sidder seglet i en knap, kvitterer fladen bag det for musen — som enhver anden knap i huset. Tegningen selv rører sig ikke. */ :is(button, a):hover > .segl-avatar:not(.paa-handling) { background: var(--flade-hover); } .segl-avatar { transition: background var(--tid-1) var(--ease-std), color var(--tid-1) var(--ease-std); } .segl-avatar.paa-handling { background: var(--handling); color: var(--paa-handling); } /* Hovedet. Stort, på partnerens egen side, gerne med en glød bag. */ .segl-hoved { --segl-str: clamp(96px, 14vw, 160px); --gk: 1.8; color: var(--tekst); opacity: .92; } /* Stemplet. Det der lander på en opgørelse. Sætter selv sin hældning, for et stempel der står lige, er et logo — et der hælder, er blevet SAT. */ .segl-stempel { --segl-str: 56px; --gk: 2.6; color: var(--crimson); transform: rotate(-8deg); opacity: .9; mix-blend-mode: multiply; } [data-ground="nat"] .segl-stempel, .nat .segl-stempel { mix-blend-mode: screen; color: var(--crimson-bright); } /* det personlige segl */ /* ─── kits/ui/02-materiale/sejr-maerke.css ─── */ /* SEJR UI — mærket i en grænseflade. * * §01: ordmærket er fire bogstaver i ét snit; app-ikonet er mærket med sit * eget lys. Kittet tegner ingen af dem — de kommer som SVG fra * fundament/01-maerke gennem `react/src/maerke-kilde.ts` (GENERERET af * byg-ui.py). Her står kun hvordan de sidder. * * ORDMÆRKET TAGER FARVE EFTER DET DET STÅR I. `fill="currentColor"`, så * `.maerke` på blæk er papir og på papir er blæk — uden en klasse pr. grund. * Vil man have det FAST — på et fotografi, på crimson — bruger man * `.maerke-ink` eller `.maerke-paper`, og så er det en beslutning. */ .maerke { display: inline-block; color: var(--tekst); line-height: 0; flex: none; } .maerke svg { display: block; block-size: var(--maerke-h, 24px); inline-size: auto; } .maerke-ink { color: var(--ink); } .maerke-paper { color: var(--paper); } /* Frizonen. §01: mindst højden af «S» hele vejen rundt. Klassen sætter den som polstring, så et mærke i en bjælke aldrig rører kanten. */ .maerke-frizone { padding: calc(var(--maerke-h, 24px) * .5); } /* App-ikonet. Hjørnet er mærkets eget forhold (`--hjorne-maerke`, 22,46 %), ikke en af skalaens. Det er den ene form i kittet der ikke følger hjørneloven, og det er fordi den kom før loven. */ .maerke-ikon { display: inline-block; inline-size: var(--maerke-ikon-str, 48px); block-size: var(--maerke-ikon-str, 48px); border-radius: var(--hjorne-maerke); overflow: hidden; line-height: 0; flex: none; } .maerke-ikon svg { display: block; inline-size: 100%; block-size: 100%; } /* Mærket i en bjælke: ordmærket og en undertitel i mono-versaler, som i dashboardets sidebjælke. Undertitlen er produktet, ikke et slogan. */ .maerke-linje { display: inline-flex; flex-direction: column; gap: var(--rum-1); } .maerke-under { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--spor-etiket); text-transform: uppercase; color: var(--tekst-3); } /* §01 i kittet: ordmærke og app-ikon, 5. sept. 2026 */ /* ─── kits/ui/02-materiale/sejr-farve.css ─── */ /* SEJR UI — farveprøven. * * Til kataloget og dokumentationen: en flade med et tokennavn og den * VÆRDI browseren faktisk giver det. Værdien læses af komponenten med * getComputedStyle, aldrig skrevet ind — «måle, ikke huske» gælder også * for en prøve der kun viser. Skriver nogen en hex her, er det den fejl * hele mappen findes for. */ .farve-proeve { display: inline-grid; grid-template-rows: auto auto auto; gap: var(--rum-2); inline-size: 9rem; } .farve-proeve-flade { block-size: var(--rum-10); border-radius: var(--hjorne-3); border: 1px solid var(--kant); box-shadow: var(--saenket); /* Farven sættes som `--proeve` på elementet af den der bruger klassen. */ background: var(--proeve); } .farve-proeve-navn { font-family: var(--font-mono); font-size: var(--fs-body-s); color: var(--tekst); } .farve-proeve-vaerdi { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--tekst-3); text-transform: uppercase; } /* Kontrasten mod grunden, når komponenten regner den. Under 4,5 markeres ikke med rød — tallet står der, og det er nok. */ .farve-proeve-kontrast { font-family: var(--font-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--tekst-3); } .farve-raekke { display: flex; flex-wrap: wrap; gap: var(--rum-5); } /* §02: farveprøven, til kataloget */ /* ─── kits/ui/02-materiale/sejr-skrift.css ─── */ /* SEJR UI — skriften som klasser. * * §03 ejer snittene og skalaen: `--font-sans`, `--font-breit`, `--font-mono`, * `--fs-*`, `--lh-*`, `--spor-*`. Denne fil skriver INGEN skriftgrad — * hver klasse peger på et token — og findes fordi apperne ellers sætter * `text-2xl font-medium tracking-tight` i hånden på hver overskrift, og * så drev de fra hinanden. Målt i dashboardet 5. september 2026: fire * forskellige overskriftsstørrelser til det samme niveau. * * Hierarkiet er størrelse OG snit: display og payoff står i Breit, titler * i Sans, etiketter i Mono-versaler, tal i Mono. Man skal kunne læse * niveauet uden at måle det. */ /* ---- de store ------------------------------------------------------------ */ .display { font-family: var(--font-breit); font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: var(--spor-display); line-height: 1.02; color: var(--tekst); } .overskrift-1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: var(--fw-medium); letter-spacing: var(--spor-titel); line-height: 1.08; color: var(--tekst); } .overskrift-2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: var(--fw-medium); letter-spacing: var(--spor-titel); line-height: 1.12; color: var(--tekst); } .overskrift-3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-medium); letter-spacing: var(--spor-titel); line-height: 1.2; color: var(--tekst); } .titel { font-family: var(--font-sans); font-size: var(--fs-title); font-weight: var(--fw-medium); letter-spacing: var(--spor-titel); line-height: 1.3; color: var(--tekst); } /* Payoff'en. §06: «Fra salg til saldo». Breit, som display, men ikke størrelsen — den er en sætning, ikke et tal. */ .payoff { font-family: var(--font-breit); font-size: var(--fs-lead); font-weight: var(--fw-display); letter-spacing: var(--spor-titel); color: var(--tekst); } /* ---- løbende tekst ------------------------------------------------------- */ .lead { font-size: var(--fs-lead); line-height: var(--lh-body, 1.5); color: var(--tekst-2); max-inline-size: var(--maal-brod); } .brod { font-size: var(--fs-body); line-height: var(--lh-body, 1.5); color: var(--tekst); max-inline-size: var(--maal-brod); } .meta { font-size: var(--fs-meta); line-height: 1.4; color: var(--tekst-3); } /* Etiketten — ét sprog overalt (V4): mono-versaler med spor. Samme som feltets etiket, tabellens hoved og nøgletallets etiket. */ .etiket { font-family: var(--font-mono); font-size: var(--fs-body-s); font-weight: var(--fw-body); letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-2); } /* Tallet. §03: et pengetal står i mono og er aldrig mindre end brødtekst. Tabulære cifre og gennemstreget nul, så kolonner står og 0 ikke er O. */ .tal { font-family: var(--num-font); font-feature-settings: var(--num-features); font-variant-numeric: tabular-nums slashed-zero; } /* ---- prosa --------------------------------------------------------------- */ /* Et stykke løbende tekst med sine egne afsnit, lister og links: hjælpe- sider, vilkår, en artikel. Målet er brødtekstens (65 ch); linjerne bliver ellers for lange på en bred skærm. Links er understreget — en farve alene er ikke et signal (§02), og i prosa er der ingen anden bærer. */ .prosa { font-size: var(--fs-body); line-height: var(--lh-body, 1.55); color: var(--tekst); max-inline-size: var(--maal-brod); } .prosa > * + * { margin-block-start: var(--rum-5); } .prosa h2 { font-size: var(--fs-h3); font-weight: var(--fw-medium); letter-spacing: var(--spor-titel); line-height: 1.2; margin-block-start: var(--rum-9); } .prosa h3 { font-size: var(--fs-title); font-weight: var(--fw-medium); line-height: 1.3; margin-block-start: var(--rum-8); } .prosa p { margin-block-start: var(--rum-5); } .prosa ul, .prosa ol { padding-inline-start: 1.4em; } .prosa li + li { margin-block-start: var(--rum-2); } .prosa a { color: inherit; text-decoration: underline; text-decoration-color: var(--dekor); text-underline-offset: .15em; transition: text-decoration-color var(--overgang-tilstand); } .prosa a:hover { text-decoration-color: currentColor; } .prosa strong { font-weight: var(--fw-medium); } .prosa code { font-family: var(--font-mono); font-size: .92em; padding: .05em .35em; border-radius: var(--hjorne-1); background: var(--flade-3); } .prosa blockquote { margin-inline: 0; padding-inline-start: var(--rum-5); border-inline-start: 2px solid var(--kant-staerk); color: var(--tekst-2); } .prosa hr { border: 0; border-top: 1px solid var(--kant); margin-block: var(--rum-8); } /* Prosaens tal er også tal. */ .prosa table { font-variant-numeric: tabular-nums; } /* ---- hjælpere ------------------------------------------------------------ */ .trunker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .linjer-2, .linjer-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .linjer-2 { -webkit-line-clamp: 2; } .linjer-3 { -webkit-line-clamp: 3; } /* §03: skriften som klasser */ /* ─── kits/ui/02-materiale/sejr-ikon.css ─── */ /* SEJR UI — ikonerne i en grænseflade. * * §04: 126 ikoner, tegnet i to optiske størrelser (16 og 24) og leveret * som to sprites. Kittet tegner ingen ikoner. Det giver dem en plads: * størrelsen følger skriften de står i (1em), farven følger teksten * (currentColor), og de sidder på skriftlinjen som et bogstav. * * Spriten lægges ind ÉN gang pr. side med `.ikon-sprite` (React: ), * og hvert ikon er et . Ingen inline-kopier af stierne: * et ikon der er kopieret ind i en komponent, er et ikon der ikke følger * med når huset tegner det om. */ .ikon { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -.125em; flex: none; color: inherit; fill: currentColor; overflow: visible; } /* De to optiske størrelser. `.ikon` uden nogen af dem følger skriften. */ .ikon-16 { font-size: 16px; } .ikon-24 { font-size: 24px; } /* Ikonet i en kontrol: knappens og feltets ikon står i `--kontrol-gap` afstand fra teksten, og et ikon alene i en kvadratisk knap er 1.25em. */ .knap > .ikon, .felt-input-omslag > .ikon, .menu-punkt > .ikon, .nav-punkt > .ikon { flex: none; } .knap-ikon > .ikon { font-size: 1.25em; } /* Ikonet der bærer betydning alene — uden tekst ved siden af — skal have et navn (role="img" + aria-label). Uden er det pynt og aria-hidden. Det afgøres i markup, ikke her. */ /* Spriten selv: til stede i dokumentet, aldrig i layoutet. */ .ikon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; } /* Et ikon der markerer en tilstand — i en badge, en notits, en liste — får tilstandens farve fra det det står i, aldrig sin egen. Rækkefølgen er stadig ord, farve, skravering (§02); ikonet er en fjerde bærer og erstatter ingen af de tre. */ .ikon-ind { color: var(--fn-success); } .ikon-advarsel{ color: var(--fn-warning); } .ikon-fejl { color: var(--fn-danger); } .ikon-info { color: var(--fn-info); } /* §04: ikonernes plads */ /* ─── kits/ui/02-materiale/sejr-billede.css ─── */ /* SEJR UI — billedet. * * §08 i kittets sprog. Fundamentets `sejr-foto.css` er kilden til reglerne; * her står de igen med kittets tokens, så en app ikke skal importere to * lag for at vise et fotografi. De tre der binder: * * 1. Sorte partier løftes mod blæk, ikke klemmes til sort. På nat ligger * et blæklag i `lighten` over billedet — et GULV, ikke en tone. Alt * under blæk løftes til blæk, alt over står uberørt. (Reglen stod i * prosa i syv dage uden at være i koden; se §08.) * 2. Aldrig crimson på et fotografi. Ikke som ramme, ikke som tekst. * `byg-visuel.py` afviser en crimson-værdi i behandlingsfilen. * 3. Aldrig tal eller data på et fotografi. Et beløb kræver en flade. * * Behandlingen følger grunden af sig selv, på `[data-ground="nat"]` — ingen * modifierklasse nogen skal huske. */ .billede { position: relative; display: block; overflow: hidden; margin: 0; border-radius: var(--hjorne-4); background: var(--flade-3); isolation: isolate; } .billede > img, .billede > video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; /* Dæmpet, aldrig overmættet. Et kameras standard er den modsatte vej. */ filter: saturate(.96) contrast(1.01); } /* Formatet. Billedet fylder rammen; rammen bestemmer formen. */ .billede-3-2 { aspect-ratio: 3 / 2; } .billede-4-3 { aspect-ratio: 4 / 3; } .billede-16-9 { aspect-ratio: 16 / 9; } .billede-1-1 { aspect-ratio: 1 / 1; } .billede-rund { aspect-ratio: 1 / 1; border-radius: var(--hjorne-fuld); } /* Nat: gulvet og det svage fald mod bunden, så en undertekst kan stå. */ [data-ground="nat"] .billede > img, .nat .billede > img { filter: brightness(.86) contrast(1.05) saturate(.9); } [data-ground="nat"] .billede::before, .nat .billede::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--ink); mix-blend-mode: lighten; } [data-ground="nat"] .billede::after, .nat .billede::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 34%, transparent) 0%, color-mix(in srgb, var(--ink) 10%, transparent) 55%); } /* Tekst OVER billedet — en overskrift, aldrig et tal. Billedet dæmpes mere, og teksten står i papir. To regler (dag og nat) med samme vægt som nat-reglen, ellers taber varianten til den på mørk grund — målt 24. august 2026 i fundamentet. */ .billede-tekst > img, [data-ground="nat"] .billede-tekst > img, .nat .billede-tekst > img { filter: brightness(.72) contrast(1.04) saturate(.86); } .billede-tekst > .billede-over { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; padding: var(--rum-6); color: var(--paper); font-size: var(--fs-title); font-weight: var(--fw-medium); letter-spacing: var(--spor-titel); line-height: 1.25; text-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 40%, transparent); } /* Underteksten. Under billedet, ikke på det. Meta-størrelse, dæmpet. */ .billede-figur { margin: 0; } .billede-figur > .billede-under { margin-block-start: var(--rum-3); font-size: var(--fs-body-s); line-height: 1.4; color: var(--tekst-3); } /* Pladsholderen mens billedet henter: fladen, ikke et ikon. Samme rolige grå som vente-skelettet. */ .billede-venter > img { opacity: 0; } .billede-venter { background: var(--flade-3); } /* §08: billedet med behandlingen */ /* ─── kits/ui/02-materiale/sejr-genstand.css ─── */ /* SEJR UI — genstanden i tre dimensioner. * * §10: husets ting, gengivet i tre dimensioner. Ikke en 3D-stil — de * genstande SEJR faktisk har. I kittet er det kortet: `.betalingskort` med * en for- og bagside, lagt i et rum med perspektiv, så det kan vippes og * vendes. Kortet i `fundament/10-objekt/kortet.html` er den fulde motor * (partikelsky, lys); dette er den udgave en app kan bære uden WebGL. * * Bevægelsen er §07's: vippet på `--tid-4` med ease-ud, ingen fjedre, * intet overshoot. Penge må ikke hoppe — heller ikke et kort. Reduceret * bevægelse: kortet står stille, og vendes uden overgang. */ .genstand { display: inline-block; perspective: 1200px; perspective-origin: 50% 40%; } .genstand-krop { position: relative; transform-style: preserve-3d; transition: transform var(--tid-4) var(--ease-ud); will-change: transform; } /* Vippet: musen over rummet vipper genstanden lidt. Det er nok til at den læses som en TING og ikke som et billede af en. */ .genstand-vip:hover > .genstand-krop { transform: rotateY(-14deg) rotateX(6deg); } .genstand-forside, .genstand-bagside { backface-visibility: hidden; border-radius: inherit; } .genstand-bagside { position: absolute; inset: 0; transform: rotateY(180deg); } /* Vendt: bagsiden frem. */ .genstand.er-vendt > .genstand-krop { transform: rotateY(180deg); } .genstand.er-vendt.genstand-vip:hover > .genstand-krop { transform: rotateY(194deg) rotateX(6deg); } /* Skyggen ligger på gulvet, ikke på kortet: den bliver mørkere og kortere når kortet vipper mod én. */ .genstand-krop::after { content: ""; position: absolute; inset: 8% 4% -6% 4%; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--ink) 28%, transparent); filter: blur(18px); transform: translateZ(-40px); transition: opacity var(--tid-4) var(--ease-ud); opacity: .7; } .genstand-vip:hover > .genstand-krop::after { opacity: .9; } /* Kan genstanden vendes, er den en knap. Fokus som alt andet i huset. */ .genstand-knap { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: inherit; } .genstand-knap:focus-visible { outline: 2px solid var(--fokus-ring); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .genstand-krop { transition: none; } .genstand-vip:hover > .genstand-krop { transform: none; } .genstand.er-vendt.genstand-vip:hover > .genstand-krop { transform: rotateY(180deg); } } /* §10: genstanden i tre dimensioner */ /* ─── kits/ui/02-materiale/sejr-lyd.css ─── */ /* SEJR UI — lyden i en grænseflade. * * §11: fire klange, hver på et af husets tempi, adskilt på ANTAL SLAG og * ikke på tonehøjde — det overlever høretab, en larmende butik og en * telefonhøjttaler. Kittet afspiller dem gennem `react/src/lyd.ts`, og * denne fil giver de to ting der kan ses: kontakten der slår lyden til og * fra, og klangen tegnet som det den er — slag på en tidslinje. * * Kontakten er en knap med `aria-pressed`, ikke en checkbox: lyden slår * til med det samme (se felt-kittets skel mellem kontakt og afkrydsning). */ .lydknap { display: inline-flex; align-items: center; gap: var(--rum-2); } .lydknap[aria-pressed="false"] { color: var(--tekst-3); } .lydknap[aria-pressed="false"] .ikon { opacity: .6; } /* Klangen, tegnet. Hvert slag er en flade hvis bredde er slagets varighed: `--klang-ms` sættes af komponenten, læst ud af husets tempi — ikke skrevet af. 1 ms = 0,5 px, så --tid-4 (320 ms) er 160 px. To slag med --tid-1 imellem er `afvist`, og man kan se forskellen uden at høre den. */ .klang { display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--rum-4); min-inline-size: 18rem; padding: var(--rum-3) var(--rum-4); border-radius: var(--hjorne-4); background: var(--flade-2); border: 1px solid var(--kant); } .klang-navn { font-family: var(--font-mono); font-size: var(--fs-body-s); letter-spacing: var(--spor-etiket); text-transform: uppercase; color: var(--tekst-2); min-inline-size: 9ch; } .klang-linje { display: flex; align-items: center; block-size: var(--rum-6); gap: 0; } .klang-slag { block-size: 100%; inline-size: calc(var(--klang-ms, 180) * .5px); border-radius: var(--hjorne-1); background: var(--tekst); /* Anslaget: kanten er skarp, halen dør ud. Samme figur som lyden. */ mask-image: linear-gradient(90deg, var(--ink) 0 12%, transparent 100%); } /* To slag: det andet begynder hvor det foerste slutter (afvist: 120 + 120 = 240 ms = --tid-3). Mellemrummet er kun til at kunne taelle dem. */ .klang-slag + .klang-slag { margin-inline-start: max(var(--rum-1), calc(var(--klang-pause, 0) * .5px)); } /* Saldoens klang ligger en oktav nede — tegnet en anelse lavere. */ .klang-dyb .klang-slag { transform: translateY(15%); opacity: .85; } .klang-meta { font-family: var(--font-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--tekst-3); white-space: nowrap; } /* Mens den spiller: slaget lyser op på --tid-1 og falder på klangens egen varighed. Farven er ikke et signal; det er ordet i navnet. */ .klang.spiller .klang-slag { animation: klang-anslag var(--tid-1) var(--ease-ud); } @keyframes klang-anslag { from { background: var(--tekst-3); } to { background: var(--tekst); } } /* §11: lydknappen og klangen */ /* ─── kits/ui/03-komponenter/sejr-knap.css ─── */ /* SEJR UI — knapper. * * Ingen tal i denne fil er skrevet frit. Højde kommer fra --kontrol-h, * polstring fra --kontrol-px, hjørner fra --hjorne-*. Skift tætheden, og * knappen følger med uden at der rettes en linje her. * * DEN REGEL DER STYRER HVILKEN VARIANT DER BRUGES: * Crimson er handlingen — ÉT sted pr. skærm. Derfor findes .knap-primaer i * ental på en skærm. Er der to primære knapper, er der ingen primær knap; * så er der bare to røde ting, og brugeren skal selv gætte hvad der haster. * Alt andet er .knap-sekundaer eller .knap-stille. */ /* Knappen der arbejder. Låst, buen drejer, teksten står. Knappen skifter ikke bredde: buen tager pladsen fra polstringen, ikke fra ordet. Set hos Primer og Polaris, 5. september 2026 — de gør det samme. */ .knap[data-arbejder] { cursor: progress; opacity: .8; } .knap[data-arbejder]:disabled { opacity: .8; } .knap-bue { font-size: 1em; margin-inline-start: calc(-1 * var(--rum-1)); } .knap { /* form */ display: inline-flex; align-items: center; justify-content: center; gap: var(--kontrol-gap); min-height: var(--kontrol-h); padding: 0 var(--kontrol-px); border-radius: var(--hjorne-3); border: 1px solid transparent; /* skrift — 500 fordi en knap er en etiket, ikke brødtekst */ font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; position: relative; transition: background-color var(--overgang-tilstand), border-color var(--overgang-tilstand), color var(--overgang-tilstand), box-shadow var(--overgang-tilstand), transform var(--overgang-tilstand); } /* Fokus: ringen er husets, to px uden for kanten, aldrig inde i fladen. */ .knap:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--flade), 0 0 0 4px var(--fokus-ring); } /* Trykket: knappen går ét skridt ned. Hover løfter den ét skridt op. Det er hele bevægelsen — ingen fjeder, intet overshoot. */ .knap:active { transform: translateY(0); } /* Primær — handlingen. Crimson bærer papirtekst på begge grunde, fordi fladen er den samme uanset grund: det er en crimson knap, ikke en lys eller mørk knap. */ /* Lysfaldet ligger PÅ fladen, ikke i stedet for den: background-color bærer kuløren, background-image bærer lyset. Skrives `background:` som shorthand, nulstiller den image-laget, og knappen bliver flad igen. Se sejr-lys.css — på dag er --lysfald `none`, så linjen er gratis dér. */ /* DYBDEN, 6. september 2026 (Morris: «make them more premium — give it more depth»). Knappen er en ting med en overside og en underside, som kortet og sedlen: en lyskant øverst (papir i lav alpha), en mørk underkant (blæk i lav alpha), og en skygge der er handlingens egen farve — ikke grå. Alt er color-mix af husets tokens; ingen ny farve. */ .knap-primaer { background-color: var(--handling); background-image: linear-gradient(180deg, color-mix(in srgb, var(--paper) 18%, transparent) 0%, color-mix(in srgb, var(--paper) 4%, transparent) 45%, color-mix(in srgb, var(--ink) 12%, transparent) 100%); color: var(--paa-handling); border-color: color-mix(in srgb, var(--ink) 22%, var(--handling)); text-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 26%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ink) 22%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 22%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--handling) 60%, transparent); } .knap-primaer:hover { background-color: var(--handling-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 30%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ink) 22%, transparent), 0 2px 4px color-mix(in srgb, var(--ink) 22%, transparent), 0 10px 20px -8px color-mix(in srgb, var(--handling) 70%, transparent); } .knap-primaer:active { background-color: var(--handling-tryk); background-image: none; transform: translateY(0); box-shadow: inset 0 2px 4px color-mix(in srgb, var(--ink) 35%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 15%, transparent); } /* Sekundær — den almindelige. Kant og tekst i grundens egen blæk. */ /* Sekundær: papir med en løftet flade. Lyskanten øverst er papir, den nedre skygge er blæk — samme materiale som kortet i V4. På dag er den ikke længere gennemsigtig: en knap uden flade har ingen dybde. */ .knap-sekundaer { background-color: var(--flade-2); background-image: linear-gradient(180deg, color-mix(in srgb, var(--paper) 60%, transparent) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 60%); color: var(--tekst); border-color: var(--kant-staerk); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 80%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent); } /* På nat får den en flade at fange lyset på. På dag ville en grå flade gøre den sekundære knap tungere end den primære, så dér bliver den transparent. --hover er identitetens eget lave alpha, ikke et nyt tal. */ [data-ground="nat"] .knap-sekundaer, .nat .knap-sekundaer { background-color: var(--hover); background-image: linear-gradient(180deg, color-mix(in srgb, var(--paper) 9%, transparent) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 60%); border-color: var(--kant-lyst); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 50%, transparent); } .knap-sekundaer:hover { background-color: var(--flade-hover); border-color: var(--tekst-3); transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 80%, transparent), 0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent), 0 6px 12px -6px color-mix(in srgb, var(--ink) 18%, transparent); } .knap-sekundaer:active { background-color: var(--flade-3); background-image: none; transform: translateY(0); box-shadow: var(--saenket); } /* Stille — til det tredje valg, og til værktøjslinjer hvor en kant ville larme. Ingen ramme før den røres. */ .knap-stille { background: transparent; color: var(--tekst-2); } .knap-stille:hover { background: var(--flade-hover); color: var(--tekst); } .knap-stille:active { background: var(--flade-3); box-shadow: var(--saenket); } /* Farlig — kun til noget der sletter eller ikke kan fortrydes. Ikke "annullér"; annullér er .knap-stille. */ .knap-farlig { background: transparent; color: var(--fn-danger); border-color: currentColor; } .knap-farlig:hover { background: var(--fn-danger-flade); transform: translateY(-1px); box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--fn-danger) 35%, transparent); } .knap-farlig:active { transform: translateY(0); box-shadow: var(--saenket); } /* På glas: knappen skal kunne ses uden at slå hul i materialet. */ .glas .knap-sekundaer { border-color: var(--glas-kant); } .knap:disabled, .knap[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; } /* Fuld bredde — på telefon og i POS er det normalen, ikke undtagelsen. */ .knap-bred { width: 100%; } /* Ikonknap: kvadratisk, og den SKAL have et tilgængeligt navn i markup (aria-label), ellers er den usynlig for skærmlæsere. */ .knap-ikon { padding: 0; width: var(--kontrol-h); min-width: var(--kontrol-h); } /* ─── kits/ui/03-komponenter/sejr-felt.css ─── */ /* SEJR UI — felter. * * Et felt er fire ting der hører sammen: etiket, kontrol, hjælpetekst og fejl. * De ligger i én .felt-blok, så afstanden mellem dem er systemets, ikke den * enkelte skærms. * * TILGÆNGELIGHED ER IKKE VALGFRI HER: * ·