.tn-case-page {
  --case-paper: #faf6ee;
  --case-surface: #fffcf4;
  --case-wash: #f5efdf;
  --case-ink: #1a1208;
  --case-muted: #5a4a30;
  --case-line: #b8a888;
  --case-soft: #ddd4be;
  --case-button: #ede6d4;
  --case-hover: #dfd4bb;
  --case-accent: #c44a00;
  width: calc(100% - 10px);
  max-width: 1180px;
  margin-inline: auto;
  color: var(--case-ink);
  -webkit-text-fill-color: var(--case-ink);
}
.tn-case-page *, .tn-case-page *::before, .tn-case-page *::after { box-sizing: border-box; }
.tn-case-page .tn-case-ad { width: min(900px, 100%); min-height: 90px; margin-inline: auto; background: transparent; }
.tn-case-page .tn-case-ad--top { margin-top: 54px; margin-bottom: 18px; }
.tn-case-page .tn-case-ad--bottom { margin-top: 16px; margin-bottom: 26px; }
.tn-case-page .tn-case-ad ins { max-width: 100%; }
.tn-case-page .tn-case-tool { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.tn-case-page .tn-case-tool :is(h2, h3, h4, p) { margin: 0; }
.tn-case-page .tn-case-tool :is(button, input, textarea) { font: inherit; }
.tn-case-page .tn-case-tool :is(button, input, textarea, output):focus-visible { outline: 2px solid var(--case-accent); outline-offset: 2px; }
.tn-case-page .tn-case-tool :is(button, input[type="checkbox"]) { cursor: pointer; }
.tn-case-page .tn-case-tool button:disabled { cursor: not-allowed; opacity: .48; }
.tn-case-page .tn-case-workbench { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); align-items: start; gap: 12px; }
.tn-case-page .tn-case-source, .tn-case-page .tn-case-results { min-width: 0; border: 1px solid var(--case-line); background: var(--case-paper); }
.tn-case-page .tn-case-source { padding: 0 14px 14px; }
.tn-case-page .tn-case-results { padding: 0 14px 16px; }
.tn-case-page .tn-case-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; margin: 0 -14px 14px; padding: 10px 14px; border-bottom: 1px solid var(--case-soft); }
.tn-case-page .tn-case-pane-head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tn-case-page .tn-case-pane-head h2 { color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); font-size: 16px; font-weight: 800; line-height: 1.35; }
.tn-case-page .tn-case-index { color: var(--case-accent); -webkit-text-fill-color: var(--case-accent); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tn-case-page .tn-case-count { color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tn-case-page .tn-case-input-label { display: block; margin: 0 0 5px; padding: 0; border: 0; background: transparent; color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); font-size: 13px; font-weight: 700; }
.tn-case-page #tnCaseInput { display: block; width: 100%; min-height: 294px; max-width: 100%; padding: 15px; border: 1px solid var(--case-line); border-radius: 0; background: var(--case-surface); color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); resize: vertical; font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
.tn-case-page #tnCaseInput::placeholder { color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); opacity: .58; }
.tn-case-page .tn-case-input-help { margin-top: 9px !important; color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.tn-case-page .tn-case-source-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tn-case-page .tn-case-tool button { display: inline-grid; place-items: center; min-height: 40px; padding: 8px 13px; border: 1px solid var(--case-line); border-radius: 0; box-shadow: none; background: var(--case-button); color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); font-size: 12px; font-weight: 750; line-height: 1.25; text-align: center; transition: background-color .16s ease, border-color .16s ease; }
.tn-case-page .tn-case-tool button:not(:disabled):hover { background: var(--case-hover); border-color: var(--case-ink); }
.tn-case-page .tn-case-tool button:not(:disabled):active { transform: scale(.96); }
.tn-case-page .tn-case-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 16px; border-top: 1px solid var(--case-soft); border-bottom: 1px solid var(--case-soft); }
.tn-case-page .tn-case-options label { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 54px; padding: 8px 6px; color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); cursor: pointer; }
.tn-case-page .tn-case-options label + label { border-left: 1px solid var(--case-soft); padding-left: 13px; }
.tn-case-page .tn-case-options input { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; accent-color: var(--case-accent); }
.tn-case-page .tn-case-options span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.3; }
.tn-case-page .tn-case-options small { color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); font-size: 11px; font-weight: 500; }
.tn-case-page .tn-case-status { min-height: 18px; margin-top: 12px !important; color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); font-size: 12px; line-height: 1.5; }
.tn-case-page .tn-case-group + .tn-case-group { margin-top: 20px; }
.tn-case-page .tn-case-group-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 9px; }
.tn-case-page .tn-case-group-head h3 { color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); font-size: 13px; font-weight: 800; line-height: 1.4; }
.tn-case-page .tn-case-group-head span { color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); font-size: 11px; line-height: 1.4; }
.tn-case-page .tn-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-case-page .tn-case-result { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 11px; border: 1px solid var(--case-soft); background: var(--case-surface); }
.tn-case-page .tn-case-result-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tn-case-page .tn-case-glyph { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--case-line); background: var(--case-wash); color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
.tn-case-page .tn-case-result-head > div { min-width: 0; }
.tn-case-page .tn-case-result-head h4 { color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); font-size: 13px; font-weight: 800; line-height: 1.3; }
.tn-case-page .tn-case-result-head div > span { display: block; margin-top: 2px; color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); font-size: 11px; line-height: 1.3; }
.tn-case-page .tn-case-rule { color: var(--case-muted); -webkit-text-fill-color: var(--case-muted); font-size: 11px; line-height: 1.35; }
.tn-case-page .tn-case-output { display: block; min-width: 0; width: 100%; min-height: 60px; max-height: 95px; margin: 0; padding: 9px; overflow: auto; border: 1px solid var(--case-soft); background: var(--case-wash); color: var(--case-ink); -webkit-text-fill-color: var(--case-ink); font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; user-select: text; }
.tn-case-page .tn-case-result-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6px; margin-top: auto; }
.tn-case-page .tn-case-result-actions button { width: 100%; min-width: 0; padding-inline: 6px; }
.tn-case-page .tn-case-result-actions button:first-child { background: var(--case-ink); border-color: var(--case-ink); color: var(--case-paper); -webkit-text-fill-color: var(--case-paper); }
.tn-case-page .tn-case-result-actions button:first-child:not(:disabled):hover { background: var(--case-accent); border-color: var(--case-accent); }
.tn-case-page .tn-case-noscript { margin-top: 12px !important; color: var(--case-muted); font-size: 13px; }
.tn-case-page .tn-case-article .tn-info-card :is(p, li, a) { overflow-wrap: anywhere; }

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-case-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-case-page {
  --case-paper: #241d12; --case-surface: #322a1a; --case-wash: #2c2517; --case-ink: #efe6d2; --case-muted: #c3b492; --case-line: #6f6047; --case-soft: #574a37; --case-button: #3c321f; --case-hover: #4a3b27; --case-accent: #e8823f;
}
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-case-page .tn-case-tool button,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-case-page .tn-case-tool button { color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-case-page .tn-case-result-actions button:first-child,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-case-page .tn-case-result-actions button:first-child { background: #4a3116; border-color: #e8823f; color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-case-page { --case-paper: #241d12; --case-surface: #322a1a; --case-wash: #2c2517; --case-ink: #efe6d2; --case-muted: #c3b492; --case-line: #6f6047; --case-soft: #574a37; --case-button: #3c321f; --case-hover: #4a3b27; --case-accent: #e8823f; }
  body[data-scheme="auto"] .tn-case-page .tn-case-tool button { color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
  body[data-scheme="auto"] .tn-case-page .tn-case-result-actions button:first-child { background: #4a3116; border-color: #e8823f; color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
}
@media (max-width: 920px) { .tn-case-page .tn-case-workbench { grid-template-columns: minmax(0, 1fr); } .tn-case-page #tnCaseInput { min-height: 200px; } }
@media (max-width: 720px) {
  .tn-case-page .tn-case-ad--top { margin-top: 48px; }
  .tn-case-page .tn-case-source, .tn-case-page .tn-case-results { padding-inline: 9px; }
  .tn-case-page .tn-case-pane-head { margin-inline: -9px; padding-inline: 9px; }
  .tn-case-page .tn-case-grid { grid-template-columns: minmax(0, 1fr); }
  .tn-case-page .tn-case-result { gap: 7px; }
  .tn-case-page .tn-case-output { max-height: 88px; }
  .tn-case-page .tn-case-source-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tn-case-page .tn-case-source-actions button { min-width: 0; padding-inline: 5px; }
}
@media (max-width: 360px) { .tn-case-page .tn-case-options { grid-template-columns: minmax(0, 1fr); } .tn-case-page .tn-case-options label + label { border-left: 0; border-top: 1px solid var(--case-soft); padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .tn-case-page .tn-case-tool button { transition: none; } }