/* Layout: herramienta oscura con la identidad del logo — controles deslizables a la izquierda, contador de fuga en vivo a la derecha */
 :root {
     --ink: #060A18;
     --ink-2: #0B1226;
     --ink-3: #111A35;
     --line: rgba(140, 170, 255, .14);
     --line-2: rgba(140, 170, 255, .26);
     --fg: #EEF2FF;
     --mut: #9AA6C6;
     --cyan: #02D5F3;
     --blue: #1E41EF;
     --warn: #FFB547;
     --ok: #2EE6A6;
     --grad: linear-gradient(120deg, var(--cyan), var(--blue));
     --f-disp: "Archivo", "Arial Black", system-ui, sans-serif;
     --f-body: "Onest", "Segoe UI", system-ui, sans-serif;
     --f-ser: "Instrument Serif", Georgia, serif;
     color-scheme: dark;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box
 }

 body {
     background: var(--ink);
     color: var(--fg);
     font-family: var(--f-body);
     line-height: 1.55;
     overflow-x: hidden
 }

 body::before {
     content: "";
     position: fixed;
     inset: -20% -10% auto auto;
     width: 620px;
     height: 620px;
     background: radial-gradient(circle, rgba(30, 65, 239, .32), transparent 62%);
     z-index: 0;
     pointer-events: none;
     animation: drift 14s ease-in-out infinite
 }

 body::after {
     content: "";
     position: fixed;
     inset: auto auto -25% -15%;
     width: 560px;
     height: 560px;
     background: radial-gradient(circle, rgba(2, 213, 243, .16), transparent 62%);
     z-index: 0;
     pointer-events: none;
     animation: drift 18s ease-in-out infinite reverse
 }

 @keyframes drift {
     50% {
         transform: translate(-60px, 40px) scale(1.08)
     }
 }

 .w {
     position: relative;
     z-index: 1;
     max-width: 1040px;
     margin: 0 auto;
     padding-inline: 20px;
     padding-block: 28px 56px
 }

 .top img {
     height: 36px;
     width: auto;
     display: block;
     margin-bottom: 40px
 }

 h1 {
     font-family: var(--f-disp);
     font-stretch: 125%;
     font-weight: 900;
     font-size: clamp(38px, 6.4vw, 72px);
     line-height: .98;
     letter-spacing: -.035em;
     margin: 0 0 14px;
     text-wrap: balance
 }

 h1 .ln {
     display: block;
     overflow: hidden;
     padding-bottom: .06em
 }

 h1 .ln>span {
     display: inline-block;
     animation: rise .9s cubic-bezier(.2, .8, .2, 1) both
 }

 h1 .ln:nth-child(2)>span {
     animation-delay: .12s
 }

 @keyframes rise {
     from {
         transform: translateY(100%)
     }

     to {
         transform: none
     }
 }

 em.s {
     font-family: var(--f-ser);
     font-style: italic;
     font-weight: 400;
     font-stretch: 100%;
     letter-spacing: 0;
     background: var(--grad);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     padding-right: .08em
 }

 .lede {
     color: #C3CCE6;
     font-size: 18px;
     max-width: 58ch;
     margin: 0
 }

 .tabs {
     position: relative;
     display: inline-grid;
     grid-template-columns: 1fr 1fr;
     margin: 30px 0 22px;
     padding: 5px;
     border-radius: 999px;
     background: var(--ink-2);
     border: 1px solid var(--line-2);
     max-width: 100%
 }

 .tabs .ind {
     position: absolute;
     top: 5px;
     bottom: 5px;
     left: 5px;
     width: calc(50% - 5px);
     border-radius: 999px;
     background: var(--grad);
     transition: transform .45s cubic-bezier(.2, .8, .2, 1);
     box-shadow: 0 8px 24px -8px rgba(30, 65, 239, .9)
 }

 .tabs.k1 .ind {
     transform: translateX(100%)
 }

 .tabs button {
     position: relative;
     z-index: 1;
     border: 0;
     background: transparent;
     color: var(--mut);
     font: 600 15px var(--f-body);
     padding: 11px 22px;
     border-radius: 999px;
     cursor: pointer;
     transition: color .3s;
     white-space: nowrap
 }

 .tabs button[aria-pressed="true"] {
     color: #fff
 }

 .grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 16px;
     align-items: start
 }

 @media (max-width:820px) {
     .grid {
         grid-template-columns: minmax(0, 1fr)
     }
 }

 .panel {
     background: rgba(11, 18, 38, .82);
     border: 1px solid var(--line);
     border-radius: 22px;
     padding: 24px;
     backdrop-filter: blur(8px);
     display: grid;
     gap: 22px
 }

 .field {
     display: grid;
     gap: 10px
 }

 .field-h {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     gap: 12px
 }

 .field label {
     font-size: 14px;
     font-weight: 500;
     color: #C3CCE6
 }

 .field input[type=number] {
     width: 118px;
     flex: none;
     text-align: right;
     background: var(--ink-3);
     border: 1px solid var(--line-2);
     border-radius: 10px;
     color: var(--fg);
     font: 800 16px var(--f-disp);
     font-stretch: 112%;
     font-variant-numeric: tabular-nums;
     padding: 7px 10px
 }

 input[type=range] {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 6px;
     border-radius: 3px;
     background: linear-gradient(90deg, var(--cyan), var(--blue)) 0/var(--p, 50%) 100% no-repeat, var(--ink-3);
     outline: none;
     cursor: pointer
 }

 input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: #fff;
     border: 4px solid var(--blue);
     box-shadow: 0 0 0 6px rgba(30, 65, 239, .2);
     transition: transform .2s
 }

 input[type=range]:active::-webkit-slider-thumb {
     transform: scale(1.2)
 }

 input[type=range]::-moz-range-thumb {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #fff;
     border: 4px solid var(--blue);
     box-shadow: 0 0 0 6px rgba(30, 65, 239, .2)
 }

 input:focus-visible,
 button:focus-visible,
 a:focus-visible {
     outline: 2px solid var(--cyan);
     outline-offset: 3px
 }

 .note {
     font-size: 13px;
     color: var(--mut);
     margin: 0
 }

 .res {
     position: relative;
     border-radius: 22px;
     padding: 28px;
     overflow: hidden;
     isolation: isolate;
     background: var(--ink-2)
 }

 .res::before {
     content: "";
     position: absolute;
     inset: -60%;
     z-index: -2;
     background: conic-gradient(from 0deg, var(--cyan), var(--blue), transparent 45%, var(--cyan));
     animation: spin 9s linear infinite
 }

 .res::after {
     content: "";
     position: absolute;
     inset: 1px;
     border-radius: 21px;
     background: radial-gradient(circle at 80% 0%, #1A1C3A, var(--ink-2) 60%);
     z-index: -1
 }

 @keyframes spin {
     to {
         transform: rotate(1turn)
     }
 }

 .res .lbl {
     margin: 0;
     color: #C3CCE6;
     font-size: 15px;
     display: flex;
     align-items: center;
     gap: 8px
 }

 .res .lbl i {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--warn);
     box-shadow: 0 0 0 0 rgba(255, 181, 71, .6);
     animation: pulse 1.8s infinite
 }

 @keyframes pulse {
     70% {
         box-shadow: 0 0 0 10px rgba(255, 181, 71, 0)
     }

     100% {
         box-shadow: 0 0 0 0 rgba(255, 181, 71, 0)
     }
 }

 .big {
     font-family: var(--f-disp);
     font-stretch: 125%;
     font-weight: 900;
     font-size: clamp(46px, 8vw, 76px);
     line-height: 1;
     letter-spacing: -.03em;
     color: var(--warn);
     font-variant-numeric: tabular-nums;
     margin: 10px 0 4px;
     overflow-wrap: anywhere
 }

 #msg {
     color: var(--warn);
     margin: 4px 0 0;
     min-height: 22px;
     font-size: 14px
 }

 .rows {
     display: grid;
     margin-top: 12px
 }

 .row {
     display: flex;
     justify-content: space-between;
     gap: 12px;
     padding: 12px 0;
     border-top: 1px solid var(--line);
     font-size: 15px;
     color: #C3CCE6
 }

 .row b {
     font-family: var(--f-disp);
     font-stretch: 112%;
     font-weight: 800;
     color: var(--fg);
     font-variant-numeric: tabular-nums
 }

 .vs {
     margin-top: 16px;
     display: grid;
     gap: 10px
 }

 .vs-h {
     font-size: 13.5px;
     color: var(--mut);
     margin: 0
 }

 .bar {
     display: grid;
     grid-template-columns: 72px minmax(0, 1fr) 54px;
     gap: 10px;
     align-items: center;
     font-size: 13px;
     color: var(--mut)
 }

 .bar .t {
     height: 12px;
     border-radius: 6px;
     background: var(--ink-3);
     overflow: hidden
 }

 .bar .t i {
     display: block;
     height: 100%;
     border-radius: 6px;
     transition: width .7s cubic-bezier(.2, .8, .2, 1)
 }

 .bar .v {
     text-align: right;
     font-family: var(--f-disp);
     font-stretch: 112%;
     font-weight: 700;
     color: var(--fg);
     font-variant-numeric: tabular-nums
 }

 .btn {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     background: var(--grad);
     color: #fff;
     font: 600 16px var(--f-body);
     text-decoration: none;
     padding: 15px;
     border-radius: 999px;
     margin-top: 22px;
     overflow: hidden;
     isolation: isolate;
     box-shadow: 0 10px 30px -10px rgba(30, 65, 239, .9);
     transition: transform .25s
 }

 .btn::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
     transform: translateX(-120%);
     animation: shine 3.5s 1.5s infinite;
     z-index: -1
 }

 @keyframes shine {

     40%,
     100% {
         transform: translateX(120%)
     }
 }

 .btn:hover {
     transform: translateY(-2px)
 }

 .foot {
     position: relative;
     z-index: 1;
     font-size: 13px;
     color: var(--mut);
     margin-top: 18px;
     max-width: 80ch
 }

 .bump {
     animation: bump .35s ease
 }

 @keyframes bump {
     40% {
         transform: scale(1.04)
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important
     }
 }