/* Concept 9 C9-06 — integrated Character Study signature surface.
 * Responsive/dark mode, source-first, no fake stroke order, no gamified claims. */
.c9-character-page{display:grid;gap:24px;min-width:0;color:var(--c9-ink)}
.c9-character-page *{box-sizing:border-box}
.c9-character-heading{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:14px}
.c9-character-back{display:inline-flex;margin:0 0 17px;color:var(--c9-accent);font-size:12px;font-weight:650;text-decoration:none}
.c9-character-back:hover{text-decoration:underline;text-underline-offset:3px}
.c9-character-heading h1{margin:6px 0 8px;font:600 clamp(28px,3vw,37px)/1.2 var(--c9-display);letter-spacing:-.025em}
.c9-character-heading p:last-child{font-size:13px;line-height:1.6;color:var(--c9-sub);max-width:780px;margin:0}
.c9-character-neighbors{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.c9-character-neighbors>span{font-size:11px;color:var(--c9-muted)}
.c9-character-top{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(255px,.85fr);gap:16px;align-items:start;min-width:0}
.c9-character-identity{
 display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr);
 min-width:0;overflow:hidden;
 background:var(--c9-surface);border:1px solid var(--c9-line);border-radius:var(--c9-r-lg)
}
.c9-character-glyph-wrap{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:12px;padding:20px;min-width:0;
 border-right:1px solid var(--c9-line);background:var(--c9-surface-2)
}
.c9-character-glyph{
 display:grid;place-items:center;position:relative;overflow:hidden;
 width:min(100%,250px);aspect-ratio:1;
 border:1px solid var(--c9-line-strong);border-radius:var(--c9-r-sm);
 font:500 clamp(95px,9vw,166px)/1.08 var(--c9-hanzi-display);
 color:var(--c9-ink);letter-spacing:0;
 background-color:var(--c9-surface);
 background-image:linear-gradient(to right, transparent calc(50% - .5px),var(--c9-line) 50%,transparent calc(50% + .5px)),
 linear-gradient(to bottom, transparent calc(50% - .5px),var(--c9-line) 50%,transparent calc(50% + .5px))
}
.c9-character-seal{font:600 10px/1.35 var(--c9-ui);letter-spacing:.095em;color:var(--c9-accent)}
.c9-character-identity-content{display:flex;flex-direction:column;align-items:start;min-width:0;padding:clamp(21px,2.4vw,31px)}
.c9-character-identity-content h2{margin:10px 0 7px;font:600 clamp(23px,2.8vw,34px)/1.17 var(--c9-display);letter-spacing:-.025em}
.c9-character-pinyin{font:600 clamp(19px,2vw,25px)/1.45 var(--c9-ui);color:var(--c9-green);margin:2px 0 12px}
.c9-character-note{font-size:13px;line-height:1.7;color:var(--c9-sub);margin:0 0 20px}
.c9-character-hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.c9-character-hero-actions .c9-button{gap:7px;font-size:12px;white-space:normal}
.c9-character-audio-notice{font-size:11px;line-height:1.55;color:var(--c9-muted);margin:14px 0 0}
.c9-character-evidence{display:grid;gap:15px;min-width:0}
.c9-character-info{
 padding:18px;min-width:0;border:1px solid var(--c9-line);
 border-radius:var(--c9-r);background:var(--c9-surface)
}
.c9-character-info h3{font:600 20px/1.3 var(--c9-display);margin:5px 0 12px}
.c9-character-fact{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--c9-line);padding:9px 0}
.c9-character-fact span{font:400 11px/1.5 var(--c9-ui);color:var(--c9-sub)}
.c9-character-fact strong{font-size:12px;font-weight:650;text-align:right;line-height:1.4;overflow-wrap:anywhere}
.c9-character-info>p:not(.c9-eyebrow){font-size:11px;line-height:1.6;color:var(--c9-sub);margin:13px 0}
.c9-character-info .c9-button{margin-top:7px}
.c9-character-tabs{
 display:flex;align-items:center;gap:26px;min-width:0;
 overflow-x:auto;scrollbar-width:thin;overscroll-behavior-inline:contain;
 border-bottom:1px solid var(--c9-line);background:var(--c9-surface);
 padding:3px 13px 0;border-radius:var(--c9-r-sm) var(--c9-r-sm) 0 0
}
.c9-character-tabs .c9-character-tab{
 display:inline-flex;min-height:45px;align-items:center;white-space:nowrap;
 color:var(--c9-sub);font-size:13px;font-weight:650;text-decoration:none;
 padding:8px 0;border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer;font-family:var(--c9-ui)
}
.c9-character-tabs .c9-character-tab:hover,.c9-character-tabs .c9-character-tab:focus-visible{color:var(--c9-accent);border-bottom-color:var(--c9-accent)}
.c9-character-body{display:grid;gap:20px;min-width:0}
.c9-character-section{
 min-width:0;padding:clamp(17px,2.4vw,27px);
 background:var(--c9-surface);border:1px solid var(--c9-line);
 border-radius:var(--c9-r);scroll-margin-top:26px
}
.c9-character-section-head{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:9px;margin-bottom:15px}
.c9-character-section-head h2{font:600 clamp(21px,2vw,27px)/1.25 var(--c9-display);margin:5px 0 0}
.c9-character-section>p{font-size:12px;line-height:1.7;color:var(--c9-sub);margin:5px 0 15px}
.c9-character-guidance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.c9-character-guidance>div{
 padding:18px;min-width:0;border:1px solid var(--c9-line);
 background:var(--c9-surface-2);border-radius:var(--c9-r-sm)
}
.c9-character-guidance h3{font:600 18px/1.3 var(--c9-display);margin:8px 0 10px}
.c9-character-guidance p{font:400 13px/1.7 var(--c9-ui);color:var(--c9-sub);margin:6px 0}
.c9-character-provenance{font-size:11px!important;margin-top:15px!important}
.c9-writing-workspace{display:grid;grid-template-columns:minmax(170px,.68fr) minmax(0,1.32fr);align-items:start;gap:15px}
.c9-writing-guide{
 display:flex;flex-direction:column;align-items:center;gap:11px;min-width:0;
 padding:16px;background:var(--c9-surface-2);border:1px solid var(--c9-line);border-radius:var(--c9-r-sm)
}
.c9-writing-guide>span{
 display:grid;place-items:center;
 width:min(100%,280px);aspect-ratio:1;min-width:0;
 font:500 clamp(80px,9vw,155px)/1.1 var(--c9-hanzi-display);letter-spacing:0;
 background:var(--c9-surface);color:var(--c9-ink);
 border:1px solid var(--c9-line);
 background-image:linear-gradient(to right,transparent calc(50% - .5px),var(--c9-line) 50%,transparent calc(50% + .5px)),
 linear-gradient(to bottom,transparent calc(50% - .5px),var(--c9-line) 50%,transparent calc(50% + .5px))
}
.c9-writing-guide>small{font-size:11px;color:var(--c9-sub)}
.c9-writing-pad{
 display:flex;flex-direction:column;min-width:0;gap:9px;padding:15px;
 border:1px solid var(--c9-line);border-radius:var(--c9-r-sm);background:var(--c9-surface-2)
}
#c9-writing-canvas{
 display:block;aspect-ratio:1;width:min(100%,460px);height:auto;
 margin:0 auto;background:var(--c9-surface);color:var(--c9-ink);
 border:1px solid var(--c9-line-strong);border-radius:var(--c9-r-xs);
 touch-action:none;cursor:crosshair;
 background-image:linear-gradient(to right,transparent calc(50% - .5px),var(--c9-line) 50%,transparent calc(50% + .5px)),
 linear-gradient(to bottom,transparent calc(50% - .5px),var(--c9-line) 50%,transparent calc(50% + .5px))
}
.c9-writing-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
#c9-writing-feedback{font-size:11px;color:var(--c9-sub);line-height:1.5}
.c9-character-caution{
 padding:12px 15px;margin-top:15px;border-left:3px solid var(--c9-sage);
 border-radius:var(--c9-r-xs);background:var(--c9-surface-2);
 font-size:11px;line-height:1.65;color:var(--c9-sub)
}
.c9-character-caution strong{color:var(--c9-ink)}
.c9-character-word-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.c9-character-word{
 display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0;
 border:1px solid var(--c9-line);border-radius:var(--c9-r-sm);padding:14px
}
.c9-character-word>div:first-child{display:grid;min-width:0;gap:5px;align-items:start}
.c9-character-word strong[lang="zh-Hans"]{font:500 27px/1.3 var(--c9-hanzi-display);color:var(--c9-ink)}
.c9-character-word span{font-size:12px;color:var(--c9-green)}
.c9-character-word p{font-size:12px;color:var(--c9-ink);line-height:1.5;margin:0;overflow-wrap:anywhere}
.c9-character-word small{font-size:10px;color:var(--c9-sub);line-height:1.35}
.c9-character-word-actions{display:flex;flex-direction:column;flex:0 0 auto;gap:5px;align-items:end}
.c9-character-word-actions .c9-button{min-width:92px}
.c9-character-example-list{display:grid}
.c9-character-example{
 display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:12px;
 min-width:0;align-items:start;padding:16px 0;border-top:1px solid var(--c9-line)
}
.c9-character-example-index{color:var(--c9-muted);font-size:11px;margin-top:7px}
.c9-character-example>div{min-width:0}
.c9-character-example>div>p{font:500 clamp(21px,2.3vw,27px)/1.7 var(--c9-hanzi);margin:0 0 7px;letter-spacing:0;overflow-wrap:anywhere}
.c9-character-example-translation{display:grid;gap:6px;margin:0 0 6px}
.c9-character-example-translation span:first-child{color:var(--c9-green);font-size:13px;line-height:1.65}
.c9-character-example-translation span:last-child{color:var(--c9-sub);font-size:13px;line-height:1.6}
.c9-character-example small{color:var(--c9-muted);font-size:10px;line-height:1.6}
.c9-character-example>.c9-button{margin-top:2px}
.c9-character-inline-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:17px}
.c9-character-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.c9-character-related>article{
 display:flex;align-items:center;justify-content:space-between;
 gap:10px;min-width:0;padding:14px;border:1px solid var(--c9-line);border-radius:var(--c9-r-sm)
}
.c9-character-related>article>div{display:grid;gap:5px;min-width:0}
.c9-character-related strong[lang="zh-Hans"]{font:500 29px/1.25 var(--c9-hanzi-display)}
.c9-character-related span{font-size:12px;line-height:1.5;color:var(--c9-sub)}
.c9-character-related small{font-size:10px;line-height:1.5;color:var(--c9-muted)}
.c9-character-related .c9-button{flex:0 0 auto}
.c9-character-footer{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:17px;min-width:0;background:var(--c9-green-soft);
 border:1px solid var(--c9-line);border-radius:var(--c9-r);padding:22px
}
.c9-character-footer h2{font:600 21px/1.25 var(--c9-display);margin:4px 0 8px}
.c9-character-footer p:last-child{font-size:12px;line-height:1.6;color:var(--c9-sub);margin:0}
.c9-character-footer .c9-character-inline-actions{margin:0}
@media(max-width:1280px){
 .c9-character-top{grid-template-columns:minmax(0,1fr)}
 .c9-character-evidence{grid-template-columns:repeat(2,minmax(0,1fr))}
 .c9-character-identity{grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr)}
 .c9-character-glyph{font-size:clamp(100px,10vw,150px)}
}
@media(max-width:900px){
 .c9-character-guidance{grid-template-columns:minmax(0,1fr)}
 .c9-character-word-list{grid-template-columns:minmax(0,1fr)}
 .c9-character-related{grid-template-columns:minmax(0,1fr)}
 .c9-character-tabs{position:sticky;top:0;z-index:14;gap:20px}
 .c9-character-section{scroll-margin-top:82px}
}
@media(max-width:700px){
 .c9-character-page{gap:16px}
 .c9-character-heading h1{font-size:28px}
 .c9-character-top,.c9-character-identity,.c9-character-evidence{grid-template-columns:minmax(0,1fr)}
 .c9-character-glyph-wrap{border-right:0;border-bottom:1px solid var(--c9-line);padding:16px}
 .c9-character-glyph{width:min(210px,100%);font-size:112px}
 .c9-character-identity-content{padding:19px}
 .c9-character-identity-content h2{font-size:27px}
 .c9-character-hero-actions>.c9-button{flex:1 1 auto}
 .c9-character-info{padding:15px}
 .c9-character-section{padding:17px 14px}
 .c9-character-section-head h2{font-size:23px}
 .c9-writing-workspace{grid-template-columns:minmax(0,1fr)}
 .c9-writing-guide{flex-direction:row;justify-content:center;gap:16px}
 .c9-writing-guide>span{width:min(115px,40%);font-size:76px}
 .c9-character-example{grid-template-columns:22px minmax(0,1fr)}
 .c9-character-example>.c9-button{grid-column:2;justify-self:start}
 .c9-character-related>article{flex-wrap:wrap}
 .c9-character-footer{padding:18px 15px}
}
@media(max-width:370px){
 .c9-character-heading{gap:9px}
 .c9-character-neighbors .c9-button{min-width:0}
 .c9-character-hero-actions>.c9-button{width:100%}
 .c9-character-word{flex-wrap:wrap}
 .c9-character-word-actions{flex-direction:row;align-items:center;width:100%}
 .c9-character-related>article{flex-direction:column;align-items:start}
}
@media(prefers-reduced-motion:reduce){
 .c9-character-page *{scroll-behavior:auto}
}