/* Page-only styles. Do not reach into <zodi-clock> internals. */
:root{
  --zodi-page-bg:#0f1218;
  --zodi-page-fg:#e6e7eb;
  --zodi-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--zodi-page-bg);color:var(--zodi-page-fg);font-family:var(--zodi-font)}

/* index header layout */
.wrap{max-width:1080px;margin:0 auto;padding:24px}
.title{
  font:800 48px/1.1 Menlo,Consolas,"Source Code Pro","Roboto Mono",ui-monospace,monospace;
  letter-spacing:.01em; font-variant-numeric: slashed-zero;
  font-feature-settings:"zero" 1;
  margin:0 0 12px;
}
.panel{background:#111318;border:1px solid #1c1f26;border-radius:16px;padding:12px}
.notice{color:#9aa0aa;font-size:12px;margin-top:8px}
a{color:#8ab4ff}

/* controls (index + embed) */
.controls{display:flex;gap:.5rem;align-items:center;margin:12px 0;flex-wrap:wrap}
.controls button{
  font:600 14px system-ui; padding:10px 14px; border-radius:10px; border:1px solid #444;
}
.controls input{
  font:500 14px system-ui; padding:8px 10px; border-radius:10px; border:1px solid #444; min-width:280px;
}
@media (min-width:768px){
  .controls button{font-size:16px;padding:12px 16px}
  .controls input{font-size:16px;padding:10px 12px;min-width:360px}
}

/* container helpers for the component */
.zodi-container{display:block;width:100%}
.zodi-container--narrow{max-width:960px}
.zodi-container--wide{max-width:2000px}
.aspect-square{aspect-ratio:1/1}