:root{--page-background: #f8fafc;--page-text: #0f172a;--page-muted: #475569;--surface: rgba(255, 255, 255, 0.85);--surface-border: rgba(15, 23, 42, 0.08)}*{box-sizing:border-box}body.theme-switch-page{margin:0;min-height:100vh;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:var(--page-text);background:radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 32%),linear-gradient(180deg, #fff, var(--page-background))}.page-shell{width:min(1100px,100% - 2rem);margin:0 auto;padding:3rem 0 4rem}.page-header{max-width:56rem;margin-bottom:2rem}.eyebrow,.demo-label{margin:0 0 .6rem;color:#1d4ed8;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1,h2,p,span{margin:0}h1{font-size:clamp(2.4rem,5vw,4rem);line-height:.95}h2{font-size:1.45rem}.page-copy,.demo-copy{margin-top:.9rem;color:var(--page-muted);line-height:1.7}.demo-grid{display:grid;gap:1.25rem}.demo-card{display:grid;gap:1.2rem;padding:1.5rem;border:1px solid var(--surface-border);border-radius:1.25rem;background:var(--surface);box-shadow:0 20px 35px rgba(15,23,42,.08)}.theme-clock{--primary-color: #000;--secondary-color: #fff;justify-items:center;text-align:center;transition:all .5s ease-in}.theme-clock.dark{--primary-color: #fff;--secondary-color: #333;background-color:#111;color:var(--primary-color)}.toggle{cursor:pointer;background-color:var(--primary-color);color:var(--secondary-color);border:0;border-radius:4px;padding:8px 12px}.clock-container{display:flex;flex-direction:column;align-items:center;gap:.75rem}.clock{position:relative;width:200px;height:200px}.needle{position:absolute;top:50%;left:50%;width:3px;height:65px;background-color:var(--primary-color);transform-origin:bottom center;transition:all .5s ease-in}.needle.hour{transform:translate(-50%, -100%) rotate(0deg)}.needle.minute{height:100px;transform:translate(-50%, -100%) rotate(0deg)}.needle.second{height:100px;background-color:#e74c3c;transform:translate(-50%, -100%) rotate(0deg)}.center-point{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background-color:#e74c3c;transform:translate(-50%, -50%)}.center-point::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background-color:var(--primary-color);transform:translate(-50%, -50%)}.time{font-size:60px}.date{color:#94a3b8;font-size:14px;letter-spacing:.3px;text-transform:uppercase}.date .circle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--primary-color);color:var(--secondary-color);font-size:12px;line-height:18px;transition:all .5s ease-in}