:root {--selected-hue: 120;--selected-saturation: 100%;--selected-lightness: 50%;--selected-color: hsl(var(--selected-hue), var(--selected-saturation), var(--selected-lightness));--daily-color: #000000;--app-color: hsl(var(--selected-hue), 24%, 71%);}body {background-color: #ecfeff;font-family: 'Instrument Serif', serif;color: #1f2121;margin: 0;padding: 0;display: flex;justify-content: center;align-items: flex-start;min-height: 100vh;}.container {width: 90%;max-width: 900px;text-align: center;padding: 3rem 0 6rem;}h1 {font-size: 7rem;font-weight: normal;margin: 0;}.subtitle {font-size: 2rem;margin-top: -0.6rem;font-weight: normal;}.color-picker {margin-top: 3rem;position: relative;}.color-gradient {width: 100%;height: 180px;border: 1px solid #1f2121;border-radius: 10px;position: relative;cursor: crosshair;background: url("colormap.png") no-repeat center center;background-size: 100% 100%;}.color-dot {background-color: var(--selected-color);position: absolute;top: 50%;left: 50%;width: 16px;height: 16px;border-radius: 50%;border: 2px solid #fff;box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);transform: translate(-50%, -50%) scale(1);transition: transform 0.15s ease, width 0.15s ease, height 0.15s ease;z-index: 5;}.color-dot.active {transform: translate(-50%, -50%) scale(1.5);}.guess-info {display: flex;justify-content: space-between;font-size: 1.3rem;margin: 0.6rem 0;}.guess-btn {background-color: var(--app-color);border: none;color: #1f2121;font-size: 1.5rem;padding: 0.9rem 1.5rem;cursor: pointer;width: 100%;font-family: inherit;font-weight: normal;border-radius: 10px;transition: opacity 0.2s ease, transform 0.1s ease;}.guess-btn:hover {opacity: 0.9;transform: scale(1.01);}.guesses {margin-top: 4rem;text-align: left;}.guesses h2 {font-size: 3rem;font-weight: normal;border-bottom: 1px solid #1f2121;margin-bottom: 1rem;}.guess-bar {display: flex;justify-content: space-between;padding: 0.8rem 1rem;font-size: 1.3rem;color: #1f2121;margin-bottom: 0.8rem;border-radius: 10px;}footer.scroll-tip {position: fixed;bottom: 0;left: 0;width: 100%;text-align: center;background: linear-gradient(to top, #ecfeff 60%, rgba(236, 254, 255, 0));padding: 1rem 0 1.5rem;font-size: 1.2rem;font-weight: normal;pointer-events: none;}.splotches {position: fixed;inset: 0;pointer-events: none;z-index: 2;}.splotch {position: absolute;width: clamp(120px, 20vw, 260px);height: auto;}.splotch1 {top: 0;left: 0;transform: translate(-10%, -40%);}.splotch2 {top: 0;right: 0;transform: translate(25%, -40%);}.splotch3 {bottom: 0;left: 0;transform: translate(-10%, 25%);}.splotch4 {bottom: 0;right: 0;transform: translate(20%, 50%);}.arrow-label {position: absolute;right: -140px;top: 50%;transform: translateY(-40%);display: flex;flex-direction: column;align-items: center;text-align: center;gap: 0.3rem;pointer-events: none;}.arrow-label img.arrow {width: clamp(60px, 8vw, 90px);height: auto;transform: rotate(-10deg);opacity: 0.9;transition: transform 0.4s ease;}.arrow-label p {font-size: 1.2rem;font-weight: normal;margin: 0;color: #1f2121;max-width: 120px;line-height: 1.2;transform: rotate(10deg);}@media (max-width: 1200px) {.arrow-label {position: static;margin-top: 1rem;transform: none;right: auto;top: auto;flex-direction: row;justify-content: center;gap: 0.6rem;}.arrow-label img.arrow {transform: rotate(90deg) scaleY(-1);width: clamp(50px, 15vw, 70px);}.arrow-label p {max-width: none;font-size: 1rem;}}.guess-dot {position: absolute;width: 14px;height: 14px;border-radius: 50%;transform: translate(-50%, -50%);cursor: pointer;transition: transform 0.15s ease;z-index: 5;}.guess-dot:hover {transform: translate(-50%, -50%) scale(1.2);}.guess-tooltip {position: absolute;top: 140%;left: 50%;transform: translate(-50%, 10px);background: rgba(255, 255, 255, 0.95);color: #1f2121;padding: 0.3rem 0.6rem;border-radius: 6px;font-size: 0.9rem;white-space: nowrap;pointer-events: none;opacity: 0;transition: opacity 0.2s ease, transform 0.2s ease;max-width: 160px;z-index: 20;}.popup-overlay {position: fixed;inset: 0;background: rgba(31, 33, 33, 0.4);backdrop-filter: blur(3px);z-index: 100;opacity: 0;transition: opacity 0.25s ease;pointer-events: none;}.popup-overlay.active {opacity: 1;pointer-events: all;}.popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.9);background: #ecfeff;border: 1px solid #1f2121;border-radius: 16px;padding: 2.5rem 2rem;width: min(90%, 420px);text-align: center;font-family: 'Instrument Serif', serif;color: #1f2121;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);z-index: 101;opacity: 0;transition: all 0.25s ease;}.popup.active {opacity: 1;transform: translate(-50%, -50%) scale(1);}.popup h2 {font-size: 2.5rem;margin: 0 0 0.5rem;}.popup p {font-size: 1.3rem;margin: 0 0 1.5rem;}.popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ecfeff;border: 1px solid #1f2121;border-radius: 16px;padding: 2.5rem 2rem;width: min(90%, 420px);text-align: center;font-family: 'Instrument Serif', serif;color: #1f2121;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);z-index: 101;display: none;flex-direction: column;align-items: center;justify-content: center;pointer-events: none;opacity: 0;transition: opacity 0.25s ease;}.popup[style*="display: flex"] {display: flex;pointer-events: all;}.popup button {all: unset;display: inline-block;background-color: var(--app-color, #9ab58a);color: #1f2121;border-radius: 10px;padding: 0.7rem 1.4rem;margin-top: 0.8rem;font-family: 'Instrument Serif', serif;font-size: 1.2rem;text-align: center;cursor: pointer;transition: opacity 0.2s ease, transform 0.1s ease;}.popup button:hover {opacity: 0.9;transform: scale(1.03);}.daily-color {font-weight: bold;color: var(--daily-color, #000);padding: 0.1rem 0.4rem;border-radius: 6px;background-color: rgba(0, 0, 0, 0.05);transition: color 0.3s ease, background-color 0.3s ease;}