:root {
    --contour-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cpath d='M257 0L260 5 264 5 273 0M236 43L228 50 224 56 221 64 222 68 224 71 228 71 232 68 236 64 240 56 242 48 241 44 240 42 236 43M36 136L30 140 29 148 32 160 38 168 44 172 52 174 60 173 69 168 72 164 74 156 72 148 69 144 64 140 56 137 44 135 36 136M144 191L140 192 136 195 132 204 132 212 136 217 140 219 144 218 148 216 152 211 154 204 155 200 152 193 148 191 144 191M273 320L280 314 288 305 293 296 296 288 296 280 294 276 289 272 284 271 276 272 268 275 262 280 259 284 257 292 256 300 256 312 257 320M239 0L233 16 212 47 206 60 205 72 206 80 208 85 211 88 216 90 224 89 232 84 244 73 251 60 265 28 273 16 287 0M20 115L13 120 10 124 7 132 7 140 10 148 16 160 24 172 31 180 38 184 44 186 56 185 73 180 83 172 87 164 87 152 82 140 76 133 64 126 40 117 28 114 20 115M136 180L129 184 124 189 120 196 119 204 121 216 124 225 128 230 132 232 136 233 143 232 148 230 156 224 163 212 165 200 164 188 159 180 156 178 148 177 136 180M287 320L296 308 303 296 307 284 308 276 306 268 303 264 300 261 292 258 284 257 272 258 260 261 252 265 245 272 241 284 239 320M225 0L219 16 199 48 194 64 194 80 198 92 200 96 204 100 212 101 220 100 228 96 240 88 247 80 256 67 275 28 295 0M0 154L20 185 28 192 36 195 44 196 56 194 100 182 104 182 115 228 120 237 124 241 128 243 136 244 144 242 152 238 160 231 166 224 170 216 172 208 173 196 172 184 169 176 164 169 160 167 152 166 144 167 112 176 108 177 106 176 104 172 96 144 92 136 86 128 76 120 40 102 28 100 20 101 8 107 0 116M320 116L316 126 315 136 316 144 320 154M295 320L307 304 313 292 316 280 316 265 313 256 308 251 300 248 284 247 264 248 252 250 240 254 232 260 227 268 225 276 226 308 225 320M210 0L204 15 187 40 183 48 182 56 184 76 189 100 192 106 196 110 204 112 216 110 228 104 240 96 252 84 260 72 275 40 282 28 303 0M0 173L14 196 20 202 24 204 32 205 40 205 80 198 88 198 92 200 96 203 100 208 111 240 116 248 120 252 128 254 136 253 148 249 160 242 168 235 173 228 176 220 179 208 179 196 177 172 174 164 171 160 168 158 160 156 128 160 120 158 116 156 109 148 98 128 92 119 84 113 61 100 44 89 36 86 24 88 12 93 0 102M320 102L315 108 310 116 307 124 306 136 309 152 320 173M320 245L316 240 308 237 288 237 264 238 248 240 236 243 226 248 218 256 212 268 211 280 212 308 210 320M0 290L3 276 4 264 3 252 0 245M320 290L314 304 303 320M80 0L72 5 68 10 64 18 63 24 64 32 68 34 76 30 85 20 88 8 87 4 84 0M193 0L184 14 162 36 158 44 158 48 161 56 172 77 177 92 183 120 184 124 188 128 192 127 200 125 220 115 239 104 253 92 265 76 286 32 310 0M0 304L6 292 10 276 14 232 19 224 25 220 44 213 64 208 76 206 85 208 91 212 96 220 107 252 110 260 116 265 124 266 136 262 156 254 168 247 176 240 180 235 183 228 185 216 185 204 182 156 180 145 176 141 172 141 140 149 132 149 124 146 116 139 104 117 97 108 88 101 67 88 52 72 48 69 40 69 32 72 16 80 0 91M320 91L311 100 303 112 300 124 299 136 300 148 303 160 316 188 320 200M0 214L1 208 0 200M320 214L314 220 304 224 288 227 256 230 240 233 219 240 208 247 202 256 200 264 197 304 193 320M320 304L310 320M84 320L80 320M58 0L51 12 40 40 34 52 23 64 0 82M109 0L108 20 106 32 101 40 88 53 83 60 81 68 82 72 84 76 88 80 100 88 108 96 120 123 124 130 132 136 140 137 152 135 162 128 165 124 168 116 168 104 164 91 160 85 156 81 148 76 132 69 126 64 122 56 122 48 123 44 125 40 133 32 160 13 175 0M317 0L300 22 291 36 284 50 273 76 266 88 254 100 211 128 198 140 194 148 192 156 190 184 192 207 194 220 198 228 204 231 216 230 280 217 288 215 296 211 302 204 304 196 303 188 296 164 293 148 292 132 293 120 296 108 301 100 308 92 320 82M58 320L68 309 91 288 96 280 98 272 98 260 97 248 92 230 88 223 84 219 79 216 72 214 60 216 47 220 36 226 28 234 24 240 22 248 12 292 7 304 0 316M175 320L180 312 183 304 186 292 186 280 185 272 183 264 178 260 172 259 160 262 146 268 130 276 119 284 115 288 111 296 109 304 109 320M320 316L317 320M6 0L0 7M45 0L39 12 30 36 24 48 14 60 0 71M129 0L132 3 135 4 140 4 152 0M320 7L304 27 296 40 288 60 282 84 278 92 268 100 224 126 208 140 202 148 199 156 196 168 196 180 197 196 200 208 204 215 208 218 212 220 220 220 228 220 252 214 273 208 284 201 289 192 290 184 285 128 285 112 286 100 291 92 320 71M140 102L136 108 136 112 140 117 144 117 148 114 149 108 147 104 144 102 140 102M45 320L55 308 79 284 84 276 88 264 89 248 87 240 84 232 80 227 76 225 68 223 58 224 48 228 40 234 34 240 30 248 27 256 21 288 17 300 14 308 6 320M152 320L164 310 168 304 171 296 171 288 169 280 164 277 160 276 152 278 144 281 136 287 132 292 128 300 126 308 127 316 129 320M0 58L8 51 16 39 20 28 22 12 20 7 16 8 0 21M320 21L308 36 304 44 300 56 301 60 304 64 308 64 312 63 320 58M256 116L240 123 224 133 213 144 206 156 202 172 203 192 208 205 212 209 216 211 224 212 232 212 252 207 268 199 275 192 278 188 280 180 281 168 279 144 276 126 272 117 268 114 264 114 256 116M52 236L42 244 37 252 34 260 32 272 30 288 30 300 32 307 36 306 40 305 60 290 72 277 79 264 80 256 80 248 76 238 72 234 64 232 52 236M244 128L232 134 221 144 214 152 209 164 208 180 210 192 216 200 224 203 232 204 240 203 256 196 266 188 272 176 273 164 273 152 271 140 268 132 264 127 260 125 252 125 244 128M56 247L52 250 48 255 44 264 44 273 45 276 48 279 52 279 60 274 65 268 68 260 68 252 65 248 60 246 56 247M248 135L240 138 230 144 222 152 218 160 215 168 215 180 218 188 224 194 228 195 236 195 246 192 256 185 263 176 265 168 266 160 264 147 261 140 256 136 248 135' fill='none' stroke='black' stroke-opacity='1' stroke-linejoin='round'/%3E%3C/svg%3E");
    --contour-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cpath d='M257 0L260 5 264 5 273 0M236 43L228 50 224 56 221 64 222 68 224 71 228 71 232 68 236 64 240 56 242 48 241 44 240 42 236 43M36 136L30 140 29 148 32 160 38 168 44 172 52 174 60 173 69 168 72 164 74 156 72 148 69 144 64 140 56 137 44 135 36 136M144 191L140 192 136 195 132 204 132 212 136 217 140 219 144 218 148 216 152 211 154 204 155 200 152 193 148 191 144 191M273 320L280 314 288 305 293 296 296 288 296 280 294 276 289 272 284 271 276 272 268 275 262 280 259 284 257 292 256 300 256 312 257 320M239 0L233 16 212 47 206 60 205 72 206 80 208 85 211 88 216 90 224 89 232 84 244 73 251 60 265 28 273 16 287 0M20 115L13 120 10 124 7 132 7 140 10 148 16 160 24 172 31 180 38 184 44 186 56 185 73 180 83 172 87 164 87 152 82 140 76 133 64 126 40 117 28 114 20 115M136 180L129 184 124 189 120 196 119 204 121 216 124 225 128 230 132 232 136 233 143 232 148 230 156 224 163 212 165 200 164 188 159 180 156 178 148 177 136 180M287 320L296 308 303 296 307 284 308 276 306 268 303 264 300 261 292 258 284 257 272 258 260 261 252 265 245 272 241 284 239 320M225 0L219 16 199 48 194 64 194 80 198 92 200 96 204 100 212 101 220 100 228 96 240 88 247 80 256 67 275 28 295 0M0 154L20 185 28 192 36 195 44 196 56 194 100 182 104 182 115 228 120 237 124 241 128 243 136 244 144 242 152 238 160 231 166 224 170 216 172 208 173 196 172 184 169 176 164 169 160 167 152 166 144 167 112 176 108 177 106 176 104 172 96 144 92 136 86 128 76 120 40 102 28 100 20 101 8 107 0 116M320 116L316 126 315 136 316 144 320 154M295 320L307 304 313 292 316 280 316 265 313 256 308 251 300 248 284 247 264 248 252 250 240 254 232 260 227 268 225 276 226 308 225 320M210 0L204 15 187 40 183 48 182 56 184 76 189 100 192 106 196 110 204 112 216 110 228 104 240 96 252 84 260 72 275 40 282 28 303 0M0 173L14 196 20 202 24 204 32 205 40 205 80 198 88 198 92 200 96 203 100 208 111 240 116 248 120 252 128 254 136 253 148 249 160 242 168 235 173 228 176 220 179 208 179 196 177 172 174 164 171 160 168 158 160 156 128 160 120 158 116 156 109 148 98 128 92 119 84 113 61 100 44 89 36 86 24 88 12 93 0 102M320 102L315 108 310 116 307 124 306 136 309 152 320 173M320 245L316 240 308 237 288 237 264 238 248 240 236 243 226 248 218 256 212 268 211 280 212 308 210 320M0 290L3 276 4 264 3 252 0 245M320 290L314 304 303 320M80 0L72 5 68 10 64 18 63 24 64 32 68 34 76 30 85 20 88 8 87 4 84 0M193 0L184 14 162 36 158 44 158 48 161 56 172 77 177 92 183 120 184 124 188 128 192 127 200 125 220 115 239 104 253 92 265 76 286 32 310 0M0 304L6 292 10 276 14 232 19 224 25 220 44 213 64 208 76 206 85 208 91 212 96 220 107 252 110 260 116 265 124 266 136 262 156 254 168 247 176 240 180 235 183 228 185 216 185 204 182 156 180 145 176 141 172 141 140 149 132 149 124 146 116 139 104 117 97 108 88 101 67 88 52 72 48 69 40 69 32 72 16 80 0 91M320 91L311 100 303 112 300 124 299 136 300 148 303 160 316 188 320 200M0 214L1 208 0 200M320 214L314 220 304 224 288 227 256 230 240 233 219 240 208 247 202 256 200 264 197 304 193 320M320 304L310 320M84 320L80 320M58 0L51 12 40 40 34 52 23 64 0 82M109 0L108 20 106 32 101 40 88 53 83 60 81 68 82 72 84 76 88 80 100 88 108 96 120 123 124 130 132 136 140 137 152 135 162 128 165 124 168 116 168 104 164 91 160 85 156 81 148 76 132 69 126 64 122 56 122 48 123 44 125 40 133 32 160 13 175 0M317 0L300 22 291 36 284 50 273 76 266 88 254 100 211 128 198 140 194 148 192 156 190 184 192 207 194 220 198 228 204 231 216 230 280 217 288 215 296 211 302 204 304 196 303 188 296 164 293 148 292 132 293 120 296 108 301 100 308 92 320 82M58 320L68 309 91 288 96 280 98 272 98 260 97 248 92 230 88 223 84 219 79 216 72 214 60 216 47 220 36 226 28 234 24 240 22 248 12 292 7 304 0 316M175 320L180 312 183 304 186 292 186 280 185 272 183 264 178 260 172 259 160 262 146 268 130 276 119 284 115 288 111 296 109 304 109 320M320 316L317 320M6 0L0 7M45 0L39 12 30 36 24 48 14 60 0 71M129 0L132 3 135 4 140 4 152 0M320 7L304 27 296 40 288 60 282 84 278 92 268 100 224 126 208 140 202 148 199 156 196 168 196 180 197 196 200 208 204 215 208 218 212 220 220 220 228 220 252 214 273 208 284 201 289 192 290 184 285 128 285 112 286 100 291 92 320 71M140 102L136 108 136 112 140 117 144 117 148 114 149 108 147 104 144 102 140 102M45 320L55 308 79 284 84 276 88 264 89 248 87 240 84 232 80 227 76 225 68 223 58 224 48 228 40 234 34 240 30 248 27 256 21 288 17 300 14 308 6 320M152 320L164 310 168 304 171 296 171 288 169 280 164 277 160 276 152 278 144 281 136 287 132 292 128 300 126 308 127 316 129 320M0 58L8 51 16 39 20 28 22 12 20 7 16 8 0 21M320 21L308 36 304 44 300 56 301 60 304 64 308 64 312 63 320 58M256 116L240 123 224 133 213 144 206 156 202 172 203 192 208 205 212 209 216 211 224 212 232 212 252 207 268 199 275 192 278 188 280 180 281 168 279 144 276 126 272 117 268 114 264 114 256 116M52 236L42 244 37 252 34 260 32 272 30 288 30 300 32 307 36 306 40 305 60 290 72 277 79 264 80 256 80 248 76 238 72 234 64 232 52 236M244 128L232 134 221 144 214 152 209 164 208 180 210 192 216 200 224 203 232 204 240 203 256 196 266 188 272 176 273 164 273 152 271 140 268 132 264 127 260 125 252 125 244 128M56 247L52 250 48 255 44 264 44 273 45 276 48 279 52 279 60 274 65 268 68 260 68 252 65 248 60 246 56 247M248 135L240 138 230 144 222 152 218 160 215 168 215 180 218 188 224 194 228 195 236 195 246 192 256 185 263 176 265 168 266 160 264 147 261 140 256 136 248 135' fill='none' stroke='rgb%28120,134,150%29' stroke-opacity='.32' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-surface] {
    --surface-decor: none;
    --tile-bg: #ffffff;
    --tile-head-bg: initial;
    --tile-head-border: initial;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.95);
    --glass-shadow: 0 6px 20px rgba(16, 42, 67, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --ink-a: 1;
}

[data-surface="a"] {
    --surface-base: linear-gradient(160deg, #eaf3fa 0%, #f6f8fb 55%, #fbf6e6 100%);
    --insp-bg: #f6f8fb;
    --tile-border: #e3eaf2;
    --tile-shadow-solid: 0 1px 2px rgba(16, 42, 67, 0.05);
    --tile-shadow-raised: 0 1px 2px rgba(16, 42, 67, 0.06), 0 8px 22px rgba(16, 42, 67, 0.07);
}

[data-surface="b"] {
    --surface-base: #f4f7fa;
    --insp-bg: #f4f7fa;
    --surface-decor: radial-gradient(circle at 12% 18%, rgba(0, 136, 202, 0.2), transparent 45%),
        radial-gradient(circle at 88% 12%, rgba(20, 184, 166, 0.16), transparent 40%),
        radial-gradient(circle at 70% 95%, rgba(254, 234, 0, 0.22), transparent 45%);
    --tile-border: #e3eaf2;
    --tile-shadow-solid: 0 1px 2px rgba(16, 42, 67, 0.05);
    --tile-shadow-raised: 0 1px 2px rgba(16, 42, 67, 0.06), 0 8px 22px rgba(16, 42, 67, 0.07);
}

[data-surface="c"] {
    --surface-base: #f3f6f9;
    --insp-bg: #f3f6f9;
    --tile-border: #dce5ee;
    --tile-shadow-solid: 0 2px 6px rgba(16, 42, 67, 0.05);
    --tile-shadow-raised: 0 1px 2px rgba(16, 42, 67, 0.06), 0 8px 20px rgba(16, 42, 67, 0.07);
    --tile-head-bg: #eef6fc;
    --tile-head-border: #dce5ee;
}

[data-surface="d"] {
    --surface-base: #f7f5f0;
    --insp-bg: #f7f5f0;
    --tile-border: #e9e3d7;
    --tile-shadow-solid: 0 1px 2px rgba(60, 50, 30, 0.05);
    --tile-shadow-raised: 0 1px 3px rgba(60, 50, 30, 0.06), 0 10px 24px rgba(60, 50, 30, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-shadow: 0 6px 20px rgba(60, 50, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-surface="e"] {
    --surface-base: #eff1f3;
    --insp-bg: #eff1f3;
    --tile-border: #e0e5ea;
    --tile-shadow-solid: none;
    --tile-shadow-raised: 0 1px 2px rgba(16, 42, 67, 0.05), 0 4px 12px rgba(16, 42, 67, 0.05);
}

[data-surface="f"] {
    --surface-base: #f4f6f2;
    --insp-bg: #f4f6f2;
    --tile-border: #dfe6de;
    --tile-shadow-solid: 0 1px 2px rgba(40, 60, 50, 0.05);
    --tile-shadow-raised: 0 1px 3px rgba(40, 60, 50, 0.06), 0 10px 24px rgba(40, 60, 50, 0.05);
}

[data-surface="g"] {
    --surface-base: #f8fafc;
    --insp-bg: #f8fafc;
    --tile-border: #d6e4ee;
    --tile-shadow-solid: 0 1px 2px rgba(16, 42, 67, 0.05);
    --tile-shadow-raised: 0 1px 2px rgba(16, 42, 67, 0.06), 0 8px 20px rgba(16, 42, 67, 0.06);
}

[data-surface="h"] {
    --surface-base: #f2f5fa;
    --insp-bg: #f2f5fa;
    --surface-decor: radial-gradient(38% 46% at 18% 28%, rgba(0, 170, 211, 0.24), transparent 70%),
        radial-gradient(34% 42% at 82% 18%, rgba(124, 92, 255, 0.16), transparent 70%),
        radial-gradient(42% 48% at 72% 82%, rgba(20, 184, 166, 0.2), transparent 70%),
        radial-gradient(30% 38% at 24% 86%, rgba(255, 214, 0, 0.18), transparent 70%);
    --tile-border: #e1e8f1;
    --tile-shadow-solid: 0 1px 2px rgba(16, 42, 67, 0.05);
    --tile-shadow-raised: 0 1px 2px rgba(16, 42, 67, 0.06), 0 8px 22px rgba(16, 42, 67, 0.07);
}

:is([data-bs-theme="dark"] [data-surface], [data-bs-theme="dark"][data-surface]) {
    --tile-bg: #1f2429;
    --glass-bg: rgba(31, 36, 41, 0.68);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tile-shadow-solid: 0 1px 2px rgba(0, 0, 0, 0.3);
    --tile-shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.3);
    --ink-a: 0.6;
}

:is([data-bs-theme="dark"] [data-surface="a"], [data-bs-theme="dark"][data-surface="a"]) {
    --surface-base: linear-gradient(160deg, #0e1a24 0%, #14181d 55%, #1b1913 100%);
    --insp-bg: #14181d;
    --tile-border: #2a333d;
}

:is([data-bs-theme="dark"] [data-surface="b"], [data-bs-theme="dark"][data-surface="b"]) {
    --surface-base: #11161b;
    --insp-bg: #11161b;
    --surface-decor: radial-gradient(circle at 12% 18%, rgba(0, 136, 202, 0.24), transparent 45%),
        radial-gradient(circle at 88% 12%, rgba(20, 184, 166, 0.14), transparent 40%),
        radial-gradient(circle at 70% 95%, rgba(235, 215, 19, 0.1), transparent 45%);
    --tile-border: #2a333d;
}

:is([data-bs-theme="dark"] [data-surface="c"], [data-bs-theme="dark"][data-surface="c"]) {
    --surface-base: #12181e;
    --insp-bg: #12181e;
    --tile-border: #2b3641;
    --tile-head-bg: #1e2a34;
    --tile-head-border: #2b3641;
}

:is([data-bs-theme="dark"] [data-surface="d"], [data-bs-theme="dark"][data-surface="d"]) {
    --surface-base: #17171a;
    --insp-bg: #17171a;
    --tile-bg: #202226;
    --tile-border: #302f2c;
}

:is([data-bs-theme="dark"] [data-surface="e"], [data-bs-theme="dark"][data-surface="e"]) {
    --surface-base: #14181d;
    --insp-bg: #14181d;
    --tile-bg: #1d2228;
    --tile-border: #2a3139;
    --tile-shadow-solid: none;
}

:is([data-bs-theme="dark"] [data-surface="f"], [data-bs-theme="dark"][data-surface="f"]) {
    --surface-base: #121715;
    --insp-bg: #121715;
    --tile-bg: #1c2220;
    --tile-border: #2a3430;
}

:is([data-bs-theme="dark"] [data-surface="g"], [data-bs-theme="dark"][data-surface="g"]) {
    --surface-base: #10161c;
    --insp-bg: #10161c;
    --tile-bg: #1b2129;
    --tile-border: #29384a;
}

:is([data-bs-theme="dark"] [data-surface="h"], [data-bs-theme="dark"][data-surface="h"]) {
    --surface-base: #0f1318;
    --insp-bg: #0f1318;
    --surface-decor: radial-gradient(38% 46% at 18% 28%, rgba(0, 170, 211, 0.2), transparent 70%),
        radial-gradient(34% 42% at 82% 18%, rgba(124, 92, 255, 0.16), transparent 70%),
        radial-gradient(42% 48% at 72% 82%, rgba(20, 184, 166, 0.14), transparent 70%),
        radial-gradient(30% 38% at 24% 86%, rgba(235, 190, 0, 0.08), transparent 70%);
    --tile-border: #263040;
}

[data-bg="custom"] {
    --surface-base: var(--custom-bg);
    --insp-bg: var(--custom-bg);
}

:is([data-bs-theme="dark"] [data-bg="custom"], [data-bs-theme="dark"][data-bg="custom"]) {
    --surface-base: var(--custom-bg-d);
    --insp-bg: var(--custom-bg-d);
}

[data-pattern] {
    --pattern-image: none;
    --pattern-mask: none;
}

[data-pattern="dots"] {
    --ink: 60 72 88;
    --pattern-image: radial-gradient(rgb(var(--ink) / calc(0.32 * var(--ink-a))) 1px, transparent 1.4px) 0 0 / 14px 14px;
}

[data-pattern="hatch"] {
    --ink: 0 136 202;
    --pattern-image: repeating-linear-gradient(135deg, rgb(var(--ink) / calc(0.14 * var(--ink-a))) 0 1px, transparent 1px 9px);
}

[data-pattern="grid"] {
    --ink: 0 136 202;
    --pattern-image: linear-gradient(rgb(var(--ink) / calc(0.22 * var(--ink-a))) 1px, transparent 1px) -1px -1px / 50px 50px,
        linear-gradient(90deg, rgb(var(--ink) / calc(0.22 * var(--ink-a))) 1px, transparent 1px) -1px -1px / 50px 50px,
        linear-gradient(rgb(var(--ink) / calc(0.11 * var(--ink-a))) 1px, transparent 1px) -1px -1px / 10px 10px,
        linear-gradient(90deg, rgb(var(--ink) / calc(0.11 * var(--ink-a))) 1px, transparent 1px) -1px -1px / 10px 10px;
}

[data-pattern="contours"] {
    --ink: 52 84 104;
    --pattern-image: linear-gradient(rgb(var(--ink) / calc(0.4 * var(--ink-a))), rgb(var(--ink) / calc(0.4 * var(--ink-a))));
    --pattern-mask: var(--contour-mask) 0 0 / 320px 320px;
}

:is([data-bs-theme="dark"] [data-pattern="dots"], [data-bs-theme="dark"][data-pattern="dots"]) { --ink: 214 220 230; }
:is([data-bs-theme="dark"] [data-pattern="hatch"], [data-bs-theme="dark"][data-pattern="hatch"]) { --ink: 92 180 230; }
:is([data-bs-theme="dark"] [data-pattern="grid"], [data-bs-theme="dark"][data-pattern="grid"]) { --ink: 80 170 220; }
:is([data-bs-theme="dark"] [data-pattern="contours"], [data-bs-theme="dark"][data-pattern="contours"]) { --ink: 196 212 224; }

[data-tiles] {
    --card-bg: var(--tile-bg);
    --card-solid: var(--tile-bg);
    --card-border: 1px solid var(--tile-border);
    --card-shadow: var(--tile-shadow-raised);
}

[data-tiles="solid"] {
    --card-shadow: var(--tile-shadow-solid);
}

[data-tiles="glass"] {
    --card-bg: var(--glass-bg);
    --card-border: 1px solid var(--glass-border);
    --card-shadow: var(--glass-shadow);
}

:is(.column-chooser, .leave-guard, .address-suggestions, .searchable-select-menu, .date-presets-menu, .bell-panel, .demo-switch-panel) {
    --card-bg: var(--bs-body-bg);
    --card-solid: var(--bs-body-bg);
    --wpattern: none;
}

[data-accent="custom"] {
    --insp-primary: var(--accent-1);
    --insp-primary-dark: var(--accent-2);
    --insp-accent: var(--accent-link);
    --insp-link: var(--accent-link);
}

:is([data-bs-theme="dark"] [data-accent="custom"], [data-bs-theme="dark"][data-accent="custom"]) {
    --insp-primary: var(--accent-1-d);
    --insp-primary-dark: var(--accent-2-d);
    --insp-accent: var(--accent-link-d);
    --insp-link: var(--accent-link-d);
}

html[data-accent="custom"] .btn-action.primary {
    background: color-mix(in srgb, var(--insp-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--insp-primary) 45%, transparent);
}

    html[data-accent="custom"] .btn-action.primary:hover {
        background: color-mix(in srgb, var(--insp-primary) 22%, transparent);
    }

html[data-accent="custom"][data-bs-theme="dark"] .btn-action.primary,
html[data-accent="custom"][data-bs-theme="dark"] .btn-action.primary:hover {
    color: var(--insp-primary-dark);
    border-color: color-mix(in srgb, var(--insp-primary) 55%, transparent);
}

html[data-surface] {
    background: var(--surface-base) fixed;
}

    html[data-surface] body {
        background: transparent;
    }

        html[data-surface] body::before,
        html[data-surface]:not([data-pattern="none"]) body::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
        }

        html[data-surface] body::before {
            background: var(--surface-decor);
        }

        html[data-surface]:not([data-pattern="none"]) body::after {
            background: var(--pattern-image);
            -webkit-mask: var(--pattern-mask);
            mask: var(--pattern-mask);
            opacity: var(--pattern-k, 0.5);
        }

html[data-surface="h"] body::before {
    inset: -20%;
    animation: surface-drift var(--motion-ambient) var(--ease-in-out) infinite alternate;
}

@keyframes surface-drift {
    0% {
        transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate3d(3%, 2%, 0) rotate(7deg) scale(1.08);
    }

    100% {
        transform: translate3d(-2%, 4%, 0) rotate(-5deg) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-surface="h"] body::before,
    .surface-paint[data-surface="h"]::before {
        animation: none;
        transform: none;
    }
}

.surface-paint {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--surface-base);
}

    .surface-paint::before,
    .surface-paint:not([data-pattern="none"])::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }

    .surface-paint::before {
        background: var(--surface-decor);
    }

    .surface-paint:not([data-pattern="none"])::after {
        background: var(--pattern-image);
        -webkit-mask: var(--pattern-mask);
        mask: var(--pattern-mask);
        opacity: var(--pattern-k, 0.5);
    }

.surface-paint[data-surface="h"]::before {
    inset: -30%;
    animation: surface-drift var(--motion-ambient) var(--ease-in-out) infinite alternate;
}

[data-tiles="glass"] .card:not(.column-chooser, .leave-guard, .address-suggestions, .searchable-select-menu, .date-presets-menu, .bell-panel, .demo-switch-panel)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

[data-surface] .widget-body > .list-group {
    --bs-list-group-bg: var(--card-solid);
    --bs-list-group-border-color: var(--tile-border);
    box-shadow: var(--card-shadow);
}

[data-wtint] {
    --card-bg: var(--wt-bg);
    --card-solid: var(--wt-bg);
    --card-border: 1px solid var(--wt-border);
    --tile-border: var(--wt-border);
}

[data-bs-theme="dark"] [data-wtint] {
    --card-bg: var(--wt-bg-d);
    --card-solid: var(--wt-bg-d);
    --card-border: 1px solid var(--wt-border-d);
    --tile-border: var(--wt-border-d);
}

[data-wsurface] {
    --wpattern: none;
    --wink: var(--wt-ink, 100 116 139);
}

[data-bs-theme="dark"] [data-wsurface] {
    --wink: var(--wt-ink, 170 184 202);
    --wink-a: 1.5;
}

[data-wsurface="dots"] {
    --wpattern: radial-gradient(rgb(var(--wink) / calc(0.24 * var(--wink-a, 1))) 1px, transparent 1.4px) 0 0 / 12px 12px;
}

[data-wsurface="grid"] {
    --wpattern: linear-gradient(rgb(var(--wink) / calc(0.12 * var(--wink-a, 1))) 1px, transparent 1px) -1px -1px / 12px 12px,
        linear-gradient(90deg, rgb(var(--wink) / calc(0.12 * var(--wink-a, 1))) 1px, transparent 1px) -1px -1px / 12px 12px;
}

[data-wsurface="hatch"] {
    --wpattern: repeating-linear-gradient(135deg, rgb(var(--wink) / calc(0.12 * var(--wink-a, 1))) 0 1px, transparent 1px 8px);
}

[data-wsurface="contours"] {
    --wpattern: var(--contour-tile) 0 0 / 240px 240px;
}

[data-wsurface] .card,
[data-wsurface] .widget-body > .list-group > .list-group-item {
    background: var(--wpattern), var(--card-bg);
}

@media print {
    html[data-surface] {
        background: #ffffff !important;
    }

        html[data-surface] body::before,
        html[data-surface] body::after,
        .card::before {
            display: none !important;
        }

    .card {
        background: #ffffff !important;
        box-shadow: none !important;
    }
}

.wsurface {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 17rem;
}

.wsurface-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.wsurface-modes {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
}

.wsurface-mode {
    border: 0;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

    .wsurface-mode.active {
        background: var(--insp-primary-dark);
        color: #fff;
    }

html[data-bs-theme="dark"] .wsurface-mode.active {
    color: #08151c;
}

.wsurface-tints,
.wsurface-patterns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.wsurface-swatch {
    position: relative;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--swatch, #ffffff);
    box-shadow: inset 0 0 0 2px var(--bs-body-bg);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-out);
}

    .wsurface-swatch:hover {
        transform: scale(1.08);
    }

    .wsurface-swatch.active {
        border-color: var(--bs-body-color);
    }

    .wsurface-swatch.is-plain {
        background: linear-gradient(135deg, transparent 45%, #dc3545 45% 55%, transparent 55%), var(--bs-body-bg);
        box-shadow: inset 0 0 0 1px var(--bs-border-color);
    }

    .wsurface-swatch.is-custom {
        background: var(--swatch, conic-gradient(#dc3545, #fd7e14, #ffc107, #198754, #0dcaf0, #0d6efd, #6f42c1, #dc3545));
    }

        .wsurface-swatch.is-custom input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

    .wsurface-swatch:focus-visible,
    .wsurface-swatch:has(input:focus-visible) {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }

.wsurface-pattern {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem 0.15rem 0.2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-xs);
}

    .wsurface-pattern.active {
        border-color: var(--insp-primary);
        box-shadow: 0 0 0 1px var(--insp-primary);
    }

.wsurface-sample {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--bs-border-color);
    background: var(--wpattern), var(--wt-bg, var(--bs-body-bg));
}

[data-bs-theme="dark"] .wsurface-sample {
    background: var(--wpattern), var(--wt-bg-d, var(--bs-body-bg));
}