:root {
  color-scheme: light;
  --paper: #f4f4ee;
  --panel: #fffefa;
  --ink: #1f2923;
  --muted: #737c73;
  --line: #dfe3d9;
  --green: #285842;
  --green-dark: #1e4532;
  --green-pale: #eaf1e9;
  --coral: #d77659;
  --error: #a83e32;
  --shadow: 0 18px 55px rgba(37, 54, 40, .055), 0 2px 8px rgba(37, 54, 40, .035);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.topbar { height: 72px; max-width: 1440px; padding: 0 6vw; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(66, 87, 66, .12); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #566257; font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--green); color: white; font: 700 20px/1 Georgia, serif; letter-spacing: -.1em; }
.brand-mark span { color: #eea47d; }
.privacy-note { display: flex; align-items: center; gap: 8px; color: #657166; font-size: 11px; font-weight: 600; }
.status-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #64a176; box-shadow: 0 0 0 3px rgba(100,161,118,.13); }
.page-shell { max-width: 1240px; width: calc(100% - 64px); margin: 0 auto; }
.tool-heading { padding: 39px 0 23px; }
.eyebrow, .step-label { margin: 0; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.tool-heading h1 { margin: 8px 0 0; font-size: clamp(27px, 3.2vw, 41px); line-height: 1.08; font-weight: 650; letter-spacing: -.055em; }
.title-period { color: var(--coral); }
.workbench { display: grid; grid-template-columns: minmax(330px,  .83fr) minmax(0, 1.17fr); gap: 18px; align-items: start; }
.panel { min-width: 0; border: 1px solid #e7e8df; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.input-panel { padding: 21px 22px 18px; }
.output-panel { min-height: 580px; display: flex; flex-direction: column; padding: 21px 22px 17px; }
.output-panel.is-ready { min-height: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading h2 { margin: 6px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.format-chip, .output-state { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; color: #798179; font-size: 8px; font-weight: 750; letter-spacing: .11em; }
.drop-zone { position: relative; min-height: 171px; margin-top: 18px; border: 1px dashed #aab8a9; border-radius: 12px; background: #fafbf6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; outline: none; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-dragging { border-color: var(--green); background: #f0f6ef; }
.drop-zone.is-dragging { transform: scale(.992); }
.upload-icon { width: 37px; height: 37px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 11px; background: var(--green-pale); color: var(--green); }
.upload-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drop-title { color: #2b382f; font-size: 13px; font-weight: 700; }
.drop-subtitle { color: #82897f; font-size: 11px; }
.text-link { color: var(--green); text-decoration: underline; text-underline-offset: 2px; font-weight: 650; }
.file-badges { display: flex; gap: 5px; margin-top: 4px; }
.file-badges span { border-radius: 4px; background: #f0f2eb; padding: 3px 5px; color: #687268; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.drop-caption { position: absolute; top: 10px; right: 11px; color: #9a9f97; font-size: 9px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.visually-hidden:focus-visible + .upload-icon { outline: 3px solid rgba(40,88,66,.4); }
.url-entry { margin-top: 16px; }
.url-divider { display: flex; align-items: center; gap: 9px; color: #969d93; font-size: 8px; letter-spacing: .13em; }
.url-divider span { height: 1px; flex: 1; background: #e8e9e2; }
.url-row { display: flex; gap: 7px; margin-top: 9px; }
.url-row input, .input-suffix, select { min-width: 0; border: 1px solid #e1e4dd; border-radius: 8px; background: #fff; }
.url-row input { width: 100%; height: 39px; padding: 0 11px; color: var(--ink); font-size: 11px; outline: none; transition: border-color .15s, box-shadow .15s; }
.url-row input:focus, .input-suffix:focus-within, select:focus-visible { border-color: #78a18b; box-shadow: 0 0 0 3px rgba(40,88,66,.09); outline: none; }
.url-row input::placeholder { color: #a1a79f; }
.helper-copy { margin: 7px 0 0; color: #8b9289; font-size: 10px; line-height: 1.5; }
.controls { margin-top: 18px; padding-top: 15px; border-top: 1px solid #ecece5; }
.control-title { display: flex; align-items: center; justify-content: space-between; }
.live-label { display: flex; align-items: center; gap: 7px; color: #899188; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.live-label .live-dot { width: 6px; height: 6px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 14px; }
.field { min-width: 0; }
.field > label, .range-head label { display: block; margin-bottom: 6px; color: #505c51; font-size: 10px; font-weight: 650; }
.input-suffix { height: 35px; display: flex; align-items: center; padding-right: 9px; transition: border-color .15s, box-shadow .15s; }
.input-suffix input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 9px; color: var(--ink); font-size: 11px; font-weight: 700; }
.input-suffix span { color: #99a096; font-size: 9px; }
select { width: 100%; height: 35px; padding: 0 9px; color: #344237; font-size: 10px; outline: none; }
.range-head { display: flex; align-items: center; justify-content: space-between; }
.range-head label { margin-bottom: 0; }
.range-head output { color: #6a766c; font-size: 9px; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 17px; margin: 5px 0 0; accent-color: var(--green); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; margin-top: -1px; color: #a0a69e; font-size: 9px; }
.color-toggle { display: flex; align-items: center; gap: 9px; margin-top: 16px; cursor: pointer; }
.color-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch { position: relative; width: 30px; height: 17px; flex: 0 0 auto; border-radius: 999px; background: #d9ded7; transition: background-color .16s ease; }
.switch::after { position: absolute; content: ""; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .16s ease; }
.color-toggle input:checked + .switch { background: var(--green); }
.color-toggle input:checked + .switch::after { transform: translateX(13px); }
.color-toggle input:focus-visible + .switch { outline: 3px solid rgba(40,88,66,.35); outline-offset: 2px; }
.color-toggle b, .color-toggle small { display: block; }
.color-toggle b { color: #435046; font-size: 10px; font-weight: 700; }
.color-toggle small { margin-top: 2px; color: #92998f; font-size: 9px; }
.button { min-height: 36px; border: 1px solid transparent; border-radius: 8px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; font-size: 10px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.button:focus-visible { outline: 3px solid rgba(40,88,66,.32); outline-offset: 2px; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: .43; cursor: not-allowed; }
.button-subtle { border-color: #e1e5dd; background: #fff; color: #49564c; }
.button-subtle:hover:not(:disabled) { border-color: #a9b9aa; background: #f7faf5; }
.button-primary { width: 100%; min-height: 43px; margin-top: 17px; padding: 0 15px; justify-content: space-between; background: var(--green); color: #fff; font-size: 11px; box-shadow: 0 5px 12px rgba(40,88,66,.13); }
.button-primary:hover:not(:disabled) { background: var(--green-dark); box-shadow: 0 7px 16px rgba(40,88,66,.2); }
.button-primary span:last-child { font-size: 15px; font-weight: 400; }
.output-state { color: #879187; }
.output-heading { min-height: 40px; }
.empty-state { flex: 1; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 11px; background-color: #f8f9f4; background-image: radial-gradient(#e3e8df .8px, transparent .8px); background-size: 13px 13px; text-align: center; }
.empty-art { width: 160px; max-width: 60%; display: flex; flex-direction: column; overflow: hidden; color: var(--green); opacity: .72; font: 700 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: left; }
.empty-art span:nth-child(2), .empty-art span:nth-child(5) { color: #71907b; }
.empty-art span:nth-child(3) { color: #cb8063; }
.empty-state p { margin: 17px 12px 0; color: #566257; font-size: 12px; font-weight: 700; }
.empty-state > span { margin-top: 5px; color: #929a90; font-size: 10px; }
.result-wrap { min-height: 360px; flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-top: 15px; border: 1px solid #e5e8df; border-radius: 11px; background: #fbfcf8; animation: reveal .22s ease-out both; }
.output-panel.is-ready .result-wrap { min-height: 0; flex: 0 1 auto; }
.result-meta { min-height: 31px; flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid #e9ebe4; color: #818b80; font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.ascii-output { flex: 1; max-height: 505px; min-height: 320px; overflow: auto; margin: 0; padding: 18px; color: #31523c; font: 500 8px/1.16 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre; tab-size: 1; scrollbar-color: #bac8ba #f2f4ef; scrollbar-width: thin; }
.output-panel.is-ready .ascii-output { min-height: 0; flex: 0 1 auto; }
.mobile-scroll-hint { display: none; }
.ascii-output.color-output { color: inherit; }
.error-message { min-height: 360px; flex: 1; display: grid; place-items: center; padding: 24px; border: 1px solid #f0d8d1; border-radius: 11px; background: #fff7f4; color: var(--error); font-size: 12px; line-height: 1.55; text-align: center; }
.output-actions { display: flex; gap: 7px; margin-top: 12px; }
.output-actions .button { flex: 1; }
.toast { height: 14px; margin: 4px 0 -4px; color: var(--green); font-size: 9px; text-align: right; }
.details { display: grid; grid-template-columns: .75fr 1.25fr; gap: 34px; padding: 52px 4px 48px; }
.details-intro h2, .faq h2 { margin: 8px 0 0; font-size: 22px; font-weight: 620; letter-spacing: -.045em; }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.details-grid article { padding-top: 3px; }
.detail-index { color: var(--coral); font: 600 10px/1 ui-monospace, monospace; }
.details-grid h3 { margin: 9px 0 6px; color: #344238; font-size: 11px; font-weight: 700; }
.details-grid p, .faq-list p { margin: 0; color: #737c73; font-size: 11px; line-height: 1.7; }
.faq { display: grid; grid-template-columns: .75fr 1.25fr; column-gap: 34px; padding: 30px 4px 54px; border-top: 1px solid #dfe3d9; }
.faq > .eyebrow { grid-column: 1; }
.faq h2 { grid-column: 1; grid-row: 2; }
.faq-list { grid-column: 2; grid-row: 1 / span 2; }
.faq-list details { border-bottom: 1px solid #dfe3d9; }
.faq-list summary { position: relative; padding: 12px 28px 12px 0; color: #39473c; font-size: 11px; font-weight: 650; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 3px; top: 10px; content: "+"; color: var(--green); font-size: 16px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { padding: 0 24px 13px 0; }
footer { max-width: 1440px; min-height: 55px; margin: 0 auto; padding: 0 6vw; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(66,87,66,.12); color: #7d877b; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
footer nav { display: flex; gap: 16px; }
footer nav a { color: inherit; text-decoration: none; }
footer nav a:hover { color: var(--green); }

@keyframes reveal { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 850px) {
  .page-shell { width: calc(100% - 36px); }
  .topbar { padding: 0 22px; }
  .workbench { grid-template-columns: minmax(285px, .9fr) minmax(0, 1.1fr); gap: 12px; }
  .input-panel, .output-panel { padding: 17px 15px; }
  .output-panel { min-height: 540px; }
  .details, .faq { grid-template-columns: 1fr; gap: 19px; }
  .faq > .eyebrow, .faq h2, .faq-list { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  html, body { width: 100%; }
  .topbar { height: 59px; padding: 0 18px; }
  .brand { gap: 8px; font-size: 8px; letter-spacing: .11em; }
  .brand-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 18px; }
  .privacy-note { gap: 6px; font-size: 9px; }
  .page-shell { width: calc(100% - 28px); }
  .tool-heading { padding: 26px 2px 16px; }
  .tool-heading h1 { margin-top: 7px; font-size: clamp(25px, 8vw, 34px); }
  .workbench { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .panel { border-radius: 14px; }
  .input-panel { padding: 16px 14px 14px; }
  .output-panel { min-height: 415px; padding: 16px 14px 12px; }
  .panel-heading h2 { font-size: 16px; }
  .drop-zone { min-height: 153px; margin-top: 14px; }
  .url-entry { margin-top: 14px; }
  .helper-copy { font-size: 10px; }
  .controls { margin-top: 15px; padding-top: 13px; }
  .control-grid { gap: 12px 10px; margin-top: 12px; }
  .button { min-height: 38px; }
  .button-primary { min-height: 44px; margin-top: 15px; }
  .empty-state, .error-message { min-height: 258px; }
  .result-wrap { min-height: 258px; }
  .ascii-output { min-height: 218px; max-height: 370px; padding: 13px; font-size: 7px; }
  .output-panel.is-ready .result-wrap { min-height: 258px; }
  .output-panel.is-ready .ascii-output { min-height: 218px; }
  .mobile-scroll-hint { margin: 7px 0 0; color: #69776c; font-size: 10px; line-height: 1.4; }
  .output-panel.is-ready .mobile-scroll-hint { display: block; }
  .output-actions { gap: 5px; margin-top: 9px; }
  .output-actions .button { padding: 0 7px; font-size: 9px; }
  .details { padding: 35px 2px 30px; }
  .details-grid { grid-template-columns: 1fr; gap: 15px; }
  .details-grid article { display: grid; grid-template-columns: 26px 1fr; column-gap: 5px; }
  .detail-index { grid-row: 1 / span 2; padding-top: 2px; }
  .details-grid h3 { margin: 0 0 4px; }
  .faq { gap: 10px; padding: 25px 2px 38px; }
  .faq-list summary { font-size: 10px; }
  footer { min-height: 50px; padding: 0 12px; font-size: 7px; }
  footer nav { gap: 8px; }
}