:root,
html[data-theme="light"] {
    --bg-0: #f4ece4;
    --bg-1: #ece1d6;
    --ink: #4a4039;
    --ink-soft: #8a7c70;
    --rose: #e8b4a8;
    --rose-deep: #d99488;
    --sage: #a8c0a0;
    --sage-deep: #86a37c;
    --sky: #a6c4cf;
    --sky-deep: #7fa8b5;
    --sand: #e6cba8;
    --lav: #c4b3d4;
    --shadow: rgba(120, 100, 85, .22);
    --glass: rgba(255, 253, 250, .55);
    --glass-edge: rgba(255, 255, 255, .6);
    --glass-hi: rgba(255, 255, 255, .7);
    --blob-op: .5;
}

html[data-theme="dark"] {
    --bg-0: #1c2230;
    --bg-1: #232b3a;
    --ink: #e6e0d6;
    --ink-soft: #9aa3b2;
    --rose: #c08a82;
    --rose-deep: #a86d66;
    --sage: #7f9a86;
    --sage-deep: #62795f;
    --sky: #6f93a6;
    --sky-deep: #557585;
    --sand: #bfa074;
    --lav: #9484ab;
    --shadow: rgba(0, 0, 0, .45);
    --glass: rgba(46, 54, 70, .5);
    --glass-edge: rgba(255, 255, 255, .1);
    --glass-hi: rgba(255, 255, 255, .14);
    --blob-op: .4;
}

html {
    transition: background-color .6s ease;
}

body,
.panel,
.dock,
.tab,
.mute,
header h1,
header p,
.hint,
#breathText {
    transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    color: var(--ink);
    background: var(--bg-0);
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    /* let each canvas control its own touch-action */
    touch-action: none;
    overscroll-behavior: none;
}

/* ambient drifting background */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: var(--blob-op);
    will-change: transform;
}

.b1 {
    width: 55vmax;
    height: 55vmax;
    left: -15vmax;
    top: -10vmax;
    background: radial-gradient(circle, var(--rose), transparent 70%);
    animation: drift1 34s ease-in-out infinite;
}

.b2 {
    width: 48vmax;
    height: 48vmax;
    right: -12vmax;
    top: 10vmax;
    background: radial-gradient(circle, var(--sky), transparent 70%);
    animation: drift2 41s ease-in-out infinite;
}

.b3 {
    width: 50vmax;
    height: 50vmax;
    left: 5vmax;
    bottom: -18vmax;
    background: radial-gradient(circle, var(--sage), transparent 70%);
    animation: drift3 47s ease-in-out infinite;
}

.b4 {
    width: 34vmax;
    height: 34vmax;
    right: 8vmax;
    bottom: -8vmax;
    background: radial-gradient(circle, var(--lav), transparent 70%);
    animation: drift1 38s ease-in-out infinite reverse;
}

@keyframes drift1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(6vmax, 4vmax) scale(1.12);
    }
}

@keyframes drift2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-5vmax, 6vmax) scale(1.08);
    }
}

@keyframes drift3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(4vmax, -5vmax) scale(1.1);
    }
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .grain {
    mix-blend-mode: overlay;
    opacity: .06;
}

.app {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
}

header {
    padding: clamp(8px, 2.5vh, 20px) 24px clamp(4px, 1vh, 8px);
    text-align: center;
    flex: 0 0 auto;
}

header h1 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(20px, 4.5vw, 36px);
    letter-spacing: .5px;
    font-style: italic;
}

header p {
    font-size: clamp(10px, 2.5vw, 13px);
    color: var(--ink-soft);
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

.stage-wrap {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 8px 12px;
}

.stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
    transform: scale(.96);
}

.stage.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

canvas {
    display: block;
    touch-action: none;
}

.panel {
    /* fill available space up to a comfortable max */
    width: min(94vw, 460px);
    height: min(calc(100% - 16px), min(94vw, 460px));
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-edge);
    border-radius: 28px;
    box-shadow: 0 20px 50px -18px var(--shadow), inset 0 1px 1px var(--glass-hi);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* nav dock */
nav {
    flex: 0 0 auto;
    padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.nav-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: .5px;
    height: 18px;
    transition: opacity .3s;
    text-align: center;
}

.nav-title b {
    font-weight: 500;
    font-style: normal;
}

.dock-wrap {
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 10px;
}

.dock-wrap::-webkit-scrollbar {
    display: none;
}

.dock {
    display: flex;
    gap: 3px;
    padding: 6px;
    border-radius: 24px;
    width: max-content;
    margin: 0 auto;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-edge);
    box-shadow: 0 12px 30px -14px var(--shadow), inset 0 1px 1px var(--glass-hi);
}

.tab {
    width: clamp(44px, 11vw, 52px);
    height: clamp(44px, 11vw, 52px);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    flex: 0 0 auto;
    background: transparent;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s cubic-bezier(.2, .8, .2, 1);
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.tab svg {
    width: clamp(20px, 5vw, 25px);
    height: clamp(20px, 5vw, 25px);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.tab:hover {
    color: var(--ink);
}

.tab:hover svg {
    transform: scale(1.15);
}

.tab.active {
    background: var(--glass-hi);
    color: var(--rose-deep);
    box-shadow: 0 6px 16px -8px var(--shadow);
}

.tab.active svg {
    transform: scale(1.12);
}

/* dice / surprise button accent */
.tab.dice {
    color: var(--sage-deep);
}

.tab.dice.active {
    color: var(--sage-deep);
}

.controls {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 16px));
    right: max(16px, env(safe-area-inset-right, 16px));
    z-index: 5;
    display: flex;
    gap: 8px;
}

.ctrl {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-edge);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .3s, transform .2s, background-color .6s, border-color .6s;
    box-shadow: 0 8px 20px -12px var(--shadow);
}

.ctrl:hover {
    transform: translateY(-2px);
    color: var(--ink);
}

.ctrl svg {
    width: 20px;
    height: 20px;
}

.ctrl .ti {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] .theme-toggle .ti {
    transform: rotate(180deg);
}

.hint {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 300;
    letter-spacing: .8px;
    pointer-events: none;
    opacity: .85;
    font-style: italic;
}

/* breathing specific text */
#breathText {
    position: absolute;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 24px;
    color: var(--ink);
    pointer-events: none;
    letter-spacing: 1px;
    transition: opacity .6s;
}

/* credit byline */
.credit {
    text-align: center;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--ink-soft);
    opacity: .5;
    text-transform: uppercase;
    pointer-events: none;
    font-weight: 600;
    white-space: nowrap;
    padding-top: 2px;
}

/* counter / combo readout inside panels */
.readout {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
    pointer-events: none;
    opacity: .9;
    transition: opacity .4s;
}

/* focus timer extras */
.timer-ctrl {
    position: absolute;
    bottom: 46px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.tbtn {
    border: none;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--glass-hi);
    border: 1px solid var(--glass-edge);
    padding: 8px 16px;
    border-radius: 14px;
    transition: transform .2s, background .3s;
    -webkit-tap-highlight-color: transparent;
}

.tbtn:hover {
    transform: translateY(-2px);
}

.tbtn:active {
    transform: scale(.95);
}

.seg {
    display: flex;
    gap: 4px;
}

.seg .tbtn.on {
    background: var(--rose);
    color: #fff;
}