@scope (.tk) {
:scope {
--tk-surface:  var(--surface-1);
--tk-sunken:   var(--surface-2);
--tk-line:     var(--line);
--tk-line-str: var(--line-strong);
--tk-ink:      var(--text);
--tk-body:     var(--text-body);
--tk-muted:    var(--text-muted);
--tk-subtle:   var(--text-subtle);
--tk-accent:   var(--accent-text);
--tk-neon:     var(--neon);
display: block;
border: 1px solid var(--tk-line);
border-radius: var(--radius-2xl);
background: var(--tk-surface);
box-shadow: var(--shadow-raised);
}
[hidden] { display: none !important; }
.tk-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
}
.tk-form { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); padding: clamp(1.25rem, 2.4vw, 2rem); }
.tk-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.tk-label {
display: block; padding: 0;
font-size: clamp(0.95rem, 1.05vw, 1.02rem); font-weight: 600; line-height: 1.4;
color: var(--tk-ink);
}
.tk-help { margin-block-start: 0.45rem; color: var(--tk-subtle); font-size: clamp(0.82rem, 0.9vw, 0.9rem); line-height: 1.55; }
.tk-help a { color: var(--tk-accent); text-decoration: underline; text-underline-offset: 0.15em; }
.tk-error { margin-block-start: 0.45rem; color: var(--status-error); font-size: 0.88rem; font-weight: 500; line-height: 1.5; }
.tk-input { position: relative; display: flex; align-items: center; margin-block-start: 0.6rem; max-width: 16rem; }
.tk-input input, .tk-stepper input {
width: 100%; min-height: 52px;
padding: 0.6rem 0.9rem;
border: 1px solid var(--tk-line-str); border-radius: var(--radius-control);
background: var(--tk-surface); color: var(--tk-ink);
font-family: var(--font-data); font-size: 1.15rem; font-variant-numeric: tabular-nums;
transition: border-color var(--transition);
-moz-appearance: textfield; appearance: textfield;
}
.tk-input input { padding-inline-end: 3rem; }
.tk-input input::-webkit-inner-spin-button, .tk-stepper input::-webkit-inner-spin-button,
.tk-input input::-webkit-outer-spin-button, .tk-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tk-input input:focus-visible, .tk-stepper input:focus-visible { outline: 2px solid var(--tk-neon); outline-offset: 2px; }
.tk-input input[aria-invalid="true"] { border-color: var(--status-error); }
.tk-input__unit {
position: absolute; inset-inline-end: 0.9rem;
color: var(--tk-muted); font-family: var(--font-data); font-size: 0.95rem; pointer-events: none;
}
.tk-stepper { display: grid; grid-template-columns: 52px minmax(0, 6rem) 52px; gap: 0.4rem; margin-block-start: 0.6rem; }
.tk-stepper input { text-align: center; }
.tk-step {
display: grid; place-items: center; min-height: 52px;
border: 1px solid var(--tk-line-str); border-radius: var(--radius-control);
background: var(--tk-surface); color: var(--tk-ink);
font-size: 1.35rem; line-height: 1;
transition: background var(--transition);
}
.tk-step:hover { background: var(--tk-sunken); }
.tk-step:focus-visible { outline: 2px solid var(--tk-neon); outline-offset: 2px; }
.tk-reset {
margin-inline-start: 0.35rem; padding: 0;
color: var(--tk-accent); font: inherit; font-weight: 600;
text-decoration: underline; text-underline-offset: 0.15em;
}
.tk-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-block-start: 0.6rem; }
.tk-opt { position: relative; display: block; }
.tk-opt input {
position: absolute; inset-block-start: 50%; inset-inline-start: 0.85rem;
width: 1.1rem; height: 1.1rem; margin: 0; transform: translateY(-50%);
accent-color: var(--tk-neon);
}
.tk-opt__box {
display: flex; align-items: center; min-height: 48px;
padding: 0.6rem 0.8rem 0.6rem 2.6rem;
border: 1px solid var(--tk-line); border-radius: var(--radius-control);
background: var(--tk-surface);
color: var(--tk-body); font-size: clamp(0.86rem, 0.94vw, 0.94rem); line-height: 1.4;
transition: border-color var(--transition), background var(--transition);
}
.tk-opt:hover .tk-opt__box { border-color: var(--tk-line-str); background: var(--tk-sunken); }
.tk-opt input:focus-visible + .tk-opt__box { outline: 2px solid var(--tk-neon); outline-offset: 2px; }
.tk-opt input:checked + .tk-opt__box {
border-color: var(--tk-neon);
background: color-mix(in srgb, var(--tk-neon) 12%, var(--tk-surface));
color: var(--tk-ink); font-weight: 500;
}
.tk-result {
position: sticky; top: clamp(10.2rem, 9.5rem + 2vw, 11rem);
align-self: start;
margin: clamp(1.25rem, 2.4vw, 2rem);
padding: clamp(1.25rem, 2.4vw, 1.75rem);
background: var(--tk-sunken);
border: 1px solid var(--tk-line);
border-radius: var(--radius-l);
transition: opacity var(--transition);
}
.tk-result--stale { opacity: 0.45; }
.tk-result__kicker {
font-family: var(--font-data); font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--tk-accent);
}
.tk-list { display: grid; gap: 0; margin: clamp(0.8rem, 1.5vw, 1.1rem) 0 0; }
.tk-row { padding-block: 0.8rem; border-block-start: 1px solid var(--tk-line); }
.tk-row:first-child { border-block-start: 0; padding-block-start: 0.2rem; }
.tk-row dt { color: var(--tk-muted); font-size: 0.86rem; line-height: 1.4; }
.tk-row dd { margin: 0.2rem 0 0; }
.tk-val {
display: block;
font-family: var(--font-heading); font-size: clamp(1.3rem, 1.9vw, 1.65rem); font-weight: 600;
line-height: 1.2; letter-spacing: -0.02em; color: var(--tk-ink);
font-variant-numeric: tabular-nums;
}
.tk-sub { display: block; margin-block-start: 0.25rem; color: var(--tk-subtle); font-size: 0.82rem; line-height: 1.45; }
.tk-notes {
list-style: none; display: grid; gap: 0.55rem;
margin: clamp(0.6rem, 1.2vw, 0.9rem) 0 0; padding: 0.85rem 1rem;
border-radius: var(--radius-surface); background: var(--tk-surface); border: 1px solid var(--tk-line);
}
.tk-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; color: var(--tk-muted); font-size: 0.85rem; line-height: 1.55; }
.tk-note::before { content: ""; width: 6px; height: 6px; margin-block-start: 0.55em; border-radius: 2px; background: var(--status-warning); }
.tk-cta {
display: flex; align-items: center; justify-content: center;
min-height: 52px; margin-block-start: clamp(1rem, 1.8vw, 1.35rem); padding: 0.7rem 1rem;
border-radius: var(--radius-control);
background: var(--tk-neon); color: var(--on-neon);
font-weight: 600; font-size: clamp(0.92rem, 1vw, 1rem); text-align: center;
transition: background var(--transition);
}
.tk-cta:hover { background: var(--neon-hover); }
.tk-cta:focus-visible { outline: 2px solid var(--tk-ink); outline-offset: 3px; }
.tk-foot { margin-block-start: clamp(0.9rem, 1.6vw, 1.2rem); color: var(--tk-subtle); font-size: 0.8rem; line-height: 1.55; }
@media (width < 64rem) {
.tk-grid { grid-template-columns: 1fr; }
.tk-result { position: static; margin-block-start: 0; }
}
@media (width < 30rem) {
.tk-opts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tk-result, .tk-opt__box, .tk-step, .tk-cta { transition: none; }
}
}
[data-theme="dark"] .tk {
--tk-surface:  #073A3E;
--tk-sunken:   #0C4549;
--tk-line:     #1B5A5E;
--tk-line-str: #2C6A6F;
--tk-ink:      #FFFFFF;
--tk-body:     #DDE7E7;
--tk-muted:    #C8D6D7;
--tk-subtle:   #94ABAD;
--tk-accent:   #B7D435;
}