.th-flow { position: relative; isolation: isolate; background: var(--base); overflow: hidden; }
.th-flow > .th-bgfx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.th-flow > :not(.th-bgfx) { position: relative; z-index: 1; }
.th-blob { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.th-blob.b1, .th-blob.b1x { left: -22vmax; top: -30vmax; width: 80vmax; height: 80vmax; }
.th-blob.b1  { background: radial-gradient(closest-side, var(--c1), var(--c1-0)); }
.th-blob.b1x { background: radial-gradient(closest-side, var(--c2), var(--c2-0)); opacity: 0; }
.th-blob.b2  { left: 30vw; top: -14vmax; width: 62vmax; height: 62vmax; background: radial-gradient(closest-side, var(--c2), var(--c2-0)); }
.th-blob.b3, .th-blob.b3x { right: -24vmax; bottom: -38vmax; width: 84vmax; height: 84vmax; }
.th-blob.b3  { background: radial-gradient(closest-side, var(--c3), var(--c3-0)); }
.th-blob.b3x { background: radial-gradient(closest-side, var(--c4), var(--c4-0)); opacity: 0; }
.th-blob.b4  { left: -12vmax; bottom: -44vmax; width: 62vmax; height: 62vmax; background: radial-gradient(closest-side, var(--c4), var(--c4-0)); }

.th-panel { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; font: 12.5px/1.45 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #222; }
.th-panel button, .th-panel input { font: inherit; }
.th-panel-toggle { display: flex; align-items: center; gap: 8px; border: 1px solid #8F8F8A; background: #F1F1EE; padding: 7px 12px; cursor: pointer; color: #222; }
.th-panel-toggle .sw { display: flex; gap: 2px; }
.th-panel-body { width: 280px; display: grid; gap: 12px; padding: 14px; background: #F1F1EE; border: 1px solid #8F8F8A; box-shadow: 0 16px 36px -22px rgba(0,0,0,.45); }
.th-panel-body[hidden] { display: none; }
.th-panel-body .th-title { font-weight: 600; }
.th-pal { display: grid; gap: 3px; }
.th-pal button { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; text-align: left; border: 1px solid transparent; background: transparent; padding: 6px 8px; cursor: pointer; color: #222; }
.th-pal button small { grid-column: 2; color: #6A6A66; font-size: 11.5px; }
.th-pal button[aria-pressed="true"] { border-color: #222; background: #fff; }
.th-panel .sw { display: inline-flex; gap: 2px; grid-row: span 2; }
.th-panel .sw i { width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(0,0,0,.12); }
.th-panel label { display: grid; grid-template-columns: 58px 1fr 26px; align-items: center; gap: 8px; }
.th-panel input[type="range"] { width: 100%; accent-color: #222; }
.th-panel output { font-family: ui-monospace, Menlo, monospace; color: #555; text-align: right; }
.th-panel .th-foot { color: #6A6A66; font-size: 11.5px; }
@media print { .th-panel { display: none; } }