/* ===== TNT style.css v1 reborn ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;}
:root{
--bg:#06080c;--bg2:#0a0e14;
--gold:#d4c8a0;--gold-dim:#a89070;--gold-ghost:#706040;
--cyan:#6ec6ca;--rose:#c4788a;
--text:#d0d4dc;--text-dim:#808898;--text-ghost:#5a6880;
--border:rgba(212,196,166,0.08);
--border-subtle:rgba(212,196,166,0.08);
--border-default:rgba(212,196,166,0.15);
--border-strong:rgba(212,196,166,0.30);
--font-display:'Noto Serif',Georgia,serif;
--font-cinzel:'Cinzel','Noto Serif',Georgia,serif;
--font-body:'Manrope',system-ui,sans-serif;
/* Z-index scale */
--z-canvas:1;
--z-overlay:40;
--z-modal:100;
--z-toast:500;
--z-particles:900;
}
/* Material Symbols */
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;-webkit-font-smoothing:antialiased;}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body);}
/* STARFIELD */
.star{position:fixed;border-radius:50%;background:rgba(255,255,255,0.6);pointer-events:none;}
/* v2.6.9 — when user has picked their decree color, the gradient IS the
background; starfield body decor no longer applies. Class is toggled on
body at onboarding entry + Mental Equivalent, cleared on return to home. */
body.decree-bg-active #starfield{display:none;}
/* v1.16.93 — same suppression for the Wisdom's Treasures reading
screens (library shelf / book TOC / chapter). The reader is a
clean field; the global starfield bled through their transparent
backgrounds. Class toggled in goTo() on the three library ids. */
body.reader-bg-active #starfield{display:none;}
/* v2.6.12 — $ glyph summoned on each keystroke in Name Your Number.
Starts at a random viewport edge, flies to the input center (via
--tx/--ty CSS vars set inline), fades on arrival. ~900ms. */
/* v1.9.0 — RETIRED: .threshold-goal-glyph + @keyframes thresholdGoalGlyphFly (only used by retired _thresholdSummonGlyph). */
/* SCREENS */
.screen{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:stretch;z-index:1;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);}
.screen.hidden{display:none;}
/* ===== HOME ===== */
#home-screen{justify-content:flex-start;overflow-y:auto;}
.home-scroll{width:100%;min-height:100%;padding:20px 16px 0;display:flex;flex-direction:column;align-items:stretch;gap:16px;box-sizing:border-box;}
.session-cam-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;z-index:0;}
.session-cam-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:1;pointer-events:none;}
.session-cam-btn{position:absolute;top:16px;right:16px;z-index:10;background:rgba(0,0,0,0.4);border:1px solid rgba(200,184,152,0.2);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.session-cam-btn.cam-on{border-color:rgba(240,192,64,0.6);background:rgba(240,192,64,0.1);}
.session-auto-btn{position:absolute;bottom:80px;right:16px;z-index:10;background:rgba(0,0,0,0.5);border:1px solid rgba(200,184,152,0.25);border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.session-auto-btn.auto-on{border-color:rgba(240,192,64,0.8);color:var(--gold);background:rgba(240,192,64,0.1);}
.settings-btn{position:fixed;top:16px;right:16px;background:none;border:none;color:var(--text-ghost);font-size:18px;cursor:pointer;z-index:10;padding:8px;}
.home-top{text-align:center;margin-bottom:0;}
.home-icon{margin-bottom:12px;animation:gentlePulse 5s ease-in-out infinite;}
@keyframes gentlePulse{0%,100%{opacity:0.85;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}}
.home-title{display:flex;align-items:baseline;justify-content:center;gap:2px;line-height:1.3;margin-bottom:0;}
.home-title-moolah{font-family:var(--font-body);font-size:22px;font-weight:300;letter-spacing:0.14em;color:var(--text-dim);}
.home-title-japa{font-family:var(--font-cinzel);font-size:52px;font-weight:900;letter-spacing:0.1em;background:linear-gradient(180deg,#f0c040 0%,#d4a843 50%,#a08030 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-bottom:8px;}
.home-sub{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--text-ghost);letter-spacing:0.3px;}
.start-btn{width:100%;max-width:420px;background:rgba(212,196,166,0.06);border:1px solid rgba(212,196,166,0.22);border-radius:50px;padding:14px 0;font-family:var(--font-cinzel);font-size:17px;letter-spacing:3px;color:var(--gold);cursor:pointer;transition:background 0.2s;margin-bottom:8px;}
.start-btn:active{background:rgba(212,196,166,0.15);}
/* TABS */
.home-tabs{display:flex;background:rgba(212,196,166,0.04);border:1px solid var(--border);border-radius:50px;padding:4px;width:100%;gap:2px;}
.home-tab{flex:1;padding:8px 2px;background:none;border:none;border-radius:50px;color:var(--text-dim);font-family:var(--font-body);font-size:11px;font-weight:300;letter-spacing:0.3px;cursor:pointer;transition:all 0.25s;display:flex;align-items:center;justify-content:center;white-space:nowrap;min-width:0;}
.home-tab.active{background:rgba(212,196,166,0.12);color:var(--gold);}
.home-tab-panel{display:none;width:100%;flex-direction:column;align-items:center;gap:18px;min-height:800px;}
.home-tab-panel.active{display:flex;}
/* SANKALPA CARD */
.mantra-card{background:linear-gradient(135deg,rgba(212,196,166,0.05),rgba(110,198,202,0.02));border:1px solid var(--border);border-radius:20px;padding:24px 28px;text-align:center;width:100%;}
.mantra-card-label{font-size:11px;color:var(--text-ghost);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;font-family:var(--font-body);}
.mantra-card-text{font-family:var(--font-display);font-size:28px;color:var(--gold);margin-bottom:8px;line-height:1.3;}
.mantra-card-meaning{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--text-dim);line-height:1.5;}
.visual-anchor-wrap{width:100%;text-align:center;}
.visual-anchor-label{font-size:11px;color:var(--text-ghost);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;font-family:var(--font-body);}
.visual-anchor-preview{width:100%;height:140px;border-radius:16px;border:1px solid var(--border);background-size:cover;background-position:center;}
.anchor-remove-btn{background:none;border:none;font-size:11px;color:var(--text-ghost);letter-spacing:1px;margin-top:8px;cursor:pointer;font-family:var(--font-body);}
.home-btn-row{display:flex;gap:10px;width:100%;}
.draw-btn{flex:1;background:none;border:1px solid var(--border);border-radius:50px;padding:10px 12px;font-family:var(--font-body);font-size:11px;font-weight:300;color:var(--text-dim);letter-spacing:1.5px;cursor:pointer;transition:all 0.3s;}
.draw-btn:active{border-color:rgba(212,196,166,0.2);color:var(--gold);}
.browse-btn{flex:1;background:none;border:1px solid rgba(212,196,166,0.18);border-radius:50px;padding:10px 12px;font-family:var(--font-body);font-size:11px;font-weight:300;color:var(--gold-dim);letter-spacing:1.5px;cursor:pointer;transition:all 0.3s;}
/* MODE CARD */
.mode-card{background:linear-gradient(135deg,rgba(212,196,166,0.04),rgba(110,198,202,0.02));border:1px solid var(--border);border-radius:20px;padding:24px;width:100%;text-align:center;}
.mode-card-desc{font-family:var(--font-display);font-size:19px;font-style:italic;color:var(--text-dim);line-height:1.8;margin-bottom:12px;}
.mode-card-attr{display:block;font-style:normal;font-size:13px;color:var(--gold-ghost);letter-spacing:1px;margin-top:6px;font-family:var(--font-body);}
.mode-card-sub{display:block;margin-top:16px;font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--text-ghost);line-height:1.7;}
.mala-size-label{font-size:11px;color:var(--text-ghost);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;font-family:var(--font-body);}
.size-btns{display:flex;gap:8px;justify-content:center;}
.size-btn{background:none;border:1px solid var(--border);border-radius:50px;padding:7px 18px;font-family:var(--font-display);font-size:16px;color:var(--text-dim);cursor:pointer;transition:all 0.25s;min-width:48px;text-align:center;}
.size-btn.active{border-color:rgba(212,196,166,0.3);color:var(--gold);}
/* METRICS */
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.metric-tile{background:rgba(212,196,166,0.03);border:1px solid var(--border);border-radius:16px;padding:14px;text-align:center;}
.metric-val{font-family:var(--font-display);font-size:28px;color:var(--gold);}
.metric-lbl{font-size:11px;letter-spacing:2.5px;color:var(--text-ghost);text-transform:uppercase;margin-top:3px;font-family:var(--font-body);}
.manifest-btn{width:100%;background:linear-gradient(135deg,rgba(110,198,202,0.08),rgba(110,198,202,0.03));border:1px solid rgba(110,198,202,0.2);border-radius:50px;padding:14px;font-family:var(--font-display);font-size:18px;font-weight:300;color:var(--cyan);letter-spacing:2px;cursor:pointer;}
.community-label{font-size:11px;color:var(--text-ghost);letter-spacing:3px;text-transform:uppercase;width:100%;font-family:var(--font-body);}
.community-feed{width:100%;display:flex;flex-direction:column;gap:8px;}
.community-item{background:rgba(212,196,166,0.03);border:1px solid var(--border);border-radius:12px;padding:12px 16px;}
.community-item-text{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--text-dim);line-height:1.5;}
.community-item-meta{font-size:11px;color:var(--text-ghost);letter-spacing:1px;margin-top:4px;font-family:var(--font-body);}
/* v1.8.0 — SANKALPA CEREMONY CSS retired with #sankalpa-screen (Pre-Session-E flow). See index.html retirement comment. */
/* ===== BROWSE ===== */
#browse-screen{justify-content:flex-start;padding:0;}
.browse-overlay{width:100%;height:100%;background:rgba(6,8,12,0.97);display:flex;flex-direction:column;overflow:hidden;}
.browse-header{display:flex;align-items:center;justify-content:space-between;padding:52px 20px 16px;border-bottom:1px solid var(--border);}
.screen-back{background:none;border:none;color:var(--gold-dim);font-size:22px;cursor:pointer;padding:4px 8px;}
.screen-heading{font-family:var(--font-body);font-size:11px;letter-spacing:4px;color:var(--text-ghost);text-transform:uppercase;}
.browse-list{flex:1;overflow-y:auto;padding:8px 0 40px;}
.browse-category{font-size:11px;letter-spacing:3px;color:var(--gold-ghost);text-transform:uppercase;padding:16px 20px 8px;font-family:var(--font-body);}
.browse-item{padding:14px 20px;cursor:pointer;border-bottom:1px solid rgba(212,196,166,0.04);transition:background 0.2s;}
.browse-item:active{background:rgba(212,196,166,0.06);}
.browse-item-text{font-family:var(--font-display);font-size:22px;color:var(--gold);margin-bottom:3px;}
.browse-item-meaning{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--text-dim);}
.browse-item.selected .browse-item-text{color:var(--cyan);}
/* ===== TAP SESSION ===== */
#session-screen{justify-content:flex-start;padding:0;align-items:stretch;background:#06080c;}
#session-screen .tap-header{background:transparent;}
#session-screen .freq-footer{background:transparent;border-top:none;}
/* MUDRA AT CENTER */
.mudra-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;z-index:10;pointer-events:none;transition:opacity 0.8s,transform 0.8s;}
.mudra-center.hidden{opacity:0;pointer-events:none;}
/* v1.16.54 — Trāṭaka prompt above the bindu. Mirror of the below-bindu
instruction overlay (.tap-instruction / .write-fullpane-hint at
calc(50% + 15px) top-anchored). This one sits at calc(50% - 15px)
bottom-anchored via translate(-50%, -100%) so the element's BOTTOM
edge aligns with the dṛṣṭi ripple's TOP edge — visual symmetry with
the below-bindu text. Names trāṭaka and the bindu directly; respects
the contemplative register at italic 14px text-dim. Fades in/out
together with the existing instruction overlay via JS wiring at the
same lifecycle hooks. Shared class for tap and write surfaces — same
wording, same position, same fade. */
.tratak-prompt{
position:absolute;
left:50%;
top:calc(50% - 15px);
transform:translate(-50%, -100%);
font-family:var(--font-display);
font-style:italic;
font-size:14px;
color:var(--text-dim);
letter-spacing:0.3px;
white-space:nowrap;
opacity:0;
transition:opacity 0.8s;
pointer-events:none;
text-align:center;
z-index:3;
}
/* TAP INSTRUCTION — above the mala ring */
.tap-instruction{
/* v1.16.53 — Total offset 15px = ripple radius exactly. Flush with
the dṛṣṭi ripple's outer edge. */
position:absolute;
left:50%;
top:calc(50% + 15px);
transform:translateX(-50%);
font-family:var(--font-display);
font-style:italic;
font-size:14px;
color:var(--text-dim);
padding:0 32px;
line-height:1.6;
letter-spacing:0.3px;
opacity:0;
transition:opacity 0.8s;
pointer-events:none;
text-align:center;
max-width:260px;
box-sizing:border-box;
width:100%;
}
/* v1.16.80 — Secondary practice-path line. The primary line is the
active japa instruction (speak/whisper/think as you tap or draw);
this softer line names the passive trāṭaka path — gazing alone as
the v1.16.79 envelope blooms the mantra. Block-level so it drops to
its own line; dimmer + a touch smaller so it reads as "or, instead"
not as part of the primary instruction. Shared by .tap-instruction
and .write-fullpane-hint. */
.japa-instruction-sub{
display:block;
margin-top:5px;
font-size:12px;
font-style:italic;
color:rgba(228,195,123,0.42);
letter-spacing:0.4px;
}
html.high-contrast .japa-instruction-sub{color:rgba(255,255,255,0.5);}
/* MANTRA FLASH */
.session-mantra-wrap{width:100%;text-align:center;height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;flex-shrink:0;}
.session-mantra-instruction{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:2px;color:var(--text-ghost);text-transform:uppercase;margin-bottom:4px;transition:opacity 1s ease;}
.session-mantra{font-family:'Cinzel',serif;font-weight:700;font-size:22px;color:var(--gold);text-align:center;padding:0 16px;line-height:1.1;letter-spacing:0.04em;transition:font-size 0.25s ease,opacity 0.25s ease;}
.session-mantra-amount{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;color:rgba(212,196,166,0.65);text-align:center;letter-spacing:0.5px;margin-top:3px;transition:font-size 0.3s ease,opacity 0.3s ease;}
.session-dollar-cycle{display:none;}
.session-mantra.flash{animation:mantraFlash 0.5s ease-out;}
@keyframes mantraFlash{0%{opacity:1;transform:scale(1.1);}45%{opacity:0.04;transform:scale(0.96);}100%{opacity:inherit;transform:scale(1);}}
/* MALA */
.mala-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;width:100%;}
.mala-wrap{position:relative;width:min(300px,78vw);height:min(300px,78vw);}
#mala-canvas{width:100%;height:100%;cursor:pointer;touch-action:none;display:block;}
.session-anchor-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.1;pointer-events:none;z-index:0;}
/* SESSION FOOTER */
.session-footer{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:340px;z-index:1;}
.session-stat{text-align:center;min-width:60px;}
.session-stat-val{font-family:var(--font-display);font-size:20px;color:var(--gold);}
.session-stat-lbl{font-size:11px;letter-spacing:2px;color:var(--text-ghost);font-family:var(--font-body);text-transform:uppercase;}
.end-btn{background:none;border:1px solid var(--border);border-radius:50px;padding:9px 22px;font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:var(--text-ghost);cursor:pointer;text-transform:uppercase;}
.end-btn:active{border-color:rgba(212,196,166,0.2);color:var(--text-dim);}
/* SESSION BOTTOM (tap screen) */
.session-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;padding-bottom:8px;}
.session-bottom .session-stat-val{font-family:var(--font-display);font-size:24px;font-weight:500;color:var(--gold);line-height:1.2;}
.session-bottom .session-stat-lbl{font-size:11px;letter-spacing:2px;color:var(--text-ghost);font-family:var(--font-body);text-transform:uppercase;margin-bottom:6px;}
.session-timer-val{font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--text-dim);line-height:1.2;}
/* TAP PARTICLES */
.particle{position:fixed;width:3px;height:3px;border-radius:50%;background:#d4a843;pointer-events:none;z-index:var(--z-particles);animation:pfly 0.9s ease-out forwards;}
@keyframes pfly{0%{transform:translate(0,0) scale(1);opacity:0.9;}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}}
/* ===== WRITE SCREEN ===== */
#write-screen{justify-content:flex-start;padding:0;background:#06080c;}
#write-screen .write-header{background:transparent;}
#write-screen .freq-footer{background:transparent;border-top:none;}
.write-end-btn{position:absolute;top:16px;left:16px;z-index:10;background:none;border:1px solid var(--border);border-radius:50px;padding:8px 16px;font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:var(--text-dim);cursor:pointer;margin-top:env(safe-area-inset-top,0px);}
.write-sigil-btn{background:none;border:1px solid rgba(228,195,123,0.2);border-radius:50%;width:44px;height:44px;font-size:16px;color:var(--gold-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.write-sigil-btn:active{background:rgba(228,195,123,0.1);color:var(--gold);}
.write-canvas-wrap{flex:1;width:100%;position:relative;overflow:hidden;}
#write-mala-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
#write-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;}
.write-footer{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 20px 16px;border-top:1px solid var(--border);position:relative;z-index:1;gap:8px;}
.session-footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 28px calc(36px + env(safe-area-inset-bottom,0));margin-top:auto;}
/* ===== COMPLETE ===== */
/* v2.4.0 — mala-native exit. The 51 universal thoughts flow as a soft
field; a single teaching line sits beneath them; one Return button.
No session stats. Shared by Tap and Write.
v2.4.1: teaching is now split (above + below the field). Words field
uses text-align:justify so each line stretches edge-to-edge between
the margins ("margin-aligned" per Hariom). text-align-last:center so
the final partial line sits centered rather than spreading two words
to opposite edges. Gap tightened 44 → 36 to keep the four-element
stack from running too tall. */
/* ===== UNIFIED SIT-IN-SILENCE EXIT (v2.7.0) =====
Shared close screen for Tap, Write, Mirror, and I Believe It.
Layout: "Sit in silence" label at top, small dhristi pearl
centered, "Exit when ready" button at bottom. Smaller scale than
Blue Pearl Meditation — the exit is a brief contemplative sit,
not another full meditation session. Slower breath tempo (6s vs
Blue Pearl's 4s) reinforces the "sit, don't practice" register.
The decree gradient is applied to the screen bg via JS
(gotoComplete). */
#complete-screen{
/* v2.7.1 — NO position override here. The global .screen class
(style.css:69) sets position:fixed; inset:0 to pin every screen
to the full viewport. v2.7.0 accidentally included
position:relative in this rule, which clobbered the fixed
positioning and collapsed the screen to zero height (all
children are position:absolute and have no inherent size). The
page rendered black because the viewport was falling through to
the body background. Absolute-positioned children still work
correctly because the fixed .screen container IS a positioning
context — no need to redeclare. */
justify-content:center;
align-items:center;
overflow:hidden;
}
.sit-label{
position:absolute;
top:calc(60px + env(safe-area-inset-top,0));
left:0;right:0;
font-family:'Cormorant Garamond','Georgia',serif;
font-style:italic;
font-size:20px;
letter-spacing:0.4px;
color:rgba(228,195,123,0.72);
text-align:center;
line-height:1.45;
pointer-events:none;
padding:0 24px;
}
/* v1.6.0 — secondary line "— as you sit in silence" reads a half-step
softer than the primary Speak/Whisper/Think instruction. Same
italic register, a breath lighter in color and weight. */
.sit-label-sub{
display:inline-block;
margin-top:6px;
font-size:15px;
color:rgba(228,195,123,0.48);
letter-spacing:0.6px;
}
/* v1.16.1 — integration bridge line. Sits between the Sankalpa
directive (above) and the pearl (below) at ~32% from top, in the
negative space the surface had been carrying since v1.6.0. Names
the function of this surface (this period IS practice, not
post-practice filler) without being a teaching content overlay
(XXIII refinement: function-naming wayfinding ≠ teaching).
Quieter than the sub-label so the eye reads it as a bridge, not
as a tail of the directive. Same Cormorant Garamond italic
register so it belongs to the surface; smaller font + dimmer
alpha so it doesn't compete. */
.sit-integration{
position:absolute;
top:32%;
left:0;right:0;
font-family:'Cormorant Garamond','Georgia',serif;
font-style:italic;
font-size:14px;
letter-spacing:0.5px;
color:rgba(228,195,123,0.42);
text-align:center;
pointer-events:none;
padding:0 24px;
}
/* v1.6.0 — prayer mudra overlay, mirrors the Tap/Write intro mudra.
Fade-in at scale 0.9 → 1.1, holds ~1s, fades out to 0.7. Sits
above the pearl; pearl continues pulsating underneath. JS
re-triggers the animation each time goTo('complete') fires by
toggling .sit-mudra-play off/on across a reflow. */
.sit-mudra{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%) scale(0.9);
font-size:52px;
opacity:0;
pointer-events:none;
z-index:3;
}
.sit-mudra.sit-mudra-play{
animation:sitMudraFade 2.4s ease-out forwards;
}
@keyframes sitMudraFade{
0% { opacity:0; transform:translate(-50%,-50%) scale(0.9); }
25% { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
65% { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
100% { opacity:0; transform:translate(-50%,-50%) scale(0.7); }
}
.sit-pearl-ring{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:min(48vw,200px);height:min(48vw,200px);
border:1px solid rgba(240,192,64,0.22);
border-radius:50%;
box-shadow:0 0 28px rgba(240,192,64,0.04),inset 0 0 20px rgba(240,192,64,0.03);
pointer-events:none;
}
.sit-pearl-dot{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:14px;height:14px;border-radius:50%;
background:radial-gradient(circle,
rgba(235,245,255,1) 0%,
rgba(140,200,255,0.95) 45%,
rgba(105,180,245,0.7) 100%);
box-shadow:
0 0 0 8px rgba(140,200,255,0.06),
0 0 20px 5px rgba(150,205,255,0.28),
0 0 48px 16px rgba(120,190,250,0.14);
animation:sitPearlPulse 6s ease-in-out infinite;
pointer-events:none;
}
@keyframes sitPearlPulse{
0%,100%{ opacity:0.6; transform:translate(-50%,-50%) scale(1); }
50%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); }
}
.sit-exit-btn{
position:absolute;
bottom:calc(56px + env(safe-area-inset-bottom,0));
left:50%;transform:translateX(-50%);
min-width:200px;padding:14px 32px;
background:linear-gradient(135deg,rgba(212,196,166,0.08),rgba(212,196,166,0.04));
border:1px solid rgba(212,196,166,0.22);
border-radius:50px;
font-family:'Cinzel',serif;font-size:12px;
letter-spacing:2.5px;color:rgba(228,195,123,0.75);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.sit-exit-btn:active{ opacity:0.7; }
/* v2.7.0 — .complete-* family retired. The complete-screen
previously rendered "Thoughts are things," + shuffled
UNIVERSAL_WORDS field + "Repetition will make them real." +
Return ✦. All dynamic content retired in the doctrinal reframe:
after practice, the user needs contemplative space, not another
teaching. Retired classes (all dead after this release):
.complete-scroll, .complete-words, .complete-teaching,
.complete-icon, .complete-title, .complete-big, .complete-big-lbl,
.complete-mantra-wrap, .complete-mantra-label, .complete-mantra-text. */
.reflect-card{background:rgba(212,196,166,0.03);border:1px solid var(--border);border-radius:16px;padding:18px 20px;width:100%;text-align:center;}
.reflect-q{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--text-dim);line-height:1.7;margin-bottom:8px;}
.reflect-attr{font-size:11px;letter-spacing:2px;color:var(--gold-ghost);font-family:var(--font-body);}
.return-btn{width:100%;background:linear-gradient(135deg,rgba(212,196,166,0.1),rgba(212,196,166,0.04));border:1px solid rgba(212,196,166,0.2);border-radius:50px;padding:15px;font-family:var(--font-display);font-size:21px;font-weight:300;color:var(--gold);letter-spacing:2px;cursor:pointer;}
/* ===== SIGIL CHARGING ===== */
.sigil-overlay{position:fixed;inset:0;z-index:250;background:#06080c;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.sigil-overlay.hidden{display:none;}
/* ─────────────────────────────────────────────────────────────
MANTRA ACTIVATION OVERLAY (v2.12.0 — Session D)
The reception rite. Same visual ground as sigil-overlay (full
bleed, decree gradient applied at runtime via inline style),
composed as a single contemplative page rather than a
multi-phase ceremony. No counter, no progress dots, no spinning
yantra — the user performs the rite themselves and dismisses
on their own. (v2.12.1 reverted the brief beauty-pass that
added the spinning Sri Yantra mandala and glow pulse — read as
too much; the rite is the practice, not the visual.)
───────────────────────────────────────────────────────────── */
.mantra-activation-overlay{position:fixed;inset:0;z-index:260;background:#06080c;display:flex;align-items:center;justify-content:center;padding:32px 24px;overflow-y:auto;}
.mantra-activation-overlay.hidden{display:none;}
.mantra-activation-panel{max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;}
.mantra-activation-name{font-family:var(--font-cinzel);font-size:34px;letter-spacing:3px;color:var(--gold);margin-bottom:10px;line-height:1.2;}
.mantra-activation-eyebrow{font-family:var(--font-cinzel);font-size:10px;letter-spacing:5px;color:var(--gold-dim);text-transform:uppercase;opacity:0.7;margin-bottom:18px;}
.mantra-activation-rule{width:60px;height:1px;background:var(--gold);opacity:0.55;margin-bottom:30px;}
.mantra-activation-step{margin-bottom:22px;}
.mas-line{font-family:'Cormorant Garamond','Georgia',serif;font-size:16px;color:var(--text);line-height:1.4;margin-bottom:5px;}
.mas-sanskrit{font-family:'Cormorant Garamond','Georgia',serif;font-style:italic;font-size:11px;color:var(--gold);letter-spacing:1px;opacity:0.85;}
.mantra-activation-close{margin-top:18px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:var(--font-cinzel);font-size:11px;letter-spacing:3px;padding:14px 28px;border-radius:2px;cursor:pointer;transition:background 0.2s,color 0.2s;}
.mantra-activation-close:hover,.mantra-activation-close:active{background:var(--gold);color:#06080c;}
.sigil-wrap{width:100%;max-width:400px;padding:32px 24px;text-align:center;}
.sigil-phase.hidden{display:none;}
.sigil-label{font-family:var(--font-cinzel);font-size:11px;letter-spacing:5px;color:var(--gold);margin-bottom:12px;text-transform:uppercase;}
.sigil-sub{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--text-dim);margin-bottom:28px;line-height:1.5;}
.sigil-mantra-instr{text-align:center;margin-bottom:10px;}
.sigil-mantra-instr-text{font-family:'Lora','Georgia',serif;font-style:italic;font-size:16px;color:rgba(228,195,123,0.9);line-height:1.4;margin-bottom:4px;}
.sigil-mantra-instr-rounds{font-family:var(--font-cinzel);font-size:10px;letter-spacing:3px;color:rgba(228,195,123,0.45);}
.sigil-vedic-note{font-family:var(--font-body);font-size:11px;color:rgba(212,196,166,0.35);text-align:center;line-height:1.6;padding:0 12px;margin-bottom:14px;}
.sigil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.sigil-cell{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:14px 8px;border:1.5px solid rgba(212,196,166,0.1);border-radius:14px;transition:all 0.25s;background:rgba(212,196,166,0.02);}
.sigil-cell:active,.sigil-cell.selected{border-color:var(--gold);background:rgba(212,196,166,0.08);transform:scale(1.05);}
.sigil-cell-sym{font-size:28px;color:var(--gold);line-height:1;}
.sigil-cell-name{font-size:11px;letter-spacing:1.5px;color:var(--text-ghost);font-family:var(--font-cinzel);text-transform:uppercase;}
.sigil-draw-wrap{width:220px;height:220px;margin:0 auto 20px;position:relative;border:1.5px solid rgba(212,196,166,0.15);border-radius:20px;overflow:hidden;background:rgba(6,8,12,0.4);}
#sigil-draw-canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2;}
.sigil-ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:100px;color:rgba(212,196,166,0.08);line-height:1;z-index:1;pointer-events:none;transition:opacity 0.3s;}
.sigil-draw-wrap.drawing .sigil-ghost{opacity:0.04;}
.sigil-draw-wrap.flash{animation:draw-flash 0.4s ease-out;}
@keyframes draw-flash{0%{border-color:var(--gold);box-shadow:0 0 30px rgba(212,196,166,0.3);}100%{border-color:rgba(212,196,166,0.15);box-shadow:none;}}
.sigil-ring-wrap{width:200px;height:200px;margin:0 auto 16px;position:relative;}
#sigil-ring-canvas{position:absolute;top:0;left:0;width:100%;height:100%;}
.sigil-progress-label{font-family:var(--font-cinzel);font-size:11px;letter-spacing:3px;color:var(--text-ghost);margin-bottom:8px;}
.sigil-charge-hint{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--text-dim);opacity:0.6;}
.sigil-charged-sym{font-size:100px;color:var(--gold);line-height:1;margin-bottom:20px;text-shadow:0 0 60px rgba(212,196,166,0.5);animation:sigil-glow 2s ease-in-out infinite alternate;}
.sigil-charged-label{font-family:var(--font-cinzel);font-size:16px;letter-spacing:6px;color:var(--gold);margin-bottom:12px;}
.sigil-charged-sub{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--text-dim);line-height:1.5;}
@keyframes sigil-glow{0%{text-shadow:0 0 40px rgba(212,196,166,0.3);}100%{text-shadow:0 0 80px rgba(212,196,166,0.7),0 0 120px rgba(212,196,166,0.2);}}
@keyframes sigil-flash{0%{opacity:0;transform:scale(0.5);}50%{opacity:1;transform:scale(1.2);}100%{opacity:1;transform:scale(1);}}
/* ===== SETTINGS ===== */
.settings-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(6,8,12,0.7);display:flex;align-items:flex-end;backdrop-filter:blur(4px);}
.settings-overlay.hidden{display:none;}
.settings-panel{width:100%;max-height:90vh;background:var(--bg2);border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:24px 24px calc(40px + env(safe-area-inset-bottom,0));overflow-y:auto;}
.settings-header{display:flex;align-items:center;margin-bottom:28px;gap:10px;}
.settings-title-lg{font-family:var(--font-cinzel);font-size:26px;font-weight:600;color:var(--gold);letter-spacing:2px;margin-right:auto;}
.settings-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:4px;line-height:1;}
/* v1.16.4 — INSTALL pill in the settings header. Sits left of the X
close button. Title carries margin-right:auto so it eats the slack
and the pill + close cluster together at the right. Visible only on
the non-PWA browser path: the @media (display-mode: standalone) rule
below hides it for Android/Chromium PWAs; openSettings also hides
it via JS for iOS Safari standalone (where the media query is
unreliable). Tapping invokes the existing install prompt overlay. */
.settings-install-pill{
font-family:var(--font-cinzel, 'Cinzel', serif);
font-size:10px; letter-spacing:2px; font-weight:600;
color:rgba(245,210,140,0.92);
background:rgba(228,195,123,0.08);
border:1px solid rgba(212,180,90,0.5);
border-radius:14px;
padding:6px 12px;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
-webkit-appearance:none; appearance:none;
transition:background 0.2s, border-color 0.2s, color 0.2s;
}
.settings-install-pill:hover,
.settings-install-pill:active{
background:rgba(228,195,123,0.16);
border-color:rgba(212,180,90,0.85);
color:#f5e9b8;
}
@media (display-mode: standalone){
.settings-install-pill{ display:none !important; }
}
.settings-section-label{font-size:11px;letter-spacing:3px;color:var(--text-ghost);text-transform:uppercase;margin:22px 0 12px;font-family:var(--font-cinzel);}
/* v2.11.25 — framed groups. Daily Practice (the practitioner's primitives)
and My App (device-level prefs) each live in their own soft container
so the visual grouping matches the semantic grouping. Share sits outside
both, as it's neither personal practice nor local preference — it's
outward-directed. */
.settings-frame{
border:1px solid rgba(228,195,123,0.15);
border-radius:14px;
padding:10px 16px 18px;
margin:18px 0 8px;
background:rgba(6,8,12,0.25);
}
.settings-frame-title{
font-family:var(--font-cinzel);
font-size:13px;letter-spacing:2.5px;
color:var(--gold-dim);
text-transform:uppercase;
margin:4px 0 14px;
padding-bottom:10px;
border-bottom:1px solid rgba(228,195,123,0.1);
}
/* v1.16.19 — Independence Day display above the three Daily Practice
pills. Read-only ground; quieter register than the pills (italic body
font, dim gold) so it reads as a note rather than an action. */
.settings-indep-day{
font-family:var(--font-display);
font-style:italic;
font-size:13px;
letter-spacing:0.5px;
color:rgba(228,195,123,0.55);
text-align:center;
padding:0 0 18px;
margin:-4px 0 12px;
}
/* Theme swatches */
.theme-swatches{display:flex;gap:12px;}
.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;border:1.5px solid transparent;border-radius:12px;padding:6px;transition:border-color 0.2s;}
.theme-swatch.active{border-color:var(--gold-dim);}
.swatch-preview{width:80px;height:60px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);}
.swatch-dark{background:#06080c;}
.swatch-warm{background:#1a1510;}
.swatch-light{background:#f0ece0;}
.swatch-name{font-family:var(--font-body);font-size:11px;color:var(--text-ghost);letter-spacing:1px;}
/* Font size */
.font-size-row{display:flex;align-items:center;gap:12px;width:100%;}
.font-size-a-sm{font-family:var(--font-display);font-size:14px;color:var(--text-ghost);}
.font-size-a-lg{font-family:var(--font-display);font-size:26px;color:var(--text-dim);}
.font-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:rgba(212,196,166,0.15);border-radius:2px;outline:none;cursor:pointer;}
.font-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 8px rgba(212,196,166,0.3);}
.font-size-preview{font-family:var(--font-display);color:var(--gold);text-align:center;margin-top:12px;min-height:48px;line-height:1.3;transition:font-size 0.15s;}
/* Toggle */
.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;}
.settings-toggle-label{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--text-dim);}
.toggle-switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:rgba(212,196,166,0.12);border-radius:26px;border:1px solid var(--border);transition:background 0.25s;cursor:pointer;}
.toggle-track::before{content:'';position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--text-ghost);border-radius:50%;transition:transform 0.25s,background 0.25s;}
.toggle-switch input:checked + .toggle-track{background:rgba(212,196,166,0.18);border-color:rgba(212,196,166,0.3);}
.toggle-switch input:checked + .toggle-track::before{transform:translateX(18px);background:var(--gold);}
/* Action buttons */
.settings-action-btn{width:100%;background:none;border:1px solid var(--border);border-radius:14px;padding:16px;font-family:var(--font-display);font-size:18px;font-weight:300;color:var(--text-dim);letter-spacing:1px;cursor:pointer;transition:all 0.2s;margin-bottom:6px;}
.settings-action-btn:active{background:rgba(212,196,166,0.06);color:var(--gold);}
.settings-hint{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--text-ghost);margin-bottom:4px;line-height:1.5;}
.settings-reset-btn{width:100%;background:none;border:1px solid rgba(196,120,138,0.25);border-radius:14px;padding:16px;font-family:var(--font-display);font-size:17px;font-weight:300;color:var(--rose);letter-spacing:1px;cursor:pointer;margin-bottom:6px;}
.settings-reset-btn:active{background:rgba(196,120,138,0.08);}
.settings-done-btn{width:100%;background:linear-gradient(135deg,rgba(212,196,166,0.1),rgba(212,196,166,0.04));border:1px solid rgba(212,196,166,0.2);border-radius:50px;padding:15px;font-family:var(--font-display);font-size:21px;font-weight:300;color:var(--gold);letter-spacing:2px;cursor:pointer;margin-top:20px;}
.settings-version{font-size:11px;color:var(--text-ghost);text-align:center;letter-spacing:2px;margin-top:12px;font-family:var(--font-body);}
/* ── LIGHT THEME ── */
html.theme-light{--bg:#f0ece0;--bg2:#e8e2d0;--gold:#5a4020;--gold-dim:#7a5a30;--gold-ghost:#9a7a50;--cyan:#2a6a60;--rose:#8a2030;--text:#1a1410;--text-dim:#4a3820;--text-ghost:#8a7a60;--border:rgba(90,64,32,0.12);}
html.theme-light .star{background:rgba(90,64,32,0.08);}
html.theme-light .swatch-dark{border:1.5px solid rgba(90,64,32,0.2);}
/* ── WARM THEME ── */
html.theme-warm{--bg:#1a1510;--bg2:#221c14;--gold:#d4b87a;--gold-dim:#b09060;--gold-ghost:#806840;--cyan:#5aa0a8;--rose:#c06878;--text:#c8b898;--text-dim:#888060;--text-ghost:#504838;--border:rgba(212,184,122,0.1);}
html.theme-warm .star{background:rgba(212,184,122,0.06);}
/* ── DAYLIGHT MODE — RETIRED DORMANT v1.16.68, kept per L-41 ──
The three-way outdoor toggle (Off / Daylight / High Contrast) was
collapsed to two-way (Off / Outdoors) in v1.16.68 per Hariom's
session-46 feedback that the three states were too confusing. The
Daylight tile was removed from the settings UI and `setOutdoorMode`
no longer adds the `html.daylight` class — these rules are orphaned.
Kept in place against the possibility that a future direction wants
an intermediate brightness tier between Off and Outdoors. To
reintroduce: re-add the tile in index.html and the Daylight branch
in setOutdoorMode / applyOutdoorMode. */
html.daylight{--bg:#000000;--bg2:#050505;--gold:#F2D27A;--gold-dim:#D4B45C;--gold-ghost:#A08838;--cyan:#70D0D4;--rose:#D08898;--text:#F5F1E8;--text-dim:#D8CCB8;--text-ghost:#8A8070;--border:rgba(242,210,122,0.15);--border-subtle:rgba(242,210,122,0.10);--border-default:rgba(242,210,122,0.20);--border-strong:rgba(242,210,122,0.40);}
html.daylight .star{display:none;}
html.daylight .session-mantra{font-weight:900;}
html.daylight .session-stat-val,html.daylight .session-timer-val{font-weight:700;}
html.daylight .session-bottom .session-stat-lbl{color:var(--text-dim);}
html.daylight .tap-instruction{color:var(--text-dim);font-weight:500;}
html.daylight .toast{background:rgba(0,0,0,0.92);border-color:rgba(242,210,122,0.25);}
/* v1.10.0 — .goal-card theme overrides retired (class gone). */
html.daylight .settings-overlay{background:rgba(0,0,0,0.85);backdrop-filter:none;}
html.daylight .settings-panel{background:var(--bg2);}
/* v1.10.0 — .declare-btn daylight override retired (class gone in v1.8.0 sankalpa retirement; override was missed). */
html.daylight .mode-card{background:rgba(0,0,0,0.78);border-color:rgba(242,210,122,0.18);}
html.daylight .home-title-moolah{color:var(--text-dim);font-weight:400;}
html.daylight .sigil-charged-sym{text-shadow:none;}
html.daylight .oval-mirror-glow{display:none;}
html.daylight .oval-mirror-clip{box-shadow:0 0 0 3px rgba(242,210,122,0.3);}
html.daylight .mirror-scroll-sep{text-shadow:none;}
html.daylight .mirror-scroll-line{text-shadow:0 2px 4px rgba(0,0,0,0.9);}
html.daylight .chamber-orb-sym{text-shadow:none;}
html.daylight [class*="text-shadow"]{text-shadow:none !important;}
/* ── HIGH CONTRAST MODE ── */
html.high-contrast{--bg:#000000;--bg2:#050505;--gold:#FFFFFF;--gold-dim:#CCCCCC;--gold-ghost:#999999;--cyan:#FFFFFF;--rose:#FFFFFF;--text:#FFFFFF;--text-dim:#CCCCCC;--text-ghost:#888888;--border:rgba(255,255,255,0.2);--border-subtle:rgba(255,255,255,0.15);--border-default:rgba(255,255,255,0.25);--border-strong:rgba(255,255,255,0.50);}
html.high-contrast .star{display:none;}
html.high-contrast .session-mantra{font-weight:900;}
html.high-contrast .session-stat-val,html.high-contrast .session-timer-val{font-weight:700;}
html.high-contrast .session-bottom .session-stat-lbl{color:var(--text-dim);}
html.high-contrast .tap-instruction{color:var(--text-dim);font-weight:500;}
html.high-contrast .toast{background:rgba(0,0,0,0.95);border-color:rgba(255,255,255,0.3);}
/* v1.10.0 — .goal-card + .declare-btn high-contrast overrides retired (classes gone). */
html.high-contrast .settings-overlay{background:rgba(0,0,0,0.9);backdrop-filter:none;}
html.high-contrast .settings-panel{background:var(--bg2);}
html.high-contrast .mode-card{background:rgba(0,0,0,0.78);border-color:rgba(255,255,255,0.18);}
html.high-contrast .home-title-moolah{color:var(--text-dim);font-weight:400;}
html.high-contrast .home-title-japa{background:none;-webkit-text-fill-color:#FFFFFF;color:#FFFFFF;}
html.high-contrast .sigil-charged-sym{text-shadow:none;}
html.high-contrast .oval-mirror-glow{display:none;}
html.high-contrast .oval-mirror-clip{box-shadow:0 0 0 3px rgba(255,255,255,0.4);}
html.high-contrast .mirror-scroll-sep{text-shadow:none;}
html.high-contrast .mirror-scroll-line{text-shadow:0 2px 4px rgba(0,0,0,0.9);}
html.high-contrast .chamber-orb-sym{text-shadow:none;}
html.high-contrast [class*="text-shadow"]{text-shadow:none !important;}
/* v1.16.75 — Outdoors quick-toggle. Footer-right corner of practice
and reading surfaces. Top-right is taken by the settings gear +
mantra/sigil/creed action buttons; footer-right is the available
real estate. One tap flips Outdoors on/off without leaving the
surface — the Kindle/Apple-Books "sun icon in the reading surface"
pattern, sized for mobile thumb reach.
v1.16.76 — expanded from Tap+Write to home, mirror, boardroom,
library, book, and chapter screens per Hariom's "why not on all
the screens?" question. Skipped intentionally on: settings overlay
(redundant with the two-tile toggle inside), threshold rite
(declaration moment), complete/exit screen (PHILOSOPHY XXIII —
contemplative space), and ceremony overlays (sigil charging,
mantra activation, browse-screen altar).
Visible but quiet by default (0.3 opacity) so it doesn't compete
with the bindu/yantra/mantra. Bumps to 0.85 when Outdoors is active
so the user can see at a glance which mode they're in. */
.practice-outdoor-toggle{
position:absolute;
bottom:14px;
right:14px;
width:36px;
height:36px;
background:none;
border:none;
padding:6px;
cursor:pointer;
color:var(--gold);
opacity:0.3;
transition:opacity 0.2s ease;
z-index:5;
display:flex;
align-items:center;
justify-content:center;
-webkit-tap-highlight-color:transparent;
}
.practice-outdoor-toggle.active{
opacity:0.85;
}
.practice-outdoor-toggle:active{
opacity:1;
}
.practice-outdoor-toggle svg{
display:block;
}
html.high-contrast .practice-outdoor-toggle{
color:#FFFFFF;
}
/* v1.16.72 — Hardcoded text-color HC overrides. Four home-screen text
elements use hardcoded rgba() colors instead of var(--text)/var(--gold),
so the root-level HC variable swap doesn't reach them. Without these
overrides they'd render as faint gold/beige on pure black (low-alpha
luminance trap, same family as v1.16.66/67/69). Alphas bumped from
the gold values to compensate for the loss of chromatic warmth.
home-blessing 0.38 → white 0.6 (more present, brand line)
footer-link 0.5 → white 0.7 (links should read clearly)
home-copyright 0.32 → white 0.55 (faint colophon imprint, stays subdued)
footer-blessing 0.35 → white 0.55 (same register as copyright) */
html.high-contrast .home-blessing{ color:rgba(255,255,255,0.6); }
html.high-contrast .footer-link{ color:rgba(255,255,255,0.7); }
html.high-contrast .footer-link:active{ color:#ffffff; }
html.high-contrast .home-copyright{ color:rgba(255,255,255,0.55); }
html.high-contrast .footer-blessing{ color:rgba(255,255,255,0.55); }
/* v1.16.69 — Tree-breath halo HC overrides. The radial-gradient
backgrounds on the home and threshold tree wrappers (defined at
.home-tree-wrap::before / .home-tree-wrap.tree-pressing::before /
.threshold-sk-tree-wrap::before / .threshold-sk-tree-wrap.tree-pressing
::before, line ~2369 and ~2502) hardcode `rgba(228,195,123, …)` — gold.
In Outdoors mode, gold at those low alphas against pure black
blends to ~rgb 30-50, basically invisible. Hariom on device:
"the breathing is gold so it's not visible outdoors fix it."
Override with white gradients, alphas bumped to compensate for the
loss of gold's chromatic warmth (same lesson as the v1.16.66/67
yantra+mantra pair). Idle bumped from 0.22/0.08 → 0.45/0.18 inner/mid,
pressed from 0.36/0.18 → 0.7/0.35. Keyframes (opacity + transform)
are unchanged — only the gradient colors swap. */
html.high-contrast .home-tree-wrap::before,
html.high-contrast .threshold-sk-tree-wrap::before{
background:radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0) 70%);
}
html.high-contrast .home-tree-wrap.tree-pressing::before,
html.high-contrast .threshold-sk-tree-wrap.tree-pressing::before{
background:radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0) 78%);
}
/* v1.16.74 — Inline-styled gold text HC override. Practice-surface
quotes/attributions/instructions (Wilcox header on tap, Ali quote on
write, James Allen quote on mirror, free-mirror phase labels) hardcode
`color:rgba(228,195,123, …)` in inline style. CSS variable cascade
doesn't reach inline styles. Rather than refactor 8+ elements to
classes, one attribute-selector rule with !important catches them all.
Alpha standardized at 0.75 since the original alphas (0.38-0.85)
cluster in the readable register when bumped to white. Matches both
space and no-space variants of `color:rgba(...)`. */
html.high-contrast [style*="color:rgba(228,195,123"],
html.high-contrast [style*="color: rgba(228,195,123"]{
color: rgba(255,255,255,0.75) !important;
}
/* v1.16.65 — Practice-surface yantra swap. The default color/gold yantra
(sri-yantra.png) is replaced with a white-on-transparent B&W yantra
(sri-yantra-bw.png) when HC mode is active, so the practice backdrop
matches the white-on-black register of the canvas drawing.
v1.16.66 — opacity bumped from inherited 0.22 to 0.5. White strokes at
0.22 against pure black render as dark gray (~rgb 56,56,56) — visually
the same luminance as the color version but without the chromatic
warmth that made the gold readable; Hariom on device: "this bw sri
yantra is barely visible." 0.5 brings it back to a clearly-visible
"quiet ground" while still sitting behind the bindu and mantra.
v1.16.74 — opacity dialed back from 0.5 to 0.35. At 0.5 the lotus
petals render as rgb(128) gray, which competes with the white mantra
text overlay (rgb 150-220) — the mantra was hard to read on top of
the yantra. 0.35 brings petals to rgb(89), giving the mantra clean
visual separation while keeping the yantra visible as a "quiet ground"
element. Paired with the dark mantra-shadow added in v1.16.74 so the
mantra reads against any portion of the yantra. */
html.high-contrast .circuit-area::before,
html.high-contrast #write-circuit-area::before{
background-image:url(images/sri-yantra-bw.png);
opacity:0.35;
/* v1.16.95 — HC uses paired keyframes that breathe around the 0.35
baseline (yantraFieldBreath above breathes around 0.22 default). */
animation-name:yantraFieldBreathHC;
}
/* ── Outdoor mode selector ── */
.outdoor-selector{display:flex;gap:8px;margin-top:4px;}
.outdoor-opt{flex:1;padding:10px 6px;background:none;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;text-align:center;transition:all 0.2s;}
.outdoor-opt.active{border-color:var(--gold);background:rgba(212,196,166,0.06);}
.outdoor-opt-label{font-family:var(--font-body);font-size:11px;color:var(--text-dim);letter-spacing:0.5px;display:block;}
.outdoor-opt-preview{width:100%;height:28px;border-radius:6px;margin-bottom:6px;border:1px solid rgba(255,255,255,0.06);}
/* v1.16.68 — Off preview now shows what Off actually looks like (a
gold bar on slightly-off-black) so the user can compare side-by-side
against the Outdoors swatch (white bar on pure black). Empty dark
swatch was technically accurate but visually uninformative. */
.outdoor-opt-prev-off{background:#06080c;border-color:rgba(242,210,122,0.2) !important;}
.outdoor-opt-prev-off::after{content:'';display:block;width:60%;height:3px;background:#D4B45C;border-radius:2px;margin:12px auto 0;}
/* v1.16.68 — `.outdoor-opt-prev-on` is the new Outdoors swatch (same
visual as the retired HC preview — pure black bg with white bar). */
.outdoor-opt-prev-on{background:#000;border-color:rgba(255,255,255,0.3) !important;}
.outdoor-opt-prev-on::after{content:'';display:block;width:60%;height:3px;background:#fff;border-radius:2px;margin:12px auto 0;}
/* v1.16.68 — Three-way outdoor toggle (Off / Daylight / High Contrast)
collapsed to two-way (Off / Outdoors) per Hariom's session feedback
that the three states were too confusing. Daylight tile retired from
UI; HC tile renamed to "Outdoors". Retired preview CSS kept dormant
per L-41 in case a future direction reintroduces the middle tier:
.outdoor-opt-prev-day { background:#000; border-color:rgba(242,210,122,0.3) !important; }
.outdoor-opt-prev-day::after { content:''; display:block; width:60%; height:3px;
background:#F2D27A; border-radius:2px; margin:12px auto 0; }
.outdoor-opt-prev-hc { background:#000; border-color:rgba(255,255,255,0.3) !important; }
.outdoor-opt-prev-hc::after { content:''; display:block; width:60%; height:3px;
background:#fff; border-radius:2px; margin:12px auto 0; } */
/* ===== TOAST ===== */
.toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(12px);background:rgba(10,14,20,0.96);border:1px solid var(--border-default);border-radius:16px;padding:14px 18px;max-width:300px;width:86%;text-align:center;font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--text);line-height:1.5;opacity:0;transition:opacity 0.4s,transform 0.4s;z-index:var(--z-toast);pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast-attr{font-style:normal;font-size:11px;letter-spacing:2px;color:var(--gold-ghost);display:block;margin-top:6px;font-family:var(--font-body);}
/* ── DAILY RING ── */
.daily-ring-wrap{display:flex;justify-content:center;margin-top:10px;}
#daily-ring-canvas{display:block;}
/* v1.10.0 — RETIRED: .goal-card / .goal-card-* family (home panel moolah-era goal display). */
/* ── MIRROR BUTTON ── */
.mirror-btn{background:none;border:1px solid rgba(110,198,202,0.25);border-radius:50px;padding:10px 18px;font-family:var(--font-display);font-size:15px;color:var(--cyan);letter-spacing:1px;cursor:pointer;}
.mirror-btn:active{background:rgba(110,198,202,0.08);}
/* v1.9.0 — RETIRED: .goal-entry-* family CSS (#goal-entry-screen retired). */
/* ── COMPLETE SCREEN (updated) ── */
.complete-daily-row{margin:8px 20px 20px;text-align:center;}
.complete-total-today{font-family:var(--font-body);font-size:12px;letter-spacing:2px;color:var(--text-dim);margin-bottom:4px;}
.complete-daily-status{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--text-dim);line-height:1.4;}
.action-section{width:100%;text-align:center;}
.action-label{font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:var(--gold-dim);margin-bottom:10px;}
.action-input{width:100%;background:none;border:none;border-bottom:1px solid rgba(212,196,166,0.2);border-radius:0;padding:12px 4px;font-family:var(--font-display);font-size:18px;color:var(--text);outline:none;margin-bottom:20px;box-sizing:border-box;text-align:center;}
.action-input::placeholder{color:var(--text-ghost);font-style:italic;}
.action-commit-btn{width:100%;background:linear-gradient(135deg,rgba(240,192,64,0.15),rgba(212,164,48,0.08));border:1px solid rgba(240,192,64,0.3);border-radius:50px;padding:16px;font-family:var(--font-cinzel);font-size:16px;color:var(--gold);letter-spacing:2px;cursor:pointer;}
.action-commit-btn:active{background:rgba(240,192,64,0.2);}
/* Camera denied message */
.mirror-cam-denied{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;padding:40px 32px;text-align:center;}
.mirror-cam-denied-icon{font-size:40px;opacity:0.5;}
.mirror-cam-denied-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;line-height:1.7;color:var(--text-dim);}
.mirror-cam-denied-sub{font-family:var(--font-body);font-size:11px;letter-spacing:1.5px;color:var(--gold-dim);opacity:0.6;}
@keyframes livePulse{0%,100%{opacity:0.6;}50%{opacity:1;}}
@keyframes thinkPulse{0%,100%{opacity:0.2;transform:scale(0.8);}50%{opacity:0.8;transform:scale(1.1);}}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,184,152,0.3);}50%{box-shadow:0 0 0 6px rgba(200,184,152,0);}}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
/* ── MIRROR SCREEN ── */
/* v1.8.0 — .sank-card-* and .sank-home-* CSS retired (dormant — no HTML referenced them after v2.11.23 home redesign). */
.home-streak-row{display:flex;align-items:center;justify-content:center;gap:0;padding:12px 0 4px;width:100%;}
.home-streak-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.home-streak-num{font-family:var(--font-cinzel);font-size:20px;color:var(--gold);line-height:1;}
.home-streak-label{font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:var(--gold-dim);text-transform:uppercase;}
.home-streak-divider{width:1px;height:28px;background:rgba(200,184,152,0.12);}
/* v1.10.0 — RETIRED: .goal-card-date (paired with .goal-card-text). */
/* ── MIRROR / TELEPROMPTER ── */
.mirror-instr-screen{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100vh;padding:48px 28px 24px;text-align:center;overflow:hidden;position:relative;}
#mirror-intro-step{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;cursor:pointer;}
.mirror-intro-tap{font-family:var(--font-body);font-size:11px;letter-spacing:3px;color:var(--gold-dim);opacity:0.5;margin-top:32px;animation:pulse 2s ease-in-out infinite;}
.mirror-instr-back-btn{margin-top:24px;opacity:0.4;font-size:12px !important;}
.mirror-instr-body-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--text-dim);line-height:1.7;text-align:center;margin:6px 0;}
.mirror-instr-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--gold-dim);line-height:1.8;text-align:center;margin-top:12px;}
.instr-reveal{animation:revealLine 0.5s ease forwards;}
@keyframes revealLine{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#mirror-creed-step{flex-direction:column;align-items:center;justify-content:space-between;width:100%;flex:1;padding-bottom:8px;position:relative;animation:fadeIn 0.5s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.mirror-controls-row{display:flex;gap:6px;align-items:center;justify-content:center;margin-bottom:12px;flex-wrap:wrap;}
.mirror-ctrl-btn{background:none;border:1px solid rgba(200,184,152,0.18);border-radius:50px;padding:6px 12px;font-family:var(--font-body);font-size:11px;letter-spacing:1px;color:var(--gold-dim);cursor:pointer;white-space:nowrap;}
.mirror-ctrl-btn.active{border-color:rgba(200,184,152,0.5);color:var(--gold);}
.mirror-ctrl-btn:active{background:rgba(200,184,152,0.08);}
.mirror-back-topleft{position:absolute;top:16px;left:16px;background:none;border:none;font-family:var(--font-display);font-size:14px;color:var(--gold-dim);cursor:pointer;padding:8px;z-index:5;}
.mirror-back-creed{position:fixed;}
.mirror-dsa-label{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:11px;letter-spacing:1.5px;color:var(--gold-dim);opacity:0.6;margin-top:16px;cursor:pointer;}
.mirror-dsa-label input{accent-color:var(--gold);}
.mirror-bottom-group{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin-top:24px;}
.mirror-creed-instructions-row{display:flex;align-items:center;justify-content:center;gap:8px;}
.mirror-creed-instr-btn{background:none;border:1px solid rgba(200,184,152,0.15);border-radius:50px;padding:5px 16px;font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:var(--gold-dim);cursor:pointer;text-transform:uppercase;}
.mirror-privacy-toggle{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:11px;letter-spacing:1.5px;color:var(--gold-dim);cursor:pointer;border:1px solid rgba(200,184,152,0.15);border-radius:50px;padding:5px 12px;background:none;}
.mirror-instr-label{font-family:var(--font-body);font-size:11px;letter-spacing:4px;color:var(--gold-dim);margin-bottom:4px;}
.mirror-instr-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
.mirror-instr-step{font-family:var(--font-cinzel);font-size:20px;color:var(--gold);letter-spacing:0.5px;line-height:1.4;}
.mirror-instr-divider{width:40px;height:1px;background:rgba(212,196,166,0.15);margin:0 auto 28px;}
.mirror-instr-body{font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--text-dim);line-height:2;margin-bottom:48px;}
.mirror-instr-body strong{font-style:normal;color:var(--gold);font-weight:600;}
.mirror-speed-row{display:flex;gap:6px;margin-bottom:0;}
.mirror-speed-btn{background:none;border:1px solid rgba(212,196,166,0.15);border-radius:50px;padding:8px 22px;font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:var(--gold-dim);cursor:pointer;transition:all 0.2s;}
.mirror-speed-btn.active{border-color:rgba(212,196,166,0.45);color:var(--gold);background:rgba(212,196,166,0.06);}
.mirror-begin-btn{background:linear-gradient(135deg,rgba(240,192,64,0.12),rgba(212,164,48,0.06));border:1px solid rgba(240,192,64,0.3);border-radius:50px;padding:14px 48px;font-family:var(--font-cinzel);font-size:16px;color:var(--gold);letter-spacing:3px;cursor:pointer;margin-bottom:0;}
.mirror-begin-btn:active{background:rgba(240,192,64,0.18);}
.mirror-cancel-btn{background:none;border:none;font-family:var(--font-display);font-size:15px;color:var(--text-ghost);cursor:pointer;padding:10px;}
/* ── OVAL MIRROR LAYOUT ── */
.mirror-active{position:relative;width:100%;height:100vh;overflow:hidden;background:#06080c;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 0 24px;}
.oval-mirror-header{text-align:center;padding:60px 24px 6px;z-index:10;position:relative;}
.mirror-decree-btn{position:absolute;top:14px;right:16px;background:none;border:1px solid rgba(228,195,123,0.2);border-radius:50%;width:36px;height:36px;font-size:16px;color:rgba(228,195,123,0.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:11;}
.mirror-decree-btn:active{background:rgba(228,195,123,0.1);color:var(--gold);}
.oval-mirror-title{font-family:var(--font-cinzel);font-size:14px;color:rgba(228,195,123,0.75);letter-spacing:3px;margin-bottom:4px;text-shadow:0 0 20px rgba(228,195,123,0.15);}
.oval-mirror-sub{font-family:var(--font-display);font-style:italic;font-size:12px;color:rgba(228,195,123,0.3);letter-spacing:1px;}
.oval-mirror-frame{position:relative;width:min(384px,92vw);flex:1;display:flex;align-items:center;justify-content:center;}
.oval-mirror-glow{position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(ellipse,rgba(228,195,123,0.08) 0%,rgba(228,195,123,0.03) 40%,transparent 70%);pointer-events:none;animation:gentlePulse 5s ease-in-out infinite;}
.oval-mirror-clip{position:relative;width:100%;padding-bottom:130%;border-radius:50%;overflow:hidden;border:2px solid rgba(228,195,123,0.4);box-shadow:0 0 0 4px rgba(228,195,123,0.06),0 0 30px rgba(228,195,123,0.12),0 0 60px rgba(228,195,123,0.05);background:radial-gradient(ellipse at 40% 35%,#1a1a2e 0%,#0d0d14 45%,#06060a 100%);}
/* Settings/photo oval — same proportions as session, glass background */
.vc-oval-mirror{position:relative;width:min(384px,92vw);padding-bottom:130%;border-radius:50%;overflow:hidden;border:2px solid rgba(212,196,166,0.2);box-shadow:inset 0 0 60px rgba(0,0,0,0.8),inset 0 0 20px rgba(212,196,166,0.04),0 0 30px rgba(0,0,0,0.5);background:radial-gradient(ellipse at 40% 35%,#1a1a2e 0%,#0d0d14 45%,#06060a 100%);}
/* Dark overlay inside oval for text readability over any visual */
.oval-mirror-clip::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(6,8,12,0.55);pointer-events:none;}
#mirror-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:scaleX(-1);z-index:0;}
.mirror-dristi-fallback{position:absolute;inset:0;z-index:1;background:#0a0505;display:flex;align-items:center;justify-content:center;}
.mirror-dristi-dot-overlay{position:absolute;top:25%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;}
.mirror-dristi-dot{width:12px;height:12px;border-radius:50%;background:rgba(212,196,166,0.75);box-shadow:0 0 0 6px rgba(212,196,166,0.06),0 0 24px 8px rgba(212,196,166,0.12);animation:dristiPulse 4s ease-in-out infinite;}
@keyframes dristiPulse{0%,100%{opacity:0.6;transform:scale(1);}50%{opacity:1;transform:scale(1.15);}}
.mirror-tp-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;pointer-events:none;}
.mirror-pass-label{display:none;}
.mirror-tp-lines{display:flex;flex-direction:column;align-items:center;width:100%;}
.mirror-tp-line{display:none;font-family:var(--font-cinzel);font-weight:700;font-size:30px;text-align:center;letter-spacing:0.5px;line-height:1.4;width:100%;color:#fff;text-shadow:0 0 40px rgba(0,0,0,0.9),0 2px 8px rgba(0,0,0,0.8);}
.mirror-tp-line.active{display:block;}
.mirror-tp-line.near{display:none;}
.mirror-tp-line.far{display:none;}
.mirror-gaze-phase{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:6px;}
.mirror-gaze-prompt{font-family:var(--font-cinzel);font-size:26px;color:rgba(255,255,255,0.85);text-shadow:0 0 40px rgba(0,0,0,0.9),0 2px 8px rgba(0,0,0,0.8);text-align:center;line-height:1.5;transition:opacity 2s ease;}
.mirror-gaze-sub{font-family:var(--font-display);font-style:italic;font-size:16px;color:rgba(255,255,255,0.4);text-shadow:0 1px 6px rgba(0,0,0,0.8);text-align:center;transition:opacity 2s ease;}
.mirror-gaze-countdown{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--font-body);font-size:11px;letter-spacing:3px;color:rgba(255,255,255,0.18);text-shadow:0 1px 4px rgba(0,0,0,0.8);}
.mirror-tp-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(212,196,166,0.08);z-index:5;}
.mirror-tp-bar{height:100%;width:0%;background:linear-gradient(90deg,rgba(212,196,166,0.2),rgba(240,192,64,0.5));transition:width 0.5s linear;}
.mirror-end-btn{background:none;border:none;font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:rgba(228,195,123,0.3);cursor:pointer;padding:4px 0;transition:color 0.2s;}
.mirror-end-btn:active{color:rgba(228,195,123,0.7);}
.mirror-instr-topleft{position:absolute;top:16px;right:16px;background:none;border:1px solid rgba(200,184,152,0.15);border-radius:50px;padding:5px 14px;font-family:var(--font-body);font-size:11px;letter-spacing:2px;color:var(--gold-dim);cursor:pointer;text-transform:uppercase;z-index:5;}
.mirror-cam-controls{display:flex;align-items:center;gap:8px;}
.mirror-cam-toggle-live{background:rgba(0,0,0,0.4);border:1px solid rgba(200,184,152,0.2);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.2s,background 0.2s;}
.mirror-cam-toggle-live.cam-off{border-color:rgba(240,192,64,0.35);background:rgba(240,192,64,0.06);}
.mirror-upload-btn{background:rgba(0,0,0,0.4);border:1px solid rgba(200,184,152,0.2);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.2s,background 0.2s;}
.mirror-upload-btn:active{background:rgba(212,196,166,0.12);border-color:rgba(212,196,166,0.45);}
.mirror-upload-btn.has-photo{border-color:rgba(240,192,64,0.5);background:rgba(240,192,64,0.08);}
.mirror-scroll-speed-ctrl{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:10px;opacity:0.5;transition:opacity 0.3s;}
.mirror-scroll-speed-ctrl:hover,.mirror-scroll-speed-ctrl:active{opacity:0.85;}
.mirror-scroll-adj{width:32px;height:32px;border-radius:50%;background:rgba(6,8,12,0.6);border:1px solid rgba(228,195,123,0.15);color:rgba(228,195,123,0.5);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s,color 0.2s;}
.mirror-scroll-adj:active{background:rgba(228,195,123,0.08);border-color:rgba(228,195,123,0.4);color:rgba(228,195,123,0.8);}
.mirror-scroll-adj.subliminal-on{border-color:rgba(228,195,123,0.6);color:var(--gold);background:rgba(228,195,123,0.08);}
.mirror-phase-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;font-family:var(--font-body);font-size:11px;letter-spacing:4px;color:rgba(200,184,152,0.5);text-transform:uppercase;pointer-events:none;}
.mirror-countdown{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(6,8,12,0.8);font-family:var(--font-cinzel);font-size:80px;color:rgba(228,195,123,0.85);text-shadow:0 0 40px rgba(228,195,123,0.5),0 0 80px rgba(228,195,123,0.2);}
.mirror-scroll-overlay{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mirror-scroll-overlay::before{content:'';position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(to bottom,rgba(6,8,12,0.95),rgba(6,8,12,0.4),transparent);z-index:3;}
.mirror-scroll-overlay::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(to top,rgba(6,8,12,0.95),rgba(6,8,12,0.4),transparent);z-index:3;}
.mirror-scroll-track{position:absolute;top:60px;left:50%;transform:translateX(-50%);width:85%;max-width:340px;display:flex;flex-direction:column;align-items:center;padding:0;will-change:transform;}
.mirror-scroll-line{font-family:'Cormorant Garamond',serif;font-size:24px;font-style:italic;color:rgba(228,210,170,0.92);text-align:center;line-height:2.0;padding:3px 0;text-shadow:0 0 24px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,0.9);white-space:normal;word-break:break-word;-webkit-font-smoothing:antialiased;letter-spacing:0.3px;}
.mirror-scroll-phase-sanskrit{font-family:'Cinzel',serif;font-size:15px;font-style:normal;color:rgba(228,195,123,0.9);letter-spacing:2px;line-height:2.2;padding-top:12px;}
.mirror-scroll-phase-english{font-family:'Cinzel',serif;font-size:11px;font-style:normal;color:rgba(228,195,123,0.5);letter-spacing:3px;text-transform:uppercase;line-height:1.8;}
/* v1.16.15 — .mirror-scroll-opening RETIRED with the openingLine injection
in app.js. The class styled lines[0] as a title-italic 20px gold line at
the top of each phase round; Hariom: "don't show the title as part of
the scroll. it breaks up the flow." The first line now renders as a
regular body line via the .mirror-scroll-line styling. */
.mirror-scroll-divider{font-style:normal;color:rgba(228,195,123,0.2);letter-spacing:4px;font-size:14px;}
.mirror-scroll-closing{font-family:'Cinzel',serif;font-size:16px;font-style:normal;color:rgba(228,195,123,0.85);letter-spacing:1.5px;line-height:2.2;}
.mirror-scroll-closing-sub{font-family:'Cinzel',serif;font-size:10px;font-style:normal;color:rgba(212,196,166,0.4);letter-spacing:2px;text-transform:uppercase;line-height:2;}
/* v1.16.14 — .mirror-intro-phase / .mirror-intro-english /
.mirror-intro-sanskrit RETIRED with the #mirror-intro-overlay markup.
The 3-phase intro that overlaid the oval before countdown is gone;
the Vedic explainer at the top of the active mirror screen now teaches
the Vaikharī / Upāṃśu / Mānasika triad before the user enters practice.
#mirror-intro-step and .mirror-intro-tap (different from these — used
by mirror's pre-onboarding step #1) are kept; different lineage. */
/* Ring finger icon */
/* v1.14.0 — .ring-finger-icon CSS + ringFingerPulse keyframes retired
with the visual on mirror-ring-prompt. */
/* breathing animations kept */
@keyframes mirrorBreathe{0%,100%{opacity:1;}50%{opacity:0.85;}}
@keyframes gazePulse{0%,100%{opacity:0.7;}50%{opacity:1;}}
@keyframes yantraBreathe{0%,100%{opacity:0.9;}50%{opacity:1;}}
/* ── MIRROR PROGRESS BAR ── */
/* ── ROUND CELEBRATION ── */
@keyframes celebfly{0%{transform:translate(0,0) scale(1);opacity:1;}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}}
.celebrate-particle{position:fixed;border-radius:50%;pointer-events:none;z-index:var(--z-particles);animation:celebfly 1s ease-out forwards;}
/* v1.9.0 — RETIRED: .goal-entry-amount-wrap / .goal-dollar-sign / .goal-amount-input / .goal-commit-date-label (#goal-entry-screen retired). */
/* Celebration orbs — thought-energy bursts at reward moments (ring closes,
chapter reached, round completed). Formerly $/✦ text glyphs; now pure
radial-gradient orbs. Sized inline via width/height instead of font-size. */
.celebrate-symbol{
position:fixed;pointer-events:none;z-index:calc(var(--z-particles) + 1);
border-radius:50%;
background: radial-gradient(
circle,
rgba(255,250,240,1) 0%,
rgba(255,236,184,0.95) 18%,
rgba(248,208,112,0.55) 42%,
rgba(240,192,64,0.18) 72%,
transparent 100%
);
box-shadow:
0 0 14px 2px rgba(255,232,176,0.55),
0 0 30px 6px rgba(240,192,64,0.28),
0 0 56px 12px rgba(240,180,50,0.11);
animation:celebfly 1s ease-out forwards;transform-origin:center;
}
/* v1.10.12 — #onboarding-screen + first .ob-* CSS batch RETIRED
(ob-step + ob-wordmark + ob-moolah + ob-japa + ob-quote + ob-btn +
ob-body + ob-divider + ob-step-label + ob-title + ob-mantra-* +
ob-small-btn, ~22 rules). Retired in lockstep with onboarding-screen
HTML. Second .ob-* batch at ~line 2429 retired in the same pass. */
/* v1.7.0 — CHECK-IN CSS retired with the surface. See index.html
retirement comment + app.js block retirement at line 1489. */
/* v1.10.0 — RETIRED: DEMO STEP rules + #ob-step-demo + .ob-demo-* family (demo machinery retired with the unreachable ob-step-demo surface). */
/* ── SESSION MANTRA LABEL (steady, below flashing amount) ── */
.session-mantra-label{
font-family:'Cinzel',serif;
font-size:13px;
letter-spacing:1.5px;
color:rgba(212,196,166,0.55);
text-align:center;
min-height:20px;
margin-top:2px;
padding:0 16px;
}
.session-mantra-phrase{
font-family:'Cormorant Garamond',Georgia,serif;
font-style:italic;
font-size:13px;
color:rgba(212,196,166,0.7);
text-align:center;
letter-spacing:0.3px;
padding:0 20px;
line-height:1.4;
transition:font-size 0.3s ease,opacity 0.3s ease;
min-height:18px;
}
/* ── MIRROR PARTICLES + MANTRA CYCLE ── */
.mirror-particle-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.mirror-mantra-cycle{
font-family:'Cinzel',serif;
font-size:13px;
letter-spacing:2px;
color:rgba(212,196,166,0.5);
text-align:center;
padding:0 32px;
margin-top:4px;
min-height:20px;
transition:opacity 3s ease;
opacity:0;
}
/* ── LIVE MIRROR ── */
.mirror-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);z-index:0;}
.mirror-video-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 28px 120px;background:linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.1) 100%);}
.mirror-video-goal{font-family:'Cinzel',serif;font-size:12px;color:rgba(212,196,166,0.5);letter-spacing:1px;text-align:center;line-height:1.6;transition:opacity 2s ease;margin-bottom:8px;}
.mirror-video-phrase{font-family:'Cinzel',serif;font-size:26px;color:rgba(245,224,112,0.97);letter-spacing:0.5px;text-align:center;line-height:1.5;transition:opacity 0.7s ease;text-shadow:0 0 30px rgba(240,192,64,0.4);}
.mirror-video-mantra{font-family:'Cinzel',serif;font-size:12px;color:rgba(212,196,166,0.4);letter-spacing:2px;text-align:center;transition:opacity 3s ease;opacity:0;}
/* v2.7.0 — #mirror-anchor-screen + .mirror-anchor-* family retired.
Mirror sessions now exit through gotoComplete() to the shared
sit-in-silence surface. Retired classes: .mirror-anchor-wrap,
.mirror-anchor-label, .mirror-anchor-goal, .mirror-anchor-declaration,
.mirror-anchor-divider, .mirror-anchor-body, .mirror-anchor-body em,
.mirror-anchor-btn, .mirror-anchor-btn:active. */
/* ── MANTRA WAVE ── */
.mirror-mantra-cycle{
font-family:'Cinzel',serif;
font-size:26px;
letter-spacing:2px;
color:rgba(212,196,166,0.9);
text-align:center;
padding:0 32px;
min-height:36px;
transition:opacity 1.2s ease, font-size 1.2s ease;
opacity:0;
}
.mirror-wave-label{
font-family:'Outfit',sans-serif;
font-size:11px;
letter-spacing:4px;
color:rgba(212,196,166,0.35);
text-align:center;
text-transform:uppercase;
min-height:14px;
transition:opacity 1.2s ease;
}
/* live mode mantra */
.mirror-video-mantra{
font-family:'Cinzel',serif;
font-size:26px;
color:rgba(212,196,166,0.9);
letter-spacing:2px;
text-align:center;
transition:opacity 1.2s ease, font-size 1.2s ease;
text-shadow:0 0 20px rgba(212,196,166,0.3);
opacity:0;
}
.oval-mirror-footer{font-family:var(--font-body);font-size:11px;letter-spacing:3px;color:rgba(228,195,123,0.35);text-align:center;padding-bottom:4px;text-transform:uppercase;}
.mirror-scroll-sep{font-family:var(--font-cinzel);font-size:28px;color:rgba(228,195,123,0.65);letter-spacing:20px;margin:28px 0;text-align:center;text-shadow:0 0 24px rgba(228,195,123,0.4),0 0 48px rgba(228,195,123,0.2),0 0 80px rgba(228,195,123,0.1);}
.mirror-scroll-conviction{font-family:var(--font-cinzel)!important;font-size:16px!important;font-style:normal!important;letter-spacing:5px;color:rgba(228,195,123,0.85)!important;text-shadow:0 0 24px rgba(228,195,123,0.4),0 0 48px rgba(228,195,123,0.15);margin:12px 0;}
.session-footer-center{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;overflow:hidden;}
.session-footer-center .session-mantra-amount{font-family:var(--font-cinzel);font-size:14px;color:var(--gold);letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
.session-footer-center .session-mantra-phrase{font-family:var(--font-display);font-style:italic;font-size:11px;color:var(--text-ghost);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mirror-btn-row{position:absolute;top:78px;left:16px;right:16px;z-index:6;display:flex;align-items:center;justify-content:space-between;}
/* ── ALTAR DECREE SCREEN ── */
.altar-card{scroll-snap-align:center;flex-shrink:0;width:calc(100vw - 56px);max-width:340px;min-height:420px;border-radius:20px;display:flex;flex-direction:column;border:1px solid rgba(212,196,166,0.12);position:relative;perspective:1000px;}
.altar-card.selected{border-color:rgba(212,196,166,0.65);box-shadow:0 0 36px rgba(212,196,166,0.22),0 0 8px rgba(212,196,166,0.1);}
.altar-card.locked{opacity:0.65;filter:grayscale(0.3);}
.altar-cover{width:100%;aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;position:relative;overflow:hidden;}
.altar-card.selected .altar-cover::after{content:'✦';position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:13px;color:var(--gold);opacity:0.75;letter-spacing:2px;}
.altar-cover-sym{font-size:52px;margin-bottom:16px;filter:drop-shadow(0 0 20px rgba(212,196,166,0.3));}
.altar-cover-title{font-family:var(--font-cinzel);font-size:22px;color:rgba(255,255,255,0.95);text-align:center;line-height:1.3;letter-spacing:0.5px;margin-bottom:10px;}
.altar-cover-author{font-family:var(--font-display);font-style:italic;font-size:13px;color:rgba(255,255,255,0.55);text-align:center;line-height:1.5;}
.altar-cover-pub{font-family:var(--font-body);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);text-align:center;margin-top:8px;}
.altar-cover-lock{position:absolute;top:12px;right:12px;font-size:20px;opacity:0.8;}
.altar-preview{padding:16px 20px;background:rgba(0,0,0,0.3);border-top:1px solid rgba(212,196,166,0.45);}
.altar-preview-lines{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--text-ghost);line-height:1.7;text-align:center;}
.altar-dot{width:6px;height:6px;border-radius:50%;background:rgba(212,196,166,0.2);transition:all 0.3s;cursor:pointer;}
.altar-dot.active{background:rgba(212,196,166,0.8);width:18px;border-radius:3px;}
/* ── Altar list (v1.1.0 — sectioned vertical scroll, replaces the mantra
carousel). Four sections rendered in authored catalog order: Bija Mantras
/ Names of God / Sacred Phrases / Switchwords. Section headers left-aligned
small-caps Cinzel gold — table-of-contents register for "altar reads as a
published page." Rows = name (Cinzel) + lineage line (italic). No per-row
sri yantra; no screen-level yantra backdrop — the altar is the change-
surface, not a practice surface. Meanings live in the companion PDF
(MalaJapa_Mantra_Catalog.pdf) per Session H spec. The carousel rules
above (.altar-card, .altar-cover, .altar-preview, .altar-face*) stay live
for the creeds altar (#mirror-altar-screen / #altar-carousel). */
.altar-section-header{
font-family:var(--font-cinzel);
font-size:11px;
letter-spacing:3px;
text-transform:uppercase;
color:rgba(228,195,123,0.72);
padding:22px 24px 8px;
border-bottom:1px solid rgba(212,196,166,0.14);
margin:0 0 2px;
}
.altar-section-header:first-child{ padding-top:10px; }
.altar-row{
padding:14px 24px;
cursor:pointer;
border-bottom:1px solid rgba(212,196,166,0.06);
transition:background 0.18s ease, border-color 0.18s ease;
-webkit-tap-highlight-color:transparent;
}
.altar-row:active{ background:rgba(212,196,166,0.04); }
.altar-row.selected{
background:rgba(228,195,123,0.09);
border-bottom-color:rgba(228,195,123,0.35);
}
.altar-row-name{
font-family:var(--font-cinzel);
font-size:18px;
color:rgba(255,255,255,0.92);
line-height:1.3;
letter-spacing:0.3px;
}
.altar-row.selected .altar-row-name{
color:var(--gold);
text-shadow:0 0 18px rgba(228,195,123,0.28);
}
.altar-row-lineage{
font-family:var(--font-display);
font-style:italic;
font-size:11px;
color:rgba(212,196,166,0.48);
margin-top:4px;
line-height:1.4;
}
/* ── Altar v1.2.0 category-card styles (DORMANT as of v1.3.0). Served the
full-width stacked-card categories view. v1.3.0 replaced with a 2-col
grid using .altar-grid / .altar-cat-* classes below. Preserved per L-41. */
.altar-category-card{
border:1px solid rgba(228,195,123,0.18);
border-radius:14px;
padding:22px 20px 20px;
background:rgba(6,8,12,0.28);
cursor:pointer;
transition:border-color 0.18s ease, background 0.18s ease, transform 0.1s ease;
-webkit-tap-highlight-color:transparent;
text-align:center;
}
.altar-category-card:active{
border-color:rgba(228,195,123,0.45);
background:rgba(228,195,123,0.06);
transform:scale(0.995);
}
.altar-category-name{
font-family:var(--font-cinzel);
font-size:20px;
color:var(--gold);
letter-spacing:0.5px;
line-height:1.2;
}
.altar-category-count{
font-family:var(--font-body);
font-size:10px;
letter-spacing:2.5px;
color:rgba(212,196,166,0.5);
margin-top:8px;
text-transform:uppercase;
}
.altar-category-hint{
font-family:var(--font-display);
font-style:italic;
font-size:12px;
color:rgba(212,196,166,0.55);
margin-top:10px;
line-height:1.4;
}
/* ── Altar v1.3.0 2-column grid styles (DORMANT as of v1.4.0). Served the
2-col grid that landed before Hariom clarified the direction with a home
screenshot — the ask was home-practice register (glyph + text-block rows,
single column, hairline dividers), not a 2-across grid. v1.4.0 replaced
with .altar-practice-list / .altar-practice-row / .altar-practice-body
below. Preserved per L-41. */
.altar-grid{
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid rgba(228,195,123,0.12);
}
.altar-grid-cell{
padding:20px 14px;
border-bottom:1px solid rgba(228,195,123,0.12);
border-right:1px solid rgba(228,195,123,0.12);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:background 0.18s ease;
text-align:center;
min-width:0;
}
.altar-grid-cell:nth-child(2n){ border-right:none; }
.altar-grid-cell.is-orphan{ border-right:none; }
.altar-grid-cell:active{ background:rgba(228,195,123,0.04); }
.altar-cat-name{
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:18px;color:rgba(245,240,232,0.94);
letter-spacing:0.4px;line-height:1.2;
}
.altar-cat-count{
font-family:var(--font-body);font-size:9.5px;letter-spacing:2px;
color:rgba(212,196,166,0.42);margin-top:8px;text-transform:uppercase;
}
.altar-cat-hint{
font-family:var(--font-display);font-style:italic;
font-size:11.5px;color:rgba(212,196,166,0.48);
margin-top:7px;line-height:1.35;
}
.altar-mantra-cell.selected{ background:rgba(228,195,123,0.09); }
.altar-mantra-name{
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:16px;color:rgba(245,240,232,0.94);
letter-spacing:0.3px;line-height:1.25;
word-wrap:break-word;overflow-wrap:break-word;
}
.altar-mantra-cell.selected .altar-mantra-name{
color:var(--gold);text-shadow:0 0 18px rgba(228,195,123,0.3);
}
.altar-mantra-lineage{
font-family:var(--font-display);font-style:italic;
font-size:10.5px;color:rgba(212,196,166,0.46);
margin-top:5px;line-height:1.4;
word-wrap:break-word;overflow-wrap:break-word;
}
/* ── Altar v1.4.0 — home-practice register, single-column list. Mirrors the
.home-practice-* family visually (glyph + flex body, italic Cinzel name,
italic display-font desc, hairline border-bottom) with parallel class
names so altar-specific selection state can diverge without touching home.
Used by both views — categories (4 rows) and mantra list (8–16 rows).
Bindu glyph (Mantra Japa SVG) used uniformly per Hariom: the altar is the
mantra surface, one glyph reads for the whole surface. */
.altar-practice-list{
display:flex;flex-direction:column;
padding:0 20px;
margin:8px 0 12px;
}
.altar-practice-row{
display:flex;align-items:flex-start;gap:20px;
padding:22px 6px;
border-bottom:1px solid rgba(228,195,123,0.12);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:opacity 0.2s ease, background 0.2s ease;
color:rgba(228,195,123,0.85); /* glyph inherits */
}
.altar-practice-row:last-child{ border-bottom:none; }
.altar-practice-row:active{
opacity:0.55;
background:rgba(228,195,123,0.03);
}
.altar-practice-glyph{
flex-shrink:0;
width:26px;height:26px;
margin-top:3px;
filter:drop-shadow(0 0 6px rgba(228,195,123,0.2));
}
.altar-practice-body{ flex:1;min-width:0; }
.altar-practice-name{
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:22px;
color:rgba(245,240,232,0.94);
letter-spacing:0.5px;
line-height:1;
}
.altar-practice-desc{
font-family:var(--font-display);font-style:italic;
font-size:13px;
color:rgba(212,196,166,0.55);
margin-top:8px;line-height:1.5;
}
/* Selected state on mantra rows — gold wash + gold name + soft glow on glyph */
.altar-practice-mantra.selected{
background:rgba(228,195,123,0.07);
color:var(--gold); /* glyph stroke shifts to gold via currentColor */
}
.altar-practice-mantra.selected .altar-practice-glyph{
filter:drop-shadow(0 0 10px rgba(228,195,123,0.55));
}
.altar-practice-mantra.selected .altar-practice-name{
color:var(--gold);
text-shadow:0 0 18px rgba(228,195,123,0.3);
}
/* v1.5.0 — category-current indicator on the categories view. Marks the
category containing the user's current mantra. Subtler than .selected
— just the glyph shifts to gold (via row-level currentColor) with a
softer glow, no bg wash, no name-color change. Presence, not
announcement. XXII-safe: points at the tradition, not the choice. */
.altar-practice-row.category-current{
color:var(--gold);
}
.altar-practice-row.category-current .altar-practice-glyph{
filter:drop-shadow(0 0 8px rgba(228,195,123,0.4));
}
/* ── CARD FLIP ── */
.altar-card{transform-style:preserve-3d;transition:transform 0.6s cubic-bezier(0.4,0.2,0.2,1);}
.altar-card.flipped{transform:rotateY(180deg);}
.altar-card-inner{position:relative;width:100%;height:100%;}
.altar-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;overflow:hidden;}
.altar-face-back{transform:rotateY(180deg);background:#0e0c14;border:1px solid rgba(212,196,166,0.15);display:flex;flex-direction:column;overflow:hidden;}
.altar-back-lines{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 20px 56px;font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--text-dim);line-height:2;text-align:center;}
.altar-back-lines .altar-back-line{display:block;}
.altar-flip-btn{position:absolute;bottom:10px;right:10px;z-index:20;background:rgba(212,196,166,0.08);border:1px solid rgba(212,196,166,0.2);border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:rgba(212,196,166,0.6);}
.altar-flip-btn:active{background:rgba(212,196,166,0.2);}
@keyframes orbRingPulse{
0%,100%{transform:scale(1);opacity:0.6;}
50%{transform:scale(1.06);opacity:1;}
}
@keyframes orbFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}
@keyframes invokeOrb{0%,100%{box-shadow:0 0 20px rgba(228,195,123,0.15);}50%{box-shadow:0 0 50px rgba(228,195,123,0.4);}}
@keyframes cursorBlink{0%,100%{opacity:0.8;}50%{opacity:0;}}
/* ── Dṛṣṭi ripple — thought-energy expanding from a still point (v2.1.3) ──
Sparks-of-Joy style expanding ring. Each tap in Tap/Write mode spawns
three of these at ~180ms stagger for layered depth. Dimensions grow
from 0 to 320px, border fades from full to transparent. */
/* v2.2.13: ring softened (PHILOSOPHY XII addendum — noticing, not
spectacle). Border opacity 0.85 → 0.45, glow 12px/0.35 → 6px/0.18,
max diameter 320 → 220px. The ripple is now a quiet expansion that
says "tap registered" rather than "tap announced."
v2.2.16 attempted CSS-vars-in-@keyframes for per-instance scaling.
v2.2.17 (defensive fix): the keyframe-with-vars approach was
unreliable on Chromium-mobile (rendered as broken fan-shape mid-
session per Hariom screenshot). Replaced with JS-driven inline
transitions. The CSS class now provides only the static styling
(border, position, glow); JS sets width/height/opacity/transition
directly per instance. No more @keyframes for this element. */
.dhristi-ripple{
border-radius:50%;
/* v1.16.49 — Border switched from rgba(255,232,176,0.55) gold to
var(--bg). Hariom's call: "the ripple color should be same as
the bgcolor." The ripple becomes a negative-space mark: where
it crosses the yantra image (rendered at 0.22 opacity via
.circuit-area::before) it shows as a thin darkening line; where
it doesn't, it blends invisibly into the surface bg. The gold
border + gold glow were reading as additive luminous marks
competing with the contemplative register. Box-shadow dropped
in the same release for the same reason — a 6px gold halo
beyond the border is the spectacle PHILOSOPHY XII guards
against. Tracks --bg, so HC/daylight (where --bg is #000) get
the same intent applied to their darker surface. */
border:1px solid var(--bg);
transform:translate(-50%,-50%);
pointer-events:none;
z-index:8000;
will-change:width,height,opacity;
/* width, height, opacity, position, transition — all set inline by JS */
}
/* .tree-ripple class retired v1.15.11 — see app.js retirement note
on the treeRipple* handlers. The breathing glow on the wrappers
(treeHeartGlow / treeHeartGlowPressed below) carries the entire
gesture-acknowledgment burden now. */
/* ══════════════════════════════════════════
UNIVERSAL WORD GRID (v2.1.6)
══════════════════════════════════════════
Ambient backdrop for Tap and Write — faint scatter of universal positive
qualities (peace, love, good, truth, light…). Randomized on each session
entry. Sits behind canvas + center display. Presence, not decoration. */
.universal-grid{
position:absolute; inset:0;
pointer-events:none;
overflow:hidden;
z-index:0;
}
.universal-word{
position:absolute;
font-family:var(--font-display,"Cormorant Garamond",serif);
color:rgba(228,195,123,0.18);
font-weight:300;
letter-spacing:0.08em;
white-space:nowrap;
user-select:none;
text-transform:lowercase;
transition:opacity 1.2s ease-out;
}
/* Daylight theme — slightly higher contrast so words remain faintly visible */
html.daylight .universal-word{
color:rgba(242,210,122,0.22);
}
/* Light theme — words use the sepia palette */
html.theme-light .universal-word{
color:rgba(90,64,32,0.16);
}
/* ══════════════════════════════════════════
SRI YANTRA BACKGROUND (v2.2.1 / clean asset v2.2.2)
══════════════════════════════════════════
The sacred geometry that grounds TNT. Tap and Write practice areas
carry the Sri Yantra faintly behind canvas + orbs + center thought.
The bindu at its center aligns naturally with the dṛṣṭi where the
universal thought manifests. v2.2.2: swapped placeholder JPG for the
clean PNG with transparent corners — the decree color shows through
the empty space naturally, no blend mode needed.
v1.15.5 → v1.15.7: extension to mirror surfaces (#mirror-visual-choice,
#mirror-active) tried and reverted. The mirror has its own focal
centerpiece — the oval with the user's face / dṛṣṭi dot — which is
already the contemplative object. A yantra behind would compete
rather than ground. Tap/Write need the yantra because the canvas is
action, not focus; the mirror's focus is already complete. The
yantra remains exclusive to canvas-based practice. */
.circuit-area::before,
#write-circuit-area::before{
content:'';
position:absolute;
inset:0;
background-image:url(images/sri-yantra.png);
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
/* v1.16.86 — Back to 0.22. The afterimage-physiology arc (full
yantra as gaze object + light internalization field) was set aside
for an eyes-closed mantra-internalization model — the yantra is
once again quiet ground for the practice surface, not the focal
object. (Provenance now documented rather than silent drift: 0.22
is a deliberate "present but not competing" choice, closing W-28.) */
opacity:0.22;
pointer-events:none;
z-index:0;
transition:opacity 0.6s ease;
/* v1.16.94 — Ambient field breath. The yantra is the ground of
practice (always-on since v2.10.1) but has been a static ground;
the home tree-of-life has carried the 11s heart-coherence breath
(Lehrer resonant-frequency pocket, ~5.5 breaths/min) since v1.16.24
and the practice surfaces never inherited it. Same primitive ported
here. Brightness rather than opacity so a single animation works
across default-mode gold (0.22 baseline) and HC-mode white (0.35
baseline) without forking — multiplicative on rendered pixels.
Trough at 1.0 (current rendering), peak at 1.15: the yantra swells
above baseline and recedes back, mirroring the tree's "trough at
current, peak above" shape. Field-level feedback, not action-level
— uncoupled from tap, dwell, or count. The practitioner's breath
has something at the right tempo to entrain to. */
/* v1.16.95 — Re-tune (device pass): the v1.16.94 brightness-only
animation was perceptually below threshold because brightness 1.15
attenuated through opacity 0.22 yields only a ~6-unit RGB shift on
already-dim composited pixels. Opacity carries the main perceptual
swing now (0.22 → 0.32 → 0.22, ~45% relative); brightness 1.08 adds
subtle chromatic warmth at peak rather than doing the heavy lifting.
Same 11s ease-in-out cadence, same field-level (uncoupled) intent.
HC mode gets a paired keyframe block (yantraFieldBreathHC) so its
0.35 baseline is preserved — a single animation can't serve both
opacity baselines without forking. */
animation:yantraFieldBreath 11s ease-in-out infinite;
}
@keyframes yantraFieldBreath{
0%,100%{ opacity:0.22; filter:brightness(1.0); }
50% { opacity:0.32; filter:brightness(1.08); }
}
@keyframes yantraFieldBreathHC{
0%,100%{ opacity:0.35; filter:brightness(1.0); }
50% { opacity:0.50; filter:brightness(1.08); }
}
@media (prefers-reduced-motion: reduce){
.circuit-area::before,
#write-circuit-area::before{ animation:none; filter:brightness(1.0); }
}
/* Yantra-toggle CSS retired v2.10.1 — yantra is always on, user cannot
turn it off. Button styles and body.yantra-off overrides physically
removed. The yantra ::before rules above remain live. */
/* ══════════════════════════════════════════
CIRCUIT TAP MODE
══════════════════════════════════════════ */
.circuit-area{
flex:1;position:relative;width:100%;min-height:0;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
#circuit-canvas{
position:absolute;inset:0;width:100%;height:100%;
touch-action:none;cursor:pointer;z-index:1;
}
#mudra-center{
position:absolute;z-index:3;pointer-events:none;user-select:none;
top:50%;left:50%;transform:translate(-50%,-50%);
font-size:52px;line-height:1;
transition:opacity 0.8s,transform 0.8s;
}
#write-mudra-center{
position:absolute;z-index:3;pointer-events:none;user-select:none;
top:50%;left:50%;transform:translate(-50%,-50%);
font-size:52px;line-height:1;opacity:0;
transition:opacity 0.8s,transform 0.8s;
}
/* ══════════════════════════════════════════
MIRROR WRITE MODE
══════════════════════════════════════════ */
.mirror-write-bg{
position:absolute;inset:0;z-index:0;
background:radial-gradient(ellipse at 50% 40%,
rgba(228,195,123,0.04) 0%,
rgba(17,19,24,0) 70%);
}
.mirror-write-bg::before{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(6,8,12,0.8) 0%,
rgba(6,8,12,0.3) 30%,
rgba(6,8,12,0.3) 70%,
rgba(6,8,12,0.8) 100%);
}
#write-canvas{
position:absolute;inset:0;width:100%;height:100%;
z-index:2;touch-action:none;cursor:crosshair;
}
.mirror-write-guide{
position:absolute;bottom:16px;left:0;right:0;
text-align:center;z-index:3;pointer-events:none;
font-family:var(--font-body);font-size:11px;
letter-spacing:2px;text-transform:uppercase;
color:rgba(228,195,123,0.25);
transition:opacity 1s;
}
/* ── Circuit progress ring ── */
.circuit-progress-ring{
position:absolute;z-index:3;pointer-events:none;
width:130px;height:130px;
}
/* ── Oval mirror write ── */
.write-oval-wrap{
flex:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;
position:relative;width:100%;min-height:0;
padding:8px 0;
}
.write-oval-wrap .oval-mirror-clip{
/* canvas fills the oval */
cursor:crosshair;
}
#write-canvas{
position:absolute;inset:0;width:100%;height:100%;
z-index:2;touch-action:none;
}
.write-oval-hint{
position:absolute;bottom:20%;left:0;right:0;
text-align:center;z-index:5;pointer-events:none;
font-family:var(--font-body);font-size:11px;
letter-spacing:2px;text-transform:uppercase;
color:rgba(228,195,123,0.3);
transition:opacity 1s;
}
/* Flip button always faces forward and stays bottom-right */
.altar-flip-btn{
position:absolute;bottom:10px;right:10px;z-index:20;
background:rgba(212,196,166,0.08);border:1px solid rgba(212,196,166,0.2);
border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:rgba(212,196,166,0.6);transition:all 0.2s;
transform-style:flat; /* don't inherit 3D from parent */
}
.altar-flip-btn:active{background:rgba(212,196,166,0.2);}
/* When card is flipped, counter-rotate the button so it stays readable and on the right */
.altar-card.flipped .altar-flip-btn{
transform:rotateY(180deg);
}
/* ══════════════════════════════════════════
WRITE SPLIT — mirror top, drawing bottom
══════════════════════════════════════════ */
.write-split-wrap{
flex:1;display:flex;flex-direction:column;
min-height:0;width:100%;
}
.write-split-mirror{
flex:0 0 auto;display:flex;flex-direction:column;
align-items:center;padding:8px 0 4px;
}
.write-mirror-label{
font-family:var(--font-body);font-size:11px;letter-spacing:2px;
text-transform:uppercase;color:rgba(228,195,123,0.2);
margin-top:6px;text-align:center;
}
.write-drawing-area{
flex:1;position:relative;min-height:0;
border-top:1px solid rgba(228,195,123,0.08);
background:rgba(6,8,12,0.95);
overflow:hidden;
}
#write-canvas{
position:absolute;inset:0;width:100%;height:100%;
z-index:2;touch-action:none;cursor:crosshair;
}
#write-mirror-canvas{
position:absolute;inset:0;width:100%;height:100%;
z-index:1;
}
.write-drawing-hint{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);z-index:3;
pointer-events:none;text-align:center;
font-family:var(--font-display);font-style:italic;font-size:15px;
color:rgba(228,195,123,0.18);
transition:opacity 1s;white-space:nowrap;
}
.write-drawing-clear{
position:absolute;top:8px;right:12px;z-index:4;
font-family:var(--font-body);font-size:11px;letter-spacing:2px;
text-transform:uppercase;color:rgba(228,195,123,0.25);
background:none;border:none;cursor:pointer;padding:6px;
}
/* ══════════════════════════════════════════
FREQUENCY BAR FOOTER
══════════════════════════════════════════ */
.freq-footer{
display:flex;align-items:center;justify-content:space-between;
padding:10px 20px calc(16px + env(safe-area-inset-bottom,0));
flex-shrink:0;gap:12px;
border-top:1px solid rgba(228,195,123,0.06);
}
.freq-timer{
font-family:var(--font-cinzel);font-size:13px;
color:rgba(212,196,166,0.35);letter-spacing:1px;
min-width:36px;flex-shrink:0;
}
.freq-bars-wrap{
flex:1;display:flex;flex-direction:column;
align-items:center;gap:4px;min-width:0;
}
.freq-bars{
display:flex;align-items:flex-end;gap:3px;
height:28px;
}
.freq-bar{
width:7px;border-radius:2px 2px 0 0;
background:rgba(228,195,123,0.12);
transition:height 0.4s cubic-bezier(0.34,1.56,0.64,1),
background 0.4s;
min-height:3px;
}
.freq-bar.active{
background:linear-gradient(to top,rgba(228,195,123,0.9),rgba(240,210,80,0.6));
box-shadow:0 0 6px rgba(228,195,123,0.4);
}
.freq-label{
font-family:var(--font-body);font-size:11px;
letter-spacing:2px;text-transform:uppercase;
color:rgba(228,195,123,0.3);
}
.freq-mala-count{
font-family:var(--font-cinzel);font-size:11px;
color:rgba(212,196,166,0.45);letter-spacing:0.5px;
min-width:44px;text-align:right;flex-shrink:0;
white-space:nowrap;
}
/* ══════════════════════════════════════════
DECREE-COLORED SESSION BACKGROUNDS
══════════════════════════════════════════ */
#session-screen.decree-bg,
#write-screen.decree-bg{
background:var(--decree-bg, #06080c);
transition:background 1.5s ease;
}
/* ══════════════════════════════════════════
SESSION CARDS — tap & write
══════════════════════════════════════════ */
/* Tap: single card taking most of screen */
.session-card-wrap{
flex:1;display:flex;align-items:stretch;
padding:0;min-height:0;
}
.session-card{
flex:1;border-radius:0;
border:1px solid rgba(212,196,166,0.15);
box-shadow:0 0 40px rgba(0,0,0,0.5),inset 0 0 60px rgba(0,0,0,0.3);
display:flex;flex-direction:column;
overflow:hidden;position:relative;
/* gradient set by JS via --card-bg */
background:var(--card-bg,linear-gradient(160deg,#1a1206,#06080c));
transition:background 1.2s ease;
}
.session-card-header{
display:flex;align-items:center;gap:10px;
padding:14px 20px 8px;flex-shrink:0;
position:relative;z-index:5;
}
.session-card-sym{
font-size:22px;filter:drop-shadow(0 0 8px rgba(228,195,123,0.4));
}
.session-card-title{
font-family:var(--font-cinzel);font-size:13px;
color:rgba(255,255,255,0.65);letter-spacing:0.5px;
}
.circuit-area{
flex:1;position:relative;min-height:0;
overflow:hidden;
}
/* Write: two stacked cards */
.write-cards-wrap{
flex:1;display:flex;flex-direction:column;
gap:0;padding:0;min-height:0;
}
.write-card{
border-radius:0;
border:1px solid rgba(212,196,166,0.12);
overflow:hidden;position:relative;
background:var(--card-bg,linear-gradient(160deg,#1a1206,#06080c));
box-shadow:0 0 24px rgba(0,0,0,0.4);
}
.write-card-mirror{
flex:0 0 auto;
}
.write-card-draw{
flex:1;display:flex;flex-direction:column;min-height:0;
}
.write-card-draw-label{
font-family:var(--font-cinzel);font-size:11px;
letter-spacing:2px;color:rgba(255,255,255,0.25);
padding:10px 16px 4px;flex-shrink:0;text-align:center;
text-transform:uppercase;
}
.write-drawing-area{
flex:1;position:relative;min-height:0;
border:none;
background:transparent;
}
#write-canvas{
position:absolute;inset:0;
width:100%!important;height:100%!important;
display:block;
touch-action:none;
}
.write-card-mirror{ flex:3 1 0!important; }
.write-card-draw{ flex:1 1 0!important; min-height:120px; }
.write-drawing-area::after{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:repeating-linear-gradient(
to bottom,
transparent,
transparent 39px,
rgba(228,195,123,0.08) 39px,
rgba(228,195,123,0.08) 40px
);
}
/* ══════════════════════════════════════════
NEW HOME SCREEN
══════════════════════════════════════════ */
.home-scroll{
padding:16px 16px 0;
display:flex;flex-direction:column;gap:14px;
min-height:100%; /* v2.11.13 */
}
/* Wealth account card */
.wealth-card{
background:rgba(228,195,123,0.04);
border:1px solid rgba(228,195,123,0.1);border-radius:16px;
padding:12px 16px 10px;cursor:pointer;
}
.wealth-card-goal{
font-family:var(--font-cinzel);font-size:17px;color:var(--gold);
letter-spacing:0.5px;margin-bottom:8px;
}
.wealth-bar-wrap{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.wealth-bar-track{flex:1;height:4px;background:rgba(228,195,123,0.1);border-radius:2px;overflow:hidden;}
.wealth-bar-fill{height:100%;background:linear-gradient(to right,rgba(228,195,123,0.6),var(--gold));border-radius:2px;width:0%;transition:width 1s cubic-bezier(0.4,0,0.2,1);}
.wealth-bar-pct{font-family:var(--font-body);font-size:11px;letter-spacing:1px;color:rgba(228,195,123,0.5);white-space:nowrap;}
.wealth-card-stats{display:flex;gap:0;justify-content:space-between;margin-top:8px;}
.wealth-stat{text-align:center;flex:1;}
.wealth-stat-val{font-family:var(--font-cinzel);font-size:13px;color:var(--gold);margin-bottom:1px;}
.wealth-stat-lbl{font-family:var(--font-body);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(212,196,166,0.3);}
/* Decree preview card */
.home-decree-card{
background:var(--decree-home-bg,linear-gradient(135deg,#1a1206,#0a0804));
border:1px solid rgba(212,196,166,0.15);border-radius:16px;
padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;
transition:all 0.3s;
}
.home-decree-card:active{transform:scale(0.98);}
.home-decree-sym{font-size:28px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(228,195,123,0.4));}
.home-decree-body{flex:1;min-width:0;}
.home-decree-name{font-family:var(--font-cinzel);font-size:15px;color:rgba(255,255,255,0.85);letter-spacing:0.5px;margin-bottom:3px;}
.home-decree-sub{font-family:var(--font-body);font-size:11px;color:rgba(212,196,166,0.4);}
.home-decree-arrow{font-size:18px;color:rgba(228,195,123,0.4);flex-shrink:0;}
/* Mode grid */
.home-mode-grid{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.home-mode-card-full{grid-column:1/3;}
.home-mode-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);
border-radius:16px;padding:16px 14px;
cursor:pointer;transition:all 0.25s;
display:flex;flex-direction:column;gap:4px;
}
.home-mode-card:active{transform:scale(0.96);background:rgba(228,195,123,0.06);}
.home-mode-card-wide{grid-column:1/3;}
.home-mode-card-wide{flex-direction:row;align-items:center;padding:14px 18px;gap:14px;}
.home-mode-sym{font-size:24px;line-height:1;}
.home-mode-name{font-family:var(--font-cinzel);font-size:14px;color:rgba(255,255,255,0.8);letter-spacing:0.5px;}
.home-mode-desc{font-family:var(--font-body);font-size:11px;color:rgba(212,196,166,0.35);line-height:1.4;}
.home-mode-earn{font-family:var(--font-cinzel);font-size:11px;color:rgba(228,195,123,0.5);margin-top:4px;}
.home-mode-card-wide .home-mode-desc{flex:1;}
/* Mantra row */
.home-mantra-row{
background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);
border-radius:16px;padding:14px 16px;
display:flex;align-items:center;gap:12px;
}
.home-mantra-wrap{flex:1;min-width:0;}
.home-mantra-label{font-family:var(--font-body);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(212,196,166,0.3);margin-bottom:4px;}
.home-mantra-text{font-family:var(--font-cinzel);font-size:17px;color:var(--gold);margin-bottom:2px;}
.home-mantra-meaning{font-family:var(--font-display);font-style:italic;font-size:12px;color:rgba(212,196,166,0.4);}
.home-mantra-btn{font-family:var(--font-body);font-size:11px;letter-spacing:1px;color:rgba(212,196,166,0.4);background:rgba(212,196,166,0.06);border:1px solid rgba(212,196,166,0.15);border-radius:20px;padding:6px 14px;cursor:pointer;white-space:nowrap;}
/* ══════════════════════════════════════════
WEALTH METER — bottom bar
══════════════════════════════════════════ */
.wealth-meter-bar{
display:flex;align-items:center;justify-content:space-between;
padding:8px 20px calc(14px + env(safe-area-inset-bottom,0));
flex-shrink:0;gap:12px;
border-top:1px solid rgba(228,195,123,0.06);
background:rgba(6,8,12,0.9);
}
.wm-timer{font-family:var(--font-cinzel);font-size:12px;color:rgba(212,196,166,0.35);letter-spacing:1px;flex-shrink:0;}
.wm-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;}
.wm-earned{font-family:var(--font-cinzel);font-size:16px;color:var(--gold);letter-spacing:0.5px;transition:all 0.15s;}
.wm-earned.bump{transform:scale(1.15);color:#f0d048;}
.wm-track{width:100%;height:3px;background:rgba(228,195,123,0.08);border-radius:2px;}
.wm-fill{height:100%;background:linear-gradient(to right,rgba(228,195,123,0.5),var(--gold));border-radius:2px;width:0%;transition:width 0.3s;}
.wm-total{font-family:var(--font-body);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(228,195,123,0.3);}
.wm-goal{font-family:var(--font-cinzel);font-size:12px;color:rgba(212,196,166,0.35);letter-spacing:0.5px;flex-shrink:0;text-align:right;}
@keyframes vibrateSymPulse{0%,100%{opacity:0.5;transform:scale(1);}50%{opacity:0.9;transform:scale(1.08);}}
/* Goal + Sankalpa bottom cards */
.home-bottom-row{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
margin-top:0;
}
.home-bottom-card{
background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
border-radius:16px;padding:14px;cursor:pointer;
display:flex;flex-direction:column;gap:4px;transition:all 0.2s;
}
.home-bottom-card:active{background:rgba(228,195,123,0.06);}
.home-bottom-icon{font-size:20px;}
.home-bottom-label{font-family:var(--font-cinzel);font-size:12px;color:rgba(255,255,255,0.7);letter-spacing:0.5px;}
.home-bottom-sub{font-family:var(--font-body);font-size:11px;color:rgba(212,196,166,0.35);}
/* v1.8.0 — PRAYER SCROLL / PRAYER WHEEL / CAROUSEL CSS (~634 lines) retired with #scroll-screen. See index.html retirement comment. */
/* ══════════════════════════════════════════
SRI YANTRA — fixed sacred geometry background
══════════════════════════════════════════ */
.sri-yantra-bg{
position:fixed;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:min(100vw, 100vh);
height:min(100vw, 100vh);
opacity:0.055;
pointer-events:none;
z-index:0;
animation:sryRotate 120s linear infinite;
}
@keyframes sryRotate{
from{ transform:translate(-50%,-50%) rotate(0deg); }
to { transform:translate(-50%,-50%) rotate(360deg); }
}
/* Ensure all screens sit above the yantra */
.screen{ z-index:1; }
/* ── Write full-pane ── */
.write-fullpane-hint{
/* v1.16.57 — Three changes from v1.16.56:
(1) white-space:nowrap removed. The nowrap fix from v1.16.56 went
too far — the 60-char single line overflowed horizontally across
the full viewport on device. Removed so the text wraps naturally
OR at our explicit
break point.
(2) font-size returned to 14px (was 13). Matches tap exactly so
both surfaces read at the same register and the write text isn't
visually smaller than tap.
(3) max-width: 320px added. Caps the line length so the explicit
-controlled second line ("Your Mantra — As You Draw Your
Sigil" at ~290px width) fits on a single line on most phone
viewports, but the text doesn't sprawl edge-to-edge on wider
screens. The
is set in the innerHTML in app.js's startWrite
setup; tap relies on natural wrap (also two lines at 14px /
260px max-width). v1.16.56 keeps: opacity:0 default (no flicker)
and the scoped-override-aligned positioning at 15px below center. */
position:absolute;top:calc(50% + 15px);left:50%;transform:translateX(-50%);
max-width:320px;
text-align:center;pointer-events:none;z-index:3;
font-family:var(--font-display);font-style:italic;font-size:14px;
line-height:1.6;letter-spacing:0.3px;
color:rgba(228,195,123,0.55);
text-shadow:0 0 16px rgba(228,195,123,0.2);
opacity:0;
transition:opacity 0.6s;
}
/* v1.16.0 — sigil glyph as a memory aid below the Likhita instruction.
v1.16.55 — RETIRED from the write hint. The write hint compacted to
a single line ("...As You Draw Your Sigil") and the on-surface glyph
below it was the third sigil reference on the same screen (top-right
SIGIL button + "Sigil" in instruction text + this glyph) — one too
many. The element no longer renders (the JS innerHTML no longer
includes the .write-hint-sigil div). CSS rule kept dormant per L-41:
small machinery, no other consumers, easy to rehook if a future
session wants the on-surface glyph back. Do NOT delete without first
removing this comment block. */
.write-hint-sigil{
margin-top:14px;
font-family:var(--font-display);
font-style:normal;
font-size:30px;
line-height:1;
letter-spacing:0;
color:rgba(228,195,123,0.78);
text-shadow:0 0 14px rgba(228,195,123,0.28);
}
#write-screen .write-cards-wrap{ flex:1; }
#write-screen .write-card-mirror{ border-radius:0; }
#write-canvas{
position:absolute;inset:0;
width:100%!important;height:100%!important;
display:block;touch-action:none;cursor:crosshair;
}
/* ══════════════════════════════════════════
MANTRA CAROUSEL SCREEN
══════════════════════════════════════════ */
#browse-screen{ background:#06080c; }
.mc-wrap{
display:flex;flex-direction:column;height:100%;overflow:hidden;
}
.mc-header{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px 10px;flex-shrink:0;
border-bottom:1px solid rgba(228,195,123,0.08);
}
.mc-back-btn{
background:none;border:none;color:rgba(212,196,166,0.5);
font-family:var(--font-body);font-size:13px;cursor:pointer;padding:4px;
}
.mc-title{
font-family:var(--font-cinzel);font-size:14px;
color:var(--gold);letter-spacing:1px;
}
.mc-counter{
font-family:var(--font-body);font-size:12px;
color:rgba(228,195,123,0.4);letter-spacing:1px;
}
/* Stage */
.mc-stage{
display:flex;align-items:center;justify-content:center;
flex:1;gap:8px;padding:16px 4px;min-height:0;
}
.mc-nav{
background:none;border:none;
font-size:32px;color:rgba(228,195,123,0.3);
cursor:pointer;padding:8px;flex-shrink:0;
transition:color 0.2s;line-height:1;
}
.mc-nav:active{ color:rgba(228,195,123,0.8); }
/* Card flip */
.mc-card-viewport{
perspective:1200px;
flex:1;max-width:300px;
height:100%;max-height:440px;
}
.mc-card{
width:100%;height:100%;
position:relative;transform-style:preserve-3d;
transition:transform 0.55s cubic-bezier(.4,0,.2,1);
}
.mc-card.flipped{ transform:rotateY(180deg); }
.mc-face{
position:absolute;inset:0;
border-radius:24px;overflow:hidden;
backface-visibility:hidden;
display:flex;flex-direction:column;
border:1px solid rgba(228,195,123,0.18);
}
.mc-front{
background:linear-gradient(160deg,#12100a 0%,#06080c 60%,#0a0f0a 100%);
color:var(--gold);align-items:center;justify-content:space-between;padding:20px 16px;
}
.mc-back{
background:linear-gradient(160deg,#0a0f0a 0%,#06080c 60%,#12100a 100%);
color:rgba(212,196,166,0.85);
transform:rotateY(180deg);
align-items:stretch;justify-content:space-between;padding:16px;
}
/* Category badge */
.mc-cat-badge{
align-self:flex-start;
font-family:var(--font-body);font-size:11px;letter-spacing:2px;
padding:4px 10px;border-radius:20px;
background:rgba(228,195,123,0.1);
border:1px solid rgba(228,195,123,0.2);
color:rgba(228,195,123,0.6);
}
.mc-cat-badge[data-cat='Bija']{ background:rgba(228,195,123,0.12);border-color:rgba(228,195,123,0.3);color:var(--gold); }
.mc-cat-badge[data-cat='Affirmation']{ background:rgba(130,195,130,0.1);border-color:rgba(130,195,130,0.25);color:rgba(150,210,150,0.9); }
.mc-cat-badge[data-cat='Switchword']{ background:rgba(190,130,195,0.1);border-color:rgba(190,130,195,0.25);color:rgba(200,150,210,0.9); }
.mc-cat-badge[data-cat='Sacred Number']{ background:rgba(220,80,80,0.1);border-color:rgba(220,120,80,0.3);color:rgba(240,160,100,0.9); }
.mc-cat-badge[data-cat='Declaration']{ background:rgba(228,195,123,0.18);border-color:rgba(228,195,123,0.5);color:#e4c37b;font-size:11px; }
/* Front body */
.mc-front-body{
display:flex;flex-direction:column;align-items:center;gap:8px;
flex:1;justify-content:center;
}
.mc-script{
font-size:64px;line-height:1.1;
font-family:'Noto Serif',serif;
color:var(--gold);text-align:center;
text-shadow:0 0 40px rgba(228,195,123,0.4);
}
.mc-display{
font-family:var(--font-cinzel);font-size:20px;
color:rgba(228,195,123,0.7);letter-spacing:2px;
}
.mc-deity{
font-family:var(--font-display);font-style:italic;font-size:13px;
color:rgba(228,195,123,0.35);
}
/* Flip button */
.mc-flip-btn{
align-self:center;
background:rgba(228,195,123,0.08);
border:1px solid rgba(228,195,123,0.2);border-radius:20px;
padding:8px 20px;font-family:var(--font-cinzel);font-size:11px;
letter-spacing:1px;color:rgba(228,195,123,0.6);cursor:pointer;
}
.mc-flip-back{ background:rgba(255,255,255,0.04); }
/* Back body */
.mc-back-body{
flex:1;display:flex;flex-direction:column;gap:8px;overflow:hidden;
}
.mc-back-script{
font-family:'Noto Serif',serif;font-size:28px;
color:var(--gold);text-align:center;margin-bottom:4px;
}
.mc-back-meaning{
font-family:var(--font-display);font-style:italic;font-size:12.5px;
color:rgba(212,196,166,0.75);line-height:1.6;
overflow-y:auto;flex:1;
}
.mc-back-use-label{
font-family:var(--font-body);font-size:11px;letter-spacing:2px;
text-transform:uppercase;color:rgba(228,195,123,0.35);margin-top:4px;
}
.mc-back-use{
font-family:var(--font-body);font-size:12px;
color:rgba(212,196,166,0.6);line-height:1.4;
}
.mc-back-count{
font-family:var(--font-cinzel);font-size:11px;
color:rgba(228,195,123,0.45);letter-spacing:0.5px;margin-top:2px;
}
.mc-back-actions{
display:flex;gap:8px;flex-shrink:0;padding-top:8px;
}
.mc-select-btn{
flex:1;padding:12px;border-radius:50px;
background:rgba(228,195,123,0.12);
border:1px solid rgba(228,195,123,0.35);
font-family:var(--font-cinzel);font-size:12px;letter-spacing:1px;
color:var(--gold);cursor:pointer;transition:all 0.2s;
}
.mc-select-btn:active{ background:rgba(228,195,123,0.25); }
/* Dots */
.mc-dots{
display:flex;justify-content:center;gap:6px;padding:8px;flex-shrink:0;flex-wrap:wrap;
max-width:280px;margin:0 auto;
}
.mc-dot{
width:6px;height:6px;border-radius:50%;
background:rgba(228,195,123,0.2);cursor:pointer;transition:all 0.2s;flex-shrink:0;
}
.mc-dot.active{ background:var(--gold);transform:scale(1.3); }
/* Quick scroll */
.mc-quick{
display:flex;gap:6px;padding:8px 16px 20px;overflow-x:auto;flex-shrink:0;
scrollbar-width:none;
}
.mc-quick::-webkit-scrollbar{ display:none; }
.mc-quick-chip{
flex-shrink:0;padding:6px 14px;border-radius:20px;
background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
font-family:var(--font-cinzel);font-size:11px;color:rgba(212,196,166,0.4);
cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.mc-quick-chip.active{
background:rgba(228,195,123,0.1);border-color:rgba(228,195,123,0.3);
color:var(--gold);
}
/* Hide Sri Yantra on home screen */
#home-screen ~ .sri-yantra-bg,
body:has(#home-screen:not(.hidden)) .sri-yantra-bg { display:none; }
/* Write mode ink layer — sits above circuit, persists strokes */
#write-ink-canvas{
position:absolute;inset:0;
width:100%!important;height:100%!important;
pointer-events:none;z-index:2;
display:block;
}
#write-canvas{ z-index:1; }
/* Sri Yantra — only on mantra cards screen */
.sri-yantra-bg{ display:none; }
#browse-screen:not(.hidden) ~ .sri-yantra-bg,
body .sri-yantra-bg.visible{ display:block; }
/* ── Tap header — real flex item like write-header ── */
.tap-header{
display:flex;align-items:center;padding:10px 12px 6px;
flex-shrink:0;gap:8px;position:relative;
}
.tap-header .session-mantra-wrap{
text-align:center;display:flex;flex-direction:column;
align-items:center;justify-content:center;
height:auto!important;pointer-events:none;
}
/* ── Write screen — tap-style layout ── */
.write-header{
display:flex;align-items:center;justify-content:space-between;
padding:10px 16px 6px;flex-shrink:0;
}
.write-header .session-mantra-instruction{
position:absolute;left:0;right:0;text-align:center;
pointer-events:none;
}
.write-circuit-area{
flex:1;position:relative;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.write-circuit-area #write-canvas{
position:absolute;inset:0;
width:100%!important;height:100%!important;
display:block;touch-action:none;
}
.write-circuit-area #write-ink-canvas{
position:absolute;inset:0;
width:100%!important;height:100%!important;
pointer-events:none;z-index:2;display:block;
}
.write-circuit-area .circuit-progress-ring{
position:absolute;
width:min(200px,45vw);height:min(200px,45vw);
z-index:1;pointer-events:none;
}
.write-circuit-area .write-fullpane-hint{
/* v1.16.56 — scoped override updated to match the main rule's
positioning after v1.16.51's repositioning of the write hint to
15px below center. Was previously resetting to top:50%;
transform:translate(-50%,-50%) — centered on bindu — which won
CSS specificity over v1.16.51's main-rule edit and silently
caused the write hint to render AT the bindu instead of below
it. Resolved by matching the main rule's values here. Source of
a subtle layout regression that surfaced only when combined with
v1.16.54's trāṭaka prompt above. */
position:absolute;top:calc(50% + 15px);left:50%;
transform:translateX(-50%);
bottom:auto;z-index:3;
text-align:center;
}
/* ── Tap — full screen circuit like write ── */
.circuit-area-fullscreen{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
flex:unset!important;
border-radius:0!important;
border:none!important;
overflow:hidden;
}
/* v1.16.45 — Was `#session-screen { position:relative; overflow:hidden; }`.
The `position:relative` was added to provide a positioning context for
the absolute-positioned `.circuit-area-fullscreen` (sibling rule above),
but that class was never wired up in JS or HTML and is orphan CSS.
The override broke the viewport-fill behavior of `.screen { position:fixed }`,
collapsing #session-screen to its content height. Legacy `initCircuit`
then force-sized the circuit-area to compensate, using a phantom
`.freq-footer` subtraction (also orphan) — and the math being wrong by
60px showed as the "black band" Hariom saw. Removing the position
override lets `.screen`'s base position:fixed fill the viewport
correctly, matching how #write-screen already works. The overflow:hidden
is kept as a safety guard against any future descendant spillover. */
#session-screen{ overflow:hidden; }
/* ══════════════════════════════════════════
TNT RIPPLE LOGO + PREMIUM HOME CARDS
══════════════════════════════════════════ */
/* Ripple logo replaces $ rings */
.home-tnt-ripple{
width:72px;height:72px;
object-fit:contain;
filter:drop-shadow(0 0 12px rgba(228,195,123,0.3));
animation:ripplePulse 3s ease-in-out infinite;
}
@keyframes ripplePulse{
0%,100%{ filter:drop-shadow(0 0 8px rgba(228,195,123,0.2)); transform:scale(1); }
50%{ filter:drop-shadow(0 0 20px rgba(228,195,123,0.5)); transform:scale(1.04); }
}
/* Premium mode cards */
.home-mode-card{
position:relative;overflow:hidden;
border-radius:18px;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:4px;padding:14px 10px 12px;
cursor:pointer;
transition:transform 0.15s, box-shadow 0.15s;
border:1px solid rgba(255,255,255,0.08);
min-height:0;
}
.home-mode-card:active{ transform:scale(0.97); }
/* v2.11.4 — Per-mode colors retired. The four mode cards previously
carried distinct gradients (Jefferson's palette), colored borders,
colored box-shadows, and colored icon glow filters. Hariom's call:
"the whole UI just looks clownish the colors." Four saturated
2×2 cards read as product-launch splash, not contemplative doorways.
All four cards now share one dark-glass treatment with gold accents;
color returns inside each mode where it means something (session
decree backdrop, mirror altar cards). Four doorways, one surface. */
.hmc-tap,
.hmc-write,
.hmc-mirror,
.hmc-boardroom{
background:linear-gradient(145deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.015) 100%);
border-color:rgba(228,195,123,0.18);
box-shadow:0 4px 18px rgba(0,0,0,0.25);
backdrop-filter:blur(2px);
}
/* Icons: gold across all four, subtle shared glow */
.hmc-icon{
font-size:26px;line-height:1;
color:#e4c37b;
filter:drop-shadow(0 0 10px rgba(228,195,123,0.35));
margin-bottom:2px;
}
.hmc-name{
font-family:var(--font-cinzel);font-size:14px;
color:rgba(245,240,232,0.92);letter-spacing:1px;
}
.hmc-purpose{
font-family:var(--font-display);font-style:italic;
font-size:11px;color:rgba(212,196,166,0.45);
text-align:center;line-height:1.4;
}
/* v2.11.5 — Practice list (stanza form, replaces 2×2 grid).
Four rows, hairline dividers, SVG glyph + name + italic desc.
Gold glyphs (inheriting currentColor). Rows use the existing
color vocabulary but register as text-with-glyph rather than
tiles. Solves the dead-space problem left by v2.11.4's grid
floating in the top half after primitive bar retirement. */
.home-practice-list{
display:flex;flex-direction:column;
padding:0 4px;
margin:8px 0 12px;
}
.home-practice{
display:flex;align-items:flex-start;gap:20px;
padding:22px 6px;
border-bottom:1px solid rgba(228,195,123,0.12);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:opacity 0.2s ease, background 0.2s ease;
color:rgba(228,195,123,0.85); /* glyph inherits this */
}
.home-practice:last-child{ border-bottom:none; }
.home-practice:active{
opacity:0.55;
background:rgba(228,195,123,0.03);
}
.home-practice-glyph{
flex-shrink:0;
width:26px;height:26px;
margin-top:3px;
filter:drop-shadow(0 0 6px rgba(228,195,123,0.2));
}
.home-practice-body{ flex:1;min-width:0; }
.home-practice-name{
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:22px;
color:rgba(245,240,232,0.94);
letter-spacing:0.5px;
line-height:1;
}
.home-practice-desc{
font-family:var(--font-display);font-style:italic;
font-size:13px;
color:rgba(212,196,166,0.55);
margin-top:8px;line-height:1.5;
}
.home-mode-earn{
font-family:var(--font-body);font-size:11px;
letter-spacing:1px;color:rgba(228,195,123,0.4);
margin-top:2px;
}
/* v1.10.1 — RESTORED: .practice-chip + .stats-sheet* blocks inadvertently
removed in v1.10.0's gaudy-goal sweep. The chip is the Mantra/Sigil
pill at top-right of the Tap/Write practice screens; without its
absolute positioning + right:16px, it fell into normal flow at
top-left. Stats-sheet block styles the #stats-sheet-overlay (still
live in HTML). .home-placeholder-box NOT restored (orphaned — no
HTML or JS references). */
/* v2.11.0 — Practice-screen chips (Tap: current mantra; Write: current
sigil). Top-right of the practice surface, just inside the safe area.
v2.11.25 — chip sized to match End Session button for visual symmetry. */
.practice-chip{
position:absolute;
top:calc(env(safe-area-inset-top, 0px) + 12px);
right:16px;
z-index:100;
display:flex;align-items:center;gap:6px;
background:none;
border:1px solid var(--border);
border-radius:50px;
padding:8px 14px 8px 16px;
font-family:var(--font-body);
font-size:11px;letter-spacing:2px;
color:var(--text-dim);
text-transform:uppercase;
-webkit-tap-highlight-color:transparent;
user-select:none;
cursor:pointer;
transition:border-color 0.2s, color 0.2s;
}
.practice-chip:active{ border-color:var(--gold); color:var(--gold); }
.practice-chip-label{
color:var(--text-dim);
white-space:nowrap;
}
.practice-chip-gear{
color:rgba(228,195,123,0.7); /* v2.12.0 Session D — chip is live; gear reads as actionable */
font-size:12px;line-height:1;
}
/* Stats sheet */
.stats-sheet{
width:100%;background:#0e0c14;
border-radius:20px 20px 0 0;
border:1px solid rgba(212,196,166,0.1);border-bottom:none;
padding:0 20px calc(32px + env(safe-area-inset-bottom,0)) 20px;
}
.stats-sheet-title{
font-family:var(--font-cinzel);font-size:15px;
color:var(--gold);text-align:center;
padding:8px 0 16px;
}
.stats-sheet-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:10px;margin-bottom:20px;
}
.stats-item{
background:rgba(228,195,123,0.04);
border:1px solid rgba(228,195,123,0.1);
border-radius:14px;padding:14px;
}
.stats-item-val{
font-family:var(--font-cinzel);font-size:22px;
color:var(--gold);margin-bottom:4px;
}
.stats-item-lbl{
font-family:var(--font-body);font-size:11px;
letter-spacing:1.5px;text-transform:uppercase;
color:rgba(212,196,166,0.35);
}
.stats-sheet-broadcast{
padding-top:16px;border-top:1px solid rgba(228,195,123,0.08);
}
.stats-sheet-bar-label{
display:flex;justify-content:space-between;
font-family:var(--font-body);font-size:11px;
color:rgba(228,195,123,0.45);margin-bottom:6px;
}
/* ══════════════════════════════════════════
TNT-STYLE HOME HEADER
══════════════════════════════════════════ */
.home-header{
display:flex;flex-direction:column;align-items:center;
padding:6px 16px 4px;flex-shrink:0;gap:2px;
position:relative;
}
.home-settings-btn{
position:absolute;top:20px;right:14px;z-index:10;font-size:20px;
}
.home-publisher{
font-family:var(--font-body);font-size:11px;
letter-spacing:2px;color:rgba(107,123,141,0.7);
text-align:center;margin-bottom:2px;margin-top:2px;
}
/* v2.11.7 — Tree of Life publisher mark at footer. Sibling to the
Sri Yantra seal at top (retired v2.11.8). Slightly smaller per
footer-mark convention. Same gold drop-shadow vocabulary for
family resemblance.
v2.11.14 — SVG ring overlay retired (doubled the rings).
Tree PNG carries its own Thank You × 3 canopy baked in. */
.home-tree-of-life{
display:block;
width:min(100px,24vw);height:min(100px,24vw);
object-fit:contain;
filter:drop-shadow(0 0 14px rgba(228,195,123,0.18));
/* v1.15.3 — Disable browser default long-press-image callout
("Save Image", "Copy Image"...) so the wave-while-held gesture
doesn't get hijacked by the system menu. iOS Safari respects
touch-callout; Android Chrome respects user-select; Firefox
respects user-select. tap-highlight-color suppresses the blue
flash on tap (Android). */
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
margin:0;
position:relative;
z-index:1;
}
/* v1.15.9 — Heart-coherence glow wrapper. ::before doesn't apply
to replaced elements like ![]()
, so the v1.15.8 attempt at
.home-tree-of-life::before shipped but rendered nothing on
device. The glow now lives on this wrapper span. Sibling pattern
to the dhristi-dot pulse (4s ease-in-out infinite, opacity
0.55→1, scale 1→1.18). The tree IS the dhristi at home —
the publisher mark functioning as the contemplative anchor
before practice. Always-on, breathing, present.
v1.15.10 — Animation peak dimmed 15% (0.55→1 became 0.47→0.85)
per Hariom's call: the glow was reading too prominent at home
among the doorway list. Press-state restores intensity (0.7→1.2
range, see .tree-pressing below).
v1.16.24 — Cadence slowed 4s → 11s. Hariom: "same breathing
pattern" as the v1.16.23 chapter-title-dot — coherence-
breathing resonance pocket (5.5s expand + 5.5s contract =
~5.5 breaths/min, Lehrer's resonant-frequency literature).
The tree becomes a passive coherence pacer for users who
linger at the doorway. Brief-dwell users tap through before
one breath completes — that's the design: linger and entrain,
pass through and don't. Continues the v1.15.10 arc of moving
the home tree toward ambient/subliminal.
v1.16.25 — Press-state cadence ALSO moved to 11s after Hariom
disclosed the press is his meditation vehicle (not the touch-
acknowledgment Claude had framed it as). Idle and home-pressed
now share the 11s cadence; the surface breathes the same rate
whether the user is at the doorway or holding the tree in
meditation. Threshold pressed (singular declaration rite) keeps
2.4s — see treeHeartGlowPressed consumer below. */
.home-tree-wrap{
display:inline-block;
position:relative;
margin:0 auto 4px;
line-height:0;
}
.home-tree-wrap::before{
content:'';
position:absolute;
top:50%;left:50%;
width:140%;height:140%;
transform:translate(-50%,-50%) scale(1);
border-radius:50%;
background:radial-gradient(circle, rgba(228,195,123,0.22) 0%, rgba(228,195,123,0.08) 45%, rgba(228,195,123,0) 70%);
pointer-events:none;
z-index:0;
animation:treeHeartGlow 11s ease-in-out infinite;
}
@keyframes treeHeartGlow{
0%,100%{ opacity:0.47; transform:translate(-50%,-50%) scale(1); }
50% { opacity:0.85; transform:translate(-50%,-50%) scale(1.18); }
}
/* v1.15.10 — Press-state glow intensification. While the user has
their finger on the tree (touch-active), the wrapper carries
.tree-pressing (toggled in app.js's treeRipplePressStart /
treeRipplePressEnd). The glow runs the brighter keyframe set
on a slightly faster cadence — reads as the tree responding
to touch, the gesture acknowledged before the ripple even
completes its first arc.
Used by both .home-tree-wrap (always-on dim → bright on press)
and .threshold-sk-tree-wrap (invisible → bright on press only).
Threshold has no idle glow because Phase B is a focused
declaration moment, not a doorway.
v1.16.0 — pressed-state aura pumped: pseudo-element extent
140% → 200%, pressed scale 1.28 → 1.5, gradient stops denser
(0.22→0.36 inner, 0.08→0.18 mid, 70%→78% outer). The user is
farming the aura — the touch needs to feel like a corona, not
a tap-confirm. The idle (non-pressed) glow stays where it was
so the home doorway register doesn't blow up; only the press
state bigs up.
v1.16.25 — Home pressed cadence 2.4s → 11s. Hariom's disclosure:
"press state is the important one... it has become a meditation
vehicle for me." The 2.4s "touch-acknowledgment" framing was
Claude-side abstraction; the surface's actual truth is meditation.
Cadence follows. The home-pressed halo and the gratitude ring
(treeGratitudeBreath, see below) move to 11s in unison — same
resonance-frequency pocket as v1.16.23/24 (idle glow + chapter
title dot). The threshold sankalpa tree's pressed glow stays at
2.4s — different rite, different rhythm: sealing the sankalpa is
a singular declaration held for ~5-6 seconds once-per-install,
where 11s wouldn't complete a visible breath. Same keyframes
(treeHeartGlowPressed amplitude unchanged); durations diverge
per surface intent. The amplitude reads less brash at 11s
because slow opacity changes are harder to perceive — fits
the meditation register. */
.home-tree-wrap.tree-pressing::before{
width:200%;height:200%;
background:radial-gradient(circle, rgba(228,195,123,0.36) 0%, rgba(228,195,123,0.18) 45%, rgba(228,195,123,0) 78%);
animation:treeHeartGlowPressed 11s ease-in-out infinite;
}
@keyframes treeHeartGlowPressed{
0%,100%{ opacity:0.85; transform:translate(-50%,-50%) scale(1.1); }
50% { opacity:1.0; transform:translate(-50%,-50%) scale(1.5); }
}
/* v1.16.21 — Three Thank You's on the upper semicircle (was v1.16.19
continuous full-circle wrap). Hariom: gratitude as a discrete prayer
triplet rather than continuous decoration. The path is upper half-arc
(9→3 through 12); textPath uses startOffset 50% + text-anchor middle
to center the three Thank You's at the top of the arc. Hidden idle
(opacity:0); during press the ring fades IN and BREATHES via
treeGratitudeBreath keyframes (2.4s, opacity 0.55↔1.0) matching the
canopy's treeHeartGlowPressed cycle exactly — text rises and fades
with the halo. text-rendering geometricPrecision keeps glyph curves
crisp at the small font-size on phone screens. The text element is
populated by _syncIndependenceText (function name retained for caller
stability). Independence Day moved to settings (v1.16.19); Daily
Practice frame holds the date as centered italic text above the three
pills. */
.home-tree-indep{
position:absolute;
top:50%; left:50%;
width:180%; height:180%;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:2;
opacity:0;
transition:opacity 0.5s ease;
overflow:visible;
}
.home-tree-wrap.tree-pressing .home-tree-indep{
opacity:1;
animation:treeGratitudeBreath 11s ease-in-out infinite;
}
@keyframes treeGratitudeBreath{
0%, 100% { opacity:0.55; }
50% { opacity:1.0; }
}
.home-tree-indep-text{
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:11px;
letter-spacing:1.2px;
fill:rgba(245,210,140,0.92);
text-rendering:geometricPrecision;
filter:drop-shadow(0 0 4px rgba(228,195,123,0.6));
}
/* Threshold sankalpa tree — wrapper for press-state glow.
v1.16.0 — pressed aura pumped to match home: extent 140% → 200%,
denser gradient. Threshold tree is the seal-it moment — the
bigger corona is doctrinally appropriate (this is the instant
the practitioner names their sankalpa).
v1.16.37 — Brought into full alignment with the home tree.
Hariom: "the ring ceremony for the sankalpa.... let's make the
glow around the tree same as what we have on home screen. heart
coherent round glow with thank you emanating." Three changes:
(1) idle glow now ALWAYS-ON via the same treeHeartGlow keyframes
the home tree uses (was: opacity:0 idle, on press only).
(2) press cadence moved 2.4s → 11s, matching home press state.
(3) parallel Thank You gratitude ring (.threshold-sk-indep)
appears on press at 11s breath, mirroring .home-tree-indep.
Earlier comment framed the threshold tree as "focused declaration
moment, not a doorway" — that framing predated v1.16.25's
disclosure that the press IS the meditation. The ring ceremony
gesture IS the same meditative act (ring+middle finger trunk
placement, three Thank Yous); only the rite-context differs.
The visual language should match — coherence move, not regression.
The "singular declaration held ~5-6 seconds" framing isn't
contradicted: 11s cadence still completes ~half a breath in that
window, which is the same fraction-of-a-breath the home tree
shows for a tap-through user. Linger and entrain, pass through
and don't — same design as the home tree. */
.threshold-sk-tree-wrap{
display:inline-block;
position:relative;
line-height:0;
}
.threshold-sk-tree-wrap::before{
content:'';
position:absolute;
top:50%;left:50%;
width:140%;height:140%;
transform:translate(-50%,-50%) scale(1);
border-radius:50%;
background:radial-gradient(circle, rgba(228,195,123,0.22) 0%, rgba(228,195,123,0.08) 45%, rgba(228,195,123,0) 70%);
pointer-events:none;
z-index:0;
animation:treeHeartGlow 11s ease-in-out infinite;
}
.threshold-sk-tree-wrap.tree-pressing::before{
width:200%;height:200%;
background:radial-gradient(circle, rgba(228,195,123,0.36) 0%, rgba(228,195,123,0.18) 45%, rgba(228,195,123,0) 78%);
animation:treeHeartGlowPressed 11s ease-in-out infinite;
}
/* v1.16.37 — Threshold gratitude ring, sibling of .home-tree-indep.
Hidden idle (opacity:0); during press fades in and breathes at 11s
matching the canopy. Same SVG arc shape (upper-arc 9→3 through 12),
same Thank You × 3 textPath structure. Sized 180% to match home.
Populated by _syncIndependenceText (extended in v1.16.37 to fill
both ring elements). */
.threshold-sk-indep{
position:absolute;
top:50%; left:50%;
width:180%; height:180%;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:2;
opacity:0;
transition:opacity 0.5s ease;
overflow:visible;
}
.threshold-sk-tree-wrap.tree-pressing .threshold-sk-indep{
opacity:1;
animation:treeGratitudeBreath 11s ease-in-out infinite;
}
.threshold-sk-indep-text{
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:11px;
letter-spacing:1.2px;
fill:rgba(245,210,140,0.92);
text-rendering:geometricPrecision;
filter:drop-shadow(0 0 4px rgba(228,195,123,0.6));
}
.home-title-block{
display:flex;flex-direction:column;align-items:center;gap:6px;
margin-bottom:8px;
}
.home-title-main{
line-height:1.2;
padding-bottom:10px;
overflow:visible;
}
.home-title-moolah{
font-family:'Lora','Georgia',serif;
font-size:clamp(20px,6.5vw,34px);
color:rgba(212,196,166,0.5);
font-weight:400;letter-spacing:-0.5px;
}
.home-title-japa{
font-family:'Lora','Georgia',serif;
font-size:clamp(29px,9.2vw,47px);
color:rgba(228,195,123,0.95);
-webkit-text-fill-color:rgba(228,195,123,0.95);
font-weight:700;font-style:italic;letter-spacing:-0.5px;
display:inline-block;
overflow:visible;
padding-bottom:0.28em;
line-height:1.15;
vertical-align:top;
}
.home-title-rule{
width:60px;height:1px;
background:linear-gradient(90deg,transparent,rgba(228,195,123,0.5),transparent);
}
.home-blessing{
font-family:'Lora','Georgia',serif;
font-style:italic;
font-size:clamp(9px,2.5vw,11px);
color:rgba(212,196,166,0.38);
text-align:center;line-height:1.4;
padding:0 20px;margin-bottom:2px;
}
/* v1.10.0 — RETIRED: .home-header-goal (element and rule). */
/* ── HOME SCREEN EVEN SPACING ──
gap:0 on scroll; each element owns its own margins.
Every divider has equal breathing room above and below. */
.home-scroll{ gap:0; }
.home-header{ padding:6px 16px 0; margin-bottom:0; }
/* v2.2.18 polish (late evening Apr 19 2026): refuge block now owns
symmetric breathing room via padding:10px 0, so the gap above
"I TOOK REFUGE IN" and the gap below "on April N, YYYY" read as
equal. Previously padding:0 + divider margin-top:18px produced a
visible top-heavy asymmetry — the refuge felt crowded against the
malaJapa wordmark while drifting away from the divider. Paired with
.home-divider margin-top tightening below. */
/* v1.10.0 — RETIRED: .home-goal-wrap spacing override for home-scroll. */
.home-mode-grid-2x2{ margin-bottom:0; }
/* ══════════════════════════════════════════
TNT HOME FOOTER
══════════════════════════════════════════ */
.home-tnt-footer{
display:flex;flex-direction:column;align-items:center;
padding:0 20px 32px;gap:10px;
margin-top:auto; /* v2.11.13 — push footer to bottom of .home-scroll flex column */
}
.footer-yantra{
width:56px;height:56px;object-fit:contain;
opacity:0.85;
filter:drop-shadow(0 0 8px rgba(228,195,123,0.15));
}
.footer-publisher{
font-family:var(--font-cinzel);font-size:12px;
color:rgba(212,196,166,0.6);letter-spacing:1px;
text-align:center;
}
.footer-links{
display:flex;flex-wrap:wrap;justify-content:center;
gap:8px 16px;
}
.footer-link{
font-family:var(--font-body);font-size:12px;
color:rgba(228,195,123,0.5);text-decoration:none;
letter-spacing:0.5px;
}
.footer-link:active{ color:var(--gold); }
/* v2.11.9 — Copyright imprint. Smaller than footer-link, more dim,
wider letter-spacing. Reads as colophon imprint line, not as
content. Sits below the URL, closes the page as a proper
publisher footer. */
.home-copyright{
font-family:var(--font-body);font-size:10px;
color:rgba(228,195,123,0.32);
letter-spacing:0.8px;
text-align:center;
margin-top:8px;
}
.footer-blessing{
font-family:'Lora','Georgia',serif;font-style:italic;
font-size:12px;color:rgba(212,196,166,0.35);
text-align:center;line-height:1.5;padding:0 20px;
}
/* v1.10.0 — RETIRED: Definite Chief Aim block (home-goal-wrap + label + amount + keyframes homeGoalPulse + reduced-motion). The big-gold-dollar-on-home lineage. */
/* v1.10.0 — RETIRED: Home entrance animation (home-entrance-dollar orbs + keyframes homeGoalBoom + home-goal-boom). 36-orb converge + boom. */
/* v2.11.4 — per-card color overrides retired. The four !important
specificity blocks below forced each card's saturated gradient +
colored border + colored shadow over the base rules. With the
unified dark-glass treatment defined in the main hmc block, these
overrides would re-introduce the clown-color problem. All four
collapsed into one unified rule that wins specificity without
reintroducing per-mode color. */
.home-mode-grid-2x2 .home-mode-card.hmc-tap,
.home-mode-grid-2x2 .home-mode-card.hmc-write,
.home-mode-grid-2x2 .home-mode-card.hmc-mirror,
.home-mode-grid-2x2 .home-mode-card.hmc-council,
.home-mode-grid-2x2 .home-mode-card.hmc-boardroom{
background:linear-gradient(145deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.015) 100%)!important;
border-color:rgba(228,195,123,0.18)!important;
box-shadow:0 4px 18px rgba(0,0,0,0.25)!important;
}
/* ═══════════════════════════════════════════════════════════════
THE OBSERVATORY — Starfield New Thought Council
Five masters. Infinite wisdom. One cosmic stage.
═══════════════════════════════════════════════════════════════ */
/* Author palette */
:root {
--obs-shinn: #a855f7; --obs-shinn-glow: rgba(168,85,247,0.38);
--obs-hill: #eab308; --obs-hill-glow: rgba(234,179,8,0.38);
--obs-wattles: #22c55e; --obs-wattles-glow: rgba(34,197,94,0.38);
--obs-goddard: #818cf8; --obs-goddard-glow: rgba(129,140,248,0.38);
--obs-allen: #f59e0b; --obs-allen-glow: rgba(245,158,11,0.38);
}
/* Screen base */
#observatory-screen {
position: relative;
background: #06080c;
overflow: hidden;
}
/* ── Responding: burst of light ── */
@keyframes obsBurstShinn {
0%,100% { box-shadow: 0 0 14px var(--obs-shinn-glow), inset 0 0 10px rgba(168,85,247,0.08); }
45% { box-shadow: 0 0 38px rgba(168,85,247,0.95), 0 0 70px rgba(168,85,247,0.45), inset 0 0 22px rgba(168,85,247,0.28); transform: scale(1.12); }
}
@keyframes obsBurstHill {
0%,100% { box-shadow: 0 0 14px var(--obs-hill-glow), inset 0 0 10px rgba(234,179,8,0.08); }
45% { box-shadow: 0 0 38px rgba(234,179,8,0.95), 0 0 70px rgba(234,179,8,0.45), inset 0 0 22px rgba(234,179,8,0.28); transform: scale(1.12); }
}
@keyframes obsBurstWattles {
0%,100% { box-shadow: 0 0 14px var(--obs-wattles-glow), inset 0 0 10px rgba(34,197,94,0.08); }
45% { box-shadow: 0 0 38px rgba(34,197,94,0.95), 0 0 70px rgba(34,197,94,0.45), inset 0 0 22px rgba(34,197,94,0.28); transform: scale(1.12); }
}
@keyframes obsBurstGoddard {
0%,100% { box-shadow: 0 0 14px var(--obs-goddard-glow), inset 0 0 10px rgba(129,140,248,0.08); }
45% { box-shadow: 0 0 38px rgba(129,140,248,0.95), 0 0 70px rgba(129,140,248,0.45), inset 0 0 22px rgba(129,140,248,0.28); transform: scale(1.12); }
}
@keyframes obsBurstAllen {
0%,100% { box-shadow: 0 0 14px var(--obs-allen-glow), inset 0 0 10px rgba(245,158,11,0.08); }
45% { box-shadow: 0 0 38px rgba(245,158,11,0.95), 0 0 70px rgba(245,158,11,0.45), inset 0 0 22px rgba(245,158,11,0.28); transform: scale(1.12); }
}
@keyframes obsThink {
0%,100% { opacity: 0.25; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-4px); }
}
/* ─── Animations ─── */
@keyframes obsFadeUp {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ntHorizonPulse{
0%,100%{box-shadow:0 0 18px rgba(228,195,123,0.1),inset 0 0 16px rgba(0,0,0,0.35);}
50%{box-shadow:0 0 38px rgba(228,195,123,0.22),inset 0 0 16px rgba(0,0,0,0.35);}
}
/* ══════════════════════════════════════════
ACCESSIBILITY — Focus Rings
══════════════════════════════════════════ */
:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
border-radius:4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
}
/* ══════════════════════════════════════════
ACCESSIBILITY — Minimum touch targets
══════════════════════════════════════════ */
.screen-back,
.mirror-back-topleft,
.settings-close{
min-width:44px;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.home-tab{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* ══════════════════════════════════════════
ACCESSIBILITY — prefers-reduced-motion
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* v1.10.12 — Onboarding v2 + MANTRA CEREMONY CSS retired (~350 lines).
All .ob-* rules EXCEPT the shared .ob-color-* family (used by
settings' color picker — do NOT remove) were cut in lockstep with
#onboarding-screen HTML. All .mc-ceremony / .mcc-* rules and
@keyframes mccFadeIn / mccBreathe / mccBlaze retired with
#mc-ceremony HTML. See retirement comments at the respective
index.html and app.js sites for full scope. */
/* ── Session Tagline ── */
.session-declaration{
flex-shrink:0;
flex-grow:0;
height:44px;
min-height:44px;
display:flex;align-items:center;justify-content:center;
padding:0 24px;
font-family:'Cinzel',serif;
font-size:clamp(11px,3.2vw,13px);
letter-spacing:2.5px;
color:rgba(228,195,123,0.28);
text-align:center;
opacity:0;
transition:opacity 1.2s ease;
}
.session-declaration.fade-in{ opacity:1; }
/* ── Practice-screen tagline (v2.2.10) — the mala brand tagline as a
quiet footer on Tap and Write. Same treatment family as
.boardroom-tagline and .oval-mirror-footer: small, gold, letter-
spaced, non-interactive. Flex child (not absolute) so it reserves
its own space at the bottom without overlapping the declaration
cycler (Tap) or the canvas (Write). ─────────────────────────── */
.practice-tagline{
flex-shrink:0;
flex-grow:0;
text-align:center;
font-family:var(--font-cinzel);
font-size:9px;
letter-spacing:3.5px;
color:rgba(228,195,123,0.35);
padding:6px 24px calc(10px + env(safe-area-inset-bottom,0px));
text-transform:uppercase;
pointer-events:none;
}
/* v1.16.30 — Practice timer. Hariom's framing: "2 mins to brush the
mind." On Tap and Write the timer is a 2:00 countdown; on the
exit (#complete-screen) it's 1:00.
Doctrinal frame: the timer reports CURRENT-session time only —
no history, no streaks, no goals (PHILOSOPHY XXII). Visual register
is dim and gentle — a "quiet support" cue, not a performance metric.
v1.16.32 — Position raised on Tap/Write to sit halfway between the
yantra (practice center) and the footer tagline. Hariom's call after
v1.16.30 device test: "the timer is small it could go 1/2 way
between sri yantra and footer; it doesn't need to be so low." Was
flex-row sibling above the tagline (~30px above bottom edge); now
absolute-positioned at bottom: 80px so it has more presence as a
companion, not tucked at the edge.
Three phases (Tap/Write only — Exit stays simple):
- .practice-timer (no extra class): countdown phase, OR overtime
accumulator phase (Phase C). Single-line dim gold M:SS digit.
During countdown the digit reads e.g. "1:43"; during Phase C
after the threshold, same slot reads "+0:42" — the prefix is
the entire framing.
- .practice-timer-message: 2-minute threshold passed. Two-line
mānasikā instruction ("Close Your Eyes / Repeat Silently In
The Mind"). Brighter than countdown, more presence — this IS
the teaching moment. Stays for 30 seconds, then yields back
to the bare digit register for Phase C.
.practice-timer-crossed: applied for ~1.6s when the threshold is
first crossed, fires the gold-glow victory pulse. One-shot only.
v1.16.33: .practice-timer-exit retired — the exit surface
(#complete-screen) no longer hosts a timer. Hariom's call: the
clock was competing with the contemplative-sit register; pearl +
sankalpa prompt + EXIT WHEN READY button are the complete
vocabulary. The Tap/Write timer surfaces below are unchanged.
v1.16.36: .practice-timer-released retired (was the dimmed
"Exit When Ready" Phase C styling). Phase C now displays a +M:SS
overtime accumulator using the bare .practice-timer rendering
path. Hariom's framing the morning after v1.16.35: each minute
past target reads as another small win — practice piling up
rather than ending. */
.practice-timer{
position:absolute;
bottom:calc(80px + env(safe-area-inset-bottom,0px));
left:0;right:0;
text-align:center;
font-family:var(--font-cinzel);
font-size:13px;
letter-spacing:2px;
color:rgba(228,195,123,0.42);
padding:0 24px;
pointer-events:none;
font-variant-numeric:tabular-nums;
min-height:18px;
transition:color 0.6s ease, text-shadow 0.6s ease;
z-index:2;
}
.practice-timer:empty{
display:none;
}
/* Phase B — mānasikā instruction. Brighter and a touch larger than
the countdown digit; reads as a small teaching panel. Two lines:
bold-ish primary instruction, italicized practice-direction below. */
.practice-timer.practice-timer-message{
color:rgba(228,195,123,0.68);
font-size:13px;
letter-spacing:1.5px;
line-height:1.6;
min-height:auto;
}
.practice-timer .practice-timer-line1{
font-family:var(--font-cinzel);
font-size:13px;
letter-spacing:3px;
color:rgba(228,195,123,0.72);
text-transform:uppercase;
margin-bottom:6px;
}
.practice-timer .practice-timer-line2{
font-family:var(--font-body);
font-size:11px;
letter-spacing:1px;
color:rgba(228,195,123,0.50);
font-style:italic;
text-transform:none;
}
/* v1.16.36 — Phase C "release" rule retired (was the dimmed-gold
"Exit When Ready" styling). Phase C now displays a numeric
accumulator ("+M:SS") in the same digit register as Phase A,
so it inherits .practice-timer base styling and needs no
message-mode override. The .practice-timer-released class is
no longer added by any consumer; the class name and the rule
that styled it both retire here. */
.practice-timer.practice-timer-crossed{
animation:practiceTimerVictory 1.6s ease-in-out 1;
}
@keyframes practiceTimerVictory{
0%{
color:rgba(228,195,123,0.42);
text-shadow:none;
}
35%{
color:rgba(228,195,123,0.95);
text-shadow:0 0 16px rgba(228,195,123,0.65), 0 0 6px rgba(228,195,123,0.85);
}
70%{
color:rgba(228,195,123,0.55);
text-shadow:0 0 8px rgba(228,195,123,0.30);
}
100%{
color:rgba(228,195,123,0.28);
text-shadow:none;
}
}
/* v1.16.33: .practice-timer-exit rules retired — exit surface no longer
hosts a timer. .practice-timer-overtime sibling rule retired in
lockstep (was only used by the exit surface; Tap/Write use the
three-phase message rules instead). */
/* v1.16.82 — Phase B (.practice-timer-message / -line1 / -line2) and
Phase C (numeric accumulator) and the .practice-timer-crossed victory
pulse are all RETIRED DORMANT (L-41). The cyclic gaze/internalize
model replaced the one-time three-phase progression: there is no
30s mānasikā message window, no +M:SS overtime accumulator, and no
single threshold to fire a victory pulse at. The CSS rules above are
kept in place (no live consumer adds these classes anymore — verified:
_ptRender no longer emits .practice-timer-message, and
_ptFireCrossedOnce is no longer called) rather than deleted, per L-41
and W-23 (multi-block CSS removal risk). The internalization surface
below is the replacement. */
/* ── Internalization (antaranga trāṭaka) field — v1.16.82, model
revised v1.16.86 ──
Black (#000, not the app's #06080c). The v1.16.83 arc (soft-white
field + central fixation dot + auto-fading instruction + full yantra)
chased an on-screen *negative* afterimage; Hariom set that aside for
an eyes-closed mantra-internalization model. With the eyes closed the
screen is not looked at — black is simply the calm "the practice is
now within" surface. It carries ONE standing instruction (close the
eyes, watch the mantra deep within the mind) shown every round and
KEPT until the practitioner taps to begin the next trāṭaka round —
no round-0 gate, no auto-fade. The instruction is functional
wayfinding, XXIII-consistent (not teaching/quote content). Nothing
of the inner mantra is rendered — that is the practitioner's. The
0.6s opacity transition is the fade the practice surface holds into.
Handler never stopPropagation()s, so the document-level left-edge
back-swipe still exits from here. */
#internalize-overlay{
position:fixed;
inset:0;
background:#000;
z-index:9000;
opacity:0;
pointer-events:none;
transition:opacity 0.6s ease;
display:flex;
align-items:center;
justify-content:center;
padding:40px 32px;
box-sizing:border-box;
}
#internalize-overlay.show{
opacity:1;
pointer-events:auto;
}
#internalize-teaching{
text-align:center;
max-width:300px;
}
.internalize-teach-main{
font-family:var(--font-display);
font-style:italic;
font-size:16px;
line-height:1.85;
letter-spacing:0.4px;
/* Dim warm gold on black — present and readable, deliberately quiet:
this is a contemplative rest surface, not a screen to be stared at
(the eyes are closed; the mantra is held within). */
color:rgba(228,195,123,0.40);
}
.internalize-teach-sub{
margin-top:22px;
font-family:var(--font-display);
font-style:italic;
font-size:12px;
letter-spacing:0.5px;
color:rgba(228,195,123,0.26);
}
html.high-contrast .internalize-teach-main{ color:rgba(255,255,255,0.46); }
html.high-contrast .internalize-teach-sub{ color:rgba(255,255,255,0.32); }
/* v1.16.91 — END affordance on the antaranga black field. Top-left,
deliberately quiet (same register as .internalize-teach: dim warm
gold on black, this is a rest surface), but a generous tap target.
Exempt from the dwell guard in JS. */
#internalize-end-btn{
position:absolute;
top:0; left:0;
margin:0;
padding:18px 22px;
background:transparent;
border:0;
-webkit-appearance:none;
appearance:none;
font-family:var(--font-cinzel);
font-size:10px;
letter-spacing:3px;
color:rgba(228,195,123,0.34);
cursor:pointer;
z-index:1;
-webkit-tap-highlight-color:transparent;
transition:color 0.2s ease;
}
#internalize-end-btn:active{ color:rgba(228,195,123,0.62); }
html.high-contrast #internalize-end-btn{ color:rgba(255,255,255,0.40); }
html.high-contrast #internalize-end-btn:active{ color:rgba(255,255,255,0.68); }
/* ── Color Swatches (onboarding + settings) ── */
.ob-color-pick{
display:flex;flex-direction:column;align-items:center;gap:10px;
width:100%;
}
.ob-color-label{
font-family:'Cinzel',serif;font-size:10px;
letter-spacing:3px;color:rgba(228,195,123,0.4);
text-align:center;
}
.ob-color-swatches{
/* v2.15.0 — grid of 4×2 so the 8 chakras split cleanly (root→heart / throat→gold)
at the diaphragm, instead of Gold wrapping alone on a second line. */
display:grid;grid-template-columns:repeat(4, 36px);gap:12px;
justify-content:center;align-items:center;
}
.ob-color-swatch{
width:36px;height:36px;border-radius:50%;
cursor:pointer;
border:2px solid transparent;
transition:transform 0.2s, border-color 0.2s, box-shadow 0.2s;
position:relative;
flex-shrink:0;
}
.ob-color-swatch:active{ transform:scale(0.9); }
.ob-color-swatch.active{
border-color:rgba(228,195,123,0.85);
box-shadow:0 0 12px rgba(228,195,123,0.5);
transform:scale(1.12);
}
/* ════════════════════════════════════════════
DECREE CEREMONY OVERLAY
════════════════════════════════════════════ */
.dc-ceremony{
position:fixed;inset:0;z-index:9200;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:linear-gradient(160deg,#041a06 0%,#0a320e 60%,#06080c 100%);
padding:0 24px;
}
.dc-ceremony.hidden{ display:none; }
.dc-phase{
display:flex;flex-direction:column;align-items:center;justify-content:center;
width:100%;max-width:380px;gap:14px;
animation:mccFadeIn 0.7s ease forwards;
}
.dc-phase.hidden{ display:none; }
.dc-label{
font-family:'Cinzel',serif;font-size:10px;
letter-spacing:4px;color:rgba(228,195,123,0.4);text-align:center;
}
.dc-creed-title{
font-family:'Cinzel',serif;font-weight:700;
font-size:clamp(22px,6.5vw,34px);
color:rgba(228,195,123,0.95);
text-align:center;letter-spacing:2px;
text-shadow:0 0 20px rgba(228,195,123,0.5),0 0 50px rgba(228,195,123,0.2);
}
.dc-creed-author{
font-family:'Lora','Georgia',serif;font-style:italic;
font-size:13px;color:rgba(212,196,166,0.45);text-align:center;
}
.dc-pearl-wrap{
position:relative;width:min(60vw,240px);height:min(60vw,240px);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dc-pearl-ring{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:100%;height:100%;
border:1px solid rgba(240,192,64,0.22);
border-radius:50%;
box-shadow:0 0 28px rgba(240,192,64,0.04),inset 0 0 20px rgba(240,192,64,0.03);
pointer-events:none;
}
.dc-pearl-dot{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:20px;height:20px;border-radius:50%;
background:radial-gradient(circle,
rgba(235,245,255,1) 0%,
rgba(140,200,255,0.95) 45%,
rgba(105,180,245,0.7) 100%);
box-shadow:
0 0 0 12px rgba(140,200,255,0.06),
0 0 28px 7px rgba(150,205,255,0.28),
0 0 60px 20px rgba(120,190,250,0.14);
pointer-events:none;
}
.dc-pearl-breathe .dc-pearl-dot{ animation:dcPearlBreathe 3.5s ease-in-out infinite; }
.dc-pearl-blaze .dc-pearl-dot{ animation:dcPearlBlaze 2s ease-out forwards; }
@keyframes dcPearlBreathe{
0%,100%{ opacity:0.7; transform:translate(-50%,-50%) scale(1); }
50% { opacity:1; transform:translate(-50%,-50%) scale(1.14); }
}
@keyframes dcPearlBlaze{
0% { opacity:0.8; transform:translate(-50%,-50%) scale(1);
box-shadow:0 0 0 12px rgba(140,200,255,0.06),0 0 28px 7px rgba(150,205,255,0.28),0 0 60px 20px rgba(120,190,250,0.14); }
40% { opacity:1; transform:translate(-50%,-50%) scale(1.55);
box-shadow:0 0 0 20px rgba(140,200,255,0.14),0 0 64px 18px rgba(150,205,255,0.55),0 0 140px 48px rgba(120,190,250,0.32); }
100%{ opacity:1; transform:translate(-50%,-50%) scale(1.28);
box-shadow:0 0 0 20px rgba(140,200,255,0.1),0 0 48px 14px rgba(150,205,255,0.4),0 0 110px 38px rgba(120,190,250,0.22); }
}
.dc-first-line{
font-family:'Lora','Georgia',serif;font-style:italic;
font-size:clamp(14px,4.5vw,18px);
color:rgba(228,195,123,0.7);text-align:center;line-height:1.5;
}
/* Phase 2 — full decree */
.dc-scroll-wrap{
width:100%;max-height:45vh;overflow-y:auto;
-webkit-overflow-scrolling:touch;
border-left:2px solid rgba(228,195,123,0.2);
padding-left:16px;margin:0 0 8px;
}
.dc-lines{
display:flex;flex-direction:column;gap:4px;
}
.dc-line{
font-family:'Lora','Georgia',serif;font-style:italic;
font-size:clamp(14px,4.2vw,17px);
color:rgba(212,196,166,0.85);
line-height:1.6;
opacity:0;
animation:mccFadeIn 0.5s ease forwards;
}
.dc-commit-btn{
width:100%;max-width:320px;padding:18px;
background:linear-gradient(135deg,rgba(228,195,123,0.14),rgba(212,164,48,0.08));
border:1px solid rgba(228,195,123,0.4);border-radius:50px;
font-family:'Cinzel',serif;font-size:15px;letter-spacing:3px;
color:var(--gold);cursor:pointer;margin-top:8px;
}
/* Phase 2 — practice (Speak / Whisper / Plant) */
.dc-back-btn{
position:absolute;top:16px;left:16px;z-index:10;
background:none;border:1px solid var(--border);border-radius:50px;
padding:8px 16px;font-family:var(--font-body);font-size:11px;
letter-spacing:2px;color:var(--text-dim);cursor:pointer;
text-transform:uppercase;margin-top:env(safe-area-inset-top,0px);
}
.dc-practice-label{
font-family:'Cinzel',serif;font-size:10px;
letter-spacing:4px;color:rgba(228,195,123,0.5);text-align:center;
text-transform:uppercase;
transition:opacity 0.4s ease;
}
.dc-practice-skt{
font-family:'Lora','Georgia',serif;font-style:italic;
font-size:13px;color:rgba(212,196,166,0.35);text-align:center;
margin-top:-6px;
transition:opacity 0.4s ease;
}
.dc-preview-line{
font-family:'Lora','Georgia',serif;font-style:italic;
font-size:clamp(16px,5vw,21px);
color:rgba(228,195,123,0.92);text-align:center;line-height:1.55;
padding:0 8px;
}
/* Fingerprint ring */
.dc-fp-wrap{
position:relative;width:140px;height:140px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;
margin:12px 0;
}
.dc-fp-wrap:active{ transform:scale(0.96); }
.dc-progress-ring{
position:absolute;inset:0;width:100%;height:100%;
transform:rotate(-90deg);
}
.dc-ring-bg{
fill:none;stroke:rgba(228,195,123,0.12);stroke-width:4;
}
.dc-ring-fill{
fill:none;stroke:rgba(228,195,123,0.85);stroke-width:4;
stroke-linecap:round;
stroke-dasharray:314;
stroke-dashoffset:314;
transition:stroke-dashoffset 0.35s ease;
filter:drop-shadow(0 0 6px rgba(228,195,123,0.4));
}
.dc-fp-emoji{
font-size:60px;position:relative;z-index:1;
filter:drop-shadow(0 0 10px rgba(228,195,123,0.25));
}
.dc-rep-count{
font-family:var(--font-body);font-size:10px;
letter-spacing:2px;color:rgba(212,196,166,0.3);
text-transform:uppercase;text-align:center;
}
/* Phase 3 — sealing */
.dc-sealed-title{
font-family:'Cinzel',serif;font-weight:700;
font-size:clamp(18px,5.5vw,26px);
color:rgba(228,195,123,0.95);text-align:center;letter-spacing:2px;
}
.dc-sealed-line1,.dc-sealed-line2{
font-family:'Cinzel',serif;font-size:20px;
letter-spacing:4px;color:rgba(228,195,123,0.9);text-align:center;
}
.dc-sealed-sub{
font-family:'Lora','Georgia',serif;font-style:italic;
font-size:14px;color:rgba(212,196,166,0.45);text-align:center;
}
.dc-begin-btn{
width:100%;max-width:320px;padding:18px;
background:linear-gradient(135deg,rgba(228,195,123,0.14),rgba(212,164,48,0.08));
border:1px solid rgba(228,195,123,0.4);border-radius:50px;
font-family:'Cinzel',serif;font-size:15px;letter-spacing:3px;
color:var(--gold);cursor:pointer;margin-top:8px;
opacity:0;animation:mccFadeIn 0.8s 0.5s ease forwards;
}
/* ── Mirror static orb field ──
v2.1.1: spans restyled from '$' glyphs to ::before orbs.
v2.1.5: hidden entirely. The Mirror screen's teaching IS the oval + the
dṛṣṭi point. Ambient orb decoration around it was competing for the eye
where only stillness belonged. Class + HTML divs preserved for rollback;
::before orb styling preserved below. */
.mirror-dollar-field{
display:none;
}
.mirror-dollar-field.legacy-active{
display:grid;
position:absolute;inset:0;pointer-events:none;z-index:0;
grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);
padding:16px;
}
.mirror-dollar-field span{
display:flex;align-items:center;justify-content:center;
position:relative;
}
.mirror-dollar-field span::before{
content:'';
display:block;
width:14px;height:14px;
border-radius:50%;
background: radial-gradient(
circle,
rgba(255,250,240,0.9) 0%,
rgba(255,236,184,0.75) 18%,
rgba(248,208,112,0.4) 42%,
rgba(240,192,64,0.14) 72%,
transparent 100%
);
box-shadow:
0 0 10px 2px rgba(255,232,176,0.35),
0 0 22px 5px rgba(240,192,64,0.18),
0 0 44px 10px rgba(240,180,50,0.08);
}
/* ── Visual Choice — new layout ── */
/* v1.16.12 — margins zeroed; wrap now grows via flex:1 (set inline at the
element) to absorb the gap between the header quote and the BEGIN
button + footer tagline. Tap/Write column-flex pattern. */
.vc-oval-wrap{ position:relative; display:flex; align-items:center; justify-content:center; margin-top:0; margin-bottom:0; }
.vc-flank-btn{
position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:44px;border-radius:50%;
background:rgba(212,196,166,0.06);border:1px solid rgba(212,196,166,0.18);
display:flex;align-items:center;justify-content:center;
font-size:20px;cursor:pointer;z-index:2;
}
.vc-corner-btn{
position:absolute;
width:38px;height:38px;border-radius:50%;
background:rgba(212,196,166,0.08);border:1px solid rgba(212,196,166,0.2);
display:flex;align-items:center;justify-content:center;
font-size:18px;cursor:pointer;z-index:2;
}
.vc-drishti-dot{
width:14px;height:14px;border-radius:50%;
background:rgba(228,195,123,0.9);
box-shadow:0 0 12px 4px rgba(228,195,123,0.5),0 0 28px 8px rgba(228,195,123,0.2);
animation:drishtiPulse 3s ease-in-out infinite;
}
@keyframes drishtiPulse{
0%,100%{ transform:scale(1); box-shadow:0 0 12px 4px rgba(228,195,123,0.5),0 0 28px 8px rgba(228,195,123,0.2); }
50%{ transform:scale(1.18); box-shadow:0 0 18px 6px rgba(228,195,123,0.65),0 0 40px 12px rgba(228,195,123,0.25); }
}
.vc-mirror-quote{
position:absolute;
top:40%;left:50%;transform:translate(-50%,-50%);
width:80%;
text-align:center;
font-family:'Cinzel',serif;
font-size:13px;
font-weight:600;
letter-spacing:1px;
color:rgba(228,195,123,0.75);
line-height:1.9;
text-shadow:0 0 20px rgba(228,195,123,0.3);
z-index:2;
white-space:pre-line;
}
/* ── Mirror tagline ── */
.mirror-tagline{
color:rgba(228,195,123,0.35);
text-align:center;
padding:10px 24px;
flex-shrink:0;
text-transform:uppercase;
}
/* ── Write tagline — absolute inside canvas area ── */
.write-tagline-inner{
position:absolute;
bottom:10px;
left:0;right:0;
text-align:center;
font-family:'Cinzel',serif;
font-size:clamp(10px,2.8vw,12px);
letter-spacing:2.5px;
color:rgba(228,195,123,0.22);
pointer-events:none;
z-index:10;
opacity:0;
transition:opacity 1.2s ease;
}
.write-tagline-inner.fade-in{ opacity:1; }
/* ═══════════════════════════════════════════════════════════════
THE BOARDROOM — v9.1oracle
═══════════════════════════════════════════════════════════════ */
#boardroom-screen{ overflow:hidden; }
#boardroom-canvas{
position:absolute;inset:0;
width:100%;height:100%;
pointer-events:none;
z-index:0;
}
.boardroom-header{
position:relative;z-index:3;
display:flex;align-items:center;
padding:16px 16px 0;gap:8px;
flex-shrink:0;
}
.boardroom-back-btn{
background:rgba(212,196,166,0.06);
border:1px solid rgba(212,196,166,0.18);
color:rgba(212,196,166,0.6);
font-family:var(--font-body);font-size:11px;
padding:6px 14px;border-radius:20px;
cursor:pointer;letter-spacing:0.5px;
white-space:nowrap;flex-shrink:0;
}
.boardroom-title{
flex:1;text-align:center;
font-family:var(--font-cinzel);font-size:15px;
color:var(--gold);letter-spacing:3px;text-transform:uppercase;
}
.boardroom-visit{
font-family:var(--font-body);font-size:10px;
color:rgba(212,196,166,0.5);letter-spacing:1px;
min-width:80px;text-align:right;flex-shrink:0;
line-height:1.5;
}
/* ── Orb intro + floor ── */
.br-orb-intro{
display:block;
font-family:var(--font-display);font-style:italic;
font-size:13px;color:rgba(212,196,166,0.52);
line-height:1.7;margin-bottom:14px;
}
.br-orb-floor{
display:block;
font-family:var(--font-cinzel);font-size:15px;
color:var(--gold);letter-spacing:1px;
}
.boardroom-quote{
position:absolute;top:68px;left:0;right:0;
text-align:center;
z-index:2;pointer-events:none;
opacity:1;
transition:opacity 0.8s ease;
padding:0 28px;
display:flex;flex-direction:column;gap:5px;
}
.br-quote-text{
font-family:var(--font-cinzel);font-size:11px;
color:rgba(212,196,166,0.32);letter-spacing:1.2px;
line-height:1.65;font-style:italic;
}
.br-quote-attr{
font-family:var(--font-body);font-size:9px;
color:rgba(212,196,166,0.5);letter-spacing:2px;
text-transform:uppercase;
}
/* ── Quote attribution (inline-applied class on Bristol/Allen citations,
sibling treatment to .br-quote-attr in the boardroom) ─────────────
v1.16.41: extracted from inline styles to a shared class so HC and
daylight modes can override correctly per W-37 discipline. The two
inline-styled s in index.html (line ~505 Bristol, line ~776
James Allen) carry this class plus their remaining font/size/spacing
inline; only the color now lives in the stylesheet. */
.quote-attribution{
color:rgba(228,195,123,0.5);
}
/* ── Mode overrides (W-37 discipline) ─────────────────────────────────
v1.16.41: tagline + attribution opacity bump exposed that these
surfaces never had HC or daylight overrides. Default uses warm gold;
HC swaps to high-opacity white (HC user asked for legibility);
daylight swaps to cream at moderate opacity (outdoor reading wants
more contrast against bright ambient). */
html.high-contrast .practice-tagline,
html.high-contrast .boardroom-tagline,
html.high-contrast .mirror-tagline,
html.high-contrast .oval-mirror-footer{
color:rgba(255,255,255,0.55);
}
html.high-contrast .br-quote-attr,
html.high-contrast .quote-attribution{
color:rgba(255,255,255,0.7) !important;
}
html.daylight .practice-tagline,
html.daylight .boardroom-tagline,
html.daylight .mirror-tagline,
html.daylight .oval-mirror-footer{
color:rgba(245,241,232,0.5);
}
html.daylight .br-quote-attr,
html.daylight .quote-attribution{
color:rgba(245,241,232,0.65) !important;
}
.boardroom-field-hint{
position:absolute;bottom:72px;left:0;right:0;
text-align:center;
font-family:var(--font-body);font-size:11px;
color:rgba(212,196,166,0.28);letter-spacing:2.5px;
text-transform:uppercase;
z-index:2;pointer-events:none;
}
/* ── Round carousel wrapper ──────────────── */
.boardroom-round{
position:absolute;top:58px;bottom:0;left:0;right:0;
z-index:6;display:flex;flex-direction:column;
background:#06080c;
padding-top:12px;
}
.boardroom-round.hidden{ display:none; }
/* ── Thinking state ──────────────────────── */
.boardroom-thinking{
position:absolute;bottom:72px;left:0;right:0;
z-index:6;pointer-events:none;
display:flex;flex-direction:column;align-items:center;gap:10px;
padding:0 32px;
}
.boardroom-thinking.hidden{ display:none; }
.boardroom-think-label{
font-family:var(--font-cinzel);font-size:10px;
color:rgba(212,196,166,0.35);letter-spacing:2.5px;
text-transform:uppercase;
}
.boardroom-think-track{
width:100%;height:1px;
background:rgba(212,196,166,0.1);
border-radius:1px;overflow:hidden;
}
.boardroom-think-bar{
height:100%;width:0%;
background:rgba(212,196,166,0.55);
transition:width 0.35s ease;
}
/* ── Conversation thread ─────────────────── */
/* Board tradition response card — carousel card 1 */
.br-board-card{
flex:0 0 calc(100% - 40px);
scroll-snap-align:center;
border:1px solid rgba(212,196,166,0.15);
border-radius:16px;padding:20px 18px;
background:#0a0c12;
display:flex;flex-direction:column;gap:10px;
overflow-y:auto;scrollbar-width:none;
}
.br-board-card::-webkit-scrollbar{ display:none; }
.br-card-header{
display:flex;flex-direction:column;gap:6px;
flex-shrink:0;
}
.br-card-sym-row{
display:flex;gap:10px;align-items:center;
}
.br-card-sym{
font-size:22px;line-height:1;
}
.br-card-trad{
font-family:var(--font-cinzel);font-size:9px;
letter-spacing:2.5px;text-transform:uppercase;
}
.br-trad-header{
font-family:var(--font-cinzel);font-size:9px;
letter-spacing:2px;text-transform:uppercase;
margin-top:10px;margin-bottom:4px;flex-shrink:0;
}
.br-voices{ display:flex;flex-direction:column;gap:12px;overflow-y:auto; }
.br-voice{ font-size:13px;line-height:1.7;color:rgba(212,196,166,0.65); }
.br-voice-name{
font-family:var(--font-cinzel);font-size:10px;
letter-spacing:1px;font-weight:600;
display:block;margin-bottom:3px;
}
.br-voice-text{ font-family:var(--font-body); }
.br-summary-block{
font-family:var(--font-cinzel);font-size:11px;
color:rgba(212,196,166,0.65);line-height:1.75;
font-style:italic;text-align:center;
padding:4px 0 10px;flex-shrink:0;
border-bottom:1px solid rgba(212,196,166,0.12);
margin-bottom:6px;
}
/* CEO reply card — carousel last card */
.br-ceo-card{
flex:0 0 calc(100% - 40px);
scroll-snap-align:center;
border:1px solid rgba(212,196,166,0.18);
border-radius:16px;padding:20px 18px 18px;
background:#0a0c12;
display:flex;flex-direction:column;gap:10px;
border-style:dashed;
min-height:320px;
}
.br-ceo-label{
font-family:var(--font-body);font-size:9px;
letter-spacing:2px;color:rgba(212,196,166,0.32);
text-transform:uppercase;text-align:right;
flex-shrink:0;
}
.br-ceo-textarea{
flex:1;
width:100%;box-sizing:border-box;
background:rgba(212,196,166,0.05);
border:1px solid rgba(212,196,166,0.15);
border-radius:8px;padding:14px;
color:rgba(212,196,166,0.82);
font-family:var(--font-body);font-size:15px;
resize:none;outline:none;
-webkit-appearance:none;
min-height:120px;
}
.br-reply-chips{
margin-bottom:2px;
}
.br-ceo-submit-btn{
width:100%;flex-shrink:0;
background:rgba(212,196,166,0.08);
border:1px solid rgba(212,196,166,0.22);
color:rgba(212,196,166,0.7);
font-family:var(--font-cinzel);font-size:12px;
padding:14px;border-radius:20px;
letter-spacing:2px;cursor:pointer;
}
.br-ceo-submit-btn:disabled{ opacity:0.4; }
/* Chair closing charge — single carousel card */
.br-koan-card{
flex:0 0 calc(100% - 40px);
scroll-snap-align:center;
border:1px solid rgba(212,196,166,0.18);
border-radius:16px;padding:28px 22px;
background:rgba(8,10,16,0.9);
display:flex;flex-direction:column;
gap:16px;
}
.br-koan-eyebrow{
font-family:var(--font-body);font-size:9px;
letter-spacing:2.5px;text-transform:uppercase;
}
.br-koan-charge{
font-family:var(--font-cinzel);font-size:14px;
color:rgba(212,196,166,0.88);line-height:1.8;
font-style:italic;
}
.br-koan-seed-label{
font-family:var(--font-body);font-size:8px;
letter-spacing:2.5px;text-transform:uppercase;
color:rgba(212,196,166,0.3);
border-top:1px solid rgba(212,196,166,0.1);
padding-top:14px;
}
.br-koan-seed{
font-family:var(--font-cinzel);font-size:12px;
color:rgba(212,196,166,0.55);line-height:1.75;
font-style:italic;
}
/* legacy alias */
.br-koan-text{
font-family:var(--font-cinzel);font-size:13px;
color:rgba(212,196,166,0.82);line-height:1.9;
font-style:italic;text-align:center;
}
.br-koan-eyebrow{
font-family:var(--font-body);font-size:9px;
letter-spacing:2.5px;text-transform:uppercase;
margin-bottom:14px;
}
.br-koan-text{
font-family:var(--font-cinzel);font-size:13px;
color:rgba(212,196,166,0.82);line-height:1.9;
font-style:italic;
}
/* ── Exit card ───────────────────────────── */
.boardroom-exit-card{
position:absolute;inset:0;z-index:8;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
background:#06080c;
padding:40px 28px 36px;
overflow-y:auto;gap:16px;
}
.boardroom-exit-card.hidden{ display:none; }
/* ── Closing screen ── */
.br-closing-wrap{
display:flex;flex-direction:column;
align-items:center;text-align:center;
gap:16px;max-width:320px;flex:1;
justify-content:center;
}
.br-closing-thanks{
font-family:var(--font-body);font-size:11px;
letter-spacing:2px;text-transform:uppercase;
color:rgba(212,196,166,0.38);
}
.br-closing-divider{
width:40px;height:1px;
background:rgba(212,196,166,0.15);
}
.br-closing-thought{
font-family:var(--font-display);font-style:italic;
font-size:17px;color:rgba(228,195,123,0.88);
line-height:1.7;
}
.br-closing-attr{
font-family:var(--font-body);font-size:11px;
letter-spacing:1.5px;color:rgba(212,196,166,0.4);
}
.br-closing-until{
font-family:var(--font-cinzel);font-size:11px;
letter-spacing:2px;color:rgba(212,196,166,0.3);
}
.br-commit-btn{
width:100%;max-width:320px;padding:14px;
background:rgba(212,196,166,0.08);
border:1px solid rgba(212,196,166,0.28);
color:rgba(212,196,166,0.85);
font-family:var(--font-cinzel);font-size:12px;
letter-spacing:2px;border-radius:24px;
cursor:pointer;flex-shrink:0;
}
.br-download-btn{
width:100%;max-width:320px;padding:8px;
background:transparent;border:none;
color:rgba(212,196,166,0.25);
font-family:var(--font-body);font-size:11px;
letter-spacing:1px;cursor:pointer;flex-shrink:0;
}
.br-respond-btn{
padding:10px 0;
background:rgba(212,196,166,0.07);
border:1px solid rgba(212,196,166,0.2);
border-radius:20px;width:100%;
color:rgba(212,196,166,0.65);
font-family:var(--font-body);font-size:11px;
letter-spacing:1.5px;cursor:pointer;flex-shrink:0;
}
.br-card-actions{
display:flex;gap:8px;flex-shrink:0;
margin-top:auto;padding-top:10px;
}
.br-card-actions .br-explore-btn,
.br-card-actions .br-respond-btn{
flex:1;margin-top:0;width:auto;
/* v2.14.1 — match internals so both buttons read as siblings
(share button was smaller text/padding/radius than respond) */
padding:10px 0;
font-size:11px;
letter-spacing:1.5px;
border-radius:20px;
}
/* ── Orb Overlay ─────────────────────────── */
/* ── Session limit overlay ── */
.boardroom-limit-overlay{
position:absolute;inset:0;z-index:20;
display:flex;align-items:center;justify-content:center;
background:rgba(6,8,12,0.92);
padding:32px 28px;
}
.boardroom-limit-overlay.hidden{ display:none; }
.brl-inner{
display:flex;flex-direction:column;align-items:center;
text-align:center;gap:14px;max-width:320px;
}
.brl-icon{
font-size:28px;color:rgba(228,195,123,0.5);
animation:breathe 3s ease-in-out infinite;
}
.brl-title{
font-family:var(--font-cinzel);font-size:15px;
color:rgba(228,195,123,0.85);letter-spacing:2px;
}
.brl-body{
font-family:var(--font-body);font-size:13px;
color:rgba(212,196,166,0.55);line-height:1.7;
}
.brl-btn{
margin-top:8px;width:100%;padding:14px;
background:rgba(212,196,166,0.06);
border:1px solid rgba(212,196,166,0.22);
border-radius:24px;
font-family:var(--font-cinzel);font-size:11px;
letter-spacing:2px;color:rgba(212,196,166,0.7);
cursor:pointer;
}
/* ── Seed from last session ── */
.boardroom-orb-seed{
font-family:var(--font-body);font-size:11px;
font-style:italic;color:rgba(228,195,123,0.45);
text-align:center;max-width:300px;
line-height:1.6;margin-bottom:12px;flex-shrink:0;
}
.boardroom-orb-seed.hidden{ display:none; }
.boardroom-orb-overlay{
position:absolute;inset:0;z-index:10;
display:flex;flex-direction:column;
align-items:center;justify-content:flex-start;
padding:52px 20px 20px;
background:#06080c;
overflow-y:auto;gap:12px;
}
.boardroom-orb-overlay.hidden{ display:none; }
.boardroom-orb-eyebrow{
font-family:var(--font-body);font-size:9px;
letter-spacing:3px;color:rgba(212,196,166,0.4);
text-transform:uppercase;
text-align:center;flex-shrink:0;
display:flex;align-items:center;gap:10px;
}
/* Chair symbol inline with eyebrow — no large glass ball */
.boardroom-orb-glass{
width:36px;height:36px;border-radius:50%;
background:radial-gradient(circle at 33% 33%,rgba(110,84,190,0.22),#080612 68%);
border:1px solid rgba(165,132,240,0.45);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.boardroom-orb-sym{ font-size:16px;color:rgba(212,196,166,0.75); }
/* ── Intro frame ── */
.boardroom-orb-question{
width:100%;max-width:380px;
border:1px solid rgba(212,196,166,0.14);
border-radius:14px;
padding:16px 18px 14px;
background:rgba(212,196,166,0.03);
flex-shrink:0;
}
.br-orb-intro{
display:block;
font-family:var(--font-display);font-style:italic;
font-size:13px;color:rgba(212,196,166,0.52);
line-height:1.7;margin-bottom:10px;
}
.br-orb-floor{
display:block;
font-family:var(--font-cinzel);font-size:14px;
color:var(--gold);letter-spacing:1px;
text-align:center;
}
.boardroom-orb-input{
width:100%;max-width:380px;box-sizing:border-box;
background:rgba(12,12,24,0.92);
border:1px solid rgba(212,196,166,0.22);
border-radius:10px;
color:var(--text);
font-family:var(--font-body);font-size:14px;
line-height:1.55;padding:12px 14px;
resize:none;
-webkit-user-select:text;user-select:text;
}
.boardroom-orb-input:focus{
outline:none;border-color:rgba(212,196,166,0.45);
}
.boardroom-orb-input::placeholder{ color:rgba(212,196,166,0.25); }
.boardroom-orb-send{
width:100%;max-width:380px;
background:rgba(212,196,166,0.08);
border:1px solid rgba(212,196,166,0.32);
color:var(--gold);
font-family:var(--font-cinzel);font-size:12px;
letter-spacing:2px;padding:12px 28px;
border-radius:24px;cursor:pointer;
}
.boardroom-orb-send:disabled{ opacity:0.45;cursor:default; }
.boardroom-orb-back{
position:absolute;top:16px;left:16px;z-index:2;
}
/* ── Thought starters ── */
.boardroom-starters{
width:100%;max-width:380px;
}
.boardroom-starters-divider{
width:100%;height:1px;
background:rgba(212,196,166,0.08);
margin-bottom:10px;
}
.boardroom-starters-label{
font-family:var(--font-body);font-size:9px;
letter-spacing:2px;text-transform:uppercase;
color:rgba(212,196,166,0.22);
margin-bottom:8px;text-align:center;
}
.boardroom-starters-chips{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}
.boardroom-starter-chip{
text-align:left;
background:rgba(212,196,166,0.04);
border:1px solid rgba(212,196,166,0.1);
border-radius:8px;padding:7px 10px;
color:rgba(212,196,166,0.48);
font-family:var(--font-body);font-size:11px;
line-height:1.4;cursor:pointer;
transition:background 0.15s,color 0.15s;
}
.boardroom-starter-chip:active{
background:rgba(212,196,166,0.10);
color:rgba(212,196,166,0.82);
}
.br-reply-chip-exit{
border-color:rgba(228,195,123,0.45);
color:rgba(228,195,123,0.75);
grid-column: span 2;
text-align: center;
font-style: italic;
letter-spacing: 0.5px;
}
/* ── Response Carousel ───────────────────── */
.boardroom-response{
position:absolute;inset:0;z-index:8;
display:flex;flex-direction:column;
padding-top:60px;
background:rgba(6,8,12,0.85);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.boardroom-response.hidden{ display:none; }
.boardroom-response-question{
font-family:var(--font-display);font-size:11.5px;
color:rgba(212,196,166,0.38);
text-align:center;padding:0 28px 14px;
font-style:italic;letter-spacing:0.4px;
flex-shrink:0;
}
.boardroom-carousel{
display:flex;
overflow-x:scroll;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
gap:12px;padding:0 20px 4px;
flex:1;min-height:0;
scrollbar-width:none;
position:relative;
}
.boardroom-carousel::-webkit-scrollbar{ display:none; }
.br-card{
flex:0 0 calc(100% - 40px);
scroll-snap-align:center;
border:1px solid;border-radius:16px;
padding:22px 20px 18px;
display:flex;flex-direction:column;
gap:10px;overflow-y:auto;
scrollbar-width:none;
}
.br-card::-webkit-scrollbar{ display:none; }
.br-card-chair{
font-family:var(--font-body);font-size:8px;
letter-spacing:3px;text-align:center;
color:rgba(155,89,182,0.7);
text-transform:uppercase;flex-shrink:0;
margin-top:-4px;
}
.br-card-sym{
font-size:26px;text-align:center;
line-height:1;flex-shrink:0;
}
.br-card-name{
font-family:var(--font-cinzel);font-size:12px;
letter-spacing:2.5px;text-align:center;
text-transform:uppercase;flex-shrink:0;
}
.br-card-text{
font-family:var(--font-display);font-size:13px;
color:rgba(200,184,152,0.85);
line-height:1.7;text-align:center;
font-style:italic;
}
.boardroom-carousel-dots{
display:flex;justify-content:center;
gap:8px;padding:10px 0 6px;flex-shrink:0;
}
.br-dot{
width:5px;height:5px;border-radius:50%;
background:rgba(212,196,166,0.18);cursor:pointer;
transition:background 0.2s;
}
.br-dot-active{ background:rgba(212,196,166,0.75); }
.boardroom-story-btn{
margin:0 20px 8px;
background:rgba(212,196,166,0.03);
border:1px dashed rgba(212,196,166,0.12);
color:rgba(212,196,166,0.25);
font-family:var(--font-body);font-size:11.5px;
padding:10px;border-radius:10px;
cursor:default;
display:flex;align-items:center;justify-content:center;gap:8px;
flex-shrink:0;
}
.boardroom-story-badge{
font-size:8px;background:rgba(212,196,166,0.1);
padding:2px 7px;border-radius:8px;letter-spacing:1.5px;
}
.boardroom-receive-btn{
margin:0 20px 20px;
background:none;
border:1px solid rgba(212,196,166,0.18);
color:rgba(212,196,166,0.45);
font-family:var(--font-cinzel);font-size:11px;
letter-spacing:2px;padding:12px;
border-radius:10px;cursor:pointer;flex-shrink:0;
}
/* ── Tagline ─────────────────────────────── */
.boardroom-tagline{
position:absolute;bottom:14px;left:0;right:0;
text-align:center;
font-family:var(--font-cinzel);font-size:9px;
letter-spacing:3.5px;color:rgba(212,196,166,0.35);
z-index:2;pointer-events:none;
}
/* CEO 8th card */
.br-card-ceo{ border-style:dashed !important; }
.br-ceo-prompt{
font-family:var(--font-display);font-size:11px;
color:rgba(212,196,166,0.4);text-align:center;
font-style:italic;line-height:1.5;flex-shrink:0;
}
.br-ceo-input{
width:100%;background:rgba(12,12,24,0.9);
border:1px solid rgba(212,196,166,0.2);
border-radius:8px;color:var(--text);
font-family:var(--font-body);font-size:13px;
line-height:1.5;padding:10px 12px;
resize:none;margin:4px 0;
-webkit-user-select:text;user-select:text;
}
.br-ceo-input:focus{ outline:none;border-color:rgba(212,196,166,0.4); }
.br-ceo-input::placeholder{ color:rgba(212,196,166,0.2); }
.br-ceo-commit{
width:100%;background:rgba(212,196,166,0.08);
border:1px solid rgba(212,196,166,0.28);
color:var(--gold);
font-family:var(--font-cinzel);font-size:11px;
letter-spacing:2px;padding:11px;
border-radius:20px;cursor:pointer;margin-top:4px;
}
.br-ceo-commit:disabled{ opacity:0.45;cursor:default; }
/* ── Boardroom tradition panel ─────────────────────────────── */
.boardroom-tradition-panel{
display:none;
position:absolute;
left:50%;transform:translateX(-50%);
bottom:110px;
width:calc(100% - 48px);max-width:320px;
background:rgba(8,8,18,0.96);
border:1px solid rgba(212,196,166,0.2);
border-radius:14px;
z-index:9;
flex-direction:column;
align-items:center;
padding:20px 16px 16px;
gap:8px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.btp-sym{
font-size:28px;line-height:1;
}
.btp-name{
font-family:var(--font-cinzel);font-size:13px;
letter-spacing:2px;text-transform:uppercase;
text-align:center;
}
.btp-members{
font-family:var(--font-display);font-size:10.5px;
color:rgba(212,196,166,0.45);text-align:center;
line-height:1.6;font-style:italic;
}
.btp-btns{
display:flex;gap:8px;width:100%;margin-top:4px;
}
.btp-btn{
flex:1;padding:10px 6px;border-radius:20px;
font-family:var(--font-body);font-size:10px;
letter-spacing:1px;cursor:pointer;
text-transform:uppercase;
}
.btp-btn-focus{
background:rgba(212,196,166,0.1);
border:1px solid rgba(212,196,166,0.35);
color:var(--gold);
}
.btp-btn-all{
background:none;
border:1px solid rgba(212,196,166,0.15);
color:rgba(212,196,166,0.45);
}
.btp-close{
position:absolute;top:10px;right:12px;
background:none;border:none;
color:rgba(212,196,166,0.25);font-size:16px;cursor:pointer;
}
/* ── Boardroom intro card ──────────────────────────────────── */
.boardroom-intro-overlay{
position:absolute;inset:0;z-index:12;
display:flex;align-items:center;justify-content:center;
padding:24px 20px;
background:#06080c; /* fallback — JS overrides with decree color */
transition:opacity 0.6s ease;
}
.boardroom-intro-overlay.hidden{ display:none; }
.boardroom-intro-card{
width:100%;max-width:360px;
background:rgba(10,12,20,0.98);
border:1px solid rgba(212,196,166,0.18);
border-radius:16px;padding:24px 20px 20px;
display:flex;flex-direction:column;gap:14px;
}
.bic-eyebrow{
font-family:var(--font-body);font-size:9px;
letter-spacing:4px;color:rgba(212,196,166,0.35);
text-align:center;text-transform:uppercase;
}
.bic-divider{
height:1px;
background:linear-gradient(90deg,transparent,rgba(212,196,166,0.15),transparent);
}
.bic-seats{
display:flex;flex-direction:column;gap:10px;
}
.bic-seat{
display:grid;
grid-template-columns:24px 1fr;
grid-template-rows:auto auto;
column-gap:10px;row-gap:2px;
align-items:start;
}
.bic-seat-chair{ opacity:1; }
.bic-seat:not(.bic-seat-chair){ opacity:0.7; }
.bic-seat-sym{
font-size:16px;line-height:1.3;
grid-row:1/3;align-self:center;text-align:center;
}
.bic-seat-name{
font-family:var(--font-cinzel);font-size:11px;
color:rgba(212,196,166,0.85);letter-spacing:1px;
display:flex;align-items:center;gap:6px;
}
.bic-chair-badge{
font-family:var(--font-body);font-size:7px;
letter-spacing:2px;color:rgba(212,196,166,0.5);
background:rgba(212,196,166,0.08);
padding:1px 5px;border-radius:4px;
}
.bic-seat-desc{
font-family:var(--font-display);font-size:9px;
color:rgba(212,196,166,0.32);font-style:italic;
line-height:1.4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bic-order{
font-family:var(--font-display);font-size:13px;
color:rgba(212,196,166,0.6);text-align:center;
font-style:italic;letter-spacing:0.5px;
}
.bic-btn{
background:rgba(212,196,166,0.07);
border:1px solid rgba(212,196,166,0.25);
color:var(--gold);
font-family:var(--font-cinzel);font-size:11px;
letter-spacing:2px;padding:12px;
border-radius:24px;cursor:pointer;
text-align:center;
}
/* Explore button on tradition cards */
.br-explore-btn{
align-self:flex-end;
background:none;
border:1px solid rgba(212,196,166,0.15);
color:rgba(212,196,166,0.4);
font-family:var(--font-body);font-size:10px;
letter-spacing:1px;padding:6px 14px;
border-radius:12px;cursor:pointer;
margin-top:auto;
}
.br-explore-btn:active{ opacity:0.6; }
/* CEO commitment follow-up note */
.br-ceo-followup-note{
font-family:var(--font-display);font-size:10px;
color:rgba(212,196,166,0.3);text-align:center;
font-style:italic;flex-shrink:0;
}
/* ═══════════════════════════════════════════════════════════════
BOARDROOM SHARE CARD OVERLAY
═══════════════════════════════════════════════════════════════ */
.br-share-overlay{
position:absolute;inset:0;z-index:30;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,0.88);
padding:20px;
}
.br-share-overlay.hidden{ display:none; }
.br-share-inner{
display:flex;flex-direction:column;align-items:center;gap:16px;
width:100%;max-width:340px;position:relative;
}
.br-share-close{
position:absolute;top:-8px;right:-8px;
background:rgba(212,196,166,0.1);border:none;
color:rgba(212,196,166,0.5);font-size:16px;
width:32px;height:32px;border-radius:50%;
cursor:pointer;z-index:2;
}
.br-share-canvas{
width:100%;border-radius:12px;
box-shadow:0 8px 40px rgba(0,0,0,0.6);
}
.br-share-actions{
display:flex;gap:10px;width:100%;
}
.br-share-action-btn{
flex:1;padding:12px;border-radius:20px;
background:rgba(212,196,166,0.07);
border:1px solid rgba(212,196,166,0.2);
color:rgba(212,196,166,0.65);
font-family:var(--font-cinzel);font-size:11px;
letter-spacing:1.5px;cursor:pointer;
}
.br-share-primary{
background:rgba(212,196,166,0.14);
border-color:rgba(212,196,166,0.4);
color:rgba(212,196,166,0.9);
}
/* ══════════════════════════════════════════
UPDATE AVAILABLE BANNER (v2.0.1+)
Shown when service worker detects and activates a new version.
Persistent until user refreshes or dismisses.
══════════════════════════════════════════ */
.update-banner{
position:fixed;
top:12px;
left:50%;
transform:translateX(-50%);
z-index:10000;
display:flex;
align-items:center;
gap:10px;
padding:10px 14px 10px 16px;
background:linear-gradient(180deg,rgba(14,10,4,0.98) 0%,rgba(20,14,6,0.98) 100%);
border:1px solid rgba(228,195,123,0.4);
border-radius:24px;
box-shadow:0 6px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(228,195,123,0.1);
font-family:'Helvetica Neue',sans-serif;
font-size:12px;
color:rgba(228,195,123,0.9);
letter-spacing:0.5px;
max-width:92vw;
animation:updateBannerIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.update-banner.hidden{ display:none; }
.update-banner-icon{
color:#e4c37b;
font-size:14px;
line-height:1;
text-shadow:0 0 6px rgba(228,195,123,0.4);
}
.update-banner-text{
color:rgba(212,196,166,0.85);
font-size:12px;
letter-spacing:0.4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:60vw;
}
.update-banner-btn{
background:rgba(228,195,123,0.14);
border:1px solid rgba(228,195,123,0.5);
border-radius:16px;
padding:5px 12px;
font-family:'Helvetica Neue',sans-serif;
font-size:11px;
letter-spacing:1.5px;
color:#e4c37b;
cursor:pointer;
flex-shrink:0;
}
.update-banner-btn:hover,
.update-banner-btn:active{
background:rgba(228,195,123,0.24);
border-color:rgba(228,195,123,0.7);
}
.update-banner-close{
background:none;
border:none;
color:rgba(212,196,166,0.4);
font-size:14px;
cursor:pointer;
padding:0 4px;
line-height:1;
flex-shrink:0;
}
.update-banner-close:hover,
.update-banner-close:active{
color:rgba(212,196,166,0.8);
}
@keyframes updateBannerIn{
from{ opacity:0; transform:translate(-50%,-16px); }
to { opacity:1; transform:translate(-50%,0); }
}
/* ══════════════════════════════════════════
INSTALL PROMPT (v1.15.0)
Centered card with tree icon, gold + cream + dark navy register
matching the rest of the app. Backdrop dims the screen so it reads
as a quiet pause, not a hijack. Tree image inherits from
images/tree-of-life.png — same publisher mark used at home footer.
══════════════════════════════════════════ */
.install-prompt-overlay{
position:fixed;
inset:0;
z-index:10001;
display:flex;
align-items:center;
justify-content:center;
background:rgba(6,8,12,0.78);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
padding:24px;
animation:installPromptBackdropIn 0.35s ease-out;
}
.install-prompt-overlay.hidden{ display:none; }
.install-prompt-card{
position:relative;
width:100%;
max-width:340px;
background:linear-gradient(180deg,rgba(14,10,4,0.98) 0%,rgba(20,14,6,0.98) 100%);
border:1px solid rgba(228,195,123,0.35);
border-radius:18px;
box-shadow:0 10px 40px rgba(0,0,0,0.6),0 0 0 1px rgba(228,195,123,0.08);
padding:24px 22px 20px;
text-align:center;
font-family:Georgia,'Times New Roman',serif;
color:rgba(245,239,216,0.9);
animation:installPromptCardIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.install-prompt-close{
position:absolute;
top:8px;right:10px;
background:none;border:none;
color:rgba(212,196,166,0.4);
font-size:16px;line-height:1;
width:30px;height:30px;
cursor:pointer;
}
.install-prompt-close:active{ color:rgba(228,195,123,0.85); }
.install-prompt-tree{
width:64px;height:64px;
object-fit:contain;
opacity:0.92;
margin:6px auto 14px;
filter:drop-shadow(0 0 14px rgba(212,180,90,0.22));
}
.install-prompt-title{
font-family:'Cinzel','Georgia',serif;
font-size:15px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(228,195,123,0.85);
margin-bottom:14px;
}
.install-prompt-body{
font-size:14px;
line-height:1.6;
color:rgba(245,239,216,0.78);
margin-bottom:20px;
font-style:italic;
}
.install-prompt-body em{ color:#f5e9b8; font-style:italic; }
.install-prompt-body code{
font-family:'Helvetica Neue',sans-serif;
font-size:12px;
letter-spacing:1px;
color:rgba(228,195,123,0.85);
background:rgba(228,195,123,0.08);
border:1px solid rgba(228,195,123,0.2);
border-radius:4px;
padding:1px 6px;
font-style:normal;
}
.install-prompt-body .install-share-icon{
display:inline-block;
vertical-align:-3px;
margin:0 2px;
}
.install-prompt-action{
width:100%;
padding:14px;
background:rgba(228,195,123,0.14);
border:1px solid rgba(228,195,123,0.5);
border-radius:50px;
font-family:'Cinzel','Georgia',serif;
font-size:13px;
letter-spacing:2px;
color:#e4c37b;
cursor:pointer;
text-transform:uppercase;
transition:background 0.2s,border-color 0.2s;
}
.install-prompt-action:active{
background:rgba(228,195,123,0.24);
border-color:rgba(228,195,123,0.7);
}
.install-prompt-mark{ letter-spacing:0; }
.install-prompt-secondary{
margin-top:12px;
font-family:'Helvetica Neue',sans-serif;
font-size:11px;
letter-spacing:1.5px;
color:rgba(212,196,166,0.4);
cursor:pointer;
padding:8px;
text-transform:uppercase;
}
.install-prompt-secondary:active{ color:rgba(228,195,123,0.7); }
@keyframes installPromptBackdropIn{
from{ opacity:0; }
to { opacity:1; }
}
@keyframes installPromptCardIn{
from{ opacity:0; transform:translateY(20px) scale(0.96); }
to { opacity:1; transform:translateY(0) scale(1); }
}
/* ══════════════════════════════════════════
DEV VERSION BADGE (v2.0.1+)
Injected only on malajapa-v2.vercel.app.
Invisible on production.
══════════════════════════════════════════ */
#dev-version-badge{
position:fixed;
bottom:6px;
left:8px;
z-index:9999;
font-family:'Courier New',monospace;
font-size:9px;
letter-spacing:1.5px;
color:rgba(228,195,123,0.35);
padding:2px 6px;
background:rgba(6,8,12,0.4);
border-radius:3px;
pointer-events:none;
user-select:none;
text-transform:uppercase;
}
/* ══════════ THE THRESHOLD (v2.5.0) ══════════ */
.threshold-overlay{
position:fixed; inset:0; z-index:9000;
background:#06080c;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
font-family:var(--font-body);
color:#e8e2d0;
-webkit-user-select:none; user-select:none;
}
.threshold-overlay.hidden{ display:none !important; }
/* v1.16.3 — Back button on the threshold sankalpa overlay, revealed only
when the rite is entered from settings (overlay carries .from-settings).
On first crossing the rite has no exit per PHILOSOPHY XXVIII (the
threshold is a gate, not a menu). From settings the user is reaffirming
an existing sankalpa; a clean back to the settings panel is appropriate.
Wired in app.js: openSankalpaFromSettings adds the class,
_sankalpaSettingsBack and _thresholdSankalpaComplete remove it. */
.threshold-back-btn{
position:absolute;
top:max(env(safe-area-inset-top), 16px);
left:14px;
z-index:5;
width:42px; height:42px;
background:transparent;
border:none;
color:rgba(232,226,208,0.7);
font-family:'Cormorant Garamond', serif;
font-size:34px; line-height:42px;
padding:0;
cursor:pointer;
display:none;
-webkit-tap-highlight-color:transparent;
}
.threshold-overlay.from-settings .threshold-back-btn{ display:block; }
.threshold-back-btn:active{ color:rgba(245,210,140,1); }
/* Hide the back button once Phase B is active — Phase B has no exit
except the seal-it gesture itself, even from a settings re-entry.
The .phase-b class is added by _thresholdSealSankalpa and cleared by
_thresholdShowSankalpa; sibling-selector wouldn't work here because
the back button precedes Phase B in DOM order. */
.threshold-overlay.phase-b .threshold-back-btn{ display:none; }
.threshold-field-canvas{
position:absolute; inset:0; width:100%; height:100%;
z-index:0; opacity:0.55; pointer-events:none;
}
.threshold-opener-content{
position:relative; z-index:1;
max-width:560px; width:90%;
padding:32px 24px;
display:flex; flex-direction:column; align-items:center;
text-align:center;
max-height:100vh; overflow-y:auto;
}
/* v1.14.0 — .threshold-skip CSS retired with the SKIP › buttons. */
/* Opener — Jefferson */
.threshold-date{
font-family:var(--font-display, var(--font-body));
font-size:14px; letter-spacing:3px; text-transform:uppercase;
color:rgba(212,196,166,0.65);
margin-bottom:28px;
transition:opacity 1.4s ease-out;
}
.threshold-date sup{ font-size:9px; letter-spacing:0; }
.threshold-quote{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:17px; line-height:1.65;
color:#f0e8d0;
margin-bottom:22px;
transition:opacity 1.6s ease-out;
}
.threshold-attribution{
font-size:12px; letter-spacing:1.8px; text-transform:uppercase;
color:rgba(212,196,166,0.55); line-height:1.7;
margin-bottom:28px;
transition:opacity 1.4s ease-out;
}
.threshold-rule{
width:100px; height:1px;
background:linear-gradient(90deg, transparent, rgba(212,180,90,0.45), transparent);
margin:8px 0 28px 0;
transition:opacity 1.2s ease-out;
}
.threshold-pivot{
font-family:var(--font-body);
font-size:16px; line-height:1.7;
color:#f5efd8;
min-height:90px;
margin-bottom:32px;
}
/* v1.15.11 — Divider between the two pivot sentences. The element is
created by app.js's threshold opener teletype after the first line
completes ("Thirteen colonies broke free..."), then the second line
teletypes below. Until v1.15.11 the divider was unstyled — the two
sentences ran together on the same visual block. This rule gives
the divider explicit vertical space so the second sentence reads as
its own paragraph, not as a continuation of the first. */
.threshold-pivot-divider{
height:1px;
margin:18px auto;
}
.threshold-pivot .tt-cursor{
display:inline-block; width:7px; height:18px;
background:rgba(245,239,216,0.85);
margin-left:2px; vertical-align:text-bottom;
animation:thresholdCursorBlink 0.9s steps(2,end) infinite;
}
@keyframes thresholdCursorBlink{
0%, 50%{ opacity:1; }
50.01%, 100%{ opacity:0; }
}
.threshold-begin-btn{
background:transparent;
border:1px solid rgba(212,196,166,0.55);
color:#f5efd8;
padding:14px 38px;
font-family:var(--font-body);
font-size:13px; letter-spacing:3px;
border-radius:4px;
cursor:pointer;
transition:all 0.3s;
opacity:0;
animation:thresholdFadeIn 0.8s ease-out 0.2s forwards;
}
.threshold-begin-btn:hover,
.threshold-begin-btn:active{
border-color:rgba(212,196,166,0.95);
background:rgba(212,196,166,0.05);
}
.threshold-begin-btn.hidden{ display:none !important; }
@keyframes thresholdFadeIn{
from{ opacity:0; transform:translateY(4px); }
to{ opacity:1; transform:translateY(0); }
}
/* ─────────────────────────────────────────────────────────────
SANKALPA RITE (v2.13.0 — Session E)
Two phases inside one overlay. Same field-canvas backdrop and
gold typography family as the existing threshold surfaces.
───────────────────────────────────────────────────────────── */
.threshold-sankalpa-phase{
position:relative; z-index:2;
width:100%; max-width:480px;
padding:32px 28px;
display:flex; flex-direction:column; align-items:center; text-align:center;
max-height:100%;
overflow-y:auto;
}
.threshold-sankalpa-phase.hidden{ display:none !important; }
.threshold-sk-quote{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:17px; line-height:1.65;
color:#f0e8d0;
margin-bottom:14px;
}
.threshold-sk-attr{
font-size:11px; letter-spacing:2px; text-transform:uppercase;
color:rgba(212,196,166,0.55);
margin-bottom:20px;
}
.threshold-sk-rule{
width:80px; height:1px;
background:linear-gradient(90deg, transparent, rgba(212,180,90,0.55), transparent);
margin:12px 0 22px 0;
}
.threshold-sk-prompt{
font-family:var(--font-body);
font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
color:rgba(212,196,166,0.7);
margin-bottom:14px;
}
.threshold-sk-input{
width:100%;
background:transparent;
border:none;
border-bottom:1px solid rgba(212,196,166,0.35);
padding:14px 8px 12px;
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:18px; line-height:1.5;
color:#f5efd8;
text-align:center;
resize:none;
outline:none;
transition:border-color 0.25s;
-webkit-appearance:none; appearance:none;
-webkit-user-select:text; user-select:text;
}
.threshold-sk-input::placeholder{
color:rgba(245,239,216,0.30);
font-style:italic;
}
.threshold-sk-input:focus{
border-bottom-color:rgba(212,180,90,0.7);
}
/* v1.0.2 — element-swap hide. Two inputs live in Phase A (textarea for
text-type, tel input for currency-type); the inactive one gets the
.hidden class from _thresholdShowSankalpa. No bare .hidden rule
exists in this codebase (the pattern is compound .{class}.hidden),
so this scoped rule is what actually hides the inactive element.
Without it, both inputs render simultaneously — mala sees moolah's
$1,000,000 placeholder; moolah sees mala's text placeholder. */
.threshold-sk-input.hidden{display:none;}
.threshold-sk-hint{
font-family:var(--font-body);
font-size:11px; line-height:1.6;
color:rgba(212,196,166,0.45);
margin:18px 0 28px;
font-style:italic;
}
/* v1.16.4 / refined v1.16.5 — Stress-free footnote below SEAL IT. Quietest
visual register on Phase A — smaller than the hint, dimmer, italic.
"Not yet? Yours will come. Return through Settings when it does."
Hidden when the rite is entered from settings (user is already
in Settings — telling them to return there is redundant).
v1.16.5 note: chip-row CSS retired here (replaced by input.placeholder
rotation through APP_CONSTANTS.SANKALPA_CATALOG, which lives entirely
in JS — no styles to add). */
.threshold-sk-footnote{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:11px; line-height:1.55;
color:rgba(212,196,166,0.38);
margin:18px 0 0;
padding:0 12px;
max-width:340px;
}
.threshold-overlay.from-settings .threshold-sk-footnote{ display:none; }
/* Phase B — sealed sankalpa + tree gesture (restored v2.13.2) */
.threshold-sk-seal-eyebrow{
font-family:var(--font-cinzel, 'Cinzel', serif);
font-size:10px; letter-spacing:5px; text-transform:uppercase;
color:rgba(212,196,166,0.6);
margin-bottom:22px;
}
.threshold-sk-chosen{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:32px; line-height:1.3;
color:#f5e9b8;
text-shadow:0 0 36px rgba(212,180,90,0.25);
margin-bottom:10px;
padding:0 8px;
min-height:1.3em;
}
.threshold-sk-tree{
width:90px; height:90px;
object-fit:contain;
opacity:0.88;
margin:18px 0 16px;
filter:drop-shadow(0 0 18px rgba(212,180,90,0.18));
/* v1.15.3 — Same long-press callout disable as .home-tree-of-life. */
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
.threshold-sk-gesture{
font-family:Georgia, 'Times New Roman', serif;
font-size:14px; line-height:1.7;
color:rgba(245,239,216,0.85);
margin-bottom:28px;
font-style:normal;
}
.threshold-sk-gesture em{
color:#f5e9b8;
font-style:italic;
}
.threshold-sk-gesture-gloss{
font-size:11px;
font-style:italic;
color:rgba(245,239,216,0.5);
letter-spacing:0.5px;
display:inline-block;
margin:2px 0;
}
/* v1.9.0 — RETIRED: .threshold-eq-* family CSS (Mental Equivalent overlay retired). */
}
/* v1.9.0 — RETIRED: .threshold-reading-* and .threshold-signing-* family CSS (Reading + Signing overlays retired). */
line-height:1.4;
}
/* v1.9.0 — RETIRED: .threshold-goal-* overlay family CSS (Goal overlay retired). */
}
/* v1.10.0 — RETIRED: .home-goal-declared + :empty (Independence Day label under home goal amount). */
/* v1.9.0 — RETIRED: .threshold-secondary-btn (orphaned — Confirm Reached overlay it served was already gone). */
/* v1.9.0 — RETIRED: .threshold-seal-* family CSS (Seal overlay retired). */
/* ══════════════════════════════════════════
WISDOM'S TREASURES — Session Z (v1.12.0)
Three-register flow: Library bookshelf → Book TOC → Chapter reader.
Each level its own register: home is the doorway; Library is the
bookshelf (two-col grid of cover cards); Book is the table of
contents (cover thumb + meta + chapter list + closing tile);
Chapter is the pure reading surface (app typography, scroll).
══════════════════════════════════════════ */
/* Shared header across the three library screens — small back chevron
on the left, title centered. Same safe-area handling as the screens
already in play. */
#library-screen,
#book-screen,
#chapter-screen{
overflow:hidden;
display:flex;flex-direction:column;
padding:0;
}
.lib-header{
position:relative;flex-shrink:0;
height:56px;
display:flex;align-items:center;
padding:0 16px;
padding-top:env(safe-area-inset-top,0);
height:calc(56px + env(safe-area-inset-top,0));
border-bottom:1px solid var(--border-subtle);
}
.lib-back{
position:absolute;left:8px;
top:calc(50% + env(safe-area-inset-top,0) / 2);
transform:translateY(-50%);
background:none;border:none;
color:var(--gold-dim);
font-family:var(--font-display);font-size:34px;line-height:1;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.lib-back:active{ opacity:0.55; }
/* v1.16.22 — Reader chapter-flip. .lib-fwd mirrors .lib-back on the right
for the chapter-screen next-chapter button. .is-disabled fades both
buttons at boundary positions (chapter 0 prev, closing next) and
suppresses pointer events. .chapter-header-title-tap signals
tappable-title affordance for TOC exit. */
.lib-fwd{
position:absolute;right:8px;
top:calc(50% + env(safe-area-inset-top,0) / 2);
transform:translateY(-50%);
background:none;border:none;
color:var(--gold-dim);
font-family:var(--font-display);font-size:34px;line-height:1;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.lib-fwd:active{ opacity:0.55; }
.lib-back.is-disabled, .lib-fwd.is-disabled{
opacity:0.22; pointer-events:none;
}
.chapter-header-title-tap{
cursor:pointer;
-webkit-tap-highlight-color:transparent;
text-decoration:underline;
text-decoration-color:rgba(228,195,123,0.32);
text-decoration-thickness:1px;
text-underline-offset:5px;
}
.chapter-header-title-tap:active{ opacity:0.65; }
/* v1.16.28 — Breath layer removed from the chapter title. Hariom on
device after sitting with the v1.16.27 halo: "let's remove the glow
it's ok we don't want it to distract the reading experience." The
reader is a working surface, not an exit surface — the content needs
the eye, not a competing rhythm. PHILOSOPHY XXIII frames exit
surfaces as contemplative space; reading isn't that, it's active
intake of what the book is offering. The breath layer lives at home
(idle + pressed) where lingering is the practice; the reader stays
clean. Underline alone carries the title-tap affordance — link-
register cue, no animation, doesn't compete with reading.
Lineage: v1.16.23 dot (too small to register on small italic) →
v1.16.26 text-shadow glow (geometry tracked glyph edges, no halo
field) → v1.16.27 radial halo behind text (geometry landed but
distracted from reading) → v1.16.28 nothing (the surface didn't
want it). Three turns of "make the breath visible here," one turn
of "this surface doesn't want breath." Sibling to W-32: iteration
N+1 correcting iteration N for the same essential failure was a
signal the feature itself was wrong, not the parameters. The
abandonment is the conclusion. */
.lib-header-title{
flex:1;
text-align:center;
font-family:var(--font-cinzel);font-style:italic;
font-size:15px;letter-spacing:1.5px;text-transform:uppercase;
color:rgba(228,195,123,0.75);
padding:0 48px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ── LIBRARY (bookshelf) ── */
/* v1.15.11 — Library header poem (Emilie Poulsson). Replaces the
single-line .lib-subhead from earlier releases. Same visual
register (centered, italic display font, dim) but laid out as
stanza + attribution. */
.lib-poem{
flex-shrink:0;
text-align:center;
padding:18px 24px 8px;
}
.lib-poem-line{
font-family:var(--font-display);
font-style:italic;
font-size:14px;
color:var(--text-dim);
letter-spacing:0.3px;
line-height:1.65;
}
.lib-poem-attr{
font-family:var(--font-display);
font-style:italic;
font-size:12px;
color:var(--text-ghost);
letter-spacing:1px;
margin-top:8px;
}
/* .lib-subhead retired v1.15.11 — superseded by .lib-poem above. */
.lib-shelf{
flex:1;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:20px 16px 40px;
padding-bottom:calc(40px + env(safe-area-inset-bottom,0));
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px 16px;
}
.lib-card{
display:flex;flex-direction:column;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:opacity 0.2s ease, transform 0.2s ease;
}
.lib-card:active{ opacity:0.7; transform:scale(0.98); }
.lib-card-cover{
width:100%;
aspect-ratio:2 / 3;
background:#1a1410;
border:1px solid rgba(228,195,123,0.18);
border-radius:4px;
overflow:hidden;
box-shadow:
0 2px 8px rgba(0,0,0,0.6),
0 0 0 1px rgba(228,195,123,0.04) inset;
}
.lib-card-cover img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.lib-card-title{
margin-top:12px;
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:16px;letter-spacing:0.3px;line-height:1.2;
color:rgba(245,240,232,0.92);
text-align:center;
}
.lib-card-author{
margin-top:4px;
font-family:var(--font-display);font-style:italic;
font-size:12px;line-height:1.3;
color:var(--text-dim);
text-align:center;
}
/* v1.15.12 — Publisher mark under each card. Quieter than the
author line (smaller, more letter-spacing, more dim) — TNT
acknowledges authorship of the first-person edition without
competing with the original author's name. */
.lib-card-publisher{
margin-top:6px;
font-family:var(--font-display);font-style:italic;
font-size:10px;line-height:1.3;letter-spacing:0.6px;
color:var(--text-ghost);
text-align:center;
}
/* ── BOOK (TOC) ── */
#book-screen{ overflow:hidden; }
.book-cover-wrap{
flex-shrink:0;
display:flex;justify-content:center;
padding:24px 24px 0;
}
.book-cover-wrap img{
width:150px;
aspect-ratio:2 / 3;
object-fit:cover;
border:1px solid rgba(228,195,123,0.22);
border-radius:4px;
box-shadow:0 4px 16px rgba(0,0,0,0.7);
}
.book-meta{
flex-shrink:0;
text-align:center;
padding:18px 28px 8px;
}
.book-meta-title{
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:26px;line-height:1.15;letter-spacing:0.5px;
color:rgba(245,240,232,0.95);
}
.book-meta-subtitle{
margin-top:8px;
font-family:var(--font-display);font-style:italic;
font-size:14px;line-height:1.4;
color:rgba(212,196,166,0.75);
}
.book-meta-author{
margin-top:14px;
font-family:var(--font-display);
font-size:13px;letter-spacing:0.4px;
color:var(--text-dim);
}
.book-meta-edition{
margin-top:4px;
font-family:var(--font-display);font-style:italic;
font-size:11px;letter-spacing:0.6px;
color:var(--text-ghost);
}
.book-toc-rule{
flex-shrink:0;
height:1px;
margin:14px auto 4px;
width:60px;
background:rgba(228,195,123,0.3);
}
.book-toc{
flex:1;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
list-style:none;
padding:8px 24px 40px;
padding-bottom:calc(40px + env(safe-area-inset-bottom,0));
margin:0;
}
.book-toc-item{
display:flex;align-items:flex-start;gap:14px;
padding:16px 4px;
border-bottom:1px solid rgba(228,195,123,0.09);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:opacity 0.2s ease, background 0.2s ease;
}
.book-toc-item:last-child{ border-bottom:none; }
.book-toc-item:active{
opacity:0.55;
background:rgba(228,195,123,0.03);
}
.book-toc-num{
flex-shrink:0;
width:24px;
font-family:var(--font-display);font-style:italic;
font-size:12px;letter-spacing:0.4px;
color:var(--gold-ghost);
padding-top:3px;
text-align:right;
}
.book-toc-title{
flex:1;
font-family:var(--font-display);
font-size:15px;line-height:1.4;
color:rgba(228,228,228,0.88);
}
/* Closing tile is set apart from the chapter list — italic Cinzel,
slight gold wash, no number in the left column (or a glyph). */
.book-toc-item.book-toc-closing{
margin-top:14px;
padding-top:22px;
border-top:1px solid rgba(228,195,123,0.18);
border-bottom:none;
}
.book-toc-item.book-toc-closing .book-toc-num{
color:var(--gold);
font-size:16px;
padding-top:0;
}
.book-toc-item.book-toc-closing .book-toc-title{
font-family:var(--font-cinzel);font-style:italic;
font-size:16px;letter-spacing:0.4px;
color:rgba(245,230,195,0.92);
}
/* ── CHAPTER (reader) ── */
#chapter-screen{ overflow:hidden; }
.chapter-body{
flex:1;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:28px 28px 32px;
padding-bottom:calc(32px + env(safe-area-inset-bottom,0));
max-width:640px;
width:100%;
margin:0 auto;
}
.chapter-title{
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:22px;line-height:1.25;letter-spacing:0.3px;
color:rgba(245,240,232,0.95);
margin:0 0 6px;
text-align:center;
}
/* v1.15.12 — Optional chapter subtitle. Used by Daily Creeds for
per-chapter author (each creed has its own author). Quieter
register than the title — italic display font, smaller, dim. */
.chapter-subtitle{
font-family:var(--font-display);font-style:italic;font-weight:400;
font-size:14px;line-height:1.4;letter-spacing:0.5px;
color:var(--text-dim);
margin:0;
text-align:center;
}
.chapter-title-rule{
height:1px;width:50px;
background:rgba(228,195,123,0.35);
margin:20px auto 24px;
}
.chapter-epigraph{
font-family:var(--font-display);font-style:italic;
font-size:14px;line-height:1.6;letter-spacing:0.2px;
color:var(--text-dim);
text-align:center;
padding:0 8px;
margin-bottom:26px;
}
.chapter-p{
font-family:var(--font-display);
font-size:16px;line-height:1.75;letter-spacing:0.1px;
color:rgba(228,228,228,0.88);
margin:0 0 18px;
text-align:left;
}
.chapter-p:last-child{ margin-bottom:0; }
/* Invocation/verse-style paragraph for short poetic pieces
(As I Think's opening poem, etc.) — preserves line breaks. */
.chapter-p-verse{
white-space:pre-line;
text-align:center;
font-style:italic;
color:rgba(228,228,228,0.82);
line-height:1.9;
}
/* v1.15.11 — Daily Creeds chapter line. Mirrors .altar-back-line
styling so the book and the altar carousel back-of-card show
the creed in identical visual register: italic display font,
centered, line-height 2, dim color. The book is reading the
creed; the altar is choosing to mirror it; both surface the
text the same way. */
.chapter-line{
font-family:var(--font-display);
font-style:italic;
font-size:15px;
color:var(--text-dim);
line-height:2;
text-align:center;
display:block;
}
.chapter-footer{
flex-shrink:0;
padding:0 28px;
padding-bottom:calc(24px + env(safe-area-inset-bottom,0));
}
.chapter-footer:empty{ padding:0; }
.chapter-enter-btn{
width:100%;
padding:16px 20px;
background:linear-gradient(180deg,rgba(228,195,123,0.12),rgba(228,195,123,0.05));
border:1px solid rgba(228,195,123,0.35);
border-radius:4px;
color:rgba(245,230,195,0.95);
font-family:var(--font-cinzel);font-style:italic;font-weight:500;
font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:opacity 0.2s ease, background 0.2s ease;
}
.chapter-enter-btn:active{
opacity:0.65;
background:rgba(228,195,123,0.18);
}
/* ══════════════════════════════════════════
v1.16.34 — OUTDOOR MODE CLEANUP PASS
──────────────────────────────────────────
The original .high-contrast / .daylight blocks (lines ~538-558,
517-536) were carved when those modes were introduced and last
touched in v1.10.0. Since then we shipped: practice timer, update
banner, install prompt, library shelf, book TOC, chapter reader,
chapter nav arrows, tree breath glows. None of those surfaces had
HC/daylight overrides — they hardcoded rgba(228,195,123) and
rendered identically across modes. So toggling HC produced a mixed
result: old surfaces flipped to white-on-black, new surfaces stayed
in the contemplative gold-on-dark register.
This section brings the post-v1.10 surfaces into the existing
discipline. Pattern follows the original block: pure white text,
nuked text-shadow / box-shadow / filter:drop-shadow / radial-
gradient halos, pinned-black backgrounds.
We are NOT comprehensively token-izing every surface (that's a
bigger refactor — ~280 hardcoded-gold/shadow hits across the file).
This pass targets the surfaces Hariom actually sees in daily use.
Daylight gets parallel treatment in lockstep — modes are siblings
and shipping HC alone would create new inconsistency.
What may yet be needed: practice surfaces (Tap, Write, Mirror) have
their own deeper hardcoded gold language; chapter-screen typography
reads on a small content surface where pure white may be jarring.
See on device, then decide whether to extend.
══════════════════════════════════════════ */
/* ── Practice timer (countdown / mānasikā / overtime / victory pulse) ── */
html.high-contrast .practice-timer{ color:rgba(255,255,255,0.7); }
html.high-contrast .practice-timer.practice-timer-message{ color:#FFFFFF; }
html.high-contrast .practice-timer .practice-timer-line1{ color:#FFFFFF; }
html.high-contrast .practice-timer .practice-timer-line2{ color:rgba(255,255,255,0.78); }
html.high-contrast .practice-timer.practice-timer-crossed{
animation:none;
color:#FFFFFF;
text-shadow:none;
}
html.daylight .practice-timer{ color:rgba(248,232,184,0.85); }
html.daylight .practice-timer.practice-timer-message{ color:#F8E8B8; }
html.daylight .practice-timer .practice-timer-line1{ color:#F8E8B8; }
html.daylight .practice-timer .practice-timer-line2{ color:rgba(248,232,184,0.75); }
html.daylight .practice-timer.practice-timer-crossed{
animation:none;
color:#F8E8B8;
text-shadow:none;
}
/* ── Update banner (post-deploy refresh prompt) ── */
html.high-contrast .update-banner{
background:#000;
border-color:rgba(255,255,255,0.5);
box-shadow:none;
color:#FFFFFF;
}
html.high-contrast .update-banner-icon{ color:#FFFFFF; text-shadow:none; }
html.high-contrast .update-banner-text{ color:rgba(255,255,255,0.9); }
html.high-contrast .update-banner-btn{
background:rgba(255,255,255,0.15);
border-color:rgba(255,255,255,0.6);
color:#FFFFFF;
}
html.high-contrast .update-banner-btn:active{
background:rgba(255,255,255,0.25);
border-color:rgba(255,255,255,0.8);
}
html.high-contrast .update-banner-close{ color:rgba(255,255,255,0.7); }
html.daylight .update-banner{
background:#000;
border-color:rgba(242,210,122,0.6);
box-shadow:none;
color:#F5F1E8;
}
html.daylight .update-banner-icon{ color:#F2D27A; text-shadow:none; }
html.daylight .update-banner-text{ color:rgba(245,241,232,0.9); }
html.daylight .update-banner-btn{
background:rgba(242,210,122,0.18);
border-color:rgba(242,210,122,0.7);
color:#F2D27A;
}
html.daylight .update-banner-btn:active{
background:rgba(242,210,122,0.28);
border-color:rgba(242,210,122,0.9);
}
html.daylight .update-banner-close{ color:rgba(245,241,232,0.55); }
/* ── Install prompt (first-launch home-screen-add card) ── */
html.high-contrast .install-prompt-card{
background:#000;
border-color:rgba(255,255,255,0.5);
box-shadow:none;
color:#FFFFFF;
}
html.high-contrast .install-prompt-tree{ filter:none; }
html.high-contrast .install-prompt-title{ color:#FFFFFF; }
html.high-contrast .install-prompt-body{ color:rgba(255,255,255,0.9); }
html.high-contrast .install-prompt-body em{ color:#FFFFFF; }
html.high-contrast .install-prompt-body code{
color:#FFFFFF;
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.3);
}
html.high-contrast .install-prompt-action{
background:rgba(255,255,255,0.15);
border-color:rgba(255,255,255,0.6);
color:#FFFFFF;
}
html.high-contrast .install-prompt-action:active{
background:rgba(255,255,255,0.25);
border-color:rgba(255,255,255,0.8);
}
html.high-contrast .install-prompt-secondary{ color:rgba(255,255,255,0.6); }
html.high-contrast .install-prompt-secondary:active{ color:#FFFFFF; }
html.high-contrast .install-prompt-close{ color:rgba(255,255,255,0.6); }
html.high-contrast .install-prompt-close:active{ color:#FFFFFF; }
html.daylight .install-prompt-card{
background:#000;
border-color:rgba(242,210,122,0.6);
box-shadow:none;
color:#F5F1E8;
}
html.daylight .install-prompt-tree{ filter:none; }
html.daylight .install-prompt-title{ color:#F2D27A; }
html.daylight .install-prompt-body{ color:rgba(245,241,232,0.9); }
html.daylight .install-prompt-body em{ color:#F2D27A; }
html.daylight .install-prompt-body code{
color:#F2D27A;
background:rgba(242,210,122,0.12);
border-color:rgba(242,210,122,0.4);
}
html.daylight .install-prompt-action{
background:rgba(242,210,122,0.18);
border-color:rgba(242,210,122,0.7);
color:#F2D27A;
}
html.daylight .install-prompt-action:active{
background:rgba(242,210,122,0.28);
border-color:rgba(242,210,122,0.9);
}
html.daylight .install-prompt-secondary{ color:rgba(245,241,232,0.5); }
html.daylight .install-prompt-secondary:active{ color:#F2D27A; }
html.daylight .install-prompt-close{ color:rgba(245,241,232,0.5); }
html.daylight .install-prompt-close:active{ color:#F2D27A; }
/* ── Library / Book / Chapter screens ── */
/* Header title (gold by default; .lib-back / .lib-fwd already use
var(--gold-dim) and inherit token shifts). */
html.high-contrast .lib-header-title{ color:#FFFFFF; }
html.daylight .lib-header-title{ color:#F2D27A; }
/* Reader chapter-flip — title-tap underline. */
html.high-contrast .chapter-header-title-tap{
text-decoration-color:rgba(255,255,255,0.55);
}
html.daylight .chapter-header-title-tap{
text-decoration-color:rgba(242,210,122,0.55);
}
/* Library shelf (book cards). */
html.high-contrast .lib-card-cover{
background:#000;
border-color:rgba(255,255,255,0.4);
box-shadow:none;
}
html.high-contrast .lib-card-title{ color:#FFFFFF; }
html.daylight .lib-card-cover{
background:#000;
border-color:rgba(242,210,122,0.4);
box-shadow:none;
}
html.daylight .lib-card-title{ color:#F5F1E8; }
/* Book TOC (cover thumb + meta + table of contents). */
html.high-contrast .book-cover-wrap img{
border-color:rgba(255,255,255,0.5);
box-shadow:none;
}
html.high-contrast .book-meta-title{ color:#FFFFFF; }
html.high-contrast .book-meta-subtitle{ color:rgba(255,255,255,0.85); }
html.high-contrast .book-toc-rule{ background:rgba(255,255,255,0.5); }
html.high-contrast .book-toc-item{ border-bottom-color:rgba(255,255,255,0.2); }
html.high-contrast .book-toc-item:active{ background:rgba(255,255,255,0.06); }
html.high-contrast .book-toc-num{ color:rgba(255,255,255,0.7); }
html.high-contrast .book-toc-title{ color:#FFFFFF; }
html.high-contrast .book-toc-item.book-toc-closing{
border-top-color:rgba(255,255,255,0.4);
}
html.high-contrast .book-toc-item.book-toc-closing .book-toc-num{ color:#FFFFFF; }
html.high-contrast .book-toc-item.book-toc-closing .book-toc-title{ color:#FFFFFF; }
html.daylight .book-cover-wrap img{
border-color:rgba(242,210,122,0.55);
box-shadow:none;
}
html.daylight .book-meta-title{ color:#F5F1E8; }
html.daylight .book-meta-subtitle{ color:rgba(245,241,232,0.85); }
html.daylight .book-toc-rule{ background:rgba(242,210,122,0.5); }
html.daylight .book-toc-item{ border-bottom-color:rgba(242,210,122,0.22); }
html.daylight .book-toc-item:active{ background:rgba(242,210,122,0.06); }
html.daylight .book-toc-num{ color:rgba(242,210,122,0.7); }
html.daylight .book-toc-title{ color:#F5F1E8; }
html.daylight .book-toc-item.book-toc-closing{
border-top-color:rgba(242,210,122,0.5);
}
html.daylight .book-toc-item.book-toc-closing .book-toc-num{ color:#F2D27A; }
html.daylight .book-toc-item.book-toc-closing .book-toc-title{ color:#F2D27A; }
/* Chapter reader (body typography + footer enter button). */
html.high-contrast .chapter-title{ color:#FFFFFF; }
html.high-contrast .chapter-title-rule{ background:rgba(255,255,255,0.5); }
html.high-contrast .chapter-epigraph{ color:rgba(255,255,255,0.85); }
html.high-contrast .chapter-p{ color:#FFFFFF; }
html.high-contrast .chapter-p-verse{ color:rgba(255,255,255,0.92); }
html.high-contrast .chapter-line{ color:rgba(255,255,255,0.85); }
html.high-contrast .chapter-enter-btn{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.5);
color:#FFFFFF;
}
html.high-contrast .chapter-enter-btn:active{
background:rgba(255,255,255,0.22);
}
html.daylight .chapter-title{ color:#F5F1E8; }
html.daylight .chapter-title-rule{ background:rgba(242,210,122,0.5); }
html.daylight .chapter-epigraph{ color:rgba(245,241,232,0.85); }
html.daylight .chapter-p{ color:#F5F1E8; }
html.daylight .chapter-p-verse{ color:rgba(245,241,232,0.92); }
html.daylight .chapter-line{ color:rgba(245,241,232,0.85); }
html.daylight .chapter-enter-btn{
background:rgba(242,210,122,0.15);
border-color:rgba(242,210,122,0.55);
color:#F2D27A;
}
html.daylight .chapter-enter-btn:active{
background:rgba(242,210,122,0.25);
}
/* ── Home Daily Practice list (v1.16.35 extension)
The doorway list — Tap, Write, Mirror, Daily Creeds, Wisdom's
Treasures, Boardroom. Highest-frequency surface in the app
(every home arrival, multiple times daily). Was missed in
v1.16.34's named lean; Hariom flagged it and we added it
here in lockstep before device test. ── */
html.high-contrast .home-practice{
border-bottom-color:rgba(255,255,255,0.2);
color:#FFFFFF;
}
html.high-contrast .home-practice:active{
background:rgba(255,255,255,0.05);
}
html.high-contrast .home-practice-glyph{
filter:none;
}
html.high-contrast .home-practice-name{ color:#FFFFFF; }
html.high-contrast .home-practice-desc{ color:rgba(255,255,255,0.78); }
html.daylight .home-practice{
border-bottom-color:rgba(242,210,122,0.22);
color:#F2D27A;
}
html.daylight .home-practice:active{
background:rgba(242,210,122,0.05);
}
html.daylight .home-practice-glyph{
filter:none;
}
html.daylight .home-practice-name{ color:#F5F1E8; }
html.daylight .home-practice-desc{ color:rgba(245,241,232,0.7); }
/* ── Tree breath halos (home idle, home pressed, threshold idle, threshold pressed) ──
Halo gradients are decorative; in HC/daylight they get re-tinted to
the mode palette so they don't surface a competing color, but stay
present (the gesture-acknowledgment is the practice — not just
ornament). The gratitude-ring SVG text loses its drop-shadow glow
in both modes for legibility.
v1.16.37 — Threshold tree gained idle glow (was: opacity:0 idle,
pressed-only); HC/daylight overrides for the idle state added in
parallel. Threshold ring text overrides added (sibling of home
ring). Per W-37: every cross-cutting mode gets every new surface
in the same release that ships the surface — no silent decay. */
html.high-contrast .home-tree-wrap::before,
html.high-contrast .threshold-sk-tree-wrap::before{
background:radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0) 70%);
}
html.high-contrast .home-tree-wrap.tree-pressing::before,
html.high-contrast .threshold-sk-tree-wrap.tree-pressing::before{
background:radial-gradient(circle, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0) 78%);
}
html.high-contrast .home-tree-indep-text,
html.high-contrast .threshold-sk-indep-text{
fill:#FFFFFF;
filter:none;
}
html.daylight .home-tree-wrap::before,
html.daylight .threshold-sk-tree-wrap::before{
background:radial-gradient(circle, rgba(242,210,122,0.22) 0%, rgba(242,210,122,0.08) 45%, rgba(242,210,122,0) 70%);
}
html.daylight .home-tree-wrap.tree-pressing::before,
html.daylight .threshold-sk-tree-wrap.tree-pressing::before{
background:radial-gradient(circle, rgba(242,210,122,0.36) 0%, rgba(242,210,122,0.18) 45%, rgba(242,210,122,0) 78%);
}
html.daylight .home-tree-indep-text,
html.daylight .threshold-sk-indep-text{
fill:#F2D27A;
filter:none;
}