:root{--kec-ink: #0f1c2e;--kec-muted: #5a6b80;--kec-faint: #8c9bad;--kec-surface: #ffffff;--kec-surface-2: #f2f7fa;--kec-border: #d9e4ec;--kec-teal: #0e7490;--kec-teal-dark: #155e75;--kec-teal-soft: #e0f2fe;--kec-amber: #b45309;--kec-amber-bg: #fffbeb;--kec-amber-border: #fcd34d;--kec-red: #b91c1c;--kec-red-bg: #fef2f2;--kec-radius: 16px;--kec-radius-sm: 9px;--kec-shadow: 0 10px 30px rgba(15,28,46,0.08);--kec-focus: 0 0 0 3px rgba(14,116,144,0.24);--primary: var(--kec-teal);--primary-dark: var(--kec-teal-dark);--border: var(--kec-border);--surface: var(--kec-surface);--shadow-soft: var(--kec-shadow);--surface-muted: var(--kec-surface-2);--text-main: var(--kec-ink);--text-muted: var(--kec-muted);}
.kec-app{margin-bottom: 2.5rem;}
.kec-card{background: var(--kec-surface);border: 1px solid var(--kec-border);border-radius: var(--kec-radius);box-shadow: var(--kec-shadow);overflow: hidden;}
.kec-byline{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.4rem 1rem;padding: 0.85rem 1.4rem;border-bottom: 1px solid var(--kec-border);background: var(--kec-surface-2);font-size: 0.86rem;color: var(--kec-muted);}
.kec-byline-author{font-weight: 600;color: var(--kec-ink);}
.kec-byline .author-link{color: var(--kec-teal);text-decoration: none;}
.kec-byline .author-link:hover{text-decoration: underline;}
.kec-byline .author-link:focus-visible{outline: none;box-shadow: var(--kec-focus);border-radius: 4px;}
.kec-presets{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;padding: 1rem 1.4rem;border-bottom: 1px dashed var(--kec-border);}
.kec-presets-label{font-size: 0.85rem;font-weight: 600;color: var(--kec-muted);margin-right: 0.25rem;}
.kec-preset{border: 1px solid var(--kec-border);background: var(--kec-surface);color: var(--kec-ink);border-radius: 999px;padding: 0.42rem 0.95rem;font-size: 0.85rem;font-weight: 600;cursor: pointer;transition: background 0.15s,border-color 0.15s,color 0.15s;}
.kec-preset:hover{background: var(--kec-teal-soft);border-color: var(--kec-teal);color: var(--kec-teal-dark);}
.kec-preset:focus-visible{outline: none;box-shadow: var(--kec-focus);}
.kec-solve{display: flex;flex-wrap: wrap;align-items: center;gap: 0.6rem;padding: 1rem 1.4rem 0;}
.kec-solve-label{font-size: 0.85rem;font-weight: 600;color: var(--kec-muted);width: 100%;margin-bottom: 0.1rem;}
.kec-solve label{display: inline-flex;align-items: center;gap: 0.45rem;border: 1px solid var(--kec-border);border-radius: var(--kec-radius-sm);padding: 0.5rem 0.9rem;font-size: 0.9rem;font-weight: 600;color: var(--kec-muted);cursor: pointer;transition: background 0.15s,border-color 0.15s,color 0.15s;}
.kec-solve input{accent-color: var(--kec-teal);margin: 0;}
.kec-solve label:has(input:checked){background: var(--kec-teal-soft);border-color: var(--kec-teal);color: var(--kec-teal-dark);}
.kec-solve label:focus-within{box-shadow: var(--kec-focus);}
.kec-form{padding: 1.2rem 1.4rem 1.5rem;}
.kec-fields{display: grid;grid-template-columns: repeat(auto-fit,minmax(240px,1fr));gap: 1rem 1.2rem;}
.kec-field[hidden]{display: none;}
.kec-label{display: block;font-size: 0.92rem;font-weight: 600;color: var(--kec-ink);margin-bottom: 0.4rem;}
.kec-label small{display: block;font-weight: 400;font-size: 0.78rem;color: var(--kec-faint);margin-top: 0.12rem;}
.kec-combo{display: flex;border: 1px solid var(--kec-border);border-radius: var(--kec-radius-sm);overflow: hidden;background: var(--kec-surface);}
.kec-combo:focus-within{border-color: var(--kec-teal);box-shadow: var(--kec-focus);}
.kec-input{flex: 1;min-width: 0;border: none;padding: 0.62rem 0.75rem;font-size: 1rem;font-weight: 600;color: var(--kec-ink);background: transparent;}
.kec-input:focus{outline: none;}
.kec-unit{border: none;border-left: 1px solid var(--kec-border);background: var(--kec-surface-2);color: var(--kec-muted);font-size: 0.86rem;font-weight: 600;padding: 0 0.6rem;cursor: pointer;max-width: 46%;}
.kec-unit:focus{outline: none;}
.kec-error{margin: 1rem 1.4rem 0;padding: 0.7rem 0.95rem;border: 1px solid #fecaca;background: var(--kec-red-bg);color: var(--kec-red);border-radius: var(--kec-radius-sm);font-size: 0.9rem;font-weight: 600;}
.kec-output{margin-top: 1.25rem;transition: opacity 0.15s;}
.kec-output.kec-dim{opacity: 0.4;}
.kec-primary{background: linear-gradient(135deg,var(--kec-teal-dark),var(--kec-teal));color: #ffffff;border-radius: var(--kec-radius);padding: 1.5rem 1.6rem;box-shadow: var(--kec-shadow);}
.kec-primary-label{display: block;font-size: 0.82rem;font-weight: 600;letter-spacing: 0.06em;text-transform: uppercase;opacity: 0.82;}
.kec-primary-figure{display: flex;align-items: baseline;flex-wrap: wrap;gap: 0.5rem;margin-top: 0.3rem;}
.kec-primary-value{font-size: 2.6rem;font-weight: 700;line-height: 1.1;}
.kec-primary-value sup{font-size: 0.5em;}
.kec-primary-unit{font-size: 1.1rem;font-weight: 600;opacity: 0.9;}
.kec-equation{margin-top: 0.75rem;font-size: 0.95rem;font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background: rgba(255,255,255,0.14);border-radius: var(--kec-radius-sm);padding: 0.55rem 0.75rem;overflow-x: auto;white-space: nowrap;}
.kec-compare{margin: 0.7rem 0 0;font-size: 0.95rem;opacity: 0.92;}
.kec-tiles{display: grid;grid-template-columns: repeat(auto-fit,minmax(160px,1fr));gap: 0.85rem;margin-top: 0.85rem;}
.kec-tile{background: var(--kec-surface);border: 1px solid var(--kec-border);border-radius: var(--kec-radius-sm);padding: 0.85rem 1rem;}
.kec-tile-label{display: block;font-size: 0.78rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;color: var(--kec-faint);}
.kec-tile-value{display: block;margin-top: 0.25rem;font-size: 1.25rem;font-weight: 700;color: var(--kec-ink);}
.kec-tile-value span{font-size: 0.85rem;font-weight: 600;color: var(--kec-muted);}
.kec-results{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 1rem;margin-top: 1rem;}
.kec-result-card{background: var(--kec-surface);border: 1px solid var(--kec-border);border-radius: var(--kec-radius);padding: 1.2rem 1.3rem;}
.kec-result-card h2{font-size: 1.05rem;font-weight: 700;color: var(--kec-ink);margin: 0;}
.kec-result-note{font-size: 0.85rem;color: var(--kec-faint);margin: 0.2rem 0 0.85rem;}
.kec-card-wide{grid-column: 1 / -1;}
.kec-row{display: flex;align-items: flex-start;justify-content: space-between;gap: 1rem;padding: 0.5rem 0;border-bottom: 1px dashed var(--kec-border);}
.kec-row:last-child{border-bottom: none;}
.kec-row-label{font-size: 0.9rem;color: var(--kec-muted);}
.kec-row-label small{display: block;font-size: 0.76rem;color: var(--kec-faint);margin-top: 0.1rem;}
.kec-row-value{font-size: 0.95rem;font-weight: 700;color: var(--kec-ink);text-align: right;white-space: nowrap;}
.kec-row-value sup{font-size: 0.7em;}
.kec-scale{display: grid;grid-template-columns: 110px 1fr 110px;align-items: center;gap: 0.7rem;padding: 0.32rem 0;}
.kec-scale-speed{font-size: 0.85rem;font-weight: 600;color: var(--kec-muted);}
.kec-scale-bar{display: block;height: 12px;background: var(--kec-surface-2);border-radius: 999px;overflow: hidden;}
.kec-scale-bar i{display: block;height: 100%;background: var(--kec-teal);border-radius: 999px;transition: width 0.2s;}
.kec-scale-val{font-size: 0.85rem;font-weight: 700;color: var(--kec-ink);text-align: right;}
.kec-scale-now .kec-scale-speed,.kec-scale-now .kec-scale-val{color: var(--kec-teal-dark);}
.kec-scale-now .kec-scale-bar i{background: var(--kec-teal-dark);}
.kec-relativity{margin-top: 1rem;padding: 1rem 1.2rem;border: 1px solid var(--kec-amber-border);background: var(--kec-amber-bg);border-radius: var(--kec-radius-sm);}
.kec-relativity h2{font-size: 1rem;font-weight: 700;color: var(--kec-amber);margin: 0 0 0.35rem;}
.kec-relativity p{font-size: 0.9rem;color: var(--kec-ink);margin: 0;}
.kec-actions{display: flex;flex-wrap: wrap;gap: 0.6rem;margin-top: 1.1rem;}
.kec-btn{display: inline-flex;align-items: center;gap: 0.45rem;border: 1px solid var(--kec-teal);background: var(--kec-teal);color: #ffffff;border-radius: var(--kec-radius-sm);padding: 0.6rem 1.1rem;font-size: 0.92rem;font-weight: 600;cursor: pointer;transition: background 0.15s,border-color 0.15s;}
.kec-btn:hover{background: var(--kec-teal-dark);border-color: var(--kec-teal-dark);}
.kec-btn:focus-visible{outline: none;box-shadow: var(--kec-focus);}
.kec-btn-ghost{background: var(--kec-surface);color: var(--kec-muted);border-color: var(--kec-border);}
.kec-btn-ghost:hover{background: var(--kec-surface-2);color: var(--kec-ink);border-color: var(--kec-border);}
.kec-read{margin: 0 auto 2.5rem;color: var(--kec-ink);}
.kec-read h2{font-size: 1.5rem;font-weight: 700;margin: 2rem 0 0.7rem;}
.kec-read h3{font-size: 1.05rem;font-weight: 700;margin: 0 0 0.4rem;}
.kec-read p{font-size: 1rem;line-height: 1.7;color: var(--kec-muted);margin-bottom: 0.9rem;}
.kec-read ul{padding-left: 1.2rem;margin-bottom: 1rem;}
.kec-read li{font-size: 1rem;line-height: 1.7;color: var(--kec-muted);margin-bottom: 0.5rem;}
.kec-read strong{color: var(--kec-ink);}
.kec-read a{color: var(--kec-teal);text-decoration: underline;}
.kec-callout{border-left: 4px solid var(--kec-amber-border);background: var(--kec-amber-bg);border-radius: 0 var(--kec-radius-sm) var(--kec-radius-sm) 0;padding: 0.9rem 1.1rem;margin: 1rem 0 1.2rem;font-size: 0.95rem;line-height: 1.65;color: var(--kec-ink);}
.kec-table-wrap{overflow-x: auto;margin-bottom: 1.2rem;border: 1px solid var(--kec-border);border-radius: var(--kec-radius-sm);}
.kec-table{width: 100%;border-collapse: collapse;font-size: 0.92rem;}
.kec-table th{background: var(--kec-surface-2);color: var(--kec-ink);font-weight: 700;text-align: left;padding: 0.6rem 0.85rem;white-space: nowrap;}
.kec-table td{padding: 0.6rem 0.85rem;border-top: 1px solid var(--kec-border);color: var(--kec-muted);}
.kec-table td:first-child{color: var(--kec-ink);font-weight: 600;}
.kec-cases{display: grid;grid-template-columns: repeat(auto-fit,minmax(230px,1fr));gap: 1rem;margin-bottom: 1.2rem;}
.kec-case{border: 1px solid var(--kec-border);border-radius: var(--kec-radius-sm);padding: 1rem 1.1rem;background: var(--kec-surface-2);}
.kec-case p{font-size: 0.92rem;margin-bottom: 0.5rem;}
.kec-case ul{margin: 0;padding-left: 1.1rem;}
.kec-case li{font-size: 0.9rem;margin-bottom: 0.3rem;}
@media (max-width: 640px){.hero-text h1{font-size: 30px;}.hero-subtitle{font-size: 16px;}.kec-primary-value{font-size: 2rem;}.kec-scale{grid-template-columns: 92px 1fr;row-gap: 0.15rem;}.kec-scale-val{grid-column: 2;text-align: left;}.kec-unit{max-width: 52%;}}