/*
  OraWhale Day 2 CSS extraction: 10-core-components.css
  Source: FinalWebpage/index.html style blocks 4-51
  Purpose: Early component, archive, journal, modal, and UI elevation layers
  Do not reorder before launch. Cascade order is intentional.
*/

/* === original inline style block 004; id: innermuse-memories-modal-v111; original line: 5512 === */
#panelRevealHint{
display:flex;
flex-direction:column;
gap: 6px;
}
.revealStatus{
font-weight: 950;
color: rgba(255,205,120,.95);
letter-spacing: .01em;
line-height: 1.15;
}
.revealStatusSub{
font-size: 12.5px;
opacity: .76;
line-height: 1.35;
}
.memoriesLauncher{
margin-top: 16px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
padding: 14px 14px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(900px 240px at 18% 0%, rgba(155,116,255,.12), transparent 62%),
radial-gradient(900px 260px at 82% 100%, rgba(255,205,120,.09), transparent 60%),
rgba(255,255,255,.04);
box-shadow: 0 18px 56px rgba(0,0,0,.34);
backdrop-filter: blur(18px) saturate(145%);
}
.memoriesLauncherText{ display:flex; flex-direction:column; gap: 4px; }
.memoriesLauncherKicker{
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 900;
color: rgba(255,255,255,.62);
}
.memoriesLauncherSub{
font-size: 14px;
color: rgba(255,255,255,.82);
line-height: 1.35;
}
.memoriesLauncherBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.18);
background:
radial-gradient(900px 140px at 20% 20%, rgba(255,255,255,.14), transparent 60%),
linear-gradient(135deg, rgba(255,205,120,.92), rgba(155,116,255,.84), rgba(140,220,255,.62));
color: rgba(18,10,28,.96);
border-radius: 16px;
padding: 12px 14px;
font-weight: 950;
letter-spacing: .01em;
cursor:pointer;
white-space: nowrap;
box-shadow: 0 18px 50px rgba(0,0,0,.28);
transition: transform .12s ease, filter .12s ease;
}
.memoriesLauncherBtn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.memoriesLauncherBtn:active{ transform: translateY(0); }
@media (max-width: 640px){
.memoriesLauncher{ flex-direction: column; align-items: stretch; }
.memoriesLauncherBtn{ width: 100%; text-align:center; }
}
.memoriesModal{
position: fixed;
inset: 0;
z-index: 9996;
display:none;
align-items:flex-start;
justify-content:center;
padding: max(18px, env(safe-area-inset-top)) 18px 18px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.memoriesModal.show{ display:flex; }
.memoriesBg{
position:absolute;
inset:0;
background:
radial-gradient(900px 520px at 50% 35%, rgba(155,116,255,.20), transparent 60%),
radial-gradient(900px 520px at 15% 85%, rgba(255,205,120,.10), transparent 58%),
linear-gradient(180deg, rgba(10,10,28,.62), rgba(6,8,24,.62));
backdrop-filter: blur(16px) saturate(145%);
}
.memoriesPanel{
position: relative;
width: min(1240px, 96vw);
max-height: calc(100svh - 36px);
border-radius: 28px;
border: 1px solid rgba(255,255,255,.16);
background:
radial-gradient(900px 320px at 18% 0%, rgba(155,116,255,.16), transparent 62%),
radial-gradient(900px 420px at 82% 100%, rgba(255,205,120,.10), transparent 60%),
linear-gradient(162deg, rgba(18,10,44,.92) 0%, rgba(8,44,84,.62) 100%);
box-shadow: 0 54px 160px rgba(0,0,0,.62);
overflow: hidden;
transform: translateZ(0);
}
.memoriesHeader{
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.memoriesKicker{
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 950;
color: rgba(255,255,255,.62);
}
.memoriesTitle{
margin-top: 4px;
font-size: clamp(16px, 1.8vw, 20px);
font-weight: 980;
letter-spacing: .01em;
}
.memoriesClose{
appearance:none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
width: 42px;
height: 42px;
border-radius: 14px;
font-weight: 950;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 12px 28px rgba(0,0,0,.20);
}
.memoriesClose:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.memoriesBody{
padding: 16px 16px 18px;
overflow:auto;
max-height: calc(100svh - 36px - 68px);
}
.memoriesBody::-webkit-scrollbar{ width: 6px; }
.memoriesBody::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }
.memoriesBody .journalCalSection{ margin-top: 0; }
.memoriesBody .journalCalHeader{ margin-bottom: 12px; }
.memoriesPanel{
width: min(760px, 94vw);
}
.memoriesBody{
padding: 14px 14px 16px;
}
.memoriesBody .journalCalSection{ max-width: 540px; margin: 12px auto 0; }
.memoriesBody .journalCalHeader{ margin-bottom: 10px; }
.memoriesBody .journalCalNav{
width: 34px; height: 34px;
font-size: 18px;
}
.memoriesBody .journalCalTitle{
font-size: clamp(15px, 1.55vw, 18px);
letter-spacing: .01em;
}
.memoriesBody .journalCalGrid{ gap: 5px; }
.memoriesBody .calDayHeader{
font-size: 10px;
padding: 5px 0;
opacity: .85;
}
.memoriesBody .calDay{
min-height: 34px;
border-radius: 11px;
font-size: 12px;
gap: 1px;
}
.memoriesBody .calDayDot{ width: 4px; height: 4px; }
.memoriesPreview{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(900px 240px at 18% 0%, rgba(255,205,120,.10), transparent 62%),
radial-gradient(900px 260px at 82% 100%, rgba(155,116,255,.12), transparent 60%),
rgba(255,255,255,.04);
box-shadow: 0 22px 68px rgba(0,0,0,.36);
padding: 14px 14px 14px;
}
.memPreviewTop{
display:flex;
align-items:flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.memPreviewKicker{
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 950;
color: rgba(255,255,255,.62);
}
.memPreviewDate{
margin-top: 4px;
font-size: 15px;
font-weight: 950;
letter-spacing: .01em;
}
.memPreviewClose{
appearance:none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.86);
width: 38px; height: 38px;
border-radius: 14px;
font-weight: 950;
cursor:pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.memPreviewClose:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.memPreviewCardRow{
display:grid;
grid-template-columns: 96px 1fr;
gap: 12px;
align-items:start;
}
@media (max-width: 520px){
.memPreviewCardRow{ grid-template-columns: 78px 1fr; }
}
.memPreviewCard{
width: 96px;
aspect-ratio: 2/3;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.05);
box-shadow: 0 14px 38px rgba(0,0,0,.32);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
color: rgba(255,255,255,.72);
font-size: 28px;
}
.memPreviewCard img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.memPreviewTextWrap{
min-width: 0;
}
.memPreviewText{
white-space: pre-wrap;
font-size: 14px;
line-height: 1.68;
color: rgba(255,255,255,.74);
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.10);
padding: 10px 12px;
max-height: 180px;
overflow:auto;
}
.memPreviewText::-webkit-scrollbar{ width: 6px; }
.memPreviewText::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }
.memPreviewActions{
margin-top: 10px;
display:flex;
justify-content:flex-end;
}
.memPreviewBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.18);
background:
radial-gradient(900px 140px at 20% 20%, rgba(255,255,255,.14), transparent 60%),
linear-gradient(135deg, rgba(255,205,120,.92), rgba(155,116,255,.84), rgba(140,220,255,.62));
color: rgba(18,10,28,.96);
border-radius: 14px;
padding: 10px 12px;
font-weight: 950;
letter-spacing: .01em;
cursor:pointer;
box-shadow: 0 14px 40px rgba(0,0,0,.24);
transition: transform .12s ease, filter .12s ease;
}
.memPreviewBtn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.memPreviewBtn:active{ transform: translateY(0); }
.memoriesGrid{
display:grid;
grid-template-columns: 280px 1fr;
gap: 14px;
align-items: start;
}
@media (max-width: 880px){
.memoriesGrid{ grid-template-columns: 1fr; }
}
.memoriesCalPane{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
box-shadow: 0 18px 56px rgba(0,0,0,.28);
padding: 12px 12px 12px;
}
.memCalKicker{
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 950;
color: rgba(255,255,255,.62);
margin-bottom: 10px;
}
.memoriesCalCompact .journalCalHeader{ margin-bottom: 8px !important; }
.memoriesCalCompact .journalCalNav{
width: 30px; height: 30px;
font-size: 17px;
}
.memoriesCalCompact .journalCalTitle{
font-size: 15px;
letter-spacing: .01em;
}
.memoriesCalCompact .journalCalGrid{ gap: 4px !important; }
.memoriesCalCompact .calDayHeader{
font-size: 9.5px !important;
padding: 4px 0 !important;
opacity: .86;
}
.memoriesCalCompact .calDay{
min-height: 30px !important;
font-size: 12px !important;
border-radius: 10px !important;
gap: 1px !important;
}
.memoriesCalCompact .calDay.hasEntry:hover{ transform: scale(1.04) !important; }
.memoriesCalCompact .calDayDot{ width: 4px !important; height: 4px !important; }
.memoriesDetailPane{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(900px 240px at 18% 0%, rgba(255,205,120,.10), transparent 62%),
radial-gradient(900px 260px at 82% 100%, rgba(155,116,255,.12), transparent 60%),
rgba(255,255,255,.04);
box-shadow: 0 22px 68px rgba(0,0,0,.34);
padding: 14px 14px 14px;
min-height: 260px;
}
.memDetailTop{
display:flex;
align-items:flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.memDetailKicker{
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 950;
color: rgba(255,255,255,.62);
}
.memDetailDate{
margin-top: 4px;
font-size: 15px;
font-weight: 950;
letter-spacing: .01em;
}
.memDetailClear{
appearance:none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.86);
width: 38px; height: 38px;
border-radius: 14px;
font-weight: 950;
cursor:pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.memDetailClear:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.memRealmTabs{
display:flex; gap:8px; flex-wrap:wrap;
padding: 10px 14px 8px 14px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
margin: 10px 0 12px 0;
}
.memRealmTab{
appearance:none; border:1px solid rgba(255,255,255,.14);
background: rgba(20,22,40,.35);
color: rgba(255,255,255,.86);
padding: 8px 11px;
border-radius: 999px;
font-weight: 750;
letter-spacing: .01em;
font-size: 11.5px;
cursor:pointer;
transition: transform .15s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.memRealmTab:hover{ transform: translateY(-1px); border-color: rgba(255,205,120,.35); background: rgba(255,255,255,.06); }
.memRealmTab[aria-selected="true"]{
background: linear-gradient(135deg, rgba(255,205,120,.22), rgba(155,116,255,.16));
border-color: rgba(255,205,120,.55);
color: rgba(255,255,255,.94);
}
.memRealmTab:disabled{
opacity: .35;
cursor: not-allowed;
transform:none;
}
.memDetailBody{
display:grid;
grid-template-columns: 110px 1fr;
gap: 12px;
align-items:stretch;
min-height: 0;
}
@media (max-width: 520px){
.memDetailBody{ grid-template-columns: auto 1fr !important; }
.memDetailCard{
height: 100%;
width: auto;
aspect-ratio: 2 / 3;
min-width: 170px;
max-width: 240px;
border-radius: 16px;
}
}
.memDetailCard img{ width: 100%; height: 100%; object-fit: contain; display:block; }
overflow:auto;
}
.memDetailText::-webkit-scrollbar{ width: 6px; }
.memDetailText::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }

/* === original inline style block 005; id: no-id; original line: 5941 === */
@keyframes ovFadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes ovSlideUp { from { opacity:0; transform:translate(-50%,-44%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
#realmOverwriteModal,
#noReflectionModal {
position: fixed; inset: 0;
display: none;
z-index: 999999;
}
#realmOverwriteModal.show,
#noReflectionModal.show { display: block; }
#realmOverwriteBg,
#noReflectionBg {
position: absolute; inset: 0;
background: rgba(4, 3, 14, .82);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
animation: ovFadeIn .22s ease;
}
.ovCard {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: min(600px, calc(100vw - 32px));
max-height: calc(100svh - 48px);
border-radius: 28px;
border: 1px solid rgba(255,255,255,.18);
background:
radial-gradient(ellipse 160% 80% at 20% -10%, rgba(168,128,255,.28) 0%, transparent 55%),
radial-gradient(ellipse 100% 60% at 80% 110%, rgba(80,160,255,.14) 0%, transparent 55%),
linear-gradient(160deg, rgba(18,10,44,.97) 0%, rgba(8,22,50,.97) 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 1px 0 rgba(255,255,255,.14) inset,
0 40px 100px rgba(0,0,0,.72),
0 8px 32px rgba(0,0,0,.50);
overflow: hidden;
display: flex;
flex-direction: column;
animation: ovSlideUp .28s cubic-bezier(.22,.68,0,1.2);
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.ovTop {
padding: 24px 24px 16px 24px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.ovKicker {
font-size: 11px;
font-weight: 700;
letter-spacing: .20em;
text-transform: uppercase;
color: rgba(168,128,255,.90);
}
.ovTitle {
margin-top: 8px;
font-size: 22px;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.2;
color: rgba(255,255,255,.97);
}
.ovClose {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.60);
font-size: 14px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, border-color .15s;
}
.ovClose:hover {
background: rgba(255,255,255,.13);
color: rgba(255,255,255,.90);
border-color: rgba(255,255,255,.26);
}
.ovBody {
padding: 0 24px 20px 24px;
color: rgba(255,255,255,.74);
flex: 1;
overflow-y: auto;
}
.ovPoem {
padding: 18px 20px 16px 20px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255,255,255,.06), transparent 65%),
rgba(255,255,255,.04);
}
.ovLine {
margin: 0 0 10px 0;
font-size: 15px;
line-height: 1.58;
color: rgba(255,255,255,.86);
}
.ovLine:last-child { margin-bottom: 0; }
.ovEm {
font-weight: 800;
color: rgba(255,214,120,.97);
}
.ovRealm {
font-weight: 800;
letter-spacing: -.01em;
background: linear-gradient(95deg, rgba(255,210,120,.97) 0%, rgba(200,170,255,.97) 60%, rgba(140,218,255,.90) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ovExcerpt {
margin-top: 14px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.09);
background: rgba(0,0,0,.28);
}
.ovExcerptLabel {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .20em;
text-transform: uppercase;
color: rgba(255,255,255,.47);
margin-bottom: 8px;
}
.ovExcerptText {
font-size: 14px;
line-height: 1.52;
color: rgba(255,255,255,.70);
max-height: 6em;
overflow-y: auto;
padding-right: 4px;
font-style: italic;
}
.ovActions {
padding: 16px 24px 22px 24px;
display: flex;
gap: 12px;
justify-content: flex-end;
flex-shrink: 0;
border-top: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg,
rgba(8,6,22,.0) 0%,
rgba(8,6,22,.60) 100%);
}
.ovBtn {
all: unset;
box-sizing: border-box;
padding: 13px 22px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.86);
font-family: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: -.01em;
cursor: pointer;
min-width: 130px;
text-align: center;
transition: background .16s, border-color .16s, transform .12s;
-webkit-tap-highlight-color: transparent;
}
.ovBtn:hover {
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.28);
transform: translateY(-1px);
}
.ovBtn:active { transform: translateY(0); }
.ovBtnPrimary {
border-color: rgba(168,128,255,.55);
background: linear-gradient(135deg,
rgba(168,128,255,.34) 0%,
rgba(80,140,255,.22) 100%);
color: rgba(255,255,255,.97);
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 8px 28px rgba(100,60,220,.30);
}
.ovBtnPrimary:hover {
background: linear-gradient(135deg,
rgba(168,128,255,.46) 0%,
rgba(80,140,255,.32) 100%);
border-color: rgba(168,128,255,.75);
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 10px 34px rgba(100,60,220,.40);
}
.ovBtnDanger {
border-color: rgba(255,180,100,.40);
background: linear-gradient(135deg,
rgba(255,160,80,.22) 0%,
rgba(220,80,120,.16) 100%);
color: rgba(255,220,180,.96);
box-shadow: 0 8px 28px rgba(200,80,40,.18);
}
.ovBtnDanger:hover {
background: linear-gradient(135deg,
rgba(255,160,80,.32) 0%,
rgba(220,80,120,.24) 100%);
border-color: rgba(255,180,100,.65);
}
@media (max-width: 520px) {
.ovCard { border-radius: 22px; }
.ovTop  { padding: 20px 18px 14px 18px; }
.ovBody { padding: 0 18px 18px 18px; }
.ovActions {
padding: 14px 18px 20px 18px;
flex-direction: column-reverse;
gap: 10px;
}
.ovBtn { width: 100%; min-width: 0; padding: 15px 18px; }
.ovTitle { font-size: 19px; }
}

/* === original inline style block 006; id: innermuse-archive-card-v152; original line: 6160 === */
#memoriesModal .memDetailBody{
grid-template-columns: auto 1fr !important;
gap: 20px !important;
align-items: start !important;
}
#memoriesModal .memDetailCard{
width: clamp(160px, 22vw, 260px) !important;
height: auto !important;
padding: 0 !important;
border-radius: 16px !important;
overflow: hidden !important;
background: transparent !important;
display:flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
flex-shrink: 0 !important;
}
#memoriesModal .memDetailCard img{
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
border-radius: 16px !important;
box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
}
body[data-has-card="0"] .ritualMain .stage,
body[data-has-card="0"] .ritualMain .oracle{
min-height: clamp(160px, 21vh, 260px) !important;
}
body[data-has-card="0"] .ritualMain .oracle{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
body[data-has-card="0"] .ritualMain .oracle:not(.isScrollable){
overflow:hidden !important;
height:auto !important;
max-height:none !important;
}
body[data-has-card="1"] .ritualMain .stage{
min-height: auto !important;
height: auto !important;
}
body[data-has-card="1"] .ritualMain .oracle{
min-height: auto !important;
}
.authModal, .paywallModal {
position: fixed; inset: 0; z-index: 100001;
display: none; align-items: center; justify-content: center;
padding: 18px;
}
.authModal.show, .paywallModal.show { display: flex; }
.authBg, .paywallBg {
position: absolute; inset: 0;
background: radial-gradient(900px 520px at 50% 35%, rgba(155,116,255,.22), transparent 60%), rgba(0,0,0,.65);
backdrop-filter: blur(16px) saturate(140%);
}
.authCard, .paywallCard {
position: relative;
width: min(480px, 94vw);
border-radius: 28px;
border: 1px solid rgba(255,255,255,.16);
background:
radial-gradient(900px 320px at 18% 0%, rgba(155,116,255,.18), transparent 62%),
radial-gradient(900px 420px at 82% 100%, rgba(255,205,120,.10), transparent 60%),
linear-gradient(162deg, rgba(18,10,44,.96) 0%, rgba(8,44,84,.72) 100%);
box-shadow: 0 48px 140px rgba(0,0,0,.60);
padding: 0;
overflow: hidden;
transform: translateZ(0);
}
.authCardTop, .paywallCardTop {
padding: 22px 22px 0;
display: flex; align-items: flex-start; justify-content: space-between;
}
.authCardBody { padding: 10px 22px 22px; }
.paywallCardBody { padding: 10px 22px 22px; }
.authKicker {
font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
font-weight: 950; color: rgba(255,255,255,.60); margin-bottom: 6px;
}
.authTitle {
font-size: clamp(20px, 2.4vw, 26px); font-weight: 950; letter-spacing: -.01em;
background: linear-gradient(135deg, rgba(255,205,120,.96), rgba(155,116,255,.90));
-webkit-background-clip: text; background-clip: text; color: transparent;
margin: 0 0 4px;
}
.authSub {
font-size: 14px; color: rgba(255,255,255,.68); line-height: 1.55; margin: 0 0 16px;
}
.authAgeNote {
font-size: 12px; color: rgba(255,205,120,.75); font-style: italic; margin: 0 0 14px;
}
.authConsentRow {
display: none; align-items: flex-start; gap: 11px; margin: 2px 0 16px;
color: rgba(255,255,255,.80); font-size: 13px; line-height: 1.55; cursor: pointer;
}
.authConsentRow a {
color: rgba(205,181,255,.98); font-weight: 800; text-underline-offset: 2px;
}
.authConsentCheckbox {
appearance: none; -webkit-appearance: none; flex: 0 0 auto;
width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px;
border: 1.5px solid rgba(255,255,255,.42); background: rgba(255,255,255,.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08); cursor: pointer; position: relative;
}
.authConsentCheckbox:checked {
background: linear-gradient(135deg, rgba(255,205,120,.94), rgba(155,116,255,.92));
border-color: rgba(255,225,160,.72);
}
.authConsentCheckbox:checked::after {
content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
color: #24183a; font-size: 14px; font-weight: 950; line-height: 1;
}
.authConsentCheckbox:focus-visible {
outline: 3px solid rgba(180,150,255,.28); outline-offset: 2px;
}
.authClose {
appearance: none; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
color: rgba(255,255,255,.74); width: 40px; height: 40px; border-radius: 14px;
font-weight: 950; cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: 0 12px 28px rgba(0,0,0,.20);
}
.authClose:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.authTabs {
display: flex; gap: 4px; margin-bottom: 16px;
background: rgba(255,255,255,.06); border-radius: 14px; padding: 4px;
}
.authTab {
flex: 1; appearance: none; border: none; border-radius: 10px; padding: 9px 12px;
font-size: 14px; font-weight: 860; cursor: pointer; transition: background .15s, color .15s;
background: transparent; color: rgba(255,255,255,.60);
}
.authTab.active {
background: linear-gradient(135deg, rgba(255,205,120,.24), rgba(155,116,255,.18));
color: rgba(255,255,255,.94);
box-shadow: 0 8px 22px rgba(0,0,0,.20);
}
.authField {
margin-bottom: 12px;
}
.authLabel {
display: block; font-size: 12px; font-weight: 860; letter-spacing: .06em; text-transform: uppercase;
color: rgba(255,255,255,.64); margin-bottom: 5px;
}
.authInput {
width: 100%; box-sizing: border-box; border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.14); background: rgba(8,4,22,.72);
color: rgba(255,255,255,.92); font-size: 15px; font-family: inherit;
padding: 12px 14px; outline: none; transition: border-color .15s;
}
.authInput:focus { border-color: rgba(155,116,255,.55); box-shadow: 0 0 0 3px rgba(155,116,255,.10); }
.authInput::placeholder { color: rgba(255,255,255,.30); font-style: italic; }
.authSubmitBtn {
width: 100%; border: 1px solid rgba(255,205,120,.32);
background: linear-gradient(135deg, rgba(255,205,120,.86), rgba(155,116,255,.72));
color: rgba(16,8,32,.96); font-size: 16px; font-weight: 950; font-family: inherit;
border-radius: 16px; padding: 14px 18px; cursor: pointer; margin-top: 6px;
box-shadow: 0 18px 50px rgba(0,0,0,.28); letter-spacing: .01em;
transition: transform .14s ease, filter .14s ease;
}
.authSubmitBtn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.authSubmitBtn:active { transform: translateY(0); }
.authError {
font-size: 13px; color: rgba(255,120,120,.90); margin: 6px 0 0; text-align: center; min-height: 18px;
}
.authSuccess {
font-size: 13px; color: rgba(160,255,160,.85); margin: 6px 0 0; text-align: center; min-height: 18px;
}
.authForgotLink {
appearance: none; border: none; background: transparent; color: rgba(155,116,255,.85);
font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: underline;
text-underline-offset: 2px; padding: 2px 0; display: block; width: fit-content;
margin: 4px auto 0;
}
.authForgotLink:hover { color: rgba(255,205,120,.90); }
.authDivider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 14px 0; }
.authLoggedIn {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px; border-radius: 16px;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
margin-bottom: 12px;
}
.authUserEmail { font-size: 14px; color: rgba(255,255,255,.80); }
.authSignOutBtn {
appearance: none; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
color: rgba(255,255,255,.80); font-size: 12px; font-weight: 860; border-radius: 10px;
padding: 6px 10px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.authSignOutBtn:hover { background: rgba(255,255,255,.11); }
.paywallTitle {
font-size: clamp(20px, 2.4vw, 26px); font-weight: 950; letter-spacing: -.01em;
background: linear-gradient(135deg, rgba(255,205,120,.96), rgba(155,116,255,.90));
-webkit-background-clip: text; background-clip: text; color: transparent;
margin: 0 0 8px;
}
.paywallSub { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.65; margin: 0 0 18px; }
.paywallFeatures { margin: 0 0 18px; padding: 0; list-style: none; }
.paywallFeature { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 14px; color: rgba(255,255,255,.86); line-height: 1.55; }
.paywallFeatureIcon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.paywallPrice { text-align: center; margin-bottom: 18px; }
.paywallPriceTag { font-size: 38px; font-weight: 950; background: linear-gradient(135deg, rgba(255,205,120,.98), rgba(155,116,255,.90)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paywallPriceSub { font-size: 13px; color: rgba(255,255,255,.54); margin-top: 2px; }
.paywallContinueBtn {
width: 100%; border: 1px solid rgba(255,205,120,.32);
background: linear-gradient(135deg, rgba(255,205,120,.86), rgba(155,116,255,.72));
color: rgba(16,8,32,.96); font-size: 16px; font-weight: 950; font-family: inherit;
border-radius: 16px; padding: 14px 18px; cursor: pointer;
box-shadow: 0 18px 50px rgba(0,0,0,.28); letter-spacing: .01em;
transition: transform .14s ease, filter .14s ease;
}
.paywallContinueBtn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.authUserBadge{
position: fixed;
top: 18px;
right: 18px;
z-index: 9992;
width: 40px;
height: 40px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(14,13,32,.34);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
box-shadow: 0 14px 36px rgba(0,0,0,.34);
color: rgba(255,255,255,.92);
cursor: pointer;
letter-spacing: .01em;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: visible;
transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.authUserBadge:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.24);
}
.authUserBadge:active{ transform: translateY(0); }
.authUserBadge:focus-visible{
outline: 3px solid rgba(255,205,120,.35);
outline-offset: 4px;
}
.authUserBadge .imAvatar{
width: 30px;
height: 30px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
font-size: 12px;
font-weight: 950;
letter-spacing: .08em;
color: rgba(18,10,28,.96);
background: linear-gradient(135deg,#f1e8d8e8,#bda7e8d9,#bad6e6cc);
box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.authUserBadge .imAvatar{ position: relative; }
.authUserBadge .imAvatar .imUserIcon{
width: 18px;
height: 18px;
display:block;
opacity: .82;
}
.authUserBadge .imAvatar .imInitial{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
opacity: 0;
transition: opacity .12s ease;
}
.authUserBadge.isLoggedIn .imAvatar .imUserIcon{ opacity: 0; }
.authUserBadge.isLoggedIn .imAvatar .imInitial{ opacity: 1; }
.authUserBadge .imBadgeLabel{
position: absolute;
right: 48px;
top: 50%;
transform: translateY(-50%) translateX(6px);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,8,24,.55);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 16px 44px rgba(0,0,0,.40);
color: rgba(255,255,255,.82);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .12em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .12s ease, transform .12s ease;
}
.authUserBadge:hover .imBadgeLabel,
.authUserBadge:focus-visible .imBadgeLabel{
opacity: 1;
transform: translateY(-50%) translateX(0px);
}
@media (max-width: 560px){
.authUserBadge{ top: 12px; right: 12px; width: 38px; height: 38px; }
.authUserBadge .imBadgeLabel{ display:none; }
}
.profileModal{
position: fixed; inset: 0; z-index: 99995;
display:none; align-items: center; justify-content: center;
padding: 18px;
}
.profileModal.show{ display:flex; }
.profileBg{
position:absolute; inset:0;
background:
radial-gradient(900px 520px at 50% 35%, rgba(155,116,255,.20), transparent 60%),
rgba(0,0,0,.68);
backdrop-filter: blur(16px) saturate(145%);
-webkit-backdrop-filter: blur(16px) saturate(145%);
}
.profileCard{
position: relative;
width: min(980px, 96vw);
max-height: calc(100svh - 36px);
border-radius: 30px;
border: 1px solid rgba(255,255,255,.16);
background:
radial-gradient(900px 320px at 18% 0%, rgba(255,205,120,.10), transparent 62%),
radial-gradient(900px 420px at 82% 100%, rgba(155,116,255,.14), transparent 60%),
linear-gradient(162deg, rgba(18,10,44,.94) 0%, rgba(8,44,84,.66) 100%);
box-shadow: 0 54px 160px rgba(0,0,0,.62);
overflow:hidden;
transform: translateZ(0);
}
.profileTop{
display:flex; align-items:center; justify-content:space-between; gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.profileBrand{
display:flex; align-items:center; gap: 10px;
}
.profileBrand .pAvatar{
width: 34px; height: 34px;
border-radius: 999px;
display:flex; align-items:center; justify-content:center;
font-size: 12px; font-weight: 950; letter-spacing:.08em;
color: rgba(18,10,28,.96);
background: linear-gradient(135deg, rgba(255,205,120,.95), rgba(155,116,255,.86), rgba(140,220,255,.70));
box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.profileBrand .pTitleWrap{ display:flex; flex-direction:column; gap: 2px; }
.profileBrand .pKicker{
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 950;
color: rgba(255,255,255,.62);
}
.profileBrand .pTitle{
font-size: 18px;
font-weight: 950;
letter-spacing: -.01em;
}
.profileClose{
appearance:none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.90);
width: 42px; height: 42px;
border-radius: 14px;
font-weight: 950;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.profileClose:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.profileBody{
display:grid;
grid-template-columns: 280px 1fr;
gap: 14px;
padding: 14px;
max-height: calc(100svh - 36px - 66px);
overflow: hidden;
}
@media (max-width: 900px){
.profileBody{ grid-template-columns: 1fr; overflow: auto; }
}
.profileNav{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
box-shadow: 0 18px 56px rgba(0,0,0,.28);
padding: 12px;
}
.profileNavTop{
padding: 10px 10px 12px;
border-bottom: 1px solid rgba(255,255,255,.10);
margin-bottom: 10px;
}
.profileEmail{
font-size: 14px;
color: rgba(255,255,255,.84);
word-break: break-word;
}
.profileMini{
margin-top: 6px;
font-size: 12px;
color: rgba(255,255,255,.54);
line-height: 1.45;
}
.pillRow{
display:flex; gap: 10px; flex-wrap: wrap;
margin-top: 10px;
}
.pillBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.90);
border-radius: 999px;
padding: 10px 12px;
font-weight: 900;
letter-spacing: .01em;
cursor:pointer;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pillBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.pillBtnPrimary{
background: linear-gradient(135deg, rgba(255,205,120,.30), rgba(155,116,255,.20));
border-color: rgba(255,205,120,.55);
}
.profileNavList{
display:flex; flex-direction:column; gap: 8px;
margin-top: 10px;
}
.profileNavItem{
appearance:none;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.90);
border-radius: 16px;
padding: 12px 12px;
text-align:left;
cursor:pointer;
font-weight: 900;
display:flex; align-items:center; justify-content:space-between; gap: 10px;
transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.profileNavItem:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.profileNavItem[aria-selected="true"]{
background: linear-gradient(135deg, rgba(255,205,120,.22), rgba(155,116,255,.16));
border-color: rgba(255,205,120,.55);
}
.profileNavItem .hint{
all: unset;
font-size: 12px;
font-weight: 900;
opacity: .72;
}
.profileMain{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(900px 240px at 18% 0%, rgba(255,205,120,.09), transparent 62%),
radial-gradient(900px 260px at 82% 100%, rgba(155,116,255,.12), transparent 60%),
rgba(255,255,255,.04);
box-shadow: 0 22px 68px rgba(0,0,0,.34);
padding: 14px 14px 16px;
overflow: auto;
max-height: 100%;
}
.profileMain::-webkit-scrollbar{ width: 6px; }
.profileMain::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }
.pSectionKicker{
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 950;
color: rgba(255,255,255,.62);
margin-bottom: 6px;
}
.pSectionTitle{
font-size: 22px;
font-weight: 980;
letter-spacing: -.01em;
margin: 0 0 10px;
}
.pCard{
border-radius: 16px;
border: 1px solid rgba(255,255,255,.09);
background: rgba(255,255,255,.04);
padding: 14px 16px;
margin-bottom: 8px;
}
.pRow{
display:flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.pLabel{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity:.64; font-weight: 950; }
.pValue{ font-size: 15px; font-weight: 900; opacity:.92; }
.lockActions{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:12px;
}
.pRow.pLockRow{
display:block;
}
.pLockMeta{
width: 100%;
}
.pLockLine{
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
}
.pCard .lockActionsInline{
margin-top: 0;
display:flex;
align-items:center;
justify-content:flex-end;
gap: 12px;
flex-wrap: nowrap;
}
.pCard .lockActionsInline .btn{
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 14px !important;
font-size: 14.5px !important;
font-weight: 820 !important;
border-radius: 999px !important;
box-shadow: 0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
@media (max-width: 520px){
.pLockLine{
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
}
.pCard .lockActionsInline{
width: 100%;
justify-content: stretch;
flex-direction: column;
gap: 10px;
}
.pCard .lockActionsInline .btn{
width: 100% !important;
justify-content: center !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 14px !important;
font-size: 15px !important;
}
}
.lockActions .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
flex: 1 1 240px;
max-width: 340px;
min-height: 44px;
padding: 11px 18px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.lockActions .btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.20);
}
.lockActions .btn:active{
transform: translateY(0) scale(.99);
}
.btnDanger{
position: relative;
border-color: rgba(255,59,48,.26) !important;
background: rgba(255,59,48,.085) !important;
color: rgba(255,196,196,.96) !important;
box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
backdrop-filter: blur(10px) saturate(140%) !important;
}
.btnDanger::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
opacity:.65;
pointer-events:none;
}
.btnDanger:hover{
background: rgba(255,59,48,.12) !important;
border-color: rgba(255,59,48,.34) !important;
filter:none !important;
}
.btnDanger:active{
background: rgba(255,59,48,.15) !important;
}
.btnDanger:focus-visible{
outline:none;
box-shadow: 0 0 0 3px rgba(255,59,48,.20), 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
@media (max-width: 520px){
.lockActions{ flex-direction:column; align-items:stretch; }
.lockActions .btn{ width: 100%; max-width: 100%; }
}
.pInput{
width: 100%;
box-sizing: border-box;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.14);
background: rgba(8,4,22,.72);
color: rgba(255,255,255,.92);
font-size: 15px;
font-family: inherit;
padding: 12px 14px;
outline: none;
transition: border-color .15s;
}
.pInput:focus{ border-color: rgba(155,116,255,.55); box-shadow: 0 0 0 3px rgba(155,116,255,.10); }
.pBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.92);
border-radius: 16px;
padding: 12px 14px;
font-weight: 950;
cursor:pointer;
box-shadow: 0 16px 44px rgba(0,0,0,.26);
transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.pBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.pBtnPrimary{
background: linear-gradient(135deg, rgba(255,205,120,.86), rgba(155,116,255,.72));
color: rgba(16,8,32,.96);
border-color: rgba(255,205,120,.32);
}
.pBtnPrimary:hover{ filter: brightness(1.05); }
.pBillingDocumentBtn,
.pBillingDocumentBtn:link,
.pBillingDocumentBtn:visited{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:7px 13px;
border-radius:999px;
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.14);
color:rgba(245,242,255,.90);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
font-size:12px;
font-weight:850;
line-height:1;
text-decoration:none;
text-underline-offset:0;
}
.pBillingDocumentBtn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.085);
border-color:rgba(255,255,255,.22);
color:rgba(255,255,255,.96);
text-decoration:none;
}
.pBillingDocumentBtn:focus-visible{
outline:2px solid rgba(196,179,255,.48);
outline-offset:2px;
text-decoration:none;
}
.pNotice{
font-size: 13px;
color: rgba(255,255,255,.70);
line-height: 1.55;
}
.pFine{
font-size: 12px;
color: rgba(255,255,255,.52);
line-height: 1.5;
}
.pErr{ color: rgba(255,120,120,.90); font-weight: 850; }
.pOk{ color: rgba(160,255,160,.85); font-weight: 850; }
.pTable{
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
}
.pTable th, .pTable td{
padding: 11px 10px;
border-bottom: 1px solid rgba(255,255,255,.08);
font-size: 13px;
color: rgba(255,255,255,.86);
}
.pTable th{
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .70;
text-align:left;
}
.pTable tr:last-child td{ border-bottom: none; }
.pTable th:last-child, .pTable td:last-child{ white-space: nowrap; }
.pTable td.muted{ color: rgba(255,255,255,.58); }
.profileFooterLink{
margin-top: 10px;
display:flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.profileFooterLink a{
color: rgba(155,116,255,.90);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 900;
}
.profileFooterLink a:hover{ color: rgba(255,205,120,.92); }

/* === original inline style block 007; id: innermuse-v161-pill-system; original line: 6900 === */
:root{
--im-pill-bg: rgba(10,8,24,.24);
--im-pill-br: rgba(255,255,255,.14);
--im-pill-ink: rgba(255,255,255,.72);
--im-pill-blur: blur(10px) saturate(140%);
}
.oracle{
position: relative;
}
.oracle.hasOracle{
padding-top: 56px !important;
}
.oracle::before{
z-index: 3;
top: 14px;
left: 16px;
white-space: nowrap;
background: var(--im-pill-bg) !important;
border-color: var(--im-pill-br) !important;
color: var(--im-pill-ink) !important;
backdrop-filter: var(--im-pill-blur) !important;
-webkit-backdrop-filter: var(--im-pill-blur) !important;
}
.oracle > *{
position: relative;
z-index: 2;
}
.oracleTitle{ margin-top: 6px !important; }
.oracleDesc{ margin-top: 0 !important; }
.stage::before{
background: var(--im-pill-bg) !important;
border-color: var(--im-pill-br) !important;
color: var(--im-pill-ink) !important;
backdrop-filter: var(--im-pill-blur) !important;
-webkit-backdrop-filter: var(--im-pill-blur) !important;
}
.hintPill,
.todayRitualPill,
.metaPill,
.memoriesLauncherKicker,
.memCalKicker,
.memPreviewKicker,
.memDetailKicker,
.chapterKicker,
.tierLabel,
.realmNudgeLabel,
.ritualStepLabel{
background: var(--im-pill-bg) !important;
border: 1px solid var(--im-pill-br) !important;
color: var(--im-pill-ink) !important;
border-radius: 999px !important;
padding: 6px 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
backdrop-filter: var(--im-pill-blur) !important;
-webkit-backdrop-filter: var(--im-pill-blur) !important;
}
.memoriesLauncherKicker,
.memCalKicker,
.memPreviewKicker,
.memDetailKicker,
.chapterKicker,
.tierLabel,
.realmNudgeLabel,
.ritualStepLabel{
width: fit-content;
letter-spacing: .16em !important;
text-transform: uppercase !important;
font-weight: 900 !important;
font-size: 11px !important;
opacity: 1 !important;
margin: 0 0 10px 0;
}
.oraclePremium .imOracleBtn,
.memRealmTab,
.chapterBtn,
.sharePill,
.authTab{
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}
.oraclePremium .imOracleBtn:hover,
.memRealmTab:hover,
.chapterBtn:hover,
.sharePill:hover{
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.26) !important;
}
.metaRow{ margin-top: 12px !important; }
@media (max-width: 980px){
.oracle.hasOracle{ padding-top: 54px !important; }
}

/* === original inline style block 008; id: no-id; original line: 6996 === */
:root{
--im-gutter: 22px;
--im-gutter-sm: 16px;
--im-max-page: 1440px;
--im-max-header: 980px;
--im-max-shell: 1200px;
}
.header{
max-width: var(--im-max-header) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.shell{
max-width: var(--im-max-shell) !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 734px){
}
@media (min-width: 1600px){
:root{ --im-gutter: 28px; }
}
:root {
--ap-max:          980px;
--ap-pad:          max(22px, calc((100vw - var(--ap-max)) / 2));
--ap-pad-mobile:   16px;
}
.page {
max-width: none !important;
padding-left:  0 !important;
padding-right: 0 !important;
padding-top:    28px !important;
padding-bottom: 72px !important;
width: 100% !important;
}
.page > .header {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
padding-left:  32px !important;
padding-right: 32px !important;
width: auto !important;
box-sizing: border-box !important;
}
.page > .cursorWidget {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.page > .ritualStrip {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.page > .ritualDivider {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
}
.page > .ritualMain,
.ritualMain {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.page > .chapter,
.page > section.chapter,
.page > #actionsChapter,
.page > #tieredChapter {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.page > .journalSection,
.journalSection {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
padding-left:  40px !important;
padding-right: 40px !important;
box-sizing: border-box !important;
}
.page > .err {
max-width: var(--ap-max) !important;
margin-left:  auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
@media (max-width: 735px) {
.page {
padding-top:    16px !important;
padding-bottom: 44px !important;
}
.page > .header {
margin-left:  var(--ap-pad-mobile) !important;
margin-right: var(--ap-pad-mobile) !important;
max-width: none !important;
padding-left:  16px !important;
padding-right: 16px !important;
}
.page > .cursorWidget,
.page > .ritualStrip,
.page > .ritualDivider,
.page > .ritualMain,
.page > .chapter,
.page > section.chapter,
.page > #actionsChapter,
.page > #tieredChapter,
.page > .err {
max-width: none !important;
margin-left:  var(--ap-pad-mobile) !important;
margin-right: var(--ap-pad-mobile) !important;
}
.page > .journalSection,
.journalSection {
max-width: none !important;
margin-left:  var(--ap-pad-mobile) !important;
margin-right: var(--ap-pad-mobile) !important;
padding-left:  18px !important;
padding-right: 18px !important;
}
}
@media (min-width: 736px) and (max-width: 1024px) {
.page > .header {
margin-left:  max(16px, calc((100vw - var(--ap-max)) / 2)) !important;
margin-right: max(16px, calc((100vw - var(--ap-max)) / 2)) !important;
max-width: none !important;
}
}

/* === original inline style block 009; id: hint-panel-fix-v3; original line: 7131 === */
.ritualMain .stage,
.ritualMain .oracle {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: stretch !important;
}
body[data-has-card="0"] .ritualMain .stage,
body[data-has-card="0"] .ritualMain .oracle {
min-height: clamp(160px, 21vh, 260px) !important;
}
.ritualMain .stage .hint.premiumHint.oracleHint,
.ritualMain .oracle .hint.premiumHint.oracleHint {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 32px 28px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.18) !important;
background:
radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.12), transparent 70%),
linear-gradient(135deg, rgba(18,12,36,.72), rgba(10,44,72,.42)) !important;
backdrop-filter: blur(14px) saturate(135%) !important;
-webkit-backdrop-filter: blur(14px) saturate(135%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 10px 40px rgba(0,0,0,.28) !important;
margin: 0 !important;
}
.ritualMain .stage .hintTitle,
.ritualMain .oracle .hintTitle {
font-size: clamp(24px, 2.5vw, 34px) !important;
font-weight: 950 !important;
letter-spacing: -.01em !important;
margin: 0 0 12px !important;
background: var(--title-grad) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow: none !important;
}
.ritualMain .stage .hintSub,
.ritualMain .oracle .hintSub {
font-size: clamp(15px, 1.25vw, 18px) !important;
line-height: 1.65 !important;
color: rgba(255,255,255,.86) !important;
margin: 0 !important;
}
.ritualMain .stage .hintSub strong,
.ritualMain .oracle .hintSub strong {
font-weight: 950 !important;
color: rgba(255,255,255,.94) !important;
}
.ritualMain .oracle {
padding: 64px 16px 16px !important;
}
.ritualMain .oracle.hasOracle{
padding-top: 72px !important;
}
.ritualMain .stage {
padding: 64px 16px 16px !important;
}
.ritualMain .stage::before,
.ritualMain .oracle::before{
top: 16px !important;
}
@media (max-width: 980px){
.ritualMain .stage,
.ritualMain .oracle{
min-height: clamp(180px, 23vh, 240px) !important;
height: auto !important;
padding: 56px 14px 14px !important;
}
.ritualMain .oracle.hasOracle{
padding-top: 64px !important;
}
.ritualMain .stage .hint.premiumHint.oracleHint,
.ritualMain .oracle .hint.premiumHint.oracleHint{
flex: 1 1 auto !important;
min-height: clamp(126px, 16vh, 170px) !important;
padding: 26px 20px !important;
}
}

/* === original inline style block 010; id: im-panel-equalize-v1; original line: 7223 === */
@media (min-width: 981px){
body[data-has-card="0"] .content{
grid-template-columns: 1fr 1fr !important;
align-items: stretch !important;
}
body[data-has-card="0"] .stage,
body[data-has-card="0"] .oracle{
min-height: clamp(160px, 21vh, 260px) !important;
height: 100% !important;
}
body[data-has-card="0"] .stage{
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
body[data-has-card="0"] .oracle{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
}

/* === original inline style block 011; id: ritualMain-half-half; original line: 7246 === */
@media (min-width: 981px){
body[data-has-card="0"] .ritualMain,
body[data-has-card="1"] .ritualMain{
grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
}
body[data-has-card="0"] .content,
body[data-has-card="1"] .content{
grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
}
}
@media (max-width: 980px) {
body[data-has-card="0"] .ritualMain,
body[data-has-card="1"] .ritualMain{
grid-template-columns: 1fr !important;
}
body[data-has-card="0"] .content,
body[data-has-card="1"] .content{
grid-template-columns: 1fr !important;
}
}

/* === original inline style block 012; id: im-panel-half-height-safeguard; original line: 7268 === */
@media (min-width: 981px){
.ritualMain .stage,
.ritualMain .oracle{
min-height: clamp(160px, 21vh, 260px) !important;
}
}

/* === original inline style block 013; id: im-v165-ritual-strip-polish; original line: 7276 === */
:root{
--imCtlH: 46px;
--imCtlR: 16px;
--imCtlShadow: 0 14px 34px rgba(0,0,0,.22);
}
.ritualPanelTop{
border-bottom: none !important;
background: transparent !important;
padding: 24px 24px 10px !important;
}
.ritualPanelBody{
padding: 10px 24px 24px !important;
}
.ritualPanelTitle{ line-height: 1.18 !important; }
.ritualPanelSub{
line-height: 1.45 !important;
margin-top: 3px !important;
color: rgba(255,255,255,.52) !important;
}
.ritualStrip{ gap: 16px !important; margin-top: 30px !important; }
#panelRevealBody{ display:none !important; }
#zodiacPill,
.cursorSelectLux,
#pickBtn,
.journalScrollBtn{
min-height: var(--imCtlH) !important;
height: var(--imCtlH) !important;
border-radius: var(--imCtlR) !important;
box-shadow: var(--imCtlShadow) !important;
}
#zodiacPill{
padding: 0 14px !important;
font-size: 15px !important;
letter-spacing: .01em !important;
white-space: nowrap !important;
}
.cursorSelectLux{
padding-top: 0 !important;
padding-bottom: 0 !important;
display:flex !important;
align-items:center !important;
}
#pickBtn{
padding: 0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.journalScrollBtn{
padding: 0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
white-space: nowrap !important;
}
.realmGrid.realmSegmented{
display:grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
padding: 4px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.05) !important;
box-shadow: var(--imCtlShadow) !important;
overflow: hidden !important;
}
.realmGrid.realmSegmented .realmChip{
all: unset !important;
box-sizing: border-box !important;
min-height: var(--imCtlH) !important;
height: var(--imCtlH) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap: 8px !important;
font-family: inherit !important;
font-weight: 850 !important;
font-size: 14px !important;
letter-spacing: .01em !important;
color: rgba(255,255,255,.88) !important;
background: transparent !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
transition: background .14s ease, transform .14s ease, opacity .14s ease !important;
}
.realmGrid.realmSegmented .realmChip:nth-child(n+3){
border-top: 1px solid rgba(255,255,255,.10) !important;
}
.realmGrid.realmSegmented .realmChip:nth-child(2),
.realmGrid.realmSegmented .realmChip:nth-child(4){
border-left: 1px solid rgba(255,255,255,.10) !important;
}
.realmGrid.realmSegmented .realmEmoji{ font-size: 16px !important; line-height: 1 !important; }
.realmGrid.realmSegmented .realmLabel{
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1 !important;
}
.realmGrid.realmSegmented .realmChip:hover{
background: rgba(255,255,255,.07) !important;
transform: translateY(-1px) !important;
}
.realmGrid.realmSegmented .realmChip[aria-pressed="true"]{
background: linear-gradient(135deg, rgba(255,205,120,.22), rgba(155,116,255,.18)) !important;
color: rgba(255,255,255,.96) !important;
}
@media (max-width: 520px){
.ritualPanelTop{ padding: 22px 20px 10px !important; }
.ritualPanelBody{ padding: 10px 20px 20px !important; }
.realmGrid.realmSegmented{ padding: 4px !important; }
.realmGrid.realmSegmented .realmLabel{ font-size: 13px !important; }
}

/* === original inline style block 014; id: im-v167-apple-restraint; original line: 7390 === */
:root{
--imCtlShadow: 0 10px 22px rgba(0,0,0,.18);
--im-pill-br: rgba(255,255,255,.06);
--im-pill-bg: rgba(255,255,255,.035);
}
.ritualStrip{ position: relative; padding: 10px; border-radius: 34px; }
.ritualStrip::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
background: rgba(6,8,22,.24);
backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);
border: 1px solid rgba(255,255,255,.04);
box-shadow: 0 16px 44px rgba(0,0,0,.16);
pointer-events:none;
}
.ritualStrip > .ritualPanel{ position: relative; z-index: 1; }
.ritualPanel{
border: 1px solid rgba(255,255,255,.06) !important;
box-shadow:
0 16px 44px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.07) !important;
backdrop-filter: blur(22px) saturate(145%) !important;
}
.ritualPanel:hover{
transform: none !important;
border-color: rgba(255,255,255,.12) !important;
box-shadow:
0 22px 56px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.ritualPanel.stepDone{
border-color: rgba(255,205,120,.26) !important;
box-shadow:
0 16px 44px rgba(0,0,0,.24),
0 0 0 1px rgba(255,205,120,.10),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.ritualPanelTop{
border-bottom: 0 !important;
background: transparent !important;
padding-bottom: 12px !important;
}
.btn{
min-height: var(--imCtlH) !important;
height: var(--imCtlH) !important;
border-radius: 18px !important;
box-shadow: var(--imCtlShadow) !important;
border-color: rgba(255,255,255,.12) !important;
}
.btnPrimary{
background: linear-gradient(135deg, rgba(255,205,120,.62), rgba(155,116,255,.50)) !important;
color: rgba(20,10,36,.92) !important;
}
.btnPrimary:hover{
background: linear-gradient(135deg, rgba(255,205,120,.68), rgba(155,116,255,.56)) !important;
}
.realmGrid.realmSegmented{
border-color: rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.04) !important;
box-shadow: var(--imCtlShadow) !important;
}
.realmGrid.realmSegmented .realmChip{
flex-direction: column !important;
gap: 3px !important;
padding: 6px 4px !important;
white-space: normal !important;
}
.realmGrid.realmSegmented .realmEmoji{ font-size: 16px !important; line-height: 1 !important; }
.realmGrid.realmSegmented .realmLabel{
font-size: 12.5px !important;
line-height: 1.05 !important;
text-align: center !important;
white-space: normal !important;
}

/* === original inline style block 015; id: im-v174-strip-width-wrap-fix; original line: 7469 === */
.ritualStrip{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
overflow: visible !important;
align-items: stretch !important;
}
.ritualStrip > .ritualPanel{ min-width: 0 !important; }
@media (max-width: 860px){
.ritualStrip{ grid-template-columns: 1fr !important; gap: 14px !important; }
}
.ritualPanelTitle{ text-wrap: balance; }
.ritualPanelSub{ text-wrap: balance; }

/* === original inline style block 016; id: im-step4-firsttime-nudge; original line: 7484 === */
.ritualStrip.isScrollable{
-webkit-mask-image: linear-gradient(to right, transparent 0px, #000 22px, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0px, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.ritualPanel.imNextStep{
border-color: rgba(195,145,255,.32) !important;
box-shadow:
0 22px 60px rgba(0,0,0,.32),
0 0 0 1px rgba(195,145,255,.16),
0 0 0 10px rgba(195,145,255,.06),
inset 0 1px 0 rgba(255,255,255,.14) !important;
animation: imNudgeFloat 1.35s ease-in-out 2;
}
@keyframes imNudgeFloat{
0%   { transform: translateY(0); }
50%  { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
.journalScrollBtn.imPulse{
animation: imBtnPulse 1.2s ease-in-out 3;
will-change: transform;
}
@keyframes imBtnPulse{
0%,100%{ transform: translateY(0) scale(1); }
50%{ transform: translateY(-1px) scale(1.015); }
}

/* === original inline style block 017; id: im-v217-streaks-recap-personalization; original line: 7512 === */
.imStreakBanner{
margin: 14px 0 0;
padding: 14px 16px;
border-radius: 20px;
border: 1px solid rgba(255,205,120,.22);
background:
radial-gradient(700px 160px at 15% 0%, rgba(255,205,120,.13), transparent 60%),
radial-gradient(700px 200px at 85% 100%, rgba(155,116,255,.11), transparent 62%),
rgba(255,255,255,.04);
backdrop-filter: blur(18px) saturate(140%);
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.imStreakLeft{
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 220px;
}
.imStreakOrb{
width: 52px; height: 52px;
border-radius: 999px;
flex-shrink: 0;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.88), rgba(255,205,120,.85) 38%, rgba(155,116,255,.70) 70%, transparent 90%);
box-shadow:
0 0 0 2px rgba(255,205,120,.35),
0 10px 28px rgba(0,0,0,.32),
0 0 28px rgba(255,205,120,.22);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
position: relative;
overflow: hidden;
}
.imStreakOrb::after{
content:"";
position:absolute; inset:-1px;
border-radius:inherit;
background: radial-gradient(ellipse 130% 55% at 50% 0%, rgba(255,255,255,.28), transparent 65%);
pointer-events:none;
}
.imStreakOrb.isActive{
animation: streakPulse 2.4s ease-in-out infinite;
}
@keyframes streakPulse{
0%,100%{ box-shadow: 0 0 0 2px rgba(255,205,120,.35), 0 10px 28px rgba(0,0,0,.32), 0 0 28px rgba(255,205,120,.22); }
50%{ box-shadow: 0 0 0 4px rgba(255,205,120,.50), 0 10px 34px rgba(0,0,0,.36), 0 0 44px rgba(255,205,120,.38); }
}
.imStreakInfo{ display:flex; flex-direction:column; gap:2px; }
.imStreakCount{
font-size: 24px;
font-weight: 980;
letter-spacing: -.02em;
line-height: 1.05;
background: linear-gradient(125deg, rgba(255,208,124,.96), rgba(168,128,255,.90));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.imStreakLabel{
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.62);
}
.imStreakMini{
font-size: 13px;
color: rgba(255,255,255,.70);
line-height: 1.4;
flex: 1 1 200px;
min-height: 52px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
align-self: stretch;
}
.imStreakMini strong{ color: rgba(255,255,255,.90); font-weight: 900; }
@media (min-width: 900px){
.imStreakBanner.imAnnualTeaser{
align-items: center;
}
.imStreakBanner.imAnnualTeaser .imStreakMini{
padding-top: 0;
padding-bottom: 0;
}
}
@media (min-width: 900px){
.imStreakBanner.imAnnualTeaser .imStreakMini{
padding-top: 6px;
}
}
@media (min-width: 641px){
.imStreakBanner.imAnnualTeaser .imStreakLeft{
flex: 0 0 228px !important;
min-width: 228px !important;
}
.imStreakBanner.imAnnualTeaser .imStreakMini{
flex: 1 1 auto !important;
margin-left: -4px !important;
}
}
.imStreakActions{
display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.imStreakBtn{
appearance: none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.90);
border-radius: 14px;
padding: 9px 14px;
font-size: 13px;
font-weight: 900;
letter-spacing: .01em;
cursor: pointer;
transition: transform .12s, background .12s, border-color .12s;
white-space: nowrap;
}
.imStreakBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
.imStreakBtn.gold{
background: linear-gradient(135deg, rgba(255,205,120,.88), rgba(155,116,255,.74));
color: rgba(14,8,32,.96);
border-color: rgba(255,205,120,.30);
}
.imStreakBtn.gold:hover{ filter: brightness(1.06); }
.imStreakDots{
display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
max-width: 240px;
}
.imStreakDot{
width: 10px; height: 10px;
border-radius: 3px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.08);
transition: transform .14s;
}
.imStreakDot.filled{
background: linear-gradient(135deg, rgba(255,205,120,.75), rgba(155,116,255,.55));
border-color: rgba(255,205,120,.30);
box-shadow: 0 0 8px rgba(255,205,120,.22);
}
.imStreakDot.today{
background: linear-gradient(135deg, rgba(255,205,120,.95), rgba(155,116,255,.80));
border-color: rgba(255,205,120,.55);
box-shadow: 0 0 14px rgba(255,205,120,.40);
transform: scale(1.18);
}
.imStreakDot.cardOnly{
background: rgba(255,255,255,.06);
border: 1.5px dashed rgba(255,205,120,.25);
box-shadow: none;
}
.imPersonaBar{
margin: 12px 0 0;
padding: 14px 16px;
border-radius: 20px;
border: 1px solid rgba(140,220,255,.18);
background:
radial-gradient(700px 160px at 15% 0%, rgba(140,220,255,.09), transparent 60%),
radial-gradient(700px 200px at 85% 100%, rgba(155,116,255,.10), transparent 62%),
rgba(255,255,255,.04);
backdrop-filter: blur(18px) saturate(140%);
}
.imPersonaHeader{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 12px; flex-wrap: wrap;
}
.imPersonaKicker{
font-size: 11px; font-weight: 900; letter-spacing: .16em;
text-transform: uppercase; color: rgba(255,255,255,.58);
}
.imPersonaTitle{
font-size: 16px; font-weight: 950; color: rgba(255,255,255,.92);
margin-top: 2px; letter-spacing: -.01em;
}
.imPersonaToggle{
appearance: none;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.78);
border-radius: 12px;
padding: 7px 12px;
font-size: 12px; font-weight: 900; letter-spacing: .05em;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.imPersonaToggle:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.imPersonaBody{ display: flex; flex-direction: column; gap: 12px; }
.imPersonaRow{ display: flex; flex-direction: column; gap: 6px; }
.imPersonaRowLabel{
font-size: 11px; font-weight: 900; letter-spacing: .12em;
text-transform: uppercase; color: rgba(255,255,255,.52);
}
.imRealmWeights{ display: flex; flex-direction: column; gap: 8px; }
.imRealmWeightRow{ display: flex; align-items: center; gap: 10px; }
.imRealmWeightEmoji{ font-size: 16px; width: 22px; text-align: center; flex-shrink:0; }
.imRealmWeightName{
font-size: 13px; font-weight: 800; color: rgba(255,255,255,.80);
width: 72px; flex-shrink: 0;
}
.imRealmWeightSlider{
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,.12);
outline: none;
cursor: pointer;
}
.imRealmWeightSlider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 18px; height: 18px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255,205,120,.95), rgba(155,116,255,.80));
box-shadow: 0 4px 12px rgba(0,0,0,.28);
cursor: pointer;
border: 2px solid rgba(255,255,255,.25);
}
.imRealmWeightSlider::-moz-range-thumb{
width: 18px; height: 18px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255,205,120,.95), rgba(155,116,255,.80));
box-shadow: 0 4px 12px rgba(0,0,0,.28);
cursor: pointer;
border: 2px solid rgba(255,255,255,.25);
}
.imRealmWeightVal{
font-size: 12px; font-weight: 900; color: rgba(255,255,255,.62);
width: 28px; text-align: right; flex-shrink: 0;
}
.imIntentionChips{
display: flex; flex-wrap: wrap; gap: 8px;
}
.imIntentionChip{
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(155,116,255,.30);
background: rgba(155,116,255,.10);
color: rgba(255,255,255,.74);
font-size: 13px; font-weight: 800;
cursor: pointer;
transition: background .12s, border-color .12s, transform .12s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.imIntentionChip:hover{ background: rgba(155,116,255,.20); border-color: rgba(155,116,255,.55); transform: translateY(-1px); }
.imIntentionChip.active{
background: linear-gradient(135deg, rgba(155,116,255,.38), rgba(255,205,120,.22));
border-color: rgba(155,116,255,.65);
box-shadow: 0 0 18px rgba(155,116,255,.22);
}
.imIntentionChip .chipX{
font-size: 11px; opacity: .60; font-weight: 900;
transition: opacity .12s;
}
.imIntentionChip:hover .chipX{ opacity: .90; }
.imAddIntentionWrap{ display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.imAddIntentionInput{
flex: 1;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.14);
background: rgba(8,4,22,.72);
color: rgba(255,255,255,.92);
font-size: 14px; font-family: inherit;
padding: 10px 14px;
outline: none;
transition: border-color .15s;
}
.imAddIntentionInput:focus{ border-color: rgba(155,116,255,.55); box-shadow: 0 0 0 3px rgba(155,116,255,.10); }
.imAddIntentionInput::placeholder{ color: rgba(255,255,255,.36); }
.imAddIntentionBtn{
appearance: none;
border: 1px solid rgba(155,116,255,.35);
background: rgba(155,116,255,.16);
color: rgba(255,255,255,.90);
border-radius: 14px; padding: 10px 14px;
font-size: 13px; font-weight: 900; cursor: pointer;
transition: background .12s, border-color .12s;
white-space: nowrap;
}
.imAddIntentionBtn:hover{ background: rgba(155,116,255,.28); border-color: rgba(155,116,255,.58); }
.imFavSpreads{
display: flex; flex-wrap: wrap; gap: 8px;
}
.imFavSpreadChip{
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 12px;
border-radius: 14px;
border: 1px solid rgba(255,205,120,.25);
background: rgba(255,205,120,.08);
color: rgba(255,255,255,.74);
font-size: 13px; font-weight: 800;
cursor: pointer;
transition: background .12s, border-color .12s, transform .12s;
-webkit-tap-highlight-color: transparent;
}
.imFavSpreadChip:hover{ background: rgba(255,205,120,.16); border-color: rgba(255,205,120,.50); transform: translateY(-1px); }
.imFavSpreadChip.active{
background: linear-gradient(135deg, rgba(255,205,120,.32), rgba(155,116,255,.18));
border-color: rgba(255,205,120,.65);
box-shadow: 0 0 18px rgba(255,205,120,.18);
}
.imOTD {
margin-top: 20px;
border-radius: 22px;
border: 1px solid rgba(255,205,120,.22);
background:
radial-gradient(ellipse 160% 60% at 50% 0%, rgba(255,205,120,.09), transparent 60%),
linear-gradient(158deg, rgba(18,9,44,.80), rgba(8,36,74,.55));
overflow: hidden;
}
.imOTDHead {
display: flex; align-items: center; gap: 0;
padding: 14px 18px 13px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.imOTDHeadIcon { font-size: 24px; flex-shrink: 0; filter: drop-shadow(0 3px 10px rgba(255,205,120,.35)); }
.imOTDHeadText { flex: 1; min-width: 0; }
.imOTDHeadTitle {
font-size: 15px; font-weight: 900; letter-spacing: -.01em;
background: linear-gradient(110deg, rgba(255,220,140,1) 0%, rgba(195,148,255,.90) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 2px;
}
.imOTDHeadSub {
font-size: 11px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
color: rgba(255,255,255,.38);
}
.imOTD--locked {
border-color: rgba(255,205,120,.18);
background:
radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.08), transparent 38%),
radial-gradient(95% 80% at 100% 0%, rgba(130,96,255,.20), transparent 46%),
linear-gradient(180deg, rgba(9,18,56,.96) 0%, rgba(8,24,70,.92) 100%);
box-shadow:
0 26px 70px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.08);
}
.imOTDHead--locked {
padding: 18px 20px 16px;
border-bottom: 1px solid rgba(255,255,255,.06);
gap: 0;
}
.imOTDHeadIcon--locked {
display: none;
}
.imOTDHeadIconCore {
display: none;
}
.imOTDLockedBody {
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.imOTDLockedEyebrow {
font-size: 11px;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,214,140,.62);
}
.imOTDLockedCopy {
max-width: 560px;
font-size: 15px;
line-height: 1.6;
letter-spacing: -.01em;
color: rgba(255,255,255,.70);
}
.imOTDUnlockBtn {
margin-top: 2px;
min-height: 58px;
width: min(100%, 334px);
padding: 10px 14px 10px 16px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 20px;
background:
radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.13), transparent 42%),
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
box-shadow:
0 14px 34px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -1px 0 rgba(255,255,255,.03);
color: rgba(255,255,255,.96);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
-webkit-backdrop-filter: blur(18px) saturate(135%);
backdrop-filter: blur(18px) saturate(135%);
}
.imOTDUnlockBtn:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,.18);
box-shadow:
0 24px 52px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.18),
0 0 0 1px rgba(255,214,128,.06);
}
.imOTDUnlockBtn:active {
transform: translateY(0);
}
.imOTDUnlockBtn:disabled {
opacity: 1;
cursor: default;
}
.imOTDUnlockBtnIcon {
width: 20px;
height: 20px;
flex-shrink: 0;
position: relative;
display: inline-block;
background: none;
border: 0;
box-shadow: none;
}
.imOTDUnlockBtnIcon::before {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 8px;
height: 7px;
border: 2px solid rgba(255,255,255,.72);
border-bottom: 0;
border-radius: 8px 8px 0 0;
opacity: .92;
}
.imOTDUnlockBtnIcon::after {
content: "";
position: absolute;
left: 3px;
top: 8px;
width: 12px;
height: 10px;
border-radius: 3px;
background: rgba(255,255,255,.74);
opacity: .9;
}
.imOTDUnlockBtnText {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.imOTDUnlockBtnTitle {
font-size: 16px;
line-height: 1.12;
font-weight: 840;
letter-spacing: -.018em;
color: rgba(255,255,255,.98);
}
.imOTDUnlockBtnHint {
font-size: 12.5px;
line-height: 1.22;
font-weight: 680;
letter-spacing: .01em;
color: rgba(255,255,255,.52);
}
.imOTDUnlockBtnArrow {
font-size: 22px;
line-height: 1;
color: rgba(255,255,255,.28);
transform: translateY(-1px);
}
.imOTDUnlockBtn.is-loading .imOTDUnlockBtnArrow {
opacity: .16;
}
.imOTDUnlockBtn.is-loading .imOTDUnlockBtnIcon {
animation: imOtdPulse 1.05s ease-in-out infinite;
}
@keyframes imOtdPulse {
0%,100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
50% { transform: scale(.97); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 6px rgba(255,214,128,.04); }
}
@media (max-width: 640px){
.imOTDHead--locked { padding: 16px 16px 14px; }
.imOTDLockedBody { padding: 16px; }
.imOTDUnlockBtn { width: 100%; border-radius: 18px; }
}
.imOTDEntries { display: flex; flex-direction: column; }
.imOTDEntry {
display: flex; gap: 14px; align-items: center;
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,.055);
cursor: pointer;
transition: background .13s;
}
.imOTDEntry:last-child { border-bottom: none; }
.imOTDEntry:hover { background: rgba(255,255,255,.035); }
.imOTDEntryLeft { display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; width: 60px; }
.imOTDEntryYear {
font-size: 11px; font-weight: 900; letter-spacing: .04em;
color: rgba(255,205,120,.72); text-align: center; line-height: 1;
display: none;
}
.imOTDEntryCardThumb {
width: 54px; height: 76px; border-radius: 9px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.05);
overflow: hidden; display: flex; align-items: center; justify-content: center;
font-size: 26px; flex-shrink: 0;
}
.imOTDEntryCardThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imOTDEntryCardThumb--img {
border: 1.5px solid rgba(255,255,255,.22);
box-shadow: 0 4px 14px rgba(0,0,0,.38), 0 0 0 1px rgba(155,116,255,.18);
background: rgba(0,0,0,.3);
border-radius: 9px;
}
.imOTDEntryBody { flex: 1; min-width: 0; }
.imOTDEntryRealm {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.47); margin-bottom: 4px;
}
.imOTDEntryCard {
font-size: 13px; font-weight: 800; color: rgba(255,255,255,.84);
margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imOTDEntrySnippet {
font-size: 12.5px; line-height: 1.58; color: rgba(255,255,255,.52);
font-style: italic;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.imOTDEntryMood {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: 999px;
border: 1px solid rgba(255,205,120,.18);
background: rgba(255,205,120,.07);
font-size: 11px; font-weight: 700; color: rgba(255,205,120,.70);
margin-top: 5px;
}
.imOTDEmpty {
padding: 22px 18px; text-align: center;
font-size: 13px; color: rgba(255,255,255,.34); font-style: italic; line-height: 1.65;
}
.imOTDFooter {
display: flex; justify-content: center; align-items: center; gap: 8px;
padding: 10px 18px 14px;
border-top: 1px solid rgba(255,255,255,.06);
}
.imOTDYearNav {
all: unset; box-sizing: border-box;
padding: 6px 12px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.64);
font-size: 14px; font-weight: 900; font-family: inherit;
cursor: pointer; transition: background .13s;
}
.imOTDYearNav:hover:not([disabled]) { background: rgba(255,255,255,.10); color: rgba(255,255,255,.90); }
.imOTDYearNav[disabled] { opacity: .28; cursor: not-allowed; }
.imOTDYearLabel {
font-size: 12px; font-weight: 800; color: rgba(255,205,120,.65);
letter-spacing: .04em; min-width: 40px; text-align: center;
}
.pNotifBlock{margin:0 0 10px}.pNotifCard{border-radius:20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);overflow:hidden}.pNotifHead{padding:16px 16px 8px;border-bottom:1px solid rgba(255,255,255,.06)}.pNotifHead .pSectionLabel{margin:0 0 4px;font-size:16px}.pOraclePill{display:inline-flex;margin-left:6px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,205,120,.28);background:rgba(255,205,120,.08);color:rgba(255,226,170,.86);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;vertical-align:middle}.pNotifRow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 16px}.pNotifTimeSub+.pNotifRow{border-top:1px solid rgba(255,255,255,.06)}.pNotifInfo{flex:1;min-width:0}.pNotifLabel{font-size:14px;font-weight:800;color:rgba(255,255,255,.78);margin-bottom:3px}.pNotifDesc{font-size:12px;color:rgba(255,255,255,.54);line-height:1.52}.pToggleWrap{position:relative;width:46px;height:27px;flex-shrink:0;margin-top:1px}.pToggleWrap input{opacity:0;width:0;height:0;position:absolute}.pToggleTrack{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:background .18s,border-color .18s}.pToggleWrap input:checked+.pToggleTrack{background:rgba(255,205,120,.28);border-color:rgba(255,205,120,.42)}.pToggleTrack:after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 7px rgba(0,0,0,.32);transition:transform .18s cubic-bezier(.2,.8,.2,1)}.pToggleWrap input:checked+.pToggleTrack:after{transform:translateX(19px)}.pNotifTimeSub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 16px 9px}.pNotifTimeLabel{font-size:13px;font-weight:700;color:rgba(255,255,255,.54)}.pNotifTimeInput{all:unset;box-sizing:border-box;width:112px;min-width:112px;height:40px;line-height:40px;padding:0 13px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);color:rgba(255,255,255,.92);font-size:14px;font-weight:800;font-family:inherit;cursor:text;transition:none;color-scheme:dark}.pNotifTimeInput:focus{border-color:rgba(255,205,120,.46);outline:0}.pNotifSaveBtn{all:unset;box-sizing:border-box;padding:8px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);color:rgba(255,255,255,.74);font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;transition:background .13s}.pNotifSaveBtn:hover{background:rgba(255,255,255,.09)}.pNotifStatusMsg{font-size:12px;color:rgba(255,205,120,.68);font-style:italic;min-height:0;padding:0 16px 4px}.pNotifPermBanner{display:none;gap:12px;align-items:flex-start;margin:0 16px 12px;padding:12px 13px;border-radius:14px;border:1px solid rgba(255,205,120,.20);background:rgba(255,205,120,.055);font-size:13px;color:rgba(255,255,255,.72);line-height:1.55}.pNotifPermBanner.show{display:flex}.pNotifPermBtn,.pNotifTestBtn{all:unset;box-sizing:border-box;padding:7px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:rgba(255,255,255,.66);font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;transition:background .13s}.pNotifPermBtn:hover,.pNotifTestBtn:hover{background:rgba(255,255,255,.10);color:rgba(255,255,255,.78)}.pCloudPushCard .pNotifSaveBtn[disabled]{opacity:.72;cursor:default;transform:none!important}
.imRecapModal{
position: fixed; inset: 0; z-index: 99994;
display: none; align-items: center; justify-content: center;
padding: 18px;
}
.imRecapModal.show{ display: flex; }
.imRecapBg{
position: absolute; inset: 0;
background:
radial-gradient(900px 520px at 50% 35%, rgba(155,116,255,.20), transparent 60%),
rgba(0,0,0,.72);
backdrop-filter: blur(18px) saturate(140%);
}
.imRecapCard{
position: relative; z-index: 1;
width: min(680px, 96vw);
max-height: calc(100svh - 36px);
border-radius: 30px;
border: 1px solid rgba(255,255,255,.16);
background:
radial-gradient(900px 300px at 18% 0%, rgba(255,205,120,.10), transparent 62%),
radial-gradient(900px 400px at 82% 100%, rgba(155,116,255,.14), transparent 60%),
linear-gradient(162deg, rgba(18,10,44,.96), rgba(8,44,84,.72));
box-shadow: 0 54px 160px rgba(0,0,0,.68);
overflow: hidden;
display: flex; flex-direction: column;
animation: recapIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes recapIn{
from{ opacity:0; transform: scale(.93) translateY(22px); }
to{ opacity:1; transform: scale(1) translateY(0); }
}
.imRecapTop{
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,.10);
flex-shrink: 0;
}
.imRecapBrand{
display: flex; flex-direction: column; gap: 3px;
}
.imRecapKicker{
font-size: 10px; font-weight: 900; letter-spacing: .18em;
text-transform: uppercase; color: rgba(255,255,255,.52);
}
.imRecapTitle{
font-size: clamp(20px, 2.2vw, 26px); font-weight: 980;
letter-spacing: -.01em;
background: var(--title-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.imRecapClose{
appearance: none;
border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
color: rgba(255,255,255,.90); width: 42px; height: 42px;
border-radius: 14px; font-weight: 950; cursor: pointer; flex-shrink:0;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.imRecapClose:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.imRecapBody{
overflow-y: auto; flex: 1;
padding: 18px 20px 22px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.12) transparent;
}
.imRecapBody::-webkit-scrollbar{ width: 5px; }
.imRecapBody::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }
.imRecapNav{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 16px;
}
.imRecapNavBtn{
appearance: none;
border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
color: rgba(255,255,255,.80); border-radius: 12px;
padding: 8px 14px; font-size: 16px; font-weight: 900; cursor: pointer;
transition: background .12s, border-color .12s;
}
.imRecapNavBtn:hover{ background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); }
.imRecapNavBtn[disabled]{ opacity: .35; cursor: not-allowed; }
.imRecapMonthTitle{
font-size: clamp(16px, 1.7vw, 20px); font-weight: 980; letter-spacing: -.01em;
color: rgba(255,255,255,.94); text-align: center;
}
.imRecapStats{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
@media (max-width: 520px){ .imRecapStats{ grid-template-columns: 1fr 1fr; } }
.imRecapStat{
padding: 14px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
box-shadow: 0 12px 34px rgba(0,0,0,.22);
text-align: center;
}
.imRecapStatNum{
font-size: 28px; font-weight: 980; letter-spacing: -.02em;
background: var(--title-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1.1;
}
.imRecapStatLabel{
margin-top: 4px; font-size: 11px; font-weight: 900;
letter-spacing: .10em; text-transform: uppercase;
color: rgba(255,255,255,.52);
}
.imRecapRealmBreakdown{ margin-bottom: 16px; }
.imRecapSectionLabel{
font-size: 11px; font-weight: 900; letter-spacing: .14em;
text-transform: uppercase; color: rgba(255,255,255,.52);
margin-bottom: 8px;
}
.imRecapRealmBars{ display: flex; flex-direction: column; gap: 8px; }
.imRecapRealmBar{ display: flex; align-items: center; gap: 10px; }
.imRecapRealmName{
font-size: 13px; font-weight: 800; color: rgba(255,255,255,.78);
width: 96px; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
white-space: nowrap;
}
.imRecapRealmTrack{
flex: 1; height: 8px; border-radius: 999px;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.imRecapRealmFill{
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, rgba(255,205,120,.80), rgba(155,116,255,.65));
transition: width .5s cubic-bezier(.2,.8,.2,1);
min-width: 6px;
}
.imRecapRealmCount{
font-size: 12px; font-weight: 900; color: rgba(255,255,255,.52);
width: 22px; text-align: right; flex-shrink: 0;
}
.imRecapInsight{
padding: 14px 14px;
border-radius: 18px;
border: 1px solid rgba(155,116,255,.22);
background: linear-gradient(135deg, rgba(155,116,255,.12), rgba(255,205,120,.07));
margin-bottom: 14px;
line-height: 1.68;
font-size: 14px;
color: rgba(255,255,255,.84);
}
.imRecapInsight strong{ color: rgba(255,255,255,.96); font-weight: 900; }
.imRecapInsightMeta{
display:flex;
align-items:baseline;
gap: 10px;
margin-bottom: 10px;
}
.imRecapInsightMetaLabel{
font-size: 13px;
font-weight: 850;
color: rgba(255,255,255,.58);
}
.imRecapInsightMetaDot{
opacity: .35;
}
.imRecapInsightMetaValue{
font-size: 13px;
font-weight: 950;
color: rgba(255,255,255,.90);
}
@media (max-width: 560px){
.imRecapInsightMeta{ margin-bottom: 12px; }
}
.imRecapInsightRow{
display: flex;
align-items: flex-start;
gap: 14px;
}
.imRecapInsightLead{
flex: 1;
min-width: 0;
}
.imRecapInsightTail{
margin-top: 10px;
color: rgba(255,255,255,.84);
}
.imRecapMetricChip{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.035);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap;
flex: 0 0 auto;
vertical-align: middle;
}
.imRecapMetricNum{
font-size: 14px;
font-weight: 950;
letter-spacing: -0.2px;
color: rgba(255,255,255,.96);
}
.imRecapMetricUnit{
font-size: 13px;
font-weight: 850;
color: rgba(255,255,255,.86);
margin-left: -4px;
}
.imRecapMetricDot{
opacity: .55;
margin: 0 2px;
}
.imRecapMetricSub{
font-size: 12px;
font-weight: 720;
color: rgba(255,255,255,.62);
}
@media (max-width: 560px){
.imRecapInsightRow{
flex-direction: column;
gap: 10px;
}
.imRecapMetricChip{
padding: 7px 12px;
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.12);
}
.imRecapMetricNum{ font-size: 13.5px; }
.imRecapMetricUnit{ font-size: 12.5px; }
.imRecapMetricSub{ font-size: 11.5px; }
}
.imRecapThemes{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.imRecapThemeTag{
padding: 7px 12px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
font-size: 13px; font-weight: 800;
color: rgba(255,255,255,.82);
}
.imRecapThemeTag.prominent{
border-color: rgba(255,205,120,.35);
background: rgba(255,205,120,.10);
color: rgba(255,220,140,.92);
}
.imRecapStreakCallout{
display: flex; align-items: center; gap: 0;
padding: 14px 16px; border-radius: 18px;
border: 1px solid rgba(255,205,120,.28);
background:
radial-gradient(600px 160px at 0% 50%, rgba(255,205,120,.12), transparent 65%),
rgba(255,255,255,.03);
margin-bottom: 16px;
}
.imRecapStreakEmoji{ font-size: 28px; flex-shrink: 0; }
.imRecapStreakText{ display: flex; flex-direction: column; gap: 2px; }
.imRecapStreakNum{ font-size: 20px; font-weight: 980; letter-spacing: -.01em;
background: linear-gradient(125deg, rgba(255,208,124,.96), rgba(168,128,255,.90));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.imRecapStreakDesc{ font-size: 13px; color: rgba(255,255,255,.64); }
.imRecapAffirm{
padding: 14px 16px; border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
font-style: italic; font-size: 15px; line-height: 1.72;
color: rgba(255,255,255,.76);
margin-bottom: 14px;
position: relative;
}
.imRecapAffirmLabel{
font-size: 11px; font-weight: 900; letter-spacing: .14em;
text-transform: uppercase; color: rgba(255,255,255,.53);
font-style: normal; margin-bottom: 6px; display: block;
}
.imRecapFooter{
display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
padding: 14px 20px 18px;
border-top: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.imRecapFooterBtn{
appearance: none;
border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
color: rgba(255,255,255,.90); border-radius: 16px; padding: 12px 16px;
font-size: 14px; font-weight: 900; cursor: pointer;
transition: background .12s, border-color .12s, transform .12s;
white-space: nowrap;
}
.imRecapFooterBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.24); }
.imRecapFooterBtn.primary{
background: linear-gradient(135deg, rgba(255,205,120,.88), rgba(155,116,255,.74));
color: rgba(14,8,32,.96); border-color: rgba(255,205,120,.28);
}
.imRecapFooterBtn.primary:hover{ filter: brightness(1.06); }
.imRecapEmpty{
text-align: center; padding: 40px 20px;
color: rgba(255,255,255,.52); font-size: 15px; line-height: 1.7;
}
.imRecapEmpty .emptyIcon{ font-size: 40px; display: block; margin-bottom: 12px; }
@media (max-width: 480px){
.imStreakBanner{ flex-direction: column; align-items: flex-start; }
.imStreakActions{ width: 100%; }
.imStreakBtn{ flex: 1; justify-content: center; }
}
.todayMsg{
margin: 10px auto 18px;
max-width: 820px;
text-align: center;
font-size: clamp(15px, 1.35vw, 18px);
line-height: 1.45;
font-weight: 600;
letter-spacing: -.01em;
color: rgba(255,255,255,.86);
text-wrap: balance;
}
@media (max-width: 480px){
.todayMsg{ margin: 8px auto 14px; font-size: 15px; }
}

/* === original inline style block 018; id: im-overlay-option-c; original line: 8405 === */
body::before{ background:none !important; opacity:0 !important; filter:none !important; }
body[data-theme]::before{ background-image:none !important; opacity:0 !important; filter:none !important; }
body::after{ z-index:2 !important; }
#imRealmCorners{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
transform: translateZ(0);
}
#imRealmCorners .imCorner{
position: absolute;
width: clamp(160px, 18vw, 280px);
height: clamp(160px, 18vw, 280px);
--imCornerAtlas: clamp(520px, 46vw, 780px);
background-image: var(--imCornerImg, var(--overlayPlant));
background-repeat: no-repeat;
background-size: var(--imCornerAtlas) var(--imCornerAtlas);
opacity: var(--imCornerOpacity, .20);
filter: var(--imCornerFilter, saturate(1.08) contrast(1.05));
mix-blend-mode: normal;
will-change: opacity, filter;
transition: opacity .35s ease, filter .35s ease;
}
#imRealmCorners .tl{
top: -20px; left: -20px;
background-position: left top;
-webkit-mask-image: radial-gradient(circle at 0% 0%, #000 0%, #000 62%, transparent 82%);
mask-image: radial-gradient(circle at 0% 0%, #000 0%, #000 62%, transparent 82%);
}
#imRealmCorners .tr{
top: -20px; right: -20px;
background-position: right top;
-webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, #000 62%, transparent 82%);
mask-image: radial-gradient(circle at 100% 0%, #000 0%, #000 62%, transparent 82%);
}
#imRealmCorners .bl{
bottom: -20px; left: -20px;
background-position: left bottom;
opacity: calc(var(--imCornerOpacity, .20) * .78);
-webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0%, #000 58%, transparent 82%);
mask-image: radial-gradient(circle at 0% 100%, #000 0%, #000 58%, transparent 82%);
}
#imRealmCorners .br{
bottom: -20px; right: -20px;
background-position: right bottom;
opacity: calc(var(--imCornerOpacity, .20) * .78);
-webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, #000 58%, transparent 82%);
mask-image: radial-gradient(circle at 100% 100%, #000 0%, #000 58%, transparent 82%);
}
body[data-theme="plant"]{
--imCornerImg: var(--overlayPlant);
--imCornerOpacity: .18;
--imCornerFilter: saturate(1.06) contrast(1.06);
}
body[data-theme="animal"]{
--imCornerImg: var(--overlayAnimal);
--imCornerOpacity: .22;
--imCornerFilter: saturate(1.10) contrast(1.05);
}
body[data-theme="mushroom"]{
--imCornerImg: var(--overlayMushroom);
--imCornerOpacity: .22;
--imCornerFilter: saturate(1.08) contrast(1.08);
}
body[data-theme="mineral"]{
--imCornerImg: var(--overlayMineral);
--imCornerOpacity: .14;
--imCornerFilter: brightness(.72) saturate(1.04) contrast(1.12);
}
body[data-ui-mode="dawn"][data-theme="plant"]{ --imCornerImg: var(--overlayPlantDawn); }
body[data-ui-mode="dawn"][data-theme="animal"]{ --imCornerImg: var(--overlayAnimalDawn); }
body[data-ui-mode="dawn"][data-theme="mushroom"]{ --imCornerImg: var(--overlayMushroomDawn); }
body[data-ui-mode="dawn"][data-theme="mineral"]{ --imCornerImg: var(--overlayMineralDawn); }
@media (max-width: 520px){
#imRealmCorners .imCorner{
width: 150px;
height: 150px;
--imCornerAtlas: 520px;
}
}

/* === original inline style block 019; id: innermuse-memories-reflection-right-v256; original line: 8489 === */
#memoriesModal .memDetailBody{
display: flex !important;
flex-direction: row !important;
gap: 18px !important;
align-items: stretch !important;
min-height: 0 !important;
height: 100% !important;
}
#memoriesModal .memDetailCard{
flex: 0 0 auto !important;
height: 100% !important;
width: auto !important;
aspect-ratio: 2 / 3 !important;
max-width: none !important;
min-width: 0 !important;
overflow: hidden !important;
border-radius: 16px !important;
display: flex !important;
align-items: stretch !important;
}
#memoriesModal .memDetailCard img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 16px !important;
}
#memoriesModal .memDetailText{
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
overflow: auto !important;
}
#memoriesModal #memDetailUnwrittenPane{
width: 100% !important;
box-sizing: border-box !important;
}
#memoriesModal #memDetailUnwrittenPane.isEditing{
flex: 0 1 auto !important;
}
@media (max-width: 720px){
#memoriesModal .memDetailBody{
flex-direction: column !important;
height: auto !important;
}
#memoriesModal .memDetailCard{
height: auto !important;
width: 100% !important;
max-width: 240px !important;
aspect-ratio: 2 / 3 !important;
align-self: center !important;
}
}

/* === original inline style block 020; id: innermuse-journal-actions-premium-v259; original line: 8545 === */
.journalActions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap: 12px !important;
flex-wrap: nowrap !important;
}
.journalActions .journalDateStamp{ margin-right: auto !important; }
.journalSaveBtn{
width: auto !important;
padding: 12px 18px !important;
border-radius: 16px !important;
font-size: 15px !important;
font-weight: 850 !important;
letter-spacing: -.01em !important;
line-height: 1 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap: 10px !important;
box-shadow:
0 18px 48px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.10) !important;
}
@media (max-width: 560px){
.journalActions{ flex-wrap: wrap !important; justify-content: stretch !important; }
.journalSaveBtn{ width: 100% !important; }
}
#memoriesModal .memRealmTab{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
}
#memoriesModal .memRealmTab .realmIconImg{
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
}
#memoriesModal .memRealmTab .realmIconImg img{
width: 18px !important;
height: 18px !important;
object-fit: contain !important;
}
#memoriesModal .memRealmTab .realmIconImg{
display: none !important;
}
#memoriesModal .memRealmTab{
font-family: inherit !important;
font-size: 15px !important;
font-weight: 850 !important;
letter-spacing: -.01em !important;
line-height: 1 !important;
}
#memoriesModal .memRealmTab *{
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
}

/* === original inline style block 021; id: innermuse-premium-fixes-v260; original line: 8606 === */
.journalActions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap: 14px !important;
flex-wrap: nowrap !important;
}
.journalActions .journalDateStamp{ margin-right:auto !important; }
.journalSaveBtn{
min-height: 56px !important;
padding: 0 22px !important;
border-radius: 18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap: 10px !important;
white-space: nowrap !important;
letter-spacing: -.01em !important;
line-height: 1 !important;
font-size: 16px !important;
font-weight: 850 !important;
border: 1px solid rgba(255,255,255,.22) !important;
box-shadow:
0 20px 60px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
@media (max-width: 560px){
.journalActions{ flex-wrap: wrap !important; justify-content: stretch !important; }
.journalSaveBtn{ width: 100% !important; }
}
.realmGrid .realmChip .realmLabel,
.realmGrid .chip.realmChip .realmLabel{
font-family: inherit !important;
font-size: 15px !important;
font-weight: 850 !important;
letter-spacing: -.01em !important;
line-height: 1 !important;
}
.realmGrid .chip{
font-family: inherit !important;
}

/* === original inline style block 022; id: innermuse-annual-recap-no-scroll-v261; original line: 8649 === */
#imRecapBody:has(.imRecapHero--locked){
overflow: hidden !important;
padding: 16px 18px 16px !important;
display:flex !important;
}
.imRecapHero--locked{
min-height: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 18px 14px 18px !important;
gap: 12px !important;
text-align: left !important;
display: grid !important;
grid-template-columns: minmax(320px, 1.35fr) minmax(260px, 1fr);
grid-template-rows: auto auto auto auto 1fr;
grid-template-areas:
"icon   preview"
"title  preview"
"copy   preview"
"actions preview"
"fine   preview";
align-items: start !important;
justify-items: start !important;
}
.imRecapHero--locked .imRecapHeroIcon{ grid-area: icon; }
.imRecapHero--locked .imRecapHeroTitle{ grid-area: title; }
.imRecapHero--locked .imRecapHeroCopy{ grid-area: copy; }
.imRecapHero--locked .imRecapHeroActions{ grid-area: actions; justify-content:flex-start !important; }
.imRecapHero--locked .imRecapHeroFineprint{ grid-area: fine; }
.imRecapHero--locked .imRecapHeroPreview{
grid-area: preview;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
align-self: stretch !important;
margin-top: 2px !important;
}
.imRecapHero--locked .imRecapHeroIcon{
width: 64px !important;
height: 64px !important;
border-radius: 22px !important;
}
.imRecapHero--locked .imRecapHeroTitle{
font-size: clamp(22px, 2.3vw, 30px) !important;
margin-top: 0 !important;
}
.imRecapHero--locked .imRecapHeroCopy{
max-width: 520px !important;
font-size: 15px !important;
line-height: 1.65 !important;
margin-top: 2px !important;
}
.imRecapHero--locked .imRecapHeroBtn{
min-width: 0 !important;
height: 52px !important;
padding: 0 18px !important;
border-radius: 16px !important;
font-size: 15px !important;
}
.imRecapHero--locked .imRecapPreviewCard{
padding: 16px 16px !important;
border-radius: 18px !important;
}
.imRecapHero--locked .imRecapPreviewNum{
font-size: 26px !important;
line-height: 1.05 !important;
}
.imRecapHero--locked .imRecapPreviewLabel{
margin-top: 6px !important;
font-size: 12.5px !important;
letter-spacing: .12em !important;
}
.imRecapHero--locked .imRecapHeroFineprint{
margin-top: 2px !important;
font-size: 12.5px !important;
opacity: .78 !important;
}
@media (max-height: 820px){
.imRecapHero--locked{
padding: 14px 12px 14px !important;
gap: 10px !important;
}
.imRecapHero--locked .imRecapHeroCopy{ line-height: 1.55 !important; }
.imRecapHero--locked .imRecapPreviewCard{ padding: 14px 14px !important; }
}
@media (max-width: 720px){
#imRecapBody:has(.imRecapHero--locked){ overflow-y: auto !important; }
.imRecapHero--locked{
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto auto auto auto !important;
grid-template-areas:
"icon"
"title"
"copy"
"actions"
"fine"
"preview" !important;
text-align: center !important;
justify-items: center !important;
}
.imRecapHero--locked .imRecapHeroActions{ justify-content:center !important; }
.imRecapHero--locked .imRecapHeroCopy{ max-width: 560px !important; }
.imRecapHero--locked .imRecapHeroPreview{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.imRecapHero--locked .imRecapPreviewNum{ font-size: 22px !important; }
}

/* === original inline style block 023; id: innermuse-annual-recap-apple-polish-v262; original line: 8760 === */
.imRecapHero--locked .imRecapHeroPreview{ gap: 10px !important; }
.imRecapHero--locked .imRecapPreviewCard{
padding: 14px 16px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background:
radial-gradient(1200px 220px at 20% 0%, rgba(255,255,255,.08), transparent 55%),
rgba(10, 12, 24, .34) !important;
box-shadow:
0 18px 52px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.imRecapHero--locked .imRecapPreviewNum{
position: relative !important;
color: transparent !important;
user-select: none !important;
}
.imRecapHero--locked .imRecapPreviewNum::before{
content: "" !important;
display: inline-block !important;
width: 42px !important;
height: 6px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.18) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.imRecapHero--locked .imRecapPreviewLabel{
margin-top: 8px !important;
color: rgba(255,255,255,.66) !important;
}
.imRecapHero--locked .imRecapHeroTitle{ letter-spacing: -.02em !important; }
.imRecapHero--locked .imRecapHeroCopy{ color: rgba(255,255,255,.74) !important; }
.imRecapFooterActions{
gap: 14px !important;
}
.imRecapFooterActions .imBtn{
height: 56px !important;
padding: 0 18px !important;
border-radius: 18px !important;
font-size: 16px !important;
font-weight: 850 !important;
letter-spacing: -.01em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
}
.imRecapFooterActions .imBtnSecondary,
.imRecapFooterActions .imBtn--secondary{
color: rgba(255,255,255,.82) !important;
border: 1px solid rgba(255,255,255,.14) !important;
background:
radial-gradient(900px 160px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
rgba(255,255,255,.05) !important;
box-shadow:
0 16px 44px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.imRecapFooterActions .imBtnPrimary,
.imRecapFooterActions .imBtn--primary{
border: 1px solid rgba(255,255,255,.20) !important;
box-shadow:
0 20px 60px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.imRecapFooterActions .imBtn:hover{
transform: translateY(-1px);
}
.imRecapFooterActions .imBtn:active{
transform: translateY(0);
}
@media (max-height: 820px){
.imRecapHero--locked .imRecapPreviewCard{ padding: 12px 14px !important; }
.imRecapFooterActions .imBtn{ height: 52px !important; border-radius: 16px !important; }
}

/* === original inline style block 024; id: innermuse-annual-recap-title-balance-v263; original line: 8837 === */
.imRecapHero--locked .imRecapHeroTitle{
max-width: 460px !important;
text-wrap: balance !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
hyphens: none !important;
line-height: 1.04 !important;
}
@media (min-width: 1100px){
.imRecapHero--locked .imRecapHeroTitle{ max-width: 520px !important; }
}
@media (max-height: 820px){
.imRecapHero--locked .imRecapHeroTitle{ max-width: 440px !important; }
}

/* === original inline style block 025; id: orawhale-passcode-align-v282; original line: 8853 === */
.imLockInput{
padding-left: 44px !important;
padding-right: 44px !important;
text-align: center !important;
box-sizing: border-box !important;
}

/* === original inline style block 026; id: ow-moonlit-archive-swipe-css-v293; original line: 8876 === */
#memoriesModal .memoriesSeg{
display:none;
align-items:center;
gap: 5px;
margin: 10px 12px 0;
padding: 4px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(10,8,24,.18);
backdrop-filter: blur(16px) saturate(145%);
-webkit-backdrop-filter: blur(16px) saturate(145%);
box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
#memoriesModal .memSegBtn{
flex: 1 1 0;
appearance:none;
background: transparent;
border: 1px solid transparent;
color: rgba(255,255,255,.66);
font-weight: 900;
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 10px 8px;
border-radius: 999px;
cursor: pointer;
transition:
background .22s cubic-bezier(.18,1,.28,1),
border-color .22s cubic-bezier(.18,1,.28,1),
transform .18s cubic-bezier(.18,1,.28,1),
color .22s ease;
}
#memoriesModal .memSegBtn:active{ transform: scale(.99); }
#memoriesModal .memSegBtn:focus{ outline: 3px solid rgba(255,205,120,.34); outline-offset: 3px; }
#memoriesModal .memSegBtn[aria-selected="true"]{
color: rgba(255,255,255,.94);
border: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.08), transparent 70%),
linear-gradient(135deg, rgba(255,205,120,.18), rgba(155,116,255,.14));
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
@media (min-width: 736px){
#memoriesModal .memoriesJournalPane{ display:none !important; }
}
@media (max-width: 735px){
#memoriesModal{
padding-left: 12px !important;
padding-right: 12px !important;
}
#memoriesModal .memoriesPanel{
width: calc(100vw - 24px) !important;
max-height: calc(100svh - 24px) !important;
}
#memoriesModal .memoriesSeg{ display:flex; }
#memoriesModal .memoriesGrid{
display: flex !important;
flex-direction: row !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
#memoriesModal .memoriesGrid::-webkit-scrollbar{ display:none; }
#memoriesModal .memoriesCalPane,
#memoriesModal .memoriesDetailPane,
#memoriesModal .memoriesJournalPane,
#memoriesModal .memoriesSearchPane{
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
scroll-snap-align: start;
scroll-snap-stop: always;
box-sizing: border-box !important;
min-height: 0 !important;
}
#memoriesModal .memoriesCalPane{
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
}
#memoriesModal .memoriesDetailPane{
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
}
#memoriesModal .memoriesJournalPane{
overflow: hidden !important;
display:flex !important;
flex-direction: column !important;
}
#memoriesModal .memoriesSearchPane{
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 10px !important;
}
#memoriesModal .memoriesSearchPane .owSearchResults{
flex: 1 !important;
overflow-y: auto !important;
min-height: 0 !important;
}
#memoriesModal .memJournalTop{
padding: 12px 12px 10px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
#memoriesModal .memJournalPaneBody{
position: relative !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 10px !important;
}
#memoriesModal .memJournalPanePlaceholder{
border-radius: 18px;
border: 1px dashed rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.70);
padding: 14px 14px;
text-align: center;
font-style: italic;
}
#memoriesModal .memoriesBody{ padding: 10px !important; overflow: hidden !important; }
}

/* === original inline style block 027; id: ow-moonlit-hide-kickers-ios-v309; original line: 9013 === */
@media (max-width: 735px){
#memoriesModal .memJournalInner .memDetailText,
#memoriesModal .memJournalInner [id="memDetailUnwrittenPane"],
#memoriesModal .memJournalInner .memDetailUnwritten,
#memoriesModal .memJournalInner .isEditing {
overflow-x: hidden !important;
width: 100% !important;
box-sizing: border-box !important;
}
#memoriesModal .memJournalInner .journalTagsWrap,
#memoriesModal .memJournalInner [style*="flex-wrap:wrap"],
#memoriesModal .memJournalInner .owTagPopover,
#memoriesModal .memJournalInner .owMoodPopover,
#memoriesModal .memJournalInner .owInlineEditPanel,
#memoriesModal .memJournalInner .owTagEditPanel,
#memoriesModal .memJournalInner .owMoodEditPanel {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
#memoriesModal .memDetailText > div,
#memoriesModal .isEditing > div {
max-width: 100% !important;
box-sizing: border-box !important;
}
#memoriesModal .owTagPopover,
#memoriesModal .owMoodPopover {
position: relative !important;
bottom: auto !important;
right: auto !important;
top: auto !important;
left: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
}
}

/* === original inline style block 028; id: no-id; original line: 9053 === */
@media (max-width: 735px){
#memoriesModal .memCalKicker,
#memoriesModal .memDetailKicker{
display:none !important;
}
#memoriesModal .memDetailTop{
padding-top: 10px !important;
}
#memoriesModal .memJournalTop{
padding-top: 10px !important;
}
}

/* === original inline style block 029; id: ow-moonlit-right-panel-v295; original line: 9067 === */
#memoriesModal .memDetailTop{
position: sticky;
top: 0;
z-index: 3;
margin: -4px 0 12px !important;
padding: 12px 10px 12px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(180deg, rgba(12,10,26,.86), rgba(12,10,26,.62));
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 16px 44px rgba(0,0,0,.34);
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
}
#memoriesModal .memDetailMeta{ min-width: 0; }
#memoriesModal .memDetailKicker{
font-size: 11px !important;
letter-spacing: .14em !important;
font-weight: 700 !important;
color: rgba(255,255,255,.56) !important;
}
#memoriesModal .memDetailDateRow{
display:flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-top: 6px;
}
#memoriesModal .memDetailDate{
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: -.022em !important;
line-height: 1.12 !important;
margin: 0 !important;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
#memoriesModal .memDetailRealmPill{
display:inline-flex;
align-items:center;
gap:6px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.86);
font-size: 12px;
font-weight: 800;
letter-spacing: .02em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#memoriesModal .memDetailMore{
appearance:none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.90);
width: 38px; height: 38px;
border-radius: 14px;
font-size: 26px;
line-height: 0;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
cursor:pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
#memoriesModal .memDetailMore:hover{
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.26);
transform: translateY(-1px);
filter: brightness(1.03);
}
#memoriesModal .memDetailMore:active{ transform: translateY(0) scale(.99); }
#memoriesModal .memDetailText{
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.04) !important;
border-radius: 18px !important;
padding: 16px 16px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#memoriesModal .memDetailText[data-has-text="1"]::before{
content:"REFLECTION";
display:block;
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 800;
color: rgba(255,255,255,.56);
margin-bottom: 10px;
}
.memActionSheet, .memConfirm{
position: fixed;
inset: 0;
z-index: 2147483001;
display:none;
align-items:flex-end;
justify-content:center;
padding: 16px 16px max(16px, env(safe-area-inset-bottom));
}
.memActionSheet.show, .memConfirm.show{ display:flex; }
.memActionSheetBg, .memConfirmBg{
position:absolute; inset:0;
background: rgba(0,0,0,.55);
-webkit-backdrop-filter: blur(10px) saturate(130%);
backdrop-filter: blur(10px) saturate(130%);
}
.memActionSheetPanel{
position: relative;
width: min(520px, 96vw);
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(160deg, rgba(18,10,44,.92), rgba(8,44,84,.62));
box-shadow: 0 34px 110px rgba(0,0,0,.62);
padding: 10px;
display:flex;
flex-direction: column;
gap: 8px;
z-index: 1;
}
.memASBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
border-radius: 16px;
padding: 14px 14px;
font-size: 15px;
font-weight: 800;
letter-spacing: -.01em;
cursor:pointer;
text-align:center;
box-shadow: 0 14px 36px rgba(0,0,0,.22);
-webkit-tap-highlight-color: transparent;
transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.memASBtn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); transform: translateY(-1px); filter: brightness(1.03); }
.memASBtn:active{ transform: translateY(0) scale(.99); }
.memASBtn.destructive{
border-color: rgba(255,80,80,.26);
background: rgba(255,60,60,.10);
color: rgba(255,170,170,.96);
}
.memASBtn.cancel{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
margin-top: 4px;
}
.memASBtn[disabled]{
opacity: .45;
cursor:not-allowed;
transform:none;
}
.memConfirm{ align-items:center; }
.memConfirmCard{
position:relative;
width: min(420px, 92vw);
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(160deg, rgba(18,10,44,.94), rgba(8,44,84,.64));
box-shadow: 0 40px 140px rgba(0,0,0,.66);
padding: 18px 16px 16px;
z-index: 1;
}
.memConfirmTitle{
font-size: 18px;
font-weight: 900;
letter-spacing: -.018em;
margin: 0 0 6px;
}
.memConfirmText{
font-size: 14px;
color: rgba(255,255,255,.76);
line-height: 1.55;
margin: 0 0 14px;
}
.memConfirmActions{
display:flex;
gap: 10px;
justify-content:flex-end;
flex-wrap: wrap;
}
.memConfirmBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
border-radius: 16px;
padding: 12px 14px;
font-size: 14px;
font-weight: 900;
cursor:pointer;
box-shadow: 0 14px 34px rgba(0,0,0,.22);
transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.memConfirmBtn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); transform: translateY(-1px); filter: brightness(1.03); }
.memConfirmBtn:active{ transform: translateY(0) scale(.99); }
.memConfirmBtn.destructive{
border-color: rgba(255,80,80,.26);
background: rgba(255,60,60,.10);
color: rgba(255,170,170,.96);
}
@media (max-width: 720px){
#memoriesModal .memDetailBody{
gap: 12px !important;
}
#memoriesModal .memDetailCard{
width: min(340px, 88vw) !important;
max-height: 44svh !important;
height: auto !important;
aspect-ratio: 2 / 3 !important;
align-self: center !important;
border-radius: 18px !important;
}
#memoriesModal .memDetailCard img{
object-fit: contain !important;
border-radius: 18px !important;
}
#memoriesModal .memDetailText{
height: auto !important;
min-height: 22svh !important;
max-height: none !important;
}
}
@media (hover:none) and (pointer:coarse){
#memoriesModal .memDetailActions{ position: relative; padding-bottom: 14px; }
#memoriesModal .memDetailMore::after{
content:"";
position:absolute;
left:50%;
bottom:-14px;
transform: translateX(-50%);
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
color: rgba(255,255,255,.53);
pointer-events:none;
}
}
#memoriesModal .memDetailText[data-overflow="1"]{
position: relative;
}
#memoriesModal .memDetailText[data-overflow="1"]::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height: 30px;
background: linear-gradient(180deg, transparent, rgba(10,12,24,.75));
pointer-events:none;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}

/* === original inline style block 030; id: ow-moonlit-journal-bottom-sheet-v297; original line: 9330 === */
@media (min-width: 736px){
#memoriesModal .memDetailBody.memDetailBodySheet{
display:flex !important;
flex-direction: row !important;
gap: 18px !important;
align-items: stretch !important;
height: 100% !important;
min-height: 0 !important;
position: relative !important;
}
#memoriesModal .memDetailMain{
flex: 0 0 auto !important;
height: 100% !important;
width: auto !important;
aspect-ratio: 2 / 3 !important;
min-width: 0 !important;
display:flex !important;
align-items: stretch !important;
}
#memoriesModal .memJournalSheet{
position: relative !important;
flex: 1 1 auto !important;
height: 100% !important;
overflow: visible !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
#memoriesModal .memJournalGrab{ display:none !important; }
#memoriesModal .memJournalInner{ height: 100% !important; padding: 0 !important; }
#memoriesModal .memJournalInner .memDetailText{
height: 100% !important;
min-height: 0 !important;
overflow: auto !important;
}
}
@media (max-width: 735px){
#memoriesModal{ --owSheetInset: 10px; }
#memoriesModal .memoriesDetailPane{
overflow: hidden !important;
display:flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
#memoriesModal .memDetailBody.memDetailBodySheet{
flex: 1 1 auto !important;
min-height: 0 !important;
position: relative !important;
overflow: hidden !important;
padding: 0 !important;
}
#memoriesModal .memDetailMain{
height: 100% !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 6px var(--owSheetInset, 10px) calc(var(--owSheetMin, 148px) + var(--owSheetInset, 10px) + 14px) !important;
}
#memoriesModal .memDetailCard{
width: min(340px, 88vw) !important;
max-height: 42svh !important;
height: auto !important;
aspect-ratio: 2 / 3 !important;
align-self: center !important;
margin: 6px auto 0 !important;
border-radius: 18px !important;
}
#memoriesModal .memDetailCard img{
object-fit: contain !important;
border-radius: 18px !important;
}
#memoriesModal .memJournalSheet{
position: absolute !important;
left: var(--owSheetInset, 10px) !important;
right: var(--owSheetInset, 10px) !important;
bottom: var(--owSheetInset, 10px) !important;
height: var(--sheetH, var(--owSheetMin, 148px)) !important;
border-radius: 22px 22px 18px 18px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background:
radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(180deg, rgba(18,16,38,.74), rgba(10,12,24,.92)) !important;
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 -16px 40px rgba(0,0,0,.36) !important;
overflow: hidden !important;
display:flex !important;
flex-direction: column !important;
will-change: height;
}
#memoriesModal .memJournalSheet.snap{
transition: height .28s cubic-bezier(.18,1,.28,1);
}
#memoriesModal .memJournalSheet.dragging{
transition: none !important;
}
#memoriesModal .memJournalGrab{
padding: 10px 14px 8px !important;
touch-action: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
#memoriesModal .memJournalHandle{
width: 42px;
height: 5px;
border-radius: 99px;
margin: 0 auto 8px;
background: rgba(255,255,255,.28);
box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
#memoriesModal .memJournalTitleRow{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
#memoriesModal .memJournalTitle{
font-size: 10px;
letter-spacing: .18em;
font-weight: 900;
color: rgba(255,255,255,.62);
}
#memoriesModal .memJournalHint{
font-size: 11px;
font-weight: 850;
color: rgba(255,255,255,.47);
letter-spacing: -.01em;
}
#memoriesModal .memJournalInner{
flex: 1 1 auto !important;
min-height: 0 !important;
padding: 0 12px calc(12px + env(safe-area-inset-bottom)) !important;
overflow: hidden !important;
}
#memoriesModal .memJournalInner .memDetailText{
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
#memoriesModal .memJournalInner .memDetailText{
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 8px 6px !important;
}
#memoriesModal .memJournalInner .memDetailText[data-has-text="1"]::before{
content: none !important;
display: none !important;
}
#memoriesModal .memJournalSheet[data-state="collapsed"] .memDetailText[data-overflow="1"]::after{
content:"";
position: sticky;
bottom: 0;
display:block;
height: 30px;
margin-top: -30px;
background: linear-gradient(180deg, transparent, rgba(10,12,24,.92));
pointer-events:none;
}
}

/* === original inline style block 031; id: ow-moonlit-archive-threepane-overrides-v301; original line: 9499 === */
#memoriesModal .memoriesPanel{border-color:rgba(255,255,255,.10) !important;}#memoriesModal .memoriesHeader{border-bottom-color:rgba(255,255,255,.08) !important;}#memoriesModal .memoriesCalPane,#memoriesModal .memoriesJournalPane{border-color:rgba(255,255,255,.10) !important;}#memoriesModal .memoriesClose,#memoriesModal .memDetailMore{border-color:rgba(255,255,255,.10) !important;background:rgba(255,255,255,.06) !important;}#memoriesModal .memDetailCard{border-color:rgba(255,255,255,.10) !important;}@media (max-width:735px){#memoriesModal .memoriesDetailPane{overflow-y:auto !important;overflow-x:hidden !important;display:block !important;}#memoriesModal .memDetailBody.memDetailBodySheet{position:static !important;overflow:visible !important;padding:0 !important;}#memoriesModal .memDetailMain{height:auto !important;overflow:visible !important;padding:10px 10px 14px !important;}#memoriesModal .memoriesJournalPane .memJournalSheet{left:10px !important;right:10px !important;bottom:10px !important;}#memoriesModal .memoriesJournalPane .memJournalInner{overflow:auto !important;-webkit-overflow-scrolling:touch;}}

/* === original inline style block 032; id: ow-moonlit-archive-card-journal-fullheight-v302; original line: 9500 === */
@media (max-width:735px){#memoriesModal .memDetailActions{display:none !important;}#memoriesModal .memDetailMore{display:none !important;}#memoriesModal .memDetailMore::after{content:none !important;display:none !important;}#memoriesModal .memoriesDetailPane{overflow:hidden !important;display:flex !important;flex-direction:column !important;min-height:0 !important;}#memoriesModal .memDetailTop{position:relative !important;top:auto !important;margin:0 0 10px !important;}#memoriesModal .memDetailBody.memDetailBodySheet{flex:1 1 auto !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;}#memoriesModal .memDetailMain{flex:1 1 auto !important;min-height:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:12px 12px 16px !important;overflow:hidden !important;}#memoriesModal .memDetailCard{height:100% !important;max-height:100% !important;width:auto !important;max-width:92vw !important;min-width:0 !important;border-radius:22px !important;}#memoriesModal .memDetailCard img{width:100% !important;height:100% !important;object-fit:contain !important;border-radius:22px !important;}#memoriesModal .memoriesJournalPane{overflow:hidden !important;}#memoriesModal .memJournalPaneBody{padding:0 !important;overflow:hidden !important;}#memoriesModal .memoriesJournalPane #memJournalSheet{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;height:100% !important;max-height:100% !important;width:auto !important;margin:10px 10px 12px !important;border-radius:22px !important;will-change:auto !important;transition:none !important;}#memoriesModal .memoriesJournalPane #memJournalGrab{display:none !important;}#memoriesModal .memoriesJournalPane #memJournalInner{flex:1 1 auto !important;min-height:0 !important;padding:14px 14px calc(14px+env(safe-area-inset-bottom)) !important;overflow:hidden !important;}#memoriesModal .memoriesJournalPane #memJournalInner .memDetailText{height:100% !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;padding:0 !important;}#memoriesModal .memDetailTop,#memoriesModal .memJournalTop{border-color:rgba(255,255,255,.08) !important;}}

/* === original inline style block 033; id: ow-moonlit-archive-quiet-lux-v303; original line: 9501 === */
#memoriesModal .memoriesBg{background:radial-gradient(900px 520px at 50% 30%,rgba(155,116,255,.14),transparent 60%),radial-gradient(900px 520px at 10% 90%,rgba(255,205,120,.07),transparent 58%),rgba(0,0,0,.56) !important;-webkit-backdrop-filter:blur(18px) saturate(150%) !important;backdrop-filter:blur(18px) saturate(150%) !important;}#memoriesModal .memoriesPanel{border-color:rgba(255,255,255,.10) !important;background:rgba(12,10,26,.52) !important;-webkit-backdrop-filter:blur(28px) saturate(165%) !important;backdrop-filter:blur(28px) saturate(165%) !important;box-shadow:0 34px 120px rgba(0,0,0,.58) !important;}#memoriesModal .memoriesPanel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:radial-gradient(900px 420px at 50% 0%,rgba(255,255,255,.10),transparent 62%),radial-gradient(820px 520px at 0% 100%,rgba(155,116,255,.10),transparent 66%),radial-gradient(820px 520px at 100% 100%,rgba(255,205,120,.07),transparent 66%);opacity:.50;}#memoriesModal .memoriesPanel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%20viewBox%3D%270%200%20220%20220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.75%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.45%27%2F%3E%3C%2Fsvg%3E");background-size:220px 220px;}#memoriesModal .memoriesPanel>*{position:relative;z-index:1;}#memoriesModal .memoriesHeader{border-bottom-color:rgba(255,255,255,.07) !important;background:rgba(255,255,255,.02) !important;-webkit-backdrop-filter:blur(16px) saturate(150%) !important;backdrop-filter:blur(16px) saturate(150%) !important;}#memoriesModal .memoriesClose{border-color:rgba(255,255,255,.10) !important;background:rgba(255,255,255,.05) !important;box-shadow:0 10px 22px rgba(0,0,0,.18) !important;}#memoriesModal .memoriesClose:hover{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.14) !important;}#memoriesModal .memoriesSeg{padding:3px !important;gap:4px !important;border-color:rgba(255,255,255,.08) !important;background:rgba(248,241,232,.042) !important;-webkit-backdrop-filter:blur(18px) saturate(165%) !important;backdrop-filter:blur(18px) saturate(165%) !important;box-shadow:0 10px 26px rgba(0,0,0,.18) !important;}#memoriesModal .memSegBtn{padding:8px 6px !important;font-size:11px !important;letter-spacing:.10em !important;font-weight:850 !important;color:rgba(255,255,255,.62) !important;}#memoriesModal .memSegBtn[aria-selected="true"]{color:rgba(255,255,255,.94) !important;border-color:rgba(255,255,255,.10) !important;background:rgba(255,255,255,.095) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 14px rgba(0,0,0,.16) !important;}@media (max-width:735px){#memoriesModal .memoriesBody{position:relative !important;padding:10px !important;}#memoriesModal .memoriesCalPane,#memoriesModal .memoriesDetailPane,#memoriesModal .memoriesJournalPane{border:0 !important;box-shadow:none !important;background:transparent !important;border-radius:0 !important;padding:10px !important;}#memoriesModal .memoriesBody::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:rgba(255,255,255,.06);border-radius:999px;pointer-events:none;opacity:.9;}#memoriesModal .memDetailTop,#memoriesModal .memJournalTop{border:0 !important;background:transparent !important;box-shadow:none !important;padding:10px 2px 8px !important;margin:0 0 8px !important;}#memoriesModal .memDetailKicker{font-size:10px !important;letter-spacing:.14em !important;color:rgba(255,255,255,.52) !important;}#memoriesModal .memDetailDate{font-size:22px !important;font-weight:820 !important;letter-spacing:-.02em !important;}#memoriesModal .memDetailRealmPill{border-color:rgba(255,255,255,.10) !important;background:rgba(255,255,255,.05) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;}#memoriesModal .memDetailCard{border:0 !important;background:transparent !important;}#memoriesModal .memDetailCard img{box-shadow:0 16px 44px rgba(0,0,0,.42) !important;}#memoriesModal .memoriesJournalPane #memJournalSheet{border:1px solid rgba(255,255,255,.08) !important;background:rgba(12,10,24,.40) !important;-webkit-backdrop-filter:blur(24px) saturate(165%) !important;backdrop-filter:blur(24px) saturate(165%) !important;box-shadow:0 18px 60px rgba(0,0,0,.34) !important;overflow:hidden !important;position:relative !important;}#memoriesModal .memoriesJournalPane #memJournalSheet::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%20viewBox%3D%270%200%20220%20220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.75%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.45%27%2F%3E%3C%2Fsvg%3E");background-size:220px 220px;}#memoriesModal .memDetailText{border:0 !important;background:transparent !important;box-shadow:none !important;}#memoriesModal .memDetailText[data-has-text="1"]::before{color:rgba(255,255,255,.52) !important;}#memoriesModal .memJournalPanePlaceholder{border-style:solid !important;border-color:rgba(255,255,255,.08) !important;background:rgba(255,255,255,.03) !important;font-style:normal !important;opacity:.92;}}#memoriesModal .memoriesTitle{text-shadow:none !important;}

/* === original inline style block 034; id: orawhale-ios-premium-daystreak-v306; original line: 9502 === */
.memoriesLauncher{ margin-bottom: 26px !important; }
.imStreakBanner{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
align-self: flex-start !important;
justify-self: start !important;
place-self: start stretch !important;
height: auto !important;
min-height: 0 !important;
margin-top: 18px !important;
padding: 14px 16px !important;
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background:
radial-gradient(900px 240px at 20% 0%, rgba(155,116,255,.08), transparent 62%),
radial-gradient(900px 260px at 82% 100%, rgba(255,205,120,.05), transparent 64%),
linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.022)) !important;
backdrop-filter: blur(22px) saturate(170%) !important;
-webkit-backdrop-filter: blur(22px) saturate(170%) !important;
box-shadow:
0 18px 52px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.imStreakLeft{
display:flex !important;
align-items:center !important;
gap: 12px !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
.imStreakOrb{
width: 46px !important;
height: 46px !important;
border-radius: 999px !important;
font-size: 20px !important;
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,.88), rgba(180,150,255,.55) 38%, rgba(255,205,120,.22) 72%, rgba(255,255,255,0) 92%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.12),
0 12px 30px rgba(0,0,0,.38) !important;
}
.imStreakCount{
font-size: 22px !important;
font-weight: 980 !important;
letter-spacing: -.02em !important;
}
.imStreakLabel{
font-size: 11px !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.56) !important;
}
.imStreakMini{
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
font-size: 14px !important;
line-height: 1.45 !important;
color: rgba(255,255,255,.80) !important;
align-self: flex-start !important;
}
.imStreakSecondary{
display:block;
margin-top: 6px;
font-size: 13px;
line-height: 1.35;
color: rgba(255,255,255,.60);
}
.imStreakActions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
flex: 0 0 auto !important;
margin-left: auto !important;
}
.imStreakBtn.gold{
border-radius: 18px !important;
padding: 10px 14px !important;
font-size: 14px !important;
font-weight: 900 !important;
letter-spacing: -.01em !important;
background:
linear-gradient(135deg, rgba(255,205,120,.78), rgba(155,116,255,.62)) !important;
color: rgba(14,8,32,.96) !important;
border: 1px solid rgba(255,205,120,.22) !important;
box-shadow:
0 16px 44px rgba(0,0,0,.26),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
@media (max-width: 640px){
.imStreakBanner{
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto !important;
justify-items: stretch !important;
align-items: start !important;
gap: 12px !important;
padding: 16px 14px !important;
}
.imStreakActions{
margin-left: 0 !important;
justify-content: flex-start !important;
width: 100% !important;
}
.imStreakBtn.gold{
width: 100% !important;
text-align: center !important;
padding: 12px 14px !important;
}
#imStreakDots{ display:none !important; }
}

/* === original inline style block 035; id: orawhale-ios-premium-profile-v304; original line: 9617 === */
@media (max-width: 820px){
.profileModal{
padding: 0 !important;
align-items: flex-end !important;
justify-content: center !important;
}
.profileCard{
width: 100vw !important;
height: 100svh !important;
max-height: 100svh !important;
border-radius: 26px 26px 0 0 !important;
border: 1px solid rgba(255,255,255,.10) !important;
background:
radial-gradient(900px 300px at 20% 0%, rgba(155,116,255,.12), transparent 62%),
radial-gradient(900px 360px at 80% 100%, rgba(255,205,120,.07), transparent 62%),
rgba(10,8,24,.88) !important;
box-shadow: 0 -28px 96px rgba(0,0,0,.72) !important;
}
.profileTop{
padding: calc(12px + env(safe-area-inset-top)) 14px 12px !important;
position: sticky !important;
top: 0 !important;
z-index: 5 !important;
background: rgba(10,8,24,.52) !important;
border-bottom: 1px solid rgba(255,255,255,.10) !important;
backdrop-filter: blur(22px) saturate(160%) !important;
-webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}
.profileClose{
width: 38px !important;
height: 38px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
.profileBody{
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 12px 12px calc(14px + env(safe-area-inset-bottom)) !important;
max-height: calc(100svh - 64px) !important;
overflow: auto !important;
}
.profileNav{
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.profileNavTop{
padding: 14px 14px 12px !important;
border-radius: 20px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.035) !important;
backdrop-filter: blur(18px) saturate(155%) !important;
-webkit-backdrop-filter: blur(18px) saturate(155%) !important;
margin-bottom: 12px !important;
}
.pillRow{ gap: 10px !important; }
.pillBtn{
flex: 1 1 0 !important;
justify-content: center !important;
padding: 11px 12px !important;
}
.profileNavList{
gap: 0 !important;
border-radius: 20px !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.03) !important;
}
.profileNavItem{
border: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
border-radius: 0 !important;
background: transparent !important;
padding: 14px 14px !important;
box-shadow: none !important;
}
.profileNavItem:last-child{ border-bottom: 0 !important; }
.profileNavItem:hover{ transform: none !important; }
.profileNavItem[aria-selected="true"]{
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.08) !important;
}
.profileMain{
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.03) !important;
backdrop-filter: blur(18px) saturate(155%) !important;
-webkit-backdrop-filter: blur(18px) saturate(155%) !important;
box-shadow: 0 18px 54px rgba(0,0,0,.34) !important;
padding: 14px !important;
}
.pSectionTitle{ font-size: 24px !important; letter-spacing: -.015em !important; }
.pCard{
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(0,0,0,.18) !important;
box-shadow: none !important;
}
#profileModal .profileCard,
#profileModal .profileBody,
#profileModal .profileMain,
#profileModal .pCard{
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#profileModal .profileBody,
#profileModal .profileMain{
overflow-x: hidden !important;
}
#profileModal .pTable{
display: block !important;
width: 100% !important;
min-width: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
#profileModal .pTable thead{
display: none !important;
}
#profileModal .pTable tbody{
display: grid !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
}
#profileModal .pTable tbody tr.pBillingRow{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(116px, auto) !important;
grid-template-areas:
"date status"
"plan documents"
"amount documents" !important;
row-gap: 8px !important;
column-gap: 14px !important;
width: 100% !important;
min-width: 0 !important;
padding: 13px !important;
box-sizing: border-box !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.035) !important;
}
#profileModal .pTable tbody tr.pBillingRow td{
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
#profileModal .pTable tbody tr.pBillingRow td::before{
content: attr(data-label);
display: block;
font-size: 10px;
line-height: 1.2;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.46);
}
#profileModal .pTable tbody tr.pBillingRow td:nth-child(1){ grid-area: date; }
#profileModal .pTable tbody tr.pBillingRow td:nth-child(2){ grid-area: plan; }
#profileModal .pTable tbody tr.pBillingRow td:nth-child(3){ grid-area: amount; }
#profileModal .pTable tbody tr.pBillingRow td:nth-child(4){
grid-area: status;
align-items: flex-end;
text-align: right;
}
#profileModal .pTable tbody tr.pBillingRow td:nth-child(5){
grid-area: documents;
align-items: flex-end;
text-align: right;
justify-self: end;
align-self: start;
margin-top: 2px !important;
gap: 5px !important;
}
#profileModal .pTable tbody tr.pBillingRow .pBillingDocumentBtn{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
max-width: 100% !important;
min-height: 36px !important;
padding: 0 14px !important;
white-space: nowrap !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
border-radius: 999px !important;
box-shadow: none !important;
text-decoration: none !important;
}
#profileModal .pTable tbody tr.pBillingEmpty{
display: block !important;
width: 100% !important;
min-width: 0 !important;
padding: 14px !important;
box-sizing: border-box !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.035) !important;
}
#profileModal .pTable tbody tr.pBillingEmpty td{
display: block !important;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
white-space: normal !important;
}
body[data-ui-mode="dawn"] #profileModal .pTable{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body[data-ui-mode="dawn"] #profileModal .pTable tbody tr.pBillingRow,
body[data-ui-mode="dawn"] #profileModal .pTable tbody tr.pBillingEmpty{
background: linear-gradient(180deg, rgba(235,231,239,.78), rgba(226,222,232,.70)) !important;
border-color: rgba(166,151,174,.24) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
}
body[data-ui-mode="dawn"] #profileModal .pTable tbody tr.pBillingRow td::before{
color: rgba(111,104,118,.86) !important;
}
}

/* === original inline style block 036; id: orawhale-daystreak-premium-v322; original line: 9849 === */
#imStreakDots{ display:none !important; }
.imStreakBanner{
margin-top: 18px !important;
padding: 16px 18px !important;
border-radius: 26px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background:
radial-gradient(900px 260px at 18% 0%, rgba(170,140,255,.10), transparent 62%),
radial-gradient(900px 260px at 86% 110%, rgba(255,210,135,.06), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)) !important;
-webkit-backdrop-filter: blur(22px) saturate(165%) !important;
backdrop-filter: blur(22px) saturate(165%) !important;
box-shadow:
0 20px 58px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.10) !important;
display:flex !important;
align-items:center !important;
gap: 16px !important;
flex-wrap: nowrap !important;
}
.imStreakLeft{
flex: 0 0 auto !important;
display:flex !important;
align-items:center !important;
gap: 12px !important;
}
.imStreakOrb{
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
font-size: 19px !important;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), rgba(190,165,255,.52) 38%, rgba(255,210,135,.18) 74%, rgba(255,255,255,0) 92%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.14),
0 14px 34px rgba(0,0,0,.36) !important;
}
.imStreakCount{
font-size: 22px !important;
line-height: 1.05 !important;
font-weight: 980 !important;
letter-spacing: -.02em !important;
background: linear-gradient(125deg, rgba(255,214,140,.92), rgba(176,146,255,.88)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
.imStreakLabel{
font-size: 11px !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.56) !important;
}
.imStreakMini{
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
max-width: 620px !important;
font-size: 14px !important;
line-height: 1.42 !important;
color: rgba(255,255,255,.76) !important;
text-wrap: balance;
}
.imStreakMini strong{ color: rgba(255,255,255,.92) !important; }
.imStreakLine2{
display:block;
margin-top: 2px;
color: rgba(255,255,255,.70);
}
.imStreakActions{
flex: 0 0 auto !important;
margin-left: auto !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
}
.imStreakBtn{
height: 36px !important;
padding: 0 14px !important;
border-radius: 999px !important;
font-size: 13.5px !important;
font-weight: 850 !important;
letter-spacing: -.01em !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.92) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease !important;
}
.imStreakBtn:hover{
transform: translateY(-1px) !important;
background: rgba(255,255,255,.09) !important;
border-color: rgba(255,255,255,.20) !important;
}
.imStreakBtn.gold{
background: linear-gradient(135deg, rgba(255,214,140,.70), rgba(176,146,255,.56)) !important;
color: rgba(14,10,26,.94) !important;
border-color: rgba(255,255,255,.10) !important;
box-shadow:
0 12px 30px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.imStreakBtn.gold:hover{ filter: brightness(1.04) !important; }
@media (max-width: 640px){
.imStreakBanner{
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"left"
"mini"
"actions" !important;
align-items: start !important;
gap: 14px !important;
padding: 16px !important;
border-radius: 22px !important;
}
.imStreakLeft{ grid-area: left !important; }
.imStreakMini{ grid-area: mini !important; font-size: 13.5px !important; width: 100% !important; }
.imStreakActions{
grid-area: actions !important;
margin-left: 0 !important;
width: 100% !important;
justify-content: stretch !important;
}
.imStreakBanner .imStreakBtn,
.imStreakBanner .imStreakBtn.gold,
.imStreakBanner #imRecapBtn{
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 52px !important;
padding: 14px 16px !important;
font-size: 16px !important;
text-align: center !important;
justify-content: center !important;
}
.imStreakBtn.gold{ box-shadow: 0 10px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.18) !important; }
}

/* === original inline style block 037; id: no-id; original line: 9989 === */
.journal-edit-panel{
padding:28px 24px 32px 24px !important;
border-radius:28px;
background:linear-gradient(180deg, rgba(18,16,48,.92), rgba(10,8,28,.96));
box-shadow:
0 40px 80px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}
.tags-title,
.section-title-tags,
.tags-header,
.tags-label{
display:block;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
margin-bottom:12px;
line-height:1.6;
overflow:visible !important;
}
.tags-container,
.tags,
.tags-section{
overflow:visible !important;
padding-top:4px;
}
.tag-chip{
border-radius:18px;
padding:8px 14px;
font-size:13px;
backdrop-filter:blur(10px);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
transition:all .18s ease;
}
.tag-chip:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.20);
}
.mood-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(82px,1fr));
gap:14px;
margin-top:8px;
}
.mood-chip{
border-radius:22px;
padding:14px 10px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(12px);
transition:all .18s ease;
}
.mood-chip:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.10);
}
.editor-shell{
margin-top:20px;
border-radius:26px;
padding:18px 20px 22px;
background:linear-gradient(180deg, rgba(14,12,36,.95), rgba(6,5,20,.96));
border:1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 30px 60px rgba(0,0,0,.55);
}
.editor-toolbar{
padding:10px 8px;
border-bottom:1px solid rgba(255,255,255,.08);
margin-bottom:10px;
}
.editor-shell textarea,
.editor-shell [contenteditable]{
font-size:16px;
line-height:1.65;
color:rgba(255,255,255,.94);
}
@media (max-width:700px){
.journal-edit-panel{
padding:24px 18px 28px;
}
.editor-shell{
border-radius:22px;
}
}

/* === original inline style block 038; id: no-id; original line: 10079 === */
.tagsSection, .moodSection, .tagsWrapAr, .moodWrapAr, .tags-container, .mood-container, .journalEditWrap, .journalEditCard{
overflow: visible !important;
}
.owSectionLabel{
line-height: 2.0 !important;
padding-top: 8px !important;
margin-top: -2px !important;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
#memoriesModal .journalEditorWrap,
.arArchiveEditorRoot > .journalEditorWrap{
margin-top: 34px !important;
}
#journalSection .journalEditorWrap,
.journalMetaCard > .journalEditorWrap{
margin-top: 0 !important;
}
.journalEditor,
.editor-shell,
.editorShell,
.owEditorShell{
margin-top: 34px !important;
}
.tagsWrapAr, .moodWrapAr{
gap: 10px !important;
}
.journalEditCard, .journal-edit-panel, .journalEditWrap{
padding-top: 22px !important;
}

/* === original inline style block 039; id: ow-v375-memory-editor-order-spacing; original line: 10111 === */
#memoriesModal .arArchiveEditorRoot{
gap: 0 !important;
}
#memoriesModal .arArchiveEditorRoot > .journalEditorWrap{
order: 1 !important;
margin-top: 0 !important;
margin-bottom: 18px !important;
}
#memoriesModal .arArchiveEditorRoot > .arTagsSection{
order: 2 !important;
margin-bottom: 18px !important;
}
#memoriesModal .arArchiveEditorRoot > .arMoodSection{
order: 3 !important;
margin-bottom: 18px !important;
}
#memoriesModal .arArchiveEditorRoot > .memDetailEditorActions{
order: 4 !important;
margin-top: 8px !important;
}
#memoriesModal .memEntryTagsRow{
margin-bottom: 22px !important;
}
@media (max-width: 640px){
#memoriesModal .arArchiveEditorRoot > .journalEditorWrap{
margin-bottom: 20px !important;
}
#memoriesModal .arArchiveEditorRoot > .arTagsSection{
margin-bottom: 20px !important;
}
#memoriesModal .arArchiveEditorRoot > .arMoodSection{
margin-bottom: 20px !important;
}
#memoriesModal .memEntryTagsRow{
margin-bottom: 24px !important;
}
}

/* === original inline style block 040; id: ow-v378-otd-and-journal-fixes; original line: 10150 === */
.journalRichContent:empty::before{
white-space: pre-wrap !important;
}
.imOTDEntryTags{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:8px !important;
margin-top:10px !important;
}
.imOTDEntryMood{
margin:0 !important;
flex:0 0 auto !important;
}
.imOTDEntryTagPill{
gap:0 !important;
}
.imOTDEntryTagPill .otdTEmoji{
display:none !important;
}
.imOTDEntryTagPill .otdTHash{
margin-right:2px !important;
}

/* === original inline style block 041; id: ow-v380-otd-safe-layout-fix; original line: 10175 === */
.imOTDEntrySnippet{
margin-bottom: 10px !important;
}
.imOTDEntryMood,
.imOTDEntryTags{
display: inline-flex !important;
vertical-align: middle !important;
margin-top: 0 !important;
}
.imOTDEntryMood{
margin-right: 10px !important;
}
.imOTDEntryTags{
flex-wrap: wrap !important;
gap: 8px !important;
}
.imOTDEntryTagPill .otdTHash{
margin-right: 1px !important;
}

/* === original inline style block 042; id: orawhale-v425-fixes; original line: 10196 === */
.grid.gridMineralTop{
grid-template-columns: 1fr !important;
}
.grid.gridMineralBottom{
grid-template-columns: 1fr 1fr !important;
}
#journalSection .journalEditorWrap,
.journalMetaCard > .journalEditorWrap,
.arArchiveEditorRoot > .journalEditorWrap,
#memoriesModal .journalEditorWrap{
overflow: visible !important;
}
.jrtEmojiPicker,
#jrtEmojiPicker{
z-index: 10020 !important;
}
#journalSection .journalRichContent,
#journalRichContent{
position: relative;
z-index: 1;
}
#journalSection .journalRichContent:focus,
#journalRichContent:focus{
box-shadow: inset 0 0 0 1px rgba(155,116,255,.38) !important;
border-color: transparent !important;
}
#journalSaveHint{
display: none !important;
}
.imStreakMini strong,
.imStreakMini .imStreakPrimary{
display: block;
}
.imStreakMini .imStreakLine2,
.imStreakMini .imStreakSecondary,
.imStreakMini br.imStreakMobBr{
display: block;
margin-top: 2px;
}

/* === original inline style block 043; id: orawhale-v428-journal-focus-fix; original line: 10237 === */
#journalSection .journalMetaCard:focus,
#journalSection .journalMetaCard:focus-visible,
#journalSection .journalMetaCard:focus-within,
#journalSection .journalEditorWrap:focus,
#journalSection .journalEditorWrap:focus-visible,
#journalSection .journalEditorWrap:focus-within,
#journalSection .journalEditorBlock:focus,
#journalSection .journalEditorBlock:focus-visible,
#journalSection .journalEditorBlock:focus-within,
#journalSection .journalRichToolbar:focus,
#journalSection .journalRichToolbar:focus-visible,
#journalSection #journalRichToolbar:focus,
#journalSection #journalRichToolbar:focus-visible{
outline: none !important;
box-shadow: none !important;
}
#journalSection .journalMetaCard,
#journalSection .journalEditorWrap,
#journalSection .journalEditorBlock{
overflow: visible !important;
}
#journalSection .journalRichContent,
#journalSection #journalRichContent{
outline: none !important;
}
#journalSection .journalRichContent:focus,
#journalSection #journalRichContent:focus,
#journalSection .journalRichContent:focus-visible,
#journalSection #journalRichContent:focus-visible{
outline: none !important;
box-shadow: inset 0 0 0 1px rgba(155,116,255,.36) !important;
}

/* === original inline style block 044; id: orawhale-v430-memory-journal-focus-fix; original line: 10271 === */
#memoriesModal .journalMetaCard:focus,
#memoriesModal .journalMetaCard:focus-visible,
#memoriesModal .journalMetaCard:focus-within,
#memoriesModal .journalEditorWrap:focus,
#memoriesModal .journalEditorWrap:focus-visible,
#memoriesModal .journalEditorWrap:focus-within,
#memoriesModal .journalEditorBlock:focus,
#memoriesModal .journalEditorBlock:focus-visible,
#memoriesModal .journalEditorBlock:focus-within,
#memoriesModal .memDetailText:focus,
#memoriesModal .memDetailText:focus-visible,
#memoriesModal .memDetailText:focus-within,
#memoriesModal .memJournalInner:focus,
#memoriesModal .memJournalInner:focus-visible,
#memoriesModal .memJournalInner:focus-within,
#memoriesModal .journalRichToolbar:focus,
#memoriesModal .journalRichToolbar:focus-visible,
#memoriesModal .journalRichToolbar:focus-within,
#memoriesModal .journalRichContent:focus-visible{
outline: none !important;
box-shadow: none !important;
}
#memoriesModal .journalRichContent{
outline: none !important;
position: relative;
z-index: 1;
}
#memoriesModal .journalRichContent:focus,
#memoriesModal .journalRichContent:focus-visible{
outline: none !important;
box-shadow: inset 0 0 0 1px rgba(155,116,255,.36) !important;
border-color: transparent !important;
}

/* === original inline style block 045; id: orawhale-v433-targeted-dark-panels; original line: 10306 === */
#mainHeader,
.page > .header{
background:
radial-gradient(1200px 420px at 50% -6%, rgba(255,255,255,.08), transparent 62%),
radial-gradient(900px 320px at 18% 18%, rgba(155,116,255,.08), transparent 64%),
radial-gradient(900px 320px at 82% 82%, rgba(84,126,255,.07), transparent 66%),
linear-gradient(180deg, rgba(18,16,38,.94), rgba(10,18,46,.92)) !important;
border-color: rgba(255,255,255,.10) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.03) inset,
0 16px 44px rgba(0,0,0,.24) !important;
}
.cursorWidget{
border-color: rgba(255,255,255,.10) !important;
background:
radial-gradient(900px 220px at 22% 0%, rgba(255,205,120,.06), transparent 58%),
radial-gradient(900px 240px at 78% 100%, rgba(155,116,255,.08), transparent 60%),
linear-gradient(135deg, rgba(38,34,72,.82), rgba(28,38,74,.74)) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.03) inset,
0 10px 28px rgba(0,0,0,.18) !important;
}
.cursorWidgetTitle{ color: rgba(255,255,255,.92) !important; }
.cursorWidgetSub{ color: rgba(255,255,255,.58) !important; }
.ritualMain .stage,
.ritualMain .oracle{
background:
radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.035), transparent 58%),
radial-gradient(760px 280px at 80% 100%, rgba(78,116,255,.06), transparent 62%),
linear-gradient(180deg, rgba(10,11,30,.96), rgba(7,16,42,.94)) !important;
border-color: rgba(255,255,255,.09) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.025) inset,
0 18px 50px rgba(0,0,0,.24) !important;
}
.ritualMain .stage .hint.premiumHint.oracleHint,
.ritualMain .oracle .hint.premiumHint.oracleHint,
.ritualMain .stage .card,
.ritualMain .oracle .panel,
.ritualMain .oracle .oracleCard,
.ritualMain .oracle .box{
background:
radial-gradient(800px 220px at 50% 0%, rgba(255,255,255,.04), transparent 62%),
linear-gradient(135deg, rgba(16,14,40,.88), rgba(8,22,54,.82)) !important;
border-color: rgba(255,255,255,.10) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.025) inset,
0 10px 30px rgba(0,0,0,.18) !important;
}
.ritualMain .stage::before,
.ritualMain .oracle::before{
color: rgba(255,255,255,.72) !important;
}
#actionsChapter{
background:
radial-gradient(1000px 220px at 50% 0%, rgba(255,255,255,.035), transparent 60%),
linear-gradient(135deg, rgba(28,24,54,.88), rgba(13,26,58,.80)) !important;
border-color: rgba(255,255,255,.10) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.03) inset,
0 12px 32px rgba(0,0,0,.16) !important;
}
#actionsChapter .chapterKicker{ color: rgba(255,255,255,.64) !important; }
#actionsChapter .chapterTitle{ color: rgba(255,255,255,.96) !important; }
#actionsChapter .chapterSub{ color: rgba(255,255,255,.70) !important; }
.imStreakBanner,
.imStreakBar{
border-color: rgba(255,255,255,.11) !important;
background:
radial-gradient(720px 160px at 14% 0%, rgba(255,205,120,.07), transparent 56%),
radial-gradient(720px 180px at 84% 100%, rgba(155,116,255,.08), transparent 58%),
linear-gradient(135deg, rgba(8,10,28,.96), rgba(7,20,50,.93)) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.028) inset,
0 16px 36px rgba(0,0,0,.24) !important;
}
.imStreakLabel{ color: rgba(255,255,255,.72) !important; }
.imStreakMini{ color: rgba(255,255,255,.82) !important; }
.imStreakSecondary{ color: rgba(255,255,255,.62) !important; }

/* === original inline style block 046; id: ow-v435-patch; original line: 10387 === */
body{
background-color: #04030d !important;
}
#imBaseBg{
filter: brightness(.58) saturate(.88) contrast(1.05) !important;
}
body::before{
opacity: .94 !important;
filter: brightness(.72) saturate(.92) drop-shadow(0 22px 52px rgba(0,0,0,.28)) !important;
}
body::after{
opacity: .34 !important;
}
.elementTint{
opacity: .28 !important;
}
.imStreakBanner,
.imStreakBar{
border-color: rgba(255,255,255,.11) !important;
background:
radial-gradient(720px 160px at 14% 0%, rgba(255,205,120,.09), transparent 56%),
radial-gradient(720px 180px at 84% 100%, rgba(155,116,255,.10), transparent 58%),
linear-gradient(135deg, rgba(14,12,38,.90), rgba(9,24,58,.86)) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.03) inset,
0 16px 36px rgba(0,0,0,.24) !important;
}

/* === original inline style block 047; id: ow-v436-panel-harmony; original line: 10416 === */
.memoriesLauncher,
.imStreakBanner,
.imStreakBar{
border-color: rgba(255,255,255,.11) !important;
background:
radial-gradient(720px 160px at 14% 0%, rgba(255,205,120,.09), transparent 56%),
radial-gradient(720px 180px at 84% 100%, rgba(155,116,255,.10), transparent 58%),
linear-gradient(135deg, rgba(14,12,38,.90), rgba(9,24,58,.86)) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.03) inset,
0 16px 36px rgba(0,0,0,.24) !important;
}

/* === original inline style block 048; id: im-v437-header-memories-tune; original line: 10430 === */
.memoriesLauncher{
background:
radial-gradient(900px 240px at 18% 0%, rgba(155,116,255,.13), transparent 62%),
radial-gradient(900px 260px at 82% 100%, rgba(255,205,120,.08), transparent 60%),
linear-gradient(180deg, rgba(9,12,38,.86), rgba(8,11,34,.82)) !important;
}
.memoriesLauncherKicker{
display:inline-flex !important;
align-items:center !important;
gap:16px !important;
}
.memoriesLauncherIcon{
width:44px; height:44px;
border-radius:999px;
display:inline-flex; align-items:center; justify-content:center;
font-size:19px;
line-height:1;
color: rgba(255,236,188,.96);
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), rgba(255,221,168,.62) 34%, rgba(190,165,255,.48) 68%, rgba(255,255,255,0) 92%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.14),
0 14px 34px rgba(0,0,0,.36) !important;
flex: 0 0 auto;
}
#mainHeader{
background:
radial-gradient(900px 340px at 50% 0%, rgba(255,205,120,.05), transparent 60%),
radial-gradient(1200px 560px at 50% 100%, rgba(108,80,255,.08), transparent 70%),
linear-gradient(180deg, rgba(14,16,50,.90) 0%, rgba(10,12,40,.92) 58%, rgba(8,10,34,.94) 100%) !important;
}
#mainHeader::before{
content:"";
position:absolute; inset:0; pointer-events:none;
background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22));
z-index:0;
}
#shootingStarsCanvas, .shootingStarsCanvas{
opacity:.74 !important;
filter: saturate(108%) contrast(110%) brightness(1.06) !important;
}
#mainHeader > *:not(.shootingStarsCanvas){ position: relative; z-index: 1; }

/* === original inline style block 049; id: ow-v448-dream-guardian-clean; original line: 10474 === */
.memoriesLauncherIcon.memoriesDreamGuardian{
position: relative;
width: 44px !important;
height: 44px !important;
border-radius: 999px;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto;
background:
radial-gradient(circle at 32% 26%,
rgba(255,255,255,.90),
rgba(255,228,186,.54) 34%,
rgba(172,151,238,.42) 70%,
rgba(255,255,255,0) 94%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.14),
0 12px 28px rgba(0,0,0,.34) !important;
overflow: visible;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
}
.memoriesDreamGuardian .mdgMoon{
font-size: 24px;
line-height: 1;
color: rgba(255,239,198,.96);
transform: translate(-2px, 1px);
display: block;
}
.memoriesDreamGuardian .mdgStar{
position: absolute;
top: 8px;
right: 8px;
font-size: 10px;
line-height: 1;
color: rgba(255,248,228,.96);
text-shadow: 0 0 10px rgba(255,244,214,.30);
}

/* === original inline style block 050; id: no-id; original line: 10515 === */
.journalCardName{
display: none !important;
}

/* === original inline style block 051; id: orawhale-ui-elevation-v1; original line: 10520 === */
:root{
--ow-space-1: 8px;
--ow-space-2: 16px;
--ow-space-3: 24px;
--ow-space-4: 32px;
--ow-space-5: 40px;
--ow-space-6: 48px;
--ow-space-7: 64px;
--ow-hero-size: clamp(38px, 4.2vw, 56px);
--ow-panel-head-size: clamp(28px, 2.5vw, 34px);
--ow-section-size: clamp(22px, 1.9vw, 26px);
--ow-step-size: clamp(20px, 1.6vw, 22px);
--ow-body-size: 16px;
--ow-meta-size: 13px;
--ow-button-size: 18px;
--ow-grad-hero: linear-gradient(135deg, #f2ddb0 0%, #c8bbff 48%, #94dceb 100%);
}
body[data-ui-mode="moon"]{
--ow-bg-app:#07111A;
--ow-bg-surface: rgba(14,24,36,.74);
--ow-bg-card: rgba(18,29,43,.78);
--ow-bg-elevated: rgba(24,36,52,.88);
--ow-text-primary:#F4F7FB;
--ow-text-secondary:rgba(228,236,245,.78);
--ow-text-tertiary:rgba(214,224,236,.58);
--ow-border-soft:rgba(255,255,255,.08);
--ow-border-medium:rgba(255,255,255,.12);
--ow-border-strong:rgba(255,255,255,.18);
--ow-shadow-soft:0 2px 10px rgba(0,0,0,.14);
--ow-shadow-medium:0 12px 32px rgba(0,0,0,.22);
--ow-shadow-elevated:0 22px 56px rgba(0,0,0,.34);
--ow-shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);
--ow-hover-bg: rgba(255,255,255,.05);
--ow-focus-ring: rgba(203,184,255,.38);
--ow-accent-gold:#E7C98B;
--ow-accent-lilac:#CBB8FF;
--ow-accent-cyan:#8ED7E8;
--ow-grad-cta: linear-gradient(135deg, #e8d2a0 0%, #bca9ff 54%, #8fd6e5 100%);
}
body[data-ui-mode="dawn"]{
--ow-bg-app:#F6F3EE;
--ow-bg-surface: rgba(255,252,247,.84);
--ow-bg-card: rgba(255,255,255,.88);
--ow-bg-elevated: rgba(250,246,241,.96);
--ow-text-primary:#1E2430;
--ow-text-secondary:rgba(44,54,70,.78);
--ow-text-tertiary:rgba(63,74,92,.58);
--ow-border-soft:rgba(114,122,142,.10);
--ow-border-medium:rgba(114,122,142,.16);
--ow-border-strong:rgba(114,122,142,.22);
--ow-shadow-soft:0 2px 8px rgba(79,64,47,.06);
--ow-shadow-medium:0 12px 28px rgba(79,64,47,.10);
--ow-shadow-elevated:0 22px 54px rgba(79,64,47,.14);
--ow-shadow-inset: inset 0 1px 0 rgba(255,255,255,.60);
--ow-hover-bg: rgba(66,76,96,.05);
--ow-focus-ring: rgba(162,140,223,.34);
--ow-accent-gold:#c9a15f;
--ow-accent-lilac:#a088d8;
--ow-accent-cyan:#7fbbcb;
--ow-grad-hero: linear-gradient(135deg, #c9a15f 0%, #a088d8 45%, #7fbbcb 100%);
--ow-grad-cta: linear-gradient(135deg, #d8bc86 0%, #b29ae2 56%, #93c9d3 100%);
}
body{
color: var(--ow-text-primary) !important;
background: linear-gradient(180deg, var(--ow-bg-app), color-mix(in srgb, var(--ow-bg-app) 82%, black 18%)) !important;
}
body[data-ui-mode="dawn"]{
background: linear-gradient(180deg, #faf7f1 0%, #f0ece5 100%) !important;
}
body[data-ui-mode="dawn"] #imBaseBg{ opacity:.62; filter: saturate(.86) brightness(1.08); }
body[data-ui-mode="dawn"] .elementTint{ opacity:.16; mix-blend-mode:multiply; }
body[data-ui-mode="dawn"]::after{ opacity:.16; }
body[data-ui-mode="dawn"]::before{ opacity:.38 !important; filter: blur(.2px) saturate(.78); }
.header{
padding: var(--ow-space-4) var(--ow-space-4) var(--ow-space-3) !important;
border-radius: 32px !important;
border: 1px solid var(--ow-border-soft) !important;
background:
radial-gradient(800px 220px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(180deg, color-mix(in srgb, var(--ow-bg-surface) 82%, transparent), color-mix(in srgb, var(--ow-bg-card) 88%, transparent)) !important;
box-shadow: var(--ow-shadow-elevated), var(--ow-shadow-inset) !important;
backdrop-filter: blur(18px) saturate(126%) !important;
}
body[data-ui-mode="dawn"] .header{
background:
radial-gradient(840px 220px at 50% 0%, rgba(255,255,255,.66), transparent 68%),
linear-gradient(180deg, rgba(255,252,247,.82), rgba(255,255,255,.72)) !important;
}
.logo{ opacity:.90 !important; }
.ow-wordmark{
color: var(--ow-text-primary) !important;
font-size: clamp(40px, 4vw, 52px) !important;
font-weight: 680 !important;
letter-spacing: -.03em !important;
}
.ow-tagline{
color:rgba(210,214,230,.64)!important;
letter-spacing: .18em !important;
}
.title{
font-size: var(--ow-hero-size) !important;
font-weight: 680 !important;
letter-spacing: -.04em !important;
line-height: 1.04 !important;
color: var(--ow-text-primary) !important;
text-wrap: balance;
}
.heroHook, .sub{
font-size: clamp(18px, 1.5vw, 21px) !important;
line-height: 1.45 !important;
color: var(--ow-text-secondary) !important;
font-weight: 450 !important;
letter-spacing: -.015em !important;
}
.dateLine{
font-size: var(--ow-meta-size) !important;
color: var(--ow-text-tertiary) !important;
letter-spacing: .16em !important;
margin-top: var(--ow-space-2) !important;
margin-bottom: 0 !important;
}
.heroCtaWrap{ margin: var(--ow-space-3) auto var(--ow-space-2) !important; }
.heroCtaBtn, #pickBtn, .btnPrimary{
background: var(--ow-grad-cta) !important;
color: #1a1428 !important;
border: 1px solid rgba(255,255,255,.22) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.heroCtaBtn{
min-height: 56px !important;
padding: 0 28px !important;
font-size: var(--ow-button-size) !important;
font-weight: 700 !important;
letter-spacing: -.015em !important;
}
.ow-theme-switch{
margin: var(--ow-space-2) auto 0;
display:flex;
justify-content:center;
}
.ow-theme-switch-inner{
display:inline-flex;
gap: 6px;
padding: 6px;
border-radius: 999px;
border:1px solid var(--ow-border-soft);
background: color-mix(in srgb, var(--ow-bg-card) 72%, transparent);
box-shadow: var(--ow-shadow-soft), var(--ow-shadow-inset);
backdrop-filter: blur(12px) saturate(120%);
}
.ow-theme-btn{
appearance:none; border:0; cursor:pointer;
min-height: 38px; padding: 0 16px; border-radius: 999px;
background: transparent; color: var(--ow-text-secondary);
font: 600 13px/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
.ow-theme-btn.is-active{
background: var(--ow-grad-cta);
color:#1a1428;
box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.28);
}
.cursorWidget,
.ritualStrip .ritualPanel,
#panelZodiac,#panelRealm,#panelDraw,#panelJournal,
.stage,.oracle,.journalSection,.memoriesLauncher,
#actionsChapter,.zodiacInterpShell,.shareCard,.intentCard,
.tile,.premiumHint,.hint,.chapter{
border: 1px solid var(--ow-border-soft) !important;
background:
radial-gradient(140% 55% at 50% 0%, rgba(255,255,255,.10) 0%, transparent 66%),
linear-gradient(180deg, color-mix(in srgb, var(--ow-bg-card) 88%, transparent), color-mix(in srgb, var(--ow-bg-surface) 92%, transparent)) !important;
box-shadow: var(--ow-shadow-medium), var(--ow-shadow-inset) !important;
}
body[data-ui-mode="dawn"] .cursorWidget,
body[data-ui-mode="dawn"] .ritualStrip .ritualPanel,
body[data-ui-mode="dawn"] #panelZodiac,
body[data-ui-mode="dawn"] #panelRealm,
body[data-ui-mode="dawn"] #panelDraw,
body[data-ui-mode="dawn"] #panelJournal,
body[data-ui-mode="dawn"] .stage,
body[data-ui-mode="dawn"] .oracle,
body[data-ui-mode="dawn"] .journalSection,
body[data-ui-mode="dawn"] .memoriesLauncher,
body[data-ui-mode="dawn"] #actionsChapter,
body[data-ui-mode="dawn"] .zodiacInterpShell,
body[data-ui-mode="dawn"] .shareCard,
body[data-ui-mode="dawn"] .intentCard,
body[data-ui-mode="dawn"] .tile,
body[data-ui-mode="dawn"] .premiumHint,
body[data-ui-mode="dawn"] .hint,
body[data-ui-mode="dawn"] .chapter{
background:
radial-gradient(140% 55% at 50% 0%, rgba(255,255,255,.62) 0%, transparent 66%),
linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,246,241,.90)) !important;
}
.ritualStrip{ gap: var(--ow-space-3) !important; margin-top: var(--ow-space-5) !important; }
.ritualPanelTop{ padding: var(--ow-space-3) var(--ow-space-4) var(--ow-space-2) !important; }
.ritualPanelBody{ padding: var(--ow-space-3) var(--ow-space-4) var(--ow-space-4) !important; gap: var(--ow-space-2) !important; }
.ritualStepLabel, .stepBadge, .chapterKicker, .tileTitle, .cursorWidgetSub, .todayRitualPill, .hintPill{
font-size: var(--ow-meta-size) !important;
font-weight: 600 !important;
letter-spacing: .1em !important;
color: var(--ow-text-tertiary) !important;
}
.ritualPanelTitle, .hintTitle{
font-size: var(--ow-step-size) !important;
font-weight: 620 !important;
line-height: 1.25 !important;
letter-spacing: -.025em !important;
background: var(--ow-grad-hero) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color: transparent !important;
}
.ritualPanelSub, .panelJournalHint, .cursorWidgetTitle, .oracleDesc, .tileText, .hintSub, .sharePreview, .todayRitualPrompt, .zodiacInterpPreviewText, .zodiacInterpTierText, .chapterSub{
font-size: var(--ow-body-size) !important;
line-height: 1.6 !important;
letter-spacing: -.01em !important;
color: var(--ow-text-secondary) !important;
}
.cursorWidgetTitle{ font-weight: 620 !important; }
.cursorWidgetSub{ font-style: normal !important; }
.cursorSelectLux, .cursorSelectPill, .chip, .zodiacBigBtn, #zodiacPill, .btn, .chapterBtn, .sharePill{
font-size: 15px !important;
letter-spacing: -.01em !important;
font-weight: 620 !important;
border-radius: 16px !important;
}
.btn, .chapterBtn, .sharePill, .chip, .cursorSelectLux{
background: color-mix(in srgb, var(--ow-bg-elevated) 84%, transparent) !important;
color: var(--ow-text-primary) !important;
border: 1px solid var(--ow-border-medium) !important;
box-shadow: var(--ow-shadow-soft), var(--ow-shadow-inset) !important;
}
body[data-ui-mode="dawn"] .btn,
body[data-ui-mode="dawn"] .chapterBtn,
body[data-ui-mode="dawn"] .sharePill,
body[data-ui-mode="dawn"] .chip,
body[data-ui-mode="dawn"] .cursorSelectLux{
background: rgba(255,255,255,.78) !important;
}
.btn:hover, .chapterBtn:hover, .sharePill:hover, .chip:hover, .cursorSelectLux:hover{
background: color-mix(in srgb, var(--ow-hover-bg) 68%, var(--ow-bg-elevated)) !important;
border-color: var(--ow-border-strong) !important;
}
#pickBtn{
font-size: var(--ow-button-size) !important;
min-height: 56px !important;
font-weight: 700 !important;
letter-spacing: -.015em !important;
}
.oracleTitle, .shareTitle, .paywallTitle, .imLockTitle, .imSetPasscodeTitle{
font-size: var(--ow-panel-head-size) !important;
font-weight: 650 !important;
letter-spacing: -.03em !important;
line-height: 1.18 !important;
background: var(--ow-grad-hero) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color: transparent !important;
}
.chapterTitle, #actionsChapter .chapterTitle, .journalSectionTitle, .memDetailDate{
font-size: var(--ow-section-size) !important;
font-weight: 620 !important;
letter-spacing: -.025em !important;
line-height: 1.25 !important;
color: var(--ow-text-primary) !important;
}
#actionsChapter .chapterHeader{
grid-template-columns: minmax(0,1fr) auto !important;
gap: var(--ow-space-3) !important;
padding: var(--ow-space-3) var(--ow-space-4) !important;
align-items: center !important;
}
#actionsChapter .chapterSub{
margin-top: 6px !important;
max-width: 34ch !important;
color: var(--ow-text-secondary) !important;
}
#actionsChapterActions .actions.actionsPremium{
display:flex !important;
flex-wrap:nowrap !important;
gap: var(--ow-space-2) !important;
}
#actionsChapterActions .btn,
.oracle .actions.actionsPremium .btn{
height: 52px !important;
padding: 0 20px !important;
border-radius: 18px !important;
font-size: 16px !important;
font-weight: 620 !important;
background: var(--ow-grad-cta) !important;
color:#1a1428 !important;
border-color: rgba(255,255,255,.22) !important;
white-space: nowrap !important;
}
#actionsChapterActions .btn .btnIcon,
.oracle .actions.actionsPremium .btn .btnIcon{ font-size: 16px !important; }
.todayRitual,
.shareCardImgWrap,
.zodiacInterpPreviewNote,
.zodiacInterpLocked,
.tierCore,
.tier,
.zodiacInterpTier,
.attrItem,
.metaPill,
.metaPillSoft{
background: color-mix(in srgb, var(--ow-bg-elevated) 82%, transparent) !important;
border: 1px solid var(--ow-border-soft) !important;
box-shadow: var(--ow-shadow-soft), var(--ow-shadow-inset) !important;
}
body[data-ui-mode="dawn"] .todayRitual,
body[data-ui-mode="dawn"] .shareCardImgWrap,
body[data-ui-mode="dawn"] .zodiacInterpPreviewNote,
body[data-ui-mode="dawn"] .zodiacInterpLocked,
body[data-ui-mode="dawn"] .tierCore,
body[data-ui-mode="dawn"] .tier,
body[data-ui-mode="dawn"] .zodiacInterpTier,
body[data-ui-mode="dawn"] .attrItem,
body[data-ui-mode="dawn"] .metaPill,
body[data-ui-mode="dawn"] .metaPillSoft{
background: rgba(255,255,255,.78) !important;
}
.zodiacInterpLockedTitle,.zodiacInterpPreviewTitle{ color: var(--ow-text-primary) !important; }
.zodiacInterpTheme,.zodiacInterpStatusPill,.zodiacInterpLockedKicker,.zodiacInterpPreviewKicker,.zodiacInterpTierLock{
color: color-mix(in srgb, var(--ow-accent-gold) 75%, var(--ow-text-primary)) !important;
}
.stage::before, .oracle::before{
color: var(--ow-text-tertiary) !important;
background: color-mix(in srgb, var(--ow-bg-card) 84%, transparent) !important;
border: 1px solid var(--ow-border-soft) !important;
}
:focus-visible{ outline: 3px solid var(--ow-focus-ring) !important; outline-offset: 3px !important; }
@media (max-width: 980px){
.header{ padding: var(--ow-space-4) var(--ow-space-3) var(--ow-space-3) !important; }
.ritualStrip{ gap: var(--ow-space-2) !important; }
.ritualPanelTop{ padding: var(--ow-space-3) var(--ow-space-3) var(--ow-space-2) !important; }
.ritualPanelBody{ padding: var(--ow-space-3) var(--ow-space-3) var(--ow-space-3) !important; }
#actionsChapter .chapterHeader{ grid-template-columns:1fr !important; align-items:flex-start !important; }
#actionsChapterActions .actions.actionsPremium{ width:100%; flex-wrap:wrap !important; }
#actionsChapterActions .btn{ flex: 1 1 220px !important; }
}
@media (max-width: 640px){
.ow-wordmark{ font-size: 36px !important; }
.title{ font-size: clamp(32px, 9vw, 42px) !important; }
.heroHook, .sub{ font-size: 17px !important; }
.heroCtaBtn, #pickBtn{ font-size: 17px !important; }
.cursorWidget{ padding: var(--ow-space-2) !important; }
}