/* Lifted from the app's own stylesheets so the mark here is the same
   object, with the same bend and the same motion - not a lookalike. */



:root,
:root[data-theme="cocoa"] {
  
  --obsidian:        #120D0A;
  --obsidian-deep:   #0C0806;
  --graphite:        #1C130E;
  --graphite-raised: #2A1A12;
  --graphite-high:   #352217;
  --cocoa-rich:      #5A3824;
  --cocoa-shadow:    #6B4429;
  --graphite-line:   rgba(255, 247, 232, 0.13);

  
  --clay:            #A66B3F;
  --copper:          #B87838;
  --gold:            #D8A84E;
  --champagne:       #D8A84E;
  --champagne-bright:#F3D6A3;
  --champagne-deep:  #A66B3F;
  --champagne-glow:  rgba(216, 168, 78, 0.30);
  --gold-brown:      #8A5734;

  
  --rosewood:        #C45C4A;
  --rosewood-deep:   #8A3B30;
  --rosewood-glow:   rgba(196, 92, 74, 0.28);

  
  --cream:           #FFF7E8;
  --paper:           #FFFCF7;
  --ivory:           #FFF7E8;
  --ivory-dim:       rgba(255, 247, 232, 0.76);
  --ivory-faint:     #BDAA91;
  --ivory-disabled:  rgba(255, 247, 232, 0.32);
  --on-gold:         #FFF7E8;

  
  --sage:            #7E8E72;
  --sage-deep:       #55614C;
  --sage-glow:       rgba(126, 142, 114, 0.24);

  --danger:          #C45C4A;
  --danger-tint:     rgba(196, 92, 74, 0.12);

  --app-wash:
    linear-gradient(rgba(90, 56, 36, 0.34), rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(#120D0A, #120D0A);
  --surface-card: linear-gradient(#2A1A12, #221609);

  
  --cta-start:  #7A4B2B;
  --cta-mid:    #B87838;
  --cta-end:    #D8A84E;
  --cta-text:   #FFF7E8;
  --cta-glow:   rgba(216, 168, 78, 0.35);
  --cta-border: rgba(243, 214, 163, 0.45);
  --grad-gold:      linear-gradient(97deg, var(--cta-start) 0%, var(--cta-mid) 52%, var(--cta-end) 100%);
  --grad-gold-chip: linear-gradient(97deg, var(--cta-mid) 0%, var(--cta-end) 100%);

  
  --bg:                 #11100F;
  --surface:            #1D1A1A;
  --surface-elevated:   #151313;
  --surface-raised:     #262121;
  --text-primary:       #FFF7E8;
  --text-secondary:     rgba(255, 247, 232, 0.78);
  --text-muted:         #BDAA91;
  --border-soft:        rgba(246, 240, 232, 0.14);
  --border-strong:      rgba(246, 240, 232, 0.24);

  --chip-bg:            #1D1A1A;
  --chip-text:          #FFF7E8;
  --chip-border:        rgba(246, 240, 232, 0.14);
  --chip-selected-text: #FFF7E8;

  --btn-secondary-bg:     #1D1A1A;
  --btn-secondary-text:   #FFF7E8;
  --btn-secondary-border: rgba(246, 240, 232, 0.14);
  --btn-quiet-text:       #BDAA91;

  --danger-text:    #E08476;
  --danger-surface: rgba(196, 92, 74, 0.12);
  --danger-border:  rgba(196, 92, 74, 0.42);

  --toast-bg:   linear-gradient(180deg, rgba(38, 33, 33,.97), rgba(17, 16, 15,.98));
  --toast-text: #FFF7E8;

  --tabbar-bg:  rgba(17, 16, 15, .96);
  --sheet-bg:   linear-gradient(180deg, #262121, #151313);

  
  --tab-inactive: rgba(246, 240, 232, 0.52);
  --tabbar-shadow: 0 -18px 38px rgba(0,0,0,.46), inset 0 1px 0 rgba(255, 252, 247,.06);
  --quiet-surface: rgba(255, 247, 232, .045);
  --placeholder: rgba(246, 240, 232, .46);
  --mic-rec-text: #F0D9DA;
  --mic-stop-text: #FFF7E8;
  --mic-stop-accent: #E35B4F;
  --badge-bg: rgba(216, 168, 78, 0.10);
  --badge-text: #E7C489;
  --badge-border: rgba(216, 168, 78, 0.30);
  --sage-text: #B9C6BC;
  --panel-3d: linear-gradient(168deg, #262121, #151313);
  --sticky-fade: linear-gradient(180deg, rgba(17,16,15,0) 0%, rgba(17,16,15,.82) 34%, rgba(17,16,15,.96) 100%);
}


:root[data-theme="candlelit"] {
  --obsidian:        #1A100B;
  --obsidian-deep:   #120A06;
  --graphite:        #26160F;
  --graphite-raised: #321D13;
  --graphite-high:   #3E2517;
  --cocoa-rich:      #7A4B2B;
  --cocoa-shadow:    #8B5730;
  --graphite-line:   rgba(255, 240, 216, 0.15);

  --clay:            #7A4B2B;
  --copper:          #B87838;
  --gold:            #E2B45C;
  --champagne:       #E2B45C;
  --champagne-bright:#F6DDAE;
  --champagne-deep:  #B87838;
  --champagne-glow:  rgba(226, 180, 92, 0.32);
  --gold-brown:      #8B5730;

  --rosewood:        #B85A4E;
  --rosewood-deep:   #7E3A31;
  --rosewood-glow:   rgba(184, 90, 78, 0.28);

  --cream:           #FFF0D8;
  --paper:           #FFF8EA;
  --ivory:           #FFF0D8;
  --ivory-dim:       rgba(255, 240, 216, 0.78);
  --ivory-faint:     #C8AA83;
  --ivory-disabled:  rgba(255, 240, 216, 0.34);
  --on-gold:         #FFF0D8;

  --sage:            #85907A;
  --sage-deep:       #5A6352;
  --sage-glow:       rgba(133, 144, 122, 0.24);

  --danger:          #B85A4E;
  --danger-tint:     rgba(184, 90, 78, 0.14);

  --app-wash:
    linear-gradient(rgba(122, 75, 43, 0.40), rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(#1A100B, #1A100B);
  --surface-card: linear-gradient(#321D13, #2A1810);

  --cta-start:  #7A4B2B;
  --cta-mid:    #B87838;
  --cta-end:    #E2B45C;
  --cta-text:   #FFF0D8;
  --cta-glow:   rgba(226, 180, 92, 0.38);
  --cta-border: rgba(246, 221, 174, 0.48);
  --grad-gold:      linear-gradient(97deg, var(--cta-start) 0%, var(--cta-mid) 52%, var(--cta-end) 100%);
  --grad-gold-chip: linear-gradient(97deg, var(--cta-mid) 0%, var(--cta-end) 100%);

  --bg:                 #1A100B;
  --surface:            #26160F;
  --surface-elevated:   #1F120C;
  --surface-raised:     #321D13;
  --text-primary:       #FFF0D8;
  --text-secondary:     rgba(255, 240, 216, 0.80);
  --text-muted:         #C8AA83;
  --border-soft:        rgba(255, 240, 216, 0.16);
  --border-strong:      rgba(255, 240, 216, 0.26);

  --chip-bg:            #26160F;
  --chip-text:          #FFF0D8;
  --chip-border:        rgba(255, 240, 216, 0.16);
  --chip-selected-text: #23140C;

  --btn-secondary-bg:     #26160F;
  --btn-secondary-text:   #FFF0D8;
  --btn-secondary-border: rgba(255, 240, 216, 0.18);
  --btn-quiet-text:       #C8AA83;

  --danger-text:    #E0968A;
  --danger-surface: rgba(184, 90, 78, 0.14);
  --danger-border:  rgba(184, 90, 78, 0.44);

  --toast-bg:   linear-gradient(180deg, rgba(52, 32, 21,.97), rgba(26, 16, 11,.98));
  --toast-text: #FFF0D8;

  --tabbar-bg:  rgba(26, 16, 11, .96);
  --sheet-bg:   linear-gradient(180deg, #321D13, #1F120C);

  --tab-inactive: rgba(255, 240, 216, 0.54);
  --tabbar-shadow: 0 -18px 38px rgba(0,0,0,.46), inset 0 1px 0 rgba(255, 252, 247,.06);
  --quiet-surface: rgba(255, 240, 216, .05);
  --placeholder: rgba(255, 240, 216, .46);
  --mic-rec-text: #F0D9DA;
  --mic-stop-text: #FFF0D8;
  --mic-stop-accent: #E35B4F;
  --badge-bg: rgba(226, 180, 92, 0.12);
  --badge-text: #EFCB8C;
  --badge-border: rgba(226, 180, 92, 0.32);
  --sage-text: #BFC9B7;
  --panel-3d: linear-gradient(168deg, #321D13, #1F120C);
  --sticky-fade: linear-gradient(180deg, rgba(26,16,11,0) 0%, rgba(26,16,11,.82) 34%, rgba(26,16,11,.96) 100%);
}


:root[data-theme="porcelain"] {
  --obsidian:        #F8F1E7;
  --obsidian-deep:   #F2E9DC;
  --graphite:        #FFF9F0;
  --graphite-raised: #FFFCF6;
  --graphite-high:   #FBF3E7;
  --cocoa-rich:      #E2C8A8;
  --cocoa-shadow:    #D6B893;
  --graphite-line:   rgba(38, 22, 15, 0.14);

  --clay:            #8A5734;
  --copper:          #B87838;
  --gold:            #A9762C;
  --champagne:       #A9762C;
  --champagne-bright:#8A5734;
  --champagne-deep:  #8A5734;
  --champagne-glow:  rgba(169, 118, 44, 0.20);
  --gold-brown:      #6F4622;

  --rosewood:        #B05043;
  --rosewood-deep:   #8A3B30;
  --rosewood-glow:   rgba(176, 80, 67, 0.20);

  --cream:           #26160F;
  --paper:           #FFFFFF;
  --ivory:           #26160F;
  --ivory-dim:       rgba(38, 22, 15, 0.80);
  --ivory-faint:     #7B6652;
  --ivory-disabled:  rgba(38, 22, 15, 0.34);
  --on-gold:         #FFF7E8;

  --sage:            #5F6B55;
  --sage-deep:       #47513F;
  --sage-glow:       rgba(95, 107, 85, 0.20);

  --danger:          #A8402F;
  --danger-tint:     rgba(168, 64, 47, 0.10);

  --app-wash:
    linear-gradient(rgba(226, 200, 168, 0.55), rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(#F8F1E7, #F8F1E7);
  --surface-card: linear-gradient(#FFF9F0, #FDF6EC);

  --cta-start:  #8A5734;
  --cta-mid:    #B87838;
  --cta-end:    #D8A84E;
  --cta-text:   #FFF7E8;
  --cta-glow:   rgba(184, 120, 56, 0.30);
  --cta-border: rgba(138, 87, 52, 0.40);
  --grad-gold:      linear-gradient(97deg, var(--cta-start) 0%, var(--cta-mid) 52%, var(--cta-end) 100%);
  --grad-gold-chip: linear-gradient(97deg, var(--cta-mid) 0%, var(--cta-end) 100%);

  
  --bg:                 #F8F1E7;
  --surface:            #FFFFFF;
  --surface-elevated:   #FFFCF6;
  --surface-raised:     #FFF9F0;
  --text-primary:       #241309;
  --text-secondary:     #4A3527;
  --text-muted:         #6B5745;
  --border-soft:        rgba(38, 22, 15, 0.16);
  --border-strong:      rgba(38, 22, 15, 0.30);

  --chip-bg:            #FFFFFF;
  --chip-text:          #2A170F;
  --chip-border:        rgba(38, 22, 15, 0.22);
  --chip-selected-text: #FFF7E8;

  --btn-secondary-bg:     #FFFFFF;
  --btn-secondary-text:   #2A170F;
  --btn-secondary-border: rgba(38, 22, 15, 0.26);
  --btn-quiet-text:       #5C4736;

  --danger-text:    #9F3328;
  --danger-surface: #FFF1EC;
  --danger-border:  rgba(159, 51, 40, 0.40);

  --toast-bg:   linear-gradient(180deg, #FFFFFF, #FFF6EA);
  --toast-text: #241309;

  --tabbar-bg:  rgba(248, 241, 231, .97);
  --sheet-bg:   linear-gradient(180deg, #FFFFFF, #FFF7ED);

  --tab-inactive: #6B5745;
  --tabbar-shadow: 0 -14px 30px rgba(111, 70, 34, .14), inset 0 1px 0 rgba(255,255,255,.9);
  --quiet-surface: rgba(255, 255, 255, .72);
  --placeholder: rgba(38, 22, 15, .42);
  --mic-rec-text: #E35B4F;
  --mic-stop-text: #FFF7EA;
  --mic-stop-accent: #E35B4F;
  --badge-bg: #EBD4AC;
  --badge-text: #5E3A1B;
  --badge-border: rgba(94, 58, 27, 0.45);
  --sage-text: #3D4936;
  --panel-3d: linear-gradient(168deg, #FFFFFF, #FBF2E6);
  --sticky-fade: linear-gradient(180deg, rgba(248,241,231,0) 0%, rgba(248,241,231,.86) 34%, rgba(248,241,231,.98) 100%);

}

:root {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --shadow-low:  0 2px 10px rgba(0, 0, 0, .34);
  --shadow-mid:  0 8px 18px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .30);
  --shadow-high: 0 22px 46px rgba(0, 0, 0, .50), 0 6px 14px rgba(0, 0, 0, .34);
  --shadow-lift: 0 34px 66px rgba(0, 0, 0, .56);

  --edge-top: inset 0 1px 0 rgba(255, 247, 232, .07);
  --edge-champagne: inset 0 0 0 1px rgba(216, 168, 78, .20);

  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --font-serif: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-lift: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --tab-h: 50px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  
  --tab-inset: var(--safe-b);
  --safe-t: env(safe-area-inset-top, 0px);
}


.dfm { position: relative; width: 150px; height: 116px; transform-style: preserve-3d; }
.dfm-wrap {
  position: relative; transform-style: preserve-3d;
  animation: dfmFloat 9s var(--ease-in-out) infinite;
}
@keyframes dfmFloat {
  0%,100% { transform: rotateX(33deg) rotateZ(-10deg) translateY(0); }
  50%     { transform: rotateX(27deg) rotateZ(-5deg) translateY(-11px); }
}
.dfm .dfm-edge {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(180deg, #A2937B, #6E6350);
}
.dfm .dfm-edge:nth-of-type(1) { transform: translate(1.5px, 2.5px); filter: brightness(.7); }
.dfm .dfm-edge:nth-of-type(2) { transform: translate(1px, 1.5px); filter: brightness(.85); }
.dfm .dfm-face {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  background:
    linear-gradient(200deg, rgba(255,255,255,.5) 0%, transparent 34%),
    linear-gradient(158deg, #F4EEE1 0%, #DCD1BD 46%, #C2B49B 76%, #AC9E85 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.92),
    inset 0 -1.5px 0 rgba(96,84,62,.5),
    inset 2px 0 3px rgba(255,255,255,.28),
    inset -2px 0 4px rgba(96,84,62,.24);
}
.dfm .dfm-face::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .34;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='80' height='80' filter='url(%23g)' opacity='.6'/></svg>");
}
.dfm .dfm-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 45%;
  transform-origin: bottom center; transform: rotateX(16deg);
  border-radius: 6px 6px 2px 2px; overflow: hidden;
  background:
    linear-gradient(196deg, rgba(255,255,255,.72) 0%, transparent 46%),
    linear-gradient(178deg, #FFFCF4 0%, #EDE3D1 60%, #D6C9B1 100%);
  box-shadow:
    0 9px 14px rgba(56,46,30,.42),
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(120,104,76,.36);
}
.dfm .dfm-crease {
  position: absolute; left: 0; right: 0; top: 45%; height: 4px;
  background: linear-gradient(180deg, rgba(84,70,48,.46), rgba(255,255,255,.16) 70%, transparent);
}
.dfm .dfm-pause { position: absolute; left: 50%; top: 72%; transform: translate(-50%,-50%); display: flex; gap: 5px; }
.dfm .dfm-pause i {
  width: 5px; height: 17px; border-radius: 2.5px;
  background: linear-gradient(180deg, var(--champagne-bright), var(--champagne-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 8px var(--champagne-glow), 0 1px 1px rgba(70,56,32,.5);
}
.dfm .dfm-spec {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden; pointer-events: none;
}
.dfm .dfm-spec::before {
  content: ''; position: absolute; top: -60%; left: -40%; width: 40%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: rotate(14deg); animation: dfmSpec 9s var(--ease-in-out) infinite;
}
@keyframes dfmSpec { 0%,55% { transform: translateX(0) rotate(14deg); opacity: 0; } 70% { opacity: .8; } 100% { transform: translateX(420%) rotate(14deg); opacity: 0; } }
.dfm-glow {
  position: absolute; inset: -14px; border-radius: 18px; pointer-events: none; filter: blur(12px);
  background: linear-gradient(150deg, rgba(221, 198, 156,.4), transparent 52%);
  animation: rimBreath 6s var(--ease-in-out) infinite;
}
.dfm-glow.rose { background: linear-gradient(150deg, rgba(221, 198, 156,.3), transparent 44%, rgba(176,117,122,.5)); }
.dfm-glow.sage { background: linear-gradient(150deg, rgba(221, 198, 156,.3), transparent 44%, rgba(102, 117, 104,.5)); }
.dfm-shadow {
  position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
  width: 128px; height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.78), transparent 72%);
  filter: blur(8px); animation: shadowBreath 9s var(--ease-in-out) infinite;
}
.dfm-wrap.tiny .dfm { width: 84px; height: 64px; }
.dfm-wrap.tiny .dfm-shadow { width: 70px; }
.lockup { position: relative; }
.lockup.hero { text-align: center; padding: 8px 0 2px; }
.lockup.compact { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.lockup.footer { text-align: center; margin-top: 26px; opacity: .9; }
.lockup-text { min-width: 0; }
.bl-mono {
  position: relative; display: inline-flex; gap: .1em; overflow: hidden;
  font-family: var(--font-serif);
  font-size: 54px; line-height: 1; font-weight: 600; letter-spacing: .06em;
  padding: 2px 4px 6px;
}
.bl-mono.sm { font-size: 30px; }
.bl-mono.xs { font-size: 21px; letter-spacing: .1em; padding: 0 1px 2px; }
.bl-l {
  display: inline-block;
  background: linear-gradient(176deg, #FFFCF7 0%, #DDC69C 30%, #C8A45D 60%, #A9843F 84%, #6B5455 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  
  text-shadow:
    0 1px 0 rgba(255,247,230,.5),
    0 -1px 0 rgba(90,72,40,.5),
    0 3px 5px rgba(0,0,0,.6),
    0 8px 18px rgba(0,0,0,.45);
  animation: blResolve 1.1s var(--ease-lift) both;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes blResolve {
  from { opacity: 0; transform: translateY(7px) scale(.94); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.bl-sweep {
  position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,252,240,.7), transparent);
  transform: skewX(-14deg); mix-blend-mode: overlay; pointer-events: none;
  
  opacity: 0;
  animation: blSweep 7s var(--ease-in-out) 1.2s infinite;
}
@keyframes blSweep { 0% { left: -45%; opacity: 0; } 14% { opacity: 1; } 42%, 100% { left: 125%; opacity: 0; } }
.bl-name {
  font-family: var(--font);
  font-size: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--text-primary);
  margin-top: 10px;
}
.bl-name.sm { font-size: 15px; margin-top: 8px; }
.bl-name.xs { font-size: 15px; margin-top: 2px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-tag {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--champagne-deep); margin-top: 7px;
}
.bl-tag.sm { margin-top: 6px; text-transform: none; letter-spacing: .02em; font-size: 12px; color: var(--text-muted); }
.bl-tag.xs { font-size: 9.5px; letter-spacing: .09em; margin-top: 3px; white-space: nowrap; }
.lockup-envelope { display: grid; place-items: center; height: 252px; margin-bottom: 42px; }
.lockup-envelope.sm { height: auto; margin: 0; flex: none; }
.lockup .dfm-wrap.brand .dfm { width: 232px; height: 176px; }
.lockup .dfm-wrap.brand .dfm-shadow { width: 186px; height: 28px; bottom: -32px; }
.lockup .dfm-wrap.brand .dfm-pause i { width: 9px; height: 30px; border-radius: 4px; }
.lockup .dfm-wrap.brand .dfm-glow { inset: -20px; }
.lockup .dfm-wrap.brand-sm .dfm { width: 54px; height: 42px; }
.lockup .dfm-wrap.brand-sm .dfm-shadow { width: 43px; height: 12px; bottom: -12px; }
.lockup .dfm-wrap.brand-sm .dfm-pause i { width: 3.1px; height: 7.5px; }
.bl-motes { position: absolute; inset: 0; pointer-events: none; }
.bl-motes i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--champagne-bright); opacity: 0;
  animation: mote 6s var(--ease-in-out) infinite;
}
.bl-motes i:nth-child(1){left:26%;top:62%;animation-delay:1.4s}
.bl-motes i:nth-child(2){left:44%;top:70%;animation-delay:2.6s}
.bl-motes i:nth-child(3){left:62%;top:64%;animation-delay:3.8s}
.bl-motes i:nth-child(4){left:74%;top:56%;animation-delay:5s}
.lockup.setup { display: grid; place-items: center; gap: 12px; }
.lockup.setup .lockup-envelope.sm { transform: scale(.72); opacity: .9; }