:root { --ink:#28251f; --muted:#766f64; --paper:#fffaf2; --cream:#f6eddd; --orange:#f47b44; --orange-soft:#ffd9be; --purple:#7357a6; --purple-soft:#ded3f1; --green:#4d7a63; --line:#ded4c5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Gowun Dodum",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.noise { position:fixed; inset:0; z-index:10; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.site-header { max-width:1200px; height:82px; margin:auto; padding:0 30px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; }
.brand-icon { width:34px; height:34px; display:grid; place-items:center; color:white; background:var(--orange); border-radius:50% 50% 46% 20%; font:900 17px Nunito,sans-serif; transform:rotate(-5deg); }
.model-badge { display:flex; align-items:center; gap:7px; color:var(--green); font:800 10px Nunito,sans-serif; letter-spacing:.13em; }
.model-badge i { width:7px; height:7px; background:#5ca276; border-radius:50%; box-shadow:0 0 0 4px #dcebdd; animation:pulse 2s infinite; }
main { overflow:hidden; }
.hero { max-width:1200px; min-height:580px; margin:auto; padding:80px 50px 70px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; }
.eyebrow,.section-number { margin:0 0 20px; color:var(--orange); font:900 11px Nunito,sans-serif; letter-spacing:.2em; }
h1 { margin:0; font-size:clamp(46px,6.2vw,78px); line-height:1.16; letter-spacing:-.065em; font-weight:400; }
h1 em { color:var(--orange); font-style:normal; position:relative; }
h1 em::after { content:""; position:absolute; left:1%; right:0; bottom:-8px; height:8px; border-top:3px solid var(--orange); border-radius:50%; transform:rotate(-1deg); }
.hero-description { margin:34px 0 28px; color:var(--muted); line-height:1.8; font-size:16px; }
.mini-features { display:flex; flex-wrap:wrap; gap:18px; color:var(--green); font-size:12px; }
.animal-doodle { height:400px; position:relative; display:flex; align-items:center; justify-content:center; gap:8px; }
.animal-doodle::before { content:""; position:absolute; width:315px; height:315px; background:var(--cream); border-radius:43% 57% 58% 42% / 46% 40% 60% 54%; transform:rotate(7deg); }
.dog-face,.cat-face { position:relative; z-index:2; font-size:108px; filter:drop-shadow(0 12px 4px rgba(77,56,32,.08)); animation:float 3.5s ease-in-out infinite; }
.cat-face { margin-top:65px; animation-delay:-1.5s; }
.versus { position:absolute; z-index:3; width:42px; height:42px; display:grid; place-items:center; color:white; background:var(--purple); border:4px solid var(--paper); border-radius:50%; font:900 10px Nunito,sans-serif; }
.orbit { position:absolute; border:1px dashed #d2bca1; border-radius:50%; }
.orbit-one { width:370px; height:260px; transform:rotate(22deg); }
.orbit-two { width:270px; height:390px; transform:rotate(-45deg); }
.lab-section { padding:85px max(24px,calc((100vw - 1100px)/2)) 100px; background:#f3eadb; }
.lab-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:35px; }
.lab-heading h2,.how-it-works h2 { margin:0; font-size:clamp(28px,3vw,40px); font-weight:400; letter-spacing:-.045em; }
.lab-heading>p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; text-align:right; }
.analyzer { display:grid; grid-template-columns:1fr 1fr; min-height:570px; border:1px solid #d8cbb8; background:var(--paper); box-shadow:8px 8px 0 #e1d4c1; }
.input-card,.result-card { padding:36px; }
.input-card { border-right:1px solid #d8cbb8; }
.media-stage { height:390px; position:relative; overflow:hidden; display:grid; place-items:center; background:#eee3d2; border:1px dashed #cdbda6; }
.empty-state { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); }
.empty-state strong { color:var(--ink); font-size:17px; font-weight:400; }
.empty-state span { font-size:11px; }
.upload-icon { width:64px; height:64px; margin-bottom:10px; display:grid; place-items:center; color:var(--orange); background:var(--paper); border-radius:50%; font:700 30px Nunito,sans-serif; box-shadow:0 6px 18px rgba(91,70,45,.08); }
#imagePreview,#webcamContainer,#webcamContainer canvas { width:100%; height:100%; object-fit:cover; }
#webcamContainer canvas { display:block; }
.scan-line { position:absolute; z-index:3; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--orange),transparent); box-shadow:0 0 12px var(--orange); animation:scan 2.4s ease-in-out infinite; }
.input-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.button { height:52px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--ink); cursor:pointer; transition:.2s; }
.button b { font:700 20px Nunito,sans-serif; }
.button.primary { color:white; background:var(--ink); }
.button.secondary { color:var(--ink); background:transparent; }
.button:hover { transform:translateY(-2px); box-shadow:3px 3px 0 var(--orange); }
.privacy-note { margin:12px 0 0; color:#898075; text-align:center; font-size:10px; }
.result-card { display:grid; place-items:center; position:relative; text-align:center; }
.result-placeholder,.loading-state,.result-content { width:100%; }
.result-placeholder .paw { display:block; margin-bottom:15px; filter:grayscale(1); opacity:.3; font-size:55px; }
.result-placeholder strong,.loading-state strong { display:block; margin-bottom:8px; font-size:18px; font-weight:400; }
.result-placeholder p { margin:0; color:var(--muted); line-height:1.6; font-size:13px; }
.loader { width:58px; height:58px; margin:0 auto 22px; border:3px solid var(--orange-soft); border-top-color:var(--orange); border-radius:50%; animation:spin .8s linear infinite; }
.loading-state span { color:var(--muted); font-size:12px; }
.result-label { margin:0 0 5px; color:var(--muted); font-size:12px; }
.result-emoji { font-size:72px; animation:pop .45s ease-out; }
.result-content h3 { margin:3px 0 10px; color:var(--orange); font-size:29px; font-weight:400; }
.result-message { max-width:380px; margin:0 auto 30px; color:var(--muted); line-height:1.65; font-size:13px; }
.scores { display:flex; flex-direction:column; gap:18px; text-align:left; }
.score-row>div:first-child { display:flex; justify-content:space-between; margin-bottom:7px; font-size:12px; }
.score-row strong { font-family:Nunito,sans-serif; }
.score-track { height:9px; overflow:hidden; background:#e8e0d5; border-radius:10px; }
.score-track span { display:block; width:0; height:100%; border-radius:10px; transition:width .55s ease; }
.dog-score .score-track span { background:var(--orange); }
.cat-score .score-track span { background:var(--purple); }
.retry-button { margin-top:28px; padding:8px 0; color:var(--muted); background:none; border:0; border-bottom:1px solid #aaa094; cursor:pointer; font-size:12px; }
.error-message { max-width:330px; margin:auto; color:#aa3d2a; line-height:1.6; }
.how-it-works { max-width:1100px; margin:auto; padding:100px 20px 120px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); margin-top:45px; border-top:1px solid var(--line); }
.steps article { min-height:135px; padding:28px 25px 20px 0; display:flex; gap:18px; border-right:1px solid var(--line); }
.steps article:not(:first-child) { padding-left:25px; }
.steps article:last-child { border-right:0; }
.steps b { color:var(--orange); font:900 13px Nunito,sans-serif; }
.steps strong { font-size:17px; font-weight:400; }
.steps p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
footer { min-height:100px; padding:26px max(25px,calc((100vw - 1140px)/2)); display:flex; align-items:center; justify-content:space-between; gap:25px; color:#898075; background:#292620; font-size:10px; }
footer .brand { color:white; } footer p { text-align:center; }
[hidden] { display:none!important; }
@keyframes float { 50% { transform:translateY(-12px) rotate(2deg); } }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(92,162,118,.1); } }
@keyframes scan { 0%,100% { top:3%; opacity:.3; } 50% { top:96%; opacity:1; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pop { 0% { transform:scale(.7); opacity:0; } 70% { transform:scale(1.08); } }
@media(max-width:800px){
  .hero { grid-template-columns:1fr; padding:65px 25px 45px; text-align:center; }
  .mini-features { justify-content:center; }
  .animal-doodle { height:330px; }
  .lab-heading { align-items:start; flex-direction:column; gap:15px; }
  .lab-heading>p { text-align:left; }
  .analyzer { grid-template-columns:1fr; }
  .input-card { border-right:0; border-bottom:1px solid #d8cbb8; }
  .result-card { min-height:480px; }
  .steps { grid-template-columns:1fr; }
  .steps article,.steps article:not(:first-child) { padding:23px 0; border-right:0; border-bottom:1px solid var(--line); }
}
@media(max-width:520px){
  .site-header { height:68px; padding:0 18px; }
  .model-badge { font-size:8px; }
  .hero { min-height:auto; padding-top:55px; }
  h1 { font-size:42px; }
  .hero-description br { display:none; }
  .animal-doodle { transform:scale(.82); margin:-10px -40px; }
  .lab-section { padding:65px 15px 75px; }
  .input-card,.result-card { padding:18px; }
  .media-stage { height:320px; }
  .input-actions { grid-template-columns:1fr; }
  .result-card { min-height:430px; }
  .how-it-works { padding:75px 22px; }
  footer { flex-direction:column; text-align:center; padding:30px 20px; }
}
@media(prefers-reduced-motion:reduce){ * { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }