*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-top-8{top:-2rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-16{top:4rem}.top-2{top:.5rem}.top-24{top:6rem}.top-4{top:1rem}.z-40{z-index:40}.z-50{z-index:50}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.h-12{height:3rem}.h-16{height:4rem}.h-24{height:6rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.max-h-60{max-height:15rem}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-24{width:6rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .5s ease-in-out}.cursor-pointer{cursor:pointer}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize-none{resize:none}.resize{resize:both}.scroll-mt-24{scroll-margin-top:6rem}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-12{gap:3rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem*var(--tw-space-x-reverse));margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-apple-gray-200{--tw-border-opacity:1;border-color:rgb(232 232 237/var(--tw-border-opacity,1))}.border-apple-gray-300{--tw-border-opacity:1;border-color:rgb(209 209 214/var(--tw-border-opacity,1))}.border-apple-gray-800{--tw-border-opacity:1;border-color:rgb(29 29 31/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}.border-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.border-purple-600{--tw-border-opacity:1;border-color:rgb(147 51 234/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.border-yellow-400{--tw-border-opacity:1;border-color:rgb(250 204 21/var(--tw-border-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-apple-gray-100{--tw-bg-opacity:1;background-color:rgb(245 245 247/var(--tw-bg-opacity,1))}.bg-apple-gray-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-apple-gray-800{--tw-bg-opacity:1;background-color:rgb(29 29 31/var(--tw-bg-opacity,1))}.bg-apple-gray-900{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-cyan-100{--tw-bg-opacity:1;background-color:rgb(207 250 254/var(--tw-bg-opacity,1))}.bg-cyan-500{--tw-bg-opacity:1;background-color:rgb(6 182 212/var(--tw-bg-opacity,1))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-lime-100{--tw-bg-opacity:1;background-color:rgb(236 252 203/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243/var(--tw-bg-opacity,1))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity,1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-rose-100{--tw-bg-opacity:1;background-color:rgb(255 228 230/var(--tw-bg-opacity,1))}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.bg-opacity-20{--tw-bg-opacity:0.2}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-50{--tw-gradient-from:#fffbeb var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,251,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-amber-600{--tw-gradient-from:#d97706 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,6,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-apple-gray-50{--tw-gradient-from:#fafafa var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-apple-gray-900{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,246,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgba(37,99,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-50{--tw-gradient-from:#ecfeff var(--tw-gradient-from-position);--tw-gradient-to:rgba(236,254,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-600{--tw-gradient-from:#0891b2 var(--tw-gradient-from-position);--tw-gradient-to:rgba(8,145,178,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-50{--tw-gradient-from:#f0fdf4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,244,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-600{--tw-gradient-from:#16a34a var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,163,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgba(99,102,241,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-lime-50{--tw-gradient-from:#f7fee7 var(--tw-gradient-from-position);--tw-gradient-to:hsla(78,92%,95%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-lime-600{--tw-gradient-from:#65a30d var(--tw-gradient-from-position);--tw-gradient-to:rgba(101,163,13,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-100{--tw-gradient-from:#ffedd5 var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,237,213,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-50{--tw-gradient-from:#fff7ed var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,247,237,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-500{--tw-gradient-from:#f97316 var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,115,22,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-600{--tw-gradient-from:#ea580c var(--tw-gradient-from-position);--tw-gradient-to:rgba(234,88,12,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-pink-50{--tw-gradient-from:#fdf2f8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(253,242,248,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-100{--tw-gradient-from:#f3e8ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(243,232,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-50{--tw-gradient-from:#faf5ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(250,245,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgba(168,85,247,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-600{--tw-gradient-from:#9333ea var(--tw-gradient-from-position);--tw-gradient-to:rgba(147,51,234,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-50{--tw-gradient-from:#f0f9ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,249,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-600{--tw-gradient-from:#0284c7 var(--tw-gradient-from-position);--tw-gradient-to:rgba(2,132,199,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-apple-gray-600{--tw-gradient-to:#6e6e73 var(--tw-gradient-to-position)}.to-blue-100{--tw-gradient-to:#dbeafe var(--tw-gradient-to-position)}.to-blue-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.to-cyan-50{--tw-gradient-to:#ecfeff var(--tw-gradient-to-position)}.to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.to-emerald-50{--tw-gradient-to:#ecfdf5 var(--tw-gradient-to-position)}.to-emerald-600{--tw-gradient-to:#059669 var(--tw-gradient-to-position)}.to-gray-600{--tw-gradient-to:#4b5563 var(--tw-gradient-to-position)}.to-green-100{--tw-gradient-to:#dcfce7 var(--tw-gradient-to-position)}.to-orange-100{--tw-gradient-to:#ffedd5 var(--tw-gradient-to-position)}.to-pink-100{--tw-gradient-to:#fce7f3 var(--tw-gradient-to-position)}.to-pink-50{--tw-gradient-to:#fdf2f8 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-pink-600{--tw-gradient-to:#db2777 var(--tw-gradient-to-position)}.to-purple-100{--tw-gradient-to:#f3e8ff var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.to-red-100{--tw-gradient-to:#fee2e2 var(--tw-gradient-to-position)}.to-red-50{--tw-gradient-to:#fef2f2 var(--tw-gradient-to-position)}.to-red-500{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.to-red-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}.to-rose-50{--tw-gradient-to:#fff1f2 var(--tw-gradient-to-position)}.to-rose-600{--tw-gradient-to:#e11d48 var(--tw-gradient-to-position)}.to-slate-50{--tw-gradient-to:#f8fafc var(--tw-gradient-to-position)}.to-slate-600{--tw-gradient-to:#475569 var(--tw-gradient-to-position)}.to-teal-50{--tw-gradient-to:#f0fdfa var(--tw-gradient-to-position)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.to-teal-600{--tw-gradient-to:#0d9488 var(--tw-gradient-to-position)}.to-violet-50{--tw-gradient-to:#f5f3ff var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to:#7c3aed var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.fill-current{fill:currentColor}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pr-10{padding-right:2.5rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sf{font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tracking-wide{letter-spacing:.025em}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-apple-gray-300{--tw-text-opacity:1;color:rgb(209 209 214/var(--tw-text-opacity,1))}.text-apple-gray-400{--tw-text-opacity:1;color:rgb(161 161 166/var(--tw-text-opacity,1))}.text-apple-gray-500{--tw-text-opacity:1;color:rgb(134 134 139/var(--tw-text-opacity,1))}.text-apple-gray-600{--tw-text-opacity:1;color:rgb(110 110 115/var(--tw-text-opacity,1))}.text-apple-gray-700{--tw-text-opacity:1;color:rgb(72 72 74/var(--tw-text-opacity,1))}.text-apple-gray-900{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-cyan-800{--tw-text-opacity:1;color:rgb(21 94 117/var(--tw-text-opacity,1))}.text-emerald-800{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-green-100{--tw-text-opacity:1;color:rgb(220 252 231/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity,1))}.text-lime-800{--tw-text-opacity:1;color:rgb(63 98 18/var(--tw-text-opacity,1))}.text-orange-100{--tw-text-opacity:1;color:rgb(255 237 213/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity,1))}.text-pink-700{--tw-text-opacity:1;color:rgb(190 24 93/var(--tw-text-opacity,1))}.text-pink-800{--tw-text-opacity:1;color:rgb(157 23 77/var(--tw-text-opacity,1))}.text-purple-100{--tw-text-opacity:1;color:rgb(243 232 255/var(--tw-text-opacity,1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity,1))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-rose-800{--tw-text-opacity:1;color:rgb(159 18 57/var(--tw-text-opacity,1))}.text-sky-800{--tw-text-opacity:1;color:rgb(7 89 133/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-violet-800{--tw-text-opacity:1;color:rgb(91 33 182/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-200{--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-90{opacity:.9}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:scale-105:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:bg-amber-600:hover{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.hover\:bg-apple-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(245 245 247/var(--tw-bg-opacity,1))}.hover\:bg-apple-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(232 232 237/var(--tw-bg-opacity,1))}.hover\:bg-apple-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:bg-apple-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(29 29 31/var(--tw-bg-opacity,1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-cyan-600:hover{--tw-bg-opacity:1;background-color:rgb(8 145 178/var(--tw-bg-opacity,1))}.hover\:bg-emerald-600:hover{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-green-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.hover\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.hover\:bg-purple-50:hover{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.hover\:bg-purple-600:hover{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.hover\:bg-sky-600:hover{--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:from-blue-600:hover{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgba(37,99,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-blue-700:hover{--tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(29,78,216,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-green-600:hover{--tw-gradient-from:#16a34a var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,163,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-purple-700:hover{--tw-gradient-from:#7e22ce var(--tw-gradient-from-position);--tw-gradient-to:rgba(126,34,206,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-pink-700:hover{--tw-gradient-to:#be185d var(--tw-gradient-to-position)}.hover\:to-purple-700:hover{--tw-gradient-to:#7e22ce var(--tw-gradient-to-position)}.hover\:to-teal-700:hover{--tw-gradient-to:#0f766e var(--tw-gradient-to-position)}.hover\:text-apple-gray-900:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-orange-600:hover{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.hover\:text-purple-600:hover{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.hover\:text-purple-800:hover{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-50:focus{z-index:50}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-white:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:block:is(.dark *){display:block}.dark\:hidden:is(.dark *){display:none}.dark\:border-apple-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(110 110 115/var(--tw-border-opacity,1))}.dark\:border-apple-gray-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(72 72 74/var(--tw-border-opacity,1))}.dark\:border-blue-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(30 64 175/var(--tw-border-opacity,1))}.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:border-green-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(22 101 52/var(--tw-border-opacity,1))}.dark\:border-red-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(153 27 27/var(--tw-border-opacity,1))}.dark\:border-yellow-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(133 77 14/var(--tw-border-opacity,1))}.dark\:bg-amber-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(120 53 15/var(--tw-bg-opacity,1))}.dark\:bg-apple-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(72 72 74/var(--tw-bg-opacity,1))}.dark\:bg-apple-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(29 29 31/var(--tw-bg-opacity,1))}.dark\:bg-apple-gray-800\/80:is(.dark *){background-color:rgba(29,29,31,.8)}.dark\:bg-apple-gray-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-apple-gray-900\/80:is(.dark *){background-color:rgba(0,0,0,.8)}.dark\:bg-blue-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:bg-blue-900\/20:is(.dark *){background-color:rgba(30,58,138,.2)}.dark\:bg-cyan-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(22 78 99/var(--tw-bg-opacity,1))}.dark\:bg-emerald-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(6 78 59/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:bg-green-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1))}.dark\:bg-green-900\/20:is(.dark *){background-color:rgba(20,83,45,.2)}.dark\:bg-indigo-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(49 46 129/var(--tw-bg-opacity,1))}.dark\:bg-lime-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(54 83 20/var(--tw-bg-opacity,1))}.dark\:bg-orange-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(124 45 18/var(--tw-bg-opacity,1))}.dark\:bg-pink-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(131 24 67/var(--tw-bg-opacity,1))}.dark\:bg-purple-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(88 28 135/var(--tw-bg-opacity,1))}.dark\:bg-purple-900\/20:is(.dark *){background-color:rgba(88,28,135,.2)}.dark\:bg-red-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.dark\:bg-red-900\/20:is(.dark *){background-color:rgba(127,29,29,.2)}.dark\:bg-rose-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(136 19 55/var(--tw-bg-opacity,1))}.dark\:bg-sky-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(12 74 110/var(--tw-bg-opacity,1))}.dark\:bg-slate-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.dark\:bg-teal-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(19 78 74/var(--tw-bg-opacity,1))}.dark\:bg-violet-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(76 29 149/var(--tw-bg-opacity,1))}.dark\:bg-yellow-900\/20:is(.dark *){background-color:rgba(113,63,18,.2)}.dark\:from-amber-400:is(.dark *){--tw-gradient-from:#fbbf24 var(--tw-gradient-from-position);--tw-gradient-to:rgba(251,191,36,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-amber-900\/20:is(.dark *){--tw-gradient-from:rgba(120,53,15,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(120,53,15,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-apple-gray-900:is(.dark *){--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-blue-400:is(.dark *){--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgba(96,165,250,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-blue-900\/20:is(.dark *){--tw-gradient-from:rgba(30,58,138,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(30,58,138,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-cyan-400:is(.dark *){--tw-gradient-from:#22d3ee var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,211,238,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-cyan-900\/20:is(.dark *){--tw-gradient-from:rgba(22,78,99,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,78,99,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-green-400:is(.dark *){--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:rgba(74,222,128,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-green-900\/20:is(.dark *){--tw-gradient-from:rgba(20,83,45,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-lime-400:is(.dark *){--tw-gradient-from:#a3e635 var(--tw-gradient-from-position);--tw-gradient-to:rgba(163,230,53,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-lime-900\/20:is(.dark *){--tw-gradient-from:rgba(54,83,20,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(54,83,20,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-orange-400:is(.dark *){--tw-gradient-from:#fb923c var(--tw-gradient-from-position);--tw-gradient-to:rgba(251,146,60,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-orange-900\/20:is(.dark *){--tw-gradient-from:rgba(124,45,18,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,45,18,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-orange-900\/30:is(.dark *){--tw-gradient-from:rgba(124,45,18,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,45,18,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-pink-900\/20:is(.dark *){--tw-gradient-from:rgba(131,24,67,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(131,24,67,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-purple-400:is(.dark *){--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:rgba(192,132,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-purple-900\/20:is(.dark *){--tw-gradient-from:rgba(88,28,135,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-purple-900\/30:is(.dark *){--tw-gradient-from:rgba(88,28,135,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-sky-400:is(.dark *){--tw-gradient-from:#38bdf8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(56,189,248,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-sky-900\/20:is(.dark *){--tw-gradient-from:rgba(12,74,110,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(12,74,110,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-white:is(.dark *){--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:to-apple-gray-300:is(.dark *){--tw-gradient-to:#d1d1d6 var(--tw-gradient-to-position)}.dark\:to-apple-gray-800:is(.dark *){--tw-gradient-to:#1d1d1f var(--tw-gradient-to-position)}.dark\:to-blue-800\/20:is(.dark *){--tw-gradient-to:rgba(30,64,175,.2) var(--tw-gradient-to-position)}.dark\:to-cyan-900\/20:is(.dark *){--tw-gradient-to:rgba(22,78,99,.2) var(--tw-gradient-to-position)}.dark\:to-emerald-400:is(.dark *){--tw-gradient-to:#34d399 var(--tw-gradient-to-position)}.dark\:to-emerald-900\/20:is(.dark *){--tw-gradient-to:rgba(6,78,59,.2) var(--tw-gradient-to-position)}.dark\:to-green-800\/20:is(.dark *){--tw-gradient-to:rgba(22,101,52,.2) var(--tw-gradient-to-position)}.dark\:to-orange-800\/20:is(.dark *){--tw-gradient-to:rgba(154,52,18,.2) var(--tw-gradient-to-position)}.dark\:to-pink-400:is(.dark *){--tw-gradient-to:#f472b6 var(--tw-gradient-to-position)}.dark\:to-pink-800\/20:is(.dark *){--tw-gradient-to:rgba(157,23,77,.2) var(--tw-gradient-to-position)}.dark\:to-pink-900\/20:is(.dark *){--tw-gradient-to:rgba(131,24,67,.2) var(--tw-gradient-to-position)}.dark\:to-pink-900\/30:is(.dark *){--tw-gradient-to:rgba(131,24,67,.3) var(--tw-gradient-to-position)}.dark\:to-purple-800\/20:is(.dark *){--tw-gradient-to:rgba(107,33,168,.2) var(--tw-gradient-to-position)}.dark\:to-red-400:is(.dark *){--tw-gradient-to:#f87171 var(--tw-gradient-to-position)}.dark\:to-red-900\/20:is(.dark *){--tw-gradient-to:rgba(127,29,29,.2) var(--tw-gradient-to-position)}.dark\:to-red-900\/30:is(.dark *){--tw-gradient-to:rgba(127,29,29,.3) var(--tw-gradient-to-position)}.dark\:to-rose-400:is(.dark *){--tw-gradient-to:#fb7185 var(--tw-gradient-to-position)}.dark\:to-rose-900\/20:is(.dark *){--tw-gradient-to:rgba(136,19,55,.2) var(--tw-gradient-to-position)}.dark\:to-slate-400:is(.dark *){--tw-gradient-to:#94a3b8 var(--tw-gradient-to-position)}.dark\:to-slate-900\/20:is(.dark *){--tw-gradient-to:rgba(15,23,42,.2) var(--tw-gradient-to-position)}.dark\:to-teal-400:is(.dark *){--tw-gradient-to:#2dd4bf var(--tw-gradient-to-position)}.dark\:to-teal-900\/20:is(.dark *){--tw-gradient-to:rgba(19,78,74,.2) var(--tw-gradient-to-position)}.dark\:to-violet-400:is(.dark *){--tw-gradient-to:#a78bfa var(--tw-gradient-to-position)}.dark\:to-violet-900\/20:is(.dark *){--tw-gradient-to:rgba(76,29,149,.2) var(--tw-gradient-to-position)}.dark\:text-amber-200:is(.dark *){--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.dark\:text-apple-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(232 232 237/var(--tw-text-opacity,1))}.dark\:text-apple-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 209 214/var(--tw-text-opacity,1))}.dark\:text-apple-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(161 161 166/var(--tw-text-opacity,1))}.dark\:text-blue-200:is(.dark *){--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.dark\:text-blue-300:is(.dark *){--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.dark\:text-blue-400:is(.dark *){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.dark\:text-cyan-200:is(.dark *){--tw-text-opacity:1;color:rgb(165 243 252/var(--tw-text-opacity,1))}.dark\:text-emerald-200:is(.dark *){--tw-text-opacity:1;color:rgb(167 243 208/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-green-200:is(.dark *){--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.dark\:text-green-300:is(.dark *){--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.dark\:text-green-400:is(.dark *){--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.dark\:text-indigo-200:is(.dark *){--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity,1))}.dark\:text-lime-200:is(.dark *){--tw-text-opacity:1;color:rgb(217 249 157/var(--tw-text-opacity,1))}.dark\:text-orange-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 215 170/var(--tw-text-opacity,1))}.dark\:text-orange-300:is(.dark *){--tw-text-opacity:1;color:rgb(253 186 116/var(--tw-text-opacity,1))}.dark\:text-pink-200:is(.dark *){--tw-text-opacity:1;color:rgb(251 207 232/var(--tw-text-opacity,1))}.dark\:text-pink-300:is(.dark *){--tw-text-opacity:1;color:rgb(249 168 212/var(--tw-text-opacity,1))}.dark\:text-purple-200:is(.dark *){--tw-text-opacity:1;color:rgb(233 213 255/var(--tw-text-opacity,1))}.dark\:text-purple-300:is(.dark *){--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.dark\:text-red-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.dark\:text-red-300:is(.dark *){--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-rose-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 205 211/var(--tw-text-opacity,1))}.dark\:text-sky-200:is(.dark *){--tw-text-opacity:1;color:rgb(186 230 253/var(--tw-text-opacity,1))}.dark\:text-slate-200:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.dark\:text-teal-200:is(.dark *){--tw-text-opacity:1;color:rgb(153 246 228/var(--tw-text-opacity,1))}.dark\:text-violet-200:is(.dark *){--tw-text-opacity:1;color:rgb(221 214 254/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-yellow-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.dark\:text-yellow-300:is(.dark *){--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity,1))}.dark\:text-yellow-400:is(.dark *){--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.dark\:hover\:bg-apple-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(72 72 74/var(--tw-bg-opacity,1))}.dark\:hover\:bg-apple-gray-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(29 29 31/var(--tw-bg-opacity,1))}.dark\:hover\:bg-apple-gray-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:hover\:text-blue-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.dark\:hover\:text-white:hover:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:768px){.md\:mt-0{margin-top:0}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.md\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}}
/* Theme System for The Invisible Character */

:root {
    /* Light theme colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #fafafa;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #86868b;
    --border-primary: #d1d1d6;
    --border-secondary: #e8e8ed;
    --accent-primary: #007aff;
    --accent-secondary: #5856d6;
    --shadow-primary: rgba(0, 0, 0, 0.1);
    --shadow-secondary: rgba(0, 0, 0, 0.05);
    
    /* Component colors */
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --button-bg: #1d1d1f;
    --button-text: #ffffff;
    --hover-bg: #f5f5f7;
    --focus-ring: rgba(0, 122, 255, 0.5);
    
    /* Typography */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Dark theme colors */
[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #1d1d1f;
    --bg-tertiary: #2d2d2f;
    --text-primary: #ffffff;
    --text-secondary: #a1a1a6;
    --text-tertiary: #86868b;
    --border-primary: #48484a;
    --border-secondary: #38383a;
    --accent-primary: #0a84ff;
    --accent-secondary: #7c3aed;
    --shadow-primary: rgba(255, 255, 255, 0.1);
    --shadow-secondary: rgba(255, 255, 255, 0.05);
    
    /* Component colors */
    --card-bg: #1d1d1f;
    --input-bg: #2d2d2f;
    --button-bg: #ffffff;
    --button-text: #000000;
    --hover-bg: #2d2d2f;
    --focus-ring: rgba(10, 132, 255, 0.5);
}

/* Base theme styles */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Theme transition */
.theme-transition * {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal), 
                border-color var(--transition-normal),
                box-shadow var(--transition-normal) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Selection styles */
::selection {
    background-color: var(--accent-primary);
    color: var(--button-text);
}

/* Theme toggle animation */
.theme-toggle {
    transition: transform var(--transition-fast);
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Dark mode specific adjustments */
[data-theme="dark"] img {
    filter: brightness(0.9) contrast(1.1);
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .border-gray-200 {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .hover\:bg-gray-50:hover {
    background-color: var(--hover-bg) !important;
}

/* Print styles */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }
    
    .no-print {
        display: none !important;
    }
}
/* Custom Styles for The Invisible Character */

/* Import Apple-style fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Base styles */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography improvements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
    background: transparent;
    color: #6b7280;
    border: 2px solid #e5e7eb;
}

.btn-secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Card styles */
.card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Input styles */
.input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: white;
}

.input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input::placeholder {
    color: #9ca3af;
}

/* Navigation styles */
.nav-link {
    position: relative;
    color: #6b7280;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #667eea;
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: #374151;
}

.nav-link:hover::after {
    width: 100%;
}

/* Mobile menu styles */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Hero section styles */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="50" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="30" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

/* Tool card styles */
.tool-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid #e5e7eb;
}

.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-color: #667eea;
}

.tool-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 1.5rem;
}

/* Feature section styles */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

/* Minimal local fallback for the few legacy Font Awesome classes used in older articles. */
.fas,
.fab {
    font-style: normal;
    display: inline-block;
}

.fa-invisible::before,
.fa-eye-slash::before {
    content: "[]";
}

.fa-code::before {
    content: "</>";
}

.fa-cogs::before {
    content: "gear";
}

.fa-book::before {
    content: "book";
}

.fa-instagram::before {
    content: "IG";
}

.fa-whatsapp::before {
    content: "WA";
}

.fa-gamepad::before {
    content: "GAME";
}

.fa-magic::before {
    content: "*";
}

.fa-arrow-right::before {
    content: "->";
}

/* Footer styles */
.footer {
    background: #1f2937;
    color: #9ca3af;
    padding: 3rem 0 1rem;
}

.footer-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #f9fafb;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* Responsive design */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .hero-gradient {
        padding: 2rem 0;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Loading spinner */
.spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.focus-ring:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }

    .card {
        border: 2px solid #374151;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        color: black !important;
        background: white !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #374151 !important;
    }
}

/* Character card styles */
.character-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
}

.character-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.character-card.selected {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.character-preview {
    font-family: monospace;
    font-size: 1.5rem;
    background: #f3f4f6;
    padding: 0.5rem;
    border-radius: 0.375rem;
    display: inline-block;
    min-width: 2rem;
    text-align: center;
}

.dark .character-preview {
    background: #374151;
}

.copy-character-btn {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.copy-character-btn:hover {
    background: #f3f4f6;
}

.dark .copy-character-btn:hover {
    background: #374151;
}

.copy-character-btn.copied {
    background: #10b981;
    color: white;
}

/* Detection results styles */
.detection-result {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
}

.dark .detection-result {
    background: #1f2937;
    border-color: #374151;
}

.detection-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.detection-result-title {
    font-weight: 600;
    color: #1f2937;
}

.dark .detection-result-title {
    color: #f9fafb;
}

.detection-result-count {
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.detection-result-description {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.dark .detection-result-description {
    color: #9ca3af;
}

.detection-risk {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.risk-low {
    background: #d1fae5;
    color: #065f46;
}

.risk-medium {
    background: #fed7aa;
    color: #9a3412;
}

.risk-high {
    background: #fecaca;
    color: #991b1b;
}

.dark .risk-low {
    background: #064e3b;
    color: #6ee7b7;
}

.dark .risk-medium {
    background: #9a3412;
    color: #fed7aa;
}

.dark .risk-high {
    background: #991b1b;
    color: #fecaca;
}

/* Invisible character highlight */
.invisible-char-highlight {
    background: #fef3c7;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    position: relative;
}

.invisible-char-highlight::after {
    content: attr(data-unicode);
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10;
}

.dark .invisible-char-highlight {
    background: #92400e;
}

/* Notification styles */
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 20rem;
    animation: slideInRight 0.3s ease-out;
}

.notification.success {
    background: #10b981;
    color: white;
}

.notification.error {
    background: #ef4444;
    color: white;
}

.notification.warning {
    background: #f59e0b;
    color: white;
}

.notification.info {
    background: #3b82f6;
    color: white;
}

/* Copy feedback styles */
.copy-feedback {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 10;
    animation: fadeIn 0.2s ease-out;
}

/* Loading states */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
}

/* Selection counter */
.selection-counter {
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Search and filter styles */
.search-input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-select:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Responsive improvements */
@media (max-width: 640px) {
    .character-grid {
        grid-template-columns: 1fr;
    }

    .notification {
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }

    .detection-result {
        padding: 0.75rem;
    }

    .invisible-char-highlight::after {
        font-size: 0.625rem;
        padding: 0.125rem 0.25rem;
    }
}

/* Dark mode improvements */
@media (prefers-color-scheme: dark) {
    .character-card {
        background: #1f2937;
        border-color: #374151;
    }

    .search-input,
    .filter-select {
        background: #1f2937;
        border-color: #374151;
        color: #f9fafb;
    }

    .search-input::placeholder,
    .filter-select::placeholder {
        color: #9ca3af;
    }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .character-card {
        border: 2px solid currentColor;
    }

    .copy-character-btn {
        border: 2px solid currentColor;
    }

    .invisible-char-highlight {
        border: 2px solid currentColor;
    }
}

/* Focus visible improvements */
.focus-visible:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Animation improvements */
@media (prefers-reduced-motion: reduce) {

    .character-card,
    .copy-character-btn,
    .notification,
    .copy-feedback {
        transition: none;
        animation: none;
    }
}

/* Homepage redesign */
.brand-page {
    --tic-ink: #141414;
    --tic-muted: #5f646d;
    --tic-soft: #f7f8f8;
    --tic-panel: #ffffff;
    --tic-line: #dfe3e6;
    --tic-rose: #e11d48;
    --tic-blue: #2563eb;
    --tic-teal: #0f766e;
    --tic-amber: #b45309;
    --tic-shadow: 0 18px 50px rgba(20, 20, 20, 0.08);
    background:
        radial-gradient(circle at 18% 8%, rgba(225, 29, 72, 0.08), transparent 28rem),
        radial-gradient(circle at 84% 16%, rgba(15, 118, 110, 0.08), transparent 26rem),
        var(--tic-soft);
    color: var(--tic-ink);
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(225, 29, 72, 0.18);
}

.dark {
    color-scheme: dark;
}

.brand-page a,
.brand-page button,
.brand-page select,
.brand-page textarea,
.brand-page input {
    touch-action: manipulation;
}

.brand-page section[id],
.brand-page [id$="-title"] {
    scroll-margin-top: 88px;
}

.brand-page.dark,
.dark .brand-page {
    --tic-ink: #f8fafc;
    --tic-muted: #b7bdc7;
    --tic-soft: #101315;
    --tic-panel: #171b1f;
    --tic-line: #2d343a;
    --tic-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.brand-page p {
    color: var(--tic-muted);
    margin: 0;
}

.brand-page h1,
.brand-page h2,
.brand-page h3 {
    color: var(--tic-ink);
    letter-spacing: 0;
    text-wrap: balance;
}

.brand-page a {
    color: inherit;
}

.site-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(223, 227, 230, 0.75);
    background: rgba(247, 248, 248, 0.88);
    backdrop-filter: blur(18px);
}

.dark .site-nav {
    border-bottom-color: rgba(45, 52, 58, 0.8);
    background: rgba(16, 19, 21, 0.86);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.brand-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    background: linear-gradient(135deg, var(--tic-rose), var(--tic-teal));
    box-shadow: 0 0 0 5px rgba(225, 29, 72, 0.12);
}

.nav-links,
.nav-actions,
.hero-actions,
.selection-actions,
.detector-actions {
    display: flex;
    align-items: center;
}

.nav-links {
    gap: 1rem;
    color: var(--tic-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.nav-links a,
.mobile-menu-links a,
.site-footer a {
    text-decoration: none;
}

.nav-links a:hover,
.site-footer a:hover,
.guide-links a:hover,
.scenario-grid a:hover {
    color: var(--tic-rose);
}

.nav-actions {
    gap: 0.5rem;
}

.icon-button,
.button-primary,
.button-secondary,
.button-tertiary,
.quick-copy-list button,
.mobile-theme-button {
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--tic-line);
    border-radius: 0.7rem;
    background: var(--tic-panel);
    color: var(--tic-ink);
}

.icon-button:hover {
    border-color: rgba(225, 29, 72, 0.55);
    transform: translateY(-1px);
}

.text-button {
    width: auto;
    min-width: 2.8rem;
    padding: 0 0.8rem;
    font-weight: 800;
}

.theme-icon-light {
    display: block;
}

.theme-icon-dark,
.dark .theme-icon-light {
    display: none;
}

.dark .theme-icon-dark {
    display: block;
}

.mobile-menu-trigger {
    display: none;
}

.language-switcher {
    position: relative;
}

.language-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 9rem;
    padding: 0.4rem;
    border: 1px solid var(--tic-line);
    border-radius: 0.8rem;
    background: var(--tic-panel);
    box-shadow: var(--tic-shadow);
}

.language-menu a {
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    color: var(--tic-muted);
    text-decoration: none;
}

.language-menu a:hover {
    background: rgba(225, 29, 72, 0.08);
    color: var(--tic-rose);
}

.mobile-menu-panel {
    border-top: 1px solid var(--tic-line);
    background: var(--tic-panel);
}

.mobile-menu-links {
    display: grid;
    gap: 0.35rem;
    padding-block: 0.75rem;
}

.mobile-menu-links a,
.mobile-theme-button {
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    color: var(--tic-ink);
    font-weight: 700;
}

.mobile-theme-button {
    border: 1px solid var(--tic-line);
    background: transparent;
    text-align: left;
}

.hero-shell {
    padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.eyebrow,
.panel-kicker {
    color: var(--tic-rose);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-copy h1 {
    max-width: 12ch;
    margin: 0.55rem 0 1.3rem;
    font-size: clamp(3rem, 7vw, 6.7rem);
    line-height: 0.92;
}

.hero-lede {
    max-width: 42rem;
    font-size: clamp(1.05rem, 1.8vw, 1.28rem);
    line-height: 1.75;
}

.hero-actions {
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 2rem 0;
}

.button-primary,
.button-secondary,
.button-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    font-weight: 800;
    text-decoration: none;
}

.button-primary {
    border: 1px solid #111827;
    background: #111827;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
}

.brand-page .button-primary {
    color: #ffffff;
}

.button-primary:hover {
    transform: translateY(-1px);
    background: var(--tic-rose);
    border-color: var(--tic-rose);
}

.button-primary:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
}

.button-secondary,
.button-tertiary {
    border: 1px solid var(--tic-line);
    background: var(--tic-panel);
    color: var(--tic-ink);
}

.brand-page .button-secondary,
.brand-page .button-tertiary {
    color: var(--tic-ink);
}

.button-secondary:hover,
.button-tertiary:hover,
.quick-copy-list button:hover {
    border-color: rgba(37, 99, 235, 0.55);
    transform: translateY(-1px);
}

.button-tertiary {
    background: transparent;
}

.small-button {
    min-height: 2.55rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
}

.is-success {
    background: var(--tic-teal) !important;
    border-color: var(--tic-teal) !important;
    color: #ffffff !important;
}

.trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    max-width: 42rem;
}

.trust-strip div,
.instant-panel,
.tool-panel,
.definition-list article,
.scenario-grid article,
.process-list li,
.feature-matrix article,
.quote-wall figure,
.pricing-panel,
.faq-list article {
    border: 1px solid var(--tic-line);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: var(--tic-shadow);
}

.dark .trust-strip div,
.dark .instant-panel,
.dark .tool-panel,
.dark .definition-list article,
.dark .scenario-grid article,
.dark .process-list li,
.dark .feature-matrix article,
.dark .quote-wall figure,
.dark .pricing-panel,
.dark .faq-list article {
    background: rgba(23, 27, 31, 0.86);
}

.trust-strip div {
    padding: 1rem;
    border-radius: 0.8rem;
}

.trust-strip dt {
    font-weight: 900;
}

.trust-strip dd {
    margin: 0.2rem 0 0;
    color: var(--tic-muted);
    font-size: 0.88rem;
}

.instant-panel,
.tool-panel,
.pricing-panel {
    border-radius: 1.1rem;
}

.instant-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.instant-panel h2 {
    margin: 0.35rem 0 0.65rem;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    line-height: 1.05;
}

.quick-copy-list {
    display: grid;
    gap: 0.65rem;
    margin: 1.4rem 0;
}

.quick-copy-list button {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.95rem;
    border: 1px solid var(--tic-line);
    border-radius: 0.85rem;
    background: var(--tic-soft);
    color: var(--tic-ink);
    font-weight: 800;
    text-align: left;
}

.quick-copy-list code,
.character-card code {
    font-variant-numeric: tabular-nums;
}

.panel-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding-top: 1rem;
    border-top: 1px solid var(--tic-line);
}

.panel-note span {
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--tic-teal);
}

.section-band {
    padding: clamp(4rem, 7vw, 6.5rem) 0;
}

.alt-band,
.tool-band,
.guide-band {
    background: rgba(255, 255, 255, 0.46);
}

.dark .alt-band,
.dark .tool-band,
.dark .guide-band {
    background: rgba(255, 255, 255, 0.03);
}

.section-heading {
    max-width: 46rem;
    margin-bottom: clamp(1.6rem, 4vw, 2.5rem);
}

.section-heading h2 {
    margin: 0.35rem 0 0.65rem;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
}

.split-heading,
.content-grid,
.pricing-layout,
.quote-layout,
.faq-layout,
.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 5vw, 4rem);
    align-items: start;
}

.split-heading {
    margin-bottom: clamp(1.6rem, 4vw, 2.5rem);
}

.split-heading .section-heading,
.split-heading h2,
.split-heading p {
    margin-bottom: 0;
}

.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.tool-panel {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.tool-panel-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tool-panel h3 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border-radius: 0.6rem;
    padding: 0.35rem 0.6rem;
    background: rgba(225, 29, 72, 0.1);
    color: var(--tic-rose);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.status-badge.muted {
    background: rgba(15, 118, 110, 0.1);
    color: var(--tic-teal);
}

.control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.35fr);
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.field-control,
.detector-field {
    display: block;
}

.search-control {
    position: relative;
}

.field-control input,
.field-control select,
.detector-field textarea {
    width: 100%;
    border: 1px solid var(--tic-line);
    border-radius: 0.8rem;
    background: var(--tic-panel);
    color: var(--tic-ink);
    font: inherit;
}

.field-control input,
.field-control select {
    min-height: 3rem;
    padding: 0 0.95rem;
}

.search-control input {
    padding-right: 3rem;
}

.search-control button {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--tic-muted);
    cursor: pointer;
}

.search-control button:hover {
    background: rgba(37, 99, 235, 0.09);
    color: var(--tic-blue);
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.character-card {
    min-height: 12.5rem;
    border-color: var(--tic-line) !important;
    border-radius: 0.85rem !important;
    background: var(--tic-panel) !important;
    box-shadow: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.character-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.character-card-top h4 {
    margin: 0;
    font-size: 1rem;
}

.platform-risk {
    color: var(--tic-muted);
    font-size: 0.9rem;
}

.character-card:hover {
    border-color: rgba(225, 29, 72, 0.48) !important;
    box-shadow: 0 12px 32px rgba(20, 20, 20, 0.08);
    transform: translateY(-2px);
}

.character-card.ring-2,
.character-card.selected {
    outline: 2px solid var(--tic-blue);
    outline-offset: 2px;
}

.character-preview {
    border: 1px solid var(--tic-line);
    background:
        linear-gradient(90deg, rgba(20, 20, 20, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(20, 20, 20, 0.08) 1px, transparent 1px),
        var(--tic-soft);
    background-size: 8px 8px;
}

.copy-character-btn {
    border: 1px solid var(--tic-line);
    background: var(--tic-soft);
    cursor: pointer;
}

.copy-character-btn:hover,
.copy-character-btn.copied,
.copy-success {
    background: var(--tic-teal) !important;
    color: #ffffff !important;
}

.selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tic-line);
}

.selection-counter {
    color: var(--tic-muted);
    font-weight: 800;
}

.selection-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.detector-panel {
    position: sticky;
    top: 6rem;
}

.detector-field textarea {
    min-height: 12rem;
    padding: 1rem;
    resize: vertical;
}

.detector-actions {
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1rem 0;
}

.toggle-line {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--tic-muted);
    font-weight: 800;
}

.toggle-line input {
    accent-color: var(--tic-teal);
}

.detection-results > div,
.detection-result {
    border: 1px solid var(--tic-line);
    border-radius: 0.85rem !important;
    background: var(--tic-panel) !important;
}

.definition-list,
.scenario-grid,
.feature-matrix,
.quote-wall,
.faq-list,
.guide-links {
    display: grid;
    gap: 1rem;
}

.definition-list article,
.scenario-grid article,
.feature-matrix article,
.quote-wall figure,
.faq-list article {
    border-radius: 0.95rem;
    padding: 1.25rem;
}

.definition-list h3,
.scenario-grid h3,
.process-list h3,
.feature-matrix h3,
.faq-list h3 {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
}

/* 工具枢纽卡片：标题即链接，明确可点击 */
.feature-matrix h3 a,
.definition-list h3 a {
    color: var(--tic-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}

.feature-matrix h3 a:hover,
.definition-list h3 a:hover {
    text-decoration: underline;
}

.scenario-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scenario-index {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--tic-amber);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
}

.scenario-grid a {
    display: inline-flex;
    margin-top: 1rem;
    color: var(--tic-blue);
    font-weight: 800;
    text-decoration: none;
}

.process-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.process-list li {
    border-radius: 0.95rem;
    padding: 1.2rem;
}

.process-list span {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    border-radius: 0.6rem;
    background: var(--tic-ink);
    color: var(--tic-soft);
    font-weight: 900;
}

.feature-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-wall blockquote {
    margin: 0;
    color: var(--tic-ink);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.45;
}

.quote-wall figcaption {
    margin-top: 1rem;
    color: var(--tic-muted);
}

.pricing-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem;
}

.price {
    display: block;
    margin-bottom: 0.45rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
}

.guide-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-links a {
    display: flex;
    align-items: center;
    min-height: 3.4rem;
    border: 1px solid var(--tic-line);
    border-radius: 0.85rem;
    padding: 0.8rem 1rem;
    background: var(--tic-panel);
    color: var(--tic-ink);
    font-weight: 800;
    text-decoration: none;
}

.site-footer {
    border-top: 1px solid var(--tic-line);
    background: var(--tic-panel);
    color: var(--tic-muted);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.7fr));
    gap: clamp(1.4rem, 4vw, 3rem);
    padding: 3rem 0 2rem;
}

.footer-grid h2 {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
}

.footer-grid nav {
    display: grid;
    gap: 0.55rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0 2rem;
    border-top: 1px solid var(--tic-line);
}

@media (max-width: 980px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-trigger {
        display: inline-grid;
    }

    .hero-grid,
    .tool-layout,
    .split-heading,
    .content-grid,
    .pricing-layout,
    .quote-layout,
    .faq-layout,
    .guide-layout,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .detector-panel {
        position: static;
    }

    .process-list,
    .scenario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .site-container {
        width: min(100% - 24px, 1180px);
    }

    .brand-mark {
        white-space: normal;
    }

    .language-switcher,
    #theme-toggle-desktop {
        display: none;
    }

    .hero-actions,
    .selection-bar,
    .pricing-panel,
    .footer-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .trust-strip,
    .control-row,
    .character-grid,
    .process-list,
    .scenario-grid,
    .feature-matrix,
    .quote-wall,
    .guide-links {
        grid-template-columns: 1fr;
    }

    .selection-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .button-primary,
    .button-secondary,
    .button-tertiary {
        width: 100%;
    }
}

/*
 * input: DESIGN.md、现有静态 HTML、现有工具组件的稳定 class / id。
 * output: A「精密索引」共享视觉层，覆盖首页、工具、博客和说明页。
 * pos: 最后加载的全站 UI 样式（更新规则：设计令牌或组件规则改变时先更新 DESIGN.md）。
 */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
    --pi-paper: #f2eee4;
    --pi-paper-deep: #e4dfd3;
    --pi-paper-light: #fbf8f1;
    --pi-ink: #20201d;
    --pi-muted: #747068;
    --pi-rule: #aaa499;
    --pi-rule-soft: rgba(32, 32, 29, 0.16);
    --pi-signal: #ce3e29;
    --pi-signal-dark: #aa2e1d;
    --pi-info: #0f62fe;
    --pi-shadow: 0 14px 36px rgba(32, 32, 29, 0.16), 0 2px 0 rgba(32, 32, 29, 0.08);
    --pi-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --pi-sans: "Archivo", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --pi-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

html {
    background: var(--pi-paper);
    color: var(--pi-ink);
    scroll-behavior: smooth;
    scrollbar-color: var(--pi-signal) var(--pi-paper-deep);
    scrollbar-width: thin;
}

body,
body.brand-page {
    min-width: 320px;
    background: var(--pi-paper);
    color: var(--pi-ink);
    font-family: var(--pi-sans);
    font-style: normal;
    line-height: 1.65;
    text-wrap: pretty;
}

body :is(em, i, blockquote) {
    font-style: normal !important;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(32, 32, 29, 0.12) 0.55px, transparent 0.55px);
    background-size: 5px 5px;
    content: "";
    opacity: 0.025;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.brand-page {
    background: var(--pi-ink);
    color: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] body::before {
    opacity: 0.035;
}

::selection {
    background: var(--pi-signal);
    color: #fffaf0;
}

:focus-visible {
    outline: 3px solid var(--pi-signal);
    outline-offset: 3px;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

code,
pre,
kbd,
.panel-kicker,
.eyebrow,
.status-badge,
.platform-risk,
.tag,
.badge,
time {
    font-family: var(--pi-mono);
    font-variant-numeric: tabular-nums;
}

/* Navigation: the 7:5 index grid holds both the new and legacy page shells. */
.site-container,
body:not(.brand-page) header > div,
body:not(.brand-page) main > .container,
body:not(.brand-page) main > .max-w-7xl,
body:not(.brand-page) footer > div {
    width: min(100% - 48px, 1280px);
    margin-inline: auto;
}

.site-nav,
body:not(.brand-page) header.fixed,
body:not(.brand-page) > header {
    position: sticky !important;
    top: 0;
    z-index: 60;
    min-height: 76px;
    border-bottom: 2px solid var(--pi-ink) !important;
    background: color-mix(in srgb, var(--pi-paper) 94%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
}

.site-nav .nav-inner {
    display: grid;
    grid-template-columns: minmax(220px, 7fr) minmax(0, 5fr) auto;
    min-height: 74px;
    align-items: center;
    gap: 20px;
}

.brand-mark,
body:not(.brand-page) header a[href="/"],
body:not(.brand-page) header a[href="index.html"] {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--pi-ink) !important;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.brand-dot,
.brand-mark::before {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-grid;
    place-items: center;
    background: var(--pi-signal);
    color: #fffaf0;
    content: "IC";
    font-family: var(--pi-mono);
    font-size: 8px;
    font-weight: 500;
}

.brand-dot {
    font-size: 0;
}

.nav-links,
body:not(.brand-page) header nav {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.6vw, 24px);
}

.nav-links a,
body:not(.brand-page) header nav a,
body:not(.brand-page) header .hidden.md\:flex a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--pi-muted) !important;
    font-family: var(--pi-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.035em;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: color 150ms var(--pi-ease-out), background-color 150ms var(--pi-ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current="page"],
body:not(.brand-page) header nav a:hover,
body:not(.brand-page) header nav a[aria-current="page"] {
    color: var(--pi-signal) !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon-button,
body:not(.brand-page) header button {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--pi-ink) !important;
    cursor: pointer;
    transition: border-color 150ms var(--pi-ease-out), background-color 150ms var(--pi-ease-out), color 150ms var(--pi-ease-out), transform 120ms var(--pi-ease-out);
}

.text-button {
    width: auto;
    min-width: 44px;
    padding-inline: 10px;
    font-family: var(--pi-mono);
    font-size: 0.72rem;
    font-weight: 500;
}

.icon-button:active,
button:active,
.button-primary:active,
.button-secondary:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    .icon-button:hover,
    body:not(.brand-page) header button:hover {
        border-color: var(--pi-ink);
        background: var(--pi-paper-deep);
    }
}

.language-switcher {
    position: relative;
}

.language-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    min-width: 152px;
    padding: 6px;
    border: 1px solid var(--pi-ink);
    border-radius: 0;
    background: var(--pi-paper-light);
    box-shadow: var(--pi-shadow);
}

.language-menu a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: var(--pi-ink);
    font-family: var(--pi-mono);
    font-size: 0.72rem;
    text-decoration: none;
}

.language-menu a:hover,
.language-menu a[aria-current="page"] {
    background: var(--pi-paper-deep);
    color: var(--pi-signal);
}

.mobile-menu-panel {
    border-bottom: 2px solid var(--pi-ink);
    background: var(--pi-paper-light);
}

.mobile-menu-links {
    display: grid;
    padding-block: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-menu-links a,
.mobile-theme-button {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--pi-rule-soft);
    background: transparent;
    color: var(--pi-ink);
    font-family: var(--pi-mono);
    font-size: 0.72rem;
    text-align: left;
    text-decoration: none;
}

/* Homepage and generator pages retain their real controls, now framed as an index. */
.hero-shell {
    position: relative;
    overflow: clip;
    padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 6vw, 80px) !important;
    border-bottom: 1px solid var(--pi-rule);
    background: var(--pi-paper) !important;
}

.hero-shell::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + 1px);
    width: 1px;
    background: var(--pi-rule-soft);
    content: "";
}

.hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr) !important;
    align-items: stretch !important;
    gap: clamp(32px, 5vw, 72px) !important;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: clamp(0px, 3vw, 44px);
}

.eyebrow,
.panel-kicker {
    margin: 0 0 14px !important;
    color: var(--pi-signal) !important;
    font-size: 0.68rem !important;
    font-weight: 500;
    letter-spacing: 0.055em;
    line-height: 1.25;
    text-transform: uppercase;
}

.hero-copy h1,
main h1 {
    max-width: 11ch;
    margin: 0 !important;
    color: var(--pi-ink) !important;
    font-family: var(--pi-sans);
    font-size: clamp(2.55rem, 5.5vw, 5.8rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.055em;
    line-height: 0.96 !important;
    text-wrap: balance;
}

.hero-lede,
body:not(.brand-page) main > section > p:first-of-type {
    max-width: 60ch;
    margin: 24px 0 0 !important;
    color: var(--pi-muted) !important;
    font-size: clamp(1rem, 1.45vw, 1.14rem) !important;
    line-height: 1.68 !important;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.button-primary,
button.button-primary,
body:not(.brand-page) .bg-apple-blue,
body:not(.brand-page) .bg-blue-600 {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 2px solid var(--pi-signal) !important;
    border-radius: 0 !important;
    background: var(--pi-signal) !important;
    color: #fffaf0 !important;
    font-family: var(--pi-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 150ms var(--pi-ease-out), border-color 150ms var(--pi-ease-out), transform 120ms var(--pi-ease-out);
}

.button-secondary,
button.button-secondary,
body:not(.brand-page) .border-apple-gray-300.rounded-lg,
body:not(.brand-page) .border-gray-300.rounded-lg {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 2px solid var(--pi-ink) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--pi-ink) !important;
    font-family: var(--pi-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 150ms var(--pi-ease-out), color 150ms var(--pi-ease-out), transform 120ms var(--pi-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .button-primary:hover,
    button.button-primary:hover,
    body:not(.brand-page) .bg-apple-blue:hover,
    body:not(.brand-page) .bg-blue-600:hover {
        border-color: var(--pi-signal-dark) !important;
        background: var(--pi-signal-dark) !important;
    }

    .button-secondary:hover,
    button.button-secondary:hover {
        background: var(--pi-ink) !important;
        color: var(--pi-paper) !important;
    }
}

.trust-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    margin: 36px 0 0 !important;
    border-top: 1px solid var(--pi-rule);
    border-bottom: 1px solid var(--pi-rule);
}

.trust-strip div {
    min-width: 0;
    padding: 12px 14px 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.trust-strip div + div {
    padding-left: 14px !important;
    border-left: 1px solid var(--pi-rule);
}

.trust-strip dt {
    color: var(--pi-ink);
    font-family: var(--pi-mono);
    font-size: 0.72rem;
    font-weight: 500;
}

.trust-strip dd {
    margin: 3px 0 0;
    color: var(--pi-muted);
    font-size: 0.78rem;
}

.instant-panel,
.tool-panel,
.pricing-panel {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--pi-ink) !important;
    border-radius: 0 !important;
    background: var(--pi-paper-light) !important;
    box-shadow: var(--pi-shadow) !important;
}

.instant-panel::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 8px solid rgba(228, 223, 211, 0.72);
    content: "";
}

.instant-panel::after {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: var(--pi-signal);
    box-shadow: 16px 0 0 var(--pi-paper-deep), 32px 0 0 var(--pi-paper-deep);
    content: "";
}

.instant-panel > *,
.tool-panel > * {
    position: relative;
}

.instant-panel h2,
.tool-panel h3,
.section-heading h2,
main h2 {
    color: var(--pi-ink) !important;
    font-family: var(--pi-sans);
    font-weight: 600 !important;
    letter-spacing: -0.035em;
    line-height: 1.08 !important;
    text-wrap: balance;
}

.quick-copy-list {
    display: grid;
    gap: 0 !important;
    margin-block: 22px !important;
    border-top: 1px solid var(--pi-rule);
    border-bottom: 1px solid var(--pi-rule);
}

.quick-copy-list button {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--pi-rule);
    background: transparent;
    color: var(--pi-ink);
    cursor: pointer;
    text-align: left;
}

.quick-copy-list button:last-child {
    border-bottom: 0;
}

.quick-copy-list button span {
    font-size: 0.92rem;
    font-weight: 600;
}

.quick-copy-list code,
.character-card code {
    color: var(--pi-signal);
    font-size: 0.68rem;
}

.section-band,
body:not(.brand-page) main > section,
body:not(.brand-page) main > article {
    border-bottom: 1px solid var(--pi-rule-soft);
    background: transparent !important;
}

.section-band {
    padding: clamp(48px, 7vw, 96px) 0 !important;
}

.split-heading {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: end;
    padding-bottom: 28px;
    border-bottom: 2px solid var(--pi-ink);
}

.split-heading > p {
    max-width: 42ch;
    margin: 0;
    color: var(--pi-muted);
}

.tool-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
    align-items: start;
    gap: clamp(20px, 3vw, 40px) !important;
    margin-top: 32px;
}

.tool-panel {
    padding: clamp(20px, 3vw, 32px) !important;
}

.tool-panel-header {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pi-rule);
}

.status-badge,
.platform-risk,
.panel-note {
    border-radius: 0 !important;
}

.status-badge {
    padding: 5px 7px !important;
    border: 1px solid var(--pi-rule) !important;
    background: var(--pi-paper-deep) !important;
    color: var(--pi-ink) !important;
    font-size: 0.62rem !important;
}

.control-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr);
    gap: 12px !important;
}

.field-control,
.search-control,
.select-control {
    border: 0 !important;
    border-bottom: 2px solid var(--pi-ink) !important;
    border-radius: 0 !important;
    background: var(--pi-paper-deep) !important;
}

.search-input,
.filter-select,
textarea,
input:not([type="checkbox"]):not([type="radio"]),
select {
    min-height: 48px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--pi-ink) !important;
    border-radius: 0 !important;
    background: var(--pi-paper-deep) !important;
    color: var(--pi-ink) !important;
    box-shadow: none !important;
}

.search-input:focus,
.filter-select:focus,
textarea:focus,
input:focus,
select:focus {
    border-bottom-color: var(--pi-signal) !important;
    outline: 0;
}

.character-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
    margin-top: 24px !important;
    border: 1px solid var(--pi-rule) !important;
    background: var(--pi-rule) !important;
}

.character-card {
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--pi-paper-light) !important;
    box-shadow: none !important;
}

.character-card:hover {
    background: var(--pi-paper-deep) !important;
}

.character-card-top {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pi-rule);
}

.character-card h4 {
    color: var(--pi-ink) !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
}

.character-card p {
    color: var(--pi-muted) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

.character-card .button-secondary {
    width: 100%;
    margin-top: auto;
}

/* Legacy pages are intentionally brought into the system without mutating their content or schema. */
body:not(.brand-page) > nav {
    position: sticky !important;
    top: 0;
    z-index: 60;
    border-bottom: 2px solid var(--pi-ink) !important;
    background: color-mix(in srgb, var(--pi-paper) 94%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
}

body:not(.brand-page) > nav > .max-w-7xl {
    width: min(100% - 48px, 1280px);
    margin-inline: auto;
}

body:not(.brand-page) > nav .gradient-text {
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--pi-ink) !important;
}

body:not(.brand-page) > nav .flex.justify-between {
    align-items: center;
}

body:not(.brand-page) > nav .space-x-4 a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--pi-muted) !important;
    font-family: var(--pi-mono);
    font-size: 0.68rem;
    font-weight: 500;
    text-decoration: none !important;
    text-transform: uppercase;
}

body:not(.brand-page) > nav + section {
    padding-block: clamp(56px, 8vw, 104px) !important;
    border-bottom: 1px solid var(--pi-rule);
    background: var(--pi-paper) !important;
    color: var(--pi-ink) !important;
}

body:not(.brand-page) > nav + section > .max-w-7xl {
    width: min(100% - 48px, 1280px);
    margin-inline: auto;
}

body:not(.brand-page) > nav + section .text-center {
    max-width: 760px;
    text-align: left !important;
}

body:not(.brand-page) > nav + section h1 {
    max-width: 14ch;
    margin: 0 !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--pi-ink) !important;
    font-size: clamp(2.45rem, 6vw, 5.1rem) !important;
    line-height: 0.98 !important;
    overflow-wrap: anywhere;
    text-align: left;
}

body:not(.brand-page) > nav + section p {
    max-width: 58ch;
    color: var(--pi-muted) !important;
    text-align: left !important;
}

body:not(.brand-page) > nav + section .justify-center {
    justify-content: flex-start !important;
}

body:not(.brand-page) .unicode-table {
    max-width: 100%;
    overflow-x: auto !important;
}

body:not(.brand-page) table {
    max-width: 100%;
}

body:not(.brand-page) .card-hover {
    transition-property: background-color, border-color, color, opacity, transform, box-shadow !important;
}

body:not(.brand-page) main {
    overflow: clip;
    padding-top: 0 !important;
}

body:not(.brand-page) main > section,
body:not(.brand-page) main > article,
body:not(.brand-page) main > div {
    padding-top: clamp(40px, 6vw, 84px);
    padding-bottom: clamp(40px, 6vw, 84px);
}

body:not(.brand-page) main h1 {
    max-width: 12ch;
}

/* Legacy blog homes used a centered, viewport-tall gradient hero. Keep the content, replace the shell. */
body:not(.brand-page) main > section.min-h-screen {
    min-height: 0 !important;
    display: block !important;
    padding-block: clamp(56px, 9vw, 120px) !important;
    background: var(--pi-paper) !important;
}

body:not(.brand-page) main > section.min-h-screen > .max-w-4xl {
    width: min(100% - 48px, 960px);
    margin-inline: auto;
    padding: 0 !important;
    text-align: left !important;
}

body:not(.brand-page) main > section.min-h-screen .animate-fade-in {
    max-width: 760px;
}

body:not(.brand-page) main > section.min-h-screen h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--pi-ink) !important;
    font-size: clamp(2.55rem, 7vw, 5.25rem) !important;
    line-height: 0.98 !important;
    text-align: left;
}

body:not(.brand-page) main > section.min-h-screen p {
    max-width: 56ch;
    color: var(--pi-muted) !important;
    text-align: left !important;
}

body:not(.brand-page) main > section.min-h-screen .flex.justify-center,
body:not(.brand-page) main > section.min-h-screen .flex.flex-col {
    justify-content: flex-start !important;
}

body:not(.brand-page) main > section.min-h-screen a[class*="bg-apple-gray-900"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pi-signal) !important;
    border-radius: 0 !important;
    background: var(--pi-signal) !important;
    color: #fffaf0 !important;
    font-family: var(--pi-mono);
    text-decoration: none !important;
}

body:not(.brand-page) main > section.min-h-screen a[class*="border-apple-gray"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pi-ink) !important;
    border-radius: 0 !important;
    color: var(--pi-ink) !important;
    font-family: var(--pi-mono);
    text-decoration: none !important;
}

body:not(.brand-page) :is(.bg-gradient-to-r, .bg-gradient-to-br, .text-transparent) {
    background-image: none !important;
}

body:not(.brand-page) .text-transparent {
    -webkit-text-fill-color: currentColor !important;
    color: var(--pi-ink) !important;
}

body:not(.brand-page) .transition-all {
    transition-property: background-color, border-color, color, opacity, transform, box-shadow !important;
}

body:not(.brand-page) .animate-fade-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body:not(.brand-page) .h-48.bg-gradient-to-br {
    background: var(--pi-ink) !important;
}

body:not(.brand-page) header a[aria-label*="Home"] svg,
body:not(.brand-page) header a[aria-label*="Accueil"] svg {
    display: none;
}

body:not(.brand-page) header a[aria-label*="Home"]::before,
body:not(.brand-page) header a[aria-label*="Accueil"]::before {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-grid;
    place-items: center;
    background: var(--pi-signal);
    color: #fffaf0;
    content: "IC";
    font-family: var(--pi-mono);
    font-size: 8px;
    font-weight: 500;
}

body:not(.brand-page) main h2 {
    margin-top: 0 !important;
    font-size: clamp(1.85rem, 3.2vw, 3.3rem) !important;
}

body:not(.brand-page) main h3 {
    color: var(--pi-ink) !important;
    font-size: clamp(1.22rem, 2vw, 1.58rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

body:not(.brand-page) main p,
body:not(.brand-page) main li {
    color: var(--pi-muted) !important;
}

body:not(.brand-page) main a:not(.button-primary):not(.button-secondary) {
    color: var(--pi-info) !important;
    text-decoration-color: color-mix(in srgb, var(--pi-info) 45%, transparent);
    text-underline-offset: 0.18em;
}

body:not(.brand-page) main :is(.rounded-xl, .rounded-2xl, .rounded-lg, .rounded-md, .rounded) {
    border-radius: 0 !important;
}

body:not(.brand-page) main :is(.shadow, .shadow-lg, .shadow-xl, .shadow-2xl) {
    box-shadow: none !important;
}

body:not(.brand-page) main :is(.bg-white, .bg-apple-gray-50, .bg-gray-50, .bg-apple-gray-100) {
    background: var(--pi-paper-light) !important;
}

body:not(.brand-page) main :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-apple-gray-200, .border-apple-gray-300) {
    border-color: var(--pi-rule) !important;
}

body:not(.brand-page) article,
body:not(.brand-page) .prose,
body:not(.brand-page) .article-content {
    max-width: 72ch;
}

body:not(.brand-page) article :is(h2, h3) {
    margin-top: 2.1em !important;
}

body:not(.brand-page) article :is(ul, ol) {
    padding-left: 1.25em;
}

body:not(.brand-page) article li + li {
    margin-top: 0.55em;
}

body:not(.brand-page) blockquote {
    margin-inline: 0;
    padding: 18px 22px;
    border: 1px solid var(--pi-rule);
    background: var(--pi-paper-deep);
    box-shadow: inset 0 2px 0 var(--pi-signal);
    color: var(--pi-ink);
}

body:not(.brand-page) pre,
body:not(.brand-page) code:not(.character-card code):not(.quick-copy-list code) {
    border-radius: 0 !important;
}

body:not(.brand-page) pre {
    overflow-x: auto;
    padding: 18px;
    border: 1px solid var(--pi-ink);
    background: var(--pi-ink);
    color: rgba(255, 255, 255, 0.85);
}

body:not(.brand-page) code {
    color: var(--pi-signal);
}

.site-footer,
body:not(.brand-page) footer {
    border-top: 2px solid var(--pi-ink) !important;
    background: var(--pi-ink) !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.site-footer :is(h2, h3, h4, p, a),
body:not(.brand-page) footer :is(h2, h3, h4, p, a) {
    color: rgba(255, 255, 255, 0.78) !important;
}

.site-footer a:hover,
body:not(.brand-page) footer a:hover {
    color: #fffaf0 !important;
}

html[data-theme="dark"] .site-nav,
html[data-theme="dark"] body:not(.brand-page) header.fixed,
html[data-theme="dark"] body:not(.brand-page) > header {
    border-bottom-color: rgba(255, 255, 255, 0.76) !important;
    background: color-mix(in srgb, var(--pi-ink) 94%, transparent) !important;
}

html[data-theme="dark"] :is(.brand-mark, .brand-mark span, .nav-links a, .icon-button, .text-button, .hero-copy h1, main h1, main h2, main h3, .instant-panel h2, .tool-panel h3) {
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] :is(.hero-shell, .section-band, .instant-panel, .tool-panel, .pricing-panel, .character-card, body:not(.brand-page) main :is(.bg-white, .bg-apple-gray-50, .bg-gray-50, .bg-apple-gray-100)) {
    background: #292925 !important;
}

html[data-theme="dark"] :is(.instant-panel, .tool-panel, .pricing-panel, .character-grid, .character-card, .trust-strip, .quick-copy-list, .quick-copy-list button) {
    border-color: rgba(255, 255, 255, 0.34) !important;
}

html[data-theme="dark"] :is(.search-input, .filter-select, textarea, input:not([type="checkbox"]):not([type="radio"]), select, .field-control, .search-control, .select-control) {
    border-bottom-color: rgba(255, 255, 255, 0.76) !important;
    background: #363631 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] :is(.hero-shell, .section-band, body:not(.brand-page) main > section, body:not(.brand-page) main > article) {
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

@keyframes pi-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-copy,
.instant-panel {
    animation: pi-rise 240ms var(--pi-ease-out) both;
}

.instant-panel {
    animation-delay: 55ms;
}

@media (max-width: 980px) {
    .site-nav .nav-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-trigger {
        display: inline-grid !important;
    }

    .hero-grid,
    .tool-layout,
    .split-heading {
        grid-template-columns: 1fr !important;
    }

    .hero-shell::after {
        display: none;
    }

    .hero-copy {
        padding-right: 0;
    }

    .instant-panel {
        max-width: 680px;
    }

    .character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .site-container,
    body:not(.brand-page) header > div,
    body:not(.brand-page) main > .container,
    body:not(.brand-page) main > .max-w-7xl,
    body:not(.brand-page) footer > div {
        width: min(100% - 32px, 1280px);
    }

    .site-nav,
    body:not(.brand-page) header.fixed,
    body:not(.brand-page) > header {
        min-height: 64px;
    }

    .site-nav .nav-inner {
        min-height: 62px;
        gap: 8px;
    }

    .brand-mark {
        font-size: 0.76rem;
    }

    .brand-dot,
    .brand-mark::before {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .mobile-menu-links {
        grid-template-columns: 1fr;
    }

    body:not(.brand-page) > nav > .max-w-7xl,
    body:not(.brand-page) > nav + section > .max-w-7xl {
        width: min(100% - 32px, 1280px);
    }

    body:not(.brand-page) > nav .flex.justify-between {
        height: auto !important;
        min-height: 62px;
        flex-wrap: wrap;
        padding-block: 8px;
    }

    body:not(.brand-page) > nav .space-x-4 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin-top: 8px;
        border-top: 1px solid var(--pi-rule);
    }

    body:not(.brand-page) > nav .space-x-4 > a {
        min-width: 0;
        justify-content: center;
        padding-inline: 3px;
        font-size: 0.56rem;
        text-align: center;
        white-space: normal;
    }

    body:not(.brand-page) > nav + section h1 {
        max-width: 100%;
        font-size: clamp(2.1rem, 9vw, 3rem) !important;
    }

    .hero-shell {
        padding-block: 44px 40px !important;
    }

    .hero-copy h1,
    main h1,
    body:not(.brand-page) main h1 {
        max-width: 12ch;
        font-size: clamp(2.45rem, 13vw, 4.35rem) !important;
        line-height: 0.98 !important;
    }

    .hero-lede {
        margin-top: 18px !important;
        font-size: 1rem !important;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions :is(a, button) {
        width: 100%;
    }

    .trust-strip {
        grid-template-columns: 1fr;
    }

    .trust-strip div,
    .trust-strip div + div {
        padding: 12px 0 !important;
        border-left: 0;
        border-top: 1px solid var(--pi-rule);
    }

    .trust-strip div:first-child {
        border-top: 0;
    }

    .control-row,
    .character-grid {
        grid-template-columns: 1fr !important;
    }

    .character-card {
        padding: 16px !important;
    }

    body:not(.brand-page) main > section.min-h-screen > .max-w-4xl {
        width: min(100% - 32px, 960px);
    }

    body:not(.brand-page) main > section.min-h-screen h1 {
        font-size: clamp(2rem, 7.5vw, 2.5rem) !important;
    }

    body:not(.brand-page) main > section,
    body:not(.brand-page) main > article,
    body:not(.brand-page) main > div {
        padding-block: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* === TikTok username vs display name compare block === */
.highlight-band {
    background: color-mix(in srgb, var(--pi-accent, #f2eee4) 22%, transparent);
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.compare-card {
    border: 1px solid var(--pi-border, #e5e1d8);
    border-radius: 1rem;
    padding: 1.5rem;
    background: #fff;
}

.compare-card.blocked {
    border-color: #e7b4b4;
    background: #fdf5f5;
}

.compare-card.allowed {
    border-color: #b4dcc4;
    background: #f3fbf6;
}

.compare-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.compare-card.blocked .compare-badge {
    background: #f6d6d6;
    color: #9b2c2c;
}

.compare-card.allowed .compare-badge {
    background: #cdeede;
    color: #1f6b42;
}

.compare-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.compare-card ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    color: #555;
}

.compare-card li {
    margin-bottom: 0.35rem;
}

.compare-foot {
    margin-top: 1.5rem;
    font-size: 0.98rem;
    font-weight: 500;
}

/* === Compatibility table === */
.compat-table th,
.compat-table td {
    font-size: 0.9rem;
    vertical-align: top;
}

.compat-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--pi-accent, #f2eee4) 12%, transparent);
}

/* === Hero note === */
.hero-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #6b6b6b;
}

/* === Responsive: stack compare grid on mobile === */
@media (max-width: 640px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
}

/* === Unicode character tables (brand-page) === */
.brand-page .unicode-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--pi-border, #e5e0d5) 100%, transparent);
    border-radius: 14px;
    background: #fff;
}

.brand-page .unicode-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 520px;
}

.brand-page .unicode-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--pi-accent, #f2eee4) 40%, #fff);
    font-weight: 600;
    color: #3a3a3a;
    border-bottom: 1px solid color-mix(in srgb, var(--pi-border, #e5e0d5) 100%, transparent);
    white-space: nowrap;
}

.brand-page .unicode-table tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--pi-border, #e5e0d5) 70%, transparent);
    vertical-align: middle;
}

.brand-page .unicode-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--pi-accent, #f2eee4) 14%, transparent);
}

.brand-page .unicode-table tbody tr:hover {
    background: color-mix(in srgb, var(--pi-accent, #f2eee4) 28%, transparent);
}

.brand-page .unicode-table .char-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05rem;
    color: #555;
    min-width: 3rem;
}

.brand-page .unicode-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    color: #4a4a4a;
    background: color-mix(in srgb, var(--pi-accent, #f2eee4) 50%, transparent);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
}

.brand-page .platform-table tbody td:first-child {
    font-weight: 500;
}

.brand-page .platform-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #6b6b6b;
}

@media (max-width: 640px) {
    .brand-page .unicode-table {
        font-size: 0.82rem;
    }
    .brand-page .unicode-table thead th,
    .brand-page .unicode-table tbody td {
        padding: 0.55rem 0.65rem;
    }
}