/* Meet Fluffy: the shared look of the simple site (home, contact). Load after apple.css; it overrides apple.css's
* tokens and adds dark mode (follows the device). Mobile first: base styles are the phone; 734px widens.
* Brand rules: docs/brand.md.
*
* meet fluffy in the nav
* inputs: .m-input buttons: .m-btn soft brand band: .m-band gradient words: .fl-ink honeypot: .hp
*/
:root { --page: #e9e9ec; /* a soft grey, so the white film poster and cards pop */
--ink: #1d1d1f; --ink-2: #6e6e73; --surface: #ffffff; --line: rgba(0,0,0,.16);
--fl: linear-gradient(90deg, #ff7a45, #ff4fa0 50%, #8a63ff); --err: #b3261e;
--link: #c8440f; --tint: rgba(255,122,69,.14); } /* orange text (links, tags) and its soft fill */
body { background: var(--page); color: var(--ink); }
main { overflow-x: clip; } /* clip, not hidden: hidden makes main a scroll container */
.fl-ink { background: var(--fl); -webkit-background-clip: text; background-clip: text; color: transparent;
padding-bottom: .12em; margin-bottom: -.12em; display: inline-block; } /* descenders don't clip */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
h1, h2 { font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; }
.lede { font-size: clamp(19px, 4.6vw, 26px); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink-2); font-weight: 500; }
/* nav: "meet fluffy" with a live 3D fur Fluffy (assets/fluffy-fur.js) that bobs, blinks and follows the pointer */
.a-mark b { font-weight: 500; color: var(--ink-2); margin-right: -3px; }
.mark-fur { width: 34px; height: 40px; margin: -6px 0 -4px -4px; display: block; }
.mark-fur canvas { width: 100%; height: 100%; display: block; }
/* the soft brand band (signup, contact) */
.m-band { background: linear-gradient(180deg, var(--page) 0%, #fdf0e9 38%, #f6eefe 100%); }
/* inputs and buttons */
.m-input { width: 100%; min-height: 54px; font: inherit; font-size: 17px; padding: 0 20px; border-radius: 980px;
border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.m-input::placeholder { color: #8a8a8e; }
.m-input:focus { outline: none; border-color: var(--a-orange-ink); box-shadow: 0 0 0 4px rgba(200,68,15,.14); }
.m-input[aria-invalid="true"] { border-color: var(--err); }
.m-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 980px; background: var(--a-orange-ink);
color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; padding: 0 26px; text-decoration: none; }
.m-btn:hover { background: #b03a0c; }
.m-btn[disabled] { opacity: .6; cursor: progress; }
.m-err { color: var(--err); }
.hp { position: absolute; left: -10000px; top: -10000px; opacity: 0; }
.a-nav-cta { white-space: nowrap; }
@media (max-width: 733px) { .cta-long { display: none; } } /* the nav says "Sign up" on phones */
@media (min-width: 734px) { .wrap { padding: 0 32px; } }
/* the nav's light / dark toggle (assets/meet-theme.js) */
.theme-toggle { width: 44px; height: 44px; margin: 0 4px 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: transparent; cursor: pointer; }
.theme-toggle:hover { background: rgba(127,127,127,.14); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; } /* the icon shows the current mode: sun in light, moon in dark */
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
.theme-toggle + .a-nav-cta { margin-left: 0 !important; }
/* ───────── dark mode: , set by assets/meet-theme.js (device setting or the visitor's pick) ───────── */
:root[data-theme="dark"] { color-scheme: dark; --link: #ffa47a; --tint: rgba(255,140,90,.16); --page: #0b0b0f; --ink: #f5f5f7; --ink-2: #a1a1a6; --surface: #1c1c22; --line: rgba(255,255,255,.16); --err: #ff8a80;
--fl: linear-gradient(90deg, #ff8a5c, #ff62ad 50%, #9d7bff);
--a-page: #0b0b0f; --a-page-alt: #121217; --a-text: #f5f5f7; --a-text-2: #a1a1a6; --a-text-3: #8e8e93;
--a-hair: rgba(255,255,255,.12); --a-orange-ink: #e2561d; }
:root[data-theme="dark"] .a-nav { background: rgba(11, 11, 15, .72); border-bottom-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .a-mark { color: var(--ink); }
:root[data-theme="dark"] .m-band { background: radial-gradient(120% 70% at 50% 100%, #2a1638 0%, transparent 70%),
linear-gradient(180deg, var(--page) 0%, #160f1a 45%, #120d1f 100%); }
:root[data-theme="dark"] .m-input::placeholder { color: #6e6e76; }
:root[data-theme="dark"] .m-btn:hover { background: #c8440f; }
/* the footer's admin dot (assets/meet-admin-dot.js): a faint grey dot that opens /admin/ after a 1-second hold; a ring fills meanwhile */
@property --hold { syntax: ''; inherits: false; initial-value: 0%; }
.admin-dot { width: 44px; height: 44px; margin: 0 -14px; padding: 0; border: 0; background: transparent; cursor: default; position: relative;
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.admin-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
background: var(--a-text-2); opacity: .09; transition: opacity .2s, transform .2s; }
.admin-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; border-radius: 50%;
background: conic-gradient(#ff4fa0 var(--hold), transparent 0);
-webkit-mask: radial-gradient(circle, transparent 8.5px, #000 9px); mask: radial-gradient(circle, transparent 8.5px, #000 9px);
opacity: 0; transition: opacity .15s; --hold: 0%; }
:root[data-theme="dark"] .admin-dot::before { opacity: .13; } /* grey on near-black needs a little more */
.admin-dot:hover::before { opacity: .3; }
.admin-dot.holding::before { opacity: 1; background: var(--fl); transform: scale(.85); }
.admin-dot.holding::after { opacity: 1; --hold: 100%; transition: opacity .15s, --hold 1s linear; }
.admin-dot:focus-visible { outline: 2px solid var(--a-orange-ink); outline-offset: -10px; border-radius: 50%; }