*{box-sizing:border-box} :root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:dark;background:#102027;color:#f4f7f5}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 90% 0,#28414a,transparent 55%)}main{max-width:500px;padding:16px 20px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.brand{font-size:29px;font-weight:800;letter-spacing:-1.7px;color:#fff;text-decoration:none}.brand span{color:#c5f693;margin-left:5px}.icon{height:40px;width:40px;border:1px solid #3b555e;background:#1d343d;color:#fff;border-radius:13px;font-size:24px;cursor:pointer}.eyebrow{font-size:10px;letter-spacing:2px;color:#a9bbb8;margin:16px 0}#routine>.eyebrow{display:none}.timer-row{display:flex;align-items:center;justify-content:space-between}.label{display:block;font-size:10px;color:#a9c0c4}.total{font-size:50px;line-height:1.18;letter-spacing:-2px;font-weight:650;font-variant-numeric:tabular-nums}.section-clock{text-align:center;border:1px solid #45616a;border-radius:18px;padding:8px 13px;min-width:105px;background:linear-gradient(#1e3540,#1e3540) padding-box,conic-gradient(#c5f693 var(--quadrantAngle,0deg),#45616a 0) border-box;border:2px solid transparent}.section-clock strong{font-size:29px;font-weight:550;line-height:1.05}.section-clock strong span{font-size:13px;color:#a7c0c4;margin-left:4px}.section-clock .label{font-size:9px;margin-bottom:3px}.track{height:4px;position:relative;border-radius:8px;margin:13px 0 16px;background:#38515b;overflow:hidden}.track>div{height:100%;background:#c5f693;width:0}.track:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 24.5%,#102027 24.5%,#102027 25.5%,transparent 25.5%,transparent 49.5%,#102027 49.5%,#102027 50.5%,transparent 50.5%,transparent 74.5%,#102027 74.5%,#102027 75.5%,transparent 75.5%)}
.stage{border-radius:25px;padding:13px 12px 10px;background:radial-gradient(ellipse at 50% 30%,#fff,#e5edf0 65%,#c9d9dd);border:1px solid #c7d8db;box-shadow:0 20px 45px #0002;overflow:hidden}.stage-top{display:flex;justify-content:space-between;gap:8px;color:#44646d;font-size:8px;letter-spacing:1.2px}.scene-wrap{position:relative;height:265px}#dentalCanvas{width:100%;height:100%;display:block;cursor:grab}#dentalCanvas:active{cursor:grabbing}.mini-map{position:absolute;right:0;top:10px;width:57px;border-radius:12px;background:#203c46e8;padding:3px 3px 6px;pointer-events:none;box-shadow:0 4px 12px #203c4622}.mini-map svg{width:100%;height:50px;display:block}.mini-map span{display:block;text-align:center;font-size:6px;color:#c4d5d7}.view-tools{position:absolute;top:10px;left:0;display:flex;gap:4px}.view-tools button{width:27px;height:27px;border:1px solid #aabfc5;border-radius:9px;background:#ffffffaf;color:#345863;font-size:16px;cursor:pointer}.contact-inset{position:absolute;right:0;bottom:12px;width:110px;height:125px;border-radius:18px;overflow:hidden;border:1px solid #90acb6;background:radial-gradient(ellipse at 50% 35%,#355462,#172d38);box-shadow:0 8px 20px #152d3833;pointer-events:none}.contact-inset>span{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1px;color:#d0e5e8;z-index:1}#contactCanvas{display:block;width:110px;height:110px;margin-top:13px}.contact-label{position:absolute;left:0;bottom:15px;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid #b7cbcb;border-radius:15px;background:#ffffffbf;color:#294b4b;font-size:9px;max-width:180px}.contact-label i{height:6px;width:6px;border-radius:50%;background:#72a945}.phase-row{display:flex;gap:6px}.phase{position:relative;flex:1;background:#ffffff8f;border:1px solid #bfced2;border-radius:11px;overflow:hidden;padding:8px 4px;color:#49676f;font-size:11px;font-weight:600;cursor:pointer}.phase small{display:block;font-size:8px;font-weight:400;margin-top:2px}.phase:after{content:'';position:absolute;left:0;bottom:0;height:3px;width:var(--phaseProgress,0%);background:#8ec957}.phase.selected{background:#1c3d36;color:#def8c7;border-color:#1c3d36}.phase-caption{display:flex;justify-content:center;gap:5px;margin-top:8px;font-size:9px;color:#536f75}.phase-caption strong{font-weight:600;color:#294d56}.tooth-route{border-top:1px solid #adc1c44d;margin-top:8px;padding-top:8px;display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#506e76}#toothDots{display:flex;gap:5px}#toothDots i{height:5px;width:5px;border-radius:50%;background:#b9cbd0}#toothDots i.passed{background:#789e95}#toothDots i.current{background:#375c4a;box-shadow:0 0 0 3px #91c57233}#pace{min-width:62px;text-align:right}.quadrant-row{display:flex;gap:5px;margin-top:10px}.quadrant{flex:1;padding:6px 2px;border-radius:10px;border:1px solid #39525b;background:#1a323b;color:#9fbbc0;font-size:11px;cursor:pointer}.quadrant span{font-size:7px;display:block;margin-top:2px}.quadrant.selected{border-color:#a7d981;color:#c5f693;background:#273f35}.phase:disabled,.quadrant:disabled{opacity:1;cursor:default}.step-line{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#99b3b8;margin-top:13px}#stepCount{color:#c5f693}h1{font-size:27px;letter-spacing:-.8px;margin:5px 0 0}h2{font-size:16px;font-weight:500;color:#bdcdc8;margin:2px 0}.instruction{font-size:12px;line-height:1.5;margin:8px 0;color:#d8e2df;min-height:36px}.movement{font-size:10px;color:#c5f693;margin:7px 0 12px;min-height:14px}.primary{display:flex;align-items:center;justify-content:center;gap:28px;width:100%;border:0;border-radius:15px;padding:14px;background:#c5f693;color:#152b21;font-size:15px;font-weight:700;cursor:pointer}.primary span{font-size:23px;line-height:12px}.secondary{width:100%;border:0;background:transparent;color:#b0c4c6;padding:8px;font-size:12px;cursor:pointer}.footnote{text-align:center;font-size:8px;color:#90acb0;margin:9px 0 0}.active-session .quadrant-row,.active-session .view-tools{display:none}.active-session header{margin-bottom:9px}#activeControls{position:sticky;bottom:6px;padding-top:8px;background:linear-gradient(transparent,#102027 25%)}#sceneFallback{position:absolute;left:10px;right:75px;top:75px;font-size:12px;line-height:1.6;color:#234239}
dialog{background:#172c35;color:#f4f7f5;border:1px solid #3f5964;border-radius:24px;width:calc(100% - 24px);max-width:450px;max-height:85vh;padding:24px}dialog::backdrop{background:#0009}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}label{display:block;font-size:13px;margin:16px 0}select{width:100%;display:block;margin-top:8px;padding:14px;border-radius:12px;border:1px solid #445f68;background:#263e48;color:#fff;font-size:14px}.toggle{display:flex;justify-content:space-between;align-items:center;gap:20px}input{accent-color:#c5f693;width:20px;height:20px}.small{font-size:11px;color:#afc4c7;line-height:1.6}details{font-size:13px;line-height:1.65;border-top:1px solid #39515b;margin-top:20px;padding-top:16px}a{color:#c5f693}details a{display:block;margin:12px 0}.download{display:block;margin-top:22px;font-size:14px}.sync-note{border:1px solid #45605f;border-radius:12px;padding:13px;font-size:12px;line-height:1.6;color:#c6d6d0}.finished{margin:55px auto 30px;border-radius:50%;width:95px;height:95px;background:#c5f693;color:#1b3024;text-align:center;font-size:65px}#done{text-align:center}#done p{line-height:1.8;color:#bccdc5}.card{padding:22px;background:#263e48;border-radius:18px;margin:30px 0;line-height:1.6;font-size:14px}[hidden]{display:none!important}@media(max-width:360px){main{padding:12px}.scene-wrap{height:245px}.total{font-size:44px}.stage-top{font-size:7px}.contact-inset{width:94px;height:107px}#contactCanvas{width:94px;height:94px;margin-top:11px}.contact-label{font-size:8px;max-width:150px}.section-clock{min-width:96px;padding:7px 10px}.instruction{font-size:11px}.mini-map{width:51px}.mini-map svg{height:44px}}@media(max-height:780px) and (min-width:361px){main{padding-top:10px}.scene-wrap{height:225px}.contact-inset{width:98px;height:112px}#contactCanvas{width:98px;height:98px}.total{font-size:44px}.quadrant-row{margin-top:7px}.step-line{margin-top:9px}}
main{padding-bottom:10px}.stage{padding-bottom:8px}.tooth-route{padding-top:6px;margin-top:6px}.track{margin-bottom:13px}.movement{margin-bottom:9px}.quadrant-row{margin-top:8px}
.header-tools{display:flex;gap:7px;align-items:center}#focusMode{border:1px solid #49666e;border-radius:12px;background:#213b45;color:#bfd4d6;font-size:10px;height:40px;padding:0 13px;cursor:pointer}#focusMode[aria-pressed=true]{color:#c5f693;border-color:#a0c784}.focus-mode main{max-width:560px;padding:12px 14px}.focus-mode .scene-wrap{height:clamp(265px,calc(100svh - 430px),520px)}.focus-mode .quadrant-row,.focus-mode .instruction,.focus-mode .movement{display:none}.focus-mode h1{font-size:22px}.focus-mode h2{font-size:13px;margin-bottom:12px}.focus-mode .contact-inset{width:140px;height:156px}.focus-mode #contactCanvas{width:140px;height:140px}.focus-mode .mini-map{width:64px}.focus-mode .mini-map svg{height:57px}.focus-mode .contact-label{font-size:10px}.focus-mode .stage{margin-bottom:12px}
.focus-mode .scene-wrap{height:clamp(250px,calc(100svh - 460px),500px)}.active-session.focus-mode .scene-wrap{height:clamp(245px,calc(100svh - 485px),480px)}
/* Quiet studio layout: controls and detail never cover the teaching model. */
body{background:radial-gradient(ellipse at 100% 0,#253b42,transparent 65%);background-color:#101d22}
main,.focus-mode main{padding:calc(28px + env(safe-area-inset-top,0px)) 22px calc(20px + env(safe-area-inset-bottom,0px));max-width:500px}
header,.active-session header{margin-bottom:24px}.brand{font-size:27px}.icon{border-color:#33474d;background:#1b2c32}#focusMode{background:transparent;border-color:#33474d}
.total{font-size:52px;font-weight:500;letter-spacing:-2.5px}.label{color:#9caeae;letter-spacing:.25px}.section-clock{border-radius:50%;height:76px;min-width:76px;padding:12px 5px;background:linear-gradient(#192c32,#192c32) padding-box,conic-gradient(#c5f693 var(--quadrantAngle,0deg),#3b5055 0) border-box}.section-clock .label{font-size:8px}.section-clock strong{font-size:27px}
.track{margin:17px 0 20px;height:3px}
.stage{background:radial-gradient(ellipse at 45% 30%,#fffcf5,#f0ece4 78%);border:1px solid #fff5;border-radius:28px;padding:16px 15px 12px;box-shadow:0 16px 40px #0002}
.stage-top{align-items:center;letter-spacing:1px;font-size:8px;color:#797971;min-height:39px}
.stage-top>div:first-child{display:flex;flex-direction:column;gap:6px}
#surfaceBadge{color:#314c46;font-size:10px;font-weight:650;letter-spacing:.6px}
.mini-map{position:static;width:53px;background:transparent;border-radius:0;padding:0;box-shadow:none}
.mini-map svg,.focus-mode .mini-map svg{height:38px}.mini-map span{color:#767e76;font-size:6px}.focus-mode .mini-map{width:53px}
.scene-wrap,.focus-mode .scene-wrap,.active-session.focus-mode .scene-wrap{height:260px}
.model-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.contact-label,.focus-mode .contact-label{position:static;background:transparent;border:0;padding:0;font-size:9px;color:#486057;max-width:none}
.view-tools{position:static;gap:5px}.view-tools button{height:30px;width:30px;background:#fff6;border:1px solid #d6d8cd;color:#486057;border-radius:50%;font-size:15px}
.contact-detail{border:0;border-top:1px solid #d8d9d0;padding:0;margin:0 0 12px;font-size:10px;color:#627166}
.contact-detail summary{display:flex;justify-content:space-between;cursor:pointer;padding:10px 0;list-style:none}.contact-detail summary::-webkit-details-marker{display:none}.contact-detail summary span{font-size:13px}
.detail-content{display:flex;gap:14px;align-items:center;padding:0 0 8px}.detail-content>div:last-child{flex:1}.detail-content strong{font-size:12px;color:#385146}.detail-content p{font-size:10px;line-height:1.6;margin:5px 0}
.contact-inset,.focus-mode .contact-inset{position:static;width:110px;height:110px;flex-shrink:0;background:#e2e4dc;border:0;border-radius:18px;box-shadow:none}#contactCanvas,.focus-mode #contactCanvas{width:110px;height:110px;margin:0}
.phase{background:transparent;border-color:#cfd4ca;color:#627369;border-radius:12px;padding:8px 4px;font-size:10px}.phase.selected{background:#304c40;border-color:#304c40;color:#edf8db}.phase small{font-size:8px}.phase:after{height:2px;background:#b5da88}.phase-caption{color:#7b857b;margin-top:9px}.phase-caption strong{color:#4a6355}
.tooth-route{color:#7c887c;border-color:#d8d9d0;margin-top:9px;padding-top:9px;font-size:8px}
.quadrant-row{margin-top:12px;gap:6px}.quadrant{background:transparent;border-color:#30434a;padding:7px 2px;border-radius:10px;color:#8ea4a6}.quadrant.selected{background:#263d30;border-color:#66825b;color:#d0ecad}
.step-line{margin-top:19px;color:#8a9f9e;font-size:9px}h1{font-size:28px;font-weight:550;margin-top:6px}h2{font-size:15px;color:#b4c6bc}.instruction{font-size:12px;line-height:1.55;min-height:0;margin:10px 0 6px}.movement{font-size:10px;color:#bddb9e;margin:6px 0 18px}.primary{border-radius:17px;padding:16px;background:#c9eca6;font-size:14px}.footnote{font-size:8px;line-height:1.5;margin-top:12px}#activeControls{background:linear-gradient(transparent,#101d22 25%);bottom:env(safe-area-inset-bottom,0px)}
.active-session .model-footer .view-tools{display:none}.active-session .model-footer{justify-content:center}.focus-mode .stage{margin-bottom:12px}.focus-mode .scene-wrap{height:clamp(260px,calc(100svh - 500px),440px)}
@media(max-width:360px){main,.focus-mode main{padding-left:16px;padding-right:16px}.scene-wrap,.active-session.focus-mode .scene-wrap{height:225px}.stage{padding:14px 12px 12px}.total{font-size:47px}}
@media(max-height:780px){header,.active-session header{margin-bottom:17px}.scene-wrap,.active-session.focus-mode .scene-wrap{height:220px}.step-line{margin-top:13px}.track{margin:13px 0 16px}}
/* Keep the start action within reach on a normal phone viewport. */
header,.active-session header{margin-bottom:18px}
.stage-top{min-height:30px}
.scene-wrap,.active-session.focus-mode .scene-wrap{height:215px}
.tooth-route{display:none}
.step-line{display:none}
.quadrant-row{margin-bottom:13px}
.contact-detail{margin-bottom:7px}
.model-footer{margin-bottom:8px}
.instruction{margin-top:7px}
.movement{margin-bottom:13px}
@media(max-height:780px){.scene-wrap,.active-session.focus-mode .scene-wrap{height:190px}}
.scene-wrap,.active-session.focus-mode .scene-wrap{height:190px}
.stage{padding-top:13px;padding-bottom:10px}
.track{margin-bottom:15px}
.quadrant-row{margin-top:9px;margin-bottom:9px}
h1{font-size:25px}
.primary{padding:14px}