:root{font-family:Arial,Helvetica,sans-serif;color:#173f35;background:#f7f3e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;font-size:13px;color:inherit;min-height:44px;border:1px solid #bac8b7;background:#fffdf7;border-radius:8px;padding:10px 13px}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #bb5e35;outline-offset:3px}button[aria-disabled=true]{opacity:.65}button[hidden]{display:none}button.primary{background:#173f35;color:#fffdf7;border-color:#173f35}.character-scene{max-width:1050px;margin:auto;padding:28px 30px 20px;overflow:hidden}.intro{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;text-transform:uppercase;color:#965332;margin:0 0 12px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,4.5vw,48px);font-weight:400;line-height:1.05;letter-spacing:-1.4px;margin:0 0 16px}.intro-copy>p:last-child{font-size:14px;line-height:1.65;max-width:360px;color:#516a60}.figures{height:260px;display:flex;align-items:flex-end;justify-content:center;position:relative;padding-bottom:22px;background:radial-gradient(ellipse closest-side at center,#e2e8d6 80%,transparent 100%)}.person{width:45%;max-width:180px;height:235px;margin:0;position:relative}.person img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block}.person.francisco{height:235px;margin-left:-18px}.person figcaption{font-family:Georgia,'Times New Roman',serif;position:absolute;bottom:-20px;width:100%;text-align:center;font-size:17px}.controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;position:relative;z-index:5;margin-top:18px;font-size:12px}.controls label{margin-left:5px}.controls select{max-width:145px}.window-scene{position:relative;isolation:isolate;margin-top:158px}.browser-window{position:relative;z-index:3;background:#fffdf7;border:1px solid #b7c5b0;border-radius:10px;overflow:hidden;box-shadow:0 12px 30px #173f3512}.chrome{display:flex;align-items:center;justify-content:space-between;background:#e6ecdf;border-bottom:1px solid #ccd6c3;padding:13px 17px;font-size:11px}.dots{letter-spacing:4px;color:#c3805b;font-size:10px}.window-copy{padding:25px 30px}.window-copy h2{font-family:Georgia,'Times New Roman',serif;font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.6px;margin:0 0 12px}.window-copy>p:not(.eyebrow){max-width:600px;color:#516a60;font-size:14px;line-height:1.6;margin:0}.pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.pills span{font-size:10px;border:1px solid #d1dbc9;border-radius:99px;padding:7px 10px}.scene-status{font-size:12px;line-height:1.6;color:#3f5d50;min-height:39px;margin:14px 0 0}.scene-note,.fallback{font-size:11px;line-height:1.65;color:#607365;margin:5px 0 0}.peek-slot{position:absolute;z-index:2;top:-158px;height:170px;width:190px;left:20px;overflow:hidden;pointer-events:none;user-select:none}.peek-slot[data-position=top-center]{left:calc(50% - 95px)}.peek-slot[data-position=top-right]{left:auto;right:20px}.peek-actor{--eye-left-x:30%;--eye-left-y:44.6%;--eye-right-x:54.4%;--eye-right-y:44.6%;--eye-width:15%;--eye-height:10%;position:absolute;inset:0;transform:translateY(180px);transition:transform 700ms cubic-bezier(.2,.9,.3,1);pointer-events:none}.peek-actor[data-character=francisco]{--eye-left-y:44.3%;--eye-right-y:44.3%}.peek-actor[data-phase=paused],.peek-actor[data-phase=ready],.peek-actor[data-phase=quiet]{visibility:hidden;transition:none}.peek-actor[data-phase=enter],.peek-actor[data-phase=notice],.peek-actor[data-phase=look-down],.peek-actor[data-phase=look-back]{transform:translateY(0)}.head-wrap{position:absolute;left:0;top:0;width:170px;height:170px;z-index:2}.character-head{width:100%;height:100%;object-fit:contain;display:block}.eyes{position:absolute;inset:0;pointer-events:none}.eye{position:absolute;left:var(--eye-left-x);top:var(--eye-left-y);width:var(--eye-width);height:var(--eye-height);background:#fffdfa;border:1.4px solid #523d2d;border-radius:48% 48% 50% 50%;overflow:hidden;transform-origin:center;transition:height 240ms ease,translate 240ms ease}.eye-right{left:var(--eye-right-x);top:var(--eye-right-y)}.pupil{position:absolute;width:45%;height:76%;border-radius:50%;background:#4c382a;left:28%;top:12%;border:2px solid #2e2b26;transition:transform 500ms ease}.pupil:before{content:'';position:absolute;width:30%;height:28%;border-radius:50%;background:white;top:7%;left:12%}.peek-actor[data-phase=notice] .eye{height:calc(var(--eye-height) * 1.18);translate:0 -1px;animation:notice-blink 1150ms ease both}.peek-actor[data-phase=look-down] .pupil{transform:translate(0,29%)}.peek-actor[data-phase=look-down] .eye{animation:study-blink 1500ms ease both}.peek-actor[data-phase=look-back] .eye{animation:return-blink 1050ms ease both}.character-arm{position:absolute;width:68px;height:138px;object-fit:contain;right:-2px;top:70px;z-index:1;transform-origin:48% 92%;transform:rotate(-6deg)}.peek-actor[data-phase=enter] .character-arm,.peek-actor[data-phase=notice] .character-arm{animation:hello-wave 900ms ease-in-out 2}.peek-actor[data-phase=look-down] .character-arm,.peek-actor[data-phase=look-back] .character-arm{transform:rotate(12deg)}@keyframes notice-blink{0%,48%,62%,100%{scale:1 1}54%,56%{scale:1 .07}}@keyframes study-blink{0%,68%,82%,100%{scale:1 1}74%,76%{scale:1 .07}}@keyframes return-blink{0%,40%,57%,100%{scale:1 1}47%,49%{scale:1 .07}}@keyframes hello-wave{0%,100%{transform:rotate(-6deg)}45%{transform:rotate(15deg)}75%{transform:rotate(-14deg)}}
@media(max-width:620px){.character-scene{padding:22px 16px 18px}.intro{grid-template-columns:1fr;gap:5px}.intro-copy{text-align:center}.intro-copy>p:last-child{margin:0 auto;max-width:340px}h1{font-size:36px}.figures{height:225px}.person{height:200px;max-width:160px}.person.francisco{height:200px}.controls{justify-content:center;margin-top:20px;gap:7px}.controls label{margin-left:0}.controls button,.controls select{font-size:12px;padding:9px 10px}.window-scene{margin-top:148px}.peek-slot{top:-148px;height:160px;width:180px;left:0}.peek-slot[data-position=top-center]{left:calc(50% - 90px)}.peek-slot[data-position=top-right]{right:0}.head-wrap{width:160px;height:160px}.character-arm{width:64px;height:130px;top:67px}.window-copy{padding:21px 18px}.window-copy h2{font-size:26px}.window-copy>p:not(.eyebrow){font-size:13px}.scene-status{font-size:11px;min-height:53px}.scene-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.peek-actor{visibility:hidden}}
@media print{.controls,.peek-slot{display:none}.window-scene{margin-top:20px}.figures{height:220px}}

/* Keep the reviewed eye rig aligned while making the whole cameo 15% smaller. */
.peek-slot{width:162px;height:146px;top:-134px}.peek-slot[data-position=top-center]{left:calc(50% - 81px)}.peek-actor{inset:auto;width:190px;height:170px;left:0;top:0;scale:.85;transform-origin:top left}.window-scene{margin-top:134px}.peek-actor[data-character=ian] .character-arm{scale:-1 1}@media(max-width:620px){.peek-slot{width:153px;height:136px;top:-124px}.peek-slot[data-position=top-center]{left:calc(50% - 76.5px)}.peek-actor{width:180px;height:160px}.window-scene{margin-top:124px}}