Old Times Pomodorro

When the love of time management goes beyond the management of love over time. ~ Rogue agent

This tailwind example is contributed by Hasan AlDoy (McDoy), on 26-Apr-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Timer,Time counter

Other Countdown Timer

Author Hasan AlDoy (McDoy)

Tailwind v3.4 424

Fork Fullscreen

<div class="luxury-toolbar">
        <div class="toolbar-title">
            <span id="mainTitle">الوقت الآن</span>
            <small id="mainSubtitle">Luxury 3D Leather Cube Clock</small>
            <em id="liveDateLine" dir="ltr"></em>
        </div>

<details class="target-picker">
            <summary>تغيير التاريخ والوقت</summary>

<div class="picker-panel" dir="ltr">
                <label>
                    Target Date & Time
                    <input id="targetDateTimeInput" type="datetime-local" />
                </label>

<button id="applyTargetDate" type="button">Apply Countdown</button>
                <button id="returnClockMode" type="button">Return to Clock</button>
            </div>
        </details>
    </div>

<div id="countdownLabels" class="countdown-labels" dir="ltr">
        <span>Day</span>
        <span>Hour</span>
        <span>Minute</span>
        <span>Second</span>
    </div>

<aside id="pomodoroPanel" class="pomodoro-panel" dir="ltr">
        <button id="pomodoroToggle" class="pomodoro-tab" type="button">
            <span>🍅</span>
            <strong>Pomodoro</strong>
        </button>

<div class="pomodoro-body">
            <div class="pomodoro-head">
                <div>
                    <span id="pomodoroModeLabel">Focus</span>
                    <small id="pomodoroPatternLabel">Adaptive pattern ready</small>
                </div>

<button id="pomodoroClear" type="button">Clear</button>
            </div>

<div>
                    <strong id="pomodoroTime">25:00</strong>
                    <small id="pomodoroState">Ready</small>
                </div>
            </div>

<div class="pomodoro-actions">
                <button id="pomodoroStartPause" type="button">Start</button>
                <button id="pomodoroSkip" type="button">Skip</button>
                <button id="pomodoroReset" type="button">Restart</button>
            </div>

<div class="pomodoro-presets">
                <button type="button" data-preset="classic">Classic</button>
                <button type="button" data-preset="deep">Deep</button>
                <button type="button" data-preset="sprint">Sprint</button>
            </div>

<div class="pomodoro-settings">
                <label>
                    Focus
                    <input id="pomodoroFocusInput" type="number" min="1" max="180" step="1" />
                </label>

<label>
                    Short Break
                    <input id="pomodoroShortInput" type="number" min="1" max="90" step="1" />
                </label>

<label>
                    Long Break
                    <input id="pomodoroLongInput" type="number" min="1" max="180" step="1" />
                </label>

<label>
                    Long Every
                    <input id="pomodoroEveryInput" type="number" min="2" max="12" step="1" />
                </label>
            </div>

<div class="pomodoro-switches">
                <label>
                    <input id="pomodoroAutoStart" type="checkbox" />
                    Auto start next phase
                </label>

<label>
                    <input id="pomodoroSmartPause" type="checkbox" />
                    Smart pause handoff
                </label>

<label>
                    <input id="pomodoroSound" type="checkbox" />
                    Soft tragic chime
                </label>
            </div>

<div class="pomodoro-stats">
                <div>
                    <strong id="pomodoroFocusCount">0</strong>
                    <span>Focus</span>
                </div>

<div>
                    <strong id="pomodoroBreakCount">0</strong>
                    <span>Breaks</span>
                </div>

<div>
                    <strong id="pomodoroStreak">0</strong>
                    <span>Streak</span>
                </div>
            </div>
        </div>
    </aside>

#luxury-countdown-app {
            position: fixed;
            inset: 0;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .11), transparent 30%),
                radial-gradient(circle at 82% 16%, rgba(245, 222, 179, .13), transparent 34%),
                radial-gradient(circle at 50% 118%, rgba(178, 92, 38, .27), transparent 50%),
                linear-gradient(180deg, #111827 0%, #05070d 48%, #020617 100%);
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;
            transition: background 1.2s ease;
        }

#luxury-countdown-app.sorrow {
            background:
                radial-gradient(circle at 18% 8%, rgba(148, 163, 184, .05), transparent 30%),
                radial-gradient(circle at 82% 16%, rgba(120, 53, 15, .08), transparent 34%),
                radial-gradient(circle at 50% 118%, rgba(88, 28, 28, .3), transparent 50%),
                linear-gradient(180deg, #090b10 0%, #020617 52%, #000 100%);
        }

#luxury-countdown-app::before {
            content: "";
            position: absolute;
            inset: -75%;
            z-index: 0;
            pointer-events: none;
            background:
                conic-gradient(from 120deg, transparent, rgba(255, 255, 255, .13), transparent 28%),
                radial-gradient(circle, rgba(255, 255, 255, .2) 0 1px, transparent 1px 100%);
            background-size: 100% 100%, 30px 30px;
            opacity: .34;
            animation: ambient-spin 32s linear infinite;
        }

@keyframes ambient-spin {
            to {
                transform: rotate(360deg);
            }
        }

.cinematic-veil {
            position: fixed;
            inset: 0;
            z-index: 30;
            pointer-events: none;
            opacity: 0;
            background:
                radial-gradient(circle at 50% 45%, transparent 0 20%, rgba(0, 0, 0, .45) 56%, rgba(0, 0, 0, .94) 100%),
                linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 35%, rgba(0, 0, 0, .9));
            transition: opacity 1.15s cubic-bezier(.17, .84, .25, 1);
        }

.cinematic-veil.playing {
            opacity: 1;
        }

.luxury-toolbar {
            position: absolute;
            top: 22px;
            left: 22px;
            right: 22px;
            z-index: 12;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            pointer-events: none;
        }

.toolbar-title {
            pointer-events: auto;
            padding: 14px 18px;
            border-radius: 20px;
            color: #f8fafc;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .045)),
                rgba(15, 23, 42, .5);
            border: 1px solid rgba(255, 255, 255, .12);
            box-shadow:
                0 20px 50px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .17);
            backdrop-filter: blur(16px);
            transition: filter .9s ease, transform .9s ease;
        }

#luxury-countdown-app.sorrow .toolbar-title {
            filter: grayscale(.45) brightness(.76);
            transform: translateY(3px);
        }

.toolbar-title span {
            display: block;
            font-size: clamp(22px, 3vw, 38px);
            font-weight: 950;
            line-height: 1.05;
            letter-spacing: -.04em;
            text-shadow: 0 12px 28px rgba(0, 0, 0, .42);
        }

.toolbar-title small,
        .toolbar-title em {
            display: block;
            margin-top: 5px;
            direction: ltr;
            color: rgba(248, 250, 252, .68);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            font-style: normal;
        }

.toolbar-title em {
            color: rgba(253, 230, 138, .85);
            letter-spacing: .08em;
        }

.target-picker {
            position: relative;
            pointer-events: auto;
            direction: rtl;
        }

.target-picker summary {
            list-style: none;
            cursor: pointer;
            user-select: none;
            padding: 12px 15px;
            border-radius: 999px;
            color: #fef3c7;
            font-size: 13px;
            font-weight: 900;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)),
                rgba(30, 41, 59, .56);
            border: 1px solid rgba(251, 191, 36, .24);
            box-shadow:
                0 18px 45px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .14);
            backdrop-filter: blur(16px);
        }

.target-picker summary::-webkit-details-marker {
            display: none;
        }

.picker-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 265px;
            padding: 14px;
            border-radius: 18px;
            color: #f8fafc;
            background: linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(2, 6, 23, .86));
            border: 1px solid rgba(255, 255, 255, .12);
            box-shadow:
                0 26px 70px rgba(0, 0, 0, .45),
                inset 0 1px 0 rgba(255, 255, 255, .12);
            backdrop-filter: blur(18px);
        }

.picker-panel label {
            display: grid;
            gap: 8px;
            color: rgba(248, 250, 252, .76);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.picker-panel input {
            width: 100%;
            box-sizing: border-box;
            border: 0;
            outline: 0;
            border-radius: 12px;
            padding: 11px 12px;
            color: #0f172a;
            background: #fff7ed;
            font: inherit;
            font-size: 13px;
            font-weight: 800;
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35);
        }

.picker-panel button {
            width: 100%;
            margin-top: 11px;
            border: 0;
            cursor: pointer;
            border-radius: 12px;
            padding: 11px 12px;
            color: #1c1917;
            background: linear-gradient(135deg, #fde68a, #f59e0b);
            font-size: 13px;
            font-weight: 950;
            box-shadow:
                0 14px 28px rgba(245, 158, 11, .24),
                inset 0 1px 0 rgba(255, 255, 255, .48);
        }

.picker-panel button + button {
            background: linear-gradient(135deg, #e2e8f0, #94a3b8);
        }

.three-countdown-stage {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

.three-countdown-stage canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

.countdown-labels {
            position: absolute;
            left: 50%;
            bottom: clamp(26px, 5vh, 54px);
            z-index: 8;
            width: min(78vw, 940px);
            transform: translateX(-50%);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: clamp(8px, 3vw, 42px);
            color: rgba(248, 250, 252, .78);
            font-size: clamp(10px, 1.2vw, 14px);
            font-weight: 950;
            letter-spacing: .16em;
            text-transform: uppercase;
            text-align: center;
            text-shadow: 0 8px 22px rgba(0, 0, 0, .52);
            pointer-events: none;
            transition: opacity .8s ease, filter .8s ease, transform .8s ease;
        }

#luxury-countdown-app.sorrow .countdown-labels {
            opacity: .72;
            filter: grayscale(.5) brightness(.76);
            transform: translateX(-50%) translateY(4px);
        }

.pomodoro-panel {
            position: fixed;
            z-index: 40;
            right: 0;
            bottom: 24px;
            width: 338px;
            max-width: calc(100vw - 26px);
            transform: translateX(calc(100% - 48px));
            transition: transform .48s cubic-bezier(.18, .9, .18, 1);
            color: #f8fafc;
            pointer-events: auto;
        }

.pomodoro-panel.open {
            transform: translateX(0);
        }

.pomodoro-tab {
            position: absolute;
            left: 0;
            top: 24px;
            transform: translateX(-100%);
            width: 48px;
            min-height: 148px;
            border: 0;
            cursor: pointer;
            border-radius: 18px 0 0 18px;
            color: #fff7ed;
            background:
                linear-gradient(180deg, rgba(248, 113, 113, .98), rgba(127, 29, 29, .92)),
                rgba(15, 23, 42, .76);
            box-shadow:
                0 22px 55px rgba(0, 0, 0, .42),
                inset 0 1px 0 rgba(255, 255, 255, .24);
            display: grid;
            place-items: center;
            gap: 8px;
        }

.pomodoro-tab strong {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 12px;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.pomodoro-body {
            border-radius: 24px 0 0 24px;
            padding: 16px;
            background:
                radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .16), transparent 34%),
                linear-gradient(145deg, rgba(15, 23, 42, .93), rgba(2, 6, 23, .88));
            border: 1px solid rgba(255, 255, 255, .12);
            border-right: 0;
            box-shadow:
                0 28px 80px rgba(0, 0, 0, .5),
                inset 0 1px 0 rgba(255, 255, 255, .13);
            backdrop-filter: blur(18px);
        }

.pomodoro-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

.pomodoro-head span {
            display: block;
            font-size: 18px;
            font-weight: 950;
            letter-spacing: -.03em;
        }

.pomodoro-head small,
        .pomodoro-clock small {
            display: block;
            margin-top: 3px;
            color: rgba(248, 250, 252, .62);
            font-size: 11px;
            font-weight: 800;
        }

.pomodoro-head button,
        .pomodoro-actions button,
        .pomodoro-presets button {
            border: 0;
            cursor: pointer;
            border-radius: 12px;
            font-weight: 950;
            font-size: 12px;
        }

.pomodoro-head button {
            padding: 8px 10px;
            color: #fecaca;
            background: rgba(127, 29, 29, .38);
            box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .2);
        }

.pomodoro-clock {
            position: relative;
            margin: 16px auto;
            width: 176px;
            height: 176px;
            display: grid;
            place-items: center;
        }

.pomodoro-clock svg,
        .pomodoro-clock > div {
            grid-area: 1 / 1;
        }

.pomodoro-clock svg {
            width: 176px;
            height: 176px;
            transform: rotate(-90deg);
            filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .32));
        }

.pomodoro-ring-bg {
            fill: none;
            stroke: rgba(255, 255, 255, .09);
            stroke-width: 8;
        }

.pomodoro-ring {
            fill: none;
            stroke: #f97316;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 326.7256;
            stroke-dashoffset: 0;
            transition: stroke-dashoffset .4s linear, stroke .28s ease;
        }

.pomodoro-clock > div {
            text-align: center;
        }

.pomodoro-clock strong {
            display: block;
            font-size: 38px;
            line-height: 1;
            letter-spacing: -.06em;
            font-weight: 950;
            text-shadow: 0 18px 38px rgba(0, 0, 0, .5);
        }

.pomodoro-actions {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 8px;
        }

.pomodoro-actions button {
            padding: 11px 10px;
            color: #fff7ed;
            background: rgba(255, 255, 255, .08);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
        }

.pomodoro-actions button:first-child {
            color: #1c1917;
            background: linear-gradient(135deg, #fed7aa, #f97316);
        }

.pomodoro-presets {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 10px;
        }

.pomodoro-presets button {
            padding: 9px 8px;
            color: #fde68a;
            background: rgba(251, 191, 36, .1);
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .18);
        }

.pomodoro-settings {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 9px;
            margin-top: 12px;
        }

.pomodoro-settings label {
            display: grid;
            gap: 5px;
            color: rgba(248, 250, 252, .68);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.pomodoro-settings input {
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            border: 0;
            outline: 0;
            border-radius: 11px;
            padding: 9px 10px;
            color: #fff7ed;
            background: rgba(255, 255, 255, .075);
            font-weight: 900;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
        }

.pomodoro-switches {
            display: grid;
            gap: 7px;
            margin-top: 12px;
        }

.pomodoro-switches label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(248, 250, 252, .74);
            font-size: 12px;
            font-weight: 800;
        }

.pomodoro-switches input {
            accent-color: #f97316;
        }

.pomodoro-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 13px;
        }

.pomodoro-stats div {
            padding: 10px 8px;
            border-radius: 14px;
            text-align: center;
            background: rgba(255, 255, 255, .065);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
        }

.pomodoro-stats strong {
            display: block;
            font-size: 20px;
            font-weight: 950;
        }

.pomodoro-stats span {
            display: block;
            margin-top: 2px;
            color: rgba(248, 250, 252, .58);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.pomodoro-panel.focus .pomodoro-ring {
            stroke: #f97316;
        }

.pomodoro-panel.shortBreak .pomodoro-ring {
            stroke: #22c55e;
        }

.pomodoro-panel.longBreak .pomodoro-ring {
            stroke: #38bdf8;
        }

@media (max-width: 720px) {
            .luxury-toolbar {
                top: 14px;
                left: 14px;
                right: 14px;
            }

.toolbar-title {
                padding: 12px 14px;
            }

.toolbar-title small {
                display: none;
            }

.target-picker summary {
                font-size: 0;
                padding: 12px;
            }

.target-picker summary::before {
                content: "⚙";
                font-size: 18px;
            }

.picker-panel {
                right: 0;
                width: min(265px, calc(100vw - 28px));
            }

.pomodoro-panel {
                bottom: 12px;
                width: min(338px, calc(100vw - 60px));
            }
        }
    </style>

const app = document.getElementById("luxury-countdown-app");
            const veil = document.getElementById("cinematicVeil");

const targetDateTimeInput = document.getElementById("targetDateTimeInput");
            const applyTargetDate = document.getElementById("applyTargetDate");
            const returnClockMode = document.getElementById("returnClockMode");

const pomodoroPanel = document.getElementById("pomodoroPanel");
            const pomodoroToggle = document.getElementById("pomodoroToggle");
            const pomodoroModeLabel = document.getElementById("pomodoroModeLabel");
            const pomodoroPatternLabel = document.getElementById("pomodoroPatternLabel");
            const pomodoroTime = document.getElementById("pomodoroTime");
            const pomodoroState = document.getElementById("pomodoroState");
            const pomodoroRing = document.getElementById("pomodoroRing");
            const pomodoroStartPause = document.getElementById("pomodoroStartPause");
            const pomodoroSkip = document.getElementById("pomodoroSkip");
            const pomodoroReset = document.getElementById("pomodoroReset");
            const pomodoroClear = document.getElementById("pomodoroClear");

const pomodoroFocusInput = document.getElementById("pomodoroFocusInput");
            const pomodoroShortInput = document.getElementById("pomodoroShortInput");
            const pomodoroLongInput = document.getElementById("pomodoroLongInput");
            const pomodoroEveryInput = document.getElementById("pomodoroEveryInput");
            const pomodoroAutoStart = document.getElementById("pomodoroAutoStart");
            const pomodoroSmartPause = document.getElementById("pomodoroSmartPause");
            const pomodoroSound = document.getElementById("pomodoroSound");

const pomodoroFocusCount = document.getElementById("pomodoroFocusCount");
            const pomodoroBreakCount = document.getElementById("pomodoroBreakCount");
            const pomodoroStreak = document.getElementById("pomodoroStreak");

const clone = (value) => JSON.parse(JSON.stringify(value));

const pad = (value, length = 2) => String(Math.max(0, Math.floor(value))).padStart(length, "0");

const clampNumber = (value, min, max, fallback) => {
                const parsed = Number.parseInt(value, 10);
                return Number.isNaN(parsed) ? fallback : Math.max(min, Math.min(max, parsed));
            };

const toLocalDateTimeValue = (timestamp) => {
                const date = new Date(timestamp);
                const offset = date.getTimezoneOffset();
                const local = new Date(date.getTime() - offset * 60000);
                return local.toISOString().slice(0, 16);
            };

const defaultTarget = new Date();
            defaultTarget.setFullYear(defaultTarget.getFullYear() + 1);

let targetDate = Number(localStorage.getItem(TARGET_KEY)) || defaultTarget.getTime();

targetDateTimeInput.value = toLocalDateTimeValue(targetDate);

const defaults = {
                settings: {
                    focus: 25,
                    short: 5,
                    long: 15,
                    every: 4,
                    autoStart: false,
                    smartPause: true,
                    sound: true
                },
                mode: "focus",
                remaining: 25 * 60,
                running: false,
                active: false,
                completedFocus: 0,
                completedBreaks: 0,
                streak: 0,
                pausePatterns: {
                    focusPaused: 0,
                    breakPaused: 0,
                    quickResume: 0
                },
                lastPauseAt: null,
                lastSavedAt: Date.now()
            };

let pomodoro = loadPomodoro();
            let appMode = pomodoro.active ? "pomodoro" : "clock";
            let lastTick = Date.now();
            let audioContext = null;

function loadPomodoro() {
                try {
                    const saved = JSON.parse(localStorage.getItem(POMODORO_KEY) || "null");

if (!saved || typeof saved !== "object") {
                        return clone(defaults);
                    }

return {
                        ...clone(defaults),
                        ...saved,
                        settings: {
                            ...defaults.settings,
                            ...(saved.settings || {})
                        },
                        pausePatterns: {
                            ...defaults.pausePatterns,
                            ...(saved.pausePatterns || {})
                        }
                    };
                } catch {
                    return clone(defaults);
                }
            }

function savePomodoro() {
                pomodoro.lastSavedAt = Date.now();
                localStorage.setItem(POMODORO_KEY, JSON.stringify(pomodoro));
            }

function modeDuration(mode = pomodoro.mode) {
                if (mode === "focus") {
                    return pomodoro.settings.focus * 60;
                }

if (mode === "longBreak") {
                    return pomodoro.settings.long * 60;
                }

return pomodoro.settings.short * 60;
            }

function nextMode() {
                if (pomodoro.mode !== "focus") {
                    return "focus";
                }

const nextFocus = pomodoro.completedFocus + 1;

return nextFocus % pomodoro.settings.every === 0 ? "longBreak" : "shortBreak";
            }

function formatTime(seconds) {
                const safe = Math.max(0, Math.ceil(seconds));
                const minutes = Math.floor(safe / 60);
                const secs = safe % 60;

return `${pad(minutes)}:${pad(secs)}`;
            }

function phaseText(mode) {
                if (mode === "longBreak") {
                    return "Long Break";
                }

if (mode === "shortBreak") {
                    return "Short Break";
                }

return "Focus";
            }

function patternText() {
                const { focusPaused, breakPaused, quickResume } = pomodoro.pausePatterns;

if (breakPaused >= 3 && breakPaused > focusPaused) {
                    return "Pattern: breaks hand off into focus";
                }

if (focusPaused >= 3 && focusPaused > breakPaused) {
                    return "Pattern: focus asks for recovery";
                }

if (quickResume >= 4) {
                    return "Pattern: quick resume detected";
                }

return "Adaptive pattern ready";
            }

function renderPomodoro() {
                pomodoroPanel.classList.toggle("focus", pomodoro.mode === "focus");
                pomodoroPanel.classList.toggle("shortBreak", pomodoro.mode === "shortBreak");
                pomodoroPanel.classList.toggle("longBreak", pomodoro.mode === "longBreak");

pomodoroModeLabel.textContent = phaseText(pomodoro.mode);
                pomodoroPatternLabel.textContent = patternText();
                pomodoroTime.textContent = formatTime(pomodoro.remaining);
                pomodoroState.textContent = pomodoro.running ? "Running" : pomodoro.active ? "Paused" : "Ready";
                pomodoroStartPause.textContent = pomodoro.running ? "Pause" : "Start";

pomodoroFocusInput.value = pomodoro.settings.focus;
                pomodoroShortInput.value = pomodoro.settings.short;
                pomodoroLongInput.value = pomodoro.settings.long;
                pomodoroEveryInput.value = pomodoro.settings.every;
                pomodoroAutoStart.checked = pomodoro.settings.autoStart;
                pomodoroSmartPause.checked = pomodoro.settings.smartPause;
                pomodoroSound.checked = pomodoro.settings.sound;

pomodoroFocusCount.textContent = pomodoro.completedFocus;
                pomodoroBreakCount.textContent = pomodoro.completedBreaks;
                pomodoroStreak.textContent = pomodoro.streak;

const progress = 1 - pomodoro.remaining / Math.max(1, modeDuration());

pomodoroRing.style.strokeDashoffset = String(RING_LENGTH * Math.max(0, Math.min(1, progress)));
            }

function chime() {
                if (!pomodoro.settings.sound) {
                    return;
                }

try {
                    audioContext ||= new (window.AudioContext || window.webkitAudioContext)();

const now = audioContext.currentTime;
                    const gain = audioContext.createGain();

gain.gain.setValueAtTime(.0001, now);
                    gain.gain.exponentialRampToValueAtTime(.055, now + .04);
                    gain.gain.exponentialRampToValueAtTime(.0001, now + 1.2);
                    gain.connect(audioContext.destination);

[392, 349.23, 293.66].forEach((frequency, index) => {
                        const oscillator = audioContext.createOscillator();
                        oscillator.type = "sine";
                        oscillator.frequency.setValueAtTime(frequency, now + index * .18);
                        oscillator.connect(gain);
                        oscillator.start(now + index * .18);
                        oscillator.stop(now + 1.1 + index * .18);
                    });
                } catch {}
            }

function playCinematic(mode) {
                appMode = mode;
                app.classList.toggle("sorrow", mode === "pomodoro");

veil.classList.remove("playing");
                void veil.offsetWidth;
                veil.classList.add("playing");

setTimeout(() => {
                    veil.classList.remove("playing");
                }, 1200);

window.dispatchEvent(new CustomEvent("luxury-mode-change", {
                    detail: {
                        mode: appMode,
                        force: true,
                        targetDate,
                        pomodoro: clone(pomodoro)
                    }
                }));
            }

function updateStage(force = false) {
                window.dispatchEvent(new CustomEvent("luxury-stage-update", {
                    detail: {
                        mode: appMode,
                        force,
                        targetDate,
                        pomodoro: clone(pomodoro)
                    }
                }));
            }

function completePomodoro() {
                if (pomodoro.mode === "focus") {
                    pomodoro.completedFocus++;
                    pomodoro.streak++;
                } else {
                    pomodoro.completedBreaks++;
                }

chime();

pomodoro.mode = nextMode();
                pomodoro.remaining = modeDuration(pomodoro.mode);
                pomodoro.running = pomodoro.settings.autoStart;
                pomodoro.active = true;
                pomodoro.lastPauseAt = null;

savePomodoro();
                renderPomodoro();
                playCinematic("pomodoro");
            }

function smartPauseHandoff() {
                if (!pomodoro.settings.smartPause) {
                    return false;
                }

const duration = modeDuration();
                const elapsed = duration - pomodoro.remaining;
                const ratio = elapsed / Math.max(1, duration);

if (pomodoro.mode === "focus") {
                    pomodoro.pausePatterns.focusPaused++;

if (ratio >= .55) {
                        pomodoro.completedFocus++;
                        pomodoro.streak++;
                        pomodoro.mode = nextMode();
                        pomodoro.remaining = modeDuration(pomodoro.mode);
                        pomodoro.running = true;
                        pomodoro.active = true;
                        savePomodoro();
                        renderPomodoro();
                        playCinematic("pomodoro");
                        return true;
                    }
                } else {
                    pomodoro.pausePatterns.breakPaused++;

if (ratio >= .25) {
                        pomodoro.completedBreaks++;
                        pomodoro.mode = "focus";
                        pomodoro.remaining = modeDuration("focus");
                        pomodoro.running = true;
                        pomodoro.active = true;
                        savePomodoro();
                        renderPomodoro();
                        playCinematic("pomodoro");
                        return true;
                    }
                }

return false;
            }

function tickPomodoro() {
                const now = Date.now();
                const delta = Math.floor((now - lastTick) / 1000);

if (delta <= 0) {
                    return;
                }

lastTick += delta * 1000;

if (!pomodoro.running) {
                    return;
                }

pomodoro.remaining -= delta;

if (pomodoro.remaining <= 0) {
                    pomodoro.remaining = 0;
                    completePomodoro();
                    return;
                }

pomodoro.active = true;
                savePomodoro();
                renderPomodoro();

if (appMode === "pomodoro") {
                    updateStage(false);
                }
            }

pomodoroToggle.addEventListener("click", () => {
                pomodoroPanel.classList.toggle("open");
            });

pomodoroStartPause.addEventListener("click", () => {
                lastTick = Date.now();
                pomodoro.active = true;

if (pomodoro.running) {
                    pomodoro.running = false;
                    pomodoro.lastPauseAt = Date.now();

if (smartPauseHandoff()) {
                        return;
                    }
                } else {
                    if (pomodoro.lastPauseAt && Date.now() - pomodoro.lastPauseAt < 90000) {
                        pomodoro.pausePatterns.quickResume++;
                    }

pomodoro.running = true;
                    pomodoro.lastPauseAt = null;
                }

savePomodoro();
                renderPomodoro();
                playCinematic("pomodoro");
            });

pomodoroSkip.addEventListener("click", () => {
                pomodoro.active = true;
                completePomodoro();
            });

pomodoroReset.addEventListener("click", () => {
                pomodoro.active = true;
                pomodoro.running = false;
                pomodoro.remaining = modeDuration();
                pomodoro.lastPauseAt = null;

savePomodoro();
                renderPomodoro();
                playCinematic("pomodoro");
            });

pomodoroClear.addEventListener("click", () => {
                pomodoro = clone(defaults);
                savePomodoro();
                renderPomodoro();
                playCinematic("clock");
            });

document.querySelectorAll("[data-preset]").forEach((button) => {
                button.addEventListener("click", () => {
                    const preset = {
                        classic: { focus: 25, short: 5, long: 15, every: 4 },
                        deep: { focus: 50, short: 10, long: 25, every: 3 },
                        sprint: { focus: 15, short: 3, long: 10, every: 4 }
                    }[button.dataset.preset];

pomodoro.settings.focus = preset.focus;
                    pomodoro.settings.short = preset.short;
                    pomodoro.settings.long = preset.long;
                    pomodoro.settings.every = preset.every;
                    pomodoro.mode = "focus";
                    pomodoro.remaining = modeDuration("focus");
                    pomodoro.running = false;
                    pomodoro.active = true;

savePomodoro();
                    renderPomodoro();
                    playCinematic("pomodoro");
                });
            });

[
                pomodoroFocusInput,
                pomodoroShortInput,
                pomodoroLongInput,
                pomodoroEveryInput,
                pomodoroAutoStart,
                pomodoroSmartPause,
                pomodoroSound
            ].forEach((control) => {
                control.addEventListener("change", () => {
                    pomodoro.settings.focus = clampNumber(pomodoroFocusInput.value, 1, 180, 25);
                    pomodoro.settings.short = clampNumber(pomodoroShortInput.value, 1, 90, 5);
                    pomodoro.settings.long = clampNumber(pomodoroLongInput.value, 1, 180, 15);
                    pomodoro.settings.every = clampNumber(pomodoroEveryInput.value, 2, 12, 4);
                    pomodoro.settings.autoStart = pomodoroAutoStart.checked;
                    pomodoro.settings.smartPause = pomodoroSmartPause.checked;
                    pomodoro.settings.sound = pomodoroSound.checked;

if (!pomodoro.running) {
                        pomodoro.remaining = Math.min(pomodoro.remaining, modeDuration());
                    }

savePomodoro();
                    renderPomodoro();

if (pomodoro.active) {
                        playCinematic("pomodoro");
                    }
                });
            });

applyTargetDate.addEventListener("click", () => {
                const parsed = new Date(targetDateTimeInput.value).getTime();

if (Number.isNaN(parsed)) {
                    return;
                }

targetDate = parsed;
                localStorage.setItem(TARGET_KEY, String(targetDate));
                playCinematic("countdown");
            });

returnClockMode.addEventListener("click", () => {
                pomodoro.active = false;
                pomodoro.running = false;
                savePomodoro();
                renderPomodoro();
                playCinematic("clock");
            });

targetDateTimeInput.addEventListener("keydown", (event) => {
                if (event.key === "Enter") {
                    applyTargetDate.click();
                }
            });

window.addEventListener("luxury-three-ready", () => {
                renderPomodoro();
                updateStage(true);

if (pomodoro.active) {
                    playCinematic("pomodoro");
                }
            });

renderPomodoro();

setInterval(tickPomodoro, 250);
            setInterval(() => updateStage(false), 1000);
        })();
    </script>

const app = document.getElementById("luxury-countdown-app");
        const mount = document.getElementById("three-countdown-stage");
        const mainTitle = document.getElementById("mainTitle");
        const mainSubtitle = document.getElementById("mainSubtitle");
        const liveDateLine = document.getElementById("liveDateLine");
        const countdownLabels = document.getElementById("countdownLabels");

const pad = (value, length = 2) => String(Math.max(0, Math.floor(value))).padStart(length, "0");

const ordinal = (number) => {
            const rem10 = number % 10;
            const rem100 = number % 100;

if (rem10 === 1 && rem100 !== 11) return `${number}st`;
            if (rem10 === 2 && rem100 !== 12) return `${number}nd`;
            if (rem10 === 3 && rem100 !== 13) return `${number}rd`;

return `${number}th`;
        };

const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x05070d);
        scene.fog = new THREE.FogExp2(0x05070d, 0.05);

const renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: false,
            powerPreference: "high-performance"
        });

renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75));
        renderer.setSize(mount.clientWidth, mount.clientHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.outputColorSpace = THREE.SRGBColorSpace;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1.12;
        mount.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(36, mount.clientWidth / mount.clientHeight, 0.1, 100);
        camera.position.set(0, 4.15, 11.7);
        camera.lookAt(0, 0.2, 0);

const sceneClock = new THREE.Clock();
        const textureCache = new Map();
        const materialCache = new Map();

const hemi = new THREE.HemisphereLight(0xfff4dd, 0x111827, 0.82);
        scene.add(hemi);

const keyLight = new THREE.SpotLight(0xffdfad, 410, 28, Math.PI * 0.15, 0.57, 1.24);
        keyLight.position.set(-5.7, 8.9, 6.9);
        keyLight.target.position.set(0.15, 0.18, 0.15);
        keyLight.castShadow = true;
        keyLight.shadow.mapSize.set(3072, 3072);
        keyLight.shadow.camera.near = 0.4;
        keyLight.shadow.camera.far = 34;
        keyLight.shadow.camera.fov = 32;
        keyLight.shadow.bias = -0.00004;
        keyLight.shadow.normalBias = 0.035;
        keyLight.shadow.radius = 6;
        scene.add(keyLight, keyLight.target);

const crossLight = new THREE.SpotLight(0xffaf66, 145, 22, Math.PI * 0.19, 0.62, 1.18);
        crossLight.position.set(5.8, 5.6, 4.8);
        crossLight.target.position.set(-0.65, -0.12, 0.05);
        crossLight.castShadow = true;
        crossLight.shadow.mapSize.set(1536, 1536);
        crossLight.shadow.camera.near = 0.5;
        crossLight.shadow.camera.far = 26;
        crossLight.shadow.camera.fov = 40;
        crossLight.shadow.bias = -0.000035;
        crossLight.shadow.normalBias = 0.035;
        crossLight.shadow.radius = 5;
        scene.add(crossLight, crossLight.target);

const rimLight = new THREE.SpotLight(0xbfd7ff, 82, 22, Math.PI * 0.2, 0.5, 1.2);
        rimLight.position.set(5.6, 4.6, -4.6);
        rimLight.target.position.set(0, 0.18, 0);
        scene.add(rimLight, rimLight.target);

const deskWarmLight = new THREE.PointLight(0xff9f55, 34, 8, 2);
        deskWarmLight.position.set(0, 0.28, 2.75);
        scene.add(deskWarmLight);

function makeWoodTexture() {
            const c = document.createElement("canvas");
            c.width = 1200;
            c.height = 900;

const ctx = c.getContext("2d");
            const g = ctx.createLinearGradient(0, 0, c.width, c.height);

g.addColorStop(0, "#27150c");
            g.addColorStop(0.24, "#6d4325");
            g.addColorStop(0.52, "#3a2012");
            g.addColorStop(0.78, "#8a5732");
            g.addColorStop(1, "#1b0d07");

ctx.fillStyle = g;
            ctx.fillRect(0, 0, c.width, c.height);

for (let i = 0; i < 620; i++) {
                const y = Math.random() * c.height;

ctx.beginPath();
                ctx.moveTo(-120, y);

for (let x = -120; x <= c.width + 120; x += 72) {
                    ctx.lineTo(
                        x,
                        y +
                        Math.sin(x * 0.009 + i * 0.31) * (6 + Math.random() * 18) +
                        Math.sin(x * 0.026 + i) * (1 + Math.random() * 5)
                    );
                }

ctx.strokeStyle = Math.random() > 0.52
                    ? `rgba(255, 220, 160, ${0.035 + Math.random() * 0.09})`
                    : `rgba(18, 8, 3, ${0.035 + Math.random() * 0.09})`;

ctx.lineWidth = 0.4 + Math.random() * 3.2;
                ctx.stroke();
            }

const texture = new THREE.CanvasTexture(c);
            texture.colorSpace = THREE.SRGBColorSpace;
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(2.8, 1.75);
            texture.anisotropy = 12;

return texture;
        }

function makeLeatherNumberTexture(value, digits = 2) {
            const textValue = String(value);
            const key = `${digits}:${textValue}`;

if (textureCache.has(key)) {
                return textureCache.get(key);
            }

const c = document.createElement("canvas");
            c.width = 768;
            c.height = 768;

const ctx = c.getContext("2d");
            const leather = ctx.createRadialGradient(265, 170, 60, 384, 405, 650);

leather.addColorStop(0, "#742b1f");
            leather.addColorStop(0.28, "#471710");
            leather.addColorStop(0.68, "#1b0806");
            leather.addColorStop(1, "#070202");

ctx.fillStyle = leather;
            ctx.fillRect(0, 0, c.width, c.height);

for (let i = 0; i < 22000; i++) {
                ctx.fillStyle = Math.random() > 0.52
                    ? `rgba(255, 214, 176, ${Math.random() * 0.08})`
                    : `rgba(0, 0, 0, ${Math.random() * 0.08})`;

ctx.fillRect(
                    Math.random() * c.width,
                    Math.random() * c.height,
                    Math.random() * 1.45,
                    Math.random() * 1.45
                );
            }

const border = ctx.createLinearGradient(0, 0, c.width, c.height);

border.addColorStop(0, "rgba(255,220,170,.42)");
            border.addColorStop(0.46, "rgba(60,16,10,.1)");
            border.addColorStop(1, "rgba(0,0,0,.62)");

ctx.lineWidth = 26;
            ctx.strokeStyle = border;
            ctx.strokeRect(26, 26, c.width - 52, c.height - 52);

ctx.save();
            ctx.strokeStyle = "rgba(255, 204, 154, .16)";
            ctx.lineWidth = 3;
            ctx.setLineDash([14, 14]);
            ctx.strokeRect(56, 56, c.width - 112, c.height - 112);
            ctx.restore();

const isWord = /[A-Za-z\u0600-\u06FF]/.test(textValue);
            const fontSize = isWord ? (textValue.length > 4 ? 118 : 156) : (digits >= 3 ? 248 : 292);

if (textValue.length) {
                ctx.font = `950 ${fontSize}px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial`;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";

ctx.save();
                ctx.globalCompositeOperation = "multiply";
                ctx.lineJoin = "round";
                ctx.lineCap = "round";
                ctx.shadowColor = "rgba(0,0,0,.96)";
                ctx.shadowBlur = 22;
                ctx.shadowOffsetY = 17;
                ctx.strokeStyle = "rgba(2, 1, 1, .92)";
                ctx.lineWidth = isWord ? 18 : 30;
                ctx.strokeText(textValue, 384, 396);
                ctx.fillStyle = "rgba(8, 3, 2, .8)";
                ctx.fillText(textValue, 384, 396);
                ctx.restore();

ctx.save();
                ctx.globalCompositeOperation = "screen";
                ctx.strokeStyle = "rgba(255, 224, 186, .37)";
                ctx.lineWidth = isWord ? 4 : 7;
                ctx.strokeText(textValue, 379, 375);
                ctx.fillStyle = "rgba(255, 238, 212, .12)";
                ctx.fillText(textValue, 378, 374);
                ctx.restore();
            }

const gloss = ctx.createLinearGradient(0, 0, c.width, c.height);
            gloss.addColorStop(0, "rgba(255,255,255,.31)");
            gloss.addColorStop(0.19, "rgba(255,255,255,.06)");
            gloss.addColorStop(0.42, "rgba(255,255,255,0)");
            gloss.addColorStop(1, "rgba(0,0,0,.22)");

ctx.fillStyle = gloss;
            ctx.fillRect(0, 0, c.width, c.height);

const texture = new THREE.CanvasTexture(c);
            texture.colorSpace = THREE.SRGBColorSpace;
            texture.anisotropy = 12;
            texture.needsUpdate = true;

textureCache.set(key, texture);

return texture;
        }

function makeLeatherMaterial(value, digits = 2) {
            const key = `mat:${digits}:${value}`;

if (materialCache.has(key)) {
                return materialCache.get(key);
            }

const material = new THREE.MeshPhysicalMaterial({
                map: makeLeatherNumberTexture(value, digits),
                color: 0xffffff,
                roughness: 0.74,
                metalness: 0.025,
                clearcoat: 0.72,
                clearcoatRoughness: 0.48,
                sheen: 0.76,
                sheenColor: new THREE.Color(0x9b3b28),
                sheenRoughness: 0.67
            });

materialCache.set(key, material);

return material;
        }

const sideMaterial = makeLeatherMaterial("", 2);

const desk = new THREE.Mesh(
            new THREE.BoxGeometry(18, 0.62, 9.5),
            new THREE.MeshPhysicalMaterial({
                map: makeWoodTexture(),
                color: 0xffffff,
                roughness: 0.48,
                metalness: 0.055,
                clearcoat: 0.88,
                clearcoatRoughness: 0.26
            })
        );

desk.position.set(0, -1.55, 0.72);
        desk.receiveShadow = true;
        desk.castShadow = true;
        scene.add(desk);

const deskFront = new THREE.Mesh(
            new THREE.BoxGeometry(18.2, 2.4, 0.38),
            new THREE.MeshStandardMaterial({
                color: 0x1f120b,
                roughness: 0.8,
                metalness: 0.04
            })
        );

deskFront.position.set(0, -2.55, 5.28);
        deskFront.receiveShadow = true;
        scene.add(deskFront);

const backWall = new THREE.Mesh(
            new THREE.PlaneGeometry(26, 15),
            new THREE.MeshStandardMaterial({
                color: 0x080d15,
                roughness: 0.92,
                metalness: 0
            })
        );

backWall.position.set(0, 3, -5.65);
        backWall.receiveShadow = true;
        scene.add(backWall);

const shadowCatcher = new THREE.Mesh(
            new THREE.PlaneGeometry(11.8, 4.1),
            new THREE.ShadowMaterial({
                opacity: 0.46,
                transparent: true
            })
        );

shadowCatcher.position.set(0, -1.222, 0.55);
        shadowCatcher.rotation.x = -Math.PI / 2;
        shadowCatcher.receiveShadow = true;
        scene.add(shadowCatcher);

const stageGlow = new THREE.Mesh(
            new THREE.CircleGeometry(5.5, 96),
            new THREE.MeshBasicMaterial({
                color: 0xffb46b,
                transparent: true,
                opacity: 0.13,
                depthWrite: false
            })
        );

stageGlow.position.set(0, -1.224, 1.72);
        stageGlow.rotation.x = -Math.PI / 2;
        scene.add(stageGlow);

const cubeGeometry = new RoundedBoxGeometry(1.82, 1.82, 1.82, 8, 0.18);

class FlipCube {
            constructor(x) {
                this.value = null;
                this.nextValue = null;
                this.digits = 2;
                this.nextDigits = 2;
                this.isFlipping = false;
                this.startTime = 0;
                this.duration = 0.9;
                this.baseX = x;

this.group = new THREE.Group();
                this.group.position.set(x, 0.04, 0.08);
                this.group.rotation.set(-0.06, 0, 0);

this.cube = new THREE.Mesh(cubeGeometry, [
                    sideMaterial,
                    sideMaterial,
                    sideMaterial,
                    sideMaterial,
                    sideMaterial,
                    sideMaterial
                ]);

this.cube.castShadow = true;
                this.cube.receiveShadow = true;
                this.group.add(this.cube);

this.contactShadow = new THREE.Mesh(
                    new THREE.CircleGeometry(1.35, 48),
                    new THREE.MeshBasicMaterial({
                        color: 0x000000,
                        transparent: true,
                        opacity: 0.18,
                        depthWrite: false
                    })
                );

this.contactShadow.position.set(x, -1.212, 0.28);
                this.contactShadow.rotation.x = -Math.PI / 2;
                this.contactShadow.scale.set(1.25, 0.46, 1);

scene.add(this.contactShadow);
                scene.add(this.group);
            }

setMaterials(frontValue, topValue, frontDigits, topDigits) {
                this.cube.material = [
                    sideMaterial,
                    sideMaterial,
                    makeLeatherMaterial(topValue, topDigits),
                    sideMaterial,
                    makeLeatherMaterial(frontValue, frontDigits),
                    sideMaterial
                ];
            }

setInitial(value, digits = 2) {
                this.value = value;
                this.nextValue = null;
                this.digits = digits;
                this.nextDigits = digits;
                this.isFlipping = false;
                this.cube.rotation.x = 0;
                this.group.rotation.z = 0;
                this.group.position.y = 0.04;
                this.setMaterials(value, value, digits, digits);
            }

flipTo(value, digits = 2) {
                if (this.value === null || this.digits !== digits) {
                    this.setInitial(value, digits);
                    return;
                }

if (this.value === value || this.isFlipping) {
                    return;
                }

this.nextValue = value;
                this.nextDigits = digits;
                this.isFlipping = true;
                this.startTime = sceneClock.elapsedTime;
                this.cube.rotation.x = 0;
                this.group.position.y = 0.04;
                this.group.rotation.z = 0;
                this.setMaterials(this.value, value, this.digits, digits);
            }

update(t, mode) {
                if (!this.isFlipping) {
                    this.group.rotation.y = Math.sin(t * 0.43 + this.baseX) * 0.018;
                    this.contactShadow.material.opacity = 0.18 + Math.sin(t * 0.8 + this.baseX) * 0.015;
                    return;
                }

const p = Math.min((t - this.startTime) / this.duration, 1);
                const ease = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
                const sorrowFactor = mode === "pomodoro" ? 0.72 : 1;
                const anticipation = Math.sin(Math.min(p * 2.2, 1) * Math.PI) * -0.045 * sorrowFactor;
                const overshoot = Math.sin(p * Math.PI) * 0.06 * sorrowFactor;
                const settle = Math.sin(p * Math.PI * 3.4) * (1 - p) * 0.028 * sorrowFactor;

this.cube.rotation.x = anticipation + (Math.PI / 2) * ease + overshoot + settle;
                this.group.position.y = 0.04 + Math.sin(p * Math.PI) * (mode === "pomodoro" ? 0.28 : 0.42);
                this.group.rotation.z = Math.sin(p * Math.PI) * 0.02;

const squash = Math.sin(p * Math.PI);
                this.contactShadow.scale.set(1.28 + squash * 0.34, 0.48 + squash * 0.1, 1);
                this.contactShadow.material.opacity = 0.2 + squash * 0.2;

if (p >= 1) {
                    this.value = this.nextValue;
                    this.digits = this.nextDigits;
                    this.nextValue = null;
                    this.isFlipping = false;
                    this.cube.rotation.x = 0;
                    this.group.rotation.z = 0;
                    this.group.position.y = 0.04;
                    this.contactShadow.scale.set(1.25, 0.46, 1);
                    this.contactShadow.material.opacity = 0.18;
                    this.setMaterials(this.value, this.value, this.digits, this.digits);
                }
            }
        }

const cubes = [
            new FlipCube(-4.05),
            new FlipCube(-1.35),
            new FlipCube(1.35),
            new FlipCube(4.05)
        ];

const separators = [];

function makeSeparator(x) {
            const group = new THREE.Group();
            group.position.set(x, 0.05, 0.28);

const material = new THREE.MeshPhysicalMaterial({
                color: 0xd6a46d,
                roughness: 0.25,
                metalness: 0.76,
                clearcoat: 0.82,
                clearcoatRoughness: 0.16
            });

const dotGeo = new THREE.SphereGeometry(0.105, 28, 14);

const top = new THREE.Mesh(dotGeo, material);
            top.position.y = 0.39;
            top.castShadow = true;
            top.receiveShadow = true;

const bottom = new THREE.Mesh(dotGeo, material);
            bottom.position.y = -0.39;
            bottom.castShadow = true;
            bottom.receiveShadow = true;

group.add(top, bottom);
            scene.add(group);
            separators.push(group);
        }

makeSeparator(-2.7);
        makeSeparator(0);
        makeSeparator(2.7);

let stageMode = "clock";
        let stageTargetDate = Date.now();
        let stagePomodoro = null;

function setLabels(items) {
            countdownLabels.innerHTML = items.map((item) => `<span>${item}</span>`).join("");
        }

function getClockParts() {
            const now = new Date();
            const day = now.toLocaleDateString("en-US", { weekday: "short" });
            const month = now.toLocaleDateString("en-US", { month: "long" });

return {
                title: "الوقت الآن",
                subtitle: "Luxury 3D Leather Cube Clock",
                dateLine: `${day} | ${ordinal(now.getDate())} | ${month}`,
                values: [
                    pad(now.getDate(), 2),
                    pad(now.getHours(), 2),
                    pad(now.getMinutes(), 2),
                    pad(now.getSeconds(), 2)
                ],
                digits: [2, 2, 2, 2],
                labels: ["Day", "Hour", "Minute", "Second"]
            };
        }

function getCountdownParts() {
            const distance = stageTargetDate - Date.now();

if (distance <= 0) {
                return {
                    title: "انتهى العد",
                    subtitle: "The countdown has reached silence.",
                    dateLine: "Expired",
                    values: ["000", "00", "00", "00"],
                    digits: [3, 2, 2, 2],
                    labels: ["Days", "Hours", "Minutes", "Seconds"]
                };
            }

const days = Math.floor(distance / 86400000);
            const hours = Math.floor((distance % 86400000) / 3600000);
            const minutes = Math.floor((distance % 3600000) / 60000);
            const seconds = Math.floor((distance % 60000) / 1000);

return {
                title: "عداد تنازلي",
                subtitle: "Luxury 3D Engraved Leather Cube Countdown",
                dateLine: new Date(stageTargetDate).toLocaleString("en-GB", {
                    weekday: "short",
                    day: "2-digit",
                    month: "long",
                    year: "numeric",
                    hour: "2-digit",
                    minute: "2-digit"
                }),
                values: [pad(days, 3), pad(hours), pad(minutes), pad(seconds)],
                digits: [3, 2, 2, 2],
                labels: ["Days", "Hours", "Minutes", "Seconds"]
            };
        }

function getPomodoroParts() {
            const p = stagePomodoro || {
                mode: "focus",
                remaining: 25 * 60,
                running: false
            };

const remaining = Math.max(0, Math.ceil(p.remaining || 0));
            const hours = Math.floor(remaining / 3600);
            const minutes = Math.floor((remaining % 3600) / 60);
            const seconds = remaining % 60;

const phase = p.mode === "longBreak"
                ? "LONG"
                : p.mode === "shortBreak"
                    ? "REST"
                    : "WORK";

return {
                title: "بومودورو",
                subtitle: p.running ? "The room dims. Time becomes heavier." : "Paused under a fading light.",
                dateLine: p.mode === "focus"
                    ? "Work phase — the countdown is now personal"
                    : p.mode === "longBreak"
                        ? "A long pause under low warm light"
                        : "A short silence before the next work session",
                values: [phase, pad(hours, 2), pad(minutes, 2), pad(seconds, 2)],
                digits: [4, 2, 2, 2],
                labels: ["Phase", "Hours", "Minutes", "Seconds"]
            };
        }

function syncStage(force = false) {
            const parts = stageMode === "pomodoro"
                ? getPomodoroParts()
                : stageMode === "countdown"
                    ? getCountdownParts()
                    : getClockParts();

mainTitle.textContent = parts.title;
            mainSubtitle.textContent = parts.subtitle;
            liveDateLine.textContent = parts.dateLine;
            setLabels(parts.labels);

parts.values.forEach((value, index) => {
                if (force) {
                    cubes[index].setInitial(value, parts.digits[index]);
                } else {
                    cubes[index].flipTo(value, parts.digits[index]);
                }
            });
        }

function receivePayload(event) {
            const detail = event.detail || {};

stageMode = detail.mode || stageMode;
            stageTargetDate = detail.targetDate || stageTargetDate;
            stagePomodoro = detail.pomodoro || stagePomodoro;

syncStage(!!detail.force);
        }

window.addEventListener("luxury-mode-change", receivePayload);
        window.addEventListener("luxury-stage-update", receivePayload);

function resize() {
            const w = mount.clientWidth;
            const h = mount.clientHeight;
            const ratio = w / h;

renderer.setSize(w, h);
            camera.aspect = ratio;
            camera.updateProjectionMatrix();

const narrow = w < 780;
            const veryWide = ratio > 2.1;

if (narrow) {
                camera.position.set(0, 4.45, 13.8);

const xs = [-3.25, -1.08, 1.08, 3.25];
                const sepXs = [-2.16, 0, 2.16];

cubes.forEach((cube, index) => {
                    cube.baseX = xs[index];
                    cube.group.position.x = xs[index];
                    cube.contactShadow.position.x = xs[index];
                });

separators.forEach((sep, index) => {
                    sep.position.x = sepXs[index];
                });
            } else {
                camera.position.set(0, veryWide ? 4.0 : 4.15, veryWide ? 10.65 : 11.7);

const xs = [-4.05, -1.35, 1.35, 4.05];
                const sepXs = [-2.7, 0, 2.7];

separators.forEach((sep, index) => {
                    sep.position.x = sepXs[index];
                });
            }

camera.lookAt(0, 0.22, 0);
        }

window.addEventListener("resize", resize, { passive: true });
        resize();

syncStage(true);
        window.dispatchEvent(new CustomEvent("luxury-three-ready"));

function animate() {
            requestAnimationFrame(animate);

const t = sceneClock.getElapsedTime();

cubes.forEach((cube) => cube.update(t, stageMode));

separators.forEach((sep, index) => {
                sep.rotation.y = Math.sin(t * 0.7 + index) * 0.13;
                sep.position.y = 0.05 + Math.sin(t * 2 + index) * 0.018;
            });

if (stageMode === "pomodoro") {
                renderer.toneMappingExposure += (0.62 - renderer.toneMappingExposure) * 0.035;
                keyLight.intensity = 150 + Math.sin(t * 0.55) * 7;
                crossLight.intensity = 55 + Math.sin(t * 0.7 + 1.4) * 5;
                deskWarmLight.intensity = 10 + Math.sin(t * 1.1) * 1.6;
            } else {
                renderer.toneMappingExposure += (1.12 - renderer.toneMappingExposure) * 0.035;
                keyLight.intensity = 390 + Math.sin(t * 0.85) * 24;
                crossLight.intensity = 142 + Math.sin(t * 0.7 + 1.4) * 13;
                deskWarmLight.intensity = 34 + Math.sin(t * 1.25) * 5;
                app.classList.remove("sorrow");
            }

const baseY = mount.clientWidth < 780
                ? 4.45
                : mount.clientWidth / mount.clientHeight > 2.1
                    ? 4.0
                    : 4.15;

const baseZ = mount.clientWidth / mount.clientHeight > 2.1 ? 10.65 : 11.7;
            const sadnessPullback = stageMode === "pomodoro" ? 0.8 : 0;

camera.position.x = Math.sin(t * 0.16) * 0.065;
            camera.position.y += (baseY + Math.sin(t * 0.2) * 0.02 - camera.position.y) * 0.025;
            camera.position.z += (baseZ + sadnessPullback - camera.position.z) * 0.025;
            camera.lookAt(0, 0.22, 0);

renderer.render(scene, camera);
        }

animate();
    </script>
</div>