/* 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,");
--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);
}
/* ================= 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"]) .segs svg { filter: none; }