✨ Corner Radius ✨ Theme + Claude Skills

[Sherman]

Hi everyone!

With the latest update, the new text colors were not really for me so I started touching at the custom CSS and had a lot of fun!
These are just tiny tweaks most of the theme remains untouched, but makes it feel a little more premium.

Here is the custom.css:

/* ================================================
   ANYTYPE CUSTOM CSS
   Design System
   ================================================

   STRUCTURE:
   1. Design Tokens (edit here — applies everywhere)
   2. Tag & Property Pills
   3. Task Checkboxes
   4. Kanban Board
   5. Link Cards

   HOW TO EDIT COLORS:
   - Text colors → Section 1, --color-* variables
   - Tag opacity → Section 1, --tag-* variables
   - Kanban opacity → Section 1, --kanban-* variables
   - Per-color RGB values → Section 1, --rgb-* variables
   ================================================ */

/* ================================================
   1. DESIGN TOKENS
   ================================================ */

:root {
    /* ── Color palette (RGB for opacity flexibility) ── */
    --rgb-yellow: 223, 171, 1;
    --rgb-orange: 217, 115, 13;
    --rgb-red: 224, 62, 62;
    --rgb-pink: 173, 26, 114;
    --rgb-purple: 105, 64, 165;
    --rgb-blue: 82, 156, 202; /* note: bgColor-blue uses ice RGB */
    --rgb-ice: 82, 156, 202;
    --rgb-teal: 15, 123, 108;
    --rgb-lime: 68, 131, 97;
    --rgb-green: 68, 131, 97;
    --rgb-grey: 100, 100, 100;

    /* ── Notion-matched named text colors ── */
    --color-yellow: #dfab01;
    --color-orange: #d9730d;
    --color-red: #e03e3e;
    --color-pink: #ad1a72;
    --color-purple: #6940a5;
    --color-blue: #0b6e99;
    --color-ice: #529cca;
    --color-teal: #0f7b6c;
    --color-lime: #448361;
    --color-green: #448361;

    /* ── Tag pill opacities ── */
    --tag-bg: 0.15; /* tag background */

    /* ── Kanban opacities ── */
    --kb-border: 0.3; /* card border */
    --kb-hover: 0.15; /* card hover background */
    --kb-btn-border: 0.45; /* add button border */
    --kb-btn-color: 0.8; /* add button text/icon */
    --kb-btn-hover: 0.08; /* add button hover background */
}

html.themeDark {
    /* ── Lighter text colors for dark backgrounds ── */
    --color-yellow: #ffd95e;
    --color-orange: #ff9637;
    --color-red: #ff5454;
    --color-pink: #e55899;
    --color-purple: #9a6dd7;
    --color-blue: #2eaadc;
    --color-ice: #72b9e8;
    --color-teal: #22c2a5;
    --color-lime: #5bbd87;
    --color-green: #5bbd87;

    /* ── Dark mode RGB overrides ── */
    --rgb-blue: 46, 170, 220;
    --rgb-ice: 114, 185, 232;
    --rgb-teal: 34, 194, 165;
    --rgb-lime: 91, 189, 135;
    --rgb-green: 91, 189, 135;

    /* ── Dark mode opacity adjustments ── */
    --tag-bg: 0.2;
    --kb-border: 0.15;
    --kb-hover: 0.1;
}

/* ================================================
   2. TAG & PROPERTY PILLS
   ================================================ */

/* Remove default border on all pills */
.tagItem {
    border: none !important;
}

/* Light mode — background tints */
.tagItem.bgColor-default {
    background-color: rgba(var(--rgb-grey), 0.1) !important;
}
.tagItem.bgColor-grey {
    background-color: rgba(142, 142, 142, var(--tag-bg)) !important;
}
.tagItem.bgColor-yellow {
    background-color: rgba(var(--rgb-yellow), var(--tag-bg)) !important;
}
.tagItem.bgColor-orange {
    background-color: rgba(var(--rgb-orange), var(--tag-bg)) !important;
}
.tagItem.bgColor-red {
    background-color: rgba(var(--rgb-red), var(--tag-bg)) !important;
}
.tagItem.bgColor-pink {
    background-color: rgba(var(--rgb-pink), var(--tag-bg)) !important;
}
.tagItem.bgColor-purple {
    background-color: rgba(var(--rgb-purple), var(--tag-bg)) !important;
}
.tagItem.bgColor-blue {
    background-color: rgba(11, 110, 153, var(--tag-bg)) !important;
}
.tagItem.bgColor-ice {
    background-color: rgba(var(--rgb-ice), var(--tag-bg)) !important;
}
.tagItem.bgColor-teal {
    background-color: rgba(var(--rgb-teal), var(--tag-bg)) !important;
}
.tagItem.bgColor-lime {
    background-color: rgba(var(--rgb-lime), var(--tag-bg)) !important;
}
.tagItem.bgColor-green {
    background-color: rgba(var(--rgb-green), var(--tag-bg)) !important;
}

/* Light mode — text colors */
.tagItem.textColor-default {
    color: var(--color-text-secondary) !important;
}
.tagItem.textColor-grey {
    color: #6b6b6b !important;
}
.tagItem.textColor-yellow {
    color: #7a5e00 !important;
}
.tagItem.textColor-orange {
    color: #a04f00 !important;
}
.tagItem.textColor-red {
    color: #b91c1c !important;
}
.tagItem.textColor-pink {
    color: #9a1060 !important;
}
.tagItem.textColor-purple {
    color: #5b2d9e !important;
}
.tagItem.textColor-blue {
    color: #095b80 !important;
}
.tagItem.textColor-ice {
    color: #1e6fa0 !important;
}
.tagItem.textColor-teal {
    color: #0a6356 !important;
}
.tagItem.textColor-lime {
    color: #2e6647 !important;
}
.tagItem.textColor-green {
    color: #2e6647 !important;
}

/* Dark mode — background tints (rgb values updated via tokens above) */
html.themeDark .tagItem.bgColor-default {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
html.themeDark .tagItem.bgColor-grey {
    background-color: rgba(150, 150, 150, var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-yellow {
    background-color: rgba(var(--rgb-yellow), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-orange {
    background-color: rgba(var(--rgb-orange), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-red {
    background-color: rgba(var(--rgb-red), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-pink {
    background-color: rgba(var(--rgb-pink), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-purple {
    background-color: rgba(var(--rgb-purple), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-blue {
    background-color: rgba(var(--rgb-blue), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-ice {
    background-color: rgba(var(--rgb-ice), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-teal {
    background-color: rgba(var(--rgb-teal), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-lime {
    background-color: rgba(var(--rgb-lime), var(--tag-bg)) !important;
}
html.themeDark .tagItem.bgColor-green {
    background-color: rgba(var(--rgb-green), var(--tag-bg)) !important;
}

/* Dark mode — text colors (pull from token system) */
html.themeDark .tagItem.textColor-default {
    color: var(--color-text-secondary) !important;
}
html.themeDark .tagItem.textColor-grey {
    color: #aaa !important;
}
html.themeDark .tagItem.textColor-yellow {
    color: var(--color-yellow) !important;
}
html.themeDark .tagItem.textColor-orange {
    color: var(--color-orange) !important;
}
html.themeDark .tagItem.textColor-red {
    color: var(--color-red) !important;
}
html.themeDark .tagItem.textColor-pink {
    color: var(--color-pink) !important;
}
html.themeDark .tagItem.textColor-purple {
    color: var(--color-purple) !important;
}
html.themeDark .tagItem.textColor-blue {
    color: var(--color-blue) !important;
}
html.themeDark .tagItem.textColor-ice {
    color: var(--color-ice) !important;
}
html.themeDark .tagItem.textColor-teal {
    color: var(--color-teal) !important;
}
html.themeDark .tagItem.textColor-lime {
    color: var(--color-lime) !important;
}
html.themeDark .tagItem.textColor-green {
    color: var(--color-green) !important;
}

/* ================================================
   3. TASK CHECKBOXES
   ================================================ */

/* Unchecked & hover — circle ring via SVG path override */
.iconObject.isTask .objectCheckbox0 svg path,
.iconObject.isTask .objectCheckbox1 svg path {
    d: path(
        "M10 2.5C14.1421 2.5 17.5 5.85786 17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5Z"
    );
    fill: none !important;
    stroke: var(--color-shape-primary) !important;
    stroke-width: 1.5px !important;
}

/* Checked — hide SVG, rebuild as CSS circle + checkmark */
.iconObject.isTask .objectCheckbox2 svg {
    display: none !important;
}

.iconObject.isTask .objectCheckbox2::before {
    content: "";
    position: absolute;
    inset: 3.75px; /* matches SVG's 2.5/20 padding ratio at 30px */
    background: var(--color-lime);
    border-radius: 50%;
}

.iconObject.isTask .objectCheckbox2::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -65%) rotate(45deg);
    width: 4px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* Smaller variant for inline queries (c20 = 20×20px container) */
.iconObject.c20.isTask .objectCheckbox2::before {
    inset: 2.25px;
}
.iconObject.c20.isTask .objectCheckbox2::after {
    width: 3px;
    height: 6px;
    border-width: 1.5px;
}

/* ================================================
   4. KANBAN BOARD
   ================================================ */

/* ── Column shell ── */
.blocks .block.blockDataview .viewContent.viewBoard .column {
    border-radius: 12px !important;
    overflow: hidden !important;
}
.blocks .block.blockDataview .viewContent.viewBoard .column .head {
    padding: 12px 12px 8px !important;
    background: transparent !important;
}
.blocks .block.blockDataview .viewContent.viewBoard .column .body {
    padding: 0 0 8px !important;
}
.blocks .block.blockDataview .viewContent.viewBoard .column .bg > .bgColor {
    border-radius: 0 0 12px 12px !important;
}

/* ── Cards — shared base ── */
.blocks .block.blockDataview .viewContent.viewBoard .card:not(.add) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 0 6px !important;
}
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .card:not(.add)
    .cardContent {
    box-shadow: none !important;
}

/* ── Add button — shared base ── */
.blocks .block.blockDataview .viewContent.viewBoard .card.add {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    margin: 0 0 6px !important;
    transition: background 0.15s ease !important;
}
.blocks .block.blockDataview .viewContent.viewBoard .card.add .icon.hasSvg {
    color: inherit !important;
}

/* ── Dark mode cards ── */
html.themeDark
    .blocks
    .block.blockDataview
    .viewContent.viewBoard
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}
html.themeDark
    .blocks
    .block.blockDataview
    .viewContent.viewBoard
    .card:not(.add):hover
    .cardContent {
    background: rgba(255, 255, 255, var(--kb-hover)) !important;
}

/*
   ── Per-column rules ──
   Shorthand: [scope] = .blocks .block.blockDataview .viewContent.viewBoard
   Each color block sets: card border | card hover | add button | add hover
*/

/* Scope alias for readability */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-ice)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-ice), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-ice)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-ice), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-ice)
    .card.add {
    border: 1px solid rgba(var(--rgb-ice), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-ice), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-ice)
    .card.add:hover {
    background: rgba(var(--rgb-ice), var(--kb-btn-hover)) !important;
}

/* orange */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-orange)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-orange), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-orange)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-orange), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-orange)
    .card.add {
    border: 1px solid rgba(var(--rgb-orange), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-orange), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-orange)
    .card.add:hover {
    background: rgba(var(--rgb-orange), var(--kb-btn-hover)) !important;
}

/* yellow */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-yellow)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-yellow), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-yellow)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-yellow), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-yellow)
    .card.add {
    border: 1px solid rgba(var(--rgb-yellow), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-yellow), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-yellow)
    .card.add:hover {
    background: rgba(var(--rgb-yellow), var(--kb-btn-hover)) !important;
}

/* red */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-red)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-red), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-red)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-red), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-red)
    .card.add {
    border: 1px solid rgba(var(--rgb-red), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-red), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-red)
    .card.add:hover {
    background: rgba(var(--rgb-red), var(--kb-btn-hover)) !important;
}

/* pink */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-pink)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-pink), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-pink)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-pink), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-pink)
    .card.add {
    border: 1px solid rgba(var(--rgb-pink), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-pink), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-pink)
    .card.add:hover {
    background: rgba(var(--rgb-pink), var(--kb-btn-hover)) !important;
}

/* purple */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-purple)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-purple), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-purple)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-purple), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-purple)
    .card.add {
    border: 1px solid rgba(var(--rgb-purple), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-purple), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-purple)
    .card.add:hover {
    background: rgba(var(--rgb-purple), var(--kb-btn-hover)) !important;
}

/* blue */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-blue)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-blue), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-blue)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-blue), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-blue)
    .card.add {
    border: 1px solid rgba(var(--rgb-blue), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-blue), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-blue)
    .card.add:hover {
    background: rgba(var(--rgb-blue), var(--kb-btn-hover)) !important;
}

/* teal */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-teal)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-teal), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-teal)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-teal), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-teal)
    .card.add {
    border: 1px solid rgba(var(--rgb-teal), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-teal), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-teal)
    .card.add:hover {
    background: rgba(var(--rgb-teal), var(--kb-btn-hover)) !important;
}

/* lime + green (same rgb) */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-lime)
    .card:not(.add)
    .cardContent,
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-green)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-lime), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-lime)
    .card:not(.add):hover
    .cardContent,
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-green)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-lime), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-lime)
    .card.add,
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-green)
    .card.add {
    border: 1px solid rgba(var(--rgb-lime), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-lime), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-lime)
    .card.add:hover,
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-green)
    .card.add:hover {
    background: rgba(var(--rgb-lime), var(--kb-btn-hover)) !important;
}

/* grey */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-grey)
    .card:not(.add)
    .cardContent {
    border: 1px solid rgba(var(--rgb-grey), var(--kb-border)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-grey)
    .card:not(.add):hover
    .cardContent {
    background: rgba(var(--rgb-grey), var(--kb-hover)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-grey)
    .card.add {
    border: 1px solid rgba(var(--rgb-grey), var(--kb-btn-border)) !important;
    color: rgba(var(--rgb-grey), var(--kb-btn-color)) !important;
}

.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .column:has(> .body > .bg > .bgColor.bgColor-grey)
    .card.add:hover {
    background: rgba(var(--rgb-grey), var(--kb-btn-hover)) !important;
}

/* ================================================
   5. LINK CARDS
   ================================================ */

.blocks .block.blockLink.card .linkCard,
.blocks .block.blockLink.card .linkCard .side.left {
    border-radius: 9999px !important;
}

/* Match sidebar element background instead of hard grey */
.blocks .block.blockLink.card .linkCard .sides.withBgColor .side.left {
    background: var(--color-shape-highlight-light) !important;
}

/* ================================================
   6. LIST VIEW — PILL HOVER
   ================================================ */

.blocks .block.blockDataview.isInline .viewContent.viewList .row:hover {
    border-radius: 9999px !important;
}

/* ================================================
   7. ANIMATIONS & TRANSITIONS
   ================================================ */

/* ── Global smooth transitions ─────────────────── */
/* Applied broadly but kept short so nothing feels slow */
.tagItem,
.card:not(.add),
.card.add,
.row,
.linkCard,
.blocks .block.blockLink {
    transition:
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease,
        opacity 200ms ease !important;
}

/* ── Kanban card lift on hover ──────────────────── */
/* Subtle upward shift + soft shadow — classic "pickable" feel */
.blocks
    .block.blockDataview
    .viewContent.viewBoard
    .card:not(.add):hover
    .cardContent {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Dark mode lift shadow */
html.themeDark
    .blocks
    .block.blockDataview
    .viewContent.viewBoard
    .card:not(.add):hover
    .cardContent {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ── Tag pill hover ─────────────────────────────── */
/* Very slight scale — gives pills a tactile, pressable feel */
.tagItem:hover {
    transform: scale(1.03);
    filter: brightness(0.95);
}

/* ── Link card hover lift ───────────────────────── */
.blocks .block.blockLink .linkCard {
    box-shadow: none !important;
}

.blocks .block.blockLink:hover .linkCard {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
}

html.themeDark .blocks .block.blockLink:hover .linkCard {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}

/* ── List row hover ─────────────────────────────── */
.blocks .block.blockDataview.isInline .viewContent.viewList .row {
    transition:
        background 180ms ease,
        border-radius 180ms ease !important;
}

/* ── Block entrance animation ───────────────────── */
@keyframes blockEntrance {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Exclude icon block and header to avoid stacking context issues */
.blocks .block:not(.blockIconPage):not(.blockHeader):not(.blockLayout) {
    animation: blockEntrance 200ms ease forwards;
}

/* ── Kanban card entrance ───────────────────────── */
/* Cards stagger slightly as columns load */
@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blocks .block.blockDataview .viewContent.viewBoard .card:not(.add) {
    animation: cardEntrance 220ms ease forwards;
}

/* ── Task checkbox — completion pulse ──────────── */
/* Small satisfying scale when checking a task */
@keyframes checkPulse {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

.iconObject.isTask .objectCheckbox2::before {
    animation: checkPulse 280ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Sidebar widget hover ───────────────────────── */
.widget .objectClickable {
    transition:
        background 180ms ease,
        transform 180ms ease !important;
}

.widget .objectClickable:hover {
    transform: translateX(2px);
}

/* ── Reduce motion — respect OS accessibility setting ── */
@media (prefers-reduced-motion: reduce) {
    *,
    .blocks .block,
    .blocks .block.blockDataview .viewContent.viewBoard .card:not(.add) {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Gallery card — no shadow at rest, lift on hover ── */
.blocks .block.blockDataview .viewContent.viewGallery .card {
    box-shadow: none !important;
    transition:
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease !important;
}

.blocks .block.blockDataview .viewContent.viewGallery .card:hover {
    background: var(--color-bg-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

html.themeDark
    .blocks
    .block.blockDataview
    .viewContent.viewGallery
    .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

Edit:

• Fixed animation that blocked the emoji picker from appearing.

I’m a complete monkey in terms of CSS code so I got some help from Claude, but made it a little organized so it is easy to edit. I’ve also created a Claude Skill that you can use to speed up its understanding of AnyType’s CSS. I will update both the theme and Claude Skill as I go since this is just a few tweaks for fun but would like to improve a lot more in the future (calendar look, more animations, more transitions etc…)

Biggest changes I’ve made:

• Kanban view: Modified to be closer to Notion, with a small scale effect on hover for the cards. Tags and property fields are now all pill shaped with a solid background for better readbility.

  

• Tasks: Now the checkbox is round, with a subtle animation when checked.

  

• Gallery View: Cards have no shadow, on hover the card scales up a little bit with a cast shadow.

  

• Links to object: The background grey is lighter, and are now pilled shape with the same hover effect as cards in gallery view.

  

• Text colors: Have been slightly tweaked. Mostly Yellow and Green as the previous version was a little sad. However not super happy with the green yet.
  

  

[Sherman]

Sorry I went over the character limit.
Here is the Claude Skill:

---
name: anytype-css
description: >
  Expert reference for writing, editing, and debugging custom CSS in AnyType desktop app.
  Use this skill whenever the user wants to customize AnyType's appearance, asks about
  AnyType CSS class names, wants to fix a styling issue in AnyType, requests new visual
  features via CSS, or shares a DevTools screenshot from AnyType. Also trigger when the
  user mentions AnyType theming, dark mode, kanban styling, tag colors, task checkboxes,
  or any UI element in AnyType they want to change visually. Even if they just say
  "can we change how X looks in AnyType", use this skill.
---

# AnyType Custom CSS — Complete Skill Reference

## How Custom CSS Works

AnyType is an **Electron app** (TypeScript + Vite, rendered in Chromium). The entire
UI is standard HTML/CSS — fully inspectable and overridable, just like a website.

### Enabling & Editing
| Action | Path |
|---|---|
| Enable | `Menu → File → Apply Custom CSS` |
| Edit file | `Menu → File → Open → Custom CSS` |
| Reload after saving | `Cmd/Ctrl + R` |

### File Location
| OS | Path |
|---|---|
| macOS | `~/Library/Application Support/anytype/` |
| Windows | `C:\Users\<username>\AppData\Local\Programs\anytype\` |
| Linux | `~/.config/anytype/` |

### Key Constraints
- CSS applies **per device only** — does not sync across machines
- Mobile apps do **not** support custom CSS
- Class names are **internal and unversioned** — updates can silently break rules
- Always use DevTools to inspect live class names before writing rules

---

## DevTools Workflow

AnyType exposes Chromium DevTools directly in the app.

1. Open DevTools via the icon in the upper-left of the window
2. Use the **element picker** (top-left of DevTools) to click any UI element
3. The **Styles panel** shows all rules applied — including file/line source
4. The **Computed tab** shows resolved values for variables
5. Force hover/focus states via the `:hov` button in the Styles panel
6. Edit values live in DevTools to test, then copy to `custom.css`

**Critical:** Always verify class names in DevTools. Never assume from documentation — class names change between versions.

---

## CSS Architecture

### Theme Selectors
```css
:root { }              /* Light mode — always applies */
html.themeDark { }     /* Dark mode only */
```

### CSS Variable System
All visual properties are driven by CSS custom properties on `:root`.
Override variables for the most stable, update-resistant theming.

#### Text Variables
| Variable | Role |
|---|---|
| `--color-text-primary` | Main body text |
| `--color-text-secondary` | Muted/secondary text |
| `--color-text-tertiary` | Placeholder/hint text |
| `--color-text-inversion` | Text on dark/accent backgrounds |

#### Background Variables
| Variable | Role |
|---|---|
| `--color-bg-primary` | Main page/canvas background |
| `--color-bg-loader` | Loading overlay |
| `--color-control-bg` | Input/button backgrounds |

#### Shape & Border Variables
| Variable | Role |
|---|---|
| `--color-shape-primary` | Primary borders/dividers |
| `--color-shape-secondary` | Secondary borders |
| `--color-shape-tertiary` | Tertiary outlines |
| `--color-shape-highlight-medium` | Hover highlights (medium) |
| `--color-shape-highlight-light` | Hover highlights (light) — used by sidebar elements |

#### Control Variables
| Variable | Role |
|---|---|
| `--color-control-accent` | Accent fills (buttons, focus rings) |
| `--color-control-active` | Active/selected controls |
| `--color-control-inactive` | Inactive controls |

#### System / Accent
| Variable | Role |
|---|---|
| `--color-system-accent-100` | Primary accent color |
| `--color-system-accent-50` | 50% tint of accent |
| `--color-system-accent-25` | 25% tint of accent |
| `--color-system-selection` | Text selection highlight |
| `--color-system-drop-zone` | Drag-and-drop zone |

#### Named Palette Colors
Used by inline text colors, tags, and block backgrounds:
```
--color-yellow  --color-orange  --color-red    --color-pink
--color-purple  --color-blue    --color-ice    --color-teal
--color-lime    --color-green
```
Also have light variants: `--color-light-grey`, `--color-light-orange`, etc.

---

## Terminology Notes (Post v0.48+)

| Old Term | New UI Label | CSS Class Still Uses |
|---|---|---|
| Relations | Properties | `relation` (e.g. `.icon.relation`) |
| Sets | Queries | — |
| Spaces | Channels (chat) / Spaces | — |

**Important:** The UI says "Properties" but CSS classes still say `relation`.
Always use what DevTools shows, not what the UI labels say.

---

## DOM Structure Map

### Layout Zones
| Selector | What It Targets |
|---|---|
| `.pageFlex` | Full outer page wrapper |
| `.sidebar` | Left sidebar panel |
| `.layoutEditor` | Main editor/content area |
| `.header` | Top bar of an open object |

### Block System
Every piece of content is a block. Structure:
```
.blocks
  └── .block                          ← generic block wrapper
        ├── .block.blockText          ← text block
        │     ├── .textTitle          ← page title
        │     ├── .textHeader1/2/3    ← headings
        │     ├── .textQuote          ← quote
        │     ├── .textCallout        ← callout box
        │     ├── .textBulleted       ← bullet list
        │     ├── .textNumbered       ← numbered list
        │     ├── .textToggle         ← toggle
        │     └── .textCheckbox       ← to-do
        ├── .block.blockHeader        ← page header (title + icon area)
        ├── .block.blockLink.card     ← link-to-object card
        ├── .block.blockDataview      ← inline query/database
        └── .wrapContent              ← inner content wrapper
```

### Tag & Property Pills
Real confirmed class names (verified via DevTools, v0.55+):
```
.tagItem                   ← pill container
  .textColor-{name}        ← text color modifier
  .bgColor-{name}          ← background color modifier
  .isSelect                ← single-select property
  .isMultiSelect           ← multi-select / tag
```

Color names: `default, grey, yellow, orange, red, pink, purple, blue, ice, teal, lime, green`

**Note:** `bgColor-blue` in Anytype renders with the same RGB as `bgColor-ice` visually
(both use the light blue). They are separate classes but share similar hue.

### Dataview (Queries/Sets)
```
.block.blockDataview
  └── .viewContent
        ├── .viewBoard          ← kanban view
        │     └── .columns
        │           └── .column.withColor
        │                 ├── .head           ← column header
        │                 ├── .body
        │                 │     └── .bg
        │                 │           └── .bgColor.bgColor-{name}  ← COLUMN COLOR — use this for :has()
        │                 └── .card           ← individual cards
        │                       ├── .isTask   ← task type
        │                       ├── .isPage   ← page type
        │                       ├── .add      ← "+ New" button
        │                       └── .cardContent  ← INNER container with border/bg
        ├── .viewGallery        ← gallery view
        │     └── .galleryWrap
        │           └── .card.isPage.small
        │                 └── .cardContent
        └── .viewList           ← list view
              └── .row
```

**Critical kanban selector pattern:**
```css
/* WRONG — matches any column containing a card with that tag color */
.column:has(.bgColor-orange)

/* CORRECT — only matches the column's own background color div */
.column:has(> .body > .bg > .bgColor.bgColor-orange)
```
This prevents tag pill colors on cards from incorrectly triggering column rules.

### Link Cards
```
.block.blockLink.card
  └── .focusable
        └── .linkCard
              └── .sides.withBgColor
                    └── .side.left.bgColor.bgColor-{name}
```
**Note:** `border-radius` must be applied at ALL levels of this hierarchy to work.
Each container clips its children independently.

### Task Checkboxes
Three state classes on `.iconObject.isTask`:
| Class | State |
|---|---|
| `.objectCheckbox0` | Unchecked (rest) |
| `.objectCheckbox1` | Hover |
| `.objectCheckbox2` | Checked/done |

Size variants: `.c20` (inline queries, 20×20px), `.c30` (title area, 30×30px), `.c44`, etc.

The checked state (`.objectCheckbox2`) draws both the filled circle **and** the
checkmark as a **single combined SVG path** — they cannot be targeted separately.

### Icons
Icons are SVG paths injected as `background-image` Base64 strings:
```css
/* Replace an icon */
.header .icon.relation {
    background-image: url(data:image/svg+xml;base64,...);
}

/* Recolor via mask (slight quality loss) */
.header .icon.relation {
    mask-image: url(data:image/svg+xml;base64,...);
    mask-repeat: no-repeat;
    background: #yourcolor;
}
```
SVG decode/encode: https://base64.guru/converter/decode/image/svg
SVG icon source: https://pictogrammers.com/libraries/

**v0.54+ note:** All property type icons were visually refreshed. Re-extract Base64
from DevTools if using hardcoded icon values from older themes.

---

## CSS Techniques & Known Behaviors

### SVG Path Override via CSS `d:` Property
Works in Chromium (AnyType's renderer). Allows replacing drawn shapes without
hiding/recreating elements:
```css
.iconObject.isTask .objectCheckbox0 svg path {
    d: path("M10 2.5C14.1421 2.5 ...");
    fill: none !important;
    stroke: var(--color-shape-primary) !important;
}
```
Use this to change checkbox shapes from rounded-square to circle.

### Why `border-radius` Doesn't Clip SVG Content
`border-radius` only clips the element's **background** — not SVG rendering inside it.
Use `clip-path: circle(50% at 50% 50%)` to clip SVG content.
However, `clip-path` on a child is blocked by `svg:not(:root) { overflow: hidden }`
from the browser's own user agent stylesheet. Apply `clip-path` to the **parent**
container instead, or use `d:` path override where possible.

### The `!important` Rule
AnyType's own styles often use high-specificity selectors. In custom CSS,
use `!important` liberally — the custom stylesheet loads last but specificity
can still lose without it.

### Nesting Multiple Containers
Many AnyType UI elements have multiple nested containers each with their own
`border-radius`, `background`, `border`, or `overflow: hidden`. When a visual
change doesn't work, check **all levels** of the hierarchy in DevTools and apply
the rule at every level.

Common multi-level targets:
- **Link cards**: `.focusable` → `.linkCard` → `.sides` → `.side.left`
- **Kanban columns**: `.column` → `.bg > .bgColor`
- **Dataview cards**: `.card` (outer) → `.cardContent` (inner — this is where border/bg lives)

---

## Color System Best Practices

Define RGB values separately from opacity to enable flexible `rgba()` usage:

```css
:root {
    /* RGB values — no alpha, for use with rgba() */
    --rgb-orange: 217, 115, 13;

    /* Named colors — full hex, for direct use */
    --color-orange: #d9730d;

    /* Opacity tokens — change one value, updates everywhere */
    --tag-bg: 0.15;
    --kb-border: 0.30;
    --kb-hover: 0.15;
}

/* Usage */
.tagItem.bgColor-orange {
    background-color: rgba(var(--rgb-orange), var(--tag-bg)) !important;
}
```

---

## Dark Mode Rules

### Double-definition Problem (Pre v0.55)
Anytype redeclared `.isMultiSelect.tagColor-*` inside `html.themeDark` with
hardcoded values, overriding custom CSS. Fixed in ~v0.55. On older builds,
duplicate all color overrides in both `:root` and `html.themeDark`.

### Pattern for Dark Mode
```css
/* Light mode default */
:root { --color-red: #e03e3e; }

/* Dark mode override — lighter for readability on dark bg */
html.themeDark { --color-red: #ff5454; }
```

---

## Animations & Transitions

### Global Transition Base
Apply smooth transitions to interactive elements:
```css
.tagItem, .card:not(.add), .card.add, .row, .linkCard, .blocks .block.blockLink {
    transition:
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease,
        opacity 200ms ease !important;
}
```

### Card Lift Pattern (Kanban + Gallery)
```css
.card:not(.add):hover .cardContent {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
```

### Block Entrance Animation
```css
@keyframes blockEntrance {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.blocks .block {
    animation: blockEntrance 200ms ease forwards;
}
```

### Accessibility — Always Include
```css
@media (prefers-reduced-motion: reduce) {
    *, .blocks .block, .card {
        animation: none !important;
        transition: none !important;
    }
}
```

---

## Known Issues & Workarounds

| Issue | Cause | Workaround |
|---|---|---|
| `border-radius` on task checkbox has no effect | SVG path draws its own shape | Override `d:` property or use `clip-path` on parent |
| `clip-path` on `.iconCheckbox` doesn't clip | `svg:not(:root) { overflow: hidden }` in browser UA stylesheet | Apply `clip-path` to parent `.iconObject.isTask` |
| Column color rules applying to wrong column | `:has(.bgColor-x)` matches tag pills on cards too | Use `> .body > .bg > .bgColor.bgColor-x` child combinator |
| Card hover not applying | Rules target `.card.isTask` but card is `.card.isPage` | Target `.card:not(.add)` to catch all card types |
| Dark mode tag colors not overriding | Pre-v0.55 dark mode redeclares tagColor selectors | Duplicate overrides in both `:root` and `html.themeDark` |
| Link card border-radius partially applying | Each nested container clips independently | Apply `border-radius` to ALL levels of the hierarchy |
| Icon recolor is blurry | `mask-image` technique has rendering limitations | Replace full SVG via Base64 `background-image` instead |
| Class names break after update | Internal class names have no public API contract | Re-inspect in DevTools after major updates |

---

## Version Notes

| Version | Change |
|---|---|
| v0.38.0 | Custom CSS introduced |
| v0.48.x | "Relations" renamed to "Properties" in UI (class names unchanged) |
| v0.54.0 | All property type icons visually refreshed; tab bar added; ToC panel added |
| v0.55.0 | Color palette updated (PR #2189); `.isMultiSelect.tagColor-*` dark mode fixed; tag color rules nested inside `.tagItem` |

---

## Community Resources

| Resource | Description |
|---|---|
| [Official Docs](https://doc.anytype.io/anytype-docs/advanced/feature-list-by-platform/custom-css) | LavaC's tutorial, officially hosted |
| [anytype-ts source](https://github.com/anyproto/anytype-ts) | Open source repo — browse `src/scss/` for real class names |
| [Dracula Theme](https://draculatheme.com/anytype) | Actively maintained dark theme, good real-world CSS reference |
| [pedro-hga/anytype-custom-themes](https://github.com/pedro-hga/anytype-custom-themes) | Multi-theme collection with clean token structure |
| [rose-pine/anytype](https://github.com/rose-pine/anytype) | Rosé Pine theme |
| [Community forum](https://community.anytype.io) | Bug reports, CSS structure threads, theme sharing |

---

## Complete Design System Template

The recommended structure for a production `custom.css`:

```css
/* ================================================
   ANYTYPE CUSTOM CSS — Design System
   ================================================
   1. Design Tokens     ← edit colors/opacities here
   2. Tag & Property Pills
   3. Task Checkboxes
   4. Kanban Board
   5. Link Cards
   6. List View
   7. Animations & Transitions
   ================================================ */

/* 1. TOKENS */
:root {
    /* RGB palette for rgba() usage */
    --rgb-yellow:  223, 171,   1;
    --rgb-orange:  217, 115,  13;
    --rgb-red:     224,  62,  62;
    --rgb-pink:    173,  26, 114;
    --rgb-purple:  105,  64, 165;
    --rgb-blue:     82, 156, 202;
    --rgb-ice:      82, 156, 202;
    --rgb-teal:     15, 123, 108;
    --rgb-lime:     68, 131,  97;
    --rgb-green:    68, 131,  97;
    --rgb-grey:    100, 100, 100;

    /* Named text colors — Notion-matched */
    --color-yellow: #dfab01;
    --color-orange: #d9730d;
    --color-red:    #e03e3e;
    --color-pink:   #ad1a72;
    --color-purple: #6940a5;
    --color-blue:   #0b6e99;
    --color-ice:    #529cca;
    --color-teal:   #0f7b6c;
    --color-lime:   #448361;
    --color-green:  #448361;

    /* Opacity tokens */
    --tag-bg:        0.15;
    --kb-border:     0.30;
    --kb-hover:      0.15;
    --kb-btn-border: 0.45;
    --kb-btn-color:  0.80;
    --kb-btn-hover:  0.08;
}

html.themeDark {
    --color-yellow: #ffd95e;
    --color-orange: #ff9637;
    --color-red:    #ff5454;
    --color-pink:   #e55899;
    --color-purple: #9a6dd7;
    --color-blue:   #2eaadc;
    --color-ice:    #72b9e8;
    --color-teal:   #22c2a5;
    --color-lime:   #5bbd87;
    --color-green:  #5bbd87;

    --rgb-blue:  46, 170, 220;
    --rgb-ice:  114, 185, 232;
    --rgb-teal:  34, 194, 165;
    --rgb-lime:  91, 189, 135;
    --rgb-green: 91, 189, 135;

    --tag-bg:    0.20;
    --kb-border: 0.15;
    --kb-hover:  0.10;
}
```

---

## Quick Reference Cheatsheet

```css
/* ── THEME ──────────────────────────────── */
:root { }                    /* light mode */
html.themeDark { }           /* dark mode */

/* ── KEY VARIABLES ──────────────────────── */
--color-text-primary         /* main text */
--color-bg-primary           /* page background */
--color-shape-primary        /* borders */
--color-shape-highlight-light /* sidebar hover bg */
--color-control-accent       /* accent color */
--color-system-selection     /* text selection */

/* ── LAYOUT ─────────────────────────────── */
.pageFlex                    /* full wrapper */
.sidebar                     /* left sidebar */
.layoutEditor                /* content area */
.header                      /* object top bar */

/* ── BLOCKS ─────────────────────────────── */
.blocks .block.blockText.textTitle
.blocks .block.blockText.textHeader1
.blocks .block.blockText.textCallout
.blocks .block.blockLink.card

/* ── TAGS ───────────────────────────────── */
.tagItem.bgColor-{name}      /* background */
.tagItem.textColor-{name}    /* text color */
/* names: grey yellow orange red pink purple blue ice teal lime green */

/* ── TASK CHECKBOXES ────────────────────── */
.iconObject.isTask .objectCheckbox0  /* unchecked */
.iconObject.isTask .objectCheckbox1  /* hover */
.iconObject.isTask .objectCheckbox2  /* checked */

/* ── KANBAN ─────────────────────────────── */
.viewBoard .column                          /* column */
.column:has(> .body > .bg > .bgColor.bgColor-{name})  /* per-color targeting */
.card:not(.add) .cardContent               /* card inner */
.card.add                                  /* + button */

/* ── DATAVIEW VIEWS ─────────────────────── */
.viewContent.viewBoard                     /* kanban */
.viewContent.viewGallery                   /* gallery */
.viewContent.viewList .row                 /* list */

/* ── RELOAD ─────────────────────────────── */
/* Cmd/Ctrl + R after saving custom.css */
```

[dzlg]

WoW! I really like the changes that you’ve made! Especially the rounded view of Objects in Kanban view was a nice touch.

And, I really appreciate you sharing the Claude Skill. I can’t believe how comprehensive it is . Hats of to you!

I also didn’t like the new colors at all and created my own color pallet to have a more robust and sharp, energetic colors! I will take inspiration from your custom CSS for sure. Thanks for sharing it!

[Sherman]

Awesome thank you so much, super happy you enjoyed it! I’ll keep updating the post as I update both the Claud Skills and the theme

[Curie]

Inspiring to see you just jumped in and tried out CSS , self-learning is so satisfying!