:root{--dark-blue:#3e5edc;--base-blue:#8a98be;--light-blue:#c6ccf8}#storybook-root{width:100%;height:100%}.dark-template{background-color:#0b0d1a;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.Odontogram{--odontogram-tooltip-bg:#000000d9;--odontogram-tooltip-fg:#fff}.Odontogram.dark-theme{--odontogram-tooltip-bg:#fffffff2;--odontogram-tooltip-fg:#000}.Odontogram.dark-theme svg{--dark-blue:#aab6ff;--base-blue:#d0d5f6;--light-blue:#5361e6;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e4e6ef;background-color:#0b0d1a}.Odontogram svg{color:var(--base-blue);fill:none;transition:all .125s ease-in}.Odontogram[data-read-only=true]{pointer-events:none}.Odontogram svg path:nth-of-type(2){opacity:0;transition:all .2s ease-in}.Odontogram svg path[data-colored=true]{transition:none;opacity:1!important}.Odontogram g.selected path:nth-of-type(2){fill:var(--light-blue);opacity:1}.Odontogram g.selected path:first-of-type{transition:stroke 1s}.Odontogram g.selected:hover path:first-of-type{stroke:currentColor;stroke-width:1px;stroke-linecap:round;stroke-dasharray:4 4;stroke-dashoffset:0;-webkit-filter:drop-shadow(0 0 8px);transition:stroke 5s;animation:1s linear 1s infinite dash-move}@keyframes dash-move{to{stroke-dashoffset:8px}}.Odontogram g.selected{color:var(--dark-blue);transition:all .3s}.Odontogram g.selected path{stroke-width:1.5px}.Odontogram g[class^=teeth-]:hover path:nth-of-type(2){fill:var(--light-blue);opacity:1}.odontogram-tooltip{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px #00000026}.Odontogram g[role=option]:focus-visible{outline:4px solid var(--dark-blue)!important}:root{--bg:#f7f1e8;--paper:#fffaf2;--surface:#fff;--ink:#17211f;--muted:#5d6e6a;--line:#17211f1f;--brand:#0f3c35;--brand-light:#1d5a50;--accent:#2f7b67;--accent-light:#4a9d86;--warm:#c9822c;--warm-light:#e3a85c;--terracotta:#a85d3e;--gold:#d4a574;--danger:#9f392f;--ok:#1e7b4f;--radius:16px;--radius-lg:28px;--shadow:0 18px 50px #12323a1f;--shadow-sm:0 6px 18px #12323a14;--fd:"Playfair Display", Georgia, serif;--fb:"DM Sans", system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--fb);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;padding:0;line-height:1.55}#root{min-height:100vh}.fd{font-family:var(--fd)}.batik-stripe{background-image:repeating-linear-gradient(45deg,#0000,#0000 8px,#2f7b670a 8px 16px),repeating-linear-gradient(-45deg,#0000,#0000 8px,#c9822c08 8px 16px)}.header{z-index:50;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);background:#f7f1e8eb;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:14px 20px;display:flex}.header-title{font-family:var(--fd);color:var(--brand);font-size:20px;line-height:1.2}.header-title small{font-family:var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:700;display:block}.lang-toggle{border:1px solid var(--line);background:#fff9;border-radius:999px;gap:6px;padding:4px;display:flex}.lang-toggle button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;transition:all .15s}.lang-toggle button.active{background:var(--brand);color:#fff}.hero{background:radial-gradient(circle at 90% 10%, #2f7b671f, transparent 30rem), radial-gradient(circle at 10% 90%, #c9822c1a, transparent 25rem), var(--bg);border-bottom:1px solid var(--line);padding:48px 20px 36px;position:relative;overflow:hidden}.hero-inner{max-width:1180px;margin:0 auto}.hero-eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin:0 0 10px;font-size:12px;font-weight:800}.hero h1{font-family:var(--fd);color:var(--brand);max-width:800px;margin:0 0 16px;font-size:clamp(36px,6vw,64px);line-height:1.05}.hero p{color:var(--muted);max-width:720px;margin:0 0 24px;font-size:17px}.hero-meta{flex-wrap:wrap;gap:10px;display:flex}.pill{border:1px solid var(--line);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;background:#ffffffa6;border-radius:999px;align-items:center;gap:6px;padding:7px 13px;font-size:12px;font-weight:800;display:inline-flex}.nav-pills{z-index:40;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);background:#f7f1e8e0;padding:12px 0;position:sticky;top:64px}.nav-pills-inner{scrollbar-width:none;gap:8px;max-width:1180px;margin:0 auto;padding:0 20px;display:flex;overflow-x:auto}.nav-pills-inner::-webkit-scrollbar{display:none}.nav-pill{border:1px solid var(--line);color:var(--muted);cursor:pointer;white-space:nowrap;background:#fff9;border-radius:999px;flex:none;padding:9px 16px;font-size:13px;font-weight:700;transition:all .15s}.nav-pill:hover{background:#fff}.nav-pill.active{background:var(--brand);color:#fff;border-color:var(--brand)}.container{max-width:1180px;margin:0 auto;padding:28px 20px 60px}.section{margin-bottom:44px}.section-header{margin-bottom:20px}.section-number{background:var(--brand);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;margin-bottom:10px;font-size:14px;font-weight:800;display:inline-flex}.section h2{font-family:var(--fd);color:var(--brand);margin:0 0 8px;font-size:clamp(26px,4vw,40px)}.section-subtitle{color:var(--muted);margin:0;font-size:15px}.card-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px}.card h3{font-family:var(--fd);color:var(--brand);margin:0 0 10px;font-size:20px}.card h4{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 8px;font-size:14px;font-weight:800}.card p,.card li{color:var(--muted);font-size:14px;line-height:1.6}.card ul{margin:0;padding-left:18px}.card li{margin-bottom:6px}.bilingual-card{border-left:4px solid var(--accent)}.bilingual-card .bm{color:var(--ink);font-weight:500}.bilingual-card .en{color:var(--muted);border-top:1px dashed var(--line);margin-top:6px;padding-top:6px;font-size:13px}.highlight-card{background:linear-gradient(145deg,#fffdf6,#eef6f0);border-color:#2f7b6738}.stat-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:14px;display:grid}.stat{text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px}.stat b{font-family:var(--fd);color:var(--brand);font-size:28px;display:block}.stat span{color:var(--muted);font-size:12px}.lab-shell{border-radius:var(--radius-lg);color:#fff;box-shadow:var(--shadow);background:linear-gradient(160deg,#12323a 0%,#1a4a41 100%);padding:22px}.lab-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.lab-header h3{font-family:var(--fd);margin:0;font-size:22px}.lab-header p{color:#b8d4cd;margin:4px 0 0;font-size:13px}.lab-stage-label{color:#fff;background:#ffffff1f;border:1px solid #fff3;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;display:inline-block}.lab-grid{grid-template-columns:minmax(260px,1fr) 1fr;gap:22px;display:grid}@media (width<=860px){.lab-grid{grid-template-columns:1fr}}.lab-scene{perspective:1100px;touch-action:none;cursor:grab;border-radius:var(--radius);background:#0000001f;justify-content:center;align-items:center;height:360px;display:flex;position:relative}.lab-scene:active{cursor:grabbing}.lab-tooth-wrapper{width:240px;height:300px;transform-style:preserve-3d;transition:transform .25s;position:relative}.lab-tooth{transform-style:preserve-3d;background:radial-gradient(circle at 35% 20%,#fffcf5,#f2e8d6 55%,#dfd0b6 100%);border-radius:48% 48% 38% 38%/36% 36% 58% 58%;width:170px;height:240px;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%)rotateX(2deg);box-shadow:inset -16px -12px 24px #6446282e,inset 12px 7px 18px #fffff0e6,0 22px 42px #00000040}.lab-tooth.incisor{border-radius:44% 44% 32% 32%/32% 32% 54% 54%;width:160px;height:230px}.lab-tooth.canine{border-radius:46% 36% 38% 48%/40% 28% 62% 58%;width:180px;height:250px}.lab-tooth.molar{border-radius:38% 42% 34% 30%/28% 32% 60% 64%;width:190px;height:220px}.lab-tooth:before,.lab-tooth:after{content:"";background:linear-gradient(150deg,#ece0ca,#d4c2a4);border-radius:0 0 38px 38px;width:58px;height:92px;position:absolute;bottom:-58px;box-shadow:inset -8px -8px 12px #503c1e1f}.lab-tooth.incisor:before{left:24px;transform:rotate(8deg)}.lab-tooth.incisor:after{right:24px;transform:rotate(-8deg)}.lab-tooth.canine:before{width:50px;left:34px;transform:rotate(4deg)}.lab-tooth.canine:after{width:50px;right:34px;transform:rotate(-4deg)}.lab-tooth.molar:before{width:46px;height:76px;left:16px;transform:rotate(12deg)}.lab-tooth.molar:after{width:46px;height:76px;right:16px;transform:rotate(-12deg)}.lab-gum{filter:drop-shadow(0 10px 22px #64323238);z-index:-1;background:radial-gradient(at 50% 0,#efb3b0,#c97a7a);border-radius:60% 60% 30% 30%/50% 50% 30% 30%;width:280px;height:78px;position:absolute;top:64%;left:50%;transform:translate(-50%)}.lab-lesion{opacity:0;transition:opacity .3s,transform .3s;position:absolute}.lab-lesion.plaque{background:linear-gradient(90deg,#f0d481,#c9b05a);border-radius:18px;width:108px;height:26px;top:152px;left:24px}.lab-lesion.white-spot{background:#fffff5d9;border:1px solid #b4a07880;border-radius:50%;width:56px;height:24px;top:116px;left:48px}.lab-lesion.brown-spot{background:radial-gradient(circle,#8a4a26,#b8733d 62%,#0000 66%);border-radius:50%;width:46px;height:30px;top:112px;left:60px}.lab-lesion.cavity{background:radial-gradient(circle at 42% 38%,#120b08 0 28%,#4b2118 44%,#9c5538 64%,#0000 68%);border-radius:50%;width:60px;height:46px;top:104px;left:58px;box-shadow:inset 0 0 10px #000000b3}.lab-tooth-wrapper.stage-plaque .lab-lesion.plaque,.lab-tooth-wrapper.stage-white .lab-lesion.plaque,.lab-tooth-wrapper.stage-white .lab-lesion.white-spot,.lab-tooth-wrapper.stage-brown .lab-lesion.plaque,.lab-tooth-wrapper.stage-brown .lab-lesion.brown-spot,.lab-tooth-wrapper.stage-cavity .lab-lesion.plaque,.lab-tooth-wrapper.stage-cavity .lab-lesion.cavity{opacity:1}.lab-surface{opacity:0;pointer-events:none;background:#3ca0781a;border:2px solid #3ca0788c;border-radius:12px;transition:opacity .25s,background .25s;position:absolute}.lab-surface.active{opacity:.85;background:#3ca07847}.lab-surface.gingival{border-radius:12px;width:150px;height:32px;top:158px;left:6px}.lab-surface.smooth{border-radius:38%;width:132px;height:104px;top:64px;left:14px}.lab-surface.proximal{border-radius:36%;width:34px;height:90px;top:70px;right:-2px}.lab-surface.occlusal{border-radius:50%;width:80px;height:38px;top:10px;left:40px}.lab-controls{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.lab-controls button{color:#e0eeea;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;transition:all .15s}.lab-controls button:hover{background:#fff3}.lab-controls button.active{background:var(--accent);border-color:var(--accent);color:#fff}.lab-info h4{color:#b8d4cd;text-transform:uppercase;letter-spacing:.12em;margin:0 0 8px;font-size:12px}.lab-info .stage-title{font-family:var(--fd);color:#fff;margin:0 0 8px;font-size:26px}.lab-info p{color:#d4e7e2;margin:0 0 14px;font-size:14px;line-height:1.6}.lab-note{border-left:3px solid var(--accent-light);color:#e0f0ec;background:#ffffff1a;border-radius:0 12px 12px 0;margin-bottom:16px;padding:12px 14px;font-size:13px}.map-shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px}.map-shell h3{font-family:var(--fd);color:var(--brand);margin:0 0 6px;font-size:22px}.map-shell>p{color:var(--muted);margin:0 0 16px;font-size:14px}.map-grid{grid-template-columns:1fr 260px;align-items:start;gap:22px;display:grid}@media (width<=860px){.map-grid{grid-template-columns:1fr}}.map-legend{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.map-legend button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:7px 12px;font-size:12px;font-weight:700;transition:all .15s;display:flex}.map-legend button.active{border-color:var(--brand);background:#f2f8f6}.legend-dot{border-radius:50%;width:12px;height:12px}.map-actions{gap:8px;margin-top:14px;display:flex}.map-actions button{border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#fff;flex:1;padding:9px;font-size:13px;font-weight:700}.map-actions button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.map-panel{border:1px solid var(--line);border-radius:var(--radius);background:#f8f6f2;padding:16px}.map-panel h4{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 10px;font-size:13px}.map-panel ul{color:var(--muted);margin:0;padding-left:16px;font-size:13px}.map-panel li{margin-bottom:6px}.rec-card{border-top:3px solid var(--warm)}.rec-card .rec-id{background:var(--warm);color:#fff;border-radius:4px;margin-bottom:8px;padding:3px 8px;font-size:11px;font-weight:800;display:inline-block}.evidence{color:var(--accent);background:#2f7b671a;border-radius:4px;margin-top:10px;padding:3px 8px;font-size:11px;font-weight:800;display:inline-block}.footer{border-top:1px solid var(--line);text-align:center;color:var(--muted);background:#fff;padding:28px 20px;font-size:13px}.footer-inner{max-width:1180px;margin:0 auto}.footer strong{color:var(--brand)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=640px){.hero{padding:32px 16px 28px}.container{padding:20px 16px 48px}.header-inner{padding:12px 16px}.nav-pills{top:58px}.lab-scene{height:300px}}