.fluid{color:var(--text-color);min-height:100vh;padding:calc(var(--nav-size) * 1.8) var(--spacing-sm) calc(var(--nav-size) * 2.2);--fg-blue:var(--scheme-accent);--fg-mint:var(--scheme-primary);--bg-orange:var(--scheme-backdrop-a,var(--scheme-accent-bg));--bg-pink:var(--scheme-backdrop-b,var(--scheme-primary-bg));--bg-blue:var(--scheme-backdrop-a,var(--scheme-accent-bg));--bg-mint:var(--scheme-backdrop-b,var(--scheme-primary-bg));background:linear-gradient(-45deg, var(--bg-orange), var(--bg-pink), var(--bg-blue), var(--bg-mint));--fluid-surface:var(--bg-page-transp);--fluid-line:var(--border-nav);--fluid-shadow:var(--shadow-xl);background-size:400% 400%;flex-direction:column;align-items:center;animation:22s infinite fluidGradientShift;display:flex;position:relative;overflow-x:hidden}.light-theme .fluid{animation-duration:26s}.dark-theme .fluid{animation-duration:14s}@keyframes fluidGradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.fluid-ambient{pointer-events:none;z-index:0;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.fluid-orb{filter:blur(4px);background:radial-gradient(circle,#ffffff24 0%,#0000 70%);border-radius:50%;animation:12s ease-in-out infinite fluidOrbFloat;position:absolute}.fluid-orb--1{width:calc(var(--nav-size) * 5);height:calc(var(--nav-size) * 5);top:4%;left:-7%}.fluid-orb--2{width:calc(var(--nav-size) * 3.4);height:calc(var(--nav-size) * 3.4);animation-delay:-4s;top:34%;right:-6%}.fluid-orb--3{width:calc(var(--nav-size) * 6);height:calc(var(--nav-size) * 6);animation-delay:-8s;bottom:2%;left:40%}@keyframes fluidOrbFloat{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-30px)scale(1.05)}}.fluid-section{z-index:2;flex-direction:column;align-items:center;width:100%;max-width:980px;display:flex;position:relative}.fluid-title-wrap{text-align:center;max-width:900px;margin:var(--spacing-sm) auto var(--spacing-md)}.fluid-eyebrow{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-small);letter-spacing:.2em;text-transform:uppercase;color:var(--text-color-accent);font-weight:var(--font-weight-semibold)}.fluid-title{font-size:var(--font-size-display);color:var(--text-color-strong);line-height:var(--line-height-tight);text-shadow:1px 1px 2px #00000014;margin:0 0 var(--spacing-xs)}.fluid-underline{background:linear-gradient(90deg, var(--fg-blue), var(--fg-mint), var(--fg-pink));width:84px;height:5px;margin:var(--spacing-xs) auto var(--spacing-sm);border-radius:3px}.fluid-subtitle{font-size:var(--font-size-base);color:var(--text-color-accent);line-height:var(--line-height-relaxed);max-width:620px;margin:0 auto}.fluid-tags{justify-content:center;gap:calc(var(--nav-size) * .12);margin:var(--spacing-sm) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.fluid-tags li{font-family:CutiveMono-Regular,monospace;font-size:var(--font-size-xs);padding:calc(var(--nav-size) * .08) calc(var(--nav-size) * .2);border:1px solid var(--fluid-line);background:var(--fluid-surface);color:var(--text-color);-webkit-backdrop-filter:blur(6px);border-radius:999px}.fluid-card{background:var(--fluid-surface);border:1px solid var(--fluid-line);border-radius:var(--border-radius-xl);box-shadow:var(--fluid-shadow);-webkit-backdrop-filter:blur(14px);padding:var(--spacing-sm);margin-top:var(--spacing-sm);width:100%}.fluid-card__bar{justify-content:space-between;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);display:flex}.fluid-card__bar-title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--text-color-strong);letter-spacing:.02em}.fluid-live{align-items:center;gap:calc(var(--nav-size) * .12);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;padding:calc(var(--nav-size) * .07) calc(var(--nav-size) * .2);color:var(--green2);background:#0dff761a;border:1px solid #0dff7666;border-radius:999px;display:inline-flex}.dark-theme .fluid-live{color:var(--green1)}.fluid-live__dot{width:calc(var(--nav-size) * .14);height:calc(var(--nav-size) * .14);background:var(--green1);border-radius:50%;animation:1.6s ease-in-out infinite fluidPulse;box-shadow:0 0 0 3px #0dff7640}.fluid-live--paused{color:#d97706;background:#f59e0b1f;border-color:#f59e0b73}.dark-theme .fluid-live--paused{color:#fbbf24}.fluid-live--paused .fluid-live__dot{background:#f59e0b;animation:none;box-shadow:0 0 0 3px #f59e0b40}@keyframes fluidPulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}.fluid-elements{gap:calc(var(--nav-size) * .16);margin-bottom:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(92px,1fr));display:grid}.fluid-element{align-items:center;gap:calc(var(--nav-size) * .1);padding:calc(var(--nav-size) * .18) calc(var(--nav-size) * .1);border:1px solid var(--fluid-line);color:var(--text-color);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:calc(var(--nav-size) * 1.05);background:#ffffff0a;border-radius:10px;flex-direction:column;font-family:inherit;transition:transform .15s,border-color .15s,background .15s;display:flex}.fluid-element:hover{background:#ffffff17;transform:translateY(-1px)}.fluid-element.active{border-color:var(--fg-mint);box-shadow:0 0 0 1px var(--fg-mint);background:#ffffff17}.fluid-element__dot{width:calc(var(--nav-size) * .46);height:calc(var(--nav-size) * .46);border:1px solid #ffffff40;border-radius:6px;box-shadow:inset 0 0 0 1px #00000026}.fluid-element__dot--erase{color:#fff;background:#2a2f3a;border-style:dashed;border-color:#ffffff80;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.fluid-element__name{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.02em;text-align:center;line-height:1.2}.fluid-toolbar{justify-content:space-between;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);flex-wrap:wrap;display:flex}.fluid-brushes{align-items:center;gap:calc(var(--nav-size) * .16);display:flex}.fluid-brush{justify-content:center;align-items:center;gap:calc(var(--nav-size) * .1);min-width:calc(var(--nav-size) * 1.1);height:calc(var(--nav-size) * .72);padding:0 calc(var(--nav-size) * .24);border:2px solid var(--border-nav);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border-radius:999px;transition:border-color .15s,background .15s;display:inline-flex}.fluid-brush:hover{background:#ffffff14}.fluid-brush.active{border-color:var(--fg-mint)}.fluid-brush__dot{background:var(--text-color-strong);border-radius:50%;flex:none;display:block}.fluid-brush__label{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.02em;color:var(--text-color)}.fluid-actions{gap:calc(var(--nav-size) * .18);flex-wrap:wrap;display:flex}.fluid-btn{font-family:inherit;font-weight:700;font-size:calc(var(--nav-size) * .26);padding:calc(var(--nav-size) * .18) calc(var(--nav-size) * .4);cursor:pointer;border:2px solid var(--border-nav);color:var(--text-color);-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border-radius:8px;transition:all .25s}.fluid-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.fluid-canvas-wrap{width:100%;height:64vh;border:1px solid var(--fluid-line);background:linear-gradient(#0d0f1e 0%,#170a18 100%);border-radius:12px;height:min(64dvh,640px);min-height:360px;position:relative;overflow:hidden}.fluid-canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.fluid-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.fluid-hint{color:var(--text-color-accent);font-size:var(--font-size-xs);text-align:center;margin:var(--spacing-sm) 0 0;line-height:var(--line-height-relaxed)}@media (max-width:640px){.fluid{padding:calc(var(--nav-size) * 1.2) var(--spacing-xs) calc(var(--nav-size) * 1.5)}.fluid-title{font-size:var(--font-size-heading)}.fluid-subtitle{font-size:var(--font-size-small)}.fluid-card{padding:var(--spacing-xs)}.fluid-elements{gap:calc(var(--nav-size) * .14);padding:calc(var(--nav-size) * .08) calc(var(--nav-size) * .02) calc(var(--nav-size) * .16);-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;display:flex;overflow-x:auto}.fluid-elements::-webkit-scrollbar{display:none}.fluid-element{align-items:center;gap:calc(var(--nav-size) * .12);padding:calc(var(--nav-size) * .1) calc(var(--nav-size) * .22);min-height:calc(var(--nav-size) * .72);flex-direction:row;flex:none}.fluid-element__dot{width:calc(var(--nav-size) * .34);height:calc(var(--nav-size) * .34)}.fluid-element__name{white-space:nowrap}.fluid-toolbar{flex-direction:column;align-items:stretch}.fluid-brushes,.fluid-actions{justify-content:center}.fluid-brush{min-height:calc(var(--nav-size) * .8)}.fluid-canvas-wrap{height:58vh;height:min(58dvh,520px);min-height:300px}}@media (prefers-reduced-motion:reduce){.fluid,.fluid-orb,.fluid-live__dot{animation:none}.fluid-element,.fluid-btn,.fluid-brush{transition:none}}
