@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-800.ttf') format('truetype')}

/* Strawberry Milk is the first-visit palette; appearance follows the device. */
:root {
 --y-bg:#fff1f3;--y-card:#fffafa;--y-ink:#59363d;--y-muted:#8a626c;--y-accent:#b33d60;
 --y-soft:#fbdce5;--y-pink:#f0a9bf;--y-lime:#f9d5dd;--y-sun:#ffe3cf;--y-sky:#edd2dc;
 --y-border:#efcbd5;--y-sidebar:#fff7f8;--y-surface-2:#fce6ed;--y-on-accent:#ffffff;
 --y-danger:#a71e4b;--y-danger-soft:#ffe4ee;--y-success:#42672f;--y-success-soft:#e7efd9;
 --y-warn:#7a4e26;--y-warn-soft:#fff0d8;
 --y-phone-top:#fff0f1;--y-phone-mid:#f8ccd8;--y-phone-bottom:#edcce6;--y-phone-glow:#fff9ee;--y-phone-bloom:#ffd9bf;
 --y-phone-text:#683845;--y-phone-card:#ffffffcc;--y-phone-feature:#f9d5dd;--y-phone-badge:#b33d60;
 --y-phone-frame:#59363d;--y-phone-social:#ffffff70;
}
:root[data-yuzu-palette="tidal"] {
 --y-bg:#eef5fc;--y-card:#ffffff;--y-ink:#102b4f;--y-muted:#52677d;--y-accent:#1455c7;
 --y-soft:#dceaff;--y-pink:#a6c6e8;--y-lime:#d4ecff;--y-sun:#e2efff;--y-sky:#85c8e8;
 --y-border:#cbddee;--y-sidebar:#f6faff;--y-surface-2:#e4effb;--y-on-accent:#ffffff;
 --y-danger:#a71e4b;--y-danger-soft:#ffe4ee;--y-success:#35633c;--y-success-soft:#e2f0e2;
 --y-warn:#7a4e26;--y-warn-soft:#fff0d8;
 --y-phone-top:#142f70;--y-phone-mid:#225dbe;--y-phone-bottom:#23757b;--y-phone-glow:#5b9ae9;--y-phone-bloom:#327f96;
 --y-phone-text:#ffffff;--y-phone-card:#f5f9ff;--y-phone-feature:#d4ecff;--y-phone-badge:#1455c7;
 --y-phone-frame:#102b4f;--y-phone-social:#ffffff25;
}
:root[data-yuzu-mode="dark"] {
 --y-bg:#20171d;--y-card:#2d222a;--y-ink:#f8e9ef;--y-muted:#c7a6b3;--y-accent:#f2a5bf;
 --y-soft:#4b2e3d;--y-pink:#b96c89;--y-lime:#ddb0c2;--y-sun:#d4a38d;--y-sky:#b39bb8;
 --y-border:#59414f;--y-sidebar:#261c24;--y-surface-2:#352831;--y-on-accent:#381f2b;
 --y-danger:#ffabc1;--y-danger-soft:#4a2435;--y-success:#bbd99c;--y-success-soft:#2d3b29;
 --y-warn:#f3cf9f;--y-warn-soft:#413123;
 --y-phone-badge:#a74570;--y-phone-frame:#100b0e;
}
:root[data-yuzu-palette="tidal"][data-yuzu-mode="dark"] {
 --y-bg:#121d2e;--y-card:#1c2b40;--y-ink:#e7f0ff;--y-muted:#adc1db;--y-accent:#91baff;
 --y-soft:#293f62;--y-pink:#668cb4;--y-lime:#abcce7;--y-sun:#a5bfd9;--y-sky:#7db6d5;
 --y-border:#3b5471;--y-sidebar:#172438;--y-surface-2:#23354d;--y-on-accent:#112a50;
 --y-danger:#ffabc1;--y-danger-soft:#442939;--y-success:#b0dbba;--y-success-soft:#223b35;
 --y-warn:#f3cf9f;--y-warn-soft:#3c352d;
 --y-phone-top:#142545;--y-phone-mid:#284f8a;--y-phone-bottom:#245c6b;--y-phone-glow:#507fb8;--y-phone-bloom:#337a89;
 --y-phone-text:#ffffff;--y-phone-card:#e3edfc;--y-phone-feature:#bddcf1;--y-phone-badge:#2763a4;
 --y-phone-frame:#080f1b;--y-phone-social:#ffffff25;
}
@media(prefers-color-scheme:dark){
 :root:not([data-yuzu-mode]){
  --y-bg:#20171d;--y-card:#2d222a;--y-ink:#f8e9ef;--y-muted:#c7a6b3;--y-accent:#f2a5bf;
  --y-soft:#4b2e3d;--y-pink:#b96c89;--y-lime:#ddb0c2;--y-sun:#d4a38d;--y-sky:#b39bb8;
  --y-border:#59414f;--y-sidebar:#261c24;--y-surface-2:#352831;--y-on-accent:#381f2b;
  --y-danger:#ffabc1;--y-danger-soft:#4a2435;--y-success:#bbd99c;--y-success-soft:#2d3b29;
  --y-warn:#f3cf9f;--y-warn-soft:#413123;--y-phone-frame:#100b0e;color-scheme:dark;
 }
}

/* Minimal typography and Graphic details share the marketing and editor tokens. */
:root{
 --bg:var(--y-bg);--card:var(--y-card);--ink:var(--y-ink);--muted:var(--y-muted);--violet:var(--y-accent);
 --pink:var(--y-pink);--lime:var(--y-lime);--sun:var(--y-sun);--sky:var(--y-sky);
 --body:Manrope,ui-sans-serif,system-ui,sans-serif;--display:var(--body);--font-ui:var(--body);--font-display:var(--body);
 --surface:var(--y-card);--surface-2:var(--y-surface-2);--sidebar-bg:var(--y-sidebar);
 --border:var(--y-border);--border-strong:var(--y-border);--border-hover:var(--y-muted);
 --text:var(--y-ink);--text-2:var(--y-muted);--text-3:var(--y-muted);--hover:var(--y-soft);
 --accent:var(--y-accent);--accent-text:var(--y-accent);--accent-soft:var(--y-soft);
 --violet-hover:var(--y-accent);--violet-text:var(--y-accent);--violet-deep:var(--y-accent);
 --accent-ring:color-mix(in srgb,var(--y-accent) 20%,transparent);--focus:var(--y-accent);
 --r-lg:18px;--r-md:18px;--shadow:2px 2px 0 var(--ink);--shadow-lg:2px 2px 0 var(--ink);
 --primary-bg:var(--y-accent);--primary-hover:var(--y-accent);--primary-text:var(--y-on-accent);
 --primary-border:1px solid var(--y-accent);--primary-shadow:2px 2px 0 var(--ink);
 --primary-shadow-hover:2px 2px 0 var(--ink);--primary-shadow-active:none;
 --logo-border:1px solid var(--y-accent);--logo-shadow:none;--logo-rotate:0deg;
 --phone-frame:var(--y-phone-frame);--phone-shadow:2px 2px 0 var(--ink);
 --tab-on-bg:var(--y-accent);--tab-on-text:var(--y-on-accent);--switch-on:var(--y-accent);
 --nav-active-bg:var(--y-soft);--nav-active-text:var(--y-accent);--nav-hover-bg:var(--y-soft);
 --grid-line:var(--y-border);--map-lo:var(--y-soft);--map-empty:var(--y-surface-2);--map-line:var(--y-card);
 --avatar-bg:linear-gradient(135deg,var(--pink),var(--accent));--toast-bg:var(--y-ink);--toast-text:var(--y-bg);
 --success:var(--y-success);--success-text:var(--y-success);--success-soft:var(--y-success-soft);
 --danger:var(--y-danger);--danger-strong:var(--y-danger);--danger-soft:var(--y-danger-soft);--danger-border:var(--y-border);
 --warn-text:var(--y-warn);--warn-soft:var(--y-warn-soft);--warn-border:var(--y-border);
}
body{font-family:var(--body);background:var(--bg);color:var(--ink)}
.hero-title{font-weight:800;letter-spacing:-.055em}
h2,h3,.section-title{font-weight:800}
.btn-primary,.logo-mark{background:var(--violet);color:var(--y-on-accent)}
.btn,.claim,.feature-card,.sticker,.menu-toggle,.mobile-menu a:not(.btn){border-width:1px;box-shadow:var(--shadow)}
.btn,.claim,.feature-card,.sticker,.mobile-menu a:not(.btn){border-radius:18px}
.btn:hover,.btn:active,.nav-actions .btn,.nav-actions .btn:hover{box-shadow:var(--shadow)}
.logo-mark{rotate:0deg;border-width:1px;box-shadow:none}
.hero-title mark::before{background:var(--lime)}
.claim .prefix,.field input{color:var(--ink)}
.claim input::placeholder{color:var(--muted)}
.blob{opacity:.24}
.badge,.claim-note{color:var(--muted)}
.phone .screen{
 background:radial-gradient(120% 70% at 50% 0%,var(--y-phone-glow),transparent 60%),radial-gradient(90% 65% at 100% 100%,var(--y-phone-bloom),transparent 75%),linear-gradient(165deg,var(--y-phone-top),var(--y-phone-mid) 55%,var(--y-phone-bottom));
 color:var(--y-phone-text);
}
.phone{box-shadow:var(--shadow);background:var(--y-phone-frame)}
.phone .notch{background:var(--y-phone-frame)}
.phone .p-name,.phone .p-bio,.phone .p-socials,.phone .p-url{color:var(--y-phone-text)}
.phone .p-name .verified{background:var(--y-phone-badge)}
.phone .p-name .verified .i{color:#fff}
.phone .p-socials span{background:var(--y-phone-social)}
.phone .p-link{background:var(--y-phone-card);color:#683845;border-color:var(--y-border);box-shadow:none}
.phone .p-link.feat{background:var(--y-phone-feature)}
[data-yuzu-palette="tidal"] .phone .p-link{color:#102b4f}
.ai-home{background:linear-gradient(180deg,var(--bg),var(--accent-soft) 55%,var(--bg))}
.ai-chips li{background:var(--accent-soft);color:var(--accent-text)}
.ai-go{background:var(--accent);color:var(--y-on-accent)}
.ai-arrow span{background:var(--accent-soft);color:var(--ink)}
.ai-gets li>.i{background:var(--y-accent);color:var(--y-on-accent)}
.cta{background:var(--accent);color:var(--y-on-accent)}
.ed-shot{box-shadow:var(--shadow)}
.aip-video>img{box-shadow:var(--shadow);border-color:var(--border)}
.ft-sections{background:linear-gradient(170deg,var(--y-soft),var(--y-surface-2))}
.live-scenes,.mu-week,.mu-looks{background:linear-gradient(180deg,var(--y-bg),var(--y-soft))}
.tile-ai{background:linear-gradient(135deg,var(--y-soft),var(--y-card))}
.run-ai,.aip-ico,.aip-video video{background:var(--y-soft)}
.mu-bar span{background:linear-gradient(90deg,var(--violet) var(--w),var(--y-soft) var(--w))}
.ai-glow{box-shadow:0 0 0 1px var(--y-border),0 4px 18px -4px var(--accent-ring)}
.ai-glow:before{background:conic-gradient(from var(--ai-a),var(--accent),var(--pink),var(--sky),var(--accent))}
.ai-invite.ai-glow,.setup-pick-ai.ai-glow{background:linear-gradient(120deg,var(--y-soft),var(--y-surface-2)) padding-box}
.page-top.aip-hero,.page-top.mu-hero,.mu-tile-ai{background:radial-gradient(120% 90% at 10% 0%,var(--y-soft),var(--y-bg) 80%);color:var(--ink)}
.aip-hero .section-title,.mu-hero .section-title{color:var(--ink)}
.aip-hero .crumbs,.mu-hero .crumbs,.aip-hero .lib-lead,.aip-hero .lib-small,.aip-chips,.aip-stats span{color:var(--muted)}
.mu-lead,.mu-small{color:var(--muted)}
.mu-hl{background:linear-gradient(90deg,var(--accent),var(--muted));background-clip:text;-webkit-background-clip:text;color:transparent}
.mu-hero .claim{box-shadow:var(--shadow)}
.mu-ticket{background:var(--y-soft);color:var(--ink)}
.mu-float span{background:var(--card);color:var(--ink)}
.aip-hero .crumbs a,.mu-hero .crumbs a,.aip-again{color:var(--accent)}
.aip-hero .section-title mark,.aip-stats b{background:linear-gradient(90deg,var(--accent),var(--muted));background-clip:text;-webkit-background-clip:text;color:transparent}
.aip-aurora i:nth-child(1){background:radial-gradient(closest-side,var(--accent-ring),transparent)}
.aip-aurora i:nth-child(2){background:radial-gradient(closest-side,var(--pink),transparent)}
.aip-aurora i:nth-child(3){background:radial-gradient(closest-side,var(--sky),transparent)}
.aip-field{background:conic-gradient(from var(--aip-a),var(--accent),var(--pink),var(--sky),var(--accent));box-shadow:var(--shadow)}
.aip-field textarea,.aip-field-foot{background:var(--card);color:var(--ink)}
.aip-field textarea::placeholder{color:var(--muted)}
.aip-go{background:var(--accent);color:var(--y-on-accent)}
.aip-chips button{background:var(--card);color:var(--accent);border-color:var(--border)}
.aip-chips button:hover{background:var(--y-soft);border-color:var(--accent)}
.aip-hero .claim{box-shadow:var(--shadow)}
.aip-msg{background:var(--danger-soft);color:var(--danger)}
.aip-scan{background:linear-gradient(180deg,var(--y-soft),var(--y-bg));border-color:var(--y-phone-frame);box-shadow:var(--shadow);color:var(--ink)}
.demo-claim,.demo-themes,.footer-socials a,.urlbar,.paste,.float-ico,.places li,.stats-card,
.chat-search,.topics label,.bubble.them,.typing,.icon-cloud span,.fpx-in,.fpx-out>div,
.ft-fonts span,.ft-list li,.fg-arrow,.fx-btn,.mock-editor,.me-add,.me-card,.ins-card,
.donut span,.ft-cal,.fs-btn,.fs-list,.ft-app,.ft-feat,.ff-tag,.guide,.ins-kpis div,
.lang-ask,.mu-stub,.mu-stub em,.mu-stats,.mu-style b,.guide-jump a{
 background:var(--card);color:var(--ink);
}
.demo-links,.tile-gallery{background:color-mix(in srgb,var(--lime) 20%,var(--card))}
.demo-share,.tile-links{background:color-mix(in srgb,var(--sky) 16%,var(--card))}
.tile-design{background:color-mix(in srgb,var(--pink) 12%,var(--card))}
.tile-drag{background:color-mix(in srgb,var(--sun) 30%,var(--card))}
.tile-qr,.lib-def{background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.qr-tile,.ft-qr,.mu-qr{--ink:#15121f;background:#fff;color:#15121f}
.me-bar,.legal-note{background:var(--warn-soft);color:var(--warn-text)}
.me-bar em,.me-card.off{background:var(--y-surface-2)}
.me-phone i{background:var(--card);color:var(--ink)}
.ins-row i{background:linear-gradient(90deg,var(--accent),var(--pink)) 0 0/var(--w) 100% no-repeat,var(--y-surface-2)}
.try-more-art{background:repeating-linear-gradient(135deg,var(--y-soft) 0 10px,var(--y-surface-2) 10px 20px)}
.try-card[aria-current="true"]{background:var(--y-soft)}
.how,.promises,.made-link,.bubble.me,.ft-shapes span,.me-bar strong,.mu-ai-in b{color:var(--y-on-accent)}
.billing button[aria-pressed="true"],.filters input:checked+label,.topics input:checked+label,
.theme-chips input:checked+label,.ed-tabs input:checked+label,.paste span,.copied,.fpx-to,
.fx-row>em,.guide-ico,.mu-day,.swatch-more{color:var(--y-bg)}
.aip-panel,.aip-pick button,.aip-bio-text{background:var(--card);color:var(--ink)}
.aip-pick button{border-color:var(--border)}
.aip-pick button[aria-pressed="true"]{background:var(--y-soft);color:var(--accent);border-color:var(--accent)}
.aip-seg{background:var(--y-surface-2)}
.aip-claim{background:var(--accent);color:var(--y-on-accent)}
.mu-strip p{color:inherit;opacity:.7}
.yuzu-demo{background:var(--card);color:var(--accent);border-color:var(--ink);font-family:var(--body)}

yuzu-appearance-settings{display:block;margin-bottom:24px}
.yuzu-appearance-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.yuzu-appearance-fields>div{display:grid;gap:8px}
.yuzu-appearance-fields label{font:600 14px/1.5 var(--body);color:var(--text)}
.yuzu-appearance-fields select{width:100%;min-height:44px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:10px;padding:10px 36px 10px 12px;font:500 14px/1.5 var(--body)}
.yuzu-appearance-hint{color:var(--text-2);font-size:13px;margin:14px 0 0}
@media(max-width:560px){.yuzu-appearance-fields{grid-template-columns:1fr;gap:16px}}

/* Marketing illustrations with fixed light surfaces must follow appearance too. */
.claim-error,.auth-error{background:var(--danger-soft);color:var(--danger)}
.claim-success{background:var(--success-soft);color:var(--success-text)}
[data-yuzu-mode="dark"] .hero-title mark::before{background:var(--y-soft)}
[data-yuzu-mode="dark"] .card-icon,[data-yuzu-mode="dark"] .tile-icon{background:var(--y-soft);color:var(--accent)}
[data-yuzu-mode="dark"] .grow,[data-yuzu-mode="dark"] .tile-players,[data-yuzu-mode="dark"] .ft-insights,
[data-yuzu-mode="dark"] .lib-guides,[data-yuzu-mode="dark"] .mu-strip,[data-yuzu-mode="dark"] .mu-sleeve{
 background:var(--card);color:var(--ink);
}
[data-yuzu-mode="dark"] .bg-lime,[data-yuzu-mode="dark"] .bg-sun,[data-yuzu-mode="dark"] .bg-sky{color:var(--y-bg)}
[data-yuzu-mode="dark"] .menu-toggle span{background:var(--y-on-accent)}
[data-yuzu-mode="dark"] .sticker-2{background:var(--y-soft)}
[data-yuzu-mode="dark"] .blob{opacity:.15}