.dm-map,.dm-faces{--dm-brand:var(--brand,#356aff);--dm-ink:var(--ink,#17315e);--dm-muted:var(--muted,#7186a7);--dm-line:var(--line,#dce6f3);--dm-surface:var(--surface,#fff);--dm-soft:#f4f8ff;--dm-selected:#e9f0ff;color:var(--dm-ink);min-width:0}
.dm-map *,.dm-faces *{box-sizing:border-box}.dm-map{container-type:inline-size;container-name:dental-map}.dm-eyebrow{display:block;color:var(--dm-brand);font-size:9px;font-weight:750;letter-spacing:1.5px;margin-bottom:7px}.dm-map-intro,.dm-faces-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.dm-map-intro h3,.dm-faces-heading h3{font-size:18px;font-weight:650;letter-spacing:-.35px;margin:0;line-height:1.3}.dm-map-intro p,.dm-faces-heading p{font-size:11px;color:var(--dm-muted);line-height:1.6;margin:5px 0 0}.dm-map-key{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--dm-muted);white-space:nowrap}.dm-map-key i{width:8px;height:8px;background:var(--dm-brand);border-radius:3px;box-shadow:0 0 0 3px var(--dm-selected)}.dm-orientation{display:flex;align-items:flex-start;gap:8px;margin:0 0 18px;font-size:10px;color:var(--dm-muted);line-height:1.6}.dm-orientation>svg{flex:none;color:var(--dm-brand);margin-top:1px}
.dm-quadrants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.dm-quadrant{border:1px solid var(--dm-line);border-radius:15px;padding:12px;background:linear-gradient(180deg,var(--dm-soft),var(--dm-surface) 65%);min-width:0}.dm-quadrant-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:11px}.dm-quadrant h4{font-size:10px;letter-spacing:.1px;font-weight:650;margin:0;line-height:1.5}.dm-quadrant-heading>span{color:var(--dm-muted);font-size:8px}.dm-teeth-grid{display:grid;grid-template-columns:repeat(4,minmax(36px,1fr));gap:6px}.dm-map-primary .dm-teeth-grid{grid-template-columns:repeat(5,minmax(36px,1fr))}.dm-tooth{position:relative;appearance:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:36px;min-height:81px;border:1px solid transparent;border-radius:10px;padding:6px 2px 7px;background:transparent;color:#8b9ebc;cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;font:inherit;-webkit-tap-highlight-color:transparent}.dm-tooth:hover{background:var(--dm-surface);border-color:var(--dm-line);color:#6483b4}.dm-tooth:focus-visible,.dm-face-block:focus-visible,.dm-face-option:focus-visible{outline:3px solid color-mix(in srgb,var(--dm-brand) 40%,transparent);outline-offset:3px}.dm-tooth-drawing{height:45px;width:38px;max-width:100%;overflow:visible}.dm-tooth-enamel{fill:var(--dm-surface);stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}.dm-tooth-detail{stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.62}.dm-tooth-number{font-size:11px;font-weight:650;line-height:1.1;letter-spacing:.25px;color:var(--dm-muted)}.dm-tooth.is-selected{background:var(--dm-selected);border-color:var(--dm-brand);color:var(--dm-brand);box-shadow:0 3px 9px #356aff12}.dm-tooth.is-selected .dm-tooth-number{color:var(--dm-brand)}.dm-tooth.is-selected .dm-tooth-enamel{fill:#fff;stroke-width:1.6}.dm-tooth-check{display:grid;place-items:center;position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;color:#fff;background:var(--dm-brand)}.dm-map-selection{display:flex;align-items:center;gap:11px;margin-top:18px;padding:13px;border-radius:12px;background:var(--dm-soft);border:1px solid var(--dm-line)}.dm-map-selection>div{display:grid;gap:4px;min-width:0}.dm-map-selection strong{font-size:11px;font-weight:650;line-height:1.4}.dm-map-selection div>span{font-size:10px;color:var(--dm-muted);line-height:1.6}.dm-map-selection>svg{flex:none;color:var(--dm-brand)}.dm-map-selection>svg:last-child{margin-left:auto}.dm-selection-tooth{width:35px;height:35px;display:grid;place-items:center;flex:none;background:var(--dm-brand);color:#fff;border-radius:10px;font-weight:700;font-size:14px}
.dm-faces{container-type:inline-size;container-name:dental-faces}.dm-faces-heading{align-items:flex-start}.dm-face-count{flex:none;border:1px solid var(--dm-line);border-radius:20px;font-size:9px;font-weight:550;color:var(--dm-muted);padding:6px 9px;line-height:1.4;white-space:nowrap}.dm-faces-content{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(220px,1.1fr);align-items:center;gap:25px}.dm-face-visual-wrap{display:grid;place-items:center;min-width:0}.dm-face-visual{width:194px;display:grid;grid-template-columns:52px 74px 52px;grid-template-rows:52px 74px 52px;gap:7px;padding:1px;position:relative}.dm-face-block{appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px solid #d4e1f4;color:#637fa8;background:linear-gradient(160deg,#fff,#edf3fc);font:inherit;cursor:pointer;padding:5px 1px;min-height:48px;min-width:48px;box-shadow:0 3px 5px #1f457007;transition:background .16s,border-color .16s,color .16s;-webkit-tap-highlight-color:transparent}.dm-face-block:hover{border-color:var(--dm-brand);color:var(--dm-brand)}.dm-face-block .dm-face-code{font-size:17px;font-weight:650;line-height:1}.dm-face-short-label{font-size:7px;font-weight:600;line-height:1.3;letter-spacing:.05px}.dm-face-top{grid-column:2;grid-row:1;border-radius:24px 24px 8px 8px}.dm-face-left{grid-column:1;grid-row:2;border-radius:24px 8px 8px 24px}.dm-face-center{grid-column:2;grid-row:2;border-radius:16px}.dm-face-right{grid-column:3;grid-row:2;border-radius:8px 24px 24px 8px}.dm-face-bottom{grid-column:2;grid-row:3;border-radius:8px 8px 24px 24px}.dm-face-block.is-selected{background:var(--dm-brand);border-color:var(--dm-brand);color:#fff;box-shadow:0 4px 12px #356aff26}.dm-face-caption{font-size:9px;color:var(--dm-muted);line-height:1.7;text-align:center;max-width:230px;margin:15px 0 0}.dm-face-options{display:grid;gap:7px;min-width:0}.dm-face-option{display:flex;align-items:center;gap:11px;appearance:none;background:var(--dm-surface);color:var(--dm-ink);border:1px solid var(--dm-line);border-radius:11px;min-height:54px;width:100%;padding:9px 11px;cursor:pointer;text-align:left;font:inherit;transition:background .16s,border-color .16s;-webkit-tap-highlight-color:transparent}.dm-face-option:hover{border-color:color-mix(in srgb,var(--dm-brand) 45%,var(--dm-line));background:var(--dm-soft)}.dm-face-option>.dm-face-code{width:29px;height:29px;border:1px solid var(--dm-line);border-radius:8px;display:grid;place-items:center;flex:none;color:var(--dm-muted);font-size:11px;font-weight:700;background:var(--dm-soft)}.dm-face-copy{display:grid;gap:3px;flex:1;min-width:0}.dm-face-copy strong{font-size:11px;font-weight:650;line-height:1.4}.dm-face-copy small{font-size:9px;line-height:1.5;color:var(--dm-muted)}.dm-face-checkbox{display:grid;place-items:center;width:17px;height:17px;border:1px solid var(--dm-line);border-radius:5px;background:var(--dm-surface);flex:none}.dm-face-option.is-selected{border-color:color-mix(in srgb,var(--dm-brand) 55%,var(--dm-line));background:var(--dm-selected)}.dm-face-option.is-selected>.dm-face-code{color:var(--dm-brand);background:var(--dm-surface);border-color:color-mix(in srgb,var(--dm-brand) 20%,var(--dm-line))}.dm-face-option.is-selected .dm-face-checkbox{background:var(--dm-brand);border-color:var(--dm-brand);color:white}.dm-faces-summary{display:flex;align-items:flex-start;gap:8px;padding:12px 13px;margin-top:16px;border-radius:11px;background:var(--dm-soft);color:var(--dm-muted)}.dm-faces-summary>span{color:var(--dm-brand);display:flex;flex:none;margin-top:1px}.dm-faces-summary p{font-size:10px;line-height:1.6;margin:0;display:grid;gap:3px}.dm-faces-summary strong{color:var(--dm-brand);font-weight:650;letter-spacing:.5px}.dm-faces-summary p>span{font-size:9px}.dm-faces-list-only .dm-faces-content{display:block}.dm-faces-list-only .dm-face-options{grid-template-columns:repeat(2,minmax(0,1fr))}.dm-faces-empty{border:1px dashed var(--dm-line);border-radius:16px;padding:32px 18px;text-align:center;background:var(--dm-soft)}.dm-faces-empty>span{display:grid;place-items:center;margin:0 auto 13px;width:47px;height:47px;color:var(--dm-brand);background:var(--dm-surface);border:1px solid var(--dm-line);border-radius:14px}.dm-faces-empty h3{font-size:14px;font-weight:650;margin:0 0 8px}.dm-faces-empty p{font-size:11px;color:var(--dm-muted);line-height:1.7;max-width:270px;margin:0 auto}
@container dental-map (min-width:750px){.dm-teeth-grid{grid-template-columns:repeat(8,minmax(36px,1fr))}.dm-quadrant{padding:15px}.dm-quadrants{gap:20px}.dm-tooth{min-height:87px}.dm-tooth-drawing{height:48px}.dm-map-primary .dm-teeth-grid{grid-template-columns:repeat(5,minmax(36px,1fr))}}
@container dental-map (max-width:530px){.dm-quadrant-heading{display:block}.dm-quadrant-heading>span{display:none}.dm-quadrant{padding:9px}.dm-quadrants{gap:10px}.dm-teeth-grid{gap:4px}.dm-tooth{min-height:75px}.dm-tooth-drawing{height:41px;width:34px}.dm-map-primary .dm-teeth-grid{grid-template-columns:repeat(3,minmax(36px,1fr))}}
@container dental-map (max-width:359px){.dm-quadrants{grid-template-columns:minmax(0,1fr)}.dm-teeth-grid{grid-template-columns:repeat(4,minmax(36px,1fr));gap:5px}.dm-map-primary .dm-teeth-grid{grid-template-columns:repeat(5,minmax(36px,1fr))}.dm-quadrant-heading{display:flex}.dm-quadrant-heading>span{display:block}.dm-map-intro{align-items:flex-start}.dm-map-key{font-size:9px;margin-top:3px}.dm-tooth{min-height:70px}.dm-tooth-drawing{height:38px}}
@container dental-faces (max-width:459px){.dm-faces-content{grid-template-columns:minmax(0,1fr);gap:21px}.dm-face-visual-wrap{padding:8px 0 2px}.dm-face-options{grid-template-columns:repeat(2,minmax(0,1fr))}.dm-face-option{gap:8px;padding:10px 8px;align-items:center;min-height:60px}.dm-face-option>.dm-face-code{width:26px;height:28px}.dm-face-copy small{display:none}.dm-face-copy strong{font-size:10px}.dm-face-checkbox{width:15px;height:15px}.dm-face-count{font-size:8px;padding:6px 8px}.dm-faces-heading h3{font-size:17px}}
@container dental-faces (max-width:299px){.dm-face-options,.dm-faces-list-only .dm-face-options{grid-template-columns:minmax(0,1fr)}.dm-face-copy small{display:block}.dm-faces-heading{flex-wrap:wrap;gap:10px}}
html[data-theme=dark] .dm-map,html[data-theme=dark] .dm-faces{--dm-soft:#18243a;--dm-selected:#213c64}html[data-theme=dark] .dm-tooth.is-selected .dm-tooth-enamel{fill:#203d67}html[data-theme=dark] .dm-face-block{background:linear-gradient(160deg,#22314b,#18243a);border-color:#3a506f;color:#9bb4d6}html[data-theme=dark] .dm-face-block.is-selected{background:var(--dm-brand);color:#fff;border-color:var(--dm-brand)}
@media(prefers-reduced-motion:reduce){.dm-tooth,.dm-face-block,.dm-face-option{transition:none}}