@font-face{font-family:Metropolis;src:url('/assets/clarity/fonts/Metropolis-Regular.woff2');font-weight:400;font-display:swap}
@font-face{font-family:Metropolis;src:url('/assets/clarity/fonts/Metropolis-SemiBold.woff2');font-weight:600;font-display:swap}
@font-face{font-family:Metropolis;src:url('/assets/clarity/fonts/Metropolis-Bold.woff2');font-weight:700;font-display:swap}
:root{font-family:Metropolis,system-ui,sans-serif;color-scheme:light;--bg:#faf9f6;--paper:#fff;--text:#292637;--muted:#716c7d;--line:#e9e5ee;--accent:#7053c1;--hover:#5d41ab;--wash:#f0ebfa;--soft:#f5f2ed;--shadow:0 16px 50px #30203b08;--art:#f1edf6;color:var(--text);background:var(--bg)}
:root[data-theme=dark]{color-scheme:dark;--bg:#17171f;--paper:#20202a;--text:#eeeaf6;--muted:#b7b0c6;--line:#373240;--accent:#b59aef;--hover:#c5aafa;--wash:#342b49;--soft:#29262f;--art:#322b42;--shadow:none}
*{box-sizing:border-box}body{margin:0;font-size:14px;line-height:1.6}button,input{font:inherit}button,a,label{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header{height:80px;position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:0 32px}.brand{display:flex;align-items:center;font-size:22px;letter-spacing:-.8px;font-weight:400}.brand>span:last-child{font-weight:700}.brand-symbol{color:var(--accent);font-size:38px;margin-right:10px;line-height:1}.edition{font-size:11px;border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:3px 10px}.header-actions{margin-left:auto;display:flex;gap:12px}.header-actions button{border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12px}#theme{font-size:19px;padding:3px 12px}#sidebar{position:fixed;top:80px;bottom:0;left:0;width:244px;background:var(--paper);border-right:1px solid var(--line);padding:32px 16px 65px;display:flex;flex-direction:column;overflow:auto;z-index:25}.nav-caption{font-size:10px;letter-spacing:1.6px;color:var(--muted);padding:0 16px;margin:0 0 20px}nav{display:flex;flex-direction:column;gap:8px}nav a{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:10px;color:var(--muted);font-size:13px;font-weight:600}nav a.active{background:var(--wash);color:var(--accent)}nav a:hover{background:var(--soft)}nav svg{width:21px;height:21px;flex:none}.sidebar-bottom{margin-top:auto;padding:35px 15px 0;font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}.small-dot{height:6px;width:6px;background:#77a38d;border-radius:50%;flex:none}main{margin-left:244px;padding:48px clamp(24px,4.5vw,80px) 80px;max-width:1720px;min-height:calc(100vh - 80px)}.eyebrow{font-size:11px;color:var(--accent);letter-spacing:1.8px;text-transform:uppercase;font-weight:600;margin:0 0 14px}h1{font-size:clamp(30px,3.5vw,48px);line-height:1.16;letter-spacing:-1.8px;font-weight:600;margin:0 0 18px;max-width:800px}.intro{color:var(--muted);font-size:16px;line-height:1.8;max-width:670px;margin:0}.task-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:38px}.upload{position:relative;border:1.5px dashed #c9bbdf;border-radius:20px;background:var(--paper);min-height:298px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;transition:background .2s,border-color .2s;box-shadow:var(--shadow)}.upload.drag{background:var(--wash);border-color:var(--accent)}.upload-icon{color:var(--accent);background:var(--wash);height:54px;width:54px;padding:14px;border-radius:16px;margin-bottom:14px}.upload h2{font-size:18px;margin:0 0 7px;font-weight:600}.upload p{font-size:12px;color:var(--muted);margin:0 0 18px}.primary{display:inline-flex;justify-content:center;align-items:center;gap:10px;color:#fff;background:#7053c1;border-radius:10px;padding:13px 25px;font-weight:600;font-size:13px;cursor:pointer}.primary:hover{background:#5d41ab}.file-input{position:absolute;width:1px;height:1px;opacity:0}.file-input:focus-visible+label{outline:3px solid var(--accent);outline-offset:4px}.formats{display:block;font-size:10px;color:var(--muted);margin-top:16px}.privacy{font-size:11px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0}.privacy svg{width:13px;height:13px}.illustration{margin:0;position:relative}.illustration img{display:block;width:100%;max-height:350px;object-fit:contain}.illustration figcaption{text-align:center;color:var(--muted);font-size:10px;margin-top:12px}.steps{display:flex;justify-content:space-between;gap:20px;max-width:740px;margin:42px auto 0;padding-top:25px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.steps span{display:flex;align-items:center;gap:10px}.steps b{color:var(--accent);background:var(--wash);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600}.signature{position:fixed;right:18px;bottom:12px;color:var(--muted);font-size:10px;background:var(--bg);padding:4px 8px;z-index:20}.signature strong{font-weight:600}.selected-preview{max-height:210px;width:100%;object-fit:contain;border-radius:10px;margin-bottom:15px}.filename{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted);margin-bottom:10px}.actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.text-button{font-size:12px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.prompt{margin:16px 0;display:block;font-size:12px}.prompt input{display:block;width:100%;margin-top:8px;padding:11px;border:1px solid var(--line);background:var(--paper);color:var(--text);border-radius:8px}.result{margin-top:32px;background:var(--paper);padding:32px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.result h2{font-size:25px;letter-spacing:-.6px;margin:8px 0 12px}.result p{color:var(--muted);max-width:780px;margin:0 0 16px}.result-kicker{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:35px 0 12px}.scale span{height:10px;border-radius:3px;position:relative;background:var(--segment)}.scale span.selected:before{content:'';position:absolute;left:50%;top:-17px;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--text)}.scale span.selected:after{content:'';position:absolute;inset:-4px;border:1px solid var(--text);border-radius:6px}.scale-labels{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted)}.scale-note{font-size:11px!important;margin-top:25px!important}.result-text{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)!important;font-size:16px;line-height:1.9}.note{font-size:12px!important}.error{border-left:3px solid #c27662;background:var(--soft);padding:16px;border-radius:6px}.spinner{display:inline-block;border:2px solid var(--line);border-top-color:var(--accent);width:18px;height:18px;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.result canvas{max-width:100%;max-height:500px;object-fit:contain;display:block;margin:20px auto}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{padding:6px 12px;background:var(--wash);border-radius:7px;font-size:12px}.views{display:grid;grid-template-columns:1fr 1fr;gap:20px}.views figure{margin:0}.views img{width:100%;max-height:280px;object-fit:contain;background:var(--soft);border-radius:10px}.views figcaption{font-size:12px;margin-top:10px}details{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;color:var(--accent);font-size:12px}dl{display:grid;grid-template-columns:1fr 2fr;gap:10px;font-size:12px}dd{margin:0;overflow-wrap:anywhere}dt{color:var(--muted)}.skip{position:fixed;left:10px;top:-100px;z-index:50;background:var(--paper);padding:10px}.skip:focus{top:10px}#menu{display:none}#scrim{display:none}main:focus{outline:none}
@media(min-width:1500px){.task-grid{gap:65px}.upload{min-height:345px}}
@media(max-width:1100px){#sidebar{width:210px}main{margin-left:210px;padding:36px 28px 70px}.task-grid{gap:20px}.brand{font-size:20px}header{padding:0 24px}}
@media(max-width:850px){.task-grid{grid-template-columns:1fr}.illustration{order:-1;max-width:360px;margin:auto;width:100%}.illustration img{max-height:210px}.illustration figcaption{display:none}.task-grid{margin-top:24px}.steps{margin-top:28px}h1{font-size:34px}.intro{font-size:14px}}
@media(max-width:640px){header{height:66px;gap:12px;padding:0 16px}.brand{font-size:19px}.brand-symbol{font-size:30px}.edition{display:none}#menu{display:block;font-size:20px;padding:2px}#sidebar{top:66px;width:244px;transform:translateX(-100%);visibility:hidden}body.menu-open #sidebar{transform:none;visibility:visible}body.menu-open #scrim{display:block;position:fixed;inset:66px 0 0;background:#201a3644;z-index:24;width:100%;height:100%}main{margin-left:0;padding:28px 20px 70px}.header-actions{gap:6px}.header-actions button{padding:5px 8px}h1{font-size:32px;letter-spacing:-1px}.steps{gap:10px;font-size:10px}.steps span{gap:6px}.steps b{flex:none;width:22px;height:22px}.result{padding:22px}.result h2{font-size:22px}.views{grid-template-columns:1fr}.scale-labels{font-size:9px}.upload{padding:25px 20px;min-height:270px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.edition,.sidebar-bottom,figure.illustration figcaption{display:none!important}

.function-meta{font-size:.82rem;color:var(--muted);margin:18px 0 0}.animal-result h2{font-size:clamp(2.6rem,7vw,4.5rem);margin:.2rem 0}.animal-result h3{font-size:clamp(1.4rem,3vw,2rem);margin:.2rem 0 1rem}.animal-breed-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:1.5rem 0 .2rem}

.published-metric{font-size:.76rem;color:var(--muted);margin:5px 0 0}

/* Desktop readability across commercial tool results and navigation. */
@media (min-width: 851px) {
  #sidebar nav a { font-size: 15px; }
  .result p { font-size: 16px; line-height: 1.75; }
  .result-kicker { font-size: 11px; }
  .scale-labels { font-size: 12px; }
  .result .scale-note, .result .note { font-size: 14px !important; }
  .result .result-text { font-size: 18px; }
  .result .chips span, .result .text-button,
  .result .animal-breed-label { font-size: 14px; }
}

/* Improve the readability of the AI signal scale. */
.scale span { height: 16px; border-radius: 4px; }
.scale-labels { font-size: 13px; line-height: 1.5; }
@media (min-width: 851px) {
  .scale span { height: 18px; }
  .scale-labels { font-size: 15px; }
}
