/* Curved Text Generator — 全站样式。移动端优先：
   默认样式就是手机竖屏的样式，桌面靠 min-width 媒体查询叠加。
   依据：两家在位者手机流量占比 62.6% / 61.8%（立项书第三章）。 */

/* CTG:FONTFACE:BEGIN — 由 tools/gen_site.py 从 site/fonts/fonts.manifest.json 生成。
   ⛔ 不要手改这一段：下次跑 gen_site.py 会整段覆盖。
   ⛔ TTF 原样引用：不子集化、不转 WOFF2、不改家族名（多数字体带保留字体名条款）。
   font-weight 是按字体文件实际读出来的：可变字体给区间，静态字体只有非 400 时才写。 */
@font-face { font-family:'Abril Fatface'; src:url('../fonts/AbrilFatface.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Alfa Slab One'; src:url('../fonts/AlfaSlabOne.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Amatic SC'; src:url('../fonts/AmaticSC.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Anton'; src:url('../fonts/Anton.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Bangers'; src:url('../fonts/Bangers.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Bebas Neue'; src:url('../fonts/BebasNeue.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('../fonts/Cinzel.ttf') format('truetype'); font-weight:400 900; font-display:swap; }
@font-face { font-family:'Dancing Script'; src:url('../fonts/DancingScript.ttf') format('truetype'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Fredoka'; src:url('../fonts/Fredoka.ttf') format('truetype'); font-weight:300 700; font-display:swap; }
@font-face { font-family:'Great Vibes'; src:url('../fonts/GreatVibes.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Lobster'; src:url('../fonts/Lobster.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Lora'; src:url('../fonts/Lora.ttf') format('truetype'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('../fonts/Oswald.ttf') format('truetype'); font-weight:200 700; font-display:swap; }
@font-face { font-family:'Pacifico'; src:url('../fonts/Pacifico.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Permanent Marker'; src:url('../fonts/PermanentMarker.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('../fonts/PlayfairDisplay.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Righteous'; src:url('../fonts/Righteous.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Satisfy'; src:url('../fonts/Satisfy.ttf') format('truetype'); font-display:swap; }
/* CTG:FONTFACE:END */

:root{
  --ink:#14181f; --muted:#5b6577; --line:#e2e6ee; --bg:#ffffff; --soft:#f6f8fc;
  --accent:#2f6fed; --accent-ink:#ffffff; --warn:#b45309; --warn-bg:#fff7ed;
  --radius:12px; --maxw:1080px;
}
*{box-sizing:border-box}
/* ⚠ 实测抓到的 bug：.ctg-field{display:flex} / .ctg-handles{display:block} 的优先级
   高于 [hidden] 的浏览器默认样式，导致「圆形专用的直径滑块」「波浪专用的两个滑块」
   「自定义路径的控制点」在别的形状下照样显示。这一行是它们的总闸。 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:68px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* ---- 页头 / 页脚 ---- */
/* ⚠ 实测抓到：吸顶页头（56px 高）会盖住滚到它下面的内容，手指按在那一带
   点不到画布上的路径控制点——事件全被页头吃掉（实测触控落点 y=56.1，
   控制点收到 0 个事件）。手机上竖向空间本来就紧，直接取消吸顶最干净；
   桌面保留吸顶，另配 scroll-padding-top 让 scrollIntoView 让开页头。 */
.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);z-index:20}
.site-head .wrap{display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:17px;white-space:nowrap}
.site-nav{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-left:auto}
.site-nav a{color:var(--muted);text-decoration:none;font-size:14px;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-foot{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 40px;color:var(--muted);font-size:14px}
.site-foot .wrap{display:flex;flex-direction:column;gap:10px}
.site-foot a{color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:14px}

/* ---- 通用排版 ---- */
h1{font-size:26px;line-height:1.25;margin:24px 0 12px}
h2{font-size:20px;margin:32px 0 10px}
h3{font-size:17px;margin:22px 0 8px}
p{margin:0 0 14px}
.lede{font-size:17px;color:var(--muted)}
.faq details{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:10px 0 0;color:var(--muted)}
.steps{padding-left:20px;color:var(--muted)}
.steps li{margin-bottom:8px}

/* 许可页：每一条字体的许可名称与版权声明 */
.lic-list li{margin-bottom:12px}
.lic-meta{color:var(--muted);font-size:13px}

/* 显式占位标记：⛔ 这不是正文，是待写标记 */
.todo-placeholder{
  border:2px dashed var(--warn);background:var(--warn-bg);color:var(--warn);
  border-radius:var(--radius);padding:14px 16px;margin:20px 0;font-size:14px;
}
.todo-placeholder b{display:block;margin-bottom:6px;letter-spacing:.02em}
.todo-placeholder ul{margin:8px 0 0;padding-left:20px}

/* ---- 工具本体 ---- */
.ctg{display:flex;flex-direction:column;gap:16px}
.ctg-stage-wrap{display:flex;flex-direction:column;gap:6px}
.ctg-stage{
  position:relative;width:100%;aspect-ratio:800/500;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;touch-action:none;
  background-image:
    linear-gradient(45deg,#dfe4ec 25%,transparent 25%),
    linear-gradient(-45deg,#dfe4ec 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#dfe4ec 75%),
    linear-gradient(-45deg,transparent 75%,#dfe4ec 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
  background-color:#fff;
}
.ctg-canvas,.ctg-handles{position:absolute;inset:0;width:100%;height:100%;display:block}
.ctg-handles{touch-action:none}
.ctg-handles circle{cursor:grab}
.ctg-hint{margin:0;font-size:13px;color:var(--muted)}

.ctg-panel{display:flex;flex-direction:column;gap:14px}
.ctg-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.ctg-field span{color:var(--muted);font-weight:600}
.ctg-field b{color:var(--ink);font-weight:700}
.ctg-field input[type=text],.ctg-field select{
  font:inherit;font-weight:500;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  min-height:48px;                 /* 触控目标 ≥48px */
}
.ctg-shapes{display:flex;gap:8px;flex-wrap:wrap}
.ctg-shapes button{
  font:inherit;font-weight:600;padding:10px 14px;min-height:48px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--muted);cursor:pointer;flex:1 1 auto;
}
.ctg-shapes button.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ctg-row{flex-direction:row;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ctg-grow{flex:1 1 160px}
.ctg-color{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);font-weight:600}
.ctg-color input[type=color]{width:56px;height:48px;padding:2px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* 滑块：手机上要能用拇指拖，轨道与把手都放大 */
.ctg-range input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;
}
.ctg-range input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--line)}
.ctg-range input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
.ctg-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28);margin-top:-12px;cursor:pointer;
}
.ctg-range input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--accent);border:3px solid #fff;cursor:pointer;
}

/* ---- 背景三模式（透明 / 纯色 / 图片）----
   ⚠ 这一组控件只决定「画上去什么底」，⛔ 与导出路径无关：
   透明模式下 app.js 一律不传背景色也不传背景图，导出仍是干净的 alpha 通道。 */
.ctg-bg{gap:10px}
.ctg-bg-modes{display:flex;gap:8px;flex-wrap:wrap}
.ctg-bg-modes button{
  font:inherit;font-weight:600;padding:10px 12px;min-height:48px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--muted);cursor:pointer;flex:1 1 auto;
}
.ctg-bg-modes button.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ctg-bg-opts{display:flex;flex-direction:column;gap:10px}
.ctg-bg-opts label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);font-weight:600}
.ctg-bg-opts input[type=file]{
  font:inherit;font-weight:500;font-size:14px;padding:10px;border:1px dashed var(--line);
  border-radius:10px;background:#fff;min-height:48px;max-width:100%;
}
.ctg-bg-opts select{font:inherit;font-weight:500;padding:10px;border:1px solid var(--line);border-radius:10px;min-height:48px;background:#fff;color:var(--ink)}
.ctg-bg-clear{font:inherit;font-weight:600;padding:10px 14px;min-height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);cursor:pointer}
.ctg-bg-note{margin:0;font-size:13px;color:var(--muted);font-weight:400}
.ctg-bg-error{margin:0;font-size:13px;color:var(--warn);font-weight:600}

/* 字体下拉的分组标题（optgroup）在各浏览器样式差别大，只统一字重与颜色 */
.ctg-field optgroup{font-weight:700;color:var(--muted)}
.ctg-field option{font-weight:500;color:var(--ink)}

.ctg-export{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px}
.ctg-export-opts{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted)}
.ctg-export-opts label{display:flex;align-items:center;gap:8px;min-height:44px}
.ctg-export-opts input[type=checkbox]{width:22px;height:22px}
.ctg-export-opts select{font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px;min-height:44px}
.ctg-download{
  font:inherit;font-weight:700;font-size:17px;padding:16px;border:0;border-radius:12px;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;width:100%;min-height:56px;
}
.ctg-download:active{transform:translateY(1px)}
.ctg-status{margin:0;font-size:13px;color:var(--muted);min-height:18px}

.ctg-ios{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--soft)}
.ctg-ios img{display:block;margin:10px 0;border:1px solid var(--line);border-radius:8px;background:#fff}
.ctg-ios button{font:inherit;padding:10px 16px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}

@media (max-width:819px){
  .site-head{position:static;backdrop-filter:none}
}
@media (min-width:820px){
  h1{font-size:34px}
  h2{font-size:24px}
  .ctg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:24px;align-items:start}
  .ctg-ios{grid-column:1 / -1}
  .ctg-panel{position:sticky;top:72px}
}