:root{--font-sans: "Public Sans", "Inter", sans-serif;--color-baltic-blue-50: #edf2f8;--color-baltic-blue-100: #dbe4f0;--color-baltic-blue-200: #b7cae1;--color-baltic-blue-300: #92afd3;--color-baltic-blue-400: #6e95c4;--color-baltic-blue-500: #4a7ab5;--color-baltic-blue-600: #3b6291;--color-baltic-blue-700: #2c496d;--color-baltic-blue-800: #1e3148;--color-baltic-blue-900: #0f1824;--color-baltic-blue-950: #0a1119;--color-lavender-grey-50: #f1f1f3;--color-lavender-grey-100: #e3e4e8;--color-lavender-grey-200: #c7c8d1;--color-lavender-grey-300: #acadb9;--color-lavender-grey-400: #9092a2;--color-lavender-grey-500: #74768b;--color-lavender-grey-600: #5d5f6f;--color-lavender-grey-700: #464753;--color-lavender-grey-800: #2e2f38;--color-lavender-grey-900: #17181c;--color-lavender-grey-950: #101113;--color-night-bordeaux-50: #fce9ed;--color-night-bordeaux-100: #f9d2dc;--color-night-bordeaux-200: #f3a5b9;--color-night-bordeaux-300: #ed7895;--color-night-bordeaux-400: #e74b72;--color-night-bordeaux-500: #e01f4f;--color-night-bordeaux-600: #b4183f;--color-night-bordeaux-700: #87122f;--color-night-bordeaux-800: #5a0c20;--color-night-bordeaux-900: #2d0610;--color-night-bordeaux-950: #1f040b;--color-punch-red-50: #fde8ea;--color-punch-red-100: #fad1d5;--color-punch-red-200: #f5a3ab;--color-punch-red-300: #f07581;--color-punch-red-400: #ec4657;--color-punch-red-500: #e7182d;--color-punch-red-600: #b91324;--color-punch-red-700: #8a0f1b;--color-punch-red-800: #5c0a12;--color-punch-red-900: #2e0509;--color-punch-red-950: #200306}:root{--color-bg: var(--color-night-bordeaux-950);--color-surface: var(--color-night-bordeaux-900);--color-card: var(--color-night-bordeaux-900);--color-accent: var(--color-night-bordeaux-500);--color-accent-deep: var(--color-night-bordeaux-700);--color-accent-soft: var(--color-night-bordeaux-100);--color-text: var(--color-night-bordeaux-50);--color-muted: var(--color-night-bordeaux-700);--color-border: var(--color-night-bordeaux-800);--color-suit-ghost: var(--color-night-bordeaux-500)}.pal-spade{--color-bg: var(--color-baltic-blue-950);--color-surface: var(--color-baltic-blue-900);--color-card: var(--color-baltic-blue-800);--color-accent: var(--color-baltic-blue-500);--color-accent-deep: var(--color-baltic-blue-700);--color-accent-soft: var(--color-baltic-blue-100);--color-text: var(--color-lavender-grey-50);--color-muted: var(--color-lavender-grey-700);--color-border: var(--color-baltic-blue-800);--color-suit-ghost: var(--color-baltic-blue-500)}.pal-club{--color-bg: var(--color-lavender-grey-950);--color-surface: var(--color-lavender-grey-900);--color-card: var(--color-lavender-grey-800);--color-accent: var(--color-lavender-grey-500);--color-accent-deep: var(--color-lavender-grey-700);--color-accent-soft: var(--color-lavender-grey-100);--color-text: var(--color-lavender-grey-50);--color-muted: var(--color-lavender-grey-600);--color-border: var(--color-lavender-grey-800);--color-suit-ghost: var(--color-lavender-grey-500)}.pal-heart{--color-bg: var(--color-night-bordeaux-950);--color-surface: var(--color-night-bordeaux-900);--color-card: var(--color-night-bordeaux-900);--color-accent: var(--color-night-bordeaux-500);--color-accent-deep: var(--color-night-bordeaux-700);--color-accent-soft: var(--color-night-bordeaux-100);--color-text: var(--color-night-bordeaux-50);--color-muted: var(--color-night-bordeaux-700);--color-border: var(--color-night-bordeaux-800);--color-suit-ghost: var(--color-night-bordeaux-500)}.pal-diamond{--color-bg: var(--color-punch-red-950);--color-surface: var(--color-punch-red-900);--color-card: var(--color-punch-red-800);--color-accent: var(--color-punch-red-500);--color-accent-deep: var(--color-punch-red-700);--color-accent-soft: var(--color-punch-red-100);--color-text: var(--color-lavender-grey-50);--color-muted: var(--color-lavender-grey-600);--color-border: var(--color-punch-red-800);--color-suit-ghost: var(--color-punch-red-500)}.suit-red{color:var(--color-night-bordeaux-500)}.suit-black{color:var(--color-baltic-blue-500)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:"Inter",var(--font-sans),sans-serif}.app-root{min-height:100vh;padding:48px 24px 80px;background:var(--color-bg);color:var(--color-text);transition:background .25s ease,color .25s ease}.intro{max-width:680px;margin:0 auto 48px;text-align:center}.intro .eyebrow{color:var(--color-accent);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}.intro h1{font-family:"Space Grotesk",var(--font-sans),sans-serif;font-size:1.9rem;margin:0 0 12px}.intro p{color:var(--color-muted);font-size:.95rem;line-height:1.6;margin:0 0 24px}.palette-switcher{display:inline-flex;gap:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;padding:6px}.palette-btn{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--color-muted);font-family:inherit;font-size:.8rem;font-weight:500;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}.palette-btn .suit{font-size:.95rem}.palette-btn:hover{color:var(--color-text)}.palette-btn.active{background:var(--color-accent);color:var(--color-bg)}.compare-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:48px}.compare-title{font-family:"Space Grotesk",var(--font-sans),sans-serif;font-size:1.1rem;margin:0 0 14px;color:var(--color-text)}.compare-frame{position:relative;width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--color-border);cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:none}.layer{position:absolute;inset:0;width:100%;height:100%}.layer-before{will-change:clip-path}.mock-frame{width:100%;height:100%;overflow:hidden}.tag{position:absolute;top:12px;z-index:3;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:4px;pointer-events:none}.tag-before{left:12px;background:#0000008c;color:#f2b8a8}.tag-after{right:12px;background:var(--color-accent);color:var(--color-bg)}.divider{position:absolute;top:0;bottom:0;width:3px;background:#fff;transform:translate(-50%);z-index:2;pointer-events:none;box-shadow:0 0 0 1px #00000040}.handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#fff;color:#222;display:flex;align-items:center;justify-content:center;gap:2px;font-size:.6rem;box-shadow:0 2px 6px #0000004d;cursor:ew-resize;pointer-events:none}.handle.dragging{box-shadow:0 2px 10px #00000073;transform:translate(-50%,-50%) scale(1.08)}.handle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;pointer-events:auto}.bullets{margin:16px 0 0;padding-left:20px;color:var(--color-muted);font-size:.88rem;line-height:1.7}.bullets li{margin-bottom:4px}.app-footer{max-width:720px;margin:56px auto 0;text-align:center;color:var(--color-muted);font-size:.78rem}.before-skin{font-family:Arial,sans-serif;background:#f1f1f1;color:#101114}.sidebar-mock.before-skin{display:flex}.before-skin .b-side{width:130px;background:#2f2f2f;color:#ddd;padding:14px 10px;font-size:.72rem;flex-shrink:0}.before-skin .b-item{padding:8px 6px;margin-bottom:4px;background:#444;border-radius:2px}.before-skin .b-body{flex:1;padding:16px;background:#f1f1f1}.before-skin .b-placeholder-line{height:10px;background:#ddd;border-radius:2px;margin-bottom:10px}.stats-mock.before-skin{padding:16px}.before-skin .b-toprow{display:flex;gap:8px;margin-bottom:12px}.before-skin .b-stat{background:#ffe;border:2px solid #c9c;padding:10px;font-size:.72rem;flex:1;text-align:center;font-weight:700;color:#333}.before-skin .b-banner{background:#ff0;color:#900;padding:6px;font-size:.7rem;text-align:center;font-weight:700}.tasks-mock.before-skin{padding:14px}.before-skin .b-task{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #ccc;padding:8px 10px;margin-bottom:6px;font-size:.78rem}.before-skin .b-badge{padding:2px 6px;font-size:.65rem;border-radius:2px;color:#fff}.before-skin .b-badge.urgent{background:red}.before-skin .b-badge.ok{background:#0a0}.after-skin{font-family:"Inter",var(--font-sans),sans-serif;background:var(--color-surface);color:var(--color-text)}.sidebar-mock.after-skin{display:flex}.after-skin .a-side{width:150px;background:var(--color-bg);color:var(--color-muted);padding:20px 14px;font-size:.8rem;flex-shrink:0}.after-skin .a-logo{color:var(--color-text);font-weight:600;font-family:"Space Grotesk",var(--font-sans),sans-serif;margin-bottom:22px;font-size:.92rem}.after-skin .a-item{padding:7px 0}.after-skin .a-item.active{color:var(--color-accent);font-weight:600}.after-skin .a-body{flex:1;padding:20px}.after-skin .a-placeholder-line{height:10px;background:var(--color-card);border:1px solid var(--color-border);border-radius:3px;margin-bottom:10px}.stats-mock.after-skin{padding:18px;display:flex;align-items:center}.after-skin .a-toprow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.after-skin .a-stat{background:var(--color-card);border:1px solid var(--color-border);border-radius:8px;padding:14px 12px}.after-skin .a-num{font-family:"Space Grotesk",var(--font-sans),sans-serif;font-size:1.4rem;font-weight:700;color:var(--color-accent)}.after-skin .a-label{font-size:.72rem;color:var(--color-muted);margin-top:2px}.tasks-mock.after-skin{padding:16px}.after-skin .a-section-title{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);margin-bottom:10px}.after-skin .a-task{display:flex;justify-content:space-between;align-items:center;background:var(--color-card);border:1px solid var(--color-border);border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:.85rem}.after-skin .a-name{display:flex;align-items:center;gap:10px}.after-skin .a-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.after-skin .a-dot.urgent{background:var(--color-accent)}.after-skin .a-dot.done{background:var(--color-muted)}.after-skin .a-dot.normal{background:var(--color-accent-deep)}.after-skin .a-due{font-size:.75rem;color:var(--color-muted)}@media(max-width:640px){.intro h1{font-size:1.5rem}}