/*
  OraWhale Day 2 CSS extraction: 00-foundation.css
  Source: FinalWebpage/index.html style blocks 1-3
  Purpose: Original global foundation, typography, main shell, first luxury pass
  Do not reorder before launch. Cascade order is intentional.
*/

/* === original inline style block 001; id: no-id; original line: 196 === */
:root{
--bg0:#070614; --bg1:#0c0a24;
--ink:rgba(255,255,255,.94);
--muted:rgba(255,255,255,.78);
--line:rgba(255,255,255,.16);
--shadow:rgba(0,0,0,.35);
--fs-caption2:  11px;
--fs-caption1:  12px;
--fs-footnote:  13px;
--fs-subhead:   15px;
--fs-body:      15px;
--fs-callout:   16px;
--fs-title3:    20px;
--fs-title2:    24px;
--fs-title1:    clamp(26px, 2.8vw, 34px);
--fs-hero:      clamp(30px, 3.8vw, 48px);
--lh-tight:  1.20;
--lh-snug:   1.38;
--lh-normal: 1.55;
--lh-loose:  1.68;
--panel-bg:
radial-gradient(ellipse 140% 55% at 50% 0%,
rgba(255,255,255,.09) 0%, transparent 65%),
linear-gradient(168deg, rgba(22,12,52,.88) 0%, rgba(8,38,76,.64) 100%);
--panel-border: rgba(255,255,255,.13);
--panel-shadow:
0 22px 60px rgba(0,0,0,.36),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -1px 0 rgba(0,0,0,.14);
--panel-radius: 26px;
--panel-blur: blur(24px) saturate(150%);
--title-grad: linear-gradient(125deg,
rgba(255,208,124,.96)  0%,
rgba(168,128,255,.92) 52%,
rgba(140,218,255,.82) 100%);
--h1:   var(--fs-hero);
--h2:   var(--fs-title1);
--body: var(--fs-body);
--lh:   var(--lh-normal);
--logoUrl: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Logo.png");
--baseBgUrl: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Base.png");
--overlayPlant: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Plant_Overlay.png");
--overlayAnimal: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Animal_Overlay.png");
--overlayMineral: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Mineral_Overlay.png");
--overlayMushroom: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Mushroom_Overlay.png");
--overlayPlantDawn: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Plant_Overlay_dawn.png");
--overlayAnimalDawn: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Animal_Overlay_dawn.png");
--overlayMushroomDawn: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Mushroom_Overlay_dawn.png");
--overlayMineralDawn: url("https://pub-76c695379bfc4e90bbbc818f2daa25f1.r2.dev/OraWhale_Background_Mineral_Overlay_dawn.png");
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; color:var(--ink);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: var(--fs-body);
line-height: var(--lh-normal);
letter-spacing: -.012em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: linear-gradient(180deg, var(--bg0), var(--bg1));
overflow-x:hidden;
}
#imBaseBg{
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
background:
radial-gradient(1200px 800px at 18% 14%, rgba(155,116,255,.18), transparent 60%),
radial-gradient(1200px 800px at 82% 14%, rgba(255,205,120,.12), transparent 62%),
radial-gradient(1200px 800px at 50% 96%, rgba(140,220,255,.08), transparent 58%),
var(--baseBgUrl) center/cover no-repeat;
transform: translateZ(0);
will-change: transform;
}
body{transition: opacity .16s ease;}
html.im-preload body{opacity:0;}
body::before, body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:1;}
body::before{opacity:.94; background: var(--overlayPlant) center/cover no-repeat; filter: drop-shadow(0 22px 52px rgba(0,0,0,.25));}
body::after{
opacity:.45;
background:
radial-gradient(1px 1px at 10% 16%, rgba(255,255,255,.35), transparent 55%),
radial-gradient(1px 1px at 22% 76%, rgba(255,255,255,.28), transparent 55%),
radial-gradient(1px 1px at 34% 28%, rgba(255,255,255,.30), transparent 55%),
radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,.26), transparent 55%),
radial-gradient(1px 1px at 78% 74%, rgba(255,255,255,.32), transparent 55%),
radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,.28), transparent 55%);
mix-blend-mode: normal;
}
body[data-theme="animal"]::before{ background-image: var(--overlayAnimal); opacity:.78; }
body[data-theme="mineral"]::before{ background-image: var(--overlayMineral); opacity:.80; }
body[data-theme="mushroom"]::before{ background-image: var(--overlayMushroom); opacity:.80; }
body[data-theme="plant"]::before{ background-image: var(--overlayPlant); opacity:.94; }
@media (pointer:fine){
body.use-feather-cursor, body.use-feather-cursor *{ cursor:none !important; }
body.use-feather-cursor{ cursor:none; }
.cursor-feather{display:block; position:fixed; width:46px; height:auto; z-index:999999; pointer-events:none;
transform: translate3d(-50%,-50%,0) rotate(-18deg);
filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
opacity:.92; will-change: transform;
backface-visibility: hidden; -webkit-transform: translate3d(-50%,-50%,0) rotate(-18deg);
}
}
body.owAnnualCursorFastMode #cursorFeather,
body.owAnnualCursorFastMode .cursor-feather{
filter: none !important;
width: 40px !important;
opacity: .98 !important;
}
@media (prefers-reduced-motion: reduce){
.cursor-feather{ display:none !important; }
body.use-feather-cursor{ cursor:auto; }
}
.page{position:relative; z-index:3; margin:0 auto;}
.header{border-radius:26px; border:1px solid var(--line);
background: linear-gradient(135deg, rgba(30,18,66,.58), rgba(16,88,130,.28)),
radial-gradient(900px 240px at 50% 0%, rgba(255,255,255,.14), transparent 70%);
backdrop-filter: blur(10px);
transform: translateZ(0);
isolation: isolate;
box-shadow: 0 18px 54px var(--shadow);
padding:18px 18px 16px; text-align:center;
}
.logo{width:min(360px, 82vw); height:128px; margin:0 auto 8px;
background: var(--logoUrl) center/contain no-repeat;
filter: drop-shadow(0 18px 30px rgba(0,0,0,.30));
}
.calligraphyBrand{
display:block;
margin: 6px auto 10px;
max-width: 560px;
width: 82%;
height:auto;
filter:
drop-shadow(0 16px 36px rgba(0,0,0,.35))
drop-shadow(0 0 22px rgba(155,116,255,.25));
pointer-events:none;
user-select:none;
}
.brandWord{
margin: 6px auto 8px;
font-size: clamp(44px, 5.3vw, 78px);
font-weight: 800;
letter-spacing: -.04em;
line-height: 1.02;
text-align:center;
background: linear-gradient(135deg, rgba(255,205,120,.98), rgba(155,116,255,.92), rgba(140,220,255,.78));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 10px 28px rgba(0,0,0,.35),
0 0 34px rgba(155,116,255,.22),
0 0 26px rgba(255,205,120,.14);
filter: drop-shadow(0 16px 30px rgba(0,0,0,.28));
}
.brandWord .spark{
display:inline-block;
transform: translateY(-6px);
font-size: .52em;
opacity:.92;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
.dateLine{font-size: clamp(16px, 2vw, 22px); color: rgba(255,255,255,.86); margin-bottom: 6px;}
.kicker{display:none; margin: 2px 0 2px; font-size: clamp(12px, 1.4vw, 14px); letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.72);}
.title{font-size: var(--h1); font-weight: 860; line-height:1.04; margin: 4px 0 8px;}
.sub{margin:0 auto; max-width: 900px; font-size: var(--body); line-height: var(--lh); color: var(--muted);}
.themeRow{margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.themeWrap{ margin-top: 14px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.themeWrap .themeRow{ margin-top: 0; }
.realmNudgeWrap{
display:flex; align-items:center; gap:10px;
padding: 0;
border-radius: 999px;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: blur(10px);
}
.realmNudgeLabel{
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 950;
opacity: .82;
}
.realmNudgeBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.18);
background: linear-gradient(135deg, rgba(255,205,120,.90), rgba(155,116,255,.80), rgba(140,220,255,.65));
color: rgba(18,10,28,.98);
font-weight: 950;
padding: 8px 12px;
border-radius: 999px;
cursor:pointer;
white-space: nowrap;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
transition: transform .12s ease, filter .12s ease;
}
.nudgeArrow{ display:none;
display:inline-block;
width: 18px;
height: 10px;
margin-left: 8px;
position: relative;
transform: translateY(1px);
opacity: .95;
filter: drop-shadow(0 8px 16px rgba(0,0,0,.22));
}
.nudgeArrow::before{
content:"";
position:absolute;
left:0; right:4px;
top:50%;
height:2px;
transform: translateY(-50%);
border-radius: 999px;
background: rgba(18,10,28,.92);
opacity: .9;
}
.nudgeArrow::after{
content:"";
position:absolute;
right:0;
top:50%;
width: 7px;
height: 7px;
border-right: 2px solid rgba(18,10,28,.92);
border-top: 2px solid rgba(18,10,28,.92);
transform: translateY(-50%) rotate(45deg);
border-radius: 1px;
opacity: .9;
}
.cursorCtl{
display:flex;
align-items:center;
gap:10px;
padding:0 6px;
}
.cursorNudgeBtn{
padding: 8px 12px;
font-size: 13px;
letter-spacing: .01em;
}
.cursorSelectPill{
min-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 999px;
}
.realmNudgeBtn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.chip.nudgePulse{ animation: nudgePulse 1.15s ease-in-out 1; }
@keyframes nudgePulse{
0%{ transform: translateY(0); box-shadow: none; }
35%{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
100%{ transform: translateY(0); box-shadow: none; }
}
.cursorCtl span{
opacity: .96 !important;
font-weight: 950 !important;
}
@media (max-width: 640px){
.themeWrap{ justify-content: stretch; }
.realmNudgeWrap{ width: 100%; justify-content: space-between; }
.themeWrap .themeRow{ justify-content: flex-start; }
}
.chip{border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92);
border-radius: 999px; padding: 10px 14px; font-weight: 760; cursor:pointer; user-select:none;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
.chip[aria-pressed="true"]{background: linear-gradient(135deg, rgba(255,205,120,.45), rgba(155,116,255,.35));
border-color: rgba(255,255,255,.26);
}
.ritualBar{margin-top:16px; padding:14px; border-radius:22px; border:1px solid var(--line);
background: linear-gradient(135deg, rgba(155,116,255,.24), rgba(255,205,120,.16));
backdrop-filter: blur(10px);
box-shadow: 0 16px 44px var(--shadow);
display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.ritualText{flex: 1 1 420px; font-size: var(--body); line-height: var(--lh); color: rgba(255,255,255,.90);}
.btn{appearance:none; border:1px solid rgba(255,255,255,.20); background: rgba(34, 14, 74, .92); color: rgba(255,255,255,.96);
font-size: 16.5px; padding: 13px 16px; border-radius: 18px; font-weight: 780; cursor:pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); }
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}
.btnPrimary{background: linear-gradient(135deg, rgba(255,205,120,.90), rgba(155,116,255,.80)); color: rgba(20, 10, 36, .94);}
.shell{margin-top:18px; border-radius: 28px; border:1px solid var(--line);
background: linear-gradient(135deg, rgba(22, 14, 54, .56), rgba(8, 64, 92, .28));
backdrop-filter: blur(10px);
box-shadow: 0 22px 68px rgba(0,0,0,.28);
overflow:hidden;
}
.promptBar{
margin: 16px 16px 0;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.16);
background: linear-gradient(135deg, rgba(255,205,120,.14), rgba(155,116,255,.16));
color: rgba(255,255,255,.94);
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.6;
box-shadow: 0 14px 36px rgba(0,0,0,.20);
}
.promptBar strong{ font-weight: 900; }
.content{display:grid; grid-template-columns: 1.05fr .95fr; gap:16px; padding:16px; align-items:start;}
@media (max-width: 980px){ .content{ grid-template-columns:1fr; } }
.stage{
position:relative;
border-radius:22px;
border:1px solid rgba(255,255,255,.16);
background: linear-gradient(135deg, rgba(255,205,120,.12), rgba(155,116,255,.18));
padding:48px 18px 18px;
min-height: clamp(110px, 15vh, 190px);
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 16px 46px rgba(0,0,0,.22);
overflow:hidden;
}
.stage::before{
content:"YOUR CARD";
position:absolute;
top:14px;
left:16px;
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:900;
color: rgba(255,255,255,.70);
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background: rgba(10,8,24,.24);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
.hint{text-align:center; max-width:520px; padding:16px; border-radius:18px; border:1px solid rgba(255,255,255,.18);
background: linear-gradient(135deg, rgba(155,116,255,.26), rgba(255,205,120,.18));
color: rgba(255,255,255,.95); font-size: clamp(16px, 1.4vw, 20px); line-height: var(--lh);
box-shadow: 0 14px 36px rgba(0,0,0,.20);
}
.premiumHint{
max-width: 560px;
padding: 22px 18px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.18);
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));
backdrop-filter: blur(14px) saturate(135%);
box-shadow:
0 26px 74px rgba(0,0,0,.42),
0 0 0 1px rgba(255,255,255,.06) inset;
}
.oracleHint{
max-width: none;
width: 100%;
min-height: 100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
.oracleHint .hintPill{
margin-bottom: 10px;
}
.oracleHint .hintTitle{
font-size: clamp(24px, 2.5vw, 34px);
}
.hintPill{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.78);
margin-bottom: 12px;
}
.hintTitle{
font-size: clamp(22px, 2.0vw, 28px);
font-weight: 950;
letter-spacing: -.01em;
margin: 0 0 8px;
background: var(--title-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hintSub{
font-size: clamp(15px, 1.25vw, 18px);
line-height: 1.65;
color: rgba(255,255,255,.86);
margin: 0;
}
.hintSub strong{ font-weight: 950; color: rgba(255,255,255,.94); }
.tapGrid{ width: 100%; display:flex; flex-direction:column; gap: 12px; }
.tapRow{ display:grid; gap: 12px; width: 100%; }
.tapRow.tapRow3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.tapRow.tapRow2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.tapBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.18);
background:
radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(135deg, rgba(18,12,36,.70), rgba(10,44,72,.42));
border-radius: 20px;
padding: 14px 12px 12px;
text-align: center;
cursor: pointer;
box-shadow: 0 18px 54px rgba(0,0,0,.34);
backdrop-filter: blur(14px) saturate(135%);
transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
min-height: 108px;
}
.tapBtn:hover{ transform: translateY(-1px); filter: brightness(1.03); border-color: rgba(255,255,255,.26); }
.tapBtn:active{ transform: translateY(0) scale(.99); }
.tapBtn:focus{ outline: 3px solid rgba(255,205,120,.38); outline-offset: 3px; }
.tapTop{
display:block;
margin: 0 0 8px;
font-size: clamp(20px, 2.1vw, 28px);
font-weight: 950;
letter-spacing: -.01em;
background: var(--title-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1.1;
}
.tapBottom{
display:block;
font-size: clamp(14px, 1.2vw, 18px);
line-height: 1.65;
color: rgba(255,255,255,.86);
margin: 0;
}
@media (max-width: 980px){
.tapRow.tapRow3{ grid-template-columns: 1fr; }
.tapRow.tapRow2{ grid-template-columns: 1fr; }
.tapBtn{ min-height: 96px; }
}
@media (min-width: 981px){
.tapBtn{ min-height: 116px; }
}
.cardWrap{width:min(520px, 92%); margin: 0 auto; position:relative; cursor:pointer; user-select:none; outline:none; perspective: 900px;}
.cardWrap,
.cardWrap *{
pointer-events: auto !important;
}
.cardWrap{
position: relative;
z-index: 3;
}
.cardImg{width:100%; height:auto; display:block; border-radius: 24px; box-shadow: 0 18px 58px rgba(0,0,0,.38);
border:1px solid rgba(255,255,255,.14);
}
.pulse{ animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe{0%,100%{ transform: scale(1); } 50%{ transform: scale(1.015); } }
.clickPrompt{text-align:center; margin-top:12px; font-size: clamp(16px, 1.4vw, 20px); color: rgba(255,255,255,.90);}
.oracle{border-radius:var(--panel-radius); border:1px solid var(--panel-border); background: var(--panel-bg);
padding:16px; box-shadow: var(--panel-shadow);
}
@media (min-width: 981px){ .oracle{ position: sticky; top: 18px; } }
.oracleTitle{font-size: var(--h2); font-weight: 880; margin: 2px 0 10px;}
.oracleDesc{font-size: var(--body); line-height: var(--lh); color: rgba(255,255,255,.90); margin: 0 0 12px;}
.grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 10px;}
.gridTriad{ grid-template-columns: 1fr !important; }
.mushroomHead{
margin-top:2px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px;
color: rgba(255,255,255,.78);
}
.gridBlessWarn{
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
margin-top:12px;
}
@media (max-width: 560px){ .gridBlessWarn{ grid-template-columns:1fr; } }
.spanFull{ grid-column: 1 / -1; }
@media (max-width: 560px){ .grid{ grid-template-columns:1fr; } }
.tile{border-radius:18px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(30,18,66,.46), rgba(8,64,92,.26));
padding:12px; box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.tileTitle{font-size: 14px; font-weight: 950; letter-spacing:.7px; color: rgba(255,255,255,.92); text-transform: uppercase; margin-bottom:6px;}
.tileText{margin:0; font-size: var(--body); line-height: 1.7; color: rgba(255,255,255,.90);}
.affirmation{margin-top:18px; padding:22px 24px; border-radius:20px; border:1px solid rgba(255,255,255,.14);
background: linear-gradient(135deg, rgba(155,116,255,.18), rgba(255,205,120,.14));
font-size: clamp(17px, 1.35vw, 21px); font-weight: 860; color: rgba(255,255,255,.96);
}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.actions.actionsPremium{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: stretch;
margin-top: 14px;
}
.actions.actionsPremium .btn{
width: 100%;
height: 52px;
border-radius: 18px;
font-size: 15.5px;
font-weight: 820;
letter-spacing: .2px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.actions.actionsPremium .btn:not(.btnPrimary){
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.20);
box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.actions.actionsPremium .btn:not(.btnPrimary):hover{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.28);
}
.btnIcon{
font-size: 16px;
opacity: .92;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
transform: translateY(-.5px);
}
@media (max-width: 560px){
.actions.actionsPremium{ grid-template-columns: 1fr; }
.actions.actionsPremium .btn{ height: 50px; }
}
.actions.actionsPremium .btn{ white-space: nowrap; }
.err{margin-top:14px; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,120,120,.28);
background: rgba(140, 30, 45, .30); color: rgba(255,255,255,.92); display:none;
}
.toast{position:fixed; left:50%; bottom:20px; transform: translateX(-50%); padding:10px 14px; border-radius:14px;
border:1px solid rgba(255,255,255,.16); background: rgba(16, 10, 36, .62); color: rgba(255,255,255,.95);
font-weight: 760; box-shadow: 0 16px 40px rgba(0,0,0,.30); opacity:0; pointer-events:none;
transition: opacity .18s ease, transform .18s ease; z-index:9998;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-4px); }
.cursorCtl{ display:flex; align-items:center; gap:10px; padding:0 6px; }
.cursorCtl span{ font-weight: 850; opacity:.92; font-size: 14px; letter-spacing:.2px; }
.cursorSelect{
appearance:none;
border:1px solid rgba(255,255,255,.20);
background: rgba(34, 14, 74, .92);
color: rgba(255,255,255,.96);
font-size: 14px;
padding: 10px 12px;
border-radius: 14px;
font-weight: 760;
letter-spacing:.2px;
cursor:pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.cursorSelect:focus{ outline: 3px solid rgba(255,205,120,.40); outline-offset: 2px; }
.cursorSelect option{ background: rgba(20,10,50,.98); color: rgba(255,255,255,.96); }
@media (hover: none), (pointer: coarse){
.cursorCtl{ display:none !important; }
}
.metaRow{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:10px 0 8px;
opacity:.95;
}
.metaPill{
display:inline-flex;
gap:6px;
align-items:center;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
font-size:12px;
letter-spacing:.01em;
}
.metaPillSoft{
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.14);
}
.metaLabel{
opacity:.8;
font-weight:700;
}
.attrSection{ margin-top: 14px; }
.attrHeading{margin:6px 0 10px!important;font-size:11px!important;font-weight:850!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:rgba(255,255,255,.58)!important}
.attrGrid+.attrHeading{margin-top:18px!important}
.attrGrid{ display:grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 860px){ .attrGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
body[data-theme="animal"] .attrGrid{ grid-template-columns: 1fr; gap: 14px; }
@media (max-width: 760px){ body[data-theme="animal"] .attrGrid{ grid-template-columns: 1fr; } }
.attrSplit{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.attrPanel{ display:block; }
@media (max-width: 760px){ .attrSplit{ grid-template-columns: 1fr; } }
.attrItem{ border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
border-radius: 14px; padding: 10px 10px; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.attrTitle{ font-weight: 820; margin-bottom: 6px; font-size: 13px; line-height: 1.2; }
.attrText{ margin:0; color: rgba(255,255,255,.78); line-height: 1.4; font-size: 13px; }
.clamp2{
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow:hidden;
}
.tileText.expanded{
display:block;
-webkit-line-clamp: initial;
overflow: visible;
}
.miniLink{
appearance:none;
border:0;
background: transparent;
color: rgba(255,255,255,.86);
font-weight: 800;
letter-spacing:.2px;
padding: 6px 2px 0;
cursor:pointer;
text-decoration: underline;
text-underline-offset: 3px;
opacity:.9;
}
.miniLink:hover{ opacity:1; }
body[data-theme="animal"] .oracle{ padding:14px; }
body[data-theme="animal"] .oracleDesc{ margin: 0 0 10px; line-height: 1.65; }
body[data-theme="animal"] .metaRow{ margin: 8px 0 10px; gap:6px; }
body[data-theme="animal"] .attrSection{ margin-top: 10px; }
body[data-theme="animal"] .attrItem{ padding: 10px 10px; }
body[data-theme="animal"] .actions{ margin-top: 12px; gap:8px; }
body[data-theme="animal"] .attrTitle{
font-size: 15px;
line-height: 1.3;
font-weight: 900;
}
body[data-theme="animal"] .attrText{
font-size: 15px;
line-height: 1.7;
color: rgba(255,255,255,.92);
}
body[data-theme="animal"] .attrItem{
width: 100%;
min-height: 0;
}
body::before{
content:"";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: .82;
pointer-events: none;
z-index: 0;
filter: drop-shadow(0 22px 52px rgba(0,0,0,.25));
}
body[data-theme="plant"]::before{ background-image: var(--overlayPlant); }
body[data-theme="animal"]::before{ background-image: var(--overlayAnimal); opacity: .78; }
body[data-theme="mineral"]::before{ background-image: var(--overlayMineral); opacity: .80; }
body[data-theme="mushroom"]::before{ background-image: var(--overlayMushroom); opacity: .80; }
body[data-theme="mushroom"] .gridBlessWarn{
display: none !important;
}
body{
font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: var(--fs-body);
line-height: var(--lh-normal);
letter-spacing: -.012em;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.chapterKicker, .memCalKicker, .memDetailKicker,
.ovKicker, .ovExcerptLabel, .calDayHeader,
.pLabel, .tileTitle, [class*="Kicker"], [class*="kicker"] {
font-size: var(--fs-caption2) !important;
letter-spacing: .12em !important;
font-weight: 600 !important;
line-height: var(--lh-snug) !important;
text-transform: uppercase !important;
}
.calDayHeader, .dateLine, .journalDateLine,
.ovExcerptLabel, .shareTitle + *, .pLabel {
font-size: var(--fs-caption1) !important;
letter-spacing: .10em !important;
font-weight: 600 !important;
}
.chapterSub, .journalSectionSub, .paywallPriceSub,
.oracleMeta {
font-size: var(--fs-footnote) !important;
letter-spacing: -.006em !important;
font-weight: 400 !important;
line-height: var(--lh-loose) !important;
}
.attrTitle {
font-size: 15px !important;
letter-spacing: -.01em !important;
font-weight: 800 !important;
line-height: 1.3 !important;
}
.attrText {
font-size: 15px !important;
letter-spacing: -.006em !important;
font-weight: 400 !important;
line-height: var(--lh-loose) !important;
}
.oracleDesc, .ovLine, .ovExcerptText, .hintSub,
.ritualText, .tierBody, .journalTextarea,
.memDetailText, .tileText, .paywallSub,
.paywallFeature, .promptBar {
font-size: var(--fs-body) !important;
letter-spacing: -.010em !important;
font-weight: 400 !important;
line-height: var(--lh-loose) !important;
}
.ovTitle + *, .shareTitle, .journalSectionSub,
.paywallTitle + * {
font-size: var(--fs-callout) !important;
letter-spacing: -.012em !important;
}
.chapterTitle, .oracleTitle, .shareTitle,
.memDetailDate, .ovTitle, .journalEntryModalDate {
font-size: var(--fs-title3) !important;
font-weight: 700 !important;
letter-spacing: -.022em !important;
line-height: var(--lh-snug) !important;
}
.memoriesTitle, .profileTitle, .paywallTitle,
.imLockTitle, .imSetPasscodeTitle {
font-size: var(--fs-title2) !important;
font-weight: 700 !important;
letter-spacing: -.028em !important;
line-height: var(--lh-tight) !important;
}
.title, h1, h2 {
font-size: var(--fs-title1) !important;
font-weight: 700 !important;
letter-spacing: -.032em !important;
line-height: var(--lh-tight) !important;
}
.oracleTitle {
font-size: clamp(22px, 2.4vw, 32px) !important;
font-weight: 800 !important;
letter-spacing: -.03em !important;
}
.btn, button, .memRealmTab, .chapterBtn,
.journalSaveBtn, .memoriesLauncherBtn,
.zodiacBigBtn, #pickBtn, .ovBtn {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: -.010em !important;
font-family: inherit !important;
line-height: 1 !important;
}
#pickBtn, .zodiacBigBtn, .journalSaveBtn, .intentActions .btn {
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: -.015em !important;
}
.journalSectionTitle {
letter-spacing: -.030em !important;
}
.affirmation {
font-size: 16.5px !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: -.018em !important;
line-height: 1.52 !important;
color: rgba(255,255,255,.96) !important;
padding: 22px 24px !important;
margin-top: 18px !important;
border-radius: 20px !important;
}
.affirmation::first-line {
letter-spacing: -.018em;
}
.tileTitle {
font-size: 10px !important;
letter-spacing: .14em !important;
font-weight: 700 !important;
}
.calDay {
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.005em !important;
}
@media (hover: none) {
textarea, input, select { font-size: 16px !important; }
}
.header{
padding: 14px 16px 12px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(18,18,28,.72), rgba(12,12,20,.58));
backdrop-filter: blur(18px) saturate(120%);
box-shadow: 0 10px 36px rgba(0,0,0,.45);
}
.logo{
width: min(200px, 55vw);
height: 70px;
margin: 0 auto 4px;
opacity: .92;
filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.calligraphyBrand{
max-width: 380px;
width: 64%;
margin: 2px auto 8px;
opacity: .88;
filter: drop-shadow(0 8px 22px rgba(0,0,0,.40));
}
.title{
font-size: clamp(32px, 4.6vw, 48px);
font-weight: 700;
letter-spacing: -.01em;
margin-top: 6px;
}
.sub{
font-size: clamp(15px, 1.3vw, 18px);
opacity: .86;
}
.header::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:
radial-gradient(600px 160px at 50% -20%, rgba(140,180,255,.14), transparent 70%);
pointer-events:none;
}
@media (max-width: 640px){
.logo{ width: 160px; height: 56px; }
.calligraphyBrand{ width: 78%; max-width: 300px; }
.title{ font-size: 28px; }
.header{ padding: 12px 12px 10px; }
}
.cardWrap.revealMagic{
filter: drop-shadow(0 26px 78px rgba(155,116,255,.62));
will-change: transform, opacity, clip-path, filter;
animation: sacredUnfurl 1.5s cubic-bezier(0.22, 0.88, 0.42, 1.02) both;
transform-origin: top center;
position: relative;
}
.cardWrap .cardMagic{
will-change: transform;
}
.cardWrap.revealMagic .cardMagic{
animation: float 4.4s ease-in-out infinite 1.5s;
}
.cardWrap.revealMagic::before{
content:"";
position:absolute;
left: 5%;
right: 5%;
top: -10px;
height: 22px;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(255,255,255,.04),
rgba(255,220,140,.28),
rgba(200,170,255,.32),
rgba(140,220,255,.20),
rgba(255,255,255,.04)
);
filter: blur(8px);
opacity: 0;
animation: crownGlow 1.8s ease-out 0.2s both;
pointer-events:none;
z-index: 2;
}
.cardWrap.revealMagic::after{
content:"";
position:absolute;
inset:-18px;
border-radius: 30px;
background:
radial-gradient(circle at 50% 20%, rgba(255,225,160,.50), transparent 52%),
radial-gradient(circle at 50% 50%, rgba(155,116,255,.40), transparent 68%),
radial-gradient(circle at 40% 42%, rgba(140,220,255,.20), transparent 60%);
filter: blur(22px);
opacity: 0;
z-index:-1;
animation: auraFadeIn 0.9s ease-out 1.0s both, auraPulse 3.2s ease-in-out infinite 1.9s;
pointer-events:none;
}
@keyframes sacredUnfurl{
0%   {
opacity: 0;
clip-path: inset(0 0 100% 0 round 24px);
transform: translateY(-28px) scale(0.96) rotateX(8deg);
filter: drop-shadow(0 0 0 rgba(255,220,160,0)) brightness(1.4);
}
8%   {
opacity: 1;
}
30%  {
clip-path: inset(0 0 62% 0 round 24px);
transform: translateY(-12px) scale(0.98) rotateX(4deg);
filter: drop-shadow(0 6px 24px rgba(255,220,160,.55)) brightness(1.18);
}
72%  {
clip-path: inset(0 0 8% 0 round 24px);
transform: translateY(3px) scale(1.004) rotateX(0deg);
filter: drop-shadow(0 20px 55px rgba(155,116,255,.55)) brightness(1.04);
}
88%  {
clip-path: inset(0 0 0 0 round 24px);
transform: translateY(-2px) scale(1.001) rotateX(0deg);
filter: drop-shadow(0 26px 78px rgba(155,116,255,.62)) brightness(1.0);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0 round 24px);
transform: translateY(0) scale(1) rotateX(0deg);
filter: drop-shadow(0 26px 78px rgba(155,116,255,.62));
}
}
@keyframes crownGlow{
0%   { opacity: 0; transform: scaleX(0.4); }
25%  { opacity: .90; transform: scaleX(1.05); }
65%  { opacity: .72; }
100% { opacity: .28; transform: scaleX(1); }
}
@keyframes auraFadeIn{
from { opacity: 0; }
to   { opacity: .78; }
}
@keyframes float{
0%,100%{ transform: translateY(0); }
50%    { transform: translateY(-10px); }
}
@keyframes auraPulse{
0%,100%{ transform: scale(.97); opacity:.66; }
50%    { transform: scale(1.06); opacity:.92; }
}
.sparkle{
position:absolute;
width: var(--s, 7px);
height: var(--s, 7px);
left: 50%;
top: 50%;
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, rgba(255,255,255,1), rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 70%);
pointer-events:none;
opacity: .95;
filter:
drop-shadow(0 0 18px rgba(255,255,255,.55))
drop-shadow(0 0 26px rgba(155,116,255,.35))
drop-shadow(0 0 22px rgba(255,205,120,.25));
animation: sparklePop 1.85s ease-out forwards;
mix-blend-mode: screen;
}
.sparkle.star{
border-radius: 2px;
transform: rotate(45deg);
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
}
.sparkle.star::before{
content:"";
position:absolute;
inset:0;
background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
}
@keyframes sparklePop{
0%   { transform: translate(0,0) scale(0); opacity:0; }
18%  { opacity:1; }
100% { transform: translate(var(--dx), var(--dy)) scale(1.25); opacity:0; }
}
.oracle{ position: relative; overflow: hidden; }
.oracleFireworks{
position:absolute; inset:0;
pointer-events:none;
border-radius: inherit;
overflow:hidden;
mix-blend-mode: screen;
}
.fw{
position:absolute;
left: var(--x,50%);
top: var(--y,35%);
width: 8px; height: 8px;
border-radius:999px;
background: radial-gradient(circle at 35% 35%, rgba(255,255,255,1), rgba(255,205,120,.70) 45%, rgba(155,116,255,0) 72%);
filter: drop-shadow(0 0 18px rgba(255,255,255,.55)) drop-shadow(0 0 26px rgba(255,205,120,.25));
transform: translate(-50%,-50%) scale(.5);
opacity:0;
animation: fwPop 1100ms ease-out forwards;
}
@keyframes fwPop{
0%{ opacity:0; transform: translate(-50%,-50%) scale(.25); }
12%{ opacity:1; }
100%{ opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.0); }
}
.cardWrap.revealMagic{
opacity: 1;
clip-path: none !important;
animation: none !important;
overflow: hidden;
border-radius: 24px;
}
.cardWrap .cardMagic{
transform-origin: top center;
backface-visibility: hidden;
will-change: transform, opacity;
transform: translateZ(0) scaleY(1);
}
.cardWrap.revealMagic .cardMagic{
animation:
unrollScale 0.85s cubic-bezier(.16,1,.3,1) both,
float 4.4s ease-in-out infinite 0.95s;
}
@keyframes unrollScale{
0%   { opacity:0; transform: translateZ(0) scaleY(0.02); }
12%  { opacity:1; }
100% { opacity:1; transform: translateZ(0) scaleY(1); }
}
@media (max-width: 640px){
.page{ padding-top: 14px; padding-bottom: 34px; }
.stage{ min-height: 360px; padding: 12px; }
.ritualBar{ padding: 12px; border-radius: 20px; }
.btn{ width: 100%; }
.ritualText{ flex: 1 1 100%; }
}
@media (max-width: 640px){
.stage{
min-height: 460px !important;
padding: 16px !important;
}
.card, .oracleCard, .panel{
transform: scale(1.04);
transform-origin: top center;
}
}
@media (max-width: 640px){
.logo{
width: 132px !important;
height: 46px !important;
margin: 0 auto 4px !important;
opacity: .95 !important;
}
.calligraphyBrand{
width: 68% !important;
max-width: 250px !important;
margin: 0 auto 8px !important;
opacity: .92 !important;
}
.title{
font-size: 26px !important;
letter-spacing: -0.02em !important;
margin: 2px 0 6px !important;
}
.sub{
font-size: 14px !important;
line-height: 1.55 !important;
opacity: .86 !important;
}
.page{
padding-top: 12px !important;
padding-bottom: 22px !important;
}
.header{
padding: 12px 12px 10px !important;
border-radius: 22px !important;
}
main, .main, .wrap, .container{
max-width: 100% !important;
}
.stage{
min-height: calc(100svh - 220px) !important;
height: calc(100svh - 220px) !important;
padding: 14px !important;
border-radius: 26px !important;
}
.stage > .card,
.stage > .panel,
.stage > .oracleCard,
.stage .card,
.stage .panel,
.stage .oracleCard{
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
border-radius: 26px !important;
transform: none !important;
}
.stage h1, .stage h2, .stage h3{
letter-spacing: -0.02em !important;
}
.stage h2, .stage h3, .stage .cardTitle, .stage .oracleTitle{
font-size: 20px !important;
line-height: 1.15 !important;
margin: 0 0 8px !important;
}
.stage p, .stage .cardText, .stage .oracleText, .stage .readingText, .stage .desc{
font-size: 16.5px !important;
line-height: 1.72 !important;
}
.stage .meta, .stage .tagline, .stage .small{
font-size: 13px !important;
opacity: .84 !important;
}
.ritualBar{
position: sticky !important;
bottom: 12px !important;
margin-top: 12px !important;
z-index: 30 !important;
border-radius: 24px !important;
backdrop-filter: blur(20px) saturate(140%) !important;
box-shadow: 0 18px 56px rgba(0,0,0,.58) !important;
}
.btn{
min-height: 46px !important;
border-radius: 16px !important;
font-size: 15px !important;
}
.ritualActions, .actionRow, .btnRow{
gap: 10px !important;
}
}
@media (max-width: 640px){
.header{
padding: 10px 12px 10px !important;
border-radius: 22px !important;
}
.logo{
width: 118px !important;
height: 40px !important;
margin: 0 auto 2px !important;
opacity: .96 !important;
filter: drop-shadow(0 10px 22px rgba(0,0,0,.42)) !important;
}
.brand, .wordmark, .innerMuse, .brandName{
font-size: 34px !important;
letter-spacing: -0.02em !important;
line-height: 1.0 !important;
}
.calligraphyBrand{
width: 62% !important;
max-width: 228px !important;
margin: 0 auto 8px !important;
opacity: .92 !important;
}
.dateLine{ font-size: 13px !important; opacity: .84 !important; margin-bottom: 4px !important; }
.title{ font-size: 24px !important; margin: 2px 0 6px !important; }
.sub{ font-size: 14px !important; margin-top: 0 !important; }
.themeRow{
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 10px !important;
padding-bottom: 6px !important;
margin-top: 10px !important;
scrollbar-width: none;
}
.themeRow::-webkit-scrollbar{ display:none; }
.chip{
flex: 0 0 auto !important;
padding: 10px 14px !important;
border-radius: 999px !important;
font-size: 14px !important;
}
.promptBar{
margin: 10px 0 12px !important;
padding: 10px 12px !important;
border-radius: 18px !important;
font-size: 13px !important;
line-height: 1.45 !important;
opacity: .88 !important;
backdrop-filter: blur(18px) saturate(140%) !important;
}
.content{
display: block !important;
gap:0 !important;
}
.stage{
border: none !important;
border-radius: 28px !important;
padding: 10px !important;
min-height: calc(100svh - 260px) !important;
height: calc(100svh - 260px) !important;
box-shadow:
0 26px 88px rgba(0,0,0,.62),
0 1px 0 rgba(255,255,255,.08) inset !important;
background: rgba(12,10,22,.35) !important;
backdrop-filter: blur(20px) saturate(145%) !important;
}
.stage img, .stage canvas, .stage video{
max-width: 100% !important;
max-height: 100% !important;
border-radius: 22px !important;
box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
}
.oracle{
margin-top: 14px !important;
}
.oracle .box, .oracle .panel, .oracle .card, .oracle .oracleBox{
border-radius: 24px !important;
padding: 16px 16px 18px !important;
backdrop-filter: blur(18px) saturate(145%) !important;
box-shadow: 0 18px 70px rgba(0,0,0,.58) !important;
}
.oracle h2, .oracle h3{
font-size: 22px !important;
letter-spacing: -0.02em !important;
line-height: 1.12 !important;
margin-bottom: 8px !important;
}
.oracle p, .oracle li, .oracle .text{
font-size: 16.5px !important;
line-height: 1.78 !important;
}
.ritualBar{
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
margin: 0 !important;
z-index: 60 !important;
}
body{ padding-bottom: 0 !important; }
.btn.primary, .btnPrimary, #drawBtn, #btnDraw, button.draw, button[data-action="draw"]{
position: relative;
overflow: hidden;
}
.btn.primary::after, .btnPrimary::after, #drawBtn::after, #btnDraw::after, button.draw::after, button[data-action="draw"]::after{
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%);
transform: translate3d(-12%, -10%, 0);
opacity: .45;
pointer-events: none;
}
}
@media (max-width: 640px){
.header{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.header *{ text-align: center !important; }
.logo, .calligraphyBrand{
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
}
.brand, .wordmark, .innerMuse, .brandName{
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
width: fit-content !important;
}
.dateLine{ margin-top: 2px !important; margin-bottom: 6px !important; }
.title{ margin-top: 0 !important; margin-bottom: 6px !important; }
.sub{
margin-top: 0 !important;
margin-bottom: 10px !important;
max-width: 28ch !important;
opacity: .82 !important;
}
.promptBar{
margin: 8px 0 10px !important;
padding: 10px 12px !important;
border-radius: 18px !important;
}
.ritualBar{
position: sticky !important;
left: auto !important;
right: auto !important;
bottom: 10px !important;
}
body{ padding-bottom: 0 !important; }
}
.actions.actionsPremium{
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 14px !important;
}
@media (min-width: 980px){
.actions.actionsPremium{
grid-template-columns: 1fr 1fr 1fr !important;
gap: 14px !important;
}
}
@media (max-width: 640px){
.actions.actionsPremium{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
#againBtn, #shareOracleBtn,
#actionsChapter #againBtn, #actionsChapter #shareOracleBtn{
width: 100% !important;
height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
#zodiacPill{ cursor:pointer; }
#zodiacPill:hover{ filter: brightness(1.06); }
.zodiacAvatar{
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.22);
box-shadow: 0 10px 24px rgba(0,0,0,.18);
object-fit: cover;
display:inline-block;
transform: translateY(-0.5px);
}
.zodiacBigBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.22);
background:
radial-gradient(900px 120px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
linear-gradient(135deg, rgba(255,205,120,.95), rgba(155,116,255,.86), rgba(140,220,255,.70));
color: rgba(18,10,28,.98);
padding: 14px 18px;
border-radius: 999px;
font-weight: 950;
font-size: 18px;
letter-spacing: .01em;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow:
0 26px 70px rgba(0,0,0,.42),
0 0 0 1px rgba(255,255,255,.08) inset;
cursor: pointer;
text-shadow: 0 1px 0 rgba(255,255,255,.18);
transition: transform .12s ease, filter .12s ease;
}
.zodiacBigBtn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.zodiacBigBtn:active{ transform: translateY(0px) scale(.99); }
.zodiacBigBtn:focus{ outline: 3px solid rgba(255,205,120,.40); outline-offset: 3px; }
@media (max-width: 640px){
.zodiacBigBtn{ width: 100%; justify-content:center; font-size: 17px; padding: 14px 16px; }
}
body.zodiac-modal-open.use-feather-cursor, body.zodiac-modal-open.use-feather-cursor * { cursor: none !important; }
@media (max-width: 700px){
.ow-wordmark{ font-size: 40px; letter-spacing: -0.028em; }
.ow-tagline{ font-size: 13px; letter-spacing: 0.20em; }
.ow-brand{ margin-bottom: 28px; }
}
#zodiacGrid{ grid-template-columns: repeat(2, 96px) !important; justify-content:center !important; }
}
@media (min-width: 701px) and (max-width: 980px){
#zodiacGrid{ grid-template-columns: repeat(4, 96px) !important; justify-content:center !important; }
}
.zodiacChooser{ display:flex; align-items:center; justify-content:center; gap:14px; width:100%; }
.zodiacBadgeMain{
width: 72px;
height: 72px;
border-radius: 999px;
object-fit: cover;
display:none;
border: 1px solid rgba(255,255,255,.22);
box-shadow:
0 18px 44px rgba(0,0,0,.35),
0 0 0 6px rgba(255,255,255,.06),
0 0 34px var(--signGlow, rgba(255,205,120,.28));
}
@media (max-width: 640px){
.zodiacBadgeMain{ width: 76px; height: 76px; }
.zodiacChooser{ gap:12px; }
}
.elementTint{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: .28;
mix-blend-mode: screen;
background:
radial-gradient(900px 520px at 12% 18%, var(--elementTintA, rgba(255,205,120,.18)), transparent 60%),
radial-gradient(900px 520px at 88% 22%, var(--elementTintB, rgba(155,116,255,.16)), transparent 62%),
radial-gradient(1000px 700px at 50% 96%, var(--elementTintC, rgba(140,220,255,.14)), transparent 60%);
}
@media (prefers-reduced-motion: reduce){
.elementTint{ opacity:.18; }
}
#constellationCanvas{
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 1;
opacity: .45;
}
@media (prefers-reduced-motion: reduce){
#constellationCanvas{ display:none !important; }
}
body[data-element="fire"]{
--elementTintA: rgba(255,140,90,.22);
--elementTintB: rgba(255,205,120,.16);
--elementTintC: rgba(155,116,255,.10);
}
body[data-element="earth"]{
--elementTintA: rgba(170,255,190,.14);
--elementTintB: rgba(255,205,120,.14);
--elementTintC: rgba(140,220,255,.08);
}
body[data-element="air"]{
--elementTintA: rgba(140,220,255,.20);
--elementTintB: rgba(155,116,255,.14);
--elementTintC: rgba(255,255,255,.08);
}
body[data-element="water"]{
--elementTintA: rgba(90,170,255,.22);
--elementTintB: rgba(155,116,255,.12);
--elementTintC: rgba(255,205,120,.08);
}
#pickBtn{
font-size: 20px !important;
padding: 16px 22px !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
}
@media (max-width: 640px){
#pickBtn{ font-size: 19px !important; padding: 15px 18px !important; }
}
#pickBtn{ transform: translateZ(0); backface-visibility: hidden; }
#pickBtn::after{ content: none !important; display: none !important; }
#intentReadyBtn{ transform: translateZ(0); backface-visibility: hidden; }
#intentReadyBtn::after{ content: none !important; display: none !important; }
.intentModal{
position: fixed;
inset: 0;
z-index: 9997;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
}
.intentModal.show{ display:flex; }
.intentBackdrop{
position:absolute; inset:0;
background:
radial-gradient(900px 520px at 50% 35%, rgba(155,116,255,.22), transparent 60%),
rgba(0,0,0,.55);
backdrop-filter: blur(14px) saturate(130%);
}
.intentCard{
position: relative;
width: min(560px, 94vw);
border-radius: 26px;
border: 1px solid rgba(255,255,255,.18);
background: linear-gradient(135deg, rgba(18,12,36,.78), rgba(10,44,72,.46));
box-shadow: 0 28px 92px rgba(0,0,0,.55);
padding: 18px 18px 16px;
overflow:hidden;
transform: translateZ(0);
}
.intentCard::after{
content:"";
position:absolute; inset:-1px;
border-radius: inherit;
background:
radial-gradient(650px 220px at 50% 0%, rgba(255,255,255,.12), transparent 70%),
radial-gradient(420px 180px at 18% 22%, rgba(255,205,120,.10), transparent 68%),
radial-gradient(420px 180px at 82% 28%, rgba(140,220,255,.10), transparent 68%);
pointer-events:none;
}
.intentTop{
display:flex;
align-items:center;
justify-content: space-between;
gap:12px;
position:relative;
z-index:1;
}
.intentTitle{
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 920;
letter-spacing: -.01em;
margin: 0;
}
.intentClose{
appearance:none;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
width: 40px; height: 40px;
border-radius: 14px;
font-weight: 900;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 12px 28px rgba(0,0,0,.20);
}
.intentClose:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.intentBody{
position:relative;
z-index:1;
margin-top: 12px;
color: rgba(255,255,255,.90);
line-height: 1.75;
font-size: clamp(16px, 1.45vw, 18px);
}
.intentQuote{
margin: 10px 0 0;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
}
.intentQuote em{ font-style: normal; font-weight: 900; }
.breatheRow{
margin-top: 14px;
display:flex;
align-items:center;
gap:10px;
}
.breatheOrb{
width: 18px; height: 18px;
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, rgba(255,255,255,1), rgba(155,116,255,.70) 45%, rgba(155,116,255,0) 72%);
filter: drop-shadow(0 0 18px rgba(155,116,255,.35));
animation: breatheOrb 2.6s ease-in-out infinite;
}
@keyframes breatheOrb{ 0%,100%{ transform: scale(.88); opacity:.75; } 50%{ transform: scale(1.22); opacity:1; } }
.intentActions{
position:relative;
z-index:1;
margin-top: 16px;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.intentActions .btn{ flex: 1 1 220px; height: 52px; font-size: 17px; font-weight: 900; }
.intentActions .btn:not(.btnPrimary){
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
}
.intentActions .btn:not(.btnPrimary):hover{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.26);
}
.tiered{
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.12);
}
.tierLabel{
font-size: 12px;
letter-spacing: .10em;
text-transform: uppercase;
font-weight: 900;
color: rgba(255,255,255,.72);
margin: 0 0 6px;
}
.tierCore{
border-radius: 18px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(135deg, rgba(255,205,120,.12), rgba(155,116,255,.14));
padding: 12px 12px;
box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.tierCore p{ margin:0; font-size: var(--body); line-height: 1.75; color: rgba(255,255,255,.95); }
.tier{
margin-top: 10px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
box-shadow: 0 12px 28px rgba(0,0,0,.16);
overflow:hidden;
}
.tier summary{
list-style:none;
cursor:pointer;
padding: 12px 12px;
font-weight: 920;
color: rgba(255,255,255,.94);
display:flex;
align-items:center;
justify-content: space-between;
gap:12px;
}
.tier summary::-webkit-details-marker{ display:none; }
.tier summary::after{
content:"▾";
opacity:.82;
transform: translateY(-1px);
transition: transform .16s ease, opacity .16s ease;
}
.tier[open] summary::after{
transform: rotate(180deg) translateY(1px);
opacity:1;
}
.tierBody{
padding: 0 12px 12px;
color: rgba(255,255,255,.74);
line-height: 1.75;
font-size: var(--body);
}
.chapter{
margin-top: 18px;
border-radius: 28px;
border: 1px solid rgba(255,255,255,.16);
background:
radial-gradient(900px 420px at 12% 0%, rgba(255,205,120,.12), transparent 62%),
radial-gradient(900px 520px at 88% 20%, rgba(155,116,255,.16), transparent 60%),
rgba(16,14,36,.55);
box-shadow: 0 30px 80px rgba(0,0,0,.34);
overflow:hidden;
}
.chapter.hidden{ display:none; }
.chapterInner{
padding: 18px 18px 22px;
}
.chapterHeader{
display:flex;
align-items:flex-end;
justify-content: space-between;
gap:14px;
padding: 16px 18px 12px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.chapterKicker{
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 900;
color: rgba(255,255,255,.70);
margin:0;
}
.chapterTitle{
margin: 6px 0 0;
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 980;
letter-spacing: .01em;
}
.chapterActions{
display:flex;
gap:10px;
align-items:center;
}
.chapterBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
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;
-webkit-tap-highlight-color: transparent;
}
.chapterBtn:hover{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.26);
transform: translateY(-1px);
}
.chapterBtn:active{ transform: translateY(0px); }
.tierChapter{
margin-top: 0;
padding-top: 0;
border-top: none;
}
.tierTimeline{
position: relative;
padding-left: 18px;
}
.tierTimeline::before{
content:"";
position:absolute;
left: 7px;
top: 10px;
bottom: 10px;
width: 2px;
background: linear-gradient(180deg, rgba(255,205,120,.45), rgba(155,116,255,.45));
opacity:.85;
border-radius: 2px;
filter: blur(.0px);
}
.tierNode{
position: relative;
}
.tierNode::before{
content:"";
position:absolute;
left: -14px;
top: 18px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(255,205,120,.85) 42%, rgba(155,116,255,.70) 72%);
box-shadow: 0 0 0 3px rgba(20,16,50,.72), 0 10px 22px rgba(0,0,0,.35);
}
.chapter .tierCore{ padding: 14px 14px; border-radius: 22px; }
.chapter .tier{ border-radius: 22px; }
.chapter .tier summary{ padding: 14px 14px; }
.chapter .tierBody{ padding: 0 14px 14px; }
@media (min-width: 981px){
.chapter{
margin-top: 22px;
}
}
@media (max-width: 980px){
.chapterHeader{ align-items:flex-start; }
.chapterActions{ flex-wrap:wrap; justify-content:flex-end; }
.chapterBtn{ padding: 9px 11px; }
.chapterInner{ padding: 16px 16px 20px; }
.tierTimeline{ padding-left: 16px; }
.tierTimeline::before{ left: 6px; }
.tierNode::before{ left: -13px; }
}
@supports (-webkit-touch-callout: none){
@media (max-width: 640px){
.ritualBar{
position: relative !important;
bottom: auto !important;
top: auto !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: rgba(18, 12, 34, .86) !important;
border-color: rgba(255,255,255,.18) !important;
transform: none !important;
will-change: auto !important;
}
}
}
@media (min-width: 981px){
.shell{
border-radius: 30px;
box-shadow: 0 26px 84px rgba(0,0,0,.32);
}
.content{
grid-template-columns: minmax(420px, 540px) 1fr !important;
gap: 24px !important;
padding: 22px !important;
align-items: start !important;
}
.stage{
min-height: auto !important;
height: auto !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-style: solid !important;
background:
radial-gradient(900px 360px at 30% 10%, rgba(155,116,255,.18), transparent 60%),
radial-gradient(900px 360px at 90% 20%, rgba(255,205,120,.12), transparent 62%),
linear-gradient(135deg, rgba(30,18,66,.42), rgba(8,64,92,.20)) !important;
padding: 64px 16px 16px !important;
position: sticky !important;
top: 18px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
.oracle{
position: relative !important;
top: auto !important;
padding: 64px 18px 18px !important;
border-radius: 22px !important;
}
.oracle::before{
content: "Your Oracle";
position: absolute;
top: 14px;
left: 16px;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 900;
color: rgba(255,255,255,.70);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,8,24,.24);
backdrop-filter: blur(10px);
}
.promptBar{
margin: 18px 22px 0 !important;
border-radius: 18px !important;
}
.hint{ margin-top: 6px !important; }
.clickPrompt{ margin-top: 10px !important; }
.oracleTitle{ margin-top: 0 !important; }
.oracleDesc{ margin-bottom: 14px !important; }
}
@media (max-width: 980px){
.stage{
min-height: 420px !important;
justify-content: center !important;
}
}
#actionsChapter .chapterHeader{
padding: 18px 22px 14px;
}
#actionsChapter .chapterKicker{ color: rgba(255,255,255,.66); }
#actionsChapter .chapterTitle{ letter-spacing:.01em; }
#actionsChapter .chapterSub{
margin-top: 6px;
color: rgba(255,255,255,.78);
max-width: 52ch;
}
#actionsChapter .chapterInner{
padding: 18px 22px 24px;
}
#actionsChapterInner{
max-width: 980px;
margin: 0 auto;
}
#actionsChapter .actions.actionsPremium{
margin-top: 0;
gap: 16px;
}
#actionsChapter .actions.actionsPremium .btn{
height: 58px;
border-radius: 18px;
font-size: 16px;
font-weight: 950;
letter-spacing: .01em;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.94);
box-shadow:
0 18px 50px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.10);
transform: translateZ(0);
-webkit-transform: translateZ(0);
position: relative;
overflow: hidden;
}
#actionsChapter .actions.actionsPremium .btn::before{
content:"";
position:absolute;
inset:-2px;
background:
radial-gradient(800px 120px at 12% 0%, rgba(255,205,120,.22), transparent 55%),
radial-gradient(700px 120px at 88% 0%, rgba(155,116,255,.22), transparent 55%);
opacity:.55;
pointer-events:none;
}
#actionsChapter .actions.actionsPremium .btn:hover{
transform: translateY(-1px) translateZ(0);
border-color: rgba(255,255,255,.24);
background: rgba(255,255,255,.08);
}
#actionsChapter .actions.actionsPremium .btn:active{
transform: translateY(0px) translateZ(0);
}
#actionsChapter .actions.actionsPremium .btn .btnIcon{
opacity: .92;
margin-right: 10px;
}
#actionsChapter .actions.actionsPremium .btn.btnPrimary{
background: rgba(255,255,255,.07);
}
#actionsChapter .actions.actionsPremium .btn.btnSecondary{
background: rgba(0,0,0,.12);
}
#actionsChapter .actions.actionsPremium .btn.btnSecondary::before{
opacity:.30;
}
@media (min-width: 981px){
#actionsChapter .actions.actionsPremium{
grid-template-columns: 1fr 1fr !important;
}
}
@media (min-width: 981px){
#actionsChapter .chapterHeader{ align-items: center; }
#actionsChapterActions{
flex: 0 1 620px;
max-width: 620px;
}
#actionsChapterActions .actions.actionsPremium{
margin-top: 0 !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
#actionsChapterActions .btn{
height: 56px !important;
white-space: nowrap;
}
}
@media (min-width: 981px){
.content{
align-items: stretch !important;
}
.stage, .oracle{
height: 100% !important;
min-height: 240px !important;
}
.oracle{ display:flex; flex-direction:column; }
}
body[data-has-card="0"] #actionsChapter,
body[data-has-card="0"] #tieredChapter{
display: none !important;
}
#againBtn, #shareOracleBtn,
#actionsChapter #againBtn, #actionsChapter #shareOracleBtn,
#actionsChapter .actions.actionsPremium .btn{
background: linear-gradient(135deg, rgba(255,205,120,.90), rgba(155,116,255,.80)) !important;
color: rgba(20, 10, 36, .94) !important;
border-color: rgba(255,255,255,.26) !important;
}
#actionsChapter .actions.actionsPremium .btn::before{ display:none !important; }
#actionsChapter .actions.actionsPremium .btn::after{ display:none !important; }
@media (min-width: 641px){
#dobPlaceholder{ display:none !important; }
}
#actionsChapter{
border-radius: 22px;
}
#actionsChapter .chapterHeader{
padding: 10px 16px !important;
align-items: center !important;
border-bottom: none !important;
min-height: 0 !important;
}
#actionsChapter .chapterKicker{
font-size: 10px !important;
letter-spacing: .14em !important;
margin: 0 !important;
}
#actionsChapter .chapterTitle{
font-size: clamp(16px, 1.35vw, 18px) !important;
line-height: 1.05 !important;
margin: 2px 0 0 !important;
}
#actionsChapter .chapterSub{
margin-top: 2px !important;
font-size: 13px !important;
line-height: 1.35 !important;
max-width: none !important;
opacity: .82 !important;
}
#actionsChapter .chapterInner{
display: none !important;
padding: 0 !important;
}
#actionsChapterActions .btn{
height: 46px !important;
border-radius: 16px !important;
font-size: 15px !important;
font-weight: 950 !important;
border: 1px solid rgba(255,255,255,.22) !important;
background: linear-gradient(135deg, rgba(255,205,120,.95), rgba(155,116,255,.86), rgba(140,220,255,.70)) !important;
color: rgba(18,10,28,.98) !important;
box-shadow:
0 18px 50px rgba(0,0,0,.30),
0 0 0 1px rgba(255,255,255,.08) inset !important;
}
#actionsChapterActions .btn::before{ content: none !important; display:none !important; }
#actionsChapterActions .btn:hover{
transform:none !important;
filter:none !important;
}
@media (min-width: 981px){
#actionsChapter .chapterHeader{
display:flex !important;
justify-content: space-between !important;
gap: 16px !important;
}
}
@media (max-width: 560px){
#actionsChapter .chapterHeader{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
#actionsChapterActions{
width: 100% !important;
}
#actionsChapterActions .btn{
width: 100% !important;
}
}
@media (min-width: 981px){
#actionsChapterActions .actions.actionsPremium{
display: flex !important;
flex-wrap: nowrap !important;
gap: 16px !important;
align-items: center !important;
}
#actionsChapterActions .actions.actionsPremium .btn{
flex: 1 1 0 !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
.oracle .actions.actionsPremium{
display: flex !important;
flex-wrap: nowrap !important;
gap: 16px !important;
align-items: center !important;
}
.oracle .actions.actionsPremium .btn{
flex: 1 1 0 !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
}
@media (max-width: 980px){
#actionsChapterActions .actions.actionsPremium{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.oracle .actions.actionsPremium{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
.realmNudgeLabel{
font-size: 13.5px !important;
letter-spacing: .10em !important;
}
.realmNudgeBtn{
font-size: 15.5px !important;
padding: 10px 16px !important;
font-weight: 950 !important;
}
.cursorCtl span{
font-size: 15.5px !important;
font-weight: 950 !important;
}
.cursorNudgeBtn, #pickCursorBtn, .pickCursorBtn{
font-size: 15.5px !important;
padding: 10px 16px !important;
font-weight: 950 !important;
}
.ritualBar, .nextStepThin, .nextStepRow, .nextStepBar{
border-radius: 26px !important;
padding: 14px 16px !important;
border: 1px solid rgba(255,255,255,.18) !important;
background:
radial-gradient(900px 220px at 20% 20%, rgba(255,205,120,.18), transparent 62%),
radial-gradient(900px 260px at 78% 30%, rgba(155,116,255,.22), transparent 62%),
linear-gradient(135deg, rgba(12,10,26,.70), rgba(10,44,72,.34)) !important;
box-shadow:
0 28px 86px rgba(0,0,0,.38),
0 1px 0 rgba(255,255,255,.08) inset !important;
backdrop-filter: blur(16px) saturate(145%) !important;
}
.ritualBar .ritualText{
color: rgba(255,255,255,.92) !important;
}
.ritualBar .btn,
.nextStepThin .btn,
.nextStepRow .btn{
height: 52px !important;
padding: 0 18px !important;
border-radius: 18px !important;
font-size: 16.5px !important;
font-weight: 900 !important;
border: 1px solid rgba(255,255,255,.18) !important;
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)) !important;
color: rgba(18,10,28,.96) !important;
box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
}
.ritualBar .btn:hover{
transform: translateY(-1px) !important;
filter: brightness(1.04) !important;
}
#zodiacInterpSection{
width: auto;
max-width: var(--ap-max);
margin: 24px auto 14px;
box-sizing: border-box;
}
@media (max-width: 735px){
#zodiacInterpSection{
max-width: none;
margin-left: var(--ap-pad-mobile);
margin-right: var(--ap-pad-mobile);
}
}
.zodiacInterpShell{
position: relative;
width: 100%;
max-width: 100%;
border-radius: 30px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
background:
radial-gradient(1100px 380px at -10% -18%, rgba(255,210,138,.09), transparent 52%),
radial-gradient(720px 280px at 100% 0%, rgba(142,166,255,.11), transparent 48%),
linear-gradient(180deg, rgba(11,13,34,.92) 0%, rgba(8,19,46,.84) 54%, rgba(8,26,54,.82) 100%);
box-shadow:
0 26px 80px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.07);
backdrop-filter: blur(22px) saturate(135%);
-webkit-backdrop-filter: blur(22px) saturate(135%);
}
.zodiacInterpShell::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.018;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px;
mix-blend-mode:overlay;
}
.zodiacInterpTopbar{
position: relative;
z-index: 2;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding: 18px 22px;
border-bottom: 1px solid rgba(255,255,255,.07);
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.zodiacInterpTopbarMeta{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.zodiacInterpEyebrow{
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.48);
white-space: nowrap;
}
.zodiacInterpStatusPill{
display:inline-flex;
align-items:center;
gap:8px;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
color: rgba(255,232,192,.9);
font-size: 10px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
white-space: nowrap;
}
.zodiacInterpStatusPill::before{
content:"✦";
font-size: 9px;
opacity:.76;
}
.zodiacInterpToggle{
appearance:none;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.78);
min-height: 42px;
padding: 0 17px 0 18px;
border-radius: 999px;
display:inline-flex;
align-items:center;
gap:12px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
cursor:pointer;
transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.zodiacInterpToggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.90); }
.zodiacInterpToggle:active{ transform: translateY(0); }
.zodiacInterpToggleIcon{
position: relative;
width: 14px;
height: 14px;
display:inline-block;
flex: 0 0 14px;
background: transparent;
transition: transform .24s ease, opacity .18s ease;
opacity: .88;
}
.zodiacInterpToggleIcon::before,
.zodiacInterpToggleIcon::after{
content:"";
position:absolute;
top: 6px;
width: 8px;
height: 1.5px;
border-radius: 999px;
background: currentColor;
}
.zodiacInterpToggleIcon::before{
left: 0;
transform-origin: right center;
transform: rotate(42deg);
}
.zodiacInterpToggleIcon::after{
right: 0;
transform-origin: left center;
transform: rotate(-42deg);
}
.zodiacInterpShell[data-collapsed="0"] .zodiacInterpToggleIcon{ transform: rotate(180deg); }
.zodiacInterpBody{
position: relative;
z-index:1;
padding: 24px 22px 22px;
}
.zodiacInterpShell[data-collapsed="1"] .zodiacInterpBody{
display:none;
}
.zodiacInterpChapter{
--zi-gold: rgba(255,215,160,.98);
--zi-violet: rgba(197,172,255,.9);
--zi-sky: rgba(171,229,255,.86);
position: relative;
border-radius: 24px;
padding: 0;
}
.zodiacInterpHeader{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:16px;
align-items:center;
margin-bottom: 18px;
}
.zodiacInterpBadge{
position:relative;
width:64px;
height:64px;
flex-shrink:0;
}
.zodiacInterpBadge::before{
content:"";
position:absolute;
inset:-5px;
border-radius:50%;
background: conic-gradient(from 25deg, rgba(255,210,138,.76), rgba(184,150,255,.56), rgba(155,226,255,.52), rgba(255,210,138,.76));
filter: blur(8px);
opacity:.52;
}
.zodiacInterpBadge::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background: linear-gradient(145deg, rgba(21,18,46,.96), rgba(10,30,62,.94));
border:1px solid rgba(255,255,255,.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.24);
}
.zodiacInterpBadge img{
position:absolute;
inset:5px;
width:calc(100% - 10px);
height:calc(100% - 10px);
border-radius:50%;
object-fit:cover;
z-index:2;
}
.zodiacInterpMeta{ min-width:0; }
.zodiacInterpKicker{
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
color: rgba(255,255,255,.47);
margin: 0 0 8px;
line-height: 1;
}
.zodiacInterpTitle{
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1.02;
letter-spacing: -.05em;
font-weight: 760;
margin: 0 0 10px;
background: linear-gradient(122deg, var(--zi-gold) 0%, var(--zi-violet) 58%, var(--zi-sky) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.zodiacInterpTheme{
display:inline-flex;
align-items:center;
gap:8px;
min-height: 32px;
padding: 0 13px 0 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.045);
color: rgba(255,234,200,.88);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.zodiacInterpTheme:empty{ display:none; }
.zodiacInterpTheme::before{ content:"✦"; font-size:9px; opacity:.78; }
.zodiacInterpDivider{
height:1px;
margin: 0 0 18px;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08) 12%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.08) 88%, rgba(255,255,255,0));
}
.zodiacInterpTiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.zodiacInterpTier{position:relative;min-height:0;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.zodiacInterpTier::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;opacity:.9}.zodiacInterpTier::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px 120px at 50% 0,rgba(255,255,255,.06),transparent 70%)}.zodiacInterpTier:nth-child(1){background:linear-gradient(180deg,rgba(255,210,138,.05),transparent 26%),linear-gradient(160deg,rgba(18,14,36,.8),rgba(9,19,39,.74))}.zodiacInterpTier:nth-child(2){background:linear-gradient(180deg,rgba(184,150,255,.055),transparent 26%),linear-gradient(160deg,rgba(17,14,38,.8),rgba(9,19,40,.74))}.zodiacInterpTier:nth-child(3){background:linear-gradient(180deg,rgba(155,226,255,.05),transparent 26%),linear-gradient(160deg,rgba(15,16,37,.8),rgba(8,20,41,.74))}.zodiacInterpTier:nth-child(1)::before{background:linear-gradient(90deg,rgba(255,210,138,0),rgba(255,210,138,.7),rgba(255,210,138,0))}.zodiacInterpTier:nth-child(2)::before{background:linear-gradient(90deg,rgba(184,150,255,0),rgba(184,150,255,.7),rgba(184,150,255,0))}.zodiacInterpTier:nth-child(3)::before{background:linear-gradient(90deg,rgba(155,226,255,0),rgba(155,226,255,.7),rgba(155,226,255,0))}.zodiacInterpTierInner{position:relative;z-index:1;padding:18px 17px 19px;display:flex;flex-direction:column;gap:12px}.zodiacInterpTierLabel{display:flex;align-items:center;gap:10px}.zodiacInterpTierIcon{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700}.zodiacInterpTier:nth-child(1) .zodiacInterpTierIcon{background:rgba(255,210,138,.12);border:1px solid rgba(255,210,138,.18);color:rgba(255,228,187,.92)}.zodiacInterpTier:nth-child(2) .zodiacInterpTierIcon{background:rgba(184,150,255,.12);border:1px solid rgba(184,150,255,.18);color:rgba(226,212,255,.92)}.zodiacInterpTier:nth-child(3) .zodiacInterpTierIcon{background:rgba(155,226,255,.12);border:1px solid rgba(155,226,255,.18);color:rgba(214,245,255,.92)}.zodiacInterpTierName{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;line-height:1}.zodiacInterpTier:nth-child(1) .zodiacInterpTierName{color:rgba(255,227,185,.82)}.zodiacInterpTier:nth-child(2) .zodiacInterpTierName{color:rgba(223,209,255,.82)}.zodiacInterpTier:nth-child(3) .zodiacInterpTierName{color:rgba(211,245,255,.82)}.zodiacInterpTierText{margin:0;color:rgba(255,255,255,.86);font-size:clamp(15px,1.08vw,16px);line-height:1.72;letter-spacing:-.012em}
.zodiacInterpLocked,
.zodiacInterpLoading,
.zodiacInterpEmpty{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.zodiacInterpLoading,
.zodiacInterpEmpty{
grid-column: 1 / -1;
padding: 22px 18px;
color: rgba(255,255,255,.74);
font-size: 15px;
letter-spacing: -.01em;
}
.zodiacInterpLocked{
grid-column: 1 / -1;
position: relative;
display:grid;
grid-template-columns: minmax(0, 2.1fr) auto;
align-items:center;
gap: 22px;
padding: 24px;
border-radius: 26px;
background:
radial-gradient(520px 220px at 0% 0%, rgba(255,214,146,.10), transparent 62%),
radial-gradient(460px 240px at 100% 100%, rgba(174,150,255,.10), transparent 58%),
linear-gradient(160deg, rgba(24,20,54,.92), rgba(10,26,58,.82));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07),
0 22px 60px rgba(0,0,0,.18);
overflow:hidden;
}
.zodiacInterpLocked::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: linear-gradient(90deg, rgba(255,220,158,.16), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 74%, rgba(166,212,255,.10));
opacity:.72;
}
.zodiacInterpLockedCopy{
min-width:0;
position:relative;
z-index:1;
max-width: 980px;
}
.zodiacInterpLockedKicker{
display:inline-flex;
align-items:center;
gap:8px;
min-height: 28px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.045);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,233,188,.88);
margin: 0 0 12px;
}
.zodiacInterpLockedKicker::before{ content:"✦"; font-size:9px; opacity:.8; }
.zodiacInterpLockedTitle{
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.03;
letter-spacing: -.04em;
font-weight: 760;
color: rgba(255,255,255,.96);
margin: 0 0 10px;
max-width: none;
white-space: nowrap;
}
@media (max-width: 980px){
.zodiacInterpLockedTitle{
white-space: normal;
max-width: 18ch;
}
}
.zodiacInterpLockedText{
margin:0;
color: rgba(255,255,255,.72);
font-size: 15px;
line-height: 1.66;
max-width: 72ch;
}
.zodiacInterpLockedActionWrap{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:flex-end;
}
.zodiacInterpLockedAction{
appearance:none;
border:1px solid rgba(255,255,255,.12);
background: linear-gradient(135deg, rgba(255,214,146,.94), rgba(199,160,255,.96));
color:#1c1434;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: .03em;
white-space: nowrap;
cursor:pointer;
box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.34);
transition: transform .18s ease, filter .18s ease;
}
.zodiacInterpLockedAction:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.zodiacInterpLockedAction:active{ transform: translateY(0); }
@media (max-width: 900px){
#zodiacInterpSection{
width: min(100%, calc(100% - 24px));
margin: 16px auto 10px;
}
.zodiacInterpShell{ border-radius: 24px; }
.zodiacInterpTopbar{ padding: 16px 16px; gap: 10px; align-items:flex-start; flex-direction:column; }
.zodiacInterpTopbarMeta{ width:100%; flex-wrap:wrap; }
.zodiacInterpBody{ padding: 18px 16px 16px; }
.zodiacInterpHeader{ gap: 13px; }
.zodiacInterpBadge{ width: 58px; height: 58px; }
.zodiacInterpTitle{ font-size: clamp(23px, 8vw, 32px); }
.zodiacInterpTiers{ grid-template-columns: 1fr; gap: 12px; }
.zodiacInterpLocked{ grid-template-columns: 1fr; padding: 18px; gap: 16px; }
.zodiacInterpLockedTitle{ max-width: none; font-size: clamp(22px, 8vw, 30px); }
.zodiacInterpLockedText{ max-width: none; }
.zodiacInterpLockedActionWrap{ width:100%; justify-content:flex-start; }
.zodiacInterpLockedAction{ width:100%; justify-content:center; }
}
.zodiacInterpLoading{
grid-column: 1 / -1;
text-align: center;
padding: 32px 0;
color: rgba(255,255,255,.38);
font-size: 13px;
letter-spacing: .08em;
font-weight: 600;
}
.zodiacInterpEmpty{
grid-column: 1 / -1;
text-align: center;
padding: 24px 0 4px;
color: rgba(255,255,255,.38);
font-size: 14px;
line-height: 1.6;
}
.tierDot{ display: none; }
.shareCardImgWrap{
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
}
.shareCardImgWrap img{
width: 54px;
height: auto;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 8px 22px rgba(0,0,0,.30);
flex-shrink: 0;
display: block;
}
.shareCardImgMeta{ flex: 1; min-width: 0; }
.shareCardImgName{
font-size: 15px;
font-weight: 880;
color: rgba(255,255,255,.94);
letter-spacing: -.01em;
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shareCardImgSub{
font-size: 12px;
color: rgba(255,255,255,.52);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
#shareCardImgWrap{ display: none; }
.shareModal{
position: fixed; inset: 0; z-index: 9999;
display:none; align-items:center; justify-content:center;
padding: 18px;
}
.shareModal.show{ display:flex; }
.shareBackdrop{
position:absolute; inset:0;
background: rgba(0,0,0,.58);
backdrop-filter: blur(14px) saturate(130%);
}
.shareCard{
position: relative;
width: min(560px, 94vw);
border-radius: 26px;
border: 1px solid rgba(255,255,255,.18);
background: linear-gradient(135deg, rgba(18,12,36,.84), rgba(10,44,72,.50));
box-shadow: 0 28px 92px rgba(0,0,0,.56);
padding: 16px 16px 14px;
overflow:hidden;
transform: translateZ(0);
}
.shareCard::after{
content:"";
position:absolute; inset:-1px;
border-radius: inherit;
background:
radial-gradient(650px 220px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
radial-gradient(420px 180px at 18% 22%, rgba(255,205,120,.10), transparent 68%),
radial-gradient(420px 180px at 82% 28%, rgba(140,220,255,.10), transparent 68%);
pointer-events:none;
}
.shareTop{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.shareTitle{ font-size: 18px; font-weight: 920; letter-spacing: -.01em; }
.shareClose{
appearance:none; border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08); color: rgba(255,255,255,.92);
width: 40px; height: 40px; border-radius: 14px;
font-weight: 900; cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 12px 28px rgba(0,0,0,.20);
}
.shareClose:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.shareBody{ position:relative; z-index:1; margin-top: 10px; }
.sharePreview{
padding: 12px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.90);
line-height: 1.65;
white-space: pre-wrap;
}
.shareGrid{
margin-top: 12px;
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
}
@media (max-width: 520px){
.shareGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.sharePill{
appearance:none;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
border-radius: 16px;
padding: 12px 10px;
font-weight: 900;
cursor:pointer;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.sharePill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
@media (min-width: 561px){
.actions.actionsPremium{
grid-template-columns: 1fr 1fr 1fr !important;
}
}
#oracleCol.oraclePremium{
position: sticky;
top: 18px;
max-height: none;
overflow: hidden !important;
}
.oraclePremium .imOracleClamp{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
}
.oraclePremium .imOracleActions{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
margin-top: 14px;
}
.oraclePremium .imOracleBtn{
appearance:none;
border:1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.92);
padding: 10px 14px;
border-radius: 14px;
font-weight: 900;
letter-spacing: .01em;
cursor: pointer;
box-shadow: 0 14px 30px rgba(0,0,0,.22);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.oraclePremium .imOracleBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); }
.imModal{ position: fixed; inset: 0; z-index: 9999; display:none; }
.imModal[aria-hidden="false"]{ display:block; }
.imModal .imModalBg{ position:absolute; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(8px) saturate(130%); }
.imModal .imModalPanel{
position: relative;
width: min(980px, calc(100vw - 28px));
max-height: calc(100svh - 28px);
margin: 14px auto;
border-radius: 26px;
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 48px 140px rgba(0,0,0,.55);
overflow: hidden;
}
.imModalHeader{
display:flex; align-items:center; justify-content:space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.imModalHeader .title{ font-weight: 950; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,.78); }
.imModalClose{ border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92);
width: 40px; height: 40px; border-radius: 14px; cursor:pointer; font-size: 18px; line-height: 1; }
.imModalBody{ padding: 18px; overflow:auto; max-height: calc(100svh - 28px - 60px); }
.imModalBody::-webkit-scrollbar{ width: 6px; }
.imModalBody::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }
@media (pointer:fine){
.cursor-feather{ z-index: 2147483647 !important; }
}
#realmOverwriteModal{ z-index: 2147483000 !important; }
.memoriesGrid{ grid-template-columns: 250px 1fr !important; }
.memoriesDetailPane{ padding: 18px 18px 18px !important; }
.memDetailBody{ grid-template-columns: auto 1fr !important; gap: 16px !important; align-items: stretch !important; min-height: 0 !important; }
.memDetailCard{
height: 100%;
width: auto;
aspect-ratio: 2 / 3;
min-width: 260px;
max-width: 420px;
border-radius: 18px;
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;
}
.memDetailCard img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.memDetailText{
font-size: 15.5px !important;
line-height: 1.78 !important;
padding: 14px 16px !important;
height: auto;
min-height: 0 !important;
white-space: pre-wrap !important;
}
@media (max-width: 540px){
.ritualStrip{ grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.ritualPanel{ border-radius: 24px !important; }
.ritualPanelTop{ padding-bottom: 8px !important; }
.ritualPanelBody{ padding-top: 10px !important; }
.journalScrollBtn{
width: 100% !important;
max-width: 260px !important;
align-self: flex-end !important;
border-radius: 16px !important;
}
.panelJournalHint{ font-size: 14px !important; line-height: 1.55 !important; }
}
@media (max-width: 420px){
.ritualStrip{ grid-template-columns: 1fr !important; }
}
.memoriesPanel{ display:flex !important; flex-direction:column !important; width: min(1240px, 96vw) !important; max-height: calc(100svh - 36px) !important; }
.memoriesBody{ flex:1 !important; max-height:none !important; overflow:auto !important; }
.calDay.hasEntry{ cursor:pointer; }
.calDay.hasEntry:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); }
.calDay.selected{
background: radial-gradient(220px 160px at 50% 45%, rgba(255,205,120,.26), rgba(155,116,255,.14) 55%, rgba(255,255,255,.06) 100%) !important;
border-color: rgba(255,205,120,.62) !important;
box-shadow: 0 16px 44px rgba(255,205,120,.18), inset 0 0 0 2px rgba(255,205,120,.22) !important;
}
.calDay.selected .calDayDot{ width:6px !important; height:6px !important; opacity:1 !important; }
.calDay.selected span{ color: rgba(255,255,255,.98) !important; font-weight: 900 !important; }
.memoriesGrid{ grid-template-columns: 320px 1fr !important; gap: 14px !important; align-items:start !important; }
.memoriesCalPane{ display:flex; flex-direction:column; gap: 12px; }
.memoriesCalCompact{ max-width: 100% !important; margin: 0 !important; }
.memRealmTabs{ width: 100% !important; margin-top: 0 !important; }
.memoriesCalPane .memRealmTabs{
padding: 14px 14px 12px !important;
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
}
.memoriesCalPane .memRealmTabs::before{ content:"REALMS"; display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:900; color: rgba(255,255,255,.62); margin-bottom:8px;  grid-column: 1 / -1; }
.memoriesCalPane .memRealmTabs{ display:grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.memoriesCalPane .memRealmTab{ width: 100% !important; justify-content:center !important; }
.memDetailBody{ grid-template-columns: 240px 1fr !important; gap: 18px !important; }
.memDetailCard{ width: 240px !important; }
#memoriesModal{
overflow: hidden !important;
padding: max(12px, env(safe-area-inset-top)) 12px 12px !important;
}
#memoriesModal .memoriesPanel{
max-height: calc(100svh - 24px) !important;
height: calc(100svh - 24px) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
#memoriesModal .memoriesHeader{ padding: 10px 12px !important; }
#memoriesModal .memoriesTitle{ font-size: clamp(18px, 2.1vw, 22px) !important; }
#memoriesModal .memoriesClose{ width: 38px !important; height: 38px !important; border-radius: 14px !important; }
#memoriesModal .memoriesBody{
flex: 0 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 12px !important;
max-height: none !important;
}
#memoriesModal .memoriesGrid{
height: 100% !important;
min-height: 0 !important;
}
#memoriesModal .memoriesCalPane,
#memoriesModal .memoriesDetailPane{
min-height:0!important;overflow:auto!important
}
#memoriesModal .memoriesCalPane{
overflow-y: auto !important;
overflow-x: hidden !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
#memoriesModal .journalCalSection{
flex: 0 0 auto !important;
min-height: 0 !important;
}
#memoriesModal .journalCalGrid{
flex: 0 0 auto !important;
}
#memoriesModal .memRealmTabs{
flex: 0 0 auto !important;
}
#memoriesModal .memDetailBody{
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
align-items: stretch !important;
}
#memoriesModal .memDetailCard{
height: 100% !important;
align-self: stretch !important;
}
#memoriesModal .memDetailText{
height: 100% !important;
min-height: 0 !important;
}
#memoriesModal .memoriesGrid{ gap: 12px !important; align-items: stretch !important; height: 100% !important; }
#memoriesModal .memoriesCalPane{ height: 100% !important; }
#memoriesModal .memoriesDetailPane{ height: 100% !important; display:flex !important; flex-direction:column !important; }
#memoriesModal .memDetailBody{ flex: 1 1 auto !important; min-height: 0 !important; }
#memoriesModal .memoriesCalPane{ padding: 10px !important; border-radius: 20px !important; }
#memoriesModal .memCalKicker{ margin-bottom: 8px !important; }
#memoriesModal .memoriesCalCompact .journalCalHeader{ margin-bottom: 6px !important; }
#memoriesModal .memoriesCalCompact .journalCalNav{ width: 28px !important; height: 28px !important; font-size: 16px !important; }
#memoriesModal .memoriesCalCompact .journalCalTitle{ font-size: 14px !important; }
#memoriesModal .memoriesCalCompact .journalCalGrid{ gap: 3px !important; }
#memoriesModal .memoriesCalCompact .calDayHeader{ font-size: 9px !important; padding: 3px 0 !important; }
#memoriesModal .memoriesCalCompact .calDay{ min-height: 26px !important; font-size: 11.5px !important; border-radius: 9px !important; }
#memoriesModal .memoriesDetailPane{ padding: 12px !important; border-radius: 20px !important; min-height: 0 !important; }
#memoriesModal .memDetailTop{ margin-bottom: 10px !important; }
#memoriesModal .memDetailBody{ gap: 14px !important; }
#memoriesModal .memDetailText{
overflow: auto !important;
max-height: none !important;
}
#memoriesModal .memPreviewText{
overflow: auto !important;
max-height: 140px !important;
}
.profileCard{
display:flex;
flex-direction:column;
}
.profileBody{
flex: 1 1 auto;
min-height: 0;
max-height: none !important;
overflow: hidden !important;
}
@media (max-width: 900px){
.profileBody{ overflow: auto !important; }
}
.profileNav,
.profileMain{
min-height: 0;
max-height: 100%;
overflow: auto;
overscroll-behavior: contain;
}
.profileNav{ padding-bottom: 16px; }
#actionsChapter{
border-radius: 22px;
}
#actionsChapter .chapterHeader{
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 20px !important;
padding: 10px 18px !important;
border-bottom: none !important;
min-height: 0 !important;
box-sizing: border-box !important;
}
#actionsChapter .chapterHeader > div:first-child{
min-width: 0 !important;
overflow: hidden !important;
}
#actionsChapter .chapterKicker{
font-size: 10px !important;
letter-spacing: .14em !important;
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#actionsChapter .chapterTitle{
font-size: clamp(16px, 1.35vw, 18px) !important;
line-height: 1.05 !important;
margin: 2px 0 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#actionsChapter .chapterSub{
margin-top: 2px !important;
font-size: 13px !important;
line-height: 1.35 !important;
opacity: .82 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: none !important;
}
#actionsChapter .chapterInner{
display: none !important;
padding: 0 !important;
}
#actionsChapter .chapterActions,
#actionsChapterActions{
display: flex !important;
flex-wrap: nowrap !important;
gap: 14px !important;
align-items: center !important;
flex-shrink: 0 !important;
justify-content: flex-end !important;
}
#actionsChapterActions .actions.actionsPremium{
display: flex !important;
flex-wrap: nowrap !important;
gap: 14px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
#actionsChapterActions .btn{
flex: 0 0 auto !important;
height: 46px !important;
padding: 0 16px !important;
border-radius: 14px !important;
font-size: 14px !important;
font-weight: 800 !important;
white-space: nowrap !important;
min-width: 0 !important;
width: auto !important;
border: 1px solid rgba(255,255,255,.22) !important;
background: linear-gradient(135deg, rgba(255,205,120,.95), rgba(155,116,255,.86), rgba(140,220,255,.70)) !important;
color: rgba(18,10,28,.98) !important;
box-shadow: 0 18px 50px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.08) inset !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
}
#actionsChapterActions .btn::before,
#actionsChapterActions .btn::after{ content: none !important; display:none !important; }
#actionsChapterActions .btn:hover{
transform:none !important;
filter:none !important;
}
@media (max-width: 700px){
#actionsChapter .chapterHeader{
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 12px 14px !important;
}
#actionsChapter .chapterHeader > div:first-child{
white-space: normal !important;
overflow: visible !important;
}
#actionsChapter .chapterTitle,
#actionsChapter .chapterSub,
#actionsChapter .chapterKicker{ white-space: normal !important; overflow: visible !important; }
#actionsChapterActions .actions.actionsPremium{
flex-wrap: wrap !important;
gap: 10px !important;
}
#actionsChapterActions .btn{
flex: 1 1 auto !important;
min-width: 140px !important;
}
}
.ow-brand{
text-align:center;
margin-bottom: 32px;
}
.ow-wordmark{
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
font-size: 48px;
font-weight: 700;
letter-spacing: -0.030em;
line-height: 1.02;
color: rgba(255,255,255,.96);
text-shadow: 0 14px 40px rgba(0,0,0,.22);
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.ow-tagline{
margin-top: 10px;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.22em;
color: rgba(255,255,255,.82);
text-shadow: 0 10px 28px rgba(0,0,0,.16);
}
@media (max-width: 700px){
.ow-wordmark{ font-size: 44px; }
.ow-tagline{ font-size: 14px; letter-spacing: 0.22em; }
.ow-brand{ margin-bottom: 28px; }
}
.actions.actionsPremium .btn{
font-size: clamp(16px, 1.35vw, 18px) !important;
height: 60px !important;
}
.actions.actionsPremium .btn svg{ width: 19px; height: 19px; }
@media (max-width: 560px){
.actions.actionsPremium .btn{
font-size: 16.5px !important;
height: 56px !important;
}
}
.heroHook{
margin: 12px auto 0 !important;
max-width: 720px;
font-size: clamp(21px, 1.9vw, 28px) !important;
color: rgba(255,255,255,.92) !important;
font-weight: 700 !important;
letter-spacing: -.02em !important;
}
.heroPromise{
max-width: 760px !important;
color: rgba(255,255,255,.62) !important;
font-style: normal !important;
}
.heroCtaWrap{
margin: 18px auto 8px;
display:flex;
justify-content:center;
}
.heroCtaBtn{
width:min(78vw,380px);
min-height: 58px;
padding: 0 24px !important;
border-radius: 999px !important;
font-size: 17px !important;
font-weight: 900 !important;
letter-spacing: -.015em !important;
box-shadow: 0 22px 58px rgba(0,0,0,.34) !important;
}
.zodiacInterpPreviewNote{
grid-column: 1 / -1;
margin-top: 4px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 14px;
padding: 16px 18px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.10);
background: linear-gradient(160deg, rgba(24,20,54,.92), rgba(10,26,58,.82));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.18);
}
.zodiacInterpPreviewCopy{
min-width: 0;
}
.zodiacInterpPreviewKicker{
display:inline-flex;
align-items:center;
gap:8px;
min-height: 28px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.045);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,233,188,.88);
margin: 0 0 10px;
}
.zodiacInterpPreviewKicker::before{ content:"✦"; font-size:9px; opacity:.8; }
.zodiacInterpPreviewTitle{
margin:0 0 8px;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.04;
letter-spacing: -.04em;
color: rgba(255,255,255,.96);
font-weight: 760;
}
.zodiacInterpPreviewText{
margin:0;
color: rgba(255,255,255,.74);
font-size: 15px;
line-height: 1.66;
}
.zodiacInterpPreviewAction{
appearance:none;
border:1px solid rgba(255,255,255,.12);
background: linear-gradient(135deg, rgba(255,214,146,.94), rgba(199,160,255,.96));
color:#1c1434;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: .03em;
white-space: nowrap;
cursor:pointer;
box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.34);
}
.zodiacInterpTier.isPreviewLocked .zodiacInterpTierText{
position: relative;
filter: blur(7px);
user-select:none;
pointer-events:none;
}
.zodiacInterpTier.isPreviewLocked .zodiacInterpTierText::after{
content:"";
position:absolute;
inset:-4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(15,12,36,.12), rgba(15,12,36,.34));
}
.zodiacInterpTierLock{
display:inline-flex;
align-items:center;
gap:6px;
margin-top: 2px;
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.045);
color: rgba(255,233,188,.84);
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
@media (max-width: 900px){
.zodiacInterpPreviewNote{
grid-template-columns: 1fr;
display:grid;
}
.zodiacInterpPreviewAction{
width: 100%;
justify-self: stretch;
}
}
.imRecapHero{
min-height: clamp(420px, 56vh, 640px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap: 14px;
padding: 24px 14px 30px;
text-align:center;
}
.imRecapHeroIcon{
width: 72px; height: 72px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,.16);
background:
radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 62%),
rgba(255,255,255,.06);
box-shadow: 0 24px 70px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10);
display:flex; align-items:center; justify-content:center;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.imRecapHeroIconGlyph{
font-size: 34px;
filter: drop-shadow(0 14px 34px rgba(0,0,0,.35));
opacity: .96;
transform: translateY(-1px);
}
.imRecapHeroTitle{
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 980;
letter-spacing: -.02em;
line-height: 1.08;
background: var(--title-grad);
-webkit-background-clip:text;
background-clip:text;
color: transparent;
margin-top: 6px;
}
.imRecapHeroCopy{
max-width: 560px;
font-size: 15px;
line-height: 1.75;
color: rgba(255,255,255,.74);
}
.imRecapHeroCopy strong{ color: rgba(255,255,255,.92); font-weight: 900; }
.imRecapHeroActions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:center; margin-top: 6px; }
.imRecapHeroBtn{
appearance:none;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
font-weight: 900;
font-size: 15px;
padding: 13px 18px;
border-radius: 16px;
cursor:pointer;
box-shadow: 0 14px 34px rgba(0,0,0,.26);
transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
min-width: 160px;
}
.imRecapHeroBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); }
.imRecapHeroBtn.primary{
background: linear-gradient(135deg, rgba(255,205,120,.92), rgba(155,116,255,.82));
color: rgba(18,10,28,.96);
border-color: rgba(255,255,255,.26);
}
.imRecapHeroFineprint{
margin-top: 2px;
font-size: 12px;
color: rgba(255,255,255,.47);
}
.imRecapHeroPreview{
width: min(720px, 100%);
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
margin-top: 14px;
}
.imRecapPreviewCard{
text-align:left;
padding: 14px 14px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
box-shadow: 0 18px 54px rgba(0,0,0,.28);
}
.imRecapPreviewNum{
font-size: 22px;
font-weight: 980;
letter-spacing: -.02em;
color: rgba(255,255,255,.92);
}
.imRecapPreviewLabel{
margin-top: 6px;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 900;
color: rgba(255,255,255,.50);
}
@media (max-width: 560px){
.imRecapHero{ min-height: 420px; padding: 22px 10px 26px; }
.imRecapHeroPreview{ grid-template-columns: 1fr; }
.imRecapHeroBtn{ width: 100%; min-width: 0; }
}
.header .sub{
font-size: clamp(17.25px, 1.5vw, 20.7px) !important;
line-height: 1.52 !important;
}
@media (max-width: 640px){
.header .sub{
font-size: 16.1px !important;
line-height: 1.5 !important;
}
}
.cursorWidget{
background:
radial-gradient(900px 220px at 18% 0%, rgba(255,205,120,.045), transparent 56%),
radial-gradient(900px 240px at 82% 100%, rgba(155,116,255,.06), transparent 58%),
linear-gradient(135deg, rgba(22,20,48,.92), rgba(14,24,54,.88)) !important;
border-color: rgba(255,255,255,.11) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.028) inset,
0 14px 34px rgba(0,0,0,.24) !important;
}
.ritualStrip .ritualPanel,
#panelZodiac,
#panelRealm,
#panelDraw,
#panelJournal{
background:
radial-gradient(900px 260px at 18% 0%, rgba(255,205,120,.035), transparent 58%),
radial-gradient(900px 260px at 82% 100%, rgba(155,116,255,.055), transparent 60%),
linear-gradient(180deg, rgba(12,13,34,.95), rgba(8,18,44,.93)) !important;
border-color: rgba(255,255,255,.09) !important;
box-shadow:
0 14px 38px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.ritualStrip .ritualPanel:hover,
#panelZodiac:hover,
#panelRealm:hover,
#panelDraw:hover,
#panelJournal:hover{
border-color: rgba(255,255,255,.13) !important;
box-shadow:
0 18px 44px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.journalSection{
background:
radial-gradient(ellipse 120% 50% at 50% 0%, rgba(155,116,255,.08) 0%, transparent 58%),
radial-gradient(ellipse 80% 60% at 80% 100%, rgba(255,205,120,.04) 0%, transparent 52%),
linear-gradient(168deg, rgba(14,12,38,.92) 0%, rgba(8,24,56,.88) 100%) !important;
border-color: rgba(255,255,255,.10) !important;
box-shadow: 0 22px 62px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.memoriesLauncher{
background:
radial-gradient(900px 240px at 18% 0%, rgba(155,116,255,.07), transparent 60%),
radial-gradient(900px 260px at 82% 100%, rgba(255,205,120,.045), transparent 58%),
linear-gradient(135deg, rgba(18,20,52,.90), rgba(10,30,62,.86)) !important;
border-color: rgba(255,255,255,.11) !important;
box-shadow: 0 18px 52px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* === original inline style block 002; id: innermuse-luxury-v90; original line: 3483 === */
:root{
--lux-ink: rgba(255,255,255,.94);
--lux-muted: rgba(255,255,255,.74);
--lux-line: rgba(255,255,255,.12);
--lux-line2: rgba(255,255,255,.08);
--lux-glass-a: rgba(16,14,28,.58);
--lux-glass-b: rgba(10,40,64,.28);
--lux-shadow-1: 0 18px 60px rgba(0,0,0,.55);
--lux-shadow-2: 0 26px 90px rgba(0,0,0,.62);
--lux-radius-lg: 34px;
--lux-radius-md: 24px;
--lux-radius-sm: 18px;
}
body{
color: var(--lux-ink) !important;
background-color: #070614 !important;
}
@media (max-width: 640px){
.page{ padding-top: 14px !important; padding-bottom: 44px !important; }
}
.header{
position: relative !important;
border-radius: var(--lux-radius-lg) !important;
border: 1px solid var(--lux-line2) !important;
background:
radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(180deg, rgba(18,16,30,.74), rgba(10,10,18,.58)) !important;
backdrop-filter: blur(18px) saturate(135%) !important;
box-shadow: var(--lux-shadow-2) !important;
padding: 22px 22px 18px !important;
}
.header::before{
content:"";
position:absolute; inset:-1px;
border-radius: inherit;
background:
radial-gradient(650px 220px at 18% 12%, rgba(255,205,120,.10), transparent 60%),
radial-gradient(700px 260px at 82% 10%, rgba(155,116,255,.12), transparent 62%),
radial-gradient(700px 320px at 50% 110%, rgba(140,220,255,.08), transparent 55%);
pointer-events:none;
opacity: .95;
}
.header > *{ position: relative; z-index: 1; }
.title{
font-weight: 820 !important;
letter-spacing: -0.02em !important;
text-shadow: 0 18px 52px rgba(0,0,0,.40) !important;
}
.sub{
color: var(--lux-muted) !important;
max-width: 880px !important;
}
.themeWrap, .themeRow{
gap: 10px !important;
}
.chip{
border: 1px solid var(--lux-line2) !important;
background: rgba(255,255,255,.06) !important;
box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}
.chip:hover{
background: rgba(255,255,255,.09) !important;
border-color: rgba(255,255,255,.14) !important;
}
.chip[aria-pressed="true"]{
background: linear-gradient(135deg, rgba(255,205,120,.26), rgba(155,116,255,.20)) !important;
border-color: rgba(255,255,255,.18) !important;
}
.ritualBar{
border-radius: 28px !important;
border: 1px solid var(--lux-line2) !important;
background:
radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
linear-gradient(135deg, rgba(18,14,34,.66), rgba(10,48,78,.32)) !important;
backdrop-filter: blur(18px) saturate(140%) !important;
box-shadow: var(--lux-shadow-1) !important;
padding: 16px 16px !important;
}
.ritualText{
color: rgba(255,255,255,.88) !important;
}
.btn{
border-radius: 18px !important;
border: 1px solid var(--lux-line) !important;
background: rgba(255,255,255,.07) !important;
box-shadow: 0 16px 44px rgba(0,0,0,.30) !important;
}
.btn:hover{
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.18) !important;
}
.btnPrimary{
background: linear-gradient(135deg, rgba(255,205,120,.92), rgba(155,116,255,.82), rgba(140,220,255,.60)) !important;
color: rgba(16,10,26,.96) !important;
border-color: rgba(255,255,255,.22) !important;
}
#pickBtn{
font-size: 20px !important;
padding: 16px 22px !important;
}
.shell{
border-radius: calc(var(--lux-radius-lg) + 4px) !important;
border: 1px solid var(--lux-line2) !important;
background:
radial-gradient(1100px 360px at 50% 0%, rgba(255,255,255,.08), transparent 70%),
linear-gradient(135deg, var(--lux-glass-a), var(--lux-glass-b)) !important;
backdrop-filter: blur(18px) saturate(135%) !important;
box-shadow: var(--lux-shadow-2) !important;
}
.stage{
border: 1px solid var(--panel-border) !important;
border-style: solid !important;
border-radius: var(--panel-radius) !important;
background: var(--panel-bg) !important;
backdrop-filter: var(--panel-blur) !important;
box-shadow: var(--panel-shadow) !important;
}
.premiumHint, .hint{
border-radius: var(--panel-radius) !important;
border: 1px solid var(--panel-border) !important;
background: var(--panel-bg) !important;
backdrop-filter: var(--panel-blur) !important;
box-shadow: var(--panel-shadow) !important;
}
.oracle{
border-radius: var(--panel-radius) !important;
border: 1px solid var(--panel-border) !important;
background: var(--panel-bg) !important;
backdrop-filter: var(--panel-blur) !important;
box-shadow: var(--panel-shadow) !important;
}
.oracleTitle{
font-weight: 900 !important;
letter-spacing: -0.01em !important;
}
.tile{
border: 1px solid var(--lux-line2) !important;
background: rgba(255,255,255,.06) !important;
box-shadow: 0 14px 46px rgba(0,0,0,.26) !important;
}
.tileTitle{ color: rgba(255,255,255,.86) !important; }
.tileText{ color: rgba(255,255,255,.90) !important; }
.cardImg{
border-radius: 28px !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 34px 130px rgba(0,0,0,.62) !important;
}
.content{
gap: 18px !important;
padding: 18px !important;
}
@media (max-width: 980px){
.content{ padding: 14px !important; }
}
:focus-visible{
outline: 3px solid rgba(255,205,120,.35) !important;
outline-offset: 3px !important;
}
@media (pointer:fine){
::-webkit-scrollbar{ height: 10px; width: 10px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); }
}

/* === original inline style block 003; id: no-id; original line: 3648 === */
.title {
font-size: clamp(38px, 4.4vw, 64px) !important;
font-weight: 950 !important;
letter-spacing: -.022em !important;
margin: 4px 0 6px !important;
line-height: 1.08 !important;
}
.dateLine {
margin-top: 28px;
font-size: clamp(12px, 1.0vw, 15px) !important;
color: rgba(255,255,255,.46) !important;
letter-spacing: .15em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
}
.header { padding-bottom: 28px !important; }
.sub {
margin-bottom: 2px !important;
font-size: clamp(15px, 1.25vw, 19px) !important;
line-height: 1.55 !important;
}
.subWhisper {
margin: 6px auto 0 !important;
max-width: 680px;
font-size: clamp(13px, 1.0vw, 15.5px) !important;
line-height: 1.75 !important;
color: rgba(255,255,255,.46) !important;
letter-spacing: .018em;
font-style: italic;
}
.ritualStrip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 26px;
align-items: stretch;
max-width: min(1180px, 96vw);
margin-left: auto;
margin-right: auto;
}
.ritualPanel {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--panel-radius);
border: 1px solid var(--panel-border);
background: var(--panel-bg);
backdrop-filter: var(--panel-blur);
box-shadow: var(--panel-shadow);
overflow: hidden;
transition:
border-color .22s ease,
transform .22s cubic-bezier(.2,.8,.2,1),
box-shadow .22s ease;
}
.ritualPanel:hover {
border-color: rgba(255,255,255,.26);
transform: none;
box-shadow:
0 40px 96px rgba(0,0,0,.46),
inset 0 1px 0 rgba(255,255,255,.15);
}
.ritualPanel.stepDone {
border-color: rgba(255,205,120,.44);
box-shadow:
0 22px 60px rgba(0,0,0,.32),
0 0 0 1px rgba(255,205,120,.16),
inset 0 1px 0 rgba(255,255,255,.14);
}
.stepBadge {
position: absolute;
top: 14px; right: 14px;
width: 28px; height: 28px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.45);
font-size: 12px; font-weight: 900;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
backdrop-filter: blur(8px);
transition: all .22s ease;
}
.ritualPanel.stepDone .stepBadge {
border-color: rgba(255,205,120,.65);
background: rgba(255,205,120,.18);
color: rgba(255,205,120,.96);
}
.ritualPanelTop {
padding: 18px 50px 15px 20px;
display: flex; flex-direction: column; gap: 4px;
border-bottom: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.018);
}
.ritualStepLabel {
font-size: 10.5px;
font-weight: 900;
letter-spacing: .20em;
text-transform: uppercase;
color: rgba(255,255,255,.34);
line-height: 1;
}
.ritualPanelTitle {
font-size: 22px;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.18;
background: var(--title-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ritualPanelSub {
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,.50);
line-height: 1.45;
letter-spacing: -.006em;
margin-top: 3px;
}
.ritualPanelBody {
padding: 18px 20px 22px;
flex: 1;
display: flex; flex-direction: column;
justify-content: center; gap: 11px;
}
.ritualPanelHighlight {
border-color: rgba(255,205,120,.28);
background:
radial-gradient(ellipse 160% 68% at 50% 0%,
rgba(255,200,100,.16) 0%, transparent 66%),
linear-gradient(168deg, rgba(42,20,76,.86) 0%, rgba(10,52,90,.62) 100%);
}
.ritualPanelHighlight:hover { border-color: rgba(255,205,120,.56); }
.zodiacBadgeMain[src] {
display: block !important;
width: 64px !important; height: 64px !important;
object-fit: contain !important;
margin: 0 auto 10px !important;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.45)) !important;
transition: transform .32s cubic-bezier(.2,.8,.2,1) !important;
}
.zodiacBadgeMain:hover { transform: scale(1.08) rotate(-3deg) !important; }
#zodiacChooser {
display: flex !important; flex-direction: column !important;
align-items: center !important; gap: 9px !important; width: 100% !important;
}
#zodiacRow {
display: flex !important; flex-direction: column !important;
align-items: center !important; gap: 9px !important;
margin: 0 !important; width: 100% !important;
}
#zodiacPill {
width: 100% !important; text-align: center !important;
justify-content: center !important; white-space: normal !important;
font-size: 15px !important; padding: 12px !important;
border-radius: 15px !important; font-weight: 850 !important;
}
.cursorPickBtn {
all: unset; box-sizing: border-box;
width: 100%;
border: 1.5px solid rgba(255,255,255,.22);
background: linear-gradient(135deg, rgba(255,205,120,.14), rgba(155,116,255,.12));
color: rgba(255,255,255,.92);
border-radius: 15px;
padding: 13px 16px;
font-size: 15px;
font-weight: 900;
font-family: inherit;
letter-spacing: .02em;
cursor: pointer; text-align: center;
display: block;
transition: background .16s ease, border-color .16s ease, transform .14s ease;
backdrop-filter: blur(8px);
}
.cursorPickBtn:hover {
background: linear-gradient(135deg, rgba(255,205,120,.22), rgba(155,116,255,.18));
border-color: rgba(255,255,255,.40);
transform: translateY(-2px);
}
.cursorPickBtn:active { transform: translateY(0); }
.cursorSelectLux {
all: unset; box-sizing: border-box;
width: 100%; border-radius: 14px;
padding: 12px 36px 12px 16px;
border: 1.5px solid rgba(255,255,255,.14);
background: rgba(10,6,28,.74);
color: rgba(255,255,255,.74);
font-weight: 800; font-size: 15px;
font-family: inherit;
cursor: pointer; letter-spacing: .01em;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='rgba(255,255,255,.42)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 13px center;
transition: border-color .15s ease, background-color .15s ease;
}
.cursorSelectLux:hover  { border-color: rgba(255,255,255,.30); background-color: rgba(18,10,44,.84); }
.cursorSelectLux:focus  { border-color: rgba(255,205,120,.55); box-shadow: 0 0 0 3px rgba(255,205,120,.11); outline: none; }
.cursorSelectLux option { background: #110828; color: #fff; }
#cursorSelect.cursorSelectLux{
border-color: rgba(255,255,255,.14) !important;
background:
radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,.10), transparent 42%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
rgba(12,8,30,.82) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 10px 24px rgba(0,0,0,.22) !important;
}
#cursorSelect.cursorSelectLux:hover{
border-color: rgba(255,255,255,.22) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 14px 30px rgba(0,0,0,.26) !important;
}
#cursorSelect.cursorSelectLux:focus{
border-color: rgba(255,255,255,.24) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 14px 30px rgba(0,0,0,.26),
0 0 0 3px rgba(255,205,120,.12) !important;
}
.realmGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
}
.realmGrid .chip {
all: unset; box-sizing: border-box;
width: 100% !important;
height: 52px !important;
border: 1.5px solid rgba(255,255,255,.17);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.90);
border-radius: 15px;
font-size: 15px !important;
font-weight: 800 !important;
font-family: inherit !important;
letter-spacing: .01em;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden;
cursor: pointer; user-select: none;
transition: background .14s ease, border-color .14s ease,
transform .14s ease, box-shadow .14s ease;
}
.realmGrid .chip:hover {
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.32);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.realmGrid .chip[aria-pressed="true"] {
background: linear-gradient(135deg,
rgba(255,205,120,.30), rgba(155,116,255,.24));
border-color: rgba(255,205,120,.52);
color: rgba(255,255,255,.99);
box-shadow:
inset 0 0 0 1px rgba(255,205,120,.18),
0 10px 26px rgba(0,0,0,.26);
}
#pickBtn {
width: 100% !important;
font-size: 16.5px !important;
font-weight: 950 !important;
padding: 16px 12px !important;
border-radius: 18px !important;
letter-spacing: .04em !important;
box-shadow:
0 14px 38px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.24) !important;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
#pickBtn:hover {
transform: translateY(-4px) !important;
box-shadow:
0 26px 58px rgba(0,0,0,.40),
inset 0 1px 0 rgba(255,255,255,.30) !important;
filter: brightness(1.08) saturate(1.12) !important;
}
#pickBtn:active { transform: translateY(-1px) !important; }
#panelRevealHint {
font-size: 15px !important;
line-height: 1.75 !important;
color: rgba(255,255,255,.60) !important;
text-align: center !important;
margin: 0 !important;
font-style: italic;
}
.panelRevealActionPill{
display:none;
align-items:center;
justify-content:center;
padding: 10px 14px;
border-radius: 999px;
border: 1.5px solid rgba(155,116,255,.30);
background: linear-gradient(135deg, rgba(155,116,255,.18), rgba(255,205,120,.10));
color: rgba(255,255,255,.90);
font-weight: 900;
letter-spacing: .02em;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.revealReadyMsg {
font-size: 15px; font-weight: 900; line-height: 1.55; text-align: center;
background: linear-gradient(120deg, rgba(255,205,120,.98), rgba(195,145,255,.92));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ritualDivider {
margin: 30px 0 0; height: 1px;
background: linear-gradient(90deg,
transparent 0%, rgba(255,205,120,.16) 22%,
rgba(155,116,255,.26) 50%, rgba(255,205,120,.16) 78%, transparent 100%);
display:none;
}
.ritualDivider::after {
content: "✦";
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
background: var(--bg1, #0c0a24);
padding: 0 16px; font-size: 12px;
color: rgba(255,205,120,.48); letter-spacing: .25em;
}
.ritualMain {
display: grid;
grid-template-columns: minmax(380px, 560px) 1fr;
gap: 22px; margin-top: 24px; align-items: stretch;
}
.ritualMain .stage {
position: sticky; top: 20px; min-height: clamp(280px, 34vh, 440px);
border-radius: var(--panel-radius) !important;
border: 1px solid var(--panel-border) !important;
background: var(--panel-bg) !important;
backdrop-filter: var(--panel-blur) !important;
box-shadow: var(--panel-shadow) !important;
}
.ritualMain .oracle {
position: sticky; top: 20px;
max-height: none;
overflow: visible;
border-radius: var(--panel-radius) !important;
border: 1px solid var(--panel-border) !important;
background: var(--panel-bg) !important;
backdrop-filter: var(--panel-blur) !important;
box-shadow: var(--panel-shadow) !important;
}
.ritualMain .oracle::-webkit-scrollbar { width: 3px; }
.ritualMain .oracle::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 99px; }
@media (max-width: 1050px) {
.ritualStrip { grid-template-columns: repeat(2, 1fr); }
#panelReveal { grid-column: 1 / -1; }
#panelReveal .ritualPanelBody { flex-direction: row; align-items: flex-start; gap: 16px; }
#panelRevealActionPill{ align-self: flex-start; margin-top: 2px; }
}
.ritualMain .oracle.isScrollable{
max-height: calc(100svh - 120px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.12) transparent;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 820px) {
.ritualStrip { grid-template-columns: 1fr 1fr; }
#panelReveal { grid-column: span 2; }
}
@media (max-width: 540px) {
.ritualStrip { grid-template-columns: 1fr; }
#panelReveal { grid-column: span 1; }
}
@media (max-width: 980px) {
.ritualMain { grid-template-columns: 1fr; }
.ritualMain .stage { position: static; min-height: clamp(260px, 30vh, 380px); }
.ritualMain .oracle { position: static; max-height: none; overflow-y: visible; }
}
.ritualBar     { display: none !important; }
.themeWrap     { display: none !important; }
.ritualLayout  { display: contents !important; }
.ritualSidebar { display: none !important; }
.shell { margin-top: 0 !important; box-shadow: none !important;
background: none !important; border: none !important; }
.header {
position: relative;
overflow: hidden;
padding-top: 32px !important;
padding-bottom: 36px !important;
}
.title {
letter-spacing: -0.02em;
font-size: clamp(38px, 4.4vw, 64px) !important;
font-weight: 950 !important;
letter-spacing: -.022em !important;
margin: 8px 0 0 !important;
line-height: 1.08 !important;
}
.headerSpacer {
display: block;
height: 18px;
}
.dateLine {
margin-top: 28px;
font-size: clamp(12px, 1.0vw, 15px) !important;
color: rgba(255,255,255,.46) !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
margin-bottom: 18px !important;
}
.sub {
margin-bottom: 4px !important;
font-size: clamp(15px, 1.2vw, 18px) !important;
}
.subWhisper {
margin: 6px auto 0 !important;
font-size: clamp(13px, 0.95vw, 15px) !important;
color: rgba(255,255,255,.44) !important;
}
.shootingStarsCanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
display: block;
overflow: hidden;
}
.header > *:not(.shootingStarsCanvas) { position: relative; z-index: 1; }
.cursorWidget {
margin-top: 14px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.11);
background:
linear-gradient(135deg, rgba(155,116,255,.10), rgba(255,205,120,.07));
backdrop-filter: blur(18px);
padding: 12px 20px;
display: flex;
align-items: center;
}
.cursorWidgetInner {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
flex-wrap: wrap;
}
.cursorWidgetIcon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
}
.cursorWidgetText {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1 1 160px;
}
.cursorWidgetTitle {
font-size: 14px;
font-weight: 900;
color: rgba(255,255,255,.74);
letter-spacing: .02em;
}
.cursorWidgetSub {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,.44);
letter-spacing: .01em;
font-style: italic;
}
.cursorWidget .cursorSelectLux {
flex: 1 1 180px;
min-width: 160px;
max-width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (hover: none) and (pointer: coarse) {
.cursorWidget { display: none !important; }
}
.realmGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
}
.realmGrid .chip {
all: unset;
box-sizing: border-box;
width: 100% !important;
min-height: 52px !important;
height: auto !important;
padding: 10px 6px !important;
border: 1.5px solid rgba(255,255,255,.17);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.90);
border-radius: 15px;
font-size: 14px !important;
font-weight: 800 !important;
font-family: inherit !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all;
overflow: visible !important;
cursor: pointer;
user-select: none;
transition: background .14s, border-color .14s, transform .14s, box-shadow .14s;
-webkit-tap-highlight-color: transparent;
}
.realmGrid .chip:hover {
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.32);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.realmGrid .chip[aria-pressed="true"] {
background: linear-gradient(135deg, rgba(255,205,120,.30), rgba(155,116,255,.24));
border-color: rgba(255,205,120,.52);
color: rgba(255,255,255,.99);
box-shadow: inset 0 0 0 1px rgba(255,205,120,.18), 0 10px 26px rgba(0,0,0,.26);
}
.realmGrid .chip .chipEmoji { font-size: 18px; line-height: 1; flex-shrink: 0; }
.todayRitual{
margin: 0 0 8px;
padding: 14px 16px 13px;
border-radius: 20px;
border: 1px solid rgba(155,116,255,.20);
background:
radial-gradient(900px 240px at 50% 0%, rgba(255,255,255,.08), transparent 70%),
linear-gradient(150deg, rgba(155,116,255,.13), rgba(255,205,120,.09));
box-shadow: 0 12px 36px rgba(0,0,0,.22);
}
.todayRitualPill{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
font-size: 11px;
font-weight: 950;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
margin-bottom: 10px;
}
.todayRitualPrompt{
font-size: 15px;
line-height: 1.55;
font-weight: 860;
color: rgba(255,255,255,.94);
margin-bottom: 10px;
}
.todayRitualPrompt:empty{display:none;}
.todayRitualPrompt .todayPromptLine{
display:block;
}
.todayRitualPrompt .todayPromptLine2{
margin-top: 4px;
font-size: 0.86em;
font-weight: 650;
opacity: .90;
}
.todayRitualQuestion{
font-size: 18px;
line-height: 1.55;
font-weight: 700;
letter-spacing: -.015em;
color: rgba(255,255,255,.90);
}
.journalEditorWrap {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
.journalRichToolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px;
padding: 7px 10px;
border-radius: 20px 20px 0 0;
border: none;
border-bottom: 1px solid rgba(255,255,255,.07);
background: rgba(8,4,22,.70);
backdrop-filter: blur(12px);
}
.jrtBtn {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 7px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
color: rgba(255,255,255,.62);
cursor: pointer;
transition: background .12s, color .12s, transform .10s;
user-select: none;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.jrtBtn:hover { background: rgba(255,255,255,.10); color: rgba(255,255,255,.92); }
.jrtBtn:active { transform: scale(.94); }
.jrtBtn.active { background: rgba(155,116,255,.22); color: rgba(255,205,120,.95); }
.jrtSep {
display: none;
}
.jrtColorWrap {
position: relative;
display: inline-flex;
align-items: center;
}
.jrtColorBtn {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 7px;
cursor: pointer;
font-size: 12px;
transition: background .12s;
-webkit-tap-highlight-color: transparent;
}
.jrtColorBtn:hover { background: rgba(255,255,255,.10); }
.jrtColorInput {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%; height: 100%;
border: none;
padding: 0;
}
.jrtEmojiPicker {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 9999;
background: rgba(12,6,32,.98);
border: 1px solid rgba(255,255,255,.14);
border-radius: 16px;
padding: 0;
box-shadow: 0 24px 64px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.07);
backdrop-filter: blur(28px) saturate(160%);
display: none;
flex-direction: column;
width: 300px;
overflow: hidden;
}
.jrtEmojiPicker.open { display: flex; }
.jrtEmojiTabs {
display: flex;
gap: 2px;
padding: 8px 8px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.jrtEmojiTabs::-webkit-scrollbar { display: none; }
.jrtEmojiTab {
all: unset;
box-sizing: border-box;
padding: 6px 9px;
border-radius: 8px 8px 0 0;
font-size: 16px;
cursor: pointer;
color: rgba(255,255,255,.44);
transition: background .12s, color .12s;
flex-shrink: 0;
line-height: 1;
}
.jrtEmojiTab:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.80); }
.jrtEmojiTab.active {
background: rgba(155,116,255,.18);
color: rgba(255,255,255,.95);
border-bottom: 2px solid rgba(255,205,120,.70);
}
.jrtEmojiGrid {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 10px;
max-height: 230px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(155,116,255,.30) transparent;
}
.jrtEmojiGrid::-webkit-scrollbar { width: 4px; }
.jrtEmojiGrid::-webkit-scrollbar-track { background: transparent; }
.jrtEmojiGrid::-webkit-scrollbar-thumb { background: rgba(155,116,255,.30); border-radius: 99px; }
.jrtEmojiBtn {
all: unset;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
font-size: 19px;
cursor: pointer;
transition: background .10s, transform .10s;
flex-shrink: 0;
}
.jrtEmojiBtn:hover { background: rgba(255,255,255,.11); transform: scale(1.15); }
.jrtEmojiBtn:active { transform: scale(.96); }
.journalRichContent {
width: 100%;
box-sizing: border-box;
min-height: 140px;
border-radius: 0;
border: none;
background: rgba(8,4,22,.52);
color: rgba(255,255,255,.74);
font-size: 14.5px;
font-weight: 500;
font-family: inherit;
line-height: 1.72;
padding: 16px 18px 18px;
outline: none;
transition: background .15s ease;
-webkit-tap-highlight-color: transparent;
overflow-y: auto;
word-break: break-word;
white-space: pre-wrap;
}
.journalRichContent:empty::before {
content: attr(data-placeholder);
color: rgba(255,255,255,.36);
font-style: italic;
pointer-events: none;
}
.journalRichContent:focus { border-color: rgba(155,116,255,.55); box-shadow: 0 0 0 3px rgba(155,116,255,.10); }
.journalRichContent a { color: rgba(140,218,255,.90); text-decoration: underline; }
.journalRichContent ul, .journalRichContent ol { margin: 6px 0; padding-left: 22px; }
.journalRichContent li { margin: 3px 0; }
.journalTextarea {
width: 100%;
box-sizing: border-box;
min-height: 100px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.14);
background: rgba(8,4,22,.65);
color: rgba(255,255,255,.74);
font-size: 14px;
font-weight: 500;
font-family: inherit;
line-height: 1.65;
padding: 12px 14px;
resize: vertical;
outline: none;
transition: border-color .15s ease;
-webkit-tap-highlight-color: transparent;
display: none;
}
.journalTextarea::placeholder { color: rgba(255,255,255,.36); font-style: italic; }
.journalTextarea:focus { border-color: rgba(155,116,255,.55); box-shadow: 0 0 0 3px rgba(155,116,255,.10); }
.journalMetaCard {
border-radius: 16px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
overflow: visible;
position: relative;
}
.journalMetaDivider {
height: 1px;
background: rgba(255,255,255,.07);
margin: 0 16px;
}
.journalTagsBlock { padding: 14px 16px 12px; }
.journalMoodBlock { padding: 12px 16px 14px; position: relative; }
.journalEditorBlock { position: relative; }
.journalSectionMicro {
font-size: 10px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-bottom: 9px;
}
.journalTagsWrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
position: relative;
}
.journalTag {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 0;
padding: 4px 10px 4px 7px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.11);
background: rgba(255,255,255,.055);
color: rgba(255,255,255,.70);
font-size: 12px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background .13s, border-color .13s, color .13s, transform .11s;
user-select: none;
-webkit-tap-highlight-color: transparent;
line-height: 1;
}
.journalTag .jtHash  { color:inherit;font-size:10px;font-weight:900;margin-right:2px; }
.journalTag .jtName  {}
.journalTag:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.90); transform: translateY(-1px); }
.journalTag.selected {
background: linear-gradient(135deg, rgba(155,116,255,.28), rgba(255,205,120,.14));
border-color: rgba(155,116,255,.50);
color: rgba(255,255,255,.96);
box-shadow: 0 3px 12px rgba(155,116,255,.16);
}
.journalTagAdd {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
border: 1px dashed rgba(255,255,255,.16);
color: rgba(255,255,255,.36);
font-size: 11px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: border-color .13s, color .13s, background .13s;
}
.journalTagAdd:hover { border-color: rgba(255,205,120,.42); color: rgba(255,205,120,.80); background: rgba(255,205,120,.05); }
.owTagPopover {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 9998;
background:
radial-gradient(ellipse 160% 60% at 50% 0%, rgba(255,255,255,.08) 0%, transparent 60%),
linear-gradient(160deg, rgba(18,8,48,.98) 0%, rgba(8,30,68,.94) 100%);
border: 1px solid rgba(155,116,255,.30);
border-radius: 20px;
padding: 14px 14px 12px;
box-shadow:
0 20px 60px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(32px) saturate(160%);
-webkit-backdrop-filter: blur(32px) saturate(160%);
min-width: 240px;
max-width: min(300px, calc(100vw - 32px));
flex-direction: column;
gap: 10px;
animation: owPanelSlideIn .18s cubic-bezier(.22,.8,.36,1) both;
}
.owTagPopover.open { display: flex; }
@media (max-width: 480px) {
.owTagPopover {
left: 0;
right: 0;
min-width: 0;
width: 100%;
max-width: none;
}
}
.owPopoverLabel { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 2px; }
.owQuickEmojiRow {
display: flex; flex-wrap: wrap; gap: 3px;
max-height: 76px; overflow-y: auto; scrollbar-width: none;
}
.owQuickEmojiRow::-webkit-scrollbar { display: none; }
.owQuickEmoji {
all: unset; width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 7px; font-size: 16px; cursor: pointer;
transition: background .10s, transform .10s;
}
.owQuickEmoji:hover { background: rgba(255,255,255,.12); transform: scale(1.18); }
.owQuickEmoji.sel { background: rgba(155,116,255,.28); outline: 1.5px solid rgba(155,116,255,.55); }
.owPopoverInputRow { display: flex; gap: 6px; align-items: center; }
.owPopoverInput {
all: unset; box-sizing: border-box; flex: 1;
padding: 7px 11px; border-radius: 99px;
border: 1px solid rgba(155,116,255,.38);
background: rgba(155,116,255,.07);
color: rgba(255,255,255,.90);
font-size: 12px; font-weight: 700; font-family: inherit; outline: none;
}
.owPopoverInput:focus { border-color: rgba(155,116,255,.60); }
.owPopoverConfirm {
all: unset; box-sizing: border-box;
padding: 7px 14px; border-radius: 99px;
background: linear-gradient(135deg, rgba(155,116,255,.28), rgba(255,205,120,.14));
border: 1px solid rgba(155,116,255,.40);
color: rgba(255,255,255,.90);
font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer;
transition: background .13s;
white-space: nowrap;
}
.owPopoverConfirm:hover { background: linear-gradient(135deg, rgba(155,116,255,.42), rgba(255,205,120,.22)); }
.journalMoodWrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
position: relative;
}
.journalMoodBtn {
all: unset;
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 9px 11px 7px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.045);
cursor: pointer;
transition: background .13s, border-color .13s, transform .13s, box-shadow .13s;
-webkit-tap-highlight-color: transparent;
min-width: 52px;
}
.journalMoodBtn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.20); }
.journalMoodBtn.selected {
background: linear-gradient(145deg, rgba(255,205,120,.20), rgba(155,116,255,.14));
border-color: rgba(255,205,120,.40);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255,205,120,.14);
}
.journalMoodEmoji { font-size: 22px; line-height: 1; }
.journalMoodText {
font-size: 10px; font-weight: 700; letter-spacing: .02em;
color: rgba(255,255,255,.48); line-height: 1; white-space: nowrap;
}
.journalMoodBtn.selected .journalMoodText { color: rgba(255,205,120,.82); }
.journalMoodAdd {
all: unset; box-sizing: border-box;
display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
padding: 9px 11px 7px;
border-radius: 16px;
border: 1px dashed rgba(255,255,255,.14);
color: rgba(255,255,255,.34);
cursor: pointer; min-width: 52px;
transition: border-color .13s, color .13s, background .13s;
font-size: 10px; font-weight: 700; font-family: inherit;
}
.journalMoodAdd:hover { border-color: rgba(255,205,120,.40); color: rgba(255,205,120,.70); background: rgba(255,205,120,.05); }
.journalMoodAddIcon { font-size: 20px; line-height: 1; }
.owMoodPopover {
display: none;
position: absolute;
bottom: calc(100% + 10px);
right: 0;
left: auto;
z-index: 9998;
background:
radial-gradient(ellipse 160% 60% at 50% 0%, rgba(255,255,255,.08) 0%, transparent 60%),
linear-gradient(160deg, rgba(18,8,48,.98) 0%, rgba(8,30,68,.94) 100%);
border: 1px solid rgba(255,205,120,.28);
border-radius: 20px;
padding: 14px 14px 12px;
box-shadow:
0 20px 60px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(32px) saturate(160%);
-webkit-backdrop-filter: blur(32px) saturate(160%);
min-width: 260px;
max-width: min(320px, calc(100vw - 32px));
flex-direction: column;
gap: 10px;
animation: owPanelSlideIn .18s cubic-bezier(.22,.8,.36,1) both;
}
.owMoodPopover.open { display: flex; }
@media (max-width: 480px) {
.owMoodPopover {
right: 0;
left: auto;
min-width: 0;
width: calc(100vw - 32px);
max-width: 360px;
}
}
.journalEditorWrap {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
.memEntryTagsRow {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 8px;
align-items: center;
}
.memEntryTag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px 3px 6px;
border-radius: 999px;
border: 1px solid rgba(155,116,255,.28);
background: rgba(155,116,255,.10);
color: rgba(255,255,255,.72);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.memEntryTag .mtEmoji { font-size: 12px; }
.memEntryTag .mtHash  { color:inherit;font-size:10px;font-weight:900; }
.memEntryTag .mtName  {}
.memEntryMood {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(255,205,120,.28);
background: rgba(255,205,120,.10);
color: rgba(255,205,120,.82);
font-size: 11px;
font-weight: 700;
}
.owInlineEditPanel {
display: none;
width: 100%;
margin-top: 8px;
border-radius: 18px;
padding: 14px 14px 12px;
background:
radial-gradient(ellipse 160% 60% at 50% 0%, rgba(255,255,255,.08) 0%, transparent 60%),
linear-gradient(160deg, rgba(18,8,48,.96) 0%, rgba(8,30,68,.92) 100%);
border: 1px solid rgba(155,116,255,.28);
box-shadow:
0 18px 52px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -1px 0 rgba(0,0,0,.12);
backdrop-filter: blur(32px) saturate(160%);
-webkit-backdrop-filter: blur(32px) saturate(160%);
flex-direction: column;
gap: 10px;
animation: owPanelSlideIn .18s cubic-bezier(.22,.8,.36,1) both;
}
.owInlineEditPanel.open { display: flex; }
@keyframes owPanelSlideIn {
from { opacity: 0; transform: translateY(-6px) scale(.98); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.owPanelEditingLabel {
font-size: 10px; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: rgba(255,255,255,.30);
}
.owPanelEditingName {
font-size: 13px; font-weight: 700; color: rgba(255,255,255,.70);
display: inline; margin-left: 6px; font-style: italic;
}
.owTagEditPanel {
border-color: rgba(155,116,255,.30);
}
.owMoodEditPanel {
border-color: rgba(255,205,120,.26);
}
.owCtxInput {
all: unset; box-sizing: border-box; width: 100%;
padding: 9px 14px; border-radius: 99px;
border: 1px solid rgba(155,116,255,.38);
background: rgba(155,116,255,.07);
color: rgba(255,255,255,.92);
font-size: 13px; font-weight: 700; font-family: inherit; outline: none;
transition: border-color .13s;
}
.owCtxInput:focus { border-color: rgba(155,116,255,.65); background: rgba(155,116,255,.11); }
.owCtxRow { display: flex; gap: 8px; }
.owCtxSave {
all: unset; box-sizing: border-box; flex: 1;
padding: 9px 12px; border-radius: 99px; text-align: center;
font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer;
background: linear-gradient(135deg, rgba(155,116,255,.32), rgba(255,205,120,.16));
border: 1px solid rgba(155,116,255,.42);
color: rgba(255,255,255,.92);
transition: background .13s, transform .10s;
-webkit-tap-highlight-color: transparent;
}
.owCtxSave:hover, .owCtxSave:active { background: linear-gradient(135deg, rgba(155,116,255,.46), rgba(255,205,120,.24)); transform: translateY(-1px); }
.owCtxDelete {
all: unset; box-sizing: border-box; flex: 1;
padding: 9px 12px; border-radius: 99px; text-align: center;
font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer;
background: rgba(255,70,70,.09);
border: 1px solid rgba(255,80,80,.22);
color: rgba(255,120,120,.78);
transition: background .13s, transform .10s;
-webkit-tap-highlight-color: transparent;
}
.owCtxDelete:hover, .owCtxDelete:active { background: rgba(255,80,80,.17); color: rgba(255,150,150,.96); transform: translateY(-1px); }
.owMoodCtxEmojiWrap {
display: flex; flex-direction: column; gap: 6px;
}
.owMoodCtxEmojiLabel {
font-size: 10px; font-weight: 800; letter-spacing: .13em;
text-transform: uppercase; color: rgba(255,255,255,.28);
}
.owMoodCtxEmojiStrip {
display: flex; flex-wrap: wrap; gap: 3px;
max-height: 100px; overflow-y: auto; scrollbar-width: none;
}
.owMoodCtxEmojiStrip .owQuickEmoji {
width: 30px; height: 30px; font-size: 17px; border-radius: 8px;
}
.owMoodCtxEmojiStrip .owQuickEmoji.sel {
background: rgba(255,205,120,.22);
outline: 1.5px solid rgba(255,205,120,.55);
}
.owMoodCtxEmojiBtn {
all: unset; width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; font-size: 17px; cursor: pointer;
transition: background .10s, transform .10s;
-webkit-tap-highlight-color: transparent;
}
.owMoodCtxEmojiBtn:hover, .owMoodCtxEmojiBtn:active { background: rgba(255,255,255,.12); transform: scale(1.18); }
.owMoodCtxEmojiBtn.sel { background: rgba(255,205,120,.22); outline: 1.5px solid rgba(255,205,120,.50); }
.owMoodCtxNameInput {
all: unset; box-sizing: border-box; width: 100%;
padding: 9px 14px; border-radius: 99px;
border: 1px solid rgba(255,205,120,.32);
background: rgba(255,205,120,.05);
color: rgba(255,255,255,.92);
font-size: 13px; font-weight: 700; font-family: inherit; outline: none;
transition: border-color .13s;
}
.owMoodCtxNameInput:focus { border-color: rgba(255,205,120,.60); background: rgba(255,205,120,.09); }
.owItemCtxMenu {
display: none !important;
}
.imOTDEntryTags {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center;
}
.imOTDEntryTagPill {
display: inline-flex; align-items: center; gap: 2px;
padding: 2px 7px 2px 5px;
border-radius: 999px;
border: 1px solid rgba(155,116,255,.22);
background: rgba(155,116,255,.08);
font-size: 10px; font-weight: 700; color: rgba(255,255,255,.55);
line-height: 1;
}
.imOTDEntryTagPill .otdTHash { color: rgba(255,255,255,.25); font-size: 9px; font-weight: 900; }
.jrtLinkPopover {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
z-index: 9999;
background: rgba(14,8,36,.97);
border: 1px solid rgba(155,116,255,.30);
border-radius: 14px;
padding: 12px;
box-shadow: 0 20px 56px rgba(0,0,0,.48);
backdrop-filter: blur(24px);
display: none;
flex-direction: column;
gap: 8px;
width: 260px;
}
.jrtLinkPopover.open { display: flex; }
.jrtLinkInput {
all: unset;
box-sizing: border-box;
width: 100%;
padding: 8px 12px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.90);
font-size: 13px;
font-family: inherit;
outline: none;
}
.jrtLinkInput:focus { border-color: rgba(155,116,255,.55); }
.jrtLinkRow { display: flex; gap: 6px; }
.jrtLinkApply, .jrtLinkCancel {
all: unset;
box-sizing: border-box;
flex: 1;
padding: 7px 10px;
border-radius: 9px;
text-align: center;
font-size: 12px;
font-weight: 800;
font-family: inherit;
cursor: pointer;
transition: background .12s;
}
.jrtLinkApply { background: rgba(155,116,255,.25); color: rgba(255,255,255,.92); border: 1px solid rgba(155,116,255,.40); }
.jrtLinkApply:hover { background: rgba(155,116,255,.38); }
.jrtLinkCancel { background: rgba(255,255,255,.06); color: rgba(255,255,255,.56); border: 1px solid rgba(255,255,255,.12); }
.jrtLinkCancel:hover { background: rgba(255,255,255,.12); }
.journalSaveBtn {
all: unset;
box-sizing: border-box;
width: 100%;
border: 1.5px solid rgba(155,116,255,.30);
background: linear-gradient(135deg, rgba(155,116,255,.16), rgba(255,205,120,.10));
color: rgba(255,255,255,.74);
border-radius: 13px;
padding: 11px 14px;
font-size: 14px;
font-weight: 880;
font-family: inherit;
text-align: center;
cursor: pointer;
display: block;
transition: background .16s, border-color .16s, transform .14s;
-webkit-tap-highlight-color: transparent;
}
.journalSaveBtn:hover {
background: linear-gradient(135deg, rgba(155,116,255,.26), rgba(255,205,120,.18));
border-color: rgba(155,116,255,.50);
transform: translateY(-1px);
}
.journalSaveBtn:active { transform: translateY(0); }
.journalSavedMsg {
font-size: 13px;
color: rgba(255,205,120,.80);
text-align: center;
font-style: italic;
margin-top: 4px;
}
.journalSaveHint {
font-size: 11.5px;
color: rgba(255,205,120,.60);
text-align: center;
font-style: italic;
margin-top: 5px;
letter-spacing: .005em;
min-height: 16px;
transition: opacity .2s;
}
.calDay.hasCardOnly .calDayDot {
background: rgba(255,255,255,.22) !important;
border: 1.5px solid rgba(255,205,120,.30) !important;
box-shadow: none !important;
}
.calDay.hasCardOnly {
opacity: .72;
}
.memDetailUnwritten {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 22px 16px 24px;
text-align: center;
border-radius: 18px;
border: 1.5px dashed rgba(255,205,120,.22);
background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(155,116,255,.07), transparent 65%),
rgba(255,255,255,.03);
margin-top: 10px;
}
.memDetailUnwrittenIcon {
font-size: 32px;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.28));
animation: unwrittenPulse 3.2s ease-in-out infinite;
}
@keyframes unwrittenPulse {
0%, 100% { opacity: .80; transform: scale(1); }
50%       { opacity: 1;   transform: scale(1.06); }
}
.memDetailUnwrittenTitle {
font-size: 15px;
font-weight: 800;
color: rgba(255,205,120,.78);
letter-spacing: -.01em;
line-height: 1.3;
margin: 0;
}
.memDetailUnwrittenSub {
font-size: 13px;
color: rgba(255,255,255,.53);
line-height: 1.65;
font-style: italic;
margin: 0;
max-width: 280px;
text-wrap: balance;
}
.memDetailAddReflectionBtn {
all: unset;
box-sizing:border-box;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
width:100%;
gap:8px;
height:52px;padding:0 24px 6px;
border-radius:16px;
font-size:13px;
font-weight:700;
font-family:inherit;
letter-spacing: .07em;
text-transform: uppercase;
cursor: pointer;
color: rgba(255, 218, 150, 0.95);
background: linear-gradient(135deg,
rgba(30, 20, 55, 0.92) 0%,
rgba(22, 14, 44, 0.97) 100%);
border: 1px solid transparent;
background-clip: padding-box;
box-shadow:
0 0 0 1px rgba(255,205,120,.30),
0 0 0 1.5px rgba(155,100,255,.20),
inset 0 1px 0 rgba(255,220,140,.10),
0 8px 32px rgba(0,0,0,.45),
0 2px 8px rgba(0,0,0,.30);
transition:
color .18s,
box-shadow .18s,
transform .14s,
background .18s;
}
.memDetailAddReflectionBtn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg,
rgba(255, 210, 100, 0.55) 0%,
rgba(180, 130, 255, 0.40) 50%,
rgba(255, 210, 100, 0.30) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.memDetailAddReflectionBtn::after {
content: '✦';
font-size: 9px;
opacity: 0.6;
color: rgba(255,210,100,0.8);
margin-right: 2px;
}
.memDetailAddReflectionBtn:hover {
color: rgba(255, 230, 170, 1);
box-shadow:
0 0 0 1px rgba(255,205,120,.55),
0 0 0 1.5px rgba(175,120,255,.35),
inset 0 1px 0 rgba(255,220,140,.18),
0 12px 40px rgba(0,0,0,.55),
0 0 24px rgba(255,180,80,.12),
0 0 48px rgba(140,80,255,.08);
transform: translateY(-2px);
}
.memDetailAddReflectionBtn:active {
transform: translateY(0);
box-shadow:
0 0 0 1px rgba(255,205,120,.40),
0 4px 16px rgba(0,0,0,.40);
}
#memDetailUnwrittenPane.isEditing {
border: none !important;
background: none !important;
padding: 0 !important;
gap: 0 !important;
}
.memDetailEditorWrap {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.memDetailEditorTextarea {
width: 100%;
box-sizing: border-box;
min-height: 90px;
border-radius: 14px;
border: 1.5px solid rgba(155,116,255,.35);
background: rgba(8,4,22,.65);
color: rgba(255,255,255,.74);
font-size: 14px;
font-weight: 500;
font-family: inherit;
line-height: 1.65;
padding: 12px 14px;
resize: vertical;
outline: none;
transition: border-color .15s ease;
}
.memDetailEditorTextarea::placeholder { color: rgba(255,255,255,.30); font-style: italic; }
.memDetailEditorTextarea:focus { border-color: rgba(155,116,255,.65); box-shadow: 0 0 0 3px rgba(155,116,255,.12); }
.memDetailEditorActions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.memDetailEditorSave {
all: unset;
box-sizing: border-box;
border: 1.5px solid rgba(155,116,255,.40);
background: linear-gradient(135deg, rgba(155,116,255,.22), rgba(255,205,120,.14));
color: rgba(255,255,255,.92);
border-radius: 12px;
padding: 9px 18px;
font-size: 13px;
font-weight: 860;
font-family: inherit;
cursor: pointer;
transition: background .14s, transform .12s;
}
.memDetailEditorSave:hover { background: linear-gradient(135deg,rgba(155,116,255,.34),rgba(255,205,120,.22)); transform: translateY(-1px); }
.memDetailEditorCancel {
all: unset;
box-sizing: border-box;
color: rgba(255,255,255,.44);
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
padding: 9px 12px;
border-radius: 12px;
transition: color .12s;
}
.memDetailEditorCancel:hover { color: rgba(255,255,255,.72); }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (hover: none) and (pointer: coarse) {
.ritualMain .stage  { position: static !important; }
.ritualMain .oracle { position: static !important; max-height: none !important; overflow-y: visible !important; }
.realmGrid .chip { min-height: 56px !important; font-size: 15px !important; }
#pickBtn { padding: 18px 12px !important; font-size: clamp(16px, 1.35vw, 18px) !important; }
#zodiacPill { padding: 14px 12px !important; font-size: 16px !important; }
.journalTextarea { font-size: 16px !important; }
.ritualPanel:hover { transform: none; }
}
@media (min-width: 861px) and (max-width: 1440px) {
.ritualStrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#panelDraw,
#panelJournal{
grid-column: auto !important;
flex-direction: column !important;
align-items: stretch !important;
}
}
@media (max-width: 860px) {
.ritualStrip { grid-template-columns: 1fr; }
#panelDraw,
#panelJournal{
grid-column: auto !important;
}
}
@media (max-width: 540px) {
.ritualStrip { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.shootingStarsCanvas { display: none !important; }
}
.panelJournalHint {
font-size: 13px;
color: rgba(255,255,255,.54);
line-height: 1.6;
margin: 0;
font-style: italic;
text-align: center;
}
.journalScrollBtn {
all: unset; box-sizing: border-box;
width: 100%;
border: 1.5px solid rgba(155,116,255,.30);
background: linear-gradient(135deg, rgba(155,116,255,.18), rgba(255,205,120,.10));
color: rgba(255,255,255,.90);
border-radius: 14px;
padding: 11px 14px;
font-size: 14px; font-weight: 880;
font-family: inherit;
text-align: center; cursor: pointer;
display: block;
transition: background .16s, border-color .16s, transform .14s;
-webkit-tap-highlight-color: transparent;
}
.journalScrollBtn:hover {
background: linear-gradient(135deg, rgba(155,116,255,.28), rgba(255,205,120,.18));
border-color: rgba(155,116,255,.55);
transform: translateY(-1px);
}
.journalSection {
margin-top: 32px;
border-radius: 28px;
border: 1px solid rgba(255,255,255,.13);
background:
radial-gradient(ellipse 120% 50% at 50% 0%, rgba(155,116,255,.12) 0%, transparent 60%),
radial-gradient(ellipse 80% 60% at 80% 100%, rgba(255,205,120,.07) 0%, transparent 55%),
linear-gradient(168deg, rgba(22,12,52,.80) 0%, rgba(8,40,78,.55) 100%);
backdrop-filter: blur(24px);
box-shadow: 0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
overflow: hidden;
padding: 32px 32px 36px;
}
@media (max-width: 640px) { .journalSection { padding: 22px 18px 26px; border-radius: 22px; } }
.journalSectionHeader {
display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px;
}
.journalSectionIcon { font-size: 36px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.journalSectionTitle {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 950; margin: 0 0 6px;
background: var(--title-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
letter-spacing: -.02em;
}
.journalSectionSub {
font-size: 15px; color: rgba(255,255,255,.52);
margin: 0; font-style: italic; line-height: 1.5;
}
.journalWriteArea {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
margin-bottom: 32px;
align-items: start;
}
@media (max-width: 700px) {
.journalWriteArea { grid-template-columns: 1fr; }
.journalCardPreview { max-width: 180px; margin: 0 auto; }
}
.journalCardPreview {
aspect-ratio: 2/3;
border-radius: 22px;
border: 1.5px solid rgba(255,255,255,.16);
background:
radial-gradient(ellipse 120% 80% at 50% 0%, rgba(155,116,255,.20), transparent 60%),
linear-gradient(165deg, rgba(28,14,60,.85), rgba(8,44,80,.60));
display: flex; align-items: center; justify-content: center; flex-direction: column;
text-align: center; padding: 0;
box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,205,120,.06);
transition: border-color .2s ease, box-shadow .2s ease;
overflow: hidden;
position: relative;
}
.journalCardPreview.hasCard {
border-color: rgba(255,205,120,.45);
box-shadow: 0 28px 70px rgba(0,0,0,.60), 0 0 30px rgba(255,205,120,.12), 0 0 0 1px rgba(255,205,120,.15);
}
.journalCardPreviewLabel {
font-size: 12px; color: rgba(255,255,255,.38); font-style: italic; line-height: 1.5; padding: 16px;
}
.journalCardPreview img {
width: 100%; height: 100%; object-fit: cover; border-radius: 0;
filter: drop-shadow(0 0 0 transparent);
display: block;
}
.journalCardName {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 28px 12px 12px;
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
font-size: 13px; font-weight: 800; color: rgba(255,205,120,.95);
text-align: center; line-height: 1.3;
letter-spacing: .04em;
border-radius: 0 0 22px 22px;
}
.journalWriteRight { display: flex; flex-direction: column; gap: 8px; }
.journalTextarea {
width: 100%; box-sizing: border-box;
min-height: 160px;
border-radius: 16px;
border: 1.5px solid rgba(255,255,255,.14);
background: rgba(8,4,22,.68);
color: rgba(255,255,255,.90);
font-size: 15px; font-weight: 500; font-family: inherit;
line-height: 1.72; padding: 16px 18px; resize: vertical; outline: none;
transition: border-color .15s ease;
-webkit-tap-highlight-color: transparent;
}
.journalTextarea::placeholder { color: rgba(255,255,255,.32); font-style: italic; }
.journalTextarea:focus {
border-color: rgba(155,116,255,.55);
box-shadow: 0 0 0 3px rgba(155,116,255,.10);
}
@media (hover: none) { .journalTextarea { font-size: 16px !important; } }
.journalActions {
display: flex; align-items: center; justify-content: flex-end; gap: 12px;
flex-wrap: wrap;
}
.journalDateStamp {
display: none;
font-size: 13px; color: rgba(255,255,255,.36);
letter-spacing: .06em; font-style: italic;
}
.journalSaveBtn {
all: unset; box-sizing: border-box;
border: 1.5px solid rgba(155,116,255,.35);
background: linear-gradient(135deg, rgba(155,116,255,.22), rgba(255,205,120,.14));
color: rgba(255,255,255,.92);
border-radius: 14px; padding: 12px 22px;
font-size: 15px; font-weight: 880; font-family: inherit;
cursor: pointer; white-space: nowrap;
transition: background .16s, border-color .16s, transform .14s, box-shadow .14s;
-webkit-tap-highlight-color: transparent;
}
.journalSaveBtn:hover {
background: linear-gradient(135deg, rgba(155,116,255,.34), rgba(255,205,120,.22));
border-color: rgba(155,116,255,.60); transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.journalSaveBtn:active { transform: translateY(0); }
.journalCalSection { margin-top: 10px; }
.journalCalHeader {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
}
.journalCalNav {
all: unset; box-sizing: border-box;
width: 36px; height: 36px; border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.80);
font-size: 20px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .14s, border-color .14s, transform .12s;
font-family: inherit;
}
.journalCalNav:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.30); transform: scale(1.08); }
.journalCalTitle {
font-size: clamp(16px, 1.6vw, 20px); font-weight: 900;
color: rgba(255,255,255,.74); margin: 0; letter-spacing: .01em;
}
.journalCalGrid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.calDayHeader {
font-size: 11px; font-weight: 800; letter-spacing: .10em;
text-transform: uppercase; color: rgba(255,255,255,.38);
text-align: center; padding: 6px 0;
}
.calDay {
aspect-ratio: 1;
border-radius: 12px;
border: 1.5px solid transparent;
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: rgba(255,255,255,.50);
cursor: default; user-select: none;
transition: background .14s, border-color .14s, transform .12s;
position: relative; gap: 2px;
min-height: 44px;
}
.calDay.empty { opacity: 0; pointer-events: none; }
.calDay.today {
border-color: rgba(255,205,120,.55);
color: rgba(255,205,120,.95);
background: rgba(255,205,120,.08);
}
.calDay.hasEntry {
border-color: rgba(155,116,255,.45);
background: linear-gradient(135deg, rgba(155,116,255,.18), rgba(255,205,120,.10));
color: rgba(255,255,255,.92);
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.24);
}
.calDay.hasEntry:hover {
transform: scale(1.06);
border-color: rgba(155,116,255,.70);
box-shadow: 0 8px 24px rgba(0,0,0,.36);
}
.calDay.hasEntry.today { border-color: rgba(255,205,120,.80); }
.calDayDot {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(255,205,120,.80);
flex-shrink: 0;
}
.journalEntryModal {
display: none; position: fixed; inset: 0; z-index: 9990;
align-items: center; justify-content: center;
padding: 20px;
}
.journalEntryModal.show { display: flex; }
.journalEntryModalBg {
position: absolute; inset: 0;
background: rgba(4,2,14,.78);
backdrop-filter: blur(12px);
cursor: pointer;
}
.journalEntryModalCard {
position: relative; z-index: 1;
width: 100%; max-width: 540px;
border-radius: 28px;
border: 1px solid rgba(255,255,255,.18);
background:
radial-gradient(ellipse 140% 60% at 50% 0%, rgba(155,116,255,.22), transparent 60%),
linear-gradient(168deg, rgba(28,14,60,.95), rgba(8,44,80,.90));
box-shadow: 0 40px 100px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.12);
padding: 32px 30px 28px;
overflow-y: auto; max-height: 90vh;
animation: modalIn .26s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes modalIn {
from { opacity:0; transform: scale(.92) translateY(18px); }
to   { opacity:1; transform: scale(1)  translateY(0); }
}
.journalEntryModalClose {
all: unset; position: absolute; top: 16px; right: 18px;
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
color: rgba(255,255,255,.70); font-size: 14px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-family: inherit;
transition: background .14s, color .14s;
}
.journalEntryModalClose:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.95); }
.journalEntryModalDate {
font-size: 12px; font-weight: 800; letter-spacing: .15em;
text-transform: uppercase; color: rgba(255,205,120,.70);
margin-bottom: 20px;
}
.journalEntryModalCard2 {
width: 100px; margin: 0 auto 20px;
border-radius: 14px; overflow: hidden;
box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.journalEntryModalCard2 img { width: 100%; display: block; }
.journalEntryModalCard2.noCard {
width: 100px; aspect-ratio: 2/3;
background: rgba(255,255,255,.05);
border: 1.5px solid rgba(255,255,255,.12);
display: flex; align-items: center; justify-content: center;
font-size: 28px; border-radius: 14px;
}
.journalEntryModalText {
font-size: 16px; line-height: 1.78;
color: rgba(255,255,255,.82); white-space: pre-wrap;
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 18px; margin-top: 4px;
}
.realmGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; width: 100%;
}
.realmGrid .chip.realmChip {
all: unset; box-sizing: border-box;
width: 100% !important;
min-height: 56px !important;
border: 1.5px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.07);
border-radius: 16px;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 10px 6px !important;
cursor: pointer; user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
overflow: hidden;
}
.realmChip .realmEmoji {
font-size: 22px; line-height: 1; display: block;
}
.realmChip .realmLabel {
font-size: 13px !important;
font-weight: 800 !important;
font-family: inherit !important;
color: rgba(255,255,255,.74);
letter-spacing: .02em;
text-align: center;
line-height: 1;
display: block;
}
.realmGrid .chip.realmChip:hover {
background: rgba(255,255,255,.13);
border-color: rgba(255,255,255,.32);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0,0,0,.30);
}
.realmGrid .chip.realmChip[aria-pressed="true"] {
background: linear-gradient(135deg,
rgba(255,222,156,.68) 0%,
rgba(241,205,195,.60) 42%,
rgba(205,186,255,.64) 72%,
rgba(188,222,255,.66) 100%);
border-color: rgba(185,160,255,.80);
box-shadow:
0 0 0 1px rgba(255,255,255,.32) inset,
0 14px 34px rgba(112,84,190,.20),
0 8px 20px rgba(0,0,0,.14);
}
.realmGrid .chip.realmChip[aria-pressed="true"] .realmLabel {
color: rgba(74,58,22,.96);
text-shadow: none;
}
.realmChip[data-theme="plant"]:hover   { border-color: rgba(120,220,100,.45); }
.realmChip[data-theme="animal"]:hover  { border-color: rgba(255,180,120,.45); }
.realmChip[data-theme="mushroom"]:hover{ border-color: rgba(220,140,200,.45); }
.realmChip[data-theme="mineral"]:hover { border-color: rgba(140,210,255,.45); }
.realmChip[data-theme="plant"][aria-pressed="true"]   { background: linear-gradient(135deg, rgba(238,223,171,.76), rgba(205,243,178,.72) 42%, rgba(207,193,255,.68)); border-color: rgba(136,204,110,.88); }
.realmChip[data-theme="animal"][aria-pressed="true"]  { background: linear-gradient(135deg, rgba(255,224,168,.76), rgba(255,205,168,.72) 42%, rgba(211,195,255,.68)); border-color: rgba(255,186,118,.90); }
.realmChip[data-theme="mushroom"][aria-pressed="true"]{ background: linear-gradient(135deg, rgba(255,223,175,.74), rgba(244,199,216,.72) 40%, rgba(212,190,255,.70)); border-color: rgba(214,146,206,.90); }
.realmChip[data-theme="mineral"][aria-pressed="true"] { background: linear-gradient(135deg, rgba(252,223,178,.72), rgba(214,205,255,.68) 45%, rgba(188,232,255,.76)); border-color: rgba(142,211,255,.92); }
#pickBtn {
all: unset !important; box-sizing: border-box !important;
width: 100% !important;
display: block !important;
background: linear-gradient(140deg,
rgba(255,210,130,1.0) 0%,
rgba(200,145,255,0.95) 55%,
rgba(130,215,255,0.88) 100%) !important;
color: rgba(14,8,32,.96) !important;
border-radius: 18px !important;
font-size: 16px !important;
font-weight: 950 !important;
font-family: inherit !important;
letter-spacing: .04em !important;
text-align: center !important;
padding: 16px 12px !important;
cursor: pointer !important;
box-shadow:
0 16px 42px rgba(0,0,0,.32),
0 1px 0 rgba(255,255,255,.35) inset,
0 -1px 0 rgba(0,0,0,.18) inset !important;
transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, filter .16s ease !important;
-webkit-tap-highlight-color: transparent !important;
position: relative; overflow: hidden;
}
#pickBtn::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, transparent 55%);
border-radius: inherit; pointer-events: none;
}
#pickBtn:hover {
transform: translateY(-4px) !important;
filter: brightness(1.08) saturate(1.14) !important;
box-shadow:
0 24px 58px rgba(0,0,0,.40),
0 1px 0 rgba(255,255,255,.40) inset,
0 -1px 0 rgba(0,0,0,.20) inset !important;
}
#pickBtn:active { transform: translateY(-1px) !important; filter: brightness(.98) !important; }