.tn-height-page {
  --ch-paper:#faf6ee; --ch-wash:#f5efdf; --ch-ink:#1a1208; --ch-muted:#5a4a30;
  --ch-line:#b8a888; --ch-soft:#ddd4be; --ch-accent:#c44a00;
  --ch-button:#ede6d4; --ch-hover:#dfd4bb;
  --ch-sans:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",system-ui,sans-serif;
  --ch-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ch-ink); -webkit-text-fill-color:currentColor;
}
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-d="dark"],[data-scheme="auto"][data-l="dark"]) .tn-height-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-height-page {
  --ch-paper:#241d12; --ch-wash:#322a1a; --ch-ink:#efe6d2; --ch-muted:#c3b492;
  --ch-line:#826744; --ch-soft:#574a37; --ch-accent:#f29a5d;
  --ch-button:#2f2115; --ch-hover:#3a2a1b; color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  body[data-scheme="auto"] .tn-height-page {
    --ch-paper:#241d12; --ch-wash:#322a1a; --ch-ink:#efe6d2; --ch-muted:#c3b492;
    --ch-line:#826744; --ch-soft:#574a37; --ch-accent:#f29a5d;
    --ch-button:#2f2115; --ch-hover:#3a2a1b; color-scheme:dark;
  }
}
.tn-height-page [hidden] {display:none!important}
.tn-height-page .height-ad {width:100%; max-width:900px; min-height:90px; height:auto; max-height:none; overflow:visible; background:transparent}
.tn-height-page .height-ad :is(.aicp,ins.adsbygoogle) {max-height:none; overflow:visible}
.tn-height-page .height-ad--top {margin:54px auto 18px}
.tn-height-page .height-ad--bottom {margin:18px auto 26px}
.tn-height-tool,.tn-height-tool *,.tn-height-tool *::before,.tn-height-tool *::after {box-sizing:border-box}
.tn-height-page .tn-height-tool {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); width:100%; min-width:0;
  border:1px solid var(--ch-line); border-top:3px double var(--ch-line); border-bottom:3px double var(--ch-line);
  background:var(--ch-paper); color:var(--ch-ink); -webkit-text-fill-color:currentColor;
  font-family:var(--ch-sans); font-size:14px; line-height:1.6;
}
.tn-height-tool :is(p,fieldset,legend,label,h2,h3) {margin:0}
.tn-height-tool :is(.tn-height-input,.tn-height-result) {min-width:0; padding:26px}
.tn-height-tool .tn-height-input {display:grid; align-content:start; gap:19px}
.tn-height-tool .tn-height-result {display:grid; align-content:start; gap:13px; border-left:1px solid var(--ch-line); background:var(--ch-wash)}
.tn-height-tool .tn-height-pane-label {font-family:var(--ch-mono); font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--ch-muted)}
.tn-height-tool .tn-height-sex {min-width:0; border:0; padding:0}
.tn-height-tool .tn-height-sex legend {padding:0 0 8px; font-weight:700; color:var(--ch-ink)}
.tn-height-tool .tn-height-sex > div {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.tn-height-tool .tn-height-sex label {position:relative; display:block; min-width:0; cursor:pointer}
.tn-height-tool .tn-height-sex input {position:absolute; width:1px; height:1px; opacity:0}
.tn-height-tool .tn-height-sex label span {display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--ch-line); background:var(--ch-paper); color:var(--ch-ink); -webkit-text-fill-color:currentColor; font-weight:700}
.tn-height-tool .tn-height-sex input:checked + span {border-color:var(--ch-accent); box-shadow:inset 0 -2px var(--ch-accent); color:var(--ch-accent); -webkit-text-fill-color:currentColor; background:var(--ch-wash)}
.tn-height-tool .tn-height-parent-fields {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.tn-height-tool .tn-height-field {display:grid; align-content:start; gap:5px; min-width:0}
.tn-height-tool .tn-height-field > label {padding:0; border:0; background:none; font-weight:700}
.tn-height-tool .tn-height-number {display:flex!important; align-items:stretch; min-width:0; border:1px solid var(--ch-line); background:var(--ch-paper)}
.tn-height-tool .tn-height-number input {flex:1 1 auto; width:0; min-width:0; min-height:46px; margin:0; border:0; border-radius:0; padding:9px 12px; background:transparent; box-shadow:none; color:var(--ch-ink); -webkit-text-fill-color:currentColor; font-family:var(--ch-sans); font-size:18px; font-weight:600; font-variant-numeric:lining-nums tabular-nums; line-height:1.4}
.tn-height-tool .tn-height-number input::placeholder {font-weight:400; color:var(--ch-muted); opacity:.35}
.tn-height-tool .tn-height-number > :is(span,b) {display:flex; align-items:center; padding:0 10px; border-left:1px solid var(--ch-line); background:var(--ch-wash); color:var(--ch-muted); -webkit-text-fill-color:currentColor; font-weight:600}
.tn-height-tool .tn-height-field > small {min-height:1.35em; color:var(--ch-muted); font-size:11px}
.tn-height-tool .tn-height-field > small:not(:empty),.tn-height-tool [data-height="error"] {color:var(--ch-accent)}
.tn-height-tool .tn-height-help,.tn-height-tool .tn-height-input-note {font-size:12px; line-height:1.6; color:var(--ch-muted)}
.tn-height-tool .tn-height-actions,.tn-height-tool .tn-height-result-actions {display:flex; flex-wrap:wrap; gap:8px}
.tn-height-tool :is(.tn-height-actions,.tn-height-result-actions) button {display:inline-flex; align-items:center; justify-content:center; min-height:42px; margin:0; padding:10px 15px; border:1px solid var(--ch-line); border-radius:0; box-shadow:none; background:var(--ch-button); color:var(--ch-ink); -webkit-text-fill-color:currentColor; font-family:var(--ch-mono); font-size:13px; font-weight:700; line-height:1; letter-spacing:0; text-transform:none; cursor:pointer}
.tn-height-tool :is(.tn-height-actions,.tn-height-result-actions) button:hover {background:var(--ch-hover)}
.tn-height-tool :is(.tn-height-actions,.tn-height-result-actions) button:disabled {opacity:.48; cursor:not-allowed}
.tn-height-tool :is(button,input):focus-visible,.tn-height-tool .tn-height-sex input:focus-visible + span {outline:2px solid var(--ch-accent); outline-offset:2px}
.tn-height-tool input[aria-invalid="true"] {outline:2px solid var(--ch-accent); outline-offset:-2px}
.tn-height-tool [data-height="error"] {font-size:12px; min-height:1.35em}
.tn-height-tool .tn-height-reading {display:flex; align-items:baseline; gap:6px; min-width:0; color:var(--ch-ink); font-variant-numeric:lining-nums tabular-nums; line-height:1}
.tn-height-tool [data-height="reading"] {font-family:var(--ch-sans); font-size:clamp(54px,6vw,76px); font-weight:800; line-height:1; letter-spacing:-.035em; white-space:nowrap}
.tn-height-tool .tn-height-reading > span {font-family:var(--ch-sans); font-size:23px; font-weight:700}
.tn-height-tool [data-height="status"] {font-weight:700; font-size:16px; line-height:1.4}
.tn-height-tool .tn-height-range {padding-top:15px; border-top:1px solid var(--ch-line)}
.tn-height-tool .tn-height-range > span {display:block; font-size:12px; color:var(--ch-muted)}
.tn-height-tool .tn-height-range p {display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin-top:4px; font-family:var(--ch-sans); font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}
.tn-height-tool .tn-height-range strong {font-family:var(--ch-sans); font-size:23px; font-weight:800}
.tn-height-tool .tn-height-interval-head {display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; margin-bottom:8px; font-size:12px; color:var(--ch-muted)}
.tn-height-tool .tn-height-ruler {position:relative; height:24px; margin:0 0 4px; background:repeating-linear-gradient(to right,var(--ch-soft) 0,var(--ch-soft) 1px,transparent 1px,transparent 10%); border-bottom:1px solid var(--ch-line)}
.tn-height-tool .tn-height-ruler-band {position:absolute; top:8px; left:12%; width:76%; height:9px; background:var(--ch-line)}
.tn-height-tool .tn-height-ruler-marker {position:absolute; top:3px; left:50%; width:3px; height:20px; background:var(--ch-accent); transform:translateX(-50%)}
.tn-height-tool [data-height="range-caption"] {font-size:12px; line-height:1.5; color:var(--ch-muted)}
.tn-height-tool [data-height="formula"] {padding:10px 0; border-top:1px solid var(--ch-line); border-bottom:1px solid var(--ch-line); font-family:var(--ch-sans); font-size:13px; font-variant-numeric:tabular-nums; color:var(--ch-muted); overflow-wrap:anywhere}
.tn-height-tool .tn-height-caution {font-size:12px; line-height:1.6; color:var(--ch-muted)}
.tn-height-tool [data-height="copy-status"] {min-height:1.35em; font-size:12px; color:var(--ch-muted)}
.tn-height-tool .tn-height-followup {grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px 24px; padding:18px 26px; border-top:1px solid var(--ch-line); background:var(--ch-paper)}
.tn-height-tool .tn-height-followup p {display:grid; gap:3px; font-size:13px; line-height:1.5}
.tn-height-tool .tn-height-followup p strong {font-size:14px}
.tn-height-tool .tn-height-followup p span {color:var(--ch-muted)}
.tn-height-tool .tn-height-followup a {display:inline-flex; align-items:center; min-height:40px; flex:none; padding:7px 12px; border:1px solid var(--ch-line); background:var(--ch-button); color:var(--ch-ink); -webkit-text-fill-color:currentColor; font-family:var(--ch-sans); font-size:12px; font-weight:700; text-decoration:none}
.tn-height-tool .tn-height-followup a:hover {background:var(--ch-hover)}
.tn-height-page .tn-article-panel .tn-article-list {list-style:none; padding:0; margin:10px 0 0}
.tn-height-page .tn-article-panel .tn-article-list li {list-style:none; position:relative; padding:0 0 0 18px; margin:5px 0; color:inherit}
.tn-height-page .tn-article-panel .tn-article-list li::before {content:"·"; position:absolute; left:5px; font-weight:800}
@media (max-width:760px) {
  .tn-height-page .height-ad--top {margin-top:48px}
  .tn-height-page .tn-height-tool {grid-template-columns:minmax(0,1fr)}
  .tn-height-tool :is(.tn-height-input,.tn-height-result) {padding:20px 16px}
  .tn-height-tool .tn-height-result {border-left:0; border-top:1px solid var(--ch-line)}
  .tn-height-tool [data-height="reading"] {font-size:58px}
  .tn-height-tool .tn-height-followup {align-items:stretch; flex-direction:column; padding:17px 16px}
  .tn-height-tool .tn-height-followup a {align-self:flex-start}
}
@media (max-width:380px) {
  .tn-height-tool .tn-height-parent-fields {gap:8px}
  .tn-height-tool .tn-height-number input {font-size:16px; padding-left:8px; padding-right:6px}
}