.browsehappy{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}body,html{margin:0;padding:0;min-height:100%}body{background:radial-gradient(ellipse at 50% 30%,#f6f5f3 0,#e6e4e1 60%,#d9d7d3 100%) fixed;color:#2b2c2e;font-family:Barlow,'DIN Next','DIN Pro','Helvetica Neue',Arial,sans-serif}.app{display:flex;flex-direction:column;min-height:100vh}.view{flex:1;display:flex;flex-direction:column}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px 24px}.qlocktwo{--size:min(calc(100vw - 32px), 72vh, 640px);--unlit:rgba(255, 255, 255, 0.26);--lit:#fff;--glow:0 0 0.25em rgba(255, 255, 255, 0.5),0 0 0.9em rgba(255, 255, 255, 0.15);--dot:rgba(255, 255, 255, 0.55);position:relative;width:var(--size);height:var(--size);font-size:calc(var(--size) * .05);background:linear-gradient(135deg,#47494d 0,#36383b 45%,#2c2e31 100%);box-shadow:.6em .9em 1.8em rgba(0,0,0,.28),.15em .2em .35em rgba(0,0,0,.18);cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;transition:background .6s ease}.qlocktwo:-webkit-full-screen{--size:min(100vw, 100vh);margin:auto;box-shadow:none}.qlocktwo:-ms-fullscreen{--size:min(100vw, 100vh);margin:auto;box-shadow:none}.qlocktwo:fullscreen{--size:min(100vw, 100vh);margin:auto;box-shadow:none}.letters{position:absolute;top:15%;bottom:15%;left:15.5%;right:15.5%;display:flex;flex-direction:column;justify-content:space-between}.letter-row{display:flex;justify-content:space-between}.letter{width:1em;text-align:center;font-weight:400;line-height:1;color:var(--unlit);transition:color .8s ease,text-shadow .8s ease}.letter.lit{font-weight:500;color:var(--lit);text-shadow:var(--glow)}.minute-dot{position:absolute;width:.14em;height:.14em;border-radius:50%;background:var(--dot);opacity:.45;transition:opacity .8s ease,box-shadow .8s ease}.minute-dot.lit{background:var(--lit);opacity:1;box-shadow:var(--glow)}.minute-dot.top-left{top:5.5%;left:5.5%}.minute-dot.top-right{top:5.5%;right:5.5%}.minute-dot.bottom-right{bottom:5.5%;right:5.5%}.minute-dot.bottom-left{bottom:5.5%;left:5.5%}.finish-steel{--unlit:rgba(40, 42, 45, 0.32);--glow:0 0 0.3em rgba(255, 255, 255, 0.9),0 0 0.08em rgba(0, 0, 0, 0.35);--dot:rgba(40, 42, 45, 0.5);background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,rgba(0,0,0,.03) 1px,rgba(0,0,0,.03) 3px),linear-gradient(135deg,#d9dbdd 0,#b9bcc0 45%,#a4a7ab 100%)}.finish-pure-white{--unlit:rgba(0, 0, 0, 0.11);--glow:0 0 0.3em rgba(255, 255, 255, 1),0 0 0.06em rgba(0, 0, 0, 0.45);--dot:rgba(0, 0, 0, 0.2);background:linear-gradient(135deg,#fff 0,#f3f3f2 55%,#e8e8e6 100%)}.finish-slate{background:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.05),transparent 45%),radial-gradient(ellipse at 75% 70%,rgba(0,0,0,.25),transparent 50%),repeating-linear-gradient(170deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 2px,transparent 2px,transparent 9px),linear-gradient(135deg,#3a3b3c 0,#262728 60%,#1d1e1f 100%)}.caption{margin-top:40px;text-align:center}.caption h1{margin:0;font-size:22px;font-weight:500;letter-spacing:.32em}.caption h1 span{font-weight:300}.finish-name{margin:8px 0 14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7b7c7e}.finishes{display:flex;justify-content:center;gap:12px}.swatch{width:22px;height:22px;padding:0;border:1px solid rgba(0,0,0,.15);border-radius:50%;cursor:pointer;outline-offset:3px}.swatch.active{box-shadow:0 0 0 2px #e6e4e1,0 0 0 3px #2b2c2e}.swatch-black-pepper{background:#3a3c3f}.swatch-steel{background:linear-gradient(135deg,#e0e2e4,#a4a7ab)}.swatch-pure-white{background:#fff}.swatch-slate{background:linear-gradient(135deg,#3a3b3c,#1d1e1f)}.footer{padding:16px;text-align:center;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#8d8e90}.footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2)}.footer p{margin:0}