/* Deftrial Stories profile shell v176 */
[hidden] { display: none !important; }
/* Homepage profile, story ring, and Thoughts */
.story-profile {
  --story-profile-size: min(300px, 72vw);
  position: relative;
  align-self: center;
  min-width: 0;
  padding-top: 2.5rem;
  overflow: visible;
  contain: layout style;
}
.story-profile-button {
  position: relative;
  display: grid;
  width: var(--story-profile-size);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 38px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: default;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.story-profile-button:disabled { opacity: 1; }
.story-profile-button.is-ready { cursor: pointer; }
.story-profile-button.is-ready:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 8px;
}
.story-profile-button .profile-card {
  z-index: 2;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  transform: translateZ(0);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.story-profile-button.is-ready:hover .profile-card {
  transform: translateZ(0) scale(1.012);
  box-shadow: 0 30px 82px rgba(0,0,0,.32);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.story-profile-button.is-ready:active .profile-card { transform: translateZ(0) scale(.995); }
.story-profile-ring {
  position: absolute;
  z-index: 1;
  inset: -10px;
  border-radius: 42px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(115deg, #1f7dff, #51c8ff, #71f0d5, #d8fbff, #8877ff, #1f7dff);
  background-size: 320% 320%;
  box-shadow: 0 0 0 1px rgba(126,224,255,.44), 0 0 22px rgba(54,180,255,.42), 0 0 48px rgba(76,238,210,.22);
  transition: opacity .3s ease, filter .3s ease;
  will-change: background-position, filter;
}
.story-profile-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 38px;
  background: var(--bg);
}
.story-profile.has-story .story-profile-ring {
  opacity: 1;
  animation: storyRingFlow 3.4s ease-in-out infinite, storyRingGlow 1.8s ease-in-out infinite;
}
.story-profile.has-story.is-seen .story-profile-ring {
  opacity: .55;
  filter: saturate(.72);
  animation-duration: 7s, 3.8s;
}
@keyframes storyRingFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes storyRingGlow {
  0%,100% { filter: brightness(1) saturate(1.05); box-shadow: 0 0 0 1px rgba(126,224,255,.42), 0 0 16px rgba(54,180,255,.34), 0 0 34px rgba(76,238,210,.18); }
  50% { filter: brightness(1.18) saturate(1.22); box-shadow: 0 0 0 2px rgba(189,247,255,.7), 0 0 30px rgba(54,180,255,.66), 0 0 68px rgba(76,238,210,.38); }
}
.story-profile-label {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -2.35rem;
  transform: translateX(-50%);
  padding: .4rem .68rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.story-profile.has-story .story-profile-label { opacity: 1; transform: translate(-50%, -2px); color: var(--text); }
.story-admin-add[hidden] { display: none !important; }
.story-admin-add {
  position: absolute;
  z-index: 8;
  left: calc(50% + (var(--story-profile-size) / 2) - 12px);
  bottom: .95rem;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  transform: translateX(-50%);
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 12px 32px rgba(0,0,0,.34);
  color: var(--bg);
  text-decoration: none;
  font-size: 0;
  line-height: 0;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background-color .25s ease, color .25s ease;
}
.story-admin-add:hover { transform: translateX(-50%) scale(1.065); box-shadow: 0 16px 38px rgba(0,0,0,.4); }
.story-admin-add:active { transform: translateX(-50%) scale(.96); }
.story-admin-add:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.story-admin-add__glyph,
.story-admin-add__glyph::before {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 17px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  content: "";
}
.story-admin-add__glyph::before { transform: translate(-50%, -50%) rotate(90deg); }

.profile-thought {
  position: absolute;
  z-index: 9;
  top: clamp(-1rem, -1.5vw, -.45rem);
  left: 50%;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .35rem;
  width: min(300px, 82vw);
  max-height: 136px;
  transform: translateX(-50%);
  padding: .76rem .9rem;
  border: 1px solid color-mix(in srgb, #fff 50%, transparent);
  border-radius: 20px;
  background: linear-gradient(135deg, #e4f6ff, #8ad9ff);
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
  color: #071520;
  text-align: center;
  overflow: hidden;
  touch-action: pan-y;
  animation: thoughtEnter .28s ease both;
  transition: box-shadow .2s ease;
}
.profile-thought:hover,
.profile-thought:focus-within { box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.profile-thought p {
  grid-column: 2;
  display: -webkit-box;
  margin: 0;
  font-size: clamp(.76rem, 1.4vw, .86rem);
  font-weight: 850;
  line-height: 1.38;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.profile-thought.is-long p { font-size: clamp(.71rem, 1.25vw, .81rem); line-height: 1.34; }
.profile-thought > span {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 15px;
  height: 15px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1px solid rgba(255,255,255,.38);
  border-bottom: 1px solid rgba(255,255,255,.38);
}
.profile-thought__nav {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #fff 20%, transparent);
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  opacity: .78;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.profile-thought__nav:hover,
.profile-thought__nav:focus-visible { opacity: 1; transform: scale(1.08); background: color-mix(in srgb, #fff 35%, transparent); }
.profile-thought__count { grid-column: 1 / -1; justify-self: center; min-height: .7rem; margin-top: -.18rem; color: currentColor; font-size: .58rem; font-weight: 850; letter-spacing: .08em; opacity: .62; }
.thought-tone-sky { background: linear-gradient(135deg, #e4f6ff, #8ad9ff); }
.thought-tone-mint { background: linear-gradient(135deg, #d8fff4, #7ce8ce); }
.thought-tone-blue { background: linear-gradient(135deg, #e3edff, #86b4ff); }
.thought-tone-violet { background: linear-gradient(135deg, #f0e1ff, #c092f4); }
.thought-tone-night { background: linear-gradient(135deg, #27364d, #111827); color: #f8fafc; }
.thought-tone-coral { background: linear-gradient(135deg, #ffe3dd, #ff9b8f); color: #2a0c0a; }
.thought-tone-amber { background: linear-gradient(135deg, #fff3c4, #ffc75c); color: #281800; }
.thought-tone-rose { background: linear-gradient(135deg, #ffe2ee, #ff8fbe); color: #2b0717; }
.thought-tone-forest { background: linear-gradient(135deg, #d8f7df, #71c98c); color: #082313; }
.thought-tone-aurora { background: linear-gradient(135deg, #d9fff5, #88c9ff 55%, #c5a4ff); color: #071326; }
.thought-tone-custom { background: linear-gradient(135deg, var(--thought-from,#dff5ff), var(--thought-to,#8dd8ff)); color: var(--thought-text,#07111f); }
@keyframes thoughtEnter { from { opacity: 0; transform: translate(-50%, 8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }