/* ======================================================================
 * 23 · 数位板压感怎么选 —— 「画室纸稿」
 * 视觉：暖米色画纸 + 墨黑衬线标题 + 赭石笔触；纸片胶带角、
 *       手绘虚线、压感速写曲线；与前两页的网格控制台完全不同。
 * ====================================================================== */

.dg3.ntg {
    --bg: #f6f1e6;
    --bg2: #ece4d3;
    --card: #fdfaf2;
    --card2: #f4ecdc;
    --ink: #2b2620;
    --ink2: #51483b;
    --muted: #877a66;
    --line: #d8cbb1;
    --line2: #e9dfca;
    --accent: #a9602b;
    --accent-ink: #ffffff;
    --accent-soft: #f4e3ce;
    --accent2: #5f7350;
    --accent2-soft: #e6ecdd;
    --ok: #4c7040;
    --ok-bg: #e5eeda;
    --warn: #96601c;
    --warn-bg: #f8ebd2;
    --bad: #a5402f;
    --bad-bg: #f7e2dc;
    --shadow: 0 5px 22px rgba(84, 65, 36, .11);
    --radius: 1px;
    --radius-sm: 1px;
    --font-head: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", Georgia, serif;
    --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    --head-weight: 800;

    background:
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(169, 96, 43, .045) 27px 28px),
        var(--bg);
    border-top: 4px solid var(--accent);
}
:root[data-theme="dark"] .dg3.ntg {
    --bg: #1b1814;
    --bg2: #241f19;
    --card: #26221b;
    --card2: #2e2820;
    --ink: #f0e6d4;
    --ink2: #d2c3aa;
    --muted: #a3947c;
    --line: #4b4134;
    --line2: #382f25;
    --accent: #dca268;
    --accent-ink: #2a1c0d;
    --accent-soft: #3b2c1c;
    --accent2: #9cb98a;
    --accent2-soft: #2a3624;
    --ok: #8fbe7b;
    --ok-bg: #263322;
    --warn: #d9ab58;
    --warn-bg: #372c18;
    --bad: #e08b74;
    --bad-bg: #3b231c;
    --shadow: 0 5px 24px rgba(0, 0, 0, .42);
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(220, 162, 104, .045) 27px 28px),
        var(--bg);
}

.ntg h1, .ntg h2, .ntg h3 { font-family: var(--font-head); letter-spacing: .01em; }
.ntg .kw { color: var(--accent); border-bottom: 2px solid var(--accent-soft); }
:root[data-theme="dark"] .ntg .kw { color: var(--accent2); border-bottom-color: var(--accent2-soft); }

/* 纸片 + 胶带角 */
.ntg-sheet {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.ntg-sheet::after {
    content: ""; position: absolute; inset: 5px; pointer-events: none;
    border: 1px dashed var(--line2);
}
.ntg-tape {
    position: absolute; width: 72px; height: 20px; z-index: 2;
    background: rgba(199, 172, 120, .42);
    border-left: 1px solid rgba(255, 255, 255, .35);
    border-right: 1px solid rgba(255, 255, 255, .35);
}
:root[data-theme="dark"] .ntg-tape { background: rgba(180, 146, 88, .32); }
.ntg-tape--a { top: -9px; left: 34px; transform: rotate(-4deg); }
.ntg-tape--b { top: -9px; right: 34px; transform: rotate(3deg); }

/* ---------- 首屏 ---------- */
.ntg-hero { margin: 26px 0 26px; padding: 30px 30px 26px; }
.ntg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr); gap: 30px; position: relative; z-index: 1; }
.ntg-hero-left { min-width: 0; }
.ntg-kicker {
    font: 600 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent2); margin: 0 0 10px;
}
.ntg-hero h1 { font-size: clamp(30px, 3.8vw, 43px); margin-bottom: 12px; }
.ntg-hero h1::after {
    content: ""; display: block; width: 118px; height: 6px; margin-top: 9px;
    background: var(--accent); border-radius: 60% 20% 70% 30%;
    opacity: .78;
}
.ntg-lede { font-size: 14.8px; line-height: 1.92; color: var(--ink2); max-width: 58em; margin-bottom: 6px; }
.ntg-lede b { color: var(--accent); font-weight: 700; }
.ntg-sign { font-family: var(--font-head); font-size: 13px; color: var(--muted); margin: 0 0 18px; letter-spacing: .08em; }
.ntg-form { border-top: 1px solid var(--line); padding-top: 17px; }
.ntg .dg3-field > label { font-size: 12.8px; font-weight: 700; }
.ntg .dg3-field .tip { font-size: 11.5px; }
.ntg .dg3-grid--2 { gap: 12px 16px; }
.ntg-extras {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
    border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
    padding: 11px 2px;
}
.ntg-extras .checkline { font-size: 13.2px; }
.ntg .dg3-btn--main { background: var(--accent); border-color: var(--accent); border-radius: 1px; }
.ntg .dg3-btn { border-radius: 1px; }

/* 右侧速写 */
.ntg-hero-right { border-left: 1px dashed var(--line); padding-left: 24px; }
.ntg-sketch-title { font-size: 17px; margin: 0 0 4px; }
.ntg-curve { width: 100%; height: auto; display: block; }
.ntg-axis { stroke: var(--line); stroke-width: 1.3; }
.ntg-curve-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ntg-curve-ghost { fill: none; stroke: var(--accent2); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .65; }
.ntg-svg-t { font: 500 9px var(--font-mono); fill: var(--muted); }
.ntg-svg-note { font: 700 10px var(--font-mono); fill: var(--accent); }
.ntg-strokes { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 12px; }
.ntg-stroke {
    display: block; height: 8px; border-radius: 60% 12% 55% 20%;
    background: linear-gradient(90deg, transparent, var(--accent));
}
.ntg-stroke--1 { width: 44%; height: 3px; opacity: .55; }
.ntg-stroke--2 { width: 72%; height: 6px; opacity: .75; }
.ntg-stroke--3 { width: 100%; height: 11px; }
.ntg-sketch-note { font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.ntg-sketch-note b { color: var(--ink2); }

/* ---------- 结果 ---------- */
.ntg .ntg-sheet.dg3-card { padding: 24px 26px; }
.ntg .dg3-kv > div { border-left: 3px solid var(--accent); }
.ntg .dg3-kv dd { color: var(--accent); }
.ntg .dg3-table th { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .ntg .dg3-table th { color: var(--accent2); }
.ntg-pressure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.ntg-pressure-grid > div {
    border: 1px solid var(--line); background: var(--card2); padding: 11px 13px;
}
.ntg-pressure-grid b { display: block; font: 700 19px var(--font-mono); color: var(--accent); }
.ntg-pressure-grid small { color: var(--muted); font-size: 12px; }
.ntg-area-bar { margin-top: 9px; height: 10px; background: var(--line2); border-radius: 99px; overflow: hidden; }
.ntg-area-bar > i { display: block; height: 100%; background: var(--accent2); }
.ntg-pitfalls { margin: 10px 0 0; padding-left: 22px; }
.ntg-pitfalls li { font-size: 13.8px; line-height: 1.85; color: var(--ink2); margin-bottom: 8px; }
.ntg-pitfalls li b { color: var(--accent); }
.ntg #ntgEscape { margin-top: 12px; }
.ntg .ntg-batch-ok { color: var(--ok); font-weight: 700; }
.ntg .ntg-batch-bad { color: var(--bad); font-weight: 700; }

@media (max-width: 940px) {
    .ntg-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .ntg-hero-right { border-left: 0; border-top: 1px dashed var(--line); padding: 18px 0 0; }
    .ntg-curve { max-width: 360px; }
}
@media (max-width: 620px) {
    .ntg-hero { padding: 24px 15px 20px; margin-top: 22px; }
    .ntg .ntg-sheet.dg3-card { padding: 18px 14px; }
    .ntg-extras { gap: 8px; }
}