/* idem UNIVERSAL · the "What we do" stack · the scene "websites" (7 Oct 2026). Loads after anim.css. Built into site/anim/ by build.mjs. */
/* the sample site: a designed page of an invented dental clinic */
.br{position:relative;width:484px;height:330px;border-radius:12px;background:#fbfaf6;color:#14201f;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);font-size:12px}
.bar{height:28px;background:#eceae4;display:flex;align-items:center;gap:6px;padding:0 10px}
.bar i{width:8px;height:8px;border-radius:50%;background:#cfccc4}
.bar span{margin-left:8px;flex:1;height:17px;border-radius:9px;background:#fff;font-size:10.5px;line-height:17px;padding:0 10px;color:#66706e}
.site{position:relative;height:302px;overflow:hidden}
.nav{height:38px;display:flex;align-items:center;gap:16px;padding:0 18px;border-bottom:1px solid #ebe8e0;font-size:11px;color:#5b6664}
.logo{display:flex;align-items:center;gap:7px;font-weight:600;color:#0f3d3a;font-size:12.5px;margin-right:auto;white-space:nowrap}
.logo i{width:20px;height:20px;border-radius:6px;background:#0f4c48;display:grid;place-items:center}
.logo svg{width:12px;height:12px;fill:#fff}
.hero{display:grid;grid-template-columns:1fr 168px;gap:16px;padding:18px 18px 0}
.eyebrow{font-size:9.5px;line-height:12px;letter-spacing:.14em;text-transform:uppercase;color:#1c7a72;font-weight:600;white-space:nowrap}
.hero h1{margin:7px 0 7px;font-size:25px;line-height:1.08;letter-spacing:-.02em;font-weight:600;color:#10302e}
.hero h1 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:#1c7a72;letter-spacing:-.01em}
.hero p{margin:0;color:#5b6664;font-size:11.5px;line-height:16px;white-space:nowrap}
.cta{display:flex;align-items:center;gap:14px;margin-top:13px}
.bk{position:relative;height:32px;line-height:32px;padding:0 15px;border-radius:9px;background:#0f4c48;color:#fff;font-weight:600;font-size:12.5px;white-space:nowrap;transition:transform .15s}
.bk.on{transform:scale(.94)}
.cta .g{color:#0f4c48;font-weight:500;font-size:11.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pic{height:140px;border-radius:14px;background:linear-gradient(160deg,#dbf1ea,#b9dfd5);position:relative;overflow:hidden;display:grid;place-items:center}
.pic:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.45);right:-50px;top:-60px}
.pic svg{position:relative;width:70px;height:70px;fill:#fff;filter:drop-shadow(0 6px 10px rgba(15,76,72,.25))}
.pic .chip{position:absolute;left:10px;bottom:10px;background:#fff;border-radius:20px;height:20px;padding:0 9px;font-size:10px;line-height:20px;font-weight:600;color:#0f3d3a;display:flex;gap:5px;align-items:center;white-space:nowrap}
.pic .chip i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.svc{display:flex;gap:8px;padding:16px 80px 0 18px}
.svc span{flex:1;height:42px;border-radius:10px;background:#fff;border:1px solid #ebe8e0;display:flex;align-items:center;gap:8px;padding:0 9px;font-size:11px;font-weight:500;color:#23403d;white-space:nowrap}
.svc i{flex:none;width:22px;height:22px;border-radius:7px;background:#e3f3ee;display:grid;place-items:center}
.svc svg{width:12px;height:12px;fill:none;stroke:#1c7a72;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the booking sheet */
.scrim{position:absolute;inset:0;background:rgba(16,32,30,.42);opacity:0;transition:opacity .35s;z-index:2}
.scrim.on{opacity:1}
.sheet{position:absolute;left:50%;top:42px;width:330px;margin-left:-165px;border-radius:14px;background:#fff;box-shadow:0 20px 50px rgba(10,30,28,.35);padding:14px 16px 16px;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:2}
.sheet.on{opacity:1;transform:none}
.sheet h5{margin:0;font-size:13.5px;line-height:18px;font-weight:600;color:#10302e}
.sheet small{display:block;color:#6a7573;font-size:10.5px;line-height:14px}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.days span{position:relative;height:44px;border-radius:9px;border:1px solid #e6e3db;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9.5px;color:#6a7573;line-height:1.25;transition:background .25s,color .25s,border-color .25s}
.days b{font-size:14px;color:#10302e;font-weight:600;transition:color .25s}
.days span.on{background:#0f4c48;border-color:#0f4c48;color:#cfe9e3}.days span.on b{color:#fff}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.slots span{position:relative;height:28px;border-radius:8px;border:1px solid #e6e3db;display:grid;place-items:center;font-size:11.5px;font-weight:500;color:#23403d;transition:background .25s,color .25s,border-color .25s}
.slots span.x{color:#b9bdb9;text-decoration:line-through}
.slots span.on{background:var(--green);border-color:var(--green);color:#fff}
.ok{display:flex;align-items:center;gap:8px;height:32px;margin-top:10px;padding:0 10px;border-radius:9px;background:#e9f8ef;color:#136a36;font-size:11.5px;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ok.on{opacity:1;transform:none}
.ok i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.ok svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* the receptionist ball: glass, a red edge while it waits, a green edge while it talks */
.ball{position:absolute;right:16px;bottom:14px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0,#f1f4f3 36%,#cbd3d1 100%);box-shadow:0 8px 20px rgba(10,30,28,.28),inset 0 0 0 2.5px var(--red),inset 0 -6px 10px rgba(225,6,0,.16);display:flex;align-items:center;justify-content:center;gap:2.5px;transition:box-shadow .45s,transform .2s;z-index:3}
.ball i{width:2.5px;height:14px;border-radius:2px;background:#10302e;transform:scaleY(.35)}
.ball i:nth-child(2),.ball i:nth-child(4){transform:scaleY(.7)}.ball i:nth-child(3){transform:scaleY(1)}
.ball:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--green);opacity:0}
.ball.on{box-shadow:0 8px 24px rgba(34,197,94,.45),inset 0 0 0 2.5px var(--green),inset 0 -6px 10px rgba(34,197,94,.22)}
.ball.on:after{animation:pulse 1.5s ease-out infinite}
.ball.on i,.wave i{animation:wv .9s ease-in-out infinite}
.ball.on i:nth-child(2),.wave i:nth-child(2){animation-delay:.15s}.ball.on i:nth-child(3),.wave i:nth-child(3){animation-delay:.3s}.ball.on i:nth-child(4),.wave i:nth-child(4){animation-delay:.45s}.ball.on i:nth-child(5),.wave i:nth-child(5){animation-delay:.6s}
@keyframes wv{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.voice{position:absolute;right:16px;bottom:70px;width:240px;border-radius:14px;background:#fff;box-shadow:0 18px 44px rgba(10,30,28,.3);padding:10px 12px 12px;opacity:0;transform:translateY(10px) scale(.96);transform-origin:100% 100%;transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:3}
.voice.on{opacity:1;transform:none}
.vh{display:flex;align-items:center;gap:7px;height:16px;font-size:11.5px;line-height:16px;font-weight:600;color:#10302e;white-space:nowrap}
.vh em{font-style:normal;font-size:8.5px;line-height:13px;font-weight:600;letter-spacing:.08em;padding:0 5px;border-radius:4px;background:#10302e;color:#fff}
.wave{margin-left:auto;display:flex;align-items:center;gap:2px;height:14px}
.wave i{width:2.5px;height:100%;border-radius:2px;background:var(--green)}
.vl{margin-top:7px;padding:6px 9px;border-radius:10px;font-size:11px;line-height:15px;max-width:94%;width:fit-content}
.vl.ai{background:#eef6f3;color:#10302e;border-bottom-left-radius:3px}
.vl.me{background:#10302e;color:#fff;margin-left:auto;border-bottom-right-radius:3px}

.phone{width:180px;height:330px}
.noti.n1{top:116px}.noti.n2{top:207px}

body.narrow .br{width:388px;height:228px}body.narrow .site{height:200px}
body.narrow .nav{height:30px;padding:0 14px}body.narrow .nav>span{display:none}
body.narrow .hero{grid-template-columns:1fr;padding:14px 14px 0}body.narrow .pic,body.narrow .svc{display:none}
body.narrow .hero h1{font-size:23px}
body.narrow .sheet{top:8px;padding:10px 14px 12px}body.narrow .days span{height:38px}body.narrow .ok{margin-top:8px;height:30px}
body.narrow .ball{right:12px;bottom:10px;width:42px;height:42px}
body.narrow .voice{right:62px;bottom:6px;width:246px;padding:8px 11px 10px}body.narrow .vl{margin-top:5px}
body.narrow .pw{width:300px;height:71px;overflow:hidden;border-radius:26px 26px 0 0}
body.narrow .phone{width:300px;height:200px;border-radius:26px}
body.narrow .lock{display:none}
body.narrow .noti{top:20px;padding:7px 11px}body.narrow .noti.n2{top:20px}
body.narrow .noti .nh{display:none}body.narrow .noti .x2{display:none}
body.narrow .phone:has(.n2.on) .n1{opacity:0}