*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter var,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,samp,pre{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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{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}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--background: 0 0% 100%;--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary: 240 5.9% 10%;--primary-foreground: 0 0% 98%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 72.22% 50.59%;--destructive-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 240 5.9% 10%;--radius: .5rem}.dark{--background: 240 10% 3.9%;--foreground: 0 0% 98%;--card: 240 10% 3.9%;--card-foreground: 0 0% 98%;--popover: 240 10% 3.9%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 240 5.9% 10%;--secondary: 240 3.7% 15.9%;--secondary-foreground: 0 0% 98%;--muted: 240 3.7% 15.9%;--muted-foreground: 240 5% 64.9%;--accent: 240 3.7% 15.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 240 3.7% 15.9%;--input: 240 3.7% 15.9%;--ring: 240 4.9% 83.9%}*{--tw-border-opacity: 1;border-color:hsl(var(--border) / var(--tw-border-opacity))}body{--tw-bg-opacity: 1;background-color:hsl(var(--background) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:hsl(var(--foreground) / var(--tw-text-opacity))}*,:before,:after{--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: rgb(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: rgb(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: }.container{width:100%;margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}@media (min-width: 1400px){.container{max-width:1400px}}.hardle-yellow{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops));--tw-gradient-from: #eab308 var(--tw-gradient-from-position);--tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hardle-green{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops));--tw-gradient-from: #16a34a var(--tw-gradient-from-position);--tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: #15803d var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hardle-gray{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops));--tw-gradient-from: #71717a var(--tw-gradient-from-position);--tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: #52525b var(--tw-gradient-to-position);--tw-text-opacity: 1 !important;color:rgb(228 228 231 / var(--tw-text-opacity))!important}.hardle-gray:is(.dark *){--tw-gradient-from: #52525b var(--tw-gradient-from-position);--tw-gradient-to: rgb(82 82 91 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: #3f3f46 var(--tw-gradient-to-position);--tw-text-opacity: 1 !important;color:rgb(212 212 216 / var(--tw-text-opacity))!important}.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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-1{bottom:-.25rem}.-right-\[1px\]{right:-1px}.-top-\[3\.2rem\]{top:-3.2rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.left-0{left:0}.left-0\.5{left:.125rem}.left-1{left:.25rem}.left-\[50\%\]{left:50%}.right-0{right:0}.right-4{right:1rem}.right-\[1px\]{right:1px}.top-0{top:0}.top-0\.5{top:.125rem}.top-1{top:.25rem}.top-4{top:1rem}.top-\[1px\]{top:1px}.top-\[3px\]{top:3px}.top-\[50\%\]{top:50%}.z-10{z-index:10}.z-50{z-index:50}.col-span-2{grid-column:span 2 / span 2}.m-0{margin:0}.m-0\.5{margin:.125rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-auto{margin-right:auto}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.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}.\!h-8{height:2rem!important}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-44{height:11rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[1\.15rem\]{height:1.15rem}.h-\[11\.5rem\]{height:11.5rem}.h-\[3\.7rem\]{height:3.7rem}.h-full{height:100%}.max-h-\[90\%\]{max-height:90%}.max-h-\[95\%\]{max-height:95%}.\!w-8{width:2rem!important}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-5\/12{width:41.666667%}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-7\/12{width:58.333333%}.w-8{width:2rem}.w-\[1\.15rem\]{width:1.15rem}.w-\[3\.3rem\]{width:3.3rem}.w-\[94\%\]{width:94%}.w-full{width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-\[0\.5\]{flex:.5}.flex-\[1\.5\]{flex:1.5}.table-auto{table-layout:auto}.border-separate{border-collapse:separate}.translate-x-\[-50\%\]{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-75{--tw-scale-x: .75;--tw-scale-y: .75;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.divide-slate-700>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(51 65 85 / var(--tw-divide-opacity))}.self-stretch{align-self:stretch}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded{border-radius:.25rem}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.\!border-slate-600{--tw-border-opacity: 1 !important;border-color:rgb(71 85 105 / var(--tw-border-opacity))!important}.border-black{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.border-input{--tw-border-opacity: 1;border-color:hsl(var(--input) / var(--tw-border-opacity))}.border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.border-l-transparent{border-left-color:transparent}.border-t-transparent{border-top-color:transparent}.bg-background{--tw-bg-opacity: 1;background-color:hsl(var(--background) / var(--tw-bg-opacity))}.bg-background\/80{background-color:hsl(var(--background) / .8)}.bg-border{--tw-bg-opacity: 1;background-color:hsl(var(--border) / var(--tw-bg-opacity))}.bg-destructive{--tw-bg-opacity: 1;background-color:hsl(var(--destructive) / var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:hsl(var(--primary) / var(--tw-bg-opacity))}.bg-rose-600{--tw-bg-opacity: 1;background-color:rgb(225 29 72 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:hsl(var(--secondary) / var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-no-repeat{background-repeat:no-repeat}.fill-black{fill:#000}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-6{padding:1.5rem}.p-px{padding:1px}.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-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pr-1\.5{padding-right:.375rem}.pr-4{padding-right:1rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-bottom{vertical-align:bottom}.font-head{font-family:Righteous,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.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-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-\[0\.85rem\]{line-height:.85rem}.leading-\[0\.9rem\]{line-height:.9rem}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-destructive-foreground{--tw-text-opacity: 1;color:hsl(var(--destructive-foreground) / var(--tw-text-opacity))}.text-foreground{--tw-text-opacity: 1;color:hsl(var(--foreground) / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-green-200{--tw-text-opacity: 1;color:rgb(187 247 208 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-green-900{--tw-text-opacity: 1;color:rgb(20 83 45 / var(--tw-text-opacity))}.text-muted-foreground{--tw-text-opacity: 1;color:hsl(var(--muted-foreground) / var(--tw-text-opacity))}.text-primary{--tw-text-opacity: 1;color:hsl(var(--primary) / var(--tw-text-opacity))}.text-primary-foreground{--tw-text-opacity: 1;color:hsl(var(--primary-foreground) / var(--tw-text-opacity))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity))}.text-rose-500{--tw-text-opacity: 1;color:rgb(244 63 94 / var(--tw-text-opacity))}.text-secondary-foreground{--tw-text-opacity: 1;color:hsl(var(--secondary-foreground) / var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity: 1;color:rgb(133 77 14 / var(--tw-text-opacity))}.text-zinc-400{--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring-offset-background{--tw-ring-offset-color: hsl(var(--background) / 1)}.blur{--tw-blur: blur(8px);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)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));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)}.sepia{--tw-sepia: sepia(100%);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)}.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);-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)}.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-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-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@font-face{font-family:Righteous;src:url(fonts/Righteous-Regular.ttf) format("truetype")}html,body{height:100%;width:100%;-webkit-tap-highlight-color:rgba(255,255,255,0)}body{display:flex;justify-content:center;background-color:#fff}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.hover\:bg-accent:hover{--tw-bg-opacity: 1;background-color:hsl(var(--accent) / var(--tw-bg-opacity))}.hover\:bg-destructive\/90:hover{background-color:hsl(var(--destructive) / .9)}.hover\:bg-primary\/90:hover{background-color:hsl(var(--primary) / .9)}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary) / .8)}.hover\:text-accent-foreground:hover{--tw-text-opacity: 1;color:hsl(var(--accent-foreground) / var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.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-ring:focus{--tw-ring-opacity: 1;--tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--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-visible\:ring-ring:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.group:active .group-active\:bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.group:active .group-active\:opacity-90{opacity:.9}.group:active .group-active\:shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.group.toaster .group-\[\.toaster\]\:border-border{--tw-border-opacity: 1;border-color:hsl(var(--border) / var(--tw-border-opacity))}.group.toast .group-\[\.toast\]\:bg-muted{--tw-bg-opacity: 1;background-color:hsl(var(--muted) / var(--tw-bg-opacity))}.group.toast .group-\[\.toast\]\:bg-primary{--tw-bg-opacity: 1;background-color:hsl(var(--primary) / var(--tw-bg-opacity))}.group.toaster .group-\[\.toaster\]\:bg-background{--tw-bg-opacity: 1;background-color:hsl(var(--background) / var(--tw-bg-opacity))}.group.toast .group-\[\.toast\]\:text-muted-foreground{--tw-text-opacity: 1;color:hsl(var(--muted-foreground) / var(--tw-text-opacity))}.group.toast .group-\[\.toast\]\:text-primary-foreground{--tw-text-opacity: 1;color:hsl(var(--primary-foreground) / var(--tw-text-opacity))}.group.toaster .group-\[\.toaster\]\:text-foreground{--tw-text-opacity: 1;color:hsl(var(--foreground) / var(--tw-text-opacity))}.group.toaster .group-\[\.toaster\]\:shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.data-\[state\=open\]\:bg-accent[data-state=open]{--tw-bg-opacity: 1;background-color:hsl(var(--accent) / var(--tw-bg-opacity))}.data-\[state\=open\]\:bg-secondary[data-state=open]{--tw-bg-opacity: 1;background-color:hsl(var(--secondary) / var(--tw-bg-opacity))}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{--tw-text-opacity: 1;color:hsl(var(--muted-foreground) / var(--tw-text-opacity))}.dark\:divide-slate-400:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(148 163 184 / var(--tw-divide-opacity))}.dark\:border:is(.dark *){border-width:1px}.dark\:\!border-slate-300:is(.dark *){--tw-border-opacity: 1 !important;border-color:rgb(203 213 225 / var(--tw-border-opacity))!important}.dark\:border-slate-400:is(.dark *){--tw-border-opacity: 1;border-color:rgb(148 163 184 / var(--tw-border-opacity))}.dark\:border-slate-700:is(.dark *){--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity))}.dark\:border-slate-900:is(.dark *){--tw-border-opacity: 1;border-color:rgb(15 23 42 / var(--tw-border-opacity))}.dark\:border-transparent:is(.dark *){border-color:transparent}.dark\:border-white:is(.dark *){--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.dark\:bg-white:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.dark\:fill-neutral-200:is(.dark *){fill:#e5e5e5}.dark\:text-neutral-200:is(.dark *){--tw-text-opacity: 1;color:rgb(229 229 229 / var(--tw-text-opacity))}.dark\:text-neutral-500:is(.dark *){--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity))}.dark\:text-slate-300:is(.dark *){--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity))}.dark\:text-slate-900:is(.dark *){--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.dark\:text-white:is(.dark *){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.group:active .dark\:group-active\:bg-gray-600:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}@media (min-width: 640px){.sm\:max-w-sm{max-width:24rem}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\: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 * calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.sm\:p-3{padding:.75rem}.sm\:py-4{padding-top:1rem;padding-bottom:1rem}.sm\:text-left{text-align:left}.sm\:drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));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)}.dark\:sm\:bg-gray-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}}

/* ============================================================
   Hourly Hardle 鈥?layout, dialogs and interaction polish
   ============================================================ */
html.dark { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }

#app {
  height: 100%;
  min-height: 0;
}
#board {
  min-height: 0;
  scrollbar-width: none;
}
#board::-webkit-scrollbar { display: none; }

.countdown {
  width: 5.1rem;
  white-space: normal;
}
.countdown strong { display: block; font-variant-numeric: tabular-nums; }

.tile {
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
  touch-action: none;
}
.tile:not(.tile-marked):not(.tile-locked):hover {
  border-color: rgb(148 163 184);
}
.dark .tile:not(.tile-marked):not(.tile-locked):hover {
  border-color: rgb(100 116 139);
}
.tile-marked {
  border-color: transparent !important;
  color: #fff;
}
.tile-active {
  border-width: 2px !important;
  border-color: rgb(71 85 105) !important;
  box-shadow: none;
}
.dark .tile-active {
  border-width: 1px !important;
  border-color: rgb(203 213 225) !important;
}
.tile-correct { cursor: default; }
.tile-bump { animation: tile-bump 180ms ease; }
@keyframes tile-bump {
  0% { transform: scale(1); }
  45% { transform: scale(0.91); }
  100% { transform: scale(1); }
}
.tile-lock {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  opacity: 0.9;
  pointer-events: none;
}
.count-bubble {
  animation: bubble-pop 160ms ease-out;
}
@keyframes bubble-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Keyboard */
.key-face {
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.key-face.key-green { border-color: transparent !important; color: #fff; }
.key-face.key-yellow { border-color: transparent !important; color: #fff; }
.key-face.key-gray { border-color: transparent !important; }

/* Result */
.result-panel {
  border-top: 1px solid rgb(0 0 0);
  padding-top: 0.75rem;
  width: 100%;
  animation: result-in 220ms ease-out;
}
.dark .result-panel { border-color: #fff; }
@keyframes result-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.result-message {
  font-size: 1.15rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-align: center;
  text-wrap: pretty;
}
.share-grid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.05rem;
  letter-spacing: 0.015em;
  white-space: pre;
  margin: 0.25rem 0 0.5rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.85rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color 120ms ease, opacity 120ms ease, transform 80ms ease;
}
.btn:hover { background: hsl(var(--accent)); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.btn-primary:hover { background: #15803d; border-color: #15803d; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--foreground));
}
.icon-btn:hover { background: hsl(var(--accent)); }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  top: 1rem;
  z-index: 300;
  transform: translate(-50%, -0.75rem);
  max-width: min(92vw, 28rem);
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  background: #18181b;
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.22);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: #991b1b; }
.dark .toast { background: #f4f4f5; color: #18181b; }
.dark .toast.is-error { background: #dc2626; color: #fff; }

/* Modal + drawer */
.modal-backdrop,
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(0 0 0 / 0.4);
  backdrop-filter: blur(2px);
  animation: fade-in 150ms ease-out;
}
.modal-backdrop { display: flex; align-items: center; justify-content: center; padding: 0.75rem; }
.modal-panel {
  width: min(94vw, 32rem);
  max-height: min(90dvh, 52rem);
  overflow: auto;
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.3);
  padding: 1.5rem;
  animation: dialog-in 170ms ease-out;
}
.tutorial-panel { width: min(94vw, 32rem); }
.legal-panel { width: min(94vw, 30rem); }
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.modal-title { font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.modal-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.25rem 0 0;
  border-radius: 0.375rem;
  color: hsl(var(--muted-foreground));
}
.modal-close:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

.drawer-backdrop { background: rgb(0 0 0 / 0.3); }
.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: flex;
  width: min(100%, 24rem);
  max-width: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: -16px 0 40px rgb(0 0 0 / 0.18);
  animation: drawer-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}
.menu-list { display: grid; gap: 0.25rem; padding: 1rem 0 0; margin: 0 -0.5rem; }
.menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.95rem;
  text-align: left;
}
.menu-item:hover { background: hsl(var(--accent)); }
.menu-foot { display: flex; flex-direction: column; gap: 1rem; }
.menu-note {
  margin-top: 0.85rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.45rem;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  line-height: 1.3;
}
.menu-note strong { color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }

/* Statistics */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 1.1rem 0 1.25rem;
  text-align: center;
}
.stat-value { font-size: 1.4rem; line-height: 1.5rem; font-weight: 700; }
.stat-label { margin-top: 0.35rem; font-size: 0.75rem; line-height: 0.95rem; font-weight: 600; }
.dist-title {
  margin: 0 0 0.8rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.dist-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
  font-size: 0.82rem;
  font-weight: 700;
}
.bar-track {
  display: flex;
  align-items: center;
  min-height: 1.25rem;
}
.bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 1.5rem;
  height: 1.25rem;
  padding-right: 0.35rem;
  border-radius: 0.15rem;
  background: #9ca3af;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  transition: width 320ms ease;
}
.dark .bar-fill { background: #52525b; }
.stats-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.4rem;
}

/* Tutorial */
.tutorial-panel { font-size: 0.875rem; line-height: 1.38; }
.tutorial-panel p { margin: 0.65rem 0; }
.tutorial-panel .demo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
}
.demo-tile {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  margin: 0 0.125rem;
  border: 1px solid rgb(203 213 225);
  border-radius: 0;
  font-size: 1.15rem;
  line-height: 1;
}
.dark .demo-tile { border-color: rgb(51 65 85); }
.demo-tile.marked { border-color: transparent; color: #fff; }
.demo-counts {
  position: relative;
  width: 3rem;
  height: 2rem;
  margin-left: 0.3rem;
  color: #fff;
  font-size: 1rem;
}
.demo-counts span {
  position: absolute;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.125rem;
  line-height: 1;
}
.demo-counts .yellow { left: 0; top: 0; }
.demo-counts .green { right: 0; bottom: 0; }
.demo-trash {
  display: inline-flex;
  width: 1.5rem;
  height: 2rem;
  align-items: center;
  justify-content: flex-end;
  margin-right: 0.2rem;
  color: #9ca3af;
}
.tutorial-rule { display: flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0; }
.tutorial-rule span.num {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.12rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
.tutorial-table { width: 100%; margin-top: 0.6rem; border-collapse: collapse; font-size: 0.8rem; }
.tutorial-table td { padding: 0.15rem 0; vertical-align: top; }
.tutorial-table td:first-child { width: 6.6rem; color: hsl(var(--muted-foreground)); }
.tutorial-foot {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid hsl(var(--border));
}
.tutorial-foot h3 { margin: 0 0 0.45rem; font-size: 0.9rem; font-weight: 700; text-align: center; }
.legal-panel h2 { font-size: 1rem; font-weight: 700; margin: 1rem 0 0.35rem; }
.legal-panel p, .legal-panel li { font-size: 0.82rem; line-height: 1.45; }
.legal-panel ul { list-style: disc; padding-left: 1.15rem; margin: 0.35rem 0; }

@media (max-width: 639px) {
  body { height: 100dvh; }
  #app { max-width: 100%; border-radius: 0; box-shadow: none; }
  .modal-backdrop { align-items: center; padding: 0.5rem; }
  .modal-panel { width: 100%; max-height: 92dvh; padding: 1rem; }
  .result-panel { padding-top: 0.6rem; }
  .result-message { font-size: 1rem; line-height: 1.3rem; }
  .share-grid { font-size: 0.78rem; }
}
@media (max-height: 760px) and (min-width: 640px) {
  #app { overflow-y: auto; }
  #board { flex: 0 0 auto; }
  #keyboard-wrap { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* Utility classes used by the hourly build but not emitted by the
   original Tailwind bundle. */
.hidden { display: none !important; }
.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: end;
}
@media (min-width: 640px) {
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .result-grid { align-items: stretch; }
}
.modal-open { overflow: hidden; }
/* Keep icon SVGs at their intrinsic size inside the square header buttons. */
svg.lucide,
.lucide-icon { flex: none; }

/* Match the original site's translucent light backdrop. */
.modal-backdrop,
.drawer-backdrop {
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(4px);
}
/* Final layout corrections */
[hidden] { display: none !important; }
.tutorial-panel, .legal-panel { width: auto; }
.countdown { width: 6.9rem; }
.result-panel {
  padding-top: 1rem;
  padding-bottom: 0.7rem;
}
.result-panel .mt-3 { margin-top: 1rem; }
.result-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
@media (max-width: 639px) {
  .result-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
  .result-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
/* Result blocks: keep the message in a narrow column, like the original. */
.result-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  column-gap: 0.6rem;
  row-gap: 0.75rem;
}
.result-message {
  max-width: 13rem;
  margin-left: auto;
  margin-right: auto;
}
.countdown { flex: none; width: 7.3rem; }
@media (max-width: 639px) {
  .result-grid { grid-template-columns: minmax(0, 1fr); }
  .result-message { max-width: 18rem; }
}
/* The original result card keeps its two-column layout on phones,
   which also keeps the board at its normal vertical position. */
@media (max-width: 639px) {
  .result-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    column-gap: 0.4rem;
    row-gap: 0.5rem;
    align-items: end;
  }
  .result-message {
    max-width: 11rem;
    font-size: 1rem;
    line-height: 1.3rem;
  }
  .result-panel { padding-top: 0.7rem; padding-bottom: 0.5rem; }
  .result-panel .mt-3 { margin-top: 0.65rem; }
}
/* ------------------------------------------------------------------
   Original Hardle animation timings
   ------------------------------------------------------------------ */

/* A submitted guess's two count bubbles grow into place over 400ms. */
.count-bubble {
  height: 0;
  opacity: 0;
  overflow: hidden;
  animation: count-grow 400ms cubic-bezier(0.33, 1, 0.68, 1) both;
}
@keyframes count-grow {
  from { height: 0; opacity: 0; }
  to { height: 1.5rem; opacity: 1; }
}

/* Winning tiles fade/unblur one at a time (100ms, then every 300ms). */
.win-reveal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  animation: win-reveal 400ms cubic-bezier(0.65, 0, 0.35, 1) both;
  pointer-events: none;
}
@keyframes win-reveal {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

/* The result card sits over the keyboard, exactly like the original.
   It is 11.5rem tall, anchored 4px past the keyboard wrap, and scales in. */
.result-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 11.5rem;
  padding: 4px 16px;
  border-top: 1px solid #000;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  transform-origin: center center;
  animation: result-reveal 400ms cubic-bezier(0.33, 1, 0.68, 1) both;
}
.dark .result-panel { border-color: #fff; }
@keyframes result-reveal {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1rem;
  align-items: stretch;
  width: 100%;
  height: 100%;
  margin: 0.35rem 0 0.2rem;
}
.result-left,
.result-right {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.result-left { padding-top: 0.45rem; }
.result-left-main { display: flex; flex-direction: column; align-items: center; }
.result-message {
  max-width: 12.2rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-align: center;
  text-wrap: pretty;
}
.answer-row {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
}
.answer-tile {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  animation: answer-reveal 2000ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes answer-reveal {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

.result-right { align-items: center; }
.result-right > div { width: 100%; text-align: left; }
.result-right .btn { margin-top: 0; }
.result-footer {
  width: 100%;
  margin-top: 0.15rem;
  text-align: center;
}
.result-footer a { font-size: 0.875rem; line-height: 1rem; }

.undo-holder {
  transition: opacity 220ms ease, filter 220ms ease;
}
.result-visible .undo-holder {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

@media (max-width: 639px) {
  .result-panel { height: 11.5rem; padding: 4px 14px; }
  .result-grid { gap: 0.45rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .result-message { max-width: 10.4rem; font-size: 1rem; line-height: 1.3rem; }
  .result-left { padding-top: 0.35rem; }
  .answer-tile { width: 1.6rem; height: 1.6rem; font-size: 1.1rem; }
  .result-right .text-xs { font-size: 0.64rem; line-height: 0.82rem; }
  .share-grid { font-size: 0.74rem; line-height: 0.95rem; }
}
/* ------------------------------------------------------------------
   One-screen fit: the board yields height on short windows while the
   keyboard and result sheet stay visible. No page scrollbars.
   ------------------------------------------------------------------ */
html,
body {
  height: 100%;
  overflow: hidden;
}

#site-shell {
  overflow: hidden;
}

@media (max-height: 760px) and (min-width: 640px) {
  #app { overflow: visible; }
  #board { flex: 0 1 auto; min-height: 0; }
  #keyboard-wrap { flex: 0 0 auto; }
}