:root{color-scheme:light dark;--color-bg: #fafafa;--color-text: #111111;--color-surface: #ffffff;--color-surface-hover: #f5f5f5;--color-surface-active: #f0f0f0;--color-border: #e7e7e7;--color-subtle-bg: #f0f0f0;--shadow-elev-1: 2px 2px 8px 2px rgba(0, 0, 0, .1);--shadow-elev-1-active: 1px 1px 5px 1px rgba(0, 0, 0, .2);--color-primary: rgb(75, 111, 255);--color-primary-hover: rgb(63, 95, 230);--color-on-primary: #ffffff;--color-accent: #4caf50;--color-accent-hover: #45a049;--color-on-accent: #ffffff;--color-muted-text: #666666;--color-scrim: rgba(0, 0, 0, .7)}@media (prefers-color-scheme: dark){:root{--color-bg: #121212;--color-text: #e6e6e6;--color-surface: #1e1e1e;--color-surface-hover: #232323;--color-surface-active: #262626;--color-border: #2f2f2f;--color-subtle-bg: #262626;--shadow-elev-1: 2px 2px 8px 2px rgba(0, 0, 0, .5);--shadow-elev-1-active: 1px 1px 5px 1px rgba(0, 0, 0, .6);--color-primary: rgb(88, 129, 255);--color-primary-hover: rgb(102, 141, 255);--color-on-primary: #ffffff;--color-accent: #69c77a;--color-accent-hover: #5ab86b;--color-on-accent: #111111;--color-muted-text: #aaaaaa;--color-scrim: rgba(0, 0, 0, .6)}}*{font-family:sans-serif}button.btn--primary{background-color:var(--color-primary);color:var(--color-on-primary);border-color:transparent}button.btn--primary:hover{background-color:var(--color-primary-hover)}button.btn--accent{background-color:var(--color-accent);color:var(--color-on-accent);border-color:transparent}button.btn--accent:hover{background-color:var(--color-accent-hover)}button.btn--subtle{background-color:var(--color-subtle-bg);color:var(--color-text);border-color:var(--color-border)}button.btn--subtle:hover{background-color:var(--color-surface-hover)}.card-grid .card-item.add-card{background-color:var(--color-subtle-bg)}.card-grid .card-item.add-card .add-icon{font-size:2em;font-weight:700;color:var(--color-accent)}.card-grid .card-item.add-card:hover{background-color:var(--color-surface-hover)}html,body{background-color:var(--color-bg);color:var(--color-text)}button{display:flex;border:1px solid var(--color-border);box-shadow:var(--shadow-elev-1);border-radius:.25em;flex-direction:column;align-items:center;justify-content:space-around;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;margin:1em;padding:.5em;background-color:var(--color-surface)}button:hover{background-color:var(--color-surface-hover)}button:active{background-color:var(--color-surface-active);top:1px;left:1px;box-shadow:var(--shadow-elev-1-active)}.card-grid{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;overflow-y:auto;gap:1em;padding:1em}.card-item{display:flex;border:1px solid var(--color-border);box-shadow:var(--shadow-elev-1);border-radius:.25em;width:10em;height:10em;flex-direction:column;align-items:center;justify-content:space-around;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;background-color:var(--color-surface);transition:all .2s ease}.card-item:hover{background-color:var(--color-surface-hover)}.card-item:active{background-color:var(--color-surface-active);top:1px;left:1px;box-shadow:var(--shadow-elev-1-active)}.card-item .title{font-size:1.1em;font-weight:700;text-align:center;padding:0 .5em}.card-item .subtitle{font-family:monospace;background-color:var(--color-subtle-bg);padding:2px 8px;border-radius:3px;font-size:.9em;margin-top:.5em}