:root{--page: #e9e6df;--fill: #f7f5f0;--border: rgba(0, 0, 0, .06);--text: #1c1b19;--secondary: #86827a;--accent: #e2552b;--radius: 28px;--pad: 18px;--gap: 16px;--small: 170px;--wide: 356px;--shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 24px -12px rgba(0, 0, 0, .12);--ease: cubic-bezier(.2, .8, .2, 1);--font: "Instrument Sans", system-ui, sans-serif}*{box-sizing:border-box;margin:0}body{background:var(--page);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}.stage{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}.set{display:grid;grid-template-columns:var(--small) var(--small) var(--small);grid-auto-rows:var(--small);gap:var(--gap)}.w-depth{grid-column:1;grid-row:1}.w-battery{grid-column:2;grid-row:1}.w-tide{grid-column:1 / span 2;grid-row:2}.w-wind{grid-column:3;grid-row:2}.widget{background:var(--fill);border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad);box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;overflow:hidden}.widget header{display:flex;justify-content:space-between;align-items:center;gap:8px}.title{font-size:13px;font-weight:500;line-height:16px;white-space:nowrap}.caption{font-size:11px;line-height:14px;color:var(--secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.value{font-size:44px;font-weight:500;line-height:44px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}.unit{font-size:13px;font-weight:500;letter-spacing:0;color:var(--secondary);margin-left:4px}.icon{width:16px;height:16px;flex:none;fill:none;stroke:var(--secondary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.rolling{display:inline-flex}.digit{display:inline-block;height:1em;line-height:1;overflow:hidden}.value .digit{height:44px;line-height:44px}.caption .digit{height:14px;line-height:14px;vertical-align:top}.digit-strip{display:flex;flex-direction:column;transition:transform .5s var(--ease)}.digit-strip span{height:inherit;display:block}.value .digit-strip span{height:44px}.caption .digit-strip span{height:14px}.w-depth .bottom{margin-top:auto;display:grid;gap:6px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:4px;vertical-align:1px}.ring{position:relative;width:96px;height:96px;margin:auto auto 0}.ring-track{fill:none;stroke:#00000012;stroke-width:8}.ring-fill{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}.ring-value{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center}.bars{margin-top:auto;display:flex;justify-content:space-between;height:98px}.bar-col{width:20px;display:flex;flex-direction:column;align-items:center;gap:6px}.bar-slot{flex:1;display:flex;align-items:flex-end}.bar{width:8px;border-radius:4px 4px 0 0;background:#00000024;transition:height .8s var(--ease)}.bar.now{background:var(--accent)}.bar-label{height:14px}.compass-wrap{margin-top:auto;display:flex;align-items:center;gap:10px}.compass{flex:none;overflow:visible}.compass-rim{fill:none;stroke:#0000001a;stroke-width:1.5}.compass-tick{stroke:var(--secondary);stroke-width:1.5;stroke-linecap:round}.needle{transform-origin:24px 24px;transition:transform .8s var(--ease)}.needle-n{fill:var(--accent)}.needle-s{fill:#0000002e}.w-wind .value{margin-top:8px}@media (max-width: 419.98px){.set{grid-template-columns:1fr;width:100%}.w-depth,.w-battery,.w-tide,.w-wind{grid-column:1;grid-row:auto}}@media (prefers-reduced-motion: reduce){.digit-strip,.ring-fill,.needle,.bar{transition:none}}.reduced .digit-strip,.reduced .ring-fill,.reduced .needle,.reduced .bar{transition:none}