/* Neutral surfaces; source artwork retains its natural colors. */
:root{--surface:#fafafa;--surface-soft:#f1f1f1;--surface-muted:#e7e7e7;--text-primary:#363636;--text-secondary:#7a7a7a;--text-subtle:#9c9c9c;--line:#dedede;--action:#464646}
html,body{background:var(--surface);color:var(--text-primary)}
header{background:#fafafad9}.hero{background:radial-gradient(ellipse at 48% 35%,#ffffff 0%,#f2f2f2 58%,#eaeaea 100%)}
.education{background:var(--surface-soft)}.result,footer{background:var(--surface)}
.consult-panel{background:#ffffff99}.current-record,.regions button.active,.concern.selected,.model-controls button.active{background:var(--surface-muted);color:var(--text-primary)}
.eyebrow i,.status-dot{background:#949494}.overline,.panel-top,.region-insight-label,.count,.panel-description{color:var(--text-secondary)}
.primary,.consult-panel>.primary,.round.dark{background:var(--action);color:#ffffff}.primary:hover,.consult-panel>.primary:hover,.round.dark:hover{background:#353535}
.education .tabs button{background:#ffffffa6;color:#767676}.education .tabs button.active{background:#dddddd;color:#393939}
.education .lesson{background:#fcfcfc;border-color:var(--line);box-shadow:0 16px 60px #24242405}.education .lesson-visual{background:linear-gradient(145deg,#f0f0f0,#e6e6e6)}.education .lesson-copy{background:#fcfcfc}
.lesson-visual .region-structure-head,.lesson-visual .structure-part-copy,.lesson-visual .structure-disclaimer{color:#898989}.lesson-visual .region-structure-title{color:#585858}
.lesson-visual .structure-part-tabs button{background:#ffffff99!important;color:#727272!important}.lesson-visual .structure-part-tabs button.active{background:#d8d8d8!important;color:#393939!important}
.anatomy-interactive{background:#ececec}.anatomy-hotspot,.anatomy-hotspot.active{color:#454545!important;box-shadow:0 5px 18px #29292920,inset 0 1px 0 #ffffff99!important}.anatomy-hotspot.active{background:rgba(71,79,75,.58)!important;color:#ffffff!important;box-shadow:0 0 0 4px #ffffff40,0 6px 20px #2d2d2d25!important}.anatomy-hotspot:hover{background:#ffffffa6!important;color:#424242!important}.anatomy-focus-label{color:#595959}
.education .lesson-copy .overline,.education .step-nav>span{color:#919191}.education .lesson-copy h3{color:#3e3e3e}.education .lesson-copy>p{color:#717171}.education .lesson-copy .note{background:#eeeeee}.education .note b{color:#747474}.education .note p{color:#8a8a8a}.lesson-sources,.lesson-sources>span{color:#979797}.lesson-sources a{color:#6c6c6c}
.result-grid div,.note{background:#eeeeee}.portrait-zoom button,.portrait-zoom-status,.portrait-wheel-zone span{color:#797979}.portrait-wheel-zone.hover{border-color:#99999933}.detail-crop,#region-dialog{background-color:#f8f8f8}
#active-customer{background:#e7e7e7;color:#646464}.customer-dialog{background:#f8f8f8;color:#454545}.record-dialog-head>button{background:#e8e8e8;color:#828282}.record-dialog-head p,.record-muted,.record-status,.record-storage-note{color:#939393}.record-field{color:#838383}.record-field input,.record-field textarea{border-color:#e0e0e0;color:#494949;background:#ffffff}.record-field input:focus,.record-field textarea:focus{outline-color:#b4b4b4}.record-sidebar{border-color:#e4e4e4}.customer-row{background:#efefef;color:#858585}.customer-row.active{background:#e5e5e5}.customer-row strong{color:#5e5e5e}.customer-row small,.record-list-heading>span{color:#a0a0a0}.record-profile,.report-upload,.record-consultation-action{background:#efefef}.record-profile small,.report-row small{color:#a0a0a0}.record-secondary{background:#e8e8e8;color:#848484}.record-primary{background:#656565;color:#ffffff}.record-primary:hover{background:#535353}.report-row,.consultation-row{border-color:#e5e5e5}.report-row p,.consultation-row p,.record-consultation-action p{color:#8b8b8b}.report-open,.new-record summary,.consultation-row strong{color:#767676}.record-empty,.record-empty h3{color:#8e8e8e}
.archive-action{background:linear-gradient(125deg,#f0f0f0,#f5f5f5)}.archive-action h3{color:#5d5d5d}.archive-action p{color:#949494}.archive-action small{color:#aaaaaa}
.record-status[data-error=true]{color:var(--record-error,#5f5f5f)}
@media(max-width:767px){.hero{background:radial-gradient(ellipse at 55% 25%,#ffffff,#f1f1f1 65%,#eaeaea)}.education{background:var(--surface-soft)}.consult-panel{background:#ffffffa6}}

/* Pure white / achromatic gray interface. */
:root{--surface:#ffffff;--surface-soft:#f5f5f5;--surface-muted:#e6e6e6;--text-primary:#292929;--text-secondary:#686868;--text-subtle:#929292;--line:#dedede;--action:#333333}
html,body,header,.hero,.education,.result,footer{background:#ffffff;color:#292929}
.consult-panel{background:#ffffffd9}.current-record,.regions button.active,.concern.selected,.model-controls button.active{background:#e6e6e6;color:#333333}
.primary,.consult-panel>.primary,.round.dark,.record-primary{background:#333333;color:#ffffff}.primary:hover,.consult-panel>.primary:hover,.round.dark:hover,.record-primary:hover{background:#202020}
.education .lesson,.education .lesson-copy{background:#ffffff;border-color:#dedede}.education .lesson-visual{background:#f3f3f3}.education .lesson-copy .note,.result-grid div{background:#f1f1f1}
.education .tabs button{background:#f2f2f2;color:#626262}.education .tabs button.active{background:#dddddd;color:#292929}
.lesson-visual .structure-part-tabs button{background:#ffffffbb!important;color:#606060!important}.lesson-visual .structure-part-tabs button.active{background:#d5d5d5!important;color:#292929!important}
.anatomy-interactive{background:#eeeeee}.anatomy-hotspot,.anatomy-hotspot.active{color:#333333!important}.anatomy-hotspot.active{background:rgba(45,45,45,.62)!important;color:#ffffff!important;box-shadow:0 0 0 4px #ffffff40,0 6px 20px #00000020!important}.anatomy-hotspot:hover{background:#ffffffb3!important;color:#292929!important}
.anatomy-focus-label,.portrait-zoom button,.portrait-zoom-status,.portrait-wheel-zone span{color:#555555}.portrait-wheel-zone.hover{border-color:#88888833}
.education .lesson-copy h3,.lesson-visual .region-structure-title,.archive-action h3{color:#292929}.education .lesson-copy .overline,.education .step-nav>span,.lesson-visual .region-structure-head,.lesson-visual .structure-part-copy,.lesson-visual .structure-disclaimer,.education .lesson-copy>p,.education .note b,.education .note p{color:#666666}
.lesson-sources a,.report-open,.new-record summary,.consultation-row strong{color:#3c3c3c}.lesson-sources,.lesson-sources>span{color:#888888}
.archive-action{background:#f2f2f2}.archive-action p{color:#666666}.archive-action small{color:#888888}
#active-customer{background:#e6e6e6;color:#333333}.customer-dialog{background:#ffffff;color:#292929}.record-dialog-head>button{background:#eeeeee;color:#555555}.record-profile,.report-upload,.record-consultation-action{background:#f3f3f3}.record-secondary,.customer-row{background:#eeeeee;color:#555555}.customer-row.active{background:#dddddd}.customer-row strong,.record-profile h3,.record-empty h3{color:#333333}.record-status,.record-field,.record-muted,.record-storage-note,.report-row p,.consultation-row p,.record-consultation-action p,.record-empty,.record-dialog-head p{color:#737373}.record-field input,.record-field textarea{background:#ffffff;color:#333333;border-color:#dddddd}.record-field input:focus,.record-field textarea:focus{outline-color:#777777}.record-status[data-error=true]{color:#333333}.record-sidebar,.report-row,.consultation-row{border-color:#dddddd}
#active-customer:focus-visible,button:focus-visible,a:focus-visible,.anatomy-hotspot:focus-visible{outline-color:#555555}
#detail-close{background:#ffffffcc;color:#333333}#region-dialog,.detail-crop{background-color:#ffffff}#region-dialog::backdrop,.customer-dialog::backdrop{background:#00000055}
.flat-hotspot.selected .hotspot-core{background:#404040;box-shadow:0 0 0 6px #00000014,0 0 18px #00000020}.flat-hotspot.selected .hotspot-ring{border-color:#666666}.hotspot-core{background:#777777}.hotspot-name,.flat-hotspot.selected .hotspot-name{background:#ffffffcc;color:#333333}
@media(max-width:767px){html,body,header,.hero,.education,.result,footer{background:#ffffff}.consult-panel{background:#ffffffd9}}

/* Distinguish secondary controls from white surfaces. */
.regions button,.concern,.tabs button,.outline,.model-controls button,.portrait-zoom button,.three-tools button,.inline-link,#region-inspect,#region-structure,#region-explain,.round,.record-secondary,#active-customer,header .text-btn,.result .text-btn,.structure-part-tabs button{background:#eeeeee;color:#4c4c4c;border:0!important;box-shadow:none!important}
.regions button:hover,.concern:hover,.tabs button:hover,.outline:hover,.model-controls button:hover,.portrait-zoom button:hover,.three-tools button:hover,.inline-link:hover,.round:hover,.record-secondary:hover,#active-customer:hover,header .text-btn:hover,.result .text-btn:hover{background:#e2e2e2;color:#292929}
.regions button.active,.concern.selected,.model-controls button.active,.education .tabs button.active,.tabs button.active{background:#d5d5d5;color:#202020;border-color:#bdbdbd!important}
.education .tabs button{background:#eeeeee;color:#5b5b5b}.lesson-visual .structure-part-tabs button{background:#e7e7e7!important;color:#555555!important;border-color:#d3d3d3!important}.lesson-visual .structure-part-tabs button:hover{background:#dddddd!important}.lesson-visual .structure-part-tabs button.active{background:#cfcfcf!important;color:#222222!important;border-color:#aaaaaa!important}
.primary,.consult-panel>.primary,.round.dark,.record-primary{background:#333333;color:#ffffff;border:0!important}.primary:hover,.consult-panel>.primary:hover,.round.dark:hover,.record-primary:hover{background:#202020;color:#ffffff}
button:disabled{opacity:.42;cursor:default}.portrait-zoom button:disabled{opacity:.42;background:#eeeeee;color:#888888}.customer-row{background:#eeeeee;border:0!important}.customer-row:hover{background:#e5e5e5}.customer-row.active{background:#d9d9d9;border-color:#bdbdbd!important}
.report-open{display:inline-flex;align-items:center;justify-content:center;background:#eeeeee;padding:10px 13px;border-radius:8px;min-height:42px;color:#444444;text-decoration:none}.report-open:hover{background:#dfdfdf}
#detail-close,.record-dialog-head>button{background:#e9e9e9;color:#444444;border:0!important}.portrait-zoom-status{background:#f0f0f0;color:#666666}.consult-panel{background:#f6f6f6d9;border:0!important}.current-record{background:#e8e8e8}.current-record button{background:#dddddd;color:#444444;border-radius:6px;padding:8px 10px}.result-grid div{background:#f2f2f2}
@media(max-width:767px){.consult-panel{background:#f6f6f6}.model-controls button{background:#eaeaea}.model-controls button.active{background:#d5d5d5}}

/* Full-screen gray surfaces and borderless color-block hierarchy. */
html,body{background:#f2f2f2}
header{background:#f2f2f2e6;border:0!important;box-shadow:none!important}
.hero{background:linear-gradient(135deg,#eeeeee 0%,#f7f7f7 50%,#ebebeb 100%)}
.education{background:#eeeeee}.result{background:#f4f4f4}footer{background:#e9e9e9;border:0!important}
.section,.hero-bottom{border:0!important}
button,.primary,.outline,.round,.regions button,.concern,.tabs button,.model-controls button,.portrait-zoom button,.three-tools button,.inline-link,.record-primary,.record-secondary,.customer-row,.lesson-visual .structure-part-tabs button,.anatomy-hotspot,#active-customer,#detail-close,.record-dialog-head>button{border:0!important;box-shadow:none!important}
.consult-panel{background:#ffffffb8;border:0!important;box-shadow:none!important}.education .lesson{background:#ffffff;border:0!important;box-shadow:none!important}.education .lesson-visual{background:#e4e4e4}.education .lesson-copy{background:#ffffff}.education .lesson-copy .note{background:#f0f0f0}
.regions button,.concern,.tabs button,.outline,.model-controls button,.portrait-zoom button,.three-tools button,.inline-link,#region-inspect,#region-structure,#region-explain,.round,.record-secondary,#active-customer,header .text-btn,.result .text-btn{background:#e9e9e9;color:#4c4c4c}
.regions button:hover,.concern:hover,.tabs button:hover,.outline:hover,.model-controls button:hover,.portrait-zoom button:hover,.three-tools button:hover,.inline-link:hover,.round:hover,.record-secondary:hover,#active-customer:hover,header .text-btn:hover,.result .text-btn:hover{background:#dddddd;color:#292929}
.regions button.active,.concern.selected,.model-controls button.active,.education .tabs button.active,.tabs button.active{background:#cccccc;color:#202020}
.education .tabs button{background:#ffffffa6}.education .tabs button.active{background:#d1d1d1}.lesson-visual .structure-part-tabs button{background:#ffffff99!important}.lesson-visual .structure-part-tabs button.active{background:#c6c6c6!important}.lesson-visual .structure-part-tabs button:hover{background:#d5d5d5!important}
.primary,.consult-panel>.primary,.round.dark,.record-primary{background:#333333;color:#ffffff}.primary:hover,.consult-panel>.primary:hover,.round.dark:hover,.record-primary:hover{background:#202020;color:#ffffff}
.anatomy-hotspot{background:#ffffff66!important;box-shadow:none!important}.anatomy-hotspot.active{background:#333333aa!important;color:#ffffff!important;box-shadow:none!important}.anatomy-focus-label{border:0!important;background:#ffffff80}
.result-grid{background:transparent;border:0!important}.result-grid div{background:#ffffff}.archive-action{background:#e7e7e7}
.customer-dialog{background:#f3f3f3;border:0!important;box-shadow:none!important}.record-sidebar{border:0!important}.customer-row{background:#e6e6e6}.customer-row.active{background:#cdcdcd}.record-profile,.report-upload,.record-consultation-action{background:#ffffff}.report-row,.consultation-row{border:0!important;background:#ffffff;padding:16px;margin:10px 0;border-radius:10px}.record-field input,.record-field textarea{border:0!important;background:#e7e7e7}.record-field input:focus,.record-field textarea:focus{outline:2px solid #777777;outline-offset:2px}
.badge,.education .step-nav,.panel-divider,.feedback,.note,.hotspot-name,#region-dialog{border:0!important}.education .step-nav{padding-top:16px}.hotspot-ring,.hotspot-wave{border-color:transparent!important}.portrait-wheel-zone{border:0!important}
@media(max-width:767px){html,body,header{background:#f2f2f2}.hero{background:linear-gradient(150deg,#eeeeee,#f7f7f7 55%,#eaeaea)}.education{background:#eeeeee}.result{background:#f4f4f4}footer{background:#e9e9e9}.consult-panel{background:#ffffffb8}.education .lesson-visual{background:#e4e4e4}}

/* Strong selected states and a soft graphite backdrop for the portrait. */
.regions button.active,.regions button.active:hover,.concern.selected,.concern.selected:hover,.model-controls button.active,.model-controls button.active:hover,.education .tabs button.active,.education .tabs button.active:hover,.tabs button.active,.tabs button.active:hover,.customer-row.active,.customer-row.active:hover{background:#4a4a4a;color:#ffffff}
.concern.selected strong,.concern.selected .plus,.customer-row.active strong,.customer-row.active span,.customer-row.active small{color:#ffffff}
.lesson-visual .structure-part-tabs button.active,.lesson-visual .structure-part-tabs button.active:hover{background:#444444!important;color:#ffffff!important}.anatomy-hotspot.active,.anatomy-hotspot.active:hover{background:#333333d9!important;color:#ffffff!important}
.hero{background:radial-gradient(ellipse 34% 66% at 49% 43%,#d8d8d8 0%,#e4e4e4 48%,#eeeeee 80%,#f1f1f1 100%)}
.portrait-light{left:50%;top:45%;width:clamp(320px,34vw,620px);height:78%;background:radial-gradient(ellipse,#c6c6c640 0%,#dfdfdf18 56%,transparent 78%);filter:blur(32px);opacity:1}
.portrait-pan,.portrait-pan .flat-portrait{background:transparent}.portrait-vignette{background:radial-gradient(ellipse 58% 64% at 60% 46%,transparent 55%,#e5e5e510 78%,#ececec28 100%)}
.portrait-art{mix-blend-mode:multiply}.portrait-loading{background:#e8e8e8;color:#777777}.portrait-focus{background:radial-gradient(ellipse 14% 12% at var(--x,50%) var(--y,50%),#ffffff20,transparent);mix-blend-mode:screen}
@media(max-width:767px){.hero{background:linear-gradient(180deg,#f1f1f1 0%,#e5e5e5 36%,#eeeeee 68%,#f1f1f1 100%)}.portrait-stage{background:radial-gradient(ellipse 60% 65% at 50% 43%,#d8d8d8 0%,#e3e3e3 52%,transparent 90%)}.portrait-light{width:80%;height:75%;left:50%;top:43%;transform:translate(-50%,-50%);filter:blur(24px)}}

/* All button states use solid/transparent surfaces, never edge strokes. */
#home button,#education button,#result button,#customer-dialog button,#region-dialog button,#motion-toggle,#reset,#active-customer,html body button:hover,html body button:active,html body button:focus,html body button:focus-visible,html body button:disabled{border:0!important;outline:0!important;box-shadow:none!important}
html body button:focus-visible{filter:brightness(.80);text-decoration:underline;text-underline-offset:4px}
.hotspot-core,.hotspot-ring,.hotspot-wave,.flat-hotspot.selected .hotspot-core,.flat-hotspot:hover .hotspot-core,.flat-hotspot:focus-visible .hotspot-core{border:0!important;outline:0!important;box-shadow:none!important}.hotspot-ring,.hotspot-wave{display:none!important}
.hotspot-core{width:10px;height:10px;left:17px;top:17px;background:#686868}.flat-hotspot.selected .hotspot-core{background:#292929;width:12px;height:12px;left:16px;top:16px}
.portrait-art{mix-blend-mode:normal}.portrait-vignette{background:none}.portrait-light{background:radial-gradient(ellipse,#d3d3d340 0%,transparent 76%)}
.detail-crop{background-image:url('assets/particle-woman-selected-v5.png');background-color:#e4e4e4}

.portrait-art{mix-blend-mode:normal;mask-image:radial-gradient(ellipse 55% 60% at 59% 48%,#000 46%,#000e 70%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 55% 60% at 59% 48%,#000 46%,#000e 70%,transparent 100%)}.portrait-ambient,.portrait-side-particles{mix-blend-mode:normal;opacity:.4}

.portrait-art{mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,#000 72%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,#000 72%,transparent 100%)}

/* User-selected original artwork, restored floating perimeter particles. */
.portrait-ambient,.portrait-side-particles{mix-blend-mode:normal;opacity:.75}
.flat-hotspot:not(.selected) .hotspot-core,.flat-hotspot:not(.selected):hover .hotspot-core,.flat-hotspot:not(.selected):focus-visible .hotspot-core{background:rgba(255,255,255,.5);opacity:1;border:0!important;box-shadow:none!important}
.flat-hotspot.selected .hotspot-core{background:#333333;opacity:1}
.flat-hotspot,.flat-hotspot:hover,.flat-hotspot:focus,.flat-hotspot:active{background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Filled translucent circular backplates for face markers, without strokes. */
.flat-hotspot,.flat-hotspot:hover,.flat-hotspot:focus,.flat-hotspot:active{background:rgba(255,255,255,.18)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%!important;border:0!important;box-shadow:none!important}
.flat-hotspot:hover{background:rgba(255,255,255,.28)!important}.flat-hotspot.selected,.flat-hotspot.selected:hover,.flat-hotspot.selected:focus{background:rgba(45,45,45,.18)!important}
.flat-hotspot:not(.selected) .hotspot-core{background:rgba(255,255,255,.5);box-shadow:none!important}.flat-hotspot.selected .hotspot-core{background:#333333;box-shadow:none!important}

.illustration-style-switch{display:flex;align-items:center;gap:7px;margin:0 0 22px;padding:5px;background:#d8d8d8;border-radius:10px;width:max-content;max-width:100%}.illustration-style-switch>span{font-size:10px;color:#777777;padding:0 8px}.illustration-style-switch button{padding:10px 14px;background:#ededed;color:#5a5a5a;border-radius:7px;font-size:12px;min-height:40px}.illustration-style-switch button.active{background:#444444;color:#ffffff}.illustration-style-switch button:hover{background:#e5e5e5}.illustration-style-switch button.active:hover{background:#333333}.lesson-visual[data-illustration-style=cartoon] .anatomy-interactive{background:#eeeeee}.lesson-visual[data-illustration-style=cartoon] .anatomy-art{object-fit:contain;aspect-ratio:3/2}.lesson-visual[data-illustration-style=cartoon] .anatomy-hotspot{top:83%!important}
@media(max-width:767px){.illustration-style-switch{width:100%;margin-bottom:18px}.illustration-style-switch>span{font-size:9px}.illustration-style-switch button{flex:1;padding:10px 8px;font-size:11px;min-height:44px}.lesson-visual[data-illustration-style=cartoon] .anatomy-art{aspect-ratio:1.3;object-fit:contain}}

/* Match the supplied composition: equal measured side margins on every cartoon. */
.lesson-visual[data-illustration-style=cartoon] .anatomy-interactive{overflow:hidden;isolation:isolate}.lesson-visual[data-illustration-style=cartoon] .anatomy-art{object-fit:contain;object-position:center;transform:translateX(var(--cartoon-shift,0%)) scale(var(--cartoon-scale,1));transform-origin:50% 50%;max-width:none}

/* Full-width diagram canvases: keep their native ratio, without contain letterboxing. */
.education{padding-left:max(4%,calc((100% - 1360px)/2));padding-right:max(4%,calc((100% - 1360px)/2))}
.education .lesson{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.education .lesson-visual{padding:22px 18px}
.education .lesson-visual .anatomy-interactive{margin:16px -18px 20px;width:calc(100% + 36px);border-radius:0;aspect-ratio:3/2}
.education .lesson-visual .anatomy-interactive .anatomy-art{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}
.education .lesson-visual[data-illustration-style=cartoon] .anatomy-interactive .anatomy-art{transform:translateX(var(--cartoon-shift,0%)) scale(max(1,var(--cartoon-scale,1)))}
@media(max-width:767px){
.education{padding-left:10px;padding-right:10px}
.education .lesson{display:flex;flex-direction:column;width:100%}
.education .lesson-visual{width:100%;padding:18px 12px}
.education .lesson-visual .anatomy-interactive{width:calc(100% + 24px);margin:14px -12px 18px;aspect-ratio:3/2;border-radius:0}
.education .lesson-visual .anatomy-interactive .anatomy-art{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
}