[data-visual="percepcion"]{max-width:1200px}.perception-entry{max-width:1000px;margin:auto}.perception-title{position:relative;margin-bottom:25px}.perception-title h1{font-size:clamp(40px,5vw,66px);margin:16px 0;line-height:1.03}.perception-title p{font-size:18px;color:#d3dfc4;line-height:1.5;margin:0}.viewfinder-closed{position:relative;padding:22px 26px;min-height:300px;border:1px solid #94ac7177;border-radius:23px;background:radial-gradient(ellipse at 50% 75%,#607c4044,transparent 60%),repeating-linear-gradient(0deg,transparent 0 54px,#ccdfba08 55px 56px),repeating-linear-gradient(90deg,transparent 0 54px,#ccdfba08 55px 56px),linear-gradient(135deg,#1f493b,#061f1a);box-shadow:inset 0 0 0 7px #16392d,0 12px 30px #001a1633;display:flex;flex-direction:column;justify-content:space-between;gap:20px;overflow:hidden}.viewfinder-closed:before,.viewfinder-closed:after{content:"";position:absolute;inset:58px 40px;pointer-events:none;border:1px solid #cadf9b33;border-radius:8px}.viewfinder-closed:after{inset:76px 58px;border-color:#cadf9b12}.viewfinder-meta{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.17em;color:#c6d6b3;z-index:1}.viewfinder-meta span:last-child{color:var(--lime)}.viewfinder-center{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;padding:10px}.viewfinder-center strong{font-size:clamp(23px,3vw,32px);font-weight:650;line-height:1.2;letter-spacing:-.035em}.viewfinder-center small{font-size:9px;letter-spacing:.16em;color:#bacc9e}.focus-symbol{width:42px;height:42px;border:2px solid #c4e76a;border-radius:50%;box-shadow:0 0 0 7px #c4e76a0e;position:relative}.focus-symbol:after{content:"";position:absolute;inset:12px;background:#c4e76a;border-radius:50%}.perception-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;background:#f5f0dd;color:#153c2d;border-radius:18px;margin-top:19px;box-shadow:0 5px 0 #001e1b44}.perception-controls fieldset{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}.perception-controls legend{font-size:10px;font-weight:750;letter-spacing:.07em;margin-bottom:9px}.perception-controls label{display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid #b5c39c;border-radius:10px;font-size:13px;cursor:pointer;min-height:44px}.perception-controls label:has(input:checked){background:#deebbc;border-color:#567844}.perception-controls input{accent-color:#345f3a;margin:0;width:16px;height:16px}.perception-controls .primary{font-size:12px;min-height:52px;box-shadow:0 3px 0 #96b34f}.perception-secondary{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;font-size:12px;color:#d1ddbf;padding:20px 0}.perception-secondary button{background:none;color:#e6eddb;border:0;padding:8px;font-size:12px}.perception-secondary details{margin-left:auto;max-width:550px}.perception-secondary summary{cursor:pointer;text-decoration:underline;min-height:35px}.perception-secondary details p{line-height:1.7}
[data-visual="percepcion"] .cafe-photo{border:1px solid #a6bc7e88;border-radius:20px;padding:9px;background:#173e30;box-shadow:0 12px 0 #041c14,0 22px 40px #001c1644;overflow:hidden}
/* Evidence markers are positioned against the original image frame, without padding. */
[data-visual="percepcion"] .visual-review .cafe-photo{padding:0}
[data-visual="percepcion"] .cafe-photo>img{border-radius:12px}
[data-visual="percepcion"] .exposure-head{max-width:950px;margin:0 auto 22px}[data-visual="percepcion"] .exposure-head h1{font-size:clamp(26px,3.2vw,40px);margin:12px 0}[data-visual="percepcion"] .exposure-head+#seconds{padding:15px}[data-visual="percepcion"] #seconds{border:1px solid #a5bc6d77;padding:14px;border-radius:16px;text-align:center;min-width:80px;background:#244d38;font-size:32px}
[data-visual="percepcion"]>.cafe-photo{max-width:min(950px, calc(66vh * 1.5));margin:auto}[data-visual="percepcion"] .exposure-footer{max-width:950px;margin:25px auto}[data-visual="percepcion"] .exposure-footer p{font-size:13px}
[data-visual="percepcion"] .question-banner{background:#153d2e;border-color:#a6bc7e66;border-radius:18px}[data-visual="percepcion"] .answer-board{padding:20px;border-radius:22px;background:#12372c;border:1px solid #8b9f6755;box-shadow:0 15px 30px #001a1633}[data-visual="percepcion"] .answer-piece{border-radius:16px;box-shadow:0 5px 0 #7b9064;min-height:155px}[data-visual="percepcion"] .answer-piece[aria-pressed=true]{outline-width:2px;outline-offset:2px}[data-visual="percepcion"] .people-count svg{width:20px;height:32px}
[data-visual="percepcion"] .result-hero{background:transparent;border:0;padding:10px 0 30px;box-shadow:none}[data-visual="percepcion"] .result-hero h1{font-size:clamp(34px,4vw,52px)}[data-visual="percepcion"] .score{background:#133b2d;border:1px solid #a4bb7977;padding:22px;border-radius:24px}[data-visual="percepcion"] .visual-review{background:#204836;border:1px solid #a4bb7944;color:#f6f0dc;padding:25px}[data-visual="percepcion"] .visual-review-grid article{color:#193f30;border-radius:16px}[data-visual="percepcion"] .visual-review-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}[data-visual="percepcion"] .visual-review-grid h3{font-size:18px;line-height:1.35}
@media(max-width:700px){.perception-title h1{font-size:40px}.perception-title p{font-size:15px}.viewfinder-closed{padding:19px;min-height:270px}.viewfinder-meta{font-size:8px;letter-spacing:.08em}.viewfinder-closed:before{inset:50px 18px}.viewfinder-closed:after{inset:65px 30px}.viewfinder-center strong{font-size:26px}.viewfinder-center small{font-size:8px}.perception-controls{flex-direction:column;align-items:stretch;padding:17px;gap:18px}.perception-controls fieldset{justify-content:stretch}.perception-controls label{flex:1;justify-content:center;padding:10px 5px}.perception-controls .primary{width:100%}.perception-secondary{gap:8px}.perception-secondary details{margin-left:0;flex-basis:100%}[data-visual="percepcion"] .visual-review-grid{grid-template-columns:1fr}[data-visual="percepcion"] .visual-review{padding:16px 12px}[data-visual="percepcion"] .answer-board{padding:12px;gap:13px}[data-visual="percepcion"] .answer-piece{min-height:120px}[data-visual="percepcion"] .people-count svg{width:12px;height:23px}}