:root{
  --night:#020817;--blue:#071b3a;--blue2:#0b2851;
  --gold:#c79a43;--gold2:#f2d38a;--gold3:#795018;
  --opal:#c7e7ff;--lilac:#e0c9ff;--pearl:#fff8dd;
}
*{box-sizing:border-box}
body{
  margin:0;padding:24px 12px;min-height:100vh;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 10%,rgba(62,94,173,.2),transparent 34rem),
    radial-gradient(circle at 10% 70%,rgba(159,102,190,.08),transparent 25rem),
    #01040b;color:#f8eed3;font-family:Georgia,"Times New Roman",serif;
}
.clock{
  width:min(96vw,760px);position:relative;padding:22px 22px 34px;
  background:linear-gradient(90deg,#02050c,#07172e 9%,#06152b 50%,#07172e 91%,#02050c);
  border:2px solid #8d682d;border-radius:50% 50% 24px 24px/13% 13% 24px 24px;
  box-shadow:0 30px 90px #000,inset 0 0 0 5px #020713,inset 0 0 0 7px rgba(242,211,138,.18);
  overflow:hidden;
}
.clock:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
   radial-gradient(circle at 10% 12%,#fff 0 1px,transparent 1.4px),
   radial-gradient(circle at 78% 8%,#e7c76f 0 1px,transparent 1.4px),
   radial-gradient(circle at 40% 24%,#fff 0 1px,transparent 1.4px),
   radial-gradient(circle at 92% 42%,#fff 0 1px,transparent 1.4px);
  background-size:113px 127px,149px 131px,171px 163px,137px 151px;
}
.crown{text-align:center;position:relative;z-index:2;margin:4px 0 12px;color:var(--gold2)}
.crown .moon{font-size:46px;filter:drop-shadow(0 0 12px rgba(199,231,255,.25))}
.crown h1{font-weight:400;letter-spacing:.25em;font-size:clamp(18px,4vw,29px);margin:2px 0}
.crown p{margin:0;font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.72}

.columns{display:grid;grid-template-columns:22px minmax(0,1fr) 22px;gap:8px;align-items:start}
.column{
 height:100%;min-height:580px;border-radius:999px;
 background:
  linear-gradient(90deg,#76501b,#e5c275 12%,rgba(199,231,255,.9) 25%,rgba(224,201,255,.72) 48%,rgba(255,248,221,.88) 65%,#b88736 88%,#573711);
 border:2px solid #a6782e;box-shadow:inset 0 0 13px #fff6,0 0 13px #000;
 opacity:.85;
}
.machine{min-width:0}

.face-frame{
 aspect-ratio:1;border-radius:50%;padding:13px;
 background:linear-gradient(145deg,#6d4514,#f0d084 16%,#8e6123 31%,#f7dea0 48%,#6e4614 65%,#e4bf6b 83%,#4b2d0c);
 box-shadow:0 0 0 3px #2b1808,0 0 0 7px rgba(211,174,95,.32),0 18px 35px #000;
}
.face{
 position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
 background:
  radial-gradient(circle at 50% 50%,rgba(62,112,184,.28),transparent 26%),
  radial-gradient(circle at 30% 25%,rgba(160,114,235,.13),transparent 26%),
  repeating-radial-gradient(circle at center,transparent 0 12%,rgba(211,174,95,.17) 12.2% 12.5%,transparent 12.8% 18%),
  #03152f;
 border:2px solid #1b1005;
}
.stars{position:absolute;inset:11%;border-radius:50%;opacity:.78;background-image:
 radial-gradient(circle at 13% 23%,#fff 0 1px,transparent 1.5px),
 radial-gradient(circle at 66% 19%,#e5c36d 0 1px,transparent 1.5px),
 radial-gradient(circle at 79% 62%,#fff 0 1px,transparent 1.5px),
 radial-gradient(circle at 31% 71%,#e5c36d 0 1px,transparent 1.5px);
 background-size:61px 67px,79px 73px,91px 83px,71px 89px}
.ticks{position:absolute;inset:2.5%;border-radius:50%;
 background:repeating-conic-gradient(from -1deg,rgba(244,217,150,.85) 0 1deg,transparent 1deg 6deg);
 -webkit-mask:radial-gradient(circle,transparent 0 94%,#000 94.3%);mask:radial-gradient(circle,transparent 0 94%,#000 94.3%)}
.ring{position:absolute;border:1px solid rgba(226,192,111,.52);border-radius:50%;inset:13%}
.ring.zodiac{inset:18%;animation:yearturn 180s linear infinite}
.ring.inner{inset:31%;border-color:rgba(199,231,255,.25)}

.number,.sign{position:absolute;left:50%;top:50%;color:var(--gold2);transform-origin:center;text-shadow:0 2px 5px #000}
.number{font-size:clamp(15px,4.2vw,34px);transform:translate(-50%,-50%) rotate(var(--a)) translateY(clamp(-245px,-32vw,-86px)) rotate(calc(var(--a)*-1))}
.sign{font-size:clamp(11px,2.6vw,21px);color:#d9b967;transform:translate(-50%,-50%) rotate(var(--a)) translateY(clamp(-187px,-24vw,-66px)) rotate(calc(var(--a)*-1))}

.orbit{position:absolute;inset:35%;border:1px solid rgba(205,225,255,.23);border-radius:50%}
.orbit-moon{
 position:absolute;left:50%;top:50%;width:9%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 32% 30%,#fffde9,#c8c0a7 60%,#777065);
 box-shadow:0 0 15px rgba(210,229,255,.48);
 transform:translate(-50%,-50%) rotate(var(--ma,0deg)) translateY(clamp(-105px,-14vw,-38px)) rotate(calc(var(--ma,0deg)*-1));
}

.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;z-index:7;border-radius:999px;filter:drop-shadow(0 2px 2px #000)}
.hour{height:24%;width:8px;margin-left:-4px;background:linear-gradient(90deg,#775018,#f7dea0,#775018)}
.minute{height:34%;width:5px;margin-left:-2.5px;background:linear-gradient(90deg,#80581d,#fff0b4,#80581d)}
.second{height:38%;width:2px;margin-left:-1px;background:#cce9ff;box-shadow:0 0 8px #b8ddff}
.pin{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#fff2b9,#c48e31 55%,#422407);box-shadow:0 0 0 5px #c69b4840}

.lunar{
 position:relative;margin:-2px auto 0;width:74%;padding:10px;border:2px solid #8e6427;border-radius:50% 50% 18px 18px;
 background:radial-gradient(circle at center,#102b50,#041229 70%);text-align:center;box-shadow:0 12px 24px #000;
}
.phase-row{display:flex;justify-content:center;gap:clamp(5px,2vw,15px);align-items:center}
.phase-row span{font-size:clamp(15px,4vw,28px);color:#f3dfae}
.phase-row .mainmoon{font-size:clamp(34px,9vw,67px);filter:drop-shadow(0 0 12px #d6e8ff66)}
#moonText{font-size:11px;color:#e4c77e;letter-spacing:.12em;text-transform:uppercase}

.gearbox{
 height:210px;margin:10px 7% 0;position:relative;overflow:hidden;border:2px solid #79551f;border-radius:12px;
 background:linear-gradient(rgba(2,7,16,.35),rgba(2,7,16,.7)),radial-gradient(circle at center,#122442,#020711 70%);
 box-shadow:inset 0 0 30px #000;
}
.gear{position:absolute;border:5px dotted #bb8e3d;border-radius:50%;opacity:.62;animation:spin 18s linear infinite}
.g1{width:105px;height:105px;left:7%;top:25px}.g2{width:85px;height:85px;right:9%;top:48px;animation-direction:reverse;animation-duration:14s}.g3{width:70px;height:70px;left:42%;top:18px;animation-duration:11s}
.gear:after{content:"✦";position:absolute;inset:16%;display:grid;place-items:center;border:2px solid #a77b31;border-radius:50%;color:#d6b467}
.pendulum{position:absolute;left:50%;top:7px;width:3px;height:145px;background:linear-gradient(#f2d68c,#75501d);transform-origin:top;animation:swing 2.25s ease-in-out infinite alternate}
.pendulum:after{content:"☾";position:absolute;left:50%;bottom:-35px;transform:translateX(-50%);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:34px;color:#1c3152;
 background:radial-gradient(circle at 35% 30%,#fff9d7,#d4a84e 60%,#76501b);border:2px solid #efd28b;box-shadow:0 6px 20px #000}

.readout{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 7% 0}
.panel{background:#020916c7;border:1px solid #8d682d;border-radius:9px;padding:10px;text-align:center}
.label{display:block;color:#b9914b;text-transform:uppercase;letter-spacing:.18em;font-size:9px;margin-bottom:5px}
#time{color:#f2d38a;font-size:clamp(21px,5vw,34px);font-variant-numeric:tabular-nums;letter-spacing:.05em}
#date{font-size:clamp(12px,2.4vw,16px);line-height:1.4}
.plaque{margin:12px auto 0;width:72%;padding:10px;text-align:center;border:1px solid #a77a30;border-radius:7px;color:#dcb967;
 background:#020815;letter-spacing:.17em;font-size:11px;text-transform:uppercase}
.plaque b{display:block;color:#f2d38a;font-weight:400;font-size:15px;margin-bottom:3px}

@keyframes spin{to{transform:rotate(360deg)}} @keyframes yearturn{to{transform:rotate(360deg)}}
@keyframes swing{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
@media(max-width:520px){.clock{padding:18px 10px 28px}.columns{grid-template-columns:12px minmax(0,1fr) 12px;gap:5px}.column{min-height:450px}.gearbox{height:175px}.pendulum{height:115px}.readout{grid-template-columns:1fr}.plaque{width:86%}}
@media(prefers-reduced-motion:reduce){.gear,.pendulum,.zodiac{animation:none}}