/* ---- Bundled open-source, metric-compatible fonts.
   Tries locally bundled ./fonts/*.woff2 first (run download-fonts to fetch them),
   then falls back to the jsDelivr Fontsource CDN so it works out of the box. ---- */

/* Arimo = metric clone of Arial / Helvetica */
@font-face { font-family:'Arimo'; font-weight:400; font-style:normal;
  src:url('./fonts/arimo-400.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/arimo/files/arimo-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Arimo'; font-weight:700; font-style:normal;
  src:url('./fonts/arimo-700.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/arimo/files/arimo-latin-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Arimo'; font-weight:400; font-style:italic;
  src:url('./fonts/arimo-400i.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/arimo/files/arimo-latin-400-italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Arimo'; font-weight:700; font-style:italic;
  src:url('./fonts/arimo-700i.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/arimo/files/arimo-latin-700-italic.woff2') format('woff2'); font-display:swap; }

/* Carlito = metric clone of Calibri */
@font-face { font-family:'Carlito'; font-weight:400; font-style:normal;
  src:url('./fonts/carlito-400.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/carlito/files/carlito-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Carlito'; font-weight:700; font-style:normal;
  src:url('./fonts/carlito-700.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/carlito/files/carlito-latin-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Carlito'; font-weight:400; font-style:italic;
  src:url('./fonts/carlito-400i.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/carlito/files/carlito-latin-400-italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Carlito'; font-weight:700; font-style:italic;
  src:url('./fonts/carlito-700i.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/carlito/files/carlito-latin-700-italic.woff2') format('woff2'); font-display:swap; }

/* Tinos = metric clone of Times New Roman */
@font-face { font-family:'Tinos'; font-weight:400; font-style:normal;
  src:url('./fonts/tinos-400.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/tinos/files/tinos-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Tinos'; font-weight:700; font-style:normal;
  src:url('./fonts/tinos-700.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/tinos/files/tinos-latin-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Tinos'; font-weight:400; font-style:italic;
  src:url('./fonts/tinos-400i.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/tinos/files/tinos-latin-400-italic.woff2') format('woff2'); font-display:swap; }

/* Cousine = metric clone of Courier New */
@font-face { font-family:'Cousine'; font-weight:400; font-style:normal;
  src:url('./fonts/cousine-400.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/cousine/files/cousine-latin-400-normal.woff2') format('woff2'); font-display:swap; }

/* Noto Sans / Serif TC = Traditional Chinese */
@font-face { font-family:'Noto Sans TC'; font-weight:400; font-style:normal;
  src:url('./fonts/notosanstc-400.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-tc/files/noto-sans-tc-chinese-traditional-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Noto Sans TC'; font-weight:700; font-style:normal;
  src:url('./fonts/notosanstc-700.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-tc/files/noto-sans-tc-chinese-traditional-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Noto Serif TC'; font-weight:400; font-style:normal;
  src:url('./fonts/notoseriftc-400.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-tc/files/noto-serif-tc-chinese-traditional-400-normal.woff2') format('woff2'); font-display:swap; }

:root{
  --bg:#eef2fb; --bg2:#f8fbff; --panel:#ffffff; --line:#e3e8f3; --text:#1e2433; --muted:#6b7488;
  --accent:#4f8cff; --accent2:#2f6fe0; --accentSoft:#eef4ff;
  --warn:#fff7e6; --warnText:#9a6b16; --warnLine:#f2dca0;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --field:#f6f8fc;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Arimo',system-ui,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 280px,var(--bg) 100%);
  color:var(--text);line-height:1.55;min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.5rem;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;z-index:10}
h1{font-size:1.3rem;margin:0;letter-spacing:-.01em}
h2{font-size:1.02rem;margin:1.4rem 0 .55rem;letter-spacing:-.01em}
.subtitle{max-width:70ch;margin:1.4rem 1.5rem .25rem;color:var(--muted);font-size:1.02rem}
.lang-toggle{display:flex;gap:.3rem;background:var(--field);padding:.25rem;border-radius:10px;border:1px solid var(--line)}
.lang-btn{background:transparent;border:none;color:var(--muted);padding:.4rem .75rem;border-radius:7px;cursor:pointer;font-size:.9rem;font-weight:600;transition:.15s}
.lang-btn:hover{color:var(--text)}
.lang-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(79,140,255,.35)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding:1.25rem 1.5rem 2.5rem;align-items:start}
@media(max-width:840px){.grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.25rem 1.4rem;box-shadow:var(--shadow)}
.panel h2:first-child{margin-top:0}
label{display:block;font-size:.85rem;color:var(--muted);margin:.7rem 0 .25rem;font-weight:500}
input[type=number],select,input[type=text]{width:100%;background:var(--field);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:.55rem .65rem;font-size:.95rem;transition:.15s}
input[type=number]:focus,select:focus,input[type=text]:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accentSoft)}
.row{display:flex;gap:.75rem}.row>div{flex:1}
.checks{display:flex;gap:1rem;align-items:flex-end;padding-bottom:.5rem}
.checks label{display:flex;align-items:center;gap:.4rem;margin:0;color:var(--text);font-weight:500}
.radio{display:flex;align-items:center;gap:.55rem;color:var(--text);margin:.45rem 0;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:1.05rem;height:1.05rem}
.drop{border:2px dashed var(--line);border-radius:14px;padding:1.75rem;text-align:center;cursor:pointer;transition:.18s;background:var(--field)}
.drop:hover{border-color:var(--accent);background:var(--accentSoft)}
.drop.drag{border-color:var(--accent);background:var(--accentSoft);transform:scale(1.01)}
.drop p{margin:.25rem 0}
.muted{color:var(--muted)} .small{font-size:.8rem}
button.primary{margin-top:1.1rem;width:100%;background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;color:#fff;padding:.8rem;border-radius:11px;font-size:1rem;font-weight:600;cursor:pointer;transition:.15s;box-shadow:0 4px 14px rgba(79,140,255,.32)}
button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(79,140,255,.42)}
button.primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
button.ghost{margin-top:.55rem;background:#fff;border:1px solid var(--line);color:var(--text);padding:.5rem .8rem;border-radius:9px;cursor:pointer;font-weight:500;transition:.15s}
button.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accentSoft)}
.status{font-size:.85rem;color:var(--muted);white-space:pre-line;min-height:1.2em}
.warn{background:var(--warn);color:var(--warnText);border:1px solid var(--warnLine);border-radius:10px;padding:.55rem .75rem;margin:.65rem 0;font-size:.85rem}
#ruler-wrap{margin:.85rem 0}
#preview{border:1px dashed var(--accent);border-radius:8px;padding:.5rem;background:var(--accentSoft);overflow:auto}
.addr-block{border-bottom:1px solid var(--line);padding:.45rem 0}
.addr-block:last-child{border-bottom:none}
.addr-line{white-space:pre;color:var(--text)}
.over{color:#e0414f}
.usecases{padding:1rem 1.5rem 1.5rem;max-width:1100px;margin:0 auto}
.uc-h{text-align:center;font-size:1.45rem;margin:.5rem 0 1.5rem;letter-spacing:-.01em}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:840px){.uc-grid{grid-template-columns:1fr}}
.uc-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem 1.6rem;text-align:center;box-shadow:var(--shadow);transition:.18s}
.uc-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,24,40,.05),0 14px 32px rgba(16,24,40,.10)}
.uc-card img{width:170px;height:170px;max-width:100%;border-radius:14px;background:var(--accentSoft);margin-bottom:.6rem}
.uc-card h3{font-size:1.05rem;margin:.4rem 0 .5rem;letter-spacing:-.01em}
.uc-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.seo{padding:1rem 1.5rem 3rem;color:var(--muted);max-width:90ch}
.seo details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;box-shadow:var(--shadow)}
.seo summary{cursor:pointer;color:var(--text);font-weight:600;margin-bottom:.5rem}
.seo p{max-width:80ch}