@font-face {
 font-display: block;
 font-family: Mori;
 font-weight: 400;
 src: url(https://assets.codepen.io/16327/PPMori-Regular.woff) format("woff");
}
@font-face {
 font-display: block;
 font-family: Mori;
 font-weight: 600;
 src: url(https://assets.codepen.io/16327/PPMori-SemiBold.woff) format("woff");
}
@font-face {
 font-display: block;
 font-family: Fraktion Mono;
 font-weight: 400;
 src: url(https://assets.codepen.io/16327/PPFraktionMono-Bold.woff)
 format("woff");
}

*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

:root {
 --green: #0ae448;
 --lt: #abff84;
 --black: #0e100f;
 --white: #fffce1;
 --s75: #bbbaa6;
 --s50: #7c7c6f;
 --s25: #42433d;
}

html,
body {
 width: 100%;
 height: 100%;
 overflow: hidden;
 font-family: Mori, sans-serif;
 background: var(--black);
 color: var(--white);
 display: flex;
 flex-direction: column;
 align-items: center;
}

.header {
 text-align: center;
 padding: 40px 24px 0;
 max-width: 520px;
}
.header h1 {
 font-size: 1.4rem;
 font-weight: 600;
 margin-bottom: 8px;
}
.header p {
 font-size: 0.82rem;
 color: var(--s50);
 line-height: 1.5;
 margin-bottom: 20px;
}
code {
 font-family: Fraktion Mono, monospace;
 font-size: 0.72rem;
 background: rgba(10, 228, 72, 0.08);
 color: var(--green);
 padding: 2px 6px;
 border-radius: 3px;
}

.controls-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 20px;
 margin-bottom: 16px;
}

.control-group {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 0.72rem;
 color: var(--color-surface50);
}

.toggle-bar {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
}
.toggle {
 position: relative;
 display: inline-block;
 width: 44px;
 height: 24px;
 cursor: pointer;
}
.toggle input {
 opacity: 0;
 width: 0;
 height: 0;
 position: absolute;
 cursor: pointer;
 z-index: 1;
 width: 100%;
 height: 100%;
 margin: 0;
}
.toggle-track {
 position: absolute;
 inset: 0;
 background: var(--color-surface25);
 border-radius: 99px;
}
.toggle-thumb {
 position: absolute;
 top: 3px;
 left: 3px;
 width: 18px;
 height: 18px;
 background: var(--dark);
 border-radius: 99px;
 pointer-events: none;
}
.toggle input:checked ~ .toggle-track {
 background: var(--green);
}
.toggle input:checked ~ .toggle-thumb {
 transform: translateX(20px);
}
.toggle input:focus-visible ~ .toggle-track {
 outline: 2px solid var(--green);
 outline-offset: 2px;
}
.toggle-label {
 font-family: Fraktion Mono, monospace;
 font-size: 0.78rem;
 color: var(--color-surface50);
 cursor: pointer;
 user-select: none;
}
.toggle-label.is-active {
 color: var(--green);
}

select {
 font-family: Fraktion Mono, monospace;
 font-size: 0.7rem;
 background: var(--color-surface25);
 color: var(--color-surface-white);
 border: 1px solid var(--color-surface50);
 border-radius: 6px;
 padding: 4px 8px;
 cursor: pointer;
 outline: none;
}
select:focus {
 border-color: var(--green);
}
select:disabled {
 opacity: 0.3;
 cursor: not-allowed;
}

input[type="range"] {
 width: 80px;
 accent-color: var(--green);
}
.speed-val {
 font-family: Fraktion Mono, monospace;
 font-size: 0.66rem;
 min-width: 2.5em;
 color: var(--color-surface-white);
}

.status {
 font-family: Fraktion Mono, monospace;
 font-size: 0.7rem;
 color: var(--green);
 min-height: 1.4em;
 opacity: 0;
 margin-top: 12px;
}

/* ─── FAB ─── */
.fab-wrap {
 position: fixed;
 bottom: 40px;
 right: 40px;
 z-index: 50;
}

.fab {
 width: 80px;
 height: 80px;
 border-radius: 99px;
 border: none;
 background: var(--gradient-macha),
 url("https://assets.codepen.io/16327/noise-e82662fe.png");
 background-blend-mode: color-dodge;
 color: var(--dark);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 z-index: 2;
 box-shadow: 0 8px 32px rgba(10, 228, 72, 0.2);
}
.fab:focus-visible {
 outline: 2px solid var(--light);
 outline-offset: 3px;
}
.fab svg {
 width: 26px;
 height: 26px;
}

.fab-item {
 position: absolute;
 bottom: 10px;
 right: 10px;
 width: 45px;
 height: 45px;
 border-radius: 99px;
 border: 1px solid var(--color-surface25);
 background: var(--color-grey-dark);
 color: var(--color-surface75);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 scale: 0;
 padding: 0;
 z-index: 1;
}
.fab-item:focus-visible {
 outline: 2px solid var(--green);
 outline-offset: 2px;
}
.fab-item svg {
 width: 18px;
 height: 18px;
 pointer-events: none;
}

/* ─── Status label ─── */
.status {
 display: block;
 text-align: center;
 font-family: Fraktion Mono, monospace;
 font-size: 0.75rem;
 color: var(--color-surface25);
 pointer-events: none;
 opacity: 0;
}

/* ─── GSAP logo ─── */
.gsap-logo {
 width: 20vw;
 max-width: 90px;
 position: fixed;
 bottom: 15px;
 left: 15px;
 mix-blend-mode: difference;
 z-index: 9999;
}
.gsap-logo img {
 width: 100%;
}