/* Moss: a Mongoose reading room. The original pixel sprite is the only visible character. */
:root { --ink:#16251d; --parchment:#eef1e7; --gold:#a5ce9c; --gold-light:#c5e4ba; --gold-dim:#8daf8d; --mist:#b9cbb8; }
html,body { background:#141e18; color:#edf2e7; font-family: ui-monospace,"SF Mono",Consolas,monospace; }
body::before { background:radial-gradient(ellipse 65% 44% at 12% 14%,#4d6e5140,transparent 70%),radial-gradient(ellipse 60% 55% at 91% 85%,#7a855124,transparent 70%); }
#cosmos { display:none !important; }
#app { display:flex; flex-direction:column; width:min(100%,1240px); max-width:1240px; margin:auto; padding:25px clamp(16px,4vw,44px) 55px; align-items:stretch; }
.site-title { margin:0 0 13px; color:#a5d5a6; opacity:1; font:800 .68rem/1.5 ui-monospace,Consolas,monospace; letter-spacing:.18em; text-align:left; }
.moss-intro { max-width:760px; margin:0 0 28px; }
.moss-intro span { color:#d4bc86; font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.moss-intro h1 { margin:10px 0 10px; color:#f6f3e6; font-family:Georgia,serif; font-size:clamp(2.25rem,5vw,4.3rem); font-weight:500; letter-spacing:-.05em; line-height:1.07; }
.moss-intro p { max-width:660px; color:#bfcbbd; font-size:.86rem; line-height:1.7; }
.wisdom-stage { display:grid; grid-template-columns:minmax(270px,360px) minmax(0,1fr); grid-template-areas:"avatar modes" "avatar topiclabel" "avatar topics" "avatar install" "avatar reading" "avatar ask"; column-gap:clamp(20px,3vw,38px); align-items:start; }
.wisdom-stage > * { min-width:0; }
.avatar-section { grid-area:avatar; position:relative; top:auto; align-self:stretch; justify-content:center; min-height:550px; margin:0; padding:28px 20px; border:1px solid #718c70; border-radius:16px; background:radial-gradient(circle at 51% 24%,#486b4f 0,transparent 38%),linear-gradient(150deg,#314f39,#20372b 68%,#23332a); box-shadow:inset 0 0 0 1px #ffffff09; }
.avatar-section::before { content:''; position:absolute; inset:14px; pointer-events:none; border:1px solid #b6d5ae35; border-radius:16px; }
.avatar-outer { width:250px; height:250px; margin:0 0 20px; border-radius:16px; outline-offset:7px; }
.avatar-outer:focus-visible { outline:2px solid #e5f2d9; }
.avatar-outer .ring,.avatar-outer .sigil,.avatar-outer .orb,.avatar-outer .tap-pulse-ring,#sage-pipe,#sage-hand,.avatar-face svg,.avatar-face .wisp { display:none !important; }
.avatar-face { width:250px; height:250px; border:1px solid #b8d7ae; border-radius:16px; background:radial-gradient(circle at 50% 35%,#668361,#35533f 72%); box-shadow:inset 0 0 45px #172a1a70,0 12px 35px #071a1066; }
.avatar-face::before,.avatar-face::after { content:''; position:absolute; width:24px; height:24px; border-color:#f2f5e4; border-style:solid; pointer-events:none; }
.avatar-face::before { top:10px; left:10px; border-width:2px 0 0 2px; }
.avatar-face::after { bottom:10px; right:10px; border-width:0 2px 2px 0; }
#moss-mongoose { display:block; flex:none; width:220px; height:220px; image-rendering:pixelated; }
.avatar-outer:hover .avatar-face,#avatarOuter.speaking .avatar-face,#avatarOuter.thinking .avatar-face { border-color:#edf4df; box-shadow:inset 0 0 45px #172a1a70,0 0 35px #b3dba54f,0 12px 35px #071a1066; }
.tap-indicator { margin:3px 0 17px; }
.tap-label { color:#d7e9c8; font:700 .69rem/1.4 ui-monospace,Consolas,monospace; letter-spacing:.08em; animation:none; }
.sage-name { margin:4px 0 3px; color:#f7f4e5; font:500 2rem/1 Georgia,serif; letter-spacing:-.04em; }
.sage-title { max-width:260px; color:#c7d9c1; font:700 .65rem/1.5 ui-monospace,Consolas,monospace; letter-spacing:.08em; }
.mode-row { grid-area:modes; justify-self:stretch; width:100%; margin:0 0 21px; border:1px solid #5c7c62; border-radius:10px; background:#22382a; }
.mode-btn { min-height:44px; padding:11px 15px; color:#c5d5c3; font:750 .77rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:.03em; text-transform:none; }
.mode-btn.active { background:#b4dbae; color:#203525; }
.mode-btn:not(:last-child) { border-right:1px solid #5c7c62; }
.moss-topic-label { grid-area:topiclabel; margin:0 0 9px; color:#bcd8b8; font-size:.66rem; font-weight:800; letter-spacing:.15em; }
.rune-bar { grid-area:topics; justify-content:flex-start; max-width:none; gap:7px; margin:0 0 19px; animation:none; opacity:1; }
.rune,.rune-torin,.rune-eastern,.rune-science,.rune-love,.rune-death { min-height:32px; padding:7px 11px; border:1px solid #54745a; border-radius:10px; background:#263b2c; color:#d2decf; font:700 .69rem/1.2 ui-monospace,Consolas,monospace; letter-spacing:0; text-transform:none; }
.rune:hover,.rune.active,.rune-torin:hover,.rune-torin.active,.rune-eastern:hover,.rune-eastern.active,.rune-science:hover,.rune-science.active,.rune-love:hover,.rune-love.active,.rune-death:hover,.rune-death.active { border-color:#b6d9ad; background:#4b6c4d; color:#fffcee; box-shadow:none; }
.install-banner { grid-area:install; max-width:none; border-color:#61826b; background:#25442f; color:#d7e9cc; border-radius:10px; font:700 .75rem/1.4 ui-monospace,Consolas,monospace; letter-spacing:0; }
.scroll-wrap { grid-area:reading; max-width:none; margin:0 0 17px; animation:none; opacity:1; }
.scroll-ornament { display:none; }
.wisdom-scroll { min-height:235px; padding:29px clamp(20px,3vw,35px); border:1px solid #bdc5aa; border-radius:16px; background:linear-gradient(155deg,#f2efe0,#e7e9d9); box-shadow:0 11px 30px #07150a38; }
.wisdom-scroll::before,.wisdom-scroll::after { display:none; }
.wisdom-scroll.ai-mode { border-color:#b8d8b0; }
.wisdom-text { min-height:130px; color:#25372a; font:400 clamp(1.16rem,2.2vw,1.55rem)/1.5 Georgia,serif; font-style:normal; text-align:left; }
.wisdom-source { min-height:0; margin-top:13px; color:#49674d; font:800 .67rem/1.4 ui-monospace,Consolas,monospace; letter-spacing:.08em; text-align:left; }
.ai-badge { color:#31583d; border-color:#73977b; }
.ask-section { grid-area:ask; max-width:none; gap:9px; margin:0; animation:none; opacity:1; }
.ask-input { min-width:0; min-height:47px; border:1px solid #648266; border-radius:10px; background:#1a2f23; color:#f1f3e8; font:400 .86rem/1.4 ui-monospace,Consolas,monospace; font-style:normal; }
.ask-input::placeholder { color:#a6bca8; opacity:1; }
.ask-input:focus { border-color:#c0e2b9; box-shadow:0 0 0 3px #a7ce9b30; }
.ask-btn { min-height:47px; min-width:125px; border:1px solid #c3e7b7; border-radius:10px; background:#b7dcae; color:#1c3423; font:800 .77rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:0; text-transform:none; }
.ask-btn:hover { background:#d4eccb; color:#162b1c; }
.action-row { display:none; }
.notif-row { align-self:center; opacity:1; margin:24px 0 0; }
.notif-row + .notif-row { margin-top:7px !important; }
.notif-btn,.pwa-trigger-btn { min-height:37px; border:1px solid #55745c; border-radius:10px; color:#c3d8bd; font:700 .7rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:0; text-transform:none; }
.notif-btn:hover,.pwa-trigger-btn:hover,.notif-btn.active { border-color:#a9d2a0; background:#264531; color:#e8f3df; }
.divider { width:100%; max-width:none; border-color:#49614b; margin-top:26px; }
.history-label { align-self:flex-start; max-width:none; color:#c3d8bb; font:800 .68rem/1.4 ui-monospace,Consolas,monospace; letter-spacing:.15em; text-transform:uppercase; }
#history-list { max-width:none; }
#history-list > * { border-color:#49614b; }
.pwa-card { max-width:470px; border:1px solid #789c79; border-radius:16px; background:#20372a; box-shadow:0 30px 90px #030e07a6; }
.pwa-title { color:#f6f4e6; font:500 1.65rem/1.2 Georgia,serif; letter-spacing:-.03em; text-transform:none; }
.pwa-subtitle { color:#cbd9c5; font:400 .8rem/1.5 ui-monospace,Consolas,monospace; font-style:normal; opacity:1; }
.pwa-section-label { color:#bfe2b9; font:800 .67rem/1.4 ui-monospace,Consolas,monospace; letter-spacing:.12em; opacity:1; }
.pwa-step-num { border:1px solid #a1c49d; color:#e5f3dc; font:800 .7rem/1 ui-monospace,Consolas,monospace; }
.pwa-step-text { color:#e1ebdc; font:400 .78rem/1.5 ui-monospace,Consolas,monospace; }
.pwa-step-text strong { color:#ffffff; font-weight:800; }
.pwa-close { color:#e6f3dc; opacity:1; }
.pwa-note { color:#afc9af; font:400 .7rem/1.4 ui-monospace,Consolas,monospace; font-style:normal; opacity:1; }
.pwa-divider { background:#557258; }
.pwa-install-btn { border-color:#a3d09d; border-radius:10px; background:#b8dbaf; color:#1d3423; font:800 .73rem/1.3 ui-monospace,Consolas,monospace; }
#app :is(button,input,a,[role="button"]):focus-visible { outline:2px solid #c5e7ba; outline-offset:3px; }
@media(max-width:790px) { .wisdom-stage { grid-template-columns:1fr; grid-template-areas:"avatar" "modes" "topiclabel" "topics" "install" "reading" "ask"; } .avatar-section { min-height:0; margin:0 0 20px; padding:27px 16px; } .mode-row { margin-bottom:17px; } }
@media(max-width:480px) { #app { padding:21px 17px 43px; } .moss-intro h1 { font-size:2.5rem; } .avatar-section { border-radius:16px; } .moss-topic-label::after { content:'  ·  SWIPE TO EXPLORE →'; color:#9bb89c; } .rune-bar { flex-wrap:nowrap; overflow-x:auto; padding:0 0 9px; scrollbar-width:none; } .rune-bar::-webkit-scrollbar { display:none; } .rune { flex:none; } .wisdom-scroll { min-height:200px; padding:23px 20px; } .wisdom-text { min-height:115px; } .ask-section { flex-direction:column; } .ask-btn { width:100%; } }
@media(prefers-reduced-motion:reduce) { .avatar-section,.site-title { animation:none; opacity:1; } .avatar-face,.avatar-outer { animation:none !important; } }