:root{--bg:#f6f4ef;--fg:#1f2430;--card:#fff;--line:#c9c5bb;--acc:#2f6fed;--mut:#6b7080;--ok:#1d8a4b;--fill:#1f2430;--sel:#ffe9a8;--dup:#c9f58f;--one:#7a52d6;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#15171c;--fg:#ecebe6;--card:#20232b;--line:#3a3e4a;--acc:#6f9bff;--mut:#9a9eab;--ok:#4cc380;--fill:#ecebe6;--sel:#5a4a14;--dup:#3d6b1c;--one:#a98bff;color-scheme:dark}}
:root[data-theme=dark]{--bg:#15171c;--fg:#ecebe6;--card:#20232b;--line:#3a3e4a;--acc:#6f9bff;--mut:#9a9eab;--ok:#4cc380;--fill:#ecebe6;--sel:#5a4a14;--dup:#3d6b1c;--one:#a98bff;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0}html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
html[data-ui-pending],html[data-auth-pending]{overflow:hidden}
#bootveil{display:none;position:fixed;inset:0;z-index:2147483646;place-items:center;background:var(--bg);color:var(--fg);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
html[data-ui-pending] #bootveil,html[data-auth-pending] #bootveil{display:grid}
#bootveil .bootinner{display:flex;align-items:center;gap:5px}
#bootveil .bootinner i{width:6px;height:6px;border-radius:50%;background:var(--mut);opacity:.28;animation:bootPulse 1s ease-in-out infinite}
#bootveil .bootinner i:nth-child(2){animation-delay:.13s}
#bootveil .bootinner i:nth-child(3){animation-delay:.26s}
@keyframes bootPulse{50%{opacity:.72;transform:translateY(-2px)}}
header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 16px}
h1{font-size:20px;margin:0;flex:1}
label.mut{display:flex;gap:6px;align-items:center}
input{font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);width:120px}
button{font:inherit;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);cursor:pointer}
#hint{display:none;max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:10px}
.c.ht{outline:3px solid #e8590c;outline-offset:-3px;position:relative;z-index:1}
.c.gx{color:rgba(232,89,12,.6)!important}
.c.hr{box-shadow:inset 0 0 0 3px rgba(47,111,237,.6)}
button:disabled{opacity:.4;cursor:default}
button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
nav{display:flex;gap:8px;padding:0 16px 8px;flex-wrap:wrap}
main{display:flex;gap:20px;padding:8px 16px 24px;flex-wrap:wrap;align-items:flex-start}
#left{flex:1 1 560px;min-width:0}
#side{flex:1 1 240px;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
#bar{display:flex;gap:12px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
#time{font-variant-numeric:tabular-nums;font-size:22px;font-weight:600}
#msg{color:var(--ok);font-weight:600}
#grid{display:grid;width:max-content;max-width:100%}
.c{width:var(--cs);height:var(--cs);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);font-size:calc(var(--cs)*.5);font-weight:600;cursor:pointer}
#psum{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#psum b{font-size:calc(var(--cs)*.5)}#psum.on{background:var(--pc)!important;color:#fff}#psum.on b{color:#fff}
.pt.live b,.prb.live{color:#c2410c!important;opacity:1!important}.pt.live.lok b,.prb.live.lok{color:#1d8a4b!important}.pt.live.mk::after{opacity:.25}
#mpal,#mpal .pb,#macc button,.mc{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
nav button .tfeat{font-style:normal;font-size:.8em;margin-left:3px}nav button .tfeat[hidden]{display:none}
#board h2.feat{color:var(--pc,#c97a00)}
.pw.busy{background:transparent!important;color:var(--mut)!important;border:1.5px dashed currentColor;box-sizing:border-box;opacity:.85}.pw.busy.now{opacity:1;animation:busyp 1.6s ease-in-out infinite}@keyframes busyp{50%{opacity:.45}}
#board .row.busy{color:var(--mut);font-style:italic}
#potb.on{background:#7455b8;color:#fff;border-color:#7455b8}
.c{position:relative}.c .nt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.52;transform:scale(.42)}.c .nt svg{width:100%;height:100%}
/* Potlood blijft bewust kleiner en zachter dan een definitieve zet. */
body[data-t=bin] .c .nt{inset:auto;left:6%;top:5%;width:64%;height:64%;transform:none;opacity:.56}
body[data-t=bin] .c .nt svg path{stroke-width:1.35}
body[data-t=bin] .c .nt svg circle{stroke-width:1.45}
body[data-t=star] .c .nt{transform:none;opacity:.48;font-size:calc(var(--cs)*.34);font-weight:500;line-height:1;color:var(--mut)}
body[data-t=star] .c .nt.nx::before{content:"×";font-size:calc(var(--cs)*.38);line-height:1;color:var(--mut);font-weight:400}
body[data-t=star] .c .nt.ns::before{content:"☆";font-size:calc(var(--cs)*.36);line-height:1;color:var(--pc);font-weight:500}
body[data-t=star] .c.sv{color:#c97a00!important}
.c .nt.dot{transform:none}.c .nt.dot::before{content:"";width:calc(var(--cs)*.2);height:calc(var(--cs)*.2);border-radius:50%;background:var(--mut);opacity:.75}
.mc .mnt{position:absolute;left:3px;right:3px;bottom:2px;z-index:7;display:flex;flex-wrap:wrap;gap:0 3px;justify-content:center;padding:1px 3px;border-radius:5px;background:color-mix(in srgb,var(--card) 86%,transparent);font-size:calc(var(--ms)*.2);line-height:1.05;pointer-events:none;font-weight:700;opacity:.88}
.mc .mnt.nxo{top:0;bottom:0;align-items:center;font-size:calc(var(--ms)*.42);font-weight:500}.mc .mnt .mnx{color:var(--mut);font-style:normal;opacity:.5}
body.potlood #grid,body.potlood #mgrid{outline:2px dashed #6b6f78;outline-offset:6px}
body.phone #pbot #potb,body.phone #pbot #notewipe{flex:0 0 46px;font-size:18px;padding:11px 0}
.c.sbad{color:#e5484d!important;box-shadow:inset 0 0 0 3px rgba(229,72,77,.75)}
.c.g{background:color-mix(in srgb,var(--line) 45%,var(--card));cursor:default}
#grid .c{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.corner{position:relative;min-width:calc(var(--cs)*1.1);height:var(--cs);background:linear-gradient(to bottom right,transparent 48%,var(--mut) 49%,var(--mut) 51%,transparent 52%)}
.corner b,.corner i{position:absolute;font-style:normal;font-weight:800;font-size:calc(var(--cs)*.36);line-height:1}
.corner b{top:4px;left:7px;color:var(--fg)}.corner i{bottom:4px;right:7px;color:var(--fg)}
.c svg{width:74%;height:74%;pointer-events:none}
.c.f{background:var(--fill)}
.c.sel{background:var(--sel)}
.c.pick{background:color-mix(in srgb,var(--acc) 16%,var(--card))}
.c.g.pick{background:color-mix(in srgb,var(--acc) 16%,color-mix(in srgb,var(--line) 45%,var(--card)))}
.c.dup{background:var(--dup)}
.c.dg0{background:#c9f58f}.c.dg1{background:#9fd8ff}.c.dg2{background:#ffd08a}.c.dg3{background:#f7b6d8}.c.dg4{background:#d9c2ff}.c.dg5{background:#fff3a3}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .c.dg0{background:#3d6b1c}:root:not([data-theme=light]) .c.dg1{background:#1d5a8a}:root:not([data-theme=light]) .c.dg2{background:#8a5a14}:root:not([data-theme=light]) .c.dg3{background:#8a2f5f}:root:not([data-theme=light]) .c.dg4{background:#5a3f9a}:root:not([data-theme=light]) .c.dg5{background:#7a6d12}}
:root[data-theme=dark] .c.dg0{background:#3d6b1c}:root[data-theme=dark] .c.dg1{background:#1d5a8a}:root[data-theme=dark] .c.dg2{background:#8a5a14}:root[data-theme=dark] .c.dg3{background:#8a2f5f}:root[data-theme=dark] .c.dg4{background:#5a3f9a}:root[data-theme=dark] .c.dg5{background:#7a6d12}
.c.g.dup{background:color-mix(in srgb,var(--dup) 65%,color-mix(in srgb,var(--line) 45%,var(--card)))}
.c.kb{background:linear-gradient(to top right,transparent 48%,var(--mut) 49%,var(--mut) 51%,transparent 52%),var(--line);position:relative;cursor:default}
.kh,.kv{position:absolute;font-size:calc(var(--cs)*.3);font-weight:600;line-height:1}
.kh{top:3px;right:4px}.kv{bottom:3px;left:4px}
.k{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;font-size:calc(var(--cs)*.36);color:var(--mut);white-space:pre;text-align:center;line-height:1.1;padding:2px 4px}
.k{color:color-mix(in srgb,var(--fg) 80%,transparent);font-weight:600}
.k.r{justify-content:flex-end;align-items:center}
#pad{display:none;gap:6px;margin-top:10px;flex-wrap:wrap}
#pad button{min-width:44px;font-size:20px;padding:10px 0;flex:0 0 44px}
#m24{display:none}
#hexsvg{position:relative;background:#ececec;border-radius:20px;box-shadow:0 8px 24px var(--sh);overflow:hidden;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#hexw{display:none;gap:12px;align-items:flex-start}#hexbtns{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}#hexbtns button{font-size:18px;padding:14px 16px}
#tl,#ops{display:flex;gap:12px;margin:14px 0;flex-wrap:wrap}
#tl button{font-size:34px;min-width:96px;padding:22px 10px;font-weight:600}
#ops button{font-size:30px;min-width:70px;padding:12px 10px}
#grid{touch-action:manipulation}
.cnt{cursor:pointer;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(var(--cs)*.36);line-height:1.1;font-weight:700;padding:0 6px;min-width:calc(var(--cs)*.9)}
.cnt span{color:var(--fg)}.cnt .one{color:var(--one)}
.cnt span.full{color:#b3b3b3}.cnt span.over{color:#d33}
h2{font-size:15px;margin:10px 0 4px}
.row{display:flex;justify-content:space-between;font-size:15px;padding:2px 0}
.mut{color:var(--mut);font-size:14px}

.st{transition:background .2s;background:#2f9fe8;color:#fff;padding:8px 16px 6px;text-align:right;min-width:140px;line-height:1.1}
.st span{display:block;font-size:12px;font-weight:800;letter-spacing:.02em}
.st b{font-size:34px;font-weight:800;line-height:1.05}.st small{display:block;font-size:12px;opacity:.85}
#hexstat{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
#hexstat.hl .st:first-child{outline:3px solid #ff2d6f;outline-offset:2px;animation:pulseO 1.2s ease-in-out infinite}@keyframes pulseO{50%{outline-color:rgba(255,45,111,.35)}}
#hexsvg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#hexsvg svg *{pointer-events:none!important}
#hexsvg svg .hit{pointer-events:all!important}
.shards{position:absolute;left:0;top:0;pointer-events:none}
.shards polygon{transform-box:fill-box;transform-origin:center;animation:shard .65s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes shard{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
#hexsvg{transition:box-shadow .2s,background .2s}
#hexsvg.mb{background:#e3f1fc;box-shadow:0 0 0 7px #2f9fe8}
#hexsvg.mz{background:#dddde1;box-shadow:0 0 0 7px #35363b}
#mb.on{background:#2f9fe8;border-color:#2f9fe8;box-shadow:0 3px 0 #1b6fa8;color:#fff}
#mz.on{background:#35363b;border-color:#35363b;box-shadow:0 3px 0 #111;color:#fff}
#hexbtns button{min-width:0}
#rail #hexbtns{gap:8px}#rail #hexbtns button{font-size:16px;padding:13px 6px;white-space:nowrap}#rail .st{min-width:0;padding:7px 10px 5px;border-radius:12px}#rail .st b{font-size:28px}#rail #hexstat{margin-bottom:2px}
@media(max-width:760px),(max-aspect-ratio:1/1){#rail #hexbtns{flex-direction:row;flex-wrap:wrap}#rail #hexstat{flex-direction:row}}
/* ===== Uiterlijk ===== */
:root{--pc:#2f6fed;--sh:rgba(30,40,80,.10)}
body[data-t=bin]{--pc:#7a52d6}body[data-t=star]{--pc:#c97a00}body[data-t=nono]{--pc:#0f9d8c}
body[data-t=plus]{--pc:#2b7bd6}body[data-t=kak]{--pc:#e0486b}body[data-t=hex]{--pc:#e8590c}body[data-t=m24]{--pc:#2f9e44}body[data-t=mur]{--pc:#b5483a}
nav button[data-t=bin]{--tc:#7a52d6}nav button[data-t=star]{--tc:#e9a100}nav button[data-t=nono]{--tc:#12b5a2}
nav button[data-t=plus]{--tc:#3b8fe8}nav button[data-t=kak]{--tc:#ee5d7a}nav button[data-t=hex]{--tc:#f2762e}nav button[data-t=m24]{--tc:#3cb958}nav button[data-t=mur]{--tc:#c4513f}
body{font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
 background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--pc) 16%,transparent) 1.6px,transparent 0) 0 0/24px 24px,var(--bg)}
h1{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800;letter-spacing:-.02em}
.logo{display:grid;grid-template-columns:12px 12px;gap:3px;transform:rotate(-8deg)}
.logo i{width:12px;height:12px;border-radius:4px;display:block}
.logo i:nth-child(1){background:#7a52d6}.logo i:nth-child(2){background:#f2a000}.logo i:nth-child(3){background:#12b5a2}.logo i:nth-child(4){background:#ee5d7a}
button{border-radius:12px;font-weight:600;box-shadow:0 3px 0 var(--line);transition:transform .08s,box-shadow .08s,background .2s}
button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
button:disabled{box-shadow:none}
button.on{background:var(--pc);border-color:var(--pc);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--pc) 55%,#000)}
button.on:active{box-shadow:0 1px 0 color-mix(in srgb,var(--pc) 55%,#000)}
nav{gap:10px;padding-bottom:12px}
nav button{border-radius:999px;padding:9px 18px 9px 14px;display:flex;align-items:center;gap:8px}
nav button::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--tc)}
nav button.on::before{background:#fff}
#time{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 16px;font-weight:800;box-shadow:0 3px 0 var(--line)}
#msg{font-weight:700}
#side{border-radius:20px;border-top:6px solid var(--pc);box-shadow:0 10px 28px var(--sh)}
#side strong{font-weight:800}
#grid{border-radius:14px;overflow:hidden;box-shadow:0 8px 24px var(--sh);background:var(--card)}
body[data-t=star] #grid{position:relative}
body[data-t=star] #grid>.star-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.row{padding:6px 10px;border-radius:10px;margin:2px 0}
.row:first-child{background:color-mix(in srgb,var(--pc) 14%,transparent);font-weight:700}
input{border-radius:10px}input:focus{outline:2px solid var(--pc);border-color:var(--pc)}
button:focus-visible{outline:3px solid var(--pc);outline-offset:2px}
@keyframes pop{0%{transform:scale(.55)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.c.pop{animation:pop .24s ease-out;position:relative;z-index:2}
svg .pop{transform-box:fill-box;transform-origin:center;animation:pop .32s ease-out}
svg .shake{animation:shake .35s}
#hexw svg g{transition:opacity .2s}
.cf{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#hexbtns.mz .st,#hexstat.mz .st{background:#35363b}
#chk{padding:14px 10px;font-weight:700}
.c.bad{background:#e5484d!important;color:#fff}
.c.bad svg path{stroke:#fff}
#theme{padding:6px 14px;font-weight:700}
.mut.lv{font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:6px 0 0}
#streak{text-align:center;font-weight:700;font-size:14px;color:var(--mut)}
#streak b{color:var(--pc);font-size:18px}
#week{margin-top:14px;border-top:1px solid var(--line);padding-top:4px}
.mut.sm{font-size:12px;margin:0 10px 4px}
#mur{display:none;gap:22px;flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%}
#mmain{display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:100%}
#mgrid{display:grid;border-radius:6px;box-shadow:0 8px 24px var(--sh);touch-action:none}
.mc{position:relative;width:var(--ms);height:var(--ms);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mc .rl{position:absolute;top:2px;left:3px;z-index:3;white-space:nowrap;padding:0 3px;border-radius:4px;background:color-mix(in srgb,var(--card) 70%,transparent);font-size:max(8px,calc(var(--ms)*.14));font-weight:800;text-transform:uppercase;letter-spacing:.03em;opacity:.55;pointer-events:none}
.mc .ob{position:absolute;inset:7%;z-index:1;display:flex;align-items:center;justify-content:center;font-size:calc(var(--ms)*.46);pointer-events:none;transition:all .15s}.mc.blk{cursor:not-allowed}.mc.on .ob{inset:auto 3px 2px auto;z-index:2;font-size:calc(var(--ms)*.24)}
.mc .mx{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:calc(var(--ms)*.42);color:color-mix(in srgb,var(--fg) 38%,transparent);pointer-events:none;font-weight:300}.mc.xx .mx{display:flex}.mc.xm .mx{color:var(--fg);font-weight:700;font-size:calc(var(--ms)*.5)}.tok.xt{background:#6b6f78;font-size:15px}
#mgrid{outline:3px solid transparent;outline-offset:3px;transition:outline-color .12s}#mgrid.pmode{outline-color:color-mix(in srgb,var(--pc) 55%,transparent)}#mgrid.mxmode{outline-color:#6b6f78}.mc.xx .ob.seat{opacity:.55}
.tok.vt{background:#4a4a52;outline:2px dashed #c33;outline-offset:1px}
#mleg{font-size:13px;opacity:.8;text-align:center;line-height:1.4}
#mclues ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#mclues li{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:12px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
#mclues li .tok{width:28px;height:28px;min-width:28px;min-height:28px;font-size:14px;flex:none}#mclues li span{padding-top:3px}
.mc .it{position:absolute;right:3px;bottom:1px;font-size:calc(var(--ms)*.3);pointer-events:none}
.mc .vic{position:absolute;left:4px;bottom:1px;font-size:calc(var(--ms)*.34);pointer-events:none}
.mc .slot{position:relative;z-index:6;pointer-events:none;display:flex}
.tok{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--ms,44px)*.56);height:calc(var(--ms,44px)*.56);min-width:24px;min-height:24px;border-radius:50%;color:#fff;font-weight:800;font-size:calc(var(--ms,44px)*.34);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.mc.conf{outline:3px solid #e5484d;outline-offset:-3px;z-index:1}
.mc.ht{outline:4px solid #e8590c;outline-offset:-4px;z-index:2}#mclues li.hr{box-shadow:inset 0 0 0 2px rgba(47,111,237,.6);border-radius:6px}
.mc.bad{outline:4px solid #e5484d;outline-offset:-4px;z-index:2}
#mpal{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pb{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 5px;border-radius:999px;font-size:15px}
.pb .tok{width:30px;height:30px;min-width:0;min-height:0;font-size:15px}
.pb.on{border-color:var(--pc);box-shadow:0 0 0 3px var(--pc)}
.pb.placed{opacity:.55}
#mclues{max-width:340px;min-width:220px;flex:1 1 250px;overflow:auto;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 16px 14px}

#mclues li{cursor:pointer;line-height:1.35;touch-action:pan-y}#mclues li:focus-visible{outline:2px solid var(--pc);outline-offset:2px}
#mclues li.str{text-decoration:line-through;opacity:.4}
#macc{margin-top:10px}
.mq{margin-bottom:8px}
.mbtns{display:flex;flex-wrap:wrap;gap:8px}
.mbtns button{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;font-weight:700}
.mbtns .tok{width:30px;height:30px;min-width:0;min-height:0;font-size:15px}
.mkill{font-weight:600;color:var(--ok)}
/* ===== Indeling ===== */
#segrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
#next{border-radius:999px;padding:10px 18px;font-weight:700;background:var(--card);color:var(--pc);border:2px solid var(--pc)}
#next:active{background:var(--pc);color:#fff}
main{display:grid;grid-template-columns:140px minmax(0,1fr) 240px;gap:18px;padding:8px 16px 24px;align-items:start;max-width:1500px;margin:0 auto;flex-wrap:nowrap}
#rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:8px}
#time{text-align:center;font-size:32px;padding:10px 12px;border-radius:20px}
#tools{display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:18px}
#tools button{display:flex;align-items:center;gap:10px;box-shadow:none;background:transparent;border-color:transparent;padding:11px 8px;justify-content:flex-start}
#tools button b{font-size:21px;width:24px;text-align:center;display:inline-flex;justify-content:center}
svg.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;display:block}
#tools button:active:not(:disabled){background:var(--line);transform:none}
#reset b{color:#e5484d}
#hintb{padding:16px 10px;font-size:18px;font-weight:800;background:var(--pc);border-color:var(--pc);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--pc) 55%,#000)}
#hintb:active:not(:disabled){box-shadow:0 2px 0 color-mix(in srgb,var(--pc) 55%,#000)}
#stage{display:flex;flex-direction:column;align-items:center;min-width:0}
#playbox{display:flex;flex-direction:column;align-items:center;max-width:100%;transform-origin:center center}
#msg{min-height:28px;text-align:center;margin:6px 0}
#grid{margin:0 auto}
#pad{justify-content:center}
#hexw{justify-content:center}
#tl,#ops{justify-content:center}
#m24{text-align:center}
#side{max-width:none;flex:none;width:auto}
#side #hint{max-width:none}
#uit{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
#uit summary{cursor:pointer;font-weight:700;list-style:none}
#uit summary::before{content:"? ";color:var(--pc);font-weight:800}
#uit #help{margin-top:8px}
@media(max-width:760px),(max-aspect-ratio:1/1){
 main{grid-template-columns:minmax(0,1fr)}
 #rail{flex-direction:row;position:static;align-items:stretch;gap:10px}
 #time{font-size:26px;padding:8px 16px;display:flex;align-items:center}
 #tools{flex-direction:row;flex:1;justify-content:space-around}
 #hintb{padding:8px 20px}
}
/* ===== Ruimte voor de puzzel ===== */
header{flex-wrap:nowrap;padding:6px 12px;gap:10px}
header h1{flex:none;font-size:20px;gap:8px}
@media(max-width:1100px){.ttl{display:none}}
header nav{flex:1;padding:0;gap:6px;flex-wrap:wrap;justify-content:center;min-width:0}
header nav button{padding:7px 13px 7px 10px;gap:6px;font-size:15px}
#theme,#sbtn{padding:6px 11px;font-size:17px}
main{grid-template-columns:128px minmax(0,1fr);gap:14px;padding:4px 12px 16px;max-width:none}
#rail{gap:10px;top:6px}
#time{font-size:28px;padding:8px 10px}
#hintb,#chk{padding:12px 8px;font-size:16px}
#msg{text-align:center;font-weight:700;font-size:14px;line-height:1.25}
#msg:empty{display:none}
#segrow{margin-bottom:6px;gap:8px 12px}
#side{display:none;position:fixed;top:56px;right:10px;width:310px;max-height:calc(100vh - 70px);overflow:auto;z-index:45;box-shadow:0 18px 50px rgba(0,0,0,.35)}
#side.open{display:block}
@media(max-width:760px),(max-aspect-ratio:1/1){main{grid-template-columns:minmax(0,1fr)}header nav{order:5;flex-basis:100%}header{flex-wrap:wrap}}
#time.hid{font-size:13px;font-weight:600;color:var(--mut);padding:8px 6px;cursor:pointer}
@keyframes pl{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
#next.pulse{animation:pl 1.2s ease-in-out 3;background:var(--pc);color:#fff;border-color:var(--pc)}
/* ===== rechterkolom met puzzelacties ===== */
main{grid-template-columns:128px minmax(0,1fr) 150px}
#rail2{position:sticky;top:6px;align-self:start}
#rail2 #segrow{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0}
#rail2 #next{padding:11px 6px;font-size:15px;border-radius:18px;line-height:1.2}
@media(max-width:760px),(max-aspect-ratio:1/1){main{grid-template-columns:minmax(0,1fr)}#rail{order:0}#rail2{order:1;position:static}#stage{order:2}
 #rail2 #segrow{flex-direction:row;flex-wrap:wrap;justify-content:center}}
@media(max-width:1100px) and (min-aspect-ratio:1/1){
header{gap:6px;padding:6px 8px}header nav{gap:4px}header nav button{padding:6px 9px 6px 8px;font-size:14px;gap:5px}
#theme,#sbtn{padding:6px 9px}
main{grid-template-columns:112px minmax(0,1fr) 126px;gap:8px;padding:4px 8px 12px}
#tools button{padding:8px 4px;gap:5px}#tools button span{font-size:13px}#rail2 #next{font-size:14px;padding:9px 4px}
#hintb,#chk,#helpb{font-size:14px;padding:11px 4px;white-space:nowrap}#streak{font-size:13px}}
/* ===== hint als zwevende kaart + overzicht ===== */
#hint{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(560px,92vw);max-width:none;z-index:40;box-shadow:0 12px 40px rgba(0,0,0,.4);border:2px solid var(--pc);font-size:15px;line-height:1.35}
#hint button{padding:8px 16px;border-radius:12px;font-weight:700;border:1px solid var(--pc);background:var(--pc);color:#fff}
#side{width:420px}
#stabs{display:flex;gap:6px;margin-bottom:10px}
#stabs button{flex:1;padding:8px;border-radius:12px;font-weight:700;font-size:15px}
#stabs button.on{background:var(--pc);border-color:var(--pc);color:#fff}
#sv-over[hidden]{display:none}
.pp{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pp button{padding:5px 12px;border-radius:999px;font-size:14px}
.pp button.on{background:var(--pc);border-color:var(--pc);color:#fff}
.ot{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:8px}
.ot th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);text-align:right;padding:4px 6px}
.ot th:first-child,.ot td:first-child{text-align:left}
.ot td{padding:5px 6px;text-align:right;border-top:1px solid var(--line)}
.ot td small{display:block;color:var(--mut);font-size:11px}
.ot tr.tot td{font-weight:800}
.ot i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.dr{display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:center;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.dr .pl{display:flex;gap:6px;align-items:center;white-space:nowrap}
.dr .pl b{display:inline-block;width:14px;font-size:11px;color:var(--mut)}
.dd{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box;margin-right:3px}
.dd.on{border:0}
.dr em{font-style:normal;color:var(--mut);font-size:11px;margin-left:4px}
#helpb{padding:10px 8px;font-size:15px;border-radius:14px;font-weight:700}
#hm,#cm{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
#hm[hidden],#cm[hidden]{display:none}#npm[hidden]{display:none}
.hc{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 24px;max-width:560px;max-height:85vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.hc h2{margin:0 0 10px;font-size:22px}
.hc h3{margin:4px 0 8px;font-size:18px}.hc h3 small{font-weight:400;color:var(--mut);font-size:14px}
.hc ul{margin:0 0 14px;padding-left:20px;font-size:17px;line-height:1.45}.hc li{margin-bottom:6px}
.hc button{padding:10px 22px;border-radius:14px;font-weight:700;background:var(--pc);border-color:var(--pc);color:#fff}
nav button .tdone{font-size:13px;font-weight:800;color:var(--ok);margin-left:-2px}
nav button.on .tdone{color:#fff}
nav button .tdone[hidden]{display:none}
.k.ok{opacity:.38}.k span{transition:opacity .15s}.k span.dn{opacity:.3}.k.ok span.dn{opacity:1}
#nmode{display:flex;flex-direction:column;gap:6px}
#nmode button{font-weight:700;padding:10px 6px;border-radius:14px;white-space:nowrap}
#nf.on{background:var(--fill);border-color:var(--fill);color:var(--bg);box-shadow:0 3px 0 color-mix(in srgb,var(--fill) 60%,#000)}
#nx.on{background:#c2410c;border-color:#c2410c;color:#fff;box-shadow:0 3px 0 #7c2d12}
#grid.nx{box-shadow:0 0 0 5px #df875a,0 8px 24px var(--sh)}#grid.nf{box-shadow:0 0 0 5px var(--fill),0 8px 24px var(--sh)}
@media(max-width:760px),(max-aspect-ratio:1/1){#nmode{flex-direction:row}}
/* ===== Opgelost-kaart met reactie ===== */
#fin{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(520px,92vw);z-index:46;background:var(--card);border:2px solid var(--pc);border-radius:16px;padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.4);font-size:15px;line-height:1.35;max-height:80vh;overflow:auto}
#fin[hidden]{display:none}
#fin .hx{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--fg);font-size:16px;line-height:1;font-weight:700}
#fin .ft{font-size:21px;font-weight:800;padding-right:40px}
#fin .fb{margin:6px 0 2px;font-weight:600}#fin .fres{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--pc) 8%,var(--card))}#fin .fres>b{font-size:18px;font-variant-numeric:tabular-nums}#fin .fres .rq{font-size:12px}
#fin .fo{margin:10px 0 4px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--pc) 10%,var(--card))}
#fin .fo .rx{margin-top:2px}
#fin .fq{margin:10px 0 6px}
#fin .fq small{display:block;font-size:13px}
#fin .fe{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}
#fin .fe button{flex:1 1 64px;padding:6px 2px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;font-weight:600}
#fin .fe button b{font-size:27px;line-height:1.15;font-weight:400}
#fin .fe button.on{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 22%,var(--card));box-shadow:0 0 0 2px var(--pc)}
#fin input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font:inherit;font-size:16px;background:var(--bg);color:var(--fg);-webkit-user-select:text;user-select:text}
#fin .fa{display:flex;gap:8px;margin-top:10px}
#fin .fa button{padding:9px 18px;border-radius:12px;font-weight:700}
#fin .fa button.pr{background:var(--pc);border-color:var(--pc);color:#fff}
#fin .fq2{margin:10px 0 0;font-weight:700}#fin .fnext{flex-wrap:wrap}#fin .fnext button{flex:1 1 auto;min-height:46px;font-size:16px}#fin .fnext button.pr{flex:2 1 auto}
#fin .fsub{margin:12px 0 6px;font-size:13px;font-weight:700;color:var(--mut)}
#fin .fother{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#fin .fother button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border-radius:12px;min-width:0;font-size:12px;font-weight:700;line-height:1.1;box-shadow:none}
#fin .fother button span:not(.ticon){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#fin .fother button small{font-size:10.5px;font-weight:600;color:var(--mut);white-space:nowrap}
#fin .fother button.day{border-color:color-mix(in srgb,var(--pc) 45%,var(--line))}
#fin .fother .fdot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--pc)}
body.phone #fin .fnext button{flex:1 1 0;min-width:0;font-size:14.5px;padding:8px 6px;line-height:1.15}body.phone #fin .fother{gap:4px}body.phone #fin .fother button{padding:6px 1px 5px;font-size:10.5px}body.phone #fin .fother .ticon{width:26px;height:26px;font-size:13px}body.phone #fin .fother button small{font-size:9.5px}
.rr{margin:2px 0 6px}
.rx{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 10px;font-size:14px;color:var(--fg)}
.rx.mut{color:var(--mut);font-size:13px}
.rx b{font-size:22px;font-weight:400}
.rx .rbtn{padding:3px 10px;border-radius:999px;font-size:13px;margin-left:auto}
nav button .bub{font-size:13px;margin-left:-2px}
nav button .bub[hidden]{display:none}
/* ===== Hexcells donker ===== */
:root[data-theme=dark] #hexsvg{background:#1a1f29;box-shadow:0 8px 24px rgba(0,0,0,.5)}
:root[data-theme=dark] #hexsvg.mb{background:#182739;box-shadow:0 0 0 7px #2f8fdc}
:root[data-theme=dark] #hexsvg.mz{background:#101216;box-shadow:0 0 0 7px #4a4e58}
:root[data-theme=dark] #mz.on{background:#0c0e12;border-color:#9aa3b5;color:#fff;box-shadow:0 3px 0 #000}:root[data-theme=dark] #hexbtns.mz .st,:root[data-theme=dark] #hexstat.mz .st{background:#0c0e12;box-shadow:inset 0 0 0 2px #4a4e58}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) #hexsvg{background:#1a1f29;box-shadow:0 8px 24px rgba(0,0,0,.5)}
:root:not([data-theme=light]) #hexsvg.mb{background:#182739;box-shadow:0 0 0 7px #2f8fdc}
:root:not([data-theme=light]) #hexsvg.mz{background:#101216;box-shadow:0 0 0 7px #4a4e58}:root:not([data-theme=light]) #mz.on{background:#0c0e12;border-color:#9aa3b5;color:#fff;box-shadow:0 3px 0 #000}:root:not([data-theme=light]) #hexbtns.mz .st,:root:not([data-theme=light]) #hexstat.mz .st{background:#0c0e12;box-shadow:inset 0 0 0 2px #4a4e58}}
#hint{padding-right:44px}
#hint .hx{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--fg);font-size:16px;line-height:1;font-weight:700}
#hint{max-height:70vh;overflow:auto}


/* Puzzels met twee standen: elke aanraking op de pagina is meteen een tik (zie tapMode). Lijsten die kunnen scrollen houden scrollen. */
html.tap,html.tap body,html.tap main,html.tap #stage,html.tap #rail,html.tap #rail2{touch-action:none;-webkit-touch-callout:none}
html.tap #side,html.tap .hc,html.tap #hint,html.tap #pmp{touch-action:pan-y}
#tikdbg{position:fixed;left:8px;bottom:8px;z-index:99;background:rgba(0,0,0,.82);color:#7CFC8A;font:11px/1.35 ui-monospace,Menlo,monospace;white-space:pre;padding:8px 10px;border-radius:10px;pointer-events:none;max-width:70vw}
/* Archief */
#arch{border-radius:999px;font-weight:700;white-space:nowrap}
#arch.on{background:var(--pc);border-color:var(--pc);color:#fff}
#archp{display:none;position:fixed;z-index:57;width:230px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;flex-direction:column;gap:4px;box-shadow:0 14px 40px rgba(0,0,0,.3)}
#archp.open{display:flex}
#archp .sm{padding:2px 6px 4px}
#archp button{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;font-size:15px;box-shadow:none;text-align:left}
#archp button.on{background:var(--pc);border-color:var(--pc);color:#fff}
#archp .lw{display:flex;gap:3px}#archp .pw{font-style:normal;font-size:10px;font-weight:800;width:16px;height:16px;line-height:16px;border-radius:50%;background:var(--ok);color:#fff;text-align:center}
body.phone #arch{padding:4px 9px;font-size:15px;box-shadow:none}
/* ===== Pluszle ===== */
#pmode{display:flex;flex-direction:column;gap:6px}
#pmode button{font-weight:700;padding:10px 6px;border-radius:14px;white-space:nowrap}
#pxb.on{background:var(--fill);border-color:var(--fill);color:var(--bg);box-shadow:0 3px 0 color-mix(in srgb,var(--fill) 60%,#000)}
#pob.on{background:var(--pc);border-color:var(--pc);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--pc) 55%,#000)}
#grid.pom{box-shadow:0 0 0 5px var(--pc),0 8px 24px var(--sh)}#grid.pxm{box-shadow:0 0 0 5px var(--fill),0 8px 24px var(--sh)}
@media(max-width:760px),(max-aspect-ratio:1/1){#pmode{flex-direction:row}}
.c.pl{position:relative;font-size:calc(var(--cs)*.5);font-weight:700}
.c.pl .pn{position:relative;z-index:1;font-variant-numeric:tabular-nums;transition:opacity .15s}
.c.pl.po::after{content:"";position:absolute;inset:14%;border:calc(var(--cs)*.055) solid var(--pc);border-radius:50%;pointer-events:none}
.c.pl.px .pn{opacity:.2}
.c.pl.px::before{content:"";position:absolute;left:20%;right:20%;top:50%;height:calc(var(--cs)*.05);min-height:2px;margin-top:-1px;background:var(--fg);opacity:.6;transform:rotate(-45deg);border-radius:2px;pointer-events:none}
#grid.pdone .c.pl.po::after{display:none}
#grid.pdone .c.pl:not(.px) .pn{color:var(--pc)}
.prb{position:absolute;left:3px;top:1px;font-style:normal;font-size:calc(var(--cs)*.24);font-weight:800;line-height:1;padding:1px 3px;border-radius:5px;background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--fg);z-index:2;pointer-events:none}
.prb.ok{opacity:.4}
.prb.hk{outline:3px solid rgba(47,111,237,.75)}
.pt{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;cursor:pointer;width:var(--cs);height:var(--cs);box-sizing:border-box;touch-action:none;background:color-mix(in srgb,var(--pc) 20%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 45%,var(--card));color:color-mix(in srgb,var(--pc) 55%,var(--fg))}
.pt.pr{border-left:2.5px solid color-mix(in srgb,var(--pc) 70%,var(--card))}.pt.pc{border-top:2.5px solid color-mix(in srgb,var(--pc) 70%,var(--card))}
.pt b{font-size:calc(var(--cs)*.42);font-weight:800}
.pt small{font-size:calc(var(--cs)*.24);font-weight:700;color:color-mix(in srgb,var(--one) 85%,var(--mut));min-height:1.05em}
.pt{position:relative}.pt.mk b{opacity:.35}.pt.mk::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:calc(var(--cs)*.06);min-height:2px;margin-top:-1px;background:currentColor;opacity:.75;transform:rotate(-45deg);border-radius:2px;pointer-events:none}
#grid.nfin .c:not(.f){color:transparent!important}
.pt.hk{box-shadow:inset 0 0 0 3px rgba(47,111,237,.6)}
.pt.over b,.prb.over{color:#d33!important;opacity:1!important}.prb.mk{text-decoration:line-through;opacity:.5}
.pt.shk{animation:shk .3s}
@keyframes shk{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
#grid.pdone .pt b{opacity:.5}
body.phone #pbot #pmode{display:flex;flex-direction:row;gap:6px;flex:2 1 0;min-width:0}
body.phone #pbot #pmode button{flex:1 1 0;min-width:0;padding:11px 4px;font-size:15px;border-radius:12px;white-space:nowrap}
body[data-t=plus].phone #pbot #hintb span,body[data-t=plus].phone #pbot #chk span{display:none}
body[data-t=plus].phone #pbot #hintb,body[data-t=plus].phone #pbot #chk{flex:0 0 50px}
/* ===== iPhone ===== */
#prow,#pbot,#pmp,#pm{display:none}
body.phone{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);overflow:hidden;overscroll-behavior:none}
body.phone header{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:0;padding:4px 46px 4px 4px;min-height:40px;box-sizing:border-box}
body.phone header h1{display:none}
body.phone header nav{order:0;flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:5px;padding:2px 5px 4px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:18px;overscroll-behavior-x:contain}
body.phone header nav::-webkit-scrollbar{display:none}
body.phone header nav button{height:32px;box-sizing:border-box;padding:0 9px;font-size:13px;line-height:1;gap:3px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 0 var(--line);scroll-snap-align:center}
body.phone header nav button::before{display:none}body.phone header nav button:not(.on){box-shadow:inset 0 -3px 0 var(--tc),0 2px 0 var(--line)}
body.phone header nav button .tdone{display:none}body.phone header nav button .tfeat{line-height:1;margin-left:1px}
body.phone #sbtn{display:none}body.phone #pm{display:flex;position:absolute;right:5px;top:6px;width:36px;height:32px;align-items:center;justify-content:center;padding:0;font-size:18px;line-height:1;box-shadow:0 2px 0 var(--line)}
body.phone main{display:block;padding:0 4px}
body.phone #rail,body.phone #rail2{display:none}
body.phone #prow{display:flex;align-items:center;gap:6px;padding:2px 2px 6px;flex-wrap:nowrap;min-height:34px}
body.phone #next{padding:4px 10px;font-size:15px;border-radius:999px;box-shadow:0 2px 0 var(--line)}
body.phone #msg{font-size:13px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.phone #hexstat{flex-direction:row;gap:4px;margin:0 0 0 auto}
body.phone #hexstat .st{min-width:0;padding:2px 8px;border-radius:10px;display:flex;gap:5px;align-items:baseline}
body.phone #hexstat .st span{font-size:9px}body.phone #hexstat .st b{font-size:17px}body.phone #hexstat .st small{display:none}
body.phone #stage{display:flex;flex-direction:column;align-items:center}
body.phone #hexw{gap:0}
body.phone #mur{flex-direction:column;align-items:center;gap:6px;flex-wrap:nowrap}
body.phone #mmain{gap:6px}body.phone #mpal{gap:4px}body.phone .pb{padding:2px 9px 2px 3px;font-size:13px;gap:4px}body.phone .pb .tok{width:24px;height:24px;font-size:13px}
body.phone #mclues{max-width:none;width:100%;min-width:0;flex:none;overflow:auto;padding:4px 12px 10px;font-size:14px;box-sizing:border-box}body.phone #mclues h2{font-size:15px;margin:4px 0}body.phone #mclues li{padding:5px 6px;gap:8px}body.phone #mclues li .tok{width:24px;height:24px;min-width:24px;font-size:12px}body.phone #mleg{font-size:11px}
body.phone #pbot{display:flex;position:fixed;left:0;right:0;bottom:0;gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);z-index:30;box-shadow:0 -6px 18px var(--sh)}
body.phone #pbot>button,body.phone #pbot #nmode button{flex:1 1 0;min-width:0;padding:11px 4px;font-size:15px;border-radius:12px;white-space:nowrap}
body.phone #pbot #undo,body.phone #pbot #redo{flex:0 0 46px;font-size:18px}
body.phone #pbot #undo span,body.phone #pbot #redo span{display:none}
body.phone #pbot #nmode{display:flex;flex-direction:row;gap:6px;flex:2 1 0;min-width:0}
body.phone #pbot #mb,body.phone #pbot #mz{flex:1.4 1 0;font-size:16px}
body.phone #pm{margin-left:2px}
body.phone #pmp.open{display:flex;position:fixed;top:calc(env(safe-area-inset-top) + 44px);right:6px;width:230px;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;z-index:55;box-shadow:0 14px 40px rgba(0,0,0,.3)}
body.phone #pmp button,body.phone #pmp #time{width:100%;text-align:left;padding:10px 12px;font-size:15px;border-radius:12px;display:flex;gap:8px;align-items:center}
body.phone #pmp #streak{padding:4px 12px;font-size:14px}
body.phone #pmp #reset b{font-size:16px}
body.phone #side{top:calc(env(safe-area-inset-top) + 44px);left:6px;right:6px;width:auto;max-height:calc(100dvh - 120px)}
body[data-t=nono].phone #pbot #hintb span,body[data-t=nono].phone #pbot #chk span{display:none}
body[data-t=nono].phone #pbot #hintb,body[data-t=nono].phone #pbot #chk{flex:0 0 50px}
body.phone #hint{font-size:14px;padding:10px 44px 10px 12px;max-height:45vh}body.phone #hint button:not(.hx){padding:7px 14px}body.phone #hint .mut{font-size:12px}
body.phone #fin{width:calc(100vw - 12px);padding:12px 12px;font-size:14px}
body.phone #fin .fe{flex-wrap:nowrap;gap:4px}body.phone #fin .fe button{flex:1 1 0;min-width:0;padding:5px 0;font-size:11px}body.phone #fin .fe button b{font-size:23px}
body.phone .hc{padding:16px 16px}
@media(max-width:360px){body.phone #hexstat .st span{display:none}body.phone header nav{gap:3px}body.phone header nav button{padding:5px 5px;font-size:12.5px}body.phone #pbot{gap:4px;padding-left:5px;padding-right:5px}body.phone #pbot #undo,body.phone #pbot #redo{flex-basis:38px}body.phone #pbot #nmode,body.phone #pbot #pmode{gap:4px}body.phone #pbot #nmode button,body.phone #pbot #pmode button{font-size:13.5px;padding:11px 2px}body[data-t=plus].phone #pbot #hintb,body[data-t=plus].phone #pbot #chk,body[data-t=nono].phone #pbot #hintb,body[data-t=nono].phone #pbot #chk{flex-basis:42px}body.phone #pm{right:4px;width:34px;font-size:17px}body.phone header{padding:4px 43px 4px 3px}body.phone #prow{gap:4px}}
body.phone .hc ul{font-size:15px}

/* Pluszle en Nonogram houden het speelveld zelf neutraal; de modus staat eromheen. */
#grid .c,#grid .pt{transition:background-color .12s}

/* ===== Verfijningslaag: rust, touch en toegankelijkheid ===== */
#msg:not(:empty){display:inline-block;max-width:min(680px,92vw);padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--pc) 9%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 20%,var(--line));box-shadow:0 2px 8px var(--sh)}
#msg.good{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--card));border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
#msg.warn{color:#c2410c;background:color-mix(in srgb,#c2410c 10%,var(--card));border-color:color-mix(in srgb,#c2410c 35%,var(--line))}
#reset.arm{background:#e5484d!important;border-color:#e5484d!important;color:#fff!important;box-shadow:0 3px 0 #a52f34!important}
#hint .hht{font-size:17px;font-weight:800;color:var(--pc);margin:0 34px 6px 0}
.hc{border-top:6px solid var(--pc)}
#hint .hx,#fin .hx{width:40px;height:40px;min-width:40px;min-height:40px}
#npm{width:min(560px,calc(100vw - 28px));margin:clamp(20px,7vh,80px) auto 32px}#npm .hc{width:100%;box-sizing:border-box;position:relative;max-height:none}#npm .npx{display:grid;place-items:center;line-height:1;position:absolute;left:12px;top:11px;width:38px;height:38px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--fg);box-shadow:none;font-size:20px}#npm .npcard h2{padding-left:42px}#npsub{margin:-4px 0 14px;padding-left:42px;font-size:13px}body.newpick main{grid-template-columns:1fr!important;max-width:900px;margin:0 auto}body.newpick #rail,body.newpick #rail2,body.newpick #playbox,body.newpick #pbot,body.newpick #prow,body.newpick #side,body.newpick #hint{display:none!important}body.newpick #stage{grid-column:1/-1;width:100%;min-height:65vh}body.newpick #tbMid>*{display:none!important}body.newpick #npm{display:block}.npwarn{padding:14px;border:1px solid color-mix(in srgb,#d08a00 38%,var(--line));border-radius:16px;background:color-mix(in srgb,#f2a000 8%,var(--card));margin-bottom:10px}.npwarn b{display:block;font-size:16px;margin-bottom:4px}.npwarn p{margin:4px 0;color:var(--mut);font-size:13px;line-height:1.4}.npactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.npactions button{width:100%;padding:11px 10px!important}.npactions .secondary{background:var(--card)!important;color:var(--fg)!important;border:1px solid var(--line)!important;box-shadow:none!important}@media(max-width:520px){.npactions{grid-template-columns:1fr}#npm{margin-top:18px}}#nplv{display:grid;gap:8px}.nplvb{display:grid!important;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 12px;text-align:left!important;align-items:center;width:100%;padding:11px 13px!important;background:color-mix(in srgb,var(--line) 15%,var(--card))!important;border:1px solid var(--line)!important;color:var(--fg)!important;box-shadow:none!important}.nplvb b{font-size:16px}.nplvb small{grid-column:1;color:var(--mut);font-size:12px}.nplvb span{grid-column:2;grid-row:1/3;font-size:21px;color:var(--mut)}.nplvb:hover{border-color:var(--pc)!important;background:color-mix(in srgb,var(--pc) 6%,var(--card))!important}#cmp{display:flex;flex-direction:column;gap:14px;margin:4px 0 16px}.csec h3{margin:0 0 7px;font-size:16px}.clist{display:grid;gap:6px}.crow{display:grid;grid-template-columns:minmax(105px,auto) 1fr;gap:10px;align-items:baseline;padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--line) 20%,transparent);font-size:14px}.crow b{font-size:13px;white-space:nowrap}.crow span{color:var(--mut)}#cm .hc{max-width:560px}#cmx{margin-top:2px}.ckeys{display:grid;grid-template-columns:1fr;gap:7px}.ckeys span{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:6px 8px;border-radius:9px;background:color-mix(in srgb,var(--line) 20%,transparent);font-size:12px;line-height:1.4;color:var(--mut)}.ckeys kbd{color:var(--fg);flex:none}@media(max-width:520px){.crow{grid-template-columns:1fr;gap:2px}.crow b{white-space:normal}}
#shortcuts{margin:12px 0 14px;padding-top:10px;border-top:1px solid var(--line)}
#shortcuts h3{margin:0 0 8px;font-size:16px}
.kgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;font-size:14px;color:var(--mut)}
kbd{display:inline-block;min-width:27px;padding:2px 6px;margin-right:4px;border:1px solid var(--line);border-bottom-width:3px;border-radius:7px;background:var(--bg);color:var(--fg);font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}
#time:focus-visible{outline:3px solid var(--pc);outline-offset:2px}
header button,#tools button,#rail2 button,#helpb,#hintb,#chk{min-height:40px}
@media(hover:hover){button:not(:disabled):hover{border-color:color-mix(in srgb,var(--pc) 45%,var(--line))}#tools button:hover{background:color-mix(in srgb,var(--pc) 7%,var(--card))}}
body.phone #pbot>button,body.phone #pbot #nmode button,body.phone #pbot #pmode button{min-height:48px}
body.phone #shortcuts{display:none}
body.phone #msg:not(:empty){padding:3px 8px;font-size:12px;max-width:92vw}
@media(max-width:430px){.kgrid{grid-template-columns:1fr}}
/* ===== Kleur Nonogram ===== */
:root{--nc1:#d9564f;--nc2:#347fcf;--nc3:#e5b72d;--nc4:#3f9968}
#nmode .ncb{display:none;align-items:center;justify-content:center;gap:6px;min-width:46px}
#nmode .ncb i{display:block;width:16px;height:16px;border-radius:5px;background:var(--cc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
#nc1{--cc:var(--nc1)}#nc2{--cc:var(--nc2)}#nc3{--cc:var(--nc3)}#nc4{--cc:var(--nc4)}
#nmode .ncb.on{background:color-mix(in srgb,var(--cc) 24%,var(--card));border-color:var(--cc)!important;color:var(--fg);box-shadow:inset 0 0 0 2px var(--cc)!important}
#grid.ncolor .c{transition:background-color .12s,transform .1s}
#grid.ncolor .c.nc1{background:var(--nc1)!important}
#grid.ncolor .c.nc2{background:var(--nc2)!important}
#grid.ncolor .c.nc3{background:var(--nc3)!important}
#grid.ncolor .c.nc4{background:var(--nc4)!important}
#grid.ncolor .c[class*="nc"]{color:transparent}
#grid .ncv{display:flex;gap:3px;align-items:center}
#grid .k .ncv.col{flex-direction:column;justify-content:flex-end}
#grid .k.r .ncv{flex-direction:row;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap}
body[data-t=nono].tablet #grid{max-width:none}
body[data-t=nono] #grid .k.r>div{white-space:nowrap}
#grid .ncl{display:inline-flex!important;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 5px;border-radius:7px;background:var(--cc);color:#fff!important;font-size:12px;font-weight:900;line-height:1;opacity:1!important}
#grid .ncl.c1{--cc:var(--nc1)}#grid .ncl.c2{--cc:var(--nc2)}#grid .ncl.c3{--cc:var(--nc3);color:#25210d!important}#grid .ncl.c4{--cc:var(--nc4)}
#grid .ncl.dn{opacity:.28!important}
body.phone #nmode .ncb{min-width:38px;padding:8px 4px}
body.phone #nmode .ncb span{display:none}
body.phone #nmode .ncb i{width:20px;height:20px;border-radius:6px}
#nmode.ncolor{flex-direction:row;flex-wrap:wrap;align-items:center}
body.tablet #pbot #nmode.ncolor button{width:auto!important;min-width:44px;flex:1 1 44px}
body.phone #nmode.ncolor{flex-wrap:nowrap}
@media(max-width:430px){body.phone #nmode .ncb{min-width:34px}}
/* ===== Verfijningslaag 2: appgevoel + toetsenbord ===== */
.modeflash{animation:modeflash .22s ease-out}
@keyframes modeflash{0%{transform:scale(.96)}55%{transform:scale(1.035)}100%{transform:scale(1)}}
body.potlood #potb{background:color-mix(in srgb,#f2a000 88%,var(--card));border-color:#d08a00;color:#1f2430;box-shadow:0 3px 0 #a96f00}
body.potlood #grid,body.potlood #mgrid{outline-color:#d99600;outline-style:solid}

/* Op tablet/desktop zijn de twee standen echte segmenten in plaats van losse knoppen. */
#nmode,#pmode{padding:3px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--line) 20%,var(--card));gap:3px}
#nmode button,#pmode button{box-shadow:none!important;border-color:transparent}

body.phone #pbot #nmode,body.phone #pbot #pmode{padding:2px;gap:2px;border-radius:14px;background:color-mix(in srgb,var(--line) 26%,var(--card));border:1px solid var(--line)}
body.phone #pbot #nmode button,body.phone #pbot #pmode button{border-radius:11px;box-shadow:none!important}
body.phone #pbot #potb.on{transform:none}


/* ===== Home- en speelweergave ===== */
.ticon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;color:#fff;font-weight:900;font-size:15px;flex:none;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.ticon.big{width:46px;height:46px;border-radius:13px;font-size:22px}
#home{display:none}
body.nieuw.home #home{display:block}
body.nieuw.phone.home{overflow:visible;overscroll-behavior:auto}
body.nieuw.home main,body.nieuw.home #pbot,body.nieuw.home #topbar,body.nieuw.home #prow,body.nieuw.home #hint{display:none!important}
#home .hwrap{max-width:900px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-left)) 40px;display:flex;flex-direction:column;gap:14px}
#home h2{margin:0;font-size:26px;font-weight:900;letter-spacing:-.01em}
.htop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.htheme{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--line) 24%,var(--card));flex:none}.htheme button{border:0;box-shadow:none;background:transparent;color:var(--mut);border-radius:10px;padding:7px 9px;font:800 12px inherit;font-family:inherit;min-height:0}.htheme button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 4px var(--sh)}.htheme button:hover{transform:none}.htheme .thi{font-size:13px;margin-right:3px}@media(max-width:560px){.htop{align-items:center}.htheme button{padding:7px 8px}.htheme .thtxt{display:none}.htheme .thi{margin:0;font-size:16px}}
#home h3{margin:8px 0 0;font-size:17px}
#home .hgrid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px;box-shadow:0 6px 18px var(--sh);min-width:0}
.hcard.feat{border-top:6px solid var(--tc)}
.hcard.feat .fr{display:flex;align-items:center;gap:12px;margin-top:8px}.hcard.feat .fr b{font-size:20px}
.hcard.feat .fr>div{flex:1;min-width:0}
.hbtn{background:var(--tc);color:#fff;border:0;border-radius:14px;padding:12px 20px;font:800 16px inherit;font-family:inherit;box-shadow:0 3px 0 color-mix(in srgb,var(--tc) 60%,#000);cursor:pointer}
.hcard.streak{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.hcard.streak .big{font-size:32px;font-weight:900}.hst{margin-top:10px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);width:100%;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 6px}.hst b{font-size:17px}.hst span{font-size:13px;color:var(--mut);font-weight:700}.hst small{flex-basis:100%;font-size:12px;color:var(--mut);font-weight:700}
.hcard.who .hh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:7px}.hcard.who .hh b{font-size:17px;white-space:nowrap}.whmeta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0;font-size:11px}.whmeta>.mut{font-size:11px;white-space:nowrap}.whmeta .livebadge{margin-left:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hrow{display:flex;align-items:center;gap:9px;padding:6px 2px;border:0;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);font:600 16px inherit;font-family:inherit;color:var(--fg);background:transparent;box-shadow:none;width:100%;text-align:left;border-radius:0;cursor:pointer;min-height:0}
.hrow:hover,.hrow:active{background:color-mix(in srgb,var(--line) 25%,transparent);transform:none}
.hrow .hb{margin-right:6px;font-size:13px}
.hbrand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-.01em;margin-bottom:-4px}.hbrandtext{display:flex;flex-direction:column;line-height:1.05}.hbrandtext small{margin-top:4px;color:var(--mut);font-size:11px;font-weight:650;letter-spacing:0;line-height:1.2}
.hrow .hx2{margin-left:auto;color:var(--mut);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hrow .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none;box-sizing:border-box}
.hrow.ok .dot{background:var(--ok);border-color:var(--ok)}.hrow.ok .dot::after{content:"✓";display:block;color:#fff;font-size:10px;line-height:12px;text-align:center;font-weight:900}
.hrow.busy .dot{border:2px dashed var(--mut);animation:busyp 1.6s ease-in-out infinite}.hrow.busy .hx2{color:#c2410c}
.pdonut{--p:0;--ring:var(--pc);position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--p)*1%),color-mix(in srgb,var(--line) 55%,transparent) 0);flex:none}
.pdonut::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}.pdonut b{position:relative;z-index:1;font-size:8px;line-height:1;color:var(--fg);font-weight:900}.hrow .hx2{display:flex;align-items:center;gap:7px}.hrow .pdonut{width:28px;height:28px}.tile .pdonut{position:absolute;top:7px;right:7px;width:30px;height:30px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px 10px;border-radius:18px;border:1px solid var(--line);background:var(--card);font:700 14px inherit;font-family:inherit;color:var(--fg);cursor:pointer;box-shadow:0 3px 0 var(--line)}
.tile .tok2{position:absolute;top:6px;right:8px;font-style:normal;color:var(--ok);font-weight:900}.tile .tst{position:absolute;top:6px;left:8px;font-style:normal;font-size:13px}.tile .tcount{font-size:11px;line-height:1.1;color:var(--mut);font-weight:700;font-variant-numeric:tabular-nums}
.hraad{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--fg);border-left:6px solid #c2255c}
.hraad b{font-size:17px}.hraad .mut{font-size:14px;margin-top:2px}.hraad>div{flex:1;min-width:0}
.hpill{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,#c2255c 14%,var(--card));color:#c2255c;vertical-align:2px}
.hgo{font-size:28px;color:var(--mut);font-weight:300}
.hlinks{display:flex;gap:10px;flex-wrap:wrap}.hlinks button{padding:10px 14px;border-radius:14px}
.hsection{display:flex;flex-direction:column;gap:10px;padding:4px 0 12px}.hsection+.hsection{border-top:2px solid color-mix(in srgb,var(--line) 70%,transparent);padding-top:18px}.hsecthead{display:flex;align-items:center;justify-content:space-between;gap:12px}.hsecthead h3{margin:0!important;font-size:20px!important}.hsecthead>div>.mut{display:block;margin-top:2px;font-size:12px;font-weight:700}.hstreak{font-size:13px;font-weight:800;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,#f2a000 13%,var(--card));white-space:nowrap}.hdlist{padding:4px 14px}.hdrow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 2px;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 58%,transparent);border-radius:0;background:transparent;box-shadow:none;color:var(--fg);text-align:left}.hdrow:last-child{border-bottom:0}.hdrow:hover,.hdrow:active{background:color-mix(in srgb,var(--line) 22%,transparent);transform:none}.hdrow .dot{width:17px;height:17px;border-radius:50%;border:2px solid var(--line);flex:none;box-sizing:border-box}.hdrow.ok .dot{background:var(--ok);border-color:var(--ok)}.hdrow.ok .dot::after{content:"✓";display:block;color:#fff;font-size:10px;line-height:13px;text-align:center;font-weight:900}.hdrow.busy .dot{border-style:dashed;border-color:var(--pc)}.dname{font-size:15px;font-weight:800;min-width:0;flex:1}.dname small{display:block;color:var(--mut);font-size:11px;font-weight:700;margin-top:2px}.daypeople{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}.dayperson{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;background:color-mix(in srgb,var(--line) 22%,transparent);color:var(--mut)}.dayperson.done{color:var(--fg);background:color-mix(in srgb,var(--ok) 11%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 28%,var(--line))}.dayperson.me{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 38%,transparent)}.dayperson.busy{color:#c97a00;background:color-mix(in srgb,#c97a00 12%,transparent)}.dayperson .dbdg{letter-spacing:1px}.hlivebar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:14px;border:1px solid color-mix(in srgb,#28a745 35%,var(--line));background:color-mix(in srgb,#28a745 8%,var(--card));font-size:13px;font-weight:750}.hlivebar i{width:9px;height:9px;border-radius:50%;background:#28a745;box-shadow:0 0 0 3px color-mix(in srgb,#28a745 18%,transparent);flex:none}.hlivebar b{white-space:nowrap}.hlivebar span{color:var(--mut);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dstate{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12px}.dstate b{font-size:12px;color:var(--fg);white-space:nowrap}.dstate>.darrow{font-size:20px;font-weight:400}.dresult{display:flex;align-items:center;gap:6px;white-space:nowrap}.dresult>b{font-variant-numeric:tabular-nums}.rq{display:inline-flex;align-items:center;gap:2px;padding:2px 5px;border-radius:999px;background:color-mix(in srgb,var(--line) 24%,transparent);font-size:11px;font-weight:850;line-height:1.2}.rq.good{background:color-mix(in srgb,var(--ok) 11%,var(--card))}.hsub{display:flex;flex-direction:column;gap:7px}.hsubhead{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px}.hsubhead b{font-size:14px}.hsubhead .mut{font-size:11px}.hactive{padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--pc) 5%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 15%,var(--line))}.hcontlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}.hcont{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:13px;background:var(--card);box-shadow:none;text-align:left;min-width:0}.hcont:hover{background:color-mix(in srgb,var(--pc) 7%,var(--card));transform:none}.hcont{color:var(--fg)}.hcont .ctxt{min-width:0;flex:1}.hcont .ctxt b,.hcont .ctxt small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hcont .ctxt b{display:flex;align-items:center;gap:7px}.hcont .ctxt small{color:var(--mut);font-size:11px;margin-top:1px}.hcont .pdonut{width:32px;height:32px}.nvbadge{display:inline-flex!important;align-items:center;flex:none;padding:2px 7px;border-radius:999px;font-size:9px!important;line-height:1.25;font-weight:900;letter-spacing:.02em;text-transform:uppercase;overflow:visible!important}.nvbadge.classic{color:#0f8274;background:color-mix(in srgb,#0f9d8c 15%,var(--card));border:1px solid color-mix(in srgb,#0f9d8c 38%,var(--line))}.nvbadge.color{color:var(--fg);background:linear-gradient(90deg,color-mix(in srgb,#e84d5b 22%,var(--card)),color-mix(in srgb,#f2c94c 22%,var(--card)),color-mix(in srgb,#27ae60 22%,var(--card)),color-mix(in srgb,#2f80ed 22%,var(--card)));border:1px solid color-mix(in srgb,#2f80ed 30%,var(--line))}.hcont.nono-color{border-color:color-mix(in srgb,#2f80ed 24%,var(--line));background:linear-gradient(105deg,color-mix(in srgb,#e84d5b 3%,var(--card)),color-mix(in srgb,#2f80ed 5%,var(--card)))}.hcont.nono-color .ticon{background:linear-gradient(135deg,#e84d5b 0 25%,#f2c94c 25% 50%,#27ae60 50% 75%,#2f80ed 75% 100%)!important}.hcont.nono-classic .ticon{background:#0f9d8c!important}.hgo2{font-size:20px;color:var(--mut)}.freegrid .tile{min-height:112px}.hshuffle{padding:8px 12px;border-radius:12px;font-size:13px;white-space:nowrap}.hhomeviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--line) 24%,var(--card));box-shadow:0 5px 16px var(--sh);overflow:hidden}.hhomeviews button{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;padding:12px 14px;border:0;border-radius:14px;background:transparent;color:var(--fg);box-shadow:none}.hhomeviews button:hover{background:color-mix(in srgb,var(--pc) 6%,var(--card));transform:none}.hhomeviews .hvicon{grid-row:1/3;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--pc) 9%,var(--card));font-size:16px;font-weight:900}.hhomeviews b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hhomeviews b i{font-style:normal;color:var(--mut);font-size:10px;font-weight:700}.hhomeviews small{color:var(--mut);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hhomeviews button+button{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--line) 58%,transparent)}@media(max-width:620px){.hhomeviews{gap:2px}.hhomeviews button{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 5px}.hhomeviews .hvicon{width:30px;height:30px;flex:none}.hhomeviews small{font-size:9px;max-width:100%}.hhomeviews b{font-size:12px;max-width:100%}}
.hsamen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;padding:0;overflow:hidden}.hsamenp{padding:14px 16px;min-width:0}.hsamenp+.hsamenp{border-left:1px solid var(--line)}.hsname{font-weight:900;font-size:16px}.hscount{display:flex;align-items:baseline;gap:5px;margin-top:6px;flex-wrap:wrap}.hscount b{font-size:16px}.hscount span,.hscount i{font-size:11px;color:var(--mut);font-style:normal;font-weight:700}.hsamenp .livebadge{margin:8px 0 0;color:#218838;white-space:normal}.hsoff{font-size:11px;margin-top:8px}.hlinks{align-items:center}.hlinks>.mut{font-size:11px}.livebadge,.peerlive{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--mut);white-space:nowrap}.livebadge i,.peerlive i{display:block;width:9px;height:9px;border-radius:50%;background:#28a745;box-shadow:0 0 0 3px color-mix(in srgb,#28a745 18%,transparent)}.livebadge{margin-left:auto;color:#218838}.peerlive{padding:5px 9px;border:1px solid color-mix(in srgb,#28a745 35%,var(--line));border-radius:999px;background:color-mix(in srgb,#28a745 8%,var(--card));color:var(--fg)}.peerlive[hidden]{display:none!important}body.tablet #topbar .peerlive{flex:none}@media(max-width:760px){.peerlive span{display:none}.peerlive{padding:7px}}@media(max-width:640px){.hsecthead{align-items:flex-start}.hsecthead h3{font-size:18px!important}.hcard.feat .fr{flex-wrap:wrap}.hcard.feat .fr .hbtn{margin-left:auto}.hsamen{grid-template-columns:1fr}.hsamenp+.hsamenp{border-left:0;border-top:1px solid var(--line)}.hcontlist{grid-template-columns:1fr}.dstate b{display:none}.hdrow .pdonut{width:30px;height:30px}}
@media(max-width:640px){#home .hgrid2{grid-template-columns:1fr}#home h2{font-size:22px}}
/* Scorebord-pagina vanaf Vandaag */
.sco .stop{display:flex;align-items:center;gap:12px}.sco #sBack{width:44px;height:44px;border-radius:14px;font-size:22px;padding:0;flex:none}
.sper{display:flex;gap:3px;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--line) 45%,transparent);align-self:flex-start}
.sper button{border:0;background:transparent;box-shadow:none;padding:7px 16px;border-radius:9px;font-weight:700;font-size:14px;color:var(--fg)}
.sper button.on{background:var(--card);box-shadow:0 1px 4px var(--sh)}
#home .sh2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important}
.shero{border-top:6px solid var(--pc)}.shero.p1{border-top-color:color-mix(in srgb,var(--pc) 45%,var(--card))}
.shero .snm{font-weight:800;font-size:17px}
.shero .sbig{font-size:44px;font-weight:900;line-height:1.05;margin:6px 0 10px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.shero .sbig span{font-size:14px;font-weight:700;color:var(--mut);margin-left:8px;letter-spacing:0}
.schips{display:flex;flex-wrap:wrap;gap:6px}.schips span{font-size:13px;font-weight:700;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--line) 32%,transparent)}
.shd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;text-align:center}
.shd b{font-size:17px}.snav{width:40px;height:40px;border-radius:12px;padding:0;font-size:22px;box-shadow:none}.snav:disabled{opacity:.3}
.shd1{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.shd1 b{font-size:17px}
.scal{display:grid;grid-template-columns:minmax(52px,auto) repeat(7,minmax(0,1fr)) 30px;gap:6px;align-items:center}
.sdh{text-align:center;font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase}.sdh small{display:block;font-size:13px;color:var(--fg);text-transform:none}.sdh.td small{color:var(--pc)}
.srn{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scell{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:6px;border-radius:12px;background:color-mix(in srgb,var(--line) 22%,transparent);aspect-ratio:3/2}
.scell i{border-radius:4px;background:color-mix(in srgb,var(--line) 55%,transparent)}
.scell.td{outline:2px solid var(--pc);outline-offset:1px}.scell.fut{opacity:.35}.scell.all{background:color-mix(in srgb,var(--ok) 18%,transparent)}
.scnt{text-align:center;font-weight:900;font-size:16px;font-variant-numeric:tabular-nums}
.slg{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font-size:12px;font-weight:700;color:var(--mut)}
.slg i,.sbt i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sbr{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;padding:6px 0;border-top:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.sbt{font-weight:700;font-size:14px;white-space:nowrap}
.sbb{display:flex;flex-direction:column;gap:3px}
.sbl{display:grid;grid-template-columns:16px 1fr 26px;gap:6px;align-items:center}
.sbl .si{font-size:11px;font-weight:800;color:var(--mut)}.sbl .sn{font-size:13px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.strk{height:10px;border-radius:99px;background:color-mix(in srgb,var(--line) 30%,transparent);overflow:hidden}.strk div{height:100%;border-radius:99px}
.sbl.p1 .strk div{opacity:.45}
.shm{display:flex;flex-direction:column;gap:12px}.shp .srn{margin-bottom:5px}
.shg{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(16,1fr);gap:3px}
.shg i,.slg2 i{display:block;aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--line) 35%,transparent)}
.shg i.fut{opacity:.25}.shg i.td{outline:2px solid var(--pc);outline-offset:0}
.slg2{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:8px}.slg2 i{width:11px;height:11px}
@media(max-width:640px){.scal{grid-template-columns:44px repeat(7,minmax(0,1fr)) 22px;gap:3px}.scell{padding:3px;gap:2px;border-radius:8px}.shero .sbig{font-size:38px}}
/* Speelweergave op de iPad */
body.tablet header,body.tablet #rail,body.tablet #rail2{display:none!important}
body.tablet main{display:block;padding:6px 16px 96px;max-width:none}
body.tablet #stage{width:auto;min-width:0}
body.tablet #playbox{width:max-content;max-width:none}
#topbar{display:none}
body.tablet #topbar{display:flex;align-items:center;gap:12px;margin-top:calc(-1 * env(safe-area-inset-top));padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-left)) 6px;position:sticky;top:0;z-index:30;background:var(--bg)}
#topbar>button{width:44px;height:44px;border-radius:14px;font-size:22px;padding:0;flex:none}
#tbTitle{display:flex;align-items:center;gap:10px;min-width:0}#tbTitle b{display:block;font-size:18px}#tbTitle small{display:block;color:var(--mut);font-size:12px;font-weight:700}
#tbMid{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
body.tablet #time{font-size:22px;padding:6px 12px;border-radius:12px;box-shadow:none}body.tablet #time.hid{font-size:14px}
body.tablet #pbot .pgrp.modes.leeg{display:none}
body.tablet #msg{margin:0;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.tablet #hexstat{flex-direction:row;margin:0;gap:6px}
body.tablet #pbot{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));gap:14px;align-items:center;padding:8px 10px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px var(--sh);z-index:30;max-width:calc(100vw - 20px)}
body.tablet #pbot .pgrp{display:flex;gap:6px;align-items:center}
body.tablet #pbot .pgrp.modes{padding:0 6px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
body.tablet #pbot button{min-height:46px;padding:8px 14px;border-radius:13px;font-size:15px;white-space:nowrap}
body.tablet #pbot #undo span,body.tablet #pbot #redo span{display:none}body.tablet #pbot #undo,body.tablet #pbot #redo{font-size:20px;padding:8px 12px}
body.tablet #pbot #nmode,body.tablet #pbot #pmode,body.tablet #pbot #hexbtns{flex-direction:row}
/* iPad in beide schermstanden: de knoppenbalk blijft links. */
@media (min-width:761px){
body.tablet #pbot{left:max(10px,env(safe-area-inset-left));right:auto;top:calc(50% + 26px);bottom:auto;transform:translateY(-50%);flex-direction:column;align-items:stretch;gap:0;padding:8px;width:128px;box-sizing:border-box;max-height:calc(100vh - 76px);overflow:auto}
body.tablet #pbot .pgrp{flex-direction:column;align-items:stretch;gap:6px;padding:8px 0;border:0!important}
body.tablet #pbot .pgrp:first-child{padding-top:0}body.tablet #pbot .pgrp:last-child{padding-bottom:0}
body.tablet #pbot .pgrp.modes{padding:8px 0}
body.tablet #pbot .pgrp.leeg{display:none}
body.tablet #pbot .pgrp+.pgrp:not(.leeg){border-top:1px solid var(--line)!important}
body.tablet #pbot .pgrp.leeg+.pgrp{border-top:0!important;padding-top:0}
body.tablet #pbot .pgrp.g1{flex-direction:row}
body.tablet #pbot .pgrp.g1 button{flex:1;padding:0;min-height:44px;display:flex;align-items:center;justify-content:center}
body.tablet #pbot #nmode,body.tablet #pbot #pmode,body.tablet #pbot #hexbtns{flex-direction:column;gap:6px;padding:0;margin:0;border:0;background:transparent;box-shadow:none;width:100%;border-radius:0}
body.tablet #pbot button{min-height:48px;padding:6px 8px;font-size:14px;white-space:nowrap;line-height:1.15;text-align:left;justify-content:flex-start;display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box}
body.tablet #stage{margin-left:128px}
body.tablet #pbot #pmode button{font-size:12.5px;padding:6px 6px;gap:4px}
body.tablet #pbot #nmode button,body.tablet #pbot #pmode button{width:100%;border:1px solid var(--line)!important;border-radius:13px}
body.tablet #pbot #nmode button:not(.on),body.tablet #pbot #pmode button:not(.on){background:var(--card);box-shadow:0 3px 0 var(--line)!important}
body.tablet #pbot #nmode button.on,body.tablet #pbot #pmode button.on{border-color:transparent!important}
/* Kleur Nonogram: compacte swatches in plaats van vijf grote verticale knoppen. */
body.tablet #pbot #nmode.ncolor{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%;padding:0}
body.tablet #pbot #nmode.ncolor button{width:100%!important;min-width:0!important;min-height:42px!important;padding:5px!important;justify-content:center!important;text-align:center!important}
body.tablet #pbot #nmode.ncolor .ncb span{display:none}
body.tablet #pbot #nmode.ncolor .ncb i{width:22px;height:22px;border-radius:6px}
body.tablet #pbot #nmode.ncolor #nx{font-size:0}
body.tablet #pbot #nmode.ncolor #nx::after{content:"✕";font-size:20px}
body.tablet main{padding-top:10px;padding-bottom:10px}
}
body.tablet #pbot .pgrp.leeg{display:none}
body.tablet #pbot #undo b,body.tablet #pbot #redo b{width:auto}
#more{display:none}
body.tablet #more.open{display:flex;flex-direction:column;gap:10px;z-index:54!important;position:fixed;top:58px;right:max(12px,env(safe-area-inset-right));width:310px;max-height:calc(100vh - 80px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;z-index:56;box-shadow:0 18px 50px rgba(0,0,0,.3)}
#more .mh{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:6px 4px 0}
#more .mh:first-child{margin-top:0}
#more .mlist{display:flex;flex-direction:column;gap:1px;margin:0 -4px}
#more .mlist button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;justify-content:flex-start;padding:10px 10px;min-height:44px;border:0;border-radius:11px;background:transparent;box-shadow:none;font-size:16px;font-weight:600;color:var(--fg);white-space:nowrap}
#more .mlist button:hover,#more .mlist button:active{background:color-mix(in srgb,var(--line) 35%,transparent)}
#more .mlist button.on{background:color-mix(in srgb,var(--pc) 12%,transparent);color:var(--pc)}
#more .mlist button .ic{width:24px;text-align:center;flex:none;font-size:18px;font-weight:400}
#more .mlist #reset.arm{background:color-mix(in srgb,#d33 14%,transparent);color:#c22}
#more .msep{height:1px;background:var(--line);margin:4px 2px;opacity:.7}
#more #streak{padding:8px 4px 2px;border-top:1px solid var(--line);text-align:left;font-size:14px;color:var(--mut)}
.themeMenu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--line) 24%,var(--card));width:100%}.themeMenu button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:6px 4px;border:0;border-radius:9px;background:transparent;color:var(--mut);box-shadow:none;font-size:15px}.themeMenu button b{font-size:10px;line-height:1.1}.themeMenu button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 4px var(--sh)}.themeMenu button:hover,.themeMenu button:active{transform:none}body.phone #pmp .themeMenu{margin:5px 0;width:100%;box-sizing:border-box}

body.tablet #side{position:fixed;top:58px;right:12px;width:380px;max-height:calc(100vh - 80px);overflow:auto;z-index:55;display:none}body.tablet #side.open{display:block}
#sideX{display:none}body.nieuw #sideX{display:block;float:right;width:36px;height:36px;padding:0;margin:-4px -6px 6px 8px;border-radius:50%;font-size:16px;box-shadow:none}
body.nieuw.home #side.open{display:block;position:fixed;top:20px;right:12px;width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;z-index:60}
/* Hint als paneel rechts */
body.tablet{--hintw:350px;--hintgap:24px}
body.tablet.hintside #stage{margin-right:calc(var(--hintw) + var(--hintgap))}
body.tablet #hint.side{position:fixed!important;top:62px!important;right:max(12px,env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;width:var(--hintw)!important;max-height:calc(100vh - 146px)!important;transform:none!important;overflow:auto;border-radius:20px;border-top:6px solid var(--pc);display:block}
body.tablet #hint.side button:not(.hx){width:100%;padding:12px;margin-top:10px}
/* Telefoon */
body.phone.nieuw #tbHome{padding:4px 10px;font-size:18px;border-radius:999px;box-shadow:none}

/* Subtiele micro-animaties + iOS: geen grijze tap-highlight die bij navigatie blijft hangen. */
html,body,button,a,input,label,select,summary,[role="button"],.tile,.hrow,.hcard{-webkit-tap-highlight-color:transparent}
button,a{-webkit-touch-callout:none}
body.tablet #stage{transition:none}
body.tablet #playbox{transition:none;will-change:auto}
#hint{animation:hintFadeIn .16s ease-out}
#hint.closing{animation:hintFadeOut .12s ease-in forwards}
body.tablet #hint.side{animation:hintSideIn .18s cubic-bezier(.2,.75,.25,1)}
body.tablet #hint.side.closing{animation:hintSideOut .13s ease-in forwards}
body.tablet #more.open,body.tablet #side.open{animation:panelIn .16s cubic-bezier(.2,.75,.25,1)}
#fin:not([hidden]){animation:cardUp .18s cubic-bezier(.2,.75,.25,1)}
#hm:not([hidden]) .hc{animation:cardIn .17s cubic-bezier(.2,.75,.25,1)}
.tile,.hbtn,.hraad,.hlinks button{transition:transform .1s ease,box-shadow .12s ease,background-color .14s ease}
.tile:active,.hbtn:active,.hraad:active{transform:scale(.985)}
#nmode button,#pmode button,#mb,#mz{transition:background-color .14s ease,color .14s ease,box-shadow .14s ease,transform .1s ease}
@keyframes hintFadeIn{from{opacity:0}to{opacity:1}}
@keyframes hintFadeOut{from{opacity:1}to{opacity:0}}
@keyframes hintSideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes hintSideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(10px)}}
@keyframes panelIn{from{opacity:0;transform:translateY(-5px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cardUp{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.99)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes cardIn{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){
 #hint,#hint.closing,body.tablet #hint.side,body.tablet #hint.side.closing,body.tablet #more.open,body.tablet #side.open,#fin:not([hidden]),#hm:not([hidden]) .hc{animation:none!important}
}
body.phone #nvclassic::after{content:"■";font-size:16px}
body.phone #nvcolor::after{content:"🎨";font-size:15px}
body.phone #nmode.ncolor{flex:0 0 auto!important}
body.phone #nmode.ncolor>button{flex:0 0 32px!important;min-width:32px!important;padding:6px 2px!important}
/* Klassiek/Kleur wordt buiten het speelveld gekozen; hier staan alleen invoerstanden. */


/* ===== Gepuzzellig visuele verfijning ===== */
body.nieuw{--page-tone:var(--bg);--page-pattern:none;background-color:var(--page-tone);background-image:none;isolation:isolate;transition:background-color .24s ease}
/* Een echte vaste laag blijft ook in iOS staan wanneer de inhoud scrollt. */
body.nieuw::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--page-pattern);background-repeat:repeat}
:is(body.home,.stylepreview).skin-shared{--page-tone:color-mix(in srgb,#edb994 8%,var(--bg))}
:is(body.home,.stylepreview).skin-peter{--page-tone:color-mix(in srgb,#8eb6c8 9%,var(--bg))}
:is(body.home,.stylepreview).skin-aart{--page-tone:color-mix(in srgb,#efc76f 9%,var(--bg))}
body.nieuw:not(.home)[data-t=star]{--page-tone:color-mix(in srgb,#c97a00 5%,var(--bg))}
body.nieuw:not(.home)[data-t=bin]{--page-tone:color-mix(in srgb,#7a52d6 5%,var(--bg))}
body.nieuw:not(.home)[data-t=nono]{--page-tone:color-mix(in srgb,#0f9d8c 5%,var(--bg))}
body.nieuw:not(.home)[data-t=hex]{--page-tone:color-mix(in srgb,#e8590c 4%,var(--bg))}
body.nieuw:not(.home)[data-t=plus]{--page-tone:color-mix(in srgb,#2b7bd6 4%,var(--bg))}
body.nieuw:not(.home)[data-t=mur]{--page-tone:color-mix(in srgb,#b5483a 4%,var(--bg))}
body.nieuw:not(.home)[data-t=m24],body.nieuw:not(.home)[data-t=kak]{--page-tone:color-mix(in srgb,var(--pc) 4%,var(--bg))}
/* Achtergrondpatronen (gegenereerd): grote losse lijn-icoontjes, licht gedraaid, naadloos; aparte kleur voor donker. */
body.nieuw{background-size:auto!important;background-position:0 0}
:is(body.home,.stylepreview).skin-shared{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M6 10h6a3.2 3.2 0 1 1 6 0h6v6a3.2 3.2 0 1 1 0 6v6h-6a3.2 3.2 0 1 0-6 0H6v-6a3.2 3.2 0 1 0 0-6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Crect x='5' y='5' width='22' height='22' rx='5'/%3E%3Cg fill='%239a6b4f' stroke='none'%3E%3Ccircle cx='11' cy='11' r='1.9'/%3E%3Ccircle cx='11' cy='16' r='1.9'/%3E%3Ccircle cx='11' cy='21' r='1.9'/%3E%3Ccircle cx='21' cy='11' r='1.9'/%3E%3Ccircle cx='21' cy='16' r='1.9'/%3E%3Ccircle cx='21' cy='21' r='1.9'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='5' y='5' width='22' height='22' rx='5'/%3E%3Cg fill='%239a6b4f' stroke='none'%3E%3Ccircle cx='11' cy='11' r='1.9'/%3E%3Ccircle cx='11' cy='16' r='1.9'/%3E%3Ccircle cx='11' cy='21' r='1.9'/%3E%3Ccircle cx='21' cy='11' r='1.9'/%3E%3Ccircle cx='21' cy='16' r='1.9'/%3E%3Ccircle cx='21' cy='21' r='1.9'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%239a6b4f'%3E6%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%239a6b4f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.10'%3E%3Cuse href='%23a' transform='translate(172 -12) rotate(6) scale(1.21)'/%3E%3Cuse href='%23a' transform='translate(172 288) rotate(6) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(204 122) rotate(-23) scale(1.35)'/%3E%3Cuse href='%23a' transform='translate(26 130) rotate(-11) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(326 130) rotate(-11) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(-22 191) rotate(23) scale(1.13)'/%3E%3Cuse href='%23b' transform='translate(278 191) rotate(23) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(35 -15) rotate(9) scale(1.35)'/%3E%3Cuse href='%23c' transform='translate(35 285) rotate(9) scale(1.35)'/%3E%3Cuse href='%23d' transform='translate(130 213) rotate(-22) scale(1.23)'/%3E%3Cuse href='%23a' transform='translate(115 136) rotate(8) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(-11 47) rotate(-19) scale(1.26)'/%3E%3Cuse href='%23d' transform='translate(289 47) rotate(-19) scale(1.26)'/%3E%3Cuse href='%23a' transform='translate(82 62) rotate(17) scale(0.98)'/%3E%3Cuse href='%23d' transform='translate(245 266) rotate(1) scale(1.14)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-peter{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M2 23V11h19l7 7v5z'/%3E%3Cpath d='M5 14h4v4H5zM12 14h4v4h-4z'/%3E%3Cpath d='M21 11v7h7'/%3E%3Ccircle cx='8' cy='25' r='2.4'/%3E%3Ccircle cx='22' cy='25' r='2.4'/%3E%3Cpath d='M1 28h30'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M12 3 7 29M20 3l5 26M10.8 9h10.4M9.7 15h12.6M8.6 21h14.8M7.5 27h17'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M16 9v7l5 3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 30V17'/%3E%3Crect x='11' y='3' width='10' height='15' rx='5'/%3E%3Ccircle cx='16' cy='8' r='2'/%3E%3Ccircle cx='16' cy='13.5' r='2'/%3E%3Cpath d='M11 30h10'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='8' y='4' width='16' height='22' rx='5'/%3E%3Cpath d='M11 9h10v6H11z'/%3E%3Ccircle cx='12' cy='20' r='1.5'/%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Cpath d='M10 30l2-4M22 30l-2-4'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%234f7a8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.10'%3E%3Cuse href='%23a' transform='translate(-4 76) rotate(22) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(316 76) rotate(22) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(185 228) rotate(2) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(248 129) rotate(6) scale(1.30)'/%3E%3Cuse href='%23c' transform='translate(102 234) rotate(22) scale(1.25)'/%3E%3Cuse href='%23d' transform='translate(243 24) rotate(14) scale(1.11)'/%3E%3Cuse href='%23d' transform='translate(243 344) rotate(14) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(-20 -29) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(-20 291) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(300 -29) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(300 291) rotate(15) scale(1.09)'/%3E%3Cuse href='%23a' transform='translate(156 120) rotate(6) scale(1.06)'/%3E%3Cuse href='%23c' transform='translate(269 219) rotate(4) scale(1.23)'/%3E%3Cuse href='%23e' transform='translate(57 152) rotate(-12) scale(1.00)'/%3E%3Cuse href='%23d' transform='translate(62 -14) rotate(3) scale(1.18)'/%3E%3Cuse href='%23d' transform='translate(62 306) rotate(3) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(104 55) rotate(-1) scale(1.18)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-aart{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3Cg fill='%2394762d' stroke='none'%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3Ccircle cx='16' cy='22.5' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='7' y='3' width='18' height='26' rx='3'/%3E%3Crect x='10' y='6' width='12' height='6' rx='1'/%3E%3Cg fill='%2394762d' stroke='none'%3E%3Ccircle cx='12' cy='16.5' r='1.4'/%3E%3Ccircle cx='16' cy='16.5' r='1.4'/%3E%3Ccircle cx='20' cy='16.5' r='1.4'/%3E%3Ccircle cx='12' cy='21' r='1.4'/%3E%3Ccircle cx='16' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Ccircle cx='12' cy='25.5' r='1.4'/%3E%3Ccircle cx='16' cy='25.5' r='1.4'/%3E%3Ccircle cx='20' cy='25.5' r='1.4'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%2394762d'%3E6%3C/text%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M7 12.5h18M7 19.5h18'/%3E%3C/g%3E%3Cg id='g' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='h' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='15' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%2394762d'%3E3+3%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%2394762d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.10'%3E%3Cuse href='%23a' transform='translate(113 253) rotate(16) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(290 5) rotate(-16) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(290 325) rotate(-16) scale(1.02)'/%3E%3Cuse href='%23c' transform='translate(227 145) rotate(-6) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(219 31) rotate(7) scale(1.21)'/%3E%3Cuse href='%23d' transform='translate(90 25) rotate(16) scale(1.07)'/%3E%3Cuse href='%23d' transform='translate(90 345) rotate(16) scale(1.07)'/%3E%3Cuse href='%23b' transform='translate(116 129) rotate(15) scale(1.00)'/%3E%3Cuse href='%23e' transform='translate(284 189) rotate(15) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(24 112) rotate(-13) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(344 112) rotate(-13) scale(1.06)'/%3E%3Cuse href='%23c' transform='translate(225 267) rotate(2) scale(1.15)'/%3E%3Cuse href='%23f' transform='translate(35 284) rotate(8) scale(1.08)'/%3E%3Cuse href='%23g' transform='translate(167 186) rotate(-6) scale(1.15)'/%3E%3Cuse href='%23h' transform='translate(64 187) rotate(3) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E")}
body.nieuw:not(.home)[data-t=star]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='290' viewBox='0 0 290 290'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 9l2.2 4.6 5 .6-3.7 3.4 1 4.9L16 20l-4.5 2.5 1-4.9-3.7-3.4 5-.6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3.5 7.6 8.2.9-6.1 5.6 1.7 8.1L16 22.1 8.7 26.2l1.7-8.1-6.1-5.6 8.2-.9z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23a8650a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Cuse href='%23a' transform='translate(146 134) rotate(7) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(80 -19) rotate(11) scale(1.30)'/%3E%3Cuse href='%23a' transform='translate(80 271) rotate(11) scale(1.30)'/%3E%3Cuse href='%23b' transform='translate(-13 35) rotate(5) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(277 35) rotate(5) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(-27 208) rotate(-12) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(263 208) rotate(-12) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(-11 117) rotate(14) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(279 117) rotate(14) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(172 248) rotate(-18) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(119 50) rotate(19) scale(1.24)'/%3E%3Cuse href='%23b' transform='translate(194 65) rotate(3) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(199 179) rotate(-23) scale(1.15)'/%3E%3Cuse href='%23a' transform='translate(67 140) rotate(-14) scale(1.17)'/%3E%3Cuse href='%23b' transform='translate(47 73) rotate(8) scale(1.33)'/%3E%3C/g%3E%3C/svg%3E")}
body.nieuw:not(.home)[data-t=bin]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='8'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%236a4fb8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Cuse href='%23a' transform='translate(179 10) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23a' transform='translate(179 290) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(202 78) rotate(0) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(77 -29) rotate(-2) scale(1.28)'/%3E%3Cuse href='%23b' transform='translate(77 251) rotate(-2) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(135 175) rotate(16) scale(1.04)'/%3E%3Cuse href='%23b' transform='translate(94 120) rotate(-17) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(-23 114) rotate(10) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(257 114) rotate(10) scale(1.21)'/%3E%3Cuse href='%23a' transform='translate(235 235) rotate(-15) scale(1.12)'/%3E%3Cuse href='%23b' transform='translate(-9 50) rotate(23) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(271 50) rotate(23) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(60 67) rotate(17) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(55 190) rotate(-23) scale(1.30)'/%3E%3Cuse href='%23a' transform='translate(197 156) rotate(15) scale(1.01)'/%3E%3Cuse href='%23b' transform='translate(119 30) rotate(-3) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E")}
body.nieuw:not(.home)[data-t=nono]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cg fill='%2317806f' stroke='none' fill-opacity='.55'%3E%3Crect x='4' y='12' width='7' height='7' rx='1'/%3E%3Crect x='12.5' y='12' width='7' height='7' rx='1'/%3E%3Crect x='21' y='12' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M5 5h22v22H5zM12.3 5v22M19.6 5v22M5 12.3h22M5 19.6h22'/%3E%3Cg fill='%2317806f' stroke='none' fill-opacity='.55'%3E%3Crect x='5' y='5' width='7.3' height='7.3'/%3E%3Crect x='19.6' y='12.3' width='7.4' height='7.3'/%3E%3Crect x='12.3' y='19.6' width='7.3' height='7.4'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%2317806f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Cuse href='%23a' transform='translate(152 138) rotate(4) scale(1.32)'/%3E%3Cuse href='%23b' transform='translate(83 -20) rotate(-15) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(83 280) rotate(-15) scale(1.21)'/%3E%3Cuse href='%23c' transform='translate(-13 36) rotate(-21) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(287 36) rotate(-21) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(-28 215) rotate(-15) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(272 215) rotate(-15) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(-12 121) rotate(-20) scale(1.17)'/%3E%3Cuse href='%23a' transform='translate(288 121) rotate(-20) scale(1.17)'/%3E%3Cuse href='%23c' transform='translate(178 257) rotate(-23) scale(1.35)'/%3E%3Cuse href='%23a' transform='translate(123 52) rotate(7) scale(1.24)'/%3E%3Cuse href='%23a' transform='translate(201 67) rotate(-3) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(69 145) rotate(23) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(107 209) rotate(-12) scale(1.08)'/%3E%3C/g%3E%3C/svg%3E")}
body.nieuw:not(.home)[data-t=hex]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='290' viewBox='0 0 290 290'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l10.4 6v12L16 28 5.6 22V10z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l10.4 6v12L16 28 5.6 22V10z' fill='%23c2531a' fill-opacity='.45'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23c2531a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Cuse href='%23a' transform='translate(-22 8) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(-22 298) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(268 8) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(268 298) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(138 80) rotate(6) scale(1.34)'/%3E%3Cuse href='%23a' transform='translate(159 152) rotate(-9) scale(1.17)'/%3E%3Cuse href='%23b' transform='translate(-23 224) rotate(18) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(267 224) rotate(18) scale(1.09)'/%3E%3Cuse href='%23a' transform='translate(183 27) rotate(-21) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(183 317) rotate(-21) scale(1.00)'/%3E%3Cuse href='%23b' transform='translate(228 162) rotate(12) scale(1.13)'/%3E%3Cuse href='%23a' transform='translate(114 5) rotate(-4) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(114 295) rotate(-4) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(168 233) rotate(-11) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(62 140) rotate(14) scale(1.31)'/%3E%3Cuse href='%23a' transform='translate(50 -24) rotate(-21) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(50 266) rotate(-21) scale(1.18)'/%3E%3Cuse href='%23b' transform='translate(98 206) rotate(-11) scale(1.12)'/%3E%3C/g%3E%3C/svg%3E")}
body.nieuw:not(.home)[data-t=plus]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%232c68b5'%3E7%3C/text%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%232c68b5'%3E2%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%232c68b5'%3E9%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%232c68b5'%3E3%3C/text%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%232c68b5'%3E8%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='g' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%232c68b5'%3E5%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%232c68b5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Cuse href='%23a' transform='translate(75 247) rotate(16) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(191 145) rotate(19) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(212 20) rotate(-18) scale(1.23)'/%3E%3Cuse href='%23c' transform='translate(212 320) rotate(-18) scale(1.23)'/%3E%3Cuse href='%23d' transform='translate(135 20) rotate(17) scale(1.17)'/%3E%3Cuse href='%23d' transform='translate(135 320) rotate(17) scale(1.17)'/%3E%3Cuse href='%23d' transform='translate(-30 68) rotate(-14) scale(1.23)'/%3E%3Cuse href='%23d' transform='translate(270 68) rotate(-14) scale(1.23)'/%3E%3Cuse href='%23e' transform='translate(228 233) rotate(-0) scale(0.96)'/%3E%3Cuse href='%23f' transform='translate(62 26) rotate(-3) scale(1.00)'/%3E%3Cuse href='%23f' transform='translate(62 326) rotate(-3) scale(1.00)'/%3E%3Cuse href='%23g' transform='translate(107 92) rotate(-17) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(-6 200) rotate(-12) scale(1.29)'/%3E%3Cuse href='%23a' transform='translate(294 200) rotate(-12) scale(1.29)'/%3E%3Cuse href='%23b' transform='translate(19 131) rotate(7) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(319 131) rotate(7) scale(1.11)'/%3E%3Cuse href='%23c' transform='translate(118 174) rotate(-15) scale(1.17)'/%3E%3C/g%3E%3C/svg%3E")}
body.nieuw:not(.home)[data-t=mur]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='310' viewBox='0 0 310 310'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='13' cy='13' r='8'/%3E%3Cpath d='M19 19l8 8'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cg fill='%239b4236' stroke='none' fill-opacity='.6'%3E%3Cellipse cx='11' cy='10' rx='3.2' ry='5'/%3E%3Cellipse cx='20' cy='21' rx='3.2' ry='5'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='9' cy='16' r='5'/%3E%3Cpath d='M14 16h14M24 16v5M28 16v4'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='24' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%239b4236'%3E?%3C/text%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='9' y='4' width='14' height='24' rx='1.5'/%3E%3Ccircle cx='19.5' cy='16.5' r='1.3' fill='%239b4236' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%239b4236' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Cuse href='%23a' transform='translate(-5 273) rotate(19) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(305 273) rotate(19) scale(1.16)'/%3E%3Cuse href='%23b' transform='translate(96 -6) rotate(-5) scale(1.22)'/%3E%3Cuse href='%23b' transform='translate(96 304) rotate(-5) scale(1.22)'/%3E%3Cuse href='%23c' transform='translate(-29 126) rotate(-8) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(281 126) rotate(-8) scale(1.10)'/%3E%3Cuse href='%23d' transform='translate(215 83) rotate(0) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(87 95) rotate(1) scale(1.00)'/%3E%3Cuse href='%23e' transform='translate(163 178) rotate(6) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(22 53) rotate(22) scale(1.29)'/%3E%3Cuse href='%23a' transform='translate(332 53) rotate(22) scale(1.29)'/%3E%3Cuse href='%23c' transform='translate(28 173) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23c' transform='translate(338 173) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23d' transform='translate(210 243) rotate(-13) scale(1.24)'/%3E%3Cuse href='%23d' transform='translate(93 207) rotate(-13) scale(1.03)'/%3E%3Cuse href='%23a' transform='translate(235 4) rotate(-9) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(235 314) rotate(-9) scale(1.00)'/%3E%3C/g%3E%3C/svg%3E")}
body.nieuw:not(.home)[data-t=m24],body.nieuw:not(.home)[data-t=kak]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3Cg fill='%237a5bb0' stroke='none'%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3Ccircle cx='16' cy='22.5' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%237a5bb0'%3E6%3C/text%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M7 12.5h18M7 19.5h18'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Crect x='7' y='3' width='18' height='26' rx='3'/%3E%3Crect x='10' y='6' width='12' height='6' rx='1'/%3E%3Cg fill='%237a5bb0' stroke='none'%3E%3Ccircle cx='12' cy='16.5' r='1.4'/%3E%3Ccircle cx='16' cy='16.5' r='1.4'/%3E%3Ccircle cx='20' cy='16.5' r='1.4'/%3E%3Ccircle cx='12' cy='21' r='1.4'/%3E%3Ccircle cx='16' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Ccircle cx='12' cy='25.5' r='1.4'/%3E%3Ccircle cx='16' cy='25.5' r='1.4'/%3E%3Ccircle cx='20' cy='25.5' r='1.4'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%237a5bb0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Cuse href='%23a' transform='translate(169 105) rotate(-12) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(250 83) rotate(-15) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(-4 189) rotate(-22) scale(1.03)'/%3E%3Cuse href='%23c' transform='translate(296 189) rotate(-22) scale(1.03)'/%3E%3Cuse href='%23d' transform='translate(156 6) rotate(-9) scale(1.12)'/%3E%3Cuse href='%23d' transform='translate(156 306) rotate(-9) scale(1.12)'/%3E%3Cuse href='%23a' transform='translate(160 226) rotate(9) scale(0.97)'/%3E%3Cuse href='%23d' transform='translate(37 90) rotate(16) scale(1.20)'/%3E%3Cuse href='%23c' transform='translate(56 -22) rotate(4) scale(1.33)'/%3E%3Cuse href='%23c' transform='translate(56 278) rotate(4) scale(1.33)'/%3E%3Cuse href='%23e' transform='translate(240 -11) rotate(20) scale(0.99)'/%3E%3Cuse href='%23e' transform='translate(240 289) rotate(20) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(89 180) rotate(18) scale(1.33)'/%3E%3Cuse href='%23f' transform='translate(221 184) rotate(-9) scale(1.31)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] :is(body.home,.stylepreview).skin-shared{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M6 10h6a3.2 3.2 0 1 1 6 0h6v6a3.2 3.2 0 1 1 0 6v6h-6a3.2 3.2 0 1 0-6 0H6v-6a3.2 3.2 0 1 0 0-6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Crect x='5' y='5' width='22' height='22' rx='5'/%3E%3Cg fill='%23e8c9b4' stroke='none'%3E%3Ccircle cx='11' cy='11' r='1.9'/%3E%3Ccircle cx='11' cy='16' r='1.9'/%3E%3Ccircle cx='11' cy='21' r='1.9'/%3E%3Ccircle cx='21' cy='11' r='1.9'/%3E%3Ccircle cx='21' cy='16' r='1.9'/%3E%3Ccircle cx='21' cy='21' r='1.9'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='5' y='5' width='22' height='22' rx='5'/%3E%3Cg fill='%23e8c9b4' stroke='none'%3E%3Ccircle cx='11' cy='11' r='1.9'/%3E%3Ccircle cx='11' cy='16' r='1.9'/%3E%3Ccircle cx='11' cy='21' r='1.9'/%3E%3Ccircle cx='21' cy='11' r='1.9'/%3E%3Ccircle cx='21' cy='16' r='1.9'/%3E%3Ccircle cx='21' cy='21' r='1.9'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23e8c9b4'%3E6%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23e8c9b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(172 -12) rotate(6) scale(1.21)'/%3E%3Cuse href='%23a' transform='translate(172 288) rotate(6) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(204 122) rotate(-23) scale(1.35)'/%3E%3Cuse href='%23a' transform='translate(26 130) rotate(-11) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(326 130) rotate(-11) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(-22 191) rotate(23) scale(1.13)'/%3E%3Cuse href='%23b' transform='translate(278 191) rotate(23) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(35 -15) rotate(9) scale(1.35)'/%3E%3Cuse href='%23c' transform='translate(35 285) rotate(9) scale(1.35)'/%3E%3Cuse href='%23d' transform='translate(130 213) rotate(-22) scale(1.23)'/%3E%3Cuse href='%23a' transform='translate(115 136) rotate(8) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(-11 47) rotate(-19) scale(1.26)'/%3E%3Cuse href='%23d' transform='translate(289 47) rotate(-19) scale(1.26)'/%3E%3Cuse href='%23a' transform='translate(82 62) rotate(17) scale(0.98)'/%3E%3Cuse href='%23d' transform='translate(245 266) rotate(1) scale(1.14)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] :is(body.home,.stylepreview).skin-peter{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M2 23V11h19l7 7v5z'/%3E%3Cpath d='M5 14h4v4H5zM12 14h4v4h-4z'/%3E%3Cpath d='M21 11v7h7'/%3E%3Ccircle cx='8' cy='25' r='2.4'/%3E%3Ccircle cx='22' cy='25' r='2.4'/%3E%3Cpath d='M1 28h30'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M12 3 7 29M20 3l5 26M10.8 9h10.4M9.7 15h12.6M8.6 21h14.8M7.5 27h17'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M16 9v7l5 3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 30V17'/%3E%3Crect x='11' y='3' width='10' height='15' rx='5'/%3E%3Ccircle cx='16' cy='8' r='2'/%3E%3Ccircle cx='16' cy='13.5' r='2'/%3E%3Cpath d='M11 30h10'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='8' y='4' width='16' height='22' rx='5'/%3E%3Cpath d='M11 9h10v6H11z'/%3E%3Ccircle cx='12' cy='20' r='1.5'/%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Cpath d='M10 30l2-4M22 30l-2-4'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23b9d6e2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(-4 76) rotate(22) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(316 76) rotate(22) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(185 228) rotate(2) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(248 129) rotate(6) scale(1.30)'/%3E%3Cuse href='%23c' transform='translate(102 234) rotate(22) scale(1.25)'/%3E%3Cuse href='%23d' transform='translate(243 24) rotate(14) scale(1.11)'/%3E%3Cuse href='%23d' transform='translate(243 344) rotate(14) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(-20 -29) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(-20 291) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(300 -29) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(300 291) rotate(15) scale(1.09)'/%3E%3Cuse href='%23a' transform='translate(156 120) rotate(6) scale(1.06)'/%3E%3Cuse href='%23c' transform='translate(269 219) rotate(4) scale(1.23)'/%3E%3Cuse href='%23e' transform='translate(57 152) rotate(-12) scale(1.00)'/%3E%3Cuse href='%23d' transform='translate(62 -14) rotate(3) scale(1.18)'/%3E%3Cuse href='%23d' transform='translate(62 306) rotate(3) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(104 55) rotate(-1) scale(1.18)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] :is(body.home,.stylepreview).skin-aart{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3Cg fill='%23ecd9a6' stroke='none'%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3Ccircle cx='16' cy='22.5' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='7' y='3' width='18' height='26' rx='3'/%3E%3Crect x='10' y='6' width='12' height='6' rx='1'/%3E%3Cg fill='%23ecd9a6' stroke='none'%3E%3Ccircle cx='12' cy='16.5' r='1.4'/%3E%3Ccircle cx='16' cy='16.5' r='1.4'/%3E%3Ccircle cx='20' cy='16.5' r='1.4'/%3E%3Ccircle cx='12' cy='21' r='1.4'/%3E%3Ccircle cx='16' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Ccircle cx='12' cy='25.5' r='1.4'/%3E%3Ccircle cx='16' cy='25.5' r='1.4'/%3E%3Ccircle cx='20' cy='25.5' r='1.4'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23ecd9a6'%3E6%3C/text%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M7 12.5h18M7 19.5h18'/%3E%3C/g%3E%3Cg id='g' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='h' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='15' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23ecd9a6'%3E3+3%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23ecd9a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(113 253) rotate(16) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(290 5) rotate(-16) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(290 325) rotate(-16) scale(1.02)'/%3E%3Cuse href='%23c' transform='translate(227 145) rotate(-6) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(219 31) rotate(7) scale(1.21)'/%3E%3Cuse href='%23d' transform='translate(90 25) rotate(16) scale(1.07)'/%3E%3Cuse href='%23d' transform='translate(90 345) rotate(16) scale(1.07)'/%3E%3Cuse href='%23b' transform='translate(116 129) rotate(15) scale(1.00)'/%3E%3Cuse href='%23e' transform='translate(284 189) rotate(15) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(24 112) rotate(-13) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(344 112) rotate(-13) scale(1.06)'/%3E%3Cuse href='%23c' transform='translate(225 267) rotate(2) scale(1.15)'/%3E%3Cuse href='%23f' transform='translate(35 284) rotate(8) scale(1.08)'/%3E%3Cuse href='%23g' transform='translate(167 186) rotate(-6) scale(1.15)'/%3E%3Cuse href='%23h' transform='translate(64 187) rotate(3) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] body.nieuw:not(.home)[data-t=star]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='290' viewBox='0 0 290 290'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 9l2.2 4.6 5 .6-3.7 3.4 1 4.9L16 20l-4.5 2.5 1-4.9-3.7-3.4 5-.6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3.5 7.6 8.2.9-6.1 5.6 1.7 8.1L16 22.1 8.7 26.2l1.7-8.1-6.1-5.6 8.2-.9z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f0cf98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(146 134) rotate(7) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(80 -19) rotate(11) scale(1.30)'/%3E%3Cuse href='%23a' transform='translate(80 271) rotate(11) scale(1.30)'/%3E%3Cuse href='%23b' transform='translate(-13 35) rotate(5) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(277 35) rotate(5) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(-27 208) rotate(-12) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(263 208) rotate(-12) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(-11 117) rotate(14) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(279 117) rotate(14) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(172 248) rotate(-18) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(119 50) rotate(19) scale(1.24)'/%3E%3Cuse href='%23b' transform='translate(194 65) rotate(3) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(199 179) rotate(-23) scale(1.15)'/%3E%3Cuse href='%23a' transform='translate(67 140) rotate(-14) scale(1.17)'/%3E%3Cuse href='%23b' transform='translate(47 73) rotate(8) scale(1.33)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] body.nieuw:not(.home)[data-t=bin]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='8'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23cbbcf2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(179 10) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23a' transform='translate(179 290) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(202 78) rotate(0) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(77 -29) rotate(-2) scale(1.28)'/%3E%3Cuse href='%23b' transform='translate(77 251) rotate(-2) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(135 175) rotate(16) scale(1.04)'/%3E%3Cuse href='%23b' transform='translate(94 120) rotate(-17) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(-23 114) rotate(10) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(257 114) rotate(10) scale(1.21)'/%3E%3Cuse href='%23a' transform='translate(235 235) rotate(-15) scale(1.12)'/%3E%3Cuse href='%23b' transform='translate(-9 50) rotate(23) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(271 50) rotate(23) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(60 67) rotate(17) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(55 190) rotate(-23) scale(1.30)'/%3E%3Cuse href='%23a' transform='translate(197 156) rotate(15) scale(1.01)'/%3E%3Cuse href='%23b' transform='translate(119 30) rotate(-3) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] body.nieuw:not(.home)[data-t=nono]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cg fill='%23a9e3d9' stroke='none' fill-opacity='.55'%3E%3Crect x='4' y='12' width='7' height='7' rx='1'/%3E%3Crect x='12.5' y='12' width='7' height='7' rx='1'/%3E%3Crect x='21' y='12' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M5 5h22v22H5zM12.3 5v22M19.6 5v22M5 12.3h22M5 19.6h22'/%3E%3Cg fill='%23a9e3d9' stroke='none' fill-opacity='.55'%3E%3Crect x='5' y='5' width='7.3' height='7.3'/%3E%3Crect x='19.6' y='12.3' width='7.4' height='7.3'/%3E%3Crect x='12.3' y='19.6' width='7.3' height='7.4'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23a9e3d9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(152 138) rotate(4) scale(1.32)'/%3E%3Cuse href='%23b' transform='translate(83 -20) rotate(-15) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(83 280) rotate(-15) scale(1.21)'/%3E%3Cuse href='%23c' transform='translate(-13 36) rotate(-21) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(287 36) rotate(-21) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(-28 215) rotate(-15) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(272 215) rotate(-15) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(-12 121) rotate(-20) scale(1.17)'/%3E%3Cuse href='%23a' transform='translate(288 121) rotate(-20) scale(1.17)'/%3E%3Cuse href='%23c' transform='translate(178 257) rotate(-23) scale(1.35)'/%3E%3Cuse href='%23a' transform='translate(123 52) rotate(7) scale(1.24)'/%3E%3Cuse href='%23a' transform='translate(201 67) rotate(-3) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(69 145) rotate(23) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(107 209) rotate(-12) scale(1.08)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] body.nieuw:not(.home)[data-t=hex]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='290' viewBox='0 0 290 290'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l10.4 6v12L16 28 5.6 22V10z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l10.4 6v12L16 28 5.6 22V10z' fill='%23f4c19f' fill-opacity='.45'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f4c19f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(-22 8) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(-22 298) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(268 8) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(268 298) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(138 80) rotate(6) scale(1.34)'/%3E%3Cuse href='%23a' transform='translate(159 152) rotate(-9) scale(1.17)'/%3E%3Cuse href='%23b' transform='translate(-23 224) rotate(18) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(267 224) rotate(18) scale(1.09)'/%3E%3Cuse href='%23a' transform='translate(183 27) rotate(-21) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(183 317) rotate(-21) scale(1.00)'/%3E%3Cuse href='%23b' transform='translate(228 162) rotate(12) scale(1.13)'/%3E%3Cuse href='%23a' transform='translate(114 5) rotate(-4) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(114 295) rotate(-4) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(168 233) rotate(-11) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(62 140) rotate(14) scale(1.31)'/%3E%3Cuse href='%23a' transform='translate(50 -24) rotate(-21) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(50 266) rotate(-21) scale(1.18)'/%3E%3Cuse href='%23b' transform='translate(98 206) rotate(-11) scale(1.12)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] body.nieuw:not(.home)[data-t=plus]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E7%3C/text%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E2%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E9%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E3%3C/text%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E8%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='g' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E5%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23b4cff2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(75 247) rotate(16) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(191 145) rotate(19) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(212 20) rotate(-18) scale(1.23)'/%3E%3Cuse href='%23c' transform='translate(212 320) rotate(-18) scale(1.23)'/%3E%3Cuse href='%23d' transform='translate(135 20) rotate(17) scale(1.17)'/%3E%3Cuse href='%23d' transform='translate(135 320) rotate(17) scale(1.17)'/%3E%3Cuse href='%23d' transform='translate(-30 68) rotate(-14) scale(1.23)'/%3E%3Cuse href='%23d' transform='translate(270 68) rotate(-14) scale(1.23)'/%3E%3Cuse href='%23e' transform='translate(228 233) rotate(-0) scale(0.96)'/%3E%3Cuse href='%23f' transform='translate(62 26) rotate(-3) scale(1.00)'/%3E%3Cuse href='%23f' transform='translate(62 326) rotate(-3) scale(1.00)'/%3E%3Cuse href='%23g' transform='translate(107 92) rotate(-17) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(-6 200) rotate(-12) scale(1.29)'/%3E%3Cuse href='%23a' transform='translate(294 200) rotate(-12) scale(1.29)'/%3E%3Cuse href='%23b' transform='translate(19 131) rotate(7) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(319 131) rotate(7) scale(1.11)'/%3E%3Cuse href='%23c' transform='translate(118 174) rotate(-15) scale(1.17)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] body.nieuw:not(.home)[data-t=mur]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='310' viewBox='0 0 310 310'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='13' cy='13' r='8'/%3E%3Cpath d='M19 19l8 8'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cg fill='%23ecbcb4' stroke='none' fill-opacity='.6'%3E%3Cellipse cx='11' cy='10' rx='3.2' ry='5'/%3E%3Cellipse cx='20' cy='21' rx='3.2' ry='5'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='9' cy='16' r='5'/%3E%3Cpath d='M14 16h14M24 16v5M28 16v4'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='24' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23ecbcb4'%3E?%3C/text%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='9' y='4' width='14' height='24' rx='1.5'/%3E%3Ccircle cx='19.5' cy='16.5' r='1.3' fill='%23ecbcb4' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23ecbcb4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(-5 273) rotate(19) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(305 273) rotate(19) scale(1.16)'/%3E%3Cuse href='%23b' transform='translate(96 -6) rotate(-5) scale(1.22)'/%3E%3Cuse href='%23b' transform='translate(96 304) rotate(-5) scale(1.22)'/%3E%3Cuse href='%23c' transform='translate(-29 126) rotate(-8) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(281 126) rotate(-8) scale(1.10)'/%3E%3Cuse href='%23d' transform='translate(215 83) rotate(0) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(87 95) rotate(1) scale(1.00)'/%3E%3Cuse href='%23e' transform='translate(163 178) rotate(6) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(22 53) rotate(22) scale(1.29)'/%3E%3Cuse href='%23a' transform='translate(332 53) rotate(22) scale(1.29)'/%3E%3Cuse href='%23c' transform='translate(28 173) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23c' transform='translate(338 173) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23d' transform='translate(210 243) rotate(-13) scale(1.24)'/%3E%3Cuse href='%23d' transform='translate(93 207) rotate(-13) scale(1.03)'/%3E%3Cuse href='%23a' transform='translate(235 4) rotate(-9) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(235 314) rotate(-9) scale(1.00)'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=dark] body.nieuw:not(.home)[data-t=m24],:root[data-theme=dark] body.nieuw:not(.home)[data-t=kak]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3Cg fill='%23d4c6f0' stroke='none'%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3Ccircle cx='16' cy='22.5' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23d4c6f0'%3E6%3C/text%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M7 12.5h18M7 19.5h18'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Crect x='7' y='3' width='18' height='26' rx='3'/%3E%3Crect x='10' y='6' width='12' height='6' rx='1'/%3E%3Cg fill='%23d4c6f0' stroke='none'%3E%3Ccircle cx='12' cy='16.5' r='1.4'/%3E%3Ccircle cx='16' cy='16.5' r='1.4'/%3E%3Ccircle cx='20' cy='16.5' r='1.4'/%3E%3Ccircle cx='12' cy='21' r='1.4'/%3E%3Ccircle cx='16' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Ccircle cx='12' cy='25.5' r='1.4'/%3E%3Ccircle cx='16' cy='25.5' r='1.4'/%3E%3Ccircle cx='20' cy='25.5' r='1.4'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23d4c6f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(169 105) rotate(-12) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(250 83) rotate(-15) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(-4 189) rotate(-22) scale(1.03)'/%3E%3Cuse href='%23c' transform='translate(296 189) rotate(-22) scale(1.03)'/%3E%3Cuse href='%23d' transform='translate(156 6) rotate(-9) scale(1.12)'/%3E%3Cuse href='%23d' transform='translate(156 306) rotate(-9) scale(1.12)'/%3E%3Cuse href='%23a' transform='translate(160 226) rotate(9) scale(0.97)'/%3E%3Cuse href='%23d' transform='translate(37 90) rotate(16) scale(1.20)'/%3E%3Cuse href='%23c' transform='translate(56 -22) rotate(4) scale(1.33)'/%3E%3Cuse href='%23c' transform='translate(56 278) rotate(4) scale(1.33)'/%3E%3Cuse href='%23e' transform='translate(240 -11) rotate(20) scale(0.99)'/%3E%3Cuse href='%23e' transform='translate(240 289) rotate(20) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(89 180) rotate(18) scale(1.33)'/%3E%3Cuse href='%23f' transform='translate(221 184) rotate(-9) scale(1.31)'/%3E%3C/g%3E%3C/svg%3E")}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) :is(body.home,.stylepreview).skin-shared{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M6 10h6a3.2 3.2 0 1 1 6 0h6v6a3.2 3.2 0 1 1 0 6v6h-6a3.2 3.2 0 1 0-6 0H6v-6a3.2 3.2 0 1 0 0-6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Crect x='5' y='5' width='22' height='22' rx='5'/%3E%3Cg fill='%23e8c9b4' stroke='none'%3E%3Ccircle cx='11' cy='11' r='1.9'/%3E%3Ccircle cx='11' cy='16' r='1.9'/%3E%3Ccircle cx='11' cy='21' r='1.9'/%3E%3Ccircle cx='21' cy='11' r='1.9'/%3E%3Ccircle cx='21' cy='16' r='1.9'/%3E%3Ccircle cx='21' cy='21' r='1.9'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='5' y='5' width='22' height='22' rx='5'/%3E%3Cg fill='%23e8c9b4' stroke='none'%3E%3Ccircle cx='11' cy='11' r='1.9'/%3E%3Ccircle cx='11' cy='16' r='1.9'/%3E%3Ccircle cx='11' cy='21' r='1.9'/%3E%3Ccircle cx='21' cy='11' r='1.9'/%3E%3Ccircle cx='21' cy='16' r='1.9'/%3E%3Ccircle cx='21' cy='21' r='1.9'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23e8c9b4'%3E6%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23e8c9b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(172 -12) rotate(6) scale(1.21)'/%3E%3Cuse href='%23a' transform='translate(172 288) rotate(6) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(204 122) rotate(-23) scale(1.35)'/%3E%3Cuse href='%23a' transform='translate(26 130) rotate(-11) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(326 130) rotate(-11) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(-22 191) rotate(23) scale(1.13)'/%3E%3Cuse href='%23b' transform='translate(278 191) rotate(23) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(35 -15) rotate(9) scale(1.35)'/%3E%3Cuse href='%23c' transform='translate(35 285) rotate(9) scale(1.35)'/%3E%3Cuse href='%23d' transform='translate(130 213) rotate(-22) scale(1.23)'/%3E%3Cuse href='%23a' transform='translate(115 136) rotate(8) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(-11 47) rotate(-19) scale(1.26)'/%3E%3Cuse href='%23d' transform='translate(289 47) rotate(-19) scale(1.26)'/%3E%3Cuse href='%23a' transform='translate(82 62) rotate(17) scale(0.98)'/%3E%3Cuse href='%23d' transform='translate(245 266) rotate(1) scale(1.14)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) :is(body.home,.stylepreview).skin-peter{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M2 23V11h19l7 7v5z'/%3E%3Cpath d='M5 14h4v4H5zM12 14h4v4h-4z'/%3E%3Cpath d='M21 11v7h7'/%3E%3Ccircle cx='8' cy='25' r='2.4'/%3E%3Ccircle cx='22' cy='25' r='2.4'/%3E%3Cpath d='M1 28h30'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M12 3 7 29M20 3l5 26M10.8 9h10.4M9.7 15h12.6M8.6 21h14.8M7.5 27h17'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M16 9v7l5 3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 30V17'/%3E%3Crect x='11' y='3' width='10' height='15' rx='5'/%3E%3Ccircle cx='16' cy='8' r='2'/%3E%3Ccircle cx='16' cy='13.5' r='2'/%3E%3Cpath d='M11 30h10'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='8' y='4' width='16' height='22' rx='5'/%3E%3Cpath d='M11 9h10v6H11z'/%3E%3Ccircle cx='12' cy='20' r='1.5'/%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Cpath d='M10 30l2-4M22 30l-2-4'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23b9d6e2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(-4 76) rotate(22) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(316 76) rotate(22) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(185 228) rotate(2) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(248 129) rotate(6) scale(1.30)'/%3E%3Cuse href='%23c' transform='translate(102 234) rotate(22) scale(1.25)'/%3E%3Cuse href='%23d' transform='translate(243 24) rotate(14) scale(1.11)'/%3E%3Cuse href='%23d' transform='translate(243 344) rotate(14) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(-20 -29) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(-20 291) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(300 -29) rotate(15) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(300 291) rotate(15) scale(1.09)'/%3E%3Cuse href='%23a' transform='translate(156 120) rotate(6) scale(1.06)'/%3E%3Cuse href='%23c' transform='translate(269 219) rotate(4) scale(1.23)'/%3E%3Cuse href='%23e' transform='translate(57 152) rotate(-12) scale(1.00)'/%3E%3Cuse href='%23d' transform='translate(62 -14) rotate(3) scale(1.18)'/%3E%3Cuse href='%23d' transform='translate(62 306) rotate(3) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(104 55) rotate(-1) scale(1.18)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) :is(body.home,.stylepreview).skin-aart{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3Cg fill='%23ecd9a6' stroke='none'%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3Ccircle cx='16' cy='22.5' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='7' y='3' width='18' height='26' rx='3'/%3E%3Crect x='10' y='6' width='12' height='6' rx='1'/%3E%3Cg fill='%23ecd9a6' stroke='none'%3E%3Ccircle cx='12' cy='16.5' r='1.4'/%3E%3Ccircle cx='16' cy='16.5' r='1.4'/%3E%3Ccircle cx='20' cy='16.5' r='1.4'/%3E%3Ccircle cx='12' cy='21' r='1.4'/%3E%3Ccircle cx='16' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Ccircle cx='12' cy='25.5' r='1.4'/%3E%3Ccircle cx='16' cy='25.5' r='1.4'/%3E%3Ccircle cx='20' cy='25.5' r='1.4'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23ecd9a6'%3E6%3C/text%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M7 12.5h18M7 19.5h18'/%3E%3C/g%3E%3Cg id='g' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='h' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='15' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23ecd9a6'%3E3+3%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23ecd9a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(113 253) rotate(16) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(290 5) rotate(-16) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(290 325) rotate(-16) scale(1.02)'/%3E%3Cuse href='%23c' transform='translate(227 145) rotate(-6) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(219 31) rotate(7) scale(1.21)'/%3E%3Cuse href='%23d' transform='translate(90 25) rotate(16) scale(1.07)'/%3E%3Cuse href='%23d' transform='translate(90 345) rotate(16) scale(1.07)'/%3E%3Cuse href='%23b' transform='translate(116 129) rotate(15) scale(1.00)'/%3E%3Cuse href='%23e' transform='translate(284 189) rotate(15) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(24 112) rotate(-13) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(344 112) rotate(-13) scale(1.06)'/%3E%3Cuse href='%23c' transform='translate(225 267) rotate(2) scale(1.15)'/%3E%3Cuse href='%23f' transform='translate(35 284) rotate(8) scale(1.08)'/%3E%3Cuse href='%23g' transform='translate(167 186) rotate(-6) scale(1.15)'/%3E%3Cuse href='%23h' transform='translate(64 187) rotate(3) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=star]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='290' viewBox='0 0 290 290'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 9l2.2 4.6 5 .6-3.7 3.4 1 4.9L16 20l-4.5 2.5 1-4.9-3.7-3.4 5-.6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3.5 7.6 8.2.9-6.1 5.6 1.7 8.1L16 22.1 8.7 26.2l1.7-8.1-6.1-5.6 8.2-.9z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f0cf98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(146 134) rotate(7) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(80 -19) rotate(11) scale(1.30)'/%3E%3Cuse href='%23a' transform='translate(80 271) rotate(11) scale(1.30)'/%3E%3Cuse href='%23b' transform='translate(-13 35) rotate(5) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(277 35) rotate(5) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(-27 208) rotate(-12) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(263 208) rotate(-12) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(-11 117) rotate(14) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(279 117) rotate(14) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(172 248) rotate(-18) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(119 50) rotate(19) scale(1.24)'/%3E%3Cuse href='%23b' transform='translate(194 65) rotate(3) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(199 179) rotate(-23) scale(1.15)'/%3E%3Cuse href='%23a' transform='translate(67 140) rotate(-14) scale(1.17)'/%3E%3Cuse href='%23b' transform='translate(47 73) rotate(8) scale(1.33)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=bin]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='8'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23cbbcf2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(179 10) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23a' transform='translate(179 290) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(202 78) rotate(0) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(77 -29) rotate(-2) scale(1.28)'/%3E%3Cuse href='%23b' transform='translate(77 251) rotate(-2) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(135 175) rotate(16) scale(1.04)'/%3E%3Cuse href='%23b' transform='translate(94 120) rotate(-17) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(-23 114) rotate(10) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(257 114) rotate(10) scale(1.21)'/%3E%3Cuse href='%23a' transform='translate(235 235) rotate(-15) scale(1.12)'/%3E%3Cuse href='%23b' transform='translate(-9 50) rotate(23) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(271 50) rotate(23) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(60 67) rotate(17) scale(1.06)'/%3E%3Cuse href='%23a' transform='translate(55 190) rotate(-23) scale(1.30)'/%3E%3Cuse href='%23a' transform='translate(197 156) rotate(15) scale(1.01)'/%3E%3Cuse href='%23b' transform='translate(119 30) rotate(-3) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=nono]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cg fill='%23a9e3d9' stroke='none' fill-opacity='.55'%3E%3Crect x='4' y='12' width='7' height='7' rx='1'/%3E%3Crect x='12.5' y='12' width='7' height='7' rx='1'/%3E%3Crect x='21' y='12' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M5 5h22v22H5zM12.3 5v22M19.6 5v22M5 12.3h22M5 19.6h22'/%3E%3Cg fill='%23a9e3d9' stroke='none' fill-opacity='.55'%3E%3Crect x='5' y='5' width='7.3' height='7.3'/%3E%3Crect x='19.6' y='12.3' width='7.4' height='7.3'/%3E%3Crect x='12.3' y='19.6' width='7.3' height='7.4'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23a9e3d9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(152 138) rotate(4) scale(1.32)'/%3E%3Cuse href='%23b' transform='translate(83 -20) rotate(-15) scale(1.21)'/%3E%3Cuse href='%23b' transform='translate(83 280) rotate(-15) scale(1.21)'/%3E%3Cuse href='%23c' transform='translate(-13 36) rotate(-21) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(287 36) rotate(-21) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(-28 215) rotate(-15) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(272 215) rotate(-15) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(-12 121) rotate(-20) scale(1.17)'/%3E%3Cuse href='%23a' transform='translate(288 121) rotate(-20) scale(1.17)'/%3E%3Cuse href='%23c' transform='translate(178 257) rotate(-23) scale(1.35)'/%3E%3Cuse href='%23a' transform='translate(123 52) rotate(7) scale(1.24)'/%3E%3Cuse href='%23a' transform='translate(201 67) rotate(-3) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(69 145) rotate(23) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(107 209) rotate(-12) scale(1.08)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=hex]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='290' viewBox='0 0 290 290'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l10.4 6v12L16 28 5.6 22V10z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l10.4 6v12L16 28 5.6 22V10z' fill='%23f4c19f' fill-opacity='.45'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f4c19f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(-22 8) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(-22 298) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(268 8) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(268 298) rotate(7) scale(1.25)'/%3E%3Cuse href='%23a' transform='translate(138 80) rotate(6) scale(1.34)'/%3E%3Cuse href='%23a' transform='translate(159 152) rotate(-9) scale(1.17)'/%3E%3Cuse href='%23b' transform='translate(-23 224) rotate(18) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(267 224) rotate(18) scale(1.09)'/%3E%3Cuse href='%23a' transform='translate(183 27) rotate(-21) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(183 317) rotate(-21) scale(1.00)'/%3E%3Cuse href='%23b' transform='translate(228 162) rotate(12) scale(1.13)'/%3E%3Cuse href='%23a' transform='translate(114 5) rotate(-4) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(114 295) rotate(-4) scale(1.02)'/%3E%3Cuse href='%23a' transform='translate(168 233) rotate(-11) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(62 140) rotate(14) scale(1.31)'/%3E%3Cuse href='%23a' transform='translate(50 -24) rotate(-21) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(50 266) rotate(-21) scale(1.18)'/%3E%3Cuse href='%23b' transform='translate(98 206) rotate(-11) scale(1.12)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=plus]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E7%3C/text%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E2%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E9%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E3%3C/text%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Ctext x='16' y='22' text-anchor='middle' font-size='18' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E8%3C/text%3E%3Cpath d='M7 19 25 13'/%3E%3C/g%3E%3Cg id='g' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='14' font-weight='700' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23b4cff2'%3E5%3C/text%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23b4cff2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(75 247) rotate(16) scale(1.34)'/%3E%3Cuse href='%23b' transform='translate(191 145) rotate(19) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(212 20) rotate(-18) scale(1.23)'/%3E%3Cuse href='%23c' transform='translate(212 320) rotate(-18) scale(1.23)'/%3E%3Cuse href='%23d' transform='translate(135 20) rotate(17) scale(1.17)'/%3E%3Cuse href='%23d' transform='translate(135 320) rotate(17) scale(1.17)'/%3E%3Cuse href='%23d' transform='translate(-30 68) rotate(-14) scale(1.23)'/%3E%3Cuse href='%23d' transform='translate(270 68) rotate(-14) scale(1.23)'/%3E%3Cuse href='%23e' transform='translate(228 233) rotate(-0) scale(0.96)'/%3E%3Cuse href='%23f' transform='translate(62 26) rotate(-3) scale(1.00)'/%3E%3Cuse href='%23f' transform='translate(62 326) rotate(-3) scale(1.00)'/%3E%3Cuse href='%23g' transform='translate(107 92) rotate(-17) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(-6 200) rotate(-12) scale(1.29)'/%3E%3Cuse href='%23a' transform='translate(294 200) rotate(-12) scale(1.29)'/%3E%3Cuse href='%23b' transform='translate(19 131) rotate(7) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(319 131) rotate(7) scale(1.11)'/%3E%3Cuse href='%23c' transform='translate(118 174) rotate(-15) scale(1.17)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=mur]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='310' viewBox='0 0 310 310'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='13' cy='13' r='8'/%3E%3Cpath d='M19 19l8 8'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cg fill='%23ecbcb4' stroke='none' fill-opacity='.6'%3E%3Cellipse cx='11' cy='10' rx='3.2' ry='5'/%3E%3Cellipse cx='20' cy='21' rx='3.2' ry='5'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='9' cy='16' r='5'/%3E%3Cpath d='M14 16h14M24 16v5M28 16v4'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='24' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23ecbcb4'%3E?%3C/text%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='9' y='4' width='14' height='24' rx='1.5'/%3E%3Ccircle cx='19.5' cy='16.5' r='1.3' fill='%23ecbcb4' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23ecbcb4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(-5 273) rotate(19) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(305 273) rotate(19) scale(1.16)'/%3E%3Cuse href='%23b' transform='translate(96 -6) rotate(-5) scale(1.22)'/%3E%3Cuse href='%23b' transform='translate(96 304) rotate(-5) scale(1.22)'/%3E%3Cuse href='%23c' transform='translate(-29 126) rotate(-8) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(281 126) rotate(-8) scale(1.10)'/%3E%3Cuse href='%23d' transform='translate(215 83) rotate(0) scale(1.03)'/%3E%3Cuse href='%23b' transform='translate(87 95) rotate(1) scale(1.00)'/%3E%3Cuse href='%23e' transform='translate(163 178) rotate(6) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(22 53) rotate(22) scale(1.29)'/%3E%3Cuse href='%23a' transform='translate(332 53) rotate(22) scale(1.29)'/%3E%3Cuse href='%23c' transform='translate(28 173) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23c' transform='translate(338 173) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23d' transform='translate(210 243) rotate(-13) scale(1.24)'/%3E%3Cuse href='%23d' transform='translate(93 207) rotate(-13) scale(1.03)'/%3E%3Cuse href='%23a' transform='translate(235 4) rotate(-9) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(235 314) rotate(-9) scale(1.00)'/%3E%3C/g%3E%3C/svg%3E")}:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=m24],:root:not([data-theme=light]) body.nieuw:not(.home)[data-t=kak]{--page-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M7 16h18'/%3E%3Cg fill='%23d4c6f0' stroke='none'%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3Ccircle cx='16' cy='22.5' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M9 9l14 14M23 9 9 23'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ctext x='16' y='25' text-anchor='middle' font-size='26' font-weight='800' font-family='-apple-system,system-ui,Arial,sans-serif' stroke='none' fill='%23d4c6f0'%3E6%3C/text%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M7 12.5h18M7 19.5h18'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Crect x='7' y='3' width='18' height='26' rx='3'/%3E%3Crect x='10' y='6' width='12' height='6' rx='1'/%3E%3Cg fill='%23d4c6f0' stroke='none'%3E%3Ccircle cx='12' cy='16.5' r='1.4'/%3E%3Ccircle cx='16' cy='16.5' r='1.4'/%3E%3Ccircle cx='20' cy='16.5' r='1.4'/%3E%3Ccircle cx='12' cy='21' r='1.4'/%3E%3Ccircle cx='16' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Ccircle cx='12' cy='25.5' r='1.4'/%3E%3Ccircle cx='16' cy='25.5' r='1.4'/%3E%3Ccircle cx='20' cy='25.5' r='1.4'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23d4c6f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cuse href='%23a' transform='translate(169 105) rotate(-12) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(250 83) rotate(-15) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(-4 189) rotate(-22) scale(1.03)'/%3E%3Cuse href='%23c' transform='translate(296 189) rotate(-22) scale(1.03)'/%3E%3Cuse href='%23d' transform='translate(156 6) rotate(-9) scale(1.12)'/%3E%3Cuse href='%23d' transform='translate(156 306) rotate(-9) scale(1.12)'/%3E%3Cuse href='%23a' transform='translate(160 226) rotate(9) scale(0.97)'/%3E%3Cuse href='%23d' transform='translate(37 90) rotate(16) scale(1.20)'/%3E%3Cuse href='%23c' transform='translate(56 -22) rotate(4) scale(1.33)'/%3E%3Cuse href='%23c' transform='translate(56 278) rotate(4) scale(1.33)'/%3E%3Cuse href='%23e' transform='translate(240 -11) rotate(20) scale(0.99)'/%3E%3Cuse href='%23e' transform='translate(240 289) rotate(20) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(89 180) rotate(18) scale(1.33)'/%3E%3Cuse href='%23f' transform='translate(221 184) rotate(-9) scale(1.31)'/%3E%3C/g%3E%3C/svg%3E")}}
/* Extra achtergronden (gegenereerd, zelfde stijl): Sterren, Natuur, Retro, Dieren, Zee, Reizen, Muziek, Feest, Koffie & taart
   en Seizoen (kiest vanzelf: herfst, Sinterklaas, kerst, winter, lente, zomer). Elk thema zet --pp-l (licht) en --pp-d (donker). */
body.home{--page-pattern:var(--pp-l,none)}
:root[data-theme=dark] body.home{--page-pattern:var(--pp-d,none)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body.home{--page-pattern:var(--pp-d,none)}}
:is(body.home,.stylepreview).skin-stars{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='390' viewBox='0 0 390 390'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 9l2.2 4.6 5 .6-3.7 3.4 1 4.9L16 20l-4.5 2.5 1-4.9-3.7-3.4 5-.6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 5c1 7 3 9 10 11-7 1-9 3-10 10-1-7-3-9-10-10 7-2 9-4 10-11z'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='7'/%3E%3Cpath d='M5 20c-3 4 4 4 13 0s14-9 10-11'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3.5 7.6 8.2.9-6.1 5.6 1.7 8.1L16 22.1 8.7 26.2l1.7-8.1-6.1-5.6 8.2-.9z'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M20 5a11 11 0 1 0 7 17A9 9 0 0 1 20 5z'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%2355608a' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%2355608a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(150 346) rotate(19) scale(1.27)'/%3E%3Cuse href='%23b' transform='translate(-8 346) rotate(19) scale(1.07)'/%3E%3Cuse href='%23b' transform='translate(382 346) rotate(19) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(332 83) rotate(14) scale(1.23)'/%3E%3Cuse href='%23c' transform='translate(26 184) rotate(11) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(416 184) rotate(11) scale(1.13)'/%3E%3Cuse href='%23d' transform='translate(217 91) rotate(4) scale(1.24)'/%3E%3Cuse href='%23e' transform='translate(143 238) rotate(4) scale(1.22)'/%3E%3Cuse href='%23d' transform='translate(74 72) rotate(6) scale(1.02)'/%3E%3Cuse href='%23f' transform='translate(247 265) rotate(-10) scale(1.13)'/%3E%3Cuse href='%23a' transform='translate(279 -20) rotate(11) scale(1.15)'/%3E%3Cuse href='%23a' transform='translate(279 370) rotate(11) scale(1.15)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='390' viewBox='0 0 390 390'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 9l2.2 4.6 5 .6-3.7 3.4 1 4.9L16 20l-4.5 2.5 1-4.9-3.7-3.4 5-.6z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 5c1 7 3 9 10 11-7 1-9 3-10 10-1-7-3-9-10-10 7-2 9-4 10-11z'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='7'/%3E%3Cpath d='M5 20c-3 4 4 4 13 0s14-9 10-11'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3.5 7.6 8.2.9-6.1 5.6 1.7 8.1L16 22.1 8.7 26.2l1.7-8.1-6.1-5.6 8.2-.9z'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M20 5a11 11 0 1 0 7 17A9 9 0 0 1 20 5z'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23c9d0f2' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23c9d0f2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(150 346) rotate(19) scale(1.27)'/%3E%3Cuse href='%23b' transform='translate(-8 346) rotate(19) scale(1.07)'/%3E%3Cuse href='%23b' transform='translate(382 346) rotate(19) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(332 83) rotate(14) scale(1.23)'/%3E%3Cuse href='%23c' transform='translate(26 184) rotate(11) scale(1.13)'/%3E%3Cuse href='%23c' transform='translate(416 184) rotate(11) scale(1.13)'/%3E%3Cuse href='%23d' transform='translate(217 91) rotate(4) scale(1.24)'/%3E%3Cuse href='%23e' transform='translate(143 238) rotate(4) scale(1.22)'/%3E%3Cuse href='%23d' transform='translate(74 72) rotate(6) scale(1.02)'/%3E%3Cuse href='%23f' transform='translate(247 265) rotate(-10) scale(1.13)'/%3E%3Cuse href='%23a' transform='translate(279 -20) rotate(11) scale(1.15)'/%3E%3Cuse href='%23a' transform='translate(279 370) rotate(11) scale(1.15)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-nature{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 4 8 15h4l-6 8h20l-6-8h4z'/%3E%3Cpath d='M16 23v6'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M3 26 12 12l5 7 4-5 8 12z'/%3E%3Cpath d='M10 15l2 2 2-2'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='11' r='2.6'/%3E%3Ccircle cx='16' cy='5.5' r='3'/%3E%3Ccircle cx='21.2' cy='9.3' r='3'/%3E%3Ccircle cx='19.2' cy='15.4' r='3'/%3E%3Ccircle cx='12.8' cy='15.4' r='3'/%3E%3Ccircle cx='10.8' cy='9.3' r='3'/%3E%3Cpath d='M16 18.5V29M16 25c2-3 5-3 7-3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M9 23h15a5 5 0 0 0 0-10 7 7 0 0 0-13-1A5.5 5.5 0 0 0 9 23z'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M5 16a11 9 0 0 1 22 0z'/%3E%3Cpath d='M12 16v8a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-8'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M7 25C7 13 14 6 26 6c0 12-7 19-19 19z'/%3E%3Cpath d='M7 25 19 13'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%234f7d4a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(311 285) rotate(-2) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(246 21) rotate(-21) scale(0.98)'/%3E%3Cuse href='%23b' transform='translate(246 421) rotate(-21) scale(0.98)'/%3E%3Cuse href='%23c' transform='translate(37 91) rotate(-12) scale(1.30)'/%3E%3Cuse href='%23d' transform='translate(-23 -26) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(-23 374) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(377 -26) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(377 374) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(306 128) rotate(-17) scale(1.09)'/%3E%3Cuse href='%23e' transform='translate(160 155) rotate(10) scale(1.13)'/%3E%3Cuse href='%23e' transform='translate(76 279) rotate(4) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(122 -1) rotate(-14) scale(0.98)'/%3E%3Cuse href='%23a' transform='translate(122 399) rotate(-14) scale(0.98)'/%3E%3Cuse href='%23f' transform='translate(206 306) rotate(3) scale(1.08)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 4 8 15h4l-6 8h20l-6-8h4z'/%3E%3Cpath d='M16 23v6'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M3 26 12 12l5 7 4-5 8 12z'/%3E%3Cpath d='M10 15l2 2 2-2'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='11' r='2.6'/%3E%3Ccircle cx='16' cy='5.5' r='3'/%3E%3Ccircle cx='21.2' cy='9.3' r='3'/%3E%3Ccircle cx='19.2' cy='15.4' r='3'/%3E%3Ccircle cx='12.8' cy='15.4' r='3'/%3E%3Ccircle cx='10.8' cy='9.3' r='3'/%3E%3Cpath d='M16 18.5V29M16 25c2-3 5-3 7-3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M9 23h15a5 5 0 0 0 0-10 7 7 0 0 0-13-1A5.5 5.5 0 0 0 9 23z'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M5 16a11 9 0 0 1 22 0z'/%3E%3Cpath d='M12 16v8a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-8'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M7 25C7 13 14 6 26 6c0 12-7 19-19 19z'/%3E%3Cpath d='M7 25 19 13'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23bfe0b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(311 285) rotate(-2) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(246 21) rotate(-21) scale(0.98)'/%3E%3Cuse href='%23b' transform='translate(246 421) rotate(-21) scale(0.98)'/%3E%3Cuse href='%23c' transform='translate(37 91) rotate(-12) scale(1.30)'/%3E%3Cuse href='%23d' transform='translate(-23 -26) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(-23 374) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(377 -26) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(377 374) rotate(-2) scale(0.96)'/%3E%3Cuse href='%23d' transform='translate(306 128) rotate(-17) scale(1.09)'/%3E%3Cuse href='%23e' transform='translate(160 155) rotate(10) scale(1.13)'/%3E%3Cuse href='%23e' transform='translate(76 279) rotate(4) scale(1.00)'/%3E%3Cuse href='%23a' transform='translate(122 -1) rotate(-14) scale(0.98)'/%3E%3Cuse href='%23a' transform='translate(122 399) rotate(-14) scale(0.98)'/%3E%3Cuse href='%23f' transform='translate(206 306) rotate(3) scale(1.08)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-retro{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cg fill='%238a5a9c' stroke='none'%3E%3Ccircle cx='9' cy='16' r='2'/%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='23' cy='16' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 20l5-8 5 8 5-8 5 8 4-6'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M5 21a11 11 0 0 1 22 0z'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M4 18c3-6 5-6 8 0s5 6 8 0 5-6 8 0'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M16 6 27 25H5z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%238a5a9c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(146 216) rotate(-6) scale(1.29)'/%3E%3Cuse href='%23b' transform='translate(293 20) rotate(-1) scale(1.18)'/%3E%3Cuse href='%23b' transform='translate(293 400) rotate(-1) scale(1.18)'/%3E%3Cuse href='%23c' transform='translate(212 89) rotate(-8) scale(1.20)'/%3E%3Cuse href='%23d' transform='translate(72 325) rotate(8) scale(1.23)'/%3E%3Cuse href='%23a' transform='translate(10 199) rotate(12) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(390 199) rotate(12) scale(1.19)'/%3E%3Cuse href='%23e' transform='translate(231 296) rotate(14) scale(1.04)'/%3E%3Cuse href='%23d' transform='translate(81 117) rotate(-16) scale(0.99)'/%3E%3Cuse href='%23f' transform='translate(311 134) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(335 291) rotate(14) scale(1.20)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cg fill='%23e1c6ec' stroke='none'%3E%3Ccircle cx='9' cy='16' r='2'/%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='23' cy='16' r='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 20l5-8 5 8 5-8 5 8 4-6'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M5 21a11 11 0 0 1 22 0z'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M4 18c3-6 5-6 8 0s5 6 8 0 5-6 8 0'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M16 6 27 25H5z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23e1c6ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(146 216) rotate(-6) scale(1.29)'/%3E%3Cuse href='%23b' transform='translate(293 20) rotate(-1) scale(1.18)'/%3E%3Cuse href='%23b' transform='translate(293 400) rotate(-1) scale(1.18)'/%3E%3Cuse href='%23c' transform='translate(212 89) rotate(-8) scale(1.20)'/%3E%3Cuse href='%23d' transform='translate(72 325) rotate(8) scale(1.23)'/%3E%3Cuse href='%23a' transform='translate(10 199) rotate(12) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(390 199) rotate(12) scale(1.19)'/%3E%3Cuse href='%23e' transform='translate(231 296) rotate(14) scale(1.04)'/%3E%3Cuse href='%23d' transform='translate(81 117) rotate(-16) scale(0.99)'/%3E%3Cuse href='%23f' transform='translate(311 134) rotate(-14) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(335 291) rotate(14) scale(1.20)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-animals{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M5 18c4 0 6-3 8-6 3-4 9-4 11 0l3 1-3 2c0 6-6 10-12 9-3 0-5-2-7-6z'/%3E%3Ccircle cx='21' cy='11.5' r='1' fill='%238a6440' stroke='none'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M10 14h12M10 18h12'/%3E%3Ccircle cx='8' cy='12.5' r='3'/%3E%3Ccircle cx='8' cy='19.5' r='3'/%3E%3Ccircle cx='24' cy='12.5' r='3'/%3E%3Ccircle cx='24' cy='19.5' r='3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M4 16c5-7 13-7 18 0-5 7-13 7-18 0z'/%3E%3Cpath d='M22 16l6-5v10z'/%3E%3Ccircle cx='9' cy='15' r='1' fill='%238a6440' stroke='none'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M7 26V12l-1-7 6 4h8l6-4-1 7v14z'/%3E%3Ccircle cx='12.5' cy='16' r='1.2' fill='%238a6440' stroke='none'/%3E%3Ccircle cx='19.5' cy='16' r='1.2' fill='%238a6440' stroke='none'/%3E%3Cpath d='M14.5 20.5 16 22l1.5-1.5M3 19l6 1M3 23l6-1M29 19l-6 1M29 23l-6-1'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cg fill='%238a6440' stroke='none' fill-opacity='.85'%3E%3Cellipse cx='16' cy='21' rx='6' ry='5'/%3E%3Cellipse cx='8.5' cy='13' rx='2.4' ry='3'/%3E%3Cellipse cx='13' cy='9' rx='2.4' ry='3'/%3E%3Cellipse cx='19' cy='9' rx='2.4' ry='3'/%3E%3Cellipse cx='23.5' cy='13' rx='2.4' ry='3'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%238a6440' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(39 190) rotate(14) scale(1.08)'/%3E%3Cuse href='%23b' transform='translate(257 117) rotate(-17) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(146 227) rotate(21) scale(1.18)'/%3E%3Cuse href='%23b' transform='translate(65 2) rotate(14) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(65 402) rotate(14) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(-19 332) rotate(-12) scale(1.24)'/%3E%3Cuse href='%23a' transform='translate(381 332) rotate(-12) scale(1.24)'/%3E%3Cuse href='%23d' transform='translate(213 351) rotate(11) scale(1.29)'/%3E%3Cuse href='%23e' transform='translate(121 98) rotate(-2) scale(1.12)'/%3E%3Cuse href='%23e' transform='translate(311 24) rotate(0) scale(1.29)'/%3E%3Cuse href='%23e' transform='translate(311 424) rotate(0) scale(1.29)'/%3E%3Cuse href='%23e' transform='translate(325 217) rotate(-3) scale(1.16)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M5 18c4 0 6-3 8-6 3-4 9-4 11 0l3 1-3 2c0 6-6 10-12 9-3 0-5-2-7-6z'/%3E%3Ccircle cx='21' cy='11.5' r='1' fill='%23ead2b8' stroke='none'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M10 14h12M10 18h12'/%3E%3Ccircle cx='8' cy='12.5' r='3'/%3E%3Ccircle cx='8' cy='19.5' r='3'/%3E%3Ccircle cx='24' cy='12.5' r='3'/%3E%3Ccircle cx='24' cy='19.5' r='3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M4 16c5-7 13-7 18 0-5 7-13 7-18 0z'/%3E%3Cpath d='M22 16l6-5v10z'/%3E%3Ccircle cx='9' cy='15' r='1' fill='%23ead2b8' stroke='none'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M7 26V12l-1-7 6 4h8l6-4-1 7v14z'/%3E%3Ccircle cx='12.5' cy='16' r='1.2' fill='%23ead2b8' stroke='none'/%3E%3Ccircle cx='19.5' cy='16' r='1.2' fill='%23ead2b8' stroke='none'/%3E%3Cpath d='M14.5 20.5 16 22l1.5-1.5M3 19l6 1M3 23l6-1M29 19l-6 1M29 23l-6-1'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cg fill='%23ead2b8' stroke='none' fill-opacity='.85'%3E%3Cellipse cx='16' cy='21' rx='6' ry='5'/%3E%3Cellipse cx='8.5' cy='13' rx='2.4' ry='3'/%3E%3Cellipse cx='13' cy='9' rx='2.4' ry='3'/%3E%3Cellipse cx='19' cy='9' rx='2.4' ry='3'/%3E%3Cellipse cx='23.5' cy='13' rx='2.4' ry='3'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23ead2b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(39 190) rotate(14) scale(1.08)'/%3E%3Cuse href='%23b' transform='translate(257 117) rotate(-17) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(146 227) rotate(21) scale(1.18)'/%3E%3Cuse href='%23b' transform='translate(65 2) rotate(14) scale(1.19)'/%3E%3Cuse href='%23b' transform='translate(65 402) rotate(14) scale(1.19)'/%3E%3Cuse href='%23a' transform='translate(-19 332) rotate(-12) scale(1.24)'/%3E%3Cuse href='%23a' transform='translate(381 332) rotate(-12) scale(1.24)'/%3E%3Cuse href='%23d' transform='translate(213 351) rotate(11) scale(1.29)'/%3E%3Cuse href='%23e' transform='translate(121 98) rotate(-2) scale(1.12)'/%3E%3Cuse href='%23e' transform='translate(311 24) rotate(0) scale(1.29)'/%3E%3Cuse href='%23e' transform='translate(311 424) rotate(0) scale(1.29)'/%3E%3Cuse href='%23e' transform='translate(325 217) rotate(-3) scale(1.16)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-sea{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M4 16c5-7 13-7 18 0-5 7-13 7-18 0z'/%3E%3Cpath d='M22 16l6-5v10z'/%3E%3Ccircle cx='9' cy='15' r='1' fill='%232f6f8f' stroke='none'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 23h24l-4 5H8z'/%3E%3Cpath d='M15 21V4L6 21zM18 8l7 13h-7'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Cpath d='M16 9.5V28M10 14h12M6 20c0 5 4 8 10 8s10-3 10-8M6 20l-2 2M26 20l2 2'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3 8 9 1-7 5 3 9-8-5-8 5 3-9-7-5 9-1z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M3 13c3-3 6-3 9 0s6 3 9 0 6-3 8 0M3 20c3-3 6-3 9 0s6 3 9 0 6-3 8 0'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%232f6f8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(123 220) rotate(0) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(145 -19) rotate(-13) scale(1.28)'/%3E%3Cuse href='%23b' transform='translate(145 381) rotate(-13) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(353 212) rotate(-7) scale(1.07)'/%3E%3Cuse href='%23c' transform='translate(37 141) rotate(9) scale(1.08)'/%3E%3Cuse href='%23d' transform='translate(262 370) rotate(-5) scale(1.07)'/%3E%3Cuse href='%23e' transform='translate(336 74) rotate(-8) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(214 109) rotate(4) scale(1.11)'/%3E%3Cuse href='%23d' transform='translate(44 305) rotate(-20) scale(1.20)'/%3E%3Cuse href='%23e' transform='translate(240 246) rotate(-12) scale(1.07)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M4 16c5-7 13-7 18 0-5 7-13 7-18 0z'/%3E%3Cpath d='M22 16l6-5v10z'/%3E%3Ccircle cx='9' cy='15' r='1' fill='%23b5dcef' stroke='none'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 23h24l-4 5H8z'/%3E%3Cpath d='M15 21V4L6 21zM18 8l7 13h-7'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Cpath d='M16 9.5V28M10 14h12M6 20c0 5 4 8 10 8s10-3 10-8M6 20l-2 2M26 20l2 2'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3 8 9 1-7 5 3 9-8-5-8 5 3-9-7-5 9-1z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M3 13c3-3 6-3 9 0s6 3 9 0 6-3 8 0M3 20c3-3 6-3 9 0s6 3 9 0 6-3 8 0'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23b5dcef' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(123 220) rotate(0) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(145 -19) rotate(-13) scale(1.28)'/%3E%3Cuse href='%23b' transform='translate(145 381) rotate(-13) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(353 212) rotate(-7) scale(1.07)'/%3E%3Cuse href='%23c' transform='translate(37 141) rotate(9) scale(1.08)'/%3E%3Cuse href='%23d' transform='translate(262 370) rotate(-5) scale(1.07)'/%3E%3Cuse href='%23e' transform='translate(336 74) rotate(-8) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(214 109) rotate(4) scale(1.11)'/%3E%3Cuse href='%23d' transform='translate(44 305) rotate(-20) scale(1.20)'/%3E%3Cuse href='%23e' transform='translate(240 246) rotate(-12) scale(1.07)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-travel{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M5 16h22M16 5c-4 4-4 18 0 22M16 5c4 4 4 18 0 22'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M28 5 4 14l8 3 3 9 4-6 6 4z'/%3E%3Cpath d='M12 17 28 5'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='5' y='10' width='22' height='16' rx='3'/%3E%3Cpath d='M12 10V6h8v4M11 10v16M21 10v16'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Crect x='4' y='10' width='24' height='16' rx='3'/%3E%3Ccircle cx='16' cy='18' r='5'/%3E%3Cpath d='M11 10l2-4h6l2 4'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M20 12l-2.5 5.5L12 20l2.5-5.5z'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M16 29s-9-9-9-15a9 9 0 0 1 18 0c0 6-9 15-9 15z'/%3E%3Ccircle cx='16' cy='14' r='3.2'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%233f6a9a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(241 47) rotate(6) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(84 76) rotate(-5) scale(1.11)'/%3E%3Cuse href='%23c' transform='translate(90 193) rotate(-14) scale(1.08)'/%3E%3Cuse href='%23d' transform='translate(93 338) rotate(9) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(197 311) rotate(7) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(346 214) rotate(-5) scale(1.19)'/%3E%3Cuse href='%23e' transform='translate(330 -22) rotate(-1) scale(1.22)'/%3E%3Cuse href='%23e' transform='translate(330 378) rotate(-1) scale(1.22)'/%3E%3Cuse href='%23f' transform='translate(205 180) rotate(19) scale(1.11)'/%3E%3Cuse href='%23f' transform='translate(-26 108) rotate(2) scale(1.17)'/%3E%3Cuse href='%23f' transform='translate(374 108) rotate(2) scale(1.17)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M5 16h22M16 5c-4 4-4 18 0 22M16 5c4 4 4 18 0 22'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M28 5 4 14l8 3 3 9 4-6 6 4z'/%3E%3Cpath d='M12 17 28 5'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='5' y='10' width='22' height='16' rx='3'/%3E%3Cpath d='M12 10V6h8v4M11 10v16M21 10v16'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Crect x='4' y='10' width='24' height='16' rx='3'/%3E%3Ccircle cx='16' cy='18' r='5'/%3E%3Cpath d='M11 10l2-4h6l2 4'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M20 12l-2.5 5.5L12 20l2.5-5.5z'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M16 29s-9-9-9-15a9 9 0 0 1 18 0c0 6-9 15-9 15z'/%3E%3Ccircle cx='16' cy='14' r='3.2'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23bdd3f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(241 47) rotate(6) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(84 76) rotate(-5) scale(1.11)'/%3E%3Cuse href='%23c' transform='translate(90 193) rotate(-14) scale(1.08)'/%3E%3Cuse href='%23d' transform='translate(93 338) rotate(9) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(197 311) rotate(7) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(346 214) rotate(-5) scale(1.19)'/%3E%3Cuse href='%23e' transform='translate(330 -22) rotate(-1) scale(1.22)'/%3E%3Cuse href='%23e' transform='translate(330 378) rotate(-1) scale(1.22)'/%3E%3Cuse href='%23f' transform='translate(205 180) rotate(19) scale(1.11)'/%3E%3Cuse href='%23f' transform='translate(-26 108) rotate(2) scale(1.17)'/%3E%3Cuse href='%23f' transform='translate(374 108) rotate(2) scale(1.17)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-music{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='390' viewBox='0 0 390 390'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cellipse cx='11' cy='23' rx='4' ry='3' fill='%237a4f8e' stroke='none'/%3E%3Cpath d='M15 23V5l8 3'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cellipse cx='9' cy='24' rx='3.5' ry='2.6' fill='%237a4f8e' stroke='none'/%3E%3Cellipse cx='22' cy='21' rx='3.5' ry='2.6' fill='%237a4f8e' stroke='none'/%3E%3Cpath d='M12.5 24V8l13-3v16'/%3E%3Cpath d='M12.5 12l13-3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='4' y='8' width='24' height='16' rx='2'/%3E%3Cpath d='M10 8v16M16 8v16M22 8v16'/%3E%3Cg fill='%237a4f8e' stroke='none'%3E%3Crect x='8.5' y='8' width='3' height='9'/%3E%3Crect x='14.5' y='8' width='3' height='9'/%3E%3Crect x='20.5' y='8' width='3' height='9'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M6 21v-5a10 10 0 0 1 20 0v5'/%3E%3Crect x='4' y='19' width='6' height='9' rx='2'/%3E%3Crect x='22' y='19' width='6' height='9' rx='2'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='12' y='4' width='8' height='14' rx='4'/%3E%3Cpath d='M8 15a8 8 0 0 0 16 0M16 23v5M12 28h8'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%237a4f8e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(-15 313) rotate(15) scale(1.12)'/%3E%3Cuse href='%23a' transform='translate(375 313) rotate(15) scale(1.12)'/%3E%3Cuse href='%23a' transform='translate(222 218) rotate(-4) scale(0.98)'/%3E%3Cuse href='%23b' transform='translate(235 5) rotate(15) scale(1.15)'/%3E%3Cuse href='%23b' transform='translate(235 395) rotate(15) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(36 81) rotate(-10) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(118 171) rotate(10) scale(1.20)'/%3E%3Cuse href='%23d' transform='translate(145 334) rotate(2) scale(1.09)'/%3E%3Cuse href='%23e' transform='translate(306 85) rotate(7) scale(1.00)'/%3E%3Cuse href='%23b' transform='translate(203 108) rotate(6) scale(1.20)'/%3E%3Cuse href='%23c' transform='translate(354 179) rotate(-2) scale(1.09)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='390' viewBox='0 0 390 390'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cellipse cx='11' cy='23' rx='4' ry='3' fill='%23dcc3ea' stroke='none'/%3E%3Cpath d='M15 23V5l8 3'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cellipse cx='9' cy='24' rx='3.5' ry='2.6' fill='%23dcc3ea' stroke='none'/%3E%3Cellipse cx='22' cy='21' rx='3.5' ry='2.6' fill='%23dcc3ea' stroke='none'/%3E%3Cpath d='M12.5 24V8l13-3v16'/%3E%3Cpath d='M12.5 12l13-3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='4' y='8' width='24' height='16' rx='2'/%3E%3Cpath d='M10 8v16M16 8v16M22 8v16'/%3E%3Cg fill='%23dcc3ea' stroke='none'%3E%3Crect x='8.5' y='8' width='3' height='9'/%3E%3Crect x='14.5' y='8' width='3' height='9'/%3E%3Crect x='20.5' y='8' width='3' height='9'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M6 21v-5a10 10 0 0 1 20 0v5'/%3E%3Crect x='4' y='19' width='6' height='9' rx='2'/%3E%3Crect x='22' y='19' width='6' height='9' rx='2'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='12' y='4' width='8' height='14' rx='4'/%3E%3Cpath d='M8 15a8 8 0 0 0 16 0M16 23v5M12 28h8'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23dcc3ea' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(-15 313) rotate(15) scale(1.12)'/%3E%3Cuse href='%23a' transform='translate(375 313) rotate(15) scale(1.12)'/%3E%3Cuse href='%23a' transform='translate(222 218) rotate(-4) scale(0.98)'/%3E%3Cuse href='%23b' transform='translate(235 5) rotate(15) scale(1.15)'/%3E%3Cuse href='%23b' transform='translate(235 395) rotate(15) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(36 81) rotate(-10) scale(1.18)'/%3E%3Cuse href='%23a' transform='translate(118 171) rotate(10) scale(1.20)'/%3E%3Cuse href='%23d' transform='translate(145 334) rotate(2) scale(1.09)'/%3E%3Cuse href='%23e' transform='translate(306 85) rotate(7) scale(1.00)'/%3E%3Cuse href='%23b' transform='translate(203 108) rotate(6) scale(1.20)'/%3E%3Cuse href='%23c' transform='translate(354 179) rotate(-2) scale(1.09)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-party{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cellipse cx='16' cy='12' rx='7' ry='8.5'/%3E%3Cpath d='M16 20.5l-1.5 2h3zM16 22.5c-2 3 2 4 0 7'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Crect x='6' y='15' width='20' height='12' rx='2'/%3E%3Cpath d='M6 20c3 2 6-2 10 0s7-2 10 0M11 15v-4M16 15v-4M21 15v-4'/%3E%3Cg fill='%23b0496a' stroke='none'%3E%3Cellipse cx='11' cy='8.5' rx='1.2' ry='1.8'/%3E%3Cellipse cx='16' cy='8.5' rx='1.2' ry='1.8'/%3E%3Cellipse cx='21' cy='8.5' rx='1.2' ry='1.8'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M6 8l3 2M23 6l-1 3M14 14l3 1M8 22l2-3M24 20l3 2M17 26l1-3'/%3E%3Cg fill='%23b0496a' stroke='none'%3E%3Ccircle cx='20' cy='13' r='1.5'/%3E%3Ccircle cx='10' cy='15' r='1.3'/%3E%3Ccircle cx='26' cy='13' r='1.2'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M3 8c8 4 18 4 26 0'/%3E%3Cpath d='M6 10l3 8 3-7M14 11.5l2.5 8 2.5-8M21 11l3 7 3-8'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='5' y='12' width='22' height='15' rx='2'/%3E%3Cpath d='M4 12h24v-4H4zM16 8v19M16 8c-2-5-8-5-7-1s7 1 7 1c2-5 8-5 7-1s-7 1-7 1'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23b0496a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(62 358) rotate(-22) scale(1.25)'/%3E%3Cuse href='%23b' transform='translate(276 132) rotate(8) scale(0.99)'/%3E%3Cuse href='%23c' transform='translate(337 252) rotate(-10) scale(1.23)'/%3E%3Cuse href='%23a' transform='translate(206 367) rotate(-2) scale(1.00)'/%3E%3Cuse href='%23c' transform='translate(336 -19) rotate(14) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(336 381) rotate(14) scale(1.10)'/%3E%3Cuse href='%23d' transform='translate(122 184) rotate(-7) scale(1.24)'/%3E%3Cuse href='%23d' transform='translate(25 68) rotate(-22) scale(1.07)'/%3E%3Cuse href='%23d' transform='translate(425 68) rotate(-22) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(228 243) rotate(-13) scale(1.24)'/%3E%3Cuse href='%23e' transform='translate(153 66) rotate(-6) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cellipse cx='16' cy='12' rx='7' ry='8.5'/%3E%3Cpath d='M16 20.5l-1.5 2h3zM16 22.5c-2 3 2 4 0 7'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Crect x='6' y='15' width='20' height='12' rx='2'/%3E%3Cpath d='M6 20c3 2 6-2 10 0s7-2 10 0M11 15v-4M16 15v-4M21 15v-4'/%3E%3Cg fill='%23f2bfd0' stroke='none'%3E%3Cellipse cx='11' cy='8.5' rx='1.2' ry='1.8'/%3E%3Cellipse cx='16' cy='8.5' rx='1.2' ry='1.8'/%3E%3Cellipse cx='21' cy='8.5' rx='1.2' ry='1.8'/%3E%3C/g%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M6 8l3 2M23 6l-1 3M14 14l3 1M8 22l2-3M24 20l3 2M17 26l1-3'/%3E%3Cg fill='%23f2bfd0' stroke='none'%3E%3Ccircle cx='20' cy='13' r='1.5'/%3E%3Ccircle cx='10' cy='15' r='1.3'/%3E%3Ccircle cx='26' cy='13' r='1.2'/%3E%3C/g%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M3 8c8 4 18 4 26 0'/%3E%3Cpath d='M6 10l3 8 3-7M14 11.5l2.5 8 2.5-8M21 11l3 7 3-8'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='5' y='12' width='22' height='15' rx='2'/%3E%3Cpath d='M4 12h24v-4H4zM16 8v19M16 8c-2-5-8-5-7-1s7 1 7 1c2-5 8-5 7-1s-7 1-7 1'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f2bfd0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(62 358) rotate(-22) scale(1.25)'/%3E%3Cuse href='%23b' transform='translate(276 132) rotate(8) scale(0.99)'/%3E%3Cuse href='%23c' transform='translate(337 252) rotate(-10) scale(1.23)'/%3E%3Cuse href='%23a' transform='translate(206 367) rotate(-2) scale(1.00)'/%3E%3Cuse href='%23c' transform='translate(336 -19) rotate(14) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(336 381) rotate(14) scale(1.10)'/%3E%3Cuse href='%23d' transform='translate(122 184) rotate(-7) scale(1.24)'/%3E%3Cuse href='%23d' transform='translate(25 68) rotate(-22) scale(1.07)'/%3E%3Cuse href='%23d' transform='translate(425 68) rotate(-22) scale(1.07)'/%3E%3Cuse href='%23a' transform='translate(228 243) rotate(-13) scale(1.24)'/%3E%3Cuse href='%23e' transform='translate(153 66) rotate(-6) scale(1.23)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-coffee{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cg fill='%237d5a3c' stroke='none'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='14' r='1.6'/%3E%3Ccircle cx='14' cy='20' r='1.6'/%3E%3Ccircle cx='21' cy='21' r='1.3'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 22 27 12v14H4z'/%3E%3Cpath d='M4 22h23M4 22v4'/%3E%3Cpath d='M14 17.5l1-6'/%3E%3Cellipse cx='15.2' cy='9.5' rx='1.1' ry='1.7' fill='%237d5a3c' stroke='none'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M5 12h17v8a7 7 0 0 1-7 7h-3a7 7 0 0 1-7-7z'/%3E%3Cpath d='M22 14h2a3 3 0 0 1 0 6h-2M10 4c-1 2 1 3 0 5M15 4c-1 2 1 3 0 5'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M8 13h14v8a6 6 0 0 1-6 6h-2a6 6 0 0 1-6-6z'/%3E%3Cpath d='M22 15c3 0 5 2 5 6M8 16c-3-1-5 1-5 4l4 3M13 13a4 4 0 0 1 4-4'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M8 17h16l-2 11H10z'/%3E%3Cpath d='M7 17c-2-5 3-8 5-7 0-4 8-4 8 0 2-1 7 2 5 7z'/%3E%3Cpath d='M13 17l1 11M19 17l-1 11'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%237d5a3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(139 88) rotate(7) scale(1.07)'/%3E%3Cuse href='%23b' transform='translate(320 -26) rotate(19) scale(1.24)'/%3E%3Cuse href='%23b' transform='translate(320 374) rotate(19) scale(1.24)'/%3E%3Cuse href='%23c' transform='translate(197 308) rotate(18) scale(1.29)'/%3E%3Cuse href='%23d' transform='translate(362 117) rotate(3) scale(0.97)'/%3E%3Cuse href='%23e' transform='translate(90 -13) rotate(14) scale(1.24)'/%3E%3Cuse href='%23e' transform='translate(90 387) rotate(14) scale(1.24)'/%3E%3Cuse href='%23c' transform='translate(42 257) rotate(7) scale(1.04)'/%3E%3Cuse href='%23c' transform='translate(296 261) rotate(4) scale(0.97)'/%3E%3Cuse href='%23e' transform='translate(190 201) rotate(5) scale(0.98)'/%3E%3Cuse href='%23d' transform='translate(252 85) rotate(7) scale(1.25)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cg fill='%23e6cdb6' stroke='none'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='14' r='1.6'/%3E%3Ccircle cx='14' cy='20' r='1.6'/%3E%3Ccircle cx='21' cy='21' r='1.3'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 22 27 12v14H4z'/%3E%3Cpath d='M4 22h23M4 22v4'/%3E%3Cpath d='M14 17.5l1-6'/%3E%3Cellipse cx='15.2' cy='9.5' rx='1.1' ry='1.7' fill='%23e6cdb6' stroke='none'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M5 12h17v8a7 7 0 0 1-7 7h-3a7 7 0 0 1-7-7z'/%3E%3Cpath d='M22 14h2a3 3 0 0 1 0 6h-2M10 4c-1 2 1 3 0 5M15 4c-1 2 1 3 0 5'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M8 13h14v8a6 6 0 0 1-6 6h-2a6 6 0 0 1-6-6z'/%3E%3Cpath d='M22 15c3 0 5 2 5 6M8 16c-3-1-5 1-5 4l4 3M13 13a4 4 0 0 1 4-4'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M8 17h16l-2 11H10z'/%3E%3Cpath d='M7 17c-2-5 3-8 5-7 0-4 8-4 8 0 2-1 7 2 5 7z'/%3E%3Cpath d='M13 17l1 11M19 17l-1 11'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23e6cdb6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(139 88) rotate(7) scale(1.07)'/%3E%3Cuse href='%23b' transform='translate(320 -26) rotate(19) scale(1.24)'/%3E%3Cuse href='%23b' transform='translate(320 374) rotate(19) scale(1.24)'/%3E%3Cuse href='%23c' transform='translate(197 308) rotate(18) scale(1.29)'/%3E%3Cuse href='%23d' transform='translate(362 117) rotate(3) scale(0.97)'/%3E%3Cuse href='%23e' transform='translate(90 -13) rotate(14) scale(1.24)'/%3E%3Cuse href='%23e' transform='translate(90 387) rotate(14) scale(1.24)'/%3E%3Cuse href='%23c' transform='translate(42 257) rotate(7) scale(1.04)'/%3E%3Cuse href='%23c' transform='translate(296 261) rotate(4) scale(0.97)'/%3E%3Cuse href='%23e' transform='translate(190 201) rotate(5) scale(0.98)'/%3E%3Cuse href='%23d' transform='translate(252 85) rotate(7) scale(1.25)'/%3E%3C/g%3E%3C/svg%3E")}
:is(body.home,.stylepreview).skin-season.season-autumn{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 5c4 6 7 10 7 14a7 7 0 0 1-14 0c0-4 3-8 7-14z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 16a12 12 0 0 1 24 0z'/%3E%3Cpath d='M16 16v9a3 3 0 0 1-6 0M16 4v2'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M7 25C7 13 14 6 26 6c0 12-7 19-19 19z'/%3E%3Cpath d='M7 25 19 13'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M9 14c0 8 3 13 7 13s7-5 7-13z'/%3E%3Cpath d='M7 14h18c0-5-4-7-9-7s-9 2-9 7zM16 7V4'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M16 28V18M16 4l2 5 4-2-1 5 5-1-3 4 4 2-6 2 1 3-6-2-6 2 1-3-6-2 4-2-3-4 5 1-1-5 4 2z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23a2582a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(361 294) rotate(3) scale(1.30)'/%3E%3Cuse href='%23b' transform='translate(180 90) rotate(5) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(61 128) rotate(-1) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(223 297) rotate(10) scale(1.25)'/%3E%3Cuse href='%23d' transform='translate(0 -6) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(0 394) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(400 -6) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(400 394) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(281 31) rotate(19) scale(1.06)'/%3E%3Cuse href='%23e' transform='translate(339 143) rotate(-4) scale(1.17)'/%3E%3Cuse href='%23e' transform='translate(99 305) rotate(9) scale(1.19)'/%3E%3Cuse href='%23e' transform='translate(159 200) rotate(-16) scale(1.25)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M16 5c4 6 7 10 7 14a7 7 0 0 1-14 0c0-4 3-8 7-14z'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M4 16a12 12 0 0 1 24 0z'/%3E%3Cpath d='M16 16v9a3 3 0 0 1-6 0M16 4v2'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M7 25C7 13 14 6 26 6c0 12-7 19-19 19z'/%3E%3Cpath d='M7 25 19 13'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M9 14c0 8 3 13 7 13s7-5 7-13z'/%3E%3Cpath d='M7 14h18c0-5-4-7-9-7s-9 2-9 7zM16 7V4'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M16 28V18M16 4l2 5 4-2-1 5 5-1-3 4 4 2-6 2 1 3-6-2-6 2 1-3-6-2 4-2-3-4 5 1-1-5 4 2z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f0c8a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(361 294) rotate(3) scale(1.30)'/%3E%3Cuse href='%23b' transform='translate(180 90) rotate(5) scale(1.10)'/%3E%3Cuse href='%23c' transform='translate(61 128) rotate(-1) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(223 297) rotate(10) scale(1.25)'/%3E%3Cuse href='%23d' transform='translate(0 -6) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(0 394) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(400 -6) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(400 394) rotate(16) scale(1.01)'/%3E%3Cuse href='%23d' transform='translate(281 31) rotate(19) scale(1.06)'/%3E%3Cuse href='%23e' transform='translate(339 143) rotate(-4) scale(1.17)'/%3E%3Cuse href='%23e' transform='translate(99 305) rotate(9) scale(1.19)'/%3E%3Cuse href='%23e' transform='translate(159 200) rotate(-16) scale(1.25)'/%3E%3C/g%3E%3C/svg%3E");--page-tone:color-mix(in srgb,#d9883f 8%,var(--bg))}
:is(body.home,.stylepreview).skin-season.season-sint{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M4 20V11h7c1 4 5 6 10 6 4 0 7 2 7 5v2H4z'/%3E%3Cpath d='M4 20h24'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 28V14c0-5 3-8 7-11 4 3 7 6 7 11v14z'/%3E%3Cpath d='M16 9v8M13 12h6M9 23h14'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M14 29V11a6 6 0 1 1 9-5c0 3-3 3-3 0'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cg fill='%23a53b3b' stroke='none' fill-opacity='.8'%3E%3Ccircle cx='9' cy='12' r='3.2'/%3E%3Ccircle cx='20' cy='9' r='2.8'/%3E%3Ccircle cx='15' cy='20' r='3.4'/%3E%3Ccircle cx='24' cy='21' r='2.6'/%3E%3C/g%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='5' y='12' width='22' height='15' rx='2'/%3E%3Cpath d='M4 12h24v-4H4zM16 8v19M16 8c-2-5-8-5-7-1s7 1 7 1c2-5 8-5 7-1s-7 1-7 1'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23a53b3b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(94 285) rotate(-2) scale(0.99)'/%3E%3Cuse href='%23a' transform='translate(34 79) rotate(8) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(243 9) rotate(-13) scale(1.30)'/%3E%3Cuse href='%23b' transform='translate(243 409) rotate(-13) scale(1.30)'/%3E%3Cuse href='%23c' transform='translate(369 268) rotate(10) scale(1.27)'/%3E%3Cuse href='%23c' transform='translate(231 117) rotate(7) scale(1.28)'/%3E%3Cuse href='%23d' transform='translate(237 279) rotate(15) scale(1.15)'/%3E%3Cuse href='%23b' transform='translate(336 162) rotate(-20) scale(0.97)'/%3E%3Cuse href='%23d' transform='translate(126 155) rotate(-8) scale(1.18)'/%3E%3Cuse href='%23e' transform='translate(131 -7) rotate(5) scale(1.11)'/%3E%3Cuse href='%23e' transform='translate(131 393) rotate(5) scale(1.11)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M4 20V11h7c1 4 5 6 10 6 4 0 7 2 7 5v2H4z'/%3E%3Cpath d='M4 20h24'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M9 28V14c0-5 3-8 7-11 4 3 7 6 7 11v14z'/%3E%3Cpath d='M16 9v8M13 12h6M9 23h14'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M14 29V11a6 6 0 1 1 9-5c0 3-3 3-3 0'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cg fill='%23f0c0bb' stroke='none' fill-opacity='.8'%3E%3Ccircle cx='9' cy='12' r='3.2'/%3E%3Ccircle cx='20' cy='9' r='2.8'/%3E%3Ccircle cx='15' cy='20' r='3.4'/%3E%3Ccircle cx='24' cy='21' r='2.6'/%3E%3C/g%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Crect x='5' y='12' width='22' height='15' rx='2'/%3E%3Cpath d='M4 12h24v-4H4zM16 8v19M16 8c-2-5-8-5-7-1s7 1 7 1c2-5 8-5 7-1s-7 1-7 1'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f0c0bb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(94 285) rotate(-2) scale(0.99)'/%3E%3Cuse href='%23a' transform='translate(34 79) rotate(8) scale(1.11)'/%3E%3Cuse href='%23b' transform='translate(243 9) rotate(-13) scale(1.30)'/%3E%3Cuse href='%23b' transform='translate(243 409) rotate(-13) scale(1.30)'/%3E%3Cuse href='%23c' transform='translate(369 268) rotate(10) scale(1.27)'/%3E%3Cuse href='%23c' transform='translate(231 117) rotate(7) scale(1.28)'/%3E%3Cuse href='%23d' transform='translate(237 279) rotate(15) scale(1.15)'/%3E%3Cuse href='%23b' transform='translate(336 162) rotate(-20) scale(0.97)'/%3E%3Cuse href='%23d' transform='translate(126 155) rotate(-8) scale(1.18)'/%3E%3Cuse href='%23e' transform='translate(131 -7) rotate(5) scale(1.11)'/%3E%3Cuse href='%23e' transform='translate(131 393) rotate(5) scale(1.11)'/%3E%3C/g%3E%3C/svg%3E");--page-tone:color-mix(in srgb,#c9483e 8%,var(--bg))}
:is(body.home,.stylepreview).skin-season.season-xmas{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='18' r='9'/%3E%3Cpath d='M13 9h6v-3h-6zM8 16c5 2 11 2 16 0'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 3 9 12h4l-6 8h5l-6 7h20l-6-7h5l-6-8h4z'/%3E%3Cpath d='M16 27v3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='5' y='12' width='22' height='15' rx='2'/%3E%3Cpath d='M4 12h24v-4H4zM16 8v19M16 8c-2-5-8-5-7-1s7 1 7 1c2-5 8-5 7-1s-7 1-7 1'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M12 29V12a5 5 0 0 1 10 0v2'/%3E%3Cpath d='M12 24l4-3M12 18l4-3M14 10l4 2'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3.5 7.6 8.2.9-6.1 5.6 1.7 8.1L16 22.1 8.7 26.2l1.7-8.1-6.1-5.6 8.2-.9z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%232f7a4f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(239 317) rotate(-2) scale(0.98)'/%3E%3Cuse href='%23a' transform='translate(12 216) rotate(0) scale(0.99)'/%3E%3Cuse href='%23a' transform='translate(412 216) rotate(0) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(262 203) rotate(-17) scale(1.07)'/%3E%3Cuse href='%23c' transform='translate(2 367) rotate(1) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(402 367) rotate(1) scale(1.26)'/%3E%3Cuse href='%23d' transform='translate(114 273) rotate(16) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(-22 74) rotate(-20) scale(1.09)'/%3E%3Cuse href='%23c' transform='translate(378 74) rotate(-20) scale(1.09)'/%3E%3Cuse href='%23d' transform='translate(158 71) rotate(-13) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(271 22) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(271 422) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23e' transform='translate(107 165) rotate(21) scale(1.22)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='18' r='9'/%3E%3Cpath d='M13 9h6v-3h-6zM8 16c5 2 11 2 16 0'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 3 9 12h4l-6 8h5l-6 7h20l-6-7h5l-6-8h4z'/%3E%3Cpath d='M16 27v3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Crect x='5' y='12' width='22' height='15' rx='2'/%3E%3Cpath d='M4 12h24v-4H4zM16 8v19M16 8c-2-5-8-5-7-1s7 1 7 1c2-5 8-5 7-1s-7 1-7 1'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M12 29V12a5 5 0 0 1 10 0v2'/%3E%3Cpath d='M12 24l4-3M12 18l4-3M14 10l4 2'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M16 4l3.5 7.6 8.2.9-6.1 5.6 1.7 8.1L16 22.1 8.7 26.2l1.7-8.1-6.1-5.6 8.2-.9z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23bfe6cc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(239 317) rotate(-2) scale(0.98)'/%3E%3Cuse href='%23a' transform='translate(12 216) rotate(0) scale(0.99)'/%3E%3Cuse href='%23a' transform='translate(412 216) rotate(0) scale(0.99)'/%3E%3Cuse href='%23b' transform='translate(262 203) rotate(-17) scale(1.07)'/%3E%3Cuse href='%23c' transform='translate(2 367) rotate(1) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(402 367) rotate(1) scale(1.26)'/%3E%3Cuse href='%23d' transform='translate(114 273) rotate(16) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(-22 74) rotate(-20) scale(1.09)'/%3E%3Cuse href='%23c' transform='translate(378 74) rotate(-20) scale(1.09)'/%3E%3Cuse href='%23d' transform='translate(158 71) rotate(-13) scale(1.09)'/%3E%3Cuse href='%23b' transform='translate(271 22) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23b' transform='translate(271 422) rotate(-18) scale(1.02)'/%3E%3Cuse href='%23e' transform='translate(107 165) rotate(21) scale(1.22)'/%3E%3C/g%3E%3C/svg%3E");--page-tone:color-mix(in srgb,#3f9a63 8%,var(--bg))}
:is(body.home,.stylepreview).skin-season.season-winter{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M10 27V14a7 7 0 0 1 14 0v6l3-3a2.5 2.5 0 0 1 3 3l-6 6v1z'/%3E%3Cpath d='M10 23h14'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='9' r='5'/%3E%3Ccircle cx='16' cy='21' r='8'/%3E%3Cg fill='%234d6f9a' stroke='none'%3E%3Ccircle cx='16' cy='19' r='1.1'/%3E%3Ccircle cx='16' cy='23' r='1.1'/%3E%3C/g%3E%3Cpath d='M21 9h3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M16 3v26M5 9.5l22 13M5 22.5l22-13M13 5l3 3 3-3M13 27l3-3 3 3M5 13l4 0-2-3M27 19l-4 0 2 3M5 19l4 0-2 3M27 13l-4 0 2-3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M6 22a10 10 0 0 1 20 0z'/%3E%3Crect x='5' y='22' width='22' height='5' rx='2'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%234d6f9a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(112 101) rotate(-3) scale(1.25)'/%3E%3Cuse href='%23b' transform='translate(71 333) rotate(2) scale(1.05)'/%3E%3Cuse href='%23b' transform='translate(240 219) rotate(-16) scale(1.17)'/%3E%3Cuse href='%23a' transform='translate(224 -27) rotate(11) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(224 373) rotate(11) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(349 102) rotate(17) scale(0.97)'/%3E%3Cuse href='%23d' transform='translate(-17 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23d' transform='translate(383 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23c' transform='translate(93 228) rotate(-12) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(359 350) rotate(-22) scale(1.08)'/%3E%3Cuse href='%23d' transform='translate(234 80) rotate(13) scale(1.03)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M10 27V14a7 7 0 0 1 14 0v6l3-3a2.5 2.5 0 0 1 3 3l-6 6v1z'/%3E%3Cpath d='M10 23h14'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='9' r='5'/%3E%3Ccircle cx='16' cy='21' r='8'/%3E%3Cg fill='%23c6d8f0' stroke='none'%3E%3Ccircle cx='16' cy='19' r='1.1'/%3E%3Ccircle cx='16' cy='23' r='1.1'/%3E%3C/g%3E%3Cpath d='M21 9h3'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M16 3v26M5 9.5l22 13M5 22.5l22-13M13 5l3 3 3-3M13 27l3-3 3 3M5 13l4 0-2-3M27 19l-4 0 2 3M5 19l4 0-2 3M27 13l-4 0 2-3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M6 22a10 10 0 0 1 20 0z'/%3E%3Crect x='5' y='22' width='22' height='5' rx='2'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23c6d8f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(112 101) rotate(-3) scale(1.25)'/%3E%3Cuse href='%23b' transform='translate(71 333) rotate(2) scale(1.05)'/%3E%3Cuse href='%23b' transform='translate(240 219) rotate(-16) scale(1.17)'/%3E%3Cuse href='%23a' transform='translate(224 -27) rotate(11) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(224 373) rotate(11) scale(1.28)'/%3E%3Cuse href='%23c' transform='translate(349 102) rotate(17) scale(0.97)'/%3E%3Cuse href='%23d' transform='translate(-17 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23d' transform='translate(383 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23c' transform='translate(93 228) rotate(-12) scale(1.26)'/%3E%3Cuse href='%23c' transform='translate(359 350) rotate(-22) scale(1.08)'/%3E%3Cuse href='%23d' transform='translate(234 80) rotate(13) scale(1.03)'/%3E%3C/g%3E%3C/svg%3E");--page-tone:color-mix(in srgb,#7fa2d6 8%,var(--bg))}
:is(body.home,.stylepreview).skin-season.season-spring{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M10 7l3 3 3-5 3 5 3-3v7a6 6 0 0 1-12 0z'/%3E%3Cpath d='M16 20v9M16 26c-3-1-5-3-6-6M16 24c3-1 4-3 5-5'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M5 18c4 0 6-3 8-6 3-4 9-4 11 0l3 1-3 2c0 6-6 10-12 9-3 0-5-2-7-6z'/%3E%3Ccircle cx='21' cy='11.5' r='1' fill='%236f8a3a' stroke='none'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='11' r='2.6'/%3E%3Ccircle cx='16' cy='5.5' r='3'/%3E%3Ccircle cx='21.2' cy='9.3' r='3'/%3E%3Ccircle cx='19.2' cy='15.4' r='3'/%3E%3Ccircle cx='12.8' cy='15.4' r='3'/%3E%3Ccircle cx='10.8' cy='9.3' r='3'/%3E%3Cpath d='M16 18.5V29M16 25c2-3 5-3 7-3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 9v16'/%3E%3Cpath d='M16 14c-3-7-12-8-11-2 0 4 6 5 11 4zM16 14c3-7 12-8 11-2 0 4-6 5-11 4zM16 17c-4 0-9 2-7 6s7-1 7-4M16 17c4 0 9 2 7 6s-7-1-7-4'/%3E%3Cpath d='M14 7l2 2 2-2'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M7 7l3 3M22 22l3 3M25 7l-3 3M10 22l-3 3'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%236f8a3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(39 52) rotate(-15) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(132 274) rotate(-0) scale(1.22)'/%3E%3Cuse href='%23c' transform='translate(201 29) rotate(-12) scale(1.22)'/%3E%3Cuse href='%23c' transform='translate(201 429) rotate(-12) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(20 343) rotate(-2) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(420 343) rotate(-2) scale(1.16)'/%3E%3Cuse href='%23d' transform='translate(296 251) rotate(-10) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(325 144) rotate(-5) scale(1.25)'/%3E%3Cuse href='%23d' transform='translate(37 163) rotate(5) scale(1.08)'/%3E%3Cuse href='%23e' transform='translate(329 0) rotate(-14) scale(1.06)'/%3E%3Cuse href='%23e' transform='translate(329 400) rotate(-14) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(199 167) rotate(-20) scale(0.96)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M10 7l3 3 3-5 3 5 3-3v7a6 6 0 0 1-12 0z'/%3E%3Cpath d='M16 20v9M16 26c-3-1-5-3-6-6M16 24c3-1 4-3 5-5'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M5 18c4 0 6-3 8-6 3-4 9-4 11 0l3 1-3 2c0 6-6 10-12 9-3 0-5-2-7-6z'/%3E%3Ccircle cx='21' cy='11.5' r='1' fill='%23d5e8b0' stroke='none'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='11' r='2.6'/%3E%3Ccircle cx='16' cy='5.5' r='3'/%3E%3Ccircle cx='21.2' cy='9.3' r='3'/%3E%3Ccircle cx='19.2' cy='15.4' r='3'/%3E%3Ccircle cx='12.8' cy='15.4' r='3'/%3E%3Ccircle cx='10.8' cy='9.3' r='3'/%3E%3Cpath d='M16 18.5V29M16 25c2-3 5-3 7-3'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Cpath d='M16 9v16'/%3E%3Cpath d='M16 14c-3-7-12-8-11-2 0 4 6 5 11 4zM16 14c3-7 12-8 11-2 0 4-6 5-11 4zM16 17c-4 0-9 2-7 6s7-1 7-4M16 17c4 0 9 2 7 6s-7-1-7-4'/%3E%3Cpath d='M14 7l2 2 2-2'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M7 7l3 3M22 22l3 3M25 7l-3 3M10 22l-3 3'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23d5e8b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(39 52) rotate(-15) scale(1.26)'/%3E%3Cuse href='%23b' transform='translate(132 274) rotate(-0) scale(1.22)'/%3E%3Cuse href='%23c' transform='translate(201 29) rotate(-12) scale(1.22)'/%3E%3Cuse href='%23c' transform='translate(201 429) rotate(-12) scale(1.22)'/%3E%3Cuse href='%23a' transform='translate(20 343) rotate(-2) scale(1.16)'/%3E%3Cuse href='%23a' transform='translate(420 343) rotate(-2) scale(1.16)'/%3E%3Cuse href='%23d' transform='translate(296 251) rotate(-10) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(325 144) rotate(-5) scale(1.25)'/%3E%3Cuse href='%23d' transform='translate(37 163) rotate(5) scale(1.08)'/%3E%3Cuse href='%23e' transform='translate(329 0) rotate(-14) scale(1.06)'/%3E%3Cuse href='%23e' transform='translate(329 400) rotate(-14) scale(1.06)'/%3E%3Cuse href='%23b' transform='translate(199 167) rotate(-20) scale(0.96)'/%3E%3C/g%3E%3C/svg%3E");--page-tone:color-mix(in srgb,#8fb34c 8%,var(--bg))}
:is(body.home,.stylepreview).skin-season.season-summer{--pp-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M4 15C7 6 25 6 28 15z'/%3E%3Cpath d='M16 9v19M4 15c2 2 4 2 6 0 2 2 4 2 6 0 2 2 4 2 6 0 2 2 4 2 6 0M10 28h12'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 27 5 14a11 11 0 0 1 22 0z'/%3E%3Cpath d='M16 27 11 8M16 27V5M16 27l5-19M16 27 7 11M16 27l9-16'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M10 15l6 14 6-14'/%3E%3Cpath d='M9 15a7 7 0 0 1 14 0z'/%3E%3Cpath d='M12 19h8M13 22l5-5'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M7 7l3 3M22 22l3 3M25 7l-3 3M10 22l-3 3'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M3 13c3-3 6-3 9 0s6 3 9 0 6-3 8 0M3 20c3-3 6-3 9 0s6 3 9 0 6-3 8 0'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M3 13h26M7 13c0 5 1 7 4 7s4-2 4-7M17 13c0 5 1 7 4 7s4-2 4-7'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23c2771e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cuse href='%23a' transform='translate(112 101) rotate(-3) scale(1.25)'/%3E%3Cuse href='%23b' transform='translate(71 333) rotate(2) scale(1.05)'/%3E%3Cuse href='%23c' transform='translate(240 219) rotate(-16) scale(1.17)'/%3E%3Cuse href='%23a' transform='translate(224 -27) rotate(11) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(224 373) rotate(11) scale(1.28)'/%3E%3Cuse href='%23d' transform='translate(349 102) rotate(17) scale(0.97)'/%3E%3Cuse href='%23e' transform='translate(-17 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23e' transform='translate(383 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23e' transform='translate(93 228) rotate(-12) scale(1.26)'/%3E%3Cuse href='%23f' transform='translate(359 350) rotate(-22) scale(1.08)'/%3E%3Cuse href='%23c' transform='translate(234 80) rotate(13) scale(1.03)'/%3E%3C/g%3E%3C/svg%3E");--pp-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cg id='a' transform='translate(-16 -16)'%3E%3Cpath d='M4 15C7 6 25 6 28 15z'/%3E%3Cpath d='M16 9v19M4 15c2 2 4 2 6 0 2 2 4 2 6 0 2 2 4 2 6 0 2 2 4 2 6 0M10 28h12'/%3E%3C/g%3E%3Cg id='b' transform='translate(-16 -16)'%3E%3Cpath d='M16 27 5 14a11 11 0 0 1 22 0z'/%3E%3Cpath d='M16 27 11 8M16 27V5M16 27l5-19M16 27 7 11M16 27l9-16'/%3E%3C/g%3E%3Cg id='c' transform='translate(-16 -16)'%3E%3Cpath d='M10 15l6 14 6-14'/%3E%3Cpath d='M9 15a7 7 0 0 1 14 0z'/%3E%3Cpath d='M12 19h8M13 22l5-5'/%3E%3C/g%3E%3Cg id='d' transform='translate(-16 -16)'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M7 7l3 3M22 22l3 3M25 7l-3 3M10 22l-3 3'/%3E%3C/g%3E%3Cg id='e' transform='translate(-16 -16)'%3E%3Cpath d='M3 13c3-3 6-3 9 0s6 3 9 0 6-3 8 0M3 20c3-3 6-3 9 0s6 3 9 0 6-3 8 0'/%3E%3C/g%3E%3Cg id='f' transform='translate(-16 -16)'%3E%3Cpath d='M3 13h26M7 13c0 5 1 7 4 7s4-2 4-7M17 13c0 5 1 7 4 7s4-2 4-7'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23f3d3a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cuse href='%23a' transform='translate(112 101) rotate(-3) scale(1.25)'/%3E%3Cuse href='%23b' transform='translate(71 333) rotate(2) scale(1.05)'/%3E%3Cuse href='%23c' transform='translate(240 219) rotate(-16) scale(1.17)'/%3E%3Cuse href='%23a' transform='translate(224 -27) rotate(11) scale(1.28)'/%3E%3Cuse href='%23a' transform='translate(224 373) rotate(11) scale(1.28)'/%3E%3Cuse href='%23d' transform='translate(349 102) rotate(17) scale(0.97)'/%3E%3Cuse href='%23e' transform='translate(-17 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23e' transform='translate(383 241) rotate(-10) scale(1.30)'/%3E%3Cuse href='%23e' transform='translate(93 228) rotate(-12) scale(1.26)'/%3E%3Cuse href='%23f' transform='translate(359 350) rotate(-22) scale(1.08)'/%3E%3Cuse href='%23c' transform='translate(234 80) rotate(13) scale(1.03)'/%3E%3C/g%3E%3C/svg%3E");--page-tone:color-mix(in srgb,#efb23f 8%,var(--bg))}


.pagein{animation:gpPageIn .2s cubic-bezier(.2,.7,.3,1) both}
@keyframes gpPageIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
#more.open{animation:gpPopup .16s ease-out both}
@keyframes gpPopup{from{opacity:0;transform:translateY(-4px) scale(.99)}to{opacity:1;transform:none}}
.dayitem{border-bottom:1px solid color-mix(in srgb,var(--line) 54%,transparent)}.dayitem:last-child{border-bottom:0}.dayitem .hdrow{border-bottom:0;padding:11px 4px}.dayitem.open{background:color-mix(in srgb,var(--pc) 3%,var(--card));border-radius:15px;margin:4px -5px;padding:0 5px}.hdrow .ticon{box-shadow:none}.dname small{margin-top:1px}.daydetail{margin:0 3px 10px 44px;padding:13px 14px;border-radius:15px;background:color-mix(in srgb,var(--pc) 5%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 17%,var(--line));animation:ddIn .18s ease-out both}
@keyframes ddIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.ddmain{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;gap:14px;align-items:center}.ddstatus{display:flex;align-items:center;gap:10px}.ddcheck{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:white;font-weight:900}.ddstatus b,.ddstatus small{display:block}.ddstatus small{font-size:11px;color:var(--mut);margin-top:1px}.ddmetrics{display:flex;gap:8px}.ddmetric{display:grid;grid-template-columns:auto auto;gap:0 5px;align-items:center;min-width:62px}.ddmetric>span{grid-row:1/3;font-size:18px}.ddmetric b{font-size:14px}.ddmetric small{font-size:10px;color:var(--mut)}.ddmetric.good b{color:var(--ok)}.dayview{box-shadow:none;background:var(--pc);border-color:var(--pc);color:#fff;padding:9px 12px}.ddpeople{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.ddperson{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--line) 20%,transparent);font-size:11px;color:var(--mut)}.ddperson.done{color:var(--fg);background:color-mix(in srgb,var(--ok) 8%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 22%,var(--line))}.ddperson.otherdone{border:1px dashed color-mix(in srgb,var(--ok) 35%,var(--line))}.ddperson i{color:var(--ok);font-style:normal}.ddperson .rq{padding:1px 4px;font-size:10px}.ddother,.otherday{color:var(--ok)!important;font-weight:800}.ddother{padding-left:4px;border-left:1px solid color-mix(in srgb,var(--line) 65%,transparent)}.daypeer>span.otherdone{color:var(--ok);border:1px dashed color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok) 5%,var(--card))}.peerdev{font-style:normal;font-size:10px;line-height:1}
.hsamenp{position:relative;display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--fg);width:100%;cursor:pointer}.hsamenp:hover{background:color-mix(in srgb,var(--pc) 5%,var(--card));transform:none}.hsgo{font-size:25px;color:var(--mut);font-weight:300}.sviews{display:flex;gap:4px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--line) 34%,transparent);align-self:flex-start;flex-wrap:wrap}.sviews button{border:0;box-shadow:none;background:transparent;padding:8px 16px}.sviews button.on{background:var(--card);color:var(--fg);box-shadow:0 2px 7px var(--sh)}.smetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.smetric{display:flex;align-items:center;gap:12px;box-shadow:0 4px 14px var(--sh)}.smetric .smic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:color-mix(in srgb,var(--pc) 10%,var(--card));flex:none}.smetric small,.smetric b,.smetric div>span{display:block}.smetric small{font-size:11px;color:var(--mut);font-weight:800}.smetric b{font-size:24px;line-height:1.15;margin:2px 0}.smetric div>span{font-size:11px;color:var(--mut)}.smetric.green .smic{background:#e9f5ed}.smetric.pink .smic{background:#fbecef}.smetric.yellow .smic{background:#fff5d8}.smetric.blue .smic{background:#e9f2fb}.smetric.peach .smic{background:#fff0e4}.smetric.purple .smic{background:#f0eafb}.srecentlist{display:flex;flex-direction:column}.srecent{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--line) 52%,transparent)}.srecent:first-child{border-top:0}.srecent b,.srecent small{display:block}.srecent small{font-size:10px;color:var(--mut)}.srecent>span{font-size:11px;white-space:nowrap}.spuzzle{padding:9px 0;border-top:1px solid color-mix(in srgb,var(--line) 48%,transparent)}.spmain{display:block;width:100%;padding:0;border:0;background:transparent;color:var(--fg);box-shadow:none;text-align:left;border-radius:10px}.spmain:hover{background:color-mix(in srgb,var(--pc) 4%,transparent);transform:none}.spmain .sphead strong i{display:inline-block;font-style:normal;color:var(--mut);font-size:14px;transition:transform .16s ease}.spmain.open .sphead strong i{transform:rotate(180deg)}.spuzzle:first-of-type{border-top:0}.sphead{display:flex;align-items:center;justify-content:space-between;gap:10px}.sphead>span{display:flex;align-items:center;gap:8px;font-size:13px}.sphead .ticon{width:25px;height:25px;font-size:11px;border-radius:7px;box-shadow:none}.sphead>strong{font-size:12px;color:var(--mut)}.spbar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--line) 28%,transparent);overflow:hidden;margin:6px 0}.spbar i{display:block;height:100%;border-radius:99px}.spmeta{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:10.5px;color:var(--mut);font-weight:750}.spmeta span{white-space:nowrap}.spfree{color:var(--pc)}.spdetail{margin:7px 0 1px;padding:8px 9px;border-radius:11px;background:color-mix(in srgb,var(--pc) 4%,var(--bg));border:1px solid color-mix(in srgb,var(--pc) 13%,var(--line));animation:ddIn .16s ease-out both}.spdetail[hidden]{display:none}.spdlab{font-size:9.5px;font-weight:850;color:var(--mut);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em}.spdrow{display:grid;grid-template-columns:74px 34px repeat(4,minmax(58px,1fr));gap:6px;align-items:center;padding:4px 0;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent);font-size:10px;color:var(--mut);font-weight:700}.spdrow:first-of-type{border-top:0}.spdrow b{color:var(--fg);font-size:10.5px}.spempty{font-size:10.5px;color:var(--mut);font-weight:700}
body.tablet.nieuw:not(.home):not(.newpick){height:100dvh;overflow:hidden}body.tablet.nieuw:not(.home):not(.newpick) main{height:calc(100dvh - 62px);overflow:auto;overscroll-behavior:contain;padding-bottom:10px}body.tablet.newpick{height:100dvh;overflow:hidden}body.tablet.newpick main{height:calc(100dvh - 62px);overflow:hidden;padding-bottom:0}body.tablet.newpick #stage{min-height:0;height:100%;overflow:hidden}body.tablet.newpick #npm{margin:clamp(12px,4vh,42px) auto 0;max-height:calc(100% - 16px);overflow:visible}
.dayitem.featured{margin:4px -7px 6px;padding:0 7px;border-radius:16px;background:color-mix(in srgb,var(--dayc) 6%,var(--card));box-shadow:inset 0 3px 0 var(--dayc);border-bottom-color:transparent}.dayitem.featured .hdrow{padding-top:12px;padding-bottom:12px}.featlabel{color:var(--dayc)!important;font-weight:850!important}.dayitem.featured .featlabel+.otherday{margin-top:5px}.daypeer{display:flex;align-items:center;gap:4px;flex:none}.daypeer>span{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;color:var(--mut);background:color-mix(in srgb,var(--line) 18%,transparent);white-space:nowrap}.daypeer>span.done{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 22%,var(--line))}.daypeer>span.busy{color:#c97a00;background:color-mix(in srgb,#c97a00 10%,var(--card))}.daypeer b{color:inherit}.peerico{font-style:normal;font-size:11px;line-height:1;margin-left:2px}@media(max-width:700px){.daypeer b{display:none}.daypeer>span{padding:4px 8px}}


/* Pagina's die daadwerkelijk in het iPad-venster passen hoeven niet te rubber-banden/scrollen. */
html.pagefit,body.pagefit{height:100dvh;overflow:hidden!important;overscroll-behavior:none}
.scontrols{display:flex;align-items:center;justify-content:space-between;gap:16px}
.scontrols .sviews,.scontrols .sper{align-self:auto}

@media(min-width:901px){
 .sovermain{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.55fr);gap:14px;align-items:stretch}
 .soverheroes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .soverheroes .shero{min-width:0}
 .sovermain>.hcard{height:100%;box-sizing:border-box}
 .personview .smetric small{font-size:12px!important}
 .personview .smetric b{font-size:25px!important}
 .personview .smetric div>span{font-size:12px!important}
 .personview .sphead>span{font-size:16px!important}
 .personview .sphead>strong{font-size:13px}
 .personview .spmeta{font-size:12.5px!important;gap:6px 13px!important}
 .personview .srecent b{font-size:15px}
 .personview .srecent small{font-size:12px!important}
 .personview .srecent>span{font-size:13px!important}
 .personview .shd1 b{font-size:19px}
}

@media(min-width:901px){
 #home .hwrap.sco{max-width:1240px;padding-top:18px;padding-bottom:40px;gap:16px}
 .sco .stop{gap:14px}.sco #sBack{width:44px;height:44px;border-radius:14px;font-size:22px}
 .sco .stop h2{font-size:29px}
 .sco .stop .mut{font-size:14px}
 .sviews button{padding:10px 18px;font-size:14px}
 .sper button{padding:9px 17px;font-size:14px}
 .sco .hcard{padding:18px 20px;border-radius:20px}
 .shero{border-top-width:5px}
 .shero .snm{font-size:18px}
 .shero .sbig{font-size:42px;margin:7px 0 11px}
 .shero .sbig span{font-size:13px}
 .schips{gap:7px}.schips span{font-size:13px;padding:5px 9px}
 .shd{margin-bottom:13px}.shd b{font-size:18px}.shd .mut{font-size:13px}.snav{width:40px;height:40px}
 .shd1{margin-bottom:12px}.shd1 b{font-size:18px}.shd1 .mut{font-size:13px}
 .scal{gap:8px;grid-template-columns:minmax(62px,auto) repeat(7,minmax(0,1fr)) 36px}
 .sdh{font-size:13px}.sdh small{font-size:15px}
 .srn{font-size:15px}
 .scell{padding:8px;gap:5px;border-radius:12px;aspect-ratio:3/2;min-height:58px}
 .scell i{border-radius:4px}
 .scell.td{outline-width:2px;outline-offset:2px}
 .scnt{font-size:17px}
 .slg{margin-top:13px;gap:7px 14px;font-size:12px}
 .sbr{padding:8px 0}.sbt{font-size:15px}.strk{height:10px}
 .shm{gap:13px}.shp .srn{margin-bottom:7px}.shg{gap:4px;grid-auto-rows:18px}.shg i{aspect-ratio:auto!important;height:18px}.slg2{margin-top:8px}
 .personview .smetrics{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
 .personview .smetric{padding:14px 14px;gap:11px}
 .personview .smetric .smic{width:42px;height:42px;border-radius:12px;font-size:21px}
 .personview .smetric small{font-size:12px}
 .personview .smetric b{font-size:25px}
 .personview .smetric div>span{font-size:12px}
 .personview .hgrid2.sh2{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:14px}
 .personview .spuzzle{padding:11px 0}
 .personview .sphead>span{font-size:16px}.personview .sphead>strong{font-size:13px}.personview .spbar{margin:7px 0;height:7px}
 .personview .spmeta{font-size:12.5px;gap:6px 13px}
 .personview .srecent{padding:9px 0}
 .personview .srecent b{font-size:14px}
 .personview .srecent small{font-size:11.5px}.personview .srecent>span{font-size:12px}
 .personview .shd1 b{font-size:18px}
 .spdlab{font-size:11px}
 .spdrow{font-size:11.5px;grid-template-columns:86px 38px repeat(4,minmax(66px,1fr));gap:8px;padding:6px 0}
 .spdrow b{font-size:11.5px}
}

/* Compactere Home op tablet/desktop: dezelfde informatie, minder lege hoogte. */
@media(min-width:761px){
 #home .hwrap{max-width:1040px;padding-top:10px;padding-bottom:28px;gap:9px}
 .hbrand{font-size:19px;margin-bottom:-5px;gap:8px}
 #home h2{font-size:25px;line-height:1.05}
 .htop{gap:10px}
 .hsection{gap:7px;padding:2px 0 8px}
 .hsection+.hsection{padding-top:12px}
 .hsecthead h3{font-size:19px!important}
 .hsecthead>div>.mut{margin-top:0;font-size:11px}
 .hstreak{padding:4px 9px;font-size:12px}
 .hdlist{padding:2px 12px}
 .dayitem .hdrow{
   display:grid;
   grid-template-columns:18px 30px minmax(0,1fr) 96px 210px;
   column-gap:9px;
   align-items:center;
   padding:8px 3px
 }
 .dayitem.featured .hdrow{padding-top:9px;padding-bottom:9px}
 .hdrow .dot{justify-self:center}
 .hdrow .ticon{justify-self:center}
 .daypeer{width:96px;justify-content:center}
 .daypeer>span{width:100%;box-sizing:border-box;justify-content:center;padding:4px 8px;font-size:11px}
 .dstate.done{display:grid;grid-template-columns:68px 48px 48px 16px;gap:4px;align-items:center;justify-content:end;width:210px}
 .dstate.pending{display:flex;justify-content:flex-end;width:210px}
 .dtime{font-size:12px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
 .dmist,.dhint{display:flex;justify-content:center;min-width:0}.dmist:empty,.dhint:empty{visibility:hidden}
 .dstate.done .rq{justify-content:center;min-width:34px;box-sizing:border-box}
 .dpending{display:flex;align-items:center;justify-content:flex-end;gap:6px}
 .dstate>.darrow{justify-self:end}
 .dname{line-height:1.12}
 .dname small{margin-top:1px;font-size:10px}
 .dayitem.featured{position:relative;margin:2px 0 3px;padding-left:0;padding-right:0;box-shadow:inset 0 3px 0 var(--dayc)}
 .daypeer{justify-self:stretch}
 .hraad{padding:9px 13px;gap:10px;border-left-width:5px;border-radius:17px}
 .hraad .ticon.big{width:38px;height:38px;border-radius:11px;font-size:18px}
 .hraad b{font-size:15px}
 .hraad .mut{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hraad .hgo{font-size:22px}
 .hpill{font-size:9px;padding:2px 6px}
 .hfree .hsecthead{margin-bottom:-1px}
 .freegrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
 .freegrid .tile{min-height:98px;padding:11px 7px 9px;gap:5px;border-radius:16px}
 .freegrid .ticon.big{width:42px;height:42px;border-radius:12px;font-size:19px}
 .freegrid .tile>span:not(.ticon){font-size:13.5px}
 .freegrid .tile .tcount{font-size:10px}
 .hshuffle{padding:6px 10px;font-size:12px}
 .htogether{padding-top:10px!important}
 .hhomeviews button{padding:9px 11px}
 .hhomeviews .hvicon{width:30px;height:30px;border-radius:9px}
}
@media(min-width:761px) and (max-width:900px){
 .freegrid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
 .dayitem .hdrow{grid-template-columns:18px 30px minmax(0,1fr) 68px 184px;column-gap:7px}
 .daypeer{width:68px}
 .dstate.done{grid-template-columns:62px 42px 42px 14px;width:184px}.dstate.pending{width:184px}
 .rq{padding:2px 4px}
}


/* iPhone: bewust eenvoudiger en puzzelgerichter dan tablet/desktop. */
body.phone.home #home .hwrap{padding:9px 10px 24px;gap:9px}
body.phone.home .hbrand{font-size:17px;margin-bottom:-3px}
body.phone.home #home h2{font-size:21px}
body.phone.home .hsection{gap:7px;padding-bottom:8px}
body.phone.home .hsection+.hsection{padding-top:11px}
body.phone.home .hsecthead h3{font-size:17px!important}
body.phone.home .hsecthead>div>.mut{font-size:10px}
body.phone.home .hdlist{padding:2px 9px}
body.phone.home .dayitem .hdrow{padding:7px 1px;gap:7px}
body.phone.home .hdrow .ticon{width:27px;height:27px;border-radius:8px;font-size:13px}
body.phone.home .dname{font-size:14px}
body.phone.home .daypeer{margin-left:auto}
body.phone.home .daypeer>span{font-size:9px;padding:2px 5px;width:auto}
body.phone.home .daypeer b{display:none}
body.phone.home .peerico{font-size:9px}
body.phone.home .dstate{gap:4px}
body.phone.home .dstate.done .dmist,body.phone.home .dstate.done .dhint{display:none}
body.phone.home .dtime{font-size:11px}
body.phone.home .hraad{padding:8px 10px;gap:8px}
body.phone.home .hraad .mut{display:none}
body.phone.home .freegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
body.phone.home .freegrid .tile{min-height:82px;padding:9px 5px 7px}
body.phone.home .freegrid .ticon.big{width:36px;height:36px}
body.phone.home .hhomeviews{grid-template-columns:repeat(3,minmax(0,1fr))}
body.phone.home .hhomeviews button{padding:8px 3px}
body.phone.home .hhomeviews small{display:none}
body.phone.home .hhomeviews .hvicon{width:27px;height:27px}
body.phone .sco{gap:8px!important}
body.phone .scontrols{flex-direction:column;align-items:stretch;gap:6px}
body.phone .scontrols .sviews,body.phone .scontrols .sper{width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr)}
body.phone .scontrols .sper{grid-template-columns:repeat(5,1fr)}
body.phone .scontrols button{padding:7px 3px;font-size:11px}
body.phone .sco .stop h2{font-size:21px}
body.phone .sco .hcard{padding:10px 11px;border-radius:15px}
body.phone .sovermain{display:block}
body.phone .sovermain>.hcard{display:none}
body.phone .soverheroes{display:grid;grid-template-columns:1fr;gap:7px}
body.phone .shero .sbig{font-size:32px}
body.phone .shero .schips span{font-size:10px;padding:3px 6px}
body.phone .sco:not(.personview)>.hgrid2.sh2{display:block!important}
body.phone .sco:not(.personview)>.hgrid2.sh2>.hcard:last-child{display:none}
body.phone .personview .smetrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
body.phone .personview .smetric{padding:8px;gap:7px}
body.phone .personview .smetric .smic{width:32px;height:32px}
body.phone .personview .smetric b{font-size:18px}
body.phone .personview .hgrid2.sh2{display:block!important}
body.phone .personview .hgrid2.sh2>.hcard:last-child{display:none}
body.phone .personview .spuzzle{padding:7px 0}
body.phone .personview .spmeta{font-size:10px}body.phone .spdrow{grid-template-columns:78px 35px 1fr;gap:4px;font-size:9.5px}body.phone .spdrow span:nth-of-type(n+3){display:none}body.phone .spdetail{padding:7px}

@media(max-width:760px){.ddmain{grid-template-columns:1fr}.daydetail{margin-left:8px}.ddmetrics{justify-content:flex-start}.smetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.srecent{grid-template-columns:auto minmax(0,1fr)}.srecent>span{grid-column:2}}
@media(max-width:520px){.smetrics{grid-template-columns:1fr}}



/* ===== Persoonlijke en groepsstijlen =====
   Bestaande skins blijven presets: shared=Puzzellig, peter=Treinen, aart=Getallen. */
:is(body.home,.stylepreview)[class*="skin-"]{--pc:var(--home-accent,#2f6fed);--page-tone:color-mix(in srgb,var(--home-accent,#2f6fed) 8%,var(--bg))}



:is(body.home,.stylepreview).skin-minimal{--page-pattern:none}
.stylebox{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--line) 15%,var(--card))}
.stylebox>small{display:block;font-weight:900;margin-bottom:7px}.stylebox label{margin-top:7px}.stylebox select{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg)}
.stylecolors{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.stylecolors button{width:30px;height:30px;min-width:30px;padding:0;border-radius:50%;background:var(--sw);border:3px solid var(--card);box-shadow:0 0 0 1px var(--line);font-size:0}.stylecolors button.on{box-shadow:0 0 0 3px var(--fg)}.stylecolors button::after{content:"";display:block;width:8px;height:8px;margin:auto;border-radius:50%;background:rgba(255,255,255,.75);opacity:0}.stylecolors button.on::after{opacity:1}
.stylepreview{--page-pattern:var(--pp-l,none);margin-top:14px;padding:22px 18px;border:1px solid var(--line);border-radius:14px;background-color:var(--page-tone,var(--bg));background-image:var(--page-pattern);background-size:220px;overflow:hidden}
:root[data-theme=dark] .stylepreview{--page-pattern:var(--pp-d,none)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .stylepreview{--page-pattern:var(--pp-d,none)}}
.stylepreview.skin-minimal{background-image:none}
.stylepreviewlabel{display:block;margin:0 0 24px;font-size:12px;font-weight:700;color:var(--fg)}
.stylepreviewcard{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 4px 12px var(--sh);border-top:4px solid var(--home-accent)}
.stylepreviewtitle,.stylepreviewtext,.stylepreviewaction{display:block}.stylepreviewtitle{font-size:14px;font-weight:800}.stylepreviewtext{font-size:12px;color:var(--mut);margin:3px 0 12px}.stylepreviewaction{padding:8px;border-radius:10px;background:var(--home-accent);color:#fff;text-align:center;font-size:12px;font-weight:700}
#authaccount .authactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
#authaccount .authactions button{min-width:0;min-height:44px;padding:10px 8px}
.stylehint{font-size:10px;color:var(--mut);margin-top:6px}.stylebox>button{width:100%;margin-top:8px}.murcastbox{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--pc) 4%,var(--card))}.murcastbox>small{display:block;font-weight:900}.murcastbox>p{margin:4px 0 8px;font-size:11px;color:var(--mut)}.murcastbox textarea{display:block;width:100%;resize:vertical;min-height:108px;max-height:220px;font:inherit;line-height:1.45;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--fg)}.murcastactions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.murcastactions button{width:100%;margin:0}@media(max-width:560px){.murcastactions{grid-template-columns:1fr}}.adminviewbar{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--pc) 35%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--pc) 9%,var(--card));font-size:12px;font-weight:800;margin-bottom:2px}.adminviewbar span{color:var(--mut);font-weight:600}.adminreadonly #scoreGroupEdit{display:none!important}

/* Home responsive finetuning: op iPhone geen dubbele puzzelnavigatie; op iPad grotere typografie zonder extra verticale ruimte. */
/* iOS legt aan de bovenrand een visuele fade over scrollende inhoud. Houd de mobiele bediening daar bewust onder. */
body.phone header{display:none!important}
body.phone.home #home .hwrap{padding-top:18px}
body.phone:not(.home):not(.newpick) #prow{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 min-height:58px;
 padding:14px 6px 7px;
}
body.phone:not(.home):not(.newpick) #prow>:not(#tbHome):not(#pm):not(#hexstat):not(#peerLive){display:none!important}
body.phone:not(.home):not(.newpick) #prow #peerLive{display:flex!important;order:8;width:34px;height:34px;flex:0 0 34px;padding:0;justify-content:center;border-radius:50%;margin-left:auto}
body.phone:not(.home):not(.newpick) #prow #peerLive span{display:none}
body.phone:not(.home):not(.newpick) #prow #peerLive i{width:10px;height:10px}
body.phone:not(.home):not(.newpick) #prow #peerLive[hidden]{display:none!important}
.peerlivepop{position:fixed;z-index:80;top:calc(env(safe-area-inset-top) + 60px);right:58px;width:min(280px,calc(100vw - 78px));padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 8px 28px #0002;font-size:12px}
.peerlivepop[hidden]{display:none!important}.peerlivepop>b{display:block;margin-bottom:6px}.peerlivepop>div{display:flex;align-items:center;gap:8px;padding:5px 0;line-height:1.3}.peerlivepop i{display:block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#28a745}.peerlivepop span{min-width:0}
/* Hexcells: de teller "nog te vinden" is een echte aanwijzing, dus die blijft ook op de iPhone in beeld. */
body.phone:not(.home):not(.newpick)[data-t=hex] #prow #hexstat{display:flex!important;order:5;margin:0 8px 0 auto}
body.phone:not(.home):not(.newpick)[data-t=hex] #prow #pm{order:9;margin-left:0}
body.phone #prow #tbHome,
body.phone #prow #pm{
 position:static;
 display:flex;
 width:42px;
 height:42px;
 flex:0 0 42px;
 align-items:center;
 justify-content:center;
 padding:0;
 border-radius:14px;
 font-size:22px;
 line-height:1;
 box-shadow:0 2px 0 var(--line);
}
body.phone #prow #pm{margin-left:0}
body.phone #pmp.open{top:calc(env(safe-area-inset-top) + 72px)}

body.tablet.home #home .hwrap:not(.sco) .hbrand{font-size:22px}
body.tablet.home #home .hwrap:not(.sco) h2{font-size:30px;line-height:1.04}
body.tablet.home #home .hwrap:not(.sco) .htop .mut{font-size:13px}
body.tablet.home #home .hwrap:not(.sco) .hsecthead h3{font-size:21px!important}
body.tablet.home #home .hwrap:not(.sco) .hsecthead>div>.mut{font-size:12px}
body.tablet.home #home .hwrap:not(.sco) .hstreak{font-size:13px}
body.tablet.home #home .hwrap:not(.sco) .dname{font-size:16px}
body.tablet.home #home .hwrap:not(.sco) .dname small{font-size:11px}
body.tablet.home #home .hwrap:not(.sco) .dtime{font-size:13px}
body.tablet.home #home .hwrap:not(.sco) .hraad b{font-size:17px}
body.tablet.home #home .hwrap:not(.sco) .hraad .mut{font-size:12px}
body.tablet.home #home .hwrap:not(.sco) .freegrid .tile>span:not(.ticon){font-size:15px}
body.tablet.home #home .hwrap:not(.sco) .freegrid .tile .tcount{font-size:11px}
body.tablet.home #home .hwrap:not(.sco) .hshuffle{font-size:13px}
body.tablet.home #home .hwrap:not(.sco) .hhomeviews b{font-size:15px}
body.tablet.home #home .hwrap:not(.sco) .hhomeviews small{font-size:11px}
body.tablet.home #home .hwrap:not(.sco) .hsname{font-size:17px}
body.tablet.home #home .hwrap:not(.sco) .hscount b{font-size:17px}

/* Google-login is de vaste ingang; speler en groep komen uitsluitend uit het gekoppelde profiel. */
.authcover{position:fixed;inset:0;z-index:2147483646;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.authcover[hidden]{display:none}
.authcard{width:min(390px,100%);max-height:calc(100dvh - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:26px;border-radius:24px;border:1px solid var(--line);background:var(--card);box-shadow:0 18px 60px color-mix(in srgb,#000 24%,transparent);text-align:center}
.authlogo{display:inline-grid;grid-template-columns:repeat(2,9px);gap:3px;margin-bottom:12px}.authlogo i{width:9px;height:9px;border-radius:3px;background:var(--pc)}.authlogo i:nth-child(2){opacity:.7}.authlogo i:nth-child(3){opacity:.45}.authlogo i:nth-child(4){opacity:.85}
.authcard h2{margin:0 0 7px;font-size:25px}.authcard p{margin:0 0 18px;color:var(--mut);font-size:13px;line-height:1.45}
.authgoogle{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 15px;border-radius:14px;background:#fff;color:#202124;border:1px solid #dadce0;box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:800}
.authgoogle .g{font:900 18px/1 Arial,sans-serif;color:#4285f4}
.authskip{margin-top:9px;border:0;box-shadow:none;background:transparent;color:var(--mut);font-size:12px;padding:8px}
.authmsg{min-height:18px;margin-top:10px!important;font-size:11px!important}
.authwho{display:flex;align-items:center;gap:10px;text-align:left;margin:14px 0;padding:11px;border-radius:14px;background:color-mix(in srgb,var(--line) 20%,transparent)}
.authavatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:color-mix(in srgb,var(--pc) 10%,var(--card));display:grid;place-items:center;font-weight:900}
.authwho div{min-width:0;flex:1}.authwho b,.authwho small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.authwho small{color:var(--mut);font-size:11px;margin-top:2px}
.authactions{display:flex;gap:8px}.authactions button{flex:1}.authsecondary{background:var(--card);color:var(--fg);border:1px solid var(--line)}
#authbtn .authdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#28a745}
body.phone #authbtn{width:100%;text-align:left}
.authform{position:relative;text-align:left}.authform h2,.authform>p{text-align:center}.authform label{display:block;margin:11px 0 0;font-size:12px;font-weight:850;color:var(--mut)}.authform input{display:block;width:100%;margin-top:5px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:700 15px inherit;font-family:inherit;outline:none}.authform input:focus{border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 15%,transparent)}.authform>button:not(.authx){width:100%;margin-top:14px}.authx{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:11px;padding:0;border:1px solid var(--line);background:var(--card);color:var(--mut);box-shadow:none}.hactions{display:flex;align-items:center;gap:7px;flex:none}.hprofile{width:39px;height:39px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);box-shadow:0 2px 8px var(--sh);font-weight:900;font-size:14px;overflow:hidden}.hprofile img{width:100%;height:100%;object-fit:cover}.hprofile:hover{transform:none;background:color-mix(in srgb,var(--pc) 6%,var(--card))}
.profgroupcard,.groupcurrent,.groupinvite,.groupmembers{margin-top:13px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--line) 14%,var(--card))}.profgroupcard small,.profgroupcard b,.groupcurrent small,.groupcurrent b,.groupinvite>small,.groupmembers>small{display:block}.profgroupcard b,.groupcurrent b{font-size:17px;margin:2px 0 8px}.profgroupcard button{width:100%;box-shadow:none}.groupform>div+div{margin-top:12px}.groupinvite>div{display:flex;align-items:center;gap:8px;margin-top:7px}.groupinvite code{flex:1;font:900 18px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;padding:9px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}.groupinvite button{width:auto;margin:0}.groupmembers #groupmembers{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.groupmember{padding:5px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:11px;font-weight:800}.groupswitch{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.groupswitch summary{cursor:pointer;font-weight:850}.groupswitch button{width:100%;margin-top:8px}.groupor{display:flex;align-items:center;gap:9px;margin:12px 0;color:var(--mut);font-size:11px}.groupor:before,.groupor:after{content:"";height:1px;background:var(--line);flex:1}.groupor span{flex:none}.scoregroupedit{margin-left:7px;width:30px;height:30px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--mut);box-shadow:none;vertical-align:middle;font-size:14px;display:inline-grid;place-items:center}.scoregroupedit:hover{transform:none}
.accessinvite{margin-top:13px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--pc) 5%,var(--card))}.accessinvite>small{display:block;font-weight:900}.accessinvite>p{margin:4px 0 8px!important;text-align:left!important;font-size:11px!important}.accessinvite button{width:100%;margin-top:8px}.accessinvite #inviteout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px}.accessinvite #inviteout[hidden]{display:none}.accessinvite #inviteout input{margin:0;font-size:11px}.accessinvite #inviteout button{width:auto;margin:0;padding:8px 10px}#adminopen{width:100%;margin-top:10px}.groupform>p{line-height:1.45}#onboardsuggest{width:100%;background:color-mix(in srgb,var(--pc) 10%,var(--card));border-color:var(--pc);color:var(--fg)}#signupout,#onboardout{width:100%;margin-top:8px}
@media(max-width:560px){.hactions{gap:5px}.hprofile{width:36px;height:36px}.authcard{padding:22px 18px}.groupform{max-height:calc(100dvh - 28px);overflow:auto}.accessinvite #inviteout{grid-template-columns:1fr}}

/* Schakelaar voor puzzels met automatische kruisjes. */
#autocross[hidden]{display:none!important}
#autocross{display:flex;align-items:center;gap:10px;text-align:left;min-height:44px}
#autocross>span:first-child{white-space:normal;flex:1;min-width:0}
#autocross .autocrossstate{position:relative;flex:none;padding:4px 54px 4px 0;min-height:26px;display:inline-flex;align-items:center;color:var(--mut);font-size:12px;font-weight:700;box-sizing:content-box}
#autocross .autocrossstate::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:26px;border-radius:20px;background:#8b9098;transition:background .18s ease}
#autocross .autocrossstate::before{content:"";position:absolute;z-index:1;right:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .18s ease}
#autocross[aria-checked="true"] .autocrossstate::after{background:var(--pc)}
#autocross[aria-checked="true"] .autocrossstate::before{transform:translate(18px,-50%)}
@media(prefers-reduced-motion:reduce){#autocross .autocrossstate::before,#autocross .autocrossstate::after{transition:none}}
/* Hintvoorbeeld: lokale semantische kleuren; persoonlijke/groepsaccenten blijven intact. */
#hint{--hint-ink:color-mix(in srgb,var(--fg) 82%,#40818a);--hint-soft:color-mix(in srgb,var(--card) 94%,#40818a);border:1px solid var(--line);border-radius:16px;background:var(--hint-soft);box-shadow:0 8px 24px #0002;padding:18px 54px 18px 18px;line-height:1.5;font-weight:400}
#hint .hht{font-size:18px;line-height:1.3;font-weight:700;color:var(--fg);margin:0 0 8px}
#hint .hintprogress,#hint .hintusage{font-size:12px;line-height:1.5;color:var(--mut)}
#hint .hintbody{font-size:15px;margin:12px 0;overflow-wrap:anywhere}
#hint .hintlegend{font-size:12px;color:var(--fg);margin:12px 0}
#hint button:not(.hx){min-height:44px;border-radius:10px;font-size:14px;line-height:1.4;padding:10px 12px;font-weight:600;box-shadow:none;transform:none}
#hint .hintnext{background:var(--hint-ink);color:var(--card);border:1px solid var(--hint-ink);width:100%}
#hint .hintback{background:transparent;color:var(--fg);border:1px solid var(--line);width:100%;margin:8px 0}
#hint .hintusage{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
#hint button:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
#hintb{background:var(--card);color:var(--fg);border:1px solid var(--line);box-shadow:none;font-weight:700}
body:not(.phone){--hintw:350px;--hintgap:24px}
body:not(.phone).hintside #stage{margin-right:calc(var(--hintw) + var(--hintgap))}
body:not(.phone) #hint.side,body.tablet #hint.side{position:fixed!important;top:74px!important;right:max(12px,env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;width:var(--hintw)!important;max-height:calc(100dvh - 160px)!important;transform:none!important;overflow:auto;border:1px solid var(--line);border-radius:16px}
body.tablet #hint.side button:not(.hx){margin-top:0}
body.phone #hint{font-size:14px;max-height:42dvh;padding:12px 54px 12px 14px}
body.phone #hint .hintbody{font-size:14px;margin:8px 0}
:root{--hint-look:#8d651d;--hint-target:#267989}
:root[data-theme=dark]{--hint-look:#dfbb70;--hint-target:#80c7ce}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--hint-look:#dfbb70;--hint-target:#80c7ce}}
.c.hr,.mc.hr{outline:2px dashed var(--hint-look);outline-offset:-3px;box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--hint-look) 14%,transparent)}
.c.ht,.mc.ht{outline:3px double var(--hint-target);outline-offset:-4px;box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--hint-target) 16%,transparent)}
.c.gx{color:color-mix(in srgb,var(--fg) 60%,transparent)!important}
#mclues li.hr{box-shadow:none;outline:2px dashed var(--hint-look);outline-offset:-2px;background:color-mix(in srgb,var(--card) 90%,var(--hint-look))}
@media(prefers-reduced-motion:reduce){#hint,#hint.closing{animation:none!important;transition:none!important}}
body.hintdock #hint{max-height:42dvh}
body.hintdock #stage{max-height:var(--hint-board-height);overflow:auto;overscroll-behavior:contain;align-items:safe center}
body.hintdock #playbox{flex-shrink:0}
body.hintdock #hint.side{border-top-width:1px}
.ddmetric b{overflow-wrap:anywhere}
body.phone.hintdock #hint{max-height:min(46dvh,calc(100dvh - env(safe-area-inset-top) - 100px));overflow-y:auto;box-sizing:border-box}
body.hintdock #stage{min-height:0}
html.tap body.hintdock #stage{touch-action:pan-x pan-y}
/* Houd ook een breed bord binnen de vrije ruimte tussen bediening en hint. */
body.hintside #stage{overflow:auto;overscroll-behavior:contain;align-items:safe center;min-height:0}
body.hintside #playbox{flex-shrink:0}
html.tap body.hintside #stage{touch-action:pan-x pan-y}
/* Bestaande menu's verfijnen: bereikbare sluitknop, ruimere bediening en leesbare hulp. */
.authdialoghead{position:sticky;top:-26px;z-index:10;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:8px;margin:-26px -26px 12px;padding:16px 26px 10px;background:var(--card);border-bottom:1px solid var(--line)}
@media(max-width:560px){.authdialoghead{top:-22px;margin:-22px -18px 12px;padding:12px 18px 10px}}
.authdialoghead h2{grid-column:1;grid-row:1;margin:0;padding-left:44px;text-align:center;font-size:22px}
.authdialoghead .authx{grid-column:2;grid-row:1;position:static;width:44px;height:44px;min-width:44px}
.stylecolors{gap:2px;margin-left:-7px;margin-right:-7px}
.stylecolors button{position:relative;width:44px;height:44px;min-width:44px;padding:0;border:0;background:transparent;box-shadow:none}
.stylecolors button::before{content:"";position:absolute;inset:7px;border:3px solid var(--card);border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px var(--line)}
.stylecolors button.on{background:transparent;border:0;box-shadow:none}
.stylecolors button.on::before{box-shadow:0 0 0 3px var(--fg)}
.stylecolors button::after{position:absolute;left:18px;top:18px;margin:0}
.stylepreview{min-height:220px;padding:14px;background-size:240px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:42px}
.stylepreviewlabel{margin:0}
.stylepreviewcard{width:70%;max-width:210px;padding:9px;border-top-width:3px;border-radius:11px}
.stylepreviewtitle{font-size:12px;margin-bottom:6px}.stylepreviewaction{font-size:11px;padding:6px}
.stylehint,.murcastbox>p,.accessinvite>p,.authmsg{font-size:12px!important;line-height:1.5}
.ddmetric small,.ddstatus small,.smetric small,.smetric div>span,.srecent small,.spdlab{font-size:12px}
.spmeta,body.phone .personview .spmeta{font-size:12px;line-height:1.5}
.authmsg{min-height:24px;overflow-wrap:anywhere;text-align:left!important}
.stylestatus{margin-bottom:0}
#groupownerbox>label{margin-top:16px}#groupnamesave{margin:10px 0 4px;min-height:44px}
#groupownerbox>.stylebox,#groupownerbox>.murcastbox{margin-top:20px}
.groupinvite>div{flex-wrap:wrap;gap:12px}.groupinvite code{min-width:0;overflow-wrap:anywhere}
.murcastactions{gap:12px}.murcastactions button,.groupswitch button{min-height:44px}
#murdokunames[readonly]{pointer-events:none;resize:none}
#murdokuedit{margin-bottom:10px}
.authcard{touch-action:pan-y;overscroll-behavior:none}
.mc .rl{font-size:max(10px,calc(var(--ms)*.16));font-weight:700;opacity:.9;background:color-mix(in srgb,var(--card) 92%,transparent);text-transform:none;letter-spacing:0;line-height:1.2}

/* Meer lucht in de Home-kop, zonder de puzzellijsten uit te rekken. */
body.home #home .hwrap:not(.sco) .hbrand{margin-bottom:4px}
body.home #home .hwrap:not(.sco) .htop{margin-bottom:6px;row-gap:14px}
body.home #home .hwrap:not(.sco) .htop h2{line-height:1.2;margin-bottom:8px}
body.home #home .hwrap:not(.sco)>.uxsave{margin:2px 0 10px;line-height:1.6}
/* Laat de persoonlijke achtergrond ook lege, hoge vensters vullen. */
body.nieuw{min-height:100vh;min-height:100dvh;background-repeat:repeat}
#tbHome{display:inline-flex;align-items:center;justify-content:center;line-height:1}
#tbHome svg{display:block;width:22px;height:22px;flex:none}
/* Brede desktop: bediening en bord beginnen samen, binnen dezelfde speelruimte. */
@media(min-width:1200px) and (min-aspect-ratio:23/20) and (hover:hover) and (pointer:fine){
 body.tablet.nieuw:not(.home):not(.newpick) main{max-width:1120px;margin-inline:auto;padding:24px 24px 24px 176px}
 body.tablet.nieuw:not(.home):not(.newpick) #stage{margin-left:0}
 body.tablet.nieuw:not(.home):not(.newpick) #pbot{left:max(24px,calc((100vw - 1120px)/2 + 24px));top:86px;bottom:auto;transform:none;max-height:calc(100dvh - 110px)}
}

/* Ruimte voor de 7px-rand van Hexcells binnen het scrollende hintgebied. */
body.tablet[data-t=hex] #hexw{padding:8px 0}
body.hintside[data-t=hex] #hexw,body.hintdock[data-t=hex] #hexw{padding:10px}
.hcontrow{display:flex;align-items:stretch;gap:0;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.hcontrow>.hcont{flex:1;min-width:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}.hcontrow>.hdelete{align-self:stretch;margin:8px 0;padding:10px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;color:var(--mut)}.hcontrow>.hdelete:hover{color:#b5483a}
.hdelete{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;padding:10px;border-radius:12px;box-shadow:none;color:#b5483a}
.hdelete svg{width:20px;height:20px;display:block}
.hdelete:hover{background:color-mix(in srgb,#b5483a 10%,var(--card))}

/* Info-knopje naar het verhaal (alleen groep Rekensukkels). */
.scorestory{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900;font-style:italic;font-family:Georgia,serif;font-size:16px}

/* Hints: korte gedachten op losse regels, met optionele verdieping. */
#hint .hintsteps{padding-left:1.4em;display:grid;gap:7px}
#hint .hintsteps li{padding-left:3px}
#hint .hintdetails{border-top:1px solid var(--line);margin:10px 0}
#hint .hintdetails summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-size:14px;font-weight:700;padding:10px 0}
#hint .hintdetails summary:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}
#hint .hintdetails .hintbody{font-size:14px;line-height:1.55;margin:4px 0 12px}

/* iPhone Home: compacte kop; acties vullen niet langer de hoogte naast de begroeting. */
body.phone.home #home .hwrap:not(.sco) .htop{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:1px;row-gap:8px}
body.phone.home #home .hwrap:not(.sco) .htop h2{margin-bottom:3px;line-height:1.12}
body.phone.home #home .hwrap:not(.sco) .hactions{justify-self:end;margin-top:0}
body.phone.home #home .hwrap:not(.sco)>.uxsave{margin:0 0 4px;line-height:1.35}

/* iPhone Home v2: begroeting en acties delen bewust dezelfde compacte rij. */
body.phone.home #home .hwrap:not(.sco) .htop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:0;margin-bottom:0}
body.phone.home #home .hwrap:not(.sco) .htop>div:first-child{min-width:0}
body.phone.home #home .hwrap:not(.sco) .htop h2{font-size:20px;margin:0 0 3px;line-height:1.08}
body.phone.home #home .hwrap:not(.sco) .htop .mut{font-size:12px;line-height:1.25;white-space:normal}
body.phone.home #home .hwrap:not(.sco) .hactions{justify-self:end;align-self:center;margin:0;gap:4px}
body.phone.home #home .hwrap:not(.sco) .htheme{padding:2px;border-radius:12px}
body.phone.home #home .hwrap:not(.sco) .htheme button{padding:6px 7px;border-radius:9px}
body.phone.home #home .hwrap:not(.sco) .hprofile{width:36px;height:36px}
body.phone.home #home .hwrap:not(.sco)>.uxsave{margin:2px 0 5px;line-height:1.3;font-size:12px}

/* Nonogram: bordformaat in het vrije hoekvak tussen rij- en kolomaanwijzingen. */
#grid>.nsize{display:flex;align-items:flex-end;justify-content:flex-end;padding:0 5px 4px 0;box-sizing:border-box;color:var(--mut);font-size:11px;font-weight:700;line-height:1;white-space:nowrap;opacity:.72;user-select:none;pointer-events:none}
body.phone #grid>.nsize{font-size:10px;padding-right:3px;padding-bottom:3px}


/* Gedeelde invulstanden: het bord blijft rustig; modus zit in omgeving, rand en knop. */
#inputmode{display:flex;flex-direction:column;gap:6px}
#inputmode{padding:3px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--line) 20%,var(--card))}
#inputmode button{font-weight:700;padding:10px 8px;border-radius:12px;white-space:nowrap;box-shadow:none;border-color:transparent;color:var(--mut);position:relative}
#inputmode button.on{background:var(--mode-button);border-color:var(--mode-button);color:#fff;box-shadow:0 2px 0 color-mix(in srgb,var(--mode-button) 60%,#000)}
body[data-input-mode=fill]{--mode-tint:#3d9bd4;--mode-button:#2f86bc}
body[data-input-mode=cross]{--mode-tint:#626b77;--mode-button:#505965}
body:not(.home):not(.newpick)[data-input-mode]{background-color:color-mix(in srgb,var(--mode-tint) 7%,var(--bg))}
body[data-input-mode] #grid{background:var(--card);box-shadow:0 0 0 5px color-mix(in srgb,var(--mode-tint) 82%,var(--line)),0 8px 24px var(--sh)}
body[data-t=bin] #grid,body[data-t=star] #grid{box-shadow:0 0 0 5px color-mix(in srgb,var(--mode-tint) 82%,var(--line)),0 8px 24px var(--sh)}
#grid .cnt span.full{color:color-mix(in srgb,var(--fg) 32%,var(--bg));font-weight:500}
#grid .cnt span:not(.full):not(.over){font-weight:850}
.mc.xx .mx,.mc.xm .mx{color:color-mix(in srgb,var(--fg) 55%,transparent);font-weight:500;font-size:calc(var(--ms)*.45)}
#grid>.nsize{font-size:clamp(14px,calc(var(--cs)*.32),21px);font-weight:800;color:var(--fg);opacity:.85;padding:0 8px 7px 0}
body.phone #grid>.nsize{font-size:13px;padding:0 4px 5px 0}
#checkfeedback.good,#checkfeedback.warn{position:fixed;z-index:100;top:max(84px,calc(env(safe-area-inset-top) + 64px));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:16px 22px;border:2px solid currentColor;border-radius:16px;box-shadow:0 8px 30px #0003;font-size:18px;font-weight:800;line-height:1.4;text-align:center;background:var(--card)}
#checkfeedback.good{color:var(--ok)}#checkfeedback.warn{color:color-mix(in srgb,#c05b34 70%,var(--fg))}
@media(max-width:760px),(max-aspect-ratio:1/1){#inputmode{flex-direction:row}}
body.phone #pbot #inputmode{flex-direction:row;gap:6px;flex:2 1 0;min-width:0}
body.phone #pbot #inputmode button{flex:1 1 0;min-width:0;padding:10px 4px;font-size:14px}

#checkfeedback:empty{display:none}
body.phone:is([data-t=bin],[data-t=star],[data-t=mur]) #pbot #hintb span,body.phone:is([data-t=bin],[data-t=star],[data-t=mur]) #pbot #chk span{display:none}
body.phone:is([data-t=bin],[data-t=star],[data-t=mur]) #pbot #hintb,body.phone:is([data-t=bin],[data-t=star],[data-t=mur]) #pbot #chk{flex:0 0 38px}
body.phone #pbot #inputmode{min-width:84px;gap:3px}
body.phone #pbot #inputmode button{font-size:19px;min-height:48px;overflow:hidden}
@media(max-width:359px){body.phone #pbot #undo,body.phone #pbot #redo{flex-basis:32px}body.phone #pbot #potb{flex-basis:36px}}

/* Dezelfde onlineknop op Home, overzichten en puzzels. */
.peerlive,.hlivebadge{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;min-height:34px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--ok) 8%,var(--card));color:var(--fg);font-size:13px;font-weight:750;white-space:nowrap;cursor:pointer;box-shadow:none}
.peerlive[hidden]{display:none!important}
.peerlive>i{display:block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 15%,transparent)}
.hlivebadge{justify-self:start}
body.phone:not(.home):not(.newpick) #prow #peerLive{width:auto;flex:0 0 auto;min-height:34px;padding:5px 9px;border-radius:999px;gap:6px}
body.phone:not(.home):not(.newpick) #prow #peerLive span{display:inline;font-size:12px}
#tbHome{gap:6px;width:auto!important;min-width:44px;padding:8px 12px!important;white-space:nowrap}
#tbHome span{font-size:14px;font-weight:750}
body.phone #prow #tbHome{width:auto;flex:0 0 auto;gap:4px;padding:8px!important}
body.phone #prow #tbHome svg{width:23px;height:23px;flex:none}
.peerlivepop{max-height:min(420px,70dvh);overflow:auto;overscroll-behavior:contain;font-size:14px;width:min(340px,calc(100vw - 16px))}

/* Eén vriendelijke modustaal: symbool + geselecteerde knop + duidelijke rand, zonder gekleurd speelveld. */
body[data-t=hex][data-input-mode=fill]{--mode-tint:#3d9bd4;--mode-button:#2f86bc}
body[data-t=hex][data-input-mode=cross]{--mode-tint:#626b77;--mode-button:#505965}
body[data-input-mode] #inputmode button.on,body[data-input-mode] #nmode button.on,body[data-input-mode] #pmode button.on,body[data-input-mode] #mb.on,body[data-input-mode] #mz.on{background:color-mix(in srgb,var(--mode-button) 88%,var(--card))!important;border-color:var(--mode-button)!important;color:#fff!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mode-button) 75%,#fff)!important}
body[data-input-mode] #grid.nf,body[data-input-mode] #grid.nx,body[data-input-mode] #grid.pom,body[data-input-mode] #grid.pxm{box-shadow:0 0 0 5px color-mix(in srgb,var(--mode-tint) 82%,var(--line)),0 8px 24px var(--sh)}
body[data-input-mode=cross] #mgrid.mxmode{outline:5px solid color-mix(in srgb,var(--mode-tint) 82%,var(--line))}
body[data-input-mode=fill] #mgrid.pmode{outline:5px solid color-mix(in srgb,var(--mode-tint) 82%,var(--line))}
body[data-input-mode] #hexsvg{background:var(--card)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--mode-tint) 82%,var(--line)),0 8px 24px var(--sh)!important}

.peerlive>span{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis}
body.phone #prow #peerLive{max-width:38vw}

@media(max-width:359px){
 body.phone #pbot:has(#notewipe:not([style*="none"])) #undo,body.phone #pbot:has(#notewipe:not([style*="none"])) #redo,body.phone #pbot:has(#notewipe:not([style*="none"])) #potb,body.phone #pbot:has(#notewipe:not([style*="none"])) #notewipe,body.phone #pbot:has(#notewipe:not([style*="none"])) #hintb,body.phone #pbot:has(#notewipe:not([style*="none"])) #chk{flex-basis:30px}
 body.phone #pbot:has(#notewipe:not([style*="none"])) #inputmode{min-width:78px}
}
@media(max-width:359px){
 body.phone:not(.home):not(.newpick)[data-t=hex] #prow{flex-wrap:wrap;gap:6px}
 body.phone:not(.home):not(.newpick)[data-t=hex] #prow #hexstat{order:10;flex:1 0 100%;width:100%;justify-content:center;margin:0}
}
@media(max-width:760px){
 body.phone:not(.home):not(.newpick)[data-t=hex] #prow:has(#peerLive:not([hidden])){flex-wrap:wrap;gap:6px}
 body.phone:not(.home):not(.newpick)[data-t=hex] #prow:has(#peerLive:not([hidden])) #hexstat{order:10;flex:1 0 100%;width:100%;justify-content:center;margin:0}
}
body.tablet #topbar #peerLive{width:max-content;height:34px;min-width:0;flex:0 0 auto;padding:5px 11px;font-size:13px;border-radius:999px}
body.tablet #topbar #peerLive span{max-width:180px}

/* Dagpuzzels: grote infoknop links, een afzonderlijke speelknop rechts. */
.dayitem{position:relative;--day-action-width:110px}
.daygroup{padding:0;border:0}
.daygroup summary{display:flex;align-items:center;gap:10px;min-height:68px;box-sizing:border-box;padding:8px 62px 8px 4px;cursor:pointer;list-style:none;border-radius:12px;color:var(--fg)}
.daygroup summary::-webkit-details-marker{display:none}
.daygroup summary:hover{background:color-mix(in srgb,var(--dayc) 6%,transparent)}
.daygroup summary:focus-visible{outline:2px solid var(--dayc);outline-offset:-2px}
.daycaption{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(150px,1fr) minmax(135px,.8fr);align-items:center;gap:24px;flex:1;min-width:0}.daycaption .dname{min-width:0}
.daystatus{display:flex;align-items:center;justify-content:flex-end;gap:9px;font-size:11px;color:var(--mut)}.ownstatus{font-weight:750;white-space:nowrap}.daystatus .pdonut{width:31px;height:31px}.daystatus .pdonut b{font-size:8px}
.daypeers{display:flex;justify-content:flex-start;gap:6px;flex-wrap:wrap}.daypeer{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--line) 25%,transparent);color:var(--mut);white-space:nowrap;font-size:10px;font-weight:700}.daypeer.done,.daypeer.busy{color:var(--fg)}.daypeer.done i{font-style:normal;color:var(--ok)}.daypeer.busy i{width:6px;height:6px;border-radius:50%;background:var(--mut)}.daypeer.idle{font-weight:600;opacity:.72}
.daygo{display:flex;align-items:center;justify-content:center;min-width:66px;padding:7px 11px;border-radius:10px;border:1px solid transparent;color:#fff;font-size:11px;font-weight:900;letter-spacing:.01em;box-shadow:0 1px 2px rgba(0,0,0,.08)}.daygo.start{background:color-mix(in srgb,var(--ok) 82%,var(--card));border-color:color-mix(in srgb,var(--ok) 72%,var(--line))}.daygo.resume{background:color-mix(in srgb,#d9822b 84%,var(--card));border-color:color-mix(in srgb,#d9822b 72%,var(--line))}.daygo.view{background:color-mix(in srgb,var(--mut) 72%,var(--card));border-color:color-mix(in srgb,var(--mut) 60%,var(--line))}.daygroup summary:hover .daygo{filter:brightness(1.04)}
.daygroup summary>.dot{width:16px;height:16px;box-sizing:border-box;border:2px solid var(--line);border-radius:50%;flex:none}.daygroup summary>.dot.done{background:var(--ok);border-color:var(--ok)}.daygroup summary>.dot.done:after{content:"✓";display:block;color:white;font-size:10px;line-height:12px;text-align:center;font-weight:900}.daygroup summary>.dot.busy{border-color:var(--dayc);border-style:dashed}.daygroup summary>.ticon{flex:none;box-shadow:none}
.dayitem .hdrow.dayaction{position:absolute;top:14px;right:7px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:36px;padding:0;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:50%;background:var(--card);box-shadow:none;color:var(--mut)}.dayitem .hdrow.dayaction:hover{border-color:var(--mut);background:color-mix(in srgb,var(--line) 18%,var(--card))}.dayinfo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:Georgia,serif;font-size:16px;font-weight:800;font-style:italic;line-height:36px;transform:translateY(-.5px)}
.daygroup .ddpeople{display:flex;flex-wrap:wrap;gap:8px;margin:0 4px;padding:10px 0 12px}.daygroup .ddperson{white-space:normal;max-width:100%;flex-wrap:wrap;font-size:12px}.daygroup .daydetail{margin:0 4px 10px}.daygroup .ddmain{grid-template-columns:minmax(130px,1fr) auto}.daygroup .daydetail .ddpeople{margin-top:10px;padding-bottom:0}
.hlivebadge.liveactivity{white-space:normal;border-radius:14px;text-align:left;max-width:100%;padding:8px 12px}
.hlivebadge.liveactivity>span{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;row-gap:2px;overflow:visible;line-height:1.4}
.hlivebadge.liveactivity b{font-size:13px;overflow-wrap:anywhere}
.hlivebadge.liveactivity small{font-size:12px;color:var(--mut);font-weight:650}
@media(max-width:760px){
 .daygroup summary{gap:7px;min-height:76px;padding-right:52px}
 .daygroup summary>.dot{display:none}
 .daygroup summary>.ticon{width:27px;height:27px;border-radius:8px;font-size:13px}
 .daycaption{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:4px 10px}
 .daycaption .dname{display:block;font-size:14px}.daycaption>.daypeers{grid-column:1/3;grid-row:2}.daycaption>.daystatus{grid-column:2;grid-row:1}
 .daycaption .dname small{font-size:10px}
 .daystatus{align-items:center;gap:6px;margin-top:0}.daystatus .pdonut{width:27px;height:27px}
 .daypeers{justify-content:flex-start;gap:4px}.daypeer{font-size:9px;padding:2px 6px}
 .daygo{position:absolute;right:48px;top:10px;min-width:58px;padding:6px 8px;font-size:10px}
 .dayitem .hdrow.dayaction{top:20px;right:6px;width:32px;height:32px;min-height:32px}
 .daygroup .ddmain{grid-template-columns:1fr}
 .hlivebadge.liveactivity>span{display:block}
 .hlivebadge.liveactivity b,.hlivebadge.liveactivity small{display:block}
}

/* Vaststaande Binair-vakjes zijn herkenbaar, met een rustiger grijstint. */
body[data-t=bin] #grid .c.g{background:color-mix(in srgb,var(--line) 22%,var(--card))}
body[data-t=bin] #grid .c.g.pick{background:color-mix(in srgb,var(--acc) 16%,var(--card))}
body[data-t=bin] #grid .c.g.dup{background:color-mix(in srgb,var(--dup) 65%,color-mix(in srgb,var(--line) 22%,var(--card)))}
body[data-input-mode] #nmode .ncb.on i{box-shadow:0 0 0 2px #fff}
body[data-input-mode] #hexsvg.mb,body[data-input-mode] #hexsvg.mz{box-shadow:0 0 0 7px var(--mode-tint),0 8px 24px var(--sh)}

/* Gepuzzellig-beeldmerk: strak 2x2 puzzelraster. */
.brandmark{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:none}
.brandmark i{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:4px;font-style:normal;font-weight:900;line-height:1;color:#fff}
.brandmark i:nth-child(1){background:#7a52d6}.brandmark i:nth-child(2){background:#f2a000}.brandmark i:nth-child(3){background:#12a6ae}.brandmark i:nth-child(4){background:#ee3e6d}
.brandmark .brand-star{font-size:10px}.brandmark .brand-cross{font-size:15px;font-weight:700}.brandmark .brand-dot::after{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.authlogo.brandmark{grid-template-columns:repeat(2,32px);gap:6px}
.authlogo.brandmark i{width:32px;height:32px;border-radius:9px}
.authlogo.brandmark .brand-star{font-size:21px}.authlogo.brandmark .brand-cross{font-size:31px}.authlogo.brandmark .brand-dot::after{width:12px;height:12px}

/* Duidelijke feedback bij wisselen van invulstand. */
#inputmode button.modeflash{animation:inputModeConfirm .34s ease-out}
@keyframes inputModeConfirm{0%{transform:scale(.92)}45%{transform:scale(1.07);filter:brightness(1.14)}100%{transform:scale(1);filter:none}}
body.phone #pbot #inputmode{padding:2px;border-radius:14px}

/* Definitieve modusweergave: symbool + volle actieve knop + dezelfde bordrand.
   Geen extra tekst/statusstip; de inactieve keuze blijft bewust rustig. */
body[data-input-mode] :is(#inputmode,#nmode,#pmode) button:not(.on){background:var(--card)!important;border-color:var(--line)!important;color:var(--mut)!important;box-shadow:none!important}
body[data-input-mode] :is(#inputmode,#nmode,#pmode) button.on,
body[data-input-mode] :is(#mb,#mz).on{background:var(--mode-button)!important;border-color:var(--mode-button)!important;color:#fff!important;box-shadow:0 3px 0 color-mix(in srgb,var(--mode-button) 58%,#000)!important}
body[data-input-mode] #grid{box-shadow:0 0 0 5px var(--mode-button),0 8px 24px var(--sh)!important}
body[data-input-mode] #mgrid{outline-color:var(--mode-button)!important}
body[data-t=hex][data-input-mode] #hexsvg{box-shadow:0 0 0 5px var(--mode-button),0 8px 24px var(--sh)!important}

/* Hexcells is bewust de uitzondering: ook het vlak achter de cellen volgt de modus. */
body[data-t=hex][data-input-mode=fill] #hexsvg{background:#e3f1fc!important}
body[data-t=hex][data-input-mode=cross] #hexsvg{background:#dddde1!important}

/* Dagpuzzelvolgorde: puzzel | eigen voortgang | groep, van persoonlijk naar samen. */
.daycaption{grid-template-columns:minmax(220px,1.5fr) minmax(135px,.8fr) minmax(150px,1fr)}
.daystatus{justify-content:flex-start}
.daypeers{justify-content:flex-end}
@media(max-width:760px){
 .daycaption>.daystatus{grid-column:2;grid-row:1;justify-content:flex-end}
 .daycaption>.daypeers{grid-column:1/3;grid-row:2;justify-content:flex-end}
}

/* Moduskleuren volgen de markeringen van iedere puzzel.
   Negatieve actie is wit; plaatsen/invullen gebruikt de eigen puzzelkleur.
   Hexcells behoudt zijn eigen blauw/donker-combinatie. */
body[data-input-mode=cross]:not([data-t=hex]){--mode-tint:#e2d8c4;--mode-button:#e2d8c4;--mode-fg:#34312c;--mode-edge:#ad9d7f}
:root[data-theme=dark] body[data-input-mode=cross]:not([data-t=hex]){--mode-tint:#f2f2f0;--mode-button:#f2f2f0;--mode-edge:#c5c5c2}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body[data-input-mode=cross]:not([data-t=hex]){--mode-tint:#f2f2f0;--mode-button:#f2f2f0;--mode-edge:#c5c5c2}}
body[data-t=bin][data-input-mode=fill]{--mode-tint:#7a52d6;--mode-button:#7a52d6;--mode-fg:#fff;--mode-edge:#7a52d6}
body[data-t=star][data-input-mode=fill]{--mode-tint:#c97a00;--mode-button:#c97a00;--mode-fg:#fff;--mode-edge:#c97a00}
body[data-t=nono][data-input-mode=fill]{--mode-tint:#0f9d8c;--mode-button:#0f9d8c;--mode-fg:#fff;--mode-edge:#0f9d8c}
body[data-t=plus][data-input-mode=fill]{--mode-tint:#2b7bd6;--mode-button:#2b7bd6;--mode-fg:#fff;--mode-edge:#2b7bd6}
body[data-t=mur][data-input-mode=fill]{--mode-tint:#b5483a;--mode-button:#b5483a;--mode-fg:#fff;--mode-edge:#b5483a}
body[data-t=hex][data-input-mode=fill]{--mode-tint:#3d9bd4;--mode-button:#2f86bc;--mode-fg:#fff;--mode-edge:#2f86bc}
body[data-t=hex][data-input-mode=cross]{--mode-tint:#35363b;--mode-button:#35363b;--mode-fg:#fff;--mode-edge:#35363b}

body[data-input-mode] :is(#inputmode,#nmode,#pmode) button.on,
body[data-input-mode] :is(#mb,#mz).on{background:var(--mode-button)!important;border-color:var(--mode-edge)!important;color:var(--mode-fg)!important}
body[data-input-mode] #grid{box-shadow:0 0 0 5px var(--mode-button),0 0 0 6px var(--mode-edge),0 8px 24px var(--sh)!important}
body[data-input-mode] #mgrid{outline:5px solid var(--mode-button)!important;box-shadow:0 0 0 1px var(--mode-edge)}
body[data-t=hex][data-input-mode] #hexsvg{box-shadow:0 0 0 5px var(--mode-button),0 0 0 6px var(--mode-edge),0 8px 24px var(--sh)!important}
body:not(.home):not(.newpick)[data-input-mode]{background-color:color-mix(in srgb,var(--mode-tint) 7%,var(--bg))}

/* Speelvelden blijven rustig: modus zit in rand + subtiele pagina.
   Hexcells blijft de bewuste uitzondering en gebruikt zijn zachtere oorspronkelijke modusvlak. */
body[data-t=plus][data-input-mode] #grid,
body[data-t=bin][data-input-mode] #grid,
body[data-t=star][data-input-mode] #grid,
body[data-t=nono][data-input-mode] #grid{background:var(--card)!important}
body[data-t=hex][data-input-mode=fill] #hexsvg{background:color-mix(in srgb,#3d9bd4 12%,var(--card))!important}
body[data-t=hex][data-input-mode=cross] #hexsvg{background:color-mix(in srgb,#35363b 10%,var(--card))!important}

/* Bij dynamische kleuren blijft de geselecteerde kleur zelf leidend. */
body[data-t=nono][data-input-mode=fill] #nmode .ncb.on{background:color-mix(in srgb,var(--mode-button) 24%,var(--card))!important;border-color:var(--mode-button)!important;color:var(--fg)!important;box-shadow:inset 0 0 0 2px var(--mode-button)!important}
body[data-t=mur][data-input-mode=fill] #inputmode button.on{background:var(--mode-button)!important;border-color:var(--mode-button)!important;color:#fff!important}

/* Afgeronde dagpuzzels zijn in de eigen voortgangskolom direct herkenbaar. */
.daydone{color:var(--ok);font-weight:850}

/* Fase 7: persoonlijke hoofdnavigatie en dagvoorkeuren */
.hmainnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px}.hmainnav button{min-width:0}.hmainnav button.on{box-shadow:inset 0 0 0 2px var(--home-accent,var(--pc))}.profileprefs{margin:16px 0;padding:14px;border:1px solid var(--line,#ddd);border-radius:14px}.profileprefs>small{display:block;font-weight:700;margin-bottom:4px}.prefrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,160px);gap:10px;align-items:center;padding:7px 0}.prefrow select{width:100%}@media(max-width:520px){.hmainnav{grid-template-columns:repeat(2,1fr)}.prefrow{grid-template-columns:1fr}}


/* Fase 8: persoonsgericht groepsoverzicht en eerlijke vergelijkingen. */
.todayperson{margin:10px 0 16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.todaypersonhead,.todaypuzzle{display:flex;align-items:center;justify-content:space-between;gap:12px}.todaypersonhead{padding-bottom:8px;border-bottom:1px solid var(--line)}
.todaypersonhead>span{font-size:12px;color:var(--mut);font-weight:750}.todaypuzzle{padding:8px 0;font-size:13px}.todaypuzzle>span:first-child{display:flex;align-items:center;gap:7px;min-width:0}.todaypuzzle i{width:9px;height:9px;border-radius:50%;flex:none}.todaypuzzle small{color:var(--mut)}
.scompare{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(80px,.5fr) minmax(180px,1.8fr);gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);font-size:12px}.scompare small{color:var(--mut)}.scompare span{text-align:right}
@media(max-width:760px){.scompare{grid-template-columns:1fr auto}.scompare span{grid-column:1/3;text-align:left;color:var(--mut)}.todaypuzzle{align-items:flex-start}.todaypuzzle>span:last-child{text-align:right}}

/* Kalender voor eerdere dagpuzzels in Vrij puzzelen. */
.nparchsep{margin:14px 2px 6px;color:var(--mut);font-size:.82rem;font-weight:750;text-align:center}.nparchive{margin-top:0}.npcalhead{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin:4px 0 12px}.npcalhead b{text-align:center;text-transform:capitalize}.npcalhead button{width:44px;min-width:0;min-height:40px;padding:0!important;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:1.45rem}.npcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;min-width:0}.npcaldow{text-align:center;color:var(--mut);font-size:.72rem;font-weight:800;text-transform:uppercase}.npcalday{min-width:0;aspect-ratio:1;padding:0!important;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font-weight:800;position:relative}.npcalday:not(:disabled):hover{border-color:var(--tc)}.npcalday.done{background:color-mix(in srgb,var(--ok) 16%,var(--card));border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}.npcalday.done:after{content:"✓";position:absolute;right:4px;bottom:2px;color:var(--ok);font-size:.65rem}.npcalday.progress{background:color-mix(in srgb,var(--tc) 12%,var(--card));border-color:color-mix(in srgb,var(--tc) 55%,var(--line))}.npcalday.progress:after{content:"•";position:absolute;right:5px;bottom:0;color:var(--tc);font-size:1rem}.npcalday:disabled{opacity:.28}.npcalempty{aspect-ratio:1}.npcallegend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:12px;color:var(--mut);font-size:.74rem}.npcallegend span{display:flex;align-items:center;gap:5px}.npcallegend i{width:10px;height:10px;border:1px solid var(--line);border-radius:3px;background:var(--card)}.npcallegend i.done{background:color-mix(in srgb,var(--ok) 22%,var(--card));border-color:var(--ok)}.npcallegend i.progress{background:color-mix(in srgb,var(--tc) 18%,var(--card));border-color:var(--tc)}
@media(max-width:520px){.npcal{gap:4px}.npcalday{border-radius:9px;font-size:.9rem}.npcallegend{gap:7px 10px;font-size:.68rem}}

/* Gegroepeerd Verder puzzelen: één rustige Home-tegel per puzzelsoort; details pas na openen. */
.hcontgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}.hcontgroup{width:100%}.hcontgroup .ctxt small+small{margin-top:2px;color:var(--mut)}.progresspick{display:grid;gap:8px;margin-top:12px}.progresspickrow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:7px;align-items:stretch}.progresspickgo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:9px 11px}.progresspickgo>span:nth-child(2){display:grid;gap:2px}.progresspickgo small{color:var(--mut);font-size:.78rem}.progresspickrow>.hdelete{height:auto;min-height:44px}@media(max-width:600px){.hcontgroups{grid-template-columns:1fr}.progresspickgo{padding:8px 9px}}

/* Verder puzzelen klapt op Home zelf open. */
details.hcontgroup{display:block;border:0;background:transparent;align-self:start}details.hcontgroup>summary{list-style:none;width:100%;cursor:pointer;position:relative;z-index:1;background:color-mix(in srgb,var(--tc,var(--pc)) 6%,var(--card));border-color:color-mix(in srgb,var(--tc,var(--pc)) 25%,var(--line))}details.hcontgroup>summary::-webkit-details-marker{display:none}.hresumeaction{flex:none;padding:5px 9px;border-radius:9px;background:color-mix(in srgb,var(--pc) 9%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 22%,var(--line));color:var(--fg);font-size:10px;font-weight:850;line-height:1.2}.hgroupaction{background:color-mix(in srgb,var(--tc,var(--pc)) 11%,var(--card));border-color:color-mix(in srgb,var(--tc,var(--pc)) 28%,var(--line))}.hgroupaction .hclose{display:none}details.hcontgroup[open] .hgroupaction .hchoose{display:none}details.hcontgroup[open] .hgroupaction .hclose{display:inline}.hcontgroupitems{display:grid;gap:5px;margin:-7px 0 2px;padding:15px 8px 8px;border:1px solid color-mix(in srgb,var(--tc,var(--pc)) 18%,var(--line));border-top:0;border-radius:0 0 16px 16px;background:color-mix(in srgb,var(--card) 72%,transparent);box-shadow:0 7px 16px rgba(0,0,0,.06)}.hcontgroupitems .hcontrow{margin:0}.hcontgroupitems .hcont{min-height:50px;padding:7px 10px;background:color-mix(in srgb,var(--card) 94%,var(--bg));border-color:color-mix(in srgb,var(--line) 70%,transparent);border-radius:11px;box-shadow:none}.hcontgroupitems .hdelete{box-shadow:none;background:color-mix(in srgb,var(--card) 94%,var(--bg));border-radius:11px}.hcontgroups{align-items:start}

/* Uitklappers worden in core.js geanimeerd, omdat native details-autohoogte op iPad niet betrouwbaar animeert. */

/* Lange profiel- en groepsvensters scrollen als één iOS-oppervlak; dat voelt soepeler dan een scrollvak ín een vaste overlay. */
#authaccount.authcover,#groupaccount.authcover{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}#authaccount.authcover[hidden],#groupaccount.authcover[hidden]{display:none}#authaccount .authcard,#groupaccount .authcard{max-height:none;overflow:visible;margin:0 auto;touch-action:auto}


/* Compacte multi-groepenweergave op Home. */
.hgroupstack{display:grid;gap:12px}.hgroupcard{padding:16px 18px}.hghead{display:flex;align-items:center;justify-content:space-between;gap:14px}.hghead h4{margin:0 0 3px;font-size:1.02rem}.hghead button{flex:0 0 auto;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink);padding:7px 10px;font-weight:750}.hgsummary{margin:12px 0 7px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);color:var(--mut);font-size:.78rem}.hgmembers{display:grid;gap:2px}.hgmember{display:grid;grid-template-columns:112px auto 38px;align-items:center;justify-content:start;gap:8px;min-height:34px;padding:3px 0}.hgmember>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hgchips{display:flex;justify-content:flex-start;gap:4px}.hgchip{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:7px;color:var(--mut);font-size:.72rem;font-style:normal;font-weight:850}.hgchip.done{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--card));border-color:color-mix(in srgb,var(--ok) 38%,var(--line))}.hgcount{text-align:right;color:var(--mut);font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums}@media(max-width:600px){.hgroupcard{padding:14px}.hghead{align-items:flex-start}.hgmember{grid-template-columns:90px auto 34px;gap:6px}.hgchip{width:20px;height:20px}}

.hgsegments{display:flex;width:132px;height:20px;align-items:stretch;gap:2px;padding:3px;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--line) 7%,transparent)}.hgsegments i{flex:1;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--line) 72%,transparent)}.hgsegments i.done{background:var(--ok)}@media(max-width:600px){.hgsegments{width:108px}}


/* ===== Designronde 2026-10-25: rustige hiërarchie, minder dashboard/AI-look ===== */
/* De bestaande Gepuzzellig-stijl blijft leidend. Deze laag maakt informatiehiërarchie
   explicieter en voorkomt dat kaarten, pills en decoratieve iconen met elkaar concurreren. */
.hsection{margin-top:28px}
.hsecthead{align-items:flex-end;gap:16px;margin-bottom:10px}
.hsecthead h3{margin:0;font-size:1.02rem;letter-spacing:-.01em}
.hsecthead .mut{font-size:.78rem}
.hcard{box-shadow:0 5px 16px color-mix(in srgb,var(--sh) 72%,transparent)}
.hmainnav{gap:6px;margin-bottom:22px;padding:4px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:15px;background:color-mix(in srgb,var(--card) 74%,transparent)}
.hmainnav button{border:0;box-shadow:none;background:transparent;min-height:40px}
.hmainnav button.on{background:var(--card);box-shadow:0 2px 8px var(--sh)!important;color:var(--fg)}
.hstreak{font-size:.76rem;font-weight:750;color:var(--mut);white-space:nowrap}

/* Dagpuzzel: identiteit en eigen voortgang zijn primair; actie hoort bij de speler.
   Groepsactiviteit krijgt bewust een tweede, rustigere regel. */
.dayitem{--day-info:38px}
.daygroup summary{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:11px;row-gap:3px;min-height:72px;padding:10px calc(var(--day-info) + 16px) 10px 7px}
.daygroup summary>.dot{display:none}
.daygroup summary>.ticon{grid-column:1;grid-row:1/3;align-self:center}
.daycaption{display:contents}
.daycaption .dname{grid-column:2;grid-row:1;align-self:end;font-size:14px;font-weight:800;line-height:1.2}
.daycaption .dname small{display:block;margin-top:2px;font-size:10px;font-weight:650;color:var(--mut)}
.daystatus{grid-column:2;grid-row:2;justify-content:flex-start;align-self:start;min-width:0;gap:7px}
.daystatus .ownstatus{font-size:11px;color:var(--mut);font-weight:700}
.daystatus .pdonut{width:27px;height:27px}
.daystatus .pdonut b{font-size:7px}
.daygo{grid-column:3;grid-row:1/3;align-self:center;position:static!important;min-width:68px;padding:7px 11px;font-size:10px}
.daypeers{grid-column:2/4;grid-row:3;justify-content:flex-start;margin-top:5px;gap:5px}
.daypeer{background:transparent;border:0;padding:1px 4px 1px 0;font-size:10px;font-weight:650}
.daypeer+.daypeer:before{content:"·";margin-right:5px;color:var(--line)}
.daypeer.busy i{width:6px;height:6px}
.dayitem .hdrow.dayaction{top:17px;right:7px;width:34px;height:34px;min-height:34px;border-color:transparent;background:transparent}
.dayitem .hdrow.dayaction:hover{background:color-mix(in srgb,var(--line) 16%,transparent)}
.dayinfo{font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;font-size:14px;font-style:normal;font-weight:800}
.daygroup .ddpeople{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);margin-top:4px}
.daygroup .ddperson{background:transparent}

/* Verder puzzelen: gesloten kaarten blijven keuzes, geen mini-dashboards. */
.hcontgroups{gap:9px}
details.hcontgroup>summary,.hcontsingle .hcont{box-shadow:none}
.hcont .ctxt b{font-size:.9rem}
.hcont .ctxt small{font-size:.72rem}
.hresumeaction{background:transparent;border:0;padding:4px 0 4px 8px;color:var(--fg);font-size:10px}
.hcontgroupitems{box-shadow:none;background:color-mix(in srgb,var(--card) 86%,transparent)}

/* Groepen voelen als mensen, niet als KPI-kaarten. */
.hgroupstack{gap:10px}
.hgroupcard{padding:15px 17px;box-shadow:none}
.hghead{align-items:center}
.hghead h4{font-size:.98rem}
.hghead button{box-shadow:none;background:transparent;border-color:transparent;color:var(--mut)}
.hghead button:hover{color:var(--fg);background:color-mix(in srgb,var(--line) 14%,transparent)}
.hgsummary{font-size:.75rem}
.hgsummary b{color:var(--fg)}
.hgmember{min-height:32px}
.hgchip{border-radius:50%;width:19px;height:19px;background:transparent;font-size:.66rem}
.hgchip.done{background:transparent}
.hgcount{font-weight:700}

/* Instellingen: visuele secties, zonder voor ieder onderdeel een nieuwe kaartstijl. */
.authform>.stylebox,.authform>.profileprefs,.authform>.profgroupcard,.authform>.accessinvite,
.groupform>.groupmembers,.groupform>.groupcurrent,.groupform #groupownerbox>.stylebox,
.groupform .murcastbox,.groupform>.groupinvite{box-shadow:none}
.authform>label,.profileprefs,.profgroupcard,.accessinvite,.groupmembers,.groupcurrent,.murcastbox,.groupinvite{scroll-margin-top:18px}
.authform small,.groupform small{letter-spacing:.01em}
.stylehint,.profileprefs .mut.sm,.groupinvite .mut.sm{line-height:1.45}

/* Kleine schermen krijgen dezelfde hiërarchie, maar geen samengeperste desktopkolommen. */
@media(max-width:760px){
 .hsection{margin-top:24px}
 .hmainnav{grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:auto}
 .hmainnav button{padding:8px 6px;font-size:.78rem}
 .daygroup summary{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;min-height:78px;padding:9px 45px 9px 4px;column-gap:9px}
 .daycaption .dname{grid-column:2;grid-row:1}
 .daystatus{grid-column:2;grid-row:2;justify-content:flex-start!important}
 .daygo{grid-column:3;grid-row:1/3;right:auto;top:auto}
 .daypeers{grid-column:2/4!important;grid-row:3!important;justify-content:flex-start!important;margin-top:4px}
 .dayitem .hdrow.dayaction{top:7px;right:5px;width:32px;height:32px;min-height:32px}
 .daygroup summary>.ticon{width:29px;height:29px}
 .daystatus .pdonut{width:25px;height:25px}
 .hgroupcard{padding:13px 14px}
 .hghead button span{display:none}
}
@media(max-width:430px){
 .hmainnav{grid-template-columns:repeat(4,minmax(72px,1fr))}
 .daygroup summary{grid-template-columns:auto minmax(0,1fr);padding-right:42px}
 .daygo{grid-column:2;grid-row:2;justify-self:end;align-self:center}
 .daystatus{grid-column:2;grid-row:2;padding-right:72px}
 .daypeers{grid-column:2!important}
}


/* Designverfijning: functionele lijniconen en schaalbare groepsweergave. */
.uiicon{width:18px;height:18px;flex:0 0 18px}
.hshuffle{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dayaction .dayinfo{display:grid;place-items:center;width:30px;height:30px}
.dayaction .dayinfo svg{width:22px;height:22px;display:block}
.daypeer.summary{gap:6px}.daypeer.summary i{width:7px;height:7px;border-radius:50%;background:var(--mut);opacity:.7}
.sphead strong{display:inline-flex;align-items:center;gap:7px}
.spchev{display:grid;place-items:center;width:24px;height:24px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:50%;background:color-mix(in srgb,var(--card) 92%,var(--bg));transition:transform .2s ease,border-color .2s ease}
.spchev svg{width:15px;height:15px}.spmain.open .spchev{transform:rotate(180deg);border-color:color-mix(in srgb,var(--pc) 35%,var(--line))}
.sgrouplist{padding:0;overflow:hidden}.sgrouphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 17px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.sgroupperson{display:grid;width:100%;grid-template-columns:38px minmax(120px,1fr) minmax(68px,auto) minmax(92px,auto) 28px;align-items:center;gap:10px;padding:11px 18px 11px 15px;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:0;background:transparent;color:var(--ink);text-align:left;box-shadow:none;cursor:pointer;touch-action:manipulation}
.sgroupperson:last-child{border-bottom:0}.sgroupperson:focus-visible{background:color-mix(in srgb,var(--pc) 5%,var(--card))}
@media(hover:hover) and (pointer:fine){.sgroupperson:hover{background:color-mix(in srgb,var(--pc) 5%,var(--card))}}
.sgavatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--pc) 11%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 20%,var(--line));font-size:.82rem;font-weight:900}
.sgidentity{min-width:0}.sgidentity b,.sgidentity small,.sgdaily b,.sgdaily small,.sgprogress b,.sgprogress small{display:block}.sgidentity b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sgidentity i{font-style:normal;color:var(--mut);font-weight:650}.sgidentity small,.sgdaily small,.sgprogress small{color:var(--mut);font-size:.72rem;font-weight:600}.sgdaily,.sgprogress{text-align:right}.sgdaily b,.sgprogress b{font-size:.9rem;font-variant-numeric:tabular-nums}.sgopen{display:grid;place-items:center;width:28px;height:28px;color:var(--mut)}.sgopen svg{width:17px;height:17px}
.sovermain{gap:14px}
@media(max-width:600px){
 .sgrouphead{padding:13px 14px 9px}.sgroupperson{grid-template-columns:34px minmax(0,1fr) auto 28px;gap:8px;padding:10px 15px 10px 12px}.sgavatar{width:31px;height:31px}.sgprogress{display:none}.sgdaily{min-width:0}.sgdaily b{font-size:.86rem}.sgdaily small{font-size:.68rem;white-space:nowrap}
 @media(max-width:430px){.sgroupperson{grid-template-columns:30px minmax(0,1fr) 48px 24px;gap:6px;padding:9px 10px}.sgavatar{width:29px;height:29px}.sgidentity b,.sgidentity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sgdaily{width:48px}.sgdaily b,.sgdaily small{text-align:right}.sgopen{width:24px;height:28px}}
 .dayaction .dayinfo{width:32px;height:32px}.dayaction .dayinfo svg{width:23px;height:23px}
}


/* Functionele iconenset: één rustige lijnstijl door de interface. */
.hmainnav button{display:flex;align-items:center;justify-content:center;gap:7px}
.hmainnav .uiicon{width:17px;height:17px;opacity:.78}
.hmainnav button.on .uiicon{opacity:1}
.htheme .thi{display:grid;place-items:center}.htheme .thi .uiicon{width:16px;height:16px}
.scoregroupedit .uiicon{width:17px;height:17px;display:block}
.sectionicon{display:flex!important;align-items:center;gap:7px}
.sectionicon .uiicon{width:17px;height:17px;opacity:.75}
#hintb,#helpb,#ctrlb{align-items:center;gap:7px}
#hintb .uiicon,#helpb .uiicon,#ctrlb .uiicon{width:17px;height:17px;flex:0 0 17px}
#more .ic{display:grid;place-items:center}
#more .ic .uiicon{width:19px;height:19px}
@media(max-width:430px){
 .hmainnav button{gap:6px}.hmainnav .uiicon{width:16px;height:16px}
}


/* Thema-afstemming: patroon als textuur, kaarten als onderdeel van dezelfde achtergrond. */
body.nieuw{--surface-card:color-mix(in srgb,var(--card) 96%,var(--page-tone));--surface-soft:color-mix(in srgb,var(--card) 90%,var(--page-tone));--surface-line:color-mix(in srgb,var(--line) 82%,transparent);--surface-shadow:color-mix(in srgb,var(--sh) 70%,transparent)}
body.nieuw::before{opacity:.78}
body.nieuw.home .hcard,body.nieuw.home .tile,body.nieuw.home .hmainnav,body.nieuw.home .sgrouplist{background:var(--surface-card);border-color:var(--surface-line)}
body.nieuw.home .hcard{box-shadow:0 4px 14px var(--surface-shadow)}
body.nieuw.home .tile{box-shadow:0 2px 0 color-mix(in srgb,var(--line) 76%,transparent)}
body.nieuw.home .hmainnav{background:color-mix(in srgb,var(--surface-card) 92%,transparent)}
body.nieuw.home .hmainnav button.on{background:color-mix(in srgb,var(--card) 94%,var(--page-tone));box-shadow:0 1px 4px var(--surface-shadow)}
body.nieuw.home .daygroup,body.nieuw.home .hcontgroup,body.nieuw.home .sgroupperson{border-color:color-mix(in srgb,var(--line) 62%,transparent)}
body.nieuw.home .daygroup:hover,body.nieuw.home .hcontgroup:hover,body.nieuw.home .sgroupperson:hover{background:color-mix(in srgb,var(--pc) 4%,var(--surface-card))}
body.nieuw.home .pdonut::after{background:var(--surface-card)}
/* Persoonlijke patronen blijven herkenbaar, maar concurreren minder met inhoud. */
:is(body.home,.stylepreview)[class*="skin-"]::before{opacity:.72}
.stylepreview{--surface-card:color-mix(in srgb,var(--card) 95%,var(--page-tone))}
/* Puzzelachtergronden zijn functionele sfeer en daarom nog rustiger dan Home-thema's. */
body.nieuw:not(.home)::before{opacity:.58}
@media(prefers-color-scheme:dark){
 :root:not([data-theme=light]) body.nieuw{--surface-card:color-mix(in srgb,var(--card) 94%,var(--page-tone));--surface-soft:color-mix(in srgb,var(--card) 88%,var(--page-tone));--surface-line:color-mix(in srgb,var(--line) 76%,transparent)}
 :root:not([data-theme=light]) body.nieuw::before{opacity:.62}
 :root:not([data-theme=light]) body.nieuw:not(.home)::before{opacity:.48}
}
:root[data-theme=dark] body.nieuw{--surface-card:color-mix(in srgb,var(--card) 94%,var(--page-tone));--surface-soft:color-mix(in srgb,var(--card) 88%,var(--page-tone));--surface-line:color-mix(in srgb,var(--line) 76%,transparent)}
:root[data-theme=dark] body.nieuw::before{opacity:.62}
:root[data-theme=dark] body.nieuw:not(.home)::before{opacity:.48}


/* Groepsoverzicht: drie informatiedelen mogen nooit buiten hun kaart drukken. */
.sco:not(.personview)>.hgrid2.sh2>.hcard{min-width:0;overflow:hidden}
.sco:not(.personview) .scompare{grid-template-columns:minmax(78px,.7fr) minmax(68px,.5fr) minmax(0,1.8fr)}
.sco:not(.personview) .scompare>*{min-width:0}
.sco:not(.personview) .scompare span{overflow-wrap:anywhere}
.sco:not(.personview) .shm,.sco:not(.personview) .shp,.sco:not(.personview) .shg{min-width:0;max-width:100%}
.sco:not(.personview) .shg{grid-template-columns:repeat(16,minmax(0,1fr))}
@media(min-width:1100px){
 #home .sco:not(.personview)>.hgrid2.sh2{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(0,1.08fr);gap:14px}
}
@media(min-width:761px) and (max-width:1099px){
 #home .sco:not(.personview)>.hgrid2.sh2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 #home .sco:not(.personview)>.hgrid2.sh2>.hcard:last-child{grid-column:1/-1}
}

.sgavatar svg{width:19px;height:19px;display:block}
.daypeer.idle{opacity:.72;background:color-mix(in srgb,var(--line) 18%,transparent);font-weight:650}
@media(max-width:760px){
 .daypeer.summary{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}


/* Groepsweergave v2: vaste navigatie-iconen, compacte teamblik en inhoudsgestuurde kaarten. */
.sviews button{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sviews button .uiicon{width:16px;height:16px;flex:0 0 16px}
.daypeer.glance{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;width:auto;background:transparent!important;border:0!important;padding:0!important;white-space:nowrap}
.daypeer.glance b{overflow:hidden;text-overflow:ellipsis;font-size:11px}
.daypeer.glance i{font-style:normal;font-weight:900;color:var(--mut)}
.daypeer.glance.done i,.daypeer.glance.summary i{color:var(--ok)}
.daypeer.glance.busy i{color:var(--dayc)}
.daypeer.glance em{font-style:normal;color:var(--mut);font-size:10px;font-weight:700}
.dayaction:focus:not(:focus-visible),.dayaction:active{outline:none!important;box-shadow:none!important}
.dayaction:focus:not(:focus-visible) .dayinfo,.dayaction:active .dayinfo{outline:none!important;box-shadow:none!important}
/* De onderste groepssectie gebruikt breedte op inhoud, niet drie geforceerde gelijke dashboardkolommen. */
#home .sco:not(.personview)>.hgrid2.sh2{display:grid!important;grid-template-columns:minmax(300px,.9fr) minmax(380px,1.25fr)!important;gap:14px!important;align-items:start}
#home .sco:not(.personview)>.hgrid2.sh2>.hcard{min-width:0;width:auto;max-width:100%;box-sizing:border-box}
#home .sco:not(.personview)>.hgrid2.sh2>.hcard:last-child{grid-column:1/-1}
.sco:not(.personview) .scompare{grid-template-columns:minmax(74px,.65fr) minmax(64px,.5fr) minmax(0,1.45fr);gap:7px}
.sco:not(.personview) .scompare span{white-space:normal;overflow-wrap:break-word}
@media(min-width:1280px){
 #home .sco:not(.personview)>.hgrid2.sh2{grid-template-columns:minmax(330px,.9fr) minmax(420px,1.2fr) minmax(330px,.9fr)!important}
 #home .sco:not(.personview)>.hgrid2.sh2>.hcard:last-child{grid-column:auto}
}
@media(max-width:900px){
 #home .sco:not(.personview)>.hgrid2.sh2{grid-template-columns:1fr!important}
 #home .sco:not(.personview)>.hgrid2.sh2>.hcard:last-child{grid-column:auto}
}


/* Statistiekiconen: compact in gedeelde uitleg; persoonlijke statistieken verfijnen dit verder. */
.stat-icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:0 0 auto}
.sco .stat-icon{width:16px;height:16px;display:inline-block;vertical-align:-3px;flex:0 0 auto}
/* Persoonlijke statistieken: functionele kleur, één lijniconentaal. */
.personview .stat-icon{width:18px;height:18px;display:inline-block;vertical-align:-3px;flex:0 0 auto}
.personview .smic .stat-icon{width:24px;height:24px;vertical-align:0}
.personview .smetric.green .smic{color:#26966f;background:color-mix(in srgb,#58c79e 18%,var(--card))}
.personview .smetric.pink .smic{color:#c9576d;background:color-mix(in srgb,#e88194 17%,var(--card))}
.personview .smetric.yellow .smic{color:#b98818;background:color-mix(in srgb,#e9bd4c 18%,var(--card))}
.personview .smetric.blue .smic{color:#477fae;background:color-mix(in srgb,#76a9d4 18%,var(--card))}
.personview .smetric.peach .smic{color:#d56b3f;background:color-mix(in srgb,#ed966e 18%,var(--card))}
.personview .smetric.purple .smic{color:#8063c7;background:color-mix(in srgb,#a68be4 18%,var(--card))}
.personview .spmeta .stat-icon,.personview .spdrow .stat-icon{width:14px;height:14px;vertical-align:-2px;opacity:.82}
.personview .spmeta span{display:inline-flex;align-items:center;gap:4px}
.personview .srecent>span:last-child{display:flex;align-items:center;gap:6px}
.personview .stat-inline{display:inline-grid;place-items:center;color:var(--mut)}
.personview .stat-inline .stat-icon{width:15px;height:15px}
.personview .rq{display:inline-flex;align-items:center;gap:2px}
.personview .rq .stat-icon{width:16px;height:16px}
.personview .rq-target{color:#c9576d}.personview .rq-hint{color:#b98818}.personview .rq-bad{color:#c45145}
.personview .rq b{font-size:.76rem}


/* Dagpuzzelregel — definitieve responsive compositie.
   Groot scherm: één horizontale scanregel. Telefoon: twee compacte regels. */
.dayitem{--day-info-w:46px}
.dayitem .hdrow.dayaction{top:32px;right:6px;transform:translateY(-50%);width:44px;height:44px;min-width:44px;min-height:44px;border-radius:11px}
.dayaction .dayinfo,.dayitem .dayaction .dayinfo{width:100%;height:100%}
.dayaction .dayinfo svg{width:22px;height:22px}

@media(min-width:761px){
 .daygroup summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;align-items:center;column-gap:14px;min-height:64px;padding:8px calc(var(--day-info-w) + 16px) 8px 6px}
 .daygroup summary>.ticon{grid-column:1;grid-row:1;align-self:center}
 .daycaption{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(190px,1.35fr) minmax(130px,.8fr) minmax(100px,.65fr);align-items:center;gap:18px;min-width:0}
 .daycaption>.dname{grid-column:1;grid-row:1;align-self:center;min-width:0}
 .daycaption>.daystatus{grid-column:2;grid-row:1;justify-self:start;align-self:center;justify-content:flex-start;min-width:0}
 .daycaption>.daypeers{grid-column:3;grid-row:1;justify-self:end;align-self:center;justify-content:flex-end;min-width:0;margin:0;flex-wrap:nowrap}
 .daygo{grid-column:3;grid-row:1;position:static!important;align-self:center;justify-self:end;min-width:72px}
 .daypeer.glance{max-width:120px}
}
@media(max-width:760px){
 .dayitem{--day-info-w:44px}
 .dayitem .hdrow.dayaction{right:4px;width:42px;height:46px;min-width:42px;min-height:46px}
 .daygroup summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:8px;row-gap:5px;min-height:74px;padding:8px calc(var(--day-info-w) + 10px) 8px 4px}
 .daygroup summary>.ticon{grid-column:1;grid-row:1/3;align-self:center}
 .daycaption{display:contents}
 .daycaption>.dname{grid-column:2;grid-row:1;align-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .daycaption>.daystatus{grid-column:2;grid-row:2;justify-self:start;align-self:start;justify-content:flex-start;min-width:0;padding:0}
 .daycaption>.daypeers{grid-column:3;grid-row:2;justify-self:end;align-self:center;justify-content:flex-end;min-width:0;max-width:92px;margin:0;overflow:hidden;flex-wrap:nowrap}
 .daygo{grid-column:3;grid-row:1;position:static!important;justify-self:end;align-self:end;min-width:58px;max-width:76px}
 .daypeer.glance{max-width:92px}
 .daypeer.glance b{max-width:64px}
 .daypeer.glance em{display:none}
}
@media(max-width:390px){
 .daygroup summary{column-gap:5px;padding-left:2px;padding-right:52px}
 .daygroup summary>.ticon{width:25px;height:25px}
 .daycaption>.dname{font-size:13px}
 .ownstatus{font-size:10px}
 .daystatus .pdonut{width:24px;height:24px}
 .daygo{min-width:54px;padding:6px;font-size:9.5px}
 .daycaption>.daypeers,.daypeer.glance{max-width:76px}
 .daypeer.glance{font-size:9px}
 .daypeer.glance b{max-width:50px}
}

/* Home/Puzzelen: dezelfde bewezen catalogus, twee rustige bestemmingen. */
.hpuzzlecta{margin-top:20px}.hpuzzlectabtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;text-align:left;cursor:pointer}.hpuzzlectabtn>span:first-child{display:grid;gap:3px}.hpuzzlectabtn small{color:var(--mut);font-size:11px}.hpuzzlectabtn .hgo{white-space:nowrap;font-weight:850}
@media(max-width:760px){.hpuzzlectabtn{padding:13px 14px}}

/* Puzzelen is een zelfstandige appweergave, niet een verborgen Home-sectie. */
.hpuzzlesview .hfree{margin-top:24px}.hpuzzlesview .freegrid{margin-top:10px}

/* Murdoku-objecten: vaste Gepuzzellig-lijniconen i.p.v. platformemoji. */
.mobjicon{display:inline-block;width:1.35em;height:1.35em;vertical-align:-.24em;color:currentColor}.ob .mobjicon{width:100%;height:100%;vertical-align:0}.mlegicon{display:inline-flex;width:1.45em;height:1.45em;align-items:center;justify-content:center;vertical-align:-.3em}.mlegicon .mobjicon{width:100%;height:100%}

/* Home houdt de persoonlijke selectie compact; de volledige catalogus staat onder Puzzelen. */
.hhomefree .hsecthead{align-items:end}.hmorepuzzles{border:0;background:transparent;color:var(--home-accent,var(--pc));font:inherit;font-weight:700;padding:8px 2px;cursor:pointer}.hmorepuzzles span{font-size:1.15em}.homefreegrid{margin-top:10px}
/* Murdoku: vriendelijke mini-illustraties, met één consistente kleurtaal. */
.mobjicon .mi-main{fill:color-mix(in srgb,var(--tc,#5f7fa8) 72%,#fff);stroke:none}.mobjicon .mi-dark{fill:color-mix(in srgb,var(--tc,#5f7fa8) 78%,#263342);stroke:none}.mobjicon .mi-light{fill:color-mix(in srgb,var(--tc,#5f7fa8) 22%,#fff);stroke:none}.mobjicon .mi-line{fill:none;stroke:color-mix(in srgb,var(--fg) 72%,transparent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Murdoku v3: bordspelachtige objectillustraties met stevige contour en vaste kleuren. */
.mobjicon{overflow:visible}.mobjicon .fill{stroke:#111820;stroke-width:1.35;stroke-linejoin:round}.mobjicon .line{fill:none;stroke:#111820;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.mobjicon .line.thin{stroke-width:.85}.mobjicon .dot{fill:#111820}.mobjicon .red{fill:#ee4058}.mobjicon .gray{fill:#7d8794}.mobjicon .blue{fill:#6f9fe8}.mobjicon .blue2{fill:#9fc0f2}.mobjicon .cream{fill:#f7f0dc}.mobjicon .orange{fill:#f29a45}.mobjicon .orange2{fill:#df7d2e}.mobjicon .gold{fill:#e8b94e}.mobjicon .brown{fill:#9b6a43}.mobjicon .green{fill:#63ad68}.mobjicon .terracotta{fill:#c96e50}.mobjicon .charcoal{fill:#3f4855}.mobjicon .cyan{fill:#78c7d6}.mobjicon .teal{fill:#5ba8a0}.mobjicon .purple{fill:#8d6bc4}.mobjicon .pink{fill:#e780ad}.mobjicon .navy{fill:#50668e}


/* Fase 9: generieke, rustige stap-voor-stap tutorial. */
.tutorialcard{max-width:34rem}.tutorialprogress{font-size:.82rem;color:var(--mut);margin:.15rem 0 .65rem}.tutorialtext{line-height:1.55;margin:.4rem 0 1rem}.tutorialactions{display:flex;gap:.55rem;justify-content:flex-end;flex-wrap:wrap}.tutorialactions .tutorialskip{margin-right:auto}.tutorialrestart{display:block;margin-top:.8rem;width:max-content;max-width:100%}@media(max-width:560px){.tutorialactions{display:grid;grid-template-columns:1fr 1fr}.tutorialactions .tutorialskip{grid-column:1/-1;width:100%}.tutorialactions button{width:100%}}


/* Puzzelcatalogus: ontdekken, starten en Home-favorieten zijn aparte acties. */
.puzzlecatalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;margin-top:10px}.puzzlecard{display:grid;grid-template-columns:54px minmax(0,1fr);gap:13px;align-items:start;padding:15px;border:1px solid color-mix(in srgb,var(--tc) 24%,var(--line));border-radius:17px;background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.04)}.puzzlecard>.ticon{width:50px;height:50px}.puzzlecardbody{min-width:0}.puzzlecardtitle{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.puzzlecard h4{margin:2px 0 0;font-size:1rem}.puzzlecard p{margin:6px 0 12px;color:var(--mut);font-size:.8rem;line-height:1.42}.puzzlefav{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:6px 9px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--mut);font-weight:750}.puzzlefav>span:first-child{font-size:1.2rem;line-height:1}.puzzlefav.on{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 48%,var(--line));background:color-mix(in srgb,var(--tc) 8%,var(--card))}.puzzlefav:focus-visible,.pcardstart:focus-visible,.pcardstarts button:focus-visible{outline:3px solid color-mix(in srgb,var(--tc) 45%,transparent);outline-offset:2px}.puzzlecardfoot{display:flex;align-items:center;justify-content:space-between;gap:10px}.puzzlecardfoot>small{color:var(--mut);font-size:.7rem}.pcardstart,.pcardstarts button{min-height:40px;padding:8px 13px;border:0;border-radius:11px;background:var(--tc);color:#fff;font-weight:850}.pcardstarts{display:flex;gap:6px}.puzzlefavstatus{min-height:1.25em;margin:8px 1px 2px;color:var(--mut);font-size:.76rem}.puzzlefav:disabled{opacity:.55}.profileprefs .prefrow label{min-width:0}.profileprefs .prefrow b{font-size:.86rem}@media(max-width:560px){.puzzlecatalog{grid-template-columns:1fr}.puzzlecard{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:13px}.puzzlecard>.ticon{width:42px;height:42px}.puzzlecardtitle{align-items:center}.puzzlefav{min-height:42px}.puzzlecardfoot{align-items:flex-end}.puzzlefavlabel{font-size:.72rem}}@media(max-width:370px){.puzzlefavlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.puzzlecardfoot{flex-wrap:wrap}.pcardstarts{width:100%}.pcardstarts button{flex:1}}

.hpuzzlestop{display:flex;align-items:center;margin:0 0 10px}.hpuzzlehome{display:inline-flex;align-items:center;gap:7px;width:auto;min-height:38px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);box-shadow:none;font-weight:800}.hpuzzlehome:hover{background:color-mix(in srgb,var(--line) 16%,var(--card))}.hpuzzlehome span{font-size:18px;line-height:1}

/* Puzzelen: favorieten en volledige catalogus */
.hpuzzletabs{display:flex;gap:5px;width:max-content;max-width:100%;margin:2px 0 12px;padding:4px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--line) 12%,var(--card))}.hpuzzletabs button{min-height:40px;padding:8px 15px;border:0;border-radius:9px;background:transparent;color:var(--mut);box-shadow:none;font-weight:850;touch-action:manipulation}.hpuzzletabs button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 4px #00000012}.pcarddaily{margin:10px 0 2px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)}.pcarddailyopen{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:9px 2px;border:0;background:transparent;color:var(--fg);box-shadow:none;text-align:left;font-weight:750;touch-action:manipulation}.pcarddailyopen>span:last-child{font-size:20px;color:var(--mut);transition:transform .18s ease}.pcarddailyopen[aria-expanded="true"]>span:last-child{transform:rotate(90deg)}.pcarddailychoices{padding:0 0 11px}.pcarddailychoices>span{display:block;margin:1px 0 7px;color:var(--mut);font-size:.72rem;font-weight:750}.pcarddailychoices>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.pcarddailychoices button{min-height:40px;padding:7px 5px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--fg);box-shadow:none;font-size:.76rem;font-weight:800;touch-action:manipulation}.pcarddailychoices button.on{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--card));color:var(--tc)}.pcarddailychoices small{display:block;margin-top:7px;color:var(--mut);font-size:.68rem;line-height:1.35}@media(max-width:560px){.hpuzzletabs{width:100%}.hpuzzletabs button{flex:1}.pcarddailychoices button{min-height:44px}}


/* Rustige, niet-blokkerende motion-laag. State en puzzeltimers wachten nooit op animaties. */
:root{--motion-fast:160ms;--motion-ui:210ms;--motion-ease:cubic-bezier(.2,.7,.3,1)}
#hm:not([hidden]),#cm:not([hidden]),.authcover:not([hidden]){animation:gpCoverIn var(--motion-ui) var(--motion-ease) both}
#hm:not([hidden])>.hc,#cm:not([hidden])>.hc,.authcover:not([hidden])>.authcard{animation:gpDialogIn var(--motion-ui) var(--motion-ease) both}
#fin:not([hidden]){animation:gpFinIn var(--motion-ui) var(--motion-ease) both}
.peerlivepop:not([hidden]),#archp.open,#pmp.open{animation:gpPopup var(--motion-fast) var(--motion-ease) both}
body.newpick #npm{animation:gpPanelIn var(--motion-ui) var(--motion-ease) both}
@keyframes gpCoverIn{from{opacity:0}to{opacity:1}}
@keyframes gpDialogIn{from{opacity:.2;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gpPanelIn{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gpFinIn{from{opacity:.2;transform:translate(-50%,7px) scale(.985)}to{opacity:1;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
 .pagein,#more.open,.daydetail,#hm:not([hidden]),#cm:not([hidden]),.authcover:not([hidden]),#hm:not([hidden])>.hc,#cm:not([hidden])>.hc,.authcover:not([hidden])>.authcard,#fin:not([hidden]),.peerlivepop:not([hidden]),#archp.open,#pmp.open,body.newpick #npm{animation:none!important}
}


/* Profiel en Groep voelen op grotere schermen als volwaardige hoofdpagina's. */
@media(min-width:761px){
 #authaccount.authcover,#groupaccount.authcover{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;padding:18px max(24px,calc((100vw - 1180px)/2)) 42px}
 #authaccount .authcard,#groupaccount .authcard{width:100%;max-width:1180px;min-height:calc(100dvh - 60px);box-sizing:border-box;border:0;border-radius:0;background:transparent;box-shadow:none;padding:18px 8px 36px}
 #authaccount .authdialoghead,#groupaccount .authdialoghead{background:var(--bg)}
}
/* iPhone behoudt bewust de compacte éénkolomsweergave. */
@media(max-width:760px){
 #authaccount.authcover,#groupaccount.authcover{padding-inline:max(12px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 94%,transparent)}
 #authaccount .authcard,#groupaccount .authcard{width:min(430px,100%)}
}

/* Daginfo: geen blijvende iOS-focus/taprand, wel zichtbare toetsenbordfocus. */
.dayitem .dayaction{-webkit-tap-highlight-color:transparent;outline:none}
.dayitem .dayaction:focus:not(:focus-visible){outline:none;box-shadow:none}
.dayitem .dayaction:focus-visible{outline:2px solid var(--pc);outline-offset:2px}

/* Groepsleden: bewust extra ademruimte rechts van de chevron. */
.sgroupperson{grid-template-columns:38px minmax(120px,1fr) minmax(68px,auto) minmax(92px,auto) 32px;padding-right:24px}
.sgopen{width:32px;height:32px}
@media(max-width:600px){.sgroupperson{grid-template-columns:34px minmax(0,1fr) auto 32px;padding-right:21px}}
@media(max-width:430px){.sgroupperson{grid-template-columns:30px minmax(0,1fr) 48px 30px;padding-right:17px}.sgopen{width:30px}}

/* Persoonlijke puzzelregels: compacte betekenisvolle iconen en één draaiende uitklapknop. */
.personview .spmeta span{display:inline-flex;align-items:center;gap:4px}
.personview .spmeta .stat-icon{width:13px;height:13px;flex:0 0 13px;opacity:.72}
.spchev{display:inline-grid;place-items:center;width:27px;height:27px;margin-left:6px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--card) 92%,var(--bg));transition:transform .22s var(--motion-ease),border-color .18s ease,background .18s ease;vertical-align:middle}
.spchev svg{width:14px;height:14px;display:block}
.spmain.open .spchev{transform:rotate(180deg);border-color:color-mix(in srgb,var(--pc) 38%,var(--line));background:color-mix(in srgb,var(--pc) 7%,var(--card))}
.spdfreehead{margin-top:12px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.spddaily{background:color-mix(in srgb,var(--pc) 3%,transparent)}
@media(prefers-reduced-motion:reduce){.spchev{transition:none!important}}


/* Laatste consistente paginapolish. */
:root{--motion-fast:190ms;--motion-ui:270ms;--motion-ease:cubic-bezier(.16,.78,.28,1)}
.pagein{animation-duration:280ms!important}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gpDialogIn{from{opacity:.08;transform:translateY(10px) scale(.982)}to{opacity:1;transform:none}}
@keyframes gpPanelIn{from{opacity:.08;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Profiel en Groep zijn echte pagina's, geen klikbare modal-achtergrond. */
#authaccount.authpage,#groupaccount.authpage{position:fixed;inset:0;z-index:70;overflow:auto;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;cursor:default}
#authaccount.authpage .authcard,#groupaccount.authpage .authcard{max-width:1180px;margin:0 auto;background:transparent;box-shadow:none;border:0;border-radius:0;min-height:100dvh}
#authaccount.authpage .authdialoghead,#groupaccount.authpage .authdialoghead{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#authaccount.authpage .authx,#groupaccount.authpage .authx{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
#authaccount.authpage .authx .uiicon,#groupaccount.authpage .authx .uiicon{width:21px;height:21px}
@media(max-width:760px){#authaccount.authpage,#groupaccount.authpage{padding:0 12px 28px}#authaccount.authpage .authcard,#groupaccount.authpage .authcard{width:100%;max-width:520px;padding-top:10px}}

/* Home-info: Safari mag na aanraken geen blijvende witte knoprand tonen. */
.dayitem .dayaction,.dayitem .dayaction:focus,.dayitem .dayaction:active{outline:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent!important}
.dayitem .dayaction:focus-visible{outline:2px solid var(--pc)!important;outline-offset:2px!important}
.dayinfo{pointer-events:none}

/* Meer puzzels is een bewuste secundaire knop in plaats van losse linktekst. */
.hmorepuzzles{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 12px!important;border:1px solid var(--line)!important;border-radius:11px!important;background:var(--card)!important;color:var(--fg)!important;font-weight:800;box-shadow:none!important}
.hmorepuzzles:hover{background:color-mix(in srgb,var(--pc) 7%,var(--card))!important;border-color:color-mix(in srgb,var(--pc) 30%,var(--line))!important}
.hmorepuzzles span{display:inline-grid;place-items:center;width:18px;height:18px;font-size:18px;line-height:1;transition:transform var(--motion-fast) var(--motion-ease)}
.hmorepuzzles:hover span{transform:translateX(2px)}

/* Persoonlijke uitklapper: geometrisch gecentreerd en het hele rondje draait. */
.sphead strong{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.spchev{box-sizing:border-box;display:grid!important;place-items:center!important;width:28px!important;height:28px!important;min-width:28px;margin:0!important;padding:0!important;line-height:0;transform-origin:50% 50%}
.spchev svg{display:block;width:14px!important;height:14px!important;margin:0;transform:translateY(-.25px)}
.spmain.open .spchev{transform:rotate(180deg)}

/* Puzzelmenu: functionele iconen overal dezelfde lijnstijl. */
#more .themeMenu .uiicon,#pmp .themeMenu .uiicon{width:18px;height:18px;display:block;margin:auto}
#reset b{display:grid;place-items:center}
#reset b .uiicon{width:18px;height:18px}
#reset{color:var(--fg)!important}
#reset.arm{color:var(--bad)!important;border-color:color-mix(in srgb,var(--bad) 45%,var(--line))!important}


/* Licht thema: warmer papier, duidelijkere lagen en iets meer Gepuzzellig-karakter. */
:root[data-theme=light]{--bg:#f4efe3;--card:#fffdf8;--line:#d3c9b7;--sh:rgba(92,72,34,.11)}
:root[data-theme=light] body.home.nieuw{--page-tone:color-mix(in srgb,#f0c84b 10%,var(--bg))}
:root[data-theme=light] body.home.nieuw::before{opacity:1;filter:saturate(1.08) contrast(1.04)}
:root[data-theme=light] body.home .hcard,
:root[data-theme=light] body.home .daylist,
:root[data-theme=light] body.home .continuecard,
:root[data-theme=light] body.home .grouphomecard{background:color-mix(in srgb,var(--card) 96%,#f7df8a);border-color:color-mix(in srgb,var(--line) 88%,#d4a82f)}
:root[data-theme=light] body.home .hmainnav{background:color-mix(in srgb,var(--card) 92%,#f5dc82);border-color:color-mix(in srgb,var(--line) 82%,#d4a82f)}
:root[data-theme=light] body.home .hmainnav button.on{background:color-mix(in srgb,#f3cf55 18%,var(--card))}
:root[data-theme=light] body.home .hsection{border-color:color-mix(in srgb,var(--line) 78%,#d4a82f)}
:root[data-theme=light] body.home .hmorepuzzles{background:color-mix(in srgb,var(--card) 88%,#f4d96f)!important;border-color:color-mix(in srgb,var(--line) 75%,#d4a82f)!important}
@media(prefers-color-scheme:light){
 :root:not([data-theme=dark]){--bg:#f4efe3;--card:#fffdf8;--line:#d3c9b7;--sh:rgba(92,72,34,.11)}
 :root:not([data-theme=dark]) body.home.nieuw{--page-tone:color-mix(in srgb,#f0c84b 10%,var(--bg))}
 :root:not([data-theme=dark]) body.home.nieuw::before{opacity:1;filter:saturate(1.08) contrast(1.04)}
 :root:not([data-theme=dark]) body.home .hcard,
 :root:not([data-theme=dark]) body.home .daylist,
 :root:not([data-theme=dark]) body.home .continuecard,
 :root:not([data-theme=dark]) body.home .grouphomecard{background:color-mix(in srgb,var(--card) 96%,#f7df8a);border-color:color-mix(in srgb,var(--line) 88%,#d4a82f)}
 :root:not([data-theme=dark]) body.home .hmainnav{background:color-mix(in srgb,var(--card) 92%,#f5dc82);border-color:color-mix(in srgb,var(--line) 82%,#d4a82f)}
 :root:not([data-theme=dark]) body.home .hmainnav button.on{background:color-mix(in srgb,#f3cf55 18%,var(--card))}
 :root:not([data-theme=dark]) body.home .hsection{border-color:color-mix(in srgb,var(--line) 78%,#d4a82f)}
 :root:not([data-theme=dark]) body.home .hmorepuzzles{background:color-mix(in srgb,var(--card) 88%,#f4d96f)!important;border-color:color-mix(in srgb,var(--line) 75%,#d4a82f)!important}
}

/* Pre-live scrollstabiliteit: voorkom horizontale sprong tussen korte en lange Puzzelen-tabs. */
@supports (scrollbar-gutter:stable){html{scrollbar-gutter:stable}}
/* Murdoku-cast: het leesvlak zelf mag op touch/Pencil direct verticaal scrollen. */
.murcastbox textarea{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}

/* Pre-live polish v198: neutrale hoofdnavigatie, veilige iPad-randen en ruimere groepschevrons. */
body.home .hmainnav button::before{background:var(--mut)!important;opacity:.42}
body.home .hmainnav button.on::before{background:var(--home-accent,#d7aa2b)!important;opacity:1}
@supports (padding-top:env(safe-area-inset-top)){body{background-color:var(--bg)}#authaccount.authpage,#groupaccount.authpage{padding-top:env(safe-area-inset-top);background:var(--bg)}}
#authaccount.authpage .authcard,#groupaccount.authpage .authcard{padding-top:0!important}
.sgroupperson{padding-right:28px;grid-template-columns:38px minmax(120px,1fr) minmax(68px,auto) minmax(92px,auto) 34px}
.sgopen{justify-self:center;margin-right:2px}
/* Info-knop: touchfocus mag visueel niet blijven hangen; toetsenbordfocus blijft via input-modality zichtbaar. */
.dayitem .dayaction:focus-visible{outline:0!important}
body.using-keyboard .dayitem .dayaction:focus-visible{outline:2px solid var(--pc)!important;outline-offset:2px!important}
/* Iets duidelijkere, maar rustige pagina-overgang. */
.pagein{animation-duration:360ms!important}
@keyframes pagein{from{opacity:.18;transform:translateY(12px) scale(.994)}to{opacity:1;transform:none}}

/* v199: paginanavigatie links en menu-identiteit op één vaste lijn. */
.authdialoghead{grid-template-columns:44px minmax(0,1fr) 44px!important}
.authdialoghead .authx{grid-column:1!important;grid-row:1;justify-self:start}
.authdialoghead h2{grid-column:2!important;grid-row:1;padding-left:0!important;text-align:center}
#more #authbtn{display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left}
#more #authbtn .authdot{width:9px;height:9px;flex:0 0 9px;margin:0}
#more #authbtn>span:not(.authdot){min-width:0}
#more .mlist #reset{color:var(--fg)}
#more .mlist #reset .ic{color:var(--mut)}
#more .mlist #reset.arm{color:#c22}
#more .mlist #reset.arm .ic{color:currentColor}

/* v200: Profiel en Groep gebruiken op alle schermgroottes hetzelfde volledige-paginamodel. */
#authaccount.authpage,#groupaccount.authpage{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}
#authaccount.authpage .authcard,#groupaccount.authpage .authcard{width:100%;max-width:1180px;min-height:100dvh;margin:0 auto}
@media(max-width:760px){#authaccount.authpage .authcard,#groupaccount.authpage .authcard{max-width:none;padding-top:0}.authdialoghead{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}}
#authbtn .authpersonicon{width:22px;height:22px;flex:0 0 22px}
#more #authbtn{justify-content:flex-start}

/* v202: laatste samenhangende pre-live UX-polish. */
#authaccount.authpage,#groupaccount.authpage{background-color:var(--bg);background-image:var(--skin-bg,none);background-attachment:local;background-position:center top}
#authaccount.authpage .authdialoghead,#groupaccount.authpage .authdialoghead{top:0;border-bottom:1px solid color-mix(in srgb,var(--home-accent,var(--pc)) 26%,var(--line));background:color-mix(in srgb,var(--bg) 88%,transparent)}
#authaccount.authpage .authcard,#groupaccount.authpage .authcard{padding-top:max(8px,env(safe-area-inset-top))!important}
#authaccount.authpage .authdialoghead,#groupaccount.authpage .authdialoghead{padding-top:4px}
@media(min-width:761px){#authaccount .stylepreview,#groupaccount .stylepreview{display:none}}
@media(max-width:760px){#authaccount .stylepreview,#groupaccount .stylepreview{max-height:118px;overflow:hidden}}

/* Actieve hoofdnavigatie is een duidelijke bestemming, niet alleen een klein bolletje. */
body.home .hmainnav button{position:relative;border:1px solid transparent;background:transparent;transition:background .22s ease,border-color .22s ease,transform .22s ease,color .22s ease}
body.home .hmainnav button.on{background:color-mix(in srgb,var(--home-accent,var(--pc)) 14%,var(--card));border-color:color-mix(in srgb,var(--home-accent,var(--pc)) 42%,var(--line));color:var(--fg);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--home-accent,var(--pc)) 78%,transparent)}
body.home .hmainnav button.on svg{color:var(--home-accent,var(--pc))}
body.home .hmainnav button.on::before{transform:scale(1.25)}

/* Dagregels: grotere informatiezone, zonder witte focusring na aanraken. */
.dayitem{--day-info-w:58px}
.dayitem .hdrow.dayaction,.dayitem .hdrow.dayaction:focus,.dayitem .hdrow.dayaction:active{top:0;right:0;bottom:0;width:var(--day-info-w);height:auto;min-width:var(--day-info-w);min-height:100%;border:0!important;border-left:1px solid color-mix(in srgb,var(--line) 55%,transparent)!important;border-radius:0;background:transparent!important;outline:0!important;box-shadow:none!important;-webkit-appearance:none;appearance:none}
.dayitem .hdrow.dayaction:hover{background:color-mix(in srgb,var(--dayc) 8%,transparent)!important}
.dayitem .dayinfo{width:34px;height:34px;margin:auto;border-radius:50%;color:color-mix(in srgb,var(--dayc) 58%,var(--mut))}
.dayitem .dayinfo svg{width:22px;height:22px}
body.using-keyboard .dayitem .dayaction:focus-visible{outline:2px solid var(--pc)!important;outline-offset:-3px!important}
.daygroup summary{padding-right:calc(var(--day-info-w) + 10px)!important}
@media(max-width:760px){.dayitem{--day-info-w:54px}.dayitem .hdrow.dayaction{right:0;width:var(--day-info-w);height:auto;min-height:100%}.daygroup summary{padding-right:calc(var(--day-info-w) + 6px)!important}}
.daystatus .pdonut{min-width:30px;min-height:30px;transform:scale(1.08)}

/* Betekenisvolle kleur blijft zichtbaar zonder het hele menu bont te maken. */
#more #streak{display:flex;align-items:center;gap:8px;color:var(--fg)}
#more #streak .streakicon{width:21px;height:21px;color:#e88918;fill:color-mix(in srgb,#e88918 18%,transparent)}
#more .themeMenu button.on{color:var(--pc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 35%,var(--line))}
#more #authbtn .authpersonicon{color:var(--pc)}
#more .mlist #reset.arm{background:color-mix(in srgb,#d33 14%,transparent);color:#c22}

/* Pagina's komen als één geheel binnen; geen halve fade tijdens async invulling. */
.pagein{animation:pageWholeIn 420ms cubic-bezier(.16,.78,.28,1) both!important}
@keyframes pageWholeIn{0%{opacity:0;transform:translateY(16px)}55%{opacity:.72}100%{opacity:1;transform:none}}
#authaccount.authpage:not([hidden]),#groupaccount.authpage:not([hidden]){animation:pageWholeIn 420ms cubic-bezier(.16,.78,.28,1) both}

/* Niet-puzzelweergaven houden overal een natuurlijk verticaal iOS-scrolloppervlak. */
body.home #home,#authaccount.authpage,#groupaccount.authpage,#side,#more{overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
body.home #home{min-height:calc(100dvh + 2px)}
body:not(.home) #stage{overscroll-behavior:none}

/* v203: touchzones onzichtbaar, chevrons lucht, echte scrolloppervlakken en stabiele reveals. */
.dayitem .hdrow.dayaction,.dayitem .hdrow.dayaction:focus,.dayitem .hdrow.dayaction:active{border:0!important;background:transparent!important;box-shadow:none!important}
.dayitem .hdrow.dayaction:hover{background:color-mix(in srgb,var(--card) 18%,transparent)!important}
.dayitem .dayinfo{color:var(--fg)!important;opacity:.72;border:1px solid color-mix(in srgb,var(--fg) 24%,transparent);background:color-mix(in srgb,var(--card) 82%,transparent)}
.dayitem .dayinfo svg{color:currentColor!important}
.sgroupperson{padding-right:42px!important;grid-template-columns:38px minmax(120px,1fr) minmax(68px,auto) minmax(92px,auto) 44px!important}
.sgopen{justify-self:start!important;margin-right:0!important;margin-left:8px!important}

/* Alle app-/menu-/overzichtspagina's zijn echte verticale scrollers; het puzzelbord blijft vast. */
body.home{overflow:hidden}
body.home #home{height:100dvh;min-height:100dvh;overflow-y:scroll!important;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(2px,env(safe-area-inset-bottom))}
#authaccount.authpage,#groupaccount.authpage{height:100dvh;overflow-y:scroll!important;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}
#authaccount.authpage .authcard,#groupaccount.authpage .authcard{min-height:calc(100dvh + 2px)}
#side,#more{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto}
body:not(.home):not(.newpick){overflow:hidden}
body:not(.home):not(.newpick) #stage{overscroll-behavior:none}

/* Geen animatie meer over half-gerenderde kaarten: alleen een korte, uniforme fade van de reeds opgebouwde pagina. */
.pagein{animation:pageReadyIn 180ms ease-out both!important}
@keyframes pageReadyIn{from{opacity:.72}to{opacity:1}}
#authaccount.authpage:not([hidden]),#groupaccount.authpage:not([hidden]){animation:none!important}
#authaccount.authpage.ui-reveal,#groupaccount.authpage.ui-reveal{animation:pageReadyIn 180ms ease-out both!important}
@media(prefers-reduced-motion:reduce){.pagein,#authaccount.authpage.ui-reveal,#groupaccount.authpage.ui-reveal{animation:none!important}}

/* v204: full-page instellingen volgen het echte thema en blijven volledig onder de iOS-statuszone. */
#authaccount.authpage,#groupaccount.authpage{--auth-safe-top:max(env(safe-area-inset-top),12px);--auth-safe-bg:var(--bg);background-color:var(--page-tone,var(--bg))!important;background-image:var(--page-pattern,none)!important;padding-top:var(--auth-safe-top)!important}
:root[data-theme=dark] #authaccount.authpage,:root[data-theme=dark] #groupaccount.authpage{background-image:var(--pp-d,var(--page-pattern,none))!important}
#authaccount.authpage .authdialoghead,#groupaccount.authpage .authdialoghead{top:0!important;margin-top:0!important}
#authaccount.authpage .authcard,#groupaccount.authpage .authcard{padding-top:0!important}

/* v205: infoactie terug naar compact uiterlijk; hitbox slechts bescheiden groter. */
.dayitem{--day-info-w:48px}
.dayitem .hdrow.dayaction,.dayitem .hdrow.dayaction:focus,.dayitem .hdrow.dayaction:active{top:50%!important;right:4px!important;bottom:auto!important;transform:translateY(-50%)!important;width:44px!important;height:48px!important;min-width:44px!important;min-height:48px!important;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;outline:0!important}
.dayitem .dayaction .dayinfo{width:30px!important;height:30px!important;margin:auto!important;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent)!important;border-radius:50%!important;background:transparent!important;color:var(--fg)!important;opacity:.68}
.dayitem .dayaction .dayinfo svg{width:20px!important;height:20px!important}
.dayitem .hdrow.dayaction:hover .dayinfo{background:color-mix(in srgb,var(--fg) 6%,transparent)!important;opacity:.85}
.daygroup summary{padding-right:calc(var(--day-info-w) + 8px)!important}
@media(max-width:760px){.dayitem{--day-info-w:46px}.dayitem .hdrow.dayaction{right:2px!important;width:42px!important;height:46px!important;min-width:42px!important;min-height:46px!important}.daygroup summary{padding-right:calc(var(--day-info-w) + 6px)!important}}


/* Canonieke pre-live uitlijning voor thema-, catalogus- en dagregelpolish. */
#authaccount.authpage,#groupaccount.authpage{
  background-size:380px 380px!important;
  background-position:center top!important;
  background-attachment:fixed!important;
}
#authaccount.authpage .authdialoghead,#groupaccount.authpage .authdialoghead{
  border-bottom-color:color-mix(in srgb,var(--home-accent,var(--pc)) 52%,var(--line))!important;
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--home-accent,var(--pc)) 24%,transparent);
}
#authaccount.authpage .authdialoghead h2,#groupaccount.authpage .authdialoghead h2{color:var(--home-accent,var(--pc))}
#authaccount .stylebox,#groupaccount .stylebox{border-top:3px solid color-mix(in srgb,var(--home-accent,var(--pc)) 72%,var(--line))}
#authaccount .stylecolors button.on::before,#groupaccount .stylecolors button.on::before{box-shadow:0 0 0 3px var(--home-accent,var(--pc)),0 0 0 5px var(--card)!important}

/* De infoactie blijft gekoppeld aan de kopregel, ook wanneer details uitklappen. */
.dayitem .hdrow.dayaction,.dayitem .hdrow.dayaction:focus,.dayitem .hdrow.dayaction:active{top:32px!important;transform:translateY(-50%)!important}
@media(max-width:760px){.dayitem .hdrow.dayaction{top:37px!important}}

/* Puzzelen blijft ook met een korte favorietenlijst een echt native scrolloppervlak. */
body.home #home .hwrap:has(.hpuzzletabs){min-height:calc(100dvh + 3px);box-sizing:border-box}

/* Favorieten houden een vaste tweekolomsmaat en intern dezelfde verticale ritmiek. */
@media(min-width:561px){
 body.home #home .hwrap:has(.hpuzzletabs) .puzzlecatalog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
body.home #home .hwrap:has(.hpuzzletabs) .puzzlecard{height:100%;min-height:246px;box-sizing:border-box}
body.home #home .hwrap:has(.hpuzzletabs) .puzzlecardbody{display:flex;flex-direction:column;height:100%}
body.home #home .hwrap:has(.hpuzzletabs) .puzzlecard p{min-height:2.84em}
body.home #home .hwrap:has(.hpuzzletabs) .pcarddaily{margin-top:auto}
body.home #home .hwrap:has(.hpuzzletabs) .puzzlecardfoot{margin-top:10px}

/* Binair-potlood iets terug voor meer onderscheid met definitieve invoer. */
body[data-t=bin] .c .nt{left:7%;top:6%;width:58%;height:58%;opacity:.54}


/* Canonieke safe-area voor Profiel en Groep: één bron voor paginapadding en vaste bovenkap. */
@media(max-width:760px){
 #authaccount.authpage,#groupaccount.authpage{--auth-safe-top:calc(env(safe-area-inset-top) + 16px);--auth-safe-bg:var(--page-tone,var(--bg))}
}
#authaccount.authpage::before,#groupaccount.authpage::before{
  content:"";position:fixed;z-index:30;top:0;left:0;right:0;
  height:var(--auth-safe-top);
  background:var(--auth-safe-bg);
  pointer-events:none;
}
body.home #home .hwrap:has(.hpuzzletabs) .puzzlecatalog{align-items:start}
body.home #home .hwrap:has(.hpuzzletabs) .puzzlecard{height:auto;align-self:start}
@media(prefers-reduced-motion:reduce){.pcarddailychoices{transition:none!important}}




/* v210: bestaande presence hersteld; op iPhone blijft de onlineknop bewust compact. */
@media(max-width:560px){
 body.phone .peerlive{min-height:30px;padding:4px 8px;gap:5px;font-size:11px}
 body.phone .peerlive>i{width:7px;height:7px;box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 15%,transparent)}
 body.phone #prow #peerLive{min-height:30px;max-width:31vw;padding:4px 7px;gap:5px}
 body.phone #prow #peerLive span{font-size:11px}
 body.phone.home .hlivebadge.liveactivity{padding:6px 9px}
 body.phone.home .hlivebadge.liveactivity b{font-size:12px}
 body.phone.home .hlivebadge.liveactivity small{font-size:10px}
}

/* Definitieve pre-live Home-sfeer: rustige dark basis en gelaagde light variant. */
body.home .hhomehero{
 margin:-4px -10px 0;
 padding:10px 12px 12px;
 border:1px solid color-mix(in srgb,var(--home-accent,#7a52d6) 18%,var(--line));
 border-radius:16px;
 background:linear-gradient(120deg,color-mix(in srgb,#7a52d6 7%,var(--card)),color-mix(in srgb,#12b5a2 4%,var(--card)) 48%,color-mix(in srgb,#f2a000 6%,var(--card)));
}
body.home .hhomehero .hbrand{margin-bottom:8px}
body.home .hmainnav{
 background:linear-gradient(105deg,color-mix(in srgb,#7a52d6 5%,var(--card)),color-mix(in srgb,#2b9be6 3%,var(--card)) 55%,color-mix(in srgb,#12b5a2 4%,var(--card)));
 border-color:color-mix(in srgb,var(--home-accent,#7a52d6) 14%,var(--line));
}
body.home .hmainnav button.on{background:color-mix(in srgb,var(--home-accent,#7a52d6) 9%,var(--card))}
body.home .daylist{
 background:linear-gradient(115deg,color-mix(in srgb,#f2a000 3%,var(--card)),var(--card) 38%,color-mix(in srgb,#12b5a2 2.5%,var(--card)));
 border-color:color-mix(in srgb,#f2a000 14%,var(--line));
}
body.home .continuecard,
body.home .hcont{background:linear-gradient(110deg,color-mix(in srgb,var(--pc) 4%,var(--card)),var(--card) 46%,color-mix(in srgb,#2b9be6 2%,var(--card)))}
body.home .continuecard{border-color:color-mix(in srgb,var(--pc) 14%,var(--line))}
body.home .hsection{border-color:color-mix(in srgb,var(--home-accent,#7a52d6) 10%,var(--line))}
@media(max-width:560px){body.phone.home .hhomehero{margin:-9px -4px 0;padding:9px 10px 10px;border-radius:14px}}
body.tablet.home .hhomehero{padding:12px 14px 14px}

:root[data-theme=light] body.home .hhomehero{
 background:linear-gradient(120deg,#f5f0ff 0%,#f2fbf8 50%,#fff7e5 100%);
 border-color:#d8cfea;box-shadow:0 5px 18px rgba(73,58,112,.055)
}
:root[data-theme=light] body.home .hmainnav{background:linear-gradient(105deg,#f3f0fb 0%,#f2f7fc 52%,#eef9f5 100%);border-color:#d6d2e2}
:root[data-theme=light] body.home .hmainnav button.on{background:#e9e5fa;border-color:#b8b0db}
:root[data-theme=light] body.home .daylist{
 background:linear-gradient(115deg,#fff8e9 0%,#fffdf7 48%,#f3fbf7 100%);
 border-color:#dfcfaa;box-shadow:0 6px 18px rgba(99,77,36,.055)
}
:root[data-theme=light] body.home .dayitem:first-child{background:linear-gradient(90deg,rgba(242,160,0,.075),rgba(242,160,0,.018) 62%,transparent)}
:root[data-theme=light] body.home .continuecard,
:root[data-theme=light] body.home .hcont{
 background:linear-gradient(105deg,color-mix(in srgb,var(--pc) 7%,#fffdf8),#fffdf8 48%,#f5f8ff 100%);
 border-color:color-mix(in srgb,var(--pc) 18%,#d3c9b7)
}
:root[data-theme=light] body.home .hsection{border-color:#d8cfbd}
@media(prefers-color-scheme:light){
 :root:not([data-theme=dark]) body.home .hhomehero{background:linear-gradient(120deg,#f5f0ff 0%,#f2fbf8 50%,#fff7e5 100%);border-color:#d8cfea;box-shadow:0 5px 18px rgba(73,58,112,.055)}
 :root:not([data-theme=dark]) body.home .hmainnav{background:linear-gradient(105deg,#f3f0fb 0%,#f2f7fc 52%,#eef9f5 100%);border-color:#d6d2e2}
 :root:not([data-theme=dark]) body.home .hmainnav button.on{background:#e9e5fa;border-color:#b8b0db}
 :root:not([data-theme=dark]) body.home .daylist{background:linear-gradient(115deg,#fff8e9 0%,#fffdf7 48%,#f3fbf7 100%);border-color:#dfcfaa;box-shadow:0 6px 18px rgba(99,77,36,.055)}
 :root:not([data-theme=dark]) body.home .dayitem:first-child{background:linear-gradient(90deg,rgba(242,160,0,.075),rgba(242,160,0,.018) 62%,transparent)}
 :root:not([data-theme=dark]) body.home .continuecard,
 :root:not([data-theme=dark]) body.home .hcont{background:linear-gradient(105deg,color-mix(in srgb,var(--pc) 7%,#fffdf8),#fffdf8 48%,#f5f8ff 100%);border-color:color-mix(in srgb,var(--pc) 18%,#d3c9b7)}
 :root:not([data-theme=dark]) body.home .hsection{border-color:#d8cfbd}
}

/* v225 pre-live interactiepolish: functionele kleur, Murdoku-lagen en controlefeedback. */
#potb:not(.on)>span:first-child{color:#7455b8;font-weight:850}
#hintb .uiicon{color:#c58a18}
#chk{color:color-mix(in srgb,var(--ok) 82%,var(--fg))}
#tools #undo b,#tools #redo b{color:color-mix(in srgb,var(--pc) 72%,var(--fg))}
#helpb .uiicon,#ctrlb .uiicon{color:color-mix(in srgb,var(--pc) 62%,var(--fg))}
#mgrid.checkgood,#grid.checkgood{animation:boardCheckGood .72s ease-out}
#mgrid.checkbad,#grid.checkbad{animation:boardCheckBad .72s ease-out}
@keyframes boardCheckGood{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 88%,transparent),0 8px 24px var(--sh)}100%{box-shadow:0 0 0 0 transparent,0 8px 24px var(--sh)}}
@keyframes boardCheckBad{0%{box-shadow:0 0 0 4px color-mix(in srgb,#d84b4b 88%,transparent),0 8px 24px var(--sh)}100%{box-shadow:0 0 0 0 transparent,0 8px 24px var(--sh)}}
@media(prefers-reduced-motion:reduce){#mgrid.checkgood,#grid.checkgood{outline:3px solid var(--ok)}#mgrid.checkbad,#grid.checkbad{outline:3px solid #d84b4b}}