.with-reference .writing-intro{grid-column:1;grid-row:1/3}.with-reference .reference-panel{grid-column:2;grid-row:1}.with-reference .studio{grid-column:2;grid-row:2}.with-reference{row-gap:22px}.reference-panel{min-width:0;padding:20px;background:#f7f6f1;border:1px solid #d6ddcc}.reference-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.reference-heading h3{font-family:SimSun,serif;font-size:25px;font-weight:400;margin:12px 0}.reference-heading a,.reference-controls a{font-size:11px;color:#4b6550;text-decoration:underline}.reference-heading .eyebrow{font-size:9px}.reference-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0;font-size:11px}.reference-controls label{display:flex;align-items:center;gap:8px}.reference-controls input{width:90px;accent-color:#254d39}.reference-scroll{overflow:auto;max-height:330px;background:#e9d9b6;border:1px solid #d1c5a9}.reference-scroll img{display:block;max-width:none;height:auto;min-width:100%}.pressure-control{margin-top:16px;color:#50654f;font-size:11px;line-height:1.8}.pressure-control label{display:flex;align-items:center;gap:6px}.pressure-control input{accent-color:#254d39;width:16px;height:16px}.pressure-control span{display:block;color:#7c857b;margin-top:5px}@media(max-width:760px){.with-reference .writing-intro,.with-reference .reference-panel,.with-reference .studio{grid-column:1;grid-row:auto}.reference-panel{margin:0 -5px;padding:16px}.reference-scroll{max-height:260px}}
.model-characters{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.model-character{border:1px solid #d5c8af;background:#f0e6d0;padding:10px;color:#42553e;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px}.model-character.selected{outline:2px solid #31533f}.model-crop{display:block;width:120px;height:120px;background-image:url('lanting-reference.jpg');background-size:4083px 1200px;background-repeat:no-repeat}

/* 描红底样与点选取字 */
.trace-guide{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;opacity:0;transition:opacity .22s ease;z-index:1}
.paper #drawing{position:relative;z-index:2}
.paper.trace-on .trace-guide{opacity:.42}
.paper.copy-on .trace-guide{opacity:0}
.trace-thumb{position:absolute;top:8px;left:8px;width:23%;height:23%;background-repeat:no-repeat;background-position:center;background-size:contain;background-color:#fffdf7cc;border:1px dashed #ccd1c2;pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}
.paper.copy-on .trace-thumb{opacity:1}
.trace-thumb img{display:none}
.trace-modes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;font-size:11px;color:#5b6b5e}
.trace-modes .trace-label{letter-spacing:1px;color:#7c857b}
.trace-modes button{border:1px solid #b8c3b3;background:transparent;padding:8px 14px;min-height:36px;font-size:12px;color:#3f5747;border-radius:0}
.trace-modes button[aria-pressed="true"]{background:#214e3f;border-color:#214e3f;color:#fff}
.trace-modes button:hover{border-color:#214e3f}
.trace-modes .trace-tip{color:#7c857b;line-height:1.6}
.trace-note{margin:14px 0 0}
.reference-scroll.pickable{cursor:crosshair}
.reference-scroll.pickable img{cursor:crosshair}
.pick-ring{position:absolute;border:2px dashed #a54c37;background:#a54c3710;pointer-events:none}
@media(max-width:760px){.trace-modes{gap:6px}.trace-modes button{padding:8px 12px;font-size:11px}.trace-modes .trace-tip{flex-basis:100%}}

/* 逐字可点与原字练习弹窗 */
.reference-scroll{position:relative}
.char-map{position:absolute;pointer-events:none;z-index:1}
.char-map svg{display:block;width:100%;height:100%}
.char-cell{fill:transparent;stroke:#7f8f72;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.22;transition:opacity .18s}
.reference-scroll:hover .char-cell{opacity:.55}
.reference-scroll.pickable:active .char-cell{opacity:.55}
.char-hit{stroke:#a54c37;stroke-width:2;fill:#a54c3722;vector-effect:non-scaling-stroke}
.reference-scroll.pickable img{z-index:0}
.practice-dialog{width:min(560px,95vw);max-height:94svh;padding:22px 22px 18px}
.practice-close{position:absolute;right:10px;top:6px;border:0;background:none;font-size:26px;color:#50664e;padding:6px 10px}
.practice-head h2{font-size:22px;margin:6px 0 14px}
.practice-paper{position:relative;width:100%;aspect-ratio:1;background:#f4efe3;border:1px solid #d9d3c2;background-image:linear-gradient(90deg,transparent calc(50% - .5px),#a9a38c44 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#a9a38c44 50%,transparent calc(50% + .5px))}
.practice-guide{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:0;transition:opacity .2s;pointer-events:none;z-index:1}
.practice-guide.on{opacity:.42}
.practice-guide.on.faint{opacity:0}
.practice-thumb{position:absolute;top:8px;left:8px;width:23%;height:23%;background-repeat:no-repeat;background-position:center;background-size:contain;background-color:#fffdf7cc;border:1px dashed #ccd1c2;pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}
.practice-thumb.on{opacity:1}
.practice-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2}
.practice-bar{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.practice-bar button{border:1px solid #b8c3b3;background:transparent;padding:9px 16px;min-height:38px;font-size:12px;color:#3f5747}
.practice-bar button[aria-pressed="true"]{background:#214e3f;border-color:#214e3f;color:#fff}
.practice-tip{font-size:11px;color:#7c857b;line-height:1.7;margin:10px 0 0}
@media(max-width:760px){.practice-dialog{padding:18px 14px 14px}.practice-head h2{font-size:19px}}