.hourglass-lab { --hg-teal: #145b63; --hg-gold: #c98b21; max-width: 1200px; }
.hourglass-lab [hidden] { display: none !important; }
.hg-panel { border: 1px solid #b9ced1; border-radius: 20px; padding: clamp(18px,3vw,32px); background: #fffdf8; }
.hg-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.hg-fields label { font-weight: 650; }
.hg-fields input { margin-top: 8px; }
.hg-panel h2 { font-size: clamp(1.3rem,2.5vw,1.7rem); margin: 1.3em 0 .6em; }
.hg-panel h2:first-child { margin-top: 0; }
.hg-panel summary { cursor: pointer; color: var(--hg-teal); font-weight: 650; }
.hg-notice { border-radius: 12px; padding: 18px; background: #e5f3ed; font-weight: 650; }
.hg-notice:empty { display: none; }
.hg-notice.hg-impossible { background: #fff1e9; border-left: 5px solid #a34120; }
.hg-equation { font-size: clamp(1.15rem,2.4vw,1.55rem); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hg-note { background: #eaf1f2; border-left: 4px solid var(--hg-teal); padding: 16px; }
.hg-k { max-width: 180px; }
.hg-verify { color: var(--hg-teal); font-weight: 700; }
.hg-stage { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: center; margin: 30px 0; }
.hg-timing { display: flex; flex-direction: column; gap: 5px; }
.hg-timing strong { font-size: 2.5rem; color: var(--hg-teal); font-variant-numeric: tabular-nums; }
.hg-timing p { margin-top: 12px; font-weight: 650; }
.hg-glass { text-align: center; }
.hg-glass h3 { font-size: 1.2rem; }
.hg-glass svg { width: 160px; max-width: 100%; height: 220px; }
.hg-glass p { font-size: .9rem; margin: 10px 0 0; }
.hg-glass strong { font-size: 1.5rem; color: var(--hg-teal); }
.hg-glass-bg { fill: #eaf5f7; }
.hg-outline { fill: none; stroke: #24535c; stroke-width: 3; }
.hg-frame { fill: none; stroke: #72543c; stroke-width: 7; stroke-linecap: round; }
.hg-sand { fill: var(--hg-gold); }
.hg-stream { stroke: var(--hg-gold); stroke-width: 2; stroke-dasharray: 3 4; }
.hg-current { min-height: 130px; padding: 18px; border-radius: 12px; background: #e5f3ed; margin-bottom: 20px; }
.hg-current p { margin: 8px 0 0; }
.hg-events { max-height: 480px; }
.hg-events th { position: sticky; top: 0; background: #f4eee2; z-index: 1; }
.hg-events tr.hg-active td { background: #d8eee8; }
.hg-events button { border: 1px solid #91b3b6; border-radius: 6px; padding: 3px 9px; color: var(--hg-teal); background: white; }
.hg-events td { vertical-align: middle; }
.hg-events button:focus-visible { outline: 3px solid #d39522; outline-offset: 2px; }
@media(max-width: 650px) {
    .hg-fields { grid-template-columns: 1fr; gap: 14px; }
    .hg-stage { grid-template-columns: 1fr 1fr; gap: 12px; }
    .hg-timing { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    .hg-timing p { grid-column: 1/-1; }
    .hg-timing strong { font-size: 1.8rem; }
    .hg-controls button { flex: 1 1 40%; }
}
@media(prefers-reduced-motion: reduce) { .hg-stream { stroke-dasharray: none; } }