/* mokcove.com tokens: the app's own custom properties, written by scripts/site-sync.py from style.css, lantern.css, home.css, maker/maker.css, goo/goo.css, goo/living.css, pier/dumpling/dumpling.css.
   Do not edit: change the app's stylesheet and run the script again. This is the one file in site/ that holds
   color values; everything else reads var(). */
:root {
  --paper: #f0e8da;
  --card: #FFFFFF;
  --ink: #1E2430;
  --line: #E7E0D3;
  --key: #EFE9DE;
  --muted: #6B655B;
  --kid: #1E2430;
  --font: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --r-card: 24px;
  --r-key: 10px;
  --r-icon: 22.37%;
  --tap: 44px;
  --tap-kid: 64px;
  --bar: var(--s1);
  --t-quick: .18s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --eyebrow: color-mix(in oklab, var(--kid-gel-4), var(--ink) 45%);
  --door-day-top: #f8f1e4;
  --door-day-bot: #efe3cf;
  --door-daylight: #fffdf4;
  --door-day-deep: #785028;
  --door-night-top: #22324a;
  --door-night-mid: #30476a;
  --door-night-bot: #3c567a;
  --door-mist: #96afd7;
  --door-star: #f0f4ff;
  --frost: #8ea6bc;
  --glint: #ffffff;
  --kid-gel-1: #ff8fa3;
  --kid-gel-2: #ff9e7a;
  --kid-gel-3: #f4c25b;
  --kid-gel-4: #6aa6f0;
  --kid-gel-5: #a184e6;
  --kid-gel-6: #6cc4d8;
  --door-card: 15.5rem;
  --door-night: radial-gradient(120% 55% at 50% 100%, color-mix(in srgb, var(--door-mist) 16%, transparent), transparent 70%), linear-gradient(to bottom, var(--door-night-top), var(--door-night-mid) 60%, var(--door-night-bot));
  --door-day: radial-gradient(120% 90% at 12% -15%, color-mix(in srgb, var(--door-daylight) 60%, transparent), transparent 70%), radial-gradient(farthest-corner at 50% 55%, transparent 45%, color-mix(in srgb, var(--door-day-deep) 10%, transparent)), linear-gradient(170deg, var(--door-day-top), var(--door-day-bot));
  --grain: .05;
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .6' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .41 0 0 0 0 .27 .9 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --wall-board: #0f131d;
  --wall-board-hi: #1b2234;
  --wall-light: color-mix(in srgb, var(--frost) 12%, transparent);
  --wall-floor: #151925;
  --wall-floor-lip: color-mix(in srgb, var(--frost) 10%, transparent);
  --wall-floor-h: 14svh;
  --wall-face: clamp(4.5rem, 3rem + 6vw, 6.5rem);
  --wall-card: min(clamp(12rem, 6rem + 30vw, 17rem), calc((100svh - var(--wall-floor-h) - var(--home-clear) - var(--wall-face) * .8 - var(--s4) + 2 * var(--s2) - max(var(--s3), env(safe-area-inset-bottom)) - var(--s1)) / 1.4));
  --dab: #b9d9f2;
  --dab-hi: #eef7ff;
  --dab-lo: #56627a;
  --lantern: #ffc23d;
  --lantern-deep: #e8961e;
  --lantern-near: 1.4rem;
  --lantern-far: 3.4rem;
  --lantern-in: 1.6s;
  --lantern-breath: 3.5s;
  --lantern-breaths: 3;
  --lantern-tick: steps(5);
  --lantern-glow: 0 0 var(--lantern-near) .2rem color-mix(in srgb, var(--lantern) 46%, transparent), 0 0 var(--lantern-far) .8rem color-mix(in srgb, var(--lantern-deep) 18%, transparent);
  --lantern-low: 0 0 var(--lantern-near) .2rem color-mix(in srgb, var(--lantern) 24%, transparent), 0 0 var(--lantern-far) .8rem color-mix(in srgb, var(--lantern-deep) 8%, transparent);
  --lantern-dark: 0 0 var(--lantern-near) .2rem color-mix(in srgb, var(--lantern) 0%, transparent), 0 0 var(--lantern-far) .8rem color-mix(in srgb, var(--lantern-deep) 0%, transparent);
  --home-size: 64px;
  --home-edge: 16px;
  --home-quick: .18s;
  --home-top: max(var(--home-edge), env(safe-area-inset-top));
  --home-clear: calc(var(--home-top) + var(--home-size) + var(--home-edge));
  --home-frost: var(--dd-deck);
  --home-frost-hi: var(--dd-deck-hi);
  --home-light: #ffffff;
  --home-warm: var(--lantern);
  --home-shade: #05070c;
  --home-solid: var(--glass-solid);
  --home-glass: var(--glass);
  --home-rim: var(--glass-rim);
  --home-ring: var(--glass-edge);
  --home-glint: var(--glass-glint);
  --home-blur: 18px;
  --home-ink: var(--frost-hi);
  --night-dusk: #2b3049;
  --night-steel: #18213a;
  --night-deep: #0b1022;
  --night-top: #04060c;
  --night-mist: #34405a;
  --star: #e3ecff;
  --stars: .8;
  --grain-blend: overlay;
  --grain-size: auto;
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ground-base: var(--night-top);
  --veil: 0.42;
  --card-night: #04060c;
  --card-steel: #18213a;
  --gel-pearl: #e9dfe6;
  --gel-pearl-hi: #fffaff;
  --gel-pearl-lo: #9d8a9a;
  --gel-frost: #b9d3e6;
  --gel-frost-hi: #f2f9ff;
  --gel-frost-lo: #5f7f98;
  --puff-eye: #141826;
  --puff-blush: #ffb3c4;
  --glitter-warm: #ffc6dc;
  --glitter-cool: #ffffff;
  --glare: #ffffff;
  --jar-rim: #dfe9f5;
  --frost-hi: #f0f7fd;
  --foil-warm: #ffc98f;
  --glass: color-mix(in srgb, var(--frost) 16%, transparent);
  --glass-solid: #1a2232;
  --glass-tile: color-mix(in srgb, var(--slate-lo) 58%, transparent);
  --glass-rim: color-mix(in srgb, var(--glare) 55%, transparent);
  --glass-edge: color-mix(in srgb, var(--frost-hi) 14%, transparent);
  --glass-glint: color-mix(in srgb, var(--foil-warm) 30%, transparent);
  --glass-blur: 18px;
  --focus: #3b82f6;
  --shadow: #04060c;
  --ink-steel: #5d6b85;
  --round: 999px;
  --tile: 64px;
  --dot: 52px;
  --glyph-size: 24px;
  --dock-pad: calc((var(--tile) - var(--dot)) / 2);
  --dock-gap: calc(var(--dock-pad) * 2);
  --tray-lift: 12px;
  --dock-dark: #06080d;
  --dock-glass: color-mix(in srgb, var(--slate-lo) 50%, transparent);
  --dock-tile: var(--glass-tile-solid);
  --dock-ring: var(--frost-hi);
  --dock-glow: color-mix(in srgb, var(--dock-ring) 32%, transparent);
  --paper-hi: #fbf8f1;
  --paper-mid: #f5efe4;
  --paper-lo: #e6dbc8;
  --paper-deep: #d6c9b3;
  --paper-ink: #3b3329;
  --paper-shade: #7a6650;
  --paper-light: #fffaf0;
  --paper-glass: #f8f3ea;
  --paper-tile: #ebe2d3;
  --edge: max(16px, env(safe-area-inset-bottom));
  --card-w: min(calc(100vw - 32px), 420px, calc((100svh - 220px) * 5 / 7));
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --quick: 180ms;
  --slow: 900ms;
  --field: #0b0d11;
  --night-veil: #070a12;
  --mask: #000000;
  --goo-pink: #ff6fb1;
  --goo-pink-hi: #ffc2de;
  --goo-pink-lo: #b8306f;
  --goo-lime: #8ee05a;
  --goo-lime-hi: #d6f7b8;
  --goo-lime-lo: #3f8f24;
  --goo-sky: #55c8ff;
  --goo-sky-hi: #c6ecff;
  --goo-sky-lo: #1f74b8;
  --goo-sun: #ffc23d;
  --goo-sun-hi: #fff0b8;
  --goo-sun-lo: #c27a0f;
  --goo-grape: #a77bff;
  --goo-grape-hi: #e2d3ff;
  --goo-grape-lo: #5b33b8;
  --goo-pink-2: #ffac8f;
  --goo-sky-2: #a9a4ff;
  --goo-grape-2: #f08ad0;
  --goo-lime-2: #f0e070;
  --goo-sun-2: #ff9f7a;
  --goo-steel: #8796ab;
  --goo-steel-hi: #e4ebf3;
  --goo-steel-lo: #2c3542;
  --goo-peach: #ff9a5e;
  --goo-peach-hi: #ffd6b8;
  --goo-peach-lo: #c4552a;
  --halo-1: #ff9ec4;
  --halo-2: #ffc9a1;
  --halo-3: #9fd0ff;
  --halo-4: #c8a8ff;
  --goo-eye: #1d1b2e;
  --goo-eye-deep: #0e0c18;
  --goo-blush: #ff4f86;
  --foil-1: #2ee6ff;
  --foil-2: #ff3df0;
  --foil-3: #ffe93d;
  --foil-4: #3dff8a;
  --steel: #6c7787;
  --steel-hi: #dbe3ec;
  --steel-lo: #11151b;
  --frost-lo: #17212c;
  --slate: #26303f;
  --slate-hi: #9fb1cc;
  --slate-lo: #06080d;
  --brush: #ffffff;
  --glass-tile-solid: #0e131c;
  --card-bg: #0a0a0c;
  --moon: #dfe7f3;
  --glyph: var(--moon);
  --glyph-hi: color-mix(in srgb, var(--glyph) 45%, var(--glare));
  --glyph-lo: color-mix(in srgb, var(--glyph) 62%, var(--mask));
  --sky-moon: #dfe6f0;
  --sky-moon-hi: #ffffff;
  --sky-moon-lo: #8f9bb0;
  --sky-moon-halo: #1c2433;
  --sky-moon-x: 0.38;
  --sky-moon-y: 0.2;
  --sky-moon-r: 0.065;
  --sky-moon-up: 3.5;
  --sky-dusk: #2b3049;
  --sky-steel: #18213a;
  --sky-deep: #0b1022;
  --sky-top: #04060c;
  --sky-mist: #34405a;
  --sky-mist-hi: #7d8daa;
  --goo-eye-ring: #eef4fa;
  --paper-fibre: #a8957a;
  --paper-shadow: #8a7fb0;
  --card-r: 20px;
  --ocean-deep: #123a55;
  --ocean-mid: #3a7896;
  --ocean-light: #8ec3d0;
  --ocean-foam: #e4f3f5;
  --ocean-calm-lo: #68a1b6;
  --ocean-calm-hi: #a2cfda;
  --ember-deep: #2a1f3d;
  --ember-mid: #a24c79;
  --ember-glow: #f28e86;
  --ember-hot: #ffd6b0;
  --ember-calm-lo: #e08a8f;
  --ember-calm-hi: #ffc8b4;
  --snow-deep: #22304a;
  --snow-mid: #6d86a6;
  --snow-flake: #f4f9ff;
  --snow-calm-lo: #8098b5;
  --snow-calm-hi: #c2d2e4;
  --aurora-deep: #0c1328;
  --aurora-low: #1b2a4a;
  --aurora-mid: #6f8fb4;
  --aurora-hi: #e2eef8;
  --aurora-calm-lo: #7088ad;
  --aurora-calm-hi: #869dc0;
  --dd-sky-top: #0b1122;
  --dd-sky-mid: #16203a;
  --dd-sky-low: #33456d;
  --dd-star: #e8f0ff;
  --dd-mist: #9bb3d6;
  --dd-sea-far: #2b3d66;
  --dd-sea-near: #141e38;
  --dd-swell: #8aa3d8;
  --dd-foam: #e6eeff;
  --dd-moonlight: #fff6e3;
  --dd-wet-hi: #3e4c78;
  --dd-wet-lo: #283258;
  --dd-sand-hi: #4f5a8a;
  --dd-sand-lo: #262c4c;
  --dd-sand-glint: #c9d3ff;
  --dd-dune: #6f7cb4;
  --dd-shade: #05070f;
  --dd-deck: #8ea6cf;
  --dd-deck-hi: #eef6fd;
  --dd-deck-lo: #3a4a6e;
  --dd-post: #2e3851;
  --dd-post-hi: #a3b5d2;
  --dd-post-lo: #121929;
  --dd-kelp: #3f77a8;
  --dd-kelp-hi: #d6ecff;
  --dd-kelp-lo: #1d3a5e;
  --dd-bulb: #74ade0;
  --dd-kelp-glow: #a8d4ff;
  --dd-hint: #dcecff;
  --dd-field: #0d1326;
}
html[data-ground="paper"] {
  --puff-halo-on: 0;
  --puff-shadow-on: 1;
  --door-frost-hi: 46%;
  --door-frost-lo: 22%;
  --door-kid-glow: 26%;
  --door-glint: 20%;
  --door-dot: var(--glint);
  --door-plus: var(--door-day-deep);
  --door-ring: var(--lantern-deep);
}
html[data-ground="night"] {
  --door-frost-hi: 13%;
  --door-frost-lo: 5%;
  --door-kid-glow: 34%;
  --door-glint: 8%;
  --door-dot: var(--frost);
  --door-plus: var(--frost);
  --door-ring: var(--lantern);
}
[data-mood="paper"] {
  --field: #f3ecdf;
  --sky-dusk: #f5eee2;
  --sky-steel: #f0e8da;
  --sky-deep: #e3e6e3;
  --sky-top: #d3dee8;
  --paper-fibre: #a8957a;
  --paper-light: #fffaf0;
  --paper-shadow: #8a7fb0;
  --steel: #dde2e9;
  --steel-hi: #ffffff;
  --steel-lo: #b6c0cd;
  --frost: #d8e8f4;
  --frost-hi: #ffffff;
  --frost-lo: #a7c2d8;
  --slate: #c8cfdc;
  --slate-hi: #f5f7fb;
  --slate-lo: #97a4bb;
  --sky-moon: #f6f3ec;
  --sky-moon-hi: #ffffff;
  --sky-moon-lo: #c3c8d2;
  --sky-moon-halo: #ffffff;
  --star: #e0b25a;
  --glass: color-mix(in srgb, var(--glare) 52%, transparent);
  --glass-solid: #ece6db;
  --glass-tile-solid: #f8f5ef;
  --glass-rim: color-mix(in srgb, var(--glare) 95%, transparent);
  --glass-edge: color-mix(in srgb, var(--paper-fibre) 22%, transparent);
  --glass-glint: color-mix(in srgb, var(--foil-warm) 40%, transparent);
  --dock-ring: #5d6b85;
  --dock-glass: var(--glass);
  --moon: #5d6b85;
  --grain: 0.05;
}