/* The board styles: each sets the tokens, and some add a patterned frame. */
/* Art boards: styles drawn from transit and Japanese design history */
[data-style="standard"]{
  --frame:#111111; --frame-edge:#2a2a2a; --bevel:inset 0 1.1cqw 0 #000;
  --tile:#fafafa; --tile-hi:#ffffff; --ink:#111111; --seam:#cfcfcf; --c-w:#111111; --c-r:#e2382d; --c-g:#1f9a4c;
  --f-tile:"Archivo",Arial,sans-serif; --tile-stretch:100%; --tile-w:600; --tile-size:2.95cqw;
  --wall:#141414; --ui:#f2f2f2; --muted:#a6a6a6; --line:#2e2e2e; --panel:#1b1b1b; --panel-2:#242424;
  --accent:#f6c400; --accent-ink:#141000; --ok:#3fbf6a; --warn:#ff7b66;
}
[data-style="doublearrow"]{
  --frame:#23262b; --frame-edge:#3a3e45; --bevel:inset 0 -.9cqw 0 #b5121b;
  --tile:#f7f7f4; --tile-hi:#ffffff; --ink:#111111; --seam:#00000055; --c-r:#b5121b;
  --f-tile:"Archivo",Arial,sans-serif; --tile-stretch:92%; --tile-w:700; --tile-size:2.95cqw; --flap-r:1px; --frame-r:4px;
  --wall:#15171b; --ui:#eef0f3; --muted:#9ea4ad; --line:#2c3038; --panel:#1c1f24; --panel-2:#242830;
  --accent:#ff5a5f; --accent-ink:#1a0506; --ok:#4fb67a; --warn:#ff8a7d;
}
[data-style="doublearrow"] .t.lo{--tile:#1b2a4a; --tile-hi:#22345a; --ink:#f7f7f4; --seam:#0d1526}
[data-style="ulm"]{
  --frame:#061a36; --frame-edge:#0f2a52;
  --tile:#0b2d5b; --tile-hi:#0f356a; --ink:#f5b800; --seam:#020a16; --c-y:#f5b800;
  --f-tile:"Archivo",Arial,sans-serif; --tile-stretch:85%; --tile-w:600; --tile-size:2.95cqw; --flap-r:1px; --frame-r:0px;
  --wall:#04132a; --ui:#eef2f8; --muted:#9fb0c8; --line:#173158; --panel:#082042; --panel-2:#0d2a52;
  --accent:#f5b800; --accent-ink:#1b1400; --ok:#5cc98a; --warn:#ff8a7d;
}
[data-style="olympia"]{
  --frame:#b9bdc2; --frame-edge:#d3d6da;
  --tile:#fbfbf9; --tile-hi:#ffffff; --ink:#1f5f9f; --seam:#c9ced4; --c-b:#5aa7e0; --c-g:#3fae5a; --c-o:#f08c2e;
  --f-tile:"Archivo",Arial,sans-serif; --tile-stretch:100%; --tile-w:500; --tile-size:2.95cqw; --flap-r:.3cqw;
  --wall:#e9ecef; --ui:#16324f; --muted:#4f6275; --line:#c9d0d8; --panel:#f5f7f9; --panel-2:#eaeef2;
  --accent:#1f5f9f; --accent-ink:#ffffff; --ok:#1d7a3c; --warn:#b3261e;
  color-scheme:light;
}
[data-style="jetage"]{
  --frame:#8f1c22; --frame-edge:#b23a40; --frame-r:4cqw 4cqw 1.4cqw 1.4cqw; --frame-pad:2.6cqw 3cqw 2.2cqw;
  --tile:#ebe4d6; --tile-hi:#f3eee4; --ink:#8f1c22; --seam:#cbbfa9; --c-r:#c8202a;
  --f-tile:"Archivo",Arial,sans-serif; --tile-stretch:110%; --tile-w:700; --tile-size:2.8cqw; --flap-r:.3cqw;
  --wall:#f1ece3; --ui:#2a1416; --muted:#6e5a54; --line:#d9cfc0; --panel:#f8f5ef; --panel-2:#eee7db;
  --accent:#a3191f; --accent-ink:#ffffff; --ok:#186a33; --warn:#a3191f;
  color-scheme:light;
}
[data-style="patapata"]{
  --frame:#2b2e33; --frame-edge:#4a4f56; --bevel:inset 0 0 0 .35cqw #4a4f56;
  --tile:#141518; --tile-hi:#1c1e22; --ink:#e8e8e4; --seam:#000; --c-r:#e43b2f; --c-g:#2ea24f;
  --f-tile:"Archivo","Arial Narrow",Arial,sans-serif; --tile-stretch:80%; --tile-w:600; --tile-size:3cqw;
  --wall:#17191c; --ui:#ecedee; --muted:#a1a6ad; --line:#2c3035; --panel:#1d2024; --panel-2:#25292e;
  --accent:#ffb23e; --accent-ink:#1d1200; --ok:#4fc06e; --warn:#ff8a7d;
}
[data-style="ekimei"]{
  --frame:#d9dbd7; --frame-edge:#eceeea; --bevel:inset 0 0 0 .25cqw #b7bab4;
  --tile:#fbfbf8; --tile-hi:#ffffff; --ink:#1c1d1f; --seam:#c4c7c1; --c-g:#7ac143;
  --f-tile:"M PLUS Rounded 1c","Archivo",sans-serif; --tile-w:700; --tile-size:2.8cqw; --flap-r:.45cqw;
  --wall:#eef0ec; --ui:#1c1d1f; --muted:#575b55; --line:#cfd3cc; --panel:#f7f8f5; --panel-2:#e9ece6;
  --accent:#276a19; --accent-ink:#ffffff; --ok:#276a19; --warn:#b3261e;
  color-scheme:light;
}
[data-style="dangan"]{
  --frame:#e9e5da; --frame-edge:#f6f3ea; --frame-r:13cqw 2cqw 2cqw 13cqw; --frame-pad:2.4cqw 2.8cqw 2.4cqw 7cqw;
  --bevel:inset 0 -1.1cqw 0 #1a3f8f;
  --tile:#f6f3ea; --tile-hi:#fbf9f3; --ink:#1a3f8f; --seam:#d3cfc3; --c-b:#1a3f8f;
  --f-tile:"Archivo",Arial,sans-serif; --tile-stretch:90%; --tile-w:600; --tile-size:2.85cqw; --flap-r:.3cqw;
  --wall:#f2efe6; --ui:#13264f; --muted:#525c6e; --line:#d6d1c4; --panel:#f8f6f0; --panel-2:#ece8dd;
  --accent:#1a3f8f; --accent-ink:#ffffff; --ok:#1d6e38; --warn:#b3261e;
  color-scheme:light;
}
[data-style="butterfly"]{
  --frame:#4a2a1c; --frame-edge:#6a4231; --frame-r:1.4cqw; --bevel:inset 0 .2cqw 0 #6a4231,inset 0 -.3cqw 0 #2e180f;
  --tile:#eadfc8; --tile-hi:#f2e9d6; --ink:#3b2116; --seam:#b8955a; --pin-c:#b8955a; --pin-s:.24;
  --c-r:#a8452e; --c-o:#c97a3c; --c-y:#d8b25a; --c-g:#6f8f5a; --c-b:#4f6f8f;
  --f-tile:"Archivo",Arial,sans-serif; --tile-stretch:95%; --tile-w:500; --tile-size:2.95cqw; --flap-r:.3cqw;
  --wall:#2b1a12; --ui:#f3e8d6; --muted:#c4ab8c; --line:#4a3122; --panel:#331f15; --panel-2:#3d271b;
  --accent:#d8b25a; --accent-ink:#2a1a08; --ok:#8fc47a; --warn:#ff9a85;
}
[data-style="metro"]{
  --frame:#2a2a2a; --frame-edge:#3a3a3a; --frame-r:2cqw; --bevel:inset 0 0 0 .6cqw #e6007e;
  --tile:#c4006b; --tile-hi:#d4007a; --ink:#ffffff; --seam:#00000040; --flap-r:.6cqw;
  --c-r:#e6007e; --c-o:#f39200; --c-y:#ffcc00; --c-g:#00a651; --c-b:#0072bc;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:800; --tile-size:2.95cqw;
  --wall:#1a1418; --ui:#f6eef3; --muted:#b9a7b2; --line:#3a2d35; --panel:#211a1f; --panel-2:#2b2228;
  --accent:#ff4fa8; --accent-ink:#1a0510; --ok:#4fc06e; --warn:#ff8a7d;
}
[data-style="mexico68"]{
  --frame:#111111; --frame-edge:#111111; --frame-r:4px; --frame-pad:3cqw;
  --tile:#fafafa; --tile-hi:#ffffff; --ink:#111111; --seam:#d0d0d0; --c-w:#111111;
  --c-r:#e6007e; --c-o:#ff6a13; --c-y:#ffd100; --c-g:#00a651; --c-b:#00a3e0; --c-v:#7a2a90;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:800; --tile-stretch:112%; --tile-size:2.8cqw;
  --wall:#f2f2f0; --ui:#111111; --muted:#555555; --line:#d6d6d2; --panel:#fafaf8; --panel-2:#ececea;
  --accent:#c4006b; --accent-ink:#ffffff; --ok:#1d7a3c; --warn:#b3261e; color-scheme:light;
}
[data-style="calcadao"]{
  --frame:#141414; --frame-edge:#141414; --frame-r:1cqw; --frame-pad:3.2cqw;
  --tile:#f3efe6; --tile-hi:#fbf8f1; --ink:#141414; --seam:#cfc8b8; --c-w:#141414;
  --c-r:#b33a2b; --c-g:#2f8f6e;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:700; --tile-stretch:95%; --tile-size:2.85cqw;
  --wall:#efeae0; --ui:#141414; --muted:#5a554c; --line:#d6cfc2; --panel:#f7f4ee; --panel-2:#ebe6dc;
  --accent:#b33a2b; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="cinetica"]{
  --frame:#121212; --frame-edge:#121212; --frame-r:4px; --frame-pad:3cqw;
  --tile:#1a1a1a; --tile-hi:#222222; --ink:#f4f4f0; --seam:#000; --flap-r:1px;
  --c-r:#e63328; --c-g:#1e9e57; --c-b:#2459b8;
  --f-tile:"Archivo","Arial Narrow",Arial,sans-serif; --tile-w:600; --tile-stretch:75%; --tile-size:3.05cqw;
  --wall:#0e0e0e; --ui:#f2f2ee; --muted:#a3a39d; --line:#2a2a2a; --panel:#161616; --panel-2:#1f1f1f;
  --accent:#ff5a4f; --accent-ink:#1a0503; --ok:#3fc27a; --warn:#ff8a7d;
}
/* London and Bombay */
[data-style="oxblood"]{
  --frame:#6b1a16; --frame-edge:#8a2a22; --frame-r:1cqw; --frame-pad:2.6cqw;
  --bevel:inset 0 .35cqw 0 #a14334,inset 0 -.45cqw 0 #470e0b,inset 0 0 0 1.2cqw #6b1a16,inset 0 0 0 1.35cqw #e9dfc6;
  --tile:#efe6cf; --tile-hi:#f8f2e2; --ink:#1f3b2b; --seam:#c7bb9d; --flap-r:.15cqw; --c-w:#1f3b2b;
  --c-r:#8a2018; --c-o:#c9742c; --c-y:#d8a93a; --c-g:#2e5a3e; --c-b:#1f3f6e;
  --f-tile:"Cabin","Gill Sans",Arial,sans-serif; --tile-w:700; --tile-size:2.85cqw;
  --wall:#240c0a; --ui:#f4ebdc; --muted:#c3a99d; --line:#47201b; --panel:#2e1210; --panel-2:#3a1815;
  --accent:#e9c46a; --accent-ink:#2a1a04; --ok:#7cc48f; --warn:#ff9a85;
}
[data-style="marinedrive"]{
  --frame:#f3e3cf; --frame-edge:#f3e3cf; --frame-r:2.6cqw 2.6cqw .8cqw .8cqw; --frame-pad:3.6cqw 3cqw 2.6cqw;
  --tile:#f8f1e3; --tile-hi:#fdf9f1; --ink:#1e4a47; --seam:#d7c9ad; --flap-r:.5cqw; --c-w:#1e4a47;
  --c-r:#c4553f; --c-o:#e08a5a; --c-y:#e2b04a; --c-g:#4f9a84; --c-b:#3d6f8e; --c-v:#8a6a9e;
  --f-tile:"Josefin Sans",Futura,Arial,sans-serif; --tile-w:600; --tile-size:2.75cqw;
  --wall:#f5ebdd; --ui:#163a38; --muted:#6a6157; --line:#e0d2bd; --panel:#fbf6ee; --panel-2:#f1e7d8;
  --accent:#1e4a47; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="tonfan"]{
  --frame:#eee8da; --frame-edge:#eee8da; --frame-r:2px; --frame-pad:2.4cqw 2.4cqw 2.4cqw 7cqw;
  --tile:#161616; --tile-hi:#1e1e1e; --ink:#f5f1e8; --seam:#000; --flap-r:1px;
  --c-r:#d6372a; --c-y:#e8b500; --c-b:#2459b8; --c-g:#2e8b57; --c-o:#e5762b;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:500; --tile-size:2.9cqw;
  --wall:#e9e3d4; --ui:#161616; --muted:#5f5a50; --line:#d4ccbb; --panel:#f6f2e9; --panel-2:#ebe5d8;
  --accent:#d6372a; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="graphite"]{
  --frame:#f3f0e8; --frame-edge:#f3f0e8; --frame-r:2px; --frame-pad:3cqw;
  --tile:#f8f6f0; --tile-hi:#fcfbf8; --ink:#2a2a2a; --seam:#d6d2c8; --flap-r:0px; --c-w:#2a2a2a;
  --c-r:#9b3b2e; --c-o:#b7774a; --c-y:#c9a64a; --c-g:#5d7a5a; --c-b:#3e5a7a; --c-v:#6e5a7a;
  --f-tile:"Jost","Futura",Arial,sans-serif; --tile-w:300; --tile-size:3cqw;
  --wall:#efece5; --ui:#222222; --muted:#6a665e; --line:#dcd8cf; --panel:#f8f6f1; --panel-2:#eeebe4;
  --accent:#2a2a2a; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
/* Budapest */
[data-style="ikarus"]{
  --frame:#1f4fa0; --frame-edge:#2c62bc; --frame-r:1.6cqw; --frame-pad:2.4cqw 2.6cqw 4cqw;
  --bevel:inset 0 -1.6cqw 0 #1f4fa0,inset 0 -2.2cqw 0 #e9e4d6,inset 0 .25cqw 0 #3a6fc6;
  --tile:#121212; --tile-hi:#191919; --ink:#f5f5f0; --seam:#000; --flap-r:.1cqw;
  --c-r:#e0412f; --c-o:#f08a24; --c-y:#f5c814; --c-g:#3aa35a; --c-b:#3a7fd5;
  --f-tile:"Archivo","Arial Narrow",Arial,sans-serif; --tile-w:700; --tile-stretch:85%; --tile-size:3cqw;
  --wall:#0f1a2c; --ui:#eef2f8; --muted:#9fb0c8; --line:#22365a; --panel:#13213a; --panel-2:#1a2a48;
  --accent:#f5c814; --accent-ink:#1d1700; --ok:#5fc08a; --warn:#ff8a7d;
}
[data-style="kassak"]{
  --frame:#ece6d8; --frame-edge:#ece6d8; --frame-r:0px; --frame-pad:3.6cqw 2.4cqw 2.4cqw 6.4cqw;
  --tile:#f2ede2; --tile-hi:#f8f4ec; --ink:#111111; --seam:#cbc4b4; --flap-r:0px; --c-w:#111111;
  --c-r:#c8281e; --c-o:#d9622a; --c-y:#e3b52a; --c-g:#2f6e4a; --c-b:#24479a;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:800; --tile-stretch:105%; --tile-size:2.85cqw;
  --wall:#e9e3d5; --ui:#111111; --muted:#5d584e; --line:#d4cdbd; --panel:#f5f2ea; --panel-2:#ebe6da;
  --accent:#c8281e; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
/* Patterned frames. They apply to the big board (.board) and to the small previews in the style picker (.minib). */
[data-style="mexico68"].board,[data-style="mexico68"] .board,.minib[data-style="mexico68"]{
  background:repeating-linear-gradient(90deg,#111111 0 3px,#fafafa 3px 7px)}
[data-style="calcadao"].board,[data-style="calcadao"] .board,.minib[data-style="calcadao"]{
  background:radial-gradient(circle at 50% 0,transparent 9px,#141414 10px 15px,transparent 16px) 0 0/32px 20px,
             radial-gradient(circle at 50% 100%,transparent 9px,#141414 10px 15px,transparent 16px) 16px 10px/32px 20px,#f3efe6}
[data-style="cinetica"].board,[data-style="cinetica"] .board,.minib[data-style="cinetica"]{
  background:repeating-linear-gradient(90deg,#e63328 0 2px,#121212 2px 6px,#1e9e57 6px 8px,#121212 8px 12px,#2459b8 12px 14px,#121212 14px 18px)}
[data-style="marinedrive"].board,[data-style="marinedrive"] .board,.minib[data-style="marinedrive"]{
  background:repeating-conic-gradient(from -90deg at 50% 100%,#ebcbb5 0 4deg,#f3e3cf 4deg 8deg)}
[data-style="tonfan"].board,[data-style="tonfan"] .board{
  background:radial-gradient(circle at 3.6cqw 30%,#d6372a 0 1.7cqw,transparent 1.75cqw),
             linear-gradient(#161616,#161616) 3.45cqw 56%/.25cqw 38% no-repeat,
             linear-gradient(#2459b8,#2459b8) 2.1cqw 86%/3cqw .8cqw no-repeat,
             linear-gradient(#e8b500,#e8b500) 4.4cqw 11%/.9cqw .9cqw no-repeat,#eee8da}
.minib[data-style="tonfan"]{--frame-pad:7%;padding-left:24%;
  background:radial-gradient(circle at 12% 32%,#d6372a 0 6px,transparent 6.5px),linear-gradient(#161616,#161616) 11.5% 62%/1px 34% no-repeat,linear-gradient(#2459b8,#2459b8) 6% 88%/11% 4px no-repeat,#eee8da}
[data-style="graphite"].board,[data-style="graphite"] .board,.minib[data-style="graphite"]{
  background:linear-gradient(17deg,transparent calc(50% - .5px),#2a2a2a55 50%,transparent calc(50% + .5px)),
             repeating-linear-gradient(90deg,transparent 0 11px,#55555526 11px 12px),repeating-linear-gradient(0deg,transparent 0 11px,#55555526 11px 12px),#f3f0e8}
[data-style="kassak"].board,[data-style="kassak"] .board{
  background:linear-gradient(#c8281e,#c8281e) 0 0/4.6cqw 62% no-repeat,linear-gradient(#111,#111) 5.2cqw 0/.5cqw 100% no-repeat,
             linear-gradient(#111,#111) 100% 0/34% 1.6cqw no-repeat,linear-gradient(#c8281e,#c8281e) 0 100%/4.6cqw 1.6cqw no-repeat,#ece6d8}
.minib[data-style="kassak"]{padding-left:20%;background:linear-gradient(#c8281e,#c8281e) 0 0/14% 62% no-repeat,linear-gradient(#111,#111) 15% 0/2px 100% no-repeat,linear-gradient(#111,#111) 100% 0/34% 5px no-repeat,#ece6d8}
/* A solid backing behind the tiles, so those patterns show only in the frame margin */
[data-style="mexico68"] .grid{background:#111;padding:.6cqw;border-radius:.4cqw;box-sizing:border-box}
[data-style="calcadao"] .grid{background:#141414;padding:.6cqw;border-radius:.4cqw;box-sizing:border-box}
[data-style="cinetica"] .grid{background:#121212;padding:.6cqw;border-radius:.4cqw;box-sizing:border-box}
[data-style="marinedrive"] .grid{background:#1e4a47;padding:.6cqw;border-radius:.8cqw;box-sizing:border-box}
[data-style="tonfan"] .grid{background:#161616;padding:.5cqw;box-sizing:border-box}
[data-style="graphite"] .grid{background:#d9d5cb;padding:1px;box-sizing:border-box}
[data-style="kassak"] .grid{background:#111;padding:.4cqw;box-sizing:border-box}
.minib[data-style="mexico68"] .g6{background:#111}.minib[data-style="calcadao"] .g6{background:#141414}.minib[data-style="cinetica"] .g6{background:#121212}
.minib[data-style="mexico68"] .g6,.minib[data-style="calcadao"] .g6,.minib[data-style="cinetica"] .g6{padding:2.4cqw;border-radius:1.5cqw}.minib[data-style="marinedrive"] .g6{background:#1e4a47}.minib[data-style="tonfan"] .g6{background:#161616}.minib[data-style="graphite"] .g6{background:#d9d5cb}.minib[data-style="kassak"] .g6{background:#111}
.minib[data-style="kassak"] .g6,.minib[data-style="marinedrive"] .g6,.minib[data-style="tonfan"] .g6{padding:2.4cqw;border-radius:1.5cqw}
[data-style="standard"] .t,[data-style="doublearrow"] .t,[data-style="ulm"] .t,[data-style="olympia"] .t,[data-style="jetage"] .t,[data-style="patapata"] .t,[data-style="ekimei"] .t,[data-style="dangan"] .t,[data-style="butterfly"] .t,[data-style="metro"] .t,[data-style="mexico68"] .t,[data-style="calcadao"] .t,[data-style="cinetica"] .t,[data-style="oxblood"] .t,[data-style="marinedrive"] .t,[data-style="tonfan"] .t,[data-style="graphite"] .t,[data-style="ikarus"] .t,[data-style="kassak"] .t{font-weight:var(--tile-w,600)}
/* Graphite's one long diagonal, drawn across the whole board like a ruled line through a drawing */
.board[data-style="graphite"]::before{content:"";position:absolute;inset:0;background:linear-gradient(17deg,transparent calc(50% - .6px),#2a2a2a59 50%,transparent calc(50% + .6px));pointer-events:none;z-index:5}
@keyframes gA{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@keyframes gB{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}

/* Museum: favorites from the Met */
[data-style="william"]{
  --frame:#1f8093; --frame-edge:#4fb7c4; --frame-r:2.2cqw; --frame-pad:3cqw;
  --bevel:inset 0 .35cqw 0 #6cc6d1,inset 0 -.45cqw 0 #135a68;
  --tile:#3aa5b4; --tile-hi:#55b8c5; --ink:#102020; --seam:#16606e; --flap-r:.55cqw; --gloss:rgba(255,255,255,.35); --c-w:#102020;
  --c-r:#b84a3a; --c-o:#d98a3a; --c-y:#e0bc4a; --c-g:#2f7a5a; --c-b:#24468f; --c-v:#5a3f86;
  --f-tile:"M PLUS Rounded 1c",Arial,sans-serif; --tile-w:700; --tile-size:2.85cqw;
  --wall:#0e2a30; --ui:#e8f4f5; --muted:#9cc0c4; --line:#1c4148; --panel:#123238; --panel-2:#173c43;
  --accent:#e0bc4a; --accent-ink:#1d1600; --ok:#7cd09a; --warn:#ff9a85;
}
[data-style="iznik"]{
  --frame:#1d3c8f; --frame-edge:#2a4fa8; --frame-r:.3cqw; --frame-pad:3.2cqw;
  --tile:#f7f5ef; --tile-hi:#fcfbf7; --ink:#1d3c8f; --seam:#d6d2c6; --flap-r:.2cqw; --gloss:rgba(255,255,255,.4); --c-w:#1d3c8f;
  --c-r:#c4372b; --c-o:#d9772a; --c-y:#d9a83a; --c-g:#2e8a5a; --c-b:#2a9bb0; --c-v:#5a4a9a;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:600; --tile-size:2.85cqw;
  --wall:#f1efe8; --ui:#14285e; --muted:#5a6280; --line:#d9d6cc; --panel:#faf9f5; --panel-2:#eeece4;
  --accent:#c4372b; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="tiffany"]{
  --frame:#3a2a1a; --frame-edge:#5a4128; --frame-r:.5cqw; --frame-pad:3.4cqw;
  --tile:#efe6cf; --tile-hi:#f6efdc; --ink:#3b2550; --seam:#3a2a1a; --flap-r:.25cqw; --gloss:rgba(255,255,255,.3); --c-w:#3b2550;
  --c-r:#c4566a; --c-o:#d98a2a; --c-y:#e3b54a; --c-g:#5f8a4a; --c-b:#3f6fa8; --c-v:#6a4a9a;
  --f-tile:"Josefin Sans","Futura",Arial,sans-serif; --tile-w:600; --tile-size:2.9cqw;
  --wall:#1e1610; --ui:#f3eadb; --muted:#bca58e; --line:#3a2b1e; --panel:#261c14; --panel-2:#30241a;
  --accent:#e3b54a; --accent-ink:#231a04; --ok:#8fcf8a; --warn:#ff9a85;
}
/* Millefleur: a dark green field of small flowers */

/* Turquoise faience with black-painted lotus buds, under a glaze shine */
[data-style="william"].board,[data-style="william"] .board,.minib[data-style="william"]{
  background:linear-gradient(160deg,#ffffff38,transparent 40%),radial-gradient(ellipse 2.5px 5px at 50% 60%,#102020 0 80%,transparent 100%) 0 0/18px 20px,
             radial-gradient(circle,#102020 0 1px,transparent 1.5px) 9px 10px/18px 20px,#2a92a3}
/* Cobalt tiles with white rosettes, red centers and turquoise between */
[data-style="iznik"].board,[data-style="iznik"] .board,.minib[data-style="iznik"]{
  background:linear-gradient(90deg,#e8e4da 0 1px,transparent 1px) 0 0/44px 44px,linear-gradient(#e8e4da 0 1px,transparent 1px) 0 0/44px 44px,
             radial-gradient(circle,#c4372b 0 2.5px,transparent 3px) 0 0/22px 22px,radial-gradient(circle,#f7f5ef 0 5px,transparent 5.5px) 0 0/22px 22px,
             radial-gradient(circle,#2a9bb0 0 3px,transparent 3.5px) 11px 11px/22px 22px,#1d3c8f}
/* Opalescent glass: sky, autumn trees and river, with copper-foil lines */
[data-style="tiffany"].board,[data-style="tiffany"] .board,.minib[data-style="tiffany"]{
  background:repeating-linear-gradient(72deg,transparent 0 23px,#3a2a1a 23px 25px),repeating-linear-gradient(-18deg,transparent 0 31px,#3a2a1a 31px 33px),
             radial-gradient(circle at 22% 62%,#e3b54a 0 8%,transparent 26%),radial-gradient(circle at 78% 40%,#c4566a 0 6%,transparent 22%),
             linear-gradient(180deg,#9fb8d8 0%,#c9b0d8 28%,#e8a860 52%,#c2582a 72%,#5f7a3a 88%,#3f6fa8 100%)}
[data-style="william"] .grid{background:#16606e;padding:.6cqw;border-radius:1cqw;box-sizing:border-box}
[data-style="iznik"] .grid{background:#1d3c8f;padding:.5cqw;box-sizing:border-box}
[data-style="tiffany"] .grid{background:#3a2a1a;padding:.5cqw;border-radius:.3cqw;box-sizing:border-box}.minib[data-style="william"] .g6{background:#16606e}.minib[data-style="iznik"] .g6{background:#1d3c8f}.minib[data-style="tiffany"] .g6{background:#3a2a1a}.minib[data-style="william"] .g6,.minib[data-style="iznik"] .g6,.minib[data-style="tiffany"] .g6{padding:2.4cqw;border-radius:1.5cqw}
[data-style="william"] .t,[data-style="iznik"] .t,[data-style="tiffany"] .t{font-weight:var(--tile-w,600)}
/* More styles: Hungarian embroidery, Vienna, Warsaw neon, bojagi, Hakka cloth, the Swiss rail clock, Barragán */
[data-style="matyo"]{
  --frame:#141414; --frame-edge:#262626; --frame-r:.5cqw; --frame-pad:3.4cqw;
  --tile:#171515; --tile-hi:#201d1d; --ink:#f6efe4; --seam:#000; --flap-r:.25cqw;
  --c-r:#d7263d; --c-o:#f08a24; --c-y:#f2c230; --c-g:#2e8b57; --c-b:#2f6fd8; --c-v:#e04a8a;
  --f-tile:"Archivo","Arial Narrow",Arial,sans-serif; --tile-w:700; --tile-stretch:88%; --tile-size:2.95cqw;
  --wall:#0e0d0d; --ui:#f6efe4; --muted:#b0a69a; --line:#2a2626; --panel:#181616; --panel-2:#211e1e;
  --accent:#e04a8a; --accent-ink:#ffffff; --ok:#5fc08a; --warn:#ff8a7d;
}
[data-style="werkstatte"]{
  --frame:#f7f6f2; --frame-edge:#ffffff; --frame-r:0px; --frame-pad:3.2cqw;
  --bevel:inset 0 0 0 .3cqw #111,inset 0 0 0 .55cqw #f7f6f2,inset 0 0 0 .7cqw #b8923a;
  --tile:#f7f6f2; --tile-hi:#ffffff; --ink:#111111; --seam:#d4d1c8; --flap-r:0px; --c-w:#111111;
  --c-r:#a8322a; --c-o:#c9782a; --c-y:#c9a13a; --c-g:#3f6b4a; --c-b:#2b4a7a; --c-v:#5a3f6e;
  --f-tile:"Josefin Sans","Futura",Arial,sans-serif; --tile-w:600; --tile-size:2.95cqw;
  --wall:#ecebe6; --ui:#111111; --muted:#5f5d57; --line:#d8d6cf; --panel:#faf9f6; --panel-2:#efeee9;
  --accent:#111111; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="neon"]{
  --frame:#1b1517; --frame-edge:#2a2326; --frame-r:.4cqw; --frame-pad:3.2cqw;
  --bevel:inset 0 0 0 .25cqw #3fd0ff66,inset 0 0 1.4cqw #3fd0ff33;
  --tile:#0d0b10; --tile-hi:#141119; --ink:#ff5fae; --seam:#000; --flap-r:.2cqw; --glow:0 0 .35cqw #ff4fa3,0 0 1.1cqw #ff4fa399; --c-w:#ff5fae;
  --c-r:#ff3b5c; --c-o:#ff9a3c; --c-y:#ffe14a; --c-g:#39ff9c; --c-b:#3fd0ff; --c-v:#b46bff;
  --f-tile:"Cabin",Arial,sans-serif; --tile-w:600; --tile-size:2.9cqw;
  --wall:#0c0a0d; --ui:#f6e9f2; --muted:#b39aaa; --line:#2a2128; --panel:#151116; --panel-2:#1d171e;
  --accent:#ff5fae; --accent-ink:#1a0010; --ok:#39d98a; --warn:#ff8a7d;
}
[data-style="bojagi"]{
  --frame:#efe7d6; --frame-edge:#f7f1e4; --frame-r:.4cqw; --frame-pad:3.4cqw;
  --tile:#f4efe3; --tile-hi:#faf6ee; --ink:#4a2f45; --seam:#d9cfba; --flap-r:.3cqw; --gloss:rgba(255,255,255,.3); --c-w:#4a2f45;
  --c-r:#d97a86; --c-o:#e6a46a; --c-y:#e9cf7a; --c-g:#8fbf9f; --c-b:#86aed6; --c-v:#a993cf;
  --f-tile:"M PLUS Rounded 1c",Arial,sans-serif; --tile-w:700; --tile-size:2.8cqw;
  --wall:#ece5d6; --ui:#3a2536; --muted:#7a6a72; --line:#ddd3c0; --panel:#f8f4ec; --panel-2:#eee7da;
  --accent:#b85a7a; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="hakka"]{
  --frame:#c8102e; --frame-edge:#e0304a; --frame-r:.4cqw; --frame-pad:3.4cqw;
  --tile:#b5162b; --tile-hi:#c42036; --ink:#fff3e0; --seam:#7a0d1c; --flap-r:.25cqw; --c-w:#fff3e0;
  --c-r:#f6a5c0; --c-o:#ffb35c; --c-y:#ffd166; --c-g:#3fa66a; --c-b:#3f8fd0; --c-v:#a46ad6;
  --f-tile:"Cabin",Arial,sans-serif; --tile-w:700; --tile-size:2.9cqw;
  --wall:#2a070d; --ui:#fff1e6; --muted:#d6a8a8; --line:#4a121c; --panel:#330a12; --panel-2:#3f0f18;
  --accent:#ffd166; --accent-ink:#2a1a00; --ok:#7cd09a; --warn:#ffb3a5;
}
[data-style="sbb"]{
  --frame:#f4f4f2; --frame-edge:#ffffff; --frame-r:1.6cqw; --frame-pad:3.6cqw;
  --bevel:inset 0 0 0 .45cqw #111,inset 0 0 0 .7cqw #e6e6e3;
  --tile:#fafafa; --tile-hi:#ffffff; --ink:#111111; --seam:#d0d0cc; --flap-r:.1cqw; --c-w:#111111;
  --c-r:#eb0000; --c-o:#f08a24; --c-y:#f2c230; --c-g:#2e8b57; --c-b:#2d5fa8; --c-v:#6a4a9a;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:600; --tile-size:2.95cqw;
  --wall:#efefec; --ui:#111111; --muted:#5f5f5c; --line:#d9d9d5; --panel:#fafaf8; --panel-2:#efefec;
  --accent:#eb0000; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="barragan"]{
  --frame:#f3ece2; --frame-edge:#f3ece2; --frame-r:0px; --frame-pad:3.6cqw 2.6cqw 3.6cqw 6.6cqw;
  --tile:#d94f86; --tile-hi:#e15f93; --ink:#fff6ee; --seam:#a83a68; --flap-r:0px; --c-w:#fff6ee;
  --c-r:#c75b3d; --c-o:#e88a3a; --c-y:#f0b13b; --c-g:#5f8a5a; --c-b:#4a6ab0; --c-v:#9b87c4;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:600; --tile-size:2.9cqw;
  --wall:#efe6da; --ui:#3a1f2a; --muted:#7a5e66; --line:#e0d4c6; --panel:#f8f3ec; --panel-2:#eee5d9;
  --accent:#d94f86; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
/* Matyó roses: red and pink petals round a yellow heart, blue buds and green leaves, on black cloth */
[data-style="matyo"].board,[data-style="matyo"] .board,.minib[data-style="matyo"]{
  background:radial-gradient(circle,#f2c230 0 2px,#d7263d 2.5px 5px,#f06aa0 5.5px 7.5px,#d7263d 8px 9px,transparent 9.5px) 0 0/34px 30px,
             radial-gradient(circle,#2f6fd8 0 3px,#8ab4ff 3.5px 4px,transparent 4.5px) 17px 15px/34px 30px,
             radial-gradient(ellipse 5px 2.2px,#2e8b57 0 85%,transparent 100%) 8px 22px/34px 30px,radial-gradient(ellipse 5px 2.2px,#2e8b57 0 85%,transparent 100%) 26px 8px/34px 30px,#141414}
/* Hoffmann's checker grid */
[data-style="werkstatte"].board,[data-style="werkstatte"] .board,.minib[data-style="werkstatte"]{
  background:conic-gradient(#111 25%,#f7f6f2 0 50%,#111 0 75%,#f7f6f2 0) 0 0/12px 12px}
/* A night wall of dark brick, lit by the signs */
[data-style="neon"].board,[data-style="neon"] .board,.minib[data-style="neon"]{
  background:radial-gradient(ellipse at 50% 50%,#ff4fa31f,transparent 70%),linear-gradient(#0e0b0c 0 2px,transparent 2px) 0 0/100% 12px,
             linear-gradient(90deg,#0e0b0c 0 2px,transparent 2px) 0 0/26px 24px,linear-gradient(90deg,#0e0b0c 0 2px,transparent 2px) 13px 12px/26px 24px,#1f181a}

/* Bojagi: soft patches of ramie, stitched together */
[data-style="bojagi"].board,[data-style="bojagi"] .board,.minib[data-style="bojagi"]{
  background:linear-gradient(90deg,#7a6a5a33 0 1px,transparent 1px) 0 0/37px 100%,linear-gradient(#7a6a5a33 0 1px,transparent 1px) 0 0/100% 23px,
             conic-gradient(from 90deg,#d98c8c40 0 25%,transparent 0 50%,#8fb8d840 0 75%,transparent 0) 18px 11px/56px 34px,
             conic-gradient(#e9b8c2 0 25%,#b9d3c2 0 50%,#f1d9a6 0 75%,#c9c2e3 0) 0 0/74px 46px}
/* Hakka cloth: big peonies and little yellow blossoms on red */
[data-style="hakka"].board,[data-style="hakka"] .board,.minib[data-style="hakka"]{
  background:radial-gradient(circle,#fff3e0 0 2px,#f6a5c0 2.5px 7px,#e0457b 7.5px 10px,transparent 10.5px) 0 0/44px 40px,
             radial-gradient(circle,#fff3e0 0 2.5px,#ffd166 3px 5px,transparent 5.5px) 22px 20px/44px 40px,
             radial-gradient(ellipse 6px 2.6px,#3fa66a 0 85%,transparent 100%) 12px 30px/44px 40px,radial-gradient(ellipse 6px 2.6px,#2f7fbf 0 85%,transparent 100%) 33px 9px/44px 40px,#c8102e}
/* The clock's minute marks along the top and bottom of the white face */
[data-style="sbb"].board,[data-style="sbb"] .board,.minib[data-style="sbb"]{
  background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 14px) 0 30%/100% 6px no-repeat,repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 14px) 0 70%/100% 6px no-repeat,#f4f4f2}
.board[data-style="sbb"],[data-style="sbb"] .board{background:repeating-linear-gradient(90deg,#111 0 .25cqw,transparent .25cqw 2cqw) 0 1.4cqw/100% .7cqw no-repeat,repeating-linear-gradient(90deg,#111 0 .25cqw,transparent .25cqw 2cqw) 0 calc(100% - 1.4cqw)/100% .7cqw no-repeat,#f4f4f2}
/* The second hand: Hilfiker's red disc on a stem */
.board[data-style="sbb"]::before{content:"";position:absolute;top:.9cqw;right:3.4cqw;width:2.4cqw;height:3.2cqw;background:radial-gradient(circle at 50% 1.2cqw,#eb0000 0 1.15cqw,transparent 1.2cqw),linear-gradient(#eb0000,#eb0000) 50% 100%/.3cqw 60% no-repeat;pointer-events:none;z-index:5}
/* Barragán: flat planes of colored wall, pink, ochre, lilac and terracotta */
[data-style="barragan"].board,[data-style="barragan"] .board{
  background:linear-gradient(#f0b13b,#f0b13b) 0 0/4.6cqw 58% no-repeat,linear-gradient(#9b87c4,#9b87c4) 0 100%/4.6cqw 42% no-repeat,
             linear-gradient(#c75b3d,#c75b3d) 100% 0/38% 1.8cqw no-repeat,linear-gradient(#e88a3a,#e88a3a) 0 100%/60% 1.8cqw no-repeat,#f3ece2}
.minib[data-style="barragan"]{padding-left:20%;background:linear-gradient(#f0b13b,#f0b13b) 0 0/14% 58% no-repeat,linear-gradient(#9b87c4,#9b87c4) 0 100%/14% 42% no-repeat,linear-gradient(#c75b3d,#c75b3d) 100% 0/38% 5px no-repeat,#f3ece2}
[data-style="matyo"] .grid{background:#0a0a0a;padding:.5cqw;border-radius:.3cqw;box-sizing:border-box}
[data-style="werkstatte"] .grid{background:#111;padding:.5cqw;box-sizing:border-box}
[data-style="neon"] .grid{background:#050407;padding:.5cqw;border-radius:.3cqw;box-sizing:border-box}[data-style="bojagi"] .grid{background:#cfc3ac;padding:.5cqw;border-radius:.4cqw;box-sizing:border-box}
[data-style="hakka"] .grid{background:#7a0d1c;padding:.5cqw;border-radius:.3cqw;box-sizing:border-box}
[data-style="sbb"] .grid{background:#d0d0cc;padding:.4cqw;box-sizing:border-box}
[data-style="barragan"] .grid{background:#a83a68;padding:.4cqw;box-sizing:border-box}
.minib[data-style="matyo"] .g6{background:#0a0a0a}.minib[data-style="werkstatte"] .g6{background:#111}.minib[data-style="neon"] .g6{background:#050407}.minib[data-style="bojagi"] .g6{background:#cfc3ac}.minib[data-style="hakka"] .g6{background:#7a0d1c}.minib[data-style="sbb"] .g6{background:#d0d0cc}.minib[data-style="barragan"] .g6{background:#a83a68}
.minib[data-style="matyo"] .g6,.minib[data-style="werkstatte"] .g6,.minib[data-style="neon"] .g6,.minib[data-style="bojagi"] .g6,.minib[data-style="hakka"] .g6,.minib[data-style="sbb"] .g6,.minib[data-style="barragan"] .g6{padding:2.4cqw;border-radius:1.5cqw}
[data-style="matyo"] .t,[data-style="werkstatte"] .t,[data-style="neon"] .t,[data-style="bojagi"] .t,[data-style="hakka"] .t,[data-style="sbb"] .t,[data-style="barragan"] .t{font-weight:var(--tile-w,600)}
[data-style="neon"] .f span,[data-style="neon"] .g span{text-shadow:none}
/* Cities: Los Angeles and Quito */
[data-style="buttoncopy"]{--frame:#1f6f4a; --frame-edge:#2b8a5e; --frame-r:.8cqw; --frame-pad:3cqw; --bevel:inset 0 0 0 .6cqw #1f6f4a,inset 0 0 0 .85cqw #f4f4f0; --tile:#1c6a46; --tile-hi:#22774f; --ink:#f4f4f0; --seam:#0f3d28; --flap-r:.2cqw; --glow:0 0 .18cqw #ffffffaa; --c-r:#c8352b; --c-o:#f08a24; --c-y:#f2c230; --c-g:#7fc49a; --c-b:#2d5fa8; --c-v:#6a4a9a; --f-tile:"Overpass","Arial Narrow",Arial,sans-serif; --tile-w:700; --tile-stretch:90%; --tile-size:3cqw; --wall:#0f2a1d; --ui:#eef6f0; --muted:#9fc0ab; --line:#1d3f2c; --panel:#13321f; --panel-2:#1a3d27; --accent:#f2c230; --accent-ink:#1d1600; --ok:#5fc08a; --warn:#ff8a7d;}
[data-style="googie"]{--frame:#2bb3b1; --frame-edge:#4fcac6; --frame-r:2cqw; --frame-pad:3.2cqw; --tile:#f6efdc; --tile-hi:#fbf6e9; --ink:#1f2a2e; --seam:#d6ccb2; --flap-r:.5cqw; --gloss:rgba(255,255,255,.35); --c-w:#1f2a2e; --c-r:#e2452f; --c-o:#f26b3a; --c-y:#f6c343; --c-g:#3fa66a; --c-b:#2bb3b1; --c-v:#8a5ab0; --f-tile:"Righteous",Arial,sans-serif; --tile-w:400; --tile-size:2.9cqw; --wall:#e9f4f1; --ui:#16302f; --muted:#557a77; --line:#cfe2de; --panel:#f6fbf9; --panel-2:#e6f1ee; --accent:#f26b3a; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;}
[data-style="stahl"]{--frame:#0b1220; --frame-edge:#1c2638; --frame-r:.2cqw; --frame-pad:3.2cqw; --bevel:inset 0 0 0 .2cqw #c9ced6; --tile:#101826; --tile-hi:#162033; --ink:#fff3d6; --seam:#05080e; --flap-r:.1cqw; --glow:0 0 .3cqw #ffd98a55; --c-r:#e0523a; --c-o:#f0a040; --c-y:#ffd98a; --c-g:#5fc08a; --c-b:#5a8fd8; --c-v:#9a7ad0; --f-tile:"Archivo",Arial,sans-serif; --tile-w:500; --tile-stretch:110%; --tile-size:2.8cqw; --wall:#070b14; --ui:#eef1f6; --muted:#9aa6b8; --line:#1a2233; --panel:#0d1422; --panel-2:#131c2d; --accent:#ffd98a; --accent-ink:#1d1600; --ok:#5fc08a; --warn:#ff8a7d;}
[data-style="splash"]{--frame:#f2c9b8; --frame-edge:#f8dccf; --frame-r:0px; --frame-pad:3.2cqw; --tile:#3fa7d6; --tile-hi:#55b4df; --ink:#fdf8ef; --seam:#2b86b0; --flap-r:.1cqw; --gloss:rgba(255,255,255,.25); --c-w:#fdf8ef; --c-r:#e2725b; --c-o:#f0a050; --c-y:#f4d35e; --c-g:#5fa35a; --c-b:#1f5f8f; --c-v:#b08ad0; --f-tile:"Archivo",Arial,sans-serif; --tile-w:600; --tile-size:2.9cqw; --wall:#f6ece4; --ui:#21414f; --muted:#6a7f86; --line:#e6d6cc; --panel:#fbf6f1; --panel-2:#f1e6dd; --accent:#2b86b0; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;}
[data-style="guayasamin"]{--frame:#d9a54a; --frame-edge:#d9a54a; --frame-r:0px; --frame-pad:3.2cqw; --tile:#d9a54a; --tile-hi:#e3b45e; --ink:#141010; --seam:#141010; --flap-r:0px; --c-w:#141010; --c-r:#b8462f; --c-o:#d9772a; --c-y:#f0c45a; --c-g:#5a6b3a; --c-b:#2a3f6a; --c-v:#5a2a3a; --f-tile:"Archivo","Arial Narrow",Arial,sans-serif; --tile-w:800; --tile-stretch:80%; --tile-size:3.1cqw; --wall:#e9dcc4; --ui:#141010; --muted:#5f5446; --line:#d6c7ab; --panel:#f6efe2; --panel-2:#ece2cf; --accent:#b8462f; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;}
[data-style="buttoncopy"].board,[data-style="buttoncopy"] .board,.minib[data-style="buttoncopy"]{background:radial-gradient(circle,#c9ccc8 0 1.6px,#6f7570 1.7px 2.3px,transparent 2.6px) 10px 10px/calc(100% - 20px) calc(100% - 20px),#1f6f4a}
[data-style="googie"].board,[data-style="googie"] .board,.minib[data-style="googie"]{background:radial-gradient(ellipse 9px 3px,#f26b3a 0 85%,transparent 100%) 34px 30px/58px 46px,radial-gradient(circle at 18px 16px,transparent 0 8px,#2bb3b1 8.5px) 0 0/58px 46px,repeating-conic-gradient(from 0deg at 18px 16px,#f6efdc 0 5deg,transparent 5deg 30deg) 0 0/58px 46px,#2bb3b1}
[data-style="stahl"].board,[data-style="stahl"] .board,.minib[data-style="stahl"]{background:radial-gradient(circle,#fff1c4 0 .9px,transparent 1.3px) 3px 5px/11px 9px,radial-gradient(circle,#ffd98a 0 .8px,transparent 1.2px) 7px 2px/17px 13px,radial-gradient(circle,#ffffff 0 .7px,transparent 1.1px) 1px 8px/23px 7px,linear-gradient(#0b1220 0 30%,#1b2440 70%,#3a2f4a)}
[data-style="splash"].board,[data-style="splash"] .board,.minib[data-style="splash"]{background:radial-gradient(ellipse 14px 5px at 82% 80%,#ffffff 0 80%,transparent 100%),radial-gradient(ellipse 4px 9px at 80% 74%,#ffffff 0 80%,transparent 100%),radial-gradient(ellipse 3px 7px at 85% 72%,#ffffffcc 0 80%,transparent 100%),linear-gradient(#f2c9b8 0 40%,#e9d7b0 40% 46%,#3fa7d6 46%)}
[data-style="guayasamin"].board,[data-style="guayasamin"] .board,.minib[data-style="guayasamin"]{background:repeating-linear-gradient(115deg,#d9a54a 0 14px,#141010 14px 17px,#b8462f 17px 30px,#141010 30px 32px,#8a5a2a 32px 40px,#141010 40px 43px)}
[data-style="buttoncopy"] .grid{background:#0f3d28;padding:.5cqw;box-sizing:border-box}
.minib[data-style="buttoncopy"] .g6{background:#0f3d28;padding:2.4cqw;border-radius:1.5cqw}
[data-style="googie"] .grid{background:#14706e;padding:.5cqw;box-sizing:border-box}
.minib[data-style="googie"] .g6{background:#14706e;padding:2.4cqw;border-radius:1.5cqw}
[data-style="stahl"] .grid{background:#05080e;padding:.5cqw;box-sizing:border-box}
.minib[data-style="stahl"] .g6{background:#05080e;padding:2.4cqw;border-radius:1.5cqw}
[data-style="splash"] .grid{background:#2b86b0;padding:.5cqw;box-sizing:border-box}
.minib[data-style="splash"] .g6{background:#2b86b0;padding:2.4cqw;border-radius:1.5cqw}
[data-style="guayasamin"] .grid{background:#141010;padding:.5cqw;box-sizing:border-box}
.minib[data-style="guayasamin"] .g6{background:#141010;padding:2.4cqw;border-radius:1.5cqw}
[data-style="buttoncopy"] .t,[data-style="googie"] .t,[data-style="stahl"] .t,[data-style="splash"] .t,[data-style="guayasamin"] .t{font-weight:var(--tile-w,600)}
/* Quilts: American quilt patterns, the blocks drawn as small SVG tiles */
[data-style="geesbend"]{--frame:#3e5a85; --frame-edge:#3e5a85; --frame-r:0px; --frame-pad:3.4cqw; --tile:#3e5a85; --tile-hi:#4a6893; --ink:#f2ead8; --seam:#24385a; --flap-r:0px; --c-r:#a33b2e; --c-o:#c9783a; --c-y:#d9b45a; --c-g:#5f7a4a; --c-b:#8fa9c9; --c-v:#6a4a7a; --f-tile:"Archivo","Arial Narrow",Arial,sans-serif; --tile-w:700; --tile-stretch:85%; --tile-size:3cqw; --wall:#151d2a; --ui:#eef1f6; --muted:#9fb0c8; --line:#22365a; --panel:#13213a; --panel-2:#1a2a48; --accent:#d9b45a; --accent-ink:#1d1600; --ok:#5fc08a; --warn:#ff8a7d;}
[data-style="starbethlehem"]{--frame:#efe4cb; --frame-edge:#efe4cb; --frame-r:0px; --frame-pad:3.4cqw; --tile:#24477a; --tile-hi:#2c5290; --ink:#f6ead0; --seam:#16305a; --flap-r:.1cqw; --c-w:#f6ead0; --c-r:#b3202f; --c-o:#d9772a; --c-y:#e3b54a; --c-g:#2e6b3e; --c-b:#6a9ad8; --c-v:#6a3a7a; --f-tile:"Josefin Sans","Futura",Arial,sans-serif; --tile-w:600; --tile-size:2.9cqw; --wall:#ece3cf; --ui:#1c2f52; --muted:#5f6478; --line:#dccfb2; --panel:#f8f2e4; --panel-2:#eee6d4; --accent:#24477a; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;}
[data-style="geesbend"].board,[data-style="geesbend"] .board,.minib[data-style="geesbend"]{background:linear-gradient(#f2ead850,#f2ead850) 0 30%/100% 1px no-repeat,linear-gradient(transparent 0 58%,#a33b2ecc 58% 66%,transparent 66%) 0 0/37% 100% no-repeat,linear-gradient(transparent 0 20%,#c9b38acc 20% 34%,transparent 34%) 100% 0/41% 100% no-repeat,linear-gradient(90deg,#5b7aa6 0 9%,#3e5a85 9% 15%,#c9b38a 15% 22%,#a33b2e 22% 26%,#2f4a73 26% 41%,#8fa9c9 41% 47%,#6f6a5f 47% 55%,#3e5a85 55% 66%,#d9c9a3 66% 71%,#5b7aa6 71% 83%,#a33b2e 83% 87%,#2f4a73 87%)}
[data-style="starbethlehem"].board,[data-style="starbethlehem"] .board,.minib[data-style="starbethlehem"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%23efe4cb'/%3E%3Cpolygon points='28.0,2.0 32.2,17.9 46.4,9.6 38.1,23.8 54.0,28.0 38.1,32.2 46.4,46.4 32.2,38.1 28.0,54.0 23.8,38.1 9.6,46.4 17.9,32.2 2.0,28.0 17.9,23.8 9.6,9.6 23.8,17.9' fill='%2324477a'/%3E%3Cpolygon points='28.0,9.0 31.1,20.6 41.4,14.6 35.4,24.9 47.0,28.0 35.4,31.1 41.4,41.4 31.1,35.4 28.0,47.0 24.9,35.4 14.6,41.4 20.6,31.1 9.0,28.0 20.6,24.9 14.6,14.6 24.9,20.6' fill='%23b3202f'/%3E%3Cpolygon points='28.0,16.0 29.9,23.3 36.5,19.5 32.7,26.1 40.0,28.0 32.7,29.9 36.5,36.5 29.9,32.7 28.0,40.0 26.1,32.7 19.5,36.5 23.3,29.9 16.0,28.0 23.3,26.1 19.5,19.5 26.1,23.3' fill='%23e3b54a'/%3E%3Cpolygon points='28.0,22.0 29.0,25.7 32.2,23.8 30.3,27.0 34.0,28.0 30.3,29.0 32.2,32.2 29.0,30.3 28.0,34.0 27.0,30.3 23.8,32.2 25.7,29.0 22.0,28.0 25.7,27.0 23.8,23.8 27.0,25.7' fill='%232e6b3e'/%3E%3C/svg%3E") 0 0/56px 56px}
[data-style="geesbend"] .grid{background:#24385a;padding:.5cqw;box-sizing:border-box}
.minib[data-style="geesbend"] .g6{background:#24385a;padding:2.4cqw;border-radius:1.5cqw}
[data-style="starbethlehem"] .grid{background:#16305a;padding:.5cqw;box-sizing:border-box}
.minib[data-style="starbethlehem"] .g6{background:#16305a;padding:2.4cqw;border-radius:1.5cqw}
[data-style="geesbend"] .t,[data-style="starbethlehem"] .t{font-weight:var(--tile-w,600)}
/* Displays: boards that aren't split-flap. No flaps, no split line; the two halves read as one face, and each style
   brings its own surface, letters and entry animation (the engine sets data-k a/b on a tile each time it changes). */
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) :is(.f,.g){display:none}
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .t::after{display:none}
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .t::before{background:none}
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .h{background:transparent;border-radius:0;box-shadow:none!important}
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .t{box-shadow:none!important;font-weight:var(--tile-w,600)}
/* No flip, so each tile is one whole face: the upper half fills the tile and the lower half is hidden */
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .h.u{height:100%}
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .h.u span{height:100%}
:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .h.d{display:none}
@keyframes dispA{from{opacity:0}to{opacity:1}}
@keyframes dispB{from{opacity:0}to{opacity:1}}
@keyframes slotA{from{opacity:0;transform:translateY(-.9em)}to{opacity:1;transform:none}}
@keyframes slotB{from{opacity:0;transform:translateY(-.9em)}to{opacity:1;transform:none}}
@keyframes popA{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes popB{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes stampA{0%{opacity:0;transform:scale(1.35)}60%{opacity:1;transform:scale(.97)}100%{transform:none}}
@keyframes stampB{0%{opacity:0;transform:scale(1.35)}60%{opacity:1;transform:scale(.97)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){:is([data-style="nixie"],[data-style="marquee"],[data-style="letterboard"],[data-style="letterpress"],[data-style="stitch"],[data-style="flipdot"]) .h span{animation:none!important}}

/* Nixie tubes: orange neon glowing on shaped wires inside glass, with the fine anode mesh in front */
[data-style="nixie"]{
  --frame:#2a211b; --frame-edge:#3a2e25; --frame-r:1.2cqw; --frame-pad:3.2cqw;
  --bevel:inset 0 .25cqw 0 #4a3a2e,inset 0 -.35cqw 0 #120d0a;
  --tile:#0e0b09; --tile-hi:#16110d; --ink:#ffb25c; --seam:transparent;
  --glow:0 0 .2cqw #ff8a2a,0 0 .8cqw #ff6a00cc,0 0 1.6cqw #ff4a0055;
  --c-w:#ffb25c; --c-r:#ff5a3a; --c-o:#ff8a2a; --c-y:#ffd27a; --c-g:#5fd08a; --c-b:#5a9ad8; --c-v:#b07ad8;
  --f-tile:"Jost","Futura",Arial,sans-serif; --tile-w:300; --tile-size:3.5cqw;
  --wall:#120d0a; --ui:#f6e6d2; --muted:#b8a08a; --line:#2e241c; --panel:#1a130e; --panel-2:#221912;
  --accent:#ff8a2a; --accent-ink:#1d0d00; --ok:#5fc08a; --warn:#ff8a7d;
}
[data-style="nixie"].board,[data-style="nixie"] .board,.minib[data-style="nixie"]{background:repeating-linear-gradient(90deg,#2a211b 0 5px,#30261f 5px 7px),#2a211b}
[data-style="nixie"] .grid,.minib[data-style="nixie"] .g6{background:#070504;padding:.6cqw;border-radius:.4cqw;box-sizing:border-box}
[data-style="nixie"] .t{border-radius:46% 46% 10% 10% / 20% 20% 5% 5%;background:radial-gradient(ellipse at 50% 28%,#2a2019,#0e0b09 72%);box-shadow:inset 0 0 0 .12cqw #ffffff1c,inset .25cqw .3cqw .4cqw #ffffff12!important}
[data-style="nixie"] .t::before{background:radial-gradient(circle,#ffffff14 .6px,transparent 1px) 0 0/4px 4px!important;border-radius:inherit;z-index:4}
[data-style="nixie"] .t[data-k="a"] .h span{animation:dispA .28s ease-out}
[data-style="nixie"] .t[data-k="b"] .h span{animation:dispB .28s ease-out}

/* Cinema marquee: black plastic letters slid onto the rails of a lit white panel, framed by bulbs */
[data-style="marquee"]{
  --frame:#1a1612; --frame-edge:#2a241e; --frame-r:.6cqw; --frame-pad:3.6cqw;
  --tile:#fff8e8; --ink:#141414; --seam:transparent; --glow:.08cqw .12cqw 0 #00000033;
  --c-w:#141414; --c-r:#d7261e; --c-o:#ef7d22; --c-y:#f2c230; --c-g:#2e8b57; --c-b:#1d4fa8; --c-v:#6a4a9a;
  --f-tile:"Archivo","Arial Narrow",Arial,sans-serif; --tile-w:800; --tile-stretch:70%; --tile-size:3.5cqw;
  --wall:#120f0c; --ui:#f6efe2; --muted:#b0a490; --line:#2a241e; --panel:#1a1612; --panel-2:#221d18;
  --accent:#f2c230; --accent-ink:#1d1600; --ok:#5fc08a; --warn:#ff8a7d;
}
[data-style="marquee"].board,[data-style="marquee"] .board,.minib[data-style="marquee"]{background:radial-gradient(circle,#fff3c4 0 2.5px,#ffd25a 3px 4px,transparent 5px) 0 0/18px 18px,#1a1612}
[data-style="marquee"] .grid,.minib[data-style="marquee"] .g6{background:linear-gradient(transparent 90%,#b8ae98 90% 95%,transparent 95%) 0 0/100% calc(100% / 6),radial-gradient(ellipse at 50% 40%,#fffdf6,#fff3d8 80%);padding:.4cqw .8cqw;box-sizing:border-box;box-shadow:0 0 2.4cqw #fff3c466}
.minib[data-style="marquee"] .g6{background:linear-gradient(transparent 90%,#b8ae98 90% 95%,transparent 95%) 0 0/100% 50%,#fff8e8}
[data-style="marquee"] .t[data-k="a"] .h span{animation:slotA .26s ease-out}
[data-style="marquee"] .t[data-k="b"] .h span{animation:slotB .26s ease-out}
body.lite [data-style="marquee"] .grid{box-shadow:none}

/* Felt letter board: white push-in letters on black ribbed felt, each set a little crooked, in a slim matte-black frame */
[data-style="letterboard"]{
  --frame:#1c1c1c; --frame-edge:#3a3a3a; --frame-r:.4cqw; --frame-pad:1.6cqw;
  --bevel:inset 0 .12cqw 0 #4a4a4a,inset 0 -.15cqw 0 #0a0a0a;
  --tile:#141414; --ink:#f3f3ee; --seam:transparent; --glow:0 .1cqw .15cqw #000c;
  --c-w:#f3f3ee; --c-r:#e0523a; --c-o:#f08a3a; --c-y:#f2c94c; --c-g:#5fb07a; --c-b:#5a8ad8; --c-v:#a07ad0;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:600; --tile-stretch:92%; --tile-size:3.1cqw;
  --wall:#151311; --ui:#f3efe8; --muted:#aaa296; --line:#2a2622; --panel:#1b1916; --panel-2:#23201c;
  --accent:#e9e6de; --accent-ink:#141414; --ok:#5fc08a; --warn:#ff8a7d;
}
[data-style="letterboard"].board,[data-style="letterboard"] .board,.minib[data-style="letterboard"]{background:linear-gradient(160deg,#2c2c2c,#161616 45%,#232323)}
[data-style="letterboard"] .grid,.minib[data-style="letterboard"] .g6{background:repeating-linear-gradient(0deg,#191919 0 .32cqw,#0c0c0c .32cqw .64cqw);padding:.6cqw;box-sizing:border-box}
.minib[data-style="letterboard"] .g6{background:repeating-linear-gradient(0deg,#191919 0 3px,#0c0c0c 3px 6px)}
[data-style="letterboard"] .t span{rotate:calc(var(--jx,0) * 7deg);translate:0 calc(var(--jy,0) * .35cqw)}
[data-style="letterboard"] .t[data-k="a"] .h span{animation:popA .22s ease-out}
[data-style="letterboard"] .t[data-k="b"] .h span{animation:popB .22s ease-out}

/* Letterpress: wood type stamped into cream paper, set by hand a little unevenly */
[data-style="letterpress"]{
  --frame:#e9e1d1; --frame-edge:#f3ecdf; --frame-r:0px; --frame-pad:3.2cqw;
  --bevel:inset 0 0 0 .25cqw #d6ccb8;
  --tile:#f4eee2; --ink:#1c1b1e; --seam:transparent; --glow:0 .08cqw 0 #ffffffa0; --wear:.45;
  --c-w:#1c1b1e; --c-r:#c8352b; --c-o:#d9772a; --c-y:#d9a83a; --c-g:#3f6b4a; --c-b:#24477a; --c-v:#5a3f6e;
  --f-tile:"Alfa Slab One",Rockwell,Georgia,serif; --tile-w:400; --tile-size:3.2cqw;
  --wall:#ece5d6; --ui:#1c1b1e; --muted:#6a6458; --line:#dcd3c0; --panel:#f8f4ea; --panel-2:#eee7d9;
  --accent:#c8352b; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="letterpress"].board,[data-style="letterpress"] .board,.minib[data-style="letterpress"]{background:#e9e1d1}
[data-style="letterpress"] .grid,.minib[data-style="letterpress"] .g6{background:radial-gradient(#0000000a 1px,transparent 1.5px) 0 0/5px 6px,radial-gradient(#8a7a5a14 1px,transparent 1.5px) 2px 3px/7px 5px,#f4eee2;padding:.6cqw;box-sizing:border-box}
[data-style="letterpress"] .t[data-k="a"] .h span{animation:stampA .2s ease-out}
[data-style="letterpress"] .t[data-k="b"] .h span{animation:stampB .2s ease-out}

/* Cross-stitch: each letter stitched in tiny Xs of red thread on linen, like an alphabet sampler */
[data-style="stitch"]{
  --frame:#efe7d6; --frame-edge:#f6f0e4; --frame-r:.3cqw; --frame-pad:3.2cqw;
  --bevel:inset 0 0 0 .3cqw #b8323a,inset 0 0 0 .6cqw #efe7d6,inset 0 0 0 .75cqw #2f5a7a;
  --tile:#efe7d6; --ink:#8e1626; --seam:transparent;
  --c-w:#8e1626; --c-r:#c8352b; --c-o:#d9772a; --c-y:#d9a83a; --c-g:#3f6b4a; --c-b:#2f5a7a; --c-v:#6a3f6a;
  --f-tile:"VT323",ui-monospace,Menlo,monospace; --tile-w:400; --tile-size:5cqw;
  --wall:#ece4d2; --ui:#3a1a1e; --muted:#6f6058; --line:#ddd2bc; --panel:#f8f3e8; --panel-2:#efe8da;
  --accent:#a3202e; --accent-ink:#ffffff; --ok:#1d6e48; --warn:#a3261e; color-scheme:light;
}
[data-style="stitch"].board,[data-style="stitch"] .board,.minib[data-style="stitch"]{background:repeating-linear-gradient(0deg,#e4dac6 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#e4dac6 0 1px,transparent 1px 3px),#efe7d6}
[data-style="stitch"] .grid,.minib[data-style="stitch"] .g6{background:repeating-linear-gradient(0deg,#e6dcc8 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#e6dcc8 0 1px,transparent 1px 3px),#f2ebdc;padding:.6cqw;box-sizing:border-box}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  [data-style="stitch"] .h span{color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(45deg,transparent 30%,var(--ink) 30% 70%,transparent 70%),linear-gradient(-45deg,transparent 30%,var(--ink) 30% 70%,transparent 70%);
    background-size:calc(var(--tile-size) / 9) calc(var(--tile-size) / 9)}
  .minib[data-style="stitch"] .h span{background-size:calc(var(--tile-size) * 3.3 / 9) calc(var(--tile-size) * 3.3 / 9)}
}
[data-style="stitch"] .t[data-k="a"] .h span{animation:dispA .3s ease-out}
[data-style="stitch"] .t[data-k="b"] .h span{animation:dispB .3s ease-out}

/* Flip-dot: a black panel of round discs; the ones that make each letter are flipped to yellow, and they flip over as the letter arrives */
[data-style="flipdot"]{
  --frame:#1b1d1f; --frame-edge:#2c2f32; --frame-r:.5cqw; --frame-pad:2.6cqw;
  --bevel:inset 0 .2cqw 0 #3a3d40,inset 0 -.3cqw 0 #0c0d0e;
  --tile:#0b0c0d; --ink:#ffe03a; --seam:transparent; --dot:calc(var(--tile-size) / 8);
  --c-w:#f5cf1c; --c-r:#e8452c; --c-o:#f08a24; --c-y:#f5cf1c; --c-g:#3fb36a; --c-b:#3a8ad8; --c-v:#9a6ad0;
  --f-tile:"Archivo",Arial,sans-serif; --tile-w:800; --tile-size:3.7cqw;
  --wall:#0d0e0f; --ui:#f3efe0; --muted:#a8a690; --line:#262829; --panel:#151617; --panel-2:#1c1e1f;
  --accent:#f5cf1c; --accent-ink:#1d1700; --ok:#5fc08a; --warn:#ff8a7d;
}
[data-style="flipdot"].board,[data-style="flipdot"] .board,.minib[data-style="flipdot"]{background:linear-gradient(160deg,#25282a,#141516)}
[data-style="flipdot"] .grid,.minib[data-style="flipdot"] .g6{background:#070708;padding:.5cqw;box-sizing:border-box}
[data-style="flipdot"] .t{background:radial-gradient(circle,#26282a 0 34%,transparent 40%) 0 0/var(--dot) var(--dot),#0b0c0d}
.minib[data-style="flipdot"] .t{background:radial-gradient(circle,#2a2c2e 0 34%,transparent 38%) 0 0/calc(var(--dot) * 3.3) calc(var(--dot) * 3.3),#0b0c0d}
[data-style="flipdot"] .h.u::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle,transparent 0 46%,#0b0c0d 52%) 0 0/var(--dot) var(--dot)}
.minib[data-style="flipdot"] .h.u::after{background-size:calc(var(--dot) * 3.3) calc(var(--dot) * 3.3)}
@keyframes dotA{from{transform:scaleY(.05)}to{transform:none}}
@keyframes dotB{from{transform:scaleY(.05)}to{transform:none}}
[data-style="flipdot"] .t[data-k="a"] .h span{animation:dotA .18s ease-out}
[data-style="flipdot"] .t[data-k="b"] .h span{animation:dotB .18s ease-out}