/* Desks (backgrounds) and calculators you can buy with coins. Each one is a set of color tokens. They apply to the page through , and to shop previews through .pv[data-bg] / .pv[data-calc]. Desks with a dark-mode version repeat the selector inside the two dark blocks. */ :root { /* paper grain, dark specks for light desks and light specks for dark ones */ --grain-dark: url("data:image/svg+xml,"); --grain-light: url("data:image/svg+xml,"); --cork: url("data:image/svg+xml,"); --wood: url("data:image/svg+xml,"); --chalk-dust: url("data:image/svg+xml,"); --chalk-sums: url("data:image/svg+xml,7 &%23215; 8 = 5625 + 75 = 100&%23960; &%238776; 3.14100 &%23247; 41, 1, 2, 3, 5, 8 ..."); --chips: url("data:image/svg+xml,"); } /* ================= DESKS ================= */ /* Graph paper (free, the default) */ :root[data-bg="graph"], .pv[data-bg="graph"] { --bg: #eceee7; --panel: #fafaf6; --card: #f6f7f2; --line: #cdd1c6; --ink: #1b1d19; --muted: #575d52; --g1: rgba(52, 112, 140, 0.09); --g2: rgba(52, 112, 140, 0.2); --tex: linear-gradient(var(--g2) 1px, transparent 1px), linear-gradient(90deg, var(--g2) 1px, transparent 1px), linear-gradient(var(--g1) 1px, transparent 1px), linear-gradient(90deg, var(--g1) 1px, transparent 1px); --tex-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px; } /* Plain (free, the original flat look) */ :root[data-bg="plain"], .pv[data-bg="plain"] { --bg: #e5e6df; --panel: #f4f4ef; --card: #f0f0ea; --line: #c8cac0; --ink: #1b1d19; --muted: #5f6358; --tex: none; --tex-size: auto; } /* Cork board */ :root[data-bg="cork"], .pv[data-bg="cork"] { --bg: #c9a575; --panel: #fbf7f0; --card: #fdf9f2; --line: rgba(70, 45, 20, 0.22); --ink: #24180c; --muted: #4a361f; --grain: var(--grain-dark); --tint: linear-gradient(transparent, transparent); --tex: var(--tint), var(--cork), var(--grain); --tex-size: auto, 220px 220px, 160px 160px; } /* Blueprint: pale "whiteprint" in light mode, classic blue in dark mode */ :root[data-bg="blueprint"], .pv[data-bg="blueprint"] { --bg: #e2ebf5; --panel: #f8fbfe; --card: #f4f8fd; --line: #bccbe0; --ink: #0f2545; --muted: #3f5a80; --g1: rgba(30, 90, 170, 0.09); --g2: rgba(30, 90, 170, 0.2); --tex: linear-gradient(var(--g2) 1px, transparent 1px), linear-gradient(90deg, var(--g2) 1px, transparent 1px), linear-gradient(var(--g1) 1px, transparent 1px), linear-gradient(90deg, var(--g1) 1px, transparent 1px); --tex-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; } /* Terrazzo */ :root[data-bg="terrazzo"], .pv[data-bg="terrazzo"] { --bg: #ece7de; --panel: #fdfbf7; --card: #fbf8f2; --line: #d5cec1; --ink: #1f1d1a; --muted: #57524a; --grain: var(--grain-dark); --tint: linear-gradient(transparent, transparent); --tex: var(--tint), var(--chips), var(--grain); --tex-size: auto, 260px 260px, 160px 160px; } /* Desks that are dark in both themes */ :root[data-bg="mat"], .pv[data-bg="mat"], :root[data-bg="chalk"], .pv[data-bg="chalk"], :root[data-bg="walnut"], .pv[data-bg="walnut"] { --star: #f5bd1f; --ring: #f5d35f; --error: #ff9c8f; --good: #4cb874; --shadow: rgba(0, 0, 0, 0.32); --backdrop: rgba(0, 0, 0, 0.62); color-scheme: dark; } /* Cutting mat */ :root[data-bg="mat"], .pv[data-bg="mat"] { --bg: #2e5b49; --panel: #1c2e26; --card: #264d3d; --line: rgba(235, 245, 238, 0.18); --ink: #eef5f0; --muted: #b3c9bc; --g1: rgba(255, 255, 255, 0.09); --g2: rgba(250, 236, 170, 0.26); --tex: var(--grain-light), linear-gradient(45deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.1) 50%, transparent calc(50% + 1px)), linear-gradient(var(--g2) 1px, transparent 1px), linear-gradient(90deg, var(--g2) 1px, transparent 1px), linear-gradient(var(--g1) 1px, transparent 1px), linear-gradient(90deg, var(--g1) 1px, transparent 1px); --tex-size: 160px 160px, 480px 480px, 60px 60px, 60px 60px, 12px 12px, 12px 12px; } /* Chalkboard */ :root[data-bg="chalk"], .pv[data-bg="chalk"] { --bg: #2b3a33; --panel: #1d2722; --card: #33443b; --line: rgba(255, 255, 255, 0.16); --ink: #eef2ec; --muted: #b2c0b6; --tex: var(--chalk-sums), var(--chalk-dust), var(--grain-light); --tex-size: 560px 440px, 400px 400px, 160px 160px; } /* Walnut desk */ :root[data-bg="walnut"], .pv[data-bg="walnut"] { --bg: #4b2f1b; --panel: #2a1b10; --card: #3b2515; --line: rgba(255, 230, 200, 0.16); --ink: #f7eee3; --muted: #d6c2a9; --tex: var(--wood); --tex-size: 600px 480px; } /* Dark-mode versions of the desks that have one */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-bg="graph"], :root:not([data-theme="light"]) .pv[data-bg="graph"] { --bg: #151714; --panel: #1f221d; --card: #1c1f1a; --line: #353a31; --ink: #ebece4; --muted: #9ca196; --g1: rgba(150, 200, 215, 0.05); --g2: rgba(150, 200, 215, 0.11); --grain: var(--grain-light); } :root:not([data-theme="light"])[data-bg="plain"], :root:not([data-theme="light"]) .pv[data-bg="plain"] { --bg: #151613; --panel: #1f211c; --card: #1c1e19; --line: #34372f; --ink: #ebece4; --muted: #9b9f92; --grain: var(--grain-light); } :root:not([data-theme="light"])[data-bg="cork"], :root:not([data-theme="light"]) .pv[data-bg="cork"] { --bg: #5b4431; --panel: #2a2119; --card: #3a2d21; --line: rgba(255, 235, 210, 0.16); --ink: #f4ebde; --muted: #cfbb9f; --grain: var(--grain-light); --tint: linear-gradient(rgba(60, 44, 30, 0.42), rgba(60, 44, 30, 0.42)); } :root:not([data-theme="light"])[data-bg="blueprint"], :root:not([data-theme="light"]) .pv[data-bg="blueprint"] { --bg: #1c4c86; --panel: #14375f; --card: #19416f; --line: rgba(255, 255, 255, 0.2); --ink: #f1f6fd; --muted: #bcd1ec; --g1: rgba(255, 255, 255, 0.09); --g2: rgba(255, 255, 255, 0.22); --grain: var(--grain-light); } :root:not([data-theme="light"])[data-bg="terrazzo"], :root:not([data-theme="light"]) .pv[data-bg="terrazzo"] { --bg: #262420; --panel: #1c1b18; --card: #2f2c27; --line: #403c35; --ink: #efebe4; --muted: #aba497; --grain: var(--grain-light); --tint: linear-gradient(rgba(30, 28, 25, 0.25), rgba(30, 28, 25, 0.25)); } } :root[data-theme="dark"][data-bg="graph"], :root[data-theme="dark"] .pv[data-bg="graph"] { --bg: #151714; --panel: #1f221d; --card: #1c1f1a; --line: #353a31; --ink: #ebece4; --muted: #9ca196; --g1: rgba(150, 200, 215, 0.05); --g2: rgba(150, 200, 215, 0.11); --grain: var(--grain-light); } :root[data-theme="dark"][data-bg="plain"], :root[data-theme="dark"] .pv[data-bg="plain"] { --bg: #151613; --panel: #1f211c; --card: #1c1e19; --line: #34372f; --ink: #ebece4; --muted: #9b9f92; --grain: var(--grain-light); } :root[data-theme="dark"][data-bg="cork"], :root[data-theme="dark"] .pv[data-bg="cork"] { --bg: #5b4431; --panel: #2a2119; --card: #3a2d21; --line: rgba(255, 235, 210, 0.16); --ink: #f4ebde; --muted: #cfbb9f; --grain: var(--grain-light); --tint: linear-gradient(rgba(60, 44, 30, 0.42), rgba(60, 44, 30, 0.42)); } :root[data-theme="dark"][data-bg="blueprint"], :root[data-theme="dark"] .pv[data-bg="blueprint"] { --bg: #1c4c86; --panel: #14375f; --card: #19416f; --line: rgba(255, 255, 255, 0.2); --ink: #f1f6fd; --muted: #bcd1ec; --g1: rgba(255, 255, 255, 0.09); --g2: rgba(255, 255, 255, 0.22); --grain: var(--grain-light); } :root[data-theme="dark"][data-bg="terrazzo"], :root[data-theme="dark"] .pv[data-bg="terrazzo"] { --bg: #262420; --panel: #1c1b18; --card: #2f2c27; --line: #403c35; --ink: #efebe4; --muted: #aba497; --grain: var(--grain-light); --tint: linear-gradient(rgba(30, 28, 25, 0.25), rgba(30, 28, 25, 0.25)); } /* ================= CALCULATORS ================= A calculator is a physical object, so it looks the same in light and dark mode. */ /* Classic (free). The page itself uses the theme-aware values in style.css; this is for the shop preview. */ .pv[data-calc="classic"] { --body: #2c2e29; --body-2: #3a3d36; --body-ink: #eceee6; --body-muted: #a3a798; --body-accent: #f3b80c; --key: #fbfbf6; --key-ink: #1b1d19; --key-edge: #b3b5aa; --op: #3b3e36; --op-ink: #f2f3ec; --op-edge: #1c1e1a; --yellow: #f3b80c; --yellow-edge: #b48600; --yellow-ink: #1b1d19; --lcd: #b3bf9b; --lcd-ink: #1e2617; --lcd-ghost: rgba(30, 38, 23, 0.09); } /* Office beige */ :root[data-calc="beige"], .pv[data-calc="beige"] { --body: #d8ceb6; --body-2: #c6bba1; --body-ink: #2d281f; --body-muted: #625844; --body-accent: #a3431a; --key: #f6f1e4; --key-ink: #2d281f; --key-edge: #b9ad92; --op: #7b5b3d; --op-ink: #fbf5ea; --op-edge: #4f3923; --yellow: #e9752f; --yellow-edge: #a84c17; --yellow-ink: #1f150d; --lcd: #c5c8ae; --lcd-ink: #2a2c20; --lcd-ghost: rgba(42, 44, 32, 0.08); } /* Mint */ :root[data-calc="mint"], .pv[data-calc="mint"] { --body: #a3d7c3; --body-2: #8fc7b2; --body-ink: #11342a; --body-muted: #335f50; --body-accent: #9c3125; --key: #ffffff; --key-ink: #11342a; --key-edge: #8dbcab; --op: #2e6e59; --op-ink: #f0fff8; --op-edge: #1c4a3b; --yellow: #ff7d6b; --yellow-edge: #c4513f; --yellow-ink: #2a0f0b; --lcd: #d6e9db; --lcd-ink: #163128; --lcd-ghost: rgba(22, 49, 40, 0.08); } /* Scientific */ :root[data-calc="navy"], .pv[data-calc="navy"] { --body: #1f2e4d; --body-2: #2b3d62; --body-ink: #e9eef8; --body-muted: #9fb0cf; --body-accent: #7fd0ff; --key: #e6ebf3; --key-ink: #18233d; --key-edge: #97a3bb; --op: #3d5d9c; --op-ink: #ffffff; --op-edge: #24386a; --yellow: #5cc4f5; --yellow-edge: #2c88b6; --yellow-ink: #0a1c2e; --lcd: #c3cbbd; --lcd-ink: #1c2420; --lcd-ghost: rgba(28, 36, 32, 0.09); } /* Bubblegum */ :root[data-calc="bubblegum"], .pv[data-calc="bubblegum"] { --body: #f08cb1; --body-2: #e2759e; --body-ink: #3b0f22; --body-muted: #6e2546; --body-accent: #5e0f30; --key: #fff4f8; --key-ink: #3b0f22; --key-edge: #d98aa8; --op: #7a2c8e; --op-ink: #ffffff; --op-edge: #4f1b5f; --yellow: #ffd23f; --yellow-edge: #c49d00; --yellow-ink: #3b0f22; --lcd: #f6d3e0; --lcd-ink: #4a1a2e; --lcd-ghost: rgba(74, 26, 46, 0.08); } /* Night glow: black body and a glowing display */ :root[data-calc="glow"], .pv[data-calc="glow"] { --body: #131518; --body-2: #1f2227; --body-ink: #e6e8eb; --body-muted: #8b929c; --body-accent: #5cf5c8; --key: #2b2f36; --key-ink: #eef1f5; --key-edge: #0a0b0d; --op: #3d434d; --op-ink: #ffffff; --op-edge: #0a0b0d; --yellow: #2fe0ae; --yellow-edge: #11906c; --yellow-ink: #04201a; --lcd: #08120f; --lcd-ink: #5cf5c8; --lcd-ghost: rgba(92, 245, 200, 0.06); } :root[data-calc="glow"] .segs svg, .pv[data-calc="glow"] .segs svg { filter: drop-shadow(0 0 3px rgba(92, 245, 200, 0.55)); } /* Gold edition */ :root[data-calc="gold"], .pv[data-calc="gold"] { --body: linear-gradient(135deg, #ecd07c 0%, #c49a3e 38%, #f3dc96 62%, #b8892f 100%); --body-2: rgba(70, 45, 0, 0.16); --body-ink: #2a1d04; --body-muted: #533e10; --body-accent: #6a1420; --key: #fbf7ea; --key-ink: #2a1d04; --key-edge: #c4b07c; --op: #1d1b17; --op-ink: #f3d98b; --op-edge: #000000; --yellow: #8e1f2d; --yellow-edge: #5a0f19; --yellow-ink: #f8dc92; --lcd: #dcd6bf; --lcd-ink: #2a2410; --lcd-ghost: rgba(42, 36, 16, 0.08); } /* ================= MORE DESKS (rare, epic, legendary, trophy) ================= */ :root { --veins-dark: url("data:image/svg+xml,"); --veins-light: url("data:image/svg+xml,"); --stars: url("data:image/svg+xml,"); --traces: url("data:image/svg+xml,"); } /* Marble: white with grey veins, or black with gold veins in dark mode */ :root[data-bg="marble"], .pv[data-bg="marble"] { --bg: #efede9; --panel: #fdfcfa; --card: #fbfaf7; --line: #d8d4cc; --ink: #1d1c1a; --muted: #57534c; --veins: var(--veins-dark); --tex: var(--veins), var(--grain-dark); --tex-size: 500px 500px, 160px 160px; } /* Card table felt */ :root[data-bg="felt"], .pv[data-bg="felt"] { --bg: #1e5a3c; --panel: #173626; --card: #1b4a32; --line: rgba(230, 245, 235, 0.18); --ink: #eef6f0; --muted: #b5cdbf; --tex: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.35)), var(--grain-light), var(--grain-dark); --tex-size: 100% 100%, 160px 160px, 130px 130px; } /* Night sky */ :root[data-bg="night"], .pv[data-bg="night"] { --bg: #0b1026; --panel: #10173a; --card: #121a40; --line: rgba(200, 210, 255, 0.16); --ink: #eef0ff; --muted: #aab2d8; --tex: linear-gradient(160deg, rgba(110, 80, 200, 0.28), transparent 55%), var(--stars); --tex-size: 100% 100%, 420px 420px; } /* Circuit board */ :root[data-bg="circuit"], .pv[data-bg="circuit"] { --bg: #0e3a2b; --panel: #0b2a20; --card: #0d3326; --line: rgba(201, 162, 74, 0.28); --ink: #eaf5ee; --muted: #a9c9b8; --tex: var(--traces), var(--grain-dark); --tex-size: 200px 200px, 160px 160px; } /* Aurora (legendary) */ :root[data-bg="aurora"], .pv[data-bg="aurora"] { --bg: #060a14; --panel: #0d1424; --card: #0f1729; --line: rgba(160, 255, 220, 0.16); --ink: #effaf6; --muted: #a7c4bd; --tex: radial-gradient(60% 40% at 20% 12%, rgba(46, 224, 160, 0.38), transparent 70%), radial-gradient(50% 35% at 82% 22%, rgba(140, 80, 255, 0.36), transparent 70%), radial-gradient(70% 45% at 50% 100%, rgba(30, 120, 255, 0.28), transparent 70%), var(--stars); --tex-size: 100% 100%, 100% 100%, 100% 100%, 420px 420px; } /* Hall of fame (trophy): gold leaf */ :root[data-bg="fame"], .pv[data-bg="fame"] { --bg: #e8cd86; --panel: #fbf5e4; --card: #fbf3dc; --line: rgba(110, 80, 10, 0.25); --ink: #2a1d04; --muted: #5c4512; --tex: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 26px), var(--grain-dark); --tex-size: auto, 160px 160px; } :root[data-bg="felt"], .pv[data-bg="felt"], :root[data-bg="night"], .pv[data-bg="night"], :root[data-bg="circuit"], .pv[data-bg="circuit"], :root[data-bg="aurora"], .pv[data-bg="aurora"] { --star: #f5bd1f; --ring: #f5d35f; --error: #ff9c8f; --good: #4cb874; --shadow: rgba(0, 0, 0, 0.35); --backdrop: rgba(0, 0, 0, 0.65); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-bg="marble"], :root:not([data-theme="light"]) .pv[data-bg="marble"] { --bg: #1b1a1c; --panel: #232225; --card: #222124; --line: #3a383c; --ink: #f1eee8; --muted: #b0aaa0; --veins: var(--veins-light); --grain-dark: none; } :root:not([data-theme="light"])[data-bg="fame"], :root:not([data-theme="light"]) .pv[data-bg="fame"] { --bg: #2a2110; --panel: #1f190c; --card: #2f2512; --line: rgba(232, 205, 134, 0.22); --ink: #f6e7bd; --muted: #cdb67a; } } :root[data-theme="dark"][data-bg="marble"], :root[data-theme="dark"] .pv[data-bg="marble"] { --bg: #1b1a1c; --panel: #232225; --card: #222124; --line: #3a383c; --ink: #f1eee8; --muted: #b0aaa0; --veins: var(--veins-light); --grain-dark: none; } :root[data-theme="dark"][data-bg="fame"], :root[data-theme="dark"] .pv[data-bg="fame"] { --bg: #2a2110; --panel: #1f190c; --card: #2f2512; --line: rgba(232, 205, 134, 0.22); --ink: #f6e7bd; --muted: #cdb67a; } /* ================= MORE CALCULATORS ================= */ /* Woodgrain */ :root[data-calc="wood"], .pv[data-calc="wood"] { --body: repeating-linear-gradient(90deg, #7a4a26 0 3px, #8a5630 3px 9px, #74441f 9px 11px, #835130 11px 19px); --body-2: rgba(0, 0, 0, 0.2); --body-ink: #fbefdf; --body-muted: #e3cba9; --body-accent: #f2c14e; --key: #f7ecd9; --key-ink: #3b2412; --key-edge: #b89a74; --op: #3b2412; --op-ink: #f7ecd9; --op-edge: #1d1108; --yellow: #e8a23a; --yellow-edge: #a86b16; --yellow-ink: #2a1606; --lcd: #c9c6a5; --lcd-ink: #2d2a1b; --lcd-ghost: rgba(45, 42, 27, 0.08); } /* See-through purple (90s clear plastic: you can see the desk through it) */ :root[data-calc="clear"], .pv[data-calc="clear"] { --body: rgba(124, 77, 214, 0.55); --body-2: rgba(255, 255, 255, 0.16); --body-ink: #ffffff; --body-muted: #ece4ff; --body-accent: #ffe066; --key: rgba(255, 255, 255, 0.78); --key-ink: #2b1550; --key-edge: rgba(60, 20, 120, 0.5); --op: rgba(60, 20, 120, 0.78); --op-ink: #ffffff; --op-edge: rgba(30, 10, 70, 0.85); --yellow: #ffe066; --yellow-edge: #b89400; --yellow-ink: #2b1550; --lcd: #cfe3cf; --lcd-ink: #1f2b1f; --lcd-ghost: rgba(31, 43, 31, 0.08); } :root[data-calc="clear"] .daily, :root[data-calc="clear"] .machine { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Amber terminal */ :root[data-calc="amber"], .pv[data-calc="amber"] { --body: #1c1612; --body-2: #2a221c; --body-ink: #f3e6d6; --body-muted: #a8957f; --body-accent: #ffb000; --key: #2e2620; --key-ink: #ffd8a0; --key-edge: #0d0a08; --op: #44382e; --op-ink: #ffe2b8; --op-edge: #0d0a08; --yellow: #ffb000; --yellow-edge: #a86f00; --yellow-ink: #1c1206; --lcd: #120c06; --lcd-ink: #ffb000; --lcd-ghost: rgba(255, 176, 0, 0.07); } :root[data-calc="amber"] .segs svg, .pv[data-calc="amber"] .segs svg { filter: drop-shadow(0 0 3px rgba(255, 176, 0, 0.55)); } /* Carbon fiber */ :root[data-calc="carbon"], .pv[data-calc="carbon"] { --body: repeating-conic-gradient(#191919 0 25%, #262626 0 50%) 0 0 / 8px 8px; --body-2: #2c2c2c; --body-ink: #f1f1f1; --body-muted: #9a9a9a; --body-accent: #ff4d5a; --key: #303030; --key-ink: #f5f5f5; --key-edge: #0a0a0a; --op: #4a4a4a; --op-ink: #ffffff; --op-edge: #111111; --yellow: #e63946; --yellow-edge: #8f1d26; --yellow-ink: #ffffff; --lcd: #b8c4b0; --lcd-ink: #141a12; --lcd-ghost: rgba(20, 26, 18, 0.09); } /* Holographic (legendary): the body slowly shifts color */ :root[data-calc="holo"], .pv[data-calc="holo"] { --body: linear-gradient(120deg, #ffd6f5, #c9f0ff, #d9ffd6, #fff3c4, #e5d4ff, #ffd6f5); --body-2: rgba(255, 255, 255, 0.45); --body-ink: #2b2440; --body-muted: #5c5478; --body-accent: #6d28d9; --key: #ffffff; --key-ink: #2b2440; --key-edge: #c8bfe8; --op: #6d5bd0; --op-ink: #ffffff; --op-edge: #4434a0; --yellow: #2b2440; --yellow-edge: #120e20; --yellow-ink: #ffffff; --lcd: #e8e4f4; --lcd-ink: #2b2440; --lcd-ghost: rgba(43, 36, 64, 0.08); } :root[data-calc="holo"] .daily, :root[data-calc="holo"] .machine, .pv[data-calc="holo"] .mini { background-size: 300% 300%; animation: holo 9s ease-in-out infinite; } @keyframes holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Champion (trophy): black and gold with glowing gold digits */ :root[data-calc="champion"], .pv[data-calc="champion"] { --body: #0d0d0d; --body-2: #1c1c1c; --body-ink: #f3d98b; --body-muted: #b59c58; --body-accent: #f3c94b; --key: #1a1a1a; --key-ink: #f3d98b; --key-edge: #000000; --op: #2a2a2a; --op-ink: #f3d98b; --op-edge: #000000; --yellow: #e8c35a; --yellow-edge: #9c7a1c; --yellow-ink: #1a1406; --lcd: #14100a; --lcd-ink: #f3c94b; --lcd-ghost: rgba(243, 201, 75, 0.07); } :root[data-calc="champion"] .segs svg, .pv[data-calc="champion"] .segs svg { filter: drop-shadow(0 0 3px rgba(243, 201, 75, 0.55)); } /* ================= TAPE (the paper roll) ================= Paper is physical too, so a tape looks the same in light and dark mode. */ /* Most tapes are plain paper; this resets any texture a preview would inherit from the page's tape */ [data-tape] { --paper-tex: none; --paper-tex-size: auto; } .pv[data-tape="classic"] { --paper: #fcfbf4; --paper-ink: #2a2a25; --paper-muted: #8b897c; --paper-red: #bf3326; --paper-rule: #e2dfd0; --paper-tex: none; --paper-tex-size: auto; } :root[data-tape="legal"], .pv[data-tape="legal"] { --paper: #fff4a8; --paper-ink: #1d2433; --paper-muted: #7c7a5a; --paper-red: #c0392b; --paper-rule: #9ec5e8; } :root[data-tape="thermal"], .pv[data-tape="thermal"] { --paper: #f6f8fb; --paper-ink: #55607a; --paper-muted: #a0aab8; --paper-red: #6b46c1; --paper-rule: #e2e8f0; } :root[data-tape="pink"], .pv[data-tape="pink"] { --paper: #ffd6e2; --paper-ink: #3d1a2a; --paper-muted: #a0687e; --paper-red: #b0124a; --paper-rule: #f0aec2; } :root[data-tape="grid"], .pv[data-tape="grid"] { --paper: #fbfcff; --paper-ink: #1e2a3a; --paper-muted: #8796ab; --paper-red: #d64545; --paper-rule: #cfd9e8; --paper-tex: linear-gradient(rgba(80, 130, 200, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 130, 200, 0.12) 1px, transparent 1px); --paper-tex-size: 8px 8px, 8px 8px; } :root[data-tape="kraft"], .pv[data-tape="kraft"] { --paper: #caa673; --paper-ink: #2a1a0a; --paper-muted: #6f5536; --paper-red: #8b1e10; --paper-rule: #a8854f; --paper-tex: var(--grain-dark); --paper-tex-size: 160px 160px; } :root[data-tape="midnight"], .pv[data-tape="midnight"] { --paper: #15171c; --paper-ink: #e8ecf4; --paper-muted: #7c8494; --paper-red: #ff6b6b; --paper-rule: #2c313b; } :root[data-tape="goldfoil"], .pv[data-tape="goldfoil"] { --paper: #e6c870; --paper-ink: #3a2a06; --paper-muted: #7a6226; --paper-red: #7a1020; --paper-rule: #c9a94e; --paper-tex: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.5) 42%, transparent 58%); --paper-tex-size: auto; } :root[data-tape="ticker"], .pv[data-tape="ticker"] { --paper: #f2efe6; --paper-ink: #111111; --paper-muted: #7b776c; --paper-red: #0a8a3a; --paper-rule: #d6d1c3; --paper-tex: radial-gradient(circle at 5px 50%, rgba(0, 0, 0, 0.16) 1.5px, transparent 2px); --paper-tex-size: 100% 12px; } :root[data-tape="newsprint"], .pv[data-tape="newsprint"] { --paper: #e9e6dc; --paper-ink: #1a1a1a; --paper-muted: #6c6a63; --paper-red: #1a1a1a; --paper-rule: #cfcbbf; --paper-tex: var(--grain-dark); --paper-tex-size: 160px 160px; } :root[data-tape="parchment"], .pv[data-tape="parchment"] { --paper: #ecd9b0; --paper-ink: #3b2a14; --paper-muted: #8a7048; --paper-red: #8b2a12; --paper-rule: #d4bb88; --paper-tex: radial-gradient(ellipse at 20% 30%, rgba(150, 100, 40, 0.18), transparent 50%), radial-gradient(ellipse at 80% 75%, rgba(150, 100, 40, 0.14), transparent 45%), var(--grain-dark); --paper-tex-size: 100% 100%, 100% 100%, 160px 160px; } :root[data-tape="neonr"], .pv[data-tape="neonr"] { --paper: #0b0614; --paper-ink: #4fe3ff; --paper-muted: #6a5a8a; --paper-red: #ff4fd8; --paper-rule: #2a1840; } :root[data-tape="neonr"] .tape, .pv[data-tape="neonr"] .mini-tape { text-shadow: 0 0 6px currentColor; } /* ================= EVEN MORE DESKS ================= */ :root { --topo-dark: url("data:image/svg+xml,"); --topo-light: url("data:image/svg+xml,"); --blotches: url("data:image/svg+xml,"); } /* Notebook: lined paper with a red margin */ :root[data-bg="notebook"], .pv[data-bg="notebook"] { --bg: #fbfbf6; --panel: #ffffff; --card: #ffffff; --line: #d6dbe4; --ink: #1c2230; --muted: #4f5a6e; --nb-line: rgba(80, 130, 200, 0.28); --nb-margin: rgba(220, 70, 70, 0.45); --tex: linear-gradient(90deg, transparent 0 46px, var(--nb-margin) 46px 48px, transparent 48px), linear-gradient(transparent 0 27px, var(--nb-line) 27px 28px); --tex-size: 100% 100%, 100% 28px; } /* Concrete */ :root[data-bg="concrete"], .pv[data-bg="concrete"] { --bg: #cfceca; --panel: #f6f6f4; --card: #f1f1ee; --line: #b4b3ae; --ink: #1d1d1c; --muted: #4a4946; --grain: var(--grain-dark); --tex: var(--blotches), var(--grain); --tex-size: 400px 400px, 160px 160px; } /* Topographic map */ :root[data-bg="topo"], .pv[data-bg="topo"] { --bg: #efe6d2; --panel: #fcf8ef; --card: #faf5ea; --line: #d9ccb0; --ink: #2a2214; --muted: #5d5038; --contours: var(--topo-dark); --tex: var(--contours); --tex-size: 600px 600px; } /* Denim */ :root[data-bg="denim"], .pv[data-bg="denim"] { --bg: #2b4a6f; --panel: #1d3452; --card: #23405f; --line: rgba(220, 235, 255, 0.18); --ink: #f0f5fc; --muted: #b8c9df; --tex: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 5px), var(--grain-light); --tex-size: auto, auto, 160px 160px; } /* Sunset */ :root[data-bg="sunset"], .pv[data-bg="sunset"] { --bg: #3a1f55; --panel: #2a1640; --card: #3a2050; --line: rgba(255, 210, 230, 0.18); --ink: #fff3f6; --muted: #f0c4d4; --tex: linear-gradient(180deg, #2d1b4e 0%, #6b2d6b 40%, #c2496b 72%, #f39c6b 100%), var(--grain-light); --tex-size: 100% 100%, 160px 160px; } /* Vaporwave (legendary): neon grid under a setting sun */ :root[data-bg="vapor"], .pv[data-bg="vapor"] { --bg: #1a0b2e; --panel: #160827; --card: #22103a; --line: rgba(255, 90, 220, 0.25); --ink: #fdf0ff; --muted: #d8b4f0; --tex: radial-gradient(circle at 50% 108%, rgba(255, 150, 60, 0.6), rgba(255, 60, 160, 0.3) 28%, transparent 55%), linear-gradient(rgba(255, 60, 200, 0.26) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 200, 255, 0.2) 1px, transparent 1px), var(--stars); --tex-size: 100% 100%, 40px 40px, 40px 40px, 420px 420px; } :root[data-bg="denim"], .pv[data-bg="denim"], :root[data-bg="sunset"], .pv[data-bg="sunset"], :root[data-bg="vapor"], .pv[data-bg="vapor"] { --star: #f5bd1f; --ring: #f5d35f; --error: #ff9c8f; --good: #4cb874; --shadow: rgba(0, 0, 0, 0.35); --backdrop: rgba(0, 0, 0, 0.65); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-bg="notebook"], :root:not([data-theme="light"]) .pv[data-bg="notebook"] { --bg: #1a1f2b; --panel: #151a24; --card: #202634; --line: #333b4c; --ink: #e9edf5; --muted: #a3adc2; --nb-line: rgba(140, 170, 230, 0.14); --nb-margin: rgba(255, 110, 110, 0.3); } :root:not([data-theme="light"])[data-bg="concrete"], :root:not([data-theme="light"]) .pv[data-bg="concrete"] { --bg: #2c2c2b; --panel: #222221; --card: #333331; --line: #444441; --ink: #ececea; --muted: #a8a7a2; --grain: var(--grain-light); } :root:not([data-theme="light"])[data-bg="topo"], :root:not([data-theme="light"]) .pv[data-bg="topo"] { --bg: #1d2620; --panel: #18201b; --card: #222c25; --line: #34413a; --ink: #e8efe9; --muted: #a5b5aa; --contours: var(--topo-light); } } :root[data-theme="dark"][data-bg="notebook"], :root[data-theme="dark"] .pv[data-bg="notebook"] { --bg: #1a1f2b; --panel: #151a24; --card: #202634; --line: #333b4c; --ink: #e9edf5; --muted: #a3adc2; --nb-line: rgba(140, 170, 230, 0.14); --nb-margin: rgba(255, 110, 110, 0.3); } :root[data-theme="dark"][data-bg="concrete"], :root[data-theme="dark"] .pv[data-bg="concrete"] { --bg: #2c2c2b; --panel: #222221; --card: #333331; --line: #444441; --ink: #ececea; --muted: #a8a7a2; --grain: var(--grain-light); } :root[data-theme="dark"][data-bg="topo"], :root[data-theme="dark"] .pv[data-bg="topo"] { --bg: #1d2620; --panel: #18201b; --card: #222c25; --line: #34413a; --ink: #e8efe9; --muted: #a5b5aa; --contours: var(--topo-light); } /* Sweetheart: pink with little hearts, sparkles and dots. A berry-pink version in dark mode. */ :root { --hearts-light: url("data:image/svg+xml,"); --hearts-dark: url("data:image/svg+xml,"); } :root[data-bg="sweetheart"], .pv[data-bg="sweetheart"] { --bg: #f8d2e0; --panel: #fff7fa; --card: #fff1f6; --line: #efbdd0; --ink: #3a1426; --muted: #7a4560; --hearts: var(--hearts-light); --wash: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 170, 205, 0.18)); --tex: var(--hearts), var(--wash); --tex-size: 160px 160px, 100% 100%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-bg="sweetheart"], :root:not([data-theme="light"]) .pv[data-bg="sweetheart"] { --bg: #3a1828; --panel: #2a111e; --card: #3b1c2c; --line: #5c2f45; --ink: #fdeef4; --muted: #e2adc3; --hearts: var(--hearts-dark); --wash: linear-gradient(180deg, rgba(120, 40, 80, 0.25), rgba(40, 10, 25, 0.2)); } } :root[data-theme="dark"][data-bg="sweetheart"], :root[data-theme="dark"] .pv[data-bg="sweetheart"] { --bg: #3a1828; --panel: #2a111e; --card: #3b1c2c; --line: #5c2f45; --ink: #fdeef4; --muted: #e2adc3; --hearts: var(--hearts-dark); --wash: linear-gradient(180deg, rgba(120, 40, 80, 0.25), rgba(40, 10, 25, 0.2)); } /* ================= EVEN MORE CALCULATORS ================= */ :root[data-calc="lavender"], .pv[data-calc="lavender"] { --body: #cdbcf2; --body-2: #bba7e8; --body-ink: #2a1d4a; --body-muted: #5a4a85; --body-accent: #b0336a; --key: #ffffff; --key-ink: #2a1d4a; --key-edge: #b3a3dc; --op: #6b4fbb; --op-ink: #ffffff; --op-edge: #4a3490; --yellow: #ff8fab; --yellow-edge: #c9587a; --yellow-ink: #3a0f20; --lcd: #e4def5; --lcd-ink: #2a1d4a; --lcd-ghost: rgba(42, 29, 74, 0.08); } :root[data-calc="red"], .pv[data-calc="red"] { --body: #c8102e; --body-2: #a50d26; --body-ink: #ffffff; --body-muted: #ffc9d2; --body-accent: #ffcc00; --key: #ffffff; --key-ink: #1a1a1a; --key-edge: #b9b9b9; --op: #1a1a1a; --op-ink: #ffffff; --op-edge: #000000; --yellow: #ffcc00; --yellow-edge: #b38f00; --yellow-ink: #1a1a1a; --lcd: #c4cbb8; --lcd-ink: #1c2117; --lcd-ghost: rgba(28, 33, 23, 0.09); } :root[data-calc="ocean"], .pv[data-calc="ocean"] { --body: linear-gradient(180deg, #0e4a6b, #08324a); --body-2: rgba(255, 255, 255, 0.1); --body-ink: #e8f6fb; --body-muted: #9fc7da; --body-accent: #ffb703; --key: #e8f6fb; --key-ink: #08324a; --key-edge: #8fb8cc; --op: #127aa8; --op-ink: #ffffff; --op-edge: #0b5276; --yellow: #ffb703; --yellow-edge: #b07d00; --yellow-ink: #1d1400; --lcd: #bfe3e8; --lcd-ink: #0c2a33; --lcd-ghost: rgba(12, 42, 51, 0.08); } /* Mainframe: green phosphor */ :root[data-calc="matrix"], .pv[data-calc="matrix"] { --body: #070d09; --body-2: #0f1a12; --body-ink: #c8ffd6; --body-muted: #5e8f6a; --body-accent: #33ff66; --key: #0d1f12; --key-ink: #33ff66; --key-edge: #020503; --op: #12301b; --op-ink: #7dffa0; --op-edge: #020503; --yellow: #33ff66; --yellow-edge: #138a33; --yellow-ink: #021a08; --lcd: #020803; --lcd-ink: #33ff66; --lcd-ghost: rgba(51, 255, 102, 0.06); } :root[data-calc="matrix"] .segs svg, .pv[data-calc="matrix"] .segs svg { filter: drop-shadow(0 0 3px rgba(51, 255, 102, 0.6)); } /* Neon (legendary): a glowing outline */ :root[data-calc="neon"], .pv[data-calc="neon"] { --body: #12051f; --body-2: #1d0b33; --body-ink: #fbeaff; --body-muted: #b48cd6; --body-accent: #4fe3ff; --key: #1d0b33; --key-ink: #ff4fd8; --key-edge: #05010a; --op: #2b0f4d; --op-ink: #4fe3ff; --op-edge: #05010a; --yellow: #ff4fd8; --yellow-edge: #a3248a; --yellow-ink: #12051f; --lcd: #05010a; --lcd-ink: #4fe3ff; --lcd-ghost: rgba(79, 227, 255, 0.06); } :root[data-calc="neon"] .segs svg, .pv[data-calc="neon"] .segs svg { filter: drop-shadow(0 0 3px rgba(79, 227, 255, 0.65)); } :root[data-calc="neon"] .daily, :root[data-calc="neon"] .machine, .pv[data-calc="neon"] .mini { box-shadow: 0 0 0 2px #ff4fd8, 0 0 22px rgba(255, 79, 216, 0.45); } /* Diamond (trophy): icy and faceted */ :root[data-calc="diamond"], .pv[data-calc="diamond"] { --body: linear-gradient(135deg, #e9f6ff 0%, #bfe3f7 28%, #f7fbff 48%, #a9d4ef 70%, #eef8ff 100%); --body-2: rgba(255, 255, 255, 0.55); --body-ink: #12324a; --body-muted: #46708d; --body-accent: #1f6fa8; --key: #ffffff; --key-ink: #12324a; --key-edge: #a9cbe0; --op: #3d86b8; --op-ink: #ffffff; --op-edge: #275f86; --yellow: #12324a; --yellow-edge: #061a29; --yellow-ink: #e9f6ff; --lcd: #dff1fb; --lcd-ink: #12324a; --lcd-ghost: rgba(18, 50, 74, 0.08); } .pv[data-calc]:not([data-calc="matrix"]):not([data-calc="neon"]):not([data-calc="glow"]):not([data-calc="amber"]):not([data-calc="champion"]):not([data-calc="galaxy"]):not([data-calc="lava"]) .segs svg { filter: none; } /* ================= DESKS, BATCH 3 ================= */ :root { --waves-on-light: url("data:image/svg+xml,"); --waves-on-dark: url("data:image/svg+xml,"); --dunes-day: url("data:image/svg+xml,"); --dunes-night: url("data:image/svg+xml,"); --cw-light: url("data:image/svg+xml,12345678"); --cw-dark: url("data:image/svg+xml,12345678"); --pines: url("data:image/svg+xml,"); --carpet: url("data:image/svg+xml,"); --rain: url("data:image/svg+xml,71943826501794622853630917488531"); } /* Light desks (each has a dark-mode version further down) */ /* Polka dots */ :root[data-bg="polka"], .pv[data-bg="polka"] { --bg: #f6efe0; --panel: #fffaf0; --card: #fdf6e8; --line: #e3d6bd; --ink: #2a2216; --muted: #6b5c43; --dot: rgba(20, 150, 140, 0.26); --tex: radial-gradient(circle, var(--dot) 0 5px, transparent 5.5px), radial-gradient(circle at 0 0, var(--dot) 0 5px, transparent 5.5px); --tex-size: 36px 36px, 36px 36px; } /* Lemonade */ :root[data-bg="lemon"], .pv[data-bg="lemon"] { --bg: #fbf1bd; --panel: #fffdf0; --card: #fffbe6; --line: #eadc94; --ink: #2a2508; --muted: #6a5f22; --stripe: rgba(255, 255, 255, 0.55); --grain: var(--grain-dark); --tex: repeating-linear-gradient(135deg, var(--stripe) 0 14px, transparent 14px 28px), var(--grain); --tex-size: auto, 160px 160px; } /* Picnic gingham */ :root[data-bg="gingham"], .pv[data-bg="gingham"] { --bg: #fdf8f6; --panel: #ffffff; --card: #fffafa; --line: #ecd2d2; --ink: #2b1214; --muted: #6f4246; --gh: rgba(214, 40, 57, 0.2); --tex: linear-gradient(90deg, var(--gh) 50%, transparent 50%), linear-gradient(var(--gh) 50%, transparent 50%); --tex-size: 28px 28px, 28px 28px; } /* Cotton candy */ :root[data-bg="cotton"], .pv[data-bg="cotton"] { --bg: #f3e6f7; --panel: #fffaff; --card: #fdf5ff; --line: #e6d2ee; --ink: #2c1a36; --muted: #6b5478; --cc1: rgba(255, 160, 205, 0.6); --cc2: rgba(140, 205, 255, 0.6); --cc3: rgba(195, 165, 255, 0.5); --tex: radial-gradient(40% 30% at 18% 18%, var(--cc1), transparent 70%), radial-gradient(45% 35% at 82% 35%, var(--cc2), transparent 70%), radial-gradient(50% 35% at 40% 88%, var(--cc3), transparent 70%), radial-gradient(30% 22% at 85% 85%, var(--cc1), transparent 70%); --tex-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; } /* Sea breeze */ :root[data-bg="waves"], .pv[data-bg="waves"] { --bg: #dcf0f3; --panel: #f6fcfd; --card: #eef9fb; --line: #bfe0e6; --ink: #0f2e36; --muted: #3f6670; --wave: var(--waves-on-light); --sheen: rgba(255, 255, 255, 0.45); --tex: var(--wave), linear-gradient(180deg, var(--sheen), transparent 60%); --tex-size: 120px 40px, 100% 100%; } /* Desert dunes (a night desert in dark mode) */ :root[data-bg="dunes"], .pv[data-bg="dunes"] { --bg: #f1dcb4; --panel: #fdf7ea; --card: #fbf2df; --line: #e3c993; --ink: #2e1f0c; --muted: #6e5330; --dune: var(--dunes-day); --tex: var(--dune), var(--grain-dark); --tex-size: 600px 240px, 160px 160px; } /* Crossword */ :root[data-bg="crossword"], .pv[data-bg="crossword"] { --bg: #f3f2ed; --panel: #ffffff; --card: #fbfbf8; --line: #d6d4cc; --ink: #161616; --muted: #555349; --cw: var(--cw-light); --cw-line: rgba(0, 0, 0, 0.09); --tex: var(--cw), linear-gradient(var(--cw-line) 1px, transparent 1px), linear-gradient(90deg, var(--cw-line) 1px, transparent 1px); --tex-size: 160px 160px, 20px 20px, 20px 20px; } /* Origami: folded paper triangles */ :root[data-bg="origami"], .pv[data-bg="origami"] { --bg: #f5ddd3; --panel: #fffaf7; --card: #fdf3ee; --line: #ecc9bb; --ink: #301812; --muted: #73473b; --fold1: rgba(255, 255, 255, 0.3); --fold2: rgba(190, 90, 70, 0.09); --tex: linear-gradient(45deg, var(--fold1) 50%, transparent 50%), linear-gradient(-45deg, var(--fold2) 50%, transparent 50%); --tex-size: 60px 60px, 120px 120px; } /* Desks that are dark in both themes */ /* Royal velvet */ :root[data-bg="velvet"], .pv[data-bg="velvet"] { --bg: #4a0e1f; --panel: #2e0813; --card: #3d0c19; --line: rgba(255, 210, 170, 0.18); --ink: #fff1e6; --muted: #e3b9a6; --tex: radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.09), transparent 65%), radial-gradient(circle, rgba(230, 190, 100, 0.4) 0 1.5px, transparent 2px), linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.2) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.2) 75%); --tex-size: 100% 100%, 40px 40px, 40px 40px, 40px 40px; } /* Pine forest */ :root[data-bg="forest"], .pv[data-bg="forest"] { --bg: #12281f; --panel: #0d1e17; --card: #163126; --line: rgba(200, 240, 215, 0.16); --ink: #ecf7f0; --muted: #a6c7b5; --tex: var(--pines), linear-gradient(180deg, rgba(60, 120, 95, 0.3), transparent 60%); --tex-size: 220px 180px, 100% 100%; } /* Lava lamp */ :root[data-bg="lava"], .pv[data-bg="lava"] { --bg: #2a0705; --panel: #1c0503; --card: #2e0a07; --line: rgba(255, 190, 150, 0.18); --ink: #fff0e8; --muted: #f0b9a0; --tex: radial-gradient(30% 22% at 25% 30%, rgba(255, 110, 40, 0.55), transparent 70%), radial-gradient(22% 18% at 75% 20%, rgba(255, 60, 60, 0.5), transparent 70%), radial-gradient(35% 25% at 62% 75%, rgba(255, 150, 40, 0.45), transparent 70%), radial-gradient(18% 14% at 15% 85%, rgba(255, 80, 30, 0.5), transparent 70%); --tex-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; } /* Arcade carpet */ :root[data-bg="arcade"], .pv[data-bg="arcade"] { --bg: #160b2e; --panel: #10071f; --card: #1d0f3a; --line: rgba(220, 190, 255, 0.18); --ink: #f7f0ff; --muted: #c3b0e6; --tex: var(--carpet), var(--grain-light); --tex-size: 160px 160px, 160px 160px; } /* Nebula */ :root[data-bg="nebula"], .pv[data-bg="nebula"] { --bg: #0b0618; --panel: #0e0920; --card: #160f2e; --line: rgba(220, 200, 255, 0.16); --ink: #f4efff; --muted: #b8acd8; --tex: radial-gradient(50% 35% at 28% 28%, rgba(200, 60, 200, 0.38), transparent 70%), radial-gradient(45% 40% at 76% 66%, rgba(60, 90, 255, 0.38), transparent 70%), radial-gradient(30% 25% at 55% 45%, rgba(255, 140, 200, 0.22), transparent 70%), var(--stars), var(--stars); --tex-size: 100% 100%, 100% 100%, 100% 100%, 420px 420px, 260px 260px; } /* Code rain */ :root[data-bg="coderain"], .pv[data-bg="coderain"] { --bg: #020a04; --panel: #031208; --card: #06180c; --line: rgba(51, 255, 102, 0.2); --ink: #d8ffe2; --muted: #7fbf90; --tex: var(--rain), linear-gradient(180deg, rgba(51, 255, 102, 0.07), transparent 50%); --tex-size: 240px 300px, 100% 100%; } /* Art deco (legendary): gold fans on black */ :root[data-bg="deco"], .pv[data-bg="deco"] { --bg: #0f0e0c; --panel: #17150f; --card: #1e1b14; --line: rgba(212, 175, 55, 0.3); --ink: #f7ecd0; --muted: #cdb98a; --gold: rgba(212, 175, 55, 0.38); --tex: linear-gradient(180deg, rgba(212, 175, 55, 0.1), transparent 45%), radial-gradient(circle at 50% 100%, transparent 0 8px, var(--gold) 8px 9.5px, transparent 9.5px 14px, var(--gold) 14px 15.5px, transparent 15.5px 20px, var(--gold) 20px 21.5px, transparent 21.5px); --tex-size: 100% 100%, 44px 22px; } :root[data-bg="velvet"], .pv[data-bg="velvet"], :root[data-bg="forest"], .pv[data-bg="forest"], :root[data-bg="lava"], .pv[data-bg="lava"], :root[data-bg="arcade"], .pv[data-bg="arcade"], :root[data-bg="nebula"], .pv[data-bg="nebula"], :root[data-bg="coderain"], .pv[data-bg="coderain"], :root[data-bg="deco"], .pv[data-bg="deco"] { --star: #f5bd1f; --ring: #f5d35f; --error: #ff9c8f; --good: #4cb874; --shadow: rgba(0, 0, 0, 0.35); --backdrop: rgba(0, 0, 0, 0.65); color-scheme: dark; } /* Dark-mode versions of the light desks above (written twice: system setting, then the in-app toggle) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-bg="polka"], :root:not([data-theme="light"]) .pv[data-bg="polka"] { --bg: #1b2422; --panel: #151c1a; --card: #1f2a27; --line: #2f3d39; --ink: #e9f1ee; --muted: #9fb5ae; --dot: rgba(90, 220, 200, 0.15); } :root:not([data-theme="light"])[data-bg="lemon"], :root:not([data-theme="light"]) .pv[data-bg="lemon"] { --bg: #23220f; --panel: #1b1a0b; --card: #2b2912; --line: #3f3c1c; --ink: #f7f2cf; --muted: #c3bb7c; --stripe: rgba(255, 240, 120, 0.05); --grain: var(--grain-light); } :root:not([data-theme="light"])[data-bg="gingham"], :root:not([data-theme="light"]) .pv[data-bg="gingham"] { --bg: #2a1517; --panel: #1f0f11; --card: #321a1d; --line: #4a2a2e; --ink: #fbecec; --muted: #d1a5a8; --gh: rgba(255, 90, 100, 0.12); } :root:not([data-theme="light"])[data-bg="cotton"], :root:not([data-theme="light"]) .pv[data-bg="cotton"] { --bg: #221a2e; --panel: #1a1424; --card: #2a2138; --line: #3e3350; --ink: #f6eefc; --muted: #bfaed0; --cc1: rgba(255, 120, 190, 0.2); --cc2: rgba(100, 170, 255, 0.2); --cc3: rgba(170, 130, 255, 0.18); } :root:not([data-theme="light"])[data-bg="waves"], :root:not([data-theme="light"]) .pv[data-bg="waves"] { --bg: #0f2a33; --panel: #0b2028; --card: #133340; --line: #23495a; --ink: #e6f6fa; --muted: #9cc4d0; --wave: var(--waves-on-dark); --sheen: rgba(127, 214, 232, 0.08); } :root:not([data-theme="light"])[data-bg="dunes"], :root:not([data-theme="light"]) .pv[data-bg="dunes"] { --bg: #1f1a2c; --panel: #18141f; --card: #29223a; --line: #3c3352; --ink: #f3ecf9; --muted: #b9aecb; --dune: var(--dunes-night); --grain-dark: none; } :root:not([data-theme="light"])[data-bg="crossword"], :root:not([data-theme="light"]) .pv[data-bg="crossword"] { --bg: #171716; --panel: #1f1f1d; --card: #232321; --line: #3a3a37; --ink: #efeeea; --muted: #a7a59d; --cw: var(--cw-dark); --cw-line: rgba(255, 255, 255, 0.06); } :root:not([data-theme="light"])[data-bg="origami"], :root:not([data-theme="light"]) .pv[data-bg="origami"] { --bg: #2a1c1a; --panel: #201513; --card: #33221f; --line: #4a3330; --ink: #fbeee9; --muted: #cfaea4; --fold1: rgba(255, 255, 255, 0.04); --fold2: rgba(0, 0, 0, 0.2); } } :root[data-theme="dark"][data-bg="polka"], :root[data-theme="dark"] .pv[data-bg="polka"] { --bg: #1b2422; --panel: #151c1a; --card: #1f2a27; --line: #2f3d39; --ink: #e9f1ee; --muted: #9fb5ae; --dot: rgba(90, 220, 200, 0.15); } :root[data-theme="dark"][data-bg="lemon"], :root[data-theme="dark"] .pv[data-bg="lemon"] { --bg: #23220f; --panel: #1b1a0b; --card: #2b2912; --line: #3f3c1c; --ink: #f7f2cf; --muted: #c3bb7c; --stripe: rgba(255, 240, 120, 0.05); --grain: var(--grain-light); } :root[data-theme="dark"][data-bg="gingham"], :root[data-theme="dark"] .pv[data-bg="gingham"] { --bg: #2a1517; --panel: #1f0f11; --card: #321a1d; --line: #4a2a2e; --ink: #fbecec; --muted: #d1a5a8; --gh: rgba(255, 90, 100, 0.12); } :root[data-theme="dark"][data-bg="cotton"], :root[data-theme="dark"] .pv[data-bg="cotton"] { --bg: #221a2e; --panel: #1a1424; --card: #2a2138; --line: #3e3350; --ink: #f6eefc; --muted: #bfaed0; --cc1: rgba(255, 120, 190, 0.2); --cc2: rgba(100, 170, 255, 0.2); --cc3: rgba(170, 130, 255, 0.18); } :root[data-theme="dark"][data-bg="waves"], :root[data-theme="dark"] .pv[data-bg="waves"] { --bg: #0f2a33; --panel: #0b2028; --card: #133340; --line: #23495a; --ink: #e6f6fa; --muted: #9cc4d0; --wave: var(--waves-on-dark); --sheen: rgba(127, 214, 232, 0.08); } :root[data-theme="dark"][data-bg="dunes"], :root[data-theme="dark"] .pv[data-bg="dunes"] { --bg: #1f1a2c; --panel: #18141f; --card: #29223a; --line: #3c3352; --ink: #f3ecf9; --muted: #b9aecb; --dune: var(--dunes-night); --grain-dark: none; } :root[data-theme="dark"][data-bg="crossword"], :root[data-theme="dark"] .pv[data-bg="crossword"] { --bg: #171716; --panel: #1f1f1d; --card: #232321; --line: #3a3a37; --ink: #efeeea; --muted: #a7a59d; --cw: var(--cw-dark); --cw-line: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"][data-bg="origami"], :root[data-theme="dark"] .pv[data-bg="origami"] { --bg: #2a1c1a; --panel: #201513; --card: #33221f; --line: #4a3330; --ink: #fbeee9; --muted: #cfaea4; --fold1: rgba(255, 255, 255, 0.04); --fold2: rgba(0, 0, 0, 0.2); } /* ================= CALCULATORS, BATCH 3 ================= */ :root[data-calc="sky"], .pv[data-calc="sky"] { --body: #9fd3f2; --body-2: #88c2e6; --body-ink: #0d2c40; --body-muted: #3b6683; --body-accent: #c2410c; --key: #ffffff; --key-ink: #0d2c40; --key-edge: #8fbad6; --op: #2477b3; --op-ink: #ffffff; --op-edge: #155584; --yellow: #ffcf33; --yellow-edge: #b8900f; --yellow-ink: #2a1f00; --lcd: #d9ecf5; --lcd-ink: #12303f; --lcd-ghost: rgba(18, 48, 63, 0.08); } :root[data-calc="peach"], .pv[data-calc="peach"] { --body: #ffc7a8; --body-2: #f5b18e; --body-ink: #3d1d0e; --body-muted: #7a4a33; --body-accent: #b3261e; --key: #fff8f3; --key-ink: #3d1d0e; --key-edge: #e0a786; --op: #e8684a; --op-ink: #ffffff; --op-edge: #b04529; --yellow: #6bbfa3; --yellow-edge: #3f8a71; --yellow-ink: #0d2a20; --lcd: #f6e3d6; --lcd-ink: #3d1d0e; --lcd-ghost: rgba(61, 29, 14, 0.08); } :root[data-calc="lime"], .pv[data-calc="lime"] { --body: #c6f04a; --body-2: #b3dd36; --body-ink: #1d2a04; --body-muted: #4b6214; --body-accent: #6d1fc4; --key: #fbffef; --key-ink: #1d2a04; --key-edge: #a6c95a; --op: #1d2a04; --op-ink: #e4ff9a; --op-edge: #000000; --yellow: #ff4fa3; --yellow-edge: #b8236b; --yellow-ink: #ffffff; --lcd: #e6f5c2; --lcd-ink: #1d2a04; --lcd-ghost: rgba(29, 42, 4, 0.08); } :root[data-calc="pistachio"], .pv[data-calc="pistachio"] { --body: #cfdcb0; --body-2: #bccb99; --body-ink: #283018; --body-muted: #5a6640; --body-accent: #8a3b2a; --key: #faf8ee; --key-ink: #283018; --key-edge: #b2bf90; --op: #7d6a4a; --op-ink: #fffaf0; --op-edge: #574a30; --yellow: #d98c5f; --yellow-edge: #9c5a32; --yellow-ink: #2a160a; --lcd: #e3e8cf; --lcd-ink: #283018; --lcd-ghost: rgba(40, 48, 24, 0.08); } /* Sakura: pale pink with a scatter of white blossoms */ :root[data-calc="sakura"], .pv[data-calc="sakura"] { --body: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75) 0 2.5px, transparent 3px) 0 0 / 34px 34px, radial-gradient(circle at 75% 70%, rgba(255, 170, 200, 0.6) 0 2px, transparent 2.5px) 0 0 / 34px 34px, #fbe3ea; --body-2: #f5cfda; --body-ink: #4a1d2c; --body-muted: #8a5266; --body-accent: #c2185b; --key: #ffffff; --key-ink: #4a1d2c; --key-edge: #e8b8c6; --op: #d6608a; --op-ink: #ffffff; --op-edge: #a63d63; --yellow: #6b3a4b; --yellow-edge: #42202d; --yellow-ink: #ffe9f0; --lcd: #fff2f5; --lcd-ink: #4a1d2c; --lcd-ghost: rgba(74, 29, 44, 0.07); } /* Toy blocks: primary colors */ :root[data-calc="toy"], .pv[data-calc="toy"] { --body: #e63946; --body-2: #c92f3b; --body-ink: #ffffff; --body-muted: #ffd0d4; --body-accent: #ffd23f; --key: #ffd23f; --key-ink: #1a1a1a; --key-edge: #b8900f; --op: #1d6fd8; --op-ink: #ffffff; --op-edge: #124a96; --yellow: #2bb24c; --yellow-edge: #1a7a31; --yellow-ink: #ffffff; --lcd: #cfd8c4; --lcd-ink: #182014; --lcd-ghost: rgba(24, 32, 20, 0.09); } /* Retro 70s: brown with orange racing stripes */ :root[data-calc="retro"], .pv[data-calc="retro"] { --body: linear-gradient(180deg, #f0a23a 0 6px, #e2762b 6px 12px, #c8501f 12px 18px, #3b2a1e 18px); --body-2: #4a3627; --body-ink: #f6e6c8; --body-muted: #c5a882; --body-accent: #f0a23a; --key: #f3e3c3; --key-ink: #3b2a1e; --key-edge: #b49a70; --op: #c8501f; --op-ink: #fff3e0; --op-edge: #8a3b1a; --yellow: #f0a23a; --yellow-edge: #a86a12; --yellow-ink: #2a1a08; --lcd: #cfc39b; --lcd-ink: #2b2414; --lcd-ghost: rgba(43, 36, 20, 0.09); } /* Camo */ :root[data-calc="camo"], .pv[data-calc="camo"] { --body: radial-gradient(28% 22% at 20% 25%, #4b5a2e 98%, transparent 100%) 0 0 / 120px 100px, radial-gradient(25% 30% at 70% 20%, #2f3a1f 98%, transparent 100%) 0 0 / 120px 100px, radial-gradient(30% 20% at 45% 62%, #7a7444 98%, transparent 100%) 0 0 / 120px 100px, radial-gradient(22% 25% at 86% 72%, #3a2e1e 98%, transparent 100%) 0 0 / 120px 100px, radial-gradient(26% 18% at 14% 82%, #2f3a1f 98%, transparent 100%) 0 0 / 120px 100px, #5c6b3a; --body-2: rgba(0, 0, 0, 0.22); --body-ink: #eef0dc; --body-muted: #c3c7a2; --body-accent: #e0b84a; --key: #d8d3b5; --key-ink: #232814; --key-edge: #8c8768; --op: #2f3a1f; --op-ink: #eef0dc; --op-edge: #161c0d; --yellow: #e07a1f; --yellow-edge: #9a4f0c; --yellow-ink: #1e1206; --lcd: #b9bd9a; --lcd-ink: #1e2214; --lcd-ghost: rgba(30, 34, 20, 0.09); } /* Marble */ :root[data-calc="marble"], .pv[data-calc="marble"] { --body: var(--veins-dark) 0 0 / 300px 300px, #f3f1ed; --body-2: rgba(0, 0, 0, 0.06); --body-ink: #1d1c1a; --body-muted: #5c5850; --body-accent: #a17a2c; --key: #ffffff; --key-ink: #1d1c1a; --key-edge: #cfcac0; --op: #1d1c1a; --op-ink: #f3e6c4; --op-edge: #000000; --yellow: #c9a24a; --yellow-edge: #8a6a20; --yellow-ink: #1d1406; --lcd: #e8e6e0; --lcd-ink: #1d1c1a; --lcd-ghost: rgba(29, 28, 26, 0.07); } /* Handheld: grey plastic, magenta buttons, a pea-green screen */ :root[data-calc="handheld"], .pv[data-calc="handheld"] { --body: #c9c7c2; --body-2: #b9b7b1; --body-ink: #2b2b4a; --body-muted: #6a6a80; --body-accent: #a3195b; --key: #3a3a3a; --key-ink: #eeeeee; --key-edge: #121212; --op: #5c5c6e; --op-ink: #ffffff; --op-edge: #34343f; --yellow: #a3195b; --yellow-edge: #6a0f3a; --yellow-ink: #ffffff; --lcd: #9bbc0f; --lcd-ink: #0f380f; --lcd-ghost: rgba(15, 56, 15, 0.1); } /* Jade */ :root[data-calc="jade"], .pv[data-calc="jade"] { --body: var(--veins-light) 0 0 / 300px 300px, linear-gradient(135deg, #2f8a63 0%, #1f6b4b 40%, #4aa37d 65%, #1a5c40 100%); --body-2: rgba(255, 255, 255, 0.12); --body-ink: #eafff4; --body-muted: #a8dcc2; --body-accent: #f2d16b; --key: #effaf4; --key-ink: #0f3a28; --key-edge: #8fc2aa; --op: #0f3a28; --op-ink: #c9f5df; --op-edge: #06201a; --yellow: #f2d16b; --yellow-edge: #a88a26; --yellow-ink: #1d1704; --lcd: #d6eadf; --lcd-ink: #0f3a28; --lcd-ghost: rgba(15, 58, 40, 0.08); } /* Lava: black rock with a glowing orange display */ :root[data-calc="lava"], .pv[data-calc="lava"] { --body: radial-gradient(70% 45% at 50% 110%, rgba(255, 90, 31, 0.4), transparent 70%), #1a0f0c; --body-2: #2a1813; --body-ink: #ffe9dc; --body-muted: #b08a78; --body-accent: #ff5a1f; --key: #2e1c16; --key-ink: #ffd0b8; --key-edge: #0a0504; --op: #8f2a0e; --op-ink: #ffffff; --op-edge: #4a1405; --yellow: #ff5a1f; --yellow-edge: #a8320a; --yellow-ink: #1a0702; --lcd: #150604; --lcd-ink: #ff6a2a; --lcd-ghost: rgba(255, 106, 42, 0.07); } :root[data-calc="lava"] .segs svg, .pv[data-calc="lava"] .segs svg { filter: drop-shadow(0 0 3px rgba(255, 106, 42, 0.6)); } /* Rose gold */ :root[data-calc="rosegold"], .pv[data-calc="rosegold"] { --body: linear-gradient(135deg, #f6d5c8 0%, #d9a08e 35%, #f8dfd4 60%, #c98673 100%); --body-2: rgba(90, 40, 30, 0.14); --body-ink: #3a1a12; --body-muted: #6e3f33; --body-accent: #7a2338; --key: #fff8f5; --key-ink: #3a1a12; --key-edge: #d8b3a6; --op: #5a2b22; --op-ink: #ffe3d8; --op-edge: #3a1a12; --yellow: #3a1a12; --yellow-edge: #1c0b07; --yellow-ink: #f8dfd4; --lcd: #f1e2dc; --lcd-ink: #3a1a12; --lcd-ghost: rgba(58, 26, 18, 0.07); } /* Galaxy (legendary): a starfield body and a glowing violet display */ :root[data-calc="galaxy"], .pv[data-calc="galaxy"] { --body: var(--stars) 0 0 / 300px 300px, radial-gradient(80% 60% at 30% 20%, rgba(190, 70, 220, 0.55), transparent 70%), radial-gradient(70% 60% at 80% 90%, rgba(60, 90, 255, 0.5), transparent 70%), #120a2a; --body-2: rgba(255, 255, 255, 0.08); --body-ink: #f4efff; --body-muted: #b8acd8; --body-accent: #ff8fe0; --key: #241a46; --key-ink: #f4efff; --key-edge: #080418; --op: #4b2fa0; --op-ink: #ffffff; --op-edge: #241460; --yellow: #ff8fe0; --yellow-edge: #b04a98; --yellow-ink: #1c0a28; --lcd: #0a0618; --lcd-ink: #c9b8ff; --lcd-ghost: rgba(201, 184, 255, 0.07); } :root[data-calc="galaxy"] .segs svg, .pv[data-calc="galaxy"] .segs svg { filter: drop-shadow(0 0 3px rgba(201, 184, 255, 0.6)); } /* Rainbow (legendary): slowly shifting colors */ :root[data-calc="rainbow"], .pv[data-calc="rainbow"] { --body: linear-gradient(120deg, #ff6b6b, #ffb36b, #ffe66b, #7be07b, #6bc5ff, #a07bff, #ff7bd5, #ff6b6b); --body-2: rgba(255, 255, 255, 0.35); --body-ink: #1b1430; --body-muted: #3c3158; --body-accent: #1b1430; --key: #ffffff; --key-ink: #1b1430; --key-edge: #c8bfe0; --op: #1b1430; --op-ink: #ffffff; --op-edge: #000000; --yellow: #ffffff; --yellow-edge: #b8b0d0; --yellow-ink: #1b1430; --lcd: #f4f1ff; --lcd-ink: #1b1430; --lcd-ghost: rgba(27, 20, 48, 0.07); } :root[data-calc="rainbow"] .daily, :root[data-calc="rainbow"] .machine, .pv[data-calc="rainbow"] .mini { background-size: 300% 300%; animation: holo 9s ease-in-out infinite; } /* ================= TAPES, BATCH 3 ================= */ :root[data-tape="mintroll"], .pv[data-tape="mintroll"] { --paper: #e3f7ec; --paper-ink: #163a2a; --paper-muted: #6b9a84; --paper-red: #c0392b; --paper-rule: #bfe3cf; } :root[data-tape="skyroll"], .pv[data-tape="skyroll"] { --paper: #e2f1fb; --paper-ink: #12304a; --paper-muted: #6a8aa6; --paper-red: #d64545; --paper-rule: #bcd8ee; } :root[data-tape="lilac"], .pv[data-tape="lilac"] { --paper: #efe6fb; --paper-ink: #2e1d4a; --paper-muted: #8a78a8; --paper-red: #b0246a; --paper-rule: #d9c8f0; } :root[data-tape="apricot"], .pv[data-tape="apricot"] { --paper: #ffe5cc; --paper-ink: #3d220c; --paper-muted: #a07a58; --paper-red: #c0392b; --paper-rule: #f2c8a0; } :root[data-tape="dotgrid"], .pv[data-tape="dotgrid"] { --paper: #fdfdfb; --paper-ink: #22252b; --paper-muted: #8b909a; --paper-red: #e0533d; --paper-rule: #e1e3e6; --paper-tex: radial-gradient(circle, rgba(60, 70, 90, 0.24) 0 1px, transparent 1.5px); --paper-tex-size: 8px 8px; } :root[data-tape="candy"], .pv[data-tape="candy"] { --paper: #fff3f7; --paper-ink: #3a1424; --paper-muted: #a06a82; --paper-red: #d81b60; --paper-rule: #f6c9d8; --paper-tex: repeating-linear-gradient(135deg, rgba(255, 120, 170, 0.15) 0 8px, transparent 8px 16px); --paper-tex-size: auto; } /* Sheet music: five-line staves */ :root[data-tape="music"], .pv[data-tape="music"] { --paper: #fbf8ef; --paper-ink: #1f1b14; --paper-muted: #8a8270; --paper-red: #9c1c1c; --paper-rule: #d9d2bf; --paper-tex: linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.1) 2px 3px, transparent 3px 5px, rgba(0, 0, 0, 0.1) 5px 6px, transparent 6px 8px, rgba(0, 0, 0, 0.1) 8px 9px, transparent 9px 11px, rgba(0, 0, 0, 0.1) 11px 12px, transparent 12px 14px, rgba(0, 0, 0, 0.1) 14px 15px, transparent 15px); --paper-tex-size: 100% 28px; } /* Ledger: green paper with a red double margin */ :root[data-tape="ledger"], .pv[data-tape="ledger"] { --paper: #eef6e6; --paper-ink: #1d2a1a; --paper-muted: #6d8466; --paper-red: #b3261e; --paper-rule: #a9c99a; --paper-tex: linear-gradient(90deg, transparent 0 14px, rgba(200, 60, 60, 0.35) 14px 15px, transparent 15px 17px, rgba(200, 60, 60, 0.35) 17px 18px, transparent 18px); --paper-tex-size: 100% 100%; } :root[data-tape="washi"], .pv[data-tape="washi"] { --paper: #f4ecdd; --paper-ink: #2e2619; --paper-muted: #8f8268; --paper-red: #b8432e; --paper-rule: #ddd0b6; --paper-tex: var(--grain-dark), repeating-linear-gradient(80deg, rgba(150, 120, 80, 0.07) 0 1px, transparent 1px 7px); --paper-tex-size: 160px 160px, auto; } :root[data-tape="chalkroll"], .pv[data-tape="chalkroll"] { --paper: #2f3f37; --paper-ink: #f1f4ee; --paper-muted: #a9b8ad; --paper-red: #ffb3a7; --paper-rule: #46584e; --paper-tex: var(--grain-light); --paper-tex-size: 160px 160px; } :root[data-tape="cyanotype"], .pv[data-tape="cyanotype"] { --paper: #1f5c99; --paper-ink: #f2f8ff; --paper-muted: #a9c6e6; --paper-red: #ffd166; --paper-rule: #3f7bb8; --paper-tex: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); --paper-tex-size: 10px 10px, 10px 10px; } /* Green screen: phosphor text with scanlines */ :root[data-tape="greenscreen"], .pv[data-tape="greenscreen"] { --paper: #04120a; --paper-ink: #39ff7a; --paper-muted: #2a8a4a; --paper-red: #b6ff5a; --paper-rule: #0f2e1a; --paper-tex: repeating-linear-gradient(transparent 0 2px, rgba(57, 255, 122, 0.05) 2px 3px); --paper-tex-size: auto; } :root[data-tape="greenscreen"] .tape, .pv[data-tape="greenscreen"] .mini-tape { text-shadow: 0 0 6px currentColor; } :root[data-tape="starchart"], .pv[data-tape="starchart"] { --paper: #101a3a; --paper-ink: #eaf0ff; --paper-muted: #8a98c8; --paper-red: #ffd166; --paper-rule: #253262; --paper-tex: var(--stars); --paper-tex-size: 300px 300px; } :root[data-tape="sunsetroll"], .pv[data-tape="sunsetroll"] { --paper: #ffcfb0; --paper-ink: #3a1420; --paper-muted: #8a4a5a; --paper-red: #b3123c; --paper-rule: #f0a99a; --paper-tex: linear-gradient(180deg, #ffe3a8, #ffb8a0 55%, #f59ab8); --paper-tex-size: 100% 100%; } /* Holo foil (legendary) */ :root[data-tape="holofoil"], .pv[data-tape="holofoil"] { --paper: #eef0ff; --paper-ink: #261e3d; --paper-muted: #6a6290; --paper-red: #7a22c9; --paper-rule: #c8c0ea; --paper-tex: linear-gradient(115deg, rgba(255, 170, 230, 0.55), rgba(170, 230, 255, 0.55), rgba(200, 255, 200, 0.5), rgba(255, 240, 170, 0.55), rgba(220, 180, 255, 0.55)); --paper-tex-size: 100% 100%; }