:root{--paper:#f7f8fc;--white:#fff;--ink:#253340;--muted:#5e6977;--iris:#5549a6;--line:#dce1eb;--lilac:#eeecf8;--mint:#e6f0ed;--error:#9b2536;font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:var(--iris);text-underline-offset:4px}button,input{font:inherit}button,a,label{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,a:focus-visible,input:focus-visible,.file-label:has(+input:focus-visible){outline:3px solid var(--iris);outline-offset:4px}[hidden]{display:none!important}.skip{position:absolute;top:-60px;left:20px;background:white;padding:12px;z-index:10}.skip:focus{top:12px}.top{max-width:1440px;margin:auto;padding:24px 5%;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;display:flex;align-items:center;color:var(--ink);font-weight:650;font-size:25px;letter-spacing:-1px}.brand>span:last-child{font-weight:400}.brand-icon{font-family:Georgia,serif;font-size:37px;line-height:42px;background:var(--iris);color:white;width:42px;height:42px;text-align:center;border-radius:14px 14px 14px 3px;margin-right:10px}.top nav{display:flex;gap:28px;margin:auto}.top nav a{text-decoration:none;font-size:14px;color:var(--muted);padding:12px 0;white-space:nowrap}.top nav a.selected{color:var(--iris);box-shadow:0 2px 0 var(--iris);font-weight:600}.study-tag{font-size:12px;color:var(--iris);padding:8px 12px;background:var(--lilac);border-radius:20px;white-space:nowrap}main{max-width:1280px;padding:0 40px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;padding:60px 0 38px;gap:24px}h1{font-size:clamp(36px,4.4vw,62px);font-weight:500;letter-spacing:-2.7px;line-height:1.09;margin:0 0 22px}p{line-height:1.65}h2{font-size:18px;font-weight:600;margin:0}h3{font-size:20px;font-weight:600}.intro p{margin:0;font-size:16px;color:var(--muted)}.intro-note{display:flex;align-items:center;gap:26px;padding-right:35px}.intro-note p{font-size:14px}.orbit{width:114px;height:114px;position:relative;border:1px solid #b9b2d9;border-radius:50%;display:block}.orbit:before,.orbit:after{content:"";position:absolute;border:1px solid #b9b2d9;border-radius:50%;inset:14px}.orbit:after{inset:29px;background:var(--lilac)}.orbit i{position:absolute;width:13px;height:13px;background:var(--iris);border:4px solid var(--paper);border-radius:50%;z-index:1;left:15px;top:12px}.orbit i:nth-child(2){left:91px;top:74px;background:#6b9c8a}.orbit i:nth-child(3){left:45px;top:53px;width:23px;height:23px}.workspace{display:grid;grid-template-columns:1.16fr 1fr;gap:24px}.image-panel,.result-panel{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.panel-heading h2{font-size:16px}.panel-heading>span{font-size:11px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropzone{background:var(--paper);border:1px dashed #b9bfd0;border-radius:12px;min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;position:relative}.dropzone.dragging{background:var(--lilac);border-color:var(--iris)}#upload-placeholder svg{color:#8c84b5}#upload-placeholder h3{margin:12px 0 6px}#upload-placeholder p{font-size:13px;max-width:280px;color:var(--muted);margin:0 0 20px}.file-label{color:var(--iris);background:white;border:1px solid #c9c5e4;padding:10px 20px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer}#file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}#upload-help{font-size:11px;color:var(--muted);margin:12px 0 0}#preview{max-width:100%;max-height:260px;object-fit:contain;border-radius:8px;margin-bottom:16px}#upload-error{font-size:13px;color:var(--error)}.image-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.primary,.secondary{border-radius:7px;padding:12px 18px;font-size:13px;font-weight:600;border:1px solid transparent}.primary{background:var(--iris);color:white;flex:1;max-width:300px}.primary span{margin-left:12px}.primary:hover:enabled{background:#413684}.secondary{border-color:var(--line);background:white;color:var(--ink)}.secondary:hover:enabled{background:var(--paper)}.privacy{font-size:11px;text-align:center;color:var(--muted);margin:16px 0 0}.result-panel{display:flex;flex-direction:column}.badge{background:var(--lilac);padding:5px 9px;border-radius:5px;color:var(--iris)!important}#model-status{font-size:12px;color:var(--muted);margin:0 0 8px}#empty-result{margin:auto;padding:15px 28px 30px;text-align:center}#empty-result p{color:var(--muted);font-size:13px;max-width:280px;margin:auto}.result-symbol{font-size:76px;font-weight:300;color:#9d96bf;line-height:1.2}#empty-result h3{font-size:17px;margin:13px 0 8px}.medical-note{background:var(--mint);border-radius:9px;padding:16px 18px;font-size:12px;margin-top:20px}.medical-note strong{color:#31594e}.medical-note p{margin:6px 0 0;color:#456257}.muted{color:var(--muted);font-size:13px}#prediction-name{margin:7px 0 20px;font-size:24px;line-height:1.3}#bars{margin-bottom:22px}.score-row{margin:0 0 11px}.score-label{display:flex;justify-content:space-between;gap:16px;font-size:12px;margin-bottom:5px}.score-label span:first-child{max-width:85%}.score-track{height:5px;background:var(--paper);border-radius:6px;overflow:hidden}.score-fill{background:#aaa3cf;height:100%;border-radius:6px}.score-row:first-child .score-fill{background:var(--iris)}.examples{padding:32px 0 52px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:16px}.section-heading span{font-size:12px;color:var(--muted)}.samples{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.sample{background:transparent;border:0;padding:0;text-align:left;color:var(--ink);font-size:11px;line-height:1.35}.sample img{width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:9px;display:block;margin-bottom:9px;border:2px solid transparent}.sample:hover img,.sample:focus-visible img{border-color:var(--iris)}.sample small{display:block;color:var(--muted);margin-top:3px}.protocol{display:grid;grid-template-columns:1fr 1fr 1.4fr;background:var(--white);border:1px solid var(--line);border-radius:15px;padding:28px;gap:32px}.protocol p{font-size:14px;margin-bottom:0;color:var(--muted)}#experiment-status{font-size:14px;color:var(--iris);margin:28px 0}.table-scroll{overflow:auto;background:white;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}caption{padding:20px;text-align:left;font-weight:600;color:var(--ink)}th,td{padding:16px 20px;border-top:1px solid var(--line);white-space:nowrap}th{font-size:12px;color:var(--muted);font-weight:600}td{font-variant-numeric:tabular-nums}tbody tr:last-child td{border-bottom:0}.research-note{max-width:780px;margin:36px 0 52px}.research-note p{font-size:14px;color:var(--muted)}.dataset-summary{margin-top:24px;background:var(--mint);padding:20px;border-radius:10px;font-size:14px;line-height:1.7}.dataset-summary:empty{display:none}#class-metrics{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}details{border:1px solid var(--line);background:white;padding:18px;border-radius:10px}summary{cursor:pointer;font-weight:600;font-size:14px}details table{font-size:12px;margin-top:16px}details td,details th{padding:9px}.matrix{overflow:auto}.matrix td,.matrix th{padding:8px;text-align:center}.matrix td{background:var(--lilac)}.about-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:70px;padding-bottom:60px}.about-grid h2{margin:24px 0 10px}.about-grid p,.about-grid li{font-size:15px;color:var(--muted);line-height:1.8}.about-grid ul{padding-left:20px}.about-grid aside{background:var(--lilac);padding:24px 30px;border-radius:16px;align-self:start}.about-grid aside h2{margin-top:0}.about-grid aside p,.about-grid aside a{font-size:13px}footer{border-top:1px solid var(--line);padding:24px 5%;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px}footer span:first-child{font-weight:600;color:var(--ink);font-size:15px}@media(max-width:900px){.intro-note{display:none}.top{flex-wrap:wrap;gap:12px}.top nav{order:3;width:100%;justify-content:center}.study-tag{margin-left:auto}.workspace{grid-template-columns:1fr}.samples{grid-template-columns:repeat(4,1fr)}.protocol{grid-template-columns:1fr;gap:20px}#class-metrics{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr;gap:18px}}@media(max-width:520px){main{padding:0 18px}.intro{padding:36px 0 26px}h1{letter-spacing:-1.5px;font-size:39px}.intro p{font-size:14px}.top{padding:16px 18px}.top nav{gap:22px}.top nav a{font-size:12px}.image-panel,.result-panel{padding:18px}.panel-heading h2{font-size:14px}.samples{grid-template-columns:repeat(3,1fr)}.section-heading{align-items:start;flex-direction:column;gap:7px}.dropzone{padding:18px}.image-actions{gap:8px}.primary,.secondary{padding:11px;font-size:12px}.primary span{display:none}.desktop{display:none}footer{flex-wrap:wrap}footer span:nth-child(2){display:none}}
/* DermaLab clinical research identity */
:root{--paper:#f3f8fa;--ink:#173b49;--muted:#526c77;--iris:#087e7c;--line:#d7e5e9;--lilac:#e7f4f2;--mint:#ecf5f7;--error:#a02c3a;background:var(--paper);font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif}.top{max-width:none;background:#fff;padding:20px max(32px,calc((100vw - 1200px)/2));gap:26px}.brand{font-size:25px;letter-spacing:-.9px;gap:11px;line-height:1}.brand>span:last-child{font-weight:650}.brand .brand-light{font-weight:400}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:.2px;color:var(--muted);margin-top:6px}.top nav{gap:28px}.top nav a{padding:13px 3px;font-size:13px}.top nav a.selected{box-shadow:none;background:var(--lilac);padding:13px 16px;border-radius:7px}.language-control{display:flex;align-items:center;gap:7px;color:var(--ink);background:white;border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:12px}.language-control select{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:2px;max-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.intro{padding:42px 0 34px;align-items:center}.intro-copy{max-width:790px}.study-tag{display:inline-flex;align-items:center;gap:7px;background:#e4f2ef;color:#29695e;border:1px solid #cee6de;font-size:11px;font-weight:600;padding:6px 10px;border-radius:5px;margin-bottom:17px}.study-tag i{height:6px;width:6px;background:#22846c;border-radius:50%}h1{font-size:clamp(38px,4.6vw,60px);line-height:1.06;letter-spacing:-2.7px;font-weight:600;white-space:pre-line;margin-bottom:18px;max-width:850px}.intro p{font-size:14px;white-space:pre-line;line-height:1.75}.research-visual{width:315px;flex:0 0 315px;position:relative;margin-right:8px}.research-visual svg{display:block;width:100%}.research-visual>span{display:block;text-align:center;font-size:10px;letter-spacing:.3px;color:#476e76;margin-top:-7px}.workflow{display:flex;align-items:center;gap:12px;margin-top:26px}.workflow>span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;white-space:nowrap}.workflow b{font-size:10px;display:grid;place-items:center;border:1px solid #c4dadc;background:#fff;border-radius:50%;width:21px;height:21px;font-weight:600;color:#176c67}.workflow>i{width:24px;height:1px;background:#bed8db}.workspace{gap:22px;grid-template-columns:1.07fr 1fr}.image-panel,.result-panel{border-radius:12px;padding:25px;box-shadow:0 4px 18px #153f4d04}.heading-with-icon{display:flex;align-items:center;gap:10px;color:#246b73}.heading-with-icon h2{color:var(--ink);font-size:15px}.panel-heading{margin-bottom:22px}.panel-heading>span{font-size:10px}.dropzone{min-height:285px;background:#f8fbfc;border-color:#b4cdd3;border-radius:8px;padding:24px}.dropzone.dragging{background:#e5f3f1}.upload-icon{background:#e6f2f3;border:1px solid #d1e6e7;border-radius:15px;width:64px;height:64px;display:grid;place-items:center;margin:0 auto 20px;color:#258789}#upload-placeholder h3{font-size:16px;font-weight:600;margin:0 0 8px}#upload-placeholder p{font-size:12px;margin:0 auto 20px}.file-label{font-size:12px;border-color:#b8d4d4;color:#116c6c;background:#fff;padding:10px 20px;border-radius:6px}#upload-help{font-size:10px;margin-top:13px}.image-actions{margin-top:18px}.primary{background:#103f50;color:white;max-width:none;display:flex;justify-content:center;align-items:center;gap:14px}.primary:hover:enabled{background:#0e5b67}.primary span{margin:0}.secondary{background:white;font-size:12px}.primary,.secondary{border-radius:6px;padding:13px 18px;font-weight:600}.privacy{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:10px}.privacy svg{flex-shrink:0}.badge{background:#e7f4f2;color:#177364!important;border:1px solid #d3e9e0;border-radius:4px;padding:5px 8px}#model-status{font-size:11px;line-height:1.6;color:#58727b}.result-symbol{height:66px;width:66px;margin:0 auto 22px;display:flex;gap:6px;align-items:center;justify-content:center;border-radius:50%;background:#eff6f8;position:relative}.result-symbol:before{content:"";position:absolute;inset:-8px;border:1px dashed #bed7dd;border-radius:50%}.result-symbol span{display:block;width:5px;height:20px;background:#82b3b5;border-radius:4px}.result-symbol span:nth-child(2){height:32px;background:#3f9496}.result-symbol span:nth-child(3){height:24px}.result-symbol span:nth-child(4){height:14px;background:#9cc8c4}#empty-result{padding:30px 16px}#empty-result h3{font-size:16px;margin-bottom:10px}#empty-result p{font-size:12px;max-width:290px}.medical-note{display:flex;align-items:flex-start;gap:10px;border:1px solid #dbe9ed;background:#f0f6f8;border-radius:7px;margin-top:auto;padding:15px;font-size:11px;color:var(--ink)}.medical-note strong{color:#365b68;font-weight:600}.medical-note p{color:#536f79;margin-top:5px;line-height:1.6}.note-icon{width:15px;height:15px;flex-shrink:0;font-size:10px;border:1px solid #719ca8;border-radius:50%;display:grid;place-items:center;margin-top:2px;font-family:Georgia,serif}.result-panel:has(#result:not([hidden])) .medical-note{margin-top:22px}.score-fill{background:#8cc2bd}.score-row:first-child .score-fill{background:#087e7c}.score-label{font-size:11px}.score-track{background:#edf4f5}#prediction-name{font-size:24px;font-weight:600;letter-spacing:-.7px}#preview{max-height:260px}#result{padding-top:10px}.section-heading h2{font-size:18px;letter-spacing:-.3px}.section-heading p{font-size:12px;color:var(--muted);margin:7px 0 0}.section-heading>span{font-size:10px;border:1px solid var(--line);border-radius:5px;padding:7px 10px}.examples{padding:34px 0 46px}.samples{gap:14px}.sample{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 7px 12px;overflow:hidden}.sample img{border-radius:5px;margin-bottom:10px;aspect-ratio:1.45}.sample>span{font-size:11px;font-weight:600;display:block;padding:0 4px}.sample>small{font-size:9px;line-height:1.5;padding:2px 4px 0;color:var(--muted)}.protocol{border-radius:10px}.protocol-label{display:block;font-size:11px;color:#397979;font-weight:600;margin-bottom:10px}.protocol h2{font-size:21px;letter-spacing:-.5px}.protocol p{font-size:13px}.protocol>div:not(:last-child){border-right:1px solid var(--line);padding-right:20px}.dataset-summary{background:#eaf4f3;color:#355f61;border:1px solid #d5e8e5}.matrix td{background:#eaf5f3}.about-grid aside{background:#e8f2f5;border:1px solid #d6e6eb;border-radius:12px}.research-note p{font-size:13px}.footer-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:600}footer{background:white;align-items:center;font-size:10px;padding:22px max(32px,calc((100vw - 1200px)/2))}main:focus{outline:none}@media(max-width:1080px){.top{padding:18px 28px;gap:16px}.top nav{gap:15px}.top nav a{font-size:12px}.research-visual{width:260px;flex-basis:260px}.workflow{gap:8px}.workflow>i{width:16px}}@media(max-width:900px){.top{flex-wrap:wrap}.top nav{order:3;gap:18px}.language-control{margin-left:auto}.research-visual{display:none}.workspace{grid-template-columns:1fr}.intro{padding-top:32px}.protocol>div:not(:last-child){border-right:0;border-bottom:1px solid var(--line);padding:0 0 20px}.samples{grid-template-columns:repeat(4,1fr)}.medical-note{margin-top:22px}#empty-result{padding:38px 10px}}@media(max-width:520px){.top{padding:16px 18px;gap:14px}.brand{font-size:22px}.brand img{width:39px;height:39px}.brand small{font-size:9px}.language-control{padding:7px;font-size:11px}.language-control svg{display:none}.top nav{justify-content:space-between;gap:9px}.top nav a{font-size:11px;padding:10px 0}.top nav a.selected{padding:10px}.intro{padding:28px 0}.study-tag{font-size:10px;margin-bottom:16px}h1{font-size:40px;letter-spacing:-1.8px}.intro p{font-size:12px;white-space:normal}.workflow{gap:7px;flex-wrap:wrap;margin-top:22px}.workflow>span{font-size:9px;gap:5px}.workflow b{width:18px;height:18px;font-size:9px}.workflow>i{width:10px}.image-panel,.result-panel{padding:18px}.heading-with-icon h2{font-size:14px}.dropzone{padding:25px 14px;min-height:260px}#upload-placeholder h3{font-size:14px}.primary span{display:inline}.primary,.secondary{font-size:12px;padding:12px}.privacy{font-size:9px;align-items:flex-start}.privacy svg{width:12px}.section-heading{gap:12px}.samples{grid-template-columns:repeat(3,1fr);gap:9px}.sample>small{font-size:8px}.sample{padding:5px 5px 10px}.section-heading h2{font-size:17px}.section-heading p{font-size:11px}footer{padding:20px 18px}.about-grid aside{padding:24px}.about-grid p,.about-grid li{font-size:14px}}

#upload-placeholder .upload-icon svg{color:#258789}
