Elements

<div class="ar"><div class="pills"><button data-r="21/9">21:9</button><button data-r="16/9" class="on">16:9</button><button data-r="3/2">3:2</button><button data-r="4/3">4:3</button><button data-r="1/1">1:1</button><button data-r="4/5">4:5</button><button data-r="3/4">3:4</button><button data-r="2/3">2:3</button><button data-r="9/16">9:16</button></div><div class="stagebox"><div class="fr"><svg viewBox="0 0 400 260" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="sk" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#9cc3e6"/><stop offset="1" stop-color="#f3d9b8"/></linearGradient><linearGradient id="lk" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#2f8f83"/><stop offset="1" stop-color="#14524f"/></linearGradient></defs><rect width="400" height="260" fill="url(#sk)"/><path d="M0 170l60-50 40 30 70-70 60 60 50-40 120 90v70H0z" fill="#7d8c9c"/><path d="M0 190l80-40 60 40 90-60 70 50 100-20v100H0z" fill="#4f6a5a"/><path d="M230 120l90 70v30H200z" fill="#2c4a39"/><rect y="200" width="400" height="60" fill="url(#lk)"/><path d="M0 212h400" stroke="#ffffff30"/></svg></div></div></div>

<style>
.ar{width:380px;font-family:system-ui,-apple-system,sans-serif;display:grid;gap:18px;justify-items:center}.pills{display:flex;gap:2px;padding:4px;border-radius:999px;background:#202020}.pills button{border:0;background:none;color:#8a8a8a;font:500 11px/1 inherit;padding:8px 9px;border-radius:999px;cursor:pointer;transition:.25s}.pills button:hover{color:#ddd}.pills button.on{background:#111;color:#fff;font-weight:700}.stagebox{width:380px;height:210px;display:grid;place-items:center}.fr{width:373px;height:210px;border-radius:14px;overflow:hidden;transition:width .55s cubic-bezier(.3,.9,.3,1),height .55s cubic-bezier(.3,.9,.3,1);box-shadow:0 14px 34px rgba(0,0,0,.5)}.fr svg{display:block;width:100%;height:100%}
</style>

<script>
(function(){var fr=document.querySelector('.fr'),b=document.querySelectorAll('.pills button'),W=380,H=210;function fit(r){var p=r.split('/'),ar=p[0]/p[1],w=Math.min(W,H*ar),h=w/ar;fr.style.width=Math.round(w)+'px';fr.style.height=Math.round(h)+'px'}b.forEach(function(x){x.onclick=function(){b.forEach(function(y){y.classList.toggle('on',y===x)});fit(x.dataset.r)}});fit('16/9')})();
</script>

<div class="cl"><button class="hd" aria-expanded="false"><span>More details</span><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></button><div class="bd"><div class="in"><p>Collapsible content slides open with a soft ease and fades in line by line.</p><ul><li>Smooth height animation</li><li>Rotating chevron</li><li>Keyboard accessible</li></ul></div></div></div>

<style>
.cl{width:230px;font-family:system-ui,-apple-system,sans-serif;color:#e5e5e5;background:#181818;border:1px solid #262626;border-radius:14px;overflow:hidden}.hd{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border:0;background:none;color:inherit;font:600 13.5px/1 inherit;cursor:pointer}.hd svg{width:16px;height:16px;fill:none;stroke:#9a9a9a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,.9,.3,1)}.hd[aria-expanded=true] svg{transform:rotate(180deg)}.bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.3,.9,.3,1)}.bd.open{grid-template-rows:1fr}.in{min-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .4s;padding:0 16px;font-size:12.5px;color:#a3a3a3;line-height:1.5}.bd.open .in{opacity:1;transform:none;padding-bottom:14px}.in p{margin:0 0 8px}.in ul{margin:0;padding-left:16px}
</style>

<script>
(function(){var h=document.querySelector('.hd'),b=document.querySelector('.bd');h.onclick=function(){var o=h.getAttribute('aria-expanded')!=='true';h.setAttribute('aria-expanded',o);b.classList.toggle('open',o)}})();
</script>

<div class="al"><div class="tabs" role="tablist"><button class="on" data-k="info">Info</button><button data-k="success">Success</button><button data-k="warning">Warning</button><button data-k="error">Error</button></div><div class="slot"><div class="box info"><span class="ic"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><div class="tx"><b>A little heads up</b><p>Your changes are saved automatically as you work.</p></div><button class="x" aria-label="Dismiss"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div></div><button class="show">Show alert</button></div>

<style>
.al{width:340px;font-family:system-ui,-apple-system,sans-serif;display:grid;justify-items:center;gap:14px;color:#e5e5e5}.tabs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#202020}.tabs button{border:0;background:none;color:#8a8a8a;font:500 11.5px/1 inherit;padding:6px 10px;border-radius:999px;cursor:pointer;transition:.2s}.tabs button.on{background:#0a84ff;color:#fff}.slot{width:100%;display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s cubic-bezier(.3,.9,.3,1),opacity .3s}.slot.off{grid-template-rows:0fr;opacity:0}.slot>.box{overflow:hidden;min-height:0}.box{--c:#3b9bff;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--c) 28%,transparent);background:color-mix(in srgb,var(--c) 9%,#181818);transition:background .3s,border-color .3s}.box.success{--c:#34d399}.box.warning{--c:#fbbf24}.box.error{--c:#f87171}.ic svg,.x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ic{color:var(--c);margin-top:1px}.tx{flex:1;font-size:13px}.tx b{display:block;color:var(--c);font-weight:600;margin-bottom:3px}.tx p{margin:0;color:#a3a3a3;line-height:1.4}.x{border:0;background:none;color:#8a8a8a;cursor:pointer;padding:2px;border-radius:6px}.x:hover{color:#fff;background:#ffffff14}.show{border:0;background:none;color:#6b6b6b;font:12px inherit;cursor:pointer;transition:opacity .3s;opacity:0;pointer-events:none}.al.closed .show{opacity:1;pointer-events:auto}.show:hover{color:#bbb}.tx,.ic{transition:opacity .18s}.sw .tx,.sw .ic{opacity:0}
</style>

<script>
(function(){var D={info:['A little heads up','Your changes are saved automatically as you work.','<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/>'],success:['Changes saved','Your workspace is up to date.','<circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6"/>'],warning:['Almost at your limit','You have used 90% of your storage.','<path d="M12 4l9 16H3z"/><path d="M12 10v4M12 17h.01"/>'],error:['Something went wrong','We could not save your changes. Try again.','<circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/>']};var root=document.querySelector('.al'),box=root.querySelector('.box'),slot=root.querySelector('.slot'),tabs=root.querySelectorAll('.tabs button');function open(){root.classList.remove('closed');slot.classList.remove('off')}tabs.forEach(function(b){b.onclick=function(){tabs.forEach(function(t){t.classList.toggle('on',t===b)});var d=D[b.dataset.k];if(root.classList.contains('closed')){open()}box.classList.add('sw');setTimeout(function(){box.className='box '+b.dataset.k+' sw';box.querySelector('b').textContent=d[0];box.querySelector('p').textContent=d[1];box.querySelector('.ic svg').innerHTML=d[2];box.classList.remove('sw')},170)}});root.querySelector('.x').onclick=function(){slot.classList.add('off');root.classList.add('closed')};root.querySelector('.show').onclick=open})();
</script>

<div class="w"><svg class="ring" viewBox="0 0 100 100"><circle cx="50" cy="50" r="38"/></svg><b class="n" id="n">87</b><i class="u">GOOD SLEEP</i><span class="m"></span><div class="blob"><s class="e1"></s><s class="e2"></s><u></u><small>7h 04m</small></div></div>

<style>
.w{position:relative;width:180px;height:180px;border-radius:40px;background:#050a1c;overflow:hidden;color:#fff;text-align:center;font-family:system-ui,sans-serif;box-shadow:0 18px 40px -16px rgba(5,10,40,.6)}.ring{position:absolute;inset:14px;width:calc(100% - 28px)}.ring circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:.8}.n{position:absolute;top:50px;left:0;right:0;font-size:28px;font-weight:600}.u{position:absolute;top:84px;left:0;right:0;font-size:8px;letter-spacing:.22em;color:rgba(255,255,255,.4);font-style:normal}.m{position:absolute;top:16px;right:18px;width:12px;height:12px;border-radius:50%;box-shadow:-4px 2px 0 0 #4cb8ff}.blob{position:absolute;left:50%;bottom:-48px;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:#38b6ff;animation:bob 2.6s ease-in-out infinite}.blob s{position:absolute;top:26px;width:16px;height:5px;border-bottom:2px solid #04243f;border-radius:0 0 10px 10px}.e1{left:36px}.e2{right:36px}.blob u{position:absolute;top:44px;left:50%;width:16px;height:7px;margin-left:-8px;border-bottom:2px solid #04243f;border-radius:0 0 16px 16px}.blob small{position:absolute;top:60px;left:0;right:0;font-size:9px;color:rgba(4,36,63,.65)}@keyframes bob{50%{transform:translateY(-7px)}}
</style>

<script>
const n=document.getElementById("n");let v=0;const i=setInterval(()=>{v+=3;if(v>=87){v=87;clearInterval(i)}n.textContent=v},25);
</script>

<div class="w"><div class="ring"></div><div class="t"><span id="m">25</span><s id="c">:</s><span id="s">00</span></div><p>FOCUS</p><button id="b" aria-label="Start">▶</button></div>

<style>
.w{position:relative;width:180px;height:180px;border-radius:40px;background:#0d0d0d;color:#fff;font-family:system-ui,sans-serif;box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}.ring{position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(255,255,255,.22)}.t{position:absolute;top:68px;left:0;right:0;text-align:center;font-size:30px;font-weight:300;font-variant-numeric:tabular-nums}.t s{text-decoration:none;color:#888;margin:0 2px}p{position:absolute;top:108px;left:0;right:0;text-align:center;margin:0;font-size:9px;letter-spacing:.25em;color:#777}button{position:absolute;right:14px;bottom:14px;width:30px;height:30px;border-radius:50%;border:0;background:#262626;color:#fff;font-size:10px;cursor:pointer}.run #c{animation:k 1s steps(1) infinite}@keyframes k{50%{opacity:.2}}
</style>

<script>
let left=1500,id=null;const m=document.getElementById("m"),s=document.getElementById("s"),b=document.getElementById("b"),w=document.querySelector(".w");const r=()=>{m.textContent=String(Math.floor(left/60)).padStart(2,"0");s.textContent=String(left%60).padStart(2,"0")};b.onclick=()=>{if(id){clearInterval(id);id=null;w.classList.remove("run");b.textContent="▶"}else{w.classList.add("run");b.textContent="❚❚";id=setInterval(()=>{if(left>0){left--;r()}else{clearInterval(id);id=null;w.classList.remove("run")}},1000)}};
</script>

<div class="w"><h6>TODAY</h6><ul id="l"><li class="d"><em>09:00</em><span>Design review</span><i>✓</i></li><li><em>11:30</em><span>Client sync</span><i>✓</i></li><li><em>14:00</em><span>Ship components</span><i>✓</i></li></ul></div>

<style>
.w{width:260px;background:#fff;border-radius:22px;padding:18px 20px;box-shadow:0 16px 40px -16px rgba(0,0,0,.2);font-family:system-ui,sans-serif;color:#111}h6{margin:0 0 10px;font-size:10px;letter-spacing:.14em;color:#999;font-weight:600}ul{list-style:none;margin:0;padding:0}li{display:flex;align-items:center;gap:14px;padding:9px 0;font-size:13px;cursor:pointer}em{font-style:normal;color:#aaa;font-size:11px;font-variant-numeric:tabular-nums;width:38px}span{flex:1}i{font-style:normal;color:#22b573;opacity:0}li.d span{color:#aaa;text-decoration:line-through}li.d em{color:#ccc}li.d i{opacity:1}
</style>

<script>
document.querySelectorAll("#l li").forEach(x=>x.onclick=()=>x.classList.toggle("d"));
</script>

<div class="w"><svg viewBox="0 0 160 160"><rect x="8" y="8" width="144" height="144" rx="34" fill="none" stroke="#c4c4c4" stroke-width="8" stroke-dasharray="1.2 6"/></svg><b id="t">22:43</b></div>

<style>
.w{position:relative;width:180px;height:180px;border-radius:42px;background:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.25)}.w svg{position:absolute;inset:0;width:100%;height:100%}.w b{position:absolute;inset:0;display:grid;place-items:center;font:700 38px system-ui,sans-serif;letter-spacing:-.02em;color:#111}
</style>

<script>
const t=document.getElementById("t");const u=()=>{const d=new Date();t.textContent=String(d.getHours()).padStart(2,"0")+":"+String(d.getMinutes()).padStart(2,"0")};u();setInterval(u,1000);
</script>

<div class="w" id="w"><div class="top"><b id="c">5</b><span>/8</span></div><p>glasses</p><div class="cap"><i id="f"></i></div></div>

<style>
.w{width:170px;height:210px;border-radius:30px;background:#fff;box-shadow:0 16px 40px -14px rgba(0,0,0,.22);padding:20px 22px;font-family:system-ui,sans-serif;color:#111;cursor:pointer;box-sizing:border-box;position:relative}.top{display:flex;align-items:baseline;gap:3px}.top b{font-size:34px;font-weight:500}.top span{color:#aaa;font-size:14px}p{margin:2px 0 0;color:#999;font-size:12px}.cap{position:absolute;left:50%;bottom:22px;width:38px;height:100px;margin-left:-19px;border:1.5px solid #ddd;border-radius:20px;overflow:hidden;background:#fff}.cap i{position:absolute;left:0;right:0;bottom:0;background:#7fd0ff;transition:height .5s ease;height:62%}
</style>

<script>
let k=5;const c=document.getElementById("c"),f=document.getElementById("f");document.getElementById("w").onclick=()=>{k=k>=8?0:k+1;c.textContent=k;f.style.height=(k/8*100)+"%"};f.style.height="62%";
</script>

<div class="w"><svg class="ring" viewBox="0 0 100 100"><circle cx="50" cy="50" r="38"/></svg><b class="n" id="n">73</b><i class="u">BPM</i><span class="h">♥</span><div class="blob"><s class="e1"></s><s class="e2"></s><u></u></div></div>

<style>
.w{position:relative;width:180px;height:180px;border-radius:40px;background:#1c0a12;overflow:hidden;box-shadow:0 18px 40px -16px rgba(60,10,30,.55);color:#fff;text-align:center;font-family:system-ui,sans-serif}.ring{position:absolute;inset:14px;width:calc(100% - 28px)}.ring circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:.8}.n{position:absolute;top:54px;left:0;right:0;font-size:28px;font-weight:600}.u{position:absolute;top:90px;left:0;right:0;font-size:9px;letter-spacing:.25em;color:rgba(255,255,255,.4);font-style:normal}.h{position:absolute;top:14px;right:20px;color:#ff7a93;font-size:15px;animation:b 1s ease-in-out infinite}.blob{position:absolute;left:50%;bottom:-44px;width:112px;height:112px;margin-left:-56px;border-radius:50%;background:#ff6b81;animation:bob 2.4s ease-in-out infinite}.blob s{position:absolute;top:24px;width:8px;height:8px;border-radius:50%;background:#fff}.e1{left:34px}.e2{right:34px}.blob u{position:absolute;top:40px;left:50%;width:18px;height:9px;margin-left:-9px;border-bottom:2.5px solid #fff;border-radius:0 0 18px 18px}@keyframes b{50%{transform:scale(1.35)}}@keyframes bob{50%{transform:translateY(-8px)}}
</style>

<script>
const n=document.getElementById("n");setInterval(()=>{n.textContent=70+Math.floor(Math.random()*7)},1200);
</script>

<div class='br'><div class='rn'><span id='brl'>INHALE</span></div><b>Breathe</b></div>

<style>
.br{width:180px;margin:auto;padding:20px 16px 16px;background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(0,0,0,.09);text-align:center;font-family:Inter,Arial,sans-serif}.rn{display:grid;place-items:center;width:84px;height:84px;margin:6px auto 16px;border-radius:50%;border:12px solid #ececec;animation:br 8s ease-in-out infinite}.rn span{font-size:8.5px;font-weight:600;letter-spacing:.12em;color:#666}.br b{font-size:13px;font-weight:500}@keyframes br{0%,100%{transform:scale(.8);border-color:#e6e6e6}50%{transform:scale(1.1);border-color:#c9d8f4}}@media(prefers-reduced-motion:reduce){.rn{animation:none}}
</style>

<script>
const l=document.getElementById('brl');let i=true;setInterval(()=>{i=!i;l.textContent=i?'INHALE':'EXHALE'},4000);
</script>

<div class='fa'><small>Arrival in</small><b><span id='fam'>53</span>min</b><div class='tr'><i id='fap'></i><u>✈</u></div><div class='ft'><div><b>14:30</b><small>LHR London</small></div><div class='r'><b>16:30</b><small>IST Istanbul</small></div></div></div>

<style>
.fa{width:210px;margin:auto;padding:16px;background:#161616;border-radius:26px;color:#fff;font-family:Inter,Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.28)}.fa small{display:block;font-size:11px;color:#8a8a8a}.fa>b{display:block;margin:2px 0 26px;font-size:26px}.fa>b span{font-variant-numeric:tabular-nums}.tr{position:relative;height:4px;margin:0 6px 10px;background:#333;border-radius:3px}.tr i{display:block;height:100%;width:70%;border-radius:3px;background:linear-gradient(90deg,#ea580c,#fb923c);transition:width 1s}.tr u{position:absolute;left:70%;top:-9px;display:grid;place-items:center;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#2a2a2a;border:1px solid #444;font-size:10px;text-decoration:none;color:#fb923c;transition:left 1s}.ft{display:flex;justify-content:space-between}.ft b{font-size:12.5px}.ft .r{text-align:right}
</style>

<script>
let m=53;const e=document.getElementById('fam'),p=document.getElementById('fap'),u=document.querySelector('.tr u');setInterval(()=>{m=m>0?m-1:53;e.textContent=m;const v=Math.round((1-m/160)*100);p.style.width=v+'%';u.style.left=v+'%'},3000);
</script>

<div class='sc'><div class='im'><svg viewBox='0 0 120 80' width='100%' height='100%'><circle cx='28' cy='62' r='9' fill='#222'/><circle cx='98' cy='62' r='9' fill='#222'/><path d='M28 62 L48 30 H78 L98 62 M78 30 L86 14 H98' fill='none' stroke='#e4322b' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/><path d='M40 50 H84 L90 62 H46 Z' fill='#e4322b'/><rect x='54' y='28' width='24' height='6' rx='3' fill='#222'/></svg></div><div class='tx'><header><b>Electric Scooter</b><svg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='#10b981' stroke-width='2'><path d='M5 19c0-8 5-14 15-14 0 10-6 15-14 15M5 19c3-5 6-7 10-9'/></svg></header><small>17 Aug 2026</small><div class='st'><div><em>Distance</em><b>3.2km</b></div><div><em>Avg speed</em><b>18.4km/h</b></div><div><em>Duration</em><b>22 min</b></div></div></div></div>

<style>
.sc{display:flex;gap:14px;width:min(380px,94%);margin:auto;padding:10px;background:#fff;border-radius:28px;box-shadow:0 12px 32px rgba(0,0,0,.12);font-family:Inter,Arial,sans-serif;color:#111}.im{flex:none;width:110px;display:grid;place-items:center;background:#f3f3f3;border-radius:20px;padding:6px}.tx{flex:1;min-width:0;padding:6px 6px 4px 0}.tx header{display:flex;justify-content:space-between;align-items:center}.tx b{font-size:15px}.tx small{display:block;margin:3px 0 12px;font-size:11px;color:#888}.st{display:flex;justify-content:space-between;gap:8px}.st em{display:block;font-style:normal;font-size:9px;color:#888}.st b{display:block;margin-top:2px;font-size:12px}
</style>

<div class='ac'><header><b>Daily Activity</b><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='#aaa' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg></header><div class='mo'><span id='acm'></span><em id='acy'></em></div><div class='wd'><i>S</i><i>M</i><i>T</i><i>W</i><i>T</i><i>F</i><i>S</i></div><div class='gr' id='acg'></div></div>

<style>
.ac{width:230px;margin:auto;padding:16px 16px 14px;background:#161616;border-radius:26px;color:#fff;font-family:Inter,Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.28)}.ac header{display:flex;justify-content:space-between;align-items:center}.ac b{font-size:14px}.mo{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.mo span{padding:3px 10px;background:#2b2b2b;border-radius:99px;font-size:11px}.mo em{font-style:normal;font-size:11px;color:#888}.wd,.gr{display:grid;grid-template-columns:repeat(7,1fr);gap:3px 0;text-align:center}.wd i{font-style:normal;font-size:9px;color:#777}.gr span{display:grid;place-items:center;width:22px;height:22px;margin:auto;border-radius:50%;font-size:10.5px;color:#aaa}.gr .on{background:#10b981;color:#fff;font-weight:600}.gr .td{background:#f97316;color:#fff;font-weight:700}
</style>

<script>
const n=new Date(),y=n.getFullYear(),m=n.getMonth(),t=n.getDate();document.getElementById('acm').textContent=n.toLocaleDateString(undefined,{month:'short'});document.getElementById('acy').textContent=n.toLocaleDateString(undefined,{month:'long',year:'numeric'});const f=new Date(y,m,1).getDay(),d=new Date(y,m+1,0).getDate();let h='';for(let i=0;i<f;i++)h+='<span></span>';for(let i=1;i<=d;i++){const on=i<t&&(i*7)%11<7;h+='<span class="'+(i===t?'td':on?'on':'')+'">'+i+'</span>'}document.getElementById('acg').innerHTML=h;
</script>

<div class='fc' style='--c:#a78bfa'><span class='ic'>☾</span><div class='rg'></div><b>Focus</b><div class='bl'><i class='e l'></i><i class='e r'></i><u></u></div></div>

<style>
.fc{position:relative;width:200px;height:200px;margin:auto;background:#000;border-radius:30px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.3)}.fc .ic{position:absolute;right:16px;top:12px;font-size:14px;color:var(--c)}.fc .rg{position:absolute;left:50%;top:26px;width:112px;height:112px;margin-left:-56px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:50%;animation:pu 3s ease-in-out infinite}.fc b{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:17px;font-weight:600}.bl{position:absolute;left:50%;bottom:-62px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:var(--c);animation:fl 4s ease-in-out infinite}.e{position:absolute;top:34px;width:6px;height:6px;border-radius:50%;background:#fff;animation:bk 4s infinite}.e.l{left:56px}.e.r{right:56px}.bl u{position:absolute;left:50%;top:44px;width:20px;height:9px;margin-left:-10px;border-bottom:2.500px solid #fff;border-radius:0 0 20px 20px}@keyframes pu{50%{transform:scale(1.06);opacity:.6}}@keyframes fl{50%{transform:translateY(-6px)}}@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}@media(prefers-reduced-motion:reduce){.fc *{animation:none!important}}
</style>

<div class='fc' style='--c:#14b8a6'><span class='ic'>ᛒ</span><div class='rg'></div><b>On</b><div class='bl'><i class='e l'></i><i class='e r'></i><u></u></div></div>

<style>
.fc{position:relative;width:200px;height:200px;margin:auto;background:#000;border-radius:30px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.3)}.fc .ic{position:absolute;right:16px;top:12px;font-size:14px;color:var(--c)}.fc .rg{position:absolute;left:50%;top:26px;width:112px;height:112px;margin-left:-56px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:50%;animation:pu 3s ease-in-out infinite}.fc b{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:17px;font-weight:600}.bl{position:absolute;left:50%;bottom:-62px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:var(--c);animation:fl 4s ease-in-out infinite}.e{position:absolute;top:34px;width:6px;height:6px;border-radius:50%;background:#fff;animation:bk 4s infinite}.e.l{left:56px}.e.r{right:56px}.bl u{position:absolute;left:50%;top:44px;width:20px;height:9px;margin-left:-10px;border-bottom:2.500px solid #fff;border-radius:0 0 20px 20px}@keyframes pu{50%{transform:scale(1.06);opacity:.6}}@keyframes fl{50%{transform:translateY(-6px)}}@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}@media(prefers-reduced-motion:reduce){.fc *{animation:none!important}}
</style>

<div class='bp'><div class='av'></div><b>Alex Rivera <i>✓</i></b><small>@alex.dev</small></div>

<style>
.bp{width:190px;margin:auto;padding:18px 14px 16px;background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(0,0,0,.09);text-align:center;font-family:Inter,Arial,sans-serif}.av{width:96px;height:96px;margin:0 auto 12px;background:linear-gradient(#b9d3d9 0,#c8d3b9 32%,#c9a933 33%,#8c7a22 62%,#33361d 100%);border-radius:60% 40% 55% 45%/50% 55% 45% 50%;animation:bm 7s ease-in-out infinite}.bp b{display:block;font-size:14px}.bp b i{font-style:normal;color:#d9d9d9;font-size:11px}.bp small{display:block;margin-top:3px;font-size:12px;color:#8a8a8a}@keyframes bm{50%{border-radius:42% 58% 45% 55%/58% 44% 56% 42%}}@media(prefers-reduced-motion:reduce){.av{animation:none}}
</style>

<div class='bt'><svg class='ic' width='18' height='10' viewBox='0 0 20 10' fill='none' stroke='#a3e635' stroke-width='1.2'><rect x='.6' y='.6' width='16' height='8.800' rx='2'/><rect x='2.200' y='2.200' width='8' height='5.600' fill='#a3e635' stroke='none'/><path d='M18.500 3.500v3'/></svg><svg class='rg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='44' fill='none' stroke='#2a2f1c' stroke-width='3'/><circle cx='50' cy='50' r='44' fill='none' stroke='#a3e635' stroke-width='3' stroke-linecap='round' stroke-dasharray='268 277' transform='rotate(-90 50 50)'/></svg><div class='n'><b>97</b><span>%</span></div><small>Charged</small><div class='bl'><i class='e l'></i><i class='e r'></i><u></u></div></div>

<style>
.bt{position:relative;width:200px;height:200px;margin:auto;background:#000;border-radius:30px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.3)}.ic{position:absolute;right:14px;top:14px}.rg{position:absolute;left:50%;top:22px;width:130px;height:130px;margin-left:-65px}.n{position:absolute;left:0;right:0;top:64px;text-align:center}.n b{font-size:28px;font-weight:500}.n span{font-size:14px;color:#aaa}.bt small{position:absolute;left:0;right:0;top:100px;text-align:center;font-size:10px;color:#777}.bl{position:absolute;left:50%;bottom:-70px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c2f542,#a3e635 60%,#84cc16)}.e{position:absolute;top:36px;width:6px;height:6px;border-radius:50%;background:#111;animation:bk 4s infinite}.e.l{left:58px}.e.r{right:58px}.bl u{position:absolute;left:50%;top:46px;width:22px;height:10px;margin-left:-11px;border-bottom:2.5px solid #111;border-radius:0 0 22px 22px}@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
</style>

<div class='vr'><b>New Audio</b><small id='vrd'></small><div class='w' id='vrw'></div><div class='f'><span id='vrt'>00:00:00</span><button id='vrb' aria-label='Pause'><i></i><i></i></button></div></div>

<style>
.vr{width:190px;margin:auto;padding:16px 16px 14px;background:#161616;border-radius:26px;color:#fff;font-family:Inter,Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.28)}.vr b{display:block;font-size:14px}.vr small{display:block;margin-top:2px;font-size:11px;color:#8a8a8a}.vr .w{display:flex;align-items:center;gap:3px;height:56px;margin:12px 0}.vr .w i{flex:1;min-width:2px;border-radius:2px;background:#ff3b45;height:20%;transition:height .12s}.vr .f{display:flex;justify-content:space-between;align-items:center}.vr .f span{font:12px ui-monospace,Menlo,monospace;color:#ddd}.vr button{display:flex;gap:4px;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;background:#ff3b45;cursor:pointer;transition:transform .12s}.vr button:active{transform:scale(.92)}.vr button i{width:3.5px;height:13px;border-radius:2px;background:#fff}.vr button.p i{width:0;height:0;border-radius:0;background:none;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.vr button.p i+i{display:none}
</style>

<script>
const w=document.getElementById('vrw'),t=document.getElementById('vrt'),b=document.getElementById('vrb');document.getElementById('vrd').textContent=new Date().toLocaleDateString(undefined,{day:'numeric',month:'numeric',year:'2-digit'});for(let i=0;i<16;i++)w.appendChild(document.createElement('i'));let run=true,s=0;const bars=[...w.children];setInterval(()=>{if(!run)return;bars.forEach(x=>x.style.height=(12+Math.random()*88)+'%')},140);setInterval(()=>{if(!run)return;s++;const p=n=>String(n).padStart(2,'0');t.textContent=p(Math.floor(s/3600))+':'+p(Math.floor(s%3600/60))+':'+p(s%60)},1000);b.addEventListener('click',()=>{run=!run;b.classList.toggle('p',!run);b.setAttribute('aria-label',run?'Pause':'Record');if(!run)bars.forEach(x=>x.style.height='14%')});
</script>