/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-orange-400:oklch(75% .183 55.934);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-600:oklch(64.6% .222 41.116);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-lime-400:oklch(84.1% .238 128.85);--color-lime-500:oklch(76.8% .233 130.85);--color-lime-600:oklch(64.8% .2 131.684);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-600:oklch(60% .118 184.704);--color-cyan-400:oklch(78.9% .154 211.53);--color-cyan-500:oklch(71.5% .143 215.221);--color-cyan-600:oklch(60.9% .126 221.723);--color-sky-400:oklch(74.6% .16 232.661);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-600:oklch(58.8% .158 241.966);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-violet-400:oklch(70.2% .183 293.541);--color-violet-500:oklch(60.6% .25 292.717);--color-violet-600:oklch(54.1% .281 293.009);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-fuchsia-400:oklch(74% .238 322.16);--color-fuchsia-500:oklch(66.7% .295 322.15);--color-fuchsia-600:oklch(59.1% .293 322.896);--color-pink-300:oklch(82.3% .12 346.018);--color-pink-400:oklch(71.8% .202 349.761);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-900:oklch(41% .159 10.272);--color-rose-950:oklch(27.1% .105 12.094);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--drop-shadow-2xl:0 25px 25px #00000026;--blur-sm:8px;--blur-md:12px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.-top-3{top:calc(var(--spacing) * -3)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-3{top:calc(var(--spacing) * 3)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-14{right:calc(var(--spacing) * 14)}.bottom-2{bottom:calc(var(--spacing) * 2)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-3\.5{left:calc(var(--spacing) * 3.5)}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[999\]{z-index:999}.mx-auto{margin-inline:auto}.my-1{margin-block:var(--spacing)}.my-6{margin-block:calc(var(--spacing) * 6)}.my-8{margin-block:calc(var(--spacing) * 8)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-px{margin-top:1px}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-full{height:100%}.max-h-28{max-height:calc(var(--spacing) * 28)}.max-h-\[90vh\]{max-height:90vh}.max-h-\[92vh\]{max-height:92vh}.max-h-\[380px\]{max-height:380px}.min-h-\[200px\]{min-height:200px}.min-h-screen{min-height:100vh}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.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-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(var(--spacing) * var(--tw-space-x-reverse));margin-inline-end:calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-1\.5>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-slate-100>:not(:last-child)){border-color:var(--color-slate-100)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-xl{border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-amber-500\/20{border-color:#f99c0033}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/20{border-color:color-mix(in oklab, var(--color-amber-500) 20%, transparent)}}.border-amber-500\/30{border-color:#f99c004d}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/30{border-color:color-mix(in oklab, var(--color-amber-500) 30%, transparent)}}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-500\/20{border-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.border-blue-500\/20{border-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.border-blue-500\/30{border-color:#3080ff4d}@supports (color:color-mix(in lab, red, red)){.border-blue-500\/30{border-color:color-mix(in oklab, var(--color-blue-500) 30%, transparent)}}.border-cyan-500\/20{border-color:#00b7d733}@supports (color:color-mix(in lab, red, red)){.border-cyan-500\/20{border-color:color-mix(in oklab, var(--color-cyan-500) 20%, transparent)}}.border-cyan-500\/30{border-color:#00b7d74d}@supports (color:color-mix(in lab, red, red)){.border-cyan-500\/30{border-color:color-mix(in oklab, var(--color-cyan-500) 30%, transparent)}}.border-emerald-500\/20{border-color:#00bb7f33}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/20{border-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)}}.border-emerald-500\/30{border-color:#00bb7f4d}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/30{border-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)}}.border-emerald-500\/40{border-color:#00bb7f66}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/40{border-color:color-mix(in oklab, var(--color-emerald-500) 40%, transparent)}}.border-fuchsia-500\/20{border-color:#e12afb33}@supports (color:color-mix(in lab, red, red)){.border-fuchsia-500\/20{border-color:color-mix(in oklab, var(--color-fuchsia-500) 20%, transparent)}}.border-fuchsia-500\/30{border-color:#e12afb4d}@supports (color:color-mix(in lab, red, red)){.border-fuchsia-500\/30{border-color:color-mix(in oklab, var(--color-fuchsia-500) 30%, transparent)}}.border-green-500\/20{border-color:#00c75833}@supports (color:color-mix(in lab, red, red)){.border-green-500\/20{border-color:color-mix(in oklab, var(--color-green-500) 20%, transparent)}}.border-green-500\/30{border-color:#00c7584d}@supports (color:color-mix(in lab, red, red)){.border-green-500\/30{border-color:color-mix(in oklab, var(--color-green-500) 30%, transparent)}}.border-indigo-500\/20{border-color:#625fff33}@supports (color:color-mix(in lab, red, red)){.border-indigo-500\/20{border-color:color-mix(in oklab, var(--color-indigo-500) 20%, transparent)}}.border-indigo-500\/30{border-color:#625fff4d}@supports (color:color-mix(in lab, red, red)){.border-indigo-500\/30{border-color:color-mix(in oklab, var(--color-indigo-500) 30%, transparent)}}.border-lime-500\/20{border-color:#80cd0033}@supports (color:color-mix(in lab, red, red)){.border-lime-500\/20{border-color:color-mix(in oklab, var(--color-lime-500) 20%, transparent)}}.border-lime-500\/30{border-color:#80cd004d}@supports (color:color-mix(in lab, red, red)){.border-lime-500\/30{border-color:color-mix(in oklab, var(--color-lime-500) 30%, transparent)}}.border-orange-500\/20{border-color:#fe6e0033}@supports (color:color-mix(in lab, red, red)){.border-orange-500\/20{border-color:color-mix(in oklab, var(--color-orange-500) 20%, transparent)}}.border-orange-500\/30{border-color:#fe6e004d}@supports (color:color-mix(in lab, red, red)){.border-orange-500\/30{border-color:color-mix(in oklab, var(--color-orange-500) 30%, transparent)}}.border-pink-500\/20{border-color:#f6339a33}@supports (color:color-mix(in lab, red, red)){.border-pink-500\/20{border-color:color-mix(in oklab, var(--color-pink-500) 20%, transparent)}}.border-pink-500\/30{border-color:#f6339a4d}@supports (color:color-mix(in lab, red, red)){.border-pink-500\/30{border-color:color-mix(in oklab, var(--color-pink-500) 30%, transparent)}}.border-purple-500\/20{border-color:#ac4bff33}@supports (color:color-mix(in lab, red, red)){.border-purple-500\/20{border-color:color-mix(in oklab, var(--color-purple-500) 20%, transparent)}}.border-purple-500\/30{border-color:#ac4bff4d}@supports (color:color-mix(in lab, red, red)){.border-purple-500\/30{border-color:color-mix(in oklab, var(--color-purple-500) 30%, transparent)}}.border-red-500\/20{border-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.border-red-500\/20{border-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)}}.border-red-500\/30{border-color:#fb2c364d}@supports (color:color-mix(in lab, red, red)){.border-red-500\/30{border-color:color-mix(in oklab, var(--color-red-500) 30%, transparent)}}.border-rose-500\/20{border-color:#ff235733}@supports (color:color-mix(in lab, red, red)){.border-rose-500\/20{border-color:color-mix(in oklab, var(--color-rose-500) 20%, transparent)}}.border-rose-500\/30{border-color:#ff23574d}@supports (color:color-mix(in lab, red, red)){.border-rose-500\/30{border-color:color-mix(in oklab, var(--color-rose-500) 30%, transparent)}}.border-rose-500\/40{border-color:#ff235766}@supports (color:color-mix(in lab, red, red)){.border-rose-500\/40{border-color:color-mix(in oklab, var(--color-rose-500) 40%, transparent)}}.border-rose-900\/40{border-color:#8b083666}@supports (color:color-mix(in lab, red, red)){.border-rose-900\/40{border-color:color-mix(in oklab, var(--color-rose-900) 40%, transparent)}}.border-sky-500\/20{border-color:#00a5ef33}@supports (color:color-mix(in lab, red, red)){.border-sky-500\/20{border-color:color-mix(in oklab, var(--color-sky-500) 20%, transparent)}}.border-sky-500\/30{border-color:#00a5ef4d}@supports (color:color-mix(in lab, red, red)){.border-sky-500\/30{border-color:color-mix(in oklab, var(--color-sky-500) 30%, transparent)}}.border-slate-100{border-color:var(--color-slate-100)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-300{border-color:var(--color-slate-300)}.border-slate-500\/20{border-color:#62748e33}@supports (color:color-mix(in lab, red, red)){.border-slate-500\/20{border-color:color-mix(in oklab, var(--color-slate-500) 20%, transparent)}}.border-slate-500\/30{border-color:#62748e4d}@supports (color:color-mix(in lab, red, red)){.border-slate-500\/30{border-color:color-mix(in oklab, var(--color-slate-500) 30%, transparent)}}.border-slate-600{border-color:var(--color-slate-600)}.border-slate-700{border-color:var(--color-slate-700)}.border-slate-800{border-color:var(--color-slate-800)}.border-slate-800\/80{border-color:#1d293dcc}@supports (color:color-mix(in lab, red, red)){.border-slate-800\/80{border-color:color-mix(in oklab, var(--color-slate-800) 80%, transparent)}}.border-teal-500\/20{border-color:#00baa733}@supports (color:color-mix(in lab, red, red)){.border-teal-500\/20{border-color:color-mix(in oklab, var(--color-teal-500) 20%, transparent)}}.border-teal-500\/30{border-color:#00baa74d}@supports (color:color-mix(in lab, red, red)){.border-teal-500\/30{border-color:color-mix(in oklab, var(--color-teal-500) 30%, transparent)}}.border-transparent{border-color:#0000}.border-violet-500\/20{border-color:#8d54ff33}@supports (color:color-mix(in lab, red, red)){.border-violet-500\/20{border-color:color-mix(in oklab, var(--color-violet-500) 20%, transparent)}}.border-violet-500\/30{border-color:#8d54ff4d}@supports (color:color-mix(in lab, red, red)){.border-violet-500\/30{border-color:color-mix(in oklab, var(--color-violet-500) 30%, transparent)}}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-\[\#0f172a\]{background-color:#0f172a}.bg-\[\#1e293b\]{background-color:#1e293b}.bg-amber-500{background-color:var(--color-amber-500)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.bg-amber-500\/15{background-color:#f99c0026}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/15{background-color:color-mix(in oklab, var(--color-amber-500) 15%, transparent)}}.bg-amber-500\/20{background-color:#f99c0033}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/20{background-color:color-mix(in oklab, var(--color-amber-500) 20%, transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}.bg-blue-500\/5{background-color:#3080ff0d}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/5{background-color:color-mix(in oklab, var(--color-blue-500) 5%, transparent)}}.bg-blue-500\/10{background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/10{background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.bg-blue-500\/15{background-color:#3080ff26}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/15{background-color:color-mix(in oklab, var(--color-blue-500) 15%, transparent)}}.bg-blue-500\/20{background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/20{background-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-600\/90{background-color:#155dfce6}@supports (color:color-mix(in lab, red, red)){.bg-blue-600\/90{background-color:color-mix(in oklab, var(--color-blue-600) 90%, transparent)}}.bg-cyan-500\/10{background-color:#00b7d71a}@supports (color:color-mix(in lab, red, red)){.bg-cyan-500\/10{background-color:color-mix(in oklab, var(--color-cyan-500) 10%, transparent)}}.bg-cyan-500\/15{background-color:#00b7d726}@supports (color:color-mix(in lab, red, red)){.bg-cyan-500\/15{background-color:color-mix(in oklab, var(--color-cyan-500) 15%, transparent)}}.bg-cyan-500\/20{background-color:#00b7d733}@supports (color:color-mix(in lab, red, red)){.bg-cyan-500\/20{background-color:color-mix(in oklab, var(--color-cyan-500) 20%, transparent)}}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/10{background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.bg-emerald-500\/15{background-color:#00bb7f26}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/15{background-color:color-mix(in oklab, var(--color-emerald-500) 15%, transparent)}}.bg-emerald-500\/20{background-color:#00bb7f33}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/20{background-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)}}.bg-emerald-500\/25{background-color:#00bb7f40}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/25{background-color:color-mix(in oklab, var(--color-emerald-500) 25%, transparent)}}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-fuchsia-500\/10{background-color:#e12afb1a}@supports (color:color-mix(in lab, red, red)){.bg-fuchsia-500\/10{background-color:color-mix(in oklab, var(--color-fuchsia-500) 10%, transparent)}}.bg-fuchsia-500\/15{background-color:#e12afb26}@supports (color:color-mix(in lab, red, red)){.bg-fuchsia-500\/15{background-color:color-mix(in oklab, var(--color-fuchsia-500) 15%, transparent)}}.bg-fuchsia-500\/20{background-color:#e12afb33}@supports (color:color-mix(in lab, red, red)){.bg-fuchsia-500\/20{background-color:color-mix(in oklab, var(--color-fuchsia-500) 20%, transparent)}}.bg-green-500\/10{background-color:#00c7581a}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/10{background-color:color-mix(in oklab, var(--color-green-500) 10%, transparent)}}.bg-green-500\/15{background-color:#00c75826}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/15{background-color:color-mix(in oklab, var(--color-green-500) 15%, transparent)}}.bg-green-500\/20{background-color:#00c75833}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/20{background-color:color-mix(in oklab, var(--color-green-500) 20%, transparent)}}.bg-indigo-500\/10{background-color:#625fff1a}@supports (color:color-mix(in lab, red, red)){.bg-indigo-500\/10{background-color:color-mix(in oklab, var(--color-indigo-500) 10%, transparent)}}.bg-indigo-500\/15{background-color:#625fff26}@supports (color:color-mix(in lab, red, red)){.bg-indigo-500\/15{background-color:color-mix(in oklab, var(--color-indigo-500) 15%, transparent)}}.bg-indigo-500\/20{background-color:#625fff33}@supports (color:color-mix(in lab, red, red)){.bg-indigo-500\/20{background-color:color-mix(in oklab, var(--color-indigo-500) 20%, transparent)}}.bg-lime-500\/10{background-color:#80cd001a}@supports (color:color-mix(in lab, red, red)){.bg-lime-500\/10{background-color:color-mix(in oklab, var(--color-lime-500) 10%, transparent)}}.bg-lime-500\/15{background-color:#80cd0026}@supports (color:color-mix(in lab, red, red)){.bg-lime-500\/15{background-color:color-mix(in oklab, var(--color-lime-500) 15%, transparent)}}.bg-lime-500\/20{background-color:#80cd0033}@supports (color:color-mix(in lab, red, red)){.bg-lime-500\/20{background-color:color-mix(in oklab, var(--color-lime-500) 20%, transparent)}}.bg-orange-500\/10{background-color:#fe6e001a}@supports (color:color-mix(in lab, red, red)){.bg-orange-500\/10{background-color:color-mix(in oklab, var(--color-orange-500) 10%, transparent)}}.bg-orange-500\/15{background-color:#fe6e0026}@supports (color:color-mix(in lab, red, red)){.bg-orange-500\/15{background-color:color-mix(in oklab, var(--color-orange-500) 15%, transparent)}}.bg-orange-500\/20{background-color:#fe6e0033}@supports (color:color-mix(in lab, red, red)){.bg-orange-500\/20{background-color:color-mix(in oklab, var(--color-orange-500) 20%, transparent)}}.bg-pink-500\/10{background-color:#f6339a1a}@supports (color:color-mix(in lab, red, red)){.bg-pink-500\/10{background-color:color-mix(in oklab, var(--color-pink-500) 10%, transparent)}}.bg-pink-500\/15{background-color:#f6339a26}@supports (color:color-mix(in lab, red, red)){.bg-pink-500\/15{background-color:color-mix(in oklab, var(--color-pink-500) 15%, transparent)}}.bg-pink-500\/20{background-color:#f6339a33}@supports (color:color-mix(in lab, red, red)){.bg-pink-500\/20{background-color:color-mix(in oklab, var(--color-pink-500) 20%, transparent)}}.bg-purple-500\/10{background-color:#ac4bff1a}@supports (color:color-mix(in lab, red, red)){.bg-purple-500\/10{background-color:color-mix(in oklab, var(--color-purple-500) 10%, transparent)}}.bg-purple-500\/15{background-color:#ac4bff26}@supports (color:color-mix(in lab, red, red)){.bg-purple-500\/15{background-color:color-mix(in oklab, var(--color-purple-500) 15%, transparent)}}.bg-purple-500\/20{background-color:#ac4bff33}@supports (color:color-mix(in lab, red, red)){.bg-purple-500\/20{background-color:color-mix(in oklab, var(--color-purple-500) 20%, transparent)}}.bg-purple-600{background-color:var(--color-purple-600)}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-red-500\/15{background-color:#fb2c3626}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/15{background-color:color-mix(in oklab, var(--color-red-500) 15%, transparent)}}.bg-red-500\/20{background-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/20{background-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)}}.bg-rose-500\/5{background-color:#ff23570d}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/5{background-color:color-mix(in oklab, var(--color-rose-500) 5%, transparent)}}.bg-rose-500\/10{background-color:#ff23571a}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/10{background-color:color-mix(in oklab, var(--color-rose-500) 10%, transparent)}}.bg-rose-500\/15{background-color:#ff235726}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/15{background-color:color-mix(in oklab, var(--color-rose-500) 15%, transparent)}}.bg-rose-500\/20{background-color:#ff235733}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/20{background-color:color-mix(in oklab, var(--color-rose-500) 20%, transparent)}}.bg-rose-600{background-color:var(--color-rose-600)}.bg-rose-950\/10{background-color:#4d02181a}@supports (color:color-mix(in lab, red, red)){.bg-rose-950\/10{background-color:color-mix(in oklab, var(--color-rose-950) 10%, transparent)}}.bg-sky-500\/10{background-color:#00a5ef1a}@supports (color:color-mix(in lab, red, red)){.bg-sky-500\/10{background-color:color-mix(in oklab, var(--color-sky-500) 10%, transparent)}}.bg-sky-500\/15{background-color:#00a5ef26}@supports (color:color-mix(in lab, red, red)){.bg-sky-500\/15{background-color:color-mix(in oklab, var(--color-sky-500) 15%, transparent)}}.bg-sky-500\/20{background-color:#00a5ef33}@supports (color:color-mix(in lab, red, red)){.bg-sky-500\/20{background-color:color-mix(in oklab, var(--color-sky-500) 20%, transparent)}}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-50\/50{background-color:#f8fafc80}@supports (color:color-mix(in lab, red, red)){.bg-slate-50\/50{background-color:color-mix(in oklab, var(--color-slate-50) 50%, transparent)}}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-200{background-color:var(--color-slate-200)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-slate-400{background-color:var(--color-slate-400)}.bg-slate-500\/10{background-color:#62748e1a}@supports (color:color-mix(in lab, red, red)){.bg-slate-500\/10{background-color:color-mix(in oklab, var(--color-slate-500) 10%, transparent)}}.bg-slate-500\/15{background-color:#62748e26}@supports (color:color-mix(in lab, red, red)){.bg-slate-500\/15{background-color:color-mix(in oklab, var(--color-slate-500) 15%, transparent)}}.bg-slate-500\/20{background-color:#62748e33}@supports (color:color-mix(in lab, red, red)){.bg-slate-500\/20{background-color:color-mix(in oklab, var(--color-slate-500) 20%, transparent)}}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-800\/40{background-color:#1d293d66}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/40{background-color:color-mix(in oklab, var(--color-slate-800) 40%, transparent)}}.bg-slate-800\/60{background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/60{background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.bg-slate-800\/80{background-color:#1d293dcc}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/80{background-color:color-mix(in oklab, var(--color-slate-800) 80%, transparent)}}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-900\/50{background-color:#0f172b80}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/50{background-color:color-mix(in oklab, var(--color-slate-900) 50%, transparent)}}.bg-slate-950{background-color:var(--color-slate-950)}.bg-slate-950\/60{background-color:#02061899}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/60{background-color:color-mix(in oklab, var(--color-slate-950) 60%, transparent)}}.bg-slate-950\/70{background-color:#020618b3}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/70{background-color:color-mix(in oklab, var(--color-slate-950) 70%, transparent)}}.bg-slate-950\/80{background-color:#020618cc}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/80{background-color:color-mix(in oklab, var(--color-slate-950) 80%, transparent)}}.bg-teal-500\/10{background-color:#00baa71a}@supports (color:color-mix(in lab, red, red)){.bg-teal-500\/10{background-color:color-mix(in oklab, var(--color-teal-500) 10%, transparent)}}.bg-teal-500\/15{background-color:#00baa726}@supports (color:color-mix(in lab, red, red)){.bg-teal-500\/15{background-color:color-mix(in oklab, var(--color-teal-500) 15%, transparent)}}.bg-teal-500\/20{background-color:#00baa733}@supports (color:color-mix(in lab, red, red)){.bg-teal-500\/20{background-color:color-mix(in oklab, var(--color-teal-500) 20%, transparent)}}.bg-violet-500\/10{background-color:#8d54ff1a}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/10{background-color:color-mix(in oklab, var(--color-violet-500) 10%, transparent)}}.bg-violet-500\/15{background-color:#8d54ff26}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/15{background-color:color-mix(in oklab, var(--color-violet-500) 15%, transparent)}}.bg-violet-500\/20{background-color:#8d54ff33}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/20{background-color:color-mix(in oklab, var(--color-violet-500) 20%, transparent)}}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-blue-600{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-indigo-600{--tw-gradient-to:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-0{padding-top:0}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-10{padding-left:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-left{text-align:left}.align-\[-2px\]{vertical-align:-2px}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#f8fafc\]{color:#f8fafc}.text-amber-300{color:var(--color-amber-300)}.text-amber-400{color:var(--color-amber-400)}.text-amber-500{color:var(--color-amber-500)}.text-amber-600{color:var(--color-amber-600)}.text-blue-300{color:var(--color-blue-300)}.text-blue-400{color:var(--color-blue-400)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-cyan-400{color:var(--color-cyan-400)}.text-cyan-500{color:var(--color-cyan-500)}.text-cyan-600{color:var(--color-cyan-600)}.text-emerald-200{color:var(--color-emerald-200)}.text-emerald-200\/80{color:#a4f4cfcc}@supports (color:color-mix(in lab, red, red)){.text-emerald-200\/80{color:color-mix(in oklab, var(--color-emerald-200) 80%, transparent)}}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-400{color:var(--color-emerald-400)}.text-emerald-500{color:var(--color-emerald-500)}.text-emerald-600{color:var(--color-emerald-600)}.text-fuchsia-400{color:var(--color-fuchsia-400)}.text-fuchsia-500{color:var(--color-fuchsia-500)}.text-fuchsia-600{color:var(--color-fuchsia-600)}.text-green-400{color:var(--color-green-400)}.text-green-500{color:var(--color-green-500)}.text-green-600{color:var(--color-green-600)}.text-indigo-400{color:var(--color-indigo-400)}.text-indigo-500{color:var(--color-indigo-500)}.text-indigo-600{color:var(--color-indigo-600)}.text-lime-400{color:var(--color-lime-400)}.text-lime-500{color:var(--color-lime-500)}.text-lime-600{color:var(--color-lime-600)}.text-orange-400{color:var(--color-orange-400)}.text-orange-500{color:var(--color-orange-500)}.text-orange-600{color:var(--color-orange-600)}.text-pink-300{color:var(--color-pink-300)}.text-pink-400{color:var(--color-pink-400)}.text-pink-500{color:var(--color-pink-500)}.text-pink-600{color:var(--color-pink-600)}.text-purple-400{color:var(--color-purple-400)}.text-purple-500{color:var(--color-purple-500)}.text-purple-600{color:var(--color-purple-600)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-rose-200{color:var(--color-rose-200)}.text-rose-300{color:var(--color-rose-300)}.text-rose-400{color:var(--color-rose-400)}.text-rose-500{color:var(--color-rose-500)}.text-rose-600{color:var(--color-rose-600)}.text-sky-400{color:var(--color-sky-400)}.text-sky-500{color:var(--color-sky-500)}.text-sky-600{color:var(--color-sky-600)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-900{color:var(--color-slate-900)}.text-slate-950{color:var(--color-slate-950)}.text-teal-400{color:var(--color-teal-400)}.text-teal-500{color:var(--color-teal-500)}.text-teal-600{color:var(--color-teal-600)}.text-violet-400{color:var(--color-violet-400)}.text-violet-500{color:var(--color-violet-500)}.text-violet-600{color:var(--color-violet-600)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-blue-500\/20{--tw-shadow-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.shadow-blue-500\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.drop-shadow-2xl{--tw-drop-shadow-size:drop-shadow(0 25px 25px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-2xl));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-md{--tw-backdrop-blur:blur(var(--blur-md));-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-sm{--tw-backdrop-blur:blur(var(--blur-sm));-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,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-110:is(:where(.group):hover *){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:bg-black\/20:is(:where(.group):hover *){background-color:#0003}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-black\/20:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.selection\:bg-blue-500\/30 ::selection{background-color:#3080ff4d}@supports (color:color-mix(in lab, red, red)){.selection\:bg-blue-500\/30 ::selection{background-color:color-mix(in oklab, var(--color-blue-500) 30%, transparent)}}.selection\:bg-blue-500\/30::selection{background-color:#3080ff4d}@supports (color:color-mix(in lab, red, red)){.selection\:bg-blue-500\/30::selection{background-color:color-mix(in oklab, var(--color-blue-500) 30%, transparent)}}.selection\:text-blue-200 ::selection{color:var(--color-blue-200)}.selection\:text-blue-200::selection{color:var(--color-blue-200)}.placeholder\:text-slate-400::placeholder{color:var(--color-slate-400)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-emerald-500\/50:hover{border-color:#00bb7f80}@supports (color:color-mix(in lab, red, red)){.hover\:border-emerald-500\/50:hover{border-color:color-mix(in oklab, var(--color-emerald-500) 50%, transparent)}}.hover\:bg-amber-400:hover{background-color:var(--color-amber-400)}.hover\:bg-blue-500:hover{background-color:var(--color-blue-500)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-emerald-500:hover{background-color:var(--color-emerald-500)}.hover\:bg-emerald-500\/30:hover{background-color:#00bb7f4d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-emerald-500\/30:hover{background-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)}}.hover\:bg-purple-500:hover{background-color:var(--color-purple-500)}.hover\:bg-rose-500:hover{background-color:var(--color-rose-500)}.hover\:bg-rose-950\/25:hover{background-color:#4d021840}@supports (color:color-mix(in lab, red, red)){.hover\:bg-rose-950\/25:hover{background-color:color-mix(in oklab, var(--color-rose-950) 25%, transparent)}}.hover\:bg-slate-200:hover{background-color:var(--color-slate-200)}.hover\:bg-slate-300:hover{background-color:var(--color-slate-300)}.hover\:bg-slate-700:hover{background-color:var(--color-slate-700)}.hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}.hover\:from-blue-500:hover{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:to-indigo-500:hover{--tw-gradient-to:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:text-blue-300:hover{color:var(--color-blue-300)}.hover\:text-blue-500:hover{color:var(--color-blue-500)}.hover\:text-slate-300:hover{color:var(--color-slate-300)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-blue-500\/10:hover{--tw-shadow-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.hover\:shadow-blue-500\/10:hover{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 10%, transparent) var(--tw-shadow-alpha), transparent)}}}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-purple-500:focus{--tw-ring-color:var(--color-purple-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:inline{display:inline}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:p-5{padding:calc(var(--spacing) * 5)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:64rem){.lg\:col-span-4{grid-column:span 4/span 4}.lg\:w-auto{width:auto}.lg\:max-w-md{max-width:var(--container-md)}.lg\:min-w-\[180px\]{min-width:180px}.lg\:flex-1{flex:1}.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\:flex-row{flex-direction:row}.lg\:flex-nowrap{flex-wrap:nowrap}.lg\:justify-end{justify-content:flex-end}.lg\:gap-4{gap:calc(var(--spacing) * 4)}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}}@media (min-width:80rem){.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:px-10{padding-inline:calc(var(--spacing) * 10)}}@media (min-width:96rem){.\32 xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}:where(.dark\:divide-slate-800:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-slate-800)}.dark\:border-slate-700:where(.dark,.dark *){border-color:var(--color-slate-700)}.dark\:border-slate-800:where(.dark,.dark *){border-color:var(--color-slate-800)}.dark\:border-white\/5:where(.dark,.dark *){border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/5:where(.dark,.dark *){border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.dark\:bg-blue-500\/10:where(.dark,.dark *){background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-500\/10:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.dark\:bg-slate-800:where(.dark,.dark *){background-color:var(--color-slate-800)}.dark\:bg-slate-900:where(.dark,.dark *){background-color:var(--color-slate-900)}.dark\:bg-slate-900\/80:where(.dark,.dark *){background-color:#0f172bcc}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-900\/80:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-slate-900) 80%, transparent)}}.dark\:bg-slate-950:where(.dark,.dark *){background-color:var(--color-slate-950)}.dark\:bg-slate-950\/50:where(.dark,.dark *){background-color:#02061880}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-950\/50:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-slate-950) 50%, transparent)}}.dark\:bg-white:where(.dark,.dark *){background-color:var(--color-white)}.dark\:text-amber-400:where(.dark,.dark *){color:var(--color-amber-400)}.dark\:text-blue-400:where(.dark,.dark *){color:var(--color-blue-400)}.dark\:text-emerald-400:where(.dark,.dark *){color:var(--color-emerald-400)}.dark\:text-purple-400:where(.dark,.dark *){color:var(--color-purple-400)}.dark\:text-slate-200:where(.dark,.dark *){color:var(--color-slate-200)}.dark\:text-slate-300:where(.dark,.dark *){color:var(--color-slate-300)}.dark\:text-slate-400:where(.dark,.dark *){color:var(--color-slate-400)}.dark\:text-slate-900:where(.dark,.dark *){color:var(--color-slate-900)}.dark\:text-white:where(.dark,.dark *){color:var(--color-white)}@media (hover:hover){.dark\:hover\:bg-slate-700:where(.dark,.dark *):hover{background-color:var(--color-slate-700)}.dark\:hover\:text-white:where(.dark,.dark *):hover{color:var(--color-white)}}@media (min-width:1920px){.\[\@media\(min-width\:1920px\)\]\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}}}:root{--bg:#0f172a;--panel:#1e293b;--accent:#3b82f6;--text-p:#f8fafc;--text-s:#94a3b8;--border:#ffffff1a}body{background-color:var(--bg);color:var(--text-p);font-feature-settings:"kern" 1, "liga" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.005em;margin:0;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif}h1,h2,h3,h4{letter-spacing:-.02em}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#3b82f680}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@keyframes ph-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}[data-modal]:not(.hidden){animation:.18s ease-out ph-fade-in}.ph-iconbtn{--ph-accent:#60a5fa;color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background-color:#0206178c;border:1px solid #ffffff1f;border-radius:9999px;justify-content:center;align-items:center;width:1.875rem;height:1.875rem;transition:color .18s,background-color .18s,border-color .18s,transform .18s,box-shadow .18s;display:inline-flex}.ph-iconbtn svg{pointer-events:none;width:1rem;height:1rem}.ph-iconbtn:hover,.ph-iconbtn:focus-visible{color:var(--ph-accent);border-color:var(--ph-accent);background-color:#020617bf}@supports (color:color-mix(in lab, red, red)){.ph-iconbtn:hover,.ph-iconbtn:focus-visible{border-color:color-mix(in srgb, var(--ph-accent) 45%, transparent)}}.ph-iconbtn:hover,.ph-iconbtn:focus-visible{outline:none;transform:scale(1.08)}.ph-iconbtn:active{transform:scale(.94)}.ph-iconbtn.is-active{color:var(--ph-accent);border-color:var(--ph-accent)}@supports (color:color-mix(in lab, red, red)){.ph-iconbtn.is-active{border-color:color-mix(in srgb, var(--ph-accent) 55%, transparent)}}.ph-iconbtn.is-active{box-shadow:0 0 0 1px var(--ph-accent)}@supports (color:color-mix(in lab, red, red)){.ph-iconbtn.is-active{box-shadow:0 0 0 1px color-mix(in srgb, var(--ph-accent) 25%, transparent)}}.ph-iconbtn.is-active[data-pin-prompt] svg{fill:currentColor}.ph-iconbtn[data-pin-prompt]{--ph-accent:#f59e0b}.ph-iconbtn[data-adopt-prompt]{--ph-accent:#a78bfa}.ph-iconbtn[data-copy-prompt],.ph-iconbtn[data-edit-prompt]{--ph-accent:#60a5fa}.ph-iconbtn[data-delete-prompt]{--ph-accent:#fb7185}.ph-iconbtn.is-copied,.ph-iconbtn.is-copied:hover{--ph-accent:#34d399;color:#34d399;border-color:#34d3998c}.ph-iconbtn-lg{width:2.25rem;height:2.25rem}.ph-iconbtn-lg svg{width:1.15rem;height:1.15rem}.ph-card-actions{opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}.group:hover .ph-card-actions,.ph-card-actions:focus-within,.ph-card-actions:hover{opacity:1;visibility:visible}@media (hover:none){.ph-card-actions{opacity:1;visibility:visible}}.ph-flip-move{will-change:transform;backface-visibility:hidden;transition:transform .8s cubic-bezier(.16,.84,.28,1)}.ph-flipping{pointer-events:none}.ph-flipping *{transition-property:transform!important}@keyframes ph-pin-land{0%{box-shadow:0 0 #f59e0b00}40%{box-shadow:0 0 0 3px #f59e0b80}to{box-shadow:0 0 #f59e0b00}}.ph-pin-land{animation:1.1s ease-out ph-pin-land}.ph-menu{z-index:40;transform-origin:top;background-color:#0f172a;border:1px solid #ffffff1f;border-radius:.75rem;min-width:15rem;max-height:22rem;padding:.375rem;animation:.14s ease-out ph-menu-in;position:absolute;top:calc(100% + .5rem);overflow-y:auto;box-shadow:0 18px 40px -12px #000c}@keyframes ph-menu-in{0%{opacity:0;transform:translateY(-4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.ph-menu-item{color:#cbd5e1;border-radius:.5rem;justify-content:space-between;align-items:center;gap:.5rem;width:100%;padding:.4rem .6rem;font-size:.75rem;font-weight:500;transition:background-color .15s,color .15s;display:flex}.ph-menu-item:hover{color:#fff;background-color:#ffffff12}.ph-menu-item.is-active{color:#93c5fd;background-color:#3b82f62e}.ph-menu-count{opacity:.55;font-variant-numeric:tabular-nums;font-size:.625rem}.ph-hide-titles .ph-card-title{opacity:0}.ph-card-title{transition:opacity .2s}.ph-state{letter-spacing:.04em;text-transform:uppercase;border-radius:.25rem;padding:.05rem .3rem;font-size:.625rem;font-weight:700;transition:background-color .18s,color .18s}.ph-state-on{color:#6ee7b7;background-color:#10b9812e}.ph-state-off{color:#fda4af;background-color:#f43f5e29}[data-share=native]{display:none}.ph-has-native-share [data-share=native]{display:flex}@keyframes ph-toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ph-toast{transition:opacity .3s,transform .3s;animation:.22s ease-out ph-toast-in}.ph-toast.is-leaving{opacity:0;transform:translateY(8px)}.ph-reveal-chev{transition:transform .18s}.ph-reveal[open]>summary .ph-reveal-chev{transform:rotate(90deg)}.ph-reveal>summary::-webkit-details-marker{display:none}.ph-reveal>summary{list-style:none}@media (prefers-reduced-motion:reduce){.ph-flip-move{transition:none}.ph-pin-land,.ph-menu{animation:none}.ph-iconbtn:hover{transform:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
.ph-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* The quiet Upload / YouTube switch. It only changes which panel is showing,
   so it must never look more important than the Choose File button. */
.ph-seg {
  padding: .25rem .625rem;
  border-radius: .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: .25rem;
  transition: background-color .18s ease, color .18s ease;
}
.ph-seg:hover { color: #cbd5e1; }
.ph-seg.is-active {
  background-color: #334155;
  color: #f8fafc;
}

/* ---------------------------------------------------------------- modals --
   A modal is a three-part column: a header that stays, a body that scrolls,
   and a footer that stays. The action buttons live in the footer, so Cancel
   and Publish are on screen at every window size - you never have to scroll
   to find them, however tall the form grows after a thumbnail is added.

   dvh (not vh) is what keeps this honest on phones, where the browser's own
   toolbars slide in and out and vh lies about the space actually available. */
.ph-modal-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}
@media (min-width: 640px) {
  .ph-modal-card {
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
  }
}

/* The <form> is only the column; its own padding moved to .ph-modal-body so
   the scrollbar runs the full height instead of stopping short of the edge. */
.ph-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* min-height:0 is the part that makes it work: without it a flex child
   refuses to shrink below its content, the column grows past the screen and
   the footer is pushed out of sight - which is exactly the bug this fixes. */
.ph-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ph-modal-foot { flex: 0 0 auto; }

/* The preview is capped by height, not width, so a tall picture can never
   push the rest of the form off screen on a short window. */
.ph-thumb-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 30vh;
  max-height: 30dvh;
  margin-inline: auto;
}

/* Remove-the-thumbnail button, sitting on the corner of the preview. */
.ph-thumb-remove {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .6rem;
  border-radius: 9999px;
  font-size: .6875rem;
  font-weight: 700;
  color: #fff;
  background-color: rgba(15, 23, 42, .75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(248, 250, 252, .18);
  transition: background-color .18s ease;
}
.ph-thumb-remove:hover { background-color: #e11d48; }

/* --------------------------------------- card title under the thumb ---- */
/* The title used to be printed ON the image; it now sits under it as plain
   white text - close to its own picture, further from the card below. */
/* Regular weight, dimmed white, centred under its picture. A bold pure-white
   title shouted over the thumbnails; at 62% it reads as a quiet caption and
   the picture stays the loudest thing on the card. */
.ph-card-title {
  margin-top: .45rem;
  color: rgba(255, 255, 255, .62);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .005em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: color .18s ease, transform .18s ease;
}

/* Hover lifts it to full white and a touch bigger. The size change is a
   TRANSFORM, not a font-size - scaling paints, while a bigger font would
   re-wrap the text and shove every card in the row down a few pixels. */
.ph-card:hover .ph-card-title {
  color: #fff;
  transform: scale(1.05);
}

/* Bigger gap BETWEEN rows than between columns, so a title reads as
   belonging to the picture above it and not to the card below it. Every
   title is exactly one line tall, so this gap looks identical everywhere. */
.ph-grid { row-gap: 2rem; }

/* The listing pages breathe the same amount at the top as they do at the
   sides - they used to have a flat 24px top against a 40px side margin,
   which made the first row look glued to the header. */
.ph-page { padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 640px)  { .ph-page { padding-top: 1.5rem; padding-bottom: 1.5rem; } }
@media (min-width: 1024px) { .ph-page { padding-top: 2rem;   padding-bottom: 2rem; } }
@media (min-width: 1280px) { .ph-page { padding-top: 2.5rem; padding-bottom: 2.5rem; } }

/* Icon column: centred on the right edge of the thumbnail. Stacked from the
   top, the fifth button (delete) fell past the bottom of the picture and was
   cut off by its overflow. */
.ph-card-actions {
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  gap: .25rem;
}

/* Small enough that five buttons + four gaps fit the shortest thumbnail we
   ever render, even without container-query support. */
.ph-card-actions .ph-iconbtn { width: 1.5rem; height: 1.5rem; }
.ph-card-actions .ph-iconbtn svg { width: .8rem; height: .8rem; }

/* Where container queries exist, the buttons instead scale with the picture:
   the column takes 87% of its height at any card width, so they are
   comfortably big on a phone and neatly small on a seven-column desktop. */
@supports (height: 1cqh) {
  .ph-thumb { container-type: size; }
  .ph-card-actions { gap: clamp(.2rem, 3cqh, .375rem); }
  .ph-card-actions .ph-iconbtn {
    width: clamp(1.5rem, 15cqh, 1.875rem);
    height: clamp(1.5rem, 15cqh, 1.875rem);
  }
  .ph-card-actions .ph-iconbtn svg {
    width: clamp(.8rem, 8cqh, 1rem);
    height: clamp(.8rem, 8cqh, 1rem);
  }
}

/* ------------------------------------------- header icon buttons ------- */
/* Main Library and Settings lost their labels: five worded
   buttons in a row was the single biggest source of clutter up there. The
   tooltip and the colour say what each one does. */
.ph-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: .625rem;
  border: 1px solid transparent;
  color: #e2e8f0;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}
.ph-navbtn:active { transform: scale(.95); }

/* The two that still carry words (your name, log in / sign up). Declared
   after .ph-navbtn so the auto width wins. */
.ph-navbtn-wide { width: auto; padding: 0 .7rem; }

.ph-profile-chip {
  min-width: 14.5rem;
  justify-content: flex-start;
  gap: .65rem;
  padding: .3rem 1.1rem .3rem .3rem;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ph-profile-chip:hover { transform: translateY(-1px); }
.ph-profile-chip:active { transform: translateY(0) scale(.97); }

.ph-profile-avatar {
  width: 2.05rem;
  height: 2.05rem;
  flex-shrink: 0;
  border-radius: 9999px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .45);
}

.ph-profile-text {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  min-width: 0;
  overflow: hidden;
}
.ph-profile-name {
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8.5rem;
}
.ph-profile-sub {
  font-size: .66rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .68);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .ph-profile-chip { min-width: 0; }
  .ph-profile-sub { display: none; }
}

.ph-settings-btn {
  color: #cbd5e1;
  background-color: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.ph-settings-btn:hover { color: #fff; background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }


/* The single + that creates a prompt. Deliberately the loudest control on
   the page - it is the one thing people come here to do. */
.ph-addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.1rem;
  background-color: #2563eb;
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .7);
  transition: background-color .18s ease, transform .18s ease;
}
.ph-addbtn svg { width: 1.75rem; height: 1.75rem; }
.ph-addbtn:hover { background-color: #3b82f6; transform: translateY(-1px); }
.ph-addbtn:active { transform: translateY(0) scale(.95); }

/* The header's icon strip and the row of controls under it are read as one
   group, so they share a rhythm. 8px was too tight for buttons this size -
   the icons ran together into one blob. */
.ph-nav-actions { gap: .75rem; }

/* Wider on My Prompts: three controls of three different sizes need more air
   between them than a run of identical header icons does. */
.ph-actions-row { gap: 1.5rem; }

/* The + is the primary action, not a third filter, so it gets a little more
   air on its right than the two filters have between them. */
.ph-actions-row .ph-addbtn { margin-right: .5rem; }

/* Menus hanging off a button at the right edge of the screen. */
.ph-menu-right { right: 0; }

@media (max-width: 1023px) {
  .ph-menu-settings {
    right: auto;
    left: 0;
    min-width: 11rem;
    max-width: calc(100vw - 2rem);
  }
}
.ph-menu-item-danger { color: #fda4af; }
.ph-menu-item-danger:hover { background-color: rgba(244, 63, 94, .14); color: #fecdd3; }

/* --------------------------------------------------- header sizing ----- */
/* Written by hand rather than with Tailwind's py-* / w-* utilities: app.css
   is a pre-built file, so a utility class the markup never used before is
   simply absent from it and silently does nothing. */
.ph-header-row {
  padding-top: 1.024rem;
  padding-bottom: 1.024rem;
  column-gap: 4.5rem;   /* the search box needs real air either side of it */
}
.ph-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 1rem;
}
.ph-logo svg { width: 1.9rem; height: 1.9rem; }
.ph-logo-text { font-size: 1.75rem; font-weight: 700; line-height: 1; }

@media (max-width: 1399px) { .ph-header-row { column-gap: 2rem; } }

@media (max-width: 1023px) {
  .ph-header-row { padding-top: .458rem; padding-bottom: .458rem; column-gap: 1rem; }
  .ph-logo { width: 2.75rem; height: 2.75rem; border-radius: .875rem; }
  .ph-logo svg { width: 1.5rem; height: 1.5rem; }
  .ph-logo-text { font-size: 1.375rem; }
}

/* Small label pill - "View public page" next to the member's name. */
.ph-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex-shrink: 0;
  padding: .25rem .6rem;
  border-radius: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  transition: background-color .18s ease;
}

/* Matches the height of the worded buttons it sits beside on My Prompts. */
.ph-navbtn-sm { width: 2.125rem; height: 2.125rem; }

/* A menu opened by a bare icon has to say what it is, since the button no
   longer carries a label. */
.ph-menu-head {
  padding: .3rem .6rem .35rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}
.ph-menu-sep {
  height: 1px;
  margin: .3rem .35rem;
  background-color: rgba(255, 255, 255, .1);
}

/* ------------------------------------------------- guest invitation ---- */
/* The one thing a signed-out visitor should notice. Gradient + glow, because
   it is competing with a wall of thumbnails for attention. */
.ph-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.5rem;
  padding: 0 1rem;
  flex-shrink: 0;
  border-radius: .625rem;
  background-image: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(99, 102, 241, .9);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ph-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(99, 102, 241, 1);
}
.ph-cta:active { transform: translateY(0) scale(.98); }

/* ---------------------------------------------------- join dialog ------ */
/* The dialog the header button opens. Same gradient language as the button
   that summoned it, so it reads as that button expanding rather than as a
   different part of the site. Every measurement here is deliberate CSS: the
   first version leaned on Tailwind padding utilities that are absent from the
   pre-built app.css, so the card had no inner padding at all. */
.ph-join-card { max-width: 66rem; overflow: hidden; border: 1px solid rgba(157, 179, 224, .16); border-radius: 1.25rem; background: #070b15; box-shadow: 0 40px 90px -28px rgba(0, 0, 0, .9); }
.ph-join-close { position: absolute; top: .9rem; right: .9rem; z-index: 2; }
.ph-join-grid { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 32rem; background-image: linear-gradient(rgba(116, 139, 191, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 139, 191, .07) 1px, transparent 1px), radial-gradient(ellipse at 26% 8%, rgba(50, 76, 176, .24), transparent 42%); background-size: 2.75rem 2.75rem, 2.75rem 2.75rem, auto; }
.ph-join-story, .ph-join-auth { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ph-join-story { padding: 2.5rem 2.2rem; border-right: 1px solid rgba(157, 179, 224, .12); background: rgba(7, 11, 21, .72); }
.ph-join-story-line { margin: .75rem 0 0; color: #dce5f7; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.03em; }
.ph-join-story-line strong { display: block; margin-bottom: .25rem; white-space: nowrap; font-size: 1.9rem; font-weight: 700; background: linear-gradient(100deg, #78a7ff, #bd7cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-join-story-rule { width: 2.7rem; height: .18rem; margin: 1.05rem 0; border-radius: 999px; background: linear-gradient(90deg, #437cf9, #a14dee); }
.ph-join-auth { padding: 2.5rem 3.2rem; background: rgba(10, 16, 30, .93); }
.ph-join-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem; color: #f4f7ff; font-size: 1.38rem; font-weight: 700; letter-spacing: -.055em; }
.ph-join-brand-add { display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .68rem; border-radius: .7rem; color: #fff; background: linear-gradient(115deg, #3d77fa, #9549ed); box-shadow: 0 .75rem 1.8rem rgba(102, 75, 237, .28); }
.ph-join-brand-add > span { font-size: 1.55rem; font-weight: 400; line-height: .7; }
.ph-join-brand > span:last-child > span { color: #5194ff; }
.ph-join-title { margin: 0; color: #f5f7ff; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.04em; font-weight: 700; }
.ph-join-title span { display: block; }
.ph-join-title span:last-child { margin-top: .25rem; color: #a98aff; font-size: 60%; letter-spacing: -.015em; }
.ph-join-tag { margin: .55rem 0 1.45rem; color: #98a7c2; font-size: .81rem; line-height: 1.45; }
.ph-join-google, .ph-join-email-choice, .ph-join-submit { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: .7rem; font-size: .875rem; font-weight: 700; transition: transform .18s ease, filter .18s ease, border-color .18s ease; }
.ph-join-google { min-height: 3.5rem; border: 1px solid #747775; color: #1f1f1f; background: #fff; box-shadow: 0 .7rem 1.5rem rgba(0, 0, 0, .16); }
.ph-join-google:hover, .ph-join-email-choice:hover, .ph-join-submit:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ph-google-mark { width: 18px; height: 18px; margin-right: 10px; flex: 0 0 18px; shape-rendering: geometricPrecision; }
.ph-join-or { display: flex; align-items: center; gap: .7rem; width: 100%; margin: 1.1rem 0; color: #7786a4; font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.ph-join-or::before, .ph-join-or::after { content: ""; flex: 1; height: 1px; background: rgba(151, 170, 215, .15); }
.ph-join-email-choice { min-height: 2.9rem; border: 1px solid rgba(177, 193, 229, .21); color: #cbd5e8; background: transparent; }
.ph-join-form { display: none; width: 100%; margin-top: 1rem; text-align: left; }
.ph-join-form.is-open { display: block; }
.ph-join-label { display: block; margin: .7rem 0 .3rem; color: #aebbd2; font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ph-field { width: 100%; height: 2.65rem; padding: 0 .8rem; border: 1px solid rgba(158, 179, 225, .22); border-radius: .6rem; color: #eef3ff; background: #10192b; font-size: .83rem; }
.ph-field::placeholder { color: #62718d; }
.ph-field:focus { outline: none; border-color: #5988ef; box-shadow: 0 0 0 3px rgba(89, 136, 239, .2); }
.ph-join-submit { min-height: 2.8rem; margin-top: 1rem; border: 0; color: #fff; background: linear-gradient(105deg, #3f76f5, #9344eb); box-shadow: 0 .8rem 1.8rem rgba(77, 67, 236, .3); }
.ph-join-switch { width: 100%; margin: 1.55rem 0 0; color: #8d9bb6; font-size: .75rem; }
.ph-join-switch button, .ph-join-switch a { padding: 0; border: 0; color: #83adff; background: transparent; font: inherit; font-weight: 700; }

@media (max-width: 420px) {
  .ph-cta { padding: 0 .75rem; font-size: .75rem; }
}

@media (max-width: 700px) {
  .ph-join-grid { grid-template-columns: 1fr; }
  .ph-join-story { min-height: 17rem; padding: 2rem 1.25rem; border-right: 0; border-bottom: 1px solid rgba(157, 179, 224, .12); }
  .ph-join-story-line strong { white-space: normal; }
  .ph-join-auth { padding: 2.25rem 1.5rem; }
}

/* ------------------------------------------------ authentication pages - */
.ph-auth-page { min-height: 100vh; margin: 0; padding: 2rem 1rem; color: #eef3ff; background-color: #070b15; background-image: linear-gradient(rgba(116,139,191,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(116,139,191,.07) 1px,transparent 1px),radial-gradient(ellipse at 30% 10%,rgba(50,76,176,.23),transparent 40%); background-size: 2.75rem 2.75rem,2.75rem 2.75rem,auto; font-family: ui-sans-serif,system-ui,sans-serif; }
.ph-auth-shell { width: min(66rem,100%); margin: 0 auto; }.ph-auth-home { display: block; width: fit-content; margin: 0 auto 1.6rem; text-decoration: none; }.ph-auth-grid { display:grid; grid-template-columns:.92fr 1.08fr; border:1px solid rgba(157,179,224,.16); border-radius:1.25rem; overflow:hidden; background:#070b15; box-shadow:0 40px 90px -28px rgba(0,0,0,.9); }
.ph-auth-story,.ph-auth-card { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:32rem; text-align:center; }.ph-auth-story { padding:2.5rem 2.2rem; border-right:1px solid rgba(157,179,224,.12); background:rgba(7,11,21,.72); }.ph-auth-card { padding:2.5rem 3.2rem; background:rgba(10,16,30,.93); }.ph-auth-card > * { width:100%; }.ph-auth-card .ph-join-brand { width:fit-content; }.ph-auth-error { margin:0 0 1rem; padding:.7rem .85rem; border:1px solid rgba(251,113,133,.35); border-radius:.7rem; color:#fda4af; background:rgba(190,24,93,.12); font-size:.8rem; }.ph-auth-card .ph-join-form { display:block; margin-top:1rem; }.ph-auth-card .ph-join-switch { margin-top:1.5rem; }.ph-auth-back { margin:1rem 0 0; color:#8d9bb6; text-align:center; font-size:.75rem; }.ph-auth-back a { color:#83adff; }
@media (max-width:700px) { .ph-auth-page { padding:1rem; }.ph-auth-grid { grid-template-columns:1fr; }.ph-auth-story { min-height:17rem; padding:2rem 1.25rem; border-right:0; border-bottom:1px solid rgba(157,179,224,.12); }.ph-auth-story .ph-join-story-line strong { white-space:normal; }.ph-auth-card { min-height:0; padding:2.25rem 1.5rem; } }

/* --------------------------------------------- reference pictures ------ */
/* What went INTO a prompt, shown as a strip under what came out of it. A
   fixed 4-up grid rather than flex: with 1, 2 or 3 references the thumbnails
   keep the same size and the same left edge instead of stretching to fill the
   row, which is what makes the strip look deliberate. */
.ph-refs {
  margin-top: -.25rem;
  padding: .875rem 1rem 1rem;
  border-radius: 1rem;
  background-color: rgba(2, 6, 23, .55);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ph-refs-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .7rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ph-refs-head svg { color: #60a5fa; }

.ph-refs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}
@media (max-width: 520px) { .ph-refs-grid { grid-template-columns: repeat(2, 1fr); } }

.ph-ref {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: .625rem;
  background-color: #020617;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .18s ease, transform .18s ease;
}
.ph-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-ref:hover { border-color: #3b82f6; transform: translateY(-2px); }

.ph-ref-num {
  position: absolute;
  top: .3rem;
  left: .3rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .2rem;
  border-radius: .3rem;
  background-color: rgba(2, 6, 23, .8);
  color: #cbd5e1;
  font-size: .5625rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

/* The picker in the Add-prompt form, plus its "about to upload" thumbnails. */
.ph-ref-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: .75rem;
  cursor: pointer;
  background-color: rgba(59, 130, 246, .1);
  border: 1px dashed rgba(59, 130, 246, .5);
  color: #60a5fa;
  font-size: .8125rem;
  font-weight: 700;
  transition: background-color .18s ease, border-color .18s ease;
}
.ph-ref-add:hover { background-color: rgba(59, 130, 246, .18); border-color: #3b82f6; }

.ph-ref-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-top: .6rem;
}
.ph-ref-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: .5rem;
  background-color: #020617;
  border: 1px solid rgba(255, 255, 255, .12);
}
.ph-ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The little x on a saved reference in the edit form. */
.ph-ref-remove {
  position: absolute;
  top: .25rem;
  right: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  background-color: rgba(2, 6, 23, .8);
  border: 1px solid rgba(248, 250, 252, .2);
  color: #fff;
  transition: background-color .18s ease;
}
.ph-ref-remove:hover { background-color: #e11d48; }

/* ===================================================================
   v2: featured panel, brand lockup, floating actions, footer, pages
   Hand-written because app.css is pre-built here - a Tailwind class the
   old markup never used simply is not in the file.
   =================================================================== */

/* --- Featured: one panel that holds all five ----------------------- */
.ph-feat {
  margin: 0 0 2rem;
  padding: 1.1rem 1.15rem 1.3rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .09);
  background-image:
    radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, .13) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(168, 85, 247, .12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(30, 41, 59, .75) 0%, rgba(15, 23, 42, .55) 100%);
  box-shadow: 0 22px 45px -32px rgba(0, 0, 0, .9);
}

.ph-feat-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ph-feat-title {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .95rem;
  font-weight: 800;
  color: #f8fafc;
}
.ph-feat-title svg { color: #fbbf24; fill: currentColor; }
.ph-feat-sub { font-size: .75rem; color: #94a3b8; font-weight: 500; }

/* Five across on a wide screen, then fewer columns - never fewer CARDS.
   All five are always in the panel; on a phone they simply stack. */
.ph-feat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1360px) { .ph-feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .ph-feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .ph-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; } }
@media (max-width: 520px)  { .ph-feat-grid { grid-template-columns: minmax(0, 1fr); } }

.ph-feat-card {
  position: relative;
  cursor: pointer;
  border-radius: .9rem;
  overflow: hidden;
  background-color: #0b1220;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
              border-color .28s ease, box-shadow .28s ease;
}
.ph-feat-card:hover,
.ph-feat-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, .55);
  box-shadow: 0 18px 40px -18px rgba(37, 99, 235, .65);
  outline: none;
}

.ph-feat-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ph-feat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.ph-feat-card:hover .ph-feat-media img { transform: scale(1.06); }
.ph-feat-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 6, 23, .93) 0%, rgba(2, 6, 23, .35) 45%, rgba(2, 6, 23, 0) 72%);
}

/* Dead centre, like every video player anybody has ever used. */
.ph-feat-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  color: #fff;
  background-color: rgba(37, 99, 235, .92);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .85);
  transition: transform .28s ease, background-color .28s ease;
}
.ph-feat-card:hover .ph-feat-play {
  transform: translate(-50%, -50%) scale(1.12);
  background-color: rgba(59, 130, 246, 1);
}

.ph-feat-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .8rem .9rem .9rem; }
.ph-feat-chip {
  display: inline-block;
  margin-bottom: .35rem;
  padding: .12rem .45rem;
  border-radius: .4rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #bfdbfe;
  background-color: rgba(37, 99, 235, .25);
  border: 1px solid rgba(96, 165, 250, .35);
}
.ph-feat-name {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.35;
  color: #f8fafc;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ph-iconbtn[data-feature-prompt] { --ph-accent: #fbbf24; }
.ph-iconbtn.is-active[data-feature-prompt] svg { fill: currentColor; }

/* --- Brand: "Add" reads as a button, "Prompts" sits beside it ------ */
.ph-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; cursor: pointer; }

.ph-brand-key {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .42rem .78rem .42rem .62rem;
  border-radius: .8rem;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  background-image: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
  box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.ph-brand-key svg { width: 1.05rem; height: 1.05rem; opacity: .95; }
.ph-brand:hover .ph-brand-key {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(99, 102, 241, 1), inset 0 1px 0 rgba(255, 255, 255, .38);
}

.ph-brand-rest {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: #f1f5f9;
  white-space: nowrap;
}
.ph-brand-dot { color: #60a5fa; }

@media (max-width: 480px) {
  .ph-brand-key  { font-size: 1.1rem; padding: .36rem .62rem .36rem .5rem; border-radius: .68rem; }
  .ph-brand-rest { font-size: 1.1rem; }
}

/* --- Floating actions: back to top + share ------------------------- */
.ph-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
}
.ph-float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 9999px;
  color: #e2e8f0;
  background-color: rgba(15, 23, 42, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .95);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, background-color .25s ease, color .25s ease, opacity .25s ease;
}
.ph-float-btn:hover { transform: translateY(-2px); background-color: #1e293b; color: #fff; }
.ph-float-btn svg { width: 1.15rem; height: 1.15rem; }
.ph-float-share:hover { color: #34d399; }

/* The arrow is pointless at the top of the page, so it is not there. */
.ph-float-top { opacity: 0; visibility: hidden; transform: translateY(8px); }
.ph-float-top.is-on { opacity: 1; visibility: visible; transform: none; }

.ph-float .ph-menu { bottom: calc(100% + .5rem); top: auto; right: 0; left: auto; }

/* --- New cards fading in under a "Load more" ----------------------- */
@keyframes phCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ph-card-in { animation: phCardIn .5s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .ph-card-in { animation: none; } }

/* --- Footer -------------------------------------------------------- */
.ph-footer {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background-image: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(2, 6, 23, .65) 100%);
}
.ph-footer-in {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
}
.ph-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 760px) { .ph-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (max-width: 480px) { .ph-footer-grid { grid-template-columns: 1fr; } }

.ph-footer-about { font-size: .78rem; line-height: 1.7; color: #94a3b8; max-width: 30rem; margin-top: .85rem; }
.ph-footer-head {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #cbd5e1;
  margin-bottom: .7rem;
}
.ph-footer-link {
  display: block;
  font-size: .8rem;
  color: #94a3b8;
  padding: .22rem 0;
  transition: color .2s ease, transform .2s ease;
}
.ph-footer-link:hover { color: #60a5fa; transform: translateX(2px); }

.ph-footer-bar {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: .75rem;
  color: #64748b;
}

/* --- A content page (page.php) ------------------------------------- */
.ph-doc { max-width: 46rem; margin: 0 auto; padding: 2.5rem 0 1rem; }
.ph-doc h1 { font-size: 1.85rem; font-weight: 800; color: #f8fafc; letter-spacing: -.02em; }
.ph-doc .ph-doc-meta { font-size: .72rem; color: #64748b; margin-top: .45rem; }
.ph-doc h2 { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; margin: 2rem 0 .6rem; }
.ph-doc p { font-size: .9rem; line-height: 1.85; color: #94a3b8; margin-bottom: 1rem; }
.ph-doc a { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; }
.ph-doc-body { margin-top: 1.75rem; }

/* An uploaded logo picture replaces the built-in wordmark entirely. */
.ph-brand-img { height: 2.4rem; width: auto; max-width: 13rem; object-fit: contain; display: block; }
@media (max-width: 480px) { .ph-brand-img { height: 2rem; max-width: 9.5rem; } }

/* ===================================================================
   v3 - overrides appended after the blocks above, so they win.
   =================================================================== */

/* --- Footer: one row, the same height as the header ---------------- */
.ph-footer-in {
  width: 100%;
  max-width: none;
  margin: 0;
  /* Matches .ph-header-row exactly, so the page is book-ended evenly. */
  padding: 1.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
@media (min-width: 640px)  { .ph-footer-in { padding-left: 1.5rem;  padding-right: 1.5rem; } }
@media (min-width: 1024px) { .ph-footer-in { padding-left: 2rem;    padding-right: 2rem; } }
@media (min-width: 1280px) { .ph-footer-in { padding-left: 2.5rem;  padding-right: 2.5rem; } }

.ph-footer-brand { display: flex; align-items: center; flex: none; }

.ph-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem 1.6rem;
}
.ph-footer-link {
  display: inline-block;
  font-size: .8rem;
  font-weight: 500;
  color: #94a3b8;
  padding: 0;
  transition: color .2s ease;
}
.ph-footer-link:hover { color: #60a5fa; transform: none; }

.ph-footer-copy { font-size: .75rem; color: #64748b; flex: none; }

@media (max-width: 720px) {
  .ph-footer-in { justify-content: center; text-align: center; gap: .9rem 1.4rem; }
  .ph-footer-links { justify-content: center; }
}

/* --- The play badge: present, not shouting ------------------------- */
.ph-feat-play,
.ph-thumb .absolute.inset-0 > div,
[data-hover-play-icon] > div {
  background-color: rgba(15, 23, 42, .55) !important;
  color: rgba(248, 250, 252, .92);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
  backdrop-filter: blur(3px);
}
.ph-feat-card:hover .ph-feat-play {
  background-color: rgba(15, 23, 42, .72) !important;
}
/* The dark wash the card thumbnails put over a video also went too far. */
.ph-thumb .bg-black\/40 { background-color: rgba(2, 6, 23, .22) !important; }

/* --- Card action column: even breathing room inside the picture ---- */
.ph-card-actions {
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  gap: .3rem;
  /* Never taller than the picture minus a margin top and bottom, so the
     column can never touch either edge however many buttons there are. */
  max-height: calc(100% - 1rem);
}
@supports (height: 1cqh) {
  .ph-card-actions {
    right: clamp(.35rem, 4cqh, .6rem);
    gap: clamp(.18rem, 2.6cqh, .34rem);
    max-height: calc(100% - clamp(.7rem, 8cqh, 1.1rem));
  }
  .ph-card-actions .ph-iconbtn {
    width: clamp(1.35rem, 13cqh, 1.75rem);
    height: clamp(1.35rem, 13cqh, 1.75rem);
  }
  .ph-card-actions .ph-iconbtn svg {
    width: clamp(.72rem, 7cqh, .95rem);
    height: clamp(.72rem, 7cqh, .95rem);
  }
}

/* --- Corner markers: pinned and featured --------------------------- */
.ph-card-flags {
  position: absolute;
  top: .45rem;
  left: .45rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .3rem;
  pointer-events: none;
}
.ph-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: .5rem;
  background-color: rgba(2, 6, 23, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
}
.ph-flag svg { width: .8rem; height: .8rem; }
.ph-flag-pin  { color: #fbbf24; }
.ph-flag-star { color: #fbbf24; }
.ph-flag-star svg { fill: currentColor; }
.ph-flag-pin svg  { fill: currentColor; }

/* ===================================================================
   v4 - appended last, so these win over everything above.
   =================================================================== */

/* --- Footer: one centred row, clear of the floating buttons -------- */
.ph-footer-in {
  justify-content: center;
  text-align: center;
  gap: .6rem 1.25rem;
  /* The share / back-to-top pair sits in the bottom right corner, so the
     row keeps that much room free on both sides and stays centred. */
  padding-left: 5rem;
  padding-right: 5rem;
}
@media (min-width: 640px)  { .ph-footer-in { padding-left: 5.5rem; padding-right: 5.5rem; } }
@media (min-width: 1024px) { .ph-footer-in { padding-left: 6rem;   padding-right: 6rem; } }
@media (min-width: 1280px) { .ph-footer-in { padding-left: 6.5rem; padding-right: 6.5rem; } }

.ph-footer-links { justify-content: center; gap: .35rem 0; }

/* A quiet dot between every footer item, including the brand and copyright. */
.ph-footer-link + .ph-footer-link::before,
.ph-footer-links::before,
.ph-footer-copy::before {
  content: "\00b7";
  display: inline-block;
  margin: 0 .85rem;
  color: #475569;
}
.ph-footer-copy { flex: none; }

@media (max-width: 720px) {
  .ph-footer-in { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 4.75rem; }
  .ph-footer-links::before, .ph-footer-copy::before { display: none; }
  .ph-footer-links { gap: .35rem 1.1rem; }
}

/* --- Featured card: picture, then the title underneath ------------- */
/* 16:9 is not a style choice: a YouTube hqdefault picture is 4:3 with black
   bars top and bottom, and this ratio crops them away exactly. */
.ph-feat-media {
  aspect-ratio: 16 / 9;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  background-color: #020617;
  transition: border-color .28s ease, box-shadow .28s ease;
}
/* Nothing is printed over the artwork any more, so the gradient wash goes. */
.ph-feat-media::after { content: none; }

.ph-feat-card {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.ph-feat-card:hover,
.ph-feat-card:focus-visible {
  transform: none;
  box-shadow: none;
  border: 0;
}
.ph-feat-card:hover .ph-feat-media,
.ph-feat-card:focus-visible .ph-feat-media {
  border-color: rgba(59, 130, 246, .6);
  box-shadow: 0 16px 36px -20px rgba(37, 99, 235, .75);
}

.ph-feat-card .ph-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Cards arriving and leaving ------------------------------------ */
@keyframes phCardOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.92); }
}
.ph-card-out {
  animation: phCardOut .3s ease both;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .ph-card-out { animation: none; opacity: 0; } }

/* ===================================================================
   v5 - appended last, so these win.
   =================================================================== */

/* --- Corner markers: readable at a glance, undoable in one click --- */
.ph-card-flags { pointer-events: none; }

/* Amber for pinned, violet for featured - never the same colour, so the two
   are told apart without reading the tooltip. */
.ph-flag-pin  { color: #fbbf24; }
.ph-flag-star { color: #c084fc; }

/* A marker an admin can act on. Clicking it undoes what it reports. */
.ph-flag.is-live {
  pointer-events: auto;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.ph-flag.is-live:hover { transform: scale(1.12); background-color: rgba(2, 6, 23, .9); }
.ph-flag-pin.is-live:hover  { border-color: rgba(251, 191, 36, .6); }
.ph-flag-star.is-live:hover { border-color: rgba(192, 132, 252, .6); }

/* The star button in the hover column matches its marker. */
.ph-iconbtn[data-feature-prompt] { --ph-accent: #c084fc; }
.ph-iconbtn.is-active[data-feature-prompt] svg { fill: currentColor; }

/* --- Featured cards get the same hover controls as grid cards ------ */
.ph-feat-media .ph-card-actions {
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  gap: .34rem;
  max-height: calc(100% - 1.1rem);
}
.ph-feat-media .ph-card-actions .ph-iconbtn { width: 1.85rem; height: 1.85rem; }
.ph-feat-media .ph-card-actions .ph-iconbtn svg { width: 1rem; height: 1rem; }

/* --- Brand: 40% larger, then +25% desktop / +50% mobile on top of that -
   "the logo" means this whole lockup - the "Add" key and "Prompts" beside
   it - not just the key on its own. ------------------------------------ */
.ph-brand { gap: .9375rem; }
.ph-brand-key {
  font-size: 2.3125rem;
  padding: .725rem 1.375rem .725rem 1.0625rem;
  border-radius: 1.3125rem;
  gap: .5rem;
}
.ph-brand-key svg { width: 1.8125rem; height: 1.8125rem; }
.ph-brand-rest { font-size: 2.3125rem; }
.ph-brand-img  { height: 4.1875rem; max-width: 22.5rem; }

@media (max-width: 480px) {
  .ph-brand-key  { font-size: 2.1rem; padding: .66rem 1.2rem .66rem .93rem; border-radius: 1.275rem; }
  .ph-brand-key svg { width: 1.65rem; height: 1.65rem; }
  .ph-brand-rest { font-size: 2.1rem; }
  .ph-brand-img  { height: 3.9rem; max-width: 18rem; }
}

/* ===================================================================
   v6 - the heart is gone; "+ keep a copy" and the page sub-header.
   Appended last, so these win.
   =================================================================== */

/* --- The logo's key is a BUTTON now -------------------------------- */
/* It says "Add", so it adds. Everything about how it LOOKS is already
   set further up; this only undoes the browser's default button styling
   and moves the lift from the whole lockup onto the key itself, so
   hovering the word beside it no longer makes the button jump. */
.ph-brand-key {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ph-brand-key:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(99, 102, 241, 1), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.ph-brand-key:active { transform: translateY(0) scale(.96); }
.ph-brand-key:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }

/* Square when there is no word inside it (an uploaded logo took the name). */
.ph-brand-key-plain { padding: .58rem; }

/* The rest of the wordmark is the way home. */
a.ph-brand-rest { text-decoration: none; transition: color .18s ease; }
a.ph-brand-rest:hover { color: #fff; }

/* --- The + in the corner of every card ----------------------------- */
/* Same gradient as the logo, on purpose: pressing either one puts a
   prompt on your page, so they should read as the same button. This one
   is small enough to sit on a thumbnail and carries no word. */
.ph-card-add {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: .62rem;
  color: #fff;
  background-image: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
  box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
  cursor: pointer;
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.ph-card-add svg { width: 1.05rem; height: 1.05rem; stroke-width: 2.6; pointer-events: none; }
.ph-card-add:hover { opacity: 1; transform: scale(1.12); box-shadow: 0 10px 20px -8px rgba(99, 102, 241, 1); }
.ph-card-add:active { transform: scale(.94); }
.ph-card-add:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }

/* THREE FACES, one button. All three are in the markup and exactly one is
   shown, so swapping state is a class change with nothing to load and
   nothing to flicker. */
.ph-card-add .ph-add-face { display: none; line-height: 0; }
.ph-card-add .ph-add-plus { display: inline-flex; }

/* The moment after saving: a green tick, up for exactly as long as the
   "Saved to your page" notice is, because they are one message told twice. */
.ph-card-add.is-just-saved,
.ph-card-add.is-just-saved:hover {
  background-image: none;
  background-color: #059669;
  box-shadow: none;
  transform: none;
  cursor: default;
  opacity: 1;
}
.ph-card-add.is-just-saved .ph-add-plus { display: none; }
.ph-card-add.is-just-saved .ph-add-tick { display: inline-flex; }

/* Already on my page. GREEN, not red - the colour is reporting a good
   state ("this one is yours"), and the minus is what pressing it would
   do. A red button on a prompt you deliberately saved reads like a
   warning about a mistake you have not made. A shade deeper than the
   tick above it, so the moment of saving and the settled state after it
   are not quite the same green. */
.ph-card-add.is-saved {
  background-image: none;
  background-color: #047857;
  box-shadow: 0 6px 14px -6px rgba(4, 120, 87, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
  opacity: .95;
}
.ph-card-add.is-saved:hover {
  background-color: #059669;
  box-shadow: 0 10px 20px -8px rgba(5, 150, 105, .95);
}
.ph-card-add.is-saved .ph-add-plus  { display: none; }
.ph-card-add.is-saved .ph-add-minus { display: inline-flex; }
.ph-card-add.is-saved:focus-visible { outline-color: #6ee7b7; }

/* The same button at popup size, where it sits in a row of 34px controls. */
.ph-card-add-lg { position: static; width: 2.25rem; height: 2.25rem; border-radius: .7rem; opacity: 1; }
.ph-card-add-lg svg { width: 1.15rem; height: 1.15rem; }

/* On the bigger Featured cards the button grows with the artwork. */
.ph-feat-media .ph-card-add { width: 2.15rem; height: 2.15rem; left: .6rem; bottom: .6rem; }
.ph-feat-media .ph-card-add svg { width: 1.2rem; height: 1.2rem; }

/* --- Private / public marker + the minus (your own cards only) ----- */
/* The marker says what strangers can see; the minus beside it takes the
   prompt off the page. Kept small and side by side so the pair reads as
   one quiet caption rather than two controls fighting the artwork. */
.ph-card-mark {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .3rem;
  pointer-events: none;
}

/* Green, and exactly as tall as the marker beside it. Same colour and
   same sign as the minus on a library card because it means the same
   thing - take this off my page - and the library keeps its own copy, so
   nothing here is destructive enough to earn a red button. */
.ph-card-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  border: 0;
  border-radius: .4rem;
  color: #fff;
  background-color: #047857;
  box-shadow: 0 4px 10px -4px rgba(4, 120, 87, .9);
  cursor: pointer;
  pointer-events: auto;
  opacity: .92;
  transition: background-color .18s ease, transform .18s ease, opacity .18s ease;
}
.ph-card-drop svg { width: .85rem; height: .85rem; stroke-width: 3; pointer-events: none; }
.ph-card-drop:hover  { background-color: #059669; opacity: 1; transform: scale(1.12); }
.ph-card-drop:active { transform: scale(.92); }
.ph-card-drop:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 2px; }

/* The marker is given the button's height rather than being left to its
   own padding, so the pair sits on one line with no half-pixel step. */
.ph-card-mark-pill { height: 1.3rem; }

.ph-feat-media .ph-card-drop { width: 1.5rem; height: 1.5rem; }
.ph-feat-media .ph-card-drop svg { width: .95rem; height: .95rem; }
.ph-feat-media .ph-card-mark-pill { height: 1.5rem; }
.ph-card-mark-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .4rem;
  border-radius: .4rem;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ph-card-mark-pill.is-private { background-color: rgba(2, 6, 23, .7);      color: #cbd5e1; }
.ph-card-mark-pill.is-public  { background-color: rgba(16, 185, 129, .25); color: #a7f3d0; }

/* --- Secondary header (My Prompts, and a public page) -------------- */
/* A band of its own directly under the site header, cut from the same
   cloth: same horizontal padding as the page below it, one shade lighter
   than the header above it so the two read as a pair rather than one
   very tall bar. WHO the page belongs to on the left, everything that
   ACTS on it on the right. */
.ph-subhead {
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background-color: #182234;
  background-image: linear-gradient(180deg, rgba(59, 130, 246, .07) 0%, rgba(59, 130, 246, 0) 100%);
}
.ph-subhead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.ph-subhead-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.ph-subhead-avatar {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}
.ph-subhead-name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f8fafc;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-subhead-handle {
  font-size: .7rem;
  line-height: 1.3;
  color: #7c8ba1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* "View public page" - the one green thing in the bar, because it is the
   only control that leaves the site's private side. */
.ph-subhead-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  margin-left: .35rem;
  padding: .34rem .68rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 600;
  text-decoration: none;
  color: #6ee7b7;
  background-color: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ph-subhead-link:hover { background-color: rgba(16, 185, 129, .22); color: #a7f3d0; }
.ph-subhead-link-static { color: #94a3b8; background-color: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .22); }

.ph-subhead-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

/* One shape for every control in the bar - filter, categories, clear. */
.ph-subbtn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 2.25rem;
  padding: 0 .75rem;
  border-radius: .7rem;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #cbd5e1;
  background-color: rgba(15, 23, 42, .6);
  border: 1px solid rgba(255, 255, 255, .09);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ph-subbtn:hover { background-color: rgba(30, 41, 59, .95); color: #f1f5f9; }
.ph-subbtn svg { flex-shrink: 0; }

/* A filter that is actually filtering says so in colour, so you can never
   wonder why the page is showing less than you expected. */
.ph-subbtn.is-on {
  color: #bfdbfe;
  background-color: rgba(59, 130, 246, .16);
  border-color: rgba(59, 130, 246, .38);
}
.ph-subbtn-clear { color: #fda4af; border-color: rgba(244, 63, 94, .28); background-color: rgba(244, 63, 94, .1); }
.ph-subbtn-clear:hover { color: #fecdd3; background-color: rgba(244, 63, 94, .2); }

.ph-subbtn-text { overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }

/* Narrow screens: the icons carry the meaning and the row stays one line. */
@media (max-width: 640px) {
  .ph-subbtn-text { display: none; }
  .ph-subbtn { padding: 0 .6rem; }
  .ph-subhead-link span:not([class]) { display: none; }
  .ph-subhead-link { padding: .34rem .5rem; }
}

/* --- "Where is this going?" tabs in the Add dialog ----------------- */
.ph-dest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  padding: .35rem;
  border-radius: 1rem;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.dark .ph-dest { background-color: #020617; border-color: #1e293b; }

.ph-dest-tab {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .7rem;
  border-radius: .75rem;
  text-align: left;
  color: #64748b;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ph-dest-tab svg { flex-shrink: 0; }
.ph-dest-tab span { display: flex; flex-direction: column; min-width: 0; }
.ph-dest-tab strong { font-size: .8rem; font-weight: 700; line-height: 1.25; }
.ph-dest-tab small  { font-size: .66rem; line-height: 1.3; opacity: .75; }
.ph-dest-tab:hover  { color: #334155; background-color: rgba(148, 163, 184, .14); }
.dark .ph-dest-tab:hover { color: #cbd5e1; }

.ph-dest-tab.is-active,
.ph-dest-tab.is-active:hover {
  color: #1d4ed8;
  background-color: #fff;
  border-color: rgba(59, 130, 246, .45);
  box-shadow: 0 4px 12px -6px rgba(37, 99, 235, .6);
}
.dark .ph-dest-tab.is-active,
.dark .ph-dest-tab.is-active:hover {
  color: #bfdbfe;
  background-color: rgba(37, 99, 235, .18);
}

@media (max-width: 520px) {
  .ph-dest { grid-template-columns: 1fr; }
  .ph-dest-tab small { display: none; }
}

/* ===================================================================
   v7 - solid notices, the category picker, the Yes/No dialog.
   Appended last, so these win.
   =================================================================== */

/* --- Notices: SOLID, never tinted glass --------------------------- */
/* These land on top of a grid of photographs. A translucent notice takes
   on whatever picture happens to be behind it and stops being readable -
   the one place on this site where see-through is exactly wrong. */
.ph-toasts {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 999;
  display: flex;
  flex-direction: column-reverse;
  gap: .5rem;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.ph-toast {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .95rem;
  border-radius: .85rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  color: #ecfdf5;
  background-color: #064e3b;
  border: 1px solid #10b981;
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .4);
  pointer-events: auto;
  animation: phToastIn .26s cubic-bezier(.22, 1, .36, 1) both;
}
.ph-toast svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: #6ee7b7; }
.ph-toast.is-error { color: #fff1f2; background-color: #641220; border-color: #f43f5e; }
.ph-toast.is-error svg { color: #fda4af; }
.ph-toast.is-going { animation: phToastOut .24s ease both; }

@keyframes phToastIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes phToastOut { to   { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .ph-toast, .ph-toast.is-going { animation: none; }
}

/* --- "Which category?" - the picker beside the + ------------------ */
/* Pinterest's board list, in this site's clothes. Fixed to the window
   rather than to the card, because the thumbnail crops its overflow -
   that is what keeps the corners round - and a menu drawn inside one
   would be cut in half by it. */
.ph-pick {
  position: fixed;
  /* Parked off-screen until it is measured and placed, so the first open
     cannot flash it at the bottom of the page or push out a scrollbar. */
  left: -9999px;
  top: 0;
  z-index: 70;
  width: 15rem;
  padding: .4rem;
  border-radius: .9rem;
  background-color: #0b1220;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .95), 0 2px 8px rgba(0, 0, 0, .5);
  animation: phPickIn .16s ease-out both;
}
.ph-pick.is-up { transform-origin: bottom left; }
@keyframes phPickIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ph-pick { animation: none; } }

.ph-pick-head {
  padding: .35rem .55rem .4rem;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
}
.ph-pick-list { max-height: 13rem; overflow-y: auto; }

.ph-pick-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .55rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: #cbd5e1;
  font-size: .78rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.ph-pick-item:hover { background-color: rgba(99, 102, 241, .22); color: #fff; }
.ph-pick-item svg { flex-shrink: 0; }

/* Somewhere to file it that does not exist yet. Typing a name here makes
   the category AND saves the prompt into it, in one press. */
.ph-pick-new {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  padding-top: .4rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ph-pick-new input {
  flex: 1;
  min-width: 0;
  height: 2rem;
  padding: 0 .55rem;
  border-radius: .55rem;
  background-color: #020617;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e2e8f0;
  font-size: .75rem;
}
.ph-pick-new input::placeholder { color: #64748b; }
.ph-pick-new input:focus { outline: none; border-color: #6366f1; }

.ph-pick-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 0;
  border-radius: .55rem;
  color: #fff;
  background-image: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
  cursor: pointer;
  transition: transform .14s ease, opacity .14s ease;
}
.ph-pick-go:hover  { transform: scale(1.06); }
.ph-pick-go:active { transform: scale(.94); }

/* --- Yes / No ------------------------------------------------------ */
/* One question, two answers, nothing else. The icon carries the mood so
   the words do not have to shout. */
.ph-confirm {
  position: relative;
  width: 100%;
  max-width: 22rem;
  padding: 1.5rem 1.35rem 1.15rem;
  border-radius: 1.35rem;
  background-color: #0f172a;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .95);
  text-align: center;
}
.ph-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  margin: 0 auto .85rem;
  border-radius: 9999px;
  color: #fda4af;
  background-color: rgba(244, 63, 94, .14);
  border: 1px solid rgba(244, 63, 94, .3);
}
.ph-confirm-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -.01em;
}
.ph-confirm-text {
  margin-top: .4rem;
  font-size: .8rem;
  line-height: 1.6;
  color: #94a3b8;
}
.ph-confirm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: 1.25rem;
}
.ph-confirm-btn {
  height: 2.5rem;
  padding: 0 .6rem;
  border-radius: .8rem;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.ph-confirm-btn:active { transform: scale(.97); }
.ph-confirm-no {
  color: #cbd5e1;
  background-color: rgba(30, 41, 59, .9);
  border-color: rgba(255, 255, 255, .1);
}
.ph-confirm-no:hover { background-color: #334155; color: #f1f5f9; }
.ph-confirm-yes { color: #fff; background-color: #9f1239; }
.ph-confirm-yes:hover { background-color: #be123c; }
.ph-confirm-row.is-triple { grid-template-columns: 1fr; }
.ph-confirm-purge { color: #fff; background-color: #7c2d12; }
.ph-confirm-purge:hover { background-color: #9a3412; }

/* ===================================================================
   v8 - the categories row under the header.
   Appended last, so these win.
   =================================================================== */

/* Half the height of the sub-header on a member's page, because this one
   carries NAMES, not controls. Spelled out rather than hidden behind a
   dropdown: the categories are the shape of the library, and making
   somebody open a menu to see that shape tells them not to bother. */
.ph-cats {
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background-color: #182234;
}
.ph-cats-in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .1rem .15rem;
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* Small, quiet, and evenly spaced. This band sits between the header and
   the artwork, so anything louder would come between somebody and the
   pictures they came for. */
.ph-cat {
  padding: .28rem .7rem;
  border-radius: 9999px;
  font-size: .814rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .005em;
  color: #8798ac;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
.ph-cat:hover { color: #f1f5f9; background-color: rgba(255, 255, 255, .06); }

/* The one you are looking at. A filled pill rather than a heavier weight:
   bolding the active word makes the row jump about as you move between
   categories, because the text itself changes width. */
.ph-cat.is-active {
  color: #fff;
  background-color: rgba(59, 130, 246, .2);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .38);
}

/* Narrow screens: one line that scrolls sideways beats four stacked rows
   of pills pushing the pictures off the bottom of the screen. Only the
   "full" style scrolls like this - the collapsible one has its own layout
   below and is left alone here. */
@media (max-width: 640px) {
  .ph-cats:not(.is-collapsible) .ph-cats-in {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ph-cats:not(.is-collapsible) .ph-cats-in::-webkit-scrollbar { display: none; }
  .ph-cat { font-size: .792rem; padding: .28rem .6rem; }
}

/* -------------------------------------------- collapsible categories --- */
.ph-cats.is-collapsible .ph-cats-in {
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: 2.8376rem;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
}

.ph-cats-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  margin-right: .5rem;
  border-radius: 9999px;
  color: #cbd5e1;
  background-color: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ph-cats-home:hover  { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; transform: translateY(-1px); }
.ph-cats-home:active { transform: translateY(0) scale(.94); }

.ph-cats-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex-shrink: 0;
  height: 1.85rem;
  padding: 0 .9rem;
  border-radius: 9999px;
  font-size: .814rem;
  font-weight: 700;
  color: #bfdbfe;
  background-color: rgba(59, 130, 246, .16);
  border: 1px solid rgba(59, 130, 246, .34);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, width .375s ease, padding .375s ease;
}
.ph-cats-toggle:hover { background-color: rgba(59, 130, 246, .26); border-color: rgba(59, 130, 246, .5); color: #fff; }
.ph-cats-toggle-open { display: inline-flex; align-items: center; gap: .4rem; }
.ph-cats-toggle-close { display: none; }

.ph-cats.is-open .ph-cats-toggle { width: 1.85rem; padding: 0; }
.ph-cats.is-open .ph-cats-toggle-open { display: none; }
.ph-cats.is-open .ph-cats-toggle-close { display: inline-flex; }

.ph-cats-list {
  display: grid;
  grid-template-columns: 0fr;
  min-width: 0;
  overflow: hidden;
  transition: grid-template-columns .6875s cubic-bezier(.22, 1, .36, 1);
}
.ph-cats.is-open .ph-cats-list { grid-template-columns: 1fr; }

.ph-cats-list-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .1rem .15rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  padding-left: .55rem;
  opacity: 0;
  transition: opacity .3125s ease;
}
.ph-cats-list-inner::-webkit-scrollbar { display: none; }
.ph-cats.is-open .ph-cats-list-inner { opacity: 1; transition: opacity .375s ease .1875s; }

.ph-cats-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.775rem;
  height: 2.775rem;
  margin-left: auto;
  border-radius: .9rem;   /* square (rounded corners, not a pill), per Cong's spec */
  color: #fff;
  background-image: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
  box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ph-cats-add svg { opacity: .95; }
.ph-cats-add:hover  { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(99, 102, 241, 1), inset 0 1px 0 rgba(255, 255, 255, .38); }
.ph-cats-add:active { transform: translateY(0) scale(.94); }

/* ===================================================================
   v9 - the two quiet ways in, beside the loud one.
   Appended last, so these win.
   =================================================================== */

/* Log in / Sign up as plain words rather than buttons. Somebody who
   already knows which one they want does not need to be shouted at, and
   two more filled buttons beside the gradient CTA would turn the end of
   the header into a wall. Both open the same panel - it holds both. */
.ph-enter {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  flex-shrink: 0;
}
.ph-enter-link {
  padding: .4rem .6rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: #94a3b8;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.ph-enter-link:hover { color: #f1f5f9; background-color: rgba(255, 255, 255, .06); }
.ph-enter-link:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }

/* A hairline, not a slash or a dot: it separates the two without adding a
   third thing to read. */
.ph-enter-sep {
  width: 1px;
  height: .95rem;
  background-color: rgba(255, 255, 255, .14);
}

/* The CTA now carries a whole sentence, so it is allowed to be a shade
   smaller and lighter than it was when it held three words. */
.ph-cta { font-size: .78rem; font-weight: 600; padding: 0 1.05rem; }

/* Narrow screens: the sentence stays, just smaller, so it fits one line
   next to Log in / Sign up instead of running off a phone screen. */
@media (max-width: 900px) {
  .ph-cta { font-size: .72rem; padding: 0 .85rem; gap: .4rem; height: auto; min-height: 2.5rem; }
}

@media (max-width: 1023px) {
  .ph-cta { order: -1; }
}

/* ===================================================================
   v10 - a prompt can be in several categories at once.
   Appended last, so these win.
   =================================================================== */

/* --- The tick list in the Add and Edit forms ---------------------- */
/* Chips rather than a column of checkboxes: a category name is two words
   at most, and a stacked list of eight of them turns the form into a
   scroll. The box itself is hidden - the chip lights up instead, which
   is the same information with none of the browser's default chrome. */
.ph-checks {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .55rem;
  border-radius: .9rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  max-height: 9rem;
  overflow-y: auto;
}
.dark .ph-checks { background-color: #020617; border-color: #1e293b; }

.ph-check {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .65rem;
  border-radius: 9999px;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  color: #64748b;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  user-select: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.dark .ph-check { color: #94a3b8; background-color: #0f172a; border-color: #1e293b; }
.ph-check:hover { color: #334155; border-color: #cbd5e1; }
.dark .ph-check:hover { color: #e2e8f0; border-color: #334155; }

.ph-check input { position: absolute; opacity: 0; width: 0; height: 0; }

/* A ticked chip. :has() does the work in every current browser; the
   .is-on class printed by PHP covers the first paint and anything older,
   and app.js keeps it in step as boxes are clicked. */
.ph-check.is-on,
.ph-check:has(input:checked) {
  color: #1d4ed8;
  background-color: #dbeafe;
  border-color: #93c5fd;
}
.dark .ph-check.is-on,
.dark .ph-check:has(input:checked) {
  color: #bfdbfe;
  background-color: rgba(37, 99, 235, .22);
  border-color: rgba(59, 130, 246, .5);
}
.ph-check:has(input:focus-visible) { outline: 2px solid #60a5fa; outline-offset: 2px; }

.ph-checks-empty {
  padding: .55rem .2rem;
  font-size: .72rem;
  color: #94a3b8;
}

/* --- The picker menu ticks --------------------------------------- */
/* Same idea in the little menu beside a card: the row keeps its place in
   the list and a tick appears at the front, so ticking three of them does
   not make the list jump about under the pointer. */
.ph-pick-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  border-radius: .3rem;
  border: 1px solid rgba(255, 255, 255, .18);
  color: transparent;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.ph-pick-tick svg { width: .7rem; height: .7rem; stroke-width: 3.5; }

.ph-pick-item.is-on .ph-pick-tick {
  color: #fff;
  background-color: #6366f1;
  border-color: #6366f1;
}
.ph-pick-item.is-on { color: #fff; }

/* ===================================================================
   Site Mode - Maintenance Mode / Coming Soon.

   The switch inside the Control Panel, plus the strip that warns the
   admin the site is closed. Written by hand rather than with Tailwind
   utilities because this file is pre-built: a utility the old markup
   never used is not in here, so it would silently do nothing.
   See includes/gate.php and includes/modals/admin.php.
   =================================================================== */

.ph-mode-box {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(2, 6, 23, .55);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Amber, not red: the site being closed is a state the admin chose, not
   an error - but it must never be possible to forget about it. */
.ph-mode-box.is-closed {
  border-color: rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .06);
}

.ph-mode-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ph-mode-hint { margin: .15rem 0 0; font-size: .72rem; line-height: 1.55; color: #94a3b8; }

.ph-mode-closed-tag {
  flex-shrink: 0;
  padding: .2rem .6rem;
  border-radius: 9999px;
  background: rgba(245, 158, 11, .18);
  color: #fbbf24;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- the three-position switch ------------------------------------ */
.ph-mode-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 640px) { .ph-mode-grid { grid-template-columns: repeat(3, 1fr); } }

.ph-mode-card {
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: .7rem .8rem;
  border-radius: .8rem;
  border: 1px solid rgba(148, 163, 184, .2);
  background: #0f172a;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.ph-mode-card:hover { border-color: rgba(148, 163, 184, .45); transform: translateY(-1px); }

.ph-mode-head { display: flex; align-items: center; gap: .45rem; }
.ph-mode-ic   { display: inline-flex; color: #64748b; }
.ph-mode-ic svg { width: 1rem; height: 1rem; }
.ph-mode-name { font-size: .78rem; font-weight: 700; color: #cbd5e1; }
.ph-mode-badge {
  margin-left: auto;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ph-mode-desc {
  display: block;
  margin-top: .4rem;
  font-size: .68rem;
  line-height: 1.5;
  color: #94a3b8;
}

/* The chosen position, one colour per mode: green is open, amber is shut
   for repairs, blue is not open yet. */
.ph-mode-card.is-live        { border-color: #10b981; background: rgba(16, 185, 129, .1);  box-shadow: 0 0 0 1px rgba(16, 185, 129, .35); }
.ph-mode-card.is-maintenance { border-color: #f59e0b; background: rgba(245, 158, 11, .1);  box-shadow: 0 0 0 1px rgba(245, 158, 11, .35); }
.ph-mode-card.is-coming-soon { border-color: #3b82f6; background: rgba(59, 130, 246, .1);  box-shadow: 0 0 0 1px rgba(59, 130, 246, .35); }

.ph-mode-card.is-live .ph-mode-name,
.ph-mode-card.is-live .ph-mode-ic,
.ph-mode-card.is-live .ph-mode-badge        { color: #10b981; }
.ph-mode-card.is-maintenance .ph-mode-name,
.ph-mode-card.is-maintenance .ph-mode-ic,
.ph-mode-card.is-maintenance .ph-mode-badge { color: #f59e0b; }
.ph-mode-card.is-coming-soon .ph-mode-name,
.ph-mode-card.is-coming-soon .ph-mode-ic,
.ph-mode-card.is-coming-soon .ph-mode-badge { color: #60a5fa; }

/* --- the two editable lines --------------------------------------- */
.ph-mode-notes { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .ph-mode-notes { grid-template-columns: repeat(2, 1fr); } }

.ph-mode-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .68rem;
  font-weight: 600;
  color: #94a3b8;
}
.ph-mode-row { display: flex; align-items: center; gap: .45rem; }

.ph-mode-input {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  border-radius: .6rem;
  background: #020617;
  border: 1px solid #334155;
  color: #e2e8f0;
  font-family: inherit;
  font-size: .72rem;
}
.ph-mode-input:focus { outline: none; border-color: #3b82f6; }
.ph-mode-input.is-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  color: #cbd5e1;
  user-select: all;
}

.ph-mode-save, .ph-mode-copy {
  flex-shrink: 0;
  padding: .5rem .85rem;
  border-radius: .6rem;
  border: 0;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ph-mode-save { background: #475569; }
.ph-mode-save:hover { background: #64748b; }
.ph-mode-copy { background: #2563eb; }
.ph-mode-copy:hover { background: #3b82f6; }

/* --- the secret link ---------------------------------------------- */
.ph-mode-key {
  padding: .8rem;
  border-radius: .8rem;
  background: #0b1120;
  border: 1px solid rgba(148, 163, 184, .22);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.ph-mode-key-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: #cbd5e1;
}
.ph-mode-key-title svg { width: .9rem; height: .9rem; color: #60a5fa; }

.ph-mode-danger {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 700;
  color: #fb7185;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ph-mode-danger:hover { color: #fda4af; }

/* --- the strip that tells the admin the site is closed ------------- */
/* Sits above the header on every page, so the site can never be left
   closed by accident: the way out is one button, always in sight. */
.ph-closed-bar {
  position: relative;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem .9rem;
  padding: .5rem 1rem;
  background-image: linear-gradient(90deg, #b45309 0%, #d97706 50%, #b45309 100%);
  color: #fff7ed;
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
}
.ph-closed-bar svg { width: .95rem; height: .95rem; flex-shrink: 0; }
.ph-closed-bar strong { font-weight: 800; }

.ph-closed-btn {
  padding: .28rem .8rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ph-closed-btn:hover { background: #fff; color: #b45309; }

/* Self-hosted Roboto (replaces Google Fonts CDN — avoids Safari third-party tracking-protection warning) */
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/roboto-300.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/roboto-500.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/roboto-700.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/roboto-900.woff2') format('woff2');}

/* =====================================================================
   v11 - THUMBNAILS KEEP THE SHAPE OF THEIR OWN PICTURE
   =====================================================================

   Added at the END of this file on purpose. app.css is the pre-built
   stylesheet the site actually loads and there is no build step on the
   server, so new rules are appended here by hand and mirrored into
   input.css (the readable source) rather than edited into the middle of a
   compiled file. Everything below overrides what came before it simply by
   being later, or by carrying one more class.

   The full explanation of each rule is in input.css - this is the same CSS.
   ===================================================================== */

/* --- the grid is a masonry ----------------------------------------- */
/* align-items: start is load-bearing. Without it a card stretches to fill
   the rows it spans, its height grows, the span is recalculated from the new
   height, and the layout loops. row-gap becomes 0 because the gap is built
   into the span instead - a real row-gap would be added between every one of
   those 4px rows. Both the class and the spans come from app.js, so with
   JavaScript off this stays an ordinary grid. */
.ph-grid { align-items: start; }
.ph-grid.is-masonry { row-gap: 0; grid-auto-rows: 4px; }
.ph-grid.is-masonry > * { grid-row-end: span var(--ph-span, 110); }

/* The picture's own proportions, written onto the element by card.php.
   16/9 is only the fallback for a picture nobody has measured yet. */
.ph-thumb { aspect-ratio: var(--ph-ar, 16 / 9); }

/* --- Featured: one shape, and the admin chooses what is in it ------- */
/* The picture is blown up until its crop rectangle is exactly the size of the
   card, then slid left and up by the crop's own offset. transform-origin is
   what keeps the hover zoom happening where the viewer is looking instead of
   about a point off the side of the card. */
.ph-feat-media.is-cropped { background-color: #020617; }
.ph-feat-media.is-cropped img {
  position: absolute;
  left:   calc(-100% * var(--ph-cx) / var(--ph-cw));
  top:    calc(-100% * var(--ph-cy) / var(--ph-ch));
  width:  calc(100% * 100 / var(--ph-cw));
  height: calc(100% * 100 / var(--ph-ch));
  max-width: none;
  object-fit: fill;
  transform-origin:
    calc(var(--ph-cx) * 1% + var(--ph-cw) * 0.5%)
    calc(var(--ph-cy) * 1% + var(--ph-ch) * 0.5%);
}

/* =====================================================================
   THE FEATURED CROP PICKER
   =====================================================================

   Opens over the page when an admin features a picture that is not wide
   enough to fill a 16:9 Featured card on its own. The admin drags a frame
   over the picture and what is inside it becomes the card.

   The dark surround is one enormous box-shadow on the frame itself rather
   than four masking panels around it, which is why .ph-crop-wrap clips: the
   shadow is 9999px in every direction and would otherwise cover the page. */
.ph-crop-back {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(2, 6, 23, .84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ph-crop-panel {
  width: min(60rem, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background-color: #0f172a;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95);
}

.ph-crop-head { display: flex; flex-direction: column; gap: .2rem; }
.ph-crop-head strong { font-size: .95rem; font-weight: 700; color: #f8fafc; }
.ph-crop-head span   { font-size: .78rem; color: #94a3b8; }

.ph-crop-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: .75rem;
  border-radius: .85rem;
  background-color: #020617;
  border: 1px solid rgba(255, 255, 255, .06);
}

.ph-crop-wrap { position: relative; line-height: 0; overflow: hidden; }
.ph-crop-wrap img {
  display: block;
  max-width: 100%;
  max-height: 58vh;
  user-select: none;
  -webkit-user-drag: none;
}

/* The frame. touch-action: none is what lets a finger drag it on a phone -
   without it the browser takes the gesture for scrolling instead. */
.ph-crop-rect {
  position: absolute;
  cursor: move;
  touch-action: none;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, .66);
}
/* Rule of thirds, so the frame can be placed on something and not just
   somewhere. */
.ph-crop-rect::before,
.ph-crop-rect::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
}
.ph-crop-rect::before {
  background-image: linear-gradient(to right, transparent 33.33%, #fff 33.33%, #fff calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, #fff 66.66%, #fff calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
.ph-crop-rect::after {
  background-image: linear-gradient(to bottom, transparent 33.33%, #fff 33.33%, #fff calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, #fff 66.66%, #fff calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

/* Corner grips. Deliberately larger than they look on a touch screen. */
.ph-crop-h {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: .28rem;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  touch-action: none;
}
.ph-crop-h[data-h="nw"] { top: -.55rem; left:  -.55rem; cursor: nwse-resize; }
.ph-crop-h[data-h="ne"] { top: -.55rem; right: -.55rem; cursor: nesw-resize; }
.ph-crop-h[data-h="sw"] { bottom: -.55rem; left:  -.55rem; cursor: nesw-resize; }
.ph-crop-h[data-h="se"] { bottom: -.55rem; right: -.55rem; cursor: nwse-resize; }

.ph-crop-foot { display: flex; justify-content: flex-end; gap: .5rem; }
.ph-crop-btn {
  padding: .55rem 1.1rem;
  border-radius: .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: #e2e8f0;
  background-color: rgba(30, 41, 59, .9);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background-color .18s ease, opacity .18s ease;
}
.ph-crop-btn:hover { background-color: rgba(51, 65, 85, .95); }
.ph-crop-btn.is-primary {
  color: #fff;
  background-color: #2563eb;
  border-color: transparent;
}
.ph-crop-btn.is-primary:hover { background-color: #3b82f6; }
.ph-crop-btn:disabled { opacity: .5; cursor: not-allowed; }

/* =====================================================================
   MEMBER MANAGEMENT — restrained midnight grid, matching the site gate
   ===================================================================== */
.ph-members {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(71, 85, 105, .5);
  border-radius: 1.25rem;
  background-color: #081224;
  background-image:
    linear-gradient(rgba(71, 85, 105, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 85, 105, .11) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, .12), transparent 55%);
  background-size: 42px 42px, 42px 42px, auto;
}
.ph-members-table { border-collapse: collapse; }
.ph-members-table thead { background: rgba(15, 23, 42, .82); }
.ph-members-table tbody tr { transition: background-color .18s ease; }
.ph-members-table tbody tr:hover { background: rgba(30, 41, 59, .45); }
.ph-members-table td, .ph-members-table th { border-color: rgba(71, 85, 105, .35); }
.ph-member-auth {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  max-width: 100%;
  padding: .34rem .6rem;
  border: 1px solid rgba(100, 116, 139, .3);
  border-radius: 999px;
  color: #a8b7ce;
  background: rgba(15, 23, 42, .65);
  font-size: .67rem;
  font-weight: 700;
  white-space: nowrap;
}
.ph-member-auth.is-google { color: #7fb0ff; border-color: rgba(59, 130, 246, .4); }
.ph-member-auth svg { width: .78rem; height: .78rem; flex: 0 0 auto; }
.ph-member-manage > summary { transition: transform .16s ease, background-color .16s ease; }
.ph-member-manage[open] > summary { transform: translateY(-1px); background: #334155; }
.ph-member-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(59, 130, 246, .28);
  border-radius: .7rem;
  background: rgba(30, 58, 138, .16);
  color: #bfdbfe;
  font-size: .7rem;
  line-height: 1.35;
}
.ph-member-board-feedback {
  padding: .7rem .85rem;
  border: 1px solid rgba(59, 130, 246, .28);
  border-radius: .8rem;
  background: rgba(30, 58, 138, .14);
  color: #bfdbfe;
  font-size: .76rem;
  font-weight: 700;
}
.ph-member-undo {
  flex: 0 0 auto;
  padding: .28rem .55rem;
  border: 1px solid rgba(147, 197, 253, .45);
  border-radius: .45rem;
  color: #eff6ff;
  font-weight: 800;
  cursor: pointer;
  background: rgba(30, 64, 175, .35);
}
.ph-member-undo:hover { background: rgba(37, 99, 235, .65); }

@media (max-width: 720px) {
  .ph-members { overflow-x: auto; }
  .ph-members-table { min-width: 690px; }
}

/* On a phone the picture gets the room instead of the panel's padding. */
@media (max-width: 640px) {
  .ph-crop-back  { padding: .5rem; }
  .ph-crop-panel { padding: .8rem .75rem .9rem; gap: .7rem; }
  .ph-crop-stage { padding: .4rem; }
  .ph-crop-wrap img { max-height: 52vh; }
  .ph-crop-foot  { gap: .4rem; }
  .ph-crop-btn   { flex: 1; text-align: center; }
}