Elements

<div class="cg"><div class="col"><div class="sc on" data-c="1"><b>Signed contract</b><p>The final PDF with every signature and the audit trail.</p><i class="bx">✓</i></div><div class="sc" data-c="2"><b>Invoice</b><p>Itemised billing for the period, ready for accounting.</p><i class="bx"></i></div><div class="nt"><b>Notifications</b><p>Choose what reaches your inbox.</p><label class="tg"><span>Mentions and replies</span><input type="checkbox" checked><i></i></label><label class="tg"><span>Weekly digest</span><input type="checkbox"><i></i></label></div></div><div class="col"><div class="rv"><div class="rh"><b>Review order</b><u>Edit</u></div><p>Check the details before you confirm.</p><div class="rw"><span>Plan</span><b>Team, yearly</b></div><div class="rw"><span>Seats</span><b>12</b></div><div class="rw"><span>Billing email</span><b>billing@acme.co</b></div><div class="bt"><button class="g" type="button">Back</button><button type="button" class="cf">Confirm order</button></div></div></div></div>

<style>
.cg{box-sizing:border-box;width:100%;height:100%;min-height:380px;overflow:auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;align-content:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.col{display:flex;flex-direction:column;gap:10px}.sc,.nt,.rv{background:#1b1b1b;border:1px solid #2a2a2a;border-radius:14px;padding:14px;position:relative}.sc{cursor:pointer;transition:border-color .2s,box-shadow .2s}.sc.on{border-color:#0a84ff;box-shadow:0 0 0 1px #0a84ff}.cg b{font-size:13px}.cg p{margin:4px 0 0;font-size:12px;color:#888;line-height:1.5}.bx{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:5px;border:1.5px solid #444;display:grid;place-items:center;font-size:11px;font-style:normal;color:#fff}.sc.on .bx{background:#0a84ff;border-color:#0a84ff}.tg{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px;cursor:pointer}.tg input{display:none}.tg i{width:38px;height:22px;border-radius:99px;background:#333;position:relative;transition:background .25s}.tg i:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.tg input:checked+i{background:#0a84ff}.tg input:checked+i:after{transform:translateX(16px)}.rh{display:flex;justify-content:space-between}.rh u{font-size:11px;color:#888;cursor:pointer}.rw{display:flex;justify-content:space-between;font-size:12px;margin-top:12px;color:#888}.rw b{color:#eee}.bt{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.bt button{border:0;border-radius:99px;padding:8px 14px;font:600 12px system-ui;background:#0a84ff;color:#fff;cursor:pointer}.bt .g{background:#2a2a2a;color:#ddd}
</style>

<script>
(function(){var R=document.querySelector(".cg");[].forEach.call(R.querySelectorAll(".sc"),function(c){c.onclick=function(){c.classList.toggle("on");c.querySelector(".bx").textContent=c.classList.contains("on")?"✓":""}});var cf=R.querySelector(".cf");cf.onclick=function(){cf.textContent="Confirmed ✓"}})();
</script>

<div class="iv"><small>COLLECTED MOMENTS</small><b>Look a little closer.</b><div class="gr"></div><p>Open a photograph. Swipe or use the arrows to explore.</p><div class="lb"><button class="x" type="button">×</button><button class="a l" type="button">‹</button><div class="bg"></div><button class="a r" type="button">›</button><span class="n"></span></div></div>

<style>
.iv{position:relative;width:100%;height:100%;min-height:380px;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.iv small{font-size:10px;letter-spacing:.14em;color:#777}.iv b{font-size:16px;margin:4px 0 14px}.iv p{font-size:11px;color:#666;margin:12px 0 0}.gr{display:flex;gap:10px}.th{width:100px;height:150px;border-radius:14px;cursor:pointer;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}.th:hover{transform:translateY(-4px) scale(1.03)}.p0{background:linear-gradient(180deg,#8d96a0,#3b4048 60%,#1a1d21);position:relative;overflow:hidden}.p0:after{content:"";position:absolute;inset:25% 15% 0;background:repeating-linear-gradient(90deg,#2d3339 0 6px,#59626b 6px 8px);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.p1{background:linear-gradient(180deg,#c46a4a,#8a3f2c 55%,#2a2a2e 56%);position:relative;overflow:hidden}.p1:after{content:"";position:absolute;left:30%;right:30%;bottom:0;top:56%;background:repeating-linear-gradient(180deg,#e0b341 0 8px,transparent 8px 16px);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%)}.p2{background:linear-gradient(135deg,#dcd6cc,#a99f93);position:relative;overflow:hidden}.p2:after{content:"";position:absolute;inset:10%;background:repeating-linear-gradient(90deg,transparent 0 18px,#1c1c1c 18px 21px),repeating-linear-gradient(0deg,transparent 0 30px,#1c1c1c 30px 33px)}.lb{position:absolute;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .25s}.lb.on{opacity:1;pointer-events:auto}.bg{width:200px;height:290px;border-radius:16px;touch-action:pan-y;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .2s}.a{width:34px;height:34px;border-radius:50%;border:1px solid #333;background:#1b1b1b;color:#eee;font-size:18px;cursor:pointer}.x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid #333;background:#1b1b1b;color:#eee;font-size:18px;cursor:pointer}.n{position:absolute;bottom:14px;font-size:12px;color:#999}
</style>

<script>
(function(){var R=document.querySelector(".iv"),g=R.querySelector(".gr"),lb=R.querySelector(".lb"),bg=R.querySelector(".bg"),n=R.querySelector(".n"),cur=0,N=3;for(var i=0;i<N;i++){(function(i){var t=document.createElement("div");t.className="th p"+i;t.onclick=function(){cur=i;show(0);lb.classList.add("on")};g.appendChild(t)})(i)}function show(d){bg.style.transition="none";bg.style.transform="translateX("+(d*60)+"px)";bg.style.opacity=0;bg.className="bg p"+cur;n.textContent=(cur+1)+" / "+N;void bg.offsetWidth;bg.style.transition="";bg.style.transform="";bg.style.opacity=1}function step(d){cur=(cur+d+N)%N;show(d)}R.querySelector(".l").onclick=function(){step(-1)};R.querySelector(".r").onclick=function(){step(1)};R.querySelector(".x").onclick=function(){lb.classList.remove("on")};lb.onclick=function(e){if(e.target===lb)lb.classList.remove("on")};var sx=null;bg.onpointerdown=function(e){sx=e.clientX};bg.onpointerup=function(e){if(sx!==null){var dx=e.clientX-sx;if(Math.abs(dx)>30)step(dx<0?1:-1);sx=null}};window.addEventListener("keydown",function(e){if(!lb.classList.contains("on"))return;if(e.key==="ArrowRight")step(1);if(e.key==="ArrowLeft")step(-1);if(e.key==="Escape")lb.classList.remove("on")})})();
</script>

<div class="tw"><div class="tc"><div class="gl"></div><small>PREMIUM</small><b>Tilt me</b><p>Move your cursor across the card to see 3D tilt + glare.</p></div></div>

<style>
.tw{width:100%;height:100%;min-height:380px;display:grid;place-items:center;perspective:700px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.tc{position:relative;width:230px;padding:20px;box-sizing:border-box;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:18px;overflow:hidden;transition:transform .35s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}.tc.m{transition:transform .08s}.tc small{font-size:10px;letter-spacing:.14em;color:#888}.tc b{display:block;font-size:22px;margin:8px 0}.tc p{margin:0;font-size:12px;color:#888;line-height:1.5}.gl{position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.14),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}.tc.m .gl{opacity:1}
</style>

<script>
(function(){var c=document.querySelector(".tc");c.onpointermove=function(e){var r=c.getBoundingClientRect(),x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;c.classList.add("m");c.style.transform="rotateX("+((.5-y)*18)+"deg) rotateY("+((x-.5)*18)+"deg)";c.style.setProperty("--x",x*100+"%");c.style.setProperty("--y",y*100+"%")};c.onpointerleave=function(){c.classList.remove("m");c.style.transform=""}})();
</script>

<div class="bsw"><button class="op">Open bottom sheet</button><div class="ov"></div><div class="sh"><div class="hd"><i></i></div><h5>Share this file</h5><p>Anyone with the link can view.</p><div class="gr"><span><svg viewBox="0 0 24 24"><rect x="8" y="8" width="11" height="11" rx="2"/><path d="M5 15V6a1 1 0 011-1h9"/></svg>Copy link</span><span><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>Email</span><span><svg viewBox="0 0 24 24"><path d="M4 5h16v11H9l-5 4z"/></svg>Message</span><span><svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/></svg>More</span></div><button class="cn">Cancel</button></div></div>

<style>
.bsw{position:relative;width:340px;height:330px;overflow:hidden;border-radius:18px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.op{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 20px;border-radius:999px;border:1px solid #2a2a2a;background:#1b1b1b;color:#f1f1f1;font:600 13px/1 inherit;cursor:pointer}.ov{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}.bsw.open .ov{opacity:1;pointer-events:auto}.sh{position:absolute;left:0;right:0;bottom:0;padding:0 18px 18px;border-radius:22px 22px 0 0;background:#1c1c1c;border-top:1px solid #2c2c2c;transform:translateY(105%);transition:transform .5s cubic-bezier(.3,1.15,.4,1);touch-action:none}.bsw.open .sh{transform:none}.sh.drag{transition:none}.hd{display:grid;place-items:center;padding:10px 0 12px;cursor:grab}.hd i{width:38px;height:4px;border-radius:2px;background:#444}.sh h5{margin:0 0 4px;font-size:15px}.sh p{margin:0 0 14px;font-size:12px;color:#8a8a8a}.gr{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gr span{display:grid;justify-items:center;gap:7px;padding:12px 4px;border-radius:12px;background:#242424;font-size:11px;color:#cfcfcf;cursor:pointer;transition:background .2s,transform .2s}.gr span:hover{background:#2c2c2c;transform:translateY(-2px)}.gr svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.cn{width:100%;margin-top:12px;padding:12px;border:0;border-radius:12px;background:#2a2a2a;color:#fff;font:600 13px/1 inherit;cursor:pointer}
</style>

<script>
(function(){var r=document.querySelector('.bsw'),s=r.querySelector('.sh'),y0=0,dy=0,d=false;function c(){r.classList.remove('open');s.style.transform=''}r.querySelector('.op').onclick=function(){r.classList.add('open')};r.querySelector('.ov').onclick=c;r.querySelector('.cn').onclick=c;document.addEventListener('keydown',function(e){if(e.key==='Escape')c()});s.onpointerdown=function(e){if(e.target.closest('.gr,.cn'))return;d=true;y0=e.clientY;dy=0;s.classList.add('drag');s.setPointerCapture(e.pointerId)};s.onpointermove=function(e){if(!d)return;dy=Math.max(0,e.clientY-y0);s.style.transform='translateY('+dy+'px)'};s.onpointerup=function(){if(!d)return;d=false;s.classList.remove('drag');if(dy>70){c()}else{s.style.transform=''}}})();
</script>

<div class="pv"><div class="w"><button class="b1">Edit profile</button><div class="pop p1"><h5>Edit profile</h5><label>Display name<input value="Asha Rao"></label><label>Short bio<input value="Product designer"></label><div class="ac"><button class="ghost">Cancel</button><button class="solid">Save</button></div></div></div><div class="w"><button class="b2">Hover me</button><div class="pop p2"><div class="av">AR</div><div><b>Asha Rao</b><span>@asha</span><p>Designs calm, fast interfaces. Based in Vizag.</p></div></div></div></div>

<style>
.pv{display:flex;gap:14px;align-items:flex-start;width:340px;height:260px;padding-top:70px;justify-content:center;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.w{position:relative}.w>button{padding:11px 18px;border-radius:999px;border:1px solid #2a2a2a;background:#1b1b1b;color:#f1f1f1;font:600 13px/1 inherit;cursor:pointer;transition:background .2s}.w>button:hover{background:#262626}.pop{position:absolute;top:calc(100% + 10px);left:50%;width:230px;margin-left:-115px;padding:14px;border-radius:16px;border:1px solid #2e2e2e;background:#1c1c1c;box-shadow:0 20px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(-8px) scale(.94);transform-origin:top center;pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.3,1.4,.5,1);z-index:5}.pop.open{opacity:1;transform:none;pointer-events:auto}.pop h5{margin:0 0 10px;font-size:13px}.pop label{display:block;margin-bottom:9px;font-size:11px;color:#8a8a8a}.pop input{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:9px 10px;border-radius:9px;border:1px solid #2f2f2f;background:#141414;color:#fff;font:13px/1 inherit;outline:0;transition:border-color .2s,box-shadow .2s}.pop input:focus{border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.2)}.ac{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.ac button{padding:8px 14px;border-radius:9px;border:0;font:600 12px/1 inherit;cursor:pointer}.ghost{background:#262626;color:#ddd}.solid{background:#0a84ff;color:#fff}.p2{display:flex;gap:11px;width:240px;margin-left:-120px}.av{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#f472b6,#6366f1);display:grid;place-items:center;font-size:12px;font-weight:700}.p2 b{display:block;font-size:13px}.p2 span{font-size:11px;color:#8a8a8a}.p2 p{margin:7px 0 0;font-size:12px;line-height:1.45;color:#b5b5b5}
</style>

<script>
(function(){var p1=document.querySelector('.p1'),p2=document.querySelector('.p2'),b1=document.querySelector('.b1'),b2=document.querySelector('.b2'),t;b1.onclick=function(e){e.stopPropagation();p1.classList.toggle('open')};document.addEventListener('click',function(e){if(!p1.contains(e.target))p1.classList.remove('open')});document.addEventListener('keydown',function(e){if(e.key==='Escape'){p1.classList.remove('open');p2.classList.remove('open')}});p1.querySelectorAll('.ac button').forEach(function(b){b.onclick=function(){p1.classList.remove('open')}});var w=b2.parentNode;w.onmouseenter=function(){clearTimeout(t);t=setTimeout(function(){p2.classList.add('open')},150)};w.onmouseleave=function(){clearTimeout(t);t=setTimeout(function(){p2.classList.remove('open')},120)};b2.onfocus=function(){p2.classList.add('open')};b2.onblur=function(){p2.classList.remove('open')}})();
</script>

<div class="avg"><span style="--g:linear-gradient(135deg,#f472b6,#be123c)" title="Aria">A</span><span style="--g:linear-gradient(135deg,#fbbf24,#b45309)" title="Marcus">M</span><span style="--g:linear-gradient(135deg,#7dd3fc,#2563eb)" title="Leah">L</span><span style="--g:linear-gradient(135deg,#a78bfa,#4c1d95)" title="Dev">D</span><span class="more" title="4 more">+4</span></div>

<style>
.avg{display:flex;font-family:system-ui,-apple-system,sans-serif;padding:14px}.avg span{width:44px;height:44px;border-radius:50%;background:var(--g);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center;margin-left:-14px;border:2px solid #161616;transition:margin .35s cubic-bezier(.3,1.3,.5,1),transform .3s cubic-bezier(.3,1.5,.5,1);cursor:pointer}.avg span:first-child{margin-left:0}.avg span.more{background:#f3f3f3;color:#111;font-size:14px}.avg:hover span{margin-left:6px}.avg:hover span:first-child{margin-left:0}.avg span:hover{transform:translateY(-6px) scale(1.12);z-index:2}
</style>

<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='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='sn'><header><span>NOTE TO SELF</span><svg width='13' height='15' viewBox='0 0 24 24' fill='none' stroke='#777' stroke-width='2'><path d='M6 3h12v18l-6-4-6 4z'/></svg></header><q>Design is not just what it looks like and feels like. Design is how it works.</q><cite>— S. Jobs</cite><label><input type='checkbox'><i></i>Ship the MVP</label><label><input type='checkbox'><i></i>Write tests</label><label><input type='checkbox'><i></i>Review PR #42</label></div>

<style>
.sn{width:min(270px,92%);margin:auto;padding:14px 16px 16px;background:#fffbe6;border:1px solid #ece5b9;box-shadow:5px 5px 0 #ebe3b0;font-family:Inter,Arial,sans-serif;color:#333}.sn header{display:flex;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid #efe8bf;font:9.5px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#8a8456}.sn q{display:block;margin:12px 0 4px;font:italic 14px/1.45 Georgia,serif;color:#444;quotes:none}.sn cite{display:block;margin-bottom:14px;text-align:right;font:11px Georgia,serif;color:#999}.sn label{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:13px;cursor:pointer}.sn input{position:absolute;opacity:0}.sn label i{width:13px;height:13px;border:1.3px solid #cfc79a;background:#fffdf0;display:grid;place-items:center}.sn input:checked+i:after{content:'';width:3px;height:7px;border:solid #444;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-1px,-1px)}.sn input:checked~*{}.sn label:has(input:checked){text-decoration:line-through;color:#999}
</style>

<article class='mc'><span class='p'>FEATURED</span><div class='t'><small>ISSUE #24 · DESIGN</small><h4>The Art of<br><b>Minimal Interfaces</b></h4><div class='f'><span>By Alex Rivera · 8 min read</span><i>→</i></div></div></article>

<style>
.mc{position:relative;width:min(240px,86%);aspect-ratio:3/4.1;margin:auto;border-radius:22px;overflow:hidden;background:linear-gradient(#a9c0bb 0,#c6cfc0 22%,#b49b32 23%,#8d7a22 55%,#3a3a1c 85%,#1a1a12 100%);font-family:Inter,Arial,sans-serif;color:#fff}.mc:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.75))}.mc .p{position:absolute;left:12px;top:12px;z-index:1;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.28);font-size:10px;font-weight:600;letter-spacing:.08em;backdrop-filter:blur(6px)}.mc .t{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px;text-align:center}.mc small{font:9.5px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#ddd}.mc h4{margin:8px 0 14px;font-size:17px;font-weight:400}.mc h4 b{font-weight:700}.mc .f{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:#ccc}.mc .f i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);font-style:normal;font-size:14px;color:#fff}
</style>

<div class='dm'><h4>Your daily<br>motivation<br>for this Week</h4><svg class='f' width='46' height='46' viewBox='0 0 48 48' fill='none' stroke='#2d4a43' stroke-width='5'><circle cx='15' cy='15' r='8'/><circle cx='33' cy='15' r='8'/><circle cx='15' cy='33' r='8'/><circle cx='33' cy='33' r='8'/></svg><div class='pl'><i></i></div><span class='st'>GOOD DAY!</span></div>

<style>
.dm{position:relative;width:min(340px,92%);height:430px;margin:auto;padding:22px;background:#f1f1e6;font-family:Georgia,serif;color:#2d4a43;overflow:hidden;border-radius:6px}.dm h4{margin:0;font-size:26px;line-height:1.08;font-weight:400;letter-spacing:-.02em}.dm .f{position:absolute;right:24px;top:24px}.pl{position:absolute;right:-12px;bottom:34px;width:58%;height:60%;padding:8px 8px 34px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);transform:rotate(8deg)}.pl i{display:block;width:100%;height:100%;background:linear-gradient(#8f7fb0 0,#d9857a 40%,#f19a52 62%,#3f5b2c 63%,#2d4025 100%)}.st{position:absolute;left:26%;bottom:34px;padding:9px 16px;background:#ddd5f4;border:3px solid #8b7bc7;border-radius:999px;font:700 11px Inter,Arial,sans-serif;letter-spacing:.04em;transform:rotate(-5deg)}
</style>

<div class='tk'><div class='tk-m'><small class='o'>ADMIT ONE</small><h4>Orbit Station</h4><p>Harbour Cinema</p><div class='g'><div><small>SCREEN</small><b>Screen 4 · IMAX</b></div><div><small>SEATS</small><b class='y'>G12, G13</b></div></div><div class='t'>🕓 7:45 PM    📍 Sat, 7 Jun</div><small class='id'>TKT-00421</small></div><div class='tk-s'><span>7:45 PM</span></div></div>

<style>
.tk{position:relative;display:flex;width:min(420px,94%);margin:auto;background:#0b0b0b;border-radius:16px;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}.tk-m{flex:1;padding:18px 20px}.tk small{display:block;font-size:9.5px;letter-spacing:.08em;color:#777}.tk small.o{color:#d97706;margin-bottom:8px}.tk h4{margin:0;font-size:22px;font-weight:700}.tk p{margin:4px 0 14px;font-size:13px;color:#7a7a7a}.g{display:flex;gap:30px;margin-bottom:12px}.g b{display:block;margin-top:3px;font-size:13.5px}.g .y{color:#f5a900}.t{font-size:13px;color:#ddd;margin-bottom:10px}.tk small.id{margin:0;font:10px ui-monospace,monospace;color:#555}.tk-s{position:relative;width:52px;background:#1a1a1a;display:grid;place-items:center}.tk-s span{writing-mode:vertical-rl;font-size:10px;letter-spacing:.1em;color:#666}.tk-s:before,.tk-s:after{content:'';position:absolute;left:-7px;width:14px;height:14px;border-radius:50%;background:var(--stage)}.tk-s:before{top:-7px}.tk-s:after{bottom:-7px}
</style>

<div class='cd'><small>COUNTDOWN</small><h4>Product launch</h4><p id='cdp'></p><div class='cd-n'><div><b id='cdd'>0</b><span>DAYS</span></div><div><b id='cdh'>0</b><span>HRS</span></div><div><b id='cdm'>0</b><span>MIN</span></div></div></div>

<style>
.cd{width:230px;margin:auto;padding:18px 20px 20px;background:#fff;border-radius:18px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.cd small{font-size:11.5px;letter-spacing:.06em;color:#8a8a8a}.cd h4{margin:6px 0 4px;font-size:17px;font-weight:600}.cd p{margin:0 0 14px;font-size:13px;color:#737373}.cd-n{display:flex;justify-content:space-between;padding-top:14px;border-top:1px solid #f0f0f0}.cd-n div{text-align:center;min-width:48px}.cd-n b{display:block;font-size:30px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.cd-n span{font-size:10.5px;color:#9a9a9a;letter-spacing:.04em}
</style>

<script>
const n=new Date();let t=new Date(n.getFullYear(),11,1);if(t<n)t=new Date(n.getFullYear()+1,11,1);document.getElementById('cdp').textContent=t.toLocaleDateString(undefined,{weekday:'long',month:'long',day:'numeric'});const tick=()=>{let s=Math.max(0,Math.floor((t-new Date())/1000));document.getElementById('cdd').textContent=Math.floor(s/86400);document.getElementById('cdh').textContent=Math.floor(s%86400/3600);document.getElementById('cdm').textContent=Math.floor(s%3600/60)};tick();setInterval(tick,1000);
</script>

<div class='tb'><div class='th'><h4>Users</h4><span id='usc'>1 selected</span></div><table><thead><tr><th><span class='ck' id='usa'></span></th><th>Name</th><th>Email</th><th>Role</th></tr></thead><tbody id='usb'></tbody></table></div>

<style>
.tb{width:min(580px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.th{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px}.th h4{margin:0;font-size:15px;font-weight:600}.th span{font-size:13px;color:#737373}.tb table{width:100%;border-collapse:collapse}.tb th{padding:11px 14px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:12px 14px;font-size:14px;border-top:1px solid #f4f4f4}.tb tr.sel td{background:#f8f8f8}.tb td:nth-child(3){color:#737373}.tb td:nth-child(2){font-weight:500}.ck{display:grid;place-items:center;width:17px;height:17px;border:1.5px solid #d4d4d4;border-radius:5px;background:#fff;cursor:pointer;transition:all .15s}.ck.on,.ck.mid{background:#111;border-color:#111}.ck.on:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.ck.mid:after{content:'';width:8px;height:2px;background:#fff;border-radius:2px}
</style>

<script>
const U=[['Arun Kapoor','arun@studio.dev','Admin',1],['Rupam Sen','rupam@studio.dev','Editor',0],['Ava Chen','ava@studio.dev','Viewer',0],['Sofia Ortiz','sofia@studio.dev','Editor',0]];const tb=document.getElementById('usb'),all=document.getElementById('usa'),c=document.getElementById('usc');const draw=()=>{tb.innerHTML=U.map((u,i)=>'<tr class="'+(u[3]?'sel':'')+'"><td><span class="ck '+(u[3]?'on':'')+'" data-i='+i+'></span></td><td>'+u[0]+'</td><td>'+u[1]+'</td><td>'+u[2]+'</td></tr>').join('');const n=U.filter(u=>u[3]).length;all.className='ck '+(n===U.length?'on':n?'mid':'');c.textContent=n+' selected'};tb.addEventListener('click',e=>{const k=e.target.closest('.ck');if(k){U[+k.dataset.i][3]^=1;draw()}});all.addEventListener('click',()=>{const v=U.every(u=>u[3])?0:1;U.forEach(u=>u[3]=v);draw()});draw();
</script>

<div class='tb'><div class='th'><div><h4>Team members</h4><p>4 people</p></div><a href='#'>Invite</a></div><table><thead><tr><th>Member</th><th>Role</th><th>Status</th><th></th></tr></thead><tbody><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fda4af,#fb7185)'>AK</i><div><b>Arun Kapoor</b><small>arun@studio.dev</small></div></div></td><td>Lead Engineer</td><td><span class='st on'>Active</span></td><td class='m'>⋯</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#a5b4fc,#6366f1)'>RS</i><div><b>Rupam Sen</b><small>rupam@studio.dev</small></div></div></td><td>Design Lead</td><td><span class='st on'>Active</span></td><td class='m'>⋯</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#86efac,#22c55e)'>AC</i><div><b>Ava Chen</b><small>ava@studio.dev</small></div></div></td><td>Product</td><td><span class='st on'>Active</span></td><td class='m'>⋯</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fcd34d,#f59e0b)'>SO</i><div><b>Sofia Ortiz</b><small>sofia@studio.dev</small></div></div></td><td>Research</td><td><span class='st'>Invited</span></td><td class='m'>⋯</td></tr></tbody></table></div>

<style>
.tb{width:min(580px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.th{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px 12px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.th a{font-size:13.5px;color:#111;text-decoration:none;padding:4px 8px;border-radius:7px}.th a:hover{background:#f4f4f4}.tb table{width:100%;border-collapse:collapse}.tb th{padding:11px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:11px 18px;font-size:14px;border-top:1px solid #f4f4f4}.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-right:12px;color:#fff;font:600 11px Inter,Arial,sans-serif;font-style:normal;flex:none}.who{display:flex;align-items:center}.who b{display:block;font-weight:500}.who small{display:block;font-size:12.5px;color:#737373}.tb td:nth-child(2){color:#525252}.st{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#404040}.st:before{content:'';width:7px;height:7px;border-radius:50%;background:#d4d4d4}.st.on:before{background:#10b981}.m{color:#9a9a9a;font-size:18px;text-align:center}@media(max-width:520px){.tb th:nth-child(2),.tb td:nth-child(2){display:none}}
</style>

<script>
document.querySelector('.th a').addEventListener('click',e=>e.preventDefault());
</script>

<div class='tb'><div class='th'><h4>Tasks</h4><p id='tkc'>1 of 4 done</p></div><table><thead><tr><th></th><th>Task</th><th>Assignee</th><th>Due</th></tr></thead><tbody id='tkb'></tbody></table></div>

<style>
.tb{width:min(560px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.th{padding:16px 18px 12px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tb table{width:100%;border-collapse:collapse}.tb th{padding:11px 14px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:12px 14px;font-size:14px;border-top:1px solid #f4f4f4;vertical-align:middle}.tb td:nth-child(2){font-weight:500}tr.done td:nth-child(2){text-decoration:line-through;color:#8a8a8a}.ck{display:grid;place-items:center;width:17px;height:17px;border:1.5px solid #d4d4d4;border-radius:5px;background:#fff;cursor:pointer;transition:all .15s}tr.done .ck{background:#111;border-color:#111}tr.done .ck:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.a{display:flex;align-items:center;gap:8px}.a i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font:600 9.5px Inter,Arial,sans-serif;font-style:normal}
</style>

<script>
const T=[['Ship table components','AK','Arun','#fb7185','Today',1],['Review notification polish','RS','Rupam','#6366f1','Tomorrow',0],['Update showcase copy','AC','Ava','#22c55e','Mar 12',0],['Fix mobile layout','SO','Sofia','#f59e0b','Mar 14',0]];const tb=document.getElementById('tkb'),c=document.getElementById('tkc');const draw=()=>{tb.innerHTML=T.map((t,i)=>'<tr class="'+(t[5]?'done':'')+'"><td><span class=ck data-i='+i+' role=checkbox></span></td><td>'+t[0]+'</td><td><div class=a><i style="background:'+t[3]+'">'+t[1]+'</i>'+t[2]+'</div></td><td>'+t[4]+'</td></tr>').join('');c.textContent=T.filter(t=>t[5]).length+' of '+T.length+' done'};tb.addEventListener('click',e=>{const k=e.target.closest('.ck');if(k){T[+k.dataset.i][5]^=1;draw()}});draw();
</script>

<div class='tb'><div class='th'><h4>Transactions</h4><p>This month</p></div><table><thead><tr><th>Description</th><th>Date</th><th class='r'>Amount</th></tr></thead><tbody id='ttb'></tbody></table><div class='pg'><button id='tp' aria-label='Previous'>‹</button><span id='tl'>Page 1 of 2</span><button id='tn' aria-label='Next'>›</button></div></div>

<style>
.tb{width:min(540px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.th{padding:16px 18px 14px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tb table{width:100%;border-collapse:collapse}.tb th{padding:12px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:14px 18px;font-size:14.5px;border-top:1px solid #f4f4f4}.tb td:nth-child(2){color:#737373}.r{text-align:right!important}.pg{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:13px;color:#525252}.pg button{width:30px;height:30px;border:0;border-radius:8px;background:none;font-size:20px;color:#111;cursor:pointer}.pg button:hover:not(:disabled){background:#f4f4f4}.pg button:disabled{color:#d0d0d0;cursor:default}
</style>

<script>
const P1=[['Payment from Northwind','Mar 8','+$420.00'],['AWS infrastructure','Mar 8','−$31.20'],['Stripe payout','Mar 7','+$890.00'],['Refund — Order #3207','Mar 6','−$64.00'],['Client retainer','Mar 5','+$250.00']],P2=[['Domain renewal','Mar 4','−$18.00'],['Payment from Harbor Labs','Mar 3','+$640.00'],['Design software','Mar 2','−$24.00'],['Consulting invoice','Mar 1','+$1,200.00'],['Office supplies','Feb 28','−$46.50']];let p=0;const tb=document.getElementById('ttb'),a=document.getElementById('tp'),b=document.getElementById('tn'),l=document.getElementById('tl');const draw=()=>{tb.innerHTML=(p?P2:P1).map(x=>'<tr><td>'+x[0]+'</td><td>'+x[1]+'</td><td class=r>'+x[2]+'</td></tr>').join('');a.disabled=!p;b.disabled=!!p;l.textContent='Page '+(p+1)+' of 2'};a.onclick=()=>{p=0;draw()};b.onclick=()=>{p=1;draw()};draw();
</script>

<div class='tb'><div class='th'><h4>Recent orders</h4><p>Last 7 days</p></div><table><thead><tr><th>Order</th><th>Customer</th><th><button data-k='1'>Date <i></i></button></th><th class='r'><button data-k='2'>Total <i></i></button></th><th>Status</th></tr></thead><tbody id='otb'></tbody></table></div>

<style>
.tb{width:min(560px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.tb table{width:100%;border-collapse:collapse}.tb th{padding:12px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-bottom:1px solid #f0f0f0}.tb td{padding:13px 18px;font-size:14px;border-top:1px solid #f4f4f4}.tb tbody tr:first-child td{border-top:0}.r{text-align:right!important}.th{padding:16px 18px 14px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tb th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}.tb th button i{font-style:normal;opacity:.35;font-size:11px}.tb th button.on i{opacity:1}.tb td:first-child{font-weight:600}.tb td:nth-child(3){color:#737373}.tb td:last-child{font-size:13px}
</style>

<script>
const D=[['#3210','Northwind Studio','Mar 8',248,'Fulfilled'],['#3209','Harbor Labs','Mar 8',92,'Processing'],['#3208','Elm & Co.','Mar 7',156,'Fulfilled'],['#3207','Papertrail','Mar 6',64,'Cancelled'],['#3206','Studio Nine','Mar 5',312,'Fulfilled']];let k=1,d=-1;const tb=document.getElementById('otb'),bs=document.querySelectorAll('.tb th button');const draw=()=>{const r=[...D].sort((a,b)=>k===2?(a[3]-b[3])*d:(a[0]<b[0]?-1:1)*d*-1*(k===1?-1:1));tb.innerHTML=r.map(x=>'<tr><td>'+x[0]+'</td><td>'+x[1]+'</td><td>'+x[2]+'</td><td class=r>$'+x[3].toFixed(2)+'</td><td>'+x[4]+'</td></tr>').join('');bs.forEach(b=>{const on=+b.dataset.k===k;b.classList.toggle('on',on);b.lastElementChild.textContent=on?(d<0?'↓':'↑'):'⇅'})};bs.forEach(b=>b.addEventListener('click',()=>{const n=+b.dataset.k;if(k===n)d=-d;else{k=n;d=-1}draw()}));draw();
</script>