:root{--ink:#263a4c;--muted:#697681;--accent:#546e80;--line:#dce2e5;--paper:#f5f6f4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #546e80;outline-offset:4px}button{touch-action:manipulation}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:11px;font-weight:650;text-decoration:none;color:inherit;font-size:18px}.brand svg{width:31px;height:23px;fill:currentColor}nav{display:flex;padding:4px;background:#e7ecee;border-radius:28px;gap:3px}nav button{border:0;padding:10px 26px;border-radius:24px;background:transparent;font-size:13px}nav button[aria-pressed=true]{background:white;box-shadow:0 2px 6px #263a4c0c}.header-note{font-size:11px;letter-spacing:1px;color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 345px;min-height:calc(100svh - 84px);max-width:1800px;margin:auto}.viewer-panel{position:sticky;top:0;height:calc(100svh - 84px);min-height:660px;overflow:hidden;background:radial-gradient(ellipse at 47% 48%,#fffaf0 0%,#ecece5 60%,#e4e8e6 100%)}.viewer-panel:after{content:"";position:absolute;bottom:17%;left:24%;width:55%;height:8%;background:radial-gradient(ellipse,#38433e22,transparent 70%);pointer-events:none}.intro{position:absolute;top:38px;left:5.5%;z-index:2;pointer-events:none}.intro>span{font-size:10px;letter-spacing:3px;color:#7d878b}h1{font-family:"Noto Serif SC",SimSun,serif;font-weight:500;font-size:42px;letter-spacing:-1px;line-height:1.4;margin:17px 0 12px}.intro p{font-size:12px;line-height:1.9;color:var(--muted);max-width:310px}#viewer{position:absolute;inset:190px 0 78px;z-index:1;touch-action:none}#viewer canvas{display:block;width:100%;height:100%;outline:none}#loading{position:absolute;top:56%;width:100%;text-align:center;z-index:5;color:var(--muted);font-size:13px;pointer-events:none}#loading[hidden]{display:none}#retry{pointer-events:auto;margin:15px auto;display:block;border:1px solid var(--line);border-radius:20px;padding:8px 15px;background:#fff}#retry[hidden]{display:none}.view-tools{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px;border:1px solid #d6ddda;background:#ffffffc9;border-radius:30px;z-index:3;white-space:nowrap}.view-tools button{border:0;background:transparent;border-radius:20px;padding:9px 16px;font-size:11px}.view-tools button:hover{background:#e8edf0}.view-tools span{height:16px;border-left:1px solid var(--line)}.viewer-foot{position:absolute;bottom:23px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);z-index:2}aside{padding:30px 26px 22px;background:#fbfcfa;border-left:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:12px}.section-heading>span:last-child,output{font-size:10px;color:#80909a}#choices{display:grid;gap:9px;margin-bottom:25px}.choice{display:flex;align-items:center;gap:14px;position:relative;text-align:left;background:transparent;border:1px solid var(--line);border-radius:12px;padding:13px 14px;min-height:64px;width:100%}.choice[aria-pressed=true]{background:#eaf0f1;border-color:#8dabb8}.choice .number{font-size:12px;color:#8a9aa3;min-width:22px}.choice strong{font-size:13px;font-weight:550;display:block}.choice small{display:block;font-size:10px;margin-top:5px;color:var(--muted)}.choice[aria-pressed=true]:after{content:"✓";margin-left:auto;font-size:13px}.swatches{display:flex;gap:14px;padding:3px 0 8px}.swatches button{width:25px;height:25px;border-radius:50%;border:3px solid #fbfcfa;background:var(--swatch);outline:1px solid transparent}.swatches button[aria-pressed=true]{outline-color:var(--accent)}#colors{margin-bottom:24px}#colors[hidden]{display:none}.range-section{border-top:1px solid var(--line);padding:19px 0 21px}.range-section .section-heading{margin-bottom:8px}input[type=range]{accent-color:var(--accent);width:100%;height:20px;cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#849099}.detail{border-top:1px solid var(--line);padding-top:17px}.detail h2{font-size:15px;font-weight:550;margin:0 0 10px}.detail p{font-size:11px;line-height:1.95;color:var(--muted);margin:0}dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0}dt{font-size:9px;color:#8a949a;margin-bottom:6px}dd{font-size:11px;line-height:1.65;margin:0}.clinical{font-size:10px;line-height:1.8;color:#8a949a;margin:18px 0 10px}body[data-mode=restoration] h1{font-size:38px}body[data-mode=restoration] .choice{min-height:57px;padding:10px 14px}body[data-mode=restoration] #choices{gap:7px;margin-bottom:20px}@media(min-width:1450px){main{grid-template-columns:minmax(0,1fr) 390px}aside{padding:35px}.intro{top:52px}h1{font-size:50px}}@media(max-width:1000px){.header-note{display:none}main{grid-template-columns:minmax(0,1fr) 310px}aside{padding:24px 20px}h1{font-size:34px}.intro p{max-width:230px}#viewer{inset:175px 0 75px}}@media(max-width:720px){header{height:auto;min-height:104px;flex-wrap:wrap;justify-content:center;padding:17px 20px 13px;gap:14px}.brand{font-size:16px}.brand svg{width:25px}nav{width:100%;justify-content:center}nav button{flex:1;padding:8px 15px}main{display:block}.viewer-panel{position:relative;min-height:0;height:570px}.intro{top:23px;left:6%}h1,body[data-mode=restoration] h1{font-size:29px;line-height:1.3;margin:10px 0 6px}.intro p{font-size:11px;max-width:90%;margin-top:7px}.intro h1 br{display:none}#viewer{inset:122px 0 75px}.view-tools{bottom:50px;gap:1px}.view-tools button{padding:8px 12px;font-size:10px}.viewer-foot{bottom:18px;font-size:9px}aside{border-left:0;border-top:1px solid var(--line);padding:24px 6%}#choices{grid-template-columns:1fr 1fr;gap:9px}.choice{padding:12px 10px;gap:8px;min-height:68px}.choice .number{font-size:10px;min-width:13px}.choice strong{font-size:12px}.choice small{font-size:9px}.choice[aria-pressed=true]:after{display:none}.detail p{font-size:12px}.clinical{font-size:11px}body[data-mode=restoration] .choice{min-height:66px;padding:11px 10px}}

@media(max-width:720px){.viewer-panel{position:sticky;top:0;z-index:2;height:470px}.intro{top:18px}#viewer{inset:113px 0 68px}.view-tools{bottom:41px}.viewer-foot{bottom:13px}}
@media(max-width:720px) and (max-height:760px){.viewer-panel{height:400px}.intro h1{font-size:25px}.intro p{font-size:10px}#viewer{top:103px}}
.view-tools label{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:11px;cursor:pointer}.view-tools label[hidden]{display:none}.view-tools input{accent-color:var(--accent);margin:0}@media(max-width:720px){.view-tools label{font-size:10px;padding:4px}.view-tools:has(#soft-tissue-control:not([hidden])) button{padding:8px 9px}}

.appliance-thumb{width:110px;height:68px;object-fit:contain;pointer-events:none;flex-shrink:0}.appliance-thumb[src=""]{visibility:hidden}body[data-mode=ortho] .choice{padding:9px 10px;gap:8px;min-height:90px;user-select:none}body[data-mode=ortho] .choice:not([data-choice=bare]){cursor:grab;touch-action:none}body[data-mode=ortho] .choice[aria-pressed=true]:after{display:none}body[data-mode=ortho] .choice small{font-size:9px;line-height:1.6}#try-status{position:absolute;bottom:123px;left:50%;transform:translateX(-50%);margin:0;font-size:11px;color:var(--accent);z-index:3;white-space:nowrap;pointer-events:none;background:#fffffff0;padding:7px 13px;border-radius:20px}#try-status[hidden]{display:none}#viewer.drop-ready{outline:2px solid #8ba9ab55;outline-offset:-12px;border-radius:60%}#drag-preview{position:fixed;width:190px;height:110px;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;z-index:100;filter:drop-shadow(0 6px 6px #263a4c33)}#drag-preview[hidden]{display:none}body.set-dragging,body.set-dragging .choice{cursor:grabbing!important}@media(max-width:1000px){.appliance-thumb{width:95px}body[data-mode=ortho] .choice strong{font-size:12px}}@media(max-width:720px){.appliance-thumb{width:70px;height:56px}body[data-mode=ortho] .choice{padding:6px;gap:5px;min-height:78px}body[data-mode=ortho] .choice strong{font-size:10px}body[data-mode=ortho] .choice small{font-size:8px}#try-status{bottom:88px;font-size:9px;padding:5px 9px}#drag-preview{width:150px;height:88px}}
html{scrollbar-gutter:stable}
.tradeoffs{grid-template-columns:1fr;gap:15px;padding:16px 0;border-top:1px solid var(--line)}.tradeoffs dt{font-size:11px;font-weight:550;color:var(--ink)}.tradeoffs dd{line-height:1.85;color:var(--muted)}
@media(min-width:721px){body[data-mode=ortho] .choice{min-height:68px;padding:6px 9px}.appliance-thumb{width:86px;height:48px}body[data-mode=ortho] #choices{gap:7px;margin-bottom:20px}}
footer{padding:44px 4% 24px;background:var(--ink);color:#edf2f6}footer a{color:inherit;text-decoration:none}.footer-brand{display:block;font-size:20px;letter-spacing:1px}.footer-brand span{display:block;font-size:11px;color:#b1c0cc;margin-top:10px;letter-spacing:2px}.footer-links{display:flex;flex-wrap:wrap;gap:24px;margin:28px 0;font-size:11px;color:#d5dfe7}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #536879;padding-top:20px;font-size:10px;color:#b1c0cc;line-height:1.8}.footer-bottom p{margin:0}@media(max-width:720px){footer{padding:36px 6% 22px}.footer-links{gap:18px;font-size:10px}.footer-bottom{display:block}.footer-bottom p+p{margin-top:8px}}