.tchart{--tc-pick:var(--accent);--tc-on:#fff;position:relative;display:flex;flex-direction:column;gap:1.25rem}.tchart-stage{max-width:342px;margin-inline:auto;padding-block:7%;container-type:inline-size}.tchart-jaw,.tchart-stage{position:relative;width:100%}.tchart-jaw{aspect-ratio:342/303;background-size:contain;background-repeat:no-repeat;background-position:50%}.tchart-jaw--upper{background-image:url(/tooth-chart/jaw-upper.webp)}.tchart-jaw--lower{background-image:url(/tooth-chart/jaw-lower.webp)}:root[data-theme=dark] .tchart-jaw,:root[data-theme=dark] .tchart-tooth{filter:brightness(.82) saturate(.85)}@media (prefers-color-scheme:dark){:root:not([data-theme]) .tchart-jaw,:root:not([data-theme]) .tchart-tooth{filter:brightness(.82) saturate(.85)}}.tchart-tooth{position:absolute;padding:0;border:0;cursor:pointer;background-color:initial;background-image:var(--tooth);background-size:contain;background-repeat:no-repeat;background-position:50%;transition:transform .18s ease}.tchart-tooth.is-picked:after{position:absolute;inset:0;content:"";background:var(--tc-pick);opacity:.62;-webkit-mask-image:var(--tooth);mask-image:var(--tooth);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.tchart-tooth:hover{transform:scale(1.12)}.tchart-tooth:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}.tchart-num{position:absolute;display:grid;place-items:center;width:7cqw;height:7cqw;font-size:3.5cqw;font-weight:600;font-variant-numeric:tabular-nums;color:currentColor;opacity:.75;border:1px solid transparent;border-radius:50%;transition:color .18s ease,background .18s ease,border-color .18s ease}.tchart-tooth:hover .tchart-num{opacity:1}.tchart-tooth.is-picked .tchart-num{color:var(--tc-on);opacity:1;background:var(--tc-pick);border-color:var(--tc-pick)}.tchart-mid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.3rem 0;padding-block:2.4rem;text-align:center}.tchart-mid:before{position:absolute;top:50%;left:8%;right:8%;height:1px;content:"";background:color-mix(in srgb,currentColor 22%,transparent)}.tchart-q{font-family:var(--font-mono,ui-monospace,monospace);font-size:clamp(.56rem,2.4cqw,.68rem);letter-spacing:.08em;text-transform:uppercase;color:currentColor;opacity:.65}.tchart-q--1,.tchart-q--2{align-self:start}.tchart-veil{position:fixed;inset:0;z-index:69;background:rgb(0 0 0/.35)}.tchart-pop{position:fixed;top:50%;left:50%;z-index:70;width:min(20rem,calc(100% - 2rem));max-height:85dvh;overflow-y:auto;padding:1rem 1rem .9rem;border:1px solid var(--border-2);border-radius:14px;background:var(--surface);box-shadow:0 18px 40px rgb(0 0 0/.22);transform:translate(-50%,-50%)}.tchart-pop-title{font-size:.95rem;font-weight:600;color:var(--text)}.tchart-pop-hint{margin-top:.15rem;font-size:.75rem;color:var(--text-mute)}.tchart-pop-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-top:.8rem}.tchart-pop-opts>:last-child:nth-child(odd){grid-column:1/-1}.tchart-drop,.tchart-opt{padding:.5rem .6rem;font-size:.82rem;color:var(--text-soft);border:1px solid var(--border-2);border-radius:9px;background:var(--surface-2);cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}.tchart-opt:hover{color:var(--text);border-color:var(--accent)}.tchart-chip-main:focus-visible,.tchart-chip-x:focus-visible,.tchart-drop:focus-visible,.tchart-opt:focus-visible,.tchart-pop-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tchart-opt.is-on{color:#fff;border-color:var(--accent);background:var(--accent)}.tchart-drop{width:100%;margin-top:.4rem;color:var(--danger-fg);border-color:color-mix(in srgb,var(--danger-fg) 35%,transparent);background:transparent}.tchart-drop:hover{border-color:var(--danger-fg)}.tchart-pop-close{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;color:var(--text-mute);border:0;border-radius:50%;background:transparent;cursor:pointer}.tchart-pop-close:hover{color:var(--text);background:var(--surface-2)}.tchart-picked-title{font-family:var(--font-mono,ui-monospace,monospace);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:currentColor;opacity:.7}.tchart-empty{margin-top:.45rem;font-size:.82rem;color:currentColor;opacity:.7}.tchart-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem;list-style:none}.tchart-chip{display:flex;align-items:stretch;overflow:hidden;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;background:color-mix(in srgb,currentColor 8%,transparent)}.tchart-chip-main{display:flex;align-items:center;gap:.4rem;padding:.3rem .5rem .3rem .35rem;font-size:.8rem;color:inherit;border:0;background:transparent;cursor:pointer}.tchart-chip-main:hover{opacity:.8}.tchart-chip-id{display:grid;place-items:center;min-width:1.6rem;padding-inline:.3rem;font-family:var(--font-mono,ui-monospace,monospace);font-size:.72rem;font-weight:600;color:var(--tc-on);border-radius:999px;background:var(--tc-pick)}.tchart-chip-x{display:grid;place-items:center;padding-inline:.45rem;color:inherit;opacity:.7;border:0;border-left:1px solid color-mix(in srgb,currentColor 28%,transparent);background:transparent;cursor:pointer;transition:color .18s ease,background .18s ease}.tchart-chip-x:hover{color:#fff;opacity:1;background:var(--btn-dng)}@media (prefers-reduced-motion:reduce){.tchart-chip-x,.tchart-num,.tchart-opt,.tchart-tooth{transition:none}.tchart-tooth:hover{transform:none}}.cform-panel .tchart{--tc-pick:#fff;--tc-on:var(--btn-bg)}:root[data-theme=dark] .cform-panel .tchart{--tc-pick:var(--accent);--tc-on:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme]) .cform-panel .tchart{--tc-pick:var(--accent);--tc-on:#fff}}