/*! Pane — a team workspace made of glass — © 2026 Hasib (OVERSHOOT). All rights reserved. Licensed, not sold: see LICENSE.md. */
:root {
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI",
    system-ui, sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI",
    system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-title: clamp(34px, 2.2vw + 14px, 58px);
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --gap: clamp(12px, 0.6vw + 8px, 20px);
  --gutter: clamp(14px, 1.4vw + 6px, 32px);
  --side-w: 252px;
  --frame: 1840px;
  --frame-left: max(14px, calc((100vw - var(--frame)) / 2 + 14px));
  --frame-right: max(
    var(--gutter),
    calc((100vw - var(--frame)) / 2 + var(--gutter))
  );
  --main-left: calc(var(--frame-left) + var(--side-w) + var(--gutter));
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.55, 1);
  --blue: #2f7cf6;
  --purple: #8b5cf6;
  --pink: #e9468f;
  --orange: #f2711c;
  --green: #22a559;
  --teal: #0ea5a4;
  --indigo: #5b5bd6;
  --yellow: #e3a008;
  --ring-tasks: #f0145a;
  --ring-focus: #2fbf4f;
  --ring-meet: #0aa6d8;
  --danger: #d92d3a;
}
[data-theme="light"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --bg: #e4e9f4;
  --text: #0f1017;
  --text-2: #161826b3;
  --text-3: #1618268f;
  --glass: rgb(255 255 255 / var(--glass-a, 0.32));
  --glass-chrome: rgb(255 255 255 / var(--chrome-a, 0.26));
  --glass-thick: #fafcffc2;
  --glass-solid: #f3f5fa;
  --blur: 12px;
  --blur-thick: 28px;
  --sat: 190%;
  --bright: 1.06;
  --rim-hi: #fff;
  --rim-mid: #ffffffc7;
  --rim-lo: #ffffff3d;
  --sheen: #ffffff57;
  --glint: #ffffff57;
  --ripple: #fffc;
  --depth:
    inset 0 1px 1px #ffffffe6, inset 0 -1px 1px #fff6,
    inset 3px 4px 12px -6px #ffffffd9, inset -4px -6px 14px -8px #ffffff8c,
    inset 0 -14px 26px -18px #14286e33;
  --shadow: 0 1px 2px #101e5a14, 0 22px 44px -22px #101e5a73;
  --shadow-lift: 0 2px 4px #141c4614, 0 26px 50px -20px #141c466b;
  --fill: #76768c21;
  --fill-2: #76768c38;
  --fill-hover: #76768c1a;
  --sep: #2828461f;
  --lens: linear-gradient(180deg, #fffffff2, #ffffff8c);
  --lens-glow:
    inset 0 1px 1px #fff, inset 0 -2px 5px #fff9, inset 0 0 0 0.5px #ffffffe6,
    0 8px 18px -8px #10286e66, 0 1px 2px #10286e24;
  --lens-ring: #ffffffe6;
  --av-ring: #ffffffe6;
  --well: #76768c24;
  --scrim: #14183229;
}
[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --bg: #0a0a0c;
  --text: #f5f5f7;
  --text-2: #ebebf5b3;
  --text-3: #ebebf58c;
  --glass: rgb(26 26 36 / var(--glass-a, 0.42));
  --glass-chrome: rgb(28 28 38 / var(--chrome-a, 0.36));
  --glass-thick: #1a1a1edb;
  --glass-solid: #1c1c20;
  --blur: 14px;
  --blur-thick: 30px;
  --sat: 175%;
  --bright: 0.95;
  --rim-hi: #ffffffd9;
  --rim-mid: #ffffff73;
  --rim-lo: #ffffff1f;
  --sheen: #ffffff1a;
  --glint: #ffffff21;
  --ripple: #ffffff80;
  --depth:
    inset 0 1px 1px #ffffff4d, inset 0 -1px 1px #ffffff1a,
    inset 3px 4px 12px -6px #ffffff3d, inset -4px -6px 14px -8px #ffffff1f,
    inset 0 -16px 28px -18px #00000073;
  --shadow: 0 1px 2px #0000004d, 0 24px 48px -22px #000000bf;
  --shadow-lift: 0 2px 6px #00000059, 0 28px 56px -20px #000c;
  --fill: #9696af29;
  --fill-2: #9696af42;
  --fill-hover: #9696af1f;
  --sep: #ffffff1a;
  --lens: linear-gradient(180deg, #ffffff4d, #ffffff1a);
  --lens-glow:
    inset 0 1px 1px #ffffff8c, inset 0 -2px 5px #ffffff1f,
    inset 0 0 0 0.5px #ffffff4d, 0 8px 18px -8px #0009;
  --lens-ring: #ffffff38;
  --av-ring: #1e202cf2;
  --well: #9696af29;
  --scrim: #0006;
  --blue: #4b8eff;
  --purple: #a07cff;
  --pink: #f2649f;
  --orange: #ff8a3d;
  --green: #34c46b;
  --teal: #22c3c0;
  --indigo: #7a7af0;
  --yellow: #f5b82e;
  --ring-tasks: #ff2d6f;
  --ring-focus: #4ade6b;
  --ring-meet: #22c3f0;
  --danger: #ff5a64;
}
[data-glass="clear"] {
  --glass-a: 0.14;
  --chrome-a: 0.12;
}
[data-glass="clear"][data-theme="dark"] {
  --glass-a: 0.2;
  --chrome-a: 0.18;
}
[data-accent="blue"] {
  --accent: #0a62d8;
  --accent-ink: #0a58c4;
}
[data-accent="purple"] {
  --accent: #7432e0;
  --accent-ink: #6a2bd0;
}
[data-accent="pink"] {
  --accent: #c8195f;
  --accent-ink: #b8175a;
}
[data-accent="orange"] {
  --accent: #b9440c;
  --accent-ink: #a83d0b;
}
[data-accent="green"] {
  --accent: #147a3a;
  --accent-ink: #116c33;
}
[data-accent="graphite"] {
  --accent: #2c2c33;
  --accent-ink: #1d1d22;
  --switch-on: #2fb350;
}
[data-theme="dark"][data-accent="blue"] {
  --accent: #1f6fe6;
  --accent-ink: #7db4ff;
}
[data-theme="dark"][data-accent="purple"] {
  --accent: #7b3ff0;
  --accent-ink: #c0a2ff;
}
[data-theme="dark"][data-accent="pink"] {
  --accent: #cf2068;
  --accent-ink: #ff8fbb;
}
[data-theme="dark"][data-accent="orange"] {
  --accent: #c4500f;
  --accent-ink: #ffad72;
}
[data-theme="dark"][data-accent="green"] {
  --accent: #167f3d;
  --accent-ink: #72dc98;
}
[data-theme="dark"][data-accent="graphite"] {
  --accent: #4a4a54;
  --accent-ink: #f4f4f7;
  --switch-on: #30c158;
}
[data-theme="light"] {
  --gel-hi: #ffffffb8;
  --gel-lo: #ffffff57;
  --gel-rim: #fff;
  --gel-under: #ffffff80;
  --gel-edge: #ffffffb3;
}
[data-theme="dark"] {
  --gel-hi: #fff3;
  --gel-lo: #ffffff12;
  --gel-rim: #fff6;
  --gel-under: #ffffff0f;
  --gel-edge: #ffffff29;
}
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
}
.hue--blue {
  --hue: var(--blue);
}
.hue--purple {
  --hue: var(--purple);
}
.hue--pink {
  --hue: var(--pink);
}
.hue--orange {
  --hue: var(--orange);
}
.hue--green {
  --hue: var(--green);
}
.hue--teal {
  --hue: var(--teal);
}
.hue--indigo {
  --hue: var(--indigo);
}
.hue--yellow {
  --hue: var(--yellow);
}
*,
:before,
:after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100dvh;
  font: 400 var(--fs-md) / 1.45 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  overflow-wrap: break-word;
  margin: 0;
}
img,
svg {
  display: block;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
kbd {
  font: 600 11.5px/1 var(--font);
  background: var(--fill);
  color: var(--text-2);
  border-radius: 7px;
  padding: 4px 6px;
}
mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 4px;
  padding: 0 1px;
}
:focus-visible {
  outline: 2.5px solid var(--accent-ink);
  outline-offset: 2px;
}
.sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 20px;
  height: 20px;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
.skip {
  z-index: 200;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  position: fixed;
  top: -60px;
  left: 16px;
}
.skip:focus {
  top: 16px;
}
.wall {
  z-index: -1;
  background: linear-gradient(135deg, var(--wbg1), var(--wbg2));
  contain: strict;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.wall__svg {
  width: 100%;
  height: 100%;
  display: block;
}
body {
  background: linear-gradient(135deg, var(--wbg1), var(--wbg2)) fixed;
}
[data-wall="ash"] {
  --wbg1: #e4e4e7;
  --wbg2: #e4e4e7;
  --wa1: #e4e4e7;
  --wa2: #e4e4e7;
  --wb1: #e4e4e7;
  --wb2: #e4e4e7;
  --wc1: #e4e4e7;
  --wc2: #e4e4e7;
  --wd1: #e4e4e7;
  --wd2: #e4e4e7;
  --wline: 0;
  --wbub: 0;
}
:is(
  [data-theme="dark"][data-wall="ash"],
  [data-theme="dark"] [data-wall="ash"]
) {
  --wbg1: #232428;
  --wbg2: #232428;
  --wa1: #232428;
  --wa2: #232428;
  --wb1: #232428;
  --wb2: #232428;
  --wc1: #232428;
  --wc2: #232428;
  --wd1: #232428;
  --wd2: #232428;
  --wline: 0;
  --wbub: 0;
}
[data-wall="sand"] {
  --wbg1: #f6e4d2;
  --wbg2: #f6e4d2;
  --wa1: #f6e4d2;
  --wa2: #f6e4d2;
  --wb1: #f6e4d2;
  --wb2: #f6e4d2;
  --wc1: #f6e4d2;
  --wc2: #f6e4d2;
  --wd1: #f6e4d2;
  --wd2: #f6e4d2;
  --wline: 0;
  --wbub: 0;
}
:is(
  [data-theme="dark"][data-wall="sand"],
  [data-theme="dark"] [data-wall="sand"]
) {
  --wbg1: #3a2a1e;
  --wbg2: #3a2a1e;
  --wa1: #3a2a1e;
  --wa2: #3a2a1e;
  --wb1: #3a2a1e;
  --wb2: #3a2a1e;
  --wc1: #3a2a1e;
  --wc2: #3a2a1e;
  --wd1: #3a2a1e;
  --wd2: #3a2a1e;
  --wline: 0;
  --wbub: 0;
}
[data-wall="sage"] {
  --wbg1: #dde9dc;
  --wbg2: #dde9dc;
  --wa1: #dde9dc;
  --wa2: #dde9dc;
  --wb1: #dde9dc;
  --wb2: #dde9dc;
  --wc1: #dde9dc;
  --wc2: #dde9dc;
  --wd1: #dde9dc;
  --wd2: #dde9dc;
  --wline: 0;
  --wbub: 0;
}
:is(
  [data-theme="dark"][data-wall="sage"],
  [data-theme="dark"] [data-wall="sage"]
) {
  --wbg1: #1f2c23;
  --wbg2: #1f2c23;
  --wa1: #1f2c23;
  --wa2: #1f2c23;
  --wb1: #1f2c23;
  --wb2: #1f2c23;
  --wc1: #1f2c23;
  --wc2: #1f2c23;
  --wd1: #1f2c23;
  --wd2: #1f2c23;
  --wline: 0;
  --wbub: 0;
}
[data-wall="aurora"] {
  --wbg1: #e6eaff;
  --wbg2: #d9dfff;
  --wa1: #b4c0ff;
  --wa2: #7186ee;
  --wb1: #a9b8ff;
  --wb2: #6a80ea;
  --wc1: #8d9ef5;
  --wc2: #5167d8;
  --wd1: #c6d0ff;
  --wd2: #8396f0;
}
:is(
  [data-theme="dark"][data-wall="aurora"],
  [data-theme="dark"] [data-wall="aurora"]
) {
  --wbg1: #090b1c;
  --wbg2: #0c0f24;
  --wa1: #2b3a8c;
  --wa2: #0f1438;
  --wb1: #283a8a;
  --wb2: #101740;
  --wc1: #1c2766;
  --wc2: #0b1030;
  --wd1: #34469e;
  --wd2: #121a48;
  --wline: 0.6;
  --wbub: 0.55;
}
[data-wall="smoke"] {
  --wbg1: #ececf0;
  --wbg2: #d3d3da;
  --wa1: #c6c7cf;
  --wa2: #8d8e99;
  --wb1: #dcdce2;
  --wb2: #9c9da8;
  --wc1: #a9aab4;
  --wc2: #6c6d78;
  --wd1: #f6f6f8;
  --wd2: #b3b4be;
}
:is(
  [data-theme="dark"][data-wall="smoke"],
  [data-theme="dark"] [data-wall="smoke"]
) {
  --wbg1: #070708;
  --wbg2: #0f0f12;
  --wa1: #33333a;
  --wa2: #0c0c0e;
  --wb1: #4a4a52;
  --wb2: #141417;
  --wc1: #24242a;
  --wc2: #060607;
  --wd1: #5c5c64;
  --wd2: #1a1a1e;
  --wline: 0.6;
  --wbub: 0.6;
}
[data-wall="tide"] {
  --wbg1: #bfe4ff;
  --wbg2: #d4d0ff;
  --wa1: #5aa9ff;
  --wa2: #2f63ee;
  --wb1: #3fd6e0;
  --wb2: #3a76fd;
  --wc1: #7a62ff;
  --wc2: #b56dff;
  --wd1: #86f2e2;
  --wd2: #27bfd6;
}
:is(
  [data-theme="dark"][data-wall="tide"],
  [data-theme="dark"] [data-wall="tide"]
) {
  --wbg1: #03112a;
  --wbg2: #0d0a2c;
  --wa1: #1d55dc;
  --wa2: #0a2a8c;
  --wb1: #0ba9bd;
  --wb2: #1b3cb0;
  --wc1: #4c33d8;
  --wc2: #7c2fc4;
  --wd1: #16c3b0;
  --wd2: #0b6c8c;
}
[data-wall="bloom"] {
  --wbg1: #ffdbe9;
  --wbg2: #d9dcff;
  --wa1: #7ea4ff;
  --wa2: #4d66ff;
  --wb1: #ff7eb3;
  --wb2: #ff9a62;
  --wc1: #a97cff;
  --wc2: #ff6aa6;
  --wd1: #ffc76b;
  --wd2: #ff8758;
}
:is(
  [data-theme="dark"][data-wall="bloom"],
  [data-theme="dark"] [data-wall="bloom"]
) {
  --wbg1: #130a2b;
  --wbg2: #2a0c22;
  --wa1: #2c46c8;
  --wa2: #17207a;
  --wb1: #c2306c;
  --wb2: #c4501f;
  --wc1: #5a2fd0;
  --wc2: #a3205e;
  --wd1: #d08a2a;
  --wd2: #a33f17;
}
[data-wall="ember"] {
  --wbg1: #ffe7d0;
  --wbg2: #ffd6d8;
  --wa1: #ff9a5a;
  --wa2: #ef5a26;
  --wb1: #ffc23d;
  --wb2: #ff7638;
  --wc1: #ff6f8e;
  --wc2: #e2436a;
  --wd1: #ffd57c;
  --wd2: #ffaa38;
}
:is(
  [data-theme="dark"][data-wall="ember"],
  [data-theme="dark"] [data-wall="ember"]
) {
  --wbg1: #200a04;
  --wbg2: #2a0a12;
  --wa1: #c4501a;
  --wa2: #7a220a;
  --wb1: #c98a12;
  --wb2: #b0421a;
  --wc1: #b8304e;
  --wc2: #7a1630;
  --wd1: #c4861f;
  --wd2: #8a4a0a;
}
[data-wall="grove"] {
  --wbg1: #ddf7e5;
  --wbg2: #d4f0f5;
  --wa1: #4fd18a;
  --wa2: #1c9f66;
  --wb1: #a6e35a;
  --wb2: #36c38a;
  --wc1: #2fb8b0;
  --wc2: #1b8ca6;
  --wd1: #d9ef6a;
  --wd2: #74d25a;
}
:is(
  [data-theme="dark"][data-wall="grove"],
  [data-theme="dark"] [data-wall="grove"]
) {
  --wbg1: #04170e;
  --wbg2: #041a1e;
  --wa1: #1c8f55;
  --wa2: #0b5232;
  --wb1: #5e9e1f;
  --wb2: #1c7a52;
  --wc1: #138a86;
  --wc2: #0b5a6e;
  --wd1: #8a9a1f;
  --wd2: #3f7a1c;
}
[data-wall="dusk"] {
  --wbg1: #e6e7ef;
  --wbg2: #eee3eb;
  --wa1: #9aa0bf;
  --wa2: #6c7396;
  --wb1: #c9a3c2;
  --wb2: #98799f;
  --wc1: #a89cd8;
  --wc2: #7a6eb7;
  --wd1: #e5caae;
  --wd2: #be9b80;
}
:is(
  [data-theme="dark"][data-wall="dusk"],
  [data-theme="dark"] [data-wall="dusk"]
) {
  --wbg1: #0f1016;
  --wbg2: #17121c;
  --wa1: #3d425e;
  --wa2: #22253a;
  --wb1: #5c3b58;
  --wb2: #3a2440;
  --wc1: #4a4180;
  --wc2: #2c2650;
  --wd1: #6a5440;
  --wd2: #3e3024;
}
.glass {
  background:
    radial-gradient(
      260px circle at var(--gx, -400px) var(--gy, -400px),
      var(--glint),
      transparent 70%
    ),
    linear-gradient(172deg, var(--sheen) 0%, transparent 34%), var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat))
    brightness(var(--bright));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat))
    brightness(var(--bright));
  box-shadow: var(--depth), var(--shadow);
  border-radius: var(--r-lg);
  position: relative;
}
.glass:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from 300deg,
    var(--rim-hi) 0deg,
    var(--rim-lo) 55deg,
    transparent 90deg,
    var(--rim-lo) 140deg,
    var(--rim-mid) 180deg,
    var(--rim-lo) 220deg,
    transparent 270deg,
    var(--rim-lo) 315deg,
    var(--rim-hi) 360deg
  );
  -webkit-mask-composite: xor;
  padding: 1.25px;
  position: absolute;
  inset: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}
.glass--chrome {
  --glass: var(--glass-chrome);
}
.glass--thick {
  --glass: var(--glass-thick);
  --blur: var(--blur-thick);
}
:root.is-solid {
  --glass: var(--glass-solid);
  --glass-chrome: var(--glass-solid);
  --glass-thick: var(--glass-solid);
}
.is-solid :is(.glass, .stat) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Performance Mode - Disable Liquid Heavy Rendering */
:root.no-liquid {
  --blur: 0px !important;
  --blur-thick: 0px !important;
  --sat: 100% !important;
  --bright: 100% !important;
  --glass: var(--glass-solid) !important;
  --glass-chrome: var(--glass-solid) !important;
  --glass-thick: var(--glass-solid) !important;
  --glint: transparent !important;
  --sheen: transparent !important;
}
:root.no-liquid :is(.glass, .stat, .pane, .modal, .island, .menu, .scrim, .tp, .toolbar, .tabbar, .side, .card, .mform, .seg, .dock) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
  background: var(--glass-solid) !important;
}
:root.no-liquid .glass:before {
  display: none !important;
}
:root.no-liquid .wall {
  background: #0b0c10 !important;
}
:root.no-liquid .wall svg,
:root.no-liquid .wall__svg {
  display: none !important;
}
:root[data-theme="light"].no-liquid .wall {
  background: #f1f2f6 !important;
}
:root.no-liquid .ripple-wrap,
:root.no-liquid .ripple {
  display: none !important;
}
:root.no-liquid * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.06s !important;
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--glass-solid);
    --glass-chrome: var(--glass-solid);
    --glass-thick: var(--glass-solid);
  }
  .glass,
  .stat {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .glass,
  .stat {
    background: var(--glass-solid);
  }
}
.ripple-wrap {
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ripple {
  pointer-events: none;
  background: radial-gradient(
    circle,
    transparent 38%,
    var(--ripple) 62%,
    transparent 72%
  );
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  position: absolute;
  top: 0;
  left: 0;
}
.app {
  min-height: 100dvh;
  overflow-x: clip;
}
html.js:not(.is-ready):not(.failsafe) :is(.side, .toolbar, .main, .tabbar) {
  visibility: hidden;
}
.side {
  z-index: 30;
  top: 14px;
  bottom: 14px;
  left: var(--frame-left);
  width: var(--side-w);
  border-radius: 32px;
  flex-direction: column;
  gap: 18px;
  padding: 18px 12px 12px;
  display: flex;
  position: fixed;
}
.brand {
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
  display: flex;
}
.brand__mark {
  color: #fff;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent) 70%, #fff),
    var(--accent)
  );
  width: 38px;
  height: 38px;
  box-shadow:
    inset 0 1px 0 #ffffff73,
    0 6px 14px -6px var(--accent);
  border-radius: 12px;
  place-items: center;
  display: grid;
}
.brand__mark svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
}
.brand__name {
  font: 700 21px/1 var(--font-display);
  letter-spacing: -0.02em;
}
.nav__track {
  flex-direction: column;
  gap: 2px;
  display: flex;
  position: relative;
}
.nav__lens {
  background: var(--lens);
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--lens-glow);
  position: absolute;
  top: 0;
  left: 0;
}
.nav__item {
  height: 44px;
  color: var(--text-2);
  transition: color 0.2s var(--ease);
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 560;
  display: flex;
  position: relative;
}
.nav__item:hover {
  color: var(--text);
}
.nav__item[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}
.nav__item[aria-current="page"] .ico {
  color: var(--accent-ink);
}
.nav__count {
  background: var(--fill);
  min-width: 24px;
  font: 650 12px/1.3 var(--font);
  text-align: center;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  margin-left: auto;
  padding: 2px 7px;
}
.nav__count:empty {
  display: none;
}
.side__group {
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  display: flex;
  overflow: auto;
}
.side__label {
  font: 650 12px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 0 14px 4px;
}
.pinned a {
  height: 38px;
  color: var(--text-2);
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  font-size: 14.5px;
  font-weight: 520;
  display: flex;
}
.pinned a:hover {
  background: var(--fill-hover);
  color: var(--text);
}
.pinned a[aria-current="page"] {
  background: var(--fill);
  color: var(--text);
}
.pinned i {
  background: var(--hue);
  border-radius: 4px;
  flex: none;
  width: 10px;
  height: 10px;
}
.pinned span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.side__me {
  text-align: left;
  border-radius: 20px;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 8px;
  display: flex;
}
.side__me:hover {
  background: var(--fill-hover);
}
.side__me img {
  object-fit: cover;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}
.side__me span {
  flex: 1;
  min-width: 0;
  display: grid;
}
.side__me b {
  font-size: 14.5px;
  font-weight: 600;
}
.side__me small {
  color: var(--text-2);
  font-size: 12.5px;
}
.toolbar {
  z-index: 25;
  top: 14px;
  left: var(--main-left);
  right: var(--frame-right);
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
  position: fixed;
}
.toolbar > * {
  pointer-events: auto;
}
.toolbar__title {
  height: 60px;
  font: 650 17px/1 var(--font-display);
  letter-spacing: -0.01em;
  border-radius: 999px;
  align-items: center;
  padding: 0 22px;
  display: none;
}
.toolbar__tools {
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  height: 60px;
  margin-left: auto;
  padding: 7px;
  display: flex;
}
.search-pill {
  background: var(--fill);
  width: clamp(240px, 22vw, 440px);
  height: 46px;
  color: var(--text-2);
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 16px;
  font-size: 15.5px;
  transition: background 0.2s;
  display: flex;
}
.search-pill:hover {
  background: var(--fill-2);
}
.search-pill span {
  text-align: left;
  flex: 1;
}
.tbtn {
  width: 46px;
  height: 46px;
  color: var(--text);
  border-radius: 50%;
  place-items: center;
  transition: background 0.2s;
  display: grid;
  position: relative;
}
.tbtn .ico {
  width: 22px;
  height: 22px;
}
.search-pill > .ico {
  width: 20px;
  height: 20px;
}
.tbtn:hover {
  background: var(--fill-hover);
}
.tbtn--me img {
  object-fit: cover;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}
.tbtn--me {
  display: none;
}
.badge-dot {
  background: var(--danger);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 2px var(--av-ring);
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 11px;
}
#btn-theme .ico--sun {
  display: none;
}
[data-theme="dark"] #btn-theme .ico--sun {
  display: block;
}
[data-theme="dark"] #btn-theme .ico--moon {
  display: none;
}
.main {
  padding: 88px var(--frame-right) 48px var(--main-left);
  min-height: 100dvh;
  position: relative;
}
.main:focus {
  outline: none;
}
.view {
  position: relative;
}
.view[hidden],
.tabbar {
  display: none;
}
.island {
  z-index: 95;
  pointer-events: none;
  width: min(440px, 100vw - 20px);
  height: 168px;
  margin-inline: auto;
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
}
.island__body {
  color: #fff;
  pointer-events: auto;
  opacity: 0;
  background: #000;
  position: absolute;
  inset: 0;
}
.island[data-mode="hidden"] .island__body {
  pointer-events: none;
}
.island__compact,
.island__note,
.island__full {
  align-items: center;
  margin-inline: auto;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.island__compact {
  color: #fff;
  text-align: left;
  gap: 8px;
  width: 204px;
  height: 38px;
  padding: 0 14px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.island__label {
  flex: 1;
}
.island.is-docked .island__compact {
  margin-left: 2px;
}
.island.is-narrow .island__label {
  visibility: hidden;
}
.island.is-narrow .island__compact {
  gap: 6px;
  padding-right: 12px;
}
.island__time {
  font-variant-numeric: tabular-nums;
  color: #ffb340;
  font-weight: 650;
}
.island.is-paused .island__time,
.island.is-paused .island__big {
  color: #fff9;
}
.island__ring svg {
  fill: none;
  stroke-width: 3px;
  stroke-linecap: round;
  transform: rotate(-90deg);
}
.island__ring .ring-track {
  stroke: #ffb34047;
}
.island__ring .ring-fill {
  stroke: #ffb340;
}
.island__note {
  gap: 12px;
  width: min(384px, 100%);
  height: 62px;
  padding: 0 12px;
}
.island__ico {
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}
.island__ico .ico {
  stroke-width: 2.2px;
  width: 19px;
  height: 19px;
}
.island__ico--ok {
  color: #00230b;
  background: #30d158;
}
.island__ico--info {
  color: #fff;
  background: #6e6af0;
}
.island__ico--warn {
  color: #2b1700;
  background: #ff9f0a;
}
.island__msg {
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 560;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
}
.island__undo {
  color: #fff;
  background: #ffffff2e;
  border-radius: 999px;
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
}
.island__undo:hover {
  background: #ffffff42;
}
.island__full {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: min(440px, 100%);
  height: 168px;
  padding: 20px 22px 18px;
}
.island__top {
  align-items: center;
  gap: 14px;
  display: flex;
}
.island__what {
  flex: 1;
  min-width: 0;
  display: grid;
}
.island__what small {
  color: #ffffff9e;
  font-size: 13px;
}
.island__task {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
}
.island__big {
  font: 600 40px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: #ffb340;
  font-variant-numeric: tabular-nums;
}
.island__ctrls {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}
.island__btn {
  color: #fff;
  background: #ffffff29;
  border-radius: 999px;
  height: 44px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 600;
}
.island__btn:hover {
  background: #ffffff3d;
}
.island__btn--round {
  color: #ffb340;
  background: #ffb3403d;
  place-items: center;
  width: 44px;
  padding: 0;
  display: grid;
}
.island__btn--stop {
  color: #ff6961;
  background: #ff453a3d;
}
.island :focus-visible {
  outline-color: #fff;
}
.btn {
  white-space: nowrap;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  display: inline-flex;
}
.btn .ico {
  stroke-width: 2.1px;
  width: 18px;
  height: 18px;
}
.btn--accent {
  color: #fff;
  background:
    linear-gradient(180deg, #ffffff57 0%, #ffffff1a 48%, transparent 52%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 82%, #fff),
      var(--accent) 70%
    );
  box-shadow:
    inset 0 1px 1px #fff9,
    inset 0 -2px 4px #00000024,
    inset 0 0 0 0.5px #ffffff40,
    0 10px 22px -10px var(--accent),
    0 1px 2px #0000001f;
  text-shadow: 0 1px 1px #0000002e;
  position: relative;
}
.btn--accent:hover {
  filter: brightness(1.06);
}
.btn--glass,
.ibtn--glass {
  color: var(--text);
  background: linear-gradient(180deg, var(--gel-hi), var(--gel-lo));
  box-shadow:
    inset 0 1px 1px var(--gel-rim),
    inset 0 -1px 2px var(--gel-under),
    inset 0 0 0 0.5px var(--gel-edge),
    0 4px 10px -6px #0a143c4d;
}
.btn--glass:hover,
.ibtn--glass:hover {
  background: linear-gradient(180deg, var(--gel-hi), var(--gel-hi));
}
.btn--ghost {
  color: var(--accent-ink);
}
.btn--ghost:hover {
  background: var(--accent-soft);
}
.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.ibtn {
  width: 40px;
  height: 40px;
  color: var(--text);
  border-radius: 50%;
  flex: none;
  place-items: center;
  transition: background 0.2s;
  display: inline-grid;
}
.ibtn:hover {
  background: var(--fill-hover);
}
.ibtn--sm {
  width: 32px;
  height: 32px;
}
.ibtn--sm .ico {
  width: 17px;
  height: 17px;
}
.seg {
  background: var(--fill);
  border-radius: 999px;
  flex: none;
  padding: 3px;
  display: inline-flex;
  position: relative;
}
.seg__pill {
  background: var(--lens);
  box-shadow: var(--lens-glow);
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.seg__btn {
  z-index: 1;
  height: 34px;
  color: var(--text-2);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s;
  display: inline-flex;
  position: relative;
}
.seg__btn[aria-pressed="true"] {
  color: var(--text);
}
.seg__btn .ico {
  width: 17px;
  height: 17px;
}
.seg--sm .seg__btn {
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}
.switch {
  appearance: none;
  cursor: pointer;
  background: var(--fill-2);
  width: 51px;
  height: 31px;
  transition: background 0.25s var(--ease);
  border-radius: 999px;
  flex: none;
  margin: 0;
  position: relative;
}
.switch:before {
  content: "";
  width: 27px;
  height: 27px;
  transition:
    transform 0.38s var(--spring),
    width 0.2s var(--ease);
  background: #fff;
  border-radius: 999px;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow:
    0 3px 8px #00000026,
    0 1px 1px #00000014;
}
.switch:checked {
  background: var(--switch-on, var(--accent));
}
.switch:checked:before {
  transform: translate(20px);
}
.switch:active:before {
  width: 33px;
}
.switch:checked:active:before {
  transform: translate(14px);
}
.check {
  appearance: none;
  cursor: pointer;
  border: 1.75px solid var(--text-3);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  transition:
    background 0.2s,
    border-color 0.2s;
  display: grid;
}
.check:after {
  content: "";
  width: 11px;
  height: 6px;
  transition: transform 0.35s var(--spring);
  border: 0 solid #fff;
  border-width: 0 0 2.2px 2.2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
}
.check:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.check:checked:after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.pchip {
  background: color-mix(in srgb, var(--hue) 16%, transparent);
  height: 24px;
  font: 600 12.5px/1 var(--font);
  color: var(--text);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 0 10px 0 8px;
  display: inline-flex;
}
.pchip__t {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}
.pchip i {
  background: var(--hue);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}
.picon {
  color: #fff;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--hue) 62%, #fff),
    var(--hue) 70%
  );
  box-shadow:
    inset 0 1px 0 #fff6,
    0 6px 14px -8px var(--hue);
  border-radius: 30%;
  flex: none;
  place-items: center;
  display: grid;
}
.picon .ico {
  stroke-width: 2px;
}
.picon--sm {
  width: 28px;
  height: 28px;
}
.picon--sm .ico {
  width: 16px;
  height: 16px;
}
.picon--md {
  width: 38px;
  height: 38px;
}
.picon--lg {
  border-radius: 18px;
  width: 56px;
  height: 56px;
}
.picon--lg .ico {
  width: 28px;
  height: 28px;
}
.hue--yellow.picon {
  color: #3a2800;
}
.prio {
  height: 22px;
  font: 650 12px/1 var(--font);
  white-space: nowrap;
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  display: inline-flex;
}
.prio .ico {
  stroke-width: 2.2px;
  width: 13px;
  height: 13px;
}
.prio--urgent {
  color: #b0202c;
  background: #d92d3a24;
}
.prio--high {
  color: #9a4208;
  background: #f2711c29;
}
.prio--medium {
  color: #1d55b8;
  background: #2f7cf624;
}
.prio--low {
  background: var(--fill);
  color: var(--text-2);
}
[data-theme="dark"] .prio--urgent {
  color: #ff8b92;
}
[data-theme="dark"] .prio--high {
  color: #ffb27a;
}
[data-theme="dark"] .prio--medium {
  color: #8fb8ff;
}
.delta {
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: 650;
}
.delta--up {
  color: #13803a;
}
.delta--down {
  color: #c02631;
}
.delta--plain {
  color: var(--text-2);
}
[data-theme="dark"] .delta--up {
  color: #5fd88a;
}
[data-theme="dark"] .delta--down {
  color: #ff8189;
}
.badge {
  background: var(--fill);
  height: 22px;
  font: 650 12px/1 var(--font);
  color: var(--text-2);
  border-radius: 999px;
  align-items: center;
  padding: 0 8px;
  display: inline-flex;
}
.av {
  object-fit: cover;
  background: var(--fill);
  border-radius: 50%;
  flex: none;
}
.av--xs {
  width: 22px;
  height: 22px;
}
.av--sm {
  width: 28px;
  height: 28px;
}
.av--md {
  width: 36px;
  height: 36px;
}
.av--lg {
  width: 48px;
  height: 48px;
}
.av--xl {
  width: 96px;
  height: 96px;
}
.av--ini {
  color: #fff;
  font: 650 13px/1 var(--font);
  letter-spacing: 0.02em;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--hue) 62%, #fff),
    var(--hue) 75%
  );
  place-items: center;
  display: inline-grid;
}
.av--xs.av--ini,
.av--sm.av--ini {
  font-size: 12px;
}
.av--lg.av--ini {
  font-size: 17px;
}
.av--xl.av--ini {
  font-size: 34px;
}
.av--more {
  font: 650 12px/1 var(--font);
  color: var(--text-2);
  background: var(--glass-solid);
  place-items: center;
  display: inline-grid;
}
.av-stack {
  align-items: center;
  display: inline-flex;
}
.av-stack > .av {
  box-shadow: 0 0 0 2px var(--av-ring);
}
.av-stack > .av + .av {
  margin-left: -8px;
}
.av-wrap {
  flex: none;
  display: inline-block;
  position: relative;
}
.av-wrap .presence {
  position: absolute;
  bottom: -1px;
  right: -1px;
}
.av-wrap--lg .presence {
  width: 13px;
  height: 13px;
}
.av-wrap--xl .presence {
  width: 20px;
  height: 20px;
  bottom: 4px;
  right: 4px;
}
.presence {
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 2px var(--av-ring);
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.presence--focus {
  background: #7d5cff;
}
.presence--meeting {
  background: #ff9f0a;
}
.presence--online {
  background: #30c45c;
}
.presence--away {
  background: #a4a6b4;
}
.presence-label {
  color: var(--text-2);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: inline-flex;
}
.presence-label .presence {
  box-shadow: none;
  width: 8px;
  height: 8px;
}
.head {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "lead actions" "stats stats";
  align-items: center;
  gap: clamp(14px, 1.2vw, 18px) clamp(16px, 2vw, 32px);
  margin: 0 0 clamp(18px, 1.6vw, 24px);
  display: grid;
}
.head:not(:has(.head__stats)) {
  grid-template-areas: "lead actions";
}
@media (width>=1360px) {
  :root {
    --tools-w: 340px;
  }
  .main {
    padding-top: 14px;
  }
  .head {
    grid-template-areas: "lead lead" "stats actions";
  }
  .head:not(:has(.head__stats)) {
    grid-template-areas: "lead lead" "actions actions";
  }
  .head:not(:has(.head__stats)) .head__actions {
    justify-content: flex-start;
  }
  .head:not(:has(.head__stats)):not(:has(.head__actions)) {
    grid-template-areas: "lead lead";
  }
  .head__lead {
    min-height: 60px;
    padding-right: calc(var(--tools-w) + 28px + var(--isl-w, 0px));
  }
  .island.is-right {
    left: auto;
    right: var(--frame-right);
    margin: 0;
    top: 86px;
  }
  .island.is-right :is(.island__compact, .island__note, .island__full) {
    margin: 0;
    left: auto;
    right: 0;
  }
}
.head__lead {
  grid-area: lead;
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}
.head__text {
  min-width: 0;
}
.head__back {
  flex: none;
}
.head__title {
  font: 700 var(--fs-title) / 1.02 var(--font-display);
  letter-spacing: -0.03em;
  outline: none;
}
.head__sub {
  color: var(--text-2);
  margin-top: 8px;
  font-size: clamp(14px, 0.3vw + 13px, 17px);
  font-weight: 500;
}
.head__stats {
  flex-wrap: wrap;
  grid-area: stats;
  gap: 10px;
  margin: 0;
  display: flex;
}
.stat {
  background: var(--glass);
  min-width: 112px;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow:
    var(--shadow),
    inset 0 1px 0 var(--rim-mid);
  border-radius: 18px;
  gap: 2px;
  padding: 10px 16px;
  display: grid;
  position: relative;
}
.stat__label {
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 560;
}
.stat__value {
  font: 700 23px/1.1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  margin: 0;
  display: flex;
}
.stat__value small {
  color: var(--text-2);
  margin-left: 3px;
  font-size: 14px;
  font-weight: 600;
}
.head__actions {
  flex-wrap: wrap;
  grid-area: actions;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}
.word {
  vertical-align: top;
  margin-bottom: -0.1em;
  padding-bottom: 0.1em;
  display: inline-block;
  overflow: hidden;
}
.ch {
  display: inline-block;
}
.card {
  border-radius: var(--r-xl);
  min-width: 0;
  padding: clamp(16px, 0.6vw + 12px, 22px);
}
.card__head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  display: flex;
}
.card__title {
  font: 650 var(--fs-lg) / 1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.card__sub {
  color: var(--text-2);
  margin-top: 2px;
  font-size: 13.5px;
}
.card__tools {
  flex: none;
  align-items: center;
  gap: 6px;
  display: flex;
}
.card.is-focus {
  z-index: 60;
  background: var(--glass-thick);
  position: fixed;
  inset: 9vh max(4vw, 24px);
  overflow: auto;
}
.card-ph {
  border-radius: var(--r-xl);
  border: 1.5px dashed var(--sep);
}
.scrim {
  z-index: 55;
  background: var(--scrim);
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
}
.row {
  align-items: center;
  gap: 12px;
  display: flex;
}
.muted {
  color: var(--text-2);
}
.list-sep > * + * {
  border-top: 1px solid var(--sep);
}
.field {
  gap: 6px;
  min-width: 0;
  display: grid;
}
.field--wide {
  grid-column: 1/-1;
}
.field__label {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}
.field__hint {
  color: var(--text-3);
  font-size: 12.5px;
}
.field input,
.field select,
.field textarea,
.input {
  background: var(--fill);
  width: 100%;
  min-height: 46px;
  color: var(--text);
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 16px;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.field textarea {
  resize: vertical;
  min-height: 92px;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  background: var(--fill-2);
  box-shadow: 0 0 0 2.5px var(--accent-ink);
  outline: none;
}
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, #0000 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, #0000 50%);
  background-position: calc(100% - 20px), calc(100% - 15px);
  background-repeat: no-repeat;
  background-size: 5px 5px;
  padding-right: 36px;
}
::placeholder {
  color: var(--text-3);
}
.pop-layer {
  z-index: 80;
  pointer-events: none;
  position: fixed;
  inset: 0;
}
.pop {
  pointer-events: auto;
  border-radius: 24px;
  min-width: 230px;
  max-width: min(400px, 100vw - 24px);
  max-height: min(70vh, 560px);
  padding: 8px;
  position: fixed;
  overflow: auto;
}
.pop--wide {
  width: min(400px, 100vw - 24px);
}
.pop__head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  display: flex;
}
.pop__title {
  font: 650 16px/1.2 var(--font-display);
}
.pop__row {
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  display: flex;
}
.pop__row:hover {
  background: var(--fill-hover);
}
.pop__row b {
  font-size: 14.5px;
  font-weight: 560;
  display: block;
}
.pop__row small {
  color: var(--text-2);
  margin-top: 2px;
  font-size: 12.5px;
  display: block;
}
.pop__row {
  position: relative;
}
.pop__row.is-unread:before {
  content: "";
  background: var(--accent-ink);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  position: absolute;
  top: 50%;
  left: 3px;
}
.pop__row.is-unread {
  padding-left: 16px;
}
.menu__item {
  text-align: left;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  display: flex;
}
.menu__item:hover,
.menu__item:focus-visible {
  background: var(--fill);
  outline: none;
}
.menu__item .ico {
  color: var(--text-2);
  width: 19px;
  height: 19px;
}
.menu__item.is-danger,
.menu__item.is-danger .ico {
  color: var(--danger);
}
.menu__check {
  color: var(--accent-ink) !important;
}
.pop hr {
  background: var(--sep);
  border: 0;
  height: 1px;
  margin: 6px 10px;
}
dialog {
  color: var(--text);
  border: 0;
  padding: 0;
}
dialog::backdrop {
  background: var(--scrim);
  animation: backdrop-in 0.28s var(--ease) both;
}
@keyframes backdrop-in {
  0% {
    opacity: 0;
  }
}
.modal {
  border-radius: 32px;
  width: min(580px, 100vw - 32px);
  max-height: calc(100dvh - 48px);
  position: fixed;
  overflow: auto;
}
.mform {
  padding: 16px 20px 22px;
}
.mform__head {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  display: grid;
}
.mform__titles {
  text-align: center;
  min-width: 0;
}
.mform__title {
  font: 650 18px/1.25 var(--font-display);
}
.mform__sub {
  color: var(--text-2);
  margin-top: 2px;
  font-size: 13.5px;
}
.mform__grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}
.mform__err {
  color: var(--danger);
  min-height: 1em;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 560;
}
.mform__err:empty,
.grabber {
  display: none;
}
.drawer {
  border-radius: 32px;
  width: min(480px, 100vw - 28px);
  height: auto;
  max-height: none;
  margin: 0;
  position: fixed;
  inset: 14px 14px 14px auto;
  overflow: auto;
}
.drawer__inner {
  padding: 22px;
  position: relative;
}
.drawer__close {
  z-index: 2;
  position: absolute;
  top: 14px;
  right: 14px;
}
.finder {
  background: 0 0;
  width: min(680px, 100vw - 32px);
  margin: 0 auto;
  position: fixed;
  top: 12vh;
  overflow: visible;
}
.finder::backdrop {
  background: var(--scrim);
  animation: backdrop-in 0.22s var(--ease) both;
}
.finder__bar {
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 18px 0 20px;
  display: flex;
}
.finder__bar .ico {
  width: 22px;
  height: 22px;
  color: var(--text-2);
}
.finder__bar input {
  letter-spacing: -0.01em;
  background: 0 0;
  border: 0;
  flex: 1;
  min-width: 0;
  height: 100%;
  font-size: 21px;
  font-weight: 500;
}
.finder__bar input:focus {
  outline: none;
}
.finder__list {
  border-radius: 28px;
  max-height: 58vh;
  margin-top: 10px;
  padding: 8px;
  overflow: auto;
}
.finder__list:empty {
  display: none;
}
.finder__group {
  font: 650 12px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 10px 12px 6px;
}
.finder__opt {
  cursor: pointer;
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  display: flex;
}
.finder__opt[aria-selected="true"] {
  background: var(--accent);
  color: #fff;
}
.finder__opt[aria-selected="true"] small,
.finder__opt[aria-selected="true"] .lead {
  color: #ffffffd1;
}
.finder__opt > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.finder__opt b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 560;
  display: block;
  overflow: hidden;
}
.finder__opt small {
  color: var(--text-2);
  font-size: 12.5px;
  display: block;
}
.finder__opt .lead {
  background: var(--fill);
  width: 36px;
  height: 36px;
  color: var(--text-2);
  border-radius: 11px;
  flex: none;
  place-items: center;
  display: grid;
}
.finder__opt .go {
  opacity: 0;
}
.finder__opt[aria-selected="true"] .go {
  opacity: 1;
}
.finder__opt mark {
  background: #ffffff47;
}
.chart {
  outline: none;
  position: relative;
}
.chart:focus-visible {
  outline: 2.5px solid var(--accent-ink);
  outline-offset: 4px;
  border-radius: 14px;
}
.chart__svg {
  overflow: visible;
}
.chart__grid line {
  stroke: var(--sep);
  stroke-dasharray: 3 5;
}
.chart__grid text,
.chart__x text {
  fill: var(--text-2);
  stroke: none;
  font-size: 12px;
  font-weight: 500;
}
.chart__line {
  fill: none;
  stroke-width: 2.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart__line.is-dashed {
  stroke-dasharray: 5 6;
  stroke-width: 2px;
}
.chart__line--accent {
  stroke: var(--accent-ink);
}
.chart__line--ink {
  stroke: var(--text);
}
.chart__line--muted {
  stroke: var(--text-3);
}
.chart__line--blue {
  stroke: var(--blue);
}
.chart__line--purple {
  stroke: var(--purple);
}
.chart__line--pink {
  stroke: var(--pink);
}
.chart__line--orange {
  stroke: var(--orange);
}
.chart__line--green {
  stroke: var(--green);
}
.chart__line--teal {
  stroke: var(--teal);
}
.chart__line--indigo {
  stroke: var(--indigo);
}
.chart__line--yellow {
  stroke: var(--yellow);
}
.chart__area {
  stroke: none;
}
.chart__stop0 {
  stop-color: var(--area, var(--accent));
  stop-opacity: 0.28;
}
.chart__stop1 {
  stop-color: var(--area, var(--accent));
  stop-opacity: 0;
}
.chart__cross {
  stroke: var(--text-3);
  stroke-width: 1px;
  opacity: 0;
}
.chart__dot {
  stroke: var(--glass-solid);
  stroke-width: 2.5px;
}
.chart__dot--accent {
  fill: var(--accent-ink);
}
.chart__dot--ink {
  fill: var(--text);
}
.chart__dot--muted {
  fill: var(--text-3);
}
.chart__dot--blue {
  fill: var(--blue);
}
.chart__dot--purple {
  fill: var(--purple);
}
.chart__dot--pink {
  fill: var(--pink);
}
.chart__dot--orange {
  fill: var(--orange);
}
.chart__dot--green {
  fill: var(--green);
}
.chart__dot--teal {
  fill: var(--teal);
}
.chart__dot--indigo {
  fill: var(--indigo);
}
.chart__dot--yellow {
  fill: var(--yellow);
}
.chart__tip {
  pointer-events: none;
  opacity: 0;
  background: var(--glass-solid);
  min-width: 150px;
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px var(--sep);
  border-radius: 14px;
  gap: 4px;
  padding: 10px 12px;
  font-size: 13px;
  transition: opacity 0.15s;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}
.chart__tip span {
  color: var(--text-2);
  align-items: center;
  gap: 6px;
  display: flex;
}
.chart__tip i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.chart__tip strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding-left: 10px;
}
.tone--accent {
  background: var(--accent-ink);
}
.tone--ink {
  background: var(--text);
}
.tone--muted {
  background: var(--text-3);
}
.tone--blue {
  background: var(--blue);
}
.tone--purple {
  background: var(--purple);
}
.tone--pink {
  background: var(--pink);
}
.tone--orange {
  background: var(--orange);
}
.tone--green {
  background: var(--green);
}
.tone--teal {
  background: var(--teal);
}
.tone--indigo {
  background: var(--indigo);
}
.tone--yellow {
  background: var(--yellow);
}
.bars {
  align-items: stretch;
  gap: clamp(6px, 0.6vw, 12px);
  height: 180px;
  display: flex;
}
.bars__col {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.bars__track {
  background: var(--well);
  border-radius: 12px;
  flex: 1;
  align-items: flex-end;
  display: flex;
  overflow: hidden;
}
.bars__bar {
  background: linear-gradient(180deg, #ffffff6b, #fff0 55%), var(--bar);
  width: 100%;
  min-height: 4px;
  box-shadow:
    inset 0 1px 1px #fff9,
    inset 0 -1px 2px #0000001f,
    0 8px 16px -10px var(--bar);
  border-radius: 12px;
  display: block;
}
.bars__bar--accent {
  --bar: var(--accent-ink);
}
.bars__bar--muted {
  --bar: var(--text-3);
}
.bars__bar--blue {
  --bar: var(--blue);
}
.bars__bar--purple {
  --bar: var(--purple);
}
.bars__bar--pink {
  --bar: var(--pink);
}
.bars__bar--orange {
  --bar: var(--orange);
}
.bars__bar--green {
  --bar: var(--green);
}
.bars__bar--teal {
  --bar: var(--teal);
}
.bars__bar--indigo {
  --bar: var(--indigo);
}
.bars__bar--yellow {
  --bar: var(--yellow);
}
.bars__col:not(.is-hi) .bars__bar {
  background: linear-gradient(180deg, #ffffff9e, #ffffff57), var(--bar);
}
[data-theme="dark"] .bars__col:not(.is-hi) .bars__bar {
  background: linear-gradient(180deg, #0000001a, #00000052), var(--bar);
}
.bars__lab {
  text-align: center;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 560;
}
.donut {
  aspect-ratio: 1;
  flex: none;
  width: 168px;
  position: relative;
}
.donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.donut__track {
  fill: none;
  stroke: var(--well);
  stroke-width: 16px;
}
.donut__arc {
  fill: none;
  stroke-width: 16px;
  stroke-linecap: round;
}
.tone-stroke--accent {
  stroke: var(--accent-ink);
}
.tone-stroke--muted {
  stroke: var(--text-3);
}
.tone-stroke--ink {
  stroke: var(--text);
}
.tone-stroke--blue {
  stroke: var(--blue);
}
.tone-stroke--purple {
  stroke: var(--purple);
}
.tone-stroke--pink {
  stroke: var(--pink);
}
.tone-stroke--orange {
  stroke: var(--orange);
}
.tone-stroke--green {
  stroke: var(--green);
}
.tone-stroke--teal {
  stroke: var(--teal);
}
.tone-stroke--indigo {
  stroke: var(--indigo);
}
.tone-stroke--yellow {
  stroke: var(--yellow);
}
.donut__mid {
  text-align: center;
  place-content: center;
  display: grid;
  position: absolute;
  inset: 0;
}
.donut__mid b {
  font: 700 24px/1.1 var(--font-display);
  letter-spacing: -0.02em;
}
.donut__mid span {
  color: var(--text-2);
  font-size: 12.5px;
}
.spark {
  overflow: visible;
}
.empty {
  text-align: center;
  color: var(--text-2);
  justify-items: center;
  gap: 6px;
  padding: 28px 16px;
  display: grid;
}
.empty .ico {
  width: 30px;
  height: 30px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.empty__title {
  color: var(--text);
  font-weight: 650;
}
.empty__text {
  font-size: 14px;
}
.float-up {
  z-index: 90;
  pointer-events: none;
  font: 700 15px/1 var(--font-display);
  color: var(--accent-ink);
  position: fixed;
}
.is-flash {
  animation: flash 1s var(--ease);
}
@keyframes flash {
  0% {
    color: var(--accent-ink);
  }
  to {
    color: inherit;
  }
}
@media (width<=1100px) {
  :root {
    --side-w: 76px;
  }
  .side {
    align-items: center;
    padding: 14px 10px;
  }
  .brand {
    padding: 0;
  }
  .brand__name,
  .nav__item span,
  .nav__count,
  .side__group,
  .side__me span,
  .side__me > .ico {
    display: none;
  }
  .nav__item {
    justify-content: center;
    width: 52px;
    height: 48px;
    padding: 0;
  }
  .nav__item .ico {
    width: 22px;
    height: 22px;
  }
  .side__me {
    padding: 6px;
  }
  .search-pill {
    background: 0 0;
    justify-content: center;
    width: 46px;
    padding: 0;
  }
  .search-pill span,
  .search-pill kbd {
    display: none;
  }
}
@media (height<=640px) and (width>=761px) {
  .side {
    gap: 8px;
  }
  .nav__item {
    height: 40px;
  }
  .side__group {
    display: none;
  }
}
@media (width<=760px) {
  .side {
    display: none;
  }
  .toolbar {
    top: calc(8px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
  }
  .toolbar__title {
    flex: 0 auto;
    min-width: 0;
    max-width: 50vw;
    height: 48px;
    padding: 0 18px;
    font-size: 17px;
    display: flex;
  }
  .toolbar__tools {
    flex: none;
  }
  .toolbar__title span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .toolbar__tools {
    height: 48px;
    padding: 4px;
  }
  .search-pill {
    display: none;
  }
  .tbtn--me {
    display: grid;
  }
  .main {
    padding: calc(74px + env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      calc(110px + env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }
  .island {
    top: calc(6px + env(safe-area-inset-top));
  }
  .tabbar {
    z-index: 30;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 10px;
    display: flex;
    position: fixed;
  }
  .tabbar__bar {
    border-radius: 999px;
    flex: 1;
    min-width: 0;
    height: 64px;
    padding: 4px;
  }
  .tabbar__track {
    height: 100%;
    display: flex;
    position: relative;
  }
  .tabbar__lens {
    background: var(--lens);
    box-shadow: var(--lens-glow);
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .tab {
    min-width: 0;
    color: var(--text-2);
    font: 600 11px/1 var(--font);
    border-radius: 999px;
    flex: 1;
    align-content: center;
    place-items: center;
    gap: 2px;
    display: grid;
    position: relative;
  }
  .tab .ico {
    width: 23px;
    height: 23px;
  }
  .tab[aria-current="page"] {
    color: var(--accent-ink);
  }
  .tabbar__search {
    width: 64px;
    height: 64px;
    color: var(--text);
    border-radius: 50%;
    flex: none;
    place-items: center;
    display: grid;
  }
  .head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "stats" "actions";
    gap: 12px;
  }
  .head:not(:has(.head__stats)) {
    grid-template-areas: "lead" "actions";
  }
  .head__actions {
    justify-content: flex-start;
  }
  .head__stats {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    display: grid;
  }
  .head__actions {
    width: 100%;
    margin-left: 0;
  }
  .mform__grid {
    grid-template-columns: 1fr;
  }
  .modal,
  .drawer {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 40px);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 30px 30px 0 0;
    margin: auto 0 0;
    inset: auto 0 0;
  }
  .grabber {
    background: var(--fill-2);
    border-radius: 999px;
    width: 40px;
    height: 5px;
    margin: 0 auto 10px;
    display: block;
  }
  .drawer__inner {
    padding: 12px 18px 24px;
  }
  .finder {
    top: calc(10px + env(safe-area-inset-top));
  }
  .finder__bar {
    height: 56px;
  }
  .finder__bar input {
    font-size: 18px;
  }
  .card.is-focus {
    inset: 70px 10px 96px;
  }
}
@media (width<=380px) {
  .tabbar__search {
    width: 56px;
    height: 56px;
  }
  .tabbar__bar {
    height: 58px;
  }
  .tab span {
    font-size: 10.5px;
  }
}
@media (width<=760px) and (orientation: landscape) and (height<=500px) {
  .side {
    scrollbar-width: none;
    top: max(10px, env(safe-area-inset-top));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    display: flex;
    overflow-y: auto;
  }
  .brand {
    display: none;
  }
  .nav__item {
    height: 38px;
  }
  .tabbar {
    display: none;
  }
  .toolbar {
    left: calc(max(10px, env(safe-area-inset-left)) + var(--side-w) + 12px);
    right: max(12px, env(safe-area-inset-right));
  }
  .main {
    padding: 70px max(14px, env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      calc(max(10px, env(safe-area-inset-left)) + var(--side-w) + 14px);
  }
  .tbtn--me {
    display: none;
  }
  .search-pill {
    background: 0 0;
    justify-content: center;
    width: 44px;
    padding: 0;
    display: flex;
  }
  .search-pill span,
  .search-pill kbd {
    display: none;
  }
}
@media (pointer: coarse) {
  .btn {
    height: 44px;
  }
  .btn--sm {
    height: 40px;
  }
  .btn--sm:after,
  .btn--ghost:after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .btn--sm,
  .btn--ghost {
    position: relative;
  }
  .ibtn {
    width: 44px;
    height: 44px;
  }
  .ibtn--sm {
    width: 40px;
    height: 40px;
  }
  .seg__btn {
    height: 40px;
  }
  .seg--sm .seg__btn {
    height: 36px;
  }
  .seg__btn:after {
    content: "";
    position: absolute;
    inset: -5px 0;
  }
  .check {
    width: 26px;
    height: 26px;
    position: relative;
  }
  .check:before {
    content: "";
    border-radius: 50%;
    position: absolute;
    inset: -9px;
  }
  .switch:after {
    content: "";
    position: absolute;
    inset: -7px -4px;
  }
  .menu__item {
    min-height: 46px;
  }
  .pop__row,
  .finder__opt {
    min-height: 52px;
  }
  .next__rest li button {
    min-height: 44px;
  }
  .tbtn {
    width: 44px;
    height: 44px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}
html {
  -webkit-tap-highlight-color: transparent;
}
.modal,
.drawer,
.pop,
.finder__list {
  overscroll-behavior: contain;
}
.tk-board,
.tk-bar__chips,
.tfilter-wrap,
.cal-wk__scroll,
.thru__table {
  overscroll-behavior-x: contain;
}
html:has(dialog[open]) {
  overflow: hidden;
}
@media (pointer: coarse) {
  .finder__bar kbd {
    display: none;
  }
}
@media (height<=440px) and (width>=761px) {
  .side {
    scrollbar-width: none;
    overflow-y: auto;
  }
  .brand {
    display: none;
  }
  .nav__item {
    height: 38px;
  }
}
@media (width<=760px) {
  .island-docked .toolbar__title {
    visibility: hidden;
  }
  .head__actions > .btn {
    flex: auto;
  }
  .head__stats:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .head__stats .stat {
    min-width: 0;
    padding: 10px 12px;
  }
  .stat__value {
    font-size: 21px;
  }
  .card__head {
    flex-wrap: wrap;
  }
  .card__tools {
    max-width: 100%;
    margin-left: auto;
  }
  .main {
    padding-bottom: calc(128px + env(safe-area-inset-bottom));
  }
}
@media (width<=374px) {
  .toolbar__tools #btn-theme {
    display: none;
  }
}
@media (width<=360px) {
  .head__stats:has(> :nth-child(3):last-child) .stat__label {
    font-size: 12px;
  }
  .stat__value {
    font-size: 19px;
  }
}
@media (hover: none) {
  .nav__item:hover,
  .pinned a:hover,
  .tbtn:hover,
  .ibtn:hover,
  .menu__item:hover,
  .pop__row:hover {
    background: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
.tp {
  gap: 18px;
  display: grid;
}
.tp__top {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-right: 48px;
  display: flex;
}
.tp__title {
  font: 700 clamp(22px, 1vw + 16px, 28px) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
  padding-right: 44px;
}
.tp__seg .seg {
  width: 100%;
  display: flex;
}
.tp__seg .seg__btn {
  flex: 1;
  justify-content: center;
  padding: 0 6px;
}
.tp__meta {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  display: grid;
}
.tp__meta > div {
  background: var(--fill);
  border-radius: 16px;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  display: grid;
}
.tp__meta dt {
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}
.tp__meta dd {
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-weight: 560;
  display: flex;
}
.tp__meta dd span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tp__meta dd .ico {
  color: var(--text-2);
  width: 18px;
  height: 18px;
}
.tp__meta a {
  color: var(--accent-ink);
  font-weight: 600;
}
.tp__block header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}
.tp__block h3 {
  font: 650 15px/1.2 var(--font-display);
}
.tp__subs {
  display: grid;
}
.tp-sub label {
  cursor: pointer;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  display: flex;
}
.tp-sub + .tp-sub {
  border-top: 1px solid var(--sep);
}
.tp-sub input:checked + span {
  color: var(--text-3);
  text-decoration: line-through;
}
.tp__add {
  gap: 8px;
  margin-top: 8px;
  display: flex;
}
.tp__add .input {
  border-radius: 999px;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 15px;
}
.tp__comments {
  gap: 12px;
  display: grid;
}
.tp-comment {
  gap: 10px;
  display: flex;
}
.tp-comment p {
  font-size: 14.5px;
}
.tp-comment small {
  color: var(--text-2);
  font-size: 12.5px;
}
.tp-none {
  color: var(--text-2);
  font-size: 14px;
}
.tp__foot {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  display: flex;
}
.tp__del {
  margin-left: auto;
}
.ep {
  gap: 16px;
  display: grid;
}
.ep__kind {
  height: 26px;
  font: 650 12.5px/1 var(--font);
  background: var(--fill);
  border-radius: 999px;
  justify-self: start;
  align-items: center;
  padding: 0 12px;
  display: inline-flex;
}
.ep__kind--meeting {
  background: #2f7cf629;
}
.ep__kind--review {
  background: #8b5cf629;
}
.ep__kind--deadline {
  background: #d92d3a24;
}
.ep__kind--focus {
  background: #7d5cff29;
}
.ep__kind--social {
  background: #f2711c29;
}
.keys {
  gap: 4px;
  margin: 16px 0 0;
  display: grid;
}
.keys > div {
  border-bottom: 1px solid var(--sep);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  display: flex;
}
.keys dd {
  gap: 4px;
  margin: 0;
  display: flex;
}
.feed {
  gap: 12px;
  display: grid;
}
.feed__item {
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  display: flex;
}
.feed__item small {
  color: var(--text-2);
  margin-top: 2px;
  font-size: 12.5px;
  display: block;
}
.lead {
  background: var(--fill);
  width: 36px;
  height: 36px;
  color: var(--text-2);
  border-radius: 11px;
  flex: none;
  place-items: center;
  display: grid;
}
@media (width<=480px) {
  .tp__meta {
    grid-template-columns: 1fr;
  }
}