/* ===================================================================
   ApoGene LP — Production stylesheet
   Tailwind v3 utility subset + custom theme + components
   Hand-built equivalent of `npx tailwindcss -i input.css -o style.css --minify`
   =================================================================== */

/* -------------------------------------------------------------------
   1. Preflight (Tailwind reset)
   ------------------------------------------------------------------- */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
::before,::after{--tw-content:''}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:'Noto Sans JP',sans-serif;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
abbr[title]{text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Courier New',monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none}
:-moz-focusring{outline:auto}
progress{vertical-align:baseline}
[type='search']{-webkit-appearance:textfield;outline-offset:-2px}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}
fieldset{margin:0;padding:0}
legend{padding:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
button,[role='button']{cursor:pointer}
:disabled{cursor:default}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]{display:none}

/* -------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------- */
body{
    font-family:'Noto Sans JP',sans-serif;
    scroll-behavior:smooth;
    color:#333;
    background-color:#f8fafc;
}

/* -------------------------------------------------------------------
   3. Custom theme tokens (CSS variables)
   ------------------------------------------------------------------- */
:root{
    --apo-orange:243 105 35;     /* #F36923 */
    --apo-red:215 38 33;         /* #D72621 */
    --gene-navy:26 54 93;        /* #1A365D */
    --gene-blue:41 128 185;      /* #2980B9 */
    --gold-rec:255 209 102;      /* #FFD166 */
    --tw-ring-offset-width:0px;
    --tw-ring-offset-color:#fff;
    --tw-ring-color:rgb(59 130 246 / .5);
    --tw-ring-offset-shadow:0 0 #0000;
    --tw-ring-shadow:0 0 #0000;
    --tw-shadow:0 0 #0000;
    --tw-blur: ;
    --tw-translate-x:0;
    --tw-translate-y:0;
    --tw-rotate:0;
    --tw-scale-x:1;
    --tw-scale-y:1;
    --tw-skew-x:0;
    --tw-skew-y:0;
}

/* -------------------------------------------------------------------
   4. Custom components
   ------------------------------------------------------------------- */
.btn-buy{transition:all .3s ease;box-shadow:0 4px 15px rgba(215,38,33,.3)}
.btn-buy:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(215,38,33,.5)}

.glass-card{
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* スクロールヒント */
.scroll-hint{animation:bounce-x 2s infinite}
@keyframes bounce-x{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* ダッシュボード — ライブネス */
.dashboard-blink{
    animation:dashboard-blink 1.4s ease-in-out infinite;
    box-shadow:0 0 0 0 rgba(34,197,94,.6);
}
@keyframes dashboard-blink{
    0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.7)}
    50%{opacity:.4;box-shadow:0 0 0 6px rgba(34,197,94,0)}
}

.dashboard-progress-stripe{
    background-image:
        linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent),
        linear-gradient(135deg,#F36923,#D72621);
    background-size:1rem 1rem,100% 100%;
    animation:stripe-shift 1s linear infinite;
}
@keyframes stripe-shift{
    0%{background-position:0 0,0 0}
    100%{background-position:1rem 0,0 0}
}

.dashboard-log-line{animation:log-fade-in .5s ease-out}
@keyframes log-fade-in{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:.85;transform:translateY(0)}
}

/* Blob & pulse */
@keyframes blob{
    0%{transform:translate(0,0) scale(1)}
    33%{transform:translate(30px,-50px) scale(1.1)}
    66%{transform:translate(-20px,20px) scale(.9)}
    100%{transform:translate(0,0) scale(1)}
}
.animate-blob{animation:blob 7s infinite}
.animation-delay-2000{animation-delay:2s}
.animation-delay-4000{animation-delay:4s}

@keyframes pulse{50%{opacity:.5}}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}

@keyframes bounce{
    0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}
    50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}
}
.animate-bounce{animation:bounce 1s infinite}

/* -------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------- */
.container{width:100%}
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}

.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}

.inset-0{inset:0}
.inset-x-0{left:0;right:0}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.bottom-0{bottom:0}
.top-\[-10\%\]{top:-10%}
.top-\[20\%\]{top:20%}
.-top-4{top:-1rem}
.-top-10{top:-2.5rem}
.left-\[-10\%\]{left:-10%}
.left-\[20\%\]{left:20%}
.-left-10{left:-2.5rem}
.right-\[-10\%\]{right:-10%}
.-right-4{right:-1rem}
.-right-10{right:-2.5rem}
.bottom-\[-20\%\]{bottom:-20%}
.-bottom-10{bottom:-2.5rem}

.z-0{z-index:0}
.z-10{z-index:10}
.z-50{z-index:50}
.-z-0{z-index:0}
.-z-10{z-index:-10}

.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.scroll-mt-\[20vh\]{scroll-margin-top:20vh}

/* -------------------------------------------------------------------
   6. Sizing
   ------------------------------------------------------------------- */
.w-full{width:100%}
.w-1\/4{width:25%}
.w-2{width:.5rem}
.w-3{width:.75rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-8{width:2rem}
.w-10{width:2.5rem}
.w-12{width:3rem}
.w-16{width:4rem}
.w-20{width:5rem}
.w-24{width:6rem}
.w-32{width:8rem}
.w-96{width:24rem}
.w-\[800px\]{width:800px}

.h-full{height:100%}
.h-1{height:.25rem}
.h-2{height:.5rem}
.h-2\.5{height:.625rem}
.h-3{height:.75rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-32{height:8rem}
.h-96{height:24rem}
.h-\[800px\]{height:800px}

.min-w-\[800px\]{min-width:800px}
.max-w-lg{max-width:32rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-7xl{max-width:80rem}

/* -------------------------------------------------------------------
   7. Spacing
   ------------------------------------------------------------------- */
.m-0{margin:0}
.mx-auto{margin-left:auto;margin-right:auto}
.-mx-4{margin-left:-1rem;margin-right:-1rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.mt-auto{margin-top:auto}
.mt-0\.5{margin-top:.125rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-16{margin-top:4rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-16{margin-bottom:4rem}
.ml-0\.5{margin-left:.125rem}
.ml-1{margin-left:.25rem}
.ml-4{margin-left:1rem}
.mr-1{margin-right:.25rem}
.mr-1\.5{margin-right:.375rem}
.mr-2{margin-right:.5rem}

.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-5{padding-top:1.25rem}
.pt-32{padding-top:8rem}
.pb-0\.5{padding-bottom:.125rem}
.pb-5{padding-bottom:1.25rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pb-20{padding-bottom:5rem}
.pl-11{padding-left:2.75rem}
.pr-4{padding-right:1rem}
.pr-5{padding-right:1.25rem}

.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}

.space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:.625rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}

/* -------------------------------------------------------------------
   8. Flexbox & Grid
   ------------------------------------------------------------------- */
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-grow{flex-grow:1}
.shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-stretch{align-items:stretch}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.order-1{order:1}
.order-2{order:2}

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}
.col-span-2{grid-column:span 2/span 2}

/* -------------------------------------------------------------------
   9. Typography
   ------------------------------------------------------------------- */
.text-\[10px\]{font-size:10px;line-height:1.2}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}

.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Courier New',monospace}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.font-black{font-weight:900}

.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.leading-loose{line-height:2}
.tracking-tight{letter-spacing:-.025em}
.tracking-wide{letter-spacing:.025em}
.tracking-wider{letter-spacing:.05em}
.uppercase{text-transform:uppercase}
.line-through{text-decoration-line:line-through}
.no-underline{text-decoration-line:none}
.whitespace-nowrap{white-space:nowrap}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}

/* -------------------------------------------------------------------
   10. Colors — Text
   ------------------------------------------------------------------- */
.text-transparent{color:transparent}
.text-white{color:#fff}
.text-gray-300{color:#d1d5db}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-gray-800{color:#1f2937}
.text-blue-200{color:#bfdbfe}
.text-blue-400{color:#60a5fa}
.text-green-400{color:#4ade80}
.text-green-500{color:#22c55e}
.text-green-600{color:#16a34a}
.text-red-100{color:#fee2e2}
.text-red-400{color:#f87171}
.text-red-500{color:#ef4444}
.text-yellow-400{color:#facc15}
.text-yellow-500{color:#eab308}
.text-yellow-800{color:#854d0e}
.text-indigo-400{color:#818cf8}
.text-slate-700{color:#334155}
.text-teal-600{color:#0d9488}

/* Theme text colors */
.text-apo-orange{color:rgb(var(--apo-orange))}
.text-apo-red{color:rgb(var(--apo-red))}
.text-gene-navy{color:rgb(var(--gene-navy))}
.text-gene-blue{color:rgb(var(--gene-blue))}
.text-gold-rec{color:rgb(var(--gold-rec))}

/* -------------------------------------------------------------------
   11. Colors — Background
   ------------------------------------------------------------------- */
.bg-white{background-color:#fff}
.bg-white\/90{background-color:rgba(255,255,255,.9)}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-200{background-color:#e5e7eb}
.bg-blue-50{background-color:#eff6ff}
.bg-blue-100{background-color:#dbeafe}
.bg-green-400{background-color:#4ade80}
.bg-green-500{background-color:#22c55e}
.bg-red-100{background-color:#fee2e2}
.bg-red-400{background-color:#f87171}
.bg-orange-50{background-color:#fff7ed}
.bg-orange-100{background-color:#ffedd5}
.bg-yellow-100{background-color:#fef9c3}
.bg-yellow-400{background-color:#facc15}
.bg-teal-100{background-color:#ccfbf1}
.bg-slate-50{background-color:#f8fafc}
.bg-slate-700{background-color:#334155}
.bg-slate-800{background-color:#1e293b}
.bg-slate-900{background-color:#0f172a}

/* Theme bg */
.bg-apo-orange{background-color:rgb(var(--apo-orange))}
.bg-apo-red{background-color:rgb(var(--apo-red))}
.bg-gene-navy{background-color:rgb(var(--gene-navy))}
.bg-gene-blue{background-color:rgb(var(--gene-blue))}
.bg-apo-orange\/20{background-color:rgb(var(--apo-orange)/.2)}
.bg-apo-red\/20{background-color:rgb(var(--apo-red)/.2)}
.bg-gene-blue\/20{background-color:rgb(var(--gene-blue)/.2)}

/* Gradients */
.bg-gradient-apo{background-image:linear-gradient(135deg,rgb(var(--apo-orange)),rgb(var(--apo-red)))}
.bg-gradient-gene{background-image:linear-gradient(135deg,rgb(var(--gene-navy)),rgb(var(--gene-blue)))}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-bl{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops))}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-slate-900{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgb(15 23 42 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}

/* -------------------------------------------------------------------
   12. Colors — Border
   ------------------------------------------------------------------- */
.border{border-width:1px}
.border-2{border-width:2px}
.border-b{border-bottom-width:1px}
.border-b-0{border-bottom-width:0}
.border-b-4{border-bottom-width:4px}
.border-l{border-left-width:1px}
.border-r{border-right-width:1px}
.border-t{border-top-width:1px}
.border-x{border-left-width:1px;border-right-width:1px}
.border-collapse{border-collapse:collapse}
.border-dashed{border-style:dashed}

.border-gray-100{border-color:#f3f4f6}
.border-gray-200{border-color:#e5e7eb}
.border-gray-300{border-color:#d1d5db}
.border-gray-800{border-color:#1f2937}
.border-orange-100{border-color:#ffedd5}
.border-orange-200{border-color:#fed7aa}
.border-red-200{border-color:#fecaca}
.border-slate-700{border-color:#334155}

/* Theme border */
.border-apo-orange{border-color:rgb(var(--apo-orange))}
.border-apo-red{border-color:rgb(var(--apo-red))}
.border-gene-navy{border-color:rgb(var(--gene-navy))}
.border-gene-blue{border-color:rgb(var(--gene-blue))}
.border-gene-blue\/10{border-color:rgb(var(--gene-blue)/.1)}
.border-gold-rec\/40{border-color:rgb(var(--gold-rec)/.4)}

/* -------------------------------------------------------------------
   13. Border radius
   ------------------------------------------------------------------- */
.rounded{border-radius:.25rem}
.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.rounded-bl-2xl{border-bottom-left-radius:1rem}
.rounded-bl-full{border-bottom-left-radius:9999px}
.rounded-br-2xl{border-bottom-right-radius:1rem}
.rounded-tl-none{border-top-left-radius:0}

/* -------------------------------------------------------------------
   14. Effects (shadow, blur, opacity, mix-blend)
   ------------------------------------------------------------------- */
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05)}

.opacity-10{opacity:.1}
.opacity-50{opacity:.5}
.opacity-70{opacity:.7}
.opacity-80{opacity:.8}

.mix-blend-multiply{mix-blend-mode:multiply}
.mix-blend-overlay{mix-blend-mode:overlay}

.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,)}
.blur-3xl{--tw-blur:blur(64px);filter:blur(64px)}
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}
.object-contain{object-fit:contain}
.align-middle{vertical-align:middle}

/* -------------------------------------------------------------------
   15. Transforms
   ------------------------------------------------------------------- */
.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-rotate-2{--tw-rotate:-2deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

/* -------------------------------------------------------------------
   16. Transitions
   ------------------------------------------------------------------- */
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}

/* -------------------------------------------------------------------
   17. Focus / Hover / Group states
   ------------------------------------------------------------------- */
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{
    box-shadow:
        var(--tw-ring-offset-shadow,0 0 #0000),
        0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color),
        var(--tw-shadow,0 0 #0000);
}
.focus\:ring-gene-blue:focus{--tw-ring-color:rgb(var(--gene-blue))}
.focus\:border-transparent:focus{border-color:transparent}

.hover\:bg-blue-50:hover{background-color:#eff6ff}
.hover\:bg-blue-100:hover{background-color:#dbeafe}
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.hover\:bg-orange-50:hover{background-color:#fff7ed}
.hover\:text-white:hover{color:#fff}
.hover\:text-apo-red:hover{color:rgb(var(--apo-red))}
.hover\:text-apo-orange:hover{color:rgb(var(--apo-orange))}
.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:-translate-y-1:hover{--tw-translate-y:-.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.hover\:underline:hover{text-decoration-line:underline}
.hover\:border-gene-blue\/30:hover{border-color:rgb(var(--gene-blue)/.3)}
.hover\:border-gene-blue\/40:hover{border-color:rgb(var(--gene-blue)/.4)}

.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.group:hover .group-hover\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.group:hover .group-hover\:text-gene-blue{color:rgb(var(--gene-blue))}
.group:hover .group-hover\:text-gene-navy{color:rgb(var(--gene-navy))}

/* truncate (used in dashboard log) */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -------------------------------------------------------------------
   18. Responsive — sm (>=640px)
   ------------------------------------------------------------------- */
@media (min-width:640px){
    .sm\:block{display:block}
    .sm\:inline{display:inline}
    .sm\:hidden{display:none}
    .sm\:flex-row{flex-direction:row}
    .sm\:gap-2{gap:.5rem}
    .sm\:gap-3{gap:.75rem}
    .sm\:gap-4{gap:1rem}
    .sm\:gap-8{gap:2rem}
    .sm\:space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
    .sm\:mx-0{margin-left:0;margin-right:0}
    .sm\:mr-2{margin-right:.5rem}
    .sm\:mb-2{margin-bottom:.5rem}
    .sm\:mb-6{margin-bottom:1.5rem}
    .sm\:mb-10{margin-bottom:2.5rem}
    .sm\:mb-16{margin-bottom:4rem}
    .sm\:p-4{padding:1rem}
    .sm\:p-6{padding:1.5rem}
    .sm\:p-8{padding:2rem}
    .sm\:px-0{padding-left:0;padding-right:0}
    .sm\:px-3{padding-left:.75rem;padding-right:.75rem}
    .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
    .sm\:px-8{padding-left:2rem;padding-right:2rem}
    .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}
    .sm\:py-1{padding-top:.25rem;padding-bottom:.25rem}
    .sm\:py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
    .sm\:py-4{padding-top:1rem;padding-bottom:1rem}
    .sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
    .sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
    .sm\:py-8{padding-top:2rem;padding-bottom:2rem}
    .sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
    .sm\:pl-14{padding-left:3.5rem}
    .sm\:pr-6{padding-right:1.5rem}
    .sm\:pb-6{padding-bottom:1.5rem}
    .sm\:w-auto{width:auto}
    .sm\:w-10{width:2.5rem}
    .sm\:w-14{width:3.5rem}
    .sm\:h-10{height:2.5rem}
    .sm\:h-14{height:3.5rem}
    .sm\:text-xs{font-size:.75rem;line-height:1rem}
    .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
    .sm\:text-base{font-size:1rem;line-height:1.5rem}
    .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
    .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
    .sm\:text-2xl{font-size:1.5rem;line-height:2rem}
    .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
    .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
    .sm\:text-5xl{font-size:3rem;line-height:1}
    .sm\:text-6xl{font-size:3.75rem;line-height:1}
    .sm\:text-left{text-align:left}
}

/* -------------------------------------------------------------------
   19. Responsive — md (>=768px)
   ------------------------------------------------------------------- */
@media (min-width:768px){
    .md\:block{display:block}
    .md\:hidden{display:none}
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .md\:col-span-1{grid-column:span 1/span 1}
    .md\:col-span-3{grid-column:span 3/span 3}
    .md\:p-8{padding:2rem}
    .md\:p-12{padding:3rem}
    .md\:h-10{height:2.5rem}
    .md\:text-base{font-size:1rem;line-height:1.5rem}
    .md\:text-lg{font-size:1.125rem;line-height:1.75rem}
    .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
    .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
    .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
    .md\:text-5xl{font-size:3rem;line-height:1}
}

/* -------------------------------------------------------------------
   20. Responsive — lg (>=1024px)
   ------------------------------------------------------------------- */
@media (min-width:1024px){
    .lg\:flex{display:flex}
    .lg\:hidden{display:none}
    .lg\:inline{display:inline}
    .lg\:flex-row{flex-direction:row}
    .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .lg\:gap-12{gap:3rem}
    .lg\:order-1{order:1}
    .lg\:order-2{order:2}
    .lg\:px-8{padding-left:2rem;padding-right:2rem}
    .lg\:pt-48{padding-top:12rem}
    .lg\:pb-32{padding-bottom:8rem}
    .lg\:mb-20{margin-bottom:5rem}
    .lg\:text-6xl{font-size:3.75rem;line-height:1}
}